Webentwicklung Grundlagen: HTML, CSS & Mehr - Materialpaket

In dieser Unterrichtsstunde erarbeiten die Schülerinnen und Schüler ihr Verständnis für die essenziellen Bestandteile von HTML. Sie setzen sich damit auseinander, wie man eine HTML-Datei anlegt und aufruft, erkunden die grundlegende Struktur einer HTML-Seite (bestehend aus Kopf- und Körperbereich) und gestalten ihre eigene erste Webseite, die einem Tennisclub gewidmet ist. Im Rahmen des zweiten Arbeitsblatts erlernen sie zusätzliche HTML-Elemente wie p, h1 bis h6, meta und title, wenden diese praktisch an und fügen sie in ihre eigene Webseite ein. Darüber hinaus identifizieren sie in einer praktischen Übung anhand von Beschreibungen die passenden HTML-Elemente. Die Einheit wird mit einem Arbeitsblatt abgerundet, das theoretische und praktische Übungen beinhaltet, um das erlangte Wissen zu festigen.In den Materialien findest Du Lösungen zu allen Arbeitsblättern, einschließlich aller Originaldateien wie beispielsweise Word, PowerPoint und Excel. Dadurch hast Du die Freiheit, selbstständig Anpassungen vorzunehmen. Für den Einstieg gibt es einen Lösungsvorschlag in der "Notizen"-Sektion der PowerPoint-Präsentation.

Klassenstufen: 8-9. Klasse

Das Zusammenspiel zwischen HTML und CSS ist häufig unklar. Deswegen sollen die SuS die verschiedenen Möglichkeiten wo man CSS-Regeln einbinden kann unterscheiden können. Die SuS lernen, wie CSS-Regeln aufgebaut sind. Sie erkennen, dass CSS-Regeln fast immer von übergeordneten Elementen auf untergeordnete übertragen/vererbt werden.In den Materialien findest Du Lösungen zu allen Arbeitsblättern, einschließlich aller Originaldateien wie beispielsweise Word, PowerPoint und Excel. Dadurch hast Du die Freiheit, selbstständig Anpassungen vorzunehmen. Für den Einstieg gibt es einen Lösungsvorschlag in der "Notizen"-Sektion der PowerPoint-Präsentation.

Klassenstufen: BS: Lehrjahr 1, BS: Lehrjahr 2

In dieser Unterrichtsstunde konzentrieren sich die Schülerinnen und Schüler auf die Struktur und Organisation von Webseitenarchitekturen. Sie lernen, wie man ein Webprojekt effizient strukturiert und diskutieren die Effekte, die Änderungen in der Ordnerstruktur auf die Verlinkungen innerhalb der Webseite haben können. Auf dem ersten Arbeitsblatt setzen sich die Lernenden mit den Basisprinzipien der Dateiorganisation auf Webseiten auseinander, überarbeiten eine bestehende Ordnerstruktur und passen Dateinamen an, um sie den gängigen Namenskonventionen anzupassen. Zudem erarbeiten sie das Konzept relativer und absoluter Pfade und ändern die Hyperlinks in ihren HTML-Dokumenten entsprechend ab, damit Verweise auf Bilder und Stylesheets auch nach einer Umstrukturierung der Ordner fehlerfrei funktionieren. Zum Abschluss werden auf dem letzten Arbeitsblatt weiterführende Aufgaben angeboten, um das Gelernte zu festigen.In den Materialien findest Du Lösungen zu allen Arbeitsblättern, einschließlich aller Originaldateien wie beispielsweise Word, PowerPoint und Excel. Dadurch hast Du die Freiheit, selbstständig Anpassungen vorzunehmen. Für den Einstieg gibt es einen Lösungsvorschlag in der "Notizen"-Sektion der PowerPoint-Präsentation.

Klassenstufen: 7-8. Klasse

In dieser Unterrichtsstunde vertiefen die Lernenden ihr Verständnis für HTML-Listen, indem sie sich mit deren Einführung und praktischem Einsatz auseinandersetzen. Sie untersuchen, welche Arten von Daten in Listenform organisiert werden können, und lernen die Unterschiede sowie die Darstellungsweisen von sortierten und unsortierten Listen in HTML kennen. Durch das Bearbeiten verschiedener Aufgaben entwickeln sie eigene HTML-Strukturen. Weiterhin widmen sie sich der Thematik der Verschachtelung von Listen und üben, wie man solche verschachtelten Listen mit HTML-Code selbst erstellt. Zum Abschluss der Stunde bearbeiten sie auf einem Arbeitsblatt vertiefende Theorie- und Praxisaufgaben, um ihr Wissen zu festigen.In den Materialien findest Du Lösungen zu allen Arbeitsblättern, einschließlich aller Originaldateien wie beispielsweise Word, PowerPoint und Excel. Dadurch hast Du die Freiheit, selbstständig Anpassungen vorzunehmen. Für den Einstieg gibt es einen Lösungsvorschlag in der "Notizen"-Sektion der PowerPoint-Präsentation.

Klassenstufen: BS: Lehrjahr 2, BS: Lehrjahr 3