Dave Raggett   Mehr Möglichkeiten mit HTML

Dave Raggett, 29. August 2000.

Nachdem Sie die Grundlagen beherrschen, ist es an der Zeit, sich die weiteren Möglichkeiten von HTML anzuschauen. Im folgenden werden Sie lernen, wie Sie:

  • Zeilenumbrüche erzwingen
  • geschützte Leerzeichen einfügen
  • Sonderzeichen mit Entities umschreiben
  • in die Mitte von Seiten linken
  • vorformatierten Text benutzen
  • Text um Bilder fließen lassen
  • anklickbare Bildbereiche definieren
  • Tabellen bauen
  • Roll-Overs und andere Tricks verwenden

P.S. Ich empfehle, mit HTML Tidy Ihr Markup zu säubern und von Fehlern zu befreien.

Zeilenumbrüche erzwingen

Gelegentlich werden Sie mal einen Zeilenumbruch erzwingen wollen. Sie benutzen hierzu das br-Element, zum Beispiel für die Wiedergabe einer postalischen Adresse:

<p>The Willows<br>
21 Runnymede Avenue<br>
Morton-in-the-marsh<br>
Oxfordshire OX27 3BQ</p>

Das br-Element hat niemals ein End-Tag. Im allgemeinen werden Elemente, die keine End-Tags benötigen, als leere Elemente bezeichnet.

Geschützte Leerzeichen einfügen

Text wird von Browsern automatisch umbrochen, sodaß er stets in seinen Rahmen paßt. Wo immer ein Leerzeichen im Markup erscheint, kann ein Zeilenumbruch vorgenommen werden. Manchmal ist es allerdings sinnvoll, den Browser vom Textumbruch zwischen zwei bestimmten Worten abzuhalten, zum Beispiel bei einem Firmennamen wie "Coke Cola". Der Trick besteht darin, anstelle des Leerzeichens &nbsp; (non-breaking space) zu verwenden, zum Beispiel:

Süße mit Kohlensäure versetzte Getränke, wie z.B. Coke&nbsp;Cola,
haben eine weltweite Popularität erreicht.

Es ist allerdings schlechte Praxis, durch die Wiederholung von geschützten Leerzeichen Text einzurücken. Solche Einzüge sollten Sie besser mit Style Rules definieren.

Sonderzeichen mit Entities umschreiben

Copyright-Anmerkungen oder Warenzeichen werden üblicherweise mit dem entsprechenden Zeichen versehen:

Symbol Entity Beispiel
Copyright-Zeichen &copy; Copyright © 1999 W3C
Geschütztes Warenzeichen &reg; MagiCo ®
Warenzeichen &#8482; Webfarer™

Beachten Sie, daß HTML 4.0 &trade; für das Warenzeichen definiert, allerdings wird dies momentan nicht so weitreichend unterstützt wie &#8482;

Es gibt noch eine Menge anderer Entities (Zeichenbeschreibungen), die für Sie nützlich sein können:

Symbol Entity Beispiel
Kleiner als (Less than) &lt; <
Größer als (Greater than) &gt; >
Kaufmanns-Und (Ampersand) &amp; &
Geschütztes Leerzeichen (non-breaking space) &nbsp;  
Em-Strich (em dash) &#8212;
Anführungszeichen (quotation mark) &quot; "

Und es gibt weitere Entities für die akzentuierten Zeichen und verschiedenen Symbole des Latin-1 Zeichensatzes:

  &nbsp; &#160; Ð &ETH; &#208;
¡ &iexcl; &#161; Ñ &Ntilde; &#209;
¢ &cent; &#162; Ò &Ograve; &#210;
£ &pound; &#163; Ó &Oacute; &#211;
¤ &curren; &#164; Ô &Ocirc; &#212;
¥ &yen; &#165; Õ &Otilde; &#213;
¦ &brvbar; &#166; Ö &Ouml; &#214;
§ &sect; &#167; × &times; &#215;
¨ &uml; &#168; Ø &Oslash; &#216;
© &copy; &#169; Ù &Ugrave; &#217;
ª &ordf; &#170; Ú &Uacute; &#218;
« &laquo; &#171; Û &Ucirc; &#219;
¬ &not; &#172; Ü &Uuml; &#220;
­ &shy; &#173; Ý &Yacute; &#221;
® &reg; &#174; Þ &THORN; &#222;
¯ &macr; &#175; ß &szlig; &#223;
° &deg; &#176; à &agrave; &#224;
± &plusmn; &#177; á &aacute; &#225;
² &sup2; &#178; â &acirc; &#226;
³ &sup3; &#179; ã &atilde; &#227;
´ &acute; &#180; ä &auml; &#228;
µ &micro; &#181; å &aring; &#229;
&para; &#182; æ &aelig; &#230;
· &middot; &#183; ç &ccedil; &#231;
¸ &cedil; &#184; è &egrave; &#232;
¹ &sup1; &#185; é &eacute; &#233;
º &ordm; &#186; ê &ecirc; &#234;
» &raquo; &#187; ë &euml; &#235;
¼ &frac14; &#188; ì &igrave; &#236;
½ &frac12; &#189; í &iacute; &#237;
¾ &frac34; &#190; î &icirc; &#238;
¿ &iquest; &#191; ï &iuml; &#239;
À &Agrave; &#192; ð &eth; &#240;
Á &Aacute; &#193; ñ &ntilde; &#241;
 &Acirc; &#194; ò &ograve; &#242;
à &Atilde; &#195; ó &oacute; &#243;
Ä &Auml; &#196; ô &ocirc; &#244;
Å &Aring; &#197; õ &otilde; &#245;
Æ &AElig; &#198; ö &ouml; &#246;
Ç &Ccedil; &#199; ÷ &divide; &#247;
È &Egrave; &#200; ø &oslash; &#248;
É &Eacute; &#201; ù &ugrave; &#249;
Ê &Ecirc; &#202; ú &uacute; &#250;
Ë &Euml; &#203; û &ucirc; &#251;
Ì &Igrave; &#204; ü &uuml; &#252;
Í &Iacute; &#205; ý &yacute; &#253;
Î &Icirc; &#206; þ &thorn; &#254;
Ï &Iuml; &#207; ÿ &yuml; &#255;

Sie können auch numerische Zeichenbeschreibungen für die griechischen Buchstaben und mathematischen Symbole verwenden, die im Unicode-Zeichensatz definiert sind. Für weitere Details werfen Sie bitte einen Blick auf die in der HTML 4-Spezifikation enthaltene Liste. Beachten Sie, daß die Entity-Namen für diese Zeichen nicht vom Navigator 4 interpretiert werden und Sie deshalb lieber die numerischen Entities benutzen sollten.

In die Mitte von Webseiten linken

Stellen Sie sich vor, Sie haben eine lange Webseite verfasst mit einem Inhaltsverzeichnis am Anfang. Wie machen Sie aus den Einträgen im Inhaltsverzeichnis Hypertext, der auf die entsprechenden Abschnitte verweist?

Nehmen wir an, jeder Abschnitt beginnt mit einer Überschrift, zum Beispiel:

<h2>Lokale Szene-Treffs</h2>

Sie machen die Überschrift zu einem möglichen Ziel für einen Hyperlink, indem Sie sie einschließen in <a name="textmarke"> .... </a>

<h2><a name="szene-treffs">Lokale Szene-Treffs</a></h2>

Das name-Attribut erhält den Namen, mit dem das Hyperlink-Ziel angesprechen werden soll, in unserem Fall: "szene-treffs". Das Inhaltsverzeichnis kann nun einen Hyperlink erhalten, der genau auf diesen Namen verweist, beispielsweise:

<ul>
  ...
  <li><a href="#szene-treffs">Lokale Szene-Treffs</a></li>
  ...
</ul>

Die Raute # vor dem Zielnamen ist unbedingt erforderlich. Falls das Ziel auf einem anderen Dokument liegt, müssen Sie die Internetadresse dieses Dokumentes vor die Raute # setzen. Ist das Dokument zum Beispiel die Startseite von "http://www.bath.co.uk/", sähe der Link folgendermaßen aus:

<a href="http://www.bath.co.uk/#szene-treffs">Lokale Szene-Treffs</a>

Künftig wird es möglich sein, solche Hyperlink-Ziele ohne den Gebrauch des <a>-Elementes anzugeben. Die neue Methode ist wesentlich einfacher, denn Sie brauchen nur ein id-Attribut der Überschrift hinzuzufügen, beispielsweise:

<h2 id="szene-treffs">Lokale Szene-Treffs</h2>

Diese Methode funktioniert nicht bei 4er-Browsern oder früheren Generationen und sollte sehr vorsichtig verwendet werden, da diese Browser immer noch benutzt werden!

Vorformatierter Text

Einer der Vorteile im Web ist es, daß Textzeilen automatisch so umbrochen werden, daß sie immer in die aktuelle Fenstergröße passen. Manchmal werden Sie jedoch genau dieses Verhalten abschalten wollen, wenn Sie beispielsweise Programmier-Code anzeigen möchten. Sie erreichen dies mit dem pre-Element. Zum Beispiel:

<pre>
    void Node::Remove()
    {
        if (prev)
            prev->next = next;
        else if (parent)
            parent->SetContent(null);

        if (next)
            next->prev = prev;

        parent = null;
    }
</pre>

Was folgendermaßen wiedergegeben wird:

    void Node::Remove()
    {
        if (prev)
            prev->next = next;
        else if (parent)
            parent->SetContent(null);

        if (next)
            next->prev = prev;

        parent = null;
    }

Text- und Hintergrundfarbe wurden im Style Sheet festgelegt. Beachten Sie, daß alle Zeilenumbrüche und Leerzeichen exakt so wiedergegeben werden, wie sie auch in HTML erscheinen. Einzige Ausnahme ist die neue Zeile gleich nach dem Start-Tag <pre> und unmittelbar vor dem End-Tag </pre>, die nicht beachtet wird. Dies bedeutet, daß die folgenden zwei Beispiele identisch wiedergegeben werden:

<pre>vorformatierter Text</pre>

<pre>
vorformatierter Text
</pre>

Für die Wiedergabe von vorformatiertem (preformatted) Text wird generell eine nichtproportionale Schriftart (monospace-Familie) verwendet, bei der jedes Zeichen die gleiche Breite besitzt. Wenn Sie allerdings eine Style Rule für das pre-Element definieren, vergessen es mitunter einige Browser, eine nichtproportionale Schriftart zu benutzen, was die Angabe der Eigenschaft font-family nötig macht. Sollten Sie also zum Beispiel alle pre-Elemente in grün wiedergeben wollen, ist es sinnvoll, die Style Rule folgendermaßen zu definieren:

<style type="text/css">
  pre { color: green; background: white; font-family: monospace; }
</style>

Wenn Sie eine Vordergrund-Farbe für Text festlegen, ist es empfehlenswert, auch eine Farbe für den Hintergrund anzugeben. Damit vermeiden Sie unglückliche Konstellationen, bei denen die Hintergrund-Farbe schwer von der Vordergrund-Farbe zu unterscheiden ist. Anstatt die Hintergrund-Farbe für das pre-Element festzulegen, halten Sie es vielleicht auch für geeigneter, diese gleich für das body-Element festzulegen, beispielsweise:

<style type="text/css">
  body { color: black; background: white; }
  pre { color: green; font-family: monospace; }
</style>

Textfluß um Bilder

Mit HTML können Sie wählen, ob ein Bild als Teil der gegenwärtigen Textzeile betrachtet wird oder ob es zum linken oder rechten Seitenrand verschoben wird. Dies kontrollieren Sie mit dem align-Attribut. Wenn das align-Attribut auf left gesetzt ist, schiebt sich das Bild an den linken Rand, wenn es auf right gesetzt ist, an den rechten Rand. Zum Beispiel:

<p><img src="sonne.jpg" alt="Grafik vom Sonnenschein"
width="32" height="21" align="left"> Dieser Text fließt
um die rechte Seite der Grafik.</p>

was folgendermaßen wiedergegeben wird:

Grafik vom Sonnenschein Dieser Text fließt um die rechte Seite der Grafik.

Das nachfolgende Beispiel verwendet align="right":

<p><img src="sonne.jpg" alt="Grafik vom Sonnenschein"
width="32" height="21" align="right"> Dieser Text fließt
um die linke Seite der Grafik.</p>

was so wiedergegeben wird:

Grafik vom Sonnenschein Dieser Text fließt um die linke Seite der Grafik.

Um eine Wiedergabe zu erzwingen, die auf alle Fälle unterhalb des Bildes fortgesetzt wird, können Sie <br clear="all"> verwenden, beispielsweise:

<p><img src="sonne.jpg" alt="Grafik vom Sonnenschein"
width="32" height="21" align="left"> Dieser Text fließt
auf der rechten Seite der Grafik.<br clear="all">
Dies sorgt für eine neue Zeile unterhalb des Bildes.</p>

was folgendermaßen dargestellt wird:

Grafik vom Sonnenschein Dieser Text fließt auf der rechten Seite der Grafik.
Dies sorgt für eine neue Zeile unterhalb des Bildes.

Anklickbare Bildbereiche (Image Maps)

Die folgende Grafik funktioniert wie eine große Karte mit einer Gruppe von Webseiten, bei der Sie nur auf einen der Kreise klicken brauchen, um die entsprechende Seite aufzurufen.

SitemapStart mit HTMLStyling für WebseitenWebseiten-DesignFortgeschrittenes HTML

Das Markup hierfür sieht folgendermaßen aus:

<p align="center">
   <img src="seiten.gif" width="384" height="245"
      alt="Sitemap" usemap="#sitemap" border="0">
   <map name="sitemap">
      <area shape="circle" coords="186,44,45" 
         href="Overview.html" alt="Start mit HTML">
      <area shape="circle" coords="42,171,45" 
         href="Style.html" alt="Styling für Webseiten">
      <area shape="circle" coords="186,171,45"
         alt="Webseiten-Design">
      <area shape="circle" coords="318,173,45"
         href="Advanced.html" alt="Fortgeschrittenes HTML">
   </map>
</p>

Das src-Attribut des img-Elementes gibt die Bilddatei "seiten.gif" an. Das usemap-Attribut verweist auf ein map-Element und benutzt dabei eine Internetadresse, was in diesem Falle mit dem #-Zeichen deutlich gemacht wird. Das border-Attribut ist auf "0" gesetzt, um den üblichen blauen Rahmen zu unterdrücken.

Das map-Element beschreibt, welche Bereiche in dem Bild als Hyperlinks fungieren. Dabei bezieht sich das name-Attribut vom map-Element auf das usemap-Attribut vom img-Element, vergleichbar mit dem name-Attribut des <a>-Elementes. In der Praxis sind map-Element und img-Element auf der selben Seite definiert.

Das area-Element definiert den einzelnen Bereich im Bild und bindet ihn an eine bestimmte Internetadresse. Dabei gibt das shape-Attribut mit "rect" (Rechteck), "circle" (Kreis) oder "poly" (Polygon) die geometrische Form des Bereiches an und das coords-Attribut die Pixelkoordinaten entsprechend der gewählten Form.

  • rect: linksoben-x, linksoben-y, rechtsunten-x, rechtsunten-y
  • circle: Zentrum-x, Zentrum-y, Radius
  • poly: x1,y1, x2,y2, ... xn,yn

Ausgangspunkt ist dabei immer das linke obere Pixel des Bildes mit x=0 und y=0, wobei x nach rechts zunimmt und y nach unten. Die meisten Bildbearbeitungsprogramme können Ihnen die Pixel-Koordinaten von jedem beliebigen Bildpunkt angeben.

Wenn zwei oder mehr definierte Bereiche überlappen, hat das Element, welches als erstes im Dokument steht, Vorrang (antwortet also auf die Benutzereingabe). Bei sehr komplexen Formen, wie z.B. einem röhrenartigen Ring, können Sie einen Teilbereich inaktiv gestalten, indem Sie ihn von einem anderen Bereich unter Verwendung des nohref-Attributes überlappen lassen, beispielsweise:

      <area shape="circle" coords="186,44,50" nohref>
      <area shape="circle" coords="186,44,100" 
         href="Overview.html" alt="Start mit HTML">

Dabei erzeugt der erste Kreis einen inaktiven Bereich innerhalb des größeren Kreises, der vom zweiten area-Element definiert wird. Immer wenn es um solche Effekte geht, muß die inaktive Form zuerst definiert werden, da sie andernfalls von der aktiven Form verdeckt wird.

Warum Sie das alt-Attribut angeben müssen

Das alt-Attribut im area-Element stattet den Link mit einer Textkennzeichnung aus. Ohne diese Kennzeichnung bleibt die Image Map unzugänglich für alle, die das Bild nicht sehen können.

Tabellen

Tabellen werden für Informationen wie auch für Layout verwendet. Sie können Tabellen strecken, um die Seitenränder zu füllen, Sie können eine feste Breite angeben, oder es einfach dem Browser überlassen, die Tabelle automatisch dem Inhalt anzupassen.

Tabellen bestehen aus einer oder mehreren Zeilen mit Tabellenzellen. Hier kommt ein einfaches Beispiel:

Jahr Umsatz
2000 DM 18M
2001 DM 25M
2002 DM 36M

Das Markup sieht folgendermaßen aus:

<table border="1">
<tr><th>Jahr</th><th>Umsatz</th></tr>
<tr><td>2000</td><td>DM 18M</td></tr>
<tr><td>2001</td><td>DM 25M</td></tr>
<tr><td>2002</td><td>DM 36M</td></tr>
</table>

Das table-Element dient als Container (Behälter) für die Tabelle. Das border-Attribut gibt die Rahmenbreite in Pixel an. Das tr-Element dient wiederum als Container für jede Tabellenzeile (table row) und die th- und td-Elemente sind Container für Überschriften- bzw. Datenzellen.

Zellauffüllung (Cell Padding)

Sie können den Leerraum zwischen Zellen-Inhalt und Zellen-Rand für alle Zellen gleichzeitig erhöhen, indem Sie das table-Element mit dem cellpadding-Attribut erweitern. Folgendes bewirkt eine Zellauffüllung mit 10 Pixel:

<table border="1" cellpadding="10">

Was dann so aussieht:

Jahr Umsatz
2000 DM 18M
2001 DM 25M
2002 DM 36M

Zellraum (Cell Spacing)

Das cellspacing-Attribut hingegen bestimmt den Abstand zwischen allen Zellen. Wenn Sie cellspacing auf 10 setzen:

<table border="1" cellpadding="10" cellspacing="10">

sieht das folgendermaßen aus

Jahr Umsatz
2000 DM 18M
2001 DM 25M
2002 DM 36M

Tabellenbreite

Sie können die Breite der Tabelle mit dem width-Attribut angeben. Die Breite ist dabei entweder ein Wert in Pixel oder ein prozentualer Wert, der den Anteil der Tabelle zwischen linkem und rechtem Seitenrand angibt. Dieses Beispiel setzt die Breite auf 80% zwischen den Seitenrändern:

<table border="1" cellpadding="10" width="80%">

Was dann folgenden Effekt hat:

Jahr Umsatz
2000 DM 18M
2001 DM 25M
2002 DM 36M

Textausrichtung in Zellen

Überschriftenzellen (th) werden von den Browser standardmäßig zentriert ausgerichtet, während Datenzellen (td) links ausgerichtet sind. Sie können die Ausrichtung mit dem align-Attribut ändern, welches jeder Zelle oder Zeile (tr-Element) hinzugefügt werden kann. Es verwendet die Werte "left", "center" oder "right":

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th>Jahr</th><th>Umsatz</th></tr>
<tr align="center"><td>2000</td><td>DM 18M</td></tr>
<tr align="center"><td>2001</td><td>DM 25M</td></tr>
<tr align="center"><td>2002</td><td>DM 36M</td></tr>
</table>

mit folgendem Resultat:

Jahr Umsatz
2000 DM 18M
2001 DM 25M
2002 DM 36M

Das valign-Attribut spielt eine ähnliche Rolle für die vertikale Ausrichtung von Zelleninhalt. Es wird mit den Werten "top", "middle" oder "bottom" verwendet und kann jeder Zelle oder Zeile hinzugefügt werden. Standardmäßig richten Überschriftenzellen (th) ihren Inhalt vertikal mittig (middle) und Datenzellen oben (top) aus.

Anmerkung des Übersetzers: Nach meinen eigenen Erfahrungen wird der Inhalt von Datenzellen bei den meisten Browsern ebenfalls vertikal mittig (middle) ausgerichtet.

Leere Zellen

Browser reagieren auf leere Zellen recht eigenartig. Vergleichen Sie einmal:

Jahr Umsatz
2000 DM 18M
2001 DM 25M
2002 DM 36M
2003

mit

Jahr Umsatz
2000 DM 18M
2001 DM 25M
2002  

Ersteres kann auftreten, wenn eine Zelle leer ist:

<td></td>

Um dies zu verhindern, fügen Sie ein geschütztes Leerzeichen ein:

<td>&nbsp;</td>

Zellen, die mehr als eine Zeile oder Spalte umfassen

Lassen Sie uns das obige Beispiel um eine Aufsplittung der Umsätze zwischen nördlichen und südlichen Verkaufsregionen erweitern:

Jahr Umsatz
Nord Süd Total
2000 $10M $8M $18M
2001 $14M $11M $25M

Die Überschrift "Jahr" umfasst jetzt zwei Zeilen, während die Überschrift "Umsatz" drei Spalten umfasst. Dies wird erreicht mit Angabe der entsprechenden rowspan- (Zeilenumfassung) und colspan- (Spaltenumfassung) Attribute. Das Markup für obiges Beispiel sieht dann folgendermaßen aus:

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th rowspan="2">Jahr</th><th colspan="3">Umsatz</th></tr>
<tr align="center"><th>Nord</th><th>S&uuml;d</th><th>Total</th></tr>
<tr align="center"><td>2000</td><td>$10M</td><td>$8M</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$14M</td><td>$11M</td><td>$25M</td></tr>
</table>

Sie können dies auch einfacher haben, wenn Sie die Tatsache ausnutzen, daß Browser die End-Tags für Tabellenzellen und -zeilen nicht benötigen:

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th rowspan="2">Jahr<th colspan="3">Umsatz
<tr align="center"><th>Nord<th>S&uuml;d<th>Total
<tr align="center"><td>2000<td>$10M<td>$8M<td>$18M
<tr align="center"><td>2001<td>$14M<td>$11M<td>$25M
</table>

Beachten Sie, daß die Überschrift "Jahr" zwei Zeilen umfasst, und deswegen das erste th-Element der zweiten Zeile als zweite statt als erste Spalte erscheint.

Rahmenlose Tabellen

Tabellen ohne Rahmen werden oft als Layoutmittel für ein rasterartiges Aufteilen von Webseiten verwendet. Dazu brauchen Sie dem table-Element bloß border="0" und cellspacing="0" hinzuzufügen:

Jahr Umsatz
2000 DM 18M
2001 DM 25M
2002 DM 36M

Dies wurde mit folgendem Markup erreicht:

<table border="0" cellspacing="0" cellpadding="10">
<tr><th>Jahr</th><th>Umsatz</th></tr>
<tr><td>2000</td><td>DM 18M</td></tr>
<tr><td>2001</td><td>DM 25M</td></tr>
<tr><td>2002</td><td>DM 36M</td></tr>
</table>

Wenn Sie das cellspacing-Attribut weglassen, erhalten Sie einen schmalen Abstand zwischen den Zellen, wie nachfolgend zu sehen ist:

Jahr Umsatz
2000 DM 18M
2001 DM 25M
2002 DM 36M

Tabellen farbig gestalten

Für diese Seite legt ein Style Sheet die Hintergrundfarbe der Tabellen fest, mit unterschiedlichen Farben für Überschriften- und Datenzellen. Die Stilregeln (Style Rules), die ich hierfür verwende, sehen folgendermaßen aus:

table {
  margin-left: -4%
  font-family: sans-serif;
  background: white;
  border-width: 2;
  border-color: white;
}
th { font-family: sans-serif; background: rgb(204, 204, 153) }
td { font-family: sans-serif; background: rgb(255, 255, 153) }

Die letzten zwei Zeilen oben definieren die Hintergrundfarbe für alle th- und td-Zellen mit Rot/Grün/Blau-Werten. Die Zahlen bewegen sich in einem Bereich von 0 bis 255 (vollkommen gesättigt).

Sie können die Hintergrundfarbe auch mit dem bgcolor-Attribut (background color) festlegen. Dies wird von nahezu allen Browsern verstanden und setzt nicht unbedingt voraus, daß Style Sheets unterstützt werden. Hierfür müssen Sie zuerst einmal die hexadezimalen Werte für den roten, grünen und blauen Anteil der Farbe bestimmen, die sie verwenden möchten. Einen Umrechner finden Sie auf der Styling-Seite.

<table border="0" cellspacing="0" cellpadding="10">
  <tr>
    <th bgcolor="#CCCC99">Jahr</th>
    <th bgcolor="#CCCC99">Umsatz</th>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2000</td>
    <td bgcolor="#FFFF66">DM 18M</td>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2001</td>
    <td bgcolor="#FFFF66">DM 25M</td>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2002</td>
    <td bgcolor="#FFFF66">DM 36M</td>
  </tr>
</table>

Machen Sie Ihre Tabellen zugänglich

Falls es Ihnen nicht möglich ist, die Tabelle zu sehen, kann es ziemlich schwerfallen, den Sinn der Tabelle zu verstehen. Um dies zu umgehen, fügen Sie als ersten Schritt Informationen hinzu, die den Zweck und die Struktur der Tabelle beschreiben. Das caption-Element erlaubt Ihnen, eine Erklärung zur Verfügung zu stellen und diese Erklärung über- oder unterhalb der Tabelle zu plazieren. Es muß vor dem tr-Element der ersten Zeile stehen.

Geplante Verkaufseinnahmen pro Jahr
Jahr Umsatz
2000 DM 18M
2001 DM 25M

Obige Tabelle wurde mit folgendem Markup erreicht::

<table border="1" cellpadding="10" width="80%">
<caption>Geplante Verkaufseinnahmen pro Jahr</caption>
<tr align="center">
  <th>Jahr</th><th>Umsatz</th>
</tr>
<tr align="center"><td>2000</td><td>DM 18M</td></tr>
<tr align="center"><td>2001</td><td>DM 25M</td></tr>
</table>

Nachfolgend die gleiche Tabelle, wobei hier das caption-Element mit align="bottom" erweitert wurde:

Geplante Verkaufseinnahmen pro Jahr
Jahr Umsatz
2000 DM 18M
2001 DM 25M

Verwenden Sie das summary-Attribut des table-Elementes, um Menschen, die Ihre Tabelle nicht sehen können, die Struktur der Tabelle zu beschreiben. Zum Beispiel: "Die erste Spalte gibt das Jahr an, die zweite Spalte die Einnahmen für dieses Jahr".

<table summary="Die erste Spalte gibt das Jahr an,
die zweite Spalte die Einnahmen für dieses Jahr">

Für den Zusammenhang zwischen Überschriften- und Datenzellen sorgen

Wenn eine Tabelle als Sprache oder Blindenschrift (Braille) wiedergegeben wird, ist es hilfreich zu wissen, welche Überschriften zu welchen Zellen gehören. Zum Beispiel erlaubt Ihnen ein Sprach-Browser, von Zelle zu Zelle aufwärts, abwärts, links und rechts zu springen, wobei vor jeder Zelle die entsprechende Überschrift gesprochen wird.

Um dies zu unterstützen, müssen Sie die Überschriften- und/oder Datenzellen kommentieren. Am einfachsten geht das, indem Sie den Überschriftenzellen das scope-Attribut hinzufügen. Es kann mit den folgenden Werten verwendet werden:

  • row: Die aktuelle Zelle liefert die Überschrift für den Rest der Zeile, die diese Zelle enthält.
  • col: Die aktuelle Zelle liefert die Überschrift für den Rest der Spalte, die diese Zelle enthält..

Dies auf unsere Beispieltabelle angewendet ergibt:

<table border="1" cellpadding="10" width="80%">
<caption>Geplante Verkaufseinnahmen pro Jahr</caption>
<tr align="center">
  <th scope="col">Jahr</th>
  <th scope="col">Umsatz</th>
</tr>
<tr align="center"><td>2000</td><td>DM 18M</td></tr>
<tr align="center"><td>2001</td><td>DM 25M</td></tr>
</table>

Bei komplexen Tabellen können Sie für einzelne Datenzellen auch das headers-Attribut verwenden, mit dem Sie eine durch Leerzeichen getrennte Liste von IDs (Kennzeichnungen) für die entsprechenden Überschriftenzellen angeben. Jede dieser Überschriftenzellen muß dann ein id-Attribut mit der passenden ID enthalten.

Als letzten Punkt sollten Sie erwägen, mit dem abbr-Attribut (Abbreviation) eine Abkürzung für lange Überschriften anzugeben. Das macht das Zuhören bei einer Liste von Überschriften für jede Zelle erträglich. Hier ein Beispiel:

<th abbr="W3C">World Wide Web Consortium</th>

Roll-Overs und andere Tricks

Ein kleines JavaScript kann ein gutes Stück dazu beitragen, Ihre Seiten zu beleben. Sie werden nachfolgend sehen, wie "Rollovers" gemacht werden, die das Aussehen eines Links ändern, sobald sich eine Maus über ihm befindet. Und Sie werden lernen, wechselnde Bannereinblendungen zu erzeugen, die helfen sollen, Besucher auf die Seiten Ihrer Sponsoren zu lenken.

Roll-Overs

In der geläufigsten Form besteht ein Roll-Over aus einem Bild, das als Hyperlink fungiert. Sobald der Mauszeiger über dem Bild ist, ändert es sein Erscheinen, um die Aufmerksamkeit auf den Hyperlink zu lenken. Sie könnten beispielsweise einen Glüh-Effekt oder einen Schatten hinzufügen oder einfach die Hintergrundfarbe wechseln. Hier ist solch ein Beispiel:

<script type="text/javascript">
if (document.images)
{
    image1 = new Image;
    image2 = new Image;
    image1.src = "enter1.gif";
    image2.src = "enter2.gif";
}

function chgImg(name, image)
{
    if (document.images)
    {
        document[name].src = eval(image+".src");
    }
}
</script>

...

<a href="http://www.w3.org/" onMouseOver='chgImg("enter", "image2")'
onMouseOut='chgImg("enter", "image1")'><img name="enter"
src="enter1.gif" border="0" alt="Klick rauf, wenn Du Dich traust!"></a>

und hier, wie es aussieht...

Klick rauf, wenn Du Dich traust!

Ich habe für diese Bilder ein Freeware-Bildbearbeitungstool verwendet, mit dem ich einen Heißen-Wachs-Effekt und für den Text einen Tropfenschatten hinzugefügt habe. Eine Menge Tipps und lizenzfreie Bilder im Web finden Sie mit den meisten Suchmaschinen.

Bannereinblendungen

Wenn Ihre Website über mehrere Sponsoren verfügt, können Sie einen Bildlink verwenden, der periodisch zwischen den Sponsoren wechselt. Der erste Schritt besteht darin, für jeden Sponsor ein eigenes Bild zu erstellen. Alle diese Bilder sollten die gleiche Größe haben. Die entsprechenden URLs der Bilder und der Websites werden dann in die Arrays (Felder) mit den Namen adImages und adURLs gesetzt, die am Anfang des Skriptes definiert sind. Das img-Element für den Link sollte mit dem ersten Bild im Array beginnen, der Bilderwechsel selbst startet unter Verwendung des onload-Ereignisses im body-Element.

<html>
<head>
<title>Rotierende Bannereinblendungen</title>
<script type="text/javascript">
if (document.images)
{
    adImages = new Array("hosts/mit.gif",
                "hosts/inria.gif", "hosts/keio.gif");
    adURLs = new Array("www.lcs.mit.edu",
                "www.inria.fr", "www.keio.ac.jp");
    thisAd = 0;
}

function cycleAds()
{
    if (document.images)
    {
        if (document.adBanner.complete)
        {
            if (++thisAd == adImages.length)
                thisAd = 0;

            document.adBanner.src = adImages[thisAd];
        }
    }

    // Wechsel zum nächsten Sponsor alle 6 Sekunden
    setTimeout("cycleAds()", 6000);
}

function gotoAd()
{
    document.location.href = "http://" + adURLs[thisAd];
}
</script>
</head>
<body onload="cycleAds()">
...

<a href="javascript:gotoAd()"><img name="adBanner"
src="hosts/mit.gif" border="0" alt="Unsere Sponsoren"></a>

Unsere Sponsoren: Unsere Sponsoren

Anmerkung: Vergewissern Sie sich, daß alle Bilder die gleiche Breite und Höhe haben. Alternativ können Sie auch dem img-Element width- und height-Attribute hinzufügen, um sicherzustellen, daß alle Bilder mit der gleichen Größe angezeigt werden.

Was ist mit Browsern, die Scripting nicht unterstützen?

Der Inhalt des noscript-Elementes wird nur angezeigt, wenn der Browser Scripting nicht unterstützt. Es sollte verwendet werden, um Personen Zugang zu Informationen zu gewährleisten, die andernfalls unzugänglich wären für Menschen mit Browsern ohne Scriptunterstützung. Angenommen, Sie möchten die Links zu Ihren Sponsoren auch als Text zur Verfügung stellen:

<noscript>
Unsere Sponsoren: <a href="http://www.lcs.mit.edu/">MIT</a>,
<a href="http://www.inria.fr/">INRIA</a>, und
<a href="http://www.keio.ac.jp/">Keio Universität</a>.
</noscript>

Es gibt zum Thema Scripting viele freie Informationsquellen, die leicht über die meisten Suchmaschinen gefunden werden können.

Wo gibt es weitere Informationen?

Die Empfehlungen des W3C für HTML 4.0 sind letztendlich die Referenz für HTML. Es ist allerdings eine sehr technische Spezifikation. Einfacher zu lesen ist vielleicht eines der zahlreichen Bücher über HTML, wie zum Beispiel "Raggett on HTML 4", herausgegeben 1998 vom Addison Wesley-Verlag. Schauen Sie sich auch "Beginning XHTML" an, erschienen 2000 bei Wrox Press, wo Sie eine Einführung in die Neuformulierung des W3C von HTML als Applikation von XML erhalten. XHTML 1.0 ist jetzt W3C Empfehlung.

Viel Glück und beginnen Sie jetzt mit HTML!

Dave Raggett <dsr@w3.org>

Copyright  ©  1994-2004 W3C ® (MIT, INRIA, Keio ), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements.