Bilder & Grafiken

 Realisierung mit dem Editor

Eine Web-Seite wird erst so richtig ansprechend, wenn sie mit Bildern und Grafiken aufgelockert und (sinnvoll!) ergänzt wird. "Ein Bild sagt mehr als tausend Worte!" Beim Einbinden von Bildern ist zweierlei wichtig: Das Was und das Wie.

Welche Bilder sind geeignet?

Ein Browser kann üblicherweise zweierlei Bildformate anzeigen:

• Das GIF-Format
  Es kann bis zu 256 Farben zeigen, davon kann eine als "transparent" definiert werden, d.h. der Hintergrund (eine einheitliche Farbe oder ein Hintergrundbild) scheint durch. GIF-Bilder sind stark, aber verlustfrei komprimierte Dateien und können relativ schnell geladen werden.
  (Bildquelle: www.gratex.sk)
• 
  
  
• Animierte GIFs
  Das ist eine Art Daumenkino. Mehrere Bilder werden schnell nacheinander gezeigt und vermitteln den Eindruck eines bewegten Bildes.
  (Bildquelle: www.die-maus.de)
  
• Das JPG-Format
  Weil beim JPG-Format bis zu 16,7 Millionen Farben angezeigt werden können, eignet sich dieses Format vor allem für Fotos oder andere Grafiken, bei denen es auf feine Farbverläufe ankommt. Bei der (Weiter-)Bearbeitung von JPG-Bildern muss man beachten, dass die verwendete Komprimierung nicht wieder rückgängig gemacht werden kann.

Wie werden Bilder in ein HTML-Dokument eingebunden?

Dem dient eine sog. Grafikreferenz, in der verschiedene Parameter angegeben werden können:

<img src="" border="" width="" height="" alt="" align="" hspace="" vspace="">

img	(Image = Bild) Hinweis auf Grafikreferenz
src	(source = Quelle) Angabe der URL bzw. des Pfades zum Bild. Es gelten dieselben Regeln wie bei einem Link auf eine Datei.
border	(= Rand) Es wird die Breite des Randes in Pixeln angegeben. Insbesondere unterdrückt border="0" den Rand.
width/ height	(= Breite/Höhe) Es ist sinnvoll, diese Werte stets anzugeben. Wenn der Browser die Größe der Bilder kennt, kann er die Seite schneller aufbauen.
alt	(alternate = Ersatztext) Wenn beim Browser die Anzeige der Bilder abgeschaltet ist, wird (wenigstens) dieser (erklärende) Text angezeigt. Er erscheint auch, wenn man mit dem Mauszeiger über dem Bild verweilt.
align	(= Ausrichtung) Mögliche Angaben für die horizontale Ausrichtung sind "left" (links, wie das transparente Maulwurfbild oben) oder "right" (rechts, wie das opake Maulwurfbild). Mit "top" "middle" "bottom" kann Text als Bildbeschreibung vertikal ausrichtet werden. Es wird nur eine Textzeile ausgerichtet, der restliche Text wird unter dem Bild fortgesetzt. Leider wird nur einer der beiden Ausrichtungsbefehle befolgt, im Zweifelsfall der für die horizontale Orientierung. Beispiele: "top" "middle" "bottom"
hspace/ vspace	(horizontal/vertical space = horizontaler/vertikaler Abstand) Hiermit wird angegeben, welche Abstand (in Pixeln) das Bild zum Text haben soll - und zwar stets nach beiden Seiten. Das "top"-Bild oben hat hspace="20", die anderen "0".

 Realisierung mit dem Editor