Jak vytvářet www stránky - 8. díl
Obrázky
Jak by asi vypadaly internetové stránky bez grafiky? V některých případech možná dobře, ale většinou potřebujete návštěvníka něčím zaujmout, upoutat jeho pozornost, a k tomu právě slouží různé grafické prvky. Nikdy ale nezapomeňte, že příliš velké množství obrázků nejen že zpravidla snižuje přehlednost celé stránky, ale také podstatně zvyšuje dobu nutnou k přenosu této stránky (obzvláště při komutovaném připojení může být doba nutná k natažení markantně vyšší). Vždy se pokuste nejprve zamyslet nad tím, zda by stejného nebo podobného efektu nešlo dosáhnout použitím vhodně formátovaného písma, barvami pozadí či například tabulkami, které budeme probírat později.
Prvním podstatným krokem je volba vhodného formátu. Webové prohlížeče standardně podporují JPEG a GIF, pomalu se rozjíždí i PNG, který je v normě HTML 4.0 definován jako standard, nicméně některé starší prohlížeče si s ním neví rady. V současné době tedy doporučujeme zůstat u prvních dvou. Jaké jsou jejich vlastnosti a jaké jsou mezi nimi rozdíly:
GIF
- Komprese: bezztrátová, tento formát se hodí například pro čárovou grafiku, screenshoty dialogových oken atp.
- Barevná hloubka: omezená na 256 barev
- Možnost transparentního pozadí: ano
- Možnost animace: ano
Poznámka: uvedené vlastnosti se týkají formátu GIF 89
JPEG
- Komprese: ztrátová, tento formát využívá nedokonalosti lidského zraku a "rozostřuje" některé části obrazu. Je vhodný především k publikování fotografií, naopak zcela nevhodný je v případech, že požadujete zcela přesnou grafiku.
- Barevná hloubka: True color
- Možnost transparentního pozadí: ne
- Možnost animace: ne
Poté, co si vyberete, v jakém formátu budete obrázek prezentovat zbývá pouze vložit jej do HTML kódu stránky. To se provádí pomocí nepárového tagu IMG (image=obrázek). Jeho základní syntaxe vypadá následovně: <IMG SRC="obrazek">, kde obrazek je cesta k příslušnému grafickému souboru, kterou specifikujeme zcela stejně, jako v případě odkazů (viz. 6. díl našeho seriálu). Na rozdíl od odkazu ale není vhodné používat obrázky z jiných serverů - veškerou grafiku raději uložte na stejný server, na němž se nachází samotná stránka. Hlavním důvodem je, že při natahování stránky musí browser kontaktovat ještě další server, na němž máte uložený příslušný obrázek, čímž se o něco prodlouží doba nutná k jeho zobrazení. Navíc pokud tento server nebude fungovat (např. v důsledku nějakého výpadku), zobrazí se místo grafiky pouze značky symbolizující, že obrázek nelze nalézt, nebo není dostupný.
Tag IMG disponuje širokým množstvím parametrů, z nichž nejdůležitější jsou následující:
ALT="popisek obrazku" - parametr ALT určuje alternativní text, který:
- se zobrazí v případě, že má uživatel pomalý modem a z tohoto důvodu si vypnul zobrazení obrázků. Pomocí alternativního textu tak snadno pozná, co se nachází v které části stránky a důležité obrázky může ručně aktivovat přes pravé tlačítko myši v menu Zobrazit obrázek.
- Tento text také využívají textové browsery, na něž bychom neměli při vytváření www stránek nikdy zapomínat.
- Text uvedený v parametru ALT se v Internet Exploreru (a dalších prohlížečích) zobrazí v případě, že nad obrázkem zastavíte myší, v malém obdélníčku se žlutým pozadím. Můžete jej tedy použít i k popisu toho, co se na obrázku nachází.
- V blízké budoucnosti bude text uvedený v tomto parametru používán k zvukové navigaci na stránce pro uživatele s vadami zraku.
WIDTH="sirka v pixelech" a HEIGHT="vyska v pixelech" - tyto parametry určují, jaký prostor bude pro obrázek vyhrazen. Neuvedete-li je, natáhne prohlížeč nejprve text a teprve poté začne zobrazovat obrázky a upravovat pro ně potřebné místo. Během tohoto procesu veškerý text nepříjemně "poskakuje" a čtenář musí počkat, než se natáhnou obrázky, aby se mohl v klidu začíst.
Doporučujeme uvádět skutečnou velikost obrázku - určíte-li výšku a/nebo šířku větší, než odpovídá skutečnosti, bude obrázek zdeformován, pokud naopak tímto způsobem obrázek "zmenšíte", bude uživatel čekat na přenesení zbytečně velkého souboru, který pak následně prohlížeč transformuje.
Za naprosté minimum odpovídající všem normám lze tedy považovat obrázek, který je vložen následujícím způsobem:
<IMG SRC="../pictures/ja.jpg" ALT="tak toto je moje fotografie" WIDTH="100" HEIGHT="150">
Dalším důležitým atributem je zarovnání obrázku s textem, které se provádí pomocí parametru ALIGN. Ten může mít následující hodnoty:
- ALIGN="left" obrázek je zarovnán na stránce vlevo, text ho obtéká z pravé strany.
- ALIGN="right" obrázek je zarovnán na stránce vpravo, text ho obtéká z levé strany.
- ALIGN="top" horní okraj obrázku je zarovnán s textem, zbývající text obrázek neobtéká, ale pokračuje až pod obrázkem
- ALIGN="texttop" obvykle shodné s "top"
- ALIGN="middle" střed obrázku je zarovnán se základnou textu, zbývající text obrázek neobtéká, ale pokračuje až pod obrázkem
- ALIGN="absmiddle" střed obrázku je zarovnán se středem textu, zbývající text obrázek neobtéká, ale pokračuje až pod obrázkem
- ALIGN="baseline" spodní okraj obrázku je zarovnán se základnou textu
- ALIGN="bottom" - odpovídá parametru baseline
- ALIGN="absbottom" - spodní okraj obrázku je zarovnán se základnou nejspodnější linky textu.
Abyste si to celé mohli lépe představit, vyzkoušejte si vytvořit stránku, na níž postupně vložíte obrázek se všemi uvedenými parametry.
Ostatní parametry zmíníme jen stručně, protože nejsou pro formát obrázku ani obtékání textu určující:
BORDER - šířka rámečku kolem obrázku určovaná v pixelech (implicitní je 0, tedy obrázek bez rámečku)
VSPACE a HSPACE - pokud je obrázek obtékán textem, můžete pomocí těchto parametrů definovat volný prostor kolem obrázku (text "přilepený" těsně na obrázek, jak jistě sami uznáte, nevypadá příliš dobře). Parametr VSPACE určuje volný prostor ve vertikálním směru (tj. pod a nad), HSPACE pak v horizontálním (tj. vlevo a vpravo). Hodnota se opět udává v pixelech.
To je tedy v kostce vkládání obrázků do www stránek. Grafiku můžete chytře využít ve spojením s hyperlinkovými odkazy například tak, že si vytvoříte grafické ovládací prvky (tlačítka, ikonky, ...), které budou fungovat jako odkaz. To provedete následujícím způsobem:
<A HREF="cesta k odkazovanému dokumentu"><IMG SRC="obrazek který bude sloužit jako odkaz" ALT="text který se zobrazí po najetí myší na obrázek" HEIGHT="výška obrázku" WIDTH="šířka obrázku"></A>
Pokud jste četli předchozí díl našeho seriálu, jistě jste poznali, že místo textu, který by se měl zobrazit jako hyperlinkový odkaz, je do tagu A vložen obrázek. Aby se odlišil od okolních obrázků, které například nemusí být současně odkazem na jiné soubory, má tento obrázek kolem sebe modrý rámeček. Pokud by vám tento rámeček kazil estetické ztvárnění vašich stránek, můžete jej jednoduše odstranit uvedením parametru BORDER=0 v tagu IMG.
Tolik tedy pro tento týden k obrázkům. Příště se podíváme na to, jak si můžete pohrát s textem. Do té doby si zkuste vytvořit nějakou stránečku s obrázkem, který bude fungovat jako odkaz na www.zive.cz :).
|
