Webdesign - Webseiten planen, gestalten - Free-Hack Library

Abb. 4.3.13a: Die neuen Elemente und
im Einsatz:
Abb. 1: Das Stadtarchiv von Sienna
(©Karen Bensmann)
Lorem ipsum...
ist ein Blindtext, der nichts bedeuten soll,
sondern als Platzhalter im Layout verwendet
wird. Die Verteilung der Buchstaben und der
Wortlängen des pseudo-lateinischen Textes
entspricht etwa der natürlichen (lateinischen)
Sprache. Der Text ist (absichtlich) unverständlich,
damit der Betrachter nicht durch den
Inhalt abgelenkt wird.
64
Linktipp:
Lorem ipsum: http://www.loremipsum.de/
Link:
Lösung unter: http://mediendesign-online.net/
xmediapress
• kennzeichnet einen thematisch zum umschließenden
Text passenden Inhalt, der aber nicht direkt dazugehört,
ein Marginalientext beispielsweise.
• Das -Element ermöglicht es, ein Element mit einer
Unterschrift, beispielsweise einer Bildunterschrift, zu versehen,
das Element dient hierbei als Legende.
• definiert eine Fußzeile.
• definiert eine Kopfzeile.
• Das -Element umschließt einen Navigationsbereich.
• Das -Element definiert einen generischen Ab-
schnitt eines Dokuments, wobei mit Abschnitt hier eine
thematische Gruppierung von Inhalt, typischerweise mit
einer Überschrift gemeint ist.
HTML
TIPP: Leere -Container im HTML-Quelltext ermöglichen einen
größeren gestalterischen Spielraum, sind jedoch aus semantischer
Sicht etwas fragwürdig, da sie weder Informationen transportieren
noch den Quelltext strukturieren. Dennoch werden sie als
Gestaltungsmittel eingesetzt, insbesondere dann, wenn ein und
dieselbe Website auf unterschiedliche Arten dargestellt werden
soll, beispielweise bei der Verwendung so genannter „Skins“ oder
„Themes“.
Auch der css Zen Garden bedient sich dieses Mittels, um den
Gestaltern den Einbau zusätzlicher Elemente im Stylesheet zu
ermöglichen.
4.3.14 HTML-Übung
Erstellen Sie eine einfache Webseite mit folgenden Inhalten:
• Seitentitel: Meine erste Webseite
• Überschrift 1. Ordnung: Meine erste Webseite
• Überschrift 2. Ordnung: HTML macht Spaß
• Zwei Absätze Blindtext.
• Überschrift 3. Ordnung: 1. Spalte
• Ein Absatz Blindtext.
• Überschrift 3. Ordnung: 2. Spalte
• Ein Absatz Blindtext sowie eine ungeordnete Liste mit 5
Einträgen.
• Überschrift 3. Ordnung: 3. Spalte
• Es folgt ein Bild und ein Absatz Blindtext.
• Fügen Sie Ihrer Seite nun vier -Container hinzu. Drei
umschließen jeweils eine der Überschriften 3. Ordnung
mit dem dazugehörigen Text inklusive Bild oder Liste.
Der vierte -Container umschließt alle drei anderen
-Container. Wenn Sie HTML5 verwenden, ersetzen
Sie die -Container durch semantisch geeignetere
Elemente.
Anschließend überprüfen Sie Ihre Webseite auf Validität, beispielsweise
mit einem Browser-Addon.