Übung 7: CSS III

Arbeite auf dem Laufwerk P: im Verzeichnis P:\Informatik\Block 3 - HTML und CSS\Lektion 07\

Aufgabe 1: Navigation in JSFiddle

  1. Gegeben ist das folgendes JSFiddle: https://jsfiddle.net/wbe1mozd/
  2. Aus der Liste soll ein Navigationsmenü werden.
  3. Füge CSS-Regeln (oben rechts) ein, sodass das Menü gemäss Screenshot dargestellt wird.

Tipp: Erstelle eine Regel für li –> Rahmen- und Schriftfarbe blue, Hintergrund lightblue, Textgrösse 90%.

Tipp 2: Erstelle eine Regel für ul –> padding: 0 (dadurch verschwindet der Abstand links)

Aufgabe 2a: E-Health mit HTML5-Elementen

  1. Gegeben ist folgende Website:
  2. Für welche Bereiche würdest du nachfolgende HTML5-Strukturelemente nehmen:
    • <header>
    • <nav>
    • <main>
    •    <article>
    •    <section>
    • <footer>
    • <aside>
  3. Wirf einen Blick in den Code der Website ehealth-code.html
  4. Wo hast du dieselben HTML5-Elemente gewählt wie im Code und wo nicht?

Aufgabe 2b: E-Health

  1. Lade die Vorlagedatei ehealth.html herunter in den Ordner Lektion 07 auf dem Laufwerk P: und bearbeite mit Visual Studio Code.
  2. Füge oben (interne) CSS-Regeln ein, sodass die Bereiche, die mit HTML5-Strukturelementen gekenntzeichnet sind, gefärbt werden, gemäss dieser Vorlage:
    Tipp: Verwende die Farben von den Theorieslides.
  3. Die Navigation soll folgendermassen geändern werden:

    Schreibe passende CSS-Regeln.
  4. Die Seite soll mittels eines Wrappers zentriert werden. Die Seitenbreite beträgt 80%. Füge das entsprechende div-Element ein und erweitere dein CSS. Screenshot:

Aufgabe 3: eigene Startseite gestalten

In dieser Aufgabe erweiterst du deine eigene Startseite (index.html).

  1. Lade die aktuelle Version von index.html mit FileZilla herunter ins Verzeichnis Lektion 7 im Laufwerk P: und bearbeite die Datei.
  2. Füge HTML5-Strukturelemente zu deiner Homepage hinzu.
  3. Färbe die Bereiche farbig ein, indem du die CSS-Regeln aus den Slides nimmst.
  4. Lade die aktuelle Version hoch mit FileZilla.