15 Ausrichtung,
Schriftarten und horizontale Linien
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
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.
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.
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.
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:
- left: Richtet das Objekt am aktuellen linken Rand
aus. Nachfolgender Text fließt entlang der rechten Seite des
Objekts.
- right: Richtet das Objekt am aktuellen rechten
Rand aus. Nachfolgender Text fließt entlang der linken Seite
des Objekts.
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.
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>
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.
Start-Tag: erforderlich, End-Tag:
erforderlich
An anderer Stelle definierte Attribute
- id, class (dokumentweite
Identifikatoren)
- lang (Sprachcode), dir (Leserichtung)
- title (Elementtitel)
- style (inzeilige
Formatierungsinformation)
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown onkeyup (eingebettete
Ereignisse)
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:
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é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éry</i></p>
</dd>
</dl>
Hier die Darstellung im Mozilla-Browser:
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.
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:
Das folgende Beispiel zeigt, welche Auswirkungen es hat, wenn
die Grundschriftgröße 3 mit relativen
Schriftgrößen verändert wird:
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
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
- id, class (dokumentweite
Identifikatoren)
- lang (Sprachcode), dir (Leserichtung)
- title (Elementtitel)
- style (inzeilige
Formatierungsinformation)
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (eingebettete
Ereignisse)
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:
