|
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. 
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
Obrá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 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ř. ), takže odsazení řádku nebude na první pohled patrné.
 Ně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…?
|
|
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" a VSpace="nn". První z nich vynechá místo zprava a zleva (horizontálně), druhý shora a zdola (vertikálně).
Jako 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.
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">. 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
|