HTML

Lernziele

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

Präsentation

Ziele:

Visual Studio Code installieren und kennenlernen
Einfaches Grundgerüst der Website erstellen

Lade den Editor Visual Studio Code (kurz VSCode) herunter und installiere diesen: https://code.visualstudio.com
Erstelle einen Ordner mit Namen website_ksr und speichere an einem passendenden Ort auf deinem Computer.
Starte nun VSCode und öffne darin diesen Ordner: Datei > Ordner öffnen > Ordner website_ksr suchen und öffnen.
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.
Erstelle nun eine neue Datei, die zwingend den Namen index.html haben muss.

Öffne nun index.html in VSCode und erstelle darin das Grundgerüst der Website. Tippe dazu folgendes ab (nicht copy paste):

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

Verschaffe dir einen Überblick über den HTML-Code oben:
- 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
Gratulation, du hast deine erste Website erstellt! Öffne sie nun im Browser: Navigiere im Datei 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.

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

Studiere die Theorie unten. Probiere alle dort vorgestellten Elemente (ausser <div> kurz in deiner HTML-Datei 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!
Kopiere dann den reinen Text der Website in den Body der Datei index.html, die du im letzten Kapitel erstellt hast.
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
Lade das Bild herunter und kopiere es in den Ordner, in dem sich die index.html-Datei befindet:
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: Achtung: Mache nicht zu viele Schritte auf einmal. Gehe stattdessen wie folgt vor:
1. Setze ein einziges HTML-Element um (z.B. h1-Überschrift)
2. Speichere die HTML-Datei.
3. Zeige die Website im Browser an / Lade die Website neu:
  - Windows: F5 (Achtung: ev. muss zusätzlich Fn gedrückt werden)
  - MacOS: ⌘+R
4. 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

Hilfe zu Paragraphen/Fliesstext

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>

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 (en: '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 Datei, 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 (dafür ist der Schrägstrich am Schluss des Tags).

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:

Sammlung wichtigster VSCode Shortcuts:

Mehrere Cursor: Ctrl+Alt+↑/↓ / ⌘+⌥+↑/↓
Code Formatieren: Shift+Alt+F / Shift+⌥+F

Sammlung wichtigster allgemeinder Shortcuts:

Speichern: Ctrl+S / ⌘+S
Select All: Ctrl+A / ⌘+A
Cut, Copy, Paste: Ctrl+X,C,V / ⌘+X,C,V
Fenster wechseln: Alt+Tab / ⌘+Tab

HTML

Grundgerüst einer Website

Auftrag I

Website erstellen mit HTML

Auftrag II

Theorie zu HTML-Elementen

Lösungen LP