Websiten & HTML 2022 [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.
====== - Websiten & HTML 2022 ======

===== - Slides =====

{{ :gf_informatik:web_sca:2022_internet_01_websites.pdf |}}

===== - HTML Grundlagen =====

Websiten werden mit der **HTML** erstellt. Sie bestehen also aus Text, der dann vom Browser in eine (hoffentlich hübsche) Darstellung übersetzt wird. HTML steht für **HyperText Markup Language** und ist eine sogenannte Auszeichnungssprache und //keine// Programmiersprache.

Der Inhalt einer Website wird mit **Tags** strukturiert. Eine Überschrift realisiert man z.B. mit `<h1>Ich bin eine Überschrift!</h1>`.

Das folgende Bild zum Beispiel zeigt die Wikipedia Seite von der Grumpy Cat: Auf der linken Seite das, was man als Wikipedia-Besucher:in sieht, rechts, der zugehörige HTML-Text.

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

==== Grundstruktur ====

HTML gibt eine Grundstruktur vor, die alle HTML-Dateien einhalten sollten. Im `head` werden **Metadaten** gespeichert, zum Beispiel der Titel der Webseite, der im Browser-Tab dargestellt wird; im `body` folgt der eigentliche Inhalt:

<code html>
<html>
  <head>
    <title>Dies ist der Titel</title>
  </head>
  <body>
    <p>Hier folgt der Inhalt</p>
  </body>
</html>
</code>

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


==== Wichtigste Elemente ====

=== Block-Elemente ===

Block-Elemente werden typischerweise untereinander angeordnet und nehmen die //ganze verfügbare Breite// ein. Sie können Text, andere Block-Element oder auch Inline-Element (s.u.) enthalten.

Die wichtigsten Struktur-Elemente sind die folgenden:
<code html>
<h1>Überschrift/Header 1. Ordnung</h1>
<h2>Überschrift/Header 2. Ordnung</h2> <!-- Unterkapitel -->
<h3>Überschrift/Header 3. Ordnung</h3> <!-- Unterunterkapitel -->
<!-- h4, h5 usw. -->

<p>Abschnitte (en. paragraph) strukturieren den Text</p>

<ul>
  <li>Listen (ul: unnumbered list)</li>
  <li>li: list item</li>
</ul>
</code>

=== Inline-Elemente ===

Bereiche im **Lauftext** können auch ausgezeichnet werden. Sogenannte *Inline-Tags* können keine Block-Element enthalten.
<code html>
Text kann <em>betont (en. emphasis)</em> oder <strong>stark betont</strong> werden.
</code>

=== Attribute ===

Gewisse Tags benötigen *Attribute*, um zusätzliche Informationen angeben zu können. Diese folgen innerhalb der Spitzklammern des Tags, nach dem Tag-Namen. Wir nennen hier zwei Beispiele:

== Hyperlinks ==

Hyperlinks (Tag: `<a>` für *anchor*) benötigen ein `href` Attribut (für *hyper reference*).

<code html>
Dieser Text enthält einen 
<a href="http://ksr.ch">Link zur KSR</a>.
</code>

Übrigens waren Hyperlinks das ursprünglich revolutionäre Merkmal von HTML, und das was es zum *Hypertext* macht: die Möglichkeit, aus einem Text gleich zu einem anderen springen zu können, was in keinem Buch oder anderen linearen Medium möglich ist.

== Bilder ==

Bilder werden mit dem `<img>` Tag eingebettet, wobei der Dateiname des Bilds im `src`-Attribut angegeben werden. Weil der Bild-Tag keinen Inhalt hat, braucht er auch keinen End-Tag; stattdessen wir der Tag gleich mit einem Schrägstrich geschlossen. Mit Einstellungen wie *width* oder *height* kann das Bild in die passende Grösse gebracht werden.

<code html>
<img src="tigerente.jpg" width="200"/>
</code>

{{ :gf_informatik:tigerente.jpeg?nolink&200 |}}

==== Beispiel ====

Der folgende HTML-Ausschnitt

<code html>
<h4>Kanti Romanshorn</h4>
<p>Die Kanti Romanshorn ist die Kanti in Romanshorn!<p>
<p>Hier einige <strong>wichtigen Infos</strong> zur Schule:<p>
<ul>
  <li>1969 startet die <em>erste Klasse</em></li>
  <li>1988 wird das Hauptgebäude eingeweiht</li>
</ul>
<a href="http://ksr.ch">Link zur Website der KSR</a>.
</code>

sieht im Browser wie folgt aus:

<HTML>
<div style="border: 1px solid #ccc; border-radius: 4px; padding: 9.5px">
<h4>Kanti Romanshorn</h4>
<p>Die Kanti Romanshorn ist die Kanti in Romanshorn!<p>
<p>Hier einige <strong>wichtigen Infos</strong> zur Schule:<p>
<ul>
  <li>1969 startet die <em>erste Klasse</em></li>
  <li>1988 wird das Hauptgebäude eingeweiht</li>
</ul>
<a href="http://ksr.ch">Link zur Website der KSR</a>.
</div>
</HTML>

==== Auftrag I: Einfache Website mit HTML ====

**Ziel:** Erstelle eine einfache Website, die die wichtigsten HTML-Sprachelemente beinhaltet.

**Vorgehen:**

   1. Websiten können mit jedem beliebigen **Editor** erstellt werden. **Empfehlung:** Installiere den Editor **Visual Studio Code** (kurz: VSC oder VSCode), Link: https://code.visualstudio.com\\
Übrigens: VSCode eignet sich auch super, um in Python zu programmieren.
   1. Erstelle ein File namens **index.html** und speichere es auf deinem Computer. Am besten in einem Ordner, der gesichert wird (z.B. über OneDrive).
   1. Erstelle das **Grundgerüst** der Website.
   1. Öffne die Website jetzt in deinem Browser. Sobald du Änderungen im HTML-Code gemacht (und gespeichert) hast, refreshe den Browser, um die Änderungen zu sehen.
   1. Füge nun alle oben besprochenen **Elemente** (Überschriften, Paragraphen, Hyperlinks, Listen, Bilder, Inline, ...) hinzu.
   1. Die Website muss noch nicht hübsch aussehen. Wie man eine Website schön gestaltet, lernst du später.



===== - 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 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]]

==== Auftrag II: Website mit CSS stylen ====

**Auftrag in Kürze:** Formatiere deine Website aus dem vorherigen Auftrag mithilfe eines ein CSS-Files.

**Auftrag in Detail:**

  1. Erstelle im Website-Ordner eine Datei style.css.
  1. Verknüpfe die CSS-Datei mit deiner HTML-Datei.
  1. Lade die HTML-Datei im Browser neu.
  1. Formatiere die Webseite mit Farben, Schriftarten, Hintergrundfarben etc... Hole dir auf der Website [[https://wiki.selfhtml.org/wiki/CSS|SelfHTML]] Inspiration. Tobe dich aus!

===== - Grid Layout =====

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.svg |}}


==== Aufträge ====

=== Auftrag I (Website mit Grid) ===

   * Informiere dich darüber (siehe [[gf_informatik:web_sca:websites#grid_einrichten|Theorie zu 'Grid einrichten']] und [[gf_informatik:web_sca:websites#links|Links]] unten), wie man ein Grid für seine Website erzeugt.
   * Erstelle eine neue Website mit einem Grid-Layout, welches folgende Eigenschaften hat:
     * Header und Footer über ganze Breite mit festgelegter Höhe (Header/Footer ganz oben/unten).
     * Dazwischen links: Platz für eine Sidebar
     * Platz rechts davon, zwischen Header und Footer: Mehrere Rasterbereiche mit unterschiedlicher Grösse für Hauptinhalt.
   * Arbeite in Chrome im [[gf_informatik:web_sca:websites#entwicklungsmodus|Entwicklungsmodus]].
   * Die Website könnte etwa so aussehen:{{ :gf_informatik:web_sca:grid_layout_example_01.png?400 |}}

=== Auftrag II (Website mit responsive Grid) ===

   * Erweitere deine Website mit Raster von der vorherigen Aufgabe so, dass das Grid responsive wird und sich sinnvoll anpasst, wenn die Breite der Website einen gewissen Pixelwert unterschreitet.
   * Informationen dazu findest du [[gf_informatik:web_sca:websites#responsive_grid|hier]].
   * Macht man das Beispiel von der letzten Aufgabe schmaler, könnte es etwa so aussehen:{{ :gf_informatik:web_sca:grid_layout_example_01b.png?200 |}}


=== Auftrag III (Kombination der beiden Websiten) ===

   * Ziel ist, deine erste Website vom HTML/CSS-Teil mit einem responsive Grid auszustatten.
   * Erstelle dazu eine neue Website mit einem Grid-Layout, welches zu deiner ersten Website passt.
   * Kopiere dann die Inhalte von dieser hinein.
   * **Schicke** der Lehrperson per Teams Screenshots von Website im Browser, HTML- und CSS-Code bis am **kommenden Samstag 23.59**

==== 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/


===== Entwicklungsmodus =====

Beim Programmieren einer Webseite stösst jeder früher oder später auf Probleme - weshalb macht der Browser jetzt nicht, was ich ihm sage? Die schnellste Art, herauszufinden, was der Browser macht, sind die Entwicklungstools. Am einfachsten öffnest du die, indem du den interessierenden Bereich der Webseite anwählst und im Kontextmenü `Untersuchen` (en. `Inspect`) auswählst.

Direkt öffnen die Tools auch via Ctrl+Shift+I (Windows) oder Alt+Cmd+I (Mac). 

Neben der Anzeige von HTML und CSS kann auch die Anzeige auf einem Mobiltelefon simuliert werden.