So funktioniert das Web: Browser, Server und HTTP-Anfragen

Eine Webseite auf deinem Bildschirm entsteht durch Arbeit an zwei Stellen. Dein Browser fordert Ressourcen an, und ein Server sendet Antworten. Diese Rollen erklären sowohl eine einfache persönliche Website als auch eine Seite, die aus mehreren Diensten zusammengestellt wird.

Wer anfragt und wer antwortet

Ein Client ist ein Gerät und ein Programm, das etwas anfordert. Chrome, Edge, Firefox und Safari sind Browser-Clients. Ein Server ist ein Computer, auf dem Software läuft, die Anfragen entgegennimmt und gespeicherte Dateien oder selbst erzeugte Inhalte zurücksendet. Apache und nginx sind Beispiele für Webserversoftware. Das Wort „Server“ kann den Computer oder diese Software bezeichnen.

Bei einem HTTP-Austausch sendet der Client eine Anfrage, in der steht, was er möchte. Der Server sendet eine Antwort auf diese Anfrage. Stell dir eine Essensbestellung an einer Theke vor: Der Bestellzettel fordert etwas an und das Tablett ist die Antwort. Der Browser beginnt den Austausch; eine gewöhnliche Seitenantwort beantwortet eine Anfrage.

Client und Server sind Rollen und keine festen Maschinentypen. Auf einem Laptop können sowohl dein Browser als auch ein Testserver laufen. Eine Website wird gehostet, wenn ein erreichbarer Server ihre Ressourcen bereitstellt. Ein über localhost erreichter Server läuft auf deinem eigenen Computer; diese Adresse führt den Browser einer anderen Person nicht zu deinem Laptop.

Eine Seite ist eine Sammlung von Ressourcen

Eine Ressource ist etwas, das eine Adresse identifizieren kann: eine Seite, ein Stylesheet, ein Skript, ein Bild, eine Schriftart, ein Video oder ein Datenelement. Die erste Seitenanfrage ruft meist HTML ab. Der Browser liest dieses HTML, um die weiteren benötigten Ressourcen zu finden, und fordert jede einzeln an.

Ein Artikel nennt zum Beispiel zwei Stylesheets, ein Skript und fünf Bilder. Zähle auch das HTML mit:

• Eine HTML-Ressource bildet den Anfang der Seite.
• Zwei CSS-Ressourcen liefern ihre Stile.
• Eine JavaScript-Ressource liefert Verhalten.
• Fünf Bildressourcen liefern Bilder.

Das ergibt neun Ressourcen und bei leerem Browsercache neun HTTP-Anfragen für diese Ressourcen. Ein Cache speichert heruntergeladene Kopien zur Wiederverwendung. Frische Dateien im Cache können bei einem weiteren Besuch die Zahl der Anfragen über das Netzwerk verringern.

Die Ressourcen müssen nicht auf demselben Server liegen. Das HTML kann von www.example.com kommen, Bilder von images.example.net und ein Video von einem anderen Dienst. Die Adresse jeder Ressource sagt dem Browser, wo er sie anfordern muss. Eine erfolgreiche HTML-Anfrage belegt daher nicht, dass auch jedes Bild und Skript geladen wurde.

Gespeicherte Dateien und erzeugte Antworten

In beiden Fällen erhält der Browser Ressourcen, die er lesen oder anzeigen kann. Eine erzeugte HTML-Seite ist immer noch HTML, wenn sie den Browser erreicht. Der Browser enthält heruntergeladene Kopien, während der Server die Originaldateien der Website oder das Programm zu ihrer Erzeugung bereithält.

Das Web läuft über das Internet

Das Internet ist das weltweite Netzwerk, das Daten zwischen Computern überträgt. Das Web ist ein Dienst, der dieses Netzwerk nutzt: verknüpfte Ressourcen, die über URLs adressiert und über HTTP ausgetauscht werden. Auch E-Mails, Onlinespiele und Videoanrufe nutzen das Internet. Das Web ist eine Nutzung des Netzwerks und nicht die Bezeichnung für jede Aktivität darin.

Wenn du bei einer Webadresse die Eingabetaste drückst, beginnen mehrere Aufgaben. Jede hat eine andere Funktion, sodass ein Fehler in einer Phase andere Anzeichen hinterlässt als ein Fehler in einer anderen.

Adresse lesen und Server finden

Nimm https://www.example.com/news.html. Der Browser liest https als Schema, www.example.com als Host und /news.html als angeforderten Pfad. Text wie „weather tomorrow“ wird normalerweise als Suche behandelt und stattdessen an die Standardsuchmaschine gesendet.

Der Browser braucht eine IP-Adresse, eine numerische Netzwerkadresse wie 203.0.113.10 oder das IPv6-Beispiel 2001:db8::1. DNS findet Adressen, die Domainnamen zugeordnet sind. Browser und Betriebssystem können eine kürzlich erhaltene DNS-Antwort aus einem Cache wiederverwenden, sodass nicht bei jedem Seitenbesuch eine neue Abfrage nötig ist.

Verbindung herstellen und Austausch schützen

Der Browser verbindet sich mit dem Server. Für HTTPS richtet er mit TLS eine verschlüsselte Verbindung ein. Der Server legt ein Zertifikat vor, mit dem der Browser seine Identität für die angeforderte Domain prüfen kann. Die Verschlüsselung schützt die Nachrichten davor, von anderen im Netzwerk gelesen oder verändert zu werden. Ein Hinweis auf eine sichere Verbindung beschreibt diesen Schutz; auch eine betrügerische Website kann ein gültiges Zertifikat haben.

Daten gelangen in kleinen Stücken, sogenannten Paketen, über Geräte namens Router durch das Netzwerk und werden am Ziel zusammengesetzt. Browser und Betriebssystem kümmern sich um diesen Transport, während der Browser mit den HTTP-Nachrichten arbeitet.

Anfordern, empfangen und aufbauen

1. Der Browser sendet eine HTTP-Anfrage für /news.html.
2. Der Server antwortet mit einem Statuscode, Headern zur Beschreibung der Antwort und meist einem Nachrichtenkörper mit dem HTML.
3. Der Browser liest das HTML und fordert die darin genannten Stylesheets, Skripte, Bilder und anderen Ressourcen an.
4. Er baut die Seite auf, wendet Stile an, führt Skripte aus und zeichnet Inhalte auf dem Bildschirm.

Mehrere Ressourcenanfragen können sich zeitlich überschneiden. Der Browser kann Text anzeigen, bevor jedes Bild vollständig heruntergeladen ist; die Seite wird nach und nach aufgebaut.

Angenommen, das HTML einer kleinen Seite unter https://example.org/ nennt nur style.css und logo.png, beide auf demselben Host. Ohne passende Einträge im Cache braucht der eine Host eine DNS-Abfrage und die drei Ressourcen brauchen drei HTTP-Anfragen. Bei einem späteren Besuch erspart eine zwischengespeicherte DNS-Antwort diese Abfrage. Frische Kopien der Ressourcen können wiederverwendet und ältere Kopien beim Server geprüft werden. Eine Antwort 304 Not Modified bedeutet, dass eine gespeicherte Kopie noch aktuell ist und der Dateiinhalt nicht erneut gesendet werden muss.

Einen Fehler anhand seiner Anzeichen eingrenzen

Bei einem DNS-Fehler gibt es keinen HTTP-Statuscode, weil keine HTTP-Antwort eingetroffen ist. Ein 404 ist anders: Der Server hat geantwortet. Chrome kann einen Namensfehler wie DNS_PROBE_FINISHED_NXDOMAIN anzeigen, aber der Wortlaut ist eine Browsermeldung und keine Serverantwort.

Eine URL adressiert eine Ressource. Der Domainname ist nur ein Teil dieser Adresse. Das vollständige Muster lautet scheme://host:port/path?query#fragment, wobei viele Adressen optionale Bestandteile weglassen.

Eine Adresse zerlegen

Lies diese Adresse in einzelnen Teilen:

https://shop.example.com:8443/products/shoes.html?color=blue&size=42#reviews

Die Satzzeichen trennen die Bestandteile: : folgt auf das Schema, ? beginnt den Query-String und # beginnt das Fragment. Die Trennzeichen sind nicht Teil der Werte des Query-Strings oder Fragments.

Schema, Host und Port

Das URL-Schema legt fest, wie die Adresse behandelt wird. http nutzt unverschlüsseltes HTTP, https verschlüsseltes HTTP. mailto:info@example.com fordert ein E-Mail-Programm auf, eine Nachricht zu erstellen, während file:/// eine lokale Datei adressiert.

Der Port wählt einen Dienst auf dem Host. Wird er weggelassen, nutzt HTTP Port 80 und HTTPS 443. Somit bezeichnen https://example.com/ und https://example.com:443/ dasselbe Ziel und denselben Pfad. Lokale Testserver nutzen häufig die Ports 3000, 5500 oder 8080; http://localhost:5500/ enthält seinen Port, weil dieser nicht der Standardport von HTTP ist.

Bei Schema und Host wird die Groß- und Kleinschreibung nicht unterschieden. Der Host www.example.com hat einen anderen Namen als example.com; beide erreichen eine Website nur, wenn ihr Betreiber sie entsprechend konfiguriert hat.

Pfad, Query-String und Fragment

Auf einer einfachen statischen Website folgt ein Pfad den Ordnern und Dateien des Servers. Auf anderen Websites entscheidet die Serversoftware, was ein Pfad zurückgibt. Ein Pfad muss daher keine Datei auf der Festplatte benennen. Eine Ordneradresse, die mit / endet, liefert häufig eine Standardseite wie index.html.

Ein Query-String überträgt Eingaben nach ?. In /search?q=web+basics&page=2 trennt & zwei Felder: die Suchwörter und die Seitennummer. Diese Felder gelangen als Teil des Anfrageziels zum Server.

Ein Fragment bleibt im Browser. Der Zusatz #reviews scrollt meist zu einem Element mit id="reviews". Der Browser fordert Pfad und Query-String ohne das Fragment an. Wenn nur #top zu #reviews geändert wird, fordert er keine andere Datei vom Server an.

Die genauen Zeichen beibehalten

Webpfade verwenden Schrägstriche /. Ein Leerzeichen kann als %20 prozentkodiert werden. Die Formularkodierung verwendet + für ein Leerzeichen und %40 für @; ein gewöhnlicher URL-Pfad oder Query-String kann ein unverändertes @ enthalten. Die Formularkodierung und die allgemeine Schreibweise von URLs folgen also nicht denselben Regeln.

Bei Pfaden kann die Groß- und Kleinschreibung unterschieden werden, bei Hosts dagegen nicht. /Images/Logo.png kann sich von /images/logo.png unterscheiden. Auch wenn du den Host korrekt kopierst, kannst du durch eine Änderung der Groß- und Kleinschreibung im Pfad die falsche Ressource anfordern.

Ein Domainname gibt Menschen einen lesbaren Namen, den sie anstelle einer numerischen IP-Adresse verwenden können. Seine durch Punkte getrennten Teile zeigen auch, wie der Name aufgebaut ist. Es ist wichtig, diese Teile richtig zu lesen, wenn zwei Adressen ähnliche Wörter enthalten.

Am rechten Ende beginnen

Jeder Teil zwischen Punkten ist ein DNS-Label. In blog.example.org ist das Label ganz rechts, org, die Top-Level-Domain oder TLD. Die registrierte Domain ist example.org, und blog ist eine über diese Domain kontrollierte Subdomain.

Zu den generischen TLDs gehören .com, .org, .net, .dev und .shop. Länderspezifische TLDs bestehen aus zwei Buchstaben, etwa .nl, .de, .jp, .br und .ca. Für manche gelten Zugangsregeln: .gov ist überprüften US-Regierungsorganisationen vorbehalten. Neue institutionelle .edu-Registrierungen setzen im Allgemeinen berechtigte, institutionell akkreditierte US-Einrichtungen des tertiären Bildungsbereichs voraus; einige Organisationen sind nach anderen Richtlinien berechtigt, und bei älteren Registrierungen kann es Ausnahmen geben. ICANN koordiniert die Namen der obersten Ebene des Domainnamensystems.

Ein registrierter Name besteht nicht immer nur aus den letzten beiden Labels. Unter .co.uk ist zum Beispiel der registrierte Name in news.example.co.uk gleich example.co.uk. Lies zuerst die öffentliche Endung und bestimme dann den darunter registrierten Namen.

Vertraute Wörter können in fremden Namen stehen

Vergleiche diese Hosts:

Im zweiten Host sind die Wörter example.com Labels links von example.net. Sie geben dem Inhaber von example.com keine Kontrolle über die Adresse. Bestimme zunächst den Host und lies ihn dann von rechts; auch ein vertrauter Name in einem Pfad ist nicht der Host.

www ist ein gewöhnliches Subdomain-Label. Ein Websitebetreiber kann es verwenden, weglassen oder zwischen Namen weiterleiten. Das Web verlangt nicht, dass es vorhanden ist.

Registrierung und Hosting sind getrennt

Ein Registrar übernimmt Domainregistrierungen für Kunden. Eine Registry verwaltet die Einträge für eine TLD. Die Registrierung einer Domain gibt dir das Recht, diesen Namen für eine Laufzeit zu nutzen, meist ein oder mehrere Jahre. Du verlängerst die Registrierung, um dieses Recht zu behalten; ein abgelaufener Name kann irgendwann für jemand anderen verfügbar werden.

Anschließend konfiguriert der Inhaber DNS-Einträge, um den Namen mit der Adresse eines Hostingservers zu verknüpfen. Die Domain ist nicht mit den Dateien der Website gleichzusetzen. Derselbe Name kann auf einen anderen Server verweisen, und ein Server kann mehrere Domains bereitstellen. Zwischengespeicherte DNS-Antworten erklären, warum es Minuten oder Stunden dauern kann, bis eine geänderte Adresse überall sichtbar ist.

Namensregeln und lokale Namen

Gewöhnliche Host-Labels verwenden Buchstaben, Ziffern und Bindestriche, jedoch keinen Bindestrich am Anfang oder Ende. Jedes Label darf bis zu 63 Zeichen haben, ein gewöhnlicher vollständiger Name bis zu 253 Zeichen. Bei Namen wird die Groß- und Kleinschreibung nicht unterschieden. Internationalisierte Domainnamen unterstützen andere Schriftsysteme; ihre kodierten ASCII-Labels beginnen mit xn--.

Der spezielle Name localhost bezeichnet den Computer, der die Anfrage stellt. Zu seinen Loopback-Adressen gehören 127.0.0.1 und ::1. Öffnet ein Lernender http://localhost:3000/, sucht der Browser nach einem Dienst auf dessen eigenem Computer.

Ein Link kann eine vollständige Adresse oder eine Anleitung enthalten, wie eine Ressource von der aktuellen Seite aus zu finden ist. Um sein Ziel vorherzusagen, beginne bei der Adresse der Seite und verfolge den Pfad Teil für Teil.

Den Ausgangspunkt wählen

Eine absolute URL benennt ihren Host selbst und funktioniert von jeder Seite aus. Sie ist für eine andere Website nützlich. Eine relative URL lässt den Anfang weg und wird anhand der Seitenadresse vervollständigt. Bei Dateien innerhalb einer Website hilft das, den Ordner als Ganzes von einem Laptop auf einen Server zu verschieben.

Einen Ordnerbaum durchgehen

Angenommen, eine Website enthält diese Dateien:

my-site/
  index.html
  about.html
  images/logo.png
  styles/main.css
  blog/first-post.html

Von index.html aus bleibt about.html im selben Ordner. images/logo.png führt in den Unterordner images und styles/main.css in styles.

Von blog/first-post.html aus ist blog der Ausgangsordner. Um das Logo zu erreichen, verwende ../images/logo.png: Gehe zuerst zum Website-Ordner hinauf und dann in images. Der Link images/logo.png würde stattdessen innerhalb von blog/images suchen, wo dieser Baum kein Logo enthält. Um von diesem Beitrag zur Startseite zu gelangen, verwende ../index.html.

Verschachtelte Adressen verfolgen

Auf https://example.com/blog/2026/post.html:

• photo.jpg wird zu https://example.com/blog/2026/photo.jpg.
• ../index.html wird zu https://example.com/blog/index.html.
• /about.html wird zu https://example.com/about.html.
• #comments bleibt auf diesem Dokument und bezeichnet sein Element comments.

Ein führendes / ersetzt den aktuellen Pfad ab dem Website-Wurzelverzeichnis. Es bedeutet nicht „einen Ordner nach oben“. Mehrfaches ../ führt mehrere Ordnerebenen hinauf: ../../about.html geht vom verschachtelten Beitrag aus durch 2026 und blog nach oben, bevor about.html gefunden wird.

Links in der richtigen Umgebung ansehen

Ein wurzelrelativer Pfad funktioniert mit einem HTTP-Server, auch einem lokalen Server. Auf einer file:///-Seite verweist / auf das Wurzelverzeichnis des Dateisystems deines Computers, nicht auf deinen Projektordner. Verwende einen lokalen Server, wenn du diese Art von Link testest.

Ein Pfad wie C:\Users\sam\site\logo.png oder file:///Users/sam/site/logo.png bezeichnet einen Ort auf einem Computer. Andere Besucher haben diesen Ordner nicht. Verlinke mit einem Webpfad, der innerhalb der Struktur der Website bleibt.

Namen genau übernehmen

Verwende Kleinbuchstaben, Bindestriche statt Leerzeichen und die richtigen Dateinamenerweiterungen: contact-form.html lässt sich zuverlässiger verlinken als Contact Form.HTML. Windows und macOS unterscheiden bei Dateinamen häufig nicht zwischen Groß- und Kleinschreibung, viele Webserver dagegen schon. Ein lokaler Link auf Logo.png kann online fehlschlagen, wenn der tatsächliche Name logo.png lautet.

Eine Startseite namens index.html ist eine häufige Standardeinstellung von Servern. Wird ein Ordner wie /blog/ angefordert, liefert der Server meist dessen index.html aus, sofern er mit dieser Standardeinstellung konfiguriert ist.

HTTP, das Hypertext Transfer Protocol, legt fest, wie Web-Clients Ressourcen anfordern und wie Server antworten. HTTPS überträgt diese Nachrichten über eine verschlüsselte Verbindung. Wenn du eine Anfrage liest, siehst du, was der Browser vom Server verlangt hat.

Die Nachricht der Reihe nach lesen

Hier ist eine Anfrage in der Textform von HTTP/1.1:

GET /products/shoes.html?color=blue HTTP/1.1
Host: shop.example.com
Accept: text/html
Accept-Language: en-US,en;q=0.9

Die erste Zeile enthält die Methode, das Anfrageziel und die HTTP-Version. GET fordert den Abruf einer Ressource an. Das Ziel enthält den Pfad und den Query-String, aber kein Fragment. Der Host steht im Header Host, mit dem ein Server die von ihm bereitgestellten Websites unterscheiden kann.

Ein HTTP-Header ist ein benanntes Feld wie Accept: text/html, das Informationen über die Anfrage oder ihren Inhalt überträgt. Eine Leerzeile beendet die Header. Manche Anfragen enthalten danach einen Nachrichtenkörper mit den gesendeten Daten. Dieses GET-Beispiel hat keinen Nachrichtenkörper.

HTTP/2 und HTTP/3 kodieren Nachrichten anders, behalten aber Methoden, Anfrageziele, Header und Nachrichtenkörper bei. Die Entwicklerwerkzeuge stellen sie lesbar dar, sodass diese Nachrichtenteile über die Versionen hinweg nützlich bleiben.

Eine Methode für die Aktion wählen

Wenn du einem normalen Link folgst oder eine HTTP-Adresse eingibst, entsteht eine GET-Anfrage. Ein HTML-Formular verwendet standardmäßig GET und mit method="post" die Methode POST.

Bei einem GET-Formular gelangen die Felder in den Query-String der URL. Das eignet sich für eine Suche, deren Ergebnisse du als Lesezeichen speichern oder teilen möchtest. POST platziert die übermittelten Felder im Nachrichtenkörper der Anfrage und eignet sich für Aktionen wie das Erstellen eines Kontos oder das Veröffentlichen eines Kommentars.

POST verschlüsselt von sich aus nichts. Bei einfachem HTTP können sowohl Query-Daten als auch Daten im Nachrichtenkörper während der Übertragung gelesen werden. HTTPS schützt beides. Passwörter gehören über HTTPS in POST-Nachrichtenkörper, weil URLs auch im Browserverlauf erscheinen und in Protokollen gespeichert werden können.

Eine Formularübermittlung lesen

POST /signup HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 38

name=Ana+Silva&email=ana%40example.com

Das Ziel ist /signup. Content-Type gibt die Formularkodierung des Nachrichtenkörpers an. Der Nachrichtenkörper enthält den Namen „Ana Silva“ und die E-Mail-Adresse „ana@example.com“: + wird als Leerzeichen und %40 als @ dekodiert. Hier sind es 38 Byte, entsprechend Content-Length.

Anfragen lesen, wiederholen und identifizieren

Eine sichere Methode ist zum Lesen ohne Änderung des Serverzustands vorgesehen; GET, HEAD und OPTIONS sind sicher. Eine idempotente Methode hat bei Wiederholung dieselbe beabsichtigte Wirkung. Sichere Methoden, PUT und DELETE sind idempotent. Für POST ist das nicht garantiert: Eine wiederholte Übermittlung kann einen zweiten Kommentar oder eine zweite Bestellung erzeugen.

Zu den weiteren Anfrage-Headern gehören User-Agent für Clientinformationen, Accept für akzeptierte Formate und Accept-Language für Sprachpräferenzen. Cookie sendet gespeicherte Cookie-Werte zurück. Referer kann in seiner historischen Schreibweise die verweisende Seite angeben; Browser können den Wert je nach Richtlinie weglassen oder kürzen.

Die Antwort ist die Reaktion des Servers auf eine Anfrage. Ihr Code nennt das Ergebnis, ihre Header beschreiben die Antwort und ihr Nachrichtenkörper enthält den zurückgegebenen Inhalt, sofern ein Nachrichtenkörper erlaubt ist.

Die Bestandteile unterscheiden

Eine Antwort in der Textform von HTTP/1.1 kann so beginnen:

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 1534
Cache-Control: max-age=600

<!DOCTYPE html>
<html lang="en">
...

Die Statuszeile nennt die Version, den Code 200 und die für Menschen lesbare Statusmeldung OK. Programme verwenden die Zahl. HTTP/2 und HTTP/3 übertragen diese Statusmeldung nicht. Nach den Headern und einer Leerzeile beginnt der Nachrichtenkörper mit dem HTML.

Content-Length gibt eine Anzahl von Byte an, keine Zeichenzahl und keine sichtbare Seitengröße. Bei einer Bildantwort mit Content-Length: 24576 hat der Nachrichtenkörper 24.576 Byte: 24,576 kB oder etwa 24,6 kB bei 1 kB = 1.000 Byte.

Den Nachrichtenkörper anhand seines MIME-Typs erkennen

Der MIME-Typ wird in Content-Type gesendet.

Der Header sagt dem Browser, wie er den Nachrichtenkörper behandeln soll; eine Dateinamenerweiterung allein reicht nicht aus. Gibt die URL eines Stylesheets eine HTML-Fehlerseite mit Content-Type: text/html zurück, lehnt der Browser sie als CSS ab. Das erklärt häufig eine Seite mit Text, aber ohne die vorgesehene Gestaltung.

Nachrichtenkörper können Text oder binäre Daten enthalten. Eine Antwort auf HEAD hat keinen Nachrichtenkörper, auch wenn ihre Header die Ressource beschreiben, die ein GET zurückgeben würde. Auch 204 No Content und 304 Not Modified haben keinen Nachrichtenkörper.

Identität zwischen einzelnen Anfragen übertragen

HTTP ist zustandslos: Ein Austausch erinnert sich nicht automatisch an einen früheren. Ein Cookie liefert Informationen, die Anfragen mit einer laufenden Sitzung verbinden.

1. Der Server antwortet mit Set-Cookie: session=abc123.
2. Der Browser speichert das Cookie.
3. Bei späteren passenden Anfragen sendet er Cookie: session=abc123.
4. Der Server kann diesen Wert nutzen, um die Sitzung nachzuschlagen, etwa die Anmeldung oder den Warenkorb des Lernenden.

Der Geltungsbereich des Cookies und Browserregeln bestimmen, bei welchen Anfragen es mitgesendet wird.

Inhalte ohne erneuten Download verwenden

Mit Cache-Control: max-age=600 darf der Browser eine gespeicherte Antwort 600 Sekunden oder 10 Minuten lang als frisch behandeln. In dieser Zeit kann er die Kopie wiederverwenden, ohne den Server zu kontaktieren. Danach kann der Browser fragen, ob sie sich geändert hat. Ein 304 bedeutet, dass der zwischengespeicherte Nachrichtenkörper wiederverwendet werden kann; ein 200 kann einen Ersatz liefern.

Wenn gespeicherte CSS-Änderungen nicht erscheinen, prüfe, ob der Browser eine Kopie wiederverwendet hat. Ein erzwungenes Neuladen, meist Strg+Umschalt+R unter Windows/Linux oder Cmd+Umschalt+R unter macOS, oder die Option Cache deaktivieren in den Entwicklerwerkzeugen hilft beim Abrufen frischer Ressourcen. Das Kontrollkästchen wirkt, solange die Entwicklerwerkzeuge geöffnet sind.

Weitere nützliche Antwort-Header sind Location für das Ziel einer Weiterleitung, Date für das Datum der Antwort und Server für Angaben zur Serversoftware, sofern sie mitgesendet werden.

Ein Statuscode ist das dreistellige Ergebnis in einer HTTP-Antwort. Die Zahl beschreibt eine Anfrage, sodass eine Seite gleichzeitig erfolgreich geladenes HTML, ein fehlendes Bild und ein weitergeleitetes Skript haben kann.

Mit der ersten Ziffer beginnen

200 OK ist das übliche Ergebnis eines erfolgreichen GET. 201 Created meldet die Erstellung einer neuen Ressource, häufig nach einem POST. 204 No Content meldet Erfolg ohne Antwortkörper.

Einer Weiterleitung folgen, ohne sie mit einem Fehler zu verwechseln

301 Moved Permanently und 308 Permanent Redirect geben einen dauerhaft neuen Ort an. 302 Found und 307 Temporary Redirect geben einen vorübergehenden Ort an. Der Header Location der Antwort nennt die nächste Adresse.

Eine Anfrage an http://example.com/ kann zum Beispiel 301 mit Location: https://example.com/ zurückgeben. Der Browser sendet dann eine neue Anfrage an die HTTPS-Adresse, die 200 zurückgibt. Das sind zwei Austausche und keine einzelne Antwort mit zwei Codes.

307 und 308 behalten die Methode bei, wenn der Browser die Anfrage wiederholt. Nach 301 oder 302 darf ein Browser POST in GET ändern. 304 Not Modified ist eine andere Art von 3xx-Ergebnis: Es bestätigt die Aktualität einer zwischengespeicherten Kopie und sendet keinen Ersatzkörper.

Zum Code den nächsten sinnvollen Prüfschritt wählen

Ein 503 kann Retry-After enthalten, um anzugeben, wann du es erneut versuchen kannst. Der Unterschied zwischen 401 und 403 ist besonders nützlich: Eine fehlende oder ungültige Authentifizierung unterscheidet sich von einer verweigerten Berechtigung. Ein 4xx-Code weist auf die Anfrageseite hin, die du untersuchen solltest. Die Ursache kann dennoch ein defekter Link oder ein Konfigurationsproblem der Website sein.

Die einzelne Ressource untersuchen

Angenommen, HTML und CSS geben 200 zurück, während images/Logo.PNG 404 zurückgibt. Die tatsächliche Datei auf dem Server heißt images/logo.png. Wenn du die Groß- und Kleinschreibung im Link korrigierst, verweist er auf die gespeicherte Datei. Ein Server hat die fehlgeschlagene Anfrage beantwortet; nicht die gesamte Website war unerreichbar.

Bei einer 5xx-Antwort liegt der Fehler in der serverseitigen Verarbeitung. Wenn du die Website einer anderen Person besuchst, kannst du es später erneut versuchen oder den Fehler melden. Ein Entwickler, der für diesen Server verantwortlich ist, untersucht dessen Code oder einen dahinterliegenden Dienst.

Die Antwort lesen, nicht nur den Bildschirm

Eine Fehlermeldung im HTML bestimmt nicht den Status. Eine Website kann 200 mit einer Meldung „nicht gefunden“ zurückgeben, ein sogenannter Soft-404. Umgekehrt kann ein echter 404 eine aufwendig gestaltete HTML-Fehlerseite enthalten. Lies den tatsächlichen Code im Netzwerkbereich ab.

Wenn DNS oder die Verbindung fehlschlägt, liegt möglicherweise überhaupt keine HTTP-Antwort vor. Ein vom Browser erzeugter Fehler hat dann keinen Serverstatus, den du prüfen könntest. Ein einzelner 404 für /favicon.ico, das kleine Tab-Symbol, das Browser anfordern können, beeinträchtigt häufig den Seiteninhalt nicht.

Eine Seite verbindet Inhalt, Darstellung und Verhalten. Wenn du diese Aufgaben erkennst, kannst du entscheiden, welche Datei du untersuchen musst, wenn du etwas ändern möchtest.

HTML beschreibt, was der Inhalt ist

HTML gibt Inhalten Struktur und Bedeutung: Überschriften, Absätze, Listen, Links, Bilder, Tabellen und Formulare. Es ist eine Auszeichnungssprache. Sie beschreibt Elemente, statt Berechnungen durchzuführen oder Schleifen auszuführen.

In <a href="about.html">About us</a> ist das öffnende Tag <a href="about.html">. Das Attribut href gibt das Ziel an. „About us“ ist der Inhalt und </a> schließt das Element. Attribute gehören in das öffnende Tag.

Manche Elemente sind leer und haben weder Inhalt noch ein schließendes Tag. Zum Beispiel liefert <img src="logo.png" alt="Company logo"> eine Bildadresse und eine Textalternative. <br>, <link> und <meta> sind weitere leere Elemente.

Wähle Elemente nach ihrer Bedeutung. Verwende eine Überschrift, weil der Text einen Abschnitt einleitet; verwende CSS, wenn du größeren Text oder zusätzliche Abstände möchtest. Mehrere <br>-Elemente sind ein schlechter Ersatz für Abstandsregeln.

CSS steuert das Aussehen von Inhalten

CSS legt Farbe, Schrift, Abstände, Layout und die Anpassung an verschiedene Bildschirmbreiten fest. Lies diese Regel:

h1 {
  color: navy;
  font-size: 2rem;
}

Der Selektor h1 bezeichnet die zu gestaltenden Elemente. Jede Deklaration verbindet eine Eigenschaft mit einem Wert. color: navy; setzt die Eigenschaft color auf navy. Der Doppelpunkt trennt Eigenschaft und Wert; das Semikolon beendet die Deklaration.

JavaScript reagiert auf Aktionen

JavaScript ist eine Programmiersprache. Es reagiert auf Klicks und Eingaben, ändert die aktuelle Seite, prüft Formulareingaben und fordert weitere Daten an, ohne die gesamte Seite neu zu laden. Es ist eine andere Sprache als Java.

Für eine Schaltfläche zum Wechseln des Designs kann ein Skript die Schaltfläche finden, auf Klicks reagieren und eine CSS-Klasse umschalten:

document.querySelector("button").addEventListener("click", () => {
  document.body.classList.toggle("dark");
});

Das Skript ändert, ob der Dokumentkörper die Klasse dark hat; CSS legt das Aussehen dieser Klasse fest. Eine statische Informationsseite kann allein mit HTML und CSS funktionieren.

Die Dateien im HTML verknüpfen

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first page</title>
    <link rel="stylesheet" href="styles/main.css">
    <script src="scripts/app.js" defer></script>
  </head>
  <body>
    <h1>Hello, web</h1>
    <p>This text is structured by HTML and styled by CSS.</p>
    <button>Switch theme</button>
  </body>
</html>

Das <head> enthält Seiteninformationen und Dateiverknüpfungen. Das <body> enthält den angezeigten Inhalt. Der Browser fordert styles/main.css und scripts/app.js getrennt vom HTML an. Alle drei sind reine Textdateien, die du in einem Code-Editor öffnen kannst.

Die Trennung der Zuständigkeiten hält Inhalt in HTML, Aussehen in CSS und Verhalten in JavaScript. Ein Stylesheet kann viele Seiten gestalten. Eine aussagekräftige Überschrift und ein gewöhnlicher Link funktionieren auch dann noch, wenn Gestaltung oder Skripte ausfallen; Funktionen, die von JavaScript abhängen, brauchen dagegen ihr Skript.

Der Browser zeigt HTML nicht als Bild einer Textdatei an. Er wandelt die Datei in Objekte um, ermittelt ihre Stile und Positionen und zeichnet das Ergebnis. JavaScript kann diese Objekte anschließend verändern.

Aus HTML einen Baum aufbauen

Das DOM ist der aktuelle Baum des Browsers aus Elementen und Text. Betrachte:

<body><h1>News</h1><p>Hi <a href="/">home</a></p></body>

Das body hat zwei Kindelemente, h1 und p. Die Überschrift enthält „News“. Der Absatz enthält den Text „Hi “ und ein Element a, das „home“ enthält. Der Link steht innerhalb des Absatzes, nicht unmittelbar innerhalb des Dokumentkörpers.

Beim Lesen von HTML entdeckt der Browser Ressourcen in Elementen wie <link>, <script> und <img>. Er fordert diese Ressourcen an und liest das CSS, um die endgültigen Stile jedes Elements zu berechnen. Die Layoutberechnung ermittelt Größen und Positionen. Beim Zeichnen entstehen die Pixel. Diese Aufgaben können erneut stattfinden, wenn sich Inhalte oder Stile ändern.

Skripte ausführen, wenn ihre Elemente existieren

Ein klassisches externes Skript ohne defer oder async unterbricht das Parsen des HTML, während es heruntergeladen und ausgeführt wird. Steht es im head-Element und versucht eine Schaltfläche zu finden, die später im Dokumentkörper steht, ist diese Schaltfläche noch nicht aufgebaut. document.querySelector("button") gibt null zurück, sodass der Aufruf von addEventListener für dieses Ergebnis einen Fehler erzeugt.

Ergänze defer, damit ein Skript heruntergeladen wird, während das Parsen des HTML weiterläuft, und ausgeführt wird, sobald dieses abgeschlossen ist. Auch wenn du ein einfaches Skript direkt vor </body> verschiebst, existieren frühere Elemente zuerst. async garantiert nicht, dass eine spätere Schaltfläche existiert; der Download kann früh abgeschlossen sein.

HTML-Quelltext und aktuelles DOM können sich unterscheiden

Seitenquelltext anzeigen zeigt das ausgelieferte HTML. Der Bereich Elemente, in Firefox Inspektor genannt, zeigt das aktuelle DOM. JavaScript kann Inhalte hinzugefügt, Text geändert oder Elemente entfernt haben. Der Browser kann auch fehlerhaft aufgebautes HTML korrigiert haben, indem er zum Beispiel ein Element geschlossen hat.

Ändert sich eine Überschrift nach einem Klick, zeigt der Elemente-Bereich den geänderten Text. Der Seitenquelltext zeigt weiterhin das ursprünglich empfangene HTML. Eine DOM-Änderung kann aktualisierte Stile, eine neue Layoutberechnung und erneutes Zeichnen auslösen, ohne ein neues HTML-Dokument abzurufen.

Verschiedene Fehler haben verschiedene Auswirkungen

Browser korrigieren HTML nach festgelegten Regeln und überspringen CSS-Deklarationen, die sie nicht verstehen. Ein JavaScript-Syntaxfehler, etwa ein unvollständiger Ausdruck, verhindert den Start dieser Skriptdatei oder dieses Blocks. Ein nicht abgefangener Laufzeitfehler beendet die aktuelle Ausführung, sodass spätere Zeilen in diesem Durchlauf übersprungen werden. Andere Skripte und bereits registrierte Ereignisbehandlungsfunktionen können weiterhin funktionieren. Das erklärt, warum Inhalt und Gestaltung einer Seite sichtbar bleiben können, während eine Funktion ausfällt.

Browser-Engines setzen gemeinsame Standards um: Blink in Chrome und Edge, Gecko in Firefox und WebKit in Safari. Kleine Unterschiede in der Umsetzung machen Tests in mehr als einem Browser sinnvoll. Browser erstellen aus der Seitenstruktur außerdem einen Barrierefreiheitsbaum, damit Screenreader bedeutungsvolle Elemente und Beziehungen darstellen können.

Ein Webprojekt beginnt als Dateien in einem Ordner. Ein Code-Editor hilft dir, diese Dateien zu schreiben, und ein Browser zeigt dir eine Vorschau des Ergebnisses. Wenn Editor und Browser auf dieselbe Kopie des Projekts zeigen, vermeidest du viele verwirrende Ergebnisse.

Einen Code-Editor für reinen Text wählen

Ein Code-Editor speichert reine Textdateien und ergänzt Syntaxhervorhebung, Vervollständigung, Fehlerhinweise, einen Dateibaum und andere Programmierhilfen. Textverarbeitungsprogramme speichern Dokumentformatierungen und ersetzen möglicherweise gerade durch typografische Anführungszeichen. Sie sind daher für Quellcode ungeeignet.

Visual Studio Code ist eine kostenlose Möglichkeit für Windows, macOS und Linux. Weitere Editoren sind Sublime Text, Zed und WebStorm. Eine Online-Übungsumgebung wie CodePen eignet sich für kurze Versuche; die Fertigkeiten im Umgang mit Dateien und Pfaden lassen sich zwischen den Werkzeugen übertragen.

Ein Projekt erstellen und öffnen

Für ein erstes VS-Code-Projekt:

1. Lade den Editor von seiner offiziellen Website https://code.visualstudio.com/ herunter und installiere ihn.
2. Erstelle einen Ordner wie web-projects/my-first-site.
3. Wähle Datei → Ordner öffnen und öffne my-first-site, damit der Dateibaum das ganze Projekt zeigt.
4. Erstelle index.html. Tippe im HTML-Modus ! und wähle den Emmet-Vorschlag für ein HTML-Grundgerüst.
5. Speichere mit Strg+S unter Windows/Linux oder Cmd+S unter macOS.

Verwende eine Ordnerstruktur, die den Aufgaben deiner Dateien entspricht:

my-first-site/
  index.html
  styles/main.css
  scripts/app.js
  images/logo.png

Verwende Kleinbuchstaben und Bindestriche ohne Leerzeichen. Halte die Dateinamenerweiterungen sichtbar, damit aus index.html nicht unbemerkt index.html.txt wird. Speichere Text als UTF-8 und füge <meta charset="utf-8"> in das head-Element des HTML ein, damit Text wie Namen mit Akzenten korrekt interpretiert wird.

Eine Vorschaumethode wählen

Ein lokaler Webserver stellt einen Ordner auf deinem eigenen Computer bereit. Er kann http://localhost:5500/ oder http://127.0.0.1:3000/ verwenden; nutze die Adresse, die dein Vorschauwerkzeug angibt. Wurzelrelative Pfade brauchen einen Server, damit sie am Wurzelverzeichnis deiner Website beginnen. Auch Funktionen wie JavaScript-Module oder das Abrufen von Daten brauchen eine HTTP-Vorschau, weil Browser ihre Verwendung auf Seiten aus lokalen Dateien einschränken.

In VS Code kann Microsofts Erweiterung Live Preview oder eine Live-Server-Erweiterung einen Server starten und die Vorschau nach dem Speichern aktualisieren. Prüfe vor der Installation von Erweiterungen den Herausgeber, denn Erweiterungen führen Code auf deinem Computer aus. Formatierung beim Speichern, Zeilenumbruch und automatisches Speichern können die Bearbeitung erleichtern; ein Formatierer wie Prettier sorgt für eine einheitliche Formatierung.

Den Zyklus aus Bearbeiten und Prüfen durchlaufen

Bearbeite und speichere die Datei, lade die Seite neu oder lass die Vorschau neu laden, untersuche das Ergebnis und korrigiere die Datei. Zeigt der Browser weiterhin alte Inhalte, prüfe die Anzeige für ungespeicherte Änderungen im Editor und vergleiche den Pfad der Vorschau mit dem geöffneten Projekt. Möglicherweise hast du zwei Ordner mit demselben Seitennamen. Prüfe auch den genauen Dateinamen und die Erweiterung; eine Textdatei-Endung kann verhindern, dass der Browser eine Datei als HTML-Seite behandelt.

Die Entwicklerwerkzeuge des Browsers zeigen die Seite, die du tatsächlich ausführst. Nutze sie, um einen Stil zu testen, einen Fehler zu lesen oder die aktuelle Seite mit der Datei in deinem Editor zu vergleichen.

Die Werkzeuge öffnen und einen Bereich wählen

Klicke auf einer Desktopseite mit der rechten Maustaste auf einen Teil der Seite und wähle Untersuchen. Gängige Tastenkürzel sind F12 oder Strg+Umschalt+I unter Windows/Linux und Cmd+Option+I unter macOS. In Safari müssen zuerst die Entwicklerfunktionen unter Einstellungen → Erweitert aktiviert werden; der Wortlaut der Option hängt von der Safari-Version ab.

Den maßgeblichen Stil finden

Untersuche eine Überschrift. Wenn du ihren Knoten auswählst, wird ihre Box auf der Seite hervorgehoben, einschließlich Inhalt, Innenabstand, Rahmen und Außenabstand. Der Bereich Stile listet Regeln und ihre Quellstellen auf, etwa main.css:12. Eine durchgestrichene Deklaration ist dort nicht wirksam: Eine andere Regel kann sie überschreiben oder die Deklaration kann ungültig sein. Ungültige Deklarationen können auch ein Warnsymbol tragen.

Öffne Berechnet, um die endgültigen Werte zu sehen. Wenn zwei Regeln unterschiedliche Textfarben festlegen, zeigt dir die berechnete Farbe das Ergebnis. Du kannst vorübergehend einen Wert ändern, eine Deklaration deaktivieren oder Text und Attribute bearbeiten, um eine Idee zu testen.

Gewöhnliche direkte Änderungen betreffen das DOM oder die Stile deines Tabs. Beim Neuladen werden sie durch die geladenen Dateien ersetzt. Um eine Verbesserung zu behalten, nimm dieselbe Änderung in der Quelldatei vor, speichere und lade neu. Wenn du unter Elemente einen angezeigten Preis änderst, ändert sich die lokale Anzeige; der auf dem Server gespeicherte Preis ändert sich nicht.

Einen Konsolenfehler als Hinweis lesen

Ein Fehler enthält eine Meldung und meist eine Datei und Zeile. Zum Beispiel:

Uncaught TypeError: Cannot read properties of null
(reading 'addEventListener') at app.js:3

Lies app.js:3 als die zu untersuchende Quellstelle. Der Code hat versucht, ein fehlendes Objekt zu verwenden. Hat ein Selektor nach einer Schaltfläche gesucht, prüfe, ob seine Schreibweise zu einem Element passt und ob das Element existierte, als das Skript ausgeführt wurde. Die Meldung allein entscheidet nicht zwischen diesen Ursachen.

Die Konsole zeigt auch fehlgeschlagene Ressourcenabrufe, etwa ein GET mit dem Ergebnis 404, und Meldungen von console.log(). Ein Skriptfehler kann eine nicht funktionierende Schaltfläche erklären, selbst wenn die Datei erfolgreich heruntergeladen wurde.

Einen kleinen Ausdruck und einen schmalen Bildschirm ausprobieren

Die Konsole kann JavaScript auswerten. Die Eingabe von 2 + 3 ergibt 5; document.title gibt den aktuellen Titel zurück. Die Zuweisung document.body.style.background = "lightyellow" ändert den Hintergrund der Seite im Tab. Füge keinen Code von jemandem, dem du nicht vertraust, in die Konsole ein; er wird mit Zugriff auf die Seite ausgeführt und kann ein Konto missbrauchen.

Verwende das Smartphone-und-Tablet-Symbol für den responsiven Modus. Wähle eine schmale Breite wie 375 CSS-Pixel, um zu sehen, wie das Layout hineinpasst. Das simuliert einen Viewport, nicht jedes Verhalten eines echten Smartphones; ein Test auf einem echten Gerät liefert zusätzliche Informationen, die eine Größenänderung nicht bieten kann.

Der Netzwerkbereich zeigt die einzelnen Austausche hinter einer Seite. Er kann offenlegen, warum ein Bild fehlt, warum die Gestaltung fehlgeschlagen ist oder warum beim Neuladen weniger Daten als erwartet übertragen wurden.

Vor dem Neuladen aufzeichnen

Öffne die Entwicklerwerkzeuge, wähle Netzwerk, stelle sicher, dass die Aufzeichnung aktiv ist, und lade die Seite neu. Der Bereich kann Anfragen nicht rekonstruieren, die vor seinem Öffnen abgeschlossen waren. Ist die Liste leer, prüfe Aufzeichnung und Filter und lade erneut.

Die Zeilen zeigen Name oder URL, Methode, Status, Typ, Größe und Zeit jeder Anfrage. Das Wasserfalldiagramm zeigt, wann Anfragen begannen und wie sich ihre Zeitabläufe überschneiden. Es hilft dir, das Laden einer Seite als mehrere Ressourcenabrufe statt als einen unteilbaren Vorgang zu sehen.

Eine Zeile für alle Anhaltspunkte öffnen

Wähle eine Anfrage aus. Header zeigt die angeforderte URL und Methode, den Antwortstatus sowie Anfrage- und Antwort-Header. Vorschau zeigt eine nützliche Ansicht unterstützter Antwortinhalte. Antwort zeigt den zurückgegebenen Inhalt direkter, während Timing die Dauer der einzelnen Anfragephasen aufschlüsselt.

Vergleiche bei einem fehlenden Bild die vollständige angeforderte Adresse mit dem tatsächlichen Speicherort des Bildes. Ein Dateiname allein kann einen falschen übergeordneten Ordner verbergen.

Einen beispielhaften Ladevorgang untersuchen

Fünf Anfragen übertrugen insgesamt 31,8 kB. Die Anfrage für Hero.jpg schlug fehl. Ihr kleiner HTML-Nachrichtenkörper ist die Fehlerseite des Servers, was den MIME-Typ text/html bei einer Bildanfrage erklärt. Heißt die tatsächliche Datei images/hero.jpg, ändere src="images/Hero.jpg" zu src="images/hero.jpg" und lade neu, um die Korrektur zu testen.

Filtere nach Img für Bilder, CSS für Stylesheets oder einem Namen für eine bestimmte Ressource. Wenn ein Stylesheet fehlschlägt, untersuche sowohl seinen Status als auch Content-Type. Selbst ein 200 kann eine HTML-Antwort nicht zu nutzbarem CSS machen.

Weiterleitungen und Cache-Antworten sichtbar halten

Aktiviere Protokoll beibehalten, in Firefox „Protokolle beibehalten“ genannt, bevor du einer Navigation folgst, die du verfolgen möchtest. Eine HTTP-zu-HTTPS-Weiterleitung kann dann eine 301-Zeile mit ihrem Location-Header und anschließend eine neue 200-Anfrage zeigen.

Eine mit „(memory cache)“ oder „(disk cache)“ markierte Zeile bedeutet, dass der Browser gespeicherten Inhalt wiederverwendet hat. Bei einem 304 gab es weiterhin eine Serverantwort, aber es kamen nur Header zurück, sodass die erneute Übertragung des Nachrichtenkörpers entfiel. Die Spalten „Größe“ und „Übertragen“ beantworten daher andere Fragen als die Dateigröße allein.

Verwende Cache deaktivieren bei geöffneten Entwicklerwerkzeugen, um mit frischen Abrufen zu vergleichen. Die Drosselung simuliert eine langsamere Verbindung, sodass du beobachten kannst, welche Inhalte zuerst erscheinen. Die Bezeichnungen der Geschwindigkeitsvorgaben variieren je nach Browserversion.

Eine fehlgeschlagene Zeile ohne Antwortstatus kann auf einen DNS- oder Verbindungsfehler hinweisen; Chrome zeigt möglicherweise net::ERR_NAME_NOT_RESOLVED. Außerhalb des Browsers sendet curl -I https://example.com ein HEAD und gibt Status und Header für eine schnelle Prüfung der Antwort aus.