Galileo Computing < openbook >
Galileo Computing - Professionelle Buecher. Auch fuer Einsteiger.
Galileo Computing - Professionelle Buecher. Auch fuer Einsteiger.


Kompendium der Informationstechnik
 von Sascha Kersken
EDV-Grundlagen, Programmierung, Mediengestaltung
Buch: Kompendium der Informationstechnik
gp Kapitel 16 HTML und XHTML
  gp 16.1 Einführung
    gp 16.1.1 Regeln für Datei- und Verzeichnisnamen im Webbereich
    gp 16.1.2 HTML-Dateien eingeben
  gp 16.2 HTML und XHTML
    gp 16.2.1 Die Grundstruktur von HTML-Dokumenten
    gp 16.2.2 Textstrukturierung und -formatierung
    gp 16.2.3 Trennlinien
    gp 16.2.4 Listen und Aufzählungen
    gp 16.2.5 Farben in HTML
    gp 16.2.6 Hyperlinks
    gp 16.2.7 Bilder in Webseiten einbetten
    gp 16.2.8 Tabellen
    gp 16.2.9 Formulare
    gp 16.2.10 Einbetten von Multimedia-Dateien
    gp 16.2.11 Frames
    gp 16.2.12 Meta-Tags und Suchmaschinen
  gp 16.3 Cascading Stylesheets (CSS)
    gp 16.3.1 Platzieren von Stylesheets
    gp 16.3.2 Stylesheet-Wertangaben
    gp 16.3.3 Stylesheet-Eigenschaften
    gp 16.3.4 Layer erzeugen und positionieren
  gp 16.4 Zusammenfassung

gp

Prüfungsfragen zu diesem Kapitel (extern)


Galileo Computing

16.2 HTML und XHTML  downtop

HTML steht für Hypertext Markup Language (Auszeichnungssprache für Hypertext, also Text mit integrierten Querverweisen). HTML-Code sieht im Wesentlichen genauso aus wie das im vorigen Kapitel vorgestellte XML, die gemeinsame Wurzel von XML und HTML ist die Auszeichnungssprache SGML. Das klassische HTML ist eine bestimmte SGML-DTD; es sind also nur ganz bestimmte Tags in einer vorgegebenen Anordnung erlaubt. Die aktuelle (und vorläufig letzte) Version dieser Sprache ist HTML 4.01.

XHTML

Da in herkömmlichem HTML eine Reihe von Freiheiten gestattet sind, die in XML nicht mehr gelten, wurde vom W3C inzwischen eine neue HTML-Variante namens XHTML eingeführt, die von XML abgeleitet ist und für die dieselben Regeln gelten wie für alle anderen XML-Dokumente. Die derzeitige Version ist XHTML 1.0. Allerdings sind alle bisher verfügbaren Browser tolerant genug, die gelockerte Syntax der alten HTML-Versionen weiterhin zuzulassen.


Galileo Computing

16.2.1 Die Grundstruktur von HTML-Dokumenten  downtop

In der Praxis wird vielfach noch immer der »normale« HTML-Code eingesetzt. Deshalb wird hier kurz der Aufbau klassischer HTML-Dokumente erläutert; Sie benötigen für den Unterabschnitt keine XML-Vorkenntnisse. In den restlichen Beispielen in diesem Kapitel und im gesamten Buch verwende ich dagegen konsequent die strengere XHTML-Syntax.

HTML-Tags

Im Wesentlichen besteht ein HTML-Dokument neben dem eigentlichen Text aus den Tags, den HTML-Formatierungsbefehlen. Ein Tag wird von spitzen Klammern (< und >) umschlossen. Es gibt zwei verschiedene Arten von Tags:

gp  die Einfach-Tags oder leeren Tags, die an einer einzelnen Stelle im Dokument ein bestimmtes Element setzen (etwa den Zeilenumbruch <br>).
gp  Container-Tags, die geöffnet und wieder geschlossen werden und anderen Inhalt umschließen (etwa die Anweisung <b>...</b> für fett gesetzten Text).

Attribute

Einige HTML-Tags besitzen darüber hinaus einen oder mehrere durch Leerzeichen getrennte Parameter oder Attribute, die in der Form Attribut=Wert angegeben werden und die Einzelheiten des Tags näher bestimmen. Dabei ist es in klassischem HTML üblich, Text-Werte in Anführungszeichen zu setzen, Zahlenwerte jedoch nicht. Formal gesehen dürfen Sie die Anführungszeichen immer dann weglassen, wenn der Parameterwert selbst kein Leerzeichen enthält. Hier ein Beispiel:

<font face="Arial, Helvetica, sans-serif" size=4> ... </font>

Zwischen dem öffnenden und dem schließenden Tag wird serifenlose Schrift in der HTML-Schriftgröße 4 verwendet.

Grundsätzlich besteht eine HTML-Seite aus einem Head (Kopf), der den Titel der Seite und andere Meta-Informationen enthält, und dem Body (Körper), in dem der eigentliche Inhalt des Dokuments steht.

Daraus ergibt sich der folgende grundlegende Aufbau einer HTML-Seite:

<html>
  <head>
    <title> Titel des Dokuments </title>
  </head>
  <body>
    Der sichtbare Inhalt
  </body>
</html>

Im Einzelnen bedeuten die diversen Bestandteile des Dokuments Folgendes:

gp  <html> teilt dem Browser mit, dass HTML-Code folgt.
gp  <head> leitet den Dokumentkopf ein.
gp  <title> leitet den Titel des Dokuments ein.
gp  </title> schließt den Titel; ein Schrägstrich (Slash) vor dem Tag-Namen bedeutet, dass die entsprechende Auszeichnung an dieser Stelle endet.
gp  An dieser Stelle folgen eventuell weitere technische Informationen, die nicht zum sichtbaren Inhalte der Seite gehören.
gp  </head> schließt den Kopf.
gp  <body> leitet den eigentlichen, sichtbaren Inhalt des Dokuments ein.
gp  Der Inhalt selbst besteht aus Text und weiteren ineinander verschachtelten HTML-Tags.
gp  </body> schließt den Inhalt.
gp  </html> schließt das gesamte Dokument.

Im Head muss das Element <title> vorkommen, alle anderen Head-Angaben sind freiwillig. Der Titel des Dokuments ist ein wichtiges Strukturelement, er wird an folgenden Stellen angezeigt:

gp  In der Titelleiste des Browserfensters erscheint er zusammen mit dem Namen des Browsers selbst.
gp  Er steht in der Liste der Favoriten beziehungsweise Bookmarks oder Lesezeichen, wenn Sie die Seite dort ablegen.
gp  In den Ergebnislisten von Suchmaschinen wird der Titel als anklickbarer Link für eine Fundstelle verwendet.

Gute Dokumenttitel

Ein geeigneter Titel sollte den Namen der Website beziehungsweise des Anbieters sowie den Namen der einzelnen Seite enthalten. Hier einige gute Beispiele:

gp  HTML-Kurs – Die erste Webseite
gp  Galileo Computing, Buch – Visual C#
gp  Müller GmbH: Produkte

Über dem Dokument-Start-Tag <html> steht häufig eine DOCTYPE-Verarbeitungsanweisung, wie sie auch für XML-Dokumente verwendet wird:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Statt der Formatierungsvorschrift Transitional, die veraltete HTML 3.2-Tags zulässt, ist auch die Variante Strict möglich, die reines HTML 4.0 verlangt. Wichtig ist eine solche Anweisung für HTML-Validatoren. Dies sind Programme, die den HTML-Code auf Gültigkeit überprüfen – die Verarbeitungsanweisung teilt ihnen mit, mit welcher HTML-Version sie den Code vergleichen sollen.

Die Grundstruktur von XHTML-Dokumenten ist im Wesentlichen mit der HTML 4.0-Struktur identisch. Allerdings beginnen solche Dateien mit einer XML-Kopfzeile. Das gesamte Grundgerüst sieht in XHTML so aus:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title> Hier steht der Titel </title>
  </head>
  <body>
    Hier folgt der Inhalt
  </body>
</html>

Falls Sie mit XML nicht vertraut sind, empfehle ich Ihnen die Lektüre von Kapitel 15, XML. Darüber hinaus sollten Sie folgende Unterschiede zwischen HTML und XHTML beachten:

gp  In HTML ist die Groß- und Kleinschreibung der Tags und ihrer Attribute egal, in XHTML müssen sie kleingeschrieben werden.
gp  Während es in HTML die oben erwähnten »Einfach-Tags« gibt, muss in XHTML jedes Tag geschlossen werden – auch dann, wenn es keinen Inhalt umschließt.
    Beispiel: Das HTML-Tag <br> (break) definiert einen einfachen Zeilenumbruch. In klassischem HTML wird es einfach so notiert:
       
Eine Zeile.<br>Neue Zeile.
    In XHTML müssen Sie dagegen Folgendes schreiben:
       
Eine Zeile.<br></br>Neue Zeile.
    Eine Alternative dazu ist die spezielle XML-Kurzform für solche »leeren« Tags:
       
Eine Zeile.<br />Neue Zeile.
    <br /> ist kein »Einfach-Tag« (so etwas gibt es in XML nicht mehr), sondern öffnendes und schließendes Tag in einem.
       
gp  Die Werte aller Attribute müssen ohne Ausnahme in Anführungszeichen stehen. Das obige Beispiel mit der Schriftformatierung muss in XHTML so lauten:
<font face="Arial, Helvetica, sans-serif" size="4"> ... </font>

Galileo Computing

16.2.2 Textstrukturierung und -formatierung  downtop

Bei der Textformatierung in HTML ist zu beachten, dass der Browser sich grundsätzlich nicht für Textformatierungen im Quelltext interessiert. Ob Sie ein Leerzeichen oder zehn setzen, ob Sie einen Zeilenumbruch erzeugen oder nicht: Der Browser setzt den gesamten Fließtext einfach hintereinander. Er erzeugt nur dann automatische Zeilenumbrüche, wenn der rechte Fensterrand erreicht wird.

Zeilenumbrüche

Wollen Sie dagegen willkürlich einen Zeilenumbruch erzeugen, dann müssen Sie das folgende HTML-Tag verwenden:

<br />

Beachten Sie jedoch, dass Sie auf keinen Fall die Zeilenlänge von Fließtext bestimmen dürfen, indem Sie hinter jede Zeile ein <br /> setzen. Sie riskieren sonst, dass sich bei einer anderen Browserfenster-Größe erzwungene und automatische Zeilenumbrüche abwechseln und auf diese Weise den Zeilenfall völlig zerstören. Sie dürfen feste Zeilenumbrüche also nur an Stellen verwenden, an denen tatsächlich eine neue Zeile beginnen soll, beispielsweise für einfache Aufzählungen, Sinnabschnitte oder Gedichtzeilen.

Sonderzeichen

Ein weiteres Problem ist die Darstellung der Umlaute und anderer Sonderzeichen: Um weltweit kompatibel zu sein, verwendet HTML zunächst nur reinen ASCII-Code, also die 128 international identischen Zeichen. Es gibt zwei Möglichkeiten, dies zu ändern.

Sie können zum einen im Head den Zeichensatz angeben, der im Dokument verwendet wird. Dazu dient ein so genanntes <meta>-Tag, das Konfigurationsinformationen in Form von Name/Wert-Paaren enthält. Um beispielsweise iso-latin-1 – den Standardzeichensatz für die USA und Westeuropa – einzustellen, lautet das entsprechende Tag folgendermaßen:

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

Das Attribut http-equiv besagt in diesem Zusammenhang, dass der Browser den Wert dieses Tags wie ein Feld des HTTP-Headers behandeln soll. Das Zeichensatz-Meta-Tag überschreibt damit die Zeichensatzangabe, die der Webserver dem Browser automatisch übermittelt.

Entity-Referenzen

Alternativ können Sie die deutschen Umlaute und viele andere Sonderzeichen durch Entity-Referenzen erzeugen. Dies sind spezielle Zeichenfolgen im HTML-Code, die durch den Browser automatisch ersetzt werden. Jede Sonderzeichendefinition beginnt mit einem &-Zeichen und endet mit einem Semikolon. Dazwischen befindet sich ein Kürzel, das jeweils das Sonderzeichen beschreibt. Diese Sonderzeichen müssen ohne Abstand in den Fließtext eingebunden werden, damit sie normal im Wort erscheinen.

Tabelle 16.1 zeigt einen Überblick über die gängigsten Sonderzeichencodierungen.


Tabelle 16.1   Die wichtigsten HTML-Umlaute und -Sonderzeichen

Zeichen Codierung Erläuterungen
Umlaute und diakritische Zeichen:
ä &auml; a-Umlaut
ö &ouml; o-Umlaut
ü &uuml; u-Umlaut
Ä &Auml; A-Umlaut
Ö &Ouml; O-Umlaut
Ü &Uuml; U-Umlaut
ß &szlig; S-Z-Ligatur
é &eacute; e mit Akut
è &egrave; e mit Gravis
ê &ecirc; e mit Zirkumflex
à &aacute; a mit Akut
ç &ccedil; c mit Cedille
ø &oslash; o mit / (Slash)
œ &oelig; o-e-Ligatur
æ &aelig; a-e-Ligatur
ñ &ntilde; n mit Tilde
Wegen Gefahr von Missverständnissen codierte Zeichen:
< &lt; less than
> &gt; greater than
» &quot; quotation mark
& &amp; Ampersand (»and per se and«)
Weitere Sonderzeichen:
+ &euro; Euro
£ &pound; Pfund Sterling
¥ &yen; Yen
¡ &iexcl; inverse exclamation mark
¿ &iquest; inverse question mark
© &copy; Copyright
® &reg; Registered Trademark
§ &sect; section
« &laquo; left angular quote
» &raquo; right angular quote

Es ist übrigens bei den Entity-Referenzen auf Groß- und Kleinschreibung zu achten, damit sie korrekt funktionieren.

Geschützte Leerzeichen

Ein weiteres wichtiges Sonderzeichen konnte leider nicht in der Tabelle untergebracht werden, da es für sich allein vollkommen unsichtbar ist: Das Zeichen &nbsp; steht für Non-Breaking Space (nicht umbrechendes Leerzeichen) und erfüllt zwei wichtige Aufgaben:

gp  Da der Browser Wörter und andere Elemente, die durch beliebig viel Whitespace (Leerzeichen, Zeilenumbrüche, Tabulatoren) voneinander getrennt sind, durch genau ein Leerzeichen trennt, kann das &nbsp; zur Erzeugung mehrerer aufeinander folgender Leerzeichen verwendet werden.
gp  Wenn Sie Wörter oder andere Inhalte in derselben Zeile zusammen halten möchten, können Sie sie durch dieses Zeichen voneinander trennen, da es – seinem Namen entsprechend – den Zeilenumbruch verhindert. Um etwa »Windows XP« zusammenzuhalten, müssten Sie im HTML-Code Windows&nbsp;XP schreiben.

Absätze und Überschriften

Zur Kennzeichnung von Absätzen wird das folgende HTML-Tag eingesetzt:

<p> ... </p> 

Das p steht für »paragraph« (Absatz). Falls Sie sich entschließen, Ihren Text durch Absätze zu gliedern, sollten Sie dies im gesamten Dokument tun – oder es ganz lassen; wie immer kann Inkonsequenz zu unvorhergesehenen Problemen führen.

Absatzausrichtung

Neben der Einteilung von Texten in Sinnabschnitte besitzen Absätze eine weitere Fähigkeit: Über das Attribut align können Sie die Textausrichtung bestimmen.

<p align="left"> ... </p> 

erzeugt einen linksbündigen Absatz; das ist allerdings Standard und wird deshalb in der Regel nicht angegeben. Anders sieht es aus, wenn Sie einen Zeichensatz mit der Laufrichtung von rechts nach links verwenden, beispielsweise für Arabisch. In diesem Fall ist der Standard die rechtsbündige Ausrichtung.

<p align="center"> ... </p> 

erzeugt einen zentrierten Absatz. Mit

<p align="right"> ... </p> 

wird ein rechtsbündiger Absatz erzeugt. Zu guter Letzt existiert noch die folgende Einstellung:

<p align="justify"> ... </p>

Dies erzeugt einen Absatz mit Blocksatz. Für Bildschirmlayouts ist dies in der Regel nicht ratsam, zumal Blocksatz ohne eine leistungsfähige automatische Silbentrennung nicht besonders ästhetisch wirkt.

Überschriften

Einen Sonderfall der Absätze bilden die Überschriften. Sie können in HTML in sechs verschiedenen Hierarchiestufen verwendet werden:

<h1>...</h1>
<h2>...</h2>
   ...
<h6>...</h6> 

Das h steht für »headline« (Überschrift). Browser stellen die verschiedenen Stufen in der Regel durch unterschiedliche Schriftgrößen dar. In einem Dokument wird normalerweise genau eine <h1>-Überschrift als Hauptüberschrift verwendet, die weitere Gliederung des Inhalts erfolgt meist durch <h2> bis <h4>. Noch weitergehende Unterteilungen sind eher selten und können ein Zeichen dafür sein, dass Sie die Inhalte besser auf mehrere Einzeldokumente verteilen sollten.

Beachten Sie, dass die <h...>-Tags auf keinen Fall für die allgemeine Einstellung der Schriftgröße verwendet werden dürfen: Zum einen sind Überschriften eigenständige Absätze, zum anderen werden sie standardmäßig fett dargestellt.

Auch Überschriften kennen das Attribut align mit denselben Werten wie Absätze.

Vorformatierter Text

Als Letztes gibt es noch die spezielle Formatierung <pre>. Sie erzeugt im engeren Sinne keine Absätze, sondern vorformatierten Text (pre steht für »preformatted«). Text zwischen diesen beiden Tags wird mitsamt allen Leerzeichen und Zeilenumbrüchen aus dem HTML-Code dargestellt – interessant ist dies zum Beispiel, um Programmquelltexte auf Webseiten zu veröffentlichen, da diese auf eine sauber eingerückte Darstellung angewiesen sind. Hier ein kleines Beispiel:

<pre>
public class HelloWorld
{
   public static void main(String args[])
   {
      system.out.println ("Hello, World!");
   }
}
</pre>

ASCII-Art

Auch zur Darstellung von ASCII-Art – kleinen Zeichnungen, die nur aus ASCII-Zeichen bestehen – ist vorformatierter Text geeignet. Wunderschöne künstlerische Beispiele finden Sie etwa unter www.ascii-art.de; hier folgt dagegen mein eigenes bescheidenes Werk:

<pre>
 
     o O
    o  ___
   ||__|o| _________ _________ _________
   |     |-\__THE__/-\__WEB__/-\_TRAIN_/
   /OO-OO\   O   O     O   O     O   O
 
</pre>

Zeichenformatierung

Innerhalb der Absätze können Sie auch einzelne Wörter, Zeichen oder beliebige Passagen besonders formatieren. Die Tags, die dafür zur Verfügung stehen, sind ausdrücklich nicht absatzbildend, sollten aber gerade deshalb auch nur innerhalb eines Absatzes und nicht über mehrere hinweg verwendet werden.

Struktur kontra Layout

Aufgrund der Entwicklungsgeschichte von HTML gibt es zwei verschiedene Arten von Tags zur Auszeichnung von Zeichen: die älteren Struktur-Tags, die die Bedeutung bestimmter Zeichen beschreiben, und die neueren Layout-Tags, die das Aussehen von Zeichen bestimmen. Die Struktur-Tags werden seit langem kaum noch eingesetzt. Aber auch die Layout-Tags werden allmählich seltener verwendet, weil sie mehr und mehr durch die konsequenter durchdachten Cascading Stylesheets ersetzt werden.

Zeichenformatierungs-Tags können beliebig ineinander verschachtelt werden, wichtig ist natürlich die korrekte Reihenfolge: Wie überall in HTML und XML muss das zuletzt geöffnete Tag als erstes wieder geschlossen werden. Beispielsweise können Sie Text folgendermaßen fett und kursiv setzen:

<b><i>fett und kursiv</i></b>

Tabelle 16.2 zeigt eine Übersicht über alle Zeichenformatierungs-Tags.


Tabelle 16.2   Die wichtigsten Tags zur Zeichenformatierung

Tag Wirkung Beispiel
Layout-Tags:
<i>...</i> kursiv (italic) kursiv
<b>...</b> fett (bold) fett
<u>...</u> unterstrichen (underlined) unterstrichen
<strike>...</strike> durchgestrichen durchgestrichen
<sup>...</sup> hochgestellt (superscript) normal hochgestellt 
<sub>...</sub> tiefgestellt (subscript) normal tiefgestellt
<tt>...</tt> Festbreitenschrift (teletype) Festbreitenschrift
Struktur-Tags:
<em>...</em> betont (emphasis); wird meist kursiv dargestellt betont
<strong>...</strong> stark hervorgehoben; wird meist fett dargestellt stark betont
<code>...</code> Quellcode – zur Darstellung von Programmierbeispielen usw.; meist durch Festbreitenschrift dargestellt Code
<address>...
</address>
Adressangaben; meist kursiv dargestellt Gartenstraße 24,
D-53229 Bonn

Die Auszeichnung <u>...</u> für unterstrichenen Text sollten Sie vermeiden – die meisten Benutzer würden vermuten, dass es sich um einen Hyperlink handelt, und sich ärgern, wenn er sich nicht anklicken lässt.

Hoch- und tiefgestellter Text eignet sich besonders für mathematische und technische Belange. Beispielsweise können Sie mit Hilfe des folgenden HTML-Codes den Satz des Pythagoras darstellen:

a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>

Dies ergibt die folgende Ausgabe im Browser:

a+b=c

Schriftformatierung

Für die Einstellung der eigentlichen Schriftattribute werden traditionell die HTML-Tags <font>...</font> verwendet. Offiziell gelten sie seit HTML 4.0 als unerwünscht und sollen durch Stylesheets ersetzt werden, allerdings werden sie nach wie vor von allen Browsern unterstützt.

Schriftgröße

Das Interessante am <font>-Tag ist, dass es ohne Attribute überhaupt keine Bedeutung hat. Es dient lediglich als Träger seiner Attribute, die die Schriftart, -größe und -farbe regeln.

<font size="3">...</font>

stellt die Schriftgröße 3 ein. Die HTML-Schriftgrößen reichen von 1, der kleinsten Schrift, bis 7. Die Standardschriftgröße für Text ohne Angabe ist 3. Die Einstellung der Schriftgröße, die Sie in den meisten Browsern vornehmen können, bezieht sich auf diese HTML-Größe. Die anderen Werte sind dann entsprechend größer oder kleiner.

Neben der absoluten Angabe der sieben HTML-Schriftgrößen können Sie auch eine relative Vergrößerung oder Verkleinerung angeben. Beispielsweise vergrößert der folgende Code den Text um zwei Stufen:

<font size="+2">...</font> 

Diese Anweisung verkleinert die Schrift dagegen um drei Stufen:

<font size="-3">...</font> 

Schriftart

Mit Hilfe des Attributs face wird angegeben, welche Schriftart verwendet werden soll. Da es nur wenige Schriften gibt, die auf allen Computersystemen zur Verfügung stehen, und da diese auch noch unterschiedlich heißen, sind eigentlich nur folgende Kombinationen interessant:

gp  <font face="Arial, Helvetica, sans-serif"> ... </font>
Dies ist die Standardangabe für gewöhnliche serifenlose Schrift. Aus der Liste der Schriftarten, die Sie angeben, verwendet der Browser die erste, die auf dem Rechner installiert ist. Die hier angegebene Reihenfolge ist die sinnvollste: Die Schrift Arial ist unter Windows immer verfügbar. Auch in Macintosh-Systemen ist sie so gut wie immer vorhanden, sie wird dort mit dem Internet Explorer installiert. Da sie bildschirmfreundlicher ist als die Helvetica, ist es ratsam, sie zuerst zu nennen. Falls keine der beiden Schriften verfügbar ist, wählt der Browser irgendeine serifenlose Schrift aus; dies ist besonders für UNIX-Systeme wichtig.
gp  <font face="Verdana, Arial, Helvetica, sans-serif"> ... </font>
Dies ist eine etwas freundlichere Variante für serifenlose Schriften: Falls verfügbar, wird die Schriftart Verdana verwendet. Sie wird üblicherweise mit dem Microsoft Internet Explorer installiert und ist lesefreundlicher und eleganter als Arial und Helvetica.
gp  <font face="Times New Roman, Times, serif"> ... </font>
Dies ist die entsprechende Standardeinstellung für Serifenschrift.
gp  <font face="Georgia, Times New Roman, Times, serif"> ... </font>
Diese Angabe ist wiederum angenehmer als die vorherige, weil sie die speziell bildschirmorientierte Serifenschrift Georgia vorzieht.
gp  <font face="Courier New, Courier, mono"> ... </font>
Mit dieser Einstellung wird die übliche Festbreitenschrift eingestellt; einfacher und schneller geht dies allerdings mit Hilfe der bereits erwähnten Tags <tt>...</tt>. Wenn Sie möchten, können Sie der Liste wieder eine nettere Festbreitenschrift wie Lucida Console voranstellen.

Allgemein gilt, dass Sie jede beliebige Schrift angeben können – da es jedoch wahrscheinlich ist, dass exotischere Schriften auf den meisten Systemen nicht verfügbar sind, ist es stets wichtig, Alternativen anzugeben. Dafür können Sie sich an die obigen Beispiele halten. Andernfalls würde der Browser einfach seine voreingestellte Standardschrift verwenden; dies ist fast immer die Times beziehungsweise Times New Roman.

Beispielsweise könnte es sein, dass Sie eine Überschrift in der Schriftart Bauhaus formatieren möchten. Da es sich um eine serifenlose Schrift handelt (wenn auch um eine recht eigenwillige), sähe die passende Angabe so aus:

<font face="Bauhaus, Verdana, Arial, Helvetica, 
sans-serif"> ... </font>

Wenn Sie für Überschriften und andere einzelne Wörter oder Zeichen eine bestimmte Schrift erzwingen möchten, bleibt Ihnen nur noch, sie in Ihrem Bildbearbeitungsprogramm als Bild abzuspeichern und ins Dokument einzubetten. Für Text, der als Bild gespeichert wird, ist das Dateiformat GIF zu empfehlen.

Schriftfarbe

Schließlich können Sie über den Parameter color die Schriftfarbe einstellen. Beispielsweise stellt das folgende Tag die Schriftfarbe Rot ein:

<font color="#FF0000"> ... </font>

Es handelt sich bei der Angabe um den hexadezimalen RGB-Wert der Farbe Rot. Der Umgang mit Farben in HTML wird weiter unten näher beschrieben.

Im Übrigen können auch mehrere <font>-Parameter im gleichen Tag stehen, eine Kombination wie

<font face="Arial, Helvetica, sans-serif" size=4> ... </font> 

ist ohne Weiteres zulässig. Dabei ist lediglich zu beachten, dass </font> dann natürlich auch sämtliche Einstellungen gleichzeitig aufhebt.


Galileo Computing

16.2.3 Trennlinien  downtop

Mit dem Tag <hr> (»horizontal ruler«) lässt sich eine horizontale Trennlinie in die Seite einfügen.

<hr width="..." /> 

verändert die Breite dieser Linie; width gibt die Breite in Prozent der Fenstergröße (etwa "100%") oder in Pixeln (beispielsweise "300") an.

<hr size="..." /> 

gibt die Höhe der Trennlinie in Pixeln an; eine Höhenangabe in Prozent ergibt dagegen nicht viel Sinn.

Mit Hilfe des Attributs align wird die Trennlinie auf der Seite ausgerichtet – anders als bei den meisten anderen HTML-Elementen ist "center" (zentriert) hier Standard; die beiden anderen möglichen Werte sind "left" und "right".

Das optionale Attribut noshade unterdrückt das übliche 3-D-Aussehen der Linie. In HTML bis Version 4.0 wurde noshade einfach ohne Attributwert notiert. Dies ist in XHTML nicht zulässig. Andererseits ist der tatsächliche Wert egal, da die bloße Anwesenheit des Attributs genügt. – Schreiben Sie einfach noshade="true".

Über das Attribut color können Sie schließlich eine Farbe für die Trennlinie angeben, die allerdings nur vom Internet Explorer angezeigt wird. Die HTML-Farbwerte selbst werden weiter unten in einem eigenen Unterabschnitt besprochen.

Verwendung von Trennlinien

In Webseiten der ersten Generation, in denen relativ unmotiviert Textinhalte untereinander gesetzt wurden, waren Trennlinien ein übliches Mittel zur Strukturierung dieser Inhalte. Im modernen Webdesign werden sie nicht mehr so häufig eingesetzt – ein möglicher Verwendungszweck wäre beispielsweise die Abtrennung einzelner Beiträge in einem Gästebuch oder das Abgrenzen einer Navigationsleiste nach oben und unten.


Galileo Computing

16.2.4 Listen und Aufzählungen  downtop

Listen und Aufzählungen sind ein gutes Mittel zum Ordnen von Informationen. Da HTML ursprünglich für die wissenschaftliche Dokumentation erfunden wurde, ist es nicht weiter verwunderlich, dass einige Möglichkeiten zur Erstellung solcher Listen angeboten werden.

Nicht nummerierte Aufzählungen

Eine nicht nummerierte Aufzählung oder »bullet list« wird von den folgenden Tags umschlossen:

<ul>...</ul> 

ul steht dabei für »unordered list« (englisch für unsortierte Liste).

Innerhalb dieses Bereiches werden die einzelnen Listenpunkte durch <li>-Tags umschlossen:

<li>Einzelinformation</li>

li bedeutet »list item« (Listenpunkt). In HTML 4.0 ist das <li> ein Einfach-Tag, das nur vor dem Text des Listeneintrags stehen muss; XHTML kennt diese Schreibweise natürlich nicht.

Aufzählungszeichen

Das Attribut type kann sowohl beim <ul>- als auch beim einzelnen <li>-Tag stehen und gibt den gewünschten Stil der Aufzählungspunkte an. Die folgenden Werte sind möglich:

gp  disc – ein gefüllter runder Punkt
gp  circle – ein Kreis, also ein innen hohler runder Punkt
gp  square – ein quadratischer Punkt

Wenn Sie das Attribut weglassen, werden verschachtelte Listen je nach Ebene nacheinander mit den drei Punktarten versehen.

Der folgende Codeabschnitt erzeugt eine Aufzählung mit vier Unterpunkten:

<h3>Bei XHTML zu beachten:</h3>
<ul>
  <li>XML-Header verwenden</li>
  <li>Jedes Tag schlie&szlig;en</li>
  <li>Alle Tags klein schreiben</li>
  <li>Attributwerte immer in Anf&uuml;hrungszeichen</li>
</ul>

Ein Beispiel, wie so etwas im Browser aussieht, finden Sie weiter unten bei den verschachtelten Listen in Abbildung 16.1.

Nummerierte Listen

<ol>...</ol> 

bezeichnet eine nummerierte Liste (»ordered list«). Auch in dieser Liste wird ein Listenpunkt durch <li> angegeben.

Nummerierungsart

Das <ol>-Tag kennt den Parameter type, der die Art der verwendeten Aufzählung angibt. Dabei sind folgende Werte möglich:

gp  "1" – arabische Ziffern (Standard)
gp  "A" – Großbuchstaben
gp  "a" – Kleinbuchstaben
gp  "I" – römische Zahlen
gp  "i" – kleingeschriebene römische Zahlen, also i, ii, iii, iv und so weiter

Das Attribut start bezeichnet dagegen den Wert, mit dem die Nummerierung beginnt. Unabhängig vom jeweiligen type muss der Wert numerisch angegeben werden.

Soll etwa eine alphabetische Liste mit D. beginnen, dann schreiben Sie den folgenden HTML-Code:

<ol type="A" start=4> ... </ol> 

Verschachtelte Listen

Nummerierte und nicht nummerierte Listen können beliebig ineinander verschachtelt werden. Dabei gehört das jeweilige <li> immer zu derjenigen Liste, die zuletzt geöffnet wurde.

Der folgende Codeabschnitt erzeugt eine nummerierte Hauptliste, in die jeweils nicht nummerierte Aufzählungen verschachtelt sind:

<h3>Was Sie f&uuml;r das Surfen im Web ben&ouml;tigen</h3>
<ol>
  <li>Eine DF&Uuml;-Verbindung</li>
  <ul>
    <li>Modem</li>
    <li>ISDN</li>
    <li>DSL</li>
  </ul>
  <li>Einen Account bei einem Provider</li>
  <ul>
    <li>Reine Provider</li>
    <li>Online-Dienste (AOL &amp; Co.)
  </ul>
  <li>Einen Browser</li>
  <ul>
    <li>Internet Explorer</li>
    <li>Netscape</li>
    <li>sonstige ...</li>
  </ul>
</ol>

Abbildung 16.1 zeigt, wie diese Liste im Browser dargestellt wird.


Abbildung 16.1   Eine verschachtelte Liste

Abbildung
Hier klicken, um das Bild zu Vergrößern


Definitionslisten

<dl> ... </dl>

bezeichnet eine so genannte Definitionsliste (definition list), auch Glossarliste genannt. In einer solchen Liste wechseln sich ausgerückte Begriffe und ihre eingerückten Definitionen ab.

Ein zu definierender Begriff steht zwischen den folgenden Tags:

<dt> ... </dt>

dt bedeutet »definition title«. Die anschließende Definition steht zwischen diesen Tags:

<dd> ... </dd>

Dies ist die Abkürzung für »definition data«.

Der folgende Code zeigt ein Beispiel:

<h3>Web-Sprachen</h3>
<dl>
  <dt>HTML</dt>
  <dd>Klassische Auszeichnungssprache f&uuml;r 
  Webseiten</dd>
  <dt>XHTML</dt>
  <dd>Moderne, XML-basierte Variante von HTML</dd>
  <dt>JavaScript</dt>
  <dd>Skriptsprache zur dynamischen Manipulation von 
  Webseiten-Inhalten</dd>
</dl>

In Abbildung 16.2 ist die Umsetzung des Beispiels im Browser zu sehen.


Abbildung 16.2   Eine Definitionsliste

Abbildung
Hier klicken, um das Bild zu Vergrößern



Galileo Computing

16.2.5 Farben in HTML  downtop

Da HTML den Aufbau von Dokumenten für die Bildschirmdarstellung beschreibt, werden Farben grundsätzlich im RGB-Format kodiert – jede Farbe kann als eine additive Mischung aus Rot-, Grün- und Blau-Anteilen angesehen werden kann. Ebenso funktioniert sowohl das menschliche Auge als auch ein Monitor oder Fernseher. Näheres über Farbmodelle finden Sie in Kapitel 8, Bildbearbeitung und Grafik.

Eine HTML-Farbangabe enthält für jede der drei Primärfarben einen eigenen Wert zwischen 0 und 255. Dieser Wert wird hexadezimal angegeben. Das Hexadezimalsystem wird zusammen mit anderen Zahlensystemen in Kapitel 2, Mathematische und technische Grundlagen, erläutert.

Tabelle 16.3 zeigt einige Beispiele:


Tabelle 16.3   Beispiele für HTML-Farbcodes

Rotwert Grünwert Blauwert HTML-Farbcode Farbe
0 0 0 #000000 Schwarz
255 0 0 #FF0000 Rot
0 255 0 #00FF00 Grün
0 0 255 #0000FF Blau
255 255 0 #FFFF00 Gelb
255 0 255 #FF00FF Magenta
0 255 255 #00FFFF Cyan
255 255 255 #FFFFFF Weiß

Die Web-Palette

Übrigens ist es aus Kompatibilitätsgründen mit Systemen, die insgesamt nur 256 Farben unterstützen, empfehlenswert, nicht alle 16,7 Millionen theoretisch möglichen Farben zu verwenden, sondern eine eingeschränkte Palette aus genau 216 Farben, die von Netscape als »Web Safe Colors« (websichere Farben) definiert wurde. Sie besteht aus denjenigen Farbcodes, bei denen alle drei Komponenten (rot, grün und blau) durch 51 dezimal beziehungsweise 33 hexadezimal teilbar sind, also einen der Werte 00, 33, 66, 99, CC oder FF aufweisen. Näheres dazu finden Sie im Abschnitt 20.4.

Vor den hexadezimalen Farbcodes steht grundsätzlich ein #-Zeichen. Alternativ unterstützen die meisten Browser eine Reihe von Farbnamen wie white, black oder red. Diese Art der Farbangabe ist nicht sonderlich empfehlenswert: Zum einen stammen die meisten dieser Farben nicht aus der Web-Palette, zum anderen sind ihre Namen schwer nachvollziehbar: Reines RGB-Grün (#00FF00) heißt lime, während green für das nicht websichere Grün mit halbem Helligkeitswert (#008000) steht. Ebenso heißt die HTML-Farbe #00FFFF aqua statt Cyan.

Die Einstellungen für die verschiedenen Standardfarben des Dokuments werden als Attribute des Body-Tags eingetragen:

<body bgcolor="#000000" text="#FFFFFF" link="#FFFF00" 
vlink="#FF9900" alink="#FFFF66"> 

bgcolor (hier Schwarz) setzt die Hintergrundfarbe, text die Standard-Textfarbe (im Beispiel Weiß). link bestimmt die Farbe, in der Hyperlinks angezeigt werden (Gelb), während vlink die Farbe der bereits besuchten Links darstellt (Orange). alink schließlich ist die Farbe eines Hyperlinks, der gerade angeklickt wird (Hellgelb).

Sie können die Standard-Textfarbe mit Hilfe des bereits gezeigten <font>-Tags vorübergehend überschreiben:

<font color="#9999FF">...</font> 

stellt die Textfarbe auf Hellblau um.

Beachten Sie, dass alle diese Einstellungen in modernen XHTML-Dokumenten bevorzugt über Stylesheets vorgenommen werden sollten.


Galileo Computing

16.2.6 Hyperlinks  downtop

Hyperlinks sind die wichtigsten Elemente von HTML-Dokumenten. Erst durch diese Verknüpfungen entsteht Hypertext, also eine Struktur verknüpfter Dokumente. Sie können sowohl auf andere Dokumente innerhalb Ihrer eigenen Website als auch auf fremde Websites und andere Arten von Internet-Ressourcen wie FTP-Download-Sites, Newsgroups oder E-Mail-Adressen verweisen.

Grundsätzlich wird ein Hyperlink durch das folgende Tag gesetzt:

<a href="URL_des_neuen_Dokuments">Anklickbarer Text</a>

Pfadangaben

Bei der URL des zu ladenden Dokuments müssen Sie vor allem auf die korrekte Pfadangabe achten. Verzeichnisnamen werden in URLs nicht, wie beim PC, durch einen Backslash (\) oder, wie beim Mac, durch einen Doppelpunkt getrennt, sondern durch einen Slash (/) – da das Internet auf Rechnern unter dem Betriebssystem UNIX entstanden ist, wird auch die Datei- und Verzeichnislogik dieses Systems verwendet. Zwei Punkte als Verzeichnisname (..) bedeuten übrigens, dass das jeweils übergeordnete Verzeichnis angesprochen werden soll. Näheres über die Logik von UNIX-Verzeichnishierarchien erfahren Sie in Kapitel 4, Betriebssysteme; das grundlegende Konzept der URL wurde bereits in Kapitel 13, Netzwerkhardware und Protokolle, erläutert.

Abbildung 16.3 zeigt ein Beispiel für Dokumente, die in einer Verzeichnishierarchie auf einem Webserver verteilt sind. Im obersten Verzeichnis befindet sich die Startseite, in diesem Fall heißt sie index.htm. Welche Namen für Startseiten akzeptiert werden, müssen Sie mit Ihrem Hosting-Provider abklären. Eine definierte Startseite für eine Website wird benötigt, damit Besucher einfach den Domainnamen aufrufen können, ohne ein bestimmtes Dokument anzufordern.

Hyperlink-Beispiele

Um zum Beispiel einen Hyperlink von der Datei index.htm im Wurzelverzeichnis auf die Datei mail.htm im Verzeichnis kontakt zu erzeugen, gilt folgende Syntax (der Link-Text sei hier »E-Mail-Adressen«):

<a href="kontakt/mail.htm">E-Mail-Adressen</a>

Ein Link von der Datei mail.htm zurück zu index.htm funktioniert folgendermaßen (Link-Text: »Homepage«):

<a href="../index.htm">Homepage</a>

Ein Link von mail.htm auf news.htm im Verzeichnis neu (mit dem Link-Text »Neueste Nachrichten«) lautet dann:

<a href="../neu/news.htm">Neueste Nachrichten</a>

Abbildung 16.3   Eine kleine Website-Hierarchie

Abbildung
Hier klicken, um das Bild zu Vergrößern


Hyperlinks auf andere Websites und Internetdienste

Bei Hyperlinks auf andere Server im Internet müssen Sie eine vollständige URL-Adresse angeben. Als Beispiel sehen Sie hier einen Hyperlink auf die Website von Galileo Computing:

<a href="http://www.galileo-computing.de">Galileo Computing</a>

Natürlich kann ein Hyperlink nicht nur allgemein auf eine Website, sondern auch auf ein bestimmtes Dokument auf einem anderen Webserver verweisen, wenn Sie dessen URL kennen. Beispielsweise zeigt folgender Link auf die erste Seite der Präsentation von Christian Ullenbooms Klassiker »Java ist auch eine Insel« bei Galileo Computing:

<a href="http://www.galileocomputing.de/katalog/buecher
/titel/gp/titelID-502">Java ist auch eine Insel</a>

Bedenken Sie jedoch, dass nicht alle Webmaster sorgfältig mit den Adressen einzelner Dokumente umgehen – sie können sich häufig ändern, sodass ein solcher Link plötzlich ins Leere zeigt und einen unangenehmen »Fehler 404« (Dokument nicht gefunden) produziert. Falls Sie auf Ihren Websites also Linklisten betreiben, sollten Sie diese regelmäßig überprüfen. Umgekehrt sollten Sie die Adressen der einzelnen Dokumente Ihrer eigenen Sites auch dann nach Möglichkeit nicht ändern, wenn Sie wesentliche Änderungen an Design oder Inhalten vornehmen – es ist für andere genauso ärgerlich, wenn ein Link auf eines Ihrer Dokumente plötzlich nicht mehr funktioniert.

Bei einer Datei, die Sie über einen Hyperlink ansprechen, muss es sich nicht unbedingt um ein HTML-Dokument handeln. Sie können etwa andere Arten von Dokumenten verlinken, mit denen Browser üblicherweise selbst zurechtkommen, beispielsweise GIF- oder JPEG-Bilder, MP3-Audiodateien oder PDF-Dokumente. Falls der Browser mit einem Dateityp nichts anfangen kann, fragt er nach, ob er die Datei dem Betriebssystem zum Öffnen mit einem geeigneten Programm übergeben oder ob er sie auf die Festplatte speichern soll.

Download-Hyperlinks

Genau so funktioniert übrigens ein einfacher Download-Link: Es handelt sich einfach um einen Hyperlink auf eine Datei, die ein Browser nicht selbst anzeigen kann, etwa ein ausführbares Programm oder eine ZIP-komprimierte Datei.

Abgesehen davon können Sie nicht nur Links auf andere Websites einrichten, sondern auch auf Ressourcen, die über andere Protokolle angesprochen werden. Voraussetzung ist natürlich, dass es sich um Protokolle handelt, mit denen die Browser der meisten Benutzer umgehen können oder für die ein Protokollhilfsprogramm definiert ist, das Ressourcen dieses Typs verarbeitet. Sehr verbreitet sind beispielsweise Download-Links auf Anonymous-FTP-Server, die fast jeder Browser beherrscht, und mit deren Hilfe Downloads schneller und effizienter funktionieren als über HTTP. Sehen Sie sich zum Beispiel den folgenden Link an:

<a href="ftp://ftp.uni-koeln.de/mirrors/redhat.com/
redhat/linux/8.0/en/iso/i386/psyche-i386-disc1.iso">
RedHat Linux 8.0, CD 1</a>

Es handelt sich um einen Link auf das ISO-Image der ersten CD von Red Hat Linux 8.0, und zwar im Red-Hat-Mirror-Verzeichnis des Rechenzentrums der Uni Köln.

E-Mail-Links

Eine andere Variante ist ein Hyperlink auf eine E-Mail-Adresse. Wenn dieser Link angeklickt wird, öffnet der Browser automatisch ein Mail-Fenster im bevorzugten E-Mail-Programm des Anwenders, in dem die angegebene Adresse bereits als Empfänger eingetragen ist. Hierzu dient das »Pseudo-Protokoll« mailto:

<a href="mailto:ich@mein-provider.de">Senden Sie mir eine Mail</a>

Sie können sogar den Betreff der neu zu erzeugenden E-Mail angeben:

<a href="mailto:ich@mein-provider.de?subject=Feedback">
Geben Sie mir Feedback!</a>

Der Link erzeugt wiederum ein Mail-Fenster für eine neue E-Mail, in das sowohl der Empfänger als auch der Betreff bereits eingetragen sind.

Seiteninterne Hyperlinks

Bei sehr umfangreichen Seiten, deren Länge sich über mehrere Bildschirmhöhen erstreckt, bietet es sich an, einzelne Passagen der Seite per Hyperlink erreichbar zu machen. Bei Klick auf einen solchen Link wird der Inhalt des Browserfensters automatisch so positioniert, dass sich die Stelle mit dem Anker am oberen Rand befindet.

Zu diesem Zweck werden so genannte Anker oder Textmarken gesetzt, die einen bestimmten Punkt im Dokument als Ziel für einen Hyperlink definieren.

Die Syntax für einen solchen Ankerpunkt lautet folgendermaßen:

<a name="name_des_ankers"></a>

Gemäß HTML-Spezifikation ist dieses Tag leer. Dennoch werden in manchen HTML-Referenzen Inhalte wie Text oder Überschriften dazwischen erlaubt, wovon dringend abzuraten ist. In jedem Fall sollten Sie das Tag nicht mit dem XML-End-Slash schließen, sondern das </a> explizit hinschreiben – auch ältere Browser erwarten, dass es geschlossen wird, verstehen aber die XML-Kompaktschreibweise nicht.

Ein Hyperlink auf einen solchen Ankerpunkt erfolgt innerhalb der gleichen Datei mit Hilfe der folgenden Syntax:

<a href="#name_des_ankers">Zum Ankerpunkt</a>

Sie können auch aus einer anderen Datei heraus direkt auf die entsprechende Dokumentstelle zugreifen:

<a href="Dateiname#name_des_ankers">Zum Ankerpunkt</a>

Es versteht sich von selbst, dass ein Dateiname im Web aus diesem Grund auf keinen Fall ein #-Zeichen enthalten darf.

Auf sehr vielen Websites ist es gängige Praxis, ganz oben auf jede Seite unmittelbar nach dem <body>-Tag einen Anker zu setzen – beispielsweise folgendermaßen:

<a name="oben"></a>

Am unteren Rand des Dokuments befindet sich dann entsprechend ein Hyperlink, um wieder ganz nach oben zu gelangen:

<a href="#oben">nach oben</a>

Dies bietet sich insbesondere dann an, wenn sich die Hauptnavigation jeweils ganz oben in den Dokumenten befindet.


Galileo Computing

16.2.7 Bilder in Webseiten einbetten  downtop

Ein Bild ist stets eine externe Datei, die erst zum Zeitpunkt des Ladens dynamisch vom Browser eingebettet wird. Bilder können in den komprimierten Dateiformaten GIF, JPEG oder PNG vorliegen. Der genaue Unterschied zwischen ihnen wird im nächsten Kapitel erläutert; hier sei bereits gesagt, dass JPEGs besser für Fotos und andere halbtonreiche Bilder geeignet sind, während sich die beiden anderen Formate eher für flächige Grafiken mit wenigen Farben eignen.

Bilder einbetten

Grundsätzlich wird ein Bild mit Hilfe des folgenden Tags in eine Webseite eingebettet:

<img src="URL_des_Bildes" />

Für die Angabe der URLs von lokalen oder auf anderen Servern liegenden Bildern gelten die Regeln, die weiter oben bereits für Hyperlinks erläutert wurden.

Einige Browser sind absolut nicht in der Lage, Bilder anzuzeigen; in anderen lässt sich die Bildanzeige ausschalten, was besonders für Benutzer mit langsamen Internetzugängen interessant ist. Für diese Fälle können Sie angeben, dass statt der Grafik ein bestimmter Text ausgegeben werden soll:

<img src="URL" alt="Text" />

Der entsprechende Text erscheint bei einer Mausbewegung über den Hyperlink zumindest in den Browsern unter Windows immer als Tooltipp.

Um den Betrachtern Ihrer Website das Warten auf das Laden der Bilder so angenehm wie möglich zu machen, gibt es verschiedene Möglichkeiten:

gp  Geben Sie im Tag stets die Originalgröße des Bildes an – die Syntax für die entsprechenden Attribute sieht so aus:
<img src="URL" height="[Höhe in Pixeln]" 
width="[Breite in Pixeln]" />
    Der vorher geladene Text kann dann bereits dargestellt werden, da klar ist, wie er positioniert werden soll. Eine Skalierung des Bildes über die Attribute height und width ist hingegen nicht zu empfehlen – wenn auch grundsätzlich möglich. Stattdessen sollte das Bild in einem Bildbearbeitungsprogramm wie Photoshop oder Fireworks von vornherein auf die gewünschte Größe gebracht werden.
       
gp  Mit Hilfe des Tags
<img src="URL1" lowsrc="URL2" />
    können Sie bestimmen, dass statt des hochauflösenden Bildes »URL1« zunächst einmal eine niedrigauflösende Variante »URL2« geladen wird – das Bild »URL2« muss natürlich vorhanden sein und sollte tatsächlich eine erheblich geringere Dateigröße aufweisen. Beispielsweise können Sie es schwarzweiß machen, anderweitig mit viel weniger Farben abspeichern oder seine tatsächliche Bildgröße verringern.
       

Bildpositionierung

Über den align-Parameter können Bilder positioniert werden:

<img src="URL" align="left" /> 

setzt das Bild an den linken Rand des Fensters; der Text umfließt rechts den rechteckigen Umriss des Bildes.

<img src="URL" align="right" /> 

platziert das Bild am rechten Rand; der Text umfließt links den Umriss des Bildes.

Bei diesen beiden Formatierungen können Sie das Umfließen jederzeit beenden und weiteren Text unter dem Bild weiterführen, indem Sie ein <br /> mit dem speziellen Attribut clear einfügen:

<br clear="left" />

beendet nur linksseitiges Umfließen,

<br clear="right" />

nur rechtsseitiges und

<br clear="all" />

beendet schließlich beides. Diese Unterscheidung ist notwendig, wenn Text den Raum zwischen zwei Bildern einnimmt, von denen das eine rechts und das andere links umflossen wird.

Die Attributwerte "top", "middle" und "bottom" setzen das Bild in den normalen Fluss einer Textzeile, wobei der Text entsprechend an die Oberkante des Bildes, auf die Mittellinie oder an die Unterkante gesetzt wird. Andere Angaben wie "absmiddle" oder "baseline", die Sie manchmal in HTML-Dokumenten oder in der Literatur finden, gehören nicht zum HTML-Standard, sondern werden nur von bestimmten Browsern interpretiert.

Mit Hilfe der Attribute hspace und vspace können Sie den Abstand des Bildes nach links und rechts beziehungsweise nach oben und unten in Pixeln festlegen.

Bilder als Hyperlinks

Wenn Sie ein Bild als Hyperlink definieren möchten, können Sie dies folgendermaßen erreichen:

<a href="URL"><img src="Bild-URL" /></a>

Hierbei wird um das Bild standardmäßig ein Rahmen in der aktuellen link- beziehungsweise vlink-Farbe gezogen. Durch die Angabe von

<img src="Bild-URL" border="0" />

lässt sich dies vermeiden. Ansonsten gibt border die Breite des Rahmens in Pixeln an; bei Bildern, die keine Hyperlinks sind, hätte der Rahmen die Standard-Textfarbe des Dokuments.

Image Maps

Anstatt ein ganzes Bild zu einem durchgehenden Hyperlink zu machen, besteht auch die Möglichkeit, einzelne Bereiche des Bildes anklickbar zu machen und jeweils individuell auf einen Klick in die jeweiligen Regionen zu reagieren. Grundsätzlich werden zwei verschiedene Arten dieser so genannten Image Maps unterschieden: die nur noch selten verwendeten Server-Side-Image Maps und die Client-Side-Image Maps.

Server-Side-
Image Maps

Bei einer Server-Side-Image Map wird einfach das Attribut ismap in das <img>-Tag gesetzt; in HTML 4.0 ohne Wert, in XHTML mit einem beliebigen – die beste Wahl ist ismap="true". Das Bild wird als normaler Hyperlink auf ein serverseitiges Skript verwendet, das in der Lage ist, die übertragenen Mauskoordinaten des Bildes zu verarbeiten. Beispielsweise übergibt der folgende Link die Koordinaten an das Perl-CGI-Skript coords.pl im Verzeichnis /cgi-bin:

<a href="/cgi-bin/coords.pl"><img src="test.jpg" 
ismap="true" width="200" height="200" /></a>

Die Koordinaten werden einfach an die URL angehängt, es wird also statt /cgi-bin/coords.pl die URL /cgi-bin/coords.pl?100,100 aufgerufen, wenn der Benutzer genau in der Bildmitte klickt.

Das folgende kleine Perl-Skript erzeugt ein HTML-Dokument, das einfach die Koordinaten ausgibt:

#!/usr/bin/perl -w
use strict;
my $coords = $ENV{'QUERY_STRING'};
my ($x, $y) = split (/,/, $coords);
print "Content-type: text/html\n\n";
print "<html><head><title>Koordinaten</title></head>";
print "<body>Koordinaten: x=$x, y=$y</body></html>\n";

Die Grundlagen der Perl-Programmierung wurden in Kapitel 5, eingeführt, auf die CGI-Programmierung wird dagegen in Kapitel 18, Serverseitig dynamische Websites, eingegangen.

Client-Side-Image Maps

Bei einer Client-Side-Image Map wird ein Bild mit beliebig vielen anklickbaren Bereichen versehen (so genannten Hot Spots), die jeweils getrennt als Hyperlinks angezeigt werden sollen. Eine solche Image Map wird durch die Angabe des Attributs usemap="#Map-Name" erzeugt. Mit diesem Map-Namen muss eine <map>-Definition übereinstimmen, die die einzelnen Hot Spots definiert. Das Bild selbst muss (und sollte) dabei kein Hyperlink sein. Eine solche Map-Definition sieht zum Beispiel folgendermaßen aus:

<img src="probe.gif" width="400" height="400" 
alt="Map-Bild" usemap="#mymap" />
<map name="mymap">
  <area shape="rect" coords="10, 10, 100, 100" 
  href="rechteck.htm" alt="Rechteckiger Bereich" />
  <area shape="circle" coords="300, 300, 50" 
  href="kreis.htm" alt="Kreisf&ouml;rmiger Bereich" />
  <area shape="poly" coords="150, 150, 200, 10, 250, 150" 
  href="polygon.htm" alt="Polygonförmiger Bereich" />
</map>

Die einzelnen <area>-Tags definieren die anklickbaren Bereiche. Das Attribut shape gibt die Form des jeweiligen Bereichs an:

gp  shape="rect" gibt mit Hilfe des Attributs coords die linke obere und die rechte untere Ecke eines Rechtecks (in Pixeln) an.
gp  shape="circle" (Kreis) verlangt als coords die Angabe des Mittelpunkts (x- und y–Koordinate) und den Radius in Pixeln.
gp  shape="poly" (Polygon) erwartet eine Reihe aufeinander folgender x- und y-Koordinaten.

href definiert wie bei einem Hyperlink die Adresse, auf die ein Mausklick in diesen Bereich verzweigen soll. Das von neueren Browsern interpretierte alt dient in diesem Zusammenhang besonders zur Erzeugung von Tooltipps für den Internet Explorer.

Moderne Web-Bildbearbeitungsprogramme wie das weiter unten detailliert vorgestellte Fireworks oder Abobe ImageReady sind in der Lage, statt der Image Maps ein großes Bild in einzelne Slices oder Segmente zu unterteilen – durch HTML-Tabellen zusammengehaltene Ausschnitte des Bildes. Der Vorteil von Slices gegenüber Client-Side-Image Maps besteht darin, dass die einzelnen Bilder innerhalb von Slices per JavaScript dynamisch ausgetauscht werden können. Auf diese Weise lässt sich ein Rollover-Effekt erzielen. Darüber hinaus erhalten Sie durch Slices die Möglichkeit, einzelne Teile eines Bildes je nach Bedarf unterschiedlich stark zu komprimieren, da es sich um einzelne Bilddateien handelt.

Hintergrundbilder

Statt einer Hintergrundfarbe können HTML-Dokumente auch ein Hintergrundbild erhalten. Zu diesem Zweck wird in das <body>-Tag das zusätzliche Attribut background geschrieben:

<body background="hintergrund.gif">

Ist das Browserfenster größer als das Bild, dann wird das Bild automatisch gekachelt, das heißt horizontal und vertikal wiederholt, bis das Fenster vollständig ausgefüllt ist.

Ein zusätzliches Attribut in Bezug auf das Hintergrundbild versteht nur der Internet Explorer:

<body background="verlauf.jpg" bgproperties="fixed">

Diese Einstellung sorgt dafür, dass das Bild im Seitenhintergrund fixiert wird, es wird also nicht mit dem Dokument gescrollt. Es ist allerdings empfehlenswerter, diese Option mit Hilfe von Stylesheets einzustellen (siehe Abschnitt 20.3).


Galileo Computing

16.2.8 Tabellen  downtop

Eines der wichtigsten Gestaltungsmittel für Webseiten sind HTML-Tabellen. Sie werden nicht nur für die tabellarische Anordnung von Informationen verwendet, sondern vor allem zur Verteilung beliebiger Inhalte im Dokument.

Eine Tabelle steht im HTML-Dokument zwischen den beiden folgenden Tags:

<table> ... </table>

Tabellen bestehen aus mehreren Zeilen, die in einzelne Zellen aufgeteilt werden; der eigentliche Inhalt darf nur innerhalb der einzelnen Zellen stehen:

<table> 
  <tr> 
    <td> 
      <!-- Hier steht der Zellinhalt -->
    </td> 
    <!-- eventuell weitere Zellen -->
  </tr> 
  <!-- eventuell weitere Zeilen -->
</table>

Die Zeilen mit den <!-- ... -->-Bereichen sind übrigens HTML-Kommentare. Sie können sich über beliebig viele Zeilen erstrecken. Bedenken Sie, dass sie zwar vom Browser ignoriert werden, dass aber jeder Benutzer den Quellcode einer Webseite einsehen und damit auch die Kommentare lesen kann.

Tabellenbestandteile

Zwischen <tr> und </tr> (Abkürzung für »table row«) steht eine einzelne Zeile, die aus einer beliebigen Anzahl von Zellen bestehen kann. Natürlich sollten alle Zeilen einer Tabelle in der Regel gleich viele Zellen besitzen, anderweitig sind keine Spalten definiert. Dennoch sorgt der Browser dafür, dass untereinander liegende Zellen mit der gleichen Breite gezeichnet werden.

Die einzelne Tabellenzelle steht innerhalb der Tags <td> ... </td> (td bedeutet »table data«). Nur zwischen diesen beiden Tags dürfen die eigentlichen Tabelleninhalte stehen. Für Überschriftzellen mit Spalten- oder Zeilenüberschriften existiert auch das spezielle Tag <th> ... </th> (»table heading«), das an den entsprechenden Stellen statt der <td>-Tags gesetzt werden kann und den Text der Zelle in der Regel fett und in der Zelle zentriert setzt.

Zu guter Letzt existiert noch das optionale Tag <caption> ... </caption>, das nicht in eine Zeile oder Zelle gesetzt wird, sondern unmittelbar hinter das öffnende <table>-Tag. Es handelt sich um ein Tag zur Beschriftung der Tabelle. Sein einziges Attribut align kann die Werte "top" (über der Tabelle, der Standardwert) oder "bottom" (unter der Tabelle) annehmen.

Der folgende Codeausschnitt zeigt ein vollständiges Beispiel:

<table border="2">
  <caption>Bestandteile von HTML-Tabellen</caption>
  <tr>
    <th>Element</th>
    <th>Erl&auml;uterung</th>
  </tr>
  <tr>
    <th>table</th>
    <td>Die eigentliche Tabelle</td>
  </tr>
  <tr>
    <th>tr</th>
    <td>Tabellenzeile</td>
  </tr>
  <tr>
    <th>td</th>
    <td>Tabellenzelle</td>
  </tr>
</table>

Abbildung 16.4 zeigt, wie diese Tabelle im Browser dargestellt wird.


Abbildung 16.4   Browserdarstellung einer einfachen Tabelle

Abbildung
Hier klicken, um das Bild zu Vergrößern


Das im <table>-Tag verwendete Attribut border sorgt dafür, dass ein sichtbarer Tabellenrahmen gezeichnet wird – hier mit einer Breite von zwei Pixeln.

Tabellen-Attribute

Es gibt verschiedene Attribute, die die einzelnen Tabellenbestandteile auf verschiedene Art und Weise einrichten. Zunächst werden hier die Attribute des <table>-Tags behandelt:

gp  align="left"|"right"|"center"
Richtet die Tabelle im Fenster aus. Bei "left" und "right" wird sie wie ein entsprechend formatiertes Bild von Text umflossen; "center" setzt sie absatzbildend in die Fenstermitte. Wenn Sie gar kein align angeben, wird die Tabelle absatzbildend nach links gesetzt.
gp  width="..."|"...%"
Gibt die Breite der Tabelle in Pixeln beziehungsweise in Prozent der Fensterbreite an. Der Wert wird ignoriert, falls die Inhalte der Tabelle nicht in die angegebene Breite hineinpassen.
gp  height="..."|"...%"
Gibt die Höhe der Tabelle in Pixeln beziehungsweise in Prozent der Fensterhöhe an. Auch dieser Wert wird ignoriert, falls die Inhalte der Tabelle sonst nicht passen.
gp  border="..."
Breite des Tabellenrahmens in Pixeln. Beachten Sie, dass in modernen Browsern ohne Angabe des border-Parameters eine Tabelle ohne Rand erzeugt wird. Da dies bei älteren Browsern jedoch nicht so sein muss, sollte für eine unsichtbare Layout-Tabelle immer ausdrücklich border="0" gesetzt werden
gp  cellpadding="..."
Gibt die Entfernung des Zellinhaltes vom Rand der Zelle in Pixeln an.
gp  cellspacing="..."
Gibt die Breite der Zellränder in Pixeln an.
gp  bgcolor="#......"
Die Hintergrundfarbe der Tabelle; überdeckt die Seitenhintergrundfarbe.
gp  background="..."
Platziert ein Hintergrundbild mit der angegebenen URL in der Tabelle. Beim Internet Explorer wird es unter die gesamte Tabelle gesetzt und bei Bedarf gekachelt; bei Netscape dagegen wird es ärgerlicherweise in jede einzelne Zelle hineingesetzt.
gp  bordercolor="#......"
Gibt die Farbe des Tabellenrahmens und der Zellränder an. Netscape bildet automatisch eine hellere und eine dunklere Version der angegebenen Farbe, um den Relief-Effekt des Rahmens zu erhalten. Der Internet Explorer färbt dagegen den gesamten Rand einfarbig ein, sobald Sie bordercolor angeben; zum Ausgleich kennt er die beiden speziellen Attribute bordercolorlight und bordercolordark, die für das Einfärben des linken und oberen beziehungsweise rechten und unteren Randes zuständig sind. Insgesamt empfiehlt es sich aber ohnehin, die Ränder mit Hilfe von Style zu formatieren.

Zeilenattribute

Das Tabellenzeilen-Tag <tr> besitzt nur wenige Attribute, das meiste wird bei der Tabelle oder der einzelnen Zelle eingestellt.

Die drei folgenden Angaben werden jedoch definiert:

gp  bgcolor="#......"
Die Hintergrundfarbe der Zeile; überschreibt den Tabellenhintergrund für diese Zeile.
gp  align="left"|"right"|"center"|"justify"
Voreinstellung für die Ausrichtung der Inhalte aller Zellen in der Zeile (linksbündig, rechtsbündig, zentriert, Blocksatz).
gp  valign="top"|"middle"|"bottom"
Voreinstellung für die vertikale Ausrichtung der Inhalte aller Zellen in der Zeile (oben, mittig, unten).

Zellenparameter

Das <td>-Tag unterstützt eine ganze Reihe von Attributen, die hier zum großen Teil aufgelistet werden.

gp  align="center"|"right"|"left"|"justify"
Richtet den Inhalt der Zelle horizontal aus (linksbündig, rechtsbündig, zentriert, Blocksatz). Standard ist die linksbündige Ausrichtung.
gp  valign="middle"|"top"|"bottom"
Richtet den Zellinhalt vertikal aus (oben, mittig, unten). Standard ist die mittige Ausrichtung.
gp  colspan="..."
Gibt an, dass sich diese Zelle über die angegebene Anzahl von Spalten der Tabelle erstrecken soll; natürlich gibt es dann in der entsprechenden Zeile der Tabelle weniger Zellen.
gp  rowspan="..."
Gibt an, dass sich die Zelle über die angegebene Anzahl von Zeilen der Tabelle erstrecken soll. Die Definition erfolgt in der obersten Zeile, in der die Zelle beginnt; in allen betroffenen Zeilen braucht die betreffende Zelle nicht mehr definiert zu werden.
gp  width="..."|"...%"
Zellbreite in Pixeln beziehungsweise relativ zur gesamten Tabelle. Wird die Breite jeder Zelle in Pixeln angegeben, so sollte eine Angabe der Tabellenbreite unterbleiben. Es genügt übrigens, wenn Sie diese Angaben einmal in den Zellen der obersten Zeile vornehmen (alternativ verstehen neuere Browser auch die im nächsten Unterabschnitt vorgestellten <colgroup>-Tags).
    Generell muss zu width-Angaben noch gesagt werden, dass die Breitenangabe ignoriert wird, wenn der Inhalt einer Zelle in der jeweiligen Spalte zu breit ist, um in der gewünschten Zellbreite angezeigt zu werden.
       
gp  height="..."|"...%"
Die Höhe der Zelle in Pixeln beziehungsweise in Prozent der Tabellenhöhe. Auch hier wird die vollständige Darstellung des Inhalts gegenüber der Höhenangabe bevorzugt.
gp  nowrap="true"
Das Attribut nowrap – in HTML 4.0 noch ohne Wertangabe – verhindert Zeilenumbrüche innerhalb einer Zelle. Es funktioniert in fast jedem Browser, gilt aber als veraltet und wird durch eine entsprechende Stylesheet-Angabe ersetzt.

Inhalt einer Zelle können beliebige Elemente sein, die HTML unterstützt, also Texte, Bilder und Hyperlinks. Natürlich kann ein <td> ... </td> auch wieder eine weitere Tabelle enthalten.

Um das komplexe Zusammenspiel dieser Parameter zu demonstrieren – insbesondere die Zusammenfassung von Zellen per rowspan und colspan –, folgt an dieser Stelle ein Beispiel. Listing 16.1 zeigt zunächst den HTML-Code.

Listing 16.1   Ein komplexes Tabellenbeispiel

<table border="2" cellpadding="4">
  <tr>
    <th colspan="4">Computerspielverleih Game 
    Express</th>
  </tr>
  <tr>
    <th>Spiel</th>
    <th>Plattformen</th>
    <th>Verleihpreis / Tag</th>
    <th>Verkaufspreis</th>
  </tr>
  <tr>
    <td>Tomb Raider: The Angel of Darkness</td>
    <td>PC, PS2</td>
    <td align="right">1,99 &euro;</td>
    <td align="right">39,99 &euro;</td>
  </tr>
  <tr>
    <td>Syberia</td>
    <td>PC</td>
    <td rowspan="2" align="right">1,49 &euro;</td>
    <td rowspan="2" align="right">29,99 &euro;</td>
  </tr>
  <tr>
    <td>Post Mortem</td>
    <td>PC</td>
  </tr>
  <tr>
    <td>DOOM II</td>
    <td colspan="3" align="center">Vergriffen</td>
  </tr>
</table>

In Abbildung 16.5 sehen Sie, wie der Browser diesen Code umsetzt. Lesen Sie den Code sorgfältig und vergleichen Sie ihn mit den Erläuterungen in diesem Abschnitt, um die einzelnen Elemente und Attribute zu verstehen.


Abbildung 16.5   Beispiel für eine komplexe Tabelle

Abbildung
Hier klicken, um das Bild zu Vergrößern


Neuere Entwicklungen

Beachten Sie, dass die folgenden Möglichkeiten nur vom Internet Explorer ab 4.0, von Netscape ab 6.0 und von Mozilla unterstützt werden.

Tabellenbereiche

Eine moderne Möglichkeit der Tabellenformatierung ist die Aufteilung in Tabellenkopf, Tabellenkörper und Tabellenfuß. Diese Bereiche erfüllen zwei wichtige Zwecke: Erstens werden Kopf und Fuß beim Ausdrucken längerer Tabellen auf jeder Druckseite wiederholt, zweitens können sie mit den weiter unten gezeigten Anzeigeoptionen für die Gitternetzlinien kombiniert werden.

Der Kopf steht zwischen <thead> und </thead>; <tbody> und </tbody> umrahmen den Körper; der Fuß wird zwischen <tfoot> und </tfoot> gesetzt. Jede dieser Gruppen kann im Prinzip beliebig viele Tabellenzeilen enthalten, in der Regel werden Kopf und Fuß jedoch recht kurz sein.

Das Beispiel in Listing 16.2 zeigt eine Tabelle, in der die drei Bereiche definiert werden. Die Angabe rules="groups" im <table>-Tag bedeutet, dass Kopf, Körper und Fuß jeweils in einen eigenen Kasten gesetzt werden sollen.

Listing 16.2   Tabelle mit modernen HTML-4.0-Formaten

<table border="2" rules="groups" cellpadding="5">
  <thead>
    <tr>
      <th rowspan="2" valign="bottom">Tabellen-
      Feature</th>
      <th colspan="3">Unterst&uuml;tzt von:</th>
    </tr>
    <tr>
      <th>Internet Explorer ab 4.0</th>
      <th>Netscape 4.0</th>
      <th>Netscape ab 6.0</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>bordercolor</td>
      <td>ja</td>
      <td>ja</td>
      <td>ja</td>
    </tr>
    <tr>
      <td>bordercolorlight, bordercolordark</td>
      <td>ja</td>
      <td>nein</td>
      <td>nein</td>
    </tr>
    <tr>
      <td>thead, tbody, tfoot</td>
      <td>ja</td>
      <td>nein</td>
      <td>ja</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4" align="center">Alle Angaben ohne 
      Gew&auml;hr.</td>
    </tr>
  </tfoot>
</table>

Abbildung 16.6 zeigt das Beispiel im Internet Explorer 6.0, der die entsprechenden Angaben interpretieren kann.


Abbildung 16.6   Komplexes Tabellenbeispiel mit Kopf-, Körper- und Fuß-Gruppierung

Abbildung
Hier klicken, um das Bild zu Vergrößern


Gitternetzlinien einzeln steuern

Im <table>-Tag können Sie über das neue Attribut rules steuern, welche Gitternetzlinien zwischen Zellen gezeichnet werden sollen und welche nicht. Grundvoraussetzung dafür, dass überhaupt sichtbare Linien angezeigt werden, ist die Anwesenheit des Attributs border mit einem Wert, der größer als 0 ist. Die möglichen Werte für rules sind folgende:

gp  rules="none" – keine Linien (border zeigt nur noch den Außenrahmen an)
gp  rules="rows" – es werden nur Zeilen-, aber keine Spaltentrennlinien gezeichnet.
gp  rules="cols" – es werden Spalten-, aber keine Zeilentrennlinien gezeichnet.
gp  rules="groups" (siehe Beispiel in Abbildung 16.6) – um die drei oben erläuterten Bereiche thead, tbody und tfoot wird jeweils ein eigener Rahmen gezeichnet.
gp  rules="all" – alle Gitternetzlinien werden gezeichnet; dies ist der Standardfall.

Rahmenlinien einzeln steuern

Mit Hilfe des <table>-Attributs frame können Sie angeben, welche Teile des Außenrahmens angezeigt werden sollen:

gp  frame="none" – es wird kein Außenrahmen gezeichnet; border zeigt nur noch die inneren Gitternetzlinien gemäß rules-Definition an.
gp  frame="above" – es wird nur oben ein Rand gezeichnet.
gp  frame="below" – der Rand wird nur unten gesetzt.
gp  frame="lhs" – es wird nur ein linker Rand gezeichnet (lhs steht für »left hand side«).
gp  frame="rhs" – nur rechts wird eine Rahmenlinie gesetzt (»right hand side«).
gp  frame="hsides" – beide horizontalen Randlinien werden gezeichnet, das heißt oben und unten.
gp  frame="vsides" – es werden nur die vertikalen Linien angezeigt, also links und rechts.
gp  frame="box" – alle Randlinien werden gezeichnet; dies ist der Standardfall.

Spaltenbreiten angeben

Wenn Sie die Breitenangaben für Tabellenzellen (und damit -spalten) übersichtlicher gestalten möchten, können Sie für neuere Browser zu Beginn der Tabellendefinition einen <colgroup>-Bereich (»column group«, steht für »Spaltengruppe«) einrichten.

Innerhalb des Containers <colgroup> ... </colgroup> wird für jede einzelne Spalte ein leeres <col>-Tag gesetzt, das die Breite der entsprechenden Spalte definiert. Diese Breitenangabe erfolgt wie gewohnt über das Attribut width und kann drei verschiedene Arten von Werten ausdrücken: Eine einfache Zahl (zum Beispiel width="200") bezeichnet den angegebenen Wert in Pixeln, eine Zahl mit Prozentzeichen (etwa "30%") ist der angegebene Prozentsatz der Tabellenbreite, und eine Zahl mit angehängtem Sternchen ("3*") gibt anteilige Breiten wie in einem Cocktail-Rezept an (»1 Teil Rum, 3 Teile Cola«).

Das <colgroup>-Tag kann auch das optionale Attribut span enthalten, das die Anzahl der Spalten angibt. In diesem Fall steht auch die width-Angabe (in Pixeln) direkt in diesem Tag und gilt als Einheitsbreite für alle Spalten.

Hier ein kleines Beispiel:

<table border="2">
  <colgroup>
    <col width="100" />
    <col width="300" />
  </colgroup>
  <tr>
    <td>100 Pixel breit</td>
    <td>300 Pixel breit</td>
  </tr>
</table>

Die Tabelle besteht nur aus einer Zeile mit zwei Zellen, die linke ist 100 Pixel breit, die rechte 300 Pixel.

Das Problem mit <colgroup>-Definitionen ist vor allem, dass ältere Browser sie überhaupt nicht interpretieren. Aus Sicherheitsgründen sollten Sie sie also auch noch einmal in die entsprechenden <td>-Tags hineinschreiben – und dann können Sie sie auch gleich weglassen.

All diese HTML-4.0-Neuerungen sind zudem auch schon wieder veraltet, weil es jeweils moderne Stylesheet-Formatierungen als Alternativen gibt (siehe Abschnitt 20.3).

Praxisbeispiel

Da Tabellen in HTML nicht nur dem klassischen Zweck dienen, Textinformationen tabellarisch anzuordnen, sondern in der Regel auch für das gesamte Seitenlayout zuständig sind, finden Sie an dieser Stelle ein alltägliches Beispiel für Letzteres. Aus mehreren guten Gründen, die weiter unten erläutert werden, sollten Sie solche Lösungen für die meisten Sites den beliebten Frames vorziehen.

Das Beispiel ist für ein klassisches News- oder Portal-Site-Layout geeignet. Es ist dreispaltig angelegt, wobei die beiden äußeren Spalten feste Breiten haben und eingefärbt werden, während die mittlere Spalte den Rest der Fensterbreite einnimmt und in der Seitenhintergrundfarbe eingefärbt wird. Über diesem Drei-Spalten-Layout befinden sich in einer eigenen Tabelle links ein Logo und daneben ein Werbebanner. Listing 16.3 zeigt den HTML-Code für eine solche Seite.

Listing 16.3   Ein tabellenbasiertes Seitenlayout

<!-- Logo und Banner: Eigene Tabelle -->
<table border=0 cellspacing=8>
  <tr>
    <td>
      <img src="logo.gif" width="100" height="80" 
      alt="Logo" />
    </td>
    <td valign="bottom">
      <font size=2>- Anzeige -</font><br>
      <a href="http://site-des-inserenten.com">
      <img src="banner.gif" width="480" height="68" 
      alt="Werbebanner" /></a>
    </td>
  </tr>
</table>
<!-- Das eigentliche Layout -->
<table border=0 width="100%" cellspacing=8 cellpadding=4>
  <tr>
    <td bgcolor="#9999FF" valign="top">
      Navigation
      <br />
      <img src="pixel.gif" width="120" height="1" />
    </td>
    <td valign="top" width="100%">
      <h1>Top News</h1>
      <!-- hier weiterer Text nach Belieben -->
    </td>
    <td bgcolor="#9999FF" valign="top">
      Unternavigation
      <br />
      <img src="pixel.gif" width="120" height="1" />
    </td>
  </tr>
</table>

Dieses Layout verwendet zwei Tricks, um die Tabelle nach Möglichkeit in Form zu halten:

gp  Die beiden äußeren Zellen enthalten keine Breitenangabe, sondern ein auf die entsprechende Breite skaliertes »Pixel-GIF«. Es handelt sich dabei um ein 1x1 Pixel großes transparentes Bild vom Typ GIF, das häufig als Abstandhalter eingesetzt wird. Wie Sie ein solches Bild bei Bedarf erstellen können, erfahren Sie in Abschnitt 20.5 über Fireworks.
gp  Die mittlere Zelle enthält die eigentlich inkorrekte Breitenangabe 100% – auf diese Weise werden die beiden äußeren Zellen jeweils an den Rand gedrückt und können nicht breiter werden als das jeweilige Pixel-GIF.

Abbildung 16.7 zeigt ein Beispiel für dieses Layout in Aktion.


Abbildung 16.7   Beispiel für ein tabellenbasiertes News-Site-Layout

Abbildung
Hier klicken, um das Bild zu Vergrößern


Der große Vorteil dieses Layouts besteht darin, dass es sich einer beliebigen Bildschirmauflösung und Browserfenstergröße anpasst. Allerdings wird der Fließtext in der mittleren Spalte bei besonders großen Monitoren zu breit und damit schlecht lesbar. Eine Variante dieses Layoutmusters, die viele Sites inzwischen nutzen, gibt deshalb keine 100% Breite für die große Tabelle an, sondern einen festen Pixelwert von beispielsweise 700. In diesem Fall sollte allerdings auch die Hauptinhaltszelle eine eigene Hintergrundfarbe erhalten, die sich von der des Browserfensters abhebt.


Galileo Computing

16.2.9 Formulare  downtop

In HTML ist es möglich, Formulare zu gestalten, in denen Benutzer beispielsweise Buttons anklicken, aus Menüs auswählen und Texte eingeben können – mit anderen Worten, Sie können mit Hilfe von Formularen viele Merkmale moderner Benutzeroberflächen im Browser zur Verfügung stellen. Der Dateninhalt solcher Formulare kann dann auf Knopfdruck an eine bestimmte, vorher festgelegte URL abgeschickt werden. Bei dieser URL handelt es sich in der Regel um ein serverseitiges Skript, das die Formulardaten entgegennimmt und weiterverarbeitet. Formulare bilden auf diese Weise das Frontend webbasierter Anwendungen.

Jedes Formular steht zwischen den folgenden Tags:

<form action="URL" method="Versandmethode">   
<!-- beliebiges HTML mit Formularelementen -->
</form>

Als Action-URL wird meist die Adresse eines Server-Skripts angegeben. Verschiedene Technologien, mit denen solche serverseitigen Skripte verwirklicht werden können, werden in Kapitel 18, Serverseitig dynamische Websites, beschrieben.

Theoretisch ist auch die Angabe einer E-Mail-Adresse möglich; genau wie bei einem E-Mail-Hyperlink wird dazu eine Pseudo-URL nach dem Muster "mailto:E-Mail-Adresse" eingesetzt. Das Problem dieser Variante besteht jedoch darin, dass neuere Versionen des Internet Explorers und einige andere Browser diese Aufforderung falsch verstehen und ein leeres Mail-Fenster öffnen, wenn das Formular abgeschickt wird. Das führt zu der Konsequenz, dass auch der Versand per E-Mail nur dann wirklich zuverlässig klappt, wenn er durch ein Server-Skript vorgenommen wird.

Versandmethoden

Das Attribut method gibt an, über welchen HTTP-Befehl die Daten versendet werden sollen: "post" versendet sie separat und sorgt dafür, dass sie vom Server so interpretiert werden, als würden sie dort direkt per Tastatur eingegeben (Standardeingabe). Außerdem ist es die passende Methode für den (wie gesagt untauglichen) direkten E–Mail-Versand. "get" hingegen hängt die Formulardaten direkt an die URL an, in der Form url?daten. Beispielsweise verwenden Suchanfragen an Suchmaschinen oft diese Form, sodass zum Beispiel die URL einer Suche nach dem Begriff »html« bei Google folgendermaßen aussieht:

http://www.google.de/search?hl=de&ie=UTF-8&
oe=UTF-8&q=html

Hier werden also an das Programm mit der Adresse search die entsprechenden Daten übermittelt. Hinter den Kulissen befragt dieses Programm daraufhin Googles Datenbank, nimmt die Ergebnisse entgegen und generiert wiederum eine HTML-Seite daraus, die es an den Browser des Anfragenden zurücksendet.

Der Vorteil der Methode "get" besteht darin, dass Sie die URL in der Favoritenliste Ihres Browsers ablegen können. Allerdings ist sie nicht für größere Datenmengen geeignet, da die Maximallänge für URLs 2000 Zeichen beträgt.

Ein weiteres, allerdings optionales <form>-Attribut ist enctype; es gibt den MIME-Type der übertragenen Formulardaten an. Der Standardwert ist "application/x-www-form-urlencoded" und ersetzt in den Formulardaten alle Zeichen, die in URLs nicht gestattet sind oder in Formulardaten eine Sonderbedeutung haben, durch passende Escape-Sequenzen: Leerzeichen werden zu +-Zeichen; die meisten Satzzeichen und alle Nicht-ASCII-Zeichen werden durch ein %-Zeichen und ihren zweistelligen hexadezimalen Code im Zeichensatz ersetzt. Für den direkten E-Mail-Versand, von dem Sie aus den oben genannten Gründen absehen sollten, ist "text/plain" am besten geeignet, also reiner Text. Falls Sie den Datei-Upload über ein Formular ermöglichen möchten, müssen Sie den Typ "multipart/form-data" wählen.

Formularelemente

Innerhalb des Containers <form> ... </form> können Sie eine Reihe unterschiedlicher Eingabeelemente definieren. Die meisten von ihnen verwenden das <input>-Tag:

<input type="Elementtyp" name="Elementname" value="Wert" />

type gibt an, um welche Art von Eingabeelement es sich überhaupt handelt – beispielsweise ein Textfeld (type="text") oder ein Absendeknopf (type="submit"). name und value bilden ein Name/Wert-Paar, das als Name=Wert mit den Formulardaten versandt wird. Je nach konkretem Eingabeelement kommt das eine oder andere Spezialattribut hinzu.

gp  <input type="radio" name="..." value="..." />
Definiert einen so genannten Radiobutton. Der Name stammt daher, dass dieser Button sich so verhält wie die Knöpfe an alten Radios: Wird einer von ihnen gedrückt, springt der zuvor ausgewählte automatisch heraus. Mit Radiobuttons können Sie dem Benutzer die Auswahl einer einzigen Option aus mehreren Alternativen ermöglichen. name bezeichnet dabei den Namen der Gruppe, zu der der Radiobutton gehört. value ist der Inhalt, der als Auswahl für diese Gruppe in den Formulardaten erscheinen soll. Der Text, mit dem der Button beschriftet werden soll, wird einfach hinter das Tag gesetzt.
gp  <input type="checkbox" name="..." value="..." />
Checkboxen bieten dagegen die Möglichkeit, mehrere Optionen an- und wieder abzuwählen. Der optionale Parameter checked="true" kann bei Checkboxen und Radiobuttons stehen und hat zur Folge, dass die entsprechende Option innerhalb ihrer Gruppe bereits ausgewählt ist.
gp  <input type="text" name="..." size="..." maxlength="..." />
Bietet ein Feld zur Texteingabe; optional gibt size die Breite in Zeichen und maxlength die maximale Eingabelänge an. Der ebenfalls optionale Parameter value="..." würde dafür sorgen, dass der betreffende Text bereits voreingetragen im Textfeld steht.
gp  <input type="password" name="..." size="..." maxlength="..." />
Funktioniert im Prinzip genau wie ein Textfeld, mit dem Unterschied, dass die Eingabe als »****« angezeigt wird.
gp  <input type="submit" value="..." />
Stellt einen Button zur Verfügung, der durch Mausklick den Inhalt des Formulars an die URL versendet, die im <form>-Tag angegeben wurde. value hat hier eine etwas andere Bedeutung: Es enthält den Text, mit dem der Button beschriftet wird.
gp  <input type="reset" value="..." />
Setzt alle Einträge, die der Benutzer im Formular vorgenommen hat, auf den Ursprungszustand zurück. value enthält wiederum die Beschriftung des Buttons.
gp  <input type="button" value="..." />
Stellt eine allgemeine Schaltfläche zur Verfügung, deren Aussehen einem Absende- oder Lösch-Button entspricht. In Zusammenarbeit mit JavaScript (siehe Kapitel 19) kann sie ein benutzerdefiniertes Ereignis auslösen.
gp  <input type="hidden" name="..." value="..." />
Dies ist im engeren Sinne kein Eingabefeld, denn es wird vom Browser nicht angezeigt und Benutzer können keine Eingabe vornehmen. Es handelt sich um eine festgelegte Angabe, die zusammen mit den vom Benutzer eingegebenen Formulardaten übertragen wird. Nützlich sind Hidden-Felder etwa für Ordnungszwecke (welches Formular wurde eigentlich verwendet?) oder für Zwischenwerte, die von serverseitigen Programmen generiert wurden und wieder mit den Daten verschickt werden müssen, um vom nächsten Skript aus darauf zurückzugreifen.
gp  <input type="file" name="..." />
Dieses spezielle Feld bietet die Möglichkeit, den Pfad einer lokalen Datei einzutippen oder über einen mitgelieferten Button interaktiv auszuwählen. Wenn das Empfängerskript über eine entsprechende Einrichtung verfügt, wird die angegebene Datei zusammen mit den anderen Formulardaten hochgeladen. In Kapitel 17, Webdesign, finden Sie ein entsprechendes Skript mit weiteren Hinweisen. Beachten Sie, dass der Formulardatentyp über das <form>-Attribut enctype auf "multipart/form-data" gesetzt werden muss, damit es funktioniert.

Neben den diversen <input>-Varianten gibt es noch weitere Formularelemente, die über eigenständige Tags gebildet werden.

Auswahlmenüs

Außer Checkboxen und Radiobuttons kann ein Formular auch noch Menüs enthalten, aus denen der Benutzer auswählen kann. Diese Menüs haben in HTML folgende Syntax:

<select name="..." size="...">
  <option value="..."> 1. Auswahlmöglichkeit </option>
  <option value="..."> 2. Auswahlmöglichkeit </option>
  <!-- bei Bedarf weitere Optionen -->
</select>

Diese Struktur stellt ein Menü zur Verfügung, das die verschiedenen Auswahlmöglichkeiten enthält. Die zusätzliche Option multiple="true" bei <select> ermöglicht die Auswahl mehrerer Felder – allerdings muss dabei die Taste (Strg) beziehungsweise (Apfel) (Mac) festgehalten werden, worauf Sie die Benutzer hinweisen sollten.

name enthält wiederum den Namen, mit dem der übertragene Wert in den Formulardaten versehen wird. size gibt die Anzahl der sichtbaren Zeilen an; wird diese von der Anzahl der Optionen überschritten, erscheint automatisch ein Rollbalken. Der von den meisten Autoren verwendete Sonderfall size="1" lässt ein relativ elegantes Popup-Menü erscheinen.

Das <option>-Tag bestimmt durch das Attribut value wiederum den zu übertragenden Wert für die Formulardaten. Darüber hinaus kennt es den zusätzlichen Parameter selected (ohne Wert), der innerhalb eines Select-Menüs nur auf ein einziges <option>-Tag angewandt werden sollte und dafür sorgt, dass die entsprechende Option vorausgewählt ist.

Mehrzeilige Textbereiche

Die Texteingabe in ein Formular ist auch mehrzeilig möglich, und zwar über das folgende Tag:

<textarea name="..." rows="..." cols="..."></textarea> 

Dieses Tag stellt ein Eingabefeld mit der durch cols angegebenen Breite und der mittels rows eingestellten Höhe zur Verfügung. Sollte zwischen dem öffnenden und dem schließenden Tag Text stehen, so erscheint er als vorgefertigter Eintrag im Feld. Auch wenn Sie keinen Text hineinschreiben, sollten Sie das Tag explizit schließen und nicht per XML-End-Slash, weil ältere Browser ihn nicht verstehen und in diesem Fall einfach den Rest des Dokuments in das Textfeld schreiben.

Der optionale Parameter wrap gibt die Art des Zeilenumbruchs an, der verwendet werden soll:

gp  wrap="none" setzt keine automatischen Zeilenumbrüche; Benutzer können beliebig in derselben Zeile weiterschreiben (Standard bei älteren Browsern; funktioniert bei moderneren oft gar nicht mehr).
gp  wrap="virtual" bricht am rechten Feldrand um, jedoch nur in der Darstellung; der gespeicherte Text enthält keine Zeilenumbrüche (Standard bei den meisten aktuellen Browsern).
gp  wrap="physical" setzt dagegen Zeilenumbrüche in den eigentlichen Text, wenn er am rechten Feldrand umgebrochen wird.

Ausführliches Beispiel

Das Beispiel in Listing 16.4 verwendet fast alle oben gezeigten Formularelemente für den Klassiker – ein Pizza-Bestellformular.

Listing 16.4   Ein Pizza-Bestellformular

<form action="/cgi-bin/bestell.pl" method="GET">
  <table border="0" cellpadding="4">
    <tr>
      <td colspan="3">W&auml;hlen Sie die 
      Gr&ouml;&szlig;e Ihrer Pizza:</td>
    </tr>
    <tr>
      <td><input type="radio" name="psize" 
      value="s" />Mini (18 cm)<br />
      Grundpreis: 3 &euro;</td>
      <td><input type="radio" name="psize" 
      value="m" />Standard (24 cm)<br />
      Grundpreis: 5 &euro;</td>
      <td><input type="radio" name="psize" 
      value="l" />Family (32 cm)<br />
      Grundpreis: 7 &euro;</td>
    </tr>
    <tr>
      <td colspan="3">Jede Pizza ist mit K&auml;se und 
      Tomaten belegt.<br />
      W&auml;hlen Sie hier weitere Bel&auml;ge (je 1,- 
      &euro;)</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="belag" 
      value="spi" />Spinat</td>
      <td><input type="checkbox" name="belag" 
      value="pil" />Pilze</td>
      <td><input type="checkbox" name="belag" 
      value="pap" />Paprika</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="belag" 
      value="sal" />Salami</td>
      <td><input type="checkbox" name="belag" 
      value="sch" />Schinken</td>
      <td><input type="checkbox" name="belag" 
      value="thu" />Thunfisch</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="belag" 
      value="zwi" />Zwiebeln</td>
      <td><input type="checkbox" name="belag" 
      value="xka" />Extra K&auml;se</td>
      <td><input type="checkbox" name="belag" 
      value="xto" />Extra Tomaten</td>
    </tr>
    <tr>
      <td colspan="3">Sind Sie bereits Kunde?</td>
    </tr>
    <tr>
      <td>Ihr Username:</td>
      <td colspan="2"><input type="text" name="kunde" 
      size="20" maxlength="10" /></td>
    </tr>
    <tr>
      <td>Ihr Passwort:</td>
      <td colspan="2"><input type="password" 
      name="pass" size="20" maxlength="8" /></td>
    </tr>
    <tr>
      <td colspan="3">Oder sind Sie neu? 
      <a href="neukunde.htm">Hier klicken</a></td>
    </tr>
    <tr>
      <td colspan="3">Weitere Sonderw&uuml;nsche, 
      Bemerkungen, Anregungen?<br />
      <textarea name="bemerk" cols="50" rows="7" 
      wrap="virtual"></textarea></td>
    </tr>
    <tr>
      <td>Die Bestellung:</td>
      <td>
        <input type="submit" value="Abschicken" />
      </td>
      <td>
        <input type="reset" value="Verwerfen" />
      </td>
    </tr>
  </table>
</form>

Die Anordnung von Formularelementen in Tabellen ist allgemein üblich, um das Ganze übersichtlich und exakt zu gestalten. Abbildung 16.8 zeigt das ausgefüllte Formular im Browser.


Abbildung 16.8   Meine fertig ausgefüllte Pizza-Bestellung

Abbildung
Hier klicken, um das Bild zu Vergrößern



Galileo Computing

16.2.10 Einbetten von Multimedia-Dateien  downtop

Moderne Browser können verschiedene Zusatzkomponenten beinhalten, so genannte Plug-ins (Netscape und andere) beziehungsweise ActiveX-Controls (Internet Explorer für Windows). Dadurch unterstützt der Browser zusätzlich zu den Standard-Elementen verschiedene andere Dateiformate.

Sie können zum Beispiel Sounds oder Digitalvideos abspielen lassen. Zu den bekanntesten Plug-in-Dateien gehören die Formate Shockwave und Flash von Macromedia.

Netscape-Syntax

Netscape verwendet zum Einbetten von Plug-in-Dateien das Tag <embed>; sofern ein entsprechender Player bereits installiert ist, versteht auch der Internet Explorer diese Schreibweise. Der folgende Code bettet die MP3-Sound-Datei shaggy.mp3 in das Dokument ein und spielt sie nach dem Laden automatisch ab:

<embed src="shaggy.mp3" width="200" height="100" autostart="true" 
type="audio/mp3"></embed>

width und height bestimmen bei einem Sound die Anzeigegröße der verwendeten Player-Komponente; an dieser Stelle werden einige Buttons wie Play, Stop oder Lautstärkeregelung angezeigt. Das genaue Aussehen ist nicht vorhersagbar, es hängt vom verwendeten Player ab, beispielsweise sehen QuickTime und der Windows Media Player recht unterschiedlich aus. Alternativ können Sie mit hidden="true" dafür sorgen, dass gar keine Regler angezeigt werden. Das optionale Attribut loop="true" spielt den Sound in einer Schleife ab.

Für Digitalvideo (QuickTime, Video for Windows, MPEG und so weiter) stehen im Prinzip dieselben Optionen zur Verfügung; naturgemäß sind die Attribute width und height hier wichtiger als bei Sound. Die MIME-Types für die wichtigsten Plug-in-Formate finden Sie in Tabelle 16.4.


Tabelle 16.4   Die wichtigsten MIME-Types für Multimedia-Plug-in-Formate

Format Dateiendung MIME-Type
MP3-Sound .mp3 audio/mp3 oder audio/mpeg
WAVE-Sound .wav audio/wav
AIFF-Sound .aif, .aiff audio/aiff
Sun AU-Sound .au audio/au
MPEG-Video .mpg, .mpeg video/mpeg
QuickTime-Video .mov, .qt video/quicktime
Video for Windows .avi video/avi
Macromedia Flash .swf application/x-shockwave-flash
Macromedia Director .dcr application/x-director

Je nach eingebettetem Dateiformat werden noch weitere Attribute unterstützt. Beim Einbetten von Macromedia Flash-Filmen werden besonders viele Optionen angeboten; dieses Thema wird in Kapitel 20 ausführlich behandelt.

Objekte einbetten

Der Microsoft Internet Explorer bietet ein intelligenteres Modell für Multimedia-Komponenten an, die so genannte ActiveX-Technologie: Wenn zum ersten Mal eine Datei eines unbekannten Typs eingebettet wird, lädt der Browser automatisch die passende Komponente herunter, genannt ActiveX-Control, und installiert sie, während der Browser läuft.

ActiveX-Sicherheitsprobleme

Leider ist damit ein enormes Sicherheitsrisiko verbunden: Ein ActiveX-Control hat dieselben Befugnisse wie ein lokales Programm – theoretisch könnte Ihnen jemand eine Komponente unterjubeln, die Ihr System massiv beschädigt. Sie sollten darauf achten, nur signierte Controls zu akzeptieren, und auch diese nur per Anfrage. Vor dem Download einer Komponente erscheint dann ein Bestätigungsfenster, in dem der Anbieter genannt wird. Seine Identität wird durch ein elektronisches Zertifikat garantiert. Sie sollten dem Download nur zustimmen, wenn Sie wissen, was Sie tun.

Ein Objekt wird folgendermaßen eingebettet (das Beispiel zeigt das Einbetten der Director-Shockwave-Datei test.dcr):

<object classid="clsid:166B1BCA-3F9C-11CF-8075-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/
cabs/director/sw.cab#version=8,5,1,0" width="320" height="240">
<param name="src" value="test.dcr" />
</object>

Die 128 Bits lange Class-ID ist die eindeutige Registriernummer der jeweiligen ActiveX-Komponente. Diese Nummer kann sich wahrscheinlich kein Mensch merken. Sie können sie allerdings bei Microsoft oder beim Anbieter der jeweiligen Komponente nachschlagen. Im Zweifelsfall hilft auch die Angabe classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A", die für alle Audio- und Videoformate zuständig ist.

codebase gibt die Download-Adresse für das ActiveX-Control an. Die meisten anderen Optionen werden als separate <param>-Tags eingebettet; hier beispielsweise die Angabe src, die die URL der eingebetteten Datei angibt.

Browserübergreifende Lösung

Da Netscape und ähnliche Browser gar kein ActiveX unterstützen und das <object>-Tag deshalb nicht verstehen, wird in der Regel einfach ein entsprechendes <embed>-Tag hineinverschachtelt:

<object classid="clsid:166B1BCA-3F9C-11CF-8075-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/
cabs/director/sw.cab#version=8,5,1,0" width="320" height="240">
<param name="src" value="test.dcr" />
<embed src="test.dcr" width="320" height="240" 
type="application/x-director" 
pluginspage="http://www.macromedia.com/shockwave/download/"></embed>
</object>

Java-Applets einbetten

Die früher gern für Web-Multimedia eingesetzten Java-Applets werden heute nur noch selten verwendet. Die meisten ihrer früheren Aufgaben können mit erheblich weniger Aufwand und geringerer Ladezeit erledigt werden, beispielsweise mit Hilfe von Flash.

Wollen Sie dennoch ein Java-Applet einbetten, dann erfolgt dies mit Hilfe des <applet>-Tags. Das folgende Beispiel bettet ein Applet namens Malen.class mit der Anzeigegröße 400 x 400 Pixel in das Dokument ein:

<applet code="Malen.class" width="400" height="400"></applet>

Auch innerhalb des <applet>-Blocks können <param>-Tags wie bei <object> stehen, spezielle Java-Anweisungen nehmen die entsprechenden Parameter entgegen. Näheres über Java-Applets erfahren Sie in Kapitel 6, Konzepte der Programmierung.


Galileo Computing

16.2.11 Frames  downtop

HTML bietet die Möglichkeit, in einem Browserfenster mehrere Dokumente gleichzeitig anzuzeigen. Dies erlaubt es beispielsweise, beim Surfen durch eine Website eine ständige Menüleiste an einem Rand des Fensters aufrechtzuerhalten.

Das Tag <frameset>, das dafür verwendet wird, ersetzt das <body>-Tag auf der Seite, die grundsätzlich die Frames, das heißt die entsprechende Einteilung, einrichtet und die gewünschten Seiten in die Frames hineinlädt.

Das <frameset>-Tag definiert entweder eine horizontale Unterteilung des Browserfensters über das Attribut cols oder eine vertikale Unterteilung mit Hilfe von rows. Der Wert des jeweiligen Attributs ist eine durch Kommata getrennte Liste der jeweiligen Frame-Maße. Die Angaben können entweder in Prozent des Browserfensters erfolgen (und sollten in diesem Fall die Summe 100% ergeben), oder es können konkrete Pixelwerte angegeben werden. Im letzteren Fall benötigt mindestens ein Frame die spezielle Angabe *, die für einen beliebigen Wert steht. Andernfalls besteht keine Möglichkeit, die unterschiedliche Größe von Browserfenstern abzufangen.

Innerhalb des Containers <frameset> ... </frameset> steht eine Reihe von <frame>-Tags, diese definieren nacheinander die entsprechenden Frames und laden je ein Dokument hinein. Statt eines <frame>-Tags können Sie auch stets ein weiteres <frameset> setzen, um mehrere Framesets ineinander zu verschachteln.

Hier ein typisches Beispiel:

<frameset cols="120,*">
  <frame src="navi.htm" />
  <frame src="start.htm" />
</frameset>

Es wird ein horizontal unterteiltes Frameset aus zwei Frames eingerichtet. Das linke Frame ist 120 Pixel breit, das rechte beliebig. In die beiden Frames werden (von links nach rechts) die beiden Dateien navi.htm und start.htm geladen.

Verschachtelte Framesets

Das folgende komplexere Beispiel zeigt ein verschachteltes Frameset: Angenommen, es soll ein Frame mit einer Hauptüberschrift über die gesamte Bildschirmbreite verteilt dargestellt werden, darunter links ein schmales Frame mit einem Menü und rechts ein breites, das die eigentlichen Inhaltsseiten enthält:

<frameset rows="25%,75%">
  <frame src="titel.htm" noresize="true" />
  <frameset cols="150,*">
    <frame src="menu.htm" noresize="true" />
    <frame src="seite.htm" noresize="true" />
  </frameset>
</frameset>

Hier wird also der Bildschirm zunächst in zwei übereinander liegende Bereiche eingeteilt. Anschließend wird mit dem <frame ...>-Tag angegeben, aus welcher Quelle (»source«) der Inhalt des entsprechenden Frames stammen soll. Als Nächstes wird ein weiteres Frameset definiert, das den verbleibenden unteren Bildschirmbereich noch einmal in zwei horizontale Frames aufteilt. Das Attribut noresize im <frame>-Tag bewirkt, dass Benutzer die Größe der Frames nicht durch Ziehen mit der Maus verändern können.

Hyperlinks in Framesets

Enthält ein Frame einen Hyperlink, so wird die verknüpfte Seite zunächst in dasselbe Frame hineingeladen, sofern nichts anderes angegeben wurde. Dies ist zum Beispiel im Fall einer ständigen Menüleiste nicht wünschenswert.

Um diesen Effekt zu vermeiden, muss das einzelne Frame zunächst einen Namen als Bezugspunkt erhalten:

<frame src="..." name="..." />

Soll das Anklicken eines Hyperlinks zur Folge haben, dass die verknüpfte Seite in dieses benannte Frame geladen wird, muss der Name des Frames in dem Link als Wert des Attributs target eingesetzt werden:

<a href="..." target="...">...</a>

Standard-Targets

Neben den selbst definierten gibt es auch noch einige vordefinierte target-Namen:

gp  "_blank" – ein neues, leeres Browserfenster; kann bei Verweisen auf fremde Inhalte verwendet werden. Es ist schlicht geschmacklos und möglicherweise sogar illegal, fremde Webseiten innerhalb eines eigenen Framesets darzustellen, da es den falschen Eindruck erweckt, Sie hätten die fremden Inhalte selbst erstellt.
gp  "_top" – das ganze Browserfenster; alle bisherigen Frames werden damit aufgehoben.
gp  "_parent" – das jeweils übergeordnete Frameset. Allerdings funktioniert dies nur, wenn mehrere einzelne Frameset-Dateien ineinander geladen wurden, und nicht bei Framesets, die von vornherein verschachtelt sind. In solchen Fällen ist es ohnehin sicherer, "_top" zu verwenden und dann eine ganz neue Frameset-Definitionsdatei zu laden.
gp  "_self" – das aktuelle Frame oder Fenster, in dem auch der Link steht. Diese zunächst sinnlos erscheinende Angabe kann notwendig werden, wenn Sie ein eigenes Standard-Target definieren.

Ein Standard-Target wird mit Hilfe der folgenden Angabe im Head eines Dokuments eingerichtet:

<base target="..." />

Alle Hyperlinks aus diesem Dokument werden in das angegebene Frame hineingeladen. Dies ist ideal für Navigationsleisten, bei denen praktisch alle Links in einem Hauptinhalts-Frame geöffnet werden.

Randlose Frames

In der Regel werden völlig randlose Frames ohne Abstände benötigt. Dafür muss eine Menge Schreibarbeit geleistet werden, da verschiedene Browser unterschiedliche Vorstellungen von Frame-Attributen haben:

<frameset rows|cols="..." border="0" 
frameborder="0" framespacing="0">
  <frame src="..." frameborder="0" marginheight="0" 
  marginwidth="0" />
  <frame src="..." frameborder="0" marginheight="0" 
  marginwidth="0" />
</frameset>

Eine weitere Eigenschaft des <frame>-Tags, scrolling, gibt an, ob für das Frame Rollbalken angezeigt werden sollen. Mögliche Werte sind "yes" für erzwungene Rollbalken, "no" für unterdrückte Rollbalken sowie "auto" für Rollbalken bei Bedarf – Letzteres ist Standard. Bei Frames mit relevantem Inhalt sollten Sie niemals die Anzeige der Rollbalken mit "no" abschalten, weil diese Inhalte sonst in einem zu kleinen Browserfenster nicht angezeigt werden.

»Dummy«-Framesets

Geeignet ist die Einstellung scrolling="no" dagegen für Frames, die lediglich als Abstandhalter dienen: Ein beliebtes und weit verbreitetes Website-Layout verwendet ein »Dummy«-Frameset, um unabhängig von der Monitorauflösung einen Anzeigebereich fester Größe in die horizontale und vertikale Browserfenstermitte zu setzen. Die Abstandhalter-Datei (im folgenden Beispiel dummy.htm), die dabei in alle äußeren Frames hineingeladen wird, definiert lediglich eine Hintergrundfarbe und enthält als einzigen Inhalt zwischen <body> und </body> ein &nbsp;, also ein geschütztes Leerzeichen, damit sie eine gültige HTML-Datei ist. Das folgende Beispiel lädt die Datei inhalt.htm in einen festgelegten Bereich in der Browserfenstermitte:

<frameset rows="*, 400, *" border="0" 
frameborder="0" framespacing="0" />
  <frame src="dummy.htm" frameborder="0" marginheight="0" 
  marginwidth="0" scrolling="no" />
  <frameset cols="*, 700, *" border="0" frameborder="0" 
  framespacing="0">
    <frame src="dummy.htm" frameborder="0" 
    marginheight="0" marginwidth="0" scrolling="no" />
    <frame src="inhalt.htm" frameborder="0" 
    marginheight="0" marginwidth="0" />
    <frame src="dummy.htm" frameborder="0" 
    marginheight="0" marginwidth="0" scrolling="no" />
  </frameset>
  <frame src="dummy.htm" frameborder="0" marginheight="0" 
  marginwidth="0" scrolling="no" />
</frameset>

Sollte man Frames verwenden?

Vielleicht fragen Sie sich gerade, weshalb Frames in diesem Kapitel so kurz und knapp behandelt werden, während die meisten HTML-Bücher dieses Thema endlos breittreten. Nun – der Hauptgrund besteht darin, dass Sie Frames nur in Ausnahmefällen verwenden sollten! Das liegt daran, dass Frames zwar dem Webmaster eine Menge Arbeit sparen, den Anwendern Ihrer Seiten jedoch fast nur ärgerliche Nachteile bringen.

1. Besucher einer umfangreichen Site können keine Bookmarks für einzelne Dokumente anlegen, wenn die Site Frames verwendet: Es wird immer nur die Adresse des Haupt-Framesets gespeichert.
       
2. Viele Browser bekommen darüber hinaus Probleme mit ihrer History (der Liste der zuvor besuchten Seiten), sobald Frames ins Spiel kommen – in der Praxis äußert sich dies in Fehlfunktionen der Vorwärts- und Rückwärts-Buttons des Browsers.
       
3. Der wichtigste Nachteil schadet nicht nur den Anwendern, sondern auch dem Site-Betreiber selbst: Framebasierte Websites erhalten nicht genügend Treffer in Suchmaschinen! Das Problem ist, dass Sie einer Suchmaschine nur den Zutritt zum Haupt-Frameset erlauben dürfen. Die einzelnen Dokumente sind tabu, weil sie ohne das umgebende Frameset nicht vollständig sind. Bitte lassen Sie auch die Finger von JavaScript-Lösungen, die das Frameset automatisch nachladen – so etwas ist in puncto Benutzerfreundlichkeit keine stabile und sichere Lösung. Zwar wird in Kapitel 19, JavaScript, kurz angerissen, wie es funktioniert – aber don't try this at home!
       

Es gibt allerdings einige wenige Ausnahmefälle, in denen die Verwendung von Frames angebracht ist: Ein bestimmter Unterbereich Ihrer Website könnte ein Nachschlagewerk oder Glossar enthalten, bei dem die Navigation am sinnvollsten in einem Frame aufgehoben ist. Weiterhin ergeben Frames kein Problem, solange sie für eine Offline-Dokumentation benutzt werden, beispielsweise ein HTML-basiertes elektronisches Handbuch.


Galileo Computing

16.2.12 Meta-Tags und Suchmaschinen  toptop

Im Head eines HTML-Dokuments können Sie neben dem Titel – übrigens der wichtigsten Information für Suchmaschinen – eine Reihe zusätzlicher Informationen unterbringen, von denen einige für den Browser und andere für Suchmaschinen gedacht sind. Die meisten dieser Informationen stehen in so genannten <meta>-Tags. Der Aufbau dieser Tags ist folgender:

<meta name="..." content="..." />

oder

<meta http-equiv="..." content="..." />

Die Attribute name beziehungsweise http-equiv geben den Namen oder die Kategorie einer zu definierenden Information an, content enthält ihren Wert. Der Unterschied zwischen der name- und der http-equiv-Variante besteht darin, dass eine http-equiv-Information (»http equivalent«) einem HTTP-Header-Feld entspricht. In der Regel handelt es sich um wichtige Verarbeitungsoptionen für den Browser. Eine der wichtigsten Informationen dieses Typs gibt den MIME-Type und den Zeichensatz der Webseite an und überschreibt den Standardwert, den der Webserver liefert:

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

Andere Zeichensätze sind beispielsweise iso-8859-9 für türkischen Text oder iso-8859-7 für Griechisch. Näheres über Zeichensätze und verwandte Themen finden Sie in Kapitel 11, Datei- und Datenformate.

Automatischer Refresh

Eine weitere häufig verwendete Variante ist das automatische erneute Laden der aktuellen Seite beziehungsweise die Weiterleitung auf eine andere. Dazu wird folgendes Tag gesetzt:

<meta http-equiv="refresh" content="10" />

Unter content wird die Anzahl der Sekunden angegeben, nach der die Seite erneut geladen werden soll. Nützlich ist dies bei Dokumenten, deren Inhalte häufig durch serverseitige Informationen aktualisiert werden, beispielsweise Sportergebnisse oder Börsenkurse.

Die folgende Variante lädt statt der bisherigen Seite nach fünf Sekunden das Dokument test.htm:

<meta http-equiv="refresh" content="5;url=test.htm" />

Dies ist beispielsweise nützlich, wenn die eigene Site auf eine neue Adresse umgezogen ist, die bekannt gemacht werden soll.

Suchmaschinen-Informationen

Zunächst einmal müssen Sie wissen, welche Informationen Suchmaschinen überhaupt auswerten. Die wichtigste Angabe ist, wie bereits erwähnt, der weiter oben beschriebene Dokumenttitel:

<title>...</title>

Weiterhin sind einige Meta-Tags sehr wichtig:

<meta name="description" content="Kurze Beschreibung 
der Website/einzelnen Seite" />

Bei Frame-Sites können Sie aus bereits erläuterten Gründen nur die Startseite mit solchen Informationen versehen; hier sollte das Tag die gesamte Site beschreiben. Bei framelosen Websites sollte jeweils ein kurzer Hinweis auf die gesamte Website und anschließend eine Beschreibung des jeweiligen Dokuments erfolgen. Die meisten Suchmaschinen werten etwa 150 bis 200 Zeichen aus.

Mit dem folgenden Meta-Tag können Sie eine Reihe relevanter Schlüsselwörter angeben, die vor allem als Suchbegriffe für die Site dienen sollen:

<meta name="keywords" content="..." />

Ein ungefährer Richtwert sind etwa 20 bis 50 Schlüsselwörter. Wichtig ist, dass die meisten Suchmaschinen keine Wiederholungen dulden. Ab der dritten Wiederholung werden Sie womöglich sogar aus der Datenbank einer Suchmaschine entfernt.

Die Begriffe »Künstler, Künstlerin, Künstlerbedarf« stellen beispielsweise keine Wiederholung dar. Verboten wäre dagegen die Liste »Künstler, künstler, KÜNSTLER«. Sie sollten die Schreibweise »Künstler« wählen, denn bei fast allen Suchmaschinen funktioniert die Suchbegriffseingabe nach dem folgenden Schema: Kleinschreibung findet alle Varianten, gemischte Groß-/Kleinschreibung findet genau die eingegebene Variante.

Sie sollten die folgenden Arten von Schlüsselwörtern verwenden:

gp  Angaben über das Tätigkeitsfeld, den Zweck oder das Interessengebiet der Website
gp  Geografische Angaben wie Gemeinde oder Bundesland
gp  Namen wichtiger Personen

Vermeiden sollten Sie dagegen die folgenden Arten von Wörtern:

gp  Allgemeine Wörter, Füll- und Flickwörter
gp  Wörter, die zwar viele Hits bringen, aber nichts mit der eigenen Site zu tun haben
gp  Markennamen, insbesondere der Konkurrenz, können zu rechtlichen Problemen führen

Der in älteren Dokumentationen oft empfohlene Text in Hintergrundfarbe ist für viele Suchmaschinen ebenfalls ein guter Grund zum Ignorieren. Auch die schnelle automatische Weiterleitung über mehrere Pseudo-Tunnelseiten hinweg, die vermeintlich das Unterbringen von mehr relevantem Text ermöglicht, wird oft nicht toleriert.

Das Meta-Tag robots steuert den Zugriff von Suchmaschinen auf die aktuelle Seite sowie die Beachtung von Hyperlinks:

<meta name="robots" content="[no]index, [no]follow">

index bedeutet, dass die aktuelle Seite indiziert werden soll, während noindex die Seite ignoriert. follow folgt automatisch den Hyperlinks auf der aktuellen Seite, nofollow folgt den Links nicht.

Bei allen normalen, nicht framebasierten Websites sollte auf jeder öffentlichen Einzelseite index, follow verwendet werden. Auf der Startseite von Frame-Websites sollte dagegen index, nofollow stehen, damit die Einzelseiten nicht indiziert werden.

Das robots-Meta-Tag wird nicht von allen Suchmaschinen unterstützt. Zusätzlich sollte im obersten Verzeichnis der Site die Textdatei robots.txt liegen, die folgende Angaben enthalten kann:

User-agent ist der Name, mit dem sich die Suchmaschinensoftware beim Server meldet. In der Regel wird User-agent: * verwendet, was für alle Suchmaschinen steht.

Disallow: /verzeichnis bedeutet, dass alle Dateien und Unterverzeichnisse unterhalb von /verzeichnis für Suchmaschinen gesperrt sind.

Zu guter Letzt sollten Sie daran denken, dass selbst die besten Meta-Tags nicht gegen inhaltsreichen und gut strukturierten Text ankommen. Bild- oder Flash-lastige Seiten haben es im Ranking der Suchmaschinen relativ schwer.

Anmeldung bei Suchmaschinen

Nachdem Sie die genannten Informationen eingetragen haben, müssen Sie sich bei den einzelnen Suchmaschinen anmelden. Dabei ist zwischen echten Suchmaschinen wie Google, AltaVista oder Lycos und redaktionell betreuten Katalogen wie Yahoo oder web.de zu unterscheiden.

Bei den echten Suchmaschinen gibt es irgendwo einen Link wie »Seite anmelden« oder Ähnliches. Sie müssen hier lediglich die URL der Website und eventuell eine E–Mail-Adresse für Rückfragen eingeben. In den nächsten Tagen nach der Anmeldung besucht die Suchmaschine die Website und indiziert sie gemäß des robots-Meta-Tags und der Datei robots.txt.

Bei den Katalogen müssen Sie in der Regel ein umfangreiches Formular ausfüllen. Der Katalogbetreiber entscheidet daraufhin selbst, ob die Site aufgenommen wird oder nicht.

Auch die »automatische« Anmeldung bei mehreren Suchmaschinen ist möglich. Dazu können Sie Programme verwenden, die auf dem eigenen Rechner installiert werden, beispielsweise HelloEngines (www.helloengines.de). Daneben existieren auch Websites, die diese Dienstleistung durchführen, zum Beispiel den Hit Counter Killer (www.submit4free.de).






  

Einstieg in PHP 5

Einstieg in Java

C von A bis Z

Einstieg in C++

Einstieg in Linux

Einstieg in XML

Apache 2




Copyright © Galileo Press GmbH 2004
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Galileo Computing]

Galileo Press GmbH, Gartenstraße 24, 53229 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de