Einfache Text- und Absatzformatierungen

Zurück zur Übersicht

Heute lernen wir einfache Möglichkeiten zur Formatierung von Text (Zeichenformatierung) und von Absätzen (Absatzformatierung) kennen.

1. Erweiterung unseres Steckbriefs

AUFGABE:

Zunächst erweitern wir unseren Steckbrief um mindestens die folgenden Angaben:
Wohnort, Spitznamen, Lieblingsessen, Lieblingsfach.
Gib dazu in jeweils einer neuen Zeile die weiteren Angaben als neuen Absatz zwischen <p> und </p> ein.

2. Textformatierung

Es stehen verschiedene HTML-Befehle zur Verfügung, um Textabschnitte zu formatieren.

Beispiel:

<b>Fetter Text</b> und normaler Text

Anzeige im Browser:

Fetter Text und normaler Text

Erläuterung:

Am Anfang des Textbereichs, der hervorgehoben werden soll, wird ein einleitendes Tag (zum Beispiel das Tag <b>) eingefügt. Am Ende des gewünschten Textbereichs wird ein entsprechendes Abschluss-Tag eingefügt (zum Beispiel das Tag </b>). Keines dieser HTML-Tags erzeugt einen eigenen Absatz, d.h. es handelt sich um reine Textformatierungen.

Folgende HTML-Tags stehen zur Verfügung für Textformatierungen:

<b>....</b> bewirkt fett ("bold") formatierten Text: Beispieltext.
<i>....</i> bewirkt kursiv ("italic") formatierten Text: Beispieltext.
<u>....</u> bewirkt unterstrichenen ("underline") Text: Beispieltext.
<sup>....</sup> bewirkt hochgestellten ("super") Text: Beispieltext.
<sub>....</sub> bewirkt tiefgestellten ("sub") Text: Beispieltext.

AUFGABE:

Formatiere in Deinem Steckbrief die Begriffe "Alter, Wohnort, Spitznamen, Lieblingsessen, Lieblingsfach" jeweils einschließlich des Doppelpunktes fett!
Speichere Deine HTML-Datei ab und kontrolliere im Browser (Aktualisieren!), ob Du das gewünschte Ergebnis erreicht hast!

3. Absatzformatierung (Ausrichtung)

Textabsätze und Überschriften werden linksbündig ausgerichtet, wenn nichts anderes angegeben ist. Man kann einen Textabsatz bzw. eine Überschrift auch zentriert oder rechtsbündig ausrichten. Auch Blocksatz ist möglich.

Beispiel:

<p>Dies ist ein Absatz.</p>
<h4 align="center">Dies ist eine Überschrift 4. Ordnung, die zentriert ausgerichtet wird.</h4>
<p align="right">Dies ist ein Absatz, der rechts ausgerichtet wird.</p>
<p align="justify">Dies ist ein Absatz im Blocksatz, das heisst,
dass der Text sowohl am linken Seitenrand als auch am rechten Seitenrand
ausgerichtet wird. Dadurch ergeben sich jedoch innerhalb der Zeilen oft
häßliche Lücken.</p>

Anzeige im Browser:

Dies ist ein Absatz.

Dies ist eine Überschrift 4. Ordnung, die zentriert ausgerichtet wird.

Dies ist ein Absatz, der rechts ausgerichtet wird.

Dies ist ein Absatz im Blocksatz, das heisst, dass der Text sowohl am linken Seitenrand als auch am rechten Seitenrand ausgerichtet wird. Dadurch ergeben sich jedoch innerhalb der Zeilen oft häßliche Lücken.

Erläuterung:

Durch die Angabe align="center" im einleitenden Tag erreicht man, dass der nachfolgende Textabsatz bzw. die Überschrift zentriert ausgerichtet wird (align = Ausrichtung, center = zentriert). Mit der Angabe align="right" wird der Textabsatz rechts ausgerichtet (right = rechts). Mit align="justify" erhält man Blocksatz für den betreffenden Textabsatz (justify = justieren). Aber nicht alle Browser beherrschen den Blocksatz.

AUFGABE:

Formatiere in Deinem Steckbrief die Überschrift "zentriert"!
Formatiere auch die Absätze mit den einzelnen Eigenschaften entweder "zentriert" oder "rechtsbündig"!
Speichere Deine HTML-Datei ab und kontrolliere im Browser (Aktualisieren!), ob Du das gewünschte Ergebnis erreicht hast!

4. Weitere Formatierungsmöglichkeiten

Mit HTML kann man nahezu alles formatieren. Einige Möglichkeiten findest Du auf den folgenden Seiten:

Farben für Hintergrund, Text und Verweise
Farben in HTML definieren
Schriftgröße, -farbe und -art

Probiere einfach verschiedene Formatierungsmöglichkeiten aus und gestalte Deinen Steckbrief nach Deinen Vorstellungen.

Zurück zur Übersicht



 © 2010 Christian Bauer - cn.bauer@gmx.de