Das Dokument muss einen ganz bestimmten Aufbau (Grundgerüst) haben und die Anweisungen sind genau zu befolgen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Titel der Webseite</title>
<!-- Evtl. weitere Kopfinformationen -->
</head>
<body>
Inhalt der Webseite
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> Anfangs HTML-Tag
<head> Anfangs-Tag des Kopfes
<title> Titel des Dokumentes
</title>Angabe des Titels des Dokumentes
<meta ...> Meta-Angaben
<link ...> Link-Angaben
(z.B. zu externem Stylesheet)
<style ...> ... </style> Stylesheet-Angaben</head> End-Tag des Kopfes.
<body> Anfangs-Tag des Körpers
</body> End-Tag des Körpers.
</html> End HTML-Tag
⇒ Siehe "PHP" (nur berücksichtigen, wenn diese Technik angewendet wird)
Wenn eine HTML-Datei PHP-Anweisungen mit dem Anfangs- und End-Tag
<?php ... ?> enthält, und die Datei
je nach Provider in dateiname.php umbenannt wird,
ist auch folgender Aufbau möglich:
Man unterscheidet:
Grundlagen und Workshops:
Dieser Eintrag ist obligatorisch.
Mit der Dokumenttyp-Deklaration wird bestimmt, welche Auszeichnungssprache
in welcher Version Sie verwenden. Eine auslesende Software, etwa ein Web-Browser,
kann sich an dieser Angabe orientieren.
Mit anderen Worten: Im Internet besitzt jede Datei, die gesendet wird,
vor den Kopfdaten (header) eine Dokumenttyp-Deklaration. Der Browser
liest zuerst diese Deklaration und entscheidet anhand dieser
Deklaration, was er tun soll.
z.B. bei einer PDF-Datei ein Fenster öffnen und fragen:
"speichern oder öffnen", etc.)
Die Dokumenttyp-Deklaration enthält folgende Angaben:
Ort des Eintrages:
Beispiel: HTML 4.01 Transiional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Dokumenttyp-Definition = DTD = documenttype definition
In den Dokumenttyp-Definitionen ist geregelt, welche Elemente ein Dokument vom Typ HTML enthalten darf, welche Elemente innerhalb von welchen anderen vorkommen dürfen, welche Attribute zu einem Element gehören, ob die Angabe dieser Attribute Pflicht ist oder freiwillig usw.
Die Angabe der Web-Adresse der Dokumenttyp-Definition (DTD) nach der Dokumenttyp-Deklaration ist nicht zwingend nötig.
Die Variante Transitional mit der Webadresse für HTML lautet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Begründung, die für eine Aufnahme spricht:
Wenn diese Webadresse nicht gegeben wird folgt bei der Validierung
folgende Warnung:
"In der Dokumententypdeklaration konnte keine System-ID (URL oder
Pfadangabe zur DTD) gefunden werden."
Bemerkung: Wenn in der vorliegenden Datei dieser Eintrag gemacht wird, erscheint unten am Bildschirm eine Scrolleiste, mit dem der Inhalt unnötigerweise nach links unter das Menü verschoben werden kann. Es wurde daher darauf verzichtet, diese Webadresse aufzunehemen.
Jedes HTML-Dokument besteht mindestes aus folgendem Eintrag:
<html> steht nach der Dokumenttyp-Deklaration
... dies ist der nachfolgende Teil des HTML-Dokumentes
</html> dies steht ganz am Ende des HTML-Dokumentes.
Ort des Eintrages:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html>
<head>
<title>Titel der Webseite</title>
<!-- Evtl. weitere Kopfinformationen -->
</head>
<body>
Inhalt der Webseite
</body>
</html>
Beispiel: In diesem Eintrag wird normalerweise die Sprache angegeben.
<html lang="de">
Bezeichnungen:
Die Kopfdaten bestehen aus folgenden Angaben:
<head> Anfangs-Tag des Kopfes
<title> Titel des Dokumentes
</title>Angabe des Titels des Dokumentes
<meta ...> Meta-Angaben
<link ...> Link-Angaben
(z.B. zu externem Stylesheet)
<style ...> ... </style> Stylesheet-Angaben</head> End-Tag des Kopfes.
Ort des Eintrages:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html>
<head>
<title>Titel der Webseite</title>
<!-- Evtl. weitere Kopfinformationen -->
</head>
<body>
Inhalt der Webseite
</body>
</html>
Beispiel:
<head> <title>...</title> <meta ....> <link ....> </head>
Workshops:
Angabe des Titel des Dokumentes in den Kopfdaten
<head> Anfangs-Tag des Kopfes
<title> Titel des Dokumentes
</title>Angabe des Titels des Dokumentes
</head> End-Tag des Kopfes.
<head> <title>...</title> <!-- ... andere Angaben im Dateikopf ... --> </head>
Jede HTML-Datei muss einen Titel erhalten. Der Titel der Datei wird wie folgt angezeigt:
Beispiel:
Erster Eintrag im "head"
<title> Web-Anleitung</title>
Zweck: Anweisungen an folgende Stellen geben:
Meta-Angaben können folgende Informationen geben:
Beispiel: Eintrag in den Kopfdaten
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta http-equiv="language" content="de"> <meta name="author" content=" "> <meta name="publisher" content=" "> <meta name="copyright" content=" "> <meta name="keywords" content=" "> <meta name="description" content=" "> <meta name="page-topic" content=" "> <meta name="page-type" content=" "> <meta name="language" content="Deutsch"> <meta name="revisit" content="After 30 days"> <meta name="robots" content="INDEX,FOLLOW">
Workshops:
Meta-Tag Generator und Meta-Tag Checker:
Spider-Test:
⇒ Siehe "Internet-Grundlagen": Webmaster/Suchmaschinen-Optimierung/Spider-Test
Wortdichte prüfen:
⇒ Siehe "Internet-Grundlagen": Webmaster/Suchmaschinen-Optimierung/Wortdichte prüfen
In jedem HTML-Dokument muss eine Zeichensatzkodierung angegeben sein.
Dabei bestehen zwei Möglichkeiten diese anzugeben:
Bemerkung:
Wenn dieser Eintrag nicht gemacht wird, wird beim Validator-Test folgende Meldung angezeigt:
Der W3C-Validator rekamiert: "No Character Encoding Found! Falling back to UTF-8."
I was not able to extract a character encoding labeling from any of the valid sources
for such information. Without encoding information it is impossible to reliably validate
the document. I'm falling back to the "UTF-8" encoding and will attempt to perform
the validation, but this is likely to fail for all non-trivial documents.
Der W3C-Validator findet also gewisse Angaben nicht, die er für den Test
benötigt.
Möglichkeit 1: Zeichensatzkodierung in den Kopfdaten mit einem Meta-Tag:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
Bemerkung: In XML oder XHTML-Dokumenten wird die Zeichensatzkodierung in der XML-Deklaration mitgeteilt, z.B.:
<?xml version="1.0" encoding="ISO-8859-1"?>
Möglichkeit 2: Zeichensatzkodierung mit einer PHP-Anweisung:
⇒ Siehe separaten Abschnitt
Neben der Möglichkeit der Angabe der Zeichensatzkodierung mit einem Meta-Eintrag, können diese auch mit einer PHP-Anweisung gegeben werden.
⇒ Siehe Zeichensatzkodierung mit Meta-Angaben in den Kopfdaten
Mit einer PHP-Anweisung ganz am Anfang des HTML-Dokumentes können die Angaben so gegeben werden, damit sie in die Kopfdaten aufgenommen werden, noch bevor die Datei vom Server an den Browser gesandt wird.
Diese Angaben enthalten:
PHP-Anweisung ganz am Anfang der HTML-Datei: (noch vor der Dateityp-Deklaration)
<?php
header('Content-Type: text/html; charset=iso-8859-1');
header('Content-Language: de');
?>
⇒ Siehe auch "PHP"
Wichtige Bemerkungen:
Diese Zeilen müssen ganz am Anfang der Datei stehen (d.h. noch vor der Dokumenttyp-Deklaration), da der Server diese Angaben vor den anderen Daten haben muss und erst anschliessend die Daten senden darf! Es darf auch keinen Leerschlag davor haben.
Ferner ist nun auf Regeln des Providers die Erweiterung des Dateinamens
von <dateiname.htm auf
dateiname.php zu ändern.
Achtung: Wenn die andern Dateien der Website im Menü Steuerzeichen
auf diese Datei haben, sind auch diese Links anzupassen.
Zweck:
Eintrag in den Kopfdaten bei Verwendung von eingebetteten Ereignissen (Event-Handler)
⇒ Dieser Eintrag wurde im Kapitel "Farben" wegen der Formel für die Hex-Umrechnung gemacht.
Grund dieses Eintrages:
Der Validome-Validator zeigt im Kapitel "Farben" folgenden Fehler an:
"Beim Verwenden von eingebetteten Ereignissen (Event-Handler)
muss die verwendete Scriptsprache in einen Meta-Tag mitgeteilt werden.
Fehlerstelle: value="255" onBlur="CheckDecimal(this.value)">
Möglichkeit 1: Meta-Eintrag
<meta http-equiv="Content-Script-Type" content="text/javascript">
Möglichkeit 2: Eintrag im HTTP-Header z.B:
Content-Script-Type: text/javascript
In Bearbeitung / under Construction / en cours d'élaboration
Beipiel:
1) Im Quelltext, der vom Benutzer dieser Anleitung eingesehen werden kann, wird im Kopfbereich folgendes angezeigt:
<link rel='stylesheet' type='text/css' href='css-anleitung.css'>
2) Im effektiven Quelltext des Webmasters steht aber folgender Eintrag im Kopfbereich:
<?php include "inc-weiche.php"; ?>
Erklärung:
⇒ Siehe auch "PHP"
3) Inhalt der Datei inc-weiche.php, die in den Kopfbereich
eingelesen wird.
<?
$agent = $_GET['agent'];
/*liest die Variable der GET-Methode aus
und speicherts in der Variable agent */
if ( $agent == "abr2" ) {
echo "<link rel='stylesheet' type='text/css'
href='css-abr.css'>";
} else {
echo "<link rel='stylesheet' type='text/css'
href='css-anleitung.css'>";
}
?>
Workshops:
⇒ Siehe auch Kapite 17 "CSS-Definitionen für verschiedene Ausgabemedien"
Beipiel:
Für ein Beispiel in der Anleitung wurden im Kopbereich der Datei mit diesem Beispiel folgende Stylesheetangaben aufgenommen:
<style type="text/css">
/* Fuer Beispiel in der Anleitung */
#Textbeispiel01 {font:bold 16px 'Times New Roman';}
</style>
Bezeichnungen:
Der Körper (body)besteht aus:
<body> hier beginnt der Inhalt (body)
... Inhalt mit Überschriften, Text, Bildern, etc.
</body> hier endet der Inhalt.
</html> dies steht ganz am Ende des HTML-Dokumentes.
Ort des Eintrages:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html>
<head>
<title>Titel der Webseite</title>
<!-- Evtl. weitere Kopfinformationen -->
</head>
<body>
Inhalt der Webseite
</body>
</html>
Beispiel:
<bodyd> .... .... ... </body>
Workshops:
Beispiel eines Quelltextes:
<!-- Beginn Kopf --> <div id="kopfbehaelter"> <div id="kopf">Web-Anleitung</div> <div id="home"><a href="../"> Home</a></div> <div id="navigation1">« <a href="kapitel01.php"> Kapitel zurück</a></div> <div id="navigation2"><<a href="../html/html-dokument.php"> Seitenanfang</a>></div> <div id="navigation3">Kapitel 2 - HTML/XHTML</div> <div id="navigation4"><a href="../html/html-dokument.php"> Kapitel vor </a>»</div> </div> <!-- Ende Kopf -->
Beispiel einer Steuerung / Navigation: (vereinfacht)
<!-- Beginn - Steuerung --> <div id="steuerung"> <dl> <dt>Inhalt</dt> <dt><a href="einleitung.php"> 0 Einleitung</a></dt> .... .... .... </dl> </div> <!-- Ende Steuerung -->
Beispiel eines Bereiches für den Inhalt (content) einer Website:
<!-- Beginn Inhalt --> <div id="inhalt"> <h1> 2 HTML und XHTML</h1> ... ... ... <p><a href="../html/html-dokument.php"> Seitenanfang</a>></p> </div> <!-- Ende Inhalt -->
1) Im Quelltext, der vom Benutzer dieser Anleitung eingesehen werden kann, wird angezeigt:
<!-- Beginn Fuss --> <div id="fussbehaelter"> <div id="fuss1">Alfred Brandenberger</div> <div id="fuss2">E-Mail: <a href="mailto:..."> ...</a></div> <div id="fuss3">Aktualisiert: ...</div> </div> <!-- Ende Fuss -->
2) Im effektiven Quelltext des Webmasters steht ist aber folgender Eintrag im Textbereich:
<!-- Beginn Fuss --> <?php include "inc-footer.php"; ?> <!-- Ende Fuss -->
Erklärung:
⇒ Siehe auch "PHP"
3) Inhalt der Datei inc-footer.php, die in den
Textbereich eingelesen wird.
<div id="fussbehaelter"> <div id="fuss1">Alfred Brandenberger</div> <div id="fuss2">E-Mail: <a href="mailto:...."> ...</a></div> <div id="fuss3">Aktualisiert: ...</div> </div>↑