Aufbau einer XHTML-Datei

0 | 6878 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Aufbau einer XHTML-Datei" mit Ihrem Wissen!

Anzeige Hier werben

Eine kleine Einleitung in XHTML

In diesen kleinen Tutorial kann man sehen, wie in unserer heutigen Zeit ein XHTML Dokument aufgebaut ist. Ich will dies anhand eines kleinen Beispieles erklären. Also gehen wir von den folgenden Vorraussetzungen aus:

  • Eine kleine Präsentation mit vier Menüpunkten, einem Kopfbereich und einen Fussbereich
  • Der Auftritt soll in xhtml 1.0 strict ausgezeichnet sein
  • Die Präsentation soll semantisch sinnvoll ausgezeichnet sein (Suchmaschinenfreundlichkeit)
Grundgerüst der XHTML Seite

Folgender Code zeigt, wie man mit möglichst wenig Elementen o.g. Aufgabe realisieren kann.

Die präsentation  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">     
<head>
<title>Tolle Präsentation</title><!-- Der Titel der Seite -->
<meta http-equiv="content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-Language" content="de">
<meta name="robots" content="index, follow" >
<link rel="stylesheet" type="text/css" href="design.css" >
</head>
<body>
    <div id="kopf">
        <h1>Überschrift / Logo</h1>
    </div>
    <ul id="navigation">
        <li><a href="#" title="Punkt 1">Punkt 1</a></li>
        <li><a href="#" title="Punkt 2">Punkt 2</a></li>
        <li><a href="#" title="Punkt 3">Punkt 3</a></li>
        <li><a href="#" title="Punkt 4">Punkt 4</a></li>
    </ul>

    <div id="inhalt">
        <p>Der Inhalt. Hier wird all das reinkommen, was den Inhalt betrifft.<br />
Ausserdem ist dies nur eine Erkl&auml;rung verschiedener html Tags. 
        </p>
        <hr />
         <img src="bild.jpg" alt="Tolles Bild" />
    </div>
    <div id="fuss"> Informationen, welche im Fussbereich stehen sollen
    </div>
</body>
</html>

Das sieht zwar auf den ersten Blick unheimlich kompliziert aus, ist es aber nicht. Im <head> Bereich werden Deklarationen reingeschrieben, welche der Benutzer nur indirekt zu Gesicht bekommt.

Dokumenttyp-Deklaration (dtd)

In der ersten Zeile wird festgelegt in welcher Sprache der Browser die Seite betrachten soll. Das w3c hat hierzu mehrere Möglichkeiten gegeben, welche Sie im Detail unter folgenden Links finden:

Das <title> Tag

Dieses Tag gibt ihrer Seite einen Titel. Dieser taucht im Browserfenster am oberen linken Rand auf. Es ist ratsam, hier sorgfältig bei der Auswahl der einzelnen Titel für die Unterseiten vorzugehen. Denn auch für Suchmaschinen ist der Titel einer Seite wichtig.

Die <meta> Angaben

Hier werden Angaben gemacht, die es Spidern von Suchmaschinen erleichtert Ihre Seite zu crawlen (durchsuchen).

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

Hier wird der Zeichensatz festgelegt (content-type). Mit der zweiten Angabe sage ich, dass ich in dem Format text/html schreiben möchte. Damit signalisiere ich dem spider, dass nun in html ausgezeichneter Text kommt. Als Zeichensatz habe ich ISO-8859-1 gewählt. Der Zeichensatz eines Dokumentes bestimmt auch welche Umlaute, Sonderzeichen, Schriftzeichen benutzt werden müssen. Die einzelnen Zeichensätze können Sie in unseren Grundlagenartikel: Zeichensatz nachlesen.

 
HTML
1
<meta http-equiv="content-style-type" content="text/css">

Mit dieser Zeile gebe ich zu erkennen, dass mein Dokument mit CSS-Elementen arbeitet.

 
HTML
1
<meta http-equiv="content-Language" content="de">

Hier deklariere ich die Sprache, in der mein Dokument verfasst ist. content="de" steht für deutsch. Solche Angaben erleichtern es Suchmaschinen Ihre Seite einen jeweiligen Sprachraum zuzuordnen.

 
HTML
1
<meta name="robots" content="index, follow" >

Hiermit weise ich Suchmaschinen darauf hin, dass mein Dokument mit samt allen Verweisen ausgelesen werden darf. Wenn dies nicht gewünscht ist muss vor index und follow ein no stehen. Also z.B. content="noindex"

Die CSS-Datei

In dieser Zeile gebe ich an, wo sich meine Style-Sheet-Datei befindet. In dieser Datei werden alle designtechnischen Grundsätze für die Seite festgelegt.

 
HTML
1
<link rel="stylesheet" type="text/css" href="design.css" >

In dieser Zeile wird festgelegt, dass eine Stylesheet Datei existiert, welche in der Sprache CSS als Text ausgezeichnet ist und im gleichen Ordner unter design.css zu finden ist.

Damit sind die grundlegenden Dinge im Kopfbereich definiert. Natürlich sind hier noch viel mehr Angaben möglich, doch damit soll sich in speziellen Artikel befasst werden.

Der <body> Bereich

Der Bereich, welcher von den <body> und </body> umschlossen ist, stellt nun den Inhalt da, welcher auf der Seite erscheint. Alle Angaben zur Größe, Abstand zum Fensterrand, allgemeine Schriftart, Hintergrundfarben ect. können in der CSS-Datei gemacht werden. Dies ist ein wesentlicher Unterschied zu früheren Html Dokumenten.

 
HTML
1
<div id="kopf"> <h1>Überschrift / Logo</h1></div>

Als erstes habe ich ein <div> Tag gesetzt, welches das Attribut id="kopf" enthaltet. Damit habe ich eine eindeutige Zuweisung für meine Style-sheet-Angaben. Innerhalb des Div gibt es eine Überschrift erster Ordnung (<h1>). Für o.g. Aufgabenstellung ist dieses Tag eigentlich nicht zwingend erforderlich, will man aber semantisch korrekt (und damit suchmaschinenfreundlich) auszeichnen, sollte man darauf nicht verzichten. Denn semantisch korrekt heisst in dem Fall, dass man eine Überschrift auch als eine Überschrift auszeichnet und da es sich hier um die wichtigste Überschrift handelt, muss eben ein <h1> drum herum gesetzt werden. Es spielt auch keine Rolle, ob Sie ihr Logo grafisch darstellen möchten, da man via css solche Tags dann verstecken kann. Vielmehr bietet man den Suchmaschinen damit eine Möglichkeit, ihre Hauptüberschrift oder ihr Logo problemlos zu finden.

 
HTML
1
2
3
4
5
6
<ul id="navigation">
<li><a href="#" title="Punkt 1">Punkt 1</a></li>
<li><a href="#" title="Punkt 2">Punkt 2</a></li>
<li><a href="#" title="Punkt 3">Punkt 3</a></li>
<li><a href="#" title="Punkt 4">Punkt 4</a></li>
</ul>

Wie man anhand der id dieser Liste erkennen kann, soll hier die Navigation dargestellt werden. Da es sich bei einen Menü immer um eine Aufzählung von Punkten handelt, verwendet man heutzutage dafür eben Listen. Eine Liste beginnt mit der Listendeklaration (<ul>) und den einzelnen Listenpunkten (<li>). ul steht für unformatierte Aufzählung. <ol> kann man auch verwenden. Hierbei handelt es sich um eine zählende Liste. Da aber beim Navigationsmenü meistens überhaupt keine Zeichen vorangestellt sein sollen, habe ich mich für ul entschieden.

 
HTML
1
2
3
4
5
<div id="inhalt">
<p>Der Inhalt. Hier wird all das reinkommen, was den Inhalt betrifft<br />
Ausserdem ist dies nur eine Erkl&auml;rung verschiedener html Tags. </p>
<img src="bild.jpg" alt="Tolles Bild" /> 
</div>

Damit komme ich nun zum eigentlichen Inhalt der Seite. Das <p> steht für Paragraph und dient zur textlichen Gestaltung. Ein <br /> (break) benutzt man, um einfache Zeilenumbrüche zu deklarieren. Wie Sie vielleicht erkannt haben, steht das <br /> ohne abschliesendes Tag da, dafür aber mit einem blackslash am Ende. Dies ist ebenso bei dem <hr /> Tag, was einen Trennstrich deklariert oder bei dem <img />, was ein Bild mit Pfad angibt (src="bild.jpg") und eine alternative Erklärung (alt="tolles bild") hat, was es zum einen für Suchmaschinen einfacher macht, auch ihre Bilder zu erfassen und Menschen, welche keine Bilder sehen möchten (aus welchen Grund auch immer) die Gelegenheit gibt Ihre Seite vollständig zu betrachten.

Damit wäre ein einfacher Inhalt mit diesen paar Elementen durchaus möglich. Hinweisen möchte ich noch auf die Umlaute. Wie sie sicher schon gesehen haben sieht in meinen Beispiel das Wort Erklärung etwas seltsam aus. Umlaute, sowie Sonderzeichen werden bei bestimmten Zeichensetzen mit einer Kombination aus normalen Buchstaben und Zeichen gebildet.

Der Fussbereich dient bei Webseiten oftmals zum erneuten Anzeigen der Hauptlinks., Haftungsausschlüssen oder Adressen.

Der Aufbau der XHTML ist damit abgeschlossen.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 2 Personen an der Seite "Aufbau einer XHTML-Datei" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Aufbau einer XHTML-Datei" hier bearbeiten.

Mitarbeiter
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
  • Online Marketeer & Projektmanager bei Team23 in Augsburg. Netzkind der ersten Stunde und Photoshopjunky. Seit über 10 Jahren im Bereich Design, Entwicklung & Online-Marketing tätig.