Dies ist eine alte Version des Dokuments!
Inhaltsverzeichnis
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
Imagesmaps sind Bilder von denen bestimmte Bereiche als Link verknüpft sind. Die folgende HTML-Datei demonstriert die Wirkungsweise:
<html lang=„de“>
<head> <meta charset="utf-8"> <title> Bilder </title> </head > <body> <p align="center"><img width="718" height="539" border="0" usemap="#Map" src="beispielmap.jpg"></p>
<map name=„Map“> <area shape=„circle“ coords=„550,430,40“ href=„http://www.wikipedia.de“> <area shape=„circle“ coords=„333,222,40“ href=„http://www.google.de“> <area shape=„circle“ coords=„590,90,40“ href=„http://www.facebook.de“> <area shape=„circle“ coords=„135,390,40“ href=„http://www.youtube.de“> </map>
</body>
</html> </code>
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.)
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.