0 4230

Absätze und Zeilenumbrüche in HTML

Heute erkläre ich Euch, wie man in HTML einen Zeilenumbruch oder einen Absatz erstellen kann. Dies funktioniert ganz einfach mit dem <br>-Tag. Setzen Sie an der Stelle des gewünschten Umbruches ein br-Tag.

Beispielcode:


<pre><html>
 <body>
  Hier werden wir<br>
  wild<br>
  Zeilenumbrüche<br>
  einfügen, um zu demonstrieren,<br>
  wie das funktioniert<br>
 </body>
</html></pre>

Beachten Sie bitte, daß in XHTML das br Tag folgendermaßen aussehen muß: <br />. In XHTML muss bei einem Tag, das kein abschließendes Gegenstück hat, ein Schrägstrich vor die schließende eckige Klammer eingefügt werden. Es gibt eine weitere Möglichkeit einen Absatz zu erzwingen: Das Paragraph-Tag. Zwischen p-Tags können Sie komplette Absätze einfügen. Testen Sie das p-Tag aus.

Beispielcode:


<pre><html>
 <body>
  <p>Hier werden wir</p>
  <p>wild</p>
  <p>Zeilenumbrüche</p>
  <p>einfügen, um zu demonstrieren,</p>
  <p>wie das funktioniert</p>
 </body>
</html></pre>

Die dritte Möglichkeit einen Zeilenumbruch zu erzwingen ist das hr-Tag (horizontal-ruler).
Sie können damit eine horizontale Trennlinie erstellen.

Beispielcode:


<pre><html>
 <body>
  Hier werden wir<hr>
  wild<hr>
  Zeilenumbrüche<hr>
  einfügen, um zu demonstrieren,<hr>
  wie das funktioniert<hr>
 </body>
</html></pre>

Um festzulegen, wie breit diese horizontale Linie sein soll können Sie das width Element dem hr-Tag hinzufügen:

Beispielcode:


<pre><html>
 <body>
  Hier werden wir<hr width="100%">
  wild<hr>
  Zeilenumbrüche<hr width="80%">
  einfügen, um zu demonstrieren,<hr width="50%">
  wie das funktioniert<hr width="20%">
 </body>
</html></pre>

Sie können der Linie auch einen Farbwert geben:

Beispielcode:


<pre><html>
 <body>
  Hier werden wir<hr width="100%" color="ff0000" >
  wild<hr>
  Zeilenumbrüche<hr width="80%" color="00ff00" >
  einfügen, um zu demonstrieren,<hr width="50%" color="0000ff" >
  wie das funktioniert<hr width="20%">
 </body>
</html></pre>

Wenn Sie sich das Beispiel ansehen, werden Sie schnell feststellen, daß die horizontalen Linien mittig ausgerichtet sind. Wir benötigen also noch das align-Element.

Beispielcode:


<pre><html>
 <body>
  Hier werden wir<hr width="100%" color="ff0000" align="left">
  wild<hr>
  Zeilenumbrüche<hr width="80%" color="00ff00" align="left">
  einfügen, um zu demonstrieren,<hr width="50%" color="0000ff" align="left">
  wie das funktioniert<hr width="20%" align="left">
 </body>
</html></pre>

Auch bei dem hr-Tag gilt es zu beachten, daß bei XHTML der Schrägstrich vor die schließende eckige Klammer zu setzen ist.

Author: Andreas Lang

Sphinx-Flashdesign.de

Andreas Lang konzentriert sich seit zwei Jahrzehnten auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.