E-Book Startseite Karteikarten-Programm
0

Der Aufbau

Aufbau von HTML-Seiten Das HTML-Dokument bzw. eine HTML-Seite besteht eigentlich aus 4 Teilen. Oft wird ein Teil jedoch gar nicht benannt. Dadurch steht auf vielen Webseiten auch "3 Teile". Wir wollen Ihnen dass aber vollständig erklären, deshalb reden wir auf unserer Webseite von "4 Teilen". Eine HTML-Seite besteht aus dem "Doctype", den "HTML-Tags", dem "Head-Bereich" und dem "Body-Bereich". Die verschiedenen sogenannten Tags verschachteln sich immer ineinander. In dem folgenden Codebeispiel sehen Sie den Aufbau des HTML-Dokuments. Die einzelnen Teile werden aber in den nachfolgenden Punkten noch genauer erklärt.

<!DOCTYPE HTML>
<html>
  <head>
 
  </head>
 
  <body>
 
  </body>
</html>

Wie Sie auf diesem Codebeispiele sehen konnten befinden sich in dem Teil HEAD und BODY keine Inhalte. Des Weiteren können Sie sehen, dass wir einen relativ übersichtlichen Aufbau verwendet haben (XML-Verschachtelung). In allen unseren Kursen bzw. bei allen Code-Beispielen werden wir einen übersichtlichen Aufbau verwenden. Dies können wir Ihnen ebenfalls dringend empfehlen, dadurch finden Sie sich auch selber in Ihren eigenen Codes schneller zurecht.


Doctype

Der Doctype ist die sogenannte Validierung des HTML-Dokuments. Je nachdem welche HTML- oder XHTML-Version Sie verwenden, werden verschiedene Doctypes genutzt. Die wohl zurzeit verbreiteste Varianten sind HTML 5, XHTML 1.0 und HTML 4.01, die sie hier alle sehen können:

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

Bei der 1. Version handelt es sich um den Doctype für die HTML Version 5. Diese Version sollten Sie verwenden, um alle Möglichkeit nutzen zu können, die wir in unserem Kurs vorstellen, denn unser Kurs ist hauptsächlich für HTML 5 gedacht. Die 2. Version umfasst XHTML 1.0. XHTML 1.0 und HTML 5 sind so ziemlich gleich, daher können fast alle Codes die wir in unserem Kurs vorstellen auch für XHTML 1.0 nutzen (außer die Codes von "Musik und Videos einbinden"). Bei der 3. Version handelt es sich um den Doctype für HTML 4.01. Wir empfehlen Ihnen jedoch HTML 5 oder XHTML 1 zu verwenden, auch wenn HTML 4.01 noch als "aktuelle" Version bezeichnet wird. In unserem Kurs werden wir kaum auf HTML 4.01 eingehen. Bei den Code-Beispielen zum Head-Bereich haben wir immer die HTML 4.01 und HTML 5 Variante verwendet. In den nachfolgenden Seiten dieses Kapitels werden wir jedoch darauf nicht mehr eingehen. Bitte lesen Sie auch den Hinweis am Ende dieser Seite!


HTML-Tag

Der HTML-Tag ist der 2. Teil des HTML-Dokumentes. Wie schon beschrieben, verschachteln sich alle Elemente ineinander, abgesehen von dem Doctype. Daher ist der HTML-Tag das erste Verschachtelungs-Teil eines HTML-Dokumentes. Der Anfang des HTML-Tags ist "<html>". Geschlossen wir der HTML-Tag mit "</html>", dass sieht dann folgendermaßen aus:

<html>
</html>

Head-Bereich

Als 3. Teil des HTML-Dokumentes gilt der sogenannte Head-Bereich. Wenn man das Wort "Head" übersetzt, erhält man das Wort Kopf. Manche von Ihnen kennen wo möglich den Begriff "Dokumentenkopf", dabei sind manchmal Kopfzeilen von Word-Dokumenten, aber manchmal auch die Kopfinformationen von HTML-Dokumenten gemeint. In dem sogenannten Kopf, befinden sich meistens Informationen über den Autor, die Sprache, etc. Im Head-Bereich befinden sich zu dem noch der Titelname, die Meta-Angaben und weiteres. In unseren Code-Beispielen haben wir folgende Reihenfolge verwendet: Titel, Autor, Beschreibung, Stichwörter, Crawler-Anweisung (Indexierung, Linksverfolgung, keine Indexierung, Index-Aufnahme aber keine Linksverfolgung), Sprache, Content-Typ, Weiterleitung, Favicon-Link, CSS-Link und JavaScript-Link. Diese Reihenfolge muss nicht eingehalten werden. Gekennzeichnet wird der Head-Bereich mit <head> und </head>. Dies können sich sich auch für die restlichen Codes merken. Bei HTML 5 und XHTML 1.0 beginnen alle zweiteiligen Tags mit "<TAGNAME>" und enden mit "</TAGNAME>".

<head>
</head>

Einen Seitentitel erstellen wir mithilfe der title-Tags:

<title>Hier steht ihr Titel!</title>

Für "Meta-Angaben" verwenden wir den einteiligen meta-Tag. Im name-Attribut übergeben wir den Namen der Meta-Angabe und in dem content-Attribut übergeben wir den dazugehörigen Wert. Hier wollen wir den Autor der Seite festlegen.

<meta name="author" content="Max Mustermann" >
<meta name="author" content="Max Mustermann" />

Für Suchmaschinen ist die Meta-Angabe "description" (zu Deutsch "Beschreibung") sehr wichtig. Es ist der Text, welcher unterhalb des Seitentitels bei Google-Suchergebnissen angezeigt wird. Die Beschreibung sollte nicht zu lang sein.

<meta name="description" content="Beschreibung Ihrer Webseite" >
<meta name="description" content="Beschreibung Ihrer Webseite" />

Auch Stichwörter, die sogenannten Keywords sind für Suchmaschinen extrem wichtig. Getrennt werden diese durch ein Komma. Meistens wird hinter das Komma noch ein Leerzeichen gestellt, um eine bessere Übersicht zu erzeugen.

<meta name="keywords" content="HTML, CSS, JavaScript" >
<meta name="keywords" content="HTML, CSS, JavaScript" />

Um die Suchmaschinen-Crawler (die "Robots") auf Ihrer Webseite zu steueren gibt es die robots Meta-Angabe. Mögliche Werte sind index, follow, noindex oder nofollow. "index" bedeutet, dass die Webseite indexiert wird. "follow" bedeutet, dass die Links welche sich auf der Webseite befinden ebenfalls durchsucht (nachverfolgt) werden sollen. Die Angabe "noindex" unterbindet die Indexierung. "nofollow" erlaubt die Indexierung, jedoch ohne Linkverfolgung. Viele Anwender verwenden die Angabe "index,follow". Genauso ist auch die Angabe "noindex,nofollow" möglich.

<meta name="robots" content="index" >
<meta name="robots" content="index" />
 
<meta name="robots" content="follow" >
<meta name="robots" content="follow" />
 
<meta name="robots" content="noindex" >
<meta name="robots" content="noindex" />
 
<meta name="robots" content="nofollow" >
<meta name="robots" content="nofollow" />

Um die Sprache der Webseite festzulegen gibt es die Meta-Angabe language. Hier können Sprachennamen (z. B. Deutsch oder German) angegeben werden. Jeder Browser und jede Suchmaschine behandelt diesen Tag ein wenig anders. Laut W3C sollte man hier ein Sprachkürzel verwenden. Empfehlenswert ist eine Kombination:

<meta name="language" content="Deutsch, DE" >
<meta name="language" content="Deutsch, DE" />

Um den Content-Typ eines Dokumentes festlegen zu können, gibt es auch dafür eine Meta-Angabe. Für diese und für die nächste Meta-Angabe benötigen wir jedoch nicht mehr das name-Attribut sondern das "http-equiv"-Attribut. Der Wert der Meta-Angabe wird weiterhin im content-Attribut festgelegt. Für den Content-Type benötigen wir zwei Werte: den Mime-Typ und die Zeichenkodierung (hierzulande UTF8 oder ISO-8859-1).

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Um eine Weitereitung zu erstellen, gibt es die Meta-Angabe refresh. Hier wird die Zeit in Sekunden und die Weiterleitungs-Adresse angegeben. Bitte beachten Sie, dass nicht jeder Browser mit diesem Befehl umgehen kann. Daher ist dies keine effektive Weiterleitung.

<meta http-equiv="refresh" content="5; URL=http://www.homepage-webhilfe.de/" >
<meta http-equiv="refresh" content="5; URL=http://www.homepage-webhilfe.de/" />

Um ein Favicon in eine Webseite mit einzubauen, benötigen wir den einteiligen link-Tag. Mit dem Attribut href übergeben wir den Pfad der Quelldatei. Im Type-Attribut übergeben wir den Mime-Typ. Das rel-Attribut legt fest, um was für eine Datei es sich handelt. Bei Favicons wird hier "shortcut icon" angegeben.

<link href="favicon.ico" type="image/x-icon" rel="shortcut icon" >
<link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />

Um eine CSS-Datei einzubinden, benötigen wir ebenfalls den link-Tag. Der Mime-Typ von CSS ist "text/css" und der rel-Wert ist "stylesheet".

<link href="style.css" type="text/style" rel="stylesheet" >
<link href="style.css" type="text/style" rel="stylesheet" />

Eine JavaScript-Datei kann mit Hilfe des zweiteiligen Tags "script" eingebunden werden. Wenn der Code direkt eingefügt werden soll, kann dieser einfach zwischen den Tags notiert werden, andernfalls muss durch das src-Attribut (Source = Quelle) die Quelle der Datei angegeben werden. In jedem Fall muss aber das Attribut type mit dem Wert "text/javascript" notiert werden. Die Angabe des language-Attributs mit dem Wert "javascript" ist nicht zwingend notwendig.

<script language="javascript" type="text/javascript" src="skript.js" ></script>

Hier haben wir nun ein Beispiel wie ein Head-Bereich aussehen könnte:

<head>
  <title>Hier steht ihr Titel!</title>
 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="language" content="Deutsch, DE" />
  <meta name="author" content="Max Mustermann" />
  <meta name="description" content="Beschreibung Ihrer Webseite" /> 
  <meta name="keywords" content="HTML, CSS, JavaScript" />
  <meta name="robots" content="index" />
 
  <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
  <link href="style.css" type="text/style" rel="stylesheet" />
  <script language="javascript" type="text/javascript" src="skript.js" ></script> 
</head>

Body-Bereich

Der Body-Bereich, ist der Haupt-Bereich in der Webseite. Alle Dinge die Sie nun über den Head-Bereich gelernt haben, sind unsichtbare Informationen (abgesehen vom Titel und Favicon), d. h. wenn Sie begonnen haben eine HTML-Seite zu programmieren und die Codes richtig eingegeben haben, sehen Sie trotzdem einen leeren Inhaltsbereich. Das liegt daran, da im sogenannten Body-Bereich (Körper-Bereich) keine Codes vorhanden sind. Da der Body-Bereich der Haupt-Bereich eines HTML-Dokumentes ist, befinden sich in allen nachfolgenden Seiten (im Kapitel "HTML lernen") Informationen und Codes die im Body-Bereich programmiert werden. Der Body-Bereich spielt sich in dem Bereich zwischen den Body-Tags ab. Der öffnende Body-Tag ist <body>. Der schließende Body-Tag ist dann wiederum </body>.

<body>
</body>

Aufbau von Verzeichnissen

Es gibt 3 verschiedene Arten um Dateien von Verzeichnissen aufzurufen. Wenn man nur einen Dateinamen eingibt (z. B. "seite.html") geht der Browser oder Server davon aus, dass sich die Datei in dem selben Verzeichnis befindet wie die Datei, mit der die Datei aufgerufen wurde. Wenn man einen Dateinamen eingibt und davor ein Slash hinzufügt (z. B. "/seite.html"), geht der Browser oder Server davon aus, dass sich die Datei im Rootverzeichnis befindet. Wenn man einen Dateinamen eingibt und davor 2 Punkte und einen Slash hinzufügt (z. B. "../seite.html"), geht der Browser davon aus, dass sich die Datei in einem Ordner "davor" befindet. Die letzte Notation kann auch mehrmals wiederholt werden (z. B. "../../../seite.html").


Hinweis zu HTML 4.01

Bitte beachten Sie, dass wir nur auf dieser Seite Code-Beispiele zu HTML 4.01 bieten. In den nachfolgenden Seiten werden wir keine Code-Beispiele zu HTML 4.01 geben. Bei den einteiligen Codes reicht es meistens, wenn man den Schrägstrich (/) vor dem Größer-als-Zeichen (>) weglässt, um einen validen HTML 4.01 Code erhält.

Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de