2. lekce
Značkuji, značkuješ, značkujeme
Ahoj kluci a holky,
vítejte u další lekce tohoto mini kurzu. V první lekci jsme se podívali na úplné základy jazyka HTML a vytvořili první webovou stránku. Pokud ji ještě nemáte hotovou, vraťte se do 1. lekce mini kurzu. V této lekci totiž budeme vytvořenou stránku z 1. lekce dále upravovat.
Náš dnešní úkol bude prozkoumat několik dalších dílků webové stránky (elementů) a vyzkoušet je. Také se naučíme, které dílky tvoří základní kostru každé webové stránky.
V minulém návodu jsme si řekli, že dílek webové stránky se jmenuje element. Dnes se podíváme na značky, kterými se elementy zapisují. První značky jsme již použili v prvním návodu:
- h1 pro nadpis,
- p pro odstavec s textem
- div pro blok s balónkem.
Aby bylo možné značku rozeznat od okolního textu, píšeme její název do ostrých závorek a rozlišujeme její začátek a konec.
Značka je vlastně takový webový superhrdina, který dává textu v něm nějakou superschopnost.
Internetový prohlížeč zná superschopnost každé značky, přelouská všechny značky ve zdrojovém kódu, nechá si je pro sebe a návštěvníkovi zobrazí už jen informace srozumitelně bez značek.
Co říkají prohlížeči značky, které jsme použili v prvním návodu?
Značka h1 říká prohlížeči: „Já jsem hodně důležitý nadpis, je třeba mě zvýraznit!“
Značka p říká prohlížeči: „Já jsem odstavec textu a chci oddělit mezerou od dalšího textu na stránce.“
Značka div říká prohlížeči: „Já jsem blok na stránce a slučuji různé objekty do jedné sekce.“
Dnes přidáme do našeho úkolu další dva dílky – políčko a popisek:
Značka input říká prohlížeči: „Já jsem políčko, do kterého může návštěvník něco napsat nebo něco vybrat.“
Značka label říká prohlížeči: „Já jsem popisek k políčku a vysvětluji návštěvníkovi, co má zadat nebo vybrat.“
Otevřete si soubor index.html a doplňte do kódu vstupní políčko zapsané značkou input a popisek zapsaný značkou label. Tyto dva elementy umístěte před oddíl div, ve kterém je balónek. Kód bude vypadat následovně:
<h1>Létající balónek</h1> <p>Balónek létá na všechny strany.</p><input type="checkbox" id="stop">
<label for="stop">START / STOP</label>
<div></div>
Uložte soubor index.html a podívejte se na výsledek v prohlížeči:
Paráda! Už na stránce vidíme zaškrtávací políčko s popiskem START/STOP.
Jančo, proč je za značkou input a label další text, co to znamená?
Vojto, značky input a label říkají prohlížeči něco víc než značky, které jsme doteď použili, kromě toho, že říká tady zobraz políčko nebo popisek, ještě k tomu dodává další informace. K tomu se používají tzv. atributy, jsou to vlastnosti značky.
Atribut má svůj název a hodnotu a doplňuje další informace o značce. Značka může mít i více atributů.
Atributy značky input:
- type – typ vstupního políčka – checkbox znamená zaškrtávací políčko,
- id – jednoznačné označení daného elementu.
Atributy značky label:
- for – odkazuje na políčko, které má stejné ID. V našem případě hledá políčko s ID stop, což je náš checkbox.
Jančo, všimla jsem si, že značka input nemá koncovou značku. Proč?
Dobrý postřeh, Viky. Některé html dílky mají opravdu jen počáteční značku. V HTML totiž rozlišujeme značky párové a nepárové. Značka input je nepárová, má jen počáteční značku. Značky h1, p, div a label jsou párové, proto mají svoji počáteční a koncovou značku.
Super, na webu máme už všechny značky, co potřebujeme.
Na závěr lekce se podíváme na jednu důležitou věc a to kostru (strukturu) každé webové stránky. Jak už víte HTML stránka se skládá z dílků (elementů), které jsou zapsány značkami. Tyto elementy jsou do sebe různě vnořeny.
Takto vypadá základní struktura html stránky:
<!DOCTYPE html> <html> <head></head> <body></body> </html>
Úplně první dílek, který obsahuje každá webová stránka, je značka <!DOCTYPE html>, která říká prohlížeči: „Ahoj, já jsem html stránka!“
Celý html dokument je vnořen mezi značky <html> a </html> .
Informace v hlavičce <head> většinou nejsou použité přímo na webové stránce, ale poskytují různé důležité informace o stránce.
Jednou z těchto informací je titulek stránky zapsaný značkou <title>.
Další důležitou informací do hlavičky je vložit správné kódování zapsané značkou <meta> s atributem charset, kam zadáme kódování UTF-8. Meta značka říká prohlížeči: „Umím češtinu (kódování UTF-8)! Dej pozor na háčky, čárky a další české znaky.“
Vše, co je zobrazeno na webu je vnořeno mezi značky <body> a </body>.
Jak bude tedy vypadat naše první webová stránka spolu se základními značkami každé webové stránky.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Létající balónek</title>
</head>
<body>
<h1>Létající balónek</h1>
<p>Balónek létá na všechny strany.</p>
<input type="checkbox" id="stop">
<label for="stop">START / STOP</label>
<div>
</body>
</html>
Hotovo, naše první HTML stránka je kompletní. V příští lekci se podíváme na změny stylu pomocí jazyka CSS a přidáme animaci – rozhýbeme balónek.
Těším se na Vás u další lekce!
