Zurück || Weiter Index Startseite
HTML Einführung: Einfache Formatierungen
Der Gebrauch von Formatierungsanweisungen

Verweise

In diesem Kapitel finden Sie Informationen über:

  1. Textausrichtung
  2. Überschriften
  3. Textattribute
  4. Zeilenumbruch und Absatz

Allgemeines

Bis jetzt können wir nur reinen Text mit Sonderzeichen darstellen. Da ein HTML-Browser (wie bereits angedeutet) einen automatischen Zeilenumbruch durchführt, führt das Einfügen von Leerzeilen nicht automatisch zu Leerzeilen im vom Browser angezeigten Text.

Auch ist unser Text noch bar jeder Überschrift oder sonstiger Attribute (wie z.B. fett, unterstrichen oder kursiv). Auch die Textausrichtung ist noch nicht möglich.

Textausrichtung

Um die Ausrichtung unseres Textes zu beeinflussen, existieren verschiedene Tags.
Mit dem Tag-Paar <div align="Option">...</div> kann man einen Text in Abschnitte (engl. Division) mit gleicher Textausrichtung einteilen.

Option kann hierbei folgende Werte annehmen:

  • left
  • right
  • center
  • justify
 -  linksbündig
 -  rechtsbündig
 -  zentriert
 -  Blocksatz

Für das Zentrieren eines Textes steht uns (neben <div align="center">...</div>) als Alternative sogar noch das Tagpaar <center>...</center> zur Verfügung. Der gesamte zwischen diesem Tagpaar liegende Text wird zentriert ausgegeben:

Dunkel war's, der Mond schien helle,
Schnee lag auf der grünen Flur,
als ein Wagen blitzeschnelle,
langsam um die runde Ecke fuhr.
Drinnen saßen stehend Leute,
schweigend ins Gespräch vertieft,
als ein totgeschoss'ner Hase
auf der Sandbank Schlittschuh lief.

Häufig hat man auch den Wunsch einen Text genauso auszugeben, wie er eingegeben wurde. Dies ist normalerweise unmöglich, da der Browser den Text automatisch umbricht und Newlines ignoriert. Mit dem Tagpaar <pre>...</pre> lässt sich auch diese Hürde meistern:

            ____               ___                       _ _
           / ___| _ __   __ _ / _ \_   _____   __ _  ___| | |
           \___ \| '_ \ / _` | |/ | \ / / _ \ / _` |/ _ \ | |
            ___) | |_) | (_| | |\ \\ V / (_) | (_| |  __/ |_|
           |____/| .__/ \__,_| ||_/ \_/ \___/ \__, |\___|_(_)
                 |_|         |_|              |___/
                                                       N
 ... sagen                                              O
              die              manchmal                  R
                      Leute                zu mir.        M
                                                           A
        Wieso denn?  ?:o\               Ist denn das...     L
                                                             ?

Überschriften

Jeder vernünftige Text benötigt auch Überschriften, die die Gliederung des Textes deutlich machen. Es gibt insgesamt 6 verschiedene Überschriftenarten. Wie diese dargestellt werden, hängt allerdings vom Browser ab. Folgende Tags stehen für die Überschriften zur Verfügung:

  1. <h1> ... </h1>   Überschrift der 1. Kategorie   (größte Überschrift)
  2. <h2> ... </h2>   Überschrift der 2. Kategorie
  3. <h3> ... </h3>   Überschrift der 3. Kategorie
  4. <h4> ... </h4>   Überschrift der 4. Kategorie
  5. <h5> ... </h5>   Überschrift der 5. Kategorie
  6. <h6> ... </h6>   Überschrift der 6. Kategorie   (kleinste Überschrift)

Textattribute

Bleiben uns nun noch die Attribute, um das Aussehen eines Textes zu verändern. Dazu dienen erneut Tagpaare, zwischen denen der vorhandene Text beeinflusst wird. Es existieren im Wesentlichen vier verschiedene Attribute:

Übersicht über einige Attribute
Befehl Auswirkung
<b>...</b>  Der Text wird fett dargestellt
<i>...</i>  Der Text wird kursiv dargestellt
<u>...</u>  Der Text wird unterstrichen
<tt>...</tt>  Jedes Zeichen hat eine einheitliche Breite

Zeilenumbruch und Absatz

Nun möchte man sicher auch einmal einen längeren Text mit Absätzen und/oder mit festen Zeilenumbrüchen versehen. Auch dies ist mit HTML möglich. Dazu dienen die Tags <p> für Absatz (engl. Paragraph) und <br> für Zeilenumbruch (engl. Break).

Da diese Tags genau an einer Stelle eine Formatierung durchführen und sich nicht auf einen Bereich beziehen, müssen sie nicht mit einem passenden Tag beendet werden!

Der Unterschied zwischen Absatz und Zeilenumbruch liegt darin, dass der Paragraph einen Zeilenumbruch durchführt und danach eine Leerzeile einfügt. Der einfache Zeilenumbruch bricht nur die Zeile um und der Text fährt danach in der darauf folgenden Zeile fort.

Das Tag <p> kann auch mit einem passenden Endetag versehen werden (</p>). In diesem Fall kann das Tagpaar die Form <p align="Option">...</p> haben, wobei für Option die gleichen Werte möglich sind wie für das oben schon erwähnte Tag <div>. - Der Unterschied zwischen <div> und <p> ist im Wesentlichen nur, dass <p> zusätzlich nach dem Ende des Abschnitts eine Leerzeile einfügt, <div> aber nicht.

Den Unterschied zwischen den Tags <div> und <p> dürften Sie bald erkennen, wenn Sie zwei Absätze mit anderer Ausrichtung einmal ohne Leerezeile direkt aufeinander folgen lassen wollen; mit <p> geht das nicht! (linksbündig)
Mit dem Division-Tag kann man aber auch das unter Kontrolle bekommen. Vom W3-Konsortium, das über die Aufnahme neuer Sprachelemente und in Standard-HTML entscheidet, wird dieses Tag sogar bevorzugt! (Blocksatz)
Die haben dieses Tag gern! - Ich auch. (rechtsbündig)
Ja, das war's, denke ich. - Alles klar zu Divisions und Paragraphs? (zentriert)

Zusammenfassung und Beispiel

Alle in den oberen Abschnitten besprochenen Methoden lassen sich natürlich auch kombinieren, so dass auch ein mit Attributen versehener Text zentriert ausgegeben werden kann o.ä .

Legen wir nun ein HTML-Dokument an, welches mit Überschriften und Attributen versehen ist: 

<html>
<head>
<title>Ein Beispiel mit formatiertem Text</title>
</head>
<body>

<h1>Text mit Attributen</h1>
<h3>Eine kleinere Spielerei</h3>
<b>HTML</b>-Texte k&ouml;nnen mit verschiedenen <u>Attributen</u>
versehen werden! Auch eine <b><u>Kombin</u>ation</b> ist m&ouml;glich!
<p>

<center>
Der <i>Optimist</i> behauptet,<br>
dass wir in der besten <br>
aller m&ouml;glichen Welten leben,<br>
und der <i>Pessimist</i> bef&uuml;rchtet,<br>
dass das stimmt.<br>
<b>James Branch Cabell, 1879-1958</b>
</center>

</body>
</html>

Die obige Quelle sieht im Browser nun wie folgt aus:

Im nächsten Kapitel beschäftigen wir uns mit einfachen Grafiken.

 

Zurück || Weiter Index Startseite
Version 1.2, Jänner 2000 - Copyright © 1999-2000 by Peter Bittner