Vítejte na mé webové stránce.
Vím, není zatím příliš zajímavá.
Je úplně prázdná, ale takhle začíná každá webová stránka,
a já vám ukážu, jak takovou stránku vytvořit rychle.
Nejprve mi dejte chvilku,
abych vám představila základní strukturu prázdné stránky.
Každá webová stránka začíná s
touto srandovní věcí zvanou DOCTYPE na začátku.
Tou jen říkáme prohlížeči,
že tato webová stránka je psaná v moderním HTML,
a ne v té staré a podivné verzi HTML.
Následuje první tag naší stránky.
HTML je značkovací jazyk, takže se všechno týká tagů.
Tag je jedna z věcí,
které začínají se špičatou závorkou,
a končí s jinou špičatou závorkou.
V matematice je možná znáte
jako symboly méně než nebo více než.
První tag každé stránky je vždycky
tento tag HTML přímo pod DOCTYPE.
Tomuhle říkáme začínající tag HTML,
a pak úplně na konci je uzavírací tag HTML,
který vypadá uplně stejně kromě tohoto lomítka,
které je velmi důležité.
Dovnitř HTML musíme dávat všechny ostatní tagy,
které chceme na stránce mít.
Proto je uzavírací tag HTML až úplně na konci.
Velká část HTML tagů je takto "párová",
ale ne všechny.
Pod HTML je vždy tag head,
který obsahuje tagy pomáhající prohlížeči zobrazit stránku,
ale zároveň neobsahuje nic, co může uživatel vidět.
Tento meta tag dává prohlížeči
více informací o zobrazení stránky.
Například, pokud používáte běžné znaky,
například písmena abecedy,
a ne žádné těžší znaky,
které jsou v arabském jazyce,
pak byste měli použít znakovou sadu utf-8.
Dál tady máme tag title.
který prohlížeč používá k určení názvu stránky.
Název se ukazuje na kartě nahoře v prohlížeči,
a taky v záložkách nebo ve výsledcích vyhledávání.
Tady na Khan Academy se titulek ukazuje nad naší webovou stránkou.
Zkusíme ho změnit.
Celá stránka bude o králících.
Takže název bude "Vše o králících"
a můžete vidět, jak se název nahoře mění.
Super, tyhle detaily bychom měli.
Takže ukončíme tag head a přesuneme se k tagu,
který je centrem dění, k tagu body.
Momentálně je pěkně nudný, jenom začíná a končí.
Co bych tam měla přidat?
Protože dělám webovou stránku o králících,
měla bych to asi uvést
ve velkém nadpisu na začátku.
K přidání nadpisu používáme tag H1.
Všechno o králících, super.
Pro nadpisy existuje šest tagů:
H1, H2, H3, H4, H5 a H6.
H1 tag je pro ty nejdůležitější nadpisy na stránce.
a H6 je nejméně důležitý.
Teď přidám více nadpisů pro každou sekci.
Použiji H2, protože jsou pro trošku
méně důležité sekce.
Ještě písničky, super.
Teď pojďme přidat opravdový obsah.
Moje cílová skupina pro tuto stránku
jsou mimozemšťani, kteří nikdy neviděli králíky.
Takže jim musíme dát hodně dobrý popis králíků.
Myslím, že bychom jim mělli napsat celý odstavec plný informací.
Jak můžeme vytvořit odstavec v HTML?
Samozřejmě s tagem P.
Přidáme tag P, a potom do něj
vložím nějaké informace,
ať mě nemusíte sledovat, jak to celé píšu.
Krása.
Teď mimozemšťani potřebují píseň, kterou budou králíky zdravit,
takže jim dám můj nejoblíbenější text.
Znovu, použiji pro to tento tag P, a vložím dovnitř text písně
"Malý králíček Foofoo", taková skvělá písnička.
Ale jejej, vše se ukazuje v jednom řádku.
Jak budou mimozemšťani vědět, kdy přestat?
Proč prohlížeč nezobrazil
zalomení v řádcích, které jsem sem vložila?
No, popravdě, prohlížeč většinou ignoruje zalomení
a mezery ve vašem HTML.
Pokud chcete, aby se text zobrazil na nový řádek,
musíme to důrazně říct, vložením jiného tagu,
tagu BR, který znamená nový řádek.
Musíme to projít a přidat BR na konci každého řádku.
Teď to vypadá jako text písničky.
Všimli jste si něčeho zábavného na BR?
Není zde uzavírací tag.
Když se nad tím zamyslíme,
nový řádek nemá žádný obsah,
takže pak není co ukončovat.
Proto potřebujeme jen začínající tag.
Tady je.
Mimozemšťani se budou učit základy o králících,
a vy jste se naučili základy o HTML.
Jakmile domluvím,
můžete si s tímto hrát a různě to měnit.
A až budete připraveni, pokračujte na vaši první HTML výzvu.