fbpx

HTML odkazy

Odkaz neboli tzv. link je v HTML definován tagem <a> a elementem „href“, který indikuje cílovou stránku.

<a href="https://www.smuton.cz/">Odkaz směřující na home page Smuton.cz</a>
<a href="https://www.smuton.cz/" title="Toto je title u odkazu">Přejít na home page</a> <!--Tento odkaz obsahuje i title, což znamená, že tento text se zobrazí po najetí myši na odkaz.-->

Odkaz může mít několik hodnot, které udávají, jak se odkaz bude chovat. Můžeme totiž nastavit, že se cílová stránka otevře např. v novém okně či defaultně ve stejném okně apod. Na ukázce je použita absolutní URL.

<p><a href="https://www.smuton.cz/" target="_self">Odkaz se otevře ve stejném okně.</a></p>
<p><a href="https://www.smuton.cz/" target="_blank">Odkaz se otevře v novém okně či záložce.</a></p> 
<p><a href="https://www.smuton.cz/" target="_parent">Odkaz se otevře v novém okně či záložce.</a></p>
<p><a href="https://www.smuton.cz/" target="_top">Odkaz se otevře v novém okně či záložce.</a></p> 

Pokud míříme odkazem na stránku v rámci našeho webu, není potřeba používat absolutní URL, nýbrž pouze relativní.

<p><a href="https://www.smuton.cz/" target="_self">Absolutní URL.</a></p>
<p><a href="/seo/" target="_self">Relativní URL.</a></p> <!--Lze použít v rámci našeho webu, přičemž přejde na stránku smuton.cz/seo-->

Odkaz v obrázku lze použít přidám tagu <img> a uvedením zdroje obrázku, případně ALT atributem či rozměry.

<a href="https://www.smuton.cz/">
<img src="https://www.smuton.cz/wp-content/uploads/2020/09/logo-smuton-cz.jpg" alt="Logo Smuton.cz" style="width:250px;height:71px;">
</a>

V odkazu můžeme také vytvořit cestu, díky které dokážeme přejít ihned do e-mailového nástroje.

<a href="mailto:info@smuton.cz">Po kliknutí se otevře e-mailový nástroj / program.</a>

Odkaz může být samozřejmě umístěn do tlačítka, respektive do tagu <button>.

<button onclick="document.location='https://www.smuton.cz/'">Přejít na home page Smuton.cz</button>

Jednoduchý zápis v rámci dokumentu HTML.

<!DOCTYPE html>
<html>
<body>

<h2>HTML odkaz</h2>
<p>Odkaz je definovám pomocí tagu "a"</p>

<a href="https://www.smuton.cz/html-tahak/">V tomto textu je odkaz</a> <!--Celý text s odkazem je tzv. anchor text.-->

</body>
</html>