Das Kino Sternenlicht

Willkommen zu deinem ersten Projekt! Du hast die Kurse HTML und CSS abgeschlossen und fügst jetzt alles zu einer richtigen Website zusammen: der Website des Kinos Sternenlicht, eines kleinen alten Kinos mit einem großen und einem kleinen Saal.

Die Website hat zwei Seiten, die sich ein Stylesheet teilen:

• index.html, die Startseite: ein Header mit dem Namen des Kinos und der Navigation, ein großer Begrüßungsbereich, die drei Filme dieser Woche, die Ticketpreise und ein Footer mit der Adresse,
• programm.html mit einer Tabelle, wann welcher Film läuft,
• style.css, das Aussehen beider Seiten.

Wenn du fertig bist, sieht die Startseite so aus (verkleinert):

Die Website wächst mit dir. In der nächsten Lektion stellst du sie online, damit jeder sie öffnen kann. Nach dem JavaScript-Kurs machst du die Programmseite interaktiv, und nach dem Tailwind-Kurs gibst du der ganzen Website ein neues Aussehen.

Jede Übung knüpft dort an, wo die vorige aufgehört hat. Zuerst schreibst du das HTML der Startseite, dann die zweite Seite und zuletzt das CSS. Lange Texte, zum Beispiel die Beschreibungen der Filme, liegen schon bereit, damit du dich auf die Struktur und die Stile konzentrieren kannst.

Der Header. Beginnen wir mit dem Gerüst der Seite und ihrem Header. Ein Header steht oben auf jeder Seite einer Website. Links steht der Name der Website, oft als Logo: ein Link, der dich von überall auf der Website zur Startseite zurückbringt. Rechts steht die Navigation mit Links zu den anderen Seiten. Unser Logo ist nur Text und bekommt die Klasse logo, damit du es später in CSS gestalten kannst:

<a href="index.html" class="logo">Kino Sternenlicht</a>

Die Links führen zu den Dateien der Website, mit relativen Links wie im HTML-Kurs. Die Programmseite gibt es noch nicht, deshalb tut ihr Link in der Vorschau vorerst nichts.