Die Programmseite
Eine Website hat meist mehr als eine Seite. Unsere bekommt eine zweite, mit dem Programm: wann welcher Film läuft und in welchem Saal.
Wir haben die Datei programm.html in den Editor gelegt. Sie steht jetzt an erster Stelle der Dateien, deshalb zeigt die Vorschau sie an. Sie hat schon ihren head, und in main stehen die Überschrift, ein Absatz und das Programm als einfacher Text, mit den Spalten durch | getrennt.
Derselbe Header und Footer. Besucher erwarten, dass jede Seite einer Website denselben Header und Footer hat, damit sie immer überallhin kommen und immer wissen, wo sie sind. Auf einer kleinen Website wie unserer hat jede Seite einfach ihre eigene Kopie davon. Kopiere sie aus index.html: Markiere das ganze Element header von <header> bis </header>, kopiere es (Strg+C, auf dem Mac Cmd+C), wechsle zu programm.html und füge es ein (Strg+V, auf dem Mac Cmd+V). Mache dann dasselbe mit dem Footer.
Die Tabelle. Mache dann aus dem Programm eine Tabelle mit vier Spalten: Tag, Uhrzeit, Film und Saal. Jede Zeile des Textes wird zu einer Tabellenzeile und jeder Teil zwischen den Zeichen | zu einer Zelle. Lösche die Zeichen |.
Wenn du fertig bist, probiere die Links in der Vorschau aus: Startseite oder das Logo bringt dich zur Startseite, und Programm oder der Knopf Das läuft gerade bringt dich zurück. Die Links funktionieren, weil beide Dateien im selben Ordner liegen und relative Links dort nach Dateien suchen.
So schreibst du es:
Anweisungen
- 1
Kopiere den
headerausindex.htmlin die Dateiprogramm.html, direkt unter das öffnende Tag<body>, und denfooterdirekt über das schließende Tag</body>. - 2
Mache aus der ersten Zeile des Programms eine Tabelle mit einer Zeile aus Kopfzellen:
Tag,Uhrzeit,FilmundSaal. - 3
Mache aus den anderen fünf Zeilen Zeilen mit Datenzellen, eine Zeile für jede Vorstellung.