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.0MSIE 1.0Netscape 1.0 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, beispielsweise Grafiken, auszurichten.

Beispiel:

Popup-Seite 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 Seite 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 Seite Grafiken einbinden können:
Popup-Seite Anzeigebeispiel: So sieht's aus

 nach obennach unten 

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

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

 nach obennach unten 

MSIE 1.0Netscape 1.0 Ä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.

 nach obennach unten 

HTML 4.0XHTML 1.0MSIE 3.0Netscape 4.0 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 Kapitel 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 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:

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

 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 Zitate (<pre>...</pre>)

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

© 2001 E-Mail selfhtml@teamone.de