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

SELFHTML/Navigationshilfen HTML/XHTML Elemente zur Textstrukturierung
	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 auszurichten.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Textabschnitt mit pr&auml;formatiertem Text definieren</title>
</head>
<body>
<h1>Ostern mit Pascal</h1>

<pre>
 <code>
  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};
 </code>
</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.

pre-Elemente werden häufig eingesetzt, um Quelltext darzustellen. In diesem Fall ist es semantisch korrekt, den Inhalt mit einem code-Element zu umfassen:<pre><code>...</code></pre>

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>Breite eines Bereichs mit pr&auml;formatiertem Text</title>
</head>
<body>
<h1>MIDI-Dateien</h1>

<pre width="30">
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 30 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 nur von Netscape 6 und Mozilla Firefox 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.
Das inline-Element ist deprecated und erfordert kein schließendes Tag.
<listing>...</listing> (listing = zeilenorientierter Quelltext) war für Quelltext von Programmen gedacht.

Beachten Sie:

<xmp> und <listing> wurden in HTML 2.0 spezifiziert, <plaintext> in HTML 3.2. Alle drei Elemente entfielen mit HTML 4 und finden in der Praxis praktisch keine Verwendung mehr. Wenn Sie keine besonderen Gründe haben, sollten Sie <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>. Firefox und Konqueror stellen allerdings beide Elemente mit der gleichen Schriftformatierung dar.

Netscape, Firefox, Konqueror und Safari akzeptieren zu <plaintext> kein abschließendes Tag </plaintext>, während andere Browser das End-Tag interpretieren. Microsoft gibt an, das Element nicht mehr zu unterstützen. 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 wird, darauf haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen. Mit Stylesheets können Sie ein solches Element jedoch nach Wunsch formatieren. Bei Verwendung von 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//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pr&auml;formatierten Text formatieren mit CSS</title>
</head>
<body>
<h1>Software-Entwicklung</h1>

<pre style="background-color:#009; color:#ff0; font-family:Fixedsys,Courier,monospace; 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 präformatierten Text (<pre>...</pre>)


	Logische Auszeichnungen im Text
	Zitate und Adressen

SELFHTML/Navigationshilfen HTML/XHTML Elemente zur Textstrukturierung