Informatik · Klasse 8 · Web-Technologien: Eigene Inhalte gestalten · 2. Halbjahr

Eigene Webseite gestalten und veröffentlichen

Die Schülerinnen und Schüler planen, gestalten und veröffentlichen eine einfache eigene Webseite mit HTML und CSS.

• KMK Bildungsstandards
• KMK: Sekundarstufe I - Implementieren
• KMK: Sekundarstufe I - Darstellen und Interpretieren
• KMK: Sekundarstufe I - Evaluieren und Reflektieren

Über dieses Thema

Die Schülerinnen und Schüler planen, gestalten und veröffentlichen in diesem Thema eine einfache eigene Webseite mit HTML und CSS. Sie wählen ein vorgegebenes Thema, entwerfen die Struktur mit HTML-Elementen wie Überschriften, Absätzen und Listen und gestalten das Aussehen mit CSS-Regeln für Farben, Schriftarten und Layouts. Dabei lernen sie, Inhalte logisch zu organisieren und grundlegende Prinzipien der Webentwicklung anzuwenden.

Dieses Thema knüpft direkt an die KMK-Standards der Sekundarstufe I an: Implementieren durch Codieren, Darstellen und Interpretieren der Webstruktur sowie Evaluieren und Reflektieren anhand von Kriterien wie Funktionalität, Ästhetik und Barrierefreiheit. Es fördert systematisches Denken, Problemlösen und kreative Gestaltung in den Web-Technologien der Einheit. Die Schüler evaluieren ihre Arbeit selbst und peer-basiert, was Reflexionskompetenzen stärkt.

Aktives Lernen eignet sich besonders gut, da abstrakte Code-Konzepte durch iterative Experimente und kollaborative Feedback-Runden greifbar werden. Praktische Codier-Sessions mit sofort sichtbaren Ergebnissen motivieren und vertiefen das Verständnis nachhaltig.

Leitfragen

1. Entwerfen Sie eine eigene Webseite zu einem vorgegebenen Thema.
2. Implementieren Sie die Webseite unter Berücksichtigung von Struktur und Design.
3. Evaluieren Sie die eigene Webseite hinsichtlich Funktionalität, Ästhetik und Barrierefreiheit.

Lernziele

• Entwerfen Sie die Struktur einer einfachen Webseite mit HTML-Elementen wie Überschriften, Absätzen und Listen für ein vorgegebenes Thema.
• Implementieren Sie grundlegende CSS-Regeln zur Gestaltung von Farben, Schriftarten und Layouts einer Webseite.
• Analysieren Sie die Funktionalität und Ästhetik einer selbst erstellten Webseite anhand vordefinierter Kriterien.
• Evaluieren Sie die Barrierefreiheit einer einfachen Webseite unter Berücksichtigung von Kontrasten und alternativen Texten.
• Erstellen Sie eine einfache, funktionale Webseite, die Inhalte logisch strukturiert und visuell ansprechend gestaltet ist.

Bevor es losgeht

Grundlagen der digitalen Informationsverarbeitung

Warum: Ein grundlegendes Verständnis von Daten, Informationen und deren Darstellung ist notwendig, um die Strukturierung von Webinhalten zu verstehen.

Dateiverwaltung und Ordnerstrukturen

Warum: Schüler müssen wissen, wie sie Dateien und Ordner organisieren, um ihre Webseitenprojekte strukturiert ablegen zu können.

Schlüsselvokabular

HTML (HyperText Markup Language)	Eine Standard-Auszeichnungssprache zur Erstellung von Webseiten. Sie definiert die Struktur und den Inhalt einer Webseite mithilfe von Tags.
CSS (Cascading Style Sheets)	Eine Stylesheet-Sprache zur Beschreibung des Aussehens und der Formatierung einer Webseite. Sie kontrolliert Farben, Schriftarten, Layout und mehr.
Tag	Ein Befehl in HTML, der von spitzen Klammern umschlossen ist (z.B. `<p>`). Tags definieren Elemente wie Absätze, Überschriften oder Links.
Selektor	Ein Muster in CSS, das angibt, auf welche HTML-Elemente die Stilregeln angewendet werden sollen (z.B. `h1` für alle Überschriften erster Ordnung).
Eigenschaft	Ein Stilmerkmal in CSS, das auf ein ausgewähltes Element angewendet wird (z.B. `color` für die Textfarbe oder `font-size` für die Schriftgröße).
Wert	Der spezifische Wert, der einer CSS-Eigenschaft zugewiesen wird (z.B. `blue` für die Farbe oder `16px` für die Schriftgröße).

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

HTML dient nur zum Formatieren wie in einem Textverarbeitungsprogramm.

Was Sie stattdessen lehren sollten

HTML beschreibt die Struktur von Inhalten, CSS übernimmt das Design. Aktive Experimente mit fehlendem CSS zeigen den Unterschied klar. Peer-Diskussionen helfen, Vorstellungen zu korrigieren und den Markup-Aspekt zu verinnerlichen.

Häufige Fehlvorstellung

Eine Webseite muss sofort online sein, um zu testen.

Was Sie stattdessen lehren sollten

Webseiten laufen lokal im Browser. Schüler testen schrittweise mit Live-Servern. Gruppenarbeit mit gemeinsamen Dateien fördert das iterative Testen und reduziert Frustration.

Häufige Fehlvorstellung

Barrierefreiheit betrifft nur Behinderte.

Was Sie stattdessen lehren sollten

Jeder profitiert von klarer Struktur und Alt-Texten. Evaluierungs-Stationen mit Screenreadern zeigen dies. Kollaborative Reviews machen den Nutzen für alle sichtbar.

Ideen für aktives Lernen

Stationenrotation: HTML-Grundlagen

Richten Sie vier Stationen ein: 1. HTML-Struktur mit <head> und <body>, 2. Textformatierung mit <h1> bis <p>, 3. Listen und Links einfügen, 4. Bilder einbinden. Gruppen rotieren alle 10 Minuten und notieren Code-Beispiele. Abschließend teilen sie Erkenntnisse im Plenum.

45 Min.·Kleingruppen

Pair Programming: CSS-Design

Paare codieren gemeinsam eine Webseite: Partner A tippt HTML, Partner B CSS für Hintergrund, Schrift und Ausrichtung. Alle 5 Minuten wechseln sie Rollen. Testen Sie im Browser und passen Sie an.

30 Min.·Partnerarbeit

Peer-Review-Karussell: Evaluierung

Jede Gruppe lädt ihre Webseite hoch. Andere Gruppen rotieren, bewerten mit Checkliste (Funktion, Design, Barrierefreiheit) und geben Feedback. Eigene Seite basierend darauf überarbeiten.

40 Min.·Kleingruppen

Individuell: Veröffentlichen

Schüler laden ihre finale Webseite auf eine kostenlose Plattform wie GitHub Pages hoch. Sie testen Links, Responsivität und teilen den Link mit der Klasse per QR-Code.

20 Min.·Einzelarbeit

Bezüge zur Lebenswelt

• Webdesigner und Frontend-Entwickler erstellen und pflegen Webseiten für Unternehmen, Organisationen und Einzelpersonen. Sie nutzen HTML und CSS täglich, um Benutzeroberflächen zu gestalten, die sowohl funktional als auch ästhetisch ansprechend sind, wie zum Beispiel die Webseite des Deutschen Museums.
• Journalisten und Content-Ersteller gestalten Online-Artikel und Blogs, um Informationen zugänglich zu machen. Sie verwenden grundlegende HTML- und CSS-Kenntnisse, um Texte zu formatieren und Bilder einzubinden, ähnlich wie bei der Online-Präsenz von Spiegel Online.
• Kleine Unternehmen und Vereine erstellen oft eigene einfache Webseiten, um sich online zu präsentieren und mit Kunden oder Mitgliedern zu kommunizieren. Dies ermöglicht ihnen eine kostengünstige digitale Präsenz, ohne auf externe Agenturen angewiesen zu sein.

Ideen zur Lernstandserhebung

Lernstandskontrolle

Jede Schülerin und jeder Schüler erhält ein Kärtchen mit einer der folgenden Fragen: 'Nenne zwei HTML-Tags, die du für deine Webseite verwendet hast, und erkläre ihre Funktion.' oder 'Beschreibe eine CSS-Regel, die du angewendet hast, und erkläre, welchen Effekt sie hatte.' Die Antworten werden eingesammelt und auf Verständnis geprüft.

Gegenseitige Bewertung

Die Schülerinnen und Schüler tauschen ihre Webseiten aus und bewerten sie anhand einer Checkliste. Fragen könnten sein: 'Ist die Navigation klar?' 'Sind die Farben gut aufeinander abgestimmt?' 'Sind alle Bilder mit Alternativtexten versehen?' Jedes Paar gibt sich gegenseitig konstruktives Feedback zu zwei Verbesserungsmöglichkeiten.

Kurze Überprüfung

Stellen Sie während der Codierphase gezielte Fragen zu spezifischen HTML- oder CSS-Konstrukten. Zum Beispiel: 'Wie würdest du einen Link zu einer anderen Seite erstellen?' oder 'Welche CSS-Eigenschaft ändert die Hintergrundfarbe eines Elements?' Dies dient der sofortigen Überprüfung des Verständnisses.

Häufig gestellte Fragen

Wie plane ich den Unterricht für das Gestalten eigener Webseiten?

Beginnen Sie mit einer Einführung in HTML-Struktur via interaktiver Demo. Folgen Sie mit geführten Codier-Aufgaben in Pairs, dann freiem Entwurf. Schließen Sie mit Peer-Evaluierung und Veröffentlichen ab. Integrieren Sie tägliche Reflexionsrunden, um Fortschritte zu sichern. Passen Sie die Komplexität an die Klasse an, z. B. mit Vorlagen für Einsteiger. (62 Wörter)

Wie fördert aktives Lernen das Verständnis von HTML und CSS?

Aktives Lernen macht Code greifbar: Schüler codieren selbst, sehen Änderungen live im Browser und iterieren basierend auf Feedback. Pair Programming verteilt Rollen und reduziert Ängste. Stationenrotationen sorgen für Vielfalt und Vertiefung. Peer-Reviews stärken Evaluierungskompetenzen. Solche Methoden erhöhen Motivation und Retention, da Erfolge sofort spürbar sind. (68 Wörter)

Welche Tools eignen sich für Klasse 8 bei Webseitenbau?

Verwenden Sie kostenlose Editoren wie VS Code mit Live Server Extension oder Online-Umgebungen wie CodePen, Replit. Für Veröffentlichen: GitHub Pages oder Netlify. Integrieren Sie Browser-DevTools für Debugging. Diese Tools sind browserbasiert, benötigen keine Installation und erlauben kollaboratives Arbeiten. (59 Wörter)

Wie evaluiere ich Webseiten auf Barrierefreiheit?

Nutzen Sie Checklisten: Alt-Texte für Bilder, semantische HTML-Elemente, Kontrastprüfung mit Tools wie WAVE. Testen Sie mit Screenreadern wie NVDA. Schüler bewerten gegenseitig und reflektieren Verbesserungen. Das verbindet Technik mit Inklusion und fördert verantwortungsvolles Gestalten. (56 Wörter)