Artikel
HTML vs. CSS vs. Javascript
Das Zusammenwirken von HTML, CSS und JavaScript
Allgemein kann die Verarbeitung eines im Web typischen Dokuments in einem Drei-Schichten-Modell veranschaulicht werden. Die drei Schichten wären die Markup-Schicht mit den HTML-Auszeichnungen, die Präsentationsschicht mit den CSS-Regeln und die Verhaltensschicht mit Javascript. Jede Schicht für sich ist für einen speziellen Teil des Gesamtdokumentes zuständig. Im Idealfall sind alle Schichten voneinander getrennt.
Die Markup-Schicht
Das so genannte Markup ist das Herzstück einer Webseite und spiegelt die Struktur des Seiteninhaltes wider.
- Handelt es sich bei einem Datensegment um eine Überschrift oder um einen normalen Absatz?
- Wohin führt ein Verweis und in welcher Beziehung steht die Ziel-Ressource mit der aktuellen?
- In welcher logischen Verbindung stehen die Daten einer Tabelle zueinander?
All diese Fragen beantwortet und beschreibt die Auszeichnungssprache mit ihrem Markup durch so genannte Elemente. Die Elemente spiegeln die Semantik einer Webseite wider (näheres zu diesem Thema folgt in diesem Adventskalender). Für die Darstellung im Webbrowser ist die Auszeichnungssprache entweder HTML oder XHTML.
Die Präsentationsschicht
In der Präsentationsschicht werden die strukturierten Daten mit Layoutanweisungen kombiniert. So entsteht ein Layout, die Webseite bekommt ein Gesicht. Leider wird noch viel zu oft versucht, ein Layout mit HTML-Mitteln zu erreichen. Das widerspricht der Grundidee von HTML, denn das Markup besitzt für sich keinerlei darstellerische Gestalt. Erst durch die Regeln eines CSS-Stylesheets bekommt es ein Gesicht. Browsern liegen auch CSS-Dateien bei (sogenannte User-Agent-Stylesheets), weshalb jeder von uns eine "ungestylte" Webseite trotzdem dank des Einflusses von CSS-Regeln betrachtet. Schreibt man CSS-Dateien selber, kann man das dem Browser mitgegebene Aussehen von HTML-Elementen fast nach Belieben verändern.
Die Verhaltensschicht
In der Verhaltensschicht sorgt das so genannte DOM Scripting für die Dynamik einer Webseite. So können beispielsweise Teile per Tastendruck ein- oder ausgeblendet, ausgewählt, neu angeordnet werden. Die Verhaltensschicht sorgt für die direkte Interaktion einer Webseite mit dem Benutzer.
Meist ist die Skriptsprache zur Veränderung des DOM JavaScript – nicht zu verwechseln mit der Programmiersprache Java.
Das Document-Object-Modell
Das DOM dient als gemeinsame Schnittstelle zwischen den einzelnen Schichten. Es erlaubt Programmen und Skripten den dynamischen Zugriff und die Änderung des Inhalts, der Struktur und des Stils eines Dokuments.
Die Verarbeitung des Dokuments vom Browser
Als erstes durchläuft das Markup den browsereigenen Parser. Nachdem das Markup durch den Parser lief, entwirft der Browser nach einiger Fehlerbehebung das DOM, das als Basis weiterer Verarbeitungsschritte dient. Danach werden die Stylesheet-Daten verarbeitet und den Elemeten des DOMs zugewiesen. Erst dadurch erhalten die Elemente eine Gestalt und können dargestellt werden. Zu guter Letzt werden die Daten der Verhaltensschicht verarbeitet und interpretiert.
Weiterführende Links
- HTML 4.01 Spezifikationen auf Deutsch
- XHTML 1 Spezifikationen auf Deutsch
- CSS Spezifikationen auf Deutsch
- Wikipedia – JavaScript
- Wikipedia – Document Object Model
- Anne van Kesteren: How browsers work
- Lachlan Hunt: HTML Tags
Zum Autor
Markus Wulftange kommt aus Osnabrück und beschäftigt sich seit etwa drei Jahren mit Webstandards.
- Info:
- HTML vs. CSS vs. Javascript ist Beitrag Nr. 14
- Autor:
- Markus Wulftange am 2. Dezember 2005 um 22:00
- Kategorie:
- Adventskalender 2005
Kommentare
Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.
Noch keine Kommentare
Kommentar-Feed für diesen Beitrag
Entschuldige, das Kommentarformular ist zurzeit geschlossen.