HTML5 für Webdesigner

Objekte beschriften mit <figure> und <figcaption>

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
HTML5 kennt mit figure und figcaption zwei Elemente für die Beschriftung von Objekten, die in diesem Film kurz vorgestellt werden.

Transkript

In HTML5 gibt es endlich Elemente zur Beschriftung von Bildern, Grafiken, Illustrationen, Tabellen, Codebeispielen und dergleichen. Und dazu benutzt man "figure" und "fig-caption", die ich Ihnen in diesem Film kurz vorstellen möchte. Ich springe hier beim HTML5 Element Index zum "F" wie "fig-caption" und "figure", so heißen die beiden Elemente die meistens paarweise auftreten. "Figure" kann es auch ohne "fig-caption" geben, aber umgekehrt eher nicht. Das figure-Element repräsentiert "flow content", also "inline-Elemente" hätte man das früher genannt, "optionally" mit einer Beschriftung. "It's self contained and typically referenced to the single", also auch eine Galerie, eine Bildergalerie würde man in ein figure auszeichnen mit mehreren Images darin und einer Beschriftung unten drunter. Das ist für Illustrationen, Diagramme, Fotos, Code-Beispiele, Tabellen und so weiter. Alles das kann in "figure" enthalten sein und die Beschriftung gibt es dann mit fig-caption. Hier ist der Code snipped als kurzes Beispiel "figure/figure", darin ein "image" oder ein Video oder eine Tabelle und darunter "fig-caption" die Bildbeschriftung. Ein Einhorn "goring a ferry" - gut, dass wir das Bild nicht sehen. Im Editor auf der Beispielseite, da werde ich mal ein klein wenig editieren hier, da brauchen wir ein bisschen Platz in dem Artikel soll ein Bild eingefügt werden. Ich habe da schon ein Bild vorbereitet, hier ist unsere Beispielseite. Im Unterordner Grafiken gibt es "Madrid-Kristallpalast", das wird jetzt etwas kleiner hier eingebaut werden. Also, es gibt ein "figure" und etwas tiefer ein "/figure", darin gibt es ein "image" und es liegt im Unterordner "Grafiken" und hieß "Madrid-Kristallpalast.jpg". Das soll 320 breit sein und 240 hoch. Ein ALT-Text reicht heute mal, "Photo Kristallpalast". Und dann die Beschriftung, da wird es ja erst richtig interessant "fig-caption", "der Kristallpalast in Madrid/fig-caption". Das ist das Bild. Ich passe mal eben hier oben den Beitrag ein bisschen an, der heißt dann Bildbeschriftungen oder überhaupt Beschriftungen, das müssen ja nicht nur Bilder sein. Und unten drunter in HTML5 gibt es Elemente zur Beschriftung von Objekten. Speichern. Leerzeile kann weg. Und rüber in den neuen Browser, "Neu laden", dort ist das Bild. Hier im Element untersuchen, den schieben wir mal etwas hoch, sehen Sie hier das "figure" insgesamt. Das hat links einen Abstand aus dem Browser "style sheet" wie wir sehen, "image" mittendrin und untendrunter "fig-caption". Das ist die Konstruktion. So weit recht einfach zu handhaben. Statt eines Bildes kann hier wie gesagt auch eine Tabelle, ein Codebeispiel oder irgendein anderes Objekt stehen.  Die Kurzzusammenfassung für Beschriftungen am Ende: Beschriftungen für Bilder, Tabellen, Codes usw. "Figure" umschließt also Objekt und die Beschriftung. "Fig-caption" enthält die Befristung und es ist nur ein "fig-caption" pro "figure" erlaubt. Das darf ganz am Anfang oder ganz am Ende stehen, aber nicht zwischen den Elementen, während es durchaus mehrere Bilder in einem "figure" geben kann.

HTML5 für Webdesigner

Lernen Sie, wie Sie in HTML5 Layoutbereiche strukturieren, die richtigen Elemente für Inhalte benutzen, Formulareingaben optimieren und Multimedia ohne Plug-in einbauen.

3 Std. 14 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!