WEBVTT

00:00:00.000 --> 00:00:02.843
Už jsme se naučili hromadu HTML tagů.

00:00:03.000 --> 00:00:04.800
Ale víte vlastně, co to HTML znamená?

00:00:04.850 --> 00:00:09.091
HTML je zkratka pro hypertextový
značkovací jazyk.

00:00:09.110 --> 00:00:14.177
Značkovací jazyk používá značky,
neboli tagy, k označení obsahu.

00:00:14.181 --> 00:00:16.860
Ale co je to vlastně hypertext?

00:00:16.869 --> 00:00:21.174
Je to fráze, která byla vynalezena
ještě před existencí Internetu, v šedesátých letech.

00:00:21.174 --> 00:00:23.823
Byl to text, který byl spojen
s jiným textem,

00:00:23.823 --> 00:00:26.263
na který se čtenář mohl ihned přesunout.

00:00:26.273 --> 00:00:29.720
Tim Berners-Lee vynalezl HTML,

00:00:29.720 --> 00:00:32.756
a ostatní součásti Internetu, 
například HTTP,

00:00:32.787 --> 00:00:34.912
jako způsob spojování
textu s jiným textem

00:00:34.912 --> 00:00:36.722
kdekoliv na světě.

00:00:36.751 --> 00:00:39.191
Jak spojujeme webové stránky s ostatními

00:00:39.191 --> 00:00:41.280
v hypertextovém značkovacím jazyce?

00:00:41.282 --> 00:00:43.451
Pomocí hyperlinku, samozřejmě!

00:00:43.451 --> 00:00:46.280
Česky mu říkáme prostě odkaz.

00:00:46.280 --> 00:00:48.599
Jak se tvoří odkaz v HTML?

NOTE Paragraph

00:00:48.636 --> 00:00:50.304
Tady nastává problém.

NOTE Paragraph

00:00:50.304 --> 00:00:52.770
Mysleli byste si, že použijete značku
'link' …

00:00:52.770 --> 00:00:57.633
Ta je ale ve skutečnosti použita pro 
jiné typy odkazů v HTML.

00:00:57.633 --> 00:01:01.612
Místo toho používáme tag '',
kde 'a' znamená "anchor",

00:01:01.612 --> 00:01:03.172
což je anglicky kotva.

00:01:03.172 --> 00:01:06.453
To zakotví odkaz na stránce v dané oblasti

00:01:06.453 --> 00:01:09.420
a propojí kotvu s jinou stránkou.

00:01:09.443 --> 00:01:11.989
Víme, že pro vytvoření odkazu
musíme napsat tag,

00:01:11.989 --> 00:01:14.621
ale musíme se také rozhodnout,
jaký bude text odkazu

00:01:14.621 --> 00:01:17.219
a jaká bude adresa odkazu.

00:01:17.233 --> 00:01:24.068
Pojďme udělat odkaz na stránku s dalšími 
informacemi o vzniku Internetu.

00:01:24.068 --> 00:01:29.506
Text odkazu napíšeme mezi
otevíracím a uzavíracím tagem .

00:01:29.599 --> 00:01:31.900
Takže tam nechám kurzor a napíšu,

00:01:31.900 --> 00:01:36.610
"Přečtěte si více o historii HTML".

00:01:36.610 --> 00:01:41.017
Nyní vidíme, že tento text
vypadá jako odkaz,

00:01:41.061 --> 00:01:44.317
ale zatím nikam nepřesměruje.
Musíme přidat adresu.

00:01:44.347 --> 00:01:47.480
Nechceme ovšem adresu odkazu
zobrazit na stránce,

00:01:47.480 --> 00:01:49.937
pouze potřebujeme, aby prohlížeč věděl,
co s tím.

00:01:49.990 --> 00:01:53.040
Takže to dáme do atributu tagu .

00:01:53.088 --> 00:01:56.942
Konkrétně atributu "href".
(pozn. číst jako há-ref)

00:01:56.985 --> 00:01:59.749
Co samotné "href" znamená?

00:01:59.769 --> 00:02:03.264
Dám vám nápovědu:
Už jste to "h" viděli hodně.

00:02:03.283 --> 00:02:06.124
Znamená to "hyper"! Hyper-reference.

00:02:06.124 --> 00:02:11.966
Nyní vložím dovnitř atributu adresu,
které se také říká URL.

00:02:12.036 --> 00:02:15.940
Všimli jste si, že URL začíná protokolem
"http:"?

00:02:16.051 --> 00:02:19.044
A hádejte co to "h" znamená?
Hyper!

00:02:19.084 --> 00:02:21.483
Celé HTML je o hyper.

00:02:21.553 --> 00:02:25.664
URL adresa specifikuje vše, co prohlížeč
potřebuje k nalezení webové stránky:

00:02:25.724 --> 00:02:27.965
Protokol, který je použit,

00:02:28.035 --> 00:02:30.357
na jaké je doméně,

00:02:30.457 --> 00:02:34.265
a cesta ke stránce, která je
na nějakém serveru.

00:02:34.294 --> 00:02:38.579
Jelikož to specifikuje vše,
nazýváme to "absolutní URL".

00:02:38.622 --> 00:02:43.499
Na některých stránkách můžete vidět URL
adresy, které začínají lomítkem a cestou.

00:02:43.562 --> 00:02:46.179
To řekne prohlížeči, aby zůstal
na stejné doméně,

00:02:46.179 --> 00:02:48.634
a pouze v této doméně
našel jinou cestu.

00:02:48.645 --> 00:02:50.631
Tomu říkáme "relativní URL".

00:02:50.682 --> 00:02:54.054
Používáme je po celé Khan academy,
když odkazujeme mezi obsahem.

00:02:54.136 --> 00:02:57.623
Na vašich stránkách se raději
držte absolutních URL,

00:02:57.623 --> 00:02:59.288
tím nic nezkazíte.

00:02:59.321 --> 00:03:02.146
Můžeme také prohlížeči říci,
kde má stránku otevřít:

00:03:02.146 --> 00:03:04.728
do aktuálního okna, nebo do nového.

00:03:04.769 --> 00:03:07.061
Aby otevřel prohlížeč odkaz v novém okně,

00:03:07.061 --> 00:03:10.748
přidáme další atribut, 'target'.

00:03:10.796 --> 00:03:15.258
target="_blank"

00:03:15.288 --> 00:03:19.406
Nyní chci, aby jste stopnuli video a
vyzkoušeli kliknout na odkaz.

00:03:19.444 --> 00:03:23.373
Nebojte se a zkuste to, počkám.
klik-klik!

00:03:23.393 --> 00:03:24.372
Co se stalo?

00:03:24.482 --> 00:03:28.244
Asi jste viděli varování o odkazu
generovaném uživatelskou stránkou.

00:03:28.244 --> 00:03:30.625
A dále když kliknete na "OK",
otevře se odkaz.

00:03:30.676 --> 00:03:33.122
S odkazy na stránkách
vytvořených na Khan Academy


00:03:33.122 --> 00:03:34.395
zacházíme totiž opatrně.

00:03:34.423 --> 00:03:37.797
Nechceme, aby si lidé mysleli,
že je odkazujeme

00:03:37.797 --> 00:03:41.054
na stránky Khan Academy, a pak se dostali
na nebezpečné, neznámé stránky.

00:03:41.066 --> 00:03:43.992
Takže každý zde udělaný odkaz 
má toto varování.

00:03:43.992 --> 00:03:46.163
A každý odkaz vyskočí do nového okna.

00:03:46.300 --> 00:03:50.223
To znamená, že vlastně můžu odstranit
tento atribut target,

00:03:50.223 --> 00:03:53.048
jelikož je o něj už postaráno.

00:03:53.088 --> 00:03:54.420
Nebo to tu můžu nechat,

00:03:54.420 --> 00:03:57.764
v případě že bych chtěla jednou 
přesunout toto HTML z Khan Academy

00:03:57.764 --> 00:04:00.840
a chci, aby se odkaz
otevřel v novém okně.

00:04:00.870 --> 00:04:02.723
Kdy byste měli atribut target používat?

00:04:02.783 --> 00:04:06.302
Obecně pokud odkaz směřuje
na jinou stránku na stejné doméně,

00:04:06.302 --> 00:04:08.023
měla by se otevřít ve stejném okně.

00:04:08.023 --> 00:04:12.179
A pokud směřujete na stránku jiné domény,
je dobré ji otevřít v novém okně.

00:04:12.551 --> 00:04:16.649
Ještě vám chci ukázat jednu věc.

00:04:16.689 --> 00:04:19.053
K odkazování nemusíme používat jen text.

00:04:19.053 --> 00:04:22.077
K vytvoření odkazu můžeme
použít třeba i obrázek!

00:04:22.077 --> 00:04:26.815
Zde máme obrázek,
na kterém je Tim Berners-Lee.

00:04:26.867 --> 00:04:30.454
Tento kód vyjmu...

00:04:30.464 --> 00:04:34.067
A vložím ho zde dovnitř tohoto odkazu.

00:04:34.094 --> 00:04:36.068
No krása!

00:04:36.068 --> 00:04:38.958
Nyní, pokud přejedu myší tento obrázek,

00:04:38.958 --> 00:04:41.309
uvidím, že můj kurzor se
změní na ručičku,

00:04:41.309 --> 00:04:44.379
a kliknutím se dostanu na stránku CERNu.

00:04:44.379 --> 00:04:46.948
Ve skutečnosti můžete udělat
odkaz z celé stránky.

00:04:46.948 --> 00:04:49.867
Celá by se podtrhla a vybarvila modře.

00:04:49.867 --> 00:04:56.681
Ale to prosím nedělejte!
A odkazy vytvářejte s láskou.