HTML-Einführung von Hubert Partl

Spezialeffekte

Schrift

Schriftarten

In Spezialfällen kann man die Schriftart mit folgenden Befehlen festlegen:
<b> ..... </b> für fette Schrift (boldface),
<i> ..... </i> für kursive Schrift (italic),
<u> ..... </u> für Unterstreichungen (underline),
<tt> ... </tt> für nicht proportionale Schrift (teletype),
<code> ... </code> für Computer-Schrift.

Diese Befehle sollten Sie nur dann verwenden, wenn eine bestimmte Schriftart per Konvention vorgeschrieben ist (z.B. Fettdruck für Vektoren und Kursivdruck für skalare Variable in der Mathematik, Computer-Schrift für Programmbeispiele, Kursivdruck für lateinische Pflanzen- und Tiernamen und dergleichen).

Wenn es jedoch darum geht, Wörter oder Textteile mit einer bestimmten Bedeutung vom normalen Text abzuheben, sollten Sie nicht diese Befehle verwenden sondern die Markierung mit <em> oder <strong>.

Unterstreichungen sollten Sie überhaupt vermeiden, weil sie Verwechslungen mit Hypertext-Links bewirken würden.

Manche Schriftarten können von manchen Clients nicht dargestellt werden, sie werden dann durch eine andere geeignete Schriftart ersetzt.

Schriftgrößen

Die Schriftgröße wird vom Benutzer auf seinem Client so eingestellt, wie es für seine Bildschirm-Auflösung und seine Augen am besten ist.

In HTML 3.2 und 4 sind mehrere Möglichkeiten vorgesehen, die Schriftgröße von bestimmten Wörtern oder Textteilen zu beeinflussen:
<big> ....... </big> für größere Schrift,
<small> ... </small> für kleinere Schrift,
<font size="+n"> ... </font> für eine um n Stufen größere Schrift,
<font size="-n"> ... </font> für eine um n Stufen kleinere Schrift,
<font size=n> ...... </font> für Schrift in einer bestimmten Größe,
sowie mit Style-Sheets. Ob und wie diese Größenangaben wirken, hängt vom Web-Browser und vom Client-Bildschirm ab.

Viele, aber nicht alle Web-Browser stellen Überschriften der Ebenen 1 bis 3 durch fette und große Schrift dar, manche stellen Überschriften der Ebenen 5 und 6 durch kleinere Schrift dar. Die entsprechenden Befehle <hx> sollten aber wirklich nur für Überschriften der jeweiligen Ebene verwendet werden und nicht für andere Zwecke, denn das hätte unerwünschte Nebeneffekte auf eine eventuelle Einrückung der nachfolgenden Texte sowie auf Suchhilfen und automatisch erstellte Inhaltsverzeichnisse.

Farben

Wie werden Farben sichtbar?

Im allgemeinen ist es günstiger, wenn Sie dem Leser überlassen, welche Schrift- und Hintergrundfarben er auf seinem Client-Rechner verwendet - in Abhängigkeit von den technischen Möglichkeiten seines Bildschirms und Druckers, den Lichtverhältnissen in seinem Zimmer, der Sehschärfe seiner Augen, seinen Gewohnheiten, dem Zusammenspiel mit anderen Bildschirmfenstern - kurz, so wie es für ihn am angenehmsten ist.

Wenn Sie als Autor trotzdem auf Ihren Web-Pages bestimmte Farben für bestimmte Zwecke einsetzen wollen, dann müssen Sie die folgenden Punkte beachten:

In HTML 2 gibt es keine Befehle für die Spezifikation von Farben, sondern nur allgemein für Hervorhebungen mit <em> und <strong>. In HTML 3.2 und 4 ist die Möglichkeit vorgesehen, Farben und andere graphische Effekte entweder im jedem Einzelfall mit Parametern in <body> und <font> oder wesentlich eleganter und allgemeiner mit Klassen und Style-Sheets zu vereinbaren. Diese Möglichkeiten werden freilich nicht von allen Web-Browser unterstützt. Im folgenden wird angegeben, wie Sie diese verschiedenen Möglichkeit so kombinieren sollen, dass Sie den gewünschten Effekt auf möglichst vielen Web-Browsern erreichen.

Die Farben werden in diesen Befehlen meist in der Form #rrggbb spezifiziert, wobei rr, gg und bb hexadezimale Zahlenangaben zwischen 00 (0) und FF (255) für den Rot-, Grün- und Blauanteil sind. Damit können theoretisch ca. 16 Millionen verschiedene Farben spezifiziert werden, praktisch sollten Sie sich jedoch auf die 216 Farben beschränken, die aus Kombinationen von 00, 33, 66, 99, CC und FF zusammengesetzt sind, oder überhaupt nur auf die aus 00 und FF zusammengesetzten Grundfarben. Beispiele (wobei die Sternchen je nach dem verwendeten Browser in den jeweiligen Farben erscheinen oder nicht):

#FFFFFF = weiß *****
#000000 = schwarz *****
#FF0000 = rot *****
#00FF00 = grün *****
#0000FF = blau *****
#FFFF00 = gelb *****
#FF00FF = magenta (lila) *****
#00FFFF = cyan (blaugrün) *****
#999999 = grau *****
#000066 = dunkelblau *****
#9999FF = hellblau *****
#660000 = dunkelrot *****
#FF9999 = rosa *****

In manchen Fällen können Farben auch durch bestimmte englische Wörter spezifiziert werden, z.B. white, black, red, blue, green.

Für die Realisierung gibt es zwei Möglichkeiten:

Farben mit <em> <strong> class <style>

Die beste und eleganteste Methode ist es, die Farb-Angaben mittels Klassen-Angaben und in Style-Sheets zu realsieren. Dabei muss man beachten, dass bei unvollständigen Angaben durch das "Cascading" von allgemeinen und speziellen Benutzer- und Autoren-Angaben unerwünschte Effekte wie "blau auf blau" entstehen können, und deshalb immer in jedem einzelnen Fall sowohl die Vorder- als auch die Hintergrundfarben angeben. Außerdem muss man die Hervorhebung durch Farben (mit class=) auch durch "normale" Hervorhebungen mit <em> <strong> etc. kombinieren, damit der gewünschte Effekt auch bei älteren Web-Browsern oder Monochrom-Geräten (z.B. Notebooks oder Palmtops) und beim Ausdrucken auf Schwarz-weiß-Druckern erreicht wird.

Beispiel:

Sie wollen erreichen, dass der Name Ihrer Firma immer in blauer Farbe und/oder fetter oder stark hervorgehobener Schrift erscheint. Als Kontrast dazu wählen Sie weiß für den Hintergrund, schwarz für den normalen Text und verschiedene Rottöne für Hypertext-Links.

In Ihrem HTML-File "enzian.html" geben Sie zu diesem Zweck die folgende Kombination von Befehlen an: 

<html>
<head>
<title>Enzian</title>
<link rev=made href="webmaster@www.enzian.com">
<link rel=stylesheet href="enzian.css" type="text/css">
</head>
<body>
<h1 class=enzian>Enzian</h1>
<p>
Wer
<strong class=enzian>Enzian</strong>
trinkt, wird schneller
<strong class=enzian>blau</strong>.
Dies wurde von
<a href="knieriem.html">namhaften Experten</a>
getestet ...
</body>
</html>
und im Style-Sheet-File "enzian.css" die folgenden Spezifikationen: 
 BODY { color: black; background: white }
 A:link    { color: #990000; background: white }
 A:visited { color: #660000; background: white }
 A:active  { color: #FF0000; background: white }
 .enzian { color: #0000FF; background: white; font-weight: bold }
Anmerkung: Theoretisch könnten Sie diese Style-Angaben direkt im HTML-File angeben, zwischen <style type="text/css"> und </style> innerhalb von <head>, anstelle des Style-Sheet-Link, aber manche nicht normgerechte Browser würden die Style-Angaben dann als Text am Bildschirm anzeigen statt sie zu interpretieren oder zu ignorieren.

Das Ergebnis wird dann so ähnlich wie die folgenden Zeilen aussehen:

Enzian

Wer Enzian trinkt, wird schneller blau. Dies wurde von namhaften Experten getestet ...

- - -

Wie Ihr Web-Browser dieses Beispiel tatsächlich darstellt, können Sie hier ausprobieren.

Farben mit <body> <em> <strong> <font>

Viele (aber nicht alle) Web-Browser unterstützen die Angabe von Farben in <body> und <font>.

In <body> sind sämtliche Farben für normalen Text, Hintergrund und Link-Texte anzugeben, und man sollte unbedingt immer alle fünf Farben gemeinsam spezifizieren, um unerwünschte Effekte beim Zusammenspiel zwischen den vom Autor definierten Farben und den vom Benutzer in seinem Client eingestellten Präferenzen zu vermeiden.

In <font> kann man aber nur die Text-Farbe angeben, und damit können unerwünschte Effekte wie z.B. blauer Text auf blauem Hintergrund durch ein ungüstiges Zusammentreffen von Autoren-definierten Farben und Benutzer-Präferenzen nicht ausgeschlossen werden. Es wird deshalb dringend empfohlen, den <font>-Befehl nicht zu verwenden, sondern entweder nur die generellen Farbwünsche im <body>-Befehl oder die Spezifikation von Farben für spezielle Elemente mit Klassen-Angaben und Style-Sheets.

Jedenfalls muss man <font>-Befehle immer mit "normalen" Hervorhebungen mittels <em> <strong> oder dergleichen kombinieren, damit der gewünschte Effekt auch bei älteren Web-Browsern oder Monochrom-Geräten und beim Ausdrucken auf Schwarz-weiß-Druckern erreicht wird.

Beispiel:

Sie wollen erreichen, dass der Name Ihrer Firma immer in blauer Farbe und/oder fetter oder stark hervorgehobener Schrift erscheint. Als Kontrast dazu wählen Sie weiß für den Hintergrund, schwarz für den normalen Text und verschiedene Rottöne für Hypertext-Links.

Wenn Sie dafür die alte Methode mit <body> und <font> verwenden wollen, dann geben Sie die folgende Kombination von HTML-Befehlen an: 

<html>
<head>
<title>Enzian</title>
<link rev=made href="webmaster@www.enzian.com">
</head>
<body text="#000000" bgcolor="#FFFFFF"
      link="#990000" vlink="#660000" alink="#FF0000" >
<h1><font color="#0000FF">Enzian</font></h1>
<p>
Wer
<strong><font color="#0000FF">Enzian</font></strong>
trinkt, wird schneller
<strong><font color="#0000FF">blau</font></strong>.
Dies wurde von
<a href="knieriem.html">namhaften Experten</a>
getestet ...
</body>
</html>

Besser wäre es aber, wie gesagt, nicht <font> sondern Style-Sheets zu verwenden.

Hier noch ein Beispiel dafür, wie Sie es nicht machen sollten:

- - - Die Eingabe von 

<font color="#999999">Grau</font>
ist in Goethes "Faust" die Theorie, doch
<font color="#00FF00">gr&uuml;n</font>
des Lebens
<font color="#FF9900">goldner</font>
Baum, und was man
<font color="#000000">schwarz</font>
auf
<font color="#FFFFFF">wei&szlig;</font>
besitzt, kann man getrost nach Hause tragen.
- - - bewirkt die Ausgabe von

Grau ist in Goethes "Faust" die Theorie, doch grün des Lebens goldner Baum, und was man schwarz auf weiß besitzt, kann man getrost nach Hause tragen.

und je nachdem, welchen Web-Browser Sie verwenden, sehen Sie hier entweder überhaupt keine Hervorhebung der Farbennamen, oder ein Teil dieser Wörter hebt sich nicht gut genug von der Hintergrundfarbe ab.

- - -

Anordnung (align)

Linksbündig, rechtsbündig, zentriert

Die Anordnung und Ausrichtung von Texten und Bildern in Absätzen, Überschriften und Tabellen kann mit Align-Hinweisen in den HTML-Befehlen <p>, <h1>, <td> usw. beeinflußt werden.

Die Align-Hinweise werden von manchen Web-Browsern befolgt und von anderen ignoriert.

Beispiele:

- - - Die Eingabe von 

<p align=left>
Linksb&uuml;ndig ist die normale Ausrichtung von Abs&auml;tzen.
<p align=right>
Hoffentlich geht das
<br>
mit rechten Dingen zu.
<p align=center>
Im Reich der<br>Mitte
<p>
- - - bewirkt eine Darstellung wie

Linksbündig ist die normale Ausrichtung von Absätzen.

Hoffentlich geht das
mit rechten Dingen zu.

Im Reich der
Mitte

- - -

In XHTML muss man die Parameterwerte in Quotes einschließen, also z.B. align="center" statt align=center schreiben.

Ein Bereich von mehreren Absätzen kann man mit dem Befehl <div> zusammengefaßt werden. So kann man z.B. mit einer Befehlsfolge wie 

<div align=center>
<p>
erster zentrierter Absatz
<p>
zweiter zentrierter Absatz
</div>
eine Folge von mehreren zentrierten Absätze erreichen.

Vorsicht!

Zentrierte und linksbündige Layouts sollen niemals vermischt werden:

In linksbündigen Layouts sucht das Auge des Lesers entlang des linken Randes nach allen wichtigen Elementen (Überschriften, Aufzählungen, Numerierungen u.dgl.).

In zentrierten Layouts sucht der Leser in der Mitte des Bildschirms nach den wichtigen Elementen.

Wenn zentrierte und linksbündige Überschriften oder Listen abwechseln, funktioniert das rasche Auffinden der wichtigen Elemente nicht mehr, der Überblick geht verloren, und das Layout wird als unübersichtlich empfunden.

Beispiel:

Chaos

ist schlecht lesbar.

Harmonie

ist gut lesbar.

- - -

Deshalb: entweder alle Überschriften zentriert, oder (besser) alle Überschriften linksbündig.

Umgekehrt ist es aber üblich und empfehlenswert, bestimmte "fremde Elemente" wie Titelseiten, Bilder, Tabellen oder mathematische Formeln durch Zentrierung deutlich vom laufenden Text abzuheben und damit die Übersichtlichkeit und Lesbarkeit des laufenden Textes zu vergrößern.

Beispiel:

- - - Die Eingabe von 

<p align=center>
<img src="austria.gif" alt="Oesterreich">
- - - bewirkt eine Darstellung wie

Oesterreich

- - -

Nicht <center> sondern <p align=center> oder <div align=center>

Manche, aber nicht alle Web-Browser erlauben als Alternative zum Befehlspaar
<p align=center> ... <p> bzw.
<div align=center> ... </div>
auch das Befehlspaar
<center> ... </center>
Dieses Befehlspaar sollen Sie aber nicht verwenden, weil dabei die logische Struktur des Textes völlig unklar wird: Die Web-Browser, die diesen Befehl verstehen, beginnen nämlich bei <center> und </center> einen neuen Absatz, die anderen Web-Browser aber nicht, weil sie den unbekannten Befehl einfach ignorieren!

Beispiel (frei nach Otto Schenk in der "Fledermaus"):

- - - Die Eingabe von 

Ich sagte:
<center>nichts</center>w&uuml;rdiger Herr Direktor!
- - - bewirkt auf den meisten Browsern eine Darstellung wie

Ich sagte:

nichts

würdiger Herr Direktor!

- - - aber auf anderen Browsern eventuell eine Darstellung wie

Ich sagte: nichtswürdiger Herr Direktor!

- - -

Unten, oben, neben Bildern

Bei Inline-Bildern kann mit Align-Hinweisen im Befehl <img> bzw. <object> bestimmt werden, wie der Text neben dem Bild positioniert werden soll:
align=top für oben,
align=bottom für unten,
align=middle für auf der halben Höhe.

Die Align-Hinweise werden von manchen Web-Browsern befolgt und von anderen ignoriert.

Beispiele:

- - - Die Eingabe von 

Luft . . .
<img src="small.jpg" alt="[ Bild ]" align=top>
 . . . Köpfe
- - - bewirkt eine Darstellung wie

Luft . . . [ Bild ] . . . Köpfe

- - - Die Eingabe von 

Wasser . . .
<img src="small.jpg" alt="[ Bild ]" align=middle>
 . . . Arme
- - - bewirkt eine Darstellung wie

Wasser . . . [ Bild ] . . . Arme

- - - Die Eingabe von 

Erde . . .
<img src="small.jpg" alt="[ Bild ]" align=bottom>
 . . . Beine
- - - bewirkt eine Darstellung wie

Erde . . . [ Bild ] . . . Beine

- - -

In XHTML muss man die Parameterwerte in Quotes einschließen, also z.B. align="top" statt align=top schreiben.

Seit HTML 3.2 ist auch die Möglichkeit vorgesehen, ein Bild nicht als Teil einer Textzeile darzustellen sondern so, dass der mehrzeilige Text neben dem Bild bzw. um das Bild herum läuft. Zu diesem Zweck wird im <img> bzw. <object> Befehl der Parameter
align=left bzw.
align=right
angegeben, und nach dem Text, der um das Bild herumlaufen soll, der Befehl
<br clear=all>
damit der nachfolgende Text wieder mit der normalen Textbreite unter dem Bild erscheint.

Beispiel:

- - - Die Eingabe von 

<p>
<img src="wwwlogo.gif" alt="" align=left>
World
<br>
Wide
<br>
Web
<br clear=all>
- - - bewirkt eine Darstellung wie

World
Wide
Web

- - -

Auf diese Weise kann man kann auch zwei Bilder mit einem dazwischen zentrierten Text kombinieren.

Beispiel:

- - - Die Eingabe von 

<p>
<img src="austria.gif" alt="" align=left>
<img src="austria.gif" alt="" align=right>
<p align=center>Urlaub in &Ouml;sterreich</p>
<br clear=all>
- - - bewirkt eine Darstellung wie

Urlaub in Österreich


- - -

Zu bedenken ist, dass nicht alle Web-Browser diese Möglichkeit unterstützen und der Text daher unter Umständen etwas anders positioniert oder erst nach den beiden Bildern erscheint.

Abstände

Horizontale Abstände

Wenn man bestimmte Abstände zwischen Wörtern oder eine bestimmte Ausrichtung von Wörtern untereinander erreichen will, empfiehlt sich die Verwendung von <table> oder von <pre>.

Bei manchen Browsern kann man größere Wortabstände auch mit der Entity &nbsp; oder mit unsichtbaren ("transparenten") Inline-Bildern erreichen, dies führt aber bei anderen Browsern zu völlig unbrauchbaren Ergebnissen und sollte deshalb nicht verwendet werden.

In manchen Fällen kann man anstelle von größeren Wortabständen auch einfache andere Mittel einsetzen wie . . . Punkte oder - - - Gedankenstriche.

Einrückungen

Viele Web-Browser stellen Definition-Listen und Blockquotes durch eingerückte Absätze dar, andere aber nicht.

Trotzdem sollte man immer, wenn ein untergeordneter Text zu einem übergeordneten Text "dazugehört", eine Definition-Liste verwenden, egal ob der Browser dafür Einrückungen oder eine andere, für den Client besser geeignete Darstellung verwendet.

Ebenso sollte man für Absätze, die sich vom normalen Text abheben sollen, immer Blockquotes verwenden, egal ob der Browser dafür Einrückungen oder eine andere, für den Client besser geeignete Darstellung verwendet.

In anderen Fällen kann man Einrückungen mit <pre> oder mit Tabellen erreichen.

Hier folgt ein Beispiel, wie man den Bildschirm bzw. Printout in zwei Spalten im Verhältnis des "Goldenen Schnitts" (38:62:100) aufteilen kann:

- - - Die Eingabe von 

<table border=0 width="100%">
<tr>
<td valign=top align=left width="38%">
<p><b>Goldener Schnitt:</b>
<td valign=top align=left width="62%">
<p>Der Goldene Schnitt ist die Aufteilung,
bei der sich der kleinere Teil zum gr&ouml;&szlig;eren
so wie der gr&ouml;&szlig;ere zur Gesamtbreite
verh&auml;lt, also
<p align=center>x : (1-x) = 1 : x
<p>Dieses Verh&auml;ltnis gilt als besonders &auml;sthetisch
und wird sowohl in der Kunst als auch in der Drucktechnik
oft eingesetzt.
<tr>
<td valign=top align=left width="38%">
<p>...
<td valign=top align=left width="62%">
<p>...
</table>
- - - bewirkt eine Darstellung wie

Goldener Schnitt:

Der Goldene Schnitt ist die Aufteilung, bei der sich der kleinere Teil zum größeren so wie der größere zur Gesamtbreite verhält, also

x : (1-x) = 1 : x

Dieses Verhältnis gilt als besonders ästhetisch und wird sowohl in der Kunst als auch in der Drucktechnik oft eingesetzt.

...

...

- - -

Wichtig ist dabei, dass die width-Angaben immer nur relativ zur Bildschirm- bzw. Fenstergröße (also in Prozenten) und niemals absolut (in Pixeln oder Zentimetern) angegeben werden.

Allerdings kann man sich nicht darauf verlassen, dass das angegebene Verhältnis tatsächlich in allen Fällen eingehalten wird. Wenn das Bildschirmfenster zu schmal ist, um die Texte in den angegebenen Spalten darzustellen, kann der Web-Browser die Spaltenbreiten entsprechend anpassen.

Wichtig ist im obigen Beispiel außerdem die Angabe der <p>-Befehle innerhalb jeder Tabellenzelle. Damit wird sichergestellt, dass der Text auch von älteren Web-Browsern richtig dargestellt wird.

Vertikale Abstände

Manche Browser erzeugen bei mehrfachen <p>- oder <br>-Befehlen zusätzliche Leerzeilen, bei anderen Browsern werden aber leere Zeilen und leere Absätze ignoriert und alle Absätze und Zeilen mit einheitlichen Abständen dargestellt.

Da auf Bildschirmen meist wesentlich weniger Zeilen sichtbar sind als auf einer Papierseite, würden größere vertikale Abstände die Übersichtlichkeit nicht (wie auf dem Papier) erhöhen sondern verringern. Falls mehrere Leerzeilen zufällig am unteren Rand des Bildschirmfensters erscheinen, sieht das so aus, als wäre das gesamte File (die gesamte Web-Page) bereits zu Ende, und der Leser wird eventuell gar nicht mehr weiterlesen.

Für die Trennung von Text-Abschnitten sollten deshalb nicht zusätzliche Leerzeilen sondern Trennlinien oder andere Elemente wie z.B. 

<p align=center> * * * <p>
verwendet werden.

Trennlinien (horizontal rule) <hr>

Mit <hr> kann man eine waagrechte Trennlinie in den Text einfügen. Vor und nach der Linie erfolgt ein Zeilenwechsel oder neuer Absatz.

In XHTML muss man <hr /> statt <hr> schreiben.

Numerierungen in Listen <ol>

Standardmäßig werden die Listenelemente in numerierten Listen mit den natürlichen Zahlen 1, 2, 3 ... numeriert. Bei den meisten Web-Browsern kann man die Numerierung durch die folgenden Parameter in den Befehlen <ol> und <li> beeinflussen:

<ol type=A> Numerierung mit Großbuchstaben A, B, C ...
<ol type=a> Numerierung mit Kleinbuchstaben a, b, c ...
<ol type=1> Numerierung mit Zahlen 1, 2, 3 ...
<ol type=I> Numerierung mit römischen Zahlen I, II, III, IV, V ...
<ol type=i> Numerierung mit kleinen römischen Zahlen i, ii, iii, iv, v ...

<ol start=n> Anfangswert der Numerierung

<li type=x value=n> spezieller Wert bei einem Listenelement

Diese Parameter werden von manchen Web-Browsern unterstützt und von den anderen ignoriert.

Beispiel:

- - - Die Eingabe von 

<p>
Das Jahr beginnt mit den Monaten
<ol type=1>
<li>J&auml;nner
<li>Februar
</ol>
und endet mit den Monaten
<ol type=1 start=11>
<li>November
<li>Dezember
</ol>
- - - bewirkt eine Darstellung wie

Das Jahr beginnt mit den Monaten

  1. Jänner
  2. Februar
und endet mit den Monaten
  1. November
  2. Dezember
- - -

Da diese Parameter nicht von allen Web-Browsern unterstützt werden, kann man sich nicht darauf verlassen, dass die Bezeichnungen so erscheinen, wie man sich gewünscht hat. Deshalb sind Formulierungen wie "siehe Punkt C" zu vermeiden (der Punkt könnte ja mit 3 numeriert erscheinen); für solche Verweise sollte man ohnehin besser Hypertext-Verweise und Sprungmarken verwenden. Wenn die Bezeichnung wichtig ist und sichergestellt werden soll, dass sie auf allen Web-Brwosern richtig erscheint, muss man deshalb Definitions-Listen mit expliziter Angabe der Bezeichnungen verwenden.

Beispiel:

- - - Statt 

<p>
Toto-Tips:
<ol type=1>
<li>erste Mannschaft gewinnt
<li>zweite Mannschaft gewinnt
<li type=A value=X>Spiel endet unentschieden
</ol>
- - - verwendet man besser 
<p>
Toto-Tips:
<dl compact>
<dt>1
<dd>erste Mannschaft gewinnt
<dt>2
<dd>zweite Mannschaft gewinnt
<dt>X
<dd>Spiel endet unentschieden
</dl>
- - - und erhält dann eine Darstellung wie

Toto-Tips:

1
erste Mannschaft gewinnt
2
zweite Mannschaft gewinnt
X
Spiel endet unentschieden

- - -

Frames <frameset> <frame> <noframes>

In HTML 4 ist vorgesehen, dass man anstelle von einfachen Web-Seiten mit dem normalen Aufbau von Head und Body, die wie gewohnt im Bildschirmfenster dargestellt werden, auch kompliziertere, mehrteilige Bildschirmstrukturen definieren kann, die als "Frames" (Rahmen) bezeichnet werden.

Frames werden von den meisten neueren Web-Browsern unterstützt, aber von vielen älteren Browser-Versionen noch nicht oder nur mit einem sehr unbequemen Benutzer-Interface. Auch die meisten Analyse-Tools und Suchmaschinen ignorieren die Frames und verwenden nur die in <noframes> angegebene Information.

Bei der Definition von Frames hat das HTML-File nicht den normalen Aufbau mit Head und Body sondern einen davon abweichenden Aufbau in der folgenden Form: 

<html>
<head>
     <title>Titel des Files</title>
     ...
</head>
<frameset ... >
     <frame src="xxx.html" name="xxx" >
     <frame src="yyy.html" name="yyy" >
     ...
<noframes>
     <body>
     ...
     Information im normalen HTML-Format
     oder zumindest Links auf xxx.html und yyy.html
     ...
     </body>
</noframes>
</frameset>
</html>
Im <frameset>-Befehl wird mit Parametern wie z.B. rows="20%,80%" oder cols="33%,33%,33%" angegeben, wieviel Platz die darin enthaltenen Frames übereinander bzw. nebeneinander bekommen sollen.

Innerhalb von <frameset> wird mittels <frame>-Befehlen und eventuellen weiteren <frameset>-Befehlen angegeben, welche Teil-Informationen wo innerhalb des aktuellen Bildschirmfensters oder in einem anderen Fenster dargestellt werden sollen.

Bei Hypertext-Sprüngen von einem Frame zu einer neuen Information in einem anderen Frame muss im <a href>-Befehl mit target= der Name des Ziel-Frame angegeben werden; bei target="_top" wird die neue Information im vollen Bildschirmfenster dargestellt.

Die Frameset- und Frame-Angaben werden von manchen Web-Browsern befolgt und von den anderen sowie von den meisten Suchmaschinen ignoriert.

Innerhalb von <noframes> muss deshalb die gleiche Information nochmals in normaler HTML-Schreibweise von <body> bis </body> angegeben werden - entweder die Summe der in den Frames enthaltenen Teilinformationen, oder zumindest eine Start-Seite oder ein Inhaltsverzeichnis mit Hypertext-Verweisen auf die restlichen Teilinformationen. Hier nur eine lakonische Feststellung wie "Ihr Browser versteht keine Frame-Befehle" einzufügen, wäre nicht zielführend.

Eine typische Anwendung von Frames ist z.B. eine Zweiteilung des Bildschirmes in ein kleines Fenster mit einer Knopf-Leiste oder einem Menü für die Auswahl der Informationen und ein großes Fenster für das Lesen der ausgewählten Informationen. Für solche Effekte wäre freilich die Verwendung von Navigationshilfen mit <link> günstiger, die wird aber leider auch nicht von allen Web-Browsern voll unterstützt.

Generell ist von der Verwendung von Frames eher abzuraten.

Warum Sie Frames vermeiden sollten

Das World-Wide Web vedankt seinen Siegeszug vor allem seiner auch für ungeübte Benutzer leichten und einfachen Bedienbarkeit. Die meisten Benutzer kommen mit nur 4 Funktionen aus, die bei manchen Programmen - einer alten Konvention folgend - einfach den 4 Pfeiltasten zugeordnet sind:
  1. Vorblättern in der Information
    (Tiefpfeil oder Page-Down oder Mausklick im Scrollbar),
  2. Zurückblättern in der Information
    (Hochpfeil oder Page-Up oder Mausklick im Scrollbar),
  3. Sprung zu einer neuen Information
    (Rechtspfeil oder Return-Taste oder Mausklick auf ein Link),
  4. Rückkehr zur alten Information
    (Linkspfeil oder Escape-Taste oder Mausklick auf Back).
Bei der Verwendung von Frames gilt dieses einfache und für die meisten Benutzer gewohnte Bedienungsprinzip nicht mehr, sondern die Navigation wird mehrdimesional und viel komplizierter. Statt des einfachen, eindimensionalen "Vor und Zurück" zwischen alter und neuer Information braucht der Benutzer bei Frames eine verwirrende Fülle von Möglichkeiten, in den verschiedenen Teilbereichen verschieden weit vor oder zurück zu gehen. Manche Web-Browser bieten dafür verschiedene Back-Buttons oder zusätzliche Pull-Down-Menüs an, die von den Benutzern freilich erst gefunden werden müssen.

Noch ärger wird die Verwirrung, wenn innerhalb eines Frame auf eine Information gesprungen wird, die wiederum aus mehreren Frames besteht, oder wenn die Information auf mehrere Fenster verteilt ist, die teilweise gar nicht mehr sichtbar (weil durch andere Fenster verdeckt) sind.

Außerdem verbraucht jedes neue Fenster zusätzliche Ressourcen am Client-Rechner, der dadurch unbrauchbar langsam werden oder sogar "abstürzen" kann. Andererseits ist innerhalb eines Bildschirmfensters meist nicht genügend Platz, um alle Teilinformationen nebeneinander lesen zu können. Das gleiche gilt für das Ausdrucken der Informationen auf Papier.

Es ist leider auch nur schwer möglich, eine über mehrere Frames verteilte Information später wiederzufinden. Ein Frameset, das aus n Frames besteht, müßte durch eine Kombination von (n+1) URLs beschrieben werden: ein URL für das Frameset und n URLs für die momentanen Inhalte der n Frames. Bookmarks, Browser-History und Suchhilfen bauen aber immer nur auf einzelnen URLs auf. Man erhält deshalb entwender nur den Urzustand des Frameset (bevor der Inhalt durch "Weiterklicken" verändert wurde) oder nur den Inhalt, der in einem einzigen Frame enthalten war (ohne das Frameset und ohne den Inhalt der anderen Frames).

Auf Grund dieser Schwierigkeiten ist für das Konzept und die Gestaltung von Frames durch den Autor ein erfahrener Fachmann für benutzerfreundliche Mensch-Maschinen-Interfaces notwendig, und für die Verwendung der Frames durch die Benutzer eine entsprechende genauere Anwenderschulung.

Navigationshilfen <link>

Der Link-Befehl dient allgemein dazu, die Zusammengehörigkeit oder Verbindung (englisch link) einer Web-Page mit anderen Web-Pages oder Personen oder Informationen anzugeben. Diese Informationen werden vom Web-Browser dann in einer geeigneten Form verwendet, z.B. innerhalb von Befehlen wie "sende eine E-Mail an den Autor", oder in eigenen Buttons oder Menüs außerhalb des normalen Textfeldes (Body) angezeigt - so ähnlich wie bei Frames. Die Link-Befehle müssen deshalb stets im Head des HTML-Files stehen.

Innerhalb des Linkbefehls ist entweder mit rel= anzugeben, zu welcher anderen Information man von der aktuellen Web-Seite springen kann, oder es ist mit rev= anzugeben, von welcher anderen Information oder von welcher Person die aktuelle Web-Seite stammt. Mit href= ist der URL dieser anderen Information anzugeben.

Die wichtigsten Link-Befehle sind:

<link rev=made href="mailto:user@host.domain">
für die Mail-Adresse des Autors

<link rel=stylesheet href="URL" type="...">
für ein Stylesheet-File

<link rel=... href="URL">
für verschiedene Navigataionshilfen

Mit rel= ist hier ein Schlüsselwort anzugeben, das die Art der Information angibt, auf die verwiesen wird. Die wichtigsten Möglichkeiten sind: up oder top, begin oder first, previous, next, end oder last, toc (table of contents), index, glossary, author, copyright, help.

<link rel=print href="URL" type="...">
für ein druckfertiges File dieser Information, mit Angabe des Filetyps (z.B. PostScript oder RTF), damit das entsprechende Druck- oder Viewer-Programm vom Web-Browser gestartet werden kann (Helper-Application, Plugin-Programm).

Andere Navigationshilfen wie die Rückkehr zur Start-Seite des Benutzers ("home") oder zu der vom Benutzer zuletzt gelesenen Web-Seite ("back") hängen nicht vom Autor einer Web-Seite sondern nur vom Leser ab und werden daher nur programmintern im Web-Browser gespeichert und von diesem entsprechend angezeigt. Es gibt keinen HTML-Befehl, der den Back- oder Home-Button des Browsers simuliert, und selbst wenn man eine programmtechnische Lösung dafür findet, würde man damit den History-Mechanismus des Web-Browsers und die für den Benutzer gewohnte Bedeutung der Back- und Forward- und Home-Buttons in seinem Web-Browser durcheinanderbringen und den Benutzer damit verwirren statt ihm zu helfen.

Beispiel:

Das 3. Kapitel (File hein3.html) der HTML-Einführung enthält die folgenden Link-Befehle: 

<link rev=made      href="mailto:partl@mail.boku.ac.at">
<link rel=toc       href="hein.html#inhalt">
<link rel=index     href="hein.html#index">
<link rel=glossary  href="heinwas.html">
<link rel=copyright href="hein.html#copy">
<link rel=help      href="hein.html#vorwort">
<link rel=up        href="hein.html">
<link rel=previous  href="hein2.html">
<link rel=next      href="hein4.html">
<link rel=print     href="htmleinf.ps" type="application/postscript">
- - -

Manche Browser zeigen diese Links als zusätzliche Buttons oder Menü-Punkte neben den normalen Browser-Befehlen an, andere Browser zeigen sie in eigenen kleinen Fenstern oder Button-Leisten oder Pull-Down-Menüs über oder neben dem Text-Fenster an.

Gegenüber Frames oder sonstigen Hypertext-Links, die vom Autor einer jeden Web-Seite separat und daher meist verschieden definiert werden, haben die mit diesen genormten Link-Befehlen definierten Verbindungen und Navigationshilfen den großen Vorteil, dass sie vom jeweiligen Web-Browser für alle vom Benutzer gelesenen Web-Seiten immer im gleichen, für den Benutzer gewohnten Format dargestellt werden und die Navigation im World-Wide Web für den Benutzer dadurch wesentlich übersichtlicher und einfacher wird.

Leider werden die Link-Navigationshilfen von vielen Web-Browsen derzeit noch nicht voll unterstützt. Trotzdem solle man diese Angaben schon jetzt vorsorglich in allen HTML-Files einfügen, denn sie können nicht schaden und sind auch für menschliche Leser der HTML-Files ("view source") nützlich.

Schlagwörter für Suchhilfen eintragen <meta>

Die meisten Suchmaschinen können automatisch aus den im HTML-File vorkommenden Wörtern und aus der mit den HTML-Befehlen angegebenen Bedeutung dieser Wörter (z.B. Überschriften) "erraten", welche Wörter die Stichworte sind, die den Inhalt der Web-Page richtig wiedergeben.

Manchmal kann es aber sinnvoll sein, zusätzlich aussagekräftige, aber eventuell so nicht im Text vorkommende Schlagwörter oder eine über den <title> hinausgehende Beschreibung der Web-Page anzugeben.

Dafür (und für noch ein paar andere spezielle Zwecke, die mit dem Protokoll HTTP zusammenhängen) kann man innerhalb des <head> einen oder mehrere <meta>-Befehle angeben:

<meta name=keywords content="xxx, yyy, zzz">
für die Angabe von Schlagworten

<meta name=description content="...">
für die Angabe einer kurzen Beschreibung

Ob innerhalb des "content" Entities oder nur reine ASCII-Zeichen richtig funktionieren, und überhaupt, welche Angaben in welchem Format von einer Suchmaschine verarbeitet werden, wird meist in der Online-Hilfe der jeweiligen Suchmaschine angegeben.

Die meisten Suchmaschinen sind intelligent genug programmiert, dass sie eine unrichtige oder übertriebene Beschlagwortung, mit der manche Autoren eine höhere Priorität für ihre Web-Page bei der Suche erschleichen wollen, erkennen und entsprechend "bestrafen". Auch hier gilt also: "Lügen haben kurze Beine".

Vorwort . Wegweiser . Inhaltsverzeichnis . Wörterbuch . Referenzen . Copyright
© Hubert Partl, BOKU Wien