WEBVTT

00:00:00.192 --> 00:00:02.681
Odkazy jsou skvělý způsob,

00:00:02.681 --> 00:00:04.765
jak propojit jednu webovou
stránku s druhou.

00:00:04.765 --> 00:00:07.236
Ale mohou i propojovat
jednu část stránky

00:00:07.236 --> 00:00:09.367
s jinou částí té samé stránky.

00:00:09.367 --> 00:00:13.825
To se hodí například když chceme vytvořit
obsah u velmi dlouhých stránek.

00:00:13.825 --> 00:00:16.884
Teď jsem přidala
pár informací i na tuto stránku,

00:00:16.884 --> 00:00:21.821
abych vám mohla předat trochu
historie o webu a historii verzí HTML.

00:00:21.848 --> 00:00:26.046
Už toho tady mám docela hodně,
takže by se mi hodil obsah stránky.

00:00:26.046 --> 00:00:27.840
Tady nahoře už jsem začala.

00:00:27.840 --> 00:00:32.831
je to prostě nečíslovaný seznam položek
obsahující nadpis každé sekce.

00:00:32.831 --> 00:00:35.226
A chtěla jsem prolinkovat 
odkazy s nadpisy sekcí,

00:00:35.226 --> 00:00:38.564
abyste na ně mohli kliknout
a přesunout se do dané části stránky.

00:00:38.564 --> 00:00:41.701
Abych to udělala, tak znovu použiji
tag 

00:00:41.701 --> 00:00:45.112
a začnu tím,
že uzavřu tenhle nadpis

00:00:45.112 --> 00:00:48.564
do tagu ''.

00:00:48.564 --> 00:00:54.624
A kam by měl atribut 'href' odkazovat?

00:00:54.624 --> 00:00:57.808
No nějak musíme říct prohlížeči,

00:00:57.808 --> 00:00:59.929
kam má na stránce skočit.

00:00:59.934 --> 00:01:03.313
Musíme nějak unikátně určit část stránky.

00:01:03.313 --> 00:01:06.337
Jestliže už jste se učili CSS selektory,

00:01:06.337 --> 00:01:09.108
tak už vlastně víte,
jak se to dá udělat.

00:01:09.108 --> 00:01:13.766
Můžeme toho docílit tak,
že přidáme tagu atribut 'id'.

00:01:13.766 --> 00:01:18.657
Pojďme sjet dolů
a najít tam nadpis.

00:01:18.657 --> 00:01:22.791
A k tomuto nadpisu přidáme atribut 'id'.

00:01:22.791 --> 00:01:25.366
Takže najedu kurzorem do '',

00:01:25.366 --> 00:01:27.429
napíšu id rovná se

00:01:27.429 --> 00:01:30.082
a vymyslím dobrý, unikátní identifikátor,

00:01:30.082 --> 00:01:32.956
například "web-history".

00:01:32.956 --> 00:01:35.776
Dobře, pojďme zpět k odkazu.

00:01:35.776 --> 00:01:39.556
Teď řekneme prohlížeči,
aby šel na tenhle interní odkaz,

00:01:39.556 --> 00:01:41.797
musíme začít křížkem

00:01:41.797 --> 00:01:45.940
a napsat stejné id,
které jsme napsali níže.

00:01:46.150 --> 00:01:51.355
Tak a teď si zastavte tenhle návod
a zkuste kliknout na odkaz.

00:01:51.355 --> 00:01:56.387
Jen běžte, já počkám.
Klik-klik!

00:01:56.387 --> 00:01:59.575
Viděli jste, jak to sjelo dolů
do této sekce?

00:01:59.575 --> 00:02:01.208
Fungovalo to!

00:02:01.208 --> 00:02:02.877
A můžeme přidat ještě víc odkazů

00:02:02.877 --> 00:02:05.555
tím, že přidáme id atribut
na každé záhlaví.

00:02:05.555 --> 00:02:07.705
a uděláme tagy '',
které na ně odkazují.

00:02:07.711 --> 00:02:09.498
Ale to si zkuste sami.

00:02:09.498 --> 00:02:12.153
Hlavně si zapamatujte,
že ID musejí být unikátní,

00:02:12.153 --> 00:02:15.372
protože jinak prohlížeč
nebude vědět, kam má skočit.

00:02:15.372 --> 00:02:17.831
Takže je udělejte hezké a popisné.