Proiectarea Paginilor WEB HTML CSS JavaScript PDF

FLORENTINA RODICA NICULESCU
PROIECTAREA PAGINILOR WEB

HTML, CSS, JavaScript
Descrierea CIP a Bibliotecii Naionale a Romniei
NICULESCU, FLORENTINA RODICA
Proiectarea paginilor Web HTML, CSS, JavaScript . / Florentina
Rodica Niculescu. Bucureti, Editura Fundaiei Romnia de Mine, 2007
Bibliog.
ISBN: 978-973-725-822-9
004.738.52
004.43 HTML
004.43 CSS
004.43 JAVASCRIPT
004.272.23
Editura Fundaiei Romnia de Mine, 2007

UNIVERSITATEA SPIRU HARET
FLORENTINA RODICA NICULESCU
PROIECTAREA PAGINILOR WEB

HTML, CSS, JavaScript
EDITURA FUNDAIEI ROMNIA DE MINE

Bucureti, 2007
CUPRINS
Prefa 9
Partea I
HTML
1. Spaiul World Wide Web...................................................................................... 13
1.1. Introducere n realizarea unui site ................................................................. 15
1.2. Protocoale i adrese URL .............................................................................. 16
1.3. Crearea unui site gratuit ................................................................................ 17
1.4. Crearea paginilor Web .................................................................................. 18
2. HTML noiuni de baz....................................................................................... 20

2.1. Elemente standard ale unei pagini Web ........................................................ 20
2.2. Titluri pentru pagini web............................................................................... 22
2.3. Paragrafe i linii ........................................................................................... 23
2.4. Elementul <PRE>......................................................................................... 25
2.5. Linii orizontale .............................................................................................. 28
3. Stiluri de text.......................................................................................................... 29
3.1. Stiluri fizice de text ....................................................................................... 29
3.2. Stiluri logice de text ...................................................................................... 32
3.3. Fonturi ........................................................................................................... 36
4. Liste ....................................................................................................................... 39
4.1. Liste ordonate (Ordered Lists) ...................................................................... 39
4.2. Liste neordonate (Unordered Lists) .............................................................. 41
4.2.1. Atributele elementului LI .................................................................... 44
4.3. Liste de definiii (Definition Lists) ................................................................ 45
5. Tabele ..................................................................................................................... 47
5.1. Generaliti .................................................................................................... 47
5.2. Atributele etichetei <TABLE>...................................................................... 48
5.2.1. Elementul TH ...................................................................................... 55
5.2.2. Elementul CAPTION .......................................................................... 55
5.3. Atributele elementului TR............................................................................. 56
5.4. Atributele elementelor TD i TH.................................................................. 58
5.5. Gruparea liniilor i coloanelor unui tabel...................................................... 62
5.5.1. Gruparea liniilor .................................................................................. 62
5.5.2. Gruparea coloanelor ............................................................................ 64
5
6. Imagini.................................................................................................................... 66
6.1. Introducerea imaginilor n paginile Web....................................................... 68
6.2. Atributele Elementului IMG ......................................................................... 68
7. Legturi (Link-uri)................................................................................................ 75
7.1. Elementul A.................................................................................................. 75
7.2. Legturi ctre alte pagini Web ...................................................................... 77
7.3. Legturi cu imagini ....................................................................................... 78
7.4. Legturi cu adrese URL relative ................................................................... 80
7.5. Legturi ctre informaii non Web ............................................................... 82
7.6. Legturi ctre fiiere non HTML ................................................................. 83
7.7. Legturi interne n cadrul unei pagini ........................................................... 84
7.8. Trimiterea automat a unui e-mail................................................................. 88
7.9. Culorile legturilor ........................................................................................ 89
8. Elementele de structur: HTML, HEAD i BODY ............................................ 90

8.1. Blocul de antet <HEAD></HEAD> ......................................................... 90
8.1.1. Elementul TITLE ................................................................................ 90
8.1.2. Elementul BASE ............................................................................... 91
8.2.3. Elementul META ............................................................................... 92
8.2. Blocul de corp <BODY></BODY>......................................................... 98
8.3. Blocul de comentarii ..................................................................................... 100
8.4. Blocul de centrare.......................................................................................... 100
9. Cadre ...................................................................................................................... 102

9.1. Bazele organizrii cadrelor............................................................................ 102
9.2. Elementul FRAMESET................................................................................. 105
9.3. Elementul FRAME........................................................................................ 106
9.4. Cadre destinaie ............................................................................................. 108
9.5. Cadre interioare ............................................................................................. 110
10. Formulare............................................................................................................. 112

10.1. Elementul FORM ........................................................................................ 114
10.2. Transmiterea i citirea datelor ..................................................................... 116
10.3. Elementul INPUT........................................................................................ 118
10.4. Elementul TEXTAREA .............................................................................. 127
10.5. Elementul SELECT..................................................................................... 128
11. Hri de imagine .................................................................................................. 131

11.1. Definirea hrilor imagine pe server............................................................ 131
11.2. Definirea unei hri imagine la client .......................................................... 132
11.3. Programul MAP THIS................................................................................. 136
12. Faciliti suplimentare Multimedia 142

12.1. Multipurpose Internet Mail Extensions (MIME) 142
12.2. Aplicaii Plug-in i ActiveX ... 143
12.2.1. Plug-in programe de completare 143
12.2.2. ActiveX . 144
12.3. Elemente OBJECT i PARAM ... 145
12.4. Elementul MARQUEE 150
6
Partea a II-a
CSS
13. CSS-Cascading Style Sheets (Foi de stil n cascad) ........................................ 157
13.1. Introducere n modelele de stiluri................................................................ 157
13.2. Stiluri interne (in-line)................................................................................. 157
13.3. Foi de stil n pagin ..................................................................................... 159
13.4. Foi de stil externe ........................................................................................ 162
13.5. Stiluri n cascad ......................................................................................... 163
13.6. Stiluri pentru diferii selectori ..................................................................... 165
13.6.1. Selectorul ID .................................................................................... 165
13.6.2. Selectorul CLASS ............................................................................. 166
13.6.3. Pseudo-clase...................................................................................... 168
13.6.4. Pseudo-element ................................................................................ 170
13.7. Elementele DIV i SPAM ........................................................................... 171
14. Clase de proprieti n CSS ................................................................................ 173

14.1. Casete n CSS .............................................................................................. 173
14.2. Fonturi n CSS............................................................................................. 174
14.3. Proprieti pentru TEXT.............................................................................. 177
14.4. Proprieti pentru padding........................................................................... 180
14.5. Proprieti pentru bordur ........................................................................... 182
14.6. Proprieti pentru partea margin......................................................................... 185
14.7. Proprieti de culoare pentru casete.................................................................... 186
15. Poziionarea elementelor n pagin n CSS ....................................................... 193

15.1. Arborele unei pagini.................................................................................... 194
15.2. Proprietatea Display .................................................................................... 197
15.3. Elemente flotante......................................................................................... 199
15.4. Elemente poziionate ................................................................................... 201
15.5. Proprietatea z-index..................................................................................... 205
Partea III
JavaScript
16. JavaScript Elemente de baz........................................................................... 209

16.1. Introducere n JavaScript............................................................................. 209
16.2. Primul script n JavaScript .......................................................................... 212
16.3. Tipuri de date i variabile............................................................................ 216
16.3.1. Tipuri de date .................................................................................... 216
16.3.2. Variabile............................................................................................ 217
16.4. Expresii i Operatori.................................................................................... 220
16.5. Metoda document.write() ............................................................................ 228
17. Instruciuni i Funcii n JavaScript .................................................................. 230

17.1. Instruciuni .................................................................................................. 230
17.1.1. Instruciuni de decizie ....................................................................... 230
17.1.2. Instruciuni de ciclare........................................................................ 238
7
17.2. Funcii n Java Script................................................................................... 245
17.2.1. Definirea i apelarea unei funcii ...................................................... 245
17.2.2. Domeniul de valabilitate a variabilelor ............................................. 247
17.2.3. Parametri ........................................................................................... 250
17.2.4. Funcii predefinite ............................................................................. 251
17.2.5. Recursivitate...................................................................................... 252
18. Obiecte.................................................................................................................. 253

18.1. Obiecte create de utilizator.......................................................................... 253
18.2. Obiecte intrinseci......................................................................................... 262
18.2.1. Obiectul Math ....................................................................................... 262
18.2.2. Obiectul String............................................................................... 264
18.2.3. Obiectul Array ............................................................................... 269
19. Interaciune JavaScript HTML ...................................................................... 276

19.1. Legtura ntre JavaScript i HTML............................................................. 277
19.2. Funciile setTimeout() si clearTimeout().................................................... 278
19.3. Elementul <FORM> n JavaScript .............................................................. 281
19.3.1. Validarea datelor ............................................................................... 282
19.3.2. Obiectele din Formular ..................................................................... 283
19.3.3. Utilizarea evenimentului onchange................................................... 284
19.3.4. Evidenierea seleciei csuelor de validare, utiliznd JavaScript ..... 287
19.3.5. Listele de opiuni schimbate dinamic cu ajutorul butoanelor
radio, folosind JavaScript .................................................................. 288
19.3.6. Trimiterea unui formular, utiliznd evenimentul onsubmit............... 290
19.3.7. Activarea, Dezactivarea, Citirea unor elemente realizate cu
funcii JavaScript................................................................................ 291
19.4. Imagini n JavaScript................................................................................... 293
19.4.1. Evenimentele onclick i ondblclick ................................................... 394
19.4.2. Evenimentul onmousemove............................................................... 296
19.4.3. Evenimentele onmouseover si onmouseout....................................... 297
19.4.5. Realizarea unei animaii .................................................................... 298
20. Elemente avansate JavaScript............................................................................ 300

20.1. Legtura ntre HTML, JavaScript i CSS.................................................... 300
20.2. Obiectul WINDOW .................................................................................... 304
20.2.1. Deschiderea i nchiderea unei ferestre ............................................. 305
20.2.2. Activarea i dezactivarea unei ferestre.............................................. 307
20.2.3. Metoda scrollTo().............................................................................. 309
20.3. Obiectul DOCUMENT ............................................................................... 310
20.3.1. Proprietatea images a obiectului document....................................... 312
20.3.2. Proprieti de culoare ale obiectului document ................................. 312
Anexe
ANEXA A Culori.................................................................................................... 317
ANEXA B Caractere n HTML............................................................................... 321
ANEXA C CSS Specificaii de stil......................................................................... 325
Bibliografie selectiv................................................................................................... 331
8
Prefa
Cartea Proiectarea paginilor Web HTML, CSS, JavaScript i propune

s fie o lucrare de baz pentru nsuirea limbajelor de marcare HTML, de stiluri
CSS i de scriptare JavaScript, necesare realizrii unor pagini Web atractive i
interactive.
Proiectat ca suport la cursurile de Tehnologii Web i de Programare Web i
multimedia, predate de autoare la Facultatea de Matematic Informatic din
cadrul Universitii Spiru Haret, cartea ofer coduri surs i capturi de ecran
pentru un numr foarte mare de exemple descriptive.
Cartea indic, de asemenea, modul n care proiectantul unui site poate
integra HTML, CSS i JavaScript pentru a realiza pagini web profesioniste.
Cartea este structurat n trei pri i o anex.
n prima parte este tratat limbajul de marcare HTML, care este un acronim
pentru HyperText Markup Language. HTML constituie limbajul de baz, care ne
permite s realizm propriile documente multimedia atractive n spaiul
World Wide Web, cu ajutorul browserelor Internet Explorer, Netscape Navigator,
Mozzila Firefox, Opera etc.
Partea a doua este dedicat tratrii stilurilor. CSS este un acronim pentru
Cascading Style Sheets (Foi de stil n cascad) i constituie un instrument
modern, care ajut proiectanii de site-uri s i mbunteasc aspectul
paginilor.
CSS pune la dispoziie peste 100 de proprieti, fiecare avnd un set de
valori care se pot stabili elementelor HTML, n vederea transformrii
documentelor Web n unele profesioniste, care nu ar putea fi realizate numai cu
ajutorul atributelor elementelor HTML.
Partea a treia trateaz limbajul JavaScript. HTML i CSS ne ajut s
proiectm pagini atractive, dar statice. Pentru a crea pagini sofisticate, interactive
(dinamice), se pot utiliza diferite programe de scriptare, ca de exemplu JavaScript,
realizat de firmele Netscape i Sun.
JavaScript este un limbaj de scriptare, interpretat i orientat pe obiecte, care,
utilizat mpreun cu HTML i CSS, permite proiectarea de pagini Web dinamice.
Cu toate c este un limbaj mult mai puternic dect HTML, introducnd n
pagini componenta dinamic, JavaScript are i unele limite, de exemplu nu poate
scrie i citi fiiere, nu poate scrie aplicaii pe parte de server etc.
9
Anexa cuprinde trei tabele: culorile, entitile folosite n web i, respectiv,
proprietile CSS i valorile lor posibile.
Aceast carte se adreseaz, n primul rnd, studenilor de la specializrile de
informatic din Facultile de Matematic Informatic din ar.
Cartea se adreseaz, de asemenea, tuturor celor interesai de crearea unor
site-uri Web atractive i interactive, utiliznd resurse multimedia.
mi exprim, anticipat, gratitudinea pentru toate sugestiile pe care le voi primi
din partea cititorilor pe adresa de e-mail: rodicaniculescu@gmail.com
10
PARTEA I
HTML
11
12
1. Spaiul World Wide Web
n acest capitol se introduc principalele concepte i tehnologii de proiectare a

paginilor Web. Pornind de la descrierea modului n care referinele pot contribui la
organizarea informaiei se continu cu prezentarea conceptelor de multimedia, de
protocol de transfer de informaii, de programe de navigare, de adrese web i de
realizare de site-uri.
Tehnologia de baz a spaiului World Wide Web a fost creat de un institut
de cercetri pentru fizica energiilor nalte din Elveia, CERN. Tim Berners-Lee i
echipa sa de la CERN a creat n 1994 un Consoriu Web, care se ocupa cu elaborarea
i dezvoltarea standardelor pentru Web. Membrii consoriului, atunci cnd au
nceput s creeze un mecanism pentru identificarea unic a informaiei din spaiul de
date, au neles necesitatea elaborrii unei scheme de legturi informaionale Web,
care s includ o mare varietate de servicii internet, rezultnd astfel adresele URL
(Uniform Resource Locator Descriptor Uniform de Resurse). Pentru a nelege
World Wide Web trebuie s nelegem modul n care este organizat informaia n
mediile tiprite.
Medii liniare multimedia

Transmiterea informaiei la distan se realizeaz cu anumite tehnologii n
funcie de specificul datelor, ca de exemplu: tiprituri (cri, ziare etc.), servicii
potale, telefonie, radioul i televiziunea i, mai nou, internetul.
Tehnologiile multimedia pot fi definite ca o totalitate de modaliti de creare,
stocare, regsire, exploatare i difuzare a documentelor sau aplicaiilor compuse din
mai multe elemente, ca de exemplu: text, grafic, imagini, animaie, sunet etc.
Componenta media a cuvntului multimedia specific o form de interaciune
uman n modelarea i procesarea computerizat, iar componenta multi semnific
prezena simultan n acelai document sau aplicaie a mai multor tipuri de media.
O aplicaie multimedia trebuie s conin cel puin o media continu (cu
durat msurabil de execuie, precum: sunet, film, animaie etc. ) i cel puin o
media discret (fr durat determinat de execuie: text, fotografii, grafic etc.).
Mediile liniare sunt acele documente n care informaia are o organizare
liniar: crile sunt citite de la nceputul crii i pn la sfritul ei. La fel i
vizionarea unui film se face liniar. Dar, cu toat organizarea liniar, se poate sri de
la o pagin a crii la alta sau se poate crea o strategie de navigare prin carte.
13
Hipermedii i hipertext
Un hipermediu sau hipertext este un document alctuit din text, care conine
informaia propriu-zis i hiperlegturi ctre alte seciuni sau alte documente situate
pe internet. Hipertextul poate fi considerat un mediu non-liniar, n care trebuie
urmate anumite legturi ntre noduri pentru a accesa informaia. Nodurile sunt
identificate, n mod unic, prin adres. De exemplu, dac dorim s obinem o anumit
adres sau capitol dintr-o carte, n loc s facem acest lucru fizic se poate atinge o
anumit zon a paginii ca s obinem informaia dorit.
Dup 1996 putem spune c s-a produs o explozie a spaiului web,
majoritatea instituiilor, firmelor, organizaiilor dorind s aib propriile site-uri web.
Pentru a reduce diferenele dintre transmiterea prin televiziune, care are o
infrastructur bazat pe unde sau cablu, cu o capacitate foarte mare de transfer de
date, i cele ale internetului, n care comunicarea era realizat prin telefonie (dial-up),
s-au elaborat noi tehnologii de transfer a datelor pe spaiul www, bazate pe fibr
optic sau comunicaii prin satelit. Numrul tot mai mare de utilizatori i volumul
mare de date transferate prin internet a dus la gsirea de soluii hard i soft de
compresie a datelor. Compresia datelor a dus la deteriorarea calitii acestora. n
urma unor cercetri s-au gsit algoritmi de compresie a datelor multimedia care s
nlture anumite frecvene fr a periclita acurateea auditiv i vizual. De exemplu,
standardele MPEG (Motion Picture Experts Group) sau AVI (Audio-Video
Interleaved) folosesc stocarea compresat cu pierderea unor date audio sau video.
Utilizatorii de site-uri trebuie s aib instalat un player pentru a reda obiectele
multimedia ncapsulate n site. De asemenea, n scopul accesului la obiectele de pe
Web s-a creat soft necesar pentru compresia diferitelor tipuri de media, recunoscute
de player sau de programele navigatoare Web, astfel pentru:
Text
HTML (HyperText Markup Language)
XHTML (Extensible HyperText Markup Language)
XML (Extensible Markup Language)
WML (Wireless Markup Language) etc.
Imagine
BMP (BitMap Picture)
WBMP (Wireless BitMap Picture)
EPS (Encapsulated Post Script)
GIF (Graphics Interchange Format)
JPEG (Joint Picture Experts Group)
PNG (Portable Network Graphics)
SVG (Scalable Vector Graphics)
Sunet
WMA (Windows Media Audio)
WAV (Wave Format)
MIDI (Musical Instrument Digital Interface)
MP3 (MPEG-1 Layer 3) etc.
14
Animaie / Sunet
AVI (Audio Video Interleaved)
MPEG (Motion Picture Experts Group)
WMV (Windows Media Video)
QuickTime, Flash etc.
Prelucrri imagine Photoshop
Prelucrri pe server PHP
Lumi 3D X3D (Extensible 3D)
Animaie / validare date JavaScript
Stiluri CSS (Cascade Style Sheets)
Exist dou tipuri de codificare a informaiei grafice:

Rasterizate (bmp, wbmp, jpeg, gif), constituite din matrice de pixeli;
Vectoriale (svg, eps), alctuite din elemente geometrice: linii, curbe,
suprafee etc.
Imaginile vectoriale au avantajul de a putea fi redimensionate fr pierderea
calitii sau modificarea semnificativ a dimensiunii fiierului.
1.1. Introducere n realizarea unui site

Pentru a crea un site, o persoan fizic sau juridic (firm) trebuie s apeleze
la o firm specializat numit provider. Serviciile oferite de provider se numesc Web
Hosting.
Provider-ul deine calculatoare foarte performante numite servere, care sunt
cuplate cu calculatoare din ntreaga lume. Acestea pun la dispoziia persoanei
solicitante:
spaiul pe hardul server-ului de cel puin 10 Mb;
o adres de internet, ca de exemplu: www.adresa-utilz.ro
n spaiul alocat pe serverul provider-ului, persoana introduce fiiere, docu-
mente multimedia scrise n HTML (HyperText Markup Language), dar i alte docu-
mente care provin din alte tipuri de servicii de publicare a informaiilor din internet.
Pentru a vizita o pagin Web, trebuie s existe pe calculatorul vizitatorului
unul sau mai multe programe specializate numite navigatoare sau browser-e,
precum: Netscape Navigator realizat de Netscape Communications, n 1995, odat
cu lansarea mediului de operare Windows 95, i Internet Explorer realizat de
Microsoft, prima versiune a sa fiind inclus n pachetul Windows 95 Plus Pack. La
nceputul lansrii, Internet Explorer era inferior browser-ului Netscape, dar au urmat
alte versiuni cu mbuntiri care l-au fcut s devin cel mai utilizat browser. Azi
exist programe de navigare, ca de exemplu, Opera, Mozilla Firefox, fiecare din ele
avnd faciliti suplimentare. n aceast carte, exemplele au fost fcute cu browser-
ul Internet Explorer.
Funciile principale ale browser-ului sunt:
permite vizitatorilor paginilor Web s introduc adresa URL a paginilor
respective;
15
transmite server-ului adresa i acesta i furnizeaz fiierul HTML care
conine codul paginii;
interpreteaz comenzile coninute n codul HTML i le afieaz.
Obinuim s numim pagin, coninutul afiat al unui fiier HTML.
Site-ul este un ansamblu format din: spaiul pe hard, fiierele care sunt
depuse pe acest spaiu i adres. Fiierele dintr-un site nu sunt numai fiiere HTML.
Pot exista toate tipurile de fiiere care se pot gsi pe spaiul Web i care au fost
enumerate mai sus (imagini, animaie, video, sunet etc). Fiierele de pe site pot fi
grupate, ca i cele de pe hardul calculatorului, n foldere.
Cnd solicitm browser-ului ncrcarea unui fiier de pe un site, acesta va
solicita server-ului, pe care se afla alocat site-ul, furnizarea respectivului fiier.
1.2. Protocoale i adrese URL

Pentru ca dou calculatoare s poat comunica ntre ele, trebuie s existe
programe care s execute transferul. Definim un protocol, ansamblul de reguli ce
trebuie respectate n transferul de informaii de la server la calculator, i invers.
Exist mai multe protocoale care se utilizeaz n transferul de informaii multimedia.
Cele mai folosite sunt:
HTTP (HyperText Transfer Protocol) este destinat exclusiv transferului
de informaii pe Web, adic transferului de fiiere de la server la
calculatorul local pentru browser.
RTP (RealTime Transport Protocol) este folosit n transmiterea n timp
real a informaiilor multimedia, oferind servicii de transfer a mediilor
audio i video interactive. RTP ofer servicii de multiplicare, suportnd
transferul datelor la destinaii multiple (multicast). Acest protocol este
folosit mai ales de aplicaiile de video-conferine i pentru transmiterea pe
Web a unor programe radio i audio-video.
FTP (File Transfer Protocol) este destinat transferului de fiiere de la
server la calculatorul local (download) i invers, de la calculator la server
(upload). n aceste operaii de transfer nu intervine browser-ul, ci
programe cunoscute sub numele de programe ftp. Aceste programe pot
fi download-ate de pe internet i, n marea majoritate, sunt gratuite. Ele se
pot identifica cu GOOGLE, folosind cuvntul cheie FTP. n aceast
carte se va folosi protocolul ftp, WS-FTP95, care se poate cuta pe
GOOGLE cu acest cuvnt cheie, sau poate fi download-at de la adresa:
www.uottawa.ca/help/ws_ftpe.html.
Adresarea resurselor Web

Informaiile sunt stocate n spaiul Web n fragmente, numite noduri,
interconectate ntre ele. Nodurile sunt identificate prin adrese, termenul tehnic fiind
de URL Uniform Resource Locator (Descriptor Uniform de Resurse ).
O adres URL este un ir de caractere prin intermediul cruia se acceseaz
un fiier al unui site i are sintaxa: protocol://domeniu/cale
16
unde:
protocol desemneaz protocolul utilizat (HTTP, RTP, FTP)
domeniu este adresa simbolic a unui calculator (de exemplu, adresa
server-ului web)
calea reprezint irul de directoare ctre resursa dorit.
Protocolul HTTP din adres este automat completat de browser, deci nu este
obligatoriu de tastat. Adresa site-ului este i ea o adres URL, i anume a fiierului
rdcin (home page). Acest fiier este inclus n folder-ul rdcin a site-ului i,
pentru majoritatea server-elor, acesta este denumit index.html.
De exemplu, dac tastm
http://www.adresa-utilizator.ro
sau numai
www.adresa-utilizator.ro
la un browser, se solicit acestuia s ncarce i s afieze fiierul rdcin al
site-ului. Astfel, se poate scrie i http://www.adresa-utilizator.ro/index.htm. S
presupunem c site-ul de la adresa www.adresa-utilizator.ro conine dou foldere,
numite texte i imagini, iar folderul texte are fiierele curs1.html, curs2.html
Pentru a accesa unul din aceste fiiere, vom scrie adresa URL www.adresa-
utilizator.ro/texte/curs1.htm
OBSERVAIE!
URL-urile nu pot conine spaii. Ca alternativ, adresa URL permite ca unele
caractere s fie specificate prin simbolul % urmat de echivalentul hexazecimal al
caracterului respectiv. Dac dorim, de exemplu, s apar caracterul spaiu, care are codul
32 zecimal i 20 hexazecimal (2x16+0=32) vom scrie www.adresa%20utilizator.ro
n tabelul de mai jos se specific formatul URL a unor caractere uzuale care
se pot ntlni n adresele URL:
Caracter Cod zecimal Cod hexazecimal Codificare URL

Spaiu 32 20 %20
Tab 9 09 %09
Enter 10 0A %0A
Procent 37 25 %25
End of line 13 0D %0D
1.3. Crearea unui site gratuit

Firmele specializate (provider-ii) pun la dispoziia utilizatorilor site-uri
contra cost, costuri care variaz n funcie de spaiul acordat pe server i de serviciile
furnizate. Exist i firme care ofer site-uri gratuite, dar n acest caz, utilizatorul site-
ului, ct i toi vizitatorii trebuie s accepte publicitatea. Pentru a obine un site
gratuit, solicitantul trebuie s aibe o adres de e-mail, care poate fi obinut tot gratuit
la Yahoo, Hotmail, Gmail etc. Dac se acceseaz site-ul de la adresele:
www.freewebsites.com
www.b0x.com
17
se va solicita clientului s completeze un formular cu numele dorit al site-
ului, adresa de e-mail (una din cele pe care le avei), o parol etc. Dac datele au fost
completate corect se poate obine un site la adresa
www.nume.freewebsites.com
www.nume.b0x.com
La adresa de e-mail specificat n formular se va primi un mesaj prin care se
cere s confirmm nscrierea, scriind parola dat i numele de utilizator (USER ID) i
un cod care a fost dat dup completarea formularului.
S presupunem c n urma acestei cereri s-a obinut un site gratuit:
adresa: www.testweb.freewebsites.com
parola: pagweb
User ID: ana
Pentru a putea fi populat un site, trebuie transferate fiiere. Transferul

fiierelor de la calculator la server i invers se poate face (aa cum s-a menionat mai
sus) cu protocolul FTP. Unul din protocoalele FTP, utilizate i n aceast carte, este
WS_FTP95, care se descarc de pe Internet.
Dup ce a fost download-at un protocol ftp, apare o caset de dialog n care
trebuie introduse datele de acces la site:
Host name: test.web.freewebsites.com
Host type: Automatic detect
User ID: ana
Parola: ****** (pagweb)
Dac datele au fost introduse corect, atunci programul afieaz o fereastr cu 2

panel-uri. Panel-ul drept conine fiierele din site i panelul stng conine fiierele din
directorul curent al calculatorului local. Transferul fiierelor din folder i invers se face
cu dublu click pe fiier sau prin Drag&Drop. Se pot crea directoare cu MkDir, se pot
terge fiiere cu Delete i se poate schimba unitatea curent de pe calculator. Pentru un
transfer mai riguros se apas butonul ASCII din fereastra afiat.
1.4. Crearea paginilor Web

Limbajul HTML se va prezenta n capitolele urmtoare. Pentru a scrie fiiere
HTML (pagini web), urmm paii:
cu My Computer sau Explorer ne situm n folderul unde dorim s se
gseasc fiierele
cu ajutorul menu-ului contextual (click cu butonul drept al mouse-ului)
alegem New -> Text Document. Programul NOTEPAD va crea un fiier
cu extensia .txt
ne poziionm pe fiier i din menu-ul contextual alegem comanda
RENAME, pentru a schimba numele fiierului i extensia n .html sau
.htm. Extensia .htm este asociat browser-ului Internet Explorer, i deci
fiierul va avea icon-ul browser-ului
18
un dublu click pe fiier are ca efect lansarea browser-ului, care va afia
fiierul (coninutul va fi vid)
din menu-ul principal din Internet Explorer, View->Source, NOTEPAD
va ncrca codul HTML al fiierului (coninutul va fi vid)
scriem un text la alegere, de exemplu se creeaz un site, se salveaz
fiierul
n fereastra browser-ului se apas butonul Refresh, prin care comandm
browser-ului s rencarce fiierul care a suferit modificri
se trece iar n NOTEPAD (View-Source) pentru a continua s scriem
fiierul HTML
OBSERVAIE!
Pentru a scrie codul unui fiier HTML, nu trebuie s fim conectai la
Internet.
Un fiier HTML poate conine comentarii pentru a-l face mai uor de
parcurs. Comentariile pot aprea oriunde n fiier i nu vor fi afiate de browser.
Sintaxa comentariilor n HTML este:



19
2. HTML noiuni de baz
n acest capitol se vor introduce noiunile de baz ale Limbajului de Marcare

Hipertext (Hypertext Markup Language HTML) Limbajul HTML conine un set
de coduri speciale care se insereaz ntr-un text, pentru a aduga informaii despre
formatare i legturi. HTML are la baz limbajul Generalizat Standard de Marcare
(Standard Generalized Markup Language SGML).
Prin convenie, toate informaiile HTML ncep cu o parantez unghiular
deschis, (<) i se termin cu o parantez unghiular nchis (>), de exemplu
<HTML>. Simbolul <> este cunoscut n literatura de specialitate sub numele de
tag (etichet) de control sau de marcaj. Marcajul comunic unui program de
navigare (interpretor sau browser) c fiierul scris este formatat n limbajul HTML
standard. n capitolul precedent s-au enumerat unele interpretoare HTML, precum
Internet Explorer al companiei Microsoft.
2.1. Elemente standard ale unei pagini Web

Dac un fiier cu extensia .html nu conine niciun marcaj HTML, browser-ul
folosit se strduiete s redea ct mai corect informaia.
S presupunem c am creat fiierul cerere.html, cu urmtorul coninut:
Domnule Decan
Subsemnata, Ionescu Ana, va rog sa-mi eliberati o adeverinta, din care sa
reiasa ca sunt studenta a facultii de Matematica-Informatica din Universitatea
Bucuresti.
Menionez ca aceasta adeverinta imi este necesara la R.A.T.B.
05-01-2007 Ana Ionescu
Fiierul va fi afiat de browser, ca n figura de mai jos.
20
Figura 2. 1. Fiierul cerere.html, fr marcaje
Se observ c ceea ce afieaz browser-ul nu seamn cu formatul dorit.

Dac n exemplul anterior se introduc marcaje HTML, se creeaz un
document HTML (o pagin web) standard. Aceste marcaje (etichete) introduse nu
sunt afiate de programele navigatoare.
Multe din etichetele HTML sunt elemente de sine stttoare, dar unele sunt
etichete perechi, avnd etichete de nceput i de sfrit. Controlul de nceput se
numete i control (eticheta, tag sau marcaj) de deschidere i se reprezint prin
<>, i cel de sfrit se numete control de nchidere i se reprezint prin
</>.
Structura de baz a unei pagini web este redat n figura de mai jos.
<HTML>
<HEAD>
</HEAD>
<BODY>
EXEMPLUL DE CREARE A UNEI PAGINI WEB
</BODY>
</HTML>
Figura 2. 2. Structura de baz a unei pagini web
21
2.2. Titluri pentru pagini web
Pentru ca o pagina web s arate mai relevant se poate da un titlu adecvat, cu
ajutorul etichetei pereche: <TITLE> coninut </TITLE>. Titlul apare pe bara de titlu
a browser-ului utilizat. Blocul de titlu apare n interiorul blocului de antet
<HEAD> </HEAD>.
Coninutul blocului de titlu va fi titlul paginii web respective i deci folosirea
lui va fi de folos pentru vizitatorii site-ului.
Introducnd n exemplul de mai sus un titlu, Internet Explorer va afia:
<HTML>
<HEAD>
<TITLE> PRIMA PAGINA </TITLE>
</HEAD>
<BODY>
EXEMPLUL DE CREARE A UNEI PAGINI WEB
</BODY>
</HTML>
Figura 2. 3. Tag-ul <TITLE>

OBSERVAII!
Dac unul din marcajele perechi nu este nchis, sau lipsete o parantez
unghiular la unul din marcaje, atunci programul de navigare nu nelege
marcajul i-l va afia.
Dac browser-ul afieaz toate controalele de formatare n loc s le
interpreteze se poate ca fiierul s aibe extensia .txt, nu .htm sau .html.
Din analiza exemplului de sus se observ c:

Elementele <> i </> sunt folosite pentru identificarea controalelor i
reprezint comenzi adresate browser-ului pentru a reda documentul.
O pagin web poate fi compus din mai multe blocuri.
Blocul exterior este cuprins ntre controalele <HTML></HTML> i
reprezint tot documentul HTML.
Blocul antet este cuprins ntre controalele <HEAD></HEAD>.
Opional, antetul poate conine un titlu pentru pagin, cuprins ntre
controalele <TITLE></TITLE>.
22
Blocul interior corp program poate conine text i /sau imagini i este
cuprins ntre controalele <BODY></BODY> .
ntre parantezele unghiulare <> sau </> i cuvintele cheie din interiorul lor
nu este permis spaiul (< HEAD > incorect).
HTML nu face distincie ntre majuscule i liter mic cu care se scriu etichetele.
2.3. Paragrafe i linii

Pentru a crea documente Web lizibile i utile se folosesc etichetele de trecere
la paragraf nou sau linie nou. Aceste etichete sunt <P> i <BR>.
Eticheta <P>
Pentru a specifica saltul la un nou paragraf se utilizeaz marcajul (tag-ul)
pereche <P> care are sintaxa:
<P atribute> coninut paragraf </P>
Atributul align
Paragrafele sunt aliniate implicit la stnga, aliniere care poate fi schimbat
utiliznd atributul align care poate lua una din valorile:
Left paragraful este aliniat la stnga (implicit)
Right paragraful este aliniat la dreapta
Center paragraful este aliniat la centru
Justify paragraful este aliniat la ambele capete
Pentru utilizarea acestui atribut se utilizeaz sintaxa:
<P align=valoare>
Ghilimelele sunt opionale n HTML, dar obligatorii n XHTML.
Exemplul de mai jos adaug cteva etichete <P> fiierului ex1_2.html, redat
n figura 2.1.
<HTML> <HEAD>
<TITLE> CERERE </TITLE>
</HEAD>
<P align=center>
Domnule Decan
<P> Subsemnata Ionescu Ana va rog sa-mi eliberati o adeverinta, din
care s reias ca sunt student a facultii de Matematica-Informatica din
Universitatea Bucuresti.
<P> 05-01-2007
<P align=right> Ana Ionescu
23
Figura 2. 4. Tag-ul <P>
Din analiza exemplului din figura 2.4 se observ:

Browser-ul ignor caracterele ENTER, TAB i spaiile multiple, doar
primul spaiu dintr-o serie va fi luat n consideraie.
Paragrafele sunt separate printr-o linie vid.
Sfritul de marcaj de paragraf </P> poate s lipseasc, un nou paragraf
fiind semnalat printr-un nou nceput de marcaj de paragraf <P>.
Un rnd al unui paragraf are limea ferestrei afiate de browser, n lipsa
altei comenzi.
Eticheta <BR>
Pentru a trece la o nou linie n HTML se folosete eticheta pereche <BR>
(break). Dac eticheta <P> are ca efect lansarea unei linii vide ntre paragrafe, n
cazul etichetei <BR> nu se las o linie vid ntre linii.
Elementul &nbsp
Dac nu se dorete trecerea unui cuvnt pe linia urmtoare (n cazul depirii
dimensiunii ferestrei browser-ului), se folosete elementul &nbsp (non-breaking
space). n cazul n care cuvntul dorit nu ncape pe o linie, se trece pe linia urmtoare
i cuvntul precedent.
n figura de mai jos este redat fiierul cerere.html, n care s-au utilizat
etichetele <P> , <BR> i elementul &nbsp.
<HTML>
<HEAD>
</HEAD>
<BODY>
<P align=center>
Domnule Decan
<P>
24
Subsemnata Ionescu Ana va rog sa-mi eliberati o adeverinta, din care sa
reiasa ca sunt studenta a facultii de Matematica-Informatica din
Universitatea Bucuresti. <BR>
Menionez ca aceasta adeverinta imi este necesara la R.A.T.B.<BR>
05-01-2007
<P align=right> Ana&nbspIonescu
</BODY>
</HTML>
Figura 2. 5. Tag-urile <P> i <BR>
2.4. Elementul <PRE>

Dac se dorete inserarea unui bloc preformatat, adic introducerea unui text
aa cum este scris n sursa HTML, se folosete marcajul pereche <PRE>, care poate
aciona asupra unui grup de linii i are sintaxa:
<PRE atribute></PRE>
Folosind eticheta <PRE> se obine formatarea dorit, dar materialul cuprins
n blocul <PRE></PRE> apare cu fontul de tip monospaiat. ntr-un font
monospaiat, fiecare liter are exact aceeai lime.
OBSERVAII!
Se pot folosi n interiorul blocului <PRE></PRE>, elemente de formatare
(B, I, U etc.), dar nu toate sunt suportate de browser.
Deoarece n interiorul etichetei <PRE> este permis folosirea altor marcaje,
caracterele speciale <,> trebuie convertite n entiti.
Spaiile sunt pstrate.
Etichetele HTML nu sunt ignorate de browser, ci interpretate.
Atributele etichetei <PRE> sunt:
width reprezint lungimea liniei i poate fi un numr ntreg pozitiv sau un
procent
25
cols determin dimensiunea pe orizontal (n caractere) a zonei vizibile; n
caz n care rndul va depi aceast mrime, apare o bar de derulare pe
orizontal.
wrap determin cum sunt tratate caracterele CR/LF (ntreruperi de rnd).
Valorile posibile sunt:
off doar utilizatorul poate insera CR/LF. Aceste caractere vor fi transmise
n forma %OD%OA%.
soft sau virtual (valoarea prestabilit) textul este trecut vizual (i automat)
de pe un rnd pe altul n interiorul elementului, dar nu vor fi transmise dect
caracterele CR/LF introduse de utilizator.
Hard sau physical textul este trecut vizual (i automat) de pe un rnd pe
altul i sunt inserate automat secvenele CR/LF.
Pentru ca browser-ul s afieze fiierul cerere.html aa cum a fost scris, s-a
introdus eticheta <PRE> n exemplul din figura 2.4.
<HTML>
<HEAD>
</HEAD>
<BODY>
<P align=center>
Domnule Decan
</P>
<PRE>
Subsemnata Ionescu Ana va rog sa-mi eliberati o adeverinta, din care sa reiasa
ca sunt studenta a facultii de Matematica-Informatica din Universitatea Bucuresti.
05-01-2007 Ana Ionescu

</PRE> </BODY> </HTML>
Figura 5. 1 Figura 2. 6. Tag-ul <PRE> n fiierul cerere.html
26
Se observ din figura de mai sus fontul monospaiat folosit de PRE, n
comparaie cu fontul normal folosit de <P> (la scrierea titlului)
Etichetele <NOBR> i <WBR>
Etichetele <NOBR> i <WBR> se folosesc la aranjarea textului i sunt
asemntoare cu tag-ul <BR>, de salt la linie nou.
Eticheta <NOBR>
Dac se dorete ca un text s fie scris pe un singur rnd, indiferent de
dimensiunea ferestrei, acesta se introduce n blocul <NOBR></NOBR> (nobreak). La
ntlnirea acestei etichete browser-ul dezactiveaz modul automat de trecere pe linia
urmtoare. Dac textul este mai mare dect fereastra, n cazul folosirii tag-ului <NOBR>,
apare o bar de derulare orizontal, care permite vizionarea ntregului rnd.
Eticheta <WBR>
Pentru a introduce o linie nou, chiar dac linia se afl n interiorul lui
NOBR, se folosete eticheta nepereche <WBR> (wrap break).
n exemplul de mai jos se ilustreaz folosirea celor dou etichete.
<HTML> <HEAD> <TITLE> NOBR i WBR </TITLE> </HEAD>
<BODY>
<P> <NOBR>
n aceast carte se prezint limbajele <WBR> HTML (HyperText Markup
Language), XHTML (Extensible HyperText Markup Language), CSS
(Cascade Style Sheets), JAVASCIPT </NOBR> </P>
</BODY> </HTML>
Figura 2. 7. Utilizarea elementelor NOBR i WBR
27
2.5. Linii orizontale
Pentru o mai bun organizare vizual a unui document, se folosete eticheta
de rigl orizontal, <HR atribute>. Aceast etichet poate fi plasat oriunde n
document i are ca efect producerea unei linii orizontale pe toat limea paginii,
dac nu exist atribute.
Atributele elementului HR sunt:
align alinierea liniei poate avea valorile: left (implicit), right i
center
width lungimea liniei care se poate exprima:
printr-un numr ntreg pozitiv
printr-un procent, care este o fraciune din lungimea paginii i este un
numr urmat de %, valoarea prestabilit fiind de 100%
size reprezint grosimea liniei n pixeli, valoarea implicit fiind 2
nonshade nseamn c linia este neumbrit, n lipsa acestui atribut linia
este de tip 3D i umbrit
color indic culoarea dorit pentru linie. Valoarea implicit este negru
(black)
Un exemplul de utilizare a tag-ului HR este dat de urmtorul cod:
<HTML> <HEAD> <TITLE> Linii orizontale </TITLE> </HEAD>
<BODY> Acesta este o linie fr opiuni
<HR>
Acesta este o linie de lungime 500px, grosime 4px, culoare albast i aliniata
centru
<HR align=center width=500 size=4 color=blue>
Acesta este o linie de lungime 50% din pagin, grosime 3px, culoare roie i
aliniat la dreapta
<HR align=right width=50% color=red size=3 noshade>
</BODY> </HTML>
Figura 2. 8. Utilizarea liniei orizontale
28
3. Stiluri de text
n capitolul precedent s-au prezentat elementele principale ale redactrii unui

document HTML. n acest capitol se vor prezenta unele elemente legate de prezentarea
unui text. Utiliznd diferite stiluri fizice (caractere aldine, cursive, subliniate etc.), se
pot evidenia anumite cuvinte, fraze sau alte genuri de informaii.
Limbajul HTML permite s utilizm stiluri logice de text pentru a preciza o
destinaie specific pentru text. De exemplu, stiluri logice pot fi considerate i
elementele P i PRE, introduse n capitolul precedent.
n cazul n care textul din corpul programului nu are specificat un stil, atunci
textul este afiat cu ajutorul parametrilor predefinii browser-ului.
3.1. Stiluri fizice de text

Multe din stilurile fizice introduse mai jos nu mai sunt utilizate frecvent,
pentru folosirea anumitor stiluri se recomand utilizarea CSS (Cascading Sheets of
Styles foi n cascad).
Stilurile de text pot fi imbricate, adic un marcaj pereche de stil poate fi creat
i folosit n alt marcaj pereche de stil.
Cele mai frecvente stiluri fizice utilizate sunt:
I (cursiv)
B (aldin, ngroat)
TT (monospaiat)
U sau INS (subliniat)
S sau STRIKE
BIG
SMALL
SUB (la indice)
SUP (la putere)
n continuare vor fi descrise succint aceste stiluri fizice de text.
Stilul I
Pentru a afia un text cu stilul italic sau cursive (nclinat), acesta se scrie ntre
etichetele <I> i </I>
Stilul B
Pentru a afia un text cu stilul aldin sau bold (ngroat) acesta se scrie ntre
etichetele <B> i </B>.
29
Stilul TT
Textul monospaiat sau teleimprimator (teletype) este afiat cu ajutorul
tag-urilor <TT> i </TT> . Amintim c ntr-un stil monospaiat (de exemplu: courier
new) fiecare liter ocup aceeai lime chiar dac este mai ngust (de exemplu: i
comparativ cu m). Stilul logic <PRE> </PRE> afieaz textul cu font
monospaiat, dar acesta din urm pstreaz i spaiile dintre cuvinte i linii.
Stilul U
Textul scris ntre tagurile <U> i </U> va aprea subliniat (underline).
Marcajul <U> este mai puin utilizat deoarece unele versiuni ale navigatorului
Netscape ignor marcajul <U>. n documentele HTML care conin legturi ctre alte
documente, acestea apar subliniat, ceea ce s-ar putea confunda cu un text subliniat, mai
ales pentru cei care lucreaz pe monitoare alb negru, sau pentru cei care utilizeaz
nuane de gri.
Stilul INS
Stilul INS are rolul de a comanda browser-ului ca textul scris ntre <INS> i
</INS> s fie subliniat, pentru a evidenia c a fost ceva nou introdus.
Exemplu de utilizare a acestor stiluri:
<HTML><HEAD> </HEAD>
<BODY>
<B> <TT> <U> Teorema.</U></B> </TT>
<I> ntr-un triunghi <INS>dreptunghic <INS> ipotenuza la patrat este
egala cu suma patratelor catetelor </I>
</BODY>
</HTML>
Figura 3. 1. Stilurile: B, I, U, INS

Stilul S i STRIKE
Un text cuprins ntre etichetele <S> i </S> sau <STRIKE> i </STRIKE>
este afiat tiat cu o linie (barat), ca n exemplul de mai jos:
<HTML> <HEAD> </HEAD>
<BODY>
<S> Text barat </S> <BR>
<STRIKE> Alt Text barat </STRIKE>
30
</BODY>
</HTML>
Figura 3. 2. Stilul S i Strike

Stilul Big
Acest stil este folosit pentru a comanda browser-ului ca n textul cuprins ntre
tagurile <BIG> i </BIG> s fie scris mai mare dect textul curent.
Stilul SMALL
Acest stil este folosit pentru a comanda browser-ului ca textul cuprins ntre
tagurile <SMALL> i </SMALL> s fie scris mai mic dect textul curent.
Elementele BIG si SMALL nu sunt recunoscute de toate browser-urile, fapt
pentru care este indicat s se foloseasc atributul size al tag-ului <FONT>.
Un exemplu de utilizare a acestor stiluri:
<HTML>
<HEAD> </HEAD>
<BODY>
<B> <BIG> <BIG> BIG </BIG></BIG></B>
<SMALL> si </SMALL>
<B> <BIG> SMALL </BIG> </B>
</BODY>
</HTML>
Figura 3. 3. Stilurile BIG si SMALL

Stilurile SUB si SUP
Dac lucrm cu formulele matematice sau dac este nevoie s utilizm n
paginile web indici superiori i inferiori, HTML ofer dou etichete pentru indici.
Textul dintre marcaje <SUB> </SUB> va fi scris mai jos, ca un indice.
Textul dintre marcaje <SUP> </SUP> va fi scris mai sus, ca o putere.
31
Elementele SUB i SUP pot fi imbricate. n exemplul urmtor se exemplific
utilizarea stilurilor SUB i SUP.
<BODY>
<B> <TT> <U> Teorema.</U></B> </TT>
<I> Intr-un triunghi dreptunghic ipotenuza la
patrat este egala cu suma patratelor catetelor</I>
(I<SUP>2</SUP>=C<SUB>1</SUB><SUP>2</SUP>+
C<SUB>2</SUB><SUP>2</SUP>)
<P> O formula cu indici:<BR>
E=X<SUB>i</SUB>
<SUP> (y<SUB>i </SUB>
<SUP><small>2</small></SUP><BIG> )</BIG></SUP>
</BODY> </HTML>
Figura 3. 4. Indici inferiori si superiori
3.2. Stiluri logice de text

Stilurile fizice de text, descrise n paragraful anterior, sunt uor de perceput.
Limbajul HTML ofer, pe lng stilurile fizice de text, discutate n paragraful anterior,
i stiluri logice de text care permit s se defineasc evidenieri ale textului.
Stilurile logice sunt:
P (Paragraful)
PRE (text preformatat)
HR (Linii orizontale)
H1,H2,H3,H4,H5 si H6 (Titluri)
DIV i SPAN (elemente de grupare)
EM, STRONG, DFN, CITE, VAR, CODE, SAMP, KBD
Blockquote i q (citate)
n continuare se vor analiza succint stilurile logice. Despre primele trei stiluri
logice s-a discutat n capitolul precedent.
32
Titluri
Dac pagina conine mai multe seciuni i subseciuni, HTML permite
introducerea a ase tipuri de titluri predefinite H1, H2, H3, H4, H5 i H6.
Fiecare titlu este scris ntre etichetele: <H1> </H1>, <H2> </H2>,
<H3> </H3>, <H4> </H4>, <H5> </H5> ,<H6> </H6>.
Titlul H1 este cel mai nalt i ngroat, iar titlul H6 este cel mai de jos i este
afiat cu cel mai mic i mai subire font.
Toate titlurile:
sunt afiate pe un rnd nou i cu un spaiu dup blocul precedent
accept atributul align = valoare cu valori posibile left (implicit),
right, center i justify.
Un exemplu de utilizare a titlurilor este redat mai jos:
<HTML>
<HEAD> </HEAD>
<BODY>
<H1 align=center> TITLUL H1 (cel mai mare si gros) </H1>
<H2> TITLUL H2 </H2>
<H3 align=right> TITLUL H3 </H3>
<H4 align=justify> TITLUL H4 </H4>
<H5 align=left> TITLUL H5 </H5>
<H6 align=center> TITLUL H6 (cel mai mic si subtire) </H6>
</BODY> </HTML>
Figura 3. 5. Titluri
Stilurile DIV i SPAN
n HTML exist elemente:
de nivel bloc, care sunt afiate la nceput de rnd nou (<P>,<HR> etc.)
inline, care sunt afiate pe acelai rnd (<B>, <I>, <TT>, <FONT> etc.)
Elementul DIV este un element de bloc iar elementul SPAN este un element
inline. Aceste dou elemente nu impun nici un stil pentru text, spre deosebire de un
element ca P (paragraph). De aceea, aceste elemente se folosesc mpreun cu limbajul
CSS, pentru a ataa un stil la un text sau la o poriune dintr-un rnd (n aceast seciune
vor fi exemplificate numai cu atribute independente de CSS).
33
Atributele lui Div i Span:
align=valoare este acceptat numai de elementul DIV, care este un
element de bloc (Span este element inline, deci nu poate avea atributul
align).
title=continut este acceptat de ambele elemente i impune browser-ului
sa afieze coninut atunci cnd mouse-ul se afl pe un element.
n exemplul de mai jos sunt exemplificate stilurile DIV i SPAN.
Se observ c elementul DIV:
nu produce un rnd alb nainte i dup el, aa cum produce elementul P
nu las textul aa cum este scris, cum produce elementul PRE
Figura 3. 6. Stilurile DIV si SPAN
Stilul BLOCKQUOTE
Stilul logic pentru introducerea citatelor lungi se realizeaz cu tag-urile
<BLOCKQUOTE></BLOCKQUOTE> i <Q></Q>. Elementul <Q> este
element inline, iar elementul <BLOCKQUOTE> este de nivel bloc. Coninutul
blocului este afiat ncepnd de pe rnd nou, cu spaiul nainte, dup, la stnga i la
dreapta de citat, practic indenteaz textul, aa cum reiese din exemplul urmtor:
<HTML>
<HEAD> </HEAD>
<BODY>
<B> <TT> CITAT</B> </TT>
<BLOCKQUOTE>
"Omul nu este decat o trestie, cea mai fragila din natura,
dar este o trestie ginditoare.
" Blaise Pascal (1623-1662)
</BLOCKQUOTE>
</BODY>
</HTML>
34
Figura 3.7. Elementul BLOCKQUOTE
Stiluri logice de fraz
Stilurile logice de fraz permit s se adauge un neles specific unui font

dintr-un document i sunt implementate i afiate diferit de ctre browser-e.
n continuare descriem succint cele mai importante dintre aceste elemente:
<EM></EM> pentru evideniere i afieaz textul cursiv (o alt
modalitate de a scrie italic)
<STRONG> </STRONG> pentru evideniere i afieaz textul aldin
(o alt modalitate de a scrie bold)
<DFN> </DFN> evideniaz prima apariie a unui concept, o definiie
<CITE> </CITE> pentru inserarea unei referine la un document;
textul este afiat aldin
<CODE> </CODE> pentru inserarea unui cod de program; textul scris
cu font monospaiat
<VAR> </VAR> pentru inserarea unor variabile ntr-un program;
textul este scris cursiv
<SAMP> </SAMP> pentru inserarea datelor de ieire a unei operaii;
afiat ca font monospaiat
<KBD> </KBD> pentru inserarea unei comenzi de calculator; afiat ca
font monospaiat
Exemplul urmtor utilizeaz cteva din stilurile logice introduse mai sus.
<HTML>
<HEAD> </HEAD>
<BODY>
<DFN > CSS inseamna CASCADING STYLE SHEETS </DFN><BR>
<EM> JavaScript este limbaj de scriptare </EM> <BR>
Timpul si Data se afla tastind sub prompter comenzile
<KBD> Time si Data </KBD><BR>
35
Se va primi raspuns de forma: <SAMP> Data curenta este: 10-01-07 </SAMP>
<BR> O functie JavaScript:
<CODE>
function complex (a,b)
{ this.real=a; this.imag=b}
</CODE>
<BR>
Variabilele: <VAR> a si b </VAR> se transmit prin referinta </BR>
Pentru mai multe informatii vizitati <CITE> www.w3.org</CITE><BR>
<STRONG> Succes </STRONG>
</BODY>
</HTML>
Figura 3. 8. Stiluri logice de fraz
3.3. Fonturi
Pentru a schimba fontul unui text utilizat (dimensiune, culoare, tip de liter)
acesta se scrie ntre etichetele <FONT > i </FONT>.
Eticheta pereche de formatare <FONT > i </FONT> este un element inline,
adic se poate aplica oriunde n interiorul unui rnd.
Atributele elementului FONT sunt: face, size i color i au sintaxa cunoscut a
unui atribut (atribut=valoare).
face indic tipul de liter utilizat pentru un font i are sintaxa:
face = lista de corpuri de liter.
n cazul n care lista are mai multe de un tip de liter, acestea se separ
prin virgule. Browser-ul va utiliza primul corp de liter recunoscut. Dac
niciunul dintre fonturi nu este gsit, browser-ul va folosi tipul de liter
36
implicit. Este indicat s se foloseasc ghilimele ( ) pentru a scrie lista de
fonturi, deoarece unele nume sunt compuse din mai multe cuvinte.
<FONT face=Arial, Chicago> Fonturi simple</FONT>
<FONT face=Arial Narrow, Helvetica Narrow, New Courier>
Fonturi compuse </FONT>
size indic dimensiunea fontului i are sintaxa size=dimensiunea.
Dimensiunea se poate exprima n dou moduri:
absolut, unde dimensiunea este un numr ntreg cuprins ntre 1 i 7, 1
fiind cea mai mic dimensiune i 7 cea mai mare dimensiune, valoarea
implicit fiind 3. Se observ c dimensiunea se exprim invers fa de
numrarea dimensiunii subtitlurilor, unde <H1> este cel mai mare, iar
<H6> este cel mai mic
relativ, unde dimensiunea unui anumit text (liter, cuvnt, fraz) este
mrit cu o unitate fa de textul din jurul lui; valori posibile:
+1,+2,+7 si -1,-2,..,-7. Modificrile relative nu pot reduce fontul sub
size=1 sau peste size=7. De exemplu, dac la dimensiunea implicit 3
se adaug 7 prin <font size=+7>, efectul este acelai dac utilizm
<font size=7> sau <font size=+4>
color indic culoarea pentru un text specificat i are sintaxa:
color=culoare. Culoarea poate fi exprimat n dou moduri :
modul text unde valoarea culoare este un nume. Exist o varietate
de culori dintre care 16 sunt culori standard, implementate de toate
browser-ele: aqua (verde marin), black (negru), blue (albastru), fuchsia
(violet deschis), gray (gri), green (verde), lime (citron), maroon (maro),
navy (bleumarin), olive (cachi), purple (violet), red (rou), silver
(argintiu), teal (verde nchis), white (alb) si yellow (galben).
modul RGB unde valoarea culorii este dat printr-un numr format
din 6 cifre hexazecimale, cte dou pentru fiecare culoare de baz din
tripletul red (rou), green (verde) i blue (albastru) i este precedat de
caracterul #. n anexa A se gsete lista complet a culorilor, date prin
nume i prin codul lor.
Pentru cele mai folosite culori avem codurile:
Black #000000
White #FFFFFF
Red #FF0000
Green #00FF00
Blue #0000FF
Elementul Basefont
Pentru a schimba fontul, chiar de la nceputul paginii, se poate folosi tag-ul
<BASEFONT atribute> care are aceleai atribute ca i tag-ul <FONT>.
Aceast etichet formateaz textul conform atributelor specificate, din locul
unde apare i pn la sfritul documentului i deci nu necesit eticheta de nchidere. n
37
interiorul elementului BASEFONT se pot gsi alte elemente FONT pentru formarea
unor secvene de text.
Utilizarea fonturilor este exemplificat n continuare:
<HTML>
<HEAD>
</HEAD>
<BODY>
<BASEFONT size=3 face=Arial>
<FONT face="Times New Roman" color="blue" size=7> Aplicarea
fonturilor</FONT><BR>
<FONT face="Courier " color="#00FF00" size=-2> acest text are dimensiune 5 si
culoarea verde</FONT><BR>
Text normal scris cu parametrii elementului BASEFONT
<FONT face="Helvetica Narrow" color="#FF0000" size=-1> Text scris cu
dimensiunea 3 si culoare rosie</FONT><BR>
Succes in continuare la insusirea
<FONT size=+1> H </FONT> <FONT size=+1> T </FONT>
<FONT size=+1> M </FONT> <FONT size=+1> L </FONT>
</BODY>
</HTML>
Figura 3. 9. Fonturi
38
4. Liste
De multe ori avem nevoie s introducem n pagini web secvene de

enunuri sau articole, numite liste. n HTML exist urmtoarele tipuri de liste:
numerotate sau ordonate
neordonate sau marcate
de definiii
De exemplu, putem crea liste de cele trei tipuri pentru unele comenzi de
editare din word:
cut Cut
1. cut
Decupeaz un text
copy Copy
2. copy
Copiaz un text
paste Paste
3. paste
Lipete un text
find Find
4. find
Caut un text
delete Delete
5. delete terge un text
Liste Ordonate Liste Marcate Liste de Definiii
Toate tipurile de liste:

Pot conine un antet, care se scrie ntre marcajul de list i primul element
din list
Pot fi imbricate (nested lists), una n interiorul alteia
Sunt indentate cu cteva spaii spre dreapta i au un rnd liber naintea lor
4.1. Liste ordonate (Ordered lists)
Elementul OL
Lista ordonat are toate articolele numerotate, browser-ul fiind acela care
atribuie automat secvena. Pentru a crea o list ordonat se folosete tag-ul pereche
<OL > </OL>. Elementul OL este element de bloc i va fi afiat la nceputul
rndului.
39
Elementul LI
Pentru a introduce elemente n list se folosesc etichetele <LI> i </LI>.
Textul cuprins ntre aceste elemente va fi considerat un articol al listei. Eticheta de
sfrit </LI> nu este obligatorie n HTML, dar n XHTML da.
Atributele unei liste ordonate au sintaxa: atribut=valoare i sunt:
type care are ca valoare un caracter care indic modul de numerotare.
Exist cinci valori posibile:
- 1 pentru cifre arabe: 1,2,3 etc i este valoare implicit
- a pentru literele mici : a,b,c etc.
- A pentru litere mari: A,B,C etc.
- i pentru cifre romane scrise cu litere mici: i, ii, iii, iv etc.
- I pentru litere romane scrise cu litere mari: I, II, III, IV
start indic de unde ncepe numerotarea. Primul simbol dintr-o list
ordonat este: 1, a, A, i sau I.
Urmtorul exemplu creeaz o list ordonat pentru exemplu de mai sus:
<HTML>
<HEAD> </HEAD>
<OL>LISTE ORDONTE
<LI> COPY
<LI> CUT
<LI> PASTE
<LI> FIND
<LI> DELETE
<LI> REPLACE
</OL>
<BODY> </HTML>
Figura 4. 1. Liste ordonate
n exemplul urmtor se creeaz liste ordonate imbricate:
<HTML>
<HEAD> </HEAD>
<BODY><B>LISTE ORDONTE IMBRICATE </B>
<OL> PRINCIPALELE COMENZI DIN MENU FORMAT:
<LI> FONT
<OL type="A" >MENU FONT ARE TREI ETICHETE
<LI > Font are trei caracteristici
<OL type="a">
<LI> Font
<LI> Font style
<LI> Size
</OL>
<LI> Character Spacing
<LI> Text Effects
</OL>
40
<LI> PARAGRAPH
<LI> BULLETS AND NUMBERING
<LI>COLUMNS
</OL>
<BODY></HTML>
Figura 4. 2. Liste ordonate imbricate
4.2. Liste neordonate (Unordered Lists)

Listele marcate sau neordonate sunt cele mai utilizate. Pentru a crea o list
neordonat se folosesc tag-urile <UL> i </UL>. Fiecare element al listei este
definit ca i la listele ordonate prin marcajul <LI>. n faa fiecrui articol al listei,
browser-ul insereaz un simbol, implicit un disc () . Singurul atribut al listei
marcate este type=valoare, unde valoare poate fi:
disc (), care este o valoare implicit
circle ()
square ()
Un exemplu de list neordonat este redat mai jos:
<HTML>
<HEAD> </HEAD>
<BODY><B> LISTE NEORDONATE </B>
<UL> <B> Atributele elementului FONT in HTML: </B>
<LI> FACE
<LI> SIZE
<LI> COLOR
</UL>
<BODY> </HTML>
41
Figura 4. 3. Liste marcate
Lista vid
O list fr niciun element se numete list vid. Putem crea o list vid i
n scopul de a indenta un text (aa cum face elementul <blockquote>).
<HTML>
<HEAD> </HEAD>
<BODY><B> LISTA VIDA</B>
<UL> <B> Atributele elementului BASEFONT in HTML: </B><BR>
FACE - pentru tip de litera <BR>
SIZE - pentru dimensiune <BR>
COLOR- pentru culoare <BR>
</UL>
<BODY> </HTML>
Figura 4. 4. Lista vid
Listele neordonate, ca toate tipurile de liste, pot fi imbricate (a doua list

constituie un articol al primei liste), aa cum se poate observa n exemplul urmtor.
42
<HTML>
<HEAD> </HEAD>
<BODY>LISTE NEORDONATE IMBRICATE
<UL> COMENZI EDIT SI MOD DE EXECUTIE
<LI> COPY
<UL>
<LI> CTRL+C
<LI> Menu Edit
<LI> Menu contextual
<LI> Buton bara
<LI> Drag & Drop
</UL>
<LI> CUT
<UL type="square">
<LI> CTRL+X
<LI> Menu Edit
<LI> Buton bara
<LI> Drag & Drop
</UL>
<LI> PASTE
<UL type="disc">
<LI> CTRL+V
<LI> Menu Edit
<LI> Buton bara
</UL>
<LI> FIND
<UL>
<LI> CTRL+F
<LI> Menu Edit
</UL>
<BODY> </HTML> Figura 4. 5. Liste marcate imbricate
Din analiza exemplului de mai sus reiese c:

listele imbricate sunt dublu indentate
fiecare list este marcat cu alt simbol, dac nu se d o alt opiune; pentru
lista PASTE, att ea, ct i sublista ei au ca marcaj discul, deoarece n
sublist s-a optat pentru acesta.
Pot fi imbricate diferite tipuri de liste, de exemplu, o list ordonat cu o

list neordonat ca n exemplul de mai jos.
43
<HTML>
<HEAD> </HEAD>
<BODY>LISTE MIXTE IMBRICATE
<OL type="I" start=4> Citeva elemente HTML
<LI> FONT
<UL type="disc">
<LI> face
<LI> size
<LI> color
</UL>
<LI>BASEFONT
<UL type="circle">
<LI> face
<LI> size
<LI> color
</UL>
<LI> OL
<UL type="square">
<LI> type
<LI> start
</UL>
<BODY>
</HTML> Figura 4. 6. Liste mixte imbricate
4.2.1. Atributele elementului LI

Eticheta <LI> poate avea atribute care schimb parametrii definii n
etichetele <OL> i <UL>.
Atributele sunt:
type valabil att pentru listele ordonate, ct i pentru cele neordonate i
are aceleai valori ca i atributul type din <OL> i <UL>.
value valabil doar pentru listele ordonate, i are ca efect schimbarea
numerotrii secveniale i poate avea valori numere ntregi, valoarea
implicit fiind 1.
n exemplul urmtor sunt introduse atributele etichetei <LI> pentru

exemplul de mai sus.
<HTML>
<HEAD> </HEAD>
<BODY>Atibutele elementului LI
<OL type="A" >Citeva elemente HTML dintr-o lista
<LI> FONT
<UL type="disc"> Atribute
<LI> face
44
<LI type="circle"> size
<LI> color
</UL>
<LI value=5>BASEFONT
<UL type="circle"> Atribute
<LI type="square"> face
<LI> size
<LI type="disc"> color
</UL>
<LI value=7> OL
<UL type="square">
<LI> type
<LI type="circle"> start
</UL>
<BODY>
</HTML>
Figura 4. 7. Atributele elementului Li
4.3. Liste de definiii (Definition Lists)

O list de definiii este o secven de descrieri, referine sau indexuri,
glosarele fiind exemple clasice n acest sens. ntr-o astfel de list cuvintele sunt
listate n ordine alfabetic, urmate de definiii ale lor. n HTML o list de definiii
este inclus ntre perechea de taguri <DL> i </DL>. ntre aceste marcaje, o
definiie se compune din dou pri:
Termenul descris (definit) utiliznd tag-ul <DT>
Descrierea (definiia) termenului, utiliznd tag-ul <DD>
Browser-ul afieaz termenii i definiiile lor pe cte un rnd i indenteaz
definiiile. Dac se dorete s se economiseasc spaii se folosete atributul
compact al tag-ului <DL>, caz n care definiia va ncepe pe acelai rnd cu
termenul pe care l definete.
De exemplu, dac dorim s afim orarul unei firme, putem crea o list de
definiii, ca n exemplul de mai jos.
<HTML>
<HEAD> </HEAD>
<BODY>
<DL>ORAR
<DT>LUNI
<DD>10-18
<DT>MARTI
45
<DT>MIERCURI
<DD>9-17
<DT>JOI
<DD>9-13
<DD>15-19
<DT>VINERI
<DD>9-14
</DL>
</BODY>
</HTML>
Figura 4. 8. List de definiii
Dac n exemplul de mai sus se modific tag-ul <DL> cu <DL compact>,

browser-ul va alinia definiia pe acelai rnd cu termenul asociat.
<HTML>
<HEAD> </HEAD>
<BODY>
<DL compact> ORAR
<DT>LUNI <DD>10-18
<DT>MARTI
<DT>MIER
<DD>9-17
<DT>JOI
<DD>9-13
<DD>15-19
<DT>VINERI
<DD>9-14
</DL>
</BODY>
</HTML>
Figura 4. 9. List de definiii compactat
46
5. Tabele
5.1. Generaliti
Tabelele reprezint n HTML un element important, evideniindu-se prin
tag-urile <TABLE> i </TABLE>. El are o form dreptunghiular i este alctuit
din linii i coloane la intersecia crora se afl celulele.
Tabelele ofer o mulime de posibiliti pentru a evidenia un text pe mai
multe linii i coloane, pentru delimitarea spaiului unei pagini, n vederea gruprii
ntr-o machet a unor elemente (text, imagini etc).
Spre deosebire de tabelele din procesoarele de texte, tabelele din HTML au
dezavantajul c sunt destul de greu de construit. Trebuie specificai parametrii
tabelului, ai liniilor i ai celulelor. Orice tabel este compus din trei elemente i
anume:
<TABLE> ... </TABLE> descrie un tabel
<TR atribute> ... </TR> (Table Row) descrie o linie a unui tabel
<TD atribute> ... </TD> (Table Data) descrie o celul a tabelului
OBSERVAII!
Etichetele de nchidere </TR> i </TD> sunt opionale, astfel o linie
nou ncepe atunci cnd se ntlnete o nou etichet <TR>. n
XHTML aceste etichete sunt obligatorii.
Dac o linie a unui tabel are mai multe celule dect restul liniilor,
automat toate liniile vor avea acest numr maxim de celule, browser-ul
adugnd celule vide liniilor, pentru a respecta forma dreptunghiular a
tabelului.
n lipsa unor atribute de formatare a tabelului, toate celulele unei
coloane au limea impus de cea mai lat celul.
Celulele unui tabel pot conine orice tip de informaie: text, imagine,
tabele, sau chiar combinaii ale acestora.
n exemplul de mai jos sunt definite trei tabele: cu 2 linii i 3 coloane, cu o

linie i respectiv cu o coloan.
<HTML><HEAD> </HEAD>
<BODY>
<H4 align="center">Exemple de Tabele</H4>
47
<!- cu si fara marcaj de inchidere -->
<B> Tabel cu 2 linii si trei coloane</B>
<TABLE>
<tr><td>a11</td><td>a12</td><td>a13</td></tr>
<tr> <td>a21</td><td>a22</td><td>a23</td></tr>
</TABLE>
<b> Tabel cu o linie </b><br>
Posturi de televiziune din programul de baza
<TABLE border=0>
<tr><td>TVR1 <td> TVR2<td> ANTENA1<td> PROTV
<td> REALITATEA
</TABLE>
<B>Tabel cu o coloana</B>
<TABLE >
<tr><td>TVR1
<tr><td>TVR2
<tr><td>ANTENA1
<tr><td>PROTV
<tr><td>REALITATEA
</TABLE>
</BODY>
</HTML>
Figura 5. 1. Tabele
Din figura de mai sus rezult c un tabel este afiat implicit

fr chenar i caroiaj
aliniat la stnga i de la rnd nou
Att tabelele, ct i liniile i celulele au atribute care le schimb proprie-
tile standard (de aliniere, de dimensiune, de culoare etc.)
5.2. Atributele etichetei <TABLE>

Un tabel poate fi formatat, utiliznd urmtoarele atribute: border,
bordercolor, frame, rules, width, height, align, cellspacing, cellpadding, hspace,
vspace, bgcolor. n continuare vom descrie, pe scurt, aceste atribute.
Atributul BORDER
Aa cum am mai precizat, un tabel este afiat implicit fr bordur i
caroiaj interior. O bordur pentru un tabel poate fi introdus prin atributul
border=valoare, unde valoare reprezint grosimea n pixeli a liniei de contur a
tabelului.
48
OBSERVAII!
Dac valoare=0, atunci border-ul lipsete i este echivalent cu lipsa
atributului din <TABLE>
Valoarea implicit a border-ului este 1, deci border fr valoare este
echivalent cu border =1
Dac valoare <> 0 atunci linia de contur este afiat n 3-D
Dac n exemplul din figura 5.1 adugm atributul border la eticheta
<TABLE border> va aprea o linie de contur de grosime 1
<TABLE border=0> tabelul nu va avea contur
<TABLE border=5> tabelul va avea un contur de grosime 5
aa cum reiese din figura 5.2.
Figura 5. 2. Atributul border al elementului <TABLE>
Atributul BORDERCOLOR
Acest atribut indic culoarea bordurii n Netscape Navigator, iar n Internet
Explorer indic i culoarea caroiajului interior al tabelului. Sintaxa lui este
bordercolor=valoare, unde valorile posibile sunt ca i ale atributului color de la
etichetele <FONT> i <BASEFONT> i anume
un nume de culoare
o secven RGB (red, green, blue) de 6 cifre hexazecimale, cte dou
pentru fiecare culoare, precedate de #.
Dac n exemplul de mai sus adugm i atributul bordercolor la

etichetele <TABLE>, astfel
<TABLE border bordercolor="#00FF00">
<TABLE border=2 bordercolor="red">
<TABLE border=5 bordercolor=#0000FF>
49
Figura 5. 3. Atributul bordercolor
Atributul FRAME
Acest atribut ofer un control i, mai precis, al chenarelor din jurul
tabelelor i are sintaxa frame= valoare. Valorile posibile i modul de afiare a
lor sunt:
- void elimin liniile exterioare a11 a12

a21 a22
- above afieaz o linie deasupra
a11 a12
a21 a22
- below afieaz o linie sub tabel a11 a12

a21 a22
- hside afieaz linii n partea a11 a12

superioar i inferioar a21 a22
a11 a12
- lhs afieaz o linie la stnga a21 a22
a11 a12
- rhs afieaz o linie la dreapta
a21 a22
- vside afieaz linii la dreapta i la stnga a11 a12
a21 a22
- box afieaz un contur pe toate laturile a11 a12

a21 a22
50
Atributul RULES
Atributul RULES definete modul de afiare a caroiajului dintre celulele
tabelului i are sintaxa rules=valoare.
Valorile posibile i modul de afiare a lor sunt
- none elimin toate muchiile interioare ale tabelului
a11 a12
a21 a22
- groups afieaz liniile orizontale ntre toate grupurile din tabel :
THEAD, TBODY, TFOOT i COLGROUP
- rows afieaz muchiile orizontale ntre linii a11 a12

a21 a22
- cols afieaz muchii verticale ntre coloane a11 a12

a21 a22
- all afieaz muchii ntre linii i ntre coloane a11 a12

a21 a22
Atributul ALIGN
Atributul align precizeaz alinierea tabelului n pagin. Valorile posibile
sunt: left (implicit), right i center.
n cazul n care exist i text, acesta va fi poziionat fa de tabel n funcie
de alinierea acestuia.
Un exemplu este dat mai jos:
<HTML><HEAD></HEAD>
<BODY>
<TABLE frame=vsides border align= left >
<TR ><TD>a11<TD>a12
<TR><TD>a21<TD>a22
</TABLE>
<P>Textul este aliniat la stanga tabelului </P>
<TABLE border rules=none align= right >
<TR ><TD>a11<TD>a12
<TR ><TD>a21<TD>a22
</TABLE>
<P>Textul este aliniat la dreapta tabelului</P>
Acesta este un tabel aliniat la centru. Textul apare deasupra si
<TABLE border=4 rules=all align= center >
<TR ><TD>a11<TD>a12
<TR ><TD>a21<TD>a22
51
</TABLE>
<P>sub tabel</P>
</BODY>
</HTML>
Figura 5. 4. Alinierea tabelelor
Atributele WIDTH i HEIGHT

Aceste atribute stabilesc limea (width) i nlimea (height) unui tabel.
Valorile posibile ale acestor atribute pot fi date:
n numere, reprezentnd limea i nlimea unui tabel n pixeli
n procente fa de limea i nlimea ferestrei browser-ului
Un exemplu de dimensionare a unui tabel este dat mai jos:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE border=5 bordercolor=blue align=center
width=50% height=100%>
<TR><TD>a11<TD>a12
<TR><TD>a21<TD>a22
</TABLE>
</BODY>
</HTML>
52
Figura 5. 5. Atributele width i height
Atributul CELLSPACING
Acest atribut definete spaiul dintre celule. Valorile acestui atribut se pot
da n pixeli sau n procente fa de dimensiunea blocului printe. Valoarea
implicit este 0 pentru tabelele fr caroiaje i 2 pentru cele cu caroiaj.
Atributul CELLPADDING
Acest atribut definete spaiul lsat ntre marginea celulei i informaia din
celul (text, imagine etc). Valoarea implicit este 0. Valorile atributului pot fi date
n numere (ce reprezint distana n pixeli) sau n procente.
n exemplul de mai jos sunt utilizate aceste atribute.
<HTML>
<HEAD></HEAD>
<BODY>
<TABLE border=5
bordercolor=#0000FF
align=center width=50% height=50
cellspacing=3 cellpadding=10>
<TR><TD>a11<TD>a12<TD>a13
</TABLE>
</BODY>
</HTML>
Figura 5. 6. Atributele elementului TABLE
53
Atributele HSPACE i VSPACE
Aceste atribute asigur distana de la tabel la celelalte componente din
pagin, pe orizontal (hspace) i pe vertical (vspace). Aceste atribute nu sunt
valabile n Internet Explorer. Valorile acestor atribute sunt date n pixeli. Pentru
exemplificare s-a folosit browser-ul MozillaFirefox:
<BODY>
Acesta este un text inaintea tabelului. Acesta este un text inaintea tabelului.
Acesta este un text inaintea tabelului. Acesta este un text inaintea tabelului.
Acesta este un text inaintea tabelului.
<TABLE border=2 bordercolor=red hspace="50" vspace="30">
</TABLE>
Acesta este un text dupa tabel. Tabelul de mai jos va avea spatii
albe in jurul lui. Acesta este un text dupa tabel. Tabelul de mai jos va avea
spatii albe in jurul lui. Acesta este un text dupa tabel. Tabelul de mai jos va
avea spatii albe in jurul lui.
</BODY> </HTML>
Figura 5. 7. Atributele hspace i vspace
Atributul BGCOLOR
Acest atribut stabilete culoarea de fundal pentru toate celulele. Valorile

acestui atribut sunt nume de culori sau secven RGB.
Observaie!
Majoritatea atributelor elementului <TABLE> sunt atribute i ale
elementelor <TR> i <TD>. Prioritatea unui atribut (de exemplu, align) este
54
urmtoarea: a elementului <TD>, a elementului <TR> i, n final, a elementului
<TABLE>.
5.2.1. Elementul TH
n cadrul unui tabel se poate nlocui eticheta <TD> cu eticheta <TH>
pentru a specifica antete de coloane i de linii. Elementul <TH> este aproape
identic cu <TD>, cu dou excepii: dac celula conine text, el este afiat aldin
(bold) i este centrat n celul.
n exemplul de mai jos se red un tabel cu antet de linie i de coloan.
<HTML><HRAD>
</HEAD><BODY>
<TABLE border align=center
cellspacing=2 bgcolor=yellow vspace=70>
<TR> <TH> Beneficii 2006 <TH> Semestrul I <TH> Semestrul II
<TR> <TH> Bucuresti <TD> 100000 euro <TD> 250000 euro
<TR> <TH>Iasi <TD> 200000 euro <TD> 300000 euro
</TABLE>
</BODY>
</HTML>
Figura 5. 8. Elementul TH
5.2.2. Elementul CAPTION

Pentru a aduga un nume unui tabel se folosesc tag-urile <CAPTION> i
</CAPTION>, care trebuie s se gseasc imediat dup <TABLE>. Elementul
CAPTION are un singur atribut, align, care precizeaz alinierea titlului fa de
tabel i poate avea valorile: top (implicit), bottom, left i right astfel:
55
n exemplul de mai sus adugm o etichet tabelului
<HTML>
<HRAD></HEAD>
<BODY>
<TABLE border align=center
<CAPTION align=bottom> <b> Vanzari </b></CAPTION >
<TR> <TH> Beneficii 2005 <TH> Semestrul I <TH> Semestrul II
<TR> <TH> Bucuresti <TD> 100000 euro <TD> 250000 euro
<TR> <TH>Iasi <TD> 200000 euro <TD> 300000 euro
</TABLE>
</BODY>
</HTML>
Figura 5.9. Elementul Caption
5.3. Atributele elementului TR

Aa cum s-a precizat i la nceputul capitolului, elementul TR descrie
liniile unui tabel. S-a precizat de asemenea c eticheta <TR> poate s nu aib
perechea de nchidere </TR>, descrierea unei linii terminndu-se cnd se ntlnete
un nou element <TR>. Atributele elementului TR schimb parametrii predestinai
de descriere a liniilor unui tabel, aa cum atributele elementului TABLE schimb
aspectul de afiare a unui tabel. Atributele elementului TR se scriu n eticheta <TR
atribute> i sunt:
56
align aliniaz orizontal coninutul tuturor celulelor unei linii. Valorile
posibile sunt: left (aliniere implicit), right, center sau justify
valign specific alinierea pe vertical pentru toate celulele dintr-o linie.
Valorile posibile sunt: top (implicit), middle (centru) i bottom (jos)
bgcolor culoare de fond pentru toate celulele unei linii. Are aceleai
valori ca i atributul bgcolor pentru TABLE
Observaii!
Toate atributele liniei le gsim i n lista atributelor pentru TABLE
Atributul align pentru TABLE aliniaz tabelul pe orizontal, n timp ce
atributul align al elementului TR aliniaz pe orizontal coninutul
celulelor unei linii.
Atributul bgcolor al lui TABLE se refer la culoarea de fond a tabelului,
n timp ce atributul bgcolor al lui TR se refer la culoarea de fond a
celulelor dintr-o linie.
Atributele de linie sunt prioritare celor de tabel.
Un exemplu care utilizeaz atributele de linie:
<HTML><HRAD></HEAD><BODY>
<TABLE border align=center cellspacing=2 bgcolor=yellow >
<TR align=center valign=middle bgcolor=red>
<TD> Prescurtarea HyperText Markup Language <TD> HTML
<TR align=right valign=bottom> <TD> Limbaj<TD> Pagini
</TR>
</TABLE> </BODY></HTML>
Figura 5. 10. Atributele elementului TR
57
5.4. Atributele elementelor TD i TH
Elementele TD i TH descriu celulele unui tabel. Diferena dintre aceste
elemente este aceea c, n cazul utilizrii elementului TH, coninutul celulei, dac
acesta este text, este scris aldin. Atributele de celul se scriu n eticheta <TD
atribut>, sunt prioritare celor de linie (TR) i celor de tabele (TABLE) i sunt:
Atributele WIDTH i HEIGHT

Aceti parametrii indic limea (width) i nlimea (height) unei celule,
dar au efect i pentru celelalte celule, pentru ca tabelul s fie aliniat (s aib forma
dreptunghiular). Valorile acestor parametrii se pot da n numere ntregi pozitive ce
reprezint limea, respectiv nlimea celulei n pixeli, sau n procente.
De exemplu:
<HTML><HRAD></HEAD><BODY>
<TABLE width="75%" height="50%" border="5" bordercolor=maro>
<TR>
<TD width="75%"> prescurtarea textului HyperText Markup Language
<TD width="25%">HTML
<TR>
<TD> Limbaj
<TD> Sigla
</TABLE>
</BODY></HTML>
Figura 5. 11. Atributele WIDTH i HEIGHT
58
Atributele align i valign
Aceste atribute stabilesc alinierea pe orizontal (align) i pe vertical
(valign) a textului dintr-o celul. Au aceleai valori ca i atributele cu aceleai
nume de la nivel de linie i tabel, dar sunt prioritare fa de alinierea la nivel de
linie i de tabel.
Atributele COLSPAN i ROWSPAN

Un tabel este un caroiaj n form dreptunghiular, format din linii i
coloane. Coninutul unei celule poate s se extind pe mai multe uniti de tabel
(celule) adiacente, dac este nevoie s adugm, de exemplu, antete pentru tabel.
COLSPAN=nr insereaz n dreapta celulei un numr de nr-1 celule al
cror coninut este vid sau poate conine valoarea celulei care are acest parametru.
ROWSPAN=nr insereaz pe nr-1 linii de pe aceeai coloan cte o
celul a crei coninut este vid sau poate conine valoarea celulei care are acest
parametru.
n exemplul din figura de mai jos, introducem aceste atribute
<html>
<head></head><body>
<table border bordercolor="#00FF00">
<TR><TD>a21<TD>a22
</table>
</body></html>
Dac celula 2 din linia a doua conine atributul colspan=2 nseamn c

se va insera n linia a 2 o celul vid (2-1), ceea ce va face ca tabelul s se
redimensioneze la 3 linii i 4 coloane pentru a pstra forma dreptunghiular.
<HTML><HEAD></HEAD>
<BODY>
<TABLE border=3
bordercolor=blue>
<TR><TD>a21<TD colspan=2>a22
</TABLE>
</BODY></HTML>
Dac se renun la o celul din linia a doua i coninutul celulei 22 se
aliniaz la centru, se va nltura inconvenientul redimensionrii tabelului.
<HTML>
<HEAD></HEAD>
59
<BODY>
<TABLE border=3
bordercolor=blue>
<TR><TD>a21<TD colspan=2>a22
</TABLE>
</BODY></HTML>
Figura 5. 12. Atributul COLSPAN
Folosirea atributului de celul

rowspan=nr are, ca efect secundar, introducerea
de nr-1 celule vide pe fiecare linie pentru a
pstra forma dreptunghiular astfel:
<HTML>
<HEAD></HEAD>
<BODY>
<TABLE border=3 bordercolor=blue>
<TR><TD>a21<TD rowspan=2>a22<TD>a23
</TABLE> </BODY></HTML>
Dac se renun la celula cu coninut a33 tabelul va avea dimensiunea
iniial.
<HTML>
<HEAD></HEAD>
<BODY>
<TABLE border=3
bordercolor=blue>
<TR><TD>a21<TD
rowspan=2>a22<TD>a23
<TR><TD>a31<TD>a32
</TABLE>
</BODY></HTML> Figura 5. 13. Atributul ROWSPAN
La adugarea celulelor vide, browser-ele nu afieaz cadre la aceste celule.

Pentru a nltura acest neajuns se folosete secvena &nbsp (non-breaking space).
n exemplul de mai sus putem evidenia acest lucru modificnd etichetele <TD>
60
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE border=2>
<TR><TD colspan=2>a21<TD>a23
<TR><TD>a31<TD>&nbsp<TD>a33
</TABLE></BODY></HTML>
Figura 5. 14. Celule vide
Un alt exemplu mai complet de utilizare a celor dou atribute va fi dat mai jos:
<HTML><HEAD></HEAD><BODY>
<TABLE border=4 bordercolor=blue>
<TR> <TD colspan=3 align=center valign=25%>
<font sise=6 color =red>
atributele colspan si rowspan </font>
<TR><TD rowspan=3> a11<br>a21 <br>a31
<TD>a12<TD colspan=2 rowspan=3>
a13 a14<br>a23 a24 <BR> a33 a34
<TR> <TD>a22 <TR><TD>a32 <TR><TD>a41
<TD colspan=3 align=center> a42 a43 a44
</TABLE>
</BODY> </HTML>
Figura 5. 15 Atributele colspan i rowspan
Atributul NOWRAP
Pentru a afia coninutul unei celule pe un singur rnd se utilizeaz
atributul NOWRAP. n cazul c textul depete dimensiunea celulei, apare bara de
defilare pe orizontal, ca n exemplul de mai jos.
61
<HTML>
<HEAD> </HEAD>
<BODY>
<TABLE border=2 align=center
width=100% height=100%>
<TR><TD>XHTML
<TD nowrap>Extensible HyperText MarkupLanguage
<TR> <TD> Sigla <TD>Limbaj
</TABLE>
</BODY>
</HTML>
Figura 5. 16. Atributul NOWRAP al elementului TD sau TH
5.5. Gruparea liniilor i coloanelor unui tabel

5.5.1. Gruparea liniilor
Liniile unui tabel pot fi mprite n 3 categorii i anume:
Linii de antet
Linii de corp
Linii de final
Astfel, coninutul unui tabel se mparte n 3 seciuni cuprinse ntre
etichetele:
<THEAD> ... </THEAD> marcheaz liniile de antet
<TFOOT </TFOOT> marcheaz liniile de final de tabel
<TBODY> ... </TBODY> marcheaz liniile din corpul tabelului
OBSERVAII!
aceste blocuri sunt incluse n blocul <TABLE> ... </TABLE>, dar nu
sunt obligatorii n realizarea unui tabel
62
Fiecare bloc <TABLE> ... </TABLE> poate conine numai cte un bloc
de seciune
Etichetele de sfrit </THEAD>,</TFOOT>,</TBODY> sunt opionale.
Eticheta <THEAD> i <TFOOT> trebuie s apar dup <TABLE> i
nainte de <TBODY>. Browser-ul poate afia liniile de final nainte ca
liniile corpului s conin datele care se ncarc.
Atributele pentru aceste elemente se aplic pentru toate liniile care
cuprind blocurile, n lipsa altor formatri, i acestea sunt: align, valign,
bgcolor.
Fiecare din aceste elemente conin etichetele <TR> i <TD> obinuite.
Structura unui tabel care utilizeaz facilitatea de grupare de linii va fi:
<TABLE atribute>
<CAPTION > ... </CAPTION>
<THEAD>
<TR>
.
</THEAD>
<TFOOT>
<TR>
.
</TFOOT>
<TBODY>
<TR>
</TBODY>
</TABLE>
n exemplul din figura 5.9, se grupeaz liniile n blocuri de antet, subsol i
corp de tabel:
<TABLE border=3 bordercolor=light align=center
<CAPTION align=bottom> <B> Vnzri </B></CAPTION>
<THEAD>
<TR> <TH colspan=3>Beneficiul pe anul 2006
<TR><TH>Judet <TH> Semestrul I<TH> Semestrul II
</THEAD>
<TFOOT>
<TR><TH> TOTAL<TD> 30000 ron<TD> 55000 ron
</TFOOT>
<TBODY>
<TR<TH> Bucuresti <TD> 10000 ron<TD> 25000 ron
<TR><TH>Iasi <TD> 20000 ron <TD> 30000 ron
</TBODY>
</TABLE> </BODY> </HTML>
63
Figura 5. 17. Gruparea liniilor
5.5.2. Gruparea coloanelor

Pentru a formata coloanele unui tabel (formatarea liniilor se poate face cu
ajutorul atributelor lui TR sau TD, aa cum s-a artat mai sus), acestea se pot grupa
cu ajutorul elementului <COLGROUP> </COLGROUP>.
n blocul <COLGROUP> </COLGROUP> se introduc elemente
<COL> care definesc fiecare coloan din grup. Aceste elemente au atributele:
align indic alinierea pe orizontal a coninutului coloanelor grupate i
poate avea valorile: left (implicit), right, center i justify
span indic numrul coloanelor care se grupeaz
valign indic alinierea pe vertical a coninutului coloanelor grupate i
poate avea valorile: top, middle i bottom
width indic limea coloanelor i poate avea ca valori procente sau
numere care indic numrul de pixeli
bgcolor indic culoarea de fond a coloanelor grupate
NOT! Nu este necesar eticheta <COL> n cazul n care nu se grupeaz

mai multe coloane, atributele de formatare pentru o coloan se pot da n eticheta
<COLGROUP>.
n exemplul de mai jos se observ gruparea coloanelor n vederea
formatrii:
primele dou coloane au aceeai formatare (span=2): grosimea 200,
centrat pe mijloc att pe orizontal, ct i pe vertical, fundal galben
a treia coloan va avea alinierea pe vertical top, pe orizontal la
dreapta i fundalul cyan
64
<HTML>
<HEAD></HEAD>
<BODY>
<TABLE border=3 bordercolor=darkblue>
<COLGROUP valign=top>
<COL WIDTH=100 span=2
align=center valign=middle bgcolor=yellow>
<COL width=50 align=right bgcolor=cyan>
<TR height=50> <TD> POP <TD> ANA <TD> 20 ani
<TR> <TD height=50>ENE <TD>DAN<TD>19 ani
<TR> <TD>MANEA <TD height=50> ION <TD> 21 ani
</TABLE>
</BODY>
</HTML>
Figura 5. 18. Elementul COLGROUP
65
6. Imagini
n capitolele precedente s-au prezentat elementele de baz pentru realizarea

paginilor Web.
n acest capitol se descrie cum s mpodobim paginile cu imagini grafice
sugestive. Aceste imagini pot fi preluate din reeaua Internet, pot fi desene realizate
cu diverse programe grafice sau pot fi fotografii scanate. Imaginile pot folosi chiar ca
referine hipertext, aa cum se va arta n capitolul urmtor.
Imaginile pot fi descrcate de la adrese absolute sau relative. Adresele URL
(Uniform Resource Locator) reprezint standarde de identificare a resurselor (de
exemplu, fiiere) i pot fi adrese URL absolute i relative.
Adrese URL absolute

Adresele absolute identific locaia unui fiier imagine de pe Internet sau alte
calculatoare conectate la Internet i au sintaxa:
protocol/nume_calculator/cale/nume_fiier
Un exemplu de adres URL absolut:
http://www.spiruharet.ro/images/universitatea.jpg
unde
htpp:// este protocolul Internet utilizat
www.spiruharet.ro este numele calculatorului
images este calea pn la fiierul imagine dorit
universitatea.jpg este fiierul imagine a Universitii Spiru Haret
Adrese URL relative

O adres relativ identific locaia unei imagini, descriind o cale relativ la
directorul curent unde se afl fiierul imagine. Adresele relative se refer la
localizarea fiierului imagine de pe calculatorul personal i are sintaxa:
cale/nume_fiier . Referirea la:
directorul printe se poate face prin ../
directorul rdcin se poate face prin /
Un exemplu de adres URL relativ:
/../../../friend.jpg sau se mai poate scrie
c:/windows/web/wallpaper/friend.jpg
66
Exemple de utilizare a adreselor URL absolute i relative vor fi date n
exemplele urmtoare.
Exist numeroase formate grafice, dar cele mai rspndite sunt:
GIF (Graphics Interchange Format) introdus de Compuserve
JPEG (Joint Photographic Expert Group)
PNG (Portable Network Graphic Format Grafic portabil n reea)
Aceste formate sunt dependente de platform. Imaginile grafice sunt
construite din pixeli, care sunt puncte distincte de informaie de imagine. Fiecare
pixel necesit un bit de culoare. Principalele caracteristici ale formatelor de imagine
sunt: numrul de culori, compresia, transparena, ntreeserea i animaia.
Asemnrile i deosebirile dintre cele trei formate grafice sunt:
Imaginile GIF pot utiliza doar 256 de culori, avnd nevoie de 8 bii, n
timp ce formatele JPEG i PNG pot utiliza milioane de culori, avnd 24 de
bii de culoare, respectiv 32 de bii /pixeli de culoare. Ceea ce face
formatul GIF att de utilizat nu este numai paleta mic de culori (256), dar
i posibilitatea reducerii numrului de culori, astfel, dac este nevoie doar
de 2 culori, se utilizeaz numai un bit, ceea ce reduce dimensiunea
fiierului de 8 ori.
Toate aceste trei formate grafice pot comprima imaginea pentru a reduce
dimensiunile fiierelor. Comprimarea se poate face, n mod diferit, pentru
fiecare format, i, din aceste motive, ele pot avea dimensiuni mai mici
ntr-un format dect n altul.
Formatele GIF i PNG admit culoarea transparent, n timp ce formatul
JPEG nu admite transparena.
Formatele GIF i PNG admit animaia, n timp ce, cu formatul JPEG, nu
se poate obine animaie. De exemplu, pentru a obine animaie pentru
imagini GIF se poate folosi pentru Windows pachetul GIF Construction
Set, iar pentru Macintosh pachetul soft GIFBuilder.
Toate cele trei formate accept ntreeserea. De exemplu, cnd se
vizualizeaz o pagin web, se pot observa imaginile care apar linie cu
linie, de la forma brut pn la redarea final, aceasta reprezint
ntreeserea. Dei dimensiunea fiierelor crete cu pn la 10%, cu ajutorul
acestei ntreeseri, vizitatorul poate s-i fac o imagine despre ceea ce se
va descrca.
Avnd n vedere cele cinci caracteristici ale formatelor de imagine, acestea
pot fi recomandate:
GIF pentru majoritatea imaginilor din web, butoane, panouri publicitare,
desene etc., datorit dimensiunii mici a fiierelor.
JPEG pentru fotografii, cnd se dorete s se redea ct mai exact culoarea
real a imaginii.
PNG pentru desene complexe, dar i pentru fotografii, acesta fiind
formatul care mbin caracteristicile celor dou.
67
Unele imagini pot fi transformate n format GIF cu ajutorul unor programe
freeware (gratuite) sau shareware (contra cost), dar calculatoarele moderne accept
salvarea imaginilor direct n format GIF.
6.1. Introducerea imaginilor n paginile Web

Imaginile se introduc n pagini cu ajutorul tag-ului <IMG>, care este un
element inline, adic poate fi inserat oriunde n pagin.
Sintaxa acestui element este: <IMG atribute> .
n continuare este prezentat un exemplu de utilizare a elementului IMG:
<HTML>
<HEAD></HEAD>
<BODY>
Hotelul TRUMP Taj Mahal
<IMG src="Taj_Mahal.jpg" height =150 width = 150 border=4>
de la Atlantic City
<BODY>
<HTML>
Figura 6. 1. Atributul src al elementului IMG
Pentru ca acest exemplu s poat fi executat, trebuie ca fiierul

Taj_Mahal.jpg s fie n acelai folder cu pagina, deoarece nu s-a indicat nicio adres.
6.2. Atributele Elementului IMG

Atributele elementului IMG sunt: src, alt, align, border, height, width,
hspace, vspace. n continuare vor fi descrise succint aceste atribute.
Atributul SRC
Atributul src este un atribut obligatoriu al elementului IMG, care identific
fiierul ce conine imaginea care se dorete a fi inserat. Fiierele imagine pot avea
68
extensia: .jpg, jpeg, png etc. Fiierul care conine imaginea se gsete n directorul
curent (ca n exemplul de mai sus), n alt folder din calculatorul curent sau n reeaua
web.
n cazul n care fiierul se afl:
n alt locaie dect directorul curent, numele fiierului trebuie precedat de
calea relativ la directorul curent
n reeaua web, trebuie dat adresa URL absolut, ca de exemplu:
http://www.fmi.unibuc.ro./facmat.jpg
Atributul alt
Exist posibilitatea ca imaginile s nu se poat ncrca din diferite motive,
situaie n care se folosete atributul alt al elementului IMG. Valoarea acestui atribut
este un text, care va fi afiat n locul imaginii.
<HTML>
<HEAD></HEAD>
<BODY>
<IMG src="Taj_Mahali.jpg" height =150 width = 150 alt="Hotelul TRUMP
Taj Mahal">
de la Atlantic City
</BODY>
</HTML>
Figura 6. 2. Atributul alt al elementului IMG
Atributul align
Atributul align indic browser-ului cum va fi aliniat poza fa de text. n
lipsa unei opiuni, poza este plasat acolo unde este scris n cod (IMG este element
inline, iar textul ncepe de la baza pozei).
Valorile atributului sunt:
left aliniere la stnga i textul curge pe lng imagine n dreapta ei,
ncepnd din partea superioar
right aliniere la dreapta i textul curge pe lng imagine n stnga ei,
ncepnd din partea superioar
69
top textul este plasat n partea superioar a imaginii
middle textul are plasat, la mijlocul imaginii, numai primul rnd, restul
continund sub imagine
bottom textul este plasat n partea de jos a imaginii i continu sub imagine
n exemplul urmtor se poate vedea modul de aliniere a imaginii ntr-o

pagin:
<HTML>
<HEAD>
</HEAD>
<BODY>
<H2 align=center> Alinieri Imagini </H2>
<PRE> Aliniere Bottom </PRE>
<IMG src="Taj_Mahal.jpg" height =100 width = 100 align="bottom">
Aceasta este o imagine aliniata <I>bottom </I> care este alinierea implicita pe
verticala. Numai primul rind este aliniat bottom restul textului este sub imagine
<PRE> Aliniere Top </PRE>
<IMG src="Taj_Mahal.jpg" height =100 width = 100 align="top">
Aceasta este o imagine aliniata <I>Top </I, care este alinierea <I> sus</I> pe
verticala. Numai primul rind este aliniat <I>Top </I> restul textului este sub imagine
<PRE> Aliniere Middle </PRE>
<IMG src="Taj_Mahal.jpg" height =100 width = 100 align="middle">
Aceasta este o imagine aliniata <I>Middle</I> care este alinierea <i>pe centru </i>
pe verticala. Numai primul rind este aliniat <I>Middle </I> restul textului este sub
imagine
<PRE> Aliniere Left </PRE>
<IMG src="Taj_Mahal.jpg" height =100 width = 100 align="left">
Aceasta este o imagine aliniata <I> Left </I> care este alinierea <i>stinga</i> pe
orizontala. <p> Textul curge pe linga poza in dreapta ei
<PRE> Aliniere Right </PRE>
<IMG src="Taj_Mahal.jpg" height =100 width = 100 align="right">
Aceasta este o imagine aliniata <I>Right </i> care este alinierea <i>dreapta</i> pe
orizontala. <p> Textul curge pe linga poza in stinga ei
</BODY>
</HTML>
70
Figura 6. 3. Atributul align al elementului IMG
71
Atributul Border
Atunci cnd se insereaz o imagine, browser-ul o va afia fr chenar. Pentru
a aduga un chenar unei imagini se folosete atributul border=nr_pixeli, unde
nr_pixeli reprezint grosimea chenarului n pixeli. Valoarea implicit este 0.
Dac n exemplul din figura 6.1 se mai adaug acest atribut
<IMG src="Taj_Mahal.jpg" height =150 width = 150 border=4>
browser-ul va afia:
Figura 6. 4. Atributul border al elementului IMG
Atributele width i height

Imaginea este transferat de browser-e de la adresele URL la adresa de unde
se vizualizeaz pagina, la dimensiunile ei reale. Pentru a redimensiona o imagine pe
lime se folosete atributul width, iar pe nlime se folosete atributul height.
Redimensionarea unei imagini se face n mod absolut n pixeli sau prin
raportare la ecran, astfel c valorile acestor atribute pot fi date n:
Numere naturale, ce reprezint dimensiunea n pixeli
n procente, ce reprezint o fraciune din dimensiunea ferestrei
OBSERVAII!
Dac se modific doar o dimensiune, imaginea va fi afiat de browser
proporional.
Dac se modific ambele dimensiuni, imaginea va fi afiat de browser
deformat
Un exemplu de redimensionare a imaginii este dat mai jos.
<HTML> <HEAD></HEAD>
<BODY>
<IMG src="c:/carte_web/UnivSH.jpg" alt="Universitatea Spiru Haret">
72
<IMG src="c:/carte_web/UnivSH.jpg" alt="Universitatea Spiru Haret"
width=80 height=200>
<IMG src="c:/carte_web/UnivSH.jpg" alt="Universitatea Spiru Haret"
height=150>
</BODY> </HTML>
Figura 6. 5. Atributele width i height ale elementului IMG
Atributele hspace i vspace

Aceste atribute au acelai efect ca i atributele cu acelai nume ale
elementului TABLE, i, anume, asigur distana de la imagine la celelalte
componente din pagin, pe orizontal (hspace) i pe vertical (vspace), adic
definesc spaii albe n jurul imaginilor.
Un exemplu n care sunt folosite aceste atribute este dat mai jos.
<HTML><HEAD></HEAD>
<BODY>
Aceasta este sigla Universitatii Bucuresti. La pagina web www.unibuc.ro veti afla
detalii <BR>
<IMG src="C:/CARTE_WEB/UB_ro.jpg" width=300 hight=100 hspace=50
vspace=20 align=right>
n cei aproape 140 de ani de existen, ea a ajuns s aib un solid prestigiu naional i
internaional. <BR> Din trecutul UB
nfiinat prin Decretul nr. 756 din 4 / 16 iulie 1864 al Domnitorului Alexandru Ioan
Cuza i reclamndu-se ca succesoare a structurilor de nvmnt superior inaugurate
de Academia Domneasc (1694), Universitatea din Bucureti a contribuit i
73
contribuie n mod decisiv la dezvoltarea i modernizarea nvmntului, tiinei i
culturii romneti.
</BODY> </HTML>
Figura 6. 6. Atributele hspace i vspace ale elementului IMG
Atributul clear al elementului BR

Dac se dorete a se terge textul din jurul unei imagini se folosete
elementul <BR clear=valoare>, unde valoare poate fi:
all se terge tot textul din jurul imaginii
left se terge tot textul din stnga imaginii
right se terge tot textul din dreapta imaginii
none se las textul din jurul imaginii
n exemplul de mai sus se adaug <BR clear=right>, dup elementul IMG
Figura 6. 7. Atributul clear al elementului BR
74
7. Legturi (Link-uri)
Spaiul World Wide Web (www) a fost creat ca un spaiu de resurse

multimedia, stocate pe servere plasate n ntreaga lume i conectate la cea mai mare
reea de calculatoare publice din lume, Internet.
Pn acum am nvat s crem documente HTML n care am introdus text
i imagini. n acest capitol vom arta cum putem accesa orice resurs Web, Internet
i intern cu ajutorul legturilor (link-uri). n HTML link-urile se mai numesc i
referine sau hiperlegturi.
Hiperlegturile au urmtoarele roluri:
permit trecerea de la o pagin la alta de pe Web i revenire la pagina
iniial prin apsarea butonului Back al browser-ului
permit trecerea de la o pagin la alta de pe calculatorul propriu
permit trecerea la fiiere non web de pe Internet (ftp, telnet etc.)
permit trecerea la fiiere non HTML (.txt, .jpg, .pdf etc.)
permit vizitarea unei pagini ncepnd dintr-un anumit loc, renunnd la
barele de defilare
permit trimiterea unui e-mail
Cnd se execut o hiperlegtur, cu ajutorul mouse-ului (clic cu butonul
stng pe legtur) sau de la tastatur (se apas ENTER), se execut urmtorul flux
de evenimente:
browser-ul identific adresa URL a resursei cerute
browser-ul trimite o cerere ctre server-ul care gzduiete resursa
cerut
server-ul Web analizeaz cererea, identific locaia resursei cerute i
trimite napoi browser-ului client, resursa solicitat
7.1. Elementul A
Pentru a crea o legtur se folosete marcajul ancor, care are sintaxa:
<A atribute> coninut </A>.
Coninutul dintre marcajele <A> i </A> poate fi text i/sau imagine, este
afiat de browser sub form de legtur (colorat i subliniat), i poate accepta
comenzi de la mouse (un clic) sau de la tastatur (ENTER). Cnd este deasupra
unei legturi, cursorul grafic ia forma unei mini -, indicndu-ne astfel c
browser-ul este pregtit s descarce resursa Internet de la adresa URL indicat.
Dac un document are mai multe legturi ne putem deplasa de la una la alta i cu
75
mouse-ul i cu ajutorul tastei TAB, iar pentru a face o legtur activ se execut
clic cu butonul stng pe legtur sau se tasteaz ENTER. La un moment dat doar o
legtur poate fi activ i n jurul coninutului legturii este afiat un chenar de
ctre unele browser-e.
Atributele marcajului <A>
Atributele marcajului <A> sunt: href, target, title, name.
Atributul HREF (referin hipertext)
Acest atribut este obligatoriu pentru elementul legtur (ca src pentru
elementul img), are sintaxa href=adresa URL i are rolul de a identifica o adres
URL absolut (de pe Internet) sau relativ (local).
n exemplul de mai jos dm o referin ctre un fiier local, flori.jpg, i
ctre pagina Universitii Bucureti, de pe WEB.
<HTML>
<HEAD> </HEAD>
<BODY>
Florile mele preferate
<A href="flori.jpg"> CRINI </A>
<P>
Detalii despre Universitatea Bucuresti
<A href="http://www.unibuc.ro">UnivBuc</A>
</P>
</BODY>
</HTML
Figura 7. 1. Legturi
Atributul TARGET
Cnd utilizatorul activeaz o legtur, browser-ul nlocuiete fereastra care
conine legtura cu o nou fereastr, specificat de adresa URL din href. Atributul
target face s se schimbe aceast operaie implicit i el are sintaxa
76
target=nume, unde nume definete fereastra n care va fi ncrcat noua
pagin. Dac nu exist nicio fereastr cu acest nume, va fi creat o fereastr nou
cu acest nume.
Numele este orice ir de caractere sau valori constante: self-implicit,
blank, parent, top. Pot fi ncrcate n aceeai fereastr mai multe pagini i, n acest
caz, cu Back i Forward, se vizualizeaz paginile ncrcate.
n exemplul din figurile 7.3 i 7.9, se utilizeaz acest atribut.
Atributul TITLE
Acest atribut are un caracter general i poate fi ataat la majoritatea
elementelor HTML. Sintaxa acestui element este: title=valoare. Cnd mouse-ul
este deasupra coninutului elementului <A> coninut </A> se transform ntr-o
mn i va afia valoarea atributului TITLE, ntr-o sugestie de instrument (ntr-un
cadru galben).
Atributul NAME
Acest atribut este utilizat pentru a defini o ancor n interiorul unei pagini.
Sintaxa acestui atribut este: name=valoare. Atributul va fi exemplificat n
seciunea 7.7.
7.2. Legturi ctre alte pagini Web

Dac se dorete accesarea unei pagini de pe alt site, valoarea atributului
href este o adres URL absolut. Amintim c o adresa URL absolut are sintaxa:
protocol /nume-calculator/cale/fiier
unde protocol poate fi, de exemplu, http.
Un exemplu este dat mai jos
<HTML>
<HEAD>
</HEAD>
<BODY>
Pentru mai multe informatii
Despre <BR> invatamant vizitati site-ul
Ministerul Educatiei si Cercetarii
<A href=http://www.edu.ro> MEC
</A>
</BODY>
</HTML>
Figura 7. 2. Legturi la adrese WEB
Acelai rezultat obinem i dac scriem i numele fiierului index care se
ncarc
<A href=http://www.edu.ro/index .php> MEC </A>
77
Dac se dorete s se viziteze alt pagin a respectivului site, se scrie
numele fiierului .html, respectiv, ca n exemplul de mai jos:
<BODY>
<A href="http://www.edu.ro/index.php/articles/c108/" target="univ">
Lista Universitati </A> <BR>
<A href="http://www.edu.ro/index.php/articles/c487/" target="univ">
Lista Universitati Stat </A> <BR>
<A href="http://www.edu.ro/index.php/articles/3880" target="univ">
Lista Universitati Particulare Acreditate </A><BR>
<A href="http://www.edu.ro/index.php/articles/3882" target="univ">
Lista Universitati Particulare Autorizate </A><BR>
<A href= "http://www.edu.ro/index.php/articles/3881" target="univ">
Lista Postuniversitare </A><BR>
</BODY>
</HTML>
Figura 7. 3. Legturi la pagini cu atributul target
7.3. Legturi cu imagini

Aa cum am specificat mai sus, o legtur poate fi creat i cu ajutorul unei
imagini. Ca i n cazul n care coninutul unei legturi este un text, i n cazul n
care coninutul este o imagine, accesarea paginii se face cu un clic, sau un ENTER
pe imagine.
Utilizarea unei imagini ntr-o legtur este exemplificat mai jos:
<HTML>
<HEAD> <TITLE> Legaturi cu imagini </TITLE> </HEAD>
<BODY>
Facultatea de Matematica-Informatica UnivBuc
<A href=http://www.fmi.unibuc.ro>
<IMG src= "C:\My Documents\My Pictures\facmat.bmp" width=70 height=70>
</A>
</BODY>
</HTML>
78
Figura 7. 4. Legturi cu imagine
Imaginea dintr-o legtur apare ncadrat de un chenar de grosime

standard. Dac se dorete ca imaginea s nu fie ncadrat de chenar, se folosete
atributul border=0 a tag-ului <IMG>, astfel:
<A href=http://www.fmi.unibuc.ro>
<IMG src= "C:\My Documents\My Pictures\facmat.bmp" border=0
width=70 height=70> </A>
Dac n site-ul vizitat nu exist o imagine ca fiier .gif sau .jpg, atunci se
copiaz imaginea existent cu Print Screen, se deschide Paint i se lipete (Paste)
imaginea. Se decupeaz din imagine ce ne intereseaz i se copiaz ntr-un nou
fiier care se salveaz cu nume.bmp.
Dac imaginea dintr-o pagin este un fiier imagine, se d clic dreapta i
din Properties se afl numele fiierului. Se pot folosi i imagini din calculatorul
nostru i atunci adresa URL a atributului src este una relativ.
Un link poate fi format i din text i din imagine ca n figura de mai jos:
<HTML>
<HEAD> <TITLE> Legaturi cu text si cu imagini </TITLE> </HEAD>
<BODY>
Facultatea de Matematica-Informatica UnivBuc
79
<A href=http://www.fmi.unibuc.ro> UnivBuc
<IMG src="C:\My Documents\My Pictures\facmat.bmp" width=70
height=70> </A>
</BODY> </HTML
Figura 7. 5. Legturi cu imagine i text
7.4. Legturi cu adrese URL relative

Adresele URL relative sunt acele adrese care fac referire la pagini de pe
calculatorul propriu, indicnd cale/nume-fiier, fr a fi prefixate de protocol i
nume calculator.
n adresele relative putem folosi caracterele:
../ pentru directorul printe
/ pentru directorul rdcin.
Se cunoate faptul c un site poate s aib paginile (fiierele) organizate
ntr-o structur arborescent de directoare. S presupunem c avem structura
arborescent din figura de mai jos i atunci din pagina pag_3.htm din directorul
Proiectare se pot accesa celelalte pagini, utiliznd urmtoarele referine:
/pag_0.pdf (din rdcin)
../../../pag1.htm
/SISTEM/IMAGINI/pag_3.jpg
../../../IMAGINI/pag_1.gif
pag_2.htm (director curent)
EXPLOATARE/pag_5.htm
../../../AUDIO_VIDEO/film.avi
/SISTEM/AUDIO_VIDEO/aplauze.wav
../pag_1.html
80
C:/
Pag_0.pdf
SISTEM
Pag_1.html
Pag 2.pdf
PROIECT IMAGINI AUDIO-VIDEO

Pag_1.txt Pag_1.gif aplauze.wav
Pag_2.gif film.avi
Pag_3.jpg
Pag_4.eps
ANALIZ
Pag_1.htm
PROIECTARE
Pag_2.htm
Pag_3.htm
EXPLOATARE
Pag_4.htm
Pag 5.htm
Figura 7. 6. Arbore de foldere
Dac dorim s deschidem fiiere audio (.wav,.mp3) trebuie s avem

instalat plac de sunet i un program de redare, de exemplu WINAMP. De
exemplu, la adresa C:/windows/media se afl fiere audio.wav.
Un exemplu de cod HTML, utiliznd legturile relative conform figurii
7.6, este redat mai jos:
<HTML>
<HEAD>
</HEAD>
<BODY>
<A href="../../../AUDIO-VIDEO/aplauze.wav"> APLAUZE</A> <BR>
<A href="C:/WINDOWS/MEDIA/ringin.wav"> Sonerie </A> <BR>
<A href="D:/poze/Craciun/mvi_3920.avi"> Craciun 2006 </A><BR>
81
<A href=/SISTEM/IMAGINI/pag_3.jpg> POZA FIRMA</A> <BR>
<A href=EXPLOATARE/pag_4.htm> Documentatie Exploatare</A><BR>
<A href=pag_2.htm> Proiectare </A>
</BODY> </HTML>
Figura 7. 7. Legturi cu adrese URL relative
7.5. Legturi ctre informaii non Web

Se pot face referine i la adrese URL absolute de pe Internet, care nu sunt
resurse Web. n adresele URL absolute se nlocuiete protocolul http cu alte
protocoale non Web (ftp, telnet, gropher etc.)
FTP (File Transfer Protocol) a existat naintea spaiului Web i permitea
accesul la hard-disk-uri externe pentru a putea lista directoare sau fiiere. Un
exemplu este dat mai jos:
<HTML>
<HEAD> </HEAD>
<BODY>
<A href=ftp://gatekepper.dec.com >Vizitati locatia</A>
<A href=ftp://ftp.arsc.edu> Educatie</A>
<A href=telnet://well.com/ > Whole Earth</A>
<A href=gopher://gopher.loc.gov/> GongresGopher</A>
</BODY>
</HTML>
82
Figura 7. 8. Legturi la site-uri non Web
7.6. Legturi ctre fiiere non HTML

Se pot stabili legturi ctre orice tip de fiiere, nu numai html, ca de
exemplu .pdf, .txt, .gif etc.
n aceste condiii se ntlnesc dou situaii:
browser-ul nu poate lucra cu fiierul ntlnit i atunci ncearc s-l
descarce, executnd operaia download. Va aprea fereastra:
Se opteaz dac fiierul s fie deschis sau salvat. n unele cazuri Open este
implicit, adic dup download-are este lansat programul care-l prelucreaz, de
exemplu un sunet i un film.
De exemplu:
<A href=d:/poze/craciun_2006.avi> MOS CRACIUN</A>
Fiierele .avi se pot gsi i pe site-uri, dar dureaz mult transferul pe
calculatorul nostru
browser-ul cunoate tipul de fiier i acesta va fi deschis n fereastra sa.
Utiliznd figura 7.6, avem codul HTML:
83
<HTML>
<HEAD>
</HEAD>
<BODY>
<A Href=../../../pag_2.pdf target=FPDF>
Fisier PDF </A> <BR>
<A Href=/pag_0.pdf target=FPDF>
Alt Fisier PDF </A> <BR>
<A Href=../../../pag_1.txt target=FTXT>
Fisier text </A> <BR>
<A Href=/SISTEM/IMAGINI/pag1.gif:/
target=FGIF> DESEN</A>
</BODY>
</HTML>
Figura 7. 9. Legturi la fiiere non HTML
Din exemplul de mai sus reiese c dou fiiere se deschid n aceeai

fereastr FPDF. Pentru a le vizualiza folosim butoanele Back i Forward.
7.7. Legturi interne n cadrul unei pagini

n aceast seciune vom defini ancore (inte) ntr-o pagin, adugarea
legturilor ctre aceste inte, precum i legturi ctre inte din documente externe.
Dac documentele HTML sunt prea lungi i sunt greu de parcurs, pentru a
evita parcurgerea cu bara de defilare, se definesc ancore.
Ancorele ne permit s ne deplasm rapid ntr-un loc din document. Ancora
este un identificator al nceputului unui element dintr-o pagin web. Dac au fost
definite ancore ntr-o pagin, se pot crea legturi ctre respectivele ancore.
Ancorele se pot defini n dou moduri:
utiliznd orice element HTML, inclusiv elementul A cu atributul ID, de
exemplu: <P id=valoare_id> sau <A id=valoare_id> </A>
utiliznd tag-ul <A> cu atributul name (definit n seciunea 7.1), de
exemplu: <A name=valoare_nume> </A>
Pentru a crea o legtur la o ancor se folosete tag-ul <A>...</A> cu
atributul href, care are ca valoare o referin de ancor, precedat de simbolul #,
astfel:
# valoare_nume
# valoare_id
Fiierul trebuie s fie suficient de mare, astfel nct secvena care conine o
ancor s nu fie vizibil n momentul trimiterii ctre ea.
n exemplul urmtor s-a creat un fiier, n care au fost aduse fiierele de la
adresele din exemplul 7.3. Din cauza dimensiunii mari a fiierului, s-a oprit din
84
surs numai definirea ancorelor i referirea lor, dup cum se poate observa n codul
de mai jos.
<HTML><HEAD>
</HEAD>
<BODY>
<PRE>
<A id="Lista_tip_univ"> </A>
Lista tipurilor de universitati se afle la adresa
http://www.edu.ro/index.php/articles/c108/
Instituii de nvmnt superior
Lista Instituiilor de nvmnt superior de stat
Lista Instituiilor de nvmnt superior particulare acreditate
Lista Instituiilor de nvmnt superior particulare autorizate provizoriu
Lista colilor de Studii Academice Postuniversitare
</PRE>
<PRE>
<A id="stat"> </A>
Lista Universitatilor de Stat se afla la adresa
http://www.edu.ro/index.php/articles/c487/
Instituii de nvmnt Superior de Stat
</PRE>
..........
<PRE>
<A id="part_acred"> </A>
Lista Universitatilor Particulare Acreditate se afla la adresa
http://www.edu.ro/index.php/articles/3880

Lista Instituiilor de nvmnt superior particulare acreditate
Instituii de nvmnt superior particulare acreditate prin lege, sau existente
nainte de 1989* (teologice):
......
</PRE>
<PRE>
<A id="part_autor"> </A>
Lista Universitatilor Autorizate se afla la adresa
Lista Instituiilor de nvmnt superior particulare autorizate provizoriu
.........
</PRE>
<PRE>
<A id="postuniv"> </A>
Lista Scolilor Postuniversitare se afla la adresa
85
Lista colilor de Studii Academice Postuniversitare
coli de studii academice postuniversitare:
....</PRE>

<A href="#Lista_tip_univ"> tip_univ </A> <BR>
<A href="#stat"> Universitati Stat </A> <BR>
<A href="#part_acred"> Universitati Part_Acreditate </A> <BR>
<A href="#part_autor"> Universitati Part_Autorizate </A> <BR>
<A href="#postuniv"> Scoli Postuniversitare </A> <BR>
</BODY>
</HTML>
Figura 7. 10. Ancore
Referiri la ancorele dintr-un document HTML (pagin) se pot face i din

exterior, din alt pagin.
<A href=legaturi.html#stat> Universitatile de Stat </A>
Se observ c referina de ancor se adaug adresei URL a paginii
respective, fiierul legaturi.html avnd definite ancorele.
Ancorele ne permit s parcurgem uor o agend, care este o list de
dimensiuni mari, cu informaii sortate alfabetic, ca n exemplul de mai jos.
86
S considerm o agend cu salariaii unei firme:
<HTML>
<HEAD> </HEAD>
<BODY>
<H1> Agenda <H1>
<A href="#a-c"> [A-C] </A>
<A href="#d-h"> [D-H] </A>
<A href="#i-l"> [I-L] </A>
<A href="#m-n"> [M-N] </A>
<A href="#o-s"> [O-S] </A>
<A href="#t-w"> [T-W] </A>
<H2> <A id="a-c"> [A-C] </A>
<H2>
Antonescu Ion <br>
Badila Ana <br>
Constantinescu Ana <br>
Constantinescu Dan <br>
<H2> <A id="d-h"> [D-H] </A>
<H2>
Dorobantu Ion<br>
Ene Horia<br>
Horia .<br>
<H2> <A id="i-l"> [I-L] </A> <H2>
Ionescu Ion<br>
Jeny Amalia<br>
Login Ana<br>
<H2> <A id="m-n"> [M-N] </A>
<H2>
Manea Flori<br>
Niculescu Silvia<br>
<H2> <A id="o-s"> [O-S] </A>
<H2>
Oprea Florin<br>
Radulescu Mihai<br>
Sandulescu Radu <br>
<H2> <A id="t-w"> [T-W] </A>
<H2>
Tomescu Emil<br>
Udrea Xenia<br>
</BODY> </HTML>
Figura 7. 11. Salt ntr-o agend
87
7.8. Trimiterea automat a unui e-mail
Dac dorim s trimitem un e-mail dintr-o pagin, se creeaz o legtur la o
adres e-mail. Legtura va avea atributul href a crui valoare este mailto (protocol
pentru pot), urmat de: i de o adres de e-mail valid, de exemplu:
<A href=mailto:niculescurodica@yahoo.com> Puteti sa-mi scrieti </A>
Se poate folosi elementul <ADRESS> de formatare logic, care are rolul
de a evidenia o adres (mesajul se va scrie la nceput de linie), aa cum reiese din
exemplu de mai jos. Sintaxa elementului ADRESS este:
<ADRESS> <A href=mailto:niculescurodica@yahoo.com> Puteti sa-mi scrieti
</A> </ADRESS>
Cnd se execut clic pe o legtur e-mail, se va deschide o aplicaie e-mail
care are, n cmpul To, adresa din legtur i care permite s introducem mesajul.
Se poate trece i un subiect, care va fi desprit de adres prin ?, precum i un
text n interiorul mesajului (de forma body=text) i care se va separa de subiect prin
caracterul &, ca n exemplul de mai jos:
<HTML>
<HEAD>
</HEAD>
<BODY>
<ADRESS> <A href=mailto:niculescurodica@yahoo.com? subject=Anunt&
Body=Va rog sa-mi scrieti!> Astept mesaje </A> </ADRESS>
</BODY>
</HTML>
Figura 7. 12. Legturi la adrese e-mail
88
7.9. Culorile legturilor
O legtur poate fi n una din strile:
activ
vizitat
nevizitat
n funcie de starea n care se afl, o legtur are o anumit culoare i
anume:
Starea activ are:
Culoarea implicit #FF0000 (rou)
Culoarea se poate schimba cu atributul alink=culoare al
elementului BODY
Starea vizitat are:
Culoarea implicit #800080 (purple)
Culoarea se poate schimba cu atributul vlink=culoare al
elementului BODY
Starea nevizitat are:
Culoarea implicit #0000FF (albastru)
Culoarea se poate schimba cu atributul link=culoare al
elementului BODY
<HTML>
<HEAD>
</HEAD>
<BODY alink=green
vlink=magenta
link=darkblue>
<A href=/pag_1.html>Analiza</A>
<A href=/pag_2.html>Proiectare</A>
<Ahref=/pag_0.pdf>Prima pagina</A>
</BODY>
</HTML>
Figura 7. 13. Culorile legturilor
89
8. Elementele de structur: HTML, HEAD i BODY
Orice program HTML este cuprins n blocul exterior: <HTML>.

</HTML>, care mai conine un bloc de antet <HEAD></HEAD>, un bloc de
corp <BODY></BODY> i opional unul sau mai multe blocuri de comentarii
<!- coninut --> i blocuri de centrare <CENTER></CENTER>.
Elementele HTML, HEAD i BODY ajut la structurarea unui document
i, din aceast, cauz se mai numesc i elemente de structur.
Deci, structura general a unui document HTML este:
<HTML>
<HEAD>
..
</HEAD>
<BODY>
..
</BODY>
</HTML>
n continuare se vor prezenta elementele i atributele blocurilor de antet
i de corp.
8.1. Blocul de antet <HEAD></HEAD>

Vom prezenta elementele HTML i atributele acestora care se scriu n
blocul de antet al documentului. Aceste elemente sunt: <TITLE>, <BASE>,
<META>, <STYLE>, <SCRIPT>. Aceste elemente nu sunt afiate de browser-e.
Etichetele BASE i META sunt etichete simple, n timp ce TITLE, STYLE,
SCRIPT sunt etichete pereche.
8.1.1. Elementul TITLE

Acest element permite introducerea unui titlu pentru o pagin web, titlu
care va fi scris ntre tag-urile <TITLE> i </TITLE>. Despre acest element HTML
s-a discutat n capitolul 3, fiind un element de formatare logic. Amintim c textul
care apare ntre aceste marcaje apare n antetul ferestrei browser-lui.
90
<HTML>
<HEAD>
<TITLE>
Structura paginii WEB
</TITLE>
</HEAD>
<BODY>
Aceasta este structura general a unui document HTML
</BODY>
</HTML>
Figura 8. 1. Elementul TITLE
8.1.2. Elementul BASE

Elementul BASE are rolul de a preciza o adres de baz pentru resurse, care
va fi ataat automat la adresa URL dintr-o referin, ceea ce ne permite s evitm
rescrierea codului (dac toate legturile indic spre acelai server). Singurul atribut
al elementului BASE este href=adresa URL
Cnd se utilizeaz elementul BASE ntr-o pagin, adresa URL propriu-zis
este o concatenare a adresei atributului href din BASE cu valoarea atributului href
sau src a elementelor A i IMG. Acest URL concatenat va aprea n bara de adrese
a browser-lui.
n exemplul de mai jos s-a folosit codul din exemplul 7.3. Se observ c
toate link-urile au o parte comun: http://www.edu.ro/index.php/articles/, care va
fi trecut ca valoare a atributului href, a elementului BASE.
<HTML>
<HEAD>
<BASE href="http://www.edu.ro/index.php/articles">
<TITLE> Elementul BASE </TITLE>
</HEAD>
<BODY>
<A href="c108"> Lista Universitati </A> <BR>
91
<A href="c487"> Lista Universitati Stat </A><BR>
<A href="3880"> Lista Universitati Particulare Acreditate </A> <BR>
<A href="3882"> Lista Universitati Particulare Autorizate </A> <BR>
<A href="3881"> Lista Poastuniversitare </A> <BR>
</BODY> </HTML>
Figura 8. 2. Elementul BASE
8.2.3. Elementul META

Acest element ne permite s inserm n paginile web acele informaii care
s le fac uor de indexat de ctre aplicaiile de cutare/indexare pe web (yahoo,
google, altavista etc.)
Informaiile coninute de acest element nu sunt afiate de ctre browser,
dar este indicat s-l folosim pentru ca informaiile din site-ul nostru s fie
accesibile cu ajutorul roboilor Internet i a motoarelor de cutare. Un antet poate
conine mai multe elemente META.
Atributele elementului META sunt:
Name cu valorile posibile:
author
description
keywords
copyright
92
http-equiv valorile posibile sunt:
from
replay-to
creation-date
expires
refresh
pragma
Content utilizat pentru stocarea informaiilor valorilor celor dou

atribute de mai sus (name i http-equiv). Valorile posibile sunt iruri de
caractere ntre ghilimele. n general, atributele META sunt pereche.
De exemplu: Name=author content =Ion
Scheme utilizat pentru rafinarea informaiei din celelalte atribute.
Valorile posibile sunt iruri ntre ghilimele.
Lang utilizat pentru precizarea limbii. Valorile posibile sunt
identificatorii de limb ntre ghilimele (ro, uk, en etc.)
Ultimele dou atribute (scheme i lang) nu sunt atribute pereche.
Elementul META are i alte atribute, dar foarte rar sunt folosite. Aceasta
din cauz c au aprut alte modaliti prin care aceleai efecte sau chiar mai multe
se pot rezolva mai eficient.
Realizatorii motoarelor de cutare au dorit s ajute programatorii paginilor
web cu elementul META pentru a evidenia coninutul paginilor. Unii autori au
introdus cuvinte care nu au legtur cu paginile web, doar pe motiv de a prea mai
interesani. Eticheta META devine astfel inutil, poate o unealt pentru SPAM
(informaii nedorite). Din acest motiv, unele motoare au renunat definitiv la
informaiile din META, iar altele, dimpotriv, dac paginile nu conin elemente
META, pun paginile la sfritul listei. Exist firme specializate care, contra cost,
optimizeaz site-urile pentru motoarele de cutare (SEO-Search Engine
Optimization).
NOT! n atributele elementului META nu se folosesc cuvinte care nu
sunt incluse n pagin i de asemenea nu se repet cuvinte.
n continuare se trec n revist atributele enumerate mai sus.
Descrierea unei pagini (fiier html)
Se utilizeaz eticheta META cu atributele:
name=description content=sir de caractere
Motorul de cutare va afia textul (valoarea atributului content); n lipsa
acestui atribut, motorul va afia primele rnduri ale paginii.
Cuvinte cheie
Cuvintele cheie specific motoarelor de cutare cuvintele dup care s fie
regsit un anumit site. Aadar, cuvintele cheie declarate trebuie s se regseasc n
93
interiorul paginii. n exemplul anterior, dac se introduc dou elemente META,
browser-ul va afia aceeai fereastr ca n figura 8.2, cu excepia antetului de titlu.
<HTML>
<HEAD>
<TITLE> Elementul META_KEY </TITLE>
<META name="description" content="invatamint suparior">
<META name="keywords" content=" universitati, stat, particulare,
postuniversitare">
</HEAD>
<BODY>
<A href="c108"> Lista Universitati </A> <BR>
<A href="3881"> Lista Poastuniversitare </A> <BR>
</BODY>
</HTML>
Figura 8. 3. Elementul META cu atributele name i keywords
Author i copyright
Pentru a introduce informaii despre autor sau o autoritate i despre
drepturile de copyright se introduc dou etichete <META> cu valorile atributelor
name, author i respectiv copyright. Deoarece aceste informaii nu sunt afiate
de browser este indicat s se introduc i n blocul <BODY></BODY> al
fiierului informaii, ca n exemplul urmtor (se observ c pentru a obine
simbolul se utilizeaz secvena &copy).
<HTML>
94
<HEAD>
<TITLE> Elementul META_Author</TITLE>
<META name"description" content="Carte WEB">
<META name="author" content="Rodica Niculescu>
<META name="copyright" content="Editura Spiru Haret">
</HEAD>
<BODY>
copyright©2006, Editura Spiru Haret
</BODY> </HTML>
Figura 8. 4. Elementul META cu atributele author i copyright
Http-equiv cu valorile from i replay

Pe lng autorul unei pagini se poate indica i numele i adresa
persoanei de contact a paginii, introducnd dou etichete <META> cu valorile
atributului http-equiv=from i http-equiv=replay-to, iar valoarea atributului
pereche content=adresa e-mail. Browser-ul va afia aceeai fereastr ca n
figura 8.4, singura diferen fiind titlul din bara de antet a ferestrei.
<HTML>
<HEAD>
<TITLE> Elementul META_http-equiv</TITLE>
<META name="author" content="Rodica Niculescu">
<META http-equiv="from" content="rodicaniculescu@gmail.com">
<META http-equiv="replay-to" content="editura_spiruharet@yahoo.com">
</HEAD>
95
<BODY>
<P> copyright©2006, Editura Spiru Haret </P>
</BODY>
</HTML>
Data crerii i data actualizrii unei pagini

Pentru a transmite motoarelor de cutare informaii despre data crerii i
data actualizrii unei pagini se pot folosi dou elemente <meta> cu valorile
atributului http-equiv = creation-date i http-equiv = expires, iar valorile
atributului pereche content sunt date calendaristice cu formatul implicit: ddd,dd
mmm yyyy hh:mm: ss: ttt unde:
ddd reprezint primele trei litere ale zilei
dd reprezint ziua
mmm reprezint primele trei litere ale lunii
yyyy reprezint anul
hh:mm:ss reprezint ora, minutele i secundele
ttt reprezint standardul de timp (de exemplu GMT)
n exemplul de mai sus se adaug dou elemente META, pentru data
curent i data ultimei actualizri. Pentru a schimba formatul implicit se poate
folosi atributul scheme astfel:
<HTML>
<HEAD>
<META name="author" content="Rodica Niculescu">
<META http-equiv="from" content="rodicaniculescu@gmail.com">
<META http-equiv="replay-to" content="editura_spiruharet@yahoo.com">
<META http-equiv="creation_date" content="Jun 20 Dec 2007 12:00:00
GMT">
<META http-equiv="expires" content="10-01-2007"
scheme="Month_Day_Year">
</HEAD>
<BODY>
<P> copyright©2006, Editura Spiru Haret </P>
</BODY>
</HTML>
Refresh i Pragma
Pentru transformarea, remprosptarea sau redirecionarea unei pagini se
poate folosi atributul http-equiv cu valorile refresh i pragma. n cazul
remprosptrii paginii, valoarea atributului content este un numr, care indic
96
numrul de secunde dup care pagina se remprospteaz (refresh). n cazul
redirecionrii paginii la o alt pagin, dup un numr de secunde, valoarea
atributului content este : nr secunde;adresa URL, unde adresa URL este adresa
noii pagini. Pentru a descrca o pagin ori de cte ori se acceseaz pagina, se
folosete elementul pragma.
n exemplu de mai jos se folosete elementul Meta cu atributul
http-equiv = refresh.
<HTML>
<HEAD>
<META http-equiv="refresh" content="120">
</HEAD>
<BODY>
<P> Fisierul se va actualiza automat la 2 minute</P>
</BODY>
</HTML>
Figura 8. 5. Elementul META cu atributul refresh
Pentru redirecionarea unei pagini, la un anumit interval de timp (dat n

secunde) se introduce un nou element META, ca n exemplul de mai jos.
<HTML>
<HEAD>
<META http-equiv="refresh"
content="30;URL=www.editura.spiruharet.com">
</HEAD>
<BODY>
Fisierul va fi redirectionat automat la 2 minute la adresa data
</BODY>
</HTML>
97
Figura 8. 6. Elementul META cu atributul refresh de redirecionare
Lang
Acest atribut al elementului META se utilizeaz pentru a specifica limba
utilizat pentru metadate. Valoarea acestui atribut poate fi dat prin dou caractere
(exemplu: ro) sau printr-o secven de 5 caractere, indicnd dialectul unei limbi
(exemplu: en-us)
De exemplu:
<meta name= keyords content=clase, obiecte, attribute lang=ro>
Elementul STYLE
Acest element din blocul de antet este utilizat pentru introducerea stilurilor.
Foile de stil (CSS-Cascading Style Sheets) se introduc ntre etichetele <STYLE>
i </STYLE>.
Foile de stil pot fi ns definite i n fiiere separate sau inline, n corpul
programului. Stilurile vor fi tratate n capitolele 13 15.
Elementul SCRIPT
Acest element din blocul de antet este utilizat pentru introducerea unor
secvene de program de scriptare n cadrul paginilor web.
Scripturile, ca i stilurile, pot fi introduse i n fiiere separate sau n
corpul programului.
Exist mai multe limbaje de scriptare, ca de exemplu, JavaScript, Jscript,
VBScript etc. n aceast carte va fi tratat scriptul JavaScript, n capitolele 16 20.
8.2. Blocul de corp <BODY></BODY>

Acest bloc cuprinde corpul paginii i conine toate tag-urile prezentate n
capitolele precedente. n continuare vom prezenta atributele elementului BODY,
care sunt opionale, aa cum s-a utilizat n exemplele de pn acum.
98
Atributele elementului BODY sunt:
Background indic o imagine care dorim s apar pe fundal.
Imaginea se va repeta att pe orizontal, ct i pe vertical pn va
umple tot corpul. Acest atribut a fost descris i la tabele, fiind atribut i
al elementelor <TABLE>, <TR> i <TD>.
Bgcolor indic culoarea de fond. Dac se folosesc ambele atribute i,
n cazul n care imaginea nu se ncarc, atunci apare culoarea de fond,
altfel apare imaginea.
Text indic culoarea folosit pentru textul coninut n blocul
<BODY. </BODY>.
Atribute de margine Browser-ele utilizeaz atribute diferite pentru
margini. Valoarea atributelor de margine este un numr ntreg pozitiv
i reprezint distana n pixeli de la coninut la marginile ferestrei.
Pentru Internet Explorer exist 4 atribute pentru margini:
leftmargin (valoare implicit 10 px)
rightmargin (valoare implicit 10 px)
topmargin (valoare implicit 15 px)
bottommargin (valoare implicit 0 px)
Pentru Netscape Navigator exist 2 atribute pentru margini:
marginwidth
marginheight
Atributele link, alink i vlink indic culoarea legturilor. Aceste
atribute au fost definite n capitolul 7. Reamintim c legturile au
culori predefinite n funcie de strile n care se afl, astfel:
legturile nevizitate au culoarea implicit albastr care poate fi
schimbat cu atributul link=culoare
legturile vizitate au culoarea implicit purple care poate fi schimbat
cu vlink=culoare
legturile active au culoarea implicit rou care poate fi schimbat cu
atributul alink=culoare
n exemplul de mai jos se utilizeaz atributele elementului BODY:
<HTML>
<HEAD>
<TITLE> Elementul META_KEY </TITLE>
<META name"description" content="invatamint suparior">
</HEAD>
<BODY background="c:\windows\web\wallpaper\peace.jpg" bgcolor="blue"
leftmargin=50 rightmargin=20 topmargin=20 bottommargin= 30
link="red" alink="yellow" vlink="darkblue">
<A href="flori.jpg"> Trandafir </A> <BR>
<A href="c108">
Lista Universitati </A> <BR>
99
<A href="3881"> Lista Postuniversitare </A> <BR>
</BODY>
</HTML>
Figura 8. 7. Atributele elementului BODY
8.3. Blocul de comentarii

Pentru o mai bun lizibilitate a unei pagini este indicat s se introduc
comentarii. Un comentariu are sintaxa: <!_ _ comentarii_ _>.
Un bloc de comentarii are caracteristicile:
nu este afiat de browser
poate fi introdus oriunde n interiorul paginii
se poate ntinde pe mai multe rnduri
8.4. Blocul de centrare

Dac se dorete centrarea unei secvene de cod fr a utiliza un stil sau
formatarea logic <PRE>, se folosete blocul <CENTER></CENTER> .
Textul i/sau imaginea cuprinse n acest bloc vor fi centrate n fereastra
browser-lui. Blocul poate fi plasat oriunde n program i pot exista mai multe
blocuri de centrare ntr-o pagin.
100
Un exemplu simplu este dat mai jos.
<HTML>
<HEAD>
</HEAD>
<BODY>

<CENTER>
SUNTEI BINE VENII
PE SITE-UL UNIVERSITII
</CENTER>
</BODY>
<HTML>
Figura 8. 8. Elementul CENTER
101
9. CADRE
HTML permite s se mpart o pagin Web n mai multe panouri, care

pot fi, la rndul lor, mprite n locaii numite cadre sau frame-uri, i n fiecare
din aceste cadre s se ncarce o alt pagin Web. Astfel, browser-ul va afia
ntr-o fereastr mai multe pagini Web. Chiar dac la introducerea lor de ctre
Netscape (versiunea HTML 3.1) ele nu au fost uor acceptate, cu timpul, lucrul
cu cadre s-a dezvoltat (majoritatea browser-elor acceptnd lucrul cu ele).
9.1. Bazele organizrii cadrelor

n lucrul cu cadre, blocul <BODY> </BODY> este nlocuit cu unul sau
mai multe blocuri <FRAMESET> </FRAMESET> care indic volumul de
spaii alocat fiecrui panou. Fiecare element <FRAMESET> conine unul sau mai
multe elemente <FRAME> care specific cadrele individuale care vor conine
paginile Web pe care dorim s le afim simultan. nainte de a descrie aceste
elemente i atributele lor, vom da cteva exemple pentru a ne face o idee despre
lucrul cu cadre. n aceste exemple presupunem c exist n directorul curent
fiierele .html care vor fi utilizate n exemple i care nu au o cale indicat.
Cadre orizontale
<HTML>
<HEAD> </HEAD>
<FRAMESET rows="40, *">
<FRAME src="titlul oriz.html">
<FRAME src="c:\carte_web\cap_web_5\ex_5_8.html">
</FRAMESET>
</HTML>
Figura 9. 1. Cadre orizontale
102
Din exemplul de mai sus, rezult c browser-ul afieaz dou panouri
(cadre) pe orizontal, primul avnd nlimea de 40 de pixeli i al doilea ocupnd
restul ecranului. Coninutul celor dou pagini este afiat de browser ntr-o
fereastr.
Cadre verticale
<HTML>
<HEAD>
<TITLE> Cadre Verticale </TITLE>
<BASE href="C:/Windows/Web/Wallpaper/">
</HEAD>
<FRAMESET COLS="30%, 2*,3*">
<FRAME src="follow.jpg"> <FRAME src="tulips.jpg">
<FRAME src="home.jpg">
</FRAMESET>
</HTML>
Figura 9. 2. Cadre verticale
Din exemplul de mai sus rezult c browser-ul va afia trei pagini Web,
fereastra fiind mprit n trei coloane (trei cadre) pe vertical. Aceste cadre vor
avea limile:
30% din fereastr pentru primul cadru
coloanele 2 i 3 vor ocupa restul din spaiul rmas mprit, astfel:
coloana a doua va avea 2/5 din spaiul rmas (2 + 3 = 5)
coloane a treia va avea 3/5 din spaiul rmas
103
Cadre imbricate
Dac dorim s afim patru pagini, n formatul
avem structura
<HTML>
<FRAMESET ROWS=20%, *>
<FRAME SRC=coloane.html>
<FRAMESET COLS=40%, 100, *>
<FRAME src =>
<FRAME src=>
<FRAME src=>
</FRAMESET>
</FRAMESET>
</HTML>
Dac dorim s afim tot patru pagini ntr-o fereastr, dar dup modelul de
mai jos:
vom avea urmtoarea structur

<HTML>
<FRAMESET rows =70%, 30%>
<FRAMESET cols =2*, 2*, 3*>
<FRAME src =>
<FRAME src = . >
<FRAME src= >
</FRAMESET>
<FRAME src= >
</FRAMESET>
</HTML>
Figura 9. 3. Exemple cadre imbricate
104
9.2. Elementul FRAMESET
Din exemplele prezentate mai jos, rezult c elementul FRAMESET are
rolul de a mpri fereastra n mai multe panouri (zone). Fiecare din zonele ferestrei
poate fi mprit n unul sau mai multe cadre cu ajutorul elementului FRAME.
Sintaxa elementului FRAMESET este:
<FRAMESET atribute> .. </FRAMESET>
Atributele elementului FRAMESET

rows descrie liniile n care este mprit fereastra (mprirea pe
orizontal a cadrelor care se doresc a fi afiate)
cols descrie coloanele n care este mprit fereastra (mprirea pe
vertical a cadrelor)
Valorile celor dou atribute sunt scrise ntre ghilimele delimitate prin
virgul. Elementele listei pot fi:
numere ntregi pozitive, care reprezint dimensiunea (nlimea
liniei sau limea coloanei) n pixeli
procente din dimensiunea ferestrei
n*, unde n este un numr ntreg pozitiv, ce reprezint numrul de
pri din spaiul rmas, iar * reprezint spaiul rmas, de exemplu:
rows=10%, 200, * nseamn c zona este mprit n trei linii,
de nlimi: 10% din fereastr, 200 de pixeli i respectiv tot spaiul
rmas
cols=100, 2*, 3*, 4* nseamn c zona este mprit n patru
coloane de limi: 100 pixeli, 2/9, 3/9 i respectiv 4/9 din spaiul
rmas (2 + 3 + 4 = 9, deci spaiul rmas se mparte n 9 pri)
border indic grosimea n pixeli a bordurilor cadrelor. Valorile
posibile sunt numere ntregi pozitive, valoarea 0 nseamn c bordurile
nu sunt afiate
bordercolor indic culoarea bordurilor
frameborder indic dac chenarele sunt sau nu vizibile. Poate lua dou
valori: Yes sau 1 (implicit) chenarele sunt vizibile i No sau
0 cadrele nu sunt separate prin chenare (este echivalent cu border=0)
n exemplul de mai jos exemplificm atributele elementului FRAMESET. S
presupunem c dorim s aducem ase pagini n fereastr, pe care o mprim dup
modelul de mai jos:
| |
|
adic ntre linii nu dorim chenare.

<HTML>
<FRAMESET rows="50, 15%, *" frameborder="0">
105
<FRAME src="scriere_col.html">
<FRAMESET cols="30%, 2*, 3*" border="5" bordercolor="red"
frameborder="1">
<FRAME src="pagina_1.html">
</FRAMESET>
<FRAMESET cols="50%,*" border="6" bordercolor="#800080"
frameborder="1">
<FRAME src="flori.jpg">
<FRAME src="C:/Windows/WEB/WALLPAPER/FRIEND.jpg">
</FRAMESET>
</FRAMESET>
</HTML>
Figura 9. 4. Elementul FRAMESET cu atribute
9.3. Elementul FRAME

Din exemplele din seciunea 9.1 9.3., reiese c marcajul nepereche
<FRAME> este utilizat pentru a prezenta coninutul unui cadru (pagina Web care
se ncarc ntr-un cadru). Sintaxa acestui element este <FRAME atribute>.
Atributele elementului <FRAME> sunt:
src este un atribut obligatoriu i are ca valoare o adres absolut sau
relativ a fiierului HTML sau a fiierului imagine care va ocupa
cadrul, de exemplu: <FRAME src www.editura.unibuc.ro>.
frameborder indic dac chenarele sunt sau nu vizibile. Dac acest
atribut exist, el are aceleai valori i este prioritar aceluiai atribut al
106
elementului FRAMESET. Dac un cadru are o valoare a acestui atribut
i cadrele vecine trebuie sa aib aceeai valoare, evident.
bordercolor indic culoarea chenarului, iar valoarea acestui atribut
schimb valoarea aceluiai atribut al elementului FRAMESET.
marginheight reprezint spaiul alb, n pixeli sau procente fa de
partea de sus (top) i cea de jos (bottom).
marginwidth reprezint spaiul alb, n pixeli sau procente fa de
partea stng (left) i cea dreapt (right).
noresize cadrul nu mai poate fi redimensionat. Dac acest atribut este
prezent pentru un cadru, atunci nici cadrele vecine nu pot fi
redimensionate.
scrolling indic prezena barelor de scroll (defilare) i poate avea trei
valori:
auto valoare implicit i indic faptul c bara de scroll este
prezent numai dac este necesar (coninutul cadrului depete
dimensiunea lui)
yes bara de defilare este mereu prezent
no bara de defilare nu este afiat n niciun caz
name atribuie un nume elementului FRAME (cadrului) i este util n
definirea destinaiilor pentru legturi. Despre acest atribut i cadrele
destinaie, se va discuta n seciunea urmtoare.
Mai jos se va da un exemplu de utilizare a elementului FRAME cu
atribute. Tot n acest exemplu se indic dou linii i dou coloane, dar un singur
FRAMESET. Aceasta nseamn c frame-urile vor fi aranjate n reea, adic unul
dup altul. n cadrul aranjrii n reea trebuie indicate att numrul de linii, ct i
de coloane.
<HTML>
<HEAD>
</HEAD>
<FRAMESET rows="20%, 80%" cols="40%, *" frameborder="1" border="5"
bordercolor="blue">
<FRAME src="univsh.html" marginheight="30" marginwidth="30"
scrolling="no">
<FRAME src="univbuc.html" scrolling="no">
<FRAME src= "c:/carte_web/univsh.jpg" scrolling="no">
<FRAME src="c:/carte_web/facmat.jpg" noresize>
</FRAMESET>
</HTML>
107
Figura 9. 5. Atributul FRAME cu atribute
9.4. Cadre destinaie

Am artat n capitolul 7 (Legturi) c destinaia unei legturi este
fereastra sau cadrul n care va fi ncrcat resursa de la adresa URL, indicat de
legtur. Tot atunci am artat c destinaia unei legturi este implicit fereastra
care conine legtura, i cu un clic pe butonul BACK ne ntoarce la pagina
iniial. Destinaia implicit se poate schimba cu ajutorul atributului target al
elementului A(link) care indic o alt fereastr n care se va deschide pagina
dorit.
i n cazul lucrului cu cadre, folosind atributul target n legturi i
atributul name ntr-un frame, i aceste atribute au aceeai valoare, atunci una sau
mai multe pagini se pot deschide n cadrul cu atributul name.
Valorile posibile pentru atributul target sunt:
Nume de cadre/ferestre cunoscute:
black este implicit i noua resurs se deschide ntr-o fereastr
nou
self noua resurs este ncrcat n acelai cadru / aceeai fereastr
parent noua pagin se deschide n fereastra / cadrul printe
top pagina este ncrcat n fereastra browser-ului
Valoarea atributului name a unei ferestre deschise de browser sau a
unui cadru ncrcat de browser. n cazul n care mai multe pagini se
deschid n aceeai fereastr sau acelai cadru, cu ajutorul butoanelor
BACK i FORWARD activm aceste pagini.
De exemplu, dac mprim fereastra n dou coloane, prima s conin un
fiier HTML cu un set de legturi, iar n a doua coloan se vor ncrca paginile de
108
la adresele date de legturi, codul HTML care realizeaz acest obiectiv este dat
mai jos.
<HTML>
<HEAD>
<TITLE> CADRE DESTINATIE</TITLE>
</HEAD>
<FRAMESET cols="40%, 60%" bordercolor="blue" border="5">
<FRAME src="C:\CARTE_WEB\CAP_WEB_8/ex_8_2.html" >
<FRAME src="C:\CARTE_WEB\univsh.jpg" name="listeU" >
</FRAMESET>
Figura 9. 6. Cadre destinaie cu atributul name
Dac la codul din figura 8.2, la fiecare legtur A se adaug atributul

target=listeU, unde listeU este i valoarea atributului name a lui frame
(cadrul din partea dreapt din exemplul de mai sus),atunci toate legturile se
deschid n cadrul din partea dreapt a ferestrei.
Codul modificat n acest sens din ex_8_2.html devine ex_9.7.html i este
dat mai jos.
<HTML>
<HEAD>
<TITLE> Elementul BASE </TITLE>
</HEAD>
<BODY>
<A href="c108" target="listaU"> Lista Universitati </A> <BR>
<A href="c487" target="listaU"> Lista Universitati Stat </A><BR>
<A href="3880" target="listaU"> Lista Universitati Particulare Acreditate </A>
<BR>
<A href="3882" target="listaU"> Lista Universitati Particulare Autorizate </A>
<BR>
<A href="3881" target="listaU"> Lista Poastuniversitare </A> <BR>
109
</BODY>
</HTML>
Al doilea cadru are numele listeU i el conine iniial prima referin.
Dac se vor activa i celelalte legturi, acestea vor fi ncrcate, pe rnd, tot n
cadrul cu numele listaU. n exemplul 9.6 dac se ncarc codul de mai sus,
browser-ul va afia iniial aceeai fereastr, dar n ea se pot ncrca toate celelalte
pagini, de la adresele din cadrul stng.
Figura 9. 7. Cadre destinaie cu atributul name i target
9.5. Cadre interioare

HTML permite introducerea cadrelor i n interiorul blocului <BODY>
</BODY>, cu ajutorul blocului <IFRAME atribute> </IFRAME>. Cadrele
interioare pot fi introduse oriunde n corpul unui fiier HTML.
OBSERVAII!
Elementul IFRAME are aceleai atribute ca i elementul FRAME
ntr-o pagin Web se pot introduce oricte cadre interioare dorim
Atributul name este utilizat ca destinaii pentru legturi
Elementul IFRAME are i unele atribute ale lui IMG, cu aceleai
efecte: width, align (left, top, bottom, middle)
Un exemplu de CADRE interioare este prezentat mai jos:
<HTML>
<HEAD>
</HEAD>
<BODY>
<B> Acesta sunt florile preferate </B>
<P>
<IFRAME src="flori1.jpg" name="poze" bordercolor="red" align="middle"
110
width="300" height="200">
</IFRAME>
</P>
<A href="florit.jpg" target="poze"> trandafir </A><BR>
<A href="flori4.jpg" target="poze"> orhidee </A><BR>
<A href="flori5.jpg" target="poze"> diverse</A><BR>
</BODY>
</HTML>
Figura 9. 8. Cadre interioare IFRAME
111
10. FORMULARE
n capitolele precedente s-a artat cum se pot construi pagini atractive cu

ajutorul marcajelor speciale HTML, animaiei, cadrelor, imaginilor, sunetelor,
legturilor etc. tim de asemenea c toate programele de navigare comunic cu
server-ele WEB prin intermediul unui protocol HTTP (Hyper Text Transfer
Protocol) sau a altora. Browser-ul exprim, prin intermediul unui protocol ales,
server-ului WEB cereri de tipul Doresc sau Vreau (I want) i primete
rspunsuri de la server ceva de genul Poftim sau Iat (Here is) sau Nu exist
(Dont have), aa cum se poate observa din figura de mai jos:
Program Doresc (I want)

Navigare Server
Poftim (Here is)
Calculator Nu exist (Dont have) WEB

Propriu
Figura 10. 1. Interaciunea dintre browser i server
Dac dorim un fiier HTML care include grafic, fiecare imagine este
solicitat server-ului printr-un dialog i de aceea se ncarc nti sursa i apoi se
ncarc imaginile pe rnd.
Pentru codul HTML:
<HTML>
<HEAD>
</HEAD>
<BODY>
<A href= C:/TEST/tabele.html>tabele</A><BR>
<A href= C:/Windows/WEB/Wallpaper/peace.jpg>peace</A><BR>
<A href= D:/casa.jpg>casa_mea</A><BR>
<A href= http://www.unibuc.ro>Univ_Bucuresti</A>
</BODY>
</HTML>
112
Interaciunea dintre browser i server va fi de urmtoarea manier:
Doresc fiierul tabele.html
Iat fiierul tabele.html
Acum mai Doresc fiierul peace.jpg
Iat fiierul peace.jpg
Mai Doresc fiierul casa.jpg
Nu exist fiierul casa.jpg
Error 440 file not found
Doresc fiierul de la www.unibuc.ro
Iat fiierul www.unibuc.ro
Am evideniat aceast modalitate de lucru pentru a indica comportamentul
static al tehnologiei WWW, adic avem acces numai la resurse Internet statice.
n acest capitol vom trece la comportamentul dinamic al tehnologiei WWW.
n aceast manier de lucru cererea Doresc, adresat de browser server-ului, devine
cererea de tipul Doresc execuia programului i transmiterea rezultatelor.
Formularele induc un comportament dinamic, deoarece ele permit
utilizatorilor s introduc parametrii. Pentru analizarea acestor parametrii i
transmiterea rezultatelor browser-elor, se execut anumite aplicaii de programare a
server-elor, care decid cum va aciona server-ul ca rspuns la datele primite.
Mediul de programare de pe servere, prin intermediul crora se comunic cu
programele de navigare, este interfaa Common Gateway Interface (CGI). Lucrnd
n mediul CGI, ntr-un anumit program (ASP, Perl, Java Script, PHP etc.), se poate
nlocui o pagin WEB sau o imagine cu un program care efectueaz anumite
calcule, care caut ntr-o baz de date i apoi ntoarce utilizatorului rezultatele sub
form de date WEB. Aceste programe se mai numesc i scripturi CGI, cu sufixul
.cgi i pot fi invizibile pentru vizitatorii de pagini WEB (chiar este posibil s nu
se tie c anumite pagini sunt rezultatul execuiei unor scripturi).
n acest capitol nu se trateaz scrierea codului pentru scripturi CGI,
dar se vor prezenta soluii pentru a le aplica n crearea formularelor.
Formularele WEB sunt asemntoare cu formularele altor aplicaii (ca de
exemplu, cele din Word), au aceleai tipuri de cmpuri, dar au i unele caracteristici
proprii foarte utile. Formularele HTML permit utilizatorilor introducerea unor
informaii, transmiterea lor ctre server i ntoarcerea rezultatelor obinute prin execuia
unor programe de scriptare, inducnd astfel un comportament dinamic paginilor WEB.
Formularele sunt utilizate pentru transmiterea datelor ctre o aplicaie
client, server sau la o adresa de e-mail.
n continuare se vor prezenta multitudinea de marcaje pentru a realiza
formulare simple care pot conine una sau mai multe csue text, care pot introduce
text pe post de keywords (pentru motoarele de cutare) pn la formulare complexe
cu multe elemente care ofer faciliti utile de transmiteri de date.
113
10.1. Elementul FORM
Pentru a insera ntr-o pagin WEB un formular se folosete elementul
<FORM> cu urmtoarea sintax:
<FORM atribute>...</FORM>
Elementul FORM are urmtoarele caracteristici:
n interiorul unei pagini WEB pot exista mai multe blocuri <FORM>
...</FORM>
Blocurile <FORM>...</FORM> nu pot fi imbricate
Blocurile <FORM>...</FORM> pot s aib un atribut name=nume,
unde valoarea nume este numele de identificare a formularului. Numele
nu este transmis server-ului, dect printr-o operaie ascuns, cum se va
vedea mai departe
Unui formular nu i se asociaz stiluri, o eventual formatare a
elementelor unui formular se realizeaz cu elementele de formatare
fizic (<B>, <I>, <U>, <S>, <FONT>) sau de formatare logic (<P>,
<PRE>, <HR> etc.)
n interiorul unui bloc <FORM>...</FORM> elementele formularului se
definesc cu etichetele INPUT, TEXTAREA i SELECT, care vor fi
descrise n seciunile urmtoare
Fiecare element al unui formular poate avea un nume, care l
individualizeaz
Atributele elementului FORM
Deoarece elementul <FORM> este utilizat pe partea de client pentru citirea
datelor introduse de utilizator i pe partea server pentru scrierea rezultatelor din
aplicaiile de scriptare CGI, atunci lui i se asociaz anumite atribute pentru a
evidenia destinatarul datelor din formular, metoda utilizat n transmiterea datelor,
metoda de codificare a datelor i fereastra (dac se dorete a se schimba cea
implicit self ) n care apar rezultatele.
Atributele elementului FORM sunt:
Action
Method
Enctype
Target
Atributul ACTION
Atributul action=URL definete destinatarul datelor din formular. n
cazul n care acest atribut lipsete, destinatarul este pagina WEB.
URL-ul poate fi:
adresa URL a aplicaiei .cgi de destinaie, care urmeaz s prelucreze
datele, ca de exemplu:
http://www.itdgroup.com/scripts/test.asp
114
http://www.altavista.com/cgi-bin/query
http://www.yahoo.com/search
o adres de e-mail valid, pentru transmiterea datelor formularului, prin
intermediul protocolului mailto: ca de exemplu action = mailto:
rodicaniculescu@gmail.com
Atributul METHOD
Atributul method=metoda definete metoda de utilizare i transmiterea
datelor de la programul de navigare la server.
Exist dou valori posibile ale acestui atribut i anume: GET i POST.
method=GET se utilizeaz dac datele din formular se ataeaz la
adresa URL de destinaie prin sintaxa nume=valoare. n bara de
ADDRESS a browser-ului apare adresa URL, urmat de perechi de date
nume=valoare, separate prin simbolul &. De exemplu, dac avem
intrarea n formular <INPUT type=text name=nume> se va crea o
csu de text i dac n ea se tasteaz Popescu, atunci n bara de adrese
va aprea:
http://www.itdgroups/scripts/test.asp?&nume=Popescu.
Metoda GET de transmitere de date este implicit, adic, dac nu este
prezent atributul action n eticheta <FORM>, modul de transmitere a
datelor este GET.
method=POST datele din formular sunt transmise server-ului ntr-o
tranzacie separat, nu odat cu adresa URL. Din acest motiv n bara de
adrese a browser-ului apare adresa, fr elemente suplimentare la
sfrit, de tip nume=valoare. Folosind aceast metod, datele sunt
transmise la server nu toate odat, ci n flux. Din acest motiv metoda
post este indirect n cazul n care trebuie transmise cantiti mari de
informaii.
Atributul Enctype
Acest atribut definete metoda de codificare a datelor nainte ca ele s fie
transmise la server. Valorile acestui atribut pot fi:
aplication/x-www-form-urlencoded care este i valoarea implicit a
atributului i este folosit cu metoda GET n general. Aceast valoare
va fi detaliat n seciunea urmtoare (codificarea i transmiterea
datelor)
text/plain utilizat cu valoarea mailto:adresa_mail a atributului
ACTION, pentru trimiterea prin pot a datelor. Este asemntoare cu
valoarea de mai sus, cu excepia c spaiile albe nu sunt nlocuite cu
simbolul +
multiform/form-data utilizat ca metoda POST pentru inserarea pe
server (transmiterea fiierelor sau imaginilor pe server).
115
Atributul TARGET
Acest atribut se folosete n cazul n care se dorete ca formularul cu
rezultate s apar ntr-o fereastr nou a browser-ului. Despre valorile posibile ale
atributului am vorbit cnd au fost descrise cadrele i legturile. Valoarea implicit
este self, care are ca efect apariia rezultatelor n aceeai fereastr cu a browser-lui.
10.2. Transmiterea i citirea datelor

Orice tranzacie HTTP de tipul static Doresc / Iat sau dinamic Execut
programul / Iat include un set de caracteristici de mediu care se transmit
mpreun i care sunt accesibile de scripturile CGI. Unele din aceste variabile de
mediu sunt: REMOTE-HOST (care identific numele calculatorului pe care se afl
programul de navigare), HTTTP-USER-AGENT (identific browser-ul care se
utilizeaz), QUERY-STRING (are ca valori informaiile introduse de utilizator, n
perechile name=value).
De exemplu, dac se dorete o cutare pe motorul Yahoo, pentru un cuvnt
sau o fraz, s zicem CSS va aprea o pagin cu toate informaiile cerute i
URL- ul afiat n csua ADDRESS a browser-ului este:
http:// search.yahoo.com/ bin/ search?p=ccs.
Se observ c apare caracterul ? care indic faptul c exist informaii
care se transmit server-ului, iar valoarea transmis de client server-ului este
p=CSS. Atunci pentru programul de scriptare CGI de pe server, transmis prin
adresa URL a atributului ACTION al etichetei <FORM>, variabila de mediu
QUERY-STRING va conine valoarea specificat dup semnul de ntrebare (?).
Se poate introduce o legtur n pagina WEB care s apeleze, de exemplu,
Yahoo pentru a cuta informaii referitoare despre Spiru Haret:
<A href=http://search.yahoo.com/search?p=Universitate+Spiru+Haret>
Informaii despre Spiru Haret </A>.
Se tie c spaiile nu sunt permise n adresa URL, i atunci se folosete
simbolul + pentru a le trimite serverului.
Dar este mult mai simplu s utilizm formulare pentru a introduce
date i apoi acestea s fie prelucrate n funcie de rezultatele primite.
Codificarea datelor
nainte de a trimite date la server, browser-ul codific datele. Atunci cnd
se utilizeaz metoda GET, informaiile sunt transmise scriptului de pe server. Toate
informaiile sunt afiate codificat i sunt memorate n variabile de mediu QUERY-
STRING. Tehnica de codificare a datelor depinde de valoarea atributului enctype, a
etichetei <FORM>. n cazul valorii implicite application/x-www-form-
urlencoded, utilizat cu metoda implicit GET
datele sunt transmise sub forma nume=valoare separate prin simbolul &;
spaiile sunt nlocuite cu simbolul plus (+) pentru a le putea transmite n
siguran;
116
caracterele speciale, nonalfabetice sunt codificate cu ajutorul codului lor
ASCII n hexazecimal prefixat de simbolul % ca n tabelul de mai jos:
COD CARACTER
! %21
%22
# %23
$ %24
% %25
%26
%27
( %28
) %29
+ %2B
/ %2F
: %3A
= %3D
? %3F
\ %5C
CR %0A
LF %0D
Spaiu %20
TAB %09
Figura 10. 2. Codurile caracterelor speciale

De exemplu, dac avem formularul de mai jos:
NUME Ionescu
PRENUME Ana Maria
ADRES So. Colentina Nr.10 Bucuresti sect 2

ROMANIA
MAIL
http://www.ionescui@gmail.com
SEND
Figura 10. 3. Codificarea datelor

117
atunci informaia trimis este codificat astfel:
nume=Ionescu.&prenume=Ana+Maria&adres=
So.+Colentina+nr.10+sect.2%0D%0AROMANIA&mail =http%3A%2F%2F
www.ionescui@gmail.com%2F&trimite=send
Pentru transmiterea datelor la destinaie se folosete elementul

<INPUT type=submit value=valoare>, care va fi descris n seciunea urmtoare.
Dup transmiterea datelor, primul pas pe care-l execut scriptul destinatar
este s decodifice URL-ul transmis, care are, la sfrit, datele codificate n perechi.
n continuare se vor detalia cele 3 elemente care descriu elementele unui
formular: <INPUT>, <TEXTAREA> i <SELECT>
10.3. Elementul INPUT

Toate cmpurile unui formular destinate introducerii datelor se specific cu
ajutorul marcajului <INPUT atribute>. Exist zece cmpuri ntr-un formular care
se introduc cu elementul INPUT i anume: text, submit, image, password, hidden,
checkbox, reset, radio, file i buton.
Atributele elementului <INPUT> difer n funcie de tipul de intrare i pot
fi:
TYPE=tip_cmp indic tipul cmpului de intrare i este un atribut
obligatoriu al elementului <INPUT>
NAME=nume este un identificator pentru cmpul de intrare. Este
indicat a fi utilizat
VALUE=valoare stabilete valoarea elementului. Perechea
nume=valoare se folosete pentru transmiterea datelor
SIZE=numr indic numrul de caractere afiate dintr-o csu de
text
MAXLENGTH=numr indic numrul maxim de caractere care pot
fi introduse ntr-o csu text. Dac valoarea size este mai mic dect
valoarea maxlength, atunci apare o bar de derulare
DISABLED indic inactivitatea unui cmp al formularului (utilizatorul
nu poate selecta csua)
READONLY nu permite modificarea coninutului unui cmp
CHECKED indic faptul c un buton radio sau o csu de validare
este selectat implicit
n continuare se vor descrie cele zece valori enumerate mai sus ale
atributului TYPE.
Tipul TEXT
Pentru a introduce un cmp de text cu ajutorul cruia se introduc
parametrii ntr-o pagin WEB se folosete atributul type al elementului <INPUT>
cu valoarea text, astfel <INPUT type=text>. Toate atributele elementului
118
<INPUT>, definite mai sus, cu excepia atributului CHECKED, pot fi asociate cu
tipul text, aa cum reiese din exemplul urmtor:
<HTML>
<HEAD></HEAD>
<BODY>
<FORM name="FTEXT">
<!...Destinaia este pagina, metoda implicita GET...>
<PRE> <B>NUME:</B>
<INPUT type="text" name="nume" size="20" maxlength="50">
<B>PRENUME:</B>
<INPUT type="text" name="pren" size="25">
<B>ADRESA E-MAIL:</B>
<INPUT type="text" name="email" readonly size="26"
value="rodicaniculescu@gmail.com">
<B>PAROLA:</B>
<INPUT type="text" name="parola" disabled value="secret">
</PRE>
</FORM>
</BODY>
</HTML>
Figura 10. 4. Tipul text cu atribute
Tipul SUBMIT (Transmitere)

Am specificat, n seciunea anterioar, faptul c atunci cnd un formular
este completat, datele sunt transmise de browser spre server. Pentru a executa
aceast aciune se utilizeaz atributul type al elementului INPUT cu valoarea
submit, astfel <INPUT type=submit>. Utilizarea tipului submit (transmitere)
permite inserarea n formular a unui buton care, atunci cnd este apsat browser-ul,
codific datele i trimite informaiile programului de scriptare specificat de
atributul ACTION al etichetei <FORM>. Atributele elementului INPUT care merg
cu tipul buton de transmitere sunt:
name identificatorul elementului
value reprezint textul care va aprea pe buton, n lips, pe buton va fi
trecut valoarea prestabilit: Submit query. n cazul n care cele dou
119
atribute sunt prezente, se vor trimite date despre buton n perechea
nume=valoare
disabled dezactiveaz un buton de transmisie
ntr-un formular pot exista mai multe butoane de transmisie SUBMIT. n
acest caz butoanele de transmisie se vor diferenia prin folosirea atributului name i
prin atributul value, a crei valoare va fi scris pe buton.
Datele care se transmit sunt n funcie de butonul de transmisie, astfel:
Dac butonul nu are indicat valoarea, adic are valoarea implicit
Submit query, atunci el transmite date din formular, dar nu i despre
el
Dac butonul este numit, adic exist atributul value=text, atunci el
transmite date din formular, ct i despre el
Dac butonul este dezactivat atunci el nu transmite nimic
Nu se transmit dect valorile elementelor din formular, nu i despre
formular, adic numele formularului nu apare n datele de transmisie
Un exemplu ilustrativ despre butoane de transmisie este prezent mai jos,
completnd programul din figura 10.4. cu butoane de transmisie.
Se vor introduce dou butoane de transmisie, unul predefinit i altul numit
prin secvena urmtoare:
<INPUT type=submit>
<INPUT type=submitname=opteazvalue=GO>
Formularul va fi mbogit cu dou butoane:
Figura 10. 5. Butoane de transmisie
Dac se apas butonul SUBMIT, atunci n caseta de adrese va aprea:

AdresaURL?nume=Niculescu&pren=FlorentinaRodica&email=rodica
niculescu@gmail.com
Dac se apas butonul GO se va mai aduga, la sfrit, perechea
opteaz=GO
120
Butonul de IMAGINE
Pentru transmiterea datelor se poate folosi butonul de imagine, n loc de
butonul de transmisie text. Pe butonul imagine apare imaginea n loc de text. Pentru
a crea un buton de imagine se folosete atributul type al elementului <INPUT> cu
valoarea image (type=image). Alte atribute ale elementului <INPUT>, care se
asociaz cu atributele type=image, sunt:
Src=URL prezint adresa URL a imaginii. Este un atribut
obligatoriu pentru acest tip
alt=text introduce un text, dac poza nu poate fi ncrcat
border=numr indic grosimea chenarului n pixeli. Dac
numrul=0, chenarul imaginii lipsete
align determin alinierea imaginii i poate avea valorile cunoscute:
left, right, center
name numele unui buton de imagine
Dac n exemplul din figura 10.5. se nlocuiete butonul de transmisie
predefinit (SUBMIT QUERY) cu un buton de imagine, atunci vom folosi tipul
image astfel:
<INPUT type=imagesrc=c:/windows/hlpglobe.gif name=img align =
center alt = comand border=0 >
Imaginea hlpglobe va fi inserat pe buton. Dac se execut clic pe butonul
imaginii vor fi transmise coordonatele punctului n care s-a executat clic mpreun
cu numele imaginii sub form de perechi: numeX=x&numeY=y
Figura 10. 6. Butoane de imagine

Tipul PASSWORD
Tipul de intrare de tipul parol este asemntor cu tipul text, cu aceleai
atribute, diferenele sunt:
atributul value este obligatoriu
datele introduse de utilizator sunt afiate prin caracterul * sau y
(depinde de browser) din motive de siguran
121
Pentru a insera n formular un cmp de tip parol se folosete atributul type
cu valoarea password, astfel:
<INPUT type= password, name= parol, value=123456>
De exemplu, dac vrem s schimbm parola veche, se introduce parola
nou de dou ori. Codul pentru aceast aciune este:
<FORM name="FPAROLA method="GET" >
<PRE> USERNAME:
<INPUT type="text" name= "user" value="guest">
OLD PASSWORD: <INPUT type="password" name="old" maxlength="10"
value="student" readonly>
NEW PASSWORD: <INPUT type="password" name="new1"
value="Florentina" maxlength="12">
RETYPE: <INPUT type="password" name="new2" value="Florentina"
maxlength="12">
UPDATE: <INPUT type= "SUBMIT" value="OK">
</PRE>
</FORM>
</BODY>
</HTML>
Figura 10. 7. Tipul parol
Se observ din exemplul de mai sus c datele sunt codificate dup valoarea
implicit a atributului enctype=application/x-www-form-urlencoded, adic
datele sunt trimise sub form de pereche nume=valoare.
n caseta ADDRESS va aprea:
user=guest&old=st&new1=r1234f&new2=r1234f
OBSERVAIE!
Pe lng butoanele de transmisie SUBMIT i IMAGE se mai poate crea un
buton generic, n care valoarea atributului type este button (type=button). Dar
pentru a aduga un comportament la un buton generic, se utilizeaz JavaScript sau
alt program de programare la client. Despre acest tip se va discuta n capitolele de
JavaScript. Utiliznd JavaScript se poate nlocui <INPUT> cu <BOTTON>
122
...</BOTTON>. Acest buton va avea aceleai atribute ca SUBMIT: type, name,
value etc.
Tipul HIDDEN (ascuns)
Tipul ascuns genereaz un element de formular, utiliznd valoarea hidden
a atributului type. Acest tip permite transmiterea de informaii fr ca utilizatorul s
le poat vedea. Acest element este folosit n cazul:
n care pagina este generat automat de un script CGI
pentru a aduga un identificator formularului, deoarece nu exist atribut
al elementului <FORM> care s transmit date despre el mpreun cu
celelalte date
Pentru tipul ascuns sunt obligatorii atributele name i value ale elementului
INPUT. Un exemplu de tipul ascuns este dat mai jos:
<HTML>
<HEAD></HEAD>
<BODY>
<FORM name="tranzitii">
<INPUT type="hidden" name="nume_form" value="tranz">
<INPUT type= "hidden" name="cump" value="450">
<INPUT type="hidden" nam="parola" value="abcde">
<INPUT type="text" name="ID" value="Introduceti date" size=30>
<P>
<INPUT type="submit" value="Trimite">
</FORM>
</BODY>
</HTML>
Browser-ul i va transmite datele codificate:
nume_form=tranz&cump=450&parola=abcde&ID=Introduceti+date
Se observ c datele din elemente ascunse sunt incluse n datele transmise
sub form nume=valoare.
Figura 10. 8. Tipul HIDDEN
123
Tipul CHECKBOX (caset de validare)
Acest tip de intrare asigur o caset de validare. Pentru a insera n formular
o caset de validare se folosete atributul type cu valoarea checkbox
(type =checkbox). ntr-un formular se pot introduce mai multe casete de validare,
dar numai casetele de validare bifate sunt transmise de ctre browser. Se poate ca
mai multe casete de validare s aib acelai nume. Atributele elementului
<INPUT> folosite de tipul checkbox, sunt: name, value i checked. Atributul
checked este utilizat n cazul n care dorim ca starea implicit a elementului caset
de validare s fie starea selectat.
Pentru exemplificare, considerm urmtorul cod HTML: (datele bifate vor
fi transmise n flux, dar nu vor fi vizibile n bara de adrese a browser-lui):
tip=unt&tip=brinza&box=send
<HTML><HEAD></HEAD>
<BODY>
<FORM name="cumparaturi" method="POST">
<UL> CUMPARATURI
<LI> UNT <INPUT type="checkbox" name="tip" value="unt" checked >
<LI> CASCAVAL <INPUT type="checkbox" name="tip" value=cascaval >
<LI> BRANZA <INPUT type="checkbox" name="tip" value= "branza">
</UL>
<PRE> <INPUT type="submit" name= "box" value="SEND"> </PRE>
</FORM>
</BODY>
</HTML>
Figura 10. 9. Tipul Checkbox
Tipul RESET
Acest tip de intrare permite utilizatorului s tearg coninutul tuturor
cmpurilor formularului. Tipul de RESET se introduce n formular ca valoare a
atributului type, astfel <INPUT type=reset> i are ca efect inserarea unui buton (ca
i tipul submit sau image).
124
Atributele asociate tipului reset sunt: name, value i disabled cu
semnificaiile deja cunoscute.
Dac n exemplu din figura 10.9 se adaug eticheta
<INPUT type=reset name=terge value=reset
n formular, browser-ul va mai aduga un buton reset.
Figura 10. 10. Tipul Reset
Tipul RADIO
Acest tip de intrare afieaz un buton cu interblocare gen radio. Dac mai
multe astfel de butoane au aceeai valoare a atributului name, ele sunt grupate
automat astfel nct un singur buton din grup s poat fi selectat. Butonul radio
este asemnator cu butonul de validare i are aceleai atribute. Pentru a insera un
buton radio ntr-un formular se folosete elementul <INPUT> al crui atribut type
are valoarea radio (type=radio). La un moment dat numai un buton radio din cele
din grup (atributul name trebuie s aib aceeai valoare pentru toate butoanele din
grup) poate fi selectat. Denumirea de buton radio vine de la stilul de afiare al
acestor elemente de ctre browser (ca nite butoane radio)
Datele transmise de browser pentru respectivul grup sunt:
dac se selecteaz un buton radio din grup valoarea efectiv care se
transmite serverului este valoarea atributului value i se transmite printr-o
pereche nume=valoare, unde nume i valoare sunt valorile atributelor
name i value
dac se selecteaz un buton radio i atributul value lipsete, atunci se
transmite valoarea implicit ON, astfel nume=ON, unde nume este
valoarea atributului name
dac nu este selectat niciun buton radio dintr-un grup, atunci browser-ul
nu transmite date referitoare de grupul respectiv
De remarcat faptul c textul alturat unui buton este irelevant pentru
programul de scriptare de pe server.
Vom exemplifica grupul de butoane radio prin urmtorul exemplu:
125
<HTML>
<HEAD></HEAD>
</BODY>
<B> Clasificarea studenilor la Cursul WEB</B>
<FORM name="clas" action="rodicaniculescu@hotmail.com" method="POST">
<PRE>
<B>NUME:</B><INPUT type= "text" name="nume" size=30>
<P><B>COD STUDENT:</B> <INPUT type="password" name="cod" size="8">
<HR>
<B>EXAMEN:</B> <INPUT type="text" name="ex" maxlength=20>
<HR>
</PRE>
<B><5</B>
<INPUT type="radio" name="categorie" value="rest"><B>[5-6]</B>
<INPUT type="radio" name="categorie" value="slab"><B>[7-8]</B>
<INPUT type="radio" name="categorie" value="bun" checked><B>
[9- 10]</B>
<INPUT type="radio" name="categorie" value="fbun">
<PRE>
<INPUT type= "submit" name= "trimite" value="SEND">
<INPUT type= "reset" name= "terge" value="RESET">
</PRE>
</FORM>
</BODY>
</HTML>
Figura 10. 11. Tipul RADIO

n caseta address a browser-lui nu vor aprea datele, deoarece s-a folosit
metoda POST, dar n fereastra COMPOSE va aprea:
file:///C:/CARTE_WEB/CAP_WEB_10/ex9_10.html?nume=Popescu+Ion&cod
=123456&ex=Tehnologii+Web&categorie=bun&trimite=SEND
126
Tipul FILE
Acest tip de intrare ofer posibilitatea utilizatorului s transmit un fiier
programului pe server. Pentru a insera un fiier ntr-un formular se folosete
atributul type al elementului <INPUT> cu valoarea file (type=file).
Formularul va afia un cmp text pentru introducerea numelui fiierului i
un buton BROWSE pentru a selecta un fiier din calculator, n cazul n care nu se
cunoate calea fiierului. Se pot transmite orice tip de fiiere.
Acest tip (file) este dificil de programat pe server, iar Internet Explorer nu
permite lucrul cu tipul file.
Se pot ncrca mai multe fiiere cu ajutorul unui formular i pentru a le
distinge se folosete atributul name cu diferite valori pentru fiecare element
INPUT. n cazul folosirii acestui tip, atributul elementului <FORM> trebuie s fie:
action=URL url fiind adresa unui program de scriptare de pe server
(http://itdgroup.com/scripts/upload/asp)
method= POST (fiind volum mare de date, acesta nu poate fi transmis
prin metoda GET odat cu adresa URL)
enctype=muliform/form-data
10.4. Elementul TEXTAREA

Elementul Textarea este unul din cele trei elemente care pot fi scrise n
interiorul blocului <FORM>...</FORM> (INPUT, TEXTAREA i SELECT). n
seciunea precedent a fost detaliat elementul INPUT, cu cele zece valori posibile
ale atributului su, TYPE.
n aceast seciune se va detalia elementul <TEXTAREA>, care este cel mai
simplu dintre elementele unui formular. Acest element permite introducerea unei
casete de text cu linii multiple pentru introducerea textelor mari. Pentru a introduce
o astfel de caset se folosete blocul <TEXTAREA> coninut </TEXTAREA>.
Atributele elementului TEXTAREA sunt:
name este numele cmpului care va fi transmis n perechi cu
coninutul casetei
rows indic dimensiunea n linii a casetei de text n zona vizibil. n
cazul n care textul depete numrul de linii indicat ca valoare a
acestui atribut, apare o bar de defilare pe vertical
cols indic dimensiunea n coloane (adic caractere) a cmpului de
textare rezultat. n cazul n care un rnd depete aceast dimensiune,
apare o bar de defilare pe orizontal
readonly coninutul elementului nu poate fi schimbat de utilizator
wrap trateaz ntreruperile de rnd CR/LF i poate avea valorile:
soft (valoare implicit) textul se va deplasa automat la rnd nou
cnd ajunge la marginea dreapt a casetei. n acest caz nu apare
bara de defilare orizontal i se transmit numai caracterele CR/LF
introduse de utilizator
127
off caracterele CR/LF sunt introduse de utilizator. n acest caz
apare i bara de defilare orizontal
hard textul trece automat la rnd nou, dar sunt transmise i
caracterele CR/LF inserate automat la trecere la alt rnd.
Pentru exemplificare relum exemplul din figura 10.11 i adugm o
caset text cu linii multiple cu ajutorul blocului:
<P>COMENTARII:
<TEXTAREA name=coment rows=5 cols=50 wrap=off
></TEXTAREA>
Formularul va avea adugat caseta text textarea:
Figura 10. 12. Elementul TEXTAREA
10.5. Elementul SELECT

Elementul SELECT ne ofer posibilitatea de a introduce o list de articole,
din care pot fi selectate unul sau mai multe articole.
La un moment dat dintr-o list poate fi vizibil:
un articol, lista va fi afiat ca un meniu pop-up i din list nu se poate
selecta dect un singur articol
mai multe articole i lista va fi afiat ca o list derulant, caz n care pot
fi selectate mai multe articole (utiliznd atributele MULTIPLE i SIZE).
Pentru a selecta mai multe elemente se folosete tehnica cunoscut:
dac articolele sunt ntr-un interval se ine apsat tasta SHIFT i
clic pe primul i ultimul element din interval
dac articolele sunt dislocate se apas tasta CTRL i clic pe fiecare
element (articol) din list
O list este inserat ntr-un formular cu ajutorul marcajului pereche
<SELECT>...</SELECT>, iar elementele listei se introduc n interiorul acestui
128
bloc cu marcajele <OPTION atribute>, cte unul pentru fiecare element din
list. ntr-un formular pot exista mai multe liste (mai multe blocuri
<SELECT>...</SELECT>).
Atributele elementului SELECT pot fi:
name are ca valoare numele listei care va fi trimis n pereche cu
valoarea atributului din list selectat, nume=value
size indic numrul articolelor din list care vor fi afiate o dat
multiple ofer posibilitatea de a alege mai multe elemente din list,
dac size are valoarea mai mare dect 1
Atributele elementului OPTION pot fi:
selected dac un element al listei este dorit ca prestabilit, l selecteaz
value valoarea acestui atribut este trimis mpreun cu valoarea
atributului name al elementului SELECT
Pentru exemplificarea listelor, la exemplul din figura 10.11 sau 10.12 se
poate aduga o list cu opiunile formei de nvmnt, adugnd urmtoarea
secven de program:
<HR>
<B>Forma de invatamant</B>
<SELECT name="Forma">
<OPTION selected value= "F1">ZI
<OPTION value= "F2">ID
<OPTION value= "F3">FR
<OPTION value= "F4">MASTER
</SELECT>
i la datele trimise se mai adaug i perechea &forma=zi.
Figura 10. 13. Elementul SELECT - List simpl

129
Un exemplu de list multipl (din care avem posibilitatea s selectm mai
multe elemente) ar fi selectarea unor produse dintr-un meniu. Vom defini i un
grup de butoane radio pentru a specifica modul de plat. Pentru acest exemplu vom
avea urmtorul cod:
<HTML> <HEAD></HEAD><BODY>
<FORM> <PRE>
<B>NUME:</B> <INPUT type= "text" size=20 name="nume">
<B>PAROLA:</B> <INPUT type= "password" name="parola" size="10">
<HR> </PRE> <B>MENIU</B>
<SELECT name= "menu" size=3 MULTIPLE>
<OPTION value= "nr1">ciorba perisoare
<OPTION value= "nr2">supa vacuta
<OPTION value= "nr3">gratar porc
<OPTION value= "nr4">salata varza
</SELECT>
<PRE><B>MOD DE PLATA</B>
<B>VISA</B> <INPUT type=radio name="plata" value="visa">
<B>MASTERCARD</B> <INPUT type=radio name="plata" value="master">
<B>CASH</B> <INPUT type=radio name="plata" value="ca" CHECKED>
<INPUT type=image src="c:/windows/hlpbell.gif" alt="send" border=0>
</PRE> </FORM> </BODY> </HTML>
n bara de adrese se pot vedea perechile de date trimise :
file:///C:/CARTE_WEB/CAP_WEB_10/ex12_10.html?nume=Ionescu+Ion&parola
=2145&menu=nr1&menu=nr3&plata=master&x=23&y=15.
Ultimele dou valori reprezint coordonatele punctului de pe imaginea butonului
de transmisie, unde s-a dat clic.
Figura 10. 14. Elementul SELECT - List multipl

130
11. Hri de imagine
n capitolul 7 Legturi s-a artat c o imagine poate fi folosit n loc de

text la definirea unei legturi, astfel:
<A href=adresa_pagina> <IMG src=adresa_imagine> </A>
unde adresa_pagina i adresa_imagine sunt adresele URL ale paginii la care se face
referin i, respectiv, a imaginii legtur.
O imagine poate s ncarce o singur pagin.
Hrile imagine permit ns ca o singur imagine s defineasc mai multe
legturi. n loc s scriem o list cu legturi spre diferite pagini, se poate ncrca o
imagine grafic i, executnd un clic pe o anumit zon a ei, s se execute una din
operaiile definite n capitolul 7 (ncrcarea unei pagini, trimiterea la o adres e-
mail, evidenierea unei ancore etc.), prin executarea unui clic n alt zon s se
execute alt operaie etc.
Hrile imagine sunt elemente grafice care dispun de zone specifice
asociate cu diferite URL-uri.
Exist 2 ci de realizare a unei hri imagine:
Definirea hrii imagine pe server
Definirea hrii imagine la client
11.1. Definirea hrilor imagine pe server

Acest mod de definire nu face obiectul acestui capitol, dar va fi descris
succint.
n acest mod de definire a hrilor pe server trebuie interacionat, n mod
constant, cu server-ul. Definiiile de regiuni i alte calcule de arie care trebuie
introduse, se efectueaz pe server, numai dac server-ul permite acest lucru.
n acest caz, codul HTML, care conine imaginea, este mpachetat ntr-un
href ce indic un fiier de tip MAP (fisier.map), coninut de serverul Web care
specific toate zonele imaginii i le asociaz unor URL-uri.
Eticheta <IMG> va conine un atribut ISMAP care indic faptul c
imaginea inclus este o hart. De exemplu:
<A href=http://www.mysite.com/bucuresti.map>
<IMG ISMAP src=bucuresti.gif border=0> </A <BR>
<B>click pe un anumit sector</B>
131
Urmeaz trasarea zonelor care pot fi de diferite forme. Formatul fiierelor
.map i testarea hrilor la server depind de serverul pe care se lucreaz.
Unele servere permit s indicm un fiier aflat oriunde n sistem, altele
solicit ca aceste fiiere s se afle ntr-un director special de fiiere map, sau altele
nu permit lucrul cu astfel de fiiere.
Exist servere Web cunoscute ca CERN i NCSA. CERN este institutul
elveian, din care s-a desprins o echip condus de Sir Tim Berners Lee care a creat
spaiul World Wide Web, limbaje specializate, precum SVG (Scalable Vector
Graphics), SMILE (Synchronized Multimedia Integration Language) etc.
NCSA este Centrul Naional pentru Aplicaii de Super Calculatoare
(National Center for Super-Computers Applications) al Universitii din Illinois,
care a elaborat programul de navigare Web Mozaic.
Serverele NCSA folosesc, pentru fiierele.map, formatul:
forma/URL/coordonate, astfel : circle Bucuresti.html 100, 200, 100
n timp ce serverele CERN folosesc formatul forma/coordonate/URL, iar
coordonatele apar n perechi, astfel: rect (100,200), (200,300) Paris.html
11.2. Definirea unei hri imagine la client

Pentru a nltura dificultatea lucrului cu hri pe server exist varianta de
definire a hrilor de imagine la client, adic deplasarea lucrului de la server la client.
n ambele variante de lucru cu hri imagine (la server sau la client) exist
programe pentru trasarea zonelor care ne scutesc de munca dificil de a evidenia
zone pe hart, mai ales dac acestea sunt poligoane. Un astfel de program este
MAP THIS care va fi descris n seciunea urmtoare.
Pentru a defini o imagine hart, avem de parcurs trei pai:
inserarea unei imagini
inserarea hrii
inserarea legturilor
n continuare se va prezenta succint fiecare din cele trei etape.
Inserarea unei imagini

Pentru inserarea unei imagini ca o hart se folosete un atribut usemap al
elementului IMG care are ca valoare un nume ce reprezint un identificator intern
de hart i care nume este precedat de caracterul # (ca i n cazul ancorelor).
Numele dat imaginii de hart va fi numele hrii. De exemplu:
<IMG src = C: / POZE / Radu-Florin.jpg usemap = #copii>
Inserarea hrii imagine

Pentru definirea unei hri imagine se folosete tag-ul pereche <MAP>
</MAP>.
n interiorul acestui tag se gsesc unul sau mai multe tag-uri <AREA>,
cte unul pentru fiecare zon a hrii.
132
Elementul <MAP> are un atribut obligatoriu name, care indic numele
hrii i care trebuie s fie acelai cu numele imaginii inserate.
<MAP name =copii>
Inserarea legturilor
Pentru inserarea legturilor se utilizeaz tag-ul <AREA atribute>. Pentru
fiecare legtur sau zon dorit se folosete un element AREA n interiorul
blocului <MAP></MAP>.
Elementul AREA va defini o zon din hart, zon pe care, dac se execut
un clic, se va ncrca o pagin sau o alt operaie.
Atributele elementului AREA sunt:
shape definete forma zonei respective i poate avea valorile:
rect sau rectangle pentru definirea unei zone dreptunghiulare
circ sau circle pentru definirea unei zone circulare
poly sau polygon pentru definirea unei zone poligonale
default pentru definirea zonelor la care nu sunt definite legturi
(Internet Explorer nu accept acest atribut. El a fost testat cu
browser-ul Mozilla FireFox)
href adresa URL a unei resurse Web sau locale pentru care a fost
creat o zon. Dac pentru o zon creat nu se dorete s se stabileasc
o legtur nu se folosete acest atribut sau se folosete nohref
coords indic coordonatele zonei respective
Se tie c orice imagine rasterizat este format din pixeli. Un pixel
este caracterizat de coordonatele sale (x,y), raportate la sistemul :
(0,0) X
Pentru fiecare form din cele enumerate mai sus valorile parametrului
shape sunt:
Rect coords=X1,Y1,X2,Y2 definesc coordonatele colului din stnga
sus ( X1,Y1) i ale colului din dreapta jos (X2,Y2) ale unui dreptunghi
(X1,Y1)
(X2Y2 )
133
CIRCLE coords=a,b,r definesc coordonatele centrului unui cerc,
respectiv raza cercului
R
(a,b)
POLY coords =X1,Y1,X2,Y2,Xn,Yn definesc coordonatele

vrfurilor unui poligon, (Xi,Yi)
(X2,Y2) (X3,Y3)
.
.
(Xn,Yn)
(X1,Y1)
target definete fereastra n care va fi ncrcat resursa

title se utilizeaz pentru inserarea unei sugestii cnd mouse-ul este
deasupra unei zone
n exemplul de mai jos se definete o hart imagine cu 4 zone de legtur.
Este harta unei vile. Zonele delimiteaz nivelele vilei i fac trimitere la fiierele:
Parter.html, EtajI.doc, EtajII.doc. n cazul n care se d clic n alt zon din hart
(dect cele definite), se face trimitere la fiierul Intretinere.xls
<BODY>
<PRE> <B>Casa mea <B> </PRE>
<IMG src="casa.jpg" usemap="#casa">
<MAP name="casa">
<AREA shape="rect" coords="146,225,363,263" href="PARTER.html"
<AREA shape="poly"
coords="115,149,185,145,357,145,360,218,145,219,116,174"
href="ETAJI.doc">
<AREA shape="circle" coords="242,97,50" href="EtajII.doc" title=apasa
aici target=new>
<AREA shape="default" href="INTRETINERE.xls">
</MAP>
</BODY> </HTML>
134
135
Figura 11. 1. Hri de imagine
11.3. Programul MAP THIS

Problema care se ridic n cazul definirii zonelor ntr-o hart de imagine
este determinarea coordonatelor, mai ales dac zona este poligonal.
Dac se face o imagine n PAINT, pentru dreptunghi i cerc se pot
determina coordonatele. Dar mai simplu este s obinem coordonatele zonelor
automat cu ajutorul unor programe speciale, de exemplu MAP THIS.
Programul MAP THIS este folosit n scopul obinerii automate a
coordonatelor punctelor care definesc zonele, pentru o imagine .jpeg sau .gif.
Pentru aceasta se ncarc o imagine n formatele precizate anterior i se
traseaz cu mouse-ul zone pe ea i apoi se salveaz n format .html coordonatele
136
obinute. Programul se poate lua de pe Internet, este free i este asemntor
programului BITMAP (acesta din urm ns nu genereaz automat coordonatele,
ci numai le afieaz n bara de stare).
Paii care trebuie urmai pentru a mpri o imagine .gif sau .jpeg n zone sunt:
1. Se lanseaz programul MAP THIS, se apeleaz menu-ul FILE comanda
NEW, Okay. Va aprea o fereastr cu fiierele .gif i .jpeg.
Figura 11. 2. Incrcarea unei imagini
2. Fereastra poate fi redimensionat cu ZOOM IN (mrete) ZOOM

OUT (micoreaz).
Figura 11. 3. Hart imagine

137
3. Pentru trasarea zonelor se apas n bara de butoane pe butoanele:
pentru dreptunghi
pentru cerc
pentru poligon
Pentru a trasa o linie poligonal se execut cu clic n locul de Start, apoi

se traseaz o linie a poligonului, apoi iar un clic, .a.m.d. n final, pentru a ncheia
zona poligonal se execut dublu clic.
Figura 11. 4. Trasarea zonelor

tergerea unei zone
Se selecteaz zona care se dorete a fi tears, prin apsarea butonului
deasupra zonei i se d comanda DELETE AREA sau se apas
4. Dup trasarea zonelor, trebuie s adugm referine pentru fiecare din
ele. Pentru aceasta, din meniul View se selecteaz Area List i va
aprea n stnga ferestrei o list cu zonele numerotate:
138
Figura 11. 5. Lista zonelor
Cnd este selectat un element al listei va aprea zona corespunztoare,
selectat cu o alt culoare.
5. Dac se efectueaz dublu clic pe o imagine se deschide o fereastr, cu numele
zonei n care apare o caset pentru a trece adresa fiierului URL legtur.
Figura 11. 6. Adresa fiierului legtur

6. Dup definirea zonelor i a URL-ului la care se leag zonele definite se
salveaz fiierul, astfel: FILE-SAVE AS -CSIM i se salveaz sub
numele .html.
Dac se salveaz:
ntr-un fiier deja existent care conine imaginea introdus, va aprea
codul pentru hart <MAP><AREA 1>..<AREA n> <MAP>
ntr-un fiier nou, urmeaz ca n acesta s fie inserat imaginea cu
<IMG> i harta este complet definit
Fiierul a fost salvat ntr-unul nou cu numele facultmat.html, iar harta cu
numele facmat.
139
<BODY>
<MAP NAME="facmat">
<!- #$-:Image Map file created by Map THIS! -->
<!- #$-:Map THIS! free image map editor by Todd C. Wilson -->
<!- #$-:Please do not edit lines starting with "#$" -->
<!- #$VERSION:1.30 -->
<!- #$DATE:Sat Jan 06 15:34:35 2007 -->
<!- #$PATH:C:\CARTE_WEB\CAP_WEB_11\ -->
<!- #$GIF:FACMAT.jpg -->
<AREA SHAPE=RECT COORDS="226,12,464,276"
HREF="http://www.fmi.unibuc.ro">
<AREA SHAPE=CIRCLE COORDS="536,173,74"
HREF="sala_calculatoare.html">
<AREA SHAPE=POLY
COORDS="170,18,16,167,167,309,221,265,215,33,170,18" HREF="istoric.doc">
</MAP></BODY>
La acest cod generat de MAP THIS se adaug tag-urile <HTML>,<HEAD>
</HEAD>, </HTML> i neaprat imaginea., astfel:
<IMG src=facmat.JPG usemap=#facmat
Executnd fiierul harta_facmat.html, browser-ul va afia:
Figura 11. 7. Fiierul html creat cu MAP THIS

Clic n partea stng: se deschide fiierul istoric .doc, clic n centru: se
obine legtura la site-ul facultii de matematic i clic dreapta: se va obine
fiierul sali_calculatoare.HTML.
140
Figura 11. 8. Fiierele legtur la hart
141
12. Faciliti suplimentare Multimedia
Conceptul multimedia este unul din cele mai tentante i moderne concepte
utilizate n lumea informaticii. Prin tehnologii multimedia se nelege totalitatea
modalitilor de creare, utilizare, stocare, regsire i difuzare a aplicaiilor din
medii multiple, precum text, grafic, imagine, sunet i animaie. Multimedia
semnific prezena simultan a multor astfel de medii ntr-un document (ca de
exemplu, o pagin web). Termenul de hipermedia desemneaz documentele
multimedia care cuprind hiperlegturi, acestea fiind modul uzual de existen a
documentelor multimedia pe spaiul Web.
Fiierele multimedia pot fi fiiere de:
Aplicaii, care sunt executate de sistemul de operare i au, n general,
extensia .exe, (ca de exemplu, programe de prelucrare grafic, de calcule
etc.) Unele aplicaii sunt independente (WORD, EXCEL, MAP THIS
etc.), iar alte aplicaii sunt dependente (ca de exemplu, controale
ActiveX, programe PLUG-IN etc.)
Date, folosite pentru stocarea datelor. Extensia acestor tipuri de fiiere
indic tipul datelor stocate i a aplicaiei, folosit pentru citirea, editarea
i tiprirea lor. Sistemul de operare al calculatorului stabilete o legtur
ntre fiierele de date i aplicaia care prelucreaz datele din fiier.
Pentru a constata dac un fiier este de aplicaie sau de date, se execut
clic pe butonul drept al mouse-ului i din meniul rapid se selecteaz
comanda Properties. n caseta Type of file a ferestrei va aprea:
Application dac fiierul este de aplicaii (de exemplu, WORD)

Mediu de exemplu text, image, video etc. dac fiierul este de
date. n acest caz mai apare o caset Open With care indic aplicaia
prestabilit care va deschide fiierul respectiv de date
12.1. Multipurpose Internet Mail Extensions (MIME)

Pentru a putea fi recunoscute de aplicaiile hypermedia, fiecare fiier de
date trebuie identificat printr-un tip MIME (Multipurpose Internet Mail Extension).
MIME a fost realizat de Internet Engineering Task Force (IETF) n 1992.
Standardul MIME organizeaz extensiile fiierelor multimedia n tipuri i
subtipuri (de exemplu, text/html, text/CSS, image/jpg, image/gif etc.).
142
n capitolul 2 am clasificat fiierele de date pe diferite medii.
n tabelul de mai jos vor fi date o parte din fiierele de date, specificnd
extensia, tipul i subtipul MIME.
Descriere Extensie de fiier Tip/subtip MIME
text HTML html,htm text/html

text obinuit txt text/plain
fiier CSS Css text/css
imagini GIF gif image/gif
fiiere JPEG jpg,jpeg,ipe image/jpeg
PNG png image/x-png
fiiere TIFF tiff,tif image/tiff
fiiere Microsoft Bitmap bmp image/x-ms-bmp
fiiere audio de baz au,snd audio/basic
fiiere video Microsoft wav audio/x-wav
format audio Macintosh aif,aiff,aifc audio/x-aiff
format audio Microsoft wav audio/x-wav
audio MPEG mpa,mpega audio/x-mpeg
audio MPEG-1 mp2a,mpa2 audio/x-mpeg-2
audio Real ra,ram application/x-pn-realaudio
MIDI mmid x-music/x-midi
video MPEG mpeg,mpg,mpe video/mpeg
video MPEG-2 mpv2,mp2v video/mpeg-2
Macintosh Quick Time qt,mov video/quicktime
video Microsoft avi video/x-msvideo
Microsoft Rich Text rtf application/rtf
Adobe Acrobat Reader PDF pdf application/pdf
fiiere Microsoft Word doc application/msword
fiiere Microsoft Excel xls application/ms-excel
fiiere Microsoft Power ppz application/mspowerpoint
Point
fiiere Microsoft Power ppt application/vnd.ms-powerpoint
Point
fiiere VRML wrl,vrml x-world/x-vrml
12.2. Aplicaii Plug-in i ActiveX

Aplicaiile dependente sunt utilizate ca elemente ajuttoare pentru alte
aplicaii. Dintre acestea, vom discuta despre programele de completare (plug-in) i
controale ActiveX.
12.2.1. Plug-in programe de completare

Plug-in-urile sunt aplicaii dependente care ajut browser-ele s afieze
corect datele din fiierele de date, n ferestrele browser-ului.
143
Aceste programe se gsesc pe Internet i se pot descrca gratuit. Fiecare
program de completare are n vedere o serie de extensii de fiiere i tipuri MIME.
De exemplu, programul Adobe Acrobat lucreaz cu fiiere .pdf, iar tipul
MIME este application/pdf.
n tabelul de mai jos sunt date cele mai utile programe de completare:
Nume Extensii de nume

Tipuri MIME acceptate
program de fiier acceptate
Windows .asf,.asx,.wma, application/x-mplayer2,application/asx,
Media .wax,.wmv, video/x-ms-asf-plugin,video/x-ms-asf, video/x-
Player .wvx ms-wm,
audio/x-ms-wax, video/x-ms-wmv, video/x-ms-
wvx
.aiff,.au,.mpeg, audio/aiff,audio/basic,audio/midi,audio/mpeg,
.wav,.aif,.mid, audio/wav, audio/x-aiff, audio/x-midi,audio/x-
.png,.tif,.tiff, mpeg,
Apple .bmp,.ptng, audio/x-wav,image/png,image/tif, image/x-bmp,
Quick .png,targa,.avi, image/x-macpaint, image/x-photoshop,image/x-
Time .flc,.mpe png,
image/x-sgi,image/x-targa,image/x-tiff,video/avi,
video/flc, video/mpeg, video/quicktime,video/x-
mpeg, video/x-msvideo
.mp3,.mp2,.mp1, Audio/mid,application/ x-msdownload,
Winamp .wma,.voc,.wav, Audio/mpeg,audio/mpg,audio/mpg, audio/mp3,
MP3 .cda,.it,.xm,.s3m audio/x-mpg,Application/x-winamp-plugin,
Player .stm,.mod,.dsm, Interface/x-winampskin,
.far,.ult,.mtm,.669 Application/x-mpeg,audio/x-mp3,Audio/x-
.mid,.m3u,.pls, scpls,audio/mpegurl, Audio/mpegurl,audio/scpls,
.mjf Audio/x-vnd.Audio.Explosion. Mjuide Media
Flash .spl,.swf Application/futuresplash,
Player Application/x-shockwave-flash
Adobe .pdf Application/pdf
Acrobat
12.2.2. ActiveX
Conceptul de obiecte sau componente ActiveX s-a dezvoltat pe baza
tehnologiei OLE (Object Linking and Embedding) a corporaiei Microsoft care
permite s inserm obiecte COM i alte aplicaii. Controalele ActiveX se pot insera
n aplicaii pentru a putea fi refolosite cu toate funcionalitile lor. Controalele
ActiveX funcioneaz ca o interfa, astfel codul inclus n pagina Web
interacioneaz cu controlul ActiveX, iar acesta interacioneaz direct cu programul
de navigare.
Prin aceast tehnologie aproape orice cod poate fi executat de la nivelul
programului de navigare, de la procesare de texte, la filme, animaie/video etc.
144
Fiecare control ActiveX se introduce n paginile Web cu ajutorul etichetei
<OBJECT> i cu parametrii specificai de eticheta <PARAM>, etichete care vor fi
descrise n seciunile urmtoare.
12.3. Elemente OBJECT i PARAM

Elementul OBJECT este un element foarte important, considerat i ca
superelement deoarece permite introducerea n fereastra browser-ului a oricrui tip
de informaie multimedia (imagini, aplicaii, fiiere, alte pagini Web i ActiveX).
Sintaxa acestui element este:
<OBJECT atribute>
<PARAM atribute>

..
<PARAM>
</ OBJECT>
Dup cum se observ ntre tag-urile <OBJECT> i </ OBJECT> se pot
introduce mai multe elemente <PARAM >.
Atributele elementului OBJECT sunt:
hight, width definesc nlimea, limea elementului multimedia inserat
align definete alinierea elementului multimedia inserat
hspace, vspac definesc spaiul alb din jurul elementului inserat
border definete spaiul alb i chenarul din jurul elementului inserat
title indic o sugestie atunci cnd suntem cu mouse-ul deasupra
elementului
data indic afiarea de ctre browser a fiierului multimedia i are ca
valoare o adres URL valid
type determin tipul i subtipul MIME asociat fiierului
id indic un nume ce reprezint un identificator unic de clas
classid specific elementul de control ActiveX ce va fi folosit pentru a
reda/afia/rula fiierul multimedia inserat. Acest atribut are ca valoare un
cod unic al clasei unui control Microsoft ActiveX recunoscut, care se
gsete n Registry Editor i are forma:
classid:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
Tabelul de mai jos conine cele mai importante controale ActiveX

mpreun cu valorile atributului classid:
145
DESCRIERE CLASSID
button D7053240-CE69-11CD-A777-00DD01143C57
tabel 978C9E23-D480-11CE-Bf2D-00AA003f40D0
textfield 8BD21D10-EC42-11CE-9E0D-00AA006002f3
graphic 369303C2-D7AC-11d0-89D5-00A0C90833E6
calendar 8E27C92B-1264-101C-8A2F-040224009C02
avi 05589FA1-C356-11CE-BF01-00AA0055595A
excel 0002E510-0000-0000-C000-000000000046
Iexplorer 0002DF01-0000-0000-0000-000000000046
ClipArt Gallery 00030026-0000-0000-C000-000000000046
Java 3EFB1800-C2A1-11CF-960C-0080C7C2BA87
NOT: cnd se instaleaz un program el se nregistreaz n registre pentru

aplicaii ale Windows-ului. Fiecare aplicaie are un cod unic, numit GUID
(Globally Unique IDentifier), care este acelai pe orice calculator. Pentru a afla
codul GUID pentru un anumit program se execut programul Regedit.exe ( Start /
Run / Regedit.exe) i se caut n registre la HKEY _CLASSES _ ROOT / CLSID.
Dac programul nu este gsit n registre de ctre browser, nseamn c el nu
este instalat pe calculatorul propriu i pentru a-l descrca i instala se folosete
atributul:
codebase care indic browser-ului locaia de unde se poate descrca
programul, de obicei se introduce locaia kitului de instalare (n acest
curs presupunem c programele sunt instalate).
146
Figura 12. 1. Aflarea codului GUID pentru controlul A
Cu ajutorul marcajului OBJECT i a atributelor sale, enumerate mai sus,

se poate insera un obiect ntr-o pagin.
Marcajului <OBJECT> i se asociaz marcajul <PARAM> care indic
fiierul care trebuie s ruleze acest obiect i n ce mod (aa cum un obiect deine
147
anumite metode care sunt descrise n funcie de tipul su). Forma tag-ului
<PARAM> este: <PARAM name = nume value =valoare>.
Am artat c se pot insera fiiere, imagini, aplicaii, pagini i ActiveX cu
ajutorul etichetei <OBJECT>, care poate avea anumii parametri n funcie de
obiectul inserat.
Inserarea diferitelor fiiere

Pentru inserarea diferitelor fiiere, elementul OBJECT poate avea
atributele din exemplul de mai jos:
<HTML>
<HEAD>
</HEAD>
<BODY>
<OBJECT id="Adobe Acrobat Control for ActiveX" width="320" height="240"
classid="clsid:CA8A9780-280D-11CF-A24D-444553540000"
data="sample.pdf"">
<PARAM name="src" value="sample.pdf">
</OBJECT >
</BODY>
</HTML>
Figura 12. 2. Inserarea fiierelor cu ajutorul elementului OBJECT
Inserarea imaginilor
n ultimul timp, exist tendina de a insera n pagini imagini cu ajutorul
etichetei <OBJECT> n loc de eticheta <IMG>, astfel:
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER> Inserarea imaginilor</CENTER>
<TABLE cellspacing="2">
<TR>
<TD><OBJECT data="flori5.jpg" width=200 height=200></OBJECT>
<TD> <OBJECT data="Water lilies.jpg" width=200 height=250></OBJECT>
148
</TR>
</TABLE>
</BODY>
</HTML>
Figura 12. 3. Inserarea imaginilor cu elementul OBJECT
Inserarea miniaplicaiilor
Miniaplicaiile pot fi inserate n pagini HTML, folosind elementul
<applet> i <OBJECT>.
n acest capitol se va folosi elementul <OBJECT> pentru a insera unele
aplicaii ntr-o pagin. Browser-ul Netscape nu accept inserarea miniaplicaiilor
cu ajutorul elementului OBJECT, iar Internet Explorer avem, de exemplu:
<OBJECT codetype="application/msword>
<PARAM name="text" value="Bine ati venit in Word">
</OBJECT>
Inserarea Controalelor ActiveX
Presupunem c dorim s redm un fiier .avi sau un fiier .mpeg. Pentru
aceasta este nevoie de inserarea programului Windows Media Player. Cu acest
program putem reda fiiere: .avi, .mpeg,,mpg, .wmv, .wma, aa cum reiese din
exemplul de mai jos.
<HTML>
<HEAD>
</HEAD>
<BODY>
<OBJECT id="WMPlayer" width="320" height="240" classid="clsid:05589FA1-
C356-11CE-BF01-00AA0055595A">
<PARAM name="src" value="sample.avi">
</OBJECT> <BR>
<OBJECT id="buton" width=100 height=50 classid="clsid:D7053240-CE69-
11CD-A777-00DD01143C57">
<PARAM name="caption" value="buton">
149
</OBJECT> <BR>
<OBJECT id="WMPlayer" width =320 height=240
classid=clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6>
<PARAM name="url" value="d:\poze\aniversare_2006\MVI_8297.AVI">
</OBJECT >
</BODY>
</HTML>
Figura 12. 4. Inserarea controalelor ActiveX
12.4. Elementul MARQUEE

La finalul descrierii limbajului HTML, descriem elementul MARQUEE,
cu ajutorul cruia putem realiza animaie, necesar, de exemplu, n publicitate.
Sintaxa acestui element este <MARQUEE> bloc </MARQUEE>, unde
coninutul blocului se deplaseaz ntr-o anumit direcie pe ecran i poate conine
text i/sau imagini.
Un exemplu simplu este dat mai jos:
150
<HTML>
<HEAD>
</HEAD>
<BODY>
<MARQUEE>
Acesta este casa de vacanta!
<IMG src=casa.jpg width=150 height=150>
</MARQUEE>
</BODY>
</HTML>
Figura 12. 5. Elementul MARQUEE
Atributele elementului MARQUEE sunt:

direction indic direcia de micare a blocului i poate lua valorile:
left valoare implicit, de la dreapta la stnga
right de la stnga la dreapta
down de sus n jos
up de jos n sus
behavior indic tipul de scroll i poate lua valorile:
scroll valoare implicit, coninutul blocului se deplaseaz de la o
margine la alta continuu, prsind ecranul i apoi reapare
slide coninutul blocului se oprete la marginea opus apariiei
alternate coninutul blocului se deplaseaz alternativ de la o
margine la alta a ecranului fr s-l prseasc
151
scrolldelay determin timpul n milisecunde ntre dou afiri
consecutive ale blocului (valoarea implicit este 85). Exemplu
<MARQUEE scrolldelay=1000> bloc </MARQUEE> determin
deplasarea coninutului blocului la interval de 1 secund
scrollamount determin numrul de pixeli cu care se mut coninutul
blocului la un pas (valoarea implicit este 6)
loop indic numrul de cicluri pe care le efectueaz coninutul blocului
ntr-o execuie (valoare implicit infinit); acest atribut trebuie folosit
cu atributul behavior=slide, altfel coninutul blocului dispare cnd se
termin ultimul ciclu
bgcolor determin culoarea de fond a spaiului unde se deplaseaz
coninutul blocului
width determin dimensiunea blocului n lime i se exprim n pixeli
sau procente
height determin dimensiunea blocului n nlime i se exprim n
pixeli sau procente
vspace determin spaiul alb din jurul blocului pe vertical
hspace determin spaiul alb din jurul blocului pe orizontal
n continuare se d un exemplu atractiv, n care se folosesc dou elemente
MARQUEE. Unul n care introducem mai multe imagini de grup (una lng alta),
i care va defila n mod continuu pe ecran, iar cel de al doilea conine un text
explicativ despre grup.
Codul HTML pentru acest exemplu este:
<HTML>
<HEAD>
</HEAD>
<BODY>
<MARQUEE direction=right behavior=slide bgcolor=magenta
scrolldelay=100>
<IMG src=radu.jpg width=200 height=150 >
<IMG src=fam.jpg width=150 height=150>
<IMG src=cori_florin.jpg width=200 height=150 >
<IMG src=silviu.jpg width=150 height=150 >
</MARQUEE>
<MARQUEE direction=right bgcolor=red scrolldelay=100 height=25%>
FAMILIA MEA
</MARQUEE>
<BODY>
<HTML>
152
Figura 12. 6. Elementul MARQUEE cu atribute
153
154
PARTEA A II-A
CSS
155
156
13. CSS-Cascading Style Sheets
(Foi de stil n cascad)
13.1. Introducere n modelele de stiluri

CSS constituie un instrument avansat de formatare a oricrui marcaj
HTML, n vederea realizrii unor pagini WEB profesionale.
Foile de stiluri HTML sunt asemntoare cu stilurile de formatare a unui
document WORD i permit introducerea unei mulimi de atribute prin care se pot
defini fonturi, culori, alinieri etc.
Consoriul Web W3C de la CERN(realizatorul spaiului Web) pune la
dispoziia creatorilor de pagini ntreaga specificaie CSS la locaia
http://www.w3.org/TR/REC-CSS2/
Legturile dintre HTML i CSS se realizeaz cu ajutorul elementului
STYLE.
Stilurile pot fi definite ca:
stiluri in-line care se definesc ca atribute STYLE. Aproape toate
elementele HTML(cu excepia elementelor BASE, HEAD, BASE
FONT, HTML, META, PARAM, SCRIPT, STYLE, TITLE) permit
acest atribut. Valorile atributului STYLE constau dintr-o list de
specificaii, sub forma nume-proprietate:valoare, pus ntre ghilimele i
separate prin punct i virgul
foi de stil n interiorul unui document, plasate n partea de antet a
documentului, n interiorul blocului <STYLE>...</STYLE>
foi de stil, definite ntr-un fiier extern, care se poate lega la orice
pagin WEB
13.2. Stiluri interne (in-line)

n capitolele precedente am definit elementele HTML mpreun cu
atributele lor specifice, necesare realizrii paginilor WEB.
Majoritatea elementelor HTML (cu excepia celor enumerate mai sus)
admit urmtoarele atribute:
style atribuie un stil intern unui element. Valorile posibile sunt
specificaii (declaraii) de stiluri, separate prin ;, ca de exemplu
style=font-style:italic; font-size=10pt
157
title definete o informaie pentru un element. Valorile sunt iruri de
caractere scrise ntre ghilimele, care apar ntr-un chenar galben, atunci
cnd suntem cu mouse-ul deasupra elementului
dir indic direcia de afiare a coninutului elementului. Valorile
posibile sunt: ltr-de la stnga la dreapta i rtl- de la dreapta la
stnga
lang definete limba n care va aprea scris coninutul elementului.
Valorile posibile sunt maxim 5 caractere ntre ghilimele, de exemplu
en, en-us
id definete un identificator unic pentru un element (a fost folosit n
capitolul precedent ca atribut al elementului OBJECT)
class definete o clas a elementului. Valorile posibile sunt liste de
unul sau mai muli identificatori separai prin spaiu, de exemplu
class=nume1,.....,numen
Stilul in-line pentru un element este introdus printr-un atribut STYLE.

Valoarea acestui atribut este o list de specificaii de stil, separate prin ; i
cuprinse ntre ghilimele.
O specificaie de stil sau o declaraie de stil este ca un atribut pentru un
marcaj, dar cu urmtoarea sintax:
nume proprietate:valoare-proprietate
unde:
nume-proprietate definete o proprietate i nu este cuvnt rezervat
valoare-proprietate - este o valoare credibil pentru proprietate
Exemple de declaraii de stil :
color: yellow stabilete culoarea galben a textului
font-style: italic stabilete stilul cursiv pentru text
Cu ajutorul stilurilor interne pentru un element se poate obine o mulime
de efecte locale. Modelele de stil in-line se obin aadar prin adugarea atributului
style la anumite marcaje HTML, conform sintaxei:
style=specificaie1; specificaie2; ...; specificaien
n anexa C este dat un tabel complet cu specificaiile(declaraiile) de
stil. O parte dintre aceste declaraii, grupate pe categorii (de text, de culoare,
de margini etc.), va fi detaliat n capitolul urmtor.
n exemplul de mai jos se definesc modelele de stil in-line, precum i
unele atibute comune marcajelor, definite mai sus:
<HTML>
<HEAD></HEAD>
</BODY>
<H2 title= Despre tabele style="font-style:italic; font-size:20pt; font-
weight:extra-bold; text-decoration:underline; text-align:center;">
TABELE
</H2>
<P dir=rtl style="font-size:12;color:green;font-family:curier,arial;">
158
TABELELE SUNT FOLOSIT PENTRU EVIDENTIEREA UNOR DATE
SAU PENTRU A DELIMITA SPAIUL UNEI PAGINI </P>
<TABELE>
<TR><TD align=center><IMG src="univ.jpg width=100 height=100
"style="cursor:crosshair;">
<TR><TD width="10%" STYLE="text-align=center; color:DarkRed;
background:yellow; text-transform:uppercase">
UNIVESITATEA SPIRU HARET
</TABLE>
</BODY>
</HTML>
Figura 13. 1. Stiluri in-line
13.3. Foi de stil n pagin

n aceast seciune vom extinde stilurile de la un element HTML, cum au
fost definite n seciunea precedent, la toate elementele de acelai tip (de exemplu,
P) dintr-un document. Pentru a defini foile de stil, introducem noiunile de bloc de
specificaii, selector i regul.
Un bloc de declaraii sau specificaii este o list de specificaii separate
prin ; i cuprinde ntre acolade, {...}, de exemplu:
{font-size:20pt ;color:red; font-style:italic;}.
ntr-un bloc de declaraii, ultimul simbol ; poate lipsi.
Un selector sau tip de declaraii este un obiect cruia i se aplic
declaraiile definite sau blocul de declaraii.
159
Exist mai multe categorii de selectori:
de tip sunt elementele HTML, definite n capitolele trecute
Id sunt identificatori introdui mai sus
Class de clas
Universali definii prin simbolul * i care se aplic oricrui element
pseudo-clase definesc clase a cror nume este un cuvnt rezervat
pseudo-elemente definesc anumite pri dintr-un element (de
exemplu, prima liter dintr-un paragraf)
De exemplu, dac dorim s aplicm un stil oricrui element de tip <P> din
pagin, putem scrie P{font-size:15pt;color:red;text-align:center;}.
O regul sunt perechi formate dintr-un selector (sau tipul declaraiei) i
dintr-un bloc de declaraii, cu urmtoarea sintax:
selector{bloc de declaraii} sau selector{declaraia1;.....declaraian;}.
Foile de stil sunt alctuite dintr-un set de reguli.
Foile de stil se trec n interiorul tag-ului pereche <STYLE> ....</STYLE>,
care se scrie n interiorul blocului de antet, astfel:
<HTML>
<HEAD>
<STYLE>
selector1 {bloc de declaraii}
selector2{bloc de declaraii}
selectorn{bloc de declaraii}
</STYLE>
</HEAD>
<BODY>
..............
</BODY>
</HTML>
Dac se dorete aplicarea unui stil asupra mai multor elemente, atunci
selectorii se vor grupa ntr-o list de selectori, separai prin virgul(),
s1,s2,s3.....{..}.
De exemplu: P, H2, DIV {color:blue; background:yellow;}
Un atribut al elementului style este type, care definete sintaxa foii de stil,
utilizat la definirea declaraiilor. Atributul type are valoarea prestabilit text/css.
Aa cum spune i numele, CSS semnific foi de stil n cascad, iar text
specific faptul c specificaiile de stil sunt reprezentate sub form de text, care
este i singura valoare posibil.
Dac se dorete s se asigure compatibilitatea cu browser-ele mai vechi,
care nu recunosc stilurile, foile de stil se pot include intr-un comentariu HTML,
astfel:
<HEAD> <STYLE type=text/css>
/* foaie de stil */
</STYLE> </HEAD>
160
Am menionat mai sus faptul c exist un selector universal, indicat prin
simbolul * i care corespunde oricrui element.
Un exemplu de foi de stil n pagin este redat mai jos:
<HTML>
<HEAD>
<STYLE>
P{font-size:20pt;font-weight:light;color:red;text-align:center:}
*{font-style:italic;}
OL{font-size:20pt;background:cyan;}
LI{font-size:15pt;color:blue;}
A{text-decoration:none;color:grown;}
</STYLE>
</HEAD>
<BODY>
<P><B>List </B>este un mod de organizare in care mai multe enunuri
pot fi numerotate, marcate sau definite intr-un anumit fel .
<OL>n HTML exist trei tipuri de liste:
<LI>Liste ordonate(Ordered list - OL)
<LI>Liste neodornate(Unordered list - UL)
<LI>Liste de definiie(Definiion list - DL)
</OL>
Aceasta este o legatura la lista universitailor particulare acreditate,
de pe site-ul MEC
<A href="http://www.edu.ro/index.php/articles/3880"> USH </A>
</BODY></HTML>
Figura 13. 2. Foi de stil interne
161
13.3. Foi de stil externe
n seciunea precedent am definit stiluri pentru selectorii de tip (elemente
HTML) dintr-un fiier HTML. n aceast seciune se arat cum se pot extinde
stilurile la toate paginile Web de pe server-ul utilizat.
Dac s-ar copia foaia de stil din pagina n care a fost definit n mai multe
pagini n care dorim s apar foaia de stil respectiv, ar aprea un inconvenient,
constnd n faptul c, atunci cnd se dorete o modificare de stil, modificarea
respectiv trebuie fcut n toate paginile n care a fost copiat foia de stil.
Soluia de nlturare a acestui inconvenient const n executarea
urmtorilor pai:
se creeaz foaia de stil ntr-un fiier extern, care se salveaz cu extensia .css
se leag acest fiier de orice pagin Web care dorim s aib acelai
aspect. Pentru a crea o legtur ntre o pagin Web i un fiier foaie de
stil extern (.css), se folosete tagul <LINK> care se scrie n blocul de
antet (<HEAD>...</HEAD>) al respectivei pagini.
Elementul LINK
Aa cum am menionat, legtura dintre o pagin i un fiier .css, se
realizeaz cu elementul LINK.
Sunt obligatorii trei atribute ale elementului LINK:
type indic browser-ului limbajul n care este scris codul i are
valoarea unic text/css
rel definete tipul de fiier .css i are valoarea stylesheet
hre f- are ca valoare adresa URL a fiierului foaie de stil extern (.css),
care conine foaia de stil care se leag.
Pentru exemplificare, considerm foaia de stil creat n exemplu 13.2 pe
care o copiem ntr-un fiier nou Notepad i pe care l salvm cu extensia .css astfel:
stil-extern.css. n partea de cod a paginii se nlocuiete blocul <STYLE> ...
</STYLE> din antet cu tagul <LINK> plasat tot n antet.
Codul fiierului stil-extern.css este:
P{font-size:20pt;font-weight:light;color:red;text-align:center;}
*{font-style:italic;}
OL{font-size:20pt;background:cyan;}
LI{font-size:15pt;color:blue}
A{text-decoration:none; color:BlueViolet;}
Codul html care se va lega la acest fiier va fi:

<HTML>
<HEAD>
<LINK type="text/css" rel="stylesheet" href="STIL_EXTERN.CSS">
</HEAD>
<BODY>
<P><B>Lista </B> este un mod de organizare in care mai multe enunturi pot fi
numerotate, marcate sau definite intr-un anumit fel <P>
162
<OL>In HTML exista trei tipuri de liste:
<LI>Liste ordonate(Ordered list - OL)
<LI>Liste neodornate(Unordered list - UL)
<LI>Liste de definitie(Definition list - DL)
</OL>
Aceasta este o legatura la lista universitatilor particulare acreditate, de pe site-ul
MEC<BR>
<A href="http://www.edu.ro/index.php/articles/3880">USH</A>
</BODY>
</HTML>
Figura 13. 3. Foi de stil externe
13.5. Stiluri n cascad

CSS (Cascading Style Sheets) semnific, aa cum sugereaz numele, foi de
stil n cascad, pe care ni le putem imagina ca pe o cascad care se rostogolete
peste o nlime virtual, constnd dintr-un cod HTML.
Aceasta impune o anumit preceden (ordine de aplicare a stilurilor asupra
unui element) i anume:
1. Se aplic stilurile interne pentru un element, dac acestea exist
2. Se aplic foile de stil interne unei pagini (definite n antetul paginii),
dac acestea exist
3. Se aplic foile de stil (definite n fiiere externe), dac acestea exist
4. Dac nu exist stiluri definite se aplic stiluri HTML predefinite (de
exemplu, pentru font, size=3)
Un exemplu de stiluri aplicate n cascad este dat mai jos:
<HTML>
<HEAD>
<TITLE>Stiluri-cascada</TITLE>
<LINK type="text/css" rel="stylesheet" href="cascada.css">
<STYLE>
A{font-style:italic;font-wight:bold;}
163
OL{color:RGB(0,0,255);}
</STYLE></HEAD>
<BODY>
<H2 style="font-size:20pt; color:green;">
Style in-line, 20pt, culoare verde</H2>
<A href="flori.jpg" style="text-decoration:none;color:yellow;">
Legturi (Stil in-line:nesubliniat, culoare text galben; stil pagina:
cursiv,bold;
stil extern: fundal:BlueViolet)</A>
<OL>Definirea stilurilor(stil intern: blue, extern: italic, fundal cyan)
<LI style="color :red"><B>Stil in-line</B> <BR>
(stil intern:culoare rosie o anuleaza pe a stilului de pagina bleu
stilului extern: a lui OL - italic fundal cyan)
<LI style="background:red"><B>In antetul pagini </B> <BR>
(stil intern: fundal rosu;stil pagina:bleu; extern:italic fundal cyan)
<LI><B>In fisiere externe </B> <BR>
(stil pagina:bleu; extern:italic fundal cyan)
</OL>
<BODY>
</HTML>
Fiier extern: cascada.css
OL{font-style:italic;background:cyan;}
A{background:green;}
Figura 13. 4. Stiluri n cascad
164
13.6. Stiluri pentru diferii selectori
Stilurile se pot aplica selectorilor de tip (elemente HTML), aa cum s-a
procedat n seciunile precedente, sau altor selectori, care sunt elemente definite de
programatorii paginii Web, sau sunt elemente predefinite.
n aceast seciune, vor fi definii i exemplificai n subseciuni separate:
selectorii definii ID i CLASS
selectorii predefinii pseudo-class i pseudo-element
13.6.1 Selectorul ID
n seciunea 13.2 s-a menionat faptul c aproape orice marcaj HTML
poate avea atributul ID, care are ca valoare un identificator unic pentru ntreaga
pagin. Sintaxa atributului este ID=nume_id. Se pot crea stiluri pentru un
identificator, declarnd un selector ID care are sintaxa nume_id precedat de
simbolul # (ca la o definire de ancor a se vedea capitolul 7), astfel
#nume_id{bloc de specificaii stil}.
n exemplul urmtor este exemplificat utilizarea selectorului ID.
<HTML>
<HEAD>
<STYLE>
#PAR{background:red;font-style:italic}
</STYLE>
</HEAD>
<P id=par>Un text cu stil cursiv fundal rosu
<P>Un text obisnuit
</Body>
</HTML>
Figura 13. 5. Selectorul ID
165
13.6.2. Selectorul CLASS
CSS poate defini i clase de elemente. Ca i atributul id, i atributul class
este acceptat de majoritatea elementelor HTML. Se pot utiliza clase n definirea
unui stil, sintaxa selectorului CLASS fiind numele clasei precedat de simbolul
punct (.), astfel: .nume-clas{bloc de declaraii}
Atributul class are sintaxa binecunoscut a atributelor elementelor HTML:
class=nume-clas
n cazul n care se doresc mai multe stiluri de clas (c1{ }, c2{ },......cn{ })
atunci valoarea atributului class poate s fie o list de nume-clas, separate prin
spaii (class=c1 c2 cn), aa cum rezult din exemplul urmtor:
<HTML><HEAD><STYLE>
.cod{background:cyan;font-family:courier;}
.note{text-transform:uppercase;color:red;text-decoration:none;}
</STYLE></HEAD><BODY>
<P>Acesta este un paragraf fara stil
<P class="cod">Acesta este un paragraf scris cu stilul cod (fontul courier
pe fundal cyan)
<P class="note">Acesta este un paragraf scris cu stilul (culoarea rosie i
litere mari)
<P class="cod note">Acesta este un paragraf de observaii scris cu
stilurile celor dou clase
<P>Codul<B class="cod"> HTML</B> este executat de browser-ul
<I class="note">nternet Explorer</I></P>
<A href="Universitati.html"class="note">
Universitati-(o legatura)</A>
</BODY> </HTML>
Figura 13. 6. Selector de clas

Dac se dorete o clas pentru un anumit element HTML (de exemplu,
pentru elementul <P>), atunci selectorul se definete prin nume element i nume
clas, separate prin punct (.). n acest caz stilurile vor avea forma:
element.nume-clas {bloc de specificaii de stil}.
166
n exemplul de mai sus, aplicm selectorul de clas note numai elementului
P, astfel: P.note{text-transform:uppercase;color:red;text-decoration:none;}
Tag-urile <A class=note>, <I class=note> <B class=note>, dei au
definit stilul note, acesta nu se poate aplica, deoarece stilul .note se aplic numai
paragrafelor.
Figura 13. 7. Selector de clas pentru un tag HTML

OBSERVAIE!
Acelai efect se poate obine dac se folosete atributul ID=nume_id, n loc
de atributul class=nume_clas, iar n definirea selectorului se nlocuiete .nume-
clas cu #nume_id. Atributul ID a fost introdus pentru a face legtura ntre CSS i
JAVA SCRIPT, dup cum vom vedea n capitolele 20.
ntr-o pagin Web pot exista ambele atribute id i class i chiar cu acelai
nume, ca n exemplul urmtor:
<HTML>
<HEAD>
<STYLE>
.STIL{background:red; color:blue;}
#STIL{background:yellow;color:purple;}
</STYLE></HEAD>
<BODY>
<P class="stil"> Paragraf cu stil clas
<P> Paragraf fara stil
<P id="stil"> Paragraf cu stil ID
<P>Paragraf cu un cuvnt
<B id="stil" ID</B>cu stil
</BODY></HTML>
167
Figura 13. 8. Selectori id i class
13.6.3 Pseudo-clase
Pseudo-clasele ajut la specificarea unor proprieti speciale ale unor
elemente. Ele sunt predefinite i nu este permis redenumirea lor. Sintaxa prin care
se pot adresa este: element:pseudoclas{bloc de declaraii}
unde element poate fi:
un element HTML de exemplu, P
un identificator id i atunci scriem elementul ca un selector id, #nume
o clas i atunci scriem elementul ca un selector de clas, .nume-clas
Menionm faptul c blocul de declaraii este alctuit din declaraii de stil

cu forma: nume-proprietate:valoare, separate prin ; .
Vom exemplifica foile de stil pentru pseudo-clasele: first-child i
legturi
Pseudo-clasa first-child
Aceast pseudo-clas aplic stilul definit primului copil al elementului
printe i are sintaxa: element:first-child{...}.
n exemplul de mai jos formatm primul element (copil) dintr-o list
(printe) i prima linie (copil) dintr-un tabel (printe).
<HTML> <HEAD> <STYLE>
LI:first-child{color:blue;text-size:20pt;background:yellow}
TR:first-child{font-style:italic;font-
weight:bold;background:cyan;color:red}
</STYLE> </HEAD> <BODY>
<UL>Valorile atributului color:
<LI> nume-culoare(red, blue, etc.)
<LI>codul RGB in hexazecimal, sub forma #RRGGFF
<LI>codul RGB zecimal, de exemplu RGB(0,0,255) pentru albastru
</UL>
<TABLE border=2 bordercolor=green>
168
<TR><TD>A11<TD>A12
<TR><TD>A21<TD>A22
</TABLE>
</BODY> </HTML>
Figura 13. 9. Pseudo-clasa first-child
Pseudo-clase Legturi
n capitolul 7 am arta faptul c bold, subliniat n HTML, exist trei stri
pentru o legtur (activ, vizitat, nevizitat), iar pentru a le schimba culorile
predefinite (rosu, purple, bleu) se folosesc atributele elementului BODY: active,
vlink, respectiv link, care au valori nume sau cod de culoare.
n CSS o legtur poate fi n cinci stri ce corespund la cinci pseudo-clase:
active pentru o legtur activ, care are culoarea implicit
visited pentru o legtur ce a fost vizitat i care are culoarea
implicit purple
link pentru legturile care nu au fost vizitate i care au culoarea
implicit blue
hover o legtur deasupra creia se afl plasat cursorul mouse-ului
focus pentru o legtur selectat, care se poate activa cu ENTER
Prin CSS se pot modifica culorile legturilor i formatarea textului, aa
cum rezult din exemplul de mai jos.
<HTML> <HEAD>
<TITLE>STIL LEGATURI</TITLE>
<STYLE>
A:link{color:green;font-style:italic;}
A:visited{color:magenta;font-wight:bold;text-decoration:none}
A:hover{color:cyan;background:black;}
A:active{color:red;text-decoration:none;}
A:focus{background:yellow;color:green;}
</STYLE></HEAD>
<BODY>
<A href="Fig 13.1.html" >Exemplu stil in-line</A><BR>
<A href="Fig 13.2.html" >Exemplu stil-pagina</A><BR>
169
<A href="Fig 13.3.html" >Exemplu stil-extern</A><BR>
<A href="Fig 13.4.html">Exemplu stil cascada</A><BR>
<A href="Fig 13.5.html">Exemplu stil clasa</A><BR>
</BODY></HTML>
Figura 13. 10. Pseudo-clasa legturi
13.6.4 Pseudo-element
Pseudo-elementele sunt un fel de pseudo-clase, care permit s se schimbe
stilul pentru subpri ale unui element (de exemplu, prima liter dintr-un paragraf).
Se seteaz stilul ca la pseudo-clase: element:pseudo-element{bloc de declaraii}.
Vom exemplifica pentru pseudo-elementele:
first-letter - care permite s se formateze prima liter dintr-un bloc de text
first-line - care permite s se aplice un stil pentru prima linie dintr-un
bloc de text
Dup cum tim, exist urmtoarele blocuri de text:
paragraf <P>......</P>
paragraf preformatat <PRE>......</PRE>
de diviziune <DIV>.......</DIV>
de centrare text < CENTER>..</CENTER>
n exemplul urmtor se stabilete un stil pentru pseudo-elementele i
blocurile menionate mai sus.
<HTML> <HEAD> <STYLE>
P.PAR:first-letter{font-style:italic;font-size:30pt;}
CENTER:first-letter{color:#C0C0C0;font-size:30pt;}
DIV:first-line{text-transform:uppercase;color:"darkcyan";}
P.PAR:first-line{text-decoration:underline;text-
height:24pt;color=red;}
170
</STYLE> </HEAD> <BODY>
<P class="par">Paragraf care are doua stiluri pseudo-elemente:first-letter si first-
line<BR>Se observa faptul ca prima litera a mostenit si stilul primei linii(subliniat)
<CENTER>Acesta este un bloc centart<BR>
Are un stil pentru prima litera: culoarea silver, dimensiuni 30pt
</CENTER>
<DIV>Acesta este un bloc de diviziune<BR>
Pentru el s-a stabilit stilul first-line.Prima linie va fi scrisa cu culoarea DarkCyan si
cu litere mari
</DIV></BODY></HTML>
Figura 13. 11. Pseudo elementele first-letter i first-line
13.7. Elementele DIV i SPAM

Elementele DIV i SPAM au fost introduse n capitolul 3, ca elemente de
formatare logic. Am menionat atunci c DIV este un element de nivel bloc, care
este afiat la nceput de rnd (ca i <P> sau <PRE>), iar elementul <SPAM> este
un element in-line, care poate fi afiat pe acelai rnd cu textul (ca i B, I etc.) Spre
deosebire de P, DIV nu las un rnd liber nainte i dup el. Aceste elemente
pereche nu accept niciun stil fizic pentru coninut. Din acest motiv ele se
utilizeaz mpreun cu CSS pentru a ataa un stil la o seciune dintr-o pagin WEB,
cuprins ntre tag-urile <DIV> i </DIV> , <SPAM> i </SPAM>.
Am menionat atunci c singurul atribut al lui DIV este align=valoare,
atribut pe care SPAM nu l accept deoarece este element in-line.
Utiliznd CSS se pot folosi atributele ID i CLASS i pentru DIV i
SPAM, care ne permit s introducem stiluri i pentru coninutul lor.
Elementul SPAM, chiar dac este element de linie, are sintaxa <SPAM>
coninut </SPAM> i permite introducerea coninutului ntr-o linie.
n exemplul urmtor, exemplificm ataarea stilurilor CSS pentru
elementele DIV i SPAM.
<HTML><HEAD>
<STYLE>
.STIL{background:red; color:blue;}
171
DIV:first-line{color:magenta;text-transform:uppercase;}
</STYLE>
<BODY>
<DIV align=center>Acesta este un bloc cu prima linie scrisa cu stilul pseudo-
element first-line<BR>
Elementul <SPAM class=.STIL> SPAM </SPAM> este un element in-line
</DIV> </BODY> </HTML>
Figura 13. 12. Elementele DIV i SPAM cu stiluri
172
14. Clase de proprieti n CSS
Am artat n capitolul precedent c putem crea stiluri cu ajutorul limbajului

CSS (Cascading Style Sheets). Ultima variant CSS2 este mai evoluat, n sensul
c poate stabili i poziia unui element n pagin.
Legtura dintre HTML i CSS2 se realizeaz cu elementul STYLE.
Stilurile sunt formate din mai multe declaraii, care sunt pentru CSS ca atributele
pentru HTML. O declaraie este format din proprietate: valoare.
CSS ofer o mulime de proprieti, care pot fi grupate n clase din punct
de vedere a modului de adresare, ca de exemplu, proprietile pentru: fonturi, text,
margini, culoare, borduri etc. n acest capitol vom descrie unele proprieti a
claselor enumerate mai sus, o list complet a lor fiind dat n anexa C, mpreun
cu valorile lor posibile.
14.1. Casete n CSS

Din punct de vedere al CSS2 orice element HTML este alctuit sub form
de caset (aa cum reiese din figura 14.1), format din patru pri:
Content (coninut) coninutul format din text sau imagine
Padding (estur) zona dintre coninut i bordur. Poate fi
dimensionat, dar nu poate fi vizibil printr-o culoare.
Border (bordur) marginea elementului care poate fi fcut vizibil
dac, de exemplu, i se atribuie o culoare
Margin (margine) zona dintre caset i cellalte elemente. Nu este
vizibil de ctre vizitatorii paginii.
Figura 14. 1. Elementele unei casete

173
O caset poate fi redimensionat cu ajutorul proprietilor WIDTH i
HEIGHT.
Proprietatea WIDTH dimensioneaz o caset n lime.
Proprietatea HEIGHT dimensioneaz o caset n nlime.
Valorile posibile ale acestor proprieti sunt:
Lungime exprimat n: in, cm, mm, px, pt, em
Procente: relative la fereastra paginii
nlimea i limea casetei includ bordura, dar nu includ marginile. Dac

coninutul nu ncape n caset redimensionat, atunci nu se respect nlimea i
limea date de aceste atribute.
n continuare vom prezenta proprietile pentru fonturi, text, culoare,
casete, mpreuna cu valorile lor. Deoarece majoritatea acestor proprieti au ca
valori inherit(motenit), motenirea valorii printelui, aceast valoare nu va mai
fi menionat la valorile proprietilor care vor fi descrise n continuare.
14.2. Fonturi n CSS

n CSS exist un set de proprieti pentru fontul coninutului unui element
HTML. Acestea ne permit s schimbm fontul (caracteristicile tipului de liter) i
sunt grupate n clasa FONT n CSS. Proprietile pentru fonturi i valorile lor sunt
descrise n continuare.
Proprietatea font-style - indic stilul cu care browser-ul va afia
elementul dorit (de exemplu, P). Valorile posibile sunt:
normal
italic (cursiv)
oblique (nclinat)
Proprietatea font-variant indic varianta de font cu care browser-ul va
afia caracterele mici. Valorile posibile sunt:
normal
small-caps (ca i majusculele dar de dimensiuni mai mici)
Proprietatea font-weight indic grosimea cu care browser-ul va afia
caracterele. Valorile posibile sunt:
normal (este implicit i este 400)
bold (este 700)
bolder (este imediat superioar, dar mai mic dect 900)
lighter (valoarea imediat inferioar, dar mai mare dect 100)
100 / 200 / 300 / 400 / 00 / 600 / 700 / 800 / 900
Proprietatea font-size indic browser-ului dimensiunea cu care s
afieze caracterele. Valorile posibile sunt:
absolute: xx-small / x-small / small /medium/ large / x-large / xx-large
relative la valoarea printelui: smaller / larger
174
lungimi n: mm / cm / in(inci) / pc(pica) / px(pixeli) / pt(puncte) /
em(relativ la font-style. Un spaiu em este cea mai lat liter a unui
FONT, de exemplu M), ex(relativ la cel mai nalt caracter al fontului)
Procente(relativ la valoarea printelui, de exemplu: 50%, -20%)
Cea mai folosit este valoarea exprimat n puncte (pt).
Un font de 10pt msoar 10 pt de la cota superioar a unei litere majuscule
sau ascendente (H sau h), pn la cota inferioar a unei litere descendente (g,p).
Relaia dintre diferite lungimi este:
1 n=2.56 cm = 72 pt = 6 pc de unde rezult:
1 pt = 0.035 cm i 1 pc = 0.42 cm
Proprietatea font-family are rolul de a stabili un set de fonturi cu care
vor fi scrise caracterele. Nu se tie dac un vizitator al unei pagini are pe calculator
un anumit font, motiv pentru care se consider mai multe familii de fonturi.
nume de familii, ca de exemplu Arial, Courier, Helvetica etc. Dac o
familie este format din mai multe cuvinte, atunci acestea sunt scrise
ntre ghilimele, de exemplu Times New Roman
nume generic de fonturi, care mai degrab specific un stil dect o
familie de fonturi. Numele generice sunt cuvinte cheie i nu se scriu
ntre ghilimele. Aceste fonturi sunt: serif, sans-serif, cursive, monospace
i fantasy. Este indicat ca ultimul font din list s fie unul generic.
Browser-ul va folosi dintr-o mulime de fonturi primul font pe care l
recunoate, de exemplu:
P {font-family:Courier New, Arial, monospace}
Proprietatea font grupeaz proprietile de mai sus. Valorile posibile
sunt valorile proprietilor de mai sus, n ordinea:
<font-style>
<font-variant>
<font-weight>
<font-size>
<font-family>
Un exemplu pentru proprietile de font este dat mai jos:
<HTML><HEAD>
<STYLE>
OL {font:italic small-caps bold 18pt Courier New serif;}
LI{font-style:italic; font-size:15pt;font-family:Arial, serif;}
SPAN { font-variant:small-caps; color:red;font-size:1.5 em}
P{ font:italic small-caps bolder 15pt Garamond serif;}
TABLE{font-variant:small-caps;font-size:small;font-weight:lighter;
background:yellow}
</STYLE></HEAD>
<BODY>
<P> Utilizarea proprietilor pentru fonturi </P>
175
<OL type=I>
<LI><Font face=Arial size=+1 color=blue>Tehnici de programare </Font>
<UL>
<LI> Backtracking
<LI> Divide et impera
<LI> Greedy
<LI> Programare dinamic
</UL>
<LI> <Font face=Arial size=+1 color=blue> Arbori</Font>
<UL>
<LI> Arbori Binari</li>
<LI> Arbori Oarecare</li>
<LI> Arbori de sortare</li>
</UL>
</OL>
<TABLE border=3>
<TR><TD>Dac ai ntrebari
<TR><TD> <A href=mailto:rodicaniculescu@gmail.com> Scrie-mi la adresa
rniculescu@gmail.com</A>
</TABLE>
<P> Studentii care doresc <SPAN>Consultatii,</SPAN> pot s-mi scrie </P>
</BODY></HTML>
Figura 14. 2. Fonturi n CSS
176
14.3. Proprieti pentru TEXT
CSS are mai multe proprieti pentru TEXT. O parte dintre acestea vor fi
descrise mai jos.
Proprietatea text-align se folosete pentru alinierea textului. Valori
posibile sunt:
left
right
center
justify
Proprietatea text-decoration permite introducerea unor decoraiuni
textului: Valorile posibile sunt:
none fr decoraiune
underline subliniat
overline barat
line-through tierea cu o linie
blink sclipire
Proprietatea text-indent permite identarea primului rnd din bloc cu o

valoare precizat: Valorile posibile sunt:
lungime n: cm, mm, in, em, pt, px, pc, ex
procente relativ la printe
Proprietatea text-transform este folosit pentru transformarea unei

litere sau a unui text n majuscule. Valorile posibile sunt:
none
uppercase transform textul n majuscule
capitalize transform prima liter de la fiecare cuvnt n liter mare
lowercase transform textul n litere mici
Proprietatea letter-spacing permite adugarea unui spaiu suplimentar

ntre literele unui cuvnt sau literele unui text.
Proprietatea word-spacing permite adugarea unui spaiu liber ntre

cuvinte. Valorile posibile sunt:
normal
o lungime exprimat n: in, cm, mm, pt, px, pc, em
Proprietatea white-space permite introducerea spaiului alb n interiorul

unui bloc de text (P, DIV, CENTER). Valorile posibile sunt:
normal nlocuiete o secven de spaiu cu un spaiu
all sunt considerate toate spaiile
nowrap nu sunt considerate ntreruperile de rnd
177
OBSERVAIE!
Pentru redarea unui text aa cum este scris se poate folosi marcajul
<PRE>...</PRE>, dar, n acest caz, textul este monospaiat, aa cum s-a precizat n
capitolul 3 elemente de formatare.
Un exemplu de utilizare a acestor proprieti este dat n continuare.
<HTML> <HEAD>
<STYLE>
P {white-space:all; letter-spacing:1mm; word-spacing:2 mm; text-
transform:capitalize;}
DIV{text-indent:0.5 in; text-decoration:underline; white-space:nowrap;
color:blue}
SPAN {text-transform:uppercase;text-decoration:underline;color:red}
</STYLE> </HEAD>
<BODY>
<P>Agenda telefonica<br>
Ionescu Alin 0723553279<br>
Ionescu Dan 0742897618<br>
Diaconescu Ion 0745294738<br>
Popescu Ana 073431489 </P>
<DIV>Acesta este un text indentat la 0.5 in, subliniat i scris pe un rand. Dac
doriti s-l vizualizai folositi. <SPAN>Bara de scroll</SPAN></DIV>
</BODY> </HTML>
Figura 14. 3. Proprieti de spaiere text n CSS
Proprietatea line-height ne permite s modificm distana dintre

rndurile unui text.
Aceast proprietate poate fi utilizat pentru:
un element de nivel bloc pentru a stabili distana dintre fiecare element
inline (de exemplu pentru blocul OL, pentru fiecare element inline LI)
178
un element inline, pentru a stabili distana dintre rndurile elementului
(de exemplu, spaiul dintre liniile unui paragraf P)
o lungime exprimat in: in, cm, mm, pt, px, pc, em
un numr ce reprezint un multiplicator pentru determinarea distanei
reale (produsul dintre multiplicator i dimensiunea fontului)
un procent reprezint un multiplicator
Un exemplu este redat mai jos:
<HTML><HEAD>
<STYLE>
UL{line-height:20pt;}
P {line-height:2.25;}
</STYLE></HEAD>
<BODY>
<UL> Proprietatiile fontului:
<LI> font-size <LI>font-style <LI>font-weight <LI>font-family
</UL>
<P>Acest paragraf se scrie la un rand si jumtate. <BR>
CSS este un limbaj de realizare a stilurilor web.</P>
<DIV style="line-height:200%"> Acest bloc va fi scris cu 100%</DIV>
Un text fara stil
</BODY>
</HTML>
Figura 14. 4. Proprietatea line-height
179
14.4. Proprieti pentru padding
S-a artat n introducere c orice element HTML poate fi privit ca un box
cu prile: content, padding, border i margin.
n seciunea 2 i 3 s-a descris o parte din proprietile pentru partea de
coninut (font i text). n aceast seciune se vor descrie proprietile pentru
padding.
Paddingul (estura) este zona dintre coninut i bordur i are doar
caracteristica size. Exist cinci proprieti pentru a indica paddingul unui element,
i anume:
padding-top
padding-right
padding-bottom
padding-left
padding combinaie a celor de sus, valorile fiind date n ordinea (top,
right, bottom, left)
o lime exprim limea zonei de textur i este dat n: in, cm, mm,
px, pt, pc, em
procent exprim limea n procente relativ la printe
OBSERVAII:
1. Proprietile padding-top, padding-right, padding-left, padding-bottom
accept numai o valoare
2. Proprietatea padding, care este o combinaie a celor de mai sus, poate
accepta 1, 2, 3 sau 4 valori. n tabelul de mai jos se d lista de valori i
ordinea de atribuire a lor pentru cele patru proprieti de padding (top,
right, bottom i left).
Nr Valori Atribuiri
1 v1 Top=right=bottom=left=v1
2 v1 v2 Right=left=v1, top=bottom=v2
3 v1 v2 v3 Top=v1 left=right=v2 bottom=v3
4 v1 v2 v3 v4 Top=v1 right=v2 bottom=v3 left=v4
Figura 14. 5. Ordinea de atribuire a valorilor
Acest tabel va fi valabil i pentru proprietile definite n urmtoarele dou

seciuni (border i margin).
Un exemplu pentru aceast proprietate este redat mai jos.
<HTML>
<HEAD>
<STYLE>
OL{padding:5pt 20px 2ex 1cm; color:red;}
LI{color:Crimson ;}
DIV {padding:20px;color:DarkGoldenRod;}
180
</STYLE>
</HEAD>
<BODY>
<P>O caseta are o zona in jurul textului numita padding </P></STYLE>
</HEAD>
<BODY>
<P>o caset are o zona n jurul textului numita padding</P>
<OL>Proprietile padding-ului
<LI>padding-left
<LI>padding-right
<LI>padding-top
<LI>padding-bottom
</OL>
<DIV> <SPAN style="font-weight:bold; background:yellow">
Padding-ul </SPAN> unei casete asociate unui element HTML are numai o
caracteristic size </DIV>
</BODY>
</HTML>
Figura 14. 6. Proprietatea padding
181
14.5. Proprieti pentru bordur
Exist cinci proprieti pentru bordur:
border-top bordura de sus
border-right bordura dreapta
border-bottom bordura de jos
border-left bordura din stnga
border combinaie a celor de mai sus
Pentru fiecare proprietate BORDER se pot stabili trei caracteristici:
width grosimea bordurii
color culoarea bordurii
style modelul bordurii
De exemplu, pentru proprietatea border-top avem proprietile:
border-top-width
border-top-color
border-top-style
Valorile posibile pentru width sunt:
o lime ce reprezint limea fix a bordurii sau a unei pri din ea
thin (subire) /medium (mediu) / thick (gros)
Valorile posibile pentru color sunt:
un nume de culoare
un cod RGB
Valorile posibile pentru style sunt:
None / hidden / dotted / solid / double / groove / inset / outset / ridge /
dashed / inherit.
Exemplificm mai jos proprietatea border cu cele trei caracteristici: width,
color, style.
<HTML>
<HEAD>
<STYLE>
td {background:yellow; color:darkcyan;}
.bt {border-top-style:dashed; border-top-width:thick; border-top-color:blue;}
.br{border-right-style:groove;border-right-width:thin;border-right-
color:purple;}
.bb{border-bottom-style:ridge;border-bottom-width:medium; border-bottom-
color:lime;}
.bl{border-left-style:solid;border-left-width:10pt; border-left-color:magenta;}
.bord{border-style:outset; border-width:0.5 in; border-color:red;}
</STYLE>
</HEAD>
<BODY>
182
<PRE>
<PRE>
<BUTTON class="bt">Bordura superioara</BUTTON>
<BUTTON class="br">Bordura dreapta</BUTTON> <BR>
<BUTTON class="bb">Bordura inferioara</BUTTON>
<BUTTON class="bl">Bordura stanga </BUTTON>
</PRE>
<TABLE class="bord">
<TR><TD>a11<TD>a12
<TR><TD>a21<TD>a22
</TABLE>
</BODY>
</HTML>
Figura 14. 7. Proprieti pentru borduri

OBSERVAII!
Fiecare caracteristic a unei proprieti border accept o singur valoare
(de exemplu, border-top-color:red). Fiecare proprietate a bordurii poate accepta o
list de valori, separate prin spaiu i are ordinea: width style color, aa cum reiese
i din exemplul de mai jos.
183
<HTML>
<HEAD>
<STYLE>
H2 {border:5pt inset coral; margin:2mm;}
DIV{border:0.07in dotted green; color:magenta;}
</STYLE>
</HEAD>
<BODY>
<H2>Proprieti de <SPAN style="text-decoration:underline;font-weight:bold;">
Borduri </SPAN> </H2>
<DIV>Bordura are trei caracteristici: grosime, stil i culoare</DIV>
</BODY>
</HTML>
Figura 14. 8. Proprietatea border cu list de caracteristici
n cazul proprietii BORDER cu cele trei caracteristici (width, size i

color) valorile pot fi liste cu 1, 2, 3 sau 4 elemente.
C1 C2 C3 border-top are culoarea C1 border-left i border-right C2, iar
border-bottom C3.
n exemplul de mai jos se d o list de culori, de stiluri i grosimi pentru
proprietatea border. Ordinea n list amintim c este sus, dreapta, jos, stnga .
<HTML>
<HEAD>
<STYLE>
H3 {border-width:8pt 7pt 9pt 6pt;
184
border-color:red green blue;
border-style:solid inset outset;}
!*pentru grosimi avem 4 valori (sus, dreapta, jos, stnga)
pentru culori i stiluri avem 3 valori (sus stnga-dreapta jos)
</STYLE>
</HEAD>
<BODY>
<H3>List de valori pentru borduri</H3>
<UL>
<LI>grosime <LI>culoare <LI>stil
</UL>
</BODY </HTML>
Figura 14. 9. List de valori pentru border
14.6. Proprieti pentru partea margin

Exist cinci proprieti pentru partea margin a casetei unui element:
margin-left pentru marginea stng
margin-right pentru marginea dreapt
margin-top pentru marginea de sus
margin-bottom pentru marginea de jos
margin o combinaie a celor de mai sus
Proprietile margin - au o singur caracteristic, dimensiunea (size).
o lime reprezint limea fix a marginii ce poate fi o valoare
ntreag pozitiv sau negativ, exprimat n: cm, in, px, pt, pc, em.
un procent relativ de printe
185
n cazul n care folosim proprietatea margin, valoarea poate fi o list de
1,2,3,4 valori cu semnificaia din tabelul 14.5
Proprietatea margin este exemplificat mai jos:
<HTML>
<HEAD>
<STYLE>
blockquote {margin-top:0.01in;margin-right:20%;margin-
bottom:2ex;margin-left:10%;}
P{margin: -20pt 10ex 10px; color:SandyBrown ;}
DIV{margin:30 pt; color:red;}
SPAN{margin 100px 50px; background:cyan;}
</STYLE>
<BODY>
<BLOCKQUOTE>Acest bloc este un citat <SPAN>Omul care nu are
nimic de pierdut este cel mai greu de invins<BR>
(Goethe)</SPAN>BLOCKQUOTE>
<DIV>Acesta e un bloc de diviziune</DIV>
</BODY>
</HTML>
Figura 14. 10. Proprietatea margin
14.7 Proprieti de culoare pentru casete

n HTML culoarea pentru text era introdus ca valoare a atributului
COLOR a elementului FONT sau ca o valoare a atributului TEXT a elementului
BODY. Pentru culoarea de fundal se folosea atributul BGCOLOR al elementului
TABLE sau BODY, sau atributului BACKGROUND pentru o imagine de fundal.
186
n CSS exist mai multe proprieti pentru culoare, descrise mai jos.
Proprietatea color specific culoarea textului pentru un element.

Valorile posibile sunt valorile atributului color din HTML:
un nume de culoare de exemplu, blue
cod RGB n hexazecimal #0000FF
cod RGB n zecimal cte un numr pentru cele 3 culori rou, verde i
albastru, de exemplu, RGB(0,0,255) pentru blue
transparent este culoarea prestabilit
Proprietatea background-color permite s stabilim o culoare pentru

fundalul casetei unui element.
Valori posibile sunt aceleai ca la proprietatea color.
Proprietatea background-image permite s stabilim o imagine de

fundal unei casete. Dac imaginea este mai mic dect suprafaa care trebuie
afiat, atunci ea este multiplicat astfel nct s cuprind ntreaga suprafa a
casetei elementului.
Valori posible sunt adrese URL a unor fiiere .gif, .jpg, .png, scrise n
paranteze rotunde i prefixate de cuvntul cheie URL, astfel:
background-image:URL(poza.jpg).
Este indicat s se foloseasc proprietatea background-color cu
background-image pentru cazul n care imaginea nu se poate ncrca (atunci va fi
afiat culoarea de fundal).
Un exemplu ilustrativ este redat mai jos.
<HTML>
<HEAD>
<STYLE>
P{font-style:italic; text-transform:uppercase; color:yellow;}
BODY {background-color:red; background-image: URL(bliss.bmp);}
</STYLE>
<BODY>
<P>Acesta este un exemplu de utilizare a proprietilor de culoare</P>
</BODY>
</HTML>
187
Figura 14. 11. Proprieti de culoare
Proprietatea background-attachment permite ca imaginea s se

deruleze sau nu, odat cu pagina.
Valorile posibile ale acestei proprieti sunt:
fixed imaginea de pe fundal rmne fix. Atunci cnd pagina se
deruleaz cu ajutorul barelor de defilare numai obiectele ferestrei
defileaz (text, alte imagini etc.)
scroll imaginea se deruleaz odat cu pagina. Aceasta este valoarea
implicat.
<HTML>
<HEAD>
<STYLE>
body{background-color:yellow;background-image: URL(ush.jpg);}
div {background-attachment:fixed; width:300px; height:200px;}
</STYLE>
<BODY>
<DIV>Acesta este un text despre Universitatea Spiru Haret.</DIV>
</BODY>
</HTML>
188
Figura 14. 12. Proprietatea attachment
Proprietatea backgroundrepeat se folosete pentru a indica modul de

repetare a unei imagini pe orizontal i vertical. n cazul n care imaginea de
fundal este mai mic dect spaiul necesar unui element, atunci imaginea se repet
att pe orizontal, ct i pe vertical pn acoper aceast suprafa. Se poate
controla aceast repetare dnd urmtoarele valori acestei proprieti:
repeat (valoare implicit) repetarea se face att pe orizontal ct i
pe vertical
no-repeat imaginea nu se repet, apare o singur dat n mijlocul
casetei
repeat-x repetarea se face numai pe orizontal
repear-y - repetarea se face numai pe vertical
189
Exemplificarea acestei proprieti se face prin codul de mai jos.
<HTML>
<HEAD>
<STYLE>
BODY * {background-image:url(im4.gif);}
</STYLE>
</HEAD>
<BODY >
<H2 style="color:darkblue;"> Proprietatea background-repeat </H2>
<UL style="line-height:20pt; background-image:url(peace.jpg); background-
repeat: no-repeat;color:darkblue"> Proprietati de culoare
<LI style="background-image:url(im5.gif); background-repeat : repeat-
x;"> color
<LI style="background-image:url(im2.gif); background-repeat : repeat">
background-color
<LI style="background-image:url(bullet.gif); background-repeat : repeat-
y;color:"> background-image
</UL>
</BODY>
</HTML>
Figura 14. 13. Proprietatea backgroundrepeat

Proprietatea background-position precizeaz poziia din stnga sus a
unei imagini, n raport cu partea de sus-stnga a casetei elementului. Dac pentru
aceasta proprietate se d:
190
o valoare aceasta reprezint poziionarea pe orizontal
dou valori se refer la poziionarea pe orizontal, respectiv pe
vertical
absolute exprimate n: in, cm, mm, pt, px, em (de exemplu:1in 3cm
nseamn 1inch de partea stnga i 3cm d3 partea de sus)
procentual relativ la colul stnga sus (de exemplu: 50% 50%
nseamn c imaginea este poziionat n centru)
mixte absolut i procentual (de exemplu: 20% 3cm)
prin cuvinte cheie: left, center, right, top, bottom
<HTML>
<HEAD>
<STYLE>
BODY{ background-image:url(plaja.jpg);
background-attachment:fixed;background-position:50% 50%;
background-repeat:no-repeat;
background-color:pink;}
DIV{margin:20pt;border-color:red;border-width:5pt;border-style:inset;
color:darkblue;} </STYLE>
</HEAD>
<BODY>
<H1 style="color:yellow"> Proprietatea background-position </H1>
<DIV >Exemplu de imagine de fond care nu defileaz si este poziionata la
mijlocul ferestrei </DIV>
</DIV> </BODY></HTML>
Figura 14. 14. Proprietatea background-position
191
Proprietatea background este o combinaie a proprietilor de culoare
i imagine de fundal. Valoarea acestei proprieti este o list de valori a
proprietilor de mai sus, separate prin spaiu i avnd urmtoarea ordine.
Background-attachments, background-color, background-image,
background- position i background-repeat.
Exemplificarea acestei proprieti se face prin codul de mai jos.
<H2 style="background:fixed yellow url(im2.gif) 300px 2cm repeat-y;">
Proprietatea background</H2>
<UL style="background:scroll cyan url(im7.bmp) no-repeat; line-
height:20pt;font-size:large;font-weight:900">
Ordinea proprietatilor lui background
<LI style= "background:scroll beige url(bullet.gif) 30% repeat-x; ">
background-attachment
<Li style= "background:scroll bisque url(im5.gif) 30% repeat;">
background-color
<LI style= "background:scroll coral url(tips.gif) 100% repeat-y; ">
background-image
<LI style= "background:scroll beige url(im4.gif) 30% repeat-x;">
background-position
<LI style= "background:scroll url(im6.gif) 100% repeat-y;">
background-repeat
</UL> </BODY> </HTML>
Figura 14. 15. Proprietatea background
192
15. Poziionarea elementelor n pagin n CSS
Deseori programatorul unei pagini dorete ca elementele HTML folosite s

aib o anumit aranjare n pagin. O ntrebare fireasc pe care ne-o punem este:
Cum aranjeaz browser-ul n pagin diverse elemente HTML (imagini, text, tabele,
liste etc.)? Rspunsul la aceast ntrebare este subiectul acestui capitol.
Aa cum s-a menionat i n capitolele precedente, elementele HTML pot fi:
elemente de nivel de bloc sunt elementele care sunt afiate la rnd nou
(de exemplu: P, DIV, TABLE, TR, OL, LI, UL, DL, DT, H1...H6)
Elemente de nivel de text (in-line) - sunt elemente care sunt afiate pe
linia curent (de exemplu: B, I, IMG, BIG, SMALL, S, U, SPAN etc.).
Browser-ul, cnd primete macheta unei pagini, identific:
arborele documentului, care arat aranjarea elementelor ntr-un fiier
HTML
tipul elementelor (de nivel de bloc sau inline)
obiecte flotante
obiecte poziionate
n seciunile urmtoare se vor prezenta aceste elemente.
n anexa B este dat tabelul cu codul unor caractere speciale.
Pentru a introduce caractere speciale n HTML se utilizeaz marcaje
speciale, numite entiti sau referine de entiti. Entitile (marcajele pentru
caracterele speciale) nu sunt incluse ntre paranteze unghiulare (<>). Acestea se
introduc, ncepnd cu caracterul ampersand (&) i terminnd punct i virgul
(;). Pentru unele caractere exist dou posibiliti de scriere a unui caracter
special i anume:
prin secvena
ampersand (&)
diez (#)
un numr (160)
punct i virgul (;)
de exemplu, pentru caracterul special dolar ($) se folosete scrierea &#036
prin secvena
ampersand (&)
un text
punct i virgul (;)
193
De exemplu, pentru caracterul copyright se poate folosi © dar i
&#169.
Orice caracter se poate scrie cu prima form menionat mai sus, dar unele
caractere speciale admit ambele forme. De exemplu, literele cu diacritice romneti
nu au forma a doua de reprezentare.
Exemple de texte cu caractere speciale:
ara mea este frumoas i bogat i se numete Romnia:
Ţara mea este frumoasă şI
bogat&#259 şi se numesşte Romnia
La muli ani! La mulţ ani &#033
Aria cercului este R2 :
Aria cercului este πR<sup>2</sup>
sau Aria cercului este πR&sup2
sau Aria cercului este πR&#178
15.1. Arborele unei pagini

Aezarea implicit a elementelor n pagin se mai numete i aezare n
flux normal. n capitolul precedent s-a artat c orice element HTML poate fi privit
ca o caset (box) i cu ajutorul stilurilor se poate vizualiza caseta (culori de font,
bordur, textur) i dimensiunea (height i width).
Un element poate deine alte elemente, de exemplu DIV poate conine
SPAN, un element TD poate conine un element OL sau IMG. n acest caz, spunem
c elementele sunt imbricate i de asemenea casetele corespunztoare lor sunt
imbricate. Casetele imbricate vor fi aezate de ctre browser n caseta printe, la
nivel de bloc sau linie.
Aceast aezare n flux normal se mai numete i model caset i
genereaz grafic un arbore de elemente. O pagin are doi copii: HEAD i BODY.
Se consider frunze ale arborelui orice secven de text care nu are copii.
Codul de mai jos va avea arborele din figura 15.1
<HTML> <HEAD>
<STYLE>
* {border-style:solid; border-color:blue;border-width:thin; margin:5pt}
/*bordura solid, de culoare blue, pentru toate elementele HTML,
cu exceptia frunzelor(text normal),
bordura exterioara este pentru elementul radacina a documentului HTML*/
body *{background:LightGreen;}
/*Casetele de la primul nivel a lui body )de exemplu DIV,
sunt pe fundal verde deschis*/
body ** {background:yellow;}
/*Caseta la nivel 2 a lui body (de exemplu OL pe fundal galben)*/
body ** *{background:cyan;line-height:70%}
/*Casetele de nivel 3 a lui body (de exemplu LI pe fundal cyan*/
body {border-color:red;border-style:dotted;}
/*Bordura rosie pentru body */
</STYLE> </HEAD>
<BODY>
194
Pozitionarea casetelor in<B>flux normal</B>
si descoperirea <I>Arborelui paginii</I>
<P> Prietenul meu<IMG src ="friend.jpg" width="50" height="50"> Boby
<TABLE cellspacing=5 height=20>
<TR ><TD>a11<TD>a12
<TR><TD>a21<TD>a22
</TABLE>
</P>
<DIV style="padding:10pt 5pt ;">
<SPAN>
<B> Bloc de diviziune </SPAN> </B>
<OL style="padding:5pt 20pt 2pt;">Lista casetelor
<LI>Arbore - flux normal
<LI>Flotante
<LI>Pozitionate
</OL>
<TABLE cellspacing=5 height=20>
<TR><TD>b11<TD>b12
<TR><TD>b21<TD>b22
</TABLE>
</DIV></BODY> </HTML>
195
196
HTML
HEAD BODY
FRUNZ B I P DIV
FRUNZ IMG TABEL SPAN OL TABEL
TR TR B LI LI LI TR TR
TD TD TD TD TD TD TD TD
Figura 15. 1. Arborele unui document

OBSERVAIE!
Arborele este format din:
elementul BODY cu 4 elemente (copii): B, I, P, DIV, care au culoarea
de fundal LightGreen. Spaiul ocupat de cele 4 elemente este format din
4 dreptunghiuri
la nivelul 2 fa de elementul BODY sunt:
IMG, TABEL,SPAN, OL i TABEL, care au culoarea de fundal yellow
la nivelul 3 fa de elementul BODY sunt: TR, B, LI care au culoarea de
fundal cyan;
la nivelul 4 fa de elementul BODY se afl elementul TD, pentru care
nu s-a mai specificat stil; acesta va adopta stilul printelui (a lui TR).
197
15.2. Proprietatea Display
Css ofer posibilitatea de a schimba modul de afiare a tipului elementelor
(bloc i inline), prin utilizarea proprietii display.
Valorile posibile ale proprietii display sunt:
inline elementele se afieaz n continuarea rndului curent
block elementele se afieaz la nceput de rnd
none elementul nu se va afia
Proprietatea Display poate fi aplicat la majoritatea elementelor HTML.

Dac n exemplul de mai sus se adaug n cod foaia de stil:
*{display:block}
elementele vor fi afiate de la rnd nou, aa cum se observ n figura 15.2.
Figura 15. 2. Proprietatea Display: block
Dac se dorete ca toate elementele din exemplul 15.1 s fie afiate inline,
se va scrie urmtoarea foaia de stil:
*{display:inline}
iar browser-ul le va afia aa cum se observ n figura 15.3.
198
Figura 15. 3. Proprietatea Display:inline
Se poate ca numai anumitor elemente s li se schimbe modul de afiare,de
exemplu, elementul de bloc TABEL dorim s fie afiat inline i elementul de text B s fie
afiat la nivel de bloc. n acest caz, adugm n exemplul 15.1, urmtoarele linii de cod :
Table {display:inline}
B {display:block}
Figura 15. 4. Proprietatea Display:inline i block
199
15.3. Elemente flotante
Modul normal de aezare a elementelor n pagin poate fi modificat cu
ajutorul obiectelor flotante i poziionate.
Obiectele flotante se definesc cu ajutorul proprietii float care se poate
ataa la orice element. Valorile posibile sunt:
none caseta nu e flotant
right caset flotant spre dreapta
left caset flotant spre stnga
OBSERVAIE!
Obiectele flotante se pot defini:
cu atributul align, pentru elementele HTML care-l accept (de exemplu
<img align=left>)
cu CSS pentru elementele care nu accept atributul align (de exemplu,
OL, UL etc.)
Dac n exemplul din figura 15.1 adugm liniile de mai jos la foaia de stil
OL{float:left}
i n corpul programului nlocuim elementul TABLE care definete primul tabel, cu
<TABEL style=float:right>, iar elementul IMG, cu <IMG align=left>, atunci
va aprea imaginea i primul tabel aliniat la dreapta i lista aliniat la stnga, ca n
figura de mai jos:
Figura 15. 5. Proprietatea float
200
Browser-ul execut urmtorii pai la ntlnirea unui element flotant:
fluxul normal de aezare n pagin este ntrerupt
elementul flotant este afiat n poziia indicat (stnga, dreapta),
ncepnd din rndul urmtor
se afieaz elementele din flux de la punctul n care a fost ntrerupt,
ncepnd cu spaiul rmas liber de deplasarea obiectului flotant
casetele elementelor flotante se pot suprapune peste casetele din fluxul
normal, dar nu i coninutul lor
Proprietatea CLEAR
Dup cum se observ n exemplul din figura 15.5, al doilea tablou apare n
spaiul rmas liber. Dac se dorete ca un element de bloc s apar afiat pe rnd
nou, dup aplicarea proprietii float, se folosete proprietatea clear.
none nu se deplaseaz elementul
left partea din stnga elementului este liber
right partea din dreapta elementului este liber
both ambele pari (stnga i dreapta) vor fi libere
Dac n figura 15.5, n al doilea tabel adugm atributul style=clear:left
atunci tabelul va fi afiat pe rnd nou, cum reiese din figura:
Figura 15. 6. Proprietatea clear
201
15.4. Elemente poziionate
CSS ofer posibilitatea de a schimba fluxul normal de aezare a
elementelor n pagin i cu ajutorul proprietii POSITION, care poate fi ataat
oricrui element n foaia de stil sau ca valoare a atributului STYLE.
static aezarea se face n flux normal (valoare implicit)
absolute elementul iese din fluxul normal i este afiat la o distan
relativ fa de primul printe poziionat
relative elementul rmne, n fluxul normal, dar este poziionat la o
distan relativ cu poziia sa normal (elementul se poate suprapune
peste altele)
fixed elementul iese din fluxul normal i e afiat ntr-o zon vizibil. El
rmne fix cnd se deruleaz pagina cu barele de defilare
Marginile casetei corespunztoare elementului poziionat sunt definite de
proprietiile:
top
right
bottom
left
o lungime dat n: cm, mm , px, pt, em
un procent relativ la printe
Poziionarea absolut
Poziionarea absolut a unui element este relativ la primul printe poziionat.
Dac elementul, care se dorete a fi poziionat absolut, nu are un printe sau stramo
poziionat, atunci el va fi poziionat relativ la colul stnga sus al ferestrei.
Pentru a poziiona absolut un element se folosete proprietatea
position:absolute i se atribuie valori proprietilor top, bottom, left i right.
n continuare vor fi date trei exemple:
primul, pentru poziionarea absolut a unui element TD, care nu are un
printe poziionat
al doilea, pentru poziionarea absolut a unui element TD care are un
printe poziionat
al treilea, pentru poziionarea absolut i a printelui
<HTML> <HEAD>
<STYLE>
IMG { position:absolute; left : 80px; top : 100px;}
</STYLE></HEAD>
<BODY>
<P>Pozitionarea absoluta a elementului IMG fata de coltul stanga sus</P>
<TABLE border=2 style=cellspacing=5 height=50 >
<TR ><TD>a11<TD> <IMG src="imag1.gif"> a12
202
<TR><TD>a21<TD>a22
Figura 15. 7. Poziionare absolut fa de colul stnga sus
<HTML><HEAD><STYLE>
IMG{position:absolute; left:30pt; top:20pt}
.parinte{position:absolute; left:50pt; top:80pt}
</STYLE></HEAD>
<BODY>
<P>Pozitionarea absoluta a unui element IMG fata de parintele
TD, pozitionat absolut</P>
<TABLE borde=2 style=cellspacing=5 height=50 >
<TR><TD>a11
<TD class="parinte"> <IMG src="imag1.gif"> a12
<TR><TD>a21<TD>a22
Figura 15. 8. Poziionare absolut fa de printele poziionat absolut
203
<HTML><HEAD><STYLE>
IMG{position:absolute; left:50pt; top:30pt}
.parinte{position:absolute; left:50pt; top:50pt}
</STYLE></HEAD>
<BODY>
<P>Pozitionarea absoluta a unui tabel si a unei imagini </P>
<TABLE class="parinte" borde=2 style=cellspacing=5 height=50 >
<TR><TD>a11<TD> a12
<TR><TD>a21<TD>a22 <IMG src="imag1.gif">
</TABLE>
</BODY> </HTML>
Figura 15. 9. poziionarea absolut a primului printe
n ultimul exemplu se observ c tabelul este poziionat absolut fa de

colul de sus stnga. IMG are printe pe TD care nu e poziionat, dar este poziionat
bunicul, printele printelui (tabel-td), deci va fi poziionat relativ la TABEL
(primul printe poziionat).
Poziionarea relativ
Spre deosebire de poziionarea absolut, n cazul poziionrii relative, un
element este poziionat n raport cu fluxul normal, relativ la poziia sa normal.
Poziionarea relativ se face cu ajutorul proprietii position:relative i
atribuind valori marginilor casetei: top, right, bottom, left
Un exemplu este redat mai jos
<HTML> <HEAD>
<STYLE>
IMG{position:relative; left:20px; top:20px}
204
</STYLE></HEAD>
<BODY>
<P>Pozitionarea relativa</P>
<TABLE border=2 style=cellspacing=5 height=50 >
<TR><TD>a11<TD> a12
<TR><TD>a21<TD> <IMG src="imag1.gif">
</TABLE>
</BODY> </HTML>
Figura 15. 10. Poziionarea relativ

Poziionarea fix
Pentru a poziiona fix un element se folosete proprietatea position:fixed i
se atribuie valori marginilor: top, right, bottom, left
<HTML>
<HEAD>
<STYLE></STYLE></HEAD>
<BODY>
<P>Pozitionarea fixa a unei imagini </P>
<OL>Tipuri de pozitionari
<LI>pozitionarea static
<LI>pozitionarea absoluta
<LI>pozitionarea relativa
<LI>pozitionarea fixa
</OL>
<IMG src="im1.gif" style="position : fixed; top:150px; left : 150px;">
<OL>Proprietatile marginilor
<LI>left
<LI>right
<LI>top
<LI>bottom
</OL>
205
<Ul>valori posibile
<LI> o lungime
<LI>un procent
</BODY> </HTML>
Figura 15. 11. Poziionarea fix

Se observ, dup poziia barei de scroll, c imaginea nu se deplaseaz
odat cu pagina.
15.5. Proprietatea z-index

Dac se modific fluxul normal cu ajutorul elementelor flotante sau
elemente poziionate (absolute, relative, fixe) exist posibilitatea ca anumite
elemente s se suprapun, aprnd ca o stiv de casete, care sunt afiate n ordinea
n care au fost introduse. Dac dorim s nu se suprapun casetele trebuie s fim
foarte ateni la scrierea coordonatelor marginilor (ceea ce este foarte greu.)
Proprietatea z-index ne ajut s stabilim ordinea de afiare a casetelor
suprapuse. Valorile posibile sunt:
auto - valoarea implicit
numr - numr ntreg pozitiv care determin nivelul n stiv relativ la
printe
n interiorul aceluiai printe sunt afiate casetele n ordinea
descresctoare a numrului de nivel (valoarea lui z-index)
Un exemplu semnificativ este dat n continuare:
206
Figura 15. 12. Proprietatea z-index
207
PARTEA A III-A
JAVASCRIPT
207
208
16. JavaScript Elemente de baz
16.1. Introducere n JavaScript

n acest capitol se vor introduce noiunile de baz ale limbajului
JavaScript.
JavaScript a fost realizat de firmele SUN i NETSCAPE ca o posibilitate
de extindere a lucrului cu HTML i este compatibil att pe Netscape Navigator, ct
i pe Internet Explorer.
n replic la acest limbaj, Microsoft a realizat Visual Basic Script (VBS),
bazat pe cunoscutul limbaj Visual Basic. Este mai uor de utilizat dect JavaScript,
dar are limitarea de a fi compatibil doar pe Internet Explorer. Dup anii 2000, tot
Microsoft a lansat limbajul de scriptare JScript, mult mai apropiat de JavaScript,
dar tot compatibil pe Internet Explorer. n urmtoarele cinci capitole va fi descris
limbajul JavaScript.
n capitolele precedente s-a prezentat limbajul HTML i CSS, cu ajutorul
crora putem realiza pagini WEB. Totui, limbajul HTML este limitat, n sensul c,
utiliznd numai HTML, nu putem realiza pagini WEB complexe, dinamice. Cu
ajutorul limbajului de scriptare JavaScript se pot realiza pagini WEB interactive.
Limbajele JavaScript, VBScript, JScript sunt limbaje de scriptare, de
interpretare i orientate pe obiect, caracteristici ce vor fi introduse n continuare.
JavaScript Limbaj de scriptare

Programele enumerate mai sus sunt i limbajele de programare, ct i de
scriptare, n sensul c ambele tipuri de limbaje au ca scop s faciliteze
programatorilor posibilitatea de a determina browser-ul s execute anumite aciuni,
ca de exemplu tergerea unui cmp dintr-un formular, validarea datelor introduse
ntr-un formular, rspunsul la evenimente, precum schimbarea unui obiect la
trecerea peste acesta cu mouse-ul etc.
Diferena important dintre cele dou tipuri const n faptul c un limbaj de
programare pune accent pe tipurile de date, n timp ce un limbaj de scriptare nu
este interesat de tipurile de date.
Un tip de dat definete tipul de valori de date folosite ntr-un program, a
tipului de operaii care se pot efectua cu valorile de date i specific dimensiunea i
tipul de informaie care poate fi plasat la o anumit locaie a memoriei.
209
NOT!
JavaScript nu este acelai lucru cu Java. Java este limbaj de programare
complex (ca i C++), realizat de firma Sun, creat cu scopul de a realiza att
aplicaii client, ct i aplicaii server.
O aplicaie client este un program cu ajutorul cruia se poate interaciona
cu calculatorul, de exemplu un browser.
O aplicaie server este un program cu care interacioneaz o aplicaie
client, de exemplu un calculator la distan sau un server WEB. De exemplu, cu
ajutorul browser-ului (aplicaie client) se pot cere pagini WEB de la un server
WEB (aplicaie server), care dialogheaz cu browser-ul utilizat.
Se pot ntlni miniaplicaii Java (program Java) aflate pe un server WEB
i care se execut prin utilizarea unor tag-uri n paginile HTML, ca de exemplu,
<applet> sau <object>. La ntlnirea acestor etichete, browser-ul deschide
programul Java de pe serverul WEB i l execut n fereastra sa.
Programele JavaScript, numite i scripturi, sunt secvene de program ce se
scriu n blocul <SCRIPT> i </SCRIPT> din antetul unei pagini sau din corpul
programului.
JavaScript Interpretor
Prin limbaj interpretor se nelege faptul c browser-ul preia cte o
instruciune, o execut i trece la urmtoarea, o preia i o execut s.a.m.d. Din acest
motiv, erorile la limbajele interpretate sunt mai greu de depistat, deoarece nu exist
compilatoare ca la limbajele de programare complexe (Java, C, C++ etc.) Totui,
putem s sesizm o eroare din faptul c dup ea instruciunile nu mai pot fi
executate.
JavaScript Limbaj orientat pe obiect

Se tie de la cursul Programare orientat pe obiecte ce nseamn un limbaj
orientat pe obiect.
Amintim c un limbaj de programare orientat pe obiect este un limbaj cu
ajutorul cruia se realizeaz programul utiliznd obiecte. Un obiect este o instan
a unei clase. De exemplu, dac considerm clasa VEHICUL, trenul, avionul,
maina etc. sunt instane ale acestei clase. Nu ne propunem n aceast carte s
dezvoltm paradigma orientrii pe obiect. Programele de scriptare sunt programe
orientate obiect, care folosesc obiecte precum: formulare, cmpuri, butoane,
fereastr, etc.
Un obiect este o reprezentare a unei entiti din lumea real sau
conceptual. Tot ce putem vedea, atinge, clasifica reprezint obiecte ale lumii reale
i tot ce putem gndi reprezint obiecte ale lumii imaginare. Un obiect are 3
caracteristice: stare, comportament i identitate.
Starea unui obiect reprezint totalitatea datelor care conin informaii
referitoare la acesta, una din condiiile posibile n care poate exista un obiect.
Fiecare obiect are un numr de proprieti, numite i atribute, care au o valoare.
Valorile unei proprieti (atribut) pot face parte dintr-un tip de baz (ntreg, real
210
etc.) sau pot fi alte obiecte. Cu alte cuvinte, starea unui obiect conine structura
esenial a obiectului: atributele i valorile sale. Starea unui obiect se modific n
timp, de exemplu, obiectul curs opional se poate afla n strile Predat sau Anulat
(n funcie de numrul de studeni care a optat pentru acel curs ).
Obiectele nu sunt izolate, ele comunic ntre ele, trimit mesaje.
Comportamentul unui obiect se refer la modul n care un obiect
reacioneaz (schimb starea) la mesajele primite, precum i la modul cum
acioneaz (trimite mesaje altor obiecte). n exemplul anterior, obiectul curs
Optional poate avea comportamentul: nscriere student, reorientare student la alt
curs optional.
Identitatea unui obiect este proprietatea prin care obiectul se distinge de
oricare alt obiect din sistem. Schimbarea strii unui obiect nu influeneaz
identitatea sa. Identitatea face un obiect s fie unic.
O pagin WEB poate conine mai multe obiecte, de exemplu pot exista 2
formulare, form1 i form2, care aparin clasei FORMULARE. Ele difer prin
cmpurile lor. JavaScript le poate identifica astfel pe fiecare.
Uneori JavaScript trebuie s aib acces rapid la mai multe obiecte. n acest
caz, pentru a identifica fiecare obiect se poate folosi un tablou. La un obiect ne
putem gndi ca la un substantiv.
Metode
Relaiile dintre obiecte se numesc legturi. Un mesaj este o comunicare
ntre obiecte via legturi. La primirea unui mesaj, un obiect sau o clas execut o
operaie.
O metod reprezint implementarea unei operaii. Aadar, o metod este o
unitate de cod scris ntr-un limbaj orientat pe obiect. La o metod ne putem gndi
ca la un verb, pentru c are la baz o aciune, o operaie. Dac ntr-un limbaj
orientat pe obiect se definete o funcie i se scrie codul care determin ce trebuie
s execute funcia, atunci declaraia funciei este o operaie, iar corpul funciei este
o metod.
Dac considerm obiectul Submit al unui formular, atributurile nume i
dimensiune sunt proprieti (atribute ale obiectului). Dac se execut clic pe buton,
formularul este trimis ctre server, deci se execut o operaie a crei implementare
se numete metod. Proprietile i legturile alctuiesc caracteristicile structurale,
deoarece ele indic structura obiectelor, iar operaiile i metodele sunt caracteristici
dinamice, deoarece ele comunic comportamentul obiectelor. n JavaScript se
folosete pentru definirea proprietilor i metodelor unui obiect urmtoarea
sintax: nume_obiect.proprietate ; nume_obiect.metod.
Un eveniment este o aciune ce se produce asupra unui element. Cele mai
frecvente evenimente sunt mesajele recepionate de un obiect. Aciunile sunt
intreprinse de obicei de persoanele care folosesc aplicaia, de exemplu dac se
execut clic pe un buton al unui formular (Submit, Cancel), se trece n starea de
execuie.
211
Unele evenimente sunt importante pentru JavaScript, cum ar fi atunci cnd
se executa clic pe butonul Submit, Reset all, Cancel etc., iar alte evenimente sunt
mai puin importante, cum ar fi deplasarea mouse-ului ntr-o zon fr informaii a
unui formular. Modul de gestionare a evenimentelor este un concept fundamental
al limbajului JavaScript. Pentru a reaciona la evenimentele importante, trebuie
definite rutine n JavaScript de tratare a evenimentelor.
Dac se ncorporeaz scripturi n paginile WEB, avem multe faciliti, ca
de exemplu:
Realizarea paginilor dinamice
Scrierea mesajelor n bara de stare a browser-ului
Afiarea csuelor de avertizare
Deschiderea de noi ferestre ale browser-ului
Validarea datelor din formulare
Crearea de formulare interactive
Efectuarea calculelor
Actualizarea datei i a timpului
Identificarea programelor de completare pentru browser (plug-in), cum
ar fi Flash
Programul JavaScript este totui limitat, n sensul c nu poate executa orice
operaie ca de exemplu:
citirea i scrierea fiierelor de pe, respectiv pe hard-ul propriu
scrierea aplicaiilor pe parte de server care au fost numite n capitolul 12,
aplicaii Common Gateway Interface (CGI), care se pot scrie cu
limbaje ca: Java, Perl, PHP.
JavaScript este o component a limbajului DHTML (Dynamic HTML),
care, mpreun cu HTML i CSS, este folosit de profesioniti pentru realizarea
paginilor cu efecte speciale de tipul celor realizate cu limbajul Flash, fr a apela la
aplicaiile de completare (plug-in).
16.2. Primul script n JavaScript

Din seciunea precedent, rezult c JavaScript este un limbaj de
programare limitat, folosind scripturi introduse n programele HTML, cu scopul de
a transforma o pagin WEB static n una dinamic. De asemenea JavaScript este
un program orientat pe obiect, care permite construirea aplicaiilor prin utilizarea
obiectelor (documente, butoane, un cmp al unui formule etc). Fiecare obiect are
anumite atribute (proprieti) i execut anumite operaii, metode, la primirea unor
mesaje (tergerea informaiilor din cmpurile unui formular, n urma evenimentului
clic pe butonul Reset All). Accesul la proprietile i metodele obiectului se face
folosind sintaxa:
numele obiectului urmat de punct i de numele proprietii sau metodei
De asemenea o aplicaie JavaScript reacioneaz la acele evenimente care
sunt de obicei aciuni ntreprinse de persoanele care folosesc aplicaia. n
continuare ne vom opri la sintaxa unui script.
212
Un program JavaScript este scris ntre tag-urile <SCRIPT> </SCRIPT> ale
unei pagini WEB. Blocul SCRIPT poate fi plasat n blocul de antet HEAD sau n
blocul de corp BODY al unei pagini de WEB. n funcie de locul de plasare a
scriptului avem scripturi de antet sau scripturi de coninut.
JavaScript, ca majoritatea limbajelor de programare, este scris n format
text i organizat n declaraii, blocuri formatate din seturi de declaraii i din
comentarii.
O declaraie este o propoziie format din unul sau mai multe elemente,
cuprinse ntr-o linie, de exemplu alert (hello). Un bloc este format dintr-un set
de declaraii cuprinse ntre acolade({}). Un bloc de declaraii este folosit, de
exemplu, n funcii sau n instruciuni condiionale. ntr-o declaraie se pot folosi
variabile, date ca iruri i numere, operatori i expresii. O declaraie comunic
browser-ului s ntreprind o aciune. Acesta, dup execuia ei, preia alt
declaraie, o interpreteaz s.a.m.d.
Comentarii
n JavaScript o linie de comentarii ncepe cu o pereche de slashes (//). Mai
multe linii de comentariu ncep cu perechea slash i asterisc (/*) i se termin cu
perechea invers (*/).
De exemplu:
//Acesta este un script scris n limbajul JavaScript
/* JavaScript este un limbaj de scriptare, de interpretare i orientat pe
obiect. El a fost realizat de firmele Sun i Netscape Navigator */
OBSERVAIE!
Se poate ntmpla ca mai multe browser-e s nu poat interpreta scripturile
(cum ar fi versiunile anterioare Microsoft Internet Explorer 3, Netscape 1.X i
America Online 3) i n loc s execute aceste scripturi le afieaz. Pentru a ascunde
un cod JavaScript de browser-ele mai vechi, acesta se poate plasa ntr-un
comentariu HTML din paginile WEB care este scris ntre < !-- i -- >.
Browser-ele compatibile cu JavaScript recunosc i ruleaz un script
coninut ntr-un comentariu HTML. Browser-ele incompatibile cu JavaScript sau
pentru acelea pentru care JavaScript nu este activ (n mod prestabilit JavaScript
este activ pe majoritatea browser-elor) vor ignora scripturile, creznd c scriptul
este un comentariu. Atenie ns, blocul de comentarii HTML se va plasa n
interiorul blocului SCRIPT (pentru ca scriptul s fie considerat comentariu i s nu
fie afiat de browser-ele incompatibile JavaScript), nu n afara blocului SCRIPT,
caz n care i browser-ele compatibile JavaScript l vor considera ca pe un
comentariu HTML.
S considerm urmtorul exemplu:
<HTML> <HEAD>
<TITLE> primul script </TITLE>
<HEAD>
<BODY>
<SCRIPT language="JavaScript" type="text/javascript">
213
document.write('Bine ai venit n lumea scriptului')
</SCRIPT>
</BODY> </HTML>
Figura 16.1 Un script
Din analiza acestui exemplu simplu rezult:

primele 2 linii sunt linii standard pentru o pagin WEB.
blocul de antet conine blocul de titlu al paginii WEB
blocul de corp BODY conine scriptul format dintr-o singur declaraie,
cuprins n blocul SCRIPT. Tag-ul SCRIPT conine dou atribute cu
valori obligatorii:
language =JavaScript comunic browser-ului c limbajul de script
este JavaScript
type=text/JavaScript, atribut care comunic browser-ului c
scriptul este scris n format text, care este organizat n format
JavaScript
scriptul are o singur linie (declaraie), aceasta conine un obiect
document, care are o metod scrierea unui text n document. Textele n
JavaScript pot aprea ntre ghilimele simple (apostrof) sau duble ( ).
Dup salvarea acestui program i execuia lui apare rezultatul din figura
16.1. Dac n codul de mai sus linia de declaraie din interiorul blocului SCRIPT se
include ntr-un comentariu HTML astfel

aceasta nu va fi afiat de browser-ele incompatibile cu JavaScript care o
vor considera ca un comentariu, dar browser-ele compatibile cu JavaScript vor
afia rezultatul din figura 16.1.
214
Putem s mbuntim un pic aspectul programului de mai sus, prin
afiarea casetei de avertizare, care va conine textul i va rmne pe ecran pn se
execut evenimentul: clic pe butonul OK aflat n csu.
Pentru a afia caseta de dialog de avertizare se schimb linia de declaraie
din blocul SCRIPT, cu declaraia care conine funcia de avertizare alert, astfel:
<HTML>
<HEAD>
<SCRIPT language="JavaScript" >

</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Figura 16. 2. Script cu caseta de avertizare alert()
OBSERVAII!
n programul din figura 16.1, scriptul este unul de coninut (apare n
corpul programului)
n programul din figura 16.2, scriptul este unul de antet (apare n blocul
de antet al paginii)
caseta de dialog de avertizare rmne pe ecran pn se acioneaz
butonul OK, caz n care browser-ul va afia textul n fereastra sa (ca n
figura 16.1)
spunem c funcia alert comand afiarea modal a cutiei de dialog de
avertizare, adic scriptul nu execut alt instruciune pn la nchiderea
cutiei
programul JavaScript face distincie ntre literele mari i literele mici, de
exemplu o variabil student este diferit de o variabil Student
dac scriptul conine mai multe instruciuni ntr-o linie, acestea vor fi
separate prin punct i virgula ( ; ). De obicei se evit aceast situaie.
215
16.3. Tipuri de date i variabile
Informaia inserat n paginile web sau n scripturi este o valoare care
aparine unui tip de date. De exemplu, informaia: Bine ai venit n mediul
JavaScript ! este o valoare de tip string.
n JavaScript exist ase tipuri de date: numerice, iruri, boolean, obiecte,
null, undefined (nedefinit).
16.3.1. Tipuri de date

Date numerice
JavaScript suport att numere ntregi, ct i numere reale. ntregii pot fi
pozitivi, 0 sau negativi. ntregii pot fi reprezentai n baza 10 (zecimal), n baza 8
(octal) sau n baza 16 (hexazecimal).
Sintaxa numerelor scrise n aceste baze este:
n baza 10 numerele nu trebuie s nceap cu zero, dar pot fi precedate
de semn (), de exemplu: 45, +200, -400
n baza 8 numerele ncep cu cifra zero (0), pot conine numai cifrele de
la 0 la 7 i pot fi precedate de semn, de exemplu:
057 n baza 8 este n baza 10 47 (5*8+7)
-076 n baza 8 este n baza 10 -62 (-(7*8+6))
0389 este un ntreg echivalent cu 389 (chiar dac ncepe cu 0 are
cifre > 7)
n baza 16 numerele ncep cu 0X, pot conine cifre de la 0 la 9 i
litere de la A la F (litere mici sau mari) i pot fi precedate de semn
(numerele pot fi pozitive sau negative). De exemplu:
0XFF n baza 16 este echivalentul n baza 10 cu 255(15*16+15)
-0XA9 n baza 16 este echivalentul n baza 10 cu 169(10*16+9)
Datele reale se reprezint: cu punct zecimal (7.53), cu E nr (n form
tiinific i nseamn 10 la puterea nr), sau n ambele forme, aa cum reiese
din exemplele de mai jos.
Exemple de date reale:
3.45, -2.55
2E- 4 echivalent cu 0,0002
4 E + 2 echivalent cu 400
5.827E2 echivalent cu 582.7
Date de tip ir
Un ir este un text (o niruire de caractere) cuprins ntre apostrofuri sau
ghilimele. Un ir poate conine i cifre i litere, numai litere, numai cifre, sau nimic
(irul vid). Numerele reprezentate ca ir de caractere pot fi luate n calcul numai
dac se aplic anumite funcii (care vor fi prezentate n seciunile urmtoare).
Exemple de iruri:
os Colentina nr. 452, Hello, 457
216
Date de tip Boolean
Exist dou valori de tip boolean: adevarat sau true, fals sau false. Valorile
booleene sunt folosite n comparaii pentru a ajuta programul JavaScript s ia o
decizie.
Obiecte
n seciunea precedent am definit obiectul, proprietile i metodele lui.
Un obiect poate fi considerat un tip de dat care are o valoare (de exemplu, un
formular). n seciunile urmtoare va fi prezentat lucrul cu obiecte.
Tipul de data Null
Un tip NULL este acela care nu are nicio valoare i niciun neles. Aceste
valori vide sunt utile n scrierea scripturilor complicate, de exemplu cmpul nume
dintr-un formular poate s aib valoarea null, pn n momentul introducerii unui
nume.
Tipul de dat Undefined
O valoare nedefinit poate fi dat unei variabile dup ce ea a fost creat,
dar nainte de a i se atribui o valoare.
Atribuire i egalitate
Semnul egal (=) este folosit n JavaScript pentru a indica o operaie de
atribuire.
De exemplu: cantitate = 20 nseamn Se atribuie valoarea 20 variabilei
cantitate sau cantitate ia valoarea 20. Cnd se dorete a se compara dou valori
dac sunt egale se folosete o pereche de semn egal (==). Acestea vor fi enumerate
i la operatori, n seciunea urmtoare.
16.3.2. Variabile
Variabilele sunt folosite n JavaScript pentru a stoca valori n scripturile
noastre. Variabilele sunt simboluri care nlocuiesc datele ce se pot modifica n
timpul execuiei. n cazul n care nu se cunoate o valoare (de exemplu, un pre al
unui produs dorit de achiziionat), n momentul rulrii unui program JavaScript se
poate folosi variabila Pre. Ne putem imagina o variabil ca pe o cutie, care are
pe ea scris un nume (Pre) i care va conine o valoare (valoarea preului).
Declararea variabilelor
Dei nu este impus, este considerat o bun practic s se declare
variabilele nainte de a fi folosite. Pentru a comunica browser-ului c dorim s
crem o variabil, se folosete declaraia n dou pri:
Cuvntul cheie var
Numele variabilei care este format dintr-un set de caractere
alfanumerice, dar primul caracter trebuie s fie o liter.
217
Este indicat ca numele variabilei s fie ct mai sugestiv. Este interzis s se
foloseasc drept nume de variabil cuvintele cheie (25 la numr n JavaScript) i nu
sunt indicate s se foloseasc cuvintele rezervate (33 la numr n JavaScript).
OBSERVAII!
Se pot declara mai multe variabile cu acelai var, dar ele trebuie separate
prin virgule
Amintim c JavaScript este un limbaj case-sensitive, adic face
distincie ntre literele mari i mici
Variabilele pot avea orice lungime
Nu se declar, n mod obligatoriu, tipul unei variabile, este suficient s
indicm numele ei. Tipul poate fi dat n urma unei atribuiri
Exist posibilitatea s nu declarm implicit o variabil cu var, dar putem
s-i asignm o valoare. De exemplu: pre = 100 este o declarare
implicit a variabilei pre
Iniializarea unei variabile

n mod normal, la declararea unei variabile, acesteia i se atribuie o valoare.
De exemplu:
var pre = 100
alert(pre) - se va afia 100
var preTVA=200*0.19
alert(preTVA) - se va afia 38
Se poate declara o variabil pe care dorim s o iniializm, fr a-i da o
anumit valoare. n acest caz, iniializm variabila cu valoarea particular null.
De exemplu:
var TVA=null
var pre= 100*null
alert(pre) - se va afia 0 (zero)
Dac se declar o variabil fr a-i atribui o valoare iniial, ea exist dar
este undefined (nedefinit).
var cantitate, pre = 100
var valoare=cantitate * pre
alert(valoare) se va afia NaN, deoarece cantitatea este nedefinit
Atribuirea de valori unei variabile

n cele mai multe cazuri, valoarea unei variabile se schimb n timpul
rulrii programului JavaScript. Atunci valoarea iniial a unei variabile se schimb
cu o alt valoare. Pentru a realiza aceast operaie (de introducere de date) se
folosete funcia prompt(). Funcia prompt() este asemntoare funciei alert(), n
sensul c genereaz o cutie de dialog. Parametrii funciei sunt iruri de caractere,
iar funcia are sintaxa: prompt(mesaj, valoarea initiala)
218
Mesajul (primul parametru) este afiat n cutia de dialog. Dac se introduce
o dat i se apas OK, cutia va returna aceast dat. Dac nu se introduce nicio dat
dar se apas OK, cutia va returna al doilea parametru, valoarea implicit. Dac se
apas CANCEL, atunci se va returna NULL. O declaraie de atribuire i comunic
browser-ului s nlocuiasc valoarea iniial cu o valoare nou. O declaraie de
atribuire are trei pri: numele variabilei, operatorul de atribuire (=) i valoarea
returnat de funcia prompt, astfel:
nume_variabil= prompt(Mesaj, valoare nou).
De exemplu:
var n=0
n = prompt(Dai valoarea lui n, 0)
alert (n)
Dac se introduce n cutia de dialog o dat, de exemplu 10 i se apas
OK se va afia 10
Dac se apas OK i nu se introduce nimic apare 0
Dac se apas CANCEL se afieaz NaN
Conversia datelor
Am artat c variabilele n JavaScript nu au declarat tipul. Este posibil s
convertim anumite variabile la tipul dat dorit. De exemplu, numerele pot fi incluse
n iruri, dar irurile nu pot fi considerate direct numere ca s putem s le aplicm
operatori aritmetici.
Concatenarea irurilor
Valorile de tip ir pot fi concatenate cu ajutorul operatorului +. De
exemplu, prin irul: ir1=abc ir2=def , ir1 + ir2 se ntelege irul format
prin unirea celor dou abcdef
Dac avem un numr, acesta este convertit direct n ir i apoi afiat, de
exemplu, cu funcia alert(ir).
De exemplu dac avem:

- var vrst=20
alert(vrst)
atunci vrst e transformat n ir 20 i se afieaz 20
- var vrst=20
alert(vrst= + vrst + ani)
atunci variabila ntreag este convertita n ntreg i se va afia
vrst = 20 ani
Pentru a transforma irurile n numere pentru a le putea aplica operatorii
aritmetici folosesc dou funcii: parseInt() i parseFloat().
Aceste funcii transform un ir n numr ntreg, respectiv n numr real.
Conversia unui ir n numr se face pn cnd se ntlnete un caracter care nu este
cifr.
219
De exemplu:
parseInt(100) - ntoarce 100
parseInt(-120) - ntoarce -120
parseInt(300ab) - ntoarce 300
parseInt(abc) - ntoarce NaN, mesaj de eroare
parseInt(20.75) - ntoarce 20
parseFloat(37.4) - ntoarce 37.4
parseFloat(47.89ab) - ntoarce 47.89
Exemplificm cele spuse mai sus, n scriptul pentru adunarea a dou
numere: nr1 i nr2.
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
nr1 = parseInt(prompt("Dai primul numr: ",0))
nr2 = parseInt(prompt("Dai al doilea numr: ",0))
s = nr1+nr2
alert("Suma este: " + s)
</SCRIPT>
</HEAD>
</BODY>
</HTML>
Figura 16.3. Funciile: parseInt(), prompt(), alert() i operatorul de concatenare +
16.4. Expresii i Operatori

n seciunea precedent s-au introdus mecanismele de introducere i afiare
de date.
n aceast seciune se vor introduce noiunile de Expresie i Operatori.
Expresii
O expresie conine unul sau mai muli operanzi i unul sau mai muli
operatori. Un operand este o variabil sau o constant. Un operator este un simbol
care i comunic browser-ului cum s execute expresia. De exemplu, n expresia
aria=6*a*a // aria cubului
aria, a i 6 sunt operanzi, iar = i * sunt operatori.
220
Operatori
n JavaScript exist mai multe tipuri de operatori: aritmetici, logici, de
atribuire, relaionali, condiionali, logici pe bii. n continuare vor fi descrise
aceste tipuri de operatori.
n JavaScript, ca i n alte limbaje de programare, operatorii sunt evaluai
ntr-o anumit ordine, ordine cunoscut sub numele de preceden. Un operator cu
preceden mai mare este evaluat naintea unuia cu preceden mai mic.
n tabelul de mai jos este dat ordinea descresctoare a precedenei lor.
Operator Descriere
., (),[], Operatori de adresare: accesare cmp, indexare
tablou, apel functie
++, - -, +, - Operatori unari (un singur operand), ntoarcerea
, !, ~ unei date, crearea unui obiect
*, /, % nmulirea, mprirea, restul mpririi
<<, >> Operatori de deplasare bii
<, <=, >, Operatori relaionali
>=
==,!=, = = Egalitate, inegalitate, identitate, nonidentitate
=, != = =
& AND (i) pe bii
^ XOR (sau exclusiv) pe bii
| OR (sau) pe bii
&& AND logic
|| OR logic
?: Condiional
=, op=, Atribuirea, atribuire cu operaie
(+=, -=, %=, |=,
*=, <<=, >>=, &=,
^=)
, Operator virgul de evaluare multipl
Operatori aritmetici
Operatorii aritmetici sunt : + (operator binar), - (operator binar), * , /, %,
++, --, + (operator unar de semn), - (operator unar de semn), + (operator de
concatenare).
NOT!
Operatorii unari au un singur operand
Operatorii binari au doi operanzi
n continuare vor fi definii i exemplificai operatorii aritmetici enumerai
mai sus:
221
Operatorul binar + este operator de adunare. De exemplu:
o 5+7 ia valoarea 12
o 9.4+13.7 ia valoarea 22.1
o n=10 i m=20 n+m ia valoarea 30
Operatorul binar - este operator de scdere. De exemplu:
o 5-7 ia valoarea -2
o 9.4 - 13.7 ia valoarea -4.3
Operatorul * este operatorul de nmulire. De exemplu:
o 5*7 ia valoarea 35
o n=25 n*10 ia valoarea 250
Operatorul / este operatorul de mprire. De exemplu:
o 7/2 ia valoarea 3.5
o a = 10 2 / a ia valoarea 0.2
Operatorul % este operatorul pentru obinerea restului mpririi.
De exemplu:
o 7%2 ia valoarea 1
o -5%2 ia valoarea -1
o n=7.5 atunci n%3 ia valoarea 1.5
OBSERVAIE!
n JavaScript restul poate fi i negativ, operanzii pot fi i numere reale.
Operatorul unar - i operatorul unar + sunt operatori de semn. De

exemplu:
o N=10 - + - n ia valoarea -10
Operatorul + de concatenare este operatorul de concatenare a dou iruri
(a fost introdus n seciunea precedent). De exemplu:
o var nume=Ana + Ionescu ia valoarea Ana Ionescu
Operatorul ++ este operator de incrementare cu 1. Operatorul de
incrementare poate fi plasat att n stnga, ct i n dreapta variabilei.
Dac variabila este prefixat de operatorul ++, atunci variabila este
incrementat i apoi intr ntr-un eventual calcul. Dac variabila este
postfixat de operatorul ++ atunci variabila intr n calculul n care este
implicat i apoi este incrementat.
De exemplu, pentru codul de mai jos:
<HTML>
<HEAD></HEAD>
<BODY>
var x=10, y
y=++x*5
alert("Valoarea lui ++x este: " + x + " i valoarea lui y = ++x*5
este: " + y)
x = 10
222
y = x++*5
alert("Valoarea lui x++ este: " + x + " i valoarea lui y = x++*5 este: " + y)
</SCRIPT>
</BODY></HTML>
browser-ul va afia:
Figura 16.4. Operatorul de incrementare
Operatorul -- este operatorul de decrementare cu 1 (scade 1 din

valoarea variabilei). Ca i operatorul ++ , operatorul -- poate fi prefixat
sau postfixat cu acelai efect.
Dac n exemplul de mai sus se nlocuiesc cele dou atribuiri pentru
variabila y cu : y= -- x*5; y= x-- *5
browser-ul va afia:
Figura 16. 5. Operatorul de decrementare

223
Operatori logici
Operatorii logici se folosesc pentru a uni dou expresii logice ntr-o
expresie logic. n general, expresiile logice sunt folosite pentru a lua decizii.
Exista trei operatori logici:
Operatorul unar ! - este operatorul de negare logic i are urmtorul
efect: dac operandul este false, rezultatul este true, altfel rezultatul este
false.
Operatorul binar || - este operatorul OR (sau) logic. Dac cel puin unul
din operanzi este true, atunci valoarea expresiei combinate este true.
Dac ambii operanzi logici sunt fali atunci expresia combinat este
false.
Operatorul binar && este operatorul AND (i) logic. Dac ambii
operanzi sunt true, rezultatul este true, altfel rezultatul este false.
Exemple de utilizare a operatorilor logici:
!(7= =5) returneaz true pentru c 7 = =5 returneaz false i ! false este
true
!(7!=7) returneaz true pentru c 7!=7 este false
m=abc i n=aBc !(m= = n) returneaza true
x=10 i y=20 atunci (x>10) || (y>10) returneaz true, deoarece false ||
true returneaz true
(x>10) && (y>10) returneaz false pentru c false && true este false
Operatori de atribuire
Atribuirea este un operator, pe care l-am introdus n seciunea precedent.
Exist mai multi operatori de atribuire:
Operatorul = se folosete ntr-o expresie variabil = expresie i are
ca efect evaluarea expresiei i atribuirea valorii ei variabilei.
n JavaScript se pot efectua i atribuiri multiple, cu urmtoarea sintax:
v1 = v2 = v3 =...= vn = expresie
Principiul de execuie este urmtorul: se evalueaz expresia din partea
dreapt i valoarea se atribuie variabilei vn, apoi coninutul variabilei vn este
atribuit variabilei vn-1 s.a.m.d.
Operatorul de atribuire = poate fi prefixat de un operator aritmetic astfel:
(OP=), unde OP poate fi +, -, *, /, %. Efectul unor astfel de atribuiri este
urmtorul: se execut operaia din stnga semnului = i apoi se face
atribuirea valorii operaiei variabilei prima din stnga.
Se consider urmtorul cod:
<HTML><HEAD>
var x=100, y=200
x+=y
alert("x+=y este: " + x)
x=100
224
x*=y
alert("x este: " +x)
</SCRIPT>
</BODY></HTML>
Browser-ul va afia:
Figura 16.6. Operator de atribuire
Operatori relaionali sau de comparaie

Operatorii relaionali compar doi operanzi i ntorc o valoare logic, true
dac relaia este adevrat i false n caz contrar. Operatorii relaionali sunt:
= = - operatorul de egalitate
!= - operatorul de inegalitate (non-egalitate)
< - operatorul mai mic
> - operatorul mai mare
<= - operatorul mai mic sau egal
>= - operatorul mai mare sau egal
OBSERVAII!
1. Se pot compara i iruri, ordinea fiind cea lexicografic
2. Conform codului ASCII o cifr este mai mic dect o liter (codul
cifrelor este 48-57) i o liter mare (codul 64-93) este mai mic dect o
liter mic (codul 97-126)
225
Exemple cu operatori relaionali:
a) 35> 45 returneaz false
b) a = 35 a>20 returneaz true
c) 5<aBc returneaz true
d) C<c returneaz true
e) a=aBc b=Abc a>b returneaz false
f) a!=b returneaz true
g) a== b returneaz false
Operatorul condiional
Operatorul condiional, cunoscut i sub numele de operator trenar, este
diferit de cei prezentai mai sus. Acest operator cere browser-ului s evalueze o
expresie i, n funcie de valoarea acesteia, se execut o anumit expresie dac
valoarea este true i o alta dac valoarea este false. Sintaxa este urmtoarea:
expresie ? expresie1: expresie 2
i are ca efect :
Se evalueaz expresia (prima parte a operatorului)
Dac expresie = true atunci se evalueaz expresie1 (partea a doua)
Dac expresie = false atunci se evalueaz expresie2 (partea a treia)
Dup cum reiese din sintaxa operatorului condiional, acesta este alctuit
din trei pri. Prima parte este separat de partea a doua prin caracterul ? , iar
partea a doua este separat de partea a treia prin caracterul : .
De exemplu, putem folosi operatorul condiional n rezolvarea ecuaiei de
gradul I, ax+b =0, scriind scriptul:
<HTML>
<HEAD>
a=parseInt(prompt("dati primul numar",0))
b=parseInt(prompt("dati al doilea numar",0))
a!=0?alert("x= "+-b/a):b!=0?alert("nu exista solutii"):alert("o
infinitate de solutii")
</SCRIPT>
</HEAD>
<BODY></BODY>
</HTML>
226
Figura 16. 7. Operatorul condiional ?
Operatori logici pe bii

n JavaScript exist un set de operatori care permit accesul la bit.
Operatorii logici pe bii sunt:
<< operator de deplasare stnga

>> operator de deplasare dreapta
& operator logic i (AND) pe bii
| operator logic sau (OR) pe bii
^ operator logic sau exclusiv pe bii
~ operator logic unar de negare pe bii (NOT)
Operatorul << are ca efect deplasarea spre stnga a operandului din

stnga cu un numr de poziii egal cu valoarea operandului din dreapta
Operatorul >> are ca efect deplasarea spre dreapta a operandului din
stnga cu un numr de poziii egal cu valoarea operandului din dreapta
227
Operatorii binari &, |, ^ , AND, OR, XOR acioneaz; la nivel de bit,
pentru fiecare pereche de bii aflai pe poziii identice, conform tabelului
de mai jos:
O1 O2 O1&O2 O1^O2 O1| O2

0 0 0 0 0
1 0 0 1 1
0 1 0 1 1
1 1 1 0 1
Operatorul unar ~ (negare pe bit) inverseaz coninutul biilor.
OBSERVAIE!
Aceti operatori las nemodificat coninutul variabilelor, de exemplu,
x=2
alert ( x << 2)
alert (x)
va afia mai 8 apoi 2.
Exemple cu operatori logici pe bii:

Fie:
x=2 (00000010 n binar)
y=5 (00000101 n binar)
Atunci:
x<<2 va fi 8 (00001000)
~x va fi -3 (11111101)
x>>1 va fi 1 (00000001)
y<<2 va fi 20 (00010100)
x&y va fi 0 (00000000)
x|y va fi 7 (00000111)
x^y va fi 7 (00000111)
16.5. Metoda document.write()

Am artat, n capitolul precedent, c obiectele se despart de proprieti i
de metodele sale prin caracterul . .
Obiectul document are proprieti i obiecte. Una din cele mai folosite
metode n JavaScript este metoda write(ir) a obiectului document, care indic
browse-ului s scrie n document irul cuprins ntre ghilimele.
Dac irul conine i tag-uri HTML, atunci acestea sunt interpretate de
browser i afiate corespunztor.
n exemplul de mai jos se utilizeaz metoda write sub diferite forme.
<HTML><HEAD>
228
document.write("Primul script");document.write("<br>")
document.write("<B> Bine ati venit</B>"); document.write("<BR>")
document.write("<IMG src=c:/windows/web/wallpaper/tulips.jpg
width=100 height=100>"); document.write("<br>")
document.write("<A href='http://www.edu.ro/index.php/articles/3880'>Lista
Universitati Particulare Acreditate </A>")
</SCRIPT>
</HEAD>
<BODY> </BODY> </HTML>
Figura 16. 8. Metoda document.write()
229
17. Instruciuni i Funcii n JavaScript
17.1. Instruciuni
n JavaScript, ca i n majoritatea limbajelor de programare complexe,
exist trei mari categori de instruciuni:
de atribuire
de decizie
repetitive
Despre instruciunile de atribuire s-a vorbit i n capitolul precedent.
17.1.1. Instruciuni de decizie

O instruciune condiional JavaScript este asemntoare cu instruciunea
condiional din limbajele de programare complexe.
n JavaScript o instruciune condiional i cere browser-ului s evalueze o
condiie i, n funcie de rezultatul evalurii, s execute anumite instruciuni. Exist
trei instruciuni condiionale: if, if.else i switch...case.
Instruciunea IF i IF ELSE
Instruciunea IF este una din cele mai folosite instruciuni n JavaScript,
pentru c determin browser-ul s execute un set de instruciuni dac o anumit
expresie condiional este adevarat sau nu.
O expresie condiional este o expresie boolean care ia valoarea true sau
false.
Instruciunea IF simpl
Instruciunea If are sintaxa:
IF (expresie conditional) { instruciuni }
Se observ c instruciunea condiional IF simpl are trei pri: cuvntul
cheie IF o expresie condiional cuprins ntre paranteze i blocul de instruciuni
care se execut n cazul n care expresia este true, cuprins ntre acolade ({}). Blocul
de instruciuni se mai numete instruciune compus.
230
n cazul n care blocul de instructiuni conine o singur instruciune,
acoladele pot lipsi, dar este indicat s se foloseasc pentru lizibilitatea scriptului.
Un exemplu de instruciune IF simpl este dat mai jos.
<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT language = "JavaScript">
// Ecuaia de gradul I
a = parseInt( prompt ("Dai un numr a", 0))
b = parseInt( prompt ("Dai termenul liber b", 0))
if (a !=0)
{ x = - b / a; alert ("x = " + x) }
</SCRIPT>
</BODY></HTML>
Figura 17.1. Instruciunea IF

Instruciunea if else
Instruciunea if else are sintaxa:

IF( expresie condiional)
{instruciuni 1}
else
{instruciuni 2}
231
Principiul de execuie este urmtorul: se evalueaz expresia, dac expresia
este adevrat, se execut instruciuni 1 altfel se execut instruciuni 2.
n cazul cnd blocurile {instruciuni 1} i/sau {instruciuni 2} au numai o
instruciune, acoladele pot s lipseasc. n continuare vom face o alt variant a
exemplului de mai sus.
<HTML>
<HEAD>
</HEAD>
<BODY>
if (a!=0)
{x = -b/a; alert ("x = " + x) }
else
alert ("Nu exit soluie")
</SCRIPT>
</BODY>
</HTML>
Figura 17.2. Instruciunea if else

232
Instruciunea If else if else
Aceast form a instruciunii if este asemntoare cu instruciunea

ifelse, numai c dac expresia condiional este fals se cere browser-ului s
evalueze o alt expresie condiional, care, n cazul n care este adevrat, se
execut un bloc de instruciuni, altfel se execut alt bloc de instruciuni. Sintaxa
acestei instruciuni este:
IF (expresie 1)
{ instruciuni 1}
else if (expresie 2)
{instruciuni 2 }
else
{instruciuni 3}
n continuare ncercm s mbuntim exemplul de mai sus:

<HTML>
<HEAD>
</HEAD>
<BODY>
if (a!=0)
{ x = - b/a ; alert ("x = " + x)}
else
if (b!=0)
alert ("Ecuaia nu are soluie")
else
alert ("Ecuaia are o infinitate de soluii")
</SCRIPT>
</BODY> </HTML>
233
Figura 17.3. Instruciunea IF ... else if ... else
Instruciunea IF imbricat
n cazul n care o expresie este adevrat se execut o instruciune IF care
are o expresie care se evalueaz i, dac este adevrat, se execut alt instruciune
IF s.a.m.d., spunem c avem instruciuni IF imbricate.
Sintaxa instruciunii este:
IF (expresie 1)
{expresie 2}
..
{ if expresie n }
else
{expresie n1}
.........
else
{expresie 2.1}
else
{expresie 1.1}
234
n exemplul urmtor se rezolv ecuaia de gradul 2: ax2 + bx + c = 0
<HTML>
<HEAD></HEAD>
<BODY>
a = parseInt(prompt ("Dai a ", 0))
b = parseInt(prompt ("Dai b ", 0))
c = parseInt(prompt ("Dai c ", 0))
D=b*b-4*a*c
if (a != 0)
if (D>=0) // a<>0 D>0
{alert ("Rdcini reale") }
else // a <> 0 D< 0
{alert ("Rdcini complexe") }
else
if (b!=0) // a=0 b<>0
{ alert ("Ecuaie gradul I x = " + -c/b) }
else
if (c==0)
{alert ("O infinitate de soluii ") }
else // a=b=0 c<>0
{alert ("Nu exist soluii") }
</SCRIPT>
</BODY>
</HTML>
235
Figura 17.4. Instruciunea IF imbricat
Instruciunea switch...case
n cazul n care browser-ul trebuie s ia o serie de decizii pe baza unei
singure valori de schimb atunci instruciunea if este ineficient, folosindu-se
instruciunea switch case.
Sintaxa instruciunii switch...case:
switch (expresie)
{
case exp1: instruciuni 1 [; break]
case exp2: instruciuni 2 [; break]
.
.
case exp3: instruciuni n [; break]
[default: instruciuni n +1]
} // end switch
unde:
- [ ] - au caracter opional
- expresie - este o expresie ntreag
- expresie i sunt expresii ntregi
- instruciuni i sunt instruciuni care se execut n cazul n care
expresie==expresie i
n funcie de valoarea ntreag rezultat din evaluarea expresiei, se execut

grupul de instruciuni care are valoarea expi egal cu valoarea expresiei. n cazul
n care valoarea expresiei este diferit de toate valorile expi, atunci browser-ul
236
execut instruciunile ce urmeaz dup cuvntul cheie default, dac acesta exist,
altfel, iese din instruciunea switch case.
Dac break este ultima instruciune din grupul de instruciuni in care se
execut, atunci browserul omite s evalueze expresiei+1 expresiein i execut
instruciunea ce urmeaz dup acolada nchis (}).
Dac break nu este la sfritul grupului de instruciuni ce se execut, atunci
browser-ul compar valoarea expresiei cu valoarea expresiilor i+1 expresiein ,
chiar dac nu va mai gsi egalitate pn la sfritul instruciunii switch.
Codul care urmeaz probeaz instruciunea switch. Se d un numr n baza
10 i se cere transformarea lui n baza 16. Pentru aceasta se mparte un numr la 16
pn cnd ajunge la zero i resturile, luate n ordine invers obinerii lor, formeaz
numrul n baza 16 (N = Q * 16 + R).
<HTML>
<HEAD>
function Hexazec(n)
{
var Hexa ="", r
while (n>0) {
r=n%16
if (r>=10) {
switch(r) {
case 10: R="A"; break
case 11: R="B"; break
case 12: R="C"; break
case 13: R="D"; break
case 14: R="E"; break
case 15: R="F"; break
}
Hexa=R+Hexa
}
else {
Hexa=string(r)+Hexa
}
n=(n-r)/16
}
return Hexa
}
</SCRIPT>
<BODY>
n=parseInt(prompt("Dai numrul n",0))
alert("Numrul n baza 10 este n = " + n )
alert("Numrul n baza 16 este nr16 = " + Hexazec(n))
</SCRIPT></BODY></HTML>
237
Figura 17.5. Instruciunea switch
17.1.2. Instruciuni de ciclare

Se cunoate din limbajele de programare c atunci cnd dorim s executm
un grup de instruciuni n mod repetat, se folosesc instruciunile de ciclare. i
JavaScript accept urmtoarele instruciuni de ciclare: for i for in, while, do while.
Instruciunea for
Instruciunea for are o variabil contor, o condiie i o aciune ce
actualizeaz contorul. Ciclul for determin browser-ul s execute instruciunile din
corpul ciclului pn cnd condiia este fals. nainte de nceperea unui ciclu (acesta
se mai numete i o iteraie sau un pas al ciclului) condiia este testat. Dup
executarea instruciunilor din ciclu, contorul este actualizat nainte ca o nou
iteraie s nceap.
Dac condiia returneaz mereu valoarea false, ciclul nu se execut
niciodat. Dac condiia returneaz mereu valoarea true, ciclul este infinit.
Sintaxa instruciunii for este:
for(expresie_iniializare; expresie_condiional [;
expresie_incrementare])
{
instruciuni
}
unde:
238
expresie_iniializare se folosete pentru iniializarea contorului
(variabila de ciclare)
expresie_test se folosete pentru a testa dac se execut blocul de
instruciuni subordonate instruciunii for; dac expresia are valoarea
true, atunci se execut instruciunile, altfel se oprete ciclarea
expresie_incrementare este opional i se folosete pentru incrementarea
variabilei de ciclare. Dac incrementarea se face cu 1, adic se folosete
operatorul ++, atunci expresie_incrementare poate lipsi
Instruciunea for funcioneaz astfel:
a) se evalueaz expresia_iniializare (aceasta poate conine i declaraia
variabilei de ciclare)
b) se evalueaz expresia_test. n cazul n care are valoarea true, se execut
instruciunile dup care se trece la pasul c), altfel se trece la
instruciunea dup for
c) se evalueaz expresia de incrementare i se trece la pasul b)
S probm instruciunea for prin urmtoarele exemple: s aflm suma
primelor n numere, n mai multe moduri.
OBSERVAIE! expresiile pot fi vide, dar nu este indicat folosirea
instruciunii for n aceast form
1)
<HTML>
<HEAD><TITLE>Suma primelor n numere </TITLE></HEAD>
<BODY>
s1=0
n=parseInt(prompt("dati numarul n = ",1))
for(i=1 ; i<=n ; i++)
s1+=i //s1=s1+i
alert("suma primelor "+n+ " numere este "+s1)
s2=0
for(i=n; i>=0 ; i--)
s2+=i //s2=s2+i
document.write("Suma primelor " + n + " numere este "+ s2)
</SCRIPT>
</BODY>
</HTML>
2) Dac variabila de ciclare este definit n afara instruciunii for i
incrementarea se face cu 1, atunci putem avea urmtorul script:
<SCRIPT language = JavaScript>
var i = 0 , s = 0
for ( ; i<=n; ) s + = i
alert (s)
</SCRIPT>
239
3) Pot lipsi toate expresiile din instruciunea for:

var i = 0 , s = 0
for ( ; ; )
{
s+ = i
i++
if ( i == 10) break
}
</SCRIPT>
4) Ciclul infinit:

var s = 0
for (i=1; i > 0; i++)
s+= i
// acesta este un ciclu infinit, deoarece condiia are mereu valoarea true
</SCRIPT>
Figura 17.6. Instruciunea for
240
Continue
Cuvntul cheie continue determin browser-ul s ntrerup execuia
comenzilor din cadrul blocului de instruciuni i s treac la nceputul ciclului,
adic la testarea expresiei condiionale, ca i cum ar fi ajuns la sfritul ciclului.
Cuvntul cheie continue se folosete pentru toate instruciunile de ciclare,
cu excepia instruciunii do while, care execut blocul de instruciuni cel putin o
dat.
De exemplu, dac dorim s calculm suma primelor 10 numere, fr a-l
aduna i pe 5, vom proceda astfel:
<HTML>
<HEAD>
<TITLE>Suma primelor n numere fara unul </TITLE></HEAD>
<BODY>
s=0
for(i=1;i<=10; i++)
if (i == 5)
continue
else s+=i
document.write("Suma primelor 10 numere fara 5 este " + s)
</SCRIPT>
</BODY>
</HTML>
Figura 17. 7. Instruciunea continue
Instruciunea for in
n JavaScript exist o instruciune special de ciclare i anume
instruciunea for in. Acest instruciune este asemntoare instruciunii for,
diferena const c instruciunea for in se folosete cnd nu se cunoate numrul
de repetri pe care browser-ul trebuie s le fac n cadrul unui ciclu, de exemplu,
241
dac dorim s aflm proprietile unui obiect fr a ti numrul lor. Instruciunea
for in i cere browser-ului s execute blocul de instruciuni pentru fiecare
element dintr-o list.
Instruciunea for in are structura urmtoare:
for (list)
{ instruciuni}
Urmtorul exemplu ilustreaz utilizarea instruciunii for in pentru a afla

proprietile obiectului window. Browser-ul execut blocul de instruciuni pentru
fiecare proprietate a ferestrei. Instruciunile sunt: afiarea proprietii i salt la rnd
nou. Codul va fi:
<HTML>
<HEAD><TITLE>FOR IN</TITLE></HEAD>
<BODY>
for ( property in window)
{
document.write(property)
document.write("<BR>")}
</SCRIPT>
</BODY>
</HTML>
Figura 17.8. Instruciunea for in
Instruciunea While
Instruciunea de ciclare while este asemntoare instruciunii for. Diferena
const n faptul c instruciunea while nu are o variabil contor, nici expresie de
incrementare.
242
Instruciunea while cere browser-ului s execute un bloc de instruciuni
att timp ct o condiie definit n aceast instruciune este true. Ciclul while nu
indic numrul de iteraii fcute.
Sintaxa acestei instruciuni este:
while (expresie)
{instruciuni}
Modul de execuie a instruciunii while este:

a) se evalueaz expresia
b) dac valoarea returnat de ea este true atunci se execut blocul de
instruciuni i se revine la pasul a), altfel se trece la urmtoarea
instruciune
n exemplul de mai jos se calculeaz suma cifrelor unui numr pozitiv.
var s=0
n=parseInt(prompt("Dai numrul n",1))
while (n>0) {
s+=n%10
n=(n-n%10)/10
}
alert("Suma cifrelor numrului n este: " + s)
</SCRIPT>
Figura 17.9. Instruciunea while
Instruciunea do while
Instruciunea dowhile este asemntoare cu instruciunea while, diferena

const n faptul c instruciunea while este condiionat anterior execuiei
243
instruciunilor, iar instruciunea dowhile este condiionat posterior execuiei
instruciunilor.
Sintaxa instruciunii do while este:
do
{instruciune}
while (expresie)
Modul de execuie este evident:

a) se execut instruciunile dorite
b) se evalueaz expresia. Dac valoarea ei este true se trece la pasul a)
altfel se trece la urmtoarea instruciune dup do while
Instruciunile din corpul instruciunii do ... while se execut cel puin o

dat. Dac exist posibilitatea ca expresia s fie fals de prima dat este indicat s
se foloseasc instruciunea while, care nu mai execut instruciunile dac condiia
este fals i sare la instruciunile dup while.
n exemplul de mai jos se utilizeaz instruciune do...while pentru
calcularea sumei primelor n numere pare naturale.
<HTML>
<HEAD><TITLE>Suma primelor n numere pare</TITLE></HEAD>
<BODY>
var s=0, i=0, t=0
n=parseInt(prompt("Dai numrul n ", 1))
do
{s+=t; t=t+2;i+=1}
while (i<=n)
alert("Suma primelor n = " + n + " numere pare este: " + s)
</SCRIPT>
</BODY>
</HTML>
Figura 17.10. Instruciunea do while
244
17.2. Funcii n Java Script
n acest capitol se prezint modul de definire i utilizare a funciilor n
JavaScript. Funciile execut anumite aciuni i ntorc rezultatele.
Ca i limbajele de programare complexe, funciile n JavaScript combin
cteva instruciuni care s execute anumite operaii, sub acelai nume. Informaiile
despre funcie sunt incluse dup numele funciei ntre paranteze. Numele funciei
mpreun cu operaiile i informaiile ei pot fi introduse ntr-un cod scris ntr-un
anumit loc, iar executarea ei poate fi cerut browser-ului ori de cte ori este nevoie.
Informaiile despre funcie se mai numesc argumentele sau parametrii funciei.
Unele funcii pot s nu aib parametri.
17.2.1. Definirea i apelarea unei funcii

Procesul de creare a unei funcii se numete definirea funciei, iar procesul
de execuie a funciei se numete apelarea funciei.
n JavaScript exist dou tipuri de funcii: funcii create de utilizator i
funcii predefinite (ale limbajului).
Sintaxa de definire a unei funcii utilizator este:
function nume_funcie([parametri])
{
[instruciuni]
}
n continuare vom prezenta succint fiecare parte din definirea funciei.

Definirea unei funcii este bine s se fac n partea de antet (<HEAD>) a
unui program html. Amintim c n capitolul 16 am specificat c o pagin poate
conine unul sau mai multe scripturi. Acestea se scriu n blocul <SCRIPT
language="JavaScript">...</SCRIPT>. Blocul <SCRIPT> poate fi plasat n blocul
de antet al paginii, <HEAD>, sau n blocul de coninut al paginii <BODY>. Apelul
funciei poate fi introdus ntr-un script din corpul paginii.
Numele funciei este un nume dat funciei. Acesta este indicat s fie un
nume sugestiv, unic n pagina web (s nu mai fie folosit pentru alte funcii chiar
dac acestea sunt definite n alte scripturi din pagin). Numele poate s conin
caractere alfanumerice (litere i cifre) i liniua de subliniere, iar primul caracter s
fie obligatoriu o liter. De asemenea numele nu poate fi cuvnt cheie sau un cuvnt
rezervat.
Parantezele sunt obligatorii i sunt folosite pentru a transfera argumente
funciei. Chiar dac o funcie conine toate valorile necesare pentru a-i ndeplini
aciunile pentru care a fost creat (adic nu conine argumente) parantezele tot
trebuie s existe. Un script poate s conin una sau mai multe funcii.
Blocul de program al funciei conine instruciunile pe care le execut
browser-ul atunci cnd se apeleaz funcia, ntr-o alt parte a scriptului.
Instruciunile sunt incluse ntre acolade ({ }). n blocul de program poate exista un
apel al altei funcii. n blocul de program poate exista o instruciune return, cu
ajutorul creia funcia ntoarce (returneaz) o valoare.
245
Apelul unei funcii
O funcie se apeleaz atunci cnd se dorete ca browser-ul s execute
blocul de instruciuni al funciei. Pentru apelul unei funcii se utilizeaz numele
funciei, urmat de paranteze, n care eventual se afl parametrii, astfel:
nume_funcie ([parametri])
Dac funcia are parametrii (argumente), valorile fiecruia sunt incluse

ntre paranteze, n ordinea n care sunt enumerai parametrii n definirea funciei.
Despre parametrii vom discuta n seciunea 17.2.3.
n continuare se d un exemplu de definire a unei funcii fr parametrii i
apelul acesteia. Definirea funciei se face ntr-un script din antetul paginii, iar
apelul funciei ntr-un script din corpul paginii. Funcia definete aciunea de
indexare a salariului de baz de 1000 RON, cu 5% ncepnd cu 1-01-07.
<HTML> <HEAD><TITLE>Funcii</TITLE>
function indexare_salariu()
{var coef_indexare=0.05
var indexare=1000*0.05
return indexare }
</SCRIPT></HEAD>
<BODY><SCRIPT>
alert(Salariu indexat este + indexare_salariu()+1000)
Figura 17.11 Definirea i apelarea unei funcii fr parametri
La apelarea funciei indexare_salariu(), browser-ul trece la definirea

funciei din antet i execut instruciunile din corpul funciei.
Not!
Se putea scrie un singur script n <HEAD> sau <BODY>, dar pentru
lizibilitatea unei pagini, n cazul n care sunt mai multe funcii este indicat s se
defineasc funciile n <HEAD> i apelurile lor n <BODY>.
246
17.2.2. Domeniul de valabilitate a variabilelor
Prin domeniul de valabilitate sau de vizibilitate a variabilelor se ntelege n
JavaScript posibilitatea de accesare a unei variabile. n JavaScript exist dou
tipuri de variabile din punct de vedere al domeniului de valabilitate: variabile
globale i variabile locale. O variabil global este definit n afara unei funcii i
valoarea ei este vizibil (valabil) i poate fi modificat de toate funciile definite
dup ea, precum i de toate instruciunile existente dup ea. Un exemplu de
utilizare a variabilelor globale:
funcia suma_cifre( ) calculeaz suma cifrelor

funcia afiseaza_suma() afieaz suma cifrelor
instruciunea alert(x) afieaz numrul dat
<HTML>
<HEAD
> <TITLE>Variabile globale</TITLE>
function suma_cifre()
{alert('x= '+x)
while(x>0)
{s=s+x%10
x=(x-x%10)/10}
return s}
function afiseaza_suma()
{alert('Suma cifrelor lui x este: '+s) }
</SCRIPT>
</HEAD>
<BODY>
var x=prompt('Dai numrul x',0)
var s=0
suma_cifre()
afiseaza_suma()
alert('numarul x dupa apelul suma_cifre() este '+x) </SCRIPT>
</BODY></HTML>
247
Figura 17.12. Variabile globale
Din analiza exemplului de mai sus, se observ c variabilele x i s sunt

globale, vizibile att n funcia suma_cifre() i funcia afiseaza_suma(), ct i n
instruciunile din script (alert).
Funcii care apeleaz alt funcie

O funcie poate fi apelat din corpul altei funcii. n exemplul din figura
17.12, n corpul funciei suma_cifre() se poate apela funcia afiseaza_suma() astfel:
function suma_cifre()
{ alert(x = + x)
while (x>0)
{ s=s+x%10
x=(x-x%10)/10}
afiseaza_suma()}
O variabil local este declarat n interiorul unei funcii. Ea este creat i

distrus ori de cte ori se execut funcia i are domeniul de valabilitate
(vizibilitate) n interiorul funciei, alte pri ale scriptului (instruciuni, funcii) nu o
cunosc.
O variabil local poate s aib acelai nume cu o variabil global. Dac
folosim variabila n corpul funciei unde a fost definit, este adresat variabila
local. Dac folosim acelai nume dar n afara funciei care o definete ne referim
la variabila global.
De exemplu, s considerm o variabil s local n care se depune suma
primelor n numere i s variabila global pentru suma cifrelor unui numr definit i
n exemplul de mai sus. Adaugm n scriptul din <HEAD> funcia:
248
<HTML>
<HEAD>
<TITLE>Variabile globale si locala</TITLE>
function suma_n()
{var s=0
n=parseInt(prompt('Dai n ',0))
for(i=1;i<=n;i++)
s+=i
alert('Suma primelor n= ' + n + ' numere este: '+s)}
</SCRIPT></HEAD>
<BODY>
var s=10
suma_n()
alert("variabila globala s = "+ s)
</SCRIPT>
</BODY>
</HTML>
Figura 17.13. Variabile locale i globale
Se observ c browser-ul afieaz suma primelor n numere i variabila

global s=10.
249
17.2.3. Parametri
n sintaxa unei funcii, am artat c ntre parantezele rotunde pot fi trecui
parametri sau argumente. De asemenea am spus c o funcie efectueaz o aciune.
Unele funcii i efectueaz aciunea fr a fi nevoie s introducem argumente,
avnd toate valorile necesare definite n corpul funciei. Acesta este cazul funciilor
fr argumente, introduse n seciunea precedent. Unele funcii necesit unele date
(valori sau variabile) pentru a-i efectua aciunea. Aceste date, numite argumente
sau parametri, se trec ntre parantezele din definirea funciei, separate prin virgul.
Aceste date nu sunt scrise n definiia funciilor (ca la funciile far argumente), i
trebuie transmise funciei ca parametri. Parametrii din antetul funciei se numesc
parametri formali, iar parametrii din apelul funciei se numesc parametri efectivi.
La apelul funciei se transmit valori parametrilor formali, proces numit transferul
prin valoare ctre funcie. Parametrii efectivi pot fi att valori, ct i variabile. n
funcie, parametrii formali sunt de fapt variabile locale.
Dac n exemplul din figura 17.11 presupunem c salariul de baz i
procentul de indexare nu sunt date n corpul funciei, ci sunt argumente ale funciei
indexare_salariu(), noua funcie va fi apelat prin valori sau se atribuie valori
parametrilor efectivi. Pentru acest exemplu vom avea codul:
<HTML>
<HEAD>
<TITLE>Funcii cu parametrii</TITLE>
function indexare_salariu(sal_vechi,coef_indexare)
{var sal_nou=sal_vechi*(1+indexare/100)
alert('Salariul '+salariu+' indexat cu '+indexare+'% este: '+sal_nou)
}
</SCRIPT></HEAD><BODY>
<SCRIPT>
salariu=prompt('Dai salariu',0)
indexare=prompt('Dai coeficient de indexare',0)
//apel functie prin variabile
indexare_salariu(salariu,indexare)
//apel prin valori
salariu=2000; indexare=5
indexare_salariu(salariu,indexare)
</SCRIPT>
</BODY>
</HTML>
250
Figura 17.14. Apel funcii cu parametri
Parametrii efectivi pot fi dup cum reiese din exemplul de mai sus:
prin variabilele salariu i indexare, caz n care funcia se apeleaz prin
valorile reinute de acestea
prin valori (2000 respectiv 5)
n capitolul urmtor se va arta cum pot fi apelate funciile din codul HTML.
17.2.4. Funcii predefinite

n introducerea seciunii 17.2 am menionat c exist funcii realizate de
utilizator, i care au fost prezentate mai sus, i funcii ale limbajului JavaScript, numite i
funcii predefinite limbajului. Cele mai importante funcii predefinite sunt:
eval("ir") evalueaz expresia din irul transmis ca parametru i
ntoarce valoarea expresiei. De exemplu:
var expresie1 = 7 * 8 % 5
var total1 = eval(expresie1) // va asigna valoarea 1 variabilei total1
var expresie2 = 7 * (8 % 5)
var total2 =eval(expresie2)// va asigna valoarea 21 variabilei total2
alert(eval(7 + 5)) //afieaz valoarea 75
escape("ir") i unescape("ir") sunt folosite pentru a transforma
caracterele care au o anumit semnificaie n codul HTML. irul va fi
format din simbolul procent %, urmat de 2 cifre ce reprezint codul
caracterului %. Funcia unescape(ir) are efect invers, afieaz
caracterul care are codul %.
De exemplu:
alert(escape("<")) va afia %3C
alert(unescape("%3C") va afia "<"
251
string(valoare_numeric) convertete un numr n ir
De exemplu:
alert(string(3) + string(8)) se va afia 38
alert(string(4.8) + string(3) se va afia 4.83
number("ir") - este funcia care transform un ir n numr. n cazul n
care irul nu se poate converti n ntreg se va returna valoarea NaN (Not
a Number)
De exemplu:
alert(number(7) + number(5.2)) va afia 12.2
alert(number(7ab)) va returna NaN
17.2.5. Recursivitate
Recursivitatea este o tehnic important de programare. Ea const n
apelarea funciei n corpul ei. Un exemplu este codul factorialului:
<HTML>
<HEAD>
<TITLE>Funcii recursive</TITLE>
function fact(n)
{
if(n==0)
return 1
else
return fact(n-1)*n
}
</SCRIPT>
<BODY>
n=parseInt(prompt("dati n= ",0))
alert(n+"! = "+ fact(n))
</SCRIPT>
</BODY>
</HTML>
Figura 17.15. Funcii recursive
252
18. OBIECTE
n limbajele de programare orientate pe obiect, deci i n JavaScript,

elementele de baz sunt obiecte. Un obiect este un lucru din lumea nconjurtoare.
Obiectele sunt n esen colecii de proprieti i metode. Proprietile sunt valori,
iar metodele funcii. La membrii unui obiect (proprieti i metode) ne putem referi
ori prin numele obiectului, punct i numele proprietii sau metodei, sau cu ajutorul
unui tablou, astfel:
nume_obiect.nume_proprietate/metoda
nume_obiect[proprietate/metoda]
Obiectele pot avea instane, atunci cnd proprietile lor au valori. De

exemplu, obiectul numr complex poate avea instan un numr complex
particular. n JavaScript exist obiecte create de utilizator, obiecte intrinseci i
obiecte ale browser-ului. Obiectele browser-ului sunt obiecte care implic
intervenia browser-ului, ca de exemplu, obiectul document i windows, care vor fi
tratate n capitolul 20.
18.1. Obiecte create de utilizator

n JavaScript exist trei metode de a crea obiecte.
1. Construcia obiectelor folosind funcia prototip
Din teoria limbajelor de programare orientate pe obiect se cunoate
faptul c obiectele se pot crea cu funcii prototip, numite i constructori.
Un constructor este invocat folosind operatorul new, care rezerv spaiu de
memorie pentru obiect i returneaz adresa spaiului respectiv de memorie.
De exemplu, declaraia z=new complex(1,2), nseamn c se rezerv
memorie pentru numrul complex 1+2i, i adresa este ncrcat n z, astfel:
1 2
z
Obiectul nou creat se poate invoca cu cuvntul this.
n exemplul urmtor se creeaz i se iniializeaz obiectul vector. Se
invoc obiectul curent prin ambele metode: folosind caracterul ., pentru a ne
253
referi la proprietatea lungime vector, i folosind parantezele drepte [ ], pentru a
ne referi la componentele vectorului obiect.
<HTML> <HEAD>
function Initializare_vect(lung)
{
this.lungime=lung
for(i=0;i<this.lungime;i++); this[i]=0
}
</SCRIPT> </HEAD>
<BODY> <SCRIPT language="JavaScript">
vect=new Initializare_vect(20)
document.write("lungimea vectorului este "+ vect.lungime+ "<BR>")
for(i=0;i<vect.lungime;i++)
document.write(vect[i]+ " " )
</SCRIPT>
</BODY></HTML>
Figura 18. 1. Operatorul new
Se observ c parametrii funciei se transmit prin referin, n sensul c

parametrul este de fapt o adres. n funcie se pot schimba valorile parametrilor.
S considerm exemplul des utilizat n programarea orientat pe obiecte, i
anume acela de creare, modificare i operaii cu numere complexe.
n codul de mai jos se creeaz i se modific un numr complex.
<HTML>
<HEAD>
function complex(a,b)
{
this.real=a; this.imag=b
}
function modific(z)
{
254
z.real= 5 + ++z.real; z.imag=2 + ++z.imag
}
</SCRIPT>
</HEAD>
<BODY>
z = new complex(1,1)
document.write("z.real= " + z.real + " z.imaginar= " + z.imag +"<BR>")
modific(z)
document.write("Dupa modificarea parametrilor"+"<BR>")
document.write("z.real= " + z.real +" z.imag= "+z.imag )
</SCRIPT></BODY> </HTML>
Figura 18. 2. Modificarea parametrilor
n exemplul urmtor se nlocuiete metoda de modificare a unui numr

complex cu metoda de adunare a unui numr complex la altul. n acest caz, prin
z= new complex (1,2) se nelege adresa la care se afl :
1 2 suma()
Codul pentru care obiectul curent reine suma va fi:

<HTML>
<HEAD>
{ this.real=a ;this.imag=b this.suma=suma}
function suma(z)
{
this.real=this.real+z.real
this.imag=this.imag+z.imag
}
</SCRIPT>
255
</HEAD>
<BODY> <B> Metoda 1 de sumare a 2 nr. complexe</B> <BR>
z1 = new complex(1,2)
document.write("z1.real= " +z1.real +"z1.imaginar= " + z1.imag +"<BR>")
document.write("z2.real= " +z2.real +" z2.imaginar= " + z2.imag +"<BR>")
z1.suma(z2)
document.write("suma.real= " +z1.real + " suma.imaginar= "+ z1.imag )
</SCRIPT>
</BODY> </HTML>
18.3. Metoda suma varianta 1
Dac n exemplul de mai sus se dorete ca suma s fie calculat ntr-un nou
obiect, atunci funcia suma() va fi:
<HTML>
<HEAD>
{
this.real=a
this.imag=b
this.suma=suma
}
function suma(z)
{
w = new complex(0,0);
w.real=this.real+z.real
w.imag=this.imag+z.imag
}
</SCRIPT> </HEAD>
<BODY> <B> Metoda 2 de sumare a 2 nr. complexe</B> <BR>
256
document.write("z1.real= " +z1.real + "z1.imaginar= "+ z1.imag +"<BR>")
document.write("z2.real= " +z2.real +"z2.imaginar= " + z2.imag +"<BR>")
z1=z1.suma(z2)
document.write("suma.real= " +z1.real + " suma.imaginar= " + z1.imag )
</SCRIPT>
</BODY>
</HTML>
Figura 18.4. Metoda 2 de sumare
Operatorul new poate fi omis n cazul n care funcia constructor

returneaz obiectul curent. Fcnd aceast modificare n funcia constructor de mai
sus, vom avea codul:
<HTML>
<HEAD>
{
this.real=a ;this.imag=b; this.suma=suma
return this
}
function suma(z)
{
w = new complex(0,0)
w.real=this.real+z.real
w.imag=this.imag+z.imag
return w
}
</SCRIPT> </HEAD>
<BODY> <B> Functia constructor fara operator new </B> <BR>
Figura 18. 4 Metoda 2 de sumare
z1 = complex(2,7)
document.write("z1[real]=" +z1["real"]+" z1[imaginar]= "+z1["imag"]+"<BR>")
257
z2 = complex(1,6)
document.write("z2[real]=" +z2["real"]+"z2[imaginar]="+ z2["imag"]+"<BR>")
z1=z1.suma(z2)
document.write("suma[real]= "+z1["real"]+" suma[imaginar]= "+ z1["imag"])
</SCRIPT> </BODY> </HTML>
Figura 18.5. Funcia constructor returneaz o valoare
2. Metoda de creare a obiectelor utiliznd tipul Object

Un obiect poate fi creat i cu ajutorul tipului Object. S considerm
exemplul din figura 2, n care se modific un numr complex cu ajutorul funciei
modific(). Dac se folosete tipul Object, nu mai este nevoie de funcia constructor
complex(), iar funcia modific() va fi considerat o metod a obiectului creat. Vom
avea astfel codul:
<HTML>
<HEAD>
z=new Object()
z.real=1 ;z.imag=1
z.modific=modific
function modific(z)
{
z.real= 5 + ++z.real
z.imag=2 + ++z.imag
}
</SCRIPT>
</HEAD>
<BODY><B>Tipul Object </B><BR>
document.write("z.real= " + z.real + " z.imaginar= " + z.imag +"<BR>")
z.modific(z)
document.write("Dupa modificarea parametrilor "+" <BR>")
document.write("z.real= " + z.real +" z.imag= " + z.imag )
258
Figura 18.6. Tipul Object
Pentru a afia componentele unui obiect, de exemplu, pentru obiectul

numr complex: real, imag, modific, se pot folosi i instruciunea for n forma:
For(nume_variabil in nume_obiect) n dou variante:
for (i in z) document.write(i+" ") afieaz componentele unui obiect
(numele proprietilor i metodelor)
for (i in z) document.write(z[i] + " ") afieaz valorile proprietilor
i codul surs al metodelor
Astfel, pentru exemplul 2, folosind instruciunea for, codul va fi:
<HTML>
<HEAD>
{
this.real=a
this.imag=b
this.modific=modific
}
function modific(z)
{
z.imag=2 + ++z.imag
}
</SCRIPT>
</HEAD>
<BODY>
<B>FOR pentru afisare proprietati si metode <BR>
FOR pentru afisare valori proprietati si cod sursa pentru metode </B><BR>
var i
259
z = new complex(1,2)
for (i in z) document.write(i+" ")
for (i in z) document.write(z[i] + " ")
modific(z)
document.write("<BR>"+"Dupa modificarea parametrilor" + "<BR>")
document.write("z.real= " + z.real +" z.imag= " +z.imag)
</SCRIPT> </BODY></HTML>
Figura 18.7. Instruciunea For pentru a afia proprieti i metode
3. Metoda de creare a obiectelor folosind o list

Aceast metod const n faptul c obiectului i se atribuie o list de
componente. Componentele sunt incluse ntre acolade i separate prin
virgul, astfel:
Obiect={propr1:val1;propr2=val2;metoda1:nume1, metoda2:nume2, ..}
<HTML>
<HEAD>
z={real:2, imag:3, modific:modific}
function modific(z)
{
z.imag=2 + ++z.imag
}
</SCRIPT>
</HEAD>
<BODY>
<B> Metoda a 3 de construire a obiectelor <BR>
folosind lista pentru declararea proprietatilor si metodelor </B><BR>
260
var i
for (i in z) document.write(i+" ") document.write("<BR>")
for (i in z) document.write(z[i] + " ")
modific(z)
document.write("<BR>"+"Dupa modificarea parametrilor" + "<BR>")
document.write("z.real= " + z.real +" z.imag= " +z.imag)
</SCRIPT></BODY> </HTML>
Figura 18.8. Metoda 3 de construire de obiecte (cu lista de declaraii)
Obiecte Incluse
Un obiect poate include alte obiecte, aa cum include proprieti i
metode. Pentru a accesa componentele unui obiect inclus folosim scrierea:
nume_obiect.nume_obiect_inclus.nume.componenta
<HTML> <HEAD> <SCRIPT language="JavaScript">

{
this.real=a; this.imag=b;this.suma=suma
}
function suma(z)
{
this.real=this.real+z.real
this.imag=this.imag+z.imag
}
function mij_seg(z1,z2)
{
z1.suma(z2)
this.complex=z1
this.complex.imag=z1.imag/ 2 ; this.complex.real=z1.real/2
}
261
</SCRIPT> </HEAD>
<BODY>
var idocument.write("Mijlocul unui segment" + "<BR>")
p1=new complex(4,5)
document.write("primul punct: ".bold()+p1.real+ " "+ p1.imag+"<BR>")
p2=new complex(2,9)
document.write("al doilea punct: ".bold()+p2.real+ " "+ p2.imag+"<BR>" )
m=new mij_seg(p1,p2)
document.write("Mijlocul unui segment: ".bold() + m.complex.real + " " +
m.complex.imag+"<BR>")
</SCRIPT>
</BODY> </HTML>
Figura 18. 9. Accesarea obiectelor incluse
18.2. Obiecte intrinseci

n JavaScript exist mai multe obiecte definite i recunoscute de browser.
n aceast seciune se vor prezenta succint cele mai folosite obiecte intrinseci ale
limbajului JavaScript: Math, String i Array.
18.2.1. Obiectul Math

Obiectul Math conine o serie de proprieti i metode care permit
efectuarea unor calcule matematice. Constantele sunt proprietile obiectului
iniializate. Cele mai utilizate constante sunt : PI (3.14...) i E ( 2,71...).
Metodele obiectului Math sunt funcii matematice, cunoscute ca funcii
implicite ca i n alte limbaje de programare. Aceste funcii returneaz o valoare,
care poate fi numr real, ntreg, natural sau unghi n radiani.
262
Cele mai importante metode ale obiectului Math sunt:
abs(x) returneaz valoarea absolut a numrului real x (modul)
cos (x) returneaz cosinusul numrului x
sin(x) returneaz sinusul numrului x
tan(x) - returneaz tangenta numrului x
acos(x) arccosinus, returneaz unghiul n radiani
asin(x) - arcsin, returneaz unghiul n radiani
atan (x) arctagent, returneaz unghiul n radiani
floor(x) returneaz partea ntreag a numrului real x ([x])
random( ) returneaz un numr aleator n [0,1)
round(x) returneaz cel mai apropiat ntreg de argumentul x
(rotunjurea lui x)
sqrt (x) returneaz radicalul numrului real x
pow (x,y) returneaz x la puterea y
exp(x) returneaz e la puterea x
log(x) returneaz logaritm n baza e din x
Urmtorul exemplu testeaz unele funcii matematice:
<HTML> <HEAD> </HEAD> <BODY>
FUNCTII MATEMATICE - EXEMPLE
alert("Aria cercului de raza 5= " + Math.PI*Math.pow(5,2))
alert("abs(2.5) =" + Math.abs (-2.5 ) )
alert("[1.58]= " + Math.floor (1.58))
alert("[-1.58]= " + Math.floor (-1.58))
alert("Math.logz un numr natural intre 1 i 10")
alert("Math.sqrt(Math.pow((4-8),2)+Math.pow((5-2),2))= " +
Math.sqrt(Math.pow((4-8),2)+Math.pow((5-2),2)) +" lungime segment")
Figura 18. 10. Metode ale obiectului Math
263
Urmtorul exemplu definete o funcie care returneaz modulul unui
numr complex .
<HTML>
<HEAD>
{ this.real=a; this.imag=b; this.modul=modul}
function modul()
{return Math.sqrt(this.real*this.real + this.imag*this.imag)}
</SCRIPT>
</HEAD>
<BODY> <B> Modulul unui numr complex </B> <BR>
z=new complex(3,4)
document.write("z.real= " +z.real + " z.imaginar= " + z.imag +"<BR>")
m=z.modul()
document.write("modulul numarului complex z= " + m)
</SCRIPT>
</BODY>
</HTML>
Figura 18.11. Metoda sqrt a obiectului Math
18.2.2. Obiectul String

Un ir este o colecie de caractere alfabetice, numerice i speciale. n
JavaScript, un ir este o instan a obiectului String. Unui caracter al irului i se
asociaz o poziie. Primul caracter al irului are poziia 0, al doilea 1 etc. Aadar, n
irul de lungime n, ultimul element va avea poziia n-1.
n continuare ne vom ocupa de manipularea irurilor.
Declararea unui ir se poate face n mai multe moduri:

Utiliznd constructorul String() i operatorul new, de exemplu:
var s = new String(Un sir)
Utiliznd constructorul String() , de exemplu:
var s = String(Un sir)
Printr-o instruciune de atribuire: var s = String(Un sir)
264
Ca orice obiect din JavaScript i obiectul String are proprieti i metode.
Proprietatea length reine lungimea irului.
De exemplu, sunt valabile declaraiile:
var s = new String(carte); alert(s.length)
var s = String(carte); alert(s.length)
var s = carte; alert(s.length)
(n toate cazurile de mai sus se va afia 5).
Amintim c pentru concatenarea irurilor se folosete operatorul +.

Concatenarea irurilor a fost de multe ori exemplificat pn acum. De exemplu,
declaraia : document.write(mama+ mare) va afia irul mamamare.
Metodele obiectului String

Cele mai importante metode ale obiectului String vor fi definite i
exemplificate n continuare.
Metoda search(s) caut irul s n ir dat. n cazul n care irul este
gsit metoda returneaz poziia din irul dat al primului caracter al lui s,
iar n caz contrar returneaz 1. De exemplu, secvena urmtoare:
s=String(mamamare); alert(s.search(ma)) are ca efect afiarea
valorii 0, adic poziia primei apariii a irului ma n irul dat.
Metoda charAt(indice) - returneaz caracterul de pe poziia indice a
unui ir. Metoda se poate folosi pentru a copia un caracter de la un ir la
altul. De exemplu, pentru a forma o adres de email, din primul caracter
al numelui i al prenumelui, urmat de irul @yahoo.com, avem codul:
<HTML>
<HEAD> </HEAD>
<BODY>
nume = new String("Niculescu")
prenume = String("Rodica")
email = prenume.charAt(0) + nume.charAt(0) + "@yahoo.com"
document.write("adresa de email este: " + email)
Figura 18.12. Metoda charAt()
265
Metoda split(delimitator) creeaz un vector, a crui elemente vor fi
subiruri ale irului dat, obinute de un ir delimitator. Astfel, din irul:
s = 7, 35, 12, 67, 2007 , se va obine vectorul v=(7,35,12,67,2007).
n exemplul urmtor se folosete ca delimitator irul ,.
s =new String('7 , 35 , 12 , 67 , 2007')
document.write("sirul dat este: " + s + "<BR>")
v=s.split(",")
document.write("vectorul creat este: " + "<BR>")
for(i=0;i<v.length;i++)
document.write(v[i] + " ")
</SCRIPT </BODY> </HTML>
Figura 18.13. Metoda split()
Metoda slice(poz1,poz2) returneaz subirul cuprins ntre cele dou

poziii, incluznd caracterul de pe poz1, dar nu conine caracterul de pe
poziia poz2.
Metoda substring(poz1,poz2) are exact acelai efect ca metoda
slice(poz1, poz2).
Metoda substr(poz,lung) returneaz tot un subir (ca i cele dou
metode de mai sus), care ncepe de pe poziia poz si are lungimea lung.
Exemplul urmtor probeaz cele trei metode:
s = String("slice substring substr")
document.write("sirul dat este: " +"<B>" +s+ "</B>" + "<BR>")
document.write("metoda de substragere a unui sir aflat pe pozitiile:
[poz1..poz2) este: "
+ "<B>" + s.slice(0,5) +"</B>" + "<BR>")
document.write("metoda de substragere a unui sir aflat pe pozitiile:
[poz1..poz2) este: "
266
+ "<B>" + s.substring(6,15) + "</B>" + "<BR>")
document.write("metoda de substragere a unui sir de n caractere din
pozitia poz este: "
+ "<B>" + s.substr(16,6) + "</B>" + "<BR>")
Figura 18.14. Metodele slice(), substring() i substr()
Metoda replace(sir1,sir2) returneaz un ir n care s-a nlocuit prima

apariie a lui ir1 cu ir2.
s = String("Univ. Matematica - Informatica Univ. Spiru Haret")
document.write("sirul dat este: "+ "<B>" + s +"</B>" + "<BR>")
document.write("sirul nou este: "+ "<B>" +
s.replace("Univ.","Facultatea") +"</B>" + "<BR>")
</SCRIPT>
</BODY> </HTML>
Figura 18.15. Metoda replace()
267
Urmtoarele trei metode sunt de conversie a irurilor n numere i invers.
Ele au mai fost definite, fiind utile n unele exemplificri.
Metoda parseInt(s) i metoda parseFloat(s) - convertesc un ir la un
numr ntreg, respectiv zecimal. De exemplu, atunci cnd introducem
date cu prompt( sir_numeric,val_initiala) se returneaz o valoare
de tip ir. Pentru a o putea folosi n calcule matematice se folosete una
din metodele de mai sus, astfel:
parseInt(prompt(sir_numeric,val_initiala)) .
De exemplu: parseInt(prompt( dati dimensiune sirului, ))
Metoda toString(n) convertete o valoare de tip string n numr.
Aceast metod este automat apelat n cazul concatenrii irurilor.
De exemplu, n declaraia: document.write(suma = + s), numrul s va
fi considerat string.
Urmtoarele ase metode se refer la font (dimensiune, culoare), stil (bold,
italic) i efecte (scriere cu litere mari sau mici).
Metoda fontcolor(culoare) returneaz irul ntre tag-urile <font
color=culoare> i </font> i textul va apare cu culoarea culoare.
Metoda fontsize(dim) returneaz irul ntre tag-urile <font
size=dim> i </font> i textul va fi scris de dimensiune dim.
Metoda bold() - returneaz irul ntre tag-urile <B> i </B> i n
document textul va apare boldit.
Metoda italics() returneaz irul ntre tag-urile <I> i </I> i n
document textul va apare italic.
Metoda toUpperCase() returneaz irul scris cu majuscule.
Metoda toLowerCase() returneaz irul scris cu litere mici.
Se probeaz metodele de mai sus n exemplul de mai jos.
Se introduce un ir i se testeaz dac este alfabetic, adic conine litere i
eventual caracterul spaiu. Pentru a evita o testare n plus se transform irul n
majuscule sau n litere mici. Se folosesc operatorii logici: ! (negare logic),
&&(i logic) i || (sau logic), introdui n capitolul 16.

var ras=true
s=prompt ("Introduceti sirul", " ")
alert(s.fontcolor("red"))
document.write(s.fontcolor("red")+"<BR>")
s=s.toUpperCase( )
document.write("Sirul scris cu majuscule:".fontsize("5")
+"<BR>"+ s.fontsize("5") +"<BR>")
for (i=0; i<s.length; i++)
if (! (s.charAt(i) >= "A" && s.charAt(i)<="Z" || s.charAt(i) == " "))
ras=false
268
if (ras) document.write("Sirul este alfabetic".fontcolor("blue") )
else document.write("Sirul NU este alfabetic".fontsize("6"))
</SCRIPT>
</BODY> </HTML>
Figura 18.16. Metodele toUpperCase(), fontsize(), fontcolor()
18.2.3. Obiectul Array

n JavaScript, un masiv n dimensional este un obiect de tip Array . De
obicei se lucreaz cu vectori, dar se va arta cum se pot defini si matrice de diferite
dimensiuni.
Un tablou are un nume unic, iar elementele tabloului se identific printr-un
indice. S-a artat n seciunea 18.1 c ne putem referi la membrii (proprieti i
metode) unui obiect prin:
nume_obiect.proprietate/metod
nume_obiect[proprietate/metod]
nume_obiect[index_proprietate/metod]
Amintim c pentru orice lucru indexat (proprieti i metode, elemente de
tablou, caracterele unui ir), numerotarea indecilor ncepe de la 0. Avnd n
vedere cele de mai sus, urmtoarele afirmaii sunt corecte:
z[imag]
z[imag]
z[1]
Declararea unui tablou

Pentru a declara un tablou se folosete constructorul Array( ) i operatorul
new ntr-o declaraie de forma:
[var] nume_vector = new Array() ([ ] are caracter opional n declaraii)
269
Constructorul Array() este de fapt o metod de creare a unui obiect de tip
tablou.
Accesarea elementelor unui vector se face cu nume_vector[indice].
Iniializarea i afiarea unui tablou

Prin declararea unui tablou se aloc memorie tabloului, dar nu conine nc
elemente. Pentru a crea elemente tabloului, acesta trebuie iniializat, sau se atribuie
valori prin instruciuni de atribuire n program.
Componentele unui tablou pot s nu aib toate aceleai tipuri de valori.
Iniializarea unui tablou se poate face n dou moduri:
1. iniializnd fiecare element, ca n exemplul urmtor:
v= new Array()
v[0]= produs; v[1]=10; v[2]= 25.5; v[3]= false; v[4]= 19%
2. declarnd o list de argument, astfel:
v= new Array(produs, 10, 25.5, false, 19%)
n exemplul urmtor se creeaz un vector cu n componente, se iniializeaz

i se afieaz.
<HTML>
<HEAD> </HEAD>
<BODY> <B> Initializarea si afisarea unui vector </B> <BR>
n=parseInt(prompt("Dim. vect n= ", 0))
v= new Array()
for(i=0;i<n;i++)
v[i]=parseInt(prompt("v[" +i +"]=", 0))
document.write("Vector dat:"+"<BR>")
for(i=0;i<n;i++)
document.write(v[i]+" ")
</SCRIPT>
</BODY> </HTML>
Figura 18. 17. Iniializarea unui vector

Cum un obiect poate avea ca proprieti alte obiecte (obiecte incluse),
putem declara tablouri cu mai muli indici. De exemplu, accesarea unui element al
270
unui tablou bidimensional se face cu a[i][j]. ncercarea de a accesa elementele unei
matrice n modul a[i, j] este eronat.
n urmtorul exemplu se creeaz o matrice a crei elemente sunt produsele i*j.
<BODY> <B> Matrice cu elementele a[i][j]= i*j </B> <BR>
var i,j
a= new Array(n)
for(i=0;i<n;i++)
a[i]= new Array(n)
for(i=0;i<n;i++)
for(j=0;j<n;j++)
a[i][j]=( i*j)
for(i=1;i<n;i++)
{for(j=1;j<n;j++)
document.write(a[i][j] + " " ); document.write("<BR>") }
Figura 18. 18. Iniializarea unei matrice
Lungimea unui vector

Proprietatea length a obiectului tablou reine numrul de elemente ale unui
vector .
n JavaScript nu este limitat numrul de componente ale unui tablou. De
exemplu, dac avem un vector cu 5 elemente, se poate crea un element, fie acesta
v[10], fr a crea toate elementele pn la el, astfel:

<BODY> <B> Proprietatea length</B> <BR>
document.write("sirul dat este: ".fontsize(5)+ "<BR>")
v= new Array( 1 , 2 , 3 , 4 , 5 )
for(i=0; i<5; i++)
271
document.write( "<BR>"+"se adauga un element v[10]= 11"+"<BR>")
v[10]=11
document.write("lungimea sirului este: ".bold()+ v.length)
Figura 18. 19. Proprietatea length
Metodele obiectului Array

Cele mai importante metode ale obiectului Array sunt definite i
exemplificate n continuare:
Metoda sort( ) sorteaz, n ordine lexicografic, elementele unui tablou
(aceastea sunt tratate ca iruri de caractere).
n exemplul urmtor se sorteaz lexicografic un ir. Carecterele irului se
trec ntr-un vector, care accept metoda sort() pentru sortarea
lexicografic. n final se reconstituie irul din elementele vectorului.
<BODY> <SCRIPT language="JavaScript">
s=prompt ("Introduceti sirul", " ")
document.write("sirul dat este".bold() + s.bold() +"<BR>")
s=s.toLowerCase( )
v= s.split(";");v.sort(); s=" "
for (i=0; i<v.length; i++)
s+=v[i]+" , "
document.write("Sirul sortat lexicografic este: ".italics() + s.italics())
272
n cazul n care vectorul este numeric, se observ c metoda sort
ordoneaz lexicografic (de exemplu, 2007<345)
Figura 18. 20. Metoda sort()
Pentru a sorta un vector numeric, cresctor sau descresctor, se folosete

un algoritm de sortare cunoscut, de exemplu metoda bulelor
<BODY> <B> Sortarea unui vector </B> <BR>
v= new Array()
for(i=0;i<n;i++)
v[i]=parseInt(prompt("v[" +i +"]=", 0))
document.write("Vector dat:"+"<BR>")
for(i=0;i<n;i++)
document.write("<BR>")
do
{ sortat=false
pas=1
for(i=0; i<(n-pas); i++)
if(v[i]>v[i+1])
273
{ aux=v[i]; v[i]=v[i+1]; v[i+1]=aux; sortat=true}
pas=pas+1 }
while(sortat)
document.write("Vector sortat crescator:"+"<BR>")
for(i=0;i<n;i++)
Figura 18. 21. Vector sortat prin metoda bulelor
Metoda reverse() realizeaz inversarea elementelor unui vector.

Metoda shift() terge primul element al unui tablou i apoi mut
elementele unui tablou cu o poziie spre stnga.
Metoda push(val_elem) adaug la sfritul unui tablou un nou
element.
Metoda pop() terge ultimul element dintr-un tablou.
S considerm exemplul din figura 18.19 i s aplicm metodele:

reverse(), shift(), push() i pop().

<BODY> <B> reverse(), shift(), push() i pop()</B> <BR>
document.write("Sirul dat este: ".fontsize(5)+ "<BR>")
v= new Array( 1 , 2 , 3 , 4 , 5 )
for(i=0; i<5; i++)
v.reverse()
document.write("<BR>"+"Sirul inversat este( reverse):".bold()+"<BR>")
for(i=0; i<5; i++)
document.write("<BR>"+"Sirul fara primul elemet(shft):"bold()+"<BR>")
v.shift()
274
for(i=0; i<v.length; i++)
document.write("<BR>"+"Un nou ultimul elemet(push):".bold()+"<BR>")
v.push("23")
document.write("<BR>"+"Sir fara ultimul elemet(pop):.bold()+"<BR>")
v.pop()
Figura 18.22. Metodele reverse(), shift(), puch() i pop()
275
19. Interaciune JavaScript HTML
n capitolul 17 seciunea 17.2 (Funcii n JavaScript), s-a artat modul de

apelare a unei funcii definite ntr-un script, folosind sintaxa:
nume_funcie([parametri]).
n acest capitol vom arta c funciile pot fi apelate din codul HTML al
paginii. Mecanismul care permite acest lucru este acela de tratare a evenimentelor.
De exemplu, evenimente pot fi: ncrcarea i descrcarea unei pagini web de ctre
browser, evenimente numite onload, respectiv onunload sau la executarea unui clic
pe un buton are loc evenimentul onclick.
Conceptul de tratare a evenimentelor const tocmai n crearea de funcii
care s reacioneze la evenimentele importante.
n JavaScript exist 18 evenimente, o parte dintre acestea urmnd s fie
descrise n continuare. Un obiect recepioneaz anumite evenimente, exemplu:
elementul HTML <BUTTON atribute>, n JavaScript e considerat obiectul
BUTTON. El poate recepiona evenimentul onclick (clic cu mouse-ul pe suprafaa
lui). n urma acestui eveniment se poate lansa o funcie.
Apelarea unei funcii ca rspuns la un eveniment se face ca valoare a unui
atribut a unui tag HTML. Structura apelului de funcie prin cod este:
<nume_tag atribut=nume_functie() >
n JavaScript tag-urile sunt obiecte, atributele pot fi evenimente, valorile
atributelor pot fi proprieti.
n cazul nostru, considerm o funcie Hello( ), pe care o apelm ca atribut
al elementului <BUTTON>, astfel:
<HTML> <HEAD> <SCRIPT language="JavaScript">
function Hello()
{alert("Salutare")}
</SCRIPT></HEAD>
<BODY>
<BUTTON onclick=Hello()> Click! </BUTTON>
</BODY>
</HTML>
276
Figura 19.1. Apel funcie prin cod HTML
19.1. Legtura ntre JavaScript i HTML

n aceast seciune vom arta cum se folosesc elementele HTML ca
obiecte JavaScript. n capitolele 1-12 s-au introdus elementele HTML, dar nu s-au
introdus evenimentele, deoarece nu era introdus JavaScript, care trateaz
evenimentele.
Legtura dintre HTML i JavaScript poate fi sintetizat n urmtorii pai:
Elementele HTML au atribute care caracterizeaz elementul respectiv.
De exemplu, elementul TABLE are atributele: border, width, height,
align,valing, cellspacing, cellpadding, bordercolor, bgcolor, rules,
frame. Majoritatea elementelor HTML (excepie: body, head, html,
base, basefont) au atributul ID, sau NAME, dup care elementul poate fi
identificat.
Sintaxa elementelor HTML este
<element atribut1 = valoare1 .atribut n=valoare n) [.]</element>
n HTML nu se face distincie ntre literele mari i cele mici
cnd scriem atribute, de exemplu atributul border sau BORDER sau
Border semnific acelai lucru.
n HTML exist 18 tipuri de evenimente : onclick, onload, onunload,
ondblclick, onmouseover, onmouseout, onmousemove, onmouseup,
onmousedown, onfocus, onlbur, onkeypress, onkeydown, onkeyup,
onselect, onchange, onsubmit, onreset.
O componenta HTML poate recepiona anumite evenimente, de
exemplu elementul button, poate recepiona onclick, ondblclick.
Pentru JavaScript, elementele HTML sunt obiecte. Atributele
componentelor HTML sunt n JavaScript, proprietile obiectelor. n
timpul afirii unei pagini web, proprietile obiectelor pot fi modificate
dinamic ntr-un script.
O component HTML este o instan a unui obiect. De exemplu, dac
avem ntr-o pagin web urmtorul tag:
<IMG ID=poza SRC=p1.jpg>
elementul IMG devine obiectul IMG
o component a obiectului IMG este poza
277
atributul src din HTML devine proprietatea src a obiectului poza.src
p1.jpg este valoarea atributului src din HTML, i valoarea
proprietii src a obiectului poza.src
n JavaScript se face distincie ntre litere mari i mici, aa c atributul
SRC din HTML trebuie scris ca proprietate n JavaScript cu litere mici.
Evenimentele pot fi recepionate de anumite componente (asa cum am
mai precizat).
Executarea unui eveniment lanseaz n execuie o funcie scris ntr-un
script. Apelul funciei se face n cadrul codului HTML, ca atribut al unui
element HTML. De exemplu, pentru evenimentele onload (ncarcarea) i
unload (descrcarea) unei pagini web, se creeaz dou funcii, aa cum
reiese din exemplul de mai jos:
<HTML> <HEAD>
<TITLE>Apel funcie din HTML</TITLE>
function salutare() {alert ("Bun, sunt Ana Ionescu")}
function la_revedere() {alert ("Pa, ne mai auzim la telefon")}
</SCRIPT> </HEAD>
<BODY onload="salutare()" onunload="la_revedere()">
</BODY>
</HTML>
Figura 19.2. Evenimentele onload i unload
19.2. Funciile setTimeout() si clearTimeout()

n capitolul 16 s-au prezentat unele metode ale obiectului WINDOW i
anume: alert()i prompt(). n aceast seciune se vor prezenta alte dou metode ale
obiectului window: setTimeout() i clearTimeout(). Aceste funcii se vor prezenta
nainte de a prezenta obiectul window, deoarece se vor utiliza n exemplele ce vor
urma.
Aceste funcii se folosesc pentru a face paginile web animate, adic
afiarea n aceeai poziie a mai multor secvene text sau imagine, care s
staioneze un anumit interval de timp.
278
Funcia setTimeout realizeaz o pauz dup afiarea unei secvene, pn
la reluarea afirii. Funcia are 2 parametri: primul este numele funciei, apelat la
pauz, iar al doilea parametru este lungimea pauzei n milisecunde.
Funcia setTimeout() returneaz o referin, o valoare care este folosit ca
parametru pentru funcia clearTimeout(). Sintaxa funciei setTimeout() este:
ref = setTimout(nume_funcie, nr_milisecunde)
De exemplu, s presupunem c introducem un buton n pagin. La
apsarea butonului se va lansa o funcie care are inclus funcia setTimeout(), care
execut funcia la fiecare 2 secunde. Execuia funciei se va ncheia odat cu
nchiderea ferestrei.
<HTML><HEAD>
function Mesaj(){
alert("Mesajul va fi afiat la 2 secunde")
ref = setTimeout("Mesaj",2000)}
</SCRIPT></HEAD>
<BODY>
<INPUT TYPE="BUTTON" value = "Click!" onclick = "Mesaj()">
</BODY></HTML>
Figura 19.3. Funcia setTimeout()
Funcia clearTimeout() este tot o funcie predefinit, o metod a obiectului

window. Aceasta funcie are ca intrare (parametru) valoarea returnat a funciei
setTimeout() (n exemplul de mai sus valoarea returnat este ref). Efectul funciei
este de a ntrerupe execuia funciei din parametrul funciei setTimeout() la cerere,
nu la nchiderea ferestrei, aa cum se ntmpl n lipsa acestei funcii.
Utiliznd funcia clearTimeout, utilizatorul unei pagini poate da orice alt
comand, ntrerupnd execuia funciei la trecerea intervalului de timp
nr_milisecunde.
Dac dorim ntreruperea execuiei funciei Mesaj() din exemplul de mai
sus, naintea nchiderii ferestrei folosim funcia clearTimeout(). Aceast funcie
este inclus ntr-o funcie Oprire(ref) care se lanseaz cnd butonul STOP este
apsat. Exemplul de mai sus cu adugarea funcie clearTimeout(ref) este:
279
<HTML><HEAD>
function Oprire()
{clearTimeout(ref)}
function Mesaj()
{alert("Mesajul va fi afiat la 2 secunde")
ref = setTimeout("Mesaj",2000) }
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="BUTTON" value = "click!" onclick = "Mesaj()">
<INPUT TYPE="BUTTON" value = "STOP" onclick = "Oprire()">
</BODY>
</HTML>
Figura 19.4. Funcia clearTimeout()
n exemplul urmtor dorim ca un buton s afieze alternativ 2 mesaje

diferite la un interval de timp dat, de exemplu la 2 secunde.
<HTML><HEAD>
function Afiseaza() {
alert("Butonul iniial apsat")}
function Schimba() {
if (but.value == "mesaj_1")
but.value = "mesaj_2"
else
but.value="mesaj_1"
setTimeout("Schimba()",2000) }
</SCRIPT></HEAD>
<BODY onload = Schimba()>
<INPUT type="button" id="but" value=mesaj_1 onclick="Afiseaza()">
</BODY></HTML>
280
Figura 19.5. Valori alternative ntr-o poziie
n HTML cele mai importante elemente care recepioneaz evenimente

sunt elementele <FORM> i <IMG>. Vom descrie n continuare aceste elemente,
ce evenimente recepioneaz, ce proprieti i metode au.
19.3. Elementul <FORM> n JavaScript

n capitolul 10 s-a descris modul de realizare al unui formular. n acest
capitol se presupune c tim semnificaia elementelor unui formular i vom descrie
tratarea evenimentelor recepionate de elementele unui formular. Amintim c un
formular conine mai multe elemente, numite i controale: casete de text, casete de
validare, butoane radio i liste de opiuni. Programele de pe server care prelucreaz
datele unui formular se numesc, dupa cum s-a spus n capitolul 10, programe .CGI
(Common Gateway Interface).
Programele CGI sunt scrise n limbaje ca: PHP, JSP, PERL, ASP, care pot
reaciona la nevoie cu programe nonweb (baze de date, aplicaie windows etc.)
necesare prelucrrii formularelor.
Majoritatea elementelor unui formular au atributele name, care identific
elementul n formular i value, care atribuie o valoare prestabilit elementului. n
metoda gate, datele se transmit n pereche (nume, valoare).
Elementele unui formular pot fi folosite ntr-o pagin ca atare, fr a fi
strnse ntr-un formular. Tag-urile INPUT, SELECT, TEXTAREA din HTML vor
deveni obiectele Input, Select, Textarea n JavaScript.
281
n JavaScript se pot valida informaiile introduse n paginile web, precum
i schimbarea dinamic a unui formular n timp ce acesta este afiat, putem activa
sau dezactiva elemente, se poate stabili o valoare prestabilit etc.
Un element al formularului devine un obiect n JavaScript. Un atribut al
elementului devine o proprietate a obiectului. Evenimentele se introduc ca
proprieti crora li se asociaz apelul funciei, care se va executa cnd se produce
evenimentul (clic pe un buton, selectarea unui buton radio, selectarea elementelor
unei liste sau mutarea cursorului pe un element etc.).
Cnd un element al formularului este selectat (dac este un edit, apare
cursorul de editare, dac este un buton, el se scufund) se spune ca el primete
focus-ul.
Evenimentul onfocus are loc cnd elementul primete focus-ul.
Evenimentul onblur are loc cnd elementul pierde focus-ul. Cnd
utilizatorul mut cursorul n afar, ieirea din afara ateniei se mai
numete i out of focus
Nu toate elementele pot primi focus-ul, de exemplu IMG. De obicei l
primesc elementele care permit utilizatorului s scrie ceva, excepie fcnd
butoanele.
19.3.1. Validarea datelor

n exemplul de mai jos se valideaz dac ntr-un ir apare un caracter
anume. S presupunem c dorim s introducem o caset de text NUME cu numele
i prenumele unei persoane de forma nume_prenume. Se testeaz dac apare
caracterul underscore (_).
<HTML>
<HEAD>
<TITLE>Onblur</TITLE>
function validare_nume (numele)
{var ind=numele.search ("_")
<!sau var ind=numele.indexOf(_)-->
if (ind==-1)
alert ("Nume incorect introdus")}
</SCRIPT>
</HEAD>
<BODY>
<FORM action="" method="psd")
Nume: <input type="text" name="nume_pren"
onblur="validare_nume(this.value)"><BR>
<input type="submit" name="submit" value="submit">
</FORM></BODY></HTML>
282
Figura 19.6. Evenimentul onblur
Dup introducerea numelui, evenimentul onblur lanseaz funcia

validare_nume ( ) creia i se transmite valoarea this.value. Aceasta nseamn c
obiectul this se refer la obiectul curent, n cazul nostru nume_pren, iar
proprietatea value este valoarea introdus de utilizator.
Din seciunea 17.3 se cunoate faptul ca funciile search(x) i indexOf (x)
returneaz poziia unui caracter ntr-un sir. Dac irul nu conine caracterul x,
funciile returneaz -1. Variabila IND ia valoarea -1 dac simbolul _ nu se
gsete n nume_utilizator.
19.3.2. Obiectele din Formular

Tot ce se poate vedea pe un site web sunt obiecte. Primul obiect este
fereastra, care n JavaScript este obiectul window, care are ca metode: alert,
prompt, confirm ( ) etc. O fereastr conine un obiect document care are printre
metode write etc. Un document poate avea unul sau mai multe formulare i un
formular poate avea unul sau mai multe elemente.
Obiectele formular sunt stocate ntr-un tablou, numit forms, unde ordinea
n tabel este ordinea n care apar formularele n script. n tabel, numrtoarea
componentelor ncepe cu 0. Dac dorim s ne referim la formularul 2, scriem:
[window.]document.forms[1] (unde [] are caracter opional.
283
Dac formularul are un nume, se poate face referirea prin nume, nu prin
indice:
[window]document.forms.test.nume_obiect_form.value
ne referim la valoarea elementului nume al formularului test.
De exemplu, vrem s afim valoarea butonului submit:
<HTML>
<HEAD>
function afisare_submit() {
alert ("Valoare buton transmitere:
"+document.forms.test.submit.value)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM method="post" name="test">
Nume:<input type="text" name="Fnume"><br>
Email:<input type="text" name="Email"><br>
<input type="submit" name="submit" value="Transmit"
onclick="afisare_submit()">
Figura 19. 7. Valoare element formular
19.3.3 Utilizarea evenimentului onchange

O alt metod de a anima o pagin sau un formular const n completarea
automat a unor csue cu informaii n funcie de informaiile din alte elemente,
deja introduse. Aceast metod poate fi realizat cu evenimentul onchange, care
este executat cnd un element pierde focus-ul (iese din atenie) i valoarea
elementului s-a modificat de la intrarea n atenie (primete focus).
S presupunem c introducem patru csue de text, care conin informaii
despre: nume_produs, cantitate, pret/buc i valoarea pltit. Dorim s completm
automat valoarea pltit pe baza informaiilor introduse n csuele cantitate i pre.
284
Valoarea pltit va consta din produsul dintre cantitate i pre. Obiectele
CANTITATE i PRET capteaz (recepioneaz) evenimentul onchange (tag-ul
INPUT are atributul onchange) care apeleaz funcia calcul_valoare().
Codul pentru acest exemplu este dat n continuare:
<HTML>
<HEAD>
function calcul_valoare() {
if (produse.cant.value.length > 0
&& produse.pret.value.length > 0)
{
produse.val.value = produse.cant.value * produse.pret.value
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="produse">
NUME_PRODUS: <INPUT type="text" name="Produs"><BR>
CANTITATE: <INPUT type="text" name="cant"
onchange="calcul_valoare()"><BR>
PRET: <INPUT type="text" name="pret"
onchange="calcul_valoare()">
<BR>
VALOARE: <INPUT type="text" name="val"><BR>
Figura 19.8. Evenimentul onchange
Evenimentul onchange poate fi utilizat i pentru schimbarea, n mod

dinamic, a valorilor atributelor elementelor unei pagini.
285
Astfel, s presupunem c avem un formular completat, iar n cazul n care
dorim s facem o schimbare n datele introduse putem folosi evenimentul
onchange. S considerm un formular cu date despre Universitate. Dac
modificm unul din elementele formularului, de exemplu, numrul de telefon sau
adresa, evenimentul onchange apeleaz o funcie care evideniaz prin formatare
elementul modificat. Codul pentru acest exemplu este:
<HTML><HEAD>
function formatare(obiect) {
obiect.style.color = "red"
obiect.style.background = "cyan"
obiect.style.fontStyle = "italic"
obiect.style.fontWeight = "bold" }
</SCRIPT></HEAD>
<BODY><PRE>
UNIVERSITATE: <INPUT type="text" name="univ" value="Spiru Haret"
onchange = "formatare(this)">
TELEFON: <INPUT type="text" name="tel" value="(021) 314 9431"
onchange="formatare(this)">
ADRESA: <TEXTAREA rows=2 cols=30 wrap="off"
onchange="formatare(this)">Str. Ioan Ghica nr. 13, sector 3, Bucureti,
ROMANIA</TEXTAREA>
EMAIL: <INPUT type="text" name="mail" value="info@spiruharet.ro"
onchange="formatare(this)">
</PRE>
</BODY><HTML>
Figura 19.9. Schimbarea valorilor atributelor
286
n exemplul de mai sus se observ c dac se face o modificare asupra unei
csue de text, dup mutarea cursorului pe alt zon dect cea modificat (out of
focus), informaiile din csua modificat vor fi formatate conform funciei
formatare(obiect) cu culoarea roie, fundal cyan, italic i bold.
19.3.4. Evidenierea seleciei csuelor de validare, utiliznd JavaScript

Csuele de validare sunt utilizate (aa cum s-a artat n capitolul 10
Formulare) pentru a selecta unul sau mai multe articole dintr-un set de articole.
Casuele de validare multipl sunt de tipul checkbox n html.
Valoarea checkbox a atributului type a tag-ului INPUT se poate asocia i
cu atributele name, value i checked. Atributul checked, care n JavaScript este
proprietatea checked, are o valoare boolean: true dac proprietatea exist i false
n caz contrar.
n exemplul care urmeaz, considerm un set de articole electro-casnice
care exist ntr-un magazin. Se vor bifa cele care exist la o anumit dat n stoc.
Funcia Stoc() evalueaz fiecare csu de validare, iar elementele bifate vor fi
afiate ntr-o csu de avertizare (cu ajutorul funciei alert). Se va folosi un buton,
Testare, care recepioneaz evenimentul onclick, care are ca valoare apelul funciei
Stoc(). Codul HTML va fi:
<HTML><HEAD>
<TITLE><CHECKBOX></TITLE>
function stoc() {
var stoc_existent = "Produse existente n stoc: "
for (i=0; i<= Articole[i].lenght; i++)
if (Articole[i].checked == true)
stoc_existent+="Articole[i].value"
alert(stock_existent)
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="checkbox" name="Articole" value=1>FRIGIDER<BR>
<INPUT type="checkbox" name="Articole" value=2>MAIN DE
SPLAT<BR>
<INPUT type="checkbox" name="Articole" value=3>TELEVIZOR<BR>
<INPUT type="checkbox" name="Articole" value=4>ASPIRATOR<BR>
<INPUT type="checkbox" name="Articole" value=5>ROBOT DE
BUCTRIE<BR>
<INPUT type="button" name="testare" value="Ok" onclick="stoc()">
</BODY>
</HTML>
287
Figura 19.10. Obiectul checkbox
19.3.5. Listele de opiuni schimbate dinamic cu ajutorul butoanelor radio,

folosind JavaScript
Amintim c n HTML, listele de opiuni se introduc cu tag-urile

<SELECT></SELECT> i <OPTION></OPTION>.
Cum atributele unui tag HTML devin proprietile obiectului n JavaScript,
putem spune c obiectul SELECT are proprietile: name, multiple (n cazul n care
sunt selectate mai multe elemente din list), size (n cazul afirii mai multor
elemente din list), options (vector de obiecte OPTION), selectedIndex (reine
indexul opiunii selectate).
Obiectul OPTION are proprietile: value i selected (care ia valoarea true
dac opiunea este selectat).
Butoanele Radio se folosesc pentru a selecta o opiune din mai multe. Dac
mai multe butoane au acelai nume, ele aparin unei selecii i se exclud unul pe
cellalt.
n acest caz, ne referim la butoane n JavaScript prin:
nume[i].proprietate
nume[i].metod()
unde i = 0, .., n -1 pentru n opiuni de butoane.
Obiectul Radio are proprietile: name, type, value i checked (butonul este
selectat).
Pentru exemplificare, s presupunem c dorim s afim alternativ dou
liste, n funcie de butonul selectat: universiti de stat i universiti particulare.
Listele au 4 elemente, vizibile dou i se pot selecta mai multe elemente
din fiecare list.
Listele conin denumirea unor universiti de stat i particulare.
288
<HTML>
<HEAD>
<TITLE>CKECKBOX</TITLE>
function Selectie()
{
var i; Selectie=" "
for (i=0; i<Lista.length; i++)
if (Lista.options[i].selected==true)
Selectie +="Optiunea " + (i+1) +"; "
alert(Selectie)
}
function schimba_lista(buton)
{
if(buton == 1)
{
Lista.options[0].text= "Univ. Bucuresti"
Lista.options[0].value=1
Lista.options[1].text= "Univ. Politehnica"
Lista.options[2].text= "Univ. Studii Economice"
Lista.options[3].text= "Univ. Arhitectura"
}
if(buton ==2)
{
Lista.options[0].text="Spiru Haret"
Lista.options[1].text= "Dimitrie Cantemir"
Lista.options[2].text= "Romano-Americana"
Lista.options[3].text= "Titus Maiorescu"
}
}
</SCRIPT>
</HEAD>
<BODY >
<SELECT name="Lista" multiple size=2>
<OPTION value=1> Univ. Bucuresti
<OPTION value=2> Univ. Politehnica
<OPTION value=3> Univ. Studii Economice
<OPTION value=4> Univ. Arhitectura
289
</SELECT><BR>
<INPUT type="radio" name="Univ" value=1
onclick="schimba_lista(this.value)"> Univ. Stat
<INPUT type="radio" name="Univ" value=2
onclick="schimba_lista(this.value)"> Univ. Particulare
<BR><BR><BR>
<INPUT type="button" name="Selectie" value="Ce s-a selectat?"
onclick="Selectie()">
</BODY> </HTML>
Figura 19.10. Obiectul Radio
19.3.6. Trimiterea unui formular, utiliznd evenimentul onsubmit

Pentru a modifica unele elemente dintr-un formular, dup ce acesta a fost
trimis programului de scriptare CGI n vederea prelucrrii, se poate folosi
evenimentul onsubmit, ca atribut al elementului SUBMIT.
Dac dorim, de exemplu, s validm datele dintr-un formular sau s
corectm unele informaii introduse, se poate asocia o funcie n JavaScript
evenimentului onsubmit.
n exemplul urmtor, considerm o funcie creeaza_parola(), care creeaz
un element de tip ascuns (tipul hidden introdus n capitolul 10), numit parol, din:
prima liter a numelui i a prenumelui i din lungimea numelui. Numele acestui
element i valoarea creat vor fi trimise spre prelucrare programului CGI.
Cnd se execut clic pe butonul SUBMIT, acesta recepioneaz
evenimentul onsubmit care apeleaz funcia creeaza_parola(), care se execut i
apoi formularul este trimis programului CGI.
Pentru formularul de mai jos parola va fi EA3 (iniiala numelui i
prenumelui i lungimea numelui), iar codul este urmtorul:
290
<HTML> <HEAD>
<TITLE>ONSUBMIT</TITLE>
function CreazaParola( )
{ with (document.forms.Parole)
{alert("lungime nume " + Nume.value.length)
Parola.value = Nume.value.charAt (0) + Prenume.value.charAt (0) +
Nume.value.length }}
</SCRIPT> </HEAD>
<BODY >
<FORM name="Parole">
<PRE>
Nume: <INPUT type="text" name="Nume" >
Prenume: <INPUT type="text" name="Prenume" >
Parola: <INPUT type="hidden" name="Parola" >
<INPUT type="submit" name="Submit" value="OK"
onclick= "CreazaParola( )">
</FORM>
</BODY></HTML>
Figura 19.10. Evenimentul onsubmit
Se observ din bara de stare, n datele transmise, paraloa obinut EA3.
19.3.7. Activarea, Dezactivarea, Citirea unor elemente realizate cu funcii

JavaScript
n exemplul de mai sus se observ c nu se poate forma parola dac
elementele Nume, Prenume nu sunt completate. De asemenea, dorim ca elementul
Parola, odat creat, s nu poat fi modificat, ci numai citit.
291
n capitolul 10 s-a artat c un element poate fi dezactivat stabilind
valoarea atributului disabled. Dac disabled are valoarea true, atunci elementul
respectiv este dezactivat, n caz contrar el este activat.
De asemenea s-a definit i atributul readonly a elementului INPUT, pentru
a schimba valoarea unui element care nu poate fi modificat. Dac atributul
readonly are valoarea true, atunci nu se poate face nicio modificare elementului.
Dac dorim, de exemplu, s schimbm valoarea atributului readonly a elementului
Parola din valoarea true n false pentru a crea parola, atunci n funcia JavaScript,
nainte de a atribui o valoare elementului Parola, trebuie resetat atributul readonly
pe valoarea false.
S relum exemplul 19.12 i s considerm iniial c elementul Parola este
disabled i readonly. Dup introducerea informaiilor n cmpurile Nume si
Prenume, se apeleaz funcia activeaza_parola(), care va activa cmpul Parola i
apoi funcia creeaza_parola(), care va reseta atributul readonly la valoarea false i i
va atribui valoarea format din primele litere din cmpurile Nume i Prenume i
din lungimea cmpului Nume.
<HTML><HEAD><TITLE>DISABLED &
READONLY</TITLE><HEAD>
function activeaza_parola() {
if (Nume.value.length > 0 &&
Prenume.value.length > 0)
Parola.disabled = false}
function creaza_parola()
{ Parola.readonly = false
Parola.value = Nume.value.charAt(0) + Prenume.value.charAt(0) +
Nume.value.lenght
Parola.readonly = true}
</SCRIPT></HEAD>
<BODY>
<FORM name="Parola" >
Nume: <INPUT type="text" name="Nume"
onchange="activeaza_parola()"><BR>
Prenume: <INPUT type="text" name="Prenume"
onchange="activeaza_parola()"><BR>
Parola: <INPUT type="text" name="Parola" disabled = true
readonly=true><BR>
Parola: <INPUT type="submit" name="SUBMIT" value="OK"
onsubmit="creaza_parola()">
</FORM>
</BODY></HTML>
292
Figura 19.11. Disabled i readonly
Se observ din bara de stare c parola nu mai este vizibil.
19.4. Imagini n JavaScript

n capitolul 6, Imagini, s-a prezentat elementul IMG. Acesta are atributele:
src, alt, id, align, width, height, border, hspace, vspace.
n JavaScript elementul html IMG devine obiectul IMG, care are, ca
proprieti, atributele elementului IMG enumerate mai sus, cu excepia atributului
ID.
Evenimentele recepionate de elementul IMG sunt:
onclick evenimentul se produce cnd se execut un clic pe un obiect
aflat pe pagin
ondblclick evenimentul se produce cnd se execut dublu clic pe un
obiect
onmousemove evenimentul se produce, n mod continuu, cnd cursorul
mouse-ului se mic pe un obiect
onmouseover evenimentul se produce, o singur dat, cnd se trece cu
mouse-ul peste un obiect
onmouseout evenimentul se produce cnd mouse-ul prsete
suprafaa unui obiect
Se observ i din modul de definire c aceste evenimente pot fi

recepionate i de alte obiecte, nu doar de obiectul IMG.
Pentru a schimba aspectul unei pagini, pe msur ce vizitatorul parcurge o
pagin, cu ajutorul mouse-ului se folosesc elementele care recepioneaz
evenimentele de mai sus, cunoscute i sub numele de elemente rollover (n
traducere rollover = tumb)
Un element rollover este produs de unul dintre evenimentele definite mai
sus i are loc cnd un vizitator al unei pagini trece cu mouse-ul peste un obiect
imagine, text, element al unui formular.
293
Pentru a folosi elemente rollover putem utiliza dou metode:
metoda direct prin asocierea unei aciuni atributului onmouseover (de
exemplu) al unui tag HTML, caz n care nu se folosete JavaScript
metoda indirect prin crearea unei funcii JavaScript apelat de
atributul onmouseover (de exemplu) la declanarea unui eveniment
(onmouseover). Se folosete, mai ales, dac se dorete s aib loc mai
multe aciuni ca rspuns la un eveniment.
OBSERVAIE!
Majoritatea browser-elor admit elemente rollover. Pentru a testa dac
browser-ul poate utiliza astfel de elemente trebuie s se testeze obiectul
document.images, care e tip array i cuprinde toate imaginile din pagin n ordinea
n care au fost introduse.
Astfel, ne putem referi la prima imagine, de exemplu prin
document.images[0].
Testarea compatibilitii browser-ului cu elemente rollover se poate face
astfel:
if (document.images)
{ Browserul recunoate elementele rollover i folosirea lor
prin metoda direct }
else
{ Browserul nu recunoate elementele rollover}
Vom ncerca n continuare s simplificm utilizarea elementelor de

modificare a unei pagini n funcie de plimbarea mouse-ului pe pagin, folosind
una sau ambele metode.
19.4.1. Evenimentele onclick i ondblclick

S presupunem c obiectul IMG recepioneaz evenimentul onclick. n
urma acestui eveniment, imaginea, care va conine atributul onclick, va evidenia
imaginea, nconjurnd-o cu un chenar de grosimea 7px.
Folosind metoda direct vom avea codul:
<HTML>
<HEAD>
<TITLE>ONCLICK IMAGINE </TITLE>
</HEAD>
<BODY>
<IMG height="100" width="100" border=2 src="flori.jpg" onclick="border
= 7">
294
</BODY></HTML>
Figura 19.12. Evenimentul onclick
Folosirea elementului ondblclick prin metoda indirect, cu ajutorul unei

funcii apelat de atributul onclick al tag-ului IMG.
<HTML><HEAD><TITLE>ONCLIK</TITLE>
function Afiseaza()
{floare.border=7}
</SCRIPT>
</HEAD></BODY>
<IMG ID="floare" src="flori.jpg" height="100" width="100" border=2
onclick="Afiseaza()">
</BODY></HTML>
Figura 19.13. Proprietatea onclick cu valoare apel de funcie
OBSERVAII!
Dac atributul onclick din ambele metode (figurile 19.14 si 19.15) se
nlocuiete cu atributul ondblclick, efectul este acelai, diferena const
n faptul c trebuie executat dublu clic pe imagine pentru ca imaginea s
fie ncadrat cu un chenar de grosime 7px.
Prin metoda direct unui atribut i se atribuie instruciunea de atribuire
complet, n cazul nostru onclick = border=7
295
Instruciunea de atribuire (border = 7) trebuie neaprat sa fie inclus
ntre ghilimele sau ntre apostrofuri. Este indicat ca ntre ghilimele s fie cuprins
instruciunea de atribuire i ntre apostrofuri valorile atributelor.
19.4.2. Evenimentul onmousemove

Dac dorim ca un element s se se mite continuu atunci cnd ne aflm cu
mouse-ul deasupra unui obiect se folosete evenimentul onmousemove.
S considerm c dorim s mrim continuu o imagine n nlime cnd ne
aflm cu mouse-ul deasupra ei. Codul prin cele dou metode:
<HTML>
<HEAD><TITLE>ONMOUSEMOVE</TITLE>
</HEAD>
<BODY>
<IMG ID="floare" src="flori.jpg" height="50" width="50"
onmousemove="floare.height+=5">
</BODY><HTML>
Utiliznd o funcie JavaScript, apelat de atributul onmousemove al
elementului IMG, pot s aib loc mai multe aciuni. n exemplul de mai sus se
poate mri o imagine i n lime i n nlime.
<HTML><HEAD>
<TITLE>ONMOUSEMOVE</TITLE>
function Mareste(){
floare.width ++
floare.height++}
</SCRIPT>
<BODY>
<IMG ID="floare" src="flori.jpg" height="100" width="100"
onmousemove="Mareste()">
</BODY></HTML>
Figura 19.14. Evenimentul onmousemove

296
19.4.3. Evenimentele onmouseover i onmouseout
Evenimentul onmouseover aduce un rollover pe ecran i se produce o
singur dat cnd mouse-ul trece peste un obiect. Dac se dorete a reveni asupra
modificrilor fcute de producerea evenimentului onmouseover, se utilizeaz
evenimentul onmouseout care are loc atunci cnd mouse-ul prsete obiectul
respectiv.
De exemplu, dorim s schimbm o imagine atunci cnd mouse-ul este
deasupra ei cu o alta i dup ce mouse-ul prsete imaginea s revin prima
imagine. Codul n cele 2 variante este dat mai jos.
<HTML>
<HEAD><TITLE>ONMOUSEOVER SI ONMOUSEOUT</TITLE>
</HEAD>
<BODY>
<IMG height="100" width="100" src="flori.jpg"
onmouseover="src=flori1.jpg" onmouseout="src ='flori.jpg'">
</BODY>
</HTML>
Acelai efect obinem utiliznd 2 funcii:
Prima, care schimb o imagine cu alta i este apelat de evenimentul
onmouseover
a doua, care este apelat de evenimentul onmouseout i aduce prima
imagine cnd mouse-ul iese de pe suprafaa imaginii.
<HTML>
<HEAD>
<TITLE>ONMOUSEOVER SI ONMOUSEOUT</TITLE>
function Schimba()
{ floare.src=flori1.jpg}
function Revine()
{ floare.src=flori.jpg }
</SCRIPT></HEAD>
<BODY>
<IMG ID=floare src=flori.jpg onmouseover=Schimba()
onmouseout=Revine()>
</BODY></HTML>
297
Figura 19.15. Evenimente onmouseover i onmouseout
19.4.5. Realizarea unei animaii

Din capitolul 12 se tie cum poate fi ncrcat un fiier avi, care este un film
realizat din cteva imagini. De multe ori ncrcarea unui fiier avi poate dura, ceea
ce poate supra pe unii vizitatori.
Se poate realiza o animaie ncrcnd imaginile ntr-un obiect array i
folosind unele funcii apelate de evenimentele onmouseover sau onclick. Funcia se
va executa cnd mouse-ul va fi pe imagine, respectiv cnd se va da clic pe imagine.
Funcia va afia la o secund sau la un alt interval de timp dorit o imagine. n felul
acesta se va crea impresia derulrii unui film.
Se tie c orice obiect are metodele constructor i destructor, nseamn c
obiectele image i array vor avea constructorul new Image(), care va crea o
imagine i respectiv un string n memorie.
Imaginile fiind n memorie, n cazul n care dorim s realizm o animaie
nu se mai pierde timp cu ncrcarea lor ca n cazul unui fiier avi de animaie.
Urmtorul exemplu arat cum se realizeaz acest lucru, afind 5 imagini.

<HEAD>
<TITLE>ANIMATIE in JavaScript></TITLE>
poza = new Array()
var j=0
for (i=0; i <5; i++)
{poza[i] = new Image()
poza[i].src = (i+1) + ".jpg"}
function Animatie() {
j++
if(j==4 ) i=0
floare.src=poza[j].src
setTimeout("Animatie()",1000)}
</SCRIPT>
298
</HEAD>
<BODY>
<IMG ID="floare" src =1.jpg onmouseover="Animatie()">
</BODY>
</HTML>
Figura 19.16. Animaie
299
20. Elemente avansate JavaScript
20.1. Legtura ntre HTML, JavaScript i CSS

n capitolele 13-15 s-a introdus CSS (Cascading Style Sheets) foi de stil
(n cascad). Utiliznd JavaScript stilurile se pot modifica dinamic. Amintim c
stilurile pot fi create inline (utiliznd atributul style), foi de stil n partea de antet a
paginii (utiliznd blocul <STYLE> ... </STYLE>) i foi de stil externe, n fiiere
cu extensia CSS.
Pentru a crea un stil unui element (de exemplu P) n loc de a crea o foaie
de stil pentru el n modul clasic:
<STYLE>
P {font-size: 40; color = red;}
</STYLE>
exist i alte dou posibiliti:
se poate asocia elementului un nume cu atributul id=nume. n acest
caz foaia de stil va fi :
<STYLE>
#nume {font-size: 40; color = red;}
</STYLE>
<P id=nume> text
se poate defini o clas de element care poate fi apelat prin
class=nume
n acest caz foaia de stil va fi:
<STYLE>
.nume {font-size: 40; color = red;}
</STYLE>
<DIV class=nume> Text1
<P class=nume>Text2
Pentru a face legtura ntre HTML, JavaScript i CSS trebuie tiut c:
Elementele HTML sunt obiecte n JavaScript. Fiecrui element i se

poate asocia un id cu ajutorul cruia avem acces la proprietile
obiectului respectiv
n JavaScript fiecare obiect are proprietatea style cu excepia obiectelor:
HTML, HEAD, BODY, BASE i BASEFONT
300
Proprietatea style n JavaScript este tot de tip obiect. Obiectul style are la
rndul lui, alte obiecte corespunztoare atributelor de stil din CSS.
n JavaScript se folosete pentru a defini un stil pentru un obiect id-ul
scris cu litere mici, iar .class este folosit doar n HTML
Numele acestor obiecte sunt:
o numele atributelor corespunztoare din CSS, dar obligatoriu scrise
cu litere mici. De exemplu: color n CSS este tot color n
JavaScript
o dac numele din CSS a unui atribut are n componen caracterul
- (linie), atunci acesta este eliminat i ce urmeaz este scris cu
liter mare. De exemplu: font-size n CSS este fontSize n
JavaScript
Cu ajutorul limbajului JavaScript se pot schimba dinamic valorile
proprietilor (obiectelor) obiectului style
n continuare se vor prezenta exemple care vor proba cele menionate mai
sus.
1) n acest exemplu se dorete formatarea unui bloc de text atunci cnd se
d un dublu clic pe suprafaa lui. Pentru acesta obiectul DIV recepioneaz
evenimentul ondblclick, care va apela o funcie ce va formata textul din blocul
DIV, aa cum reiese din urmtorul cod:
<HTML>
<HEAD>
function stiluri() {
d.style.fontSize="40"
d.style.fontStyle="italic"
d.style.color="red"
p1.style.color="blue"}
</SCRIPT>
</HEAD>
<BODY>
<DIV id="d" ondblclick = "stiluri()">
Acesta este un text care se va formata conform stilurilor definite n funcia
stiluri(). Funcia este apelat de evenimentul ondblclick, care este un
atribut al elementului DIV. Se observ c va fi formatat dinamic i
paragraful cu id=p1
</DIV>
<P id="p1"> Acesta este un alt text care va fi colorat cu albastru
</P>
</BODY>
</HTML>
301
Figura 20. 1. Formatarea dinamic a unui text
2) n acest exemplu se realizeaz afiarea unui text, care iniial nu e vizibil
i treptat se coloreaz intens. Se utilizeaz codul RGB. Culoarea alb are codul
RGB(255,255,255) sau #FFFFF, iar bl are codul RGB(0,0,FF). <HTML><HEAD>
<STYLE>
#par { color:#FFFFFF; font-size:20; font-style:italic;}
</STYLE>
i=255, rel=0
function Aparitie()
{ i--
par.style.color=255*256*256+256*i+i
rel=setTimeout ("Aparitie()" , 5)
if(i==0) clearTimeout(rel)
p1.style.color="blue" }
</SCRIPT></HEAD>
<BODY onload="Aparitie() ">
<Div id="par"> Acesta este un text care se va lumina cind se incarca pagina
</Div>
<P id="p1">Acesta este alt text care suporta modificare</P>
</BODY></HTML>
Figura 20.2. Schimbarea culorii dinamic
302
3) n acest exemplu se afieaz un tabel care conine temperatura,
umiditatea i presiunea. Acestea vor defila pe vertical. Odat afiat o
caracteristic, aceasta va staiona o perioad pe ecran, dup care va disprea i va
aprea la sfritul celorlalte, dup care din nou totul se deplaseaz pe vertical.
Poziionarea este absolut, fa de colul stnga-sus. Pentru aceasta se folosete
atributul top.
Se folosete o funcie mutare(), care realizeaz deplasarea unei linii de
tabel. Dup ce aceasta dispare, executarea se oprete. Aceast funcie este apelat
de alt funcie schimbare(), care se execut la intervale egale de timp dup o
ateptare.
n felul acesta vor defila continuu valorile caracteristicilor. Defilarea se
poate face i pe orizontal, folosind, n acest caz, atributul left.
<HTML><HEAD>
<STYLE>
TH {background-color:"cyan"; color:"red"; width:300; height:100;}
#P1 {position:absolute; top:0; left:20}
</STYLE>
i=0; x=0; rel=0
x1=0; x2=100; x3=200
function mutare ()
{ P1.style.top=--x1
P2.style.top=--x2
P3.style.top=--x3
--x
if (x== -100)
{ switch (i)
{ case 0: x1=200; break;
case 1: x2=200; break;
case 2: x3=200; }
if(i ==2)
i=0
else i++
x=0 }
if (x==0) clearTimeout(rel)
else rel=setTimeout( "mutare ()" , 20) }
function schimba ()
{ mutare ()
setTimeout("schimba ()", 5000) }
</SCRIPT></HEAD>
<BODY onload="schimba ()">
<TABLE>
<TR id="P1"> <TH> Temperatura <TH> 10 Grade
303
<TR id="P2"> <TH> Umiditate <TH> 50%
<TR id="P3"> <TH> Presiune <TH> 754 mm coloana de mercur(Hg)
</TABLE>
</BODY></HTML>
Figura 20.3. Defilare pe vertical
20.2. Obiectul WINDOW

n capitolele 16-19 s-a prezentat limbajul JavaScript. Informaiile sunt
afiate de ctre browser un ajutorul ferestrelor.
Utiliznd JavaScript, putem gestiona lucrul cu obiectul fereastr. Obiectul
window este de cel mai nalt nivel, motiv pentru care se poate omite cuvntul
window din faa proprietilor sau metodelor. De exemplu, sunt corecte ambele
variante de apel a metodei alert():
window.alert(Un text)
sau
alert(Un text)
Utiliznd proprietile i metodelele obiectului window putem:
s deschidem mai multe ferestre i s schimbm coninutul acestora
dinamic
s nchidem ferestrele
s determinm un stil ferestrei (cu menubar, scrollbar, bara de stare etc.)
s activm i s dezactivm o fereastr
n continuare se definesc cele mai importante metode i proprieti ale

obiectului window.
Unele metode ale obiectului window au fost deja introduse, fiind necesare
pentru exemplificrile anterioare, i anume: alert(), prompt(), confirm() i
setTimeout(). Metodele prezentate n continuare vor fi: open(), close(), focus(),
blur(), scrollTo(), back(), forward() i stop().
304
20.2.1. Deschiderea i nchiderea unei ferestre
Site-urile moderne folosesc butoane, care, atunci cnd sunt apsate,
deschid ferestre. Unele ferestre se pot deschide instantaneu la ncrcarea unei
pagini web, de exemplu, reclamele.
Pentru a deschide o fereastr se folosete metoda open(), care returneaz o
referin care este un obiect fereastr. Sintaxa utilizrii metodei open este:
fereastra=window.open(nume_fiier.html,nume_fereastr,list_parametri)
unde:
nume_fiier.html este adresa URL a paginii web care va aprea n
fereastr
nume_fereastr este numele pe care dorim s-l dm ferestrei
list_parametri este opional i reprezint o list de parametri, separai
prin virgul, care indic stilul ferestrei. Valorile acestor parametri sunt, n
general, yes sau 1 i no sau 0. Valoarea implicit este no sau 0. Parametrii cei
mai importani ai metodei open() sunt dai n tabelul din figura 20.4.
Valori:
Parametri Efect activ= yes,1
dezactiv=no, 0
Butoane pentru directoare directories= 1 or yes
directories
standard ale browser-ului directories=0 or nu
Edit-ul care conine adresa location=1
location
fiierului HTML location=0
menubar=1
menubar Bara de meniuri
menubar=0
resizable=1
resizable Redimensionarea ferestrei
resizable=0
scrollbars=0
scrollbars Barele de derulare
scrollbars=1
status Bara de stare status=1 status=0
Bara de instrumente
toolbar toolbar=1 toolbar=0
standard
height Inlimea ferestrei n pixeli
width Limea ferestrei n pixeli
Coordonatele x, y ale
top, left coltului stnga-sus la care va fi n pixeli
afiat fereasta
Figura 20.4. Parametrii metodei open()
Pentru a nchide o fereastr se folosete metoda close() a obiectului

window. Pentru a apela metoda close() se folosete referina returnat de metoda
open() care este un obiect fereastr, astfel: fereastra.close().
305
Dac nu se precizeaz un nume de fereastr care s fie nchis, se va
nchide fereastra curent. Urmtorul exemplu arat cum se poate deschide o nou
fereastr n colul din stnga sus (left=0, top=0). Fereastra curent conine dou
butoane, unul folosit pentru deschiderea unei ferestre, cellalt folosit pentru
nchiderea ferestrei deschise:
<HTML><HEAD> <TITLE>Metodele open() si close()</TITLE>

function Deschide_fereastra()
{fereastra=window.open("http://www.edu.ro/index.php/articles/c108/",
"univ","menubar=yes, status=yes, toolbar=yes, resizable=yes, left=0,
top=0, height=300, width=300")}
function Inchide_fereastra() { fereastra.close()}
</SCRIPT> </HEAD>
<BODY>
<INPUT type="button" name="Deschide" value="Deschide"
onclick="Deschide_fereastra()"> <BR>
<INPUT type="button" name="Inchide" value="Inchide"
onclick="Inchide_fereastra()">
<BODY></HTML>
Figura 20.5. Metodele open() i close()
306
OBSERVAIE!
Dac se dorete s se deschid mai multe ferestre pe ecran se poate folosi
un ciclu for care are n corpul lui deschiderea unei ferestre. Se creeaz un buton
care s apeleze o funcie care conine ciclul for. Primul parametru al metodei
open() este irul vid( ), presupunnd c dorim s se afieze ferestre vide. n cazul
n care n ferestre se afieaz anumite pagini web, nu se mai poate folosi un ciclu
for, ci fiecare fereastr trebuie deschis cu metoda open().
Urmtorul exemplu afieaz trei ferestre vide n fereastra curent:
<HTML>
<HEAD>
function Multiple_Ferestre()
{for (i=1; i<4; i++)
fer=window.open(" ","fer"+i,"width=100, height=100, status=yes,
resizable=yes, menubar=0")}
</SCRIPT></HEAD>
<BODY>
<INPUT type="button" value="Ferestre" name="Ferestre"
onclick="Multiple_Ferestre()">
</BODY></HTML>
Figura 20. 6. Deschiderea ferestrelor multiple
20.2.2. Activarea i dezactivarea unei ferestre

De obicei doar o fereastr este activ (are focus), dei sunt site-uri care
afieaz mai multe ferestre cu reclame. Cnd o fereastr este activ, este vizibil pe
ecran i poate recepiona evenimentele de la mouse i tastatur.
Pentru a activa o fereastr se poate face att cu un clic pe fereastra
respectiv, ct i cu metoda focus(). O fereastr inactiv se poate afla att pe ecran,
307
ct i pe bara de stare. Pentru a dezactiva o fereastr (pierde focus) se execut clic
pe suprafaa altei ferestre sau se folosete metoda blur(), n acest ultim caz
fereastra nu mai poate fi pe ecran ci numai pe bara de stare.
Urmtorul exemplu deschide o nou fereastr care va insera o pagin web
cu informaii despre universitile de stat. n fereastra principal se creeaz trei
butoane pentru: deschiderea ferestrei, activarea ei i respectiv dezactivarea ei i se
va insera o pagina web cu informaii despre universitile de stat.
<HTML><HEAD><TITLE>Metodele focus() si blur()</TITLE>

function Deschide()
{fereastra_1=window.open("http://www.edu.ro/index.php/articles/3880",
"Spiru Haret", "resizable=1, height=300, width=300, menubar=yes,
status=yes, scrollbars=yes")}
function Activare(){fereastra_1.focus()}
function Dezactivare() {fereastra_1.blur()}
</SCRIPT></HEAD>
<BODY>
<A href="http://www.edu.ro/index.php/articles/C487">Universitate stat</A>
<INPUT type="button" value="Deschide" onclick="Deschide()">
<INPUT type="button" value="Activ" onclick="Activare()">
<INPUT type="button" value="Dezactiv" onclick="Dezactivare()">
</BODY></HTML>
308
Figura 20. 7. Metodele focus() i blur()
20.2.3. Metoda scrollTo()

Dac se dorete derularea automat a unei pagini web, se poate folosi
metoda scrollTo() a obiectului fereastr. Metoda scrollTo() are doi parametri care
sunt coordonatele x i y ale colului din stnga sus, de unde se dorete afiarea
paginii. Coordonatele x i y se exprim n pixeli.
Metoda scrollTo(x,y) poate fi folosit doar dac parametrul scrollbars a
ferestrei are valoarea true. n exemplul de mai sus se mai adaug o funcie care s
apeleze metoda scrollTo(0,0) i un buton n corpul programului care s apeleze
funcia astfel:
function Derulare() { fereastra.scrollTo(0,0) }
i butonul
<INPUT type=button value=Derulat onclick=Derulare() >
La apsarea butonului Derulat, pagina web ncrcat n fereastr nou,
se va derula automat. Apelul metodei n cazul n care se dorete ca pagina din
fereastra curent s se deruleze automat poate fi : self.scrollTo(0,0).
Metodele back(), forward(), stop() sunt mai puin folosite, avnd acelai
efect ca i butoanele browser-ului cu aceleai nume.
Dintre proprietile obiectului window, cea mai util este proprietatea
status(), care are ca efect afiarea valorii reinut de ea n bara de stare.
De exemplu, adugarea urmtoarei funcii la unul din exemplele de mai
sus are ca efect afiarea mesajului n bara de stare:
function Mesaj() {status=Testarea proprietii status}
309
20.3. Obiectul DOCUMENT
Obiectul document este i el, ca i obiectul window, un obiect des utilizat
n JavaScript. Despre unele metode i proprieti ale obiectului (document.write(),
document.images, document.forms etc.) s-a discutat n capitolele precedente.
n continuare se prezint proprietile principale ale obiectului document,
precum i cele mai importante metode ale sale.
Unele proprieti sunt de tip obiect, aa cum proprietatea document a
obiectului window este obiectul document.
Proprietatea all
Proprietatea all este cea mai important proprietate a obiectului document.
Este o proprietate de tip obiect, care are, la rndul ei, alte proprieti i metode.
Este un obiect vector ale tuturor elementelor care se gsesc ntr-o pagin, aa cum
forms, images sunt obiecte vector al tuturor formularelor, respectiv ale tuturor
imaginilor dintr-o pagin.
Fiecare element al vectorului all este tot un obiect. De exemplu, elemente
(obiecte) ale vectorului all sunt: HTML, HEAD, BODY, cte un element pentru
fiecare imagine (IMG), paragraf (P) etc.
Cele mai importante proprieti ale obiectului vector all sunt:
tagName reine tipul, de exemplu IMG, P etc. Dac exist, de
exemplu, o imagine ntr-o celul a unui tabel se va afia TABLE, TR,
TH sau TD, IMG
length indic numrul de elemente ale vectorului all
id afieaz id-ul elementelor pentru care atributul id a fost definit
Urmtorul exemplu probeaz aceste proprieti ale obiectului all[i]. Se va

crea o funcie care va afia att tipul tuturor elementelor unei pagini web, ct i
id-ul lor.
<HTML>
<HEAD>
<TITLE>Proprietati all</TITLE>
function Afiseaza() {
for (i=0; i<=document.all.lenght; i++)
{ alert(document.all[i].tagName)
if (document.all[i].id != 0)
alert (document.all[i].id)}}
</SCRIPT></HEAD>
<BODY>
Afiseaza()
310
Figura 20. 8. Proprietatea all
Metodele obiectului all[i] sunt:

item(id) returneaz elementul cu id indicat. n exemplul de mai jos se
scrie valoarea unui buton, de exemplu Activeaza()
<HTML>
<HEAD>
function Afiseaza()
{alert(document.all.item("button").value)}
</SCRIPT></HEAD>
<BODY>
<INPUT type="button" id="button" value="Activeaza"
onclick="Afiseaza()">
</BODY></HTML>
Figura 20.9. Metoda item(id)
tags(tip) returneaz un vector de un tip dat. De exemplu, funcia de

mai jos numr elementele de tip paragraf (elementul P) dintr-o pagina
i le coloreaz n rou
311
<HTML><HEAD>
function Numara() {
alert(document.all.tags("P").length)
for (i=0; i<document.all.tags("P").length; i++)
document.all.tags("P")[i].style.color="red"}
</SCRIPT></HEAD>
<BODY>
<P> paragraful 1 </P>
<P> paragraful 2</P>
<P> paragraful 3</P>
Numara()
</SCRIPT>
</BODY></HTML>
Figura 20. 10. Metoda tags()
20.3.1. Proprietatea images a obiectului document

Despre aceast proprietate s-a vorbit i n capitolul precedent, la seciunea
animaie. Images este un vector care conine toate imaginile dintr-un document.
Fiecrei imagini i se asociaz cte un element de tablou n funcie de ordinea
imaginilor n pagin. Funcia urmtoare afieaz sursa imaginilor dintr-un document.
function imagini() {
for (i=0; i<document.images.length; i++)
alert(document.images[i].src)}
20.3.2. Proprieti de culoare ale obiectului document

Proprietile de culoare sunt mai rar folosite din cauz c este mult mai util
s se foloseasc stilurile. Proprietile de culoare sunt pentru fond, font i legturi.
Acestea sunt:
bgColor pentru culoarea de fond a documentului
fgColor pentru culoarea fontului
linkColor culoarea pentru legturi (textul legturilor)
312
n urmtorul exemplu se creeaz o funcie care, atunci cnd va fi apelat,
va colora n galben documentul, textul cu albastru i legturile cu rou.
<HTML><HEAD>
function Coloreaza() {
document.bgColor="yellow"
document.fgColoor="red"
document.linkColor="blue"}
</SCRIPT></HEAD>
<BODY>
Un exemplu pentru proprietile de coloare
<A href="www.edu.ro">Universiti</A><BR>
<A href="www.edu.ro">Universiti de stat</A><BR>
<A href="www.edu.ro">Universiti particulare acreditate</A><BR>
<INPUT type="button" name="Culoare" value="Coloreaza"
onclick="Coloreaza()">
</BODY></HTML>
Dup apsarea butonului Coloreaza, browser-ul afieaz:
Figura 20. 11. Proprieti de culoare
313
Metoda write() a fost prezentat n capitolul 17, avnd nevoie s fie
folosit n exemplificri. Amintim c ea este utilizat pentru a scrie n document i
se aplic sub forma document.write(text).
Dac textul conine tag-uri HTML, sau este un fiier html, browser-ul
interpreteaz tag-urile i le afieaz.
n exemplul de mai jos scrim citeva tag-uri html astfel:
<Script language=JavaScript>
document.write(<A href=http://www.edu.ro> Informatii MEC</A>)
document.write(<BR>)
document.write(<IMG src=flori.jpg>
</Script>
Figura 20. 12. Metoda write()
314
ANEXE
315
316
ANEXA A
Culori
Nume culoare Cod RGB

AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9
DarkGrey #A9A9A9
DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
Darkorange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
317
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkSlateGrey #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DimGrey #696969
DodgerBlue #1E90FF
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Grey #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGray #D3D3D3
318
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateGray #778899
LightSlateGrey #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370D8
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
319
PaleVioletRed #D87093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
Wheat #F5DEB3
White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32
320
ANEXA B
Caractere n HTML
Caracter Nume Cod HEXA

" " "
$ &#036
' ' '
& & &
< < <
> > >

¡ ¡
¤ ¤
¢ ¢
£ £
¥ ¥
¦ ¦
§ §
¨ ¨
© ©
ª ª
« «
¬ ¬

® ®
™ ™
¯ ¯
° °
± ±
² ²
³ ³
´ ´
µ µ
¶ ¶
· ·
¸ ¸
321
¹ ¹
º º
» »
¼ ¼
½ ½
¾ ¾
¿ ¿
À À
Á Á
Â Â
Ã Ã
Ä Ä
Å Å
Æ Æ
Ç Ç
È È
É É
Ê Ê
Ë Ë
Ì Ì
Í Í
Î Î
Ï Ï
Ð Ð
Ñ Ñ
Ò Ò
Ó Ó
Ô Ô
Õ Õ
Ö Ö
× ×
Ø Ø
Ù Ù
Ú Ú
Û Û
322
Ü Ü
Ý Ý
Þ Þ
ß ß
à à
á á
â â
ã ã
ä ä
å å
æ æ
ç ç
è è
é é
ê ê
ë ë
ì ì
í í
î î
ï ï
ð ð
ñ ñ
ò ò
ó ó
ô ô
õ õ
ö ö
ø ø
÷ ÷
ù ù
ú ú
û û
ü ü
ý ý
þ þ
323
ÿ ÿ
Ă
ă
&OElig; Œ
&oelig; œ
&Scaron; Š
&scaron; š
Ţ
ţ
&Yuml; Ÿ
&circ; ˆ
&tilde; ˜
&ensp;
&emsp;

&zwj; ‍
&lrm; ‎
&rlm; ‏
– –
— —
‘ ‘
’ ’
&sbquo; ‚
“ “
” ”
&bdquo; „
&dagger; †
&Dagger; ‡
… …
&permil; ‰
&lsaquo; ‹
&rsaquo; ›
€ €
324
ANEXA C
CSS - Specificaii de stil
Background
Proprietate Valoare
background-color; background-image
background background-repeat; background-attachment;
background-position
background-attachment scroll; fixed
background-color color-rgb; color-hex; color-name; transparent
background-image url(URL); none
top left; top cente;r top right;
center left; center center; center right;
background-position
bottom left; bottom center; bottom right;
x% y%; xpos ypos
background-repeat repeat; repeat-x; repeat-y; no-repeat
Borduri
Proprietate Valoare
border border-width; border-style; border-color
border-bottom border-bottom-width; border-style; border-color
border-bottom-color border-color
border-bottom-style border-style
border-bottom-width thin; medium; thick; length
border-color color
border-left border-left-width; border-style; border-color
border-left-color border-color
border-left-style border-style
border-left-width thin; medium; thick; length
border-right border-right-width; border-style; border-color
border-right-color border-color
border-right-style border-style
border-right-width thin; medium; thick; length
none; hidden; dotted; dashed; solid; double
border-style
groove; ridge; inset; outset
border-top border-top-width; border-style; border-color
border-top-color border-color
border-top-style border-style
325
border-top-width thin; medium; thick; length
border-width thin; medium; thick; length
Clasificri
Proprietate Valoare
clear left; right; both; none
url; auto; crosshair; default; pointer; move;
e-resize; ne-resize; nw-resize; n-resize;
cursor
se-resize; sw-resize; s-resize; w-resize
text; wait; help
none;inline; block; list-item; run-in; compact
marker; table; inline-table; table-row-group
display table-header-group; table-footer-group
table-row; table-column-group; table-column
table-cell; table-caption
float left; right; none
position static; relative; absolute; fixed
visibility visible; hidden; collapse
Dimensiuni
Proprietate Valoare
height auto; length; %
line-height normal; number; length; %
max-height none; length; %
max-width none; length; %
min-height length; %
min-width length; %
width auto; length; %
Fonturi
Proprietate Valoare
font-style; font-variant; font-weight
font font-size/line-height; font-family; status-bar
caption;icon;menu; message-box; small-caption
font-family family-name; generic-family
xx-small; x-small;small; smaller
font-size medium; large; x-large; xx-large;
larger; length; %
font-size-adjust none; number
font-stretch normal; wider; narrower; ultra-condensed;
326
extra-condensed; condensed; semi-condensed;
semi-expanded; expanded;
extra-expanded;ultra-expanded
font-style normal; italic; oblique
font-variant normal; small-caps
normal; bold; bolder; lighter;
font-weight
100;200;300;400;500;600;700;800;900
Coninut generat
Proprietate Valoare
string; url; counter(name); open-quote;
close-quote;no-open-quote; no-close-quote;
content counter(name, list-style-type); attr(X)
counters(name, string);
counters(name, string, list-style-type)
counter-increment none; identifier number
counter-reset none; identifier number
quotes none; string
Liste
Proprietate Valoare
list-style-type; list-style-position;
list-style
list-style-image
list-style-image none; url
list-style-position inside; outside
none; disc; circle; square; decimal
decimal-leading-zero; lower-roman
upper-roman; lower-alpha; upper-alpha
list-style-type
lower-greek; lower-latin; upper-latin;hebrew
armenian; georgian; cjk-ideographic
hiragana; katakana; hiragana-iroha
marker-offset auto; length
Margini
Proprietate Valoare
margin-top; margin-right
margin
margin-bottom; margin-left
margin-bottom auto; length; %
327
margin-left auto; length; %
margin-right auto; length; %
margin-top auto; length; %
Outline
Proprietate Valoare
outline outline-color; outline-style; outline-width
outline-color color; invert
none; dotted; dashed; solid; double; groove;
outline-style
ridge; inset; outset
outline-width Thin; medium; thick; length
Padding
Proprietate Valoare
padding-top; padding-right
Padding
padding-bottom; padding-left
padding-bottom length; %
padding-left length; %
padding-right length; %
padding-top length; %
Poziionare
Proprietate Valoare
bottom auto; %; length
clip shape; auto
left auto; %; length
overflow visible; hidden; scroll; auto
position static; relative; absolute; fixed
right auto; %; length
top auto; %; length
baseline; sub; super; top; text-top; middle;
vertical-align
bottom; text-bottom; length; %
z-index auto; number
Tabele
Proprietate Valoare
collapse
border-collapse
separate
328
border-spacing length length
caption-side top; bottom; left; right
empty-cells show; hide
table-layout auto; fixed
Text
Proprietate Valoare
color color
direction ltr; rtl
line-height normal; number; length; %
letter-spacing normal; length
text-align left; right; center; justify
text-decoration none; underline; overline; line-through; blink
text-indent length; %
text-shadow none; color; length
text-transform none; capitalize; uppercase; lowercase
unicode-bidi normal; embed; bidi-override
white-space normal; pre; nowrap
word-spacing normal; length
329
330
BIBLIOGRAFIE SELECTIV
1. Teodoru Gugoiu , HTML, XHTML, CSS i XML, Editura Teora, 2005
2. Tudor Sorin, Vlad Huanu, Crearea i programarea paginilor Web

HTML+CSS+JavaScript+Photoshop+PHP, Editura L&S Soft, 2006
3. Jim Keogh, JavaScript fr mistere, Editura Rosetti Educational, 2005
4. Dave Taylor, Crearea paginilor Web cu HTML 4, Editura Teora 1999
5. Marcel Andrei Homorodean, Irina Iosupescu, Internet i pagini Web, Editura

Niculescu, 2000
6. Dan Somnea, Iniiere n JavaScript i tehnologii Netscape, Editura Tehnic,

1998
7. Mihaela Brut, Sabin Buruga, Prezentri multimedia pe Web, Editura

Polirom, 2004
8. Traian Anghel, Introducere n AJAX, Editura Polirom, 2006
9. Michael B Karbo, Grafic Web, Editura Egmont, 2003
331
Redactor: Cosmin COMARNESCU
Tehnoredactare: Marcela OLARU
Coperta: Rodica Florentina NICULESCU
Cornelia PRODAN
Bun de tipar: 25.04.2007; Coli tipar: 20,75

Format: 16/70100
Editura Fundaiei Romnia de Mine
Bulevardul Timioara nr.58, Bucureti, Sector 6
Tel./Fax: 021/444.20.91; www.spiruharet.ro
e-mail: contact@edituraromaniademaine.ro
332

Proiectarea Paginilor WEB HTML CSS JavaScript PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Proiectarea Paginilor WEB HTML CSS JavaScript PDF

Încărcat de

Drepturi de autor:

Formate disponibile

FLORENTINA RODICA NICULESCU

PROIECTAREA PAGINILOR WEB

Editura Fundaiei Romnia de Mine, 2007

FLORENTINA RODICA NICULESCU

PROIECTAREA PAGINILOR WEB

EDITURA FUNDAIEI ROMNIA DE MINE

2. HTML noiuni de baz....................................................................................... 20

8. Elementele de structur: HTML, HEAD i BODY ............................................ 90

9. Cadre ...................................................................................................................... 102

10. Formulare............................................................................................................. 112

11. Hri de imagine .................................................................................................. 131

12. Faciliti suplimentare Multimedia 142

14. Clase de proprieti n CSS ................................................................................ 173

15. Poziionarea elementelor n pagin n CSS ....................................................... 193

16. JavaScript Elemente de baz........................................................................... 209

17. Instruciuni i Funcii n JavaScript .................................................................. 230

18. Obiecte.................................................................................................................. 253

19. Interaciune JavaScript HTML ...................................................................... 276

20. Elemente avansate JavaScript............................................................................ 300

Cartea Proiectarea paginilor Web HTML, CSS, JavaScript i propune

n acest capitol se introduc principalele concepte i tehnologii de proiectare a

Medii liniare multimedia

Exist dou tipuri de codificare a informaiei grafice:

1.1. Introducere n realizarea unui site

1.2. Protocoale i adrese URL

Adresarea resurselor Web

Caracter Cod zecimal Cod hexazecimal Codificare URL

1.3. Crearea unui site gratuit

Pentru a putea fi populat un site, trebuie transferate fiiere. Transferul

Dac datele au fost introduse corect, atunci programul afieaz o fereastr cu 2

1.4. Crearea paginilor Web

n acest capitol se vor introduce noiunile de baz ale Limbajului de Marcare

2.1. Elemente standard ale unei pagini Web

05-01-2007 Ana Ionescu

Fiierul va fi afiat de browser, ca n figura de mai jos.

Se observ c ceea ce afieaz browser-ul nu seamn cu formatul dorit.

Figura 2. 2. Structura de baz a unei pagini web

Figura 2. 3. Tag-ul <TITLE>

Din analiza exemplului de sus se observ c:

2.3. Paragrafe i linii

Din analiza exemplului din figura 2.4 se observ:

Figura 2. 5. Tag-urile <P> i <BR>

2.4. Elementul <PRE>

05-01-2007 Ana Ionescu

Figura 5. 1 Figura 2. 6. Tag-ul <PRE> n fiierul cerere.html

Figura 2. 7. Utilizarea elementelor NOBR i WBR

Figura 2. 8. Utilizarea liniei orizontale

n capitolul precedent s-au prezentat elementele principale ale redactrii unui

3.1. Stiluri fizice de text

Figura 3. 1. Stilurile: B, I, U, INS

Figura 3. 2. Stilul S i Strike

Figura 3. 3. Stilurile BIG si SMALL

Figura 3. 4. Indici inferiori si superiori

3.2. Stiluri logice de text

Figura 3. 6. Stilurile DIV si SPAN

Stiluri logice de fraz

Stilurile logice de fraz permit s se adauge un neles specific unui font

Figura 3. 8. Stiluri logice de fraz

De multe ori avem nevoie s introducem n pagini web secvene de

Liste Ordonate Liste Marcate Liste de Definiii

Toate tipurile de liste:

4.1. Liste ordonate (Ordered lists)