SELFHTML

Präformatierter Text (wie im Editor eingegeben)

Informationsseite

nach unten Textabschnitt mit präformatiertem Text definieren
nach unten Breite eines Bereichs mit präformatiertem Text
nach unten Ältere HTML-Elemente für präformatierten Text
nach unten Präformatierten Text formatieren mit CSS
nach unten Weitere Informationen

 nach unten 

HTML 2.0XHTML 1.0MS IE 1.0Netscape 1.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 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 Kapitel 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:

Beispiel-Seite 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>
  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 Seite Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen. HTML-Elemente innerhalb von <pre> und </pre> werden interpretiert.

nach obennach unten

HTML 4.0XHTML 1.0deprecated (missbilligt) 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:

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

nach obennach unten

MS IE 1.0Netscape 1.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 Ä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:

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

nach obennach unten

HTML 4.0XHTML 1.0MS IE 3.0Netscape 4.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 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 Kapitel Stylesheets können Sie ein solches Element jedoch nach Wunsch formatieren. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel 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:

Seite Schriftformatierung
Seite Ausrichtung und Absatzkontrolle
Seite Außenrand und Abstand
Seite Innenabstand
Seite Rahmen
Seite Hintergrundfarben und -bilder

Beispiel:

Beispiel-Seite 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.

nach obennach unten

Weitere Informationen

In der Kapitel 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:
Seite Element-Referenz für präformatierten Text (<pre>...</pre>)
Seite Attribut-Referenz für präformatierten Text (<pre>...</pre>)

 nach oben
weiter Seite Logische Auszeichnungen im Text
zurück Seite Zitate und Adressen
 

© 2005 Seite Impressum