HTML und XHTML

Bilder und Grafiken

das IMG-Element

Im Zusammenhang mit Bildern kriegen wir es nun zum ersten Mal mit einem leeren Element zu tun. Nicht-leere Elemente kennen wir bereits, gerade die Links vom vorhergehenden Kapitel waren ja allesamt nicht leer. Den Unterschied zwischen den beiden Typen von Elemnten soll die folgende Abbildung nochmals verdeutlichen:

Abbildung 11: Anatomie von HTML-Elementen

Grundsätzlich sind es zwei Unterschiede:

Die leeren Elemente haben keinen Inhalt (wer hätte das gedacht)
Während bei den nicht-leeren Elementen ein Abschluss-Tag nötig ist, um das Ende des Inhalts anzuzeigen, haben die leeren Elemente einen Schrägstrich, der anzeigt, dass das Ende schon mit dem Eröffnung-Tag erreicht ist.

Dass ein Element leer ist, heisst noch lange nicht, dass es keine Attribute haben kann. Und tatsächlich werden die nötigen Informationen für Bilder in Attributen vermittelt. Und das wichtigste Attribut für Bilder ist src (von source = Quelle), worin angegeben wird, wo sich das Bild befindet.

Hier gibt's nicht viel Neues: die Adresse des Bildes wird genau so angegeben wie die Adresse eines Links: als relativer oder absoluter Pfad.

Übung 23

Füge doch gleich mal ein Bild in unsere Startseite ein. Die Seite heisst index.html und befindet sich im Verzeichnis pfefferschote und das Bild befindet sich im Unterverzeichnis images/dekoration und heisst banner.png.

Füge das Bild direkt nach dem <body>-Element ein.

Mit etwas Nachdenken hast du sicher den richtigen Pfad bestimmt und solltest nun etwa folgendes in deiner Startseite haben:

<body>
<img src="images/dekoration/banner.png" />
<p><a href="produkte/index.html">Entdecken und Kaufen</a> |

Übung 24

Darum heisst's ja Übung: jetzt kannst du das nämlich ein wenig üben. Das selbe Bild soll auf all den folgenden Seiten ebenfalls erscheinen:
menages.html im Verzeichnis pfefferschote krabben.html im Verzeichnis rezepte index.html im Verzeichnis rezepte submit.html im Verzeichnis rezepte index.html im Verzeichnis produkte index.html im Verzeichnis produkte/gewuerze nelken.html im Verzeichnis produkte/gewuerze index.html im Verzeichnis buecher index.html im Verzeichnis kontakt

Im wesentlichsten ist das Fleissarbeit. Ein klein wenig erschwerend kommt natürlich dazu, dass sich der relative Pfad zum Bild ändern kann, je nachdem, von wo aus das Bild verlangt wird. Erinnere dich an die Notierung ../ und wie wir sie bei den Links verwendet haben!

Homepapa
März 2004

Vorheriger Abschnitt:
Bildformate

Nächster Abschnitt:
grafische Links