XHTML
Einführung
Damit ein Browser den Text so darstellt, wie du es gerne hättest, musst du ihm den Text so vermitteln, dass er ihn versteht.
Dafür wird HTML verwendet.
HTML ist eine reine Auszeichnungssprache und hat nichts mit Programmierung zu tun. Ebenso hat es, richtig angewandt, nur einen geringfügigen direkten Designeffekt. Es wird lediglich die Struktur vorgegeben, die durch CSS das Design zugeteilt bekommt.
In diesem Abschnitt zeige ich, wie man eine Website in eine semantisch korrekte Form bringt.
Dafür wird der XHTML 1.0 Strict Standard verwendet. Dies ist ein sehr strikter und kleinlicher Standard und bietet in meinen Augen den perfekten Einstieg in ein semantisch korrektes Markup, da er so gut wie keine Fehler zulässt.
Der Aufbau
Syntax
In einem XHTML Dokument werden alle Abschnitte mit sogenannten Tags (englisch ausgesprochen) strukturiert. Diese werden mit dem Kleiner- (<) und Größerals (>) geöffnet beziehungsweise geschlossen. Jeder Tag wird durch einen Schrägstrich (/) beendet.
Im Beispiel sieht das so aus:
<html>
[Seiteninhalt]
</html>
Hierbei handelt es sich um das HTML Tag-Paar, welches den gesamten Quelltext umschließt. Da sich innerhalb dieses HTML Tag-Paares Inhalt (in diesem Fall der weitere Quellcode) befindet, wird es geöffnet und wieder geschlossen.
Eine andere Variante sind einzelne selbstschließende Tags, wie zum Beispiel das, mit dem man einen Zeilenumbruch vornimmt.
<br />
Da dieser Tag keinen Inhalt birgt, muss nur durch einen Strägstrich gezeigt werden, dass er beendet wurde.
Mit diesen Tags wird der gesamte Quellcode aufgebaut.
Die Dokumenttypdeklaration
Ich habe eben erwähnt, dass das <html>-Paar den gesamten Quellcode umschließt. Dennoch muss dem Browser davor noch übermittelt werden, um welche HTML-Variante es sich handelt.
Das wird mit Hilfe der Dokumenttypdeklaration (engl.: Doctype) gemacht.
Für XHTML 1.0 sieht dieser wie folgt aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Kopiere diesen so wie er ist und setze ihn an den Anfang jedes HTML-Dokument.
Wenn du mehr zu den Dokumenttypen wissen willst, dann kannst du hier mehr dazu lesen.
<head> - Kopf
Im <head> werden alle seitenrelevanten Dinge geregelt. Dazu gehören zwingend der Titel der Seite und optional diverse Informationen zum Autor und Inhalt der Seite sowie der Standort von Stylesheets (siehe CSS) und dem Favicon.
Für den Anfang reicht die Nennung des Seitentitels:
<head>
<title>Seitentitel</title>
</head>
<body> - Körper
Bisher haben wir folgendes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Seitentitel</title>
</head>
</html>
Wenn man nun noch das <body> Tag-Paar ergänzt, dann hat man schon eine valide und den Anfang für eine semantisch gut strukturierte Seite geschaffen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Seitentitel</title>
</head>
<body>
</body>
</html>
Innerhalb dieses Bereiches werden nun die Inhalte eingefügt, die man für eine einfache Seite benötigt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Seitentitel</title>
</head>
<body>
Seitenüberschrift
Menü
Seiteninhalt
Seitenende
</body>
</html>
Wenn man diese Seite speichert und im Browser betrachtet, dann hat man die vier Inhalte untereinander aufgelistet, was jedoch sehr langweilig aussieht. Um das später mit CSS ändern zu können, müssen die vier Bereiche syntaktisch sinnvoll in logische Tag-Paare eingebettet und mit einer ID versehen werden.
Der header der Seite (nicht verwechseln mit dem <head> des HTML-Dokuments) bekommt eine Überschrift verpasst.
Überschriften werden mit <h1>, <h2>, <h3> usw. bezeichnet.
Die Zahlen bezeichnen nicht die Reihenfolge, sondern die Rangordnung. In diesem Fall wird an höchster Stelle <h1> verwendet.
<h1 id="header">Seitenüberschrift</h1>
Das Menü bekommt einzelne Punkte, welche in einer ungeordneten Liste untergebracht werden. Diese wird verwendet um dem Browser zu zeigen, dass es sich hierbei um eine Aufzählung handelt.
Dabei umschließt <ul></ul> die Liste, während <li></li> die einzelnen Punkte kennzeichnet.
<ul id="menu">
<li>Menüpunkt1</li>
<li>Menüpunkt2</li>
<li>Menüpunkt3</li>
<li>Menüpunkt4</li>
</ul>
Damit man auf die Menüpunkte klicken kann werden ihnen Anker <a> zugewiesen. Damit diese auch irgendwohin verweisen können, gibt man ihnen das Attribut "href" mit einer Pfadangeabe mit auf den Weg.
<ul id="menu">
<li><a href="#">Menüpunkt1</a></li>
<li><a href="#">Menüpunkt2</a></li>
<li><a href="#">Menüpunkt3</a></li>
<li><a href="#">Menüpunkt4</a></li>
</ul>
Anstelle der Raute wird der Pfad zu der anderen Datei eingegeben (z.B.: index.html, about.html, impressum.html,...). Das ist für den Aufbau aber noch nicht wichtig.
Der Inhalt bekommt auch eine Überschrift zugewiesen. Außerdem wird das gesamte Inhaltskonstrukt in einer Division (<div>) verpackt.
Diese werden dafür verwendet um Blockelemente zu gruppieren. Da viele nicht verstehen, was das bedeutet oder festgestellt haben, dass eine Strukturierung mit <div>-Paaren sehr einfach ist, werden diese meistens in Mengen verwendet.
Ich neige selbst auch dazu.
Wenn eine Division nur ein direktes Kindelement besitzt, dann kann es auch weggelassen werden. Im Falle vom Menü, wäre ein <div>, welches die Liste <ul> noch zusätzlich umschließt zum Beispiel unnötig gewesen.
<div id="content">
<h2>Überschrift</h2>
</div>
Da <h1> schon in der logisch höheren Ebene als Seitenüberschrift verwendet wird, sollte nun die nächste Ebene <h2> verwendet werden.
Wenn innerhalb dieses Abschnittes Unterbereiche kommen, so wird <h3> verwendet. Um einen Absatz zu markieren wird das Absatz Tag-Paar <p></p> verwendet. Für Zeilenumbrüche nimmt man das am Anfang erwähnte <br />
<div id="content">
<h2>Überschrift</h2>
<p>Einleitender Text</p>
<h3>1. Überschrift des Submenüpunktes</h3>
<p>Weiterer Text</p>
<h3>2. Überschrift des Submenüpunktes</h3>
<p>Noch mehr Text.<br />
Diesmal wurde ein Zeilenumbruch verwendet.</p>
</div>
Der Seitenfuß bekommt vorerst nur eine Division mit id.
Das gesamte Dokument
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Seitentitel</title>
</head>
<body>
<div id="header">
<h1>Seitenüberschrift</h1>
</div>
<ul id="menu">
<li><a href="#">Menüpunkt1</a></li>
<li><a href="#">Menüpunkt2</a></li>
<li><a href="#">Menüpunkt3</a></li>
<li><a href="#">Menüpunkt4</a></li>
</ul>
<div id="content">
<h2>Überschrift</h2>
<p>Einleitender Text</p>
<h3>1. Überschrift des Submenüpunktes</h3>
<p>Weiterer Text</p>
<h3>2. Überschrift des Submenüpunktes</h3>
<p>Noch mehr Text.<br />
Diesmal wurde ein Zeilenumbruch verwendet.</p>
</div>
<div id="footer">
Seitenende
</div>
</body>
</html>
Jetzt hat man ein semantisches Markup und könnte sich nun (fast) der genaueren Gestaltung mit CSS widmen.
Metatags
Bevor ich das Seitendesign mit CSS erkläre, möchte ich mich noch einmal kurz dem <head> zuwenden.
Dieser dient nicht nur der Integration des Seitentitels, sondern auch (unter anderem) dazu die Seite mit Metatags näher zu beschreiben.
Metatags sind einzelne Tags, die immer im <head> eingebaut werden müssen und bieten die Möglichkeit seitenrelevante Dinge an Browser, Suchmaschine und User zu übermitteln.
Das ist eigentlich so langweilig und unspektakulär, wie es klingt.
Es reicht, wenn man einmal davon gehört und sich die wichtigsten gemerkt hat, weswegen ich auch nur diese aufzähle. Eine kleine Erklärung gibt es alternativ noch bei Wikipedia und eine umfassende Sammlung bei SELFHTML.
Autor
<meta name="author" content="Horst Müller" />
Name des Autors und damit inhaltlich Verantwortlichen.
Seitenbeschreibung
<meta name="description" content="Seitenbeschreibung von dem Horst Müller seiner Seite" />
Dieser Tag dient einer kurzen (≤80 Zeichen) Beschreibung der eigenen Seite. Diese Beschreibung steht übrigens auch bei Google, weswegen man sie nicht weglassen sollte.
Keywords
<meta name="keywords" content="Horst Müller, Fußball, Titten, Bier" />
Die Keywords umreißen grob den "Inhalt" der Seite. In Seo-Tutorials wird empfohlen ca. 10 Begriffe oder Begriffsgruppen zu nennen. Ob diese wirklich das Ranking in den Suchmaschinen beeinflusst ist umstritten, aber es richtet auch keinen Schaden an, wenn man es nicht übertreibt.
Die Wörter sollte man erst zum Ende der Seitenfertigstellung auswählen und vorher auch mal ein SEO-Tutorial durchgelesen haben.
Sprache
<meta name="language" content="de" />
Das Sprachtag beschreibt in welcher Sprache die Seite verfasst wurde (wer hätte das gedacht?). Das lohnt sich, wenn man bei den "Seiten auf Deutsch" von Google erfasst werden möchte.
Suchroboter
<meta name='robots' content='index,follow' />
Das Robots-Metatag erklärt Suchrobotern, ob die Seite durchsucht werden soll oder nicht. Inwieweit sie sich daran halten, lasse ich mal im Raum stehen.
Weitere Optionen der Anweisung wurden bei Wikipedia zusammengefasst.
Zeichenkodierung
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
Der Content Type beschreibt die Zeichenkodierung der Seite. Wenn die Seite nun auch noch als UTF-8 gespeichert wird (Geht bei den meisten Editoren), dann werden auch Umlaute und Sonderzeichen nun vernünftig dargestellt.
Zum ausführlicheren Nachlesen liefere ich noch einen Link nach.
Weiterführendes
Eine Übersicht über alle XHTML Tags kannst du auf der XHTML Referenz von mediaevent.de finden.
Ein ausführlicheres Tutorial gibt es auf der Seite von Michael Jendryschik.
Im Laufe deines Selbststudiums werden dir garantiert die Begriffe "Frames", "iFrames" und "Tabellenlayout" über den Weg laufen. Lass davon gleich die Finger. Du möchtest doch bestimmt keine Zeit mit unwichtigem Kram verschwenden, oder?
Frames und iFrames wurden erfunden, um Seiten dynamisch zu machen. Das ganze kann man mit PHP aber viel besser umsetzen. Mit PHP ist die Zusammensetzung der einzelnen Seiten serverseitig, wodurch beim Benutzer nur eine Seite erscheint. Etwas genauer kann man es hier nachlesen.
Tabellenlayout wurde irgendwann dazu missbraucht um Seiten zusammenzuschnipseln. Der eigentliche Zweck ist aber die strukturierte Darstellung von Daten.
Das ganze kann man nach ein wenig Einarbeitungszeit mit CSS einfacher und schöner umsetzen. Mehr dazu kannst du hier erfahren.
