(X)HTML und CSS in 10 Minuten

Dieses Dokument ist eine Einführung in HTML. Es basiert auf der W3C-Empfehlung XHTML 1.0 vom Januar 2000.

1. Logische Struktur

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

2. Das Grundgerüst

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.

3. Überschriften

<h1>Überschrift erster Ordnung</h1>
<h2>Überschrift zweiter Ordnung</h2>
<h3>Überschrift dritter Ordnung</h3>
...
  

usw. ist die Syntax für Überschriften.

4. Absatztypen

Normale Absätze (paragraphs) werden mit <p> angefangen und mit </p> beendet. Weitere Absatztypen sind <blockquote>...</blockquote> und <address>...</address>.

5. Listen

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>
  • item
  • item
  • item
<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>
  1. item
  2. item
  3. item
<dl>
  <dt>item1</dt>
  <dd>definition</dd>
  <dd>definition</dd>
  <dt>item2</dt>
  <dd>definition</dd>
  <dd>definition</dd>
</dl>
item1
definition
definition
item2
definition
definition

6. Textformatierung

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
samp
kbd
cite
dfn
acronym
q
ins
del
tt
big
small
sup
sub

Darüber hinausgehende Formatierung sollte mit Hilfe von CSS geschehen.

7. URLs, Links und Anchors

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

8. Grafiken

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.

9. Tabellen

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

10. Styles (CSS)

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.

Weitere Informationen

Das WWW Consortium bietet einen HTML Mini-Guide. Die mit Abstand beste deutschsprachige Online-Dokumentation über HTML ist SelfHTML.


zuletzt geprüft: 5. Juli 2002, Stefan Jaschke