forked from WEB-IMB-WS2526/lab-development-imb
43 lines
2.2 KiB
Markdown
43 lines
2.2 KiB
Markdown
# Übungsblatt 11
|
|
|
|
## 1. CSS-Übung: Schrift
|
|
|
|
**Aufgabenstellung**: Ergänzen Sie eine vorgegebene HTML-Seite um Schriftart, Farben und Schriftgrößen mit einem CSS-Stylesheet.
|
|
|
|
#### Arbeitsschritte
|
|
1. Erstellen Sie ein CSS-Stylesheet und binden Sie es in diese HTML-Seite ein: [Nachricht](nachricht.html).
|
|
2. Verwenden Sie die Google Font "Open Sans".
|
|
3. Setzen Sie die Basis-Schriftgröße (`<html>`) auf `16px`.
|
|
4. Die Überschriften der ersten und zweiten Ebene sollen die Farbe `#005CA9` haben.
|
|
5. Text der Klasse `headline` soll eine dunkelgraue Farbe haben und eine kleinere Schriftgröße als die Basis-Schrift haben.
|
|
6. Text der Klasse `meta` soll eine hellgraue Farbe haben und eine kleinere Schriftgröße als `headline` haben. Außerdem soll der Text kursiv dargestellt werden.
|
|
7. Text der Klasse `source` soll unterstrichen sein.
|
|
8. Testen Sie, ob das relative Verhältnis der Schriftgrößen bestehen bleibt, wenn Sie die Basis-Schriftgröße anpassen (z.B. auf `10px`).
|
|
|
|
## 2. CSS-Übung: Selektoren
|
|
|
|
**Aufgabenstellung**: Untersuchen Sie das folgende HTML-Dokument mit dem zugehörigen CSS-Stylesheet und geben Sie zu jedem Kalendereintrag die *Hintergrundfarbe*, *Schriftfarbe* und *unterstrichen/nicht unterstrichen* an.
|
|
|
|
|
|
|
|
#### Antworten
|
|
|
|
1. Termine:
|
|
2. 10k-Lauf:
|
|
3. Elternabend:
|
|
4. Wocheneinkauf:
|
|
5. Yoga:
|
|
6. Handball-Training:
|
|
7. Mathearbeit:
|
|
8. Fußball-Training:
|
|
9. FCB vs. Eintracht:
|
|
10. Pizza-Tag!:
|
|
|
|
## 3. CSS-Übung
|
|
|
|
**Aufgabenstellung**: Gestalten Sie das HTML-Formular zu Workshop-Anmeldung aus vorangegangen Übungsblättern individuell nach Ihren Ideen mit CSS.
|
|
|
|
#### Arbeitsschritte
|
|
1. Nehmen Sie folgendes HTML-Formular als Grundlage: [Workshop-Anmeldung](workshop-anmeldung.html). Gerne können Sie dieses erweitern oder anpassen.
|
|
2. Sie können das folgende CSS-Stylesheet als Ausgangspunkt verwenden (freiwillig): [CSS-Stylesheet](styles_workshop.css). Hier sind ein paar Hilfestellungen zur Gestaltung von Checkbox, Radiobuttons und Select-Box bereits eingefügt (aus der Vorlesung nicht bekannt).
|
|
3. Ergänzen Sie das Stylesheet und ggf. das HTML-Dokument, so dass ein ansprechendes Design entsteht. (Umfang/Detailgrad und Stil wählen Sie selbst.) |