HTML-Dateien selbst erstellen: Inhaltsverzeichnis


Mehrspaltige Textflüsse und freies Plazieren von Elementen

 Mehrspaltige Textflüsse im Zeitungsstil
 Freies Plazieren von Text
 Anzeigebeispiele: Mehrspaltigkeit und freies Plazieren


Netscape ab V3.0 Mehrspaltige Textflüsse im Zeitungsstil

Bislang war die Realisierung von Mehrspaltigkeit in HTML nur mit  blinden Tabellen möglich. Netscape unterstützt ab Version 3.0 (beta 5 und höher) eine einfachere Methode, mehrspaltigen Fließtext im Zeitungsstil in HTML zu realisieren. Da jedoch noch kein anderer WWW-Browser als Netscape 3.0 diesen HTML-Befehl interpretiert, ist beim Einsatz im WWW Vorsicht angebracht.

Beispiel


  <multicol cols=3>
  Viel Text mit Überschriften, Absätzen, 
  Listen, dazu Bilder, Java ... alles möglich
  </multicol>  
  
Mit <multicol ... > leiten Sie einen mehrspaltigen Abschnitt ein. Zwingend erforderlich ist die Zusatzangabe cols=, mit der Sie die Anzahl der gewünschten Spalten festlegen.
Mehrspaltige Abschnitte können beliebige Elemente enthalten. Alles, was wischen dem einleitenden Tag <multicol ... > und dem abschließenden Tag </multicol steht, wird automatisch so verteilt, daß es sich optimal über die angegebene Anzahl Spalten erstreckt.
Bei Bildern, Java-Applets usw. kann es allerdings zu unschönen Anzeigen kommen. Denn anders als bei Tabellen richtet sich die Breite einer Spalte bei <multicol ... > nicht nach dem breitesten Inhalt, sondern nach der rechnerischen Spaltenbreite. Das kann dazu führen, daß Grafiken, die breiter sind als die Spalte, in die Nachbarspalte hineinreichen und sich mit dem dort stehenden Inhalt überlappen.

Erzwungene Spaltenbreite und Spaltenabstand

Sie können sowohl die Breite der Spalten als auch die Breite der Spaltenzwischenräume beeinflussen.

Beispiel


  <multicol cols=3 width=500 gutter=15>
  Viel Text mit Überschriften, Absätzen, 
  Listen, dazu Bilder, Java ... alles möglich
  </multicol>  
  
Durch die Zusatzangabe width= können Sie die Gesamtbreite der Spalten beeinflussen. Sie können eine Zahl oder einen Prozentwert angeben. Mit einer Zahl, z.B. 500, erzwingen Sie, daß alle Spalten zusammengenommen so viel Pixel breit sind wie angegeben. Mit einem Prozentwert erreichen Sie, daß alle Spalten zusammengenommen maximal vo viel Breite des Anzeigefensters einnehmen wie angegeben.
Mit der Zusatzangabe gutter= können Sie den Abstand zwischen den Spalten vergrößern oder verkleineren. Die Voreinstellung ist ein Abstand von 10 Pixeln. Mit einem höheren Wert erreichen Sie einen größeren Spaltenabstand, mit einem niedrigeren Wert einen geringeren Spaltenabstand.


 Seitenanfang


Netscape ab V3.0 Freies Plazieren von Elementen

Ein neues HTML-Tag, das von Netscape ab V3.0 (beta 5 und höher) interpretiert wird, erlaubt es, horizontale und vertikale Leerräume einzufügen. Dadurch lassen sich beispielsweise Absatzabstände vergrößern, erste Zeilen eines Absatzes einrücken oder Treppeneffekte realisieren. Auch "unsichtbare Bilder" lassen sich mit diesem Tag erzeugen. Das kann beispielsweise sinnvoll sein, um in Tabellen bestimmte Spaltenbreiten zu erzwingen oder um Text um diese unsichtbare Grafik fließen zu lassen. Da jedoch noch kein anderer WWW-Browser als Netscape 3.0 diesen HTML-Befehl interpretiert, ist beim Einsatz im WWW Vorsicht angebracht.

Absatzabstände frei definieren

Sie können Abstände zwischen Überschriften und Text sowie zwischen zwei Textabsätzen vergößern.

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
  
Mit <spacer ...> leiten Sie einen Zwischenraum ein. Notieren Sie das Tag an der genau an 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 der Angabe size= bestimmen Sie die Größe des Abstands. die Angabe erfolgt in Pixeln.

Erste Zeile eines Absatzes einrücken

Sie können 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.
  
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 der Zusatzangabe type=horizontal erzwignen Sie einen horizontalen Zwischenraum, wie es für Einrückungen erforderlich ist. Mit width= geben Sie an, um wieviel Pixel die Zeile eingerückt wird.

Treppeneffekte

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>
  
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 width= 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üt. Dadurch ergibt sich eine zweite "Treppe" mit festem horizontalen Abstand zur ersten Treppe.

Unsichtbare Bilder

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.

Beispiel


  <spacer type=block width=100 height=50 align=left>Der hier stehende Text
  fließt links um ein unsichtbares Rechteck.  
Durch die Zusatzangaben type=block, width= und height= 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.
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.


 HTML-Dateien selbst erstellen: Inhaltsverzeichnis
 Seitenanfang

Blättern:
Tabellen  |  Seitenränder, Farben, Hintergrundbilder und -musik


© 1996  Stefan Münz