Websites & HTML 2023 [KSR Wiki]

Diese Seite ist nicht editierbar. Du kannst den Quelltext sehen, jedoch nicht verändern. Kontaktiere den Administrator, wenn du glaubst, dass hier ein Fehler vorliegt.
====== - Websites & HTML 2023 ======

++++Lernziele|

   * Grob wissen, was das **Internet** ist.
   * Wissen, welche Dinge durch die Einführung des Internets revolutioniert wurden und welchen Einfluss dies auf die Gesellschaft hatte.
   * Wissen, wofür **HTML** steht und was es (nicht) ist.
   * Das Grundgerüst einer Website mit HTML erstellen können. Zum Beispiel: Was gehört in *head*, was in *body*.
   * Den Unterschied von Block- und Inline-Elementen beschreiben können.
   * Die wichtigsten HTML-Elemente kennen und anwenden können.
   * Für jedes dieser HTML-Elemente wissen, ob es sich um ein Block- oder Inline-Element handelt.
   * Wissen, wofür **CSS** steht und wozu man es benötigt.
   * Die Fachbegriffe von CSS kennen.
   * Mithilfe der wichtigsten CSS-Befehle eine Website stylen können.
   * Mithilfe von `id` und `class` einzelne resp. ausgewählte Elemente stylen.

++++

**Ziel** dieses Blocks ist, zu verstehen, wie eine Website aufgebaut ist. Dies erreichen wir, indem wir Schritt für Schritt eine Website (nach)bauen.

===== - Grundgerüst einer Website =====

{{ :gf_informatik:web_sca:web_01_websites_01_html.pdf |}}

**Ziele:**

   * Editor für Erstellen von Website installieren und kennenlernen
   * Einfaches Grundgerüst der Website erstellen

==== Auftrag I ====

  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. Starte nun 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.
{{ :gf_informatik:web_sca:vscode_index.png?400 |}}
  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>
<html>
<head>
    <meta charset="UTF-8">
    <title>Titel der Website</title>
</head>
<body>
    Hier kommt der Inhalt der Website hinein.
</body>
</html>
</code>
</WRAP>
  1. Verschaffe dir einen **Überblick** über den HTML-Code oben:<WRAP classes #id width :list>
  * HTML besteht aus vielen **Tags**. Die meisten HTML-Elemente haben einen Start- und einem Endtag.
  * Der HTML-Körper beginnt mit dem Starttag `<body>` und endet mit dem Endtag `</body>`. Dieser beinhaltet den **Inhalt** der Website, also das, was im Hauptfenster des Browsers angezeigt wird.
    * Der HTML-Kopf (zwischen `<head>` und `</head>`) beinhaltet Einstellungen und zusätzliche Informationen, die nicht im Hauptfenster des Browsers angezeigt wird, z.B.:
       * `<title>Titel der Website</title>`: Speichert Titel der Seite, wird in der Titelleiste des Browsers angezeigt
       * `<meta charset="UTF-8">`: sorgt dafür, dass z.B. Umlaute ä,ö,ü richtig angezeigt werden\\ \\
</WRAP>
   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.

{{ :gf_informatik:web_sca:html_tattoo_head_body.png?nolink&300 |}}

<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, ...
</box>

<box 100% round orange|**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.
</box>


===== - Website erstellen mit HTML =====

**Ziel** von diesem Block ist, die wichtigsten **HTML-Elemente** kennenzulernen und mit ihnen eine **Website nachzubauen**.

==== Auftrag II ====

   1. Studiere die **Theorie** unten. **Probiere** alle dort vorgestellten Elemente (ausser `<div>` kurz in deinem HTML-File der letzten Aufgabe 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 des Files "index.html", welches du im letzten Kapitel erstellt hast.<WRAP classes #id width :code>
++++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
++++</WRAP>
   1. Lade das **Bild** herunter und kopiere es in den Ordner, in dem sich das index.html-File 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** das HTML-File.
     1. Zeige die Website im Browser an / **Lade die Website neu**:<WRAP classes #id width :code>
     * Window: F5 (Achtung: ev. muss Fn drücken)
     * macOC: CMD + R
</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.

<code html>
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>
</code>
++++

==== Theorie zu HTML-Elementen ====

Als erstes ist es wichtig, den Unterschied zwischen Block-Elementen und Inline-Elementen zu verstehen. **Block-Elemente** sind die Bausteine einer Webseite, die in der Regel den grössten Teil des Inhalts ausmachen. Sie nehmen standardmässig die volle Breite des Elements ein, in dem sie sich befinden und beginnen auf einer neuen Zeile. Im Gegensatz zu Block-Elementen fügen sich **Inline-Elemente** nahtlos in den Textfluss einer Seite ein, ohne eine neue Zeile zu beginnen. Sie nehmen nur so viel Platz ein, wie sie benötigen, und ermöglichen so eine reibungslose Einbettung von Text und anderen Inline-Elementen.

Die wichtigsten **Block-Elemente** sind:

   * Das `<p>`-Element dient zur Darstellung von **Paragraphen** (Absätzen). Jeder Absatz beginnt auf einer neuen Zeile.
   * `<h1>, <h2>, <h3>, ... <h6>`: Diese Elemente repräsentieren **Überschriften** unterschiedlicher Hierarchieebenen.
   * `<ul>, <ol>, <li>`: **Listen** werden in HTML mit diesen Elementen erstellt. `<ul>` und `<ol>` sind Container für Listenpunkte `<li>`.
   * (`<div>`: Dieses Element steht für "Division" und wird in der Regel als Container verwendet, um HTML-Inhalte zu gruppieren oder zu strukturieren.)

Die wichtigsten **Inline-Elemente** sind:

   * Mit `<em>` resp. `<strong>` kann Text **betont** ('emphasis') resp. stark betont werden. Der entsprechende Text wird kursiv resp. fett dargestellt.

Gewisse Tags benötigen **Attribute**, um zusätzliche Informationen angeben zu können:

   * **Hyperlinks** (Tag `<a>` für anchor) benötigen das Attribut *href* (hyper reference). Mit diesem gibt man an, auf welche Website man beim Klick weitergeleitet werden soll: `<a href="http://ksr.ch">Beim Link angezeigter Text.</a>`
   * Ein **Bild** fügt man wie folgt ein: `<img src="bild.jpg"/>`. Mit dem Attribut *src* (source) gibt man den Pfad zum Bild an. Befindet sich das Bild *im gleichen Ordner* wie das index.html File, so kann man einfach den Namen des Bildes inkl. Dateiendung (typischerweise .jgp oder .png) angeben. Von allen bisher betrachteten HTML-Elementen ist dieses das einzige, welches *kein Endtag* verlangt.

<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+Up/Down (Windows) resp. Opt+Cmd+Up/Down (macOS).

Allgemein verfügt VSCode über viele Shortcuts:

   * Windows: [[https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf]]
   * macOS:   [[https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf]]

Sammlung wichtigster VSCode Shortcuts:

   * Mehrere Cursor: Ctrl+Alt+Up/Down / Opt+Cmd+Up/Down
   * Code Formatieren: Shift + Alt + F / Shift + Option + F

Sammlung wichtigster allgemeinder Shortcuts:

   * Speichern: CTRL + S / CMD + S
   * Select All: CTRL + A / CMD + A
   * Cut, Copy, Paste: CTRL + X,C,V / CMD + X,C,V
   * Fenster wechseln: ALT + Tab / CMD + Tab

</box>


===== - Website stylen mit CSS =====

**Ziel:** Website von vorherigem Auftrag mithilfe von CSS stylen.

{{ :gf_informatik:web_sca:web_01_websites_02_css.pdf |}}

==== Auftrag III ====

   1. Erstelle für deine **KSR-Website** vom letzten Auftrag eine **CSS-Datei** mit Namen `style.css` und füge binde sie im HTML-File ein. Wie geht das? -> Slides oder Theorie unten.\\ \\
   1. **Style** nun die Website im CSS-File so, dass sie **wie unten angegeben** aussieht. Farben, Abstände usw. sollen einigermassen übereinstimmen. Die benötigte Theorie findet man unten und in den Slides. 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 **margins**.

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 sein werden, 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.

++++
==== Theorie CSS ====

Mit **HTML** erstellen wir den //Inhalt// für unsere Webseite. Damit diese aber auch ansprechend dargestellt wird, **formatieren** wir sie mittels **Cascading Style Sheets** (CSS). Das Zusammenspiel zwischen HTML und CSS wird in den folgenden Grafiken visualisiert:

{{ :gf_informatik:web:html_css.png?400 |}}

{{ :gf_informatik:web_sca:html_css_3.jpg?400 |}}

=== Einbindung von CSS in HTML ===

Das CSS wird in einer separaten Datei (zum Beispiel `style.css`) gespeichert. Um unsere Webseite zu formatieren, verweisen wir im `head` der HTML-Datei wie folgt darauf:

<code html>
<html>
  <head>
    <title>Titel</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  ...
</html>
</code>

Die Trennung von Formatierung und Inhalten ermöglicht es, dasselbe Format und den gleichen Stil auf viele verschiedene Seiten anzuwenden. Beispielsweise muss eine Zeitungs-Website ihr Format nur einmal definieren (und der Browser es nur einmal herunterladen), und es wird dann auf jeden Artikel angewendet.

=== Selektoren und Formatierungsregeln ===

Jede **CSS-Regel** besteht aus zwei Teilen:
  * dem **Selektor** - er bestimmt, für //welche// Elemente die Regel gilt, und
  * den **Formatierungsregeln** - diese definieren, wie die gewählten Elemente //aussehen// sollen und ist von Form: `<Attribut>:<Wert>`

Der einfachste Selektor besteht einfach aus dem HTML-Element (also dem Tag-Namen). Es gibt noch andere Selektoren, auf die wir hier nicht eingehen. Nach dem Selektor folgen geschweifte Klammern, die die Formatierungseigenschaften enthalten. Jede Eigenschaft wird gefolgt von einem Doppelpunkt, dem gewünschten Wert, und einem Semikolon.

== Beispiel 1 ==

Mit `<strong>...</strong>` können wir Text hervorheben, indem wir diesen fett erscheinen lassen. Nun wollen wir, dass dieser Text zusätzlich einen roten Hintergrund hat. Dazu fügen wir folgende CSS-Regel hinzu:
<code css>
strong {
  background-color: red;
}
</code>
Nach einem Reload zeigt unsere Webseite nun `<strong>` Elemente mit rotem Hintergrund an.

== Beispiel 2 ==

Ein etwas ausgereifteres CSS-File könnte wie folgt aussehen:
<code css>
body {
  background-color: lightgrey;
  font-family: sans-serif;
}
h3 {
  font-size: 5mm;
  color: darkgrey;
}
strong {
  background-color: red;
  padding: 1mm;
  border: 1px dashed black;
}
</code>

Wird diese in eine HTML-Datei eingebunden, sieht diese wie folgt aus:

<HTML>
<div style="border: 1px solid #ccc; border-radius: 4px; padding: 9.5px">
  <div style="background-color: lightgrey; font-family: sans-serif; padding: 8px;">
    <h1 style="border: 0;">Title</h1>
    <h3 style="font-size: 5mm; color: darkgrey; border: 0;">Section heading</h3>
    <p>My first paragraph, it's so <strong style="background-color: red; padding: 1mm; border: 1px dashed black;">strong</strong>!</p>
  </div>
</div>
</HTML>

=== Weiterführende Links ===

Die Website [[https://wiki.selfhtml.org/wiki/CSS|SelfHTML]] bietet sowohl eine **Einführung in CSS** als auch ein **Nachschlagewerk** für die tausenden von Eigenschaften, Layouts, und Tricks.
    * mehr zu [[https://wiki.selfhtml.org/wiki/Grafik/Farbe|Farben]]
    * mehr zu [[https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Ma%C3%9Fangaben|Grössenangaben]]
    * mehr zu [[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Typografie|Schriftformatierung]]

===== - Projekt IV: Lebenslauf =====

**Ziele:**

   * Erstellen eine einfache Website mit einem kurzen Lebenslauf zu dir.
   * Dadurch das bisher gelernte (Grundlagen HTML & CSS) anzuwenden und festigen.
   * Selbständig arbeiten, Anweisungen genau lesen und befolgen können

Die Website muss **pünktlich abgegeben** und von der Lehrperson **akzeptiert werden**. Hat sie kleinere Mängel, müssen diese nachgebessert werden. Ist sie ungenügend oder wurde sie zu spät abgegeben, muss eine neue Website zu einem neuen, von der Lehrperson vorgegebenen Thema erstellt werden.

**Zeit:** Zwei Lektionen

**Auftrag:**

   1. Erstelle einen neuen Ordner "lebenslauf".
   1. Öffne diesen Ordner in Visual Studio Code (wie gelernt in Auftrag I).
   1. Erstelle darin ein File `index.html`. Gebe diesem die Grundstruktur, welche jedes HTML-File benötigt.
   1. Verfasse nun den **Inhalt** der Website. Die Website muss enthalten:
      1. Dein Name als Hauptüberschrift
      1. Foto von dir.
      1. Folgende Unterkapitel mit entsprechendem Inhalt:
         1. "Steckbrief" als Liste (Wichtigste Daten wie Geburtsdatum, Wohnort, ...)
         1. "Hobbies"
         1. "Bisherige Schulen"
         1. "Lieblingswitz"
         1. "Traum-Ferienziel" (kurze Beschreibung mit Foto aus Internet)
         1. Optional: weitere Kapitel
    1. Versehe den Inhalt mit den passenden HTML-Elementen: Überschriften, Listen, Abschnitte, ... Versuche, alle bisher gesehenen HTML-Elemente zu verwenden.
    1. Erstelle nun ein File `style.css` und binde es im HTML-File ein.
    1. Style nun mithilfe von CSS deine Website ansprechend. Versuche, alle bisher gelernten CSS-Elemente zu verwenden. Verwende `id` und `class`, um einzelne resp. ausgewählte Elemente zu stylen.
    1. *Optional:* Informiere dich über Grid-Layouts (unten). Nutze diese so, dass die Website auf Mobilgeräten optimiert dargestellt wird.
    1. **Abgabe:**
       1. Erstelle ein ZIP-File mit *allen* für die Website benötigten Dateien: `index.html`, `style.css`, alle Bilder, ... (Brauchst du Hilfe dazu? [[https://www.youtube.com/watch?v=Kw9gB4iqUAQ|Zip-Tutorial für Windows]], [[https://www.youtube.com/watch?v=SUlI3-3mkU0|Zip-Tutorial Mac]])
       1. Benenne das ZIP-File nach dem Muster "klasse\_vorname\_nachname.zip", z.B. "2mgz\_dagobert\_duck.zip" und gebe es über die **Teams-Abgabe** ab.

==== Optionale Theorie: Responsive Layout mit Grid ====

Mithilfe des **Grid Layout Modules** kann man seiner Website ein Raster zugrundelegen, welches sich dynamisch anpasst, z.B. wenn man die Fenstergrösse des Browsers verändert oder die Website auf einem Smartphone anschaut. Einzelne Elemente der Website können dann den Zellen des Rasters zugeordnet werden:

{{ :gf_informatik:web_sca:grid_layout.png?400 |}}


=== Grid Einrichten ===

Erzeuge im Body des HTML-Seite ein div-Element und weise diesem die Klasse 'Container' zu:
<code html>
<body>
    <div class="container">
        <!-- Füge hier alle Elemente hinzu, die im Grid angezeigt werden sollen -->
    </div>
</body>
</code>
**Klassen** sind **Selektoren**, genau so wie Elemente (h1, h2, strong, ...). Wir können diese also dann im CSS-File stylen:
<code css>
.container{
    property: value;
}
</code>
Beachte, dass vor einer Klasse im CSS immer ein Punkt geschrieben werden muss.

Die **Grundeinstellungen** im CSS für ein 4x3-Grid sehen wie folgt aus:
<code css>
body{
    margin: 0; /* damit kein Rand um Grid-Container */
}

.container {
    display: grid;
    width: 100vw; /* 100% der verfügbaren Breite */
    height: 100vh; /* 100% der verfügbaren Höhe */

    grid-template-columns: 1fr 2fr 2fr; /* drei Spalten, wobei die 2. und 3. beide doppelt so breit sind wie erste */
    grid-template-rows: 60px 1fr 1fr 50px; /* vier Zeilen, erste und letzte haben fix angegebene Höhe, ... */
    
    gap: 10px; /* gap um Elemente des Grids */
}
</code>
Nun wollen wir dem Grid ein **Elemente** hinzufügen, wie: header, footer, sidebar oder content.
Machen wir ein Beispiel:
<code html>
<div class="container">
    <div class="content">Content</div>
</div>
</code>

<code css>
.content{
    grid-column: 2 / 3; /* erste Zahl: in welcher Zeile beginnt, zweite Zahl: in welcher aufhört */
    grid-row: 2;
}
</code>
Mit `grid-column` und `grid-row` kann angegeben werden, über welchen Bereich des Rasters sich das Element erstreckt. Alternativ kann man auch `grid-column-start, grid-column-end, ...` verwenden.

=== Responsive Grid ===

Typischerweise möchte man, dass sich das Grid anpasst, wenn man eine Website auf einem kleineren Bildschirm wie einem Smartphone anschaut. Mit der folgenden **Medienabfrage** kann man angeben, wie sich die Darstellung ändern soll, wenn die Breite des Viewports unter einen gewissen Wert fällt:
<code css>
@media only screen and (max-width: 500px) {
    /* überschreibe hier für alle Selektoren, für die sich etwas ändern soll, die entsprechenden Werte, wie z.B. */
    .container{
        grid-template-columns: 1fr;
        /* ... */
    }
}
</code>
Falls ein Element in einer gewissen Situation gar nicht mehr angezeigt werden soll, z.B. die Sidebar in der Mobile-View, passe einfach seine `visibiliy` an:
<code css>
display: none;
</code>

Mehr Infos über **Medienabfragen (Media Queries)** wie diejenigen im Beispiel oben findest du zum Beispiel unter:
   * https://wiki.selfhtml.org/wiki/CSS/Media_Queries
   * https://www.w3schools.com/cssref/css3_pr_mediaquery.php

Die Website responsive zu machen ist ein wenig mühsam, wenn man die Ranges der einzelnen Grid Elemente wie oben beschrieben mit `grid-column` und `grid-row` festlegt, da man dann die CSS-Einträge sämtlicher Grid Elemente anpassen muss. Alternativ kann man mit `grid-template-areas` arbeiten, dann muss man nur Veränderungen im Eintrag für `.container{...}` vornehmen. Dazu muss man den Elementen einen Namen zuweisen und kann dann über die Namen die Zuteilung der Zellen vornehmen:
<code css>
.container {
    ...
    grid-template-areas: 
    "h h h"
    ...
    ;
    ...
}

.header{
    grid-area: h;
}
</code>

=== Links ===

   * Sehr gutes Video-Tutorial (englisch): https://www.youtube.com/watch?v=Y9rHsdCxU8Q
   * https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid
   * https://css-tricks.com/snippets/css/complete-guide-grid/

===== - JavaScript =====

Die weltweit am meisten verwendete Programmiersprache ist JavaScript, die Sprache, mit denen man Webseiten programmieren kann. 

==== JS einbinden ====

Erstelle ein File `script.js` (js für JavaScript) im gleichen Ordner wie das `index.html` File. Binde das JS-File nun im HTML ein, in dem du in dessen *head* die folgende Zeile hinzufügst:
<code html>
<html>
<head>
    ....
    <script src="script.js"></script>
</head>
<body>
    ....
</body>
</html>
</code>

Alle Sprachelemente wie Variablen, Schleifen, Verzweigungen und Funktionen gibt es auch in JavaScript - der Syntax (die Sprachregeln) sind nur etwas anders. Im folgenden Codeblock werden für alle kurze Beispiele gemacht.

==== Bemerkungen und Tipps ====

   * Alle Codezeilen müssen mit **Semikolon** enden.
   * Anstelle von Einrückungen wie in Python arbeitet man mit **geschwungenen Klammern** `{...}`, um Codeblöcke zu kennzeichnen.
   * Verwende **AutoComplete** in VSCode: Um z.B. eine for-Schleife zu programmieren, tippe `for`, wähle dann "$\square$ for" aus und drücke Enter und schon hast du das Grundgerüst für eine for-Schleife.
   * Verwende **ChatGPT** o.ä.
   * **Konsole im Browser:** Im JS-Code kannst du mit `console.log(...)` dort etwas ausgeben. Auch Fehler werden dort angezeigt. Die Browser-Konsole öffnet man wie folgt: Rechte Maustaste und ...
     * Chrome: "Untersuchen" -> "Konsole"
     * Safari (Mac): "Element-Informationen" -> "Konsole"


==== JavaScript Basics ====

Hier werden die wichtigsten Sprachelemente von JavaScript ganz kurz erklärt:

<code javascript>
// IN KONSOLE AUSGEBEN (quasi das print() von JavaScript)
console.log(42);

// VARIABLEN & KONSTANTEN
let x = 42; // Variablen benötigen let
const y = 43; // Konstanten sind wie Variablen, ausser dass sie sich nicht verändern lassen.
// im Zweifelsfall: einfach let verwenden

// WHILE-SCHLEIFE
let i = 0;
while (i < 10) {
    console.log(i);
}

// FOR-SCHLEIFE
for (let i = 0; i < 10; i++) {
    console.log(i);
}

// VERZWEIGUNG
x = 42;
if (x > 0) {
    console.log("Zahl positiv");
} else if (x == 0) {
    console.log("Zahl Null");
} else {
    console.log("Zahl negativ");
}

// FUNKTION
function mySquare(x) { // Deklaration der Funktion
    return x*x;
}

let sq = mySquare(5); // Funktionsaufruf
console.log(sq);

</code>

==== Beispiele für JS ====

=== Eingabe / Input ===

<code html>
<input type="number" id="inputNumber" placeholder="Gib eine Zahl ein" onchange="handleKeyPress(event)">
// gibt andere types: wie text, date, password
// onchange="handleKeyPress(event)": JS-Funktion handleKeyPress wird aufgerufen, sobald Enter gedrückt wird
// alternativen zu onchange:
   // oninput: Aufruf sobald Input geändert
   // onkeydown, onkeyup
   // on...
</code>

<code javascript>
function handleKeyPress(event) {
    let inputNr = document.getElementById("inputNumber"); // identifiziert HTML-Element über dessen ID
    console.log(inputNr.value); // und gibt dessen Wert aus
}
</code>

=== HTML-Element mit JS ändern ===

<code html>
<p>Die Zahl: <span id="spanNr"></span></p>
</code>

<code javascript>
// kann in JS über id direkte auf Element zugreifen:
spanNr.textContent = 41;
</code>

++++Alternative Methode|

Alternativ kann man mit `document.getElementById()` auf ein Element zugreifen, dieses in einer Variable speichern und über diese dann den Wert ändern.

Vorteil: Code etwas einfacher nachvollziehbar, gerade wenn länger ist.

Nachteil: mehr Code 

++++
==== Auftrag: Dies und das ====

**Idee:** Einfache Website mit JavaScript programmieren, die einige kleine (mehr oder weniger) nützliche Tools beinhaltet:

{{ :gf_informatik:web_sca:diesunddas_1.png?300 |}}
{{ :gf_informatik:web_sca:diesunddas_2.png?300 |}}

**Vorgehen:**

   1. **Zusammen "Schnapps-Bier-Sirup"** programmieren.
   1. Selber einige der restlichen Tool programmieren. Tipps:
      1. Siehe Tutorial oben und Tipps unten.
      1. Recherchiere selbst im Internet
      1. verwende AI (auf sinnvolle Art und Weise)
   1. Website mit CSS **stylen**
   1. eigene Idee(n) einbauen

++++Tipps Clicker|

   * Erstelle im JavaScript-Code eine Variable, z.B. `counter`, die zählt, wie oft man bereits geklickt hat.
   * Erstelle im HTML einen Button.
   * Über den Even `onclick` (ganz ähnlich wie `onchange` beim SBS) wird beim Klicken auf den Button ...
   * ... eine Funktion im JavaScript-Code aufgerufen, die die Variable `counter` um $1$ erhöht.
   * Vergesse auch nicht, den `counter` anzuzeigen.

++++

++++Tipps No Click no Fun|

   * Für die Wahrscheinlichkeit: mit `Math.random()` erzeugst du Zufallszahlen zwischen $0$ und $1$, z.B. $0.4159567158853703$. Wenn diese Zahl unter einem gewissen Wert ist, z.B. $0.1$ (also $10%$), wird counter zurückgesetzt.

++++

++++Tipps Würfel|

   * Mit `Math.floor(Math.random() * 6) + 1;` erzeugst du eine zufällige natürliche Zahl im Bereich von $1$ bis und mit $6$.
   * Für Anzeige des Würfels: verwende HTML-Element **canvas**. Recherchiere online.

++++

++++Tipps Buchstabenzähler|

   * Verwende ein Textfeld (textarea)

++++

===== Lösungen LP =====