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.