Web-Technologien: HTTP und HTML

Aktive Erfahrungen helfen den Schülern, abstrakte Konzepte wie HTTP und HTML greifbar zu machen, denn nur durch eigenes Handeln verstehen sie die Dynamik des Webs. Wenn sie selbst Anfragen senden oder Code schreiben, erkennen sie sofort, wie die Theorie in der Praxis wirkt und wo Missverständnisse entstehen können.

• Klasse 11
• Informatik in der Oberstufe: Algorithmen, Daten und Gesellschaft
• 4 Aktivitäten
• 20 Min.–45 Min.

Lernziele

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

Planspiel

⏱ 35 Min.·Kleingruppen

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.

Vorbereitung & Details

Erklären Sie den Request-Response-Zyklus bei der Übertragung von Webseiten.

Moderationstipp: Lassen Sie die Schüler in der Simulation des Request-Response-Zyklus abwechselnd die Rollen von Browser und Server übernehmen, um die Unabhängigkeit der Anfragen konkret zu erleben.

Setup: Flexibler Raum für verschiedene Gruppenstationen

Materials: Rollenkarten mit Zielen und Ressourcen, Spielwährung oder Token, Rundenprotokoll

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Sozialbewusstsein
• Entscheidungsfähigkeit

Projektbasiertes Lernen

⏱ 45 Min.·Einzelarbeit

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.

Vorbereitung & Details

Analysieren Sie die Bedeutung von HTML für die Strukturierung von Webinhalten.

Moderationstipp: Fordern Sie die Schüler auf, in der HTML-Editor-Aktivität zunächst nur semantische Tags zu nutzen, bevor sie Design-Elemente hinzufügen, um die Trennung von Struktur und Darstellung zu verinnerlichen.

Setup: Flexible Lernumgebung mit Zugang zu Materialien und moderner Technik

Materials: Project Brief mit einer Leitfrage, Planungsvorlage und Zeitplan, Bewertungsraster (Rubric) mit Meilensteinen, Präsentationsmaterialien

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Projektbasiertes Lernen

⏱ 25 Min.·Partnerarbeit

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.

Vorbereitung & Details

Begründen Sie, warum HTTP als zustandsloses Protokoll gilt und welche Implikationen das hat.

Moderationstipp: Geben Sie den Schülern in der DevTools-Aktivität gezielte Aufgabenblätter mit Beispiel-URLs, deren Header sie analysieren und dokumentieren sollen.

Setup: Flexible Lernumgebung mit Zugang zu Materialien und moderner Technik

Materials: Project Brief mit einer Leitfrage, Planungsvorlage und Zeitplan, Bewertungsraster (Rubric) mit Meilensteinen, Präsentationsmaterialien

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Fishbowl-Diskussion

⏱ 20 Min.·Ganze Klasse

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.

Vorbereitung & Details

Erklären Sie den Request-Response-Zyklus bei der Übertragung von Webseiten.

Moderationstipp: Nutzen Sie die Diskussion zur Zustandslosigkeit von HTTP, um gezielt Fragen zu stellen, die die Schüler dazu bringen, über Cookies und Session-Management nachzudenken.

Setup: Innenkreis mit 4–6 Stühlen, umgeben von einem Außenkreis

Materials: Diskussionsimpuls oder Leitfrage, Beobachtungsbogen

• Analysieren
• Bewerten
• Sozialbewusstsein
• Selbstwahrnehmung

Dieses Thema unterrichten

Aktives Experimentieren steht im Vordergrund: Schüler lernen HTTP und HTML am besten, wenn sie selbst Anfragen senden oder Code schreiben. Vermeiden Sie lange Frontalphasen, sondern nutzen Sie kurze Impulse und sofortige Praxisphasen. Gruppenarbeiten fördern den Austausch über Missverständnisse und stärken das konzeptionelle Verständnis durch Peer-Feedback.

Was Sie erwartet

Am Ende der Einheit können die Schüler den Request-Response-Zyklus erklären, einfache HTML-Seiten strukturieren und HTTP-Header in DevTools interpretieren. Sie unterscheiden klar zwischen HTML-Struktur, HTTP-Protokoll und CSS-Design und erkennen die Grenzen von HTTPs Zustandslosigkeit.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

Während der Simulation des Request-Response-Zyklus beobachten Sie, ob Schüler glauben, dass der Server sich an vorherige Anfragen erinnert.

Was Sie stattdessen lehren sollten

Nutzen Sie die Karten aus der Simulation: Lassen Sie den Server auf jede Anfrage unabhängig antworten, ohne vorherige Daten zu speichern. Diskutieren Sie anschließend gemeinsam, wie Cookies oder Session-IDs dieses Problem lösen.

Häufige Fehlvorstellung

Während der HTML-Editor-Aktivität achten Sie darauf, ob Schüler Farben oder Layout direkt in HTML definieren wollen.

Was Sie stattdessen lehren sollten

Fordern Sie die Schüler auf, zunächst nur semantische Tags wie <header> oder <article> zu verwenden. Zeigen Sie ihnen dann, wie CSS separat eingebunden wird, und lassen Sie sie die Trennung in ihrem Code nachvollziehen.

Häufige Fehlvorstellung

Während der DevTools-Aktivität mit Tools wie curl beobachten Sie, ob Schüler annehmen, dass das Web nur mit grafischen Browsern funktioniert.

Was Sie stattdessen lehren sollten

Lassen Sie die Schüler mit curl einfache HTTP-Anfragen an bekannte Websites stellen und die textbasierten Antworten analysieren. Diskutieren Sie, warum diese Antworten unabhängig vom Client (Browser, App, CLI) gleich sind.

Ideen zur Lernstandserhebung

Lernstandskontrolle

Nach der Simulation des Request-Response-Zyklus erhalten die Schüler eine Karte mit der Frage: 'Beschreiben Sie in zwei Sätzen, was passiert, wenn Sie auf einen Link klicken.' Sammeln Sie die Antworten ein und prüfen Sie, ob der Zyklus und die Unabhängigkeit der Anfragen korrekt beschrieben werden.

Kurze Überprüfung

Während der HTML-Editor-Aktivität zeigen Sie eine einfache HTML-Datei und fragen mündlich: 'Welches Tag leitet den Hauptinhalt ein?' oder 'Was ist die Rolle des <!DOCTYPE html>-Tags?' Korrigieren Sie direkt falsche Antworten und nutzen Sie die Gelegenheit für kurze Erklärungen.

Diskussionsfrage

Nach der Diskussion zur Zustandslosigkeit von HTTP 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?' Nutzen Sie die Antworten, um das Konzept von Cookies oder Session-IDs zu vertiefen und falsche Vorstellungen direkt zu korrigieren.

Erweiterungen & Unterstützung

• Fordern Sie leistungsstärkere Schüler auf, eine HTML-Seite mit responsivem Design zu erstellen und die Änderungen in DevTools zu testen.
• Geben Sie Schülern mit Schwierigkeiten ein Schritt-für-Schritt-Tutorial für die HTML-Editor-Aktivität oder lassen Sie sie zunächst einfache Tags wie <p> und <h1> verwenden.
• Vertiefen Sie mit einer Projektarbeit: Die Schüler erstellen eine einfache Webseite mit mehreren Unterseiten und analysieren die HTTP-Header aller Anfragen im Netzwerk-Tab der DevTools.

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.