HTML-Tutorial

Details: Zuletzt aktualisiert am Sonntag, 01. Juli 2012 08:11; Geschrieben von Jan Pionzewski

Seite 4 von 10

3. Grundgerüst einer HTML-Datei

Jedes HTML-Dokument ist gleich aufgebaut. Dabei enthält es einen HEAD-Bereich und einen BODY-Bereich. Im HEAD-Bereich werden nicht sichtbare Befehle dargestellt, wie beispielsweise Meta-Angaben zu Autor oder Suchbegriffen. Im Body-Bereich werden dann dementsprechend die Befehle dargestellt, die auch für den Besucher Ihrer Seite sichtbar sein sollen. Darüber Hinaus werden vor jedem HTML-Dokument noch Angaben zur verwendeten "HTML-Sprache" gemacht.

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Überschrift der Seite</title>
</head>
<body>

</body>
</html>

3.1 Doctype

Der Docytpe gibt an, welche Art von HTML-Dokument Sie erstellen möchten. Neben HTML gibt es noch einige andere Attribute, die Sie hier einfügen können. Nähere Informationen dazu können Sie hier auf der Webseite im Bereich "Wie erstelle ich validen Code" nachlesen.

Hinweis:
In den folgenden Beispielen werden wir den Doctype aus Gründen der Übersichtlichkeit nicht weiter angeben. Dennoch sollten Sie zu beginn jeder HTML-Seite eine Angabe dazu machen, um validen HTML-Code zu erzeugen.

3.2 HTML-Tag

Der HTML-Tag umschließt alle anderen Tags und zeigt dem Browser, dass ab hier eine HTML-Seite beginnt.

3.3 HEAD-Tag

Im HEAD einer Webseite werden verschiedene Meta-Angaben zur Seite gemacht. Dies können Informationen über den Autor sein, oder aber auch über die Seite. Diese Angaben sind zum Beispiel für Suchmaschinen wichtig. Auch in den Kopf-Bereich Ihrer Webseite gehören die Angaben zum Titel der Webseite, die auf dem Browser angegeben wird. Die Titel-Angabe wird dabei über den <title>...</title>-Tag realisiert.

Beispiel:

<head>
<title>Webmasterparadies.de - ... everything for your web-start</title>
</head>

Bitte beachten Sie dabei, dass der Text im Titel-Bereich Ihrer Seite nicht weiter formatiert werden kann.

3.4 BODY-Tag

Hier kommt quasi der gesamte Inhalt Ihrer Webseite rein, der im Browser dargestellt werden soll.

3.5 Hintergrundfarbe und -bild

Ebenfalls zum Grundgerüst der Seite gehört die Wahl eines Hintergrundbildes oder einer Hintergrundfarbe. Diese Angaben werden direkt im <body>-Tag vorgenommen.

Beispiel für Hintergrundbild:

<html>
<head>
<title>Webmasterparadies.de</title>
<body background="hintergrundgrafik.jpg">

</body>
</html>

Beispiel für Hintergrundfarbe:

<html>
<head>
<title>Webmasterparadies.de</title>
<body bgcolor="lightblue">

</body>
</html>

Hinweis:

Hintergrundgrafiken werden standardmäßig vom Browser gekachelt. Wählen Sie also ein zu kleines Hintergrundbild, könnte dies zu unschönen Effekten führen. Die Angabe zur Farbe des Hintergrundes kann entweder, wie in unserem Beispiel, per englischer Angabe erfolgen, oder aber über einen Hexadezimal-Wert der Farbe. Beispielsweise #FF0000 für rot. Wenn Sie hingegen auf beide angaben verzichten, wird standardmäßig ein weißer Hintergrund angezeigt, wenn der User dieses Attribut im Browser nicht geändert hat.