Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

HTML vs. CSS vs. Javascript

HTML vs. CSS vs. Javascript

HTML, CSS und Javascript sind drei Webstandards, die jeweils einen anderen Aspekt der Webseite abdecken. Deshalb kann man in diesem Zusammenhang auch von einem »Drei-Schichten-Modell« sprechen.

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 DOMdient 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

Die Kommentare sind geschlossen.