einfuehrung.md 4.03 KB
Newer Older
Axel Dürkop's avatar
Axel Dürkop committed
1 2
---
title: 'Einführung in HTML und CSS'
Axel Dürkop's avatar
Axel Dürkop committed
3
date: 2021-10-29T08:50:13.000Z
Axel Dürkop's avatar
Axel Dürkop committed
4 5 6 7 8 9 10
type: book
draft: false
weight: 100
LastModifierDisplayName: Axel Dürkop
LastModifierEmail: axel.duerkop@tuhh.de
---

Axel Dürkop's avatar
Axel Dürkop committed
11
## Einführung in die Entwicklung von Webseiten mit HTML und CSS
Axel Dürkop's avatar
Axel Dürkop committed
12

Axel Dürkop's avatar
Axel Dürkop committed
13
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.
Axel Dürkop's avatar
Axel Dürkop committed
14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

{{< 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
Axel Dürkop's avatar
Add 02  
Axel Dürkop committed
33
  - https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg
Axel Dürkop's avatar
Axel Dürkop committed
34 35 36
- mehrere Überschriften unterschiedlichen Grades
  - https://wiki.selfhtml.org/wiki/HTML/outline#HTML-Dokumente_mit_.C3.9Cberschriften_strukturieren
- oben eine **horizontale Navigation** mit funktionierenden Links
Axel Dürkop's avatar
Add 02  
Axel Dürkop committed
37
  - https://wiki.selfhtml.org/wiki/HTML/Tutorials/Navigation
Axel Dürkop's avatar
Axel Dürkop committed
38 39
  - https://www.html-seminar.de/css-ul-ol-li-design-listen-navigation.htm
- mehrere **Hyperlinks** im Inhalt, die zu _externen Webseiten_ verweisen
Axel Dürkop's avatar
Add 02  
Axel Dürkop committed
40
  - https://wiki.selfhtml.org/wiki/HTML/Tutorials/Links/Referenzieren_in_HTML
Axel Dürkop's avatar
Axel Dürkop committed
41 42 43 44 45 46 47 48 49 50 51 52 53 54
  - 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.**
Axel Dürkop's avatar
Axel Dürkop committed
55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
    - 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.
Axel Dürkop's avatar
Axel Dürkop committed
71 72 73
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*.