HTML Basics (Video Version)

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.