Einführung in HTML und CSS
Einführung in die Entwicklung von Webseiten mit HTML und CSS
In dieser Lerneinheit nähern sie sich praxisorientiert der Arbeit mit HTML und CSS an, um ein erstes Webseitenkontrukt zu erstellen. HTML ist dabei für die Auszeichnung der Inhalte zuständig, CSS für deren Formatierung. In späteren Einheiten wird noch JavaScript dazukommen, damit Sie Ihre Webseiten interaktiver machen können.
Ziele
- Sie sind in der Lage, mit HTML und CSS eine einfache Website zu bauen.
- Dabei erarbeiten Sie sich die Grundkenntnisse für HTML-Listen, Bildeinbindung, Hyperlinks, Layout mit CSS
- Sie können Ihre Arbeit in GitLab hochladen
Inhaltliche Vorgaben
Damit alle einen gemeinsamen Startpunkt haben, gebe ich Ihnen eine Website als Mockup (dt.: Vorführmodell) vor.
Ausgehend von dem Mockup hat Ihre Website also
- eine semantische Strukturierung im HTML
- mehrere Überschriften unterschiedlichen Grades
- oben eine horizontale Navigation mit funktionierenden Links
- mehrere Hyperlinks im Inhalt, die zu externen Webseiten verweisen
- mehrere eingebundene Bilder (Logo, Bild im Inhalt)
- einen Footer mit Links zur Datenschutzerklärung und zum Impressum
- einen zentrierten Inhaltsbereich (Knobelaufgabe!)
Diesen Auftrag werden Sie anschließend für die erste Annäherung an Ihre Projektidee verwenden.
Arbeitsschritte
Arbeiten Sie (gemeinsam) die folgenden Arbeitsschritte durch, die sich bei komplexen Problemen und Aufgaben empfehlen!1
- Klären Sie Begriffe, die Sie nicht verstehen.
- Haben Sie Begriffe nicht verstanden, oder sind Ihnen Teile in der Aufgabe unklar?
- Definieren Sie das Problem.
- Worin genau besteht die Aufgabe, wenn Sie das Mockup in ein HTML/CSS-Dokument umsetzen sollen?
- Analysieren Sie das Problem.
- Wie lässt sich das große Problem in viele kleinere herunterbrechen?
- Wie können Sie beschreiben, was zu tun ist?
- Ordnen Sie Ideen und vertiefen Sie diese systematisch.
- Machen Sie Vorschläge, wie vorzugehen ist.
- Wie können Sie die identifizierten Teilprobleme angehen?
- Formulieren Sie Lernziele.
- Was wollen Sie bei der Lösung der identifizierten Probleme erreichen?
- Was wollen Sie können und verstehen?
- Suchen Sie ergänzende Informationen.
- Recherchieren Sie, mit welchen Ressourcen Sie allgemeine und spezielle Probleme des Auftrags lösen können.
- Welche Bücher, Tutorials und Videos helfen?
- Teilen Sie die Informationen, die Sie finden, mit den anderen, z.B. in Mattermost.
- Arbeiten Sie eigene und gemeinschaftliche Erkenntnisse in ihre Arbeit ein.
-
Da sich dieses Skript primär an werdende Lehrer_innen richtet, will ich die Quellen der didaktischen Methoden nennen: Die Liste der Arbeitsschritte stammt aus dem bemerkenswerten Methodenpool der Uni Köln und findet sich unter PBL - Problem Based Learning. ↩︎