Die Suche wird zurzeit überarbeitet

HTML Basis

Gesamt-Inhalt  HTML-Inhalt  zurück  Weiter

HTML: Abstände und Einzüge

vertikal | horizontal | Umbrüche | Tricks


Vertikale Abstände

 
Wenn Sie in einem Textverarbeitungsprogramm einen Text eingeben und einen Zeilenumbruch (also einen neuen Absatz) erzwingen möchten, drücken Sie normalerweise die RETURN-Taste. Ein Browser, der ja Ihre HTML-Seiten darstellen soll, merkt von diesem erzwungenen Zeilenumbruch nichts. Er schreibt Text so lange hintereinander weg und bricht an geeigneten Stellen (=Leerzeichen) entsprechend der Größe des Browserfensters automatisch die Zeile um, bis er auf Anweisungen trifft, die ihm anderes befehlen.

Was sind das nun für spezielle Befehle? Zuerst genannt sei <BR>. An der Stelle, an der eine neue Zeile beginnen soll, geben Sie <BR> ein. Wenn Sie einen größeren Abstand zum nachfolgenden Text wünschen, läßt sich das mit <P> verwirklichen. Zum <BR>-Tag ist kein Ende-Tag erforderlich, während der <P>-Befehl mit </P> das Absatzende markieren sollte, wenn Zusatzattribute angegeben sind.

Beispieltext mit Zeilenumbruch am Ende.<BR>
Hier geht es dann mit der neuen Zeile weiter.<BR>
Und hier mit der folgenden, abgeschlossen mit<P>

Der <P>-Befehl am Ende der letzten Zeile bewirkt einen größeren Abstand, da er eine Leerzeile einfügt. Der <P>-Befehl hätte übrigens auch am Anfang dieses Absatzes stehen können. Das hätte die gleiche Wirkung.

Sie können in Ihrem Texteditor ja wunderbare Gebilde mit Texteinzügen und mit jeder Menge Leerzeichen und Leerzeilen konstruieren. Nützt wahrscheinlich alles nichts. Sobald ein Browser oder auch Drucker das in die Finger kriegt, dürfte es wohl aus sein mit der ganzen Herrlichkeit. Der Browser gibt z.B. nur noch ein Leerzeichen aus, auch wenn Sie im Editor 10mal hintereinander die Leertaste gedrückt hatten. Oder probieren Sie doch mal größere Abstände mit mehreren aufeinanderfolgenden <P>-Tags zu errreichen. War wohl nichts? Aber es gibt einige Tricks, um den Browser zu überlisten. Mehr dazu am Ende dieser Seite.

An dieser Stelle noch einige Hinweise:

  • Einige Tags (z.B. <H> und <HR>) sorgen von sich aus für den Abstand zum vorhergehenden und nachfolgenden Text.
  • Ein Browser kennt keine Silbentrennungsfunktion wie eine Textverarbeitung.
    Der IE trennt jedoch Wörter mit Bindestrichen am Zeilenende automatisch an einer Bindestrich-Position-Bindestrich-Position-Bindestrich-Position, wie hier am Beispiel zu sehen ist. Netscape und Opera lassen dagegen alles zusammen.
    Es gibt aber eine Möglichkeit, bei langen Wörtern oder Wörtern mit Bindestrichen eine Stelle mit <WBR> zu markieren, an der vom Browser getrennt werden kann, wenn das Wort über das Zeilenende hinausgehen sollte.
  • Es gibt auch eine Anweisung, die einen (automatischen) Zeilenumbruch ausdrücklich verhindert. Ein Text, der einem <NOBR>-Befehl folgt, wird solange nach rechts geschrieben, bis diese Funktion mit einem </NOBR>-Befehl aufgehoben wird.

Hinweis
Wird <NOBR> innerhalb einer Tabelle notiert, so kann bei Netscape der merkwürdige Effekt auftreten, daß der Text rechts über den Tabellenrand geschrieben wird und dann im Nirwana verschwindet. Er wird einfach unsichtbar, während IE und Opera die Tabelle entsprechend verbreitern und den horizontalen Scrollbalken anbieten. Benutzen Sie daher innerhalb von Tabellen das Attribut NOWRAP, also <TD NOWRAP> bzw. <TH NOWRAP>. Der danach folgende Text wird bis zum Abschlußtag </TD> bzw. </TH> auch bei Netscape nicht umgebrochen und ist komplett sichtbar.

Für <BR> gibt es noch die spezielle Funktion <BR CLEAR=ALL>, die Folgendes bewirkt:

SusiDas ist Text, der rechts um die Grafik fließt. Wenn der Text sehr lang ist, wird er irgendwann mal unter der Grafik weitergehen. Dies kann auch schon vorher erzwungen werden. Dazu notiert man an der gewünschten Stelle im Text ein <BR CLEAR=ALL>
und schon geht es direkt unter dem Bild weiter. Dies funktioniert übrigens auch bei Tabellen. Voraussetzung ist allerdings, daß Grafik und Tabelle (s.u.) mit dem Attribut ALIGN=LEFT (wie z.B. die Grafik) oder ALIGN=RIGHT versehen sind.

Zelle 1 von Reihe 1 Zelle 2 von Reihe 1
Zelle 1 von Reihe 2 Zelle 2 von Reihe 2
Zelle 1 von Reihe 3 Zelle 2 von Reihe 3

Auf der rechten Seite sehen Sie eine stilisierte Tabelle, der das Attribut ALIGN=RIGHT zugeordnet ist. Auch hier erzwingen wir jetzt mit <BR CLEAR=ALL>
die Fortsetzung des Textes unterhalb der Tabelle.

Die Programmierung im Zusammenhang mit Grafiken und Tabellen wird an anderen Stellen ausführlich beschrieben.

 

Horizontale Abstände

 
Ohne Angabe eines Attributs werden <P>-Absätze linksbündig ausgerichtet. Hier sollen aber noch drei Attribute nicht unerwähnt bleiben: CENTER, RIGHT und JUSTIFY. In diesem Fall ist die Benutzung des Ende-Tags </P> ratsam.

<P ALIGN=CENTER> ermöglicht eine zentrierte Ausrichtung.</P>

<P ALIGN=RIGHT> ermöglicht eine rechtsbündige Ausrichtung.</P>

Wenn Sie die letzte Anweisung für mehrere Zeilen hintereinander durchführen möchten, dann sollten Sie sinnvollerweise an geeigneten Stellen durch Einfügen von BR-Tags einen manuellen Zeilenumbruch durchführen. Sonst fällt die rechtsbündige Ausrichtung möglicherweise nicht besonders auf.

Jetzt also der gleiche Text noch einmal mit eingefügten Breaks:

<P ALIGN=RIGHT>Wenn Sie die letzte Anweisung für mehrere Zeilen hintereinander <BR>
durchführen möchten, dann sollten Sie sinnvollerweise an geeigneten Stellen<BR>
durch Einfügen von BR-Tags einen manuellen Zeilenumbruch durchführen.<BR>
Sonst fällt die rechtsbündige Ausrichtung möglicherweise nicht besonders auf. </P>

<P ALIGN=JUSTIFY> kann in aktuellen Browsern den Blocksatz einschalten. Damit wird ein Text gleichzeitig links- und rechtsbündig abgeschlossen. Dazu werden innerhalb des Textes automatisch Leerzeichen eingefügt. Damit man das überhaupt merkt, sollte der Absatz wie hier wenigstens über einige Zeilen gehen. Die letzte Zeile wird nicht gedehnt.

<DIV ALIGN=CENTER> oder <DIV ALIGN=RIGHT> ermöglicht die Ausrichtung nicht nur eines Absatzes, sondern es können gleich größere Textbereiche in dieser Art und Weise formatiert werden. Der entsprechende Bereich muß mit </DIV> abgeschlossen werden.

Das funktioniert wohl auch mit <CENTER>, sollte aber eigentlich auf eine Zeile beschränkt bleiben. Um den Bereich zu kennzeichnen, wird er mit </CENTER> beendet. Da CENTER meistens als Zusatzanweisung zu Befehlen benutzt werden kann, ist <CENTER> als Befehl eher überflüssig.

Mit <DIV> und <CENTER> werden übrigens keine Absätze erzeugt.

Auch einzelne Befehle wie z.B. H,TABLE,HR,IMG kennen die Attribute LEFT,CENTER,RIGHT. Das Attribut LEFT kann allerdings in diesem Zusammenhang vernachlässigt werden, weil es sowieso voreingestellt ist.

 

Einige Tricks

 
Wir hatten weiter oben gelernt, daß es auf den ersten Blick gar nicht so einfach ist, mehrere Leerzeilen hintereinander zu erzeugen. Geben Sie aber mehrere <BR> hintereinander ein, funktioniert es auf einmal. Und wo ein <P> hinter Befehlen für Überschriften und Trennungslinien versagt, bewirkt <BR> Wunder.

Mit &#160; oder &nbsp; kann an jeder beliebigen Stelle ein feststehendes Leerzeichen erzwungen werden. Sie können davon beliebig viele benutzen - natürlich auch hintereinander. Das feststehende Leerzeichen kann anstelle eines normalen Leerzeichen verwendet werden, um unerwünschte Zeilenumbrüche zu verhindern. Soll z.B. der Begriff "Windows 98" nicht auseinandergerisssen werden, so wird ein &#160; oder &nbsp; anstelle des Leerzeichens notiert.

Etwas eleganter ist die Nutzung des <PRE>-Tags. Einfach zwischen <PRE> und </PRE> einige Male auf die Leertaste oder die RETURN-Taste drücken und schon gewinnen Sie den nötigen Abstand. Das kann auch ganz gut zur Positionierung von Bildern genutzt werden. Allerdings sind mit <PRE> keine Abstände innerhalb einer Zeile zu verwirklichen.

PixelSehr beliebt und empfehlenswert ist eine Minigrafik, die lediglich ein Pixel groß ist und von daher auch den zügigen Seitenaufbau nicht behindert. Um universal einsetzbar zu sein, muß diese im transparenten GIF-Format erstellt werden. Das Tolle daran ist, daß man mit der Angabe einer Weite oder auch Höhe oder sogar in Kombination jede beliebige Größe erzeugen kann und daß aus diesem Bereich jeder Text verdrängt wird. Hier realisiert mit <IMG SRC="pixel.gif" ALT="Pixel" ALIGN=LEFT WIDTH=60 HEIGHT=100> und dann folgendem Text.

Eigentlich offiziell nicht dafür vorgesehen, sondern eher zum Hervorheben von Zitaten gedacht, kann für Texteinrückungen auch

<BLOCKQUOTE> mißbraucht werden. Zu Risiken und Nebenwirkungen fragen Sie bitte Ihren Browser. Aber auch hier das Ende-Tag nicht vergessen: </BLOCKQUOTE>.

Am sinnvollsten können horizontale und vertikale Abstände jedoch mit der Tabellenprogrammierung (vorzugsweise ohne Rahmendarstellung) erreicht werden. Etwas Programmierarbeit ist allerdings auch dafür notwendig. Dazu später mehr.

 

Netscape-Möglichkeiten

 
Netscape stellt ab der Version 3 ein <SPACER>-Tag zur Verfügung. Anscheinend gibt es kein entsprechendes Ende-Tag. Auf jeden Fall ist es nicht erforderlich. Das zusätzliche Attribut TYPE=HORIZONTAL oder TYPE=VERTICAL steht für die Ausrichtung des Zwischenraums: Horizontal oder vertikal. Die Größe des Zwischenraums wird durch SIZE=n festgelegt.

Horizontaler Beispielcode nur für Netscape:
Zeilenanfang<SPACER TYPE=HORIZONTAL SIZE=150>Zeilenende

ZeilenanfangZeilenende

Vertikaler Beispielcode nur für Netscape:
Anfang oben<SPACER TYPE=VERTICAL SIZE=150>Ende unten

Anfang obenEnde unten

Daß Netscape eine Plage für die Menschheit ist, wird auch hier wieder deutlich! Meine relativ aktuelle Version 6.21 stellt sich nämlich dumm und kennt auf einmal diese beiden Attribute nicht mehr. Na, mit mir nicht! Probieren wir's eben anders:

Mit TYPE=BLOCK und den zusätzlichen Angaben von WIDTH=n und HEIGHT=n in Pixeln umfließt der nachfolgende Text ein imaginäres Rechteck.

Beispiel nur für Netscape:
<SPACER TYPE=BLOCK WIDTH=150 HEIGHT=90 ALIGN=LEFT>Text...

Um einen unsichtbaren Zwischenraum links von hier steht dieser Text. Allerdings können das nur Netscape-Nutzer (sogar mit aktuellen Versionen!) sehen. Der Internet Explorer und Opera ignorieren die Abstandsangabe und zeigen den Text ganz normal linksbündig an. So ist das halt mit den Browsern. Wir nehmen es resignierend zur Kenntnis und werden das SPACER-Tag sicher niemals verwenden...


Zurück  Zum Seitenanfang  Weiter
http://www.htmlbasis.de Impressum