HTML & CSS pro začátečníky

HTML & CSS pro začátečníky (část 12): Definice hyper odkazů (2)

Všechna videa tutoriálu

Na E-mailové adresy můžete vytvářet hyperlinky. Než ukážu, jak to funguje, několik poznámek k tomu. Osobně nejsem příznivcem těchto e-mailových odkazů. Více vhodné jsou formuláře. Pokud není nainstalován e-mailový klient nebo není správně nakonfigurován pro aktuálního uživatele, nefungují tyto e-mailové odkazy správně. Nicméně nakonec je na vás samotných, zda chcete použít e-mailové odkazy nebo formuláře. Podrobné informace o formulářích budou samozřejmě následovat v průběhu této série.

Při kliknutí na e-mailový odkaz se obvykle návštěvníkovi otevře e-mailové okno.

HTML a CSS pro začátečníky (část 12): Definice odkazů (2)

Ale to není zaručeno. Tady uživatel musí skutečně provést odpovídající nastavení. Ještě jednou: Ideální řešení s e-mailovým odkazem to není. Nicméně takový odkaz můžete občas potřebovat. Proto zde je syntaxe:

<a href="mailto:kontakt@psd-tutorials.de">kontakt@psd-tutorials.de</a>



Jak vidíte, jedná se zde o klasický hyperlink.

HTML & CSS pro začátečníky (část 12): Definice hypertextových odkazů (2)

Důležité je však to, co je přiřazeno jako hodnota atributu href. Cíl odkazu začíná vždy s mailto, následovaný dvojtečkou. K tomu se připojí žádaná e-mailová adresa.

Při e-mailových odkazech byste měli také dávat pozor na to, jaký text je zde uveden jako odkaz. Nejlepší je zde vždy znovu uvést e-mailovou adresu. Tak mohou i uživatelé, kteří po kliknutí na hyperlink nevidí žádnou reakci nebo se jim neotevře e-mailový klient, zkopírovat adresu a stejně vám poslat e-mail.

Pokud definujete e-mailové odkazy, můžete navíc uvést i další možnosti než pouze adresu příjemce. Mějte přitom na paměti, že popisované věci nejsou HTML standardem, ale jsou většinou podporovány prohlížeči.

Nejprve můžete přímo uvést příjemce Cc.

<a href="mailto:kontakt@psd-tutorials.de?cc=info@psd-tutorials.de">kontakt@psd-tutorials.de</a>



Za skutečnou e-mailovou adresou příjemce zadejte otazník. K tomu připojte cc a rovnítko, a poté adresa, kam se má zaslat viditelná kopie e-mailu. Alternativně k cc můžete také uvést bcc. V tomto případě bude uvedená adresa přidána do pole Bcc a e-mail jako skrytá kopie odeslán na tuto adresu.

Chcete-li uvést předdefinované téma, to je také možné.

<a href="mailto:kontakt@psd-tutorials.de?subject=Post%20an%20PSD-Tutorials.de">kontakt@psd-tutorials.de</a>



Za subject zadejte požadované téma. Aby to skutečně fungovalo, měli byste nepoužívat mezery v tématu nebo používat speciální řetězec %20 pro maskování mezer.

Pokud chcete, můžete rovnou uvést i text e-mailu nebo jeho část. Pro to slouží parametr body.

<a href="mailto:kontakt@psd-tutorials.de?body=Hallo%20PSD-Tutorials.de">kontakt@psd-tutorials.de</a>



HTML & CSS pro začátečníky (Díl 12): Definice hypertextových odkazů (2)



Zde platí tytéž věci, které byly uvedeny v souvislosti s subject.

Nabídnutí souborů ke stažení

Pokud chcete na svém webu nabídnout soubory ke stažení, můžete to samozřejmě udělat. (Věnuji se zde pouze technickým aspektům, právní aspekty zde neuvádím). To lze snadno uskutečnit. Definujete hyperlink a zadáte příslušný soubor jako cíl odkazu.

<a href="buch.zip"&gt>Ke stažení</a>



V tomto případě je cílem odkazu zip soubor. Když kliknete na hyperlink, prohlížeč obvykle nabídne dialogové okno Stažení, nebo soubor ihned stáhne.

HTML & CSS pro začátečníky (část 12): Definice hypertextových odkazů (2)



Skrze to můžete soubor stáhnout. Nicméně nakonec rozhodují prohlížeče, jak zacházet se zadanými soubory.

PDF soubory prohlížeče obvykle zobrazují přímo, když na příslušný odkaz kliknete. To je většinou samozřejmě v pořádku. Nicméně může se stát, že chcete nabídnout k dispozici i PDF soubory ke stažení. (Samozřejmě uživatelé mohou kliknout na odkaz pravým tlačítkem myši a soubor stáhnout. Nicméně neměli byste automaticky předpokládat, že všichni návštěvníci webových stránek o této možnosti vědí).

V HTML5 můžete skutečně označovat hyperlinky jako odkazy ke stažení. Pro tento účel slouží atribut download.

<a href="ebook.pdf" download>Ke stažení</a>



Link označený tímto atributem - předpokládaje, že prohlížeč tento atribut podporuje - stáhne daný soubor.

Výchozí pokladní generuje soubor pod názvem, který má v původní podobě. To je většinou v pořádku. Nicméně může se stát, že chcete stáhnutému souboru přiřadit jiný název. To je opět snadno možné. Opět se použije atribut download. Tento atribut se nastaví hodnota žádaného názvu.

<a href="ebook.pdf" download="dk.pdf">Stáhnout</a>



Pokud prohlížeč tuto možnost podporuje, při stahování použije název přiřazený atributu download.

HTML & CSS pro začátečníky (část 12): Definice hyper odkazů (2)

Uvádění logických vztahů

Atributem, který může být zajímavý v souvislosti s definicí hypertextových odkazů, je rel. Tímto atributem lze určit logický vztah mezi hypertextovým odkazem a cílem odkazu. Prohlížeče by mohly tuto informaci například použít k zobrazení příslušných ikon při najetí myší na odkazy. V současnosti však toto ještě nedělají. Atribut rel tedy nemá žádné viditelné účinky.

<a href="zwei.htm" rel="next">další</a>



Pro atribut rel jsou k dispozici následující hodnoty:

alternate – Odkaz na alternativní verzi dokumentu.

author – Odkaz na autora dokumentu.

bookmark – Trvalý odkaz na dokument, který lze použít jako záložku.

help – Odkaz na soubor nápovědy.

license – Odkaz na informace o autorských právech.

next – Odkaz na následující dokument.

nofollow – Tím lze uvést, že vyhledávače by neměly následovat tento odkaz.

noreferrer – Prohlížeč neposílá záhlaví HTTP-Referrer.

prefetch – Dokument by měl být načten do mezipaměti.

prev – Odkaz na předchozí dokument.

search – Odkaz na nástroj pro vyhledávání dokumentu.

tag – Klíčové slovo, které dokument popisuje.

Tímto způsobem lze tedy blíže popsat vztah mezi cílem odkazu a hypertextovými odkazy.