HTML & CSS im Unterricht behandeln: So klappt’s
HTML und CSS sind zum Strukturieren von Webseiten und zum Gestalten ihres Aussehens unabdinglich. Und auch für SchülerInnen ist es interessant, diese beiden Begriffe zu kennen. In diesem Blogartikel stellen wir euch deshalb einige tolle Unterrichtsmaterialien vor, mit denen eure SchülerInnen HTML und CSS kennenlernen und erste Webseiten erstellen können.
Was ist HTML und was ist CSS?
Aber lasst uns zunächst klären, was HTML und CSS überhaupt sind und wie sie zueinander stehen.
Gleich vorab: Es sind keine Programmiersprachen im klassischen Sinn. HTML (Hypertext Markup Language) ist eine textbasierte Auszeichnungssprache, d.h. sie ist dazu gedacht, Webseiten zu strukturieren. HTML bestimmt also, welche Textinhalte in welcher Anordnung auf der Webseite angezeigt werden.
CSS (Cascading Style Sheets) ist eine Formatierungssprache, um das Aussehen der HTML Seiten zu gestalten. So können Inhalt und Aussehen getrennt voneinander bearbeitet werden. CSS übernimmt also den Design-Part. Im CSS können Größen, Abstände und Farbgebung von Seitenelementen festgelegt werden.
HTML und CSS sind unzertrennlich und vergleichsweise leicht zu erlernen.
Warum sind HTML & CSS wichtig?
Die beiden zusammen ermöglichen es, eigene Webseiten zu erstellen und zu gestalten. Das ist eine wichtige Möglichkeit der Teilhabe am Internet, eigene Inhalte präsentieren zu können und zudem eine kreative Ausdrucksmöglichkeit.
1. HTML und CSS Unterrichsunterlagen bei App Camps
In unserem kostenlosen Basiskurs lernen die SchülerInnen Webseiten mit HTML und CSS zu entwickeln. Sie erlangen Verständnis über das Zusammenspiel von HTML & CSS. Wir empfehlen den Kurs ab Klassenstufe 9.
Der Kurs ist für 3 Schulstunden à 90 Minuten ausgelegt. Jede der drei Sitzungen besteht aus einem Startvideo, Lernkarten und einem Abschlussvideo.
In der ersten Sitzung « Erste Schritte » lernen die SchülerInnen die Grundlagen von HTML und CSS kennen. In der zweiten Sitzung « Website: Meine Stadt » liegt der Fokus auf CSS. Die SchülerInnen ergänzen eine HTML-Seite um CSS. In der dritten und letzten Sitzung « Website: Meine Lieblingsvideos » entwickeln die SchülerInnen eine Webseite mit ihren Lieblingsvideos.
Hier geht’s zum Basiskurs.
HTML und CSS im Unterricht – ein Erfahrungsbericht
„Die Unterlagen waren mir eine wertvolle Hilfe, den SchülerInnen schnell und kompakt HTML & CSS Kenntnisse zu vermitteln.“
Paula ist Lehrerin für Mathe, Informatik und Technik und nutzt bereits den App Camps Basiskurs zu HTML und CSS. Sie erzählt, dass die SchülerInnen viel Spaß damit haben und gut mit den Materialien zurechtkommen. Besonders gut gefiel den SchülerInnen, dass sie ortsungebunden arbeiten und ihren Verwandten ihre tolle Webseite zeigen können. Paulas kompletten Erfahrungsbericht mit unserem Basiskurs könnt ihr hier nachlesen.
2. Weitere großartige Unterrichtsunterlagen zu HTML und CSS
2.1 Unterrichtsunterlagen zu HTML & CSS bei Fobizz
Auch bei unserem Partnerunternehmen Fobizz gibt es viele spannende Unterrichtsmaterialien zu HTML und CSS. Diese drei Folgenden gefallen uns besonders gut. Einen Überblick über viele weitere tolle Unterrichtsmaterialien zu HTML & CSS von Fobizz findet ihr hier.
Heldenwebseite HTML & CSS
Mit diesen Arbeitsmaterialien lernen die SchülerInnen zunächst die Grundlagen von HTML & CSS kennen. Danach erstellen sie einen Superhelden-Steckbrief und programmieren diesen in HTML und CSS.
Die Unterlagen sind für die Klassenstufe 5 und 6 empfohlen und die benötigte Zeit beträgt zwischen 45 und 90 Minuten.
Erste Programmierschritte – HTML, CSS, Javaskript
Diese Unterlagen helfen SchülerInnen, eine erste eigene Webseite mit replit.com zu erstellen. Sie erwerben erste Grundkenntnisse über HTML und CSS. Die Materialien sind ab der Klassenstufe 5 empfohlen. Die benötigte Bearbeitungszeit liegt bei 60-90 Minuten.
Zahlensysteme
Mit diesen Unterrichtsmaterialien lernen die SchülerInnen verschiedene Zahlensysteme (zum Beispiel Dual-, Oktal-, usw.) kennen. Sie dienen als Hinführungsstunde in Themen wie HTML und CSS. Die Unterlagen sind ab der Klassenstufe 9/10 empfohlen. Die empfohlene Zeit für diese Materialien liegt bei 45 Minuten.
2.2 Arbeitsmaterialien zu HTML & CSS von Inf-Schule
Die Webseite Inf-Schule ist ein elektronisches Schulbuch und umfasst verschiedene Themenbereiche. So auch zu HTML und CSS. Die Grundlagen werden Schritt für Schritt sehr verständlich erklärt und es gibt viele verschiedene Aufgaben, um das Gelernte gleich anzuwenden. Wir finden die Materialien richtig große Klasse.
2.3 Unterrichtsunterlagen zu HTML & CSS bei Zum-Unterrichten
Die Seite « Zum-Unterrichten » der Zentrale für Unterrichtsmedien im Internet e.V. (ZUM) bietet kostenfreie Unterrichtsmaterialien für die verschiedensten Fächer an.
Auf der Seite gibt es einen tollen Lernpfad zur Einführung in HTML und CSS, mit dem die SchülerInnen erste Schritte im Webdesign durchführen können. Zur Festigung des Erlernten gibt es verschiedene Quizze.
3. Unterrichtsunterlagen zu HTML
3.1 Re-Schmitt
Auf dieser Seite findet ihr verschiedene digitale Arbeitsblätter für die Schule und zum Selbststudium. Mit den Materialien zu HTML lernen die SchülerInnen HTML-Dateien selber zu erstellen. Auch wenn die Webseite an sich etwas altertümlich erscheint, finden wir die Unterlagen super strukturiert und verständlich erklärt.
Das Unterrichtsmaterial eignet sich für den Informatikunterricht in Realschule, Gymnasium und Sekundarstufe 1.
3.2 Ingo-Bartling.de
Auf der Seite von Ingo Bartling findet ihr jede Menge Materialien für die Fächer Mathematik, Physik, Informatik für die Klassenstufen 5-12. So auch zum Thema HTML.
Die verschiedenen Arbeitsblätter geben einen Überblick über die wichtigsten HTML-Elemente, erklären die grundlegende Struktur von vernetzten Dokumenten und geben SchülerInnen die Aufgabe, eine Geschichte zu schreiben.
Die Unterlagen eignen sich für die Klassenstufe 7.
4. Unterrichtsunterlagen zu CSS
4.1 Projekt « Virtueller Campus » der PHBern
Auf dieser Seite der PH Bern gibt es Lernmaterialien rund um Javascript, JSP, PHP, MySQL und eben auch zu CSS. Die Online-Unterlagen sind sehr umfangreich und detailliert. Das Material reicht von « CSS in HTML einbinden », über « CSS richtig schreiben » bis hin zu « Barrierefreies Webdesign ».
Neben vielen Erklärungen gibt es auch tolle Übungen und weiterführende Links.
4.2 Unterrichtsunterlagen zu CSS bei Lehrer-Online
Auch bei Lehrer-Online, der Plattform, die Unterrichtsmaterialien für alle Fächer anbietet, gibt es tolle Unterrichtsunterlagen zu CSS. Auf sie kann allerdings nur mit einem kostenpflichtigen Premium-Account zugegriffen werden.
Die Unterrichtsmaterialien eignen sich für die Sekundarstufe II mit einer benötigten Zeitdauer von 4 Schulstunden.
Die SchülerInnen erfahren, was CSS ist und lernen wichtige CSS-Anweisungen kennen. Sie lernen außerdem, interne und externe CSS-Formatierungen zu erstellen und CSS zur Positionierung von Inhalten einzusetzen. Die Arbeitsunterlagen enthalten auch Übungen, mit denen die SchülerInnen die erlernten Grundlagen festigen können.
Anne Looks ist studierte Medienwissenschaftlerin und hat lange in der Verlagsbranche gearbeitet. Ihre Leidenschaft ist digitale Produktentwicklung und New Learning. Bei App Camps entwickelt sie Unterrichtsmaterialien, veranstaltet Webinare und hin und wieder schreibt sie etwas, meistens für @app_camps auf Instagram.
