Bilder

Inhaltlich relevante Grafiken (z.B. Fotos, Diagramme) gehören zusammen mit den Texten in den HTML-Code, während schmückende Hintergrundbilder per CSS definiert werden.

Bilddatei und HTML-Dokument bleiben eigenständige Dateien. Bilder werden lediglich per Referenz eingebunden, d.h. es erfolgt ein Verweis auf die Bilddatei und diese muss verfügbar sein.

Wenn also das berühmte rote Kreuz erscheint (nein, nicht das, bei dem man Blut spendet), liegt der Fehler höchstwahrscheinlich an eigener Dusseligkeit! Das muss hier mal ganz deutlich gesagt werden! Je nach Situation und Browser fehlt auch einfach nur das Bild und dies fällt nicht weiter auf. Dennoch unschön.

<img> 

<img src="pics/hund_in_schuessel_klein.jpg" width="300" height="225"
 border="0" alt="Hund in Schüssel">

Wer das Bild unbedingt mittig haben möchte, packt ein DIV drumherum. Unten mal ausnahmsweise als Inline-Style realisiert. Rechts anordnen geht übrigens per FLOAT wesentlich eleganter, besonders, wenn der Folgetext das Bild umfliessen soll.

<div style="text-align: center;">
  <img src="pics/hund_in_schuessel_klein.jpg" width="300" height="225"
  border="0" alt="Hund in Schüssel">
</div>

Das IMG-Tag erfordert zwingend ein SRC-Attribut (Source, Quelle), worin der Pfad zum Bild festgelegt wird. Die Angabe von WIDTH (Breite) und HEIGHT (Höhe) ist optional, jedoch zu empfehlen, da der Browser den benötigten Platz schon reservieren kann, noch während das Bild downgeloadet wird. Dadurch wird ein munteres Hin- und Herspringen der Texte vermieden. Per BORDER kann man dem Bild einen Rahmen geben, jedoch lässt sich das besser im CSS erledigen. Die Eigenschaft ALT zeigt einen Alternativtext an, falls die Grafik aus irgendwelchen Gründen nicht angezeigt werden kann. Der Internet Explorer zeigt diesen Text auch fälschlicherweise als kleinen Hinweistext, wenn die Maus über dem Bild schwebt. Das W3C verlangt dieses ALT-Attribut, dies halte ich jedoch für eine rein erzieherische unnötige Geißelung. Sie läßt sich dadurch umgehen, dass ALT einfach keinen Wert bekommt (siehe oben).

Warum das ALT nicht einfach weglassen? Nun, eine eventuelle Validation würde meckern...

Relativ oder absolut

Pfadangaben können relativ oder absolut erfolgen. Der blaue Luftballon liegt im Unterordner "pics" und wurde durch eine relative Pfadangabe eingebunden. Relative Pfadangaben sind einfacher zu handhaben als absolute, solange sich der Speicherplatz des Bildes in Bezug zur HTML-Datei nicht ändert. Wo diese Dateien dann letztendlich liegen (auf dem eigenen PC oder auf irgendeinem Server im Internet) ist dabei egal. Von der HTML-Datei aus gesehen liegt das Bild immer im direkten Unterordner "pics". Der absolute Pfad lautet in diesem Fall "http://www.csskiste.de/pics/luftballon_blau.gif". 

<img src="pics/luftballon_blau.gif"
     width="87" height="187" border="0" alt=""
     style="float: right; padding-left: 30px;>

In diesem Fall wurde der blaue Ballon noch zusätzlich per FLOAT platziert. Siehe dazu unter Flow.

Wer's genau wissen möchte: Die Ballons im Randbereich sind absolut positioniert. Bezugspunkt ist aber nicht das Browserfenster wie sonst, sondern der relativ positionierte Wrapper.

Die Ballons sind GIF-Grafiken, welche eine transparente Hintergrundfarbe haben. Rein technisch gesehen sind sie rechteckig. Alles im Web ist rechteckig. Alles Runde ist entweder Grafik oder Trick oder beides.

Und genau wie auf'm Bau gilt auch hier: "Kein rechter Winkel = teuer"

Sinnvollerweise legt man für Bilder einen eigenen Ordner an. Einfach um den Überblick zu behalten, auch wenn es irgendwann mal viele Bilddateien sein sollten.

Öffnen Sie Ihr Dokument in einem Browser. So sollte Ihre Seite nun aussehen.