Vítejte u druhé části našeho seriálu o jazyku html. Dnes se podívame hlavně na obrázky, odkazy a rámy. Opět jen připomínám, že znak "&" (and) vždy reprezentuje dvojitý křížek (ASCII 35).
OBRÁZKY
V html se používají obrázky GIF, animované GIF a JPEG. Než se pustíme přímo do příkazů, malé vysvětlení pro obrázky formátu GIF. Je velmi vhodné používat (zvláště větší obrázky) ve formátu prokládané GIF (interlaced). Zde se vykreslují nejprve liché a pak sudé řádky a tak je vidět ještě před natažením celého obrázku co přibližně obsahuje. Dále pokud používáte GIF obrázky, které nejsou obdélník (čtverec) a nechcete je orámovat, je třeba je ukládat tzv. transparentní. Znamená to něco jako "průhledné". Bílá místa, která by jinak překrývala pozadí, se zprůhlední vzorem pozadí. Názornou ukázku uvidíte v přiložených ukázkových html souborech. Prokládané a transparentní GIFy umí ukládat např. ImageCopy.
Nyní již k příkazům pro html. Pro obrázky slouží jednorázový příkaz IMG, který může mít různé parametry:
SRC - udává název obrázku (případně i s cestou). Jako jediný je povinný. Forma je následující:
<img src="URL">
Následující parametry jsou nepovinné:
ALT - alternativní text, který se zobrazí, pokud prohlížeč není schopen zobrazit grafiku. Funguje také (na browserech zvládajících Java script) jako informace, najedete-li myší na obrázek. Pak se objeví právě tento text.
BORDER - rámeček obrázku. Číslo udává jeho šířku. Pokud zadáme nulu, bude obrázek bez rámečku.
WIDTH - šířka obrázku. Používá se pro zrychlení zobrazení obrázku www browserem.
HEIGHT - výška obrázku, viz výše. Tyto dva atributy se uvádí spolu.
VSPACE - udává čísly místo nad a pod obrázkem pro obtékající text.
HSPACE - jako výše, ale udává místo zleva a zprava.
ALIGN - určuje vztah mezi obrázkem a okolním textem. Může mít následující argumenty:
LEFT - obrázek bude umístěn k levému okraji stránky a text jej bude obtékat zprava.
RIGHT - analogicky jako výše.
TOP - vrchol obrázku je zarovnán s největší položkou (větš. písmem) na řádce.
TEXTTOP - obrázek je zarovnán s největším písmenem na řádce.
MIDDLE - obrázek je vycentrován vzhledem k lince řádky.
ABSMIDDLE - obrázek je zarovnán se středem řádky.
BASELINE - zarovná spodní okraj obrázku s linkou řádky.
ABSBOTTOM - zarovná spodní okraj obrázku se spodkem řádky.
USEMAP - tento argument se uvádí pouze tehdy, je-li obrázek zároveň odkazem a je použit jako tzv. klikací mapa, viz dále.
Příkaz tedy může vypadat např. takto:
<img src="obraz.gif" alt="Obrázek" border=0 vspace=5 hspace=5 align=left>
HYPERTEXTOVÉ ODKAZY
Nyní konečně to, co dělá hypertext hypertextem - odkazy (linky). Pro odkazy se používá uzavřený příkaz:
<a href="URL">Text odkazu</a>
URL je klasicky zadávaná adresa stránky, kam se chceme kliknutím na "Text odkazu" přemístit. Pokud skáčete na svoji stránku, kterou máte ve stejném adresáři, stačí napsat název stránky (bez cesty). "Text odkazu" je libovolný text, který bude zobrazen a bude fungovat jako odkaz. Může to být přímo URL nebo jakýkoliv popis stránky. Příklad:
<a href="http://www.atari.org">Atari stránky</a>
Je to skutečně jednoduché. Jako odkaz se dá použít i obrázek, to si ovšem osvětlíme později.
Další příkazy:
<A NAME="název_sekce">Zde začíná nějaká sekce</A>
- tento příkaz pojmenovává jménem název_sekce začátek sekce (kapitoly, odstavce) s názvem 'Zde začíná nějaká sekce' v HTML dokumentu. Text 'Zde začíná nějaká sekce' je název odstavce. Tento název bude WWW prohlížečem zobrazen a také zvýrazněn. Je však nepovinný. Text 'název_sekce' však označuje hypertextový název dané kapitoly (resp. jejího začátku) a používá se pro vytváření odkazů na tento odstavec.
<A HREF="&název_sekce">Odkaz na kapitolu v tomto dokumentu</A>
- toto vytvoří hypertextový odkaz na kapitolu v tom samém dokumentu. Text 'název_sekce' je hypertextový název dané kapitoly, která byla označena předchozím příkazem. Text 'Odkaz na kapitolu v tomto dokumentu' je prohlížečem zobrazen zvýrazněně. Nejedná se o název kapitoly a také se nemusí shodovat s textem 'Zde začíná nějaká sekce' z předchozího popisu. Je však dobrým zvykem uvádět oba názvy stejné a to z důvodu lepší orientace ve výsledném hypertextu.
<A HREF="URL&název_sekce">Odkaz na kapitolu</A>
- vytvoří odkaz na sekci (kapitolu, odstavec) s hypertextovým názvem 'název_sekce' v dokumentu s identifikací URL. Tímto se skáče na různé odstavce či kapitoly v jiných stránkách než je ta právě aktuální.
<A HREF="URL?hledané_slovo+hledané_slovo"> Vyhledat</A>
- text 'Vyhledat' je prohlížečem zvýrazněn. Po kliknutí myší na něj je serveru s identifikací 'URL' poslán řetězec, který má vyhledat ('hledané_slovo'). Různé druhy serverů interpretují řetězec, který mají hledat, různým způsobem. Většinou se více hledaných slov odděluje znakem plus (+). Samozřejmě musí umět daný server řetězce vyhledávat.
<A HREF="mailto:emailova_adresa">Napiste mi</a>
Tento příkaz zobrazí text 'Napiste mi' jako aktivní (jako odkaz), ale jeho odkliknutím budete moci poslat e-mail na adresu specifikovanou v řetězci 'emailova_adresa'. Místo textu 'Napiste mi' lze použít i obrázek (viz dále). Příklad:
<a href="mailto:drak1@seznam.cz">Sem mi piste</a>
OBRÁZKY JAKO ODKAZY
Jako odkaz můžeme kromě textu použít i obrázek. Bude třeba skloubit výše popsané dva příkazy. Forma tedy vypadá následovně:
<a href="URL1"><img src="URL2"></a>
Tímto příkazem bude obrázek zároveň odkazem. URL1 je klasická adresa, na kterou se chceme dostat. URL2 je název obrázku (příp. s cestou), který se zobrazí a bude fungovat jako odkaz. Příklad:
<a href="http://www.atari.org"><img src= "odkaz.gif" alt="Hop na atari.org"></a>
Těmito příkazy se z obrázku tedy stane aktivní obrázek (odkaz). Vždy je však odkazem celý obrázek; pokud tedy máme obdélník a v něm pouze nějakou kresbu, aktivní bude celý tento obdélník (i když vidět bude jen ta kresba). Pokud chceme mít aktivní pouze část obrázku, musíme použít tzv. klikací mapy.
Klikací mapy nám umožňují určit, jaká část obrázku bude interpretována jako určitý odkaz. Jeden obrázek tak může být i rozdělen na několik klikacích map a tudíž i několik odkazů. Pro tyto účely se používá několik následujících příkazů.
Nejprve bude třeba nadefinovat mapu, a to v hlavičce dokumentu (<HEAD>...</HEAD>). K tomuto účelu se používá uzavřený příkaz
<MAP>...</MAP> , který má jako parametr slovo
NAME. V praxi to vypadá následovně:
<MAP NAME=mapa_ruze>.....</MAP>
Název "mapa_ruze" se bude používat v celém dokumentu jako název dané klikací mapy.
Dále bude nutné definovat si jednorázový příkaz
<AREA>. Ten má následující parametry:
COORDS - koordináty určující tvar klikací mapy
HREF - odkaz kam se přemístíme po kliku na definovaný část obrázku
SHAPE - tvar klikací mapy. Může být kruh (CIRCLE), polygon (POLY) a obdélník (RECT)
TARGET - do kterého okna směrovat odkaz.
Příkaz tedy může vypadat takto:
<AREA coords=150,11,40 href="http://www.server. cz/index.htm" shape=CIRCLE target=_top>
Příkaz AREA se svými parametry se musí nacházet mezi příkazy <MAP> a </MAP>, tedy:
<MAP><AREA coords=150,11,40 href="http://www. server.cz/index.htm" shape=CIRCLE target=_top> </MAP>
Tímto jsme si nadefinovali klikací mapu s název "mapa_ruze" jako kruh o určitých koordinátech (x,y,poloměr). Těchto klikacích map však může být více, pak se budou definovat za sebou uvnitř příkazu MAP, viz přiložené HTM soubory, kde je vše pěkně vysvětleno na příkladech.
Máme-li nadefinovány všechny mapy, musíme určit obrázek, který se má touto mapou stát (v těle dokumentu (<BODY>...</BODY>). Bude to již nám známý příkaz <IMG> s novým parametrem
USEMAP - udává název použité klikací mapy
V našem případě to tedy může vypadat nějak takto:
<IMG align=middle alt="Klikací mapa" border=0 height=300 width=400 src="ruze.gif" useMap =&mapa_ruze>
A je to. Nyní bude obrázek se jménem "ruze.gif" pouzit jako klikací mapa, v našem případě jeho část definovaná jako kruh. Pro lepší pochopení viz ukázkové soubory.
RÁMY (frejmy)
Další zajímavou možností HTML je možnost vkládání rámů, tedy rozdělení obrazovky na více jednotlivých relativně samostatných obrazovek. Tyto se definují jako jednotlivé rámy (anglicky frames).
Pro nadefinování rámů budeme potřebovat soubor, ve kterém je všechny nadefinujeme. Tento soubor nebude na obrazovce nikdy vidět, zobrazeny budou právě pouze jím nadefinované rámy (potřebujeme vlastně o jeden soubor více - pokud budou tři různé rámy, bude tedy třeba čtyř souborů). Soubor pro definování rámů nemá tělo <BODY>, pouze hlavičku <HEAD> a ukončovací </HTML>. Příkazy:
FRAMESET - uzavřený příkaz definující začátek a konec rámu a udávající, kolik bude mít řádků a sloupců. Jako parametry se udávají:
ROWS - počet a velikost řádků (bodů)
COLS - počet a velikost sloupců (bodů)
Syntaxe je následující:
<frameset rows="100,*" cols="200,*"> </frameset>
Toto rozdělí obrazovku na tři okna, horní vodorovné o velikosti 100 bodů, a dvě svislá o velikosti 200 bodů (první svislý rám), přičemž velkost druhého svislého rámu bude dána grafickým rozlišením mínus 200 (čili zbytek). Hvězdička vždy udává, že kromě přesně velikostně definovaného rámu bude zbytek obrazovky k dispozici pro další okna (rámy). Velikost se nemusí zadávat pouze absolutně, lze i v procentech: ="25%".
FRAME - jednorázový příkaz jenž definuje, co se bude nacházet (jaký dokument) v jednotlivých rámech. Jako parametry má slova:
SRC - název souboru (html dokumentu), který bude v určitém rámu zobrazen
NAME - název rámu (pro umístění - target)
SCROLLING - umožnit scrolling rámu (okna) - yes, no, auto.
Příklad:
<frame src="ram1.htm" name="r1" scrolling="no">
Celý příkaz FRAME se musí nacházet mezi <FRAMESET> a </FRAMESET>, tak jak je vidět v ukázkových souborech. Příkazem
TARGET - cíl, název rámu, kam zobrazit dokument
v odkazech na jiné stránky (dokumenty) se používá právě název rámu, který byl definován v příkazu FRAME. Místo toho lze použít i následující parametry:
_TOP - zobrazí dokument do nejvyšší struktury
_PARENT - zobrazí dokument do první nadřazené struktury
_BLANK - zobrazí dokument do nového okna
_SELF - zobrazí dokument do stejného okna (toto je dáno jako default, přednastavené).
Pokud v dokumentu za příkaz <BODY> umístíte následující řádku
<BASE TARGET="název_rámu">
budou se vše dokumenty otevírat do okna s názvem "název_rámu" a nebude třeba každému udávat vlastní (a stejný) TARGET.
FRAMEBORDER - jednorázový příkaz určující hranice (okraje) rámů, zde konkrétně, zda mají mít 3D vzhled (=yes/1) nebo ne (=no/0). Jako default je nastaveno "yes". Zadáte-li "no" nezmizí úplně, ale ztratí 3D vzhled.
FRAMESPACING a BORDER - tyto zdánlivě odlišné příkazy slouží k tomu samému účelu - definovat odstupy mezi rámy, čili jak velké budou okraje. Příkaz FRAMESPACING je pro MS Internet Exploder, BORDER zase naopak pro NechťZkape Navigator. Proto se používají oba a nastavují se vždy na stejnou hodnotu. Příklad:
<.... framespacing=20 border=20 ...>
Také se udává, že každá stránka obsahující frejmy by měla mít svoji "bezrámovou" alternativu (někde v dokumentu odkaz na tu samou stránku, ale bez rámů). To však záleží již na každém jednotlivém autorovi.
Tolik druhá část našeho seriálu. V příští části si ukážeme tvorbu tabulek, formulářů, vkládání zvláštních znaků a možná i několik zajímavých podrobností.
Neznámý vojín