1 Vkládání obrázků: Tag IMG V HTML se obrázky vkládají nepárovým tagem IMG, který má jeden povinný a mnoho nepovinných parametrů. Tím povinným je src,...
Vkládání obrázků: Tag IMG V HTML se obrázky vkládají nepárovým tagem IMG, který má jeden povinný a mnoho nepovinných parametrů. Tím povinným je src, totiž umístění obrázku. Například
do stránky vloží obrázek, který se jmenuje se nejaky_obrazek.gif a je v témže adresáři jako ona stránka. Pokud bude v jiném adresáři (složce), přidá se adresářová cesta. Například
Dá se použít i absolutní adresa, třeba src="http://www.seznam.cz/logo.gif" . Kromě src se zadávají další atributy obrázku. Např. kód
vloží do stránky obrázek kotěte zarovnaný doprava s popiskem kotě. O jednotlivých atributech pojednává další text.
Zadávání rozměrů Zásadně se doporučuje zadávat rozměry obrázků jako parametry tagu img. Například
je lepší než
Po natažení oba příklady vypadají stejně, rozdíl je při natahování. Pokud se totiž u obrázku uvedou rozměry, prohlížeč pro obrázek vyhradí místo, přestože obrázek zatím není stažený. Pokud se rozměry neuvedou, místo se nevyhradí a po natažení obrázku text jakoby "poskočí", což může způsobit zmatek ve čtenářově orientaci, ale hlavně to vypadá hnusně. Největší problémy tak vznikají, pokud je obrázek v tabulce.
Zjištění velikosti obrázku Pokud nevíte, jak je přesně obrázek velký, dejte ho do stránky napřed bez rozměrů. Pak si stránku zobrazte v prohlížeči, klikněte pravým tlačítkem vlastnosti obrázku a přečtěte si rozměry. Ty potom zadejte do kódu.
Zmenšování a zvětšování obrázků Zpravidla se u obrázků zadávají skutečné rozměry v pixelech (pixel je jeden obrazovkový bod). Pokud se ale uvedou rozměry jiné, obrázek změní zobrazení. Takto se dají obrázky zmenšovat, zvětšovat a deformovat (dělá to až prohlížeč). Přesto se nic z toho v praxi příliš nepoužívá:
Deformace je nevhodná z estetických důvodů. Zmenšování se nepoužívá, protože se obrázek nemusí vykreslit správně, ale hlavně se při tom zbytečně přenáší celý velký obrázek, z něhož se pak zobrazí jenom některé bity. Zvětšování se nepoužívá z toho důvodu, že výslednou grafiku to rozkreslí do hrubých čtverečků.
Pokud je třeba vložit obrázek jiné velikosti, doporučuji změnit rozměry natvrdo v nějakém grafickém programu. -1-
Okruhy k absolutoriu
Práce s grafikou (HTML)
Zadávání procent Lze zadat šířku a výšku obrázku jako procenta ze šířky nebo výšky stránky (šířka většinou závisí na šířce okna prohlížeče). Místo počtu pixelů se prostě zadávají procenta. Při zadání obou parametrů se obrázek zdeformuje, a tak je dobré zadávat jen jeden. Pozor, umístíte-li obrázek do buňky tabulky, procenta se počítají ze šířky a výšky této buňky!
Popis obrázku (alt) Když se v prohlížeči přejede obrázek myší, obvykle se zobrazí světle žlutá bublina s textem. Stejný text se na místě obrázku zobrazí, dokud není obrázek natažený (nebo když má někdo vypnuté zobrazování obrázků). Tento text se dá zadat jako atribut tagu IMG, například:
Někdo zadávání altu ignoruje. Potom se tam nezobrazí nic, nebo popis, který zadal automaticky editor. Takový automatický popis bývá pěkný paskvil: například ve FrontPage 98: alt="runa.gif (357 bytes)".
Už jsem se setkal s lidmi, kteří si mysleli, že když se ten text změní, tak že to potom nebude
fungovat. Funguje to, klidně to měňte. Zásadní význam má alt pro alternativní média, například textové prohlížeče, indexovací roboty, zrakově postižené, hlasové výstupy. Takovým klientům poskytují zástupnou informaci o obrázku. V novějších prohlížečích se dá stejného efektu dosáhnout pomocí atributu title, ten také zobrazuje žlutou bublinu. Pak jde dělat bublinu i u textu.
Obtékání a umístění Atribut align tagu IMG umožňuje nastavit buďto obtékání obrázku textem, nebo jeho umístění na řádku. Je to poněkud nekoncepční, ale jednoduché:
hodnoty left a right nastavují obtékání, všechny ostatní hodnoty určují umístění obrázku na řádku.
Příklad: vloží do dokumentu obrázek, jehož horní okraj zarovná s dolním okrajem aktuálního řádku, levý okraj bude na levém okraji stránky a text bude obtékat. Hodnoty pro umístění na řádku jsou align= top, textop, middle, absmiddle, baseline, bottom, absbottom, center. Jejich význam si vyzkoušejte, já tomu sám moc nerozumím, protože to považuji za málo použitelné.
Rámeček Atribut border vykreslí kolem obrázku rámeček. Zadává se šířka rámečku v pixelech.
Rámeček bývá černý (barva písma), ale je-li obrázek v odkazu, tak modrý (barva odkazu). Pokud border nezadáte, některé prohlížeče rámeček vykreslí, jiné ne.
Zrušení rámečku Je-li obrázek v odkazu, prohlížeče jej obalují barevným (většinou modrým) rámečkem. Chcete-li se tomu vyhnout, zadejte border=0. -2-
Okruhy k absolutoriu
Práce s grafikou (HTML)
Obrázek jako odkaz: Zmenšeniny, galerie Kdo vystavuje více obrázků (například kolekci fotografií), měl by použít klikací zmenšeniny, aby se to nestahovalo roky. Od každého obrázku je potřeba vytvořit si menší kopii (velikostně i datově), která se umístí třeba do stejné složky a vloží do stránky. Velký originál obrázku se do stránky nevkládá, ale nechá se na něj mířit odkaz:
Potom obrázek funguje jako odkaz. Aby kolem obrázku nebyl rámeček, musí se zadat border="0". Je dobré a nutné do obrázku vyplnit parametr alt, aby byl odkaz zřejmý, i když se obrázek zatím nenatáhne. Pokud už se natáhne, v Internet Exploreru se popisek (alt) objevuje ve světle žluté bublině u ukazatele myši. To je obecně vzato chyba prohlížeče, správně by v bublině měl být title. Někteří autoři dávali do odkazů obrázky hlavně kvůli té bublině s popiskem (tenkrát ještě title neexistoval). Ta bublina se dá udělat i nad textem pomocí atributu title.
Měnící se obrázky Dá se zařídit, aby se obrázky po přejetí myši změnily. Buďto jednoduše pomocí CSS a filtrů, nebo složitě pomocí JavaScriptu.
CSS + pozadí Do stylopisu se dá: a.menici {background-image: url(prvni.gif)} a.menici:hover {background-image: url(druhy.gif)}
Příklad měnícího se odkazu pomocí CSS vlastnosti background-image. měnící se odkaz Odkaz má stylem nastavené pozadí, které se při přejetí myší změní na jiné pozadí. Zápis stylu: -3-
Pro detailní pochopení příkladu si zobrazte zdroj. Přejížděný odkaz při napoprvé trochu problikne, protože se ten druhý obrázek musí napřed stáhnout. Nedávno Pixy vymyslel, jak to dělat jedním obrázkem pomocí změny background-position. Příklad se vztahuje k textu zdokonalení odkazů.
Grafické formáty: Datový formát Obrázek je soubor. Na internetu se běžně používají dva grafické formáty -- *.jpg a *.gif. Stručně řečeno jpg je lepší na fotografie, gif na všechno ostatní.
Jak udělat obrázek (pro začátečníky) Jak se třeba dá získat obrázkový soubor:
Stáhnout z webu pomocí příkazu uložit obrázek jako (save image as) a uložit na disk. Najít někde na disku nebo použít sbírky obrázků, které se dodávají s některými programy. Nakreslit si obrázek myší v grafickém programu a uložit to jako gif nebo jpg. Naskenovat a uložit, také v grafickém programu. Sejmout obrazovku z nějakého programu a upravit v grafickém programu.
Jinými slovy, možností je více, ale cílem musí být soubor ve formátu .gif nebo .jpg Ten se pak vloží do stránky.
Grafický program Existují jich tisíce. Na Linuxu kraluje v grafických programech Gimp (který je zdarma i pro Windows, ale tam někdy padá). Já používám program Paint Shop 5. Pro současné potřeby webové grafiky je téměř dokonalý a neznám nikoho, kdo by v něm rozuměl všem funkcím. Adobe Photoshop se dá také použít, ale je dražší, jde o profesionální nástroj. Je zaměřený na obecnou bitmapovou grafiku a nástroje pro web má skoro jenom jako doplněk. Microsoft PaintBrush (windowsovské Malování) od verze 2000 umí také ukládat do jpg a gif, ale pracuje se s nimi jen v nouzi. Lidé si strašně chválí program Macromedia Fireworks, já jej neznám. Dále existuje spousta polo-editorů, které umějí třeba jenom ořezávat a optimalizovat, např. Ulead transformer. atd. Hlavním kritériem použitelnosti editoru je, zda umí ukládat do jpg a gif. Takže třeba Malování z Windowsů 98 je na nic.
Datový objem Hlavní přikázání webového grafika zní: obrázky se nesmějí dlouho stahovat, musejí být co nejmenší. Proto jsou gif i jpg formáty kompresní.
-4-
Okruhy k absolutoriu forma
Práce s grafikou (HTML) optimu
snesitelné
m
maximum
tlačítko
2 kB
5 kB
pozadí stránky
2 kB
10 kB
reklamní baner
8 kB
20 kB
fotografie
15 kB
40 kb
5 kB
10 kB
3 kB
8 kB
zmenšenina fotky obrázkový nadpis diagram, komix
60 kB
Dávat na web obrázek větší než takových 60 kB je vcelku nesmysl, protože se na jedné obrazovce stejně nemůže patřičně zobrazit.
JPG Formát JPG (též JPEG) je vhodný pro ukládání fotografií a obrázků s velkou barevnou hloubkou. Jpeg neumožňuje dělat průhledné nebo animované obrázky. Používá ztrátovou kompresi, to znamená, že část informace vypouští. Dělá to tak, aby to lidské oko pokud možno nepoznalo. Míra této komprese se dá nastavit v grafickém programu. Ale pozor, po každém znovuotevření a uložení se opět provádí komprese, takže se tím obrázek stále znehodnocuje. Je proto dobré mít předlohu uloženou v něčem neztrátovém a po každé úpravě importovat do jpg.
GIF GIF také používá kompresi, ale neztrátovou, takže jsou ty soubory relativně větší než JPG, ale zato jsou přesné (zachovávají barvy a kontury). Může se v něm vyskytovat maximálně 256 barev. Jedna z barev se může označit jako průhledná (tu prohlížeč potom nezobrazí), gify též podporují animace.
Barevná hloubka GIFu Na Internetu záleží na každém bitu, a proto čím jsou obrázkové soubory menší, tím lépe. Je zbytečné kódovat v gifu 256 barev, když používá třeba jenom dvě nebo čtyři. Pokud se v grafickém programu sníží barevná hloubka (počet barev), podstatně se ušetří velikost souboru (u černobílého souboru až osminásobně). Postup při snižování počtu barev se opět liší od programu k programu. V angličtině je to obvykle příkaz "decrease color depht" nebo "export - bitmap".
Proužkování
-5-
Okruhy k absolutoriu
Práce s grafikou (HTML)
Z datového formátu GIFu vyplývá zajímavá vlastnost: pokud řádek bodů obsahuje jenom jednu barvu, velmi se šetří datový objem. Jednoduchý gif obsahující zejména barevné proužky (a málo přechodů) se tedy uloží velmi úsporně.
Prokládání (progresivní vykreslování) Při ukládání souborů JPG i GIF se dá nastavit, zda se mají vykreslovat prokládaně. Konkrétní postup nastavení prokládání při ukládání obrázku závisí na použitém editoru. V anglických editorech se to jmenuje "interlaced" nebo "progresive encoding". Normálně se obrázky vykreslují po řádcích odshora, ale když se nastaví toto prokládání, tak se napřed vykreslí zamlžené, ale celé. Jak postupně docházejí další data, tak se zobrazení zpřesňuje. Je to hezké.
Další formáty Existuje "nový" formát png (Portable Network Grafics), který by měl mít výhody gifu i jpegu. Ale příliš se nepoužívá, pravděpodobně kvůli nepodpoře starších prohlížečů. Dnes (doplněno 2003) jej lze bez obav používat. Prohlížeče verze 4 v sobě mají podporu i jiných formátů; kupříkladu IE 4 podporuje minimálně bmp. Ale takový soubor rozhodně nedoporučuji do stránek zařazovat, protože je moc velký a prohlížeče kromě IE jej stejně číst neumějí. Převážná většina netradičních grafických formátů potřebuje ke svému zobrazení plužinu (plug-in), což je podpůrný program prohlížeče. Chcete-li umístit na stránky něco hodně divokého, musíte si na webu najít plužinu. Obrázek pak nezadávat jako , ale jako
