Websiten entwickeln mit HTML und CSS
Du willst mit deinen Schülerinnen und Schülern Webseiten entwickeln mit HTML und CSS? Hier bekommst du kostenloses HTML Unterrichtsmaterial.
In bis zu drei Sitzungen entwickeln die Jugendlichen verschiedene Webseiten (z.B. eine Seite über sich, eine Seite über eine Stadt und eine Seite mit den Lieblingsvideos). Dazu arbeiten wir mit einem frei verfügbaren Online Editor. Die Ergebnisse sind sofort sichtbar.
Warum empfehlen wir unser HTML Unterrichtsmaterial?
- HTML & CSS sind wichtige Grundlagen.
- Mit Webseiten kann man Schülerinnen und Schüler für Programmierung begeistern.
- Verschiedene Rollenmodelle erklären wichtige Konzepte und berichten von ihrem Berufsalltag.
- Das logische Denken wird gefördert.
- Mit HTML & CSS kann man kreativ arbeiten.
Folgende Informatik-Konzepte werden vermittelt:
- HTML Grundlagen
- HTML Tags (u.a. Absätze, Überschriften, Divs, Bilder, Videos)
- Zusammenspiel HTML & CSS
- CSS Grundlagen
- CSS Selektoren (Classes und IDs)
- CSS Box Model
Die kostenlosen Unterlagen zu HTML & CSS findest du in unserer App Camps Kollektion im Partnerbereich von fobizz.
Empfohlen ab Klassenstufe 9.
Von einem Praxisbeispiel lest ihr in unserem Interview mit Lehrerin Paula. Sie hat zusammen mit ihren SchülerInnen, mithilfe unserer Unterlagen, die Schulwebsite gestaltet.
Unterrichtsmaterial „HTML & CSS Basiskurs“
Inhalte für drei Schulstunden (3 x 90 Minuten)
1: Erste Schritte
In dieser Sitzung geht es um erste Grundlagen zu HTML und CSS. Neben der Grundstruktur von HTML Seiten werden Überschriften, Absätze, Listen, Bilder und Videos vorgestellt.
2: Website – Meine Stadt
In dieser Sitzung geht es um CSS. Eine einfache HTML Seite wird Schritt für Schritt um CSS ergänzt. So entwickelt sich die Seite mit Text zu einer schön gestalteten Seite mit Farben, Abständen und Bildern. Außerdem werden CSS Selektoren (class und id) eingeführt.
3: Website – Meine Lieblingsvideos
In dieser Sitzung entwicklen die Schüler eine Webseite mit ihren Lieblingsvideos. Dabei geht es u.a. um das CSS Box Modell und um Block vs. Inline Elemente.
Alle Informationen zu HTML & CSS auf einen Blick
Was bekommst du?
- Digitales Unterrichtsmaterial zum Thema HTML & CSS
- Materialien zur Vorbereitung und Online Schulungen
- Erklärvideos mit EntwicklerInnen, die von ihrem Berufsalltag berichten
Für wen geeignet?
- Lehrkräfte, die HTML & CSS unterrichten wollen
- Personen, die außerschulisch Workshops anbieten wollen
- Eltern oder Schüler, die AGs anbieten wollen
- Empfohlen ab Klassenstufe 9
Kompetenzen?
- Entwicklung von eigenen Webseiten
- Grundlagen HTML & CSS
- Verständnis Zusammenspiel HTML & CSS
- Einblick in IT- und Medienberufe
Wie laufen die Sitzungen ab?
Startvideo
Jede Sitzung startet mit einem kurzen Startvideo in dem das Projekt vorgestellt wird und die Schülerinnen und Schüler Tipps bekommen.
Lernkarten
Nach dem Startvideo arbeiten die Schüler selbstständig und im eigenen Tempo mit den Lernkarten.
Abschlussvideo
Am Ende der Stunde werden die Ergebnisse vorgestellt. In einem kurzen Abschlussvideo (2-3 Min) erklären Software-EntwicklerInnen wichtige Konzepte der Informatik.
App Camps ist eine gemeinnützige Organisation. Wir werden von Stiftungen und Unternehmen finanziert.
Für Lehrkräfte sind unsere Unterlagen und Angebote kostenlos.
Für App Camps spenden? Wir bedanken uns herzlich!
Für SchülerInnen
Wir unterstützen
App Camps geprüft & empfohlen
