Repetition Websites [KSR Wiki]

Diese Seite ist nicht editierbar. Du kannst den Quelltext sehen, jedoch nicht verändern. Kontaktiere den Administrator, wenn du glaubst, dass hier ein Fehler vorliegt.
# 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: {{ :gf_informatik:redpillbluepill.png?400 |}}
  - 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-align'' etc. 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'')

<nodisp 1>
++++Lösung| 

== HTML ==
<code html index.html>
<html>

<head>
    <title>TwoButtons</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>Entscheide dich:</h1>
    <br>
    <center>
        <a href="red.html" class="red">Rote Pille</a>
        <a href="blue.html" class="blue">Blaue Pille</a>
    </center>
</body>

</html>
</code>

== CSS ==
<code css style.css>

body{
    background-color:lavender;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

h1{
    text-align: center;
}

a{
    font-size: 14pt;
    text-align: center;
    text-decoration: none;
    padding: 10px 20px;
    border-style: outset;
}

a.red{
    background-color: red;
    color:lightpink ;
}

a.red:hover{
    background-color: coral;
    color: darkred
}

a.blue{
    background-color: blue;
    color:cyan;
}

a.blue:hover{
    background-color: cornflowerblue;
    color: darkblue
}
</code>

++++
</nodisp>