Mitgliederversammlung 2017


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 7.10.2017 um 10:00 Uhr in Berlin statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite Mitgliederversammlung 2017.

Interessierte Gäste sind gern gesehen.

HTML/Textstrukturierung/pre

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das Element pre repräsentiert einen vorformatierten (engl.: preformatted) Textblock, in dem die Strukturen durch typographische Konventionen und nicht durch seinen Inhalt oder semantische Elemente gekennzeichnet ist.

  • 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 Whitespace wie Zeilenumbrüche und Einrückungen durch mehrere Leerzeichen oder Tabs so wiedergegeben werden, wie sie beim Editieren eingegeben wurden.

Allgemeines[Bearbeiten]

Präformatierter Text eignet sich in vielen Fällen zur Ausgabe von Debug-Meldungen beim Entwickeln mit serverseitigen Programmiersprachen wie PHP.

Beispiel ansehen …
<h1>„Hallo, Welt!“ in PHP</h1> <pre> <code class="language-php"> <?php echo "Hallo, Welt\n"; ?> </code> </pre>
<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.

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>

Gestaltung[Bearbeiten]

Verwenden Sie CSS, um vorformatierte Textblöcke nach Ihren Vorstellungen zu formatieren.

Beispiel ansehen …
pre {
  background-color: darkblue; 
  color: yellow; 
  font-family: Fixedsys,Courier,monospace; 
  padding: 10px;
}
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.

ASCII-Art[Bearbeiten]

Mit dem pre-Element ist es auch möglich ASCII-Art in seinen richtigen Proportionen darzustellen:

Beispiel ansehen …
<pre>
   .
   |
   |   
   |
   #         +------------------------------+
  (=)        |           ACHTUNG!           |
   H         |      PRÄFORMATIERTER TEXT!   |            =o=
   H         |                           __;                 ~^
   H         +------------TT-----------°            _               _ _  
   H                      ||    ________________   | |             | (_)   
   H                      ||    | SELF-Treffen >   | |__   ___ _ __| |_ _ __ 
   M       oÖo            ||    |°°°°°°°°°°°°°°°   | '_ \ / _ \ '__| | | '_ \ 
   M        |  ö          ||    |                  | |_) |  __/ |  | | | | | |  
  / \~"""~"""~"""~"""~"""~"""~"""~~"""~"""~"""~""""|_.__/ \___|_|  |_|_|_| |_|
</pre>
Das pre-Element enthält ein Bild, dass aus einzelnen Zeichen „gemalt“ wurde. Hierbei sind die einzelnen Positionen innerhalb des Rasters aus Zeilen und Spalten wichtig.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]