Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- gf_informatik:web:uebungen [2025-01-31 20:15] – [Auftrag 1 – Grundgerüst einer Webseite erstellen] gra
+++ gf_informatik:web:uebungen [2025-02-12 08:22] (aktuell) – [Lösungen LP] gra
@@ Zeile 46: / Zeile 46: @@
 **Ziel** dieses Blocks ist, die wichtigsten **HTML-Elemente** kennenzulernen und mit ihnen eine **Website nachzubauen**.
-. Studiere die [[gf_informatik:web:html#html-elemente|Theorie zu HTML-Elementen]]. **Probiere** alle dort vorgestellten Elemente (ausser `<div>`) kurz in deiner HTML-Datei des letzten Auftrags aus. Ziel hier ist, dass du **selbständig** herausfindest, wie das genau funktioniert. Du kannst dir dafür jede erdenkliche Hilfe holen (Google, KI, ...), aber am Schluss musst du verstehen, wie es funktioniert!
+. Studiere die [[gf_informatik:web:html#html-elemente|Theorie zu HTML-Elementen]]. **Probiere** alle dort vorgestellten Elemente (ausser `<div>`) kurz in deiner HTML-Datei des letzten Auftrags aus. Ziel hier ist, dass du **selbständig** herausfindest, wie das genau funktioniert. Du kannst dir dafür jede erdenkliche Hilfe holen (Google, KI, ...), aber am Schluss musst **du** verstehen, wie es funktioniert!
 . Kopiere dann den reinen **Text der Website** in den `body` der Datei `index.html`, die du im letzten Kapitel erstellt hast.<WRAP classes #id width :code>
 ++++Inhalt Website (click me!)|
@@ Zeile 161: / Zeile 161: @@
 ==== Auftrag 3 - Formatierung mit CSS ====
-. Erstelle für deine **KSR-Website** vom letzten Auftrag eine **CSS-Datei** mit Namen `style.css` und füge binde sie in der HTML-Datei ein. Wie geht das? -> Slides oder [[gf_informatik:web:css|Theorie]].
+. Erstelle für deine **KSR-Website** vom letzten Auftrag eine **CSS-Datei** mit Namen `style.css` und binde sie in der HTML-Datei ein. Wie geht das? -> [[gf_informatik:web:css|Theorie]].
-. Füge nun CSS-Regeln zur CSS-Datei hinzu, so dass die KSR-Seite **wie unten angegeben** aussieht. Farben, Abstände usw. sollen einigermassen übereinstimmen. Die [[gf_informatik:web:css|Theorie]] und die Slides erklären alle nötigen Regeln. Hilfe erhältst du unterhalb des Bildes.
+. Füge nun CSS-Regeln zur CSS-Datei hinzu, so dass die KSR-Seite **wie unten angegeben** aussieht. Farben, Abstände usw. sollen einigermassen übereinstimmen. Die [[gf_informatik:web:css|Theorie]] erklärt alle nötigen Regeln. Hilfe erhältst du unterhalb des Bildes.
    {{ :gf_informatik:web_sca:website_ksr_html_css.png?&200 |}}
@@ Zeile 179: / Zeile 179: @@
 Um die Überschriften hinzukriegen ("Balken" mit genügend Abstand), musst du mit `padding`, `margin` und `border` arbeiten. Siehe dazu auch das Beispiel in den Slides.
 ++++
+==== Auftrag 4 – Neo am Scheideweg ====
+  * Siehe [[https://en.wikipedia.org/wiki/Red_pill_and_blue_pill|Red pill and blue pill]] oder [[https://de.wikipedia.org/wiki/Herakles_am_Scheideweg|Herakles am Scheideweg]] für kulturelle Hintergründe zu dieser Aufgabe.
+  - Erstelle an passender Stelle in deiner Ordnerstruktur einen Ordner, z.B. namens "Buttons" oder "Matrix" oder "Entscheidung".
+  - Öffne Visual Studio Code (VSC) und öffne dort diesen Ordner.
+  - Erstelle in VSC innerhalb des Ordners 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. Du darfst weitere Gestaltungselemente hinzufügen.
+== 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'')
 ===== Lösungen LP =====
@@ Zeile 234: / Zeile 254: @@
 </html>
 </code>
+++++
+++++Buttons|
+== 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>