HTML-Grundgerüst für die Webseite

Das Skelett jeder HTML-Seite

Egal, ob man vier Zeilen Text oder 500 Bilder auf einer Webseite oder deren Unterseite präsentieren will - man braucht dafür das HTML-Grundgerüst. Dieses besteht aus dem Kopfteil und dem Hauptteil, Body oder Körper bezeichnet, also jenem Bereich, in dem der eigentliche Inhalt zu finden ist.

Der Kopfteil wird meist englisch Header bezeichnet, der Inhaltsbereich wird als Content oder Body definiert und damit hat man eine komplette HTML-Seite fix fertig zur Verfügung, die natürlich niemanden aus der Reserve lockt. Doch das Interessante ist daran, dass man ungeachtet der geplanten Dimension immer diesen Aufbau vor sich hat.

Grundgerüst einer typischen HTML-Seite

Das Beispiel zeigt die einfachste Form eines HTML-Grundgerüsts. Es besteht aus dem Kopfteil, in dem der Titel mit dem title-Tag untergebracht ist und den body-Tag, in dem der eigentliche Inhalt zu finden ist. Ob vier Spalten angeboten werden, ein einziges Bild gezeigt wird oder 7.000 Zeilen Text folgen spielt überhaupt keine Rolle - das Gerüst ist stets gleich.

Um dieses Gerüst herum ist der HTML-Tag selbst gebaut, damit der Browser weiß, dass nun eine HTML-Datei kommt. Im aktuellen Beispiel habe ich als Titel "Untitled Document" geschrieben, was oftmals vorkommen kann, wenn man die Seite nicht beschriftet und ein Editor für die Arbeit gewählt wurde. Erst wenn man einen Titel vergibt, verschwindet dieser sinnlose Eintrag, was für die Suchmaschine wichtig sein kann, doch soll dies jetzt nicht unser Thema sein.

Was auch immer man im Internet anbieten möchte - die oben gezeigte Grundstruktur ist immer gefragt. Es handelt sich dabei um die simpelste Variante - hier wird keine verwendete HTML-Version angegeben, es gibt noch keine Verlinkung zu möglichen CSS-Dateien und der Inhalt ist dürftig. Doch für den Anfang genügt dies.

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

Wenn Sie diesen Code in Ihren Editor kopieren und als HTML-Datei, zum Beispiel "demo.html" abspeichern, können Sie diese im Browser aufrufen und sehen den Inhalt des body-Tags. Die erste HTML-Seite ist entstanden und mehr Aufwand gibt es dafür nicht.

Wichtig für das Verständnis

Nicht selten passiert es auch den Profis, dass sich etwas auf der Seite verschiebt. Das passiert dann, wenn man eine Ebene (div-Tag) öffnet, aber nicht rechtzeitig schließt, wodurch das ganze Gefüge durcheinander kommt. Es kann sehr wohl passieren, dass man vergisst, einen Absatz (p-Tag) zu schließen und auf der Seite nichts dergleichen auffällt, aber es ist wichtig, sich zu merken, dass jeder geöffnete Tag auch wieder geschlossen werden muss. Prüft man die Seite mit dem Validator, dann erkennt dieser sofort, wenn das nicht der Fall sein sollte.

Lesen Sie auch

Die Einführung in die Beschreibungssprache HTML beginnt damit, dass man verstehen muss, wie die Tags eingesetzt werden, die den Befehlsatz darstellen. Es braucht ein Grundgerüst für jede Seite mit der Deklaration, unter welchen Spielregeln man arbeiten möchte und mit welchem Zeichensatz man die Seite aufbaut.

Jede Seite sollte über einen Kopfteil verfügen und über den eigentlichen Inhalt mit dem body-Tag, in dem sich Text, Bilder und Videos befinden. Im Kopfteil gibt es die Meta-Tags mit Grundeinstellungen für die Suchmaschinen, den Titel der Seite sowie auch die Links zu den CSS-Dateien.

Außerdem sollte man das Grundverständnis haben, warum die alte Methode mit direkten HTML-Formatierungen nicht so gut ist wie die moderne mit der CSS-Datei als externe Formatierungsquelle.

Themenseiten

Startseite HTML-Grundlagen

HTML-Grundgerüst für die Webseite

Das Skelett jeder HTML-Seite

Grundgerüst einer typischen HTML-Seite

Wichtig für das Verständnis

Lesen Sie auch

Diesen Artikel teilen

Infos zum Artikel

Kategorien

Interner Bereich