Webdesign mit CSS, HTML und Javascript
Stil mit {stil}
Jun 2010
HTML/XHTML: Formatierung durch den Browser
Obwohl erst CSS für das Layout, Schriftgestaltung und Farben in Webseiten sorgt, formatieren und rendern Browser HTML-Dokumente ohne CSS-Regeln entsprechend einer Vorgabe. Auch der Doctype spielt eine gewisse Rolle bei der Darstellung der HTML-Seite. Die Kenntnis der Grundregeln ist fundamental für funktionierende Stylesheets.
HTML-Elemente und margin
Alle Inhalte von Blockelementen halten einen kleinen Abstand voneinander – den margin. Wenn die HTML-Tags direkt im body-Tag des HTML-Dokuments liegen, sieht man zudem auch einen kleinen Margin zum Rand des Browserfensters. Die Inhalte von Inline-Tags hingegen weisen keinen margin gegenüber den sie umschließenden Texten auf. Bilder, die innerhalb eines Textes gesetzt werden, verhalten sich einfach wie übergroße Buchstaben und vergrößern den umfassenden Block.
Inhalte von p-Elementen werden ohne CSS-Eigenschaften von den meisten grafischen Browsern in der Schriftgröße 1 EMS (meistens 11 Pixel) in der Schriftart Times New Roman gesetzt. Die Zeilenhöhe (meistens 16 Pixel) kann ebenfalls nur über Stylesheet-Regeln geändert werden. Der Benutzer kann die Schriftgröße durch den Zoom seines Browsers ändern.
Darstellung von Tabellen | Tabellen nehmen zwar nicht unbedingt die gesamte Breite des umfassenden Blocks ein, aber sie erzeugen einen Zeilenumbruch vor dem öffnenden und nach dem schließenden table-Tag. Ohne Attribute und CSS-Eigenschaften weisen Tabellen keinen Rahmen und keinen Abstand der Inhalte von Tabellenzellen auf.
Darstellung von Listen | ul- und ol-Tags erzeugen ungeordnete bzw. geordnete Listen mit Listenpunkten oder einem numerischen Index. li-Tags erhalten in beiden Listentypen einen Einzug und das vorangestellte Listenzeichen. Nur CSS-Eigenschaften können den browserspezifischen Einzug, Listenpunkt oder numerischer Index ändern oder unterdrücken.
Leerzeichen und Zeilenumbrüche in HTML-Seiten
Browser ignorieren aufeinanderfolgende Leerzeichen und Zeilenumbrüche im HTML-Code.
<p>Wer mehrere Leerzeichen nacheinander setzt, macht was falsch.</p> <p>Wer mehrere Leerzeichen nacheinander setzt, macht was falsch.</p>
Die beiden HTML-Tags werden im Browser gleich angezeigt:
Wer mehrere Leerzeichen nacheinander setzt, macht was falsch.
Wer mehrere Leerzeichen nacheinander setzt, macht was falsch.
Damit Leerzeichen und Zeilenumbrüche vom Browser angezeigt werden, kann ein CSS-Stil eingesetzt werden:
white-space: pre;
div und span: HTML-Tags ohne Eigenschaften
Die zuvor beschriebenen HTML-Tags besitzen „angeborene“ Eigenschaften für die Darstellung im Browserfenster. p-Tags erzeugen einen kleinen Margin vor und nach dem p-Tag, ul- und ol-Tags besitzen ebenfalls diesen führenden und abschließenden Margin und darüber hinaus bringen sie Auflistungszeichen oder einen Index mit. Zwei besondere Tags sind das div-Tag und das span-Tag: Sie sind Tags ohne Eigenschaften.
Sie sind für die Gestaltung von HTML-Elementen durch Stylesheets gedacht, ohne dass der Browser eigene Formatierungen einbringt. Das div-Tag ist ein Block-Tag, das span-Tag ein Inline-Tag. Ohne weitere Formatierung führt auch das div-Tag zu einem Zeilenvorschub, während Text in einem span-Tag ohne besondere Auszeichnung innerhalb der Textzeile dargestellt wird.
Doctypes
Durch die Angabe des Doctypes im Kopf des HTML-Documents vereinbart der Webdesigner nicht nur (X)HTML-Version, sondern teilt dem Browser mit, wie sauber das Dokument angelegt wird.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Auf der Basis des Doctypes sind Validatoren in der Lage, das Dokument auf Syntaxfehler zu prüfen – zu validieren. Gerade wenn Skripte auf dem DOM aufbauen, ist ein korrektes Markup die Basis für ein reibungsloses Skript ohne gefährliche Stolperfallen. Darüber hinaus benutzen moderne Browser die Angabe des Doctypes, um ihr Verhalten zu ändern: Im Modus strict verhalten sie sich standardkonform, im Modus loose (Quirksmodus) simulieren sie die Fehler ihrer Vorgängerversionen, um alte HTML-Dokumente nicht ins Unglück zu stürzen. Die Tabelle auf den Seiten der Universität von Helsinki gibt Aufschluss über das Verhalten moderner Browser bei verschiedenen Doctypes.
Der Doctype hat nicht nur Auswirkungen auf die Darstellung des Markups und die Anwendung von CSS-Stilen, sondern auch Skripte werden ja nach Doctype unterschiedlich interpretiert (Beispiel: Berechnung der Mausposition in gescrollten Fenstern).
Quirksmode-Verhalten: Mozilla Quirks Mode Behavior Safari hält sich an Mozilla.
Einfluß des Doctypes: The Opera 7 und 8 Doctype Switches
Ein Dokument mit einem strikten Doctype anzulegen, mag schmerzhaft sein – insbesondere, wenn der Webdesigner seine Erfahrungen bereits in der dunklen Zeit der Browserkriege gesammelt hat. Andererseits ist der Skripter auch gezwungen, sich an einen vorgegebenen Doctype zu halten – z.B. wenn Skripte im Auftrag eines Kunden für vorhandene HTML-Dokumente geschrieben werden. Gerade in diesem Fall ist es zwingend erforderlich, sich über die Implikationen verschiedener Doctypes kundig zu machen, denn schließlich können die Seiten des Kunden durch ein Redesign von einem Doctype in einen anderen Doctype wandern und Kunden mögen keine langen Erklärungen, warum das JavaScript in einem altertümlichen HTML-Dokument bestens funktioniert hat, aber in einem sauber aufgebauten Dokument plötzlich mit Fehlermeldungen reagiert.
Editoren für HTML und PHP
- 2ndEditor von SixDots
- Ein kleiner Editor für Windows, der ähnlich wie Notepad aufgebaut ist und HTML-, CSS- und PHP-Syntax-Highlighting beherrscht. Was heißen soll: Durch farbiges Anzeigen der Sprachelemente vereinfacht er das Schreiben von Programmen.
- BBEdit von Bare Bones
- Der Editor für den Mac. Neben farbiger Syntax (Syntax-Highlighting) für HTML, CSS, PHP und weiteren Markup- und Programmiersprachen zeigt er das Dokument ohne Verzögerung so an, wie es in einem der modernsten Browser, in Safari, angezeigt wird und bietet für HTML/XHTML einen hervorragenden Syntaxcheck.
- SuperHTML
- Ein HTML- und Programm-Editor für den PC.
Referenzen und Normen
- XHTML 1.1-Module vom 8.8.2008
- Die Übersicht über die XHTML-Module
- XHTML™ 2.0 W3C Working Draft 26 July 2006
- Die (noch vorläufige) Fassung von XHTML 2.0 beim W3C
- CSS: Under Construction (Links zu CSS 3.0 Working Drafts und CSS 2.1)
- Cascading Stylesheets in der Fassung vom 25 February 2004
- Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) W3C Candidate Recommendation 19 July 2007 Specification
- Die jüngste Ausgabe der CSS 2.1 Spezifikation