 |
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 naprosto 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, a
tí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
že 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 nachází na obrázku.
- 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="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, zkuste 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í 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 :).
Související články:
Zajímá-li vás
bližší pohled na tento článek, podívejte se na něj v
souvislostech.
 |
 |