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 DM. Bitte
überweisen Sie den Betrag innerhalb ...</p>
</body>
</html>
|
|
|
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
  und benannt maskiert
. "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>
|
|
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>
|
|
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: