---
title: 'Einführung in HTML und CSS'
date: 2021-10-29T08:50:13.000Z
type: book
draft: false
weight: 100
LastModifierDisplayName: Axel Dürkop
LastModifierEmail: axel.duerkop@tuhh.de
---

## 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.

{{< figure title="Der rote Faden. Foto von Lisa Woakes on Unsplash" src="../img/einfuehrung/lisa-woakes-meIntAXztBw-unsplash.jpg" >}}

### 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](https://en.wikipedia.org/wiki/Mockup) (dt.: [Vorführmodell](https://de.wikipedia.org/wiki/Vorf%C3%BChrmodell)) vor.

{{< figure title="Mockup der Website, erstellt mit draw.io" src="../img/einfuehrung/2020-04-27-mockup-website.png" >}}

Ausgehend von dem Mockup hat Ihre Website also

- eine **semantische Strukturierung** im HTML
  - https://www.html-seminar.de/html-5-strukturierende-elemente.htm
  - https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg
- mehrere Überschriften unterschiedlichen Grades
  - https://wiki.selfhtml.org/wiki/HTML/outline#HTML-Dokumente_mit_.C3.9Cberschriften_strukturieren
- oben eine **horizontale Navigation** mit funktionierenden Links
  - https://wiki.selfhtml.org/wiki/HTML/Tutorials/Navigation
  - https://www.html-seminar.de/css-ul-ol-li-design-listen-navigation.htm
- mehrere **Hyperlinks** im Inhalt, die zu _externen Webseiten_ verweisen
  - https://wiki.selfhtml.org/wiki/HTML/Tutorials/Links/Referenzieren_in_HTML
  - https://www.html-seminar.de/html-links.htm
- mehrere eingebundene **Bilder** (Logo, Bild im Inhalt)
  - https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet
  - https://www.html-seminar.de/grafiken.htm
- 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]

1. **Klären Sie Begriffe, die Sie nicht verstehen.**
    - Haben Sie Begriffe nicht verstanden, oder sind Ihnen Teile in der Aufgabe unklar?
1. **Definieren Sie das Problem.**
    - Worin genau besteht die Aufgabe, wenn Sie das Mockup in ein HTML/CSS-Dokument umsetzen sollen?
1. **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?
1. **Ordnen Sie Ideen und vertiefen Sie diese systematisch.**
    - Machen Sie Vorschläge, wie vorzugehen ist.
    - Wie können Sie die identifizierten Teilprobleme angehen?
1. **Formulieren Sie Lernziele.**
    - Was wollen Sie bei der Lösung der identifizierten Probleme erreichen?
    - Was wollen Sie können und verstehen?
1. **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.
7. **Arbeiten Sie eigene und gemeinschaftliche Erkenntnisse in ihre Arbeit ein.**

[^1]: 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](http://methodenpool.uni-koeln.de/problembased/darstellung.html) und findet sich unter *PBL - Problem Based Learning*.