V předchozí části jsme poznali základní kameny jazyka HTML, používaného pro vytváření WWW stránek. Dnes se budeme zaobírat grafikou na stránkách. Proč tak brzy? Vždyť HTML má ještě tolik neprobádaných zákoutí... Protože grafika je jednou z vařených nudlí, na kterých Web utáhl hromadu uživatelů. Známý slogan říká "prodává obal" a má samozřejmě pravdu. Hezké stránky se ucházejí o přízeň uživatelů snadněji, než stránky stroze textové, byť s informacemi srovnatelné kvality.

Ačkoli existují puristé, kteří obrázky ve Webu kategoricky odmítají, v reálné praxi to bez grafiky nepůjde. Než se však pustíme do technického řešení, dovolte krátkou úvodní ideologickou promluvu. Vaším heslem budiž "všeho s mírou". Obrázky je vhodné použít jako ilustrace, pro vytvoření kompaktního vzhledu stránek z téhož serveru, či pro oživení textu. Nemělo by jich však být příliš. Jednak by se neúměrně prodloužila doba přenosu stránky k uživateli (protože obrázky jsou ve srovnání s textem příliš veliké), jednak hrozí přeplácání. Vzpoměňte, jak pejsek s kočičkou vařili dort. Umístíte-li v dobré víře na jednu stránku příliš mnoho ozdob, vnikne nepoživatelný zmetek.

Formát JPEG je doporučován především pro obrázky charakteru fotografií, oplývající plynulými přechody barev, světel a stínů. Tento formát nezachovává kompletní obrazovou informaci. Při ukládání do JPEG souboru dává většina programů možnost zvolit, jak vysokou kvalitu výstupu požadujete. Vyšší hodnota znamená věrnější obrázek, ale zároveň větší objem dat. Je třeba najít vhodný kompromis.

Nejdůležitějším je samozřejmě atribut SRC. Udává, kde má klient vzít dotyčný obrázek. Jeho hodnotou je lokátor (čili URL), identifikující umístění obrázku v Internetu. Problematice URL bude věnován jeden z příštích dílů. Zatím se spokojme s informací, že pro obrázky, uložené ve stejném adresáři jako stránka, stačí uvést jméno jejich souboru.

Nyní zopakuji větu, kterou ve světě WWW slyšíte na každém rohu. Zobrazení stránky závisí na klientovi. Pracuje-li v textovém režimu, nejsou mu obrázková data mnoho platná. Pro takové klienty je určen atribut ALT, kterým lze zadat alternativní text. Neobrázkový klient jej vloží do stránky na místo výskytu značky <IMG> a nahradí tak obrázek textem, který jste v atributu zadali. K dokonalosti má tato náhrada daleko, ale je lepší než nic. Považuje se za neslušnost použít značku <IMG> bez atributu ALT.

Ačkoli se to zdá podivné, je s obrázkem zacházeno stejně jako s písmenem. Stává se bežnou součástí řádku, na kterém se vyskytne. Chcete-li jej osamostatnit, musíte použít značky <P> nebo <BR>, kterými jej oddělíte od okolního textu. Když obrázek ponecháte jako součást řádku, můžete díky atributu ALIGN definovat jeho zarovnání vůči ostatním znakům na řádku. Přípustnými hodnotami jsou TOP (zarovnají se horní okraje), BOTTOM (spodní okraje, implicitní hodnota) a MIDDLE. Poslední varianta se chová lehce podivně. Zarovná totiž střed obrázku proti účaří řádku. Výsledkem je umístění středu obrázku mírně pod optickým středem řádku. Záleží na vzájemném poměru velikostí obrázku a písma, zda je výsledek přijatelný.

HTML verze 3 přišel se dvěma novými možnostmi zarovnání. Jsou jimi LEFT a RIGHT, které vyjmou obrázek z řádku a umístí jej k levému (pravému) okraji stránky. Text pak nechají obtékat kolem něj. Výsledky jednotlivých způsobů zarovnání vidíte na přiloženém příkladu.

Obtékané obrázky mohou přinést nepříjemnou komplikci. Může se totiž stát, že potřebujete zahájit další logicky oddělenou část dokumentu, ale stále se ještě nacházíte v oblasti textu, obtékající kolem většího obrázku z části minulé. Bylo by krajně nevhodné umístit zde nadpis další části. Potřebovali byste, aby byla zahájena až pod obtékaným obrázkem a jasně se tak dalo najevo, že s ním nemá nic společného. V takovém případě zakončete text značkou <BR> s atributem CLEAR=ALL. Jeho význam je "zahájit nový řádek, ale až pod všemi obtékanými obrázky". Kromě hodnoty ALL lze použít i LEFT a RIGHT. Pak umístí nový řádek pod poslední obtékaný obrázek u levého (pravého) okraje.

Atributy WIDTH a HEIGHT sdělují klientovi rozměry vkládaného obrázku v bodech (pixelech). Používají se především pro rychlejší zobrazení nehotové stránky. Klient teprve přenáší její zdrojový text a třeba se ještě ani nedostal k tomu, aby zahájil přenos dotyčného obrázku. Díky WIDTH a HEIGHT však již ví, kolik místa pro něj má vyhradit a jak formátovat okolní text. Bez této informace by musel čekat, až obdrží alespoň začátek souboru s obrázkem, ze kterého by vyčetl potřebné rozměry.

Je důležité, aby se uvedená čísla shodovala se skutečnými rozměry obrázku. V opačném případě někteří klienti (například Netscape Navigator) zvětší/zmenší/zdeformují obrázek tak, aby vyhověl předepsaným rozměrům. Připravte se, že na něj nebude zrovna hezký pohled.

Nejelegantnější cestou je použít obrázek s průhledným pozadím. Takovou možnost poskytuje GIF, konkrétně jeho verze z roku 1989. V něm lze jednu barvu označit za průhlednou. Všemi body obrázku, které jsou zobrazeny dotyčnou barvou, pak bude prosvítat pozadí stránky.

V případě zmiňovaného loga máme po starostech: logo, vyvedené v černé a bílé, umístíme na šedé pozadí a šedou zprůhledníme. To lze realizovat buď některým z obvyklých grafických programů nebo programem specializovaným. Prozkoumejte, zda váš oblíbený nástroj na přípravu grafiky umí (nebo se dokáže naučit) ukládat GIF s průhlednou barvou. Tuto možnost nabízí například shareware PaintShop Pro. Jinou alternativou je použít giftool, distribuovaný jako freeware. Ten je k dispozici ve formě zdrojových textů v jazyce C, takže by měl být přeložitelný téměř všude.

Poznámka: Nebudu zde uvádět přesná URL programů, o kterých se zmiňuji. Lze je nalézt prostřednictvím služby Nosey Parker na URL

http://www.vslib.cz/parker.html

Druhou nepříjemností je plynulý přechod obrázku do barvy pozadí (například vržený stín). Tady je každá rada drahá. Můžete si takové věci prostě zakázat. Nebo sladit barvy tak, aby barva pozadí stránky co nejpřesněji odpovídala barvě, do níž obrázek přechází. Systémové řešení by mohl přinést až nový formát PNG, který umožňuje definovat plynulou škálu průhlednosti.

Metod, jak redukovat objem dat, není mnoho. O první jsem se již zmínil - je jí volba vhodného formátu. Experimentujte, zda dotyčný obrázek vychází lépe ve fromátu GIF či JPEG (zde si navíc pohrát s nastavením kvality).

Druhou možností je prostě zmenšit rozměry obrázku. Pokud by tím utrpěla informace, kterou přináší, lze zvolit kompromis. Vytvořte k obrázku jeho náhled, tedy verzi zmenšenou na velikost poštovní známky. Náhled umístěte na stránku a udělejte z něj odkaz (jak, se dozvíte později). Když si jej uživatel vybere, obdrží kompletní verzi. S původní stránkou tedy uživatel dostane jen velmi malé náhledy, které mu však poskytnou dobrou představu, co zhruba může od daného obrázku očekávat. Pokud jej zajímá, může na přání získat plnou (velkou) verzi.

Poslední odtučňovací metodou je redukce barev. Ta se týká jen formátu GIF, v JPEG nemá žádný smysl. Je zbytečné využívat maximálního počtu 256 barev, který GIF nabízí. Kresby zpravidla vystačí se 16 barvami, fotografie lze většinou redukovat na 64 nebo dokonce 32 barev, aniž by tím příliš utrpěla jejich vizuální kvalita. Experimenty se v této oblasti opět vyplácí.