Cum se realizează o legătură pe o imagine?

O legătură pe o imagine se realizează exact ca şi o legătură pe text cu diferenţa că url-ul imaginii va lua locul textului. De exemplu:

Secvenţa

va realiza:

Observaţie! Se pot utiliza imagini având numeroase formate; ex: bmp, jpg, jpeg, gif, etc.

Maparea unei imagini

Cu siguranţă aţi remarcat, când navigaţi pe web numeroase “map”-uri (map=harta). Ele pot fi considerate, practic, legături extinse, pe o imagine. Cel mai elocvent exemplu de map este chiar imaginea cu harta lumii. Se poate realiza câte o hiperlegătură către imaginea cu harta fizică a fiecărui continent în parte, aceasta putând fi vizualizată la executarea unui click în zona continentului respectiv. Analog, în cadrul fiecărui continent se găsesc mai multe ţări, în fiecare ţară mai multe oraşe, etc.

Pentru maparea unei imagini avem nevoie, în primul rând, de o imagine (map - de la care să pornim - pe care o vom introduce cu atributul “ usemap ” în tag-ul “img”), trebuie să identificăm şi să delimităm bine zonele hărţii (definite în elementul “area”) şi legăturile corespunzătoare acestora. Numele mapării imaginii specificat prin atributul usemap este, de fapt, un URI (Unique Resource Identifier), ceea ce înseamnă că se poate referi la o “hartă” aflată în alt fişier de pe site.

Definirea unei hărţi se realizează cu tag-urile <map></map>. Astfel îi putem transmite browserului care sunt zonele (contururile) speciale şi ce link corespunde fiecăruia.

De asemenea, putem defini şi modalitatea prin care se pot explora conţinuturile hiperlegăturilor realizate: la executarea unui click (folosindu-se atributul “onclick”), la executarea unui dublu click (“ondblclick”), când o tastă este apăsată (onkeypress),etc.

Fiecare mapare a unei imagini are un nume (name) şi conţine mai multe tag-uri area. Tag-urile area au următoarele atribute:

shape =” rect | circle | poly | default ”.
Atributul shape precizează forma ariei. Valorile posibile sunt:

•  point (x,y)

•  rect (forma dreptunghiulară) necesită coordonatele colţurilor din stânga-sus şi dreapta-jos,

•  circle (forma circulară) necesită coordonatele punctului central şi un număr care să genereze raza cercului,

•  poly (un poligon arbitrar cu 3 sau mai multe vârfuri) în cazul polinoamelor trebuie definite atâtea perechi de coordonate câte colţuri sunt,

•  default (reprezintă restul imaginii care nu este definită în tag-urile area);

coords =" coordonate "
Acest atribut precizează coordonatele care definesc colţurile ariei. Coordonatele depind de forma ariei specificată prin atributul shape.

Observaţie! Hărţile pot fi codate şi cu ajutorul elementului “ OBJECT ” în locul elementului “map”. Atributul pentru autodefinirea elementului “object” este “ SHAPES ”.

De exemplu:

Am exemplificat până acum hărţile ce ţin de client, fără să amintim nimic de cele care ţin de server. Ele au mai multe dezavantaje cum ar fi viteza de execuţie net inferioară hărţilor ce ţin de client, dar au avantajul unei securităţi îmbunătăţite, motiv pentru care acest tip de mapare se face utilă atunci când utilizatorul doreşte să se conecteze la un server pentru a face plăţi cu cartea de credit.

TABELE

Cum se inserează un tabel?

Pentru a insera un tabel se utilizează eticheta dublă ”table” . Orice tabel este alcătuit din elementele :

•  Linia Tabelului <tr> ... </tr> ;

•  Titlul Tabelului <th> ... </th> ;

•  Coloanele tabelului (datele) <td> ... </td> ;

•  Sub-titlu tabelului <caption> ...</caption> ;

Cum se formatează un tabel?

Există o serie de atribute care, aplicate marcajului table realizează formatarea tabelului. Şi anume:

•  bgcolor = defineşte culoarea tabelului;

•  width = specifică lungimea tabelului (în pixeli sau procente din lungimea paginii);

•  height = specifică înalţimea tabelului (în pixeli sau procente din lungimea paginii);

•  border =grosimea liniei (în pixeli) ce defineşte tabelul şi înconjoară fiecare celulă

•  cellspacing = spaţiu dintre celule (în pixeli);

•  cellpadding  = spaţiu dintre linia celulei şi conţinutul acesteia (în pixeli);

•  align = controlează poziţionarea tabelului în pagină, cu următoarele atribute: left, right , sau center ;

•  background = controlează culoarea de fond a tabelului, care poate fi şi o imagine;

•  bordercolor = culoarea liniei din jurul tabelului;

•  bordercolorlight = culoarea luminoasă folosită de două linii din cele patru care înconjoară tabelul;

•  bordercolordark = culoarea întunecată folosită de două linii din cele patru care înconjoară tabelul;

•  frame = defineşte ce parte din afara tabelului să fie vizibilă ( void, above, below, hsides, lhs, rhs, vsides, box, border );

•  rules = defineşte ce parte din interiorul tabelului să fie vizibilă (none, groups, rows, cols, all);

Complexitatea tabelelor este dată, însă, de conţinutul acestuia, astfel că o celulă poate conţine o imagine, alta o legătură, un rând poate avea doar text, ş. a. m. d. . Acestea se realizează prin formatarea diferită a celulelor, implicit a liniilor şi coloanelor cu atributele specifice acestora:

Atribut	Valoare	Descriere
abbr	text	Realizează o versiune abreviată a conţinutului textual al celulei
align	left, right, center justify	alinierea datelor celulei pe orizontală
valign	top, middle, bottom, baseline	alinierea datelor celulei pe verticală
axis	category_name	comunică browserului care anteturi de rând sau de coloană se aplică unei anumite celule
bgcolor	rgb(x,x,x) #xxxxxx colorname	colorează fundalul unei celule
colspan	number	specifică pe cât de multe coloane ale tabelului se va întinde celula curentă
rowspan	number	specifică pe cât de multe rânduri ale tabelului se va întinde celula curentă
height	Pixels %	specifică înălţimea celulei
width	Pixels %	specifică lungimea celulei

Exemplul 1:

<html> <body> <h4> Normal border:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>No border:</h4> <table border="0"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>Thick border:</h4> <table border="8"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>

Exemplul 2:

Exemplul 3: