Das Grundgerüst einer Web-Seite

Allgemeines

Eine Web-Seite kann man sich ganz gut als Behälter oder als Container vorstellen. In einem grossen Behälter befinden sich mehrere kleine Behälter die wiederum noch kleinere Behälter in sich aufnehmen können etc..
Im Quelltext werden die Behälter mit Tags dargestellt. Der öffnende Tag zeigt den Beginn, der schliessende Tag das Ende des Behälter an.
Die Tags sind die Befehle in den spitzen Klammern. Bestimmt sind Ihnen die Tags aufgefallen, als Sie den Quelltext einer Web-Seite angeschaut haben.
Tags treten immer (fast immer) in Paaren auf, wie z.B. die Tags, um einen Text fett darzstellen.
Quelltext:
<b>Fett geschrieben</b>
Das Resultat:
Fett geschrieben

Grundgerüst
einer Web-Seite

<html>

<head>

</head>

<body>

</body>

</html>

Erklärung

Am Anfang der Seite steht der Tag <html>, der dem lesenden Programm (dem Browser) mitteilt, dass ab dieser Stelle HTML-Code folgt. Der "Behälter" HTML wird erst ganz am Ende der Seite mit dem Tag </html> geschlossen.

Der Kopf der Seite wird mit <head> geöffnet. Was nun folgt, sind Informationen über die Web-Seite. Diese sogenannten Meta-Informationen erscheinen nicht auf der Web-Seite, sind aber dennoch wichtig. Bitte lesen Sie dazu die Erläuterungen auf der Seite von SELFHTML.

Nun wird der Kopf der Seite mit dem Tag </head> geschlossen.

Es ist leicht zu erahnen, dass nun wohl der Inhalt der Web-Seite folgen muss. Tatsächlich wird der sichtbare Teil der Web-Seite in den "body" geschrieben. Der öffnende Tag sieht so aus: <body>. Wie dieser Teil gestaltet wird, sehen Sie später. Vorerst soll ja nur das Grundgerüst beschrieben sein, weil es in jeder Web-Seite gleich aussieht.

Der Seiten-Körper wird mit dem Tag </body> geschlossen.

An dieser Stelle ist nur noch der <html>-Tag offen. Das heisst, er muss nun mit dem Tag </html> geschlossen werden, damit der Browser erkennt, dass nun kein HTML-Code mehr folgt.

Ein erster Schritt

Nun ist es sicher an der Zeit, den Versuch zu starten, das oben gezeigte Grundgerüst in einer HTML-Datei zu erfassen. Wie Sie das machen, spielt keine Rolle. Mein Web-Editor schreibt diese Zeilen von sich aus, ganz automatisch, sobald ich ein neues HTML-Dokument starte.
Das Einfügen der Tag-Paare geht auch fast automatisch. Mein Editor bietet sogar verschiedene Möglichkeiten an:

Man kann jedes Zeichen von Hand eintippen :-)
Für die oft gebrauchten Tags stehen Buttons zur Verfügung. Duch das Drücken eines Tag-Buttons wird das Tag-Paar an der Cursorposition eingefügt - z.B. <i></i>. Nun kann ich Text zwischen das Tag-Paar einfügen und erhalte einen kursiven Text.
Man kann auch den Text zuerst schreiben und dann markieren. Durch Drücken des Buttons werden die Tags automatisch an den Anfang und das Ende des markierten Textes gesetzt.
Beim Einfügen von Links ist ein Dialog behilflich.
Das Erstellen von Tabellen oder Frames kann sogar mit einem Assistenten unterstützt werden.
Durch Knopfdruck kann zwischen der Quelltext-Ansicht und der Browser-Ansicht hin und her gewechselt werden. So hat man immer die Kontrolle über das soeben geschriebene.

Wo ist denn nun das Problem?
Die HTML-Sprache ist sehr umfangreich. Man kann unmöglich alle Befehle auswendig kennen. Die Schreibweise muss peinlich genau eingehalten werden, denn sonst funktioniert gar nichts, aber das ist auch bei allen anderen Programmiersprachen so. Wenn Sie erst einmal eine gute Vorlage erarbeitet haben, fällt es nachher umso leichter, weitere Seiten zu schreiben; Sie können nämlich später das meiste kopieren und brauchen nur noch die Inhalte anzupassen.

Zurück zur Startseite