HTML-Einführung von Hubert Partl, August 1996

Text-Elemente

Aufbau des HTML-Files <head> <title> <body>

Absatz (paragraph) <p> und Zeilenumbruch

Im einfachsten Fall besteht ein HTML-File zwischen <body> und </body> nur aus laufendem Text, mit Entities für Umlaute und Sonderzeichen und mit eingestreuten Befehlen <p> für den Beginn eines neuen Absatzes.

Beispiel:

- - - Die Eingabe von 

<p>
Das ist ein Absatz. 
Der Zeilenumbruch erfolgt automatisch. 
Zeilenwechsel, 
einfache Leerstellen und     mehrfache     Leerstellen 
bewirken alle die gleichen Wortabst&auml;nde.
<p>
Das ist ein neuer Absatz...
- - - bewirkt eine Darstellung wie

Das ist ein Absatz. Der Zeilenumbruch erfolgt automatisch. Zeilenwechsel, einfache Leerstellen und mehrfache Leerstellen bewirken alle die gleichen Wortabstände.

Das ist ein neuer Absatz...

- - -

Die meisten Web-Browser stellen Absätze durch eine Leerzeile dar, seltener durch Einrücken der ersten Zeile wie im Buchdruck. Manche Web-Browser erzeugen bei mehrfachen <p>-Befehlen mehrfache Leerzeilen, die meisten ignorieren jedoch leere Absätze und stellen alle Absätze mit einheitlichen Abständen dar.

Mit Align-Parametern kann angegeben werden, wie der Absatz dargestellt werden soll (rechtsbündig, linksbündig, zentriert). Absätze ohne automatischen Zeilenumbruch kann man mit <pre> erhalten.

Ein </p>-Befehl zum Beenden von Absätzen ist nicht nötig, jeder neue Absatz und jede neue Überschrift oder Liste und dergleichen beendet automatisch den vorherigen Absatz.

Zeilenwechsel (line break) <br>

Der Zeilenumbruch erfolgt im allgemeinen automatisch so, wie es der Fenstergröße des Benutzers auf seinem Client-Bildschirm am besten entspricht.

Zusätzliche Zeilenwechsel innerhalb von Absätzen kann man mit <br> erreichen.

Beispiel:

- - - Die Eingabe von 

<p>
H&auml;nschen klein
<br>
ging allein
<br>
in das World Wide Web hinein.
<p>
- - - bewirkt eine Darstellung wie

Hänschen klein
ging allein
in das World Wide Web hinein.

- - -

Manche Web-Browser erzeugen bei mehrfachen <br>-Befehlen mehrfache Leerzeilen, die meisten ignorieren jedoch leere Zeilen und stellen alle Absätze mit einheitlichen Zeilenabständen dar.

Seitenwechsel (page break)

Im Gegensatz zur gedruckten Ausgabe, wo alle Informationen auf Papierblätter einer bestimmten Größe aufgeteilt werden müssen, erfolgt die Ausgabe der WWW-Informationen auf den Bildschirmen der Benutzer ohne solche Seitengrenzen. Der Benutzer kann mit den Funktionstasten oder dem Scrollbar seines Web-Browsers fortlaufend und beliebig weit nach oben und unten lesen.

Es gibt deshalb in HTML keinen Befehl für einen Seitenwechsel. Neue Seiten (falls das HTML-File ausgedruckt wird) bzw. neue Fenster am Bildschirm des Benutzers erreicht man nur durch den Sprung auf ein neues HTML-File.

Innerhalb von HTML-Files ("Web-Pages") kann man für Trennlinien, die am Bildschirm eine ähnlich trennende Funktion wie das Umblättern auf eine neue Papier-Seite erfüllen, den Befehl <hr> bzw. die Befehlsfolge </p><hr><p> verwenden.

Buchstaben und Sonderzeichen (entity)

Die Zeichen < und > und & haben eine Sonderbedeutung in HTML-Files. Wenn Sie die entsprechenden Zeichen im Text darstellen wollen, müssen Sie dafür eigene HTML-Befehle eingeben, die sogenannten "Entities" (Einheiten):
&lt; für das Kleiner-Zeichen <
&gt; für das Größer-Zeichen >
&amp; für das Und-Zeichen &

Auch für nicht-amerikanische Buchstaben wie z.B. deutsche Umlaute und scharfes s, französische Akzente usw. müssen Sie solche "Entities" (oder die genormten ISO-8859-1-Codes) angeben, damit sie auf den verschiedenen Web-Browsern so gut wie möglich dargestellt werden können. Andere Kodierungen, die nur auf bestimmten Rechnertypen gelten (z.B. nur auf PCs unter MS-DOS oder nur auf Apple Macintosh), dürfen dafür nicht verwendet werden.

Für deutschsprachige Texte sind die folgenden Entities wichtig:
&auml; für ä (Umlaut-a)
&Auml; für Ä (Umlaut-A)
&ouml; für ö (Umlaut-o)
&Ouml; für Ö (Umlaut-O)
&uuml; für ü (Umlaut-u)
&Uuml; für Ü (Umlaut-U)
&szlig; für ß (scharfes s, s-z-Ligatur)

Für andere europäische Sprachen gibt es Entities wie z.B.
&eacute; für é (e mit Acute-Akzent)
&agrave; für à (a mit Grave-Akzent)
&ocirc; für ô (o mit Circumflex-Akzent)
&ccedil; für ç (c mit Cedille)
&ntilde; für ñ (n mit Tilde)
&aring; für å (a mit Ring)
und weitere Entities mit analog gebildeten Namen.

Manche Web-Browser unterstützen auch weitere Sonderzeichen und Spezialfunktionen wie z.B.
&deg; für das Grad-Symbol ° (degree)
&copy; für das Copyright-Symbol ©
&sect; für das deutsche Paragraphen-Zeichen § (section)
&para; für das amerikanische Absatz-Zeichen ¶ (paragraph)
&nbsp; für eine Leerstelle, bei der kein Zeilenwechsel erfolgen darf (non breaking space)
&shy; für eine Stelle, an der ein Wort bei Bedarf abgeteilt werden darf (soft hyphen)

Es gibt auch Web-Browser die zwar nicht diese Entity-Namen für die Sonderzeichen unterstützen, aber die Angabe des ISO-Codes in der Form &#123; erlauben, wobei statt 123 der ISO-Code des gewünschten Zeichens anzugeben ist (dezimal).

Für vollständige Listen der Entities und ISO-Codes wird auf die Referenzen verwiesen.

Solange es noch Web-Browser gibt, die nicht alle Entities richtig darstellen, ist es empfehlenswert, für ausgefallene Symbole einfache Text-Abkürzungen zu verwenden, wie z.B.
(C) für das Copyright-Symbol, oder
Par. für das Paragraphen-Zeichen.

Der Strichpunkt am Ende der Entities darf nicht weggelassen werden, auch wenn manche (aber nicht alle) Web-Browser vielleicht in manchen (aber nicht allen) Fällen einen fehlenden Strichpunkt "erraten" können.

Beispiel:

- - - Die Eingabe von 

ein Caf&eacute; in der Sch&ouml;nbrunner Stra&szlig;e
- - - bewirkt eine Darstellung wie

ein Café in der Schönbrunner Straße

- - -

Hervorgehobene Wörter (emphasis) <em> <strong>

Zwischen <em> und </em> stehender Text wird hervorgehoben (emphasis = Betonung).

Zwischen <strong> und </strong> stehender Text wird stärker hervorgehoben (strong = stark).

<em> eignet sich für die Betonung einzelner Wörter innerhalb von Sätzen. Viele Web-Browser verwenden dafür kursive Schrift, andere verwenden eine andere Farbe, Helligkeit oder (bei Sprachausgabe) Tonhöhe.

<strong> eignet sich für Texte, die wie Überschriften ins Auge springen sollen. Viele Web-Browser verwenden dafür fette Schrift, andere verwenden Farbe, Helligkeit oder Lautstärke.

Beispiel:

- - - Die Eingabe von 

In der <strong>Hypertext Markup Language</strong> 
wird die <em>logische</em> Bedeutung der Textelemente festgelegt, 
<em>nicht</em> das Aussehen.
- - - bewirkt eine Darstellung wie

In der Hypertext Markup Language wird die logische Bedeutung der Textelemente festgelegt, nicht das Aussehen.

- - -

Hervorgehobene Absätze und Zitate (quote) <blockquote> <bq> <note>

In HTML 2 werden zwischen <blockquote> und </blockquote> stehende Absätze in einer speziellen Form dargestellt, die sich vor allem für Zitate (Quotes) eignet, aber auch für andere Texte verwendet werden kann, die "besonders" aussehen sollen, wie z.B. Beispiele oder Gedichte.

Viele (aber nicht alle) Web-Browser verwenden dafür eingerückte Absätze, manche auch kursive Schrift oder eine andere Schriftart, wieder andere eine Randmarkierung oder dergleichen. Ein Beispiel dafür finden Sie in der Geschichte über das Auto im Dschungel.

In HTML 3 werden statt <blockquote> zwei verschiedene Markups unterstützt:
<bq> ... ... </bq> für Zitate,
<note> ... </note> für Anmerkungen (notes), Hinweise und dergleichen.
Im Befehl <note> kann durch die Angabe von Klassen und durch die Verwendung von Style-Sheets genauer spezifiziert werden, um was für Arten von Absätzen es sich handelt und wie sie am Bildschirm dargestellt werden sollen.

Überschriften (heading) <h1> <h2> <h3>

Zwischen <hx> und </hx> kann man Überschriften der Ebene x (1 bis 6) angeben. Der dazwischen stehende Text kann auch Bilder oder Links enthalten.

Es wird empfohlen, die Hierarchie der Überschriften genau einzuhalten und nicht mehr als 3 Ebenen zu verwenden:
<h1> für die Haupt-Überschriften (Kapitel),
<h2> für Abschnitte innerhalb der Kapitel,
<h3> für Unter-Abschnitte innerhalb der Abschnitte.

Neue Kapitel oder Abschnitte bedeuten automatisch neue Absätze, die Überschriften dürfen deshalb nicht innerhalb von Absätzen oder Listen und dergleichen stehen.

Die meisten Web-Browser stellen die Überschriften durch fette und größere Schrift dar. Manche Web-Browser rücken den nachfolgenden Text entsprechend der Hierarchie-Ebene ein.

Beispiele:

- - - Die Eingabe von 

<h2>Beispiel f&uuml;r eine 
&Uuml;berschrift der Ebene 2</h2>
Text auf Ebene 2...

<h3>Beispiel f&uuml;r eine 
&Uuml;berschrift der Ebene 3</h3>
Text auf Ebene 3...
- - - bewirkt eine Darstellung wie

Beispiel für eine Überschrift der Ebene 2

Text auf Ebene 2...

Beispiel für eine Überschrift der Ebene 3

Text auf Ebene 3...

- - -

Listen und Aufzählungen

Nicht numerierte Liste (unordered list) <ul>

Mit <ul> wird eine Liste oder Aufzählung begonnen.

Jedes Listenelement innerhalb der Liste beginnt mit <li> (list item).

Mit </ul> wird die Liste beendet.

Die meisten Web-Browser stellen die Listenelemente durch eingerückte Absätze mit einem vorangestellten dicken schwarzen Punkt oder Sternchen oder anderen Symbolen dar. Bei manchen Web-Browsern kann das Layout der Liste durch die Angabe von Parametern wie type=circle oder src="xxx.gif" in den Befehlen <ul> und <li> beeinflußt werden.

Beispiel:

- - - Die Eingabe von 

Eine unsortierte Liste:
<ul>
<li>Unsortierte Listen eignen sich f&uuml;r alle Arten 
von Aufz&auml;hlungen. 
<li>Listen k&ouml;nnen auch geschachtelt werden:
<ul>
<li>Elemente der inneren Liste 
werden meist weiter einger&uuml;ckt und/oder 
mit anderen Symbolen versehen.
<li>Hier ist das zweite Element der inneren Liste.
</ul>
<li>Hier ist ein weiteres (letztes) Element 
der &auml;u&szlig;eren Liste.
</ul>
- - - bewirkt eine Darstellung wie

Eine unsortierte Liste:

- - -

Numerierte Liste (ordered list) <ol>

Mit <ol> wird eine Liste oder Aufzählung begonnen.

Jedes Listenelement innerhalb der Liste beginnt mit <li> (list item).

Mit </ol> wird die Liste beendet.

Die meisten Web-Browser stellen die Listenelemente durch eingerückte Absätze mit einer vorangestellten fortlaufenden Nummer dar. Die Numerierung erfolgt automatisch. In HTML 3 kann man die Numerierung durch Parameter wie type, start und value in den Befehlen <ol> und <ol> beeinflussen (siehe Spezialeffekte); diese Angaben werden aber nicht von allen Web-Browsern unterstützt.

Beispiel:

- - - Die Eingabe von 

Eine numerierte Liste:
<ol>
<li>Numerierte Listen eignen sich f&uuml;r Aufz&auml;hlungen, 
bei denen die genaue Reihenfolge der Elemente wichtig ist. 
<li>Listen k&ouml;nnen auch geschachtelt werden:
<ol type=a>
<li>Elemente der inneren Liste 
werden meist weiter einger&uuml;ckt und 
separat numeriert.
<li>Hier ist das zweite Element der inneren Liste.
</ol>
<li>Hier ist ein weiteres (letztes) Element 
der &auml;u&szlig;eren Liste.
</ol>
- - - bewirkt eine Darstellung wie

Eine numerierte Liste:

  1. Numerierte Listen eignen sich für Aufzählungen, bei denen die genaue Reihenfolge der Elemente wichtig ist.
  2. Listen können auch geschachtelt werden:
    1. Elemente der inneren Liste werden meist weiter eingerückt und separat numeriert.
    2. Hier ist das zweite Element der inneren Liste.
  3. Hier ist ein weiteres (letztes) Element der äußeren Liste.

- - -

Liste von Beschreibungen (definition list) <dl>

Mit <dl> wird eine Liste von Beschreibungen begonnen.

Jedes Listenelement innerhalb der Liste beginnt mit <dt> (definition term). Damit wird der Begriff angegeben, der beschrieben werden soll.

Anschließend wird mit <dd> (definition description) der Text angegeben, mit dem der Begriff beschrieben wird.

Mit </dl> wird die Liste beendet.

Viele (aber nicht alle) Web-Browser stellen die Begriffe durch neue Absätze und ihre Beschreibungen durch eingerückte Absätze dar. Bei manchen Web-Browsern kann durch die Angabe von <dl compact> ein kompakterers Format erreicht werden.

Beispiel:

- - - Die Eingabe von 

Kleine Tierkunde
<dl>
<dt>Gelse:
<dd>ein kleines Tier, 
das an Badeseen die Menschen verjagt.
Die Gelse 
wird auf Grund ihrer Wirkungsweise auch als 
Stechm&uuml;cke bezeichnet. 
<dt>Gemse:
<dd>ein gro&szlig;es Tier, 
das in den Alpen von Menschen gejagt wird.
Die Gemse 
wird auf Grund ihrer Losung manchmal f&auml;lschlich als 
eierlegend bezeichnet.
</dl>
- - - bewirkt eine Darstellung wie

Kleine Tierkunde

Gelse:
ein kleines Tier, das an Badeseen die Menschen verjagt. Die Gelse wird auf Grund ihrer Wirkungsweise auch als Stechmücke bezeichnet.
Gemse:
ein großes Tier, das in den Alpen von Menschen gejagt wird. Die Gemse wird auf Grund ihrer Losung manchmal fälschlich als eierlegend bezeichnet.

- - -

Formatierte Texteingabe (preformatted) <pre>

Im Gegensatz zum automatischen Zeilenumbruch von normalen Absätzen wird zwischen <pre> und </pre> stehender Text so ausgegeben, wie er eingegeben wird, also mit allen Leerstellen und Zeilenwechseln. Dabei wird eine nicht-proportionale Schrift verwendet, bei der alle Buchstaben und Leerstellen die gleiche Breite haben. Dadurch kann man hier Leerstellen zum Einrücken oder zum spaltenweisen Ausrichten verwenden, was bei normalen Absätzen und bei Proportionalschriften nicht möglich wäre.

Beispiel:

- - - Die Eingabe von 

<pre>
 11111000000   bin&auml;r
        3700   oktal
         7C0   hexadezimal
        1984   dezimal
</pre>
- - - bewirkt eine Darstellung wie 

 11111000000   binär
        3700   oktal
         7C0   hexadezimal
        1984   dezimal

- - -

Zwischen <pre> und </pre> können auch gewisse HTML-Befehle wie z.B. Links und Entities verwendet werden, und die Sonderzeichen < und > und & müssen als Entities &lt; und &gt; bzw. &amp; geschrieben werden.

Für Einrückungen und Abstände sollten Sie keine Tabulator-Zeichen verwenden, da diese von verschiedenen Web-Browsern verschieden interpretiert werden, sondern stets die richtige Anzahl von Leerstellen.

Vor <pre> und nach </pre> wird jeweils ein neuer Absatz oder eine neue Zeile begonnen.

Tabelle (table) <table>

In HTML 2 werden Tabellen und Tabulatoren nicht unterstützt, einfache Tabellen können jedoch mit Hilfe von <pre> erzeugt werden.

In HTML 3 gibt es eigene HTML-Befehle für Tabellen:

Die gesamte Tabelle beginnt mit <table> und endet mit </table>.

Innerhalb der Tabelle muß jede Tabellenzeile, auch die erste, mit <tr> (table row) beginnen.

Innerhalb der Tabellenzeile muß jedes Feld (Spaltenelement), auch das erste, mit <td> (table cell for data) oder <th> (table cell for header) beginnen. Mit <td> gibt man die normalen Datenfelder an; sie werden standardmäßig linksbündig in ihrer Spalte dargestellt. Mit <th> kann man die Spalten- und Zeilen-Bezeichnungen angeben, sie werden standardmäßig zentriert in ihrer Spalte dargestellt.

Befehle der Form </td>, </th> und </tr> zum Beenden von Feldern und Tabellenzeilen sind nicht nötig, jedes neue Feld und jede neue Zeile beendet automatisch das vorherige Feld.

Wenn man <table border> angibt, wird die Tabelle mit einem Rahmen und Trennlinien versehen. Bei <table border=0> werden keine Rahmen und Trennlinien verwendet. In den Befehlen <table>, <tr>, <td> und <th> kann man weitere Parameter angeben, unter anderem z.B. für die Ausrichtung:
align=left für linksbündig
align=right für rechtsbündig
align=center für zentriert
char="," für Dezimalkomma

Beispiel:

- - - Die Eingabe von 

<table border>
<tr><td align=right>11111000000
    <td align=left>bin&auml;r
<tr><td align=right>370
    <td align=left>oktal
<tr><td align=right>7C0
    <td align=left>hexadezimal
<tr><td align=right>1984
    <td align=left>dezimal
</table>
- - - bewirkt eine Darstellung wie

11111000000 binär
370 oktal
7C0 hexadezimal
1984 dezimal

- - -

<table> wird (noch) nicht von allen Web-Browsern unterstützt, es kann daher sinnvoll sein, stattdessen <pre> zu verwenden. Eine andere Möglichkeit ist es, zwar <table> zu verwenden, aber vor und nach der Tabelle jeweils <p>, am Ende jedes Tabellenfeldes eine Leerstelle und im letzten Feld jeder Tabellenzeile jeweils <br> einzufügen, damit das Ergebnis auch mit Web-Browsern, die die Tabellen-Befehle ignorieren, brauchbar aussieht.

Beispiel:

- - - Die Eingabe von 

Don Carlos
<table>
<tr><td>Philipp II.:
    <td>Nicolai Ghiaurov
<tr><td>Elisabeth von Valois:
    <td>Mirella Freni
</table>
- - - bewirkt auf Browsern, die Tabellenbefehle ignorieren, eine Darstellung wie

Don Carlos Philipp II.: Nicolai Ghiaurov Elisabeth von Valois: Mirella Freni

- - - Die Eingabe von 

Don Carlos
<p><table>
<tr><td>Philipp II.:
    <td>Nicolai Ghiaurov <br>
<tr><td>Elisabeth von Valois:
    <td>Mirella Freni <br>
</table>
- - - bewirkt auf Browsern, die Tabellenbefehle ignorieren, eine Darstellung wie

Don Carlos

Philipp II.: Nicolai Ghiaurov
Elisabeth von Valois: Mirella Freni

- - -

Mathematik und Chemie <sub> <sup>

HTML 3 enthält Befehle für die Darstellung von mathematischen und chemischen Formeln. Die einfachsten sind die auch im normalen Text verwendbaren Befehle für Hoch- und Tiefstellen:

Zwischen <sup> und </sup> stehender Text wird hochgestellt (superscript).

Zwischen <sub> und </sub> stehender Text wird tiefgestellt (subscript).

Diese Befehle werden nicht von allen Web-Browsern unterstützt, das Ergebnis ist aber in vielen Fällen auch bei den Web-Browsern brauchbar, die diese Befehle ignorieren.

Beispiele:

- - - Die Eingabe von 

<p align=center>
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
- - - bewirkt eine Darstellung wie

a2 + b2 = c2

- - - Die Eingabe von 

<p align=center>
<b>X</b> . <b>Y</b> = x<sub>1</sub> y<sub>1</sub> + 
x<sub>2</sub> y<sub>2</sub> + x<sub>3</sub> y<sub>3</sub>
- - - bewirkt eine Darstellung wie

X . Y = x1 y1 + x2 y2 + x3 y3

- - - Die Eingabe von 

<p align=center>
SO<sub>3</sub> + H<sub>2</sub>O = H<sub>2</sub>SO<sub>4</sub>
- - - bewirkt eine Darstellung wie

SO3 + H2O = H2SO4

- - -

Vorwort . Wegweiser . Inhaltsverzeichnis . Wörterbuch . Referenzen . Copyright
© Hubert Partl, BOKU Wien