SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Präformatierter Text (wie im Editor eingegeben)

	Präformatierter Text (wie im Editor eingegeben)
	Textabschnitt mit präformatiertem Text definieren Breite eines Bereichs mit präformatiertem Text Ältere HTML-Elemente für präformatierten Text Präformatierten Text formatieren mit CSS Weitere Informationen

Textabschnitt mit präformatiertem Text definieren

Beispielsweise für Programmlistings ist es wichtig, dass sie in dicktengleicher Schrift dargestellt werden, und dass 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. Und dann ist präformatierter Text auch noch dazu geeignet, um andere Elemente, beispielsweise Grafiken, auszurichten.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Ostern mit Pascal</h1>

<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>

</body>
</html>

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 dicktengleicher Schrift.

Beachten Sie:

Innerhalb von <pre> und </pre> gelten wie in anderen Textabschnitten die Aussagen zu Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen. HTML-Elemente innerhalb von <pre> und </pre> werden interpretiert. Das hat den Vorteil, dass Sie innerhalb von präformatiertem Text beispielsweise an beliebigen Stellen Grafiken einbinden können:
Anzeigebeispiel: So sieht's aus

Breite eines Bereichs mit präformatiertem Text

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

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>MIDI-Dateien</h1>

<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>

</body>
</html>

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 und ist mittlerweile auch als deprecated gekennzeichnet, soll also künftig aus dem HTML-Standard entfallen.

Ältere HTML-Elemente für präformatierten Text

Der Vollständigkeit halber sollten einige ältere Elemente erwähnt werden, die allesamt nicht mehr zum HTML-Standard gehören.

<xmp>...</xmp> (xmp = example = Beispiel) war einmal als logische Auszeichnung für Quellcode-Beispiele gedacht.
<plaintext>...</plaintext> (plaintext = nackter Text) war zum Darstellen von reinem Text gedacht, etwa zum Zitieren aus einer unformatierten Textdatei.
<listing>...</listing> (listing = zeilenorientierter Quelltext) war für Quelltext von Programmen gedacht.

Beachten Sie:

Alle drei Elemente finden in der Praxis praktisch keine Verwendung mehr. 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 <plaintext> kein abschließendes Tag </plaintext>, während andere Browser das End-Tag interpretieren. Netscape stellt alles in dicktengleicher Schrift dar, was Sie bis zum nächsten Block-Element (z.B. Überschrift, Textabsatz, Liste usw.) an Text eingeben.

Präformatierten Text formatieren mit CSS

In welcher Schriftart und Schriftgröße präformatierter Text genau dargestellt werden, darauf haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen. Mit CSS Stylesheets können Sie ein solches Element jedoch nach Wunsch formatieren. Bei Verwendung von CSS Stylesheets müssen Sie zunächst wissen, wie man CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften:
Schriftformatierung
Ausrichtung und Absatzkontrolle
Außenrand und Abstand
Innenabstand
Rahmen
Hintergrundfarben und -bilder

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Software-Entwicklung</h1>

<pre style="background-color:#000099; color:#FFFF00; font-family:Fixedsys,Courier; padding:10px;">
#include &lt;nonsense.h&gt;
#include &lt;lies.h&gt;
#include &lt;spyware.h&gt; /* Microsoft Network Connectivity library */
#include &lt;process.h&gt; /* For the court of law */
<!-- usw. -->
</pre>

</body>
</html>

Erläuterung:

Das pre-Element im Beispiel erhält einen blauen Hintergrund, gelbe Schriftfarbe, und als Schriftart wird "Fixedsys" gewünscht, oder, falls nicht verfügbar, eine Courier-Schrift. Damit der Text nicht so am Rand klebt, wird außerdem ein Innenabstand von 10 Pixeln definiert.

Weitere Informationen

In der HTML-Referenz finden Sie Angaben darüber, wo präformatierter Text vorkommen darf, welche anderen Elemente er enthalten darf, welche Attribute das pre-Element haben kann und was bei den einzelnen Attributen zu beachten ist:
Element-Referenz für präformatierten Text (<pre>...</pre>)
Attribut-Referenz für Zitate (<pre>...</pre>)


	Logische Auszeichnungen im Text
	Zitate und Adressen

SELFHTML/Navigationshilfen

HTML/XHTML

Elemente zur Textstrukturierung