HTML-Grundlagen

Um eine Webseite zu erstellen, benötigt man zunächst einige Kenntnisse über HTML-Grundlagen und dazu gehört die grundlegende Eingabe von Befehlen. Eine Webseite beginnt mit dem Befehl html und endet auch damit. Groß- und Kleinschreibung spielt dabei keine Rolle. Geben Sie den folgenden Code im Editor ein:

<html>

</html>

Befehle in HTML werden innerhalb eckiger Klammern geschrieben. Mit dem ersten Befehl <html> wird bestimmt, dass die HTML-Seite beginnt. Mit dem zweiten Befehl </html> wird festgelegt, dass an dieser Stelle die HTML-Seite endet. Den Unterschied zwischen dem ersten und dem zweiten Befehlt macht der Schrägstrich / aus, der auch Slash genannt wird. Ein Schrägstrich signalisiert, das Ende des Befehls. Die Bedeutung der beiden Zeilen lässt sich somit wie folgt zusammenfassen:

  • <html>: Beginn der HTML-Seite (Startbefehl)
  • </html>: Ende der HTML-Seite (Endbefehl)

Wenn man Webseiten erstellt, dann verwendet man für die meisten Befehle einen Start- und Endbefehl. Jedoch werden nicht alle Anweisungen in Start- und Endbefehlen geschrieben. HTML-Befehle werden übrigens auch Tags genannt.

Das Grundgerüst der Webseite

Mit den beiden Befehlen <html> und </html> hat man im Grunde zwar eine Webseite erstellt, jedoch hat die Webseite noch kein Grundgerüst und kein Inhalt. Geben Sie den folgenden Code ein, um das HTML-Grundgerüst einer Webseite zu erstellen:

<html>

<head>
</head>


<body>
</body>

</html>

Das ist im Grunde genommen bereits eine Webseite mit einem fast kompletten Grundgerüst, die in einem Browser betrachtet werden kann. Innerhalb des Befehls <html> und </html> sind zwei neue Befehle hinzugekommen. Diese sind head und body. Grundsätzlich ist eine Webseite in diese beiden Bereiche aufgeteilt und diese haben folgende Bedeutung:

  • head: Im head-Bereich sind die im Browser nicht sichtbaren Befehle (bis auf eine Ausnahme) untergebracht, z.B. Anweisungen für Suchmaschinen.
  • body: Alles was im body-Bereich steht, ist für die Sichtbarkeit im Browser gedacht.

Um das Grundgerüst einer Webseite zu komplettieren, benötigt man noch zwei Befehle. Die Dokumenttyp-Deklaration und der Titel der Webseite. Hierfür wird der Quellcode der Webseite wie folgt komplettiert:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Webseiten erstellen</title>
</head>

<body>
</body>

</html>

Das wäre bereits eine komplette Webseite. Es steht zwar nicht viel drin bzw. der Inhalt ist komplett leer, ist aber technisch gesehen eine vollwertige Webseite mit einem kompletten Grundgerüst in HTML.

Mit dem Grundgerüst ist der Grundaufbau einer Webseite gemeint. Alle weiteren Elemente bauen auf das Grundgerüst auf und werden (bis auf einige Ausnahmen, die wenig mit HTML zu tun haben) innerhalb des HEAD- oder BODY-Bereichs eingegeben. Neu hinzugekommen sind folgende Dinge:

  • Dokumenttyp-Deklaration: Am Anfang einer Webseite, noch vor dem einleitenden Befehl <html>, fügt man die Dokumenttyp-Deklaration ein. Damit wird angegeben, welche HTML-Variante in dem Dokument verwendet wird.
  • Titel der Webseite: Im HEAD-Bereich wird innerhalb des Title-Befehls <title>...</title> der Titel der Webseite eingegeben. Der Titel ist in der Titelleiste des Browsers sichtbar. Es ist so gut wie das einzige, was im HEAD-Bereich steht und im Browser sichtbar ist. Der Titel einer Webseite ist sehr wichtig, auch wenn es unscheinbar nur in der Titelleiste des Browsers zu sehen ist. Beispielsweise geben die Suchmaschinen auf den Titel eine sehr hohe Gewichtung.
Titel einer Webseite

Inhalte in die Webseite einfügen

Als letzte Bausteine sollte man einige Inhalte wie z.B. eine Überschrift und einen Absatz in die Webseite innerhalb des BODY-Bereichs einfügen, damit man auch die ersten Erfolge sieht. Hierfür erweitert man den Code wie folgt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Webseiten erstellen</title>
</head>

<body>
<h1>Herzlich Willkommen</h1>
<p>Hello World, das ist meine erste Webseite.</p>

</body>

</html>

Der Quellcode wurde um die folgenden Elemente erweitert:

  • Überschrift: Eine Überschrift wird in HTML mit einem H-Tag angegeben. Es gibt Überschriften für 6 verschiedene Ebenen, wobei <h1>...</h1> die höchste Ebene 1 darstellt.
  • Absatz: Ein Absatz wird innerhalb des P-Tags <p>...</p> angegeben.

Fehlervermeidung bei verschachtelten Befehlen

Beim Eingeben von HTML-Code sollte man darauf achten, dass sich die Befehle bei verschachtelten Befehlen nicht überlappen. Falsch wäre es beispielsweise, wenn im Head-Bereich der Code so aussehen würde:

<head>
<title>Webseiten erstellen
</head>
</title>

Hier wurde z.B. der head-Befehl bereits geschlossen, obwohl zuerst der title-Befehl geschlossen werden müsste. Der Title-Befehl beginnt nach dem Head-Befehl und somit muss der Head-Befehl den Title-Befehl umschließen.

Speichern der Webseite mit dem HTML-Grundgerüst

Ist der Quellcode der Webseite im Editor erstellt, kommt ein Schritt, der zwar einfach ist, wo aber durchaus Fehler passieren können. Nämlich, beim Speichern der Webseite. Um die Webseite zu speichern, wählt man den Menüpunkt DATEI - SPEICHERN aus. Im öffnenden Fenster navigiert man zunächst zum Speicherort. Man sollte sich von Anfang an angewöhnen, eine ordentliche Struktur aufzubauen. Für jedes Projekt sollte ein Ordner angelegt werden und thematisch zusammengehörige Webseiten sollten in einem Unterordner zusammengefasst werden.

Als nächstes stellt man den Dateityp auf "Alle Dateien" um. Die Voreinstellung ist beim Editor auf Textdateien (*.txt) und wenn man nicht auf "Alle Dateien" umstellt, dann wird die Datei als Textdatei gespeichert und nicht als eine Webseite.

Danach gibt man den Seitennamen ein. Hier sollte man die Namenskonvention für Webseiten beachten und beispielsweise keine Umlaute oder Sonderzeichen verwenden. Wichtig ist die Dateiendung, die getrennt durch einen Punkt dem Seitennamen angehängt wird. Als Dateiendung für Webseiten kann man unter anderem htm oder html wählen. Auch sollte man sich angewöhnen, Seitennamen in Kleinbuchstaben anzugeben, da Webserver in der Regel zwischen Groß- und Kleinschreibung unterscheiden.

Wichtig ist auch die Zeichenkodierung. Im Grunde kann man hier ANSI wählen. Man kann aber auch UTF-8 wählen.

Hat man alle Einstellungen und Eingaben vorgenommen, klickt man zum Schluss auf die Schaltfläche Speichern und eine Webseite mit dem angegebenem Namen wird erstellt und es enthält den Code, den man eingegeben hat.

HTML-Grundgerüst speichern

Mit der hier vorgestellten Vorgehensweise können alle weiteren Webseiten erstellt werden. Nachdem die Webseite erstellt wurde, kann man es öffnen und im Browser betrachten. Sollte eine Seite nicht im Browser öffnen, sondern im Editor, dann liegt der Fehler höchstwahrscheinlich daran, dass der Dateityp nicht auf "Alle Dateien" umgestellt wurde.