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.
- h1 pro nadpis,
- p pro odstavec s textem.
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.“
Dnes přidáme do našeho úkolu další dva dílky – odřádkování a obrázek:
Značka br říká prohlížeči: „Tady prosím odřádkuj!“
Značka img říká: „Tady bude obrázek, který je uložený na této adrese a má tento popisek.“
Otevřete si soubor index.html a v říkance zaměňte slovo zebra za obrázek se značkou img a za prvním rýmem použijte odřádkování pomocí značky br. Kód bude vypadat následovně:
<h1>Zebra</h1> <p> <img src="imgs/zebra.jpg" alt="zebra"> dupe nohama, <br> chce mít triko s pruhama. Potom nikdo na světě, s koňem si ji nesplete. </p>
Uložte soubor index.html a podívejte se na výsledek v prohlížeči:
Paráda! Místo slova zebra je nyní na stránce obrázek a první rým je odřádkovaný.
Jančo, proč je za značkou img další text, co to znamená?
Vojto, značka img říká prohlížeči něco víc než značky, které jsme doteď použili, kromě toho, že říká tady zobraz obrázek, ještě k tomu dodává, kde má prohlížeč obrázek najít a jaký je jeho popis. 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 img:
- src – cesta k obrázku,
- alt – popis obrázku.
Na konci řádku jsme v kódu zapsali značku br, která odřádkuje. Nestačí k tomu pouze vložený enter, jelikož enter patří mezi tzv. bílé znaky.
Bílé znaky
Mezi bílé znaky patří mezera, tabulátor a enter (odřádkování). Tyto bíle znaky HTML přehlíží, protože slouží hlavně pro přehlednost zdrojového kódu. Ve výsledné webové stránce nejsou zobrazeny. Více mezer je považováno stále za jednu. Tedy odřádkování nebo mezery, které opravdu chceme ve webové stránce mít musíme zadat příslušnou HTML značkou.
Nyní pokračujme v psaní kódu a dané slova v básničce zaměníme za obrázky s příslušnými atributy. Na konci každého řádku použijeme značku br pro odřádkování.
<h1>Zebra</h1> <p> <img src="imgs/zebra.jpg" alt="zebra"> dupe nohama, <br> chce mít <img src="imgs/triko.jpg" alt="triko"> s pruhama. <br> Potom nikdo na <img src="imgs/svet.jpg" alt="svet">, <br> s <img src="imgs/kun.jpg" alt="kun"> si ji nesplete. </p>
Uložte soubor index.html a podívejte se na výsledek v prohlížeči:
Super, už máme na webu všechny obrázky i s odřádkováním za každým rýmem.
Jančo, všimla jsem si, že značky img a br nemají 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čky img i br jsou nepárové, mají jen počáteční značku. Značky h1 a p jsou párové, proto mají svoji počáteční a koncovou značku.
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 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>.
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>
<title>Obrázková básnička</title>
</head>
<body>
<h1>Zebra</h1>
<p>
<img src="imgs/zebra.jpg" alt="zebra"> dupe nohama, <br>
chce mít <img src="imgs/triko.jpg" alt="triko"> s pruhama. <br>
Potom nikdo na <img src="imgs/svet.jpg" alt="svet"> ,<br>
s <img src="imgs/kun.jpg" alt="kun"> si ji nesplete.
</p>
</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.
Těším se na Vás u další lekce!
