HTML lernen (1): Einführungskurs

HTML-Grundlagen: Kleine Theorie: Erstellung von HTML-Dokumenten

∅ 4.5 / 19 Bewertungen

Erstellung von HTML-Dokumenten

Auf dieser Seite

Da HTML-Dateien aus reinem ASCII-Text bestehen (engl. American Standard Code for Information Interchange; dt. Amerikanischer Standard-Code für Informationsaustausch), können sie mit jedem Text-Editor erstellt werden. HTML-Editoren bieten dafür aber mehr Komfort, wie z.B. farbig hervorgehobene Syntax, Unterstreichung von Fehlern und Vorschau mit einem Tastendruck. Ihre ersten HTML-Dokumente sollten Sie jedoch auf jeden Fall mit einem einfachen Editor (z.B. "Notepad" für Windows, "SimpleText" für Mac oder "vi" für Unix) schreiben, auch wenn das mit relativ viel Tipparbeit verbunden ist. So werden Sie sich am schnellsten an HTML gewöhnen. Bei Ihrer späteren Arbeit mit einem HTML-Editor werden Sie in der Lage sein, Fehler zu finden und zu korrigieren, weil Sie die Bedeutung der einzelnen HTML-Tags besser kennen.

Tags

Neben dem darzustellenden Text enthält ein Dokument die entsprechenden HTML-Befehle. Diese werden als "Tags" (dt. Etiketten) bezeichnet und durch spitze Klammern am Anfang und Ende markiert.

Fast alle HTML-Befehle bestehen aus einem einleitenden <...> und einem abschließenden Tag </...>; beide werden auch Start- und End-Tag genannt. Der Text zwischen ihnen ist der Gültigkeitsbereich für den HTML-Befehl. Sie können die Namen der Tags groß oder klein schreiben.

Wegen der Übersichtlichkeit bietet es sich aber an, alle Tags einheitlich zu schreiben. Im Hinblick auf XHTML, einen zukünftigen Standard, der an XML angelehnt ist, sollte man alle Tags klein schreiben.

Dazu ein kleines Beispiel:

Beispiel:

<b>Hallo Welt!</b>

In Ihrem Browser wird der Beispieltext etwa so erscheinen:

Hallo Welt!

Durch das einleitende Tag <b> wird der folgende Text solange fett angezeigt, bis das abschließende Tag </b> folgt.

Struktur einer HTML-Seite

Das folgende Beispiel stellt die Struktur einer einfachen HTML-Datei dar.

Beispiel:

<html>
<head>Autor: Max Mustermann, last update:25.06.2007
<title>Titel des Dokuments</title>
</head>

<body>
Zwischen den Body-Tags wird alles eingegeben,
was im Browser später zu sehen sein soll
</body>
</html>

html
Das Tag <html> ... </html> umschließt den Head und Body der HTML-Datei.

head
Zwischen <head> ... </head> werden allgemeine Angaben über das Dokument notiert (beispielsweise das Erstellungsdatum und der Autor), dazu werden sogenannte META-Tags verwendet. Zudem umschließt das <head> ... </head>-Tag das <title> ... </title>-Tag.

title
Jede HTML-Datei sollte einen aussagekräftigen Titel erhalten. Ihn zeigt der Browser in der Titelleiste. Weiterhin ist der Titel der Eintrag, den Browser beim Anlegen eines Lesezeichens (engl. Bookmark) wählen bzw. vorschlagen. Auch viele Suchmaschinen im World Wide Web bauen ihre Datenbanken auf den Titeln von HTML-Dokumenten auf, diese erscheinen dann als Überschriften der Ergebnisse.

body
Im einleitenden <body>-Tag können Anweisungen für Farben und Hintergrundbilder stehen (dazu später mehr). Im Body selbst werden die Informationen eingegeben, die auf dem Bildschirm des Benutzers dargestellt werden sollen, z.B. Textelemente, Hyperlinks, Bilder und Töne.

Template/Vorlage erstellen

Um nicht bei jedem HTML-Dokument die Grundstruktur neu erstellen zu müssen, sollten Sie eine Datei anlegen, die die immer benutzten Tags enthält. Speichern Sie sie z.B. unter dem Namen template.htm, so können Sie immer wieder auf das vorgefertigte Muster zurückgreifen.

Gute HTML-Editoren verfügen meistens über ein entsprechendes Symbol oder einen Befehl, um das Gerüst einer HTML-Datei zu erzeugen - zu tippen gibt es ja noch genug.