html-php.de

Text in der HTML anzeigen

Jetzt wollen wir mal loslegen, und den ersten Text auf die Homepage bringen.
Dazu benötigen wir die beiden wichtigsten Elemente <p> </p> (p = paragraph = Absatz) um einen Absatz zu definieren und <br> (br = break = Umbruch) um einen Zeilenumbruch zu erzwingen.

Um einen Textabschnitt zu definieren, benutzen Sie das Element <p> </p>. Zwischen jedem Abschnitt wird eine Zeile freigelassen.

Mit dem Element <br> kann ein Zeilenumbruch erzwunden werden. Am Bildschirmrand wird der Text automatisch umgebrochen, wenn Sie aber einen Text haben, der zusammengehört, wie z.B. Version 7.1, kann das mit dem Element <nobr> </nobr> der Zeilenumbruch verhindert werden.
Erwähnen muss ich aber, das der <nobr> </nobr>-Element nicht zum HTML-Standard gehört, und möglichst vermieden werden sollte. Stattdessen kann man einen automatischen Zeilenumbruch vermeiden, wenn man statt ein Leerzeichen das geschützte Leerzeichen   nimmt.

Bereiche formatieren

Sie können mit Hilfe von div mehrere Elemente gleichzeitg formatieren, oder mit span einen Bereich im Textfluss umformatieren. Im folgenden Beispiel wird der gesamte Bereich eine Textfarbe von blau erhalten, und zentiert ausgegeben.

  <div style="text-align: center; color: blue;">
    <h1>Blaue Überschrift</h1>
    <p>Dieser Abschnitt zentriert und die Textfarbe ist blau
     nur dieses Wort ist <span style="color: red;">rot</span>.</p>
  </div>

Text ausrichten

Mit text-align können sie den Text rechtsbündig, zentriert, linksbündig oder im Blocksatz angezeigt werden. Des weiteren besteht die Möglichkeit, den Text mit vertical-align kann der Text vertikal ausgerichtet werden:

  <p style="text-align: center">Dieser Textabschnitt ist Zentriert</p>
  <p style="text-align: right">Dieser Textabschnitt ist rechts ausgerichtet</p>
  <p style="text-align: left">Dieser Textabschnitt ist links ausgerichtet.</p>
  <p>
  <span style="font-size: 24px; vertical-align: top">Beispiel </span>
  <span style="font-size: 10px; vertical-align: top">mit </span>
  <span style="font-size: 16px; vertical-align: top">top </span>
  </p>
  <p>
  <span style="font-size: 24px; vertical-align: middle">Beispiel </span>
  <span style="font-size: 10px; vertical-align: middle">mit </span>
  <span style="font-size: 16px; vertical-align: middle">middle </span>
  </p>
  <p>
  <span style="font-size: 24px; vertical-align: bottom">Beispiel </span>
  <span style="font-size: 10px; vertical-align: bottom">mit </span>
  <span style="font-size: 16px; vertical-align: bottom">bottom </span>
  </p>
  <p>
  <span style="font-size: 24px; vertical-align: baseline">Beispiel </span>
  <span style="font-size: 10px; vertical-align: baseline">mit </span>
  <span style="font-size: 16px; vertical-align: baseline">baseline </span>
  </p>
  
Das ganze sieht so aus
 

Logische Textauszeichnung

In HTML gibt es allerdings nicht nur die genannten physischen Elemente, sondern auch logische Elemente zur Auszeichnung von Text. Diese Elemente sind Inline-Elemente, dass heißt, diese müssen innerhalb von anderen Block-Elemente stehen (zumindest bei der Variante strict), wie z.B. <p> oder <div>. Folgende Elemente sind möglich:

Der Browser entscheidet, wie der Text innerhalb dieser Elemente besonders hervorgehoben wird. Mit CSS-Stylesheets können Sie die Formatierung allerdings selbst bestimmen. Hier ein Beispiel mit <code>.

<p>Um Text Fett darzustellen, benutzen Sie das HTML-Element 
  <code>&lt;b&gt;...&lt;/b&gt;</code>.</p>

Wort- und Zeilenabstand

Um den Zeilenabstand zu definieren, notieren Sie line-height, den Wortabstand definieren Sie mit word-spacing, und den Buchstabenabstand mit letter-spacing.

  <p style="letter-spacing:0.1em; 
    word-spacing:0.3em; line-height:1.3em;">
  Normaler Text mit einem Wortabstand von 0.3em, 
    Buchstabenabstand von 0.1em, 
    und einen Zeilenabstand von 1.3em</p>
  <p style="letter-spacing:0.3em; 
    word-spacing:0.6em; line-height:1.6em;">
  Normaler Text mit einem Wortabstand von 0.6em, 
    Buchstabenabstand von 0.3em, 
    und einen Zeilenabstand von 1.6em</p>

Sonstiges

Normalerweise werden Absätze sichtbar voneinander getrennt. Mit display:inline können Sie dieses verhindern:

  <h2 style="display:inline;">Inline-Überschrift</h2>
  <p style="display:inline;"> und weiter geht es in der gleiche Zeile</p>

Sie können auch Text mit Hilfe von <bdo dir="rtl">...</bdo> von rechts nach links ausrichten (rtl=rechts nach links / ltr=links nach rechts):

  <p>Den nachfolgenden Text müssen Sie von rechts nach links lesen<br>
  <bdo dir="rtl">Diesen Text liest man von links nach rechts</bdo></p>