Umbruch-Arten

Aus Bloghandbuch

Wechseln zu: Navigation, Suche

Die Regeln für Umbrüche sehen im Internet (in der HTML-Welt) anders aus als wir das von Textverarbeitungsprogrammen wie MS WORD gewohnt sind.

Wir besprechen daher hier eigens:

  • den Zeilenumbruch,
  • den Absatzumbruch und
  • den Seitenumbruch.


Der Zeilen-Umbruch

Ein Beispiel mit vielen Absatz- aber auch zwei Zeilenumbrüchen
Der Abstand zwischen Absätzen ist bei Seiten, die in HTML konstruiert sind nie einzeilig. Die «Eingabe»-Taste (Return, Enter) führt daher nicht dazu, dass Text einfach in der nächsten Zeile mit einfachem Abstand weiter geht.

Soll der Abstand zwischen Absätzen unterdrückt werden, muss ein Zeilenumbruch statt dem Absatzumbruch durch die «Eingabe»-Taste eingefügt werden.

Der Zeilenumbruch wird in WYSIWYG-Editor durch die Tastenkombination:
«Hochstell»-Taste und «Eingabe»-Taste
eingefügt.

Also, statt «Enter» einfach «Shift» und «Enter» gleichzeitig drücken.


Ein Tipp:
Schule Dein Auge und sieh Dir Text auf Webseiten bewusst an.
Klick z.B. auf das Beispiel rechts. Kannst Du die zwei eindeutigen Zeilenumbrüche erkennen?
Schau Dir den Aufbau übersichtlicher Artikel auf Webseiten und in Blogs an, überleg wie die übersichtliche (Lese-)Wirkung zustande kommt und versuch das auf Deine eigenen Beiträge anzuwenden.


Der HTML-Code für den Zeilen-Umbruch

Muss der Zeilenumbruch nicht im WYSIWYG-Editor sondern in der Code-Ansicht definiert werden, so:

  • geht das in der Regel mit dem HTML-Code: <br />
  • genügt auf der WordPress-Oberfläche einfach die «Eingabe»-Taste und der damit erzeugte einzeilige Abstand.
    (Der HTML-Code <br /> wird dann automatisch eingefügt.)


Der Absatz-Umbruch

Der häufiger angewandte und wohl auch gewohnte Umbruch ist der Absatz. Mit der «Eingabe»-Taste wird automatisch ein Absatz definiert.

Soweit ist das identisch mit dem Gebrauch, der vom Textverarbeitungsprogramm MS Word allgemein bekannt ist. Allerdings wird in MS Word in der Regel nach einem Absatz kein automatischer Abstand zum nächsten Absatz erstellt sondern im einfachen Zeilenabstand weiter geschrieben. Das ist bei in HTML erstellten Webseiten nicht.

Zwischen Absätzen werden Absatzabstände wirksam.


Der HTML-Code für den Absatz-Umbruch

Der HTML-Code für einen Absatz ist anders als jener für den Zeilenumbruch zweiteilig:

<p>Der Beginn eines Absatzes wird durch den <p>-Tag definiert, das Ende durch den </p>-Tag. Alles dazwischen liegende wird als ein Absatz behandelt.<p>


Ein Tipp:
Zur Übung für das Verständnis von HTML-Code kann folgendes Spielchen betrieben werden.

Du siehst Dir eine besuchte Webseite im "Quelltext" an und versuchst Dir bekannte HTML-Codes zu finden und den Aufbau von Seiten ein Stück weit nachzuvollziehen.

Zum "Quelltext" kommst Du beim Internet Explorer über das Kontextmenü und den Befehl "Quelltext anzeigen", im Firefox über den Befehl "Seitenquelltext anzeigen".


Der Absatz-Umbruch im WordPress Texteingabefeld

Wie schon im Falle des HTML-Codes für den Zeilenumbruch muss auch der HTML-Code für den Absatz im HTML-Editor nicht eingegeben werden.

Arbeitet man nicht im WYSIWYG-Editor, so wird der Absatz durch zweimaligen Druck auf die «Eingabe»-Taste definiert.
Im HTML-Editor ist dann eine leere Zeile sichtbar. Auf der Blog-Vorderseite wird an dieser Stelle ein Absatzabstand angezeigt.


Der Seiten-Umbruch

Ein Beispiel für Seitenumbrüche aus einem GPA-djp Blog
Mit dem Begriff Seitenumbruch ist hier der Umbruch eines BlogEintrages gemeint.

Ein Artikel wird nur zum Teil angezeigt, nämlich bis zu der Stelle, an der der Seitenumbruch eingefügt wurde. Die BesucherInnen bekommen an dieser Stelle einen Link angeboten, der das Aufklicken des gesamten BlogEintrags möglich macht, falls das gewünscht ist.

Der Link heißt je nach Layout des Blogs ...

  • Lies mehr »
  • Read more »
  • (mehr ...)
  • (more ...)
  • Read the rest of this entry »
  • Weiterlesen ...

usw.


Im WYSIWYG-Editor der WordPress-Benutzeroberfläche heißt der Seitenumbruch «More-Element» und kann mit der entsprechenden Schaltfläche im Artikel eingefügt werden.


WP EditorSymbol MoreElement.png


Das Symbol für das «More-Element», den Seitenumbruch.


Der HTML-Code für den Seiten-Umbruch

Der Begriff «More-Element» wird besonders verständlich, wenn in die Ansicht des HTML-Editors gewechselt wird.

Der Seitenumbruch wird nämlich durch den HTML-Code <!--more--> eingefügt:


WP Editor MoreElement.png


An der Stelle dieses HTML-Codes wird im Artikel der Umbruch eingefügt. Das Löschen dieses Codes entfernt den Umbruch wieder.


Ein Tipp:
Versuch im Fall des Falles den Seitenumbruch immer möglichst nach der gleichen Menge Text zu setzten. Auf der für die BesucherInnen sichtbaren Vorderseite Deines Blogs sind dann alle Artikel bis zum jeweiligen Umbruch in etwa gleich lange.
Das ist ein guter Weg zu einem übersichtlichen Schriftbild und einer einheitlichen Wirkung.

Darüber hinaus hat der Seitenumbruch einen Vorteil. Du kannst in der Statistik des Blogs besser ersehen, welche Artikel wie oft angeklickt wurden. Das könntest Du bei zur Gänze auf der Vorderseite lesbaren Beiträgen sonst kaum sagen, da keine Klicks erfasst werden.


Benutzerdefinierter Text für den Seiten-Umbruch

Wie oben kurz erwähnt, ist der Text, der für die BlogBesucherInnen an der Stelle des Umbruchs als Link angezeigt wird von dem gewählten Layout des Blogs abhängig.

Das heißt in der Praxis manchmal, dieses oder jenes Layout würde eigentlich gefallen, aber der Seitenumbruch wird in dem jeweiligen "Theme" (Layoutthema) in Englisch angezeigt.

Selbst in diesem Fall kann der Text für den Seitenumbruch benutzerdefiniert geändert werden. Dazu muss in den HTML-Editor gewechselt und am HTML-Code des «More-Elements» herumgepfuscht werden:


WP Editor MoreElement adapt.png


Der Trick ist, in den Code <!--more--> nach dem Wort "more" hineinzuklicken und mit einen benutzerdefinierten Text einzugeben. Siehe das Beispiel im Bild oben aus dem eBetriebsratsBlog.

An der Stelle des Umbruchs erscheint als Linktext dann nicht der vom BlogLayout vorgegebene sondern der eigens gewählte Text.

Versuchs einmal ...