Websiteerstellung: So programmieren Sie eine professionelle HTML-Website!

Da Sie bereits Ihre erste Homepage via Editor „programmiert“ haben, können Sie den nächsten Schritt wagen. Dabei nutzen wir ein bereits vorgefertigtes Beispiel aus unserem Workshop im Bereich Webdesign. Den Entwurf finden Sie hier.

Zuerst müssen wir alle Elemente, welche wir nicht dauerhaft auf den weiteren Unterseiten verwenden eliminieren und anschließend die Grafik in brauchbare Teilbereiche schneiden, dann separat abspeichern. Dies sieht in etwa wie folgt aus:

Vorbereitung des HTML-Dokuments

Zuerst öffnen wir zwei leere Dokumente und speichern diese gleich unter index.php [Hauptdokument] und index.css [CSS-Auslagerungsdatei] ab. In der index.php fügen Sie bitte folgende Zeilen ein:

Gestaltung des Headers

Nun führen Sie schrittweise folgende Anweisungen aus:

1) Definiere in der index.css die Hintergrundfarbe, die Abstände zum Bildschirmrand, die Standardschrift und die Standardschriftgröße:

2) Festlegung einer Tabellenstruktur für den Header (Kopfbereich) in der index.php:

3) Formatierung der Tabelle für den Header in der index.css:

4) Einfügen der Navigation im Kopfbereich in die index.php:

5) Verleihe dem in der index.css eine ansehnliche Form:

Definition des Hauptteils (Part 1) und der Navigation rechts

Zur Erleichterung des weiteren strukturellen Aufbaus verwenden wir wieder eine Tabelle, welche aus zwei Bereichen besteht – dem Hauptteil und der Navigationsleiste. Profis können auch gleich beide Tabellen miteinander verbinden.

6) Anlegen einer zweiten Tabelle in der index.php. <colgroup> und <colwidth=““> definieren die Spalten der Tabelle mit einer Breite in der Dimension pixel:

7) Definition der CSS-Eigenschaften von tab02

8) Wir fügen hinter den ersten <td>..</td>-Tags der neuen Tabelle folgenden Code hinzu:

9) Definition der CSS-Eigenschaften von navibar

Definition des Hauptteils (Part 2) und eigentlichen Inhalts

Wie Sie sehen nimmt die Seite Gestalt an. Ein schlichtes, einfaches, aber ansprechendes Webdesign in einem HTML-Code eingebunden. Die bisherige Struktur kann auf allen Unterseiten wiederverwendet werden. Deshalb empfehlen wir Ihnen diese Grundstrukturen gesondert zu speichern und für den eigentlichen Inhalt eine neue CSS-Datei anzulegen.

Dazu kopieren Sie einfach die CSS-Anweisung im Header und setzen diese eine Zeile tiefer. Anschließend benennen Sie die neue Datei in inhalte.css um.

10) Erstellen einer Überschrift erster Ordnung in der index.php. Alles weiteren Quellcodeeingaben erfolgen ab hier im ersten <td>..</td>-Tag der zweiten Tabelle:

11) Und die CSS-Zuweisung in der inhalte.css

12) Datum und Name

13) Bild und Text

14) Überschrift zweiten Grades und Text

16) Dekoleiste für den Abschluss der Website: Füge ganz am Ende der Tabelle hinter dem letzten schließenden <tr>-Tag folgendes ein:

… und in die index.css: