# HTML

Die Hypertext Markup Language ist eine sogenannte Auszeichnungssprache. Mit ihr können Dokumente strukturiert 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>
    Hallo Welt
  </body>
</html>

1
2
3
4
5
6
7
8

# 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 Thonny und aktiviere die Dateiliste (unter View/Ansicht)
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

Nun kannst du zwischen dem Editor und dem Browser hin- und herwechseln. Die Programme müssen nicht ständig geschlossen werden! Ändere etwas im Editor, speichere die Datei ab +S, wechsle zum Browser und mache ein Reload +R

# 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 «Text»

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 «Bilder»

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 «Links»

Baue einige Links zu externen Seiten ein
erstelle eine zweite Seite kontakt.html und verlinke diese mit index.html
Vergiss nicht einen Link zurück zur Startseite einzubauen

Zusatzaufgabe

Ergänze deine Seite um «richtigen» Inhalt, z.B. über dich, dein Lieblings-Fussballteam oder deine Lieblings-Band, oder über dein Hobby oder sonst irgendetwas.

# 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 sie gelten soll
Wie diese Element gestaltet werden sollen

# Selektor

Mit Hilfe des sogenannte Selektors werden die Elemente ausgewählt, für welche die Regeln gelten sollen. Wir verwenden nur den Element-Selektor (es gibt noch andere).

element-name {
}

1
2

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

Wollen wir also alle Überschriften anpassen, dann schreiben wir den folgenden Selektor:

h1 {
}

1
2

# 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>
  ...
</html>

1
2
3
4
5
6
7

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 (+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)

← Einleitung World Wide Web →