Bilder

Das Bild-Element

Mit dem Bild-Element („<img src=“bsp.png“ />“) können Bilder in HTML-Seiten eingebunden werden. Das „img“ ist die Abkürzung von „image“, dem englischen Wort für Bild. Mit dem „src“-Attribut wird der Pfad und der Name des Bildes angegeben. Das Bild-Element ist ein inhaltsloses Element und muss im Start-Tag geschlossen werden.

Das Bild selber muss dabei physisch in einem von der HTML-Datei aus erreichbaren Verzeichnis liegen. Liegt das Bild im gleichen Verzeichnis wie die HTML-Datei, braucht lediglich der Name des Bildes angegeben zu werden. Liegt das Bild in einem Unterverzeichnis, muss der Pfad dorthin ebenfalls mit angegeben werden.

(z. B. „<img src=“Unterverzeichnis/bsp.png“ />“)

Beispiel 1

HTML-Datei:

Ergebnis im Browser:

Das passende Bild für das Beispiel gibt es hier als Download:

Download - „html.png“ für Beispiel 1

html.png

Portable Network Grafik Format 10.1 KB

Download

Hinweis: Kopiere das Bild nach dem Download in das selbe Verzeichnis in dem sich auch die HTML-Datei befindet (Voraussichtlich „C:\inetpub\wwwroot“).

Das „alt“-Attribut

Mit dem „alt“-Attribut kann ein Text angegeben werden, der angezeigt wird, wenn das Bild nicht geladen werden kann. Das „alt“ ist die Abkürzung von „alternative“ und heißt übersetzt, „Alternative“, d. h. also ein Text, der als Alternative zum Bild angezeigt werden kann.

Beispiel 2

Erweitere das vorhergehende Beispiel um einen Alternativtext und benenne das Bild um in „html2.png“ damit es nicht geladen werden kann.

HTML-Datei:

Ergebnis im Browser:

Abmessungen von Bildern

Mit den Attributen „width“ (dt. Breite) und „height“ (dt. Höhe) kann die Breite und Höhe von Bildern angegeben werden. Werden diese Attribute nicht verwendet, wird das Bild in Originalgröße angezeigt. Soll das Seitenverhältnis beibehalten werden, braucht nur einer der Werte angegeben zu werden, der andere wird dann entsprechend dem Seitenverhältnis, automatisch gesetzt. Für die Breite kann auch ein Prozentwert angegeben werden. Dabei nimmt das Bild dann den angegebenen Prozentwert der verfügbaren Breite der Webseite ein. D. h. das Bild wird dabei mit skaliert, wenn die Breite des Browserfensters verändert wird. Wird die Breite in „%“ angegeben, wird außerdem die Angabe für die Höhe ignoriert.