HTML: Die Struktur des WebsAktivitäten & Unterrichtsstrategien
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.
Lernziele
- 1Erkläre die Funktion von HTML-Tags zur Strukturierung von Webinhalten, indem du Beispiele für Überschriften, Absätze und Listen nennst.
- 2Entwerfe eine einfache HTML-Struktur für eine Webseite, die mindestens drei verschiedene Inhaltstypen (z. B. Überschrift, Absatz, Link) korrekt einbindet.
- 3Analysiere gegebene HTML-Code-Schnipsel und identifiziere die semantische Bedeutung jedes Tags im Hinblick auf die Darstellung von Informationen.
- 4Demonstriere die Einbindung eines Bildes und eines Hyperlinks in ein HTML-Dokument unter korrekter Verwendung der jeweiligen Tags und Attribute.
Möchten Sie einen vollständigen Unterrichtsentwurf mit diesen Lernzielen? Mission erstellen →
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.
Vorbereitung & Details
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.
Setup: Klassenzimmer mit flexibler Bestuhlung für Gruppenaktivitäten
Materials: Vorbereitungsmaterial (Video/Text mit Leitfragen), Lernstandskontrolle oder Entrance Ticket, Anwendungsaufgaben für die Präsenzphase, Reflexionsjournal
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.
Vorbereitung & Details
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.
Setup: Klassenzimmer mit flexibler Bestuhlung für Gruppenaktivitäten
Materials: Vorbereitungsmaterial (Video/Text mit Leitfragen), Lernstandskontrolle oder Entrance Ticket, Anwendungsaufgaben für die Präsenzphase, Reflexionsjournal
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.
Vorbereitung & Details
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.
Setup: Klassenzimmer mit flexibler Bestuhlung für Gruppenaktivitäten
Materials: Vorbereitungsmaterial (Video/Text mit Leitfragen), Lernstandskontrolle oder Entrance Ticket, Anwendungsaufgaben für die Präsenzphase, Reflexionsjournal
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.
Vorbereitung & Details
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.
Setup: Klassenzimmer mit flexibler Bestuhlung für Gruppenaktivitäten
Materials: Vorbereitungsmaterial (Video/Text mit Leitfragen), Lernstandskontrolle oder Entrance Ticket, Anwendungsaufgaben für die Präsenzphase, Reflexionsjournal
Dieses Thema unterrichten
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.
Was Sie erwartet
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.
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' hören einige Schüler: 'HTML dient nur dem Design mit Farben und Layout.'
Was Sie stattdessen lehren sollten
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.
Häufige FehlvorstellungWährend der Stationenrotation 'HTML-Tags üben' meinen einige Schüler: 'Tags sind willkürlich und können frei erfunden werden.'
Was Sie stattdessen lehren sollten
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.
Häufige FehlvorstellungWährend des Klassenprojekts 'Gemeinsame Webseite' glauben manche Schüler: 'Eine Webseite braucht viele Tags, um wirkungsvoll zu sein.'
Was Sie stattdessen lehren sollten
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.
Ideen zur Lernstandserhebung
Nach der Stationenrotation 'HTML-Tags üben' erhalten die Schüler einen Zettel mit drei leeren Zeilen. Sie schreiben: 1. Den HTML-Tag für eine Hauptüberschrift, 2. In einem Satz, was ein Attribut macht, 3. Ein Beispiel für eine Liste in HTML.
Während der Paararbeit 'Erste HTML-Seite bauen' fragst du gezielt nach: 'Warum habt ihr euch für dieses Tag entschieden? Was passiert, wenn ihr es weglasst oder ersetzt?' Sammle die Antworten und fasse die Bedeutung der Tags für die Struktur zusammen.
Nach dem Klassenprojekt 'Gemeinsame Webseite' tauschen die Schüler 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 und notieren eine Verbesserung für den Partner.
Erweiterungen & Unterstützung
- Fordere schnelle Schüler auf, eine zweite Mini-Seite mit Listen und Bildern zu erstellen und beide Seiten durch Links zu verbinden.
- Biete Schülern, die unsicher sind, eine Vorlage mit Platzhaltern für die wichtigsten Tags an, die sie nur noch ausfüllen müssen.
- Lass interessierte Schüler die Struktur einer echten Webseite (z.B. einer Schulhomepage) analysieren und die semantischen Tags dokumentieren.
Schlüsselvokabular
| Tag | Ein Befehl in HTML, der von spitzen Klammern umschlossen ist und dem Browser Anweisungen zur Darstellung von Inhalten gibt, z. B. <p> für einen Absatz. |
| Element | Besteht aus einem öffnenden Tag, einem schließenden Tag und dem Inhalt dazwischen, z. B. <p>Dies ist ein Absatz.</p>. |
| Attribut | Zusätzliche Informationen, die einem Tag hinzugefügt werden, um sein Verhalten oder seine Darstellung zu modifizieren, z. B. src="bild.jpg" bei einem Bild-Tag. |
| Semantik | Die Bedeutung, die ein HTML-Tag dem Inhalt gibt, z. B. <h1> kennzeichnet eine Hauptüberschrift und signalisiert deren Wichtigkeit. |
| Struktur | Die Art und Weise, wie die verschiedenen Elemente einer Webseite angeordnet und miteinander verbunden sind, um eine logische Gliederung zu schaffen. |
Vorgeschlagene Methoden
Planungsvorlagen für Digitale Welten verstehen und gestalten
Mehr in Webdesign: Meine erste Webseite
CSS: Das Styling des Webs
Einführung in Cascading Style Sheets (CSS) zur Gestaltung von Webseiten (Farben, Schriftarten, Layout).
3 methodologies
Bilder und Medien einbinden
Die Schülerinnen und Schüler lernen, Bilder, Audio- und Videodateien in Webseiten einzubinden und deren Eigenschaften zu steuern.
3 methodologies
Hyperlinks und Navigation
Erstellung von internen und externen Hyperlinks zur Navigation innerhalb und zwischen Webseiten.
3 methodologies
Projekt: Meine persönliche Webseite
Anwendung der gelernten HTML- und CSS-Kenntnisse zur Erstellung einer eigenen, einfachen persönlichen Webseite.
3 methodologies
Bereit, HTML: Die Struktur des Webs zu unterrichten?
Erstellen Sie eine vollständige Mission mit allem, was Sie brauchen
Mission erstellen