Wie ist eine HTML Seite aufgebaut?

Eine dem "Webstandard entsprechende" Webseite besteht immer aus HTML Code.

Jede HTML Seite muss die folgenden HTML Attribute im Quellcode haben.
doctype, html, head und body. Diese Elemente bilden das Grundgerüst einer HTML Seite.

Das HTML Grundgerüst:

<!DOCTYPE html>
<html>
	<head>
		Im head stehen die Metainformationen zur Seite
	</head>	
 
	<body>
		Im body steht der sichtbare Inhalt einer Seite
	</body>
</html>

Während sich im head einer HTML Seite Metadaten tummeln wird der body immer für den tatsächlich angezeigten Inhalt verwendet.

Sieht man sich eine beliebige Webseite im Internet genauer an (Rechtsklick >> Quelltext anzeigen) so wird man diese HTML Grundelemente stets zu Gesicht bekommen.

Der <!DOCTYPE xxxx>

Der <!DOCTYPE xxxx> identifiziert ein HTML Dokument als solches.
Als aktuell gängigster doctype findet man den XHTML 1.0 Transitional.

XHTML 1.0 Transitional doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Dieser wird wohl in den kommenden Jahren durch den HTML 5 Doctype abgelöst werden.
Dieser schreibt sich ganz einfach so

HTML 5 doctype

<!DOCTYPE html>

Der <head>

In den <head> der Seite sind im Dokument verwendeten Informationen, wie auch externe Dateien die hinzugeladen werden erfasst.
Zunächst wäre da der Titel eines HTML Dokuments. Dieser drückt sich durch das <title> attribut im head aus.

Das title Attribut im head

<head>
	<title>Der Titel des HTML Dokuments</title>
</head>

Auch die Meta Informationen zu einer Webseite findet man im head mittels <meta> tags.

Die Metainformationen im head

<head>
	<meta name="description" content="Die Beschreibung der Seite" />
	<meta name="keywords" content="HTML,head,title,keywords,webdesign,usw" />
	<meta name="author" content="qpattern.com" />
	<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
</head>

Ebenfalls sehr wichtig sind die Style Informationen die mit dem <style> tag verwirklicht werden können. Dies ermöglicht eine Eingabe von Cascading Style Sheets (CSS) um das Dokument zu formatieren und zu "designen".

Der style tag ermöglicht CSS Angaben

<head>
	<style type="text/css">
		body {color: blue;}
		p {font-size: 14px;}
	</style>
</head>

Auch der <script> tag befindet sich hauptsächlich im head eines HTML Dokuments. Mit <script> ist es möglich JavaScript Code an jeder stelle eines HTML Dokuments (nicht nur im head) auszuführen.

Mit script kann man JavaScript Code notieren
1 2 3 4 5	<head> <script type="text/javascript"> document.write("Ich bin ein Text der am Bildschirm erscheint!") </script> </head>

Zusammengefasst könnte der <head> einer HTML Seite zum Beispiel so aussehen:

Ein typischer head mit title, meta, CSS und JavaScript

<head>
	<title>Das große Kompendium des Webs</title>
 
	<meta name="description" content="Die Beschreibung der Seite" />
	<meta name="keywords" content="HTML,head,title,keywords,webdesign,usw" />
	<meta name="author" content="qpattern.com" />
	<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
 
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<link href="css/typografie.css" rel="stylesheet" type="text/css" media="all" />
 
	<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="js/effekte.js"></script>
</head>

Der <body>

Im <body> findet man jene Elemente, die im Browserfenster dargestellt werden. Hier bietet HTML eine Vielzahl von tags um den Inhalt einer Seite optimal aufzubereiten.
Diese tags wiederum können per CSS referenziert und "designed" werden. So stellt HTML die Inhalte dar.

An dieser Stelle lohnt es sich auf jeden Fall einen Blick auf die Referenz des W3C Konsortiums zu werden: Aufzählung gültiger HTML tags.

Im body befindet sich der darzustellende Inhalt

<!DOCTYPE html>
<html>
	<head>
 
	</head>	
 
	<body>
		<div class="inhalt">
			<h1>Überschrift der ersten Ordnung</h1>
			<p>An dieser Stelle wird ein Absatz dargestellt</p>
			<ul class="auflistung">
				<li>Listen Punkt 01</li>
				<li>Listen Punkt 02</li>
				<li>Listen Punkt 03</li>
			</ul>
		<div>
	</body>
</html>

Im obigen Beispiel ist eine Seite mit doctype, html, head und body ausgewiesen. Im body befinden sich Elemente wie das div mit der Klasse "inhalt", eine Überschrift, ein Absatz und auch eine Liste.
So setzt sich also eine HTML Webseite zusammen, und wird bei jedem Aufruf durch einen Internet Browser dargestellt.

Sollten Sie Fragen zu diesem Thema haben so können Sie diese gerne in den Kommentaren am Ende dieses Artikels stellen.

Zuletzt aktualisiert am Mittwoch, 15. Dezember 2010 Geschrieben von: qpattern webmaster Dienstag, 14. Dezember 2010