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>Beispiel: title-Tag mit Inhalt
<title>Meine erste Webseite</title>
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>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>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>Das obige HTML-Dokument wird vom Browser so ausgegeben:
Willkommen
Wie geht es so? Ich freue mich, dass du da bist!
Wir wollen nun eine eigene Webseite erstellen.
HTML-Editoren
HTML-Dateien können in einfachen Texteditoren wie Editor (Windows) oder TextEdit (MacOS) erstellt und bearbeitet werden. Da diese die HTML-Syntax (Sprach-Regeln) nicht kennt und macht somit kein Syntax-Highlighting (unterschiedliches einfärben bestimmter Sprach-Elemente) – wie z.B. Thonny das bei Python-Skripten macht. Du findest aber andere Editoren, die das für HTML und andere Sprachen können. Zwei seien hier empfohlen:
Aufgabe: Eigene Webseite erstellen
- Erstelle in deinem Informatikordner einen neuen Ordner mit dem Namen
webseite. Hier kommen später alle zur Webseite gehörenden Dateien rein. - Erstelle eine neue Text-Datei und speichere diese im
webseite-Ordner alsindex.htmlab. Kopiere den folgenden Code in die Datei:
<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>- Gehe in den Datei-Explorer und mache einen Doppelklick auf das soeben erstellte HTML-Dokument. Mit welchem Programm wird die Datei geöffnet? Warum?
- Öffne die Datei mit einem Texteditor.
- Platziere das Browser-Fenster und das Editor-Fenster nebeneinander auf dem Bildschirm.
Nun kannst du zwischen dem Editor und dem Browser hin- und herwechseln. Die Programme müssen so nicht ständig geschlossen werden! Ändere etwas im Editor, speichere die Datei ab + S, wechsle zum Browser und mache einen Reload + R
- Ändere den Text im
h1-Element und speichere die Datei ab. Lade die Seite im Browser neu. Was passiert?
Lösung: Eigene Webseite erstellen (nicht angemeldet)
Diese Lösung ist nur für angemeldete Benutzer zugänglich – wenn die LK die Lösung freigegeben hat. Bitte melde dich an, um die Lösung einsehen zu können.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 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>
Attribute
Gewisse Elemente benötigen Zusatzinformationen. Diese wird mit sogenannten Attributen im öffnenden Tag drin gesetzt.
Attribute bestehen aus einem festen Namen und einem variablen Wert:
<element-name attributname="attributwert">Inhalt</element-name>Beispielsweise kann man mithilfe des Attributs style in den Text-Struktur-Elementen h1 und p den Text farbig hervorheben:
<h1 style="color:blue;">Blaue Überschrift</h1>
<p style="color:red;">Roter Text</p>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 auf den Namen der Bilddatei an
Bild-Elementen kann man mit weiteren Attributen zusätzliche Eigenschaften setzen. Mit den Attributen width legt und heightkann man beispielsweise Höhe und Breite des Bildes festlegen
<img src="bild1.jpg" width="500" height="600" />Lösung (nicht angemeldet)
Diese Lösung ist nur für angemeldete Benutzer zugänglich – wenn die LK die Lösung freigegeben hat. Bitte melde dich an, um die Lösung einsehen zu können.Links
Klickbare Links erzeugt man mit dem anchor-Element (abgekürzt zu a). Der Inhalt des Elementes ist klickbar, die zu öffnende Seite gibt man mit dem Attribut href an.
<a href="https://www.gymkirchenfeld.ch">Meine Schule</a>Der Link kann sowohl zu einer anderen Seite im Internet führen (wie im Beispiel) als auch zu einer weiteren eigenen .html-Datei. Dazu kann man beim Attribut href den Namen der Datei angeben.
<a href="zweiteSeite.html">Meine zweite Webseite</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.
⭐ 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.