Kino Hvězda

Vítejte u prvního projektu! Máte za sebou kurzy HTML a CSS a teď to všechno spojíte do skutečného webu: webu Kina Hvězda, malého starého kina s jedním velkým a jedním malým sálem.

Web má dvě stránky, které sdílejí jeden soubor se styly:

• index.html, úvodní stránka: záhlaví s názvem kina a navigací, velká úvodní sekce, tři filmy, které tento týden hrajeme, ceny vstupenek a zápatí s adresou,
• program.html s tabulkou, kdy se který film hraje,
• style.css, vzhled obou stránek.

Až budete hotovi, bude úvodní stránka vypadat takhle (zmenšeně):

Web s vámi poroste. V příští lekci ho dáte na internet, aby si ho mohl otevřít kdokoli. Po kurzu JavaScriptu oživíte stránku s programem a po kurzu Tailwindu dáte celému webu nový vzhled.

Každé cvičení navazuje na to předchozí. Nejdřív napíšete HTML úvodní stránky, pak druhou stránku a nakonec CSS. Dlouhé texty, třeba popisy filmů, máte připravené, takže se můžete soustředit na strukturu a styly.

Záhlaví. Začneme kostrou stránky a jejím záhlavím. Záhlaví je nahoře na každé stránce webu. Vlevo bývá název webu, často jako logo: odkaz, který vás odkudkoli z webu vrátí na úvodní stránku. Vpravo je navigace s odkazy na další stránky. Naše logo je jen text a dostane třídu logo, abyste ho později mohli upravit v CSS:

<a href="index.html" class="logo">Kino Hvězda</a>

Odkazy vedou na soubory webu, a to relativními odkazy jako v kurzu HTML. Stránka s programem ještě neexistuje, takže její odkaz v náhledu zatím nic neudělá.