Auch wenn ich anfangs sagte, dass HTML sehr einfach ist und nicht etwa Computer-Profis vorbehalten ist, ist HTML inzwischen doch so mächtig und umfangreich geworden, dass man Bücher mit 1000 Seiten damit füllen kann. Für normale Webseiten genügt jedoch ein winziger Bruchteil des HTML-Umfanges, und genau den möchte ich im Folgenden beschreiben.

Ich erkläre die grundlegenden HTML-Befehle anhand des vorher schon verwendeten Beispieles Geld gut anlegen. Schritt für Schritt zeige ich, wie man zu so einer Seite kommt und diese noch erweitert.

Das Grundgerüst einer Internet-Seite

Wie sieht denn eine HTML-Seite überhaupt aus? Der folgende HTML-Code zeigt eine vollständige Internet-Seite, die so aussieht. Wie kann man das nachprüfen? Verwende irgendeinen Editor oder das Textverarbeitungsprogramm Word und kopiere die folgenden Zeilen in eine leere Datei, die Du dann als Beispiel.html abspeicherst. Öffne dann genau diese Datei mit Deinem Internet-Browser und Du hast Deine erste HTML-Datei erstellt; so einfach ist das!

<html>
  <head>
    <title>Einfache HTML-Seite</title>
    <meta name="Author" content="Patrick Wagner">
  </head>
  <body>
    <h1>Geld gut anlegen</h1>
    <p>Einer meiner Grundleitsätze im Leben ist, dass es...</p>
  </body>
</html>

Woraus besteht nun eine HTML-Datei? Jede HTML-Datei beginnt mit dem Tag <html>, das besagt, dass jetzt eine HTML-Text kommt und nichts anderes. Das Dokument endet mit </html>. Das Dokument gliedert sich in zwei Bereiche; der Dokumentkopf beginnt mit <head> und endet mit </head>, der Dokumentkörper beginnt mit <body> und endet mit </body>. Im Dokumentkopf stehen allgemeine Angaben über das Dokument wie der Titel oder der Name des Autors, im Dokumentkörper steht der eigentliche Inhalt.

Wer jetzt schon die Stirn runzelt, weil das kompliziert erscheint, der braucht sich keine weiteren Gedanken zu machen. So sieht nunmal jede HTML-Datei aus, verstehen braucht man das nicht. Den Kopfbereich kann man auch komplett weglassen; jedoch empfiehlt es sich, wenigstens den Titel des Dokuments zwischen die Tags <title> und </title> zu schreiben, denn der steht in der Titelzeile des Browser (siehe das neu geöffnete Fenster im obigen Beispiel).

Im obigen Beispiel besteht der Dokumentkopf aus zwei Zeilen. Die erste Zeile beginnt mit dem <title> Tag und enthält den Titel der Seite. Der Titel endet mit dem </title> Tag. Die zweite Zeile enthält ein sogenanntes meta-Tag, welches im Prinzip nur einen Kommentar enthält, in diesem Falle nämlich, wer der Autor der Webseite ist.

Im Dokumentkörper steht der eigentliche Inhalt, den man darstellen will. Im obigen Beispiel besteht der Inhalt aus einer Überschrift und einem Absatz. Ich erinnere nochmals, HTML ist eine Seitenbeschreibungssprache, die nur beschreibt, welcher Teil im Dokument was ist, nicht wie er dargestellt wird. Eine Hauptüberschrift beginnt mit dem Tag <h1> (h1 steht im Englischen für head 1) und endet mit dem konträren Tag </h1>. Damit ist klar, dass der Text zwischen den beiden Tags eine Überschrift ist. Ein normaler Absatz beginnt mit dem Tag <p> (p steht im Englischen für paragraph, also Absatz) und endet mit dem konträren Tag </p>.

Einfache Absatzformatierungen

Mit dem oben gezeigten Grundgerüst und den beiden Tags <h1> und <p> kann man bereits umfangreiche Internet-Seiten erstellen, indem man lange Texte in Überschriften und normale Textabsätze gliedert. Um in unserem Beispiel weiterzumachen, wird jetzt eine Unterüberschrift fällig. Während man eine Hauptüberschrift mit dem Tag <h1> einleitet, schließt man eine Unterüberschrift einfach in die beiden Tags <h2> und </h2> (engl. head 2) ein. Wie kennzeichnet man wohl eine Überschrift 3. oder 4. Grades? HTML kann überschriften bis zur 6. Ebene unterscheiden. Das entsprechende Tag lautet dann ganz einfach <h6>.

Mit der Unterüberschrift Kostenloses Girokonto und zwei weiteren Textabsätzen sieht unsere HTML-Datei also wie folgt aus und wird im Browser so dargestellt.

<html>
  <head>
    <title>Einfache HTML-Seite</title>
    <meta name="Author" content="Patrick Wagner">
  </head>
  <body>
    <h1>Geld gut anlegen</h1>
    <p>Einer meiner Grundleitsätze im Leben ist, dass es...</p>
    <h2>Kostenloses Girokonto</h2>
    <p>Das waren Zeiten, als ich für mein ganz normales Girokonto...</p>
    <p>Gott sei Dank sind diese Zeiten vorbei, zumindest für mich...</p>
  </body>
</html>

Darstellung einer Liste

Die 6 Vorteile, die unser Girokonto bietet, könnten nun mit 6 einzelnen Absätzen dargestellt werden. Schöner sieht es jedoch aus, wenn man sie als eine Liste darstellt. Die Formatierung der Liste, insbesondere das Einfügen der runden Bullets, macht der Internet-Browser automatisch. Erweitern wir unser HTML-Dokument um eine Liste, die im Browser dann so aussieht.

<html>
  <head>
    <title>Einfache HTML-Seite</title>
    <meta name="Author" content="Patrick Wagner">
  </head>
  <body>
    <h1>Geld gut anlegen</h1>
    <p>Einer meiner Grundleitsätze im Leben ist, dass es...</p>
    <h2>Kostenloses Girokonto</h2>
    <p>Das waren Zeiten, als ich für mein ganz normales Girokonto...</p>
    <p>Gott sei Dank sind diese Zeiten vorbei, zumindest für mich...</p>
    <ul>
      <li>absolut kostenfreies Girokonto</li>
      <li>einmal monatlich kostenfreier Kontoauszug per Post</li>
      <li>EC-Karte kostenlos inbegriffen</li>
      <li>kostenlose Geldabhebung an über 6000 Geldautomaten...</li>
      <li>Guthabenverzinsung zwischen 1,0% und 2,0%...</li>
      <li>sehr komfortables und dank PIN und TAN sehr sicher...</li>
    </ul>
  </body>
</html>

Eine Liste beginnt mit dem Tag <ul> (engl. unsorted list) und endet mit dem Tag </ul>. Dazwischen befindet sich die eigentliche Liste; jeder Punkt der Liste beginnt mit dem Tag <li> (englisch list) und endet mit dem konträren Tag </li>. So einfach ist das.

In unserem Beispiel folgt nun eine weitere Unterüberschrift und ein weiterer Textabsatz. Die notwendigen HTML-Tags kennen wir bereits. Jetzt wird es aber interessant, denn es folgt die erste Tabelle.

Tabellen in HTML

Für unsere Internet-Seite benötigen wir nun eine Tabelle mit 4 Zeilen und 5 Spalten. Was im nachfolgenden HTML-Code geschrieben ist, sieht im Browser so aus.

<html>
  <head>
    <title>Einfache HTML-Seite</title>
    <meta name="Author" content="Patrick Wagner">
  </head>
  <body>
    <h1>Geld gut anlegen</h1>
    <p>Einer meiner Grundleitsätze im Leben ist, dass es...</p>
    <h2>Kostenloses Girokonto</h2>
    <p>Das waren Zeiten, als ich für mein ganz normales Girokonto...</p>
    <p>Gott sei Dank sind diese Zeiten vorbei, zumindest für mich...</p>
    <ul>
      <li>absolut kostenfreies Girokonto</li>
      <li>einmal monatlich kostenfreier Kontoauszug per Post</li>
      <li>EC-Karte kostenlos inbegriffen</li>
      <li>kostenlose Geldabhebung an über 6000 Geldautomaten...</li>
      <li>Guthabenverzinsung zwischen 1,0% und 2,0%...</li>
      <li>sehr komfortables und dank PIN und TAN sehr sicher...</li>
    </ul>
    <table>
      <tr>
        <th>Bank</th>
        <th>ab 0 Euro</th>
        <th>ab 5000 Euro</th>
        <th>ab 10000 Euro</th>
        <th>ab 25000 Euro</th>
      </tr>
      <tr>
        <td>Patagon</td>
        <td>5,00 %</td>
        <td>5,00 %</td>
        <td>4,50 %</td>
        <td>4,25 %</td>
      </tr>
      <tr>
        <td>DiBa</td>
        <td>4,50 %</td>
        <td>4,00 %</td>
        <td>4,00 %</td>
        <td>4,00 %</td>
      </tr>
      <tr>
        <td>Advance Bank</td>
        <td>4,50 %</td>
        <td>3,50 %</td>
        <td>3,50 %</td>
        <td>3,50 %</td>
      </tr>
    </table>
  </body>
</html>

Eine Tabelle beginnt mit dem Tag <table> (engl. Tabelle) und endet mit dem entsprechenden Tag </table>. Eine Zeile der Tabelle beginnt mit dem Tag <tr> und endet entsprechend mit </tr>. Da unsere Tabelle aus insgesamt 4 Zeilen besteht, findet man diese Tags als 4 mal.

Kommen wir zu den 5 Spalten der Tabelle. Die erste Zeile der Tabelle soll etwas Besonderes sein, da sie die Überschriften für die jeweilige Spalte enthält. Jede einzelne Zelle beginnt mit dem Tag <th> (engl. table head, also Tabellenkopf) und endet mit </th>. In den Zeilen 2-4 stehen ganz normale Tabellendaten, die mit dem Tag <td> (engl. table data) beginnen und mit </td> enden.

Man erkennt, dass die erste Zeile gegenüber den anderen hervorgehoben ist. Man kann auch für die erste Zeile gleich die <td> Tags benutzen, dann sehen alle Zeilen der Tabelle gleich aus.

Auch wenn wir jetzt die Zinssätze der verschiedenen Banken in Tabellenform gebracht haben, gefällt das Ergebnis noch nicht ganz, da zum Beispiel die Gitternetzlinien fehlen. Aber dazu später; hier geht es ja um die elementarsten HTML-Befehle.

Einbau von Hyperlinks

Unser HTML-Dokument ist fast fertig. Es fehlen noch die Links zur Patagon-Bank und zur e-mail. Ich rufe nochmals in Erinnerung, dass es zur Hauptaufgabenstellung bei der Entwicklung von HTML gehörte, Dokumente auf unterschiedlichen Rechnern geschickt miteinander zu verlinken. Widmen wir uns also dem zweitletzten Absatz in unserem HTML-Dokument. Ein Link zur Bank Patagon wird durch folgende Zeile hinzugefügt:

<a href="http://www.patagon.de">Patagon</a>

Das sieht kompliziert aus, ist aber ganz einfach, da die Syntax immer dieselbe ist. Ein Link beginnt mit dem Tag <a> (engl. anchor, also Anker) und endet entsprechend mit </a>. Innerhalb des ersten Tags steht jedoch noch href="..." (engl. hyper reference, also Hypertext Referenz). Hier steht die Internet-Adresse unserer Bank. Zwischen den Tags <a> und </a> steht der Text, der vom Browser als Link gekennzeichnet wird. Wie sieht nun ein Link aus, mit dem man automatisch ein e-mail Fenster öffnet?

<a href="mailto:mail@web.de">e-mail</a>

Der Link sieht genauso aus wie oben, jedoch steht anstatt der Internet-Adresse der Bank eine e-mail Adresse mit mailto: davor. Damit kann nun unser HTML-Dokument fertig gestellt werden. Der inzwischen schon umfangreiche Quelltext sieht im Browser so aus.

<html>
  <head>
    <title>Einfache HTML-Seite</title>
    <meta name="Author" content="Patrick Wagner">
  </head>
  <body>
    <h1>Geld gut anlegen</h1>
    <p>Einer meiner Grundleitsätze im Leben ist, dass es...</p>
    <h2>Kostenloses Girokonto</h2>
    <p>Das waren Zeiten, als ich für mein ganz normales Girokonto...</p>
    <p>Gott sei Dank sind diese Zeiten vorbei, zumindest für mich...</p>
    <ul>
      <li>absolut kostenfreies Girokonto</li>
      <li>einmal monatlich kostenfreier Kontoauszug per Post</li>
      <li>EC-Karte kostenlos inbegriffen</li>
      <li>kostenlose Geldabhebung an über 6000 Geldautomaten...</li>
      <li>Guthabenverzinsung zwischen 1,0% und 2,0%...</li>
      <li>sehr komfortables und dank PIN und TAN sehr sicher...</li>
    </ul>
    <table>
      <tr>
        <th>Bank</th>
        <th>ab 0 Euro</th>
        <th>ab 5000 Euro</th>
        <th>ab 10000 Euro</th>
        <th>ab 25000 Euro</th>
      </tr>
      <tr>
        <td>Patagon</td>
        <td>5,00 %</td>
        <td>5,00 %</td>
        <td>4,50 %</td>
        <td>4,25 %</td>
      </tr>
      <tr>
        <td>DiBa</td>
        <td>4,50 %</td>
        <td>4,00 %</td>
        <td>4,00 %</td>
        <td>4,00 %</td>
      </tr>
      <tr>
        <td>Advance Bank</td>
        <td>4,50 %</td>
        <td>3,50 %</td>
        <td>3,50 %</td>
        <td>3,50 %</td>
      </tr>
    </table>
    <p>Fast alle hier erwähnten Banken bezahlen eine Prämie...
       <a href="http://www.patagon.de">Patagon</a> bezahlt mit 50 Euro...
       Schicke mir bei Interesse einfach eine
       <a href="mailto:mail@web.de">e-mail</a>.</p>
    <h2>Kostenloses Depot</h2>
    <p>Ich kann mich noch an Zeiten erinnern, wo ein Depot...</p>
  </body>
</html>

Einfügen von Bildern

Unser HTML-Dokument zum Thema Geld gut Anlegen ist jetzt im Prinzip fertig. Das Dokument ist sinnvoll in Absätze und Kapitel gegliedert, die aktuellen Zinssätze sind schön in einer Tabelle dargestellt und es gibt Links zur Patagon-Bank und zum e-mail Programm. Zur Dekoration binden wir jetzt noch ein kleines Bildchen ein.

Wir fügen das Bild direkt nach unserer Hauptüberschrift ein, indem wir folgenden HTML-Code (zweite Zeile) direkt nach der Überschrift einfügen:

<h1>Geld gut anlegen</h1>
<img src="Muenzstapel.gif">

Ein Bild wird mit Hilfe des <img> (engl. Image) Tags eingefügt. Im Tag wird mit src="Quelle" der Name bzw. die Quelle des Bildes angegeben. Unser HTML-Dokument sieht damit so aus und ist vorläufig fertig.

Zusammenfassung

Mit Hilfe von nur 16 HTML-Tags haben wir ein ziemlich umfangreiches HTML-Dokument erzeugt, das Überschriften 1. und 2. Grades, zahlreiche normale Textabsätze, eine Liste, eine Tabelle, zwei Hyperlinks sowie ein Bild enthält.

Wir haben ein Grundgerüst eines HTML-Files gesehen, das durch die Tags <html>, <head> und <body> gegliedert wurde. Mit Hilfe der Tags <title> und <meta> gaben wir dem Dokument einen Titel und verewigten uns als Autor. Unseren Text gliederten wir mit einer Hauptüberschrift <h1> und drei Unterüberschriften <h2> in sinnvolle Abschnitte.

Eine Aufzählung von 6 Punkten kreierten wir in Form einer unsortierten Liste mit den Tags <ul> und <li>; eine Tabelle bauten wir mit den Tags <table>, <tr>, <th> und <td> zusammen. Mit Hilfe des Tags <a> bauten wir zwei Hyperlinks in unser Dokument ein und mit dem Tag <img> banden wir abschließend eine Grafik ein.

Unser Dokument besteht also wirklich nur aus 16 HTML-Befehlen (Tags) und ihren ensprechenden Gegenstücken jeweils am Ende:

<html>  </html>
<head>  </head>
<title> </title>
<meta>
<body>  </body>
<h1>    </h1>
<h2>    </h2>
<p>     </p>
<ul>    </ul>
<li>    </li>
<table> </table>
<tr>    </tr>
<th>    </th>
<td>    </td>
<a>     </a>
<img>

Mit diesen wenigen Tags kann man die tollsten und umfangreichsten Webseiten entwerfen. Und man muss diese Tags nicht einmal auswendig kennen; es reicht, wenn man sie von Ort zu Ort weiterkopiert und entsprechend abändert. Aber spätestens nach 2-3 HTML-Seiten kennt man diese elementaren Tags in- und auswendig.

Zurück zum Inhaltsverzeichnis HTML-Einführung