Záložky

též kotvy

Dva kroky - Vložení záložky - Vložení odkazu - Příklad - Záludnosti - Výhody - Kombinace - Historie - Mechanismus funkčnosti - Zvýraznění záložky

Určitě jste se při broušení Internetem setkali s podivnými odkazy, které nepřepínaly do jiného textu, ale jenom trochu odrolovaly text někam dolů. Takovým odkazům se říká odkazy na záložky nebo též kotvy(anglicky nejčastěji anchors, v češtině obecně přijaté pojmenování neexistuje).

Záložky jsou docela užitečná věcička. V následujících odstavcích se pokusím popsat, jak se to dá udělat, jak to používat a čeho se vyvarovat. Také budu pro ilustraci používat v textu záložky více, než je obvyklé.

Předpokládám, že znáte použití odkazů v HTML.

Dva kroky

K tomu, abych na stránce měl odkaz na záložku, musím udělat dvě věci.

  1. Vložit záložku do textu a pojmenovat ji.
  2. Udělat odkaz, který bude na záložku mířit.

Vložení záložky

V HTML kódu vypadá záložka následovně:

<a name="jmeno_zalozky"></a>

Na první pohled to vypadá jako odkaz -- áčko na začátku, ale není to odkaz. Liší se to ve dvou věcech. Zaprvé odkaz neobsahuje cíl (atribut href), zadruhé je prázdný = neobsahuje žádný text (tedy, přesněji: může obsahovat, ale nemusí a pokud obsahuje, nemá to žádný význam, pokud vím). V zobrazení textu na stránce se tedy záložka nijak neprojeví. Jediný význam je tento:

Text, který bude v záložce (nebo bezprostředně za ní), se po vyvolání záložky (odkazem) přesune na začátek obrazovky.

Důležitý je u záložky atribut name (jméno). Můžete také zadat atribut id, měl by funguvat stejně jako name. Text záložky je dobré zadávat srozumitelně a logicky (ale bez mezer a diakritiky).

Modernější vložení záložky

Všechny prohlížeče používané v roce 2005 už umějí skočit i na záložku zadanou modernějším způsobem, totiž přes atribut id. Navíc nemusí být v tagu <a>. Například:

<h2 id="jmeno_zalozky">Nadpis</h2>

nebo třeba

<span id="ukazka">nějaká ukázka</span>

Odkazování na ídéčko má skvělé využití v případech, kdy chcete odkázat doprostřed nějakého cizího dokumentu, ale v tom cizím dokumentu nenajdete na patřičném místě žádnou záložku zadanou přes <a name="...">. Je pak ještě určitá šance, že tam najdete něco, co má ID.

Co z toho tedy použít?

Je to jedno, ale raději doporučuji vkládat záložky přes id. Takže např.:

<p id="kocicka">Odstavec o kočičce...</p>

Vložení odkazu na záložku

Teď chci udělat odkaz, který uživatele odroluje tam, kde už mám umístěnou záložku.

V kódu vypadá odkaz takhle:

<a href="#jmeno_zalozky">text odkazu</a>.

Zkušení autoři poznávají klasický odkaz (áčko na začátku + atribut href). Pouze v atributu href se na začátku vyskytuje onen magický křížek #. Křížek prostě znamená, že odkaz nevede na soubor, ale na záložku. Nyní je také jasné, proč bylo tak důležité jméno záložky (to je to slovo za křížkem).

(Pokud neumíte napsat znak #, tak na české klávesnici se dělá držením pravého altu a zmáčknutím klávesy X. Na anglické klávesnici je to trojka se shiftem.)

Příklad

Na začátku této stránky je vložena záložka charakterizovaná tímto kódem:

<h1 id="zacatek">...

Následující odkaz má tento kód:

<a href="#zacatek">Zkuste to!</a>

Po kliknutí na něj byste se měli přepnout na začátek stránky (čili na tu záložku). Zkuste to!

Záludnosti

S používáním záložek jsou spojeny některé problémy.

Výhody

Záložky významně usnadňují orientaci v delších textech. Je dobré dát na začátek každého takového textu řádku s názvy kapitol nebo odstavců, které jsou aktivní. Když mám čas a náladu, tak to dělám. Mám předdefinované, že se mi budou zobrazovat kurzivou (pomocí CSS a třídy "zalozka").

Google od roku 2009 umí přímo ve snippetu odkazu vypsat důležité záložky, které najde na stránce.

Wikipedia hodně používá na začátku všech delších textů obsah realizovaný záložkami namířené na nadpisy.

Mnoho autorů používá odkazů "Na začátek stránky". Hodí se to, občas. Já to nedělám, protože si myslím, že čtenáři nejsou tak tupí a umějí si tam odrolovat sami (třeba klávesou Home).

Používáte-li na tvorbu stránek Word, záložky a odkazy na ně se dobře převedou. Stejně tak automatické obsahy (jen místo čísla stránek mají hvězdičku s odkazem).

Kombinace

Málo se to používá, ale dá se udělat, aby normální odkaz byl zároveň záložkou. Prostě se do odkazu přidá atribut name (a pro formu i id):

<a href="nekam.htm" id="jmeno_zalozky">Textodkazu</a>

Nebo se dá nastavit odkaz na záložku na jiné stránce. Taková stránka se po zavedení odroluje na pozici záložky:

<a href="nekam.htm#jmeno_tamni_zalozky">text odkazu</a>

To se používá mnohem častěji.

Problém s PHP

Nevím proč, ale výše uvedený zápis nefunguje zcela spolehlivě s php stránkami. Např. odkaz

<a href="index.php#zalozka">text odkazu</a>

někdy odrolování způsobí a jindy ne. Odroluje to tehdy, když bude v souboru index.php záložka <a name="zalozka"></a> uvedena jako první v obsahu buňky v nějaké tabulce, tzn. hned za úvodním tagem <td>. Jakmile mezi <td> a záložku přijde nějaký text, rolovat to nebude (zjistil Marek Knapp, děkuju). Možná to tak funguje i s jinými tagy než <td>, nevím.

Historie

To, že se záložka i odkaz zadává stejným tagem (totiž áčkem) je dáno historickým vývojem. V pravěkém HTML (počátek devadesátých let dvacátého století našeho letopočtu) totiž existovalo velice málo znaků a kodifikátoři se zdráhali vytvářet zbytečně nové. Takže historicky máme pro dvě úplně rozdílné věci jeden tag <a>. Ale tuhle dvojakost odstraňuje vkládání záložek pře id.

Mechanismus funkčnosti

Trocha teorie, můžete přeskočit.

Zatím jsem psal, že stránka "odroluje". Ve skutečnosti je odrolování jenom vedlejší příznak trochu složitějšího jevu. Prohlížeč kliknutí na odkaz chápe jako přechod na novou adresu. Tato adresa se načte do adresy prohlížeče.

Pokud odkaz vede na adresu, která začíná znakem #, tak se vezme aktuální adresa stránky a pouze se za ni doplní znak # a jméno záložky. Vznikne tedy třeba takováto adresa:

http://www.jakpsatweb.cz/zalozky.html#mechanismus

(kde #mechanismus je příklad názvu záložky).

Co s takovou adresou prohlížeč udělá? Prostě vezme všechno, co je před znakem # , vezme to jako adresu a přejde na ni (v případě, že na ni už jenom je, tak stránku načte z keše). Potom vezme všechno, co je za znakem #, pochopí to jako jméno záložky a hledá ve zdroji stránky prvek, který má nastavenou hodnotu parametru id (nebo name) na jméno záložky. Pokud to najde, tak na dané místo odroluje.

Zvýraznění záložky

Když někdo proklikne na odkaz, který odroluje do poloviny stránky, tak občas neví, kde je. V takovém případě se hodí grafické zvýraznění, aby poznal, čeho si má všimnout.

V CSS existuje nová pseudotřída :target. Když se navěsí na prvek, který je použit pro záložku, tak se pomocí této pseudotřídy dá prvek vybrat a formátovat. To je trochu kostrbatě řečeno, lepší bude příklad. V hlavičce dokumentu bude styl a v textu potom odstavec h2 s nastaveným id.

<style>
h2:target {background-color: yellow;}
</style>
...
<a href="#zalozka">odkaz na záložku</a>
...
<h2 id="zalozka">Nějaký nadpis</h2>
 

Když se pak klikne na odkaz, v URL se na konci objeví #zalozka. To je signál pro stránku, že se má jednak odrolovat na prvek s id zalozka. Za druhé styl projde dokument, jestli nějaký prvek h2 náhodou nemá nastavené id stejné, jako je hodnota záložky v URL. Pokud ano, tak tento prvek zformátuje (konkrétně mu nastaví žluté pozadí). Zkuste odkaz na živý příklad. Funguje to jenom v nových prohlížečích (po roce 2010) a v Internet Exploreru 9 to vyžaduje striktní doctype.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB

 

 

 

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy Prvky stránek Tvorba webu

 

Jak psát web píše Yuhů, Dušan Janovský. Kontakt. Poslední aktualizace 04. května 2014.