Die Anatomie einer Webseite

Um die verschiedenen Teile der Webseite zu verstehen, ist es sinnvoll, den generellen Aufbau einer Webseite zu betrachten.

Wenn ein lokaler Browser eine Webseite aufzurufen versucht, sendet er eine Anfrage für die Seite an den Webserver, welcher die Seite hostet. Browser sind letztendlich Programme, welche unter Anderem zur Darstellung von HTML-Dokumenten dienen, ähnlich wie ein PDF-Reader zur Darstellung von PDF-Dateien dient. Der Browser benötigt also eine HTML-Datei, um diese darzustellen.

Der Webserver hat (im einfachsten Fall) eine HTML-Datei gespeichert, welche er dem Client, also dem Browser nach seiner Anfrage übermittelt. HTML steht für Hyper Text Markup Language. Eine Markup Language ist ein Dateiformat, in welchem bestimmte Markierungen angebracht werden können um zu bestimmen, wie der enthaltene Text formatiert werden soll. Beispielsweise wurden früher in Verlagen in einem Rohtext verschiedene Markierungen, wie spezielle Unterstreichungen, angebracht um damit z.B. zu signalisieren, dass ein Textausschnitt fett gedruckt werden soll. “Hyper Text” steht dafür, dass HTML mehr als nur Text darstellen kann, es können beispielsweise auch Bilder oder Buttons dargestellt werden. Hier ein Beispiel, wie eine einfache HTML-Datei aussehen kann:

Öffnet man diese Datei mit einem Browser, so erhält man das folgende Resultat:

Am Anfang der HTML-Datei werden hauptsächlich einige Metainformationen festgelegt. Im “title”-Tag ist dann der Name der Seite und im “body” ist alles, was auf der Seite dargestellt werden soll, in diesem Fall also eine Überschrift (h1) mit dem Text “Hello World!”.

Neben dem reinen HTML-Code kann eine Webseite jedoch noch andere Dateien einbinden:

In speziell dafür vorgesehenen Tags kann man beispielsweise Bilder (img), Skripte (script) oder CSS-Code (style) einbinden. Während man Bilder nicht direkt in die HTML-Datei “eintippen” kann, kann man den Javascript- und CSS-Code sowohl durch Referenzen auf externe Dateien, als auch direkt in der HTML-Datei verfassen.

Javascript-Code dient in einer Webseite meist zur Erstellung von dynamischem Verhalten, also spezieller Webseitenlogik oder dem Aufruf von externen Datenquellen.

Zuletzt ist der CSS-Code dazu da, um das Aussehen einer Webseite anzupassen. Indem man mittels Selektionen gewünschte Elemente der HTML-Datei auswählt, lassen sich Regeln definieren, die z.B. die Hintergrundfarbe eines Elements oder eine Animation beim Drüberhalten des Mauszeigers bestimmen.