Deine erste Homepage
Kapitel 8
Noch mehr Struktur
Bevor wir daran gehen, das Aussehen der Seite, das Design, mit CSS zu gestalten, müssen wir noch einmal an der Struktur unserer Seiten arbeiten. Auch wenn das lästig erscheint: Wir machen uns die Arbeit ja nur einmal. Als Gegenleistung erhalten wir eine saubere Trennung zwischen Inhalt und Aussehen. Das ist wichtig, um unsere Seite pflegeleicht zu halten.
Container zum Strukturieren
Einen Container haben wir ja schon im vorigen Kapitel kennengelernt.
Richtig. <div id="navi"> - damit haben wir die Navigation "eingepackt".
Nun fügen wir noch eine Reihe weiterer Container ein - auch wenn sie zum Teil noch leer sind. Das macht nichts.
Wir werden sie später mit Inhalten füllen.
Die Liste der Container
- <div id="main">
- ein Container für alles. Alles, was innerhalb des body Tags steht, wird damit eingepackt.
Im Klartext: das öffnende Tag fügen wir unmittelbar nach <body> ein, das schließende Tag dieses Containers unmittelbar vor </body> - <div id="kopf">
- ein Container für Kopfdaten. Das könnte z. B. ein Logo oder ein Schmuckbild am Seitenkopf sein.
Der Kopf-Container folgt unmittelbar nach dem öffnenden Tag des main-Containers. Inhalt dieses Tags ist vorläufig nur ein Link zum Navigationsmenü. - <div id="inhalt">
- Der Inhalt unserer Seite. Angefangen bei der ersten Überschrift bis zur letzten Textzeile (aber ohne die Navigation, die kommt in den nächsten Container). - <div id="navi">
- diesen Container kennen wir schon. - <div id="footer">
- Ein weiterer vorerst leerer Container, unmittelbar vor dem Ende des main-Containers.
Oh je, wie sollen wir denn die Übersicht bei all den Containern behalten?
Keine Sorge, auch dafür gibt es in HTML eine elegante Lösung:
Kommentare
Kommentare werden nur im Quelltext angezeigt, und helfen dir, die Übersicht beim Arbeiten am Quelltext zu behalten.
Im Browser werden die Kommentare nicht angezeigt.
So sieht ein Kommentar aus:
<!-- dies ist ein Kommentar -->
Erkennst du, wie die div-Container ineinander verschachtelt sind? Der Container "main" beinhaltet alle anderen Container.
Übung
Bitte baue jetzt alle Container in deine Seiten ein - jawohl, in alle 3 Seiten. Deine Inhalte und dein Navigationsmenü übernimmst du natürlich.
Wenn du damit fertig bist, validiere deine Seiten, um sicher zu gehen, dass die Struktur fehlerfrei ist.
Bei der Kontrolle deiner Seiten im Browser wirst du (darfst du) keinerlei Unterschied bemerken! Das kommt erst im nächsten Kapitel.
Du schaffst es nicht?
Zugegeben: In dieser Lektion gibt es viele Möglichkeiten, Fehler zu machen.
Wenn es gar nicht klappt, dann gibt es hier das Sicherheitsnetz:
Alle 3 Seiten mit der kompletten Struktur, wie wir sie in der nächsten Lektion brauchen, in einem Zip Archiv verpackt:
Die Musterdateien
Anmerkung:
Zip Archive werden ab Windows XP direkt im Datei Explorer entpackt und angezeigt.
Für andere Betriebssysteme brauchst du ein spezielles Programm wie WinZip oder WinRAR.
Schau' dir eine der 3 Musterdateien, z. B. die index_2.html, im Editor an, um die Struktur zu verstehen.
Was haben wir in dieser Lektion gelernt?
Wir haben unsere Seiten mit div-Containern in Bereiche aufgeteilt. Diese Container dienen im nächsten Kapitel dazu, der Seite ein ansprechendes Design zu verpassen.