Kotva na webe je veľmi užitočná, ak chcete, aby články na vašom webe mali pohodlný prechod medzi položkami zoznamu. Otočia stránku na požadované miesto alebo otvoria požadovanú stránku a pomôžu používateľovi rýchlo nájsť potrebné informácie.
Ak píšete svoje vlastné webové stránky, mali by ste premýšľať o tom, ako uľahčiť ich navigáciu. Aby používateľ nemusel hľadať informácie, ktoré potrebuje, na všetkých stránkach vášho webu, je najlepšie použiť techniku „anchor“. Vytvorí odkaz na akékoľvek informácie alebo dokument kdekoľvek na vašom webe.
Teória
Na vytvorenie kotvy potrebujete dva prvky:
- Časť kódu, ktorá označuje odkaz na našu kotvu, zostala v inej časti stránky.
- Akákoľvek časť kódu, v ktorej je možné určiť identifikátor, je našou kotvou.
Najprv musíte vytvoriť prvú časť kotvy - odkaz na ňu. Kotvový odkaz má dve časti: odkaz na stránku a kotviaci odkaz.
- Vytvorte značku „a“alebo akúkoľvek inú značku, ktorá podporuje atribút „href“
- V tejto značke vytvorte atribút "href"
- V hodnote atribútu zadajte odkaz na webovú stránku.
- Za odkazom označte odkaz na kotvu pomocou symbolu „#“a ľubovoľného názvu pre kotvu (spolu napísaný, napríklad: „#anchor“)
Ak preskočíte bod 3 a neurčíte odkaz na webovú stránku, bude sa kotva hľadať na aktuálnej stránke. To znamená, že ak chcete vytvoriť odkaz na kotvu umiestnenú na tej istej stránke, môžete vynechať odkaz na samotnú stránku.
Zostáva vytvoriť druhú časť kotvy - identifikátor. Odkazuje na ľubovoľnú značku v kóde webu, ktorá podporuje atribút id. Na vytvorenie kotvy potrebujete:
- V požadovanej značke vytvorte atribút „id“.
- V atribúte „id“zadajte hodnotu názvu kotvy, ktorá bola zadaná v predchádzajúcom kroku. (príklad:)
Po týchto dvoch krokoch sa na webe zobrazí odkaz, ktorý vás zavedie na zadanú kotvu.
Prax
Uvažujme, ako vytvoriť kotvu pomocou konkrétneho príkladu.
Máme jednoduchú stránku, ako je táto:
V hornej a dolnej časti stránky máme text, veľa značiek „br“, ktoré vytvárajú priestor medzi textami. Musíme vytvoriť kotvu, aby sme sa mohli rýchlo pozrieť na text v dolnej časti.
Za týmto účelom vytvorte novú značku - „a“za nápisom „text v hornej časti“. V ňom vytvoríme atribút „href“. Aby bola kotva pohodlnejšia, do odkazu si napíšeme „dole“.
Teraz v atribúte zadáme hodnotu „#yakor“- bude to odkaz na názov kotvy.
Prvá časť kotvy - odkaz na ňu - je pripravená. Teraz zostáva len vytvoriť samotnú kotvu. Prejdeme do požadovanej časti stránky. V tomto prípade ide o „text v dolnej časti“. Pretože ide o jednoduchý text bez značky, musíme ho vytvoriť. Za týmto účelom vložte text do „odseku“- štítku „p“.
V tejto značke vytvoríme atribút „id“a zadáme do neho hodnotu „yakor“. Hodnota „yakor“sa zhoduje s názvom kotvy, ktorý bol uvedený v odkaze.
Teraz naša kotva funguje tak, ako má.
