Anzeige
Tutorialbeschreibung

Professionelle Websites: Basiswissen HTML und CSS Teil 2

Professionelle Websites: Basiswissen HTML und CSS Teil 2

Dieses Kapitel soll die beiden grundsätzlichen Sprachen vermitteln, mit denen moderne Webseiten erstellt werden: HTML und CSS. In HTML strukturieren Sie Inhalte durch Elemente für Überschriften, Absätze, Listen, Tabellen und andere. Mithilfe von CSS bestimmen Sie, wie diese Elemente z.B. im Browser-Fenster angeordnet und formatiert werden. Beide Sprachen sind computerlesbar, aber auch für Menschen genießbar. Sie bestehen aus englischsprachigen Begriffen oder Abkürzungen davon sowie aus einfachen Steuerzeichen, die auf jeder Tastatur zu finden sind.


Das nun folgende Tutorial ist ein Auszug aus dem Buch: Professionelle Websites von Stefan Münz.
Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Pearson Education .


4 Kopfinformationen einer Webseite

Es gibt noch viel mehr Webseiten, als es Bücher gibt. Und für Bücher existieren bewährte Systeme, die eine Unterscheidung und Bestellung der Bücher im Handel erlauben: ISBNNummer, ZIP-Kurztitel, Erscheinungsangabe, Auflagenangabe usw. Bei Webseiten sind es jedoch keine Bibliothekare und Buchhändler, sondern Softwareprodukte wie Webserver, Such-Robots von Suchmaschinen und Browser, die Webseiten korrekt identifizieren, einordnen und in Beziehung zueinander setzen wollen oder müssen. Deshalb sind in HTML eine Reihe wichtiger Kopfdaten vorgesehen. Leider wird diesen Daten von vielen HTMLAutoren immer noch zu wenig Sorgfalt gewidmet. Unter Kopfinformationen einer Webseite verstehen wir alles, was in HTML zwischen
<head> und </head> notiert wird.

4.1 Dokumenttitel

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 MS Internet Explorers oder als Eintrag in der als Sidebar
zuschaltbaren Bookmark-Baumstruktur bei Browsern wie Firefox oder Opera vor.

4.2 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">

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">

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.

Während die Meta-Angabe zum Mime-Type und Zeichensatz so wichtig ist, dass beispielsweise der HTML-Validator des W3-Konsortiums (http://validator.w3.org/) bei deren Fehlen sofort meckert, ist unsere zweite dringend empfohlene Angabe eher für die Praxis besonders wichtig. Nicht wenige Suchmaschinen listen nämlich, wenn eine Webseite zu den Treffern einer Suche gehört, neben dem anklickbaren Dokumenttitel auch den Inhalt der Meta-Angabe mit einer allgemeinen Beschreibung auf.
Nehmen wir als Beispiel den ersten Suchtreffer aus der Abbildung. 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.">

Wie Sie der Abbildung entnehmen können, verwendet die Suchmaschine Fireball 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.

Bilder

Abbildung 4.5: Beschreibungen aus Meta-Angaben in der Suchmaschine Fireball

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 HTMLMarkup 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">

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">
82 4 Basiswissen HTML und CSS
<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">

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. Kopfinformationen einer Webseite 83 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">

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">

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">

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">

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">

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/">

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">

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">

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.

Links zu weiteren Informationen über Meta-Angaben:

Dublin Core:
http://dublincore.org/
Diplomarbeit »Metadaten im Web«:
http://wwwai.wu-wien.ac.at/usr/albert/html/
Artikel »Meta-Tags und Markenrecht«:
http://www.devmag.net/projektpflege/recht_meta_tags.htm

 4.3 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">
'
Das Beispiel verweist auf eine site-spezifische Suche. Browser, die das link-Element in der
angedachten Weise interpretieren (z.B. Firefox mit entsprechendem Zusatz-Plug-In oder
Opera), bieten eine Navigationsleiste an, über die ein entsprechender Eintrag verfügbar ist.

Bilder

Abbildung 4.6: link-Navigationsleiste im Firefox-Browser

Bilder

Abbildung 4.7: link-Navigationsleiste im Opera-Browser

Die schwarzen Pfeile in den Screenshots zeigen die Navigationsmöglichkeiten, die entsprechend ausgerüstete Browser anbieten, um dem Anwender die logischen Links des link-Elements verfügbar zu machen.
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">

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">
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">
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">
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">

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">

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">

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.

4. 5 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>

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.

5 Inhaltliche Strukturierung

Nachdem Sie nun eine Menge über Kopfdaten wissen, 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.

5.1 Block-Elemente (Absatzformate) für den Fließtext

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. Genauer werden wir darauf in Zusammenhang mit CSS eingehen.

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:

Listing 4.3: HTML-Datei mit Bereichen

Bilder


Bilder

Abbildung 4.8: Die HTML-Datei aus Listing 4.3 im Browser

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.

Ü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:
<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>

Alle Überschriftenelemente beginnen mit h für 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.

Bilder

Abbildung 4.9: Default-Darstellung der sechs Überschriftenebenen im Browser

Absatzparagraphen
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>

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.

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>

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 listitem (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.
Listen können auch verschachtelt werden, wie die nachfolgende Abbildung zeigt.

Bilder

Abbildung 4.10: Verschachtelte Aufzählungsliste im Browser

Der HTML-Quelltext dazu sieht folgendermaßen aus:
<ul>
  <li>Listenpunkt</li>
  <li>Unterliste:
    <ul>
      <li>Listenpunkt</li>
      <li>Listenpunkt</li>
   </ul>
  </li>
</ul>

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>

Aufgelöst wird dies im Browser zu:
1. Aufstehen
2. Duschen
3. Frühstücken

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).

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:

Bilder

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.

Bilder

Abbildung 4.11: »Gemalte« Tabelle als präformatierter Text im Browser

Das pre-Element darf durchaus auch andere HTML-Elemente enthalten. 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:
<pre>
&lt;ol&gt;
&lt;li&gt;Aufstehen&lt;/li&gt;
&lt;li&gt;Duschen&lt;/li&gt;
&lt;li&gt;Frühstücken&lt;/li&gt;
&lt;/ol&gt;
</pre>

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>

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>
Stefan Münz, stefan.muenz@selfhtml.org
</address>

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>

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.

Bilder

Abbildung 4.12: Glossar-Liste im Browser

5.2 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>

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-Auszeichnung Bedeutung
<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

Bilder

Tabelle 4.7: Semantische Inline-Auszeichnungen in HTML

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 URLAdressen 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>archê</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>
Das Beispiel zeigt, wie Sie mithilfe des universell einsetzbaren class-Attributs noch weitere semantische Genauigkeit im Text erzielen können.

Inline-Auszeichnung ohne semantische Bedeutung
Bei diesen Elementen handelt sich um solche, die direkt die Textformatierung beeinflussen.

Bilder

Tabelle 4.8: Inline-Auszeichnung ohne semantische Bedeutung

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 – ins steht 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). Mithilfe 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 HTMLSpezifikation mittlerweile nicht mehr empfohlen. Stattdessen wird auf die Möglichkeit hingewiesen, serverseitige Redirects einzusetzen.</ins>

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:
<sub>...</sub> Tiefgestellt
<sup>...</sup> Hochgestellt
<span>...</span> Inline-Element ohne Wirkung

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

5.3 Tabellen

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 HTMLStandard 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. Auf die Details dazu werden wir in Zusammenhang mit CSS eingehen. 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.

Aufbau einer Tabelle
Das nachfolgende Quelltextbeispiel zeigt eine kleine Tabelle:

Bilder


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.

Bilder

Abbildung 4.13: Einfache HTML-Tabelle im Browser

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:

Bilder

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 th ausgezeichnete 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">

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">

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">. 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.

Bilder

Abbildung 4.14: Tabelle ohne Außenrahmen und mit Linien nur zwischen Tabellenteilen

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%">

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:

Bilder

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.

Zellen über mehrere Spalten oder Zeilen verbinden
Bei komplexeren Tabellen kommt es häufig vor, dass einzelne Zellen über mehrere Spalten oder Zeilen hinweg verbunden werden. Auch das ist mit HTML möglich. Das erste Code-Beispiel zeigt eine Zelle, die sich innerhalb einer Tabellenzeile über zwei Spalten erstreckt:

<table border="1">
  <tr>
    <td colspan="2">A+B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
</table>

Durch das Attribut colspan= können Sie eine Tabellenzelle, in deren Start-Tag Sie das Attribut notieren, über so viele nachfolgende Zellen (Spalten in dieser Zeile) erstrecken wie angegeben. In unserem Beispiel umfasst die Zelle zwei Spalten. Eine dritte Spalte wird dann noch ganz normal notiert. In der zweiten Tabellenzeile des Beispiels sind dagegen alle drei Spalten einzeln definiert.

Wir erreichen damit also folgenden Effekt:

Bilder

Abbildung 4.15: Tabellenzelle, die sich über zwei Spalten erstreckt

Etwas gewöhnungsbedürftiger ist die Notation, wenn sich eine Zelle über mehrere Zeilen
erstrecken soll. Da in HTML die Tabelleninhalte im Quelltext zeilenweise notiert werden,
muss man hierbei etwas mitdenken. Ein analoges Beispiel zu oben:

<table border="1">
  <tr>
    <td rowspan="2">A<br>+<br>A</td><td>B</td><td>C</td>
  </tr>
  <tr>
    <td>B</td><td>C</td>
  </tr>
</table>

Bilder

Abbildung 4.16: Tabellenzelle, die sich über zwei Zeilen erstreckt

Zum zeilenübergreifenden Verbinden von Zellen dient das Attribut rowspan=. Als Wert wird angegeben, über wie viele nachfolgende Zeilen sich die Zelle erstrecken soll. In den nachfolgenden Zeilen müssen Sie nun berücksichtigen, dass für die Spalte, bei der sich die Zelle erstreckt, keine Zelle notiert werden darf. Im Beispiel sind deshalb in der zweiten Tabellenzeile nur zwei Zellen definiert, obwohl die Tabelle eigentlich drei Spalten hat. Weggelassen wurde in diesem Fall die Zelle für die erste Spalte, da wir in der Zeile zuvor bei der Zelle für die erste Spalte angegeben haben, dass sich diese über zwei Zeilen erstrecken soll.
Die Kombination von colspan= und rowspan= in einer Zelle ist ebenfalls zulässig! 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. ">

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">

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>

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>

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.



Das Tutorial ist ein Auszug aus dem Buch von Stefan Münz:

Professionelle Websites - Programmierung, Design und Administration von Webseiten
Addison-Wesley, 2. Auflage, 1136 Seiten, gebunden, komplett in Farbe, mit DVD

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von
Pearson Education.

Mehr Informationen zu diesem wunderbaren Fachbuch für Webmaster und Webentwickler
gibt es hier: Professionelle Websites

Alle Teile des Buches: 

1 Intro
2 HTML und CSS
3 Dynamische Seiten mit JavaScript/DOM
4 Die Server-Seite
5 PHP und MySQL
6 XML
7 Betrieb von Websites
8 Referenz
Bilder

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von MaoMao
  • 09.01.2013 - 17:08

Gute Tutorial leicht erklärt.

Portrait von clanfirefox
  • 24.12.2012 - 00:35

Sehr Hilfreich :) Das erste Buch war schon Klasse !

Portrait von artesmaracay
  • 04.12.2010 - 16:53

Vielen Dank, sehr viel Information!! Sehr prima.

Portrait von simalosa
  • 27.08.2010 - 09:15

sehr gut verständlich und informativ. Danke

Portrait von matzze86
  • 07.09.2009 - 14:16

super tutorial. werde auch die restlichen teile weiterlesen

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 27.07.2009 - 18:06

gute verständliches tutorial.
werde auch die restlichen teile weiterlesen

Portrait von Baltin
  • 10.03.2009 - 02:38

Gut geschrieben und informativ, leider hat es mir noch nicht geholfen werde ich wohl den nächsten teil lesen müssen ;o)

Portrait von KBanane
  • 19.03.2008 - 11:10

Wieder Super erklärt Danke.

p.s. MEHR MEHR MEHR xD

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 15.03.2008 - 16:46

Sehr hilfreich ! Vor allem für Anfänger wie mich:) Danke

Portrait von drache01
  • 14.03.2008 - 15:49

Super! ich habe jetzt dank diesem Tutorial ganz schön was gelernt ;)

Portrait von Erazer81
  • 14.03.2008 - 14:20

freue mich auf mehr - so was kann ich immer brauchen weil ich mir HTML selber beibringe

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 13.03.2008 - 23:25

nett, kann man noch viel lernen.

Portrait von leg0lyZe
  • 13.03.2008 - 14:49

sehr nice , danke
hab sein erstes buch auch gelesen ist ech klasse

Portrait von Naight
  • 13.03.2008 - 13:32

Also ich finde der WS recht gut.. habe allerdings auch schon einige längere zeit mit dem thema zu tun und verstehen vondaher eigentlich alles sehr gut.

Portrait von luhaddy
  • 13.03.2008 - 08:58

Hallole !

Ich finde die Angaben im Workshop recht gut und den Workshop sehr gut illustriert. Ein Anfänger wird allerdings noch zusätzliche Literatur brauchen um bestimmte Angaben besser zu verstehen.

Insgesamt aber ein guter gelungener zweiter Teil des Workshops.

Gruß luhaddy

x
×
×