Hypertextové odkazy včera, dnes a zítra

27. srpna 2010

Přínos hypertextových odkazů byl zásadním faktorem podílejícím se na famózním úspěchu HTML. Jejich význam rozhodně neupadá ani v současnosti.

V dnešním pátečním povídání se zaměříme převážně na jejich technické aspekty.

A řekl Tim: „Budiž Web!“

První uživatelé Internetu, těmito uživateli byly tehdy zejména různé instituce (vědecká pracoviště, univerzity aj.), to dlouho neměli jednoduché. Neexistovaly vyhledávače ani hypertextové odkazy, bylo proto nutné procházet adresářovou strukturou serverů a pátrat, ve kterém podadresáři je ten či onen hledaný dokument uložen. Jelikož dokumentů zpřístupněných skrze Internet přibývalo geometrickou řadou a stejně tak rostl počet serverů tvořících Síť, stávalo se dohledávání informací stále pracnější. Situace naléhavě vyžadovala řešení, které by usnadnilo pohyb mezi dokumenty. Vznikala proto řada projektů, které měly za cíl popsaný stav zlepšit. Počátkem devadesátých let se tak objevila i technologie WWW, kterou vymyslel jistý pracovník CERNu (evropské středisko pro výzkum atomových částic) jménem Tim Berners-Lee. Převratnost této technologie spočívala ve značkovacím jazyku, resp. datovém formátu, do něhož bylo možné vkládat hypertextové odkazy, podle toho získal jazyk i svůj název – Hypertext Markup Language (HTML).

Na pouhé myšlence hypertextových odkazů v té době samozřejmě nic převratného nebylo (zřejmě první hypertextové odkazy byly obsaženy už v listech talmudu), hypertextové odkazy byly dobře známy z encyklopedií a naučných slovníků, ve spojitosti s nesmírnou rozsáhlostí internetového obsahu a rychlou interakcí, zajištěnou počítačovými procesory, však najednou získaly mnohem širší dimenzi. Efektivnost hypertextových odkazů byla klíčovým faktorem podílejícím se na fenomenálním nástupu HTML. To hlavní však přišlo až s nástupem nové generace vyhledávačů, které již dovedly webové stránky hodnotit podle množství a kvality zpětných odkazů a v souvislosti s tím relevantně třídit výsledky vyhledávání. Rázem se z jednoduchých hypertextových odkazů stala hotová věda a především výnosný byznys. Ale to už jsme se dostali na jinou kolej, o SEO a SEM snad někdy příště…

Kotva

Název elementu a je odvozen z anglického slova anchor (kotva). Kotvou je míněn v rámci dokumentu unikátní identifikátor, který je přiřazen některé části daného dokumentu. Díky tomu lze odkazovat přímo na určenou část dokumentu, což se hodí zejména v takovém případě, když je dokument velmi rozsáhlý.

Jak takovou kotvu vytvořit? Dřívější recept vypadal následovně:

... <a name="kotva">nějaká kotva</a> ...

Na tento úsek textu pak je možné odkázat tak, že se na konec URL připojí ještě řetězec #kotva (té části URL za znakem # se říká hash). Funguje to mimochodem dodnes. Později se místo atributu name začal používat atribut id, který je vlastní všem elementům (lze jej využít i v XML), způsob použití se ovšem nezměnil.

Je-li součástí použité URL hash, prohlížeč zkoumá, zda se v dokumentu nachází kotva odpovídající hashi (odpovídat by měla i velikost písmen, ale není to nezbytné). Jestliže je relevantní kotva nalezena, prohlížeč posune stránku přímo na odkázaný úsek. Někdy je ovšem stránka tak malá, že se celá vejde do okna prohlížeče, a tudíž ji nelze posunovat. Uživateli pak chvíli trvá, než najde to, co ho zajímá. Podobně je tomu v případě, když je odkázaný úsek až na konci stránky. I tato okolnost znemožní posunout stránku úplně přímo k místu, kde to uživatel potřebuje. Z těchto i jiných důvodů mnohé napadlo, že by bylo vhodné odkázanou část zvýraznit, aby si jí uživatelé okamžitě všimli. Petr Staníček kdysi uveřejnil návod, jak toho dosáhnout pomocí JavaScriptu, dnes však už k tomuto účelu postačí v CSS využít novou pseudotřídu :target.

:target {border: 2px solid violet}

Zde si můžeme prohlédnout účinek tohoto primitivního CSS kódu. Ta část obsahu, která se týká hypertextových odkazů, je zřetelně ohraničená, takže čtenář hned vidí, kde začíná a kde končí, což pro něj může jistě být užitečné. Na druhou stranu, pokud je část obsahu takto zvýrazněná, nepůsobí celek příliš harmonicky. I s tím je potřeba se nějak vypořádat. V prvé řadě sladit zvýraznění, zejména barevně, s designem webu. Dále je možné nechat zvýraznění po chvíli zmizet.

Vykrádání historie prohlížečů

Webdesignéři mohou díky pseudotřídám :link a :visited nastavit odlišný styl pro navštívené a nenavštívené odkazy. To je nepochybně užitečné, uživatelé tak mohou získat přehled, na co už klikli, ale též zneužitelné, neboť přehled, na jaké jiné stránky dotyčný uživatel chodí, může snadno získat i zvědavý autor. Například tak, že sledovaným odkazům přidá pomocí vlastnosti background-image na pozadí nějaké obrázky (interval-cz-visited.png, jakpsatweb-cz-visited.png, w3-org-visited.png atp.). U navštívených odkazů se obrázky stáhnou, čímž se vytvoří záznamy v logu na serveru. Tento způsob je pouze první, nejstarší, později už bylo možné použít k detekci navštívených odkazů i JavaScript.

Možností zneužití zmíněné techniky byla celá řada. Hodit se mohla původcům phishingových útoků. E-shopy zase mohli takto zjišťovat, zda navštěvujeme jejich konkurenci (případně i které sekce konkurenčních e-shopů a jestli tam máme účet) a podle toho nabídnout adekvátně nižší ceny, nebo naopak přidražit. Výborně by se tato metoda uplatnila také pro cílení reklamy: Stačilo by na svůj web nastrčil skryté odkazy vedoucí na cizí, tématicky zaměřené, servery a JavaScriptem pak detekoval, které z nich odpovídají stylu navštívených odkazů. Kdyby se ukázalo, že dotyčný uživatel navštěvuje web pro maminky, bylo by nadějné mu z portfolia inzerentů naservírovat reklamu na hračky, dětskou výživu, dětské oblečení atp.

Z těchto důvodů se v novějších prohlížečích omezilo stylování navštívených odkazů jen na barvy a znemožnila se jejich detekce JavaScriptem.

Vylepšování odkazů

Standardní hypertextové odkazy, jak je známe ze specifikace HTML 4, mají svá omezení, proto se stále objevují nápady, jak je vylepšit, například do prohlížeče Mozilla se ve verzi 1.6 dostala podpora atributu ping. Hodnotou tohoto nestandardního atributu je URL, k níž se vyšle signál o tom, že uživatel klikl na odkaz. Záměrem bylo usnadnit měření počtu kliknutí, zvlášť v případech, kdy cíle odkazů jsou někde mimo kontrolu autora stránky.

S velmi zajímavým nápadem přišla pracovní skupina, která připravovala návrh specifikace XHTML 2 – rozšířit atribut href na všechny elementy. Element a by tak nebylo nutné cpát dovnitř jiných elementů, protože samy tyto elementy by mohly sloužit jako odkazy. Z hlediska sémantiky by se tím asi nic nezměnilo, jen by se vytratila exkluzivita dvou elementů (a, area) plnit funkci odkazu.

Odkazy se nevyhnuly úpravě ani v HTML 5. Podle nové normy bude korektní používat a i jako blokový element. To umožní „zabalit“ nadpis, odstavce atd. do jediného velkého odkazu. Něco takového se praktikovalo už i dříve, ale nebylo to validní, a je totiž řádkový element.

Pozadu přirozeně nemohli zůstat ani autoři specifikace XML Linking Language (dále jen XLink). Ti usoudili, že model hypertextových odkazů používaný v HTML není dostačující, že neumožňuje vše, co by bylo potřeba, a že pro XML dokumenty je tudíž nezbytné vymyslet zbrusu nový model. Specifikace XLink definuje pro XML dokumenty dva typy hypertextových odkazů: jednoduché a rozšířené. První typ se skoro neliší od klasických odkazů, které známe z HTML, atributy xlink:href, xlink:show, xlink:title plní stejnou funkci, jakou plní v HTML atributy href, target, title. Další atributy, jako např. xlink:actuate (udává, kdy se má odkaz následovat: zda hned po načtení dokumentu, nebo až na vyžádání, a nebo nikdy), zásadní přínos nemají. Zatímco jednoduché odkazy jsou jednosměrné a je u nich jasné, odkud a kam odkaz vede, rozšířené odkazy sofistikovaně mapují vztahy mezi informačními zdroji, což v důsledku umožňuje dělat takové věci jako propojovat jedním odkazem více informačních zdrojů (lze k tomu využít i databáze odkazů) nebo vytvářet dvousměrné odkazy či konstruovat odkazy spojující dokumenty, k nimž nemusíme mít právo zápisu (například proto, že jsou na cizím serveru) nebo které odkazy nepodporují (např. formáty pro ukládání videozáznamů).

XPointer aneb adresnější adresy

S odkazy se nesetkáváme pouze na webu, v právních dokumentech nikdy nechybí odkazy na zákony a jejich konkrétní paragrafy. U citací z bible zase vždy najdeme odkaz na konkrétní verš. V porovnání s těmito druhy odkazů vypadají hypertextové odkazy v HTML dosti nekonkrétně, neboť umožňují odkázat pouze na celý dokument a ne již na konkrétní kapitolu či odstavec. Ano, na obsáhlejších webových stránkách jsou obvykle rozmístěny tzv. kotvy, čehož se dá využít k odkázání na konkrétní část obsahu, ale kotvy nejsou úplně šikovným řešením. Jednak se musí vytvořit, což je pro autora informačního zdroje práce navíc, které se ujme zpravidla jen tehdy, když cítí nutnost provázat dokument systémem vnitřních odkazů, a jednak nemusí kotva vyznačovat přesně to místo, na něž chceme odkázat. Jistě, s kotvami se pojí řada drobných komplikací, ale existuje snad něco lepšího?.

Adresování částí XML dokumentů řeší specifikace XML Path Language (dále jen XPath), vychází přitom ze struktury dokumentu, takže nějaké kotvy nebo něco podobného nejsou nutné. Velmi to připomíná CSS selektory, přestože jejich úloha a syntaxe jsou přirozeně odlišné.

V rámci připravované specifikace XML Pointer Language (dále jen XPointer) je navrženo kromě jiných i schéma xpointer(), které standardizuje použití XPath v URL. Jedná se o výraz ve tvaru xpointer(XPath), uvozený znakem #. Přidává se na konec URL.

Příklad: http://example.com/article.xhtml#xpointer(/html/body/h2[3])

Pomocí XPath lze adresovat konkrétní element v XML dokumentu, schéma xpointer() však zachází ještě dále a zavádí dodatečné vlastnosti a funkce, díky nimž je možno adresovat konkrétní znak či rozsah nebo vyhledat v dokumentu určitý řetězec.

V dokumentech se občas provádějí určité korekce, které mohou pozměnit strukturu nebo obsah dokumentu, na jehož fragment odkazujeme. Naštěstí XPointer umožňuje odkázat na daný fragment vícero výrazy zároveň, což si můžeme předvést na dalším příkladu:

http://example.com/article.xhtml#xpointer(//*[h2="XPointer"])xpointer(/html/body/h2[3])

Výrazy se vyhodnocují zleva doprava tak dlouho, dokud některému z nich nevyhovuje část dokumentu. V našem příkladu se tedy nejdříve bude hledat nadpis s textem „XPointer“. Jestli autor daného dokumentu nadpis později změní na XML Pointer Language, stále bude ještě dohledatelný skrze cestu /html/body/h2[3].

XPointer byl vymyšlen pro potřeby XML aplikací, není ovšem důvod, proč by nemohl být uplatněn i v jiných značkovacích jazycích, možná, že se tak někdy v budoucnu stane. Dalo by se pak například odkazovat na konkrétní části cizích webových stránek. Zatím je ale tato specifikace stále ve fázi pracovního návrhu.

Z nadhledu

Hypertextové odkazy jsou ve své obecnosti tématem natolik rozsáhlým, že je ani při snaze o maximální stručnost nelze v jediné stati postihnout komplexně, proto jsme se omezili jen na některé body jako XPointer, XLink, kotvy a zbylé věci vynechali.

Z předešlých kapitol mohlo vyplynout, že hypertextové odkazy procházejí pomalým leč trvalým vývojem, ukázali jsme si také, jakými směry by se mohlo zdokonalování hypertextových odkazů příště ubírat, léty prověřený princip fungování odkazů však zůstane pravděpodobně zachován.

Zdroje

Mohlo by vás také zajímat

Nejnovější

4 komentářů

  1. petr_p

    Zář 1, 2010 v 19:36

    Divím se, že toto je první článek zmiňujcí XLink a XPointer. Já XPointer zcela běžně používám ve svých XSLT transfromacích na serveru, když sestavji stránku z více generovaných dokumentů.

    Jak krásné by bylo, kdyby XPointer uměly i webové prohlížeče. Bylo by možné odkazovat na libovolný element, větu nebo slovo, anižby k tomu člověk potřeboval požehnání autora.

    Rovněž XLink by našel své uplatnění. Například tady místo sekcí „Zdroje“ nebo „Tematicky související články“ by byl jediný odkaz, který by po aktivaci uživateli nabídl seznam odkazů, z kterého by si teprve uživatel vybral. Jak by se webové stránky odhlehčily, kdyby nemusely být plné navigačního balastu.

    Odpovědět
  2. Lukas

    Led 26, 2012 v 17:35

    Zdravím,
    v textu u kotev píšete:
    „Dále je možné nechat zvýraznění po chvíli zmizet.“

    Mne by zajímalo, jak je to možné. Javascriptový způsob s gif animací znám, ale zajímalo by mne, jak se to zmizení nastavuje v css. Pokud jste tedy neměl na mysli práve js..

    Odpovědět
  3. Pavel Salvet

    Led 31, 2012 v 16:24

    Měl jsem na mysli kombinaci JS a CSS:
    document.querySelector(„:target“).style.borderWidth=“0″;

    >ale zajímalo by mne, jak se to zmizení nastavuje v css.

    http://interval.cz/clanky/css-3-uvod-do-prechodovych-efektu/

    Odpovědět
  4. Aladin

    Kvě 17, 2013 v 18:34

    Přes CSS nejde udělat zmíněné zmizení, nanejvýš jde udělat plynulé zjevení.

    Odpovědět

Napsat komentář: petr_p Zrušit odpověď na komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *