Repetition Websites
Kleine HTML- und CSS-Übung
- Erstelle an passender Stelle in deiner Ordnerstruktur einen Ordner namens „Buttons“.
- Öffne Visual Studio Code (VSC) und öffne dort diesen Ordner.
- Erstelle in VSC innerhalb des Ordners „Buttons“ vier neue Dateien: index.html, style.css, red.html und blue.html
- Erstelle in index.html die html-Grundstruktur mit den Tags
html,head,title,body. - Binde in index.html die Datei style.css ein.
- Bearbeite index.html und style.css so, dass die html-Datei möglichst genau so aussieht:
- Wenn du auf den roten Button klickst, wird die Seite red.html geöffnet, wenn du auf die blauen Button klickst, wird die Seite blue.html geöffnet.
- Beide Dateien zeigen eine beliebige Nachricht in grosser, weisser Schrift. Die Hintergrundfarbe von red.html ist rot, diejenige von blue.html blau.
Tipp
- Verwende Links als Buttons. Mit CSS-Eigenschaften wie
padding,border-style,background-color,text-decoration,text-alignetc. kannst du die Links wie Buttons aussehen lassen.
Zusatzaufgabe
Erweitere die CSS-Datei so, dass die Buttons die Farbe wechseln, wenn du den Mauszeiger darüber bewegst.
- Der rote Button soll heller werden (
coral), seine Schrift dunkel (darkred) - Der blaue Button soll heller werden (
cornflowerblue), seine Schrift dunkel (darkblue)
gra