Jak udělat hypertextový odkaz v HTML?

Jak v HTML správně vytvořit klikací odkaz na jinou stránku?

Vzpomínám si, když jsem se poprvé učil kódovat, webové stránky mi přišly jako kouzelný svět. Ty klikací odkazy, to bylo něco. V HTML to vypadá takhle, jako malý kousek magie.

Stačí napsat <a href="sem-dej-adresu.cz">a tady to, co se ukáže na webu</a>. Je to tak prostý, ale zároveň neskutečně silný. Vzpomínám, jak jsem na první vlastní web dával odkaz na kamarádův blog, to bylo v létě 2008, myslím.

Ta syntaxe <a href="...">...</a> je základ. Ta dvojice tagů, ten počáteční s href, co definuje cíl, a ten koncový, co uzavírá text, co lidi uvidí. Nic víc, nic míň.

Dneska je to samozřejmost, ale tehdy to byl objev. Vlastně, pořád je to fascinující, jak pár znaků dokáže spojit svět. Pamatuju si, jak jsem v září téhož roku na konferenci v Praze viděl prezentaci o novinkách webu a tenhle základní prvek tam byl zmíněn jako něco naprosto klíčového.

Ten text mezi tagy, to je to, co uživatel vlastně vidí. To je ten chyták, ta návnada, aby kliknul. Může to být cokoliv, krátký text, celé věty. Když jsem poprvé nastavoval e-shop s ručně vyráběným mýdlem v roce 2015, chtěl jsem, aby lidé klikli na "Podívejte se na naše novinky", a fungovalo to skvěle.

A to href to je to, kam ten odkaz vede. Může to být jiná stránka na tvém webu, nebo úplně jiný web na druhém konci světa. Vždycky je to ten klíč k propojení. Nedávno jsem opravoval jeden starší web a zjistil jsem, že všechny odkazy byly zapsané chybně, bez uvozovek u href, to bylo šílené.

Co je to HREF?

href je atribut, který v HTML specifikuje URL adresu cíle – kam se má jít. Může to být jiná webová stránka, soubor ke stažení, nebo třeba ten CSS soubor, který drží celou krásu pohromadě. Vždycky tam musí být.

Když tak přemýšlím, href se nejčastěji vidí u <a> tagu, že jo. To je ten starý dobrý odkaz. Ale používá se i jinde. Třeba u <link> pro stylopisy. Vždycky si vzpomenu, jak důležité to je, když něco zmizí nebo se neobjeví. To ticho po chybě je pak až děsivé.

A pak je tu ten hreflang. Ten šeptá prohlížeči, jakým jazykem ten odkazovaný dokument mluví. Je to důležité, aby lidi našli to, co potřebují ve svém jazyce. Jako když se snažíš někomu něco říct a on ti nerozumí. Takové tiché nedorozumění.

media zase ukazuje, pro jaké zařízení je ten obsah. Jestli pro obrazovku, tisk, nebo něco jiného. Vždycky se mi to pletlo, kolik různých rozměrů světa vlastně existuje. Mobil, tablet, tiskárna... Každé si žádá své. To je jako když píšeš dopis a nevíš, kdo ho bude číst.

A rel? Ten říká, jaký je vztah mezi současným a odkazovaným dokumentem. Je to jako status na síti, jenže pro webové stránky. Třeba stylesheet pro stylopis, canonical pro tu pravou verzi. Nebo prev a next. Určuje ten tichý příběh, co se mezi stránkami odehrává. Ty neviditelné nitky, co je drží pohromadě.

href je prostě základ. Bez něj by nebylo nic. Používá se na spoustu věcí, pro ty nejdůležitější cesty. Vždyť bez něj by to ani nebylo propojené.

Tady jsou ty hlavní, kam ho dávám:

• Odkazy (<a>): Tohle je asi nejznámější. Prostě jít jinam, na jinou webovou stránku. Když na to klikneš, jsi jinde.
• Stylopisy (<link rel="stylesheet">): Aby to vypadalo tak, jak má. Všechny ty barvy, písma, rozvržení. Bez toho by to bylo jen holé písmo, bílý podklad, nic.
• Ikony (<link rel="icon"> nebo favicon): Ta malá ikonka v záložce prohlížeče. Drobná věc, ale dotváří celkový dojem, pocit z té stránky.
• Alternativní verze (<link rel="alternate">): Pro jiné jazykové verze stránky, nebo třeba RSS kanál. Aby si každý našel to své, co zrovna potřebuje. Takové ty skryté cesty.

Ten rel atribut je vážně důležitý pro to, jak stránky spolu mluví. Je to takový vztahový status mezi nimi, a pomáhá i vyhledávačům.

• stylesheet: Když ho vidím, vím, že jde o CSS. Vždycky se to spojuje s type="text/css". Prostě styly pro vzhled.
• canonical: Tohle je pro vyhledávače. Říká jim, která je ta hlavní adresa stránky, když je jich víc. Hodně to pomáhá s duplicitním obsahem, co se tak plíží webem. Je to taková ta jistota, aby se neztratily.
• preload nebo prefetch: Tyhle jsou pro rychlost. Prohlížeč si s nimi může něco připravit předem, aby se to načetlo rychleji. Jako když čekáš na někoho a už mu vaříš kávu.

Všechno to jsou jen takové malé instrukce, víš? Ale dohromady drží celý ten web. Bez href a těch ostatních by to bylo jen pár slov na obrazovce, bez cesty, bez smyslu. Jen tak plující v prázdnu.

Jak vytvořit hypertextový odkaz?

Jak vytvořit hypertextový odkaz?

1. Označte text nebo obrázek, který má sloužit jako odkaz.
2. Použijte klávesovou zkratku Ctrl+K (nebo přejděte na kartu Vložení a zvolte Odkaz).
3. Do pole "Adresa" vložte cílovou URL (např. https://www.google.com).
4. Potvrďte tlačítkem OK.

Pamatuju si, jak jsem se trápil s jednou seminární prací na vysoké. Muselo to být někdy v roce 2012, v zimním semestru. Seděl jsem u stolu v našem malém studentském bytě v Brně, tenkrát ještě s těma starýma dřevěnýma židlema, co vrzaly při každém pohybu. Venku sněžilo, bílé vločky se lepily na okno.

Potřeboval jsem do dokumentu ve Wordu dát odkaz na pár online zdrojů, aby se na to dalo kliknout. Ne jenom zkopírovat URL, to by bylo moc easy. Profesor trval na profesionální úpravě a já jsem fakt chtěl, aby to vypadalo dobře. Tehdy jsem si s těmi formáty a funkcemi dost nevěděl rady.

Věděl jsem, že se to dělá nějak přes "vložení", ale nemohl jsem to najít. Proklikal jsem snad deset minut celé horní menu, nervózně si kousal ret. Fakt jsem byl frustrovaný, protože jsem měl pocit, že je to banalita a že jsem na to už někde narazil. Pořád jsem hledal nějaké tlačítko "link", nebo "hyperlink", ale česky to tam bylo jen "Odkaz". Jojo, ta jednoduchá věc, co mi unikala.

Nakonec jsem se k tomu dokopal. Označil jsem tu větu, co jsem chtěl mít proklikávací – "Viz článek o kybernetické bezpečnosti". Kliknul jsem na záložku Vložení, tam to fakt bylo! Pak tam byla taková ta ikonka řetězu, vedle toho text Odkaz. Klik!

Objevilo se malé okno, kde se ptali na adresu. Zadání URL bylo automatické, stačilo tam CTRL+V zkopírovanou adresu vložit. A potvrdit. A najednou... šup, text se změnil na modrý a podtržený. Tlak v hrudi trochu povolil. Uf. Ten pocit, když ti něco, co se zdálo složité, najednou "docvakne", to je k nezaplacení.

Pak jsem na to kliknul s Ctrl a otevřelo se to v prohlížeči. Sakra, to je paráda! Od té doby to dělám automaticky, vlastně skoro vždycky přes tu klávesovou zkratku Ctrl+K. Je to rychlejší, intuitivnější. Prostě označím text, Ctrl+K, vložím odkaz, enter. Hotovo. Dneska už si to bez toho ani nedokážu představit.

Doplňující tipy a detaily:

• Různé typy odkazů:

  • Externí webové stránky: Nejčastější, jako ten můj příklad z Brna. Odkazuje na URL adresu mimo váš dokument.
  • Místa v dokumentu: Můžete vytvořit odkaz na konkrétní nadpis nebo záložku uvnitř stejného dokumentu. To je super pro dlouhé práce, když potřebujete obsah.
  • E-mailové adresy: Otevře e-mailového klienta s předvyplněnou adresou příjemce.
  • Nové dokumenty: Odkaz může vytvořit nový prázdný dokument.

• Označení textu:

  • Text je vždy lepší: Místo "Klikněte zde" je mnohem lepší mít odkaz přímo v relevantním textu, např. "Více informací naleznete v naší studii o umělé inteligenci." Pro uživatele je to srozumitelnější.

• Pravé tlačítko myši:

  • Kromě karty "Vložení" a Ctrl+K můžete označit text, kliknout na něj pravým tlačítkem myši a vybrat možnost Odkaz. Je to taková třetí cesta k cíli, kterou jsem taky časem objevil.

• Odstranění odkazu:

  • Pokud se spletete, stačí kliknout pravým tlačítkem myši na existující odkaz a vybrat Odebrat hypertextový odkaz. Nic složitého.

• Úprava odkazu:

  • Stejně tak ho můžete pravým tlačítkem myši Upravit hypertextový odkaz, pokud se změní adresa nebo chcete změnit text odkazu. Je to fakt praktické.

Jak udělat odkaz v HTML?

Pro odkaz v HTML použijeme tag <a href="URL">Text odkazu</a>. Je to v podstatě taková malá brána do jiného světa webových stránek, nebo dokonce na to samé místo v jiném kontextu. Nezapomeň, že href je klíčové, tam se schovává ta magická adresa, kam se náš uživatel vydá. A ten "Text odkazu"? To je vizitka, to, co návštěvníka láká ke kliknutí. Jiří Kosek to na svém webu skvěle vysvětluje, doporučuju mrknout: www.kosek.cz › clanky › html.

Jak to celé funguje?

• <a: Začátek našeho kouzelného rituálu. Otevíráme dveře k odkazu.
• href="URL": Tady je ta "kamaráde, tam běž". URL adresa, na kterou se kliknutím dostaneme. Může to být cokoli od jiného webu po konkrétní soubor.
• Text odkazu: Toto je to, co uživatel vidí. Mělo by to být výstižné a lákavé, aby věděl, co ho čeká.
• </a>: Zavíráme magii, dokončujeme akci.

Je to trochu jako v životě, ne? Vždycky se k něčemu vážeme, ať už je to člověk, myšlenka, nebo prostě jen odkaz na super článek o tom, jak dělat odkazy v HTML. Vždycky je tam nějaký cíl, nějaká cesta a něco, co nás k tomu kroku motivuje. A to je na tom fajn.

• Přesnost je půl zdraví: Ujisti se, že URL je správně napsané. Jedno překlepnuté písmenko a uživatel skončí kdoví kde. To by byl docela trapas, ne?
• Kontext je král: Text odkazu by měl jasně naznačit, co se po kliknutí stane. Nikdo nemá rád překvapení v podobě nefunkčního odkazu nebo stránky, která vůbec nesouvisí s tím, co čekal.
• Nové okno, prosím?: Občas se hodí, aby se odkaz otevřel v novém okně. To se dělá atributem target="_blank". Hodí se, když nechceš, aby uživatel opustil tvoji stránku, ale chceš mu dát možnost prozkoumat něco dalšího.