CSS: die Grundlage

Vorbemerkungen

Keine Panik vor der Textmenge, bitte! Ich spreche hier zwar vor allem jene an, die Interesse an CSS haben, genauso aber jeden, der gerne hinter die Kulissen blickt und nicht glaubt, dass die Sonne nachts ausgeht. Und damit meine ich auch DICH!

Letztes mal habe ich noch großspurig von den Vorteilen von CSS erzählt, richtig? Ja, genau das habe ich. Und jeder von euch dachte sofort: "Aha, ein weiteres Artikel-Sammelwerk für CSS". Wenn wir von CSS reden, dann vergessen wir leider meistens eine wichtige Kleinigkeit. Diese Kleinigkeit ist so wesentlich, dass sie meistens missachtet und missbraucht wird. Ich meine HTML. Von mir aus auch XHTML, das ist ja nichts anderes als HTML neudefiniert mit vernünftigen, konsistenten Regeln.

CSS und HTML gehören zusammen

(X)HTML oder besser gesagt: semantisches (X)HTML ist unerläßlich für die richtige Anwendung von CSS. Semantik ist die Lehre der Bedeutung. Ich weiß, ich weiß: Hier sollte es ausschließlich um CSS gehen, aber die Zeiten, in denen wir mithilfe von <font>- und <table>-Tags das Layout bestimmt haben, müssen wir endgültig hinter uns lassen. Kein Kuchen wird gut, wenn der Boden Löcher hat. Genausowenig kann CSS sein volles Potential entfalten, wenn das grundlegende HTML nicht gemäß der Bedeutung strukturiert ist. Ein Kuchen mit gutem Boden kann durch Früchte, Sahne usw. sein volles Potential entfalten , obwohl der Boden an sich nicht so ansehnlich ist. Genauso kann eine gute HTML-Datei durch CSS zu einer Webseite heranwachsen, die nicht nur jeden erreicht, sondern auch mehr bietet, obwohl der grundlegenden HTML-Teig auf den ersten Blick garnicht so lecker aussieht.

Mir geht es hier und jetzt um semantisches HTML.

Wer erstmal nur Bahnhof versteht, weiß was ich vor zwei Jahren durchgemacht habe. (X)HTML bedeutet ausgeschrieben (eXtensible) HyperText MarkupLanguage oder kurzgefasst zu deutsch: (erweiterbare) Auszeichungssprache. Die wesentliche Aufgabe von HTML liegt also darin, einen Text, einen Webseiteninhalt, auszuzeichnen. Auszeichnen heißt hier: Die Bedeutung und Struktur des Textes zu markieren. Praktisch können und müssen wir in der HTML-Datei den Text so gliedern, dass nachher

• Überschriften <hx>
• Absätze <p>
• Listen <ul>, <ol>, <dl>
• Zitate <blockquote>, <cite>
• Hervorhebungen <em>, <strong>
• usw.

auch als solche bezeichnet (ausgezeichnet) wurden. An dieser Stelle wird klar, wo die Voraussetzungen für die folgenden Artikel liegen: HTML sollte bekannt sein. Wer gerade zum ersten mal etwas von HTML gelesen hat, kann sich unter [1] näher mit den grundlegenden Grundlagen von HTML beschäftigen. Der Autor H. Partl versucht von vorneherein, logisches Markup populär zu machen. Eine andere, umfassende deutschsprachige Erklärung gibt es bei [2]. Keine falsche Zurückhaltung! HTML ist einfacher, als man gemeinhin glaubt: Jeder weiß sofort, was eine Überschrift ist und was er oder sie hervorheben möchte. HTML ist eine logische Auszeichungssprache, die das leistet. Zusammen mit CSS ist man recht schnell in der Lage, eigene Webseiten im Medium der Zukunft zu präsentieren. Aber zurück zum Thema...

Was ist "gutes" HTML?

Neben dem bereits erwähnten und sehr wichtigen logischem Markup ist ein grundsätzlich "sauberes" HTML hilfreich. Aus eigener Erfahrung kann ich bestätigen, dass mehrere Faktoren wichtig sind:

1. Schreibe logisches Markup
2. Verwende eine <DOCTYPE...>-Deklaration
3. Halte dich an die Standards!

Was genau logisches Markup ist, dürfte mittlerweile klar sein: In der HTML-Datei wird nur noch gekennzeichnet, was eine Überschrift ist oder was hervorgehoben werden soll. Wie es nachher aussieht ist (noch) nicht so wichtig. Der zweite Punkt, die <DOCTYPE...>-Bestimmung, ist wichtig, da moderne Browser mittlerweile darauf achten, wie diese Definition tatsächtlich im HTML-Dokument geschrieben ist, und sich teilweise daraufhin anders verhalten. Eine Zusammenfassung der wichtigsten DOCTYPEs habe ich unter [3] zusammengestellt. Zu Punkt 3. ist anzumerken, dass man die Standards des W3C [4] nicht buchstabengetreu ausführen, sondern vor allem den Sinn dahinter erfüllen sollte. Das W3C bietet einen kostenlosen Service an, (X)HMTL- und CSS-Dateien auf Fehler zu überprüfen. [5]

Um für CSS eine gute Grundlage zu bieten, ist es in erster Linie wichtig, Struktur und Design zu trennen. Im echten Leben, fernab jeder Traumwelt, bedeutet das vor allem,

• <font>-Tags vollständig aus dem HTML zu entfernen,
• Tabellen wirklich nur noch für tabellarische Daten zu verwenden,
• Hervorhebung nur noch mit <em> (betont) und <strong> (stark betont) zu kennzeichnen und
• Überschriften nicht mehr zu gestalterischen Zwecken zu verwenden.

Mir ist natürlich klar, dass das eine echte Umstellung ist, aber es ist der erste und bei weitem der wichtigste Schritt in die Zukunft. CSS sind diese Zukunft.

Relevante und genannte URLs

1. HTML-Einführung
2. SelfHTML
3. DOCTYPE-Zusammenfassung
4. W3-Consortium
5. HTML- und CSS-Validator

Interessantes

• Browserliste
• Kontakt
• Schulisches

Ausgaben

Bis August 2004 gab es hier Ausgaben zu bestimmten Terminen. Dieses Konzept habe ich mit Ausgabe 10/2004 beendet, die Inhalte sind aber aus historischen Gründen noch erhalten.

Aktuell ist kronn.de in drei Hauptbereiche eingeteilt, die über die Startseite gut erreichbar sind.