Postavte svou stránku

Teď je řada na vás. Editor je prázdný a celou stránku napíšete sami, včetně částí, které za vás editor dosud doplňoval na pozadí.

Pokyny jsou seznam všeho, co má stránka obsahovat, a kontrolují se odshora dolů: po každém kliknutí na Spustit se kontrola zastaví u prvního bodu, který ještě není splněný. Kód tedy můžete spustit kdykoli a uvidíte, na čem pokračovat. Kontroluje se jen struktura stránky, nikdy text.

Kostra. Začněte částmi, které znáte z prvních lekcí:

• deklarace typu dokumentu <!DOCTYPE html> úplně na začátku,
• prvek html s atributem lang, který prohlížečům, předčítačům i vyhledávačům říká, v jakém jazyce je stránka napsaná,
• prvek head s kódováním znaků <meta charset="utf-8">, díky kterému se správně zobrazí písmena jako ř nebo ů, a s názvem stránky (title), který v náhledu neuvidíte, ale prohlížeč ho ukáže na kartě,
• prvek body s viditelným obsahem stránky.

Rozvržení. Tělo stránky rozdělte na tři části: záhlaví header s hlavním nadpisem, main pro hlavní obsah a zápatí footer, třeba se jménem autora. Nezapomeňte na odsazení: každý vnořený prvek odsaďte klávesou Tab o úroveň víc, než má jeho rodič, ať je na první pohled vidět, co je v čem.

Obsah. Do main napište, o čem vaše téma je, proč vás baví nebo co je na něm zajímavé. Přidejte seznam a zvýrazněte důležitá slova. Aby se stránka dobře četla, můžete obsah rozčlenit nadpisy druhé úrovně (h2) nebo ho rozdělit do prvků section.

Obrázek. Můžete použít náš obrázek koček /learn/html/cats.webp, nebo jakýkoli obrázek z internetu: klikněte na něj pravým tlačítkem myši, zkopírujte adresu obrázku a vložte ji do atributu src. Kdyby se obrázek nezobrazil, zkuste jiný. A nezapomeňte na atribut alt, který obrázek popíše lidem, kteří ho nevidí.

Odkaz. Veďte ho na web, kde se návštěvníci o vašem tématu dozvědí víc, třeba na Wikipedii. Návštěvníci se asi budou chtít na vaši stránku vrátit, proto ať se odkaz otevírá v nové kartě.

Tabulka. Vymyslete něco, co se hodí do řádků a sloupců, třeba rozvrh, srovnání nebo vaše nejlepší výsledky. V prvním řádku budou záhlaví sloupců (th), v dalších řádcích data (td). Nevadí, když tabulka nebude mít okraje: o vzhled stránky se stará CSS.

Formulář. Třeba otázka pro návštěvníky nebo anketa. Každý vstup potřebuje popis label, jehož atribut for má stejnou hodnotu jako atribut id vstupu:

<label for="prezdivka">Vaše přezdívka</label>
<input type="text" name="prezdivka" id="prezdivka">

Aby se s daty z formuláře něco stalo, potřebovali bychom program na serveru, a ten naše stránka nemá. S daty se tedy zatím nic nestane a atributy action a method tentokrát můžete vynechat.

Tip: Když cvičení opustíte, váš kód se neuloží. Až bude všechno splněné, zkopírujte si ho (Ctrl+A a Ctrl+C, na Macu Cmd+A a Cmd+C): v dalším cvičení vám ukážeme, jak si stránku uložit do počítače.