edition W3C.de

HTML 4.01-Spezifikation

Deutsche Übersetzung

Diese Version:
http://www.edition-w3.de/TR/1999/REC-html401-19991224
Aktuelle Version:
http://www.edition-w3c.de/TR/html4
Übersetzer:
Christine Kühnel (Übersetzung, fachliche Kommentierung) <kuehnel@screenexa.net>
Stefan Mintert (Fachlektorat und fachliche Kommentierung) <www.mintert.com/stefan/mail/>
Stefan Schumacher (Übersetzung, fachliche Kommentierung) <sts@schumacher-netz.de>

Bei diesem Dokument handelt es sich um eine Übersetzung eines W3C-Textes. Dieser Text ist urheberrechtlich geschützt; bitte beachten Sie die nachfolgenden Hinweise des Originaldokuments. Die Rechte an der Übersetzung liegen bei den Übersetzern und dem Verlag Addison-Wesley. Die Übersetzung hat keine durch das W3C legitimierte, normative Wirkung. Das einzige maßgebliche Dokument ist das englische Original.

Bitte senden Sie Fehler und Korrekturen zur deutschen Fassung an die Übersetzer.

Kommentare der Übersetzer, die als solche gekennzeichnet sind, unterliegen dem Urheberrecht der Übersetzer. Sie sind nicht Bestandteil des Ursprungsdokuments.

Diese Veröffentlichung ist eine Vorveröffentlichung. Kein Teil dieses Textes darf kopiert werden. Alle Rechte vorbehalten. Nach Abschluss der Arbeit wird das endgültige Dokument unter der oben angegebenen Adresse veröffentlicht. Die jetzige Veröffentlichung während der laufenden Arbeit dient zur Information von Interessierten und zur Prüfung durch die Fachöffentlichkeit. Sollten Sie Fehler finden oder Verbesserungsvorschläge haben, schicken Sie diese bitte per Mail an die Übersetzer.
Folgende Teile liegen noch in Englisch vor und müssen noch in deutscher Fassung generiert werden: (a) Gesamtinhaltsverzeichnis (b) Index


15 Ausrichtung, Schriftarten und horizontale Linien

Inhaltsverzeichnis

Dieser Abschnitt der Spezifikation erörtert einige HTML-Elemente und -Attribute, die für die optische Formatierung von Elementen verwendet werden können. Viele von ihnen sind missbilligt.

15.1 Formatierung

15.1.1 Hintergrundfarbe

Attributdefinitionen

bgcolor = color [CI]
Missbilligt. Dieses Attribut weist dem Dokumentrumpf oder Tabellenzellen eine Hintergrundfarbe zu.

Dieses Attribut weist der Zeichenfläche des Dokumentrumpfes (das BODY-Element) oder Tabellen (die Elemente TABLE, TR, TH und TD) die Hintergrundfarbe zu. Für das Element BODY können zusätzliche Attribute zur Angabe der Textfarbe verwendet werden.

Dieses Attribut wird zu Gunsten der Stylesheets, die Angaben zur Farbe des Hintergrunds machen, missbilligt.

15.1.2 Ausrichtung

Es ist möglich, Blockelemente (Tabellen, Bilder, Objekte, Absätze usw.) mit Hilfe des Attributs align auf der Zeichenfläche auszurichten. Auch wenn dieses Attribut vielen HTML-Elementen zugewiesen werden kann, unterscheiden sich die möglichen Werte von Element zu Element. Hier erörtern wir nur die Bedeutung des align-Attributs in Bezug auf Text.

Attributdefinitionen

align = left|center|right|justify [CI]
Missbilligt. Dieses Attribut gibt die horizontale Ausrichtung des Elements in Bezug auf den umgebenden Kontext an. Mögliche Werte:
  • left: Textzeilen werden links ausgerichtet.
  • center: Textzeilen werden zentriert.
  • right: Textzeilen werden rechts ausgerichtet.
  • justify: Textzeilen werden an beiden Seiten ausgerichtet.

Die Voreinstellung hängt von der Textflussrichtung ab. Für Text, der von links nach rechts verläuft, ist die Voreinstellung align=left, während für von rechts nach links verlaufenden Text die Voreinstellung align=right ist.

MISSBILLIGTES BEISPIEL:
Dieses Beispiel zentriert die Überschrift auf der Zeichenfläche.

<H1 align="center"> Wie Holz geschnitzt wird </H1>

Mit CSS, zum Beispiel, kann der gleiche Effekt wie folgt erzielt werden:

<HEAD>
 <TITLE>Wie Holz geschnitzt wird</TITLE>
 <STYLE type="text/css">
  H1 { text-align: center}
 </STYLE>
<BODY>
 <H1> Wie Holz geschnitzt wird </H1>

Beachten Sie, dass dies alle H1-Deklarationen ausrichten würde. Sie können den Geltungsbereich der Formatinformation durch Angabe des Attributs class im Element reduzieren:

<HEAD>
 <TITLE>Wie Holz geschnitzt wird</TITLE>
 <STYLE type="text/css">
  H1.wood {text-align: center}
 </STYLE>
<BODY>
 <H1 class="wood"> Wie Holz geschnitzt wird </H1>

Anmerkung der Übersetzer:

class ist natürlich nur eine Möglichkeit, den Geltungsbereich einzuschränken; id wäre zum Beispiel eine andere. Stylesheets bieten noch weitaus mehr Möglichkeiten. Mehr dazu finden in Kapitel 5 der ebenfalls in diesem Buch in deutscher Übersetzung zu findenden Spezifikation der »Cascading Style Sheets, level 2«.

MISSBILLIGTES BEISPIEL:
Um einen Absatz mit dem HTML-Attribut align rechts auf der Zeichenfläche auszurichten, ziehen Sie dies in Betracht:

<P align="right">...viel Text in einem Absatz...

Dasselbe würde mit CSS so aussehen:

<HEAD>
 <TITLE>Wie Holz geschnitzt wird</TITLE>
 <STYLE type="text/css">
  P.mypar {text-align: right}
 </STYLE>
<BODY>
 <P class="mypar">...viel Text in einem Absatz...

MISSBILLIGTES BEISPIEL:
Um mehrere Absätze rechts auszurichten, fassen Sie diese mit dem DIV-Element zusammen:

<DIV align="right">
 <P>...Text im ersten Absatz...
 <P>...Text im zweiten Absatz...
 <P>...Text im dritten Absatz...
</DIV>

In CSS wird die Eigenschaft zur Textausrichtung vom Elternelement vererbt, weshalb Sie Folgendes verwenden können:

<HEAD>
 <TITLE>Wie Holz geschnitzt wird</TITLE>
 <STYLE type="text/css">
  DIV.mypars {text-align: right}
 </STYLE>
<BODY>
 <DIV class="mypars">
  <P>...Text im ersten Absatz...
  <P>...Text im zweiten Absatz...
  <P>...Text im dritten Absatz...
 </DIV>

Um das gesamte Dokument mit CSS zu zentrieren:

<HEAD>
 <TITLE>Wie Holz geschnitzt wird</TITLE>
 <STYLE type="text/css">
  BODY {text-align: center}
 </STYLE>
<BODY>
 ...Der BODY ist zentriert...
</BODY>

Das Element CENTER ist äquivalent zur Angabe des Elements DIV mit dem auf »center« gesetzten Attribut align. Das Element CENTER ist missbilligt.

15.1.3 Umflossene Objekte

Bilder und Objekte können direkt im Textfluss erscheinen oder zu einem Rand der Seite fließen und damit zeitweise die Ränder des Texts verändern, der auf beiden Seiten das Objekt umfließen kann.

Ein Objekt fließen lassen 

Das Attribut align für Objekte, Bilder, Tabellen, Frames usw. veranlasst das Objekt zum linken oder rechten Rand hin zu fließen. Umflossene Objekte beginnen im Allgemeinen mit einer neuen Zeile. Dieses Attribut verwendet die folgenden Werte:

Anmerkung der Übersetzer:

Mit »Frames« ist hier das Element IFRAME gemeint. Nur dafür kann das align-Attribut gesetzt werden, denn nur dafür kann eine Ausrichtung Sinn machen.

MISSBILLIGTES BEISPIEL:
Das folgende Beispiel zeigt, wie ein IMG-Element am aktuellen linken Rand der Zeichenfläche ausgerichtet wird.

<IMG align="left" src="http://foo.com/animage.gif" alt="my boat">

Einige Ausrichtungsattribute gestatten auch den Wert center, der kein Fließen verursacht, aber das Objekt innerhalb der aktuellen Ränder ausrichtet. Für P und DIV jedenfalls bewirkt der Wert center, dass der Inhalt des Elements zentriert wird.

Text um ein Objekt fließen lassen  

Ein weiteres Attribut, definiert für das Element BR, kontrolliert den Textfluss um das umflossene Objekt herum.

Attributdefinitionen

clear = none|left|right|all [CI]
Missbilligt. Gibt an, an welcher Stelle in einem visuellen Browser die nächste Zeile nach einem von diesem Element verursachten Zeilenumbruch erscheinen soll. Dieses Attribut berücksichtigt umflossene Objekte (Bilder, Tabellen usw.). Mögliche Werte:
  • none: Die nächste Zeile beginnt normal. Das ist die Voreinstellung.
  • left: Die nächste Zeile wird an der naheliegendsten Zeile unter irgendeinem umflossenen Objekt am linken Rand beginnen.
  • right: Die nächste Zeile wird an der naheliegendsten Zeile unter irgendeinem umflossenen Objekt am rechten Rand beginnen.
  • all: Die nächste Zeile wird an der naheliegendsten Zeile unter irgendeinem umflossenen Objekt an beiden Rändern beginnen.

Stellen Sie sich das folgende visuelle Szenario vor, in dem der Text an der rechten Seite eines Bildes fließt, bis eine Zeile durch ein BR umgebrochen wird:

*********  -------
|       |  -------
| image |  --<BR>
|       |
*********

Wird dem Attribut clear der Wert none zugewiesen, wird die auf BR folgende Zeile direkt unter dem Attribut auf seiner rechten Seite beginnen:

*********  -------
|       |  -------
| image |  --<BR>
|       |  ------
*********

MISSBILLIGTES BEISPIEL:
Wird dem Attribut clear der Wert left oder all zugewiesen, wird die nächste Zeile wie folgt erscheinen:

*********  -------
|       |  -------
| image |  --<BR clear="left">
|       |  
*********
-----------------

Mit Stylesheets können Sie festlegen, dass alle Zeilenumbrüche für Objekte (Bilder, Tabellen usw.), die gegen den linken Rand fließen, auf diese Weise verfahren. Mit CSS können Sie das auf folgende Weise erreichen:

<STYLE type="text/css">
BR { clear: left }
</STYLE>

Um dieses Verhalten für eine bestimmte Instanz des Elements BR anzugeben, könnenn sie die Stilinformation und das Attribut id kombinieren:

<HEAD>
...
<STYLE type="text/css">
BR#mybr { clear: left }
</STYLE>
</HEAD>
<BODY>
<P>...
*********  -------
|       |  -------
| table |  --<BR id="mybr">
|       |  
*********
-----------------
...
</BODY>

15.2 Schriftarten

Die folgenden HTML-Elemente geben Informationen zur Schriftart an. Auch wenn sie nicht alle missbilligt sind, wird von ihrer Verwendung abgeraten; stattdessen sollten Stylesheets verwendet werden.

15.2.1 Elemente zur Angabe des Schriftstils: die Elemente TT, I, B, BIG, SMALL, STRIKE, S und U

<!ENTITY % fontstyle
 "TT | I | B | BIG | SMALL">
<!ELEMENT (%fontstyle;|%phrase;) - - (%inline;)*>
<!ATTLIST (%fontstyle;|%phrase;)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Start-Tag: erforderlich, End-Tag: erforderlich

An anderer Stelle definierte Attribute

Die Darstellung von Schriftstil-Elementen ist abhängig vom Benutzerprogramm. Das Folgende ist nur eine informelle Beschreibung.

TT: Darstellung als Teletype oder Monospace.
I: Darstellung als kursiver Text.
B: Darstellung als fettgedruckter Text.
BIG: Darstellung in großer Schriftart.
SMALL: Darstellung in kleiner Schriftart.
STRIKE und S: Missbilligt. Darstellung als durchgestrichener Text.
U: Missbilligt. Darstellung als unterstrichener Text.

Der folgende Satz zeigt einige Textarten:

<P><b>fett</b>,
<i>kursiv</i>, <b><i>fett kursiv</i></b>, <tt>Teletype</tt> und
<big>großer</big> und <small>kleiner</small> Text.

Diese Worte könnten wie folgt dargestellt werden:

Ein Beispiel für die Darstellung verschiedener Schriftstile

Anmerkung der Übersetzer:

Die Verwendung der Elemente I, B und TT erübrigt sich in den weitaus meisten Einsatzfällen nicht erst, seit Stylesheets zur Verfügung stehen. Das eigentliche Anliegen, das Autoren zum Beispiel dann verfolgen, wenn sie B einsetzen, ist bei näherer Betrachtung nicht, eine Textpassage »fett« darzustellen, sondern sie deutlich zu betonen. Fettschrift ist lediglich das Mittel, mit dem die Betonung erreicht werden soll. Dafür bietet HTML jedoch das für den genannten Zweck deutlich besser geeignete Element STRONG an. STRONG gibt im Gegensatz zu B eine Information über die Bedeutung der so ausgezeichneten Passage (starke Betonung), nicht nur über ihre visuelle Darstellung. Bedeutungsinformation kann auch von nicht visuellen Benutzerprogrammen dazu genutzt werden, eine passende Präsentation zu finden, während »fett« auf die visuelle Darstellung beschränkt bleibt.

Ganz analog verhält es sich mit I und TT, für die in der Mehrzahl der im Web zu sehenden Anwendungsfälle, deren Autoren besser EM und KBD verwendet hätten. Leider unterstützen eine Reihe von HTML-Editoren die Verbreitung dieser »Unsitte«, indem sie B per Mausklick anbieten, STRONG aber in den Tiefen ihrer Menüs verstecken.

Die gängigen visuellen Browser wählen bereits ohne Nutzung von Stylesheets zur visuellen Kennzeichnung von STRONG, EM und KBD genau die Schriftstile, die mit B, I und TT erreicht werden.

Ein kleines Beispiel soll das verdeutlichen:

<p><kbd>- - * * - - * * - -</kbd></p>
<dl>
</dt>Gedanken zum <strong>Nachdenken</strong>:</dt>
<dd>
<p>Leicht finden wir Freunde, die uns helfen; 
schwer verdienen wir uns jene, die unsere Hilfe 
brauchen.</p>
<p><em>Antoine de Saint-Exup&eacute;ry</em></p>
</dd>
</dl>
<p><tt>- - * * - - * * - -</tt></p>
<dl>
</dt>Gedanken zum <b>Nachdenken</b>:</dt>
<dd>
<p>Leicht finden wir Freunde, die uns helfen; 
schwer verdienen wir uns jene, die unsere Hilfe 
brauchen.</p>
<p><i>Antoine de Saint-Exup&eacute;ry</i></p>
</dd>
</dl>

Hier die Darstellung im Mozilla-Browser:

identische Darstellung obigen Codes

Stylesheets können sehr viel mehr Schrifteffekte erzeugen. Das folgende Beispiel gibt einen blauen, kursiven Text in einem Absatz mit Hilfe von CSS an:

<HEAD>
<STYLE type="text/css">
P#mypar {font-style: italic; color: blue}
</STYLE>
</HEAD>
<P id="mypar">...viel blauer kursiver Text...

Schriftformat-Elemente müssen richtig verschachtelt sein. Die Darstellung von verschachtelten Schriftformat-Elementen ist abhängig vom Benutzerprogramm.

15.2.2 Schriftart verändernde Elemente: FONT und BASEFONT

FONT und BASEFONT werden missbilligt.

Die formale Definition finden Sie in der Transitional DTD.

Attributdefinitionen

size  = cdata [CN]
Missbilligt. Dieses Attribut weist der Schriftart die Größe zu. Mögliche Werte:
  • Eine ganze Zahl zwischen 1 und 7. Diese weist der Schriftart eine feste Größe zu, deren Darstellung vom Benutzerprogramm abhängt. Nicht alle Benutzerprogramme können eventuell alle sieben Größen darstellen.
  • Ein relativer Zuwachs der Schriftgröße. Der Wert +1 bedeutet eine Nummer größer, der Wert -3 bedeutet drei Nummern kleiner. Alle Größen beziehen sich auf die Skala von 1 bis 7.
color = color [CI]
Missbilligt. Dieses Attribut weist dem Text die Farbe zu.
face = cdata [CI]
Missbilligt. Dieses Attribut definiert eine durch Kommata getrennte Liste mit Schriftartnamen, die das Benutzerprogramm in Reihenfolge der Vorgabe suchen soll.

An anderer Stelle definierte Attribute

Das Element FONT ändert die Schriftgröße und die Farbe für den Text in seinem Inhalt.

Das Element BASEFONT weist die Grundschriftgröße zu (unter Verwendung des Attributs size). Änderungen der Schriftgröße, die mit FONT erreicht werden, sind relativ zu der Grundschriftgröße, die von BASEFONT zugewiesen wurde. Wird BASEFONT nicht verwendet, ist die voreingestellte Grundschriftgröße 3.

MISSBILLIGTES BEISPIEL:
Das folgende Beispiel wird die Unterschiede zwischen den sieben Schriftgrößen zeigen, die mit FONT verfügbar sind:

<P><font size=1>size=1</font>
<font size=2>size=2</font>
<font size=3>size=3</font>
<font size=4>size=4</font>
<font size=5>size=5</font>
<font size=6>size=6</font>
<font size=7>size=7</font>

Dies könnte so dargestellt werden:

Example of rendering of various font sizes

Das folgende Beispiel zeigt, welche Auswirkungen es hat, wenn die Grundschriftgröße 3 mit relativen Schriftgrößen verändert wird:

Example of rendering of various font sizes with a basefont

Die Grundschriftgröße gilt nicht für Überschriften, außer wenn sie mit Hilfe des FONT-Elements mit einer relativen Schriftgrößenänderung manipuliert werden.

15.3 Linien: das Element HR

<!ELEMENT HR - O EMPTY -- horizontal rule -->
<!ATTLIST HR
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Start-Tag: erforderlich, End-Tag: nicht gestattet

Attributdefinitionen

align = left|center|right [CI]
Missbilligt. Dieses Attribut gibt die horizontale Ausrichtung der Linie in Bezug auf den umgebenden Kontext an. Mögliche Werte:
  • left: Die Linie wird links ausgerichtet.
  • center: Die Linie wird zentriert.
  • right: Die Linie wird rechts ausgerichtet.

Die Voreinstellung ist align=center.

noshade [CI]
Missbilligt. Wenn angegeben, fordert dieser Boolesche Wert, dass ein Benutzerprogramm die Linie in einer durchgehenden Farbe anzeigt, statt in der traditionellen zweifarbigen Form.
size = pixels [CI]
Missbilligt. Dieses Attribut gibt die Höhe der Linie an. Die Voreinstellung für diesen Wert hängt vom Benutzerprogramm ab.
width = length [CI]
Missbilligt. Dieses Attribut gibt die Breite der Linie an. Die Voreinstellung ist 100%, zum Beispiel erstreckt sich die Linie über die ganze Zeichenfläche.

An anderer Stelle definierte Attribute

Das Element HR erzeugt eine horizontale Linie zur Darstellung in visuellen Benutzerprogrammen.

Die Höhe des (vertikalen) Leerraums zwischen der Linie und dem umliegenden Inhalt sind abhängig vom Benutzerprogramm.

MISSBILLIGTES BEISPIEL:
Dieses Beispiel zentriert die Linie und begrenzt sie auf die Hälfte der zur Verfügung stehenden Breite zwischen den Rändern. Die obere Linie hat die voreingestellte Höhe, während den beiden unteren die Höhe 5 zugewiesen ist. Die unterste Linie sollte in einer durchgehenden Farbe ohne Schatteneffekt dargestellt werden:

<HR width="50%" align="center">
<HR size="5" width="50%" align="center">
<HR noshade size="5" width="50%" align="center">

Diese Linien könnten wie folgt dargestellt werden:

Beispieldarstellung mehrerer horizontaler Linien