HTML

Inhaltsverzeichnis

CGI

Die CGI-Schnittstelle

Wenn ein serverseitiges Script angefordert wird, so muss der Webserver wissen, dass er es ausführen soll. Dazu bietet etwa der Apache Webserver zwei grundsätzliche Varianten an. Die eine besteht darin, den zugehörigen Script-Interpreter als Apache-Modul einzubinden. Ein entsprechendes, die API-Schnittstelle des Apache bedienendes Modul muss natürlich existieren. So wird es in der heutigen Praxis mit PHP in der Regel gemacht.

Die zweite und ältere Variante ist die so genannte CGI-Schnittstelle. CGI steht für Common Gateway Interface. Die CGI-Schnittstelle besteht darin, dass bestimmte Verzeichnisse als CGI-Verzeichnisse definiert werden. In solchen Verzeichnissen (und in Unterverzeichnisstrukturen davon) dürfen Scripts abgelegt werden, die der Webserver als für ihn ausführbar akzeptiert. In welcher Programmiersprache die Scripts geschrieben sind, ist dem Webserver egal. Wichtig ist nur, dass er den Script-Interpreter ermitteln kann, z.B. über die Dateiendung der Scripts oder über deren Shebang-Zeile. Es kann sich natürlich auch um kompilierte Programme handeln, die ohne Interpreter direkt ausführbar sind.

Ein CGI-Script kann serverseitig Daten verarbeiten, mit Datenbanken kommunizieren usw.

Am Ende sollte es jedoch stets Daten auf die Standardausgabe schreiben. Da es vom Webserver ausgeführt wird, kann dieser die Ausgaben des Scripts auffangen und zum aufrufenden Browser senden. Bei seiner Antwort an den Browser beschränkt sich der Webserver im HTTP-Protokoll auf das reine HTTP-Kommando ohne zusätzliche HTTP-Header. Diese muss das CGI-Script selber erzeugen. Der Vorteil davon ist eine große Flexibilität. CGI-Scripts erzeugen in der Regel HTML-Code, aber sie können ebenso gut Binärdaten einer dynamisch erzeugten Grafik oder andere Daten ausgeben. Wichtig ist, dass die ausgegebenen HTTP-Header und die ausgegebenen Daten vom aufrufenden Browser, der die Daten vom Webserver gesendet bekommt, verarbeitbar sind. CGI-Scripts erzeugen jedoch nicht nur Ausgaben, sondern verarbeiten meistens auch Input. Den Input erhalten sie beim Aufruf durch den Browser über die beiden möglichen Eingabekanäle GET oder POST. Bei GET werden die Input-Daten bekanntlich als Query-String im URI mit übertragen. Bei POST werden sie über den Standardeingabekanal des Server-Rechners zur Verfügung gestellt.

CGI-Aufrufmöglichkeiten in HTML

Sobald Sie dieses Programm mittels der verschiedenen Aufrufmöglichkeiten ausführen, sorgen die Anweisungen dafür, dass der HTML Quelltext zur Interpretation und Ausgabe an den Browser zurückgegeben wird. In HTML gibt es verschiedene Orte, an denen ein CGI-Script aufgerufen werden kann:

  • Über ein Formular: Beispiel: <form action="/cgi-bin/guestbook.pl" method="post">. Durch Absenden des Formulars sendet der Browser an den Webserver über HTTP im Beispiel eine POST-Anforderung für die Datenressource /cgi-bin/guestbook.pl. Der Webserver erkennt, dass es sich um ein CGI-Script handelt, und führt es aus. Die vom Anwender eingegebenen oder ausgewählten Daten stehen dem CGI-Script zur Verarbeitung zur Verfügung – im obigen Beispiel über den POST-Eingabekanal. Formulare sind auch die einzige Möglichkeit in HTML, CGI-Scripts über den POST-Eingabekanal mit Daten zu versorgen.
  • Über Verweise: Es genügt, als URI des Verweisziels das ausführbare CGI-Script anzugeben, z.B. <a href="/cgi-bin/statistik.pl">Statistik</a>. Dies ist vor allem sinnvoll für CGI-Scripts, die keinen Input vom Anwender benötigen, sondern lediglich feste Datenausgaben erzeugen, zum Beispiel für ein CGI-Script, das aktuelle Zugriffsstatistiken für Webseiten ausgibt.
  • Über eine Grafikreferenz: Auch dabei genügt es, als URI in der src-Angabe des <img>-Tags das ausführbare CGI-Script anzugeben, z.B. <img src="/cgi-bin/counter.pl">. Dabei muss das CGI-Script allerdings eine Grafikdatei im GIF- oder JPEG-Format an den Webbrowser zurücksenden. Die meisten grafischen Zugriffszähler basieren auf diesem Prinzip.
  • Über Server Side Includes: Über eine SSI-Anweisung in einer SHTML-Datei wie z.B. <!-- #exec cgi="/cgi-bin/counter.pl" --> kann ein CGI-Script automatisch beim Aufruf der SHTML-Datei ausgeführt werden. Das ist sehr praktisch, um mithilfe eines CGI-Scripts dynamische Information in Textform in eine HTML-Datei einzubinden.

 

CGI-Konfiguration

Welche Verzeichnisse als CGI-Verzeichnisse gelten, wird in der Konfiguration des Webservers festgelegt. Beim Apache Webserver kann dies wahlweise in der zentralen Konfiguration der Datei httpd.conf geschehen oder in verzeichnisspezifischen .htaccess-Dateien.

Zentrales CGI-Verzeichnis einrichten

Um in der httpd.conf ein zentrales CGI-Verzeichnis zu bestimmen, müssen Sie die Direktive ScriptAlias verwenden. Suchen Sie in der httpd.conf nach einer entsprechenden Direktive. Per Default ist bereits eine Direktive für CGI-Scripts eingetragen, jedoch auskommentiert. Entfernen Sie die Auskommentierung, also das führende Gatterzeichen (#). Ein typischer Eintrag lautet:

ScriptAlias /cgi-bin/ "/var/www-scripts/cgi-bin/"

Info Die Direktive erwartet zwei Parameter. Im ersten Parameter wird der absolute Pfadname aus URI-Sicht angegeben und im zweiten Parameter der absolute Pfadname aus Sicht des Dateisystems am Server-Rechner. Der zweite Parameter steht in hohen Anführungszeichen. Beachten Sie, dass beide Pfadnamen am Ende noch mal einen Schrägstrich enthalten müssen!

Das CGI-Verzeichnis muss übrigens nicht innerhalb der Document Root liegen.

Angenommen, im obigen Beispiel wurde DocumentRoot /var/www festgelegt. Dann befindet sich das angegebene CGI-Verzeichnis parallel dazu auf gleicher Verzeichnisebene, aber nicht unterhalb davon. Der Webserver löst Client-Anfragen wie http://server/cgi-bin/test.cgijedoch auf Grund der Zuordnung bei der ScriptAlias korrekt auf. Damit CGI-Scripts funktionieren, muss beim Apache ferner das CGI-Modul geladen werden. Dazu darf in der httpd.conf der Eintrag, der mit LoadModule cgi_module… beginnt, nicht auskommentiert sein. Sollte dies der Fall sein, müssen Sie das Kommentargatterzeichen entfernen. In jedem Fall ist es ferner sinnvoll, in folgender Zeile einer httpd.conf das Kommentarzeichen zu entfernen:

AddHandler cgi-script .cgi  

Damit dürfen CGI-Scripts die Dateiendung .cgi haben.

Dezentral CGI-Verzeichnisse einrichten

Die zweite Möglichkeit besteht darin, mehrere CGI-Verzeichnisse einzurichten. Das kann entweder innerhalb einer Direktivengruppe zwischen <Directory> und </Directory> geschehen oder innerhalb des gewünschten Verzeichnisses selbst in einer .htaccess-Datei. In letzterem Fall muss sich das Verzeichnis allerdings innerhalb der Document Root befinden. In beiden Fällen können Sie folgende Direktiven notieren:

Options +ExecCGI  AddHandler cgi-script .cgi  

CGI-Scripts in allen Webverzeichnissen erlauben

Es ist auch möglich, CGI-Scripts in allen Verzeichnissen unterhalb der Document Root zu erlauben. Dazu müssen Sie in der httpd.conf die Direktivengruppe <Directory></Directory> für das Verzeichnis suchen, das als Document Root definiert wurde. Wenn Sie dort bei der Direktive Options den Wert ExecCGI mit angeben, können CGI-Scripts in allen Webverzeichnissen abgelegt werden.

Voraussetzungen für CGI-Scripts

Die wesentliche Voraussetzung ist dabei die, dass der Server weiß, aus welchen Verzeichnissen er heraus CGI-Scripts ausführen soll und aus welchen nicht. Auch die CGI-Scripts selber müssen Voraussetzungen erfüllen, damit die CGI-Schnittstelle tatsächlich bedient werden kann:

  • Das Script muss in einem als CGI-Verzeichnis konfigurierten Verzeichnis abgelegt werden.
  • Sowohl das CGI-Verzeichnis als auch das CGI-Script müssen auf einem Linux-/Unix- System für den Webserver ausführbar sein. Da der Webserver als ganz normaler Benutzer vom Typ „Rest der Welt“ auf dem System läuft, müssen die Ausführrechte entsprechend gesetzt werden. Am sinnvollsten ist es, wenn sowohl Dateieigentümer als auch seine Primärgruppe und der Rest der Welt Ausführrechte erhalten. Das Schreibrecht sollte jedoch dem Eigentümer oder maximal noch seiner Gruppe vorbehalten sein. In der Regel ist chmod 755 für das CGI-Verzeichnis und die Scripts darin eine sinnvolle Wahl.
  • Das Script muss zumindest einen HTTP-Header für das Feld CONTENT-TYPE ausgeben.

CGI-Umgebungsvariablen

Zur so genannten „CGI-Schnittstelle“ gehören auch die CGI-Umgebungsvariablen. Ein installierter Webserver stellt solche Variablen auf Betriebssystemebene zur Verfügung. Bei jedem Aufruf eines CGI-Scripts füllt er einige dieser Variablen mit Informationen. Das CGI-Script kann den Inhalt dieser Variablen auslesen und für eigene Zwecke nutzen. Das CGI-Script kann einige dieser Variablen auch selbst mit Inhalt füllen oder einen dort gespeicherten Inhalt ändern. CGI-Umgebungsvariablen existieren unabhängig von den Variablen, die Sie in einem CGI-Script selbst definieren können.

In CGI-Umgebungsvariablen ist während der Ausführung eines CGI-Scripts beispielsweise der Namen des Server-Rechners gespeichert oder Information zum verwendeten Browser des Anwenders, der den Aufruf des CGI-Programms verursacht hat. Wenn zum Aufruf des CGI-Scripts aus einem Formular die GET-Methode verwendet wurde, stehen die Daten, die der Anwender in das Formular eingegeben hat, in einer CGI-Umgebungsvariable.

Um CGI-Umgebungsvariablen aus einem CGI-Programm heraus zu nutzen,

müssen Sie in der verwendeten Programmiersprache die Techniken zum Auslesen von Umgebungsvariablen einsetzen. In Perl können Sie beispielsweise mit einer Anweisung wie print $ENV{'SERVER_NAME'}; den Hostnamen des Servers ausgeben. Perl stellt nämlich alle verfügbaren Umgebungsvariablen in einem vordefinierten Hash namens %ENV; zur Verfügung. Um herauszufinden, welche Umgebungsvariablen auf Ihrem Webserver verfügbar sind, können Sie das folgende kleine Perl-Script verwenden. Den Quellcode können Sie mit einem Texteditor im eingestellten CGI-Verzeichnis beispielsweise unter dem Namen env.pl abspeichern. Angenommen, Vorausgesetzt, Ihr CGI-Verzeichnis heißt wie üblich cgi-bin und der Webserver ist gestartet, dann können Sie das Script im Browser mit der Adresse http://127.0.0.1/cgi-bin/env.pl oder auch mit der Adresse http://localhost/cgi-bin/env.pl aufrufen. Datei env.pl

#!/usr/bin/perl -w    use strict;  use CGI::Carp qw(fatalsToBrowser);  print "Content-type: text/html\n\n";  print '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">', "\n";  print "<html><head>      <title>Umgebungsvariablen</title></head><body>\n";  print "<h1>Umgebungsvariablen:</h1>\n";  print "<table border=\"1\">\n";  print "<tr><th align=\"left\" bgcolor=\"#E0E0E0\">Variablenname</th>",      "<th align=\"left\" bgcolor=\"#E0E0E0\">Wert</th></tr>\n";  foreach(keys( % ENV)) {      print "<tr><td><b>$_</b></td>          <td><tt>$ENV {              $_          } </tt></td>         </tr>\n";  }  print "<tr><th align=\"left\" bgcolor=\"#E0E0E0\" colspan=\"2\">insgesamt: ",      scalar keys(%ENV)," Umgebungsvariablen</th></tr>\n";  print "</table>\n";  print " </body></html>\n";  

Info Das Script erzeugt eine HTML-Tabelle mit allen auf dem Server verfügbaren Umgebungsvariablen. Auf die Perl-Anweisungen wird an dieser Stelle noch nicht näher eingegangen. Nur die erste Zeile des Scripts (die so genannte shebang) müssen Sie möglicherweise anpassen. Dort, wo im Beispiel #!/usr/bin/perl steht, müssen Sie, falls Sie beim Aufruf eine Fehlermeldung wie Internal Server Error erhalten, den kompletten Pfad zur ausführbaren Datei, also zum Perl-Interpreter, angeben. Wenn Sie den Perl-Interpreterunter MS Windows beispielsweise unter c:\programme\perl installiert haben, lautet Ihre erste Script-Zeile also:

#!c:/programme/perl/bin/perl  

Die Dateinamen-Erweiterung .exe können Sie ohne weiteres weglassen.

Übersicht bekannter CGI-Umgebungsvariablen

Die folgende Tabelle ist nach Variablennamen alphabetisch sortiert.

VariablennameErläuterung
CONTENT_LENGTHEnthält die Anzahl der Zeichen, die beim Aufruf des CGI-Scripts über die POST-Methode übergeben wurden. Wenn das CGI-Script beispielsweise beim Absenden eines HTML-Formulars aufgerufen wurde und dort als übertragungsmethode POST angegeben ist, steht in dieser Umgebungsvariablen, wie viele Zeichen das Script von der Standardeingabe lesen muss, um die übermittelten Formulardaten vollständig einzulesen.
CONTENT_TYPEEnthält beim Aufruf über die POST-Methode den MIME-Typ der übergebenen Daten. Wenn das CGI-Script beispielsweise beim Absenden eines HTML-Formulars aufgerufen wurde und dort als übertragungsmethode POST angegeben ist, steht in dieser Umgebungsvariablen der für HTML-Formulare typische MIME-Typ application/x-www-form-urlencoded (zu diesem MIME-Typ siehe auch Datenstrom bei übertragung von Formulardaten).
DOCUMENT_ROOTEnthält den physischen Pfad des Wurzelverzeichnisses für die Ablage von Dateien, die im Webserver aufrufbar sind. Ein CGI-Script kann aus dieser Angabe beispielsweise absolute Pfadnamen zum öffnen von Dateien errechnen.
GATEWAY_INTERFACEEnthält die Version der CGI-Schnittstelle, die von dem installierten Server unterstützt wird, z.B. CGI/1.1, wenn die gegenwärtig übliche Version 1.1 der Schnittstellendefinition unterstützt wird.
HTTP_ACCEPTEnthält die Liste der MIME-Typen, die der aufrufende Web-Browser akzeptiert. Die Angabe */* bedeutet: der Web-Browser akzeptiert alles.
HTTP_ACCEPT_CHARSETEnthält die Liste der Zeichenkodierungen, die der aufrufende Web-Browser akzeptiert, beispielsweise iso-8859-1, utf-8, utf-16, *;q=0.1.
HTTP_ACCEPT_ENCODINGEnthält eine Liste der Kodierungsmethoden, die der aufrufende Browser akzeptiert. Manche Browser akzeptieren beispielsweise auch den Kodierungstyp gzip, was bedeutet, dass der Browser auch Dateien empfangen kann, die nach dem GNU-Zip-Algorithmus komprimiert an ihn übertragen werden.
HTTP_ACCEPT_LANGUAGEEnthält, welche Landessprache der aufrufende Browser bei seiner Benutzeroberfläche verwendet. Häufige Werte sind z.B. de (für deutschsprachige Browser) oder en (für englischsprachige Browser). Ein CGI-Script kann aufgrund dieser Angabe beispielsweise entscheiden, ob es eine deutschsprachige oder eine englischsprachige Antwort an den Browser sendet.
HTTP_CONNECTIONEnthält Informationen über den Status der HTTP-Verbindung zwischen Server und aufrufendem Browser. Der Wert Keep-Alive bedeutet, der Browser wartet auf Antwort.
HTTP_COOKIEEnthält Namen und Wert von Cookies, sofern solche vom aufrufenden Browser gesendet werden. Mit der Perl-Anweisung: my @cookies = split(/[;,]\s*/,$ENV{‚HTTP_COOKIE‘}); können Sie alle gesetzten Cookies ermitteln. Jedes Element des Arrays namens @cookies enthält dann jeweils einen Cookie, bestehend aus einem Namen und einem Wert, die durch ein Gleichheitszeichen = getrennt sind. Der Wert eines Cookies ist im Format des MIME-Typs application/x-www-form-urlencoded gespeichert (zu diesem MIME-Typ siehe auch Datenstrom bei übertragung von Formulardaten).
HTTP_HOSTEnthält den Domain-Namen oder die IP-Adresse aus der Adresszeile des aufrufenden Browsers. Für ein CGI-Script kann diese Angabe wichtig sein, falls es mehrere Server bedienen muss.
HTTP_REFEREREnthält den URI der Web-Seite, von der aus das CGI-Script aufgerufen wurde. Der Wert wird jedoch nicht von allen Web-Browsern korrekt übermittelt, ist also nicht in jedem Fall verfügbar. Anmerkung: Wenn Ihnen die englische Sprache geläufig ist, werden Sie feststellen, dass HTTP_REFERER eigentlich HTTP_REFERRER heißen müsste. Den Autoren der ersten Spezifikation von HTTP ist dieser Fehler unterlaufen, der sich aus historischen Gründen und aufgrund der Abwärtskompatibilität von HTTP bis heute hält.
HTTP_USER_AGENTEnthält Produkt- und Versionsinformationen zum aufrufenden Web-Browser. Ein CGI-Script kann auf diese Weise ermitteln, welchen Browser ein Anwender verwendet.
PATH_INFOWird einem CGI-Script eine Zeichenkette mit Daten übergeben, dann enthält PATH_INFO den Teil der Zeichenkette nach dem Namen des Scripts bis zum ersten ?. Wenn das Script beispielsweise die Adresse http://meine.seite.net/cgi-bin/test.pl hat, aber mit http://meine.seite.net/cgi-bin/test.pl/querys/musicbase.sql?cat=Mozart aufgerufen wird, dann enthält diese Umgebungsvariable den Anteil /querys/musicbase.sql. Sie ist dazu gedacht, Dateinamen mit Pfadangabe als übergabeparameter für Scripts zu ermöglichen.
PATH_TRANSLATEDEnthält wie PATH_INFO den Anteil des URI nach dem Scriptnamen bis zum ersten ?, jedoch mit dem Unterschied, dass nicht der Anteil selbst aus dem URI zurückgegeben wird, sondern der vom Webserver übersetzte Datenpfad dieses Anteils. Angenommen, das Script hat die Adresse http://meine.seite.net/cgi-bin/test.pl, wurde aber mit http://meine.seite.net/cgi-bin/test.pl/querys/musicbase.sql aufgerufen. Dann könnte der zusätzliche Adressanteil /querys/musicbase.sql aus Sicht des Webservers beispielsweise in einen physischen Pfadnamen wie /usr/web/seite/querys/musicbase.sql aufgelöst werden. Diesen Pfadnamen würde PATH_TRANSLATED zurückgeben.
QUERY_STRINGEnthält eine Zeichenkette mit Daten, die dem Script im URI nach dem ersten ? übergeben wurden. Angenommen, das Script hat die Adresse http://meine.seite.net/cgi-bin/test.pl, wurde aber mit http://meine.seite.net/cgi-bin/test.pl?User=Stefan aufgerufen. Dann würde QUERY_STRING den Wert User=Stefan enthalten. Wenn ein Anwender ein HTML-Formular ausgefüllt hat, bei dessen Absenden das CGI-Script mit der GET-Methode aufgerufen wurde, dann stehen in dieser Umgebungsvariablen die ausgefüllten Formulardaten. Die Daten sind nach den Regeln des MIME-Typs application/x-www-form-urlencoded kodiert.
REMOTE_ADDREnthält die IP-Adresse des Server-Rechners, über den das CGI-Script aufgerufen wurde. Es muss sich hierbei nicht unbedingt um die IP-Adresse des aufrufenden Client-Rechners handeln – der Wert kann beispielsweise auch von einem Proxy-Server stammen.
REMOTE_HOSTEnthält den Hostnamen des Rechners, über den das CGI-Script aufgerufen wurde. Dieser Wert wird jedoch nur gesetzt, wenn der Webserver entsprechend konfiguriert und dazu in der Lage ist, der IP-Adresse den entsprechenden Hostnamen zuzuordnen. Es muss sich hierbei nicht unbedingt um die IP-Adresse des aufrufenden Client-Rechners handeln – der Wert kann beispielsweise auch von einem Proxy-Server stammen.
REMOTE_IDENTEnthält Protokollinformationen, wenn auf dem Server das Protokoll ident für geschützte Zugriffe läuft.
REMOTE_PORTErmittelt, über welchen Port des Client-Rechners das CGI-Script aufgerufen wurde. Diese Zahl liegt gewöhnlich im Bereich ab 1024 aufwärts und wird vom aufrufenden Web-Browser zufällig ausgewählt.
REMOTE_USEREnthält den Benutzernamen, mit dem sich der aufrufende Benutzer angemeldet hat, um das CGI-Script ausführen zu lassen. Wenn das Script beispielsweise htaccess-geschützt ist, muss sich der aufrufende Benutzer mit Benutzernamen und Passwort anmelden. Der dabei eingegebene Benutzername kann mit dieser Variable ermittelt werden.
REQUEST_METHODEnthält die HTTP-Anfragemethode, mit der das CGI-Programm aufgerufen wurde. Beispielsweise GET oder POST. Ein CGI-Script kann diese Variable auslesen und danach entscheiden, wie es Formulardaten einlesen kann: entweder von der Standardeingabe (bei Methode POST) oder aus der Umgebungsvariablen QUERY_STRING (bei Methode GET).
REQUEST_URIEnthält den HTTP-Pfad des Scripts inklusive der im Aufruf übergebenen Daten. Angenommen, das Script hat die Adresse http://meine.seite.net/cgi-bin/test.pl und wurde mit http://meine.seite.net/cgi-bin/test.pl?User=Stefan aufgerufen. Dann liefert REQUEST_URI den Wert /cgi-bin/test.pl?User=Stefan.
SCRIPT_FILENAMEEnthält den physischen Pfad des Scripts auf dem Server-Rechner, also z.B. /usr/web/data/cgi-bin/test.pl.
SCRIPT_NAMEEnthält den HTTP-Pfad des Scripts. Angenommen, das Script hat die Adresse http://meine.seite.net/cgi-bin/test.pl. Dann liefert SCRIPT_NAME den Wert /cgi-bin/test.pl.
SERVER_ADDREnthält die IP-Adresse des Server-Rechners.
SERVER_ADMINEnthält Namen/E-Mail-Adresse des in der Webserver-Konfiguration eingetragenen Server-Administrators.
SERVER_NAMEEnthält den Namen des Server-Rechners, auf dem das CGI-Script läuft. Normalerweise ist dies der eingetragene Hostname des Rechners.
SERVER_PORTEnthält die Portnummer, die für den Webserver eingerichtet wurde. Normalerweise ist dies für Webserver die Nummer 80.
SERVER_PROTOCOLEnthält die Version des HTTP-Protokolls, das der installierte Webserver unterstützt, z.B. HTTP/1.1, wenn die gegenwärtig übliche Version 1.1 des HTTP-Protokolls unterstützt wird.
SERVER_SIGNATUREEnthält eine erweiterte Selbstauskunft des Servers, z.B. Apache/1.3.31 Server at localhost Port 80.
SERVER_SOFTWAREEnthält den Namen und die Versionsnummer der Webserver-Software auf dem Server-Rechner.

Beispiel eines Form-Mailers in Perl

In einem kleinen Praxisbeispiel möchten wir den typischen Zusammenhang zwischen HTML und CGI-Script demonstrieren. Das Beispiel realisiert einen so genannten Form-Mailer. Das ist die ideale Anwendung, wenn vom Anwender eingegebene Formulardaten per Mail an den Site-Betreiber gesendet werden sollen. Der Anwender erhält nach Absenden des Formulars eine freundliche Danke-fürs-Ausfüllen-Seite am Bildschirm. Seine eingegebenen Daten werden zu einer ordentlich formatierten E-Mail aufbereitet und an die gewünschte Mailadresse des Site-Betreibers gesendet.

Das Beispiel ist in Perl geschrieben, da Perl immer noch die verbreitetste Sprache für klassische CGI-Scripts ist.

Auf den meisten bei Hosting-Providern zu mietenden Root-Servern ist Perl auch schon vorinstalliert, so dass Sie den Perl-Interpreter nicht noch installieren müssen. Sollte Perl nicht installiert sein, was Sie am Shell-Prompt sehr einfach durch das Kommando which perl herausbekommen können, dann müssen Sie es downloaden und auf dem Server-Rechner installieren.

Für unser Form-Mail-Beispiel benötigen wir drei Dateien:

  • Eine HTML-Datei mit dem Formular
  • Eine HTML-Datei, die als Danke-Seite fungiert
  • Das Perl-Script, das die Daten als CGI-Script verarbeitet und die Danke-Seite sendet

Teil 1: HTML-Datei mit Formular

Im Beispiel soll ein typisches Feedback-Formular realisiert werden. Die Datei mit dem Feedback-Formular ist eine gewöhnliche statische HTML-Datei. Der Quelltext lautet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html lang="de">  <head>  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  <title>Feedback</title>  <link rel="stylesheet" type="text/css" href="styles.css">  </head>  <body>  <h1>Feedback</h1>  <form action="/cgi-bin/form-mail.cgi" method="post">  <input type="hidden" name="return" value="/danke.htm">  <input type="hidden" name="delimiter" value=": ">  <input type="hidden" name="subject" value="Feedback-Formular">  <fieldset>  <legend>Hinweis:</legend>  <div class="explain">Felder mit Stern * müssen ausgefüllt werden.</div>  </fieldset>  </td>  </tr>  <tr>  <td>  <fieldset>  <legend>Daten:</legend>  <div>Vorname:  <br>  <input type="text" name="Vorname" class="text" style="width:400px">  </div>  <div>Zuname:  <br>  <input type="text" name="Zuname" class="text" style="width:400px">  </div>  <div>E-Mail: <b>*</b>  <br>  <input type="text" name="Mail" class="text" style="width:400px">  </div>  <div>Feedback: <b>*</b>  <br>  <textarea name="Text" class="text" style="width:400px; height:300px">  </textarea>  </div>  </fieldset>  <fieldset>  <legend>Daten:</legend>  <p>  <input type="submit" class="button" value="Absenden">  <input type="reset" class="button" value="Löschen">  </p>  </fieldset>  </form>  </body>  </html>  

Info Layout und Optik der Seite und des Formulars werden in der eingebundenen Datei styles.css definiert. Darauf gehen wir an dieser Stelle nicht weiter ein. Wichtig ist im aktuellen Zusammenhang nur das Formular selbst. Im einleitenden <form>-Tag wird im action-Attribut das CGI-Script aufgerufen, das die Daten nach Absenden des Formulars verarbeitet. Die sichtbaren Formularfelder sind frei benennbar, Art und Anzahl der Felder ebenfalls. Denn unser Form-Mail-Script ist so geschrieben, dass es alle Arten von Formularen verarbeitet. Der Form-Mailer erwartet jedoch bestimmte hidden-Felder. Die Werte der name-Attribute dieser Felder sind durch das Form-Mail-Script vorgegeben. Die Werte (value) müssen Sie dagegen im HTML-Code anpassen.

<input type="hidden" name="return" value="/danke.htm">  

Damit geben Sie den URI der Seite an, die nach erfolgreichem Versenden des Formulars und Verarbeitung an den Seitenbesucher gesendet werden soll.

<input type="hidden" name="delimiter" value=":">  

Damit geben Sie an, wie Feldnamen und Feldinhalte in der Mail, die versendet wird, dargestellt werden sollen. Im Beispiel stehen in den Mails, die das CGI-Script erzeugt, Zeilen wie: Feldname: vom Benutzer eingegebener Wert

<input type="hidden" name="subject" value="Feedback-Formular">  

Damit bestimmen Sie das Subject der Mails, die vom CGI-Script versendet werden.

Teil 2: Danke-Seite

Bevor wir auf das Form-Mail-Script kommen, noch kurz der Beispielcode für die Danke-Seite. Hierbei ist aus technischer Sicht nichts Besonderes zu beachten. Es kann sich um eine normale statische HTML-Datei handeln. Die Seite sollte den inhaltlichen Bezug zum gerade abgesendeten Formular herstellen. In unserem Beispiel lautet der Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html lang="de">  <head>  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  <title>Danke für Ihr Feedback</title>  <link rel="stylesheet" type="text/css" href="styles.css">  </head>  <body>  <h1>Danke für Ihr Feedback</h1>  <p>Ihre eingegebenen Daten wurden uns zugesendet. Wir werden uns mit Ihnen in Verbindung setzen.</p>  </body>  </html>  

Teil 3: Perl-Script für Form-Mailer

Das CGI-Script ist in unserem Beispiel der serverseitige Vermittler zwischen der Seite mit dem Feedback-Formular und der Danke-Seite. Nach dem Absenden des Formulars sendet der Browser des Anwenders einen POST-Request an den Webserver. Einen POST-Request deshalb, weil im HTML-Formular als Übertragungsmethode type="hidden" angegeben wurde. Daraus ergeben sich folgende Aufgaben für das CGI-Script:

  • Es muss die Formulardaten über den POST-Eingabekanal einlesen.
  • Es muss aus den Formulardaten eine E-Mail zusammenstellen.
  • Es muss die E-Mail an die gewünschte Mailadresse versenden.
  • Es muss die Danke-Seite ausgeben. Der Webserver sendet diese dann an den aufrufenden Browser.

Der Quelltext unseres Perl-Scripts lautet:

#!/usr/bin/perl    $mailto = "IhrName@irgendwo";  $Sendmail_Prog = "/usr/lib/sendmail";  use CGI;  $query = new CGI;@  names = $query - > param;#  interne Daten aus den erwarteten hidden - Feldern auslesen:      $delimiter = $query - > param('delimiter');#  -- - > Begrenzerzeichen  $returnhtml = $query - > param('return');#  -- - > Dankeseite  $subject = $query - > param('subject');#  -- - > E - Mail - Subject# Text der E - Mail aus den Formulardaten ermitteln:      $mailtext = "";  foreach(@names) {      $name = $_;@      values = "";@      values = $query - > param($name);      if ($name ne "mailto" && $name ne "return" && $name ne "subject" && $name ne "delimiter") {          foreach $value(@values) {              $mailtext = $mailtext.$name;              $mailtext = $mailtext.$delimiter;              $mailtext = $mailtext.$value.              "\n";          }      }  }#  E - Mail versenden:      open(MAIL, "|$Sendmail_Prog -t") ||      print STDERR "Mailprogramm nicht gestartet werden\n";  print MAIL "To: $mailto\n";  print MAIL "Subject: $subject\n\n";  print MAIL "$mailtext\n";  close(MAIL);#  Dankeseite an Browser senden:      print "Location: $returnhtml\n\n";  

Info In der Shebang-Zeile wird der Pfad zum Perl-Interpreter angegeben. Üblicherweise ist die ausführbare Datei des Perl-Interpreters auf Linux-Systemen unter /usr/bin/perl erreichbar. Andernfalls müssen Sie hier den Pfadnamen anpassen. Aus Sicht von Perl ist das eine Kommentarzeile, da sie mit einem Gatterzeichen (#) beginnt. Im Script-Code selber müssen Sie dann noch die erste Zeile anpassen:

$mailto = "IhrName@irgendwo";  

Info Als Mailadresse ist hier diejenige Adresse einzusetzen, an die Daten abgesendeter Formulare gesendet werden sollen. Es hat übrigens einen sehr wichtigen Grund, dass wir diese Adresse erst im Form-Mail-Script konfigurieren und nicht schon in einem hidden-Feld im HTML-Formular. Der Grund ist, dass wir durch die Definition in HTML ein öffentlich aufrufbares CGI-Script hätten, dass beliebige Inhalte an beliebige E-Mail-Adressen senden kann, wenn es nur per POST-Methode entsprechenden Input erhält. Solch ein Script würde einen erheblichen Risikofaktor darstellen, da es von Massenspammern wie ein „offener Mailserver“ missbraucht werden könnte. Dadurch, dass das Script nun aber alle Mails an die angegebene Adresse sendet, wird es für Spammer uninteressant.

Auf weitere Details im Perl-Code wollen wir nicht eingehen,

da Perl nicht Thema dieses Artikels ist. Die auskommentierten Zeilen im Code weisen darauf hin, was in den jeweils nachfolgenden Code-Abschnitten passiert. Die einleitend genannten Script-Aufgaben sind wiedererkennbar. Damit das Form-Mail-Script jedoch funktioniert, müssen noch zwei wichtige Voraussetzungen erfüllt sein:

  • Das CGI-Modul für Perl muss installiert sein. Seit Perl-Version 5.004 gehört es zu den Standardmodulen, die mit jeder Perl-Installation automatisch mit installiert werden. Da diese Perl-Version schon seit Jahren überholt ist, dürfte das CGI-Modul jedoch mit ziemlicher Sicherheit installiert sein. Im Zweifelsfall können Sie am Shell-Prompt eingeben: perl -v. Damit gibt der installierte Perl-Interpreter seine Versionsnummer aus.
  • Das Programm sendmail muss installiert sein, und zwar unter /usr/lib/sendmail. Dieses Programm ist für das Versenden von Mails verantwortlich und wird innerhalb des Perl-Scripts aufgerufen. Geben Sie im Zweifelsfall am Shell-Prompt des Servers which sendmail ein, um zu überprüfen, ob und wo das Programm installiert ist. Bei Linux-Installationen gehört sendmail jedoch meistens zur Basis-Software.

 

Eingebettete Frames

Eingebettete Frames (auch als Inline-Frames bezeichnet) ermöglichen es, an einer gewünschten Stelle innerhalb des sichtbaren Inhalts eines HTML-Dokuments Inhalte aus anderen Dateien oder Quellen einzubinden. Dazu stellt HTML das iframe-Element zur Verfügung (iframe = inline frame). Wie der Name schon vermuten lässt, hat dieses Element Inline-Charakter, d.h., es kann – ähnlich wie Grafikreferenzen – auch mitten im Text notiert werden.

Zum reinen Einbetten einer anderen Quelle kann übrigens auch das

object-Element verwendet werden, das im Gegensatz zum iframe-Element zum strict-Standard von HTML gehört. Bei Verwendung des iframe-Elements müssen Sie dagegen den Dokumenttyp für die HTML-Variante transitionalangeben. Erforderlich ist die Verwendung des iframe-Elements jedoch dann, wenn Hyperlinks ihr Verweisziel im Fenster des Inline-Frames öffnen sollen. Genau diesen Anwendungsfall werden wir im nachfolgenden Beispiel behandeln. Der Quelltext der Datei mit dem eingebetteten Frame lautet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html lang="de">  <head>  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  <title>Eingebetteter Frame</title>  </head>  <body style="text-align:center">  <h1>Blindtext</h1>  <p>  <a href="seite1.htm" target="content">Seite 1</a> |  <a href="seite2.htm" target="content">Seite 2</a> |  <a href="seite3.htm" target="content">Seite 3</a> |  <a href="seite4.htm" target="content">Seite 4</a>  </p>   <p>  <iframe name="content" src="seite1.htm"  frameborder="0"  style="width:60%;  height:200px;  border:thin solid #C0C0C0">  Ihr Browser unterstützt leider keine eingebetteten Frames!  </iframe>  </p>  </body>  </html>  

Info Das iframe-Element wird mit Start- und End-Tag notiert. Zwischen <iframe> und </iframe> kann Inhalt für Browser notiert werden, die das iframe-Element nicht kennen oder interpretieren. Dabei dürfen auch beliebige Block- und Inline-Elemente notiert werden. Wie beim frame-Element wird auch beim iframe-Element eine Default-Quelle über das src-Attribut referenziert. Es kann sich um einen beliebigen URI handeln, also um eine lokal referenzierte Datei oder auch um eine absolute Internetadresse. Wie auch beim frame-Element ist das name-Attribut wichtig, wenn Linkziele im eingebetteten Frame geöffnet werden sollen.

Weitere Angaben zum Frame-Fenster wie Breite und Höhe

des Frame-Fensters werden im obigen Beispiel zeitgemäß über CSS gelöst. Die Angabe width:60% im Beispiel bedeutet: 60% der Breite des Elternelements. Dieses ist das umgebende p-Element, welches sich im normalen Textfluss innerhalb des body-Elements befindet. Da es ein Block-Element ist, nimmt es die maximal verfügbare Breite ein, also die gesamte Breite des Anzeigefensters abzüglich der Default-Ränder, die der Browser setzt. Mithilfe von CSS lässt sich auch der Rahmen des eingebetteten Frames optimal gestalten. Im Beispiel haben wir einen dünnen grauen Rahmen (border:thin solid #C0C0C0) gewählt. Dennoch ist zusätzlich das HTML-Attribut frameborder="0" notiert. Damit wird explizit der Frame-eigene Rahmen unterdrückt, den der Internet Explorer andernfalls unabhängig von der CSS-Rahmendefinition anzeigt. Die Links im Beispiel haben im einleitenden <a>-Tag ein Attribut target="content". Dadurch wird der Fensterbezug zum iframe-Element hergestellt, das mit name="content" definiert wird. Die Verweisziele werden im Frame-Fenster geöffnet. Scrollleisten zeigt der Browser nach Bedarf an. Durch scrolling="no"können Sie die Anzeige von Scrollleisten verhindern.  

Fixe Bereiche ohne Frames

Wie bereits erwähnt, werden Frames in den meisten Fällen nur eingesetzt, um einen fixen Bereich zu haben, der nicht mit scrollt (auch als Non-Scrolling-Region bezeichnet). In diesem Artikel möchten wir zeigen, wie so etwas auch ohne Frames funktioniert – aus der Überlegung heraus, dass es einfach zu schade ist, die zahlreichen Nachteile von Frames in Kauf zu nehmen, wenn das gewünschte Ziel auch anders erreichbar ist. Das HTML-Dokument hat folgenden Inhalt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html lang="de">  <head>  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  <title>Fixer Bereich</title>  <link rel="stylesheet" type="text/css" href="fix.css">  </head>  <body>  <div id="navigation">  <a href="s2.html">Seite 2</a>  <br>  <a href="s3.html">Seite 3</a>  <br>  <a href="s4.html">Seite 4</a>  </div>  <div id="content">  <h1>Seite 1</h1>  <p>viel Inhalt</p>  ...  <p>viel Inhalt</p>  </div>  </body>  </html>  

Info Die beiden Bereiche erhalten die id-Namen navigation und content. In der eingebundenen CSS-Datei fix.css werden folgende Formate definiert:

#  navigation {      position: fixed;      top: 20 px;      left: 20 px;      padding - right: 20 px;      border - right: blue solid 4 px;  }#  content {      margin - left: 200 px;      margin - right: 20 px;  }  

Info Der Bereich navigation wird mit der Angabe position:fixed fest positioniert. Beim Scrollen wandert sein Inhalt nicht mit. Die restlichen Definitionen betreffen Randabstände sowie einen blauen dicken Rahmen rechts von den Links. Der Bereich content soll im normalen Textfluss bleiben, erhält also keine Angabe zur Positionierung. Mit margin-left:200px wird ein hinreichend großer linker Rand geschaffen, der die Anzeige der Navigationslinks in diesem Bereich erlaubt.

Eigentlich ist das bereits alles und in Browsern, welche position:fixed interpretieren, funktioniert auch alles wie gewünscht.

Der Inhalt kann gescrollt werden, während die Links fest an ihrer Position bleiben.

Leider interpretiert der MS Internet Explorer bis einschließlich Version 6.0 position:fixed nicht. Stattdessen ignoriert er die Positionierungsangabe, was durchaus ein korrektes Verhalten ist, aber dazu führt, dass die beiden Bereiche beide im normalen Textfluss verbleiben. Der div-Bereich für die Navigationslinks verhält sich also wie ein gewöhnliches Blockelement im Textfluss. Es steht an der Stelle, wo es notiert wird (zuerst), und nimmt die gesamte verfügbare Breite ein, so dass der div-Bereich für den Inhalt erst unterhalb davon angezeigt wird. Dieses Verhalten ist jedoch nicht erwünscht. Andererseits kann ein so verbreiteter Browser nicht einfach ignoriert werden. Wir benötigen also eine Behelfslösung. Dank anderer, proprietärer Fähigkeiten des Internet Explorers ist das Verhalten von position:fixed „simulierbar“.

Workaround für den Internet Explorer

Dazu wird zunächst der Inhalt der CSS-Datei fix.css wie folgt geändert:

body > #navigation {      position: fixed;      top: 20 px;      left: 20 px;      padding - right: 20 px;      border - right: blue solid 4 px;  }  body > #content {      margin - left: 200 px;      margin - right: 20 px;  }  

Info Geändert wird die Syntax der Selektoren dahingehend, dass von den CSS-2.0-spezifischen Adressierungsmöglichkeiten für Elemente Gebrauch gemacht wird. Diese werden vom Internet Explorer ebenfalls nicht interpretiert. Als Ergebnis ignoriert dieser Browser die Formatdefinitionen für beide div-Bereiche komplett. Im zweiten Schritt bekommt der Internet Explorer stattdessen eine nur für ihn lesbare CSS-Datei spendiert. Dazu wird im HTML-Dokument – am besten hinter dem <link>-Tag, welches das normale Stylesheet einbindet – Folgendes notiert:

<!--[if gte IE 5]>  <link rel="stylesheet" type="text/css" href="ie-fix.css">  <![endif]-->  

Info Der gesamte Code stellt aus HTML-Sicht einen Kommentar dar. Eigentlich sollten Browser den Inhalt von Kommentaren ignorieren und die meisten tun das auch. Doch nicht so der Internet Explorer. Hier kann der Kommentar interpretierbaren Inhalt haben. Das Konstrukt [if gte IE 5]>…. <![endif] wird, wenn ohne Leerraum nach bzw. vor den Kommentarklammern notiert, als Verarbeitungsanweisung interpretiert. [if gte IE 5]> bedeutet so viel wie: „Wenn ein Internet Explorer mit Versionsnummer größer oder gleich 5.0 das hier liest, dann soll er den HTML-Code bis zu <![endif] trotz Kommentar interpretieren.“ Genutzt wird diese Fähigkeit in unserem Fall, um mittels <link>-Tag eine weitere CSS-Datei speziell für den Internet Explorer einzubinden. Im Beispiel nennen wir sie ie-fix.css. Diese spezielle CSS-Datei erhält folgenden Inhalt:

html, body {      overflow: hidden;      width: 100 % ;      height: 100 % ;  }#  navigation {      position: absolute;      top: 20 px;      left: 20 px;      padding - right: 20 px;      border - right: blue solid 4 px;  }#  content {      position: absolute;      top: 0 px;      left: 200 px;      padding - top: 20 px;      height: expression(document.body.clientHeight - 20 + "px");      width: expression(document.body.clientWidth - 200 + "px");      overflow: auto;  }  

Info Zunächst wird für die Basiselemente html und body festgelegt, dass diese die volle Breite und Höhe einnehmen. Gleichzeitig wird bestimmt, dass Inhalte, die länger oder breiter sind, einfach abgeschnitten werden (overflow:hidden). Die beiden div-Bereiche mit den id-Namen navigation und content werden daraufhin beide absolut positioniert. Bis auf die Art der Positionierung sind die Formatdefinitionen für den Bereich navigationdie gleichen wie in der normalen CSS-Datei. Bei den Definitionen für content gibt es hingegen einige Unterschiede. Mit top und left muss dessen gewünschte Anfangsposition bestimmt werden, da er ja absolut positioniert wird. Eigentlich soll er 20 Pixel von oben beginnen. Damit der Internet Explorer die vertikale Scrollleiste jedoch wie üblich oben im Fenster beginnen lässt, weisen wir top:0px zu und schaffen den gewünschten Abstand nach oben über den Umweg padding-top:20px.

Besonders spannend sind die Zuweisungen an die CSS-Eigenschaften

height und width. Anstelle eines festen Werts wird ein Wert zugewiesen, der mithilfe von JScript errechnet wird. Der Internet Explorer erlaubt das Zuweisen gewisser Funktionen an CSS-Eigenschaften, unter anderem die Funktion expression(). Diese ermöglicht das Ausführen von JavaScript/JScript-Code. In den beiden Beispielangaben werden die Breite und die Höhe des zu positionierenden Bereichs aus der tatsächlichen Breite und Höhe bestimmt, die der in HTMLin diesem Bereich notierte Inhalt einnimmt. Die beiden Objekteigenschaften document.body.clientWidth und document.body.clientHeight liefern die Werte für den gesamten body-Bereich. Abgezogen werden die gewünschten Startpositionen des Inhaltsbereichs (der Obenwert bei der Höhe und der Linkswert bei der Breite). Ausdrücklich zugewiesen wird dann noch overflow:auto. Somit wird der Bereich gescrollt, falls sein Inhalt es erfordert. In unserem Beispiel gibt es nun keinerlei Unterschiede in der Funktionalität etwa zwischen Firefox, Opera und anderen einerseits und Internet Explorer andererseits. In allen Browsern bleiben die Navigationslinks fix an ihrer Position. Wenn Sie den hier beschriebenen Workaround für fix positionierte Bereiche an anderer Stelle, beispielsweise oben, nutzen wollen, müssen Sie gegebenenfalls in der CSS-Datei für den Internet Explorer bei html und body nicht overflow:hidden angeben, sondern overflow-y:hidden.

HTML mit Framesets und Frames

Das „Denken in Frames“ erfordert zunächst einmal, sich Gedanken über mehrere unterschiedliche Dateien zu machen. Erforderlich sind eine Datei, in der das Frameset definiert wird, also die Aufteilung der Einzelfenster sowie je eine Datei bzw. Quelle, die beim Aufruf der Frameset-Datei in die einzelnen Frame-Fenster geladen werden soll.

Datei mit Frameset-Definitionen

Das nachfolgende Listing zeigt den kompletten Quelltext einer Datei mit einer Frameset-Definition:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">  <html>  <head>  <title>Mein erstes Frameset</title>  </head>  <frameset cols="250,*">  <frame src="verweise.htm" name="Navigation">  <frame src="startseite.htm" name="Daten">  <noframes>  Ihr Browser kann diese Seite leider nicht anzeigen!  </noframes>  </frameset>  </html>  

Info Zunächst fällt auf, dass eine andere Dokumenttyp-Deklaration verwendet wird. In Dateien, die ein Frameset definieren, müssen Sie diese Deklaration verwenden. Damit erfüllt eine solche Seite den HTML 4.01-Standard in der Variante für Framesets.

Die weitere Struktur weicht ebenfalls stark von sonst üblichen HTML-Dokumenten ab.

Das html-Element enthält nicht wie sonst üblich die Elemente head und body als Inhalt, sondern die Elemente head und frameset. Das body-Element wird also durch das frameset-Element ersetzt. Im head-Element können jedoch die gleichen Daten stehen wie bei gewöhnlichen HTML-Dokumenten. Das title-Element ist Pflicht und andere Angaben, wie etwa meta– oder link-Elemente, sind ohne Ausnahme erlaubt und meist auch sehr sinnvoll. Das frameset-Element (<frameset></frameset>) bestimmt die Verteilung der Fenster. Dazu kann es die beiden Attribute rows= und cols= enthalten. Durch das rows-Attribut werden Fenster untereinander angeordnet (rows = Reihen), durch das cols-Attribut nebeneinander (cols = columns = Spalten). Im obigen Beispiel-Listing werden durch die Angabe cols="250,*" zwei Frame-Fenster nebeneinander angeordnet. Das linke Frame-Fenster soll 250 Pixel breit sein. Das rechte soll so breit sein, wie der Rest des Browser-Anzeigefensters es erlaubt. Die Wertzuweisung besteht also in kommagetrennten Werten, wobei eine Zahl eine Pixelangabe bedeutet. Ferner sind Prozentangaben erlaubt wie etwa cols="30%,*". Das Sternchen ist ein Platzhalter und bedeutet „die Breite soll vom Browser bestimmt werden“.

Selbstverständlich ist eine Aufteilung in mehr als zwei Spalten oder Reihen möglich.

So definiert beispielsweise rows="200,250,*" drei Frame-Fenster untereinander, wobei das erste 200 Pixel hoch ist, das zweite 250 Pixel hoch und das dritte soll so hoch sein wie der Rest der Anzeigehöhe des Browser-Fensters es ermöglicht. Möglich sind auch Angaben wie cols="100,3*,5*". Dies ist sinnvoll, wenn Sie ein oder zwei Frames mit einer Pixelangabe zu Höhe und Breite versehen möchten, die übrigen Höhen bzw. Breiten dagegen flexibel gestalten. Die Angabe im Beispiel bedeutet: drei Frame-Fenster nebeneinander, wobei das erste 100 Pixel breit sein soll. Von der verbleibenden Breite soll das zweite Fenster drei Achtel einnehmen und das dritte fünf Achtel. Zahlen, gefolgt von einem Sternchen, werden als Verhältnisangabe betrachtet, ähnlich wie Prozentangaben, jedoch bezogen auf den unbekannt großen, verbleibenden Teil des Browser-Fensters. Die Summe der Zahlen ist der gemeinsame Nenner. Die entstehenden Bruchwerte sind für den Browser die Vorgabewerte zur Berechnung der tatsächlichen Framefenster-Breite bzw. -Höhe. Die Attribute cols= und rows= dürfen auch beide gleichzeitig verwendet werden. Ein Beispiel:

<frameset rows="100,*" cols="25%,*">  <frame src="obenlinks.html" name="f1">  <frame src="obenrechts.html" name="f2">  <frame src="untenlinks.html" name="f3">  <frame src="untenrechts.html" name="f4">  </frameset>  

Info Durch eine solche Aufteilung wird ein Gitter mit so vielen Spalten mal Reihen wie angegeben erzeugt. Häufig werden jedoch auch andere Aufteilungen gewünscht, wie etwa „oben ein Streifen über die gesamte Breite und unten zwei Spalten“. Für solche Aufteilungen besteht die Möglichkeit, Frameset-Definitionen zu verschachteln:

<frameset rows="100,*">  <frame src="oben.html" name="f1">  <frameset rows="250,*">  <frame src="unenlinks.html" name="f2">  <frame src="untenrechts.html" name="f3">  </frameset>  </frameset>  

Info Es werden also ein äußeres und ein inneres Frameset definiert. Das äußere Frameset besorgt mit rows= die Aufteilung in zwei Frame-Fenster untereinander. Das frame-Element für die obere Quelle wird auch erst einmal notiert. Anstelle des frame-Elements für das untere Frame-Fenster wird jedoch ein weiteres, inneres frameset-Element notiert. Dieses bewirkt eine Aufteilung in zwei weitere, nebeneinander anzuordnende Frame-Fenster (cols=). Für jeden kommaseparierten Wert, der bei einem rows– oder cols-Attribut zugewiesen wird, muss innerhalb des frameset-Elements also entweder ein frame-Element notiert werden, welches den Fensterinhalt angibt, oder ein weiteres, inneres frameset-Element, welches den Raum des Frame-Fensters für eine Aufsplittung in weitere Frame-Fenster nutzt. Während das frameset-Element aus Anfangs- und End-Tag besteht, ist <frame...>ein Standalone-Tag. In XHTML muss es folglich in der Form <frameset ... /> notiert werden. Das frame-Element hat zwei wichtige Standardattribute. Beim src-Attribut wird der URI des Inhalts angegeben, der im entsprechenden Frame-Fenster angezeigt werden soll. Es kann sich um eine lokal referenzierte Datei handeln oder auch um eine entfernte, absolute Internetadresse. Inhalte können HTML-Dateien sein, aber natürlich auch andere Quellen, wie Grafiken, Flash-Movies, PDF-Dateien oder Ähnliches. Auch dynamische Quellen wie PHP-Scripts können selbstverständlich in jedem einzelnen Frame-Fenster als Quelle angegeben werden. Bei Grafik- oder Multimedia-Quellen ist allerdings zu beachten, dass hierbei keine Möglichkeit besteht, einen Alternativtext anzugeben. Das andere wichtige Attribut für jedes frame-Element ist das name-Attribut. Der frei vergebbare Name ist vor allem wichtig, wenn Seiten, die innerhalb eines Frame-Fenstersangezeigt werden, mit einem Link den Inhalt eines anderen Frame-Fensters verändern wollen. Bei solchen Links muss das andere Frame-Fenster unter dem hier vergebenen Namen mit adressiert werden.

Noframes-Bereiche

Zwischen <frameset> und </frameset> darf neben inneren frameset-Elementen und frame-Elementen noch ein weiteres Element stehen, ausgezeichnet durch <noframes></noframes>. Dieses Element erlaubt es, für Browser oder andere Client-Programme, welche keine Frames anzeigen können, einen alternativen Inhalt anzubieten. Ein Beispiel:

<frameset rows="100,*">  <frame src="oben.html" name="f1">  <frameset rows="250,*">  <frame src="unenlinks.html" name="f2">  <frame src="untenrechts.html" name="f3">  </frameset>  <noframes>  <h1>Liebe Besucher</h1>  <p>  Diese Site verwendet Frames.  Bitte rufen Sie die <a href="noframes.html"> Navigation für nicht-frame-fähige Browser</a> auf!  </p>  </noframes>  </frameset>  

Info Das noframes-Element darf am Ende einer frameset-Struktur vor dem schließenden </frameset>-Tag des äußersten Framesets notiert werden. Als Inhalt sind beliebige Block- und Inline-Elemente erlaubt. Interessant ist, dass das noframes-Element auch in HTML-Dokumenten notiert werden darf, die innerhalb eines Framesets in einem Frame-Fenster angezeigt werden. Dort muss allerdings im Dokumenttyp die Transitional-Variante von HTMLangegeben werden. Das noframes-Element kann dann als ganz normales Element im Dateikörper notiert werden. Innerhalb davon können z.B. Rückverweise auf eine Seite mit Navigationslinks notiert werden. Browser wie Lynx, die zwar Framesets erkennen, jedoch nicht anzeigen können, stellen den Inhalt von noframes-Elementen im Dateikörper dar. Browser, die Frames anzeigen können, ignorieren die Inhalte dagegen.

Frames erstellen

Mit Frames gibt es nun endlich die Möglichkeit, die Navigation mit den Inhaltsseiten zusammenzubringen. Dazu müssen Sie etwas umdenken. Bis jetzt galt immer: Der Browser lädt (ein!) HTML-Dokument, das wird angezeigt, fertig. Bei Frames ändert sich das ein wenig: Der Browser lädt ein HTML-Dokument, das so genannte Frameset. Dieses Dokument enthält keine Inhalte, sondern Verweise auf mehrere einzelne Unterframes. Diese einzelnen Unterframes sind genau die Dokumente, die wir auf den letzten Seiten zusammengestellt haben.

Dafür sind zwei neue Tags notwendig:

  • <frameset> enthält eine Definition eines Framesets – also, dass der Browserbereich in mehrere Frames unterteilt werden soll.
  • <frame> gibt einen einzelnen Frame an.

Dabei ändert sich auch die Dokumenttypangabe am Anfang des Dokuments, in dem das <frameset>-Element steht; hier müssen wir Folgendes verwenden:

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

Info Bei den einzelnen Frame-Dokumenten dagegen ändert sich in Bezug auf den Dokumenttyp nichts. Erinnern Sie sich: Das sind herkömmliche Dokumente, die Sie auch einzeln und unabhängig voneinander im Browser laden könnten. Die Erstellung eines Framesets geht in wenigen Schritten vonstatten. Zu einigen dieser Schritte gibt es allerdings noch eine ganze Reihe an Hintergrundinformationen, die Sie im Folgenden jeweils direkt erwähnt finden.

  • 1. Erstellen Sie ein Frameset mit dem <frameset>-Element.
<frameset>  </frameset>  
  • 2. Geben Sie im cols-Attribut die Breite der Frames an.

Es gibt mehrere Möglichkeiten, die Breite anzugeben. Am einfachsten ist es, Pixelwerte zu verwenden. So steht folgende Angabe für zwei Frames, der erste ist 200 Pixel, der zweite 650 Pixel breit:

<frameset cols="200,650">  </frameset>  

Allerdings ist das nicht ganz optimal, denn das setzt die Gesamtbreite beider Frames auf 800 Pixel fest. Hat der Benutzer eine größere Auflösung, wird der Browser den fehlenden Platz irgendwie verwenden, was zu hässlichen Ergebnissen führen kann. Aus diesem Grund können Sie den Browser anweisen, anstelle einer festen Pixelzahl die restliche zur Verfügung stehende Breite zu verwenden. Das geht mit dem Sternchen. Folgende Angabe macht den linken Frame 200 Pixel breit, der rechte Frame nimmt die restliche Breite im Browser in Anspruch:

<frameset cols="200,*">  </frameset>  

Dritte Möglichkeit: Sie verwenden prozentuale Werte. Wenn also der rechte Frame dreimal so breit sein soll wie der linke Frame, können Sie den Wert des cols-Attributs wie folgt setzen:

<frameset cols="25%,75%">  </frameset>  
  • 3. Fügen Sie pro Frame ein <frame>-Element innerhalb des <frameset>-Elements ein:
<frameset cols="200,*">  <frame />  <frame />  </frameset>  
  • 4. Geben Sie die Adresse des entsprechenden Frames im src-Attribut des <frame>-Tags an.

Folgende Angabe lädt in den linken Frame die Navigation und in den rechten Frame die Startseite:

<frameset cols="200,*">  <frame src="navigation.html" />  <frame src="start.html" />  </frameset>  
  • 5. Geben Sie jedem Frame noch einen eindeutigen Namen – im name-Attribut des <frame>-Tags.
<frameset cols="200,*">  <frame src="navigation.html" name="Navi" />  <frame src="start.html" name="Inhalt" />  </frameset>  

Am Ende haben Sie folgende HTML-Datei:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">  <!-- frameset.html -->  <html>  <head>  <title>Frames</title>  </head>  <frameset cols="200,*">  <frame src="navigation.html" name="Navi" />  <frame src="start.html" name="Inhalt" />  </frameset>  </html>  

Sie sehen, dass das HTML-Dokument keinen <body>-Bereich mehr enthält, denn dieser wird in der Frameset-Datei nicht benötigt. Trotzdem ist die Ausgabe im Webbrowser wie gewünscht: zwei Frames, der eine 200 Pixel breit, der andere die restliche Breite. Im linken Frame wurde das Navigationsdokument geladen (navigation.html), im rechten Frame die Startseite (start.html). Im Übrigen ist es auch möglich, Frames untereinander anzubringen. Dazu sind die beiden folgenden Modifikationen vonnöten:

  • Verwenden Sie das Attribut rows statt cols.
  • Der Wert des Attributs rows bezeichnet dann natürlich die Höhe der einzelnen Frames und nicht mehr die Breite.

Nachfolgend noch einmal das Frameset von vorher, allerdings sind die Frames dann untereinander angeordnet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">  <!-- frameset-untereinander.html -->  <html>  <head>  <title>Frames</title>  </head>  <frameset rows="200,*">  <frame src="navigation.html" name="Navi" />  <frame src="start.html" name="Inhalt" />  </frameset>  </html>  

Das Ergebnis sieht zugegebenermaßen etwas ungewohnt aus, aber es funktioniert: Die beiden Frames erscheinen ab sofort untereinander.

Frames für Seitenlayouts

Normalerweise zeigen frame-fähige Browser zwischen den Frame-Fenstern systemabhängig aussehende Rahmen an, die es dem Anwender unter anderem erlauben, das Fensterverhältnis durch Ziehen der Rahmen mit der Maus zu ändern. Ein häufiger Wunsch von Seitenanbietern sind „unsichtbare Fensterrahmen“. Dadurch erscheint dem Anwender die gesamte Seite wie aus einem Dokument, obwohl in Wirklichkeit ein Frameset am Werk ist.

Meist wurde dieses Feature in der Vergangenheit deshalb verlangt,

um zwar eine nahtlose Ansicht im Browser-Fenster anzubieten, jedoch mit einem fixen Bereich für Logo, Navigation usw., der nicht mit scrollt. Der Wunsch ist nachvollziehbar, doch das Mittel, hierfür zu einem Frameset zu greifen, ist mittlerweile nicht mehr zeitgemäß. Fixe Bereiche sollten mithilfe von CSS definiert werden. Generell wird die Rahmendicke wie im folgenden Beispiel bestimmt:

<frame src="index.htm" name="inhalt" frameborder="10">  

Info Das frameborder-Attribut ist laut HTML-Spezifikation in <frame>-Tags erlaubt. Dort notiert, bestimmt es die Rahmendicke in Pixel, und zwar für alle Rahmen zwischen diesem Frame-Fenster und benachbarten Frame-Fenstern. Um keine Rahmen anzuzeigen, wird der zugewiesene Wert auf 0 gesetzt. Notieren Sie die frameborder-Angabe sicherheitshalber in allen <frame>-Tags. Andernfalls erreichen Sie in den Browsern möglicherweise nicht den gewünschten Effekt. Ein anderer Fall ist, dass Sie die Rahmen zwischen den Frame-Fenstern zwar optisch für sinnvoll halten, aber nicht möchten, dass der Anwender die Größe der Frame-Fenster damit verändern kann. Für diesen Fall gibt es ein weiteres Attribut, wie das nachfolgende Beispiel zeigt:

<frame src="index.htm" name="inhalt" noresize>  

Info Das Standalone-Attribut noresize (also „kein Resize“, keine Größenänderung) verhindert für die Rahmen um das betroffene Frame-Fenster, dass diese mit der Maus in ihrer Position veränderbar sind. Beachten Sie, dass Sie bei XHTML noresize="noresize"notieren müssen.

Schließlich können Sie noch das Scrollverhalten von Frame-Fenstern beeinflussen.

Dazu können Sie im <frame>-Tag eines Fensters das Attribut scrolling= wahlweise mit den Werten yes, no oder auto versorgen: yes erzwingt Scrollleisten sogar dann, wenn der Inhalt gar kein Scrollen erfordert; no verhindert Scrollleisten in jedem Fall, auch dann, wenn der Inhalt Scrollen erfordert, und auto, die Voreinstellung, bewirkt, dass Scrollbars dann angezeigt werden, wenn es der Inhalt erfordert. Auf weitere Eigenschaften gehen wir an dieser Stelle nicht mehr ein, da diese entweder nicht zum HTML-Standard gehören oder nicht mehr zeitgemäß sind.

Frames verschachteln

So weit, so gut. Sie können jetzt also mehrere nebeneinander liegende Frames erstellen und auch mehrere untereinander liegende. Beides zusammen ist ein wenig schwieriger zu verstehen, aber dann auch sehr simpel umzusetzen.

Erinnern wir uns: Mit einem <frameset>-Element können Sie den Browserbereich in mehrere Frames unterteilen, entweder nebeneinander (cols) oder untereinander (rows). Wenn jetzt aber der Bereich sowohl horizontal als auch vertikal geteilt werden muss, müssen Sie beide Methoden kombinieren. Und das geht so: Zeichnen Sie sich am besten auf, wie die Frame-Struktur aussehen soll. Gehen wir zum Beispiel von vorhin zurück: links Navigation, rechts Inhalt. Angenommen, Sie möchten zur teilweisen Refinanzierung Ihres Webangebots noch an einer Stelle ein Werbebanner unterbringen, beispielsweise über dem Inhalt. Dann muss also der Frame, in dem anfangs die Datei start.html geladen wird, in zwei Teile geteilt werden: oben die Werbung, unten der Inhalt. Das klingt doch genauso wie zuvor das Beispiel mit den untereinander liegenden Frames. Und genau das ist hier der Clou: Um Frames zu verschachteln, ersetzen Sie an einer beliebigen Stelle das <frame>-Element durch ein <frameset>-Element. Dann sieht der Code wie folgt aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">  <!-- frameset-verschachtelt.html -->  <html>  <head>  <title>Frames</title>  </head>  <frameset cols="200,*" frameborder="0">  <frame src="navigation.html" name="Navi" />  <frameset rows="50,*" frameborder="0">  <frame src="werbung.html" scrolling="no" />  <frame src="start.html" name="Inhalt" />  </frameset>  </frameset>  </html>  

Fehlt abschließend nur noch das Dokument werbung.html, das Sie im Folgenden abgedruckt finden:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  	<!-- werbung.html -->  	<html>  	<head>  	<title>Werbung</title>  	</head>  	<body>  	<p style="font-weight: bold;">Kaufen! Kaufen! Kaufen!</p>  	</body>  	</html>  	

Noch einmal zusammengefasst, was in dem Code frameset-verschachtelt.html passiert:

  • Durch <frameset cols="..."> wird der Browserbereich in zwei Bereiche aufgeteilt, einer links, einer rechts.
  • Im linken Bereich wird die Datei navigation.html geladen.
  • Im rechten Bereich wird mit <frameset rows=""> ein weiteres Frameset geladen, das genau diesen Bereich in einen oberen und einen unteren Bereich aufteilt.
  • Im rechten oberen Bereich wird die Datei werbung.html geladen.
  • Im rechten unteren Bereich wird die Datei start.html geladen.

Sie sehen also: Gar nicht so schwer, wenn man einmal einen Frame erstellt hat.

Frames verschönern

Abschließend ist es noch an der Zeit für ein paar kleine Verschönerungsmaßnahmen. Zunächst einmal fällt auf, dass der Balken zwischen den Frames mit der Maus verschoben werden kann. Der Benutzer kann also die Größen der Frames verändern und damit möglicherweise das Layout ruinieren.

Zum Glück kann das verhindert werden. Das geht nicht mit CSS, aber mit HTML: Verwenden Sie das Attribut noresize. Allerdings muss noch geklärt werden, wo das hingehört. Die Antwort: in das <frame>-Element. Zunächst klingt das etwas merkwürdig, doch mit etwas Nachdenken wird es klar. Stellen Sie sich vor, Sie haben drei Frames innerhalb eines Framesets. Nun möchten Sie aus irgendwelchen Gründen, dass der Balken zwischen dem ersten und dem zweiten Frame verschoben werden darf, der zwischen dem zweiten und dem dritten Balken allerdings nicht. Es muss also pro Framebalken festgelegt werden, wie es sein soll. Dafür gibt es die folgenden Regeln:

  • Wenn Sie in einem Frame noresize setzen, können beide Framegrenzen (links und rechts bzw. oben und unten) nicht mehr per Maus verschoben werden.
  • Wenn Sie noresize nicht setzen, können beide Framegrenzen (links und rechts bzw. oben und unten) per Maus verschoben werden.
  • Wenn in einem der an den Balken grenzenden Frames noresize gesetzt wird, im anderen nicht, „gewinnt“ noresize und der Balken kann nicht per Maus verschoben werden.

Im nachfolgenden Code steht noresize bei einem der beiden Frames; der Balken dazwischen kann danach nicht mehr verschoben werden:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">  <!-- frameset-noresize.html -->  <html>  <head>  <title>Frames</title>  </head>  <frameset cols="200,*">  <frame src="navigation.html" name="Navi" noresize="noresize" />  <frame src="start.html" name="Inhalt" />  </frameset>  </html>  

Apropos Verschönerungsmaßnahmen: Die beiden Frames sind ja durch einen etwas unschicken grauen Balken voneinander getrennt. Mit ein klein wenig HTML ist das allerdings kein Problem: Das Attribut frameborder aktiviert oder entfernt den Rahmen, je nachdem, welchen Wert Sie angeben:

  • Beim Wert „1“ etwa erscheint der Balken – das ist der Standard.
  • Beim Wert „0“ dagegen verschwindet der hässliche Rahmen.

Info Zwar sind mit etwas CSS auch andere Effekte möglich (etwa border-color für die Farbe des Rahmens), aber auf modernen Websites mit Frames sind praktisch nirgends mehr Rahmen anzutreffen. Also: Weg damit!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">  <!-- frameset-rahmen.html -->  <html>  <head>  <title>Frames</title>  </head>  <frameset cols="200,*" frameborder="0">  <frame src="navigation.html" name="Navi" noresize="noresize" />  <frame src="start.html" name="Inhalt" />  </frameset>  </html>  

Jetzt ist der Rahmen endlich verschwunden. Abschließend ist noch zu klären, was zu tun ist, wenn innerhalb eines Frames so viel Inhalt steht, dass Scrolling notwendig ist. Die Inhalte haben nicht mehr genug Platz, deswegen erscheint ein Scrollbalken. In der Regel ist dieses Verhalten gewünscht. Allerdings nicht immer, beispielsweise bei der Navigation, wo ein Scrollbalken einfach störend wäre. Für diesen Fall können Sie im scrolling-Attribut (des <frame>-Elements) angeben, wie so etwas gehandhabt werden soll:

  • "auto": Der Browser entscheidet automatisch, ob Scrollbalken notwendig sind oder nicht (das ist das Standardverhalten).
  • "no": Keine Scrollbalken.
  • "yes": Überall Scrollbalken.

So einfach das klingt, so trickreich ist das in der Umsetzung in die Praxis. "auto" funktioniert immer, auch "no" wird von den Webbrowsern unterstützt. Nur bei "yes" scheiden sich die Geister bzw. Webbrowser. Der Internet Explorer zeigt nur senkrechte Scrollbalken an (also keine waagerechten), der Firefox ignoriert "yes" komplett. Aber in der Praxis ist das auch nicht gerade relevant, denn wie häufig möchten Sie waagerechte und senkrechte Scrollbalken haben, auch wenn der Inhalt der zugehörigen Webseite breit und hoch genug ist. Im folgenden Code sehen Sie, dass bei beiden Frames das Scrolling deaktiviert worden ist. Beim Verändern der Fenstergröße wird das im rechten Frame spürbar. Wie bereits erwähnt, macht das hauptsächlich in Frames für Navigation oder Werbung Sinn, aber nicht in Inhaltsframes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">  <!-- frameset-scrolling.html -->  <html>  <head>  <title>Frames</title>  </head>  <frameset cols="200,*" frameborder="0">  <frame src="navigation.html" name="Navi" scrolling="no" />  <frame src="start.html" name="Inhalt" scrolling="no" />  </frameset>  </html>  

 

Mehrfenster-Technik Frames

Als der damals führende Browser-Anbieter Netscape 1995 die Technik der Frames implementierte und dazu eine Reihe nicht standardisierter HTML-Elemente einführte, wurde das neue Feature von der Gemeinde der Webdesigner begeistert aufgenommen. Endlich war es möglich, beispielsweise links eine fixe Navigation zu haben, während sich rechts der scrollbare Inhalt befand. Die Navigation befand sich in einer separaten Datei und musste nicht in jeder Datei neu notiert werden.

So weit ist der Segen der Mehrfenstertechnik gut nachvollziehbar. Dennoch tat sich das W3-Konsortium schwer damit, die Frames in den HTML-Standard mit aufzunehmen. 1998 übernahm man das Konzept zwar in HTML 4.0, führte dazu aber eine eigene HTML-Variante neben "strict" und "transitional" ein: die Variante "Frameset".

Mittlerweile gelten Frames in professionellen Kreisen als verpönt. Dafür gibt es mehrere Gründe:

  • Inhaltsseiten haben selbst keine vollständige Struktur und in der Regel keine Navigationslinks.
  • Anwender können z.B. keine Bookmarks auf bestimmte Unterseiten eines Angebots setzen, weil in der Adresszeile des Browsers immer nur der URI der Seite angezeigt wird, die das Frameset enthält. Durch etwas Programmieraufwand ist dieses Problem zwar lösbar, doch die meisten Anbieter, die Frames einsetzen, kümmern sich nicht darum.
  • Frames sind ungünstig für Suchmaschinen. Die meisten Suchmaschinen lösen zwar die Frame-Struktur auf und indexieren die inhaltstragenden Seiten. Doch die Links bei Suchtreffern führen dann direkt zu den Unterseiten. Da diese aber nur einen Teil der Seite darstellen und meist keine eigene Navigation enthalten, landen die Seitenbesucher in einer Hypertext-Sackgasse, die oft auch vom Layout her wie eine „halbe Sache“ wirkt. Der Besucher erhält keinen besonders guten Eindruck vom Anbieter der Seite.
  • Sind Frames bei der Bildschirmanzeige noch praktisch, so stellen sie beim Ausdrucken von Webseiten nicht selten ein Problem dar. Hat der Anwender den Fokus im Frame für die Navigation, kann es beispielsweise passieren, dass der Browser nur die Navigation ausdruckt und nicht wie gewünscht den Inhalt. Unerfahrene Anwender sind dadurch schnell irritiert.
  • Bei drei und mehr Frames soll pro Link nicht selten mehr als ein anderer Frame seinen Inhalt ändern. Mit HTML allein ist es jedoch nicht möglich, zwei oder mehr URIs pro Link zu adressieren. Deshalb wird zu JavaScript gegriffen, was aber nicht funktioniert, wenn der Anwender JavaScript ausgeschaltet hat. Die gesamte Navigation funktioniert dann nicht mehr.
  • Frame-basierte Seiten sind ein Problem für Browser oder Ausgabegeräte, die nicht frame-fähig sind. Zwar erkennen modernere nicht grafische Browser wie Lynx Frames, doch das Handling für den Anwender ist meist unbefriedigend.
  • Frames erfordern mehr Kommunikation zwischen Browser und Webserver, da pro Frame Ressourcen übertragen werden müssen.
  • Frames verlocken zu einem unfairen, urheberrechtlich sehr bedenklichen Trick: Nur die Navigation gehört zur eigenen Site, während die Inhalte aus fremden Quellen stammen. In der Adresszeile des Browsers ist das für den Anwender jedoch nicht erkennbar.

Im Grunde gibt es zwei Hauptgründe, weswegen Frames immer noch zum Einsatz kommen:

  • Bestimmte Inhalte scrollen nicht mit, z. B. eine Navigation, ein Logo usw.
  • Wiederkehrende Teile wie der Code für eine Navigation muss nur einmal in einer separaten Datei notiert werden, aber nicht mehr in jeder einzelnen Datei.

Für „non-scrolling-regions“ steht mit der CSS-Angabe position:fixed mittlerweile eine Alternative zur Verfügung. Wir werden in in anderem Artikel auch zeigen, wie Sie diese Alternative richtig einsetzen.

Gegen das Argument der einmaligen Notation von Code

wird von Frames-Gegnern in der Regel angeführt, dass es serverseitige Möglichkeiten gebe, Code nicht immer wieder kopieren zu müssen. Dies läuft jedoch auf dynamisch erzeugte Seiten hinaus. Im einfachsten Fall über Server Side Includes, meist aber über Scriptsprachen wie PHP. Wenn Sie ohnehin eine Site entwickeln, die nicht mit statischen HTML-Dateien, sondern etwa mit PHP-Scripts arbeitet, dann sind Frames ohnehin nur lästig und problematisch. Wenn Sie ein HTML-basiertes Projekt dagegen unter anderem auch auf Wegen wie CD-ROM verbreiten möchten, müssen Sie statische HTML-Dateien verwenden. In diesem Fall aber zieht das Argument der Frames-Gegner nicht und es ist unter Umständen durchaus vertretbar, sich bewusst für den Einsatz von Frames zu entscheiden.

Verweise bei Frames

Die Frame-Datei sieht im Browser auch ganz gut aus; der positive Ersteindruck schlägt aber in (berechtigten) Ärger um, wenn Sie versuchen, auf einen der Links im linken Frame zu klicken. Die gewünschte Seite wird zwar geladen, aber … ebenfalls im linken Frame. Nach einem Klick auf den Link „Produkte“ in der Navigation wird die Produktseite angezeigt, aber leider am falschen Ort.

Auch das lässt sich beheben. Dem Webbrowser ist kein Vorwurf zu machen, denn der kann ja nicht ahnen, in welchem Frame der Link angezeigt werden soll. Deswegen geht der Webbrowser nach einem ganz einfachen Prinzip vor: Der Link wird im aktuellen Frame (oder Fenster) geöffnet.

Als Attributswert gibt es die folgenden Möglichkeiten:

  • _blank – in einem neuen Fenster
  • _self – im aktuellen Fenster
  • _top – bei Frames im kompletten Anzeigebereich des Webbrowsers (löst also die Frame-Struktur auf)
  • _parent – bei Frames im übergeordneten Frameset (bei Verschachtelung)

Es gibt noch einige weitere, selten verwendete Möglichkeiten (die auch nicht von allen Browsern unterstützt werden). Die pfiffigste Möglichkeit jedoch ist es, einen Frame-Namen anzugeben. Wenn Sie das tun, öffnet der Browser das Linkziel in dem Frame mit dem entsprechenden Namen. Jetzt wissen Sie auch, wozu das name-Attribut im <frame>-Tag gut ist. Also, an die Tat: Passen Sie die Datei navigation.html an und setzen Sie bei allen Links das target-Attribut. Ein kurzer Blick in die Frameset-Datei klärt auf: Der Inhaltsframe hat den Namen (name-Attribut) „Inhalt“.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- navigation.html -->  <html>  <head>  <title>Navigation</title>  </head>  <body>  <h1>Navigation</h1>  <p><a href="produkte.html" target="Inhalt">Produkte</a></p>  <p><a href="kontakt.html" target="Inhalt">Kontakt</a></p>  <p><a href="impressum.html" target="Inhalt">Impressum</a></p>  </body>  </html>  

Die Datei navigation.html ist bereits dementsprechend angepasst. Und wie Sie im Browser sehen, funktioniert das Ganze jetzt auch wunderbar: Das Linkziel öffnet sich im rechten Frame. Info Wenn Sie das Linkziel für eine komplette HTML-Seite festlegen möchten, können Sie folgendes Element im <head>-Abschnitt des Dokuments verwenden:

<base target="Inhalt" />  

Jetzt öffnen sich automatisch alle Links im Frame namens „Inhalt“. Soll sich einer der Links in dem Dokument doch auf der aktuellen Seite öffnen, müssen Sie den zuvor erwähnten Wert "_self" verwenden.

Links zu anderen Frame-Fenstern

Wie bereits erwähnt, müssen Links innerhalb eines Framesets, deren Ziel in einem anderen als dem aktuellen Frame-Fenster angezeigt werden soll, das gewünschte Frame-Fenster benennen. Anzugeben ist der Name, der bei <frame ... name=>vergeben wurde.

<a href="index.htm" target="inhalt">Startseite</a>  

Info Dieser Link öffnet sein Ziel in einem Fenster, das mit <frame ... name="inhalt"> definiert wurde. Das target-Attribut gibt den gewünschten Fensternamen an (target = Ziel). Bei Navigationslinks, die alle auf ein anderes Frame-Fenster verweisen, gibt es jedoch noch eine andere Möglichkeit, nämlich im Kopfbereich des HTML-Dokuments ein Zielfenster vorzugeben.

<head>  <!-- andere Kopfdatendefinitionen -->  <base target="inhalt">  </head>  

Info Das base-Element kann ebenfalls ein target-Attribut enthalten. So notiert wie im Beispiel hat es die Wirkung, dass alle Linkziele des aktuellen Dokuments in einem Frame-Fenster namens inhalt geöffnet werden. Groß- und Kleinschreibung werden übrigens unterschieden. Wenn beispielsweise ein Fenster mit <frame ... name="Inhalt"> definiert wurde, kann es nicht mit <a ... target= "inhalt"> angesprochen werden! target-Angaben zu nicht existierenden Frame-Fenstern bewirken in den meisten Browsern übrigens, dass der Link stattdessen in einem neuen Fenster oder in einem neuen Tab geöffnet wird. Wichtig zu wissen ist ferner, dass HTML-Dokumente, die in Hyperlinks oder im base-Element das target-Attribut benutzen, in der Dokumenttyp-Deklaration nicht mit der HTML-Variante "strict" ausgezeichnet werden dürfen. Das target-Attribut gehört zu den HTML-Bestandteilen, die im „eigentlich gewünschten“ HTML keinen Platz mehr haben, ebenso wenig wie Frames allgemein. Verwenden Sie für Dokumente, in denen target-Attribute vorkommen, stattdessen die HTML-Variante "transitional".

Was sind Frames

Frames haben einige Vorteile. Beispielsweise ist es möglich, die Navigation der Website in einem eigenen Frame unterzubringen. Wenn der Benutzer nun auf eine andere Seite navigiert, bleibt der Navigationsframe unverändert. Das ist natürlich weniger aufwändig, als auf jeder Unterseite erneut die Navigation unterbringen zu müssen. Außerdem sind Änderungen an der Navigation dann nur in einer Datei erforderlich, nicht mehr in allen.

Allerdings sind Frames auch umstritten. Anfänger im Web haben unter Umständen Schwierigkeiten, einzelne Frames auszudrucken oder ein Bookmark (Lesezeichen) abzulegen. Außerdem kann es Probleme geben, wenn ein Dokument, das in einem Frame abgelegt worden ist (etwa eine Inhaltsseite), direkt im Webbrowser aufgerufen wird. Dann fehlen nämlich alle anderen, unter Umständen wichtigen Frames, wie etwa ein Navigationsframe. Außerdem haben manche Suchmaschinen Frames nicht gerade gerne. Einige (wenige) Browser, beispielsweise solche für mobile Endgeräte, haben Schwierigkeiten, Frames darzustellen.

Sie müssen es sich also genau überlegen, ob Frames für Ihre Website geeignet sind oder nicht.

Im Web scheint es zurzeit so zu sein, dass eine spezielle Form von Frames immer größere Verbreitung findet, so genannte Iframes.

Vorbereitungen

Um Frames verwenden zu können, brauchen wir zunächst einige Testdateien. Diese werden wir im Verlauf dieses Kapitels immer weiter anpassen. Zunächst einmal benötigen wir ein Dokument, das drei Navigationslinks enthält:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- navigation.html -->  <html>  <head>  <title>Navigation</title>  </head>  <body>  <h1>Navigation</h1>  <p><a href="produkte.html">Produkte</a></p>  <p><a href="kontakt.html">Kontakt</a></p>  <p><a href="impressum.html">Impressum</a></p>  </body>  </html>  

Außerdem benötigen wir mehrere Inhaltsseiten: die Start-, Produkt-, Kontakt- und Impressumsseite. Diese sind natürlich hier nur äußerst spärlich mit Inhalt gefüllt, denn es soll primär das Grundprinzip vermittelt werden. Wie Sie diese ansprechender gestalten können, wurde bereits in den vorherigen Artikeln weitgehend geklärt. Die erste Inhaltsseite ist die Startseite. Diese enthält – weil es gute Sitte ist – noch einmal die wichtigsten Links zu den entsprechenden Unterseiten.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- start.html -->  <html>  <head>  <title>Startseite</title>  </head>  <body>  <h1>Willkommen!</h1>  <p>Herzlich willkommen auf unserer Website! Hier finden Sie Informationen über uns und unsere Dienstleistungen.  <br>  Nachfolgend einige interessante Links:</p>  <p><a href="produkte.html">Produkte</a></p>  <p><a href="kontakt.html">Kontakt</a></p>  <p><a href="impressum.html">Impressum</a></p>  </body>  </html>  

Die nächste Inhaltsseite ist die Produktseite. Sie wird später einmal eine Liste aller Produkte enthalten, möglicherweise sogar auf einzelnen Unterseiten. Doch zunächst müssen ein paar magere Informationen ausreichen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- produkte.html -->  <html>  <head>  <title>Produkte</title>  </head>  <body>  <h1>Produkte</h1>  <p>Wir bieten Ihnen:  <ul>  <li>Ergonomische Schlafkissen aus Silikon</li>  <li>Kuschelige Bettdecken aus Rauhfaser</li>  <li>Bequeme Matratzen aus Styropor</li>  </ul>  </p>  </body>  </html>  

Die Kontaktseite enthält zunächst nur die E-Mail-Adresse.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- kontakt.html -->  <html>  <head>  <title>Kontakt</title>  </head>  <body>  <h1>Kontakt</h1>  <p>Sie erreichen uns per E-Mail unter  <a href="mailto:info@schlafshop.xy">info@schlafshop.xy</a></p>  </body>  </html>  

Abschließend der Pflichteintrag für jede Website: das Impressum. Dort stehen unter anderem der Name des Betreibers und seine Mailadresse.

Formulare

Auswahllisten und Drop-down-Listen

HTML bietet ein Element für Listenauswahl in Formularen an: das select-Element. Ob es sich um eine längere Liste mit mehreren sichtbaren Einträgen handelt oder um eine Dropdown-Liste, die der Anwender aufklappen kann, bestimmen Sie durch ein Attribut.

Info Die Liste wird in <select></select> eingeschlossen. Die einzelnen Listeneinträge werden durch <option></option> markiert. Der Text zwischen <option>und </option> ist der Text, den der Anwender als Listeneintrag angeboten bekommt. Der Wert des Attributs value= ist dagegen der Wert, der beim Absenden der Formulardaten als der ausgewählte Listenwert an das verarbeitende Script übertragen wird. Das einleitende <select>-Element erhält bei name= den Namen des Parameters, unter dem die Listenauswahl an das verarbeitende Script übergeben wird. Das Attribut size= bestimmt das Aussehen der Liste. Weisen Sie als Wert 1 zu, ist das Ergebnis eine Dropdown-Liste. Weisen Sie einen höheren Wert zu, ist das Ergebnis eine Liste mit so vielen sichtbaren Einträgen wie im Wert angegeben. Enthält die Liste mehr Einträge als bei size=angegeben, kann der Browser dem Anwender automatisch eine Scrollleiste anzeigen.

Das obige Beispiel zeigt noch eine andere Möglichkeit:

Auswahllisten können eine Default-Auswahl enthalten. Eines der notierten option-Elemente können Sie durch das Standalone-Attribut selected als den vorausgewählten Codeeintrag bestimmen. Wenn Sie mit XHTML arbeiten, notieren Sie selected="selected". In vielen Fällen ist es auch sinnvoll, einen Eintrag anzubieten, der keinen Nutzwert hat und stattdessen zur Auswahl auffordert, so wie im Beispiel das erste notierte option-Element. Für längere Listen mit logisch gruppierbaren Einträgen bietet HTML die Möglichkeit an, Listeneinträge zu Gruppen zusammenzufassen.

Info Die Gruppierung wird durch Einfügen von optgroup-Elementen erreicht. Zwischen <optgroup> und </optgroup> werden die jeweils zur Gruppe gehörigen Listeneinträge wie gewohnt mithilfe von option-Elementen notiert. Das einleitende <optgroup>-Tag erhält über das Attribut label= den Wert, der als Gruppenüberschrift angezeigt werden soll.

Bei manchen Listen kann es auch sinnvoll sein,

dem Anwender die Auswahl mehrerer Einträge zu erlauben. HTML-seitig ist das kein Problem. Im einleitenden <select>-Tag wird einfach das Standalone-Attribut multiple (in XHTML: multiple="multiple") eingefügt. Problematischer ist es, dass der Anwender nicht weiß, dass er mehrere Einträge auswählen kann, und meistens auch gar nicht, wie. Bei expliziter Mehrfachauswahl ist es also zweckmäßig, im umgebenden Text des Elements auf die Möglichkeit der Mehrfachauswahl hinzuweisen. Da viele Anwender auch nicht wissen, dass sie mehrere Einträge durch Anklicken bei gedrückter (Strg)-Taste auswählen können, kann auch dazu ein entsprechender Hinweis im Text nicht schaden.

Formular-Eingaben versenden

Um die Formulareingaben zu versenden, muss das eigentliche form-Tag noch mit einer action verbunden werden: Wenn der Ausfüller auf den Button Senden klickt, soll ein CGI-Script die Daten als E-Mail versenden. Für die Wertzuweisung form action=" konsultieren Sie Ihren Provider bzw. überprüfen Ihre Unterlagen. Hier steht in der Regel die Adresse des CGI-Scripts. z.B.:

<form action="http://www.Ihre-Domain.de/cgi-bin/mailer.pl">  

Info Ebenfalls abhängig davon, welches Script Sie einsetzen, müssen Sie als zusätzlichen Parameter die Methode des Versendens eintragen: method="get" oder method="post". Auch hier gilt: Überprüfen Sie, was Ihr Provider bzw. dessen CGI erwartet. In unserem Fall method="POST". Weiterhin benötigt das komplette Formular noch einen Namen: name="Mail". Beachten Sie bitte die Hinweise, exakte Pfadangabe, manche Scripte sind case-sensitivund unterscheiden Gross-Kleinschreibung.

<formaction="http://www.Ihre-Domain.de/cgi-bin/mailer.pl"name="Mail" method="POST">   .   .   </form>  

Info Alle Formularmailer erwarten zusätzlich Angaben. Bislang wurde dem CGI-Script noch nicht mitgeteilt, an wen die Einträge versandt werden sollen bzw. aus welchem Formular heraus die Daten versandt wurden. Nahezu alle Formmailer ermöglichen die Ausgabe einer Bestätigungsseite, ein HTML-Dokument, dass nach erfolgreichem Senden am Browserbildschirm erscheint. Diese und weitere Angaben werden über versteckte Eingabefelder realisiert: <input type=hidden>. Mit dem Wert hidden wird das Feld nicht am Bildschirm dargestellt. Von Ihrem Provider werden einige dieser Felder zwingend vorgeschrieben. In unserem Fall: Die Empfänger(recipient)-Adresse:

<Input type=hidden name="recipient" value="webmaster@Ihre-Domain.de">  

Damit wird festgelegt, wer die E-Mail erhalten soll. Das Thema, Titel des Formulars:

<Input type=hidden name="subject" value="HTML-Aufbaukurs">  

Diese Angabe erscheint in der Betreff-Zeile der E-Mail. Die Adresse der Bestätigungsseite (redirect):

<Input type=hidden name="redirect" value="http://www.Ihre-Domain/html/dankemail.html">  

Info Unter redirect stellen Sie sich die HTML-Datei vor, auf die der Besucher dirigiert wird, nachdem er das Formular ausgefüllt hat. Sie können jederzeit zusätzliche versteckte (hidden) Felder einfügen. Diese werden nicht am Bildschirm dargestellt, aber in der E-Mail, die Sie erhalten, aufgelistet. Das komplette Formular:

<formaction="http://www.Ihre-Domain.de/cgi-bin/mailer.pl"name="Mail" method="POST">  <input type="hidden" name="redirect" value="http://www.Ihre-Domain.de/html/dankemail.html">   <inputtype="hidden" name="recipient" value="webmaster@Ihre-Domain.de">   <inputtype="hidden" name="subject" value="Anfrage aus Homepage">  <p>   Name: <input type="text" size="15" name="name" maxlength="50">  <br>   Vorname: <input type="text" size="15" name="vorname" maxlength="50">  <br>   PLZ: <input type="text" size="5" name="plz" maxlength="5">  <br>  <textarea name="nachricht" cols="30" rows="5" >   </textarea>   <br>  <input type="submit" value="Senden">   <input type="reset" value="Löschen">  </form>  

<formaction=“http: www.ihre-domain.de=““ cgi-bin=““ mailer.pl“name=“Mail“ method=“POST“> <inputtype=“hidden“ name=“recipient“ value=“webmaster@Ihre-Domain.de“> <inputtype=“hidden“ name=“subject“ value=“Anfrage aus Homepage“> Name: Vorname: PLZ: </inputtype=“hidden“></inputtype=“hidden“></formaction=“http:> Info Testen Sie das Formular, geben Sie Zeichen ein. Der Versand des Formulars klappt nicht, die Funktion Löschen funktioniert allerdings. Sie können die Textarea und die Inputfelder vorbelegen, d.h. die Felder sind nicht leer. Für eine Textarea notieren Sie den Text zwischen Anfang- und Ende-Tag: <textarea> Text im Feld </textatrea>. Eingabefeldern weisen Sie mit dem Attribut value="Vorgabe" einen Wert zu. Um ein Eingabefeldmit Passwortcharakter zu erzeugen, setzen Sie das Attribut type="password". Anstatt des eingegebenen Textes erscheinen dann **** am Bildschirm. Achtung: Das ist kein echtes Passwort, sondern nur eine geschützte Darstellung am Bildschirm. Die Daten werden trotzdem unverschlüsselt übertragen. Sie könnten Eingabefelder auch sperren (nur lesbar) mit <input readonly>. Das bewirkt, dass zwar ein Eingabefeld erscheint, man kann aber nichts eingeben. Wozu? Eingabefelder sind bereits unschön, wenn Sie etwas zu sagen haben, schreiben Sie es in Ihr Dokument.

Felder für Datei-Upload

Diese Sorte Formularelement erlaubt dem Anwender, eine Datei von seinem lokalen Rechner zusammen mit dem Formular zu übertragen. Wenn ein CGI-Script die ankommenden Formulardaten auf dem Server-Rechner verarbeitet, ist es dadurch möglich, dem Anwender das Uploaden (Hochladen) von Dateien auf den Server-Rechner zu ermöglichen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <title>Felder f&uuml;r Datei-Upload definieren</title>  </head>  <body>  <h1>Schicken Sie uns was Schickes!</h1>  <form action="input_file.htm" method="post" enctype="multipart/form-data">  <p>Wählen Sie eine Textdatei (txt, html usw.) von Ihrem Rechner aus:  <br>  <input name="Datei" type="file" size="50" maxlength="100000" accept="text/*"></p>  </form>  </body>  </html>  

Info Mit <input type="file"> definieren Sie ein Element für Datei-Upload (input = Eingabe, file = Datei). Der Web-Browser sollte dann ein Eingabefeld anzeigen, das die Eingabe einer Datei (in den meisten Fällen mit Pfadnamen) erlaubt. Rechts daneben sollte der Browser einen Button anzeigen, bei dessen Anklicken ein lokaler Dateiauswahl-Dialog am Bildschirm erscheint. Die Größe des Eingabefeldes (Anzahl Zeichen) können Sie mit dem Attribut size= bestimmen (size = Größe). Das Attribut maxlength= wurde in HTML 3.2 definiert als Hinweis an den Browser, nur Dateien bis zu einer Bytegröße dieser Angabe zur Auswahl zuzulassen. In HTML 4.01 wird auf diese Funktion nicht mehr eingegangen. Verlassen Sie sich also nicht auf diese Angabe. Sicherer ist es, bei der Weiterverarbeitung mit einem CGI-Script im Script die Dateigröße zu ermitteln und das Script davon abhängig entscheiden zu lassen, ob die Datei akzeptiert oder verworfen wird. Uns ist auch kein Browser bekannt, der diese Angabe in irgendeiner Weise einschränkend umsetzt.

Wenn Sie nur bestimmte Dateitypen zulassen wollen,

können Sie mit der Angabe von accept= die erlaubten Dateitypen eingrenzen (accept = akzeptieren). Hinter dem Istgleichzeichen können Sie einen MIME-Typ angeben. Dabei ist auch das Wildcard-Zeichen (*) bei Subtypen erlaubt. Im obigen Beispiel werden mit text/* alle Textdateien akzeptiert. Dazu gehören reine Textdateien (*.txt), aber z.B. auch HTML-Dateien (*.html,*.htm). Verlassen Sie sich aber auch bei dieser Angabe nicht darauf, dass der Browser vor dem Versenden des Formulars das tatsächlich prüft. Auch bei dieser Angabe ist uns kein Browser bekannt, der die Auswahl des Benutzers in irgendeiner Form kontrolliert. Info Datei-Uploads funktionieren nur mit method="post". Wichtig ist außerdem, dass Sie im einleitenden <form>-Tag die Angabe enctype="multipart/form-data" notieren. Andernfalls erhalten Sie lediglich den Dateinamen der ausgewählten Datei übermittelt, nicht jedoch die Datei selbst. Das Attribut value= in Verbindung mit <input type="file">, mit dem das Vorbelegen der Dateiauswahl möglich wäre, wird von aktuellen Browsern aus Sicherheitsgründen nicht unterstützt.

Optische Verfeinerung von Formularen mit CSS

CSS ist durchaus auch auf Formularelemente anwendbar. Bei Eingabefeldern, aber auch bei Auswahllisten und Schaltflächen lässt sich mit der CSS-Eigenschaft width eine gewünschte Breite festlegen. Bei textarea-Elementen für mehrzeilige Eingaben kann die Höhe wie erwartet durch height bestimmt werden. Möglich ist jedoch noch viel mehr: angefangen von eher ästhetischer Beeinflussung wie rahmenlose Eingabefelder, farbige Feldhintergründe oder Schriftformatierung bei Eingabefeldern bis hin zu sinnigen Möglichkeiten wie der rechtsbündigen Ausrichtung von Eingabefeldern für numerische Werte bleiben kaum Wünsche offen.

Da die bekannten Browser zum Rendern von Formularelementen teilweise auf Betriebssystemressourcen zurückgreifen, sind den Gestaltungsmöglichkeiten auf dieser Ebene jedoch auch Grenzen gesetzt. So kann es passieren, dass die Unterdrückung des Rahmens bei Auswahllisten nicht funktioniert oder eine Checkbox einfach keine andere Hintergrundfarbe annehmen will. Ein Beispiel soll einige der Möglichkeiten demonstrieren:

form {      background - color: rgb(255, 204, 153);      padding: 10 px;  }  input.text {      border: none;padding: 3 px;      background - color: rgb(255, 255, 153);      font - family: Times,      serif;      font - size: 17 px;      font - weight: bold;  }  

Das form-Element erhält eine orangefarbene Hintergrundfarbe und einen Innenabstand von 10 Pixel zum Inhalt. Für Eingabefelder, die das Attribut class="text" haben, wird festgelegt, dass der Rahmen unterdrückt wird. Zum Eingabetext soll ein Innenabstand von 3 Pixel eingehalten werden. Das Feld erhält eine gelbe Hintergrundfarbe. Vom Anwender eingegebener Text soll in Times oder einer anderen Serifenschrift mit einer Schriftgröße von 17 Pixel und fett formatiert werden.

HTML-Formulare

Webseiten mit der Funktion „Webpräsenz“ sind nur eine mögliche Variante. Vieles, was das Web attraktiv macht, fällt eher unter den Begriff „Webanwendung“. Der „Seitenbesucher“ wird zum „User“, der Suchen startet, Beiträge in Foren schreibt, persönliche digitale Fotoalben verwaltet, Kleinanzeigen aufgibt usw. Auch dabei basieren die Webseiten auf HTML.

Die nötige Interaktion mit dem Anwender beginnt in der Regel mit einem Formular. HTML stellt eine Reihe von Standard-Formularelementen zur Verfügung, die sich an den Dialogelementen moderner grafischer Benutzeroberflächen orientieren. So gibt es Eingabefelder, Radiobuttons, Checkboxen, Auswahllisten, Schaltflächen usw.

Mit dem Formular allein ist es jedoch nicht getan.

Daten, die ein Anwender in einem Formular bestimmt und absendet, müssen irgendwie verarbeitet werden. Das Instrument dafür sind serverseitige Scripts, beispielsweise PHP-Scripts. Richtige Anwendungen für Formulare werden wir deshalb auch erst im PHP und MySQL finden. Im vorliegenden Abschnitt konzentrieren wir uns auf die Strukturierungs- und Gestaltungsmöglichkeiten von Formularen auf Webseiten.

Formularbereiche

Formulare werden in HTML durch <form...></form> markiert. Im einleitenden <form>-Tag werden wichtige Informationen notiert, z.B. was passieren soll, wenn der Anwender das Formular absendet. Zwischen <form> und </form> können Formularelemente notiert werden, aber auch Text und andere Elemente, die dazu beitragen, das Formular zu strukturieren. Betrachten wir zunächst das einleitende <form>-Tag in einem Beispiel:

<form action="/index.php" method="post">  <!-- Formularinhalt -->  </form>  

In diesem Beispiel wird bestimmt, dass die im Formular eingegebenen oder ausgewählten Daten beim Absenden an ein PHP-Script namens index.php, das sich im Wurzelverzeichnis des Webservers befindet, übertragen werden. Zuständig für die Verarbeitungsadresse ist das Attribut action=, das als Wert einen URI erwartet. Es kann sich also um eine beliebige geeignete Internetadresse oder um ein lokal referenziertes Script handeln. Erlaubt sind auch Angaben des Typs mailto:jemand@irgendwo.xy. In diesem Fall sollte im <form>-Tag unbedingt zusätzlich enctype="text/plain" notiert werden. Der Browser versucht dann, die Formulardaten über eine lokale Mail-Schnittstelle an die angegebene Mail-Adresse zu senden. Sicherlich ist diese Form der Formularverarbeitung die einfachste. Als Seitenanbieter gibt man einfach seine eigene Mail-Adresse in dieses Schema ein und schon bekommt man alle Formulardaten, die Anwender absenden, als E-Mail zugeschickt. Allerdings ist von dieser Praxis dringend abzuraten. Der Mail-Versand funktioniert nämlich bei vielen Anwendern nicht, da Browser normalerweise keine eigene Schnittstelle für den Mailversand besitzen und die erfolgreiche Kommunikation der Formulardaten vom Browser an ein Mail-Programm von vielen vagen Systemfaktoren abhängt. Bei betroffenen Anwendern wird Ihr Formular also für Ärger sorgen, da sie ein Formular, für dessen Ausfüllen sie möglicherweise einige Zeit investiert haben, am Ende nicht absenden können. Als Wert für das action-Attribut sollte also bei allen professionellen Angeboten ein Script angegeben werden, das die eingegebenen Daten ordentlich verarbeitet. Ebenso wichtig wie das action-Attribut ist das Attribut method=. Als Werte sind hier entweder get oder post möglich. Damit wird die Art bestimmt, wie dem datenverarbeitenden Script die Daten übergeben werden. Auf die Details werden wir erst später eingehen. Doch auf eine leicht erkennbare Unterscheidung zwischen den Übertragungsmethoden GET und POST sei hier schon hingewiesen: Bei der GET-Methode werden die Formulardaten über den URI übertragen. In der Adresszeile des Browsers ist das daran erkennbar, dass dort nach Absenden des Formulars, also beim Aufruf des bei action= angegebenen Scripts, alle Namen und Werte der Formularelemente in einer Zeichenkette erscheinen. Nach Eingabe eines Suchbegriffs in Google erscheint im Browser beispielsweise:

http://www.google.de/search?hl=de&q=Siebenb%C3%BCrgen&btnG=Google-Suche&meta=  

Ein Quelltextauszug aus der Google-Seite mit dem Formular zur Suche lautet:

<form name="gs" method="GET" action="/search">  

Das datenverarbeitende Script hat also den Dateinamen search und liegt im Wurzelverzeichnis des Webservers. Die Übertragungsmethode GET sorgt dafür, dass die eingegebenen Daten des Suchformulars im URI stehen. Bei der POST-Methode ist dies nicht der Fall. Das Script erhält die Daten in diesem Fall über den Standard-Input-Kanal des Server-Rechners.

Welche Übertragungsmethode Sie in einem Formular angeben müssen, hängt davon ab,

welche der Übertragungsmethoden vom verarbeitenden Script ausgewertet werden. Wenn Sie das Script selber programmieren, können Sie die Methode selbst bestimmen. Handelt es sich um ein fremdprogrammiertes Script, muss die Schnittstelle von Daten, die diesem Script übergeben werden können, vom Programmierer oder Anbieter ohnehin dokumentiert sein. Dazu gehört auch die vom Script erwartete Übertragungsmethode. Bei mailto-Formularen muss die Methode POST gewählt werden. Das einleitende <form>-Tag kann noch weitere Attribute enthalten, z.B. das name-Attribut, wie im obigen Beispielformular von Google erkennbar. Dieses ist vor allem in Zusammenhang mit JavaScript von Bedeutung. über JavaScript werden wir später darauf noch näher eingehen.

Formulare als E-Mail

Viele Anwender, die von großen Discount-Providern Speicherplatz für eigene Web-Seiten erhalten, haben keine Möglichkeit, eigene CGI-Scripts zur Datenverarbeitung auf dem Server-Rechner einzusetzen. Zu diesem Zweck besteht die Möglichkeit, sich ausgefüllte Formulare als E-Mail zuschicken zu lassen.

Ein Problem stellen bei dieser Lösung jedoch Web-Browser dar, die nicht in der Lage sind,

Formulare mit action="mailto:..." zu versenden. Dabei klappt aber nicht unbedingt immer die Kommunikation zwischen Browser und E-Mail-Programm so, dass die Formulardaten übergeben und vom E-Mail-Programm anstandslos versendet werden. Es ist also ein Glücksspiel, ob der Formularversand via E-Mail bei Ihren Seitenbesuchern klappt oder nicht. Um das Problem zu umgehen, können Sie einen öffentlichen CGI-Service für so genannte Form-Mailer in Anspruch nehmen. Dort werden die Formulardaten von einem CGI-Programm verarbeitet und Ihnen dann als E-Mail zugeschickt. Ein anderes Problem bei mailto-Formularen besteht darin, dass die Formulardaten beim Abschicken per Voreinstellung nach einem bestimmten MIME-Typ kodiert werden, dem MIME-Typ application/x-www-form-urlencoded. Dabei werden alle Leerzeichen, verschiedene Sonderzeichen und Umlaute durch spezielle Zeichenfolgen ersetzt. So lautet beispielsweise der Satz Danke für die Hilfe! nach der Umwandlung: Danke+f%FCr+die+Hilfe%21. Für Menschen ist das ziemlich ungenießbarer Lesestoff. Um die Kodierung zu verhindern, können Sie im einleitenden <form>-Tag zwar die Angabe enctype="text/plain" angeben. Von Anwendern, deren Web-Browser diese Angabe jedoch nicht interpretiert, werden Sie dennoch kodierte Formulardaten erhalten.

Formulare und CGI

Wenn Sie beispielsweise Ihr gesamtes Web-Projekt nach einem Begriff durchsuchbar machen wollen, können Sie dem Anwender ein Formular anbieten, in dem er den Suchbegriff eingeben kann. Nach dem Abschicken des Formulars muss ein Script oder Programm auf dem Server-Rechner alle Dateien des Projekts nach dem gewünschten Begriff oder einen zuvor erzeugten Index oder eine Datenbank absuchen und eine dynamische HTML-Datei erzeugen, in der Verweise auf alle Seiten enthalten sind, die den Suchbegriff enthalten.

Die Standard-Programmierschnittstelle auf Web-Servern hierfür ist CGI

(Common Gateway Interface). Manche Web-Server haben – je nach installierter HTTP-Software – auch noch andere Programmierschnittstellen. Der Provider, bei dem Sie Ihre Web-Seiten speichern, muss Ihnen Zugriff auf diese Programmierschnittstelle erlauben, damit Sie solche Anwendungen selbst realisieren können. Viele Discount-Provider erlauben ihren Mitgliedern jedoch keinen solchen Zugriff. Die meist verwendete Programmiersprache für CGI-Scripts ist Perl. Wenn Sie in Perl programmieren wollen, fragen Sie den Provider, ob der Server über einen Perl-Interpreter verfügt, und wo genau der Interpreter auf dem Server liegt.

Versand per E-Mail

Es lassen sich alle Arten von Formularen erstellen, kurze und lange. Hier ist ein solches: ein Feedback-Formular für Ihre Website (ohne Formatierungen, um es möglichst kurz und übersichtlich zu halten):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- feedbackformular-mail.html -->  <html>  <head>  <title>Formulare</title>  </head>  <body>  <form ...>  <input type="radio" name="Anrede" value="Herr" />  Herr  <input type="radio" name="Anrede" value="Frau" />  Frau  <br>  Vorname:  <input type="text" name="Vorname" />  <br>  Nachname:  <input type="text" name="Nachname" />  <br>  E-Mail:  <input type="text" name="Mail" />  <br>  Kommentar zu meiner Website:  <textarea name="Kommentar" cols="50" rows="8">  Was ich schon immer mal sagen wollte ...  </textarea>  <br>  Woher kennen Sie diese Website?  <select name="Quelle" size="3">  <option value="such">Suchmaschine</option>  <option value="mund">Mund-zu-Mund-Propaganda</option>  <option value="tv">Fernsehwerbung</option>  <option value="sonst">Sonstiges</option>  </select>  <br>  <input type="checkbox" name="Newsletter" value="ja" />  Ja, ich möchte den Newsletter abonnieren!  <br>  <input type="image" src="grafik.gif" name="Versendegrafik" style="border:0px;" alt="Formular versenden" />  </form>  </body>  </html>  

Info Eine „Mund-zu-Mund-Propaganda“ gibt es eigentlich nicht, der korrekte Begriff ist „Mundpropaganda“. Das Kunstwort in diesem Beispiel haben wir in der Zwiebelfisch-Kolumne von Bastian Sick im SPIEGEL gefunden und fanden es sehr gelungen – klingt wie Mund-zu-Mund-Beatmung -, so dass wir es hier einsetzen. Fehlt nur noch ein Punkt, im Code durch drei Punkte markiert: Wohin soll das Formular? In der Regel sollen die Daten gleich per Mail verschickt werden. Da gibt es eine gute und eine schlechte Möglichkeit. Zunächst die schlechte. Die folgenden Angaben müssen alle im form-Tag ergänzt werden:

  • 1. Setzen Sie die Versandmethode des Formulars auf POST: method="post".
  • 2. Geben Sie als Versandziel die E-Mail-Adresse des Empfängers, also meist Ihre E-Mail-Adresse, in folgendem Format an: action="mailto:empfaenger@xy.de".
  • 3. Sorgen Sie dafür, dass die Maildaten in einem gut lesbaren Format verschickt werden: enctype="text/plain".

Manchmal scheint das zu funktionieren – die Maildaten kommen beim Empfänger an. Leider ist das jedoch nur die halbe Wahrheit. Das Ganze klappt nämlich nur, wenn der Webbrowser und das E-Mail-Programm zusammenarbeiten. Das ist aber beileibe nicht immer der Fall. Je nach System passiert entweder nichts, oder es öffnet sich eine neue Mail, die aber nicht automatisch verschickt wird. Noch schlimmer: Selbst wenn es funktioniert, erscheint in den meisten Browsern beim Versand des Formulars eine Furcht einflößende Warnmeldung. Info Warum ist das so? Irgendwoher muss die Website ja wissen, wie vom Client aus eine E-Mail verschickt werden kann. HTML macht es sich hier sehr einfach: Es delegiert die Arbeit an den Webbrowser. Und wenn der kein integriertes Mailprogramm hat, delegiert er diese Arbeit an das Standardmailprogramm im System. Und hier ist es wie im wahren Leben: Je mehr delegiert wird, desto mehr Informationen können verloren gehen.

Versand per E-Mail, aber richtig

Die Idee dahinter ist genauso einfach wie pfiffig. Auf dem Webserver von Formmailer liegt ein Programm, das dazu in der Lage ist, zuverlässig E-Mails zu versenden. Alles, was Sie nun tun müssen, ist, dem Formmailer mitzuteilen, wohin die E-Mails geschickt werden soll. Das geschieht grob in zwei Schritten: Zuerst melden Sie sich bei Formmailer an, dann passen Sie Ihr Formular an:

  • 1. Klicken Sie auf http://www.formmailer.com/ auf der Hauptseite in der linken Navigationsleiste auf Neues Konto.
  • 2. Akzeptieren Sie die angezeigten Bedingungen für die Nutzung des Formulars.
  • 3. Wählen Sie eine Benutzerkennung aus und geben Sie Ihre Anschrift an.

Sie erhalten eine Bestätigungsmeldung (oder eine Fehlermeldung, wenn etwas fehlt oder der von Ihnen gewählte Benutzername bereits vergeben ist).

  • 4. Klicken Sie jetzt auf Kontozugang, wieder in der linken Navigationsleiste.
  • 5. Geben Sie Ihre Nutzerdaten an, um sich einzuloggen.
  • 6. Klicken Sie auf den Link Neues Formular einrichten.
  • 7. Geben Sie im Formular drei Daten an: den URL des Formulars, den URL der Ergebnisseite sowie die E-Mail-Adresse, an die das Formular verschickt werden soll.

Die Ergebnisseite wird angezeigt, nachdem das Formular versendet wurde. Hier kann auch beispielsweise schlicht „Danke“ stehen. Ganz wichtig: Unter Verwendungszweck geben Sie an, ob Sie das Formular privat oder geschäftlich nutzen. Nur im ersteren Fall ist Formmailer gratis; kommerzielle Nutzer müssen einen geringen Obolus entrichten.

  • 8. Sie bekommen als Ergebnis ein HTML-Element angezeigt, das Sie in das gewünschte Formular einbauen müssen, nach folgendem Muster:
<input type="hidden" name="formmailer" value="XXXXX" />  

Anstelle von XXXXX erhalten Sie fünf Ziffern. Diese müssen Sie an der entsprechenden Stelle statt XXXX schreiben! Info Es handelt sich bei <input type="hidden" /> um ein weiteres Formularfeld: ein verstecktes Feld. Das wird im Browser nicht angezeigt, aber beim Formularversand mit übermittelt. Richtig „versteckt“ ist das Feld jedoch nicht, da es im HTML-Quelltext steht.

  • 9. Ändern Sie das Formular so, dass es an Formmailer verschickt wird, d.h. ergänzen Sie im <form>-Element: action="http://send.formmailer.com/" method="post".

Am Ende könnte also Ihr Formular wie folgt aussehen. Denken Sie auf jeden Fall daran, anstelle von XXXXX Ihre persönlichen fünf Ziffern anzugeben:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- feedbackformular-formmailer.html -->  <html>  <head>  <title>Formulare</title>  </head>  <body>  <form action="http://send.formmailer.com/" method="post">  <input type="hidden" name="formmailer" value="XXXXX" />  <input type="radio" name="Anrede" value="Herr" />  Herr  <input type="radio" name="Anrede" value="Frau" />  Frau  <br>  Vorname:  <input type="text" name="Vorname" />  <br>  Nachname:  <input type="text" name="Nachname" />  <br>  E-Mail:  <input type="text" name="Mail" />  <br>  Kommentar zu meiner Website:  <textarea name="Kommentar" cols="30" rows="2">  Was ich schon immer mal sagen wollte ...  </textarea>  <br>  Woher kennen Sie diese Website?  <select name="Quelle" size="3">  <option value="such">Suchmaschine</option>  <option value="mund">Mund-zu-Mund-Propaganda</option>  <option value="tv">Fernsehwerbung</option>  <option value="sonst">Sonstiges</option>  </select>  <br>  <input type="checkbox" name="Newsletter" value="ja" />  Ja, ich möchte den Newsletter abonnieren!  <br>  <input type="image" src="grafik.gif" name="Versendegrafik" style="border:0px;" alt="Formular versenden" />  </form>  </body>  </html>  

Info Wichtig: Jedes Formular müssen Sie im Administrationsmenü von http://www.formmailer.com/ einzeln registrieren (Sie erhalten dann auch eine neue Nummer)!

Formulardesign und Formularoptimierung

Seiten mit Formularen werden von Anwendern meist länger angezeigt und intensiver wahrgenommen als andere Seiten. Allein schon deshalb ist es Anbieterpflicht, Formulare so zu gestalten, dass der Anwender sich ohne Probleme darin zurechtfindet. Folgende Punkte sind wichtig:

  • Formularbereiche sollten optisch erkennbar sein.
  • Feldbeschriftungen und Formularelemente sollten einheitlich zueinander ausgerichtet sein. Der Zusammenhang zwischen einer Feldbeschriftung und dem zugehörigen Feld muss eindeutig erkennbar sein.
  • Eingabefelder sollten ordentlich positioniert sein und so weit sinnvoll eine einheitliche Länge haben, damit das Formular nicht zu unruhig wirkt.
  • In umfangreicheren Formularen sollten logisch/thematische zusammengehörige Elemente gruppiert werden. Die Gruppen sollten Gruppenüberschriften erhalten.
  • Wenn Felder Standardwerte haben, kann dem Anwender Arbeit erspart werden, indem die Felder mit den Standardwerten vorbelegt sind oder Standardwerte voreingestellt oder vorausgewählt sind.
  • Felder, deren Zweck sich nicht selbstverständlich erschließt, oder Felder, die als Wert ein bestimmtes Format oder einen bestimmten Wertebereich erhalten, sollten erläutert werden.
  • Felder, die für das verarbeitende Script Pflichtfelder sind, sollten dem Anwender als solche kenntlich gemacht werden.

Anhand eines einfachen Beispielformulars sollen diese Punkte erläutert werden. Der vollständige Quelltext der HTML-Datei des Beispiels lautet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  <style type="text/css">  input, fieldset, legend {  font-size:13px;  font-family:Arial,  sans-serif;  }  </style>  <title>Formular</title>  </head>  <body>  <h1>Login</h1>  <form action="login.php" method="post" style="background-color:#DDDDDD; padding:4px">  <fieldset>  <legend>Zugangsdaten</legend>  <table>  <tr>  <td style="width:150px; font-weight:bold; text-align:right">  <label for="user">* Benutzername:</label>  </td>  <td>  <input type="text" maxlength="40" name="user" id="user" style="width:200px">  (max. 40 Zeichen)  </td>  </tr>  <tr>  <td style="font-weight:bold; text-align:right">  <label for="pwd">* Passwort:</label>  </td>  <td>  <input type="password" maxlength="10" name="pwd" id="pwd" style="width:200px">  (max. 10 Zeichen)  </td>  </tr>  </table>  </fieldset>  <fieldset>  <legend>Optionen</legend>  <table>  <tr>  <td style="width:150px; font-weight:bold; text-align:right; vertical-align:top">  <label for="cookies">Cookies:</label>  </td>  <td>  <input type="radio" name="cookies" id="cookies" value="yes" checked>ja  <br>  <input type="radio" name="cookies" value="no">nein  </td>  </tr>  <tr>  <td style="font-weight:bold; text-align:right; vertical-align:top">  <label for="public">Benutzername:</label>  </td>  <td>  <input type="radio" name="public" id="public" value="yes">anderen Usern anzeigen  <br>  <input type="radio" name="public" value="no" checked>anderen Usern nicht anzeigen  </td>  </tr>  </table>  </fieldset>  <p><button type="submit" accesskey="s" style="font-weight:bold">  Login <span style="text-decoration:underline">s</span>enden</button></p>  <fieldset>  <legend>Hinweis</legend>  <p>Mit <span style="font-weight:bold">*</span> gekennzeichnete  Felder müssen ausgefüllt werden!</p>  </fieldset>  </form>  </body>  </html>  

Info Das Formular selbst wird im Beispiel optisch gekennzeichnet durch die hellgraue Hintergrundeinfärbung (<form ... style="background-color:#DDDDDD; ...">). Für die Gruppierung der einzelnen Bereiche wird ein eigens dafür gedachtes HTML-Element benutzt: das fieldset-Element. Insgesamt werden im Beispiel drei solcher Fieldsets definiert, erkennbar an den Rändern, die sie erzeugen. Mit <fieldset></fieldset> wird der gewünschte Bereich des Formulars eingeschlossen. Hinter jedem einleitenden <fieldset>-Tag folgt jedoch noch ein Text, der mit <legend></legend> ausgezeichnet ist. Dieser Text wird als Gruppenüberschrift des fieldset-Bereichs angezeigt und vom Browser bei der Anzeige links oben in den fieldset-Rahmen positioniert. Einen Nachteil haben die fieldset-Bereiche allerdings: Sie verhindern, dass eine durchgängige rahmenlose Tabelle notiert werden kann, um Beschriftungen und Formularelemente zueinander auszurichten. Deshalb übernehmen im Beispiel zwei solcher Tabellen diese Aufgabe. Durch geeignete CSS-Angaben werden die Zellen mit den Feldbeschriftungen rechtsbündig und wo nötig am oberen Rand ausgerichtet. Die einzeiligen Eingabefelder erhalten durch die CSS-Eigenschaft width die gleiche Länge, auch wenn im Passwortfeld nur zehn Zeichen eingegeben werden können. Durch die einheitliche Länge wirkt das Formular jedoch ruhiger. Stattdessen wird der Anwender hinter den Eingabefeldern durch Kurzhinweise darüber aufgeklärt, wie lange die Feldeingaben maximal sein dürfen.

Durch das Markup der rahmenlosen Tabelle stehen Feldbeschriftung und Formularfeld

nicht unmittelbar beieinander. Bei nicht visueller, also z.B. akustischer Ausgabe der Webseite könnte dies zu Problemen bei der Zuordnung von Beschriftung und Feld führen. HTML bietet hierfür eine Lösung an, die wir im Beispielformular ebenfalls verwendet haben. Der Beschriftungstext wird jeweils mit <label for="..."></label> ausgezeichnet. Das for-Attribut erhält als Wert einen id-Namen. Im zugehörigen Formularelement wird dieser Name in einem id-Attribut notiert. Dadurch wird ein logischer Zusammenhang zwischen Beschriftung und Formularelement hergestellt. Für die Felder Benutzername und Passwort gibt es keine sinnvollen Vorbelegungswerte. Die beiden Radiobutton-Gruppen der Optionen Cookies und Benutzername dagegen erhalten mithilfe des Attributs checked je eine Default-Auswahl. Auf diese Weise ist sichergestellt, dass in jedem Fall eine gültige Option beim Absenden des Formulars übertragen wird. Der Submit-Button zum Absenden des Formulars wird im Beispiel mithilfe des button-Elements realisiert. Grund ist, dass die Beschriftung einen als unterstrichen formatierten Buchstaben enthält (das „s“ bei Login senden). Bei einer Wertzuweisung des Beschriftungstextes an das value-Attribut eines <input type="submit">-Konstrukts wäre das nicht möglich. Unterstrichen wird das „s“ deshalb, weil im einleitenden <button>-Tag das Attribut accesskey="s" notiert ist. Das accesskey-Attribut funktioniert in Formularelementen genauso wie bei Hyperlinks. Durch einen Hotkey wie (Alt)+(s) (browserabhängig, kann der Anwender das Formular über die Tastatur absenden. Ebenso wie das accesskey-Attribut kann in Formularelementen analog zu Hyperlinks ein tabindex-Attribut notiert werden. Und genauso wie bei den Links kann durch die als Wert zugewiesene Zahl die Reihenfolge beim Anspringen der Felder über die (Umschalt)-Taste festgelegt werden.

Formular-Eingabe-Felder

Formulare werden in HTML mit dem Tag <form> eingeleitet und mit </form> abgeschlossen. Achten Sie darauf, dass alle weiteren Angaben zum Formular zwischen diesen beiden Tags stehen müssen. Wenn Sie mit einem Wysiwig-Editor arbeiten (Frontpage o.ä.) können Sie mit Maus-Klicks die Formularfelder einfügen. Achten Sie darauf, dass auch hier nur ein einziges einleitendes <form> Tag am Anfang des Formulars und nur ein einziges abschliessendes </form> Tag am Ende des Formulars im Quelltext erscheint.

Eingabe-Felder werden in HTML mit dem Tag <input> eingefügt. Um ein einfaches einzeiliges Eingabefeld zu erzeugen, muss das input-Tag mit dem attribut type="text" erweitert werden. Mit dem Attribut sizelegen Sie die Länge des Eingabefeldes fest. Die Wertangabe bezieht sich auf die Anzahl der Zeichen: size="5" erzeugt ein fünf Zeichen langes Eingabefeld. Jedem Eingabefeld muss über das Attribut name ein Name zugewiesen werden: name ="alter".

<form>  <input type="text" size="5" name="alter">  </form>  

Erzeugt dieses Eingabe-Feld. Sie können Text eingeben und es werden maximal fünf Zeichen im Eingabefenster dargestellt. Geben Sie mehr als fünf Zeichen ein, wird der Text gescrollt (ohne Scrollbalken). Bei vielen Eingabefeldern besteht die Möglichkeit, mehr Zeichen einzugeben, wobei das Eingabefeld gescrollt wird. Mit dem Attribut maxlength legen Sie die maximale Länge fest.

<form>   <inputtype="text" size="5" name="alter" maxlength="5">   </form>  

Testen Sie im Browser. Diese Möglichkeit empfiehlt sich bei der Eingabe von Postleitzahlen (zip-code), um unsinnige Eingaben zu unterdrücken. Fügen Sie nach diesem Schema weitere Eingabefelder hinzu, um Ihr Formular zu erweitern. Wählen Sie für maxsize einen Wert, der realistisch ist: Eingabefelder für Namen sind mit 50 Zeichen sicherlich ausreichend lang. Die Beschriftung der Eingabefelder erfolgt wie gewohnt in HTML:

<form>  Name:  <input type="text" size="15" name="name" maxlength="50">  <br>   Vorname:  <input type="text" size="15" name="vorname" maxlength="50">  <br>   PLZ:  <input type="text" size="5" name="plz" maxlength="5">  <br>  </form>  

Um die Positionierung der Beschriftung und der Eingabefelder zu steuern, binden Sie alles in eine Tabelle ein. z.B. zweispaltige Tabelle, in der linken Spalte stehen rechtsbündig die Beschriftungen, in der rechten Spalte stehen linksbündig die Eingabefelder. Überprüfen Sie Ihre Einstellungen in Browsern. Die Unterschiede sind gravierend. Sie haben keine Kontrolle über die Art des Eingabefeldes, der Browser allein bestimmt das Aussehen. Damit Ihre Seitenbesucher auch Nachrichten hinterlassen können, benötigen Sie ein echtes Eingabefeld. Mit dem Tag textareawird dieses erzeugt. Die Textarea muss einen Namen erhalten. Die Grösse des Textarea wird mit Reihen (rows) und Spalten (cols) definiert. Die Zahlenangabe bezieht sich auf die Anzahl der Zeichen.

<textareaname="nachricht" cols="30" rows="5">  </textarea>  

Mit den obigen Tags und Attributen wird ein fünfzeiliges Eingabefeld mit 30 Zeichen pro Zeile erzeugt. Mit den beiden Eingabefelder textarea und input lassen sich bereits sehr schöne und wirkungsvolle E-Mail-Formulare erstellen. Um das Formular abzusenden oder die Formulareingaben zu löschen, sind noch Buttons (Schalter) erforderlich, um diese Aktionen auszulösen. Mit dem Tag input type=submit wird eine Schaltfläche erzeugt, die das Formular absenden würde. Die Beschriftung des Buttons wird mit dem Attribut value="Senden" bestimmt. Ebenso wie type=submit ist type=reset bereits in HTML definiert. Die damit verbundenen Aktionen werden automatisch ausgeführt, Sie müssen sich um nichts kümmern. Reset setzt die Formulareingaben zurück, konkret: Es wird alles gelöscht.

<inputtype="submit" value="Senden">   <inputtype="reset" value="Löschen">  

Das E-Mail-Formular im Überblick:

<form>  Name: <input type="text" size="15" name="name" maxlength="50">  <br>   Vorname: <input type="text" size="15" name="vorname" maxlength="50">  <br>   PLZ: <input type="text" size="5" name="plz" maxlength="5">  <br>  <textarea name="nachricht" cols="30" rows="5">   </textarea>  <input type="submit" value="Senden">   <inputtype="reset" value="Löschen">  </form>  

Mehrzeilige Eingabebereiche

Ein mehrzeiliger Eingabebereich eignet sich für Freitext aller Art, etwa für Notizen, Bemerkungen, oder bei einem Forum oder Gästebuch für den Beitragstext. In HTML gibt es dafür ein eigenes Element:

<textarea name="bemerkung" cols="50" rows="10">  Platz für Ihre Bemerkungen!  </textarea>  

Info Das textarea-Element besteht aus Anfangs- und End-Tag. Dazwischen kann Text notiert werden. Dieser wird als Vorbelegungstext interpretiert. Falls der Anwender mehr Text eingibt als die Größe des Bereichs zulässt, fügt der Browser automatisch eine Scrollleiste ein. Die Größe des Bereichs können Sie durch die Attribute rows= (Anzahl Zeilen) und cols= (Anzahl Spalten) festlegen. Diese Angaben sind allerdings nur für textmodusbasierte Browser wirklich von Bedeutung. Für grafische Browser empfiehlt es sich, die Größe des Eingabefelds zusätzlich mit entsprechenden CSS-Eigenschaften (width und height) festzulegen (in Zusammenhang mit der optischen Gestaltung von Formularen gehen wir später noch genauer darauf ein). Eingegebener Text wird übrigens automatisch umgebrochen. Durch Betätigen der (Enter)-Taste kann der Anwender Zeilenumbrüche im Text erzwingen.

Mehrzeilige Textfelder

Wenn eine Textzeile nicht mehr ausreicht, müssen es mehrere sein. Dazu gibt es ein eigenes HTML-Tag, das ausnahmsweise nicht <input> heißt. Die Rede ist von <textarea>. Sie finden das Element auf vielen Websites, beispielsweise wenn Sie eine aktuelle Java-Version herunterladen und installieren möchten. Im Textfeld stehen dann die Nutzungsbedingungen. Die meisten mehrzeiligen Textfelder sind allerdings dazu da, dass dort vom Benutzer etwas eingetragen werden kann. Die Anpassung ist sehr einfach:

  • 1. Geben Sie im Attribut cols die Breite des Textfelds (in Zeichen) an.
  • 2. Geben Sie im Attribut rows die Höhe des Textfelds (in Zeilen) an.

Natürlich können Sie auch die CSS-Befehle width und height verwenden.

<textarea cols="50" rows="8">  </textarea>  
  • 3. Wenn das Textfeld vorausgefüllt werden soll, geben Sie den entsprechenden Text zwischen <textarea> und </textarea> an:
<textarea>  Bitte tippen Sie munter drauflos ... Ich freue mich auf Ihr Feedback  </textarea>  
  • 4. Packen Sie Stilangaben ins style-Attribut:
<textarea style="background-color:orange; font-weight:bold;">  </textarea>  
  • 5. Außerdem benötigt das Textfeld noch einen ordentlichen Namen, verwenden Sie dazu das name-Attribut:
<textarea name="Mehrzeilig">  </textarea>  

Nachfolgend ein komplettes Formular:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- formular-mehrzeilig.html -->  <html>  <head>  <title>Formulare</title>  </head>  <body>  <form action="formulardaten.html" method="get">  <textarea cols="50" rows="8" style="background-color:orange; font-weight:bold;" name="Mehrzeilig">  Bitte tippen Sie hier ...  Ich freue mich auf Ihr Feedback!  </textarea>  <br>  <input type="submit" value=">Hier klicken<" name="Versand" style="background-color:red; font-weight:bold;" />  </form>  </body>  </html>  

Info Sie sehen hier zwei Unterschiede zu herkömmlichem HTML:

  • Zeilenumbrüche innerhalb eines mehrzeiligen Textfelds werden tatsächlich als solche dargestellt.
  • Mehrere Leerzeichen hintereinander werden innerhalb eines mehrzeiligen Textfelds ebenfalls als solche dargestellt.

Der Versand schließlich bringt zu Tage, was übermittelt wird: der Name des Felds (name-Attribut) sowie das, was eingetragen worden ist – hier der Vorgabetext, weil wir nichts geändert haben. Ansonsten wäre es der Text, den der Surfer eingegeben hat.  

Radiobuttons und Checkboxen

Die nachfolgend vorgestellten Formularelemente können Sie zwischen <form> und </form> notieren.

Eingabefelder, Radiobuttons, Checkboxen und Schaltflächen

Eine ganze Reihe von Formularelementen in HTML werden alle nach dem gleichen Schema ausgezeichnet:

<input type="..." name="..." value="...">  
<input type=Bedeutung
"text"Einzeiliges Eingabefeld
"password"Eingabefeld für Passwörter
"radio"Radiobutton (ja/nein-Schalter). Von mehreren Radiobuttons mit gleichem name-Attributwert kann immer nur einer ausgewählt werden.
"checkbox"Checkbox (ja/nein-Schalter)
"button"Schaltfläche ohne vordefinierte Funktion
"submit"Schaltfläche zum Absenden der Formulardaten
"reset"Schaltfläche zum Zurücksetzen des Formulars in den Anfangszustand. Eingaben werden gelöscht.
"image"Alternative zu „submit“. Ein zusätzliches src-Attribut im <input>-Tag erlaubt das Referenzieren eines Grafik-URI. Die Grafik ist anklickbar und sendet das Formular ab.
"file"Eingabefeld mit Durchsuchen-Schaltfläche zum Auswählen einer beim Anwender lokal gespeicherten Datei. Die Datei wird zusammen mit den Formulardaten abgesendet („File-Upload“).
"hidden"Versteckte Information; Element ist nicht sichtbar.

Info Einzeilige Eingabefelder eignen sich für alle Arten von Einzeldaten wie Namen, Mail-Adressen, Telefonnummern, Suchausdrücke usw. Passwortfelder sollten nur für entsprechende Zwecke genutzt werden. Dabei ist es wichtig zu wissen, dass lediglich die Darstellung am Bildschirm verschleiert wird. Die eingegebenen Daten werden dadurch noch nicht verschlüsselt. Radiobuttons sind nur als Gruppe sinnvoll. Dabei erhalten alle zur Gruppe gehörigen Radiobuttons bei name= den gleichen Wert. Der Browser reagiert so, dass immer nur einer der Radiobuttons aktivierbar ist. Eine sinnvolle Anwendung sind beispielsweise zwei Radiobuttons zur Auswahl des Geschlechts männlich oder weiblich.

Checkboxen eignen sich vor allem zum Ein-/Ausschalten von Optionen wie etwa

„Groß-/ Kleinschreibung unterscheiden“. Sowohl bei Radiobuttons als auch bei Checkboxen können Sie im <input>-Tag das Standalone-Attribut checked (in XHTML: checked="checked") notieren. Damit erzwingen Sie, dass das entsprechende Element beim Aufrufen oder Zurücksetzen des Formulars vorausgewählt ist. Bei zusammengehörigen Radiobuttons kann natürlich nur eines der Elemente vorausgewählt werden. Bei den Schaltflächen unterscheidet HTML grundsätzlich zwischen funktionslosen Schaltflächen (type="button") und den beiden vordefinierten Schaltflächen zum Absenden der Formulareingaben („OK“-Funktionalität bzw. Submit-Button – type="submit") und zum Zurücksetzen der Formulareingaben („Abbrechen“-Funktionalität bzw. Reset-Button – type="reset"). Funktionslose Schaltflächen sind vor allem für clientseitige Interaktionsverarbeitung mit JavaScript gedacht. Die beiden anderen Typen sind dagegen Nachbildungen der Standardschaltflächen von Dialogen, wie man sie auch bei modernen grafischen Benutzeroberflächen kennt. Die reset-Schaltfläche ist jedoch, was Usability betrifft, mit Vorsicht zu genießen, vor allem bei umfangreicheren Formularen. Ein unachtsamer Anwenderklick auf eine solche Schaltfläche und alle zuvor getätigten Formulareingaben sind unwiderruflich weg. Die meisten Formulare bieten daher nur die submit-Schaltfläche an. Die Beschriftung der Schaltfläche wird in allen Fällen im value-Attribut festgelegt. Die Auszeichnung von Schaltflächen über <input …> ist nur die ältere von zwei Varianten. Für die neuere Variante wurde mit HTML 4.0 das button-Element eingeführt. Die folgenden beiden Beispiele bewirken im Browser letztlich das Gleiche:

<input type="submit" value="Absenden">  <button type="submit" value="Absenden">  </button>  

Der Unterschied besteht vor allem darin, dass das input-Element ein Standalone-Element ohne End-Tag ist (in XHTML muss es daher in der Form <input.../> notiert werden). Das button-Element erlaubt dagegen Elementinhalt, und zwar sowohl Text als auch Block- und Inline-Elemente. Auf diese Weise können Sie Buttonbeschriftungen auffällig gestalten, beispielsweise auch mit Grafiken. Die Attribute name= und value= bestimmen die Daten, die beim Absenden des Formulars übertragen werden. Das name-Attribut bezeichnet den Namen eines Parameters und das value-Attribut dessen Wert. Während das name-Attribut bei allen input-Typen außer bei submit und reset obligatorisch ist, ist das value-Attribut nicht zwingend erforderlich, da der Wert zumindest bei Eingabefeldern, Radiobuttons, Checkboxen usw. durch den Anwender bestimmt wird. Das value-Attribut eignet sich bei Eingabefeldern jedoch dazu, einen Default-Wert vorzugeben. Beispiel:

URL-Adresse: <input type="text" name="url" value="http:// ">  

Info In diesem Fall wird das Eingabefeld mit dem Namen url mit der Zeichenfolge http:// vorbelegt. Bei der Wertzuweisung an das name-Attribut gelten gewisse Regeln. Der Parametername muss mit einem Buchstaben A–Z oder a–z beginnen. Als weitere Zeichen sind ebenfalls A–Z und a–z erlaubt sowie die Ziffern 0–9 und die Zeichen für Unterstrich (_), den Bindestrich (-), Doppelpunkt (:) und Punkt (.). In Hinblick auf Programmiersprachen wie Java-Script oder PHP, die auf die Parameter über diese Namen zugreifen, sollten Sie sich jedoch unbedingt auf Buchstaben, Ziffern und Unterstrich beschränken. Groß- und Kleinschreibung werden bei den genannten Programmiersprachen ebenfalls unterschieden. Auf die optische Gestaltung von Elementen wie Eingabefeldern, wozu auch die Bestimmung von angezeigter Breite gehört, gehen wir später darauf ein. Die Breite eines Eingabefelds hat jedoch nichts damit zu tun, wie viele Zeichen in dem Feld eingegeben werden können. Um die Anzahl der möglichen Zeichen in einem Feld zu begrenzen, benötigen Sie das maxlength-Attribut. Ein Beispiel:

Vorname: <input type="text" name="given_name" maxlength="30">  

Info In diesem Beispiel wird durch die Angabe maxlength="30" festgelegt, dass der Browser von Eingaben in diesem Feld maximal die 30 ersten Zeichen übertragen soll. Solche Begrenzungsangaben sind wichtig, wenn das verarbeitende Script die eingegebenen Daten beispielsweise in eine Datenbank schreibt, in der die Feldlängen entsprechend begrenzt sind. Allerdings ist auf die Zuverlässigkeit der Browser bei der Interpretation des maxlength-Attributs kein Verlass. Stattdessen empfiehlt es sich in jedem Fall, Feldeingaben vor dem Schreiben in eine Datenbank auch auf ihre Länge hin zu prüfen und gegebenenfalls abzuschneiden. Speziellere Formen des input-Elements sind type="image", type="file" und type="hidden". Die Angabe type="image" ersetzt type="submit" und ist funktionsgleich. Anstelle einer Standardschaltfläche kann eine frei wählbare Grafik als Absende-Button definiert werden, wie im folgenden Beispiel:

<input type="image" src="ok.png" alt="Absenden">  

Info Die gewünschte Grafik wird beim src-Attribut als URI zugewiesen. Außerdem sollten Sie in diesem Fall auch das alt-Attribut notieren, das den Alternativtext enthält, falls die Grafik nicht angezeigt werden kann. Die gleiche Funktionalität wie durch type="image" erreichen Sie übrigens über das button-Element wie folgt:

<button type="submit">  <img src="ok.png" alt="Absenden">  </button>  

Info Versteckte Formularelemente (type="hidden") sind nur in Zusammenhang mit Scripting von Bedeutung. Wir werden deshalb erst bei den Scriptsprachen näher darauf eingehen. Nicht ganz unproblematisch ist das input-Element mit der Funktionalität Datei-Upload (type="file"). Das serverseitige Script, das auf diese Weise Dateien vom Anwender übertragen bekommt, muss auf jeden Fall eine Reihe von Sicherheitschecks durchführen, um den Server nicht zu gefährden. Denn Dateien können Viren transportieren, sehr groß sein usw. Die erlaubte Maximalgröße ist zwar in HTML wie auch bei der Zeichenlänge von Eingabefeldern durch das maxlength-Attribut begrenzbar. Doch wie schon erwähnt ist kein Verlass darauf, dass alle Browser das Attribut konsequent beachten. Wenn Sie in ein Formular ein File-Upload-Feld integrieren, sollte das einleitende <form>-Tag folgende Angaben erhalten:

<form action="..." method="post" enctype="multipart/form-data">  

Info Die enctype-Angabe ist wichtig, damit serverseitig erkannt werden kann, dass es sich um mehrteilige Daten handelt. Der Wert multipart/form-data ist eine Mime-Type-Angabe für solche Zwecke. Als Übertragungsmethode sollte im Fall von File-Upload stets die POST-Methode gewählt werden. Im <input>-Tag ist es außerdem möglich, mithilfe eines accept-Attributs die Dateiauswahl zu begrenzen, z.B.:

<input name="Datei" type="file" maxlength="100000" accept="image/*">  

Info In diesem Beispiel wird dem Anwender erlaubt, eine lokal gespeicherte Grafikdatei (image/) beliebigen Typs (*) mit einer Maximalgröße von 100.000 Byte zum Hochladen auszuwählen.  

Versteckte Elemente in Formularen definieren

Sie können Felder in einem Formular definieren, die dem Anwender nicht angezeigt werden. Versteckte Felder können Daten enthalten. Beim Absenden des Formulars werden die Daten versteckter Felder mit übertragen. Auf diese Weise können Sie beispielsweise zusätzliche Informationen an CGI-Scripts übergeben oder erläuternden Text einfügen, der bei der E-Mail-übertragung der Formulardaten in der E-Mail mit enthalten ist.

Auch für JavaScript ist diese Möglichkeit interessant. Da ein JavaScript Formularfelder problemlos auslesen und deren Werte auch ändern kann, ist es auf diese Weise bequem möglich, interne Daten zu speichern, die nicht am Bildschirm angezeigt werden. So könnte ein JavaScript beispielsweise, nachdem die Seite mit dem Formular beim Anwender geladen ist, Informationen zur Bildschirmauflösung beim Anwender sammeln (siehe Screen-Objekt) und die Ergebnisse in ein verstecktes Formularfeld schreiben. Die Daten werden dann, wenn der Anwender das Formular abschickt, mit übertragen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <title>Versteckte Elemente in Formularen definieren</title>  </head>  <body>  <h1>Feedback</h1>  <form name="Feedback" action="input_hidden.htm">  <p>  <input type="hidden" name="UserBrowser" value="">  Ihr Kommentar:  <br>  <textarea name="UserKommentar" rows="2" cols="20">  </textarea>  <br>  <input type="submit" value="senden">  </p>  <br>  <script type="text/javascript">  document.Feedback.UserBrowser.value = navigator.appName;  </script>  </form>  </body>  </html>  

Info Mit <input type="hidden"> definieren Sie versteckte Felder in einem Formular (input = Eingabe, hidden = versteckt). Die Daten selbst bestimmen Sie beim Attribut value (value = Wert). Im obigen Beispiel erhält das versteckte Formularfeld zunächst keine Daten (value=""). Unterhalb des Formulars ist jedoch ein JavaScript notiert. Dieses Script ermittelt den Browser, den der Anwender verwendet, und schreibt den ermittelten Wert in das versteckte Formularfeld. Wenn der Anwender das Formular absendet, wird also der verwendete Browser als Formularinhalt mit übertragen. Das Ergebnis wird in der Adresszeile sichtbar.

Grafiken mit HTML

Image-Maps (Verweis-Sensitive Grafiken)

Anklickbare Grafiken sind auf fast jeder Webseite zu finden. Dies sind einfach Grafiken, die in einen Hyperlink eingebettet und dort anstelle eines Verweistextes notiert werden. Das Schema lautet <a href=….><img></a>. Wichtig ist in diesem Fall zu wissen, dass Browser dem img-Element in diesem Fall, sofern Sie nichts anderes angeben, einen Rahmen in der Farbe für Verweise verpassen. Durch <imgstyle="border:none"> können Sie den Rahmen unterdrücken. Bedenken Sie jedoch, dass der Anwender dadurch möglicherweise übersieht, dass die Grafik ein Link ist.

Imagemaps oder verweis-sensitive Grafiken gehen noch einen Schritt weiter als anklickbare Grafiken.

Ein Imagemap ist eine Grafik mit anklickbaren Bereichen, wobei jeder Bereich sein eigenes Linkziel haben kann. Ein Beispiel soll dies demonstrieren. Dabei soll ein vollständig grafisches Menü die Navigation auf einer Startseite ermöglichen. Die Grafik sieht folgendermaßen aus: Aus den sechs beschrifteten Ellipsen sollen bei der Anzeige im Browser sechs anklickbare Schaltflächen werden, die beim Anklicken zu entsprechenden Verweiszielen führen. Der HTML-Code dazu sieht folgendermaßen aus:

<map name="navigation">  <area shape="rect" coords="5,6,274,66" href="/satzung/" alt="Satzung" title="Satzung">  <area shape="rect" coords="55,72,325,135" href="/mitglieder/" alt="Mitglieder" title="Mitglieder">  <area shape="rect" coords="113,146,380,206" href="/service/" alt="Service" title="Service">  <area shape="rect" coords="530,6,800,66" href="/partner/" alt="Partner" title="Partner">  <area shape="rect" coords="451,72,724,135" href="/aktionen/" alt="Aktionen" title="Aktionen">  <area shape="rect" coords="395,146,661,206" href="/kontakt/" alt="Kontakt" title="Kontakt">  </map>  <p>  <img src="navigation.jpg" style="width:807px; height:213px; border:none" alt="Navigation" usemap="#navigation">  </p>  

Info Die Grafik selbst wird wie im unteren Teil des Quelltextausschnitts zu sehen wie üblich über das img-Element referenziert. Der Bezug zum Imagemap wird über das zusätzliche Attribut usemap= hergestellt. Dem Attribut wird der URI einer zugehörigen Map-Definition im gleichen Dokument zugewiesen. Der Wert wird also genauso notiert wie ein Link zu einem Anker innerhalb des Dokuments, mit führendem Gatterzeichen (#), gefolgt vom Ankernamen.

Der Anker, zu dem der Bezug führt, ist das

map-Element, markiert durch <map></ map>. Dieses Element kann irgendwo zwischen <body> und </body> notiert werden. In der Regel wird es jedoch an zentraler Stelle notiert, z.B. gleich hinter dem einleitenden <body>-Tag. Das map-Element dient als Behälter für Definitionen von Verweis-Sensitiven Flächen. Das obligatorische name-Attribut im einleitenden <map>-Tag erzeugt den Anker, der bei usemap= anzugeben ist. Die Definitionen der Verweis-Sensitiven Flächen werden durch <area>-Tags markiert. Diese haben in HTML kein End-Tag, müssen in XHTML also in der Form <area/> notiert werden. Die Verweis-Sensitiven Flächen werden in diesem Tag durch die Attribute shape= und coords= festgelegt. Das shape-Attribut bezeichnet die Art der Fläche und das coords-Attribut die Pixelkoordinaten der Punkte, mit deren Hilfe sich die Fläche beschreiben lässt. Als Flächenformen stehen shape="rect" (Rechteck), shape="circle" (Kreis) und shape="poly" (Polygon, beliebiges Vieleck) zur Verfügung. Das Schema der Wertzuweisung an das coords-Attribut ist von der Angabe zum shape-Attribut abhängig.

shape=Schema für coords=Erläuterung
rectx1,y1,x2,y2x1 = linke obere Ecke, Pixel von links y1 = linke obere Ecke, Pixel von oben x2 = rechte untere Ecke, Pixel von links y2 = rechte untere Ecke, Pixel von oben
circlex,y,rx = Mittelpunkt, Pixel von links y = Mittelpunkt, Pixel von oben r = Radius in Pixel
polyx1,y1,x2,y2,… xn,ynx = Pixel einer Ecke von links y = Pixel einer Ecke von oben Von der letzten definierten Ecke müssen Sie sich eine Linie zur ersten definierten Ecke hinzudenken. Diese schließt das Polygon.

Info Obwohl die zum Anklicken vorgesehenen Flächen in unserem Beispiel elliptisch sind, verwenden wir der Einfachheit halber shape="rect" zur Definition der Verweisflächen. Die Flächenform „Kreis“ ist jedenfalls ungeeignet. Mithilfe der Flächenform „Polygon“ und einer ganzen Kette von Eckpunkten könnten wir die Ellipsen zwar einigermaßen genau beschreiben, doch für den gewünschten Zweck genügt es, gedachte Rechtecke um die Ellipsen als Verweis-Sensitiv zu kennzeichnen. Im href-Attribut wird das Linkziel angegeben. Es kann sich um einen beliebigen URI handeln, also um absolute Internetadressen oder um lokal referenzierte Quellen. Ebenso wie im img-Element ist im area-Element die Angabe eines alt-Attributs Pflicht. Der Grund leuchtet ein: Wenn die Grafik nicht angezeigt werden kann, wären auch die Links überhaupt nicht visualisierbar. Das alt-Attribut ermöglicht es dem Browser, anstelle der fehlenden grafischen Links Textlinks mit den alt-Texten als Verweistexten anzuzeigen. Leider machen die meisten Browser keinen Gebrauch davon. Das title-Attribut haben wir in unserem Beispiel spendiert, damit dem Anwender beim Überfahren der Verweis-Sensitiven Flächen zusätzlich ein Tooltipp-Fenster angezeigt wird.

Grafiken anstelle von Verweistext

Wenn Sie Verweise setzen, müssen Sie immer auch einen Verweistext definieren, also den Text, der dem Anwender als anklickbar dargestellt wird. Anstelle eines Verweistextes können Sie jedoch auch eine Grafikreferenz notieren. Dann ist die gesamte Grafik anklickbar, und beim Anklicken der Grafik wird der Verweis ausgeführt. Von dieser Möglichkeit wird in der Praxis sehr oft Gebrauch gemacht, bei Werbebannern zum Beispiel, aber auch bei grafischen Navigationsleisten.

<a href="datei.htm"><img src="datei.gif"></a>  

Das Verweisziel kann ein beliebiges erlaubtes Ziel sein. Anstelle des Verweistextes wird einfach eine Grafik eingebunden.

Zielfenster für Verweise

Normalerweise wird die HTML-Datei, die von einem Verweis aufgerufen wird, in das Browserfenster bzw. in den Frame referenziert, in dem auch der Verweis notiert wurde. Nun gibt es aber die Möglichkeit, mittels des Attributs target= die Zieldatei in einen bestimmten Frame zu referenzieren, indem als Wert der Name des Frames angegeben wird. Schließlich können auch noch reservierte Werte dem Attribut target= übergeben werden, diese sind _blank, _parent und _top. Diese werden in Beenden eines Framesets abgehandelt.

<a href="datei.html" target="rechts">Verweistext</a>  

Hier wird ein Verweis definiert, der die HTML-Datei datei.html in einen Frame namens rechts referenziert. Sollte kein Frame mit diesem Namen existieren, so hat dies dieselbe Wirkung wie die Angabe _blank beim target=-Attribut, es wird ein neues Browserfenster geöffnet.

Verweis-Rahmen unterdrücken

Der Rahmen, den der WWW-Browser per Voreinstellung um eine Grafik zieht, wenn diese als Verweis eingebunden wird, ist in vielen Fällen störend. Sie können den Rahmen unterdrücken.

<a href="datei.htm"><img src="datei.gif" border=0></a>  

Durch die zusätzliche Angabe border=0 unterdrücken Sie den Rahmen. Die Grafik bleibt weiterhin als Verweis anklickbar. Wenn Sie Rahmen um Grafiken unterdrücken, die als Verweise dienen, kann der Anwender die Grafik nicht mehr unmittelbar als Verweis erkennen. Nur wenn er mit dem Mauszeiger über die Grafik fährt, kann er an dem Mauszeigersymbol erkennen, daß es sich um einen Verweis handelt. Deshalb sollten Sie den verweiskennzeichnenden Rahmen nur dann unterdrücken, wenn die Grafik auf den ersten Blick als Verweis erkennbar ist. Das kann zum Beispiel ein beschrifteter Button sein, der dem Anwender intuitiv als Verweis erscheint.

Grafik zum umgebenden Text ausrichten

Da das img-Element ein Inline-Element ist, können Grafiken mitten in einem Text platziert werden. Wenn nun aber die Grafik höher ist als die Zeilenhöhe, dann muss der Text der gleichen Zeile in irgendeiner Weise zur Grafik ausgerichtet werden. Wenn Sie nichts anderes angeben, wird der Text untenbündig zur Grafik ausgerichtet. Sie können jedoch mit Hilfe eines Attributs selbst bestimmen, wie der Text zur Grafik ausgerichtet werden soll. Dieses Attribut ist allerdings als deprecated gekennzeichnet und soll künftig aus dem HTML-Standard entfallen. Die gleiche Wirkung lässt sich nämlich auch mit Stylesheets erzielen.

Mit dem HTML-Attribut align= im <img>-Tag können Sie Text in der gleichen Zeile zur Grafikausrichten (align = Ausrichtung):

  • Mit align="top" wird der Text obenbündig zur Grafik ausgerichtet (top = oben).
  • Mit align="middle" wird der Text mittig zur Grafik ausgerichtet (middle = mittig).
  • Mit align="bottom" wird der Text untenbündig zur Grafik ausgerichtet (boxom = unten).

Info Die Browser interpretieren zum Teil noch weitere Angaben. Diese sind jedoch nicht im HTML-Standard verzeichnet und führen deshalb zu ungültigem HTML. Erwähnt seien sie trotzdem:

  • Mit align="texttop" richten Sie den Text obenbündig zur Grafik aus, und zwar an der Oberkante des kleinsten Textes in der Zeile (texttop = oben am Text).
  • Mit align="absmiddle" richten Sie den Text absolut mittig zur Grafik aus, auch bei unterschiedlichen Textgrößen (absmiddle = absolute middle = in jedem Fall mittig).
  • Mit align="absbottom" richten Sie den Text untenbündig zur Grafik aus, und zwar an der Unterkante des kleinsten Textes in der Zeile (absbottom = absolute bottom = in jedem Fall untenbündig).
  • Mit align="baseline" richten Sie den Text genauso aus wie mit der Standardangabe align="bottom". Benutzen Sie deshalb besser die Standardangabe.

Grafiken, die Sie mit dem <img>-Tag referenzieren, können Sie links oder rechts ausrichten. Der umgebende Text fließt dabei um die Grafik. Mit zwei weiteren Attributen können Sie Abstand zum umfließenden Text erzeugen, damit der Text nicht direkt an der Grafik „klebt“. Den automatischen Textumfluss können Sie auch abbrechen und die Textfortsetzung unterhalb der Grafik erzwingen. Alle dazu notwendigen Attribute sind allerdings aLs deprecated gekennzeichnet und sollen künftig aus dem HTML-Standard entfallen. Die gleiche Wirkung lässt sich nähmlich auch mit Stylesheets erzielen. Info Mit align="left" richten Sie eine Grafik linksbündig aus. Nachfolgend notierter Text fließt rechts um die Grafik. Mit align="right" können Sie die Grafik rechtsbündig ausrichten. Der nachfolgend notierte Text fließt dann links um die Grafik. Von „nachfolgend notiertem Text“ wird hier nur der Einfachheit halber gesprochen. Es kann sich um beliebige Elemente handeln, also z.B. auch andere Grafiken, Tabellen, Multimedia-Referenzen usw. Um Abstand zwischen Grafik und umfließendem Text zu erzeugen, stehen die Attribute hspace= und vspace= zur Verfügung:

  • Mit hspace= [Pixel] bestimmen Sie den Abstand zwischen Grafik und anderen Elementen links bzw. rechts davon (hspace = horizontal space = horizontaler Abstand)
  • Mit vspace= [Pixel] bestimmen Sie den Abstand zwischen Grafik und anderen Elementen darüber bzw. darunter (vspace = vertical space = vertikaler Abstand).

Das Attribut hspace= betrifft immer den linken und den rechten Randabstand von der Grafik vspace= immer den oberen und den unteren Randabstand. Wenn Sie also beispielsweise bei einer links ausgerichteten Grafik hspace= definieren, wird nicht nur rechts der Grafik zum nebenstehenden Text ein Abstand erzeugt, sondern auch links zum Rand des Anzeigefensters hin. Um dies zu verhindern, können Sie exakter arbeiten, indem Sie Stylesheets verwenden. Sie können beide Attribute notieren oder auch nur eines davon.

Um den automatischen Textumfluss zu unterbrechen und zu erzwingen,

dass alles was folgt unterhalb der Grafik angezeigt wird, können Sie einen Zeilenumbruch mit dem Attribut clear= notieren:

  • Mit <br clear="all"> erreichen Sie, dass der Textfluss ab der nächsten Zeile in jedem Fall unterhalb der Grafik fortgesetzt wird.
  • Mit <br clear="left"> erreichen Sie, dass der Textfluss ab der nächsten Zeile unterhalb einer linksbündig ausgerichteten Grafik fortgesetzt wird.
  • Mit <br clear="right"> erreichen Sie, dass der Textfluss ab der nächsten Zeile unterhalb einer rechtsbündig ausgerichteten Grafik fortgesetzt wird.

Grafiken ausrichten mit Stylesheets

Stylesheets bieten Eigenschaften an, mit deren Hilfe die beiden Funktionen, Grafik zum umgebenden Text ausrichten und Text um Grafik fließen lassen, ebenso realisierbar sind wie mit HTML. Das „Fein-Tuning“ ist mit Hilfe von CSS sogar deutlich genauer. Mit CSS müssen Sie arbeiten, wenn Sie die in diesem Abschnitt beschriebenen Effekte erzielen und dabei aber mit der HTML-Variante „Strict“ arbeiten wollen. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:

  • vertical-align (Vertikale Ausrichtung), float (Textumfluss), clear (Fortsetzung bei Textumfluss), Außenrand und Abstand.

Info Mit style="vertical-align:text-top" erreichen Sie in einem <img>-Tag das Gleiche wie mit align="top", mit style="vertical-align:middle" das Gleiche wie mit align=,"middle", und mit style="vertical-align:text-bottom" das Gleiche wie mit align="bottom". Mit style="float:left; margin-right:20px; margin-bottom:10px" wird erreicht, dass die Grafik links ausgerichtet wird und nachfolgender Text rechts um die Grafik fließt. Dabei wird zwischen Grafik und Text ein Abstand von 20 Pixeln gehalten (links von der Grafik wird dagegen, anders als beim HTML-Attribut hspace=, kein Abstand von 20 Pixeln erzeugt). Nach unten hin, also zum Text unterhalb wird ein Abstand von 10 Pixeln definiert.

Grafikreferenzen

Grundsätzlich wird eine Grafik in HTML wie folgt eingebunden:

<img src="bild.png" alt="Bildkurzbeschreibung">  

Info Das img-Element, ein alleinstehendes Element ohne End-Tag (XML-Notation: <img/>), dient zur Referenzierung einer Grafik. Im obligatorischen src-Attribut wird der URI der gewünschten Grafik angegeben. Es kann sich um eine absolute Internetadresse oder um eine lokal adressierte Grafikdatei handeln. Das alt-Attribut ist ebenso obligatorisch wie das src-Attribut. Da Grafiken aus verschiedensten Gründen nicht angezeigt werden können – z.B. weil der Anwender die Grafikanzeige in seinem Browser aus Performance-Gründen deaktiviert hat oder weil er die Übertragung der Daten zur Webseite abgebrochen hat, sobald der gewünschte Text lesbar war, oder weil er einen Browser in einer Textmodus-Umgebung wie einer Unix-Shell benutzt. In all diesen Fällen wird anstelle der Grafik der Alternativtext angezeigt, den Sie dem alt-Attribut zuweisen. Das alt-Attribut ist nicht zu verwechseln mit dem title-Attribut, obwohl manche Browser das alt-Attribut beim Überfahren der Grafik mit der Maus ebenso wie das title-Attribut als Tooltipp-Fenster einblenden. Um einen solchen Effekt gewollt in allen modernen Browsern zu erzielen, sollten Sie das title-Attribut zusätzlich zum alt-Attribut notieren.

In der Regel sollten Sie dem Browser auch noch mehr Daten zur Grafik mitteilen.

Dazu gehören vor allem Angaben zu Höhe, Breite und Rahmen, aber auch zum Abstand zu Nachbarelementen, zur Ausrichtung usw. All diese Eigenschaften können Sie mithilfe von CSS zuweisen.

<img src="estland.jpg" style="width:300px; height:240px; border:none; float:left;  margin-right:20px; margin-bottom:20px; alt="Typisches Motiv in Estland">  

Info Weil die Angabe von Breite und Höhe eine besonders wichtige Information für den Browser darstellt – er kann dann den Raum für die Grafik beim Seitenaufbau bereits reservieren, noch bevor die Daten der Grafik geladen sind -, sind auch im Strict-Standard die beiden HTML-Attribute width= und height= im img-Element erlaubt. Als Wert wird die Pixelgröße ohne Maßeinheit zugewiesen. Da jedoch meistens noch andere Eigenschaften zu notieren sind, die CSS erfordern, ist es zweckmäßig, auch die Angaben zu Breite und Höhe mithilfe der dafür vorgesehenen CSS-Eigenschaften width und height zu notieren.

Das Beispiel weiter oben zeigt, wie eine Grafik mithilfe von CSS

im Textfluss ansprechend positioniert wird. Die Angabe float:left bewirkt, dass nachfolgender Inhalt rechts um die Grafik herumfließt. Damit der Inhalt nicht unmittelbar an der Grafik klebt, wird mit Hilfe der Eigenschaften margin-right und margin-bottom für die betroffenen Seiten ein Sicherheitsabstand von je 20 Pixel definiert. Ein Rahmen wird mit border:none explizit unterdrückt. Das img-Element zählt zu den Inline-Elementen. Eine Grafik wird also, wenn Sie nichts anderes festlegen, mitten im umgebenden Fließtext angezeigt. Nützlich ist dies vor allem bei Kleingrafiken mit Icon- oder Symbolcharakter. Viele Websites benutzen solche Grafiken beispielsweise, um Hyperlinks optisch zu typisieren.

<p>Sie können den Jahresbericht <img src="doc.gif" style="width:14px; height:12px; border:none" alt="Webseite">  <a href="jb/index.htm">als Webseite</a></p>  

oder als

<p><img src="pdf.gif" style="width:14px; height:12px; border:none" alt="PDF">  <a href="jb/jb.pdf" type="application/pdf">als PDF-Dokument</a> einsehen.</p>  

Info Um eine Grafik aus dem Inline-Kontext zu lösen, müssen Sie das img-Element entweder in ein Block-Element einbinden, z.B. durch <div><img></div>, oder dem Element mittels CSS explizit Block-Charakter zuweisen (<imgstyle="display:block">). Das img-Element kann natürlich auch in Tabellenzellen, in absolut positionierten Elementen usw. vorkommen. Dies erlaubt zusätzliche Möglichkeiten der Anordnung der Grafik und der Zuordnung von Grafik und anderen Inhalten.

Grafikformate

HTML ist als Auszeichnungssprache für Text mit Hypertext-Funktionalität konzipiert. Es bietet keine eigene Auszeichnungsmöglichkeit für grafische Elemente an. Grafiken können ebenso wie beliebige andere multimediale Elemente über entsprechende Schnittstellen-Elemente referenziert werden. Moderne grafische Browser integrieren die referenzierten Inhalte optisch an der Stelle, an der das jeweilige Element notiert ist.

Dieses Konzept drückt allerdings auch eine Gewichtung aus: Grafik und Multimedia sind im W3C-Konzept von HTML optionale, aber keine prägende Features. Deshalb haben immer noch zahlreiche Webdesigner, die eine grafische Ausbildung haben und „grafisch denken“, ihre Probleme mit dem textorientierten Strukturgedanken von HTML. Die Folge sind meist Webseiten, die nur wenig, meist lieblos hingerotzten und fehlerhaften oder von WYSIWYG-Editoren generierten HTML-Code enthalten – und dieser besteht vorwiegend aus Grafik- und Flash-Referenzen. Denn das, was solche Webdesigner sich unter der „Message“ oder dem „Feeling“ vorstellen, die von Webseiten transportiert werden sollten, ist für sie nur über Grafiken und animierte Effekte realisierbar.

Über die Philosophie von HTML und die Berechtigung des Wunschs nach rein grafischen Webseiten

lässt sich vermutlich endlos streiten. Wer sich jedoch auf HTML einlässt, sollte die text- bzw. hypertextorientierte Grundausrichtung dieser Markup-Sprache akzeptieren. Wer komplett grafisch denken will, dem bleibt die Möglichkeit, anstelle von HTML-Seiten gleich Flash-Movies auf seinen Webspace zu laden und gegebenenfalls den Webserver so zu konfigurieren, dass er z.B. auch Dateinamen wie index.swf als Default-Dateinamen erkennt und swf-Dateien mit einem entsprechenden HTTP-Header ausliefert. Der aufrufende Browser bekommt dann beim Aufruf nichts anderes als ein Flashmovie gesendet, welches er – so er denn über ein geeignetes Flash-Plug-In verfügt – im gesamten Anzeigefenster darstellen kann. Es spricht nichts gegen eine solche Radikallösung. Auch Tim Berners Lee, der Gründervater des Web, hat stets betont, dass das Web nicht auf bestimmte Dateiformate fixiert sei. HTML ist einfach eine Standardsprache für Webseiten, doch wenn Design-Vorstellungen zu stark mit deren Konzepten konfligieren, ist ein Komplettverzicht auf HTML allemal besser und sauberer als die zahlreichen Sprachvergewaltigungen, die man im Web findet.

Geeignete Grafikformate

Es gibt in HTML keine Vorschrift dafür, welches Format eine eingebundene Grafik haben sollte. Darüber, welche Formate angesagt sind, haben letztlich die grafischen Browser entschieden, und zwar einfach dadurch, welche Formate sie in der Lage sind, ohne Aufruf eines Fremdprogramms direkt anzuzeigen. Dabei haben sich in den 90er Jahren die beiden Pixel- oder Rastergrafikformate GIF und JPEG etabliert. Beide Formate zeichneten sich dadurch aus, dass sie gut komprimieren konnten und dass sie – zumindest scheinbar – frei verwendbar waren. Beim GIF-Format erwies sich Letzteres allerdings als Trugschluss. Ende der 90er Jahre, als die ganze Welt das Ende der 60er Jahre entwickelte und zunächst vom Online-Dienst CompuServe benutzte, unscheinbare GIF-Format für Millionen von Webgrafiken nutzte, startete der Lizenzinhaber des von GIF benutzten Kompressionsalgorithmus plötzlich eine Kampagne, um die Pfründe abzustecken. Software, die in der Lage war, GIF-Grafiken anzuzeigen oder zu bearbeiten, sollte fortan Lizenzgebühren an den Lizenzgeber zahlen.

Aus diesem Schlamassel ging ein neues, lizenzfreies und offen dokumentiertes Format hervor,

das vor allem als Alternative zum GIF-Format entwickelt wurde, zum Teil aber auch mit dem JPEG-Format konkurriert: das PNG-Format. Von der „Szene“ im Netz wird dieses neue Format, welches ebenso wie HTML und CSS vom W3-Konsortium spezifiziert wird, als das neue Universal-Grafikformat gepriesen, und vor allem das GIF-Format gilt in solchen Kreisen mittlerweile als Igitt-Format. Um sich ein objektiveres Urteil zu bilden, sollte sich jeder Webdesigner mit den Grundeigenschaften und Unterschieden der drei genannten Formate vertraut machen. Die nachfolgende Tabelle listet wichtige Faktoren und Unterschiede auf:

PNGJPEGGIF (89er-Format)
Kompressionsartverlustfreiverlustbehaftetverlustfrei
Kompressions-algorithmuszlib-Technologie (lizenzfrei)JPEG ist ein eigener Kompressionsalgorithmuslzw-Technologie (lizenziert)
Interlacingja, optionalja, optional („progressive“)ja, optional
Transparenzja, echte Transparenzneinja, jedoch nur einfarbige Transparenz
Animationsfähigkeitneinneinja
Max. Farbtiefebis zu 48 Bit (281 Trillionen unterschiedliche Farben), herunterskalierbar bis auf 8 Bit24 Bit (16,7 Mio. unterchiedliche Farben pro Bild)8 Bit (256 unterschiedliche Farben pro Bild)
Truecolor-Unterstützungjaja, immernein
Paletten-Unterstützungja, optionalneinja, immer
Graustufen-Unterstützungja, bis zu einer Farbtiefe von 16 Bit (65536 Graustufen-Palette)ja, mit einer Farbtiefe von 8 Bit (256 Graustufen)ja, mit der Farbtiefe von 8 Bit (256 Graustufen)

Die meisten heute verbreiteten Grafikeditoren und Bildbearbeitungsprogramme für Pixelgrafiken unterstützen beim Abspeichern alle drei Formate. Achten Sie bei der Wahl eines Grafikprogramms aber auch darauf, welche Optionen es beim Abspeichern in diesen Formaten anbietet. Denn viele letztlich ausschlaggebende Faktoren wie die Kompressionsoptionen, Interlacing und andere werden nicht während der Bildbearbeitung, sondern erst beim Abspeichern eingestellt. Speichern Sie wichtige Grafiken auf jeden Fall auch in einem geeigneten Originalformat. Wenn Sie beispielsweise mit Photoshop oder Paint Shop Pro arbeiten, sollten Sie z.B. Grafiken, die auf der Arbeit mit Layern basieren, stets auch im programmeigenen Format als Sicherungskopie speichern, damit Sie die Grafik zu einem späteren Zeitpunkt wieder optimal bearbeiten können.

Kopfdaten und Meta

Farbe für den Hintergrund

Sie können eine Farbe für den Hintergrund des Anzeigefensters bestimmen. Die gesamte HTML-Datei wird auf dieser Hintergrundfarbe angezeigt.

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>  <title>Text des Titels</title>  </head>  <body bgcolor="#CCFFFF">  <h1>Text, Verweise, Grafikreferenzen usw.</h1>  </body>  </html>  

Info Die Angabe zur Hintergrundfarbe erfolgt im einleitenden <body>-Tag der HTML-Datei. Mit dem Attribut bgcolor= bestimmen Sie die Farbe für den Bildschirmhintergrund (bgcolor = background color = Hintergrundfarbe). Die gesamte HTML-Datei wird auf der hier definierten Hintergrundfabe angezeigt. Für die Farbauswahl gelten die Regeln zum Definieren von Farben in HTML. Das Attribut bgcolor= ist als deprecated eingestuft und soll künftig vermieden werden. Den gleichen Effekt erreichen Sie nämlich auch mit Hilfe von Stylesheets, z.B. so:

<body style="background-color:#CCFFFF">  

Info Wenn Sie ein Dokument aus mehreren HTML-Dateien erstellen, das einen einheitlichen Hintergrund und Textvordergrund haben soll, müssen Sie die Hintergrundfarbe in jeder HTML-Datei neu definieren. Natürlich können Sie auch fur jede HTML-Datei andere Farben definieren. Wenn Sie eine Hintergrundfarbe definieren, sollten Sie auch passende (kontrastierende) Textvordergrundfarben definieren.

Farben für Text und Verweise

Sie können dateiweite Farben definieren:

  • für Text (gültig für alle Elemente wie überschriften, normalen Fließtext, Listen usw.),
  • für Verweise zu noch nicht besuchten Stellen,
  • fur Verweise zu bereits besuchten Stellen,
  • für Verweise, während sie angeklickt werden.
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>  <title>Text des Titels</title>  </head>  <body bgcolor="#663333" text="#FFCC99" link="#FF9966" vlink="#FF9900" alink="#FFFFFF">  <h1>Text</h1>  <a href="http://de.yahoo.com/"<Verweis zu Yahoo</a>  </body>  </html>  

Info Die Angaben erfolgen im einleitenden <body>-Tag der HTML-Datei. Für die Farbauswahl gelten die Regeln zum Definieren von Farben in HTML.

  • Mit text= definieren Sie eine Farbe für den Text.
  • Mit link= definieren Sie eine Farbe fur Verweise zu noch nicht besuchten Dateien (link = Verweis).
  • Mit vIink= definieren Sie eine Farbe ftir Verweise zu bereits besuchten Dateien (alink = visited link = besuchter Verweis).
  • Mit alink= definieren Sie eine Farbe für Verweise, die der Anwender gerade anklickt (alink = activated link = aktivierter Verweis).

Alle diese Attribute sind als deprecated eingestuft und sollen künftig vermieden werden. Den gleichen Effekt erreichen Sie nämlich auch mit Hilfe von Stylesheets, z.B. im Dateikopf zwischen <head> und </head> mit dem folgenden Quelltext:

<style type="text/css">  body {  background-color:#663333; color:#FFCC99;  }  a:link {  color:#FF9966;  }  a:visited {  color:#FF9900;  }  a:active {  color:#FFFFFF;  }  </style>  

Info Die definierten Textvordergrundfarben sollten mit der definierten Hintergrundfarbe kontrastieren. Wenn Sie z.B. eine dunkle Hintergrundfarbe definieren, sollten Sie helle Textvordergrundfarben wählen (z.B. Weiß, Gelb, Hellgrün und Hellblau).

Weitere Möglichkeiten

Bei Verwendung von Stylesheets lesen Sie zunächst in Kapitel wie man CSS-Formate definiert. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften: background-color, color, Pseudoklassen für Verweise. Das <body>-Tag kann auch Universalattribute enthalten.

Hintergrundbild (Wallpaper)

Sie können für die Anzeige einer HTML-Datei ein Hintergrundbild bestimmen. Dabei wird das Bild über das ganze Anzeigefenster hinweg immer wiederholt, sodass ein Tapeteneffekt (Wallpaper) entsteht. Besonders geeignet fur Wallpaper-Effekte sind relativ kleine Grafiken, die irgendein abstraktes Muster darstellen. Typische Beispiele finden Sie im Kapitel über Grafiken im Wallpapers (Hintergrundbilder). Die Hintergrundgrafik sollte als Grafikdatei im GIF-Format oder JPEG-Format vorliegen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>  <title>Text des Titels</title>  </head>  <body background="background.jpg" text="#990000" link="#0D00CC" vlink="#000066" alink="#0D0000">  <h1>Text</h1>  <a href="http://www.yahoo.de/"><b>Verweis zu Yahoo</b></a>  </body>  </html>  

Info Die Angabe zum Einbinden eines Hintergrundbildes erfolgt im einleitenden <body>-Tag der HTML-Datei. Mit dem Attribut background= bestimmen Sie eine Grafikdatei als Hintergrundbild (background = Hintergrund). Die gesamte HTML-Datei wird auf dem hier definierten Hintergrundbild angezeigt. Das Attribut background= ist als deprecated eingestuft und soll künftig vermieden werden. Den gleichen Effekt erreichen Sie nämlich auch mit Hilfe von Stylesheets, z.B. so:

<body style="background-image:url (/background.jpg)">  

Info Bei der Adressierung des Hintergrundbildes gelten die Regeln zum Referenzieren in HTML. Das Hintergrundbild gilt jeweils fur die HTML-Datei, in der es definiert wird. Wenn Sie ein Dokument aus mehreren HTML-Dateien erstellen, das einen einheitlichen Hintergrund haben soll, müssen Sie die Angabe in jeder HTML-Datei wiederholen. Wenn Sie ein Hintergrundbild definieren, sollten Sie auch passende Farben fur Text und Verweise definieren. Verwenden Sie bei textorientierten WWW-Seiten unauffällige Hintergrundbilder, bei denen die Lesbarkeit des Textes nicht leidet. Auffällige Hintergrundfarben sollten Sie nur verwenden, wenn die gesamte WWW-Seite grafisch aufgebaut ist und wenn die Grafiken im Vordergrund zu dem auffälligen Hintergrund passen. Netscape ab Version 4.x und MS Internet Explorer ab Version 4.x interpretieren auch animierte GlF-Grafiken als Hintergrundbilder. Der Internet Explorer kennt ein zusätzliches Attribut bgproperties="fixed" im einleitenden (body)-Tag, mit dem Sie ein unbewegliches Hintergrundbild erzeugen können. Dieses Attribut gehörte jedoch nie zum HTML-Standard und lässt sich auch durch eine CSS-Angabe ersetzen, z.B. so:

<body style="background-image:url (/background.jpg); background-attachment:fixed;">  

Weitere Möglichkeiten

Bei Verwendung von Stylesheets lesen Sie zunächst wie man CSS-Formate definiert. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften: background-image, background-repeat, background-attachment, background-position, background, color, Pseudoklassen für Verweise.

Seitenränder definieren

Bitte benutzen Sie die hier beschriebenen HTML-Attribute nur in begründeten Ausnahmefällen – sie werden hier nur der Vollständigkeit halber erwähnt. Diese Attribute gehörten nie zum HTML-Standard und sind ein typisches Beispiel dafur, welcher Wirrwarr entsteht, wenn Browser ihr eigenes Süppchen kochen. Internet Explorer+Netscape. Benutzen Sie auf jeden Fall Stylesheets zum Definieren von Seitenrändern.

<html>  <head>  <title>Text des Titels</title>  </head>  <body marginwidth="50" marginheight="100" topmargin="100" leftmargin="50">  <h1>Text</h1>  viel Text usw.  </body>  </html>  

Info Die Angabe für Seitenränder erfolgt im einleitenden <body>-Tag der HTML-Datei. Mit leftmargin= bestimmen Sie den Abstand zwischen linkem bzw. rechtem Fensterrand und Inhalt der Datei (leftmargin = linker Rand). Mit topmargin= bestimmen Sie den Abstand zwischen oberem bzw. unterem Fensterrand und dem Inhalt der Datei (topmargin = oberer Rand). Mit marginwidth= und marginheight= bestimmen Sie die entsprechenden Abstände. Alle Angaben erfolgen in Pixeln. Linke und rechte Ränder sind immer gleich groß, ebenso obere und untere. Die definierten Seitenränder gelten jeweils für die HTML-Datei, in der sie definiert werden. Wenn Sie ein Projekt aus mehreren HTML-Dateien erstellen, das einheitliche Seitenränder haben soll, müssen Sie die Seitenränder in jeder HTML-Datei neu definieren. Natürlich können Sie auch fur alle Dateien unterschiedliche Seitenränder definieren.

Seitenränder mit Stylesheets

Hier noch ein Beispiel, wie Sie die gleichen Seitenränder von Stylesheets erreichen können:

<head>  <style type="text/css">   body {  margin-left: 50px;  margin-right: 50px;  margin-top: 100px;  margin-bottom: 100px  }  </style>  </head>  

Info Mit den obigen Angaben im HTML-Dateikopf erreichen Sie die gleiche Wirkung. Diese Angaben werden von Netscape seit Version 4.0 und vom Internet Explorer seit Version 3.0 interpretiert. Außerdem sind diese Angaben vom W3-Konsortium standardisiert.

Hintergrundmusik

Sie können bestimmen, dass beim Aufruf einer HTML-Datei eine Hintergrundmusik ertönt. Dazu gibt es zwei Lösungen. Beide der im folgenden beschriebenen Lösungen – die eine für Internet Explorer, die andere für Netscape – sind proprietär. Dazu kommt, dass Netscape 4.x in einigen Zwischenversionen dabei versagt. Beide Lösungen gehören nicht zum HTML-Standard. Ferner sollten Sie sich beim Wunsch, Hintergrundmusik einzubinden, darüber im Klaren sein, dass die Mehrzahl der Anwender im Web genervt ist von dem Gedudel und sehr schnell wieder aus solchen Seiten verschwindet.

<html>  <head>  <title>Text des Titels</title>  <!-- Microsoft: -->  <bgsound src="background.mid" loop="infinite">  </head>  <body>  <!-- Netscape:  -->  <embed src="background.mid" autostart="true" loop="true" hidden="true" height="0" widht="0">  <h1>Inhalt der Seite</h1>  </body>  </html>  

Info Mit <bgsound ...> definieren Sie im Kopf einer HTML-Datei eine Hintergrundmusik nach Microsoft-Syntax für die Anzeige der Datei (bgsound = background sound = Hintergrundmusik). Mit <embed . . . > erreichen Sie das Gleiche für Netscape (embed= einbetten). Hinter der Angabe src= folgt in beiden Fällen die Angabe der gewünschten Musikdatei (src = source = Quelle). Es sollte sich möglichst um Dateien der Typen MID, AU oder WAV handeln. Um eine sichtbare Anzeige des Abspiel-Players zu unterdrücken, sind bei der Netscape-Syntax die Angaben hidden="true" height="0" width="0" erforderlich (width = Breite, height = Höhe, hidden = versteckt). Auch den automatischen Start des Abspielvorgangs müssen Sie in der Netscape-Syntax explizit angeben – durch autostart="true". Schließlich können Sie noch bestimmen, ob die Musikdatei nur einmal, mehrmals oder endlos oft (bis zum Aufrufen einer anderen HTML-Datei) abgespielt wird. Nach der Microsoft-Syntax können Sie mit loop= "infinite" eine Endloswiederholung erzwingen. Wenn Sie die Wiederholungszahl begrenzen wollen, geben Sie anstelle von infinite einfach die gewünschte Anzahl der Wiederholungen an. Bei der Netscape-Syntax haben Sie nur die Wahl zwischen Endloswiederholung und keiner Wiederholung. Um eine Endloswiederholung zu erzwingen, notieren Sie die Angabe loop= "true" . Ansonsten lassen Sie die Angabe einfach weg. Im obigen Beispiel wird vorausgesetzt, dass sich die Musikdatei im gleichen Verzeichnis befindet wie die HTML-Datei. Wenn die Datei in einem anderen Verzeichnis steht, müssen Sie den relativen oder absoluten Pfadnamen angeben. Das funktioniert genauso wie beim Einbinden von Grafiken. Die Ausgabe einer Hintergrundmusik setzt beim Anwender natürlich entsprechende Hardware (Soundkarte, Lautsprecher) voraus. Ferner muss der Webbrowser die Möglichkeit haben, die Ausgabe der Musikdatei zu steuern.

HTML-Meta-Angaben

Im Gegensatz zum Dokumenttitel sind die Meta-Angaben (häufig auch Meta-Tags genannt) in HTML ein Fass ohne Boden, ein Gegenstand von Voodoo-Glaube und ein Instrument, das von Gremien des Bibliothekswesens bis hin zum Jugendschutz gehätschelt wird. Über Meta-Angaben in HTML gibt es im Web fast ebenso viele Feature-Seiten wie zum Thema HTML allgemein.

Der Grund ist, dass Meta-Angaben die HTML-eigene Schnittstelle für jede Art von Information über ein Dokument darstellen. HTML selber gibt nur zwei Pflichtattribute vor, die ein Meta-Tag enthalten muss: entweder name= oder http-equiv= und content=. Dazu zwei Beispiele:

<meta http-equiv=" Last-Modified" content=" Tue, 15 Nov 2004 12:45:26 GMT">  <meta name="keywords" content="Fahrrad, Bike, Tour">  

Info Das Attribut http-equiv= stellt eine Information für den Webserver bereit. Es handelt sich im Grunde um Kopfanweisungen des HTTP-Protokolls (HTTP-Header), die vom Webserver an einen aufrufenden Client (z.B. einen Browser) gesendet werden, wenn dieser die Seite aufruft.

Dagegen enthalten Meta-Angaben mit dem Attribut

name= Informationen, die sich an diverse auslesende Programme oder Scripts richten. Das kann beispielsweise der aufrufende Browser sein, eine Zusatz-Software wie z.B. eine Kindersicherung oder der Robot einer Suchmaschine. Die Beispielangabe zu http-equiv verwendet das HTTP-Header-Kommando Last-Modified. Dieses enthält eine Angabe darüber, wann das Dokument zuletzt geändert wurde. Ein Webserver kann diese Angabe bei der Abstimmung mit einem aufrufenden Browser darüber nutzen, ob eine Seite aus dem Browser-Cache geladen werden kann oder ob sie neu vom Server übertragen werden soll. Die Meta-Angabe zu den keywords (wichtige Stichwörter zum Dokumentinhalt) orientiert sich dagegen eher an Suchmaschinen-Robots. Diese können beispielsweise so reagieren, dass die Webseite bei der Suche nach einem der in dieser Angabe genannten Stichwörter besonders weit oben in den Suchtreffern aufgelistet wird, da davon auszugehen ist, dass das Dokument zu den Stichwörtern besonders viele oder wichtige Informationen enthält. Leider ist diese schöne Theorie aber von der Schäbigkeit und dem Geltungsdrang vieler Seitenanbieter zunichte gemacht worden, die dieses Verhalten von Such-Robots dazu nutzten, um ihre keyword-Angaben mit lauter oft gesuchten Begriffen zu schmücken, ohne Bezug zum tatsächlichen Inhalt des Dokuments. Da wurde beispielsweise versucht, zu vermietende Ferienhäuser durch sexuelle Stichwörter in den Suchmaschinen besser zu platzieren. Daher werden keyword-Angaben von heute maßgeblichen Robots wie dem von Google gar nicht mehr besonders gewichtet.

Dringend zu empfehlende Meta-Angaben

Folgende Meta-Angaben sind in jedem Fall zu empfehlen und sollten auf keiner Webseite fehlen:

  • Angabe zur Zeichenkodierung bzw. zum Zeichensatz
  • Angabe mit einer allgemeinen Beschreibung des Inhalts

Die Angabe zum Zeichensatz bzw. zur Zeichenkodierung haben Sie bereits kennen gelernt. Hier noch einmal zwei Beispiele:

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

Info Die Angabe richtet sich durch das Attribut http-equiv= also bereits an den Webserver, damit dieser das Dokument korrekt verarbeiten kann. Dem Attribut wird als Wert content-type zugewiesen. Das obligatorische Attribut content= erhält in diesem Fall einen Wert, der einem bestimmten Schema folgt. Der Wert besteht aus zwei Angaben, die durch ein Semikolon voneinander getrennt sind. Der erste Teil ist der Mime-Type, mit dem der Webserver das Dokument an aufrufende Clients ausliefern soll, und der zweite Teil enthält die Angabe zum Zeichensatz oder zum Zeichenkodierungsprinzip.

Wertzuweisungen, die einem solchen Schema entsprechen,

sind bei Meta-Angaben übrigens nicht selten. Das Schema ist jedoch nicht in der HTML-Spezifikation vorgeschrieben, sondern in der Spezifikation oder Konvention der Software, für die die Angabe gedacht ist.

Nehmen wir als Beispiel den ersten Suchtreffer aus einer Suchmaschine. Er führt uns zur Startseite der Domain http://www.sibiweb.de/. Im Quelltext dieser Seite findet sich folgende Meta-Angabe:

<meta name="description" content="Informationsforum für alle Themen rund um die Region Siebenbürgen und die Siebenbürger Sachsen.">  

Info Verwendet die Suchmaschine diese vom Webautor eingepflegte Meta-Angabe, um unterhalb des anklickbaren Suchtreffers den Inhalt der Seite kurz zu beschreiben. Es ist also in Ihrem eigenen Interesse, dass diese Meta-Angabe in Ihren HTML-Dokumenten nicht fehlt und einen nicht zu langen, aber aussagekräftigen Inhalt hat, der die Angaben im Dokumenttitel sinnvoll ergänzt. Die Meta-Angabe zur Seitenkurzbeschreibung wird durch die Attribut-Wert-Kombination name="description" realisiert. Bei content= können Sie dann die gewünschte Kurzbeschreibung eingeben. Innerhalb des Beschreibungstextes ist übrigens kein weiteres HTML-Markup erlaubt!

Weitere Meta-Angaben zum Dokumentinhalt

Meta-Daten zur einzelnen Webseite können nicht nur für fremde Software, sondern auch für eigene Zwecke sinnvoll sein, etwa als Dateninput in eine eigene, site-spezifische Suchmaschine. Aber auch, wenn Sie einfach nur dokumentspezifische Daten wie das Veröffentlichungsdatum oder die Autoren des Inhalts festhalten wollen, haben sich entsprechende Meta-Angaben etabliert. Nachfolgend einige Beispiele:

<meta name="author" content="Anna Hirsch, ahirsch@ahirsch.info">  <meta name="date" content="2005-10-15T08:30:00+01:00">  <meta name="keywords" content="Sommersalate, leichte Kost, Rezepte">  

Info Mit den Beispielangaben wird Anna Hirsch als Autorin der Seite ausgewiesen, als Veröffentlichungszeitpunkt der Seite wird der 15. Oktober 2005, 8:30 Uhr (gemessen mit + 1 Stunde gegenüber Greenwich-Zeit) angegeben und ein paar Stichworte charakterisieren den Inhalt der Seite. Die Datums- und Zeitangabe folgt auch wieder einem festen Schema, das von vielen Softwareprodukten in dieser Form erkannt wird.

Meta-Angaben nach Dublin Core

Für die meisten Seiten reichen die zuvor genannten Meta-Angaben zum Dokumentinhalt aus. Bei umfangreicheren Publikationen mit wissenschaftlichem Anspruch entstehen jedoch weiterreichende Wünsche. HTML macht Ihnen wie schon erwähnt keine Vorschriften, was den Inhalt von Meta-Tags betrifft. Doch ist es immer sinnvoller, wenn ein Standardisierungsgremium sich um ein allgemein anerkanntes Schema bemüht, das dann auf möglichst breiter Basis Akzeptanz findet. So hat sich eine internationale Gruppe von Experten unter dem Namen Dublin Core vereint, um ein Meta-Angaben-Schema für Webseiten zu etablieren, das wissenschaftlichen und bibliothekarischen Ansprüchen gerecht wird. Nachfolgend ein Beispiel für ein Set an Meta-Angaben nach dem Dublin-Core-Schema:

<meta name="DC.Title" content="Zur Urknall-Theorie">  <meta name="DC.Creator" content="Harald Sternguck">  <meta name="DC.Subject" content="Astronomie">  <meta name="DC.Description" content="Pro- und Contra-Argumente zur Urknall-Theorie aus philosophischer Sicht">  <meta name="DC.Publisher" content="Web-Magazin: Wissen gestern, heute, morgen">  <meta name="DC.Contributor" content="Pia Lichtblau">  <meta name="DC.Date" content="2005-10-15">  <meta name="DC.Type" content="Text">  <meta name="DC.Format" content="text/html">  <meta name="DC.Identifier" content="http://server/urknall/">  <meta name="DC.Source" content="Buch / ISBN:7-23094-2389047-5">  <meta name="DC.Language" content="de">  <meta name="DC.Relation" content="Artikel Printausgabe 05/2005, S.47ff">  <meta name="DC.Coverage" content="21st century">  <meta name="DC.Rights" content=" http://server/copyright.htm">  

Info Alle Meta-Angaben nach Dublin Core werden durch das name-Attribut identifiziert. Die Wertzuweisung an dieses Attribut besteht stets nach dem Schema DC.Angabetyp, wobei das DC für „Dublin Core“ steht.

DC.Title wiederholt noch einmal den Dokumenttitel als Meta-Angabe. DC.Creator ist der Autor oder die inhaltsverantwortliche Person oder Organisation. DC.Subject soll den zugehörigen Themenbereich eingrenzen. DC.Description entspricht der gewöhnlichen Meta-Angabe zur Kurzbeschreibung des Dokumentinhalts. DC.Publisher kann sich von DC.Creator unterscheiden, wenn die Webseiten nicht vom Autor selber betreut werden, sondern von einem Drittanbieter. DC.Contributor ist für Personen oder Organisationen gedacht, die zum Inhalt oder zur Form beigetragen haben, z.B. Übersetzer oder Illustratoren. DC.Date enthält das Datum der Veröffentlichung, und zwar ohne Uhrzeit in der Form JJJJ-MM-TT. Bei DC.Type soll der Dokumenttyp charakterisiert werden – Dublin Core schlägt dazu die folgenden Angaben vor: Collection (Zusammenstellung), Dataset (für Listen oder Tabellen), Event (wenn der Inhalt z.B. eine Terminankündigung oder dergleichen ist), Image (wenn der Inhalt im Wesentlichen eine Grafik ist), InteractiveResource (wenn der Inhalt z.B. wesentlich aus einem Flash-Movie für User-Interaktion besteht), MovingImage (wenn der Inhalt wesentlich aus einem Video besteht), PhysicalObject (wenn der Inhalt wesentlich aus einer 3D-Darstellung oder -Animation besteht), Service (wenn es sich z.B. um einen User-Service wie Online-Banking handelt), Software (wenn der Inhalt wesentlich aus der Download- oder Ausführmöglichkeit einer Software besteht), Sound (wenn der Inhalt wesentlich aus Musik oder Geräuschen besteht, z.B. bei einem Webradiosender), Stilllmage (eine Spezialform von Image) und Text (wohl der häufigste Typ).

DC.Format ist der Mime-Type des Dokuments, bei HTML also im Normalfall text/html. DC.Identifier ist eine Angabe zum „Original“ des Dokuments. Bei Webseiten ist dies sinnvollerweise die Original-URL, wo das Dokument gespeichert ist. DC.Source ist die Angabe zu einer Quelle, die für das aktuelle Dokument inhaltlich maßgeblich war. DC.Relation stellt den Bezug zu einer anderen Publikation her, z.B. zu einer Printversion des aktuellen Dokuments. DC.Coverage ist etwas schwer zu fassen und soll einen räumlichen oder zeitlichen Bezug herstellen. DC.Rights schließlich ist ein Hinweis auf juristisch relevante Hintergrundinformation zum aktuellen Dokument, z.B. auf AGBs, Copyright-Hinweise usw. Idealerweise wird dazu eine URL-Adresse angegeben, unter der die betreffende Information zu finden ist.

Niemand zwingt Sie, stets das ganze DC-Set zu notieren,

wenn Sie mit den DC-Meta-Tags arbeiten möchten. Was sich aus dem Set letztlich verwendet lässt, hängt selbstverständlich vom Inhalt und von der Art der eigenen Webseiten ab. Andersherum sind auch Mehrfachangaben zulässig, z.B. wenn mehrere Personen bei DC.Contributor zu nennen sind. In Suchmaschinen wie Google spielen die DC-Angaben bislang eine eher untergeordnete oder gar keine Rolle.

Spezielle Meta-Angaben für Such-Robots

Einige Meta-Angaben orientieren sich speziell an Such-Robots, also an den Programmen der Suchmaschinen, die Webseiten scannen und den Inhalt in die Datenbank der Suchmaschine übertragen. Folgende Meta-Angaben sind je nach Situation sinnvoll:

<meta name="robots" content="noindex">  

Info Mit dieser Angabe verbieten Sie einem Suchprogramm, den Inhalt des HTML-Dokuments an seine Suchdatenbank zu übermitteln. Das kann z.B. für Impressumsseiten interessant sein, auf denen Sie möglicherweise persönliche Daten wie Wohnadresse, Umsatzsteuer-ID, Bankverbindung usw. angeben, von denen Sie aber nicht unbedingt wünschen, dass diese über Google und andere Suchmaschinen direkt auffindbar sind.

<meta name="robots" content="nofollow">  

Info Diese Angabe ergänzt die Angabe für noindex, indem Sie dem Such-Robot verbieten, Links, die in dem aktuellen HTML-Dokument enthalten sind, zu folgen.

<meta name="revisit-after" content="14 days">  

Info Diese Angabe empfiehlt dem Such-Robot, die Seite spätestens nach 14 Tagen erneut zu scannen, da anzunehmen ist, dass sich bis dahin ihr Inhalt geändert hat.

Spezielle Meta-Angaben für Webserver

Dies sind Meta-Tags mit dem Attribut http-equiv=. Es besteht keine Garantie, dass jede Angabe von jedem Webserver oder von einem von ihm ausgeführten Script tatsächlich und korrekt interpretiert wird. Dennoch haben sich eine Reihe von Meta-Angaben etabliert, die in vielen Fällen funktionieren und nützliche Dienste leisten können. Folgende Angaben gehören dazu (Beispiele):

<meta http-equiv="content-encoding" content="gzip">  

Info Diese Angabe weist den Webserver an, das Dokument wenn möglich ZIP-komprimiert an den Browser auszuliefern. Bei textlastigen Dokumenten kann sich dadurch die zu übertragende Datenrate erheblich reduzieren. Das Dokument kann deutlich schneller im Browser angezeigt werden.

<meta http-equiv="expires" content="Wed, 1 Jan 2006 00:00:00 GMT">  

Info Diese Angabe bedeutet, dass das Dokument nach dem angegebenen Zeitpunkt bei Anforderung nicht mehr aus einem Cache-Speicher (z.B. aus dem Browser-Cache) geholt werden darf, sondern in jedem Fall neu vom Server übertragen werden muss. Sinnvoll ist diese Angabe, wenn Sie wissen, dass das Dokument bis zu diesem Zeitpunkt auf jeden Fall einen aktuelleren Inhalt haben wird.

<meta http-equiv="refresh" content="3;URL=http://server/">  

Info Diese in der Praxis sehr häufig verwendete Angabe bietet HTML-Autoren die Möglichkeit, ohne weitere Serverkenntnisse eine Weiterleitung zu einer anderen Adresse zu notieren. Das aktuelle Dokument wird dabei zwar in den Browser geladen, doch dieser führt nach der angegebenen Anzahl Sekunden (im obigen Beispiel 3) einen automatischen Redirect auf die angegebene Adresse aus.

<meta http-equiv="cache-control" content="no-cache">  

Info Mithilfe dieser Angabe können Sie verhindern, dass ein aufrufender Browser das Dokument in seinem Browser-Cache speichert. Sie stellen stattdessen sicher, dass das Dokument bei jedem Aufruf neu vom Server übertragen werden muss. Sinnvoll ist dies vor allem bei Dokumenten, die sich sehr oft ändern, und vor allem bei serverseitig dynamisch erzeugten Dokumenten (also z.B. bei HTML-Output von PHP-Scripts).

<meta http-equiv="cache-control" content="maxage=86400">  

Info Auch diese Angabe beeinflusst das Cache-Verhalten des Browsers. Die maxage-Angabe legt fest, wie viele Sekunden (im Beispiel 86400, das entspricht einem Kalendertag) das Dokument höchstens im Cache verbleiben darf, bevor es bei einer neuen Anforderung neu vom Server übertragen werden muss. Sinnvoll ist eine solche Angabe z.B. für die Datei eines Newstickers, der einmal täglich aktualisiert wird.

Logische Verlinkung mit anderen Inhalten

Die logische Verlinkung mit anderen Seiten ist eines der spannendsten Hypertext-Features von HTML, obwohl sie immer noch viel zu selten auf Webseiten genutzt wird. Der Grund dafür ist, dass das entsprechende link-Element, das im Dateikopf notiert wird und verschiedenste Arten der Verlinkung erlaubt, lange Zeit von allen Browsern ignoriert wurde. Was um so erstaunlicher ist, als das Element ein Urgestein von HTML ist und seit den frühen 90er Jahren zum HTML-Standard gehört. Immerhin ist das link-Element vielen Autoren dadurch vertraut geworden, dass es die HTML-übliche Methode zum Einbinden externer Stylesheets ist. Doch das Element kann viel mehr und wer eine anwenderfreundliche Website anbieten will, sollte sich die Mühe machen, eine zusätzliche Navigation mithilfe des link-Elements zu realisieren. Das link-Element wird im Dateikopf, also zwischen <head> und </head> notiert. Ein erstes Beispiel:

<link rel="search" title="Suchen" href="/cgi-bin/suche.cgi">  

Info Das Beispiel verweist auf eine site-spezifische Suche. Browser, die das link-Element in der angedachten Weise interpretieren, bieten eine Navigationsleiste an, über die ein entsprechender Eintrag verfügbar ist. In welcher Weise die Navigation im Browser realisiert wird, ist nicht vorgeschrieben und produktspezifisch. Anwender, die sich an die Bedienung jedoch erst mal gewöhnen, wissen sie zu schätzen.

Aufbau von logischen Links

Betrachten wir das Markup von logischen Links genauer:

<link rel="search" title="Suchen" href="/cgi-bin/suche.cgi">  

Info Jeder logische Link wird durch ein <link>-Tag realisiert, das in HTML kein Abschluss-Tag hat. In XHTML muss daher am Ende die Zeichenfolge /> notiert werden. Links dieser Art haben stets drei Attribute. Mit dem Attribut rel= wird der Typ des Links bestimmt. Mit title= vergeben Sie die Beschriftung der Schaltfläche oder des Menüeintrags, die der Browser dem Anwender in der Navigation für diesen Link anbietet. Bei href= geben Sie die URL-Adresse an, die der Browser aufrufen soll, wenn der Anwender den Link auswählt. Es kann sich um Adressierungen wie http://mein.server.xy/irgendwo.html handeln, aber auch um lokale Adressierungen wie /irgendwo.html oder ../../irgendwo.html. Als Alternative zum rel-Attribut ist im HTML-Standard auch noch ein rev-Attribut für Rückverweise vorgesehen. Dies hat jedoch in der Praxis bislang keine Bedeutung.

Nützliche logische Links

Nachfolgend Beispiele für logische Links, die für viele Websites geeignet sind:

<link rel="contents" href="sitemap.htm" title="Inhalt">  

Info Mit rel="contents" verweisen Sie auf eine Seite innerhalb Ihres Projekts, die ein Inhaltsverzeichnis darstellt. Viele Sites, die kein zentrales Inhaltsverzeichnis im Stil eines Buches haben, bieten als Alternative eine so genannte Sitemap an.

<link rel="chapter" href="index.htm" title="Kapitel">  

Info Mit rel="chapter" verweisen Sie auf die Startseite eines Kapitels. Eine Kapitelunterteilung, die sich stark an der Buchmetapher orientiert, findet sich vor allem bei wissenschaftlich orientierten Webpublikationen oder bei technischen Dokumentationen im Web.

<link rel="index" href="stw.htm" title="Stichwörter">  

Info Mit rel="index" sollten Sie nicht, wie das Wort nahe legt, auf die Startseite der Website verweisen, sondern auf ein Begriffs- oder Stichwortverzeichnis oder zumindest auf irgendeine vergleichbare Art von alphabetisch oder anderweitig sortierter Übersicht mit anklickbaren Links.

<link rel="copyright" href="agb.htm" title="AGB">  

Info Mit rel="copyright" sollten Sie eigentlich auf eine Seite verweisen, die Angaben zum geistigen Schutz Ihrer Inhalte enthält. Da das Copyright im deutschen Recht allerdings ohnehin durch das Urheberrechtsgesetz klar geregelt ist, lässt sich der Copyright-Link auch „umbiegen“, um damit juristisch relevante Informationen zu verlinken, die je nach Webangebot im Gegensatz zum Urheberrechtshinweis explizit veröffentlicht werden müssen. So ist beispielsweise ein Shop-Betreiber verpflichtet, seine allgemeinen Geschäftsbedingungen (AGB) explizit auf seinen Webseiten abrufbar zu halten. Für diesen Zweck ist der logische Link im obigen Beispiel entfremdet worden.

<link rel="next" href="page-5.htm" title="nächste Seite">  <link rel="prev" href="page-3.htm" title="vorherige Seite">  <link rel="up" href="index.htm" title="nach oben">  <link rel="top" href="augsburg.htm" title="Homepage">  

Info Diese logischen Links ermöglichen dem Anwender ein bequemes Navigieren in der Hierarchie Ihres Webangebots. Mit rel="next" und rel="prev" können Sie in einer Serie von Seiten Verweise zum Vor- und Zurückblättern anbieten. Mit rel="up" verweisen Sie in Angeboten, die sich über mehrere logische Hierarchieebenen erstrecken, eine logische Ebene höher und rel="top" bietet sich zum Sprung auf die Projektstartseite an. Bei rel="top" scheiden sich allerdings die Geister – manche Anbieter nutzen diesen Link auch, um einfach auf der aktuell angezeigten Seite zum Anfang zurückzuspringen.

<link rel="alternate" href="en/index.htm" title="english">  

Info Mit rel="alternate" können Sie auf eine andere Version der aktuellen Seite verweisen. Ideal geeignet ist dieser Verweistyp, wenn Sie ein mehrsprachiges Webangebot haben. In diesem Fall können Sie auf eine anderssprachige Version der gleichen Seite verweisen. Es ist selbstverständlich erlaubt, logische Links bestimmter Typen mehrfach zu verwenden. Wenn Sie also beispielsweise auch französisch- und spanischsprachige Versionen der gleichen Seite anbieten, können Sie auch zwei oder drei Links der Sorte rel="alternate" anbieten. Wie ein Browser das an seiner Bedienoberfläche umsetzt, ist sein Problem, nicht Ihres. Ebenso wenig müssen Sie alle verfügbaren logischen Links einsetzen. Wenn Sie z.B. nur auf die Startseite und auf eine Sitemap-Seite verweisen wollen, spricht nichts dagegen.

Adressbasis für referenzierte Dateien

Eine weitere, mitunter nützliche Angabe im Kopf einer HTML-Datei ist die Adressbasis für referenzierte Dateien. Dazu ein Beispiel:

<head>  <base href="http://der.andere.server/bilder/">  <!-- ... andere Angaben im Dateikopf ... -->  </head>  

Info Mit dem base-Element können Sie zentral eine Adressbasis bestimmen. Wenn Sie nun im Dokument beispielsweise wie folgt eine Grafik referenzieren

<img src="bild001.gif" alt="Bild 1">  

dann berücksichtigt der Browser die angegebene Adressbasis und fordert das Bild von folgender Adresse an: http://der.andere.server/bilder/bild001.gif. Die zentral definierte Adressbasis gilt übrigens für alle im Dokument referenzierten Dateien.

Titel einer HTML-Datei

Ein HTML-Dokument (nicht XHTML!) benötigt nicht zwingend ein umschließendes html-Element, nicht mal ein head– oder body-Element. Aber ein title-Element ist immer vorgeschrieben, wenn gültiges HTML erzeugt werden soll. In der Praxis sollten Sie zwar niemals auf das html-, das head– und das body-Element verzichten, doch soll dieser Hinweis einfach verdeutlichen, welch große Bedeutung dem Titel des Dokuments beigemessen wird. Notiert wird er ganz einfach:

<title>Was auch immer</title>  

Da es sich um wichtigen sprachlichen Inhalt handelt, kann es nichts schaden, die Sprache mit anzugeben, z.B.:

<title lang="de">Was auch immer</title>  

Wenn Sie übrigens bei XHTML das lang-Attribut einsetzen wollen, notieren Sie stets folgende Doppelform:

<[elementname] lang="de" xml:lang="de">  

Die immense Bedeutung des Dokumenttitels ist einfach zu erklären:

  • Der Titel erscheint bei Aufruf des Dokuments bei den meisten Browsern in der Titelleiste.
  • Der Titel wird angeboten, wenn der User ein Bookmark/Favoriten auf die Seite setzt.
  • Der Titel erscheint in der History-Liste der bereits besuchten Webseiten im Browser.
  • Der Titel ist bei Suchmaschinen der anklickbare Verweistext, wenn die betreffende Seite dort als Treffer zu einer Suche aufgelistet wird.

Es lohnt sich also, dem Titel die nötige Aufmerksamkeit zu widmen. Da Websites ja in aller Regel aus einer Menge von einzelnen Seiten bestehen, die aber irgendwie zusammengehören und ein Ganzes bilden, liegt es nahe, sich ein einheitliches Schema für die Dokumenttitel der einzelnen Seiten zu überlegen. Es ist beispielsweise schlecht, wenn der Titel der Produktübersichtsseite „Firma XY: Produktübersicht“ lautet und der Titel der Kontaktübersichtsseite „Kontaktseite“. Sinnvoller wäre ein einheitliches Schema wie „XY: Produktübersichtsseite“ und „XY: Kontaktübersichtsseite“. Der Titel sollte nicht zu lang sein. Stellen Sie sich den Titel dazu am besten als Menüeintrag in den Favoriten des Safari oder als Eintrag in der als Sidebar zuschaltbaren Bookmark-Baumstruktur bei Browsern wie Firefox oder Opera vor.

Multimedia mit HTML

Objekt zum umgebenden Text

Da das object-Element ein Inline-Element ist, können Objekte mitten in einem Text platziert werden. Wenn das Objekt höher ist als die Zeilenhöhe, dann muss der Text der gleichen Zeile vertikal zum Objekt ausgerichtet werden. Wenn Sie nichts anderes angeben, wird der Text untenbündig zum Objekt ausgerichtet. Sie können jedoch mit Hilfe eines Attributs selbst bestimmen, wie der Text zum Objekt ausgerichtet werden soll. Dieses Attribut ist allerdings als deprecated gekennzeichnet und soll künftig aus dem HTML-Standard entfallen. Die gleiche Wirkung lässt sich nämlich auch mit Stylesheets erzielen. Die Angaben sind jedoch nur von Bedeutung, wenn die Anzeige mit Hilfe eines Plug-Ins erfolgt und direkt im Anzeigefenster des WWW-Browsers möglich ist.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>  <title>Text des Titels</title>  </head>  <body>  <h1>HIER SPIELT <object data="haste.mid" type="audio/x-midi" width="200" hight="100" align="middle">  Ihr Browser kann das Objekt leider nicht anzeigen!  </object>DIE MUSIK</h1>  </body>  </html>  

Info Mit dem Attribut align= können Sie umgebenden Text vertikal zum Objekt ausrichten (align = Ausrichtung).

  • Mit align="top" wird der Text obenbündig zum eingebundenen Objekt ausgerichtet (top = oben).
  • Mit align="middle" wird der Text mittig zum eingebundenen Objekt ausgerichtet (middle = mittig).
  • Mit align="bottom" wird der Text untenbündig zum eingebundenen Objekt ausgerichtet (bottom = unten).

Um Objekte und Texte sauber zueinander auszurichten, können Sie auch mit rahmenlosen („blinden“) Tabellen arbeiten.

  • Mit align="texttop" richten Sie den Text obenbündig zum Objekt aus, und zwar an der Oberkante des kleinsten Textes (texttop = oben am Text).
  • Mit align="absmiddle" richten Sie den Text absolut mittig zum Objekt aus, auch bei unterschiedlichen Textgrößen (absmiddle = absolute middle = in jedem Fall mittig).
  • Mit align="absbottom" richten Sie den Text untenbündig zum Objekt aus, und zwar an der Unterkante des kleinsten Textes (absbottom = absolute bottom = in jedem Fall untenbündig).
  • Mit align="baseline" richten Sie den Text genauso aus wie mit der Standardangabe align="bottom". Benutzen Sie deshalb besser die Standardangabe.

Text um ein Objekt fließen lassen

Objekte können Sie links oder rechts ausrichten. Der umgebende Text fließt dabei um das Objekt. Mit zwei weiteren Attributen können Sie Abstand zum umfließenden Text erzeugen, damit der Text nicht direkt am Objekt „klebt“. Den automatischen Textumfluss können Sie auch abbrechen und die Textfortsetzung unterhalb des Objekts erzwingen. Alle dazu notwendigen Attribute sind allerdings als deprecated gekennzeichnet und sollen künftig aus dem HTML-Standard entfallen. Die gleiche Wirkung lässt sich nämlich auch mit Stylesheets erzielen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html>  <head>  <title>Text des Titels</title>  </head>  <body bgcolor="#333333" text="#FFFFFF">  <h1><object classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000"   codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"   width="200" height="200" align="left" hspace="10" vspace="7">  <param name="movie" value="neucler.swf">  </object>Animation!</h1>  <p>Kann schön sein, wenn sie nicht zu aufdringlich ist.   Dies ist ein Flash-Filmchen von gerade mal einem Kilobyte Größe.  <br>  clear="all"></p>  <p>Der Text geht unterhalb weiter.</p>  </body>  </html>  

Info Mit den Angaben align="left" bzw. align="right" veranlassen sie den Browser, das objekt linksbündig bzw. rechtsbündig auszurichten und den darauffolgenden Fließtext rechts bzw. links neben dem Objekt anzuzeigen und um das Objekt herumfließen zu lassen (align = Ausrichtung, left = links, right = rechts). Der umgebende Text kann verschiedene Elemente enthalten, zum Beispiel auch überschriften oder Listen. Um Abstand zwischen Objekt und umfließendem Text zu erzeugen, stehen die Attribute hspace= und vspace= zur Verfügung.

  • Mit hspace= [Pixel] bestimmen Sie den Abstand zwischen Objekt und anderen Elementen links bzw. rechts davon (hspace = horizontal space = horizontaler Abstand). Mit vspace= [Pixel] bestimmen Sie den Abstand zwischen Objekt und anderen Elementen darüber bzw. darunter (vspace = vertical space = vertikaler Abstand).
  • Das Attribut hspace= betrifft immer den linken und den rechten Randabstand vom Objekt, vspace= immer den oberen und den unteren Randabstand. Wenn Sie also beispielsweise bei einem links ausgerichteten Objekt hspace= definieren, wird nicht nur rechts vom Objekt zum nebenstehenden Text ein Abstand erzeugt, sondern auch links zum Rand des Anzeigefensters hin. Um dies zu verhindern, können Sie exakter arbeiten, indem Sie Stylesheets verwenden.
  • Sie können beide Attribute notieren oder auch nur eines davon.

Um den automatischen Textumfluss zu unterbrechen und zu erzeugen, dass alles was folgt unterhalb des Objekts angezeigt wird, können Sie einen Zeilenumbruch mit dem Attribut clear= notieren.

  • Mit <br clear="all"> erreichen Sie, dass der Textfluss ab der nächsten Zeile in jedem Fall unterhalb des Objekts fortgesetzt wird.
  • Mit <br clear="left"> erreichen Sie, dass der Textfluss ab der nächsten Zeile in jedem Fall eines linksbündig ausgerichteten Objekts fortgesetzt wird.
  • Mit <br clear="right"> erreichen Sie, dass der Textfluss ab der nächsten Zeile unterhalb eines rechtsbündig ausgerichteten Objekts fortgesetzt wird.

Flash-Einbindung

Keine andere Technologie hat das Web in den letzten Jahren optisch nachhaltiger geprägt als der Siegeszug von Flash. Egal ob für Online-Spiele, animierte Illustrationen, schicke Site-Navigation oder Startseiten-Trailer eingesetzt: Flash hat in all diesen und anderen Bereichen konkurrierende Techniken wie Java-Applets oder auch DHTML verdrängt. Grund genug, die standardkonforme Einbettung eines Flash-Movies in HTML zu behandeln.

Flash-Dateien werden in HTML über das object-Element eingebunden.

<object type="application/x-shockwave-flash" data="/flash/intro.swf" style="width:740px; height:380px">  <param name="movie" value="/flash/intro.swf">  <param name="quality" value="high">  Sie benötigen einen Flash-Player als Browser-Plugin.  Ein solches Plugin bekommen Sie auf  http://www.macromedia.com/software/flashplayer/  </object>  

Info Möglicherweise sind Ihnen bereits wesentlich komplexere Quelltextkonstrukte zum Einbetten von Flash begegnet. Diese greifen beispielsweise zusätzlich auf das embed-Element zurück, ein nicht zum HTML-Standard gehörendes Element, das speziell Netscape 4.x bedienen soll. Das ganze HTML-Dokument wird dadurch syntaktisch invalid. Oder Sie haben im einleitenden <object>-Tag Attribute wie classid= und codebase= mit zum Teil merkwürdigen Wertzuweisungen gesehen.

Das oben vorgestellte, standardkonforme Quelltextkonstrukt

ist jedoch in heutiger Zeit völlig ausreichend und funktioniert mit allen verbreiteten Browsern. Im einleitenden <object>-Tag sind dabei zwei Attribute wichtig: type= muss notiert werden, um den Browser über eine Mime-Type-Angabe darüber zu informieren, welche Art von Daten das Objekt enthält. Der Mime-Type für Flash lautet application/x-shockwave-flash. Das Attribut data= ist ebenfalls wichtig und muss notiert werden, obwohl die Dateiquelle des Flash-Movies in einem <param>-Tag innerhalb des object-Elements nochmals referenziert wird. Anzugeben ist ein URI, also eine vollständige Internetadresse, oder eine lokale Referenz auf die swf-Datei oder die Datenquelle, welche den swf-Code sendet. Ähnlich wie beim img-Element sind beim object-Element die HTML-Attribute width= und height= erlaubt, um dem Browser die Pixelausmaße des einzubettenden Objekts vorab mitzuteilen. Diese können aber wie im Beispielcode gezeigt ebenso in CSS-Form angegeben werden. Als Elementinhalt von <object></object> können unter anderem alleinstehende <param>-Tags notiert werden (bei XHTML beachten: <param/>). Diese haben die obligatorischen Attribute name= und value=. Sie definieren Parameter, die an das aufgerufene Objekt übergeben werden. Bei Flash-Movies sollten auf jeden Fall die beiden im Beispiel gezeigten Parameter (name="movie" und name="quality") notiert werden. Beim movie-Parameter sollte als Wert nochmals der URI des Flash-Movies angegeben werden. Beim quality-Parameter empfiehlt sich die Standard-Wertzuweisung high. Das object-Element kann als Elementinhalt außerdem Text und andere Block- oder Inline-Elemente enthalten. Diese werden angezeigt, falls das Objekt nicht angezeigt werden kann. Im obigen Beispiel haben wir etwas Text notiert, der einen Anwender, bei dem das Flash-Movie nicht angezeigt werden kann, über die Möglichkeit aufklärt, wie er ein Plug-In erwerben kann.

Ohne Flash-Plug-In können Flash-Movies nicht im Browser angezeigt werden.

Die meisten Browser verfügen heute jedoch in der Standardinstallation bereits über ein entsprechendes Plug-In. Zum Erstellen von Flash-Movies benötigen Sie eine Flash-Autorensoftware. Das Produkt, welches Flash-Erfinder Macromedia selbst anbietet, ist bestens geeignet, aber auch nicht unbedingt preiswert. Es gibt jedoch preiswerte oder kostenlose Drittanbieter-Alternativen.

Flash ohne HTML

Da Flash vektororientiert ist und sich damit problemlos skalieren lässt, kann es beispielsweise für Produktpräsentationen, Spiele und Ähnliches auch sinnvoll sein, das Flash-Movie selbst anstelle eines HTML-Dokuments mit eingebettetem Flash-Movie aufzurufen. In einer vorgeschalteten Seite verlinken Sie dazu einfach die swf-Datei anstelle eines entsprechenden HTML-Dokuments, beispielsweise so:

<a href="produkt.swf" type="application/x-shockwave-flash">Produktpräsentation</a>  (Flash erforderlich!)  

Info Rückverweise zur übrigen Site sind innerhalb von Flash möglich.

Java-Applets einbinden

Java-Applets sind mittlerweile seltener im Web als vor dem Aufkommen von Flash. Dafür werden Java-Applets häufiger für seriösere und anspruchsvollere Zwecke genutzt, wie etwa Online-Banking, Online-Brokering und Online-Learning. HTML stellte zunächst ein separates applet-Element zum Einbinden von Java-Applets zur Verfügung. Heute gehört dieses Element noch zur Transitional-Variante von HTML 4.01. In der Strict-Variante ist es nicht mehr vorhanden und auch nicht mehr nötig. Das universeller konzipierte object-Element bietet stattdessen alles, was zum Einbinden von Java-Applets erforderlich ist. Da auch alle modernen Browser mit dieser Methode zurechtkommen, darf das applet-Element mittlerweile mit gutem Gewissen der Vergessenheit anheim fallen.

<object classid="java:Beispiel.class" codetype="application/java-vm" style="width:600px; height:400px">  Java erforderlich! Die Java-Runtime-Umgebung können Sie von  http://java.sun.com/ downloaden.  </object>  

Das object-Element kennen Sie bereits vom Abschnitt über die Einbindung von Flash. Im Fall von Java-Applets müssen im einleitenden <object>-Tag jedoch andere Attribute notiert werden. Erforderlich sind die Attribute classid= und codetype=. Beim classid-Attribut weisen Sie als Wert die Zeichenfolge java:, gefolgt vom Namen der class-Datei des Java-Applets zu. Dabei darf nur der reine Dateiname angegeben werden, keine Internetadresse oder Adressierung eines anderen Verzeichnisses. Sollte sich das Applet nicht im gleichen Verzeichnis befinden wie das HTML-Dokument oder auf einem ganz anderen Hostrechner liegen, benötigen sie zusätzlich das Attribut codebase=. Diesem Attribut weisen Sie als Wert den URI des Verzeichnisses zu, in dem die class-Datei liegt, also beispielsweise codebase="../classes/". Beim codetype-Attribut geben Sie den Mime-Type für den Objektcode des Java-Applets an. Dieser Mime-Type lautet standardmäßig application/java-vm. Parameter, die dem Java-Applet beim Start übergeben werden sollen, können über <param>-Tags notiert werden. Einem Applet, das z.B. einen Wert zu einem Parameter namens init_value erwartet, kann etwa Folgendes mitgeteilt werden:

<object...>  <param name="init_value" value="3">  </object>  

Multimedia einbinden

Unter Multimedia ist hier zu verstehen: Datendateien, die in Fremdformaten vorliegen und Ausgaben erzeugen, die über Text und www-gerechte Grafik hinausreichen. Also zum Beispiel Sound, Video, Animation, Tabellen, Präsentations,- Vektor- und CAD-Grafik, 3D-Grafik, VRML-Dateien usw.

Ein WWW-Browser kann solche Dateien anzeigen, wenn der Anwender ein entsprechendes Plugin installiert hat. Wenn das Plugin installiert ist, kann der WWW-Browser die Datei so in seinem Anzeigefenster präsentieren, wie sie von dem Ursprungsprogramm erstellt wurde. Bei Abspielvorgängen, etwa von Videos oder Sound, wird ein entsprechender Player angezeigt – je nachdem, wie das Plugin beschaffen ist. Wenn dem Browser eine Verknüpfung zwischen der Dateiendung und einem Fremdprogramm bekannt ist, kann er das Fremdprogramm mit der betreffenden Datei starten.

<embed src="tabelle.xls">  <embed src="../video.avi">  <embed src="multimedia/virtuelleWelt.wrl">  <embed src="http://www.netzwelt.com/yrag.mid">  <embed src="file://localhost/c:/windows/progman.hlp">  

Mit <embed src=> definieren Sie Plugin-Referenz (embed = einbetten, src = source = Quelle). Hinter dem Istgleichzeichen notieren Sie die gewünschte Datei. Die Angabe muß in Anführungszeichen stehen. Sie können auch Dateien in anderen Verzeichnissen und weltweit auf anderen Internet-Servern einbinden. Dabei gelten die gleichen Regeln wie beim Einbinden von Grafiken.

Ob und wie die Datei letztendlich beim Anwender „angezeigt“ wird,

hängt von vielen Faktoren ab, zum Beispiel von der Art der Datei, von den Hardware-Voraussetzungen des Anwenders, von den installierten Plugins und von vorhandenen, dem Browser bekannten Fremdprogrammen. Binden Sie Multimedia-Dateien daher niemals kommentarlos in Ihre HTML-Dateien ein, sondern weisen Sie den Anwender darauf hin, um welche Art von Daten es sich handelt, und unter welchen Voraussetzungen eine korrekte Anzeige möglich ist. Viele Multimedia-Dateien, vor allem Videos und 3D-Grafiken, sind vom Umfang her ungeeignet für die heutige üblichen Übertragungsraten im WWW. Wenn Sie größere Dateien einbetten, weisen Sie den Anwender im umgebenden Text auf die Größe der Datei hin. Bei Dateitypen, zu denen der Browser ein Plugin kennt, fragt er den Anwender, falls dieser das Plugin nicht hat, ob er das Plugin haben möchte, und ruft auf Wunsch die Übersichtsseiten auf dem WWW-Server auf, von wo aus der Anwender sich das Plugin downloaden kann.

Wenn der WWW-Browser die Datei nicht verarbeiten kann,

sollte er eine Fehlermeldung ausgeben und anstelle der Datei ein Symbol für nicht darstellbare Daten anzeigen. Wenn WWW-Browser auf einen Dateityp stößt, den er nicht unmittelbar verarbeiten kann, zu dem er aber eine Verknüpfung mit einem Fremdprogramm kennt, wird im Anzeigefenster an der Stelle, wo die Datei angezeigt werden soll, zunächst ein Icon des Fremdprogramms dargestellt, das beim Doppelklick das Programm mit der eingebundenen Datei startet. Sie können auch Verweise auf beliebige Dateien setzen. Der Unterschied ist, daß die Datei bei einem Verweis erst nach dem Anklicken des Verweises separat aufgerufen wird, während sie beim Einbinden der Multimedia-Datei so gut wie möglich direkt in die Bildschirmanzeige einer HTML-Datei integriert wird.

Eingebettete Objekte aller Art

Dieses Element ist so universell, dass sich damit jede beliebige Ressource einbinden lässt. So ist es auch schon absehbar, dass das img-Element in neueren XHTML-Versionen verschwindet. Grafiken werden dann ebenfalls über das object-Element referenziert. Das sieht beispielsweise so aus:

<object type="image/png" data="bild.png" style="width:354px; height:314px">  </object>  

Auch eine nackte Textdatei lässt sich über dieses Element einbinden.

<object type="text/plain" data="e-mail-thomas-003.txt" style="width:80%; height:300px; overflow:scroll">  </object>  

Info Wichtig sind im Zweifelsfall stets die Attribute data= zum Referenzieren der Quelle und type= zur Angabe des Mime-Type. Mit dem style-Attribut lässt sich der Anzeigebereich anpassen. Im Beispiel der referenzierten Textdatei haben wir eine Anzeigegröße vorgegeben und mit overflow:scroll sichergestellt, dass der Text, sofern er mehr Platz einnimmt, vom Anwender gescrollt werden kann. Typische, über das object-Element eingebundene Objekte sind auch Sounds und Video. In der Regel ist dazu jedoch eine Angabe zum classid-Attribut erforderlich, die ein bestimmtes Plug-In oder Abspielprogramm im Browser erzwingt, sowie die Angabe von <param>– Tags für Initialwerte. Für Standard-Software gibt es classid-Codes, die dem classid-Attribut zugewiesen werden können. Das folgende Beispiel bindet den Windows Media Player ein und übergibt ihm eine MP3-Datei zum Abspielen:

<object id="MediaPlayer" classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" type="application/x-oleobject"  style="width:300px; height:200px">  <param name="src" value="beispiel.mp3">  <param name="autoplay" value="false">  <param name="controller" value="true">  </object>  

Info Das Beispiel funktioniert in dieser Form jedoch nur im MS Internet Explorer, da die Einbettung über ein ActiveX-Control realisiert wird, eine bei anderen Browsern verpönte, weil für Sicherheitslücken anfällige Technologie. Zahlreiche andere Formate haben ihre eigene Syntax zum Einbetten. Dem Wildwuchs ist hier leider noch Tür und Tor geöffnet, da vernünftige Standards fehlen. Anbieter spezieller Techniken wie RealMedia (Audio- und Video-Streaming) und andere informieren auf ihren Seiten darüber, wie Sie solche Formate in HTML einbetten. In einigen Fällen sind zusätzlich Einstellungen oder Erweiterungen beim Webserver erforderlich.

SVG-Vektorgrafiken

Leider unterstützen selbst nach modernsten Kriterien entworfene Browser wie Firefox bis heute von Haus aus ausschließlich Pixelgrafikformate. Dabei ist Vektorgrafik für Anwendungsfälle wie Illustrationen, technische Zeichnungen, Logos, kunstvolle Schriftzüge usw. eindeutig besser geeignet als Pixelgrafik. In Verbindung mit Scriptsprachen ist auch die Darstellung von Animation und bewegten Abläufen möglich.

SVG (Scalable Vektor Graphics) ist ein in den letzten Jahren eigens für den Einsatz im Web entwickeltes Vektorgrafikformat. Die vektorgrafischen Informationen werden in XML-Form gespeichert. SVG ist also ein XML-Derivat. Es wird ebenso wie HTML und CSS vom W3-Konsortium als offen dokumentierter Standard spezifiziert und weiterentwickelt. Führende Vektorgrafikprogramme wie CorelDRAW oder Adobe Illustrator sind längst in der Lage, Daten als SVG-Grafik zu exportieren. Auch wenn SVG-Unterstützung der Browser noch lausig ist, so ist doch zu erwarten, dass sich die Situation noch verbessern wird, was sicherlich zu einer weiteren Verbreitung von SVG beitragen wird. In HTML können Sie eine SVG-Datei wie auch Flash und Java über das object-Element einbinden.

<object type="image/svg+xml" data="beispiel.svg" style="width:350px; height:176px">  SVG-Viewer erforderlich! Auf  http://www.w3.org/Graphics/SVG/SVG-Implementations  erhalten Sie Informationen über SVG-Implementierungen.  </object>  

Die SVG-Quelle wird im data-Attribut als URI referenziert. Das type-Attribut sollte unbedingt notiert werden und den Mime-Type image/svg+xml als Wert zugewiesen bekommen. Info Wenn Sie XHTML statt HTML verwenden, sind Sie bei SVG übrigens nicht auf die Referenzierung angewiesen. In diesem Fall können Sie über die Modularisierungsphilosophie von XML den SVG-Code direkt in den Quelltext integrieren. Dazu wird das einleitende <html>-Tag wie folgt erweitert:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">  

Es wird also zusätzlich zum Namensraum von XHTML derjenige von SVG deklariert. Der XML-Code des SVG-Dokuments kann nun an der gewünschten Stelle im Dokument wie im folgenden Minibeispiel integriert werden:

<svg:svg height="100px" width="100px">  <svg:rect x="0" y="0" width="100" height="100" fill="red" />  </svg:svg>  

Bei jedem SVG-Tag muss dazu das Präfix svg: notiert werden, da HTML als Default-Namensraum definiert wurde. In der Browser-Praxis ist dies jedoch noch weitgehend Zukunftsmusik, da für eine korrekte Interpretation der XML-Parser des Browsers benötigt wird.

Tabelle mit HTML

Aufbau einer Tabelle

HTML unterstützt alle wichtigen Features, um tabellarische Informationen auszuzeichnen. Tabellen haben in HTML freilich eine lange und bewegte Geschichte. Viel zu lange hatte das W3-Konsortium gar keine Tabellenauszeichnungen in HTML vorgesehen. Seit sich jedoch 1995 der revolutionäre Browser Netscape 1.1 über den damals aktuellen HTML-Standard 2.0 hinwegsetzte und erstmals Tabellen in HTML unterstützte, tat sich für all jene, die sich endlich mehr Freiheiten bei der Gestaltung von Webseiten wünschten, eine neue Tür auf. Vor allem die rahmenlosen Tabellen erlaubten es, Inhalte wie Navigation und Information attraktiv nebeneinander zu positionieren. Die so genannten Tabellenlayouts waren geboren. Ganze Webdesigner-Generationen lernten, ins HTML-Grundgerüst gleich mal ein paar verschachtelte Tabellen einzubauen, um so das gewünschte Basislayout zu bestimmen. Es gab sogar renommierte WYSIWYG-Editoren, die am Bildschirm ein Zentimeterraster darstellten, in dem der Designer seine Webseiteninhalte frei positionieren konnte. Intern wurde das Raster dann als komplexe Tabelle aufgelöst. Der dabei entstehende HTML-Code war für Menschen kaum noch genießbar und hatte mit der ursprünglichen Idee von HTML nicht mehr viel zu tun.

Aus moderner Sicht sind solche Art von Tabellenlayouts längst verpönt.

Es spricht zwar nichts dagegen, für nebeneinander darzustellende Informationen auch mal eine rahmenlose Tabelle zu verwenden, etwa, wenn ein Bild mit nebenstehendem Text dargestellt werden soll, oder ein Formular mit ordentlich untereinander stehenden Feldern und unterschiedlich langen Feldbeschriftungen davor. Doch Tabellen wie selbstverständlich als Basis für die grundsätzliche Informationsverteilung auf einer Seite einzusetzen, ist keine saubere Praxis mehr. Dazu gibt es mittlerweile in CSS die Möglichkeit, beliebige Elemente und Bereiche wie gewünscht zu positionieren und zueinander anzuordnen. Gewöhnen Sie sich also an, Tabellen nur für tabellarische Informationen zu verwenden und rahmenlose Tabellen für nebeneinander darzustellende Informationen nur für sinnvolle Einzelfälle innerhalb einer Webseite, jedoch nicht als Basis für das gesamte Seitenlayout.

Tabelle

Das nachfolgende Quelltextbeispiel zeigt eine kleine Tabelle:

<table border="1">  <caption>Vergleich von Äpfel und Birnen</caption>  <thead>  <tr>  <th>Äpfel</th>  <th>Birnen</th>  </tr>  </thead>  <tfoot>  <tr>  <td>beliebter</td>  <td>weniger beliebt</td>  </tr>  </tfoot>  <tbody>  <tr>  <td>12 Einheiten Vitamin C</td>  <td>5 Einheiten Vitamin C</td>  </tr>  <tr>  <td>regt die Verdauung an</td>  <td>wirkt entwässernd</td>  </tr>  </tbody>  </table>  

Info Eine vollständige Tabelle in HTML besteht aus einer Tabellenüberschrift, einem Tabellenkopf, einem Tabellenkörper und einem Tabellenfuß. Die gesamte Tabelle wird in die Tags <table> bzw. </table>eingeschlossen. Soll die Tabelle einen sichtbaren Rahmen und ein sichtbares Gitternetz haben, müssen Sie im einleitenden Tag das Attribut border="1" notieren (die Zahl steht für die Rahmendicke in Pixel; für dickere Rahmen können Sie also auch einen höheren Wert angeben). Fehlt dieses Attribut, bleiben alle Ränder der Tabelle unsichtbar. Die etwas klobig wirkende Default-Darstellung von Rahmen und Gitternetz im Browser, wie in der Abbildung zu sehen, können Sie später mithilfe von CSS beeinflussen. Betrachten wir nun den internen Aufbau der Tabelle. Die Tabellenüberschrift, markiert durch <caption></caption>, muss direkt innerhalb von <table></table>notiert werden, am besten direkt nach dem einleitenden <table>-Tag. Die Tabellenüberschrift kann Text und andere Inline-Elemente enthalten. Selbstverständlich lässt sie sich später mithilfe von CSS formatieren und auch im Verhältnis zur Tabelle genau ausrichten und positionieren. Die drei Bereiche für Tabellenkopf, Tabellenfuß und Tabellenkörper werden durch <thead></thead>, <tfoot></tfoot>und <tbody></tbody> markiert. Beachtenswert ist die Reihenfolge der Notation von Tabellenkopf, Tabellenfuß und Tabellenkörper in eben dieser Reihenfolge. Obwohl die Fußdaten am Ende der Tabelle erscheinen, müssen sie vor den Daten des Tabellenkörpers notiert werden!

Falls Sie eine Tabelle erstellen möchten,

dabei aber weder eine Tabellenüberschrift wünschen noch explizit zwischen Tabellenkopf, Tabellenfuß und Tabellenkörper unterscheiden möchten, können Sie beruhigt sein: Es ist durchaus erlaubt, all diese Elemente wegzulassen und nur die Elemente zum Definieren von Reihen und darin enthaltenen Zellen zu notieren. Bedenken Sie jedoch, dass vor allem im Fall von komplexen Tabellen, bei denen sich z.B. bereits der Kopfbereich über mehrere Zeilen erstreckt, die explizite Unterscheidung der Tabellenteile im Markup durchaus sinnvoll sein kann. Immerhin können Sie auch für diese Elemente eigene CSS-Formatierungen definieren. Noch wichtiger aber sind die entsprechenden Auszeichnungen in Hinblick auf eine rein akustische Ausgabe der Webseite, wie etwa stark Sehbehinderte sie zum Surfen im Web benutzen. Weiter unten werden wir noch genauer auf diese Problematik eingehen. Die Tabelle aus dem obigen Beispiel darf jedenfalls auch wie folgt aussehen und wäre dennoch korrektes HTML:

<table border="1">  <tr>  <th>Äpfel</th>  <th>Birnen</th>  </tr>  <tr>  <td>12 Einheiten Vitamin C</td>  <td>5 Einheiten Vitamin C</td>  </tr>  <tr>  <td>regt die Verdauung an</td>  <td>wirkt entwässernd</td>  </tr>  <tr>  <td>beliebter</td>  <td>weniger beliebt</td>  </tr>  </table>  

Info In dieser Variante der Tabelle fehlen die Auszeichnungen für Tabellenüberschrift, Tabellenkopf, Tabellenkörper und Tabellenfuß. Die semantische Information zum Tabellenfuß geht dabei komplett verloren. Die Tabellenzeile, die in der Variante zuvor als Tabellenfuß ausgezeichnet wurde, wird nun einfach unten als letzte Zeile notiert. Die Kopfinformationen sind dagegen erhalten geblieben, wofür das th-Element verantwortlich ist.

Doch der Reihe nach:

Tabelleninhalte werden in HTML Tabellenzeile für Tabellenzeile notiert. Jede Tabellenzeile wird durch <tr> eingeleitet und endet mit </tr>tr steht für table row (zu Deutsch: Tabellenzeile). Zwischen <tr> und </tr> werden jeweils die Spalten in der betreffenden Zeile notiert, also die Tabellenzellen dieser Tabellenzeile. Es gibt zwei Arten, nämlich Kopf- und Datenzellen. Kopfzellen werden durch <th></th>markiert und Datenzellen durch <td></td>. Dabei steht th für table head (zu Deutsch: Tabellenkopf) und td für table data (zu Deutsch: Tabellendaten). Mit thausgezeichnete Zellen werden in den meisten Browsern optisch anders dargestellt als td-Zellen – in der Regel erscheinen Kopfzellen zentriert und in Fettschrift, während Datenzellen linksbündig und mit normalem Schriftgewicht dargestellt werden. Auch hier gilt wieder: Stören Sie sich nicht an den Default-Formatierungen. Mithilfe von CSS werden Sie später alle Zellen, Zellen eines bestimmten Typs oder einzelne Zellen nach Wunsch formatieren, ausrichten usw. können. In unserem einfachen Beispiel enthalten die einzelnen Tabellenzellen für Kopfdaten und Tabellendaten nichts als kurzen Textinhalt. HTML-Tabellen sind jedoch sehr mächtig. Jede einzelne Tabellenzelle darf neben reinem Text auch beliebige Block– und Inline-Elemente enthalten, also strukturierte Bereiche, Überschriften, Listen und Textabsätze, Bild- und Multimediareferenzen und sogar komplette weitere Tabellen!

Erscheinungsbild von Außenrahmen und Gitternetz

Wenn Sie beispielsweise ein „offenes“ Gitternetz in Ihrer Tabelle wünschen, also ohne sichtbaren Außenrahmen, oder beispielsweise nur sichtbare Linien zwischen den Tabellenspalten, nicht aber zwischen den Zeilen, so stehen hierfür eine Reihe von HTML-Attributen zur Verfügung.

Um für eine Tabelle ein offenes Gitternetz ohne sichtbaren Außenrahmen zu definieren, notieren Sie im einleitenden <table>-Tag:

<table border="1" frame="void">  

Info Durch das Attribut frame= lässt sich eine Regel definieren, wie der Außenrahmen dargestellt werden soll. Mit der Wertzuweisung void wird der Außenrahmen komplett unterdrückt. Möglich sind aber auch die Wertzuweisungen above (Rahmen nur oben), below (Rahmen nur unten), hsides (Rahmen nur oben und unten), vsides (Rahmen nur links und rechts), lhs (Rahmen nur links) und rhs (Rahmen nur rechts). Um nur zwischen den Spalten der Tabelle sichtbare Linien darzustellen, nicht aber zwischen den Zeilen, können Sie notieren:

<table border="1" frame="void" rules="cols">  

Info Um zu definieren, welche Linien des Gitternetzes angezeigt werden sollen, dient das Attribut rules= im einleitenden <table>-Tag. Mit der Wertzuweisung cols bestimmen Sie, dass nur Linien zwischen Spalten angezeigt werden. Umgekehrt erreichen Sie mit dem Wert rows, dass nur Linien zwischen den Tabellenzeilen, nicht aber zwischen den Spalten angezeigt werden. Wenn Sie das Markup für Tabellenkopf, Tabellenfuß und Tabellenkörper vollständig notiert haben, ist außerdem noch der Wert groups zulässig. Damit werden nur waagerechte Linien zwischen den Teilen der Tabelle angezeigt. Die Abbildung zeigt, wie sich eine solche Beeinflussung der Liniendarstellung auswirkt. In diesem Fall haben wir folgende Angaben notiert:

<table border="1" frame="void" rules="groups">   

Info Die Darstellung im Browser hat nun das gewünschte Grundaussehen. Feinheiten der Formatierung wie Abstände innerhalb von Zellen usw. lassen sich nachträglich mit CSS realisieren.  

Die wichtigsten Elemente

Eine Tabelle in HTML setzt sich aus einer oder mehreren Tabellenzeilen und einer oder mehreren Tabellenzellen zusammen. Die folgende Abbildung zeigt eine Tabelle mit drei Reihen und vier Spalten (bzw. vier Zellen pro Reihe).

Beim Definieren einer Tabelle geht man sehr strukturiert vor. Zuerst wird das Grundgerüst der Tabelle eingeleitet. Nach dem Tabellenbeginn lässt sich noch eine Tabellenüber- oder -unterschrift zuweisen. Info In HTML werden Tabellen nach Zeilen beschrieben. Von oben nach unten werden die einzelnen Reihen und deren Zellen definiert. Für die Tabellenzellen stehen zwei Zellentypen zur Verfügung: Datenzellen und Kopfzellen. Der Unterschied zwischen den beiden besteht in der Darstellung. Text, der in Kopfzellen steht, wird in den Browsern meistens fett und zentriert dargestellt. Möchten Sie also die Tabelle in Abbildung 1 mittels HTML darstellen, müssen Sie zuerst die Tabelle einleiten, ihr eine Tabellenunterschrift zuweisen und die erste Reihe definieren, gefolgt von vier Tabellenzellen in der Reihenfolge „Fahrer/Strecke“, „Australien“, „Brasilien“ und „Malaysia“. Anschließend folgen die zweite und dritte Reihe, bei denen Sie exakt wie bei der ersten Reihe vorgehen, also immer mit der ganz linken Zelle beginnen und mit der ganz rechten Zelle aufhören. Info Beachten Sie: Tabellen werden immer von links nach rechts und von oben nach unten definiert. Welcher Inhalt in einer Tabellenzelle dargestellt wird, ist für die Definition unerheblich, sei es nun Text, eine Grafik oder gar ein Video.

Die wichtigsten Elemente

Die wichtigsten Elemente, die Sie für eine Tabelle benötigen, lauten:

  • table (dt. Tabelle) bildet das Grundgerüst einer jeden Tabelle und darf die Elemente tr und caption enthalten.
  • tr (table row, dt. Tabellenreihe) dient der Definition einzelner Tabellenreihen und darf nur die Elemente td und th enthalten.
  • td (table data, dt. Tabellendaten) das entsprechende Element für eine Datenzelle einer Tabelle; es darf verschiedene weitere HTML-Elemente enthalten.
  • th (table header, dt. Tabellenkopf) das Element zum Definieren einer Kopfzelle; es darf verschiedene weitere HTML-Elemente enthalten.
  • caption (dt. Titel) dient zur Definition einer Tabellenüber- oder -unterschrift.

Diese eben vorgestellten Elemente dürfen nur in einer bestimmten Reihenfolge verwendet werden. Abbildung 2 soll diese Rangordnung verdeutlichen. Die Zellen mit den drei Punkten stehen für verschiedene andere HTML-Elemente (auch weitere Tabellen). Um nun die Tabelle aus Abbildung 1 in HTML zu erstellen, leiten Sie mit dem Tag <table> das Grundgerüst der Tabelle ein. Als Nächstes folgt die Tabellenunterschrift, die Sie mit der Anweisung

<caption align="bottom">  Tabelle: Ergebnisse der ersten drei Rennen der Formel-1-Saison 2002  </caption>  

definieren. Ob die Tabellenbezeichnung über oder unter der Tabelle stehen soll, legen Sie mit dem align-Attribut und dem Parameter top oder bottom fest. Standardmäßig wird die Bezeichnung über der Tabelle dargestellt. Sie müssen das Attribut align also nur dann an caption übergeben, wenn Sie die Bezeichnung unter der Tabelle darstellen möchten. Nach der Überschrift definieren Sie die erste Tabellenreihe und notieren die vier Zellen. Da es Kopfzellen sind, verwenden Sie das th-Element. Die entsprechende Anweisung lautet dann folgendermaßen:

<tr>  <th>Fahrer/Strecke</th>  <th>Australien</th>  <th>Brasilien</th>  <th>Malaysia</th>  </tr>  

Die zweite Reihe unterscheidet sich von der ersten durch den Textinhalt und die verschiedenen Zellentypen. Sie benötigen eine Kopf- und drei Datenzellen.

<tr>  <th>M. Schumacher</th>  <td>1. Platz</td>  <td>3. Platz</td>  <td>1. Platz</td>  </tr>  

Die dritte Reihe entspricht prinzipiell der zweiten, nur dass sie andere Texte enthält.

<tr>  <th>R. Barrichello</th>  <td>Unfall</td>  <td>Motorschaden</td>  <td>Hydraulikschaden</td>  </tr>  

Zum Schluss beenden Sie die Tabellendefinition mit dem Tag </table>. Das vollständige HTML-Dokument finden Sie in Code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <!-- Tabellen -->  <html>  <head>  <title>Die wichtigsten Elemente</title>  </head>  <body>  <table>  <caption align="bottom">  Tabelle: Ergebnisse der ersten drei Rennen der Formel-1-Saison 2002  </caption>  <tr>  <th>Fahrer/Strecke</th>  <th>Australien</th>  <th>Brasilien</th>  <th>Malaysia</th>  </tr>  <tr>  <th>M. Schumacher</td>  <td>1. Platz</td>  <td>3. Platz</td>  <td>1. Platz</td>  </tr>  <tr>  <th>R. Barrichello</th>  <td>Unfall</td>  <td>Motorschaden</td>  <td>Hydraulikschaden</td>  </tr>  </table>  </body>  </html>  

Das Ergebnis im Browser sieht noch nicht berauschend aus. Die einzelnen Zellen sind nur sehr schwer voneinander zu unterscheiden. Ein Rahmen könnte Abhilfe schaffen.

Größe, Rahmen und Abstände

Für die optische Gestaltung einer Tabelle stellt HTML verschiedene Attribute zur Verfügung. Die wichtigsten lauten:

  • border (dt. Rahmen) legt die Dicke des Tabellenrahmens mit dem angegebenen Wert in Pixeln fest.
  • width (dt. Breite) legt die Breite der Tabelle oder Zelle fest. Sie können sowohl eine prozentuale als auch eine pixelgenaue Angabe machen. Die prozentuale Angabe orientiert sich immer an der Breite des Browserfensters. Um eine solche Angabe zu verwenden, müssen Sie hinter den Wert das Zeichen % (Prozent) notieren. Für Pixelangaben notieren Sie lediglich die gewünschte Breite ohne weitere Zeichen.
  • height (dt. Höhe) legt die Höhe der Tabelle oder Zelle fest. Die möglichen Angaben entsprechen denen des Attributs width. Anzumerken ist hier, dass das Attribut im offiziellen HTML-Standard für die Höhe der gesamten Tabelle zulässig ist. Erfahrungsgemäß kann man allerdings ohne Probleme damit arbeiten weil es von allen Browsern unterstützt wird. Sollten Sie eine Datei mit einer Höhenangabe für eine Tabelle mal validieren lassen, wird sich der Validator allerdings darüber beschweren.
  • cellpadding (dt. Zellenpolster) definiert den Abstand zwischen dem Zellenrand und dem Zelleninhalt. Angaben erfolgen in Pixel oder zusätzlichen Zeichen.
  • cellspacing (dt. Zellenabstand) mit ihm können Sie den Abstand zwischen den Zellen festlegen. Auch hier erfolgen Angaben in Pixel.

Mit diesen neuen Attributen passen Sie nun das Code an, um dem gewünschten Ergebnis näher zu kommen (Abbildung 1). Da Sie die Zellen nicht alle einzeln verändern möchten, übergeben Sie die Werte im Start-Tag des table-Elements. Den Tabellenrahmenverändern Sie auf 1 Pixel Breite, die Breite der Tabelle auf 75 % (des Browserfensters), die Höhe auf 25 % (des Browserfensters), den Zellenabstand auf 1 Pixel und den Innenabstand der Zellen auf 2 Pixel. Das veränderte Start-Tag lautet dann:

...  <table border="1" width="75%" height="25%" cellspacing="1" cellpadding="2">  ...  

Die Darstellung in Abbildung 4 entspricht schon viel eher der Referenztabelle aus Abbildung 1.

Elemente positionieren

In einem Layoutprogramm wie Adobe InDesign oder Quark XPress ziehen Sie Absätze und Bilder einfach an die Stellen, an die Sie sie haben möchten. Ähnlich läuft das Zeichnen von Folien in Microsoft PowerPoint oder in Open Office Impress. Im Web, das heißt mit HTML und CSS, ist die Sache nicht ganz so einfach. Zwar wollen viele WYSIWYG-Editoren wie Macromedia Dreamweaver oder Microsoft FrontPage diesen Eindruck erwecken, aber er täuscht.

Ursprünglich gab es zum Positionieren in HTML nur einen Trick: Tabellen – eigentlich zur Datenpräsentation gedacht, lassen sie sich ohne Rahmen und Abstände zum Platzieren von Elementen verwenden. Eine echte Positioniermöglichkeit kam erst in CSS hinzu. Allerdings ist sie in älteren Browsern, vor allem dem Netscape Navigator 4.x, zumindest problematisch und nach wie vor eine aufwändige Angelegenheit. Beide Varianten lernen Sie in diesem Artikel kennen. Wenn Sie Tabellen zum Positionieren verwenden möchten, müssen Sie nur wissen, dass Sie die Breite und Höhe von Tabellenzellen angeben können. Damit lässt sich dann eine Layouttabelle basteln.

Unsichtbar

Wichtigste Voraussetzung für eine Tabelle zum Positionieren ist, dass der Nutzer sie nicht sehen kann. Und tatsächlich, wenn Sie sich den Quellcode verschiedenster Websites ansehen, finden Sie meist eine Tabelle und dort immer die Angabe border="0". Eine rahmenlose Tabelle reicht allerdings zum pixelgenauen Platzieren nicht. Sie müssen auch die Zellenabstände entfernen:

<table border="0" cellpadding="0" cellspacing="0">  

Den Rest erledigen die Größenangaben. Wollen Sie z.B. ein Bild um 100 Pixel nach rechts und um 100 Pixel nach unten auf der Seite platzieren, verwenden Sie eine solche Tabelle:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- tabellen_posi.html -->  <html>  <head>  <title>Positionieren mit Tabellen</title>  </head>  <body>  <table>  <tr>  <td width="100" height="100"></td>  <td></td>  </tr>  <tr>  <td> </td>  <td>  <img src="vogel.png" alt="Echter Vogel zwischen gusseisernen Vögeln auf einem Denkmal." title="Vogel auf Denkmal" />  </td>  </tr>  </table>  </body>  </html>  

Abstand zum Fensterrand

Wenn Sie im letzten Abschnitt genau hingeschaut haben, konnten Sie sehen, dass das Bild nicht exakt auf 100 Pixel positioniert ist, sondern ein wenig weiter in das Fenster hineinragt. Dies liegt daran, dass Browser automatisch einen Seitenrand in ihrem Fenster vergeben. Da dieser nicht unbedingt einheitlich festgelegt ist und beim akkuraten Positionieren nur stört, sollten Sie ihn loswerden. Dafür gibt es zwei Methoden:

  • Per CSS, wenn Sie für das <body>-Tag die Werte 0 für margin und padding vergeben.
  • Per HTML mit den offiziell nicht vorgesehenen Attributen leftmargin="0" und topmargin="0" für den Internet Explorer und marginwidth="0" und marginheight="0" für alle anderen Browser.

Die reine CSS-Variante können Sie verwenden, wenn Sie auf den Netscape Navigator 4.x verzichten. Beim Einsatz von stark abwärtskompatiblen Tabellen ist die HTML-Variante zu bevorzugen. Hier ein Beispiel, in dem ein Bild wirklich exakt im oberen Eck des Browserfensters platziert wird:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- fensterabstand.html -->  <html>  <head>  <title>Fensterabstand</title>  </head>  <body leftmargin="0" topmargin="0" marginwidth="0" margin-height="0">  <div><img src="vogel.png" alt="Echter Vogel zwischen gusseisernen Vögeln auf einem Denkmal." title="Vogel auf Denkmal" /></div>  </body>  </html>  

Zentrieren

Wenn Sie aber eine komplette Tabelle zentrieren oder rechtsbündig ausrichten möchten, können Sie dazu align verwenden. Mit diesem einfachen Trick erreichen Sie ein komplett zentriertes Layout:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- tabellen_zentrieren.html -->  <html>  <head>  <title>Positionieren mit Tabellen</title>  </head>  <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">  <table border="0" cellpadding="0" cellspacing="0" width="300" align="center" style="background-color: #BBBBDD">  <tr>  <td style="text-align: center">Der Vogelzüchterverein</td>  </tr>  <tr>  <td style="text-align: center">  <img src="vogel.png" alt="Echter Vogel zwischen gusseisernen Vögeln auf einem Denkmal." title="Vogel auf Denkmal" /></td>  </tr>  </table>  </body>  </html>  

Komplettes Layout

Natürlich ist jedes Seitenlayout individuell. Dennoch haben sich im Web schon einige Gemeinsamkeiten herausgebildet. z.B. ist die Navigationsleiste meist links oder oben und Kopf- bzw. Fußzeile sind sehr üblich geworden. Dementsprechend gibt es einige Grundlayouts. Eines davon finden Sie hier als praktisches Beispiel für eine komplette Lösung:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- tabellen_layout.html -->  <html>  <head>  <title>Layout mit Tabellen</title>  </head>  <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">  <table border="0" cellpadding="0" cellspacing="0" width="100%">  <tr>  <td colspan="2" height="100" style="background-color: yellow;">Kopfzeile</td>  </tr>  <tr>  <td width="150" height="500" style="background-color: red;">Navigation</td>  <td style="background-color: blue;">Inhalt</td>  </tr>  <tr>  <td colspan="2" height="60" style="background-color: yellow;">Fußzeile</td>  </tr>  </table>  </body>  </html>  

Info Wenn Sie ein eigenes Layout entwickeln, gibt es zwei Möglichkeiten: Entweder zeichnen Sie sich die Tabelle auf und bauen sie dann Schritt für Schritt. Oder Sie nehmen den vorliegenden Code oder einen anderen Code und ändern ihn. Ersteres liefert meist bessere Resultate, Letzteres geht schneller.

Farben und Schrift

Tabellen lassen sich natürlich auch in HTML farblich gestalten. Der Text des Inhalts kann über das font-Element oder über CSS formatiert werden. Dabei entsprechen die Regeln denen von Textabsätzen und Überschriften. Aber auch die Hintergrundfarbe einer Tabelle lässt sich verändern. Dafür wird das Attribut bgcolor verwendet.

Tabellenhintergrund

Um die Hintergrundfarbe einer ganzen Tabelle festzulegen, wird im Start-Tag des table-Elements das bgcolor-Attribut notiert. Als Parameter für dieses Attribut können Sie entweder eines der Farbworte oder einen Hex-Tripel-Wert angeben. Möchten Sie beispielsweise die Hintergrundfarbe einer Tabelle blau färben, müsste die Anweisung mittels Farbwort folgendermaßen lauten:

<table bgcolor="blue">  <!-- blauer Tabellenhintergrund -->  

Bei einem Hex-Tripel-Wert für ein dunkles Blau (#003399) lautet die Anweisung:

<table bgcolor="#003399">  <!-- dunkelblau -->  

Zellenhintergrund

Wenn Sie nicht der gesamten Tabelle eine Hintergrundfarbe zuweisen möchten, stehen Ihnen noch zwei weitere Möglichkeiten offen: die Anpassung einer ganzen Tabellenzeile oder einer einzelnen Zelle. Das Attribut bgcolor wird dabei jeweils im Start-Tag des tr-, td– oder th-Elements notiert. Natürlich können Sie sowohl Farbworte als auch Hex-Tripel-Werte angeben. Einige Beispiele:

<tr bgcolor="red">  <!-- ganze Zeile rot -->    <td bgcolor="yellow">  <!-- nur die Zelle gelb -->    <th bgcolor="#009900">  <!-- nur die Zelle grün -->  

Info Achten Sie bei der Farbwahl auch immer auf die Farbe des Textes. So ist eine schwarze Schrift auf einem dunkelblauen Hintergrund nur sehr schwer bis gar nicht zu lesen. Sie sollten auf Farbkombinationen wie rote Schrift auf blauem Hintergrund ebenso verzichten wie auf zu viele Farben. Hier gilt die Devise: Weniger ist mehr. In der Praxis haben sich gediegene Farben sehr bewährt. Auch sollten Sie nicht unbedingt mehr als zwei, maximal drei Farben für die Hintergründe von Tabellen, Zeilen und Zellen verwenden, denn sie sollen der Übersicht und nicht zum Abschrecken der Besucher dienen.

Schriftformatierung

Für die Formatierung der Schrift innerhalb einer Zelle kann das font-Element verwendet werden. Ich möchte Ihnen an dieser Stelle nur ein paar Beispiele anführen:

<td><font face="monospace">Courier New</font></td>  <th><font size="5">Schriftgröße 5</font></th>  

Info Nun wäre es sehr mühselig, jede einzelne Zelle mit dem font-Element zu formatieren, vor allem, da spätere Änderungen an der Farbe des Textes oder der Schriftart gerade bei großen Tabellen sehr zeitaufwändig sind. Sie können eine Tabelle oder Zeile jedoch auch im Gültigkeitsbereich eines font-Elements notieren. Somit wird der gesamte Text der Tabelle oder Zeile in der definierten Formatierung dargestellt.

<font face="sans-serif">  <table border="1">  <tr>  <th>Kopfzelle 1</th>  <th>Kopfzelle 2</th>  </tr>  <tr>  <td>Datenzelle 1</td>  <td>Datenzelle 2</td>  </tr>  </table>  </font>  

Bei dieser Vorgehensweise kann es Ihnen allerdings passieren, dass einige ältere Browser nicht mitspielen. Diese neigen dazu, die Schriftart in den Zellen wieder auf die Standardeinstellung des Browsers zu setzen. Daher würde ich Ihnen empfehlen, Tabellen mithilfe von CSS zu formatieren.

Farb- und Schriftbeispiel

Für das folgende Beispiel habe ich mich auf Grautöne beschränkt.

Features für die nicht visuelle Darstellung von Tabellen

Auch sehbehinderte Menschen nehmen am Informationsangebot im Web teil. Wenn die Sehbeeinträchtigung so stark ist, dass auch Lupen und Lichtverstärkung nichts mehr nutzen oder zu schnell ermüden, dann greifen solche Benutzer häufig zu Browser-Tools, die Webseiten mit synthetischer Stimme vorlesen, statt sie am Bildschirm anzuzeigen.

Wie Sie sicher bemerkt haben, muss man beim Notieren der einzelnen Zellen einer Tabelle im HTML-Quelltext gut mitdenken. Bei größeren Tabellen und umfangreichen Zelleninhalten kann auch schnell mal die Übersicht verloren gehen. Genau das gleiche Problem besteht, wenn Tabelleninhalte vorgelesen werden. Dabei geht nämlich der eigentliche Segen von Tabellen, also die übersichtliche Darstellung auf einen Blick, verloren. Stattdessen müssen die Zelleninhalte im Zeitkontinuum vermittelt werden. Vorgelesen werden die Zelleninhalte dabei so, wie sie im HTML-Quelltext stehen, also Tabellenzeile für Tabellenzeile. Doch wie erfährt ein Zuhörer, welche Inhalte zum Tabellenkopf gehören und welche zum Tabellenkörper? Oder wann sich eine Zelle über mehrere Spalten oder Zeilen erstreckt? Für diese Probleme stellt HTML eine Reihe von Attributen zur Verfügung. Wie die darin enthaltenen Informationen in einer nicht visuellen Repräsentation der Tabelle tatsächlich umgesetzt werden (z.B. durch eine zweite Stimme, die nur solche Meta-Informationen ausgibt, während die Hauptstimme die Tabellennutzdaten vorliest), ist Sache der verwendeten Software. Als HTML-Autor können Sie jedoch die erforderlichen Meta-Daten notieren.

Da das Vorlesen umfangreicher Tabellen etwas länger dauert, ist es sinnvoll,

den Zuhörer darauf vorzubereiten und ihm vorweg eine kurze Zusammenfassung des Tabelleninhalts zu geben. Dazu stellt HTML das Attribut summary= für das einleitende <table>-Tag zur Verfügung. Ein Beispiel:

<table border="1"  summary="Es folgt eine Kreuztabelle mit Entfernungen zwischen großen deutschen Städten. Die Tabelle hat 25 Zeilen und 25 Spalten.">  

Info Auch für einzelne Tabellenzellen lässt sich eine zusammenfassende Kurzbeschreibung notieren. Das bietet sich an, wenn die Inhalte der Zellen selbst recht lang und komplex sind. Auch hierzu ein Beispiel:

<td abbr="Zeile 4 Spalte 8, Informationen zu den Lotto-Einnahmen des Bundeslandes Niedersachsen der letzten 10 Jahre">  

Info Das Attribut abbr= können Sie in einleitenden <td>– oder <th>-Tags notieren. Beim Vorlesen des Tabelleninhalts sollte eine entsprechende Software diese Kurzbeschreibungen mit ausgeben.

Besonders problematisch bei der zeilenweisen akustischen Präsentation von Tabellen

ist die Zuordnung von Spalteninhalten zur zugehörigen Spaltenüberschrift. Auch dazu bietet HTML einen Mechanismus an. In den Spaltenüberschriften (Kopfdaten) erhält jede Zelle einen eindeutigen id-Namen. Die Datenzellen der jeweiligen Spalten können dann auf diese id-Namen Bezug nehmen. Ein einfaches Beispiel:

<table border="1">  <tr>  <th id="Mo">Montag</th>  <th id="Di">Dienstag</th>  <th id="Mi">Mittwoch</th>  </tr>  <tr>  <td headers="Mo">Hühnerfrikassee mit Gemüsereis</td>  <td headers="Di">Rostzwiebelbraten mit Pommes Frites</td>  <td headers="Mi">Allgäuer Käsespätzle</td>  </tr>  </table>  

Info In den Kopfzellen <th>, von denen jede eine Spaltenüberschrift darstellt, wird ein id-Attribut notiert. Dies ist eigentlich ein Allgemein-Attribut, das jedem HTML-Element zugewiesen werden kann. Wichtig ist, dass die Wertzuweisung ein dokumentweit eindeutiger Name ist. Im Beispiel sind es Abkürzungen für Wochentage. Der Bezug zu den Spaltenüberschriften kann dann in den Datenzellen <td> über das Attribut headers=hergestellt werden.

Falls Sie eine Kreuztabelle definieren,

also eine Tabelle, bei der sowohl die erste Zeile als auch die erste Spalte Kopfdateninformationen enthält und jede Datenzelle eine Schnittinformation aus den jeweiligen Zeilen-/Spaltenkoordinaten darstellt, können Sie auch bei den Zeilenüberschriften id-Attribute notieren. In den Datenzellen können Sie dann beim headers-Attribut beide id-Namen angeben, durch Leerzeichen getrennt. Einen noch einfacheren Weg, Kopfzelleninformation in Datenzellen zu wiederholen, bietet das scope-Attribut an. Ein Beispiel:

<table border="1">  <tr>  <th scope="col">Montag</th>  <th scope ="col">Dienstag</th>  <th scope ="col">Mittwoch</th>  </tr>  <tr>  <td>Hühnerfrikassee mit Gemüsereis</td>  <td>Rostzwiebelbraten mit Pommes Frites</td>  <td>Allgäuer Käsespätzle</td>  </tr>  </table>  

Info Bei dieser Variante wird in den Kopfzellen <th> das Attribut scope= notiert. Falls es sich um Spaltenüberschriften handelt, wie im Beispiel, muss scope="col" notiert werden. Falls es sich um Zeilenüberschriften handelt, lautet die Angabe scope="row". Auch die Angaben scope="colgroup" (bei Spaltengruppen) und scope="rowgroup" (für Tabellenkopf, Tabellenkörper und Tabellenfuß) sind zulässig. Akustische Ausgabesysteme sollten bei Verwendung des scope-Attributs den Zelleninhalt der zugehörigen Kopfzelle bei jeder Datenzelle wiederholen, um den Bezug transparent zu machen.

Positionieren mit CSS

Sie können mit CSS dasselbe erreichen wie mit Tabellen. Der Weg dorthin ist unter Umständen etwas schwieriger, vor allem wenn Sie Tabellen schon kennen. Außerdem sind ältere Browser wie der Netscape Navigator 4.x nur schwer mit einem solchen Layout zum Arbeiten zu bewegen.

Die Vorteile eines CSS-Layouts sind allerdings auch vielfältig: Sie trennen das Layout besser vom Inhalt. Außerdem ist ein CSS-Layout behindertengerecht. Hierfür steht der Begriff Accessibility (dt. Zugänglichkeit). Ein Tabellenlayout ist in dieser Hinsicht nicht so gut, da z.B. Screenreader, die eine Website vorlesen, in Layouttabellen schnell durcheinander kommen.

Absolut und relativ

Die Positionierung mit CSS kann auf verschiedene Arten erfolgen. Welche Art Sie verwenden möchten, entscheiden Sie mit dem CSS-Befehl position. Diese Werte stehen zur Wahl:

  • absolute positioniert absolut. Sie geben einen Pixelwert für top (y-Koordinate) und für left (x-Koordinate) an. Die Positionierung erfolgt relativ zum übergeordneten Element, das heißt relativ zu dem Blockelement, in dem ein Element verschachtelt ist. Befindet sich ein Element auf der obersten Ebene, wird absolut zur linken oberen Ecke des Browserfensters positioniert.
  • relative positioniert relativ zur Position eines Elements im normalen HTML-Fluss. Auch hier geben Sie top (y-Koordinate) und left (x-Koordinate) an, allerdings sind die Angaben dann relativ zum vorangegangenen Element zu verstehen.
  • fixed fixiert ein Element an einer Position wie bei der absoluten Positionierung. Allerdings bewegt sich das Element beim Scrollen nicht mit. Dies wird aber nicht von allen Browsern unterstützt.
  • static ist die normale Positionierung im HTML-Fluss. Dieser Wert muss nicht angegeben werden.

In der Praxis kommen absolute und relative Positionierung zum Einsatz. Der Nachteil der absoluten Positionierung ergibt sich aus ihrem wichtigsten Vorteil: Dadurch, dass Sie die Elemente exakt platzieren können, sind sie auch völlig unabhängig voneinander. Sie können sich also auch bei größeren Inhalten einfach überlappen. Bei der relativen Positionierung kann das nicht passieren. Dafür haben Sie keine exakte Kontrolle über die Koordinaten eines Elements, da es ja von anderen abhängig ist. Sehen Sie sich dazu jeweils ein Beispiel an. Zuerst Schritt für Schritt die absolute Positionierung:

  • 1. Erstellen Sie zwei <div>-Blöcke.

Sie können auch andere Elemente absolut positionieren. In der Praxis werden allerdings sehr oft <div>-Blöcke verwendet, da sie selbst nicht formatieren.

  • 2. Vergeben Sie für die <div>-Blöcke jeweils eine ID, damit Sie sie per Style Sheet ansprechen können.
<div id="absatz1">Ein Absatz, der positioniert wird.</div>  <div id="absatz2">Noch ein Absatz, der positioniert wird.</div>  
  • 3. Erstellen Sie ein Style Sheet im Kopf der Seite.
  • 4. Greifen Sie auf die zwei IDs zu.
#absatz1 {  }  #absatz2 {  }  
  • 5. Vergeben Sie für beide Bereiche eine Größe von 200 * 300 Pixel und jeweils eine Hintergrundfarbe.
  • 6. Positionieren Sie den ersten Bereich absolut auf 50 und 100 Pixel.
#absatz1 {  width: 200px; height: 300px;  background-color: red; position: absolute;  top: 50px; left: 100px;  }  
  • 7. Den zweiten Bereich positionieren Sie nach demselben Muster auf 150 und 200 Pixel.

Hier der Code in der Übersicht:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- css_absolute.html -->  <html>  <head>  <title>Positionierung mit CSS</title>  <style type="text/css"><!--  #absatz1 {  width: 200px; height: 300px;  background-color: red; position: absolute;  top: 50px; left: 100px;  }  #absatz2 {  width: 200px; height: 300px;  background-color: yellow; position: absolute;  top: 150px; left: 200px;  }  --></style>  </head>  <body>  <div id="absatz1">Ein Absatz, der positioniert wird.</div>  <div id="absatz2">Noch ein Absatz, der positioniert wird.</div>  </body>  </html>  

Nun ändern Sie zum Vergleich nur die absolute Positionierung in die relative. Die geänderten Stellen sind hervorgehoben:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- css_relative.html -->  <html>  <head>  <title>Positionierung mit CSS</title>  <style type="text/css"><!--  #absatz1 {  width: 200px; height: 300px;  background-color: red; position: relative;  top: 50px; left: 100px;  }  #absatz2 {  width: 200px; height: 300px;  background-color: yellow; position: relative;  top: 150px; left: 200px;  }  --></style>  </head>  <body>  <div id="absatz1">Ein Absatz, der positioniert wird.</div>  <div id="absatz2">Noch ein Absatz, der positioniert wird.</div>  </body>  </html>  

Sie sehen im Ergebnis, dass der zweite Absatz nun am ersten orientiert verschoben wird.

Überlappung

Wenn sich Elemente überlagern, liegt immer das Element oben, das zuletzt im HTML-Quelltext steht. Im Beispiel aus dem letzten Abschnitt ist das der zweite Absatz. Sie können allerdings auch explizit festlegen, auf welcher Ebene ein Element liegt. Dafür dient der z-index. Als Wert geben Sie eine ganze Zahl an. Das Element mit der höheren Zahl liegt oben – bei gleicher Zahl entscheidet wieder die Reihenfolge im Quellcode. Der folgende Code vertauscht die Rangfolge für die zwei Absätze:

#absatz1 {  width: 200px; height: 300px;  background-color: red; position: absolute;  top: 50px; left: 100px; z-index: 2;  }  #absatz2 {  width: 200px; height: 300px;  background-color: yellow; position: absolute;  top: 150px; left: 200px; z-index: 1;  }  

Zentrieren

Elemente mit CSS zu zentrieren ist ein wenig schwieriger als mit einer Tabelle. Wobei schwierig wohl nicht das richtige Wort ist. Die Wahrheit ist, dass der Trick nicht weithin bekannt ist. Zum Zentrieren verwenden Sie für margin-left und margin-right jeweils den Wert auto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- css_zentrieren.html -->  <html>  <head>  <title>Positionierung mit CSS</title>  <style type="text/css"><!--  body {  margin: 0px; padding: 0px;  }  #absatz1 {  width: 400px; height: 200px;  background-color: red;  margin-left: auto; margin-right: auto; z-index: 2;  }  --></style>  </head>  <body>  <div id="absatz1">Ein zentrierter Absatz.</div>  </body>  </html>  

Komplettes Layout

Für ein komplettes Layout mit CSS müssen Sie alle gewünschten Bereiche der Seite als <div>-Blöcke anlegen. Dann ist allerdings nichts mehr völliger Standard. Es gibt verschiedene Techniken, die Elemente anzuordnen. Die vertikale Anordnung erfolgt bei absoluter Positionierung und fester Angabe der Höhe mit festen Abständen. Für die Positionierung der Navigationsleiste verwendet das folgende Beispiel einen Trick: Der Inhalt in der Mitte der Seite wird mit margin-left um die Breite der Navigationsleiste nach rechts gerückt. Insgesamt ergibt sich genau dasselbe Layout, wie Sie es vorher im Abschnitt mit Tabellen gesehen haben:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- css_layout.html -->  <html>  <head>  <title>Positionierung mit CSS</title>  <style type="text/css">  <!--  body {  margin: 0px; padding: 0px  }  #kopf {  position: absolute;  left: 0px; top: 0px; z-index: 3;  width: 100%; height: 100px;  background-color: yellow;  border: none  }  #mitte {  position: absolute;  left: 0px; top: 100px; z-index: 1;  width: 100%; height: 500px;  background-color: blue;  border: none  }  #mitte_inhalt {  margin-left: 150px  }  #navigation {  position: absolute;  left: 0px; top: 100px; z-index: 2;  width: 150px; height: 500px;  background-color: red;  border: none;  }  #fuss {  position: absolute;  left: 0px; top: 600px; z-index: 4;  width: 100%; height: 60px;  background-color: yellow;  border: none;  }  -->  </style>  </head>  <body>  <div id="kopf">Kopfzeile</div>  <div id="navigation">  <p>Navigation</p>  </div>  <div id="mitte">  <div id="mitte_inhalt">Inhalt</div>  </div>  <div id="fuss">Fußzeile</div>  </body>  </html>  

Tabellen und Inhalte

Sie können die gesamte Tabelle oder den Inhalt einzelner Zellen verschieden ausrichten – und das sowohl horizontal als auch vertikal.

Tabelle horizontal ausrichten

Um eine Tabelle auszurichten, kommt das bereits gut bekannte Attribut align zum Einsatz. Zur Erinnerung: Mit diesem Attribut können Sie auch Textabsätze und Überschriften ausrichten. Dabei entspricht das Vorgehen bei Tabellen dem bei Absätzen und Überschriften. Im Start-Tag des table-Elements notieren Sie das Attribut align und weisen ihm einen von drei Parametern zu.

ParameterBedeutung
leftRichtet die Tabelle am linken Fensterrand aus.
rightRichtet die Tabelle am rechten Fensterrand aus.
centerRichtet die Tabelle zentriert aus.
<table align="left">   <!-- richtet Tabelle links aus -->  <table align="right">  <!-- richtet Tabelle rechts aus -->  <table align="center"> <!-- zentriert Tabelle -->  

Info Beachten Sie, dass Sie mit dem align-Attribut im Start-Tag des table-Elements die Tabelle ausrichten und nicht den Inhalt der Zellen.

Zelleninhalt horizontal ausrichten

Auch an dieser Stelle kommt das align-Attribut wieder zum Einsatz. Diesmal wird das Attribut aber im Start-Tag der Tabellenzelle (td oder th) notiert und mit einem der drei Parameter left, center oder right versehen. Die Anweisungen für Kopfzellen lauten:

<th align="left">   <!-- richtet Inhalt links aus -->  <th align="right">  <!-- richtet Inhalt rechts aus -->  <th align="center"> <!-- zentriert Inhalt -->  

Für Datenzellen lauten sie:

<td align="left">   <!-- richtet Inhalt links aus -->  <td align="right">  <!-- richtet Inhalt rechts aus -->  <td align="center"> <!-- zentriert Inhalt -->  

Zelleninhalt vertikal ausrichten

Um den Inhalt einer Zelle vertikal auszurichten, wird ein neues, bisher unbekanntes Attribut verwendet: valign (engl. vertical align, dt. vertikale Ausrichtung). Dieses Attribut besitzt vier neue Parameter.

ParameterÜbersetzungBedeutung
topobenRichtet den Zelleninhalt obenbündig, also am oberen Zellenrand aus.
middlemittigRichtet den Zelleninhalt mittig aus.
bottomuntenRichtet den Zelleninhalt untenbündig, also am unteren Rand der Zelle aus.
baselineGrundlinieRichtet den Zelleninhalt an der Grundlinie aus, so dass die erste Textzeile einer Zeile immer auf gleicher Höhe liegt.

Die Anweisungen für die vertikale Ausrichtung lauten dann für Kopfzellen:

<th valign="top">      <!-- Inhalt oben -->  <th valign="middle">   <!-- Inhalt mittig -->  <th valign="bottom">   <!-- Inhalt unten -->  <th valign="baseline"> <!-- Inhalt an Grundlinie -->  

und für Datenzellen:

<td valign="top">      <!-- Inhalt oben -->  <td valign="middle">   <!-- Inhalt mittig -->  <td valign="bottom">   <!-- Inhalt unten -->  <td valign="baseline"> <!-- Inhalt an Grundlinie -->  

Ausrichtung an Dezimalzeichen

Seit der HTML-Version 4.0 ist es auch möglich, den Zelleninhalt an einem bestimmten Zeichen auszurichten. Jedoch wird diese Funktion von bisher keinem Browser unterstützt. Sie soll aber an dieser Stelle trotzdem aufgeführt werden, da sie besonders bei Zahlen mit Dezimalwerten interessant ist und kommende Browserversionen diese Funktion vielleicht unterstützen werden. So lassen sich Zelleninhalte beispielsweise am Dezimalzeichen (in Deutschland das Kommazeichen) ausrichten. Dazu werden dem Attribut align der Parameter char und dem zusätzlichen Attribut char das entsprechende Zeichen übergeben.

<col align="char" char=",">  

Das col-Element ist Ihnen an dieser Stelle sicherlich noch unbekannt, ich werde es Ihnen an geeigneter Stelle jedoch noch genauer erklären. Der Code demonstriert sehr schön, wie sich die Attribute align und valignzum Ausrichten von Inhalten einer Tabellenzelle nutzen lassen.

Tabellenbeschriftung und Tabellenausrichtung

Es gibt verschiedene Möglichkeiten, Tabelleninhalte logisch zu unterteilen und in unterschiedlichen Gruppen zusammenzufassen. So haben Sie die Möglichkeit, die Anzahl der Spalten vorzudefinieren oder eine Tabelle in einen Kopf-, Körper- und Fußteil zu unterteilen.

Spaltengruppen

Für das Vordefinieren von Spalten werden zwei neue Elemente benötigt: colgroup (engl. column group, dt. Spaltengruppe) und col (engl. column, dt. Spalte). Es gibt jedoch zwei unterschiedliche Möglichkeiten, Spaltengruppen zu definieren. In der ersten Variante notieren Sie das Element colgroup und in dessen Gültigkeitsbereich so viele Elemente des Typs col, wie Spalten in der Tabelle vorhanden sind. Anstatt jeder einzelnen Zelle einer Spalte die Breite explizit zuweisen zu müssen, können Sie nun die col-Elemente einsetzen. Soll beispielsweise eine Tabelle vier Spalten mit den Breiten 15 %, 20 %, 35 % und 30 % enthalten, würde die entsprechende Definition so aussehen:

<colgroup>  <col width="15%">  <col width="20%">  <col width="35%">  <col width="30%">  </colgroup>  

Wie Sie sehen können, wurde für das col-Element kein Ende-Tag notiert. Die Angabe von </col> ist auch nicht erlaubt bzw. vorgesehen. Natürlich können Sie für die Breite auch Pixelangaben machen. Es gibt aber noch eine dritte Möglichkeit: relative Breitenangaben. So können Sie einer Spalte eine Breite von 5 Anteilen der Gesamttabelle zuweisen. Hinter der Zahl muss lediglich ein Sternchen notiert werden.

<colgroup>  <col width="1*">  <col width="3*">  <col width="5*">  <col width="7*">  </colgroup>  

Die Gesamtbreite der Tabelle beträgt 16/16. Die erste Spalte ist 1/16, die zweite 3/16, die dritte 5/16 und die vierte 7/16 breit. Dies kommt aber erst dann zur Geltung, wenn die Gesamtbreite der Tabelle im Start-Tag von tablemittels width angegeben wurde. Möchten Sie, dass alle Spalten die gleiche Breite besitzen, können Sie auf die col-Elemente verzichten und müssen nur das colgroup-Element verwenden.

<colgroup span="4" width="150">  </colgroup>  

Das Attribut span definiert dabei die Anzahl der Spalten (insgesamt also vier), und das Attribut width definiert die jeweilige Spaltenbreite von 150 Pixel. Natürlich können Sie auch hier prozentuale oder anteilige Angaben machen.

Logische Gruppierung

Wie bereits erwähnt, können Sie eine Tabelle in einen Kopf-, einen Körper- und einen Fußteil unterteilen. Die entsprechenden Elemente lauten:

  • thead (engl. table head, dt. Tabellenkopf) definiert den Kopfteil der Tabelle.
  • tfoot (engl. table foot, dt. Tabellenfuß) definiert den Fußteil der Tabelle.
  • tbody (engl. table body, dt. Tabellenkörper) definiert den Körperteil der Tabelle.

Die Reihenfolge dieser Elemente ist explizit festgelegt und lautet thead > tfoot > tbody. Die entsprechenden Inhalte, die den einzelnen Gruppen zugewiesen werden sollen, müssen im Gültigkeitsbereich der einzelnen Elemente (also zwischen Start- und Ende-Tag) notiert werden. Besondere Beachtung muss in diesem Beispiel das Attribut rules im table-Start-Tag finden. Für die Verwendung dieses Attributs muss außerdem das Attribut borderim Start-Tag von table notiert werden. Mit rules können Sie die Darstellung des Tabellenrahmens beeinflussen. Dafür stehen Ihnen fünf verschiedene Attribute zur Verfügung.

ParameterErklärung
noneVerhindert die Darstellung der inneren Linien. Der Außenrahmen wird jedoch dargestellt.
allZeigt alle Linien an, sowohl innen als auch außen.
colsZeigt die Linien zwischen den Spalten, aber nicht zwischen den Zeilen an.
rowsZeigt die Linien zwischen den Reihen, aber nicht zwischen den Spalten an.
groupsZeigt Linien zwischen den einzelnen Tabellengruppen an.

Im Code wurde der Parameter groups für rules verwendet. Dadurch werden die Linien des Rahmens in Abbildung nur horizontal zwischen den Gruppen dargestellt.

Tabellenbreite und Spalten vordefinieren

Wenn umfangreiche Tabellen über eine schwache Netzverbindung übertragen werden müssen, hat der Browser das Problem, dass er mit der Darstellung der Tabelle am Bildschirm warten muss, bis die gesamte Tabelle übertragen ist, da er vorher nicht weiß, welche Darstellungsbreite er für die Tabelle reservieren muss. Tabellen werden nämlich per Voreinstellung so breit dargestellt, wie es ihr Inhalt verlangt. Das Gleiche gilt für die einzelnen Spalten der Tabelle. Jede Spalte wird so breit, wie es ihr breitester, nicht umzubrechender Inhalt verlangt. Um dem Browser bei diesem Problem zu helfen, können Sie in HTML die Breiten von Tabelle und Spalten vordefinieren. Außerdem können Sie Spalten in Spaltengruppen aufteilen und das Breitenverhältnis der Spalten untereinander bestimmen. Die gewünschte Gesamtbreite der Tabelle können Sie durch das width-Attribut im einleitenden <table>-Tag angeben. Ein Beispiel:

<table border="1" width="100%">  

Info Erlaubt sind als Wertzuweisung reine Zahlen, die als Pixel interpretiert werden, oder Prozentangaben, wie im Beispiel gezeigt. 100% bedeutet: Die Tabelle soll die gesamte verfügbare Breite einnehmen. Bei einer solchen Angabe dehnt der Browser die Spalten nach Gutdünken aus. Wenn Sie mehr Kontrolle über die Spaltenbreiten haben möchten, ist es besser, zusätzlich zur width-Angabe im <table>-Tag Spalten vorzudefinieren und ihnen eine Breite zuzuweisen. Dazu das Beispiel einer kompletten kleinen Tabelle:

Info Um Spalten vorzudefinieren, notieren Sie unterhalb des einleitenden <table>-Tags ein Konstrukt, das durch <colgroup> eingeleitet und mit </colgroup> beendet wird. Innerhalb davon können Sie für jede Spalte jeweils ein alleinstehendes <col>-Tag definieren. Mit dem Attribut width= definieren Sie die Spaltenbreite. Auch hierbei sind absolute Zahlen für Pixel und Prozentangaben erlaubt. Als Besonderheit ist jedoch auch eine weitere Notationsform zulässig, wie das Beispiel zeigt. Durch Angabe einer Zahl mit Sternzeichen dahinter können Sie das logische Breitenverhältnis der Spalten untereinander festlegen. Im obigen Beispiel nimmt die erste Spalte 2/9 Breite der Gesamttabellenbreite ein, die zweite Spalte 4/9 und die dritte Spalte 3/9 (also 1/3).

Wie Ihnen vielleicht aufgefallen ist,

haben wir in unseren Beispielen ausschließlich relative Angaben verwendet. Relative Angaben sollten Sie gegenüber absoluten Pixelangaben bevorzugen. Zu absoluten Angaben sollten Sie auch wissen, dass Browser solche Angaben nicht zwingend umsetzen. Jede Tabelle oder Spalte wird so breit, wie es ihr breitester Inhalt verlangt. Zu geringe Breitenangaben werden dabei ignoriert. Die Möglichkeit, überbreite Inhalte abzuschneiden oder Spaltenbreiten wirklich festzuzementieren, besteht nur mithilfe von CSS.

Allgemeines zu Tabellen für Webseitenlayouts

Wenn Sie bei Webseiten auf sauber ausgerichtete, aber relativ frei verteilte Elemente mit meistfarbigen Flächen stoßen, wurde in vielen Fällen mit der Technik der „blinden Tabellen“ gearbeitet. BIinde Tabellen haben keine sichtbaren Gitternetzlinien. Dadurch merkt der Betrachter gar nicht, dass es sich in Wirklichkeit um eine Tabelle handelt.

Einen Nachteil sollten Sie jedoch beachten, wenn Sie beabsichtigen, den gesamten anzuzeigenden Inhalt einer Webseite mit Hilfe einer blinden Tabelle anzuordnen: Tabellen werden vom Webbrowser erst angezeigt, nachdem ihr kompletter Inhalt eingelesen wurde bzw. erst in dem Augenblick, wo der Webbrowser genau weiß, wie groß und wie breit die Tabelle angezeigt werden muss. Das bedeutet bei der Datenübertragung aus dem Web, dass ein Anwender am Bildschirm länger wartet, bis überhaupt etwas angezeigt wird – es sei denn, Sie benutzen die Möglichkeit, Spalten vorzudefinieren.

Ein weiteres Problem besteht darin, dass Browser mit gewünschten Breiten- und Höhenangaben nicht unbedingt so umgehen, wie Sie es wünschen.

Inhalte werden dann plötzlich gestaucht, auseinandergezogen usw. Dies hat zur Erfindung des so genannten „blinden Pixels“ geführt, einer kleinen GIF-Grafik, die nur aus einer einfarbigen Fläche besteht, deren Farbe wiederum als transparent definiert ist. Zusammen mit der Möglichkeit, Breite und Höhe einer Grafik in HTML unabhängig von der tatsächlichen Größe der Grafik anzugeben, lässt sich eine solche Grafik scheinbar unsichtbar und unauffällig einbauen. So lassen sich vor allem feste Mindestbreiten für einzelne Spalten einer Tabelle erzwingen, und der Browser kann die Inhalte darin nicht mehr stauchen. Diese Technik gilt einerseits als unsaubere Trickserei, ist aber andererseits Ausdruck für fehlende Formatiermöglichkeiten. Mittlerweile stellen Stylesheets solche Möglichkeiten zwar mit min-width bereit, doch das nutzt nicht viel, solange die weit verbreiteten Browser noch keine Unterstützung dafür anbieten. In diesem Abschnitt wird anhand eines Beispiels gezeigt, wie Seitenlayouts mit blinden Tabellen im Prinzip funktionieren. Auf die Technik des blinden Pixels wird hier verzichtet. Doch eine andere, typische Technik kommt zum Einsatz: das Verschachteln von Tabellen. Denn meistens lassen sich saubere Tabellenlayouts nur erreichen, wenn man mit Tabellen innerhalb von Tabellen arbeitet.

Beispiel eines typischen Tabellen-Layouts

Das folgende Beispiel zeigt ein Layout, wie man es auf vielen Webseiten findet: oben eine farbige Fläche, wo die Seitenüberschrift steht und andere Elemente wie Grafiken für Logos, Banner oder dergleichen Platz haben, unterhalb davon links eine gleichfarbige, direkt angeschlossene, schmale Fläche für Navigationsverweise innerhalb des Webprojekts, und rechts davon eine breite Fläche für den eigentlichen Inhalt der Seite. Das Beispiel ist gültiges HTML 4.0, benutzt aber diverse Attribute, die als deprecated gekennzeichnet sind, weshalb als HTML-Variante „Transitional“ gewählt werden muss.

Info Das Beispiel bestimmt im einleitenden <body>-Tag zunächst dateiweite Farben fur Hintergrund, Text und Verweise. Innerhalb des Dateikörpers wird die übergeordnete Tabelle definiert. Sie erhält die Attribute border="0", damit kein Rahmen und keine Gitternetzlinien angezeigt werden, sowie cellpadding="0" und cellspacing="0", damit sich die einzelnen Zellen der Tabelle nahtlos aneinander fugen. Das ist wichtig, damit zwischen den Farbflächen keine sichtbaren Lücken entstehen. Weil es sich um eine die ganze Seite überspannende Tabelle handelt, werden für Browser, die das verstehen, die gewünschten Spalten mit <col>-Tags vordefiniert. Die Tabelle soll zwei Spalten haben, wobei die erste eine Breite von 200 Pixeln haben soll. Das soll die Spalte fur Navigationsverweise werden. Die zweite Spalte soll den Rest des verfügbaren Platzes in Anspruch nehmen. Die gesamte Tabelle soll sich über die volle verfügbare Breite erstrecken – angegeben durch width="100%" im einleitenden <table>-Tag der übergeordneten Tabelle.

Die gesamte übergeordnete Tabelle bekommt ferner mit Hilfe von

bqcolor="#A050A0" einen matt-violetten Hintergrund zugewiesen. Damit erhalten erst mal alle ihre Inhalte diese Hintergrundfarbe. Um andersfarbige Flächen innerhalb der Tabelle zu erzeugen, sind bei den einzelnen Zellen weitere Angaben zur Hintergrundfarbe erforderlich, die dann diese globale Hintergrundfarbe überschreiben. Die erste Zelle der ersten Zeile der übergeordneten Tabelle ist zugleich die einzige Zelle in dieser Zeile, da durch das Attribut colspan="2"erreicht wird, dass sich die Zelle über zwei Spalten erstreckt. Der Inhalt dieser Zelle steht nun fur den überschriftenteil zur Verfugung. Da mit cellpadding="0" und cellspacing="0" gearbeitet wird, würde der Inhalt allerdings ganz am Außenrand der Tabelle kleben, was unsauber aussieht. Deshalb kommt bereits bei der überschrift zum ersten Mal die Technik der Tabelle in der Tabelle zum Einsatz: <table border="0" cellpadding="10" cellspacing="0"> definiert innerhalb der über zwei Spalten gestreckten Tabellenzelle eine weitere Tabelle. Auch diese ist wiederum rahmenlos <border="0">. Durch cellpadding="10" wird jedoch ein Innenabstand von l0 Pixeln zum Zellenrand erzwungen. Diese Angabe ist der eigentliche Grund, warum die innere Tabelle definiert wird. Denn die innere Tabelle hat nur eine einzige Zeile mit einer einzigen Spalte, also nur eine Zelle, und darin ist die h1-überschrift für die Seite notiert („Willkommen“). Die überschrift erhält mit Hilfe der CSS-Eigenschaft color= eine weiße Farbe, um sich ordentlich von dem violetten Hintergrund der Tabelle abzuheben.

In der zweiten Zeile der übergeordneten Tabelle werden fur beide definierten Spalten je eine Zelle definiert.

Die erste (linke) Zelle ist dann der Behälter für die gesamte linke Spalte – also fur die Spalte, in der die Navigationsverweise stehen. Die zweite (rechte) Zelle ist der Behälter für den gesamten Inhalt des Hauptbereichs, also des Bereichs für den eigentlichen Seiteninhalt. Die zweite Zelle, also die für den Hauptbereich, erhält mit bgcolor="#FFFFFF" als Hintergrundfarbe weiß zugewiesen. So entsteht letztlich der optische Eindruck, als ob die Seite nur oben und links einen farbigen Balken enthalten würde, während der gesamte Rest der Seite einen weißen Hintergrund hat. In beiden Zellen der zweiten Zeile der übergeordneten Tabelle wird auch wieder je eine innere Tabelle definiert, die mit den gleichen Attributen wie im Fall der überschrift für saubere Abstände zum Rand sorgt. So werden auch alle Inhalte ordentlich auf einer Höhe ausgerichtet. Mit valign="top" wird in beiden Zellen dafür gesorgt, dass die Inhalte, die ja unterschiedlich groß sein können, auf jeden Fall obenbündig ausgerichtet werden. Die Verweise in der linken Spalte heben sich durch ihre dateiweit definierten Farben gut von dem violetten Hintergrund ab. Normaler Text, der in der linken Spalte steht, also überschriften, Textabsätze usw., erhalten im Beispiel wieder mit Hilfe von CSS eine weiße Textfarbe, um sich vom Hintergrund abzuheben. Info Sie können Stylesheets noch wesentlich konsequenter einsetzen, als es im obigen Beispiel der Fall ist. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften: Schriftformatierung, Ausrichtung und Absatzkontrolle, Außenrand und Abstand, Innenabstand, Rahmen, Hintergrundfarben und -bilder, Positionierung und Anzeige von Elementen.

Zellen verbinden

Eine weitere Möglichkeit für Tabellen in HTML ist das Verbinden von Zellen. So lassen sich neben- oder übereinander liegende Zellen zu einer Zelle zusammenschließen und über mehrere Spalten oder Zeilen ausdehnen.

Um nebeneinander liegende Zellen miteinander verbinden zu können, wird das Attribut colspan (engl. column span, dt. Spaltenspanne) verwendet. Als Parameter wird dem Attribut die Anzahl der Spalten übergeben, über die sich die Zelle erstrecken soll. Gehen Sie einmal davon aus, dass Sie eine Tabelle mit zwei Zeilen und vier Spalten haben. Die Anzahl der Zellen in der ersten Zeile soll gleich bleiben (insgesamt vier), aber in der zweiten Zeile sollen nur zwei Spalten zu sehen sein. Als Skizze würde das so aussehen: Zuerst müssen Sie die Tabelle einleiten und die erste Zeile mit vier Zellen definieren.

<table border="1">  <tr>  <td>1</td>  <td>2</td>  <td>3</td>  <td>4</td>  </tr>  

Nun folgt die zweite Zeile, die ganz normal eingeleitet wird. Da Sie nur zwei Spalten in der zweiten Zeile haben wollen, müssen Sie sich zuerst überlegen, welche der Zellen Sie miteinander verbinden möchten. Laut Abbildung 1 sollen die Zellen 1 und 2 und die Zellen 3 und 4 miteinander verbunden werden. Sie definieren nun die erste Zelle und weisen ihr mittels colspan="2" eine Spannweite von zwei Zellen zu.

<tr>  <td colspan="2">Zelle 1 und 2</td>  

Bildlich vorgestellt haben Sie eben zwei Zellen erstellt. Das ist wichtig, da Sie die zweite Zelle sozusagen überspringen. Nun folgt die nächste (dritte) Zelle, die sich über zwei Spalten erstrecken soll. Danach beenden Sie die Zeilen- und Tabellendefinition.

<td colspan="2">Zelle 3 und 4</td>  </tr>  </table>  

Sie behalten also die standardmäßige Vorgehensweise beim Erzeugen von Tabellen bei (von links nach rechts und von oben nach unten). Prinzipiell wäre es auch möglich, alle vier Zellen der zweiten Zeile zu verbinden. Sie müssten lediglich die Anzahl der Spalten, über die sich die erste Zelle erstrecken soll, auf vier erhöhen (colspan="4"). Genauso gut ist es möglich, die zweite Zelle auf eine Spannweite von drei zu erhöhen. Sie definieren dann zuerst ganz normal die erste Zelle und weisen bei der Definition der zweiten Zelle eine Spannweite von drei zu (colspan="3"). Alle drei Varianten werden im nachfolgenden Code berücksichtigt und dargestellt.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <!-- Zellenverbund //-->  <html>  <head>  <title>Zellenverbund</title>  </head>  <body>  <table border="1" width="50%">  <tr>  <td>1</td>  <td>2</td>  <td>3</td>  <td>4</td>  </tr>  <tr>  <td colspan="2">Zelle 1 und 2</td>  <td colspan="2">Zelle 3 und 4</td>  </tr>  </table>  <br>  <table border="1" width="50%">  <tr>  <td>1</td>  <td>2</td>  <td>3</td>  <td>4</td>  </tr>  <tr>  <td colspan="4">Zelle 1, 2, 3 und 4</td>  </tr>  </table>  <br>  <table border="1" width="50%">  <tr>  <td>1</td>  <td>2</td>  <td>3</td>  <td>4</td>  </tr>  <tr>  <td>Zelle 1</td>  <td colspan="3">Zelle 2, 3 und 4</td>  </tr>  </table>  </body>  </html>  

Um Zellen, die übereinander liegen, verbinden zu können, verwenden Sie das rowspan-Attribut (engl. row spanning, dt. Zeilenspanne). Es verhält sich äquivalent zum colspan-Attribut mit dem Unterschied, dass es einen Zellenverbund über mehrere Zeilen erzeugt. Die Anzahl der zu verbindenden Zellen bzw. Zeilen wird dem Attribut rowspan als Parameter übergeben. Als Beispiel verwenden Sie eine Tabelle, die über jeweils vier Zeilen und Spalten verfügt. Wenn Sie nun die Zellen 5 und 9 (siehe Abbildung 3) miteinander verbinden möchten, müssen Sie zuerst den Tabellenbeginn einleiten und die erste Zeile definieren:

<table border="1" width="100%">  <tr>  <td>1</td>  <td>2</td>  <td>3</td>  <td>4</td>  </tr>  

Als Nächstes folgt die zweite Zeile. Deren erste Zelle ist die Zelle 5. Da diese mit der Zelle 9 verbunden werden soll, weisen Sie ihr das Attribut rowspan mit dem Parameter 2 zu (die verbundene Zelle erstreckt sich über zwei Zeilen). Die Zellen 6, 7 und 8 werden ganz normal definiert.

<tr>  <td rowspan="2">5 und 9</td>  <td>6</td>  <td>7</td>  <td>8</td>  </tr>  

In der dritten Zeile müsste es rein theoretisch vier Zellen zu definieren geben. Die Zelle 9 ist jedoch schon durch das rowspan-Attribut der Zelle 5 definiert worden, sodass lediglich die restlichen drei Zellen fehlen. Sie beginnen mit der Zellendefinition der Zeile 3, also bei Zelle 10. Die vierte Zeile notieren Sie ganz normal und schließen danach die Tabellendefinition ab.

<tr>  <td>10</td>  <td>11</td>  <td>12</td>  </tr>  <tr>  <td>13</td>  <td>14</td>  <td>15</td>  <td>16</td>  </tr>  </table>  

Info Sie gehen also wieder streng nach dem Schema „von links nach rechts, von oben nach unten“ vor. Natürlich ist es auch durchaus möglich, mehrere Zellen übereinander zu verbinden. Dazu werden Sie nun die Tabelle aus Abbildung 4 in HTMLumsetzen. Die Zellen, die miteinander verbunden werden müssen, sind 1-5-9, 11-15 und 4-8-12-16. Wie üblich leiten Sie die Tabellen- und anschließend die Zeilendefinition ein. Da die Zelle 1 mit Zelle 5 und 9 verbunden werden soll, müssen Sie ihr als Parameter für rowspan den Wert 3 übergeben. Danach notieren Sie jeweils die Zellen 2 und 3. Die Zelle 4 soll mit 8, 12 und 16 verbunden werden, also den Parameter 4 für das rowspan-Attribut notieren.

<table border="1" width="100%">  <tr>  <td rowspan="3">1, 5, 9</td>  <td>2</td>  <td>3</td>  <td rowspan="4">4, 8, 12, 16</td>  </tr>  

Es folgt die zweite Zeile. Die Zellen 5 und 8 sind bereits durch die erste Zeile definiert.

<tr>  <td>6</td>  <td>7</td>  </tr>  

In der dritten Zeile müssen Sie lediglich die Zellen 10 und 11 definieren. Die Zellen 9 und 12 wurden ebenfalls in der ersten Zeile definiert.

<tr>  <td>10</td>  <td rowspan="2">11, 15</td>  </tr>  

Zum Schluss müssen Sie noch die vierte Zeile und die Zellen 13 und 14 notieren, da 15 und 16 bereits in der dritten bzw. ersten Zeile notiert worden sind. Danach schließen Sie die Tabellendefinition ab.

<tr>  <td>13</td>  <td>14</td>  </tr>  </table>  

Die beiden Beispiele würden in einem HTML-Dokument wie folgt aussehen. Abbildung 5 zeigt die Darstellung im Internet Explorer 6.0.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <!-- Zellenverbund -->  <html>  <head>  <title>Zellenverbund</title>  </head>  <body>  <h1>Tabelle aus Abbildung 3 mit Verbund von 5 und 9</h1>  <table border="1" width="100%">  <tr>  <td>1</td>  <td>2</td>  <td>3</td>  <td>4</td>  </tr>  <tr>  <td rowspan="2">5 und 9</td>  <td>6</td>  <td>7</td>  <td>8</td>  </tr>  <tr>  <td>10</td>  <td>11</td>  <td>12</td>  </tr>  <tr>  <td>13</td>  <td>14</td>  <td>15</td>  <td>16</td>  </tr>  </table>  <h1>Tabelle aus Abbildung 4</h1>  <table border="1" width="100%">  <tr>  <td rowspan="3">1, 5, 9</td>  <td>2</td>  <td>3</td>  <td rowspan="4">4, 8, 12, 16</td>  </tr>  <tr>  <td>6</td>  <td>7</td>  </tr>  <tr>  <td>10</td>  <td rowspan="2">11, 15</td>  </tr>  <tr>  <td>13</td>  <td>14</td>  </tr>  </table>  </body>  </html>  

Über- und nebeneinander liegende Zellen verbinden

Das Verbinden von Zellen über mehrere Zeilen und Spalten hinweg erfolgt nur unwesentlich anders als mit den bisher behandelten Methoden. Sie weisen einer Zelle einfach beide Attribute (colspan und rowspan) zu. Abbildung 6 zeigt das Schema einer Tabelle mit vier Spalten und vier Zeilen. Aufgrund dieses Schemas sollen nun die Zellen 6, 7, 10, 11, 14 und 15 miteinander verbunden werden. Wie auch bisher leiten Sie die Tabellendefinition ein und definieren die erste Zeile mit den Zellen 1, 2, 3 und 4. Anschließend folgt die zweite Reihe. Hier definieren Sie ganz normal die Zelle 5. Bei der Definition der Zelle 6 übergeben Sie die Attribute und Parameter colspan="2" und rowspan="3". Dies bedeutet, dass sich die Zelle über zwei Spalten und drei Zeilen erstrecken soll. Anschließend folgt die Zelle 8. In der Reihe 3 definieren Sie lediglich die Zellen 9 und 12 und in Reihe 4 die Zellen 13 und 16. Dann beenden Sie die Tabellendefinition. Das vollständige Beispiel-Code und die Abbildung sehen folgendermaßen aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <!-- Zellenverbund -->  <html>  <head>  <title>Zellenverbund</title>  </head>  <body>  <h1>Zellenverbund über mehrere Reihen und Spalten</h1>  <table border="1" width="100%">  <tr>  <td>1</td>  <td>2</td>  <td>3</td>  <td>4</td>  </tr>  <tr>  <td>5</td>  <td colspan="2" rowspan="3">6, 7, 10, 11, 14 und 5</td>  <td>8</td>  </tr>  <tr>  <td>9</td>  <td>12</td>  </tr>  <tr>  <td>13</td>  <td>16</td>  </tr>  </table>  </body>  </html>  

Info Aufgrund der Beispiele in diesem Artikel sollten Sie also bei komplexen Tabellenstrukturen vorher immer eine Zeichnung anlegen oder sich zumindest ganz genau überlegen, wie die Tabelle später aussehen soll. Dadurch können Sie eine Menge Zeit sparen.

Text formatieren mit HTML

Inline-Elemente (Zeichenformate) für den Fließtext

Als Inline-Elemente werden in HTML Elemente bezeichnet, die keine neue Zeile im Textfluss bewirken und deren Breite sich nur über den Raum erstreckt, den der Inhalt einnimmt. In der hier empfohlenen strict-Variante von HTML dürfen Inline-Elemente ebenso wenig wie nackter Text direkt im Dateikörper zwischen <body> und </body> vorkommen, sondern nur innerhalb von Block-Elementen oder bestimmten anderen Inline-Elementen.

Erzwungener Zeilenumbruch

Genaugenommen ist der erzwungene Zeilenumbruch weder ein Inline-Element noch ein Block-Element, weil er gar keinen eigenen Inhalt und Erstreckungsbereich hat. Wir behandeln ihn jedoch an dieser Stelle, da er typischerweise innerhalb von Block-Elementen vorkommt, um dort Zeilenumbrüche an gewünschten Stellen zu bewirken. Ein typischer Anwendungsfall sind Strophen eines Gedichts oder Songs, wie das nachfolgende Beispiel zeigt:

<p>Yesterday  <br>  All my troubles seemed so far away  <br>  Now it looks as though they're here to stay  <br>  Oh I believe in yesterday...</p>  

Info Das alleinstehende Tag <br> bewirkt einen einfachen Zeilenumbruch. Falls Sie in XHTML schreiben, dürfen Sie nicht vergessen, dass dort <br /> notiert werden muss.

Inline-Auszeichnungen mit semantischer Bedeutung

Mit der Zielsetzung, möglichst sinnvolles semantisches Markup zu erzeugen, sollten Sie die nachfolgenden Inline-Auszeichnungen bevorzugt benutzen.

Inline-AuszeichnungBedeutung
<em>...</em>Betont, hervorgehoben
<strong>...</strong>Noch stärker betont, besonders hervorgehoben
<code>...</code>Quelltext-Fragment, z.B. aus Programmiersprachen
<samp>...</samp>Beispiel, z.B. bei Ausgaben eines Programms oder Scripts
<kbd>...</kbd>Tastatureingaben des Anwenders
<var>...</var>Variable, verwendbar z.B. auch für Namen
<cite="">...</cite>Zitat
<q cite="">...</q>Quotation mit Zitathinweis
<abbr>...</abbr>Als Buchstabenfolge gesprochene Abkürzungen
<acronym>...</acronym>Als Wort gesprochene Abkürzungen

Info Einige dieser Elemente sind vor allem für Softwaredokumentation interessant, wie etwa die Elemente code, samp, kbd und var. Etwas Interpretationsfreiheit ist jedoch erlaubt. Es spricht nichts dagegen, wenn Sie beispielsweise mit dem var-Element unverlinkte URL-Adressen auszeichnen oder auch Produktbezeichnungen. Wichtig ist, dass Sie solche Auszeichnungen durchgängig gleich und in allen Texten eines Projekts konsequent verwenden.

Etwas erklärungsbedürftig sind die Elemente

abbr und acronym. Unter abbr fallen Abkürzungen wie „WWW“, „HTML“ oder „FBI“, also Abkürzungen, die sich nur Buchstabe für Buchstabe aussprechen lassen. Unter acronym fallen dagegen Ausdrücke wie „NASA“ oder „Modem“, also als Wort gesprochene Ausdrücke, die jedoch eigentlich eine Abkürzung darstellen. Wie ein Browser solche semantischen Auszeichnungen im Text darstellt, bleibt ihm überlassen. Die meisten modernen grafischen Browser stellen beispielsweise Inhalte, die mit <em></em> ausgezeichnet sind, in Kursivschrift dar, <strong></strong> dagegen in Fettschrift, <dfn></dfn> oftmals gepunktet unterstrichen und <code></code> in dicktengleicher Schrift. Verlassen sollten Sie sich jedoch in dieser Hinsicht auf nichts. Semantische Elemente schreien geradezu danach, mithilfe von CSS ordentlich formatiert zu werden. Nachfolgend noch ein Beispiel, das den Einsatz semantischer Inline-Auszeichnungen zeigt:

<p><q cite="Heraklit">Alles fließt</q>, sprach <var class="person_name">Heraklit</var>, für den die <dfn>arche</dfn>, also der Urgrund allen Seins, in der Bewegung des ewig Werdenden lag. Genaugenommen stammt der Leitspruch, dass alles fließt, zwar <em>nicht</em> von <var class="person_name">Heraklit</var>, sondern wird ihm nur von  <var class="person_name">Platon</var> zugeschrieben - doch es drückt seine Lehre so gut aus, dass man über diese kleine Ungenauigkeit gerne hinweg sieht.</p>  

Info Das Beispiel zeigt, wie Sie mit Hilfe des universell einsetzbaren class-Attributs noch weitere semantische Genauigkeit im Text erzielen können.

Inline-Auszeichnung ohne semantische Bedeutung

Bei diesen Elementen die untenstehende Tabelle zeigt, handelt sich um solche, die direkt die Textformatierung beeinflussen.

Inline-AuszeichnungBedeutung
<i>...</i>Kursiv
<b>...</b>Fett
<tt>...</tt>Dicktengleich
<big>...</big>Größer als normal
<small>...</small>Kleiner als normal
<sub>...</sub>Tiefgestellt
<sup>...</sup>Hochgestellt
<span>...</span>Inline-Element ohne Wirkung

Info Die Tabelle enthält ausschließlich Elemente, die im strict-Standard von HTML vorkommen. Dennoch gelten vor allem die beiden erstgenannten Elemente, also das i– und das b-Element, bei Hardlinern des semantischen Markup als verpönt, weil sie direkte Formatieranweisungen darstellen. Bei Elementen wie dem tt-Element, das einfach nur die Verwendung dicktengleicher Schrift anweist, sind die Ansichten bereits geteilter, da seine mögliche Einsatzzwecke nicht unbedingt durch das verfügbare Repertoire an semantischen Inline-Auszeichnungen abgedeckt werden kann. Und für Elemente wie sub und sup gibt es ohnehin keine semantische Entsprechung. Besondere Beachtung verdient das span-Element. Es bewirkt optisch rein gar nichts, wird aber vom Parser des Browsers registriert. Das span-Element eignet sich durch diese Eigenschaft besonders zur Formatierung mit CSS.

Auszeichnungen für Änderungsmarkierungen

Möglicherweise kennen Sie aus Textverarbeitungsprogrammen die Möglichkeit, Dokumente beim Bearbeiten mit Änderungsmarkierungen zu versehen. Dabei werden gelöschte Textpassagen meist rot und durchgestrichen dargestellt, eingefügte dagegen grün. Gedacht sind solche Markierungen für den Austausch etwa für Review-Prozesse oder Lektorat. In HTML stehen diese Funktionen ebenfalls zur Verfügung: Mit <ins></ins> markieren Sie Textpassagen als neu eingefügt – inssteht für insert (zu Deutsch: einfügen) – und mit <del></del> können Sie Passagen zum Löschen markieren – del steht für delete (zu Deutsch: löschen). Mit Hilfe zweier Attribute können Sie Auszeichnungen dieser Art außerdem datieren und begründen. Dazu ein Beispiel:

<ins datetime="2005-06-25T11:00+01:00" cite="http://www.w3.org/TR/html4/appendix/changes.html#19991224">  Die Meta-Angabe für Refreshs wird von der HTML-Spezifikation mittlerweile nicht mehr empfohlen. Stattdessen wird auf die Möglichkeit hingewiesen, serverseitige Redirects einzusetzen.</ins>  

Info Das datetime-Attribut erwartet eine Datum-Zeit-Angabe in der dargestellten Form (der Wert im Beispiel bedeutet: 25. Juni 2005, 11:00 Uhr bei plus 1 Stunde gegenüber Greenwich-Zeit). Die beim cite-Attribut angegebene URL-Adresse verweist auf eine Stelle in der HTML-4.01-Spezifikation, in der Änderungen gegenüber der älteren HTML-4.0-Spezifikation aufgelistet werden. Die Elemente ins und del weisen übrigens eine Besonderheit auf: Obwohl sie selbst zu den Inline-Elementen gehören, dürfen Sie sowohl Block– als auch weitere Inline-Elemente enthalten. Ein Konstrukt wie das Folgende ist also durchaus zulässig:

<ins>  <h3>Eine eingefügte Überschrift</h3>  <p>und ein eingefügter Absatz</p>  </ins>  

Fließtext

Widmen wir uns dem sichtbaren Dateikörper des HTML-Dokuments, also dem, was im Browser-Fenster angezeigt wird. Es handelt sich um alles, was zwischen <body> und </body> notiert wird.

HTML stellt ein ganzes Arsenal an Elementen bereit, um Inhalte ordentlich zu strukturieren. Aufgrund historischer Entwicklungen sind einige dieser Elemente heute veraltet oder sie gehören noch zum Standard, werden jedoch in der Praxis nicht mehr verwendet. Wir werden uns in diesem Abschnitt daher auf eine Auswahl an solchen Elementen beschränken, die modernes HTML im Sinne von „semantischem Markup“ repräsentieren und praxisrelevant sind.

Dabei sei noch mal ausdrücklich daran erinnert,

dass diese Elemente nur der inhaltlichen Strukturierung dienen. Stören Sie sich beim Ausprobieren nicht an der Darstellung Ihrer Versuche im Browser. Die Feinheiten der Darstellung werden später mithilfe von CSS realisiert. Es ist sogar eine durchaus empfehlenswerte Vorgehensweise, bei inhaltslastigen Projekten nicht mit dem optischen Design zu beginnen, sondern mit dem logischen Markup in HTML. Wenn die Strukturierung der Inhalte stimmt, dann lässt sich die Struktur mithilfe von CSS auch in ein angemessenes und schickes Layout bringen. In HTML wird zwischen Block– und Inline-Elementen unterschieden. Aus Textverarbeitungsprogrammen sind Ihnen möglicherweise Begriffe wie Absatz- und Zeichenformate geläufig. Diese Begriffe können zumindest als Verständnishilfe dienen: Block-Elemente entsprechen Absatzformaten und Inline-Elemente entsprechen Zeichenformaten. Dass in HTML allerdings nicht von Absatz- und Zeichenformaten die Rede ist, sondern eben von Block– und Inline-Elementen, hängt mit der strengeren Strukturierungsphilosophie von HTML und dem Boxmodell der Ergänzungssprache CSS zusammen. Ein Block-Element in HTML erstreckt sich über die gesamte verfügbare Breite und nimmt so viel Höhe ein wie vom Inhalt her erforderlich. „Verfügbare Breite“ ist dabei relativ zu verstehen.

Logische Bereiche

Wenn Webseiten aus logisch unterscheidbaren Bereichen bestehen, die später auch optisch als eigener Bereich erkennbar erscheinen sollen, dann sollten Sie diese Bereiche im Markup von vorneherein berücksichtigen. Ein Komplettlisting soll dies demonstrieren:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html lang="de">  <head>  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  <title>Bereiche</title>  </head>  <body>  <div id="Navigation">  <a name="aktuelleSeite" id="aktuelleSeite">Startseite</a>  <a class="Navi" href="produkte.html">Produkte</a>  <a class="Navi" href="php/shop.php">Shop</a>  <a class="Navi" href="unternehmen.html">Unternehmen</a>  <a class="Navi" href="jobs.html">Jobs</a>  <a class="Navi" href="impressum.html">Impressum</a>  <a class="Navi" href="sitemap.html">Sitemap</a>  </div>  <div id="Inhalt">  <div id="Seitenkopf">  <h1>Willkommen!</h1>  </div>  <div id="Seitentext">  <p>Für unsere Kunden bieten wir Produktinfos mit Direktbestellmöglichkeit (Shop) an. Unsere Geschäftspartner können sich über unser Unternehmen informieren. Besuchen Sie auch unsere Job-Seite!</p>  </div>  </div>  </body>  </html>  

Info Die Darstellung der Seite im Browser ist noch sehr spartanisch. Aber dennoch enthält der HTML-Quelltext bereits eine Menge in Hinblick auf ein späteres Seitenlayout, indem darin logische sinnvolle Bereiche definiert sind. Auf der Hierarchieebene unterhalb des body-Elements sind zwei Bereiche definiert: einer für die Navigation, eingeleitet durch <div id="Navigation">, und einer für den Seiteninhalt (<div id="Inhalt">). Mit <div></ div> werden in HTML Bereiche für logisch zusammenhängende Inhalte definiert. Das div steht für division (zu Deutsch: Abteilung, Bereich). Das Attribut id= mit den frei wählbaren Namen ist nicht zwingend erforderlich. Doch da wir die Bereiche zu einem späteren Zeitpunkt mithilfe von CSS zum Errichten eines Seitenlayouts benötigen, setzen wir das Attribut jetzt bereits ein. Außerdem erhalten unsere Bereiche durch die Namenszuweisung gleich ihre logische Bedeutung, was das Verständnis des Quelltextes verbessert. Das div-Element mit dem id-Namen Inhalt besteht im Beispiel selber wieder aus zwei untergeordneten Bereichen, die jeweils eigene Namen erhalten: Seitenkopf und Seitentext. Es ist also erlaubt und durchaus gängige Praxis, Bereiche ineinander zu verschachteln. Treiben Sie die Verschachtelung allerdings nicht auf die Spitze. Es gibt auch Webseiten, die sich „modern“ schimpfen, im Grunde aber nur aus einer div-Orgie bestehen, die jeder logischen Nachvollziehbarkeit entbehrt. Auch in unserem Beispiel ist ein div-Bereich nicht wirklich zwingend logisch begründbar, nämlich der Bereich Seitenkopf. Da dieser nichts weiter als eine Überschrift enthält, könnte man ihn auch weglassen und z.B. der Überschrift selber den id-Namen Seitenkopf geben. Im Beispiel sähe das so aus:

<h1 id="Seitenkopf">Willkommen</h1>  

Dennoch haben wir entschieden, die Überschrift in einen div-Bereich einzuschließen. Der Grund ist, dass wir zu einem späteren Zeitpunkt noch eine Grafikreferenz mit in diesen Bereich packen wollen, nämlich ein Logo.

Größe, Abstände, Rahmen und das Boxmodell

<p style="width: 200px">Text im Absatz mit festgelegter Größe. Um dies zu sehen, muss genug Text vorhanden und das Browserfenster nicht zu klein sein.</p>  <p>Text im Absatz ohne festgelegte Größe. Um dies zu sehen, muss genug Text vorhanden und das Browserfenster nicht zu klein sein.</p>  

Neben der Größe kann ein Blockelement auch einen Rahmen haben. Hierfür dienen die border-Befehle:

  • border-width gibt die Rahmenstärke an.
  • border-color gibt die Rahmenfarbe an. transparent ist ein durchsichtiger Rahmen.
  • border-style steuert, wie der Rahmen aussieht. dashed ist gestrichelt, dotted gepunktet, solid durchgezogen, double eine doppelte Linie, ridge ist gewölbt und groove wirkt reliefartig. none bedeutet ohne Rahmen, hidden, dass der Rahmen unsichtbar ist.

Hier ein einfaches Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- rahmen.html -->  <html>  <head>  <title>Rahmen</title>  </head>  <body>  <p style="width: 200px; border-width: 1px; border-style: solid; border-color: black;">  Text im Absatz mit Rahmen außen.</p>  <p style="border-width: 5px; border-style: groove; border-color: blue;">  Text im Absatz mit anderer Rahmenart.</p>  </body>  </html>  

Info Sie können für den Rahmen auch den Sammelbefehl border verwenden. Er enthält Stil, Breite und Farbe und zwar in beliebiger Reihenfolge, z.B.

border: 5px groove blue;  

Rahmen lassen sich auch für jede der vier Seiten einzeln festlegen. Dazu verwenden Sie die Befehle border-left, border-top, border-right und border-bottom. Diese vier Seitenangaben gibt es wiederum auch in Verbindung mit den drei Einzelbefehlen. Um also z.B. die Dicke der rechten Seite festzulegen, verwenden Sie border-right-width. Sie können die vier Seiten allerdings auch in den normalen border-Befehlen angeben, indem Sie zwei bis vier Werte hintereinander schreiben:

  • Bei zwei Werten gilt der erste für oben und unten, der zweite für links und rechts.
  • Bei dreien gilt der erste für oben, der zweite für links und rechts und der dritte für unten.
  • Bei vieren geht die Reihenfolge oben, rechts, unten und links. Hier ein Beispiel:
border-color: red green blue red;  

Bis jetzt „pappt“ der Text direkt am Rahmen. Dies können Sie allerdings mit dem Innenabstand des Blockelements steuern. Für den Innenabstand ist der CSS-Befehl padding zuständig. Den Abstand nach außen, das heißt vom Rahmen zu umliegenden Elementen, regelt margin. Wie beim Rahmen können Sie auch hier jeweils alle vier Seiten einzeln steuern. Diese zwei bilden zusammen mit dem Rahmen das so genannte Boxmodell, das für jedes Blockelement gilt: Der Nullpunkt ist die linke obere Ecke des Blockelements, an der es positioniert wird. Info Das Boxmodell wird nicht in jedem Browser korrekt interpretiert. Der Internet Explorer 5.0 und 5.5 zählen zur Breite eines Elements Innenabstand, also padding, und Rahmen, also border, dazu. Das heißt, dass diese Browser eine Box schmaler interpretieren als standardkonforme Browser. Der Internet Explorer 6 macht alles richtig, wenn ein XHTML-DOCTYPE angegeben ist. Wenn Sie Ihr Design völlig gleich gestalten wollen, können Sie einen so genannten Hack, also einen CSS-technischen Trick, verwenden, um diesen Effekt zu vermeiden. Allerdings ist das in der Praxis nur bedingt empfehlenswert.

Aufzählungslisten

Darunter sind Listen zu verstehen, deren Listenpunkte mit einem so genannten Bullet-Symbol (mancherorts auch „Böller“ genannt) beginnen. Die HTML-Spezifikation redet einfach nur von „unsortierten Listen“ (im Gegensatz zu den nummerierten Listen). Gedacht sind die Aufzählungslisten für alle Arten von zusammengehörigen Daten, Argumenten oder dergleichen, wobei die Reihenfolge keine Rolle spielt.

Eine einfache Aufzählungsliste hat in HTML folgendes Aussehen:

<ul>  <li>Listenpunkt</li>  <li>anderer Listenpunkt</li>  </ul>  

Info Eingeschlossen wird die Liste in <ul></ul>. Das steht für unordered list (zu Deutsch: unsortierte Liste). Jeder einzelne Listenpunkt wird durch <li></li> markiert – die Abkürzung bedeutet list item (zu Deutsch: Listeneintrag). Das ul-Element darf nichts anderes als li-Elemente enthalten, also keinen nackten Text oder andere Elemente außerhalb der li-Elemente. Die li-Elemente dürfen dagegen Text, andere Block-Elemente und andere Inline-Elemente enthalten. HTML-Quelltext dazu sieht folgendermaßen aus:

<ul>  <li>Listenpunkt</li>  <li>Unterliste:  <ul>  <li>Listenpunkt</li>  <li>Listenpunkt</li>  </li>  </ul>  

Info Zu beachten ist dabei, dass die untergeordnete Liste als normaler Listenpunkt mit führendem Text beginnt und daran anschließend die komplette untergeordnete Liste notiert wird. Am Ende wird der Listenpunkt, der die untergeordnete Liste enthält, ordnungsgemäß mit </li> abgeschlossen. Bei verschachtelten Listen wechseln die Browser üblicherweise das Bullet-Symbol. Um Einfluss darauf zu nehmen, welches Symbol angezeigt wird, müssen Sie CSS verwenden.

Nummerierte Listen

Nummerierte Listen ähneln vom syntaktischen Aufbau her den Aufzählungslisten. Der Unterschied besteht nur darin, dass sie mit <ol></ol> definiert werden, wobei ol für ordered list (zu Deutsch: geordnete Liste) steht. Die folgende Beispielnotation bewirkt eine einfache Nummerierung:

<ol>  <li>Aufstehen</li>  <li>Duschen</li>  <li>Frühstücken</li>  </ol>  

Info Das Verschachteln von nummerierten Listen ist genauso möglich wie bei Aufzählungslisten. Die Hoffnung, dass dadurch automatisch Nummerierungen wie 1.1, 1.2 usw. entstehen, wird jedoch enttäuscht. Solche Automatisierungsmechanismen unterstützt HTML leider nicht und nur durch spezielle CSS-Notationen lässt sich etwas Derartiges bewerkstelligen. Ebenfalls mit CSS lässt sich die Art der Nummerierung beeinflussen (z.B. alphabetische Nummerierung anstelle der numerischen).

Physische Auszeichnungen im Text

In HTML gibt es physische und logische Elemente zur Auszeichnung von Text. Physische Textauszeichnungen haben Bedeutungen wie „fett“ oder „kursiv“, stellen also direkte Angaben zur gewünschten Schriftformatierung dar. Bei physischen Elementen sollte der Webbrowser eine Möglichkeit finden, den so ausgezeichneten Text entsprechend darzustellen. Ebenso wie die logischen Elemente zur Auszeichnung von Text, gehören die hier beschriebenen Elemente zuden Inline-Elementen.

HTML-Elemente für physische Auszeichnung im Text

Es stehen verschiedene HTML-Elemente zur Verfügung, um Text physisch auszuzeichnen. Inline-Elemente für Auszeichnungen im Text müssen – zumindest in der HTML-Variante „Strict“ – innerhalb anderer Blockelemente vorkommen. Im nachfolgenden Beispiel ist ein Textabsatz notiert und innerhalb davon stehen mehrere physische Textauszeichnungen. Am Anfang des Textbereichs, der ausgezeichnet werden soll, wird ein einleitendes Tag (im Beispiel die Tag <b> und <i>) eingefügt. Am Ende des gewünschten Textbereichs wird ein entsprechendes Abschluss-Tag eingefügt (z.B. </b> bzw. </i>).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <title>Text des Titels</title>  </head>  <body>  <h1>Fett und schief</h1>  <p>Das Schwein ist <b>fett</b> und der Turm von Pisa ist <i>schief</i>.  <br>  Und was ist <b><i>fett und schief</b></i>?</p>  </body>  </html>  

Info Physische Textauszeichnungen lassen sich auch kombinieren. Folgende Elemente dieser Art stehen zur Verfügung:

<b></b> Zeichnet einen Text als fett aus.

<i></i> Zeichnet einen Text als kursiv aus.

<tt></tt> Zeichnet einen Text als dicktengleich formatiert aus (tt = Teletyper = Fernschreiber).

<u></u> Zeichnet einen Text als unterstrichen aus.

<strike></strike> Zeichnet einen Text als durchgestrichen aus.

<s></s> Zeichnet einen Text als durchgestrichen aus.

<big></big> Zeichnet einen Text als größer als normal aus.

<small></small> Zeichnet einen Text als kleiner als normal aus.

<sup></sup> Zeichnet einen Text als hochgestellt aus.

<sub></sub> Zeichnet einen Text als tiefgestellt aus. Info Sie können auch – wie im obigen Beispiel – Elemente dieser Art verschachteln. Dadurch sollten sich die Effekte addieren. Ein Text, der also beispielsweise als fett und innerhalb davon als kursiv ausgezeichnet wird, sollte fettkursiv dargestellt werden.

Physische Elemente für Textauszeichnung zusätzlich mit CSS formatieren

Mit Stylesheets können Sie auch physische Elemente nach weiteren Wünschen formatieren. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. die CSS-Eigenschaften Schriftformatierung, Hintergrundfarben und -bilder.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <title>Text des Titels</title>  </head>  <body>  <h1>Fett und schief mit Stil</h1>  <p>Das Schwert ist <b style="background-color:#FFCCCC">fett</b> und der Turm von Pisa ist <i style="font-weight:bold; background.color:#FFFF00">schief</i>.</p>  </body>  </html>  

Info Mit CSS erweitern Sie die Darstellung von Text um vielfältige Optionen, wie etwa eine farbliche Hinterlegung. Die beiden Elemente für fette und kursive Schriftauszeichnung erhalten im Beispiel zusätzlich unterschiedliche Hintergrundfarben. Das i -Element wird außerdem fett ausgezeichnet – mit Hilfe von CSS.

Blöcke mit präformatiertem Text

Der Ausdruck „präformatierter Text“ ist etwas gewöhnungsbedürftig. Gemeint ist damit, dass Text im Browser so wiedergegeben wird wie im Editor eingegeben, mit allen Leerzeichen, Zeilenumbrüchen, Einrückungen usw. Dieses Verhalten entspricht ja nicht den normalen Editierregeln von HTML. Manchmal ist ein solches Verhalten jedoch sehr wünschenswert, vor allem, wenn man in HTML-Texten Blöcke mit Programmlistings oder rein mit ASCII-Zeichen formatierte Tabellen oder Kunstwerke („ASCII-Art“) im Text darstellen möchte.

In HTML können Sie solche Blöcke mit <pre></pre> auszeichnen. Dabei steht pre für preformatted (präformatiert). Alles, was Sie zwischen diesen beiden Tags eingeben, wird so interpretiert wie im Editor eingegeben. Beachten Sie, dass der Browser dabei eine dicktengleiche Schriftart wie z.B. Courier verwendet, also eine Schriftart, bei der alle Zeichen die gleiche Breite haben. Denn nur so lassen sich viele bei präformatiertem Text gewünschte Effekte überhaupt sinnvoll darstellen. Ein Beispiel:

/--------------------------------------------------\  |          |        Average    | other    |  Misc  |  |          |-------------------| category |--------|  |          |  height |  weight |          |        |  |-----------------------------------------|--------|  | males    | 1.9     | 0.003   |          |        |  |-----------------------------------------|--------|  | females  | 1.7     | 0.002   |          |        |  \--------------------------------------------------/  

Info Diese mit Strichen und positioniertem Text „gemalte“ Tabelle können Sie in HTML mithilfe des pre-Elements so wie sie ist im Browser repräsentieren. Das pre-Element darf durchaus auch andere HTML-Elementeenthalten. Nicht selten wird das pre-Element auch dazu benutzt, um HTML-Quelltext im Browser darzustellen. Dabei müssen Sie jedoch wie bereits gelernt penibel darauf achten, dass Sie alle HTML-eigenen Zeichen maskieren. Andernfalls würde der Browser den HTML-Code interpretieren statt ihn darzustellen. Wir zeigen das Ganze am Beispiel der zuvor behandelten nummerierten Listen:

<ol>  <li>Aufstehen</li>  <li>Duschen</li>  <li>Frühstücken</li>  </ol>  

Info Im Browser wird dann der HTML-Quelltext der nummerierten Liste angezeigt, mit allen Einrückungen und Zeilenumbrüchen wie eingegeben.

Sonstige Block-Elemente für den Fließtext

Ergänzend zu den Standard-Blockelementen für Überschriften, Textabsätze, Listen und präformatierten Text bietet HTML noch ein paar weitere Block-Elemente zur Textgestaltung an, die bei konsequenter Verwendung zu einem reicheren semantischen Markup beitragen: Durch <blockquote></blockquote> markieren Sie ein Zitat, das als eigener Absatz dargestellt werden soll. Die meisten Browser stellen den Text eines so ausgezeichneten Inhalts eingerückt dar, was viele Möchtegern-Designer dazu verleitet hat, das blockquote-Element dazu zu verwenden, um Einrückungen jeder Art im Text zu realisieren. Solche Zweckentfremdungen, die auf eher zufälligen Default-Darstellungsweisen von Browsern beruhen, gehören aus heutiger Sicht zu den schlimmsten Verbrechen an HTML, die man begehen kann. Hüten Sie sich also davor, mit dem blockquote-Element irgendetwas anderes auszuzeichnen als ein alleinstehendes Zitat, und rücken Sie Texte mithilfe von CSS ein! Falls Sie im HTML-Quelltext auch die Quelle eines Zitats nennen möchten, so steht dafür das Attribut cite zur Verfügung. Ein Beispiel:

<blockquote cite="Cluetrain Manifest, http://www.cluetrain.de/, These 7" title="aus dem Cluetrain Manifest, http://www.cluetrain.de/">  Hyperlinks untergraben Hierarchien.  </blockquote>  

Info Das cite-Attribut hat jedoch keine sichtbare Wirkung im Browser. Deshalb haben wir im Beispiel außerdem noch das title-Attribut notiert, damit der Anwender die Quelle des Zitats erfährt, wenn er mit der Maus über den Text fährt. Ein weiteres Block-Element stellt HTML mit <address></address> zur Verfügung. Dieses Element ist zur Auszeichnung von Autorenangaben mit Kontaktmöglichkeit gedacht, z. B.:

<address>  Name Vorname, info@email.de  </address>  

Info Drei weitere Block-Elemente sind schließlich für den Texttyp „Glossar“ vorgesehen. Ein Glossar ist eine Art Liste, deren Einträge jeweils aus einem Glossareintrag („Term“) und einer Definition bestehen. In HTML sieht das wie im folgenden Beispiel aus:

<dl>  <dt>dl-Element</dt>  <dd>dient zur Markierung einer Glossarliste</dd>  <dt>dt-Element</dt>  <dd>dient zur Markierung eines Terms im Glossar</dd>  <dt>dd-Element</dt>  <dd>dient zur Markierung einer Definition im Glossar</dd>  </dl>  

Info Das Beispiel erklärt sich bereits selbst: Mit dem dl-Element schließen Sie die gesamte Glossar-Liste ein. Innerhalb davon werden abwechselnd je ein dt– und ein dd-Element notiert. Das dt-Element markiert einen Glossareintrag und das anschließende dd-Element die zugehörige Definition. Erwähnt werden soll abschließend noch das hr-Element: Durch Notieren von <hr> (in XHTML: <hr />) fügen Sie eine horizontale Trennlinie ein. Dies kann sinnvoll sein, um logische Textbereiche voneinander zu trennen.

Textabsätze definieren

Um „Absatzschaltungen“ in HTML zu erzeugen, müssen Sie das dafür vorgesehene Element verwenden. Schlampereien der Sorte „zweimal Enter eingeben und Leerzeile erzeugen“ funktionieren nicht, da der Zeilenvorschub in HTML als Whitespace-Zeichen gilt und mehrere Whitespace-Zeichen einfach zu einem Leerzeichen zusammengefasst werden. Gewöhnen Sie sich deshalb von vorneherein an, für Absätze in längerem Fließtext das p-Element zu benutzen:

<p>Hier der Text des Absatzes.</p>  <p>Und hier der nächste Absatz.</p>  

Info Das p steht für paragraph (zu Deutsch: Absatz). Wenn Sie wie empfohlen die strict-Variante von HTML verwenden, müssen übrigens alle Inhalte zwischen <body> und </body>in Block-Elemente eingeschlossen sein. Es ist also nicht erlaubt, zwischen <body> und </body> an irgendeiner Stelle direkt Text ohne umgebendes Block-Element zu notieren. Den Browsern sind solche Fehler zwar egal, doch die Validität des HTML-Dokuments geht durch solche Fehler unnötigerweise verloren.

Wenn Sie also sonst keine Strukturelemente im Dateikörper benötigen,

beispielsweise, weil Sie eine reine Textdatei in HTML abbilden wollen, dann verwenden Sie dort, wo in der Textdatei Absätze durch Leerzeilen simuliert werden, das p-Element. Für das p-Element wie für alle weiteren noch vorgestellten Elemente gilt wie für Überschriften: Die Default-Darstellung im Browser-Fenster können Sie später mit CSS beliebig ändern. Bisher haben Sie Text, der im Anzeigebereich des Browsers ausgegeben werden soll, einfach in den Gültigkeitsbereich des body-Elements geschrieben. In früheren HTML-Versionen war dies auch vollkommen in Ordnung. Seit der Version 4.0 (mit der wir uns befassen) ist dies aber nicht mehr HTML-konform. Zwar stellen die gängigsten Browser einen solchen Text fehlerfrei dar, dies bedeutet aber nicht, dass es kein Fehler ist, da Browser in der Regel über eine sehr hohe Fehlertoleranz verfügen. Anstatt den Text einfach im body-Element zu notieren, wird dafür das p-Element (p = engl. paragraph, dt. Absatz) verwendet. Dieses Element bietet auch sogleich einige Vorteile:

  • Nach einem p-Element ist ein deutlicher Absatz zum folgenden Element zu erkennen.
  • Mit einem speziellen Attribut lässt sich der Text wie in Textverarbeitungsprogrammen links, rechts, zentriert oder als Blocksatz ausrichten.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <!-- Beispiel für das p-Element -->  <html>  <head>  <title>Absatz</title>  </head>  <body>  Textabsatz  <p>Dieser Text steht in einem p-Element.</p>  <p>Dies ist ein weiterer Text in einem zweiten Absatz.</p>  </body>  </html>  

Info Wenn Sie das Beispiel mit den Zeilenumbrüchen in Ihren Editor übertragen, werden Sie bei der Darstellung im Browser zwei Dinge erkennen: den deutlichen Abstand zwischen beiden Absätzen und – obwohl der Text im zweiten Absatz im HTML-Dokument in drei Zeilen steht – dass der Browser den Text in nur einer Zeile darstellt. Diesen Effekt werde ich Ihnen an späterer Stelle noch einmal genauer erklären.

Absätze aufmöbeln

Bisher bezogen sich alle Formatierungen direkt auf den Text. Sie können aber auch die Blockelemente selbst formatieren und den Text in den Blockelementen ausrichten. Dies zeigen wir Ihnen hier hauptsächlich am Beispiel von Absätzen. Das Gesagte zum Ausrichten und zu den Rahmen gilt allerdings auch für andere Blockelemente wie Überschriften.

Ausrichten

Text im Absatz lässt sich recht einfach ausrichten. Dazu dient das Attribut align im <p>-Tag. Dieses Attribut kennen allerdings auch andere Blockelemente wie Überschriften und <div>-Elemente. align kann folgende Werte annehmen:

  • left für linksbündig. Dies ist der Standardwert.
  • center für zentriert
  • right für rechtsbündig
  • justify für Blocksatz. Dieser klappt allerdings in älteren Browsern nicht und führt oftmals zu komischen Ergebnissen, da Browser nicht die Darstellungsqualitäten von Satzprogrammen besitzen und so unschöne Lücken entstehen, da HTML keine Silbentrennung beherrscht.

Hier ein Beispiel für den Einsatz:

<p align="right">Text im Absatz mit rechtsbündiger Ausrichtung. Um dies zu sehen, muss genug Text vorhanden und das Browserfenster kleiner sein.</p>  <p align="justify">Text im Absatz mit Blocksatz. Um dies zu sehen, muss genug Text vorhanden und das Browserfenster kleiner sein.</p>  

In CSS gibt es als Entsprechung zum HTML-Attribut align den Befehl text-align. Er akzeptiert dieselben Werte wie align.

<p style="text-align: right">Text im Absatz mit rechtsb ündiger Ausrichtung. Um dies zu sehen, muss genug Text vorhanden und das Browserfenster kleiner sein.</p>  <p style="text-align: justify">Text im Absatz mit Blocksatz. Um dies zu sehen, muss genug Text vorhanden und das Browserfenster kleiner sein.</p>  

Die CSS-Version ist vorzuziehen, da das HTML-Attribut vom W3C als deprecated gekennzeichnet ist. Praktische Unterschiede gibt es allerdings ansonsten nicht. Info Achtung, im Internet Explorer richtet text-align auch verschachtelte Blockelemente aus. Dies ist aber ein fehlerhaftes Verhalten und funktioniert z.B. im Mozilla Firefox nicht.

Einzüge und spezielle Formate

Für Absätze gibt es noch einige Besonderheiten, um Einzüge, die erste Zeile und den ersten Buchstaben zu formatieren. Für einen Einzug der ersten Zeile ist der CSS-Befehl text-indent zuständig:

<p style="text-indent: 10pt;">Text im Absatz mit Einzug. Den Effekt sehen Sie mit mehr Text.</p>  <p>Text im Absatz ohne Einzug. Den Effekt sehen Sie mit mehr Text.</p>  

Um speziell die erste Zeile oder den ersten Buchstaben zu formatieren, gibt es zwei so genannte Pseudoklassen. Das sind CSS-Klassen mit vorgegebener Funktionalität. Sie erkennen sie an dem Doppelpunkt statt dem Punkt vor dem Klassennamen. Für diese Klassen können Sie dann beliebige CSS-Befehle festlegen. Zur Verfügung stehen:

  • :first-letter für den ersten Buchstaben eines Absatzes.
  • :first-line für die erste Zeile. Dies ergibt gerade in Verbindung mit text-indent interessante Effekte.

Hier ein Beispiel, das alle drei Befehle kombiniert. Allerdings interpretiert der Internet Explorer dies nicht korrekt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- first_letter_line.html -->  <html>  <head>  <title>Pseudoklassen und Absätze</title>  <style type="text/css"><!--  p {  font-family: Arial, Geneva, Helvetica, sans-serif;  font-size: 10pt;  text-indent: 10px;  }  p:first-line {  font-family: Courier, monospace;  color: blue;  }  p:first-letter {  font-size: 30pt;  line-height: 10pt;  color: red;  }  --></style>  </head>  <body>  <p>Pseudoklassen erlauben die Hervorhebung des ersten Buchstabens und der ersten Zeile.Den Effekt sehen Sie mit mehr Text.</p>  </body>  </html>  

Info Für first-letter ist hier die Zeilenhöhe angegeben, da der Zeilenabstand durch den größeren Buchstaben sonst für die ganze Zeile zu hoch wird.

Textausrichtung

Standardmäßig wird der mit Elementen der Textstrukturierung ausgezeichnete Text linksbündig ausgerichtet. Das heißt, dass ein Text, der sich über mehrere Zeilen erstreckt, an einem imaginären Rand auf der linken Seite ausgerichtet ist und eine vertikale Linie bildet. Um dies zu beeinflussen, gibt es das Attribut align und vier Parameter, um den Text, wie in den meisten Textverarbeitungsprogrammen auch, linksbündig, rechtsbündig, zentriert oder als Blocksatz auszurichten. Die entsprechenden Parameter lauten:

WertErklärung
leftRichtet den Absatz am linken Seitenrand aus.
rightRichtet den Absatz am rechten Seitenrand aus.
centerZentriert den Absatz in der Seitenmitte.
justifyRichtet den Absatz als Blocksatz aus.

Info Nun können wir das bereits bekannte p-Element mit einer neuen Ausrichtung versehen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <!-- Textausrichtung //-->  <html>  <head>  <title>Textausrichtung</title>  </head>  <body>  <p align="left">Dieser Absatz ist am linken Seitenrand ausgerichtet.</p>  <p align="right">Dieser Absatz ist am rechten Seitenrand ausgerichtet.</p>  <p align="center">Dieser Absatz ist zentriert.</p>  <p align="justify">Dieser Absatz wurde mit Hilfe des align-Attributs als Blocksatz ausgerichtet und wurde mit Absicht mit einem längeren Text versehen, um den Parameter justify auch beispielhaft darstellen zu können. Dieser Absatz wurde mit Hilfe des align-Attributs als Blocksatz ausgerichtet und wurde mit Absicht mit einem längeren Text versehen, um den Parameter justify auch beispielhaft darstellen zu können.</p>  </body>  </html>  

Info Bei der Verwendung des Parameters justify ist eine wichtige Tatsache zu berücksichtigen: Damit der Absatz auch wirklich als Blocksatz ausgerichtet wird, muss er sich mindestens über zwei Zeilen erstrecken. Ansonsten wäre zum Parameter left kein optischer Unterschied erkennbar. Berücksichtigen Sie dies, falls Sie der Meinung sind, dass der Absatz vom Browser nicht korrekt ausgerichtet dargestellt wird.

Trennlinien definieren

Trennlinien dienen der optischen Abgrenzung von nicht unmittelbar zusammengehörigen Textabschnitten oder allgemein zur Auflockerung. Eine Trennlinie erzeugt einen eigenen Absatz.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <title>Text des Titels</title>  </head>  <body>  <p>Hier ist ein Abschnitt zu Ende.</p>  <hr>  <p>Und hier beginnt etwas Neues.</p>  </body>  </html>  

Info <hr> fügt eine Trennlinie ein (hr = horizontal rule = Querlinie). Dabei ist es egal, ob das Tag am Ende der Zeile des vorherigen Absatzes steht oder in einer eigenen Zeile (wie im Beispiel), oder am Anfang des folgenden Absatzes. Wenn Sie XHTML-konform arbeiten, müssen Sie das hr-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das allein stehende Tag in der Form <hr />. Mit Hilfe diverser HTML-Attribute im <hr>-Tag können Sie eine Trennlinie auffälliger gestalten. Diese Attribute sind allerdings allesamt als deprecated eingestuft und sollen künftig aus dem HTML-Standard entfallen. Empfohlen wird die Gestaltung von Trennlinien mit CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <title>Text des Titels</title>  </head>  <body>  <p>Hier ist ein Abschnitt zu Ende.</p>  <hr noshade width="300" size="3* align="left">  <p>Und hier beginnt etwas Neues.</p>  </body>  </html>  

Info Durch das Attribut noshade erreichen Sie, dass der Browser die Trennlinie massiv und durchgezogen, also nicht schattiert anzeigt (noshade = unschattiert). Wenn Sie XHTML-konform arbeiten, müssen Sie das Attribut in der Form noshade="noshade" notieren, da XML-basierte Sprachen keine Attribute ohne Wertzuweisung erlauben. Durch das Attribut width= (width = Breite) erreichen Sie, dass der Browser die Trennlinie so breit anzeigt wie angegeben. Sie können eine Zahl oder einen Prozentwert angeben. Mit einer Zahl, z.B. 300, erzwingen Sie, dass die Trennline so viel Pixel breit dargestellt wird wie angegeben. Mit einem Prozentwert erreichen Sie, dass die Trennlinie maximal so viel Breite des Anzeige-Fensters einnimmt wie angegeben. Für eine prozentuale Angabe notieren Sie hinter der Zahl einfach ein Prozentzeichen (%). Durch das Attribut size= (size = Größe) können Sie die Höhe (Dicke) der Trennlinie bestimmen. Die Voreinstellung beträgt 2 Punkt. Mit dem Wert 1 erzwingen Sie also eine besonders dünne Trennlinie, mit Werten über 2 können Sie dickere als die normalen Trennlinien erzeugen. Mit align="1eft" erreichen Sie, dass die Trennlinie linksbündig ausgerichtet wird (align = Ausrichtung left = links). Mit align="right" wird die Trennlinie rechtsbündig ausgerichtet (right = rechts) und mit align="center" zentriert (Voreinstellung). Das Ausrichten von Trennlinien ist allerdings nur in Verbindung mit dem Attribut width= sinnvoll, da die Trennlinie sonst stets über die gesamte verfügbare Breite geht.

Trennlinien mit CSS gestalten

Das <hr>-Tag können Sie auch mit CSS gestalten. Das ist strikt HTML-konform und Sie haben noch deutlich mehr Gestaltungsmöglichkeiten als mit HTML-Attributen. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften: Ausrichtung und Absatzkontrolle, Außenrand und Abstand, Rahmen, Positionierung und Anzeige von Elementen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <title>Text des Titels</title>  </head>  <body>  <p>Hier ist ein Abschnitt zu Ende.</p>  <hr noshade style="width:300px; color:yellow; height:5px; text-allign:left; border:1px solid blue;">  <p>Hier beginnt etwas Neues.</p>  </body>  </html>  

Info Mit CSS lassen sich Trennlinien weitgehend beeinflussen – allerdings ist der Effekt nur in den neusten Browser-Versionen sichtbar. Das hr-Element erhält im Beispiel eine Breite von 300 Pixeln, eine Höhe von 5 Pixeln, wird linksbündig ausgerichtet, wird in gelber Farbe dargestellt und erhält noch einen dünnen blauen Rahmen drum herum.

Webseiten mit Text und Links

Wer an seiner ersten Webseite bastelt, beginnt meist mit ein wenig Inhalt. Das mag ein Text über sich selbst, die eigene Firma oder das Hobby sein. Wie Sie diesen Text in HTML realisieren und mit CSS garnieren, sprich verschönern, erfahren Sie in diesem Artikel.

Sobald der Text fertig ist, wird es sehr schnell notwendig, auf andere Seiten zu verweisen. Sei es, dass die eigene Website aus mehreren Seiten bestehen soll oder dass eine befreundete Website nach einem Link verlangt. Vorsicht bei Links nach außen.

Formatierung

Sie können entweder den gesamten Absatz oder auch nur Bereiche eines Textes formatieren. Für Teilformatierungen bieten sich eigene Formatiertags wie <b> für fetten Text an. Wollen Sie per CSS formatieren, greifen Sie zum <span>-Tag, um einen Textbereich zu markieren.

Schrift

Für die Schriftformatierung gab es früher, also vor der Einführung von CSS, das so genannte <font>-Tag. Dies sollten Sie aus zwei Gründen nicht mehr verwenden:

  • Zum einen ist es vom HTML-Gralshüter W3C als deprecated, also nicht mehr empfohlen gekennzeichnet.
  • Zum anderen kommt wirklich jeder relevante Browser mit den viel besseren CSS-Befehlen zur Schriftformatierung zurecht.

Die wichtigste Schriftformatierung ist sicherlich die Schriftart, denn sie hat vielleicht die größte Auswirkung auf das optische Erscheinungsbild. Bei der Schriftart gibt es im Web eine große Einschränkung: Der Nutzer muss die Schrift besitzen, die Sie verwenden. Sie haben also nicht die freie Wahl aus allen auf Ihrem System installierten Schriften, sondern Sie müssen eine der auf (fast) allen Systemen vorhandenen Schriften wie Times New Roman, Arial, Helvetica, Verdana, Tahoma, Courier etc. verwenden. Info Downloadbare Schriften sollten dieses Problem beseitigen. So gab und gibt es sowohl von Bitstream mit TrueDoc eine Lösung für Netscape 4.x als auch von Microsoft die Web Embedded Fonts für den Internet Explorer. Beide Lösungen sind aber jeweils auf die genannten Browser beschränkt und völlig inkompatibel. Insofern ist das Thema downloadbare Schriften heute tot. Wenn Sie eine spezielle Schrift einsetzen möchten, können Sie das in der Praxis nur, indem Sie sie in eine Grafik umwandeln. Die Schriftart geben Sie in CSS mit dem Befehl font-family an. Sie können mehrere Schriftarten durch Kommata getrennt angeben. Der Browser sucht dann nach der ersten; findet er sie nicht, nimmt er die zweite und so weiter. Außer einer Schriftart können Sie auch eine Schriftfamilie nehmen. Das ist eine bestimmte Art von Schriften. Die genaue Schrift legt dann der Browser bzw. das System fest. Tabelle zeigt die möglichen Schriftfamilien.

SchriftfamilieSchriftBeschreibung
sans-serifHelvetica, Arial, Verdana, GenevaSchriften ohne Serifen, das heißt keine Verästelungen an den Enden der Buchstaben
serifTimes New Roman, Garamond, GeorgiaSchriftart mit Serifen
monospaceCourier, Everson Monodiktengleiche Schriftarten; alle Buchstaben sind gleich breit
cursiveSnell Roundhand, Adobe Poeticahandschriftenähnlich, mit verbundenen Buchstaben oder anderen kursiven Charakteristika
fantasyCottonwood, Alpha Geometriqueaußergewöhnliche Schriften z.B. mit Symbolen oder für spezielle Einsatzzwecke

Hier ein Beispiel für das Festlegen von Schriftarten:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- font_family.html -->  <html>  <head>  <title>Schriftart</title>  </head>  <body>  <p style="font-family: Verdana, Arial, Helvetica, sans-serif;">  Text mit serifenloser Schrift.</p>  <p style="font-family: Courier, monospace;">  Diktengleiche Schrift z.B. für Quellcode-Darstellung.</p>  </body>  </html>  

Info Im Web sind hauptsächlich serifenlose Schriften wie Arial und Verdana gebräuchlich, da sie gut lesbar sind. Vor allem Verdana ist zurzeit in. Zusammengesetzte Schriftnamen wie Times New Roman werden in Anführungszeichen geschrieben. Wenn Sie die CSS-Befehle im style-Attribut in doppelte Anführungszeichen setzen, müssen Sie natürlich einfache Anführungszeichen verwenden.

Schriftgröße und -farbe

Wenn Sie die Schriftart festgelegt haben, können Sie noch Schriftgröße und -farbe festlegen. Für die Schriftgröße ist font-size zuständig. Wichtig ist die Einheit, die direkt nach der Zahl (ohne Leerzeichen) folgt. Sie haben hier wie bei jeder Maßangabe alle CSS-Maßeinheiten zur Auswahl. Diese unterscheiden sich in absolute Größen und relative Größen. Dies sind die absoluten Größen:

  • cm für Zentimeter.
  • mm für Millimeter.
  • in ist ein Zoll oder Inch. Ein Inch entspricht 2,54 cm.
  • pt ist ein Punkt und entspricht 1/72 Inch. Diese Einheit kommt in diesem Artikel für Schriftgrößen zum Einsatz.
  • pc ist ein Pica und entspricht 12 Punkt.

Und hier die relativen Größen:

  • px entspricht einem Pixel, also einem Bildschirmpunkt. Die Größe eines Pixels ist abhängig von der Auflösung des Bildschirms (sie reicht im Allgemeinen von 72 bis 96 Pixel pro Inch). Diese Maßeinheit eignet sich hervorragend für Positionierungs- und Größenangaben. Bei Schriftarten ist sie nicht sinnvoll, da der Internet Explorer Schrift mit Pixelangaben nicht skalieren kann.
  • em bestimmt die Schriftgröße relativ zur aktuellen Größe. Messgrundlage ist die Schrifthöhe einer bestimmten Schriftart. Ist diese Schrift 14 pt hoch, entspricht dies 1em.
  • ex bestimmt die Schriftgröße relativ zur Größe des Buchstabens x. 1 ex entspricht meist einem halben em.
  • % für Prozentangaben abhängig von der Fenstergröße oder bei Schriftarten von der normalen Schriftgröße. Wird für Schrift kaum verwendet.

Die Schriftfarbe steuern Sie mit dem color-Befehl. Hier ist wichtig zu wissen, wie im Web Farben angegeben werden. Die Grundlage der Farben im Web beziehungsweise auf dem Monitor ist das RGB-Farbmodell. RGB steht für Rot, Grün und Blau. Diese drei Grundfarben bilden zusammen alle darstellbaren Farben. Eine Farbe setzt sich dabei aus Helligkeitsanteilen von Rot, Grün und Blau zusammen – deswegen nennt man das RGB-Modell auch additiv. Von jeder der drei Grundfarbengibt es insgesamt 256 Helligkeitsstufen, die von den Zahlen 0 bis 255 dargestellt werden. 255 Rot, 0 Grün und 0 Blau wäre dementsprechend reines Rot. 255 von jeder Grundfarbe ergibt zusammen Weiß, 0 von jeder Grundfarbe ergibt Schwarz. Info Früher sprach man von 216 websicheren Farben. Websicher deswegen, weil diese Farben sowohl unter Windows als auch am Mac vorhanden waren, wenn der Monitor oder die Grafikkarte nur 256 Farben darstellen konnte. Hätte man andere Farben verwendet, wären diese zur jeweils nächstähnlichen Farbe verschoben worden, was oft recht psychedelische Effekte hatte. Heutzutage unterstützen fast alle Monitore mehr Farben und die websicheren Farben sind in der Versenkung verschwunden. Die Farbkombinationen lassen sich in CSS auf folgende Arten schreiben:

  • Als RGB-Farbe mit dem Farbwert in dezimalen Zahlen:
color: rgb(255, 0, 0);  
  • Als RGB-Farbe in hexadezimaler Schreibweise. Diese Schreibweise wird auch von HTML verwendet:
color: #FF0000;  

oder bei jeweils zwei gleichen Ziffern auch:

color: #F00;  

Die hexadezimale Schreibweise basiert auf einem Zahlensystem mit der Basis 16 statt mit der Basis 10. Für die Zahlen 10 bis 15 kommen die Buchstaben von A bis F hinzu. Dadurch lässt sich jede Helligkeitsstufe in zwei Ziffern schreiben. Die Umrechnung erfolgt so: Sie nehmen den RGB-Wert und teilen ihn durch 16. Das ganzzahlige Ergebnis ist die erste Ziffer. Bei 207 ergibt dies 12, also C. Der ganzzahlige Rest der Division ist die zweite Ziffer. Zum Ausrechnen multiplizieren Sie 12 mit 16, was 192 ergibt, und ziehen das von 207 ab. Die zweite Ziffer ist also 15 und damit F. Daraus ergibt sich, dass 207 in hexadezimaler Schreibweise CF entspricht. Hierzu können Sie natürlich auch den Taschenrechner des Betriebssystems verwenden.

  • Als Farbname. CSS sieht sechzehn standardisierte englischsprachige Farbnamen vor wie z.B. red für Rot, blue für Blau und green für Grün. Dazu gibt es noch viele andere Farbnamen, die viele Browser unterstützen.
color: red;  

Info color ist der einzige Befehl direkt zur Schriftformatierung, der ohne vorangestelltes font auskommt. Hier nun ein Beispiel, das Schriftgröße und Farbangabe miteinander verbindet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- font_size_color.html -->  <html>  <head>  <title>Schriftart</title>  </head>  <body>  <p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: red;">  Text mit serifenloser Schrift.</p>  <p style="font-family: Courier, monospace; font-size: 2em; color: rgb(255, 51, 76);">  Diktengleiche Schrift z.B. für Quellcode-Darstellung.</p>  </body>  </html>  

Fett und kursiv

Die Schriftdicke und die Schrägstellung von Textpassagen gehören zu den wichtigsten Auszeichnungsmerkmalen für einzelne Textbereiche. Fett und kursiv gibt es dementsprechend nicht nur in Word, sondern auch in HTML und CSS. Hier handelt es sich um einen der Fälle, wo die HTML-Befehle noch genauso gebräuchlich sind wie die CSS-Pendants. Wir zeigen Ihnen deswegen beide: In HTML verwenden Sie das <b>-Tag, um einen Bereich fett hervorzuheben, und das <i>-Tag, um ihn kursiv zu stellen. Beide lassen sich natürlich auch beliebig kombinieren. Allerdings sollten Sie sie XHTML-konform nur in Blockelementen wie einem Absatz, einem <div>-Tag oder einer Tabelle verwenden.

<p>Treffen am <b>3.7.2020</b> in <i>New York</i>.</p>  

In CSS ist für die Schriftdicke font-weight verantwortlich. Dieser Befehl verwendet entweder die absolute Angabe bold für fett, relative Angaben wie bolder (dicker) und lighter (dünner) oder die Zahlen von 100 bis 700, wobei 400 eine normale Schrift darstellt. In der Praxis ist zu 99 % bold im Einsatz, da die anderen je nach Schriftschnitt keine Auswirkungen haben.

font-style sorgt mit dem Wert italic für kursive Schrift. Hier ein zur vorherigen HTML-Variante funktionsgleiches Beispiel:

<p>Treffen am <span style="font-weight: bold">3.7.2020</span> in <span style="font-style: italic">New York</span>.</p>  

Info Es gibt für font-style noch den Wert oblique, der eine Schrift ebenfalls kursiv stellt. Der Teufel steckt hier im Detail: italic verwendet nach Möglichkeit eine kursive Version der Schrift auf dem System (einen so genanten Schriftschnitt). Nur wenn keiner vorhanden ist, wird die Schrift per Berechnung kursiv gestellt. oblique berechnet automatisch und ignoriert kursive Schriftschnitte.

Typographische Befehle

Typographie ist die Lehre von Schrift und Schriftgestaltung. HTML war ursprünglich aus typographischer Sicht ein Trauerspiel, da es kaum Möglichkeiten gab, auf das Aussehen des Textes Einfluss zu nehmen. Mit CSS hat sich nicht nur einiges bei den gebräuchlichen Befehlen aus den letzten beiden Abschnitten geändert, sondern auch im Speziellen sind neue Möglichkeiten hinzugekommen:

  • font-variant wird hauptsächlich dazu eingesetzt, Text mit dem Wert small-caps in Kapitälchen umzuwandeln. Kapitälchen heißt, dass alle Kleinbuchstaben als verkleinerte Großbuchstaben dargestellt werden. Je nach Schriftart kann es dafür sogar einen eigenen Schriftschnitt geben. Das Gegenstück zu small-caps ist der Standardwert normal.
<p style="font-variant: small-caps;">  Absatz in Kapitälchen.</p>  
  • text-transform wandelt einen Text in Kleinbuchstaben (lowercase), Großbuchstaben (uppercase) oder große Anfangsbuchstaben und dann Kleinschreibung (capitalize) um.
<p style="text-transform: uppercase;">  Text wird automatisch in Großbuchstaben umgewandelt.</p>  
  • text-decoration dient dazu, Text auszuzeichnen. Die Möglichkeiten sind dabei recht weit reichend: underline unterstreicht, line-through streicht durch und wird z.B. dazu verwendet, ältere, nicht mehr gültige Gedanken in Texten festzuhalten. overline überstreicht, fügt also eine Linie über dem Text ein. none entfernt jede Art von Strich. Mit dem Wert blink können Sie außerdem einen Text zum Blinken bringen. Das klappt allerdings nicht im Internet Explorer.
<p style="text-decoration: underline;">Besonders wichtige Gedanken <span style="text-decoration: line-through;">werden unterstrichen</span> <span style="text-decoration: none; font-weight: bold;">fett hervorgehoben</span>, nicht mehr gültige durchgestrichen.</p>  

Info text-decoration kommt oftmals bei Links zum Einsatz. Mit text-decoration: none; lässt sich nämlich die Unterstreichung des Links entfernen. Allerdings sollten Sie dann darauf achten, dass Links nach wie vor gut genug zu erkennen sind. Unterstreichungen im normalen Text sollten Sie weitgehend vermeiden, da sie zu sehr an Links erinnern.

  • line-height bestimmt die Zeilenhöhe. Die Angabe erfolgt oft in Prozent oder Punkt.
<p style="line-height: 200%;">  Textabsatz mit besonders hohem Zeilenabstand.</p>  

Nur ein Bereich, nämlich hochgestellte und tiefgestellte Buchstaben, ist eher eine Sache von HTML als von CSS. HTML sieht hier nämlich die Tags <sup> (hochgestellt) und <sub> (tiefgestellt) vor, für die es keine direkte CSS-Entsprechung gibt.

<p>x<sup>2</sup> + a<sub>8</sub> = c<sup>3 </sup></p>  

Komplexere Formeln lassen sich in HTML nicht mehr ausdrücken. Diese stellt man entweder als Grafiken ins Netz oder verwendet eine Technologie wie MathML, eine auf XML basierende Sprache für mathematische Formeln. Letztere benötigt allerdings ein eigenes Browser-Plug-In. Info Der Befehl font fasst font-style, font-variant, font-weight, font-size/line-height und font-family zusammen. Unbedingt vorhanden sein müssen font-sizeund font-family, und zwar immer und in genau in ihrer Position am Ende der Aufzählung, die anderen drei sind optional und können in ihrer Reihenfolge vertauscht werden. Separat festlegen müssen Sie color.

Überschriften

HTML unterscheidet sechs Überschriftebenen. In der Praxis werden allerdings selten mehr als vier Ebenen benötigt und die Browser bieten auch meist nur für die ersten vier Ebenen sinnvolle Default-Formatierungen an.

Die Überschriftenebene ist an der Ziffer im einleitenden und abschließenden Überschriften-Tag erkennbar:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <!-- Beispiel für Überschriften in HTML -->  <html>  <head>  <title>Überschrift</title>  </head>  <body>  <h1>Überschrift 1. Ordnung</h1>  <h2>Überschrift 2. Ordnung</h2>  <h3>Überschrift 3. Ordnung</h3>  <h4>Überschrift 4. Ordnung</h4>  <h5>Überschrift 5. Ordnung</h5>  <h6>Überschrift 6. Ordnung</h6>  </body>  </html>  

Alle Überschriftenelemente beginnen mit h (heading zu Deutsch: Überschrift). Die Ziffer dahinter bezeichnet die Überschriftenebene. Achten Sie darauf, dass Sie beim Abschluss-Tag einer Überschrift stets die gleiche Ebenenziffer angeben wie beim Start-Tag. Webbrowser verwenden für die Darstellung von Überschriften Default-Werte. Zweifellos entspricht diese kaum je den Wünschen, die Sie an die Darstellung haben: Ausrichtung, Schriftart, Schriftgröße, Farbe, Abstände, eventuell auch Schmuckrahmen, eigene Hintergrundfarbe usw. All das können Sie später mithilfe von CSS bewerkstelligen. An dieser Stelle wollen wir uns mit der Default-Darstellung begnügen. HTML kennt für Text noch weitere Blockelemente außer dem normalen Absatz: die Überschriften. Sie reichen von <h1> bis <h6>. <h1> ist dabei die Überschrift der obersten Ebene. Überschriften werden vom Browser selbstständig mit anderer Schriftgröße und Hervorhebung formatiert. Info In der Praxis macht es allerdings mehr Sinn, die Formatierung von Überschriften per CSS selbst zu übernehmen und die Überschriften-Tags nur als logische Auszeichnung zu verwenden. Logisch heißt, dass Sie für eine oberste Überschriftenebene auch nur <h1> verwenden und darunter direkt <h2> und nicht wegen kleinerer Schriftgröße <h3> oder <h4>. Ein strukturierter Text zeigt, wie die Überschriften funktionieren. Statt realen Inhalten finden Sie hier kurze Platzhalter:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- ueberschriften.html -->  <html>  <head>  <title>Überschriften</title>  </head>  <body>  <h1>Thema des Kapitels</h1>  <p>Vortext.</p>  <h2>Inhalt 1</h2>  <p>Beschreibung.</p>  <h3>Unterpunkt 1.1</h3>  <p>Erläuterung.</p>  <h2>Inhalt 2</h2>  <p>Beschreibung.</p>  </body>  </html>  
  • 1. Erstellen Sie einen <style>-Block im Kopf der HTML-Seite.
  • 2. Zuerst legen Sie eine Schriftart für die gesamte Seite fest. Dies geschieht am besten für das <body>-Tag, da die Schriftart an alle untergeordneten Elemente vererbt wird.
body {  font-family: Arial, Geneva, Helvetica, sans-serif;  }  

Info Der Netscape Navigator 4.x vererbt nicht korrekt. Wenn Sie eine Schriftart auch in Tabellen verwenden möchten, müssen Sie die Tags für Tabellenzellen mit einbeziehen:

body, td, th {  font-family: Arial, Geneva, Helvetica, sans-serif;  }  
  • 3. Anschließend formatieren Sie die normalen Absätze. Diese Reihenfolge ist zwar nicht nötig, eine logische Anordnung hilft aber, den Code auch im Nachhinein noch verstehen und warten zu können.
p {  font-size: 10pt;  }  
  • 4. Als Nächstes ist Überschrift 1 dran. Sie wird vom Browser automatisch sehr groß und fett formatiert. Die fette Formatierung ist in Ordnung, aber die Größe schrauben wir herunter.
h1 {  font-size: 14pt;  font-weight: bold;  }  

Eigentlich müssten Sie font-weight hier nicht angeben. Da einige Nutzer aber auch eigene Stilangaben treffen, wenn Ihre Stilangaben fehlen, haben wir uns dies angewöhnt.

  • 5. Überschrift 2 formatieren Sie ähnlich wie Überschrift 1, nur ein wenig kleiner:
h2 {  font-size: 12pt;  font-weight: bold;  }  
  • 6. Bei Überschrift 3 entfernen Sie die fette Formatierung und verwenden stattdessen kursiv:
h3 {  font-size: 10pt;  font-weight: normal;  font-style: italic;  }  

Achten Sie immer auf die Standardwerte. Überschrift 3 ist standardmäßig fett formatiert. Das heißt, Sie müssen in CSS font-weight auf normal setzen, um den Fettdruck auszuschalten.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <!-- ueberschriften_format.html -->  <html>  <head>  <title>Überschriften</title>  <style type="text/css"><!--  body {  font-family: Arial, Geneva, Helvetica, sans-serif;  }  p {  font-size: 10pt;  }  h1 {  font-size: 14pt;  font-weight: bold;  }  h2 {  font-size: 12pt;  font-weight: bold;  }  h3 {  font-size: 10pt;  font-weight: normal;  font-style: italic;  }  --></style>  </head>  <body>  <h1>Thema des Kapitels</h1>  <p>Vortext.</p>  <h2>Inhalt 1</h2>  <p>Beschreibung.</p>  <h3>Unterpunkt 1.1</h3>  <p>Erläuterung.</p>  <h2>Inhalt 2</h2>  <p>Beschreibung.</p>  </body>  </html>  

Zeilenumbruch erzwingen

Um trotzdem einen Zeilenumbruch erzwingen zu können, wird das br-Element (br = line break, = Zeilenumbruch) verwendet. Dieses Element, wie auch viele weitere, die Sie kennenlernen werden, besitzt eine Besonderheit: Es gibt kein Ende-Tag zum br-Element, da es einen Text nicht direkt formatiert und keine weiteren Elemente enthalten darf – es gibt also keinen Gültigkeitsbereich.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <!-- Beispiel für Zeilenumbrüche im p-Element -->  <html>  <head>  <title>Listing 2.2</title>  </head>  <body>  <p>Dieser Absatz enthält sehr viel Text  <br>,  der im      HTML-Dokument aber ein vollkommen anderes Erscheinungsbild  <br>  besitzt,         als die        Ausgabe lässt.  </p>  </body>  </html>  

Info <br> (br = break = Umbruch) fugt an der gewünschten Stelle einen Zeilenumbruch ein. Dabei ist es egal, ob das allein stehende Tag am Ende der vorherigen Zeile steht (wie im Beispiel) oder in einer eigenen Zeile, oder am Anfang der folgenden Zeile. Wenn Sie XHTML-konform arbeiten, müssen Sie das br-Element als Inhaltsleer kennzeichnen. Dazu notieren Sie das allein stehende Tag in der Form <br />.

Automatischer Zeilenumbruch

Sie können einen Textbereich bestimmen, in dem kein automatischer Zeilenumbruch erfolgt. Alles, was innerhalb dieses Bereichs steht, wird in einer langen Zeile atgezeigt. Der Anwender kann dann mit der horizontalen Scroll-Leiste die überlangen Textzeile anzeiget Diese Möglichkeit gehört jedoch nicht zum offiziellen HTML-Sprachstandard. Sie sollten sie daher vermeiden.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01/EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <title>Text des Titels</title>  </head>  <body>  <h1>ARD und ZDF</h1>  <nobr>Die vom ZDF sagen die von ARD senden ständig Wiederholungen, und die vom ARD sagen die von ZDF senden ständig Wiederholungen, und so wiederholen sich ARD und ZDF ständig ohne überhaupt etwas zu senden.</nobr>  </body>  </html>  

Info Erläuterung: <nobr> bewirkt, dass der auf das Tag folgende Text nicht umbrochen wird (nobr = no break = kein umbruch). Am Ende des Textabschnitts, der nicht umbrochen werden soll, notieren Sie das abschließende Tag </nobr>. Wenn Sie Textzeilen unabhängig vom Anzeigefenster des Anwenders genau kontrollieren und nach HTML-Standard arbeiten wollen, können Sie präformatierten Text einsetzen.

Geschützte Leerzeichen

Wie Sie verhindern können, dass bei einem Leerzeichen ein automatischer Zeilenumbruch erfolgen darf, zeigt Ihnen folgendes Beispiel.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <title>Text des Titels</title>  </head>  <body>  <h1>HTML 2.0 und HTML 4.0</h1>  <p>Es gibt vieles, worin sich HTML 2.0 und HTML 4.0 unterscheiden.</p>  </body>  </html>  

Info Die Zeichenfolge &nbsp; erzeugt ein geschütztes Leerzeichen (nbsp = nonbreaking space = nicht umbrechbares Leerzeichen). Es wird ein normales Leerzeichen atgezeigt, doch an dieser Stelle kann kein Zeilenumbruch erfolgen. Notieren Sie die Zeichenfolge inklusive kaufrnännisches Und am Beginn und Strichpunkt am Ende. Die gleiche Wirkung erzielen Sie durch Notieren der Zeichenfolge &#11160;. Zu dieser Art von Zeichennotation siehe auch benannte Zeichen für den Zeichensatz ISO 8859-1 im Anhang. Durch Notieren mehrerer solcher benannter Zeichen hintereinander können Sie auch mehrere Leerzeichen in Folge erzwingen.

Zeilenumbruch erlauben

Webbrowser umbrechen Text normalerweise nur bei Leerzeichen, weil durch Leerzeichen Wörter voneinander abgegrenzt werden. Sie können explizit weitere Stellen markieren, an denen der Browser den Text umbrechen darf. Dies gilt für alle Absatzarten in HTML. Diese Möglichkeit gehört jedoch nicht zum offiziellen HTML-Sprachstandard. Sie sollten sie daher vermeiden.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01/EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <title>Text des Titels</title>  </head>  <body>  <h1>Langes Wort</h1>  <p>Donaudampfschiffahrt-<wbr>Kapitänsmütze Donaudampfschiffahrt-<wbr>Kapitänsmütze ... </p>  </body>  </html>  

Info Mit <wbr> markieren Sie eine Stelle, an der getrennt werden darf, falls diese Stelle bei der Bildschirmanzeige am Ende der Zeile steht (wbr = word break = Umbruch innerhalb eines Wortes). Sinnvoll ist dies bei langen Wörtern oder aus Bindestrichen bestehenden Ausdrücken. Innerhalb von Abschnitten mit verhindertem Zeilenumbruch bewirkt <wbr>, dass an der betreffenden Stelle trotzdem ein Umbruch erfolgen darf.

Zitate definieren

Sie können Zitate von Fremdautoren in einem eigenen, anders formatierten (zumeist eingerückten) Absatz hervorheben. Es handelt sich dabei jedoch um eine logische, inhaltliche Auszeichnung. Wie diese Absätze genau formatiert werden, bestimmt letztlich der Webbrowser. Die Vorgabe ist jedoch, solche Absätze auffällig und vom übrigen Text unterscheidbar anzuzeigen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <title>Text des Titels</title>  </head>  <body>  <h1>Franz Kafka</h1>  <p>Über die Krähen und den Himmel schreibt Franz Kafka:</p>  <blockqoute>  Die Krähen behaupten, eine einzige Krähe könne den Himmel zerstören; das ist zweifellos, beweist aber nichts gegen den Himmel, denn Himmel bedeutet eben: Unmöglichkeit von Krähen.  </blockqoute>  </body>  </html>  

Info Typischerweise stellen Browser ein Zitat mit eingerückten Rändern dar.

<blockqoute> leitet einen eigenen Absatz für Zitate ein (blockqoute = geblocktes Zitat). </blockqoute> beendet den Absatz. Das <blockqoute>-Element wird gerne verwendet, um Einrückungen zu realisieren. Da es sich jedoch um eine logische Textauszeichnung handelt, die keine bestimmte Art der Formatierung vorschreibt, ist der Einrück-Effekt nicht garantiert.

Zitate mit URI-Quellenangabe

Wenn ein Zitat im Internet verfügbar ist, können Sie den URI, also die Internet-Adresse der Quelle angeben. Ein Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <title>Text des Titels</title>  </head>  <body>  <h1>Die Energie des Verstehens</h1>  <p>Geben Sie nicht auf, denn Sie haben sie:</p>  <blockqoute cite="http://www.html-info.eu/">  Die Energie des Verstehens  </blockqoute>  </body>  </html>  

Info Mit dem Attribut cite= im einleitenden <blockquote>-Tag können Sie den URI der zitierten Quelle angeben (cite = Zitat). Dieses Attribut dient lediglich der Information über die Quelle des Zitats und die Spezifikation gibt auch keine Empfehlung zur Visualisierung (in diesem Beispiel werden Sie daher vermutlich keinen Effekt sehen).

Adresse definieren

Sie können Internet-Adressen von Personen oder Dateien in einem eigenen, anders formatierten (zumeist kursiv dargestellten, eingerückten) Absatz hervorheben. Auch dies ist eine logische Textauszeichnung, fur deren tatsächliche Formatierung bei der Ausgabe es keine festen Vorschriften gibt.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <title>Text des Titels</title>  </head>  <body>  <h1>Wenn Sie es genau wissen wollen</h1>  <p>Das HTML-Element für Adressen wird kaum verwendet. Wenn Sie es genau wissen wollen, wenden Sie sich an:</p>  <adress>Dave Raggett, dsr@w3.org</adress>  <p>Dave Raggett gehört dem W3-Konsortium an und gibt viele Publikationen rund um HTML auf dem W3-Server heraus.</p>  </body>  </html>  

Info <address> leitet einen eigenen Absatz für Internet-Adressen ein. </address> beendet den Absatz. Das <address>-Element darf keine anderen blockerzeugenden Elemente wie z.B. überschriften, Textabsätze, Listen, Zitate oder Adressen enthalten. Das <address>-Element ist auch in Verbindung mit E-Mail-Verweisen sinnvoll. Adressen formatieren Browser üblicherweise als kursiven Absatz.

Zitate und Adressen formatieren mit CSS

Wie Zitate und Adressen genau dargestellt werden, darauf haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen. Mit Stylesheets können Sie solche Elemente jedoch nach Wunsch formatieren. Bei Verwendung von Stylesheets lesen Sie zunächst, wie man CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften: Schriftformatierung, Außenrand und Abstand, Innenabstand, Rahmen, Hintergrundfarben und -bilder.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <title>Text des Titels</title>  </head>  <body>  <h1>Zitat und Adresse</h1>  <blockqoute style="padding:10px; border:thin solid blue;">  Klarheit ist wenn man so will nur die anschaulichere Variante der Wahrheit.  </blockqoute>  <p><adress style="color:blue;">  Brigitte Beispiel, beispiel@example.org  </adress></p>  </body>  </html>  

Info Mit CSS lassen sich Zutate und Adressen vielfältig formatieren. Das blockquote-Element im Beispiel erhält einen dünnen durchgezogenen blauen Rahmen und der Text darin einen Innenabstand von 10 Pixeln zum Rahmen. Das address-Element erhält eine blaue Schriftfarbe.

Verweise mit HTML

Anker und Links

Für Seiten mit längerem Inhalt stellt HTML ein nützliches Feature bereit: Links zu dateiinternen Ankern. Viele Webseiten enthalten beispielsweise neben der Seitenüberschrift eine ganze Reihe von Unterüberschriften, weil es der umfangreiche Inhalt erfordert. Dabei ist es für Leser angenehm, am Beginn der Seite gleich anklickbare Links auf die Unterüberschriften angeboten zu bekommen. Die Links helfen bei der Orientierung, was auf der aktuellen Seite zu finden ist, und ermöglichen außerdem den gezielten Sprung zu einer bestimmten Unterüberschrift.

Zunächst das Beispiel eines Links zu einem Anker innerhalb des aktuellen HTML-Dokuments, also innerhalb der aktuell im Browser angezeigten Webseite:

<a href="#spieltag_12">Ergebnisse des 12. Spieltags</a>  

Info Anker werden durch das Gatterzeichen (#) adressiert. Unmittelbar hinter dem Gatterzeichen folgt der Name des Ankers, zu dem bei Anklicken des Links gesprungen werden soll. Innerhalb des Dokuments muss natürlich ein entsprechender Anker definiert sein. Zum Definieren von Ankern wird ebenfalls das a-Element benutzt, jedoch mit einem name-Attribut anstelle des href-Attributs. Die HTML-Umgebung des Verweisziels aus dem obigen Beispiel könnte so aussehen:

<h3><a name="spieltag_12">Ergebnisse des 12. Spieltags</a></h3>  

Info Der Anker wird also innerhalb einer Überschrift platziert. Das schließende </a> könnte auch weiter vorne notiert werden, sogar unmittelbar hinter dem Start-Tag. Doch ein solcher „leerer“ Anker wird von diversen Browsern aus unerfindlichen Gründen nicht erkannt, weshalb empfohlen wird, Anker-Elemente stets mit Inhalt zu versehen. Ankernamen können Sie frei vergeben. Folgendes ist jedoch zu beachten:

  • Ankernamen müssen dokumentweit eindeutig sein.
  • Das name-Attribut teilt mit dem id-Attribut den gleichen Namensraum. Falls Sie also Elemente mit id-Namen versehen, müssen alle id-Namen und Wertzuweisungen an das name-Attribut unterschiedlich sein.
  • Groß-/Kleinschreibung wird unterschieden. Die Namen WS_2004 und ws_2004 sind unterschiedlich.
  • Das name-Attribut darf auch HTML-Entities wie ü enthalten.
  • Das erste Zeichen muss ein Buchstabe A-Z oder a-z sein.
  • Nachfolgende Zeichen dürfen Buchstaben, Ziffern, der Unterstrich, der Bindestrich, der Doppelpunkt oder der Punkt sein. Im Hinblick auf andere Verwendungen, etwa mit JavaScript, ist jedoch dringend zu empfehlen, kein anderes Sonderzeichen als den Unterstrich zu verwenden.

Es ist übrigens erlaubt, beide Attribute name= und href= in einem a-Element zu notieren. Damit ist das Element zugleich ein Hyperlink und auch ein Anker, der anderen Hyperlinks als Verweisziel dienen kann. Es ist auch möglich, Anker in anderen Dokumenten anzuspringen. Dabei ist es unerheblich, wie das Dokument selbst adressiert wird, ob mit einer vollständigen URI-Angabe oder lokal relativ oder absolut. Am Ende wird einfach das Gatterzeichen, gefolgt vom Ankernamen, notiert.

<a href="http://www.w3.org/TR/html401/#minitoc">Inhalt der HTML 4.01 Spezifikation</a>  

Links auf beliebige Inhaltstypen

Die meisten HTML-Links führen sicherlich zu anderen HTML-basierten Seiten. Es gibt aber keine Vorschrift dafür, dass ein Verweisziel von diesem Dateityp sein muss. Sie können ebenso gut Links auf PDF-Dokumente, Excel-Tabellen, ZIP-Archive, Grafik- oder Multimediadateien setzen.

Info Der Link ist also nicht das Problem. Das Problem besteht allein darin, was beim Anwender passiert, wenn er auf einen solchen Link klickt. Dazu wird der zugehörige Mime-Type bestimmt. Wird das Linkziel über einen Webserver angefordert (HTTP-Umgebung), entscheidet die Kommunikation zwischen Webserver und Browser darüber, welches der korrekte Mime-Type ist. Existiert keine HTTP-Umgebung, entscheidet der Browser allein, und zwar auf Grund ermittelbarer Daten wie der Dateiendung. Außerdem besteht noch die Möglichkeit, als HTML-Autor die Entscheidung zu beeinflussen, indem man im Link den gewünschten Mime-Type explizit angibt. Dazu kann im <a>-Tag das Attribut type= notiert werden. Die obigen Beispiele nochmals, doch diesmal mit expliziter Typangabe:

<a href="http://www.html-info.eu/html.zip"type="application/zip">Download HTML</a>  <a href="/bilder/sonnenuntergang-2.tif" type="image/tiff">Sonnenuntergang (1200 x 800 Pixel)</a>  

In der Konfiguration eines Browsers ist eine Liste mit ihm bekannten Mime-Typen gespeichert.

Für die einzelnen Mime-Typen ist auch gespeichert, wie der Browser mit Inhalten dieses Typs verfahren soll. Außerdem ist eingestellt, was der Browser mit Daten tun soll, deren Mime-Type er nicht kennt. Da diese Einstellungen vom Endanwender ganz oder teilweise bearbeitbar sind oder – wie beim MS Internet Explorer der Fall – eng mit den Dateiverknüpfungsinformationen des Betriebssystems verzahnt sind, ist nicht vorhersehbar, wie der Browser reagiert. Hat ein Anwender beispielsweise MS Office oder OpenOffice installiert, könnte sein Browser, falls er ein Dokument mit dem Mime-Type application/msexcel (also eine Excel-Datei) erhält, direkt die betreffenden Office-Programme (MS Excel bzw. OpenOffice Calc) mit den heruntergeladenen Daten aufrufen, eleganterweise sogar über Schnittstellen wie OLE direkt im Browserfenster. Ist bei einem Anwender jedoch kein Officepaket installiert, das mit Dateien dieses Typs etwas anfangen kann, wird der Browser dem Anwender vermutlich in einem Dialogfenster anbieten, das Dokument herunterzuladen und als Datei unter einem frei wählbaren Namen abzuspeichern. Bei anderen Dateitypen wie etwa Archivdateien (ZIP, gzip, RAR, auch selbstentpackend als EXE) wünscht sich ein Linkanbieter vielleicht, dass der Browser bei Anklicken eines entsprechenden Links einen Download-Dialog anbietet. Doch auch das ist nicht sicher. Es kann durchaus sein, dass sich bei einem Anwender z.B. gleich ein externes Programm wie WinZip öffnet. Eine Kontrolle hierüber haben Sie als „Linksetzer“ nicht, und das ist auch gut so.

Features für E-Mail-Verweise

Links auf E-Mail-Adressen erfreuen sich großer Beliebtheit. Kein Wunder: Ein Klick und der Anwender kann z.B. dem Anbieter einer Website sofort eine Mail an eine von diesem bestimmte Mail-Adresse schreiben. In HTML sieht ein einfacher Link dieser Art so aus:

<p>E-Mail an <a href="mailto:info@html-info.eu">Darko Pipic, info@html-info.eu</a></p>  

Info Die Wertzuweisung an das href-Attribut besteht in diesem Fall aus dem Schema mailto:, gefolgt von der E-Mail-Adresse. Eine Garantie darauf, dass solche Links tatsächlich den gewünschten Effekt haben, gibt es jedoch nicht. Der Browser muss wissen, welche lokale Software die Default-Software zum Managen von E-Mails ist. Außerdem muss ihm bekannt sein, wie er das Mail-Programm so aufrufen kann, dass sich darin sofort ein Fenster zum Schreiben einer neuen Mail öffnet. Am einfachsten haben es hierbei natürlich so genannte Browser-Suiten wie die Mozilla-Suite oder die Opera-Suite, die über ein eigenes Mail-Modul verfügen. Bei separaten Mail-Programmen, besonders dann, wenn sie nicht Outlook oder Outlook Express heißen, ist die Gefahr, dass E-Mail-Verweise nicht funktionieren, dagegen deutlich größer.

Angesichts der genannten Gründe ist es zweckmäßig, im Verweistext eines E-Mail-Links

stets die Mail-Adresse noch mal explizit anzugeben. So können auch Anwender, bei denen der Link nicht funktioniert, den angegebenen Mail-Kontakt nutzen. In der oben notierten Form öffnet sich also beim Anwender nach Anklicken des Links ein Fenster zum Eingeben einer neuen E-Mail. Das Adressatenfeld ist vorbelegt mit der im Link angegebenen Mail-Adresse. Da ist es verständlich, dass schon früh der Wunsch aufkam, die Felder für das Mail-Subject, Kopienempfänger oder sogar den Mail-Inhalt mit Text vorzubelegen. Eine entsprechende Syntax im erlaubten Rahmen der URIs hat sich dabei etabliert. Die meisten modernen Browser interpretieren die entsprechende Syntax. Dennoch ist keinesfalls garantiert, dass die Schnittstellenkommunikation mit dem Mail-Programm so klappt, dass alle Felder wie gewünscht vorbelegt werden. Ein einfaches Beispiel mit Vorbelegung des subject-Felds:

<a href="mailto:info@html-info.eu?subject=Feedback%20zur%20Webseite">Mail an Darko Pipic, info@html-info.eu</a>  

Info Die optionalen Feldvorbelegungen werden innerhalb des mailto-URIs als Anfrageteil, also getrennt durch ein Fragezeichen, hinter der Mail-Adresse notiert. Wie in GET-Strings üblich, wird jedes gewünschte Feld wie ein Parameter behandelt. Parameter folgen dem Schema Name=Wert. Mehrere Parameter-Wert-Kombinationen werden durch ein &-Zeichen voneinander getrennt: Name=Wert&Name=Wert&Name=Wert. Ein Beispiel für mehrere Angaben zur Feldvorbelegung:

<a href="mailto:info@html-info.eu?cc=darko.pipic@html-info.eu&subject=Feedback%20zur%20Webseite">Mail an Darko Pipic, info@html-info.eu</a>  

Info In diesem Beispiel werden das subject-Feld (Parameter subject) und das cc-Feld (Parameter cc) mit entsprechenden Inhalten vorbelegt. Folgende Parameter werden in der Regel erkannt:

  • cc (sichtbarer Kopienempfänger)
  • bcc (unsichtbarer Kopienempfänger)
  • subject (Betreff)
  • body (Nachrichtentext)

Beachten Sie, dass Sie Sonderzeichen maskieren müssen. Wenn Sie den Nachrichtentext vorbelegen möchten, können Sie darin Zeilenumbrüche durch die Sonderzeichenmaskierung %0A erzeugen, z.B.:

<a href="mailto:info@html-info.eu?cc=darko.pipic@html-info.eu&subject=Feedback%20zur%20Webseite&body=Lieber%20Autor,  %0A%0AIch%20habe%Ihre%20Webseite%20besucht">Mail an Darko Pipic, info@html-info.eu</a>  

Allgemeines zu projektexternen Verweisen

Aus technischer Sicht stellen projektexterne Verweise kein großes Problem dar. Diese Möglichkeiten sind beim href-Attribut des <a>-Tags erlaubt. Dennoch sollten Sie einiges mehr über projektexterne Verweise wissen:

Im Normalfall dürfen Sie ungefragt Verweise auf fremde Web-Angebote setzen.

Sie brauchen also keine E-Mail an den Anbieter mit Bitte um Genehmigung zu schreiben, wenn Sie auf sein Angebot einen Link setzen wollen. Jeder Anbieter, der mit seinem Webprojekt online geht, muss sich im Klaren darüber sein, dass er Teil eines weltweiten Hypertext-Systems ist, in dem er nicht allein ist. Wenn er das nicht akzeptieren kann, ist er im Web fehl am Platz und hat das falsche Medium gewählt. Die Grundregeln des Web werden von den Ideen des Web bestimmt, nicht von den hermetischen Zwangsvorstellungen einiger Zuspätgekommener. Es gibt jedoch Ausnahmen von der Regel. Wenn Sie beispielsweise selbst ein sehr stark frequentiertes Web-Angebot haben und auf dessen Einstiegsseite einen Verweis auf die Homepage eines kleinen, unbekannten Anbieters setzen, dann sollten Sie ihn vorher fragen. Der Grund: Durch die vielen zu erwartenden Besucher, die über Ihren Verweis auf das fremde Angebot finden, wird dort plötzlich sehr viel Traffic (Besucherverkehr und Datenübertragung) erzeugt. Viele Anbieter haben bei ihrem Provider eine Volumenbegrenzung, und wenn diese überschritten wird, entstehen den Anbietern unkalkulierbare Kosten. Auch könnte es sein, dass der fremde Server nicht sehr belastungsfähig ist und durch die vielen plötzlichen Besucher zusammenbricht. Eine andere Ausnahme ist, wenn Sie den Verweis in einem negativen Kontext setzen. Wenn Sie also auf einen Anbieter verweisen, nur weil sie ihn auf Ihren eigenen Seiten heftig kritisieren, dann ist es sicherer, sich dort eine Bestätigung einzuholen, dass ein solcher Verweis gebilligt wird. Juristisch sicher ist eine solche Bestätigung aber nur, wenn sie mit Unterschrift in dokumentenechter Form von einer dafür zuständigen Person geleistet wird.

Eine Sache, gegen die man sich im Sinne der Zivllcourage wehren sollte,

ist der Versuch von Anbietern, juristisch gegen so genannte Deeplinks (Verweise in die Tiefe eines fremden Angebots) vorzugehen. Weltweiter Hypertext im Web bedeutet, dass auf vorhandene URIs verwiesen werden darf. Schließlich kann sich auch jeder Anwender auf jeden URI ein Lesezeichen (Bookmark, Favoriten) in seinem Browser setzen. Das kann auch eine Datei tief in einem fremden Web-Angebot sein. Es gibt von Anbieterseite aus technische Möglichkeiten, Deeplinks auf eine allgemeinere Seite umzulenken. Wenn er also nicht will, dass Deeplinks auf sein Angebot gesetzt werden, dann soll er von diesen technischen Möglichkeiten Gebrauch machen.

Beispiele für projektexterne Verweise

Die einzige Bedingung, die beim Anwender erfullt sein muss, damit er projektexterne Verweise ausfuhren kann, ist eine bestehende Internet-Verbindung.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  <html>  <head>  <title>Text des Titels</title>  </head>  <body>  <h1>Besuchen Sie doch mal...</h1>  <p><a href="http://www.html-info.eu/"> ein paar Kurse &uuml;ber die hier vermittelten inhalte</a>  <br>  <a href="http://www.html-info.eu/text-html/verweise.html/"> <i>HTML-Info</i> &uuml;ber externe Verweise</a>  <br>  <a href="http://www.html-info.eu/text-html/verweise/item/interne-verweise.html/"> interne Verweise</a>  <br>  <a href="http://www.html-info.eu/text-html/verweise/item/definieren-und-gestalten.html/"> Verweise Definieren und Gestalten</a>  <br>  <a href="http://www.html-info.eu/text-html/verweise.html/"> Info &uuml;ber Verweise</a>  <br>  <a href="http://www.html-info.eu/"> Info &uuml;ber HTML</a></p>  </body>  </html>  

Info Webadressen beginnen mit http://, manchmal auch mit https:// (Letzteres sind Server, bei denen die Datenübertragung von und zum Browser verschlüsselt stattfindet, z.B. bei Internet-Banking).

Andere Internet-Protokolle können Sie ebenfalls adressieren,

beispielsweise FTP-Adressen mit ftp://, Adressen auf Gopher-Servern mit gopher:// oder Telnet-Adressen mit telnet://. Auch Newsgroups im Usenet können Sie adressieren, nämlich mit news: (ohne die beiden sonst charakteristischen Schrägstriche). Bei anderen als http-Adressen kommt es darauf an, wie der Webbrowser damit umgeht. Die modernen Browser beherrschen meistens FTP und Gopher und stellen entsprechende Adressen in ihrem Anzeigefenster dar. Bei Protokollen, die der Browser nicht unterstützt, versucht er, auf dem Rechner des Anwenders ein Programm auszuführen, das fur das entsprechende Internet-Protokoll zuständig ist. Bei Telnet wird beispielsweise ein auf dem Rechner installierter Telnet-Client aufgerufen, und bei Verweisen auf Newsgroups ein Newsreader oder das Newsreader-Modul eines Mailprogramms. Bei Newsgroups muss jedoch ein News-Server im Newsreader des Anwenders eingerichtet sein, der die adressierte Newsgroup anbietet. Auch E-Mail-Verweise sind möglich. Viele Adressen bestehen nur aus dem Namen einer „WWW-Domain“, etwa http://www.html-info.eu/. Trotzdem führt der Verweis auf eine konkrete HTML-Datei. Das liegt daran, dass es bei vielen Webservern einen so genannten Default-Dateinamen gibt – meistens index.htm, index.html oder welcome.htm bzw. welcome.html Das Projekt muss natürlich auch eine entsprechende Datei besitzen. Im Verweis braucht die HTML-Datei aber nicht mit angegeben zu werden.

Viele solcher Adressen werden immer wieder ohne abschließenden Schrägstrich angegeben,

etwa http://www.html-info.eu. Es ist jedoch sauberer, wenn Sie noch den Schrägstrich dahinter setzen. Nur so kann der Webbrowser bereits am Verweis erkennen, dass es sich um ein Verzeichnis handelt, in dem eine Default-Datei steht, deren Namen der Webserver zur Verfiigungstellt. Es ist deshalb besser zu notieren: http://www.html-info.eu/. Noch wichtiger ist es, bei Unterverzeichnissen einen abschließenden Schrägstrich zu notieren. Zwar klappt es auch, wenn Sie eine Adresse wie http://www.html-info.eu/text-html/verweisenotieren. Doch dann findet unnötig viel Kommunikation zwischen Browser und Server statt, denn intern fordert der Browser vom Server im Beispiel erst mal eine Datei namens training, was den Server zunächst zu einer Fehlermeldung veranlasst, da diese Datei nicht existiert. Erst im zweiten Schritt wird erkannt, dass es sich um den Namen eines Verzeichnisses handelt. Notieren Sie deshalb immer Angaben wie http://www.html-info.eu/text-html/verweise/, also mit abschließendem Schrägstrich. Es gibt neben den angesprochenen Internet-Protokollen auch noch andere, etwas wais oder irc. Ferner gibt es das „Un-Protokoll“ file, über das sich lokale Rechner und Netzwerkadressen absolut adressieren lassen, mit Angaben wie <a href="file://localhost/"a>...</a>. Dies wird von moderneren Browsern jedoch aus Sicherheitsgründen nicht mehr oder nur noch eingeschränkt unterstützt und ist auch nicht besonders sinnvoll, da es heute wirklich kein Problem mehr ist, für lokale Zwecke einen Webserver lokal einzurichten.

Hyperlink-Optimierung

HTML stellt verschiedene Attribute zur Verfügung, deren Aufgabe darin besteht, die Funktionalität von Links zu verbessern. Zunächst einmal können Sie in einem a-Element die beiden Attribute rel= (logischer Bezug) und rev= (logischer Rückbezug) notieren. Dabei sind die gleichen Wertzuweisungen möglich wie in Zusammenhang mit dem link-Element.

<a href="../index.htm" rel="chapter">Kapitel 7</a>  

Mögliche Angaben für das rel– und das rev-Attribut sind z.B. contents (Inhaltsverzeichnis), chapter (Kapitel), section (Abschnitt), subsection (Unterabschnitt), index(Stichwortverzeichnis), next (Seite vor), prev (Seite zurück) und start (Startseite). Welche Auswirkungen eine solche Notation im Browser hat, bleibt der Browser-Software überlassen. Firefox beispielsweise behandelt rel– und rev-Angaben in Hyperlinks genauso wie notierte link-Elemente, d.h., er übernimmt die Bezugsangaben in die als Plug-In erhältliche Navigationsleiste für logische Linkbezüge.

Eine andere Hilfe – sowohl für den Browser als auch für den Anwender

sind nähere Angaben zum Verweisziel. Dazu werden die Attribute hreflang= und charset= angeboten. Bei hreflang= können Sie ein Sprachenkürzel gemäß ISO 3166-1 angeben, also z.B. de für deutschsprachig, en für englischsprachig oder ar für arabischsprachig. Bei charset können Sie dem Browser bereits mitteilen, welchen Zeichensatz das Verweisziel benutzt, z.B. ISO-8859-1 oder einen anderen Zeichensatz gemäß der Liste der IANA-Organisation.

Der arabische Sender <a href="http://www.aljazeera.net/" hreflang="ar" charset="windows-1256">Al Dschasira</a>  

Die Angabe zum charset-Attribut deckt sich mit der entsprechenden Angabe aus dem HTML-Quelltext der verlinkten Seite:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">  

Beim hreflang-Attribut wird das Sprachenkürzel für „arabisch“ angegeben. Welchen Nutzen ein Browser aus diesen Informationen zieht, bleibt ebenfalls ihm überlassen. Bei den heutigen Browsern haben diese Angaben jedenfalls keine sichtbare Wirkung, obwohl solche Dinge wie das Anzeigen eines Flaggensymbols beim Überfahren des Links mit der Maus denkbar wäre.

Eindeutig auf den Anwender zielen dagegen die möglichen Attribute

tabindex= und accesskey= ab. Beide Attribute sollten, wenn verwendet, bei allen oder zumindest allen wichtigen Links einer Seite notiert werden, da ihre Werte einen logischen Zusammenhang bilden. Drückt ein Anwender beim Anzeigen der Seite wiederholt die Tabulatortaste, kann er auf diese Weise nacheinander auf die in der Seite enthaltenen Links positionieren. Mit der (Enter)-Taste kann er den Verweis dann „anklicken“. Das Feature ist für Anwender gedacht, die keine Maus benutzen können oder wollen. Normalerweise wird zunächst auf den ersten Link der Seite positioniert, dann auf den zweiten usw. Durch Angabe des tabindex-Attributs in den Links einer Seite können Sie die Reihenfolge selbst bestimmen. Bei tabindex= können Sie als Wert Zahlen zwischen 0 und 32767 angeben. Auf den Link mit der niedrigsten tabindex-Nummer wird zuerst positioniert, dann auf den mit der zweitniedrigsten usw. Das accesskey-Attribut erlaubt dagegen das direkte „Anklicken“, also Ausführen eines Links über einen Hotkey. Wenn Sie beispielsweise accesskey="c" notieren, dann bieten die meisten Browser eine entsprechende Hotkey-Funktionalität an, um den Link auszuführen. Als Wert sollten also Buchstaben oder auch Ziffern zugewiesen werden. Die Umsetzung im Browser kann jedoch unterschiedlich aussehen, wie die folgende Tabelle belegt:

Plattform / BrowserUmsetzung des accesskey-Attributs
Windows / Internet Explorer(Alt) + (accesskey) + (Enter)
Windows / Mozilla(Alt) + (accesskey)
Windows / Opera(a) + (Esc) + (accesskey)
Macintosh / Internet Explorer(Ctrl)+ (accesskey)+ (Enter)
Macintosh / Safari(Ctrl) + (accesskey)
Macintosh / Mozilla(Ctrl)+ (accesskey)
Macintosh / Opera(a) + (Esc) + (accesskey)

Leider kennen die meisten Anwender die entsprechenden Tastaturkombinationen bei ihren Browsern gar nicht. Jene, die sie kennen und nutzen, werden dem Entwickler der Webseiten jedoch die Verwendbarkeit bei wichtigen Links danken.

Hyperlinks definieren und gestalten

Bislang haben wir in diesem Kapitel typische Elemente zur Textstrukturierung und die Möglichkeiten zu deren Gestaltung kennen gelernt. Das „HT“ in HTML steht aber für Hypertext. Ein Kern-Feature von HTML ist nämlich die konsequente Umsetzung des von HTML- und WWW-Vordenker Tim Berners Lee entwickelten Schemas zur Adressierung beliebiger Inhalte im Internet und in lokalen Host-Umgebungen.

Es ist nicht schwer, in HTML „einfach mal“ ein paar Links zu notieren.

Um Hyperlinks in allen Fällen korrekt einzusetzen, sind jedoch Kenntnisse über den Aufbau von URIs erforderlich. In diesem Abschnitt lernen Sie, wie Sie Quellen richtig adressieren, aber auch, welche zusätzliche Möglichkeiten Sie dem Anwender in Zusammenhang mit Hyperlinks anbieten können und wie Sie Links optisch ansprechend gestalten.

URIs und Links in HTML

Möglicherweise ist Ihnen das Akronym URL (Uniform Resource Locator – zu Deutsch: einheitlicher Quellenorter) geläufiger als URI (Universal Resource Identifier – zu Deutsch: universelle Quellenbezeichnung). Noch unbekannter dürfte URN (Uniform Resource Name – zu Deutsch: einheitlicher Quellenname) sein. Um zu verstehen, was ein URI ist, muss man jedoch alle drei Akronyme im Zusammenhang sehen. Ein URN sieht aus wie eine typische „Internetadresse“, also z.B. http://www.example.org/ von-mir-persoenlich-erfunden/. Es handelt sich jedoch nicht um eine existierende Adresse, sondern um einen „universell eindeutigen Namen“, der das Schema der Internetadressierung benutzt, weil sich damit leicht universell eindeutige Namen erstellen lassen.

Ein URL ist eine existierende Internetadresse

wie http://www.mut.de/. Insofern ist es verständlich, dass vielfach von URLs oder URL-Adressen die Rede ist. URI ist der Überbegriff für URL und URN. Im Falle existierender Internetadressen bedeutet URI und URL also durchaus das Gleiche. Wegen der URNs jedoch, die vor allem in der XML-Welt eine gewisse Bedeutung haben, spricht die HTML-Spezifikation vorzugsweise von URIs. Für den Aufbau von URIs gilt folgendes Format:

<Schema>://[<Benutzer>[:<Passwort>]@]<Server>[:<Port>]/<Pfad,...> ?<Anfrage>  

HTML-Notation von Hyperlinks

Wenn Sie in HTML Ressourcen auf einem anderen Server im Internet adressieren wollen, müssen Sie auf jeden Fall einen hinreichend vollständigen URI angeben. Entsprechende Links in HTML könnten etwa so aussehen wie im folgenden Quelltextausschnitt:

<h1>Links für HTML-Kenner</h1>  <ul>  <li><a href="http://www.w3.org/TR/xhtml11/">XHTML 1.1 Recommendation</a></li>  <li><a href="http://www.w3.org/TR/xhtml1/">XHTML 1.0 Recommendation</a></li>  <li><a href="http://www.w3.org/TR/html401/">HTML 4.01 Recommendation</a></li>  </ul>  

HTML-Links haben immer den gleichen Aufbau:

<a href="Zieladresse">Anklickbarer Verweisinhalt</a>  

Das a-Element ist für Links zuständig. Es kann in Block- und anderen Inline-Elementen vorkommen und selbst neben Text auch andere Inline-Elemente (mit Ausnahme anderer a-Elemente) enthalten. Erlaubt sind also z.B. HTML-Konstruktewie diese:

<h2>Spezial-Domains wie <a href="http://www.example.org/"> example.org</a></h2>  Wikipedia hat auf alles eine <a href=" http://de.wikipedia.org/wiki/Antwort"><em>Antwort</em></a>  <a href="http://de.news.yahoo.com/"><img src="http://eur.i1.yimg.com/eur.yimg.com/i/de/ne/nws6b.gif" alt="Yahoo Nachrichten"></a>  

Info Im ersten Beispiel steckt der Link in einer h2-Überschrift. Entsprechend dem Vererbungsprinzip übernimmt der Link bei der Darstellung z.B. die Schriftgröße der Überschrift. Im zweiten Beispiel enthält der Linktext selbst ein anderes Inline-Element (em). Das Element wird wie üblich dargestellt, übernimmt jedoch die Darstellungsform für Hyperlinks.

Zu den Inline-Elementen gehört auch das

img-Element, das zum Referenzieren von Grafiken in HTML dient. Als Elementinhalt eines Hyperlinks notiert, wird die Grafik selbst zum anklickbaren Link. Den Rahmen, den der Browser um eine auf diese Weise anklickbare Grafik zieht, bekommen Sie weg, indem Sie im <img>-Tag den Rahmen unterdrücken – am besten über die CSS-Syntax style="border:none". Das Konstrukt <a><img></a> ist in der Praxis übrigens extrem verbreitet – so basieren z.B. anklickbare Werbebanner darauf oder Logos, die bei Anklicken z.B. zur Startseite der Webpräsenz führen.

Links auf dynamische Inhalte

Hinter zahlreichen Webseiten steckt kein statischer Inhalt, wie z.B. eine fest abgespeicherte HTML-Datei, sondern ein Script oder Programm (z.B. ein PHP-Script), das variable HTML-Inhalte erzeugt und an den aufrufenden Browser zurücksendet. Dazu erwartet ein solches Script meist entsprechenden Input. In vielen Fällen steht dieser Input direkt im URI, und zwar in den so genannten GET-Parametern, eingeleitet durch ein Fragezeichen hinter der Pfadangabe des Scripts. In einem HTML-Linkkönnen Sie als Verweisziel auch solche URIs angeben.

<a href=" http://www.google.de/search?hl=de&q=Meteoriten&btnG=Suche&meta=">Google-Suche nach Meteoriten</a>  

Info Am einfachsten bringen Sie einen solchen URI in den eigenen HTML-Quelltext, indem Sie im Browser die Zielsite aufrufen (im Beispiel also Google) und dort den gewünschten Zustand herstellen (im Beispiel also nach Meteoriten suchen). Wenn die Seite mit Suchtreffern angezeigt wird, kopieren Sie den Inhalt der Adresszeile des Browsers in die Zwischenablage. Den kopierten Inhalt fügen Sie dann im Editor als Zuweisung an das href-Attribut ein.

Testen Sie Links auf solche URIs jedoch aus und überprüfen Sie,

ob Sie tatsächlich die gewünschten Inhalte erhalten. Denn in vielen dynamischen URIs werden auch Parameter wie Session-IDs mitgeschleppt, die sich nicht für einen Link eignen. Probieren Sie gegebenenfalls auch mal, solche Parameter-Wert-Kombinationen wegzulassen.

Linktypen und Darstellung von Links

Es mag erstaunen, dass alle Links in HTML über das gleiche HTML-Element nach dem gleichen Schema notiert werden. Denn auf modernen Webseiten gibt es offensichtlich ganz unterschiedliche Typen von Links, z.B. anklickbare Werbebanner oder Schaltflächen in einer Site-internen Navigationsleiste und Hyperlinks im normalen Fließtext. Der Vorteil dieser Lösung ist auf jeden Fall, dass Sie nur ein Verlinkungsschema kennen müssen, das auf alle Fälle passt. Der Nachteil ist, dass Sie die unterschiedliche Bedeutung der Links nur durch optisch unterschiedliche Gestaltung oder Platzierung auf der Webseite kenntlich machen können. Wir werden in diesem Abschnitt zunächst noch näher auf die möglichen Fälle und Besonderheiten bei der Adressierung von Verweiszielen eingehen.

Hinweise zu Links auf fremde Quellen

Durch Hyperlinks in Verbindung mit dem Internet und dem Adressierungsschema der URIs ist im Prinzip alles mit allem anbieterübergreifend vernetzbar. Deshalb sind Hyperlinks in HTML gewissermaßen der Schlüssel zur Wunschvorstellung der Informationsgesellschaft, die immer mehr zum Paradigma unseres Zeitalters wird. Doch leider ist die Realität nicht so einfach. Ein Link ist schnell gesetzt, kann jedoch ebenso schnell zivil- oder gar strafrechtliche Folgen haben. Außerdem gibt es gewisse Anstandsregeln. Die folgenden Hinweise sollten Sie auf jeden Fall beachten:

Kostenpflichtige Links:

Manche Anbieter erlauben Links nur gegen Entgelt, z. B. einige Anbieter von Karten- oder Straßenplanmaterial. Wenn Sie Links auf solche URIs ohne Kenntnis des Anbieters setzen (z.B. weil Sie auf diese Weise Ihren Besuchern eine Anfahrtsskizze präsentieren wollen), ist das genauso wie Schwarzfahren mit der U-Bahn oder Parken auf einem kostenpflichtigen Parkplatz ohne Parkschein. Das Vergehen kann vom Anbieter durch Einschalten eines Anwalts oder gerichtlich verfolgt werden.

Links auf illegale Inhalte:

Im Internet tummeln sich etliche Angebote mit Quellen, die zwar als URI adressierbar sind, deren Bereitstellung jedoch eine Straftat darstellt. Das betrifft z.B. illegale pornografische Inhalte wie Kinderpornos oder Downloadangebote von Vollversionen registrierungspflichtiger Software. Wenn Sie Links zu solchen Quellen setzen, können Sie im Rahmen der Mitstörerhaftung bei Entdecken juristisch genauso belangt werden wie der Anbieter selbst. Dabei können je nach Schwere des Falls mehrjährige Haftstrafen drohen!

Deeplinks:

Einige Anbieter wünschen keine direkten Links auf Unterseiten ihres Angebots, sondern nur auf die Startseite. Manchmal steckt technisches Unvermögen dahinter (z.B. weil der Anbieter Frames einsetzt und direkt adressierte Unterseiten plötzlich ohne Navigation, Werbebanner und Logo angezeigt werden). In anderen Fällen ist es dem Anbieter einfach unangenehm, wenn ein Besucher zuerst sein „Kellerregal“ zu sehen bekommt und nicht das protzige Eingangsportal. Es gibt zwar kein Gesetz, das Deeplinks verbietet, doch ein Anbieter, der explizit keine solchen Links wünscht, könnte auf jeden Fall einen Anwalt einschalten und ein Gerichtsverfahren anstrengen. Bei Deeplinks auf fremde Webangebote empfiehlt es sich deshalb, dort nach publizierten Geschäftsbedingungen (AGB), nach einem Impressum oder nach einer anderen Seite mit rechtlichen Hinweisen zu suchen, um sich über eventuell unerwünschte Deeplinks zu informieren. Der Rest ist eigenes Risiko. Es gibt sogar gute Gründe, sich über ein Deeplink-Verbot hinwegzusetzen, nämlich die Zivilcourage, die nötig ist, damit die Linkfreiheit im Netz nicht den Zwangsvorstellungen von einzelnen Anbietern geopfert wird.

Links zu kleineren Sites:

Wenn Sie selbst eine von Besuchern sehr stark frequentierte Seite anbieten und darauf einen Link auf ein fremdes Angebot setzen, ist damit zu rechnen, dass durch den Link viele Besucher zu dem fremden Angebot surfen. Die meisten Anbieter müssen bei ihren Hosting-Providern jedoch für Traffic ab einer bestimmten Grenze mehr bezahlen – das Prinzip ist ähnlich wie beim Stromverbrauch. Durch Ihren Link können Sie dem fremden Anbieter also zusätzliche und in der Höhe unkontrollierbare Kosten verursachen, indem Sie gewissermaßen seine Lichter auf seine eigenen Kosten dauernd ein- und ausschalten. Wer ein Webangebot unterhält, muss zwar stets damit rechnen, dass Besucherzahlen und Traffic auch mal stark anschwellen können. Doch es gehört zum guten Ton, sich in entsprechenden Fällen vor dem Setzen eines Links mit dem Fremdanbieter zu verständigen und dessen Einwilligung einzuholen.

Wenn Sie diese Punkte beachten, brauchen Sie jedoch auch nicht übervorsichtig zu sein.

Sie brauchen beispielsweise keine Mail mit Lesebestätigung und Wichtig-Flag an Google zu schicken, wenn Sie beabsichtigen, auf ein Suchergebnis von deren Suchmaschine zu verlinken.

Link zum Thema Links auf fremde Quellen:

Optische Gestaltung von Hyperlinks mit CSS

In den meisten Browsern kann der Anwender die Farbe für Links zu bereits besuchten Seiten und zu noch nicht besuchten Seiten einstellen, und oft auch, ob Links unterstrichen dargestellt werden sollen oder ob sie beim Überfahren oder Anklicken mit der Maus durch optische Änderung reagieren sollen. Per Voreinstellung werden Links zu noch nicht besuchten Seiten in grafischen Browsern meist blau und unterstrichen angezeigt und Links zu bereits besuchten Seiten lila oder dunkelblau und unterstrichen.

Da es sich dabei um „Zustände“ handelt und nicht um HTML-Elemente, ist der CSS-Zugriff darauf durch so genannte Pseudoelemente möglich. Speziell für die Gestaltung von Hyperlinks in ihren verschiedenen Zuständen stehen die Pseudoformate :link, :visited, :hover und :active zur Verfügung. Ihren Einsatz zeigt das folgende Beispiel. Im zentralen style-Bereich im Dateikopf oder in einer separaten, referenzierten CSS-Datei stehen folgende Definitionen:

a:link {  text-decoration: none;  font-weight: bold;  color: #E00000;  }  a:visited {  text-decoration: none;  font-weight: bold;  color: #E08080;  }  a:hover {  text-decoration: none;  font-weight: bold;  background-color: #FFFFA0;  }  a:active {  text-decoration: none;  font-weight: bold;  background-color: #A0FFFF;  }  

Der Selektor a:link bedeutet „alle a-Elemente (also Hyperlinks) zu noch nicht besuchten Zielen“, a:visited „alle Links zu bereits besuchten Zielen“, a:hover „Links, auf die der Anwender positioniert“ und a:active „Links, die der Anwender anklickt“. Bei der Gestaltung, also der Wahl der CSS-Formateigenschaften, können Sie Ihrer Phantasie freien Lauf lassen. Im obigen Beispiel haben wir festgelegt, dass die Links nicht unterstrichen dargestellt werden (text-decoration:none), dass sie stattdessen fett dargestellt werden (font-weight:bold), dass Links zu noch nicht besuchten Zielen in kräftigem Rot erscheinen (color:#E00000), während Links zu besuchten Zielen blassrot angezeigt werden (color:#E08080). Links, auf die der Anwender gerade positioniert, egal ob mit der Maus oder mit der Tastatur, erhalten eine hellgelbe Hintergrundfarbe (background-color:#FFFFA0) und beim Anklicken eine hellblaue (background-color:#A0FFFF). Vor allem das Nichtunterstreichen von Links (text-decoration:none) ist ein immer wieder nachgefragtes Feature. Mit etwas aufwändigeren Angaben können Sie auch komplette Navigationsleisten inklusive Mouseover-Effekt allein mit HTML und CSS erstellen, d.h. ohne Rückgriff auf Grafiken und JavaScript, wie es früher üblich war.

XHTML und HTML

Einsatz- und Verarbeitungsmöglichkeiten

HTML kennen Sie bereits und Sie wissen, dass es dort bestimmte Elemente gibt, die manchmal durch ein Standalone-Tag repräsentiert werden, meistens jedoch durch ein Anfangs- und ein End-Tag, die einen Inhalt einschließen. Der Inhalt besteht manchmal nur aus Text, manchmal nur aus anderen HTML-Elementen und hin und wieder auch aus einer Mischung von beidem. Außerdem können in den Anfangs-Tags der Elemente bestimmte erlaubte Attribute notiert werden.

XML ist zunächst einmal nichts anderes als die Erweiterung dieser Grundregeln auf frei benennbare Elemente und Attribute. Stellen Sie sich einfach Quelltexte mit Abschnitten wie:

<Tonart Typ="C-Dur"><Note Laenge="1/4" Ton="F" /> ...  

oder

<Person><ID>manuel_schmitt_01</ID>  <Vorname>Manuel</Vorname>  <Zuname>Schmitt</Schmitt>  <Kind_von_ID> simon_schmitt_ 01</Kind_von_ID> ...  

Dann verstehen Sie schnell, dass sich mit diesen einfachen Auszeichnungsregeln beliebige Daten beliebig genau beschreiben lassen, egal ob es sich um Musikstücke, Stammbäume, multimediale Abläufe, Vektorgrafiken, Schaltpläne, Bücher, Nachrichten oder Workflow-Beschreibungen handelt.

Wichtig: XML ist selbst keine Auszeichnungssprache,

sondern ein Regelwerk zur Definition von Auszeichnungssprachen – also nicht etwa ein „Konkurrenzformat für HTML“, sondern ein formaler Standard, an den sich alle XML-basierten Sprachen halten – XHTML ebenso wie andere.

XML oder DBMS

Die universelle Verwendbarkeit von XML führt zu der Frage, ob XML nicht auch Datenbank-Management-Systeme (DBMS) wie MySQL überflüssig macht. Das ist aus mehreren Gründen nicht der Fall: XML ist keine Software, sondern nur ein Beschreibungsmodell für Daten. Ein DBMS ist dagegen immer auch ein Software-System, das zusätzliche Leistungen erbringt, wie beispielsweise das besonders schnelle Auffinden von Daten (Performanz) oder das besonders sichere Speichern von Daten im Mehrbenutzerbetrieb. Aber auch bei der Datenmodellierung ist XML nicht zwangsläufig einem DBMS überlegen. Die heute vorherrschenden relationalen Datenbanksysteme sind vor allem bei serienartigen Daten effizient, bei denen ebenso serienartige Abhängigkeiten und Beziehungen bestehen, z.B. bei Kunden, Aufträgen und Rechnungen. Eine besondere Stärke von XML ist dagegen die Beschreibung baumartig strukturierbarer Daten.

Keine automatische Datenverarbeitung

Mit XML lassen sich Daten so beschreiben, wie es aus Menschensicht inhaltlich sinnvoll erscheint. Genau das ist gemeint, wenn von „semantisch“ die Rede ist, wie beim Schlagwort „semantisches Web“. Auf diese Weise lassen sich Daten jedoch nur beschreiben, nicht automatisch verarbeiten. Es gibt keine Software, die bei einem Quelltext wie <Tonart Typ="C-Dur"><Note Laenge="1/4" Ton="F" /> … automatisch Töne erzeugt. Software, die dazu in der Lage ist, muss erst geschrieben werden. Neben der Fähigkeit, Töne zu erzeugen, muss sie ein bestimmtes XML-Format erkennen und korrekt auslesen können.

Das gilt auch für Webbrowser.

Diese zeigen, wenn Sie als Anwender eine beliebige XML-Datei als URI aufrufen, die darin enthaltenen Daten einfach als Quelltext an (vorausgesetzt, bei der Kommunikation zwischen Webserver und Browser wird überhaupt entschieden, die Daten als Text zu senden). Erst durch zusätzliche „Intelligenz“ kann der Browser solche Daten im Sinne einer nützlichen Anwendung verarbeiten:

  • Durch Zuordnung von Stylesheet-Definitionen ist es beispielsweise möglich, dem Browser mitzuteilen, wie er Elemente wie z.B. <chapter></chapter> oder <teaser></ teaser>, mit denen er ansonsten nichts anfangen könnte, optisch darstellen soll.
  • Durch Installation eines geeigneten Plugin kann ein Browser befähigt werden, bestimmte XML-Daten zu interpretieren. So gibt es beispielsweise Browser-Plugins für SVG-Grafiken oder für RSS-Newsfeeds (beides basiert auf XML).

Individuelle und öffentlich standardisierte XML-Sprachen

Da alle XML-Daten grundsätzliche formale Regeln einhalten, kann die Verarbeitung von XML-Daten auf allgemeine Konzepte zurückgreifen. So stellen Scriptsprachen wie PHP von Haus aus Klassen oder Module zur Verfügung, mit deren Hilfe ein Programmierer XML-Daten verarbeiten kann. Das spart Programmieraufwand und reduziert Fehlerquellen. Noch einfacher wird es, wenn keine individuellen XML-Sprachen eingesetzt werden, sondern öffentlich standardisierte. XHTML, SVG (Vektorgrafik), MathML (mathematische Ausdrücke) oder WML (für WAP/Mobiltelefonanwendungen) gehören zu den öffentlich standardisierten XML-Sprachen. Öffentlich standardisierte Sprachen haben aus Software-Sicht den Vorteil, dass es häufig schon fertige Klassen und Module gibt, mit denen die Datenverarbeitung der jeweiligen XML-Sprache möglich ist. Dadurch reduziert sich der Programmieraufwand nochmals.

Eigene XML-Sprachen zu definieren, ist dann die beste Lösung,

wenn keine öffentlich standardisierte XML-Sprache existiert, die das Gleiche leistet oder wenn ein begründbares Interesse daran besteht, ein ganz eigenes Namens- und Strukturschema zu verwenden. Eigene XML-Sprachen sind etwa auch eine geeignete Lösung, wenn für den angestrebten Verwendungszweck nur ein kleiner Teil des Sprachumfangs einer bereits existierenden XML-Sprache benötigt wird. In jedem Fall empfiehlt es sich jedoch, vor dem Entwickeln einer eigenen Sprache zu recherchieren, ob es bereits öffentlich standardisierte Sprachen für den angestrebten Verwendungszweck gibt und ob diese Sprachen für die eigenen Zwecke geeignet sind.

Datenkonvertierung (Transformation)

Eine der größten Stärken von XML besteht darin, dass Daten wegen der grundsätzlich einzuhaltenden Regeln hervorragend von einem XML-Format in ein anderes Format übertragen werden können. Für diesen Vorgang, in der XML-Welt als Transformation bezeichnet, gibt es sogar eine eigene XML-Sprache: XSLT. In der Praxis werden XML-Daten vor allem serverseitig von ihrem Ausgangsformat in (X)HTML transformiert, um die Daten für die Ausgabe im Browser vorzubereiten.

XML-Editoren

Wenn Sie nur hin und wieder XML-Dateien auf Quelltextebene bearbeiten, genügt ein guter Universal-Editor, der idealerweise Syntax-Highlighting für XML anbietet und ansonsten mit den heute üblichen Komfortfunktionen wie Fenstersplitting, Textbausteine, Suchen und Ersetzen auch über mehrere Dateien usw. ausgestattet ist. Daneben gibt es eine ganze Reihe XML-spezifischer Bearbeitungs-Software auf dem Markt. Ein Konzeptschwerpunkt dieser Produkte ist, dass die Baumstruktur von XML-Dokumenten visualisiert wird. Elemente und Attribute erscheinen in einer explorerartigen Ansicht und lassen sich gezielt ansteuern und bearbeiten. In Zusammenhang mit Stylesheet-Definitionen bieten einige Produkte auch Wysiwyg-Ansichten an. Einige unterstützen außerdem beim Erstellen von DTDs oder XML-Schemata durch grafische Visualisierung.

XML-Parser

HTML wird vor allem von Browsern und vergleichbaren Webclients interpretiert. Zu diesem Zweck verfügen die Browser über einen integrierten HTML-Parser, der HTML-Code zerlegt und daraus eine Bildschirmausgabe generiert. Wenn CSS im Spiel ist, werden entsprechende Style-Definitionen berücksichtigt. Wer Webseiten entwickelt, weiß, dass jeder Webanwender irgendeinen Browser benutzt. Die Frage nach dem Vorhandensein eines HTML-Parsers ist damit von vorneherein beantwortet. Bei XML ist die Sache nicht so eindeutig. Manchmal sollen auch XML-Daten einfach im Browser angezeigt werden. Viele Browser, darunter der MS Internet Explorer 6.x, Mozilla Firefox 1.x und Opera 8.x, können XML-Dokumente, deren Elemente mit Hilfe von CSS formatiert werden, als attraktives Bildschirmergebnis anzeigen. Der Grund ist, dass diese Browser über einen integrierten XML-Parser verfügen.

Daneben gibt es aber auch viele Anwendungsfälle für XML,

bei denen kein Endanwender im Spiel ist. So beispielsweise, wenn eine Webanwendung Nutz- oder Konfigurationsdaten in XML-Form einliest oder wenn Webanwendungen untereinander Daten in XML-Formaten austauschen. Für solche Zwecke gibt es separate XML-Parser. Diese arbeiten softwaretechnisch betrachtet wie ein Filter oder Treiber. Sie erhalten XML-Code als Input. Der Output besteht in einer neuen Datenstruktur, die sich durch das Zerlegen des XML-Codes ergibt. Diese Datenstruktur kann von einer weiterverarbeitenden Software genutzt werden, z.B. von einem PHP-Script. Was hier vereinfacht als „Datenstruktur“ bezeichnet wird, ist in Wirklichkeit die Bedienung einer Programmierschnittstelle. Hierbei konkurrieren zwei bekannte Varianten: SAX (Simple API for XML) und das bereits im Zusammenhang mit JavaScript erläuterte DOM (Document Object Model). Unterschieden werden muss ferner zwischen Parsern, die validieren, und solchen, die das nicht tun. Validierende Parser überprüfen XML-Code, der sich auf bestimmte Dokumenttyp-definitionen bezieht, gegen diese Dokumenttypdefinitionen. Bei Fehlern wie nicht in der DTD definierte Elemente oder dort nicht erlaubte Elementverschachtelungen erzeugen sie eine Fehlermeldung. Nicht-validierende Parser überprüfen dagegen nur, ob die allgemeinen XML-Regeln eingehalten werden.

Aufbau von XML-Dokumenten

Mit dem grundsätzlichen Aufbau von XML-Dokumenten müssen Sie sich in jedem Fall vertraut machen – egal ob Sie eigene XML-Sprachen definieren oder einfach nur bereits vorhandene XML-Daten bearbeiten oder verarbeiten wollen. In diesem Abschnitt erhalten Sie das erforderliche Basiswissen.

Elemente, Tags und Attribute

Das formale Repertoire von XML besteht aus Elementen mit oder ohne eingeschlossenen Inhalt, repräsentiert durch Tags und optional durch Attribute mit Wertzuweisungen, die innerhalb von (Start-)Tags notiert werden. Die Notation ist dabei diejenige, die Sie in Zusammenhang mit XHTML bereits kennen gelernt haben. Eine Reihe von Regeln gelten für alle XML-Dokumente:

  • Standalone-Tags werden – wie bereits aus XHTML bekannt – in XML-Sprachen stets durch einen Schrägstrich / vor der schließenden spitzen Klammer markiert, wie in <element />.
  • Wertzuweisungen an Attribute werden grundsätzlich in einfachen oder doppelten Anführungszeichen notiert. Typografische Anführungszeichen sind dabei nicht erlaubt.
  • Groß- und Kleinschreibung wird bei Element- und Attributnamen unterschieden. Im gleichen Dokument können also beispielsweise <Name></Name> und <name></ name> vorkommen – es handelt sich jedoch um unterschiedliche Elemente.
  • Element- und Attributnamen dürfen aus Buchstaben, Ziffern und den Interpunktionszeichen _ (Unterstrich), - (Bindestrich), . (Punkt) und : (Doppelpunkt) bestehen. Die beiden letzteren Zeichen sind jedoch für XML-interne Zwecke reserviert und sollten bei eigenen Namen nicht verwendet werden.

Bei den Buchstaben sind zwar auch solche erlaubt, die nicht im ASCII-Zeichensatz vorkommen (a-z und A-Z), doch in der Praxis beschränkt man sich normalerweise auf die ASCII-Buchstaben.

Das erste Zeichen eines Namens darf keine Ziffer sein und Elementnamen dürfen nicht mit xml-beginnen.

Werfen wir einen Blick in den Quelltext eines einfachen SVG-Dokuments. SVG (Scalable Vector Graphics), eine XML-basierte Sprache, beschreibt vektorgrafische Daten wie geometrische Formen, Schriftzüge und deren Eigenschaften. Im folgenden Beispiel wird ein Rechteck definiert, dessen Füllmuster aus einem linearen Farbverlauf von Blau nach Weiß besteht:

<?xml version="1.0"?>  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  <svg version="1.1" width="150" height="150" xmlns="http://www.w3.org/2000/svg">  <defs>  <linearGradient id="verlauf" x1="0%" y1="0%" x2="100%" y2="100%">  <stop offset="0%" stop-color="blue" />  <stop offset="100%" stop-color="white" />  </linearGradient>  </defs>  <rect x="55" y="20" width="200" height="100" fill="url(#verlauf)" />  </svg>  

Es geht an dieser Stelle nicht darum, das SVG-Format zu verstehen. Entscheidend ist das Verständnis für den grundsätzlichen Aufbau eines XML-Dokuments. In der ersten Zeile steht stets die so genannte XML-Deklaration (<?xml?>). Anschließend kann – wie im obigen Beispiel – eine Dokumenttypdeklaration folgen (<!DOCTYPE ...>).

Weiterhin besteht ein XML-Dokument aus einem so genannten Dokumentelement.

Dies ist das Element, zwischen dessen Start- und End-Tag der gesamte Nutzinhalt des Dokuments notiert wird. Im Fall von SVG hat das Dokumentelement den Namen svg und zwar deshalb, weil es in der Dokumenttypdeklaration so angegeben ist: <!DOCTYPE svg>. Der gesamte Nutzinhalt des SVG-Dokuments ist daher also in die Tags <svg></svg> eingeschlossen. Innerhalb der Dokumenttypdeklaration wird auch ein URI angegeben (http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd). Es handelt sich um den Ablageort einer so genannten DTD (Document Type Definition). Im Fall von SVG sind diese Definitionen öffentlich zugänglich. Sie können den genannten URI sogar im Browser aufrufen und erhalten die Dokumenttypdefinitionen als Textdokument. In der DTD wird mithilfe einer standardisierten Syntax unter anderem festgelegt, aus welchen Elementen und Attributen eine bestimmte XML-Sprache besteht, welche Elemente innerhalb von welchen anderen Elementen vorkommen dürfen, welche Elemente welche Attribute haben können und welche Regeln für Wertzuweisungen an diese Attribute gelten. Die DTD einer XML-Sprache ist somit der verbindliche Kanon dafür, was innerhalb der Sprache erlaubt ist und was nicht. In der DTD zum SVG-Format werden unter anderem auch Elemente wie defs, linearGradient oder rect definiert, die im obigen SVG-Beispiel vorkommen. Gleiches gilt für Attribute wie offset, stop-color, x, yoder width. Die DTD legt auch fest, dass beispielsweise ein linearGradient-Element innerhalb eines defs-Elements vorkommen darf. Auch Kommentare sind in XML erlaubt – sie werden genauso notiert, wie es aus HTML bekannt ist: <!-- Kommentartext -->.

HTML und XHTML

Vielleicht haben Sie bereits von XHTML gehört und kennen Aussage wie die, dass man kein HTML mehr verwenden solle, sondern nur noch XHTML. In diesem Zusammenhang sollten Sie ein paar grundsätzliche Hintergründe kennen.

SGML und XML

HTML ist ein wohldefinierter Standard. Die Regeln für korrektes HTML werden jedoch nicht mithilfe natürlicher Sprache, sondern in einer ebenfalls computerlesbaren Meta-Sprache namens SGML (Structured Generalized Markup Language) formuliert. Die Computerlesbarkeit ist wichtig, damit z.B. ein Programm eine in HTML geschriebene Webseite gegen die in SGML formulierten HTML-Regeln auf syntaktische Korrektheit testen kann. Diesen Vorgang nennt man Validierung (Gültigkeitsüberprüfung). SGML ist sehr leistungsfähig, aber auch recht komplex und für viele praktische Anwendungsfälle überdimensioniert. Als praxisnähere Alternative zu SGML hat sich mittlerweile XML (Extensible Markup Language) etabliert. XML ist wie SGML eine computerlesbare Meta-Sprache zum Formulieren der Regeln von Markup-Sprachen wie HTML.

XHTML (Version 1.0) ist zunächst einmal nichts anderes als eine Neuformulierung der Sprachregeln von HTML

(Version 4.01) in XML. Mit XHTML 1.0 können Sie also nicht mehr und nicht weniger und nichts anderes tun als mit der aktuellen HTML-Version 4.01: nämlich die Inhalte Ihrer Webseiten strukturieren. Es gibt in diesem Stadium von XHTML auch keine wesentlich anderen Sprachbestandteile als in HTML. Da allerdings die Markup-Regeln von XML etwas anders aussehen als die von SGML, gibt es einige syntaktische Abweichungen und Besonderheiten.

Interpretation von HTML und XHTML

Ein Parser leistet die Verarbeitung von Markup-Sprachen entsprechend der Regeln der Markup-Sprache. Jeder Browser, der eine Webseite am Bildschirm anzeigt, muss deren HTML-Quelltext parsen. Aus dem Markup geht hervor, aus welchen Elementen die Webseite besteht und welche Elemente innerhalb welcher anderer Elemente vorkommen. So kann beispielsweise ein einzelnes Wort wie „Mensch“ Inhalt einer Kopfzelle einer Tabelle sein, die sich in einem bestimmten Bereich innerhalb des Dateikörpers befindet. Zum Verarbeiten von HTML verfügt jeder Browser über einen HTML-Parser. Bei XHTML ist die Angelegenheit etwas komplizierter: Wenn das HTML-Dokument vom Browser als HTML akzeptiert wird, verwendet der Browser seinen HTML-Parser. Wird es jedoch als XML-Dokument akzeptiert, so wird der XML-Parser verwendet, sofern der Browser über einen entsprechenden Parser verfügt. In der Darstellung kann dies erhebliche Auswirkungen haben. So stellen einige Browser XML-geparste Dokumente nur als Markup-Strukturbaum dar, also letztlich als eine sauber formatierte Quelltextansicht. Andere bieten XML- geparste Dokumente möglicherweise nur zum Download an und stellen gar nichts dar.

Ob ein Browser bei einem XHTML-Dokument den HTML-Parser oder den XML-Parser verwendet,

hängt in erster Linie vom zugewiesenen Mime-Type ab. Der Mime-Type legt den Datentyp fest. Jeder Browser hat lokal eine eigene Liste von Mime-Typen gespeichert, mit deren Hilfe er z.B. Dateiendungen und Datentypen zuordnen kann. Beim MS Internet Explorer ist diese Liste eng verzahnt mit den Dateiendungsverknüpfungen des Betriebssystems. Wird eine beliebige Datei im Browser lokal geöffnet, kann dieser an Hand seiner Mime-Type-Liste entscheiden, wie er mit der Datei verfahren soll. Anders sieht es aus, wenn der Browser Daten von einem Webserver anfordert und empfängt. In diesem Fall übermittelt der Webserver Kopfdaten an den Browser, in denen unter anderem eine Angabe zum Mime-Type der übertragenen Daten stehen kann, die dem Browser zur Orientierung dient. Für HTML-Dokumente lautet der Mime-Type text/html. Für XHTML sollte jedoch laut Spezifikation nicht dieser Mime-Type verwendet werden, sondern application/xhtml+xml. Alternativ dazu sind auch die Angaben text/xml und application/xml möglich. Dies führt jedoch je nach Server- und Browser-Einstellungen zu Problemen. Der immer noch am weitesten verbreitete MS Internet Explorer kann mit dem Mime-Type application/xhtml+xmlsogar bei angepasster Server-Konfiguration nichts anfangen und bietet ein Dokument mit diesem Mime-Type zum Download an. Daher wird in der Praxis doch noch der Mime-Type text/html verwendet. Wenn Sie sichergehen wollen, dass Ihre XHTML-Seiten als Webseiten im Browser erscheinen, dann weisen Sie statischen XHTML-Dateien am besten ebenso wie HTML-Dateien die Dateiendung .htm oder .html zu.

Argumente für XHTML

Bei neu zu erstellenden Webseiten sprechen durchaus einige Gründe dafür, von vorneher- ein XHTML statt „herkömmlichem“ HTML zu verwenden. Diese Gründe hängen letztlich alle mit der Integration von XHTML in der XML-Welt zusammen:

  • Kombination mit anderen XML-Sprachen: In einem XHTML-Dokument können Sie beispielsweise direkt mathematisch/naturwissenschaftliche Formeln in MathML oder Vektorgrafiken in SVG notieren. Der Grund ist, dass in XML-basierende Dokumente, zu denen XHTML-Dokumente ja gehören, Daten aus beliebigen anderen XML-basierenden Sprachen eingebettet werden können.
  • Konvertierung in andere XML-Sprachen oder Ausgabeformate: Mithilfe von XSLT, einer standardisierten, XML-basierten Markup-Sprache zum Übertragen von Inhalten aus XML-basierten Sprachen in andere XML-basierten Sprachen oder beliebige andere Ausgabeformate ist XHTML optimal für die Konvertierung in andere Ausgabeformate gerüstet. Dies ist beispielsweise für Inhalte sinnvoll, die nicht nur als Webseite, sondern z.B. auch als Print-Dokument veröffentlicht werden sollen.
  • Zukunftssicherheit: Die Spezifikation zu XHTML wird in jedem Fall weiterentwickelt. So ist XHTML 2.0 bereits in Entwicklung. Eine parallele Weiterentwicklung von herkömmlichem HTML ist dagegen nicht vorgesehen. Zwar ist XHTML 2.0 für die aktuelle Praxis noch irrelevant, doch kann sich dies in wenigen Jahren ändern. Eine Konvertierung von XHTML-1.0-Dokumenten nach XHTML 2.0 ist vermutlich unproblematischer zu bewerkstelligen als eine Konvertierung von herkömmlichem HTML 4.01 auf XHTML 2.0.

Andererseits ist sauberes HTML auch nicht zwangsläufig schlechter konvertierbar als sauberes XHTML. Die Einbettung anderer XML-Formate ist ebenfalls nur schöne Theorie, die in den heutigen Browsern höchstens ansatzweise funktioniert. So betrachtet spricht aus Basiswissen HTML und CSS praktischer Sicht nichts gegen die Verwendung von HTML. Die Quelltexte auf dieser Webseite verwenden ebenfalls „gewöhnliches“ HTML.

Modularisierung von XHTML

HTML 4.0 und XHTML 1.0 sind – auch wenn sie von unwissenden Schwätzern gerne wegen ihrer Schlichtheit belächelt werden – eigentlich sehr umfangreiche Sprachen mit einem nicht ganz einfachen Regelwerk aus über 80 Elementen, ihren möglichen Attributen, Verschachtelungsregeln und einer ganzen Reihe benannter Zeichen. Beide Sprachen bieten damit ein brauchbares Arsenal für Hypertext-Dokumente an. Egal ob einfache Porträt-Homepages oder wissenschaftliche Abhandlungen – der Strukturvorrat von HTML/XHTML ist durchaus reichhaltig und fur die meisten Zwecke ausreichend. Allerdings nicht für alle Zwecke.

Der Umfang beider Sprachen und ihre nicht ganz trivialen Regeln stellen andererseits hohe Anforderungen an die auslesende Software und deren Darstellungsfähigkeiten. Von einem modernen Webbrowser, der auf einem modernen PC läuft, kann man diese Fähigkeiten verlangen. Aber von Software, die beispielsweise in einem Handy einem Pocket-Computer oder einem simplen Sprachwiedergabegerät läuft, kann man nicht unbedingt die gleichen Fähigkeiten erwarten.

HTML/XHTML decken also einerseits trotz ihres beträchtlichen Sprachumfangs nicht alle denkbaren Wünsche ab,

und andererseits sind sie fur manche Zwecke schlichtweg überdimensioniert. Aus diesem Grund gehen die überlegungen des W3-Konsortiums in die Richtung, zumindest bei XHTML zu ermöglichen, dass sowohl abgespecktere als auch erweiterte Sprachvarianten davon möglich sind. Handy-Software könnte dann beispielsweise eine abgespecktere Sprachvariante interpretieren, während ein Mathematiker, der seine Arbeit publizieren möchte, XHTML um Elemente aus einer speziellen Auszeichnungssprache für mathematische Formeln erweitern kann. Das Konzept zum Abspecken und Erweitern von XHTML wird als Modularisierung bezeichnet. Dass es nur bei XHTML und nicht bei HTML angewendet werden soll, liegt daran, dass für die Modularisierung XML-typische Techniken angewendet werden sollen. Die Modularisierung stellt nämlich bestimmte formale Regein zur Verfügung, die abgespeckte oder erweiterte Varianten von XHTML einhalten müssen.

In wieweit sich das Konzept der Modularisierung durchsetzen wird, bleibt abzuwarten.

Denn wer sich mit dem Design eigener Auszeichnungssprachen befasst, kann schließlich auch direkt die Möglichkeiten von XML nutzen, um entsprechende Sprachen zu entwerfen. Und „einfacher“ als XML ist das Konzept der Modularisierung sicher nicht – im Gegenteil: Es setzt im Grunde die Beherrschung von XML voraus und reizt dessen Möglichkeiten aus.

Die Module von XHTML 1.1

Die folgende Tabelle listet die Module auf, aus denen XHTML 1.1 besteht. Auf die Praxis als XHTML-Anwender hat diese Modularisierung keinen Einfluss. Sie können Ihre XHTML-Dokumente schreiben wie gewohnt – mit der Einschränkung, dass Sie nichts mehr verwenden dürfen, was noch aus den HTML-Varianten „Transitional“ und „Frameset“ stammt.

Name des ModulsElementeErläuterung
Structurebody head html titleModul für die Elemente, die das Grundgerüst eines XHTML-Dokuments bilden.
Textabbr acronym address blockquote br cite code dfn div em h1 h2 h3 h4 h5 h6 kbd p pre q samp span strong varModul für alle Block- und Inline-Elemente, die Text enthalten können und logische Auszeichnungen darstellen, also keinen Hinweis auf ihre visuelle Darstellung enthalten.
HypertextaModul für Anker und Verweise innerhalb des Dokuments.
Listdl dt dd ol ul liModul für nummerierte Listen, Aufzählungslisten und Definitionslisten (Glossarlisten).
Objectobject paramModul für Multimedia-Referenzen.
Presentationb big hr i small sub sup ttModul für Elemente, die Text enthalten können und physische Auszeichnungen darstellen, also einen Hinweis auf ihre visuelle Darstellung enthalten.
Editdel insModul für änderungsmarkierungen im Text.
Bidirectional TextbdoModul für mehrsprachige Dokumente, die Text in Sprachen mit unterschiedlicher Schreibrichtung enthalten.
Formsbutton fieldset form input label legend select optgroup option textareaModul für Formulare und Formularelemente.
Tablecaption col colgroup table tbody td tfoot th thead trModul für Tabellen und Tabellenelemente.
ImageimgModul für Grafikreferenzen.
Client-side Image Maparea mapModul für Grafiken mit verweis-sensitiven Flächen, vom Browser allein darzustellen.
Server-side Image Mapismap (bei img)Modul für Grafiken mit verweis-sensitiven Flächen, vom Browser in Kommunikation mit dem Web-Server darzustellen.
Intrinsic Eventson* (Event-Handler-Attribute)Modul für alle Event-Handler, die als Attribut in Elementen notiert werden können und eine Schnittstelle für Script-Sprachen bilden.
Meta-InformationmetaModul für Meta-Daten für Suchmaschinen und Browser.
Scriptingnoscript scriptModul für Script-Bereiche und Bereiche für Browser, die keine Scripts ausführen können.
Stylesheetstyle (Element)Modul für Bereiche, in denen zentrale Stylesheet-Formate definiert werden.
Style Attributestyle (Attribut)Modul für das style-Attribut.
LinklinkModul für logische Beziehungen zu anderen Dateien.
BasebaseModul für Adressbasis und Zielfensterbasis.
Ruby Annotationruby rbc rtc rb rt rpModul für Ruby-Text. Die entsprechenden Elemente sind neu. Ruby-Text ist eine Textform, die in fernöstlichen Sprachen verwendet wird, um Silben- oder Wortzeichen mit zusätzlichen Bedeutungshinweisen zu versehen.