HTML: Die Struktur des WebsAktivitäten & Unterrichtsstrategien
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.
Lernziele
- 1Erklären Sie die Funktion von HTML-Tags zur Strukturierung von Webinhalten mithilfe von Beispielen.
- 2Konstruieren Sie eine einfache HTML-Seite mit mindestens drei Überschriften unterschiedlicher Ebenen und zwei Textabsätzen.
- 3Analysieren Sie die semantische Korrektheit einer gegebenen HTML-Struktur und identifizieren Sie Verbesserungsmöglichkeiten.
- 4Identifizieren Sie die Hauptbestandteile einer HTML-Seite (<html>, <head>, <body>) und beschreiben Sie deren Zweck.
Möchten Sie einen vollständigen Unterrichtsentwurf mit diesen Lernzielen? Mission erstellen →
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.
Vorbereitung & Details
Erklären Sie die Funktion von HTML-Tags zur Strukturierung von Webinhalten.
Moderationstipp: Fordern Sie Paare auf, ihre erste Seite ohne Hilfe zu bauen, aber geben Sie bei Bedarf gezielte Hinweise, statt die Lösung vorzugeben.
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
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.
Vorbereitung & Details
Konstruieren Sie eine einfache HTML-Seite mit Überschriften und Absätzen.
Moderationstipp: Stellen Sie sicher, dass alle Stationen konkrete Beispiele mit sichtbaren Effekten bieten, z.B. wie sich <h1> und <h2> im Browser auswirken.
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
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.
Vorbereitung & Details
Analysieren Sie die Bedeutung einer semantisch korrekten HTML-Struktur.
Moderationstipp: Legen Sie für das Gruppenprojekt klare Kriterien fest, z.B. 'Mindestens eine Überschrift, zwei Absätze und ein korrekt verschachtelter Tag'.
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
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.
Vorbereitung & Details
Erklären Sie die Funktion von HTML-Tags zur Strukturierung von Webinhalten.
Moderationstipp: Geben Sie bei der individuellen Startseite konkrete Vorgaben wie 'Nutze mindestens drei verschiedene Tags und kommentiere deine Struktur'.
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
Dieses Thema unterrichten
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.
Was Sie erwartet
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.
Diese Aktivitäten sind ein Ausgangspunkt. Die vollständige Mission ist das Erlebnis.
- Vollständiges Moderationsskript mit Lehrkraft-Dialogen
- Druckfertige Schülermaterialien, bereit für den Unterricht
- Differenzierungsstrategien für jeden Lerntyp
Vorsicht vor diesen Fehlvorstellungen
Häufige FehlvorstellungWährend der Paararbeit 'Erste HTML-Seite bauen' denken einige Schüler, HTML diene nur dem Design von Webseiten.
Was Sie stattdessen lehren sollten
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.
Häufige FehlvorstellungWährend der Stationenrotation 'Tags erkunden' glauben Schüler, alle Tags benötigten Attribute wie style oder class.
Was Sie stattdessen lehren sollten
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.
Häufige FehlvorstellungWährend des Gruppenprojekts 'Webseite analysieren' ordnen Schüler die Reihenfolge von Tags beliebig an.
Was Sie stattdessen lehren sollten
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>.
Ideen zur Lernstandserhebung
Nach der Paararbeit 'Erste HTML-Seite bauen' gibt jeder Schüler ein Kärtchen mit einem HTML-Tag ab. Auf der Rückseite notieren sie eine kurze Erklärung und ein Beispiel für dessen Anwendung.
Während der Stationenrotation 'Tags erkunden' zeigen Sie eine absichtlich fehlerhafte HTML-Struktur auf dem Beamer. Die Schüler identifizieren den Fehler und korrigieren ihn in Partnerarbeit.
Nach dem Gruppenprojekt 'Webseite analysieren' tauschen die Schüler ihre analysierten Webseiten mit einem Partner aus. Sie prüfen gegenseitig die Struktur und geben Feedback zu semantischer Korrektheit und Verschachtelung.
Erweiterungen & Unterstützung
- Challenge: Erweitere die persönliche Startseite um eine ungeordnete Liste (<ul>) und ein Bild mit korrektem Pfadangabe. Erkläre in einem kurzen Kommentar, warum diese Tags semantisch sinnvoll sind.
- Scaffolding: Gib Schülern, die unsicher sind, eine Vorlage mit Lücken, die sie mit passenden Tags füllen müssen. Besprich die Lösung im Plenum.
- Deeper: Untersuche mit den Schülern, wie sich die HTML-Struktur auf die Barrierefreiheit auswirkt (z.B. <header>, <nav>). Entwickelt gemeinsam eine Checkliste für semantische Tags.
Schlüsselvokabular
| HTML-Tag | Ein Befehl in HTML, der dem Webbrowser Anweisungen zur Darstellung von Inhalten gibt, z. B. <p> für einen Absatz. |
| Überschriften-Tags | HTML-Tags (<h1> bis <h6>), die zur Strukturierung von Inhalten nach Wichtigkeit dienen, wobei <h1> die wichtigste ist. |
| Absatz-Tag | Das <p>-Tag in HTML, das dazu dient, einen Textblock als separaten Absatz zu kennzeichnen. |
| Semantik | Die Bedeutung von HTML-Elementen, die Browsern und Suchmaschinen hilft, den Inhalt einer Webseite korrekt zu interpretieren. |
Vorgeschlagene Methoden
Planungsvorlagen für Digitale Welten Gestalten: Informatik
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
Bereit, HTML: Die Struktur des Webs zu unterrichten?
Erstellen Sie eine vollständige Mission mit allem, was Sie brauchen
Mission erstellen