Workshop-Serie: Website erstellen Teil 2.1

Grundgerüst erstellen

In diesem Teil soll jetzt unser Layout Schritt für Schritt in eine funktionierende Website umgesetzt werden. Dazu werden wir jetzt die Index.html anlegen und später einzelne Bereiche über „divs“ (Container) verschachteln. Auch folgt dann die grafische Anpassung mit CSS und die Umsetzung der Site als Template mit PHP.

Ein jedes HTML Dokument beginnt zunächst mit dem Doctype. Hierüber wird dem Browser gesagt um welches Dokument, und um welchen Typ (Type) genau es geht. Bei manchen Editoren wie z.B. Dreamweaver wird dieser automatisch beim erstellen einer neuen Seite eingefügt. Die „DoctypeDeclaration kurz dtd sagt aus das es sich hierbei um ein genormtes Dokument handelt. Unter anderem weiß der Browser so, wie er einzelne Teile (Attribute und Befehle) zu interpretieren hat. Mit jeder Erneuerung einzelner Sprachen (html, xhtml, xml) hat das W3 Consortium ( kurz W3C) diese DTD veröffentlicht.

Nach dem Doctype folgt nun der Kopf unseres HTML-Dokuments. Wie wir es schon beim Doctype gesehen haben, werden Sprache in englisch geschrieben. So setzt sich dies auch weiter fort. Der Kopf also „Head“ ist ein weiterer wichtiger Bestandteil. Hier wird festgelegt wie die einzelne Teile, also die eigentlichen Inhalte der Seite wiedergegeben werden. Unter anderem wird hier auch unser externes Stylesheet eingebunden.

Nach dem Kopf unseres HTML-Dokuments folgt nun der Bereich in dem unsere Inhalte hinein gehören. Dieser Bereich nennt sich body. Genau hier werden wir nach und nach die einzelnen Bereiche für unser Layout verschachteln.

Im nächsten Teil werden wir den „Head“ anpassen. Unter anderem wichtige META-Tags einfügen, unser externes Stylesheet anlegen und im Head einfügen. Auch erstellen wir unseren Hauptcontainer (Wrapper) und verschachteln die einzelnen Bereiche.