HTML-Einführung von Hubert Partl, September 1997


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 jeden 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. Dies läßt sich aber mit Style-Sheets ändern. 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 (neue "Web-Pages") 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.

In Style-Sheets ist eine Möglichkeit vorgesehen, Stellen zu markieren, die beinm Ausdrucken möglichst eine neue Seite beginnen sollen, bzw. umgekehrt Bereiche zu markieren, die möglichst nicht durch Seitenwechsel getrennt werden sollen. Diese Möglichkeiten werden aber von den meisten Web-Browsern noch nicht unterstützt.


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.

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

- - -

In HTML 4 sind wesentliche Erweiterungen des Zeichensatzes vorgesehen:

Diese Erweiterungen werden aber von den meisten Web-Browsern noch nicht unterstützt.

Beispiel:

- - - Die Eingabe von


mit &hearts;lichen Gr&uuml;&szlig;en

- - - bewirkt eine Darstellung wie

mit ♥lichen Grüßen

- - -


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>

Zwischen <blockquote> und </blockquote> stehende Absätze werden 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.

Durch die Angabe von Klassen und durch die Verwendung von Style-Sheets kann 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 neueren 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. Bei neueren Web-Browsern kann man die Numerierung durch Parameter wie type, start und value in den Befehlen <ol> und <ol> beeinflussen (siehe Spezialeffekte); diese Angaben werden aber von älteren Web-Browsern ignoriert.

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 neueren Web-Browsern kann durch die Angabe von <dl compact> ein kompakteres 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>

Seit HTML 3.2 gibt es 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, right oder center
oder char="," für die Ausrichtung am Dezimalkomma,
und valign=top, bottom oder middle

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

- - -

Bei alten Web-Browsern, die die Tabellen-Befehle noch nicht unterstützen, werden diese Befehle ignoriert und der Tabelleninhalt wird einfach als fortlaufender Text dargestellt, also z.B. wie

11111000000 binär 370 oktal 7C0 hexadezimal 1984 dezimal

- - -

In HTML 4 sind zahlreiche weitergehende Möglichkeiten für die Gestaltung und Strukturierung von Tabellen vorgesehen. Unter anderem kann man die Tabelle mit <thead> <tbody> und <tfoot> in einen Kopfteil, Hauptteil und Fußteil aufteilen. Wenn ein (Bildschirm-) Seitenwechsel innerhalb der Tabelle erfolgt, werden dann die Kopf- und Fußzeilen so wiederholt, daß sie immer sichtbar sind. Bei älteren Web-Browsern wird diese Unterscheidung ignoriert und der gesamte Tabelleninhalt (einschließlich Kopf- und Fußteil) wird einfach ohne Wiederholungen dargestellt.

Beispiel:

- - - Die Eingabe von


<table frame=hsides rules=groups cellspacing=12 >

<thead>

 <tr> <td align=right>Wiener Staatsoper

      <td align=left>25. 10. 1970

 <tr>  ...

</thead>

<tbody>

 <tr> <td align=right>Philipp II.

      <td align=left>Nicolai Ghiaurov

 <tr>  ...

</tbody>

<tfoot>

 <tr> <td align=right>weitere Vorstellungen:

      <td align=left>28.10., 26.11.1970

</tfoot>

</table>

- - - bewirkt eine Darstellung wie

Wiener Staatsoper 25. 10. 1970
Giuseppe Verdi Don Carlos
Rolle: Besetzung:
Philipp II. Nicolai Ghiaurov
Don Carlos Franco Corelli
Posa Eberhard Wächter
Großinquisitor Martti Talvela
Mönch Tugomir Franc
Elisabeth Gundula Janowitz
Eboli Shirley Verrett
Tebaldo Edita Gruberova
Gräfin Aremberg Christa Reichert
Graf Lerma Ewald Aichberger
Stimme vom Himmel Judith Blegen
Dirigent Horst Stein
Chorleiter Norbert Balatsch
Bühnenmusik Ralf Hossfeld
Bühnenbild und Kostüme Jürgen Rose
Regie Otto Schenk
weitere Vorstellungen: 28.10., 26.11.1970

- - - und je nach der verwendeten Browser-Version werden die Kopf- und Fußzeilen beim Vor- und Zurückblättern wiederholt oder nur einfach angezeigt.

- - -

Man kann Tabellen unter Umständen auch für Layout-Effekte wie spezielle Anordnungen oder Einrückungen einsetzen und für diesen Zweck auch weitere Parameter wie z.B. width verwenden.

Dabei müssen aber die im Kapitel Layout und Spezialeffekte und insbesondere auch für width angeführten Hinweise genau beachtet werden, damit die Informationen trotz dieser "Tricks" für alle Leser sinnvoll lesbar bleiben.


Mathematik und Chemie <sub> <sup>

HTML enthält bisher leider noch keine Befehle für die Darstellung von komplexen mathematischen Formeln mit Brüchen, Wurzeln, Integralen, griechischen Buchstaben und dergleichen (entsprechende Vorschläge für HTML wurden noch nicht realisiert). Solche Formeln kann man bis auf weiteres nur als Bilder einfügen. Einfache mathematische und chemische Formeln können aber dargestellt werden. Dazu gibt es die normalen Sonderzeichen wie + und = sowie die folgenden Befehle für das 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