# HTML – Die Sprache des Internets

Die Menschen sind heute nicht mehr verwurzelt, sondern vernetzt.

Sie werden in diesem Kapitel die wichtigsten HTML-Grundlagen und Regeln kennen lernen und Ihr erstes HTML-Dokument erstellen. Auch wenn Sie bereits über Kenntnisse verfügen, werden Sie hier sicherlich noch die eine oder andere Information erhalten.

# Am Anfang war HTML ...

Zunächst möchte ich ein weit verbreitetes Missverständnis aus dem Weg räumen: HTML ist keine Programmiersprache, auch wenn dies für viele Leser eine Überraschung sein dürfte. HTML ist ein Akronym für »Hypertext Markup Language«, was ins Deutsche übersetzt so viel wie »Hypertext-Auszeichnungssprache« bedeutet. Es handelt sich bei HTML um eine Weiterentwicklung von SGML (Structured Generalized Markup Language), und HTML baut auf dem HTTP-Protokoll auf. Mit HTML lassen sich die Struktur, der Inhalt und das Verhalten eines Dokuments beschreiben bzw. auszeichnen, und es wird kein Programm im eigentlichen Sinne erstellt. Die Folge ist, dass HTML-Dokumente in verschiedenen Browsern unterschiedlich dargestellt werden. Ich werde später noch genauer darauf eingehen.

Die Wurzeln von SGML reichen bis in die 1960er Jahre zurück, obwohl der eigentliche SGML-Standard erst Anfang 1980 publiziert wurde. Der Anstoß zur Entwicklung von SGML war die Schaffung eines Dokumentformats, das die Struktur klar vom Inhalt trennen sollte, da durch den technologischen Fortschritt die Formatierung von Texten automatisiert worden war. Der häufig verwendete Begriff »Markup« (dt. Auszeichnung) geht auf handgeschriebene Anmerkungen von Autoren und Textdesignern zurück, die Textvorlagen mit Markups versahen, die dem Setzer als Anweisungen dienten, wie einzelne Textabsätze und Wörter gedruckt werden sollten. Heutzutage verbindet man mit dem Begriff »Markup« alle Mittel, die die Interpretation eines Dokuments ermöglichen.

HTML-Dokumente sind also reine Textdokumente mit Inhalt (Texte, Überschriften, Bilder, Tabellen etc.), dem Sie eine Struktur (und somit ein Aussehen) zuweisen. Dies geschieht über spezielle Zeichenfolgen im Dokument, die so genannten Tags. Ein Browser ist in der Lage, den Inhalt von der Struktur zu unterscheiden und den Inhalt optisch entsprechend darzustellen. Solche textbasierten Datenbeschreibungssprachen werden gemeinhin auch als Meta-Sprachen bezeichnet. Der Begriff »Hypertext« steht für miteinander verknüpfte Texte. Das Anklicken eines speziell hervorgehobenen Wortes innerhalb eines Textes bzw. eines Bildes führt den Benutzer auf eine weitere Seite oder ein weiteres Dokument, das in inhaltlicher Beziehung zum Ausgangstext steht – ebenfalls eine auf den technologischen Fortschritten basierende Entwicklung. Während ein Buch linear aufgebaut ist (in der Regel liest man es von vorn nach hinten), sind Hypertexte ein nicht lineares Medium zum Verfassen und Darstellen von Texten und so die optimale Lösung für die Bereitstellung von Texten in einem Computernetzwerk (wie dem World Wide Web).

# HTML-Versionen

In den vergangenen zehn Jahren unterlag auch HTML (wie jede computerspezifische Technologie) einer stetigen Entwicklung und Erneuerung aufgrund wachsender Anforderungen und Veränderungen im World Wide Web. Dies führte dazu, dass bislang vier Ausbaustufen von HTML vorliegen.

# HTML 1

Die erste Sprachversion ist mit der heutigen Version 4 kaum zu vergleichen. Zwar war es bereits in dieser Version möglich, Dokumente mit Überschriften und Grafiken zu versehen, und auch Verweise konnten gesetzt werden, aber alles in allem war es das schon. Sie werden im Internet auch keine Dokumente mehr finden, die sich auf diese Sprachversion beziehen bzw. beschränken. An dieser Stelle sollte aber erwähnt werden, dass HTML 1 zum Zeitpunkt der Veröffentlichung (1990) ein bahnbrechender Erfolg war.

# HTML 2

Es dauerte gute fünf Jahre, bis 1995 die zweite Sprachversion von HTML veröffentlicht wurde. Sie enthielt aber nur wenig mehr als kleine Verbesserungen, und die Mehrzahl der Elemente, die in dieser Sprachversion neu hinzugekommen sind, werden von den meisten Browsern bis heute nicht unterstützt. Das Kuriose war jedoch die Entwicklung von Netscape, dessen Navigator in der Version 2.0 weit mehr und ausgefallenere Möglichkeiten bot, als es der HTML 2.0-Standard vorsah. Der Navigator implementierte bereits die Frame-Technologie (das Browserfenster konnte dadurch in mehrere kleine Fenster unterteilt werden, und somit konnten verschiedene HTML-Dokumente gleichzeitig dargestellt werden) und Multimedia-Referenzierungen (Einbinden von Videos, Sounds und Ähnlichem). Dies verschaffte dem Netscape Navigator die unangefochtene Position des Marktführers.

# HTML 3.2

Im Januar 1997 folgte die HTML-Sprachversion 3.2. Die eigenartige Versionsnummer (3.2 anstatt 3.0) basiert auf den Unterschieden zwischen der gewünschten Entwicklung des WWW durch das W3C und den tatsächlichen Entwicklungen und Anforderungen durch die Internet-Gemeinschaft. In ihren Grundzügen war die Version 3.0 überaus ansprechend, da sie viele neue Elemente und Möglichkeiten enthalten sollte. Diese waren aber allesamt realitätsfern. Dieser Versionsstandard wurde niemals offiziell verabschiedet, sondern erst die vollkommen überarbeitete Version 3.2, die alles in allem auch nicht das Gelbe vom Ei war. Mittlerweile ließen sich zwar offiziell Tabellen und physische Textauszeichnungen in einem HTML-Dokument verwenden, die meisten dieser Elemente sind aber schon wieder als »deprecated« (dt. abgelehnt) deklariert.

# HTML 4 und 4.01

Am 18.02.1998 wurde die HTML-Sprachversion 4 offiziell verabschiedet, die dann am 24.12.1998 (sozusagen als Weihnachtsgeschenk) durch die überarbeitete Version 4.01 ersetzt wurde. Prinzipiell besann sich das W3C bei der Entwicklung von HTML 4.x wieder auf die Version 2 und lagerte die optische Gestaltung eines HTML-Dokuments erstmals in CSS aus. Die Version 4.x regelte hauptsächlich die Einbindung von Scripts und die Internationalisierung auf Unicode-Basis. Außerdem bot sie verschiedene Sprachvarianten (strict, transitional und frameset), mit denen Sie sich noch detaillierter auseinandersetzen werden. In diesem Buch verwenden wir die Version 4.x von HTML.

# Das erste HTML-Dokument

Starten Sie jetzt Ihren Editor, und legen Sie ein neues Dokument an. Den bekannten Windows-Editor Notepad finden Sie normalerweise unter StartProgrammeZubehörEditor. Sie können aber auch auf Start und Ausführen... klicken. Geben Sie in die Textzeile »notepad« ein, und klicken Sie auf OK. Tippen Sie das Listing 1.1 in den Editor, und speichern Sie das Dokument unter list1.1.html ab. Sollte Notepad das Dokument mit der Endung .txt abspeichern, müssen Sie im Dialogfeld DateiSpeichern unter... als Dateityp Alle Dateien (*.*) auswählen und als Dateinamen list1.1.html eintippen.

Speichern Sie HTML-Dokumente immer mit der Endung .htm oder .html ab. Das sind die Standard-Dateiendungen für HTML-Dokumente. Nach einem Doppelklick auf eine so abgespeicherte Datei öffnet der installierte Browser die Datei und zeigt sie an.

Öffnen Sie die Datei list1.1.html nun in Ihrem Browser. Ihr Ergebnis sollte dem in Abbildung 1.1 gezeigten entsprechen.

<html>
  <head>
    <title>Listing 1.1</title>
  </head>
  <body>
    Hallo WorldWideWeb!
  </body>
</html>

Listing 1.1: Hallo WorldWideWeb!

Darstellung des Listings 1.1 im Internet Explorer 6.0 Abbildung 1.1: Darstellung des Listings 1.1 im Internet Explorer 6.0

Herzlichen Glückwunsch! Dies ist das erste von Ihnen erstellte HTML-Dokument.

# Elemente und Tags

Wenn Sie sich das Listing 1.1 genauer ansehen, entdecken Sie gewisse Regelmäßigkeiten. Sie können Schlüsselnamen erkennen, die in spitzen Klammern geschrieben wurden. Diese Schlüsselnamen mit den spitzen Klammern nennt man Tags (dt. Etiketten), und sie unterteilen sich in Start- und Ende-Tags. Letztere kann man von den Start-Tags durch einen vorangestellten Schrägstrich / unterscheiden. Die Schlüsselnamen ergeben sich aus der Bezeichnung des Elements. Was jedoch sind Elemente? Ein HTML-Dokument besteht aus einer Vielzahl unterschiedlicher Elemente. Diese Elemente weisen gewisse Eigenschaften und Verhaltensformen auf und haben somit unterschiedliche spezifische Aufgaben, z. B. erzeugt das Element h1 eine Überschrift der ersten Ordnung. Der zwischen den Tag-Paaren (Start- und Ende-Tag) stehende Text (auch Gültigkeitsbereich genannt) hebt sich deutlich vom restlichen Inhalt ab. In Listing 1.1 können Sie insgesamt vier dieser Elemente ausmachen: html, head, title und body. Diese werden Sie auch in jedem anderen HTML-Dokument wiederfinden, da sie die Grundausstattung eines HTML-Dokuments bilden. Ich nenne sie deshalb Basiselemente.

Sehen Sie sich die Zeilen <title>Listing 1.1</title> und <body>Hallo WorldWideWeb!</body> genauer an. Die jeweiligen Start- und Ende-Tags der Elemente title und body umrahmen unterschiedlichen Text. In Abbildung 1.1 können Sie diese Texte wiedererkennen: Der Text im Gültigkeitsbereich von title (also zwischen Start- und Ende-Tag) steht in der Titelzeile des Browserfensters, der Text im Gültigkeitsbereich von body im Anzeigebereich des Browsers.

Somit können Sie die Aufgaben dieser beiden Elemente schon festlegen. Das title-Element definiert den Dokument-Titel, und das body-Element enthält den darzustellenden Inhalt eines Dokuments. Das Pendant zum body-Element ist das head-Element. Es enthält alle wichtigen Dokumentinformationen (wie den Titel), die nicht im Anzeigebereich des Browsers dargestellt werden sollen. Im Gültigkeitsbereich eines Elements können auch weitere Elemente stehen. Dies ist insbesondere am html-Element zu erkennen. Alle Elemente eines Dokuments müssen in den Gültigkeitsbereich des html-Elements geschrieben werden.

Die typische syntaktische Notation für ein Element, das einen beliebigen Text enthält, sieht also folgendermaßen aus:

<Elementname>Text</Elementname>

Um in einem Element ein weiteres Element notieren zu können (auch als Verschachtelung bezeichnet), ersetzen Sie den Text einfach durch das weitere Element:

<Elementname1>
  <Elementname2>Text</Elementname2>
</Elementname1>

Eine Verschachtelung lässt sich beliebig lange fortsetzen, bis das hierarchisch letzte Element kein weiteres Element, sondern nur Text enthält.

# Hierarchie

Sie kennen nun die vier Basiselemente. Diese und auch alle anderen Elemente unterliegen einer gewissen Ordnung. Sie legt fest, wie oft und in welcher Reihenfolge ein Element im HTML-Dokument vorkommen darf. Wenn Sie ein HTML-Dokument mit einem Haus vergleichen, dann stellt das html-Element das Haus dar. Die Elemente head und body bilden unterschiedliche Stockwerke, z. B. wäre body das Erdgeschoss und head der 1. Stock. Das title-Element kommt nur im head-Element vor und steht sinnbildlich für einen Raum im 1. Stock. Text, der im Gültigkeitsbereich des title-Elements notiert wird, ist dann gleichsam die Innenausstattung dieses Raums im 1. Stock des Hauses.

Wenn Sie nun diese Hierarchie (Ordnung) anhand des Hauses zurückverfolgen, stellen Sie fest, dass das title-Element dem head-Element untergeordnet ist, genauso wie die Elemente head und body dem html-Element untergeordnet sind. Man spricht auch von Eltern- und Kindelementen. Das title-Element ist das Kindelement des head-Elements, und anders herum ist head das Elternelement des title-Elements.

Schematische Darstellung der Element-Hierarchie Abbildung 1.2: Schematische Darstellung der Element-Hierarchie

Die Felder mit den drei Punkten in Abbildung 1.2 stehen für weitere Kindelemente, die innerhalb von head oder body vorkommen dürfen. Versuchen Sie sich diese Hierarchie gut einzuprägen, da sie essenziell für das weitere Verständnis von HTML ist.

Neben dem bereits bekannten title-Element können im Kopfteil weitere Elemente notiert werden, die Sie später noch etwas näher kennen lernen werden. Dies sind alles Elemente, die grundlegende Informationen zum Dokument (wie Titel, Autor oder Erstellungsdatum oder auch JavaScripts und StyleSheets) zur Verfügung stellen. Die Gemeinsamkeit besteht darin, dass sie im Anzeigebereich des Browsers nicht dargestellt werden, sondern die Darstellung teilweise nur beeinflussen oder aber Informationen für verschiedene Suchmaschinen bereitstellen.

Im Rumpfteil (body) wird der wesentliche Inhalt des HTML-Dokuments (wie Texte, Bilder, Hyperlinks, Tabellen, Listen und Ähnliches) notiert. Diese Elemente werde ich Ihnen im Folgenden noch genauer erläutern.

# Attribute

Jedes Element besitzt gewisse Eigenschaften oder Auszeichnungsmerkmale. Diese Eigenschaften führen dazu, dass z. B. der Text im Gültigkeitsbereich eines h1-Elements (Überschrift 1. Ordnung) größer dargestellt wird, als wenn er in einem h2-Element (Überschrift 2. Ordnung) notiert worden wäre. Nun lässt sich die Darstellung des Textes aber in einem gewissen Rahmen durch Ändern der Eigenschaften an die eigenen Wünsche anpassen.

Dafür werden Attribute und Parameter verwendet. Diese werden in Kombination innerhalb des Start-Tags eines Elements gesetzt. Dabei wird zuerst der Name des Attributs, gefolgt von einem =-Zeichen (Gleichheitszeichen) und dem Parameter in Anführungszeichen notiert. Die Syntax sieht wie folgt aus:

<Elementname Attribut="Parameter">Text oder Element</Elementname>

Um mehrere verschiedene Eigenschaften eines Elements verändern zu können, werden die gewünschten Attribute in beliebiger Reihenfolge im Start-Tag notiert.

<Elementname Attribut1="Parameter1" Attribut2="Parameter2" AttributN="ParameterN">Text oder Element</Elementname>

Natürlich ist auch eine Verschachtelung von Elementen mit den veränderten Attributen möglich.

<Elementname1 Attribut="Parameter">
  <Elementname2 Attribut="Parameter">Text oder Element</Elementname2>
</Elementname1>

# Kommentare und Quelltext-Strukturierung

Bei kleineren HTML-Dokumenten ist eine Kommentierung oder saubere Strukturierung des Quelltextes nicht erforderlich. Sobald sich aber ein solches Dokument über mehrere Bildschirmseiten erstreckt, kann es ohne Kommentare und Quelltext-Strukturierung schnell unübersichtlich werden. Wenn Sie sich das Listing 1.1 noch einmal ansehen, können Sie erkennen, dass nach den Start-Tags der Elemente html und head in der nächsten Zeile um zwei Leerzeichen eingerückt wurde. Damit wird der Quelltext besser lesbar.

Für Kommentare in HTML gibt es kein spezielles Element, da sie nicht der Hierarchie eines Dokuments unterliegen und an jeder beliebigen Stelle (ja, auch vor dem html-Start-Tag oder nach dem html-Ende-Tag) im Dokument notiert werden dürfen. Ein Kommentar wird durch die Zeichenfolge <!-- eingeleitet und endet mit der Zeichenfolge //-->. Zwischen diesen beiden Zeichenfolgen steht dann der Kommentartext.

<!-- Dies ist ein Kommentar //-->

Für die Strukturierung in HTML gibt es keine Norm, jedoch haben sich im Laufe der Zeit einige Regeln durchgesetzt:

  • Die Start- und Ende-Tags der Elemente, die weitere Elemente enthalten, werden in unterschiedlichen Zeilen notiert, wobei die Einrückung dieser Tags gleich sein sollte. Ein Beispiel dafür sind die Elemente html und head in Listing 1.1.
  • Die Start- und Ende-Tags eines Elements, das kein Kindelement enthält, sollten nach Möglichkeit in einer Zeile notiert werden. In Listing 1.1 können Sie dies an den Elementen title und body erkennen.
  • Browser unterscheiden bei Tags nicht zwischen Groß- und Kleinschreibung. Daher ist es egal, ob Sie die Tags groß (<HTML>...</HTML>), klein (<html>...</html>) oder vollkommen unterschiedlich (<hTmL>...</HTml>) schreiben. Sie sollten sich aber für eine Schreibweise entscheiden. Wenn Sie einen Editor ohne farbliche Hervorhebung der Tags verwenden, empfiehlt es sich, alle Tags großzuschreiben, um sie vom restlichen Text unterscheiden zu können.

# Entities

Wenn Sie in einem HTML-Dokument die spitzen Klammern < (kleiner als) und > (größer als) in einem normalen Text verwenden, wird dies zwangsläufig zu einer Fehldarstellung führen, da die Klammern zum Notieren der HTML-Tags reserviert sind. Ähnlich verhält es sich mit den Anführungszeichen, mit denen Parameter einem Attribut zugewiesen werden. Für solche Fälle gibt es so genannte Kurzcodes oder Entities, um Fehldarstellungen zu vermeiden. Dies gilt aber auch für Umlaute (Ä, Ö, Ü) und verschiedene andere Sonderzeichen. Auch wenn in Ihrem Browser Umlaute und Sonderzeichen korrekt dargestellt werden, hängt die Darstellung solcher Sonderzeichen von der landesspezifischen Spracheinstellung eines Browsers ab. Umlaute gibt es im englischen Alphabet beispielsweise nicht, und die dargestellten Zeichen wären somit nicht die gewünschten Umlaute.

Entities werden durch das Zeichen & (kaufmännisches Und) eingeleitet, gefolgt von einer Buchstaben- und/oder Zahlenkombination, und sie enden mit dem Zeichen ; (Semikolon oder Strichpunkt).

&zeichencode;

Die Entities für die spitzen Klammern lauten beispielsweise &lt; (lt = engl. less than, dt. kleiner als) für < und &gt; (gt = engl. greater than, dt. größer als) für >. In der Tabelle 1.1 finden Sie eine Übersicht über die wichtigsten Entities. Eine vollständige Tabelle finden Sie im Anhang.

Sonderzeichen Entity ISO-Code
" &quot; &#34;
& &amp; &#38;
< &lt; &#60;
> &gt; &#62;
Leerzeichen &nbsp; &#160;
© &copy; &#169;
® &reg; &#174;
Ä &Auml; &#196;
Ö &Ouml; &#214;
Ü &Uuml; &#220;
ß &szlig; &#223;
ä &auml; &#228;
ö &ouml; &#246;
ü &uuml; &#252;

Tabelle 1.1: Die wichtigsten Entities auf einen Blick

Der Einfachheit und Lesbarkeit halber habe ich in den vorangegangenen Listings auf diese Entities und Sonderzeichen verzichtet. Dies wird sich in den folgenden Listings jedoch ändern. Prägen Sie sich die wichtigsten Entities (auf jeden Fall die in der Tabelle 1.1 aufgeführten) also gut ein.

# Dokumententyp-Definition

In SGML ist es üblich, zu Beginn des Dokuments die DTD (engl. Document Type Definition) zu notieren. Da HTML ja bekanntlich auf SGML basiert, ist es sinnvoll, auch in HTML-Dokumenten die entsprechende DTD anzuführen, da sie alle Besonderheiten beschreibt, die ein Dokument bezüglich der Struktur und des Erscheinungsbildes haben darf.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Die Dokumententyp-Definition wird durch <!DOCTYPE eingeleitet. HTML PUBLIC steht für die öffentlich verfügbare HTML-DTD. W3C ist der Herausgeber der DTD – in diesem Fall das World-Wide-Web-Konsortium. DTD HTML 4.01 Transitional bedeutet, dass Sie in der Datei den Dokumententyp HTML in der Version 4.01 und der Variante Transitional verwenden. EN ist das Kürzel für die Sprache, in der die Tags notiert werden (in diesem Fall Englisch), nicht etwa für die Sprache, in der der Inhalt des Dokuments verfasst wurde.

Wie Sie bereits am Ausrufezeichen zu Beginn der DTD-Syntax erkennen können, ist dies kein normales Element. Ähnlich wie Kommentare unterliegen sie nicht den Regeln der Hierarchie für HTML-Dokumente. Im Gegensatz zu Kommentaren dürfen sie aber nicht an beliebiger Stelle stehen, sondern müssen außerhalb des html-Elements zu Beginn des Dokuments angeführt werden. Die erste Zeile in einem Dokument drängt sich als Ort für die DTD quasi auf. Dies ist aber nicht zwingend erforderlich. Es ist nur wichtig, dass sie vor dem Start-Tag (<html>) des html-Elements steht.

# Sprachvarianten

Die HTML-Sprachversion 4.x liegt in den drei verschiedenen Sprachvarianten strict, transitional und frameset vor. Eine davon müssen Sie bei der Angabe einer DTD verwenden.

Die Variante strict wird verwendet, wenn bestimmte Elemente und Attribute, die einmal zum HTML-Standard gehörten, nicht mehr verwendet werden sollen. Außerdem darf im body-Element nicht einfach nur Text stehen, sondern dieser muss innerhalb eines entsprechenden Elements notiert werden, da die Verschachtelungsregeln dieser Variante sehr viel strenger und genauer definiert sind. Die entfallenden Elemente und Attribute werden dann durch StyleSheets ersetzt. Eine Beispielangabe für diese Variante sieht so aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">

Wenn Sie sich nicht nur auf Browser beschränken möchten, die CSS unterstützen und interpretieren können (darunter fallen Netscape und Internet Explorer 3.x und älter), sollten Sie die Variante transitional verwenden (was auch die meisten tun). Dadurch dürfen Sie ältere Elemente und Attribute verwenden und auch einfach nur Text zwischen den body-Tags notieren, ohne diese in ein entsprechendes Element setzen zu müssen. Ein Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Die Variante frameset wird nur in HTML-Dokumenten angeführt, die die Frame-Technologie verwenden. Nehmen Sie von dieser Variante lieber Abstand, damit Ihre Dokumente auch in den Browsern richtig dargestellt werden, die sich explizit an die DTD halten. Ein Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

# DTDs für andere HTML-Versionen und für XHTML

Sowohl für die HTML-Version 2.0 als auch für die Version 3.2 gibt es eine eigene Variante der Dokumententyp-Definition. Für die auf XML basierende HTML-Version XHTML 1.0 und 1.1 gibt es ebenfalls eine spezielle DTD. Die folgende Tabelle zeigt die entsprechenden Anpassungen.

Typ, Version, Variante DTD
HTML 2.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 2.0//EN">
HTML 3.2 <HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN">
XHTML 1.1 (nur Strict) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">

Tabelle 1.2: DTDs für weitere Versionen

# HTML-Vorlage

Da Sie im Verlauf des Buches noch des Öfteren HTML-Dokumente erstellen werden, sollten Sie sich eine Vorlage erstellen und abspeichern. Sie können eine Vorlage nach eigenen Wünschen erstellen oder Listing 1.2 verwenden.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Kommentar zum Inhalt des Dokuments //-->
<html>
  <head>
    <title>Titel</title>
  </head>
  <body>
     Inhalt
  </body>
</html>

Listing 1.2: Beispiel für eine Dokumentvorlage

# Zusammenfassung

  • HTML ist eine Erweiterung der Auszeichnungssprache SGML und basiert auf dem HTTP-Protokoll.
  • Ein HTML-Dokument besteht aus verschiedenen Elementen, die den Inhalt, die Struktur und das Verhalten eines Dokuments definieren.
  • Elemente lassen sich mittels Attributen und Parametern an eigene Wünsche anpassen.
  • Die Kommentierung und Quellstrukturierung eines HTML-Dokuments sorgt für Übersicht und bessere Lesbarkeit.

# Fragen und Übungen

  1. Welche Basiselemente gibt es in einem HTML-Dokument?
  2. Notieren Sie einen Kommentar mit dem Text »Das ist die Startseite«.
  3. Erstellen Sie ein HTML-Dokument mit dem Dokumententitel »Startseite« und dem Text im Anzeigebereich »Willkommen auf meiner Startseite!«
  4. Wofür wird die DTD (Document Type Definition) benötigt?
  5. Worin besteht der Unterschied zwischen einem Eltern- und einem Kindelement?