COMPUTERWORLD
Specializovaný týdeník o výpočetní technice
o Internetu
(CW 19/97)

WWW dílna
Popisky obrázků

Jiří Kosek ml.

Vkládání obrázků do HTML stránek je vcelku jednoduché a nabízí nám poměrně volnou ruku. Problém však nastane, pokud chceme obrázek doplnit i jeho popiskem. Element IMG nám nenabízí žádnou možnost specifikovat popisek obrázku tak, jak to známe například u tabulek (pomocí elementu CAPTION). Pokud do textu umístíme jako jeden odstavec popisek obrázku a jako druhý odstavec samotný obrázek, ztratíme tím mnoho z možností pro umístění obrázků (např. obtékání obrázků textem) a navíc se nám při tisku stránky může stát, že popisek se objeví na jiné stránce než samotný obrázek.

K řešení tohoto problému nám výborně poslouží tabulky. U nich lze specifikovat jejich popisek. Vytvoříme tedy tabulku, která bude mít pouze jednu buňku a do této buňky umístíme obrázek. Celé to může vypadat takto:

<TABLE>

<CAPTION>Obr. 1: Plynová turbína</CAPTION>
<TR><TH><IMG
SRC="turbina.gif">
</TABLE>

Právě mezi tagy <CAPTION> a </CAPTION> umístíme popisek obrázku. Tagem <TR> zahájíme řádku tabulky a tagem <TH> samotnou buňku. Tag <TH> jsme použili namísto <TD> záměrně -- obrázek bude se svým popiskem vycentrován. (Obsah buňky uvozené tagem <TH> je centrován a popisek tabulky je vycentrován nad celou tabulkou.)

Toto řešení je uspokojivé, lze je však zlepšovat. První věcí, kterou lze změnit, je umístění popisku -- ten se nám normálně zobrazí nad obrázkem. Někdy však potřebujeme popisek umístit pod obrázek -- stačí pak u CAPTION použít atribut ALIGN a přiřadit mu hodnotu BOTTOM.

U širších obrázků je pěkné, pokud jsou vloženy mezi text a jsou vycentrovány. Naopak u užších a menších obrázků je obvykle hezčí, pokud text obtéká kolem nich. Dosáhnout prvního efektu je celkem jednoduché -- stačí celou tabulku použitou pro vložení obrázku s popiskem uzavřít mezi tagy <CENTER> a </CENTER>.

Pokud chceme, aby byl obrázek i s popiskem obtékán textem, použijeme u elementu TABLE atribut ALIGN a přiřadíme mu hodnotu LEFT nebo RIGHT. Obrázek pak bude buď zprava, nebo zleva obtékán textem.

U příliš malých obrázků je lepší vyhradit pro ně trochu více místa (aby se z popisku nestala dlouhá nudle). K tomu lze výhodně použít atribut WIDTH u elementu TABLE.

Všechny poznatky si shrneme na následující ukázce. Výsledný vzhled v prohlížeči je na obrázku 1:

...

<CENTER>
<TABLE>
<CAPTION
ALIGN=BOTTOM>Obr. 1: Velký obrázek na celou šířku textu</CAPTION>
<TR><TH><IMG
SRC="1mbill.gif">
</TABLE>
</CENTER>

<TABLE
ALIGN=LEFT>
<CAPTION>Obr
2.: Práce na silnici</CAPTION>
<TR><TH><IMG
SRC="work.gif">
</TABLE>

...

<TABLE
ALIGN=RIGHT WIDTH=30%>
<CAPTION
ALIGN=BOTTOM>Obr 3.: Práce na stránce</CAPTION>
<TR><TH><IMG
SRC="atwork.gif">
</TABLE>

...


| <<< | CW o Internetu | COMPUTERWORLD | IDG CZ homepage |