HTML: Die Struktur des Webs
Einführung in die Auszeichnungssprache HTML zur Strukturierung von Webinhalten (Überschriften, Absätze, Listen, Links, Bilder).
Über dieses Thema
HTML bildet die grundlegende Struktur von Webinhalten durch Tags wie Überschriften (<h1> bis <h6>), Absätze (<p>), Listen (<ul>, <ol>), Links (<a>) und Bilder (<img>). Schüler in Klasse 7 erlernen die Struktur eines HTML-Dokuments mit <!DOCTYPE html>, <html>, <head> und <body>. Sie verstehen, dass Tags semantische Bedeutung schaffen, etwa dass <h1> den wichtigsten Titel markiert, was Barrierefreiheit und Suchmaschinenoptimierung unterstützt. Praktische Übungen zeigen, wie korrekte Struktur Inhalte lesbar und zugänglich macht.
Im Curriculum 'Digitale Welten verstehen und gestalten' entspricht dies den KMK-Standards für Sekundarstufe I: Modellieren und Implementieren sowie Produzieren und Präsentieren. Schüler entwerfen einfache Webseiten, analysieren semantische Elemente und präsentieren ihre Arbeiten. Dies fördert digitales Denken, Problemlösung und kollaborative Gestaltung, die nahtlos zu Themen wie CSS oder responsivem Design überleiten.
Active Learning ist ideal, weil Schüler durch schnelles Codieren, Browsen und Iterieren Tags hautnah erleben. Paararbeit beim Debugging stärkt Verständnis und Motivation, da Fehler sichtbar und korrigierbar werden. Solche Ansätze machen abstrakte Syntax greifbar und verbinden Theorie mit sofortigem Erfolg.
Leitfragen
- Erkläre die grundlegende Struktur eines HTML-Dokuments und die Bedeutung von Tags.
- Entwerfe eine einfache Webseite mit Überschriften, Absätzen und Links.
- Analysiere, wie HTML-Elemente die semantische Bedeutung von Webinhalten definieren.
Lernziele
- Erkläre die Funktion von HTML-Tags zur Strukturierung von Webinhalten, indem du Beispiele für Überschriften, Absätze und Listen nennst.
- Entwerfe eine einfache HTML-Struktur für eine Webseite, die mindestens drei verschiedene Inhaltstypen (z. B. Überschrift, Absatz, Link) korrekt einbindet.
- Analysiere gegebene HTML-Code-Schnipsel und identifiziere die semantische Bedeutung jedes Tags im Hinblick auf die Darstellung von Informationen.
- Demonstriere die Einbindung eines Bildes und eines Hyperlinks in ein HTML-Dokument unter korrekter Verwendung der jeweiligen Tags und Attribute.
Bevor es losgeht
Warum: Schüler müssen grundlegende Kenntnisse im Umgang mit einem Computer und Texteditoren haben, um HTML-Dateien erstellen und speichern zu können.
Warum: Das Verständnis von Dateipfaden ist notwendig, um Bilder und Links korrekt in HTML-Dokumenten einzubinden.
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. |
Vorsicht vor diesen Fehlvorstellungen
Häufige FehlvorstellungHTML dient nur dem Design mit Farben und Layout.
Was Sie stattdessen lehren sollten
HTML strukturiert Inhalte semantisch, Design übernimmt CSS. Active Learning mit Experimenten zeigt: Tags ohne CSS erzeugen klare Hierarchien. Paararbeit hilft, Unterschiede durch Vergleichen von Code und Browseransicht zu entdecken.
Häufige FehlvorstellungTags sind willkürlich und können frei erfunden werden.
Was Sie stattdessen lehren sollten
Tags folgen festen Standards für Kompatibilität. Durch kollaboratives Codieren und Testen in Gruppen lernen Schüler, dass falsche Tags fehlschlagen. Diskussionen klären semantische Regeln und fördern genaues Nachschlagen.
Häufige FehlvorstellungEine Webseite braucht viele Tags, um wirkungsvoll zu sein.
Was Sie stattdessen lehren sollten
Wenige, präzise Tags reichen für gute Struktur. Hands-on-Bauen simpler Seiten in Stationen zeigt, wie Minimalismus Klarheit schafft. Schüler iterieren und verfeinern, was Überladung vermeidet.
Ideen für aktives Lernen
Alle Aktivitäten ansehenPaararbeit: 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.
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.
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.
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.
Bezüge zur Lebenswelt
- Webentwickler bei Agenturen wie 'Pixel & Code' in Berlin nutzen HTML täglich, um die Grundstruktur für Websites von Kunden aus Handel und Kultur zu erstellen, bevor sie mit CSS und JavaScript die Gestaltung verfeinern.
- Journalisten und Content Manager von Nachrichtenportalen wie 'Spiegel Online' verwenden HTML-Editoren, um Artikel zu formatieren, indem sie Überschriften, Absätze und Bilder korrekt strukturieren, damit die Inhalte gut lesbar und auffindbar sind.
Ideen zur Lernstandserhebung
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.
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.
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.
Häufig gestellte Fragen
Was ist die grundlegende Struktur eines HTML-Dokuments?
Wie kann aktives Lernen beim Verständnis von HTML helfen?
Welche Tools eignen sich für HTML im Unterricht?
Warum ist semantische HTML-Struktur wichtig?
Planungsvorlagen für Informatik
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