Einbinden von Bildern - Imagemaps

Natürlich können in HTML-Seiten auch Bilder eingebunden werden. Dazu verwendet man den <img>-Tag. Innerhalb des <img>-Tags wird mit dem Attribut <src> die Bildqelle angegeben. Erlaubt sind die Dateiformate .jpg, .gif und png.

Neben src gibt es für den <img>-Tag noch weitere Attribute:

Attribut	Wirkung
width='b'	Bild in der Breite b darstellen, b kann dabei in Prozent und in Pixeln angegeben werden, Wenn nur die Breite angegeben wird, wird die Höhe entsprechend skaliert.
height='h'	Bild in der Höhe h darstellen, h kann dabei in Prozent und in Pixeln angegeben werden, Wenn nur die Höhe angegeben wird, wird die Breite entsprechend skaliert.
align	horizontale Ausrichtung: left, center, right
valign	vertikale Ausrichtung: top, middle

Die Verwendung wird in der folgenden Quelltext demonstriert:

Beispiel 1

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title> Bilder </title> </head > <body> <p>Hier ist ein Beispielbild: <img width='200' src='tux.png'> ,welches sich mitten im Text befindet. </p> </body> </html>

Bilder können auch als Links benutzt werden. Dazu schreibt man den <img>-Tag in den <a>-Tag hinein.

Beispiel 2

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title> Bilder </title> </head > <body> <p>Ein Link auf mein liebstes Betriebssystem:</p> <a href="http://www.kernel.org"><img width=100 src="tux.png"></a> </body> </html>

Bilder können auch als Links benutzt werden. Dazu schreibt man den <img>-Tag in den <a>-Tag hinein.

Imagemaps

Aufgaben

Aufgabe 1

Teste die Beispiele 1 und 2. Probiere dabei verschiedene Bildattribute aus. (Das Bild tux.png muss im selben Ordner wie die HTML-Datei sein.)

html:tux.png

Aufgabe 2

Lade dir sich aus dem Internet ein Bild herunter, welches zu deiner Lieblingseite im Internet passt. Erzeuge entsprechend dem Beispiel 2 eine HTML-Seite, in der man über einen Bildlink zu ihrer Lieblingsseite gelangt.