nicht angemeldet
Lieber klose,
nach meiner Erfahrung ist es erschreckend, wie wenig Menschen die Struktur eines Dokuments bewusst ist. Viele denken, wenn etwas wie eine Überschrift aussieht, dann passt das schon. Dass es da viele Feinheiten gibt (Unterunter...überschrift), und dass das im HTML-Dialekt Deiner Wahl sinnvoll ausgezeichnet werden kann, öffnet für viele Unbedarfte die große Tür zu einer erschrekend exotischen und komplexen Welt.
Für meine Internet-AG habe ich kleine Texte aus der Wikipedia mittels copy&paste in eine simple Textdatei kopiert, in der die Dokumentstruktur zwar noch erkennbar war, aber eben ohne jegliches Markup abgebildet war. Aufgabe war es dann, diese Dokumentstruktur mit den Mitteln des HTML-Dialektes (ich fordere noch immer XHTML1strict) abzubilden und ein echtes XHTML1strict-Dokument zu erzeugen.
HTML
Um diese Aufgabe lösen zu können, ist es meiner Meinung nach sinnvoll zu erklären, dass ein Textklumpen (chunk of text) keine Bedeutung hat, solange er nicht von einem öffnenden und einem schließenden Tag zu einem HTML-Element gemacht wird. Textabsätze und Überschriften bieten sich an. Wenn das klar ist, kann man obige Aufgabe bereits in Teilen sinnvoll lösen. Es beginnt damit, die Textdatei (.txt) zu einer HTML-Datei umzubenennen (.html) und dann im Browser zu öffnen. Reine Textchunks zeigt er nicht sinnvoll an, sinnvoll ausgezeichnete Textelemente dagegen schon.
Als nächsten Schritt empfehle ich Anker mit Verweisziel (Hyperlinks). Es macht Kursteilnehmer glücklich, wenn sie Dokumente miteinander verlinken können. Der Aha-Effekt ist hier am stärksten. Bevor ich also zu einem vollständigen Dokument (sprich Wurzelelement mit <head> und <body>) gehe, mache ich Überschriften, Textabsätze und Hyperlinks. Es ist immerhin schon eine Steigerung der Komplexität, wenn ich in ein Tag auch noch ein Attribut notieren kann (href="")!
Wenn die Teilnehmer nun Textabsätze, Überschriften und Hyperlinks notieren können, dann lohnt es sich mit Listen (<ul> und <ol>, noch nicht <dl>!) fortzufahren. Listen sind schon komische Elemente, denn hier muss ich verschachteln, bevor meine Textklumpen überhaupt im Markup ihren Platz finden. Der Unterschied zwischen <ul> und <ol> will auch ersteinmal verdaut werden ("Einkaufsliste" vs. "Bedienungsanleitung").
Wenn das mit dem Verschachteln dann geklappt hat, kann man sich der vollständigen Struktur widmen, denn ein HTML-Dokument ist ja schon mit festen Verschachtelungen (<html><head></head><body></body></html>) vorgeschrieben, in die dann das bisherige Markup eingepasst werden will.
Wenn man dann mit <head> und <body> operiert, dann will man natürlich auch wissen, wozu das alles gut ist. In diesem Stadium genügt zunächst das <title>-Element. Die vielen Meta-Angaben verwirren unnötig, da ihr Gebrauch in der Praxis des Kurses zunächst marginal ist (fang jetzt auf keinen Fall mit Encoding an! http-equiv verwirrt mehr, als dass es hilft! Keywords und Description vielleicht erwähnen, aber nicht anwenden!), und innerhalb einer Blog-Software ohnehin automatisiert benutzt werden sollte.
Um die Verschachtelung perfekt zu machen, bieten sich dann Tabellen an. Schlimmer als diese geht es in HTML sowieso nicht. Formulare, <label> und den ganzen Kram würde ich geflissentlich vermeiden, es sei denn ein Teilnehmer fordert es explizit ein. Zur "reinen" Textauszeichnung kommt man in den allermeisten Fällen mit den bisherigen Bestandteilen von HTML aus.
Logische Textauszeichnungen wie <strong>, <em> und <sup>/<sub> kann man noch nachliefern, sie sind in einem regulären Fließtext ohnehin optional.
Wenn dann die Textauszeichnung mit oben beschriebener Übung gelingt, dann kann man an die Grundzüge von CSS gehen.
CSS
Hier kann man nun auf den tieferen Sinn des <head>-Elements eingehen, indem man eine Verknüpfung mit einem externen Stylesheet behandelt. In diesem externen Stylesheet werden zunächst ganz einfache Dinge ausprobiert, wie z.B. Textabsätze und Überschriften in einer anderen Schriftart und -größe darzustellen. Auch Hintergrundfarben und -bilder für das <body>-Element sind denkbar, um die grundsätzlichen Wirkungsweisen von CSS zu veranschaulichen.
Wenn es an das Layouten geht, dann bietet es sich an in den bisher erarbeiteten Dokumenten eine regelrechte Navi einzubauen, die natürlich eine Liste mit vorangehender (Unter-)Überschrift ist:
<h2>Navigation</h2><ul>....</ul>
Um nun die Navi etwas aufzuhübschen bietet es sich an, die Unterüberschrift samt der Liste in ein zusammenfassendes Element namens <div> zu verschachteln. Hier kann man dann auch gleich den sinnvollen Einsatz eines <div>-Elements demomstrieren, indem es mehrere zusammengehörende Elemente gruppiert. Natürlich bekommt es eine ID und schon kann es mit den Nachfahrenselektoren in CSS weitergehen. Das <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=SELFHTML-Kapitel zu CSS-basierten Navigationsleisten> bietet dann den vorläufigen Abschluss des Kurses.
Als Zusatz und Vertiefung kann dann das restliche CSS-Kapitel zu <http://de.selfhtml.org/css/layouts/@title=CSS-basierten Layouts> behandelt werden, welches die Kenntnisse aus den Navigationsleisten vertieft und ausweitet.
Hilft Dir das jetzt weiter?
Liebe Grüße,
Felix Riesterer.
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
Gunnar Bittersmann
Der Martin