Informatik · Klasse 11 · Rechnernetze und Internet-Technologien · 2. Halbjahr

Web-Technologien: HTTP und HTML

Die Schülerinnen und Schüler verstehen die Funktionsweise des World Wide Web und erstellen einfache Webseiten.

• KMK Bildungsstandards
• KMK: Sekundarstufe II - Implementieren
• KMK: Sekundarstufe II - Darstellen und Interpretieren

Über dieses Thema

Web-Technologien wie HTTP und HTML sind zentral für das Verständnis des World Wide Web. Schülerinnen und Schüler erlernen den Request-Response-Zyklus: Der Browser sendet eine HTTP-Anfrage an den Server, der eine mit HTML strukturierte Webseite als Antwort zurückliefert. HTML dient der semantischen Strukturierung von Inhalten durch Tags wie <header>, <nav> oder <article>, was die Zugänglichkeit und Maschinenlesbarkeit verbessert. Diese Kenntnisse entsprechen den KMK-Standards für Sekundarstufe II, insbesondere Implementieren und Darstellen sowie Interpretieren.

HTTP gilt als zustandsloses Protokoll, da Server keine Informationen über vorherige Anfragen speichern. Jede Request steht für sich, was Skalierbarkeit ermöglicht, aber Cookies oder Sessions für Zuständigkeit erfordert. Schüler analysieren diese Implikationen, etwa für E-Commerce-Anwendungen, und erstellen einfache Webseiten, um Theorie und Praxis zu verbinden.

Aktives Lernen ist hier besonders wirksam, weil abstrakte Prozesse durch das Erstellen eigener HTML-Seiten und die Nutzung von Browser-Entwicklertools konkret werden. Schüler beobachten Requests live, experimentieren mit Änderungen und diskutieren Ergebnisse, was Verständnis vertieft und Motivation steigert. (178 Wörter)

Leitfragen

1. Erklären Sie den Request-Response-Zyklus bei der Übertragung von Webseiten.
2. Analysieren Sie die Bedeutung von HTML für die Strukturierung von Webinhalten.
3. Begründen Sie, warum HTTP als zustandsloses Protokoll gilt und welche Implikationen das hat.

Lernziele

• Erklären Sie den Request-Response-Zyklus des World Wide Web unter Angabe der beteiligten Protokolle und Akteure.
• Analysieren Sie die Struktur einer einfachen HTML-Seite und identifizieren Sie die Funktion von mindestens fünf verschiedenen HTML-Tags zur Inhaltsgliederung.
• Demonstrieren Sie die Auswirkungen des zustandslosen Charakters von HTTP auf die Verwaltung von Benutzerinformationen durch die Implementierung eines einfachen Mechanismus (z.B. URL-Parameter).
• Entwerfen Sie eine einfache Webseite mit HTML, die eine klare semantische Struktur aufweist und auf eine spezifische Informationsanforderung reagiert.

Bevor es losgeht

Grundlagen der Rechnerarchitektur

Warum: Ein grundlegendes Verständnis von Client-Server-Modellen und Datenübertragung ist notwendig, um die Rollen von Browser und Server im Web zu verstehen.

Grundlagen der Netzwerkprotokolle

Warum: Das Verständnis von Protokollen als Regeln für die Kommunikation ist eine Basis, um die spezifischen Regeln von HTTP nachvollziehen zu können.

Schlüsselvokabular

HTTP (Hypertext Transfer Protocol)	Das Kernprotokoll für die Datenübertragung im World Wide Web. Es definiert, wie Nachrichten formatiert und übertragen werden und welche Aktionen Webserver und Browser ausführen sollen.
HTML (Hypertext Markup Language)	Die Standard-Auszeichnungssprache zur Erstellung von Webseiten. HTML beschreibt die Struktur von Webinhalten mithilfe von Elementen und Tags.
Request-Response-Zyklus	Der grundlegende Kommunikationsablauf im Web: Ein Client (z.B. Browser) sendet eine Anfrage (Request) an einen Server, der daraufhin eine Antwort (Response) zurücksendet.
Zustandsloses Protokoll	Ein Protokoll, bei dem jede Anfrage unabhängig von vorherigen Anfragen behandelt wird. Der Server speichert keine Informationen über den Zustand des Clients zwischen den Anfragen.
Webbrowser	Eine Softwareanwendung zur Darstellung von Webseiten im Internet. Sie interpretiert HTML, CSS und andere Webtechnologien und zeigt die Inhalte an.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

HTTP speichert automatisch Benutzerdaten über Anfragen hinweg.

Was Sie stattdessen lehren sollten

HTTP ist stateless, jede Request ist unabhängig. Aktive Simulationen mit Karten zeigen dies direkt: Server "vergessen" vorherige Interaktionen. Peer-Diskussionen helfen, Cookies als Ergänzung zu verstehen.

Häufige Fehlvorstellung

HTML bestimmt Farben und Layout von Webseiten.

Was Sie stattdessen lehren sollten

HTML strukturiert Inhalte, CSS übernimmt Design. Schüler korrigieren dies, indem sie HTML-Tags isolieren und rendern. Experimente mit Editoren verdeutlichen die Trennung und fördern präzises Denken.

Häufige Fehlvorstellung

Das Web funktioniert nur mit grafischen Browsern.

Was Sie stattdessen lehren sollten

HTTP/HTML basiert auf Textprotokollen, unabhängig vom Client. Tools wie curl demonstrieren dies. Gruppenversuche mit Kommandozeile machen Protokoll-Ebene greifbar.

Ideen für aktives Lernen

Planspiel: Request-Response-Zyklus

Teilen Sie die Klasse in Clients und Server ein. Clients schreiben HTTP-Requests auf Karten (z. B. GET /index.html), Server antworten mit HTML-Snippets. Gruppen rotieren Rollen und protokollieren den Zyklus. Abschließende Plenumdiskussion klärt Abläufe.

35 Min.·Kleingruppen

HTML-Editor: Eigene Webseite bauen

Schüler erstellen mit einem Texteditor eine HTML-Seite mit Überschriften, Listen und Links. Sie validieren die Struktur online und präsentieren Ergebnisse. Erweiterung: Einbetten von Bildern.

45 Min.·Einzelarbeit

DevTools: HTTP-Header analysieren

Öffnen Sie Browser-DevTools (F12). Lassen Sie Paare eine Webseite laden, Requests inspizieren und Header wie User-Agent oder Status-Codes notieren. Vergleichen Sie mit verschiedenen Seiten.

25 Min.·Partnerarbeit

Fishbowl-Diskussion: Zustandslosigkeit von HTTP

Präsentieren Sie Szenarien wie Logins. Gruppen brainstormen Lösungen (Cookies, Sessions) und begründen Vor- und Nachteile. Plenum fasst Implikationen zusammen.

20 Min.·Ganze Klasse

Bezüge zur Lebenswelt

• Webentwickler bei E-Commerce-Unternehmen wie Zalando nutzen HTTP und HTML täglich, um Produktseiten zu erstellen und sicherzustellen, dass Kundenanfragen (z.B. nach einem bestimmten Artikel) korrekt verarbeitet und die passenden Produktinformationen angezeigt werden.
• Journalisten und Content-Ersteller verwenden HTML-Editoren oder Content-Management-Systeme, um Artikel für Nachrichtenportale wie Spiegel Online zu strukturieren. Die semantische Auszeichnung hilft Suchmaschinen, die Inhalte besser zu verstehen und zu ranken.
• Systemadministratoren, die Webserver für Organisationen wie die Deutsche Bahn betreiben, müssen die Prinzipien von HTTP verstehen, um die Skalierbarkeit und Sicherheit bei vielen gleichzeitigen Anfragen von Nutzern zu gewährleisten.

Ideen zur Lernstandserhebung

Lernstandskontrolle

Die Schüler erhalten eine Karte mit einer der folgenden Fragen: 'Beschreiben Sie in 2 Sätzen, was passiert, wenn Sie auf einen Link klicken.' oder 'Nennen Sie zwei HTML-Tags und erklären Sie deren Funktion.' Die Antworten werden eingesammelt und auf Vollständigkeit geprüft.

Kurze Überprüfung

Zeigen Sie eine einfache HTML-Datei auf dem Bildschirm. Stellen Sie den Schülern gezielte Fragen: 'Welches Tag leitet den Hauptinhalt ein?' oder 'Was ist die Rolle des `<!DOCTYPE html>`-Tags?' Die Schüler antworten mündlich oder schreiben ihre Antworten auf ein Blatt.

Diskussionsfrage

Stellen Sie die Frage: 'Warum ist es für einen Webshop wichtig, dass HTTP zustandslos ist, und wie werden trotzdem Informationen wie der Warenkorb gespeichert?' Leiten Sie eine kurze Klassendiskussion, um die Konzepte von Cookies oder Session-IDs anzudeuten.

Häufig gestellte Fragen

Was ist der Request-Response-Zyklus bei HTTP?

Der Client (Browser) sendet eine Anfrage (Request) mit Methode wie GET oder POST an den Server. Der Server verarbeitet sie und antwortet mit Statuscode, Headern und Body, oft HTML. Dieser Zyklus wiederholt sich bei Interaktionen. Schüler verstehen ihn durch DevTools-Beobachtung, was Netzwerkdynamik klar macht. (62 Wörter)

Warum ist HTTP ein zustandsloses Protokoll?

Jede HTTP-Anfrage ist unabhängig, Server speichern keinen Kontext. Das ermöglicht hohe Skalierbarkeit, erfordert aber Mechanismen wie Cookies für Sessions. Im Unterricht analysieren Schüler Beispiele wie Warenkörbe, um Sicherheits- und Performanzimplikationen zu erkennen. (58 Wörter)

Wie strukturiert HTML Webinhalte?

HTML verwendet Tags wie <h1> für Hierarchien, <ul> für Listen und <a> für Links, um semantische Struktur zu schaffen. Dies unterstützt Screenreader und Suchmaschinen. Schüler implementieren Validierer, um Best Practices zu lernen und Barrierefreiheit zu schätzen. (56 Wörter)

Wie kann aktives Lernen beim Verständnis von HTTP und HTML helfen?

Praktische Übungen wie das Erstellen von HTML-Seiten oder Simulieren von Requests mit Karten machen Prozesse erlebbar. Schüler nutzen DevTools, um live zu beobachten, experimentieren mit Fehlern und diskutieren in Gruppen. Das vertieft Kompetenzen im Implementieren und Interpretieren nach KMK-Standards, steigert Eigeninitiative. (72 Wörter)