HTML-Einführung
von Hubert Partl,
Februar 1996
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ä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ä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):
< für das Kleiner-Zeichen <
> für das Größer-Zeichen >
& 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:
ä für ä (Umlaut-a)
Ä für Ä (Umlaut-A)
ö für ö (Umlaut-o)
Ö für Ö (Umlaut-O)
ü für ü (Umlaut-u)
Ü für Ü (Umlaut-U)
ß für ß (scharfes s, s-z-Ligatur)
Für andere europäische Sprachen gibt es Entities
wie z.B.
é für é (e mit Acute-Akzent)
à für à (a mit Grave-Akzent)
ô für ô (o mit Circumflex-Akzent)
ç für ç (c mit Cedille)
ñ für ñ (n mit Tilde)
å 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.
° für das Grad-Symbol ° (degree)
© für das Copyright-Symbol ©
§ für das deutsche Paragraphen-Zeichen
§ (section)
¶ für das amerikanische Absatz-Zeichen
¶ (paragraph)
für eine Leerstelle,
bei der kein Zeilenwechsel erfolgen darf
(non breaking space)
­ 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
{ 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é in der Schönbrunner Straß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> und </bq> für Zitate,
<note> und </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ür eine Überschrift der Ebene 2</h2> Text auf Ebene 2... <h3>Beispiel für eine Überschrift der Ebene 3</h3> Text auf Ebene 3...- - - bewirkt eine Darstellung wie
- - -
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.
Beispiel:
- - - Die Eingabe von
Eine unsortierte Liste: <ul> <li>Unsortierte Listen eignen sich für alle Arten von Aufzählungen. <li>Listen können auch geschachtelt werden: <ul> <li>Elemente der inneren Liste werden meist weiter eingerü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 äuß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 im <ol>-Befehl beeinflussen.
Beispiel:
- - - Die Eingabe von
Eine numerierte Liste: <ol> <li>Numerierte Listen eignen sich für Aufzählungen, bei denen die genaue Reihenfolge der Elemente wichtig ist. <li>Listen können auch geschachtelt werden: <ol> <li>Elemente der inneren Liste werden meist weiter eingerückt und separat numeriert. <li>Hier ist das zweite Element der inneren Liste. </ol> <li>Hier ist ein weiteres (letztes) Element der äußeren Liste. </ol>- - - bewirkt eine Darstellung wie
Eine numerierte 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.
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ücke bezeichnet. <dt>Gemse: <dd>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. </dl>- - - bewirkt eine Darstellung wie
Kleine Tierkunde
- - -
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ä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 < und > bzw. & 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.
Bei <pre> und bei </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, z.B. für die Ausrichtung:
align=left für linksbündig
align=right für rechtsbündig
align=center für zentriert
Beispiel:
- - - Die Eingabe von
<table border>
<tr><td align=right>11111000000
<td align=left>binä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
- - -