HTML/Odkazy

Z Wikiknih

Odkazy jsou jedním ze základních kamenů hypertextu. Celý je na nich založen. Dělají internet internetem. Celý je založený na odkazování (I když původně odkaz nebyl znám). Někdy se používá označení link přejaté z angličtiny.

Tag <a>[editovat | editovat zdroj]

Pomocí tagu <a> se tvoří.

<a href="http://www.example.org" title="Příklad" target="_blank">Example.org</a>

Jeho strukturu jsme si popsali již v Lekci 1, tudíž ji tu už nebudu znovu popisovat. Zastavíme se pouze u relativní a absolutní adresy.

Atribut HREF[editovat | editovat zdroj]

Absolutní adresa[editovat | editovat zdroj]

To je taková adresa, která je vidět v prohlížeči na řádce s adresou. Je to tedy plná adresa. Musí se používat při odkazech na cizí stránky. V použitém příkladu zdrojového kódu ji najdete jako hodnotu u atributy href.

Relativní adresa[editovat | editovat zdroj]

Relativní adresa je pouze část adresy. Ta se vyplatí používat na svých vlastních stránkách. Jednak je kratší a uspoří pár bajtů a navíc je to užitečné pokud stránku přesunete na jinou adresu (doménu).

<a href="druha_stranka.html">Moje druhá stránka</a>

Jak to tedy funguje? Pokud máte stránku s uvedeným odkazem např. na http://www.example.org v adresáři technika, tak odkaz na stránce bude odkazovat na http://www.example.org/technika/druha_stranka.html.

Pokud byste chtěli odkázat o adresář výše, tak byste museli použít toto:

<a href="../druha_stranka.html">Moje druhá stránka</a>

Tudíž dvě tečky s lomítkem (../) způsobí, že odkaz bude odkazovat o adresář výše na http://www.example.org/druha_stranka.html . V adrese by se neměly užívat žádné mezery (ty je potřeba nahradit pomocí %20) a ani žádná diakritika.

Protokoly a pseudoprotokoly[editovat | editovat zdroj]

Další možností, pokud nepoužijete standardní internetový protokol http://, přes který normálně běží webové stránky, je použití některého z jiných protokolů.

https://[editovat | editovat zdroj]

Zabezpečený internetový protokol.

ftp://[editovat | editovat zdroj]

Slouží pro přenos souborů.

file:///[editovat | editovat zdroj]

Slouží pro zobrazení souborů z disků počítače. Např.: file:///C:/Dokumenty/stranka.htm.

about:blank[editovat | editovat zdroj]

Slouží pro otevření prázdného okna.

mailto:[editovat | editovat zdroj]

Pseudoprotokol pro posílání e-mailů po kliknutí na něj.

<a href="mailto:uzivatel@wiki.org">mail</a>

Po kliknutí na odkaz z uvedeného příkladu se otevře e-mailový klient s oknem editoru nové zprávy pro uzivatel@wiki.org.

skype:[editovat | editovat zdroj]

Pseudoprotokol sloužící pro vytočení kontaktu ze skype.

smsto:, mmsto: call:[editovat | editovat zdroj]

Pseudoprotokoly, s kterými se můžete setkat na mobilních telefonech. Slouží k poslání SMS, MMS, volání na uvedené číslo.

A další...[editovat | editovat zdroj]

Tímto výčet rozhodně nekončí. Existuje ještě daleko více (pseudo)protokolů. Namátkou můžeme jmenovat NNTP, IRC, Telnet nebo například odkazy pro torrenty nebo DC.

Atribut TITLE[editovat | editovat zdroj]

Nyní se vrátím k atributu title. Text v něm obsažený se nedá formátovat žádným formátováním používaným v HTML a ani žádným jiným. Pořád to bude text v žluté bublině nad odkazem. Dokonce se nedá v něm ani zalomit řádek.

Atribut TARGET[editovat | editovat zdroj]

Teď se vrátím k atributu target. Říká v okně s jakým názvem se otevře nová stránka, což se hodí zejména při práci s rámy. Některá jména oken prohlížeče jsou již rezervované pro určité akce a to platí pro:

_blank
otevře nové okno
_self
otevře stránku ve stejném rámu
_parent
otevře stránku v nadřezeném rámu
_top
otevře stránku v celém okně

Obrázkový odkaz[editovat | editovat zdroj]

Udělá se tak, že se tag img obalí párovým tagem a. Vizte příklad.

<a href="stranka.html"><img alt="alternativní text" src="obrazek.jpg"></a>

Ovšem při takovémto jednoduchém použití (bez CSS) se kolem obrázku udělá modrý rámeček. Tento nežádoucí prvek je možné odstranit i bez CSS stylů jednoduchým doplněním atributu border do tagu img.

<a href="stranka.html"><img alt="alternativní text" src="obrazek.jpg" border="0"></a>

Záložky[editovat | editovat zdroj]

Pomocí odkazů se dají vytvářet i tzv. záložky. To jsou označená místo v textu, na které potom může odkazovat odkaz ve speciálním tvaru, který potom vede na přesně určené místo.

<a href="#zalozka">Záložka</a>
<a name="zalozka">Zazáložkovaný text</a>
Normální text

Syntaxe[editovat | editovat zdroj]

Pro označení záložky se užívá <a name="jmeno_zalozky">text, který chceme zazáložkovat</a>. V názvech záložky se nesmí vyskytovat opět žádná mezera a ani diakritika.

Na záložky odkazujeme pomocí <a href="#jmeno_zalozky">odkaz na záložku</a>.

Využití[editovat | editovat zdroj]

Využívá se to např. při rozsáhlém textu, kdy se po jeho přečtení uživatel dostane hodně dolů a k menu by musel rolovat opět dost nahoru. Tak se použije záložka, která uživatele dostane bez problémů nahoru.

Další možností využití je, jako tady na wikipedii, u delších textů - rozčlenění na kapitoly, na které potom odkazují odkazy s adrsou #jmeno_zalozky.

Modernější zápis[editovat | editovat zdroj]

<p id="zalozka">Označený (zazáložkovaný) text odstavce.</p>

Modernějším zápisem je použití identifikátoru id, který může být přiřazen jakémukoliv elementu v HTML.

Dále[editovat | editovat zdroj]

◄ HTML/Rozdíl mezi HTML a XHTML Odkazy HTML/Úvod do CSS ►