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
ksk_ef:web:uebungen [2024-08-11 12:56] – [Lösungen LP] hofksk_ef:web:uebungen [2024-08-11 13:30] (aktuell) – hof
Zeile 9: Zeile 9:
  
   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. Alternativ dazu kannst du auch Editoren wie [[https://notepad-plus-plus.org/|Notepad++]] oder Sublime verwenden. 
-  1. Starte nun VSCode und **öffne** darin diesen Ordner: Datei > Ordner öffnen > Ordner `website_ksr` suchen und öffnen.+  1. **Erstelle einen Ordner** mit Namen `website_ksk` und speichere an einem passendenden Ort auf deinem Computer. 
 +  1. Starte nun VSCode und **öffne** darin diesen Ordner: Datei > Ordner öffnen > Ordner `website_ksk` suchen und öffnen.
   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.   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&nolink |}} {{ :gf_informatik:web_sca:vscode_index.png?400&nolink |}}
Zeile 55: Zeile 56:
  
 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 Ergänzungsfächern je eines auswählen und so ihre Interessen vertiefen. Zahlreiche Freifächer runden das vielfältige Angebot unserer Kanti ab. 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 Ergänzungsfächern je eines auswählen und so ihre Interessen vertiefen. Zahlreiche Freifächer runden das vielfältige Angebot unserer Kanti ab.
- 
-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 Schwerpunktfächer GMS
Zeile 74: Zeile 71:
 Ergänzungsfächer GMS 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:
  
 Bildnerisches Gestalten Bildnerisches Gestalten
Zeile 88: Zeile 85:
 ++++</WRAP> ++++</WRAP>
    1. Lade das **Bild** herunter und kopiere es in den Ordner, in dem sich die `index.html`-Datei befindet: {{ ksk_xlarge.jpg?200 |}}    1. Lade das **Bild** herunter und kopiere es in den Ordner, in dem sich die `index.html`-Datei befindet: {{ ksk_xlarge.jpg?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. 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:** 
-     1. Setze ein **einziges** HTML-Element um (z.B. h1-Überschrift)+     1. Setze ein **einziges** HTML-Element um (z.B. `h1`-Überschrift)
      1. **Speichere** die HTML-Datei.      1. **Speichere** die HTML-Datei.
      1. Zeige die Website im Browser an / **Lade die Website neu**:<WRAP classes #id width :code>      1. Zeige die Website im Browser an / **Lade die Website neu**:<WRAP classes #id width :code>
Zeile 156: Zeile 153:
 ==== Auftrag 3 - Formatierung mit CSS ==== ==== Auftrag 3 - Formatierung mit CSS ====
  
-   1. 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 [[css]]. +   1. 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]]. 
-   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 [[css]] und die Slides erklären alle nötigen Regeln. Hilfe erhältst du unterhalb des Bildes. +   1. 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| ++++Hilfe zu Abständen|
Zeile 179: Zeile 176:
 <nodisp 2> <nodisp 2>
  
-++++KSR Website HTML|+++++KSK Website HTML|
  
 <code html> <code html>
  • ksk_ef/web/uebungen.1723380966.txt.gz
  • Zuletzt geändert: 2024-08-11 12:56
  • von hof