HTML-Befehl <pre>
- vorformatierter Text
Dieser HTML-Befehl hat die Eigenschaft, dass die Ausgabe des umschlossenen Textes immer vorformatiert ausgegeben wird.
Das bedeutet für die Ausgabe durch <pre>
- Leerzeichen (whitespaces) werden alle ausgegeben
- Zeilenumbrüche werden ausgegeben
- Tabs werden wiedergegeben
- Dicktengleiche Schriftart (alle Zeichen haben die gleiche Breite) wird verwendet
Im Vergleich zum HTML-Befehl <p>
aus dem letzten Kapitel macht das einen riesigen Unterschied. Browser fassen bei der Ausgabe mehrere Leerzeichen zusammen zu einem Leerzeichen und zeigen keine Textumbrüche an (sofern nicht ein entsprechender HTML-Befehl für Umbrüche verwendet wurde).
Beispiel für <pre>
Wenn wir folgende 3 Textzeilen uns ansehen, kommen dort Leerzeichen mitten im Text, eine Einrückung und Zeilenumbrüche vor:
Hier kommen 3 Leerzeichen mitten im Satz vor! Eine Einrückung vor diesem Satz und ein Um bruch (orthografisch nicht korrekt)
Ausgabe über <p>
Die Ausgabe bei Verwendung von <p>
würden mehrere hintereinander folgende Leerzeichen zu einem zusammengefasst, Umbrüche würde aufgehoben und alles kommt am Stück:
Hier kommen 3 Leerzeichen mitten im Satz vor! Eine Einrückung vor diesem Satz und ein Umbruch (orthografisch nicht korrekt)
Der entsprechende HTML-Code dazu:
<p>Hier kommen 3 Leerzeichen mitten im Satz vor!
Eine Einrückung vor diesem Satz und ein Um
bruch (orthografisch nicht korrekt)</p>
Das ist das übliche Verhalten von den meisten HTML-Befehlen und ist auch praktisch und geschickt. Will man das allerdings nicht, dann benötigt man als HTML-Befehl <pre>
.
Ausgabe über <pre>
Bei Verwendung von <pre>
erfolgt die Ausgabe wie der Text vorliegt mit allen Umbrüchen und Leerzeichen:
<pre>Hier kommen 3 Leerzeichen mitten im Satz vor!
Eine Einrückung vor diesem Satz und ein Um
bruch (orthografisch nicht korrekt)</pre>
Und als Ausgabe:
Hier kommen 3 Leerzeichen mitten im Satz vor! Eine Einrückung vor diesem Satz und ein Um bruch (orthografisch nicht korrekt)
Fallstricke bei <pre>
Hierbei ist wichtig, dass bei sehr langen Textzeilen diese auch nicht umgebrochen werden und man dann im Browserfenster nach rechts scrollen muss!
Bitte unbedingt einmal probieren!
Anwendungsfeld von <pre>
Wofür benötigt man solche Ausgabearten? Diese Ausgaben bieten sich beim Anzeigen von Computercode wie HTML, CSS, JavaScript oder z.B. der Programmiersprache Python an. Bei dem Quellcode von Python sind die entsprechenden Leerzeichen sogar zwingend notwendig, sonst würde das Programm nicht laufen.
Hier ein Beispiel aus https://www.python-lernen.de/while-schleife.htm (eine Schwesterseite vom HTML-Seminar (wenn man Python lernen mag):
durchgang = 0 while durchgang < 11: print(durchgang) durchgang = durchgang + 1 print("nach der Schleife")
Würde die dritte Zeile ohne die entsprechenden Leerzeichen im Editor eingegeben, käme es zu einem Fehler und das Programm würde abbrechen.
Analysiert man auf der Seite https://www.python-lernen.de/ den HTML-Code, findet man folgenden Aufbau:
<pre>
<code>
durchgang = 0
…
</code>
</pre>
Wer sich über die Schachtelung von <code>
innerhalb von <pre>
wundert: <pre>
hat keinen Charakter, außer dass die Ausgabe preformatiert ausgegeben wird. Dagegen hat <code>
den Charakter, dass es sich bei der Ausgabe laut Definition um einen Computercode handelt.
Tipp am Rande
Mit <pre>
kann man Daten ausgeben, damit alles sauber untereinander kommt. Oft würde man dafür sonst eine aufwendigere Tabelle (die entsprechenden HTML-Befehle für Tabellen kommen in einem späteren Kapitel) verwenden.
Das klappt, wenn man <pre>
verwendet auch und ist manchmal der schnellere Weg.
Beispiel:
Messwerte Stadion 19u3 2.9342 Messwerte Stadion 4a2 15.23 Messwerte Stadion 3n323 0.343
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).
Spenden
Sie können uns eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.
Bücher über Amazon
Bestellen Sie Bücher über folgende Links bei Amazon:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details