SELFHTML: HTML / Absatztypen und Textgestaltung / Horizontale und vertikale Abstände
Description: (SELFHTML 7.0) Wie Sie in HTML Horizontale und vertikale Abstände, zum Beispiel zwischen Absätzen, definieren können.
Keywords: SELFHTML, HTML, Abstände, Spacer

SELFHTML/Quickbar HTML Absatztypen und Textgestaltung

| ## Horizontale und vertikale Abstände
| Vertikale Abstände definieren Horizontale Einrückungen definieren Treppeneffekte definieren Unsichtbare Bilder definieren

## Vertikale Abstände

Anzeigebeispiel: So sieht's aus

Ein HTML-Tag, das von Netscape ab V3.0 interpretiert wird, erlaubt es, horizontale und vertikale Leerräume einzufügen. Dadurch lassen sich beispielsweise Absatzabstände manuell vergrößern.

Für viele Möglichkeiten, die dieser Befehl bietet, stehen mittlerweile die offiziell standardisierten CSS Style-Sheets zur Verfügung. Der hier beschriebene Befehl gehört dagegen nicht zum HTML-Standard.

### Beispiel:

    Hier ist ein Absatz zu Ende.
    <p>   <!-- Ein neuer Absatz wird eingefügt -->
    <spacer type=vertical size=30>
    Ein neuer Absatz beginnt hier. Der Abstand zum vorherigen Absatz ist
    deutlich größer als gewöhnlich

### Erläuterung:

Mit `<spacer ...>` leiten Sie einen Zwischenraum ein (spacer = "Raumschaffer"). Notieren Sie das Tag genau an der Stelle, wo Sie den Zwischenraum wünschen. Mit der Zusatzangabe `type=vertical` geben Sie an, daß es ein vertikaler Zwischenraum sein soll, wie es für Absatzabstände erforderlich ist. Mit dem Attribut `size=` bestimmen Sie die Größe des Abstands. Die Angabe erfolgt in Pixeln (size=Größe).

## Horizontale Einrückungen

Anzeigebeispiel: So sieht's aus

Sie können beispielsweise die erste Zeile eines Absatzes einrücken, so wie es in vielen Büchern und Zeitschriften üblich ist.

### Beispiel:

    Hier ist ein Absatz zu Ende.
    <p>   <!-- Ein neuer Absatz wird eingefügt -->
    <spacer type=horizontal size=12>Ein neuer Absatz beginnt hier.
    Die erste Zeile des Absatzes wird eingerückt.

### Erläuterung:

Mit `<spacer ...>` leiten Sie die Einrückung ein. Notieren Sie das Tag am besten vor dem ersten Wort des Absatzes, also dem Wort, das eingerückt werden soll. Mit `type=horizontal` erzwingen Sie einen horizontalen Zwischenraum, wie es für Einrückungen erforderlich ist. Mit `size=` geben Sie an, um wieviel Pixel die Zeile eingerückt wird.

## Treppeneffekte

Anzeigebeispiel: So sieht's aus

Sie können mehrere Zeilen stufenweise horizontal einrücken und auf diese Weise Treppeneffekte erzielen. Da die horizontale Einrückung auch innerhalb von Zeilen erlaubt ist, sind sogar "mehrspaltige Treppen" möglich.

### Beispiel:

    Die erste Zeile<spacer type=horizontal size=50>Mit Abstand<br>
    <spacer type=horizontal size=20>Die zweite Zeile<spacer type=horizontal size=50>Mit Abstand<br>
    <spacer type=horizontal size=40>Die dritte Zeile<spacer type=horizontal size=50>Mit Abstand<br>
    <spacer type=horizontal size=60>Die vierte Zeile<spacer type=horizontal size=50>Mit Abstand<br>
    <spacer type=horizontal size=40>Die fünfte Zeile<spacer type=horizontal size=50>Mit Abstand<br>
    <spacer type=horizontal size=20>Die sechste Zeile<spacer type=horizontal size=50>Mit Abstand<br>
    Die siebte Zeile<spacer type=horizontal size=50>Mit Abstand<br>

### Erläuterung:

Im Beispiel können Sie sehen, wie das `<spacer>`-Tag sowohl vor Textzeilen als auch innerhalb von Textzeilen sinnvoll verwendet werden kann. Die Zeilen zwei bis sechs im Beispiel werden am Zeilenanfang durch `<spacer type=horizontal ...>` um so viel Pixel eingerückt wie bei `size=` angegeben. Die Angaben sind so gewählt, daß sich ein Treppeneffekt ergibt. Innerhalb jeder der sieben Zeilen des Beispiels wird nochmals ein horizontaler Abstand mit fester Breite von 50 Pixeln eingefügt. Dadurch ergibt sich eine zweite "Treppe" mit festem horizontalen Abstand zur ersten Treppe.

## Unsichtbare Bilder

Anzeigebeispiel: So sieht's aus

Sie können "unsichtbare Bilder" definieren, d.h. Rechtecke von frei wählbarer Größe. Diese unsichtbaren Bilder haben auf den umgebenden Text die gleiche Auswirkung wie referenzierte Grafiken (siehe hierzu Text um Grafiken fließen lassen).

### Beispiel:

    <spacer type=block width=100 height=50 align=left>Der hier stehende Text
    fließt links um ein unsichtbares Rechteck.

### Erläuterung:

Durch die Attribute `type=block` (block = Rechteck), `width=` (width=Breite) und `height=` (height=Höhe) definieren Sie ein Rechteck für den gewünschten Leerraum. Mit `width=` bestimmen Sie die Breite des Rechtecks, mit `height=` die Höhe. Beide Angaben erfolgen in Pixeln. Wenn Text um das Rechteck fließen soll, sollten Sie die Ausrichtung festlegen. Mit der Angabe `align=left` fließt der folgende Text rechts um das links ausgerichtete Rechteck, mit der Angabe `align=right` fließt er links um das rechts ausgerichtete Rechteck.

### Beachten Sie:

Wenn Sie diesen Befehl gleich hinter dem einleitenden <body>-Tag notieren und die Höhe hinreichend groß wählen (z.B. `height=10000`), können Sie auf diese Weise Seitenränder erzwingen.

weiter: | Lauftext (Marquee)
zurück: | Mehrspaltiger Textfluß

SELFHTML/Quickbar HTML Absatztypen und Textgestaltung

© 1998 Stefan Münz, muenz@csi.com