Text und Absätze in HTML-Dateien


Überschriften

siehe auch: Beispieldatei mit Überschriften

HTML unterscheidet 6 Überschriftenebenen, um Hierarchieverhältnisse in Dokumenten abzubilden.

Jede Überschrift ist ein eigener Absatz, d.h. vor und nach Überschriften sind keine Absätze nötig. Überschriften sind unnumeriert, d.h. wenn Sie eine Numerierung wünschen, müssen Sie diese manuell in den Überschriftentext mit eingeben. Beachten Sie beim Überschriftentext auch die Besonderheiten für deutsche Umlaute.

Beispiele für Überschriften:

(siehe auch: separate Anzeigebeispiele für Überschriften)
  <h1>Überschrift 1. Ordnung</h1>
  <h3>Überschrift 3. Ordnung</h3>
Überschriften wird durch das Tag <h[1-6]> eingeleitet. Die Nummer steht für die Überschriftenebene. 1 ist die höchste Ebene, 6 die niedrigste. Dahinter folgt der Text des Titels. Mit dem Tag </h[1-6]> wird die Überschrift abgeschlossen. Achten Sie darauf, daß die Nummern bei einleitendem und abschließendem Tag gleich sind.

Überschriften werden linksbündig ausgerichtet, wenn Sie nichts anderes angeben. Sie können eine Überschrift auch zentriert oder rechtsbündig ausrichten.

Beispiele für anders ausgerichtete Überschriften:

  <h1 align="center">Überschrift 1. Ordnung</h1>
  <h3 align="right">Überschrift 3. Ordnung</h3>
Durch die Angabe align="center" im einleitenden Tag erreichen Sie, daß die Überschrift zentriert ausgerichtet wird. Mit der Angabe align="right" wird die Überschrift rechtsbündig ausgerichtet. Die Angaben müssen in Anführungszeichen stehen.


Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Text und Absätze in HTML-Dateien

Absätze und Trennlinien

Absätze und Trennlinien dienen der optischen Gliederung eines Textes. Beim Erstellen von HTML-Dateien genügt es nicht, im Editor einen harten oder weichen Zeilenumbruch einzufügen. WWW-Browser ignorieren solche Umbrüche. Sie fügen nur dann Umbrüche bei der Textpräsentation ein, wenn sie auf die entsprechenden HTML-Befehle stoßen.

Wie in der Textverarbeitung üblich, gibt es harte und weiche Umbrüche. Harte Umbrüche bewirken einen neuen Absatz (mit entsprechendem Leerraum dazwischen), weiche Umbrüche erzwingen einen Zeilenumbruch an einer bestimmten Stelle, ohne Leerraum zwischen die Zeilen einzufügen.

Harten Umbruch einfügen

Einen harten Umbruch (Absatzschaltung) fügen Sie wie folgt ein.

Beispiel:

(siehe auch: separate Anzeigebeispiele für Absatz und Zeilenumbruch)
  Hier ist ein Absatz zu ende.
  <p>
  Hier beginnt ein neuer Absatz.
Ein harter Umbruch wird mit dem Tag <p> zwischen den beiden gewünschten Absätzen eingefügt. Dabei ist es egal, ob das Tag am Ende der Zeile des vorherigen Absatzes steht, oder in einer eigenen Zeile (wie im Beispiel), oder am Anfang des folgenden Absatzes.

Absätze werden linksbündig ausgerichtet, wenn Sie nichts anderes angeben. Sie können einen Absatz auch zentriert oder rechtsbündig ausrichten.

Beispiele für anders ausgerichtete Absätze:

(siehe auch: separate Anzeigebeispiele für Absatz und Zeilenumbruch)
  <p align="center">Dieser Absatz soll zentriert ausgerichtet werden.
  <p align="right">Dieser Absatz soll rechtsbündig ausgerichtet werden.
Durch die Angabe align="center" erreichen Sie, daß ein Absatz zentriert ausgerichtet wird. Mit der Angabe align="right" wird ein Absatz rechtsbündig ausgerichtet. Die Formatier-Anweisungen richten sich dabei auf den nachfolgenden Absatz, nicht auf den vorhergehenden. Die Angaben müssen in Anführungszeichen stehen.

Mehrere Absätze und Überschriften zentrieren

Die folgende Möglichkeit wird nur von wenigen WWW-Browsern interpretiert, meines Wissens nur von Netscape V1.1.

Beispiel:

  <center>
  <h1>Über Überschriften und Text</h1>
  Darüber gäbe es viel zu sagen, zu viel zu sagen.
  </center>
Mit dem Tag <center> wird alles, was folgt, zentriert ausgerichtet. Das können Überschriften, Text, Grafiken oder Tabellen sein. Mit dem abschießenden Tag </center> beenden Sie die Zentrieranweisung.

Weichen Umbruch einfügen

Einen weichen Umbruch fügen Sie wie folgt ein.

Beispiel:

(siehe auch: separate Anzeigebeispiele für Absatz und Zeilenumbruch)
  Hier ist eine Zeile zu ende.
  <br>
  Hier beginnt eine neue Zeile.
Ein weicher Umbruch wird mit dem Tag <br> zwischen den beiden gewünschten Zeilen eingefügt. Dabei ist es egal, ob das Tag am Ende vorherigen Zeile steht, oder in einer eigenen Zeile (wie im Beispiel), oder am Anfang der folgenden Zeile.

Ein weicher Umbruch behält alle Formatier-Anweisungen des Absatzes bei. Wenn Sie einen Absatz also z.B. zentriert oder rechtsbündig ausgerichtet haben, gilt das auch für die Zeilen nach dem weichen Umbruch.

Eingerückten Absatz einfügen

siehe Hervorhebungen im Text sowie separate Anzeigebeispiele für Absatz und Zeilenumbruch)

Trennlinie einfügen

Eine Trennlinie fügen Sie wie folgt ein.

Beispiel:

(siehe auch: separate Anzeigebeispiele für Trennlinien)
  Hier ist ein logischer Abschnitt zu ende.
  <hr>
  Hier beginnt etwas ganz Neues.
Eine Trennlinie wird mit dem Tag <hr> zwischen den beiden gewünschten Textabschnitten eingefügt. Dabei ist es egal, ob das Tag am Ende des vorherigen Textabschnitts steht, oder in einer eigenen Zeile (wie im Beispiel), oder am Anfang des folgenden Textabschnitts.

Trennlinien fügen automatisch einen harten Umbruch ein. Die Kombination von <p> und <hr> ist deshalb überflüssig.

Ab der neuen Sprachversion 3.0 von HTML können Sie auch zusätzliche Angaben zum Aussehen einer Trennlinie machen. Unter MS-Windows werden diese Features bislang nur vom WWW-Browser Netscape V1.1 unterstützt.

Beispiel:

  Hier ist ein logischer Abschnitt zu ende.
  <hr width="40%" size="10">
  Hier beginnt etwas ganz Neues.
Mit der Angabe witdth= können Sie die Trennlinie verkürzen (normalerweise geht sie über die gesamte Breite des Anzeigefensters. Dabei wird die Trennlinie je nach angegebener Länge zur Mitte hin ausgerichtet. Die Angabe erfolgt absolut (in Pixeln) oder relativ (in Prozent - im Beispiel: 40% Länge von der Breite des Anzeigefensters). Die Angabe in Prozent ist normalerweise vorzuziehen, da die Anwender unterschiedliche Bildschirmauflösungen besitzen. Die Angabe muß in Anführungszeichen stehen.

Mit der Angabe size= können Sie die Höhe der Trennlinie einstellen. Die Angabe erfolgt in Pixeln (im Beispiel: 10 Pixel - dadurch wird die Linie schon ziemlich dick). Die Angabe muß in Anführungszeichen stehen.


Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Text und Absätze in HTML-Dateien

Hervorhebungen im Text

Sie können einen Textbereich optisch hervorheben.

Beispiel:

  <strong>Das ist ein ganz wichtiger Text</strong>
Am Anfang des Textbereichs, der hervorgehoben werden soll, wird ein einleitendes Tag (im Beispiel das Tag <strong>) eingefügt. Am Ende des gewünschten Textbereichs wird ein entsprechendes Abschluß-Tag eingefügt (im Beispiel das Tag </strong>).

In HTML gibt es logische und physische Befehle zur Hervorhebung von Text. Bei logischen Befehlen entscheidet der WWW-Browser bzw. sein Anwender, wie ein solcher Text hervorgehoben wird (z.B. fett, kursiv oder andersfarbig). Bei physischen Befehlen entscheiden Sie bei als HTML-Autor, wie der Text hervorgehoben werden soll (z.B. fett oder kursiv). HTML-Puristen weisen immer wieder darauf hin, daß man nur logische und keine physischen Hervorhebungen verwenden solle. Der Grund ist, daß nicht-grafische Oberflächen (z.B. der DOS-Textmodus) fette und kursive Zeichen nicht anzeigen können.

Tags zur logischen Hervorhebung von Text

(siehe auch: separate Anzeigebeispiele für Hervorhebungen im Text)

Tags zur physischen Hervorhebung von Text

Schriftgröße manipulieren

Dieses Feature gehört zu der noch nicht normierten HTML-Version 3.0 und wird nur von wenigen WWW-Browsern (z.B. Netscape V1.1) unterstützt. Die Schriftgröße sollte nur in besonderen Fällen und für einzelne, besonders hervorzuhebende Wörter benutzt werden.

Beispiele:

(siehe auch: separate Anzeigebeispiele für Hervorhebungen im Text)
  <font size="7">Ziemlich riesiger Text</font>
  <font size="1">Ziemlich winziger Text</font>
  <font size="+1">Text etwas größer als normal</font>
  <font size="-2">Text deutlich kleiner als normal</font>
Die Änderung der Schriftgröße wird durch das Tag <font size=...> eingeleitet. Sie können eine Zahl zwischen 1 (sehr kleine Schrift) und 7 (sehr große Schrift) eingeben. Es handelt sich um relative Zahlen und nicht um tatsächliche Schriftgrößen. Bei der Präsentation werden die Zahlen vom WWW-Browser in tatsächliche Schriftgrößen umgerechnet, abhängig von der eingestellten Schriftgöße. Die Werte müssen in Anführungszeichen stehen.

Statt einer Zahl zwischen 1 und 7 können Sie auch mit + und - arbeiten. Dies ist sogar dringend zu empfehlen, da Sie nie wissen, welche Standard-Schriftgröße der Anwender und Leser Ihrer Datei eingestellt hat. Wenn Sie Angaben im Bereich +2 bis -2 machen, erzielen Sie wahrscheinlich die besten Ergebnisse.


Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Text und Absätze in HTML-Dateien

Auflistungen, Aufzählungen, Glossareinträge

Für Auflistungen, numerierte Aufzählungen und glossarartige Textabschnitte stehen eigene HTML-Befehle zur Verfügung.

Auflistungen

Auflistungen werden z.B. verwendet: Eine solche Auflistung fügen Sie in HTML wie folgt ein.

Beispiel:

  <ul>
  <li>Aufzählungspunkt
  <li>anderer Aufzählungspunkt
  <li>letzter Aufzählungspunkt
  </ul>
Die Aufzählung wird durch das Tag <ul> eingeleitet. Vor jedem Aufzählungspunkt wird das Tag <li> notiert. Angaben zum Zeilenumbruch sind nicht erforderlich, da der WWW-Browser bei jedem <li>-Tag automatisch einen Zeilenumbruch einfügt. Mit dem Tag </ul> wird die Aufzählung abgeschlossen.

Numerierte Aufzählungen

Numerierte Aufzählungen werden z.B. verwendet:
  1. um unterhalb einer Behauptung Argumente dafür aufzuzählen
  2. um eine Reihe von alternativen Möglichkeiten darzustellen.
Eine solche numerierte Aufzählung fügen Sie in HTML wie folgt ein.

Beispiel:

  <ol>
  <li>Aufzählungspunkt
  <li>anderer Aufzählungspunkt
  <li>letzter Aufzählungspunkt
  </ol>
Die Aufzählung wird durch das Tag <ol> eingeleitet. Vor jedem Aufzählungspunkt wird das Tag <li> notiert. Angaben zum Zeilenumbruch sind nicht erforderlich, da der WWW-Browser bei jedem <li>-Tag automatisch einen Zeilenumbruch einfügt. Auch um die Numerierung selbst brauchen Sie sich nicht zu kümmern, das besorgt der WWW-Browser bei der Präsentation. Mit dem Tag </ol> wird die Aufzählung abgeschlossen.

Glossare

Glossare
bestehen aus einer Liste von Glossareinträgen.
Glossareinträge
bestehen aus einem zu definierenden Ausdruck (z.B. ein Fachbegriff) und der zugehörigen Definition.
Solch einen Glossar mit Glossareinträgen fügen Sie in HTML wie folgt ein.

Beispiel:

  <dl>
  <dt>Ausdruck</dt>
  <dd>Definition des Ausdrucks</dd>
  <dt>Anderer Ausdruck</dt>
  <dd>Definition dieses Ausdrucks</dd>
  </dl>
Das Glossar wird durch das Tag <dl> eingeleitet. Vor jedem Ausdruck eines Glossareintrags wird das Tag <dt> notiert, vor jeder zugehörigen Definition das Tag <dd>. Beide Tags werden am Ende des betreffenden Textes abgeschlossen (</dt> bzw. </dd>). Angaben zum Zeilenumbruch sind nicht erforderlich, da der WWW-Browser diesen bei Glossaren automatisch kontrolliert. Auch um die Absatzeinrückung brauchen Sie sich nicht zu kümmern, das besorgt ebenfalls der WWW-Browser bei der Präsentation. Mit dem Tag </dl> wird die Aufzählung abgeschlossen.
Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Text und Absätze in HTML-Dateien

Formatierung für Quellcode (dickengleiche Schrift)

Bei der Darstellung von Quellcode aus Programmiersprachen, aber auch für andere Zwecke ist es sinnvoll, eine dickengleiche Schrift einzusetzen. Bei einer dickengleichen Schrift sind alle Zeichen gleich dick. Das bedeutet, daß beispielsweise das 10. Zeichen in der zweiten Zeile genau unterhalb von dem 10. Zeichen in der ersten Zeile steht. Da die meisten Anwender auf ihren WWW-Browsern als Standardschrift eine sog. Proportionalschrift (z.B. Arial, oder Times Roman) eingestellt haben, gibt es HTML-Befehle, um eine dickengleiche Schrift (z.B. Courier) zu erzwingen.

Dickengleiche Schrift mitten in einem Absatz

Um Text mitten in einem Absatz dickengleich darzustellen, steht folgendes Tag zur Verfügung.

Beispiel:

  Das ist <tt>dickengleicher Text</tt> mitten im Text
Vor dem Text, der dickengleich angezeigt werden soll, wird das einleitende Tag <tt> notiert. Am Ende des Textes, der dickengleich angezeigt werden soll, wird das abschließende Tag </tt> notiert.

Eigener Bereich mit dickengleichem Text

Sie können einen Bereich definieren, innerhalb dessen der WWW-Browser alles so interpretiert, wie Sie es im Editor eingeben, d.h. Zeilenumbrüche werden umgesetzt, Einrückungen mit Leerzeichen werden berücksichtigt usw. Der gesamte Text innerhalb dieses Bereichs wird in dickengleicher Schrift dargestellt. Auf diese Weise können Sie bequem ganze Programm- oder Batch-Listings in einer HTML-Datei darstellen.

Beispiel:

  <pre>
     if(c != 0)
       *pt--;
     else
       break;  
  </pre>
Vor dem Bereich wird das einleitende Tag <pre> notiert, nach dem Bereich das abschließende Tag </pre>.
Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Text und Absätze in HTML-Dateien

Maskierung von HTML-eigenen Zeichen(folgen)

Wenn in Ihrem Text Zeichen vorkommen, die in HTML eine bestimmte Bedeutung haben, müssen Sie diese Zeichen maskieren. Die folgenden Zeichen müssen Sie wie folgt maskieren:

Ersetzen Sie das Zeichen < durch die Zeichenfolge &lt;
Ersetzen Sie das Zeichen > durch die Zeichenfolge &gt;
Ersetzen Sie das Zeichen & durch die Zeichenfolge &amp;
Ersetzen Sie das Zeichen " durch die Zeichenfolge &quot;

Beispiele:

  copy datei.txt &gt; prn
  Das ist ein &lt;HTML-Tag&gt;
  Gmbh &amp; Co. KG
  &quot;Text steht in Anführungszeichen&quot;
Wenn Sie die genannten Zeichen nicht maskieren, kann es bei der Präsentation mit WWW-Browsern zu unerwünschten Anzeigefehlern kommen.

Tip: Verwenden Sie die Suche-Ersetze-Funktion des eingesetzten Editors!


Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Text und Absätze in HTML-Dateien

Deutsche Umlaute und scharfes S

Im Hinblick auf das Internet und die internationale Verwendung sollten Sie deutsche Umlaute in Ihren HTML-Dateien durch die dafür vorgesehenen HTML-Zeichenfolgen ersetzen.

Ersetzen Sie das Zeichen ä durch die Zeichenfolge &auml;
Ersetzen Sie das Zeichen Ä durch die Zeichenfolge &Auml;
Ersetzen Sie das Zeichen ö durch die Zeichenfolge &ouml;
Ersetzen Sie das Zeichen Ö durch die Zeichenfolge &Ouml;
Ersetzen Sie das Zeichen ü durch die Zeichenfolge &uuml;
Ersetzen Sie das Zeichen Ü durch die Zeichenfolge &Uuml;
Ersetzen Sie das Zeichen ß durch die Zeichenfolge &szlig;

Beispiel:

  Der Autor dieses Textes hei&szlig;t Stefan M&uuml;nz
Tip: Verwenden Sie die Suche-Ersetze-Funktion des eingesetzten Editors!

Sie können deutsche Umlaute auch über Zahlencodes darstellen (siehe folgender Abschnitt).


Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Text und Absätze in HTML-Dateien

Sonderzeichen (Liste nach iso 8859-1 bzw. "Latin-1")

Damit HTML-Dateien problemlos zwischen verschiedenen Rechnerwelten ausgetauscht werden können, setzt die Sprache HTML auf einem international genormten Zeichensatz auf: dem Zeichensatz ISO 8859-1 (auch ISO Latin-1 genannt). Dieser Zeichensatz enthält 256 Zeichen. Davon sind die ersten 128 identisch mit dem klassischen 7-Bit-ASCII-Zeichensatz. Die zweiten 128 Zeichen beinhalten dagegen etliche Sonderzeichen und Buchstaben für bestimmte Sprachen. Wenn Sie in Ihren HTML-Dateien solche Zeichen verwenden wollen, holen Sie unter MS-Windows bitte keine Sonderzeichen über die "Zeichentabelle" in den Editor, sondern maskieren Sie diese Zeichen so wie in der Tabelle weiter unten angegeben. Dann wird jeder WWW-Browser auf der Welt Ihre HTML-Datei korrekt anzeigen (vorausgesetzt, die eingestellte Schrift unterstützt das Zeichen).

Sonderzeichen kodieren Sie am einfachsten durch ein kaufmännisches Und (&), ein Gatter (#) und den bereffenden Zahlenwert im Zeichensatz. Die folgende Tabelle enthält alle Sonderzeichen des ISO Latin-1- Zeichensatzes und deren Kodierung im Text einer HTML-Datei

  Zeichen   Kodierung im Text
  __________________________________

  €         &#128;
           &#129;
  ‚         &#130;
  ƒ         &#131;
  „         &#132;
  …         &#133;
  †         &#134;
  ‡         &#135;
  ˆ         &#136;
  ‰         &#137;
  Š         &#138;
  ‹         &#139;
  Œ         &#140;
           &#141;
  Ž         &#142;
           &#143;
           &#144;
  ‘         &#145;
  ’         &#146;
  “         &#147;
  ”         &#148;
  •         &#149;
  –         &#150;
  —         &#151;
  ˜         &#152;
  ™         &#153;
  š         &#154;
  ›         &#155;
  œ         &#156;
           &#157;
  ž         &#158;
  Ÿ         &#159;
            &#160;   (erzwungenes Leerzeichen)
  ¡         &#161;
  ¢         &#162;
  £         &#163;
  ¤         &#164;
  ¥         &#165;
  ¦         &#166;
  §         &#167;
  ¨         &#168;
  ©         &#169;
  ª         &#170;
  «         &#171;
  ¬         &#172;
  ­         &#173;
  ®         &#174;
  ¯         &#175;
  °         &#176;
  ±         &#177;
  ²         &#178;
  ³         &#179;
  ´         &#180;
  µ         &#181;
  ¶         &#182;
  ·         &#183;
  ¸         &#184;
  ¹         &#185;
  º         &#186;
  »         &#187;
  ¼         &#188;
  ½         &#189;
  ¾         &#190;
  ¿         &#191;
  À         &#192;
  Á         &#193;
  Â         &#194;
  Ã         &#195;
  Ä         &#196;
  Å         &#197;
  Æ         &#198;
  Ç         &#199;
  È         &#200;
  É         &#201;
  Ê         &#202;
  Ë         &#203;
  Ì         &#204;
  Í         &#205;
  Î         &#206;
  Ï         &#207;
  Ð         &#208;
  Ñ         &#209;
  Ò         &#210;
  Ó         &#211;
  Ô         &#212;
  Õ         &#213;
  Ö         &#214;
  ×         &#215;
  Ø         &#216;
  Ù         &#217;
  Ú         &#218;
  Û         &#219;
  Ü         &#220;
  Ý         &#221;
  Þ         &#222;
  ß         &#223;
  à         &#224;
  á         &#225;
  â         &#226;
  ã         &#227;
  ä         &#228;
  å         &#229;
  æ         &#230;
  ç         &#231;
  è         &#232;
  é         &#233;
  ê         &#234;
  ë         &#235;
  ì         &#236;
  í         &#237;
  î         &#238;
  ï         &#239;
  ð         &#240;
  ñ         &#241;
  ò         &#242;
  ó         &#243;
  ô         &#244;
  õ         &#245;
  ö         &#246;
  ÷         &#247;
  ø         &#248;
  ù         &#249;
  ú         &#250;
  û         &#251;
  ü         &#252;
  ý         &#253;
  þ         &#254;
  ÿ         &#255;

Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Text und Absätze in HTML-Dateien

Tabellen

Tabellen werden erst ab der noch nicht genormten HTML-Version 3.0 unterstützt. Der einzige verbreitete WWW-Browser, der bereits Tabellen anzeigen kann, ist Netscape V1.1.

Einfache Tabelle

Eine Tabelle wird in einer HTML-Datei wie folgt notiert.

Beispiel:

(siehe auch: separates Anzeigebeispiel für Tabellen)
  <table border>
    <tr>
      <th>Berlin
      <th>Hamburg
      <th>München
    </tr>
    <tr>
      <td>Icke
      <td>Ich
      <td>I
    </tr>
    <tr>
      <td>Buletten
      <td>Frikadellen
      <td>Fleischpflanzerl
    </tr>
  </table>
Die Tabelle wird durch das Tag <table> eingeleitet. Das Tag enthält außerdem den Zusatz border. Das bewirkt, daß das Gitternetz der Tabelle sichtbar in Form von Linien angezeigt wird. Wenn Sie den Zusatz weglassen, wird die Tabelle ohne Gitternetzlinien angezeigt. Siehe dazu weiter unten.

Jede Zeile einer Tabelle wird durch das Tag <tr> eingeleitet. Im Anschluß daran werden die Zellen (Spalten) der betreffenden Reihe definiert. Am Ende einer Tabellenzeile wird ein abschließendes Tag </tr> notiert.

Eine Tabelle kann Kopfzellen und gewöhnliche Datenzellen enthalten. Text in Kopfzellen wird hervorgehoben (bei Netscape: fett). Eine Kopfzelle wird durch das Tag <th> definiert, eine gewönliche Datenzelle durch das Tag <td>. Der Inhalt einer Zelle wird jeweils hinter dem Tag notiert. In einer Tabellenzelle können beliebige Elemente stehen, d.h. außer normalem Text z.B. auch Verweise oder Grafikreferenzen.

Spaltenbreiten und Zeilenhöhen werden beim Präsentieren der Datei automatisch aufgrund der Zelleninhalte errechnet. Die Tabelle wird so angezeigt, daß auch der umfangreichste Zelleninhalt vollständig angezeigt wird.

Erscheinungsbild der Tabelle kontrollieren

Sie können die Rahmendicke des Außenrahmens einer Tabelle beeinflussen. Ferner können Sie die Anzeigebreite der Gesamttabelle bestimmen. Und schließlich können Sie die die Zeilenhöhe vergrößern, so daß mehr Abstand zwischen Text und oberer bzw. unterer Zeilenlinie ist.

Beispiel: Rahmendicke

  <table border="8">
  ...
  </table>
Um die Rahmendicke des Außenrahmens einer Tabelle zu beeinflussen, geben Sie hinter dem Zusatz border ein Istgleichzeichen und dahinter, in Anführungszeichen, die Rahmendicke in Pixel an.

Beispiel: Gesamtbreite einer Tabelle

  <table border width="60%">
  ...
  </table>
Mit der Angabe witdth= im einleitenden Tag von <table> können Sie die Anzeigebreite der Tabelle verkürzen und sicherstellen, daß die Tabelle in der Breite in das Anzeigefenster paßt. Die Angabe erfolgt relativ (in Prozent - im Beispiel: 60% Länge von der Breite des Anzeigefensters). Die Angabe muß in Anführungszeichen stehen.

Beispiel: Zeilenhöhe

  <table border cellpadding="10">
  ...
  </table>
Mit der Angabe cellpadding= im einleitenden Tag von <table> können Sie die Zeilenhöhe der Tabelle vergrößern. Die Angabe erfolgt in Pixeln und muß in Anführungszeichen stehen.

Zelleninhalte ausrichten

Normalerweise wird der Inhalt einer Tabellenzelle links ausgerichtet. Sie können den Inhalt auch zentriert oder rechts ausrichten.

Beispiel:

  <table border>
    <tr>
      <th align="center">Sex im Internet ja
      <th align="right">Sex im Internet nein
    </tr>
    <tr>
      <td align="center">1994: 87%
      <td align="right">1994: 13%
    </tr>
    <tr>
      <td align="center">1995: 65%
      <td align="right">1995: 35%
    </tr>
  </table>
Durch den Zusatz align="center" im Tag für eine Tabellenzelle wird der zugehörige Zelleninhalt zentriert ausgerichtet, durch den Zusatz align="right" rechtsbündig. Die Angaben müssen jeweils in Anführungszeichen stehen.

Zellen verbinden

Sie können zwei oder mehrere benachbarte Tabellenzellen zu einer verbinden, und zwar sowohl zeilenweise als auch spaltenweise.

Beispiele:

  <table border>
    <tr>
      <th align="center" colspan="2">Die Menschheit besteht aus
    </tr>
    <tr>
      <td align="center">Männern
      <td align="right">Frauen<tr>
    </tr>
  </table>

  <table border>
    <tr>
      <td align="center" rowspan="2">Polizisten rauchen
      <td align="right">Milde Sorte, weil das Leben ist hart genug
    </tr>
    <tr>
      <td align="right">Lucky Strike, weil sie Glückstreffer nötig haben<tr>
    </tr>
  </table>
Durch den Zusatz colspan=... erreichen Sie, daß der folgende Zelleninhalt sich über mehr als eine Spalte erstreckt. Über wieviele Spalten er sich erstrecken soll, geben Sie hinter dem Istgleich-Zeichen an. Durch den Zusatz rowspan=... erreichen Sie, daß der folgende Zelleninhalt sich über mehr als eine Zeile erstreckt. Über wieviele Zeilen er sich erstrecken soll, geben Sie hinter dem Istgleich-Zeichen an. Alle Angaben hinter dn Istgleichzeichen müssen in Anführungszeichen stehen.

Tabellen ohne sichtbare Gitternetzlinien

Eine "echte" Tabelle sollte natürlich auch Linien zwischen den Zeilen und Spalten haben. Tabellen ohne Gitternetzlinien haben aber auch ihren Sinn. Da HTML keine Tabulatoren unterstützt, können Sie Textabschnitte, bei denen Sie in einer Textverarbeitung mit Tabulatoren arbeiten würden, mit "unsichtbaren" Tabellen so formatieren, wie Sie es wünschen.

Beispiel:

  <table>
    <tr>
      <td align=right>Name: <td>Stefan M&uuml;z
    </tr>
    <tr>
      <td align=right>Geburtsdatum: <td>10.12.1960
    </tr>
    <tr>
      <td align=right>Wohnort: <td>M&uuml;nchen<tr>
    </tr>
  </table>

  Ergebnis:
  ----------------------
         Name: Stefan Münz
 Geburtsdatum: 10.12.1960
      Wohnort: München
Ohne Zuhilfenahme der Tabellenfunktion könnten Sie dieses Ergebnis bei einem Text in nicht dickengleicher Schrift nicht realisieren.

Um eine Tabelle ohne sichtbare Gitternetzlinien zu erzeugen, lassen Sie einfach im Tag <table> den sonst üblichen Zusatz border weg. Dahinter folgt der Text des Titels. Mit dem Tag </title> wird der Titel abgeschlossen.


Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Text und Absätze in HTML-Dateien

Technisch/mathematische Formeln

Hinweis: Bei den folgenden Ausführungen verläßt der Autor dieses Dokuments seinen Kompetenzbereich. Er bittet den Leser um Nachsicht bei unsachgemäßen Formulierungen oder Ausdrücken.

Technisch-mathematische Formeln werden erst ab der noch nicht genormten HTML-Version 3.0 unterstützt. Noch gibt es keinen WWW-Browser auf dem Markt, der solche Formeln anzeigen kann. Ein noch ungelöstes Problem ist, wie die Formeln auf Systemen angezeigt werden sollen, die im Textmodus laufen.

Wenn Sie häufig mit Formeln und mit EDV zu tun haben, kennen Sie sicher die Sprache LaTeX. Für LaTeX gibt es mittlerweile einen HTML-Filter, d.h. ein Konvertierprogramm, daß LaTeX-Dokumente in HTML-Dokumente übersetzt.

Beispiele für Formeln:

  <math>
      H(s) = ∫<sub>0</sub><sup>∞</sup> e<sup>-st</sup> h(t)dt
  </math>

  <math>
      C <box>dV<sub>out</sub><over>dt</box>=I
      <sub>b</sub>&tanh;(<box>κ(V<sub>in</sub>-V<sub>out
      </sub>)<over>2</box>)
  </math>
Formeln werden durch das Tag <math> eingeleitet. Dahinter folgt die Formel. Durch das Tag </math> wird die Formel abgeschlossen.

Die mathematischen Symbole werden in ihren nach ISO standardisierten Namen angegeben. Die Tags <sub> bzw. </sub> schließen tiefgestellte Elemente ein, die Tags <sup> bzw. </sup> hochgestellte Elemente.

Mit den Tags <box> bzw. </box> schließen Sie logisch zusammengehörige Elemente so ein, daß sie bei der Präsentation sichtbar als logische Gruppe angeordnet werden. Das Tag <over> ist fakultativ. Es teilt die "Box" in Numerator und Denominator auf.

Genaues Justieren von Elementen

Elemente in Formeln können exakt in gedachten Spalten justiert werden.

Beispiel:

  <math>
    (<array align="c"> <item>
       &ldet;<array align="cc">
                 <item>x<sub>11</sub>
                 <item>x<sub>12</sub>
                 <item>x<sub>21</sub>
                 <item>x<sub>22</sub>
       </array><rd>&rdet;
       <item> y <item> z
    </array>)
  </math>
Die Justierungs-Anweisung wird durch das Tag <array> eingeleitet. Dahinter folgen die genauen Angaben. Durch das Tag </array> wird die Justierung abgeschlossen.

In dem Zusatz align wird angegeben, wieviele Spalten benötigt werden, und wie die Elemente in jeder Spalte ausgerichtet werden. Die Angabe align="c" bedeutet beispielsweise: 1 Spalte, Element zentriert ausrichten. Die Angabe align="cc" bedeutet: Zwei Spalten, Elemente zentriert ausrichten. Für linksbündige Ausrichtung müssen Sie align="l" notieren, für rechtsbündige Ausrichtung align="r".

Für jedes einzelne Element benötigen Sie ein Tag <item>. Hinter dem Tag wird der Inhalt des Elements notiert.

Weitere Elemente

Zur exakten Justage können Sie auch die ISO-Einheiten &thinsp; für 1/6 em Breite und &hairsp; für Haarbreite benutzen.

Horizonale, diagonale und vertikale Ellipsen können mit Hilfe der Tags &hellip;, &dellip; und &vellip; realisiert werden.


Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Text und Absätze in HTML-Dateien

Bildschirm- und Textfarben

Das Bestimmen von Bildschirmhintergrund- und Textfarben wird erst ab der noch nicht genormten HTML-Version 3.0 unterstützt. Der einzige verbreitete WWW-Browser, der diese Features bereits anzeigen kann, ist Netscape V1.1.

Farbe für den Bildschirmhintergrund

Die selbst bestimmte Hintergrundfarbe gilt jeweils für die HTML-Datei, in der sie definiert wird. Wenn Sie ein Dokument aus mehreren HTML-Dateien erstellen, das einen einheitlichen Hintergrund haben soll, müssen Sie die Hintergrundfarbe in jeder HTML-Datei neu definieren. Natürlich können Sie auch für jede HTML-Datei eine andere Hintergrundfarbe definieren.

Wenn Sie eine Hintergrundfarbe definieren, sollten Sie auch passende Textvordergrundfarben definieren.

Die Hintergrundfarbe können Sie im einleitenden Tag von <body> selbst definieren. Die Syntax lautet:

   <body bgcolor="#rrggbb">
Dabei bedeuten:

Beispiele:

(siehe auch: separates Anzeigebeispiel für Bildschirm- und Textfarben)
   <body bgcolor="#000080">
Dies entspricht dezimal den RGB-Werten 0,0,128 (dunkles Blau).
   <body bgcolor="#808000">
Dies entspricht dezimal den RGB-Werten 128,128,0 (Zyan).
   <body bgcolor="#C0FF60">
Dies entspricht dezimal den RGB-Werten 96,255,192 (Hellgrün).

Hinweis: Bei selbst definierten Hintergrundfarben funktioniert bei Netscape V1.1 die horizontale Linie <HR>; nicht mehr, d.h. solche Trennlinien werden bei der Präsentation nicht mehr angezeigt.

Textvordergrundfarben

Die selbst bestimmten Textvordergrundfarben gelten jeweils für die HTML-Datei, in der sie definiert werden. Wenn Sie ein Dokument aus mehreren HTML-Dateien erstellen, das einen einheitlichen Hintergrund und Textvordergrund haben soll, müssen Sie die Hintergrundfarbe und die Textvordergrundfarben in jeder HTML-Datei neu definieren. Natürlich können Sie auch für jede HTML-Datei eine andere Hintergrundfarbe bzw. andere Textvordergrundfarben definieren.

Textvordergundfarben gibt es für folgende Textelemente:

Die Textvordergrundfarben können Sie im einleitenden Tag von <body> selbst definieren. Die Syntax lautet:
   <body text="#rrggbb">   -> für Textkörper 
   <body link="#rrggbb">   -> für Verweise zu noch nicht besuchten Textstellen
   <body vlink="#rrggbb">  -> für für Verweise zu bereits besuchten Textstellen
   <body alink="#rrggbb">  -> für gehighlightete Verweise
Dabei bedeuten: Achten Sie darauf, daß die definierten Textvordergrundfarben mit der definierten Hintergrundfarbe kontrastieren. Wenn Sie z.B. eine dunkle Hintergrundfarbe definieren, sollten Sie helle Textvordergrundfarben wählen (z.B. Weiß, Gelb, Hellgrün und Hellblau)

Beispiele:

(siehe auch: separates Anzeigebeispiel für Bildschirm- und Textfarben)
   <body text="#FFFFFF">
Dies entspricht dezimal den RGB-Werten 255,255,255 (Weiß).
   <body link="#FFFF00">
Dies entspricht dezimal den RGB-Werten 255,255,0 (Gelb).
   <body vlink="#00FFFF">
Dies entspricht dezimal den RGB-Werten 0,255,255 (Hellblau).
   <body alink="#00FF00">
Dies entspricht dezimal den RGB-Werten 0,255,0 (Hellgrün).
Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Text und Absätze in HTML-Dateien

Hintergrundbild (Wallpaper-Funktion)

Das Bestimmen eines Hintergrundbildes wird erst ab der noch nicht genormten HTML-Version 3.0 unterstützt. Der einzige verbreitete WWW-Browser, der diese Features bereits anzeigen kann, ist Netscape V1.1.

Für besondere Effekte können Sie für die Anzeige einer HTML-Datei ein Hintergrundbild bestimmen. Dabei wird das Bild über das ganze Anzeigefenster hinweg immer wiederholt, so daß ein Tapeteneffekt (Wallpaper) entsteht. Viele Windows-Anwender kennen diesen Effekt, da in Windows die Möglichkeit besteht, den Desktop mit einem solchen Wallpaper auszustatten. Besonders geeignet für Wallpaper-Effekte sind relativ kleine Grafiken (nicht viel größer als Icon-Größe), die irgendein abstraktes Muster darstellen.

Das Hintergrundbild gilt jeweils für die HTML-Datei, in der es definiert wird. Wenn Sie ein Dokument aus mehreren HTML-Dateien erstellen, das einen einheitlichen Hintergrund haben soll, müssen Sie die Angabe in jeder HTML-Datei wiederholen.

Wenn Sie eine Hintergrundfarbe definieren, sollten Sie auch passende Textvordergrundfarben definieren.

Das Hintergrundbild können Sie im einleitenden Tag von <body> selbst definieren. Die Syntax lautet:

Beispiel:

(siehe auch: separates Anzeigebeispiel für Hintergrundbild)
   <body background="kacheln.gif">
Das Hintergrundbild wird durch die Angabe background= bestimmt. Dahinter folgt, in Anführungszeichen, der Name der Grafikdatei, die als Wallpaper-Effekt angezeigt werden soll. Im Beispiel wird vorausgesetzt, daß sich die Grafikdatei im gleichen Verzeichnis befindet wie die HTML-Datei. Wenn die Grafik in einem anderen Verzeichnis steht, müssen Sie den relativen oder absoluten Pfadnamen angeben. Das funktioniert genau so wie das Einbinden von Grafiken aus anderen Verzeichnissen.
Zur Neuorientierung: zurück zum Inhaltsverzeichnis oder zur Überschrift Text und Absätze in HTML-Dateien