Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung
Nächste Überarbeitung		 Vorherige Überarbeitung
gf_informatik:web:uebungen [2023-10-24 13:47] – hofgf_informatik:web:uebungen [2025-02-12 08:22] (aktuell) – [Lösungen LP] gra
Zeile 3: Zeile 3:
 In den folgenden Übungen erstellst du kleine Webseiten und lernst dabei die Grundlagen von HTML und CSS kennen. In den folgenden Übungen erstellst du kleine Webseiten und lernst dabei die Grundlagen von HTML und CSS kennen.
  
 +{{anchor:auftrag1}}
 ==== Auftrag 1 – Grundgerüst einer Webseite erstellen ==== ==== Auftrag 1 – Grundgerüst einer Webseite erstellen ====
  
 **Ziel**: In dieser Übung lernst du den Editor für das Erstellen von Webseite kennen und erstellst ein einfaches Grundgerüst einer Webseite. **Ziel**: In dieser Übung lernst du den Editor für das Erstellen von Webseite kennen und erstellst ein einfaches Grundgerüst einer Webseite.
  
-  1. Lade den Editor **Visual Studio Code** (kurz **VSCode**) herunter und installiere diesen: [[https://code.visualstudio.com]]\\ \\ +  1. Lade den Editor **Visual Studio Code** (kurz **VSCode**) herunter und installiere diesen: [[https://code.visualstudio.com]] 
-  1. **Erstelle einen Ordner** mit Namen "website\_ksr" und speichere an einem passendenden Ort auf deinem Computer.\\ \\ +  1. Erstelle am passendenden Ort auf deinem Computer einen Ordner mit Namen `website_ksr` . 
-  1. Starte nun VSCode und **öffne** darin diesen Ordner: Datei > Ordner öffnen > Ordner "website\_ksr" suchen und öffnen.\\ \\ +  1. Starte VSCode und **öffne** darin diesen Ordner: Datei > Ordner öffnen > Ordner `website_ksr` suchen und öffnen. 
-  1. Klicke auf das Symbole (1) oben links, um den "Explorer" zu öffnen. Darin, also im Feld (2), siehst du alle Files und Unterordner, die im geöffneten Ordner vorhanden sind. Mit (3) kannst du darin neue Files und Unterordner erstellen. Mit Doppelklick auf ein File, wird dieses im Feld (4) geöffnet. +  1. 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|}} +  1. Erstelle nun eine **neue Datei**, die *zwingend* den Namen `index.html` haben muss. 
- +  1. Ö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> 
-  1. Erstelle nun ein **neues File**, welches *zwingend* den Namen **index.html** haben muss.\\ \\ +\\
-  1. Ö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>+
 <code html> <code html>
 <html> <html>
Zeile 27: Zeile 27:
 </html> </html>
 </code> </code>
 +
 </WRAP> </WRAP>
-  1. Verschaffe dir einen **Überblick** über den HTML-Code oben: Lese hierzu die Theorie bis und mit [[gf_informatik:web:html##html-grundgeruest_aus_head_und_body|HTML-Grundgerüst aus head und body]].\\ \\+  1. Verschaffe dir einen **Überblick** über den HTML-Code oben: Lese hierzu die Theorie bis und mit [[gf_informatik:web:html##html-grundgeruest_aus_head_und_body|HTML-Grundgerüst aus head und body]].
   1. Gratulation, du hast deine erste Website erstellt! **Öffne** sie nun **im Browser:** Navigiere im File Explorer deines Computers (nicht von VSCode) zu deiner Website (also index.html) und öffne diese per Doppelklick. Nun sollte die Website im Browser angezeigt werden.   1. Gratulation, du hast deine erste Website erstellt! **Öffne** sie nun **im Browser:** Navigiere im File Explorer deines Computers (nicht von VSCode) zu deiner Website (also index.html) und öffne diese per Doppelklick. Nun sollte die Website im Browser angezeigt werden.
  
 <box 100% round green|**Tipp: Arbeiten mit VSCode**> <box 100% round green|**Tipp: Arbeiten mit VSCode**>
-Wenn man mit VSCode arbeitet, sollte man *nicht* einzelne Files mit Doppelklick öffnen. Besser öffnet man wie oben beschrieben den **ganzen Ordner**. Jetzt kann diesen in der "Explorer"-Ansicht direkt verwalten: Files bearbeiten, neue Files und Ordner erstellen, ...+Wenn du mit VSCode arbeitest, solltest du *nicht* einzelne Dateien mit Doppelklick öffnen. Besser öffnest du wie oben beschrieben den **ganzen Ordner**. Jetzt kannst du diesen in der "Explorer"-Ansicht direkt verwalten: Dateien bearbeiten, neue Dateien und Ordner erstellen, ...
 </box> </box>
  
Zeile 40: Zeile 41:
  
  
-==== Auftrag II - Website erstellen mit HTML ====+{{anchor:auftrag2}} 
 +==== Auftrag 2 - Website erstellen mit HTML ====
  
 **Ziel** dieses Blocks ist, die wichtigsten **HTML-Elemente** kennenzulernen und mit ihnen eine **Website nachzubauen**. **Ziel** dieses Blocks ist, die wichtigsten **HTML-Elemente** kennenzulernen und mit ihnen eine **Website nachzubauen**.
  
-   1. Studiere die [[gf_informatik:web:html|Theorie]]. **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!+   1. 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!
    1. 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>    1. 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!)| ++++Inhalt Website (click me!)|
Zeile 131: Zeile 133:
 ++++ ++++
  
 +==== Tricks mit Visual Studio Code ====
 +
 +<box 100% round green|**Tipp: Arbeiten mit VSCode**>
 +VSCode ist ein hervorragender Editor mit vielen Features. Sehr praktisch ist, dass man **mehrere Zeilen gleichzeitig bearbeiten** kann. Dies ist zum Beispiel praktisch, um alle Elemente einer Liste gleichzeitig mit Tags zu versehen.
 +Um den Cursor gleichzeitig auf mehreren Zeilen zu haben: <kbd>Ctrl+Alt+Up</kbd>/<kbd>Down</kbd> (Windows) resp. <kbd>⌘+Option+Up</kbd>/<kbd>Down</kbd> (macOS).
 +
 +Allgemein verfügt VSCode über viele Shortcuts:
 +
 +   * [[https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf|Für Windows]]
 +   * [[https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf|Für MacOS]]
 +
 +Sammlung wichtigster VSCode Shortcuts:
 +
 +   * Mehrere Cursor: <kbd>C+A+Up</kbd>/<kbd>Down</kbd> / <kbd>⌘+Option+Up</kbd>/<kbd>Down</kbd>
 +   * Code Formatieren: <kbd>S+A+F</kbd> / <kbd>S+Option+F</kbd>
 +
 +Sammlung wichtigster allgemeinder Shortcuts:
 +
 +   * Speichern: <kbd>C + s</kbd> / <kbd>⌘ + s</kbd>
 +   * Select All: <kbd>C + a</kbd> / <kbd>⌘ + a</kbd>
 +   * Cut, Copy, Paste: <kbd>C + x</kbd>,<kbd>c</kbd>,<kbd>V</kbd> / <kbd>⌘ + x</kbd>,<kbd>c</kbd>,<kbd>v</kbd>
 +   * Fenster wechseln: <kbd>A + Tab</kbd> / <kbd>⌘ + Tab</kbd>
 +
 +</box>
 +
 +{{anchor:auftrag3}}
 +==== Auftrag 3 - Formatierung mit CSS ====
 +
 +   1. 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]].
 +   1. 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 |}}
 +
 +++++Hilfe zu Abständen|
 +Vermeide manuelle Zeilenumbrüche mit `<br>`. Arbeite stattdessen mit `margin`.
 +
 +Beispiel: Betrachte folgenden Codeausschnitt:
 +<code html>
 +<h2>Titel</h2>
 +<p>Ich bin ein Absatz.</p>
 +</code>
 +Falls der Abstand zwischen der `h2`-Überschrift und dem Absatz nicht gross genug ist, solltest du die Margin von `h2`-Überschriften (primär) und/oder der Absätze ändern. Dies hat auch den Vorteil, dass die Abstände zwischen `h2` und `p` immer einheitlich sind, falls diese mehrfach vorkommen im Dokument.
 +++++
 +
 +++++Hilfe zu Überschriften|
 +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 =====
 +
 +<nodisp 2>
 +
 +++++KSR Website HTML|
 +
 +<code html>
 +<html>
 +<head>
 +    <meta charset="UTF-8">
 +    <title>KSR</title>
 +</head>
 +<body>
 +    <h1>GMS an der Kanti Romanshorn</h1>
 +    <img src="img_xlarge.jpeg" alt="" width="500px">
 +    <p><em><strong>Kanti Romanshorn</strong>, die innovative Schule im Grünen.</em></p>
 +    <p>Hier geht es zur <a href="http://ksr.ch">echten Website der <strong>KSR</strong></a>.</p>
 +    <h2>Überblick</h2>
 +    Während ihrer vierjährigen Ausbildungszeit an der <strong>KSR</strong> erleben unsere Schülerinnen und Schüler neben dem regulären Unterricht (Grundlagenfächer ab dem 1. Ausbildungsjahr, Schwerpunktfach zusätzlich ab dem 2. Ausbildungsjahr und Ergänzungsfach ab dem 3. Ausbildungsjahr) Spezialtage und Spezialwochen. Diese dienen, wie auch die Maturaarbeit, zur vertieften Auseinandersetzung mit ausgewählten Themenbereichen.
 +    <p><em>Die gesamte Ausbildung an der <strong>Kanti Romanshorn</strong> ist ausgerichtet auf die bewusste Förderung der nötigen Kompetenzen, um unsere Schülerinnen und Schüler optimal auf ein späteres Studium, die Arbeitswelt und anspruchsvolle Aufgaben in der Gesellschaft vorzubereiten.</em></p>
 +
 +    <h2>Fächer</h2>
 +    Das Fächerangebot an der <strong>KSR</strong> ist bewusst sehr breit angelegt. Die Grundlagenfächer sind für alle Schülerinnen und Schüler obligatorisch. Weiter wählen alle Schülerinnen und Schüler jeweils ein Schwerpunkt- und ein Ergänzungsfach.
 +    
 +    <h3>Schwerpunktfächer GMS</h3>
 +    Ab dem zweiten Ausbildungsjahr setzt das Schwerpunktfach ein. Zur Wahl stehen an unserer Schule folgende Fächer bzw. Fächerkombinationen:
 +    <ol>
 +        <li>Biologie und Chemie</li>
 +        <li>Italienisch</li>
 +        <li>Latein</li>
 +        <li>Physik und Anwendungen der Mathematik</li>
 +        <li>Spanisch</li>
 +        <li>Wirtschaft und Recht</li>
 +        <li>Bildnerisches Gestalten (ab 2021)</li>
 +    </ol>
 +
 +    <h3>Ergänzungsfächer GMS</h3>
 +    Mit dem Start des Ergänzungsfachs im dritten Ausbildungsjahr der <strong>Kanti Romanshorn</strong> ist die Fächerzusammensetzung komplett. Zur Wahl stehen an unserer Schule folgende Ergänzungsfächer bzw. Fächerkombinationen:
 +    <ul>
 +        <li>Anwendungen der Mathematik</li>
 +        <li>Bildnerisches Gestalten</li>
 +        <li>Geografie</li>
 +        <li>Geschichte</li>
 +        <li>Informatik</li>
 +        <li>Musik</li>
 +        <li>Naturwissenschaften plus (umfasst Projekte aus der Biologie, Chemie und Physik)</li>
 +        <li>Philosophie/Ethik</li>
 +        <li>Psychologie/Pädagogik</li>
 +        <li>Sport</li>
 +        <li>Wirtschaft und Recht</li>
 +    </ul>
 +</body>
 +</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>
  • gf_informatik/web/uebungen.1698155241.txt.gz
  • Zuletzt geändert: 2023-10-24 13:47
  • von hof