IN ARBEIT

4. Blockformate u.ä.

Zum Inhaltsverzeichnis


Browser: Microsoft Internet Explorer (MSIE) 6.0 SP2 (Referenz), Firefox 2.0.0.6


Zitat: <blockquote> ... Zitat ... </blockquote>

Mit <blockquote> entsteht ein klassischer Block, siehe unten: Im Fließtext (ohne Zeilenumbruch) steht nach "Stimme:" <blockquote>, und sofort beginnt <blockquote> mit der "Block-Arbeit". Es steht kein <p> oder <br> (bzw. zwei <br>) und doch wird eine Leerzeile eingeschoben, ein Absatz ausgeführt. Der blockquote-Block benötigt also weder ein einleitendes noch ein abschließendes Umbruch- oder Absatzzeichen, einzelne <br> oder <p> werden ignoriert. Es steht automatisch ein <p>. Abstandvergrößerungen entstehen durch Kopplungen von <p> und <br> (<p> <br>). Binnenabsätze erreicht man mit <p> und <br>.

... murmelte eine Stimme:

Und es werde Licht... Aber es blieb dunkel. Dann aber wurde es doch hell, allerdings immer noch nicht so hell, daß man was sehen konnten. Die Götter lachten zu all dem, was das Zeug hielt.
Hier geht der Rahmentext weiter...



Text im Rasterformat (Schreibmaschinensatz): <pre> ... Text ... </pre>

Anwendung: Schreibmaschinen-Layout, Tabellen aller Art, tabellarischer, "eingefrorener" Text. Der pre-Block benötigt kein einleitendes und abschließendes Umbruch- oder Absatzzeichen. Einzelne vorangesetzte und abschließende <br> oder <p> ignoriert der Block, er setzt automatisch ein <p> (Blockverhalten). Innerhalb eines <pre></pre> setzt man im allgemeinen kein <br> oder <p>. Man gestaltet die Abstände selbst. Einrückungen, Spalten, Abstände usw. werden, wie auf der Schreibebene eines nicht formatierenden Texteditors gestaltet bzw. beibehalten.

Beachte: Beispiele für die Arbeitsweise des pre-Tags können nicht getrennt als einfacher Quellcode und dessen formatiertes Ergebnis dargestellt werden. Hat der Quellcode z.B. große Zwischenräume, Abstände oder unregelmäßige tabellarische Strukturen, gehen diese in der HTML-Formatierung des Browsers verloren. Will man nun in dem einen oder anderen Fall nicht nur ein bloßes Ergebnis präsentieren, sondern die Tags, das Programm, mitanzeigen, dann muß der Quellcode, um die Textstruktur zu erhalten, mit Hilfe des pre-Tags formatiert werden. In diesem Fall geht aber dessen bildliche Darstellung verloren. Gleichzeitig soll diese aber erhalten bleiben!? Wie soll das gehen? Hier hilft ein Trick: Dem formatierenden Tag <pre> </pre> fügt man auch die sich nicht ausführenden Umschreibungen der Tags bei, hierbei läßt sich aber nicht verhindern, daß diese, wie alles andere auch, formatiert und in der Rasterschrift des pre-Tags angezeigt werden, d.h., das angezeigte Ergebnis sieht wie ein Quellcode aus, was es auch ist, denn es werden ja die Tags und die Quelltextstruktur dargestellt. Das scheint ganz plausibel zu klingen. Aber der Quellcode ist gar nicht der Quellcode, denn hinter dem sogenannten Quellcode steckt noch ein wirklicher Quellcode (rechte Maustaste: Quelltext anzeigen). Wir haben es also mit drei Zuständen zu tun: einem Urquellcode, einem angezeigten Quellcode, der gleichzeitig das Ergebnis ist bzw. beinhaltet. Ein bißchen zwittrig ist das alles, ganz und gar nicht klar: Ergebnis und Quellcode in einem, und dahinter noch ein Urquellcode. Manchmal ist die Materie wirklich nicht einfach darzustellen oder zu durchschauen.

1) Grundfunktion:

<pre>Ein Satz          mit          Zwischenräumen (jeweils 10 Leerstellen).</pre>
Es steht vor und nach dem pre-Block kein <p>, und dennoch ist ein Zeilenabstand da. Der Grund ist oben angeführt worden: Der pre-Block setzt von sich aus eine Leerzeile vorweg und danach (wenn man so will: er schiebt eine Leerzeile ein), oder noch anders (praxisorientiert) gesagt: <pre> und </pre> stehen jeweils für ein <p>. Der formatierte Text entsteht mit Hilfe einer Rasterschrift. Was das hier in diesem Fall heißt, versucht der folgende Punkt zu klären.

2) Schriftgrad-Vergleich: <pre> contra <tt>

<pre>Dies ist ein Größenvergleich.</pre>
<tt> Dies ist ein Größenvergleich.</tt>

MSIE (Test nur mit Fassung 6.0 SP2) und Firefox (Tests seit Fassung 1.5.0.7) haben bei beiden Tags die gleiche Schriftgröße voreingestellt. Man kann also in Sonderfällen bei festen Textformen statt <tt> auch mal <pre> einsetzen:

<pre>DieserSatzIstVon<pre>Und</pre>umschlossen.</pre>
Beachte: In all den obigen "pre-Fällen" steht weder vor noch nach dem pre-Block ein <p>. Man kann zwar eins setzen, es würde aber geschluckt.

Ich setze die pre-Tags im allgemeinen so:

<pre>
Ein Satz          mit          Zwischenräumen (jeweils 10 Leerstellen).
</pre>
3) Vertikaler Abstandhalter, Platzhalter

... Schluß eines Textes.

<pre>





11 + 2 Zeilen Abstand (formatierter Schriftgrad, siehe oben)





</pre>
Beginn eines neuen Textes...

4) Abstände im pre-Block mit <br> und <p>

Man kann, wie oben schon gesagt, auch innerhalb des pre-Blocks mit Tags Abstände erreichen. Hierbei sollte man aber einiges beachten.

Nach einem <br> entsteht EINE Zeile Zwischenraum.

<pre>
1. Zeile (2. Zeile im Quelltext anschließend)<br>
2. Zeile (3. Zeile im Quelltext anschließend)<br>
3. Zeile </pre>
Nach einem <p> entsteht im MSIE (Test nur mit Fassung 6.0 SP2) ebenfalls eine Zeile Zwischenraum, der Firefox (Test seit Fassung 1.5.0.7) aber produziert ungefähr ZWEI Leerzeilen! Das Höhenmaß ist bezogen auf die im pre-Block verwendete Rasterschrift (Schrift gleicher Schrittweite), zum Schriftbild siehe oben.
<pre>
1. Zeile (2. Zeile im Quelltext anschließend)<p>

2. Zeile (3. Zeile im Quelltext anschließend)<p>

3. Zeile </pre>

Abstandvergrößerungen entstehen (wenn man das so machen will) durch <p><br> usw. oder <br><br> usw.

Das pre-Tag wird mitunter als bequemer, variabler vertikaler Abstandgenerator verwendet, das wurde oben gezeigt. Aber auch horizontale Abstände auf einer Zeile lassen sich damit setzen, aber nur unter Inkaufnahme von je einer Abstandzeile oben und unten, außerdem muß irgendein Text zwischen den Tags sein, sonst entsteht ein vertikaler Abstand von drei Zeilen. Das Höhenmaß ist bezogen auf die im pre-Block verwendete Rasterschrift (siehe oben).

5) Beispiel für einen Zwischenraum in einer Textzeile, Zeilenbeginn mit Text:

Beschreibung: In einer Zeile steht ein <pre>, gefolgt von einem kurzen oder langen Zwischenraum (1 Leerstelle bzw. 40 Leerstellen). Der Zwischenraum wird von einem </pre> abgeschlossen (<pre> bis </pre> alles in derselben Zeile). Ergebnis: Es entsteht ein vertikaler Abstand von immer drei Leerzeilen.

Das ist Text A, in dem zwischen <pre>

 
</pre> 1 Leerstelle steht (alles in derselben Zeile). Das Ergebnis ist zu sehen, Kommentar unten.

Das ist Text B, in dem zwischen<pre>

                                        
</pre> 40 Leerstellen stehen (alles in derselben Zeile). Das Ergebnis ist zu sehen, Kommentar:

Wie man sieht, ergibt sich in beiden Fällen ein gleicher vertikaler Abstand: drei Zeilen in Rasterschrift (siehe oben). Erklären läßt sich relativ einfach. Die Anzahl der Leerstellen wird gleich 1 gesetzt und dann wird oberhalb und unterhalb dieses Zeichens je eine Leerzeile ergänzt. Das ist nichts anderes als klassisches Blockverhalten, ein bißchen kaschiert allerdings.

6) Beispiel für einen Zwischenraum in einer Textzeile, Zeilenbeginn mit <pre>:

Im Gegensatz zu Fall 5) hat das folgende Beispiel zwar auch einen leeren Zwischenraum (30 Leerstellen) in der Zeile, diese beginnt aber nicht mit Text, sondern mit <pre>. Nun arbeitet der Blocksatz wie folgt: Es bleibt der Zwischenraum (30 Zeichen in Rasterschrift, siehe oben) erhalten, außerdem erscheint der Text in Rasterschrift, und es wird vor <pre>und nach </pre> eine Leerzeile einschoben. Dieses typische Kennzeichen des pre-Blocksatzes ist also auch hier da. Insgesamt sind es also wieder drei Zeilen: Leerzeile, Textzeile, Leerzeile.

... Schluß eines Textes.

<pre>MiMiMi Ab-                              stand MiMiMi</pre>
Anfang eines neuen Textes...

7) Beispiel für einen "eingefrorenen" Text komplexerer Art:

<pre>
Dies    war im Quelltext ein Zwischenraum,         das noch einer, also eine
eingefrorene Wiedergabe.
Der ganze Text wird unverändert, wie geschrieben, angezeigt. Das heißt: 

Alle Buchstaben haben die gleiche Schrittweite. 
Auch schreibt der Text ins Uferlose, wenn Sie ohne einen ausdrücklichen
Zeilenumbruch (Return) weiterschreiben.
Die automatischen Umbrüche, die der Editor gewohnterweise setzt,
gibt es hier nicht. Jetzt im Quelltext ein Absatz:

Also: Alle                                Zwischenräume, Absätze, Leerzeichen und
ausdrücklichen Zeilenumbrüche, die Sie setzen, 
bleiben erhalten. Schriftveränderungen werden ausgeführt, ebenso

Absatzzeichen, wie eben das <p> direkt nach "ebenso", wobei, wie Sie sehen, das Leerzeichen vor "Absatzzeichen" (zwei Beispiele für Schriftvergrößerung) erhalten bleibt. Im normalen Text (Beispiel siehe unten) fällt dagegen ein führendes Leerzeichen weg. Falls Sie Schriftvergrößerungen einsetzen, müssen Sie darauf achten, daß sich horizontal Ihr Text nicht ins Uferlose ausbreitet. Auf diese Weise werden auch Rahmen-Layouts gesprengt. Sie müssen eben passend per Hand umbrechen. </pre>

Jetzt folgt wieder normaler Text (voreingestellte Formatierung des Browsers). Hier steht nach jetzt

ein <p> und obwohl im Quelltext vor "ein" etliche Leerzeichen stehen, fallen sie in einem nicht "eingefrorenen" Text bis auf eines weg. Für <br> gilt das alles analog.

8) Rätsel

Sie sehen zunächst einen Quellcode, das ist der eigentliche Quellcode. Er wird hier "Quellcode 2" genannt, weil ihm ein (für die Darstellung notwendig) speziell zubereiteter Urquellcode zugrunde liegt (Ansicht über rechte Maustaste: Quelltext anzeigen). Und Sie sehen ein Ergebnis, auch diesem liegt ein Quellcode zugrunde, und zwar der "Quellcode 2". Versuchen Sie anhand des bisher Gesagten und Gezeigten die vier (eigentlich aber nur drei) Darstellungen ("Zustände") zu erklären. Ich weiß: Das ist ein ziemlich kniffliges Rätsel!

Quellcode 2:

xxxxxxxxxxxxxxxxxxxxxxxxx<br>
Dies ist wohl <pre>Rasterschrift</pre> und dies <pre><b>dicke Rasterschrift</b></pre>.<br>

yyyyyyyyyyyyyyyyyyyyyyyyy

Ergebnis:

xxxxxxxxxxxxxxxxxxxxxxxxx
Dies ist wohl

Rasterschrift
und dies
dicke Rasterschrift
. yyyyyyyyyyyyyyyyyyyyyyyyy (den Punkt nicht übersehen!)



Adresse: <address> ... Adresse ... </address>

Der address-Block ist ein seltsames Blockformat. Im MSIE wird er weder durch einen Freiraum (eine Leerzeile) eingeleitet noch abgeschlossen. Der Firefox hingegen setzt eine Leerzeile voran, doch am Schluß hängt er dann keine Leerzeile dran. Das Blockformat bricht, wie hier:
und dann hier:
Fließtext um, wobei der zwischen den Umbrüchen stehende Text kursiv ausgeführt wird. So jedenfalls formatiert der MSIE (Test: ab Fassung 5.5) und der Firefox das address-Modul (der veraltete MSIE 3.0 liefert ein chaotisches Ergebnis, das wir übergehen wollen).

Das Befehlspaar ist also offenbar (wie schon der Name sagt) für Adressen gedacht, aber ob das irgendjemand benutzt, ist die Frage:

<address>

Minimus Megasoft
PC-Straße 8080
Adresshausen
</address>

Der Befehl wirkt eigentlich wie ein Mix aus <br> und <i> (Firefox einleitend: <p>). Intern kennt der address-Block keine automatischen Zeilenumbrüche. Man muß für diese Zwecke <br> oder <p> setzen. Welche Schriftform bzw. -art voreingestellt ist, könnte je nach Browser verschieden sein. Beim MSIE (Test: ab Fassung 5.5.) und Firefox jedenfalls ist nur die Ausführung

kursiv
gesetzt. Ein Schriftartenwechsel ändert daran nichts, siehe in dem Beispiel unten das zur Nichtproportionalschrift Courier abgeänderte "Germania Transalpina". Auch innerhalb einer kursiven Umgebung ändert der address-Befehl seine Voreinstellung "kursiv" nicht. Texthervorhebungen sind möglich. Die Leerstelle vor "Germania Transalpina" fügt sowohl der MSIE (Test: ab Fassung 5.5.) als auch der Firefox ein.

...diese Zeile wird ohne <br> abgeschlossen.

Paulus Banausus
Via Barbara XXII
LX  CCCXXV Francofortum ad Moenum
Germania Transalpina
Dies ist die dem Block direkt nachfolgende Zeile, Ende des address-Blocks. Nach "Germania Transalpina" kein <br>!, sonst nach jeder Zeile immer <br> (Anzeige: MSIE ab 5.5 = Firefox). Einen Zeilenabstand zum Block erhält man am Anfang beim MSIE nur durch <p> (nicht durch <br>!), am Schluß durch <p> oder <br>.



Quelltext: <code> ... Text ... </code>

Anwendung: Schreibmaschinen-Layout, Programmiercode.

Der Text erscheint in "Quellcode-Schrift": Ab jetzt ist das so, also Schreibmaschinenschrift (Rasterschrift), alle Zeichen haben die gleiche Schrittweite:

...;;;---+++
mmmaaawwwiii)

Und jetzt haben wir wieder den regulären (proportionalen) Schrifttyp des Browsers.

Weitere solche Formatierungsbefehle siehe Abteilung "Schreiben (b), Schrift" unter "Auch Schreibmaschinenschrift (?)": <kbd> = keyboard (Eingabekennzeichnung), <samp> = sample (Beispiel)



Blinken: <blink> ... Text/Bild/Graphik ... </blink>

Beachte: Netscape/Firefox-Befehl

Wenn das alles hier NICHT blinkt, hält sich der Browser zumindest in diesem Fall an HTML 4.01. Der MSIE (6.0 SP2) unterstützt diesen Befehl nicht. Der Firefox aber läßt blinken, obwohl <blink> im HTML 4.01 (letzte Fassung) nicht enthalten ist.



Stand: 11.8.2007

Zum Inhaltsverzeichnis  Nach oben  Weiter