Dave Raggett   Start mit HTML

Dave Raggett, revidiert 24. Mai 2005.

Dies ist eine kurze Einführung in HTML. Was ist HTML? Es ist eine besondere Art von Textdokument, welches von Web-Browsern zur Wiedergabe von Texten und Bildern benötigt wird. Der Text in diesen Dokumenten enthält Markierungen (Tags) für die Strukturauszeichnung wie z.B. <p>, um den Beginn eines Absatzes (Paragraph) zu kennzeichnen und </p> für das Ende eines Absatzes. HTML-Dokumente werden oft als "Webseiten" bezeichnet. Der Browser ruft die Webseiten von Web-Servern ab, die dank des Internets überall auf der Welt sein können.

Viele schreiben HTML immer noch mit reinen Texteditoren wie z.B. Notepad (Windows) oder SimpleText (Mac). Mit dieser Anleitung und solch einem Editor können Sie tatsächlich sofort beginnen. Aber auch falls Sie nicht beabsichtigen, HTML direkt zu editieren, sondern lieber mit einem HTML-Editor wie dem Netscape Composer oder W3C's Amaya arbeiten möchten, werden Sie mit Hilfe dieser Anleitung genug lernen, um die Ergebnisse solcher Tools besser bewerten zu können und Ihr HTML für die unterschiedlichsten Browser zugänglich zu machen. Wenn Sie mit den Grundlagen von HTML vertraut sind, möchten Sie vielleicht lernen, wie Sie mit Hilfe von CSS Ihren Webseiten Styling geben, und vielleicht wollen Sie auch mit den Techniken weitermachen, die ich auf meiner Seite für fortgeschrittenes HTML vorstelle.

P.S. Sie können eine Menge lernen, wenn Sie sich einmal anschauen, wie andere Leute ihre HTML-Seiten geschrieben haben. Dazu brauchen Sie in Ihrem Browser lediglich auf das Menü "Ansicht" zu klicken und anschließend auf "Quelltext". Bei einigen Browsern müssen Sie auch stattdessen auf das Menü "Datei" klicken und dann auf "Quelltext anzeigen". Versuchen Sie es ruhig mit dieser Seite, um zu sehen, wie ich meine eigenen Ideen, die ich weiter unten erkläre, angewendet habe. Sie werden recht bald einen kritischen Blick entwickeln und entdecken, wie viele Seiten doch ziemlich übel unter der Haube aussehen!

Diese Seite wird Ihnen erklären, wie Sie:

Wenn Sie hier etwas anderes erwartet haben, schauen Sie doch einmal auf die Seite für fortgeschrittenes HTML.

Beginnen Sie mit einem Titel

Jedes HTML-Dokument bekommt am Anfang einen Titel. Dazu schreiben Sie einfach folgendes:

 <title>Mein erstes HTML-Dokument</title>

Tauschen Sie den Text "Mein erstes HTML-Dokument" in einen beliebigen Text Ihrer Wahl. Der Titel beginnt mit dem vorangestellten Start-Tag <title> und endet mit dem entsprechenden End-Tag </title>. Der Titel sollte stets am Anfang Ihres Dokumentes stehen.

Um das einmal auszuprobieren, geben Sie obenstehendes Beispiel in einen Texteditor ein, speichern die Datei unter dem Namen "test.html" und schauen sich anschließend die Datei in einem Web-Browser an. Wenn die Dateiendung ".html" oder ".htm" ist, wird der Browser dies als HTML erkennen. Die meisten Browser zeigen den Titel in der Fenster-Titelleiste.

Machen Sie weiter mit Überschriften und Absätzen

Wenn Sie schon mal mit Microsoft Word gearbeitet haben, kennen Sie wahrscheinlich die eingebauten Formatvorlagen für Überschriften mit unterschiedlicher Gewichtung. In HTML gibt es sechs Stufen für Überschriften: H1 besitzt die höchste Priorität, H2 die zweithöchste, und so weiter bis H6, der Überschrift mit geringster Priorität.

So erstellen Sie eine wichtige Überschrift:

<h1>Eine ganz wichtige Überschrift</h1>

und so eine nur geringfügig weniger wichtige Überschrift:

<h2>Eine kaum weniger wichtige Überschrift</h2>

Jeder Absatz, den Sie schreiben, beginnt mit dem <p>-Tag. Anders als die schließenden Tags für z.B. Überschriften ist </p> optional (Anmerkung d. Übersetzers: Für Kompatibilität mit XHTML und optimale CSS-Unterstützung sollten Sie optionale End-Tags dennoch immer setzen). Ein Beispiel:

<p>Hier ist der erste Absatz.</p>

<p>Hier ist ein zweiter Absatz.</p>

Etwas betonen

Sie können ein oder mehrere Worte mit dem <em>-Tag hervorheben, zum Beispiel:

Das ist ein ziemlich <em>interessantes</em> Thema!

Werten Sie Ihre Seite mit Bildern auf

Bilder können Ihre Webseiten interessanter machen und gut dabei helfen, Ihre Botschaften rüberzubringen. Um ein Bild hinzuzufügen, verwenden Sie einfach das <img>-Tag. Nehmen wir einmal an, Sie haben ein Bild namens "peter.jpg" in dem selben Ordner oder Verzeichnis Ihrer HTML-Datei. Dieses Bild sei 200 Pixel breit und 150 Pixel hoch.

<img src="peter.jpg" width="200" height="150">

Das src-Attribut benennt die Bilddatei. Die Breiten- und Höhenangaben sind nicht unbedingt erforderlich, sie helfen aber dem Browser beim Aufbau Ihrer Webseite. Eines fehlt allerdings noch! Nicht alle können oder wollen die Bilder auf den Webseiten sehen, und diesen Leuten sollten Sie eine Beschreibung für das fehlende Bild anbieten. Solch eine Beschreibung fügen Sie folgendermaßen hinzu:

<img src="peter.jpg" width="200" height="150"
alt="Mein Freund Peter">

Das alt-Attribut wird für kurze Beschreibungen verwendet, in unserem Beispiel "Mein Freund Peter". Für inhaltsreiche Bilder kann es mitunter nötig sein, eine längere Beschreibung anzubieten. Falls diese in der Datei "peter.html" steht, fügen Sie diese Angabe wie folgt mit dem Attribut longdesc hinzu:

<img src="peter.jpg" width="200" height="150"
alt="Mein Freund Peter" longdesc="peter.html">

Bilder für Webseiten können Sie auf unterschiedliche Arten erhalten, z.B. mit einer Digitalkamera, einem Scanner oder einem Grafikprogramm. Die meisten Browser kennen die Grafikformate GIF und JPEG, neuere Browser können auch PNG anzeigen. Um lange Wartezeiten während des Bilderdownloads aus dem Netzwerk zu vermeiden, sollten Sie die Dateigrößen immer gering halten.

Allgemein ist JPEG bestens geeignet für Fotografien und andere Bilder mit gleichmäßigen Farbverläufen, während GIF und PNG gut für Grafiken mit Farbflächen, Linien und Texten sind. Alle drei Formate bieten Optionen für eine progressive Darstellung. Dabei wird erst eine grobe Version angezeigt, die dann nach und nach eine bessere Qualität erhält.

Hyperlinks zu anderen Seiten setzen

Was das Web so einzigartig macht, ist die Möglichkeit, Links von einer Seite zu einer anderen Seite zu setzen und solch einem Link einfach mit einem Klick zu folgen. Ein einzelner Klick kann Sie auf die andere Seite der Welt führen!

Links werden mit dem <a>-Tag gekennzeichnet. Wir werden mal einen Link zu unserem Dokument "peter.html" legen:

Das ist ein Link zu <a href="peter.html">Peter's Seite</a>.

Der Text zwischen <a> und </a> ist eine Bezeichnung für den Link und wird normalerweise blau und unterstrichen von den Browsern dargestellt.

Wenn Sie zu einer Seite auf einer ganz anderen Website linken möchten, müssen Sie die komplette Internetadresse angeben (allgemein als URL bezeichnet). Um z.B. zu www.w3.org zu linken, müssen Sie schreiben:

Das ist der Link zum <a href="http://www.w3.org/">W3C</a>.

Ebenso können Sie auch aus einem Bild einen Hyperlink machen. Zum Beispiel ermöglicht folgendes einen Klick auf das Firmenlogo, mit dem Sie zur Homepage der Firma zu gelangen:

<a href="/"><img src="logo.gif" alt="Homepage"></a>

Drei Arten von Listen

HTML unterstützt drei unterschiedliche Listenformate. Das erste verwendet sogenannte Bullets (Aufzählungszeichen) und wird als unordered list (ungeordnete Liste) bezeichnet. Diese Liste benutzt die Tags <ul> und <li>:

<ul>
  <li>Ein Listenpunkt</li>

  <li>Ein weiterer Listenpunkt</li>

  <li>Noch ein Listenpunkt</li>
</ul>

Die Liste muß mit </ul> beendet werden, allerdings ist </li> optional und darf weggelassen werden (Anmerkung d. Übersetzers: Für Kompatibilität mit XHTML und optimale CSS-Unterstützung sollten Sie optionale End-Tags dennoch immer setzen). Das zweite Listenformat ist die nummerierte Liste und wird als ordered list (geordnete Liste) bezeichnet. Sie verwendet das <ol>- und <li>-Tag:

<ol>
  <li>Erster Listenpunkt</li>

  <li>Zweiter Listenpunkt</li>

  <li>Dritter Listenpunkt</li>
</ol>

Genauso wie die ungeordnete Liste muß auch die geordnete Liste mit ihrem entsprechenden End-Tag </ol> beendet werden, und ebenso ist das schließende </li> optional und darf weggelassen werden.

Das dritte und letzte Listenformat ist die Definitionsliste. Diese Liste erlaubt Ihnen, Begriffe und deren Definitionen aufzulisten. Sie beginnt mit dem <dl>-Tag und endet mit </dl>. Jeder Begriff startet jetzt mit dem <dt>-Tag und seine Definition mit <dd>. Zum Beispiel:

<dl>
  <dt>Der erste Begriff</dt>
  <dd>Seine Definition</dd>

  <dt>Der zweite Begriff</dt>
  <dd>Seine Definition</dd>

  <dt>Der dritte Begriff</dt>
  <dd>Seine Definition</dd>
</dl>

Die End-Tags </dt> und </dd> sind wieder optional und dürfen weggelassen werden. Im übrigen können Sie Listen auch verschachteln, also eine Liste in eine andere setzen:

<ol>
  <li>Erster Listenpunkt</li>

  <li>
    Zweiter Listenpunkt
    <ul>
      <li>Erster Unter-Listenpunkt</li>
      <li>Zweiter Unter-Listenpunkt</li>
    </ul>
  </li>

  <li>Dritter Listenpunkt</li>
</ol>

Desweiteren dürfen in längeren Listenpunkten durchaus Absätze und Überschriften etc. verwendet werden.

Ihre Strukturauszeichnung (Markup) aufräumen

Einen bequemen Weg, um automatisch Fehler aus dem HTML-Code zu entfernen, bietet Ihnen HTML Tidy. Dieses kleine Tool räumt Ihren Code so auf, dass er anschließend wesentlich leichter zu lesen und editieren ist. Ich empfehle Ihnen, Tidy regelmäßig über jede HTML-Seite laufen zu lassen, nachdem sie editiert wurde. Einige HTML-Editoren erzeugen zudem ziemlich schlampigen Code, den Tidy ebenfalls sehr effektiv säubert.

Wo gibt es weitere Informationen?

Für den Fall, daß Sie mehr lernen möchten, habe ich weiteres Material vorbereitet unter Fortgeschrittenes HTML und Styling für Webseiten.

Die Empfehlungen des W3C für HTML 4.0 sind die Referenz für HTML. Es ist allerdings eine sehr technische Spezifikation. Einfacher zu lesen ist vielleicht eines der zahlreichen Bücher über HTML, wie zum Beispiel "Raggett on HTML 4", herausgegeben 1998 vom Addison Wesley-Verlag. XHTML 1.0 ist gegenwärtig W3C-Empfehlung.

Viel Glück nun und beginnen Sie jetzt mit HTML!

Dave Raggett <dsr@w3.org>

Copyright  ©  1994-2004 W3C ® (MIT, INRIA, Keio ), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements.