Wie das Web funktioniert

Bevor wir die erste Zeile schreiben, schauen wir uns an, was überhaupt passiert, wenn eine Webseite im Browser erscheint. Das spart später viel Rätselraten.

Was du am Ende kannst

erklären, was zwischen Adresseingabe und fertiger Seite passiert
eine URL in ihre Teile zerlegen
die Rollen von HTML, CSS und JavaScript unterscheiden
die Entwicklerwerkzeuge öffnen und Anfragen im Netzwerk-Tab ansehen

Vom Tippen zur Seite

Browser                                     Webserver
   │  1. GET /index.html  ───────────────────▶ │
   │  ◀─────────────────── 2. 200 OK + HTML    │
   │  3. HTML lesen: da steht stil.css und bild.svg
   │  4. GET /stil.css    ───────────────────▶ │
   │  5. GET /bild.svg    ───────────────────▶ │
   │  ◀─────────────────── 6. die Dateien      │
   │  7. Seite aufbauen und zeichnen

Der Browser bekommt also Textdateien und baut daraus selbst die Seite. Das hat zwei Folgen, die du dir merken solltest:

Dieselbe Datei kann in verschiedenen Browsern leicht anders aussehen. Darum gibt es am Tag 3 ein Kapitel zu Cross-Browser-Layouts.
Du kannst jede Seite untersuchen: Der Code liegt offen im Browser.

Eine URL zerlegen

https://www.example.org:443/verein/termine.html?jahr=2026#sommerlauf
└─┬─┘   └──────┬──────┘└┬┘└─────────┬────────┘└───┬───┘ └───┬────┘
Protokoll    Host     Port        Pfad         Abfrage     Anker

Teil	Bedeutung
Protokoll	`https` ist verschlüsselt, `http` nicht, `file` liest eine Datei direkt von deinem Rechner, ganz ohne Server
Host	der Rechner, den DNS in eine IP-Adresse übersetzt
Port	meist unsichtbar: 443 bei `https`, 80 bei `http`
Pfad	welche Datei oder welche Seite
Abfrage	Zusatzangaben an den Server
Anker	eine Stelle innerhalb der Seite; er geht gar nicht an den Server

HTTP in Kürze

HTTP ist die Sprache zwischen Browser und Server: eine Anfrage (Methode und Pfad), eine Antwort (Statuscode und Inhalt).

Status	Bedeutung	Wann du ihn siehst
`200`	OK	alles gut
`301`, `302`	Weiterleitung	Adresse ist umgezogen
`304`	Nicht geändert	Browser nutzt seine Kopie (Cache)
`404`	Nicht gefunden	Tippfehler im Dateinamen, der Klassiker
`500`	Serverfehler	das Problem liegt nicht bei dir

Drei Sprachen, drei Aufgaben

Sprache	Aufgabe	Frage, die sie beantwortet
HTML	Struktur und Bedeutung	Was ist das? Eine Überschrift, ein Menü, ein Formular?
CSS	Darstellung und Layout	Wie sieht es aus?
JavaScript	Verhalten	Was passiert, wenn …?

Diese Schulung behandelt HTML und CSS. JavaScript kommt nur am Tag 4 in einem kurzen Kapitel vor. Vieles, wofür man früher Skripte brauchte, kann CSS heute selbst.

Die Entwicklerwerkzeuge

Edge, Chrome und Firefox haben eingebaute Entwicklerwerkzeuge (DevTools). Du öffnest sie mit F12 oder per Rechtsklick auf ein Element → Untersuchen.

Tab in Edge/Chrome	in Firefox	Wofür
Elements	Inspektor	HTML und CSS ansehen und live ändern
Console	Konsole	Fehlermeldungen, JavaScript ausprobieren
Network	Netzwerkanalyse	alle Anfragen mit Status, Größe und Zeit

Änderungen in den DevTools gehen beim Neuladen verloren. Du kannst also nichts kaputt machen, und genau das macht sie zum idealen Experimentierfeld.

Übung

Diese Übung braucht keine Dateien, nur einen Browser. Nimm eine öffentliche Webseite, die du gut kennst.

Stufe 1: Anfragen zählen

Öffne die DevTools, Tab Network (Netzwerkanalyse), und lade die Seite neu.
Wie viele Anfragen braucht die Seite? Wie groß ist die erste, die HTML-Datei?
Sortiere nach Größe. Was ist die größte Datei?

Stufe 2: Live ändern

Rechtsklick auf eine Überschrift → Untersuchen.
Doppelklick auf den Text im Elements-Tab, schreibe etwas anderes hinein.
Lade die Seite neu. Was ist passiert, und warum?

Für Schnelle

Rufe auf derselben Seite eine Adresse auf, die es nicht gibt, und finde im Netzwerk-Tab den Statuscode. Schalte dann im Netzwerk-Tab Disable cache ein und vergleiche die Ladezeit mit und ohne Cache.

Auflösung zu Stufe 2

Die Änderung ist weg. Sie lebte nur im Browser, die Datei auf dem Server blieb unberührt.