WEBVTT

00:00:00.411 --> 00:00:01.835
Vítejte na mé webové stránce.

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

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

00:00:07.477 --> 00:00:10.166
a já vám ukážu, jak takovou
stránku vytvořit rychle.

00:00:10.275 --> 00:00:11.681
Nejprve mi dejte chvilku,

00:00:11.681 --> 00:00:14.860
abych vám představila základní
strukturu prázdné stránky.

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

00:00:16.944 --> 00:00:20.384
touto srandovní věcí 
zvanou DOCTYPE na začátku.

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

00:00:21.961 --> 00:00:24.603
že tato webová stránka je
psaná v moderním HTML,

00:00:24.603 --> 00:00:27.530
a ne v té staré a podivné verzi HTML.

00:00:27.931 --> 00:00:31.026
Následuje první tag naší stránky.

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

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

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

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

00:00:40.745 --> 00:00:42.346
V matematice je možná znáte

00:00:42.346 --> 00:00:45.383
jako symboly méně než
nebo více než.

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

00:00:48.356 --> 00:00:51.343
tento tag HTML přímo pod DOCTYPE.

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

00:00:53.871 --> 00:00:57.055
a pak úplně na konci je
uzavírací tag HTML,

00:00:57.055 --> 00:00:59.729
který vypadá uplně stejně
kromě tohoto lomítka,

00:00:59.729 --> 00:01:01.747
které je velmi důležité.

00:01:01.889 --> 00:01:05.147
Dovnitř HTML musíme
dávat všechny ostatní tagy,

00:01:05.147 --> 00:01:07.354
které chceme na stránce mít.

00:01:07.376 --> 00:01:11.051
Proto je uzavírací tag HTML
až úplně na konci.

00:01:11.119 --> 00:01:13.351
Velká část HTML tagů
je takto "párová",

00:01:13.351 --> 00:01:15.099
ale ne všechny.

00:01:15.571 --> 00:01:19.176
Pod HTML je vždy
tag head,

00:01:19.187 --> 00:01:22.146
který obsahuje tagy pomáhající 
prohlížeči zobrazit stránku,

00:01:22.146 --> 00:01:25.162
ale zároveň neobsahuje nic,
co může uživatel vidět.

00:01:25.435 --> 00:01:27.885
Tento meta tag dává prohlížeči

00:01:27.885 --> 00:01:30.017
více informací o zobrazení stránky.

00:01:30.034 --> 00:01:31.885
Například, pokud používáte
běžné znaky,

00:01:31.885 --> 00:01:33.281
například písmena abecedy,

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

00:01:34.747 --> 00:01:36.628
které jsou v arabském jazyce,

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

00:01:40.100 --> 00:01:41.578
Dál tady máme tag title.

NOTE Paragraph

00:01:41.578 --> 00:01:45.009
který prohlížeč používá
k určení názvu stránky.

00:01:45.212 --> 00:01:47.623
Název se ukazuje na kartě
nahoře v prohlížeči,

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

00:01:50.161 --> 00:01:53.430
Tady na Khan Academy se titulek
ukazuje nad naší webovou stránkou.

00:01:53.687 --> 00:01:55.544
Zkusíme ho změnit.

00:01:55.695 --> 00:01:59.348
Celá stránka bude o králících.

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

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

00:02:05.539 --> 00:02:08.149
Super, tyhle detaily bychom měli.

00:02:08.149 --> 00:02:11.946
Takže ukončíme tag head
a přesuneme se k tagu,

00:02:11.946 --> 00:02:14.809
který je centrem dění,
k tagu body.

00:02:15.033 --> 00:02:17.805
Momentálně je pěkně nudný,
jenom začíná a končí.

00:02:18.081 --> 00:02:19.521
Co bych tam měla přidat?

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

00:02:21.921 --> 00:02:23.155
měla bych to asi uvést

00:02:23.155 --> 00:02:25.455
ve velkém nadpisu na začátku.

00:02:25.559 --> 00:02:28.656
K přidání nadpisu používáme tag H1.

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

00:02:33.154 --> 00:02:34.772
Pro nadpisy existuje šest tagů:

00:02:34.772 --> 00:02:38.441
H1, H2, H3, H4, H5 a H6.

00:02:38.461 --> 00:02:41.153
H1 tag je pro ty nejdůležitější
nadpisy na stránce.

00:02:41.153 --> 00:02:43.358
a H6 je nejméně důležitý.

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

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

00:02:49.035 --> 00:02:51.197
méně důležité sekce.

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

00:02:56.214 --> 00:02:58.240
Teď pojďme přidat opravdový obsah.

00:02:58.402 --> 00:03:00.435
Moje cílová skupina pro tuto stránku

00:03:00.435 --> 00:03:03.934
jsou mimozemšťani, kteří nikdy neviděli
králíky.

00:03:03.934 --> 00:03:06.943
Takže jim musíme dát
hodně dobrý popis králíků.

00:03:07.100 --> 00:03:10.174
Myslím, že bychom jim mělli
napsat celý odstavec plný informací.

00:03:10.396 --> 00:03:12.856
Jak můžeme vytvořit odstavec v HTML?

00:03:13.391 --> 00:03:16.049
Samozřejmě s tagem P.

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

00:03:20.736 --> 00:03:22.633
vložím nějaké informace,

00:03:22.633 --> 00:03:25.568
ať mě nemusíte sledovat,
jak to celé píšu.

00:03:25.856 --> 00:03:27.116
Krása.

00:03:27.699 --> 00:03:30.901
Teď mimozemšťani potřebují píseň,
kterou budou králíky zdravit,

00:03:30.912 --> 00:03:33.170
takže jim dám můj
nejoblíbenější text.

00:03:33.170 --> 00:03:38.170
Znovu, použiji pro to tento tag P,
a vložím dovnitř text písně

00:03:39.521 --> 00:03:43.419
"Malý králíček Foofoo",
taková skvělá písnička.

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

00:03:47.868 --> 00:03:50.315
Jak budou mimozemšťani
vědět, kdy přestat?

00:03:50.418 --> 00:03:51.660
Proč prohlížeč nezobrazil

00:03:51.660 --> 00:03:54.092
zalomení v řádcích, 
které jsem sem vložila?

00:03:54.350 --> 00:03:57.052
No, popravdě, prohlížeč
většinou ignoruje zalomení

00:03:57.052 --> 00:03:59.139
a mezery ve vašem HTML.

00:03:59.318 --> 00:04:01.647
Pokud chcete, aby se text
zobrazil na nový řádek,

00:04:01.647 --> 00:04:05.022
musíme to důrazně říct,
vložením jiného tagu,

00:04:05.022 --> 00:04:08.176
tagu BR, který znamená nový řádek.

00:04:08.398 --> 00:04:12.513
Musíme to projít a
přidat BR na konci každého řádku.

00:04:12.777 --> 00:04:14.885
Teď to vypadá jako text písničky.

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

00:04:19.221 --> 00:04:20.851
Není zde uzavírací tag.

00:04:20.966 --> 00:04:21.938
Když se nad tím zamyslíme,

00:04:21.938 --> 00:04:23.492
nový řádek nemá žádný obsah,

00:04:23.492 --> 00:04:25.861
takže pak není co ukončovat.

00:04:26.006 --> 00:04:28.496
Proto potřebujeme jen začínající tag.

00:04:29.062 --> 00:04:30.361
Tady je.

00:04:30.456 --> 00:04:32.704
Mimozemšťani se budou učit
základy o králících,

00:04:32.704 --> 00:04:35.883
a vy jste se naučili základy o HTML.

00:04:36.044 --> 00:04:37.158
Jakmile domluvím,

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

00:04:39.976 --> 00:04:43.658
A až budete připraveni, pokračujte
na vaši první HTML výzvu.