Textausrichtung im HTML
HTML-Webseite und die Textausrichtung
Standardmäßig wird der mit Elementen der Textstrukturierung ausgezeichnete Text linksbündig ausgerichtet. Das heißt, dass ein Text, der sich über mehrere Zeilen erstreckt, an einem imaginären Rand auf der linken Seite ausgerichtet ist und eine vertikale Linie bildet. Um dies zu beeinflussen, gibt es das Attribut <align> und vier Parameter, um den Text, wie in den meisten Textverarbeitungsprogrammen auch, linksbündig, rechtsbündig, zentriert oder als Blocksatz auszurichten. Die entsprechenden Parameter lauten:
| Wert | Erklärung |
|---|---|
left |
Richtet den Absatz am linken Seitenrand aus. |
right |
Richtet den Absatz am rechten Seitenrand aus. |
center |
Zentriert den Absatz in der Seitenmitte. |
justify |
Richtet den Absatz als Blocksatz aus. |
Nun können wir das bereits bekannte <p>-Element mit einer neuen Ausrichtung versehen. Ein Code-Beispiel, das alle vier Absatzausrichtungen darstellt, und die entsprechende Darstellung im Safari in der Abbildung.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Beispiel für Textausrichtung -->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-utf-8" />
<title>Textausrichtung im HTML</title>
</head>
<body>
<p align="left">
Dieser Absatz ist am linken Seitenrand ausgerichtet.
</p>
<p align="right">
Dieser Absatz ist am rechten Seitenrand ausgerichtet.
</p>
<p align="center">
Dieser Absatz ist zentriert.
</p>
<p align="justify">
Dieser Absatz wurde mit Hilfe des align-Attributs als Blocksatz ausgerichtet und wurde mit Absicht mit einem längeren Text versehen, um den Parameter justify auch beispielhaft darstellen zu können. Dieser Absatz wurde mit Hilfe des align-Attributs als Blocksatz ausgerichtet und wurde mit Absicht mit einem längeren Text versehen, um den Parameter justify auch beispielhaft darstellen zu können.
</p>
</body>
</html>
Bei der Verwendung des Parameters
<justify> ist eine wichtige Tatsache zu berücksichtigen: Damit der Absatz auch wirklich als Blocksatz ausgerichtet wird, muss er sich mindestens über zwei Zeilen erstrecken. Ansonsten wäre zum Parameter <left> kein optischer Unterschied erkennbar. Berücksichtigen Sie dies, falls Sie der Meinung sind, dass der Absatz vom Browser nicht korrekt ausgerichtet dargestellt wird.
Abbildung zeigt eine Textausrichtung im Safari.
Die Ausrichtung ganzer Elemente-Blöcke
Eine etwas flexiblere Methode der Ausrichtung von Textelementen ist die Verwendung von <div>-Kennungen.
<div> enthält verschiedene Attribute. Unter diesen Attributen befindet sich auch das align-Attribut (in HTML 4.0 verworfen), das Elemente nach links oder rechts ausrichtet, sie zentriert, kurz, sie genauso ausrichtet wie Überschriften und Paragraphen auch.
-
<div>braucht nur ein einziges Mal eingesetzt zu werden,aligndagegen muss wiederholt werden; -
<div>kann zur Ausrichtung beliebiger Elemente eingesetzt werden (Überschriften, Absätze, Zitate, Abbildungen, Tabellen usw.); dasalign-Attribut ist nur für eine begrenzte Anzahl von Kennungen einsetzbar.
Um einen Block von HTML-Code auszurichten, umgeben Sie den Code mit den eröffnenden und abschließenden <div>-Kennungen und fügen das align-Attribut in die eröffnende Kennung ein. So wie auch bei anderen Kennungen kann align die Werte left, right oder center haben.
<h1 align=left>
Serendipity Products
</h1>
<div align=right>
<h2>
<a href="who.html">Who We Are</a>
</h2>
<h2>
<a href="products.html">What We Do</a>
</h2>
<h2>
<a href="contacts.html">How To Reach Us</a>
</h2>
</div>
Der gesamte HTML-Code zwischen den <div>-Kennungen wird entsprechend den Werten des align-Attributs ausgerichtet werden. Wenn individuelle align-Attribute innerhalb von Überschriften oder Absätzen im Rahmen von <div> auftreten, werden diese Werte die globalen <div>-Einstellungen außer Kraft setzen.
Beachten Sie, dass <div> selbst kein Absatztyp ist. Sie müssen innerhalb der eröffnenden und abschließenden <div>-Kennungen immer noch reguläre Element-Kennungen (<p>, <h1>, <ul>, <blockquote> usw.) einsetzen.
Zusätzlich zu <div> gibt es auch noch <center>, eine Netscape-Erweiterung, die kein Bestandteil von HTML 2.0 oder 3.2 ist (und wahrscheinlich auch nicht von zukünftigen HTML-Versionen sein wird). Die <center>-Kennung verhält sich genauso wie <div align=center>, indem sie den gesamten HTML-Inhalt innerhalb der eröffnenden und abschließenden Kennungen zentriert. Sie setzen die <center>-Kennung vor den Text, den Sie zentrieren wollen, und dann die </center>-Kennung als Abschluss, so wie hier:
<center>
<h1>
Northridge Paints, Inc.
</h1>
<p>
We don't just paint the town red.
</p>
</center>
Um der Konsistenz Willen sind Sie wahrscheinlich besser beraten, wenn Sie <div> und align verwenden, um eine zentrierte Ausrichtung zu erreichen.