SELFHTML/Quickbar HTML Absatztypen und Textgestaltung

| ## Präformatierter Text für Quellcode usw.
| Textabschnitt mit präformatiertem Text definieren Breite eines Bereichs mit präformatiertem Text Andere Befehle für präformatierten Text Weitere Möglichkeiten

## Textabschnitt mit präformatiertem Text definieren

Anzeigebeispiel: So sieht's aus

Für Programmlistings ist es wichtig, daß sie in `diktengleicher Schrift` dargestellt werden, und daß Einrückungen so wiedergegeben werden, wie sie beim Editieren eingegeben wurden. Zu diesem Zweck bietet HTML die Möglichkeit der "präformatierten Textabschnitte" an. Auch wenn Sie tabellarische Daten darstellen müssen und auf Tabellen verzichten wollen, können Sie präformatierten Text benutzen. Schließlich ist präformatierter Text ist auch dazu geeignet, um andere Elemente, beispielsweise Grafiken, auszurichten.

### Beispiel:

    <pre>
      FUNCTION Osterberechnung(year : INTEGER) : INTEGER;
      VAR  a, b, c, d, e, f, g, h, i, k, l, m : INTEGER;
      BEGIN
         a  :=  year MOD 19;
         b  :=  year DIV 100;
         c  :=  year MOD 100;
         d  :=  b DIV 4;
         e  :=  b MOD 4;
         f  :=  ( b + 8 ) DIV 25;
         g  :=  ( b  f + 1 ) DIV 3;
         h  :=  ( 19 * a + b  d  g + 15 ) MOD 30;
         i  :=  c DIV 4;
         k  :=  c MOD 4;
         l  :=  ( 32 + 2 * e + 2 * i  h  k ) MOD 7;
         m  :=  ( a + 11 * h + 22 * l ) DIV 451;
         Easter :=  h + l  7 * m + 22;
      END{FUNC};
    </pre>

### Erläuterung:

`<pre>` leitet einen Textabschnitt mit präformatiertem Text ein (pre = preformatted = vorformatiert). `</pre>` beendet den Abschnitt. Alles, was dazwischen steht, wird so angezeigt, wie es eingegeben wurde, und zwar in diktengleicher Schrift.

### Beachten Sie:

Innerhalb von `<pre>` und `</pre>` gelten wie in anderen Textabschnitten die Besonderheiten für Umlaute, Sonderzeichen und HTML-eigene Zeichen. HTML-Befehle innerhalb von `<pre>` und `</pre>` werden interpretiert. Das hat den Vorteil, daß Sie innerhalb von präformatiertem Text beispielsweise an beliebigen Stellen Grafiken einbinden können (siehe Beispiel).

## Breite eines Bereichs mit präformatiertem Text

Anzeigebeispiel: So sieht's aus

Sie können eine Breite für einen Abschnitt mit prräformatiertem Text erzwingen. "Breite" bedeutet dabei: die maximale Anzahl von Zeichen in einer Zeile.

### Beispiel:

    <pre width=80>
    YBREEZE  MID        17.845  15.06.97   6:01 ybreeze.mid
    YGLADTR  MID        34.552  15.06.97   6:01 ygladtr.mid
    YHASTE   MID        27.834  15.06.97   6:01 yhaste.mid
    YRAG     MID        18.540  15.06.97   6:01 yrag.mid
    YRITMO   MID        29.056  15.06.97   6:01 yritmo.mid
             5 Datei(en)               127.827 Bytes
    </pre>

### Erläuterung:

Mit dem Attribut `width=` im einleitenden `<pre>`-Tag geben Sie eine maximale Breite für die Zeilen des Bereichs vor. Im obigen Beispiel kann keine Zeile mehr als 80 Zeichen haben.

Bei längeren Zeilen kann der Browser entweder eine kleinere Schrift wählen, um die Breite einzuhalten, oder er bricht überlange Zeilen um.

### Beachten Sie:

Die Angabe zur Breite eines präformatierten Bereichs wird weder von Netscape 4.x noch vom MS Internet Explorer 4.x interpretiert.

## Andere Befehle für präformatierten Text

Anzeigebeispiel: So sieht's aus

Neben `<pre>` ... `</pre>` gibt es weitere HTML-Tags, die einen eigenen Absatz in diktengleicher Schrift bewirken. Diese Tags stehen jedoch auf der Abshußliste des W3-Konsortiums und sollten nicht mehr verwendet werden. Sie werden hier lediglich der Vollständigkeit halber dokumentiert.

### Beispiel: <xmp>

    <xmp>Textabsatz in diktengleicher Schrift</xmp>

### Beispiel: <listing>

    <listing>Textabsatz in diktengleicher Schrift</listing>

### Beispiel: <plaintext>

    <plaintext>Textabsatz in diktengleicher Schrift</plaintext>

### Erläuterung:

Alle drei Befehle bewirken einen eigenen Textabsatz mit diktengleicher Schriftdarstellung:
`<xmp>...</xmp>` (xmp = example = Beispiel) ist als logischer Befehl für Quellcode-Beispiele gedacht.
`<plaintext>...</plaintext>` (plaintext = nackter Text) ist als logischer Befehl zum Darstellen von reinem Text gedacht, etwa zum Zitieren aus einer unformatierten Textdatei.
`<listing>...</listing>` (listing = zeilenorientierter Quelltext) ist als logischer Befehl für Quelltext von Programmen gedacht.

### Beachten Sie:

Alle drei Befehle finden in der Praxis kaum mehr Verwendung. Wenn Sie keine besonderen Gründe haben, sollten Sie `<pre>` ... `</pre>` zur Darstellung von präformatiertem Text verwenden.

Der Unterschied zwischen `<xmp>...</xmp>` und `<listing>...</listing>` liegt in der Schriftweite. `<xmp>...</xmp>` bewirkt eine weitere Schrift (ausgehend von 80 Zeichen/Zeile beim Ausdruck), `<listing>...</listing>` eine engere Schrift (ausgehend von 132 Zeichen/Zeile beim Ausdruck). `<listing>...</listing>` wird von Netscape etwa auch anders dargestellt als `<pre>...</pre>`.

Netscape akzeptiert zu diesem Tag kein abschließendes Tag `</plaintext>`, während andere Browser das End-Tag interpretieren. Netscape stellt alles in diktengleicher Schrift dar, was Sie bis zum nächsten Absatz-Befehl (z.B. Überschrift, Absatzschaltung, Hinweisabsatz, Liste usw.) an Text eingeben.

## Weitere Möglichkeiten

Das `<pre>`-Tag kann Universalattribute enthalten.

Wenn Sie HTML bereits etwas besser kennen, probieren Sie auch mal die Möglichkeiten aus, die Ihnen CSS Style-Sheets bieten. Denn damit können Sie `<pre>`-Bereiche zusätzlich formatieren. Achten Sie jedoch darauf, den Sinn und Zweck des Befehls nicht zweckzuentfremden. Zunächst müssen Sie beim Wunsch, das `<pre>`-Tag zusätzlich zu formatieren, wissen, wie man Style-Sheets definieren kann. Anschließend sind Sie in der Lage, Style-Sheet-Angaben anzuwenden. Interessant sind im hier beschriebenen Zusammenhang beispielsweise folgende Style-Sheet-Angaben:
Abstände, Ränder, Ausrichtung
Rahmen und Innenabstände
Hintergrundfarben und -bilder

weiter: | Logische Textauszeichnung
zurück: | Zitate und Adressen

SELFHTML/Quickbar HTML Absatztypen und Textgestaltung

© 1998 Stefan Münz, muenz@csi.com