3009298
/
lab-development-imb
forked from WEB-IMB-WS2526/lab-development-imb
1
0
Fork 0
Code Pull Requests Activity
lab-development-imb/web/11/labor/11_aufgaben.md

2.2 KiB
Raw Blame History

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

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

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. Gerne können Sie dieses erweitern oder anpassen.
  2. Sie können das folgende CSS-Stylesheet als Ausgangspunkt verwenden (freiwillig): CSS-Stylesheet. 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.)