Das XHTML-Template (Grundgerüst)
Haarlinien ohne CSS
Der Head-Bereich eines HTML-Dokuments
Tipps für schlankes Webdesign
Blocksatz
Unsortierte Listen
Blockelement DIV (Ebene, Container)
XHTML: Einige Veränderungen im Vergleich zu HTML
zur Galerie
zum Tutorial
zu den Webdesign-Büchern
motorradteile.de und Portfolio Web
Wallpaper mit 3D-Motiven gibt es hier
ADOBE© FLASH
Valide Flash-Inhalte für XHTML 1.0-Doku- mente
WEBDESIGN-BÜCHER
Einige (sehr) interes- sante Bücher rund um das Thema Webdesign
 


Der Head-Bereich eines HTML- Dokuments
  01.Dezember 2006  / von Stefan Plagge

Der Head-Bereich ist wichtiger Bestandteil eines HTML- Dokuments. Für den Anwender nicht sichtbar, sind hier wichtige Informationen verborgen, die für den Erfolg einer Site maßgeblich sein können.

Einige Einträge sind für die wichtigen Suchmaschinen zuständig, mit denen ihre Webpräsenz überhaupt erst gefunden werden kann.
Hier ein Beispiel eines Head-Bereichs mit anschließender Er- klärung:

Die Angaben der Zeilennummern dient nur der besseren Zuordnung, und müssen vor Verwendung im HTML-Doku- ment entfernt werden.

Beispielcode:
 1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
 2. <html>
 3. <head>
 4. <title>Der Head-Bereich eines HTML-Dokuments
 </title>
 5. <meta http-equiv="content-type" 
 content="text/html; charset=iso-8859-1">
 6. <meta name="description" content="Webdesign, 
 Webdesign-Tutorials für die Bereiche Grafik, 3D, 
 Animation, Flash, Codierung">
 7. <meta http-equiv="keywords" 
 content="Internet-Design, Webdesign, HTML">
 8. <meta name="keywords" content="webdesign, 
 webdesign-tutorials, webdesign tutorials, grafik, 
 3d, animation, 3d-animation, 3d animation, flash, 
 codierung, frankfurt, bergstrasse, bensheim">
 9. <meta http-equiv="expires" content="86400">
 10. <meta name="author" content="Stefan Plagge">
 11. <meta name="content-language" content="de">
 12. <meta name="revisit-after" content="1 month">
 13. <meta name="robots" content="index, follow">
 14. </head>
 15. <body>
 16. ...........................................
(sichtbarer Bereich im Browser des Dokuments)...
................................................
................................................
</body>
</html>
					

01. Um W3C-konform formatieren zu können, ist in der ersten Zeile eine “Doctype”-Deklaration notwendig. Hier wird festgelegt, nach welcher Spezifikation das HTML-Dokument erstellt wird. Findet keine Festlegung statt, kann das die Funktionsfähigkeit der Seite beeinflussen. Folgende Deklarationen gibt es: “Strict”, “Transitional” und “Frameset”.

Bei “Strict” müsen Sie sich ganz genau an die Standarts und Vorgaben des W3C halten.
Bei “Transitional” sind Ausnahmen erlaubt.
Beinhaltet die Seite ein Frameset, dann sollten Sie “Frameset” verwenden.

02. Codezeile 2 beinhaltet den <html>-Tag: Hier beginnt der In- halt der Seite.

03. Hier beginnt die Definition des Kopfteils (Kopf: engl. “head”).

04. Hier legen Sie den Namen ihres HTML-Dokuments fest: Dieser befindet sich dann in der Titelleiste des Browsers. Wird die Seite “gebookmarked”, also zu den Favoriten/Lesezeichen des Browsers hinzugefügt, verwendet der Browser diese Angabe ebenso in den Favoriten/Lesezeichen.

05. Definition des Zeichensatzes. “ISO 8859-1” ist der Zeichen- satz für den westeuropäischen Raum, also auch des deutsch- sprachigen. Über diese Angaben kann der Browser die in den Dokumenten verwendeten Buchstaben, Zahlen, etc. korrekt darstellen.

06. Beschreibung des Inhalts des HTML-Dokuments. Üblich sind ein bis zwei Sätze. Bei einigen Suchmaschinen ist die Anzahl der Buchstaben begrenzt. Bedenken Sie, dass diese Formulierung in den Suchmaschinen erscheint. Kurze und prägnante Beschreibung des Inhalts der Seite ist hier sinnvoller als eine ausufernde In- haltsangabe.

07. + 08. Das sind die Stellen fü die “Schlüsselwörter”, also die Wörter, auf welche die Suchmaschinen reagieren. Diese sollten genau dem entsprechen, was die Seite zu bieten hat.

09. Das Verfallsdatum wird benötigt, damit nach einem Update der Site-Inhalte diese neuen Dokumente auch angezeigt werden. Durch die Arbeit mit Proxys und Zwischenspeichern im Internet benötigt der Browser die Information, ob er ein im Zwischen- speicher befindliches Dokument anzeigen soll, oder das (neuere) Dokument vom Server lädt.
Die Zahlenangabe legt die Dauer für den “Verfall” der Seite fest. Der Wert wird in Sekunden angegeben, und errechnet sich fol- gendermaßen: 60 sec x 60 (min) x 24 (h) = 86400 Sekunden.

10. Identifiziert den Autor der Seite. Sinnvoll z.B. dort, wo ein anderer Webautor aus ihren Dokumenten zitieren möchte. Für eine korrekte Quellenangabe benötigt er/sie ihren Namen. Hiermit geht oft ein Link auf ihre Site (oder ihr spezielles Thema) einher.

11. Die Sprachangabe wird für die Erkennung durch die Such- maschinen benötigt. Mit dieser Information kann der Suchroboter ihre Seite als deutschsprachig indizieren (Sie kennen ja die Auswahlmöglichkeit der Suche im weltweiten oder -optional- nur im nationalen Internetbereich). Eine englische Site würde das Kürzel "en" enthalten.

12. Bestimmt die Zeit, nachdem ein “Suchmaschinenspider” nach einer Indizierung wieder “vorbeischauen” soll (ob dies dann auch der Fall ist, ist eine andere Sache). Möglich ist auch eine Angabe nach Tagen (z.B. “30 days”).

13. Hier wird dem “Suchmaschinenspider” angezeigt, dass er die Site indizieren darf, und die enthaltenen Links weiterverfolgen soll. Weitere Möglichkeiten sind:
“index” = Site indizieren
“noindex” = Site nicht indizieren
“follow” = den enthaltenen Links folgen
“nofollow” = den enthaltenen Links nicht folgen

14. Dieser “Tag” beendet den Kopfbereich des Dokuments.

15. Hier fängt der “body” an - der sichtbare Bereich im Browser- fenster.