# HTML

Die Hypertext Markup Language ist eine sogenannte Auszeichnungssprache. Mit ihr können Dokumente strutkuriert werden. Die Struktur wird mittels Verschachtelung von HTML-Elementen erreicht

# HTML-Elemente

HTML-Elemente werden durch sogenannte Tags gekennzeichnet. Ein Tag wird durch kleiner/grösser-Klammern gekennzeichnet. Das Element beginnt mit dem öffnenden Tag <element-name>, dann kommt der Inhalt, dann das schliessende Tag </element-name>:

<element-name>Inhalt</element-name>

# Struktur

Eine HTML-Datei hat eine vorgegebene Struktur. Gewisse Elemente müssen vorhanden sein und einige Verschachtelungen sind nicht erlaubt. Jedes Dokument hat als Grundelement ein html-Element, das alles andere umfasst. Direkt darin ist das head- und das body-Element.

<html>
  <head></head>
  <body></body>
</html>

1
2
3
4

# head-Element

Das head-Element beinhaltet Zusatzinformationen, wie der Titel der Webseite und weitere Metainformation

<html>
  <head>
    <title>Meine erste Webseite</title>
  </head>
  <body></body>
</html>

1
2
3
4
5
6

# body-Element

Im body-Element wird der gesamte Inhalt der Webseite, also Text, Überschriften, Bilder, usw. verpackt.

<html>
  <head>
    <title>Meine erste Webseite</title>
  </head>
  <body>
    <h1>Willkommen</h1>
    <p>Wie geht es so? <strong>Ich freue mich, dass du da bist!</strong></p>
  </body>
</html>

1
2
3
4
5
6
7
8
9

Willkommen

Wie geht es so? Ich freue mich, dass du da bist!

Aufgabe

Erstelle ein neues Verzeichnis mit dem Namen webseite. Hier kommen alle zur Webseite gehörenden Dokumente rein.
Öffne einen Text-Editor (z.B. Notepad++)
Erstelle eine Textdatei mit dem obigen Inhalt und speichere diese im oben-erstellten Verzeichnis als index.html ab
Gehe in den Datei-Explorer und mache einen Doppelklick auf das soeben erstellte Html-Dokument

# Text-Struktur

Es gibt sogenannte Block-Elemente, welche den Text strukturieren. Diese Elemente sollten nicht ineinander verschachtelt werden:

p-Element: steht für Paragraph, also Absatz; <p>Wie geht es so?</p>
h1-Element: steht für Heading 1, also Überschrift 1; <h1>Willkommen</h1>
h2 bis h6: weitere Überschriften für Unterkapitel bis zum 6. Level

Daneben gibt es sogenannte Inline-Elemente, die verwendet werden um Textteile innerhalb eines Block-Elementes zu kennzeichen:

strong: Starke Hervorhebung (normalerweise fett); <strong>Ich freue mich, dass du da bist!</strong>
em: emphasis, leichte Hervorhebung (normalerweise kursiv); <em>Ich freue mich, dass du da bist!</em>

Aufgabe

Passe deine Webseite an:

erstelle einige Überschriften
füge einige Absätze hinzu

# Attribute

Gewisse Elemente benötigen Zusatzinformation. Diese wird mit sogenannte Attributen im öffnenden Tag drin gesetzt. Attribute bestehen aus einem festen Namen und einem variablen Wert:

<element-name attributname="attributwert">Inhalt</element-name>

# Bilder

img-Elemente haben keinen Inhalt – es gibt darum kein schliessendes Tag. Das Bild ist in einer externen Bilddatei und darauf muss natürlich verwiesen werden, sonst findet der Browser die Bilddatei nicht.

<img src="bild1.jpg">

Aufgabe

Wir versuchen ein Bild einzubauen. Gehe dabei wie folgt vor:

Suche ein Bild und speichere es in deinem Webseiten-Ordner ab
füge ein img-Element hinzu. Passe dabei den Wert des src-Attributes auf den Namen der Bilddatei an

# Links

Klickbare Links erzeugt man mit dem anchor-Element. Der Inhalt des Elementes ist klickbar, die zu öffnende URI gibt man mit dem Attribut href an.

<a href="https://www.gymkirchenfeld.ch">Meine Schule</a>

Meine Schule

Aufgabe

Baue einige Links zu externen Seiten ein
erstelle eine zweite Seite kontakt.html und verlinke diese

# CSS

Die Webseite soll ja nicht nur einen tollen Inhalt haben, sondern auch grafisch etwas hermachen. Dazu formuliert man «Formatvorlagen», sogenannte Cascading Style Sheet-Regeln.

Eine Regel besteht immer aus zwei Teilen:

Für welche Elemente soll sie gelten
Wie sollen diese Element gestaltet werden

# Selektor

Wir verwenden nur den Element-Selektor (es gibt noch andere).

element-name {

}

1
2
3

Die obenstehende Regel gilt für alle Elemente vom Typ element-name. Zwischen die geschweiften Klammern kommen nun die Formatierungsbefehle.

# Formatierungsbefehle

Formatierungsbefehle bestehen aus dem Namen der Eigenschaft die man formatieren möchte und einem Wert. Je nachdem was formatiert wird, stehen als Werte Farben, Masse und vordefinierte Werte zur Auswahl

element-name {
  eigenschaft1: wert;
  eigenschaft2: wert;
  ...
}

1
2
3
4
5

# Beispiel

Die folgenden Regeln setzen eine andere Schriftart, machen den Hintergrund der Seite schwarz, den Text farbig und einen Rahmen um die Überschrift:

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: black;
}

h1 {
  color: yellow;
  border: 1px dotted pink;
}

p {
  color: green;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# mit HTML-Dokument verknüpfen

In den HTML-Dokumenten können wir nun einen Verweis auf die CSS-Datei hinzufügen. So können auch mehrere HTML-Dokumente dieselbe CSS-Datei verwenden:

<html>
  <head>
    <title>Meine erste Webseite</title>
    <link rel="stylesheet" href="style.css">
  </head>
  ...

1
2
3
4
5
6

Aufgabe

Erstelle eine Textdatei mit dem obenstehenden CSS-Regeln und speichere sie im Ordner webseite als style.css ab
Füge im head-Element deiner HTML-Dokumente einen Link zur CSS-Datei ein (Zeile 4, unterhalb von title)
Lade dein HTML-Dokument im Browser neu (Ctrl+R)
Passe Schriftart, Farben und weitere Dinge an, so wie es dir gefällt

Hier findest du weitere Eigenschaften:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften (opens new window)

# Server

Normalerweise müsste man eine Webseite auf einem Server im Internet veröffentlichen, sonst kann sie nicht erreicht werden. Dein Schulcomputer steht nicht direkt im Internet, jedoch bei uns im LAN des Gymers. Wenn wir darauf einen Webserver starten, so können alle anderen Geräte am Gymer auf diese Seite zugreifen.

# Starte deinen Webserver

Wir gehen wie folgt vor:

Speichere den untenstehenden Befehl als Inhalt einer Textdatei mit dem Namen serve.cmd in deinem Webseiten-Ordner ab
Starte den Webserver durch Doppelklick auf serve.cmd im Datei-Explorer

python -m http.server --bind 0.0.0.0

# Besuche eine Webseite

Stelle sicher, dass dein Kollege/deine Kollegin den Webserver gestartet hat und erkundige dich nach dem Computernamen. (steht oben am Bildschirm)
Gib den Computernamen in der Adresszeile deines Browsers ein, gefolgt von :8000
Für den Lehrer-PC im Zimmer 025, also PC525 wäre das: http://pc525:8000 (opens new window)

← Filius-Workshop Prüfung →