






 Textabschnitt mit präformatiertem Text definieren
 Textabschnitt mit präformatiertem Text definierenBeispielsweise 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.
 Tabellen verzichten wollen, können Sie präformatierten Text benutzen. Und dann ist präformatierter Text auch noch dazu geeignet, um andere Elemente auszurichten.
 Anzeigebeispiel: So sieht's aus
 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ä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>
<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.
Innerhalb von <pre> und </pre> gelten wie in anderen Textabschnitten die Aussagen zu  Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen. HTML-Elemente innerhalb von
 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
 Breite eines Bereichs mit präformatiertem TextSie können eine Breite für einen Abschnitt mit präformatiertem Text erzwingen. "Breite" bedeutet dabei: die maximale Anzahl von Zeichen in einer Zeile.
 Anzeigebeispiel: So sieht's aus
 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ä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>
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.
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
 Ältere HTML-Elemente für präformatierten TextDer 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.
<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.
 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
 Präformatierten Text formatieren mit CSSIn 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
 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:
 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
 Schriftformatierung
 Ausrichtung und Absatzkontrolle
 Ausrichtung und Absatzkontrolle
 Außenrand und Abstand
 Außenrand und Abstand
 Innenabstand
 Innenabstand
 Rahmen
 Rahmen
 Hintergrundfarben und -bilder
 Hintergrundfarben und -bilder
 Anzeigebeispiel: So sieht's aus
 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ä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 <nonsense.h>
#include <lies.h>
#include <spyware.h> /* Microsoft Network Connectivity library */
#include <process.h> /* For the court of law */
<!-- usw. -->
</pre>
</body>
</html>
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.
In der  HTML-Referenz finden Sie Angaben darüber, wo präformatierter Text vorkommen darf, welche anderen Elemente er enthalten darf, welche Attribute das
 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 (
 Element-Referenz für präformatierten Text (<pre>...</pre>)
 Attribut-Referenz für präformatierten Text (
 Attribut-Referenz für präformatierten Text (<pre>...</pre>)
|   | |
|  |  Logische Auszeichnungen im Text | 
|  |  Zitate und Adressen | 
|  SELFHTML/Navigationshilfen  HTML/XHTML  Elemente zur Textstrukturierung | |
© 2007  Impressum
 Impressum