Kotva na webu je velmi užitečná, pokud chcete, aby články na vašem webu měly pohodlný přechod mezi položkami seznamu. Otočí stránku na požadované místo nebo otevřou požadovanou stránku a pomohou uživateli rychle najít informace, které potřebuje.
Pokud píšete svůj vlastní web, měli byste přemýšlet o tom, jak usnadnit navigaci na vašem webu. Aby uživatel nemusel hledat informace, které potřebuje, na všech stránkách vašeho webu, je nejlepší použít techniku „kotvy“. Vytvoří odkaz na jakékoli informace nebo dokument kdekoli na vašem webu.
Teorie
K vytvoření kotvy potřebujete dva prvky:
- Část kódu, která označuje odkaz na naši kotvu, zůstala v jiné části webu.
- Jakákoli část kódu, ve které lze zadat identifikátor, je naší kotvou.
Nejprve musíte vytvořit první část kotvy - odkaz na ni. Kotevní odkaz má dvě části: odkaz na stránku a kotevní odkaz.
- Vytvořte značku „a“nebo jakoukoli jinou značku, která podporuje atribut „href“
- V této značce vytvořte atribut „href“
- V hodnotě atributu zadejte odkaz na webovou stránku.
- Za odkazem označte odkaz na kotvu pomocí symbolu „#“a libovolného názvu pro kotvu (psaný společně, například: „#anchor“)
Pokud přeskočíte bod 3 a nezadáte odkaz na webovou stránku, bude se na aktuální stránce hledat kotva. To znamená, že pokud chcete vytvořit odkaz na kotvu umístěnou na stejné stránce, můžete vynechat odkaz na samotnou stránku.
Zbývá vytvořit druhou část kotvy - identifikátor. Odkazuje na jakoukoli značku v kódu webu, která podporuje atribut id. K vytvoření kotvy potřebujete:
- V požadované značce vytvořte atribut „id“.
- V atributu „id“zadejte hodnotu názvu kotvy, která byla zadána v předchozím kroku. (příklad:)
Po těchto dvou krocích se na webu zobrazí odkaz, který vás přenese na zadanou kotvu.
Praxe
Zvažme, jak vytvořit kotvu pomocí konkrétního příkladu.
Máme jednoduchou stránku, jako je tato:
V horní a dolní části stránky máme text, spoustu značek „br“, které vytvářejí mezeru mezi texty. Musíme vytvořit kotvu, abychom se mohli rychle podívat na text dole.
Chcete-li to provést, vytvořte novou značku - „a“za nápisem „text nahoře“. V něm vytvoříme atribut „href“. Aby byla kotva pohodlnější, do odkazu napíšeme „dolů“.
Nyní v atributu určíme hodnotu „#yakor“- bude to odkaz na název kotvy.
První část kotvy - odkaz na ni - je připraven. Nyní zbývá jen vytvořit samotnou kotvu. Přejdeme do požadované části stránky. V tomto případě se jedná o „text dole“. Jelikož se jedná o jednoduchý text bez značky, musíme jej vytvořit. Za tímto účelem uzavřete text do odstavce - značky „p“.
V této značce vytvoříme atribut „id“a zadáme do něj hodnotu „yakor“. Hodnota „yakor“odpovídá názvu kotvy, který byl zadán v odkazu.
Nyní naše kotva funguje tak, jak má.
