Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- ksk_ef:web:uebungen [2024-08-11 06:50] – angelegt hof
+++ ksk_ef:web:uebungen [2024-08-11 13:30] (aktuell) – hof
@@ Zeile 1: / Zeile 1: @@
-===== Aufträge HTML =====
+===== Aufträge Webtechnologien =====
 In den folgenden Übungen erstellst du kleine Webseiten und lernst dabei die Grundlagen von HTML und CSS kennen.
@@ Zeile 9: / Zeile 9: @@
 . Lade den Editor **Visual Studio Code** (kurz **VSCode**) herunter und installiere diesen: [[https://code.visualstudio.com]]
-. **Erstelle einen Ordner** mit Namen `website_ksr` und speichere an einem passendenden Ort auf deinem Computer.
+. Alternativ dazu kannst du auch Editoren wie [[https://notepad-plus-plus.org/|Notepad++]] oder Sublime verwenden.
-. Starte nun VSCode und **öffne** darin diesen Ordner: Datei > Ordner öffnen > Ordner `website_ksr` suchen und öffnen.
+. **Erstelle einen Ordner** mit Namen `website_ksk` und speichere an einem passendenden Ort auf deinem Computer.
+. Starte nun VSCode und **öffne** darin diesen Ordner: Datei > Ordner öffnen > Ordner `website_ksk` 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&nolink |}}
@@ Zeile 27: / Zeile 28: @@
 </code>
 </WRAP>
-. 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]].\\ \\
+. Verschaffe dir einen **Überblick** über den HTML-Code oben: Lese hierzu die Theorie bis und mit [[html#html-grundgeruest_aus_head_und_body|HTML-Grundgerüst aus head und body]].\\ \\
 . 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.
@@ Zeile 44: / Zeile 45: @@
 **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 [[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!)|
-GMS an der Kanti Romanshorn
+Kantonsschule Kreuzlingen
+Herzlich willkommen an der Kanti Kreuzlingen!
-Kanti Romanshorn, die innovative Schule im Grünen.
+Hier geht es zur richtigen Webseite der KSK.
-Hier geht es zur echten Website der KSR (https://www.ksr.ch).
+Kleine Schule – grosse Vielfalt!
-Überblick
+Als eine der kleinsten Kantonsschulen der Schweiz verbinden wir zeitgemässen Unterricht mit einem persönlichen Umfeld. Wir legen den Fokus sowohl auf eine breit angelegte Allgemeinbildung als auch auf Individualisierung: Mit unseren Spezialklassen besteht ab der ersten Klasse zusätzlich die Möglichkeit, sich im MINT-Bereich (Mathematik, Informatik, Naturwissenschaften und Technik) zu vertiefen oder sich auf die zweisprachige Matura Englisch vorzubereiten. Unsere Schülerinnen und Schüler können aus sieben Schwerpunkt- und aus dreizehn Ergänzungsfächern je eines auswählen und so ihre Interessen vertiefen. Zahlreiche Freifächer runden das vielfältige Angebot unserer Kanti ab.
-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
@@ Zeile 71: / Zeile 66: @@
 Physik und Anwendungen der Mathematik
 Spanisch
+Russisch
 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:
+Mit dem Start des Ergänzungsfachs im dritten Ausbildungsjahr der Kanti ist die Fächerzusammensetzung komplett. Zur Wahl stehen an unserer Schule folgende Ergänzungsfächer bzw. Fächerkombinationen:
-Anwendungen der Mathematik
 Bildnerisches Gestalten
-Geografie
+Biologie
-Geschichte
+Chemie
+Geschichte / Geografie
 Informatik
 Musik
-Naturwissenschaften plus (umfasst Projekte aus der Biologie, Chemie und Physik)
+Physik und Anwendungen der Mathematik
-Philosophie/Ethik
+Psychologie / Philosophie / Pädagogik
-Psychologie/Pädagogik
 Sport
 Wirtschaft und Recht
 ++++</WRAP>
-. 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 |}}
+. Lade das **Bild** herunter und kopiere es in den Ordner, in dem sich die `index.html`-Datei befindet: {{ ksk_xlarge.jpg?200 |}}
-. 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:**
+. 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: {{ :ksk_ef:web:uebungen:pasted:20240811-125743.png?200 |}} Achtung: Mache nicht zu viele Schritte auf einmal. Gehe stattdessen **wie folgt vor:**
-. Setze ein **einziges** HTML-Element um (z.B. h1-Überschrift)
+. Setze ein **einziges** HTML-Element um (z.B. `h1`-Überschrift)
 . **Speichere** die HTML-Datei.
 . Zeige die Website im Browser an / **Lade die Website neu**:<WRAP classes #id width :code>
@@ Zeile 159: / Zeile 153: @@
 ==== 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 **KSK-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 [[css]].
-. 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 KSK-Seite **wie unten angegeben** aussieht. Farben, Abstände usw. sollen einigermassen übereinstimmen. Die [[css]] und die Slides erklären alle nötigen Regeln. Hilfe erhältst du unterhalb des Bildes.
-   {{ :gf_informatik:web_sca:website_ksr_html_css.png?&200 |}}
+   {{ :ksk_ef:web:uebungen:pasted:20240811-130911.png?200 |}}
 ++++Hilfe zu Abständen|
@@ Zeile 182: / Zeile 176: @@
 <nodisp 2>
-++++KSR Website HTML|
+++++KSK Website HTML|
 <code html>
+<!DOCTYPE html>
 <html>
 <head>
-    <meta charset="UTF-8">
+    <meta charset='utf-8'>
-    <title>KSR</title>
+    <title>Kantonsschule Kreuzlingen</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 </head>
 <body>
-    <h1>GMS an der Kanti Romanshorn</h1>
+<h1>Herzlich willkommen an der Kanti Kreuzlingen!</h1>
-    <img src="img_xlarge.jpeg" alt="" width="500px">
+<img src="ksk_xlarge.jpg" width="500px">
-    <p><em><strong>Kanti Romanshorn</strong>, die innovative Schule im Grünen.</em></p>
+<h2>Kleine Schule – grosse Vielfalt!</h2>
-    <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>
+<p>Hier geht es zur <a href="http://ksk.ch">richtigen Webseite der KSK</a>.</p>
-    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>
+<p>Als eine der kleinsten Kantonsschulen der Schweiz verbinden wir zeitgemässen Unterricht mit einem
-    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:
+persönlichen Umfeld. Wir legen den Fokus sowohl auf eine breit angelegte Allgemeinbildung als auch
-    <ul>
+auf Individualisierung: Mit unseren Spezialklassen besteht ab der ersten Klasse zusätzlich die
-        <li>Anwendungen der Mathematik</li>
+Möglichkeit, sich im <strong>MINT-Bereich</strong> (Mathematik, Informatik, Naturwissenschaften und Technik) zu
-        <li>Bildnerisches Gestalten</li>
+vertiefen oder sich auf die <strong>zweisprachige Matura Englisch</strong> vorzubereiten. Unsere Schülerinnen und
-        <li>Geografie</li>
+Schüler können aus sieben <em>Schwerpunkt-</em> und aus dreizehn <em>Ergänzungsfächern</em> je eines auswählen und
-        <li>Geschichte</li>
+so ihre Interessen vertiefen. Zahlreiche <em>Freifächer</em> runden das vielfältige Angebot unserer Kanti
-        <li>Informatik</li>
+ab.</p>
-        <li>Musik</li>
-        <li>Naturwissenschaften plus (umfasst Projekte aus der Biologie, Chemie und Physik)</li>
+<h2>Schwerpunktfächer GMS</h2>
-        <li>Philosophie/Ethik</li>
-        <li>Psychologie/Pädagogik</li>
+Ab dem zweiten Ausbildungsjahr setzt das Schwerpunktfach ein. Zur Wahl stehen an unserer Schule folgende Fächer bzw. Fächerkombinationen:
-        <li>Sport</li>
-        <li>Wirtschaft und Recht</li>
+<ol>
-    </ul>
+    <li>Biologie und Chemie</li>
+    <li>Italienisch</li>
+    <li>Latein</li>
+    <li>Physik und Anwendungen der Mathematik</li>
+    <li>Spanisch</li>
+    <li>Russisch</li>
+    <li>Wirtschaft und Recht</li>
+</ol>
+<h2>Ergänzungsfächer GMS</h2>
+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:
+<ul>
+    <li>Bildnerisches Gestalten</li>
+    <li>Biologie</li>
+    <li>Chemie</li>
+    <li>Geschichte / Geografie</li>
+    <li>Informatik</li>
+    <li>Musik</li>
+    <li>Physik und Anwendungen der Mathematik</li>
+    <li>Psychologie / Philosophie / Pädagogik</li>
+    <li>Sport</li>
+    <li>Wirtschaft und Recht</li>
+</ul>
 </body>
 </html>