Hypertextové odkazy jsou podstatou internetu. Zajišťují propojení jednotlivých stránek. Umožňují pohyb v rámci jedné stránky a mohou vyvolávat různé akce. V tomto odstavci se dozvíte všechny informace potřebné k vytváření propojení. Mezi užitečné dovednosti patří zejména nastavení odkazu obrázku.
Odkaz na stránku
Tag pro odkazy je velmi jednoduchý: <a>. Do parametru href zadávejte cestu k cílovému souboru. Syntaxe pak vypadá následovně:
<a href=“stranka.htm“>odkaz na stránku</a>
Text uvedený mezi značkami <a> a </a> se zobrazuje uživateli ve výchozí podobě, kterou je modrý, podtržený text. Při najetí myší na odkaz se kurzor myši mění na symbol ruky. Následným kliknutím otevřete soubor zadaný v parametru HREF. Pro zadání cesty platí stejná pravidla jako u obrázků a i odkaz může mít svůj popisek.
<a href=“stranka.htm“ title=“popiska“>odkaz na stránku</a>
Popis odkazu je užitečný pro vyhledávání. Ukazujete tím robotům obsah cílové stránky. Tím se procházení stránek a struktura celého webu zjednoduší.
Pomocí dalších parametrů pro odkazy lze nastavit způsob otevření cílového souboru. Nastavte parametr TARGET, který nabývá hodnot _top, _blank a „název“.
<a href=“stranka.htm“ target=“_top“>odkaz na stránku </a>
stránka se otevře ve stejném okně<a href=“stranka.htm“ target=“_blank“>odkaz na stránku </a>
stránka se otevře v novém okně<a href=“stranka.htm“ target=“nazev“>odkaz na stránku </a>
definovatelné, pouze pokud používáte rámy (frames)
Pokud odkazujete na jinou webovou stránku, nesmíte zapomenout vyplnit kompletní adresu. To znamená včetně protokolu (http://) na začátku. V opačném případě bude HTML předpokládat, že cílový soubor je umístěn v rámci vašich stránek.
Odkaz na soubor
Uvědomte si, že mezi html souborem a ostatními formáty není v kódu žádný rozdíl. Prohlížeče obecně zobrazují pouze HTML soubory. Všechny ostatní nabídnou ke stažení. Odkaz na soubor vytvoříte úplně stejně, jako odkaz na jinou webovou stránku. Do parametru HREF zadáte cestu k danému souboru.
<a href=“soubor.zip“>odkaz na soubor </a>
Prohlížeč umí zobrazovat i jiné soubory než HTML. Mezi ně patří třeba obrázky, pokud klepnete na odkaz vedoucí na obrázek, místo stáhnutí se Vám zobrazí. Pokud si přejete soubor stáhnout, klepněte pravým tlačítkem myši na odkaz a z kontextové nabídky a zvolte Uložit cíl jako.
Kotvy
Kotvy jsou druhy odkazů, které směřují na konkrétní místa ve stejné, případně jiné stránce. Užitečné jsou zejména, pokud pracujete s dlouhým dokumentem. Typickým příkladem je tlačítko TOP (Nahoru), obvykle umístěné pod článkem, které Vás automaticky vrátí do horní části.
<a href=“#nazevkotvy“>Odkaz</a>
<a name=“nazevkotvy“>Kotva</a>
Druhý řádek vytváří kotvu, tedy místo, na které odkazujeme. První část kódu je samotný odkaz, který uživatele přepne na místo, kde je obsažený prvek (kotva) se stejným jménem.
<a href=“stranka.htm#nazevkotvy“>Odkaz</a>
<a name=“nazevkotvy“>Kotva</a>
Tento příklad funguje podobně. Rozdíl je v umístění kotvy. První řádek je odkaz, který opět směřuje na kotvu. Ta je ale tentokrát umístěná v jiném HTML dokumentu (stranka.html).
Druhou možností, jak definovat kotvy, je jednoznačná identifikace elementu. Využít můžete parametr ID. ID můžete přiřadit jakémukoliv prvku na stránce.
<div id=’komentar535′>
nějaký komentář
</div>
Identifikátor musí být unikátní pro každou jednu stránku. Nesmí se ani opakovat pro více prvků. Využití ID je velice časté, nejen v případě kotev. Často se s ním budete setkávat i při definici kaskádových stylů.
Odkaz na element s ID vytvoříte stejným způsobem jako u předchozích kotev.
<a href=’#komentar535′>odkaz</a>
Této „kotvě“ se obvykle říká fragment. Na rozdíl od klasické kotvy neukazuje na jedno místo na stránce, ale definuje celý útržek stránky. Oba způsoby fungují stejně, nicméně používání fragmentů zlepšuje logickou strukturu stránky.
Existuje jedna speciální kotva, kterou nemusíte definovat. Funguje vždy automaticky a slouží k přesunu na horní okraj stránky. Jedná se o kotvu #top. Pokud je stránka dlouhá, doporučuji umístit odkaz na konec textu. Uživatel nebude muset rolovat, jestliže se bude chtít vrátit na začátek stránky.
<a href=“#top“>Nahoru</a>
Obrázek jako odkaz
Připojit obrázku odkaz je jednoduché. Do tagu <a> vložte místo textu kód pro obrázek. Obrázek je možné vložit pomocí tagu <img>. Aktivní obrázky mají automaticky modrý rámeček označující, že se jedná právě o aktivní prvek. Pokud ho budete chtít vypnout, nastavte parametr BORDER na hodnotu 0.
<a href=“stranka.htm“ > <img src=“obrazek.jpg“ border=“0″> </a>
Formátování odkazů
Odkazy se dají formátovat v HTML stejně jako normální text. Tedy pomocí tagu <font>.
<font color=“red“ size=“5″ face=“arial“>
<a href=“stranka.htm“>
<b>odkaz na stránku</b>
</a>
</font>
Tento odkaz bude tučným písmem, arialem a velikostí písma 5. Přesto bude stále modrou barvou. Je to standardní nastavení, důležité pro odlišení od ostatního textu. Mnohem lepší je používat formátování pomocí CSS. V kaskádových stylech můžete nastavit mnohem více vlastností než pouhým HTML kódem.
Preferovaný způsob je tedy:
<a href=“stranka.htm“ style=“ color:red; font-size:150%; font-family:arial“>
<b>odkaz na stránku</b>
</a>
Případně můžete použít zápis CSS v hlavičce stránky, nebo v externím souboru.