Startseite Übungsaufgabe HTML

Zwischenüberschrift 1

Bilder sind Inline-Elemente und werden auf der gleichen Zeile wie der umgebende Text angeordnet.
Ist ein Bild nicht vorhanden (oder falsch benannt!!!), so wird stattdessen ein Platzhalter als "Broken Link" angezeigt.
Wenn Sie zusätzlich also die Größe des Bildes angeben, wird auch der Seitenaufbau schneller UND stabiler, da der Browser die Seite bereits korrekt aufbauen kann, während das Bild noch im Hintergrund geladen wird.

Und wenn Sie schon dabei sind, geben Sie auch noch einen alternativen Text (alt) als Beschreibung an, was auf dem Bild zu sehen ist, sowie einen Kommentar (title) für ergänzende Informationen.
Diese Angaben sind für barrierefreie Internetseiten Pflicht!Bild fehlt

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Zeichnung mit Professor vor Schultafel

Zwischenüberschrift 2

Setzen Sie das "umflossene Bild" an verschiedenen Stellen im HTML-Quellcode ein und beobachten Sie, wie sich die Darstellung ändert.

Wir werden später auch noch die Außenabstände passend zu links- und rechtsliegenden Bildern ändern, damit der Text nicht bis haarscharf an das Bild reicht (was ja - wie hier - nicht sonderlich schön anzusehen ist...).

Lorem ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Fußzeile: Impressum | Kontakt | Sitemap