IN ARBEIT

2. Schreiben (a)

Zum Inhaltsverzeichnis


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


Einfacher Text: Keine Tags

Für eine einfache (unformatierte) Textausgabe werden keine Tags benötigt.

Wenn das Gebiet für Sie vollkommen neu ist, können Sie mit der einfachen Texteingabe Ihre ersten Erfahrungen sammeln: Rufen Sie, wie oben beschrieben, das Hompepage-Modell "WebSeite.htm" auf und tippen Sie nach <body> den unten unter Quellcode stehenden Text ein. Wenn Sie die Datei dann abspeichern und aktualisieren oder neu aufrufen, müßte exakt das zu sehen sein, was Sie eingetippt haben. Mit einer Ausnahme: die Zeilenümbruche werden wohl nicht da sein, wo Sie im Quelltext von einer Zeile zur nächsten gewechselt sind. Über diesen HTML-Charakterzug reden wir etwas später.

Merke: Die Erscheinungsform des Textes in der GRUNDschriftform (also: welche Schrifttype, -größe, -stärke, usw.) hängt vom Browser ab. Auf diese GRUNDausgabe eines Textes hat man nur einen sehr beschränkten Einfluß.

Quellcode:

Einfacher Text wird einfach in die Tastatur eingegeben. Eventuelle Probleme, die unter Umständen deutsche Umlaute (Ä, Ö, Ü, ä, ö, ü, ß) und ausländische diakritische Zeichen (z.B. é, à, Ô) bereiten können, behandeln wir später.

Ergebnis:

Einfacher Text wird einfach in die Tastatur eingegeben. Eventuelle Probleme, die unter Umständen deutsche Umlaute (Ä, Ö, Ü, ä, ö, ü, ß) und ausländische diakritische Zeichen (z.B. é, à, Ô) bereiten können, behandeln wir später.


Textunterdrückung: <!-- ... --> oder <!-- ... //-->

Der unten nach "Quellcode:" folgende Text wird nicht angezeigt, d.h. nach "Ergebnis:" ist nichts zu sehen. Diese Funktion ist gedacht für Erläuterungen, interne Texte, stichwortartige Strukturierungen, Kommentare usw. Hier ein typisches Beipsiel:

<!-- Kommentar: Die folgende Programmierung ist zu umständlich, morgen noch mal checken! -->.

Umfaßt der zu unterdrückende Text mehr als eine Zeile, schreibt man zur Verdeutlichung am Schluß oft: //-->

Quellcode:

<!-- Diesen Satz sehen nur die Engel im Himmel. -->

<!-- Diesen Satz sehen nur die Engel im Himmel,
da mag sich der Teufel noch so anstrengen. //-->

Ergebnis:

 

 


Texthervorhebung (fett): <b> ... </b>

b = bold

Quellcode:

In diesem Text sind <b>fett gedruckte</b> Elemente enthalten, zunächst normal: # § % ( ) °, jetzt fett: <b># § % ( ) °</b>.

Ergebnis:

In diesem Text sind fett gedruckte Elemente enthalten, zunächst normal: # § % °, jetzt fett: # § % ( ) °.

Merke: Die Schlankheit oder Vollschlankheit mancher Zeichen, z.B. # oder °, mag je nach Browser schwanken.


Auch fett: <strong> ... </strong>

Das ist fett mit <strong> und dies auch: Heilig Sakrament! Aber das hier alles ist fett mit <b>: Kruzi, wer flucht denn da? Jetzt die Zeichen von eben, zunächst mit <strong> # § % ° und jetzt mit <b> # § % ( ) °. Je nach Browser kann es in der Hervorhebung Unterschiede geben.

Merke: Auch wenn die Fettheit gleich sein mag, so sind doch <b> und <strong> nicht miteinander vermixbar.


Fett und größer: <big> ... </big>

Dieser Fettmacher macht nicht nur fett, er macht auch größer, ein echtes "Aufblas-Tag". Sie sehen unten, was die Befehle <b>, <strong> und <big> im einzelnen bewirken. <strong> und <b> bewirken gleiches; auch läßt sich, wie Sie sehen, ihre Wirkung nicht vervielfachen: <strong> macht <strong> nicht "stronger". Anders der big-Tag: <big> macht <big> "bigger". Die erste Stufe nimmt sich noch bescheiden aus, aber mehrfach eingesetzt, ergibt er eine ordentliche Steigerung. Er ist der Befehl, mit man auf die Schnelle ein Memo oder eine Nachricht unübersehbar machen kann. Die Wirkung läßt sich noch mit <b> oder <strong> plakativ verstärken. Die Position der beiden Tags spielt dabei keine Rolle, nur überkreuzen dürfen sich die unterschiedlichen Tags nicht.

Daß sich <big> im Zusammenhang mit <b> und <strong> verwenden läßt, kann man für Hervorhebungen ausnutzen, die innerhalb dieser beiden Tags eingesetzt werden sollen und in HTML auf diese Art sonst nicht möglich wären. Beispiel: Dies alles ist fett mit <b> und zwischen drin kreuzt plötzlich fetter mit <big> auf. Somit eignet sich das "Aufblas-Tag" für regelrechte Plakateffekte, siehe auch unten..

Quellcode:

1. <big>Je größer die Schrift desto besser!</big>
2. <b>Je größer die Schrift desto besser!</b>
3. <strong>Je größer die Schrift besser!</strong>

Ergebnis:

1. Je größer die Schrift desto besser! (<big>)
2. Je größer die Schrift desto besser! (<b>)
3. Je größer die Schrift desto besser! (<strong>)

2 mal <big> mit <b> macht sich gut bei Textanfängen:

    Wenn das man einer glaubt,
was Sie da alles erzählen...

Weitere Anwendungen und Vergleiche:

WW ww MM mm II ii (ohne Tag)
WW ww MM mm II ii (<b>WW ww MM mm II ii</b>)
WW ww MM mm II ii (<b><b>WW ww MM mm II ii</b></b>)
WW ww MM mm II ii (<strong>WW ww MM mm II ii</strong>)
WW ww MM mm II ii (<strong><strong>WW ww MM mm II ii</strong></strong>)
WW ww MM mm II ii (<big>WW ww MM mm II ii</big>)
WW ww MM mm II ii (<big><big>WW ww MM mm II ii</big></big>)
WW ww MM mm II ii (3 x <big>)
WW ww MM mm II ii (4 x <big>)
WW ww MM mm II ii (4 x <big>, gekoppelt mit <b> ... </b>)

Beachte:

Die Wirkungsweise das big-Tags scheint von der Schriftart abzuhängen. Sehen Sie, was untenstehend bei der Schreibmaschinenschrift <tt> trotz 4 x <big> geschieht. Es hat offenbar der Browser ein Wort mitzureden. Der MSIE 5.5 jedenfalls gibt die Buchstaben nur größer, nicht aber dicker aus.

WW ww MM mm II ii


Klein: <small> ... </small>

Natürlich gibt es nicht nur <big>, es gibt auch <small> und es gibt <small><small>. Ab <small><small><small> scheinen sich die Browser an den Kopf zu fassen (das veraltete MSIE 3.0 übersieht alle <small>, MSIE 5.5 verkleinert nicht weiter).

Quellcode:

1. <small>Je kleiner die Schrift desto besser. </small>
2. <small><small>Je kleiner die Schrift desto besser. </small></small>
3. <small><small><small>Je kleiner die Schrift desto besser. </small></small></small>

Ergebnis:

1. Je kleiner die Schrift desto besser. (1 x <small>)
2. Je kleiner die Schrift desto besser. (2 x <small>)
3. Je kleiner die Schrift desto besser. (3 x <small>)


Kursiv: <i> ... </i>

i = italic(s)

Quellcode:

Dies sollte <i>kursiv</i> sein; dies <b><i>dick und kursiv</b></i>.

Ergebnis:

Dies sollte kursiv sein; dies dick und kursiv.

!! Paukerfrage: Was ist im angezeigten Quellcode falsch? Ein häufiger Flüchtigkeitsfehler.


Auch kursiv (?): <cite> ... </cite> | <dfn> ... </dfn> | <em> ... </em>

cite = zitieren
dfn = definition (definierter Text)
em = emphatic (betont)

Prüfen Sie, wie Ihr Browser <i>, <cite>, <dfn> und <em> darstellt. In den "Notizen" wird bei <i>Kursiv-Stellen</i> nur <i> eingesetzt!

Quellcode:

Dies ist wohl <i>kursiv</i> und dies <b><i>dick und kursiv</i></b>.
Dies ist wohl <cite>kursiv</cite> und dies <b><cite>dick und kursiv</cite></b>.
Dies ist wohl <dfn>kursiv</dfn> und dies <b><dfn>dick und kursiv</dfn></b>.
Dies ist wohl <em>kursiv</em> und dies <b><em>dick und kursiv</em></b>.

Ergebnis:

Dies ist wohl kursiv und dies dick und kursiv.
Dies ist wohl kursiv und dies dick und kursiv.
Dies ist wohl kursiv und dies dick und kursiv.
Dies ist wohl kursiv und dies dick und kursiv.


Unterstrichen: <u> ... </u>

u = underlined

Beachte: Das Tag Unterstreichung eines normalem Textes steht eigentlich auf der Streichungsliste der standardsetzenden HTML-Kommission (W3C). Als Grund wird die mögliche Verwechslung mit Verweisen (Links) angegeben, die bekanntlich in ihrer Urform unterstrichen sind (siehe Verweise). Mittlerweile gibt es aber Text- und Link-Gestaltungen derart unterschiedlicher Art, daß im Grunde die angebliche Verwechslungssituation auf Schritt und Tritt gegeben ist. Zudem erfordert eine Vielzahl professioneller Textdarstellungen die Existenz der Funktion Unterstreichung. Sie ist auch im Internet flächendeckend gängige Praxis. Eine Entscheidung am grünen Tisch wäre demnach eine Entscheidung an der Praxis vorbei. Mit anderen Worten, es ist damit zu rechnen, daß die Browser die Funktion weiterhin unterstützen.

Quellcode:

<u>Dies ist unterstrichen</u> und dies folgt dem Sprichwort: <u><b><i>Dreifach genäht, hält besser</i></b></u>.

Ergebnis:

Dies ist unterstrichen und dies folgt dem Sprichwort: Dreifach genäht, hält besser.


Durchgestrichen: <strike> ... </strike> oder <s> ... </s>

s = strike (gestrichen). Beide Befehle sollen aus dem Tag-Katalog gestrichen werden. Siehe hierzu die Anmerkung unter <u>.

Prüfen Sie, ob Ihr Browser <strike> und <s> darstellt, wenn ja, wie. Die Passagen müssen komplett durchgestrichen sein. Der eigentlich veraltete MSIE 3.0 bewerkstelligt im mittleren Schriftgrad-Modus (Ansicht/Schriftgrad/Mittel) die Sache etwas eleganter. Er streicht so durch, daß die "kleinen" Kleinbuchstaben von einer Linie mittig durchzogen sind. Dies bedeutet für die Großbuchstaben natürlich: unteres Drittel. Der MSIE 5.5 hingegen erledigt seine Aufgabe bei diesem Schriftgard häßlich: Hier werden die Großbuchstaben mittig durchgestrichen und die "kleinen" Kleinbuchstaben gerade noch so erwischt. Erst bei den nächst größeren Schiftgraden ("größer" buw. "sehr groß") ist die Anzeige so wie beim MSIE 3.0, also befriedigend.

Quellcode:

Dies sollte <strike>durchgestrichen</strike> sein; dies <b><strike>dick und
durchgestrichen</strike></b>; dies <b><strike><u>dick, durchgestrichen und
UNTERSTRICHEN</u></strike></b>.

Dies sollte <s>durchgestrichen</s> sein; dies <b><s>dick und
durchgestrichen</s></b>; dies <b><s><u>dick, durchgestrichen und
UNTERSTRICHEN</u></s></b>.

Ergebnis:

Dies sollte durchgestrichen sein; dies dick und durchgestrichen; dies dick, durchgestrichen und UNTERSTRICHEN.

Dies sollte durchgestrichen sein; dies dick und durchgestrichen; dies dick, durchgestrichen und UNTERSTRICHEN.

Eine Unterbrechung des Befehls hilft dem MSIE 5.5 auch nicht auf die Sprünge: wer denkt sich SO WAS AUS?


Zeilenumbruch erzwungen: <br>

br = break. Merke: Kein Endtag, warum auch!

Browser haben einen eigenen automatischen Zeilenumbruch, der sich nach der Bildschirm-, Tafel- oder Tabellenbreite richtet. Man kann dies anhand dieses Textes leicht nachvollziehen. Wo sind beim verwendeten Editor und wo beim Browser die Zeilenumbrüche? Will man im Browser an einer bestimmten Stelle einen Zeilenumbruch erzwingen, obwohl der Text im Editor vielleicht nach Bindfadenart immer weitergehen mag (dies tut er hier), setzt man einfach ein <br>, wie jetzt hier nach dem Doppelpunkt:
Oder wie bei der nun erzwungenen Silben-
trennung.

Das br-Tag ist im Rahmen der Layout-Gestaltung ein wichtiger Funktionsträger:

  • durch Reihung als vertikaler, variabler Abstandshalter (siehe weiter unten unter &nbsp;)
  • bei Schriftverkleinerungen als Schlußjustierer der letzten Zeile (siehe unter Tafeln/Tabellen)


Zeilenumbruch aufgehoben: <nobr> ... </nobr>

nobr = no break. Merke: Nicht im W3C-Codex, funktioniert aber dennoch im Microsoft und Netscape Browser.

Mit dem nobr-Tag wird der automatische Zeilenumbruch aufgehoben. Dies hat aber zur Folge, daß die Zeilen so lang werden können, daß sie über den Rand des Bildschirms hinaus bis ins Jenseits reichen, so daß die horizontale Scroll-Leiste weiterhelfen muß.

Mit diesem Tag lassen sich wichtige Textgestaltungen erreichen:

  • man kann dem unkalkulierbaren Zeilenumbruch zum Trotz Wörter "binden", d.h. man kann den Zeilenumbruch zwischen zwei ganz bestimmten Wörten verhindern (siehe auch weiter unten unter &nbsp;)
  • in Tabellen kann man Wörter so "zusammenleimen", daß der Browser die Zellenweite beibehält oder auseinanderstemmt (siehe unter Tafeln/Tabellen)


Umbruchaufhebung unterbrochen: <nobr> ... <wbr> ... </nobr>

wbr = word-wrap break. Kein Endtag in HTML, warum auch. Merke: Wie <nobr> nicht im W3C-Codex, funktioniert aber dennoch beim MSIE, jedoch nicht beim Firefox!

Textumbruch jenseits des rechten Bildschirmrands an der wbr-Stelle oder innerhalb eines langen Textes, der über den Bildschirmrand hinaus ginge; wbr-Tags innerhalb eines Textes in Bildschirmbreite werden ignoriert. Welchen praktischen Nutzen dieses Tag in einer textorientrierten Arbeit wie dieser hier haben könnte, ist mir noch nicht klar. Ich experimentiere noch.

Das Beispiel unten zeigt, wann <wbr> umbricht und wann nicht. Die ersten wbr-Tags werden an meinem Bildschirm (Breite: 1024 Pixel) ignoriert. Es entsteht eine lange Zeile, die bei dem fetten <wbr> umgebrochen wird. Der nachfolgende Text paßt samt dem <wbr> in die Bildschirmbreite, wird also nicht umgebrochen, danach folgt bis zum nächsten <wbr> wieder ein kurzer Text, auch er wird nicht umgebrochen. Daß heißt, ab dem betonten <wbr> entsteht eine ununterbrochen lange Zeile und ein dementsprechend langer Scroll-Balken. Beachte: Im folgenden Beispieltext steht kein wirkliches <nobr>, sonst hätten wir einen realen Fall und die Tafelbreite würde gesprengt.

<nobr>Wie oben <wbr> gesagt, hebt <wbr> das nobr-Tag den automatischen <wbr>Zeilenumbruch auf. Hier bei den ersten drei zunächst nicht, jetzt aber: <wbr> Der Text würde sonst im Bildschirmjenseits verschwinden, doch mit einem wbr-Tag kann eben eine solche lange Zeile unterbrochen werden. Mit anderen Worten: Geht ein Text über den Bildschirm hinaus, wird der Text da umgebrochen, wo der Befehl steht. Steht ein <wbr> in einem Text, der die Bildschirmbreite nicht überschreitet, wird es ignoriert, wenn der nachfolgende Text ebenfalls die Bildschirmbreite nicht überschreitet.</nobr>

Merke: <nobr>Die Befehle <br>
und <p>

brechen kategorisch um, egal wo sie stehen.</nobr>


Absatz: <p> ... </p>

p = paragraph. Kein Endtag erforderlich. Doch im Hinblick auf XHTML, der Weiterentwicklung von HTML, sollte man ein </p> setzten. Ich setze das Endtag erst ein, wenn es unumgänglich ist. Die wichtigen Online-HTML-Checker monieren das Fehlen derzeit noch nicht.

Zunächst erfolgt mit <br> ein Zeilenumbruch (hier:),
obwohl das im Quellcode nicht so ist (hier nochmal:):
Und nun wird gleich ein Absatz eingebaut, also ein Zeilenumbruch mit nachfolgender Leerzeile und zwar hier:

Dies wäre nun sozusagen der nächste Absatz. Er ist vom Absatz davor durch eine Leerzeile getrennt.

Merke: Man kann soviele <p> hinter- oder untereinander setzten, soviele man will, es wird immer nur ein <p> ausgeführt!


Ausgerichtete Absätze: <p align="left"   ="center"   ="right"> ... </p>

Dieses Tag kennt drei Attribute. Das Schlußtag, dessen Setzung nicht erforderlich ist, und ein einfaches <p> heben den jeweiligen Befehl auf. Der darauf folgende Text erscheint automatisch linksbündig, denn <p align="left"> ist voreingestellt.

Quellcode:

<p align="right">
Rechtsbündig

<p align="center">
Mittig

<p align="left">
Linkbündig

<p align="right">
Rechtsbündig

<p>
Einfache Aufhebung (linksbündig)

Ergebnis:

Rechtsbündig

Mittig

Linksbündig

Rechtsbündig

Einfache Aufhebung (linksbündig)


Das Leerzeichen: &nbsp;

nbsp = non-breaking space (nicht umbrechendes Leerzeichen)

Dem Leerzeichen kommt (seinem Namen entgegengesetzt) bei der Textgestaltung höchste Bedeutung zu. Hochnäsige, puristische Webdesigner rümpfem allerdings die Nase, wenn sie Codes sehen, die bei der Gestaltung auf das &nbsp; zurückgreifen. Doch horizontale Abstände (vertikale siehe unten) sind schnell per Kopie gezaubert: 1 &nbsp; kopiert, ergibt für die Horizontale 2, 2 werden 4, 4 werden 8, 8 werden 16, 16 werden 32. Von dieser Rechnerei ganz abgesehen hat man meistens irgendwelche &nbsp;-Latten im Quellcode parat. Denn der abstandhaltende Lückenbüßer findet immer wieder Verwendung. Vor allem innerhalb von Tafeln und Tabellen (siehe dort) ist er nicht wegzudenken.

Sie müssen wissen: Stehen im Quellcode zwei oder mehr normale Leerzeichen (blanks, white blanks, white spaces = Nicht-&nbsp;-Leerzeichen) hintereinander, ziehen die Browser sie zu einem einzigen Leerzeichen (white space) zusammen, das in bestimmten Fällen - z.B. als führendes Zeichen am linken Bildschirmrand - auch noch verschluckt wird. Das gesonderte Tag für ein VOLLES Leerzeichen gibt es deshalb aus gutem Grund:

  (sic!), 1 Leer zeichen, 2 Leer  zeichen, 3 Leer   zeichen. Jede Menge Leer                                        zeichen.

Sie können mit dem &nbsp; auch den Browser "leimen", indem Sie, wie auch mit dem nobr-Tag, Wörter derart einanderleimen, daß der Umbruch unterbrochen wird. Wenn Sie wollen, daß eine Phrase durch den automatischen Umbruch nicht auseinandergerissen wird, ist das sehr praktisch. Dasselbe gilt für die innere Gestaltung von Tafeln und Tabellen (siehe dort). Ich zeige Ihnen hier ein kleines Tafel-Beispiel, das unter ungünstigen Umständen den Umbruch in Tafeln, aber auch den im rechten Bildschirmbereich, simuliert.

Nehmen wir an, zwei "ungeleimte" Wörter lauten: das Haus. Schauen Sie, was der Browser am Rand macht:

das Haus

Jetzt aber heißt die Phrase: das&npsp;Haus. Damit klopfen wir dem selbstherrlich formatierenden Browser ordentlich auf die Finger:

das Haus

Anmerkung: Das Beispiel funktioniert nicht an Bildschirmen mit einer Breite von mehr als etwa 2000 Pixel. Aber wer hat schon sowas?


Vertikale Abstände: <br><br> | <br>&nbsp;<br> | <p><br> | <p>&nbsp;<br> bis <pre> ... </pre>

Das Tag <p> kann man nicht als Befehl für große Abstände oder auch nur für ein paar Leerzeilen verwenden. Ganz gleich wieviele Tags <p> aufeinanderfolgen, die Browser ziehen sie zu einem einzigen zusammen. Hier helfen nur Kombinationen weiter, die aber wohl alle je nach Browser mehr oder weniger große Unterschiede zeigen.

Zunächst eine Maßvorgabe, die Ihnen helfen soll, zu ermitteln, wie Ihr Browser überhaupt den Abstand "Zeilenumbruch" <br> berechnet. Der folgende Quellcode hat durch die zu Text umgewandelten br-Befehle als Abstandshalter 5 Zeilen; das nachfolgende Ergebnis zeigt, welch einen Abstand im Vergleich dazu 5 <br> de facto ergeben. Beim MSIE 5.5 sieht das so aus: Er vergibt für 1 Zeile und 1 <br> gleiche Abstände, also 5 Zeilen = 5 <br>. Das ist keineswegs immer so (ein extremer, besser gesagt, chaotischer Berechner war der MSIE 3.0: 1 Zeile ist erheblich höher als 1 <br>). Sie messen die Abstände am besten mit einem Lineal, wobei das "T" von "Text" als Grundlinie dienen mag.

Quellcode (um des Vergleichs willen Quellcode und Ergebnis in gleicher Schrifttype):

...vorheriger Text.
<br>
<br>
<br>
<br>
<br>
Nachfolgender Text...

Ergebnis (MSIE 5.5: 5 Textzeilen):

...vorheriger Text.





Nachfolgender Text...

Das folgende Abstandbeispiel ermöglicht vielleicht eine noch genauere Vorstellung. Beim MSIE 3.0 beispielsweise erreichen 6 <br> noch nicht einmal den Abstand von 5 Textzeilen. Der MSIE 5.5 dagegen verhält sich erwartungsgemäß: 6 Textzeilen.

Der folgende Abstand besteht aus 6 <br>:

...vorheriger Text.






Nachfolgender Text...

(Anmerkung zu den Ergebnis-Quellcodes, also zu den richtigen, ausführbaren Programmen: Ob die Tags im wirklichen Code hintereinander oder untereinander angeordnet sind, ist gleichgültig. Es dürfen nur keine Leerstellen (whites spaces, blanks) zwischen den Befehlen stehen.)

Jeder HTML-Kundige weiß natürlich, man kann Abstände mit <br> und <p> setzen. Aber es scheint oft nicht klar zu sein, daß das zu sehr unterschiedlichen Ergebnissen führen kann. Wer sich damit genauer beschäftigt, begibt sich auf ein Gebiet, in dessen Rahmen der Begriff "Abstand" immer komplizierter wird. Bislang haben wir nämlich die Höhenangabe nur auf Leerzeilen bezogen, was immer das, "bezogen auf Höhe", heißt. Wenn man will, könnte man hierbei von einem "relativen" Abstand sprechen. Ein Abstand aus soundsovielen Leerzeilen. Wenn es so etwas wie einen relativen Abstand gibt, müßte es auch einen "absoluten" geben. Ihn aber zu definieren oder zu einem handlichen Etwas werden zu lassen, dürfte schwer fallen, weil er von zu vielen variablen Faktoren abhängt (Schrifttype, Zeichengröße, Auflösung usw.).

Wir wollen aber nicht abirren und bei den beiden unerläßlichen Programmierbegleitern <br> und <p> bleiben. So wichtig sie sind, ihr Zusammenspiel kann sich als kaum berechenbar herausstellen. Zunächst zu ihrer Einschätzung untenstehend wieder eine Vergleichsmöglichkeit. In beiden Fällen liegen 6 Teilabstände vor, es ergeben sich aber möglicherweise je nach Browser 2 verschiedene Gesamtabstände. Der Grund dafür wäre, daß Zwischenräume und Zeilen auf unterschiedlichste Art berechnet werden können und daß zudem die "Höhen" von <br> und <p> ebenfalls nicht immer zusammenpassen. Beim MSIE 3.0. gibt es eine erhebliche Disharmonie, beim MSIE 5.5 dagegen glücklicherweise Zeilenharmonie. Hier der Vergleich:

Quellcode (um des Vergleichs willen Quellcode und Ergebnis in gleicher Schrifttype):

...vorheriger Text.
<br>
<br>
<br>
<br>
<br>
<br>
Nachfolgender Text...

...vorheriger Text.
<p>
Doppeleinheit 1: "Zeilen" 1 + 2
<p>
Doppeleinheit 2: "Zeilen" 3 + 4
<p>
Doppeleinheit 3: "Zeilen" 5 + 6
Nachfolgender Text...

Ergebnis (MSIE 5.5: 6 Textzeilen):

...vorheriger Text.






Nachfolgender Text...

...vorheriger Text.

Doppeleinheit 1: "Zeilen" 1 + 2

Doppeleinheit 2: "Zeilen" 3 + 4

Doppeleinheit 3: "Zeilen" 5 + 6
Nachfolgender Text...

Sollte ein Browser keine klare Linie verfolgen, wird man im Einzelfall nicht ums Probieren herumkommen, wobei sich nach einiger Zeit bestimmte Vorlieben einstellen werden. Es folgen nun einige Grundtypen von Abstandhalter, deren Berechnungen im Rahmen Ihres Systems möglicherweise sehr unterschiedlich ausfallen kann.

a) <br> (Zeilenumbruch)

...vorheriger Text.
Nachfolgender Text...

b) <p> (MSIE 5.5: 1 Zeile Abstand)

...vorheriger Text.

Nachfolgender Text...

c) <br><br> (MSIE 5.5: 1 Zeile Abstand)

...vorheriger Text.

Nachfolgender Text...

d) <br>&nsp;<br> (MSIE 5.5: 1 Zeile Abstand)

...vorheriger Text.
 
Nachfolgender Text...

e) <br><p> (MSIE 5.5: 1 Zeile Abstand!!)

...vorheriger Text.

Nachfolgender Text...

f) <p><br> (MSIE 5.5: 2 Zeilen Abstand!!)

...vorheriger Text.


Nachfolgender Text...

g) <p>&nbsp;<br> (MSIE 5.5: 2 Zeilen Abstand)

...vorheriger Text.

 
Nachfolgender Text...

h) <p>&nbsp;<p> (MSIE 5.5: 3 Zeilen Abstand)

...vorheriger Text.

 

Nachfolgender Text...

Ein ganz wichtiger vertikaler Abstandhalter ist das Gefrierfach: <pre> ... </pre>. Mit diesem Blockbefehl (siehe Blockformate) kann man auf die Schnelle variabel große und größte Abstände gestalten. Es empfiehlt sich, zu Sicherheit wenigstens ein &nbsp; in den Befehlscontainer zu setzen. Es soll Browser geben, die leere pre-Container zusammenschieben. Sehr gute Abständeproduzenten (horizontal wie vertikal) sind auch Tafeln im Zusammenspiel mit einer transparenten Ein-Pixel-Datei (siehe Tafeln/Tabellen).

i) <pre> ... </pre>

...vorheriger Text.

                      
Nachfolgender Text...


Vertikale Abstände - Blockabstände: <br> | <br>&nbsp; | <p><br> | <p>&nbsp; usw.

Allgemeine Angaben zu voreingestellten, außergewöhnlichen Abstandsverhältnissen, z.B. bei Blockformaten, findet man bei den jeweiligen Befehlen. Um der Übersicht willen werden diese Hinweise hier gesammelt, wobei gleichzeitig die Anwendung in der Praxis genauer untersucht wird. Das könnte hilfreich sein, denn wer Quelltexte studiert, bemerkt sehr schnell, daß viele unnötige und falsch gesetzte <br> und <p> in den Programmierkünsten herumgeistern. Dieses Urteil muß allerdings insofern etwas eingeschränkt werden, als beispielsweise die sich wenig konsequent verhaltenden alten Versionen des MSIE besondere Vorgehensweisen verlangten.

Es sei noch einmal darauf aufmerksam gemacht, daß eine Vervielfachung von <p> keine Abstandsvergrößerung erwirkt. Das folgende Beispiel zeigt Ihnen das (beachten Sie bitte, als Referenz dient immer der MSIE 5.5).

Quellcode (um des Vergleichs willen Quellcode und Ergebnis in gleicher Schrifttype):

...vorheriger Text.
<p><p><p>
Nachfolgender Text...

Ergebnis:

...vorheriger Text.

Nachfolgender Text...

Zu den Blockformaten gehört u.a. die Überschrift (siehe weiter unten). Zusätzlich zum Ein-Zeilen-Block, der der Schrift voreingestellt vor- bzw. und nachgeschaltet ist, müßte Ihr Browser bei dem untenstehenden Beispiel eine weitere (Text-)Zeile hinzuaddieren. So ist das jedenfalls beim MSIE 5.5-Browser.

Die sich daran anschließende Übersichtstabelle über das Verhalten der Befehle <br> und <p> bzw. einiger ihrer Kombinationen mag verwirren, doch wer die eingesammelten Ergebnisse mit den oben angeführten Zeilenabständen vergleicht, die diverse Abstandhalter produzieren, wird auf Analogien stoßen. Daß zwischen <br><p> und <p><br> ein Unterschied besteht, scheint einen guten Grund zu haben. Jedenfalls werden wir einen solchen in den Abteilungen Schriftverkleinerung und Tafeln/Tabellen antreffen; dort lernen wir, wie das Tag <br>, als Schlußjustierer zur "Abstandsnullnummer" degradiert, einen wichtigen Dienst tut.

Merke: Die Funktion <table>< (Tafeln/Tabellen) bewirkt kein Blockformat. Tafeln bzw. Tabellen werden wie ein Textteil eingebunden.

Zur Tabelle: Sie vereinfachen sich die Programmierpraxis, wenn Sie nur die beiden fett ausgegebenen Abstandhalter einsetzen. Dann brauchen Sie sich eigentlich nichts zu merken, alles Nachschlagen entfällt.


KNIFF

<p><br>... BL0CK <p><br>...

<p> steht für den bereits voreingestellten Raum (MSIE 5.5: ca. 1 Textzeile), ein <br> steht für jede zusätzlich vor- oder nachgesetzte Zeile.


Das Blockverhalten vor und nach <h1> ... </h1> (analog: h2, h3 h4, h5, h6)

Quellcode:

...vorheriger Text.
<br><br><br>
<h1>Überschrift</h1>
<p><br><p>
Nachfolgender Text...

Ergebnis (MSIE 5.5: Block + 1 Zeile Abstand):

...vorheriger Text.


Überschrift


Nachfolgender Text...


TABELLE: <br> und <p>

Befehle/Quellcode
Zusatzzeilen
Vor Block
Zusatzzeilen
Nach Block
<p> 0 0
<p><p> 0 0
<br> 0 1
<br><br> 0 1
<br><p> 0 1
<p><br> 1 1
<p><br><p> 1 1
<br><br><br> 1 2
<p><br><br> 2 2



Zentrieren: <center> ... </center>

Zentriert

Dieser Satz sollte auch zentriert sein.

Nach diesem Satz steht: </center>

Deshalb ist dieser Satz - da kein besonderer Befehl steht - nicht mehr zentriert, er steht automatisch linksbündig.


Überschriften: <h1> ... </h1> bis <h6> ... </h6>

h = headline

Merke: Die Größenstufen wachsen von 6 bis 1, also umgekehrt proportional zur Zählung.

Die Überschriftfunktion gehört zu den Blockformaten. Sie ist ein vorformatiertes Feld, d.h. um die Überschrift herum befindet sich so etwas wie ein abgschlossener Raum. Dieser wird - vertikal gesehen - von einer definierten "Leerzeile", deren Höhe nicht unbedingt etwas mit der einer Textzeile gemeinsam haben muß, eingeleitet und abgeschlossen. Dementsprechend ist, wie weiter unten gezeigt wird, vor und nach einer Überschrift zunächst kein <br> oder <p> nötig. Vor und nach einer Überschrift ist horizontal die Eingabe eines Textes nicht möglich. Es erfolgt in beiden Fällen ein automatischer Umbruch.

Überschrift h1

Überschrift h2

Überschrift h3

Überschrift h4

Überschrift h5
Überschrift h6


Zwei Beispiele für die Vorformatierung:

...vorheriger Text. (Es folgt automatisch ein Zwischenraum, eine "Abstandszeile", und ebenso automatisch die linksbündige Voreinstellung der Überschrift.)

Überschrift h1

Nachfolgender Text... (Auch hier ein automatischer Zwischenraum, eine "Abstandszeile", zudem die automatische, linksbündige Ausrichtung des nachfolgenden Textes.)

...vorheriger Text

Überschrift h6
Nachfolgender Text...


Ausgerichtete Überschriften: <h1 align="left"   ="center"   ="right"> ... </h1>

Funktionsverhalten wie vorher. Stufensteigerung ebenfalls: 6 bis 1. Voreinstellung: Attribut "left". <center> ... </center> bewirkt das dasselbe wie z.B. <h1 align="center"> ... </h1>.

Linksbündige Überschrift h1

Zentrierte Überschrift h2

Rechtsbündige Überschrift h3

 

Stand: 31.10.2007

Zum Inhaltsverzeichnis  Nach oben  Weiter