Dieses Dokument ist eine Einführung in HTML. Es basiert auf der W3C-Empfehlung XHTML 1.0 vom Januar 2000.
Für jeden der LaTeX kennt, ist HTML einfach zu lernen. Man formuliert in der HyperText Markup Language die logische Struktur des Dokumentes, indem man sagt, was Überschriften oder Absätze sind, welche Informationen in Auflistungen organisiert werden, welche Text-Passagen wie hervorgehoben werden sollen oder wie Grafiken und Tabellen einzubinden sind. Hinzu kommt lediglich das Setzen von Verweisen (Links), was gerade den Unterschied zwischen einer Hypertext-Sprache und einer ``klassischen'' Sprache für linear/hierarchisch organisierten Text ausmacht.
Mit der Verabschiedung der Standards HTML 4.0 und der
Style-Sprache cascading style sheets (CSS) ist es gelungen, Inhalt
und Layout wieder stärker zu trennen und die Sprache HTML von mehr
und mehr Formatanweisungen - die oft obendrein noch
browserspezifisch waren - zu befreien. In diesem Modell wird die
Style-Sprache CSS benutzt, um das Aussehen der HTML-Elemente (wie
z.B. Überschriften) festzulegen, während sich das HTML-File
weitgehend auf die logische Struktur beschränkt. (Dies entspricht
der Trennung von Inhalt und Layout in LaTeX-Dokumente und
LaTeX-Style-Files wie article.cls.) Will man an einer
Stelle im Text die globale Vorgabe überschreiben, kann man das mit
der gleichen Style-Sprache tun (insofern cascading).
Hier ist das syntaktische Grundgerüst für eine XHTML-Datei:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Dieser Titel erscheint im Titelbalken des Browserfensters</title>
</head>
<body>
Hier beginnt der Text des Dokuments...
... und hier endet er.
</body>
</html>
Dieses minimale XHTML-Dokument sieht in ihrem Browser so
aus. Ein HTML-Dokument besteht im wesentlichen aus
Elementen wie html, head,
title oder body, die jeweils Text und
weitere Elemente enthalten können.
<h1>Überschrift erster Ordnung</h1> <h2>Überschrift zweiter Ordnung</h2> <h3>Überschrift dritter Ordnung</h3> ...
usw. ist die Syntax für Überschriften.
Normale Absätze (paragraphs) werden mit
<p> angefangen und mit </p>
beendet. Weitere Absatztypen sind
<blockquote>...</blockquote> und
<address>...</address>.
Es gibt drei Listentypen, unordered, ordered und definition lists. Syntax und Aussehen sind wie folgt:
| Quelltext | Layout |
|---|---|
<ul> <li>item</li> <li>item</li> <li>item</li> </ul> |
|
<ol> <li>item</li> <li>item</li> <li>item</li> </ol> |
|
<dl> <dt>item1</dt> <dd>definition</dd> <dd>definition</dd> <dt>item2</dt> <dd>definition</dd> <dd>definition</dd> </dl> |
|
Häufig benutzte ``logische'' Formatanweisungen sind
<em>...</em> (Betonung),
<strong>...</strong> (starke
Betonung),
<code>...</code> (Quelltext/Sourcecode),
<var>...</var> (Variablennamen) und
<pre>...</pre>:
preformatierter Text, der auch Zeilenumbrüche [newline] und Tabulatoren richtig abbildet: [Tab] [Tab] [Ende]
Häufig benutzte ``physische'' Formatanweisungen sind
<b>...</b> (fett) und
<i>...</i> (kursiv).
Weitere Format-Elemente sind:
| logische Textauszeichnung | physische Textauszeichnung |
|---|---|
sampkbdcitedfnacronymqinsdel
|
ttbigsmallsupsub
|
Darüber hinausgehende Formatierung sollte mit Hilfe von CSS geschehen.
Wenn man in einem HTML-Dokument die Seite mit der URL
http://selfhtml.teamone.de/ referenzieren
möchte, schreibt man z.B.
<a href="http://selfhtml.teamone.de/">SelfHTML</a> ist eine großartige HTML-Dokumentation.
was dann so aussehen würde: ``SelfHTML ist eine großartige HTML-Dokumentation.''
Führende Pfad-Komponenten einer (absoluten) URL, die zwischen dem referenzierenden und dem referenzierten Dokument übereinstimmen, können weggelassen werden ( -> relative URLs).
Außer zur Definition von (abgehenden) Verweisen kann das
Anchor-Element <a> auch zur Definition von
Positionen für ankommende Verweise dienen. Z.B. wurde für
die Überschrift des nächsten Abschnittes der Name
graphics definiert (mittels <h2><a
name="graphics">8. Grafiken</a></h2>), so daß
die relative URL #graphics auf genau diese Überschrift
verweist. (Die absolute URL ist
http://www.jaschke-net.de/html-in-10-minuten.html#graphics
und dieser Link veranlaßt Ihren Browser, auf
den nächsten Abschnitt zu positionieren.)
Grafiken werden mittels des img-Elements
eingebunden: <img src="URL-des-Bildes">. Die
meisten Browser unterstützen die Inline-Darstellung der
Grafikformate bmp, jpg, gif
und zunehmend png. Will man Grafiken in anderen
Formaten, z.B. Postscript oder PDF, einbeziehen, braucht der
Benutzer ein Plug-In oder einen externen Viewer (im Navigator
einzurichten unter Preferences -> Navigator ->
Applications). Während zunehmend davon ausgegangen werden kann,
daß auf allen Plattformen ein Acrobat Reader installiert ist, sind
Postscript-Viewer weit weniger verbreitet.
Tabellen sind oben schon benutzt worden. Ein Beispiel für eine einfache Tabelle ist:
<table>
<tbody>
<tr>
<th>erste Spaltenüberschrift</th>
<th>zweite Spaltenüberschrift</th>
</tr>
<tr>
<td>erste Zeile, erste Spalte</td>
<td>erste Zeile, zweite Spalte</td>
</tr>
<tr>
<td>zweite Zeile, erste Spalte</td>
<td>zweite Zeile, zweite Spalte</td>
</tr>
<tr>
<td>dritte Zeile, erste Spalte</td>
<td>dritte Zeile, zweite Spalte</td>
</tr>
</tbody>
</table>
(<tr> steht für table row,
<th> für table head und
<td> für table data.)
Ohne die in CSS formulierten Styles würde dieses Dokument ziemlich blaß
aussehen. Also schauen wir uns kurz an, wie einige der Effekte
dieses Dokuments zustande kommen. Im Vorspann (im
head-Element) steht die Zeile
<link rel="stylesheet" type="text/css" href="global.css">
die dafür sorgt, daß die Datei global.css geladen
und vom Browser als CSS interpretiert wird. Diese Datei enthält
u.a. folgende CSS-Anweisungen:
body {background-color:#ffffff;
color:#000066;
font-family:sans-serif,Arial,Verdana,helvetica,lucida;
margin-left:10px;}
body.blue { background-color:#ffffff;
font-family:sans-serif,Verdana,Arial,helvetica,lucida;
background-image:url(bluebar.gif);
background-repeat:repeat-y;
margin-left:41px;}
Dies bedeutet, daß ich normalerweise einen weißen Hintergrund haben möchte
(#ffffff ist die hexadezimale Kodierung von Weiß im RGB-System),
die Schriftfarbe dunkelblau (#000066) sein soll, als
Schriftfamilie eine serifenlose Schrift verwendet werden soll - da auf
verschiedenen Plattformen verschiedene serifenlose Schriften zur Verfügung
stehen, stehen hier mehrere Namen zur Auswahl - und das ganze Dokument einen
linken Rand von 10 Pixeln haben soll. Wird jedoch der body des
HTML-Dokuments nicht mit <body> sondern mit <body
class="blue"> eingeleitet, wird zusätzlich ein Hintergrund-Bild
(bluebar.gif) verwendet, daß runterwärts wiederholt
wird. Außerdem wird der Rand auf 41px verbreitert.
th {background-color:#ccccff;}
td {background-color:#ffffee;}
sorgt für die farbliche Gestaltung der Tabellenzellen.
h1 { font-size:18pt; text-align:center}
h2 { font-size:14pt; margin-left:-8px}
h3 { font-size:12pt; }
h4 { font-size:10pt; }
legt Größen und Positionierung der Überschriften fest.
p { text-align:justify; }
em { font-weight:bold; }
pre,code,kbd { font-family:monospace,"Courier New",Courier;
color:darkgreen;
font-weight:bold;}
var { color:#AA0033; font-style:normal; }
definiert Aspekte der Absatztypen und logischen
Textauszeichnungen p, em,
pre, code, kbd und
var.
Achtung: Viele der hier beschriebenen Formatierungen/Styles werden ignoriert, wenn im Netscape Navigator Use my default fonts, overriding document-specified fonts eingestellt ist. Das Gleiche gilt, falls (in Netscape 4.x) Javascript ausgeschaltet ist.
Das WWW Consortium bietet einen HTML Mini-Guide. Die mit Abstand beste deutschsprachige Online-Dokumentation über HTML ist SelfHTML.