HTML-Primer: Was in HTML-Büchern fehlt

Bilder in HTML

Hyper-Hyper

Das schöne an Hypertext ist, dass man zu anderen Seiten linken kann (das kommt im nächsten Kapitel) und dass man andere Inhalte direkt in eine Text-Seite einbinden kann. So zum Beispiel Bilder (aber auch Audio- oder Video-Dateien).

Beim Einbinden von Bildern ist es eigentlich egal, ob das Bild lokal bei uns liegt oder ob es sich irgendwo im WWW befindet.

Das IMG-Tag

Bild heißt auf Englisch Image und daher heißt das HTML-Tag zum Einbinden von Bildern IMG. Die Grundform geht so:

<img src="meinbild.jpg"></img>

In diesem Beispiel will ich ein JPEG-Bild einbinden, welches unter dem Dateinamen meinbild.jpg im gleichen Verzeichnis liegt, wie meine HTML-Seite. Ein anderes Beispiel benutzt ein Bild von einem anderen Website:

<img src="http://www.plan-deutschland.de/b/b4.gif"></img>

Attribute des IMG-Tags

Man soll einem Bild auf jeden Fall eine Beschreibung hinzufügen. Dazu gibt es für das IMG-Tag das Alt-Attribut. Es gibt viele Gründe dafür: Der Name des Attributes, Alt, steht für Alternative. Es kann ja sein, dass die Seite nicht mit einem normalen Web-Browser aufgerufen wird, sondern mit einem Programm oder Gerät, das keine Bilder anzeigen kann. In dem Fall könnte es den Text im Alt-Attribut anzeigen. Suchmaschinen können das Alt-Attribut auch verwenden, um zu Erkennen, was auf dem Bild angezeigt wird und es so als Suchergebnis präsentieren. Die meisten Browser zeigen übrigens den Alt-Text an, wenn man mit der Maus über das Bild fährt.

Hier das obige Bild mit einem Alt-Attribut:

<img src="http://www.plan-deutschland.de/b/b4.gif" alt="Werbefoto von Plan Deutschland"></img>

Und schließlich lernen wir noch kennen, was das Web im Innersten zusammenhält, nämlich Hypertext-Links.

© Hermann Faß, 2009