XHTML – element link

20. ledna 2003

•

Dnes si ukážeme element link. Ten slouží k definování vztahů dokumentu s jinými zdroji. Velmi často se využívá také k asociaci souborů se styly, kde nám umožňuje specifikovat různé alternativní styly.

Element link – vztahy dokumentů

Povolený obsah: EMPTY (prázdný element)

Atributy:

%attrs;: Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class, style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).
href %URI; #IMPLIED: Tento atribut specifikuje URI adresu odkazovaného zdroje. Můžeme zde použít i tzv. identifikátor fragmetu, pomocí kterého se odkážeme na určité místo v (X)HTML dokumentu – tím jsme se zabývali v části o odkazech.
charset %Charset; #IMPLIED: Tento atribut specifikuje kódování zdroje, na který je odkazováno.
hreflang %LanguageCode; #IMPLIED: Tento atribut určuje základní jazyk odkazovaného dokumentu.
type %ContentType; #IMPLIED: Pomocí tohoto atributu říkáte, jakého MIME-typu je zdroj, na který odkazujete. Interpret XHTML se pak může rozhodnout, jestli bude zdroj přenášet nebo ne (pokud tento MIME-typ nepodporuje).
rel %LinkTypes; #IMPLIED: Tento atribut specifikuje vztah odkazovaného zdroje k aktuálnímu dokumentu. Tímto atributem i jeho možnými hodnotami jsme se již zabývali.
rev %LinkTypes; #IMPLIED: Tento atribut je podobný jako atribut rel, ovšem specifikuje vztah aktuálního dokumentu k odkazovanému dokumentu. Tímto atributem i jeho možnými hodnotami jsme se také již zabývali.
media %MediaDesc; #IMPLIED: Hodnotou tohoto atributu je jedno z klíčových slov pro popis média, které náleží danému dokumentu, nebo jejich seznam, kde jsou od sebe odděleny čárkou. Implicitní hodnotou tohoto atributu je screen. Jednotlivými klíčovými slovy jsme se zabývali v části o stylech.

Element link v XHTML 1.0 Strict DTD

Jak vidíte, většina atributů se shoduje jménem i významem s atributy elementu a. I zde můžete využít atribut title k popisu zdroje, navíc byste ale u každého elementu měli používat atribut type.

Element link je ale odlišný než a. Můžete ho použít pouze v hlavičce (element head) dokumentu a slouží k definování vztahů k jiným dokumentům, ne k vytváření odkazů, které může uživatel aktivovat.

Co se týče interpretace elementu link, vše závisí na interpretu XHTML, který sice není povinen dělat nic, ale může zde uvedené informace nějakým způsobem zohlednit (protože se element link nachází v hlavičce stránky, nemůže být součástí jejího obsahu, jeho interpretace musí být jiná). Vizuální prohlížeče mohou zobrazovat například navigační lištu. Navigaci vaším webem ale může tento element zpříjemnit především uživatelům hlasových a podobných prohlížečů, kde uživatel nemá globální povědomí o stránce.

Velký význam má element link také pro vyhledávače, které v takovém případě mohou přidělit stránce vyšší rating nebo mohou uživatele navigovat rovnou na příslušnou verzi podle jeho preferencí (jazyk, upřednostňovaný formát, médium). Nyní si uvedeme příklad. Představte si, že následující dokument uvod.html je úvodem nějaké kolekce dokumentů:

…
<head>
<link rel=“contents“ rev=“start“ href=“obsah.html#seznam-temat“ type=“text/html“ />
<!– obsah kolekce, pro kterou je aktuální dokument úvodním –>
<link rel=“next“ href=“prvni.html“ type=“text/html“ />
<!– další dokument z kolekce –>
<link rel=“alternate“ href=“../english/intro.html“ hreflang=“en“ lang=“en“ xml:lang=“en“
charset=“iso-8859-1″ title=“The document in English“ type=“text/html“ />
<!– protože je atribut title v angličtině, musíme uvést i atributy lang a xml:lang –>
<link rel=“alternate“ href=“../ps/dokument.ps“ type=“application/postscript“
media=“print“ title=“Verze pro tisk ve formátu PostScript“ />
<!– verze pro tisk v PostScriptu, všimněte si atributu type –>
</head>
…

Pokud použijete elementy link podobným způsobem a poté se odkazujete na ty samé zdroje v dokumentu pomocí elementu a, pak byste měli i u nich použít atributy hreflang, type, charset, rel a rev se stejnými hodnotami.

Použití elementu link k asociaci souborů se styly

Jedním z nejčastějších využití elementu link je v „přilinkování“ souborů se styly, které k dokumentu náleží. Tento způsob nám umožňuje specifikovat i různé alternativní styly, z nichž si uživatel může vybrat. Všemi těmito možnostmi se nyní budeme zabývat.

Nejdříve tedy k tomu, jak k dokumentu přiřadit soubor se styly:

Jako hodnotu atributu rel použijeme klíčové slovo stylesheet, které je speciálně pro účely stylů vyčleněno. Povinně musíme uvést atribut type, pomocí kterého udáváme MIME-typ stylového jazyka, který se v souboru používá, což je nutné kvůli tomu, aby interpret XHTML nestahoval soubor v jazyce, kterému nerozumí. Nejčastějším, nejvhodnějším a v současných prohlížečích také jediným rozumně použitelným stylovým jazykem je CSS, jehož MIME-typ jsem uvedl v příkladu. Jako hodnotu atributu href uvedete potom logicky URI souboru se styly.

Také můžete specifikovat, že daný styl se má aplikovat jen pokud zařízení uživatele spadá do určité skupiny médií, a to pomocí atributu media. Jeho přípustné hodnoty jsme si ukázali v části o stylech.

Je také možné vytvořit pro stránku několik různých stylových souborů, z nichž si může uživatel vybrat. Toho dosáhneme přidáním klíčového slova alternate do atributu rel:

V takovémto případě by interpret XHTML měl uživatele nechat si zvolit mezi oběma styly (v praxi to ale není pravidlem, proto byste přepínání stylu měli umožnit i na stránce pomocí JavaScriptu). Atribut title není v tomto případě povinný, jedná se ale o jedinou informaci o stylu, jakou uživatel uvidí, až si bude vybírat, proto byste ho měli rozhodně uvést.

Pomocí atributu title můžete také styl zařadit do určité skupiny. Pokud máte více souborů, které jsou všechny součástí jednoho stylu, potom můžete jednotlivé soubory seskupit uvedením totožné hodnoty tohoto atributu:

Pravděpodobně ale budete chtít poskytovat alternativní styly jako jakousi nadstavbu ke stadardnímu stylu. Potom musíte uvést jeden ze stylů jako svůj preferovaný – v tom případě bude standardně stránka naformátována pomocí tohoto stylu a uživatel bude moci přepnout na ostatní alternativní styly. Preferovaný styl definujete pomocí klíčového slova stylesheet, ale musíte uvést i atribut title k popisu tohoto stylu.

Všechny naše poznatky o asociaci stylů k XHTML dokumentům si nyní shrneme v závěrečném příkladě:

…
<head>
…
<link rel=“stylesheet“ type=“text/css“ href=“zakladni.css“ />
<!– Toto je styl, který se bez ohledu na ostatní styly aplikuje vždy. –>
<link rel=“stylesheet“ type=“text/css“ media=“aural“ href=“hlas.css“ />
<link rel=“stylesheet“ type=“text/css“ media=“print“ href=“tisk.css“ />
<!– Tyto styly se aplikují také vždy, ovšem pouze u hlasových
     prohlížečů, resp. tiskáren. –>
<link rel=“stylesheet“ type=“text/css“ href=“oranzovy.css“ title=“Oranžový vzhled“ />
<!– Pomocí tohoto stylu se stránka zobrazí implicitně, ale uživatel může tento styl
     nahradit jedním z alternativních stylů. –>
<link rel=“alternate stylesheet“ type=“text/css“ href=“modry1.css“ title=“Modrý vzhled“ />
<link rel=“stylesheet“ type=“text/css“ media=“print“ href=“modry-tisk.css“ title=“Modrý vzhled“ />
<!–Máme speciální styl pro tisk – pokud se tiskne modrý styl,
     aplikuje se navíc k souboru tisk.css i tento soubor. –>
<link rel=“alternate stylesheet“ type=“text/css“ href=“modry2.css“ title=“Modrý vzhled“ />
<!– jeden z alternativních stylů –>
<link rel=“alternate stylesheet“ type=“text/css“ href=“cerveny1.css“ title=“Červený vzhled“ />
<link rel=“alternate stylesheet“ type=“text/css“ href=“cerveny2.css“ title=“Červený vzhled“ />
<link rel=“alternate stylesheet“ type=“text/css“ href=“specialni-pismo.css“ title=“Červený vzhled“ />
<!– druhý alternativní styl –>
…
</head>
…