Informatik · Klasse 8

Ideen für aktives Lernen

HTML: Die Struktur des Webs

Aktives Bauen und Ausprobieren hilft Schülern, die abstrakte Struktur von HTML zu verinnerlichen. Durch das direkte Erstellen und Testen von Tags begreifen sie, wie Inhalte sinnvoll organisiert werden, statt nur Regeln zu memorieren.

KMK BildungsstandardsKMK: Sekundarstufe I - Darstellen und InterpretierenKMK: Sekundarstufe I - Implementieren
25–50 Min.Partnerarbeit → Ganze Klasse4 Aktivitäten

Aktivität 01

Projektbasiertes Lernen30 Min. · Partnerarbeit

Paararbeit: Erste HTML-Seite bauen

Paare öffnen einen Texteditor und erstellen eine HTML-Datei mit <html>, <head> und <body>. Sie fügen Überschriften (<h1> bis <h3>) und Absätze (<p>) ein, speichern als .html und öffnen im Browser. Nach 15 Minuten präsentieren sie ihre Seite.

Erklären Sie die Funktion von HTML-Tags zur Strukturierung von Webinhalten.

ModerationstippFordern Sie Paare auf, ihre erste Seite ohne Hilfe zu bauen, aber geben Sie bei Bedarf gezielte Hinweise, statt die Lösung vorzugeben.

Worauf zu achten istGeben Sie jedem Schüler ein Kärtchen mit einem HTML-Tag (z. B. <h1>, <p>, <body>). Die Schüler schreiben auf die Rückseite eine kurze Erklärung, wofür das Tag verwendet wird, und ein Beispiel für dessen Anwendung auf einer Webseite.

AnwendenAnalysierenBewertenErschaffenSelbststeuerungBeziehungsfähigkeitEntscheidungsfähigkeit
Komplette Unterrichtsstunde erstellen

Aktivität 02

Projektbasiertes Lernen45 Min. · Kleingruppen

Stationenrotation: Tags erkunden

Richten Sie vier Stationen ein: Überschriften (verschiedene <h>-Tags testen), Absätze (Text mit <p> gliedern), Listen (<ul>, <ol>) und Links (<a>). Gruppen rotieren alle 10 Minuten, notieren Beobachtungen und ändern Code live.

Konstruieren Sie eine einfache HTML-Seite mit Überschriften und Absätzen.

ModerationstippStellen Sie sicher, dass alle Stationen konkrete Beispiele mit sichtbaren Effekten bieten, z.B. wie sich <h1> und <h2> im Browser auswirken.

Worauf zu achten istZeigen Sie eine einfache HTML-Struktur auf dem Beamer, die absichtlich Fehler enthält (z. B. fehlendes schließendes Tag, falsche Reihenfolge). Fragen Sie die Schüler: 'Welcher Fehler ist hier zu sehen und wie korrigieren wir ihn?'

AnwendenAnalysierenBewertenErschaffenSelbststeuerungBeziehungsfähigkeitEntscheidungsfähigkeit
Komplette Unterrichtsstunde erstellen

Aktivität 03

Projektbasiertes Lernen50 Min. · Kleingruppen

Gruppenprojekt: Webseite analysieren

Gruppen laden eine einfache Webseite herunter, identifizieren Tags mit Browser-Entwicklertools und verbessern die semantische Struktur. Sie erstellen eine überarbeitete Version und erklären Änderungen in einer Präsentation.

Analysieren Sie die Bedeutung einer semantisch korrekten HTML-Struktur.

ModerationstippLegen Sie für das Gruppenprojekt klare Kriterien fest, z.B. 'Mindestens eine Überschrift, zwei Absätze und ein korrekt verschachtelter Tag'.

Worauf zu achten istDie Schüler erstellen eine einfache HTML-Seite mit zwei Absätzen und einer Überschrift. Anschließend tauschen sie ihre Dateien mit einem Partner aus. Jeder prüft, ob die Seite korrekt strukturiert ist und ob die Tags semantisch sinnvoll eingesetzt wurden. Sie geben sich gegenseitig ein kurzes Feedback.

AnwendenAnalysierenBewertenErschaffenSelbststeuerungBeziehungsfähigkeitEntscheidungsfähigkeit
Komplette Unterrichtsstunde erstellen

Aktivität 04

Projektbasiertes Lernen25 Min. · Einzelarbeit

Individuell: Persönliche Startseite

Jede Schülerin und jeder Schüler baut eine eigene HTML-Seite über Hobbys mit mindestens drei Überschriften und zwei Absätzen. Sie testen im Browser und tauschen per E-Mail aus.

Erklären Sie die Funktion von HTML-Tags zur Strukturierung von Webinhalten.

ModerationstippGeben Sie bei der individuellen Startseite konkrete Vorgaben wie 'Nutze mindestens drei verschiedene Tags und kommentiere deine Struktur'.

Worauf zu achten istGeben Sie jedem Schüler ein Kärtchen mit einem HTML-Tag (z. B. <h1>, <p>, <body>). Die Schüler schreiben auf die Rückseite eine kurze Erklärung, wofür das Tag verwendet wird, und ein Beispiel für dessen Anwendung auf einer Webseite.

AnwendenAnalysierenBewertenErschaffenSelbststeuerungBeziehungsfähigkeitEntscheidungsfähigkeit
Komplette Unterrichtsstunde erstellen

Vorlagen

Vorlagen, die zu diesen Informatik-Aktivitäten passen

Nutzen, bearbeiten, drucken oder teilen.

Einige Hinweise zum Unterrichten dieser Einheit

Lehrkräfte sollten HTML als Werkzeug vermitteln, nicht als Theorie. Nutzen Sie Live-Demos, um zu zeigen, wie sich falsche Tags auswirken, und fordern Sie Schüler auf, Fehler selbst zu korrigieren. Vermeiden Sie Frontalunterricht zu Tags – stattdessen steht das praktische Ausprobieren im Mittelpunkt.

Am Ende sollen die Schüler HTML-Tags sicher anwenden, die Grundstruktur einer Webseite verstehen und semantisch korrekte Inhalte gliedern können. Sie erkennen Fehler in der Verschachtelung und begründen die Verwendung von Tags.

Vorsicht vor diesen Fehlvorstellungen

  • Während der Paararbeit 'Erste HTML-Seite bauen' denken einige Schüler, HTML diene nur dem Design von Webseiten.

    Fordern Sie die Paare auf, die Tags ohne visuelle Veränderungen zu testen, z.B. durch das Ersetzen von <h1> durch <p>. Diskutieren Sie im Anschluss, warum HTML Inhalte strukturiert und nicht gestaltet.

  • Während der Stationenrotation 'Tags erkunden' glauben Schüler, alle Tags benötigten Attribute wie style oder class.

    Legen Sie Stationen an, bei denen Schüler Tags ohne Attribute testen, z.B. <header> oder <footer>. Besprechen Sie im Plenum, warum semantische Tags auch ohne Attribute funktionieren und wann Attribute sinnvoll sind.

  • Während des Gruppenprojekts 'Webseite analysieren' ordnen Schüler die Reihenfolge von Tags beliebig an.

    Fordern Sie die Gruppen auf, ihre analysierte Webseite live im Browser zu testen und Fehler in der Verschachtelung zu korrigieren. Geben Sie Feedback zu korrekten Hierarchien wie <body><h1></h1><p></p></body>.

In dieser Übersicht verwendete Methoden

Mehr in Web-Technologien: Eigene Inhalte gestalten

Das Internet und das World Wide Web

Die Schülerinnen und Schüler unterscheiden zwischen dem Internet als Infrastruktur und dem World Wide Web als Dienst.

2 methodologies

Bilder und Links in HTML

Die Schülerinnen und Schüler integrieren Bilder und Hyperlinks in ihre HTML-Dokumente.

2 methodologies

Listen und Tabellen in HTML

Die Schülerinnen und Schüler strukturieren Informationen mit geordneten und ungeordneten Listen sowie einfachen Tabellen.

2 methodologies

Einführung in CSS: Styling für das Web

Die Schülerinnen und Schüler lernen die Grundlagen von CSS zur visuellen Gestaltung von HTML-Elementen kennen.

2 methodologies

CSS-Selektoren und Eigenschaften

Die Schülerinnen und Schüler wenden verschiedene CSS-Selektoren an und gestalten Elemente mit grundlegenden Eigenschaften.

2 methodologies