Wenn man einfachen Fließtext in einem HTML-Dokument verwendet, formatiert der Browser diesen Text nach bestimmten Regeln. Dabei werden Leerzeichen und Zeilenumbrüche anders behandelt als erwartet. Der Grund für dieses dynamische Layout liegt darin, dass die Benutzer einer Webseite unterschiedliche Bildschirmauflösungen, Monitor- oder Fenstergrößen nutzen und der Browser die Darstellung optimal an diese Breite anpasst.
Kopiere den folgenden Text in den HTML-Editor.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Zauberlehrling - Goethe</title> <meta name="author" content="Petra"> <meta name="editor" content="html-editor phase 5"> </head> <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"> Der Zauberlehrling Hat der alte Hexenmeister Sich doch einmal wegbegeben! Und nun sollen seine Geister Auch nach meinem Willen leben. Seine Wort und Werke Merkt ich und den Brauch, Und mit Geistesstärke Tu ich Wunder auch. Walle! Walle! Manche Strecke, Dass, zum Zwecke, Wasser fließe Und mit reichem, vollem Schwalle Zu dem Bade sich ergieße. </body> </html>
Betrachtet man das Ergebnis im Browser, so stellt man fest, dass alle Zeilenumbrüche und Absätze ignoriert werden. Damit diese auch im Browser dargestellt werden, müssen entsprechende HTML-Tags eingefügt werden.
<br> | Der Tag <br> erzeigt einen Zeilenumbruch . Die Zeile darunter wird direkt darunter mit dem aktuellen Zeilenabstand dargestellt. Dieser Tab besitzt keinen Ende-Tag. |
|---|---|
<p>…</p> | Mit dem Paragraph -Tag fügt man einen Absatz ein. Dadurch wird vor und nach einem Absatz ein größerer Abstand erzeugt. |
Erweitere das HTML-Dokument mit Hilfe der beiden Tags, so dass der eingegebene Text im HTML-Dokument auf die gleiche Weise im Browser dargestellt wird.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Zauberlehrling - Goethe</title> <meta name="author" content="Petra"> <meta name="editor" content="html-editor phase 5"> </head> <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"> <p>Der Zauberlehrling</p> <p>Hat der alte Hexenmeister<br> Sich doch einmal wegbegeben!<br> Und nun sollen seine Geister<br> Auch nach meinem Willen leben.<br> Seine Wort und Werke <br> Merkt ich und den Brauch,<br> Und mit Geistesstärke<br> Tu ich Wunder auch.</p> <p>Walle! Walle!<br> Manche Strecke,<br> Dass, zum Zwecke,<br> Wasser fließe <br> Und mit reichem, vollem Schwalle<br> Zu dem Bade sich ergieße.</p> </body> </html>
Der Text innerhalb eines Absatzes wird standardmäßig linksbündig ausgerichtet. Man kann jedoch einen Text auch linksbündig , zentriert , rechtsbündig oder als Blocksatz ausrichten. Dazu wir im Tag <p> das Attribut allign verwendet.
Zauberlehrling.html!