Zobrazuje se vám obrázek na stránce nebo ne?

5. července 2000

•

Snad každý tvůrce www stránek umí umístnit obrázky do HTML stránky. Někdy ovšem může nastat nepříjemná situace, že někomu se obrázky bez problému zobrazují a někomu naopak vůbec ne. Někdy se dokonce nezobrazují nikomu. Článek se vám pokusí objasnit, proč tomu je a jak to napravit.

Když ukládáte obrázek v nějakém grafickém editoru, např. ve Photoshopu, prakticky jej můžete zcela libovolně pojmenovat. Přitom byste ale měli dodržovat několik nepsaným pravidel, které budou hlavní náplní tohoto článku.

Mezery v názvu obrázku

S příchodem Windows 95 bylo možné používat soubory, jejichž název obsahoval mezery. Na vašem počítači to příliš nevadí, ale na Internetu je to chyba. Představte si, že máte například soubor pojmenovaný jako „prvni zazitek z dovolene.jpg“. Některé prohlížeče v takovém případě budou hledat soubor „prvni“ a samozřejmě, žádný takový obrázek nenajdou. Řešení je jednoduché – nepoužívejte mezery vůbec anebo mezery nahraďte podtržítkem nebo pomlčkou (prvni_zazitek_z_dovolene.jpg)

Lomítka v názvu obrázku

Pro mnoho obrázků se používá název souboru, který je současně datem vytvoření souboru, např. „dovolena-praha/25/05/2000.jpg“. Prohlížeč pak takový název souboru chápe jako adresářovou strukturu. V našem případě by obrázek 2000.jpg hledal v adresáři dovolena-praha, dále v podadresáři 25 a ještě v podadresáři 05. Řešení je snadné, nepoužívat lomítka. Tento příklad je tu jenom pro úplnost, operační systém Windows vám totiž neumožní vložit do názvu souboru lomítka či další zakázané znaky – viz. další odstavec.

V případě, že soubory přesto potřebujete označovat datumem, používejte formát typu „dovolena-praha-25052000.jpg“ nebo „dovolena-praha-25-05-2000.jpg“, kde jednotlivé položky datumu následují hned za sebou, nebo jsou odděleny podržítkem nebo pomlčkou. Další nepovolené znaky jsou třeba otazník, uvozovky, apostrof, dvojtečka apod.

Velikost písma obrázku

Rozlišujte, jakým písmem píšete název souboru. Např. názvy souboru „slunce.gif“ a „sluNce.GIF“ nemusí být shodné. Co se týče HTML kódu, je zcela jedno, jakým způsobem – zdali velkými nebo malými písmeny píšete HTML tagy. Pojmenování obrázku v HTML by ovšem měla být naprosto shodné se skutečným názvem souboru. Tyto problémy se vyskytují především na Linuxových platformách, kde jsou rozlišována velká a malá písmena. Ve Windows je to úplně jedno. Držte se tedy pravidla, že všechny soubory budete pojmenovávat malými písmeny.

Pokud toto pravidlo dávno nedodržujete a nechce se vám to nyní pracně měnit, existuje jednoduché řešení – většina FTP klientů totiž umí při přesunu souborů tyto soubory a přípony zkonvertovat podle přání. A proč doporučuji používat malá písmena? Nezdá se vám název souboru „PRVNI_ZAZITEK_Z_DOVOLENE.JPG“ trochu nezvyklý?

Chybějící nebo špatná přípona obrázku

Všechny prohlížeče a vůbec – všechny aplikace určují spustitelné (zobrazitelné) soubory podle jejich přípony. Pokud tedy máte obrázek například ve formátu .GIF a neuvedete tuto příponu, prohlížeč vůbec nepozná, že se jedná obrázek ve formátu GIF. Výsledek je takový, že se obrázek vůbec nezobrazí.

Občas se navíc setkávám z dotazy ohledně konverze obrázků do jiných formátů. Pro všechny, kdo to neví – rozhodně to nejde tak, že soubor „obrazek.gif“ přejmenujete na „obrazek.png“. V takovém případě prohlížeč očekává obrázek ve formátu PNG a nikoli ve formátu GIF. Pro konverzi obrázků musíte obrázek načít do příslušného programu (např. Photoshop) a zde jej uložit v požadovaném formátu.

Podporované formáty

Formáty, které můžete používat pro webové stránky jsou GIF, JPG a PNG. První dva jmenované jsou podporovány zcela stoprocentně. Formát PNG i přes fakt, že je v některých ohledech mnohem lepší než GIF, si své místo na slunci pořád hledá a prakticky se nepoužívá. Ostatní obrazové formáty jako například TIF, BMP či PSD se vám na stránce v žádném případě nezobrazí – pro použití na www stránkách je musíte převést do formátu GIF nebo JPG.

Cesty k obrázkům

Snad nejčastější chyba začátečníků je ta, že v HTML kódu uvedou špatně cestu k obrázku. Představte si následující stromovou strukturu:

/soubory /pokusy
/prvni_pokus
/druhy_pokus
/images

Pokud máte HTML soubor přímo v rootu webu, tedy v žádném adresáři a obrázky ukládáme do adresáře images, pak cesta k obrázku bude následující:

Pokud máte HTML soubor třeba v adresáři HTML a obrázky v adresáři images, pak bude vypadat cesta takto:

Abyste tomu rozuměli – pomocí dvou teček a lomítka bude prohlížeč vědět, že se má přesunout o adresář výše a ví, že obrázek se nachází v adresáři images. Pokud by jste uvedli pouze „../“, pak by prohlížeč obrázek hledal v rootu vašeho webu.

Další možnost je, že se bude HTML soubor nacházet v adresáři prvni_pokus a obrázky v adresáři images. V takovém případě by byla cesta následující:

Prvními dvěma tečkami jsme se posunuli na úroveň adresáře pokusy, ale zde se adresář images nenachází, tak se posuneme pomocí dalších teček ještě o adresář víše a máme vyhráno.

Tyto způsoby určování cest k souborů se poměrně často používají i přes jednu velkou nevýhodu, která se projeví v případě, že s HTML souborem hýbete. Cesta je totiž vztažena k aktuální poloze souboru. Pokud např. máte soubor v adresáři /HTML a obrázky v adresáři images (cesta tedy je ../images/obrazek.gif) a tento soubor přesunete do adresáře /pokusy, nic se neděje. Problém ovšem nastane, pokud HTML soubor přesunete přímo do rootu webu (/) nebo do adresáře /pokusy/prvni_pokus, pak je uvedená cesta k obrázku chybná a musíte ji ručně opravit.

Řešení tohoto problému je poměrně jednoduché – stačí použít absolutní cestu. Absolutní cestou je cesta, která se určuje od kořene (rootu) webu:

nebo:

Pak můžete HTML soubor obsahující tag uvedený v tabulce přesouvat kamkoli, libovolně jej vnořovat do dalších adresářů a podadresářů a přesto se obrázek na stránce zobrazí. Doporučuji používat první způsob cesty, pokud budete ke každému souboru uvádět kompletní cestu včetně http://, prohlížeč musí ustanovit nové spojení a to trochu zdržuje.

Kompletní cestu včetně http:// musíte ovšem uvádět v případě, pokud chcete na své stránce zobrazit obrázek, který se nachází na jiném serveru. V takovém případě je ale lepší si daný obrázek stáhnout k sobě – při výpadku tohoto serveru, kde se nachází tento obrázek či při smazání tohoto obrázku (což vy v podstatě nemáte možnost ovlivnit) by se vám obrázek nezobrazil.

Diakritika v názvu obrázku

V operačním systému Windows 95 a vyšším je možné používat pro adresáře a názvy souborů české znaky jako například dlouhé i, „ř“, „š“, „ů“ apod. Zde to nijak nevadí, problém ovšem nastane v okamžiku, kdy takové soubory přesunete na web a v HTML stránkách se na ně odkazujete. V některých případech, třeba pokud máte místo Windows alternativní Linux, se vám takový obrázek vůbec nezobrazí, neboť tyto znaky nezná! Stejný problém může nastat v cestě k souboru, pokud uvedete cestu „první_zážitky/01.gif“, nedivte se, že se vám to prostě fungovat nebude.

Zpětné lomítko v cestě

Někdo má ve zvyku používat při určování cesty k obrázků zpětné lomítko „\“. Je to samozřejmě hrubá chyba a musí se používat pouze „/“. Mám pocit, že v Exploreru použití či kombinace obou lomítek současně nevadí, ale vadí to Netscape Navigatoru, který takovou cestu považuje za neplatnou. Na zobrazení obrázku pak můžete zapomenout.

A to je pro dnešek vše. Tyto uvedené pravidla se vztahují nejenom na obrázky pro www stránky, ale obecně i pro jiné soubory, například .HTML, či .ZIP soubory. Doufám, že článek byl pro vás užitečný.