Staňte se WWW-autorem (část 3, závěrečná)

10 Odkazy

Textovou část máme úspěšně za sebou. Abychom splnili volební slib, je zapotřebí k ní přidat hyper. Pojmem hypertext bývá označován text, jehož některé části představují odkazy na texty jiné.

V HTML jsou odkazy realizovány značkou <A> (Anchor). Je párová a řetězec znaků, uzavřený mezi <A> a </A>, reprezentuje odkaz. Je zařazen do textu a nějakým způsobem zvýrazněn (barevně, podtržením a podobně). Pokud jej uživatel vybere (např. prostřednictvím myši), obdrží dokument, na který tento odkaz vede.

Cíl odkazu je určován pomocí atributů značky <A>. Stejně jako u ostatních párových značek jsou atributy součástí otevírací konstrukce. Zapisují se ve formě

jméno=hodnota

Jméno určuje, kterému atributu přiřazujeme hodnotu. Přípustná jména pochopitelně závisí na dané značce - každá má jiné atributy. Hodnota bývá často uzavírána do uvozovek.

V případě odkazů bývá nejčastějším atributem HREF, určující cíl odkazu (dokument, který má být zobrazen, když uživatel zvolí odkaz). Jeho tvar je

HREF="URL"

Například odkaz na WWW server Technické univerzity v Liberci (jehož URL je http://www.vslib.cz/) může být do textu začleněn konstrukcí uvedenou na obrázku 9.

Zadáte-li v odkazu absolutní (tedy kompletní) URL, je jeho prostřednictvím cílový dokument plně identifikován. Můžete však použít i relativní URL. V něm chybí identifikace přístupové metody a serveru a dokument se chápe jako součást téhož serveru. Při určování cíle takového odkazu klient vždy vyjde z URL aktuálního dokumentu a jeho část přizpůsobí podle obsahu relativního odkazu. Mohou nastat dva případy:

Začíná-li URL v odkazu lomítkem, nahradí v URL aktuálního dokumentu celou část za identifikací serveru. Jestliže např. v dokumentu s URL http://www.x.cz/docs/uvod.html použijete odkaz s atributem
HREF="/pub/welcome.html"
vede tento odkaz ve skutečnosti k dokumentu http://www.x.cz/pub/welcome.html.
Jestliže URL začíná čímkoli jiným, chápe se jako relativní vůči umístění aktuálního dokumentu. Pokud tedy ve výše zmíněném dokumentu http://www.x.cz/docs/uvod.html použijete odkaz s
HREF="kapitola1.html"
bude při jeho zvolení zobrazen dokument http://www.x.cz/docs/kapitola1.html.

11 Cíle pro odkazy

Ve většině případů bývají cílem odkazů celé dokumenty. HTML vám však dává možnost odkazovat se také na určitá místa v nich. Chcete-li tuto konstrukci použít, nejprve musíte v cílovém dokumentu vyznačit místo, které má být cílem budoucího odkazu. Poslouží vám opět značka <A>, ovšem tentokrát s atributem NAME. Například konstrukce

<A NAME="uvod">Úvod</A>

vytvoří v místě svého výskytu návěští pro skok se jménem uvod. Když se na něj později odkazujete, musíte v atributu HREF uvést mřížku (#), následovanou jménem návěští. Odkazujete-li se v rámci téhož dokumentu, máte identifikaci cíle kompletní. Tedy pokud se v dokumentu s výše definovanou značkou má později objevit odkaz úvod, může vypadat takto:

V <A HREF="#uvod">úvodu</A> jsem uvedl...

Kromě toho lze křížek a návěští připojit za libovolné platné URL dokumentu. Odjinud tedy odkaz může vypadat

Viz <A HREF="http://www.x.cz/docs/manual.html#uvod">úvod</A> článku...

Používání odkazů na části dokumentů bych si dovolil spíše nedoporučit. Uvědomte si, že klient tak jako tak musí načíst celý dokument, aby mohl zjistit, kde se v něm nachází požadované návěští (musí tedy přenést po síti i ty části, které jsme chtěli díky návěští přeskočit). Zpravidla bývá vhodnější rozdělit text na několik dílčích dokumentů než ponechat jeden velký a jeho části vyznačit návěštími.

12 Obrázky

S hypertextovostí jsme se úspěšně vyrovnali, zbývá multimedialita. Odkazované dokumenty mohou být různého druhu. V rámci WWW se lze odkazovat na obrázky, zvuky, videosekvence, atd. atp. Klientský program si zpravidla pro jejich zobrazení spouští specializované programy.

Pro klasifikaci druhu dokumentu byla převzata typologie z MIME (Multipurpose Internet Mail Extensions - rozšíření elektronické pošty pro přepravu multimediálních a jiných rafinovaných dopisů - viz Computer Echo 4/95). Každému dokumentu je přiřazen určitý typ (např. obrázek) a podtyp (např. GIF) podle klasifikace MIME. V konfiguračním souboru klienta je pak řečeno, jaký zobrazovač má být volán pro danou dvojici typ+podtyp. Vybere-li uživatel z aktuálního dokumentu řekněme odkaz na zvukovou sekvenci, správně konfigurovaný klient zavolá odpovídající program, který ji přehraje.

Kromě možnosti odkázat se téměř na cokoli umožňuje HTML zařazovat obrázky přímo do dokumentu. Klient, pracující v grafickém prostředí, je pak zobrazí jako součást dokumentu (např. symbol firmy v záhlaví stránky, obrázek popisovaného předmětu a podobně). Jediným oficiálně podporovaným grafickým formátem pro tento účel je GIF. Poslední verze klientů jsou schopny akceptovat i JPEG. Tato možnost je však nestandardní a proto doporučuji (alespoň prozatím) držet se GIFu.

Obrázek do textu zařadíte prostou značkou <IMG>. Všechny potřebné informace musíte doplnit prostřednictvím atributů. Nejdůležitější nepochybně je atribut SRC. Určuje, odkud se má obrázek vzít. Jeho tvar je

SRC="URL"

Například

<IMG SRC="/html/gifs/logo.gif">

vloží do dokumentu na místo svého výskytu obrázek logo.gif. Bude pocházet z aktuálního serveru (je použito relativní URL) a vede k němu cesta /html/gifs. Mimochodem - doporučuji vytvořit si v rámci serveru (či jeho části) jeden společný adresář pro běžně používané obrázky. Do něj ukládejte obrázky, odkazované v řadě dokumentů (značky institucí, oddělení či autorů, obrázky tlačítek a podobně). Naproti tomu obrázek, specifický pro určitý dokument (např. zobrazení budovy, o které se mluví) je vhodné umístit do stejného adresáře s dokumentem.

Atributem ALIGN můžete ovlivňovat pozici obrázku vůči okolnímu textu. Obrázek je totiž normální součástí textu na aktuálním řádku. Mohou být zarovnány buď jejich horní okraje (horní okraj obrázku s horním okrajem okolního textu, tuto variantu nařídí atribut ALIGN=TOP) nebo spodní okraje (ALIGN=BOTTOM) nebo mohou být navzájem centrovány (ALIGN=MIDDLE).

HTML verze 3 i klientský program Netscape rozšiřují přípustné hodnoty atributu ALIGN o LEFT a RIGHT. V takovém případě vznikne obrázek obtékaný textem. Je umístěn vlevo (při hodnotě LEFT) respektive vpravo (RIGHT) od okolního textu. Jednou z efektních možností využití atributu ALIGN=LEFT je vytvoření velké inicály na začátku odstavce. Příklady jednotlivých druhů zarovnání obrázků najdete na obrázku 10.

Zařadíte-li do dokumentu obtékaný obrázek, může se stát, že obtékající text je příliš krátký. Vedle obrázku se pak může nevhodně objevit například nadpis další části textu. Abyste tomu zabránili, použijte na konci obtékajícího textu značku <BR CLEAR=ALL>. Atribut CLEAR značky <BR> způsobí, že další text bude zařazen až pod obtékané obrázky. Přípustné hodnoty atributu jsou ALL (všechny), LEFT (týká se jen obrázků zarovnávaných doleva) a RIGHT (jen doprava). Teď už jsme ale zabrousili příliš daleko do končin, specifických pro Netscape. Honem zpátky ke standardu!

Je záhodno pamatovat i na klienty, pracující v textovém režimu. Jejich uživatelé se musí obejít bez obrázků. HTML umožňuje utěšit je alespoň nápisem, který se vypíše na místě obrázku. Lze jej definovat atributem

ALT="alternativní text"

Pokud klient neumí zobrazit obrázek (dělají to i některé grafické programy, když jim uživatel zakáže přenos obrázků), vypíše místo něj alternativní text. Komplexní příklad použití obrázku v nadpisu stránky najdete na obrázku 11.

Je z něj patrné, že obrázky jsou normální součástí textu. Mohou být tudíž zařazovány do nejrůznějších konstrukcí, o kterých jsem mluvil. V příkladu je obrázek součástí záhlaví první úrovně (<H1>). Dalším častým případem jsou grafické symboly, reprezentující odkazy. Např. bývá poměrně časté zařadit na konec každé stránky možnost skoku na domácí stránku daného WWW serveru. Bývá reprezentován ikonou s domečkem (řekněme, že je uložena v souboru home.gif). Dotyčný odkaz může být realizován následovně

<A HREF="/"><IMG SRC="/html/gifs/home.gif" ALT="Go to home page"></A>

Obrázek jakožto počítačový soubor (GIF či JPEG) je vždy pravoúhlý. Tato vlastnost může být nepříjemná - například chceme-li umístit do záhlaví znak instituce, který je jako naschvál kulatý či dokonce nepravidelný. Nemá smysl snažit se strefit barvou pozadí obrázku do barvy pozadí klienta, protože ta se u různých klientů liší. Provizorním řešením může být umístit nepravidelný obrázek na pravoúhlý podklad (jakousi desku). Nejvhodnější však v takovém případě bývá definovat jednu z barev na obrázku jako průhlednou. Části, které nesou tuto barvu, pak na obrázku "nejsou" a prosvítá jimi pozadí dokumentu.

Tuto možnost nám dává GIF z roku 1989 a některé grafické programy ji dovolují pohodlně definovat přímo při ukládání obrázku do souboru. Používáme-li program, který tuto vlastnost nemá, můžeme sáhnout po některém speciálním. Dobře poslouží například jednoduchý filtr giftrans, který je dostupný ve zdrojovém textu a tudíž přeložitelný snad na všech možných počítačích.

Podstatně složitější kapitolu představují obrázky s klikou (clickable images, sensitive images). Chovají se jako mapa - uživateli je zobrazen dokument v závislosti na tom, které místo na obrázku s klikou zvolí. Takto lze realizovat např. turistického průvodce. Uživatel z mapky vybere památku a dostane o ní podrobnější informace. Složitost této problematiky bohužel přesahuje začátečnický úvod do HTML. Dovolím si vás odkázat na specializovaný text, který jsem na toto téma napsal. Najdete jej na URL ftp://ftp.vslib.cz/pub/liane/documents.cz/click-img.ps.

Obrázky jsou samozřejmě velmi atraktivním prvkem a současné WWW servery se jimi jen hemží. Snažme se tomuto trendu alespoň trochu odolávat. Obrázek sice bývá intuitivnější a pro čtenáře příjemnější než text, avšak jeho velikost bývá mnohonásobná. Uvědomme si, že dokument se musí ke svému čtenáři přenést Internetem, mnohdy na značnou vzdálenost. Nepřispívejme tedy k současným kapacitním problémům Internetu umisťováním nesmyslných a obludně velkých obrázků tam, kde nemají opodstatnění.

V každém případě se snažte udržovat obrázky "rozumně" velké, tedy zhruba do 20, maximálně 50 KB. Velikost souboru s obrázkem lze redukovat vhodně zvoleným formátem (pro jednodušší grafiku bývá výhodnější GIF, pro fotografie JPEG) a především snížením počtu barev. Přechod na 32 nebo 64 barev většinou znamená poměrně malou degradaci vzhledu obrázku, na velikosti souboru však může být velmi citelný.

13 Netscapománie

Celkem vhodně této části textu připadlo nešťastné pořadové číslo 13. Slíbil jsem, že se budu pokud možno držet standardního HTML a nenechám se vyvést z rovnováhy různými výstřelky. Klient Netscape však svými nestandardními prvky ovlivnil vzhled WWW stránek natolik významně, že se mu nelze vyhnout. Statistiky ukazují, že zhruba tři čtvrtiny současného WWW provozu jsou realizovány právě prostřednictvím tohoto klienta. Autoři stránek proto používají jeho rozšíření zcela běžně. Já se zde budu věnovat jen těm, která považuji za nejvýznamnější.

Stávající HTML celkem citelně postrádá možnost centrovat prvky dokumentu. Netscape (i HTML 3) pro tento účel nabízí dvojici značek <DIV ALIGN=CENTER>...</DIV>. Vše, co je mezi nimi, bude na stránce centrováno, tedy umístěno ve stejné vzdálenosti od obou okrajů okna.

Velmi atraktivní je možnost definovat barvy dokumentu a dokonce umístit libovolný obrázek do jeho pozadí. Tyto triky se realizují pomocí nestandardních atributů značky <BODY>, která zahajuje tělo dokumentu. Zmíněné atributy jsou BGCOLOR pro barvu pozadí, TEXT určuje barvu běžného textu, LINK definuje barvu odkazů na dokumenty, které uživatel dosud nenavštívil, a konečně pomocí VLINK předepíšete barvu odkazů již absolvovaných. Hodnotou těchto atributů typicky bývá řetězec #RRGGBB, kde RR, GG a BB jsou dvojice číslic v šestnáctkové soustavě, udávajících po řadě intenzitu červeného, zeleného a modrého světla v dané barvě. Například značkou

<BODY BGCOLOR=#000000 TEXT=#FFFFFF LINK=#FF0000 VLINK=#00FF00>

vytvoříte bílý text na černém pozadí, ve kterém budou neviděné odkazy zobrazeny červenou barvou, která se po průchodu odkazem změní na zelenou.

Chcete-li mít v pozadí stránky obrázek, přidejte značce <BODY> atribut

BACKGROUND="URL"

kde URL označuje platné URL dotyčného obrázku. Jestliže rozměry obrázku nepokryjí celé okno, Netscape pokládá další a další kopis tohoto obrázku vedle sebe vytvoří tak v pozadí dokumentu jakési dlaždice. Proto by na sebe měly vhodně navazovat protilehlé okraje obrázku.

Velikost obrázku pro tyto účely by neměla přesáhnout jeden či několik málo KB. Neměl by být příliš kontrastní a obsahovat ostré hrany. V opačném případě výrazně sníží čitelnost dokumentu. Jeho barvy by naopak měly výrazně kontrastovat s barvou písma.

Ukázku dokumentu, využívajícího nestandardní rozšíření Netscape, najdete na obrázku 12.

14 Rada na závěr

Pamatujte na své čtenáře. Ne všichni mají stejné klienty. Ne všichni jsou připojeni megabitovou rychlostí. Snažte se být konzervativní z pohledu použitých prvků HTML. Při práci s grafikou se pokuste najít vhodný kompromis mezi velikostí (a tudíž dobou přenosu) a vzhledem.

Pavel Satrapa

odborný asistent Katedry informatiky TU v Liberci,
se zabývá počítačovými sítěmi a jejich službami.