Chicu Limbajul HTML PDF

ACADEMIA DE TRANSPORTURI,
INFORMATIC I COMUNICAII
Seria Teorie Economic,

Matematic i Informatic
Olga CHICU
Limbajul HTML
Chiinu, Evrica - 2011
CZU 004.4(075.8)
Descrierea CIP a Camerei Naionale a Crii
Chicu, Olga
Limbajul HTML / Olga Chicu; Acad. de Transporturi, Inform. i
Comunic. Ch.: Evrica, 2011 (Tipogr. AM). 99 p.
Bibliogr. p. 83 (9 tit.)
ISBN
150 ex.
Lucrarea prezint materiale teoretice i practice pentru studierea
limbajului HTML. n esen, ofer cunotine necesare pentru crearea
paginilor web simple, dar i cunotine ce in de regulile de baz n crearea
site-urilor web.
Se adreseaz n special studenilor din nvmntul univerdsitar de la
specialitile Informatic, Tehnologii Informaionale, dar poate fi un
ghid util i pentru cei interesai s studieze i s-i perfecioneze
cunotinele n domeniul crerii paginilor web. Datorit limbajului laconic
a expunerii materialului, lucrarea va fi accesibil tuturor persoanelor
indiferent de domeniul de activitate
Lucrarea a fost examinat i recomandat spre editare la edina
Catedrei Matematic i Informatic (proces-verbal nr. 5 din
20.01.2010) i la edina Comisiei Metodice i de Calitate a Facultii
Economie i Informatic din cadrul Academiei de Transporturi,
Informatic i Comunicaii (proces-verbal nr. 4 din 03.02.2010)
Autor: Olga Chicu lector superior universitar ASEM
Refereni:
Ada Sajin lector superior universitar ASEM
Vitalie Cotelea doctor n tiine fizico-matematice,
confereniar universitar ASEM
M-208-96
ISBN
Editura Evrica, 2011

Olga Chicu, 2011
Cuprins:
Introducere....................................................................................
1. Noiuni eseniale.......................................................................
1.1. Structura unui document HTML......................................
1.2. Crearea unui document HTML........................................
1.3. Editarea unui document HTML.......................................
9
9
10
12
2. Formatarea documentului.........................................................
2.1. Formatarea caracterelor....................................................
2.2. Caractere speciale............................................................
2.3. Atributele tag-ului <body>...
13
13
19
20
3.Liste............................................................................................
3.1. Liste neordonate...............................................................
3.2. Liste ordonate...................................................................
3.3 Liste de definiii................................................................
21
21
22
24
4. Referine....................................................................................
26
5. Imagini......................................................................................
5.1. Imagini de tip client-side image map (hri de imagini)..
30
33
6. Tabele........................................................................................
6.1. Atributele tag-ului <table>..
6.2. Atributele tag-ului <tr>
6.3. Atributele tag-ului <td>...
38
39
43
44
7. Cadre.........................................................................................
7.1. Definirea cadrelor............................................................
7.2. Atributele tag-ului <frame>.............................................
7.3. Cadre interne....................................................................
46
47
48
49
8. Formulare..................................................................................
8.1. Definirea formularelor.....................................................
8.2. Elementele formularelor..................................................
50
50
52
8.2.1. Cmp de editare (de tip text)......................................

8.2.2. Cmp de tip parol.....................................................
8.2.3. Butoane de tip radio...................................................
8.2.4. Casete de validare (check box)..................................
8.2.5. Cmp de tip fiier.......................................................
8.2.6. Cmpuri ascunse.......................................................
8.2.7. Butoane......................................................................
8.2.8. Liste de selecie..........................................................
8.2.9. Zone de text...............................................................
52
53
54
55
55
56
56
59
63
9. Meta-elemente..........................................................................
64
10. Elemente ale limbajului JavaScript........................................

10.1. Conceptul de eveniment i gestionar de evenimente.....
10.2. Evenimente provocate de mouse...................................
10.3. Evenimente provocate de tastatur................................
10.4. Evenimente legate de formulare.....................................
10.5. Evenimente legate de pagin..........................................
66
69
71
76
77
82
Bibliografie...................................................................................
83
Anexe
Introducere
HTML este un limbaj simplu pentru care nu sunt necesare cunotine
deosebite de programare, cu att mai mult c HTML nu este un limbaj de
programare ci un limbaj de descriere.
Poate ar prea, la prima vedere, c HTML este un limbaj sofisticat,
ns acesta este destul de uor de asimilat. Este suficient cunoaterea
noiunilor de baz ale acestui limbaj pentru a putea crea un web site.
Cunoaterea limbajului HTML garanteaz puterea de a crea site-uri
simple i nsuirea fundamentelor construirii unui site. Pentru crearea siteurilor dinamice i interactive sunt necesare cunotine avansate n multe
alte limbaje de programare i aplicaii.
Lucrarea poate fi util studenilor, elevilor ct i tuturor celor care
doresc s fac cunotin cu acest limbaj.
Lucrarea const din 10 capitole. Primele nou capitole descriu,
inclusiv prin exemple, crearea unui site web utiliznd doar limbajul
HTML.
Ultimul capitol Elemente ale limbajului JavaScript nu v va da
cunotine nct s putei crea coduri JavaScript sofisticate dar este
suficient pentru a crea coduri simple i de a nelege i poate de a redacta
sau modifica coduri Java, dat fiind faptul c exist foarte multe site-uri
web care permit download-area codurilor Java gratis. Astfel cunotinele
acumulate studiind capitolul 10 ar fi suficiente pentru a conforma codurile
Java existente, necesitilor propriului site.
Majoritatea materialului este restrns n Anexe. Acestea fiind utile
pentru verificarea corectitudinii scrierii tag-urilor, atributelor i valorilor
pe care acestea le pot avea.
Pagini i locaii (site-uri) web. World wide web, abreviat www sau,
pur i simplu web, este totalitatea documentelor hipertext legate ntre ele
care pot fi accesate prin reeaua mondial Internet. Mai amnunit despre
hipertext vom vorbi n capitolul urmtor.
Paginile web sunt documentele de baz n www, ele pot conine
diverse informaii n form textual, grafic sau video. Orice pagin web
este unic identificat prin adresa sa denumit URL (Uniform Resource
Locator).
O locaie web (sau un web site) const din mai multe pagini web, ce
rezid la un server web sau la un calculator local, cu legturi att ntre ele
ct i ctre documente de la alte locaii web.
Cerine generale privind crearea paginilor web. Crearea unei
pagini web reuite necesit respectarea att a unor cerine generale, ct i a
unor cerine specifice fiecrei pagini web n parte, n funcie de destinaia
acesteia. La cerine generale putem enumera:
- coninutul i aspectul prezentrii informaiei n pagin trebuie s
trezeasc interesul vizitatorilor;
- titlul paginii trebuie s fie clar, concis i sugestiv;
- trebuie s existe o logic n plasarea informaiei n pagin
deoarece plasarea neordonat a informaiei poate deruta vizitatorul;
- suficient loc liber n pagin pentru facilitatea perceperii
informaiei o pagin suprancrcat va ndeprta utilizatorii;
- folosirea raional a graficii pe lng faptul c grafica face
pagina atractiv, trebuie de inut cont i de faptul c tot aceasta conduce la
creterea dimensiunii paginii care, eventual, conduce la o ncrcare mai
lent a paginii, ceea ce poate ndeprta utilizatorii;
- dimensiuni nu prea mari pentru fiecare pagin ceea ce va
conduce la o ncrcare mai rapid a acestora, spre fericirea utilizatorilor;
- legturile ctre documentele de mari dimensiuni ar fi bine s fie
nsoite de comentarii n privina acestor dimensiuni pentru evitarea
ncrcrii documentelor de mari dimensiuni mai puin utile utilizatorului
respectiv;
- folosirea n pagin a unui set restrns de culori ceea ce va
permite accentuarea ateniei asupra informaiei plasate n pagin;
- se va lua n calcul dimensiunea ecranului la folosirea
denumirilor de prea mari dimensiuni nu va rmne suficient loc pentru
text i atunci se va cere derularea inoportun a paginii;
- se va verifica aspectul paginii n diverse browser-e cum ar fi:
Internet Explorer, Opera, Mozila Firefox deoarece aspectul paginilor
difer de la un browser la altul;
- respectarea drepturilor de autor a informaiei plasate n pagin;
- controlul regulat al legturilor n scopul identificrii celor
nefuncionale;
- alegerea limbii de comunicare n funcie de tematica i orientarea
paginii, etc.
6
Cerinele specifice sunt dictate de destinaia paginii. Un aspect

important este atragerea utilizatorilor ctre locaia web. n acest scop
poate fi plasat informaia despre pagina sau locaia web la mai multe
servere populare i n primul rnd la acelea care sunt vizitate de potenialii
vizitatori. La fel, o soluie ar fi i plasarea informaiei despre locaia web
la serverele de cutare cunoscute cum ar fi: Google, Yahoo, AltaVista, etc.
Structura de navigare a locaiei web indic relaiile de navigare ntre
paginile web ale acesteia. Structura de navigare este de form ierarhic i
conine la nivelul superior pagina de baz i paginile principale.
Pagina de baz este prima pagin n locaia web i este numit, de
regul, default.htm sau index.htm. Paginile principale sunt paginile de
nivel superior, dar fr a include i o pagin de baz.
S examinm structura locaiei web prezentate n exemplul de mai
jos. Aici pagina de baz este Index.htm iar paginile principale sunt Despre
noi i Contacte.
Fiecare pagin poate avea ataate pagini cu un nivel ierarhic mai jos,
care sunt numite pagini-copil (pagini de nivel copil), primele numindu-se
pagini printe. n exemplul analizat pentru pagina printe Proiecte paginicopil sunt Proiect 1, Proiect 2,..., Proiect n.
Index.ht
m
Despre
noi
Contacte
Personal
Servicii
oferite
Serviciul 1
Serviciul 2
Proiecte
Serviciul N
Proiect 1
Proiect 2
Proiect n
Figura 1. O structur de locaie web

Pagini de nivel printe pentru o pagin dat sunt: pagina printe a
paginii n cauz i, de asemenea, paginile conectate direct cu paginaprinte la acelai nivel.
Pagini de acelai nivel se numesc paginile, care sunt la acelai nivel
n structur i au aceiai pagin-printe. n exemplul de mai sus pagini de
acelai nivel sunt: Servicii oferite, Proiecte sau Serviciul 1, Serviciul
2,...,Serviciul N.
7
Structura de navigare este folosit la stabilirea legturilor ntre

paginile web. O structur reuit poate spori eficiena folosirii resurselor
locaiei web.
Etapele crerii locaiilor web. Crearea i asigurarea funcionrii
unei locaii web include, n general, urmtoarele etape:
1. concretizarea destinaiei i formularea cerinelor ctre locaia web;
2. elaborarea structurii site-ului;
3. elaborarea paginilor web;
4. integrarea paginilor n cadrul site-ului prin stabilirea legturilor;
5. testarea i definitivarea site-ului;
6. publicarea web site-ului n www;
7. administrarea web site-ului.
n cazuri particulare pot fi i alte etape, n general la crearea unor
site-uri complexe, cnd este foarte important alegerea instrumentelor
pentru crearea locaiei, a echipamentelor pentru instalare, etc.
La rndul su, elaborarea paginilor web prevede urmtoarele etape:
1. elaborarea sau selectarea interfeelor pentru grupuri de pagini sau
pagini aparte;
2. adugarea informaiei n pagin;
3. stabilirea legturilor;
4. testarea i definitivarea paginii;
5. publicarea paginii n cadrul site-ului;
6. administrarea paginii.
Limbajul HTML. Prezentare general. HTML este prescurtarea de
la HyperText Markup Language i reprezint un limbaj pentru crearea
unui document astfel nct s poat fi publicat pe World Wide Web i
vizualizat cu ajutorul unui browser (Internet Explorer, Netscape
Navigator, Mozila Firefox, Opera, etc.).
Hypertext-ul trebuie interpretat ca un text care semnaleaz o legtur
la o alt informaie web, de obicei un alt document web, i este identificat
prin subliniere sau culoare, pentru a-l deosebi de textul simplu.
HTML nu este un limbaj de programare i asta din cauza c n HTML
lipsete atributul principal propriu oricrui limbaj de programare i anume
comenzile. n HTML nu poate fi creat o succesiune de aciuni, ci doar
poate fi descris modul n care browserul trebuie s afieze la ecran
documentul respectiv.
8
Astfel HTML este doar un limbaj de descriere, coninnd elemente ce

permit construirea paginilor web.
Documentele HTML sunt exclusiv de tip text (ASCII) prin urmare
pot fi create cu orice editor de texte. Au fost ns dezvoltate editoare
specializate care permit editarea ntr-un fel de WYSIWYG - Wat You See
Is Wat You Get.
Editoarele specializate HTML (ex. MS FrontPage sau Macromedia
DreamWeaver) permit crearea documentelor web ntr-un mod rapid i
uor, i, prin urmare, foarte eficient, doar prin apsarea ctorva butoane
sau prin apelarea ctorva funcii predefinite. Acest tip de editoare
reprezint unelte excelente pentru dezvoltatorii web cu experien.
n general aceste editoare pot fi folosite i de utilizatori care nu
cunosc limbajul HTML, cu toate c ele atribuie coduri n exces
documentului i de obicei se intervine manual la redactarea lor. Un alt
neajuns ar fi faptul c n majoritatea cazurilor documentul este prezentat
de browser nu ntocmai aa cum este prezentat n editor i atunci iari
este necesar de a interveni pentru efectuarea modificrilor respective.
Astfel chiar i n cazul folosirii unui editor specializat cunoaterea
limbajului HTML este oportun.
HTML utilizeaz pentru descrierea documentelor web tag-uri,
numite i etichete, specifice pentru fiecare element descris. Tag-urile
stabilesc att structura documentului, ct i aspectul acestuia. Un tag este
un identificator care furnizeaz browser-ului instruciuni de formatare a
documentului. Petru a fi delimitate, tag-urile HTML sunt ncadrate ntre
paranteze unghiulare (< >).
Tag-urile se divizeaz n:
tag-uri pare sau tag-uri pereche care impun dup sine existena
unui tag de nchidere;
tag-uri impare sau singulare care nu necesit nchidere.
1. Noiuni eseniale
1.1. Structura unui document HTML
Orice pagin web (document HTML) are n structur trei elemente
obligatorii: un element numit HTML, care cuprinde ntregul document, i
dou sub-elemente ale acestuia: HEAD (antet, cap) i BODY (corp).
9
Tag-ul <html> este primul tag care trebuie s apar ntr-un fiier
HTML. El ncadreaz alturi de tag-ul su corespunztor de nchidere
</html> ntreaga pagin web.
Tag-ul <head> marcheaz partea de antet a documentului. Este un
tag par cu tag-ul de nchidere </head>.
Tag-ul par <body> ncadreaz coninutul paginii web.
n antet este recomandat s se precizeze titlul documentului, care va fi
afiat n bara de titlu a browser-ului. Pentru a preciza titlul documentului,
care nu poate depi 64 de caractere, se utilizeaz n seciunea antet tagurile pereche <title> i </title>, ntre care se scrie titlul documentului.
Iat un model de structur a unui document HTML:
<html>
<head>
<title >Titlul documentului</title>
</head>
<body>
Continutul documentului
</body>
</html>
1.2. Crearea unui document HTML
Cum a fost menionat anterior documentele HTML pot fi create cu
orice editor de texte sau utiliznd unul din editoatele specializate.
Una din metodele crerii unui document HTML este scrierea codului
acestuia n editorul de texte Notepad. De exemplu codul:
<html>
<head>
<title> pagina web nr. 1</title>
</head>
<body>
Va aflati pe prima pagina
</body>
</html>
10
Dup scrierea codului i salvarea fiierului (de exemplu sub numele

index) se schimb extensia fiierului obinut din .txt n .html. La
deschiderea ultimului se obine urmtorul document:
Astfel pentru a crea un document html este suficient de a scrie codul

acestuia ntr-un editor de texte dup care de a schimba extensia acestuia n
*.html.
11
1.3. Editarea unui document HTML

Pentru efectuarea modificrilor este necesar de a deschide fiierul
HTML ntr-unul din editoarele de texte, de exemplu n Notepad, dup care
de a edita codul surs a documentului (figura 1.1.).
Figura 1.1. Deschiderea documentului HTML pentru editare
Dac documentul este vizualizat cu ajutorul browser-ului Internet

Explorer atunci documentul poate fi editat prin alegerea opiunii View
Source din meniul View. Dup salvarea modificrilor efectuate este
suficient de acionat butonul Refresh din bara cu meniuri din browser
pentru vizualizarea documentului modificat.
12
2. Formatarea documentului
Unele i aceleai informaii pot fi prezentate ntr-un document n
diferite forme. Definirea caracteristicilor de prezentare a informaiilor n
cadrul documentului i este formatare. Folosirea unei forme reuite de
prezentare a informaiilor este foarte important n special n cazul
paginilor web.
2.1. Formatarea caracterelor
Formatarea caracterelor const n specificarea atributelor individuale
ale acestora, inclusiv: tipul corpului de liter (font-ul), dimensiunea
caracterelor, stilul etc.
Pentru descrierea stilului textului n HTML se folosesc tag-urile
pereche:
<b>...</b> - pentru afiarea textului cu caractere aldine;
<i></i> - pentru afiarea textului cu caractere italice;
<u></u> - pentru afiarea textului cu caractere subliniate.
Exemplu:
<html>
<head>
<title> Formatarea textului</title>
</head>
<body>
<b> Text scris cu carcatere aldine </b><br>
<i> Text scris cu caractere italic-e</i><br>
<u> Text subliniat</u><br>
<br>
<b><i><u>Folosirea tuturor celor trei stiluri
</b></i></u>
</body>
</html>
n codul de mai sus a fost utilizat un tag nou i anume tag-ul singular
<br> folosit pentru a trecerea forat n rnd nou.
Pentru reprezentarea indicilor superiori i inferiori se utilizeaz tagurile pare <sup>...</sup> i respectiv <sub>...</sub>.
13
Exemplu:
...
Km<sup>2</sup> <br>
H<sub>2</sub>O
...
Rezultatul va fi urmtorul:
n scopul formatrii caracterelor poate fi utilizat tag-ul par <font>
care va stabili urmtoarele caracteristici ale caracterelor:
culoare - stabilit prin atributul color al tagului <font>;
tipul sau stilul - stabilit prin atributul face;
dimensiunea - definit prin atributul size;
grosimea - definit prin atributul weight.
Exemple:
<font color="red">Aceasta linie este rosie.</font>
<font face="monospace">Linie scrisa cu caractere
monospatiate.</font>
14
<font face="arial">Linie scrisa cu caractere

arial.</font>
<font size="5">Fonturi de marime 5.</font> <br>
<basefont size="4">Fonturi de marime 4.</font>
<br>
<font size="-3">Fonturi de marime 1.</font> <br>
<font size="+2">Fonturi de marime 6.</font> <br>
<font weight="100">Fonturi de grosime 100.</font>
O culoare poate fi precizat n dou moduri:
1. printr-un nume de culoare,
2. printr-o constant conform standardului de culoare RGB (Red,
Green, Blue). O astfel de constant este format din 6 cifre hexazecimale
precedate de semnul #. Primele dou cifre din cele ase reprezint
valoarea lui R, urmtoarele dou valoarea lui G i ultimele dou
valoarea lui B.
Exemplu:
<font color=#FF0000> textul are culoarea
rosie</font>
Este posibil ca browser-ul s nu poat afia anumite culori specificate
prin valoare RGB, n acest caz, va ncerca s genereze o culoare apropiat
sau un fond texturat format din dou culori apropiate celei specificate; se
poate ajunge astfel la un fond care poate face textul ilizibil.
Pentru a evita aceast situaie, este bine de a folosi aa numitele
culori sigure Internet, care sunt afiate la fel pe orice sistem. Aceste
culori se obin prin atribuirea lui R, G i B uneia din valorile: 00, 33, 66,
99, CC sau FF.
Pentru stabilirea mrimii caracterelor poate fi utilizat atributul size
care poate lua urmtoarele valori:
1,2,...,7 1 pentru cel mai mic font i 7 pentru cel mai mare;
+1,+2, etc. pentru a mri dimensiunea fontului cu 1, 2, etc.
respectiv fa de valoarea curent;
15
-1,-2, etc. pentru a micora dimensiunea fontului cu 1, 2, etc.

respectiv fa de valoarea curent.
Ce ine de grosimea unui caracter, aceasta poate fi stabilit prin
intermediul atributului weight, care poate lua urmtoarele valori: 100,
200, ..., 900 respectiv 100 pentru fontul cel mai subire i 900 pentru cel
mai gros.
Perechea de tag-uri <center>...</center> este folosit pentru
centrarea obiectelor n pagin. Cu ajutorul acestora pot fi centrate att
textul ct i tabelele, i imaginile.
Pentru specificarea paragrafelor poate fi folosit tag-ul par <p>.
Definirea paragrafelor prin acest tag va impune afiarea acestuia din rnd
nou. Atributele acestui tag sunt:
align care permite alinierea textului n dependen de valoarea
atribuit left (aliniere la stnga), right (la dreapta) i center (la centru).
Exemplu:
<p align= " center " > acest text va fi aliniat
la centru </p>
Class, type, style atribute utilizate pentru specificarea unui
anumit stil de text.
n cazul n care tag-ul <p> este folosit fr atribute el nu necesit a fi
nchis i are acelai efect ca i tag-ul <br>.
Modalitatea cea mai eficient de delimitare i de formatare a unui
bloc de text este folosirea perechii de tag-uri <div>...</div>. Acest tag are
atributul align cu aceeai destinaie ca i n cazul tag-ului precedent.
Implicit alinierea este la stnga.
Exemplu:
<html>
<head>
<title> Blocul <div></title>
</head>
<body>
<div align="right">
Bloc aliniat la dreapta. <br>
</div>
16
<div align="center">
Bloc aliniat pe centru.<br>
</div>
</body>
</html>
Pereche de tag-uri <pre>...</pre> este folosit pentru a defini blocuri

de texte preformatate.
ntr-un bloc <pre>...</pre>, semnificaia marcajelor HTML se
pastreaz.
Folosirea perechii de tag-uri <pre>...</pre> este indicat pentru a
nsera rnduri vide (spaiu ntre rndurile succesive). Caracterul "spaiu"
poate fi luat n considerare de browser dac este inserat explicit prin
.
17
Exemplu:
ntr-o pagina Web pot fi inserate linii orizontale. Acestea sunt

definite de tag-ul impar <hr>. Pentru a configura o linie orizontal se
utilizeaz urmatorele atribute ale tag-ului <hr>:
align - permite alinierea liniei orizontale. Valorile posibile sunt:
left center, i right;
width - permite alegerea lungimii liniei poate primi valori n
pixeli i n procente;
size - permite alegerea grosimii liniei poate lua valori n pixeli i
n procente;
noshade - cnd este prezent definete o linie fr umbr;
color - permite definirea culorii liniei.
Exemplu:
<html>
<head>
<title> Linii orizontale</title>
</head>
<body>
<h1 align="center"> Tipuri de linii orizontale
</h1>
O linie implicita alinierea stanga, latime 100%,
grosime 2 cu umbra.
18
<hr>
Urmeaza o linie aliniata in centru, de latime
50%, grosime 5 pixeli, fara umbra.
<hr align="center" width="50%" size="5" noshade>
Urmeaza o linie aliniata la dreapta, de latime 150
de pixeli, grosime 12 pixeli, de culoare rosie.
<hr align="right" width=150 size=12 color="red">
</body>
</html>
2.2. Caractere speciale

Caracterele speciale i simbolurile care nu se gsesc, n mod obinuit,
pe tastatur, pot fi inserate n text prin secvene de cod speciale. Aceste
caractere se regsesc ntr-un set internaional de caractere cunoscut i sub
denumirea de ISOLatin-1 (ISO-8859-1).
Caracterele speciale sunt recunoscute de limbajul HTML datorit
faptului c ncep cu semnul & (ampersand) i se ncheie cu semnul ;
(punct i virgul).
Cele mai uzuale astfel de caractere au fost cuprinse sunt incluse n
tabelul 1.1.
19
Tabelul 1.1.
Codurile pentru caracterele speciale
Caracterul special
Simbolizare
Reprezentare (codul)
ampersand
&
&
asterisk
*
&lowast;
copyright
©
Fraction one qtr

¼
1
Fraction one half

Greater-than sign
Less-than sign
Non-breaking space
Quatation mark
Registration mark
Trademark sign
½
>
<
>
<

"
®
™
2.3. Atributele tag-ului <body>

Cum a fost menionat <body> definete nceputul i sfritul corpului
documentului HTML. Acesta poate avea unul din atributele:
bgcolor care specific culoarea fondalului paginii. Ca valoare
acest atribut poate primi numele sau valoarea RGB ale culorii.
Background utilizat pentru aplicarea unei imagini ca fundal
al paginii. Ca valoare acesta primete URL- ul (adresa i numele) imaginii
respective.
Text specific culoarea textului. Primete ca valoare numele
culorii sau valoarea RGB a acesteia.
Link specifc culoarea legturilor nevizitate din pagin. Ca
valoare primete numele sau valoarea RGB ale culorii.
Vlink specific culoarea legturilor vizitate din pagin. Ca
valoare primete numele sau valoarea RGB ale culorii.
Alink culoarea legturilor n timpul click ului. Valoarea
acestuia este numele sau valoarea RGB ale culorii.
Leftmargin folosit la indentarea ntregului material din
pagin fa de marginea din stnga. Valoarea este dat n pixeli.
20
Rightmargin folosit la indentarea ntregului material din

pagin fa de marginea din dreapta. Valoarea este dat n pixeli.
Topmargin folosit pentru a deplasa ntregul material din
pagin fa de marginea de sus. Valoarea este dat n pixeli.
Bgproperties dac este prezent, la derularea paginii, fondalul
paginii rmne fix, primete doar valoarea "fixed".
3. Liste
3.1. Liste neordonate.
Pentru definirea listelor neordonate se folosete tag-ul par <ul >.
Astfel textul amplasat ntre <ul > i </ul > se consider list neordonat,
fiecare element nou al listei este iniiat de tag-ul impar <li > (list item).
Exemplu:
...
<ul > <li> Ion
<li> Petru
<li> Mihai
</ul>
...
Tag-urile <ul> i <li> pot avea atributul type care stabilete

caracterul afiat n faa fiecrui element al listei. Valorile posibile ale
acestui atribut sunt:
o "circle" (cerc)
"disc" (disc plin) (valoarea prestabilita);
"square" (patrat)
21
Exemplu:
<ul type=circle>
<li> Ion
<li type=square> Petru
<li> Mihai
</ul>
3.2. Liste ordonate

O lista ordonat de elemente este un bloc de text delimitat de tag-urile
<ol>...</ol> (ordered list). Fiecare element al listei este iniiat de eticheta
<li>. Lista va fi indentat fa de restul paginii Web i fiecare element al
listei incepe din rnd nou.
Tag-urile <ol> i <li> pot avea atributul type care stabilete tipul de
caractere utilizate pentru ordonarea listei.Valorile posibile sunt:
" A " pentru ordonare de tipul A , B , C , D etc. (litere mari);
" a " pentru ordonare de tipul a , b , c , d etc. (litere mici);
" I " pentru ordonare de tipul I , II , III , IV etc. (cifre romane
mari);
" i " pentru ordonare de tipul i , ii , iii , iv etc. (cifre romane mici);
" 1 " pentru ordonare de tipul 1 , 2 , 3 , 4 etc. (cifre arabe - optiune
prestabilita);
Exemplu:
...
<ol type="I">Culori uzuale disponibile prin nume
<li>Black
<li>White
<li>Red
</ol>
...
Tag-ul <ol> poate avea i atributul start care stabilete valoarea
iniiala a secvenei de ordonare. Valoarea acestui atribut trebuie s fie un
numr ntreg pozitiv.
22
Exemplu:
...
<ol
type="A"
disponibile prin nume
<li>Red
<li>Green
<li>Blue
</ol>
...
start="3">Culori
23
uzuale
Atribut value al tag-ului <li> stabilete valoare pentru elementul

respectiv al listei. Valoarea acestui atribut trebuie s fie un numr ntreg
pozitiv.
Exemplu:
...
<ol
start="3">Repetati
urmatorii
pasi
algoritmului
<li>salvati fisierul;
<li value="6">incarcati fisierul in browser;
<li>schimbati browserul utilizat
<li>incarcati din nou fisierul </ol>
...
ai
Listele ordonate pot fi imbricate ntre ele sau cu liste neordonate.

3.3. Liste de definiii
Pentru definirea listelor de definiii se folosesc: tag-ul par <dl > i
tag-urile singulare <dt > i <dd >.
24
Exemplu:
<html>
<head>
<title>liste</title>
</head><body>
<dl>Program
<dt><b>Luni</b>
<dt><b>Marti</b>
<dt><b>Miercuri</b>
<dd><i>Ora 9.00.</i> Insciere
<dd><i>Ora 11.00.</i> Audieri
<dd><i>Ora 13.30.</i> Raspunsuri </dl>
</body>
</html>
25
4. Referine
Lagturile (link-urile) reprezint partea cea mai important a unei
pagini Web. Ele transform un text obinuit n hipertext sau
hiperlegtur, care premite trecerea rapid de la o informaie aflat pe un
anumit server la alt informaie memorat pe un alt server aflat oriunde n
lume.
Legturile sunt zone active ntr-o pagina Web, adic zone de pe ecran
sensibile la apsarea butonului stng al mouse-ului.
Atunci cnd se ncrc pagina principal a unui site, n general nu se
tasteaz i numele unui fiier; serverul trimite un fiier predefinit; de
obicei numele lui este index.html (ori default.html sau welcome.html; cel
mai sigur este s se consulte administratorul serverului pe care va fi plasat
ulterior site-ul pentru a decide cum trebuie denumit fiierul paginii
principale).
S presupunem c n directorul MySite din computerul personal,
exist un site sau c la adresa www.nume_server.com/nume_director/
este un site cu organizarea conform figurii 4.1.:
Figura 4.1. Exeplu de organizare a unui site

26
Printr-o legatur plasat ntr-un fiier poate fi accesat un alt fiier,

prin intermediul referinelor (link-urilor).
O referin se formeaz cu ajutorul tag-ului <a> care necesit tag-ul
de nchidere </a>. Pentru a preciza pagina indicat de legtur se
utilizeaz atributul href=url al tag-ului <a>. ntre ghilimele nu se las
spaii libere, dac este necesar introducerea unei legturi spre fiiere ale
cror nume conin spaii, acestea trebuiesc nlocuite cu %20.
Exemple:
<a href=pag_2>Pagina 2</a> - referin ctre o pagin aflat
n acelai director cu pagina de pe care se face click;
<a href=http://www.microsoft.com>microsoft</a> legtur ctre site-ul www.microsoft.com.
Un alt atribut important al tag-ului <a> este reprezentat de target,
care specific locul n care se va deschide URL-ul. Valorile pe care le
poate lua acest atribut sunt:
_blank URL-ul int se va deschide ntr-o nou fereastr (este
implicit, deci poate fi i nespecificat);
_top URL-ul int se va deschide n fereastra curent;
_self URL-ul int se va deschide n acelai cadru din care s-a dat
click;
_parent URL-ul int se va deschide n cadrul printe.
Referinele pot fi: interne (spre o ancor din acelai fiier) sau externe
(spre un alt fiier); n funcie de modul cum este specificat calea spre alt
fiier pot fi absolute sau relative:
absolute:
- legtura <a href="http://www.alte_servere.com/
alt_site/nume_fisier.html">, plasat n orice fiier din site-ul
din exemplul anterior, indic o legatur extern.
- legtura <a href = "http://www.nume_server.com/
nume_director/A/A1/a12.htm">, plasat n fiierul
index.html, indic o legatur spre fiierul a12.htm din site-ul nostru.
relative:
27
- legtura <a href = "../../index.html">, plasat n orice

fiier din directorul A1 sau A2, indic o legtura spre fiierul
index.html din site-ul nostru.
- legtura <a href = "../A/a.htm">, plasat n fiierul
b.htm din directorul B, indic o legtur spre fiierul a.htm din
directorul A.
- legtura <a href = "A/A1/a12.htm">, plasat n fiierul
index.html, indic o legtur spre fiierul a12.htm din site-ul nostru.
Referinele relative au cteva avantaje:
- codul surs este mai scurt: nu este necesar de a tasta
http://www.nume_server.com/nume_director pentru fiecare
legtur n parte;
- legturile vor funciona i n timpul construirii site-ului ntr-un
director pe hard disk;
- dac se va dori mutarea site-ului pe un alt server, nu sunt necesare
modificri; n cazul legturilor absolute, pentru fiecare ar trebui de
nlocuit http://www.nume_server.com cu http://www.
nume_nou_server.com.
n cazul unui site de dimensiuni mici, care conine doar cteva pagini
(fiiere), nu este nevoie de o organizare mai complicat a site-ului (cu
multe directoare); toate fiierele pot fi plasate n acelai director (pe hard
disk sau la adresa www.nume_server.com/nume_director/); o
legatur relativ plasat n orice fiier, care apeleaz orice alt fiier, ar fi
de forma:
<a href="alt_fisier.htm">.
ntr-o pagin foarte lung pot exista puncte de reper ctre care se
definesc legturi. Aceste legturi se numesc ancore.
O ancor se definete, de asemenea, prin tag-ul <a>. Pentru a defini
ancora se utilizeaz atributul name care primete ca valoare numele
ancorei, de exemplu name=top, referina spre aceast ancor se va
scrie:
<a href=#top> top of page</a>
Pentru a introduce o legatur ctre o ancor definit n alt document
(alt pagin) aflat n acelai director, atributul href primete o valoare de
forma nume_fisier.html#nume_ancora.
28
Ancorele pot fi definite i prin atributul id, atribut universal, adic

poate fi ataat oricrui element al unei pagini web. Atributul id primete
ca valoare un nume care identific n mod unic un element (spre exemplu
id_1). Atributul id poate fi utilizat pe post de ancor ntr-o pagin web
conform sintaxei:
<tag id = "id1"> ... </tag >
<a href = "#id1" >Link spre "id1" </a>
unde "tag" poate fi orice element .
ntr-o pagin web pot fi plasate legturi ce permit lansarea n execuie
a aplicaiei de expediere a mesajelor electronice. Pentru a crea o astfel de
legtur atributul href trebuie s ia valoarea mailto:adres_de_email_valid.
Exemplu:
<a href=mailto:eu@yahoo.com> expediaza-mi un
mesaj</a>
Alt atribut al tag-ului <a> este title care comand apariia unei mici
ferestre n pagina web atunci cnd mouse-ul se afl pe un link, fereastr n
care este afiat valoarea atributului respectiv.
Exemplu:
<a href=mailto:eu@yahoo.com title=te rog
:)> expediaza-mi un mesaj</a>
n rezultat vom obine:
O pagin web poate conine referine ctre orice tip de fiier aflat n
computerul propriu sau pe orice server din internet.
Exemple:
<a href="file.zip"> link spre file.zip</a>
<a href="file.au"> link spre fisier de sunet</a>
<a href="file.avi> link spre fisier video</a>
29
5. Imagini
Imaginile sunt stocate n fiiere cu diverse formate. Formatele
acceptate de browsere pentru fiierele imagine sunt:
GIF (Graphics Interchange Format) cu extensia .gif;
JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau
.jpg;
XPM (X PixMap) cu extensia .xmp;
XBM (X BitMap) cu extensia .xbm;
BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);
TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;
Cele mai rspndite formate sunt GIF (8 bii pentru o culoare, 256
culori posibile) i JPEG (24 bii pentru o culoare, 16.777.216 de culori
posibile). n ambele formate este folosit comprimarea intern a imaginii,
ns algoritmul de comprimare este diferit. Fiecare din acestea dou i are
domeniul de aplicabilitate n dependen de particularitile sale.
De regul, imaginile ce conin un numr relativ mic de culori
desene sau grafice sunt salvate n format GIF, iar imaginile unde este
important salvarea ntregii palete de culori, de exemplu fotografiile, sunt
salvate n format JPG. Cnd este necesar plasarea pe pagina web a unei
imagini nedreptunghiulare fonul creia difer de fonul paginii - imaginea
se salveaz n format GIF cu fon transparent, prin aceasta aspectul exterior
al paginii ctig mult.
Pentru a defini o imagine, se utilizeaz tag-ul impar <img> (image);
i pentru a putea fi identificat, se utilizeaz atributul src (source) al tagului respectiv.
Exemplu:
<img src=imagine1.gif>
sau
<img src=C:/my documents/html/imagine2.gif>
n cazul n care browser-ul nu gsete fiierul grafic n loc de imagine
va fi afiat:
.
Pentru a seta dimensiunile imaginilor se folosesc atributele:
height - pentru nlime, i
width - pentru lime.

30
Acestea primesc ca valoare dimensiunea n pixeli a nlimii,

respectiv a limii imaginii.
Valoarea pentru limea imaginii poate fi dat i n procente, atunci
imaginea se va modifica n dependen de limea ferestrei.
n cazul n care se stabilete doar nlimea sau doar limea imaginii
aceasta va fi schimbat proporional.
Exemplu:
<img src=imagine1.gif width="350" height="25%">
La micorarea dimensiunilor imaginii se schimb doar ceea ce se
afieaz la ecran i nu mrimea fiierului grafic care necesit a fi ncrcat
n reea. Dac se dorete ca viteza de ncrcare s fie proporional cu
calitatea imaginii recepionate, atunci imaginea trebuie micorat ntr-un
redactor grafic, de exemplu n Photoshop.
n cazul n care browserul nu gsete imaginea, dar pentru imagine au
fost setate nlimea i limea, el va afia un dreptunghi de dimensiunile
respective figura 4.2.
Figura 4.2. Imagine de lime 200 pixeli i nlime 250,

care nu a fost gsit de browser
31
Atributul alt al tag-ului <img> comand apariia unei mici ferestre n

pagina web atunci cnd mouse-ul se afl pe imaginea respectiv, fereastr
n care este afiat valoarea atributului respectiv.
Exemplu:
<img src=img.jpg alt="zambiti va rog!">
Iar atunci cnd browser-ul nu gsete fiierul va fi afiat:
Pentru a seta spaiu n jurul imaginii pot fi folosite atributele:
hspace spaiu pe orizontal;
vspace spaiu pe vertical.

Ambele atribute i-au valori n pixeli.
32
Alinierea unei imagini se face prin intermediul atributului align care

poate lua urmtoarele valori:
left - aliniere la stnga; celelalte componente sunt aliniate n
partea dreapt;
right - aliniere la dreapta; celelalte componente sunt aliniate n
partea stng;
texttop - aliniere deasupra; partea de sus a imaginii se aliniaz cu
partea de sus a textului ce precede imaginea;
middle sau absmiddle - aliniere la mijloc; mijlocul imaginii se
aliniaz cu linia de baz a textului ce precede imaginea;
bottom sau baseline- aliniere la baz; partea de jos a imaginii se
aliniaz cu linia de baz a textului;
absbottom alinierea dup partea de jos a literelor ce ies din
linie;
texttop aliniarea deasupra; partea de sus a imaginii se aliniaz
cu partea de sus a elementelor ce preced imaginea.
Pentru a delimita textul de imagine, ultimei i se poate crea o bordur.
Dac se vrea o bordur simpl neagr atunci aceasta poate fi creat cu
ajutorul atributului border. Valoarea acestui atribut este dat n pixeli i
stabilete grosimea bordurii.
Exemplu:
<img
src=img.jpg
border=10>
5.1. Imagini de tip client-side image map (hri de imagini)

Hrile de imagini sunt imagini care sunt mprite n mai multe
zone, n funcie de zona pe care se execut click, browser-ul afieaz o alt
pagin.
De exemplu, pe un site dedicat turismului n Republica Moldova pe
pagina principal ar putea fi plasat harta RM (n care sunt definite zonele
dup conturul raioanelor); n cazul n care se execut un click n zona
raionului Orhei se va ncrca o pagin care descrie toate punctele turistice
ale acestui raion, sau care poate conine o imagine detaliat a raionului cu
33
definirea zonelor dup conturul localitilor, iar un click pe localitate ar

duce la alt pagin care descrie obiectivele turistice din localitate.
O hart de imagini ar putea fi folosit i pentru navigarea n cadrul
unui site. Dac exist mai multe butoane de navigare grupate se poate
folosi o imagine care reprezint toate butoanele. Avantajul este evident
mai multe imagini se ncarc mai ncet dect o imagine cu dimensiunea n
kb egal cu suma celorlalte deoarece adresarea ctre server (cnd se cere
imaginea) se face o singur dat.
Ar prea c pentru un site cu un design special hrile sunt o soluie
ideal, ns exist i un dezavantaj major. Un vizitator care are browser-ul
setat s nu ncarce imagini pentru a naviga mai repede nu va nelege
aproape nimic din pagina respectiv. Se poate totui folosi atributul alt de
specificare a textului alternativ pentru imagini, dar aceasta va tirbi din
aspectul site-ului i un vizitator pretenios nu va mai ncrca aceast
pagin a doua oar.
Imaginea care urmeaz a fi folosit ca imagine-hart este creat prin
folosirea atributului usemap al tag-ului <img> i este definit prin
elementele speciale marcate de tag-urile <map> i <area>. Ultimele se
folosesc doar mpreun, tag-ul impar <area> fiind totdeauna inclus n tagul par <map>.
Tag-ul <map> definete o imagine ca fiind de tip hart, iar tag-ul
<area> specific coordonatele zonelor imaginii-hart, precum link-urile
corespunztoare fiecrei zone.
Atributele tag-ului <map>
Atributul id atribuie o denumire imaginii-hart, denumire identic
valorii atributului usemap al tag-ului <map> i ca valoare primete
numele acesteia.
Name, alt atribut al tag-ului <map>, este identic cu id i se folosete
doar pentru a asigura compatibilitatea cu anumite browser-e. Ca valoare,
de asemenea, are numele imaginii-hart.
Atributele tag-ului <area>
Pentru a specifica o descriere alternativ a zonei active se utilizeaz
atributul alt. Valoarea acestuia este textul de descriere respectiv. n cazul
n care browser-ul nu poate gsi imaginea-hart, sau este setat s nu
ncarce imagini, atunci n locul acesteia va fi afiat valoarea atributului
34
alt. Iar, n cazul n care imaginea este prezent, la poziionarea cursorului

pe aceasta, se va deschide o caset n care va fi nscris valoarea
atributului respectiv.
Atributul shape definete tipul de zon n imaginea-hart. Valorile
posibile ale acestui atribut sunt:
rect sau rectangle pentru definirea unei zone n form de
dreptungi;
circ sau circle pentru definirea unei zone n form de cerc;
poly sau polygon pentru definirea unei zone n form de poligon
oarecare.
Dup definirea tipului de zon, cu ajutorul atributului coords se
stabilesc coordonatele acesteia n pixeli. Coordonatele se calculeaz n
funcie de colul din stnga sus al imaginii (care are coordonatele (0,0)
adic x=0 i y=0).
Pentru o zon de tip rectangle (dreptunghi) se dau coordonatele
colurilor din stnga sus i dreapta jos a acesteia: (x 1,y1,x2,y2). Pentru zona
de tip circle (cerc) se dau coordonatele centrului cercului i razei: (x,y,r).
Iar pentru ultimul tip de zon polygon se dau coordonatele vrfurilor
poligonului (coordonatele x i y pentru fiecare vrf n parte):
(x1,y1,x2,y2,...,xn,yn).
Specificarea URL-ului int al zonei se face prin folosirea atributului
href. Respectiv valoarea acestui atribut este url-ul fiierului care urmeaz
a fi deschis la efectuarea unui click pe zona respectiv.
Cu ajutorul atributului nohref se exclude o zon din hart. Acesta
poate avea dou valori: true i false.
Atributul target al tag-ului <area> specific locul n care se va
deschide url-ul. Acesta poate lua urmtorile valori:
_blank URL-ul int se va deschide ntr-o nou fereastr (este
implicit, deci poate fi nespecificat);
_top URL-ul int se va deschide n fereastra curent;
_self URL-ul int se va deschide n acelai cadru din care s-a dat
click;
_parent URL-ul int se va deschide n cadrul printe.
35
Exemplu:
<html>
<head>
<title> Harti de imagini - exemplu: map, usemap,
area shape </title>
</head>
<body bgcolor=white>
<h2 align=center> Harti de imagini - exemplu
</h2>
<center>
<img src="imagine.jpg" usemap="#map1" border=0
width=200 height=200 alt="contine 3 zone">
</center>
<map name="map1">
36
<area shape="rect" coords="0,0,200,100"

href="http://www.yahoo.com" alt="dreptunghi
(yahoo.com)">
<area shape="circle" coords="50,150,25"
href="http://www.google.com" alt="cerc
(google.com)">
<area shape="poly" href="http://www.mail.md "
coords="150,110,190,190,110,190" alt="poligontriunghi
(mail.md)">
</body>
</html>
n exemplul precedent coordonatele respective ale zonelor imaginiihart au fost calculate aa cum este prezentat n figura 5.1.
Coordonatele vrfului
din stnga sus a zonei
dreptunghiulare (0,0)
200
Coordonatele
vrfului din stnga
sus a zonei
dreptunghiulare
(200,100)
200
Coordonate
le vrfului
poligonului
(150,110)
Raza zonei
circulare 25
Coordonatele centrului
zonei circulare (50,150)
Coordonate
le vrfului
poligonului
(110,190)
Coordonate
le vrfului
poligonului
(190,190)
Figura 5.1. Calcularea coordonatelor zonelor n imaginea hart

37
6. Tabele
Majoritatea site-urilor conin tabele i acestea sunt folosite nu doar
pentru repezentarea informaiei n form tabelar ci i pentru a face
design-ul paginii mult mai atractiv, evident liniile tabelelor, n ultimul caz,
sunt ascunse.
Structura html de descriere a tabelelor conine trei tag-uri principale:
tag-ul par <table> - n interiorul cruia este inclus ntregul tabel.
Acest tag descrie parametrii ntregului tabel.
Tag-ul par <tr> (ce vine de la table row rnd al tabelului) n
interiorul cruia sunt incluse rndurile tabelului. Fiecare astfel de tag
descrie parametrii rndului respectiv.
Tag-ul par <td> (ce vine de la table data date ale tabelului, sau
coninutul tabelului) n interiorul cruia sunt incluse coninutul celulelor.
Fiecare astfel de tag descrie parametrii pentru o celul aparte.
Exemplu:
<html>
<head>
<title>tabelex_1</title></head>
<body>
<h1 align=center>Un tabel simplu
format din 4 linii si 2 coloane
</h1>
<hr>
<table>
<tr><td>cell 11</td>
<td>cell 11</td></tr>
</table>
</body>
</html>
38
6.1. Atributele tagului <table>

n mod prestabilit, un tabel nu are bordur. Pentru a aduga o bordur
unui tabel se utilizeaz atributul border al tag-ului <table>. Acest atribut
poate primi ca valoare orice numr ntreg, inclusiv 0, i reprezint
grosimea n pixeli a chenarului tabelului.
Valoarea 0 pentru border semnific absena chenarului. Dac
atributul border nu este urmat de o valoare atunci tabelul va avea o
grosime prestabilit egal cu 1 pixel. Cnd atributul border are o valoare
nenul bordura tabelului are un aspect tridimensional.
Exemplu:
<html>
<head>
<title>tabelex_2</title></head>
<body><h1 align=center>Un tabel
simplu cu bordur</h1><hr>
<table border="4">
<tr> <td>cell 11</td>
</table>
</body>
</html>
Cu ajutorul atributului bordercolor bordura tabelului poate primi o
culoare diferit de cea prestabilit. Ca valoare acest atribut poate lua
numele culorii sau valoarea RGB a acesteia.
Pentru stabilirea culorii fondaluluii tabelului se folosete atributul
bgcolor care primete ca valoare numele culorii sau valoarea RGB a ei. n
cazul n care ca fondal trebuie folosit o imagine se folosete atributul
background care primete ca valoare url-ul imaginii respective.
Tabelul poate fi alineat n pagin cu ajutorul atributului align, care
poate lua valorile:
39
left aliniere la stnga; celelalte componente sunt aliniate n

partea dreapt;
right aliniere la dreapta; celelalte componente sunt aliniate n
partea stang;
center alinierea la centru.
Distana dintre dou celule vecine se definete cu ajutorul atributului

cellspacing. Valorile acestui atribut pot fi numere ntregi pozitive,
inclusiv 0, i reprezint distana n pixeli dintre dou celule vecine.
Valoarea prestabilit a atributului cellspacing este 2.
Distana dintre marginea unei celule i coninutul ei poate fi definit
cu ajutorul atributului cellpadding. Valorile acestui atribut pot fi numere
ntregi pozitive i reprezint distana n pixeli dintre celul i coninutul ei.
Valoarea prestabilit a acestui atribut este 1.
Dimensiunile unui tabel pot fi stabilite exact prin intermediul a dou
atribute:
width pentru limea tabelului i
Height pentru nlimea acestuia.

40
Valorile acestor atribute pot fi:
numere ntregi pozitive reprezentnd limea, respectiv nlimea

n pixeli a tabelului;
numere ntregi ntre 1 i 100, urmate de semnul %, reprezentnd

fraciunea din limea i nlimea total a paginii.
Atributul frame al tag-ului <table> specific care pri ale bordurii
tabelului sunt vizibile (are efect numai cnd atributul border > 0).
Valorile posibile ale acestui atribut sunt urmtoarele:
void - elimin toate muchiile exterioare ale tabelului;
above - afieaz o muchie n partea superioara a cadrului

tabelului;
below - afiseaz o muchie n partea inferioar a cadrului

tabelului;
hsides - afieaz cte o muchie n partea superioar i inferioar

a cadrului tabelului;
lhs - afieaz o muchie n partea din stnga a cadrului tabelului;
rhs - afiseaz o muchie n partea din dreapta a cadrului tabelului;
vsides - afieaz o muchie n partea din stnga i din dreapta a

cadrului tabelului;
box - afieaz o muchie pe toate laturile cadrului tabelului;
border - afieaz o muchie pe toate laturile cadrului tabelului.

Atributul rules permite alegerea unor delimitatori pentru celulele
unui tabel. Valorile posibile pe care acesta le poate lua sunt:
none - elimin toate muchiile interioare ale tabelului;
rows - afieaz muchii orizontale ntre toate liniile tabelului;
cols - afieaz muchii verticale ntre toate coloanele tabelului;
all - afieaz muchii ntre toate liniile i coloanele tabelului.

Exemplu:
<html>
<head><title>tabelex</title></head>
<body><h1 align=center>Atributele frames si
rules</h1>
<table width="400" frame=box rules=rows
cellspacing=10>
<tr> <td>cell 11</td> <td>cell 12</td><td>cell
13</td></tr>
41
<tr> <td>cell 21</td> <td>cell 22</td><td>cell

23</td></tr>
</table>
</body>
</html>
Exist posibilitatea de a ataa un titlu unui tabel. Aceasta se poate

efectua cu ajutorul tag-ului <caption>, care trebuie plasat n interiorul
tag-urilor <table> i </table> dar nu n interiorul etichetelor <tr> i <td>
i nchiderii acestora. Titlul tabelului poate fi alineat cu ajutorul
atributului align al tag-ului respectiv care poate lua una dintre valori:
bottom sub tabel;
top deasupra tabelului;
left la stnga tabelului;
right la dreapta tabelului.

Un tabel poate avea celule cu semnificaia de cap de tabel. Aceste
celule se definesc cu ajutorul tag-ului par <th>. Coninutul celulelor
definite cu ajutorul acestui tag este scris cu caractere aldine i este centrat.
Exemplu:
<html>
<head><title>table</title></head>
<body><h1 align=center>Un tabel cu titlu si cap de
tabel</h1>
42
<table border="0"><caption
align="bottom">Caracteristici
<tr><th>Tara </th>
<th>Suprafaa </th>
<th>Populatia </th>
<th>Densitatea pop. </th>
<th>Capitala </th></tr>
<tr><th>Moldova </th>
<td>33700</td><td>4341000</td><td>129</td><td>Chis
inau</td></tr>
<tr><th>Monaco</th>
<td>1,9</td><td>29000</td><td>15,263</td><td>Monac
o</td></tr>
</table>
</body>
</html>
6.2. Atributele tagului <tr>

Atributul cu ajutorul caruia se stabilete fondalul pentru ntreaga linie
a unui table este bgcolor. Acesta ia ca valoare numele culorii sau valoarea
RGB a acesteia.
Pentru alinierea coninutului celulelor pe ntreaga linie a tabelului se
folosete atributul align, care poate lua valorile: left (stnga), right
(dreapta), center (centru). Implicit textul se aliniaz n partea stng.
43
Un alt atribut al tag-ului <tr> este height care specific nlimea

liniei n pixeli. Atenie ns, n unele browser-e nu funcioneaz.
6.3. Atributele tagului <td>
Atributul height al acestui tag definete nlimea liniei (n pixeli).
Dac din greeal pe aceeai linie se dau dou valori diferite pentru pentru
acest atribut, se va lua maximul pentru toate celulele liniei.
Pentru a defini limea liniei se folosete atributul width, care ia
valori n pixeli.
Bgcolor definete culoarea fondului pentru ntreaga celul. Ca
valoare acest atribut primete numele culorii sau valoarea RGB a acesteia.
Ca fondal pentru celul poate fi definit i o imagine. Aceasta se poate
face cu ajutorul atributului background care primete ca valoare URL-ul
fiierului imagine.
Cu ajutorul atributului align se aliniaz coninutului celulei, dar i
celulele nsi. Valorile posibile ale acestui atribut sunt:
left aliniere la stnga a coninutului celulei;
right aliniere la dreapta a coninutului celulei;
center aliniere la centru a coninutului celulei;
justify alinierea din ambele pri;
baseline alinierea celulelor la linia de baz a textului adiacent;
caracter aliniaz coloana fa de un anumit caracter (implicit
fa de caracterul .).
Dou atribute foarte importante n design-ul unui tabel sunt:
colspan care definete numrul de coloane pe care se ntinde
celula;
rowspan numrul de linii pe care se ntinde celula.
Exemple:
<html>
<head><title>tabel</title></head>
<body>
<table border=2>
<tr>
<td
colspan=2>doua
celule
unite
orizontala</td> </tr>
<tr> <td>cell 21</td> <td>cell 22</td></tr>
</table>
44
pe
</body>
</html>
<html>
<head><title>tabel</title></head>
<body>
<table border=2>
<tr><td
rowspan=2>doua
celule
verticala</td>
<td>cell 12</td> </tr>
<tr> <td>cell 22</td></tr>
</table>
</body>
</html>
45
unite
pe
7. Cadre
Cadrele care mai sunt numite i ferestre sau subferestre permit de a
diviza fereastra browser-ului n mai multe zone dreptunghiulare amplasate
pe vertical (pe rnduri) sau orizontal (coloane), fiecare dintre aceste
zone coninnd un document web diferit. Aceste zone poart denumirea de
cadre sau frame-uri.
Cea mai simpl modalitate de realizare a unui document ce conine
pri statice i pri variabile (care se pot schimba) este folosirea cadrelor.
De exemplu: meniurile, logo-urile, banner-ele, mesajele i orice alt
informaie necesar poate fi nserat n unul sau mai multe cadre care vor
rmne permanent vizibile.
Cu toate avantajele pe care le au cadrele presupun i anumite
inconveniene de care trebuie s se in cont la construirea paginilor web.
n primul rnd dintre acestea putem specifica faptul c la trecerea la un
nou link cu un singur click nu pot fi actualizate n acelai timp cteva
cadre. Un alt neajuns ar fi dificultatea ce apare la salvarea paginilor ce
conin cadre: dac utilizatorul nu a observat c pagina conine cadre exist
probabilitatea ca acesta s salveze doar fiierul ce descrie mprirea
paginii n cadre i nu informaia necesar. Mai trebuie menionat aici i
faptul c motoarele de cutare nu indexeaz corespunztor astfel de
pagini. Utilizatorul ce a ajuns n site redirecionat de motor de cutare
poate nimeri nu n pagina de structur a site-ului ci doar ntr-o parte a
acestuia deschis ntr-o fereastr aparte.
O pagin ce conine cadre reprezint nu altceva dect un document cu
mai multe pagini, fiecare cadru coninnd o pagin web. n afar de
acestea, mai exist un document web care descrie modul n care va fi
mprit pagina n cadre.
Astfel, de exemplu, pentru a crea un document cu dou cadre
verticale este nevoie de trei documente web. n figura 7.1. sunt
reprezentate aceste documente aa cum sunt afiate de browser-e.
n acest exemplu fiierul file.html reprezint documentul care descrie
modul n care fereastra browser-ului va fi divizat n cele dou cadre.
Exist browser-e care nu suport cadre. Pentru aceste cazuri este
prevzut tag-ul par <noframes>. Dac browser-ul suport cadre atunci
acesta va ignora poriunea de cod ntre tag-urile <noframes> i
</noframes>, n caz contrar poriunea respectiv de cod va fi singurul
46
lucru care va fi neles de browser. ntre tag-urile <noframes> i

</noframes> pot fi folosite oricare dintre tag-urile HTML.
Figura 7.1. Exemplu de pagin cu dou cadre verticale

7.1. Definirea cadrelor
Cadrele sunt definite ntr-un fiier special care va defini cadrele i va
descrie modalitatea de mprire a paginii n cadre. n exemplul de mai sus
acest fiier este file.html.
n aceste fiiere blocul <body></body> este nlocuit cu blocul
<frameset>...</frameset>. n interiorul acestui bloc fiecare cadru este
introdus prin tag-ul <frame>.
Atributul principal al tag-ului <frame> este src care primete ca
valoare url-ul fiierului care va fi deschis n cadrul respectiv.
Definirea cadrelor se face prin mprirea ferestrelor n linii i
coloane. Aceasta se poate face prin intermediul atributelor tag-ului
<frameset>:
cols definete numrul i mrimea coloanelor;
rows definete numrul i mrimea rndurilor.
Ca valori, atributele cols i rows, primesc o list de elemente separate
prin virgul, care descriu modul n care se face mprirea. Elementele
listei pot fi:
47
un numr ntreg ce descrie dimensiunea n pixeli;

un procent ce descrie dimensiunea n procente fa de
dimesiunea ferestrei;
un numr precedat de simbolul * (n*) ce semnific n pri
din spaiul rmas disponibil.
Exemple:
<frameset cols=250,1*,25%,2*>
- fereastra va fi
mprit n 4 cadre verticale sau subferestre, dintre care primul are
dimensiunea de 250 pixeli, al treilea ocup o ptrime din spaiul total al
ferestrei, iar al doilea i al patrulea ocup restul spaiului rmas disponibil,
care se mparte n trei pri egale, a doua fereastr va ocupa 1 parte iar a
patra - 2 pri.
<frameset cols=250,*,25%,*>
- fereastra va fi
mprit n 4 cadre verticale: primul cu dimensiunea 250 pixeli, al treilea
va ocupa 25 procente din spaiul total al ferestrei, iar a doilea i al patrulea
vor avea aceleai dimensiuni i vor ocupa spaiul disponibil rmas.
O subfereastr poate fi un cadru n care se va deschide un document
html sau poate fi mprit la rndul su n cadre.
Celelalte atribute ale tag-ului <frameset> in de definirea bordurii
cadrelor. i anume prin atributul frameborder se stabilete prezena sau
lipsa bordurii. Acesta poate avea valoarea yes sau no (sau respectiv 1/0).
Grosimea bordurii este stabilit de atributul framespacing sau
border, n dependen de browser. Acestea primesc ca valori numere ce
reprezint grosimea n pixeli a bordurii. Dac sunt folosite ambele atribute
dar cu valori diferite, pentru unele browser-e prevaleaz valoarea lui
framespacing, iar pentru altele valoarea lui border.
i n sfrit prin intermediul atributului bordercolor se definete
culoarea bordurii. Respectiv valoarea acestui atribut este numele culorii
sau valoarea RGB a acesteia.
7.2. Atributele tag-ului <frame>
Cum a fost menionat mai sus atributul src al acestui tag definete
link-ul ctre fiierul care va fi vizualizat n cadrul respectiv.
48
Atributul name definete numele cadrului care servete pentru

identificarea mai uoar a acestuia. Numele cadrului se definete conform
sintaxei: <frame name="nume_frame">.
Atributul frameborder prezent i n cadrul tag-ului <frameset> are
aceleai scop i anume de a stabili prezena sau absena bordurii. i,
respectiv, are aceleai valori: yes/no sau 1/0.
Prin intermediul atributului scroling poate fi adugat o bar de
derulare cadrului respectiv, care permite navigarea n interiorul
documentului afiat n interiorul cadrului. Acesta poate avea urmtoarele
valori:
yes barele de derulare sunt adugate ntotdeauna;
no barele de derulare nu sunt utilizabile;
auto barele de derulare sunt vizibile doar cnd este necesar.

Dac este prezent atributul noresize (fr nici o valoare) se anuleaz
posibilitatea prestabilit de a redimensiona cadrul cu ajutorul mouse-ului.
Atributele marginheight i marginwidth permit stabilirea distanei
n pixeli dintre coninutul unui cadru i marginile verticale, respectiv
orizontale ale cadrului. Ca valoare, n afar de un numr ce definete
distana respectiv n pixeli, aceste atribute pot primi i un procent, care va
determina procentul din limea, respectiv nlimea cadrului.
Atributul target al tag-ului <frame> specific unde va fi deschis urlul int:
"_self" - ncrcarea noii pagini are loc n cadrul curent;
"_blank" - ncrcarea noii pagini are loc ntr-o fereastr noua;
"_parent" - ncrcarea noii pagini are loc n cadrul printe al

cadrului curent dac acesta exist, altfel are loc n fereastra
browserului curent;
"_top" - ncrcarea noii pagini are loc n fereastra browserului ce

conine cadrul curent);
7.3. Cadre interne
Cadrele interioare sunt cadre care pot fi nserate oriunde n interiorul
unei pagini. Pentru definirea unui astfel de cadru se folosete perechea de
tag-uri <iframe> ... </iframe> (de le eng. inline frame).
Pentru tag-ul <iframe> sunt valabile toate atributele tag-ului
<frame>: src, frameborder, marginheight, marginwidth, scrolling i name.
49
Un cadru intern se insereaz n pagin asemntor cu o imagine.

Chiar mai mult, pentru <iframe> pot fi utilizate o serie de atribute
specifice pentru tag-ul <img> - ce definete imaginile, obinndu-se
aceleai rezultate. Acestea sunt: width, height, align, hspace i vspace.
E de menionat faptul c ntr-o pagin pot fi nserate oricte cadre
interne este necesar.
8. Formulare
Un formular este un ansamblu de zone active alctuit din butoane,
casete de selecie, cmpuri de editare etc.
Formularele asigur construirea unor pagini web care permit
utilizatorilor s introduc efectiv informaii i s le transmit serverului.
Formularele pot varia de la o simpl caset de text, pentru introducerea
unui ir de caractere pe post de cheie de cutare element caracteristic
tuturor motoarelor de cutare pn la o structur complex, cu multiple
seciuni, care ofer faciliti de transmitere a datelor.
Pentru a analiza parametrii introdui n formulare sunt necesare
anumite aplicaii care decid cum va aciona serverul ca rspuns la datele
primite. Codul acesot aplicaii poate fi scris n limbaje de programare web
cum ar fi: ASP, JAVA, PHP, JSP etc.
O sesiune cu o pagin web care conine formular cuprinde
urmtoarele etape:
1. Utilizatorul completeaz formularul i l expediaz unui server.
2. O aplicaie dedicat de pe server analizeaz formularul completat
i dac este necesar stocheaz datele ntr-o baz de date.
3. Dac este necesar serverul expediaz un rspuns utilizatorului.
8.1. Definirea formularului.
Un formular este definit ntr-un bloc delimitat de tag-urile <form> i
</form>.
Exist dou atribute eseniale ale tag-ului <form> i anume:
1. Atributul action care precizeaz ce va fi cu datele formularului
odat ce acestea ajung la destinaie. n general valoarea atributului action
este adresa URL a unui script aflat pe un server www care primete datele
formularului, le prelucreaz i expediaz utilizatorului un rspuns.
50
2. Atributul method precizeaz metoda utilizat de browser pentru

expedierea datelor formularului. Acest atribut poate lua una din valorile:
get (valoarea implicit) datele formularului sunt adugate la
adresa URL precizat de atributul action. n acest caz nu sunt permise
cantiti mari de date (maxim 1kb). Datele sunt adugate conform
sintaxei: nume_camp=valoare_camp. ntre diferite seturi de date se
introduce simbolul &. ntre adresa URL i date este introdus simbolul
?.
Exemplu:
"http://www.yahoo.com/cgibin/nume_fis.cgi?nume1=valoare1&nume2=valoare2"
post datele sunt expediate separat. n acest caz sunt permise
cantiti mari de date (de ordinul MB).
Pentru ca un formular s fie funcional, trebuie precizat ce se va
ntmpla cu el dup completarea i expedierea acestuia.
Cel mai simplu mod de utilizare a unui formular este expedierea
acestuia prin e-mail. Pentru aceasta se folosete atributul action care ea ca
valoare mailto: urmat de o adres valid de e-mail ctre care se vor
expedia datele formularului.
nainte de a expedia datele formularului browser-ul le codific.
Tehnica de codificare depinde de valoarea atributului enctype. Acesta
poate lua ca valoare:
application/x-www-forum-urlencoded aceast valoare este
utilizat doar cu metoda get (parametri prestabilii). n acest caz datele
sunt trimise sub form de list de perechi nume=valoare, separate prin
simbolul &, spaiile albe sunt nlocuite cu simbolul +. Caracterele
non-alfanumerice sunt nlocuite de simbolul % urmat de codul ASCII
corespunztor caracterului respectiv. ntreruperile de rnd sunt nlocuite
cu secvena %0D%0A%.
Exemplu:
nume=Ciobanu&prenume=Ion&adresa=bd.Renasterii+nr
.1%0D%0A%Moldova)
51
Text/plain utilizat atunci cnd datele sunt expediate ctre un email. Acest caz este analogic cazului precedent cu excepia faptului c aici
spaiile nu mai sunt nlocuite cu simbolul +.
Multiform/form-data utilizat cu metoda post pentru trimiterea
imaginilor sau a altor fiiere ctre server.
Atributul name definete un nume unic pentru formular. Acest atribut
este util n cazul cnd sunt folosite unele scripturi Java sau VB.
8.2. Elementele formularelor
Majoritatea elementelor unui formular sunt definite cu ajutorul tagului <input>.
Atributul name al acestui tag ataeaz un nume fiecrui element al
formularului, iar atributul value permite atribuirea unei valori iniiale unui
element al formularului.
Pentru a preciza tipul elementului se folosete atributul type al tagului <input>.
8.2.1. Cmp de editare (de tip text)
Pentru a defini un cmp de editare atributul type al tag-ului <imput>
primete valoarea text. n afar de atributele precizate, pentru aceste
cmpuri n tag-ul <input> pot fi folosite urmtoarele atribute:
size determin dimensiunea cmpului ca numr de caractere.
Implicit dimensiunea acestui cmp este de 20 de caractere.
Maxlength determin numrul maxim de caractere care poate fi
introdus n cmp.
Exemplu:
...
<form>
Nume: <input type="text" name="nume"><br>
Prenume:
<input
type="text"
name="prenume"
value="prenume">
</form>
...
52
8.2.2. Cmp de tip parol

Aceste cmpuri sunt definite prin atribuirea valorii password
atributului type. Pentru acest tip de cmp pot fi folosite aceleai atribute
ca i pentru cmpul de editare: size, maxlength, name, value, obinnduse aceleai rezultate.
Exemplu:
...
<form>
Introduceti parola:
<input type="password" name="parola">
</form>...
53
8.2.3. Butoane de tip radio

Acestea permit alegerea unei singure variante din mai multe posibile.
Pentru definirea butoanelor radio atributului type i se atribuie valoarea
radio. n afar de atributele name i value, pentru acest tip de butoane tagul <input> poate avea atributul checked care dtermin ca una din opiuni
s fie bifat iniial. Evident nu poate fi utilizat dect pentru un singur
buton radio. Dac, totui, acest atribut a fost folosit pentru mai multe
butoane, aceast specificaie va fi luat n calcul numai pentru ultimul.
Exemplu:
...
<form>
Alegeti categoria de
<input type="radio"
<input type="radio"
<input type="radio"
<input type="radio"
</form>
...
varsta:<br>
name="v">...-15 ani<br>
name="v">16-20 ani <br>
name="v">20-30 ani<br>
name="v">30-...ani
54
8.2.4. Casete de validare (checkbox)

O caset de validare permite selectarea sau deselectarea unei opiuni.
Pentru definirea unei casete de acest gen atributului type al tag-ului
<input> i se atribuie valoarea ceckbox. Ca i pentru butoanele radio,
pentru casetele de validare pot fi folosite aceleai atribute cu aceleai
rezultate: checked, name, value.
Exemplu:
...
<form>
Ce surse de informare folositi:<br>
<input type="checkbox" name="inf">TV<br>
<input type="checkbox" name="inf">Internet <br>
<input type="checkbox" name="inf">Ziare<br>
<input type="checkbox" name="inf">Altele
</form>
...
8.2.5. Cmpuri de tip fiier

Aceste cmpuri sunt folosite pentru a permite utilizatorilor s fac
upload fiierelor pe server. n acest caz atributul type ia valoarea file.
Pentru cmpuri de fiiere tag-ul <input> poate avea atributele: size,
55
name, value i atributul accept care are ca valoare lista tipurilor MIME
separate prin virgul i care indic tipul de transfer.
Exemplu:
...
<form>
Adauga o imagine<br>
<input type="file">
</form>
...
8.2.6. Cmpuri ascunse

Aceste cmpuri sunt folosite pentru a trimite date, ns, fr a permite
utilizatorului vizualizarea sau manipularea acestora. Cmpurile ascunse
sunt necesare pentru prelucrarea corect a formularului.
Pentru definirea cmpurilor ascunse atributului type i se atribuie
valoarea hidden. n cazul cnd se definete un cmp ascuns tag-ul
<input> poate avea, n afar de type, doar dou atribute: name i value.
Exemplu:
...
<form>
<input type="hidden">
</form>
...
Browser-ul nu va afia nimic.
8.2.7. Butoane
Buton de anulare
Rezultatul activrii butonului de anulare este golirea coninutului
ntregului formular. Pentru acest buton tag-ul <input> poate primi n plus
doar atributul value care specific numele butonului. n cazul cnd
atributul value lipsete butonul va fi numit Reset.
56
Exemplu:
...
<form>
<input type="file">
<input type="reset" value="Sterge">
</form>
...
Buton de trimitere
Acest buton determin browser-ul s trimit datele formularului ctre
server pentru ca acestea s fie prelucrate. Pentru definirea acestui buton
atributului type i se atribuie valoarea submit.
n afar de atributul type <input> poate avea atributele name i
value cu rezultatele deja cunoscute.
Exemplu:
...
<form>
<input type="file"><br><br>
<input type="reset" value="Sterge">
<input type="submit" value="Expediaza">
</form>...
57
Buton de tip imagine

Acest tip de buton se folosete pentru a aduga personalitate
butonului de trimitere. Pentru a defini un astfel de buton atributul type
primete valoarea image. Iar atributul src folosit tot n <input> indic urlul fiierului care conine imaginea respectiv. n afar de aceste dou
atribute, poate fi folosit i atributul name.
Exemplu:
...<form>
<input type="image" src="buton.jpg"><br><br>
</form>
...
58
Buton generic
Acest tip de buton se folosete pentru a aduga unui formular un
buton care nu are un comportament prestabilit, prin activarea acestui buton
se lanseaz n execuie un anumit script (folosind JavaScript sau alt limbaj
de programare). Pentru a defini acest tip de buton atributului type i se
atribuie valoarea button. Pentru butonul generic, n afar de type, pot fi
folosite atributele name i value.
Exemplu:
...
<form>
<input type="button" value="Executa"><br><br>
</form>
...
8.2.8. Liste de selecie

Sunt dou tipuri de liste de selecie: liste cortin (drop-down list) i
liste derulante (scrolling list). Ambele se definesc cu ajutorul tag-ului par
<select>, diferenierea fcndu-se cu atributul size. Pentru listele cortin
atributul size poate fi omis sau i se poate atribui valoarea 1, iar pentru
listele derulante orice alt valoare.
Atributele tag-ului <select> sunt:
name numele variabilei care va fi trimis aplicaiei ce
prelucreaz formularul;
59
size numrul de elemente vizibile din list;

multiple dac este prezent, acesta permite realizarea de selecii
multiple, a mai multor elemente concomitent prin folosirea combinaiilor
Shift+click pentru elementele consecutive i respectiv Ctrl+click pentru
elementele non-consecutive.
Elementele unei liste de selecie sunt incluse n list cu ajutorul tagului par <option>. Acest tag are urmtoarele atribute:
selected cnd acest atribut este prezent, opiunea respectiv
este preselectat;
value specific valoarea care va fi trimis aplicaiei de
prelucrare a datelor formularului.
Exemple:
...
<form>
Alegeti tara de origine<br>
<select name="tara">
<option value="1">Moldova</option>
<option value="2">Romania</option>
<option value="3">Ucraina</option>
<option value="4">Alta</option>
</select>
</form>
...
60
Atribuind valoarea 3 atributului size lista cortin din exemplul

precedent devine list derulant:
... <form>
Alegeti tara de origine<br>
<select name="tara" size=3>
<option value="1">Moldova</option>
<option value="2">Romania</option>
<option value="3">Ucraina</option>
<option value="4">Alta</option>
</select>
</form> ...
61
n listele de selecie pot fi grupate elementele cu ajutorul tag-ului

<optgroup> folosit, evident, n interiorul blocului <select>...</select>.
Acest tag are un singur atribut label care definete un grup.
Exemplu:
...
<form>
Studii <br>
<select name="studii">
<option value="none">None</option>
<optgroup label="ciclu 0">
<option value="01">anul 1</option>
</select>
</form>
...
62
8.2.9. Zone de text

Zonele de text permit utilizatorilor s introduc un anumit text.
Diferena dintre zonele de text i cmpurile de editare const n faptul c
prima permite introducerea mai multor linii de text pe cnd cmpurile de
editare permit introducerea unei singure linii.
Zonele de text se definesc cu ajutorul tag-ului par <textarea> care
are urmtoarele atribute:
name specific numele zonei de text, respectiv variabilei ce va fi
trimis aplicaiei ce prelucreaz formularul;
rows specific numrul de rnduri vizibile n zona cu text;
cols specific numrul de coloane vizibile n zona cu text;
readonly cnd este prezent, utilizatorilor nu li se permite de a
modifica coninutul zonei, ci doar de a vizualiza coninutul acesteia.
Exemplu:
...<form>
Adauga un comentariu: <br>
<Textarea name="zona text" rows="5">
comenteaza
</textarea>
</form>
...
63
9. Meta-elemente
Scopul elementelor meta este de a oferi informaii despre coninutul
documentelor web. Acestea mai poart numele de metadate, adic sunt
date care descriu alte date.
Aceste elemente sunt marcate prin tag-ul impar <meta> i folosirea
lor este opional. ntr-un document web pot fi incluse un numr nelimitat
de astfel de elemente.
Meta-elementele pot fi incluse numai n interiorul blocului
<head>...</head>.
Dei ofer informaii relevante pentru browser i pentru motoarele de
cutare, descriind coninutul documentului web, acestea nu sunt afiate de
ctre browser-e.
Unul din cele mai importante atribute ale tag-ului <meta> este name.
Acesta poate lua una din valorile:
author i copyright care sunt folosite pentru a proteja

drepturile de autor a paginilor.
Exemplu:
<meta name=author content=A.A. Ciobanu,
a.ciobanu@mail.md>
<meta name=copyright content=descrierea
drepturilor de autor si consecintele ce ar putea
avea loc in cazul incalcarilor>
Description utilizat pentru descrierea documentului. Folosind
aceast opiune poate fi fcut o adnotare atrgtoare pentru site i de a
folosi, o dat n plus, cuvintele cheie.
Exemplu:
<meta name=discription content=Site util
celor ce fac primii pasi in viata de webdesigner>
Keywords folosit pentru enumerarea prin virgul a cuvintelor
sau expresiilor cheie ce corespund maximal cu tema paginii. Serverele de
64
cutare analizeaz aceste cuvinte (inclusiv i ali parametri ai paginii) i

iau decizia: corespunde sau nu pagina respectiv cerinelor cutrii.
Exemplu:
<meta name=keywords content=prima pagina
web, crearea paginilor web, primii pasi in html>
Robots. Destinaia acesteia este de a informa motorul de cutare
n vederea detectrii paginii. Dintre valori cel mai des sunt folosite: index,
noindex, follow i nofollow care determin respectiv trebuie sau nu s fie
indexat pagina i trebuie sau nu de a trece la paginile ctre care aceasta
face referine. Dac este necesar de a indica mai multe valori pentru
robots acestea se enumr prin virgul.
Not! Nu toate motoarele de cutare neleg acest lucru. Este mai
sigur de a crea n directorul rdcin al serverului fiierul robots.txt i
de a introduce aici lista paginilor care nu trebuie s fie indexate. Cu toate
c, tot ce este legat de server ar fi bine de fcut mpreun cu
administratorul acestui server.
Exemplu:
<meta name=robots content=noindex, follow> pagina nu va nimeri n listele de indexare a sistemelor de cutare, iar alte
pagini ale site-ului ctre care aceasta face referine vor fi n liste.
Generator valoare folosit foarte rar. Cu ajutorul acesteia se
specific programul cu care a fost generat codul.
Exemplu:
<meta name=generator content=Microsoft
FrontPage Express 2.0>
Un alt atribut al tag-ului <meta> este content-type. Acesta poate lua
valorile:
http-equiv cu ajutorul acestuia se sugereaz browser-ului tipul
codificrii paginii web.
65
Exemplu:
<meta http-equiv=content-type
content=text/html; charset=windows-1251>
Expires aceasta definete data cnd pagina devine nvechit i
browser-ul va fi nevoit s se adreseze dup ea ctre site i nu s ncarce
versiunea veche din cache.
Exemplu:
<meta http-equiv=expires content=Wed, 5
august 2009 00:00:01>
Refresh aceast valoare este folosit atunci cnd peste o
anumit perioad de timp n locul paginii respective trebuie s se ncarce o
alt pagin.
Exemplu:
<meta http-equiv=refresh content=20;
url=http://server/next.html> - peste 20 de secunde se va
ncrca pagina http://server/next.html
10. Elemente ale limbajului JavaScript

JavaScript, prin inserarea unui script n documentele (X)HTML
existent permite programatorilor s creeze pagini Web mult mai dinamice.
Extinderea paginilor (X)HTML prin folosirea limbajului JavaScript
confer paginilor Web mai mult putere, iar (X)HTML-ului mai mult
flexibilitate.
JavaScript este limbajul favorit al creatorilor site-urilor web deoarece
este un limbaj uor de nvat i acesta pooate fi interpretat de ctre
browser-e. Mai mult sunt suficiente doar cteva linii de cod pentru a mri
gradul de interactivitate a paginilor web i aceste linii de cod, sau
programe, pot fi incluse direct n documentele (X)HTML.
Limbajul JavaScript poate fi utilizat pentru:
generarea paginilor web personalizate i modificarea dinamic a
prezentrii lor;
66
afiarea unor mesaje care ruleaz n bara de stare a browser-ului;

afiarea unor mesaje ntr-o pagin web sau ntr-o caset de dialog;
crearea de butoane animate;
validarea coninutului unui formular;
crearea animaiilor personalizate;
realizarea calculelor matematice;
generarea ceasurilor i calendarelor;
comunicarea cu applet-urile Java;
identificarea browser-ului n care se afieaz pagina web;
executarea funciilor clasice ale unui limbaj de programare;
.a.
O meniune important: programele care ruleaz pe calculatorul
utilizatorului sunt numite aplicaii client-side, i programele care ruleaz
pe server (inclusiv CGI-urile) sunt numite aplicaii server-side.
Limbajului JavaScript i-au fost impuse o serie de limitri, majoritatea
din raiuni de securitate, i anume:
citirea, scrierea, crearea i tergerea fiierelor de pe hard disc;
executarea operaiunilor n reea;
nchiderea ferestrelor de browser care nu au fost deschide de el;
crearea aplicaiilor autonome. Pentru scrierea a astfel de aplicaii
pot fi utilizate limbajele: Java, C sau C++.
Pentru a lucra cu limbajul JavaScript, ar fi bine de a cunoate
termenii i conceptele: Obiect; Proprietate; Metod; Instruciune; Funcie;
Eveniment; Gestionar de evenimente; Variabil.
Obiect entitate cu parte ntreag. De exemplu n Javascript window
este un obiect, pagina web este un obiect, fiecare element al unui
document X(HTML) este de asemenea un obiect: paragrafele, tabelele,
imaginile, link-urile, elementele formularelor, etc.
Proprietate o proprietate descrie un obiect. De exemplu height este
o proprietate a obiectului window. O proprietate poate fi de asemenea un
obiect care poate avea diverse proprieti.
Metod este o funcie care definete un anumit comportament
caracteristic al unui obiect. Fiecare obiect posed o colecie de metode, iar
fiecare metod aparine cel puin unui obiect. De exemplu metoda close()
a obiectului window are ca funcie nchiderea ferestrei.
67
Instruiune O instruciune produce o aciune, de exemplu: afiarea

unui text, modificarea proprietii unui obiect. Instruciunile combin
obiecte, proprieti i metode.
Funcie o funcie este un grup de instruciuni tratate ca o singur
entitate. Spre deosebire de metode funciile nu sunt asociate nici unui
obiect particular.
Eveniment o aciune care se produce n raport cu un element, fie
acesta o fereastr, un document, un buton, etc.
Gestionar de evenimente gestionarul de evenimente indic
browser-ului cum s reacioneze atunci cnd se produc diferite
evenimente.
Variabil variabilele reprezint un element fundamental al
limbajului JavaScript. Acestea pot conine: un numr, un ir de caractere
sau un obiect.
Utilizarea limbajului JavaScript se reduce n principal la dou
concepte de baz: sintaxa JavaScript i DOM (Document Object Model).
Sintaxa definete un ansamblu se reguli care trebuie respectate atunci cnd
se scrie un cod JavaScript. DOM se refer la componentele paginii web,
obiectele care pot fi accesate i care pot fi manipulate cu ajutorul
limbajului JavaScript.
Script-urile JavaScript sunt inserate ntr-un document (X)HTML prin
pereche de tag-uri <scipt>...</script>. Tag-ul <script> poate avea
urmtoarele atribute:
type care indic tipul limbajului de script
Exemplu:
<script type=text/JavaScript>
language care identific limbajul de script i facultativ
versiuenea
Exemplu:
<script
language=JavaScript>
type=text/JavaScript
src precizeaz url-ul fiierului extern care conine script-ul
68
Exemplu:
<script type=text/JavaScript src=fisier.js>
Este posibil ca browser-ul s nu poat prelucra un script JavaScript i
aceasta din motivul c browser-ul nu poate n general prelucra script-urile
sau nu recunoate limbajul specificat prin type sau utilizatorul a dezactivat
prelucrarea script-urilor. Pentru aceste cazuri este prevzut tag-ul
<noscript>...</noscript>. n interiorul acestei perechi de tag-uri pot fi
plasate elemente (X)HTML care vor fi ignorate de ctre browser-ele care
prelucreaz scripturi.
Metode de nserare a script-urilor ntr-un document X(HTML):
Metoda 1. scriptul poate fi plasat n corpul paginii (ntre
<body>...</body>);
Metoda 2. scriptul poate fi plasat n antetul paginii (ntre <head
>...</head >);
Metoda 3. pot fi utilizate fiiere surs externe;
Metoda 4. poate fi creat un gestionar de evenimente.
Deaorece scopul acestui capitol este doar familiarizarea cu JS i
nsuirea unor elemente eseniale ale acestui limbaj, n continuare se va
face referin doar la metoda 4 de inserare a script-urilor i se va atrage o
deosebit atenie asupra conceptului de evenment i gestionar de
evenimente.
10.1. Conceptul de eveniment i gestionar de evenimente
Un eveniment este o aciune care se produce n raport cu un element
(fereastr, document, buton, etc.) el poate fi detectat i prelucrat de ctre
un script care va declana o aciune. Script-ul este executat dac
evenimentul se produce pe obiectul cruia i este asociat.
Reacia la un eveniment este cunoscut sub numele de prelucrarea
evenimentului, iar codul JavaScript corespunztor este cunoscut sub
numele de gestionar de evenimente.
Un gestionar de evenimente este o metod puin special care va fi
apelat n mod automat de ctre browser ori de cte ori va surveni un
eveniment particular.
Gestionarii de evenimente sunt funcii JavaScript. Acetia sunt uor
de programat, de multe ori este suficient o singur instruciune pentru a
putea fi creai.
69
Aciunile utilizatorilor sunt cele mai frecvente evenimente. ns

acestea nu sunt singurele. De exemplu evenimentul load este declanat
automat de ctre browser atunci cnd este ncheiat ncrcarea unui
document.
De obicei evenimentele sunt provocate de utilizator prin efectuarea
unui click sau introducerea unor date.
Cteva din evenimentele care survin n mod frecvent ct i momentul
n care acestea se declaneaz sunt prezentate n Tabelul 10.1.
Fiecare eveniment are un nume prestabilit care n acelai timp este i
parametrul unui tag. Acest parametru stabilete care eveniment anume
trebuie procesat glisarea mouse-ului, introducerea textului, ncrcarea
paginii, etc. Valoarea parametrului este aciunea care trebuie ndeplinit:
<tag gestionar_evenimente=cod JavaScript
(descrierea aciunii)> coninut </tag>
Petru a defini un gestionar de evenimente se adaug prefixul on la
numele evenimentului.
Toate evenimentele procesate de browser pot fi mprite n trei
grupuri n dependen de elementul ce le provoac: evenimente provocate
de mouse, tastatur i de elementul formularului sau n general a paginii
HTML.
Tabelul 10.1.
Evenimente
Evenimentul
Momentul de declaare
abort
ncrcarea unui obiect este ntrerupt
blur
un element nu este activat
click
utilizatorul execut click pe un obiect
change
valoarea unui element este modificat
error
se produce o eroare la ncrcarea unui document
sau a unei imagini
focus
un element inactiv devine activ
load
un document sau o imagine se ncarc
mouseOut
mouse-ul este glisat nafara elementului
mouseOver
mouse-ul este glisat pe element
reset
datele introduse n formular sunt resetate
select
se selecteaz un cmp ntr-un formular
submit
expedierea unui formular
unload
descrcarea unui document
70
10.2. Evenimente provocate de mouse

Cel mai simplu eveniment legat de mouse este executarea unui singur
click. Gestionarul acestui eveniment are numele onClick.
Exemplu:
<html>
<title>mesaj</title>
<body>
<a href="mailto:e-mail@da.com"
onClick="document.images[0].src='scrie_mesaj.jpg'"
>
<img src="plic.jpg" border=0>
</a>
</body>
</html>
Dup executarea unui click

pe imagine se deschide aplicaia
de
expediere
a
mesajelor
electronice i concomitent se
schimb imaginea.
Remarc: n exemplul anterior a fost folosit codul JavaScript. n Java

Script toate obiectele omogene pe pagin: imaginile, tabelele, formularele,
hiperlink-urile sunt grupate. Grupul de imagini este numit images.
Fiecrui element din acest grup i este atribuit numrul lui de ordine
71
ncepnd cu 0 (zero). Pentru a face referin la una din imaginile de pe

pagin se folosete inscripia images[N], unde N este numrul de ordine
a imaginii.
Un alt eveniment provocat de mouse este executarea unui dublu click,
eveniment numit DblClick, iar gestionarul de eveniment - onDblClick.
Exemplu:
S adugm la exemplul precedent nc un cod:
<html>
<body>
<a href="mailto:e-mail@da.com"
onClick="document.images[0].src='scrie_mesaj.jpg'"
onDblClick="document.write('Era suficient un
singur clic!')">
<img src="plic.jpg" border=0>
</a>
</body>
</html>
Remarc: n exemplul precedent a fost folosit codul JavaScript cu
funcia write, cu ajutorul creia poate fi afiat pe ecran orice text, inclusiv
cu coduri HTML.
Alte dou evenimente legate de mouse sunt: MouseDown
eveniment ce apare cnd butonul mouse-lui este apsat (dar nc nu este
eliberat) i MouseUp cnd butonul mouse-lui este eliberat.
72
Exemplu:
<html>
<body>
Pentru a vede continutul apasa pe cufar<br>
<img src="inchis.jpg" border=0
onMouseDown="document.images[0].src='deschis.j
pg'"
onMouseUp="document.images[0].src='inchis.jpg'
">
</body>
</html>
73
n afar de evenimentele specificate anterior mai sunt evenimentele:

MouseOver, MouseOut i MouseMouve.
Exemplu:
Mouse-ul plasat deasupra unei legturi face s apar pe bara de
stare (deasupra butonului "Start") adresa/ directorul/ fiierul accesat de
acea referin; de obicei, ns, aceasta nu induce la o idee clara despre
subiectul acelei pagini.
n funcie de aciunea vizitatorului: plaseaz mouse-ul deasupra
sau l ia de pe link, se poate face astfel nct textul n bara de stare s se
modifice cnd mouse-ul este plasat pe un link n bara de stare s se afieze
succint care va fi efectul n urma activrii acestuia. Textul ales s apar n
74
cazul cnd se ia mouse-ul de pe link rmne afiat pn cnd este plasat

deasupra unei alte legturi.
<html>
<title>bara de stare</title>
<body>
<a href="index.html"
onMouseOut="self.status='Speram sa nu va
plictisiti';return true"
onMouseOver="self.status='Pagina
principala';return true" >
Link 1</a>
</body>
</html>
Remarc: Acest cod este valabil pentru InternetExplorer. n

MozilaFirefox acest cod va avea urmtorul efect:
75
10.3. Evenimente provocate de tastatur

Evenimentele provocate de tastatur sunt analogice evenimentelor
provocate de mouse doar c sunt mai puine: KeyPress apsarea unei
taste; KeyDown micarea tastei n jos i KeyUp eliberarea unei taste.
Exemplu:
<html>
<title>evenimente</title>
<body>
<form>
<Input type=button value="apasati orice tasta"
onKeyPress="window.alert('Codul tastei apasate
este:' +window.event.keyCode)">
</form>
</body>
</html>
76
Remarc: Codul funcioneaz n InternetExplorer i doar atunci cnd

butonul este selectat.
10.4. Evenimente legate de formulare
Exemplul de mai sus poate fi perfecionat folosind evenimentele
Focus cnd elementul formularului este selectat i Blur cnd
elementul formularului este deselectat.
Astfel vom obine urmtorul cod cu efectele respective:
Exemplu:
<html>
<body>
77
<form>
<Input type=button value="apasati acest buton"
onKeyPress="window.alert('Codul tastei apasate
este:' +window.event.keyCode)"
onFocus="value='Apasati o tasta si-i veti afla
codul'"
onBlur="value='apasati acest buton'">
</form>
</body>
</html>
78
Evenimentul Change reflect faptul c elementul formularului este

deselectat i-n acelai timp acesta a suferit schimbri.
Exemplu:
<html>
<body>
Introduceti parola:<br>
<form>
<Input type=password
onChange="if(value!='corect')
window.alert('Ati gresit parola!')">
<input type="submit" value="sign in">
</form>
</body>
</html>
79
Alt eveniment din aceast categorie este Select eveniment ce apare

la selectarea de ctre utilizator a unui text.
Exemplu:
<html>
<body>
<form>
<img src="text.jpg"><br>
Comentarii:<br>
<textarea cols=25 rows=5
onSelect="images[0].src='select.jpg'">
</textarea>
<br>
<input type=submit value=ok>
</form>
</body>
</html>
i nc un eveniment legat de formulare Submit, ce apare la

activarea butonului de expediere a datelor.
80
Exemplu:
<html>
<body>
<form onSubmit="window.alert('Multumim!
Comentariul Dvs va fi analizat!')">
Comentarii:<br>
<textarea cols=25 rows=5>
</textarea>
<input type=submit value=ok>
</form>
</body>
</html>
Dup activarea butonului Ok va aprea fereastra cu coninutul
respectiv:
81
10.5. Evenimentele legate de pagin

Cu funcionarea paginii n ntregime sunt legate urmtoarele
evenimente: ncrcarea i descrcarea paginii Load i Upload, precum i
evenimentul erorii la ncrcarea paginii Eror, sau stoparea ncrcrii
paginii de ctre utilizator - Abort.
onLoad este folosit de obicei pentru a determina tipul i versiunea
browser-ului i ncrcarea versiunii paginii corespunztoare informaiilor
despre browser.
i onLoad i onUnload sunt adesea folosite n lucrul cu cooki-uri ce
trebuiesc setate cnd un utilizator intr sau prsete o pagin.
Exemplu:
<html>
<body onLoad="alert('Multumim pentru vizitarea
site-ului nostru')">
</body>
</html>
82
Bibliografie:
1.
2.
3.
4.
5.
6.
7.
8.
9.
I.Bolun, I.Covalenco, Bazele informaticii economice, Ediia a

treia, Editura Bonitas, Iai, 2005.
Sabin Buraga, Proiectare situri Web: design i funcionalitate,
Editura Polirom, Iai, 2002.
Liviu Dumitracu, (X)HTML, Editura Universitii din
Ploieti, 2003.
.., HTML. .
"", , 2003.
. . . , Web- Web. : [. ].
, , 2006.
http://html-tutor.net/?sch=1
http://www.upg-ploiesti.ro/col/ldumitrascu/html/index.jsp.htm
http://www.notiuni.html.go.ro/
http://ghid-html.dap.ro/
83
Anexe
Anexa 1
Tag-ul
(perechea de
tag-uri)
<HTML>...
</HTML>
<HEAD>...
</HEAD>
<TITLE>...
</TITLE>
<BODY>...
</BODY>
Atribute
definete un fiier n format HTML
antetul documentului
titlul documentului
corpul paginii HTML
bgcolor
background
text
link
vlink
alink
leftmargin
rightmargin
topmargin
bgproperties
<!-comentariu
-->
Tag-uri de baz
Descriere
culoarea fondalului paginii (data prin

nume sau valoarea RGB)
url - ul (adresa i numele) imaginii de
fond a paginii
culoarea textului (nume culoare sau
valoare RGB)
culoarea legturilor nevizitate din pagin
(nume sau RGB)
culoarea legturilor vizitate din pagin
(nume sau RGB)
culoarea legturilor n timpul click - ului
(nume sau RGB)
indentarea ntregului material din pagin
fa de marginea din stanga (pixeli)
indentarea ntregului material din pagin
fa de marginea din dreapta (pixeli)
deplasarea ntregului material din pagin
fa de marginea de sus (pixeli)
primete doar valoarea "fixed"; dac se
deruleaz pagina, fondul rmne fix
comentariu n codul surs, acesta nu este
afiat de ctre browser
84
Anexa 2
Tag-ul
(perechea
de tag-uri)
<b></b>
<i></i>
<u></u>
<strike>...
</strike>
sau
<s>...</s>
<sup>
</sup>
<sub>
</sub>
<tt >
</tt>
<hi >
</hi >
<big>...
</big>
<small>...
</small>
<center>...
</center>
<blockquote
>
...
</blockquote
>
<nobr>...
</nobr>
<blink>...
</blink>
Atribute
Formatarea textului
Descriere
afieaz textul cu litere aldine (ngroate)

afieaz textul cu litere italice (nclinate)
afieaz textul subliniat
textul este secionat cu o linie
afieaz textul ca indice superior

afieaz textul ca indice inferior
text cu font monospaiu
nivel de subtitlu al documentului
i poate lua valori de la 1 la 6
h1 h2 h3 h4 h5 h6
text scris cu caractere mai mari cu o unitate
dect cele curente
text scris cu caractere mai mici cu o unitate
dect cele curente
centreaz n pagin
(text, imagine, table, etc.)
textul este indentat cu un TAB fa de ambele
margini (stnga i dreapta) ale spaiului
disponibil (n pagin, celul de table, etc.)
blocul de text cuprins ntre acestea va fi afisat

pe o singura linie.
textul clipete
85
<font>...
</font>
color
face
size
weight
<p >
</p>
<br>
<div>...
</div>
align
class,
type,
style
align
<pre>
</pre>
<hr>
align
width
size
noshade
color
<tt>... </tt>
<cite > ...
</cite >
<code > ...
</code>
Anexa 2 (continuare)
formatarea caracterelor
culoarea textului (data prin nume sau valoarea
RGB)
tipul sau stilul textului
mrimea fontului (poate lua valorile: de la 1 la
7; +1,+2,...; -1,-2,...)
grosimea fontului (poate lua valori: 100, 200,
..., 900)
definete un paragraf
alinierea textului
specificarea unui anumit stil de text
trecerea la rnd nou
marcaj pentru blocuri de text (aliniat implicit la
stanga)
alinierea blocului de text
bloc de text preformatat
linie orizontal
alinierea (valori posibile: left, right, center)
lungimea liniei (poate lua valori n pixeli i n
procente)
grosimea liniei (poate lua valori n pixeli i n
procente)
cnd este prezent definete o linie fr umbr
culoarea liniei (data prin nume sau valoarea
RGB)
text cu font monospaiu
citare bibliogarfic
listing de program
86
<em > ...
</em>
<kbd>...
</kbd>
<strong>...
</strong>
<var>...
</var >
<basefont>
stil logic de evideniere

text de la tastatura
evidentiere logic puternic
program sau variabil
size
color
specific dimensiunea implicit a fontului din

pagina
mrimea fontului implicit, valori posibile:
i = 1, 2, ... , 7 (1-mic, 7-mare);
fontul implicit are mrimea 3;
nu are influen asupra textului din interiorul
tabelelor
culoarea poate fi dat prin numele ei sau prin
valoarea RGB;
are influen i asupra <hi> ...</hi> dar nu i
asuptra textului din interiorul tabelelor
87
Anexa 3
Linkuri
Pperechea
de tag-uri
<a></a>
Atribute
-
href
name
target
Descriere
marcaj de tip ancor
referin hipertext. Valori:
url referin spre alte pagini;
#nume_ancor referin spre o ancor intern
(din acelai fiier)
url#nume_ancor referin spre o ancor
extern.
Definirea unei ancore
valori:
numele cadrului n care se va afia sursa definit de
href;
_top = ncarc pagina ntr-o fereastr nou, deasupra
altor ferestre de pe ecran;
_self = ncarc pagina n cadrul curent; este valoarea
implicit;
_parent = ncarc pagina n fereastra parint;
_blank = ncarc pagina ntr-o fereastr nou, fr
nume
Anexa 4
Definirea imaginilor
Tag-ul
< img >
Atribute
src
alt
align
height
width
border
hspace
vspace
Descriere
marcajul de includere a imaginii
adresa fiierului grafic (url absolut sau relativ)
textul alternativ care este afiat celor care navigheaz
fr imagini
alinierea imaginii n pagin - valorile: right, left
(implicit)
alinierea elementelor din jurul imaginii - valorile: top,
middle, bottom
nlimea imaginii (valori n pixeli sau %)
limea imaginii (valori n pixeli sau %)
mrimea chenarului din jurul imaginii (n pixeli)
spaiu pe orizontal n jurul imaginii (n pixeli)
spaiu pe vertical n jurul imaginii (n pixeli)
88
Anexa 5
Tag-ul
(perechea de taguri)
< img >
Definirea Hrilor de imagini

Atribute
Descriere
ismap
usemap
<map>...</map>
name
<area>
shape
coords
href
alt
nohref
target
marcajul de includere a imaginii

specific faptul c este o hart de
imagini pe server (se folosete rar)
definirea hrii de imagine la client
specific regiunile unei hri de imagine
la client
numele hrii de imagine (corespunztor
atributului usemap al tag-ului <img>)
definete o regiune a unei hri de
imagini
definete forma regiunii: rect sau
rectangle, circ sau circle, point, poly sau
polygon
coordonatele unei regiuni:
pentru rectangle se dau coordonatele
colurilor din stnga sus i dreapta jos
(x1,y1,x2,y2);
pentru circle coordonatele centrului
cercului i razei (x,y,r);
pentru polygon coordonatele fiecrui
vrf al acestuia (x1,y1,x2,y2,,xn,yn).
URL-ul asociat unei regiuni specificate
din cadrul imaginii
textul alternativ asociat regiunii
specifice din cadrul imaginii
excluderea unei zone din hart
specific unde se va deschide url-ul
89
Anexa 6
Tag-ul
(perechea
de taguri)
<ul>
</ul>
Atribute
type
<ol>
</ol>
type
start
<li>
value
<dl></
dl>
<dd>
<dt>
Definirea listelor
Descriere
definete lista neordonat

stabilete caracterului de definire a elementului
listei. Valorile posibile sunt:
o "circle" (cerc)
"disc" (disc plin) (valoarea prestabilita);
"square" (patrat)
definete lista ordonat
stabilete tipul numerotaiei. Valorile posibile
sunt:
" A " pentru ordonare de tipul A , B , C , D etc.;
" a " pentru ordonare de tipul a , b , c , d etc.;
" I " pentru ordonare de tipul I , II , III , IV etc.;
" i " pentru ordonare de tipul i , ii , iii , iv etc.;
" 1 " pentru ordonare de tipul 1 , 2 , 3 , 4 etc.
stabilete valoarea iniial a secvenei de ordonare
definete fiecare element al listei (ordonate i
neordonate)
stabilete valoarea pentru elementul respectiv al
listei
definete lista de definiii
descriere definie
termen de definiie
90
Anexa 7
Tag-ul
(perechea de
tag-uri)
<table>
</table>
Definirea tabelelor
Atribute
Descriere
border
bgcolor
background
align
cellpadding
cellspacing
width
bordercolor
bordercolorlight
bordercolordark
hspace
vspace
cols
frame
definirea tabelului
chenarul tabelului, primete valoare
n pixeli
culoarea fondalului tabelului (data
prin nume sau valoarea RGB)
definirea unei imagini ca fondal
pentru tabel
primete ca valoare URL-ul imaginii
alinierea tabelului n pagin
spaiu ntre coninutul celulelor
tabelului i coninutul lor
primete valoare n pixeli
spaiu ntre celulele tabelului
primete valoare n pixeli
limea tabelului
poate primi valoare n pixeli sau n
procente
culoarea chenarului (dat prin nume
sau valoarea RGB)
culoare mai deschis pentru chenar
(bordura din stnga i sus)
culoare mai nchis pentru chenar
(bordura din dreapta i jos)
spaiu pe orizontal n jurul tabelului
valoare n pixeli
spaiu pe vertical n jurul tabelului
valoare n pixeli
numrul de coloane ale unui tabel
ajustarea cadrelor n tabel atribut
valabil pentru IE
91
Rules
<tr>...</tr>
bgcolor
align
height
<td>...</td>
bgcolor
align
height
width
background
valign
colspan
rowspan
nowrap
ajustarea riglelor n tabel atribut
valabil pentru IE
definirea liniei unui tabel
culoarea fondalului pentru linia
tabelului (data prin nume sau
valoarea RGB)
alinierea coninutului celulelor din
linie
nlimea liniei (valoare n pixeli)
definirea unei celule a tabelului
culoarea fondalului pentru celul
(dat prin nume sau valoarea RGB)
alinierea coninutului celulei
valori: left, right, center,
baseline alinierea celulelor la baza
textului adiacent
caracter aliniaz coloana fa de un
anumit caracter, implicit fa de (.)
justify alinierea din ambele pri
(stnga i dreapta)
nlimea celulei (valoare n pixeli)
limea celulei (valoare n pixeli)
definirea unei imagini ca fondal
pentru celul
alinierea coninutului celulei pe
vertical (valori: top, middle, bottom)
numrul de coloane pe care se ntinde
celula
numrul de rnduri pe care se ntinde
celula
nu permite desprirea textului n mai
multe linii n celul
92
<th>...</th>
<caption>...
</caption>
align
<col>
width
align
char
bgcolor
<colgroup>...
</colgroup>
bgcolor
<thead>...
</thead> bgcolor
<tbody>...
<tbody> bgcolor
<tfoot>...
</tfoot>
bgcolor
definirea celulelor cu semnificaia de
cap de tabel
definirea titlului tabelului
alinierea titlului tabelului
valori: bottom, top, left, right
fr atribute definete aceeai lime
pentru toate coloanele
limea coloanei (valoare n pixeli)
alinierea textului n ntreaga coloan
alinierea textului fa de un caracter
culoare de fondal
mpreun cu <col> definete un set de
definiii de coloane
culoare de fundal
definete titlul tabelului
culoare de fundal
definirea corpului tabelului
culoare de fundal
Definete liniile de sfrit ale tabelului
culoare de fundal
93
Anexa 8
Tag-ul
(perechea de tag-uri)
<form></form>
Definirea formularelor
Atribute
Descriere
formular activ
programul CGI de pe serverul ce
recepioneaz datele (valoarea
acestui atribut poate fi HTTP
URI (pentru a transmite datele
unui program) sau mailto URI
(pentru a transmite datele prin email))
modul n care datele sunt
transmise serverului (valori
posibile: get sau post)
numele formularului
tehnca de codificare a datelor
definete elementele listei
precizeaz tipul elementului
formularului
(valori: text, password,
checkbox, radio, submit, reset,
file, hidden, image, button)
numele elementului
specific valoarea iniial a
elementului
determin bifarea opiunii iniial
determin dimensiunea cmpului
ca numr de caractere (implicit
20 de caractere)
action
method
name
enctype
<input>
type
name
value
checked
size
94
maxleight
src
accept
<select>...</select>
name
size
multiple
<option>
value
<optgroup>
label
<textarea>...
</textarea> name
rows
cols
95
cnd type primete valoarea text
sau password acest atribut
specific numrul maxim de
caractere care pot fi introduse de
utilizator
cnd type primete valoarea
image, acest atribut specific
adresa imaginii care va fi
folosit n calitate de buton
pentru type=file, are ca valoare
tipurile MIME separate prin
virgul care indic tipul de
transfer
definete liste de selecie
numele valorii cmpului
numrul de elemente vizibile din
list
prin prezena acestuia se permite
realizarea seleciei multiple
include elemente n lista de
selecie
specific valoarea care va fi
trimis aplicaiei de prelucrare a
datelor formularului
gruparea elementelor n lista de
selecie
definirea unui grup
definete zone cu text
numele zonei
numrul de rnduri vizibile n
zona cu text
numrul de coloane vizibile n
zona cu text
prin prezena acestui atribut se
interzice modificarea textului de
ctre utilizator
mprirea formularului n pri
logice
numele asociat setului de
cmpuri (fieldset)
alinierea legendei afiate (top,
bottom, left, right)
specific ordinea elementelor
atunci cnd este apsat tasta
Tab.
specific tasta care asigur
comanda rapid de la tastatur
asociat unui anumit element
elementul este inactiv, dar afiat
pe ecran
elementul nu poate fi editat
readonly
<fieldset>...</fieldset>
<legend>...</legend>
align
tabindex
acceskey
disabled
readonly
96
Anexa 9
Tag-ul
(perechea de
tag-uri)
<frameset>...
</frameset>
Atribute
cols
rows
frameborder
border
framespacing
bordercolor
<frame>
src
name
scrolling
frameborder
marginheight
marginwidth
Definirea cadrelor
Descriere
definete o pagin ce conine cadre

(aceast pereche de tg-uri nlocuiete
perechea <body>...</body>)
numrul i mrimea coloanelor (ca
valoare primete o list de elemente
separate prin virgul care definesc
modul de mprire a paginii n cadre)
numrul i mrimea rndurilor
stabilete prezena sau absena
bordurii (primete ca valoare yes/no
sau 1/0)
definete grosimea bordurii
definete grosimea bordurii
culoarea bordurii (primete ca valoare
numele sau valoarea RGB a culorii)
definete un cadru
specific url-ul surs pentru cadru
numele cadrului
definete bara de derulare (valori
posibile: on, off, auto)
sau 1/0)
distana n pixeli dintre coninutul
cadrului i marginile verticale
distana n pixeli dintre coninutul
cadrului i marginile orizontale
97
noresize
target
<noframes>
...
</noframes>
<iframe>...
</iframe> src
name
height
width
frameborder
scrolling
prin prezena acestuia se anuleaz
posibilitatea prestabilit de a
redimensiona cadrul cu mouse-ul
specific unde va fi deschis url-ul int
seciunea de pagin pentru utilizatorii
care nu pot vedea un cadru (din cauza
browser-ului)
definete cadru intern
sursa cadrului
numele cadrului
nlimea cadrului
limea cadrului
sau 1/0)
definete bara de derulare (valori
posibile: on, off, auto)
98
Anexa 10
Tag-ul
(perechea de
tag-uri)
<meta>
Atribute
name
contenttype
Meta elemente
Descriere
definete meta elemente

valori posibile:
author i copyright protejarea drepturilor
de autor
description descrie documentul
keywords enumerarea prin virgul a
cuvintelor cheie
robots informeaz motorul de cutare n
vederea detectrii paginii
generator specific programul cu care a
fost generat codul
valori posibile:
http-equiv sugereaz browser-ului tipul
codificrii;
expires definete data cnd pagina devine
nvechit
refresh - aceast valoare este folosit atunci
cnd peste o anumit perioad de timp n
locul paginii respective trebuie s se ncarce
o alt pagin.
99

Chicu Limbajul HTML PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chicu Limbajul HTML PDF

Uploaded by

Copyright:

Available Formats

ACADEMIA DE TRANSPORTURI,

Seria Teorie Economic,

Chiinu, Evrica - 2011

Editura Evrica, 2011

8.2.1. Cmp de editare (de tip text)......................................

10. Elemente ale limbajului JavaScript........................................

Cerinele specifice sunt dictate de destinaia paginii. Un aspect

Figura 1. O structur de locaie web

Structura de navigare este folosit la stabilirea legturilor ntre

Astfel HTML este doar un limbaj de descriere, coninnd elemente ce

Dup scrierea codului i salvarea fiierului (de exemplu sub numele

Astfel pentru a crea un document html este suficient de a scrie codul

1.3. Editarea unui document HTML

Figura 1.1. Deschiderea documentului HTML pentru editare

Dac documentul este vizualizat cu ajutorul browser-ului Internet

<font face="arial">Linie scrisa cu caractere

-1,-2, etc. pentru a micora dimensiunea fontului cu 1, 2, etc.

Pereche de tag-uri <pre>...</pre> este folosit pentru a defini blocuri

ntr-o pagina Web pot fi inserate linii orizontale. Acestea sunt

2.2. Caractere speciale

Fraction one qtr

Fraction one half

2.3. Atributele tag-ului <body>

Rightmargin folosit la indentarea ntregului material din

Tag-urile <ul> i <li> pot avea atributul type care stabilete

3.2. Liste ordonate

Atribut value al tag-ului <li> stabilete valoare pentru elementul

Listele ordonate pot fi imbricate ntre ele sau cu liste neordonate.

Figura 4.1. Exeplu de organizare a unui site

Printr-o legatur plasat ntr-un fiier poate fi accesat un alt fiier,

- legtura <a href = "../../index.html">, plasat n orice

Ancorele pot fi definite i prin atributul id, atribut universal, adic

height - pentru nlime, i

width - pentru lime.

Acestea primesc ca valoare dimensiunea n pixeli a nlimii,

Figura 4.2. Imagine de lime 200 pixeli i nlime 250,

Atributul alt al tag-ului <img> comand apariia unei mici ferestre n

Iar atunci cnd browser-ul nu gsete fiierul va fi afiat:

Pentru a seta spaiu n jurul imaginii pot fi folosite atributele:

hspace spaiu pe orizontal;

vspace spaiu pe vertical.

Alinierea unei imagini se face prin intermediul atributului align care

5.1. Imagini de tip client-side image map (hri de imagini)

definirea zonelor dup conturul localitilor, iar un click pe localitate ar

alt. Iar, n cazul n care imaginea este prezent, la poziionarea cursorului

<area shape="rect" coords="0,0,200,100"

Figura 5.1. Calcularea coordonatelor zonelor n imaginea hart

6.1. Atributele tagului <table>

left aliniere la stnga; celelalte componente sunt aliniate n

Distana dintre dou celule vecine se definete cu ajutorul atributului

width pentru limea tabelului i

Height pentru nlimea acestuia.

Valorile acestor atribute pot fi:

numere ntregi pozitive reprezentnd limea, respectiv nlimea

numere ntregi ntre 1 i 100, urmate de semnul %, reprezentnd

void - elimin toate muchiile exterioare ale tabelului;

above - afieaz o muchie n partea superioara a cadrului

below - afiseaz o muchie n partea inferioar a cadrului

hsides - afieaz cte o muchie n partea superioar i inferioar

lhs - afieaz o muchie n partea din stnga a cadrului tabelului;

rhs - afiseaz o muchie n partea din dreapta a cadrului tabelului;

vsides - afieaz o muchie n partea din stnga i din dreapta a

box - afieaz o muchie pe toate laturile cadrului tabelului;