SELFHTML:Beispiel-Dokumentationsseite

Aus SELFHTML-Wiki

Wechseln zu: Navigation, Suche

Achtung!

Demo der Seite Zeilenumbruch aus SELFHTML 8.1.2. Dient zur nur Erläuterung/Erarbeitung der verschiedenen Formatierungen, soll nicht inhaltlich übernommen werden, zumindest nicht ohne vorherige Kontrolle! Die Links zu den weiteren Unterseiten fehlen absichtlich.

Im Gegensatz zur bisherigen Version sind die Abschnitte „Erläuterung“ und „Beachten Sie“ als Zwischenüberschriften weggefallen. Die Informationen aus „Erläuterung“ sind in den Fließtext eingearbeitet worden da es sich um allgemeine Erläuterungen zum Thema handelte. Für Erläuterungen die sich direkt auf das Beispiel beziehen, kann das Modul BeispielText der Vorlage:Beispiel verwendet werden (ausführliche Anwendungshinweise siehe dort).

Für den Code in den Beispielen ist übrigens bewusst auf das <source>-Element zur automatischen Syntaxhervorhebung verzichtet worden, weil zu viel Farbe vom eigentlich zu Erläuternden ablenkt. Stattdessen wurden nur die besprochenen Elemente besonders hervorgehoben.

Für „Beachten Sie“-Informationen steht ebenfalls eine Vorlage zur Verfügung: Vorlage:Beachten.

Die Icon-Leiste unter den Zwischenüberschriften kann mit der Vorlage:Iconset erstellt werden, die einzelnen Icons am Seitenende wurden mit der Vorlage:Icon eingebunden.

Hinweis:

Diese Seite ist zur Bearbeitung gesperrt. Wenn Du Vorschläge hast, wie man dies hier besser machen könnte: Stelle Deinen Vorschlag auf der hiesigen Diskussionsseite oder unter Hilfe:Verbesserungsvorschläge zur Diskussion. Wenn der Vorschlag allgemeine Zustimmung findet, wird ein Administrator sich drum kümmern, diese Seite entsprechend anzupassen.


Inhaltsverzeichnis

Zeilenumbruch erzwingen

  • IE 1
  • Opera 5.12
  • Firefox 1.0
  • Konqueror 3.1
  • Safari 1.0
  • HTML 2.0
  • XHTML 1.0

Text innerhalb von normalen Absätzen, Listen, sowie in Überschriften oder Tabellenzellen wird vom Web-Browser bei der Anzeige automatisch umbrochen. Sie können jedoch an einer gewünschten Stelle einen Zeilenumbruch erzwingen, indem Sie ein <br> (br = break = Umbruch) einfügen. Dabei ist es egal, ob das alleinstehende Tag am Ende der vorherigen Zeile steht (wie im Beispiel), oder in einer eigenen Zeile, oder am Anfang der folgenden Zeile.

Beispiel
<html> <head> <title>Zeilenumbruch erzwingen</title> </head> <body> <h1>Ottos Brief an die Mutter</h1> <p>Liebe Mama!</p> <p>Vor drei Wochen habe ich erfahren,<br> dass Du krank bist.<br> Mach' Dir keine Sorgen.<br> Mir geht es gut.</p> </body> </html>
Der Text stammt aus dem Gedicht „Ottos Brief an die Mutter“, von Günther Hornberger, Kabarettist. Dessen Website http://www.hornberger-sonx.de/, ist allerdings nicht mehr erreichbar.
Beachten Sie: Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das br-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <br />. Weitere Informationen finden Sie im Kapitel XHTML und HTML.

Automatischen Zeilenumbruch verhindern

  • IE 2
  • Opera 5.12
  • Firefox 1.0
  • Konqueror 3.1
  • Safari 1.0

Sie können einen Textbereich bestimmen, in dem kein automatischer Zeilenumbruch erfolgt. Alles, was innerhalb dieses Bereichs steht, wird in einer langen Zeile angezeigt. Der Anwender kann dann mit der horizontalen Scroll-Leiste die überlangen Textzeile anzeigen.

<nobr> bewirkt, dass der auf das Tag folgende Text nicht umbrochen wird (nobr = no break = kein Umbruch). Am Ende des Textabschnitts, der nicht umbrochen werden soll, notieren Sie das abschließende Tag </nobr>.

Beachten Sie: Diese Möglichkeit gehört jedoch nicht zum offiziellen HTML-Sprachstandard. Sie sollten sie daher vermeiden und die CSS-Eigenschaft white-space verwenden. Wenn Sie Textzeilen unabhängig vom Anzeigefenster des Anwenders genau kontrollieren wollen und nach HTML-Standard arbeiten wollen, können Sie präformatierten Text einsetzen.
Beispiel
<html> <head> <title>Zeilenumbruch verhindern</title> </head> <body> <h1>ARD und ZDF</h1> <nobr>Die vom ZDF sagen, die vom ARD senden ständig Wiederholungen, und die vom ARD sagen, die vom ZDF senden ständig Wiederholungen, und so wiederholen sich ARD und ZDF ständig, ohne überhaupt etwas zu senden.</nobr> </body> </html>

Geschützte Leerzeichen

  • IE 2
  • Opera 5.12
  • Firefox 1.0
  • Konqueror 3.1
  • Safari 1.0
  • Leer

Sie können verhindern, dass bei einem Leerzeichen ein automatischer Zeilenumbruch erfolgen darf.

Die Zeichenfolge &nbsp; erzeugt ein geschütztes Leerzeichen (nbsp = nonbreaking space = Leerzeichen ohne Umbruch). Es wird ein normales Leerzeichen angezeigt, doch an dieser Stelle kann kein Zeilenumbruch erfolgen. Notieren Sie die Zeichenfolge inklusive dem "kaufmännischen Und" (&) am Beginn und dem Strichpunkt am Ende. Die gleiche Wirkung erzielen Sie durch Notieren der Zeichenfolge &#160;.

Zu dieser Art von Zeichennotation siehe auch benannte Zeichen für die Zeichenkodierung ISO 8859-1.

Durch Notieren mehrerer solcher benannter Zeichen hintereinander können Sie auch mehrere Leerzeichen in Folge erzwingen.

Beispiel
<html> <head> <title>Geschützte Leerzeichen</title> </head> <body> <h1>Es gibt vieles, worin sich HTML&nbsp;2.0 und HTML&nbsp;4.0 unterscheiden.</h1> <p>(Versuchen Sie zur Kontrolle einmal, das Anzeigefenster so schmal zu machen, dass der Text des obigen Satzes bei "HTML 2.0" oder "HTML 4.0" umbrochen wird.)</p> </body> </html>

Zeilenumbruch erlauben

Web-Browser brechen Text normalerweise nur bei Leerzeichen um, weil durch Leerzeichen Wörter voneinander abgegrenzt werden. Sie können explizit weitere Stellen markieren, an denen er den Text umbrechen darf. Sinnvoll ist dies bei langen Wörtern. Dies gilt für alle Absatzarten in HTML.

Beachten Sie bitte die Browserhinweise am Ende dieses Abschnitts.

Beispiel
<html> <head> <title>Zeilenumbruch erlauben</title> </head> <body> <h1>Langes Wort mit bedingtem Umbruch</h1> <h2>Bedingte Trennung mit <code>&amp;shy;</code></h2> <p>Donaudampfschiffahrts&shy;kapitänsmütze Donaudampfschiffahrts&shy;kapitänsmütze ... </p> <h2>Bedingte Trennung mit <code>&lt;wbr&gt;</code></h2> <p>Donaudampfschiffahrts<wbr>kapitänsmütze Donaudampfschiffahrts<wbr>kapitänsmütze ... </p> <h2>Bedingte Trennung mit <code>&amp;#8203;</code></h2> <p>Donaudampfschiffahrts&#8203;kapitänsmütze Donaudampfschiffahrts&#8203;kapitänsmütze ... </p> </body> </html>

Mit &shy; (= soft hyphen = bedingter Trennstrich) markieren Sie eine Stelle, an der getrennt werden darf, falls das Wort bei der Bildschirmanzeige am Ende der Zeile steht und der Platz für eine vollständige Darstellung nicht mehr ausreicht. Der Browser sollte das Wort an dieser Stelle mit einem Umbruch trennen und einen Trennstrich einfügen.

<wbr> (wbr = word break = Umbruch innerhalb eines Wortes) bewirkt ebenfalls einen optionalen Umbruch, fügt jedoch keinen Trennstrich ein. Innerhalb von Abschnitten mit verhindertem Zeilenumbruch bewirkt <wbr>, dass an der betreffenden Stelle trotzdem ein Umbruch erfolgen darf. <wbr> gehört nicht zum offiziellen HTML-Sprachstandard. Sie sollten dieses Element daher vermeiden.

Als Alternative wäre &#8203; (zero width space = Leerzeichen ohne Breite) denkbar, da bei Leerzeichen grundsätzlich ein Umbruch erfolgen darf. Allerdings erzeugt auch dieses Zeichen keinen Trennstrich und es ist nicht in jeder Schriftart enthalten, was dann zur Darstellung eines Kästchens führt.

Beachten Sie: Leider ist die Browserunterstützung mangelhaft und es kommt teilweise sogar zu Fehldarstellungen, sodass vom Einsatz in der Praxis abzuraten ist:
&shy; <wbr> &#8203;
IE 3 fehlerhaft nein fehlerhaft
IE 4 fehlerhaft kein Trennstrich fehlerhaft
IE 5.0 ja nein fehlerhaft
IE 5.0 (Mac-Version) fehlerhaft kein Trennstrich fehlerhaft
IE 5.5-IE 6 ja kein Trennstrich fehlerhaft
IE 7 ja kein Trennstrich kein Trennstrich
Opera 5.12-Opera 7.0 nein nein fehlerhaft
Opera 7.10-Opera 7.50 ja nein fehlerhaft
Opera 8.0-Opera 9.10 ja nein kein Trennstrich
Opera 5.12-Opera 7.0 nein nein fehlerhaft
Firefox 1.0-Firefox 2.0 nein kein Trennstrich kein Trennstrich
Konqueror 3.1-Konqueror 3.4 fehlerhaft kein Trennstrich fehlerhaft
Safari 1.0 fehlerhaft nein nein
Safari 2.0 ja nein kein Trennstrich

ja bedeutet, dass ein Umbruch erfolgt und ein Trennstrich sichtbar ist
nein bedeutet, dass die Notation keinerlei Auswirkung auf die Darstellung hat
kein Trennstrich bedeutet, dass zwar ein Umbruch erfolgt, jedoch kein Trennstrich sichtbar ist
fehlerhaft bedeutet, dass immer ein Trennstrich oder ein unerwünschtes Zeichen erscheint und/oder nicht umbrochen wird

Somit existiert derzeit keine Möglichkeit, bedingte Zeilenumbrüche zuverlässig und fehlerfrei einzusetzen.

Weitere Informationen

In der HTML-Referenz finden Sie genaue Angaben darüber, wo Zeilenumbrüche vorkommen dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
Element-Referenz für Zeilenumbrüche
Attribut-Referenz für Zeilenumbrüche

Von „http://wiki.selfhtml.org/wiki/SELFHTML:Beispiel-Dokumentationsseite“
Hilfe
Weitere Bereiche
Flattr