Hallo HTML!

Bevor wir mit JavaScript weitermachen, sollten wir die ersten Schritte zum Anlegen von Websiten machen. Websiten werden auf der Basis von HTML erstellt. HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache. HTML legt den Inhalt und die Struktur einer Website fest. Browser stellen HTML-Seiten dar. HTML-Seiten werden in Dateien mit der Endung html gespeichert. Das Grundgerüst einer solchen Seite sieht wie folgt aus:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hallo Welt</title>
  </head>
  <body>
    Hallo Welt!
  </body>
</html>

In der ersten Zeile findest du die sogenannte Dokumenttyp-Deklaration. Mit <!doctype html> legen wir fest, dass wir ein HTML5-Dokument schreiben. Eine andere Dokumenttyp-Deklaration sollte man heute für HTML nicht mehr verwenden.

Ab Zeile 2 folgt das eigentliche HTML-Dokument. HTML-Dokumente bestehen aus HTML-Elementen. html, head, meta, title und body sind die Elemente, die wir im obigen Beispiel verwendet haben. HTML5 kennt noch viele weitere Elemente. HTML-Elemente werden durch Tags beschrieben. Tags werden durch den Elementnamen mit spitzen Klammern notiert. Die meisten Elemente besitzen ein einleitendes und ein schließendes Tag. Das html-Element wird durch <html> eingeleitet und durch </html> geschlossen. Dazwischen befindet sich der Inhalt des Elements. Der Inhalt eines Elements besteht entweder aus weiteren Elementen oder aus Text. Dadurch entsteht eine hierarchische Struktur.

Jedes HTML-Dokument beginnt mit dem html-Element. Es ist das sogenannte Wurzel-Element. Das html-Element enthält genau zwei Elemente: den head und den body. Im body, dem Körper, befindet sich der eigentliche Inhalt des HTML-Dokuments. In unserem Beispiel den Text „Hallo Welt!“. Im head, dem Kopf, befinden sich Informationen über den im body befindlichen Inhalt.

Mit dem obigen meta-Element sagen wir, dass wir unser Dokument mit dem Zeichensatz UTF-8 geschrieben haben. Ohne genauer auf Zeichensätze einzugehen, empfehlen wir, HTML-Dokumente immer in UTF-8 zu schreiben. Dies stellt man in seinem Editor unter „Einstellungen“ ein. Das meta-Element ist ein Standalone-Tag. Es besitzt keinen Inhalt und wird deshalb nur mit einem Tag beschrieben. Dieses Tag kann entweder wie ein einleitendes Tag (<...>) oder wie eine Kombination aus einleitendem und schließendem Tag (<.../>) geschrieben werden. Zur besseren Unterscheidung empfehlen wir letzteres. Das meta-Element besitzt verschiedene Eigenschaften. „charset“ ist eine Eigenschaft des meta-Elements. Der Wert von chartset im obigen Beispiel in „utf-8“. Die meisten Elemente besitzen neben ihrem Inhalt Eigenschaften.

Mit dem title-Element geben wir unserem Dokument einem Titel. Der Titel wird an verschiedenen Stellen angezeigt. U.a. in der Titelleiste des Browserfensters, in der Titelleiste des Tabs und als Überschrift von Einträgen in Suchmaschinen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.


 *