Formatierungen

Überschriften, Schriften, Absätze, Linien

Vorbemerkungen: Für HTML-Lehrzwecke will man häufig HTML-Programmsequenzen zur Erläuterung auf dem Schirm darstellen und zwar in Fix-spaced-Schrift und der im Code gewählten Formatierung, d.h. mit Zeilenvorschüben und Einrückungen. Für solche Zwecke kann man das Tag-Paar <pre> und </pre> (vorformatierter Text) oder das Tag-Paar <code> und </code> (Programmcode) oder (seltener im Gebrauch) das Tag-Paar <samp> und </samp> (für Sample, Beispiel) benutzen. Allerdings müssen in allen drei Fällen die spitzen Klammern durch die HTML-Umschreibungen (Entities) "&lt;" für "<" und "&gt;" für ">" und dargestellt werden. Bei <code> ist zusätzlich am Zeilenende der Tag <br> anzubringen.

In diesem Kapitel wird die individuelle Formatierung mit den entsprechenden Tags gezeigt. Leistungsfähiger ist die Verwendung von "Cascading Style Sheets" (CSS1) oder (CSS2). Die Style Sheets sind in der Wirkung ähnlich den Formatvorlagen in WinWord. Style Sheets werden in einem späteren Kapitel behandelt.

1. Überschriften

Für Überschriften (Head Lines) stehen die Tags <h1> (größte Überschrift) bis <h6> (kleinste Überschrift) zur Verfügung.
Programmbeispiele: 
   <font color="red"><h1></font>Das ist die größte   Überschrift mit h1 <font color="red"></h1></font>
   <font color="red"><h6></font>Das ist die kleinste Überschrift mit h6 <font color="red"></h6></font>

Das ist die größte Überschrift mit h1

Das ist die Überschrift mit h2

Das ist die Überschrift mit h3

Das ist die Überschrift mit h4

Das ist die Überschrift mit h5
Das ist die kleinste Überschrift mit h6
Für die Überschriftentags h1 bis h6 stehen optional die Attribute align mit den vordefinierten Werten "left" (Standard), "center" und "right" zur Verfügung. Programmbeispiel: 
  <h3 align="Center">Zentrierte Überschrift</h3>

Linksbündige Überschrift mit align="left"

Zentrierte Überschrift mit align="center"

Rechtsbündige Überschrift mit align="right"

Anmerkung: "center" dient in HTML 4 (auch noch wie früher) als Tag mit der Wirkung dass alle Textteile bis zum End-Tag zentriert ausgegeben werden. Dieser (pauschale) center-Tag steht auf der HTML-Abschussliste und sollte ersetzt werden durch den Tag "div", der seinerseits das Attribut "align" mit dem Wert "center" besitzt. Programmbeispiel: 
   <div align="center">
    ....
    ....
   </div>

2. Schriftauszeichnungen

Für die Schriftauszeichnungen stehen folgende Tags zur Verfügung. Sie sind immer mit dem zugehörigen End-Tag zu benutzen. Verschachtelungen sind möglich; man hüte sich aber vor Überschneidungen.

Standard, keine Auszeichnung
<b> bold, fett. Physische Auszeichnung
<i> italic, kursiv. Physische Auszeichnung
<u> unterstrichen. Physische Auszeichnung. Unterstreichung wegen Verwendung bei Hyperlinks vermeiden.
<strike> durchgestrichen. Physische Auszeichnung. Durchstreichung vermeiden.
<sup> hochgestellt. Physische Auszeichnung
<sub> tiefgestellt. Physische Auszeichnung
<big> BIG. Physische Auszeichnung
<small> SMALL. Physische Auszeichnung

<strong> strong, meistens fett. Logische Auszeichnung
<em> emphasized, meistens kursiv. Logische Auszeichnung
<tt> Teletypewriter, Courier o.ä. Logische Auszeichnung
<cite> Zitat, meistens kursiv. Logische Auszeichnung
<pre> Vorformatierter Text. Logische Auszeichnung

Für Puristen: Logische Auszeichnungen sollten bevozugt werden, da sie bei allen Browser funktionieren. Im Zeitalter von Netscape Navigator und Internet Explorer sollte das aber kein Thema mehr sein!

Programmbeispiel:
Ein fettgedrucktes Wort

3. Schriftformatierungen

Mit dem Tag <font> und dem End-Tag </font> kann die Standardschrift zeitweise ausser Kraft gesetzt werden. Mit den zugehörigen font-Attributen size (Schriftgröße), face (Schrifttyp) und color (Schriftfarbe) können die Schriftgröße, der Schrifttyp und die Schriftfarbe geändert werden.
Es stehen bei size sieben Schriftgrößen (von 1 bis 7, Standard ist 3) zur Verfügung:

Größe 1,   Größe 2,   Größe 3 (Standard),   Größe 4,   Größe 5,   Größe 6,   Größe 7

Einstellung der Schriftgröße 4 und beenden wie folgt: 

  <font size="4"> ............... </font>
Die Standardschriftgröße kann mit dem Tag <basefont> auf einen anderen Wert als 3 gesetzt werden. Dieser Tag besitzt keinen End-Tag und kann im gleichen Dokument mehrmals benutzt werden. Beispiel: 
   <basefont size="4">
Beim Tag <basefont> können zusätzlich die erst später beschriebenen Attribute face und color benutzt werden.

Für die relative Änderung der Standardschriftgröße gibt es Vereinfachungen, die mit folgenden Beispielen gezeigt werden. Die Änderung wird nur wirksam, wenn das Ergebnis zwischen 1 und 7 liegt. 

   <font size="+2"> .............. </font>

   <font size="-1"> .............. </font>
Mit den Attributen face (Schrifttyp) und color (Farbe, siehe späteres Kapitel) können sowohl beim Tag <font> als auch beim Tag <basefont> andere Schrifttypen bzw. -farben gewählt werden. Da nicht auf allen Plattformen (Windows, Mac, Unix, ...) die Schriften unter dem gleichen Namen existieren, sollte man beim Attribut face in einer Auflistung unbedingt Alternativschriften angeben.
Programmbeispiel für "Arial" (Windows) und Alternative "Heletica" (Macintosh): 
    <font face="Arial, Helvetica">
     ....
     ....
    </font>
Das allgemeine Format für die Tags font und BASEfont: 
   <font size="xx" face="......" color="#rrggbb">
    ....
    ....
   </font>
Beim Attribut color stehen nach dem "#" je zwei Hexziffern für red, green und blue. Es können aber auch vordefinierte Farbbezeichner verwendet werden, siehe späteres Kapitel.

Programmbeispiel für die Schrift Arial oder Helvetica in der Größe 4 und in blauer Farbe: 

   <font size="3" face="Arial, Helvetica" color="blue">
    ....
    ....
   </font>
Das ist eine Schrift mit der Formatierung: <font size="3" face="Arial, Helvetica" color="Blue">
Das ist eine Schrift mit der Formatierung: <font size="2" face="Arial, Helvetica" color="red">
Das ist eine Schrift mit der Formatierung: <font size="3" face="Times, Times New Roman" color="Blue">
Das ist eine Schrift mit der Formatierung: <font size="3" face="Courier, Courier New" color="green">

4. Absatzformatierungen

Für die Formatierung eines Absatzes (Paragraph) dient der Tag <p>. Vor und nach dem Absatz wird eine Leerzeile eingefügt. Ein End-Tag </p>ist definiert, wird aber selten benutzt. Im kommenden XHTML ist der End-Tag aber zwingend! Der Autor ist sich seiner Nachlässigkeit wegen der häufig fehlenden End-Tags </p> bewusst.

Standardmäßig wird der Absatz linksbündig ausgegeben. Mit dem optionalen Attribut align kann die Ausgabe des Absatzes wie folgt formatiert werden:

  align="left"           linksbündig, Standard
  align="center"         zentriert
  align="right"          rechtsbündig
  align="justify"        Blocksatz, jedock keine Silbentrennung

Das ist ein Dummytext mit der Absatzformatierung <p align="center">. Das ist ein Dummytext mit der Absatzformatierung <p align="center">. Das ist ein Dummytext mit der Absatzformatierung <p align="center">. Das ist ein Dummytext mit der Absatzformatierung <p align="center">. Das ist ein Dummytext mit der Absatzformatierung <p align="center">. Das ist ein Dummytext mit der Absatzformatierung <p align="center">. Das ist ein Dummytext mit der Absatzformatierung <p align="center">. Das ist ein Dummytext mit der Absatzformatierung <p align="center">. Das ist ein Dummytext mit der Absatzformatierung <p align="center">.

Das ist ein Dummytext mit der Absatzformatierung <p align="right">. Das ist ein Dummytext mit der Absatzformatierung <p align="right">. Das ist ein Dummytext mit der Absatzformatierung <p align="right">. Das ist ein Dummytext mit der Absatzformatierung <p align="right">. Das ist ein Dummytext mit der Absatzformatierung <p align="right">. Das ist ein Dummytext mit der Absatzformatierung <p align="right">. Das ist ein Dummytext mit der Absatzformatierung <p align="right">. Das ist ein Dummytext mit der Absatzformatierung <p align="right">. Das ist ein Dummytext mit der Absatzformatierung <p align="right">. Das ist ein Dummytext mit der Absatzformatierung <p align="right">.

Das ist ein Blocksatz-Dummytext mit der Absatzformatierung <p align="justify">. Blocksatz-Absatzformatierung ohne Silbentrennungsautomatik ergibt aber keinen echten Sinn, wenn man z.B. an Endlos-Langwörter wie "Donauschiffahrtskaptitänswitwe" oder "Silbentrennungsalgorithmenoptimierung" denkt. Das ist ein Blocksatz-Dummytext mit der Absatzformatierung <p align="justify">. Blocksatz-Absatzformatierung ohne Silbentrennungsautomatik ergibt aber keinen echten Sinn, wenn man z.B. an Endlos-Langwörter wie "Donauschiffahrtskaptitänswitwe" oder "Silbentrennungsalgorithmenoptimierung" denkt. Das ist ein Blocksatz-Dummytext mit der Absatzformatierung <p align="justify">. Blocksatz-Absatzformatierung ohne Silbentrennungsautomatik ergibt aber keinen echten Sinn, wenn man z.B. an Endlos-Langwörter wie "Donauschiffahrtskaptitänswitwe" oder "Silbentrennungsalgorithmenoptimierung" denkt.

5. Sonstige Auszeichnungen

Mit dem Tag <pre> kann vorformatierter Text in Fixed-Space-Schrift angezeigt werden, wobei Zeilenvorschübe, Einrückungen, Leerzeichen und Tabulatoren beachtet werden. Allerdings müssen die spitzen Klammern durch die HTML-Entities umschrieben werden, wenn sie nicht interpretiert werden sollen, im Gegensatz zum (früheren) Tag <xmp> für Example. 

    <pre>
      Anton Huber
      Lothstraße 34
      80333 München
    </pre>
Mit dem Tag <blockquote> werden Absätze bis zum End-Tag durch Einrücken hervorgehoben. Die Einrückung ist natürlich nur dann vom Betrachter zu bemerken, wenn davor und/oder danach nichteingerückte Absätze auf dem Bildschirm zu sehen sind. Also nur kurze Absätze mit <blockquote> einrücken! Programmbeispiel: 
   <blockquote>
   ....
   ....
   </blockquote>
Mit dem Tag <adress> werden Adressen hervorgehoben, meistens durch Kursivschrift. Die Adresse kann einzeilig oder mit dem Tag <br> auch mehrzeilig sein. Programmbeispiel: 
   <adress>
    Anton Huber<br>
    Lothstraße 34<br>
    80333 München<br>
   </adress>

Die Tags <samp> (Sample, Beispiel) und <code> wirken ähnlich wie der Tag <pre>.

6. Horizontale Linien (hr = horizontale rule)

Mit dem Tag <hr> (hr = horizontale rule) können horizontale Linien erzeugt werden. Wenn der Tag ohne Attribute verwendet wird, werden Linien in einer Standarddicke über die gesamte aktuelle Fensterbreite gezogen. Es stehen die folgenden optionalen Attribute zur Verfügung:
1. Attribut size mit der Dicke in Pixel,
2. Attribut width mit absluten Breiten in Pixel oder relativen Breiten in Prozent,
3. Attribut align mit den vordefinierten Werten "left", "right" und "center",
4. Attribut noshade (ohne Wert, kein Schatten).
5. Attribut color mit vordefiniertern Farbbezeichnern oder mit Farbcode
Programmbeispiel und zugehörige Demo: 
  <hr>
  <hr width="50%" align="left">
  <hr width="50%" align="right">
  <hr width="50%" align="center">
  <hr width="300" align="center">  <!-- Breite in Pixel     -->
  <hr width="30%" align="center" noshade>
  <hr size ="50">                  <!-- Hoehe in Pixel      -->
  <hr>

7. Zierlinien

Wem die HTML-Standardlinie nicht gefällt, der kann Zierlinien als Grafikdateien einfügen, was aber erst in einem späteren Kapitel genauer erklärt wird. Hier werden lediglich einige Zierlinien demonstriert, die der Autor auf seiner Festplatte gefunden hat und nicht weiß, woher die stammen.
Line1.GIF
Line2.GIF
Line3.GIF
Line4.GIF
Line5.GIF
Line6.GIF
Line7.GIF
Line8.GIF
Line9.GIF
Das war's.

Zurück zur Startseite