**************************************** Grafiken

Um das bisher besprochene Textdokument lebendiger und farbiger zu gestalten bindet man mit <IMG SRC="URL"> eine Grafik in das Dokument ein. Es gibt keinen passenden Endtag. Die angegebene Bilddatei wird wieder durch eine URL bestimmt. Allerdings sollte man mit Grafiken nicht gerade um sich werfen. Auch wenn ein Bild mehr sagt als 1000 Worte sagt, sollte man immer berücksichtigen, wieviel Text in Bytes man statt eines Bildes schreiben könnte (in der Regel mehr, als das Bild zu sagen hat). Viele Anwender benutzen auch reine Textbrowser und ohne Grafiken kann der Inhalt verstümmelt werden. Hierfür gibt es das Attribut ALT für Alternative. Mit diesem wird dem Bild ein Text zugewiesen, falls es nicht dargestellt werden kann.

<IMG SRC="Photo-von-mir.gif" ALT="Persönliches Bild">
oder
<IMG SRC="seperate-line.gif" ALT="**********************************************">

Zusätzlich sollte bedacht werden, daß der Browser für jedes Bild eine neue Verbindung zum Webserver aufbaut und das kostet Zeit. Um die Zeit für das Laden von Bildern zu beschleunigen sollte man noch die Attribute WIDTH und HEIGHT betrachten. Mit ihnen legt man die Größe in Pixel von Bildern im HTML-Dokument fest, wodurch der Browser vor dem laden des Bildes weiß, wie groß es ist und welchen Platz er dafür reservieren muß.

<IMG SRC="test.gif" WIDTH=32 HEIGHT=32 ALT="TEST">

Zum Ladevolumen soll noch der Unterschied von JPEG und GIF erklärt werden. JPEG-Format ist ausschließlich für farbenreiche Grafiken (z.B. Foto). Das GIF-Format ist für Skizzen, Diagramme und farbenarme Bilder gedacht. Als besonderer Zusatz kann man eine Farbe als transparent definieren und das Bild auch "interlaced" speichern, wodurch der Browser das Bild von einer groben Auflösung bis zur originalen einblendet (d.h. der Anwender sieht bereits im Voraus, was das Bild darstellt). Da dieses Format mit Lizenzen verbunden ist, wird es durch das neu entwickelte PNG-Format abgelöst.

Übersicht der Grafik Tags und Attribute

<IMG SRC="bild.gif" align=top> Text wird oben ausgerichtet
align=bottom Text wird unten ausgerichtet
align=middle Text wird mittig ausgerichtet
align=left Ausrichtung im Dokument (Netscape)
align=right Ausrichtung im Dokument (Netscape)
<IMG SRC="bild.jpg" BORDER=? Werte: 0=keiner, ab 1 Festlegung der Dicke
WIDTH=? Breite des Bildes in Pixel
HEIGHT=? Höhe des Bildes in Pixel
HSPACE=? Horizontale Abstände zum Bild in Pixel
VSPACE=? Vertikale Abstände zum Bild in Pixel
ISMAP Definiert Bild als Clickable Map, muß
in einem Link zu dem Map-Script eingebettet sein
USEMAP="URL"> Definiert Bild als Clickable Map
(URL gibt die Auswertungsdatei an)
<MAP NAME="***"> Beginn einer Map-Declaration
<AREA HREF="URL"|NOHREF
ALT="***" SHAPE=RECT|POLY
COORDS=" , , , ">		 Definiert einen quadratischen/vieleckigen
Bereich innerhalb eines Bildes als Link (Hotspot)
</MAP> Endtag
****************************************

Back       Home       Next

****************************************


MAIL TOMARKUS KAISER Erstellt: 24. Jan. 1997 Updated: 24. Jan. 1997