3024383
/
development-ib-fork
forked from WEB-IB-SS26/development-ib
1
1
Fork 0
Code Pull Requests Activity
development-ib-fork/web/12/labor/12_aufgaben.md

2.7 KiB
Raw Blame History

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

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

HTML mit CSS

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!: