Bislang sollte eure Bilddefinition in etwa folgendermaßen aussehen:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
Dem img-Element können (und sollten) allerdings einige Attribute zugewiesen werden. Da wäre zunächst alt. Der hier definierte Text wird vom Browser angezeigt, wenn das Bild – aus welchen Gründen auch immer – nicht geladen werden konnte.
Leider kommt es im Zusammenhang mit dem alt-Attribut immer wieder zu Missverständnissen. Das alt-Attribut dient tatsächlich ausschließlich dem Fall der Nichtanzeige des Bildes. Einige Browser zeigen den Wert des alt-Attributs allerdings in einem Tooltipp-Fenster an, wenn man auf dem Bild mit dem Mauszeiger verweilt.
Dieses Verhalten ist falsch. Für solche Tooltipps ist vielmehr das Attribut title da. Eine entsprechende Definition sähe folgendermaßen aus:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Das Logo von PSD-Tutorials.de" />
In diesem Fall überlagert der Wert von title den von alt.
Größenangaben
Sehr viel wird in HTML mittlerweile nicht mehr über Attribute, sondern mittels CSS gelöst. Die Definition von Größenangaben gehört hier allerdings nicht dazu. Höhe und Breite werden unverändert über die beiden Attribute width und height definiert. Auch hierzu wieder ein Beispiel:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Das Logo von PSD-Tutorials.de" width="200" height="150" />
Gibt man keine Maßeinheit bei width oder height an, werden die Zahlwerte als Pixelangaben vom Browser interpretiert. Im vorherigen Beispiel ist das Bild also 200 Pixel breit und 150 Pixel hoch. Möglich wäre auch eine Prozentangabe.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Das Logo von PSD-Tutorials.de" width="20%" height="15%" />
Die Prozentangaben beziehen sich dabei auf den zur Verfügung stehenden Anzeigenraum. Werden keine Größenangaben gemacht, stellen die Browser die Grafiken in ihrer Originalgröße dar.
Bilder und Textabsätze
Wenn ihr Bilder in Kombination mit Fließtext platziert, ist Obacht geboten.
<p><img src="logo.png" alt="" width="180" height="150" /> Dieser Text wird neben dem Bild angezeigt.</p>
Bei img handelt es sich um ein sogenanntes Inline-Element. Grafiken können also direkt im Text platziert werden. Ist die Grafik höher als die Zeilenhöhe, wird der Text vom Browser innerhalb der Zeile ausgerichtet. Standardmäßig erfolgt die Ausrichtung des Textes untenbündig zur Grafik.
Beeinflussen ließ sich die Ausrichtung in älteren HTML-Versionen über das Attribut align. Setzt dies bitte nicht mehr ein, da es aus dem HTML5-Standard entfernt wurde. Verwendet stattdessen die Möglichkeiten, die euch CSS bietet. Dadurch könnt ihr beispielsweise das Bild vom Text umfließen lassen.
Eine Langbeschreibung
HTML bietet euch die Möglichkeit, zu einem Bild eine ausführliche Beschreibung anzugeben. Das ist immer dann praktisch, wenn es zu einem Bild tatsächlich etwaiger Erläuterungen bedarf. Ihr könnt die Zusatzinformationen an unterschiedlichen Stellen speichern und auf diese verweisen.
Die Zusatzinformationen können dabei an verschiedenen Stellen stehen.
<img src="bild1.png" alt="Diagramm 1" title="Diagramm 1" longdesc="#diagramm" />
Hier wird davon ausgegangen, dass es innerhalb der Seite einen Bereich mit der ID diagramm gibt.
Am gebräuchlichsten dürfte sicherlich die Variante sein, bei der die Informationen in einer externen Datei gespeichert werden.
<img src="bild1.png" alt="Diagramm 1" longdesc="diagramm1.htm" />
Allerdings hapert es hier noch an der Browser-Unterstützung. Zudem scheint dieses Attribut die Browserhersteller vor die Frage zu stellen, wie sie es unkompliziert umsetzen können.
Denn wirklich schön und selbst erklärend ist das beispielsweise im Firefox nicht gelöst. Besitzt ein Bild ein longdesc-Attribut, erkennen das normale Seitenbesucher zunächst einmal nicht. Sie müssen das Bild vielmehr mit der rechten Maustaste anklicken.
Im Kontextmenü ist daraufhin der Punkt Beschreibung anzeigen zu sehen. Klickt man diesen an, wird die bei longdesc angegebene Zusatzinformation angezeigt. Wie gesagt, das funktioniert so im Firefox, elegant ist es aber sicherlich nicht.
Opera hat es übrigens ganz ähnlich gelöst. Klickt man in diesem Browser das Bild mit der rechten Maustaste an, ist der Eintrag Lange Beschreibung zu sehen.
Dieser führt dann zu den angegebenen Zusatzinformationen.
Das WC3 schlägt zusätzlich vor, die Langbeschreibung in Form einer Data-URL anzugeben.
<img src="logo.png" alt="W3C" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E %3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20W3C%20Logo%3C/title%3E%3C/head%3E %3Cbody%3E%3Cp%3EA%20blue%20capital%20letter%20%22W%22%20with%20kerning%20so%20it%20 touches%20a%20blue%203%2C%20followed%20by%20a%20black%20shadow%20of%20a%20white%20 capital%20letter%20C%20all%20on%20a%20white%20background%3C/body%3E%3C/html%3E" />
Wenn ihr mit diesen Data-URLs noch keine Erfahrungen gesammelt habt, findet ihr unter http://de.wikipedia.org/wiki/Data-URL ausführliche Informationen dazu.
Bildbeschreibungen definieren
Bislang gab es in HTML keinerlei Möglichkeiten zur Definition von Bildunterschriften und Bildgruppierungen. Genau dieser Aspekt hat sich mit HTML5 geändert. Hier wurden nämlich die beiden neuen Elemente figure und figcaption eingeführt.
Um es vorwegzunehmen: figure ist nicht ausschließlich für den Einsatz im Zusammenspiel mit Grafiken gedacht. Tatsächlich lässt sich das Element für sämtliche Elemente einsetzen, die ein Dokument ergänzen. Das können neben Bildern beispielsweise Diagramme, Code-Beispiele und Videos sein.
Neben figure gibt es auch noch figcaption. Darüber lassen sich Inhalte, die für bestimmte Nutzergruppen nicht lesbar sind, mit einer alternativen Beschreibung ausstatten.
Hier ein Beispiel für den Einsatz der beiden Elemente figure und figcaption:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>Das ist unser neues Logo.</figcaption> </figure>
Ein Blick auf das Ergebnis im Browser liefert folgendes Ergebnis:
Wie die Browser mit den beiden Elementen umgehen, bleibt letztendlich ihnen überlassen. Grundsätzlich könnt ihr die Darstellung aber natürlich wieder per CSS beeinflussen.
Innerhalb eines figure-Elements lassen sich beliebig viele Bilder oder andere Elemente einfügen. Allerdings darf in einem figure-Element nur ein figcaption-Element enthalten sein. Auch hierzu wieder ein Beispiel:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <img src="logo_gross.jpg" width="400" height="250" alt="PSD-Tutorials.de" /> <figcaption>Das ist unser neues Logo.</figcaption> </figure>
Auf diese Weise könnt ihr also auch mehrere Bilder in ein figure-Element packen.
Gerade auch hinsichtlich der logischen Strukturierung von Webseiten bzw. Inhalten gibt es in HTML5 zahlreiche Neuerungen. Diese lernt ihr im Laufe dieser Reihe natürlich ebenfalls detailliert kennen.
