Webseitenbau
Home
Site/Index
 
Web Webseitenbau
Google English français  
⬆2. 3. 3 Grundgerüst eines HTML-Dokumentes

2.3.3 Grundgerüst eines HTML-Dokumentes

-

⇧ 1 Aufbau eines HTML-Dokumentes

-

↑ a) Allgemein

Das Dokument muss einen ganz bestimmten Aufbau (Grundgerüst) haben und die Anweisungen sind genau zu befolgen.

Eintrag im Quelltext: 

<!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>

-

↑ b) Aufbau einer HTML-Datei

  1. Dokumenttyp-Deklaration: Angaben zur verwendeten HTML-Version, z.B.
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. Beginn der eigentlichen HTM-Datei
    • <html> Anfangs HTML-Tag
  3. Kopf (head): Angabe des Titels und weiteren Informationen zum Dokument.

    • <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
      (falls solche im Kopf des Dokumentes gegeben sind)

    • </head> End-Tag des Kopfes.

  4. Körper (body): Eigentlicher Inhalt (content) des HTM-Dokumentes

    • <body> Anfangs-Tag des Körpers

    • ... Der Körper enthält vor allem den Inhalt (content), also Text mit Überschriften, Verweisen, Grafiken und Bildern, etc.

    • Bei Webseiten befinden sich in diesem Abschnitt aber auch alle Elemente wie Kopf mit dem Haupttitel und eventuellem Logo, der Menüs mit den Links für die Steuerung und Navigation, Grafiken und eventuell einer Fusszeile mit weiteren Informationen.

    • Bemerkung: Im Kapitel "PHP" wird beschrieben, wie Textteile zentral abgelegt und in den Text der Dokumente verknüpft werden können.

    • </body> End-Tag des Körpers.

  5. Am Schluss des Dokumentes
    • </html> End HTML-Tag

-

↑ c) Grundlagen Websites & Workshops

-

↑ d) HTML-Datei mit PHP-Anweisungen

Nur berücksichtigen, wenn die PHP-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:

  1. PHP-Anweisung, die vor dem Senden der Datei durch den Server "geparst" werden muss.
  2. Dokumenttyp-Deklaration (Angabe zur verwendeten HTML-Version).
  3. Kopfdaten (header) z.B. Angabe des Titels.
    PHP-Anweisungen, die weitere Kopfdaten betreffen.
  4. Körper (body) Anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.)
    PHP-Anweisungen, die im Text eingebettet sind.
  5. End-Tag von HTML

-

⇧ 2 Dokumenttyp-Deklaration

-

↑ a) Prinzip

Man unterscheidet:

  1. Dokumenttyp-Definition = DTD = documenttype definition
    Unter DTD versteht man die Definitionen in Bezug auf die verwendete Computersprache.
    In der DTD sind die Elemente und Attribute, etc. festgelegt.
  2. Dokumenttyp-Deklaration = doctype declaration
    Dies ist der Eintrag am Anfang des Dokumentes mit den wichtigsten DTD-Angaben, wie zum Beispiel, dass HTML in der Version 4.01 und als Sprache Englisch verwendet wurde.
  3. Web-Adresse, die auf eine separate DTD-Definition verweist, als Zusatz zur Dokumenttyp-Deklaration.

Grundlagen und Workshops

-

↑ b) Dokumenttyp-Deklaration (doctype declaration)

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">

-

↑ c) Web-Adresse mit den Documentyp-Definitionen

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.

-

⇧ 3 HTML-Eintrag

Jedes HTML-Dokument besteht mindestes aus folgendem Eintrag

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">

-

⇧ 4 Kopfdaten (head)

-

↑ a) Kopfdaten - Allgemein

Bezeichnungen

Die Kopfdaten bestehen aus folgenden Angaben:

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

-

↑ b) Titel

Angabe des Titel des Dokumentes in den Kopfdaten 

<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>

-

↑ c) Meta-Angaben

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

-

↑ d) Zeichensatzkodierung

Prinzip

In jedem HTML-Dokument muss im Kopfbereich eine Zeichensatzkodierung angegeben sein.

Dabei bestehen zwei Varianten diese anzugeben

  1. Mit einem Meta-Eintrag in den Kopfdaten.

  2. In einer PHP-Anweisung, die als erster Eintrag in der HTML-Datei gemacht werden kann.

Bemerkung:

-

← Variante 1: Meta-Zeichensatzkodierung

Meta-Eintrag im Kopfbereich des HTML-Dokumentes 

<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"?>

-

← Variante 2: Dateityp-Deklaration

Pfeil nach rechts (Icon) 120 x 120 Pixel PHP: Dateityp-Deklaration

-

↑ e) Angabe der Scriptsprache

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

-

↑ f) Links zu Stylesheets

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"

-

↑ h) Stylesheetangaben im Kopfbereich

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>

-

⇧ 5 Körper (body)

-

↑ a) Körper - Allgemein

Bezeichnungen

Der Körper (body)besteht aus:

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

Formatierung mit Stylesheet

Pfeil nach rechts (Icon) 120 x 120 Pixel CSS: Formatierung von <body>

-

↑ b) Kopfbereich der Website

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 -->

-

↑ c) Steuerung/Navigation

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 -->

-

↑ d) Inhalt (content)

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 -->

-

↑ e) Fuss (footer)

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>
↑