Übung 5: CSS Intro

Arbeite auf dem Laufwerk P: im Verzeichnis P:\Informatik\Block 3 - Webprogrammierung\Lektion 5\

Aufgabe 1: interne CSS-Regeln (datenschutz.html)

  1. Arbeite in Visual Studio Code. "Open Folder" –> Gehe ins Verzeichnis P:\Informatik\Block 3 - Webprogrammierung\ hinein.
    Erstelle dort einen neuen Unterordner Lektion 05
  2. Lade die Vorlagedatei datenschutz.html herunter in dieses Verzeichnis.
  3. Es sollen interne Styles geschrieben werden. Dazu verwendest du im Head den Block <style>, vgl. CSS-Grundstruktur.
    <head>
    	<style>
    		
    	</style>
    </head>
  4. Die HTML-Elemente im Body sollen nicht verändert werden (nur CSS-Regeln schreiben).
  5. Für die Farben empfielt sich ein Blick auf die Farbtabelle. Wähle möglichst präzis.
  6. Gestalte die Website gemäss Screenshot:

Screenshot

Aufgabe 2: eigene Startseite gestalten

  1. Öffne FileZilla und logge dich auf dem kssb-Server ein.
  2. Herunterladen aller bisherigen Dateien (Sicherung): Lade den Verzeichnisinhalt vom Server zu dir ins Laufwerk P: in das aktuelle Verzeichnis Lektion 5 herunter.
  3. Bearbeite die (heruntergeladene) Datei index.html in Visual Studio Code.
  4. Füge einen Style-Block im Head ein und schreibe mindestens 3 CSS-Regeln (z.B. Gestaltung des Hintergrunds, der Überschriften, usw.).
  5. Diese Regeln (= interne Styles) sollen nun in ein externes Stylesheet ausgelagert werden. Erstelle dazu eine neue Datei namens style.css (im gleichen Verzeichnis wie die index.html). Kopiere die Regeln in die Datei style.css und lösche den Style-Block in index.html.
  6. Vergiss nicht innerhalb von <head> den Link zur css-Datei zu erstellen:
    <link rel="stylesheet" type="text/css" href="style.css" />
  7. Füge den Link zum externen Stylesheet auch in der HTML-Datei personen.html (mit der Tabelle der Informatik-Persönlichkeiten, Aufgabe 3 von Übung 4) ein. Style deine Tabelle mit Rahmen und Farben, indem du CSS-Regeln für td, tr und table schreibst.
  8. Setze in index.html unten noch den Link zur Datei datenschutz.html aus Aufgabe 1. Und lade schliesslich alle deine Lösungen hoch, inkl. der Aufgabe 1.

Beispiel-Screenshot (personen.html)