2.5.6 Text mit mit <pre> formatieren

1 Allgemein

a) Bezeichnungen

• pre = präformatierter Text

b) Workhops

• SELFHTML: Textabschnitt mit präformatiertem Text definieren
  SELFHTML: Beispiel

2 Anwendung von <pre> in der Standardeinstellung

a) Syntax: <pre>...</pre>

b) Beispiel: (Standardeinstellung)

1) Im Stylesheet ist folgender Eintrag:

pre {font-family:monospace;}

2) Im Quelltext ist folgender Eintrag:

<pre>
Dies ist der Text.
In der pre-Ansicht wird die Ausrichtung 
des Quelltextes übernommen.
Die Formatierung der Schriftart und 
Schriftgrösse ist im Stylesheet vorgegeben.
</pre>

3) Im HTML-Dokument erscheint folgender Text:

 Dies ist der Text.
In der pre-Ansicht wird die Ausrichtung 
des Quelltextes übernommen.
Die Formatierung der Schriftart und 
Schriftgrösse ist im Stylesheet vorgegeben.

3 Anwendung <pre> in Standardschrift

a) Beispiel 1: mit pre class="text"

Ausgerichtet wie mit Tabulatoren, die in HTML und CSS nicht vorkommen

1) Im Stylesheet wurde folgender "class" Eintrag gemacht:

/* <pre> Allgemein */
pre {font-family:monospace;}

2) Im Quelltext des HTML-Dokument wird der Text folgendermassen geschrieben und formatiert:

<pre class="text">
hexadecimal 00	 33	 66	 99	 CC	 FF
	
    decimal  0	 51	102	153	204	255
	
    percent  0	 20	 40	 60	 80	100
</pre>

3) Im HTML-Dokument erscheint dann folgender Text:

hexadecimal 00	 33	 66	 99	 CC	 FF
	
    decimal  0	 51	102	153	204	255
	
    percent  0	 20	 40	 60	 80	100

b) Beispiel mit pre class="text-box"

⇒ Siehe auch "Kasten/Rahmen"

Bemerkungen zur Formatierung:

• Die Schrift ist "sans-serif" (und nicht wie bei "pre" standardmässig "monospace".
• Schwarzer Rahmen mit weissem Hintergrund.

1) Im Stylesheet befindet sich folgender Eintrag:

/* Ausgerichteter Text mit schwarzem Rahmen */
pre.text-box {font-family:sans-serif;
border-style:solid; border-width:1px; padding:5px;
border-color:#000000; background:#FFFFFF; color:#000000;}

2) Im Textbereich des Quelltextes wird geschrieben:

<pre class="text-box">
Darstellung von Text in einem schwarzen Rahmen
</pre>

3) Dann wird im HTML-Dokument folgendes dargestellt:

Darstellung von Text in einem schwarzen Rahmen

↑