Website HTML & CSS | Angaben im Body-Bereich

Jetzt beschäftigen wir uns mit dem eigentlichen Inhalt im Body-Bereich.

VORBEMERKUNGEN

Für die Erstellung Ihrer ersten Website wählen wir einen klassischen Aufbau. Die Reihenfolge ist eine Grafik im Kopfbereich, eine Navigationsleiste, Text und integrierte Bildinhalte. Folgende Sachverhalte werden unter dem Gesichtspunkt einer guten (und zum Teil späteren) Usuabilty vorausgesetzt, beachtet und angenommen:

1. die Website soll 965 Pixel maximal breit sein (Vermeidung eines vertikalen Scrollings)
2. Verwendung einer sehr einfachen Tabelle für die bessere Strukturierung

TABELLE ALS SEITENBEGRENZUNG

Fügen Sie bitte folgenden Code in den Body-Bereich ein:

Hierdurch definieren Sie eine Tabelle mit einer Zeile (tr) und einer Spalte (td). Vorteil dieser Methode ist, dass Sie die Tabelle später einmal beliebig verschieben oder erweitern können OHNE aufwändig Abänderungen vornehmen zu müssen. Wenn Sie an dieser Stelle mehr über den Aufbau einer Tabelle erfahren möchten, klicken Sie bitte hier.

EINFÜGEN EINER GRAFIK IM KOPFBEREICH

Fügen Sie bitte folgenden Code in die Tabelle zwischen <td> und </td> ein:

Nun haben Sie mittels <img>-Tag eine Grafik in Ihre Website eingefügt. Speichern Sie ab, wechseln Sie zum Browser und aktualisieren Ihre Seite mit der Taste F5.

GENERIERUNG EINER HORIZONTALEN NAVIGTIONSLEISTE

Fügen Sie bitte folgenden Code in die Tabelle hinter </tr> ein:

Diese sehr kleine und magere Navigationsleiste zeigt Ihnen wie Sie verlinken und durch anklicken des Links die nächste Seite aufrufen.

DARSTELLUNG VON TEXTINHALTEN

Fügen Sie bitte folgenden Code in die Tabelle hinter dem letzten </tr> ein:

Herzlichen Glückwunsch! Sie haben Ihre erste Homepage programmiert! Und das in nur wenigen Schritten. Und wie gefällt es Ihnen? Schrecklich, stimmts? Ihnen fehlt ein wenig CSS-Power zur optisch ansprechenden Gestaltung! Gehen Sie die hier vorgeschlagenen Schritte nocheinmal durch, versuchen Sie zu verstehen was welche Anweisung auslöst. Löschen Sie zur Not unverständliche Passagen Ihres Quellcodes. Und dann Integrieren Sie CSS-Inhalte!

Schlußbemerkung

Den aktuellen Fortschritt können Sie hier ansehen. Wenn Sie die Seite aufrufen, die Maus in die Seite selbst hineinbewegen und die rechte Maustaste drücken, suchen Sie nach einer Möglichkeit sich den Quelltext anzeigen zu lassen. Diesen können Sie noch einmal in Ihren Editor hineinkopieren und die jeweiligen Befehle verifizieren.