Wer im Netz eine Webseite aufruft, der sieht in seinem Browser ein meist optisch ansprechendes Layout, das aus verschiedenen Farben, Schriftarten, einer Menü-Leiste und noch vielem mehr bestehen kann. Dahinter stecken moderne Technologien, bestehend aus HTML, CSS und ggf. JavaScript, die man sich ganz einfach im Quellcode – also in einer Form von Programmier- bzw. Auszeichnungs-Sprache für das Web – anschauen kann.
Wer im Netz eine Webseite aufruft, der sieht in seinem Browser ein meist optisch ansprechendes Layout, das aus verschiedenen Farben, Schriftarten, einer Menü-Leiste und noch vielem mehr bestehen kann. Dahinter stecken moderne Technologien, bestehend aus HTML, CSS und ggf. JavaScript, die man sich ganz einfach im Quellcode – also in einer Form von Programmier- bzw. Auszeichnungs-Sprache für das Web – anschauen kann.
Der HTML-Quelltext strukturiert die Seite
In den meisten Browsern kann man den Quellcode einer Internetseite ganz leicht erreichen: Per Rechts-Klick auf das Dokument öffnet sich ein Kontextmenü – hier kann man in der Regel eine Option auswählen, die „Seitenquelltext anzeigen“ o. ä. lautet. Tut man dies, kann man direkt die Befehle und Skripte sehen, aus denen der Browser eine ansprechend gestaltete Webseite generiert. Im sogenannten HTML-Head, der oft schon in der dritten Zeile des Quelltextes beginnt, sind Informationen zu finden, die dem normalen Internetnutzer meist verborgen bleiben und sich in erster Linie an Suchmaschinen richten: die sogenannten Meta-Tags. Mit diesen lassen sich u. a. eine Beschreibung des Seiteninhalts sowie der Seitentitel festlegen. Suchmaschinen verwenden diese Angaben häufig als angerissenen Text auf ihren Suchergebnisseiten. Im HTML-Body finden sich die eigentlichen Inhalte, die der Besucher zu Gesicht bekommt. Diese werden mittels verschiedener HTML-Tags strukturiert. Das heißt, dass beispielsweise ein Absatz nicht etwa durch einen Absatz im Quellcode gekennzeichnet wird, sondern erst dann als solcher vom Browser interpretiert wird, wenn er sich zwischen so genannten „<p>-Tags“ befindet („p“ steht für „Paragraph“) oder die Zeile durch ein „<br>“ umgebrochen wird. Auch Listen oder Tabellen werden auf ähnliche Weise erstellt.
Links setzen
Ein wichtiger Grundpfeiler für den Erfolg von HTML als Sprache ist indes die Fähigkeit des Verlinkens anderer Inhalte. Im Quellcode können nämlich bestimmte Textstellen oder Bilder mit einem Link zu einer anderen Seite versehen werden. Klickt man auf diesen Link, dann öffnet der Browser die verlinkte Seite. Auch dies geschieht mit bestimmten HTML-Tags, die den verlinkten Text umklammern und die Zielseite festlegen. Dieses Ziel kann auf derselben Domain oder aber auch auf einer externen Domain liegen.
CSS sorgt für die Optik
Ein weiterer wichtiger Punkt sind die sogenannten Cascading-Stylesheets, kurz CSS. Diese erweitern HTML um die Fähigkeit, das Layout zu bestimmen. So können mit CSS beispielsweise die Schriftfarbe, -größe, ein Hintergrundbild, Rahmen oder Schattierungen einer Seite festgelegt werden. Dabei kann CSS wahlweise im Quelltext der HTML-Datei eingebunden oder in eine separate Datei ausgelagert werden.
Auf jeden Fall lohnt es sich, sich die Technik hinter dem Web einmal anzuschauen, um zu verstehen, was der eigene Browser da eigentlich tut.
Zusätzliche Informationen finden Sie in unserem Video zu diesem Thema: