Informatik · Klasse 11

Ideen für aktives Lernen

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.

KMK BildungsstandardsKMK: Sekundarstufe II - ImplementierenKMK: Sekundarstufe II - Darstellen und Interpretieren
20–45 Min.Partnerarbeit → Ganze Klasse4 Aktivitäten

Aktivität 01

Planspiel35 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.

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

ModerationstippLassen 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.

Worauf zu achten istDie 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.

AnwendenAnalysierenBewertenErschaffenSozialbewusstseinEntscheidungsfähigkeit
Komplette Unterrichtsstunde erstellen

Aktivität 02

Projektbasiertes Lernen45 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.

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

ModerationstippFordern 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.

Worauf zu achten istZeigen 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.

AnwendenAnalysierenBewertenErschaffenSelbststeuerungBeziehungsfähigkeitEntscheidungsfähigkeit
Komplette Unterrichtsstunde erstellen

Aktivität 03

Projektbasiertes Lernen25 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.

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

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

Worauf zu achten istStellen 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.

AnwendenAnalysierenBewertenErschaffenSelbststeuerungBeziehungsfähigkeitEntscheidungsfähigkeit
Komplette Unterrichtsstunde erstellen

Aktivität 04

Fishbowl-Diskussion20 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.

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

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

Worauf zu achten istDie 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.

AnalysierenBewertenSozialbewusstseinSelbstwahrnehmung
Komplette Unterrichtsstunde erstellen

Vorlagen

Vorlagen, die zu diesen Informatik-Aktivitäten passen

Nutzen, bearbeiten, drucken oder teilen.

Einige Hinweise zum Unterrichten dieser Einheit

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.

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

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

    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.

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

    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.

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

    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.

In dieser Übersicht verwendete Methoden

Mehr in Rechnernetze und Internet-Technologien

Grundlagen der Netzwerkkommunikation

Die Schülerinnen und Schüler lernen grundlegende Konzepte wie IP-Adressen, MAC-Adressen und Ports kennen.

2 methodologies

Schichtenmodelle und Protokolle

Analyse der Datenübertragung anhand des ISO/OSI- oder TCP/IP-Referenzmodells.

2 methodologies

TCP/IP-Protokollfamilie

Vertiefung der Funktionsweise von TCP, UDP und IP als Kernprotokolle des Internets.

2 methodologies

Client-Server-Prinzip

Untersuchung der Rollenverteilung in Netzwerkdiensten wie Web oder E-Mail.

2 methodologies

Sicherheit in Netzwerken: Firewalls und Proxys

Einführung in Schutzmechanismen gegen unerwünschten Netzwerkzugriff.

2 methodologies