HTML-Einfuehrung fuer Schueler - Die Grundstruktur eines HTML-Dokuments

Start

Basics

Struktur

Text

Links

Bilder

Tabellen

Style

CSS-Layout

Tag-Ref

Grundstruktur einer HTML-Datei

Es soll gleich losgehen: Öffne einen Texteditor (z.B. Notepad von Windows) und speichere eine leere Datei unter dem Namen "test.html" ab. Achte darauf, dass nicht noch ".txt" dahinter steht. In dieses leere Dokument kannst du nun HTML-Code schreiben: Los gehts!

HTML (Hypertext Markup Language) ist eine Textauszeichnungssprache. Das heißt, dass man dem Browser Befehle gibt, wie er Inhalte auf dem Bildschirm darstellen soll.

Zunächst muss der Browser erst einmal wissen, dass er es mit einer für ihn lesbaren HTML-Datei zu tun hat. Deshalb gibt es eine Grundstruktur für Html-Dokumente, die immer gleich ist:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Text des Seitentitels</title>
</head>
<body>

</body>
</html>

Die erste Zeile kann man einfach übernehmen.
Danach kommt der in HTML geschrieben Bereich der Datei. Darin findet sich der Kopfbereich (head). Seinen Inhalt sieht man nicht auf der Anzeigefläche des Browsers, man kann hier aber wichtige Informationen zum Dokument einfügen. Hier steht auch der Titel der Seite, der in der Fensterleiste angezeigt wird. Dahinter kommt der im Browserfenster sichtbare Teil (body). Man kann zudem die Hintergrundfarbe der Seite festlegen (bgcolor in Hexadezimalzahlen; Näheres dazu unter Farben).
Soweit so einfach.

Wir haben nun nebenbei schon ein Grundprinzip von HTML kennengelernt:
Die Befehle (tags) bestehen von wenigen Ausnahmen abgesehen aus zwei Teilen, dem Anfangs- und dem Schlusstag. Außerdem kann man Tags ineinander verschachteln:

Dabei ist äußerste Sorgfalt geboten! Mann sollte seinen Quelltext so übersichtlich wie möglich gestalten, um Fehler zu vermeiden.

Kopiere den Code der HTML-Grundstruktur in den Editor und speichere die Datei in deinem Ordner unter dem Namen index.html ab! Füge einen Titel ein!
Sieh dir doch gleich deine Datei mit dem Browser an!
Ab jetzt kannst du die Veränderungen nach jedem Speichern anschauen. Klicke einfach in der Browser-Leiste auf "Aktualisieren".

Eine weitere Möglichkeit, seine Seite zu strukturieren, sind sogenannte Frames.
Das ist etwas komplizierter, aber nicht wirklich schwer.
Trotzdem solltest du dich damit erst beschäftigen, wenn du die Einführung durchgearbeitet hast.

Weiter zur Textformatierung