Einbinden von Grafiken Grafiken werden mit dem <img> - Tag eingebunden . zum <img> - Tag gehört eine Reihe von Attributen : src="" : bezeichnet den Platz ( = engl. source ) der Grafik . Dieses Attribut ist zwingend . Die Grafik wird entweder absolut oder relativ eingebunden . ( Einbinden von Dateien ) width und height : damit werden Breite und Höhe der Grafik angegeben . Eine Angabe ist nicht zwingend , jedoch von Vorteil , da die Seite dadurch schneller geladen wird . Werden andere Werte als die tatsächlichen angegeben , wird das Bild dementsprechend verzerrt . alt : Alternativ- bzw. Beschreibungstext für die Grafik . Dieser wird angezeigt , falls das Bild nicht geladen werden kann bzw. noch nicht geladen ist . Der Text wird ausserdem sichtbar , wenn man mit der Maus über dem Bild stehen bleibt (sog. 'Tooltip'). Diese Funktion ist allerdings nicht w3c-konform und wird deshalb vom neuen Netscape 6.0 nicht interpretiert- lieber title nehmen (siehe unten) bzw. beides. Achtung: laut w3c soll alt immer mitdefiniert werden, wenn ihr keinen Alternativtext wollt, schreibt einfach alt="". Beispiel : <img src="xild01.jpg" width=200 height=133 alt="vulkanisch... ;)"> ergibt : Anmerkung : solche dynamischen Titel ( " Tooltips " ) lassen sich mit Hilfe des title - Attributs auf fast jedes Element anwenden : Beispiel : <img src="xild01.jpg" width=200 height=133 alt="vulkanisch... ;)"> <br><br> <p title="Ja , ja - die Ferien in Island waren schön :]"> Das Bild zeigt nen alten Vulkan <span title="Insel im Nordatlantik , 300'000 Einwohner"> Island</span> .</p> ergibt : Das Bild zeigt nen alten Vulkan in Island . Anmerkung :Der Netscape Navigator (4.x) interpretiert das title - Attribut noch nicht . Das <span> ... </span> - Tag ist ein Tag ohne feste Bedeutung . Die genaue Verwendung wird im entsprechenden Abschnitt über Cascading Style Sheets erklärt . Mit den beiden Attributen hspace und vspace können die horizontalen bzw. vertikalen Abstände der Grafik zur Umgebung definiert werden .

Wird kein Zeilenumbruch gesetzt , wird nachfolgender Text standardmässig [rechts] unten ausgerichtet . Anschliessender Text lässt sich jedoch auch anders positionieren , und zwar mit dem align - Attribut:

• top : Text wird oben ausgerichtet .
• middle : Text wird mittig ausgerichtet .
• bottom : Text wird unten ausgerichtet ( Voreinstellung ) .
• left : Text fliesst links um das Bild herum .
• right : Text fliesst rechts um das Bild herum .

Bei top und middle wird jeweils nur eine Zeile ausgerichtet - der Rest des Textes erscheint unterhalb des Bildes . left und right eignen sich für mehrzeiligen Text .

Mit <br clear=all> wird eine anschliessende Fortsetzung unterhalb des Bildes erzwungen .

Beispiel : <img src="xild01.jpg" width="200" height="133" align="left"> <p>Dieser Absatz wurde mit Hilfe von align="left" rechts vom Bild angeordnet .</p> <br clear=all> <p>Dieser Absatz wird unterhalb des Bildes fortgesetzt , weil vorher <br clear=all> notiert wurde .</p> ergibt : Dieser Absatz wurde mit Hilfe von align="left" rechts vom Bild angeordnet . Dieser Absatz wird unterhalb des Bildes fortgesetzt , weil vorher <br clear=all> notiert wurde .

Die zwei auf dem Internet gebräuchlichen Grafikformate sind jpg und gif.

jpg : 16.7 Millionen Farben -
eignet sich vor allem für fotorealistische Grafiken - also eingescannte Photos oder Grafiken mit vielen Abstufungen.

gif : 256 Farben -
eignet sich für alle Grafiken mit wenig Farbverläufen , z.B. Navigationsbuttons und Schriftzüge . Ausserdem können animierte gifs erstellt werden, ebenfalls sehr interessant ist die Möglichkeit, eine Farbe als transparent zu bestimmen (Alles mit der entsprechenden Software).
Die Anzahl Farben lässt sich mit geeigneten Grafikprogrammen noch verringern - 16 Farben reichen meistens !

Anmerkung :

Oft wird bei der Wahl des Dateiformats nur auf die ( scheinbare ) Anzahl Farben geachtet , und nicht auf die Abstufung (=Farbverlauf) der einzelnen Farben des Bildes .
So werden z.B. häufig Schwarzweiss-Bilder und Navigations-Buttons oder Hintergrundbilder mit komplexeren Farbverläufen als gif abgespeichert - mit dem Resultat , dass die Grafik im gif-Format u.U. die zehnfache Datenmenge aufweist wie dasselbe Bild im jpg-Format ( Alles schon erlebt ... ) .
Im Zweifelsfall das Bild ins andere Dateiformat konvertieren [ mit jedem gängigen Grafikprogramm möglich ] und mit dem Original vergleichen !