HTML bietet zwar von Haus aus Formatierungen mit Tags wie <b> [s,a,w] (bold – fett), <i> [s,a,w] (italics - kursiv) und <u> [s,a,w] (underline - unterstrichen).
<p> Dies ist ein <b>fetter</b>, ein <i>kursiver</i> oder ein <u>unterstrichener</u> Text. <(p>
Doch diese sind mit dem Einzug von CSS als „deprecated“ - das heißt veraltet - gekennzeichnet. Und sollen in den nächsten Versionen nicht mehr unterstützt oder zumindest (HTML5) umgedeutet werden. Dementsprechend sind sie auch kein Bestandteil der HTML/XHTML Strict-Varianten (s. DTD).
Übung:
Überlegen Sie welche Formatierungsmöglichkeiten ein Zeitungsverleger, ein Redakteur und ein Setzer hat.
Moderne Webpräsenzen setzen also zu recht auf Cascading Stylesheets (CSS). CSS haben den Vorteil, das Layout (Formatierung) und Inhalte (Texte, Bilder, ...) zu trennen.
Der „Verleger“ einer Webpräsenz bestimmt einmalig das Layout (CSS), der „Redakteur“ einer Webseite schreibt den Inhalt (HTML) und der „Setzer“ also der Webbrowser fügt beides zusammen. Ändert der Verleger das Layout, passen sich alle Inhalte automatisch an. Was also auf den ersten Blick nach mehr Arbeit aussieht, vereinfacht komplexere Webpräsenzen (wie dieses Buch) enorm.
Im Anhang: Formatierende Tags finden Sie die CSS-Eigenschaften, welche die alten HTML-Tags ersetzen. Um sie direkt zu verwenden, müssen sie das <span> [s,a,w] Tag verwenden (s. Beispiel).
<p> Dies ist ein <span style="font-weight: bold;">fetter</span>, ein <span style="font-style: italic;">kursiver</span> oder ein <span style="text-decoration: underline;">unterstrichener</span> Text. <(p>
Anmerkung: Schalten sie in Firefox spaßeshalber einmal unter „Ansicht“ den „Webseiten-Stil“ auf „Kein Stil”.
Unter Anhang: Wichtige Tags steht eine Liste der wichtigsten Tags. Wenn sie experimentierfreudig sind, können sie diese nach Lust und Laune in ihre Visitenkarte schon einbauen: Gute Kandidaten sind <address> [s,a,w] (Adressblock kennzeichnen), <hr> [s,a,w] (horizontale Trennlinie) und <ul> [s,a,w]/<li> [s,a,w]) (für Telefonlisten). Schlagen sie in der Referenz nach, wie sie diese Tags benutzen.
Übung:
Probieren sie eine Formatierung mit <b> … </b> und die Alternative mit <span style="font-weight:bold;"> … </span>. Experimentierfreudige können jetzt schon weitere Tags (s.o.) einbauen.
Wie sie im Quelltext des Beispiels sehen, können sie (fast) jedem Tag einen Style hinzufügen. Probieren sie das ruhig auch mit <p> (<p style="…">). Die entsprechenden CSS-Eigenschaften finden sie im Anhang: CSS-Eigenschaften.
Beachten sie dabei, das nicht für jedes Tag auch jeder Style Sinn ergibt. So sind viele Styles beispielsweise nur für Inline- oder Block-Tags erlaubt. Später werden wir sogar lernen, wie man aus einem Inline- ein Block-Tag und andersherum macht.
Einem allgemeinen Tag wie <p> einen bestimmten Stil (Style) zuzuordnen, ist „schlechter Stil“. Denn normalerweise wendet man einen Stil immer auf eine bestimmte Kategorien (oder Klassen) an. So könnten alle Überschriften in der Schriftart „Arial“ erscheinen und der Fließtext in „Times New Roman“. Bestimmter Fließtext sollte aber als Anmerkung „kursiv“ sein. Es muss also eine Möglichkeit geben, Tags oder speziell gekennzeichnete Tags für einen Stil zu selektieren.