Aug 2009

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:


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

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:


<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>

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

Beispielcode:


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

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

Beispielcode:


<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>

Sie können der Linie auch einen Farbwert geben:

Beispielcode:


<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>

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:


<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>

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

Share and Enjoy: Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.