Informatik · Klasse 7

Ideen für aktives Lernen

HTML: Die Struktur des Webs

Aktive Lernformen eignen sich hier besonders, weil Schüler durch eigenes Erstellen und Ausprobieren die abstrakte Struktur von HTML schnell als sichtbares Ergebnis erleben. Das sofortige Sichtbarmachen von Code in einem Browser macht das Thema greifbar und fördert das Verständnis für semantische Bedeutung.

• KMK Bildungsstandards
• KMK: Sekundarstufe I - Modellieren und Implementieren
• KMK: Sekundarstufe I - Produzieren und Präsentieren

• 25–50 Min.
• Partnerarbeit → Ganze Klasse
• 4 Aktivitäten

Aktivität 01

• Flipped Classroom
• 35 Min. · Partnerarbeit

Paararbeit: Erste HTML-Seite bauen

Paare öffnen einen Texteditor wie VS Code oder Notepad++. Sie erstellen eine Struktur mit <h1>, <p>, <a> und <img> zu einem Thema wie 'Mein Hobby'. Speichern als .html und im Browser öffnen. Gemeinsam Fehler beheben und erweitern.

Erkläre die grundlegende Struktur eines HTML-Dokuments und die Bedeutung von Tags.

Moderationstipp

Fordere die Paare während der ersten HTML-Seite auf, ihren Code gegenseitig zu erklären und Unterschiede zwischen den Ergebnissen zu diskutieren.

Worauf zu achten ist

Gib den Schülern einen Zettel mit drei leeren Zeilen. Frage: 1. Schreibe den HTML-Tag für eine Hauptüberschrift. 2. Erkläre in einem Satz, was ein Attribut macht. 3. Nenne ein Beispiel für eine Liste in HTML.

• Verstehen
• Anwenden
• Analysieren
• Selbststeuerung
• Selbstwahrnehmung

Aktivität 02

• Flipped Classroom
• 45 Min. · Kleingruppen

Stationenrotation: HTML-Tags üben

Richten Sie fünf Stationen ein: Überschriften, Absätze, Listen, Links, Bilder. Gruppen rotieren alle 7 Minuten, coden Beispiele und notieren Beobachtungen. Abschließend teilen sie Ergebnisse im Plenum.

Entwerfe eine einfache Webseite mit Überschriften, Absätzen und Links.

Moderationstipp

Stelle an jeder Station ein Beispiel mit falschen Tags bereit und lass die Schüler gemeinsam die Fehler korrigieren.

Worauf zu achten ist

Zeige einen kurzen HTML-Code-Schnipsel (z. B. ein <p>-Tag mit Text). Frage die Schüler, ob sie die Bedeutung des Tags erklären können und wie sie einen Link hinzufügen würden. Sammle Antworten mündlich oder per Handzeichen.

• Verstehen
• Anwenden
• Analysieren
• Selbststeuerung
• Selbstwahrnehmung

Aktivität 03

• Flipped Classroom
• 50 Min. · Kleingruppen

Klassenprojekt: Gemeinsame Webseite

Die Klasse plant eine Gruppenseite über die Schule. Jede kleine Gruppe baut einen Abschnitt mit spezifischen Tags. Integrieren im Editor und gemeinsam im Browser testen. Präsentation mit Verbesserungsvorschlägen.

Analysiere, wie HTML-Elemente die semantische Bedeutung von Webinhalten definieren.

Moderationstipp

Gib beim Klassenprojekt klare Rollen vor, z.B. einen Verantwortlichen für Struktur, einen für Inhalte und einen für Links.

Worauf zu achten ist

Schüler erstellen eine Mini-Webseite mit Titel, Absatz und einem Link. Sie tauschen ihre HTML-Dateien aus und prüfen gegenseitig: Sind alle Tags korrekt geschlossen? Ist der Link funktionsfähig? Gibt es eine Überschrift? Beide geben sich kurz Feedback.

• Verstehen
• Anwenden
• Analysieren
• Selbststeuerung
• Selbstwahrnehmung

Aktivität 04

• Flipped Classroom
• 25 Min. · Einzelarbeit

Individuelle Analyse: Webseite zerlegen

Schüler wählen eine einfache Webseite, speichern den Quellcode (Rechtsklick: Quelltext anzeigen) und markieren Tags farbig. Notieren, welche Struktur semantisch wirkt, und bauen eine Kopie nach.

Erkläre die grundlegende Struktur eines HTML-Dokuments und die Bedeutung von Tags.

Moderationstipp

Lass Schüler bei der Analyse fremder Webseiten zunächst nur die semantischen Tags benennen, bevor sie den Code betrachten.

Worauf zu achten ist

Gib den Schülern einen Zettel mit drei leeren Zeilen. Frage: 1. Schreibe den HTML-Tag für eine Hauptüberschrift. 2. Erkläre in einem Satz, was ein Attribut macht. 3. Nenne ein Beispiel für eine Liste in HTML.

• Verstehen
• Anwenden
• Analysieren
• Selbststeuerung
• Selbstwahrnehmung

Einige Hinweise zum Unterrichten dieser Einheit

Erfahrungsgemäß gelingt das Unterrichten dieser Grundlagen am besten durch schrittweise Steigerung: Beginne mit einfachen Tags in einer klaren Umgebung und gehe erst später zu komplexeren Strukturen über. Vermeide zu frühe Diskussionen über Design-Aspekte wie CSS, da diese die Konzentration auf die Struktur erschweren. Nutze Visualisierungen wie farbige Markierungen im Code oder Screenshots von Browser-Ausgaben, um die Bedeutung von Tags zu verdeutlichen. Forschung zeigt, dass Schüler durch kollaboratives Arbeiten und sofortiges Feedback schneller Fortschritte machen.

Erfolgreiches Lernen zeigt sich, wenn Schüler HTML-Tags korrekt anwenden und die Struktur eines Dokuments mit <!DOCTYPE html>, <html>, <head> und <body> selbstständig aufbauen. Sie erkennen, dass Tags Inhalte gliedern und nicht gestalten, und können einfache Webseiten mit Überschriften, Absätzen und Links erstellen.

---

Vorsicht vor diesen Fehlvorstellungen

• Während der Paararbeit 'Erste HTML-Seite bauen' hören einige Schüler: 'HTML dient nur dem Design mit Farben und Layout.'

  Gib den Paaren den Auftrag, in ihrem Code bewusst auf alle Farb- und Layoutangaben zu verzichten. Lass sie anschließend vergleichen, wie klar ihre Inhalte trotz fehlendem Design strukturiert sind. Diskutiere, warum semantische Tags wie <h1> auch ohne CSS eine Hierarchie schaffen.

• Während der Stationenrotation 'HTML-Tags üben' meinen einige Schüler: 'Tags sind willkürlich und können frei erfunden werden.'

  Platziere an einer Station absichtlich falsche Tags wie <Heading> oder <para>. Lass die Schüler den Code testen und gemeinsam herausfinden, warum der Browser diese nicht erkennt. Nutze die Gelegenheit, um auf die Standards des W3C hinzuweisen und wie man korrekte Tags nachschlägt.

• Während des Klassenprojekts 'Gemeinsame Webseite' glauben manche Schüler: 'Eine Webseite braucht viele Tags, um wirkungsvoll zu sein.'

  Fordere die Schüler auf, in ihrem Projekt zunächst nur die unbedingt notwendigen Tags zu verwenden und die Seite bewusst minimal zu halten. Lass sie anschließend diskutieren, ob die Seite trotz weniger Tags verständlich bleibt. Hebe hervor, wie Überladung die Lesbarkeit beeinträchtigt.

---

In dieser Übersicht verwendete Methoden

• Flipped Classroom