Homepapa-Logo Home Einleitung Grundlagen Elemente und Attribute HTML-Dokumente Struktur Struktur und Darstellung erstes Dokument Titel strukturelles Markup Site Management Hyperlinks Bilder und Grafiken ohne Fehl und Tadel Spezialfälle Tabellen Formulare Schlussbemerkungen
Schlagwortregister
Übungs-Übersicht
Übungs-Dateien

HTML und XHTML

HTML-Dokumente

erstes Dokument

Bevor du mit den Übungen anfängst, solltest du die nötigen Dateien runterladen.

Du findest sie hier.

Dieser Link führt zur Datei kursmaterial.zip, die du auf deinem Computer speichern kannst.

Wenn du diese ZIP-Datei entpackst, wirst du einen Ordner mit dem Namen xhtml_kursmaterial vorfinden, der seinerseits zwei Ordner mit den Namen zeug und pfefferschote enthält.

Den zweiten dieser Ordner, pfefferschote, wirst du brauchen, um die Übungsresultate drin zu speichern.

Nun beginnen wir mit der praktischen Arbeit.

Im Verlaufe dieses Kurses werden wir den Web-Auftritt für eine Gewürzhandlung bauen, die den Namen die Pfefferschote führt.

Unser erster Schritt besteht darin, mit einem Text Editor eigener Wahl (z.B. mit Notepad) eine neue Textdatei zu erstellen und unser erstes HTML-Dokument zu schreiben. Schon unser erstes Dokument wird — wie alle nachfolgenden auch — die Grundstruktur eines HTML-Dokumentes aufweisen.

Übung 2a

Erstelle eine neue Textdatei in deinem Ordner pfefferschote und gib ihr den Namen index.html.

Die Endung .html entspricht einer Konvention, die alle Web-Server einhalten. In Windows-Umgebungen, besonders bei der Arbeit mit FrontPage, wirst du oft auch .htm antreffen, was etwa gleichwertig ist. Für's erste soll es uns genügen, dass unsere HTML-Dokumente eine dieser Endungen im Namen tragen sollten. Das macht sie auch von aussen als HTML-Dateien erkennbar.

Damit haben wir nun eine HTML-Datei, aber noch kein HTML-Dokument. Das kommt nun, im nächsten Schritt, in dem wir die grundlegende HTML-Struktur anlegen.

Das Root-Element

Jedes HTML-Dokument enthält ein Root-Element, wie wir gesehen haben. Alle andern Elemente sind in diesem Root-Element enthalten.

Übung 2b

Öffne die Datei index.html in deinem Text-Editor und erstelle das Root-Element. Es ist das <html>-Element. Zunächst einmal schreiben wir nur gerade den Start- und den End-Tag; das Element bleibt vorderhand leer. Denk dran, alles klein zu schreiben.

Zum Vergleich: Der Inhalt deines Dokumentes sollte sich ungefähr wie folgt präsentieren: 

<html> </html>

Vergewissere dich, dass der Elementname klein geschrieben ist, dass ein End-Tag vorhanden ist, und dass dieser den Schrägstrich (/) enthält.

Die Elemente head und body

Bei allen HTML-Dokumenten enthält das Root-Element ein Geschwisterpaar: Die Elemente head und body.

head (also Kopf) enthält Informationen über das Dokument (z.B. das Erstellungsdatum) und body (also Körper) enthält dann den Inhalt des Dokumentes.

Die Reihenfolge dieser beiden Elemente ist verbindlich: Zuerst kommt head und danach body.

Übung 3

Füge nun die beiden Elemente head und body in dein Dokument ein.

Wieder kannst du vergleichen, ob du zur selben Lösung gekommen bist. Bei mir sieht sie so aus: 


<html>

<head></head>

<body></body>

</html>

Du magst dich vielleicht noch erinnern, dass Zeilenschaltungen und Leerschläge völlig unwichtig sind. Wichtig ist hingegen

Sehr schön, dann haben wir damit das erste HTML-Dokument erstellt.
Es wird klaglos von jedem Browser geladen werden können, aber leider hat es bis jetzt weder einen Titel noch überhaupt einen Inhalt, so dass das Browser-Fenster schlicht und ergreifend leer sein wird. Aber da werden wir in ein paar Minuten schon Abhilfe schaffen können.

Stell sicher, dass dein Dokument unter dem Namen index.html im Verzeichnis pfefferschote gespeichert ist.

Nun hast du also eine HTML-Datei auf deinem Computer. Technisch gesehen ist das eine einfache Textdatei. Inhaltlich weist sie aber bereits eine charakteristische Struktur auf. Es ist schon so: Jede HTML-Datei ist letztlich nur eine Textdatei, die mit jedem Text-Editor gelesen und unterhalten werden kann. Einer der Gründe für die Popularität des Webs ist ja nicht zuletzt der, dass das nötige Instrumentarium einfach zu handhaben und überall vorhanden ist.

Homepapa
März 2004
Vorheriger Abschnitt:
Struktur und Darstellung
Nächster Abschnitt:
Titel