HaTMatiLka
Lekce 5
Lekce Vobrázci

Jsou neoddělitelnou součástí webového světa. Bez nich by byly stránky pusté, prázdné, smutné. S nimi jsou veselejší, zajímavější a déle se načítají.

Vložit obrázek do textu je velmi jednoduchý úkon: stačí na příslušné místo vepsat tag <img src="obr.gif"> – a v textu se objeví obrázek. Bohužel, takto jednoduché použití má jednu nectnost: obrázek se tváří jako slovo, a coby slušný text touží býti zarovnán na spodku řádku. Protože však většinou „vyčuhuje” nahoře, posune se celý řádek kousek dolů a text pak vypadá, jako právě tento řádek. plačící srdce

Tento efekt se projeví i v případě, kdy je obrázek na začátku řádku. To znamená, že například ikona na začátku odstavce odsune celý odstavec o kousek dolů. (To zas není tak špatné. ;-)

Umístění obrázku

plačící srdceObrázek je možno zarovnat (jak jinak) vlevo, doprostřed či vpravo. Toho lze docílit standardním způsobem, tedy parametrem tagu align="left|right|center". Zarovnání s sebou nese jednu změnu: obrázek spadne tak, aby byl s řádkem zarovnán nahoře, takže čouhá pro změnu dole. (Viz tento odstavec.)

Při centrování obrázku nedochází (bohužel) k jeho obtékání. Obrázek spadne a zůstane na řádku plačící srdce v textu uprostřed, přičemž přečuhuje jak nahoře, tak dole. Řádek bude odsazen a osamocen. Je to však velmi vhodné, pokud je obrázek jen o málo větší, než písmo (např. zeměkoule), takže odsazení řádku nebude na první pohled patrné.

plačící srdceplačící srdceNěkdy je potřeba umístit okolo textu dva obrázky, jeden vpravo, druhý vlevo. V takovém případě je dobré zadat nejdříve pravý, poté levý obrázek, přestože na stránce jsou vlastně v obráceném pořadí. Důvodem je, že za obrázkem, zarovnaným doleva, se obrázek na pravé straně poposune kousek níž a nejsou tak oba na stejném řádku. Tento efekt se neděje vždy, ani ve  všech browserech, ale setkal jsem se s ním několikrát.
Téměř jistě se to stane, pokud je parametr align="left" u levého obrázku „zapomenut”.

Příklad
     
<hr>
<img src="L-05-02.Jpg">Obrázek nijak nezarovnaný.
<br clear="all">
<hr>
<img src="L-05-02.Jpg" align="left">Obrázek vlevo.
<br clear="all">
<hr>
<img src="L-05-02.Jpg" align="right">Obrázek vpravo.
<br clear="all">
<hr>
Obrázek <img src="L-05-02.Jpg" align="center"> uprostřed.
<br clear="all">
<hr>
Ctěné pozornosti doporučuji tag <br>, zde doplněný na <br clear="all">. Schválně, co to udělá, když bude použit jen obyčejný tag…?
vokaž
Místo! Více místa!

Jak jest patrno výše, text obchází obrázek poměrně velmi těsně. Až příliš těsně. Proto je možné zadat okolo obrázku „šířku ochranného pásma”, tedy vynechat určité místo. Děje se tak parametry HSpace="nn"VSpace="nn". První z nich vynechá místo zprava a zleva (horizontálně), druhý shora a zdola (vertikálně).

plačící srdceJako všude, i tady se dá zadávat šířka v bodech, nebo procentech. Obrázek před tímto odstavcem má hspace=33%. Názorně tak ukazuje, že procentuální vyjádření není právě spolehlivé. Člověk by předpokládal, že bude mít třetinu vpravo a třetinu vlevo, tedy dvě třetiny řádku…

Velikost

Normálně není zapotřebí uvádět, jak velký je obrázek. Browser si poradí a zjistí si rozměry, až bude obrázek načítat. Jenže — jednak vůbec není jisté, že k načítání obrázku dojde (přenos může být přerušen), druhak to může dlouho trvat.

Tento obrázek tu není a nemá být! Proto je dobré rozměry uvést. Na stránce tak bude vynecháno místo i pro neexistující obrázek (co kdyby někdy dorazil…). Navíc se tím zrychlí formátování.

Další zcela samozřejmou možností je změna velikosti obrázku. To se může hodit, když chceme ukázat zmenšený obrázek jako odkaz na skutečnou velikost: <img src="L-05-02.jpg" alt="malý" width="80" heigh="60" align="left">. malý Možná se to může zdát jako užitečná funkce, ale má podstatnou nevýhodu: ke čtenáři se přenáší celý velký obrázek, aby z něj byl vidět jen malinký náhled. Dlouho to trvá a ani změna velikosti není právě okamžitá. Nicméně se to hodí v případě, kdy by náhledy zabíraly cenné místo na serveru. Když si platíte 1 MB, šetří se i na bajtech.

Druhým vhodným použitím je deformovaný obrázek: například duhová linka, vzniklá jako <img src="L-05-04.gif" width="100%">.

Domácí úkol:
Doplnit domovskou stránku o fotografii.
Dalším obrázkem bude „tlačítko” na dně stránky, odkazující na začátek (obvykle „back to top”).

Podklady čili pozadí

Oblíbeným efektem je umístění obrázku na pozadí stránky. Toho se dá dosáhnout poměrně jednoduše: na začátku stránky, v tagu <Body> nechť jest uveden parametr background="image.gif". Obrázek pak bude dlaždicovitě zaplňovat stránku a stane se podkladem pod textem i pod obrázky.

Běžně podklad roluje spolu s textem, je-li posunováno stránkou. Pokud je pozadí tvořeno fotografií, lze poměrně jednoduše docílit toho, aby se posunoval pouze text, zatímco obrázek zůstane „přilepený” na stejném místě. Stačí doplnit další parametr: bgproperties=fixed.
Bohužel nelze obrázek zvětšit, zmenšit, vycentrovat, ani zabránit tomu, aby se opakoval. Přilepená fotografie je proto všelijak zničena prohlížečem… Tento efekt jest dobré si rozmyslet.

Je důležité si uvědomit, že pozadí stránky silně snižuje čitelnost textu! Je potřeba volit větší písmo, výraznější barvy…

Obsah
Lekce 1
Lekce 2
Lekce 3
Lekce 4

obrázky
umístění
příklad
místo
úkol
pozadí

Lekce 6
Lekce 7
Lekce 8
Lekce 9
Lekce 10
Lekce 11
Lekce 12

 Lekce 6
© Robert R. Šimek, 1997