Grafik- und Bildformate

Grafiken und Bilder müssen als eigene Dateien vorhanden sein. Es empfiehlt sich diese in einem eigenen Ordner „images“ oder „bilder“ abzuspeichern. Für das Internet sind drei Dateiformate gebräuchlich:

gif (graphics interchange format):

256 mögliche Farben, Verwendung von Farbpaletten, Tranzparenz und Animationen möglich, für Zeichnungen und Grafiken geeignet.

jpg, jpeg (joint photographic experts group):

true color, verschiedene Komprimierungsmethoden, für Fotos geeignet

png (portable network graphics):

sollte der Grafikstandard für das Netz werden und gif/jpg ablösen, W3C-Empfehlung, arbeitet mit Paletten und Kompression, Transparenz möglich, Animationen waren nicht vorgesehen.

svg (scalable vector graphics):

Beschreibung der Grafik in einem HTML-ähnlichen Text, nicht durch Pixel.

Grafik referenzieren

Um Grafiken in eine HTML-Dateien einzubinden ist wie bei einem Link eine Referenz zu setzten.

Der entsprechende Tag beginnt mit <img src= (img = image = Bild, src = source = Quelle).  Dahinter wird der Pfad und der Name der Grafikdatei angegeben, auf die verwiesen wird. Der Dateiname muss in Anführungszeichen stehen. Der Befehl für die Grafikreferenz endet mit >.

  • <img src="asterix.gif"> Die Grafik befindet sich im gleichen Verzeichis, wie die HTML-Datei.
  • <img src="images/tgm.jpg"> Die Grafik befindet sich im Verzeichis images.
  • <img src="http://www.tgm.ac.at/fileadmin/images/tgm_logo.gif"> Die Grafik bedindet sich auf einer anderen Website.

Alternativer Text

Jede Grafik sollte mit einem alternativen Text versehen werden. Dieser Text wird angezeigt, wenn die Grafik zum Beispiel beim Anwender nicht angezeigt werden kann. Manche Browser zeigen den Alternativtext auch als kleines „Tooltip“-Fenster an, wenn man langsam mit den  Maus auf der Grafik plaziert.

<img src="bild.gif" alt="Text zum Bild">

Weitere Attribute

<img src="bild.jpg">

Orginalgröße
<img src="bild.jpg" height="140" width="229"> Bildgröße: Höhe 140 Pixel, Breite 229 Pixel
<img src="bild.jpg" border="2"> zusätzlich mit einem Rand (Randbreite 2 Pixel)
<img src="bild.jpg" hspace="5"> seitlicher Abstand 5 Pixel
<img src="bild.jpg" vspace="3"> Abstand nach oben und unten 3 Pixel