HTML-Grundlagen (3)

Bilder:

Über das Einbinden von Bildern muss man ein paar Worte mehr verlieren, daher wurde diesem Thema eine eigene Seite gewidmet.

Das Tag zum Einbinden von Bildern heißt <IMG>. Es existiert kein zugehöriges Ende-Tag, sondern man platziert das <IMG>-Tag dort, wo man das Bild gerne haben möchte. Die eigentlichen Informationen über das einzubindende Bild werden in den folgenden Attributen angegeben:

Name und Pfad

Ähnlich wie mit dem HREF-Attribut beim <A>-Tag gibt man mit dem Attribut SRC den Namen und ggfs. Pfad des anzuzeigenden Bildes an:

   <img src="fertig.jpg">

Für die Dateinamen der Bilder gelten die gleichen Empfehlungen wie für die Namen von HTML-Dateien.

Breite und Höhe

Die Breite und Höhe eines Bildes braucht man eigentlich nicht anzugeben, da der Browser diese Werte beim Laden des Bildes selbst ermitteln kann. Allerdings laden die meisten Browser Bilder erst, nachdem sie den Rest des HTML-Dokuments bereits gelesen und angezeigt haben. Da der Browser die Größe des Bildes aber noch nicht kennt, kann er dafür auch keinen angemessenen Platz lassen und muss, nachdem er das Bild dann geladen hat, die ganze Seite noch einmal aufbauen. Daher sollte man mit den Attributen WIDTH (Breite) und HEIGHT (Höhe) immer die tatsächlichen Ausmaße des Bildes angeben. So kann der Browser entsprechend Platz für das Bild auf der Seite reservieren und braucht es nur noch einzusetzen:

   <img src="fertig.jpg" width="120" height="80">

Man kann natürlich auch andere Größenangaben eintragen. Der Browser wird das Bild dann bei der Anzeige entsprechend skalieren. Man sollte davon aber nur in Ausnahmefällen Gebrauch machen, da die Skalierungsalgorithmen der Browser meist schlechter als die eines Grafikprogramms sind. Zudem muss ja immer noch das komplette Bild übertragen werden, auch wenn man es z.B. kleiner anzeigen lassen will. Man sollte daher lieber das Bild vorher mit einem geeigneten Programm entsprechend zurecht skalieren. Wenn man das gleiche Bild in verschiedenen Größen benötigt, sollte man auch entsprechend viele Versionen davon erzeugen.

Beschreibung

Nun gibt es aber auch Browser, die keine Bilder anzeigen (z.B. das für viele Plattformen erhältliche Lynx oder Wannabe auf dem Mac). Oder der Besucher hat die Anzeige von Bildern in seinem Browser abgeschaltet, um Download-Zeit zu sparen. Für solche Besucher sollte man immer auch eine kurze Beschreibung des Bildes in Textform ergänzen. Dazu dient das ALT-Attribut:

   <img src="fertig.jpg" width="120" height="80" 
      alt="Birne: Ich habe fertig">

Wohlgemerkt: Der Text aus dem ALT-Attribut soll angezeigt werden, wenn das Bild (aus den oben genannten Gründen) nicht sichtbar ist. Es ist eine Unsitte mancher Browser, diesen Text trotzdem in Form eines "Tooltips" (eines kleinen aufspringenden Fensters) anzuzeigen, wenn man mit der Maus über das Bild fährt.

Das ALT-Attribut ist mittlerweile im HTML-Standard vorgeschrieben, man sollte es also zu allen Bildern angeben. Bei Bildern, die lediglich zur Verzierung dienen, aber weder zum Inhalt beitragen noch zur Bedienung wichtig sind, macht eine Beschreibung aber oft keinen Sinn. In diesen Fällen gibt man einen leeren Text an: alt="" (zwischen den beiden Anführungszeichen sollte dabei kein Leerzeichen stehen).

Und welche Bildformate kann man nun verwenden? Das hängt vom Browser ab, jedoch kann man davon ausgehen, dass die Formate GIF und JPEG von allen grafikfähigen Browsern verstanden werden. Als Alternative zu GIF beginnt sich langsam PNG (sprich "Ping") durchzusetzen, aber man muss damit rechnen, dass ältere Browser Bilder in diesem Format nicht anzeigen können.

<< zurück zur zweiten Seite | weiter zur nächsten Seite >>
zurück zur MacIG-Seite

$HOME | Atari | Macintosh | Ahnenforschung | Bilder | Site-Index