Html Homepage

Eine eigene Homepage mit HTML erstellen

Für die Erstellung komplexer Webseiten sind Dutzende von HTML-Tags nötig, aber für die Kreation einfacher Seiten benötigen Sie nur wenige Tags. So kreieren Sie in wenigen Schritten eine eigene HTML Homepage. Bevor Sie mit der Erstellung einer HTML Homepage beginnen sollten Sie auf Ihrem PC ein neues Verzeichnis erstellen. Darin speichern Sie die noch zu erstellende HTML-Datei, Bilder und andere Informationen. Geben Sie dem Verzeichnis einen beschreibenden Namen und verwenden Sie dafür nur Kleinbuchstaben.

Der Name darf keine Lücken und keine Punkte enthalten, auch wenn Ihr Betriebssystem das erlaubt.

Homepage erstellen

Öffnen Sie jetzt einen Texteditor und legen Sie ein neues Text-Dokument an und speichern Sie das noch leere Dokument im oben genannten Verzeichnis. Wichtig: Die Datei bekommt die Endung .html (Beispiel: Hunde.html).

HTML-Homepage
1/1

HTML-Homepage

So ist eine HTML-Datei aufgebaut

Eine normale HTML-Datei besteht immer aus folgenden Teilen:

Die Deklaration des Dokumententyps

Die Angabe der verwendeten HTML-Version

Das HTML-Wurzelelement

Header mit Titel und anderen Kopfdaten

Body mit Inhalt, Links und Abbildungen

DOCTYPE

Die erste Zeile in einem HTML-Dokument ist die Angabe des Dokumententyps. Dadurch weiß der Browser was für eine Version der Seitenbeschreibungssprache zu erwarten ist. Die Deklaration des Dokumententyps kann so aussehen:

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

Die Angabe des Dokumententyps steht noch vor dem ersten (html) Tag. Darin steht zum Beispiel dass es sich um eine öffentlich verfügbare Sprache in der Version 4.01 der W3C-Organisation handelt. Die Sprachangabe EN steht für englisch und bezeichnet die Sprache in der die Elemente geschrieben sind, sie bezieht sich nicht auf den Inhalt der Datei.

HTML

Nach der Angabe des Dokumententyps folgt das HTML-Tag. Dieses Element wird auch als HTML-Wurzelelement bezeichnet. Lassen Sie zwischen dem einleitenden und schließenden Tag etwas Raum für den Inhalt einer Homepage.

(html)

(/html)

head

Nach dem einleitenden html-Tag stehen die Angaben für den Kopf des Dokuments. In den Kopfdaten können zum Beispiel Meta-Angaben zum Inhalt, Hinweise auf Autoren oder Befehle zur automatischen Weiterleitung stehen. Die head-Tags stehen zwischen den html-Tags. Auch zwischen den head-Tags sollte Raum für weitere Tags vorhanden sein.

(head)

(/head)

Der Seitentitel

Der Titel der Homepage wird im Browser angezeigt. Er findet sich auch in Bookmarks und Favoriten, wenn diese gespeichert werden. Der Titel steht zwischen den beiden title-Tags.

(title) Retriever, Schäferhund und andere Rassen(/title)

Die Länge einer Titelzeile spielt keine Rolle, sie kann auch über mehrere Zeilen reichen. Grundsätzlich sind kürzere Titel jedoch besser zu lesen, manche Browser schneiden einen zu langen Titel am Fensterende einfach ab.

Der body von Webseiten

Der Inhalt einer Webseite wird zwischen dem einleitenden und beendenden Tag eingefügt. Lassen Sie genug Platz zwischen den Tags.

(body)

(/body)

Die Webseite in Bereiche einteilen

Zur besseren Übersicht können Sie ein HTML-Dokument mit dem Tag (div) in mehrere Bereiche einteilen. Alles was zwischen dem einleitenden und abschließenden Tag steht, wird als eigener Bereich interpretiert. Ein Bereich kann weitere Bereiche einschließen.

(div id=hauptseite)

(/div)

Paragrafen verbessern die Lesbarkeit

Durch die Verwendung des Paragrafen-Tags (p) (/p) unterteilen Sie ein Dokument. Die meisten Browser schalten eine Leerzeile zwischen zwei Paragrafen.

Das Grundgerüst ihrer fertigen HTML Homepage sieht dann so aus:

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

(html)

(head)

(title) Retriever, Schäferhund und andere Rassen(/title)

(/head)

(body)

(div id=hauptseite)

(p)

(!-- Hier kann der Inhalt stehen --)

(/p)

(/div)

(/body)

(/html)

Alles was zwischen diesen Zeichen steht: (!-- Kommentar --) wird vom Browser als Kommentarzeile erkannt und nicht dargestellt. Damit steht das Grundgerüst für Ihre erste Internetseite. Laden Sie die Seite mit einem Browser, um zu sehen, ob Sie alles richtig gemacht haben.

HTML Dateien können mit einem normalen Text-Editor erstellt werden. Wenn Sie jedoch komplexere Seiten erstellen wollen, sollten Sie auf die Vorteile eines HTML-Editors nicht verzichten. HTML-Editoren gibt es buchstäblich zu Dutzenden und für alle Betriebssysteme und auch für mobile Geräte. Die meisten davon sind kostenlos zu benutzen.

BITTE LÖSCHEN: Erstelle

Mehr zum Thema