XHTML und CSS

XHTML ist eine Weiterentwicklung der Seitenbeschreibungssprache HTML. Dabei wird auf genaue Strukturen und Schreibweisen geachtet. Ziel dieser Weiterentwicklung ist es, Inhalte vom Layout möglichst zu trennen. Daduch wird es recht einfach das Aussehen einer Internetseite zu ändern ohne, dass inhaltliche Änderungen notwendig sind. Die logische Struktur wird dabei durch (X)HTML Befehle und das Layout in einer eigenen CSS-Datei festgelegt.

Durch bestimmte Schlüsselworte <TAGs> wird der Browser angewiesen den Text zu formatieren. Eine Internetseite/(X)HTML-Seite besteht nur aus reinem Text, der sehr rasch übertragen werden kann. Bilder und Grafiken müssen extra bereitgestellt werden. Durch den Browser werden die Seiten gestaltet und Bilder können eingebunden werden.

Eine weitere Ausbaustufe von HTML stellt XML dar. Hier müssen noch genauere Richtlinien beachtet werden. Dieses Format soll in der Zukunft die führende Rolle übernehmen. XHTML ist ein Zwischenschritt auf dem Weg dort hin. Daher sollten die Spielregeln vom XML auch jetzt schon berücksichtigt werden, so dass eine spätere Adaption leicht möglich ist.

XML ist casesensitiv, d.h. GROSS/kleinschreibung muss beachtet werden, daher sollten auch unter XHTML alle TAGs bereits klein geschrieben werden.

Funktion

Um bestimmte Strukturen zu erzielen, werden diese durch einen Schalter/TAG zuerst eingschaltet und am Ende wieder ausgeschaltet.
D.h. für (fast) jede Struktur gibt es einen EIN und einen AUS-Schalter, die immer in spitze Klammern eingeschlossen werden:
<h1> Schalter für den Beginn einer großen Überschrift
</h1>Schalter für das Ende einer großen Überschrift
Beispiel:
<h3>mittelgroße Überschrift</h3>
<p>Text eines Absatzes</p>

Wie diese Struktur am Bildschirm angezeigt wird hängt zunächst vom verwendeten Browser und dessen Grundeinstellungen ab. Im Normalfall wird die Struktur gut wiedergegeben. Möchte man dieses Aussehen verändern, kann dies mit zusätzlichen CCS-Befehlen eingestellt werden.

Grundgerüst HTML

<html> ........................ Beginn der HTML-Datei
   <head> ..................... Beginn des Kopfteils
      <title> Inhalt der Titelzeile </title>      
   </head> .................... Ende des Kopfteils
   <body> ..................... Beginn des sichtbaren Hauptteils
       Hier steht alles sichtbare der Webseite!      
   </body> ...... Ende des Hauptteils
</html> Ende der HTML-Datei

Grundgerüst XHTML

<!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"> 
                            ... Beginn der XHTML-Datei inkl. Namensraum und Sprachangabe
   <head> ..................... Beginn des Kopfteils
      <link href="mystyle.css" rel="stylesheet" type="text/css" />
                        ....... Link zum Stylesheet
      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
                        ....... Zeichensatz Festlegung
      <title> Inhalt der Titelzeile </title>
   </head> .................... Ende des Kopfteils
   <body> ..................... Beginn des sichtbaren Hauptteils
       Hier steht alles sichtbare der Webseite!      
   </body> ...... Ende des Hauptteils
</html> Ende der XHTML-Datei

Doctype

Doctype ist die Anweisung an den Browser nach welchem Standard der Seitenquelltext interpretiert und dargestellt werden soll. Bei der Variante strict dürfen keine veralteten TAGs mehr verwendet werden.

Namensraum

Der Namensraum legt fest, welches Vokabular bzw. welche Befehle verwendet werden dürfen.
Der Eintrag sieht zwar aus wie ein Link, ist aber nur eine Definition!

Sprachangabe

Damit auch Screenreader die Texte korrekt aussprechen können, sollte stets eine Sprachangabe bereitgestellt werden. Werden einzelne Absätze in anderen Sprachen veröffentlicht, so ist ebenfalls eine korrekte Sprachauszeichnung anzubringen.

Obwohl die beiden Eintragungen lang="de" xml:lang="de" den selben Zweck erfüllen, sollten sie stets doppelt verwendet werden, da nicht alle Geräte/Browser beide Notationen verstehen.

Überschrift

<h1> ÜberschriftGröße 1</h1>

<h2> Überschrift Größe 2</h2>

<h3> Überschrift Größe 3</h3>

<h4> Überschrift Größe 4</h4>

<h5> Überschrift Größe 5</h5>

<h6> Überschrift Größe 6</h6>

Absatz

<p> Absätze werden stets zwischen diesen beiden TAGs eingeschlossen. Dabei ist zu beachten, dass die Zeilenbreite durch den Browser bzw. das Browserfenster festgelegt wird.</p>

Zeilenumbruch

<br /> Da der Zeilenumbruch nichts einschließen kann, ist hier nur ein einzelnes TAG zu verwenden. Dieses enthält aber den / als Info, dass die Struktur auch schon wieder ausgeschaltet wird.
Das Leerzeichen vor dem / benötigen ältere Browsen zur korrekten Darstellung.

Umlaute

Umlaute und Sonderzeichen müssen maskiert werden, wenn nicht der richtige Zeichensatz angegeben wurde, da sonst nur ASCII-Text übertragen wird:

ä durch &auml; 
Ä durch &Auml;
ö durch &ouml; 
Ö durch &Ouml;
ü durch &uuml;
Ü durch &Uuml;
ß durch &szlig;

Auszeichnungen

<strong>starke - meist fett dargestellte - Hervorhebung</strong>
<em>einfache - meist kursiv (italic) dargestellte - Hervorhebung </em>

weitere Auszeichnungen können mittels CSS realisiert werden:
<span style="text-decoration:underline">unterstrichene Textauszeichnung </span>

Bilder

Bilder und Grafiken werden stets aus extra Dateien geladen. Diese sollten immer als komprimierte Dateien (*.gif, *.jpg, *.png) und der passenden Anzeigegröße (z.B. mit IrfanView verkleinert) vorliegen, damit der Ladevorgang kurz gehalten wird.

<img src='mein_bild.jpg' alt='alternative Textausgabe' title='Foto: Max Muster' />

alt wird angezeigt, wenn das Bild nicht geladen werden kann (außer IE)
title erscheint als Tooltip, wenn die Maus über das Bild fährt
/ am Ende nicht vergessen, damit das einteilige TAG abgeschlossen wird.

Links

Relative Verweise zeigen auf Seiten im eigenen Wirkungsbereich:

<a href='meine_seite_im_selben_verzeichnis.html'>sichtbarer Linktext</a>

Absolute Verweise zeigen auf fremde Seiten und müssen die komplete URL enthalten:

<a href='http://www.rg18.ac.at'>sichtbarer Linktext</a>

Verweise sollten immer gut sichtbar dargestellt werden. Von Verweisen wie mailto:maxi@mueller.mist sollte Abstand genommen werden, um die Spamflut möglichst gering zu halten. Außerdem sollten E-Mail Adressen nicht im Klartext (d.h. für Roboter sofort erkennbar) angegeben werden.

Tabellen

Tabellen sollten nur dann verwendet werden, wenn Inhalte wirklich tabellarisch gelistet werden sollen. Vom Missbrauch zu gestalterischen Zwecken sollte stets Abstand genommen werden und der Formatierung mit Listen oder andere Gestaltungselementen der Vorzug gegeben werden.

<table> .............. Beginn einer Tabelle
   <tr> .............. Beginn einer Zeile
     <td> ............ Beginn einer Zelle
       ...
       Inhalt der Zelle
       ...
     </td> ........... Ende der Zelle
     <td>...</td>
     <td>...</td>  ... weitere Zellen
   </tr> ............. Ende der Zeile
   <tr>
     <td>...</td>
     <td>...</td>
     <td>...</td>
  </tr> .............. weitere Zeile mit drei Zellen
  <tr>
     <td>...</td>
     <td>...</td>
     <td>...</td>
  </tr> .............. weitere Zeile mit drei Zellen
</table> ............. Ende der Tabelle

Aufzählung

Damit Aufzählungszeichen automatisch generiert werden, können unnummerierte Listen definiert werden.

<ul> ................. Beginn der Liste
   <li>Listenelemet 1</li>
   <li>Listenelemet 2</li> 
   <li>Listenelemet 3</li>
</ul> ................ Ende der Liste

Das sieht dann so aus:

Listenelemet 1
Listenelemet 2
Listenelemet 3

Durch verschiedene Attribute kann das Aussehen verändert werden:
Listen können auch gut zur Navigation genutzt werden.

Nummerierung

Damit Aufzählungen automatisch nummeriert werden, müssen geordnete Listen definiert werden.

<ol> ................. Beginn der Liste
   <li>Listenelemet 1</li>
   <li>Listenelemet 2</li> 
   <li>Listenelemet 3</li>
</ol> ................ Ende der Liste

Das sieht dann so aus:

Listenelemet 1
Listenelemet 2
Listenelemet 3

Durch verschiedene Attribute kann das Aussehen verändert werden:

Zitate

Zitate können auf verschiedene Arten dargestellt werden:

<blockquote>Dieses Zitat wird meist eingerückt, kursiv dargestellt ... </blockquote>

Dieses Zitat wird meist eingerückt, kursiv dargestellt und bildet einen eigenen Absatz. Es eignet sich für längere Texte und bildet einen schönen Block. Der Inhalt sollte zusätzlich noch in Absatz-Tags gefasst werden. Der weiteren Formatierung durch CSS steht nichts im Wege.

Kurze Zitate werden mit dem <q> innerhalb einer Zeile (inline) definiert  ... </q>

Kurze Zitate werden mit dem <q> innerhalb einer Zeile (inline) definiert. Sie bliden keinen eigenen Absatz und meist werden auch die Anführungszeichen automatisch ergänzt.

Auf die gleiche Weise kann <cite> verwendet werden, ...</cite>

Auf die gleiche Weise kann <cite> verwendet werden, allerdings werden hier keine Anführungszeichen ergänzt.

Kommentar

Attribute

Viele TAGs lassen sich durch Zusätze erweitern und somit das Layout weiter verfeinern.
Hier einige Beispiele:

align=left    Ausrichtung linksbündig
align=right   Ausrichtung rechtsbündig
align=center  Ausrichting zentriert
border=1      Rahmen von 1px um Tabelle

Dabei ist zu beachten, dass diese Zusätze besser mittels CSS umgesetzt werden sollten.

Blöcke formatieren

Ein ganzer Absatz oder Textblock kann sehr leicht mittels CSS-Anweisungen gestaltet werden, wenn dieser in <div>...</div> eingeschlossen wird und eine passende style-Anweisung ergänzt wird.

<div style="color:red"> setzt die Schriftfarbe für diesen Block auf rot </div>

Soll diese Auszeichnung für eine bereits vorhandenen HTML-Block z.B. <p>...</p> gelten, so kann die Style-Anweisung in dieses Tag integriert werden.

Worte formatieren

Analog zur Formatierung von Blöcken können kleinere Textbereiche mittels <span>...</span> ihr spezielles Format erhalten, indem man ebenfalls eine Style-Definition ergänzt.

CSS

Attraktive Formatierungen erreicht man am zweckmäßigsten mittels Cascading Style Sheets.

Obwohl HTML auch zahlreiche Formatierungsmöglichkeiten bietet, sollten diesen zukunftorientiert CSS-Attribute vorgezogen werden.
Ein kurzer Überblick ist zu finden unter:
http://umat.bineder.at/index.php?link=inf/css/css

Überprüfen

Um die korrekte Programmierung und dadurch die optimale Anzeige in vielen Browsern sicher zu stellen, können die (X)HTML-Seiten und CSS-Definitionen einer Onlineüberprüfung unterzogen werden. Dabei werden neben Tippfehleren auch oft unvollständige TAGS aufgespürt.

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

Literatur

Agular, Robert R.
HTML für Kids
4. Aufl. - Heidelberg : bhv 2009
ISBN 9783826686726

Lawson, Bruce; Sharp, Remy
HTML5
1. Aufl. - München : Addison-Wesley 2011
ISBN 9783827330734

Maurice, Florence
HTML & CSS
1. Aufl. - München : markt + technik 2010
ISBN 9783827245786

Münz, Stefan; Gull, Clemens
HTML5-Handbuch
Poing : Francis 2010
ISBN 9783645600798

Seibert, Björn; Hoffmann, Manuela
Professionelles Webdesign mit (X)HTML und CSS
[modernes Webdesign mit Webstandards ; Farbe, Grafik und Typ
1. Aufl. - Bonn : Galileo Press 2008
ISBN 9783836211048

Yves, Ernst
HTML
in 10 Minuten zur eigenen HomePage
1. Aufl. - Düsseldorf : Data Becker 1996
ISBN 3815815606

Links