Bilder

Schauen wir uns jetzt einen weiteren wichtigen Teil von Webseiten an: Bilder. In der Lektion über grundlegende HTML-Tags haben wir das Element br kennengelernt, das nur ein öffnendes Tag hat. Elemente wie dieses, ohne Inhalt und ohne schließendes Tag, heißen leere Elemente (englisch void elements), und ein Bild ist ein weiteres davon. Ein Bild erstellen wir so:

<img src="adresse-des-bildes">

Das Element img (img steht für englisch image, Bild) hat das Attribut src (source, Quelle), dessen Wert die Adresse des Bildes ist. Genau wie bei Links (dem Element a) können wir absolute und relative Adressen verwenden.

Wie br schreiben wir img ohne Schrägstrich. Du kannst auch <img src="adresse-des-bildes" /> sehen: Das ist eine ältere Schreibweise für dasselbe.

Wir haben gesagt, dass in der Adresse ./hund.html das ./ „im aktuellen Ordner“ bedeutet: Der Browser sucht hund.html im Ordner der HTML-Datei mit dem Link.

Eine relative Adresse kann auch nur mit einem Schrägstrich beginnen, zum Beispiel /hund.html. Dann sucht der Browser hund.html im Stammordner des Projekts, dem Ordner, der alle anderen enthält.

Unser Bild hat die Adresse /learn/html/cats.webp: Es liegt im Stammordner von startcoder.com, im Ordner learn und dessen Unterordner html. (.webp ist ein Bildformat, wie .jpg oder .png.)