HTML odkazy
Odkazy se nacházejí téměř na všech webových stránkách. Odkazy umožňují uživatelům klikat ze stránky na stránku.
HTML odkazy – hypertextové odkazy
HTML odkazy jsou hypertextové odkazy.
Můžete kliknout na odkaz a přejít na jiný dokument.
Když najedete myší na odkaz, šipka myši se změní na ručičku.
Poznámka: Odkaz nemusí být text. Odkaz může být obrázek nebo jakýkoli jiný HTML prvek!
HTML odkazy - syntaxe
Značka HTML <a>definuje hypertextový odkaz. Má následující syntaxi:
<a href="url">link text</a>
Nejdůležitějším atributem <a> prvku je
hrefatribut, který označuje cíl odkazu.
Text odkazu je část, která bude viditelná pro čtenáře.
Kliknutím na text odkazu se čtečka odešle na zadanou URL adresu.
Příklad
Tento příklad ukazuje, jak vytvořit odkaz na W3Schools.com:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
Ve výchozím nastavení se odkazy ve všech prohlížečích zobrazí takto:
- Nenavštívený odkaz je podtržený a modrý
- Navštívený odkaz je podtržený a fialový
- Aktivní odkaz je podtržený a červený
Tip: Odkazy lze samozřejmě stylizovat pomocí CSS, abyste získali jiný vzhled!
HTML Links – Cílový atribut
Ve výchozím nastavení se odkazovaná stránka zobrazí v aktuálním okně prohlížeče. Chcete-li to změnit, musíte pro odkaz zadat jiný cíl.
Atribut targeturčuje, kde se má propojený dokument otevřít.
Atribut targetmůže mít jednu z následujících hodnot:
_self- Výchozí. Otevře dokument ve stejném okně/záložce, na které jste klikli_blank- Otevře dokument v novém okně nebo kartě_parent- Otevře dokument v nadřazeném rámci_top- Otevře dokument v celém těle okna
Příklad
Pomocí target="_blank" otevřete propojený dokument v novém okně nebo kartě prohlížeče:
<a href="https://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
Absolutní adresy URL vs. relativní adresy URL
Oba výše uvedené příklady používají v atributu absolutní adresu URL (úplnou webovou adresu) .href
Místní odkaz (odkaz na stránku v rámci stejného webu) je uveden s relativní adresou URL (bez části „https://www“):
Příklad
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative
URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS
Tutorial</a></p>
Odkazy HTML – použijte obrázek jako odkaz
Chcete-li použít obrázek jako odkaz, vložte <img>
značku do <a>značky:
Příklad
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Odkaz na e-mailovou adresu
Použijte
mailto:uvnitř
hrefatributu k vytvoření odkazu, který otevře e-mailový program uživatele (aby mohl odeslat nový e-mail):
Příklad
<a href="mailto:[email protected]">Send email</a>
Tlačítko jako odkaz
Chcete-li použít tlačítko HTML jako odkaz, musíte přidat nějaký kód JavaScript.
JavaScript vám umožňuje určit, co se stane při určitých událostech, jako je kliknutí na tlačítko:
Příklad
<button
onclick="document.location='default.asp'">HTML Tutorial</button>
Tip: Další informace o JavaScriptu naleznete v našem výukovém programu JavaScript .
Názvy odkazů
Atribut titleurčuje další informace o prvku. Informace se nejčastěji zobrazují jako text nápovědy, když najedete myší na prvek.
Příklad
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
Více o absolutních adresách URL a relativních adresách URL
Příklad
Pro odkaz na webovou stránku použijte úplnou adresu URL:
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Příklad
Odkaz na stránku umístěnou ve složce html na aktuálním webu:
<a href="/html/default.asp">HTML tutorial</a>
Příklad
Odkaz na stránku umístěnou ve stejné složce jako aktuální stránka:
<a href="default.asp">HTML tutorial</a>
Více o cestách k souborům si můžete přečíst v kapitole Cesty k souborům HTML .
Shrnutí kapitoly
- Pomocí
<a>prvku definujte odkaz - Pomocí
hrefatributu definujte adresu odkazu - Pomocí
targetatributu definujte, kde se má propojený dokument otevřít - Chcete-li použít obrázek jako odkaz, použijte
<img>prvek (uvnitř ).<a> - Použijte
mailto:schéma uvnitřhrefatributu k vytvoření odkazu, který otevře e-mailový program uživatele
HTML značky odkazů
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
Úplný seznam všech dostupných značek HTML naleznete v naší Referenční příručce značek HTML .