Websiten & HTML 2022

1. Slides

2022_internet_01_websites.pdf

2. 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.

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: 

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

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: 

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

Inline-Elemente

Bereiche im Lauftext können auch ausgezeichnet werden. Sogenannte Inline-Tags können keine Block-Element enthalten. 

Text kann <em>betont (en. emphasis)</em> oder <strong>stark betont</strong> werden.

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 (Tag: <a> für anchor) benötigen ein href Attribut (für hyper reference). 

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

Ü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. 

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

Beispiel

Der folgende HTML-Ausschnitt 

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

sieht im Browser wie folgt aus:

Kanti Romanshorn

Die Kanti Romanshorn ist die Kanti in Romanshorn!

Hier einige wichtigen Infos zur Schule:

  • 1969 startet die erste Klasse
  • 1988 wird das Hauptgebäude eingeweiht
Link zur Website der KSR.

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.
  2. Erstelle ein File namens index.html und speichere es auf deinem Computer. Am besten in einem Ordner, der gesichert wird (z.B. über OneDrive).
  3. Erstelle das Grundgerüst der Website.
  4. Ö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.
  5. Füge nun alle oben besprochenen Elemente (Überschriften, Paragraphen, Hyperlinks, Listen, Bilder, Inline, …) hinzu.
  6. Die Website muss noch nicht hübsch aussehen. Wie man eine Website schön gestaltet, lernst du später.

3. 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:

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: 

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

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: 

strong {
  background-color: red;
}

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: 

body {
  background-color: lightgrey;
  font-family: sans-serif;
}
h3 {
  font-size: 5mm;
  color: darkgrey;
}
strong {
  background-color: red;
  padding: 1mm;
  border: 1px dashed black;
}

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

Title

Section heading

My first paragraph, it's so strong!

Weiterführende Links

Die Website SelfHTML bietet sowohl eine Einführung in CSS als auch ein Nachschlagewerk für die tausenden von Eigenschaften, Layouts, und Tricks.

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.
  2. Verknüpfe die CSS-Datei mit deiner HTML-Datei.
  3. Lade die HTML-Datei im Browser neu.
  4. Formatiere die Webseite mit Farben, Schriftarten, Hintergrundfarben etc… Hole dir auf der Website SelfHTML Inspiration. Tobe dich aus!

4. 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:

Aufträge

Auftrag I (Website mit Grid)

  • Informiere dich darüber (siehe Theorie zu 'Grid einrichten' und 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 Entwicklungsmodus.
  • Die Website könnte etwa so aussehen:

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 hier.
  • Macht man das Beispiel von der letzten Aufgabe schmaler, könnte es etwa so aussehen:

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: 

<body>
    <div class="container">
        <!-- Füge hier alle Elemente hinzu, die im Grid angezeigt werden sollen -->
    </div>
</body>

Klassen sind Selektoren, genau so wie Elemente (h1, h2, strong, …). Wir können diese also dann im CSS-File stylen: 

.container{
    property: value;
}

Beachte, dass vor einer Klasse im CSS immer ein Punkt geschrieben werden muss.

Die Grundeinstellungen im CSS für ein 4×3-Grid sehen wie folgt aus: 

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 */
}

Nun wollen wir dem Grid ein Elemente hinzufügen, wie: header, footer, sidebar oder content. Machen wir ein Beispiel: 

<div class="container">
    <div class="content">Content</div>
</div>
.content{
    grid-column: 2 / 3; /* erste Zahl: in welcher Zeile beginnt, zweite Zahl: in welcher aufhört */
    grid-row: 2;
}

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: 

@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;
        /* ... */
    }
}

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: 

display: none;

Mehr Infos über Medienabfragen (Media Queries) wie diejenigen im Beispiel oben findest du zum Beispiel unter:

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: 

.container {
    ...
    grid-template-areas: 
    "h h h"
    ...
    ;
    ...
}
 
.header{
    grid-area: h;
}

Links

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.

  • gf_informatik/web_sca/websites_2022.txt
  • Zuletzt geändert: 2023-09-07 20:06
  • von sca