UNIVERSITATEA SPIRU HARET

FACULTATEA DE INGINERIE, INFORMATICA SI GEOGRAFIE Conf.univ.dr. Nicoleta IACOB

TEHNOLOGII WEB

Curs 2
Hărţi de imagini

Hărţile de imagini sunt imagini în care definirea anumitor zone, numite zone active, constituie legături
hipertext către alte pagini HTML. Cu alte cuvinte, zonele active constituie un substitut mult mai atractiv şi,
adeseori, mult mai adecvat, al ancorelor.
Realizarea unei hărţi de imagini presupune parcurgerea următoarelor două etape:
1. Definirea imaginii ce va fi utilizată drept hartă. Acest lucru se realizează cu ajutorul etichetei usemap
a tagului img. Acesta va primi ca valoare numele hărţii de imagini, ce va fi definită în cadrul etapei a
doua.
ex.: <img src="Poza.jpg" usemap="#Harta" >

2. Harta este definită în interiorul tagului map, prin intermediul atributului name, care specific
denumirea hărţii.
3. Tot în interiorul tagului map se definesc zonele active, cu ajutorul tagului area. Acesta are următoarele
atribute:
 href – precizează adresa paginii ţintă;
 shape – precizează forma zonei active, care poate fi:
o dreptunghi (rect) - valoarea implicită;
o cerc (circle);
o poligon (poly);
o default.
 coords – precizează coordonatele zonei active, acestea depinzînd de forma aleasă.
Coordonatele se vor separa prin virgulă.
În definirea unei zone active se va ţine cont că: suprafaţa unei imagini are ca unitate de măsură pixelul, iar
sistemul de coordonate are originea (0, 0) în colţul din stanga sus al imaginii, prima coordonată crescand
pe măsură ce ne deplasăm spre dreapta, cea de-a doua crescand pe măsură ce coboram spre baza imaginii.

Fig. Definirea coordonatelor unui cerc

Astfel, dacă zona activă are formă de cerc, se vor preciza trei valori: primele două corespunzătoare
coordonatelor centrului cercului, iar cea de-a treia corespunzătoare razei acestuia.

1
 ex. : tagul următor va defini o zonă activă în formă de cerc cu centrul în punctul (40, 20) al imaginii
şi rază 10, zonă activă care va ţinti către pagina ‘alta_pagina.htm’:

<area href="alta_pagina.htm" shape="circle" coords="40, 20, 10">

Pentru a defini o zonă activă în formă de dreptunghi, vor trebui precizate patru coordonate: primele două
corespunzătoare colţului stanga-sus al dreptunghiului şi alte două corespunzătoare colţului dreapta-jos.
ex. : vom defini acum o zonă activă în formă de dreptunghi cu colţurile în punctele (0, 0), respectiv
(10,10) , zonă activă care va ţinti către pagina ‘pagina2.htm’:

<area href="pagina2.htm" shape="rect" coords="0, 0, 10, 10">

În cazul unui poligon, coordonatele vor fi perechi de valori corespunzătoare varfurilor poligonului, de
forma:
coords = ”x1,y1, x2, y2,...,xn,yn”
 target – pagina ţintă poate fi afişată într-un cadru. În acest caz, atributul target va primi ca valoare
numele cadrului în cauză;
 alt – primeste ca valoare un mesaj ce va fi afişat sub săgeata mouse-ului, atunci cand aceasta intră
deasupra zonei active, mesaj ce de regulă este adresa paginii ţinta.
OBS : Dacă două sau mai multe zone active se suprapun, prioritară va fi prima dintre acestea definită în
cadrul tagului map.

Aplicaţie
Să presupunem că dorim să realizăm un site dedicat turismului, în care ne propunem să prezentăm cateva
mănăstiri din Moldova. Vom creea, cu ajutorul unui editor grafic, o imagine stilizată ce conţine mănăstirile.
Apoi vom defini această imagine drept hartă de imagini, în care efectuarea unui clic cu mouse-ul pe o
anumită mănăstire va determina încărcarea paginii cu descrierea acesteia.
Site-ul va avea patru pagini HTML:
 index.htm – va conţine harta de imagini şi va face legătura către paginile de descriere fie prin
intermediul zonelor active ale hărţii de imagini, fie prin legăturile hipertext adăugate ca alternativă;
 putna.htm, suceviţa.htm, voroneţ.htm – pagini ce conţin descrierea celor trei mănăstiri (cate o poză şi
un text adecvat).

Pagina index.htm - conţine harta de imagini şi face legătura către paginile de descriere ale manastirilor
fie prin intermediul zonelor active ale hărţii de imagini, fie prin legăturile hipertext adăugate ca
alternativă;

2
<!DOCTYPE html>
<html>
<head>
<title>Ghid Turistic</title>
</head>
<body>
<h1 align="center">Ghid turistic –
Manastirile Moldovei</h1>
<p align="center">
<a href="Putna.htm">[Putna]</a>
<a href="Voronet.htm">[Voronet]</a>
<a href="Sucevita.htm">[Sucevita]</a>
</p>
<p align="center">
<map name="Harta">
<area href="putna.htm" alt = "Manastirea Putna" shape="rect"
coords="2, 5, 81, 65">
<area href="voronet.htm" alt = "Manastirea Voronet" shape="circle"
coords="106, 209, 35">
<area href="sucevita.htm" alt = "Manastirea Sucevita" shape="polygon"
coords="82, 44, 84, 68, 58, 68, 100, 110, 121, 56, 95, 18">
</map>
<img border="0" src="Moldova.jpg" usemap="#Harta" >
</p>
<p align="center"><i>(efectuati un clic pe imaginea manastirii dorite
pentru a-i vizita pagina) </i></p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Manastirea Voronet</title>
</head>
<body>
<h1 align="center">Manastirea
Voronet</h1>
<p align="center">
<img border="3"
src="imagini/Voronet.jpg" width="100"
height="100">

3
</p>
<p align = "justify">Manastirea Voronet a fost construita in trei luni
si trei saptamini in cursul anului 1488, din porunca domnitorului Stefan
cel Mare, si a fost pictata in exterior in timpul lui Petru Rares.
</p>
<p align="center">
<a href="index.htm"><i>[acasa]</i></a>
</p>
</body>
</html>

Tabele

O altă modalitate de a structura informaţia unui document Web constă în utilizarea tabelelor. Acestea se
creează cu ajutorul tagului <table>.

Crearea tabelelor – Tagul <table>

Tagul <table> acceptă următoarele atribute:
- width, height – specifică lungimea, respectiv înălţimea tabelului. Valorile primite de cele două
atribute pot fi exprimate în pixeli, ca valori absolute, sau în procente din dimensiunea blocului
părinte.
- border – controlează afişarea/ascunderea chenarului celulelor tabelului şi, eventual, permite
specificarea grosimii sale. Chenarul celulelor are un aspect tridimensional. Implicit, atunci când
lipseşte, atributul border are valoarea 0, caz în care chenarul celulelor nu va mai fi trasat, însă se
va păstra organizarea sub formă de tabel a conţinutului. Dacă atributul border este prezent, dar nu
este însoţit de nici o valoare, se va trasa în jurul celulelor un chenar a cărei lăţime este dependentă
de browserul utilizat. Specificarea explicită a grosimii chenarului se realizează transmiţând ca
valoare a atributului border grosimea dorită, exprimată în pixeli.
- cellpading – controlează distanţa, exprimată în pixeli, dintre conţinutul unei celule şi chenarul său.
Implicit, atributul cellpading are valoarea 1.
- cellspacing - controlează distanţa, exprimată în pixeli, dintre două celule. Implicit, atributul
cellspacing are valoarea 2.
- bgcolor – permite specificarea unei culori de fundal a tabelului. Valoarea primită de atribut este
dată fie sub forma tripletului hexa #rrggbb, fie o constantă predefinită de culoare.
- background – permite afişarea unei imagini de fundal a tabelului. Atributul primeşte ca valoare
adresa URL a imaginii.
- bordercolor – permite specificarea culorii chenarului celulelor, exprimată fie sub forma tripletului
hexa #rrggbb, fie ca o constantă predefinită de culoare. Utilizarea acestui atribut nu are sens atunci
când atributul border nu există sau este setat pe 0.
- bordercolorlight, bordercolordark – setează culoarea luminoasă, respectiv culoarea umbrită, a
unui chenar tridimensional. Utilizarea celor două atribute are sens numai în prezenţa atributului
border.
- valign – specifică modul de aliniere verticală în interiorul celulelor. Alinierea poate fi: top, bottom,
center (valoare implicită).

4
 - align – specifică modul de aliniere al tabelului în cadrul ferestrei browserului. Ca şi în cazul
imaginilor, restul elementelor documentului pot umple marginile tabelului. Atributul align poate
primi valorile left, right, center.
Un tabel este organizat ca o succesiune de rânduri (orizontale), fiecare rând fiind împărţit în coloane
(verticale). Intersecţia dintre un rând şi o coloană defineşte o celulă.

Definirea rândurilor – Tagul <tr> (Table Row)

Introducerea rândurilor într-un tabel se realizează cu ajutorul tagului <tr>. Tagul <tr> acceptă atributele:

align – specifică modul de aliniere orizontală a conţinutului în interiorul celulelor rândului
respectiv. Alinierea poate fi: left (valoare implicită), right, center;

valign - specifică modul de aliniere verticală a conţinutului celulelor rândului în cauză. Alinierea
poate fi: top, middle, bottom, baseline. În cazul valorii baseline, toate elementele celulelor vor fi
aliniate la aceeaşi linie de bază;

bgcolor – permite specificarea culorii de fond pentru intregul rand. Culoarea poate fi specificată
printr-un triplet hexa #rrggbb sau cu ajutorul unei constante predefinite de culoare;

background – primeşte ca valoare adresa URL a unei imagini pe care o va afişa ca fundal al
rândului curente.

bordercolorlight, bordercolordark – atributele au aceeaşi semnificaţie ca în cazul includerii lor în
tagul <table>, numai că se vor referi la chenarul rândului curent.

title – permite afişarea unui mesaj când mouse-ul se opreşte deasupra rândului.
OBS : O mare parte dintre atributelor asociate tabelelor sunt comune tagurilor <table>, <tr> şi <td> . În
cazul în care un asemenea tag este definit simultan în două taguri diferenţiate ierarhic, prioritară va fi
valoarea atributului din tagul cel mai recent. De exemplu, dacă considerăm tagul <table bgcolor=”red”>,
definind culoarea rosie drept culoare de fundal a tabelului, apoi includem în tabel tagul <tr
bgcolor=”blue”>, vom constata că rândul curent are ca fundal culoarea albastră, aceasta fiind culoarea
definită în tagul cel mai recent (inferior ierarhic).

Definirea celulelor – Tagul <td> (Table Data)

Definirea celulelor unui tabel se realizeaeză cu ajutorul tagului <td>. Tagul acceptă atributele:

align – setează modul de aliniere orizontală a conţinutului celulei respective. Alinierea poate fi:
left, center, right.

valign – setează modul de aliniere verticală a conţinutului celulei respective. Alinierea poate fi:
top, bottom, center.

width, height – setează lungimea, respectiv lăţimea celulei curente.
Dimensiunile sunt exprimate fie în valori absolute (pixeli), fie în procente din dimensiunile corespunzătoare
ale tabelului. Se recomandă ca toate celulele unui rând/coloană să aibă aceeaşi înălţime/lungime, pentru a
nu altera forma tabelului.

bgcolor – setează culoarea fundalului celulei, analog includerii în tagurile <table> sau <tr>.

background – permite afişarea unei imagini de fundal a celulei, analog includerii în tagurile
<table> sau <tr>.

bordercolor, bordercolorlight, bordercolordark – atributele sunt recunoscute numai de către
Internet Explorer şi au aceeaşi semnificaţie ca şi în cazul tagurilor <table> şi <tr>, numai că se
referă la chenarul celulei curente.

nowrap – prezenţa acestui atribut inhibă posibilitatea ca textul unei celule să fie „spart” în mai
multe linii. Din motive lesne de înţeles, nu se recomandă utilizarea excesivă a acestui atribut.

colspan, rowspan – permit unirea mai multor celule aflate pe aceeaşi coloană, respectiv rând, într-
una singură. Implicit, cele două atribute au valoarea 1.

title - afişează un mesaj atunci când mouse-ul se află în repaos pe suprafaţa celulei.

5
Definirea antetelor – Tagul <th> (Table Header)
Celulele – antet sunt identice cu celulele data (td – Table Data), cu două excepţii:

Conţinutul de text al celulelor header este scris cu litere aldine;

Atributul align are, implicit, valoarea center.

Titlul tabelului – Tagul <caption>

Tagul <caption> defineşte titlul unui tabel. El este prezent în interiorul perechii <table> </table>, dar nu
în definiţia unui rând sau a unei celule. Tagul acceptă următoarele atribute:

align – atributul align poate primi valorile:
o top, bottom – controlează poziţia titlului faţă de tabel (deasupra/dedesupt);
o left, center, right – controlează alinierea orizontală a titlului. Valorile sunt recunoscute
numai de către Internet
Explorer. În cazul acestui browser, poziţionarea titlului deasupra sau dedesuptul tabelului se realizează cu
ajutorul atributului valign.

valign – pentru Internet Explorer, contolează poziţionarea titlului faţă de tabel (deasupra sau
dedesupt). Poate lua valorile top sau bottom.

Exemple:
<!DOCTYPE html>
<html>
<head>
<title>Credite bancare</title>
</head>
<body>
<h3>ING Bank</h3>
<h4>Dobanzi acordate pentru depozite in
valuta (12 luni)</h4>
<table border="2">
<tr>
<td>USD</td>
<td>2</td>
</tr>
<tr>
<td>EUR</td>
<td>2.7</td>
</tr>
</table>
</body>
</html>

6
Exemplu de tabel colorat
<!DOCTYPE html>
<html>
<head>
<title>Credite bancare</title>
</head>
<body>
<h3>ING Bank</h3>
<h4>Dobanzi acordate pentru depozite in valuta
(12 luni)</h4>
<table border="2" bordercolor="black"
bgcolor="silver">
<tr>
<td bgcolor="aqua">USD</td>
<td>2</td>
</tr>
<tr>
<td bgcolor="aqua">EUR</td>
<td>2.7</td>
</tr>
</table>
</body>
</html>

Exemplu de tabel aerisit

<!DOCTYPE html>
<html>
<head>
<title>Credite bancare</title>
</head>
<body>
<h3>ING Bank</h3>
<h4>Dobanzi acordate pentru depozite in valuta
(12 luni)</h4>
<table align="right" border="2" bordercolor="black" bgcolor="silver"
cellspacing="7" cellpadding="7">
<tr>
<td bgcolor="aqua">USD</td>
<td align="right">2</td>
</tr>

7
 <tr>
<td bgcolor="aqua">EUR</td>
<td align="right">2.7</td>
</tr>
</table>
Instrumente bancare de economisire: Certificat de depozit, Card Visa
Electronic, Visa Business
</body>
</html>

Exemplu de tabel cu celule extinse pe verticală

<!DOCTYPE html>
<html>
<head>
<title>Credite bancare</title>
</head>
<body>
<h4>Dobanzi acordate pentru depozite in
valuta (12 luni)</h4>
<table border="2" bgcolor="silver"
bordercolor="black">
<tr>
<td rowspan="2" bgcolor="skyblue">ING Bank</td>
<td>USD</td>
<td>2</td>
</tr>
<tr>
<td>EUR</td>
<td>2.7</td>
</tr>
<tr>
<td rowspan="2" bgcolor="skyblue">Alpha Bank</td>
<td>USD</td>
<td>2.35</td>
</tr>
<tr>
<td>EUR</td>
<td>3.2</td>
</tr>

8
</table>
</body>
</html>

Exemplu de tabel cu celule extinse pe verticală şi pe orizontală

<!DOCTYPE html>
<html>
<head>
<title>Credite bancare</title>
</head>
<body>
<h4>Dobanzi acordate pentru depozite in valuta
(12 luni)</h4>
<table border="2" bgcolor="silver"
bordercolor="black">
<tr>
<td rowspan="2" bgcolor="skyblue"
align="center" nowrap>ING Bank</td>
<td>USD</td>
<td align="right">2</td>
</tr>
<tr>
<td>EUR</td>
<td align="right">2.7</td>
</tr>
<tr>
<td rowspan="2" bgcolor="skyblue" align="center" nowrap>Alpha Bank
*)</td>
<td>USD</td>
<td align="right">2.35</td>
</tr>
<tr>
<td>EUR</td>
<td align="right">3.2</td>
</tr>
<tr>
<td bgcolor="skyblue" colspan="3">Bancile cu *) efectueaza lunar
plata dobanzii </td>
</tr>

9
</table>
</body>
</html>

Exemplu de tabel cu antete

<!DOCTYPE html>
<html>
<head>
<title>Credite bancare</title>
</head>
<body>
<table border="2" bgcolor="silver"
bordercolor="black" cellpadding="10">
<tr>
<th bgcolor="skyblue" colspan="3"
height="50">Dobanzi acordate pentru
depozite in valuta (12 luni)</th>
</tr>
<tr>
<th bgcolor="skyblue" height="30">Grup bancar</th>
<th colspan="2">Credite</th>
</tr>
<tr>
<th rowspan="2" bgcolor="skyblue" nowrap>ING Bank</th>
<td>USD</td>
<td align="right">2</td>
</tr>
<tr>
<td>EUR</td>
<td align="right">2.7</td>
</tr>
<tr>
<th rowspan="2" bgcolor="skyblue" nowrap>Alpha Bank</th>
<td>USD</td>
<td align="right">2.35</td>
</tr>
<tr>
<td>EUR</td>

10
 <td align="right">3.2</td>
</tr>
</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Credite bancare</title>
</head>
<body>
<table border="2" bgcolor="silver"
bordercolor="black">
<caption>
<h4>Dobanzi acordate pentru depozite in valuta
(12 luni)</h4>
</caption>
<tr>
<td rowspan="2" bgcolor="skyblue">ING Bank</td>
<td>USD</td><td>2</td>
</tr>
<tr>
<td>EUR</td>
<td>2.7</td>
</tr>
</table>
</body>
</html>

Alte utilizări ale tabelelor

Scrierea în coloane
Aşa cum am văzut mai devreme, scrierea în coloane poate fi realizată cu ajutorul tagului multicol, însă
acesta este recunoscut numai de către unele browsere. Utilizarea tabelelor oferă o alternativă, independentă
de browser, de a organiza conţinutul documentului web pe mai multe coloane. Se va crea, în acest sens, un
tabel fără chenar, cu o linie şi mai multe coloane.

11
<!DOCTYPE html>
<html>
<head>
<title>IFS</title>
</head>
<body>
<h3 align="center"> Sisteme de
functii iterate</h3>
<table align="center"
cellspacing="5">
<tr valign="top">
<td width="33%">In 1981, John Hutchinson pune bazele teoriei
sistemelor de functii iterate, in lucrarea <i>Fractali si</i> </td>
<td width="33%"><i>autosimilaritate</i>,insa de abia in 1988,
cercetatorul american Michael Barnsley reuseste sa</td>
<td>formalizeze aceasta teorie,demonstrind celebra teorema a
colajului, in lucrarea <i>Fractali pretutindeni</i>. </td>
</tr>
</table>
</body>
</html>

Alinierea verticală a elementelor în cadrul ferestrei browserului

Tabele oferă posibilitatea de a controla alinierea, atât pe orizontală cât şi pe verticală a unui element
oarecare (text, imagine şamd.) în cadrul ferestrei browserului. În acest sens, se va construi un tabel format
dintr-o singură celulă, tabel ce va tinde să acopere întreaga fereastră. Alinierea elementului în cadrul
ferestrei browserului se va realiza cu ajutorul atributelor align şi valign ale celulei.
În exemplul de mai jos am inserat un text şi o imagine în mijlocul ferestrei browserului şi un alt text la baza
ferestrei browserului. Poziţia acestora, relativ la marginile ferestrei, se va păstra chiar dacă utilizatorul îi
modifică dimensiunile.

<!DOCTYPE html>
<html>
<head>
<title>Album Foto</title>
</head>
<body bgcolor="#C0C0C0">
<table width="100%" height="90%">
<tr align="center" valign="center">
<td>
<h4>Albumul meu foto</h4>

12
 <h4><br><img src="Ven0.JPG" width="95" height="70"></h4>
</td>
</tr>
</table>
<p align="center">Venetia, august 2002</p>
</body>
</html>

13