Obrázky

Luboš Kudláček 9. 2. 2010     Rubrika:  Web   

V této kapitole si rozebereme konkrétní postup, jak na webovou stránku správně vložit obrázek.

Přizpůsobení datové velikosti

První věc, kterou musíte udělat, je zmenšit obrázek pro použití na webu. Nemůžete vzít prostě fotografii z dovolené a nechat ji v původní velikosti z digitálního fotoaparátu, protože by se čtenáři za prvé nevešla na monitor a za druhé by se mu v závislosti na jeho rychlosti připojení k internetu načítala velmi dlouho.

I fotografie, které změníte rozměry v HTML tak, že se na monitor vejde, bude datově příliš veliká!

Ke zmenšení fotek můžete použít nějaký software, který zmenší datovou velikost, ale dokáže zachovat kvalitu. Používejte formáty JPG, PNG nebo GIF.

Upload na server

Jakmile má obrázek odpovídající velikost, nahrajte jej přes FTP klienta na server (o tom více v první kapitole tohoto kurzu). Počítejte přitom se strukturou URL (viz předchozí kapitola).

Zápis v HTML

Pro základní zápis se používá nepárový tag IMG. Dejme tomu, že se soubor obrázku jmenuje fotka.jpg

Zápis bude vypadat takto:

<img src=“fotka.jpg“ alt=“Fotka z dovolené“>

Odkaz na soubor může mít relativní nebo absolutní zápis a v případě toho relativního je potřeba počítat se strukturou složek vzhledem k pozici dokumentu HTML, kam obrázek vkládáte. Jestliže tedy budete mít fotografii ve složce obrazky, zápis bude vypadat takto:

<img src=“obrazky/fotka.jpg“ alt=“Fotka z dovolené“>

Obrázek lze do stránky vložit i přes protokol http (takže absolutní adresou), zápis může vypadat takto:

<img src=“http://www.netzin.cz/sites/default/files/image/2010/word1.jpg“ alt=“Screenshot MS Word“>

Pokud ale budete tímto způsobem načítat obrázky z cizích webů, počítejte s tím, že jeho adresa se může změnit (v tom případě to nebude fungovat) nebo vám majitel pošle přes adresu obrázek jiný. Ještě častěji se pak stává, že obrázek na webu přestane existovat úplně.

Pokud se chystáte načítat tímto způsobem obrázky z cizích zdrojů, nezapomeňte ale na autorská práva.

ALT

Možná jste si všimli, že zápis obrázku má ještě takzvaný atribut ALT. Jde o zástupný text určený jako náhrada pro uživatele, kteří třeba používají speciální prohlížeč nebo z nějakého jiného důvodu nemohou obrázek vidět.

Náhled a odkaz na původní velikost

Pokud chcete použí zmenšeninu obrázku (náhled) jako odkaz na větší verzi (originál), potřebujete vlastně soubory dva. Onu zmenšeninu a originál na web.

Zápis vypadá takto:

<a href=“fotka.jpg“ alt=“Fotka“><img src=“malafotka.jpg“ alt=“Fotka malá“></a>

Na webu bude vidět soubor malafotka.jpg. Bude na ní možné kliknout jako na odkaz, jehož cílem je soubor fotka.jpg. Pokud nepoužijete speciální pomocníky pro nějaké efektivní zobrazení (povíme si o nich hned v další kapitole) bude fotka.jpg zobrazena v okně prohlížeče. Pokud ji chcete nechat otevřít do nového okna, stačí odkazu nastavit cíl:

<a target=“_blank“ href=“fotka.jpg“ alt=“Fotka“><img src=“malafotka.jpg“ alt=“Fotka malá“></a>