forked from WEB-IB-SS26/development-ib
62 lines
2.7 KiB
Markdown
62 lines
2.7 KiB
Markdown
# Übungsblatt 12
|
|
|
|
## 1. CSS-Übung: Selektoren
|
|
|
|
**Aufgabenstellung**: Definieren Sie ein CSS-Stylesheet, das ein vorgegebenes HTML-Dokument einfärbt.
|
|
|
|
#### Arbeitsschritte
|
|
|
|
1. Verwenden Sie dazu das vorgebene HTML-Formular [bunt.html](bunt.html).
|
|
2. Erstellen Sie ein Stylesheet und verlinken es im HTML.
|
|
3. Setzen Sie die Hintergrundfarbe des Dokuments auf `slateblue`.
|
|
4. Die Überschrift der ersten Ebene soll `lightcoral` sein.
|
|
5. Alle Überschriften der zweiten Ebene sollen `whitesmoke` sein.
|
|
6. Setzen Sie die restlichen Farben, wie der Text es fordert.
|
|
|
|
## 2. CSS- und Javascript-Übung: Farben und Events
|
|
|
|
**Aufgabenstellung**: Erstellen Sie eine interaktive Webseite, die nach Auswahl einer Farbe die Hintergrundfarbe verändert.
|
|
|
|
#### Arbeitsschritte:
|
|
|
|
1. Erstellen Sie eine HTML-Seite auf der ein Eingabefeld des Typs `color` zu sehen ist. Denken Sie auch an eine geeignete Beschriftung.
|
|
2. Schreiben Sie ein Javascript-Programm, dass bei Auswahl einer Farbe
|
|
1. den Hintergrund der HTML-Seite anpasst
|
|
2. die gewählte Farbe in einer `alert`-Nachricht ausgibt
|
|
|
|
#### Tipps
|
|
- Setzen der Hintergrundfarbe [w3schools.com: Backgroundcolor](https://www.w3schools.com/jsref/prop_style_backgroundcolor.asp)
|
|
- Auslesen der Farbauswahl [w3schools.com: Input Color](https://www.w3schools.com/jsref/prop_color_value.asp)
|
|
|
|
## 3. 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`).
|
|
|
|
## 4. CSS-Übung: Selektoren und Spezifität
|
|
|
|
**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!: |