Laboratórium špecializácie 1 - jazyk XHTML, CSS - na stránkach sa pracuje

Navigačné menu

• XHTML, CSS a JavaScript
• Kapitola 1: Základy jazyka XHTML
  • Kapitola 1.1: Úvod do XHTML
  • Kapitola 1.2: Pravidlá XHTML
  • Kapitola 1.3: Kostra stránky
  • Kapitola 1.4: Nadpisy
  • Kapitola 1.5: Odkazy
  • Kapitola 1.6: Zoznamy
  • Kapitola 1.7: Tabuľky
  • Kapitola 1.8: Obrázky
  • Kapitola 1.9: Úlohy
• Kapitola 2: Kaskádové štýly
  • Kapitola 2.1: Úvod do CSS
  • Kapitola 2.2: Farby
  • Kapitola 2.3: Písmo
  • Kapitola 2.4: Zarovnanie
  • Kapitola 2.5: Odkazy
  • Kapitola 2.6: Zoznamy
  • Kapitola 2.7: Rámčeky a ohraničenie
  • Kapitola 2.8: Pozadie
  • Kapitola 2.9: Triedy a identifikátory
  • Kapitola 2.10: CSS vlastnosti - stručný prehľad
  • Kapitola 2.11: Úlohy
• Kapitola 3: Validácia web stránok
• Kapitola 4: Okná
  • Kapitola 4.1: Vytvorenie štruktúry okien
  • Kapitola 4.2: Určenie obsahu okna
  • Kapitola 4.3: Úlohy
• Kapitola 5: Formuláre
 
• Ďalšie študijné materiály

1. Základy jazyka XHTML

Jazyk XHTML (eXtensible HyperText Markup Language) je nástupca jazyka HTML založený na XML (eXtensible Markup Language ). Nový spôsob vytvárania webových dokumentov, zdôraznený v jazyku XHTML, oddeľuje štruktúru dokumentu (nadpisy, odstavce, citáty, tabuľky, a podobne) od jeho výzoru (písmo, farba, a podobne). Značky určené na popisovanie výzoru boli zo štandardov HTML 4.01 Strict a XHTML vynechané. Nahradzuje ich CSS (Cascading Style Sheets). Každý dokument XHTML musí začínať definíciou typu DTD (Document Type Definition). Definícia typu určuje množinu značiek, ktoré môžu byť použité v dokumente.

Verzie XHTML

XHTML 1.0

• Prvá špecifikácia, ktorej cieľom bolo transformovanie staršieho jazyka HTML tak, aby vyhovoval podmienkam tvorby XML dokumentu, a aby bola zachovaná spätná kompatibilita.
• Rozlišujeme 3 druhy:

  XHTML 1.0 Strict

  čisto štrukturálne značkovanie, neobsahuje žiadne značky spojené s formátovaním vzhľadu

  XHTML 1.0 Transitional

  povoľuje atribúty pre formátovanie textu a odkazov v elemente body a niektoré ďalšie atribúty

  XHTML 1.0 Frameset

  používa sa pri použití rámcov (frames) pre rozdelenie okna prehliadača na dve alebo viac častí

• Jediným podstatným rozdielom oproti HTML je, že všetky prvky sú párové a musia byť ukončené. Hodnoty všetkých atribútov musia byť zapísané v uvozovkách.

XHTML Basic

Príklad minimálnej sady modulov potrebnej k vytvoreniu XHTML dokumentu, ktorá je cielená na mobilné aplikácie.

XHTML Mobile Profile

XHTML Mobile Profile - niekedy tiež XHTML MP je postavené na základe XHTML Basic a je určené pre použitie v mobilných telefonoch. Niekedy je tiež označované ako WAP 2.0

XHTML 1.1 - modulovo založené XHTML

• Príklad rozsiahlej sady modulov pre komplexnejšiu tvorbu XHTML dokumentov.
• Vynecháva už prakticky všetky prezentačné vlastnosti.
• Je podobné XHTML 1.0 Strict, ale narozdiel od neho môže vzhľadom ku svojej modularizácii slúžiť ako základ budúcim rozšíreným dokumentom z rodiny XHTML.

XHTML 2.0

Vývojové štádium Working Draft.

1.1. Úvod do XHTML

V XHTML sa používajú špeciálne značky – tagy. Tagy sú tvorené znakmi < a >, medzi ktorými je názov tagu (napr. <tag>). Všetko ostatné, čo nie je medzi týmito znakmi, sa zobrazuje ako výsledný text na stránke. Tagy určujú, aký má text význam.

<h1>Tento text je nadpis úrovne 1.</h1>
<a href="http://www.stuba.sk">Toto je odkaz na stránku STU</a>

Tento text je nadpis úrovne 1.
Toto je odkaz na stránku STU

V XHTML sú všetky tagy párové, to znamená, že ku každému počiatočnému tagu musí existovať tag ukončovací, ten sa líši od počiatočného tým, že pred názvom tagu je lomítko (/).

Pokiaľ použijeme tag, ktorý neobsahuje žiadny text, ktorý by bolo nutné ohraničiť počiatočným a koncovým tagom (napr. img – tag pre obrázok), použijeme zápis <tag />.

Jeden tag môže byť vnútri druhého tagu, ale tagy sa nikdy nesmú krížiť!

<tag1>Text <tag2>zobrazovaný</tag1> na stránke.</tag2>

<tag1>Text <tag2>zobrazovaný</tag2> na stránke.</tag1>

Všetky tagy musia byť písané malými písmenami, pretože XHTML je case-sensitive.

1.1.1. Elementy

Elementom nazývame celú sekvenciu začínajúcu sa počiatočným tagom a končiacu tagom ukončovacím. Existujú tri základné druhy elementov, blokové, inline a nahradzované. Podľa významu, ktorý textu priradzujú ich môžeme rozdeliť ešte na elementy pre štruktúrovanie dokumentu, textové elementy, elementy pre tvorbu odkazov, elementy pre tvorbu tabuliek, elementy pre tvorbu zoznamov atď.

Blokové elementy

Sú to elementy, ktoré tvoria blok. Zjednodušene to znamená, že po takomto elemente je text dokumentu zalomený, odriadkovaný. Blokovými elementami sú napr. elementy pre nadpis (h1 až h6), element pre odstavec (p).

Inline elementy

Inline elementy sú elementy, ktoré sa nachádzajú vnútri textu. Nedochádza po nich k zalomeniu. Obvykle plnia funkciu zvýraznenia časti textu. Je to napr. element pre hypertextový odkaz (a).

Nahradzované elementy

Tieto elementy sú nahradené nejakým obsahom, pre začlenenie do dokumentu sú dôležité ich rozmery. Je to napr. element pre obrázok (img).

1.1.2. Atribúty

Elementy môžu mať svoje atribúty. Atribúty priraďujú vlastnosti danému elementu. Atribúty sa zadávajú do počiatočného tagu, môže ich byť aj viac (oddeľujú sa medzerou), ale nemusí byť aj žiadny. Každý atribút má svoju hodnotu. Hodnota atribútu musí byť v XHTML zapísaná v úvodzovkách.

<element atribút="hodnota _atribútu">Text zobrazovaný na stránke.</element>

<input type="hidden" name="meno_premennej" value="hodnota_premennej" />

<br />

Poznámka: Hodnotu atribútu môžeme zapísať aj do apostrofov.

1.2. Pravidlá XHTML

Pred samotným dokumentom sa nachádza deklarácia XML:

<?xml version="1.0" encoding="windows-1250"?>

Povinná je deklarácia typu dokumentu (DTD):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

alebo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

alebo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Element html obsahuje atribút xmlns, ktorý určuje menný priestor dokumentu (namespace) a jazyk, ktorý je v dokumentu použitý:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk">

Element html vždy obsahuje dva elementy, head (záhlavie) a body (telo dokumentu). Záhlavie musí obsahovať element title.

<head>
   <title>Titulok stránky</title>
</head>

Ďalej môže obsahovať meta značky, linky ku kaskádovým štýlom, linky k javascriptom a pod. Kvôli starším prehliadačom by mala obsahovať najmä meta značku pre kódovanie

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
   <meta http-equiv="Content-Language" content="sk" />
   <meta http-equiv="ImageToolbar" content="no" />
   
   <title>Titulok stránky</title>
   
   <link rel="stylesheet" href="style_s.css" type="text/css" media="screen" />
   <link rel="stylesheet" href="style_p.css" type="text/css" media="print" />
   <link rel="shotcut icon" href="favicon.ico" type="image/x-icon" />
   
   <base href="http://www.stuba.sk" />
   
   <script src="script.js" type="text/javascript"></script>
</head>

Meta značky

Meta značky nastavujú kódovanie dokumentu, opisujú web stránku, určujú autora stránok (alebo len niektorých častí), automaticky presmerovávajú, určujú kľúčové slová a je aj možnosť nastavenia si vlastných meta značiek. Toto všetko a ešte viac slúži nie len pre internetové vyhľadávanie a radenie stránok v katalógoch, ale aj pre komunikáciu s iným aplikáciami ako je internetový prehliadač.

Meta značky zapisujeme pomocou elementu <meta />, ktorý môžeme vložiť iba do záhlavia dokumentu.

Meta značka sa vo všeobecnosti skladá z dvoch povinných častí (atribútov). Prvým atribútom je buď name (všeobecná informácia) alebo http-equiv (systémová informácia). V tomto atribúte (name, http-equiv) ja napísané, aký druh meta informácie bude poskytovaný (napríklad name="keywords" budú kľúčové slová). Druhým povinným atribútom je content (vlastný obsah meta informácie). Meta značka schématicky vyzerá nasledovne:

<meta name="druh informácie" content="jej obsah" />
<meta http-equiv="druh informácie" content="jej obsah" />

Meta značka pre nastavenie kódovania:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Meta značka pre automatické presmerovanie

<meta http-equiv="refresh" content="5; url=http://www.stuba.sk" />

Hodnota refresh znamená, že sa má otvorená web stránka obnoviť za dobu, ktorá je určená na 5 sekúnd a presmerovať na adresu http://www.stuba.sk.

Meta značka pre neukladanie stránky do cache pamäti

<meta http-equiv="pragma" content="no-cache" />

Meta značka pre opis stránky

<meta name="description" content="stránka o XHTML" />

Meta značka pre kľúčové slová

<meta name="keywords" content="Výuka, XHTML, CSS, ..." />

Meta značka pre autora stránky

<meta name="author" content="Meno Priezvisko" />

Meta značka pre vlastníka stránky

<meta name="owner" content="Meno Priezvisko" />

Meta značka pre copyright

<meta name="copyright" content="&copy; 2025 Firma a.s." />

Meta značka pre indexovanie vo vyhľadávačoch

<meta name="robots" content="index,follow" />

Meta značka pre neindexovanie vo vyhľadávačoch

<meta name="robots" content="noindex,nofollow" />

Meta značky – zhrnutie

Atribút	Hodnota	DTD
content	ľubovoľný text	Strict, Transitional, Frameset
http-equiv	content-type expires refresh set-cookie	Strict, Transitional, Frameset
name	author description keywords generator revised iné	Strict, Transitional, Frameset
scheme	ľubovoľný text	Strict, Transitional, Frameset

1.3. Kostra stránky

Dokument začína deklaráciou XML, nasleduje DTD, potom tag HTML obsahujúci záhlavie a telo dokumentu.

<?xml version="1.0" encoding="windows-1250"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
   <title>Titulok stránky</title>
</head>
<body>    
  <h1>Nadpis</h1>
  <p>Text text text</p>
</body>
</html>

1.4. Nadpisy

Existuje 6 úrovní nadpisov, označujú sa h1, h2, h3, h4, h5 a h6, kde 1 je najvyššia úroveň. Úrovne sa líšia veľkosťou písma, všetky nadpisy sú implicitne zarovnávané vľavo.

<h1>Nadpis 1. úrovne</h1>
<h2>Nadpis 2. úrovne</h2>
<h3>Nadpis 3. úrovne</h3>
<h4>Nadpis 4. úrovne</h4>
<h5>Nadpis 5. úrovne</h5>
<h6>Nadpis 6. úrovne</h6>

Nadpis 1. úrovne
Nadpis 2. úrovne
Nadpis 3. úrovne
Nadpis 4. úrovne
Nadpis 5. úrovne
Nadpis 6. úrovne

1.5. Odkazy

Odkazy sú základom každej web stránky. Bez odkazov by sa užívateľ nikam nedostal. V texte sú odkazy vizuálne odlíšené, štandardne je to farebným odlíšením a podtrhnutím. Kliknutím na odkaz je tento odkaz aktivovaný a dochádza k presmerovaniu.

Pre odkaz sa používa element a. Jeho atribútom je href. Ten udáva, kde je umiestnený cieľový dokument (teda na ktorú stránku odkaz smeruje). Samotné umiestnenie potom zadávame absolútnou, alebo relatívnou adresou.

1.5.1. Odkaz na inú stránku

Absolútny odkaz

Absolútny odkaz sa používa pre odkaz na dokument umiestnený na inom serveri, napr. ako odkaz na inú stránku. Odkaz na inú stránku musí vždy obsahovať http://.

<a href="http://www.stuba.sk">STU v BA</a>

STU v BA

Hodnotou atribútu href je adresa cieľového dokumentu (v tomto prípade http://www.stuba.sk). Zobrazovaný a klikateľný text bude STU v BA.

Relatívny odkaz

Relatívny odkaz sa používa, pokiaľ sa odkazujeme v rámci rovnakého servera. Pri použití relatívneho odkazu prehliadač sám doplňuje URL stránky, z ktorej je odkazované. Pokiaľ teda odkazujeme na dokument nachádzajúci sa v rovnakom adresári, stačí napísať iba názov súboru.

<a href="index.php">úvod</a>

úvod

Ak sa dokument nachádza v inom adresári, musíme do URL zahrnúť celú cestu od miesta, kde sa cesty k odkazovanému a odkazujúcemu dokumentu začali odlišovať.

<a href="images/xhtml/anchor.html">odkaz na anchor</a>

odkaz na anchor

Keď sa budeme chcieť dostať v adresárovej štruktúre o úroveň vyššie, použijeme k tomu dve bodky (..). Pokiaľ by sme teda chceli zo stránky anchor.html (viď. vyššie) odkázať na súbor anchor2.html, ktorý je uložený v adresári priklady, použijeme zápis:

<a href="../anchor2.html">odkaz na anchor2</a>

<a href="../kap1.php">späť na kurz</a>

1.5.2. Odkaz na konkrétne miesto dokumentu

Niekedy je dobré odkazovať sa aj na časti stránky (napr. pokiaľ je stránka dlhšia — potom v úvode použijeme odkazy na jej jednotlivé časti a ďalej pokiaľ z inej stránky potrebujeme použiť odkaz na presne určenú časť stránky (aby užívateľ nemusel hľadať). Na označenie miesta, na ktoré chceme odkázať použijeme atribút id, v odkaze potom použijeme ako vždy atribút href, ktorý ale bude tentoraz začínať znakom #. Často sa toto používa tiež pri odkazovaní na začiatok stránky.

<a href="#top">späť na začiatok</a>

späť na začiatok

Takýto odkaz môžeme dať niekam na koniec stránky, po kliknutí prehliadač sám „odroluje” tak, že sa element označený príslušným názvom dostane do hornej časti okna prehliadača.

Poznámka: Odkazovaná časť dokumentu sa do hornej časti okna pochopiteľne nedostane v prípade, že pokračovanie stránky nie je dostatočne dlhé k zaplneniu celého okna prehliadača (potom bude niekde vnútri okna…).

Rovnakým spôsobom potom odkazujeme aj z inej stránky, len musíme pridať klasickým spôsobom odkaz na celý dokument a za nim odkaz na konkrétne miesto.

Odkaz na <a href="kap1.php#odkaz">nadpis s návestím odkaz</a>

Odkaz na nadpis s návestím odkaz

Časť dokumentu, na ktorú takto odkazujeme označíme takto (v našom prípade budeme odkazovať na nadpis stránky druhej úrovne):

<h2 id="odkaz">Nadpis s návestím odkaz</h2>

Nadpis s návestím odkaz"

1.5.3. Titulok odkazu

Každý odkaz by mal mať svoj titulok. Tým je text, ktorý užívateľovi priblíži, kam vlastne odkaz smeruje. Titulok sa zobrazí pri nabehnutí kurzoru myši na odkaz. Titulky odkazov sú dôležité tiež napr. pre čítacie zariadenia, umožňujú lepšiu orientáciu na webe.

<a href="http://www.stuba.sk" title="Úvodná stránka STU">STU v BA</a>

STU v BA

1.6. Zoznamy

1.6.1. Neusporiadaný (nečíslovaný) zoznam

Neusporiadaný (nečíslovaný) zoznam sa vytvára tagom ul (unordered list). Položka zoznamu je li (list item). Položka môže obsahovať aj viac odstavcov. Pred každou položkou sa štandardne vytvára odrážka.

<ul>
      <li>linux</li>
      <li>windows</li>
      <li>unix</li>
</ul>

linux
windows
unix

1.6.2. Usporiadaný (číslovaný) zoznam

Usporiadaný (číslovaný) zoznam sa vytvára tagom ol (ordered list). Položka zoznamu je opäť li. Pred položku sa automaticky vypisuje jej poradové číslo.

<ol>
      <li>linux</li>
      <li>windows</li>
      <li>unix</li>
</ol>

linux
windows
unix

1.6.3. Zoznam definícií

Zoznam definícií sa používa obvykle v prípade, keď potrebujeme napr. vypísať nejaké termíny a k nim ich definície alebo popisy. Používa sa tag dl (definition list). Definovaný termín sa označuje tagom dt (term), definícia termínu tagom dd (definition).

<dl>
      <dt>OS</dt>
      <dd>operačný systém</dd>
      <dt>HDD</dt>
      <dd>pevný disk </dd>
      <dt>CPU</dt>
      <dd>procesor</dd>
</dl>

OS
operačný systém
HDD/FDD
pevný/pružný disk 
CPU
procesor

1.7. Tabuľky

Tabuľka sa vytvára pomocou elementu table. Riadok tabuľky sa definuje tagom tr (table row), pre bunky tabuľky sa používa tag th (table head; pre bunky v záhlaví tabuľky) a td (table data). Bunky sa vkladajú vnútri riadku tabuľky, koľko buniek, toľko bude mať tabuľka stĺpcov. Bunky záhlavia sú štandardne formátované tučným písmom, zarovnané na stred.

V tabuľke sa používa atribút summary, ktorý zhrňuje obsah tabuľky. Slúži pre lepšiu prístupnosť webu.

<table summary="skúšobná tabuľka">
<tr>
  <th>1</th>
  <th>2</th>
</tr>
<tr>
  <td>aaa</td>
  <td>bbb</td>
</tr>
<tr>
  <td>ccc</td>
  <td>ddd</td>
</tr>
</table>

	
1
	
2


	
aaa
	
bbb


	
ccc
	
ddd

1.7.1. Nadpis tabuľky

Na nadpis tabuľky sa používa element caption. Ten by mal byť uvedený vnútri tagu table ešte pred prvým riadkom.

<table>
<caption>Nadpis tabuľky</caption>
<tr>
  <th>1</th>
  <th>2</th>
</tr>
<tr>
  <td>aaa</td>
  <td>bbb</td>
</tr>
<tr>
  <td>ccc</td>
  <td>ddd</td>
</tr>
</table>

Nadpis tabuľky

	
1
	
2


	
aaa
	
bbb


	
ccc
	
ddd

1.7.2. Zlučovanie buniek

Atribút colspan zlúči dohromady niekoľko buniek v jednom riadku. Atribút rowspan zlúči bunky v stĺpci. Ako hodnotu týchto atribútov zapisujeme počet buniek, ktoré chceme takto zlúčiť.

<table>
<caption>Nadpis tabuľky</caption>
<tr>
  <th colspan="2">1</th>
</tr>
<tr>
  <td rowspan="2">aaa</td>
  <td>bbb</td>
</tr>
<tr>
  <td>ccc</td>
</tr>
</table>

Nadpis tabuľky

  
1


  
aaa
  
bbb


  
ccc

1.8. Obrázky

Na vloženie obrázku slúži nepárový element img. Povinnými atribútmi sú src, jeho hodnotou je názov obrázku, prípadne aj s cestou a alt obsahujúci alternatívny text, ktorý sa zobrazí, pokiaľ je obrázok prehliadača nedostupný, buď preto, že sa na zadanej adrese nenachádza alebo preto, že prehliadač obrázky nezobrazuje. Alternatívny text by mal teda nejakým spôsobom priblížiť čo je na obrázku tým, ktorí ho nevidia.

<img src="images/kniha.gif" alt="obrázok knihy" />

Obrázky na webe by sme mali na webe používať opatrne. Okrem výberu vhodných obrázkov je treba dbať na ich dátovú veľkosť, zďaleka nie každý si môže dovoliť prehliadať stránky, ktorých veľkosť sa dá počítať v megabytoch. Obrázky, ktoré nemajú inú funkciu než „zlepšenie designu“ stránky by mali byť vkladané iba pomocou CSS štýlu a to ako obrázok na pozadí.

1.8.1. Veľkosť obrázku

Veľkosť obrázku nie je povinne zadávať, aj preto je veľkou chybou toto opomenúť. Pokiaľ totiž veľkosť obrázku nezadáte, prehliadač si na jeho zobrazenie nevyhradí dostatočný priestor a keďže text okolo sa samozrejme načíta skôr než obrázok (pretože je čo sa týka veľkosti dát menší), spôsobí to „poskakovanie” stránky vo chvíli, keď sa začínajú načítavať obrázky, ktoré potrebujú viac priestoru než majú a text okolo im vlastne musí uhýbať.

Rovnako je vhodné zadávať obrázku jeho skutočnú veľkosť, nezmenšovať ani nezväčšovať pomocou prehliadača, ale pomocou grafického editora. Pokiaľ totiž obrázok o veľkosti napr. 100×100 pixelov zmenšíme v prehliadači na 50×50, docielime tak síce požadovanú veľkosť, ale užívateľ bude zbytočné sťahovať viac dát, pretože bude sťahovať samozrejme obrázok v pôvodnej veľkosti.

Pre určenie veľkosti obrázku sa používajú atribúty width (šírka) a height (výška) alebo vlastnosti s rovnakým menom v CSS.

1.8.2. Obrázková mapa

Obrázkové mapy využijeme napr. pre rôzne navigačné lišty. Je to obrázok, ktorého jednotlivé časti majú slúžiť ako odkazy na rôzne miesta. Mapa sa vytvára pomocou elementu map. Jeho povinným atribútom je id, čo je atribút slúžiaci ako identifikátor tejto mapy. Jeho hodnotou je teda nejaký textový reťazec, na ktorý sa neskôr bude obrázok tejto mapy odvolávať.

Element map obsahuje ľubovoľný počet (najmenej jeden) elementov area, ktoré vymedzujú priestor z obrázku, ktorý bude odkazom a určuje kam bude odkazovať. Tvar hranice aktívnej oblasti (t.j. miesto, na ktoré budeme môcť kliknúť a odkázať sa na daný dokument) určuje atribút shape. Jeho hodnotou je buď rect (obdĺžnik), poly (mnohouholník) alebo circle (kruh).

Konkrétne vymedzenie oblasti je dané v atribúte coords. Jeho hodnotou sú čísla oddelené čiarkou, ktorá definuje vrcholy n-uholníku. V prípade obdĺžnika je to v poradí: súradnice x ľavého horného rohu, súradnice y ľavého horného rohu, súradnice x pravého dolného rohu, súradnice y pravého dolného rohu. Obdobne po sebe budú nasledovať všetky vrcholy mnohouholníka. V prípade kružnice sú zadávané čísla v poradí: súradnice x stredu, súradnice y stredu, polomer kružnice.

Poznámka: Počiatok sústavy súradníc je v ľavom hornom rohu, teda ľavý horný roh má súradnice [0,0]. Súradnica x rastie v smere zľava doprava, súradnica y v smere zhora dole.

Povinným atribútom pri area je alt a nie menej dôležitým href, ktorý určuje cieľ odkazu. Takto môžeme teda rozdeliť obrázok na niekoľko aktívnych oblastí. Mapa je už vytvorená, stačí iba povedať obrázku, aby ju použil. Toho docielime pomocou atribútu usemap (atribút tagu img). Jeho hodnotou bude ten istý reťazec, aký sme použili v tagu map pri atribúte id. A teraz už len zostáva si to všetko ukázať na konkrétnom príklade:

<map id="mapa" name="mapa">
        <area href="http://www.stuba.sk" alt="časť 1" shape="rect" coords="0,0,33,31" />
        <area href="http://www.sme.sk" alt="časť 2" shape="rect" coords="34,0,66,31" />
        <area href="http://www.php.sk" alt="časť 3" shape="rect" coords="67,0,98,31" />
</map>

<img src="images/obr.gif" alt="obrázková mapa" width="122" height"40" usemap="#mapa" />

A môžete vidieť, že každá z troch častí obrázku skutočne odkazuje inam.

1.9. Úlohy