-
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.