Eine Website wirkt erstaunlich selbstverständlich. Du gibst eine Adresse ein, drückst Enter und wenige Augenblicke später erscheinen Texte, Bilder, Navigation und vielleicht Videos oder interaktive Funktionen auf dem Bildschirm. Hinter diesem scheinbar einfachen Vorgang arbeiten jedoch mehrere technische Systeme zusammen.
Das Entscheidende dabei: Eine Website ist nicht dasselbe wie eine Domain, und sie liegt auch nicht einfach „im Internet“. Sie besteht aus Daten und Programmen, die auf einem Server gespeichert oder dort erzeugt werden. Dein Browser fordert diese Informationen an und baut daraus die sichtbare Seite zusammen.
Wer dieses Grundprinzip verstanden hat, versteht anschließend auch sehr viel leichter, wozu Webhosting, DNS, SSL-Zertifikate, Datenbanken, WordPress, Caching und viele andere Begriffe dienen.
Das Grundprinzip einer Website
Am einfachsten lässt sich eine Website als Informationsangebot betrachten, das ein Server für andere Computer bereitstellt.
Auf dem Server können beispielsweise Texte, Bilder, Stylesheets, JavaScript-Dateien und Videos gespeichert sein. Bei modernen Websites befinden sich viele Inhalte zusätzlich in Datenbanken und werden erst im Moment des Seitenaufrufs zu einer vollständigen Webseite zusammengesetzt.
Der Besucher benötigt wiederum ein Programm, das diese Informationen anfordern und darstellen kann. Diese Aufgabe übernimmt der Browser, etwa Chrome, Firefox, Safari oder Edge.
Vereinfacht läuft ein Webseitenaufruf deshalb so ab:
Browser → Internet → Webserver → Daten → Browser → sichtbare Webseite
In Wirklichkeit befinden sich zwischen diesen Stationen noch mehrere weitere Systeme. Genau die machen den Vorgang interessant.
Der Aufruf beginnt mit einer Internetadresse
Wenn du beispielsweise
in deinen Browser eingibst, enthält diese Adresse bereits mehrere Informationen.
https bezeichnet das verwendete Übertragungsprotokoll.
www.example.de nennt den Host beziehungsweise die Domain.
/ratgeber/ bezeichnet einen bestimmten Pfad innerhalb dieser Website.
Eine solche vollständige Adresse wird als URL bezeichnet. URL steht für Uniform Resource Locator.
Die URL sagt dem Browser also, welches Ziel er ansprechen und welche Ressource er dort anfordern soll.
Die Domain allein ist dagegen zunächst nur ein für Menschen gut lesbarer Name. Wie daraus der richtige Server gefunden wird, übernimmt ein weiteres System.
Mehr zum Aufbau von Domains erklären wir ausführlich in Was ist eine Domain?.
DNS findet den richtigen Server
Computer brauchen keine hübschen Domainnamen. Für die Kommunikation im Internet verwenden sie IP-Adressen.
Eine IPv4-Adresse kann beispielsweise so aussehen:
203.0.113.42
Menschen merken sich casiopeya.de allerdings wesentlich leichter als eine Zahlenfolge. Deshalb existiert das Domain Name System, kurz DNS.
Wenn du eine Domain aufrufst, muss dein Gerät zunächst herausfinden, welche technische Adresse dazu gehört.
Der Browser beziehungsweise das Betriebssystem fragt deshalb nach:
Welche IP-Adresse gehört zu dieser Domain?
DNS liefert darauf die passende Antwort.
Man kann sich das vereinfacht wie ein Telefonbuch vorstellen:
example.de
↓
DNS
↓
203.0.113.42
Mit dieser Adresse weiß dein Browser, welchen Server er kontaktieren muss.
Das ist allerdings nur eine von vielen Aufgaben des Domain Name Systems. DNS kann beispielsweise auch festlegen, welche Server E-Mails für eine Domain entgegennehmen oder welche Dienste unter bestimmten Subdomains erreichbar sind.
Die Funktionsweise und die wichtigsten Eintragstypen behandeln wir separat in Was ist DNS?.
Der Server nimmt die Anfrage entgegen
Nachdem die technische Adresse des Servers bekannt ist, kann dein Browser eine Verbindung aufbauen.
Auf diesem Rechner läuft normalerweise eine Software, die Webanfragen verarbeitet. Typische Webserver sind beispielsweise Apache oder Nginx. Auch andere Systeme können dieselbe Aufgabe übernehmen.
Der Browser sendet nun sinngemäß eine Anfrage wie:
Bitte sende mir die Seite
/ratgeber/.
Der Server muss anschließend entscheiden, was er darauf antwortet.
Bei einer sehr einfachen Website könnte bereits eine fertige HTML-Datei existieren. Der Server liest diese Datei und schickt sie zurück.
Moderne Websites funktionieren häufig anders.
Statische Websites liefern fertige Dateien aus
Die technisch einfachste Form einer Website besteht aus bereits fertigen Dateien.
Zum Beispiel:
index.html
ueber-uns.html
kontakt.html
style.css
logo.webp
Ruft jemand die Startseite auf, liefert der Server die entsprechende HTML-Datei aus.
Der Inhalt muss nicht erst berechnet werden.
Solche Websites werden häufig als statische Websites bezeichnet.
„Statisch“ bedeutet dabei nicht zwangsläufig langweilig oder unbeweglich. Auch eine statische Website kann Animationen, Formulare, JavaScript und modernes Design enthalten.
Der entscheidende Unterschied liegt darin, wie die Seiten erzeugt werden.
Bei einer statischen Website existiert das fertige Dokument bereits vor dem Abruf.
Dynamische Websites werden teilweise erst beim Aufruf erzeugt
Bei WordPress, Shopsystemen, Foren oder vielen Webanwendungen liegt die vollständige Seite häufig nicht als fertige HTML-Datei auf dem Server.
Stattdessen erhält der Server eine Anfrage und führt anschließend Programmcode aus.
Der Ablauf könnte vereinfacht so aussehen:
Besucher ruft Artikel auf
↓
Webserver erhält Anfrage
↓
Anwendung startet
↓
Datenbank wird abgefragt
↓
Template wird geladen
↓
Inhalte werden eingesetzt
↓
fertiges HTML entsteht
↓
Browser erhält die Seite
Der Benutzer bekommt davon normalerweise nichts mit.
Für seinen Browser sieht das Ergebnis zunächst genauso aus wie bei einer statischen Website: Er erhält HTML und zusätzliche Ressourcen.
Der Unterschied findet auf dem Server statt.
Eine Datenbank speichert Inhalte und Einstellungen
Bei dynamischen Websites spielt häufig eine Datenbank eine zentrale Rolle.
Ein Content-Management-System wie WordPress speichert dort beispielsweise viele seiner Informationen:
Artikeltexte, Seitentitel, Benutzerkonten, Kommentare, Einstellungen, Kategorien und zahlreiche weitere Daten.
Das bedeutet, dass dein Blogartikel nicht unbedingt als Datei namens
mein-artikel.html
auf dem Server liegt.
Stattdessen kann sein Inhalt in mehreren Datenbankfeldern gespeichert sein.
Wenn jemand den Artikel besucht, fragt WordPress die benötigten Informationen ab und fügt sie in das passende Layout ein.
Dieses Prinzip macht Content-Management-Systeme so praktisch. Ein Redakteur kann Inhalte verwalten, ohne jedes Mal HTML-Dateien bearbeiten zu müssen.
WordPress erzeugt aus Daten eine Webseite
WordPress ist eine Anwendung, die unter anderem genau diese Aufgabe übernimmt.
Nehmen wir an, jemand besucht:
example.de/mein-erster-artikel/
Der Webserver erkennt, dass WordPress diese Anfrage bearbeiten soll.
WordPress prüft anschließend, welcher Inhalt zur angeforderten Adresse gehört. Es lädt die benötigten Daten aus der Datenbank und kombiniert sie mit dem verwendeten Theme.
Plugins können währenddessen zusätzliche Funktionen hinzufügen.
Schließlich entsteht ein vollständiges HTML-Dokument.
Dieses wird an den Browser geschickt.
Der Besucher sieht also nicht die WordPress-Datenbank und normalerweise auch nicht den PHP-Code, der im Hintergrund ausgeführt wurde. Er erhält das daraus erzeugte Ergebnis.
Wie dieses System aufgebaut ist, erklären wir in Was ist WordPress?.
HTML beschreibt den Inhalt der Seite
Wenn der Server seine Arbeit erledigt hat, erhält der Browser normalerweise zunächst HTML.
HTML steht für HyperText Markup Language.
Die Sprache beschreibt die Struktur eines Dokuments.
Ein extrem vereinfachtes Beispiel könnte so aussehen:
<h1>Wie funktioniert eine Website?</h1>
<p>Eine Website besteht aus mehreren technischen Bausteinen.</p>
Der Browser erkennt dadurch:
Das erste Element ist eine Hauptüberschrift.
Das zweite ist ein Absatz.
HTML beschreibt also vor allem Bedeutung und Struktur des Inhalts.
Für das Aussehen sind andere Technologien zuständig.
CSS gestaltet die Website
CSS steht für Cascading Style Sheets.
Damit lässt sich beispielsweise festlegen:
Wie groß Überschriften erscheinen.
Welche Schriftart verwendet wird.
Wie breit ein Inhaltsbereich ist.
Wie viel Abstand zwischen Elementen liegt.
Welche Hintergrundfarbe ein Bereich besitzt.
Wie sich eine Website auf Smartphones verhält.
HTML könnte also sagen:
Das ist eine Überschrift.
CSS ergänzt:
Diese Überschrift soll 42 Pixel groß sein, eine bestimmte Schrift verwenden und über dem nächsten Absatz Abstand haben.
Die Trennung zwischen Struktur und Gestaltung gehört zu den grundlegenden Prinzipien moderner Webentwicklung.
JavaScript bringt Logik in den Browser
JavaScript ermöglicht es, dass eine Website im Browser auf Aktionen reagieren und Inhalte verändern kann.
Typische Beispiele sind:
Ein Menü öffnet sich.
Ein Formular prüft Eingaben.
Weitere Artikel werden nachgeladen.
Ein Warenkorb wird aktualisiert.
Eine Karte lässt sich verschieben.
Ein Bild-Slider wechselt zum nächsten Motiv.
Ein Teil solcher Funktionen könnte auch über Serveranfragen umgesetzt werden. JavaScript ermöglicht jedoch, viele Aktionen direkt im Browser auszuführen.
Moderne Webanwendungen verwenden JavaScript teilweise so intensiv, dass sich Webseiten fast wie klassische Desktop-Programme verhalten.
Für eine normale Website gilt trotzdem: Nicht jede Kleinigkeit braucht JavaScript. Je mehr Code ein Browser laden und ausführen muss, desto größer können auch Auswirkungen auf Geschwindigkeit und Stabilität werden.
Bilder, Schriften und andere Dateien werden separat geladen
Die erste HTML-Datei enthält häufig noch längst nicht alles, was du anschließend auf dem Bildschirm siehst.
Im HTML befinden sich Hinweise auf weitere benötigte Ressourcen.
Zum Beispiel:
/style.css
/logo.webp
/menu.js
/schrift.woff2
/titelbild.avif
Nachdem der Browser das HTML gelesen hat, fordert er diese Dateien ebenfalls an.
Eine einzelne Webseite kann dadurch Dutzende oder sogar Hunderte zusätzliche HTTP-Anfragen verursachen.
Genau deshalb können große Bilder, umfangreiche Skripte oder viele externe Dienste eine Website verlangsamen.
Wie Bildformate, Auflösung und Komprimierung sinnvoll eingesetzt werden, behandeln wir in Bilder für Websites optimieren.
HTTPS verschlüsselt die Verbindung
Heute werden Websites üblicherweise über HTTPS aufgerufen.
HTTPS baut auf HTTP auf, ergänzt die Kommunikation jedoch um Verschlüsselung.
Dadurch soll verhindert werden, dass Daten während der Übertragung einfach mitgelesen oder verändert werden können.
Bevor eine verschlüsselte Verbindung aufgebaut wird, muss der Server außerdem nachweisen, dass für die angesprochene Domain ein gültiges Zertifikat vorhanden ist.
Deshalb gibt es SSL- beziehungsweise TLS-Zertifikate.
Im Alltag spricht man häufig weiterhin von SSL-Zertifikaten, obwohl aktuelle verschlüsselte Verbindungen technisch TLS verwenden.
Für den Benutzer ist vor allem entscheidend: Browser und Server können eine geschützte Verbindung miteinander aufbauen.
Warum HTTPS wichtig ist und welche Rolle Zertifikate dabei spielen, erklären wir in SSL und HTTPS verständlich erklärt.
Der Browser baut die sichtbare Seite zusammen
Nachdem HTML, CSS, JavaScript, Bilder und weitere benötigte Ressourcen eingetroffen sind, beginnt der Browser mit der Darstellung.
Er analysiert zunächst die HTML-Struktur.
Danach verarbeitet er die CSS-Regeln.
Er berechnet, wo jedes Element auf dem Bildschirm erscheinen soll.
Bilder und Schriften werden geladen.
JavaScript wird ausgeführt.
Erst daraus entsteht das, was wir als fertige Website wahrnehmen.
Dieser Vorgang wird als Rendering bezeichnet.
Und genau hier entsteht ein interessanter Punkt: Eine Website kann auf dem Server sehr schnell berechnet werden und sich für den Besucher trotzdem langsam anfühlen.
Vielleicht kommt das HTML sofort, doch anschließend müssen noch mehrere Megabyte JavaScript verarbeitet werden.
Oder ein riesiges Bild blockiert die sichtbare Darstellung.
Servergeschwindigkeit und wahrgenommene Seitengeschwindigkeit sind deshalb nicht dasselbe.
Mehr dazu erklären wir in Warum Websites langsam werden.
Caching kann viele Arbeitsschritte einsparen
Bei einer dynamischen Website muss nicht zwangsläufig jeder Aufruf vollständig neu berechnet werden.
Nehmen wir einen WordPress-Artikel, der sich über mehrere Stunden nicht verändert.
Ohne Cache könnte WordPress bei jedem Besucher erneut:
die Anwendung laden,
die Datenbank abfragen,
das Theme verarbeiten,
Plugins ausführen
und daraus HTML erzeugen.
Bei hundert Besuchern würde dieselbe Arbeit hundertmal durchgeführt.
Ein Cache kann stattdessen das bereits erzeugte Ergebnis zwischenspeichern.
Dann entsteht vereinfacht:
Erster Besucher
↓
Seite wird berechnet
↓
Ergebnis wird gespeichert
Nächster Besucher
↓
gespeichertes Ergebnis wird ausgeliefert
Caching kann an mehreren Stellen stattfinden: auf dem Server, im Browser, innerhalb von WordPress oder über vorgeschaltete Systeme.
Die unterschiedlichen Varianten behandeln wir in Caching einfach erklärt.
Ein CDN kann Inhalte näher zum Besucher bringen
Der eigentliche Server einer Website steht möglicherweise in Frankfurt, Amsterdam oder Wien.
Was passiert aber, wenn ein Besucher in Sydney die Website aufruft?
Auch digitale Daten brauchen Zeit für ihren Weg durch Netzwerke.
Ein Content Delivery Network, kurz CDN, betreibt deshalb Server an vielen geografischen Standorten.
Häufig verwendete Dateien können dort zwischengespeichert werden.
Ein Besucher bekommt Bilder oder andere Ressourcen dann möglicherweise von einem näher gelegenen CDN-Server statt vom eigentlichen Ursprungsserver.
Dadurch können Ladezeiten sinken und gleichzeitig wird der Hauptserver entlastet.
CDNs bieten häufig zusätzlich Sicherheits- und Netzwerkfunktionen.
Sie sind allerdings kein Pflichtbestandteil jeder Website. Ob sie sinnvoll sind, hängt vom Projekt und seiner Zielgruppe ab.
Webhosting stellt die technische Umgebung bereit
All diese Daten und Anwendungen benötigen Infrastruktur.
Genau hier kommt das Webhosting ins Spiel.
Der Hostinganbieter stellt Rechner, Speicherplatz, Netzwerkverbindung und meist zahlreiche weitere Dienste bereit.
Bei einem einfachen Hostingpaket bekommt der Website-Betreiber davon wenig mit.
Bei einem eigenen virtuellen Server muss er dagegen deutlich mehr selbst verwalten.
Aus Sicht des Besuchers kann das Ergebnis identisch aussehen.
Technisch unterscheiden sich die Betriebsmodelle jedoch erheblich.
Welche Variante für welchen Zweck sinnvoll ist, erklären wir in Was ist Webhosting? und Shared Hosting, VPS oder eigener Server?.
Was passiert bei einem typischen Seitenaufruf?
Fassen wir den gesamten Vorgang einmal zusammen.
Du gibst eine URL ein.
Der Browser erkennt die Domain.
Über DNS wird die passende Serveradresse ermittelt.
Browser und Server bauen eine Verbindung auf.
Bei HTTPS wird diese Verbindung verschlüsselt.
Der Browser fordert eine bestimmte Ressource an.
Der Webserver verarbeitet die Anfrage.
Bei einer dynamischen Website wird gegebenenfalls die Webanwendung gestartet.
Die Anwendung liest benötigte Daten aus einer Datenbank.
Daraus wird HTML erzeugt.
Der Server sendet das Ergebnis zurück.
Der Browser analysiert das HTML.
Zusätzliche Dateien wie CSS, JavaScript, Bilder und Schriften werden angefordert.
Der Browser verarbeitet alles und zeichnet die Seite auf den Bildschirm.
Und all das geschieht bei einer gut funktionierenden Website innerhalb eines sehr kurzen Zeitraums.
Warum Websites manchmal nicht erreichbar sind
Weil mehrere Systeme beteiligt sind, kann eine Website an sehr unterschiedlichen Stellen ausfallen.
Die Domain kann abgelaufen sein.
DNS kann falsch konfiguriert sein.
Der Server kann nicht erreichbar sein.
Das SSL-Zertifikat kann ungültig sein.
Der Webserver kann fehlerhaft konfiguriert sein.
WordPress kann einen Fehler verursachen.
Die Datenbank kann nicht verfügbar sein.
Ein Plugin kann abstürzen.
Eine Firewall kann legitime Anfragen blockieren.
Genau deshalb ist das Grundverständnis der technischen Kette so hilfreich.
Wenn eine Website nicht funktioniert, lautet die erste Frage nicht:
„Warum ist WordPress kaputt?“
Sondern:
„An welcher Stelle der Kette entsteht der Fehler?“
Damit lässt sich die Suche erheblich eingrenzen.
Website, Webseite und Homepage sind nicht dasselbe
Im Alltag werden diese Begriffe häufig synonym verwendet. Technisch beziehungsweise sprachlich lassen sie sich jedoch unterscheiden.
Eine Website bezeichnet das gesamte Webangebot.
Eine Webseite ist eine einzelne Seite innerhalb dieses Angebots.
Die Homepage ist ursprünglich die Startseite einer Website.
Casiopeya ist also eine Website.
Dieser Artikel ist eine einzelne Webseite.
casiopeya.de/ ist die Homepage beziehungsweise Startseite.
Für das praktische Verständnis ist diese Unterscheidung nicht besonders kritisch. Bei technischen Gesprächen kann sie jedoch Missverständnisse vermeiden.
Eine Website ist ein System, kein einzelnes Dokument
Der wichtigste Gedanke lässt sich schließlich auf einen Satz reduzieren:
Eine moderne Website ist meist das Ergebnis mehrerer Systeme, die gemeinsam eine Seite erzeugen und an deinen Browser ausliefern.
Die Domain macht das Angebot auffindbar.
DNS findet den zuständigen Server.
Das Hosting stellt die Infrastruktur bereit.
Der Webserver beantwortet Anfragen.
Eine Anwendung wie WordPress verarbeitet Inhalte.
Eine Datenbank speichert Informationen.
HTML beschreibt die Struktur.
CSS gestaltet die Darstellung.
JavaScript ermöglicht zusätzliche Funktionen.
HTTPS schützt die Verbindung.
Der Browser setzt alles zur sichtbaren Seite zusammen.
Du musst keines dieser Systeme bis ins letzte Detail beherrschen, um eine Website selbst betreiben zu können.
Aber sobald du weißt, welcher Baustein wofür verantwortlich ist, wird vieles plötzlich nachvollziehbar.