0:00:00.411,0:00:01.835
Vítejte na mé webové stránce.

0:00:01.835,0:00:04.059
Vím, není zatím příliš zajímavá.

0:00:04.059,0:00:07.477
Je úplně prázdná, ale takhle [br]začíná každá webová stránka,

0:00:07.477,0:00:10.166
a já vám ukážu, jak takovou[br]stránku vytvořit rychle.

0:00:10.275,0:00:11.681
Nejprve mi dejte chvilku,

0:00:11.681,0:00:14.860
abych vám představila základní[br]strukturu prázdné stránky.

0:00:15.389,0:00:16.944
Každá webová stránka začíná s

0:00:16.944,0:00:20.384
touto srandovní věcí [br]zvanou DOCTYPE na začátku.

0:00:20.562,0:00:21.961
Tou jen říkáme prohlížeči,

0:00:21.961,0:00:24.603
že tato webová stránka je[br]psaná v moderním HTML,

0:00:24.603,0:00:27.530
a ne v té staré a podivné verzi HTML.

0:00:27.931,0:00:31.026
Následuje první tag naší stránky.

0:00:31.026,0:00:34.582
HTML je značkovací jazyk,[br]takže se všechno týká tagů.

0:00:34.635,0:00:36.399
Tag je jedna z věcí,

0:00:36.399,0:00:38.314
které začínají se špičatou závorkou,

0:00:38.314,0:00:40.684
a končí s jinou špičatou závorkou.

0:00:40.745,0:00:42.346
V matematice je možná znáte

0:00:42.346,0:00:45.383
jako symboly méně než[br]nebo více než.

0:00:46.474,0:00:48.356
První tag každé stránky je vždycky

0:00:48.356,0:00:51.343
tento tag HTML přímo pod DOCTYPE.

0:00:51.343,0:00:53.871
Tomuhle říkáme začínající tag HTML,

0:00:53.871,0:00:57.055
a pak úplně na konci je[br]uzavírací tag HTML,

0:00:57.055,0:00:59.729
který vypadá uplně stejně[br]kromě tohoto lomítka,

0:00:59.729,0:01:01.747
které je velmi důležité.

0:01:01.889,0:01:05.147
Dovnitř HTML musíme[br]dávat všechny ostatní tagy,

0:01:05.147,0:01:07.354
které chceme na stránce mít.

0:01:07.376,0:01:11.051
Proto je uzavírací tag HTML[br]až úplně na konci.

0:01:11.119,0:01:13.351
Velká část HTML tagů[br]je takto "párová",

0:01:13.351,0:01:15.099
ale ne všechny.

0:01:15.571,0:01:19.176
Pod HTML je vždy[br]tag head,

0:01:19.187,0:01:22.146
který obsahuje tagy pomáhající [br]prohlížeči zobrazit stránku,

0:01:22.146,0:01:25.162
ale zároveň neobsahuje nic,[br]co může uživatel vidět.

0:01:25.435,0:01:27.885
Tento meta tag dává prohlížeči

0:01:27.885,0:01:30.017
více informací o zobrazení stránky.

0:01:30.034,0:01:31.885
Například, pokud používáte[br]běžné znaky,

0:01:31.885,0:01:33.281
například písmena abecedy,

0:01:33.281,0:01:34.747
a ne žádné těžší znaky,

0:01:34.747,0:01:36.628
které jsou v arabském jazyce,

0:01:36.628,0:01:39.618
pak byste měli použít znakovou sadu utf-8.

0:01:40.100,0:01:41.578
Dál tady máme tag title.

0:01:41.578,0:01:45.009
který prohlížeč používá[br]k určení názvu stránky.

0:01:45.212,0:01:47.623
Název se ukazuje na kartě[br]nahoře v prohlížeči,

0:01:47.623,0:01:50.039
a taky v záložkách nebo ve výsledcích vyhledávání.

0:01:50.161,0:01:53.430
Tady na Khan Academy se titulek[br]ukazuje nad naší webovou stránkou.

0:01:53.687,0:01:55.544
Zkusíme ho změnit.

0:01:55.695,0:01:59.348
Celá stránka bude o králících.

0:01:59.348,0:02:01.914
Takže název bude "Vše o králících"

0:02:01.914,0:02:04.923
a můžete vidět, jak se název nahoře mění.

0:02:05.539,0:02:08.149
Super, tyhle detaily bychom měli.

0:02:08.149,0:02:11.946
Takže ukončíme tag head[br]a přesuneme se k tagu,

0:02:11.946,0:02:14.809
který je centrem dění,[br]k tagu body.

0:02:15.033,0:02:17.805
Momentálně je pěkně nudný,[br]jenom začíná a končí.

0:02:18.081,0:02:19.521
Co bych tam měla přidat?

0:02:19.521,0:02:21.921
Protože dělám webovou stránku o králících,

0:02:21.921,0:02:23.155
měla bych to asi uvést

0:02:23.155,0:02:25.455
ve velkém nadpisu na začátku.

0:02:25.559,0:02:28.656
K přidání nadpisu používáme tag H1.

0:02:29.574,0:02:33.154
Všechno o králících, super.

0:02:33.154,0:02:34.772
Pro nadpisy existuje šest tagů:

0:02:34.772,0:02:38.441
H1, H2, H3, H4, H5 a H6.

0:02:38.461,0:02:41.153
H1 tag je pro ty nejdůležitější[br]nadpisy na stránce.

0:02:41.153,0:02:43.358
a H6 je nejméně důležitý.

0:02:43.491,0:02:45.682
Teď přidám více nadpisů pro každou sekci.

0:02:45.696,0:02:49.035
Použiji H2, protože jsou pro trošku

0:02:49.035,0:02:51.197
méně důležité sekce.

0:02:51.957,0:02:55.469
Ještě písničky, super.

0:02:56.214,0:02:58.240
Teď pojďme přidat opravdový obsah.

0:02:58.402,0:03:00.435
Moje cílová skupina pro tuto stránku

0:03:00.435,0:03:03.934
jsou mimozemšťani, kteří nikdy neviděli[br]králíky.

0:03:03.934,0:03:06.943
Takže jim musíme dát[br]hodně dobrý popis králíků.

0:03:07.100,0:03:10.174
Myslím, že bychom jim mělli[br]napsat celý odstavec plný informací.

0:03:10.396,0:03:12.856
Jak můžeme vytvořit odstavec v HTML?

0:03:13.391,0:03:16.049
Samozřejmě s tagem P.

0:03:16.470,0:03:20.736
Přidáme tag P, a potom do něj

0:03:20.736,0:03:22.633
vložím nějaké informace,

0:03:22.633,0:03:25.568
ať mě nemusíte sledovat,[br]jak to celé píšu.

0:03:25.856,0:03:27.116
Krása.

0:03:27.699,0:03:30.901
Teď mimozemšťani potřebují píseň,[br]kterou budou králíky zdravit,

0:03:30.912,0:03:33.170
takže jim dám můj[br]nejoblíbenější text.

0:03:33.170,0:03:38.170
Znovu, použiji pro to tento tag P,[br]a vložím dovnitř text písně

0:03:39.521,0:03:43.419
"Malý králíček Foofoo",[br]taková skvělá písnička.

0:03:43.572,0:03:47.672
Ale jejej, vše se ukazuje v jednom řádku.

0:03:47.868,0:03:50.315
Jak budou mimozemšťani[br]vědět, kdy přestat?

0:03:50.418,0:03:51.660
Proč prohlížeč nezobrazil

0:03:51.660,0:03:54.092
zalomení v řádcích, [br]které jsem sem vložila?

0:03:54.350,0:03:57.052
No, popravdě, prohlížeč[br]většinou ignoruje zalomení

0:03:57.052,0:03:59.139
a mezery ve vašem HTML.

0:03:59.318,0:04:01.647
Pokud chcete, aby se text[br]zobrazil na nový řádek,

0:04:01.647,0:04:05.022
musíme to důrazně říct,[br]vložením jiného tagu,

0:04:05.022,0:04:08.176
tagu BR, který znamená nový řádek.

0:04:08.398,0:04:12.513
Musíme to projít a[br]přidat BR na konci každého řádku.

0:04:12.777,0:04:14.885
Teď to vypadá jako text písničky.

0:04:15.440,0:04:18.890
Všimli jste si něčeho zábavného na BR?

0:04:19.221,0:04:20.851
Není zde uzavírací tag.

0:04:20.966,0:04:21.938
Když se nad tím zamyslíme,

0:04:21.938,0:04:23.492
nový řádek nemá žádný obsah,

0:04:23.492,0:04:25.861
takže pak není co ukončovat.

0:04:26.006,0:04:28.496
Proto potřebujeme jen začínající tag.

0:04:29.062,0:04:30.361
Tady je.

0:04:30.456,0:04:32.704
Mimozemšťani se budou učit[br]základy o králících,

0:04:32.704,0:04:35.883
a vy jste se naučili základy o HTML.

0:04:36.044,0:04:37.158
Jakmile domluvím,

0:04:37.158,0:04:39.915
můžete si s tímto hrát a různě to měnit.

0:04:39.976,0:04:43.658
A až budete připraveni, pokračujte[br]na vaši první HTML výzvu.