Hypertext Markup Language
HTML ist eine sogenannte Auszeichnungssprache. Mit ihr können Dokumente strukturiert werden. Die Struktur wird mittels Verschachtelung von vordefinierten 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>Der Lesbarkeit zu Liebe, werden die inneren Elemente eingerückt.
head-Element
Das head-Element beinhaltet Informationen, wie den Titel der Webseite.
<html>
<head>
<title>Meine erste Webseite</title>
</head>
<body>
Hallo Welt
</body>
</html>body-Element
Im body-Element wird der sichtbare Inhalt der Webseite, also Texte, Überschriften, Bilder und alles Andere 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>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 deinen HTML-Editor (Thonny oder was anderes) und aktiviere die Dateiliste (in Thonny unter View/Ansicht)
- Erstelle eine Textdatei mit dem obigen Inhalt und speichere diese im oben-erstellten Verzeichnis als
index.htmlab - Gehe in den Datei-Explorer/Finder 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 dabei nicht ständig geschlossen werden!
- Ändere etwas im Editor und speichere die Datei ab +S
- Wechsle zum Browser und lade die Seite neu +R
Man kann auch die linke Hälfte des Bildschirms für den Editor verwenden und auf der rechten die Webseite anzeigen.
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 die höchste Überschrift
<h1>Willkommen</h1>h2bish6- weitere Überschriften für Unterkapitel bis zum 6. Level, die kleiner dargestellt werden
Daneben gibt es sogenannte Inline-Elemente, die verwendet werden, um Textteile innerhalb eines Block-Elementes zu kennzeichnen:
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>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>Aufgabe: Links
- Baue einige Links zu externen Seiten ein
- erstelle eine zweite Seite
kontakt.htmlund verlinke diese mitindex.html - Vergiss nicht einen Link zurück zur Startseite einzubauen
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 dessrc-Attributes an, so dass er dem Dateinamen des abgespeicherten Bildes entspricht
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.