Eine Webseite nur mit Text ist auf Dauer langweilig. In diesem Kapitel lernst du, wie man Bilder einfügt - eines der wichtigsten Elemente überhaupt, um eine Webseite lebendig zu machen.

Das <img>-Element

<img src="ball.jpg" alt="Ein weißer Fußball auf grünem Rasen">

Wie bei <br> und <hr> gibt es keinen schließenden Tag - <img> ist ein einzelnes, selbstschließendes Element. Zwei Attribute sind hier neu:

• src ("source", also "Quelle"): der Pfad zur Bilddatei - genau wie href bei Links, kann das ein relativer Pfad (eigene Datei) oder ein absoluter Pfad (fremde Webseite) sein.
• alt ("alternative text"): eine Textbeschreibung des Bildes.

Warum das alt-Attribut so wichtig ist

Das alt-Attribut hat gleich drei wichtige Aufgaben:

1. Menschen, die blind sind oder schlecht sehen, lassen sich Webseiten von einem Screenreader vorlesen. Der Screenreader liest den alt-Text vor, weil er das Bild selbst natürlich nicht "sehen" kann.
2. Wenn ein Bild aus irgendeinem Grund nicht geladen werden kann (falscher Dateiname, langsames Internet), zeigt der Browser stattdessen den alt-Text an.
3. Suchmaschinen wie Google lesen den alt-Text, um zu verstehen, was auf einem Bild zu sehen ist - das hilft deiner Seite, gefunden zu werden.

Einen Bilder-Ordner anlegen

Bevor wir ein Bild einfügen können, brauchen wir eins. Erstelle in deinem Projektordner einen neuen Unterordner namens bilder und lege dort ein Foto ab (zum Beispiel ein eigenes Foto oder ein Bild, das du legal benutzen darfst - dazu mehr im nächsten Kapitel).

meine-webseite/
  index.html
  spieler.html
  bilder/
    ball.jpg

Relative Pfade in einen Unterordner

Um auf eine Datei in einem Unterordner zu verweisen, schreibst du den Ordnernamen, einen Schrägstrich, und dann den Dateinamen:

<h2>Unser Ball</h2>
<img src="bilder/ball.jpg" alt="Ein weißer Fußball auf grünem Rasen">

Speichere und schau dir das Bild im Browser an. Falls das Bild nicht angezeigt wird, prüfe genau: Liegt die Datei wirklich in bilder/? Ist der Dateiname (inklusive Groß-/Kleinschreibung und Dateiendung wie .jpg oder .png) exakt richtig geschrieben?