Ein Bild sagt mehr...

Um ein Bild in unser HTML-Dokument einzufügen, müssen wir es von einer externen Quelle laden. Die gängigen Formate im Web sind jpg, png und gif, die jeweils ihre eigenen Vorzüge und Nachteile haben (Für Vektorgrafiken wird man in Zukunft oftmals das Format svg verwenden). Für Fotos, die ja eine hohe Anzahl an Farben aufweisen, ist generell das Format jpg am besten geeignet. Wir benötigen für unseren Test also ein Foto im jpg-Format, an dem wir natürlich die nötigen Rechte besitzen und das wir für den Einsatz im Web entsprechend skaliert und komprimiert haben. Ich verwende für unseren Test einen Schnappschuss des schönsten bayerischen Sees, die Datei heißt see.jpg (nein, es ist weder der Tegernsee, noch der Schliersee und auch nicht der Ammersee!).

Wollen wir nun das Bild in unser bisheriges Dokument einbinden, so verwenden wir dafür den <img>-Tag. Dies ist ein einzelstehender Tag. Das wichtigste Attribut ist die Quelle, d.h. der Dateipfad, abgeleitet von engl. "Source" heißt dieses Attribut src. Die Wert für src wird in Anführungszeichen angegeben, möglich ist hier zum einen die Verwendung eines relativen Pfades zur Bilddatei:

<img src="see.jpg">

Mit dieser Angabe würde der Browser nach der Datei "see.jpg" im gleichen Ordner suchen, in der die HTML-Datei auf unserer Festplatte oder auch auf dem Server gespeichert ist. Da hier relative Pfadangaben zulässig sind, könnte man z.B. auch alle Bilder in einen Unterordner "bilder" speichern, was oftmals übersichtlicher ist. Dann müsste man die Quellenangabe entsprechend anpassen:

<img src="bilder/see.jpg">

Der Browser geht auch hier vom Ordner aus, in dem die HTML-Datei gespeichert ist, dann sucht er den Unterordner "bilder" und in diesem Ordner die Datei "see.jpg". Bitte beachten Sie bei der Arbeit mit Webtechnologien, dass derartige Namen/Pfade exakt übereinstimmen müssen, d.h. beachten Sie Groß- und Kleinschreibung! Am besten vermeiden Sie in den Dateinamen auch Umlaute, da diese auf Servern oft zu Problemen führen.

Eine weitere Möglichkeit, den Pfad zur Bilddatei anzugeben ist als komplette URL. Dadurch können Sie (sofern dies rechtlich zulässig ist) auch Bilder in Ihrer Website anzeigen, die gar nicht auf dem gleichen Server liegen, wie Ihre HTML-Datei. In unserem Beispiel können wir also auch den oben verlinkten Pfad auf das Bild im Upload-Verzeichnis von WordPress verwenden:

<img src="https://webdev.raphael-rossmann.de/wp-content/uploads/see.jpg">

Neben dem Attribut src gibt es noch weitere: aus Gründen der Zugänglichkeit und Nutzerfreundlichkeit sollte man wie beim Hyperlink einen title für das Bild setzen, der einem als Tooltip angezeigt wird, wenn man über das Bild fährt. Meist wir der Inhalt des Bildtitels zusätzlich auch in das alt-Attribut übernommen, dieser Text wird angezeigt, falls das Bild aus irgendeinem Grund nicht geladen werden kann.
Auch die Höhe und Breite das Bildes kann innerhalb des <img>-Tags bestimmt werden, allerdings ist dies inzwischen ein etwas umstrittener Weg, die Größe von Bildern zu bestimmen - wie wir sehen werden, versuchen man die Darstellung von Elementen im Browser heute möglichst nicht im HTML-Markup sondern im Stylesheet (css) zu steuern, um Inhalt und Aussehen zu trennen. Der Vollständigkeit halber stellen wir aber über das Attribut width die Breite des Bildes auf "600" ein, was der Browser als 600 Pixel interpretiert. Die Höhe wird sodann proportional berechnet, d.h. das Bild wird nicht verzerrt, wenn die Höhe nicht mit angegeben wird.

Unser fertiger Tag lautet somit:

<img src="https://webdev.raphael-rossmann.de/wp-content/uploads/see.jpg" alt="Ein schöner See mit W" title="Ein schöner See mit W" width="600">

In unserem Beispiel-HTML können wir nun das Bild platzieren. Nach dem zweiten Absatz fügen wir dazu ein weiteren ein und danach den <img>-Tag.

Ob das Bild nun tatsächlich geladen wird, zeigt die Ausgabe im Browser. Auch wenn uns der <img>-Tag nun seit den Urzeiten des Web wacker unterstützt hat, sei an dieser Stelle schon vorauseilend erwähnt, dass die Zukunft der Bilder im Web wohl eher im HTML5-Tag <picture> liegen wird: Denn dieser Tag wird uns die nötige Flexibilität geben, die wir in Zeiten von mobiloptimierten Websites (Stichwort "Responsive Webdesign") brauchen und z.B. die Angabe von unterschiedlichen Bildgrößen in Abhängigkeit von der Auflösung des Bildschirmes ermöglichen. Für unserer ersten Schritte in der Welt von HTML ist der gute alte <img>-Tag aber nach wie vor hinreichend.

Zusätzliche Tags für die Strukturierung der gesamten Seite lernen wir im nächsten Abschnitt kennen.

> weiter