HTML Odkazy

V tomto tutoriálu se naučíte, jak vytvořit odkazy na jiné stránky v HTML.

vytváření odkazů v HTML

odkaz nebo hypertextový odkaz je spojení z jednoho webového zdroje do druhého. Odkazy umožňují uživatelům plynule přecházet z jedné stránky na druhou, na jakémkoli serveru kdekoli na světě.

spojení má dva konce, nazývané kotvy. Odkaz začíná u zdrojové kotvy a ukazuje na cílovou kotvu, což může být jakýkoli webový zdroj, například obrázek, zvukový nebo videoklip, soubor PDF, dokument HTML nebo prvek v samotném dokumentu atd.

ve výchozím nastavení se odkazy ve většině prohlížečů zobrazí následovně:

• 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ý.

můžete to však přepsat pomocí CSS. Další informace o stylingových odkazech.

syntaxe HTML odkazu

odkazy jsou zadány v HTML pomocí značky <a>.

odkaz nebo hypertextový odkaz může být slovo, skupina slov nebo obrázek.

Něco mezi otevírací <a> tag a zavírání </a> tag se stává součástí odkazu, který uživatel vidí a kliknutí v prohlížeči. Zde jsou některé příklady odkazů:

<a href="https://www.google.com/">Google Search</a><a href="https://www.tutorialrepublic.com/">Tutorial Republic</a><a href="images/kites.jpg"> <img src="kites-thumb.jpg" alt="kites"></a>

href atribut určuje cíl odkazu. Jeho hodnota může být absolutní nebo relativní URL.

absolutní URL je adresa URL, která obsahuje každou část formátu URL, jako je protokol, Název hostitele a cesta dokumentu, např. https://www.google.com/, https://www.example.com/form.php atd. Zatímco relativní adresy URL jsou cesty relativní ke stránce, např. contact.html, images/smiley.png a tak dále. Relativní URL nikdy neobsahuje prefix http:// nebo https://.

nastavení cílů pro odkazy

atribut target řekne prohlížeči, kde otevřít propojený dokument. Existují čtyři definované cíle a každý název cíle začíná znakem podtržítka (_:

• _blank — otevře propojený dokument v novém okně nebo na kartě.
• _parent — otevře propojený dokument v nadřazeném okně.
• _self — otevře propojený dokument ve stejném okně nebo na kartě jako zdrojový dokument. Toto je výchozí hodnota, proto není nutné tuto hodnotu explicitně specifikovat.
• _top — otevře propojený dokument v plném okně prohlížeče.

vyzkoušejte následující příklad, abyste pochopili, jak cíl odkazu v podstatě funguje:

<a href="/about-us.php" target="_top">About Us</a><a href="https://www.google.com/" target="_blank">Google</a><a href="images/sky.jpg" target="_parent"> <img src="sky-thumb.jpg" alt="Cloudy Sky"></a>

vytváření kotev záložek

můžete také vytvořit kotvy záložek, které uživatelům umožní přejít na konkrétní část webové stránky. Záložky jsou zvláště užitečné, pokud máte velmi dlouhou webovou stránku.

vytváření záložek je dvoufázový proces: nejprve přidejte id atribut na elementu, kde chcete skočit, pak použijte id hodnota atributu předchází hash sign (#) jako hodnota href atribut <a> tag, jak je znázorněno v následujícím příkladu:

<a href="#sectionA">Jump to Section A</a><h2>Section A</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

vytváření odkazů ke stažení

můžete také vytvořit odkaz ke stažení souboru přesně stejným způsobem jako umístění textových odkazů. Stačí nasměrovat cílovou adresu URL na soubor, který chcete mít k dispozici ke stažení.

v následujícím příkladu jsme vytvořili odkazy ke stažení pro soubory ZIP, PDF a JPG.

<a href="downloads/test.zip">Download Zip file</a><a href="downloads/masters.pdf">Download PDF file</a><a href="downloads/sample.jpg">Download Image file</a>