Můj pracovní webík

... aneb HTML a CSS pro starší a nechápavé ...

PŘIDÁVÁNÍ GRAFIKY

přidání obrázku do webové stránky zajistí element <img />
do stránky však nepřidáváme obrázek, ale pouze odkaz na něj
obrázek tedy není součástí HTML dokumentu, ale oba existují odděleně v podobě dvou samostatných a nezávislých souborů

obrázky pro web musí být v těchto formátech:
JPEG (vyslov džej-peg) - určen pro ukládání fotografií
GIF (vyslov džif nebo gif) - má podstatně méně barev než JPEG - vysoká komprese - podporuje průhlednost a animace
PNG (vyslov ping) - náhrada GIFu - rovněž podporuje průhlednost a animace

způsobí umístění obrázku přesně na místo, kde je uveden v HTML dokumentu

povinným atributem elementu <img /> je atribut src, který specifikuje zdroj (source) čili fyzické umístění obrázku

nejjednodušší tag pro přidání obrázku vypadá takto:

<img src="URL_obrázku"/>

atribut alt obsahuje výstižný krátký popis obrázku
text se objeví po najetí myši na obrázek, ale i v případě, kdy se obrázek z nějakého důvodu nezobrazí (např. v negrafických prohlížečích)
bez určení zarovnávání webové prohlížeče s obrázkem zacházejí jako se znakem na řádce textu - kde je uveden v HTML dokumentu, tam se zobrazí

atribut align (zarovnání) elementu <img /> určuje, jak bude umístěn obrázek vzhledem k ostatnímu textu na stránce

uvedeme-li atribut align, vypadá tag takto:

<img align="hodnota" src="URL_obrázku" />

hodnoty atributu align:
top
- zarovná text na horní horizontální úroveň obrázku
middle - zarovná text na střední horizontální úroveň obrázku
bottom - zarovná text na spodní horizontální úroveň obrázku

POZOR! pokud je text delší, bude podle výše uvedených hodnot zarovnána pouze první řádka, ostatní řádky budou pokračovat pod obrázkem

pokud není atribut align zadán, použije se výchozí hodnota bottom

atribut align má ještě 2 další hodnoty left (vlevo) a right (vpravo), které prohlížeči říkají, že obrázek se neobjeví přesně na místě, kde je umístěn element <img />, ale zarovná se k pravému nebo levému okraji textu okolo elementu <img /> - kromě toho se také text zalomí okolo obrázku

mezeru mezi obrázkem a textem určují atributy vspace (vertikální okraj) a hspace (horizontální okraj) - pro tento účel je vhodnější použít CSS

poslední 2 důležité atributy elementu <img /> jsou width (šířka) a height (výška)
slouží mimo jiné ke zkrácení doby potřebné k objevení stránky (prohlížeč dopředu ví, jak velké místo si má pro obrázek vytvořit ještě před stažením obrázku

atributy width a height mohou být použity též pro zmenšení obrázku (v tomto případě stačí uvést jen jeden rozměr, druhý je automaticky dopočítán) - není to však příliš vhodné, neboť prohlížeč musí nejprve stáhnout celý původní obrázek, aby jej mohl zmenšit na požadované rozměry a pak zobrazit