HTML: Die Struktur des Webs
Die Schülerinnen und Schüler lernen die grundlegende Syntax von HTML und erstellen einfache Webseiten mit Text und Überschriften.
Über dieses Thema
HTML bildet die grundlegende Struktur des Webs. Schülerinnen und Schüler in Klasse 8 lernen in diesem Thema die Syntax von HTML-Tags wie <h1> für Überschriften, <p> für Absätze und <html>, <head>, <body> für die Seitenstruktur. Sie erstellen einfache Webseiten, die Textinhalte klar gliedern. Dies entspricht den KMK-Standards zur Darstellung und Interpretation sowie zum Implementieren von Inhalten in der Sekundarstufe I.
Die Arbeit mit HTML fördert das Verständnis semantischer Strukturen, die Browsern helfen, Inhalte richtig zu interpretieren, z. B. für Screenreader oder Suchmaschinen. Schüler analysieren, warum <header> oder <main> sinnvoller sind als bloße <div>-Elemente. Sie üben, Webseiten zu konstruieren und zu interpretieren, was Problemlösungsfähigkeiten stärkt und den Einstieg in Web-Technologien ebnet.
Dieses Thema eignet sich hervorragend für aktive Lernmethoden, da Schüler durch direktes Codieren und sofortiges Browsen ihrer Ergebnisse abstrakte Syntax greifbar machen. Experimentieren mit Tags in Echtzeit vertieft das Verständnis und motiviert, da Erfolge sichtbar sind.
Leitfragen
- Erklären Sie die Funktion von HTML-Tags zur Strukturierung von Webinhalten.
- Konstruieren Sie eine einfache HTML-Seite mit Überschriften und Absätzen.
- Analysieren Sie die Bedeutung einer semantisch korrekten HTML-Struktur.
Lernziele
- Erklären Sie die Funktion von HTML-Tags zur Strukturierung von Webinhalten mithilfe von Beispielen.
- Konstruieren Sie eine einfache HTML-Seite mit mindestens drei Überschriften unterschiedlicher Ebenen und zwei Textabsätzen.
- Analysieren Sie die semantische Korrektheit einer gegebenen HTML-Struktur und identifizieren Sie Verbesserungsmöglichkeiten.
- Identifizieren Sie die Hauptbestandteile einer HTML-Seite (<html>, <head>, <body>) und beschreiben Sie deren Zweck.
Bevor es losgeht
Warum: Schüler müssen grundlegende Kenntnisse im Umgang mit einem Computer haben, um Texteditoren und Webbrowser bedienen zu können.
Warum: Das Speichern und Auffinden von HTML-Dateien erfordert grundlegende Kenntnisse im Umgang mit Ordnern und Dateien.
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. |
Vorsicht vor diesen Fehlvorstellungen
Häufige FehlvorstellungHTML dient nur dem Design von Webseiten.
Was Sie stattdessen lehren sollten
HTML strukturiert Inhalte semantisch, CSS übernimmt das Styling. Aktive Übungen wie das Ändern von Tags ohne visuelle Effekte zeigen dies klar. Paardiskussionen helfen, den Unterschied zu verinnerlichen.
Häufige FehlvorstellungAlle Tags brauchen Attribute wie style oder class.
Was Sie stattdessen lehren sollten
Viele Tags funktionieren ohne Attribute, semantische Tags wie <header> wirken allein. Hands-on-Stationen, wo Schüler Code ohne Attribute testen, klären das. Gruppenfeedback verstärkt korrekte Modelle.
Häufige FehlvorstellungDie Reihenfolge von Tags ist egal, solange der Text stimmt.
Was Sie stattdessen lehren sollten
Browser interpretieren nur korrekte Verschachtelung. Schüler entdecken Fehler durch Live-Tests und Korrekturen in Gruppen, was die Wichtigkeit der Syntax betont.
Ideen für aktives Lernen
Alle Aktivitäten ansehenPaararbeit: 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.
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.
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.
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.
Bezüge zur Lebenswelt
- Webentwickler bei Unternehmen wie Zalando verwenden HTML täglich, um die Struktur von Produktseiten und Benutzeroberflächen zu definieren, damit Kunden Informationen leicht finden können.
- Journalisten und Redakteure nutzen HTML-Grundlagen, um Artikel auf Nachrichtenportalen wie Spiegel Online zu formatieren, indem sie Überschriften und Absätze korrekt setzen, um die Lesbarkeit zu verbessern.
Ideen zur Lernstandserhebung
Geben 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.
Zeigen 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?'
Die 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.
Häufig gestellte Fragen
Was sind die grundlegenden HTML-Tags für Struktur?
Wie erstelle ich eine einfache HTML-Seite?
Warum ist semantische HTML-Struktur wichtig?
Wie fördert aktives Lernen das Verständnis von HTML?
Planungsvorlagen für 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
Box-Modell und Layout mit CSS
Die Schülerinnen und Schüler verstehen das CSS Box-Modell und nutzen es für einfache Layouts.
2 methodologies