Tauche ein in die spannende Welt der Webentwicklung mit unserem Material "WEBLAB 404"! Deine Schüler*innen werden zu echten Detektiv*innen und lösen einen kniffligen Fall, indem sie die Grundlagen von HTML und CSS entdecken. Sie finden versteckte Codes und bauen Schritt für Schritt ihre erste eigene Webseite.

Unterrichtsreihe ca. 6 Doppelstunden mit Lösungen und interaktivem Material. Die Schüler*innen können danach die Grundlagen von HTML und CSS und haben eine eigene Website erstellt mit Unterseiten und Navigation.

Das erwartet dich und deine Schüler*innen:

• Mission 0: 
  Hier lernen deine Schüler*innen die wichtigsten Begriffe rund um das Internet kennen: Was ist ein Browser? Wie funktionieren HTML und CSS zusammen? Und welche Rolle spielt ein Server? Sie verstehen, wie Webseiten aufgebaut sind und welche Aufgaben die verschiedenen Technologien haben.
• Mission 1: 
  Deine Schüler*innen entdecken die Grundstruktur einer HTML-Seite. Sie vergleichen sie mit einem Skelett und ordnen die wichtigsten HTML-Tags wie , und richtig zu. Sie üben das Erstellen und Speichern einer einfachen HTML-Datei und schreiben erste Code-Zeilen.
• Mission 2: 
  In dieser Mission geht es um die Inhalte einer Webseite. Deine Schüler*innen lernen wichtige HTML-Elemente wie Überschriften (
  ), Absätze (
  ), Links () und Bilder () kennen. Sie erfahren, wie man Inhalte sinnvoll strukturiert und warum die richtige Verwendung von Tags für Leser*innen und Suchmaschinen wichtig ist.
• Mission 3: 
  Jetzt wird es bunt! Deine Schüler*innen tauchen in die Welt von CSS ein. Sie lernen, wie sie Farben, Schriftarten und Abstände auf einer Webseite gestalten können. Sie verstehen, wie CSS das Aussehen einer Seite beeinflusst und wie es von HTML getrennt wird.
• Mission 4: 
  Hier dreht sich alles um die Strukturierung von Listen, Tablellen und der Navigation. Deine Schüler*innen lernen, wie sie geordnete () und ungeordnete Listen (

) erstellen und formatieren. Sie üben, Inhalte übersichtlich darzustellen. Mission 5: 
In der letzten Mission geht es um das Layout von Webseiten. Deine Schüler*innen entdecken das Box-Modell und lernen, wie sie Abstände (Padding) und Ränder (Margin) nutzen, um Elemente auf einer Seite zu positionieren. Sie gestalten das Aussehen ihrer Webseite noch professioneller.

Diese Kompetenzen erwerben deine Schüler*innen:

• Du verstehst die grundlegenden Konzepte von HTML, CSS, Browsern und Servern.
• Du kannst eine einfache HTML-Seitenstruktur aufbauen.
• Du wendest wichtige HTML-Elemente wie Überschriften, Absätze, Links und Bilder korrekt an.
• Du erkennst die Bedeutung von semantischem HTML für eine gute Struktur und Zugänglichkeit.
• Du nutzt grundlegende CSS-Eigenschaften, um Webseiten zu gestalten.
• Du entwickelst erste Problemlösungsstrategien beim Programmieren.
• Du planst und setzt eine eigene, einfache Webseite um.

+ mehr anzeigen