Aufträge Webtechnologien [KSR Wiki]

In den folgenden Übungen erstellst du kleine Webseiten und lernst dabei die Grundlagen von HTML und CSS kennen.

Ziel: In dieser Übung lernst du den Editor für das Erstellen von Webseite kennen und erstellst ein einfaches Grundgerüst einer Webseite.

Lade den Editor Visual Studio Code (kurz VSCode) herunter und installiere diesen: https://code.visualstudio.com

Alternativ dazu kannst du auch Editoren wie Notepadoder Sublime verwenden. 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. {{ :gf_informatik:web_sca:vscode_index.png?400&nolink }}

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>

<html>
<head>
    <meta charset="UTF-8">
    <title>Titel der Website</title>
</head>
<body>
    Hier kommt der Inhalt der Website hinein.
</body>
</html>

</WRAP>

1. 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]].\\ \\
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.

Tipp: Arbeiten mit VSCode

Wenn man mit VSCode arbeitet, sollte man nicht einzelne Dateien mit Doppelklick öffnen. Besser öffnet man wie oben beschrieben den ganzen Ordner. Jetzt kann diesen in der „Explorer“-Ansicht direkt verwalten: Dateien bearbeiten, neue Dateien und Ordner erstellen, …

Tipp: index.html

Die Hauptseite jeder Website trägt den Namen index.html. Wähle deshalb immer diesen Namen, ganz egal, um was es bei der Website geht.

==== Auftrag 2 - Website erstellen mit HTML ==== Ziel dieses Blocks ist, die wichtigsten HTML-Elemente kennenzulernen und mit ihnen eine Website nachzubauen.

 1. 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!
 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!) Kantonsschule Kreuzlingen Herzlich willkommen an der Kanti Kreuzlingen! Hier geht es zur richtigen Webseite der KSK. Kleine Schule – grosse Vielfalt! 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. 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 Russisch Wirtschaft und Recht Ergänzungsfächer GMS 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 Biologie Chemie Geschichte / Geografie Informatik Musik Physik und Anwendungen der Mathematik Psychologie / Philosophie / Pädagogik Sport Wirtschaft und Recht </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. 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. **Speichere** die HTML-Datei.
   1. Zeige die Website im Browser an / **Lade die Website neu**:<WRAP classes #id width :code>
   * Windows: <kbd>F5</kbd> (Achtung: ev. muss zusätzlich <kbd>Fn</kbd> gedrückt werden)
   * MacOS: <kbd>⌘ + R</kbd>

</WRAP>

   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 <h1> Tag. Die anderen Überschriften sind Überschriften 2. und 3. Ordnung, deshalb verwendet man für diese <h2> und <h3>. ++++Hilfe zu Paragraphen/Fliesstext Meist ist es eine gute Idee, Fliesstext mit dem Paragraphen-Tag <p> 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 (<ul>) und nummerierte (<ol>) Listen. Für die einzelnen Punkte der Liste verwendet man das <li>-Tag.

Unnummerierte Liste:
<ul>
    <li>Erstes Element</li>
    <li>Zweites Element</li>
    <li>Drittes Element</li>
</ul>
 
Nummerierte Liste:
<ol>
    <li>Erstes Element</li>
    <li>Zweites Element</li>
    <li>Drittes Element</li>
</ol>

==== 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: Ctrl+Alt+↑/↓ (Windows) resp. ⌘+⌥+↑/↓ (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> ==== Auftrag 3 - Formatierung mit 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 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.
 {{ :ksk_ef:web:uebungen:pasted:20240811-130911.png?200 |}}

Hilfe zu Abständen Vermeide manuelle Zeilenumbrüche mit <br>. Arbeite stattdessen mit margin. Beispiel: Betrachte folgenden Codeausschnitt:

<h2>Titel</h2>
<p>Ich bin ein Absatz.</p>

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. ===== Lösungen LP ===== <nodisp 2> ++++KSK Website HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <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>Herzlich willkommen an der Kanti Kreuzlingen!</h1>
<img src="ksk_xlarge.jpg" width="500px">
<h2>Kleine Schule – grosse Vielfalt!</h2>
 
<p>Hier geht es zur <a href="http://ksk.ch">richtigen Webseite der KSK</a>.</p>
 
<p>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 <strong>MINT-Bereich</strong> (Mathematik, Informatik, Naturwissenschaften und Technik) zu
vertiefen oder sich auf die <strong>zweisprachige Matura Englisch</strong> vorzubereiten. Unsere Schülerinnen und
Schüler können aus sieben <em>Schwerpunkt-</em> und aus dreizehn <em>Ergänzungsfächern</em> je eines auswählen und
so ihre Interessen vertiefen. Zahlreiche <em>Freifächer</em> runden das vielfältige Angebot unserer Kanti
ab.</p>
 
<h2>Schwerpunktfächer GMS</h2>
 
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>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>

++ </nodisp>

Dies ist eine alte Version des Dokuments!

Aufträge Webtechnologien

Auftrag 1 – Grundgerüst einer Webseite erstellen

**Dies ist eine alte Version des Dokuments!**

Aufträge Webtechnologien

Auftrag 1 – Grundgerüst einer Webseite erstellen

Dies ist eine alte Version des Dokuments!