HTML und XHTML

Bilder und Grafiken

ALTernativen

Bevor wir das Kapitel über Bilder ad acta legen, sind aber noch ein paar Bemerkungen zu zwei Stichworten angebracht, die immer wieder auftauchen: usability und accessability. Dabei geht es darum, wie brauchbar deine Seiten sind (wie gut man sie unter unterschiedlichen Umständen verwenden kann), und ob sie auch alternative Zugänge erlauben, also z.B. nicht nur mit einem Browser angesehen werden können.

Egal, wie du persönlich es machst, es gibt eine grosse Anzahl von Leuten, die im Internet unterwegs sind, ohne sich Bilder anzeigen zu lassen. Vielleicht, weil es das Surfen unheimlich beschleunigt, vielleicht, weil sie auf einem Handheld-Computer oder einem Mobiltelefon mit den Bildern wenig anfangen können, vielleicht auch, weil sie sie aufgrund einer Behinderung nicht sehen können.

Vor diesem Hintergrund gesehen, ist es nicht gerade die beste Idee, den Erfolg einer Seite zu stark von ihren Bildern abhängig zu machen. Es gibt aber einen Weg, auch denen, die keine Bilder sehen wollen oder können, deren Inhalt zugänglich zu machen: das ALT-Attribut.

Das alt-Attribut ist sehr einfach in der Anwendung und sieht für ein Bild etwa so aus:

<img src="flocki.jpg" alt="Flocki, unser Hund" />

Wer sich keine Bilder anzeigen lässt, kriegt damit wenigstens diesen Ersatz-Text angezeigt. Das W3C legt sehr hohen Wert auf dieses Attribut, und wenn du eine Website validieren — also auf Gültigkeit prüfen — lässt, werden fehlende alt-Attribute als Fehler ausgewiesen. (Über diese Gültigkeitsprüfung sprechen wir später noch.)

Übung 28

Versieh die JPEG-Bilder, die du soeben in produkte/index.html eingefügt hast, mit dem alt-Text ein paar Gewürze

Und wenn du schon dabei bist: auch die Abbildungen banner.png und home.png sollten einen ALT-Text kriegen. Erfinde einen nach dem Motto "was für einen Text zeigen wir an, wenn man das Bild nicht sehen kann?" und trage ihn auf all deinen Seiten ein.

Das sieht dann etwa so aus:

<div><img src="../images/dekoration/gewuerzmischung.jpg" alt="ein paar Gewürze" /></div>

Wenn du es ausprobieren willst, solltest du mal die Bilder an deinem Browser ausschalten. Je nach Browser wird das etwas unterschiedlich gemacht, und es gibt Browser, die die Bilder, welche im Cache-Speicher sind, auch dann noch anzeigen, wenn die Bildanzeige ausgeschaltet ist. Du musst also eventuell etwas pröbeln, bis es klappt und vielleicht auch den Browser schliessen und neu starten.

Damit haben wir eigentlich alle Grundlagen beisammen und sind in der Lage, Informationen auf einer Webseite anzuzeigen. Die Gestaltung der Seite ist dann Sache eines CSS-Kurses.

Wir werden nun ein paar grundlegende Zusammenhänge nachholen, bevor wir unsere HTML-Kenntnisse um weitere — vielleicht etwas komplexere — Elemente erweitern.

Homepapa
März 2004

Vorheriger Abschnitt:
Ergänzungen

Nächster Abschnitt:
ohne Fehl und Tadel