HTML-Einführung von Hubert Partl


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...

- - -

In XHTML muss man <p> immer mit </p> beenden.

Die meisten Web-Browser stellen Absätze durch eine Leerzeile dar, seltener durch Einrücken der ersten Zeile wie im Buchdruck. Dies lässt 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.

- - -

In XHTML muss man <br /> statt <br> schreiben.

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 beim 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:

- - -

In XHTML muss man <li> immer mit </li> beenden.

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.

- - -

In XHTML muss man <li> immer mit </li> beenden.

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.

- - -

In XHTML muss man <dt> und <dd> immer mit </dt> bzw. </dd> beenden.


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 muss jede Tabellenzeile, auch die erste, mit <tr> (table row) beginnen.

Innerhalb der Tabellenzeile muss 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

- - -

In XHTML muss man <tr> <td> <th> jeweils mit </tr> </td> </th> beenden.

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, dass 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 keine Befehle für die Darstellung von komplexen mathematischen Formeln mit Brüchen, Wurzeln, Integralen, griechischen Buchstaben und dergleichen oder für die Darstellung von chemischen Formeln. Die dafür vorgesehen XML-Anwendungen MathML und CML werden derzeit von den meisten Web-Browsern noch nicht unterstützt. Solche Formeln kann man daher bis auf weiteres nur als Bilder einfügen.

Einfache mathematische und chemische Formeln können aber mit reinem HTML 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