Bilder und Abbildungen


Schritt 1: Bilder

Hinterlegen Sie in einer HTML-Datei zwei img-Elemente und referenzieren Sie darin zwei beliebige Bilddateien. Setzen Sie alle erforderlichen Attribute auf sinnvolle Werte. Die Breite der Bilder sollte nicht mehr als 300px betragen.

Kontrollieren sie das Aussehen Ihrer Bilder im Browser.

Schritt 2: Abbildungen

Hinterlegen Sie in derselben HTML-Datei zusätzlich zwei figure-Elemente und referenzieren Sie darin jeweils eine beliebige Bilddatei. Setzen Sie alle erforderlichen Attribute auf sinnvolle Werte. Das erste figure-Element sollte zudem eine Bildüberschrift, das zweite eine Bildunterschrift besitzen. Benutzen Sie dafür figcaption-Elemente.

Kontrollieren sie das Aussehen Ihrer Bilder im Browser. Verändern Sie dabei auch die Breite des Browserfensters. Welche Unterschiede fallen Ihnen bei den img- und den figure-Elementen auf?

Kontrolle der eigenen Lösung
Überprüfen Sie hier Ihre Lösung. Sie sind mit dieser Aufgabe erst fertig, wenn die Tests keine Fehler zeigen.