HTML/Textstrukturierung/pre

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das Element pre erlaubt es, Text so darzustellen, wie er im Editor eingegeben wird, pre steht dabei für preformatted, also präformatiert, vorformatiert.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
  • XHTML 1.0
  • HTML5

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. Präformatierter Text eignet sich in vielen Fällen zur Ausgabe von Debug-Meldungen beim Entwickeln mit serverseitigen Programmiersprachen wie PHP.

Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Textabschnitt mit präformatiertem Text definieren</title> </head> <body> <h1>„Hallo, Welt!“ in PHP</h1> <pre> <code> <?php echo "Hallo, Welt\n"; ?> </code> </pre> </body> </html>
<pre> leitet einen Textabschnitt mit präformatiertem Text ein. </pre> beendet den Abschnitt. Alles, was dazwischen steht, wird so angezeigt, wie es eingegeben wurde. Das gilt insbesondere für Leerzeichen.
ansehen …

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>

Präformatierten Text mit CSS formatieren[Bearbeiten]

In welcher Schriftart und Schriftgröße präformatierter Text genau dargestellt wird, darauf haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen, für den Inhalt von pre-Elementen typischerweise eine dicktengleiche Schrift. Mit Stylesheets (CSS) 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:

Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Präformatierten Text mit CSS formatieren</title> <style> pre {background-color:#009; color:#ff0; font-family: Fixedsys,Courier,monospace; padding:10px;} </style> </head> <body> <h1>Software-Entwicklung</h1> <pre> #include <nonsense.h> #include <lies.h> #include <spyware.h> /* Microsoft Network Connectivity library */ #include <process.h>; /* For the court of law */ </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.
ansehen …

siehe auch[Bearbeiten]

Weblinks[Bearbeiten]

Abgerufen von „http://wiki.selfhtml.org/index.php?title=HTML/Textstrukturierung/pre&oldid=43081“