Curs - Programare WEB

Harti de imagini

Hartile de imagini sunt imagini în care anumite zone, numite zone active, constituie legaturi hipertext catre alte pagini HTML. Cu alte cuvinte, zonele active constituie un substitut mult mai atractiv si, adeseori, mult mai adecvat, al ancorelor.

Realizarea unei harti de imagini presupune parcurgerea urmatoarelor doua etape:

Definirea imaginii ce va fi utilizata drept harta. Acest lucru se realizeaza cu ajutorul etichetei usemap a tagului img. Acesta va primi ca valoare numele hartii de imagini, ce va fi definita în cadrul etapei a doua.

ex.: <img src="Poza.jpg" usemap="#Harta" >

Harta este definita în interiorul tagului map, prin intermediul atributului name, care specifica de 636e42g numirea hartii.

Tot în interiorul tagului map se definesc zonele active, cu ajutorul tagului area. Acesta are urmatoarele atribute:

href - precizeaza adresa paginii tinta;

shape - precizeaza forma zonei active, care poate fi:

o       dreptunghi (rect) - valoarea implicita;

o       cerc (circle);

o       poligon (poly);

o       default.

coords - precizeaza coordonatele zonei active, acestea depinzînd de forma aleasa. Coordonatele se vor separa prin virgula.

În definirea unei zone active se va tine cont ca: suprafata unei imagini are ca unitate de masura pixelul, iar sistemul de coordonate are originea (0, 0) în coltul din stînga sus al imaginii, prima coordonata crescînd pe masura ce ne deplasam spre dreapta, cea de-a doua crescînd pe masura ce coborîm spre baza imaginii.

-fig- Definirea coordonatelor unui cerc -

Astfel, daca zona activa are forma de cerc, se vor preciza trei valori: primele doua corespunzatoare coordonatelor centrului cercului, iar cea de-a treia corespunzatoare razei acestuia.

ex. : tagul urmator va defini o zona activa în forma de cerc cu centrul în punctul (40, 20) al imaginii si raza 10, zona activa care va tinti catre pagina alta_pagina.htm':

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

Pentru a defini o zona activa în forma de dreptunghi, vor trebui precizate patru coordonate: primele doua corespunzatoare coltului stînga-sus al dreptunghiului si alte doua corespunzatoare coltului dreapta-jos.

ex. : vom defini acum o zona activa în forma de dreptunghi cu colturile în punctele (0, 0), respectiv (10,10) , zona activa care va tinti catre pagina pagina2.htm':

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

În cazul unui poligon, coordonatele vor fi perechi de valori corespunzatoare vîrfurilor poligonului, de forma:

coords = "x1,y1, x2, y2,...,xn,yn".

target - pagina tinta poate fi afisata într-un cadru. În acest caz, atributul target va primi ca valoare numele cadrului în cauza;

alt - primeste ca valoare un mesaj ce va fi afisat sub sageata mouse-ului, atunci cînd aceasta intra deasupra zonei active, mesaj ce de regula este adresa paginii tinta

OBS : Daca doua sau mai multe zone active se suprapun, prioritara va fi prima dintre acestea definita în cadrul tagului map.

Aplicatie

Sa presupunem ca dorim sa realizam un site dedicat turismului, în care ne propunem sa prezentam cîteva manastiri din Moldova. Vom creea, cu ajutorul unui editor grafic, o imagine stilizata ce contine manastirile. Apoi vom defini aceasta imagine drept harta de imagini, în care efectuarea unui clic cu mouse-ul pe o anumita manastire va determina încarcarea paginii cu descrierea acesteia.

Site-ul va avea patru pagini HTML:

index.htm - va contine harta de imagini si va face legatura catre paginile de descriere fie prin intermediul zonelor active ale hartii de imagini, fie prin legaturile hipertext adaugate ca alternativa;

putna.htm, sucevita.htm, voronet.htm - pagini ce contin descrierea celor trei manastiri (cîte o poza si un text adecvat).

Pagina index.htm- contine harta de imagini si face legatura catre paginile de descriere ale manastirilor fie prin intermediul zonelor active ale hartii de imagini, fie prin legaturile hipertext adaugate ca alternativa;

Tabele

O alta modalitate de a structura informatia unui document Web consta în utilizarea tabelelor. Acestea se creeaza cu ajutorul tagului <table>.

Crearea tabelelor - Tagul <table>

Tagul <table> accepta urmatoarele atribute:

width, height - specifica lungimea, respectiv înaltimea tabelului. Valorile primite de cele doua atribute pot fi exprimate în pixeli, ca valori absolute, sau în procente din dimensiunea blocului parinte.

border - controleaza afisarea/ascunderea chenarului celulelor tabelului si, eventual, permite specificarea grosimii sale. Chenarul celulelor are un aspect tridimensional. Implicit, atunci când lipseste, atributul border are valoarea 0, caz în care chenarul celulelor nu va mai fi trasat, însa se va pastra organizarea sub forma de tabel a continutului. Daca atributul border este prezent, dar nu este însotit de nici o valoare, se va trasa în jurul celulelor un chenar a carei latime este dependenta de browserul utilizat (în acest caz, browserele Internet Explorer si Netscape Comunicator traseaza un chenar de grosime 1). Specificarea explicita a grosimii chenarului se realizeaza transmitând ca valoare a atributului border grosimea dorita, exprimata în pixeli.

cellpading - controleaza distanta, exprimata în pixeli, dintre continutul unei celule si chenarul sau. Implicit, atributul cellpading are valoarea 1.

cellspacing - controleaza distanta, exprimata în pixeli, dintre doua celule. Implicit, atributul cellspacing are valoarea 2.

bgcolor - permite specificarea unei culori de fundal a tabelului. Valoarea primita de atribut este data fie sub forma tripletului hexa #rrggbb, fie o constanta predefinita de culoare.

background - permite afisarea unei imagini de fundal a tabelului. Atributul primeste ca valoare adresa URL a imaginii.

bordercolor - permite specificarea culorii chenarului celulelor, exprimata fie sub forma tripletului hexa #rrggbb, fie ca o constanta predefinita de culoare. Utilizarea acestui atribut nu are sens atunci când atributul border nu exista sau este setat pe 0. La ora actuala, setarea culorii chenarului este permisa numai de catre Internet Explorer.

bordercolorlight, bordercolordark - seteaza culoarea luminoasa, respectiv culoarea umbrita, a unui chenar tridimensional. Utilizarea celor doua atribute are sens numai în prezenta atributului border. La ora actuala, setarea culorii chenarului este permisa numai de catre Internet Explorer.

valign - specifica modul de aliniere verticala în interiorul celulelor. Alinierea poate fi: top, bottom, center (valoare implicita).

align - specifica modul de aliniere al tabelului în cadrul ferestrei browserului. Ca si în cazul imaginilor, restul elementelor documentului pot umple marginile tabelului. Atributul align poate primi valorile left, right, center.

hspace, vspace - controleaza marginea libera, pe orizontala, respectiv pe verticala, lasata între tabel si celelalte elemente ale documentului. Valorile primite de cele doua atribute sunt exprimate în pixeli. La ora actuala, numai Netscape Comunicator recunoaste aceste doua atribute.

Un tabel este organizat ca o succesiune de rânduri (orizontale), fiecare rând fiind împartit în coloane (verticale). Intersectia dintre un rând si o coloana defineste o celula.

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

Introducerea rândurilor într-un tabel se realizeaza cu ajutorul tagului <tr>. Tagul <tr> accepta atributele:

align - specifica modul de aliniere orizontala a continutului în interiorul celulelor rândului respectiv. Alinierea poate fi: left (valoare implicita), right, center;

valign - specifica modul de aliniere verticala a continutului celulelor rândului în cauza. Alinierea poate fi: top, middle, bottom, baseline. În cazul valorii baseline, toate elementele celulelor vor fi aliniate la aceeasi linie de baza;

bgcolor - permite specificarea, numai pentru Internet Explorer, a culorii chenarului rândului. Culoarea poate fi specificata printr-un triplet hexa #rrggbb sau cu ajutorul unei constante predefinite de culoare;

background - primeste ca valoare adresa URL a unei imagini pe care o va afisa ca fundal al rândului curente. Atributul este acceptat numai de catre Netscape Comunicator;

bordercolorlight, bordercolordark - atributele au aceeasi semnificatie ca în cazul includerii lor în tagul <table>, numai ca se vor referi la chenarul rândului curent. Sunt recunoscute numai de catre Internet Explorer;

title - permite afisarea unui mesaj când mouse-ul se opreste deasupra rândului.

OBS : O mare parte dintre atributelor asociate tabelelor sunt comune tagurilor <table>, <tr> si <td> . În cazul în care un asemenea tag este definit simultan în doua taguri diferentiate ierarhic, prioritara va fi valoarea atributului din tagul cel mai recent. De exemplu, daca consideram tagul <table bgcolor="red"> , definind culoarea rosie drept culoare de fundal a tabelului, apoi includem în tabel tagul <tr bgcolor="blue"> vom constata ca rândul curent are ca fundal culoarea albastra, aceasta fiind culoarea definita în tagul cel mai recent (inferior ierarhic).

Definirea celulelor - Tagul <td> (Table Data)

Definirea celulelor unui tabel se realizeaeza cu ajutorul tagului <td>. Tagul accepta atributele:

align - seteaza modul de aliniere orizontala a continutului celulei respective. Alinierea poate fi: left, center, right.

valign- seteaza modul de aliniere verticala a continutului celulei respective. Alinierea poate fi: left, center, right, baseline.

width, height - seteaza lungimea, respectiv latimea celulei curente.

Dimensiunile sunt exprimate fie în valori absolute (pixeli), fie în procente din dimensiunile corespunzatoare ale tabelului. Se recomanda ca toate celulele unui rând/coloana sa aiba aceeasi înaltime/lungime, pentru a nu altera forma tabelului.

bgcolor - seteaza culoarea fundalului celulei, analog includerii în tagurile <table> sau <tr>.

background - permite afisarea unei imagini de fundal a celulei, analog includerii în tagurile <table> sau <tr>.

bordercolor, bordercolorlight, bordercolordark - atributele sunt recunoscute numai de catre Internet Explorer si au aceeasi semnificatie ca si în cazul tagurilor <table> si <tr>, numai ca se refera la chenarul celulei curente.

nowrap - prezenta acestui atribut inhiba posibilitatea ca textul unei celule sa fie "spart" în mai multe linii. Din motive lesne de înteles, nu se recomanda utilizarea excesiva a acestui atribut.

colspan, rowspan - permit unirea mai multor celule aflate pe aceeasi coloana, respectiv rând, într-una singura. Implicit, cele doua atribute au valoarea 1.

title- afiseaza un mesaj atunci când mouse-ul se afla în repaos pe suprafata celulei.

Definirea antetelor - Tagul <th> (Table Header)

Celulele - antet sunt identice cu celulele data (td - Table Data), cu doua exceptii:

Continutul de text al celulelor header este scris cu litere aldine;

Atributul align are, implicit, valoarea center.

Titlul tabelului - Tagul <caption>

Tagul <caption> defineste titlul unui tabel. El este prezent în interiorul perechii <table> </table>, dar nu în definitia unui rând sau a unei celule. Tagul accepta urmatoarele atribute:

align - atributul align poate primi valorile:

o                   top, bottom - controleaza pozitia titlului fata de tabel (deasupra/dedesupt);

o                   left, center, right - controleaza alinierea orizontala a titlului. Valorile sunt recunoscute numai de catre Internet Explorer. În cazul acestui browser, pozitionarea titlului deasupra sau dedesuptul tabelului se realizeaza cu ajutorul atributului valign.

valign - pentru Internet Explorer, contoleaza pozitionarea titlului fata de tabel (deasupra sau dedesupt). Poate lua valorile top sau bottom.

Exemple:

Exemplu de tabel simplu

Exemplu de tabel colorat

Exemplu de tabel aerisit

Exemplu de tabel cu celule extinse pe verticala

Exemplu de tabel cu celule extinse pe verticala si pe orizontala

Exemplu de tabel cu antete

Alte utilizari ale tabelelor

Scrierea în coloane

Asa cum am vazut mai devreme, scrierea în coloane poate fi realizata cu ajutorul tagului multicol, însa acesta este recunoscut numai de catre Netscape Comunicator. Utilizarea tabelelor ofera o alternativa, independenta de browser, de a organiza continutul documentului web pe mai multe coloane. Se va crea, în acest sens, un tabel fara chenar, cu o linie si mai multe coloane.

Alinierea verticala a elementelor în cadrul ferestrei browserului

Tabele ofera posibilitatea de a controla alinierea, atât pe orizontala cât si pe verticala a unui element oarecare (text, imagine samd.) în cadrul ferestrei browserului. În acest sens, se va construi un tabel format dintr-o singura  celula, tabel ce va tinde sa acopere întreaga fereastra. Alinierea elementului în cadrul ferestrei browserului se va realiza cu ajutorul atributelor align si valign ale celulei.

În exemplul de mai jos am inserat un text si o imagine în mijlocul ferestrei browserului si un alt text la baza ferestrei browserului. Pozitia acestora, relativ la marginile ferestrei, se va pastra chiar daca utilizatorul îi modifica dimensiunile.