Galgenlieder - Struktur ist fast alles - CSS-Arbeitsblatt 1

Galgenkindes Wiegenlied

Schlaf, Kindlein, schlaf,
am Himmel steht ein Schaf;
das Schaf, das ist aus Wasserdampf
und kämpft wie du den Lebenskampf.
Schlaf, Kindlein schlaf.

Schlaf, Kindlein, schlaf,
die Sonne frisst das Schaf,
sie leckt es weg vom blauen Grund
mit langer Zunge wie ein Hund.
Schlaf, Kindlein, schlaf.

Schlaf, Kindlein, schlaf.
Nuns ist es fort, das Schaf.
Es kommt der Mond und schilt sein Weib;
die läuft ihm weg, das Schaf im Leib.
Schlaf, Kindlein, schlaf.

Christian Morgenstern

Gruselett

Der Flügelflagel gaustert
durchs Wiruwaruwolz,
die rote Fingur plaustert
und grausig gutzt der Golz.

Christian Morgenstern

Tipp:

Mauszeiger über dem Eingabefeld zeigt die Lösung

Jeder sieht in der Überschrift "Gruselett" etwas anderes

Der PC kann nur aus dem was machen, was man ihm mitteilt

title-tag

In HTML-Elementen können Informationen zum Text als Tooltip angegeben werden. Z.B. im Element <h1> in der Form: <h1 title="Fantasieüberschrift">Gruselett</h1>. Berühren Sie mit dem Mauszeiger die Überschrift "Gruselett" oder das Möwenbild und Sie sehen es.

alt-Tag

Im alt-Tag <h1 alt="Text"> können zusätzliche Informationen angegeben werden. Das Alt-Tag ist v.a. bei Bildern beliebt. Blinde können sich Seiten maschinell vorlesen lassen. Dabei wird das Alt-Tag ausgelesen und vermittelt den Inhalt des Bildes.

Strukturelemente

h1, h2, h3, p, ul, ol, sind Strukturelemente, die dazu beitragen können, ein Dokument zu strukturieren. Es ist sinnvoll, darauf zu achten, dass die Elemente in der vorgegebenen Hierarchie eingesetzt werden.

Layoutinformationen

Layoutinformationen beziehen sich auf das Aussehen und die optische Gestaltung eines Textes, z.B. Definitionen der Schriftfarbe und Schriftfamilie, Rahmenart oder Positionierung auf der Seite (Beispiel: <h1 style="font-family;arian; color: red; text-align-left">Test</h1> färbt die Überschrift "Test" rot). Frage: Ist dieser Ort die geeignete Stelle für die Layoutinformation?

Für jede Information gibt es einen besser oder schlechter geeigneten Ort im HTML-Dokument

(Ziel: Inhalte ohne Layoutinformationen aber mit Strukturinformationen können ohne Änderung in unterschiedlichen Ausgabemedien (Drucker, Bildschirm, Mobil, Beamer, usw.) verwendet werden. Die Gestaltung wird an anderer Stelle passend zum jeweiligen Ausgabezweck angepasst)

Welche Informationen sind sinnvollerweise im Body-Tag <body></body>

Strukturinformationen ohne Layoutangaben sind hier am besten aufgehoben. Beispiele: h1, h2, h3, usw., Klassen wie class="infotext" oder "navigation" aber nicht: class="gelb"

Welche Informationen sollgen in den Kopfberich: <head><style>...</style></head>

Layoutinformationen, die sich auf alle Strukturelemente und Klassen beziehen gehören in den Style-Bereich des Kopfes zwischen <style type="text/css"> und </style>. Beispiel: h1 {color: red} oder p.content {font-size: 1.1em}