Was passiert, wenn man www.google.com in den Browser eintippt? Na klar, werden Sie sagen, die Suchseite von Google erscheint. Doch was passiert wirklich hinter den Kulissen? Wo wird die eingegebene Adresse hingeschickt? Was passiert dort? Und was genau kommt zurück? Der folgende Artikel versucht, etwas Licht ins Dunkel zu bringen und dabei Begriffe und Abkürzungen wie DNS, Web Server, HTTP, HTML, CSS und JavaScript zu entschlüsseln. Die Betrachtung bleibt dabei naturgemäss oberflächlich (im Sinne von nicht tiefgehend). Aber sobald die groben Abläufe bekannt sind, ist es ein Leichtes, sich bei Wikipedia in beliebiger Tiefe mit einem Thema auseinanderzusetzen.
IP-Adressen und Routing
Wir haben also www.google.com getippt und drücken ENTER. Woher weiss der Browser nun an wen er sich zur Beantwortung der Anfrage wenden soll? Klar, an Google, aber wo ist Google im Internet zu finden? Dazu wird zunächst ein Domain Name Server befragt, dessen Aufgabe es ist, einen Domain Namen (google.com) in eine Internet Protokoll Adresse (IP-Adresse) zu übersetzen. In unserem Fall z.B. www.google.com in 173.194.70.99. Dieses System nennt sich Domain Name System oder DNS.
Sämtliche Kommunikation im Internet wird über IP-Adressen, bestehend aus einem Zahlenquartett durch Punkte getrennt, gesteuert. Die Steuerung der Informationen von einem Punkt im Internet zum anderen übernehmen dabei sogenannte Router. Ein Datenstrom wie unsere Anfrage für die Homepage von Google trifft also auf einen Router, zeigt diesem seine gewünschte Zieladresse und der Router zeigt ihm den Weg den er nehmen muss. Man kann sich Router somit als Verkehrspolizisten des Internet vorstellen.
Der Web Server
Am Ziel angekommen, kümmert sich ein Web Server um die Beantwortung der Anfrage. Web Server ist dabei einerseits ein Begriff für den Computer der die Anfrage bekommt, andererseits auch für die Software die auf dem Computer läuft. Diese Unterscheidung ist für die aktuelle Betrachtung allerdings nicht weiter wichtig.
Um bei unserem Beispiel zu bleiben, nimmt also einer der vielen tausenden Server von Google (es gibt schliesslich ausser uns noch viele andere Leute die etwas von Google wissen wollen) unsere Anfrage entgegen und versucht sie zu beantworten. Dazu schaut er sich den Teil hinter dem Domain Namen genauer an, da dieser angibt was auf dem Server genau gewünscht wird. In unserem einfachen Beispiel besteht die Anfrage nur aus dem Domain Namen ohne Zusatz, und damit weiss der Server, dass er die Homepage ausliefern muss. Ein anderes Beispiel wäre die Anfrage www.google.com/about/, was in einer Antwort mit dem Inhalt der Über Uns-Seite von Google resultieren würde.
HTTP
Einen Punkt den wir in der bisherigen Betrachtung ausgeklammert haben, ist die Frage was genau zwischen Web Browser und Web Server übertragen wird. In der Netzwerktechnik wird dieses System über ein Schichtenmodell abgebildet, das von unterster zu oberster Ebene immer mehr von den eigentlichen elektrischen Signalen abstrahiert, bis man zu einem einfach zu handhabenden Protokoll gelangt, das wie im Fall vom World Wide Web sogar von Menschen lesbar ist. Dieses Protokoll nennt sich HTTP (Hyper Text Transfer Protocol). HTTP ist absichtlich sehr einfach gehalten und besteht nur aus einigen wenigen sogenannten Verben, mit denen man Daten anfordern oder verschicken kann. Um bei unserem Beispiel zu bleiben und die Homepage von Google anzufordern reicht z.B. ein einfaches
GET /
und schon weiss der Web Server von Google was er ausliefern muss.
HTML
Eine vielleicht nicht offensichtliche Unterscheidung ist diejenige zwischen dem Übertragungsprotokoll HTTP und den Inhalten, die per HTTP übertragen werden. An dieser Stelle kommen wir nun endlich zum Thema HTML (Hyper Text Markup Language). Während also HTTP definiert wie Daten zwischen Browser und Server übertragen werden, definiert HTML (und dessen Verwandte CSS und JavaScript, dazu später mehr) wie eine Website aussieht und wie sie sich verhält.
HTML ist eine sogenannte Auszeichnungssprache (Markup Language), die auf dem ISO-Standard der Standard Generalized Markup Languages (SGML) basiert. Die verwendete Syntax ist dabei XML. XML ist ein einfaches, textbasiertes Format bei dem Inhalte durch verschachtelte Tags strukturiert werden. Ein einfaches HTML-Dokument in XML-Syntax schaut beispielsweise folgendermaßen aus:
<html>
<head>
<title>Ich bin ein Titel</title>
</head>
<body>
<p>Ich bin ein HTML Dokument</p>
</body>
</html>
Alles in spitzen Klammern sind dabei die genannten Tags, die helfen in einem Dokument Struktur und Inhalte zu trennen. Das Beispiel-Dokument ist also ein HTML-Dokument (<html>), das einen Kopfbereich (<head>) mit dem Titel (<title>) "Ich bin ein Titel" hat, sowie einen Textkörper (<body>) mit dem Absatz (<p>) "Ich bin ein HTML Dokument" hat.
Ein weiterer, wesentlicher Einfluss auf HTML (der sich ebenfalls im Namen wiederfindet) sind sogenannte Hypertext Systeme, die Informationen untereinander über Hyperlinks verknüpfen. Um beispielsweise auf eine Homepage zu verlinken ist folgende Syntax notwendig:
<p><a href="http://www.web-crossing.com/">Ich bin ein Link auf eine Homepage</a></p>
Neben den bereits bekannten Tags wird hier ein Tag-Attribut (href) verwendet, mit dessen Hilfe man zusätzliche Informationen an ein Tag "anhängen" kann. In diesem Fall die Adresse der Homepage zu der verlinkt werden soll.
CSS
Nachdem nun also klar ist wie ein HTML Dokument Struktur und Inhalte bekommt, stellt sich die Frage wie das ganze optisch ansprechend gestaltet und mit Leben gefüllt werden kann.
Die Trennung von Struktur und Aussehen ist sinnvoll, da sie es ermöglicht, Inhalte auf verschiedene Arten darzustellen (z.B. für unterschiedliche Endgeräte). Aus diesem Grund wurden Cascading Style Sheets (CSS) als ergänzender Standard zu HTML entwickelt. Mit CSS ist es möglich, bestimmte Teile eines HTML Dokuments zu referenzieren und deren Aussehen zu definieren, ohne das HTML Dokument selbst ändern zu müssen. Ein kleines Beispiel zeigt wie einfach das ist:
p { color: Red; font-size: 20px; }
Damit werden alle Absätze (<p> Tags im HTML) in der Farbe Rot und der Schriftgröße 20px dargestellt.
Das "Cascading" in der Abkürzung steht übrigens für die Eigenschaft von CSS, Einstellungen zu vererben. Wird einem übergeordneten Element (z.B. dem <body>) eine bestimmte Schriftart zugewiesen, so vererbt sich diese Einstellung auf alle in <body> enthaltenen Elemente:
body { color: Blue; }
Damit werden alle Texte im HTML Dokument blau dargestellt. Interessant wird es dann z.B. bei der Kombination dieses und des letzten Beispiels. Mit CSS können Formatierungsanweisungen nämlich auch gezielt überschrieben werden, um vererbte Einstellungen ausser Kraft zu setzen. In unserem Fall würden also alle Texte in Blau dargestellt, die NICHT in einem Absatz stehen (da die Formatierung für <p> diejenige für <body> überschreibt).
JavaScript
Kommen wir also zum letzten Punkt, der Interaktion. Man spricht bei HTML von einer sogenannten deklarativen Sprache. Diese Sprachen eignen sich gut um Tatsachen abzubilden ("Element <p> ist in <body> enthalten"), aber weniger dazu Vorgänge zu beschreiben ("Wenn der User hier klickt soll in diesem Feld ein Text erscheinen"). Abhilfe schafft hier die Programmiersprache JavaScript, die von der Firma Netscape 1995 erfunden und in deren Browser Netscape Navigator erstmals inkludiert wurde. JavaScript hat übrigens nichts mit der Programmiersprache Java zu tun, das ist nur eine unglückliche Namensähnlichkeit die immer schon für viel Verwirrung gesorgt hat.
JavaScript wurde als Sprache bewusst einfach gehalten, da ursprünglich nicht angedacht war viel Benutzerinteraktion auf Webseiten zu haben. Viel mehr wurden statische Inhalte dargestellt, und allfällige Benutzereingaben zur weiteren Verarbeitung zum Server geschickt. Das hat sich in den letzten Jahren gewandelt, und auch die Sprache JavaScript hat dem Rechnung getragen indem es neue Versionen des zugehörigen Sprachstandards ECMAScript gab. Derzeit sind wir bei Version 5.0
Nachdem speziell dieser Bereich der Website-Programmierung besonders kompliziert ist, soll es an dieser Stelle zur Abrundung nur ein kurzes Beispiel für eine Interaktion von JavaScript mit einer Website geben. Wir fügen dazu unserer Beispielseite einen Button hinzu, der beim Klicken eine Meldung am Bildschirm ausgibt:
<html>
<head>
<title>Ich bin ein Titel</title>
</head>
<body>
<p>Ich bin ein HTML Dokument</p>
<p><button onclick="alert('Hallo JavaScript!')">Klick mich!</button>
</body>
</html>
Hier wird wieder ein HTML-Attribut genutzt, um ein HTML-Element mit zusätzlichen Daten zu verknüpfen. Das Attribut "onclick" des Elements <button> ermöglicht es, einen JavaScript Befehl zu hinterlegen, der im Falle eines Klick auf den Button aufgerufen wird. "alert" wiederum ist ein Befehl aus dem JavaScript Sprachschatz, der ein Meldungsfenster am Bildschirm öffnet, mit dem Text der in Klammern als Argument übergeben wird.
Damit sind wir am Ende unseres Streifzugs durch die Welt des WWW. Dem interessierten Leser seien noch die entsprechenden Wikipedia Artikel zu den Schlüsseltechnologien ans Herz gelegt: