Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 10): Grafiken fürs Web (02)

HTML & CSS für Einsteiger (Teil 10): Grafiken fürs Web (02)

Wie sich Bilder grundsätzlich referenzieren lassen, wurde im vorherigen Teil gezeigt. Das Ende der Fahnenstange hinsichtlich der Bilder ist damit aber längst noch nicht erreicht. Tatsächlich kann man Bilder mittels entsprechender Attribute näher beschreiben. Darum geht es zu Beginn dieses Videos. Im zweiten Teil wird beschrieben, wie sich Bildunterschriften mittels HTML5-Syntax umsetzen lassen.


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.

Bilder



 
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.

Bilder



 
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.

Bilder



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.

Bilder



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.

Bilder



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:

Bilder



 
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.

Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Monti7
  • 01.03.2015 - 10:41

Vielen Dank für die tollen Infos! Super erklärt :)

Portrait von pemis
  • 25.11.2014 - 12:15

Durch den Kurs bin ich wieder ein Stück weiter in Sachen eigen HP bauen.

Portrait von Kundentest
  • 23.11.2014 - 22:17

Herzlichen Dank für das Tutorial.

Portrait von Caesarion2004
  • 23.11.2014 - 22:17

Vielen Dank für den weiteren interessanten und gut erklärten Teil.

Portrait von BOPsWelt
  • 23.11.2014 - 21:51

Vielen Dank, noch ein Teil heute- klasse. :-)

Portrait von rocking_sid
  • 23.11.2014 - 20:35

Vielen Dank für das informative Tutorial!

Portrait von pallasathena
Portrait von MARIA52
  • 23.11.2014 - 19:41

Dankeschön für das Tutorial.

Portrait von Steve007
  • 09.11.2014 - 17:16

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von Caesarion2004
  • 08.11.2014 - 11:24

Danke für das interessante und informative Tutorialvideo.

Portrait von Dineria
  • 08.11.2014 - 10:24

Danke! Von Zusatz-Infos für Bilder wusste ich bislang nichts, benutze allerdings auch Firefox... ;-)

Portrait von Kundentest
  • 08.11.2014 - 10:19

Herzlichen Dank für das Video.

Portrait von pallasathena
Portrait von rocking_sid
  • 08.11.2014 - 06:44

Vielen Dank für das sehr informative Video-Training!

x
×
×