Aufgabe 1: (datenschutz2.html)
In dieser Aufgabe erweiterst du die Datei datenschutz.html aus Übung 5.
Erstelle eine Kopie von datenschutz.html in einem neuen Unterordner Lektion 06 oder lade die Vorlagedatei
datenschutz2.html herunter in dieses Verzeichnis.
Aufgabe 1a) – Klassen
Erstelle für die vier Begriffe (Datenschutz, -sicherheit, Informationssicherheit und IT-Sicherheit),
die von einem <em> umschlossen sind, jeweils eine eigene CSS-Klasse. Die Begriffe sollen
jeweils eine andere Hintergrundfarbe erhalten.
-
.datenschutz–>skyblue -
.datensicherheit–>yellowgreen -
.informationssicherheit–>orange -
.itsicherheit–>plum
Füge bei allen jeweiligen em-Tags (unten im Body) das Attribut class="..." hinzu.
Aufgabe 1b) – ID-Selektor
Vergib dem Paragraphen mit dem Quellenhinweis die ID quelle und schreibe eine CSS-Regel, sodass
sein Hintergrund in der Farbe yellow erscheint. Der Link dort (in diesem Paragraphen mit der ID quelle)
soll die Textfarbe black erhalten.
Aufgabe 1c) – Boxmodell
Dank des CSS-Boxmodells können die Innenabstände (padding) und
Aussenabstände (margin) der Elemente angepasst werden.
- Vergrössere die Innenabstände der h3-Überschriften und füge oben einen grossen Aussenstand hinzu.
- Vergrössere auch den Innenabstand des Absatzes mit der ID
quelle.
Aufgabe 1d) – Boxmodell
Füge folgende zwei Bilder oberhalb des Quellen-Links ein.
<p id="bildergalerie">
<img src="https://www.datenschutz-praxis.de/wp-content/uploads/sites/2/2020/10/Was-umfasst-Datenschutz-im-Internet_tiero-633x386.jpg" />
<img src="http://kssb.ch/webprogrammierung/img/l6-headerbild_datenschutz.jpg" />
</p>Die Bilder in der Bildergalerie sollen folgendes Layout bekommen:
Tipp: Verändere die Innenabstände, setze Höhe und Hintergrundfarbe und zeichne einen Rahmen.