Jak ukotvit HTML. HTML kotva na stránce

Internet se již dlouho stal nedílnou součástí každodenního života. Lidé rádi navštěvují různé weby, aby si mohli přečíst zprávy, sdílet fotografie, strávit nějaký čas sledováním zábavných videí nebo nakupováním.

Navzdory skutečnosti, že se blíží éra mobilních technologií a aplikací, stále se zlepšují techniky vytváření krásných webových stránek se zajímavostí. Málokdo si uvědomuje, co je skryto za zákulisí svého oblíbeného prohlížeče a co se stane, když na webu plati na nákupy s kreditními kartami. Ve skutečnosti je však za tím účelem tisíce řádků kódu, které byly v průběhu let vyvíjeny a vylepšovány, aby zajistily co nejpříjemnější a nejpříjemnější zkušenost s použitím webové služby. HTML kotva, hypertextový odkaz, značení, tituly - tyto a mnohé další koncepty budou dále popsány v tomto článku.

Základ webové stránky

Aby bylo možné vytvářet webové stránky a stránky na internetu, které by mohly být otevřeny a vypadat stejně v desítkách různých prohlížečů na několika platformách najednou, bylo nutné pro tento druh dokumentů vytvořit jednu specifikaci. Tato specifikace byla HTML (z anglického jazyka HyperText Markup Language).
Přeloženo znamená "hypertextový značkovací jazyk". A tento termín popisuje svůj účel zcela přesně. Struktura dokumentu HTML nepopisuje obsah samotné webové stránky, ale pouze "označuje" různé části a poskytuje jim určité atributy nebo vlastnosti. Tato značka umožňuje, aby dokument vypadal stejně tak z prohlížeče do prohlížeče a je také klíčem k aktuálním protokolům přenosu dat na globálním webu - HTTP a HTTPS.

Struktura dokumentu HTML

Základem jakéhokoli dokumentu HTML je sudý počet značek. Jedná se o speciální poznámky, které obsah obsahují určité vlastnosti. Klíčovým znakem značek je to, že musí být umístěny ve dvojicích - první značka je "otevírací" a "zavírání" musí vždy následovat.

Prohlížeč tedy přesně ví, jaké jsou atributy uvedené značkou. Značka však může být prázdná (neobsahuje žádný obsah uvnitř). Příkladem tohoto prvku je nový prvek. Štítky, které neobsahují žádný text ani jiná data, není nutné zavírat. Značky mohou být použity k tomu, aby texty poskytly určitou barvu nebo styl, nebo aby do dokumentu vložily speciální prvky (tabulky, mediální soubory, odkazy).

HTML kotvení a odkazy na dokumenty

Aby návštěvníci stránek mohli navigovat mezi různými stránkami nebo na jedné stránce, můžete použít odkazy. Pro pohyb v rámci jednoho webu nebo několika hypertextových odkazů jsou používány. Obvykle se používají pro komunikaci mezi dvěma zcela odlišnými oblastmi zdroje.

Jedním z pravidel dobrého designu webových stránek je pravidlo, že je třeba sloučit na jednom místě, jen homogenní v typu nebo účelu obsahu. Pokud se stránka stane velice velikou nebo je rozdělena na logické části, pak je smysl umožnit uživateli rychle se pohybovat mezi částmi stránky. A zde tzv. HTML kotva bude velmi užitečná. Často se tato technika používá při návrhu záhlaví, aby se spojila s cílovou informací. Tento typ navigace je mimořádně vhodný i pro propagační účely, přenášející uživatele na určitý obsah, obcházet všechny ostatní.

Chcete-li používat kotvu HTML s plynulým posouváním, musí vývojář do struktury dokumentu vložit odkaz na knihovnu JavaScript.

Jak vytvořit

Chcete-li umístit kotvu HTML na stránku, použije se standardní značka odkazu. Jedná se o jeden z hlavních značek ve struktuře dokumentu HTML.
Může mít řadu atributů, jako například href nebo jméno, které označují typ odkazu popsaného touto značkou. Odkaz na ukotvení HTML se liší od hypertextového odkazu pomocí symbolu "#". Poté musíte zadat jedinečný název kotvy, aby prohlížeč mohl jednoznačně určit cíl pro přechod. Je nesmírně důležité nezapomínat, že ve stejném dokumentu nelze přiřadit dvě totožná jména, nicméně to je přípustné na různých stránkách webu.

Příklad vytvoření kotvy ve struktuře dokumentu

Jak tedy ukotvíte HTML na stránce? Nejprve musíte vybrat oblast dokumentu, který se bude zobrazovat. Může se jednat o titulky uvnitř velkého textu. Takové podpoložky jsou obvykle označeny značkami.

Identifikátor ukotvení je obvykle nastaven v otevírací značce a atribut id = se používá k jeho popisu. Následuje jedinečný název samotné kotvy. Tento atribut může být obsažen v téměř každé úvodní značce. Po zadání jména kotevního kódu HTML na stránce je třeba vytvořit odkaz s ním v jiné části dokumentu nebo v jiném dokumentu.

Tyto podpoložky jsou obvykle označeny značkami.

. Identifikátor kotvy je obvykle nastaven v otevírací značce a atribut "id =" se používá k jeho popisu. Následuje jedinečný název samotné kotvy. Tento atribut může být obsažen v téměř každé úvodní značce. Po zadání názvu kotvy html stačí vytvořit odkaz na něj v jiné části dokumentu nebo v jiném dokumentu. Odkaz na kotvu ve stejném dokumentu se často nazývá místní, zatímco odkaz na různé dokumenty se nazývá absolutní.

Použití samotného HTML je však obtížné dosáhnout hladkost přechodů mezi kotvy. Tento přístup však povede k tomu, že uživatel je zamotaný v navigaci na stránce nebo mezi stránkami, a tím znehodnocuje svůj dojem používání zdroje. V případě lokálních kotev je mnohem výhodnější používat HTML kotvu s plynulým rolováním tak, aby návštěvník stránek mohl vizuálně sledovat směr, kterým ho administrace vede prostředkem.

Chcete-li tento efekt vytvořit, musíte se obrátit na JavaScript. Princip fungování malého skriptu bude následující - v první řadě musíme blokovat standardní chování kotvy HTML na stránce. To je nezbytné, aby se prohlížeč rozhodl přesměrovat návštěvníka na odkaz. Následně náš skript zpracovává identifikátor obsažený v tagu . Název kotvy HTML se zachová a v dokumentu se prohledá cílové místo pro naši animaci. Když je nalezen cíl, skript vypočítá vzdálenost od začátku stránky k hornímu bodu prvku, na který jsme odkazovali. Tato vzdálenost bude použita k hladkému oživení posouvání stránek. Potřebujeme pouze určit rychlost srolování pro sebe.

Zvláštní pravidlo

Při navrhování webových stránek by měli mít návrháři vždy na paměti, že je špatné přetížení stránky s informacemi, protože to může narušit jejich vnímání. A pokud potřebujete dát uživateli možnost rychle přejít na důležitou část stránky, není pro tento účel nic jednoduššího a lepší než použití kotvy HTML. Animace přechodu mezi různými částmi stránky je implementována několika řádky kódů jazyka JavaScript a její vliv je významný - uživatel si bude vždy vědom, na které části dokumentu se nachází a kde potřebuje jít dál.