Odkaz - jeden z nejdůležitějších prvků webové stránky, který umožňuje uživatelům přejít z jedné stránky na druhou. Když kliknete na odkaz, dojde k přechodu na jiný dokument nebo zadanou část aktuální stránky. V HTML je odkaz vytvořen pomocí značky " a "(anchor), která má atribut" href " určující cílovou adresu.
Atribut "href" označuje adresu URL (Uniform Resource Locator) webové stránky, na kterou chcete přejít. URL může být absolutní (s plnou adresou) nebo relativní (odkaz na aktuální stránku). Odkaz může vést na jinou webovou stránku, vytvářet seznam skladeb zvukových nebo video souborů, stahovat soubory nebo odesílat data na server.
V kontextu HTML lze odkaz Zobrazit jako jednoduchý text nebo jako aktivní prvek, například s podtržením nebo podsvícením při najetí kurzorem. K tomu se používají styly CSS. Kromě toho může být odkaz doplněn popisným textem, aby přesněji poukázal na jeho účel. Tímto způsobem se odkaz stává srozumitelnějším pro návštěvníky webu a pomáhá jim najít správné informace.
Definice a použití odkazu v HTML
Příklad použití odkazu v HTML:
V tomto příkladu, když kliknete na text "text odkazu", bude uživatel přesměrován na webovou stránku s adresou "https://www.example.com". kromě toho můžete vytvořit odkaz na místní stránku zadáním cesty k souboru:
Kromě atributu href může odkaz obsahovat i další atributy, jako je target (určuje, kde bude cílový zdroj otevřen), title (identifikuje vyskakovací nápovědu při kliknutí na odkaz) a mnoho dalších.
Odkaz v HTML může být reprezentován jak textově, tak graficky. K vytvoření grafického odkazu se používá značka vloženo do tagu :
V tomto příkladu se grafický odkaz zobrazí jako obrázek " path / to / image.JPG "s alternativním textem" text odkazu " a kliknutím na tento odkaz bude uživatel přesměrován na webovou stránku s adresou "https://www.example.com".
Struktura a atributy odkazu
Ve výše uvedeném příkladu href="https://example.com" - je atribut odkazu, který označuje adresu, na kterou bude proveden přechod kliknutím na odkaz. Hodnota atributu href je adresa URL.
Kromě atributu href může odkaz obsahovat i další doplňkové atributy, jako jsou:
- target-určuje, jak by se měl odkaz Otevřít (v aktuálním okně / v novém okně / v rámečku);
- title-poskytuje další informace o odkazu, který se zobrazí, když umístíte kurzor na odkaz;
- download-označuje, že odkaz je určen ke stažení souborů.
Příklad použití dalších atributů:
Ve výše uvedeném příkladu se odkaz otevře v novém okně a umístěním kurzoru na odkaz se zobrazí text "otevřít v novém okně".
Odkaz může mít také vestavěný prvek, jako je , který vám umožňuje přizpůsobit styly a chování odkazu v kontextu:
V tomto příkladu bude odkaz obsahovat text " příklad odkazu "s použitými styly definovanými ve třídě"link".
Vytvoření odkazu na jinou HTML stránku
V HTML můžeme vytvářet odkazy, které umožňují přechod mezi různými stránkami HTML. K vytvoření odkazu na jinou stránku používáme značku .
Chcete-li vytvořit odkaz na jinou stránku HTML, musíte v atributu href zadat cestu k této stránce. Cesta může být relativní nebo absolutní.
Relativní cesta označuje soubor ve stejném adresáři jako aktuální stránka. K určení relativní cesty se používá název souboru, například:
- O společnosti-odkaz na stránku " about.html".
- Kontakt-odkaz na stránku " contact.html".
Absolutní cesta ukazuje na soubor s plnou cestou k němu. Celá cesta může zahrnovat název disku, adresáře a název souboru, například:
- O společnosti-odkaz na stránku " about.html "v adresáři" Documents "na disku"C:".
- O společnosti-odkaz na stránku " about.html " na externím webu "www.example.com".
Když uživatel klikne na odkaz, prohlížeč jej automaticky přesměruje na zadanou stránku. V tomto případě prohlížeč obvykle otevře novou kartu nebo okno s novou stránkou, v závislosti na nastavení uživatele.
Pro vytvoření odkazu na jinou HTML stránku máme také možnost přidat text mezi úvodní a zavírací značky . Tento text bude uživateli viditelný a bude vypadat jako prostý text, který lze kliknout pro přechod na jinou stránku, například:
Odkazy na další stránky lze také vytvořit pomocí CSS přidáním stylů pomocí atributu style nebo tříd a identifikátorů CSS.
Vytvoření odkazu na externí dokument
Vytvoření odkazu na externí dokument v dokumentu HTML lze snadno provést pomocí značky . Tato značka vám umožňuje vytvořit hypertextový odkaz, který lze kliknutím přejít na jinou webovou stránku nebo dokument.
Chcete-li vytvořit odkaz na externí dokument, musíte zadat atribut href s adresou (URL) dokumentu, na který chcete odkazovat.
Ve výše uvedeném příkladu, po kliknutí na text "Název externího dokumentu" bude uživatel přesměrován na externí dokument s adresou URL "https://www.example.com/document.pdf".
Můžete také přidat atribut target pro správu toho, jak se externí dokument otevře. Například zadáním hodnoty atributu target= "_blank" můžete prohlížeči zadat, aby otevřel dokument na nové kartě nebo okně.
V uvedeném příkladu se po kliknutí na text "název externího dokumentu" dokument otevře na nové kartě nebo okně prohlížeče.
Vytvoření odkazu na externí dokument v HTML je tedy jednoduché. Použití značky s atributy href a target usnadňuje vytváření odkazů na jiné dokumenty.
Vytvoření odkazu s kotvou
Odkazy v HTML umožňují vytvářet přechody mezi různými webovými stránkami nebo oddíly na stejné stránce. Chcete-li k odkazu Přidat kotvu, musíte použít atribut href s uvedením ID kotvy.
Příklad vytvoření odkazu s kotvou:
| Kód | Popis |
|---|---|
| Přejít na část 1 | Vytvoří odkaz, který vede do sekce s ID "section1". |
Chcete-li tedy vytvořit kotvu, musíte zadat ID prvku, ke kterému chcete stránku posunout, a poté použít toto ID v atributu href k vytvoření odkazu s kotvou.
Příklad použití odkazu s kotvou:
| Kód | Popis |
|---|---|
Oddíl 1 | Zadá ID "section1" pro záhlaví sekce. |
| Přejít na část 1 | Vytvoří odkaz, který přenese uživatele do sekce s ID "section1". |
Když uživatel klikne na odkaz s kotvou, stránka bude automaticky posouvána do zadané sekce nebo položky na stránce.
Vytvoření odkazu s kotvou tak umožňuje pohodlnou navigaci po dlouhých stránkách nebo vytváření odkazů pro rychlý přechod na konkrétní sekce.
Vytvoření odkazu na e-mail
V HTML k vytvoření odkazu na e-mail místo běžné adresy URL používáme speciální schéma "mailto:". Díky tomu je odkaz aktivní a kliknutím na něj se otevře e-mailový klient, který předá adresu příjemce. Chcete-li vytvořit odkaz na e-mail, musíte použít značku "a" s atributem "href" a zadat adresu ve formátu "mailto:адрес_почты".
Když uživatel klikne na takový odkaz, otevře se e-mailový klient a nabídne zaslání e-mailu na uvedenou adresu.
Kromě toho můžete do odkazu Přidat text nebo obrázek, aby byl pro uživatele informativnější. Například:
V prvním případě bude vytvořen odkaz s textem "napsat našemu prodejnímu oddělení" a ve druhém případě bude vytvořen odkaz s obrázkem poštovní schránky.
Nyní víte, jak vytvořit odkaz na e-mail v HTML.
Přidání odkazu na obrázek
Chcete-li přidat odkaz na obrázek, musíte umístit značku (angl. image) uvnitř značky, označující cestu k obrázku v atributu src .
Místo cesty_k_stránky je třeba zadat adresu URL stránky, na kterou se bude při kliknutí na obrázek přecházet, a místo cesty_k_obrazu cestu k obrázku, který se zobrazí.
Atribut alt se používá k označení alternativního textu, který se zobrazí v případě neúspěšného načítání obrázku nebo pro uživatele, kteří používají čtečky obrazovky.
<а href="https://www.example.com">
Podle uvedených kroků bude vytvořen odkaz na obrázek, který uživateli umožní přejít na zadanou stránku, když kliknete na obrázek.