Absätze

Absatz erzeugen

<html>
<head>
<meta http-equiv="content-type"content="text/html; charset=iso-8859-1">
</head>
<body>
Dies ist der erste Absatz. Dies ist der erste Absatz. Dies ist der erste Absatz. Dies ist der erste Absatz. Dies ist der erste Absatz. Dies ist der erste Absatz. Dies ist der erste Absatz. Dies ist der erste Absatz. Dies ist der erste Absatz. Dies ist der erste Absatz. Dies ist der erste Absatz.

Dies ist der zweite Absatz. Dies ist der zweite Absatz. Dies ist der zweite Absatz. Dies ist der zweite Absatz. Dies ist der zweite Absatz. Dies ist der zweite Absatz. Dies ist der zweite Absatz. Dies ist der zweite Absatz. Dies ist der zweite Absatz. Dies ist der zweite Absatz. Dies ist der zweite Absatz.

Dies ist der dritte Absatz. Dies ist der dritte Absatz. Dies ist der dritte Absatz. Dies ist der dritte Absatz. Dies ist der dritte Absatz. Dies ist der dritte Absatz. Dies ist der dritte Absatz. Dies ist der dritte Absatz. Dies ist der dritte Absatz.
</body>
</html>

Wie bereits erwähnt ignoriert der Browser die Zeilenumbrüche und führenden Leerzeichen im Quelltext. Auch eine Leerzeile wird ignoriert. Der Quelltext, der links gezeigt wird, bewirkt im Browser also die Ausgabe die du daruter sehen kannst.

Natürlich ist es auch in HTML möglich Absätze zu machen. Allerdings gehört das nicht zum Text, sondern zur Beschreibung des Textes (zur Erinnerung: HTML ist eine Textbeschreibungssprache). Es muss also in Tags formuliert werden. Das Tag zum Erzeugen eines neuen Absatzes lautet <p>. Am Absatzende steht dann </p>. Dabei stellt das Absatztag eine Besonderheit dar. Bei diesem Tag war es in älteren HTML-Versionen erlaubt das Endtag weg zu lassen. Man kann also schreiben:

 Hier ist Text. 
 <p> Hier ist ein neuer Absatz. 

Das funktioniert nach wie vor in allen Browsern. Nach den neuen Regeln sollte man aber schreiben:

 <p>Hier ist Text.</p> 
 <p> Hier ist ein neuer Absatz.</p> ;

Zeilenumbruch erzeugen

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p>Dies ist der erste Absatz. Dies ist der erste Absatz. Dies ist der erste Ab<br>satz. Dies ist der erste Absatz.</p>
<p>Dies ist der zweite Absatz. Dies ist der zweite Absatz.</p></body>
</html>

Normalerweise bricht der Browser den Text so um, dass er gerade ins Fenster passt. Dabei bricht er immer bei den Leerzeichen um, also zwischen 2 Wörtern. Es ist aber auch möglich einen Zeilenumbruch zu erzwingen, ohne gleich einen neuen Absatz beginnen zu müssen. Dazu gibt es den Tag <br> (Ich vermute, dass das Kürzel für break row steht. break row =engl. - breche Zeile).

Zeilenumbruch verhindern

<html>
<head>
<meta http-equiv="content-type"content="text/html; charset=iso-8859-1">
</head>
<body>
<p>Die gekaufte Ware kostet 123,40&nbsp;DM. Bitte
überweisen Sie den Betrag innerhalb&#160;...</p>
</body>
</html>

Geschütztes Leerzeichen

Eine Möglichkeit einen Zeilenumbruch zu verhindern hast du im Prinzip schon kennen gelernt. Es gibt nämlich ein Sonderzeichen, das "erzwungenes Leerzeichen" heißt. Dieser Name beschreibt das Zeichen eigentlich nicht gut. Es handelt sich um ein Leerzeichen ohne Zeilenumbruch. Es gibt viele Fälle, wo so was sinnvoll ist. Es ist zum Beispiel nicht schön, wenn bei einem Preis der Zeilenumbruch ausgerechnet zwischen der Zahl und dem Währungssymbol ist. Das gleiche gilt für alle Größenangaben und der dazugehörigen Einheit. Der Text "Die gekaufte Ware kostet 123,40 DM. Bitte überweisen Sie den Betrag innerhalb…" kann überall dort umgebrochen werden, wo ein Leerzeichen ist, wenn die Zeichenfolge bis zum nächsten Leerzeichen nicht mehr passt. Das kann durch das genannte Sonderzeichen verhindert werden. Der Code dafür ist numerisch ausgedrückt &#160; und benannt maskiert &nbsp;. "nbsp" steht dabei für "non-breaking space" (engl. kein- Umbruch- Leerzeichen).

Wie man im Beispiel sieht, hätte "123,40" noch in die erste Zeile gepasst. Das "DM." hätte in der nächsten Zeile gestanden wenn zwischen Betrag und Einheit ein normales Leerzeichen wäre. Ich habe zur Demonstration an dieser Stelle ein benannnt maskiertes geschütztes Leerzeichen eingefügt. Zwischen "innerhalb" und den 3 Punkten habe ich ein numerisch codiertes geschütztes Leerzeichen gesetzt. Wenn auf diese Weise ein Ausdruck entsteht, der länger ist, als das Fenster breit ist, erscheint am unteren Fensterrand eine waagerechte Scrollbar und der Text ist nur teilweise sichtbar.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
Meine erste <nobr>HTML-Seite. Mit Hilfe von
Netzwerkverbindungen koennen Sie Ihren
Computer mit anderen Computern oder einem
privaten Netzwerk verbinden. Wenn Sie Ihren
Computer mit einem Netzwerk oder einem
anderen Computer verbinden, stehen Ihnen
folgende Moeglichkeiten zur Verfuegung: Sie
koennen auf Dateien oder Ordner auf anderen
Computern zugreifen. Sie koennen anderen
Personen den Zugriff auf Ihre eigenen Dateien
und Ordner ermoeglichen. Sie koennen Drucker
und anderen Geraete verwenden, die an andere
Computer angeschlossen sind. Sie koennen
anderen Personen den Zugriff auf alle Drucker
oder Geraete ermoeglichen, die an Ihren
eigenen Computer angeschlossen sind. Es gibt
viele unterschiedliche Methoden zum Herstellen
einer Verbindung zwischen Ihrem Computer und
einem anderen Computer oder einem Netzwerk.
In</nobr> Windows
</body>
</html>

Bereich ohne Zeilenumbruch

Wenn man längere Texte ohne Zeilenumbruch erzeugen will, z.B. wenn man Quelltexte zeigen will bei denen der Zeilenumbruch nur an bestimmten Stellen erfolgen darf, ist diese Methode natürlich nicht geeignet. Dazu gibt es ein eigenes Tag. Es lautet <nobr> (no break oder no break row - engl. kein Umbruch oder kein Zeilenumbruch). Der Bereich muss, wie immer, mit </nobr> beendet werden.

Wie man im Beispiel sieht, wird der Text zwischen <nobr> und </nobr> nicht umgebrochen obwohl er nicht ins Fenster passt.


Zeilenumbruch erlauben

Wenn man Texte mit schmalen Spaltenbreiten oder sehr langen Wörtern macht, kann es passieren, dass ein Wort nicht in eine Zeile passt oder, wenn man mit Blocksatz arbeitet, dass es zu unschönen Lücken im Text kommt. Das kann man verhindern indem man im Wort einen Zeilenumbruch erlaubt. Allerdings wird dabei kein Bindestrich eingefügt. Das geht mit dem Tag <wbr>. "wbr" steht dabei für word break (engl. - Wort Umbruch). Unten siehst du ein Beispiel einmal ohne erlaubtem Zeilenumbruch und einmal mit.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p align="justify">Dieser Absatz ist im Blocksatz ausgerichtet und enthält das Wort
"Nordmissisippidampfturbinenschiffahrtskapitänsmützenträger".</p>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p align="justify">Dieser Absatz ist im Blocksatz ausgerichtet und enthält das Wort
"Nord<wbr>missisippi<wbr>dampfturbinen<wbr>schiffahrts<wbr>kapitäns<wbr>mützen<wbr>träger".
</p>
</body>
</html>

Trennlinien

Wenn du Textabschnitte die nicht zusammen gehören von einander abgrenzen willst, kannst du eine Trennlinie einfügen. Das machst du am einfachsten mit <hr>.

Quelltext:
<html>
<head>
<meta http-equiv="content-type"content="text/html;charset=iso-8859-1">
</head>
<body>
Hier steht Text.<hr>
Dieser Text hat mit dem oberen nix zu tun.
</body>
</html>
Beispiel:
Hier steht Text.
Dieser Text hat mit dem oberen nix zu tun.

Die Linie erzeugt einen Absatzwechsel. Es spielt keine Rolle, ob <hr> am Ende des alten Absatzes, am Anfang des neuen Absatzes oder einfach im Text steht. So eine Trennlinie wird normalerweise in 3D, das heißt schattiert, dargestellt. Das kannst du mit noshade verhindern (shade - engl.: Schatten). Das Attribut noshade wird von Opera nicht interpretiert. Normalerweise geht die Linie immer über den ganzen, zur Verfügung stehenden Platz. Mit width= kannst du die Breite der Linie bestimmen. Nach dem Istgleich-Zeichen musst du eine Breite in Pixel oder in Prozent angeben. Die Prozentangabe bezieht sich auf den zur Verfügung stehen den Platz. Normalerweise ist die Linie 2 Punkt dick. Mit size= kannst du eine andere Dicke fest legen. Wenn die Linie nicht über die ganze Breite geht, kannst du sie mit align="left" oder align="right" links- bzw. rechtsbündig ausrichten. Mit color= kannst du die Farbe der Linie festlegen. Diese Angabe gehört aber nicht zum HTML-Standard und wird nur vom IE ab Version 3.0 interpretiert.

Quelltext: Beispiel:
<hr>
<hr noshade>
<hr width="40%">
<hr width="100" align="left">
<hr width="80%" align="right" size="7">
<hr size="7" noshade>
<hr size="1">
<hr size="1" noshade color="#FF0000">
<hr size="1" color="#00FF00">
<hr size="5" noshade color="#0000FF">
<hr size="10" color="#FF00FF">

Das <hr>Tag kann außerdem Universalattribute enthalten. Was das ist, erfährst du im nächsten Kapitel.

Weiter geht's mit der Seite "Absatzformatierung"


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