Formatierung in Webseiten

Bilder können beinahe an jeder beliebigen Stelle einer HTML-Seite eingebunden werden. Die beiden wichtigsten Grafikformate, die auch so gut wie alle (grafikorientierten) Browser darstellen können, sind GIF (Graphics Interchange Format) mit der Endung ".gif" und JPEG (Joint Photographic Expert Group) mit der Endung ".jpg" oder ".jpeg". Ein etwas neueres Format ist PNG (Portable Network Graphic), Endung ".png". Zum Einbinden eines Bildes wird der -Tag verwendet:

Mit dem Attribut src werden Name ("bild1.jpg") und Speicherort (Verzeichnis "pic") der Datei angegeben, wenn das Bild am selben Server abgelegt ist. Der Speicherort wird relativ (durch Angabe des Pfades) zur referenzierenden Datei angegeben. Aber auch vollständige URL-Angaben sind möglich:

Das Attribut alt beinhaltet alternativen Text, der dargestellt wird, wenn das Bild nicht geladen wurde. Dies ist dann der Fall, wenn der Benutzer das Laden von Bildern aus Performancegründen abgeschaltet hat oder das Laden der Seite vorzeitig abbricht. Der Benutzer sieht dann ein sog. "broken image"-Bild und weiß durch den Zusatztext, was an dieser Stelle zu sehen wäre. Besonders wichtig ist das, wenn für die Navigation Grafiken eingesetzt werden.

Außerdem sollte bei einem Bild immer die Größe (Höhe und Breite) als Attribute mitgegeben werden, damit der Browser gleich weiß, welchen Platz er zur Darstellung eines Bildes bereithalten soll (noch bevor das Bild vollständig geladen ist):

Die oben aufgeführten Beispiele können Sie an dieser Datei selbst testen. (Tipp: Schalten Sie erst einmal an Ihrem Browser das Laden von Bildern aus - so sehen Sie auch den Alternativtext.)

Zum Platzieren von Bildern setzen Sie diese in andere HTML-Elemente wie Textabsätze, CSS-Bereiche, Tabellenzellen o.ä. hinein. Dort können sie dann (wie Text) zentriert etc. werden.