Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- gf_informatik:web:uebungen [2025-01-31 20:10] – [Auftrag 1 – Grundgerüst einer Webseite erstellen] gra
+++ gf_informatik:web:uebungen [2025-02-12 08:22] (aktuell) – [Lösungen LP] gra
@@ Zeile 12: / Zeile 12: @@
 . Starte VSCode und **öffne** darin diesen Ordner: Datei > Ordner öffnen > Ordner `website_ksr` suchen und öffnen.
 . Klicke auf das Symbole (1) oben links, um den "Explorer" zu öffnen. Darin, also im Feld (2), siehst du alle Dateien und Unterordner, die im geöffneten Ordner vorhanden sind. Mit (3) kannst du darin neue Dateien und Unterordner erstellen. Mit Doppelklick auf eine Datei wird diese im Feld (4) geöffnet.
+{{ :gf_informatik:web_sca:vscode_index.png?400 |}}
-{{:gf_informatik:web_sca:vscode_index.png?400&|}}
 . Erstelle nun eine **neue Datei**, die *zwingend* den Namen `index.html` haben muss.
 . Öffne nun `index.html` in VSCode und erstelle darin das **Grundgerüst** der Website. Tippe dazu folgendes ab (nicht copy paste):<WRAP classes #id width :code>
@@ Zeile 48: / 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 163: / 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 181: / 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 236: / 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>