Was habe ich hierbei falsch gemacht? Wieso funktionert es nicht?

Ich will mit HTML ein Bild programmieren. Wie man hier jedoch sieht, klappt es nicht:

<!DOCTYPE html>
<html>
<article><center><img src=Untitled191_20230713131112.pnge="width:125px;height:100px;">
</body>
</html>

Das ist mein code. Wenn ich in laufen lasse, passiert jedoch nichts. Nur ein kleines Bild symbol erscheint.

Bild zum Beitrag

Bei anderen Bildern aus dem Internet klappt es, nur nicht mit meinem.

PS: Das hier ist nicht mein account

2 Antworten

Ben Sellin

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Informatikkaufmann

14.07.2023, 16:43

Hallo JackieR55,

<!DOCTYPE html>
<html>
<article><center><img src=Untitled191_20230713131112.pnge="width:125px;height:100px;">
</body>
</html>

Article Tag eröffnet und nicht wieder geschlossen. Der Article Tag ist sowieso unnötig. Bild kannst du auch einfach so einfügen
Du hast mit DOCTYPE html ein HTML5 Dokument erstellt. HTML5 unterstützt das Center Tag nicht mehr wie hier zu lesen ist: https://www.w3schools.com/tags/tag_center.ASP
Dein IMG Tag ist fehlerhaft. Die Dateiendung pnge habe ich noch nie gesehen und des weiteren passt die Zeichensetzung der Anführungszeichen nicht. Und was hat das =-Zeichen hinter dem Dateinamen verloren?
Die Width und Height Angaben sind falsch. Da fehlen Anführungszeichen und du brauchst keine px anzugeben, da für dieses Attribut automatisch px genommen wird.
Du hast keinen einleitenden Body Tag
Dir fehlt ein Alt-Attribut in deinem IMG-Tag wenn es korrekt sein soll.
Es fehlt ein Title-Tag innerhalb des ebenso fehlenden Head-Tags
Es fehlt ein lang-Attribut für die Sprache der Webseite

Alles mal korrigiert:

<!DOCTYPE html>
<html lang="de">
<head>
  <title>Test fuer Bild</title>
</head>
<body>
<img src="Untitled191_20230713131112.png" width="125" height="100" alt="Test-Bild">
</body>
</html>

Du kannst auch selber mal deinen HTML Code unter https://validator.w3.org/#validate_by_input eingeben. Da kannst du das alles verifizieren lassen und um einiges besser erklärt bekommen was deine Fehler waren. Dein Code ergibt 10 Fehler in diesem Validator.

Nicht alle der aufgelisteten Punkte sind tatsächlich relevant um das Bild angezeigt zu bekommen, aber nach W3C wäre es so wie ich es dir jetzt vorgegeben habe korrekt.

Ben

JackieR55

Fragesteller

14.07.2023, 17:06

Danke!

jo135

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Programmiersprache

14.07.2023, 16:34

<img src=Untitled191_20230713131112.pnge="width:125px;height:100px;">

Da ist etwas völlig vermurkst. Gemeint war vermutlich

<img src="Untitled191_20230713131112.png" style="width:125px;height:100px;">

JackieR55

Fragesteller

14.07.2023, 16:40

Danke für die Antwort! Es hat geklappt :)

jo135

14.07.2023, 17:47

@JackieR55

Super. Aber wie du in der anderen Antwort sehr ausführlich lesen kannst, gibt es in dem HTML noch jede Menge andere Probleme (Browser sind halt recht tolerant, soweit es noch halbwegs entzifferbar ist).

WILKOMMEN

             </body>

DANKE IM VORRAUS

...zur Frage

Fehler bei HTML Bild?

Lerne letzterzeit aus Spaß ein bisschen HTML.

Jedoch, wenn ich ein Bild hinzufügen möchte mit:

<img src=„https://x.y.de“> kommt da nur folgendes:

Das Bild wird also nicht ganz angezeigt.

Liegt es vllt. daran, dass ich „width“ und „height“ nicht angegeben habe?

...zur Frage

Warum werden nicht alle Bilder in einem "versteckt" (overflow: hidden;)?

Guten Tag liebe Community,

ich bin dabei, einen Slider zu bauen und leider "versteckt" sich nur ein Bild in einem. Das dritte Bild bleibt wie schon davor nur in seiner Position. Liegt das eventuell an dem <img>?

Beim ersten <img>: picture1.jpg.jpg
Beim zweiten <img>: picture2.jpg.jpg
Beim dritten <img>: o233-ai4Q4-unsp.jpg -> hier ganz anderer Name

Welche Lösungen gibt es für dieses Problem?

Hier der wichtigste (Teil-)Code:

Der CSS-Code:

.Slider {
  width: 800px;
  height: 500px;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

HTML-Code (ein Teil):

<div class="Slider">
  <div class="Slides">
    <input type="radio" name="radio-btn" id="radio1">
    <input type="radio" name="radio-btn" id="radio2">
    <input type="radio" name="radio-btn" id="radio3">
    <div class="slidefirst">
      <img src="picture1.jpg.jpg" alt="" width="160" height="145" />
    </div>
    <div class="slidesecond">
      <img src="picture2.jpg.jpg" alt="" width="160" height="145" />
    </div>
    <div class="slidethird">
      <img src="o233-ai4Q4-unsp.jpg" alt="" width="160" height="145" />
    </div>
    <div class="navigation auto">
      <div class="auto-btn-1"></div>
      <div class="auto-btn-2"></div>
      <div class="auto-btn-3"></div>
    </div>

...zur Frage

HTML / CSS: Warum lässt sich das Bild nicht nach links bewegen?

HTML:

<div class="mittecrew_png">
  <img src="mittecrew.png" height="105"; widht="1505";>
  <a href="#"></a>
</div>

CSS:

.mittecrewpng {
  margin-left: 100px;
}

...zur Frage

Mit html Bilder kleiner/größer machen?

Ich arbeite gerade aus spaß an meiner html Seite und HTML möchte meine Bilder nicht kleiner und größer machen ich benutze diesen Tag:

"width" und "height" funktionieren aber nicht woran könnte das liegen?

...zur Frage

Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

/* Dienstleistungen*/

.dienstleistungen{

justify-content: center;

width: 75%;

}

.mofa-zündung-service{

height: 50%;

width: auto;

}

.mofa-getriebe-revisionen{

height: 25%;

width: auto;

align-self: top;

}

.mofa-vergaser-tuning{

height: 25%;

width: auto;

align-self: top;

}

.mofa-kolben-ersatzteile{

height: 25%;

width: 50%;

}

/*!Dienstleistungen*/

HTML:

<h3>Dienstleistungen</h3>

<li><a href="#">Service</a></li>

<li><a href="#">Revisionen</a></li>

<li><a href="#">Tuning</a></li>

<li><a href="#">Ersatzteile</a></li>

</div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

...zur Frage

Wie kann ich bei dieser Website den Link nach oben rechts verschieben?

Ich habe einen Link erstellt, der mich wieder zurück zur Hauptwebsite bringt. Nur möchte ich, dass der Link oben rechts ist. Kann mir da jemand helfen?

Die Webseite:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preise</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
      padding-left: 100px;
      padding-right: 100px;
    }

    .preise-navbar {
      padding-left: 100px;
      color: rgb(52, 57, 56);
    }

    .preise-container {
      background-color: white;
      padding: 16px;
    }

    table {
      border-collapse: collapse;
    }

    td,
    th {
      padding: 16px;
      border-bottom: 2px solid #8ebf42;
      text-align: center;
      padding-left: 100px;
    }

    a {
    }
  </style>
</head>
<body>
  <div class="preise-container">
    <h1 class="preise-navbar">Preise:</h1>
  </div>
  <table>
    <tr>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td>Erwachsene:</td>
      <td>20€</td>
    </tr>
    <tr>
      <td>Kinder unter 18</td>
      <td>10€</td>
    </tr>
    <td>Kinder unter 6</td>
    <td>3€</td>
  </table>
  <a href="Index.html">Zurück</a>
</body>
</html>

...zur Frage

HTML mehrere onclick?

<script>function play() {var audio = document.getElementById("sd_00143");audio.play();}</script><a href="#A1Acura RSX SH_"><img src="bilder/NFSU2/A1Acura RSX SH_.jpg" id="A1Acura RSX SH_" width="220" height="120" onclick="play()"><audio id="sd_00143" src="sd_00143.mp3"></audio></a>

<script>function play() {var audio = document.getElementById("Sexy Beam");audio.play();}</script><a href="#B4Audi A3 nude tits_"><img src="bilder/NFSU2/B4Audi A3 nude tits_.jpg" id="B4Audi A3 nude tits_" width="220" height="120" onclick="play()"><audio id="Sexy Beam" src="Sexy Beam.wav"></audio></a>

Beide Bilder spielen beim Anklicken Sexy Beam.wav. Kann jemand die multiplen Audiodateiaufrufe in einer einzigen HTML-Seite korrigieren?

...zur Frage

Text unter Bild in HTML hinzufügen?

Ich habe ein Bild. Darunter habe ich ein Text platziert. Allerdings geht der Horizontal von links nach rechts, was es auch soll. Nur soll er da anfangen, wo auch das Bild beginnt und enden, wo das Bild endet. In den zwei Bildern könnt ihr erkennen, wie es es gerade habe und nicht will und wie ich es gerne haben würde.

<!DOCTYPE html>
<html>
<head>
    <title>Film- und Serienbeschreibungen</title>
  


  <style>
    img {
        display: block;
        margin: 0 auto;
        width: 1000px;
        border-radius: 10px;
    }


    body {
        text-align: center;
    }


    p {
        
    }
  </style>
</head>
  <body>
    <img src="mrrobotscene.jpg">
    <h1>Mr. Robot - Beschreibung</h1>
    <p>Mr. Robot ist eine US-amerikanische Fernsehserie, die von Sam Esmail entwickelt wurde. Die Serie handelt von Elliot Alderson, einem jungen Programmierer, der für eine Cyber-Sicherheitsfirma arbeitet und in seiner Freizeit zum Hacker wird. Elliot leidet unter sozialen Ängsten und Depressionen und verfällt in eine Art Schizophrenie, die von seinem imaginären Freund, Mr. Robot, ausgelöst wird</p>
    
  </body>
</html>

...zur Frage

HTML input in JavaScript-Variable?

Wenn ich in HTML ein form ausfülle und abschicke wie bekomme ich dann das eingegeben im Input in eine JavaScript Variable. Habe provisorisch mal das hier gemacht und komme nicht weiter. Danke für eure Hilfe :)

<!DOCTYPE html>

<html>

<head>

<title>Input to Variable</title>

var input = "Wie bekomme ich den eingegebenen input hier hin?"

</script>

</head>

<body>

<button>Submit</button>

</body>

</html>

...zur Frage

was ist hier falsch gelaufen?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rocket vs Aliens</title>
  <style>
    canvas {
      background-color: gray;
    }
    
  </style>
  <script>
    let KEY_SPACE = false;
    let KEY_UP = false;
    let KEY_DOWN = false;
    let canvas;
    let ctx;
    let backgroundImage = new Image();
    let rocket = {
      x: 100,
      y: 200,
      width: 200,
      height: 80,
      src: 'img/rocket.png'
    };
    let spaceship = {
      x: 500,
      y: 200,
      width: 100,
      height: 40,
      src: 'img/spaceship.png'
    };
    document.onkeydown = function(e) {
      if (e.keyCode ==32) { // Leertaste gedrückt
        KEY_SPACE = true;
      }
      if (e.keyCode ==32) { // unten gedrückt
        KEY_SPACE = true;
      }
    
      if (e.keyCode ==38) { // Oben gedrückt
        KEY_UP = true;
      }
    }
    document.onkeyup = function(e) {
      if (e.keyCode ==32) { // Leertaste losgelassen
        KEY_SPACE = false;
      }
    
      if (e.keyCode ==38) { // oben losgelassen
        KEY_UP = false;
      }
      if (e.keyCode ==40) { // unten losgelassen
        KEY_DOWN = false;
      }
    }
    function startGame () {
      canvas = document.getElementById('canvas');
       ctx = canvas.getContext('2d');
      loadImages();
      draw();
      // calculate
    }
    function loadImages() {
      backgroundImage.src = 'img/background.png';
      rocket.img = new Image();
      rocket.img.src = rocket.src;
      spaceship.img = new Image();
      spaceship.img.src = spaceship.src;
    }
    function draw() {
      ctx.drawImage(backgroundImage, 0, 0);
      ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.widht, rocket.height);
      
      requestAnimationFrame(draw);
    }
  </script>
</head>
<body onload="startGame()">
<canvas id="canvas" width="720" height="480"></canvas>
</body>
</html>

...zur Frage

Wie kann ich ein HTML Bild mittig ausrichten ohne Größenänderung?

ich habe es folgendermaßen probiert:

<style type="text/css">
<!--
img.center {
position: absolute;
left: 50%;
width: 400px;
margin-left: -200px; /* negative Hälfte von width:400px */
top: 50%;
height: 150px;
margin-top: -75px; /* negative Hälfte von height:150px */
}
-->
</style>
 
</head>
<body>
 
     <img class="img.center" src="/img/meinbild.jpg">
 
</body>
</html>

jedoch wird das bild damit leider gestaucht. das bild soll aber immer im mittelpunkt des bildes zentriert werden und seine länge-breite-proportion behalten - also keine eierköpfe bekommen. die größe des bildes soll mit der größe des fensters mitwachsen...

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen