Vytváření odkazů je jedním z hlavních úkolů při navrhování webových stránek. Odkazy umožňují uživatelům procházet různé stránky na internetu. Mohou být použity k přechodu na jiné stránky vašeho webu, přechodu na externí stránky nebo ke stažení souborů. V této příručce se podíváme na základní principy vytváření odkazů v HTML pro začátečníky.
Vytváření odkazů v HTML je jednoduché. K tomu se používá značka . Uvnitř značky je uveden text odkazu a atribut href zadá adresu stránky, na kterou bude po kliknutí na odkaz proveden přechod. Níže je uveden příklad vytvoření odkazu:
V tomto příkladu po kliknutí na odkaz "Klikněte zde a přejděte na příklad webu" dojde k přechodu na stránku https://www.example.com..
Co je to odkaz a proč je potřeba?
Odkazy jsou zvláště užitečné pro vývojáře webu, protože umožňují vytvářet navigaci mezi stránkami a poskytují tok informací mezi různými sekcemi webu.
Odkazy jsou navíc široce používány k poskytování dalších informací. Uživatel může například najít podrobnější popis produktu kliknutím na odkaz s názvem položky.
Odkazy mohou odkazovat na jiné webové stránky v rámci aktuálního webu, na externí webové zdroje nebo dokonce na různé části stejné stránky. To vše dělá z odkazů důležitý prvek webového vývoje a navigace po internetu.
Vytvoření odkazu
Odkazy v HTML vám umožňují vytvářet přechody na jiné stránky. K vytvoření odkazu se používá značka . V rámci této značky je nutné zadat atribut href, který určuje adresu stránky, na kterou má odkaz vést.
V tomto příkladu odkaz vede na stránku example.com. kliknutím na tento odkaz prohlížeč otevře novou kartu nebo okno a zobrazí obsah zadané stránky.
Pokud odkaz vede na stránku ve stejné doméně, můžete použít relativní cestu v atributu href:
Po kliknutí na odkaz prohlížeč otevře stránku about ve stejné doméně.
Můžete také vytvořit odkaz na konkrétní místo na stránce pomocí kotev:
Po kliknutí na tento odkaz se stránka posune do sekce s identifikátorem section1.
Značka-hlavní nástroj
Zde je příklad použití značky :
- Odkaz na externí zdroj tento příklad vytváří odkaz na externí zdroj uvedený v atributu "href". Po kliknutí na odkaz bude uživatel přesměrován na uvedený externí zdroj.
- Odkaz na vnitřní stránku v tomto příkladu je vytvořen odkaz na vnitřní stránku zvanou " page2.html". Pokud je tato stránka ve stejné složce jako aktuální Stránka, po kliknutí na odkaz bude uživatel přesměrován na uvedenou stránku.
Zde je příklad použití atributu "target":
- Odkaz, který se otevře na nové kartě tento odkaz se otevře na nové kartě prohlížeče, aby uživatel mohl zůstat na aktuální stránce.
Atributy značky: href a target
Atribut href určuje adresu URL, na kterou bude proveden přechod kliknutím na odkaz. URL může odkazovat na jinou stránku ve stejné doméně nebo na externí zdroj. Například:
Atribut target určuje způsob otevření souvisejícího dokumentu. Možné hodnoty:
- _blank: otevře související dokument v novém okně nebo kartě prohlížeče
- _self: otevře související dokument na aktuální kartě nebo okně
- _parent: otevře přidružený dokument na nadřazené kartě nebo okně, pokud je k dispozici
- _top: otevře související dokument v horním okně nebo kartě prohlížeče
- jméno_fram: otevře související dokument v uvedeném rámečku. Název rámečku musí být uveden v atributu name značky nebo
Kombinací atributů href a target můžete vytvářet různé odkazy, které vedou na různé stránky a otevírají se v různých oknech nebo kartách prohlížeče.
Relativní a absolutní cesty
- Relativní cesty - jsou to cesty, které jsou specifikovány vzhledem k aktuálnímu adresáři nebo umístění souboru. Používají se, když chcete vytvořit odkaz na stránky, které jsou ve stejné složce nebo v podsložce.
- Absolutní cesty - jsou to úplné cesty k souborům nebo stránkám. Používají se, když je nutné vytvořit odkaz na stránky umístěné v jiné složce nebo na jiném webu.
Relativní cesty jsou obvykle preferovány, protože jsou flexibilnější a umožňují přenos webu na jiný server bez změny cest. Někdy je však nutné použít absolutní cesty, zvláště když odkaz vede na jinou doménu nebo webový zdroj s jiným názvem domény.
Interní a externí odkaz
V HTML existují dva typy odkazů: interní a externí.
Interní odkaz - je to odkaz na jinou webovou stránku uvnitř stejné webové stránky. Používá relativní cestu, která označuje umístění souboru vzhledem k aktuální stránce. Například:
V tomto příkladu se po kliknutí na odkaz "O webu" otevře stránka about.html na stejném webu.
Chcete-li odkaz propojit s textem nebo obrázkem, použijte značku . Atribut href určuje adresu stránky, na kterou bude odkaz veden.
Externí odkaz - je to odkaz na webovou stránku, která je na jiném webu. Používá absolutní cestu, která obsahuje úplnou adresu webové stránky. Například:
V tomto příkladu, když kliknete na odkaz "Example.com", bude otevřena webová stránka na adrese https://example.com..
Externí odkazy mohou odkazovat na jakékoli webové stránky na webu, ale je důležité, aby Adresa existovala.
Vytvoření odkazu na jinou stránku
K zadání adresy, na kterou bude odkaz veden, se používá atribut href . Hodnota tohoto atributu udává cestu k souboru nebo adresu webu.
Příklad vytvoření odkazu na jinou stránku:
- O společnosti-tento odkaz povede na stránku, která je ve stejném adresáři jako aktuální stránka a jmenuje se about.html .
- Příklad-tento odkaz bude veden na externí web https://www.example.com ..
Když je odkaz vytvořen, ve výchozím nastavení se zobrazí jako Modrý podtržený text. Vzhled odkazu lze změnit pomocí CSS.