Dies ist eine alte Version des Dokuments!

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="12_tux.png"></a>
  </body>
</html>

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