Bilder
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:
Hinweis: Kopiere das Bild nach dem Download in das selbe Verzeichnis in dem sich auch die HTML-Datei befindet (Voraussichtlich „C:\inetpub\wwwroot“).
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:
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.
Beispiel 3 - Gleiches Seitenverhältnis (nur „width“ gesetzt)
HTML-Datei:
Ergebnis im Browser:
Beispiel 4 - Verzerrte Darstellung (beide Attribute gesetzt)
HTML-Datei:
Ergebnis im Browser:
Beispiel 5 - Skalierte Darstellung („width“ in Prozent)
HTML-Datei:
Ergebnis im Browser:
Abschlussübung
Als Abschlussübung für dieses Kapitel, kannst du alle oben gezeigten Beispiele nachbauen.
Hier zur Kontrolle alle verwendeten HTML-Dateien als Download:
Das Bild gibt es weiter oben auf dieser Seite als Download!