HTML und XHTML

Bilder und Grafiken

Ergänzungen

So weit, so gut.

Im Zusammenhang mit Bildern und Bildern als Links gibt's aber noch ein paar Nachträge zu machen, die ich hier gesammelt habe.

Bilder sind Inline-Elemente. Sie fliessen also im Browser, als wären sie ein einzelner, etwas gross geratener und sonderbar geformter Buchstabe. Als Illustration habe ich darum das -Bild hier in den Text gestellt. Dass die beiden Bilder, die wir nun eingefügt haben (banner.png und home.png) jeweils auf einer eigenen Zeile stehen und nicht irgendwo im Text, liegt an den <p>-Elementen, die jeweils davor fertig sind oder danach beginnen und damit einen Zeilenumbruch forcieren.

Aber streng genommen ist das, was wir hier gemacht haben, nicht ganz legal. Inline-Elemente dürfen nicht einfach so für sich allein herumliegen; sie müssen immer in einem Block-Element enthalten sein.

Da du - wie du gleich siehst - die einzelnen Seiten ohnehin nochmals in die Finger nehmen musst, empfehle ich dir, bei dieser Gelegenheit die Bilder (mitsamt allfälligen <a>-Elementen) in eine eigene <div> zu packen. Das sieht dann ungefähr so aus:

<div><a href="ziel"><img src="bild" /></a></div>
Das Seitenende mit dem Home-Link sollte natürlich auf allen Seiten auftauchen.

Übung 26

Füge das Home-Bild mit dem entsprechenden Link auf den übrigen Seiten auch noch ein und fasse es jeweils in eine <div> ein. Mach dasselbe auch mit dem Banner (dem Bild am Anfang der Seite) und lass auch dieses Bild als Link zur Startseite funktionieren.
Es kann passieren, dass Bilder, die als Link funktionieren sollen, vom Browser mit einem Rahmen versehen werden. Im vorliegenden Kurs sollte das nicht passieren, weil wir unsere Seiten ja mit einem Style Sheet darstellen lassen, und das enthält die nötigen Angaben zur Unterdrückung des Rahmens. Arbeitest du aber ohne Style Sheet und/oder mit einem alten Browser, so kann der Rahmen eben doch auftauchen.

Die richtige Korrekturmassnahme ist natürlich das Style Sheet, aber da alte Browser damit nicht immer klar kommen, kann es sein, dass du dich zu einem Trick gezwungen siehst, den du vielleicht auch auf älteren Seiten antreffen wirst: Das <img>-Element kennt ein spezielles Attribut für diesen Fall: border="0".

Das funktioniert zwar, aber das Attribut ist deprecated, was bedeutet, dass es in künftigen HTML-Versionen nicht mehr unterstützt wird und daher ausgemerzt werden sollte. Ich kann es dir also nicht leichten Herzens zur Verwendung empfehlen (im Gegenteil), aber du sollst doch wissen, woher das kommt, wenn du's mal antriffst, und was es damit auf sich hat.
Schliesslich: Wir haben jetzt zwei PNG-Bilder verwendet. Andere Bilder (JPEGs und GIFs) sind in der Anwendung genau gleich; zur Illustration schlage ich vor, dass du noch ein JPEG einfügst.

Übung 27

Das Verzeichnis images/dekoration enthält ein JPEG-Bild mit dem Namen gewuerzmischung.jpg. Füge es auf der Seite produkte/index.html dreimal ein, immer nach den <h3>-Elementen, die du schon als Ziele für interne Links gestaltet hast.

Das ergibt dann folgendes Ergebnis:
```
<h3><a name="a-f">A-F</a></h3>
<div><img src="../images/dekoration/gewuerzmischung.jpg"></div>
<p>Aniseed, Ground 40g, $4.95</p>
```

Homepapa
März 2004

Vorheriger Abschnitt:
grafische Links

Nächster Abschnitt:
ALTernativen