Erstellung von Webseiten in XHTML

Auf dieser Seite finden Sie einen Workshop zur Erstellung von Webseiten in XHTML. So können etwa Webdesign-Unkundige kleinere Änderungen an Ihrer Webseite selbst vornehmen, ohne damit gleich einen Webdesigner beauftragen zu müssen.

Um diesen Workshop durchzuarbeiten, werden keine HTML-Kenntnisse vorausgesetzt. Dies wird von Anfängern bei der Erstellung von Webseiten oft als Vorteil empfunden, da veraltete Syntaxkonstrukte von HTML erst gar nicht erwähnt werden. Auch XHTML-Markierungen die in den Browsern der heutigen Generation nicht, oder nicht einheitlich interpretiert werden, sind von wenigen Ausnahmen abgesehen, in diesem Workshop nicht dargestellt. Desweiteren werden nur solche Markierungen erwähnt, die unsere Webdesigner für das Verständnis als wichtig betrachten, da für den Erfolg Ihrer Webseitenentwicklung keine anderen Konstrukte nötig sind, oder sogar die Zugänglichkeit der Webanwendung behindern können.

Wir hoffen Sie finden durch diesen Workshop Gefallen am Webdesign und werden vielleicht selbst noch zum Webdesigner!

Allgemeines

Bei der Erstellung von Webseiten wurden Dokumente im Internet mit Hilfe von HTML (Hypertext Markup Language) dargestellt. In den letzten Jahren hat es sich jedoch durchgesetzt und von Vorteil erwiesen, die Erstellung von Webseiten in XHTML (Extensible HyperText Markup Language = erweiterbare Hypertext-Auszeichnungssprache) durchzuführen, welche seit Januar 2000 als Empfehlung des W3-Konsortiums vorliegt. In diesen Dokumenten sind die einzelnen Zeichen, Worte oder Absätze markiert. Die Web-Browser formatieren nun den Text anhand dieser Markierungen und stellt ihn auf dem Bildschirm dar. Die Erstellung von Webseiten mit XHTML-Dateien kann mit jedem Texteditor erfolgen. Im Editor vorgenommene Zeilenumbrüche werden nicht beachtet. Der Browser bricht die Zeile, in Abhängigkeit der Fenstergrösse, selbsttätig um. Auch mehrere hintereinanderstehende Leerzeichen werden vom Browser zu einem einzelnen Leerzeichen reduziert. Der Browser erkennt das XHTML-Dokument u.a. an der Dateiendung *.xhtml. Es ist jedoch ratsam auch in XHTML weiterhin die Dateiendungen *.htm oder *.html zu benutzen, um Probleme mit Browsern und Webservern zu vermeiden.

Markierungen (Tags)

Jeder Text wird in einem XHTML-Dokument mit Hilfe von Markierungen (Tags) eingeschlossen. Die Tags werden in spitze Klammern (< und >) geschrieben und markieren Anfang und Ende eines XHTML-Elementes (Bereich/Container). Ein Beispiel:

<p> Hier steht ein Textabsatz </p>

Hier wurde ein Bereich durch je ein Anfangs- und End-Tag gekennzeichnet. Das Tag <p> steht für einen neuen Absatz. Das entsprechende End-Tag hat zusätzlich noch einen Schrägstrich. Text darf nicht alleine stehen, d.h. jeder Text muß von einem Anfangs-Tag und seinem entsprechenden End-Tag umschlossen sein. Steht der Text in keinem anderen Tag, so sollte immer das <p></p>-Tag benutzt werden.

<p>
   Hier sind <strong> drei Worte fett </strong> geschrieben.
</p>

Das Element <strong> steht für stark hervorgehobenen Text und wird in allen Browsern als Fettschrift angezeigt. Einige Bereiche benötigen keine Endmarkierungen, andere besitzen noch zusätzliche Attribute. Tags können geschachtelt werden, wobei auf die richtige Schachtelung zu achten ist.

Markierungen mit Attributen

Fast alle XHTML-Elemente können in ihrem Anfangs-Tag sogenannte Universalattribute beinhalten. Ein solches Universalattribut ist beispielsweise title. Mit diesem Attribut kann dem jeweiligen Element ein zusätzlicher Text zugewiesen werden.

<p title="weiterer Text"> hier steht ein Textinhalt in einem eigenen Absatz </p>

Ein Attribut des Tags p ist title, es bekommt den Wert "weiterer Text" zugewiesen. Attributwerte sollten immer in Anführungszeichen geschrieben werden. Beim überfahren mit der Maus wird der zusätzliche Text des title-Attributs dann lesbar (Tooltip). Außer den Universalattributen können in XHTML-Elementen weitere elementabhängige Attribute vorkommen, die dann nur in diesen Elementen erlaubt sind.

Aufbau eines XHTML-Dokuments

Ein XHTML-Dokument beginnt mit folgender Dokumenttyp-Deklaration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Diese beiden Zeilen können auch in einer Zeile notiert werden. Wichtig ist nur dass sie durch ein Leerzeichen getrennt werden.

Hinweis: XML-Deklaration und Dokumenttyp-Varianten werden im Rahmen dieses Workshops zur Erstellung von Webseiten in XHTML nicht betrachtet und weggelassen!

Der Rest des XHTML-Dokuments wird in die Bereiche Kopf <head> und Rumpf <body> eingeteilt. Beide werden in die Tags <html> und </html> eingeschlossen. Im Bereich <head> werden Informationen über das HTML-Dokument angegeben, wie zum Beispiel der Titel <title>. Im Bereich <body> steht der eigentliche Inhalt. Nachfolgend ein Beispiel:

<html>
   <head>
      <title> Hallo Webdesigner </title>
   </head>
   <body>
      <p>Hier steht der Text</p>
   </body>
</html>

Was jetzt noch fehlt ist:

1. Die XML-Namensraumangabe mit zwei optional weiteren Attributen zur Sprachangabe im <html>-Anfangstag

   xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="en"

2. Die Angabe der verwendeten Kodierung mit MIME-Typ und Zeichensatz im Kopfbereich des XHTML-Dokuments

   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

3. Die optionale Einbindung einer Style Sheet-Datei style.css, in der alle Formatierungen zentral abgespeichert werden

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

Durch das Zusammenfügen dieser Komponenten erhält man nun ein Beispiel für ein einfaches XHTML-Dokument. Durch Einrückungen kann der Quelltext übersichtlicher gestaltet werden.

<!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" lang="de" xml:lang="de">
   <head>
      <title>Hier steht der Titel</title>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
      <link rel="stylesheet" href="style.css" type="text/css" />
   </head>
   <body>
      <p>Hier steht der Text</p>
   </body>
</html>

Übung 1:

Kopieren Sie den Quelltext oben in einen Texteditor, speichern in ab und benennen die Datei webdesign-1.html. Öffnen Sie anschließend die Datei in einem Browser Ihrer Wahl.