Schattenland Tipps und Tricks Das Grundgerüst einer HTML Datei

Das Grundgerüst einer HTML-Datei

Der Aufbau einer HTML-Datei ist immer gleich, auch wenn sich der Inhalt unterscheiden kann.

DTD

Als Erstes steht eine Dokumenttyp-Deklaration (DTD) diese gibt Auskunft über die verwendete HTML-Version. Bei diesem Dokument sieht sie z.B. so aus:

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

dieser Tag ist stets vor dem <html>-Tag zu notieren.

Was bedeutet er?
Dieser DTD ist vom W3C herausgegeben worden, die hier verwendete Spachversion ist HTML 4.01 in der Transitional-Variante das EN steht für die Sprache der Elemente und Attribute nicht für den Inhalt der Seite. Es gibt 3 unterschiedliche Sprachvarianten für HTML, Sie können immer nur eine pro Dokument vergeben, Folgende gibt es:

-Strict:
Diese Angabe wird verwendet, wenn Sie keine alten Elemente und Attribute aus älteren HTML-Standards verwenden. Auch ist die Handhabung mit Verschachtelungsregeln strenger als bei anderen Sprachvarianten. Text der innerhalb der <body>-Tags, aber nicht in einem eigenen Tag steht, ist hier nicht erlaubt.

-Transitional:
Allgemein sind die Regeln etwas milder als in der Strict-Variante, hier dürfen Sie Text zwischen den <body>-Tags ohne eigenen Tag hineinschreiben. Des weiteren ist diese Variante zwingend erforderlich wenn Sie Links mit dem Attribut target ansprechen wollen.

-Frameset:
wie der Name schon sagt, ist diese Variante speziell für Seiten mit Frames gedacht.

Des weiteren gibt es noch spezielle Varianten für die Deklaration von XHTML, XHTML1.1, HTML2.0 und HTML 3.2 die hier aber nicht wichtig sein sollen. Wer noch mehr darüber lesen möchte ist hiermit gut beraten: SELFHTML

Und was bringt dieser Satz mir?
Dieser DTD gibt dem Browser vor, wie er die HTML-Datei interpretieren muss, so treten seltener Fehler auf.

nach oben ↑

Tags der HTML-Datei

Da der Browser jetzt weiß wie er unsere HTML-Datei lesen sollte können wir ihm was zum lesen geben:
All umschließend ist ein <html>-Tag sowie ein schließender </html>Tag Grundsätzlich werden Tags mit einem / geschlossen. Als erstes kommt nun immer der <head>-Tag hier stehen alle wichtigen Dinge drin, die die ganze Seite betreffen. Zum Beispiel:
Hier wird der Zeichensatz definiert, dieser wäre für folgende Länder gültig: Albanisch, Dänisch, Deutsch, Englisch, Farörisch, Finnisch, Französisch, Galizisch, Irisch, Isländisch, Italienisch, Katalanisch, Niederländisch, Norwegisch, Portugiesisch, Schwedisch, Spanisch.

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

In welcher Sprache ist die Seite verfasst?

<meta http-equiv="content-language" content="de">

Hier kommt eine kurze Beschreibung für die Suchmaschinen rein.(Mehr unter Keywords und Description)

<meta name="description" content="Kurze Beschreibung">

Der Autor der Seite

<meta name="author" content="webmaster">

Hier kommen Stichworte der Seite rein, ebenfalls für die Suchmaschine ( Mehr unter Keywords und Description)

<meta name="keywords" content="HTML, Grundgerüst, Titel, Keywords und Description, ">

Hier wird angegeben, dass die Seite mit CSS formatiert dargestellt werden soll.( Ausrichtung, Farben,...)

<meta http-equiv="Content-Style-Type" content="text/css">

Der Titel der Website (Mehr unter der richtige Titel der Website)

<title>Schattenland - Ihre betreute Webseite im Web - Tipps und Tricks zur eigenen Erstellung</title>

Ein sogenanntes Favicon, dass in der Adresszeile des Browsers angezeigt wird, sowie bei den Lesezeichen. Die Grafik können Sie selber in einem Zeichenprogramm wie gimp erstellen oder sich hier eines genereieren lassen: Favicon Bild raussuchen und auf Create klicken, dann auf download Favicon.

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

Ein Link zu der CSS Datei die für diese Website verwendet wird.

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

Ein Link zu einer Java-Script Datei die ein Java-Script enthält.

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

Abschließend auch hier wieder ein schließender </head>-Tag.

Jetzt kommt der Inhalt der auf der Seite angezeigt wird. Eingeschlossen in einem <body>Tag und einem schließendem </body>-Tag steht alles, was dem Nutzer angezeigt wird. So könnte dann der fertige Quelltext aussehen:

nach oben ↑

Ein fertiges HTML-Grundgerüst:

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

<html>
 <head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="de">
    <meta name="description" content="Beschreibung der Homepage">
    <meta name="author" content="webmaster">
    <meta name="keywords" content="HTML, Grundgerüst, Titel, Keywords und Description, ">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>Schattenland - Ihre betreute Webseite im Web - Tipps und Tricks zur eigenen Erstellung</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="Zeit.js" type="text/javascript">
    </script>
 </head>
 <body>
  <H1>Dies ist eine Beispielseite von Schattenland</H1>
  <p>Ich hoffe diese Seite hat ihnen weiter geholfen</p>
 </body>
</html>

beispiel.html

nach oben ↑

letzte Änderung: 11.10.2011

Impressum