HTML links

Už jsme se naučili hromadu HTML tagů.

Ale víte vlastně, co to HTML znamená?

HTML je zkratka pro hypertextový
značkovací jazyk.

Značkovací jazyk používá značky,
neboli tagy, k označení obsahu.

Ale co je to vlastně hypertext?

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

Byl to text, který byl spojen
s jiným textem,

na který se čtenář mohl ihned přesunout.

Tim Berners-Lee vynalezl HTML,

a ostatní součásti Internetu,
například HTTP,

jako způsob spojování
textu s jiným textem

kdekoliv na světě.

Jak spojujeme webové stránky s ostatními

v hypertextovém značkovacím jazyce?

Pomocí hyperlinku, samozřejmě!

Česky mu říkáme prostě odkaz.

Jak se tvoří odkaz v HTML?

Tady nastává problém.

Mysleli byste si, že použijete značku
'link' …

Ta je ale ve skutečnosti použita pro
jiné typy odkazů v HTML.

Místo toho používáme tag '',
kde 'a' znamená "anchor",

což je anglicky kotva.

To zakotví odkaz na stránce v dané oblasti

a propojí kotvu s jinou stránkou.

Víme, že pro vytvoření odkazu
musíme napsat tag,

ale musíme se také rozhodnout,
jaký bude text odkazu

a jaká bude adresa odkazu.

Pojďme udělat odkaz na stránku s dalšími
informacemi o vzniku Internetu.

Text odkazu napíšeme mezi
otevíracím a uzavíracím tagem .

Takže tam nechám kurzor a napíšu,

"Přečtěte si více o historii HTML".

Nyní vidíme, že tento text
vypadá jako odkaz,

ale zatím nikam nepřesměruje.
Musíme přidat adresu.

Nechceme ovšem adresu odkazu
zobrazit na stránce,

pouze potřebujeme, aby prohlížeč věděl,
co s tím.

Takže to dáme do atributu tagu .

Konkrétně atributu "href".
(pozn. číst jako há-ref)

Co samotné "href" znamená?

Dám vám nápovědu:
Už jste to "h" viděli hodně.

Znamená to "hyper"! Hyper-reference.

Nyní vložím dovnitř atributu adresu,
které se také říká URL.

Všimli jste si, že URL začíná protokolem
"http:"?

A hádejte co to "h" znamená?
Hyper!

Celé HTML je o hyper.

URL adresa specifikuje vše, co prohlížeč
potřebuje k nalezení webové stránky:

Protokol, který je použit,

na jaké je doméně,

a cesta ke stránce, která je
na nějakém serveru.

Jelikož to specifikuje vše,
nazýváme to "absolutní URL".

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

To řekne prohlížeči, aby zůstal
na stejné doméně,

a pouze v této doméně
našel jinou cestu.

Tomu říkáme "relativní URL".

Používáme je po celé Khan academy,
když odkazujeme mezi obsahem.

Na vašich stránkách se raději
držte absolutních URL,

tím nic nezkazíte.

Můžeme také prohlížeči říci,
kde má stránku otevřít:

do aktuálního okna, nebo do nového.

Aby otevřel prohlížeč odkaz v novém okně,

přidáme další atribut, 'target'.

target="_blank"

Nyní chci, aby jste stopnuli video a
vyzkoušeli kliknout na odkaz.

Nebojte se a zkuste to, počkám.
klik-klik!

Co se stalo?

Asi jste viděli varování o odkazu
generovaném uživatelskou stránkou.

A dále když kliknete na "OK",
otevře se odkaz.

S odkazy na stránkách
vytvořených na Khan Academy

zacházíme totiž opatrně.

Nechceme, aby si lidé mysleli,
že je odkazujeme

na stránky Khan Academy, a pak se dostali
na nebezpečné, neznámé stránky.

Takže každý zde udělaný odkaz
má toto varování.

A každý odkaz vyskočí do nového okna.

To znamená, že vlastně můžu odstranit
tento atribut target,

jelikož je o něj už postaráno.

Nebo to tu můžu nechat,

v případě že bych chtěla jednou
přesunout toto HTML z Khan Academy

a chci, aby se odkaz
otevřel v novém okně.

Kdy byste měli atribut target používat?

Obecně pokud odkaz směřuje
na jinou stránku na stejné doméně,

měla by se otevřít ve stejném okně.

A pokud směřujete na stránku jiné domény,
je dobré ji otevřít v novém okně.

Ještě vám chci ukázat jednu věc.

K odkazování nemusíme používat jen text.

K vytvoření odkazu můžeme
použít třeba i obrázek!

Zde máme obrázek,
na kterém je Tim Berners-Lee.

Tento kód vyjmu...

A vložím ho zde dovnitř tohoto odkazu.

No krása!

Nyní, pokud přejedu myší tento obrázek,

uvidím, že můj kurzor se
změní na ručičku,

a kliknutím se dostanu na stránku CERNu.

Ve skutečnosti můžete udělat
odkaz z celé stránky.

Celá by se podtrhla a vybarvila modře.

Ale to prosím nedělejte!
A odkazy vytvářejte s láskou.