HTML Erste Schritte – Lektion 6 – Bilder

26/05/2025, by Ivan

Bilder sind ein sehr wichtiges Element einer Website; ohne sie wirkt die Seite grau und unattraktiv. Bilder werden für die Gestaltung der Website, für Fotogalerien und einfach als Bilder eingesetzt.

Bilder werden mit dem Tag IMG eingefügt (beachten Sie, dass wir nicht „image“ schreiben, sondern nur „img“). Das IMG-Tag ist ein selbstschließendes Tag <img />, also ohne ein schließendes Gegenstück.

Das wichtigste Attribut des IMG-Tags ist das Attribut src. Es funktioniert ähnlich wie href bei Links: Im src-Attribut geben wir den Pfad zum Bild an. Der Pfad kann wie bei Links relativ oder absolut sein.

Hier ist der Code unserer index.html:

<html>
  <head>
    <title>Mein erstes HTML-Dokument</title>
  </head>
  <body>  
    <h1>Mein erstes HTML-Dokument</h1>
    <p>
      <a href="files/file.html">Link zum zweiten Dokument</a>
    </p>
  </body>
</html>

Erstellen wir nun einen Ordner namens images neben dieser Datei. In diesen Ordner kopieren wir die Bilddatei. Angenommen, die Bilddatei heißt image.jpg. Fügen wir nun das img-Tag in den Text der index.html ein.

<html>
  <head>
    <title>Mein erstes HTML-Dokument</title>
  </head>
  <body>  
    <h1>Mein erstes HTML-Dokument</h1>
    <p>
      <img />
    </p>
    <p>
      <a href="files/file.html">Link zum zweiten Dokument</a>
    </p>
  </body>
</html>

Wir haben das Tag eingefügt, nun schreiben wir den Pfad zum Bild – wir verwenden einen relativen Pfad, der mit ./ beginnt:

./

Fügen wir den Ordnernamen hinzu, in dem das Bild liegt:

./images/

Und dann den Dateinamen:

./images/image.jpg

Jetzt fügen wir den Pfad in das src-Attribut ein.

<html>
  <head>
    <title>Mein erstes HTML-Dokument</title>
  </head>
  <body>  
    <h1>Mein erstes HTML-Dokument</h1>
    <p>
      <img src="./images/image.jpg" />
    </p>
    <p>
      <a href="files/file.html">Link zum zweiten Dokument</a>
    </p>
  </body>
</html>

Im Moment wird das Bild in Originalgröße angezeigt, aber wir können seine Größe mit den Attributen Höhe und Breite anpassen.

Das Breiten-Attribut des img-Tags heißt width, das Höhen-Attribut heißt height. Wir können nur die Breite, nur die Höhe oder beides gleichzeitig angeben, zum Beispiel so:

<html>
  <head>
    <title>Mein erstes HTML-Dokument</title>
  </head>
  <body>  
    <h1>Mein erstes HTML-Dokument</h1>
    <p>
      <img src="./images/image.jpg" width="200" />
    </p>
    <p>
      <a href="files/file.html">Link zum zweiten Dokument</a>
    </p>
  </body>
</html>

Oder nur die Höhe:

<html>
  <head>
    <title>Mein erstes HTML-Dokument</title>
  </head>
  <body>  
    <h1>Mein erstes HTML-Dokument</h1>
    <p>
      <img src="./images/image.jpg" height="400" />
    </p>
    <p>
      <a href="files/file.html">Link zum zweiten Dokument</a>
    </p>
  </body>
</html>

Wenn Sie sowohl Höhe als auch Breite angeben, achten Sie darauf, dass die Proportionen zur Originalgröße passen, sonst wird das Bild verzerrt.

<html>
  <head>
    <title>Mein erstes HTML-Dokument</title>
  </head>
  <body>  
    <h1>Mein erstes HTML-Dokument</h1>
    <p>
      <img src="./images/image.jpg" height="400" width="100" />
    </p>
    <p>
      <a href="files/file.html">Link zum zweiten Dokument</a>
    </p>
  </body>
</html>

Extra Block Types (EBT) - Neue Erfahrung im Layout Builder❗

❗Extra Absatztypen (EPT) - Erfahrung mit neuen Absätzen

HTML Erste Schritte – Lektion 6 – Bilder