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:
- die Website soll 965 Pixel maximal breit sein (Vermeidung eines vertikalen Scrollings)
- Verwendung einer sehr einfachen Tabelle für die bessere Strukturierung
Tabelle als Seitenbegrenzung
Fügen Sie bitte folgenden Code in den Body-Bereich ein:
1 2 3 4 5 6 7 8 9 | <body> <table align="center" width="965"> <tr> <td> </td> </tr> </table> </body> |
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:
1 2 3 4 5 | <td> <img src="https://www.einfaches-programmieren.de/example/01/head.jpg" width="965" height="187"> </td> |
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 Navigationsleiste
Fügen Sie bitte folgenden Code in die Tabelle hinter </tr> ein:
1 2 3 4 5 6 7 | <tr> <td> <a href="impressum.htm">Impressum</a> <a href="kontakt.htm">Kontakt</a> <a href="nutzungsbedingungen.htm">Nutzungsbedingungen</a> </td> </tr> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <tr> <td> <div> <img src="http://www.einfaches-programmieren/example/01/danke.jpg" width="424" height="283" > </div> <p> Meine erste Website! <p> </td> </tr> |
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 noch einmal 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!
