Zarovnání obrázku a textu
Obrázky lze také s omezenými možnostmi zarovnávat vzhledem k okolnímu textu, který
obrázek obtéká. Jelikož standardní HTML nepodporuje takové možnosti formátování jako
standardní textový editor, neočekávejte žádné zázraky. Jedná se pouze o základní zarovnání,
které je dosaženo následujícím parametrem ALIGN (stejný parametr jako u zarovnání
odstavců) značky IMG:
_ left – Obrázek je umístěn zcela vlevo a je obtékán textem z pravé strany. Jakmile
je dosaženo spodního okraje obrázku, pokračuje text zleva doprava na celou šíři
okna prohlížeče.
_ right – Obrázek je umístěn zcela vpravo a je obtékán textem z levé strany. Jakmile
je dosaženo spodního okraje obrázku, pokračuje text zleva doprava na celou šíři
okna prohlížeče.
_ texttop – Zarovná horní okraj obrázku s nejvyšším písmenem v řádku, u něhož je
umístěn.
_ top – Zarovná horní okraj obrázku s nejvyšším prvkem (většinou písmenem – tehdy
je zarovnání stejné jako u předchozí hodnoty texttop) v řádku, u něhož je
umístěn.
_ middle – Zarovná linku, na níž je posazen text, na střed daného obrázku.
_ absmiddle – Zarovná prostředek daného řádku na střed obrázku.
_ bottom – Zarovná spodní okraj obrázku s linkou, na níž je posazen text.
_ absbottom – Zarovná spodní okraj obrázku s nejspodnějším písmenem v textu,
tedy písmena, které je posazeno pod linkou (např. j,p,y).
Standardně je v prohlížeči navoleno zarovnání bottom, tedy spodní okraj obrázku s daným
řádkem, dále pak text pokračuje pod obrázkem normálně. Většinou se používá zarovnání
left nebo right, aby text obrázky hezky obtékal. Způsob obtékání vidíte na následujícím
příkladu.
Jednoduché zobrazení obrázku v HTML

Toto je obrázek zarovnán doleva a text jej obtéká zprava po
celé jeho výšce. Je potřeba jej umístit tam, kde bude
začínat obtékání, většinou tedy k začátku odstavce. Jakmile
text dosáhne spodního okraje obrázku, pokračuje dále od
levého okraje okna.

Toto je také obrázek zarovnán doleva a text jej obtéká
zprava po celé jeho výšce.

Text začne obrázek obtékat po umístění značky IMG do
zdrojového textu, což v praxi vypadá takto.

Podobně pracuje prohlížeč s textem, pokud je obrázek zarovnán doprava, viz příklad.

Toto je obrázek zarovnán doprava a text jej obtéká zleva po
celé jeho výšce. Je potřeba jej umístit tam, kde bude
začínat obtékání, většinou tedy k začátku odstavce. Jakmile
text dosáhne spodního okraje obrázku, pokračuje pod
obrázkem až k pravému okraji okna.

Toto je také obrázek zarovnán doprava a text jej obtéká
zleva po celé jeho výšce.

Text začne obrázek obtékat po umístění značky IMG do zdrojového
textu, což v praxi vypadá takto.

Obrázky na stránkách

Při umísťování používejte co největší kompresi, neumísťujte obrázky zbytečně velké a hlavně
se vyvarujte zbytečných a matoucích obrázků, a to nejen kvůli vyšší celkové velikosti stránky
– dbejte na grafickou vyváženost, střídmost a úpravu. Internet by totiž měl být přímočarý
a přehledný, ne plný všelijakých obrázků, které nemají pro uživatele význam.
Umísťujeme obrázky
Značka IMG je jedna z mála nepárových značek HTML. Má základní syntaxi

a definuje soubor s obrázkem, který se má na stránku umístit. Jméno souboru je uvedeno
v hodnotě parametru SRC; pokud není u jména souboru uvedena cesta, jak relativní nebo
absolutní, prohlížeč hledá obrázek v aktuálním adresáři, tedy v tom, kde je umístěn doku−
ment, který obrázek zobrazuje. Celkem lze použít čtyři způsoby zadávání cesty:
_ – Obrázek je umístěn v aktuálním adresáři.
_ – Relativní zadání lokální cesty, obrázek umístěn
v nadřazeném adresáři.
_ – Absolutní zadání lokální cesty, kdy je
obrázek na místním pevném disku v určeném adresáři.
_ – Cesta k obrázku je zadána s celou
URL, kde se obrázek nachází, tzn. lze zobrazit jakýkoliv obrázek na kterémkoliv
serveru na celém světě.
Nejčastěji používané grafické soubory jsou typu JPG a GIF, které zároveň nabízejí nejvyšší
kompresi a tedy i úsporu místa, občas se používá i formátu PNG. Každý z těchto formátů má
svoje výhody a nevýhody, např. GIF může používat průhledné barvy, JPG zase až 16,7 mi−
liónu barev; GIF pouze 256. Dané formáty se tedy používají tam, kde se více hodí.
Potřebujete−li celou barevnou paletu, například u fotografií, použijete JPG. Potřebujete−li
naopak obrázek s průhledným pozadím, sáhnete po GIFu. Formát GIF se také hodí zejména
pro různá tlačítka akcí a jiné grafické prvky.

Na dalším řádku je umístěn obrázek.

Část první: Úvod do Internetu

Výchozí nastavení barev stránky
Každý dokument HTML má svoje výchozí barevné nastavení – barva pozadí, implicitní barva
textu, barva odkazy na jinou stránku, barva odkazu již navštívené stránky apod. Všechny tyto
implicitní barvy se nastavují na začátku zdrojového textu ve značce BODY, která uvozuje tělo
vlastního kódu, který bude prohlížeč zobrazovat (viz kapitola 2).
Jednotlivé jeho parametry jsou následující:
_ BGCOLOR – Barva, která bude použita na pozadí, standardně bílá.
_ TEXT – Implicitní barva textu, která se použije, nestanoví−li uživatel jinak, standard−
ně černá.
_ LINK – Barva odkazu, který jste ještě nenavštívili, standardní nastavení je modrá.
_ VLINK – Barva již navštíveného odkazu, implicitní nastavení fialová.
_ ALINK – Barva odkazu, na nějž jste právě klepnuli, standardně červená.
Pokud tedy použijete ve značce BODY všechny uvedené parametry, vypadá to např. takto:
ALINK="red">
Tato značka nastaví následující barvy: barva pozadí černá, barva textu bílá, barva odkazu ne−
navštívené stránky žlutá, barva odkazu navštívené stránky zelená a konečně barva odkazu,
na nějž jste právě klepnuli, červená.
Programování WWW stránek pro úplné začátečníky

Zadávání barev

HTML definuje pro základní barvy (bílá, černá, modrá, červená atd.) přímé názvy odpovída−
jící anglickému ekvivalentu jména barvy, tedy bílá=white, černá=black, modrá=blue, čer−
vená=red apod. Tyto barvy se zadávají jako hodnota parametrů značek. Jak jste si jistě všim−
li v předchozí kapitole, barva textu se zadává značkou .
Protože nelze pokrýt názvy všechny možné barvy a jejich kombinace, lze barvy „míchat“
pomocí hexadecimálního vyjádření. Např. modrá vypadá takto: #0000FF, jednotlivé složky
barvy – červená, zelená a modrá (red, green, blue – RGB) se tedy zadávají pomocí
osmibitových čísel (8 bitů = 256 kombinací = dvojciferné hexadecimální číslo), tedy v tomto
konkrétním případě je červená reprezentovaná dvojicí 00, zelená také dvojící 00 a nakonec
modrá dvojicí FF. Je nasnadě, že změna poměru barev RGB změní i výslednou barvu.
Základní barvy a jejich hexadecimální vyjádření:
Aqua tyrkysová #00FFFF
Black černá #000000
Blue modrá #0000FF
Fuchsia fialová #FF00FF
Část první: Úvod do Internetu
21
Gray šedá #808080
Green tmavě zelená #008000
Lime zelená #00FF00
Maroon tmavě červená #800000
Navy tmavě modrá #000080
Olive tmavě žlutá #808000
Purple tmavě fialová #800080
Red červená #FF0000
Silver stříbrná #C0C0C0
Teal tmavě tyrkysová #008080
White bílá #FFFFFF
Yellow žlutá #FFFF00
Abyste nemuseli potřebné barvy míchat přímo v HTML podle oka, je dobré je vytvořit nejdříve
v nějakém grafickém editoru, který umožňuje editovat barevnou paletu. Hodnoty tyto barvy
tvořící si zapíšete a teprve pak umístíte do HTML. Upozorňuji, že se musí jednat o barevný
model RGB, nikoliv CMYK!