Absatzformatierung

Textabsatz und Zeilenumbruch

Befehl für einen Absatz
<p>...</p>
Durch die Verwendung des<p>-Tags wird vom Browser vor und nach dem so umschlossenen Absatz eine Leerzeile eingefügt.

Befehl für einfachen Zeilenumbruch
<br />
Dieser Befehl hat keinen End-Befehl, er steht allein, da er nichts umschließt. In XHTML müssen alleinstehende Befehle einen "/"-Slash enthalten, der - um zu älteren Browsern kompatiblen Code zu generieren - mit einem Leerzeichen vom Befehl selbst getrennt wird.

Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title> Gedicht </title>
</head>
<body>
 <p>Immer wenn ich traurig bin</p>
 
<p>Immer wenn ich traurig bin, <br />
trink ich einen Korn. </p>
 
<p> Wenn ich dann noch traurig bin, <br />
trink ich noch n' Korn. </p>

<p> Wenn ich dann noch traurig bin, <br />
trink ich noch n' Korn. </p>
 
<p> Und wenn ich dann noch traurig bin, <br />
fang ich an von forn. </p>
 
<p>Heinz Erhart</p>

</body>
</html>
SO SIEHT'S AUS
 

Zeilenumbruch verhindern durch Eingabe von
<nobr>...</nobr>
Beispiel: <body> Sie erreichen mich unter <nobr> Tel.: 06557 587435 </nobr> von 12.00-12.10 h.</body>

Demo: Zauberlehrling auszeichnen
Aufgabe: 2 Absätze (+Umlaute)
  

 

 
Überschriften
Befehl für Überschriften: <h1>...</h1> bis <h6>...</h6>

  • <h1> = größte Überschrift
  • <h6> = kleinste Überschrift
  • Browser fügt automatisch Leerzeilen um die Überschrift
  • Größe der Überschrift (in Pixel) abhängig von der im System eingestellten Schriftgröße, d.h. gibt nur ein Größenverhältnis zum Fließtext wieder.

SO SIEHT'S AUS

Demo: Zauberlehrling auszeichnen
Aufgabe: 4 Absätze (oder Hausarbeit)

 
Bereiche definieren
Befehl, um Absätze oder Textbereiche auszuzeichnen, ohne z.B. automatisierte Leerzeilen einzufügen:
<div>...</div> (division)

SO SIEHT'S AUS
 
Attributarten in HTML-Tags
  • Attribut = erweitert den <befehl> um zusätzliche Spezifikationen
  • Besteht im allgemeinen aus Attribut und Attributswert:
    align="right"
    Attribut: align
    Attributswert: right
    Der Attributswert wird dem Attribut über ein = zugewiesen und steht in "".
  • Das Attribut wird innerhalb der spitzen Klammern hinter den Befehl geschrieben, durch ein Leerzeichen vom Befehl getrennt:
    <p align="right">
  • Das Attribut taucht nur im Startbefehl, nicht im Endbefehl auf:
    <p align="right">...</p>
  • Ein Befehl kann um mehrere Attribute erweitert werden. Die Attribute werden durch Leerzeichen voneinander getrennt. Die Reihenfolge hat keine Auswirkung auf die Darstellung:
    <p align="right" class="text">...</p>
     

Absatzausrichtung
Das Attribut align (=Ausrichtung) gibt an, wie der nachfolgende Text ausgerichtet werden soll. Mögliche Werte sind:

  • left (linksbündig)
  • center (zentriert)
  • right (rechtsbündig)
  • justify (Blocksatz)

Beispiel: <p align="center">zentrierter Text</p>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title> Gedicht </title>
</head>
<body>
 <p align="center">Immer wenn ich traurig bin</p>
 
<p align="right">Immer wenn ich traurig bin, <br />
trink ich einen Korn. </p>
 
<p> Wenn ich dann noch traurig bin, <br />
trink ich noch n' Korn. </p>

<p align="right"> Wenn ich dann noch traurig bin, <br / >
trink ich noch n' Korn. </p>
 
<p> Und wenn ich dann noch traurig bin, <br />
fang ich an von forn. </p>
 
<p align="center">Heinz Erhart</p>

</body>
</html>

SO SIEHT'S AUS

Demo: Zauberlehrling oder 2 Absätze oder 4 Absätze auszeichnen