Moderne Websites mit (X)HTML und CSS

Geschichtliches

1989 entwickelte Tim Berners Lee ein Hypertextsystem, um Forschungsergebnisse auf eine einfache Art und Weise mit anderen Forschern austauschen zu können. Dieses System bestand (und besteht immer noch) aus 3 Kernstandards: Dem Hypertext Transfer Protocol, das verwendet wird um die Kommunikation eines Browsers mit einem Webserver zu ermöglichen. Der zweite wichtige Standard heisst HTML, was für Hypertext Markup Language steht. HTML ist eine Dokumentenbeschreibungssprache, die festlegt, wie Dokumente gegliedert und verknüpft sein sollen. Als letztes ist URL zu nennen, was für Uniform Resource Locator steht. Damit können Ressourcen eindeutig adressiert werden.

Diese Standards bilden den Kern des World Wide Web, kurz WWW, das sich inzwischen zu einem der wichtigsten Medien überhaupt entwickelt hat. Mit der Zeit kamen noch andere Standards hinzu, z.B. CSS, um das Layout einer Website zu verändern, oder XML, das von XHTML genutzt wird um den HTML-Standard zu verschärfen.

URI und URL

Das WWW ist (wie oben schon erwähnt) ein Hypertextsystem. D.h. dass Dokumente über so genannte Hyperlinks verknüpft werden können. Zum Beispiel kann ich hier, irgendwo im Text einen Hyperlink setzen, der dann zu einem anderen Dokument führt. So hat man die Möglichkeit Inhalte zu verknüpfen und ist nicht auf eine lineare Gestalung angewiesen, wie das z.B. beim schreiben eines (guten) Buches notwendig ist.

Ein Hyperlink ist ein Verweis auf eine andere Ressource. Dabei bedient er sich URIs, das für Uniform Ressource Identifiers steht. Mit einer URI wird eine Ressource (es kann sich nicht nur um Texte, sondern auch um Videos, Musik, etc. handeln) eindeutig identifiziert. Dass diese Aufgabe, des eindeutig identifizierbar machens, in einem so großen Netzwerk möglich und einfach zu handhaben ist, gibt es URLs - Uniform Ressource Locator. Diese bestehen aus dem Kürzel des verwendeten Netzwerk Protokolls, dem Hostnamen und der Position im Dateisystem des Hosts (stimmt nicht 100%ig, aber fast ;-)). Ein Beispiel für eine URL wäre http://www.example.com/path/to/ressource.html. http ist das Kürzel für das Hypertext Transfer Protocol, www.example.com ist der Hostname und /path/to/ressource.html die Position der Ressource auf dem Host.

Also URL ist eine Art URI (es gibt noch eine andere Art, aber die wurde meines Wissens nach nie implementiert), die eine Ressource anhand ihrer Adresse eindeutig identifiziert.

HTML

Dokumente für das WWW werden normalerweise mit HTML beschrieben. HTML steht für Hypertext Markup Language und ist eine Sprache um den Inhalt bzw. die Struktur und den Aufbau eines Dokuments zu beschreiben. So wird z.B. eine Überschrift als solche markiert (deswegen "Markup Language"), einzelne Textabschnitte sinnvoll durch Absätze getrennt, Zitate kenntlich gemacht, etc.

Dass der Aufbau des Textes durch Programme interpretiert und ausgewertet werden kann gibt es syntaktische und semantische Regeln. In HTML gibt es so genannte Tags, das sind Elemente mit denen der Inhalt eines Textes beschrieben werden kann. Damit diese Tags vom normales Fließtext unterschieden werden können werden sie auch als solche kenntlich gemacht. So gibt es z.B. einen <h1>-Tag um einen Textabschnitt als Überschrift (Headline) der ersten Ebene (es gibt auch noch Unterüberschriften h1, h2, ...) zu kennzeichnen.

<h1>Das ist eine Überschrift</h1>

Das Beispiel soll zeigen wie so ein "Markup" aufgebaut ist. Die Tags stehen zwischen spitzen Klammern (es gibt einen öffnenden und einen schließenden Tag) und markieren "Das ist eine Überschrift" als eine Überschrift. So kann ein Programm sehr einfach (und folglich schnell) erkennen dass es sich bei dem Text um eine Überschrift handelt und sie entsprechend ausgeben. Da durch die Tags nicht das Aussehen des Textes angegeben wird, sondern um was es sich bei dem eingeschlossenen Inhalt handelt, kann jedes Programm eine passende Ausgabe generieren. So wird ein normaler Browser eine Überschrift meist größer und in Fettdruck ausgeben, ein Programm das Websiten vorliest kann sie entsprechend lauter/betonter aussprechen.

Eine HTML-Datei speichert also keine Informationen über das Layout einer Website, sondern nur über den Inhalt. Leider gibt es in HTML die Möglichkeit auch das Layout (Textgröße, Farbe, etc.) zu verändern. In dem neusten Standard ist diese Möglichkeit aber nicht mehr enthalten und sollte auch nicht genutzt werden, da sie dem Sinn von Markup-Sprachen entgegenwirkt.

CSS

Wie bekommt man seine Website dann aber so schick wie andere das haben? Für diese Aufgabe entwickelte das W3C den CSS-Standard. Mit dieser Cascading Stylesheet Sprache kann man das Layout seiner HTML-Dokumente komplett verändern und an seine Bedürfnisse anpassen. Da man eine zentrale Stylesheet Datei auf mehrere HTML-Dokumente anwenden kann, kann so auch sehr einfach das Design vieler einzelner Dokumente einheitlich verändert werden. Man muss es nur einmal in dem verwendeten Stylesheet ändern.

In einem Stylesheet kann man nicht nur ein Layout angeben, nein, man kann sogar für verschiedene Ausgabegeräte verschiedene Layouts angeben. Z.B. kann man eine Website bei der Ausgabe auf dem Bildschirm mit einem Hintergrundbild, Menü, und vielen Farben versehen, wärend sie in schwarz/weiß gedruckt wird - ohne eine Zeile in den HTML-Dateien ändern zu müssen. Man verschiedene Layouts für die Bildschirmausgabe, den Druck, die Ausgabe auf PDAs und Handys definieren. Darüber hinaus ist es sogar möglich mit CSS sogenannte Aural Stylesheets zu entwickeln, und die Sprachausgabe zu beeinflussen. Soll der Text z.B. von einer weiblichen Stimme gesprochen werden, wärend Zitate von einer lauten Männerstimme gesprochen wird, kann das mit CSS definiert werden.

Kurze Zusammenfassung

Mit HTML wird der Inhalt von Dokumenten beschrieben, mir CSS dessem Layout definiert. Dabei kann zwischen sich das Layout (bzw. die Ausgabe allgemein) auf verschiedenen Ausgabegeräten unterscheiden und auch unterschiedlich definiert werden.

XHTML (1.0)

XHTML (1.0) ist eine Neuformulierung des HTML Standards als XML-Anwendung. XML ist eine Metasprache auf dessen Basis andere Markupsprachen entwickelt werden können. XML stellt quasi den Syntax bereit. Bestimmte Tags gibt es bei XML also noch nicht, diese müssen erst noch definiert werden um eine benutzbare Beschreibungssprache zu bekommen. XHTML verwendet also die Tag-Namen und dessen Aufgaben (zum Beispiel die h-Tags für Überschriften) von HTML aber den XML Standard für den Syntax. Dieser ähnelt SGML (XML ist eine Teilmenge von SGML) das von HTML verwendet wird, ist nur um einige strengere Regeln erweitert.

Also: HTML verwendet SGML, wärend XHTML XML als Metasprache verwendet und XML ist eine strengere Teilmenge von SGML. Dadurch dass XML strenger ist als SGML kann es von Webbrowsern (oder anderen Programmen) viel einfacher und schneller interpretiert werden. Außerdem können Sprachen die auf XML basieren sehr leicht in andere XML-basierte Sprachen übersetzt werden. Für diese Aufgabe gibt es auch schon viele fertige Programme. Z.B. um ein DocBook (das ist eine XML-basierte Markupsprache um Bücher und andere Texte zu verfassen) in XHTML umzuwandeln.

Weiterführende Links

Copyright

Dieser Text wurde von Bodo Akdeniz verfasst und unterliegt den Bestimmungen der GNU Lizenz für freie Dokumente.


Zurück zur Startseite