decocode decocode deco    

HTML-Grundlagen #

index.html #

Eine lokal erstellte HTML-Datei kann unter einem beliebigen Namen, der kein Leerzeichen enthalten sollte, gespeichert werden. Die Endung des Dateinames kann für reine HTML-Dateien sowohl htm als auch html lauten, das spielt keine Rolle. Eine Startseite wird üblicherweise unter dem Namen index.html gespeichert. Dieser Dateiname ist festgelegt. Wenn man im Browser beispielsweise die URL (uniform resource locator) http://www.example.org/ aufruft, sucht der Browser sofort nach einer Datei, die unter diesem Pfad den Namen index trägt. Das kann eine index.htm, index.html, index.php oder Ähnliches sein, darum muss ich mich nicht kümmern. Dieses Verfahren verkürzt die URL und legt die erste Datei fest, die vom Browser angezeigt wird, wenn nur das Verzeichnis aber keine spezielle Datei in der URL angegeben wurde.

Selbst erstellte HTML-Dateien lassen sich im Browser über den Menü-Punkt Datei ► Datei öffnen… anzeigen. In der Adresszeile wird dann der Pfad zur Datei angezeigt, z. B. file:///home/user/Desktop/my_website/index.html.

Nach einer Änderung des Quelltextes muss man eine HTML-Datei im Browser neu laden, um die Änderung sichtbar zu machen. Dazu kann man die Taste F5 drücken.

HTML-Tags #

Die Beschreibung des Inhalts eines HTML-Dokuments erfolgt im Quelltext durch so genannte Tags, die einem bestimmten HTML-Element zugeordnet sind und durch spezielle Attribute konkretisiert werden können. Es können Elemente, mit denen allgemeine Dokumenteigenschaften definiert werden sowie Elemente, die den Dokumentinhalt beschreiben unterschieden werden. Im Browser erfolgt die Darstellung des Inhalts in der Reihenfolge der Elemente im Quelltext. Zeilenumbrüche im Quelltext werden ignoriert bzw. lediglich als Leerzeichen ausgegeben. Mehrere aufeinander folgende Leerzeichen im Quelltext werden im Browser zu einem zusammengefasst.

Elemente, die Inhaltsabschnitte beschreiben, bestehen in der Regel aus einem öffnenden Start- und einem schließenden Endtag. Das Starttag besteht aus dem Elementnamen, das von spitzen Klammern <> umschlossen wird. Zusätzlich kann das Starttag Attribute des Elements enthalten. Das Endtag besteht aus dem Elementnamen, dem ein Slash / vorangestellt ist und ebenfalls von spitzen Klammern umschlossen wird. Der zu beschreibende Inhalt wird nun von dem Start- und Endtag umschlossen.

Beispiel:

<a href='http://www.decocode.de/?15'>decocode HTML5-Tutorial</a>

Hier wird dem Text ›decocode HTML5-Tutorial‹ das Tag <a> zugewiesen, das für einen Hyperlink steht. Das Starttag enthält zusätzlich das Attribut href für das Verknüpfungsziel mit dem Wert http://www.decocode.de/?15, der von zwei '-Zeichen umschlossen ist. Es können hier auch "-Zeichen verwendet werden. Werte von Attributen müssen nicht unbedingt in Anführungszeichen gesetzt werden, es empfiehlt sich aber insbesondere in Fällen, in denen ein Wert ein Leerzeichen enthält.

Es existieren aber auch einfache Tags ohne Endtag wie z. B. <br> für einen Zeilenumbruch oder <hr> für eine Trennlinie.

HTML-Elemente können selbst auch weitere Elemente enthalten. Man spricht dann von Eltern- und Kindelementen (s. Document Object Model). Dies wird durch die Verschachtelung der entsprechenden Tags erreicht.

Beispiel:

<p>Du musst <i>unbedingt</i> kommen!</p>

Das <i>-Element ist in diesem Fall das Kindelement des <p>-Elements.

Struktur eines HTML5-Dokuments #

Das minimale Grundgerüst eines HTML5-Dokuments sieht folgendermaßen aus:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <title>Grundgerüst eines HTML5-Dokuments</title>
  </head>
  <body>
    <p>Dies ist ein HTML5-Dokument.</p>
  </body>
</html>

In der ersten Zeile eines HTML-Dokuments steht immer die Dokumenttypdeklaration, in diesem Fall für HTML5: <!DOCTYPE html>

Darauf folgt das oberste Element (Wurzelelement) in der Hierarchie des Dokuments: <html>. Dieses Element enthält zunächst das Element <head> für diverse technische Angaben zu den Eigenschaften des Dokuments, in diesem Fall ein erforderliches <title>-Element, das den Titel des Dokuments enthält, der in der Kopfzeile des Browserfensters angezeigt sowie als Name beim Speichern der Seite als Lesezeichen verwendet wird. Kindelemente innerhalb von <head> werden im Browser nicht als Seiteninhalt angezeigt. Weiterhin enthält das <html>-Element das Element <body> mit den konkreten Inhalten, in diesem Fall ein <p>-Element, das einen Absatz markiert. Genau genommen ist das <body>-Element für ein valides HTML5-Dokument nicht zwingend erforderlich. Ohne dieses Element würde das Dokument aber keinen praktischen Sinn ergeben.

Zeilenumbrüche und Einrückungen der Codezeilen sind nicht zwingend erforderlich, erhöhen aber die Lesbarkeit des Quelltextes.

Ein erweitertes Grundgerüst kann beispielsweise so aussehen:

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang='de'>
  <head>
    <title>Grundgerüst eines HTML5-Dokuments</title>
    <base href='http://www.example.com/index.htm'>
    <meta charset='UTF-8'>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
    <meta name='description' lang='de' content='Dieses Dokument veranschaulicht das Grundgerüst eines HTML5-Dokuments.'>
    <meta name='keywords' lang='de' content='HTML5,Quelltext,Grundgerüst'>
    <meta name='author' content='Uriel Löwenherz'>
    <meta name='robots' content='index, follow'>
    <meta name='revisit-after' content='14 days'>
    <link rel='shortcut icon' href='favicon.png'>
    <link rel='license' href='http://www.creativecommons.org/licenses/by-nc-sa/3.0/de/'>
    <link rel='stylesheet' type='text/css' href='layout/styles.css'>
    <style type='text/css'>
      <!-- An dieser Stelle kann CSS-Code eingefügt werden -->
    </style>
    <script type='text/javascript' src='scripts/javascript.js'></script>
    <script type='text/javascript'>
      <!-- An dieser Stelle kann JavaScript-Code eingefügt werden -->
    </script>
  </head>
  <body>
    <p>Dies ist ein HTML5-Dokument.</p>
    <script type='text/javascript'>
      <!-- An dieser Stelle kann ebenfalls JavaScript-Code eingefügt werden -->
    </script>
    <noscript>
      <p>Bitte aktivieren Sie JavaScript in Ihrem Browser.</p>
    </noscript>
  </body>
</html>

Im <html>-Tag kann die Sprache der Website angegeben werden. In diesem Fall lang='de' für Deutsch.

<base>
Dieses Tag kann verwendet werden, um eine Basis-URL anzugeben, auf die sich alle relativen Pfade innerhalb des Dokuments beziehen. Diese URL wird im Attribut href angegeben.

<meta>
Mit diesem Tag können diverse Meta-Informationen für das Dokument festgelegt werden. In diesem Fall sind das
charset: die Zeichenkodierung des Dokuments
http-equiv='Content-Type': der HTTP-Header für den Content-Type
name='description': eine Beschreibung des Seiteninhalts
name='keywords': Stichworte mit Verbindung zum Seiteninhalt
name='author': der Autor des Dokuments
name='robots': Webcrawler sollen die Seite indizieren und Links folgen
name='revisit-after': Webcrawler sollen die Seite nach 14 Tagen erneut besuchen
Über das <meta>-Element kann auch eine Weiterleitung auf ein anderes Dokument bewirkt werden (s. unten).

<link>
Mit diesem Tag können externe Ressourcen verknüpft werden, die mit dem Dokument in Beziehung stehen.
rel='shortcut icon': die Grafik eines Favicons
rel='license': die Lizenz unter der das Dokument veröffentlicht wird
rel='stylesheet': eine Datei mit CSS-Definitionen für das Dokument

<style>
Mit diesem Tag können CSS-Definitionen für die grafische Darstellung des Dokuments eingebettet werden.

<script>
Mit diesem Tag kann Programmcode einer Skriptsprache (hier: JavaScript) mit dem Dokument verknüpft bzw. in das Dokument eingebettet werden.

<noscript>
Wird das Ausführen von Skriptsprachen in den Browsereinstellungen des Benutzers verhindert, so kann mit diesem Tag ein alternativer HTML-Code eingebunden werden, der anstelle des Skript-Codes ausgeführt wird.

<!-- Kommentar -->
Kommentare werden im Browser nicht als Seiteninhalt angezeigt. Sie können verwendet werden, um einen Teil des HTML-Quelltext mit einer zusätzlichen Information für Entwickler zu versehen oder um Teile des Quelltextes vorübergehend zu deaktivieren.

Im weiteren Verlauf des Tutorials werden meist nur noch Codebeispiele innerhalb des <body>-Tags wiedergegeben, die im eigenen Quelltext dort einzufügen sind. Es wird davon ausgegangen, dass dabei das Grundgerüst des Dokuments vorhanden ist.

HTML-Weiterleitung #

Um beispielsweise eine kurze Infoseite anzuzeigen, die nach einem Moment selbstständig zu einer anderen Website weiterleitet, kann man folgendes Konstrukt anwenden (hier wird nach 7 Sekunden weitergeleitet).

Die Funktion wird durch das Meta-Tag in Zeile 5 ausgelöst.

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang='de'>
  <head>
   <title>Weiterleitung</title>
   <meta http-equiv='refresh' content='7; URL=http://www.decocode.de/'>
   <meta charset='UTF-8'>
  </head>
  <body>
    <p style='margin-top:200px;text-align:center;'>Sie werden in 7 Sekunden zu <a href='http://www.decocode.de/'>decocode.de</a> weitergeleitet!</p>
  </body>
</html>