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.