Im letzten Teil von „Wie erstelle ich eine Homepage“ ging es um Programme, die einen helfen, Webseiten zu programmieren. Ein Beispiel zur wirklichen Erstellung einer Website, bin ich jedoch schuldig geblieben. Dies möchte ich jetzt anhand einer einfachen Übungen nachholen:

1. Öffnen Sie einen beliebigen Text-Editor und kopieren folgenden Text hinein:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
</head>
<body>
</body>
</html>

Dies ist das Grundgerüst jeder Webseite (siehe auch Teil 4)

In den ersten beiden Zeile wird definiert, mit welcher Art HTML gearbeitet wird. Der einfachheithalber wird noch XHTML 1 und nicht HTML5 benutzt.
Im Head-Bereich wird der character-Set (charset) mit UTF-8 festgelegt. So wird vermieden, dass es Probleme mit Umlauten und Sonderzeichen gibt.
Der Text innerhalb von „title“ wird später im Browser als Seitentitel angezeigt und von Suchmaschinen ausgewertet.
Der Bereich innerhalb von „body“ ist noch leer – der Seiteninhalt demnach auch. Das werden wir aber nun ändern:

2. Inhalt für Logo, Navigation und Texte erzeugen

Innerhalb der „body“-tags schreiben wir nun erstmal folgendes:

<body>
<div> Container
<div> Logo </div>
<div> Navigation </div>
<div> Inhalt </div>
</div>
</body>

Speichern Sie jetzt Ihr Dokument als index.html ab und öffnen es mit Ihrem Internet-Browser oder betrachten es mit der Vorschau-Funktion Ihres Editors – es müßte so aussehen:

HTML-Code interpretiert durch den Browser

HTML-Code interpretiert durch den Browser

Damit man deutlicher erkennt, was für was steht bzw. verantwortlich ist, fügen wir mittels CSS jedem „div“ einen Rahmen-Befehl hinzu:

<body>
<div style="border:1px solid black"> Container
<div style="border:1px solid red"> Logo </div>
<div style="border:1px solid blue"> Navigation </div>
<div style="border:1px solid green"> Inhalt </div>
</div>
</body>

Das Ergebnis (Hinweis: Farben werden normalerweise nicht als Wort geschrieben, sondern im Hexadezimal-Code – dies kommt später):

div-Boxen durch inline-CSS mit Rahmen versehen

div-Boxen durch inline-CSS mit Rahmen versehen

Schon erkennt man die Zuständigkeiten jeder einzelner div-Box. Was man allerdings nicht deutlich erkennt, ist, dass die Container-Box Logo, Navigation und Inhalt enthält, weil dessen div-Box erst nach Inhalt geschlossen wird. Wenn wir unseren Boxen noch etwas Innenabstand zuweisen sehen wir es besser:

<body>
<div style="border:1px solid black; padding:5px;"> Container
<div style="border:1px solid red; padding:5px;"> Logo </div>
<div style="border:1px solid blue; padding:5px;"> Navigation </div>
<div style="border:1px solid green; padding:5px;"> Inhalt </div>
</div>
</body>
Boxen mit Innenabstand

Boxen mit Innenabstand

Den angelegten Container benötigen wir, um der gesamten Webseite eine Breite und Postion geben zu können. Zum Beispiel 1000px Breite und mittig positioniert. Die Höhe kann man erstmal weglassen, sie wird automatisch durch den Inhalt vorgegeben.

<body>
<div style="border:1px solid black; padding:5px; width:800px; margin:auto;"> Container
<div style="border:1px solid red; padding:5px;"> Logo </div>
<div style="border:1px solid blue; padding:5px;"> Navigation </div>
<div style="border:1px solid green; padding:5px;"> Inhalt </div>
</div>

„margin:auto“ besagt, dass automatisch der gleiche Abstand nach links und rechts genommen werden soll. Es gibt es kein „center“ für div-Boxen.

Zentrierte div-Box durch margin:auto

Zentrierte div-Box durch margin:auto

Als nächstes wollen wir die Navigation links zum Inhalt haben, in einer Breite von 150px:

<div style="border:1px solid black; padding:5px; width:800px; margin:auto;"> Container
<div style="border:1px solid red; padding:5px;"> Logo </div>
<div style="border:1px solid blue; padding:5px; width:150px; float:left;"> Navigation </div>
<div style="border:1px solid green; padding:5px;"> Inhalt </div>
</div>

„float:left;“ lässt den nachfolgenden Inhalt hineinfliessen. Links/left bedeutet, dass das Element links liegt und der Rest später rechts davon. Wenn Sie nun noch ein wenig mit CSS-Eigenschaften wie „background-color“ und „height“ ausprobieren sieht Ihr Layout dann z. B. so aus:

erstes Layout mit HTML & CSS

erstes Layout mit HTML & CSS

Hier noch derkomplette Code dazu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Meine erste Seite</title>
</head>
<body style="background-color:grey;">
<div style="border:1px solid black; width:800px; margin:auto;">
<div style="border:1px solid red; padding:5px;background-color:red;"> Logo </div>
<div style="border:1px solid blue; padding:5px; width:150px;float:left;background-color:blue;"> Navigation </div>
<div style="border:1px solid green; padding:5px; height:350px;background-color:green;"> Inhalt </div>
</div>
</body>
</html>

Achten Sie darauf das Semikolon immer zu setzen und auf die Rechtschreibung der Befehle!

Im Teil 11 von „wie erstelle ich eine Homepage“ werden wir das Layout weiter optimieren.