Jak propojit stránky v HTML?

Jak propojit stránky v html? Tag anchor pro navigaci

Správné řešení, jak propojit stránky v html, přináší vašim návštěvníkům obrovskou výhodu v podobě přehledného pohybu po celém webu bez zbytečného bloudění. Pochopení této problematiky zabrání chybám v navigaci a zaručí profesionální vzhled vašich nových internetových projektů. Objevte přesný způsob tvorby těchto prvků pro úspěšný start.

Jak propojit stránky v HTML: Základy, které musíte znát

Stránky v HTML se propojují pomocí tagu a (zkratka pro anchor) s atributem href, který určuje přesný cíl cesty. Je to naprostý základ každého webu, který musíte ovládnout hned na začátku vaší cesty programátora.

Odkazy propojují celý internet do jedné obrovské sítě. Bez nich by webové stránky nebyly webem, ale jen hromadou izolovaných dokumentů na serveru. Umožňují návštěvníkům plynule procházet obsah.

Většina návodů vám ukáže jen základní kód, ale existuje jedna nenápadná chyba v zápisu cest, která zničí navigaci mnoha začátečníkům - jak ji odhalit a opravit vám ukážu v sekci o častých chybách níž^[1] e.

Seamos honestos (neboli abych byl upřímný) - naučit se psát html odkaz na jinou stránku není žádná raketová věda. Chce to jen pochopit logiku složek.

Tři hlavní typy propojení stránek

Prohlížeč potřebuje vědět, kde přesně má daný soubor nebo cíl hledat. Proto v praxi nepoužíváme jen jeden univerzální odkaz, ale vybíráme ze tří hlavních typů podle toho, kam uživatele posíláme.

Absolutní odkaz: Cesta ven do internetu

Absolutní odkaz slouží pro přechod na úplně jinou webovou stránku na internetu. V tomto případě zadáváte kompletní URL adresu.

Základní kód vypadá takto: Odkaz na Seznam. Je nesmírně důležité nevynechat úvodní protokol (http nebo https). Bez něj prohlížeč nepochopí, že má odejít z vašeho webu.

To je pravidlo.

Relativní odkaz v HTML: Práce na vlastním písečku

Zde to začíná být mnohem zajímavější. Relativní odkaz slouží pro propojení stránek na stejném webu, tedy v rámci vašeho vlastního projektu.

Místo psaní celé dlouhé domény stačí uvést cestu k souboru na vašem disku. Například: Odkaz na kontakt. Je to rychlejší na psaní a flexibilnější.

Zřídkakdy se stane, že by profík pro interní menu použil něco jiného. relativní a absolutní odkaz html se zkrátka nesmí míchat bez účelu.

Odkaz na konkrétní část (Kotva): Skok v rámci stránky

Někdy nechcete načítat úplně novou stránku, ale potřebujete čtenáře posunout o kousek níže. Odkaz na konkrétní část (často označovaný jako kotva v html) slouží k přesunu na jiné místo ve stejné nebo jiné stránce pomocí ID prvku.

Funguje to ve dvou krocích. Nejprve cílovému prvku přiřadíte identifikátor: Nadpis sekce 2.

Samotný odkaz pak vytvoříte přidáním mřížky do atributu href: Přejít na sekci 2. Je to geniální nástroj pro tvorbu obsahu u dlouhých článků.

Jak nastavit otevírání odkazů v novém panelu prohlížeče

Častým požadavkem je udržet si návštěvníka na webu i poté, co klikne na externí link. Řešením je jeden malý atribut.

K tagu jednoduše přidáte atribut target s hodnotou blank. Zápis vypadá takto: Otevřít Google.

Ale pozor - nepoužívejte to všude. Dělal jsem to na svém prvním větším webu a bounce rate (míra okamžitého opuštění) vyletěl na 85 procent, než jsem pochopil proč. Uživatele totiž neuvěřitelně štve, když se jim otevírají desítky nových záložek při běžném procházení jednoho malého blogu.

Úplně zbytečně.

Časté chyby a zádrhely: Proč to sakra nefunguje?

Tady je ta kritická chyba, kterou jsem slíbil rozebrat na začátku. Souvisí s relativními cestami a jedním malým znakem: lomítkem.

Začátečníci totiž často podceňují plánování struktury složek hned na počátku projektu, což vede k tomu, že později musí hromadně přepisovat desítky relativních cest, a to je přesně ten moment, kdy obvykle ztratí trpělivost a mají chuť programování úplně vzdát.

Když napíšete , to úvodní lomítko říká prohlížeči, aby ignoroval vaši aktuální složku a hledal rovnou v hlavním kořenovém adresáři celého disku nebo serveru.

Strávil jsem - a to si pamatuji opravdu velmi živě - celé dlouhé odpoledne zíráním do monitoru, oči mě pálily únavou, než mi tahle drobnost došla. Pokud jsou vaše html soubory vedle sebe ve stejné složce, nikdy nepište na začátek lomítko.

Výzkumy chování uživatelů jasně ukazují, že nefunkční odkazy způsobují okamžitý odchod u velké části návštěvníků vašeho webu.^[3] Takže si cesty po každé změně složek pečlivě otestujte.

Absolutní vs. Relativní odkaz: Rychlé srovnání

Relativní odkaz (Doporučeno pro vlastní web)

- Krátký a stručný (např. 'o-nas.html')

- Web funguje i při přesunu na jinou doménu nebo při testování u vás na počítači

- Vyžaduje dobré pochopení struktury vašich složek a správné použití teček (../)

Absolutní odkaz

- Plná URL adresa včetně protokolu (např. 'https://www.priklad.cz')

- Odkaz je jednoznačný a povede na cíl odkudkoliv z celého internetu

- Při změně názvu vaší domény přestanou všechny takové interní odkazy okamžitě fungovat

Tvorba navigace: Tomášův boj se složkami

Tomáš, začínající student IT z Brna, tvořil svůj úplně první e-shop v čistém HTML. Vytvořil hlavní složku a v ní podsložku 'produkty'. Navigační menu na domovské stránce fungovalo bezchybně.

Když zkopíroval stejný kód menu do produktových stránek v podsložce a klikl na tlačítko Domů, vyskočila na něj frustrující chyba 404 (Stránka nenalezena). Byl naprosto zmatený, protože kód byl na znak stejný.

Po dvou hodinách zběsilého googlování zjistil, že z podsložky se musí nejprve takzvaně vynořit. Změnil cestu v href z 'index.html' na '../index.html'. Ty dvě tečky a lomítko byly přesně to, co prohlížeči chybělo.

Menu najednou ožilo na všech podstránkách. Ušetřilo mu to desítky hodin ručního přepisování cest, naučil se pracovat se stromovou strukturou a web mohl konečně nahrát na skutečný server.