`) 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. ++++Inhalt Website (click me!)| GMS an der Kanti Romanshorn Kanti Romanshorn, die innovative Schule im Grünen. Hier geht es zur echten Website der KSR (https://www.ksr.ch). Überblick Während ihrer vierjährigen Ausbildungszeit an der KSR 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. Die gesamte Ausbildung an der Kanti Romanshorn 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. Fächer Das Fächerangebot an der KSR 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. Schwerpunktfächer GMS Ab dem zweiten Ausbildungsjahr setzt das Schwerpunktfach ein. Zur Wahl stehen an unserer Schule folgende Fächer bzw. Fächerkombinationen: Biologie und Chemie Italienisch Latein Physik und Anwendungen der Mathematik Spanisch Wirtschaft und Recht Bildnerisches Gestalten (ab 2021) Ergänzungsfächer GMS Mit dem Start des Ergänzungsfachs im dritten Ausbildungsjahr der Kanti Romanshorn ist die Fächerzusammensetzung komplett. Zur Wahl stehen an unserer Schule folgende Ergänzungsfächer bzw. Fächerkombinationen: Anwendungen der Mathematik Bildnerisches Gestalten Geografie Geschichte Informatik Musik Naturwissenschaften plus (umfasst Projekte aus der Biologie, Chemie und Physik) Philosophie/Ethik Psychologie/Pädagogik Sport Wirtschaft und Recht ++++ 1. Lade das **Bild** herunter und kopiere es in den Ordner, in dem sich die `index.html`-Datei befindet: {{ :gf_informatik:web_sca:img_xlarge.jpeg?200 |}} 1. Wende dann dein im Theorieteil gelerntes Wissen über HTML-Elemente an, um den Inhalt der **Website so zu gestalten**, dass diese genau so aussieht wie in der Vorlage: {{ :gf_informatik:web_sca:website_ksr_html.png?200 |}} Achtung: Mache nicht zu viele Schritte auf einmal. Gehe stattdessen **wie folgt vor:** 1. Setze ein **einziges** HTML-Element um (z.B. h1-Überschrift) 1. **Speichere** die HTML-Datei. 1. Zeige die Website im Browser an / **Lade die Website neu**: * Windows: F5 (Achtung: ev. muss zusätzlich Fn gedrückt werden) * MacOS: ⌘ + R 1. Stelle sicher, dass HTML-Element **richtig umgesetzt** wurde. Gehe erste dann weiter zum nächsten Element. Studiere falls nötig die Hilfen unten. ++++Hilfe zu Überschriften| Die Hauptüberschrift ist `GMS an der Kanti Romanshorn`. Dafür verwendet man den `

` Tag. Die anderen Überschriften sind Überschriften 2. und 3. Ordnung, deshalb verwendet man für diese `

` und `

`. ++++ ++++Hilfe zu Paragraphen/Fliesstext| Meist ist es eine gute Idee, Fliesstext mit dem Paragraphen-Tag `
` zu versehen. Damit stellt man sicher, dass er auf einer neuen Zeile beginnt und das darauffolgende HTML-Element auf einer neuen Zeile beginnt. ++++ ++++Hilfe zu Listen| Es gibt unnummerierte (`
`) und nummerierte (`
`) Listen. Für die einzelnen Punkte der Liste verwendet man das `
`-Tag. `Unnummerierte Liste: Erstes Element Zweites Element Drittes Element Nummerierte Liste: Erstes Element Zweites Element Drittes Element` ++++ ==== Tricks mit Visual Studio Code ==== 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: `Ctrl+Alt+Up`/`Down` (Windows) resp. `⌘+Option+Up`/`Down` (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: `C+A+Up`/`Down` / `⌘+Option+Up`/`Down` * Code Formatieren: `S+A+F` / `S+Option+F` Sammlung wichtigster allgemeinder Shortcuts: * Speichern: `C + s` / `⌘ + s` * Select All: `C + a` / `⌘ + a` * Cut, Copy, Paste: `C + x`,`c`,`V` / `⌘ + x`,`c`,`v` * Fenster wechseln: `A + Tab` / `⌘ + Tab` {{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 `
`. Arbeite stattdessen mit `margin`. Beispiel: Betrachte folgenden Codeausschnitt: `Titel Ich bin ein Absatz.` 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 ===== ++++KSR Website HTML| KSR GMS an der Kanti Romanshorn Kanti Romanshorn, die innovative Schule im Grünen. Hier geht es zur echten Website der KSR. Überblick Während ihrer vierjährigen Ausbildungszeit an der KSR 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. Die gesamte Ausbildung an der Kanti Romanshorn 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. Fächer Das Fächerangebot an der KSR 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. Schwerpunktfächer GMS Ab dem zweiten Ausbildungsjahr setzt das Schwerpunktfach ein. Zur Wahl stehen an unserer Schule folgende Fächer bzw. Fächerkombinationen: Biologie und Chemie Italienisch Latein Physik und Anwendungen der Mathematik Spanisch Wirtschaft und Recht Bildnerisches Gestalten (ab 2021) Ergänzungsfächer GMS Mit dem Start des Ergänzungsfachs im dritten Ausbildungsjahr der Kanti Romanshorn ist die Fächerzusammensetzung komplett. Zur Wahl stehen an unserer Schule folgende Ergänzungsfächer bzw. Fächerkombinationen: Anwendungen der Mathematik Bildnerisches Gestalten Geografie Geschichte Informatik Musik Naturwissenschaften plus (umfasst Projekte aus der Biologie, Chemie und Physik) Philosophie/Ethik Psychologie/Pädagogik Sport Wirtschaft und Recht ++++ ++++Buttons| == HTML == `TwoButtons Entscheide dich: Rote Pille Blaue Pille` == 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 }` ++++