Bislang sollte eure Bilddefinition in etwa folgendermaßen aussehen:

<img src="images/logo.png" alt="PSD-Tutorials.de" />

<img src="images/logo.png" alt="PSD-Tutorials.de" title="Das Logo von PSD-Tutorials.de" />

Größenangaben

<img src="images/logo.png" alt="PSD-Tutorials.de" title="Das Logo von PSD-Tutorials.de" width="200" height="150" />

<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>

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" />

<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.

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

<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:

<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.