Absatzformatierung

Ausrichtung

Alle bisher erzeugten Absätze waren linksbündig ausgerichtet. Es geht aber auch anders.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p>Dieser Absatz ist linksbündig ausgerichtet. Dieser Absatz ist linksbündig ausgerichtet. Dieser Absatz ist linksbündig ausgerichtet. Dieser Absatz ist linksbündig ausgerichtet. Dieser Absatz ist linksbündig ausgerichtet.</p>
<p align="right">Dieser Absatz ist rechtsbündig ausgerichtet. Dieser Absatz ist rechtsbündig ausgerichtet. Dieser Absatz ist rechtsbündig ausgerichtet. Dieser Absatz ist rechtsbündig ausgerichtet. Dieser Absatz ist rechtsbündig ausgerichtet.</p>
<p align="center">Dieser Absatz ist mittig ausgerichtet. Dieser Absatz ist mittig ausgerichtet. Dieser Absatz ist mittig ausgerichtet. Dieser Absatz ist mittig ausgerichtet. Dieser Absatz ist mittig ausgerichtet.</p>
<p align="justify">Dieser Absatz ist im Blocksatz ausgerichtet. Dieser Absatz ist im Blocksatz ausgerichtet. Dieser Absatz ist im Blocksatz ausgerichtet. Dieser Absatz ist im Blocksatz ausgerichtet. Dieser Absatz ist im Blocksatz ausgerichtet.</p>
</body>
</html>

Wie du im Beispiel sehen kannst, kann das <p>Tag um eine Angabe zur Ausrichtung erweitert werden. Wenn es nur <p> lautet ist der Absatz linksbündig ausgerichtet.

Mit <p align="right"> kannst du den Absatz rechtsbündig ausrichten.

Mit <p align="center"> kannst du den Absatz mittig ausrichten.

Mit <p align="justify"> kannst du den Absatz im Blocksatz ausrichten. Es soll aber Browser geben, die den Blocksatz nicht beherrschen.

Außerdem kann das <p>Tag Universalattribute enthalten. Dann muß der Absatz aber mit </p> abgeschlossen werden. Diese Universalattribute können nicht nur zum Formatieren von Absätzen verwendet werden, sondern für alle Texteinheiten, wie z.B. Textblöcke, Tabellen oder den gesamten Body. Möglich sind class, dir, id, lang, style und tiltle. Die Attribute class, dir, id und lang sind für Anfänger nicht geeignet oder werden nicht benötigt.

Das Universalattribut "title" wurde auf der Seite "Zeichenformatierung 2" im Absatz "Der Tooltip" schon besprochen.

Mit dem Universalattribut "style" kann man sehr viel machen. Fangen wir mit der Ausrichtung des Absatzes an.

<p style="margin-top: 100px"> erzeugt einen Absatz, der nach oben zum vorigen Absatz einen Abstand von 100 Pixeln hat.

<p style="margin-top: 10%"> erzeugt einen Absatz, der nach oben zum vorigen Absatz einen Abstand von 10% hat. Die 10% beziehen sich auf die Höhe des übergeordneten Elements, in diesem Fall also auf die Größe des Fensters in dem die Seite geöffnet wurde.

<p style="margin-top: 1.6cm"> erzeugt einen Absatz, der nach oben zum vorigen Absatz einen Abstand von 1,6 cm hat. Das Dezimaltrennzeichen ist in HTML immer der Punkt und nicht, wie in Deutschland üblich, das Komma.

Erlaubte Einheiten sind:

KürzelEinheitentspricht welcher Größe?
pxPixelAbhängig vom Bildschirm und der Auflösung des Betrachters.
ptPunkt≈ 0,35278 mm≈ 0,035278 cm 1/72 in1/12 pc 
pcPica≈ 4,2333 mm≈ 0,42333 cm1/6 in  12 pt
mmMillimeter 0,1 cm0,03937 in 0,23622 pc2,8346 pt
cmZentimeter10 mm 0,3937 in 2,3622 pc28,346 pt
inInch, Zoll25,4 mm2,54 cm  6 pc72 pt
emelementeigene Schrifthöhe z.B. 3 em bedeutet die 3-fache Höhe der Schriftart.
exelementeigene Höhe des Buchstabens x z.B. 0.3 ex bedeutet die 0.3-fache Höhe des Buchstabens "x".
%ProzentBezogen auf das übergeordnete Element, z.B. das Fenster.
Bei Dezimalbrüchen (Kommazahlen) ist das Dezimaltrennzeichen immer der Punkt! Nicht, wie in Deutschland üblich, das Komma.

<p style="margin-bottom: 10px"> erzeugt einen Absatz, der nach unten zum nächsten Absatz einen Abstand von 10 Pixeln hat. Achtung! Die verschiedenen Browser reagieren unterschiedlich, wenn nach einem Absatz, der nach unten einen festgelegten Abstand hat, ein Absatz kommt, der nach oben einen festgelegten Abstand hat und sich die beiden Angaben unterscheiden! Natürlich kann man auch für margin-bottom alle erlauben Einheiten verwenden.

<p style="margin-left: 50px"> erzeugt einen Absatz, der nach links einen Abstand von 50 Pixeln hat.

<p style="margin-right: 50%"> erzeugt einen Absatz, der nach rechts einen Abstand von 50% hat.

<p style="text-indent:10ex"> erzeugt einen Absatz, dessen erste Zeile um die zehnfache Breite des Buchstaben "x" eingerückt ist. Die folgenden Zeilen beginnen wieder links. Diese Methode wird in Büchern gerne verwendet.

<p style="line-height: 250%"> erzeugt einen Absatz, in dem der Zeilenabstand 250% beträgt. Das erkennt man natürlich nur wenn der Absatz mehrere Zeilen lang ist. Deshalb folgt hier noch etwas Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.

Ich denke diese Möglichkeiten reichen fürs erste. Vielleicht denkst du jetzt, das alles braucht man nur um Texte informativ und übersichtlich zu machen? Dann liegst du ganz falsch. Durch Einrücken und Positionieren von Absätzen kann man zusammen mit passender Schriftformatierung ein tolles Design zaubern. Was du im folgenden weißen Feld siehst, wurde so gemacht.

Dies ist ein einfaches Beispiel

für Gestaltungsmöglichkeiten

durch Zeichenformatierung

+

Absatzausrichtung

Weiter geht's auf der Seite "Absatzformatierung - Hintergrund".


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: