Proiectare Pagini Web

FLORENTINA RODICA NICULESCU
PROIECTAREA PAGINILOR WEB

– HTML, CSS, JavaScript –
Descrierea CIP a Bibliotecii Naţionale a României
NICULESCU, FLORENTINA RODICA
Proiectarea paginilor Web – HTML, CSS, JavaScript –. / Florentina
Rodica Niculescu. – Bucureşti, Editura Fundaţiei România de Mâine, 2007
Bibliog.
ISBN: 978-973-725-822-9
004.738.52
004.43 HTML
004.43 CSS
004.43 JAVASCRIPT
004.272.23
© Editura Fundaţiei România de Mâine, 2007

UNIVERSITATEA SPIRU HARET
FLORENTINA RODICA NICULESCU
PROIECTAREA PAGINILOR WEB

– HTML, CSS, JavaScript –
EDITURA FUNDAŢIEI ROMÂNIA DE MÂINE

Bucureşti, 2007
CUPRINS
Prefaţă……………………………………………………………………………… 9
Partea I
HTML
1. Spaţiul 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 – noţiuni 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 definiţii (Definition Lists) ................................................................ 45
5. Tabele ..................................................................................................................... 47
5.1. Generalităţi .................................................................................................... 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. Legături (Link-uri)................................................................................................ 75
7.1. Elementul A.................................................................................................. 75
7.2. Legături către alte pagini Web ...................................................................... 77
7.3. Legături cu imagini ....................................................................................... 78
7.4. Legături cu adrese URL relative ................................................................... 80
7.5. Legături către informaţii non Web ............................................................... 82
7.6. Legături către fişiere non HTML ................................................................. 83
7.7. Legături interne în cadrul unei pagini ........................................................... 84
7.8. Trimiterea automată a unui e-mail................................................................. 88
7.9. Culorile legăturilor ........................................................................................ 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 organizării cadrelor............................................................................ 102
9.2. Elementul FRAMESET................................................................................. 105
9.3. Elementul FRAME........................................................................................ 106
9.4. Cadre destinaţie ............................................................................................. 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. Hărţi de imagine .................................................................................................. 131

11.1. Definirea hărţilor imagine pe server............................................................ 131
11.2. Definirea unei hărţi imagine la client .......................................................... 132
11.3. Programul MAP THIS................................................................................. 136
12. Facilităţi suplimentare Multimedia ………………………………………… 142

12.1. Multipurpose Internet Mail Extensions (MIME) ……………………… 142
12.2. Aplicaţii 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 diferiţi 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 proprietăţi în CSS ................................................................................ 173

14.1. Casete în CSS .............................................................................................. 173
14.2. Fonturi în CSS............................................................................................. 174
14.3. Proprietăţi pentru TEXT.............................................................................. 177
14.4. Proprietăţi pentru padding........................................................................... 180
14.5. Proprietăţi pentru bordură ........................................................................... 182
14.6. Proprietăţi pentru partea margin......................................................................... 185
14.7. Proprietăţi de culoare pentru casete.................................................................... 186
15. Poziţionarea 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 poziţionate ................................................................................... 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. Instrucţiuni şi Funcţii în JavaScript .................................................................. 230

17.1. Instrucţiuni .................................................................................................. 230
17.1.1. Instrucţiuni de decizie ....................................................................... 230
17.1.2. Instrucţiuni de ciclare........................................................................ 238
7
17.2. Funcţii în Java Script................................................................................... 245
17.2.1. Definirea şi apelarea unei funcţii ...................................................... 245
17.2.2. Domeniul de valabilitate a variabilelor ............................................. 247
17.2.3. Parametri ........................................................................................... 250
17.2.4. Funcţii 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. Interacţiune JavaScript – HTML ...................................................................... 276

19.1. Legătura între JavaScript şi HTML............................................................. 277
19.2. Funcţiile 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. Evidenţierea selecţiei căsuţelor de validare, utilizând JavaScript ..... 287
19.3.5. Listele de opţiuni schimbate dinamic cu ajutorul butoanelor
radio, folosind JavaScript .................................................................. 288
19.3.6. Trimiterea unui formular, utilizând evenimentul onsubmit............... 290
19.3.7. Activarea, Dezactivarea, Citirea unor elemente realizate cu
funcţii 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 animaţii .................................................................... 298
20. Elemente avansate JavaScript............................................................................ 300

20.1. Legătura î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. Proprietăţi de culoare ale obiectului document ................................. 312
Anexe
ANEXA A – Culori.................................................................................................... 317
ANEXA B – Caractere în HTML............................................................................... 321
ANEXA C CSS – Specificaţii de stil......................................................................... 325
Bibliografie selectivă................................................................................................... 331
8
Prefaţă
Cartea Proiectarea paginilor Web – HTML, CSS, JavaScript – îşi propune

să fie o lucrare de bază pentru însuşirea limbajelor de marcare HTML, de stiluri
CSS şi de scriptare JavaScript, necesare realizării 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 Universităţii Spiru Haret, cartea oferă coduri sursă şi capturi de ecran
pentru un număr 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 părţi ş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ă realizăm propriile documente multimedia atractive în spaţiul
World– Wide Web, cu ajutorul browserelor Internet Explorer, Netscape Navigator,
Mozzila Firefox, Opera etc.
Partea a doua este dedicată tratării stilurilor. CSS este un acronim pentru
Cascading Style Sheets – (Foi de stil în cascadă) şi constituie un instrument
modern, care ajută proiectanţii de site-uri să îşi îmbunătăţească aspectul
paginilor.
CSS pune la dispoziţie peste 100 de proprietăţi, fiecare având un set de
valori care se pot stabili elementelor HTML, în vederea transformării
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ă
proiectăm 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 decât HTML, introducând în
pagini componenta dinamică, JavaScript are şi unele limite, de exemplu nu poate
scrie şi citi fişiere, nu poate scrie aplicaţii pe parte de server etc.
9
Anexa cuprinde trei tabele: culorile, entităţile folosite în web şi, respectiv,
proprietăţile CSS şi valorile lor posibile.
Această carte se adresează, în primul rând, studenţilor de la specializările de
informatică din Facultăţile de Matematică Informatică din ţară.
Cartea se adresează, de asemenea, tuturor celor interesaţi de crearea unor
site-uri Web atractive şi interactive, utilizând 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. Spaţiul World Wide Web
În acest capitol se introduc principalele concepte şi tehnologii de proiectare a

paginilor Web. Pornind de la descrierea modului în care referinţele pot contribui la
organizarea informaţiei se continuă cu prezentarea conceptelor de multimedia, de
protocol de transfer de informaţii, de programe de navigare, de adrese web şi de
realizare de site-uri.
Tehnologia de bază a spaţiului World Wide Web a fost creată de un institut
de cercetări pentru fizica energiilor înalte din Elveţia, CERN. Tim Berners-Lee şi
echipa sa de la CERN a creat în 1994 un Consorţiu Web, care se ocupa cu elaborarea
şi dezvoltarea standardelor pentru Web. Membrii consorţiului, atunci când au
început să creeze un mecanism pentru identificarea unică a informaţiei din spaţiul de
date, au înţeles necesitatea elaborării unei scheme de legături informaţionale Web,
care să includă o mare varietate de servicii internet, rezultând astfel adresele URL
(Uniform Resource Locator – Descriptor Uniform de Resurse). Pentru a înţelege
World Wide Web trebuie să înţelegem modul în care este organizată informaţia în
mediile tipărite.
Medii liniare multimedia

Transmiterea informaţiei la distanţă se realizează cu anumite tehnologii în
funcţie de specificul datelor, ca de exemplu: tipărituri (cărţi, ziare etc.), servicii
poştale, telefonie, radioul şi televiziunea şi, mai nou, internetul.
Tehnologiile multimedia pot fi definite ca o totalitate de modalităţi de creare,
stocare, regăsire, exploatare şi difuzare a documentelor sau aplicaţiilor compuse din
mai multe elemente, ca de exemplu: text, grafică, imagini, animaţie, sunet etc.
Componenta media a cuvântului multimedia specifică o formă de interacţiune
umană în modelarea şi procesarea computerizată, iar componenta multi semnifică
prezenţa simultană în acelaşi document sau aplicaţie a mai multor tipuri de media.
O aplicaţie multimedia trebuie să conţină cel puţin o media continuă (cu
durată măsurabilă de execuţie, precum: sunet, film, animaţie etc. ) şi cel puţin o
media discretă (fără durată determinată de execuţie: text, fotografii, grafică etc.).
Mediile liniare sunt acele documente în care informaţia are o organizare
liniară: cărţile sunt citite de la începutul cărţii şi până la sfârşitul ei. La fel şi
vizionarea unui film se face liniar. Dar, cu toată organizarea liniară, se poate sări de
la o pagină a cărţii la alta sau se poate crea o strategie de navigare prin carte.
13
Hipermedii şi hipertext
Un hipermediu sau hipertext este un document alcătuit din text, care conţine
informaţia propriu-zisă şi hiperlegături către alte secţiuni sau alte documente situate
pe internet. Hipertextul poate fi considerat un mediu non-liniar, în care trebuie
urmate anumite legături între noduri pentru a accesa informaţia. Nodurile sunt
identificate, în mod unic, prin adresă. De exemplu, dacă dorim să obţinem 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ă obţinem informaţia dorită.
După 1996 putem spune că s-a produs o explozie a spaţiului web,
majoritatea instituţiilor, firmelor, organizaţiilor dorind să aibă propriile site-uri web.
Pentru a reduce diferenţele 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 spaţiul www, bazate pe fibră
optică sau comunicaţii prin satelit. Numărul tot mai mare de utilizatori şi volumul
mare de date transferate prin internet a dus la găsirea de soluţii hard şi soft de
compresie a datelor. Compresia datelor a dus la deteriorarea calităţii acestora. În
urma unor cercetări s-au găsit algoritmi de compresie a datelor multimedia care să
înlăture anumite frecvenţe fără a periclita acurateţea 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
Animaţie / Sunet
− AVI (Audio – Video Interleaved)
− MPEG (Motion Picture Experts Group)
− WMV (Windows Media Video)
− QuickTime, Flash etc.
Prelucrări imagine – Photoshop
Prelucrări pe server – PHP
Lumi 3D – X3D (Extensible 3D)
Animaţie / validare date – JavaScript
Stiluri – CSS (Cascade Style Sheets)
Există două tipuri de codificare a informaţiei grafice:

• Rasterizate (bmp, wbmp, jpeg, gif), constituite din matrice de pixeli;
• Vectoriale (svg, eps), alcătuite din elemente geometrice: linii, curbe,
suprafeţe etc.
Imaginile vectoriale au avantajul de a putea fi redimensionate fără pierderea
calităţii sau modificarea semnificativă a dimensiunii fişierului.
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 deţine calculatoare foarte performante numite servere, care sunt
cuplate cu calculatoare din întreaga lume. Acestea pun la dispoziţia persoanei
solicitante:
− spaţiul pe hardul server-ului de cel puţin 10 Mb;
− o adresă de internet, ca de exemplu: www.adresa-utilz.ro
În spaţiul alocat pe serverul provider-ului, persoana introduce fişiere, docu-
mente multimedia scrise în HTML (HyperText Markup Language), dar şi alte docu-
mente care provin din alte tipuri de servicii de publicare a informaţiilor 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 lansării, Internet Explorer era inferior browser-ului Netscape, dar au urmat
alte versiuni cu îmbunătăţiri care l-au făcut să devină cel mai utilizat browser. Azi
există programe de navigare, ca de exemplu, Opera, Mozilla Firefox, fiecare din ele
având facilităţi suplimentare. În această carte, exemplele au fost făcute cu browser-
ul Internet Explorer.
Funcţiile 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ă fişierul HTML care
conţine codul paginii;
− interpretează comenzile conţinute în codul HTML şi le afişează.
Obişnuim să numim pagină, conţinutul afişat al unui fişier HTML.
Site-ul este un ansamblu format din: spaţiul pe hard, fişierele care sunt
depuse pe acest spaţiu şi adresă. Fişierele dintr-un site nu sunt numai fişiere HTML.
Pot exista toate tipurile de fişiere care se pot găsi pe spaţiul Web şi care au fost
enumerate mai sus (imagini, animaţie, video, sunet etc). Fişierele de pe site pot fi
grupate, ca şi cele de pe hardul calculatorului, în foldere.
Când solicităm browser-ului încărcarea unui fişier de pe un site, acesta va
solicita server-ului, pe care se afla alocat site-ul, furnizarea respectivului fişier.
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 informaţii de la server la calculator, şi invers.
Există mai multe protocoale care se utilizează în transferul de informaţii multimedia.
Cele mai folosite sunt:
− HTTP (HyperText Transfer Protocol) este destinat exclusiv transferului
de informaţii pe Web, adică transferului de fişiere de la server la
calculatorul local pentru browser.
− RTP (RealTime Transport Protocol) este folosit în transmiterea în timp
real a informaţiilor multimedia, oferind servicii de transfer a mediilor
audio şi video interactive. RTP oferă servicii de multiplicare, suportând
transferul datelor la destinaţii multiple (multicast). Acest protocol este
folosit mai ales de aplicaţiile de video-conferinţe şi pentru transmiterea pe
Web a unor programe radio şi audio-video.
− FTP (File Transfer Protocol) este destinat transferului de fişiere de la
server la calculatorul local (download) şi invers, de la calculator la server
(upload). În aceste operaţii 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 cuvântul cheie „FTP”. În această
carte se va folosi protocolul ftp, WS-FTP95, care se poate căuta pe
GOOGLE cu acest cuvânt cheie, sau poate fi download-at de la adresa:
www.uottawa.ca/help/ws_ftpe.html.
Adresarea resurselor Web

Informaţiile sunt stocate în spaţiul 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 căruia se accesează
un fişier 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 către 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 fişierului
rădăcină (home page). Acest fişier este inclus în folder-ul rădăcină a site-ului şi,
pentru majoritatea server-elor, acesta este denumit index.html.
De exemplu, dacă tastăm
http://www.adresa-utilizator.ro
sau numai
www.adresa-utilizator.ro
la un browser, se solicită acestuia să încarce şi să afişeze fişierul rădăcină 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 conţine două foldere,
numite texte şi imagini, iar folderul texte are fişierele curs1.html, curs2.html…
Pentru a accesa unul din aceste fişiere, vom scrie adresa URL www.adresa-
utilizator.ro/texte/curs1.htm
OBSERVAŢIE!
URL-urile nu pot conţine spaţii. 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 spaţiu, 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 întâlni în adresele URL:
Caracter Cod zecimal Cod hexazecimal Codificare URL

Spaţiu 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 dispoziţia utilizatorilor site-uri
contra cost, costuri care variază în funcţie de spaţiul acordat pe server şi de serviciile
furnizate. Există şi firme care oferă site-uri gratuite, dar în acest caz, utilizatorul site-
ului, cât şi toţi vizitatorii trebuie să accepte publicitatea. Pentru a obţine un site
gratuit, solicitantul trebuie să aibe o adresă de e-mail, care poate fi obţinută 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 aveţi), o parolă etc. Dacă datele au fost
completate corect se poate obţine 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ă confirmăm î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 obţinut un site gratuit:
adresa: www.testweb.freewebsites.com
parola: pagweb
User ID: ana
Pentru a putea fi populat un site, trebuie transferate fişiere. Transferul

fişierelor de la calculator la server şi invers se poate face (aşa cum s-a menţionat 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 afişează o fereastră cu 2

panel-uri. Panel-ul drept conţine fişierele din site şi panelul stâng conţine fişierele din
directorul curent al calculatorului local. Transferul fişierelor din folder şi invers se face
cu dublu click pe fişier sau prin Drag&Drop. Se pot crea directoare cu MkDir, se pot
şterge fişiere cu Delete şi se poate schimba unitatea curentă de pe calculator. Pentru un
transfer mai riguros se apasă butonul ASCII din fereastra afişată.
1.4. Crearea paginilor Web

Limbajul HTML se va prezenta în capitolele următoare. Pentru a scrie fişiere
HTML (pagini web), urmăm paşii:
− cu My Computer sau Explorer ne situăm în folderul unde dorim să se
găsească fişierele
− cu ajutorul menu-ului contextual (click cu butonul drept al mouse-ului)
alegem New -> Text Document. Programul NOTEPAD va crea un fişier
cu extensia .txt
− ne poziţionăm pe fişier şi din menu-ul contextual alegem comanda
RENAME, pentru a schimba numele fişierului şi extensia în .html sau
.htm. Extensia .htm este asociată browser-ului Internet Explorer, şi deci
fişierul va avea icon-ul browser-ului
18
− un dublu click pe fişier are ca efect lansarea browser-ului, care va afişa
fişierul (conţinutul va fi vid)
− din menu-ul principal din Internet Explorer, View->Source, NOTEPAD
va încărca codul HTML al fişierului (conţinutul va fi vid)
− scriem un text la alegere, de exemplu „se creează un site”, se salvează
fişierul
− în fereastra browser-ului se apasă butonul „Refresh”, prin care comandăm
browser-ului să reîncarce fişierul care a suferit modificări
− se trece iar în NOTEPAD (View-Source) pentru a continua să scriem
fişierul HTML
OBSERVAŢIE!
Pentru a scrie codul unui fişier HTML, nu trebuie să fim conectaţi la
Internet.
Un fişier HTML poate conţine comentarii pentru a-l face mai uşor de
parcurs. Comentariile pot apărea oriunde în fişier şi nu vor fi afişate de browser.
Sintaxa comentariilor în HTML este:



19
2. HTML – noţiuni de bază
În acest capitol se vor introduce noţiunile de bază ale Limbajului de Marcare

Hipertext (Hypertext Markup Language – HTML) – Limbajul HTML conţine un set
de coduri speciale care se inserează într-un text, pentru a adăuga informaţii despre
formatare şi legături. HTML are la bază limbajul Generalizat Standard de Marcare
(Standard Generalized Markup Language – SGML).
Prin convenţie, toate informaţiile 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ă fişierul 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 fişier cu extensia .html nu conţine niciun marcaj HTML, browser-ul
folosit se străduieşte să redea cât mai corect informaţia.
Să presupunem că am creat fişierul cerere.html, cu următorul conţinut:
Domnule Decan
Subsemnata, Ionescu Ana, va rog sa-mi eliberati o adeverinta, din care sa
reiasa ca sunt studenta a facultăţii de Matematica-Informatica din Universitatea
Bucuresti.
Menţionez ca aceasta adeverinta imi este necesara la R.A.T.B.
05-01-2007 Ana Ionescu
Fişierul va fi afişat de browser, ca în figura de mai jos.
20
Figura 2. 1. Fişierul cerere.html, fără marcaje
Se observă că ceea ce afişează browser-ul nu seamănă 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 afişate de programele navigatoare.
Multe din etichetele HTML sunt elemente de sine stătătoare, dar unele sunt
etichete perechi, având etichete de început şi de sfârşit. Controlul de început se
numeşte şi control (eticheta, tag sau marcaj) de deschidere şi se reprezintă prin
“<…>”, şi cel de sfârşit se numeşte 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> conţinut </TITLE>. Titlul apare pe bara de titlu
a browser-ului utilizat. Blocul de titlu apare în interiorul blocului de antet
<HEAD> </HEAD>.
Conţinutul blocului de titlu va fi titlul paginii web respective şi deci folosirea
lui va fi de folos pentru vizitatorii site-ului.
Introducând în exemplul de mai sus un titlu, Internet Explorer va afişa:
<HTML>
<HEAD>
<TITLE> PRIMA PAGINA </TITLE>
</HEAD>
<BODY>
EXEMPLUL DE CREARE A UNEI PAGINI WEB
</BODY>
</HTML>
Figura 2. 3. Tag-ul <TITLE>

OBSERVAŢII!
− Dacă unul din marcajele perechi nu este închis, sau lipseşte o paranteză
unghiulară la unul din marcaje, atunci programul de navigare nu înţelege
marcajul şi-l va afişa.
− Dacă browser-ul afişează toate controalele de formatare în loc să le
interpreteze se poate ca fişierul 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>.
− Opţional, antetul poate conţine un titlu pentru pagină, cuprins între
controalele <TITLE>…</TITLE>.
22
− Blocul interior corp program poate conţine text şi /sau imagini şi este
cuprins între controalele <BODY>…</BODY> .
− Între parantezele unghiulare <> sau </> şi cuvintele cheie din interiorul lor
nu este permis spaţiul (< HEAD > incorect).
− HTML nu face distincţie î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> conţinut paragraf </P>
Atributul align
Paragrafele sunt aliniate implicit la stânga, aliniere care poate fi schimbată
utilizând atributul align care poate lua una din valorile:
− Left – paragraful este aliniat la stânga (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 opţionale în HTML, dar obligatorii în XHTML.
Exemplul de mai jos adaugă câteva etichete <P> fişierului 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 facultăţii 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 spaţiile multiple, doar
primul spaţiu dintr-o serie va fi luat în consideraţie.
− Paragrafele sunt separate printr-o linie vidă.
− Sfârşitul de marcaj de paragraf </P> poate să lipsească, un nou paragraf
fiind semnalat printr-un nou început de marcaj de paragraf <P>.
− Un rând al unui paragraf are lăţimea ferestrei afişate de browser, în lipsa
altei comenzi.
Eticheta <BR>
Pentru a trece la o nouă linie în HTML se foloseşte 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 doreşte trecerea unui cuvânt pe linia următoare (în cazul depăşirii
dimensiunii ferestrei browser-ului), se foloseşte elementul &nbsp (non-breaking
space). În cazul în care cuvântul dorit nu încape pe o linie, se trece pe linia următoare
şi cuvântul precedent.
În figura de mai jos este redat fişierul 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 facultăţii de Matematica-Informatica din
Universitatea Bucuresti. <BR>
Menţionez 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 doreşte inserarea unui bloc preformatat, adică introducerea unui text
aşa cum este scris în sursa HTML, se foloseşte marcajul pereche <PRE>, care poate
acţiona asupra unui grup de linii şi are sintaxa:
<PRE atribute>…</PRE>
Folosind eticheta <PRE> se obţine formatarea dorită, dar materialul cuprins
în blocul <PRE>…</PRE> apare cu fontul de tip monospaţiat. Într-un font
monospaţiat, fiecare literă are exact aceeaşi lăţime.
OBSERVAŢII!
− 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 entităţi.
− Spaţiile sunt păstrate.
− Etichetele HTML nu sunt ignorate de browser, ci interpretate.
Atributele etichetei <PRE> sunt:
− width – reprezintă lungimea liniei şi poate fi un număr întreg pozitiv sau un
procent
25
− cols – determină dimensiunea pe orizontală (în caractere) a zonei vizibile; în
caz în care rândul va depăşi această mărime, apare o bară de derulare pe
orizontală.
− wrap – determină cum sunt tratate caracterele CR/LF (întreruperi de rând).
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 rând pe altul în interiorul elementului, dar nu vor fi transmise decât
caracterele CR/LF introduse de utilizator.
− Hard sau physical – textul este trecut vizual (şi automat) de pe un rând pe
altul şi sunt inserate automat secvenţele CR/LF.
Pentru ca browser-ul să afişeze fişierul cerere.html aşa 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 facultăţii de Matematica-Informatica din Universitatea Bucuresti.
05-01-2007 Ana Ionescu

</PRE> </BODY> </HTML>
Figura 5. 1 Figura 2. 6. Tag-ul <PRE> în fişierul cerere.html
26
Se observă din figura de mai sus fontul monospaţiat folosit de PRE, în
comparaţie cu fontul normal folosit de <P> (la scrierea titlului)
Etichetele <NOBR> şi <WBR>
Etichetele <NOBR> şi <WBR> se folosesc la aranjarea textului şi sunt
asemănătoare cu tag-ul <BR>, de salt la linie nouă.
Eticheta <NOBR>
Dacă se doreşte ca un text să fie scris pe un singur rând, indiferent de
dimensiunea ferestrei, acesta se introduce în blocul <NOBR>…</NOBR> (nobreak). La
întâlnirea acestei etichete browser-ul dezactivează modul automat de trecere pe linia
următoare. Dacă textul este mai mare decât fereastra, în cazul folosirii tag-ului <NOBR>,
apare o bară de derulare orizontală, care permite vizionarea întregului rând.
Eticheta <WBR>
Pentru a introduce o linie nouă, chiar dacă linia se află în interiorul lui
NOBR, se foloseşte 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 foloseşte eticheta
de riglă orizontală, <HR atribute>. Această etichetă poate fi plasată oriunde în
document şi are ca efect producerea unei linii orizontale pe toată lăţimea 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 număr întreg pozitiv
• printr-un procent, care este o fracţiune din lungimea paginii şi este un
număr 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 următorul cod:
<HTML> <HEAD> <TITLE> Linii orizontale </TITLE> </HEAD>
<BODY> Acesta este o linie fără opţiuni
<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 roşie ş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 redactării unui

document HTML. În acest capitol se vor prezenta unele elemente legate de prezentarea
unui text. Utilizând diferite stiluri fizice (caractere aldine, cursive, subliniate etc.), se
pot evidenţia anumite cuvinte, fraze sau alte genuri de informaţii.
Limbajul HTML permite să utilizăm stiluri logice de text pentru a preciza o
destinaţie 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 afişat cu ajutorul parametrilor predefiniţi 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, îngroşat)
− TT (monospaţiat)
− 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 afişa un text cu stilul italic sau cursive (înclinat), acesta se scrie între
etichetele <I> şi </I>
Stilul B
Pentru a afişa un text cu stilul aldin sau bold (îngroşat) acesta se scrie între
etichetele <B> şi </B>.
29
Stilul TT
Textul monospaţiat sau teleimprimator (teletype) este afişat cu ajutorul
tag-urilor <TT> şi </TT> . Amintim că într-un stil monospaţiat (de exemplu: courier
new) fiecare literă ocupă aceeaşi lăţime chiar dacă este mai îngustă (de exemplu: “i”
comparativ cu “m”). Stilul logic <PRE> … </PRE> afişează textul cu font
monospaţiat, dar acesta din urmă păstrează şi spaţiile dintre cuvinte şi linii.
Stilul U
Textul scris între tagurile <U> şi </U> va apărea subliniat (underline).
Marcajul <U> este mai puţin utilizat deoarece unele versiuni ale navigatorului
Netscape ignoră marcajul <U>. În documentele HTML care conţin legături către 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ă
nuanţe 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 evidenţia 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 afişat tăiat 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 decât 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 decât 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ă lucrăm cu formulele matematice sau dacă este nevoie să utilizăm î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 următor 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 uşor de perceput.
Limbajul HTML oferă, pe lângă stilurile fizice de text, discutate în paragraful anterior,
şi stiluri logice de text care permit să se definească evidenţieri 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 conţine mai multe secţiuni şi subsecţiuni, 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 îngroşat, iar titlul H6 este cel mai de jos şi este
afişat cu cel mai mic şi mai subţire font.
Toate titlurile:
− sunt afişate pe un rând nou şi cu un spaţiu 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 afişate la început de rând nou (<P>,<HR> etc.)
− inline, care sunt afişate pe acelaşi rând (<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 ataşa un stil la un text sau la o porţiune dintr-un rând (în această secţiune
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 afişeze “conţinut” atunci când 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 rând alb înainte şi după el, aşa cum produce elementul P
− nu lasă textul aşa 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. Conţinutul
blocului este afişat începând de pe rând nou, cu spaţiul înainte, după, la stânga şi la
dreapta de citat, practic indentează textul, aşa cum reiese din exemplul următor:
<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 înţeles specific unui font

dintr-un document şi sunt implementate şi afişate diferit de către browser-e.
În continuare descriem succint cele mai importante dintre aceste elemente:
− <EM>…</EM> – pentru evidenţiere şi afişează textul cursiv (o altă
modalitate de a scrie italic)
− <STRONG>… </STRONG> – pentru evidenţiere şi afişează textul aldin
(o altă modalitate de a scrie bold)
− <DFN> …</DFN> – evidenţiază prima apariţie a unui concept, o definiţie
− <CITE>… </CITE> – pentru inserarea unei referinţe la un document;
textul este afişat aldin
− <CODE> …</CODE> – pentru inserarea unui cod de program; textul scris
cu font monospaţiat
− <VAR>… </VAR> – pentru inserarea unor variabile într-un program;
textul este scris cursiv
− <SAMP> …</SAMP> pentru inserarea datelor de ieşire a unei operaţii;
afişat ca font monospaţiat
− <KBD>… </KBD> – pentru inserarea unei comenzi de calculator; afişat ca
font monospaţiat
Exemplul următor utilizează câteva 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 rând.
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 găsit, 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 număr î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
numărarea dimensiunii subtitlurilor, unde <H1> este cel mai mare, iar
<H6> este cel mai mic
− relativ, unde dimensiunea unui anumit text (literă, cuvânt, frază) este
mărită cu o unitate faţă de textul din jurul lui; valori posibile:
+1,+2,…+7 si -1,-2,..,-7. Modificările 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 acelaşi dacă utilizăm
<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 (roşu), silver
(argintiu), teal (verde închis), white (alb) si yellow (galben).
− modul RGB – unde valoarea culorii este dată printr-un număr format
din 6 cifre hexazecimale, câte două pentru fiecare culoare de bază din
tripletul red (roşu), green (verde) şi blue (albastru) şi este precedată de
caracterul #. În anexa A se găseşte 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 aceleaşi atribute ca şi tag-ul <FONT>.
Această etichetă formatează textul conform atributelor specificate, din locul
unde apare şi până la sfârşitul documentului şi deci nu necesită eticheta de închidere. În
37
interiorul elementului BASEFONT se pot găsi alte elemente FONT pentru formarea
unor secvenţe 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 secvenţe de

enunţuri sau articole, numite liste. În HTML există următoarele tipuri de liste:
• numerotate sau ordonate
• neordonate sau marcate
• de definiţii
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
Lipeşte un text
♦ find Find
4. find
Caută un text
♦ delete Delete
5. delete Şterge un text
Liste Ordonate Liste Marcate Liste de Definiţii
Toate tipurile de liste:

− Pot conţine 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 câteva spaţii spre dreapta şi au un rând liber înaintea lor
4.1. Liste ordonate (Ordered lists)
Elementul OL
Lista ordonată are toate articolele numerotate, browser-ul fiind acela care
atribuie automat secvenţa. Pentru a crea o listă ordonată se foloseşte tag-ul pereche
<OL > … </OL>. Elementul OL este element de bloc şi va fi afişat la începutul
rândului.
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
sfârşit </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.
Următorul 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 următor 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 faţa fiecărui 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ă fără niciun element se numeşte listă vidă. Putem crea o listă vidă şi
în scopul de a indenta un text (aşa 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), aşa cum se poate observa în exemplul următor.
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ă opţiune; pentru
lista PASTE, atât ea, cât ş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 definiţi în
etichetele <OL> şi <UL>.
Atributele sunt:
• type – valabil atât pentru listele ordonate, cât şi pentru cele neordonate şi
are aceleaşi valori ca şi atributul type din <OL> şi <UL>.
• value – valabil doar pentru listele ordonate, şi are ca efect schimbarea
numerotării secvenţiale şi poate avea valori numere întregi, valoarea
implicită fiind 1.
În exemplul următor 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 definiţii (Definition Lists)

O listă de definiţii este o secvenţă de descrieri, referinţe sau indexuri,
glosarele fiind exemple clasice în acest sens. Într-o astfel de listă cuvintele sunt
listate în ordine alfabetică, urmate de definiţii ale lor. În HTML o listă de definiţii
este inclusă între perechea de taguri <DL> şi </DL>. Între aceste marcaje, o
definiţie se compune din două părţi:
− Termenul descris (definit) utilizând tag-ul <DT>
− Descrierea (definiţia) termenului, utilizând tag-ul <DD>
Browser-ul afişează termenii şi definiţiile lor pe câte un rând şi indentează
definiţiile. Dacă se doreşte să se economisească spaţii se foloseşte atributul
compact al tag-ului <DL>, caz în care definiţia va începe pe acelaşi rând cu
termenul pe care îl defineşte.
De exemplu, dacă dorim să afişăm orarul unei firme, putem crea o listă de
definiţii, 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 definiţii
Dacă în exemplul de mai sus se modifică tag-ul <DL> cu <DL compact>,

browser-ul va alinia definiţia pe acelaşi rând 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 definiţii compactată
46
5. Tabele
5.1. Generalităţi
Tabelele reprezintă în HTML un element important, evidenţiindu-se prin
tag-urile <TABLE> şi </TABLE>. El are o formă dreptunghiulară şi este alcătuit
din linii şi coloane la intersecţia cărora se află celulele.
Tabelele oferă o mulţime de posibilităţi pentru a evidenţia un text pe mai
multe linii şi coloane, pentru delimitarea spaţiului unei pagini, în vederea grupării
î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 specificaţi 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
OBSERVAŢII!
− Etichetele de închidere </TR> şi </TD> sunt opţionale, astfel o linie
nouă începe atunci când se întâlneşte o nouă etichetă <TR>. În
XHTML aceste etichete sunt obligatorii.
− Dacă o linie a unui tabel are mai multe celule decât restul liniilor,
automat toate liniile vor avea acest număr maxim de celule, browser-ul
adăugând celule vide liniilor, pentru a respecta forma dreptunghiulară a
tabelului.
− În lipsa unor atribute de formatare a tabelului, toate celulele unei
coloane au lăţimea impusă de cea mai lată celulă.
− Celulele unui tabel pot conţine orice tip de informaţie: text, imagine,
tabele, sau chiar combinaţii 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 afişat implicit

− fără chenar şi caroiaj
− aliniat la stânga şi de la rând nou
Atât tabelele, cât şi liniile şi celulele au atribute care le schimbă proprie-
tăţile standard (de aliniere, de dimensiune, de culoare etc.)
5.2. Atributele etichetei <TABLE>

Un tabel poate fi formatat, utilizând următoarele atribute: border,
bordercolor, frame, rules, width, height, align, cellspacing, cellpadding, hspace,
vspace, bgcolor. În continuare vom descrie, pe scurt, aceste atribute.
Atributul BORDER
Aşa cum am mai precizat, un tabel este afişat implicit fără 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
OBSERVAŢII!
• Dacă “valoare”=0, atunci border-ul lipseşte şi este echivalent cu lipsa
atributului din <TABLE>
• Valoarea implicită a border-ului este 1, deci border fără valoare este
echivalent cu border =1
• Dacă “valoare” <> 0 atunci linia de contur este afişată în 3-D
Dacă în exemplul din figura 5.1 adăugăm atributul border la eticheta
− <TABLE border> – va apărea 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
aşa 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, câte două
pentru fiecare culoare, precedate de #.
Dacă în exemplul de mai sus adăugăm ş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 afişare a
lor sunt:
- void – elimină liniile exterioare a11 a12

a21 a22
- above – afişează o linie deasupra
a11 a12
a21 a22
- below – afişează o linie sub tabel a11 a12

a21 a22
- hside – afişează linii în partea a11 a12

superioară şi inferioară a21 a22
a11 a12
- lhs – afişează o linie la stânga a21 a22
a11 a12
- rhs – afişează o linie la dreapta
a21 a22
- vside – afişează linii la dreapta şi la stânga a11 a12
a21 a22
- box – afişează un contur pe toate laturile a11 a12

a21 a22
50
Atributul RULES
Atributul RULES defineşte modul de afişare a caroiajului dintre celulele
tabelului şi are sintaxa rules=”valoare”.
Valorile posibile şi modul de afişare a lor sunt
- none – elimină toate muchiile interioare ale tabelului
a11 a12
a21 a22
- groups – afişează liniile orizontale între toate grupurile din tabel :
THEAD, TBODY, TFOOT şi COLGROUP
- rows – afişează muchiile orizontale între linii a11 a12

a21 a22
- cols – afişează muchii verticale între coloane a11 a12

a21 a22
- all – afişează 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 poziţionat faţă de tabel în funcţie
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 lăţimea (width) şi înălţimea (height) unui tabel.
Valorile posibile ale acestor atribute pot fi date:
− în numere, reprezentând lăţimea şi înălţimea unui tabel în pixeli
− în procente faţă de lăţimea şi înălţimea 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 defineşte spaţiul dintre celule. Valorile acestui atribut se pot
da în pixeli sau în procente faţă de dimensiunea blocului părinte. Valoarea
implicită este “0” pentru tabelele fără caroiaje şi “2” pentru cele cu caroiaj.
Atributul CELLPADDING
Acest atribut defineşte spaţiul lăsat între marginea celulei şi informaţia din
celulă (text, imagine etc). Valoarea implicită este 0. Valorile atributului pot fi date
în numere (ce reprezintă distanţa î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ă distanţa 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 stabileşte culoarea de fundal pentru toate celulele. Valorile

acestui atribut sunt nume de culori sau secvenţă RGB.
Observaţie!
Majoritatea atributelor elementului <TABLE> sunt atribute şi ale
elementelor <TR> şi <TD>. Prioritatea unui atribut (de exemplu, align) este
54
următoarea: 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ă excepţii: dacă celula conţine text, el este afişat 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 adăuga un nume unui tabel se folosesc tag-urile <CAPTION> şi
</CAPTION>, care trebuie să se găsească 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 adăugăm o etichetă tabelului
<HTML>
<HRAD></HEAD>
<BODY>
<TABLE border align=”center”
cellspacing=”2” bgcolor=yellow vspace=”70”>
<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

Aşa 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 terminându-se când se întâlneşte
un nou element <TR>. Atributele elementului TR schimbă parametrii predestinaţi
de descriere a liniilor unui tabel, aşa cum atributele elementului TABLE schimbă
aspectul de afişare a unui tabel. Atributele elementului TR se scriu în eticheta <TR
atribute> şi sunt:
56
− align – aliniază orizontal conţinutul 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 aceleaşi
valori ca şi atributul bgcolor pentru TABLE
Observaţii!
− Toate atributele liniei le găsim ş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ă conţinutul
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. Diferenţa dintre aceste
elemente este aceea că, în cazul utilizării elementului TH, conţinutul 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

Aceşti parametrii indică lăţimea (width) şi înălţimea (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ă lăţimea, respectiv înălţimea 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 aceleaşi valori ca şi atributele cu aceleaşi
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. Conţinutul unei celule poate să se extindă pe mai multe unităţi de tabel
(celule) adiacente, dacă este nevoie să adăugăm, de exemplu, antete pentru tabel.
COLSPAN=”nr” inserează în dreapta celulei un număr de nr-1 celule al
căror conţinut este vid sau poate conţine valoarea celulei care are acest parametru.
ROWSPAN=”nr” inserează pe nr-1 linii de pe aceeaşi coloană câte o
celulă a cărei conţinut este vid sau poate conţine 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 conţine 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 păstra 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 conţinutul celulei 22 se
aliniază la centru, se va înlătura inconvenientul redimensionării tabelului.
<HTML>
<HEAD></HEAD>
59
<BODY>
<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
păstra 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 conţinut “a33” tabelul va avea dimensiunea
iniţială.
<HTML>
<HEAD></HEAD>
<BODY>
<TR><TD>a21<TD
rowspan=2>a22<TD>a23
<TR><TD>a31<TD>a32
</TABLE>
</BODY></HTML> Figura 5. 13. Atributul ROWSPAN
La adăugarea celulelor vide, browser-ele nu afişează cadre la aceste celule.

Pentru a înlătura acest neajuns se foloseşte secvenţa &nbsp (non-breaking space).
În exemplul de mai sus putem evidenţia acest lucru modificând 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 afişa conţinutul unei celule pe un singur rând se utilizează
atributul NOWRAP. În cazul că textul depăşeşte 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 împărţite în 3 categorii şi anume:
Linii de antet
Linii de corp
Linii de final
Astfel, conţinutul unui tabel se împarte în 3 secţiuni cuprinse între
etichetele:
• <THEAD> ... </THEAD> – marchează liniile de antet
• <TFOOT … </TFOOT> – marchează liniile de final de tabel
• <TBODY> ... </TBODY> – marchează liniile din corpul tabelului
OBSERVAŢII!
− aceste blocuri sunt incluse în blocul <TABLE> ... </TABLE>, dar nu
sunt obligatorii în realizarea unui tabel
62
− Fiecare bloc <TABLE> ... </TABLE> poate conţine numai câte un bloc
de secţiune
− Etichetele de sfârşit </THEAD>,</TFOOT>,</TBODY> sunt opţionale.
− Eticheta <THEAD> şi <TFOOT> trebuie să apară după <TABLE> şi
înainte de <TBODY>. Browser-ul poate afişa liniile de final înainte ca
liniile corpului să conţină datele care se încarcă.
− Atributele pentru aceste elemente se aplică pentru toate liniile care
cuprind blocurile, în lipsa altor formatări, şi acestea sunt: align, valign,
bgcolor.
− Fiecare din aceste elemente conţin etichetele <TR> şi <TD> obişnuite.
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
cellspacing=2 bgcolor=yellow vspace=70>
<CAPTION align=bottom> <B> Vânzări </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, aşa cum s-a arătat 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 conţinutului coloanelor grupate şi
poate avea valorile: left (implicit), right, center şi justify
• span – indică numărul coloanelor care se grupează
• valign – indică alinierea pe verticală a conţinutului coloanelor grupate şi
poate avea valorile: top, middle şi bottom
• width – indică lăţimea coloanelor şi poate avea ca valori procente sau
numere care indică numărul 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
formatării:
− primele două coloane au aceeaşi formatare (span=2): grosimea 200,
centrat pe mijloc atât pe orizontală, cât ş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 reţeaua Internet, pot fi desene realizate
cu diverse programe grafice sau pot fi fotografii scanate. Imaginile pot folosi chiar ca
referinţe hipertext, aşa cum se va arăta în capitolul următor.
Imaginile pot fi descărcate de la adrese absolute sau relative. Adresele URL
(Uniform Resource Locator) reprezintă standarde de identificare a resurselor (de
exemplu, fişiere) şi pot fi adrese URL absolute şi relative.
Adrese URL absolute

Adresele absolute identifică locaţia unui fişier imagine de pe Internet sau alte
calculatoare conectate la Internet şi au sintaxa:
protocol/nume_calculator/cale/nume_fişier
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 până la fişierul imagine dorit
– universitatea.jpg – este fişierul imagine a Universităţii Spiru Haret
Adrese URL relative

O adresă relativă identifică locaţia unei imagini, descriind o cale relativă la
directorul curent unde se află fişierul imagine. Adresele relative se referă la
localizarea fişierului imagine de pe calculatorul personal şi are sintaxa:
cale/nume_fişier . Referirea la:
– directorul părinte se poate face prin “../”
– directorul rădăcină 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 următoare.
Există numeroase formate grafice, dar cele mai răspândite sunt:
GIF (Graphics Interchange Format) introdus de Compuserve
JPEG (Joint Photographic Expert Group)
PNG (Portable Network Graphic – Format Grafic portabil în reţea)
Aceste formate sunt dependente de platformă. Imaginile grafice sunt
construite din pixeli, care sunt puncte distincte de informaţie de imagine. Fiecare
pixel necesită un bit de culoare. Principalele caracteristici ale formatelor de imagine
sunt: numărul de culori, compresia, transparenţa, întreţeserea şi animaţia.
Asemănările şi deosebirile dintre cele trei formate grafice sunt:
Imaginile GIF pot utiliza doar 256 de culori, având nevoie de 8 biţi, în
timp ce formatele JPEG şi PNG pot utiliza milioane de culori, având 24 de
biţi de culoare, respectiv 32 de biţi /pixeli de culoare. Ceea ce face
formatul GIF atât de utilizat nu este numai paleta mică de culori (256), dar
şi posibilitatea reducerii numărului de culori, astfel, dacă este nevoie doar
de 2 culori, se utilizează numai un bit, ceea ce reduce dimensiunea
fişierului de 8 ori.
Toate aceste trei formate grafice pot comprima imaginea pentru a reduce
dimensiunile fişierelor. Comprimarea se poate face, în mod diferit, pentru
fiecare format, şi, din aceste motive, ele pot avea dimensiuni mai mici
într-un format decât în altul.
Formatele GIF şi PNG admit culoarea transparentă, în timp ce formatul
JPEG nu admite transparenţa.
Formatele GIF şi PNG admit animaţia, în timp ce, cu formatul JPEG, nu
se poate obţine animaţie. De exemplu, pentru a obţine animaţie pentru
imagini GIF se poate folosi pentru Windows pachetul GIF Construction
Set, iar pentru Macintosh pachetul soft GIFBuilder.
Toate cele trei formate acceptă întreţeserea. De exemplu, când se
vizualizează o pagină web, se pot observa imaginile care apar linie cu
linie, de la forma brută până la redarea finală, aceasta reprezintă
întreţeserea. Deşi dimensiunea fişierelor creşte cu până la 10%, cu ajutorul
acestei întreţeseri, vizitatorul poate să-şi facă o imagine despre ceea ce se
va descărca.
Având î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 fişierelor.
– JPEG pentru fotografii, când se doreşte să se redea cât 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 fişierul

Taj_Mahal.jpg să fie în acelaşi 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ă
fişierul ce conţine imaginea care se doreşte a fi inserată. Fişierele imagine pot avea
68
extensia: .jpg, jpeg, png etc. Fişierul care conţine imaginea se găseşte în directorul
curent (ca în exemplul de mai sus), în alt folder din calculatorul curent sau în reţeaua
web.
În cazul în care fişierul se află:
în altă locaţie decât directorul curent, numele fişierului trebuie precedat de
calea relativă la directorul curent
în reţeaua 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ă încărca din diferite motive,
situaţie în care se foloseşte atributul alt al elementului IMG. Valoarea acestui atribut
este un text, care va fi afişat î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 opţiuni, 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 stânga şi textul „curge” pe lângă imagine în dreapta ei,
începând din partea superioară
– right – aliniere la dreapta şi textul „curge” pe lângă imagine în stânga ei,
începând din partea superioară
69
– top – textul este plasat în partea superioară a imaginii
– middle – textul are plasat, la mijlocul imaginii, numai primul rând, restul
continuând sub imagine
– bottom – textul este plasat în partea de jos a imaginii şi continuă sub imagine
În exemplul următor 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 când se inserează o imagine, browser-ul o va afişa fără chenar. Pentru
a adăuga un chenar unei imagini se foloseşte 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 afişa:
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
lăţime se foloseşte atributul width, iar pe înălţime se foloseşte 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 fracţiune din dimensiunea ferestrei
OBSERVAŢII!
– Dacă se modifică doar o dimensiune, imaginea va fi afişată de browser
proporţional.
– Dacă se modifică ambele dimensiuni, imaginea va fi afişată 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 acelaşi efect ca şi atributele cu acelaşi nume ale
elementului TABLE, şi, anume, asigură distanţa de la imagine la celelalte
componente din pagină, pe orizontală (hspace) şi pe verticală (vspace), adică
definesc spaţii 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 naţional şi
internaţional. <BR> Din trecutul UB –
Înfiinţată prin Decretul nr. 756 din 4 / 16 iulie 1864 al Domnitorului Alexandru Ioan
Cuza şi reclamându-se ca succesoare a structurilor de învăţământ superior inaugurate
de Academia Domnească (1694), Universitatea din Bucureşti a contribuit şi
73
contribuie în mod decisiv la dezvoltarea şi modernizarea învăţământului, ştiinţei şi
culturii româneşti.
</BODY> </HTML>
Figura 6. 6. Atributele hspace şi vspace ale elementului IMG
Atributul clear al elementului BR

Dacă se doreşte a se şterge textul din jurul unei imagini se foloseşte
elementul <BR clear=”valoare”>, unde valoare poate fi:
– all – se şterge tot textul din jurul imaginii
– left – se şterge tot textul din stânga 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. Legături (Link-uri)
Spaţiul World Wide Web (www) a fost creat ca un spaţiu de resurse

multimedia, stocate pe servere plasate în întreaga lume şi conectate la cea mai mare
reţea de calculatoare publice din lume, Internet.
Până acum am învăţat să creăm documente HTML în care am introdus text
şi imagini. În acest capitol vom arăta cum putem accesa orice resursă Web, Internet
şi internă cu ajutorul legăturilor (link-uri). În HTML link-urile se mai numesc şi
referinţe sau hiperlegături.
Hiperlegăturile au următoarele roluri:
– permit trecerea de la o pagină la alta de pe Web şi revenire la pagina
iniţială prin apăsarea butonului Back al browser-ului
– permit trecerea de la o pagină la alta de pe calculatorul propriu
– permit trecerea la fişiere non web de pe Internet (ftp, telnet etc.)
– permit trecerea la fişiere non HTML (.txt, .jpg, .pdf etc.)
– permit vizitarea unei pagini începând dintr-un anumit loc, renunţând la
barele de defilare
– permit trimiterea unui e-mail
Când se execută o hiperlegătură, cu ajutorul mouse-ului (clic cu butonul
stâng pe legătură) sau de la tastatură (se apasă ENTER), se execută următorul flux
de evenimente:
• browser-ul identifică adresa URL a resursei cerute
• browser-ul trimite o cerere către server-ul care găzduieşte resursa
cerută
• server-ul Web analizează cererea, identifică locaţia resursei cerute şi
trimite înapoi browser-ului client, resursa solicitată
7.1. Elementul A
Pentru a crea o legătură se foloseşte marcajul ancoră, care are sintaxa:
<A atribute> conţinut </A>.
Conţinutul dintre marcajele <A> şi </A> poate fi text şi/sau imagine, este
afişat de browser sub formă de legătură (colorat şi subliniat), şi poate accepta
comenzi de la mouse (un clic) sau de la tastatură (ENTER). Când este deasupra
unei legături, cursorul grafic ia forma unei mâini -, indicându-ne astfel că
browser-ul este pregătit să descarce resursa Internet de la adresa URL indicată.
Dacă un document are mai multe legături ne putem deplasa de la una la alta şi cu
75
mouse-ul şi cu ajutorul tastei TAB, iar pentru a face o legătură activă se execută
clic cu butonul stâng pe legătură sau se tastează ENTER. La un moment dat doar o
legătură poate fi activă şi în jurul conţinutului legăturii este afişat un chenar de
către unele browser-e.
Atributele marcajului <A>
Atributele marcajului <A> sunt: href, target, title, name.
Atributul HREF (referinţă hipertext)
Acest atribut este obligatoriu pentru elementul legătură (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 dăm o referinţă către un fişier local, flori.jpg, şi
către pagina Universităţii Bucureşti, 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. Legături
Atributul TARGET
Când utilizatorul activează o legătură, browser-ul înlocuieşte fereastra care
conţine legătura cu o nouă fereastră, specificată de adresa URL din href. Atributul
target face să se schimbe această operaţie implicită şi el are sintaxa
76
target=”nume”, unde “nume” defineşte fereastra în care va fi încărcată 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 încărcate în aceeaşi fereastră mai multe pagini şi, în acest
caz, cu Back şi Forward, se vizualizează paginile încărcate.
În exemplul din figurile 7.3 şi 7.9, se utilizează acest atribut.
Atributul TITLE
Acest atribut are un caracter general şi poate fi ataşat la majoritatea
elementelor HTML. Sintaxa acestui element este: title=”valoare”. Când mouse-ul
este deasupra conţinutului elementului <A> conţinut </A> se transformă într-o
mână şi va afişa 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
secţiunea 7.7.
7.2. Legături către alte pagini Web

Dacă se doreşte 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/fişier
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. Legături la adrese WEB
Acelaşi rezultat obţinem şi dacă scriem şi numele fişierului index care se
încarcă
<A href=”http://www.edu.ro/index .php”> MEC </A>
77
Dacă se doreşte să se viziteze altă pagină a respectivului site, se scrie
numele fişierului .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. Legături la pagini cu atributul target
7.3. Legături cu imagini

Aşa cum am specificat mai sus, o legătură poate fi creată şi cu ajutorul unei
imagini. Ca şi în cazul în care conţinutul unei legături este un text, şi în cazul în
care conţinutul este o imagine, accesarea paginii se face cu un clic, sau un ENTER
pe imagine.
Utilizarea unei imagini într-o legătură 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. Legături cu imagine
Imaginea dintr-o legătură apare încadrată de un chenar de grosime

standard. Dacă se doreşte ca imaginea să nu fie încadrată de chenar, se foloseşte
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 fişier .gif sau .jpg, atunci se
copiază imaginea existentă cu Print Screen, se deschide Paint şi se lipeşte (Paste)
imaginea. Se decupează din imagine ce ne interesează şi se copiază într-un nou
fişier care se salvează cu nume.bmp.
Dacă imaginea dintr-o pagină este un fişier imagine, se dă clic dreapta şi
din Properties se află numele fişierului. 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. Legături cu imagine şi text
7.4. Legături cu adrese URL relative

Adresele URL relative sunt acele adrese care fac referire la pagini de pe
calculatorul propriu, indicând cale/nume-fişier, fără a fi prefixate de protocol şi
nume calculator.
În adresele relative putem folosi caracterele:
../ – pentru directorul părinte
/ – pentru directorul rădăcină.
Se cunoaşte faptul că un site poate să aibă paginile (fişierele) 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, utilizând următoarele referinţe:
– /pag_0.pdf (din rădăcină)
– ../../../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 fişiere 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ă fişere audio.wav.
Un exemplu de cod HTML, utilizând legăturile 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. Legături cu adrese URL relative
7.5. Legături către informaţii non Web

Se pot face referinţe şi la adrese URL absolute de pe Internet, care nu sunt
resurse Web. În adresele URL absolute se înlocuieşte protocolul http cu alte
protocoale non Web (ftp, telnet, gropher etc.)
FTP (File Transfer Protocol) a existat înaintea spaţiului Web şi permitea
accesul la hard-disk-uri externe pentru a putea lista directoare sau fişiere. 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. Legături la site-uri non Web
7.6. Legături către fişiere non HTML

Se pot stabili legături către orice tip de fişiere, nu numai html, ca de
exemplu .pdf, .txt, .gif etc.
În aceste condiţii se întâlnesc două situaţii:
– browser-ul nu poate lucra cu fişierul întâlnit şi atunci încearcă să-l
descarce, executând operaţia download. Va apărea fereastra:
Se optează dacă fişierul 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>
Fişierele .avi se pot găsi şi pe site-uri, dar durează mult transferul pe
calculatorul nostru
– browser-ul cunoaşte tipul de fişier şi acesta va fi deschis în fereastra sa.
Utilizând 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. Legături la fişiere non HTML
Din exemplul de mai sus reiese că două fişiere se deschid în aceeaşi

fereastră FPDF. Pentru a le vizualiza folosim butoanele Back şi Forward.
7.7. Legături interne în cadrul unei pagini

În această secţiune vom defini ancore (ţinte) într-o pagină, adăugarea
legăturilor către aceste ţinte, precum şi legături către ţ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 deplasăm 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 legături către respectivele ancore.
Ancorele se pot defini în două moduri:
– utilizând orice element HTML, inclusiv elementul A cu atributul ID, de
exemplu: <P id=”valoare_id”> sau <A id=”valoare_id”> </A>
– utilizând tag-ul <A> cu atributul name (definit în secţiunea 7.1), de
exemplu: <A name=”valoare_nume”> </A>
Pentru a crea o legătură la o ancoră se foloseşte tag-ul <A>...</A> cu
atributul href, care are ca valoare o referinţă de ancoră, precedată de simbolul “#”,
astfel:
– # valoare_nume
– # valoare_id
Fişierul trebuie să fie suficient de mare, astfel încât secvenţa care conţine o
ancoră să nu fie vizibilă în momentul trimiterii către ea.
În exemplul următor s-a creat un fişier, în care au fost aduse fişierele de la
adresele din exemplul 7.3. Din cauza dimensiunii mari a fişierului, 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/
Instituţii de învăţământ superior
Lista Instituţiilor de învăţământ superior de stat
Lista Instituţiilor de învăţământ superior particulare – acreditate
Lista Instituţiilor de învăţământ 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/
Instituţii de Învăţământ 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 Instituţiilor de învăţământ superior particulare – acreditate
Instituţii de învăţământ 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 Instituţiilor de învăţământ 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ă referinţa de ancoră se adaugă adresei URL a paginii
respective, fişierul legaturi.html având definite ancorele.
Ancorele ne permit să parcurgem uşor o agendă, care este o listă de
dimensiuni mari, cu informaţii sortate alfabetic, ca în exemplul de mai jos.
86
Să considerăm o agendă cu salariaţii 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 legătură la o
adresă e-mail. Legătura va avea atributul href a cărui valoare este mailto (protocol
pentru poştă), 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 evidenţia o adresă (mesajul se va scrie la început de linie), aşa cum reiese din
exemplu de mai jos. Sintaxa elementului ADRESS este:
<ADRESS> <A href=”mailto:niculescurodica@yahoo.com”> Puteti sa-mi scrieti
</A> </ADRESS>
Când se execută clic pe o legătură e-mail, se va deschide o aplicaţie e-mail
care are, în câmpul To, adresa din legătură şi care permite să introducem mesajul.
Se poate trece şi un subiect, care va fi despărţit 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. Legături la adrese e-mail
88
7.9. Culorile legăturilor
O legătură poate fi în una din stările:
− activă
− vizitată
− nevizitată
În funcţie de starea în care se află, o legătură are o anumită culoare şi
anume:
– Starea activă are:
• Culoarea implicită “#FF0000” (roşu)
• 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 legăturilor
89
8. Elementele de structură: HTML, HEAD şi BODY
Orice program HTML este cuprins în blocul exterior: <HTML>….

</HTML>, care mai conţine un bloc de antet <HEAD>…</HEAD>, un bloc de
corp <BODY>…</BODY> şi opţional unul sau mai multe blocuri de comentarii
<!-– conţinut --> ş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 afişate 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 ataşată automat la adresa URL dintr-o referinţă, ceea ce ne permite să evităm
rescrierea codului (dacă toate legăturile indică spre acelaşi server). Singurul atribut
al elementului BASE este href=”adresa URL”
Când 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 apărea î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ă inserăm în paginile web acele informaţii care
să le facă uşor de indexat de către aplicaţiile de căutare/indexare pe web (yahoo,
google, altavista etc.)
Informaţiile conţinute de acest element nu sunt afişate de către browser,
dar este indicat să-l folosim pentru ca informaţiile din site-ul nostru să fie
accesibile cu ajutorul roboţilor Internet şi a motoarelor de căutare. Un antet poate
conţine 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 informaţiilor 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 informaţiei 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 apărut alte modalităţi prin care aceleaşi efecte sau chiar mai multe
se pot rezolva mai eficient.
Realizatorii motoarelor de căutare au dorit să ajute programatorii paginilor
web cu elementul META pentru a evidenţia conţinutul paginilor. Unii autori au
introdus cuvinte care nu au legătură cu paginile web, doar pe motiv de a părea mai
interesanţi. Eticheta META devine astfel inutilă, poate o unealtă pentru SPAM
(informaţii nedorite). Din acest motiv, unele motoare au renunţat definitiv la
informaţiile din META, iar altele, dimpotrivă, dacă paginile nu conţin elemente
META, pun paginile la sfârşitul listei. Există firme specializate care, contra cost,
optimizează site-urile pentru motoarele de căutare (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 (fişier html)
Se utilizează eticheta META cu atributele:
name=”description” content=”sir de caractere”
Motorul de căutare va afişa textul (valoarea atributului content); în lipsa
acestui atribut, motorul va afişa primele rânduri ale paginii.
Cuvinte cheie
Cuvintele cheie specifică motoarelor de căutare cuvintele după care să fie
regăsit un anumit site. Aşadar, cuvintele cheie declarate trebuie să se regăsească în
93
interiorul paginii. În exemplul anterior, dacă se introduc două elemente META,
browser-ul va afişa aceeaşi fereastră ca în figura 8.2, cu excepţia 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 informaţii 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 informaţii nu sunt afişate
de browser este indicat să se introducă şi în blocul <BODY>…</BODY> al
fişierului informaţii, ca în exemplul următor (se observă că pentru a obţine
simbolul © se utilizează secvenţa &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 lângă autorul unei pagini se poate indica şi numele şi adresa
persoanei de contact a paginii, introducând 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 afişa aceeaşi 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 creării şi data actualizării unei pagini

Pentru a transmite motoarelor de căutare informaţii despre data creării şi
data actualizării 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 actualizări. 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, reîmprospătarea sau redirecţionarea unei pagini se
poate folosi atributul http-equiv cu valorile refresh şi pragma. În cazul
reîmprospătării paginii, valoarea atributului content este un număr, care indică
96
numărul de secunde după care pagina se reîmprospătează (refresh). În cazul
redirecţionării paginii la o altă pagină, după un număr de secunde, valoarea
atributului content este : “nr secunde;adresa URL”, unde adresa URL este adresa
noii pagini. Pentru a descărca o pagină ori de câte ori se accesează pagina, se
foloseşte elementul pragma.
În exemplu de mai jos se foloseşte 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 redirecţionarea 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 redirecţionare
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, indicând 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 fişiere 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
secvenţe de program de scriptare în cadrul paginilor web.
Scripturile, ca şi stilurile, pot fi introduse şi în fişiere 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 conţine toate tag-urile prezentate în
capitolele precedente. În continuare vom prezenta atributele elementului BODY,
care sunt opţionale, aşa cum s-a utilizat în exemplele de până acum.
98
Atributele elementului BODY sunt:
Background – indică o imagine care dorim să apară pe fundal.
Imaginea se va repeta atât pe orizontală, cât şi pe verticală până 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 conţinut în blocul
<BODY…. </BODY>.
Atribute de margine – Browser-ele utilizează atribute diferite pentru
margini. Valoarea atributelor de margine este un număr întreg pozitiv
şi reprezintă distanţa în pixeli de la conţinut 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 legăturilor. Aceste
atribute au fost definite în capitolul 7. Reamintim că legăturile au
culori predefinite în funcţie de stările în care se află, astfel:
− legăturile nevizitate au culoarea implicită albastră care poate fi
schimbată cu atributul link=”culoare”
− legăturile vizitate au culoarea implicită purple care poate fi schimbată
cu vlink=”culoare”
− legăturile active au culoarea implicită roşu 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 afişat de browser
− poate fi introdus oriunde în interiorul paginii
− se poate întinde pe mai multe rânduri
8.4. Blocul de centrare

Dacă se doreşte centrarea unei secvenţe de cod fără a utiliza un stil sau
formatarea logică <PRE>, se foloseşte 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>
SUNTEŢI BINE VENIŢI
PE SITE-UL UNIVERSITĂŢII
</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 rândul lor, împărţite în locaţii numite cadre sau frame-uri, şi în fiecare
din aceste cadre să se încarce o altă pagină Web. Astfel, browser-ul va afişa
într-o fereastră mai multe pagini Web. Chiar dacă la introducerea lor de către
Netscape (versiunea HTML 3.1) ele nu au fost uşor acceptate, cu timpul, lucrul
cu cadre s-a dezvoltat (majoritatea browser-elor acceptând lucrul cu ele).
9.1. Bazele organizării cadrelor

În lucrul cu cadre, blocul <BODY> … </BODY> este înlocuit cu unul sau
mai multe blocuri <FRAMESET> … </FRAMESET> care indică volumul de
spaţii alocat fiecărui panou. Fiecare element <FRAMESET> conţine unul sau mai
multe elemente <FRAME> care specifică cadrele individuale care vor conţine
paginile Web pe care dorim să le afişăm simultan. Înainte de a descrie aceste
elemente şi atributele lor, vom da câteva exemple pentru a ne face o idee despre
lucrul cu cadre. În aceste exemple presupunem că există în directorul curent
fişierele .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 afişează două panouri
(cadre) pe orizontală, primul având înălţimea de 40 de pixeli şi al doilea ocupând
restul ecranului. Conţinutul celor două pagini este afişat 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 afişa trei pagini Web,
fereastra fiind împărţită în trei coloane (trei cadre) pe verticală. Aceste cadre vor
avea lăţimile:
– 30% din fereastră – pentru primul cadru
– coloanele 2 şi 3 vor ocupa restul din spaţiul rămas împărţit, astfel:
• coloana a doua va avea 2/5 din spaţiul rămas (2 + 3 = 5)
• coloane a treia va avea 3/5 din spaţiul rămas
103
Cadre – imbricate
Dacă dorim să afişăm 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ă afişăm tot patru pagini într-o fereastră, dar după modelul de
mai jos:
vom avea următoarea 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 împărţi fereastra în mai multe panouri (zone). Fiecare din zonele ferestrei
poate fi împărţită î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 împărţită fereastra (împărţirea pe
orizontală a cadrelor care se doresc a fi afişate)
⇒ cols – descrie coloanele în care este împărţită fereastra (împărţirea 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 (înălţimea
liniei sau lăţimea coloanei) în pixeli
− procente din dimensiunea ferestrei
− n*, unde n este un număr întreg pozitiv, ce reprezintă numărul de
părţi din spaţiul rămas, iar “*” reprezintă spaţiul rămas, de exemplu:
• rows=”10%, 200, *” înseamnă că zona este împărţită în trei linii,
de înălţimi: 10% din fereastră, 200 de pixeli şi respectiv tot spaţiul
rămas
• cols=”100, 2*, 3*, 4*” înseamnă că zona este împărţită în patru
coloane de lăţimi: 100 pixeli, 2/9, 3/9 şi respectiv 4/9 din spaţiul
rămas (2 + 3 + 4 = 9, deci spaţiul rămas se împarte în 9 părţi)
border – indică grosimea în pixeli a bordurilor cadrelor. Valorile
posibile sunt numere întregi pozitive, valoarea 0 înseamnă că bordurile
nu sunt afişate
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 exemplificăm atributele elementului FRAMESET. Să
presupunem că dorim să aducem şase pagini în fereastră, pe care o împărţim 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 secţiunea 9.1 – 9.3., reiese că marcajul nepereche
<FRAME> este utilizat pentru a prezenta conţinutul 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 fişierului HTML sau a fişierului 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 aceleaşi valori şi este prioritar aceluiaşi atribut al
106
elementului FRAMESET. Dacă un cadru are o valoare a acestui atribut
şi cadrele vecine trebuie sa aibă aceeaşi valoare, evident.
⇒ bordercolor – indică culoarea chenarului, iar valoarea acestui atribut
schimbă valoarea aceluiaşi atribut al elementului FRAMESET.
⇒ marginheight – reprezintă spaţiul alb, în pixeli sau procente faţă de
partea de sus (top) şi cea de jos (bottom).
⇒ marginwidth – reprezintă spaţiul alb, în pixeli sau procente faţă de
partea stângă (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ă prezenţa 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 (conţinutul cadrului depăşeşte
dimensiunea lui)
− yes – bara de defilare este mereu prezentă
− no – bara de defilare nu este afişată în niciun caz
⇒ name – atribuie un nume elementului FRAME (cadrului) şi este util în
definirea destinaţiilor pentru legături. Despre acest atribut şi cadrele
destinaţie, se va discuta în secţiunea următoare.
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 reţea, adică unul
după altul. În cadrul aranjării în reţea trebuie indicate atât numărul de linii, cât ş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 destinaţie

Am arătat în capitolul 7 (Legături) că destinaţia unei legături este
fereastra sau cadrul în care va fi încărcată resursa de la adresa URL, indicată de
legătură. Tot atunci am arătat că destinaţia unei legături este implicit fereastra
care conţine legătura, şi cu un clic pe butonul BACK ne întoarce la pagina
iniţială. Destinaţia 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 legături şi
atributul name într-un frame, şi aceste atribute au aceeaşi 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 încărcată în acelaşi cadru / aceeaşi fereastră
− parent – noua pagină se deschide în fereastra / cadrul părinte
− top – pagina este încărcată în fereastra browser-ului
• Valoarea atributului name a unei ferestre deschise de browser sau a
unui cadru încărcat de browser. În cazul în care mai multe pagini se
deschid în aceeaşi fereastră sau acelaşi cadru, cu ajutorul butoanelor
BACK şi FORWARD activăm aceste pagini.
De exemplu, dacă împărţim fereastra în două coloane, prima să conţină un
fişier HTML cu un set de legături, iar în a doua coloană se vor încărca paginile de
108
la adresele date de legături, 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 destinaţie cu atributul name
Dacă la codul din figura 8.2, la fiecare legătură 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 legăturile 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 conţine iniţial prima referinţă.
Dacă se vor activa şi celelalte legături, acestea vor fi încărcate, pe rând, tot în
cadrul cu numele “listaU”. În exemplul 9.6 dacă se încarcă codul de mai sus,
browser-ul va afişa iniţial aceeaşi fereastră, dar în ea se pot încărca toate celelalte
pagini, de la adresele din cadrul stâng.
Figura 9. 7. Cadre destinaţie 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 fişier HTML.
OBSERVAŢII!
− Elementul IFRAME are aceleaşi atribute ca şi elementul FRAME
− Într-o pagină Web se pot introduce oricâte cadre interioare dorim
− Atributul name este utilizat ca destinaţii pentru legături
− Elementul IFRAME are şi unele atribute ale lui IMG, cu aceleaşi
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 arătat cum se pot construi pagini atractive cu

ajutorul marcajelor speciale HTML, animaţiei, cadrelor, imaginilor, sunetelor,
legăturilor 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 primeşte
răspunsuri de la server ceva de genul “Poftim” sau “Iată” (Here is) sau “Nu există”
(Don’t have), aşa cum se poate observa din figura de mai jos:
Program ”Doresc” (I want)

Navigare Server
”Poftim” (Here is)
Calculator ”Nu există” (Don’t have) WEB

Propriu
Figura 10. 1. Interacţiunea dintre browser şi server
Dacă dorim un fişier HTML care include grafică, fiecare imagine este
solicitată server-ului printr-un dialog şi de aceea se încarcă întâi sursa şi apoi se
încarcă imaginile pe rând.
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
Interacţiunea dintre browser şi server va fi de următoarea manieră:
→ Doresc fişierul “tabele.html”
← Iată fişierul “tabele.html”
→ Acum mai Doresc fişierul “peace.jpg”
← Iată fişierul “peace.jpg”
→ Mai Doresc fişierul “casa.jpg”
← Nu există fişierul “casa.jpg”
Error 440 file not found
→ Doresc fişierul de la www.unibuc.ro
← Iată fişierul www.unibuc.ro
Am evidenţiat 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 execuţia 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 aplicaţii de programare a
server-elor, care decid cum va acţiona server-ul ca răspuns la datele primite.
Mediul de programare de pe servere, prin intermediul cărora se comunică cu
programele de navigare, este interfaţa Common Gateway Interface (CGI). Lucrând
î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 execuţiei unor scripturi).
În acest capitol nu se tratează scrierea codului pentru scripturi CGI,
dar se vor prezenta soluţii pentru a le aplica în crearea formularelor.
Formularele WEB sunt asemănătoare cu formularele altor aplicaţii (ca de
exemplu, cele din Word), au aceleaşi tipuri de câmpuri, dar au şi unele caracteristici
proprii foarte utile. Formularele HTML permit utilizatorilor introducerea unor
informaţii, transmiterea lor către server şi întoarcerea rezultatelor obţinute prin execuţia
unor programe de scriptare, inducând astfel un comportament dinamic paginilor WEB.
Formularele sunt utilizate pentru transmiterea datelor către o aplicaţie
client, server sau la o adresa de e-mail.
În continuare se vor prezenta multitudinea de marcaje pentru a realiza
formulare simple care pot conţine una sau mai multe căsuţe text, care pot introduce
text pe post de keywords (pentru motoarele de căutare) până la formulare complexe
cu multe elemente care oferă facilităţi utile de transmiteri de date.
113
10.1. Elementul FORM
Pentru a insera într-o pagină WEB un formular se foloseşte elementul
<FORM> cu următoarea sintaxă:
<FORM atribute>...</FORM>
Elementul FORM are următoarele 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, decât printr-o operaţie 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 secţiunile următoare
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
aplicaţiile de scriptare CGI, atunci lui i se asociază anumite atribute pentru a
evidenţia destinatarul datelor din formular, metoda utilizată în transmiterea datelor,
metoda de codificare a datelor şi fereastra (dacă se doreşte a se schimba cea
implicită – self ) în care apar rezultatele.
Atributele elementului FORM sunt:
− Action
− Method
− Enctype
− Target
Atributul ACTION
Atributul action=”URL” defineşte destinatarul datelor din formular. În
cazul în care acest atribut lipseşte, destinatarul este pagina WEB.
URL-ul poate fi:
− adresa URL a aplicaţiei .cgi de destinaţie, 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” defineşte 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 ataşează la
adresa URL de destinaţie 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
căsuţă de text şi dacă în ea se tastează Popescu, atunci în bara de adrese
va apărea:
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
tranzacţie separată, nu odată cu adresa URL. Din acest motiv în bara de
adrese a browser-ului apare adresa, fără elemente suplimentare la
sfârşit, 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 cantităţi mari de
informaţii.
Atributul Enctype
Acest atribut defineşte 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 secţiunea următoare (codificarea şi transmiterea
datelor)
− ”text/plain” – utilizată cu valoarea “mailto:adresa_mail” a atributului
ACTION, pentru trimiterea prin poştă a datelor. Este asemănătoare cu
valoarea de mai sus, cu excepţia că spaţiile albe nu sunt înlocuite cu
simbolul “+”
− ”multiform/form-data” – utilizată ca metoda POST pentru inserarea pe
server (transmiterea fişierelor sau imaginilor pe server).
115
Atributul TARGET
Acest atribut se foloseşte în cazul în care se doreşte ca formularul cu
rezultate să apară într-o fereastră nouă a browser-ului. Despre valorile posibile ale
atributului am vorbit când au fost descrise cadrele şi legăturile. Valoarea implicită
este self, care are ca efect apariţia rezultatelor în aceeaşi fereastră cu a browser-lui.
10.2. Transmiterea şi citirea datelor

Orice tranzacţie 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 informaţiile introduse de utilizator, în
perechile name=value).
De exemplu, dacă se doreşte o căutare pe motorul Yahoo, pentru un cuvânt
sau o frază, să zicem “CSS” va apărea o pagină cu toate informaţiile cerute şi
URL- ul afişat în căsuţa ADDRESS a browser-ului este:
http:// search.yahoo.com/ bin/ search?p=ccs.
Se observă că apare caracterul “?” care indică faptul că există informaţii
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 conţine valoarea specificată după semnul de întrebare (?).
Se poate introduce o legătură în pagina WEB care să apeleze, de exemplu,
Yahoo pentru a căuta informaţii referitoare despre Spiru Haret:
<A href=http://search.yahoo.com/search?p=Universitate+Spiru+Haret>
Informaţii despre Spiru Haret </A>.
Se ştie că spaţiile nu sunt permise în adresa URL, şi atunci se foloseşte
simbolul ”+” pentru a le trimite serverului.
Dar este mult mai simplu să utilizăm formulare pentru a introduce
date şi apoi acestea să fie prelucrate în funcţie de rezultatele primite.
Codificarea datelor
Înainte de a trimite date la server, browser-ul codifică datele. Atunci când
se utilizează metoda GET, informaţiile sunt transmise scriptului de pe server. Toate
informaţiile sunt afişate 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 “&”;
− spaţiile 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
Spaţiu %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 informaţia 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 destinaţie se foloseşte elementul

<INPUT type=submit value=“valoare”>, care va fi descris în secţiunea următoare.
După transmiterea datelor, primul pas pe care-l execută scriptul destinatar
este să decodifice URL-ul transmis, care are, la sfârşit, 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 câmpurile unui formular destinate introducerii datelor se specifică cu
ajutorul marcajului <INPUT atribute>. Există zece câmpuri î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 funcţie de tipul de intrare şi pot
fi:
− TYPE=”tip_câmp” – indică tipul câmpului de intrare şi este un atribut
obligatoriu al elementului <INPUT>
− NAME=“nume” – este un identificator pentru câmpul de intrare. Este
indicat a fi utilizat
− VALUE=“valoare” – stabileşte valoarea elementului. Perechea
nume=valoare se foloseşte pentru transmiterea datelor
− SIZE=“număr” – indică numărul de caractere afişate dintr-o căsuţă de
text
− MAXLENGTH=“număr” – indică numărul maxim de caractere care pot
fi introduse într-o căsuţă text. Dacă valoarea size este mai mică decât
valoarea maxlength, atunci apare o bară de derulare
− DISABLED – indică inactivitatea unui câmp al formularului (utilizatorul
nu poate selecta căsuţa)
− READONLY – nu permite modificarea conţinutului unui câmp
− CHECKED – indică faptul că un buton radio sau o căsuţă 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 câmp de text cu ajutorul căruia se introduc
parametrii într-o pagină WEB se foloseşte atributul type al elementului <INPUT>
cu valoarea “text”, astfel <INPUT type=”text”>. Toate atributele elementului
118
<INPUT>, definite mai sus, cu excepţia atributului CHECKED, pot fi asociate cu
tipul text, aşa cum reiese din exemplul următor:
<HTML>
<HEAD></HEAD>
<BODY>
<FORM name="FTEXT">
<!...Destinaţia 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 secţiunea anterioară, faptul că atunci când un formular
este completat, datele sunt transmise de browser spre server. Pentru a executa
această acţiune 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 când este apăsat browser-ul,
codifică datele şi trimite informaţiile 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 apărea 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 diferenţia prin folosirea atributului name şi
prin atributul value, a cărei valoare va fi scrisă pe buton.
Datele care se transmit sunt în funcţie 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, cât şi despre el
− Dacă butonul este dezactivat atunci el nu transmite nimic
− Nu se transmit decât 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,
completând programul din figura 10.4. cu butoane de transmisie.
Se vor introduce două butoane de transmisie, unul predefinit şi altul numit
prin secvenţa următoare:
<INPUT type=”submit”>
<INPUT type=”submit”name=”optează”value=”GO”>
Formularul va fi îmbogăţit cu două butoane:
Figura 10. 5. Butoane de transmisie
− Dacă se apasă butonul SUBMIT, atunci în caseta de adrese va apărea:

AdresaURL?nume=Niculescu&pren=FlorentinaRodica&email=rodica
niculescu@gmail.com
− Dacă se apasă butonul GO se va mai adăuga, la sfârşit, 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 foloseşte 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 încărcată
• border=“număr” – indică grosimea chenarului în pixeli. Dacă
numărul=0, chenarul imaginii lipseşte
• 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 înlocuieşte butonul de transmisie
predefinit (SUBMIT QUERY) cu un buton de imagine, atunci vom folosi tipul
image astfel:
<INPUT type=”image”src=”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 asemănător cu tipul text, cu aceleaşi
atribute, diferenţele sunt:
− atributul value este obligatoriu
− datele introduse de utilizator sunt afişate prin caracterul ”*” sau ”y”
(depinde de browser) din motive de siguranţă
121
Pentru a insera în formular un câmp de tip parolă se foloseşte atributul type
cu valoarea password, astfel:
<INPUT type= “password”, name= “parolă”, value=“123456”>
De exemplu, dacă vrem să schimbăm parola veche, se introduce parola
nouă de două ori. Codul pentru această acţiune 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 apărea:
user=guest&old=st&new1=r1234f&new2=r1234f
OBSERVAŢIE!
Pe lângă 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 adăuga 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. Utilizând JavaScript se poate înlocui <INPUT> cu <BOTTON>
122
...</BOTTON>. Acest buton va avea aceleaşi atribute ca SUBMIT: type, name,
value etc.
Tipul HIDDEN (ascuns)
Tipul ascuns generează un element de formular, utilizând valoarea hidden
a atributului type. Acest tip permite transmiterea de informaţii fără ca utilizatorul să
le poată vedea. Acest element este folosit în cazul:
− în care pagina este generată automat de un script CGI
− pentru a adăuga 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 foloseşte 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 către browser. Se poate ca
mai multe casete de validare să aibă acelaşi 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, considerăm următorul 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ă conţinutul tuturor
câmpurilor 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
semnificaţiile 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 adăuga un buton reset.
Figura 10. 10. Tipul Reset
Tipul RADIO
Acest tip de intrare afişează un buton cu interblocare gen radio. Dacă mai
multe astfel de butoane au aceeaşi valoare a atributului name, ele sunt grupate
automat astfel încât un singur buton din grup să poată fi selectat. Butonul radio
este asemănator cu butonul de validare şi are aceleaşi atribute. Pentru a insera un
buton radio într-un formular se foloseşte elementul <INPUT> al cărui atribut type
are valoarea radio (type=radio). La un moment dat numai un buton radio din cele
din grup (atributul name trebuie să aibă aceeaşi valoare pentru toate butoanele din
grup) poate fi selectat. Denumirea de buton radio vine de la stilul de afişare al
acestor elemente de către browser (ca nişte 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 lipseşte, 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 alăturat unui buton este irelevant pentru
programul de scriptare de pe server.
Vom exemplifica grupul de butoane radio prin următorul exemplu:
125
<HTML>
<HEAD></HEAD>
</BODY>
<B> Clasificarea studenţilor 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 apărea datele, deoarece s-a folosit
metoda POST, dar în fereastra COMPOSE va apărea:
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 fişier
programului pe server. Pentru a insera un fişier într-un formular se foloseşte
atributul type al elementului <INPUT> cu valoarea file (type=”file”).
Formularul va afişa un câmp text pentru introducerea numelui fişierului şi
un buton BROWSE pentru a selecta un fişier din calculator, în cazul în care nu se
cunoaşte calea fişierului. Se pot transmite orice tip de fişiere.
Acest tip (file) este dificil de programat pe server, iar Internet Explorer nu
permite lucrul cu tipul file.
Se pot încărca mai multe fişiere cu ajutorul unui formular şi pentru a le
distinge se foloseşte 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
secţiunea precedentă a fost detaliat elementul INPUT, cu cele zece valori posibile
ale atributului său, TYPE.
În această secţiune 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 foloseşte blocul <TEXTAREA> conţinut </TEXTAREA>.
Atributele elementului TEXTAREA sunt:
− name – este numele câmpului care va fi transmis în perechi cu
conţinutul casetei
− rows – indică dimensiunea în linii a casetei de text în zona vizibilă. În
cazul în care textul depăşeşte numărul de linii indicat ca valoare a
acestui atribut, apare o bară de defilare pe verticală
− cols – indică dimensiunea în coloane (adică caractere) a câmpului de
textare rezultat. În cazul în care un rând depăşeşte această dimensiune,
apare o bară de defilare pe orizontală
− readonly – conţinutul elementului nu poate fi schimbat de utilizator
− wrap – tratează întreruperile de rând CR/LF şi poate avea valorile:
• soft (valoare implicită) – textul se va deplasa automat la rând nou
când 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 rând nou, dar sunt transmise şi
caracterele CR/LF inserate automat la trecere la alt rând.
Pentru exemplificare reluăm exemplul din figura 10.11 şi adăugăm o
casetă text cu linii multiple cu ajutorul blocului:
<P>COMENTARII:
<TEXTAREA name=”coment” rows=”5” cols=”50” wrap=”off
”></TEXTAREA>
Formularul va avea adăugată 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 afişată ca un meniu pop-up şi din listă nu se poate
selecta decât un singur articol
− mai multe articole şi lista va fi afişată ca o listă derulantă, caz în care pot
fi selectate mai multe articole (utilizând atributele MULTIPLE şi SIZE).
Pentru a selecta mai multe elemente se foloseşte tehnica cunoscută:
• dacă articolele sunt într-un interval se ţine apăsată 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>, câte 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ă numărul articolelor din listă care vor fi afişate o dată
− multiple – oferă posibilitatea de a alege mai multe elemente din listă,
dacă size are valoarea mai mare decât 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 adăuga o listă cu opţiunile formei de învăţământ, adăugând următoarea
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ă selectăm 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 următorul 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. Hărţi de imagine
În capitolul 7 Legături s-a arătat că o imagine poate fi folosită în loc de

text la definirea unei legături, 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 legătură.
O imagine poate să încarce o singură pagină.
Hărţile imagine permit însă ca o singură imagine să definească mai multe
legături. În loc să scriem o listă cu legături spre diferite pagini, se poate încărca o
imagine grafică şi, executând un clic pe o anumită zonă a ei, să se execute una din
operaţiile definite în capitolul 7 (încărcarea unei pagini, trimiterea la o adresă e-
mail, evidenţierea unei ancore etc.), prin executarea unui clic în altă zonă să se
execute altă operaţie etc.
Hărţile imagine sunt elemente grafice care dispun de zone specifice
asociate cu diferite URL-uri.
Există 2 căi de realizare a unei hărţi imagine:
− Definirea hărţii imagine pe server
− Definirea hărţii imagine la client
11.1. Definirea hărţilor imagine pe server

Acest mod de definire nu face obiectul acestui capitol, dar va fi descris
succint.
În acest mod de definire a hărţilor pe server trebuie interacţionat, în mod
constant, cu server-ul. Definiţiile 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 conţine imaginea, este împachetat într-un
href ce indică un fişier de tip MAP (fisier.map), conţinut de serverul Web care
specifică toate zonele imaginii şi le asociază unor URL-uri.
Eticheta <IMG> va conţine 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 fişierelor
.map şi testarea hărţilor la server depind de serverul pe care se lucrează.
Unele servere permit să indicăm un fişier aflat oriunde în sistem, altele
solicită ca aceste fişiere să se afle într-un director special de fişiere map, sau altele
nu permit lucrul cu astfel de fişiere.
Există servere Web cunoscute ca CERN şi NCSA. CERN este institutul
elveţian, din care s-a desprins o echipă condusă de Sir Tim Berners Lee care a creat
spaţiul World Wide Web, limbaje specializate, precum SVG (Scalable Vector
Graphics), SMILE (Synchronized Multimedia Integration Language) etc.
NCSA este Centrul Naţional pentru Aplicaţii de Super Calculatoare
(National Center for Super-Computers Applications) al Universităţii din Illinois,
care a elaborat programul de navigare Web Mozaic.
Serverele NCSA folosesc, pentru fişierele.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 hărţi imagine la client

Pentru a înlătura dificultatea lucrului cu hărţi pe server există varianta de
definire a hărţilor de imagine la client, adică deplasarea lucrului de la server la client.
În ambele variante de lucru cu hărţi imagine (la server sau la client) există
programe pentru trasarea zonelor care ne scutesc de munca dificilă de a evidenţia
zone pe hartă, mai ales dacă acestea sunt poligoane. Un astfel de program este
MAP THIS care va fi descris în secţiunea următoare.
Pentru a defini o imagine hartă, avem de parcurs trei paşi:
− inserarea unei imagini
− inserarea hărţii
− inserarea legăturilor
În continuare se va prezenta succint fiecare din cele trei etape.
Inserarea unei imagini

Pentru inserarea unei imagini ca o hartă se foloseşte 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 hărţii. De exemplu:
<IMG src = “C: / POZE / Radu-Florin.jpg usemap = “#copii”>
Inserarea hărţii imagine

Pentru definirea unei hărţi imagine se foloseşte tag-ul pereche <MAP>…
</MAP>.
În interiorul acestui tag se găsesc unul sau mai multe tag-uri <AREA>,
câte unul pentru fiecare zonă a hărţii.
132
Elementul <MAP> are un atribut obligatoriu name, care indică numele
hărţii şi care trebuie să fie acelaşi cu numele imaginii inserate.
<MAP name =”copii”>
Inserarea legăturilor
Pentru inserarea legăturilor se utilizează tag-ul <AREA atribute>. Pentru
fiecare legătură sau zonă dorită se foloseşte 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 încărca o pagină sau o altă operaţie.
Atributele elementului AREA sunt:
− shape – defineşte 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 legături
(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 doreşte să se stabilească
o legătură nu se foloseşte acest atribut sau se foloseşte 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 colţului din stânga
sus ( X1,Y1) şi ale colţului 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

vârfurilor unui poligon, (Xi,Yi)
(X2,Y2) (X3,Y3)
.
.
(Xn,Yn)
(X1,Y1)
− target – defineşte fereastra în care va fi încărcată resursa

− title – se utilizează pentru inserarea unei sugestii când mouse-ul este
deasupra unei zone
În exemplul de mai jos se defineşte o hartă imagine cu 4 zone de legătură.
Este harta unei vile. Zonele delimitează nivelele vilei şi fac trimitere la fişierele:
Parter.html, EtajI.doc, EtajII.doc. În cazul în care se dă clic în altă zonă din hartă
(decât cele definite), se face trimitere la fişierul 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. Hărţi 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ă obţinem coordonatele zonelor
automat cu ajutorul unor programe speciale, de exemplu MAP THIS.
Programul MAP THIS este folosit în scopul obţinerii 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
obţinute. Programul se poate lua de pe Internet, este free şi este asemănător
programului BITMAP (acesta din urmă însă nu generează automat coordonatele,
ci numai le afişează în bara de stare).
Paşii care trebuie urmaţi pentru a împărţi o imagine .gif sau .jpeg în zone sunt:
1. Se lansează programul MAP THIS, se apelează menu-ul FILE comanda
NEW, Okay. Va apărea o fereastră cu fişierele .gif şi .jpeg.
Figura 11. 2. Incărcarea unei imagini
2. Fereastra poate fi redimensionată cu ZOOM IN (măreşte) ZOOM

OUT (micşorează).
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 doreşte a fi ştearsă, prin apăsarea butonului
deasupra zonei şi se dă comanda DELETE AREA sau se apasă
4. După trasarea zonelor, trebuie să adăugăm referinţe pentru fiecare din
ele. Pentru aceasta, din meniul View se selectează Area List şi va
apărea în stânga ferestrei o listă cu zonele numerotate:
138
Figura 11. 5. Lista zonelor
Când este selectat un element al listei va apărea zona corespunzătoare,
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 fişierului URL legătură.
Figura 11. 6. Adresa fişierului legătură

6. După definirea zonelor şi a URL-ului la care se leagă zonele definite se
salvează fişierul, astfel: FILE-SAVE AS -CSIM şi se salvează sub
numele .html.
Dacă se salvează:
• Într-un fişier deja existent care conţine imaginea introdusă, va apărea
codul pentru hartă <MAP><AREA 1>…..<AREA n> <MAP>
• Într-un fişier nou, urmează ca în acesta să fie inserată imaginea cu
<IMG> şi harta este complet definită
Fişierul 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 neapărat imaginea., astfel:
<IMG src=”facmat.JPG” usemap=”#facmat”
Executând fişierul harta_facmat.html, browser-ul va afişa:
Figura 11. 7. Fişierul html creat cu MAP THIS

Clic în partea stângă: se deschide fişierul istoric .doc, clic în centru: se
obţine legătura la site-ul facultăţii de matematică şi clic dreapta: se va obţine
fişierul sali_calculatoare.HTML.
140
Figura 11. 8. Fişierele legătură la hartă
141
12. Facilităţi suplimentare Multimedia
Conceptul multimedia este unul din cele mai tentante şi moderne concepte
utilizate în lumea informaticii. Prin tehnologii multimedia se înţelege totalitatea
modalităţilor de creare, utilizare, stocare, regăsire şi difuzare a aplicaţiilor din
medii multiple, precum text, grafică, imagine, sunet şi animaţie. Multimedia
semnifică prezenţa simultană a multor astfel de medii într-un document (ca de
exemplu, o pagină web). Termenul de hipermedia desemnează documentele
multimedia care cuprind hiperlegături, acestea fiind modul uzual de existenţă a
documentelor multimedia pe spaţiul Web.
Fişierele multimedia pot fi fişiere de:
Aplicaţii, care sunt executate de sistemul de operare şi au, în general,
extensia .exe, (ca de exemplu, programe de prelucrare grafică, de calcule
etc.) Unele aplicaţii sunt independente (WORD, EXCEL, MAP THIS
etc.), iar alte aplicaţii sunt dependente (ca de exemplu, controale
ActiveX, programe PLUG-IN etc.)
Date, folosite pentru stocarea datelor. Extensia acestor tipuri de fişiere
indică tipul datelor stocate şi a aplicaţiei, folosită pentru citirea, editarea
şi tipărirea lor. Sistemul de operare al calculatorului stabileşte o legătură
între fişierele de date şi aplicaţia care prelucrează datele din fişier.
Pentru a constata dacă un fişier este de aplicaţie 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 apărea:
• Application – dacă fişierul este de aplicaţii (de exemplu, WORD)

• Mediu – de exemplu text, image, video etc. dacă fişierul este de
date. În acest caz mai apare o casetă Open With care indică aplicaţia
prestabilită care va deschide fişierul respectiv de date
12.1. Multipurpose Internet Mail Extensions (MIME)

Pentru a putea fi recunoscute de aplicaţiile hypermedia, fiecare fişier 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 fişierelor multimedia în tipuri şi
subtipuri (de exemplu, text/html, text/CSS, image/jpg, image/gif etc.).
142
În capitolul 2 am clasificat fişierele de date pe diferite medii.
În tabelul de mai jos vor fi date o parte din fişierele de date, specificând
extensia, tipul şi subtipul MIME.
Descriere Extensie de fişier Tip/subtip MIME
text HTML html,htm text/html

text obişnuit txt text/plain
fişier CSS Css text/css
imagini GIF gif image/gif
fişiere JPEG jpg,jpeg,ipe image/jpeg
PNG png image/x-png
fişiere TIFF tiff,tif image/tiff
fişiere Microsoft Bitmap bmp image/x-ms-bmp
fişiere audio de bază au,snd audio/basic
fişiere 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
fişiere Microsoft Word doc application/msword
fişiere Microsoft Excel xls application/ms-excel
fişiere Microsoft Power ppz application/mspowerpoint
Point
fişiere Microsoft Power ppt application/vnd.ms-powerpoint
Point
fişiere VRML wrl,vrml x-world/x-vrml
12.2. Aplicaţii Plug-in şi ActiveX

Aplicaţiile dependente sunt utilizate ca elemente ajutătoare pentru alte
aplicaţii. 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 aplicaţii dependente care ajută browser-ele să afişeze
corect datele din fişierele de date, în ferestrele browser-ului.
143
Aceste programe se găsesc pe Internet şi se pot descărca gratuit. Fiecare
program de completare are în vedere o serie de extensii de fişiere şi tipuri MIME.
De exemplu, programul Adobe Acrobat lucrează cu fişiere .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 fişier 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 corporaţiei Microsoft care
permite să inserăm obiecte COM şi alte aplicaţii. Controalele ActiveX se pot insera
în aplicaţii pentru a putea fi refolosite cu toate funcţionalităţile lor. Controalele
ActiveX funcţionează ca o interfaţă, astfel codul inclus în pagina Web
interacţionează cu controlul ActiveX, iar acesta interacţionează 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, animaţie/video etc.
144
Fiecare control ActiveX se introduce în paginile Web cu ajutorul etichetei
<OBJECT> şi cu parametrii specificaţi de eticheta <PARAM>, etichete care vor fi
descrise în secţiunile următoare.
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 oricărui tip
de informaţie multimedia (imagini, aplicaţii, fişiere, 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 înălţimea, lăţimea elementului multimedia inserat
• align – defineşte alinierea elementului multimedia inserat
• hspace, vspac – definesc spaţiul alb din jurul elementului inserat
• border – defineşte spaţiul alb şi chenarul din jurul elementului inserat
• title – indică o sugestie atunci când suntem cu mouse-ul deasupra
elementului
• data – indică afişarea de către browser a fişierului multimedia şi are ca
valoare o adresă URL validă
• type – determină tipul şi subtipul MIME asociat fişierului
• id – indică un nume ce reprezintă un identificator unic de clasă
• classid – specifică elementul de control ActiveX ce va fi folosit pentru a
reda/afişa/rula fişierul multimedia inserat. Acest atribut are ca valoare un
cod unic al clasei unui control Microsoft ActiveX recunoscut, care se
găseşte în Registry Editor şi are forma:
“classid:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”
Tabelul de mai jos conţine 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Ă: când se instalează un program el se înregistrează în registre pentru

aplicaţii ale Windows-ului. Fiecare aplicaţie are un cod unic, numit GUID
(Globally Unique IDentifier), care este acelaşi 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 găsit în registre de către browser, înseamnă că el nu
este instalat pe calculatorul propriu şi pentru a-l descărca şi instala se foloseşte
atributul:
• codebase – care indică browser-ului locaţia de unde se poate descărca
programul, de obicei se introduce locaţia 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ă
fişierul care trebuie să ruleze acest obiect şi în ce mod (aşa cum un obiect deţine
147
anumite metode care sunt descrise în funcţie de tipul său). Forma tag-ului
<PARAM> este: <PARAM name = “nume” value =“valoare”>.
Am arătat că se pot insera fişiere, imagini, aplicaţii, pagini şi ActiveX cu
ajutorul etichetei <OBJECT>, care poate avea anumiţi parametri în funcţie de
obiectul inserat.
Inserarea diferitelor fişiere

Pentru inserarea diferitelor fişiere, 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 fişierelor cu ajutorul elementului OBJECT
Inserarea imaginilor
În ultimul timp, există tendinţa 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 miniaplicaţiilor
Miniaplicaţiile pot fi inserate în pagini HTML, folosind elementul
<applet> şi <OBJECT>.
În acest capitol se va folosi elementul <OBJECT> pentru a insera unele
aplicaţii într-o pagină. Browser-ul Netscape nu acceptă inserarea miniaplicaţiilor
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ă redăm un fişier .avi sau un fişier .mpeg. Pentru
aceasta este nevoie de inserarea programului Windows Media Player. Cu acest
program putem reda fişiere: .avi, .mpeg,,mpg, .wmv, .wma, aşa 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 căruia putem realiza animaţie, necesară, de exemplu, în publicitate.
Sintaxa acestui element este <MARQUEE> bloc </MARQUEE>, unde
conţinutul blocului se deplasează într-o anumită direcţie pe ecran şi poate conţine
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ă direcţia de mişcare a blocului şi poate lua valorile:
• left – valoare implicită, de la dreapta la stânga
• right – de la stânga la dreapta
• down – de sus în jos
• up – de jos în sus
behavior – indică tipul de scroll şi poate lua valorile:
• scroll – valoare implicită, conţinutul blocului se deplasează de la o
margine la alta continuu, părăsind ecranul şi apoi reapare
• slide – conţinutul blocului se opreşte la marginea opusă apariţiei
• alternate – conţinutul blocului se deplasează alternativ de la o
margine la alta a ecranului fără să-l părăsească
151
scrolldelay – determină timpul în milisecunde între două afişări
consecutive ale blocului (valoarea implicită este “85”). Exemplu
<MARQUEE scrolldelay=1000> bloc </MARQUEE> determină
deplasarea conţinutului blocului la interval de 1 secundă
scrollamount – determină numărul de pixeli cu care se mută conţinutul
blocului la un pas (valoarea implicită este “6”)
loop – indică numărul de cicluri pe care le efectuează conţinutul blocului
într-o execuţie (valoare implicită “infinit”); acest atribut trebuie folosit
cu atributul behavior=slide, altfel conţinutul blocului dispare când se
termină ultimul ciclu
bgcolor – determină culoarea de fond a spaţiului unde se deplasează
conţinutul blocului
width – determină dimensiunea blocului în lăţime şi se exprimă în pixeli
sau procente
height – determină dimensiunea blocului în înălţime şi se exprimă în
pixeli sau procente
vspace – determină spaţiul alb din jurul blocului pe verticală
hspace – determină spaţiul 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 lângă alta),
şi care va defila în mod continuu pe ecran, iar cel de al doilea conţine 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 oricărui marcaj
HTML, în vederea realizării unor pagini WEB profesionale.
Foile de stiluri HTML sunt asemănătoare cu stilurile de formatare a unui
document WORD şi permit introducerea unei mulţimi de atribute prin care se pot
defini fonturi, culori, alinieri etc.
Consorţiul Web W3C de la CERN(realizatorul spaţiului Web) pune la
dispoziţia creatorilor de pagini întreaga specificaţie CSS la locaţia
http://www.w3.org/TR/REC-CSS2/
Legăturile 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 excepţia elementelor BASE, HEAD, BASE
FONT, HTML, META, PARAM, SCRIPT, STYLE, TITLE) permit
acest atribut. Valorile atributului STYLE constau dintr-o listă de
specificaţii, 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 fişier 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 realizării paginilor WEB.
Majoritatea elementelor HTML (cu excepţia celor enumerate mai sus)
admit următoarele atribute:
style – atribuie un stil intern unui element. Valorile posibile sunt
specificaţii (declaraţii) de stiluri, separate prin ”;”, ca de exemplu
style=”font-style:italic; font-size=10pt”
157
title – defineşte o informaţie pentru un element. Valorile sunt şiruri de
caractere scrise între ghilimele, care apar într-un chenar galben, atunci
când suntem cu mouse-ul deasupra elementului
dir – indică direcţia de afişare a conţinutului elementului. Valorile
posibile sunt: ltr-de la stânga la dreapta şi rtl- de la dreapta la
stânga
lang – defineşte limba în care va apărea scris conţinutul elementului.
Valorile posibile sunt maxim 5 caractere între ghilimele, de exemplu
”en”, ”en-us”
id – defineşte un identificator unic pentru un element (a fost folosit în
capitolul precedent ca atribut al elementului OBJECT)
class – defineşte o clasă a elementului. Valorile posibile sunt liste de
unul sau mai mulţi identificatori separaţi prin spaţiu, de exemplu
class=”nume1,.....,numen”
Stilul in-line pentru un element este introdus printr-un atribut STYLE.

Valoarea acestui atribut este o listă de specificaţii de stil, separate prin ‚;” şi
cuprinse între ghilimele.
O specificaţie de stil sau o declaraţie de stil este ca un atribut pentru un
marcaj, dar cu următoarea sintaxă:
nume proprietate:valoare-proprietate
unde:
− nume-proprietate defineşte o proprietate şi nu este cuvânt rezervat
− valoare-proprietate - este o valoare credibilă pentru proprietate
Exemple de declaraţii de stil :
• color: yellow – stabileşte culoarea galbenă a textului
• font-style: italic – stabileşte stilul cursiv pentru text
Cu ajutorul stilurilor interne pentru un element se poate obţine o mulţime
de efecte locale. Modelele de stil in-line se obţin aşadar prin adăugarea atributului
style la anumite marcaje HTML, conform sintaxei:
style=”specificaţie1; specificaţie2; ...; specificaţien”
În anexa C este dat un tabel complet cu specificaţiile(declaraţiile) de
stil. O parte dintre aceste declaraţii, grupate pe categorii (de text, de culoare,
de margini etc.), va fi detaliată în capitolul următor.
Î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 SPAŢIUL 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ă secţiune vom extinde stilurile de la un element HTML, cum au
fost definite în secţiunea precedentă, la toate elementele de acelaşi tip (de exemplu,
P) dintr-un document. Pentru a defini foile de stil, introducem noţiunile de bloc de
specificaţii, selector şi regulă.
Un bloc de declaraţii sau specificaţii este o listă de specificaţii separate
prin „;” şi cuprinde între acolade, ” {...}”, de exemplu:
{font-size:20pt ;color:”red”; font-style:italic;}.
Într-un bloc de declaraţii, ultimul simbol ”;” poate lipsi.
Un selector sau tip de declaraţii este un obiect căruia i se aplică
declaraţiile definite sau blocul de declaraţii.
159
Există mai multe categorii de selectori:
de tip – sunt elementele HTML, definite în capitolele trecute
Id – sunt identificatori introduşi mai sus
Class – de clasă
Universali – definiţi prin simbolul ”*” şi care se aplică oricărui element
pseudo-clase – definesc clase a căror nume este un cuvânt rezervat
pseudo-elemente – definesc anumite părţi dintr-un element (de
exemplu, prima literă dintr-un paragraf)
De exemplu, dacă dorim să aplicăm un stil oricărui 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 declaraţiei) şi
dintr-un bloc de declaraţii, cu următoarea sintaxă:
selector{bloc de declaraţii} sau selector{declaraţia1;.....declaraţian;}.
Foile de stil sunt alcătuite 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 declaraţii}
selector2{bloc de declaraţii}
selectorn{bloc de declaraţii}
</STYLE>
</HEAD>
<BODY>
..............
</BODY>
</HTML>
Dacă se doreşte aplicarea unui stil asupra mai multor elemente, atunci
selectorii se vor grupa într-o listă de selectori, separaţi prin virgulă(‚),
s1,s2,s3.....{..}.
De exemplu: P, H2, DIV {color:blue; background:”yellow”;}
Un atribut al elementului style este type, care defineşte sintaxa foii de stil,
utilizată la definirea declaraţiilor. Atributul type are valoarea prestabilită ”text/css”.
Aşa cum spune şi numele, CSS semnifică foi de stil în cascadă, iar „text”
specifică faptul că specificaţiile de stil sunt reprezentate sub formă de text, care
este şi singura valoare posibilă.
Dacă se doreşte 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 menţionat mai sus faptul că există un selector universal, indicat prin
simbolul ”*” şi care corespunde oricărui 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 enunţuri
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 definiţie(Definiţion list - DL)
</OL>
Aceasta este o legatura la lista universitaţilor 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 secţiunea precedentă am definit stiluri pentru selectorii de tip (elemente
HTML) dintr-un fişier HTML. În această secţiune 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 apărea un inconvenient,
constând în faptul că, atunci când se doreşte o modificare de stil, modificarea
respectivă trebuie făcută în toate paginile în care a fost copiată foia de stil.
Soluţia de înlăturare a acestui inconvenient constă în executarea
următorilor paşi:
se creează foaia de stil într-un fişier extern, care se salvează cu extensia .css
se leagă acest fişier de orice pagină Web care dorim să aibă acelaşi
aspect. Pentru a crea o legătură între o pagină Web şi un fişier foaie de
stil extern (.css), se foloseşte tagul <LINK> care se scrie în blocul de
antet (<HEAD>...</HEAD>) al respectivei pagini.
Elementul LINK
Aşa cum am menţionat, legătura dintre o pagină şi un fişier .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 – defineşte tipul de fişier .css şi are valoarea ”stylesheet”
hre f- are ca valoare adresa URL a fişierului foaie de stil externă (.css),
care conţine foaia de stil care se leagă.
Pentru exemplificare, considerăm foaia de stil creată în exemplu 13.2 pe
care o copiem într-un fişier nou Notepad şi pe care îl salvăm cu extensia .css astfel:
stil-extern.css. În partea de cod a paginii se înlocuieşte blocul <STYLE> ...
</STYLE> din antet cu tagul <LINK> plasat tot în antet.
Codul fişierului 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 fişier 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ă, aşa cum sugerează numele, foi de
stil în cascadă, pe care ni le putem imagina ca pe o cascadă care se rostogoleşte
peste o înălţime virtuală, constând 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 fişiere 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>
Fişier extern: cascada.css
OL{font-style:italic;background:cyan;}
A{background:green;}
Figura 13. 4. Stiluri în cascadă
164
13.6. Stiluri pentru diferiţi selectori
Stilurile se pot aplica selectorilor de tip (elemente HTML), aşa cum s-a
procedat în secţiunile precedente, sau altor selectori, care sunt elemente definite de
programatorii paginii Web, sau sunt elemente predefinite.
În această secţiune, vor fi definiţi şi exemplificaţi în subsecţiuni separate:
selectorii definiţi – ID şi CLASS
selectorii predefiniţi – pseudo-class şi pseudo-element
13.6.1 Selectorul ID
În secţiunea 13.2 s-a menţionat 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, declarând 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 specificaţii stil}.
În exemplul următor 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 declaraţii}
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
spaţii (class=”c1 c2 cn”), aşa cum rezultă din exemplul următor:
<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 observaţii 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 doreşte o clasă pentru un anumit element HTML (de exemplu,
pentru elementul <P>), atunci selectorul se defineşte prin nume element şi nume
clasă, separate prin punct (’.’). În acest caz stilurile vor avea forma:
element.nume-clasă {bloc de specificaţii de stil}.
166
În exemplul de mai sus, aplicăm 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”>, deşi 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

OBSERVAŢIE!
Acelaşi efect se poate obţine dacă se foloseşte atributul ID=nume_id, în loc
de atributul class=nume_clasă, iar în definirea selectorului se înlocuieşte .nume-
clasă cu #nume_id. Atributul ID a fost introdus pentru a face legătura î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 acelaşi
nume, ca în exemplul următor:
<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 cuvânt
<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 proprietăţi speciale ale unor
elemente. Ele sunt predefinite şi nu este permisă redenumirea lor. Sintaxa prin care
se pot adresa este: element:pseudoclasă{bloc de declaraţii}
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ă
Menţionăm faptul că blocul de declaraţii este alcătuit din declaraţii de stil

cu forma: nume-proprietate:valoare, separate prin ” ; ”.
Vom exemplifica foile de stil pentru pseudo-clasele: first-child şi
legături
Pseudo-clasa first-child
Această pseudo-clasă aplică stilul definit primului copil al elementului
părinte şi are sintaxa: element:first-child{...}.
În exemplul de mai jos formatăm primul element (copil) dintr-o listă
(părinte) şi prima linie (copil) dintr-un tabel (părinte).
<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 – Legături
În capitolul 7 am arăta faptul că bold, subliniat în HTML, există trei stări
pentru o legătură (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 legătură poate fi în cinci stări ce corespund la cinci pseudo-clase:
active – pentru o legătură activă, care are culoarea implicită
visited – pentru o legătură ce a fost vizitată şi care are culoarea
implicită purple
link – pentru legăturile care nu au fost vizitate şi care au culoarea
implicită blue
hover – o legătură deasupra căreia se află plasat cursorul mouse-ului
focus – pentru o legătură selectată, care se poate activa cu ENTER
Prin CSS se pot modifica culorile legăturilor şi formatarea textului, aşa
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 legături
13.6.4 Pseudo-element
Pseudo-elementele sunt un fel de pseudo-clase, care permit să se schimbe
stilul pentru subpărţi ale unui element (de exemplu, prima literă dintr-un paragraf).
Se setează stilul ca la pseudo-clase: element:pseudo-element{bloc de declaraţii}.
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ă următoarele blocuri de text:
paragraf <P>......</P>
paragraf preformatat <PRE>......</PRE>
de diviziune <DIV>.......</DIV>
de centrare text < CENTER>..</CENTER>
În exemplul următor se stabileşte un stil pentru pseudo-elementele şi
blocurile menţionate 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 menţionat atunci că DIV este un element de nivel bloc, care
este afişat la început de rând (ca şi <P> sau <PRE>), iar elementul <SPAM> este
un element in-line, care poate fi afişat pe acelaşi rând cu textul (ca şi B, I etc.) Spre
deosebire de ”P”, ”DIV” nu lasă un rând liber înainte şi după el. Aceste elemente
pereche nu acceptă niciun stil fizic pentru conţinut. Din acest motiv ele se
utilizează împreună cu CSS pentru a ataşa un stil la o secţiune dintr-o pagină WEB,
cuprinsă între tag-urile <DIV> şi </DIV> , <SPAM> şi </SPAM>.
Am menţionat atunci că singurul atribut al lui DIV este align=valoare,
atribut pe care SPAM nu îl acceptă deoarece este element in-line.
Utilizând CSS se pot folosi atributele ID şi CLASS şi pentru DIV şi
SPAM, care ne permit să introducem stiluri şi pentru conţinutul lor.
Elementul SPAM, chiar dacă este element de linie, are sintaxa <SPAM>
conţinut </SPAM> şi permite introducerea conţinutului într-o linie.
În exemplul următor, exemplificăm ataşarea 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 proprietăţi în CSS
Am arătat î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 poziţia unui element în pagină.
Legătura dintre HTML şi CSS2 se realizează cu elementul STYLE.
Stilurile sunt formate din mai multe declaraţii, care sunt pentru CSS ca atributele
pentru HTML. O declaraţie este formată din proprietate: valoare.
CSS oferă o mulţime de proprietăţi, care pot fi grupate în clase din punct
de vedere a modului de adresare, ca de exemplu, proprietăţile pentru: fonturi, text,
margini, culoare, borduri etc. În acest capitol vom descrie unele proprietăţi 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 alcătuit sub formă
de casetă (aşa cum reiese din figura 14.1), formată din patru părţi:
Content (conţinut) – conţinutul format din text sau imagine
Padding (ţesătură) – zona dintre conţinut şi bordură. Poate fi
dimensionată, dar nu poate fi vizibilă printr-o culoare.
Border (bordură) – marginea elementului care poate fi făcută vizibilă
dacă, de exemplu, i se atribuie o culoare
Margin (margine) – zona dintre casetă şi celălalte elemente. Nu este
vizibilă de către vizitatorii paginii.
Figura 14. 1. Elementele unei casete

173
O casetă poate fi redimensionată cu ajutorul proprietăţilor WIDTH şi
HEIGHT.
Proprietatea WIDTH dimensionează o casetă în lăţime.
Proprietatea HEIGHT dimensionează o casetă în înălţime.
Valorile posibile ale acestor proprietăţi sunt:
Lungime exprimată în: in, cm, mm, px, pt, em
Procente: relative la fereastra paginii
Înălţimea şi lăţimea casetei includ bordura, dar nu includ marginile. Dacă

conţinutul nu încape în casetă redimensionată, atunci nu se respectă înălţimea şi
lăţimea date de aceste atribute.
În continuare vom prezenta proprietăţile pentru fonturi, text, culoare,
casete, împreuna cu valorile lor. Deoarece majoritatea acestor proprietăţi au ca
valori “inherit”(moştenit), moştenirea valorii părintelui, această valoare nu va mai
fi menţionată la valorile proprietăţilor care vor fi descrise în continuare.
14.2. Fonturi în CSS

În CSS există un set de proprietăţi pentru fontul conţinutului unui element
HTML. Acestea ne permit să schimbăm fontul (caracteristicile tipului de literă) şi
sunt grupate în clasa FONT în CSS. Proprietăţile pentru fonturi şi valorile lor sunt
descrise în continuare.
Proprietatea font-style - indică stilul cu care browser-ul va afişa
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
afişa 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 afişa
caracterele. Valorile posibile sunt:
normal (este implicită şi este 400)
bold (este 700)
bolder (este imediat superioară, dar mai mică decât 900)
lighter (valoarea imediat inferioară, dar mai mare decât 100)
100 / 200 / 300 / 400 / 00 / 600 / 700 / 800 / 900
Proprietatea font-size – indică browser-ului dimensiunea cu care să
afişeze caracterele. Valorile posibile sunt:
absolute: xx-small / x-small / small /medium/ large / x-large / xx-large
relative la valoarea părintelui: smaller / larger
174
lungimi în: mm / cm / in(inci) / pc(pica) / px(pixeli) / pt(puncte) /
em(relativ la font-style. Un spaţiu 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 părintelui, de exemplu: 50%, -20%)
Cea mai folosită este valoarea exprimată în puncte (pt).
Un font de 10pt măsoară 10 pt de la cota superioară a unei litere majuscule
sau ascendente (H sau h), până la cota inferioară a unei litere descendente (g,p).
Relaţia 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 decât 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 mulţime de fonturi primul font pe care îl
recunoaşte, de exemplu:
P {font-family:”Courier New”, Arial, monospace}
Proprietatea font – grupează proprietăţile de mai sus. Valorile posibile
sunt valorile proprietăţilor de mai sus, în ordinea:
<font-style>
<font-variant>
<font-weight>
<font-size>
<font-family>
Un exemplu pentru proprietăţile 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 proprietăţilor 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. Proprietăţi pentru TEXT
CSS are mai multe proprietăţi pentru TEXT. O parte dintre acestea vor fi
descrise mai jos.
Proprietatea text-align – se foloseşte pentru alinierea textului. Valori
posibile sunt:
left
right
center
justify
Proprietatea text-decoration – permite introducerea unor decoraţiuni
textului: Valorile posibile sunt:
none – fără decoraţiune
underline – subliniat
overline – barat
line-through – tăierea cu o linie
blink – sclipire
Proprietatea text-indent – permite identarea primului rând din bloc cu o

valoare precizată: Valorile posibile sunt:
lungime în: cm, mm, in, em, pt, px, pc, ex
procente – relativ la părinte
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 cuvânt în literă mare
lowercase – transformă textul în litere mici
Proprietatea letter-spacing – permite adăugarea unui spaţiu suplimentar

între literele unui cuvânt sau literele unui text.
Proprietatea word-spacing – permite adăugarea unui spaţiu liber între

cuvinte. Valorile posibile sunt:
normal
o lungime exprimată în: in, cm, mm, pt, px, pc, em
Proprietatea white-space – permite introducerea spaţiului alb în interiorul

unui bloc de text (P, DIV, CENTER). Valorile posibile sunt:
normal – înlocuieşte o secvenţă de spaţiu cu un spaţiu
all – sunt considerate toate spaţiile
nowrap – nu sunt considerate întreruperile de rând
177
OBSERVAŢIE!
Pentru redarea unui text aşa cum este scris se poate folosi marcajul
<PRE>...</PRE>, dar, în acest caz, textul este monospaţiat, aşa cum s-a precizat în
capitolul 3 – elemente de formatare.
Un exemplu de utilizare a acestor proprietăţi 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 vizualizaţi folositi. <SPAN>Bara de scroll</SPAN></DIV>
</BODY> </HTML>
Figura 14. 3. Proprietăţi de spaţiere text în CSS
Proprietatea line-height – ne permite să modificăm distanţa dintre

rândurile unui text.
Această proprietate poate fi utilizată pentru:
un element de nivel bloc pentru a stabili distanţa dintre fiecare element
in–line (de exemplu pentru blocul OL, pentru fiecare element in–line LI)
178
un element in–line, pentru a stabili distanţa dintre rândurile elementului
(de exemplu, spaţiul dintre liniile unui paragraf P)
o lungime exprimată in: in, cm, mm, pt, px, pc, em
un număr – ce reprezintă un multiplicator pentru determinarea distanţei
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 jumătate. <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. Proprietăţi pentru padding
S-a arătat în introducere că orice element HTML poate fi privit ca un box
cu părţile: content, padding, border şi margin.
În secţiunea 2 şi 3 s-a descris o parte din proprietăţile pentru partea de
conţinut (font şi text). În această secţiune se vor descrie proprietăţile pentru
padding.
Paddingul (ţesătura) este zona dintre conţinut şi bordură şi are doar
caracteristica size. Există cinci proprietăţi pentru a indica paddingul unui element,
şi anume:
padding-top
padding-right
padding-bottom
padding-left
padding – combinaţie a celor de sus, valorile fiind date în ordinea (top,
right, bottom, left)
o lăţime – exprimă lăţimea zonei de textură şi este dată în: in, cm, mm,
px, pt, pc, em
procent – exprimă lăţimea în procente relativ la părinte
OBSERVAŢII:
1. Proprietăţile padding-top, padding-right, padding-left, padding-bottom
acceptă numai o valoare
2. Proprietatea padding, care este o combinaţie 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 proprietăţi 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 proprietăţile definite în următoarele două

secţiuni (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>Proprietăţile 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. Proprietăţi pentru bordură
Există cinci proprietăţi pentru bordură:
border-top – bordura de sus
border-right – bordura dreapta
border-bottom – bordura de jos
border-left – bordura din stânga
border – combinaţie 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 proprietăţile:
border-top-width
border-top-color
border-top-style
Valorile posibile pentru width sunt:
o lăţime – ce reprezintă lăţimea fixă a bordurii sau a unei părţi din ea
thin (subţire) /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.
Exemplificăm 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. Proprietăţi pentru borduri

OBSERVAŢII!
Fiecare caracteristică a unei proprietăţi border acceptă o singură valoare
(de exemplu, border-top-color:red). Fiecare proprietate a bordurii poate accepta o
listă de valori, separate prin spaţiu şi are ordinea: width style color, aşa 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>Proprietăţi 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 proprietăţii 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, stânga .
<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, stânga)
pentru culori şi stiluri avem 3 valori (sus stânga-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. Proprietăţi pentru partea margin

Există cinci proprietăţi pentru partea margin a casetei unui element:
margin-left – pentru marginea stângă
margin-right – pentru marginea dreaptă
margin-top – pentru marginea de sus
margin-bottom – pentru marginea de jos
margin – o combinaţie a celor de mai sus
Proprietăţile margin -… au o singură caracteristică, dimensiunea (size).
o lăţime – reprezintă lăţimea fixă a marginii ce poate fi o valoare
întreagă pozitivă sau negativă, exprimată în: cm, in, px, pt, pc, em.
un procent – relativ de părinte
185
în cazul în care folosim proprietatea margin, valoarea poate fi o listă de
1,2,3,4 valori cu semnificaţia 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 Proprietăţi 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 proprietăţi 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 – câte un număr pentru cele 3 culori roşu, 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 aceleaşi ca la proprietatea color.
Proprietatea background-image – permite să stabilim o imagine de

fundal unei casete. Dacă imaginea este mai mică decât suprafaţa care trebuie
afişată, atunci ea este multiplicată astfel încât să cuprindă întreaga suprafaţă a
casetei elementului.
Valori posible sunt adrese URL a unor fişiere .gif, .jpg, .png, scrise în
paranteze rotunde şi prefixate de cuvântul 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 încărca (atunci va fi
afişată 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 proprietăţilor de culoare</P>
</BODY>
</HTML>
187
Figura 14. 11. Proprietăţi de culoare
Proprietatea background-attachment – permite ca imaginea să se

deruleze sau nu, odată cu pagina.
Valorile posibile ale acestei proprietăţi sunt:
fixed – imaginea de pe fundal rămâne fixă. Atunci când 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 background–repeat – se foloseşte pentru a indica modul de

repetare a unei imagini pe orizontală şi verticală. În cazul în care imaginea de
fundal este mai mică decât spaţiul necesar unui element, atunci imaginea se repetă
atât pe orizontală, cât şi pe verticală până acoperă această suprafaţă. Se poate
controla această repetare dând următoarele valori acestei proprietăţi:
repeat – (valoare implicită) repetarea se face atât pe orizontală cât ş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 proprietăţi 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 background–repeat

Proprietatea background-position – precizează poziţia din stânga sus a
unei imagini, în raport cu partea de sus-stânga a casetei elementului. Dacă pentru
aceasta proprietate se dă:
190
o valoare – aceasta reprezintă poziţionarea pe orizontală
două valori – se referă la poziţionarea pe orizontală, respectiv pe
verticală
absolute – exprimate în: in, cm, mm, pt, px, em (de exemplu:1in 3cm
înseamnă 1inch de partea stânga şi 3cm d3 partea de sus)
procentual – relativ la colţul stânga sus (de exemplu: 50% 50%
înseamnă că imaginea este poziţionată î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 poziţionata la
mijlocul ferestrei </DIV>
</DIV> </BODY></HTML>
Figura 14. 14. Proprietatea background-position
191
Proprietatea background – este o combinaţie a proprietăţilor de culoare
şi imagine de fundal. Valoarea acestei proprietăţi este o listă de valori a
proprietăţilor de mai sus, separate prin spaţiu şi având următoarea ordine.
Background-attachments, background-color, background-image,
background- position şi background-repeat.
Exemplificarea acestei proprietăţi 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. Poziţionarea elementelor în pagină în CSS
Deseori programatorul unei pagini doreşte 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.)? Răspunsul la această întrebare este subiectul acestui capitol.
Aşa cum s-a menţionat şi în capitolele precedente, elementele HTML pot fi:
elemente de nivel de bloc –sunt elementele care sunt afişate la rând 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 afişate pe
linia curentă (de exemplu: B, I, IMG, BIG, SMALL, S, U, SPAN etc.).
Browser-ul, când primeşte macheta unei pagini, identifică:
arborele documentului, care arată aranjarea elementelor într-un fişier
HTML
tipul elementelor (de nivel de bloc sau inline)
obiecte flotante
obiecte poziţionate
În secţiunile următoare 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 entităţi sau referinţe de entităţi. Entităţile (marcajele pentru
caracterele speciale) nu sunt incluse între paranteze unghiulare (<>). Acestea se
introduc, începând cu caracterul ampersand (“&”) şi terminând punct şi virgulă
(“;”). Pentru unele caractere există două posibilităţi de scriere a unui caracter
special şi anume:
prin secvenţa
ampersand (&)
diez (#)
un număr (160)
punct şi virgulă (;)
de exemplu, pentru caracterul special dolar ($) se foloseşte scrierea &#036
prin secvenţa
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ă menţionată mai sus, dar unele
caractere speciale admit ambele forme. De exemplu, literele cu diacritice româneşti
nu au forma a doua de reprezentare.
Exemple de texte cu caractere speciale:
Ţara mea este frumoasă şi bogată şi se numeşte România:
Ţara mea este frumoasă şI
bogat&#259 şi se numesşte România
La mulţi 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

Aşezarea implicită a elementelor în pagină se mai numeşte şi aşezare în
flux normal. În capitolul precedent s-a arătat 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 deţine alte elemente, de exemplu DIV poate conţine
SPAN, un element TD poate conţine un element OL sau IMG. În acest caz, spunem
că elementele sunt imbricate şi de asemenea casetele corespunzătoare lor sunt
imbricate. Casetele imbricate vor fi aşezate de către browser în caseta părinte, la
nivel de bloc sau linie.
Această aşezare în flux normal se mai numeşte ş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

OBSERVAŢIE!
Arborele este format din:
elementul BODY cu 4 elemente (copii): B, I, P, DIV, care au culoarea
de fundal LightGreen. Spaţiul 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 părintelui (a lui TR).
197
15.2. Proprietatea Display
Css oferă posibilitatea de a schimba modul de afişare a tipului elementelor
(bloc şi inline), prin utilizarea proprietăţii display.
Valorile posibile ale proprietăţii display sunt:
inline – elementele se afişează în continuarea rândului curent
block – elementele se afişează la început de rând
none – elementul nu se va afişa
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 afişate de la rând nou, aşa cum se observă în figura 15.2.
Figura 15. 2. Proprietatea Display: block
Dacă se doreşte ca toate elementele din exemplul 15.1 să fie afişate inline,
se va scrie următoarea foaia de stil:
*{display:inline}
iar browser-ul le va afişa aşa 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 afişare,de
exemplu, elementul de bloc TABEL dorim să fie afişat inline şi elementul de text B să fie
afişat la nivel de bloc. În acest caz, adăugăm în exemplul 15.1, următoarele 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 aşezare a elementelor în pagină poate fi modificat cu
ajutorul obiectelor flotante şi poziţionate.
Obiectele flotante se definesc cu ajutorul proprietăţii float care se poate
ataşa la orice element. Valorile posibile sunt:
none – caseta nu e flotantă
right – casetă flotantă spre dreapta
left – casetă flotantă spre stânga
OBSERVAŢIE!
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 adăugăm liniile de mai jos la foaia de stil
OL{float:left}
şi în corpul programului înlocuim elementul TABLE care defineşte primul tabel, cu
<TABEL style=”float:right”>, iar elementul IMG, cu <IMG align=left>, atunci
va apărea imaginea şi primul tabel aliniat la dreapta şi lista aliniată la stânga, ca în
figura de mai jos:
Figura 15. 5. Proprietatea float
200
Browser-ul execută următorii paşi la întâlnirea unui element flotant:
fluxul normal de aşezare în pagină este întrerupt
elementul flotant este afişat în poziţia indicată (stânga, dreapta),
începând din rândul următor
se afişează elementele din flux de la punctul în care a fost întrerupt,
începând cu spaţiul rămas liber de deplasarea obiectului flotant
casetele elementelor flotante se pot suprapune peste casetele din fluxul
normal, dar nu şi conţinutul lor
Proprietatea CLEAR
După cum se observă în exemplul din figura 15.5, al doilea tablou apare în
spaţiul rămas liber. Dacă se doreşte ca un element de bloc să apară afişat pe rând
nou, după aplicarea proprietăţii float, se foloseşte proprietatea clear.
none – nu se deplasează elementul
left – partea din stânga elementului este liberă
right – partea din dreapta elementului este liberă
both – ambele parţi (stânga şi dreapta) vor fi libere
Dacă în figura 15.5, în al doilea tabel adăugăm atributul style=”clear:left ”
atunci tabelul va fi afişat pe rând nou, cum reiese din figura:
Figura 15. 6. Proprietatea clear
201
15.4. Elemente poziţionate
CSS oferă posibilitatea de a schimba fluxul normal de aşezare a
elementelor în pagină şi cu ajutorul proprietăţii POSITION, care poate fi ataşată
oricărui element în foaia de stil sau ca valoare a atributului STYLE.
static – aşezarea se face în flux normal (valoare implicită)
absolute – elementul iese din fluxul normal şi este afişat la o distanţă
relativă faţă de primul părinte poziţionat
relative – elementul rămâne, în fluxul normal, dar este poziţionat la o
distanţă relativă cu poziţia sa normală (elementul se poate suprapune
peste altele)
fixed – elementul iese din fluxul normal şi e afişat într-o zonă vizibilă. El
rămâne fix când se derulează pagina cu barele de defilare
Marginile casetei corespunzătoare elementului poziţionat sunt definite de
proprietăţiile:
top
right
bottom
left
o lungime dată în: cm, mm , px, pt, em
un procent – relativ la părinte
Poziţionarea absolută
Poziţionarea absolută a unui element este relativă la primul părinte poziţionat.
Dacă elementul, care se doreşte a fi poziţionat absolut, nu are un părinte sau “stramoş”
poziţionat, atunci el va fi poziţionat relativ la colţul stânga sus al ferestrei.
Pentru a poziţiona absolut un element se foloseşte proprietatea
position:absolute şi se atribuie valori proprietăţilor top, bottom, left şi right.
În continuare vor fi date trei exemple:
primul, pentru poziţionarea absolută a unui element TD, care nu are un
părinte poziţionat
al doilea, pentru poziţionarea absolută a unui element TD care are un
părinte poziţionat
al treilea, pentru poziţionarea absolută şi a părintelui
<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. Poziţionare absolută faţă de colţul stânga 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. Poziţionare absolută faţă de părintele poziţionat 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. poziţionarea absolută a primului părinte
În ultimul exemplu se observă că tabelul este poziţionat absolut faţă de

colţul de sus stânga. IMG are părinte pe TD care nu e poziţionat, dar este poziţionat
“bunicul”, părintele părintelui (tabel-td), deci va fi poziţionat relativ la TABEL
(primul părinte poziţionat).
Poziţionarea relativă
Spre deosebire de poziţionarea absolută, în cazul poziţionării relative, un
element este poziţionat în raport cu fluxul normal, relativ la poziţia sa normală.
Poziţionarea relativă se face cu ajutorul proprietăţii 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. Poziţionarea relativă

Poziţionarea fixă
Pentru a poziţiona fix un element se foloseşte 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. Poziţionarea fixă

Se observă, după poziţia 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 poziţionate (absolute, relative, fixe) există posibilitatea ca anumite
elemente să se suprapună, apărând ca o stivă de casete, care sunt afişate în ordinea
în care au fost introduse. Dacă dorim să nu se suprapună casetele trebuie să fim
foarte atenţi la scrierea coordonatelor marginilor (ceea ce este foarte greu.)
Proprietatea z-index ne ajută să stabilim ordinea de afişare a casetelor
suprapuse. Valorile posibile sunt:
auto - valoarea implicită
număr - număr întreg pozitiv care determină nivelul în stivă relativ la
părinte
În interiorul aceluiaşi părinte sunt afişate casetele în ordinea
descrescătoare a numărului 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 noţiunile 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 atât pe Netscape Navigator, cât
şi pe Internet Explorer.
În replică la acest limbaj, Microsoft a realizat Visual Basic Script (VBS),
bazat pe cunoscutul limbaj Visual Basic. Este mai uşor de utilizat decât 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 următoarele cinci capitole va fi descris
limbajul JavaScript.
În capitolele precedente s-a prezentat limbajul HTML şi CSS, cu ajutorul
cărora putem realiza pagini WEB. Totuşi, limbajul HTML este limitat, în sensul că,
utilizând 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, cât ş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 acţiuni,
ca de exemplu ştergerea unui câmp dintr-un formular, validarea datelor introduse
într-un formular, răspunsul la evenimente, precum schimbarea unui obiect la
trecerea peste acesta cu mouse-ul etc.
Diferenţa 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ă defineşte tipul de valori de date folosite într-un program, a
tipului de operaţii care se pot efectua cu valorile de date şi specifică dimensiunea şi
tipul de informaţie care poate fi plasată la o anumită locaţie a memoriei.
209
NOTĂ!
JavaScript nu este acelaşi lucru cu Java. Java este limbaj de programare
complex (ca şi C++), realizat de firma Sun, creat cu scopul de a realiza atât
aplicaţii client, cât şi aplicaţii server.
O aplicaţie client este un program cu ajutorul căruia se poate interacţiona
cu calculatorul, de exemplu un browser.
O aplicaţie server este un program cu care interacţionează o aplicaţie
client, de exemplu un calculator la distanţă sau un server WEB. De exemplu, cu
ajutorul browser-ului (aplicaţie client) se pot cere pagini WEB de la un server
WEB (aplicaţie server), care “dialoghează” cu browser-ul utilizat.
Se pot întâlni miniaplicaţii 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 întâlnirea acestor etichete, browser-ul deschide
programul Java de pe serverul WEB şi îl execută în fereastra sa.
Programele JavaScript, numite şi scripturi, sunt secvenţe de program ce se
scriu în blocul <SCRIPT> şi </SCRIPT> din antetul unei pagini sau din corpul
programului.
JavaScript – Interpretor
Prin limbaj interpretor se înţelege faptul că browser-ul preia câte o
instrucţiune, o execută şi trece la următoarea, 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.) Totuşi,
putem să sesizăm o eroare din faptul că după ea instrucţiunile 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 căruia se realizează programul utilizând obiecte. Un obiect este o instanţă
a unei clase. De exemplu, dacă considerăm clasa VEHICUL, trenul, avionul,
maşina etc. sunt instanţe ale acestei clase. Nu ne propunem în această carte să
dezvoltăm paradigma orientării pe obiect. Programele de scriptare sunt programe
orientate obiect, care folosesc obiecte precum: formulare, câmpuri, butoane,
fereastră, etc.
Un obiect este o reprezentare a unei entităţi din lumea reală sau
conceptuală. Tot ce putem vedea, atinge, clasifica reprezintă obiecte ale lumii reale
şi tot ce putem gândi reprezintă obiecte ale lumii imaginare. Un obiect are 3
caracteristice: stare, comportament şi identitate.
Starea unui obiect reprezintă totalitatea datelor care conţin informaţii
referitoare la acesta, una din condiţiile posibile în care poate exista un obiect.
Fiecare obiect are un număr de proprietăţi, numite şi atribute, care au o valoare.
Valorile unei proprietăţi (atribut) pot face parte dintr-un tip de bază (întreg, real
210
etc.) sau pot fi alte obiecte. Cu alte cuvinte, starea unui obiect conţine structura
esenţială a obiectului: atributele şi valorile sale. Starea unui obiect se modifică în
timp, de exemplu, obiectul curs opţional se poate afla în stările Predat sau Anulat
(în funcţie de numărul de studenţi 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
reacţionează (schimbă starea) la mesajele primite, precum şi la modul cum
acţionează (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 stării unui obiect nu influenţează
identitatea sa. Identitatea face un obiect să fie unic.
O pagină WEB poate conţine mai multe obiecte, de exemplu pot exista 2
formulare, form1 şi form2, care aparţin clasei FORMULARE. Ele diferă prin
câmpurile 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 gândi ca la un substantiv.
Metode
Relaţiile dintre obiecte se numesc legături. Un mesaj este o comunicare
între obiecte via legături. La primirea unui mesaj, un obiect sau o clasă execută o
operaţie.
O metodă reprezintă implementarea unei operaţii. Aşadar, o metodă este o
unitate de cod scris într-un limbaj orientat pe obiect. La o metodă ne putem gândi
ca la un verb, pentru că are la bază o acţiune, o operaţie. Dacă într-un limbaj
orientat pe obiect se defineşte o funcţie şi se scrie codul care determină ce trebuie
să execute funcţia, atunci declaraţia funcţiei este o operaţie, iar corpul funcţiei este
o metodă.
Dacă considerăm obiectul Submit al unui formular, atributurile nume şi
dimensiune sunt proprietăţi (atribute ale obiectului). Dacă se execută clic pe buton,
formularul este trimis către server, deci se execută o operaţie a cărei implementare
se numeşte metodă. Proprietăţile şi legăturile alcătuiesc caracteristicile structurale,
deoarece ele indică structura obiectelor, iar operaţiile şi metodele sunt caracteristici
dinamice, deoarece ele comunică comportamentul obiectelor. În JavaScript se
foloseşte pentru definirea proprietăţilor şi metodelor unui obiect următoarea
sintaxă: nume_obiect.proprietate ; nume_obiect.metodă.
Un eveniment este o acţiune ce se produce asupra unui element. Cele mai
frecvente evenimente sunt mesajele recepţionate de un obiect. Acţiunile sunt
intreprinse de obicei de persoanele care folosesc aplicaţia, de exemplu dacă se
execută clic pe un buton al unui formular (Submit, Cancel), se trece în starea de
execuţie.
211
Unele evenimente sunt importante pentru JavaScript, cum ar fi atunci când
se executa clic pe butonul Submit, Reset all, Cancel etc., iar alte evenimente sunt
mai puţin importante, cum ar fi deplasarea mouse-ului într-o zonă fără informaţii a
unui formular. Modul de gestionare a evenimentelor este un concept fundamental
al limbajului JavaScript. Pentru a reacţiona la evenimentele importante, trebuie
definite rutine în JavaScript de tratare a evenimentelor.
Dacă se încorporează scripturi în paginile WEB, avem multe facilităţi, ca
de exemplu:
− Realizarea paginilor dinamice
− Scrierea mesajelor în bara de stare a browser-ului
− Afişarea căsuţelor 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 totuşi limitat, în sensul că nu poate executa orice
operaţie ca de exemplu:
− citirea şi scrierea fişierelor de pe, respectiv pe hard-ul propriu
− scrierea aplicaţiilor pe parte de server care au fost numite în capitolul 12,
aplicaţii 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 profesionişti pentru realizarea
paginilor cu efecte speciale de tipul celor realizate cu limbajul Flash, fără a apela la
aplicaţiile de completare (plug-in).
16.2. Primul script în JavaScript

Din secţiunea 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 aplicaţiilor prin utilizarea
obiectelor (documente, butoane, un câmp al unui formule etc). Fiecare obiect are
anumite atribute (proprietăţi) şi execută anumite operaţii, metode, la primirea unor
mesaje (ştergerea informaţiilor din câmpurile unui formular, în urma evenimentului
clic pe butonul Reset All). Accesul la proprietăţile şi metodele obiectului se face
folosind sintaxa:
numele obiectului urmat de punct şi de numele proprietăţii sau metodei
De asemenea o aplicaţie JavaScript reacţionează la acele evenimente care
sunt de obicei acţiuni întreprinse de persoanele care folosesc aplicaţia. Î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 funcţie de locul de plasare a
scriptului avem scripturi de antet sau scripturi de conţinut.
JavaScript, ca majoritatea limbajelor de programare, este scris în format
text şi organizat în declaraţii, blocuri formatate din seturi de declaraţii şi din
comentarii.
O declaraţie este o propoziţie formată din unul sau mai multe elemente,
cuprinse într-o linie, de exemplu alert (“hello”). Un bloc este format dintr-un set
de declaraţii cuprinse între acolade({}). Un bloc de declaraţii este folosit, de
exemplu, în funcţii sau în instrucţiuni condiţionale. Într-o declaraţie se pot folosi
variabile, date ca şiruri şi numere, operatori şi expresii. O declaraţie comunică
browser-ului să întreprindă o acţiune. Acesta, după execuţia ei, preia altă
declaraţie, 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 */
OBSERVAŢIE!
Se poate întâmpla 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 afişează. 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
conţinut î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, crezând că scriptul
este un comentariu. Atenţie însă, blocul de comentarii HTML se va plasa în
interiorul blocului SCRIPT (pentru ca scriptul să fie considerat comentariu şi să nu
fie afişat 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ă considerăm următorul exemplu:
<HTML> <HEAD>
<TITLE> primul script </TITLE>
<HEAD>
<BODY>
<SCRIPT language="JavaScript" type="text/javascript">
213
document.write('Bine aţi 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 conţine blocul de titlu al paginii WEB
− blocul de corp BODY conţine scriptul format dintr-o singură declaraţie,
cuprinsă în blocul SCRIPT. Tag-ul SCRIPT conţine 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 (declaraţie), aceasta conţine un obiect
document, care are o metodă – scrierea unui text în document. Textele în
JavaScript pot apărea între ghilimele simple (apostrof) sau duble (“ ”).
După salvarea acestui program şi execuţia lui apare rezultatul din figura
16.1. Dacă în codul de mai sus linia de declaraţie din interiorul blocului SCRIPT se
include într-un comentariu HTML astfel

aceasta nu va fi afişată de browser-ele incompatibile cu JavaScript care o
vor considera ca un comentariu, dar browser-ele compatibile cu JavaScript vor
afişa rezultatul din figura 16.1.
214
Putem să îmbunătăţim un pic aspectul programului de mai sus, prin
afişarea casetei de avertizare, care va conţine textul şi va rămâne pe ecran până se
execută evenimentul: clic pe butonul OK aflat în căsuţă.
Pentru a afişa caseta de dialog de avertizare se schimbă linia de declaraţie
din blocul SCRIPT, cu declaraţia care conţine funcţia de avertizare alert, astfel:
<HTML>
<HEAD>
<SCRIPT language="JavaScript" >

</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Figura 16. 2. Script cu caseta de avertizare alert()
OBSERVAŢII!
− în programul din figura 16.1, scriptul este unul de conţinut (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 rămâne pe ecran până se acţionează
butonul OK, caz în care browser-ul va afişa textul în fereastra sa (ca în
figura 16.1)
− spunem că funcţia alert comandă afişarea modală a cutiei de dialog de
avertizare, adică scriptul nu execută altă instrucţiune până la închiderea
cutiei
− programul JavaScript face distincţie între literele mari şi literele mici, de
exemplu o variabilă “student” este diferită de o variabilă “Student”
− dacă scriptul conţine mai multe instrucţiuni într-o linie, acestea vor fi
separate prin punct şi virgula ( ; ). De obicei se evită această situaţie.
215
16.3. Tipuri de date şi variabile
Informaţia inserată în paginile web sau în scripturi este o valoare care
aparţine unui tip de date. De exemplu, informaţia: “Bine aţi 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ă atât numere întregi, cât şi numere reale. Întregii pot fi
pozitivi, 0 sau negativi. Întregii pot fi reprezentaţi î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 conţine 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 conţine 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ă
ştiinţifică şi înseamnă “10 la puterea ± nr”), sau în ambele forme, aşa 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 înşiruire de caractere) cuprins între apostrofuri sau
ghilimele. Un şir poate conţine ş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 funcţii (care vor fi prezentate în secţiunile următoare).
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 comparaţii pentru a ajuta programul JavaScript să ia o
decizie.
Obiecte
În secţiunea precedentă am definit obiectul, proprietăţile şi metodele lui.
Un obiect poate fi considerat un tip de dată care are o valoare (de exemplu, un
formular). În secţiunile următoare va fi prezentat lucrul cu obiecte.
Tipul de data Null
Un tip NULL este acela care nu are nicio valoare şi niciun înţeles. Aceste
valori vide sunt utile în scrierea scripturilor complicate, de exemplu câmpul nume
dintr-un formular poate să aibă valoarea null, până î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 operaţie de
atribuire.
De exemplu: cantitate = 20 înseamnă “Se atribuie valoarea 20 variabilei
cantitate” sau “cantitate ia valoarea 20”. Când se doreşte a se compara două valori
dacă sunt egale se foloseşte o pereche de semn egal (==). Acestea vor fi enumerate
şi la operatori, în secţiunea următoare.
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 execuţiei. În cazul în care nu se cunoaşte o valoare (de exemplu, un preţ al
unui produs dorit de achiziţionat), în momentul rulării 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 conţine o valoare (valoarea preţului).
Declararea variabilelor
Deşi 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ă
creăm o variabilă, se foloseşte declaraţia în două părţi:
− Cuvântul 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 cât mai sugestiv. Este interzis să se
folosească drept nume de variabilă cuvintele cheie (25 la număr în JavaScript) şi nu
sunt indicate să se folosească cuvintele rezervate (33 la număr în JavaScript).
OBSERVAŢII!
− Se pot declara mai multe variabile cu acelaşi var, dar ele trebuie separate
prin virgule
− Amintim că JavaScript este un limbaj case-sensitive, adică face
distincţie între literele mari şi mici
− Variabilele pot avea orice lungime
− Nu se declară, în mod obligatoriu, tipul unei variabile, este suficient să
indicăm numele ei. Tipul poate fi dat în urma unei atribuiri
− Există posibilitatea să nu declarăm implicit o variabilă cu var, dar putem
să-i „asignăm” o valoare. De exemplu: preţ = 100 este o declarare
implicită a variabilei preţ
Iniţializarea unei variabile

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

În cele mai multe cazuri, valoarea unei variabile se schimbă în timpul
rulării programului JavaScript. Atunci valoarea iniţială a unei variabile se schimbă
cu o altă valoare. Pentru a realiza această operaţie (de introducere de date) se
foloseşte funcţia prompt(). Funcţia prompt() este asemănătoare funcţiei alert(), în
sensul că generează o cutie de dialog. Parametrii funcţiei sunt şiruri de caractere,
iar funcţia are sintaxa: prompt(“mesaj”, “valoarea initiala”)
218
Mesajul (primul parametru) este afişat î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 declaraţie de atribuire îi comunică
browser-ului să înlocuiască valoarea iniţială cu o valoare nouă. O declaraţie de
atribuire are trei părţi: numele variabilei, operatorul de atribuire (=) şi valoarea
returnată de funcţia prompt, astfel:
nume_variabilă= prompt(“Mesaj”, “valoare nouă”).
De exemplu:
var n=0
n = prompt(“Daţi valoarea lui n”, 0)
alert (n)
− Dacă se introduce în cutia de dialog o dată, de exemplu 10 şi se apasă
OK se va afişa 10
− Dacă se apasă OK şi nu se introduce nimic apare 0
− Dacă se apasă CANCEL se afişează NaN
Conversia datelor
Am arătat 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 aplicăm
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 număr, acesta este convertit direct în şir şi apoi afişat, de
exemplu, cu funcţia alert(“şir”).
De exemplu dacă avem:

- var vârstă=20
alert(vârstă)
atunci vârstă e transformat în şir “20” şi se afişează 20
- var vârstă=20
alert(“vârstă=” + vârstă + “ani”)
atunci variabila întreagă este convertita în întreg şi se va afişa
vârstă = 20 ani
Pentru a transforma şirurile în numere pentru a le putea aplica operatorii
aritmetici folosesc două funcţii: parseInt() şi parseFloat().
Aceste funcţii transformă un şir în număr întreg, respectiv în număr real.
Conversia unui şir în număr se face până când se întâlneşte 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
Exemplificăm cele spuse mai sus, în scriptul pentru adunarea a două
numere: nr1 şi nr2.
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
nr1 = parseInt(prompt("Daţi primul număr: ",0))
nr2 = parseInt(prompt("Daţi al doilea număr: ",0))
s = nr1+nr2
alert("Suma este: " + s)
</SCRIPT>
</HEAD>
</BODY>
</HTML>
Figura 16.3. Funcţiile: parseInt(), prompt(), alert() şi operatorul de concatenare “+”
16.4. Expresii şi Operatori

În secţiunea precedentă s-au introdus mecanismele de introducere şi afişare
de date.
În această secţiune se vor introduce noţiunile de Expresie şi Operatori.
Expresii
O expresie conţine unul sau mai mulţi operanzi şi unul sau mai mulţi
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, relaţionali, condiţionali, logici pe biţi. În continuare vor fi descrise
aceste tipuri de operatori.
În JavaScript, ca şi în alte limbaje de programare, operatorii sunt evaluaţi
î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 descrescătoare a precedenţei lor.
Operator Descriere
., (),[], Operatori de adresare: accesare câmp, indexare
tablou, apel functie
++, - -, +, - Operatori unari (un singur operand), întoarcerea
, !, ~ unei date, crearea unui obiect
*, /, % Înmulţirea, împărţirea, restul împărţirii
<<, >> Operatori de deplasare biţi
<, <=, >, Operatori relaţionali
>=
==,!=, = = Egalitate, inegalitate, identitate, nonidentitate
=, != = =
& AND (şi) pe biţi
^ XOR (sau exclusiv) pe biţi
| OR (sau) pe biţi
&& AND logic
|| OR logic
?: Condiţional
=, op=, Atribuirea, atribuire cu operaţie
(+=, -=, %=, |=,
*=, <<=, >>=, &=,
^=)
, 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 definiţi şi exemplificaţi operatorii aritmetici enumeraţi
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 scădere. De exemplu:
o 5-7 ia valoarea -2
o 9.4 - 13.7 ia valoarea -4.3
− Operatorul * este operatorul de înmulţire. De exemplu:
o 5*7 ia valoarea 35
o n=25 n*10 ia valoarea 250
− Operatorul / este operatorul de împărţire. De exemplu:
o 7/2 ia valoarea 3.5
o a = 10 2 / a ia valoarea 0.2
− Operatorul % este operatorul pentru obţinerea restului împărţirii.
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
OBSERVAŢIE!
Î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 secţiunea 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 atât în stânga, cât ş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>
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 acelaşi efect.
Dacă în exemplul de mai sus se înlocuiesc cele două atribuiri pentru
variabila y cu : y= -- x*5; y= x-- *5
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 următorul
efect: dacă operandul este false, rezultatul este true, altfel rezultatul este
false.
− Operatorul binar || - este operatorul OR (sau) logic. Dacă cel puţin unul
din operanzi este true, atunci valoarea expresiei combinate este true.
Dacă ambii operanzi logici sunt falşi 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 secţiunea precedentă.
Există mai multi operatori de atribuire:
− Operatorul “=” se foloseşte î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 următoarea sintaxă:
v1 = v2 = v3 =...= vn = expresie
Principiul de execuţie este următorul: se evaluează expresia din partea
dreaptă şi valoarea se atribuie variabilei vn, apoi conţinutul 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
următorul: se execută operaţia din stânga semnului “=” şi apoi se face
atribuirea valorii operaţiei variabilei prima din stânga.
Se consideră următorul 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 afişa:
Figura 16.6. Operator de atribuire
Operatori relaţionali sau de comparaţie

Operatorii relaţionali compară doi operanzi şi întorc o valoare logică, true
dacă relaţia este adevărată şi false în caz contrar. Operatorii relaţionali 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
OBSERVAŢII!
1. Se pot compara şi şiruri, ordinea fiind cea lexicografică
2. Conform codului ASCII – o cifră este mai mică decât o literă (codul
cifrelor este 48-57) şi o literă mare (codul 64-93) este mai mică decât o
literă mică (codul 97-126)
225
Exemple cu operatori relaţionali:
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 condiţional
Operatorul condiţional, cunoscut şi sub numele de operator trenar, este
diferit de cei prezentaţi mai sus. Acest operator cere browser-ului să evalueze o
expresie şi, în funcţie de valoarea acesteia, se execută o anumită expresie dacă
valoarea este true şi o alta dacă valoarea este false. Sintaxa este următoarea:
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 condiţional, acesta este alcătuit
din trei părţi. 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 condiţional în rezolvarea ecuaţiei 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 condiţional “?”
Operatori logici pe biţi

În JavaScript există un set de operatori care permit accesul la bit.
Operatorii logici pe biţi sunt:
<< operator de deplasare stânga

>> operator de deplasare dreapta
& operator logic şi (AND) pe biţi
| operator logic sau (OR) pe biţi
^ operator logic sau exclusiv pe biţi
~ operator logic unar de negare pe biţi (NOT)
Operatorul << are ca efect deplasarea spre stânga a operandului din

stânga cu un număr de poziţii egal cu valoarea operandului din dreapta
Operatorul >> are ca efect deplasarea spre dreapta a operandului din
stânga cu un număr de poziţii egal cu valoarea operandului din dreapta
227
Operatorii binari &, |, ^ , AND, OR, XOR acţionează; la nivel de bit,
pentru fiecare pereche de biţi aflaţi pe poziţii 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ă conţinutul biţilor.
OBSERVAŢIE!
Aceşti operatori lasă nemodificat conţinutul variabilelor, de exemplu,
x=2
alert ( x << 2)
alert (x)
va afişa mai 8 apoi 2.
Exemple cu operatori logici pe biţi:

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 arătat, în capitolul precedent, că obiectele se despart de proprietăţi şi
de metodele sale prin caracterul ” . ”.
Obiectul document are proprietăţi ş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 conţine şi tag-uri HTML, atunci acestea sunt interpretate de
browser şi afişate corespunzător.
Î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. Instrucţiuni şi Funcţii în JavaScript
17.1. Instrucţiuni
În JavaScript, ca şi în majoritatea limbajelor de programare complexe,
există trei mari categori de instrucţiuni:
− de atribuire
− de decizie
− repetitive
Despre instrucţiunile de atribuire s-a vorbit şi în capitolul precedent.
17.1.1. Instrucţiuni de decizie

O instrucţiune condiţională JavaScript este asemănătoare cu instrucţiunea
condiţională din limbajele de programare complexe.
În JavaScript o instrucţiune condiţională îi cere browser-ului să evalueze o
condiţie şi, în funcţie de rezultatul evaluării, să execute anumite instrucţiuni. Există
trei instrucţiuni condiţionale: if, if….else şi switch...case.
Instrucţiunea IF şi IF … ELSE
Instrucţiunea IF este una din cele mai folosite instrucţiuni în JavaScript,
pentru că determină browser-ul să execute un set de instrucţiuni dacă o anumită
expresie condiţională este adevarată sau nu.
O expresie condiţională este o expresie booleană care ia valoarea true sau
false.
Instrucţiunea IF simplă
Instrucţiunea If are sintaxa:
IF (expresie conditională) { instrucţiuni }
Se observă că instrucţiunea condiţională IF simplă are trei părţi: cuvântul
cheie IF o expresie condiţională cuprinsă între paranteze şi blocul de instrucţiuni
care se execută în cazul în care expresia este true, cuprins între acolade ({}). Blocul
de instrucţiuni se mai numeşte instrucţiune compusă.
230
În cazul în care blocul de instructiuni conţine o singură instrucţiune,
acoladele pot lipsi, dar este indicat să se folosească pentru lizibilitatea scriptului.
Un exemplu de instrucţiune IF simplă este dat mai jos.
<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT language = "JavaScript">
// Ecuaţia de gradul I
a = parseInt( prompt ("Daţi un număr a", 0))
b = parseInt( prompt ("Daţi termenul liber b", 0))
if (a !=0)
{ x = - b / a; alert ("x = " + x) }
</SCRIPT>
</BODY></HTML>
Figura 17.1. Instrucţiunea IF

Instrucţiunea if … else
Instrucţiunea if … else are sintaxa:

IF( expresie condiţională)
{instrucţiuni 1}
else
{instrucţiuni 2}
231
Principiul de execuţie este următorul: se evaluează expresia, dacă expresia
este adevărată, se execută instrucţiuni 1 altfel se execută instrucţiuni 2.
În cazul când blocurile {instrucţiuni 1} şi/sau {instrucţiuni 2} au numai o
instrucţiune, 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ă soluţie")
</SCRIPT>
</BODY>
</HTML>
Figura 17.2. Instrucţiunea if … else

232
Instrucţiunea If … else if … else
Această formă a instrucţiunii if este asemănătoare cu instrucţiunea

if…else, numai că dacă expresia condiţională este falsă se cere browser-ului să
evalueze o altă expresie condiţională, care, în cazul în care este adevărată, se
execută un bloc de instrucţiuni, altfel se execută alt bloc de instrucţiuni. Sintaxa
acestei instrucţiuni este:
IF (expresie 1)
{ instrucţiuni 1}
else if (expresie 2)
{instrucţiuni 2 }
else
{instrucţiuni 3}
În continuare încercăm să îmbunătăţim exemplul de mai sus:

<HTML>
<HEAD>
</HEAD>
<BODY>
if (a!=0)
{ x = - b/a ; alert ("x = " + x)}
else
if (b!=0)
alert ("Ecuaţia nu are soluţie")
else
alert ("Ecuaţia are o infinitate de soluţii")
</SCRIPT>
</BODY> </HTML>
233
Figura 17.3. Instrucţiunea IF ... else if ... else
Instrucţiunea IF imbricată
În cazul în care o expresie este adevărată se execută o instrucţiune IF care
are o expresie care se evaluează şi, dacă este adevărată, se execută altă instrucţiune
IF s.a.m.d., spunem că avem instrucţiuni IF imbricate.
Sintaxa instrucţiunii este:
IF (expresie 1)
{expresie 2}
……..
{ if expresie n }
else
{expresie n1}
.........
else
{expresie 2.1}
else
{expresie 1.1}
234
În exemplul următor se rezolvă ecuaţia de gradul 2: ax2 + bx + c = 0
<HTML>
<HEAD></HEAD>
<BODY>
a = parseInt(prompt ("Daţi a ", 0))
b = parseInt(prompt ("Daţi b ", 0))
c = parseInt(prompt ("Daţi c ", 0))
D=b*b-4*a*c
if (a != 0)
if (D>=0) // a<>0 D>0
{alert ("Rădăcini reale") }
else // a <> 0 D< 0
{alert ("Rădăcini complexe") }
else
if (b!=0) // a=0 b<>0
{ alert ("Ecuaţie gradul I x = " + -c/b) }
else
if (c==0)
{alert ("O infinitate de soluţii ") }
else // a=b=0 c<>0
{alert ("Nu există soluţii") }
</SCRIPT>
</BODY>
</HTML>
235
Figura 17.4. Instrucţiunea IF imbricată
Instrucţiunea switch...case
În cazul în care browser-ul trebuie să ia o serie de decizii pe baza unei
singure valori de schimb atunci instrucţiunea if este ineficientă, folosindu-se
instrucţiunea switch … case.
Sintaxa instrucţiunii switch...case:
switch (expresie)
{
case exp1: instrucţiuni 1 [; break]
case exp2: instrucţiuni 2 [; break]
.
.
case exp3: instrucţiuni n [; break]
[default: instrucţiuni n +1]
} // end switch
unde:
- [ ] - au caracter opţional
- expresie - este o expresie întreagă
- expresie i – sunt expresii întregi
- instrucţiuni i – sunt instrucţiuni care se execută în cazul în care
expresie==expresie i
În funcţie de valoarea întreagă rezultată din evaluarea expresiei, se execută

grupul de instrucţiuni 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ă instrucţiunile ce urmează după cuvântul cheie default, dacă acesta există,
altfel, iese din instrucţiunea switch … case.
Dacă break este ultima instrucţiune din grupul de instrucţiuni in care se
execută, atunci browserul omite să evalueze expresiei+1 … expresiein şi execută
instrucţiunea ce urmează după acolada închisă (‘}’).
Dacă break nu este la sfârşitul grupului de instrucţiuni ce se execută, atunci
browser-ul compară valoarea expresiei cu valoarea expresiilor i+1 … expresiein ,
chiar dacă nu va mai găsi egalitate până la sfârşitul instrucţiunii switch.
Codul care urmează probează instrucţiunea switch. Se dă un număr în baza
10 şi se cere transformarea lui în baza 16. Pentru aceasta se împarte un număr la 16
până când ajunge la zero şi resturile, luate în ordine inversă obţinerii lor, formează
numărul î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("Daţi numărul n",0))
alert("Numărul în baza 10 este n = " + n )
alert("Numărul în baza 16 este nr16 = " + Hexazec(n))
</SCRIPT></BODY></HTML>
237
Figura 17.5. Instrucţiunea switch
17.1.2. Instrucţiuni de ciclare

Se cunoaşte din limbajele de programare că atunci când dorim să executăm
un grup de instrucţiuni în mod repetat, se folosesc instrucţiunile de ciclare. Şi
JavaScript acceptă următoarele instrucţiuni de ciclare: for şi for in, while, do while.
Instrucţiunea “for”
Instrucţiunea for are o variabilă contor, o condiţie şi o acţiune ce
actualizează contorul. Ciclul for determină browser-ul să execute instrucţiunile din
corpul ciclului până când condiţia este falsă. Înainte de începerea unui ciclu (acesta
se mai numeşte şi o iteraţie sau un pas al ciclului) condiţia este testată. După
executarea instrucţiunilor din ciclu, contorul este actualizat înainte ca o nouă
iteraţie să înceapă.
Dacă condiţia returnează mereu valoarea false, ciclul nu se execută
niciodată. Dacă condiţia returnează mereu valoarea true, ciclul este infinit.
Sintaxa instrucţiunii for este:
for(expresie_iniţializare; expresie_condiţională [;
expresie_incrementare])
{
instrucţiuni
}
unde:
238
expresie_iniţializare se foloseşte pentru iniţializarea contorului
(variabila de ciclare)
expresie_test se foloseşte pentru a testa dacă se execută blocul de
instrucţiuni subordonate instrucţiunii for; dacă expresia are valoarea
true, atunci se execută instrucţiunile, altfel se opreşte ciclarea
expresie_incrementare este opţională şi se foloseşte pentru incrementarea
variabilei de ciclare. Dacă incrementarea se face cu 1, adică se foloseşte
operatorul ++, atunci expresie_incrementare poate lipsi
Instrucţiunea for funcţionează astfel:
a) se evaluează expresia_iniţializare (aceasta poate conţine şi declaraţia
variabilei de ciclare)
b) se evaluează expresia_test. În cazul în care are valoarea true, se execută
instrucţiunile după care se trece la pasul c), altfel se trece la
instrucţiunea după for
c) se evaluează expresia de incrementare şi se trece la pasul b)
Să probăm instrucţiunea for prin următoarele exemple: să aflăm suma
primelor n numere, în mai multe moduri.
OBSERVAŢIE! expresiile pot fi vide, dar nu este indicată folosirea
instrucţiunii 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 instrucţiunii for şi
incrementarea se face cu 1, atunci putem avea următorul script:
<SCRIPT language = “JavaScript”>
var i = 0 , s = 0
for ( ; i<=n; ) s + = i
alert (s)
</SCRIPT>
239
3) Pot lipsi toate expresiile din instrucţiunea 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 condiţia are mereu valoarea true
</SCRIPT>
Figura 17.6. Instrucţiunea for
240
Continue
Cuvântul cheie continue determină browser-ul să întrerupă execuţia
comenzilor din cadrul blocului de instrucţiuni şi să treacă la începutul ciclului,
adică la testarea expresiei condiţionale, ca şi cum ar fi ajuns la sfârşitul ciclului.
Cuvântul cheie continue se foloseşte pentru toate instrucţiunile de ciclare,
cu excepţia instrucţiunii do … while, care execută blocul de instrucţiuni cel putin o
dată.
De exemplu, dacă dorim să calculăm suma primelor 10 numere, fără 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. Instrucţiunea continue
Instrucţiunea for … in
În JavaScript există o instrucţiune specială de ciclare şi anume
instrucţiunea for … in. Acestă instrucţiune este asemănătoare instrucţiunii for,
diferenţa constă că instrucţiunea for … in se foloseşte când nu se cunoaşte numărul
de repetări pe care browser-ul trebuie să le facă în cadrul unui ciclu, de exemplu,
241
dacă dorim să aflăm proprietăţile unui obiect fără a şti numărul lor. Instrucţiunea
for … in îi cere browser-ului să execute blocul de instrucţiuni pentru fiecare
element dintr-o listă.
Instrucţiunea for … in are structura următoare:
for (listă)
{ instrucţiuni}
Următorul exemplu ilustrează utilizarea instrucţiunii for … in pentru a afla

proprietăţile obiectului window. Browser-ul execută blocul de instrucţiuni pentru
fiecare proprietate a ferestrei. Instrucţiunile sunt: afişarea proprietăţii şi salt la rând
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. Instrucţiunea for … in
Instrucţiunea While
Instrucţiunea de ciclare while este asemănătoare instrucţiunii for. Diferenţa
constă în faptul că instrucţiunea while nu are o variabilă contor, nici expresie de
incrementare.
242
Instrucţiunea while cere browser-ului să execute un bloc de instrucţiuni
atât timp cât o condiţie definită în această instrucţiune este true. Ciclul while nu
indică numărul de iteraţii făcute.
Sintaxa acestei instrucţiuni este:
while (expresie)
{instrucţiuni}
Modul de execuţie a instrucţiunii while este:

a) se evaluează expresia
b) dacă valoarea returnată de ea este true atunci se execută blocul de
instrucţiuni şi se revine la pasul a), altfel se trece la următoarea
instrucţiune
În exemplul de mai jos se calculează suma cifrelor unui număr pozitiv.
var s=0
n=parseInt(prompt("Daţi numărul n",1))
while (n>0) {
s+=n%10
n=(n-n%10)/10
}
alert("Suma cifrelor numărului n este: " + s)
</SCRIPT>
Figura 17.9. Instrucţiunea while
Instrucţiunea do … while
Instrucţiunea do…while este asemănătoare cu instrucţiunea while, diferenţa

constă în faptul că instrucţiunea while este condiţionată anterior execuţiei
243
instrucţiunilor, iar instrucţiunea do…while este condiţionată posterior execuţiei
instrucţiunilor.
Sintaxa instrucţiunii do … while este:
do
{instrucţiune}
while (expresie)
Modul de execuţie este evident:

a) se execută instrucţiunile dorite
b) se evaluează expresia. Dacă valoarea ei este true se trece la pasul a)
altfel se trece la următoarea instrucţiune după do … while
Instrucţiunile din corpul instrucţiunii do ... while se execută cel puţin o

dată. Dacă există posibilitatea ca expresia să fie falsă de prima dată este indicat să
se folosească instrucţiunea while, care nu mai execută instrucţiunile dacă condiţia
este falsă şi sare la instrucţiunile după while.
În exemplul de mai jos se utilizează instrucţiune 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("Daţi numărul 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. Instrucţiunea do … while
244
17.2. Funcţii în Java Script
În acest capitol se prezintă modul de definire şi utilizare a funcţiilor în
JavaScript. Funcţiile execută anumite acţiuni şi întorc rezultatele.
Ca şi limbajele de programare complexe, funcţiile în JavaScript combină
câteva instrucţiuni care să execute anumite operaţii, sub acelaşi nume. Informaţiile
despre funcţie sunt incluse după numele funcţiei între paranteze. Numele funcţiei
împreună cu operaţiile şi informaţiile ei pot fi introduse într-un cod scris într-un
anumit loc, iar executarea ei poate fi cerută browser-ului ori de câte ori este nevoie.
Informaţiile despre funcţie se mai numesc argumentele sau parametrii funcţiei.
Unele funcţii pot să nu aibă parametri.
17.2.1. Definirea şi apelarea unei funcţii

Procesul de creare a unei funcţii se numeşte definirea funcţiei, iar procesul
de execuţie a funcţiei se numeşte apelarea funcţiei.
În JavaScript există două tipuri de funcţii: funcţii create de utilizator şi
funcţii predefinite (ale limbajului).
Sintaxa de definire a unei funcţii utilizator este:
function nume_funcţie([parametri])
{
[instrucţiuni]
}
În continuare vom prezenta succint fiecare parte din definirea funcţiei.

Definirea unei funcţii 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
conţine 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 conţinut al paginii <BODY>. Apelul
funcţiei poate fi introdus într-un script din corpul paginii.
Numele funcţiei este un nume dat funcţiei. Acesta este indicat să fie un
nume sugestiv, unic în pagina web (să nu mai fie folosit pentru alte funcţii chiar
dacă acestea sunt definite în alte scripturi din pagină). Numele poate să conţină
caractere alfanumerice (litere şi cifre) şi liniuţa de subliniere, iar primul caracter să
fie obligatoriu o literă. De asemenea numele nu poate fi cuvânt cheie sau un cuvânt
rezervat.
Parantezele sunt obligatorii şi sunt folosite pentru a transfera argumente
funcţiei. Chiar dacă o funcţie conţine toate valorile necesare pentru a-şi îndeplini
acţiunile pentru care a fost creată (adică nu conţine argumente) parantezele tot
trebuie să existe. Un script poate să conţină una sau mai multe funcţii.
Blocul de program al funcţiei conţine instrucţiunile pe care le execută
browser-ul atunci când se apelează funcţia, într-o altă parte a scriptului.
Instrucţiunile sunt incluse între acolade ({ }). În blocul de program poate exista un
apel al altei funcţii. În blocul de program poate exista o instrucţiune return, cu
ajutorul căreia funcţia întoarce (returnează) o valoare.
245
Apelul unei funcţii
O funcţie se apelează atunci când se doreşte ca browser-ul să execute
blocul de instrucţiuni al funcţiei. Pentru apelul unei funcţii se utilizează numele
funcţiei, urmat de paranteze, în care eventual se află parametrii, astfel:
nume_funcţie ([parametri])
Dacă funcţia are parametrii (argumente), valorile fiecăruia sunt incluse

între paranteze, în ordinea în care sunt enumeraţi parametrii în definirea funcţiei.
Despre parametrii vom discuta în secţiunea 17.2.3.
În continuare se dă un exemplu de definire a unei funcţii fără parametrii şi
apelul acesteia. Definirea funcţiei se face într-un script din antetul paginii, iar
apelul funcţiei într-un script din corpul paginii. Funcţia defineşte acţiunea de
indexare a salariului de bază de 1000 RON, cu 5% începând cu 1-01-07.
<HTML> <HEAD><TITLE>Funcţii</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 funcţii fără parametri
La apelarea funcţiei indexare_salariu(), browser-ul trece la definirea

funcţiei din antet şi execută instrucţiunile din corpul funcţiei.
Notă!
Se putea scrie un singur script în <HEAD> sau <BODY>, dar pentru
lizibilitatea unei pagini, în cazul în care sunt mai multe funcţii este indicat să se
definească funcţiile î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 funcţii şi
valoarea ei este vizibilă (valabilă) şi poate fi modificată de toate funcţiile definite
după ea, precum şi de toate instrucţiunile existente după ea. Un exemplu de
utilizare a variabilelor globale:
funcţia suma_cifre( ) calculează suma cifrelor

funcţia afiseaza_suma() afişează suma cifrelor
instrucţiunea alert(x) afişează numărul 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('Daţi numărul 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 atât în funcţia suma_cifre() şi funcţia afiseaza_suma(), cât şi în
instrucţiunile din script (alert).
Funcţii care apelează altă funcţie

O funcţie poate fi apelată din corpul altei funcţii. În exemplul din figura
17.12, în corpul funcţiei suma_cifre() se poate apela funcţia 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 funcţii. Ea este creată şi

distrusă ori de câte ori se execută funcţia şi are domeniul de valabilitate
(vizibilitate) în interiorul funcţiei, alte părţi ale scriptului (instrucţiuni, funcţii) nu o
cunosc.
O variabilă locală poate să aibă acelaşi nume cu o variabilă globală. Dacă
folosim variabila în corpul funcţiei unde a fost definită, este adresată variabila
locală. Dacă folosim acelaşi nume dar în afara funcţiei care o defineşte ne referim
la variabila globală.
De exemplu, să considerăm o variabilă s locală în care se depune suma
primelor n numere şi s variabila globală pentru suma cifrelor unui număr definită şi
în exemplul de mai sus. Adaugăm în scriptul din <HEAD> funcţia:
248
<HTML>
<HEAD>
<TITLE>Variabile globale si locala</TITLE>
function suma_n()
{var s=0
n=parseInt(prompt('Daţi 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 afişează suma primelor n numere şi variabila

globală s=10.
249
17.2.3. Parametri
În sintaxa unei funcţii, am arătat că între parantezele rotunde pot fi trecuţi
parametri sau argumente. De asemenea am spus că o funcţie efectuează o acţiune.
Unele funcţii îşi efectuează acţiunea fără a fi nevoie să introducem argumente,
având toate valorile necesare definite în corpul funcţiei. Acesta este cazul funcţiilor
fără argumente, introduse în secţiunea precedentă. Unele funcţii necesită unele date
(valori sau variabile) pentru a-şi efectua acţiunea. Aceste date, numite argumente
sau parametri, se trec între parantezele din definirea funcţiei, separate prin virgulă.
Aceste date nu sunt scrise în definiţia funcţiilor (ca la funcţiile fară argumente), şi
trebuie transmise funcţiei ca parametri. Parametrii din antetul funcţiei se numesc
parametri formali, iar parametrii din apelul funcţiei se numesc parametri efectivi.
La apelul funcţiei se transmit valori parametrilor formali, proces numit transferul
prin valoare către funcţie. Parametrii efectivi pot fi atât valori, cât şi variabile. În
funcţie, 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 funcţiei, ci sunt argumente ale funcţiei
indexare_salariu(), noua funcţie va fi apelată prin valori sau se atribuie valori
parametrilor efectivi. Pentru acest exemplu vom avea codul:
<HTML>
<HEAD>
<TITLE>Funcţii 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('Daţi salariu',0)
indexare=prompt('Daţi 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 funcţii cu parametri
Parametrii efectivi pot fi după cum reiese din exemplul de mai sus:
− prin variabilele salariu şi indexare, caz în care funcţia se apelează prin
valorile reţinute de acestea
− prin valori (2000 respectiv 5)
În capitolul următor se va arăta cum pot fi apelate funcţiile din codul HTML.
17.2.4. Funcţii predefinite

În introducerea secţiunii 17.2 am menţionat că există funcţii realizate de
utilizator, şi care au fost prezentate mai sus, şi funcţii ale limbajului JavaScript, numite şi
funcţii predefinite limbajului. Cele mai importante funcţii 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”)) //afişează valoarea 75
escape("şir") şi unescape("şir") – sunt folosite pentru a transforma
caracterele care au o anumită semnificaţie în codul HTML. Şirul va fi
format din simbolul procent %, urmat de 2 cifre ce reprezintă codul
caracterului %. Funcţia unescape(“şir”) are efect invers, afişează
caracterul care are codul %.
De exemplu:
alert(escape("<")) va afişa %3C
alert(unescape("%3C") va afişa "<"
251
string(valoare_numerică) – converteşte un număr în şir
De exemplu:
alert(string(3) + string(8)) – se va afişa 38
alert(string(4.8) + string(3) – se va afişa 4.83
number("şir") - este funcţia care transformă un şir în număr. Î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 afişa 12.2
alert(number(7ab)) va returna NaN
17.2.5. Recursivitate
Recursivitatea este o tehnică importantă de programare. Ea constă în
apelarea funcţiei în corpul ei. Un exemplu este codul factorialului:
<HTML>
<HEAD>
<TITLE>Funcţii 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. Funcţii 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 înconjurătoare.
Obiectele sunt în esenţă colecţii de proprietăţi şi metode. Proprietăţile sunt valori,
iar metodele funcţii. La membrii unui obiect (proprietăţi şi metode) ne putem referi
ori prin numele obiectului, punct şi numele proprietăţii sau metodei, sau cu ajutorul
unui tablou, astfel:
− nume_obiect.nume_proprietate/metoda
− nume_obiect[“proprietate/metoda”]
Obiectele pot avea instanţe, atunci când proprietăţile lor au valori. De

exemplu, obiectul număr complex poate avea instanţă un număr complex
particular. În JavaScript există obiecte create de utilizator, obiecte intrinseci şi
obiecte ale browser-ului. Obiectele browser-ului sunt obiecte care implică
intervenţia 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. Construcţia obiectelor folosind funcţia prototip
Din teoria limbajelor de programare orientate pe obiect se cunoaşte
faptul că obiectele se pot crea cu funcţii prototip, numite şi constructori.
Un constructor este invocat folosind operatorul new, care rezervă spaţiu de
memorie pentru obiect şi returnează adresa spaţiului respectiv de memorie.
De exemplu, declaraţia z=new complex(1,2), înseamnă că se rezervă
memorie pentru numărul complex 1+2i, şi adresa este încărcată în z, astfel:
1 2
z
Obiectul nou creat se poate invoca cu cuvântul this.
În exemplul următor se creează şi se iniţializează 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 funcţiei se transmit prin referinţă, în sensul că

parametrul este de fapt o adresă. În funcţie se pot schimba valorile parametrilor.
Să considerăm exemplul des utilizat în programarea orientată pe obiecte, şi
anume acela de creare, modificare şi operaţii cu numere complexe.
În codul de mai jos se creează şi se modifică un număr 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 următor se înlocuieşte metoda de modificare a unui număr

complex cu metoda de adunare a unui număr complex la altul. În acest caz, prin
z= new complex (1,2) se înţelege adresa la care se află :
1 2 suma()
Codul pentru care obiectul curent reţine 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 doreşte ca suma să fie calculată într-un nou
obiect, atunci funcţia 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 funcţia constructor

returnează obiectul curent. Făcând această modificare în funcţia 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. Funcţia constructor returnează o valoare
2. Metoda de creare a obiectelor utilizând tipul Object

Un obiect poate fi creat şi cu ajutorul tipului Object. Să considerăm
exemplul din figura 2, în care se modifică un număr complex cu ajutorul funcţiei
modific(). Dacă se foloseşte tipul Object, nu mai este nevoie de funcţia constructor
complex(), iar funcţia 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 afişa componentele unui obiect, de exemplu, pentru obiectul

număr complex: real, imag, modific, se pot folosi şi instrucţiunea for în forma:
For(nume_variabilă in nume_obiect) în două variante:
− for (i in z) document.write(i+" ") – afişează componentele unui obiect
(numele proprietăţilor şi metodelor)
− for (i in z) document.write(z[i] + " ") – afişează valorile proprietăţilor
şi codul sursă al metodelor
Astfel, pentru exemplul 2, folosind instrucţiunea 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. Instrucţiunea For pentru a afişa proprietăţi ş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 declaraţii)
Obiecte Incluse
Un obiect poate include alte obiecte, aşa cum include proprietăţi ş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ă secţiune se vor prezenta succint cele mai folosite obiecte intrinseci ale
limbajului JavaScript: Math, String şi Array.
18.2.1. Obiectul “Math”

Obiectul Math conţine o serie de proprietăţi şi metode care permit
efectuarea unor calcule matematice. Constantele sunt proprietăţile obiectului
iniţializate. Cele mai utilizate constante sunt : PI (3.14...) şi E ( 2,71...).
Metodele obiectului Math sunt funcţii matematice, cunoscute ca funcţii
implicite ca şi în alte limbaje de programare. Aceste funcţii returnează o valoare,
care poate fi număr real, întreg, natural sau unghi în radiani.
262
Cele mai importante metode ale obiectului Math sunt:
• abs(x) – returnează valoarea absolută a numărului real x (modul)
• cos (x) – returnează cosinusul numărului x
• sin(x) – returnează sinusul numărului x
• tan(x) -– returnează tangenta numărului 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 numărului real x ([x])
• random( ) – returnează un număr aleator în [0,1)
• round(x) – returnează cel mai apropiat întreg de argumentul x
(rotunjurea lui x)
• sqrt (x) – returnează radicalul numărului 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
Următorul exemplu testează unele funcţii 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 număr 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
Următorul exemplu defineşte o funcţie care returnează modulul unui
număr 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 număr 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 colecţie de caractere alfabetice, numerice şi speciale. În
JavaScript, un şir este o instanţă a obiectului String. Unui caracter al şirului i se
asociază o poziţie. Primul caracter al şirului are poziţia 0, al doilea 1 etc. Aşadar, în
şirul de lungime n, ultimul element va avea poziţia n-1.
În continuare ne vom ocupa de manipularea şirurilor.
Declararea unui şir se poate face în mai multe moduri:

− Utilizând constructorul String() şi operatorul new, de exemplu:
var s = new String(“Un sir”)
− Utilizând constructorul String() , de exemplu:
var s = String(“Un sir”)
− Printr-o instrucţiune de atribuire: var s = String(“Un sir”)
264
Ca orice obiect din JavaScript şi obiectul String are proprietăţi şi metode.
Proprietatea length reţine lungimea şirului.
De exemplu, sunt valabile declaraţiile:
− 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 afişa 5).
Amintim că pentru concatenarea şirurilor se foloseşte operatorul ‘+’.

Concatenarea şirurilor a fost de multe ori exemplificată până acum. De exemplu,
declaraţia : document.write(“mama”+ “mare”) va afişa ş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
găsit metoda returnează poziţia din şirul dat al primului caracter al lui s,
iar în caz contrar returnează –1. De exemplu, secvenţa următoare:
s=String(“mamamare”); alert(s.search(“ma”)) are ca efect afişarea
valorii 0, adică poziţia primei apariţii a şirului “ma” în şirul dat.
Metoda charAt(“indice”) - returnează caracterul de pe poziţia 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 cărui elemente vor fi
subşiruri ale şirului dat, obţinute de un şir delimitator. Astfel, din şirul:
s = ” 7, 35, 12, 67, 2007” , se va obţine vectorul v=(7,35,12,67,2007).
În exemplul următor se foloseşte 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ă subşirul cuprins între cele două

poziţii, incluzând caracterul de pe poz1, dar nu conţine caracterul de pe
poziţia poz2.
Metoda substring(poz1,poz2) – are exact acelaşi efect ca metoda
slice(poz1, poz2).
Metoda substr(poz,lung) – returnează tot un subşir (ca şi cele două
metode de mai sus), care începe de pe poziţia poz si are lungimea lung.
Exemplul următor 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

apariţie 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
Următoarele trei metode sunt de conversie a şirurilor în numere şi invers.
Ele au mai fost definite, fiind utile în unele exemplificări.
Metoda parseInt(s) şi metoda parseFloat(s) - convertesc un şir la un
număr întreg, respectiv zecimal. De exemplu, atunci când introducem
date cu prompt( “sir_numeric”,”val_initiala) se returnează o valoare
de tip şir. Pentru a o putea folosi în calcule matematice se foloseşte una
din metodele de mai sus, astfel:
parseInt(prompt(“sir_numeric”,”val_initiala)) .
De exemplu: parseInt(prompt( “dati dimensiune sirului”, “ ”))
Metoda toString(n) – converteşte o valoare de tip string în număr.
Această metodă este automat apelată în cazul concatenării şirurilor.
De exemplu, în declaraţia: document.write(“suma = “+ s), numărul s va
fi considerat string.
Următoarele ş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ă conţine litere şi
eventual caracterul spaţiu. 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), introduşi î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 arăta 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 arătat în secţiunea 18.1 că ne putem referi la membrii (proprietăţi şi
metode) unui obiect prin:
− nume_obiect.proprietate/metodă
− nume_obiect[proprietate/metodă]
− nume_obiect[index_proprietate/metodă]
Amintim că pentru orice lucru indexat (proprietăţi şi metode, elemente de
tablou, caracterele unui şir), numerotarea indecşilor începe de la 0. Având în
vedere cele de mai sus, următoarele afirmaţii sunt corecte:
− z[imag]
− z[“imag”]
− z[1]
Declararea unui tablou

Pentru a declara un tablou se foloseşte constructorul Array( ) şi operatorul
new într-o declaraţie de forma:
[var] nume_vector = new Array() ([ ] are caracter opţional în declaraţii)
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].
Iniţializarea şi afişarea unui tablou

Prin declararea unui tablou se alocă memorie tabloului, dar nu conţine încă
elemente. Pentru a crea elemente tabloului, acesta trebuie iniţializat, sau se atribuie
valori prin instrucţiuni de atribuire în program.
Componentele unui tablou pot să nu aibă toate aceleaşi tipuri de valori.
Iniţializarea unui tablou se poate face în două moduri:
1. iniţializând fiecare element, ca în exemplul următor:
v= new Array()
v[0]= ”produs”; v[1]=10; v[2]= 25.5; v[3]= false; v[4]= “19%”
2. declarând o listă de argument, astfel:
v= new Array(”produs”, 10, 25.5, false, “19%”)
În exemplul următor se creează un vector cu n componente, se iniţializează

şi se afişează.
<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. Iniţializarea unui vector

Cum un obiect poate avea ca proprietăţi alte obiecte (obiecte incluse),
putem declara tablouri cu mai mulţi 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 următorul exemplu se creează o matrice a cărei 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. Iniţializarea unei matrice
Lungimea unui vector

Proprietatea length a obiectului tablou reţine numărul de elemente ale unui
vector .
În JavaScript nu este limitat numărul de componente ale unui tablou. De
exemplu, dacă avem un vector cu 5 elemente, se poate crea un element, fie acesta
v[10], fără a crea toate elementele până 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 următor 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, crescător sau descrescător, se foloseşte

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 poziţie spre stânga.
Metoda push(“val_elem”) – adaugă la sfârşitul unui tablou un nou
element.
Metoda pop() – şterge ultimul element dintr-un tablou.
Să considerăm exemplul din figura 18.19 şi să aplicăm 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. Interacţiune JavaScript – HTML
În capitolul 17 secţiunea 17.2 (Funcţii în JavaScript), s-a arătat modul de

apelare a unei funcţii definite într-un script, folosind sintaxa:
nume_funcţie([parametri]).
În acest capitol vom arăta că funcţiile pot fi apelate din codul HTML al
paginii. Mecanismul care permite acest lucru este acela de tratare a evenimentelor.
De exemplu, evenimente pot fi: încărcarea şi descărcarea unei pagini web de către
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 funcţii
care să reacţioneze la evenimentele importante.
În JavaScript există 18 evenimente, o parte dintre acestea urmând să fie
descrise în continuare. Un obiect recepţionează anumite evenimente, exemplu:
elementul HTML <BUTTON atribute>, în JavaScript e considerat obiectul
BUTTON. El poate recepţiona evenimentul onclick (clic cu mouse-ul pe suprafaţa
lui). În urma acestui eveniment se poate lansa o funcţie.
Apelarea unei funcţii ca răspuns la un eveniment se face ca valoare a unui
atribut a unui tag HTML. Structura apelului de funcţie prin cod este:
<nume_tag atribut=nume_functie() >
În JavaScript tag-urile sunt obiecte, atributele pot fi evenimente, valorile
atributelor pot fi proprietăţi.
În cazul nostru, considerăm o funcţie Hello( ), pe care o apelăm 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 funcţie prin cod HTML
19.1. Legătura între JavaScript şi HTML

În această secţiune vom arăta 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.
Legătura dintre HTML şi JavaScript poate fi sintetizată în următorii paşi:
− 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 (excepţie: 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 distincţie între literele mari şi cele mici
când scriem atribute, de exemplu atributul border sau BORDER sau
Border semnifică acelaşi 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 recepţiona anumite evenimente, de
exemplu elementul button, poate recepţiona onclick, ondblclick.
− Pentru JavaScript, elementele HTML sunt obiecte. Atributele
componentelor HTML sunt în JavaScript, proprietăţile obiectelor. În
timpul afişării unei pagini web, proprietăţile 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 următorul 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
proprietăţii src a obiectului poza.src
− În JavaScript se face distincţie între litere mari şi mici, aşa că atributul
SRC din HTML trebuie scris ca proprietate în JavaScript cu litere mici.
− Evenimentele pot fi recepţionate de anumite componente (asa cum am
mai precizat).
− Executarea unui eveniment lansează în execuţie o funcţie scrisă într-un
script. Apelul funcţiei se face în cadrul codului HTML, ca atribut al unui
element HTML. De exemplu, pentru evenimentele onload (încarcarea) şi
unload (descărcarea) unei pagini web, se creează două funcţii, aşa cum
reiese din exemplul de mai jos:
<HTML> <HEAD>
<TITLE>Apel funcţie 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. Funcţiile setTimeout() si clearTimeout()

În capitolul 16 s-au prezentat unele metode ale obiectului WINDOW şi
anume: alert()şi prompt(). În această secţiune se vor prezenta alte două metode ale
obiectului window: setTimeout() şi clearTimeout(). Aceste funcţii se vor prezenta
înainte de a prezenta obiectul window, deoarece se vor utiliza în exemplele ce vor
urma.
Aceste funcţii se folosesc pentru a face paginile web animate, adică
afişarea în aceeaşi poziţie a mai multor secvenţe text sau imagine, care să
staţioneze un anumit interval de timp.
278
Funcţia setTimeout – realizează o pauză după afişarea unei secvenţe, până
la reluarea afişării. Funcţia are 2 parametri: primul este numele funcţiei, apelată la
pauză, iar al doilea parametru este lungimea pauzei în milisecunde.
Funcţia setTimeout() returnează o referinţă, o valoare care este folosită ca
parametru pentru funcţia clearTimeout(). Sintaxa funcţiei setTimeout() este:
ref = setTimout(“nume_funcţie”, nr_milisecunde)
De exemplu, să presupunem că introducem un buton în pagină. La
apăsarea butonului se va lansa o funcţie care are inclusă funcţia setTimeout(), care
execută funcţia la fiecare 2 secunde. Execuţia funcţiei se va încheia odată cu
închiderea ferestrei.
<HTML><HEAD>
function Mesaj(){
alert("Mesajul va fi afişat la 2 secunde")
ref = setTimeout("Mesaj",2000)}
</SCRIPT></HEAD>
<BODY>
<INPUT TYPE="BUTTON" value = "Click!" onclick = "Mesaj()">
</BODY></HTML>
Figura 19.3. Funcţia setTimeout()
Funcţia clearTimeout() este tot o funcţie predefinită, o metodă a obiectului

window. Aceasta funcţie are ca intrare (parametru) valoarea returnată a funcţiei
setTimeout() (în exemplul de mai sus valoarea returnată este ref). Efectul funcţiei
este de a întrerupe execuţia funcţiei din parametrul funcţiei setTimeout() la cerere,
nu la închiderea ferestrei, aşa cum se întâmplă în lipsa acestei funcţii.
Utilizând funcţia clearTimeout, utilizatorul unei pagini poate da orice altă
comandă, întrerupând execuţia funcţiei la trecerea intervalului de timp
nr_milisecunde.
Dacă dorim întreruperea execuţiei funcţiei Mesaj() din exemplul de mai
sus, înaintea închiderii ferestrei folosim funcţia clearTimeout(). Această funcţie
este inclusă într-o funcţie Oprire(ref) care se lansează când butonul STOP este
apăsat. Exemplul de mai sus cu adăugarea funcţie clearTimeout(ref) este:
279
<HTML><HEAD>
function Oprire()
{clearTimeout(ref)}
function Mesaj()
{alert("Mesajul va fi afişat 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. Funcţia clearTimeout()
În exemplul următor dorim ca un buton să afişeze alternativ 2 mesaje

diferite la un interval de timp dat, de exemplu la 2 secunde.
<HTML><HEAD>
function Afiseaza() {
alert("Butonul iniţial apăsat")}
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 poziţie
În HTML cele mai importante elemente care recepţionează evenimente

sunt elementele <FORM> şi <IMG>. Vom descrie în continuare aceste elemente,
ce evenimente recepţionează, ce proprietăţi ş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 semnificaţia elementelor unui formular şi vom descrie
tratarea evenimentelor recepţionate de elementele unui formular. Amintim că un
formular conţine mai multe elemente, numite şi controale: casete de text, casete de
validare, butoane radio şi liste de opţiuni. 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
reacţiona la nevoie cu programe nonweb (baze de date, aplicaţie windows etc.)
necesare prelucrării 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, fără a fi
strânse într-un formular. Tag-urile INPUT, SELECT, TEXTAREA din HTML vor
deveni obiectele Input, Select, Textarea în JavaScript.
281
În JavaScript se pot valida informaţiile introduse în paginile web, precum
şi schimbarea dinamică a unui formular în timp ce acesta este afişat, 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
proprietăţi cărora li se asociază apelul funcţiei, care se va executa când se produce
evenimentul (clic pe un buton, selectarea unui buton radio, selectarea elementelor
unei liste sau mutarea cursorului pe un element etc.).
Când 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 primeşte
focus-ul.
− Evenimentul onfocus are loc când elementul primeşte focus-ul.
− Evenimentul onblur are loc când elementul pierde focus-ul. Când
utilizatorul mută cursorul în afară, ieşirea din afara atenţiei se mai
numeşte ş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, excepţie făcând
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ă funcţia

validare_nume ( ) căreia 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 secţiunea 17.3 se cunoaşte faptul ca funcţiile search(x) şi indexOf (x)
returnează poziţia unui caracter într-un sir. Dacă şirul nu conţine caracterul ‘x’,
funcţiile returnează -1. Variabila IND ia valoarea -1 dacă simbolul ‘_’ nu se
găseşte î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ă conţine 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, numărătoarea
componentelor începe cu 0. Dacă dorim să ne referim la formularul 2, scriem:
[window.]document.forms[1] (unde [] are caracter opţional.
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ă afişăm 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 căsuţe cu informaţii în funcţie de informaţiile din alte elemente,
deja introduse. Această metodă poate fi realizată cu evenimentul onchange, care
este executat când un element pierde focus-ul (iese din atenţie) şi valoarea
elementului s-a modificat de la intrarea în atenţie (primeşte focus).
Să presupunem că introducem patru căsuţe de text, care conţin informaţii
despre: nume_produs, cantitate, pret/buc şi valoarea plătită. Dorim să completăm
automat valoarea plătită pe baza informaţiilor introduse în căsuţele cantitate şi preţ.
284
Valoarea plătită va consta din produsul dintre cantitate şi preţ. Obiectele
CANTITATE şi PRET captează (recepţionează) evenimentul onchange (tag-ul
INPUT are atributul onchange) care apelează funcţia 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ă considerăm un formular cu date despre Universitate. Dacă
modificăm unul din elementele formularului, de exemplu, numărul de telefon sau
adresa, evenimentul onchange apelează o funcţie care evidenţiază 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, Bucureşti,
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
căsuţe de text, după mutarea cursorului pe altă zonă decât cea modificată (out of
focus), informaţiile din căsuţa modificată vor fi formatate conform funcţiei
formatare(obiect) cu culoarea roşie, fundal cyan, italic şi bold.
19.3.4. Evidenţierea selecţiei căsuţelor de validare, utilizând JavaScript

Căsuţele de validare sunt utilizate (aşa cum s-a arătat în capitolul 10 –
Formulare) pentru a selecta unul sau mai multe articole dintr-un set de articole.
Casuţele 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ă, considerăm un set de articole electro-casnice
care există într-un magazin. Se vor bifa cele care există la o anumită dată în stoc.
Funcţia Stoc() evaluează fiecare căsuţă de validare, iar elementele bifate vor fi
afişate într-o căsuţă de avertizare (cu ajutorul funcţiei alert). Se va folosi un buton,
Testare, care recepţionează evenimentul onclick, care are ca valoare apelul funcţiei
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>MAŞINĂ DE
SPĂLAT<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
BUCĂTĂRIE<BR>
<INPUT type="button" name="testare" value="Ok" onclick="stoc()">
</BODY>
</HTML>
287
Figura 19.10. Obiectul checkbox
19.3.5. Listele de opţiuni schimbate dinamic cu ajutorul butoanelor radio,

folosind JavaScript
Amintim că în HTML, listele de opţiuni se introduc cu tag-urile

<SELECT>…</SELECT> şi <OPTION>…</OPTION>.
Cum atributele unui tag HTML devin proprietăţile obiectului în JavaScript,
putem spune că obiectul SELECT are proprietăţile: name, multiple (în cazul în care
sunt selectate mai multe elemente din listă), size (în cazul afişării mai multor
elemente din listă), options (vector de obiecte OPTION), selectedIndex (reţine
indexul opţiunii selectate).
Obiectul OPTION are proprietăţile: value şi selected (care ia valoarea true
dacă opţiunea este selectată).
Butoanele Radio se folosesc pentru a selecta o opţiune din mai multe. Dacă
mai multe butoane au acelaşi nume, ele aparţin unei selecţii şi se exclud unul pe
celălalt.
În acest caz, ne referim la butoane în JavaScript prin:
nume[i].proprietate
nume[i].metodă()
unde i = 0, ….., n -1 pentru n opţiuni de butoane.
Obiectul Radio are proprietăţile: name, type, value şi checked (butonul este
selectat).
Pentru exemplificare, să presupunem că dorim să afişăm alternativ două
liste, în funcţie de butonul selectat: universităţi de stat şi universităţi particulare.
Listele au 4 elemente, vizibile două şi se pot selecta mai multe elemente
din fiecare listă.
Listele conţin denumirea unor universităţi 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, utilizând evenimentul onsubmit

Pentru a modifica unele elemente dintr-un formular, după ce acesta a fost
trimis programului de scriptare CGI în vederea prelucrării, se poate folosi
evenimentul onsubmit, ca atribut al elementului SUBMIT.
Dacă dorim, de exemplu, să validăm datele dintr-un formular sau să
corectăm unele informaţii introduse, se poate asocia o funcţie în JavaScript
evenimentului onsubmit.
În exemplul următor, considerăm o funcţie 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.
Când se execută clic pe butonul SUBMIT, acesta recepţionează
evenimentul onsubmit care apelează funcţia creeaza_parola(), care se execută şi
apoi formularul este trimis programului CGI.
Pentru formularul de mai jos parola va fi EA3 (iniţiala numelui şi
prenumelui şi lungimea numelui), iar codul este următorul:
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 obţinută –EA3.
19.3.7. Activarea, Dezactivarea, Citirea unor elemente realizate cu funcţii

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 arătat 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ă schimbăm valoarea atributului readonly a elementului
Parola din valoarea true în false pentru a crea parola, atunci în funcţia JavaScript,
înainte de a atribui o valoare elementului Parola, trebuie resetat atributul readonly
pe valoarea false.
Să reluăm exemplul 19.12 şi să considerăm iniţial că elementul Parola este
disabled şi readonly. După introducerea informaţiilor în câmpurile Nume si
Prenume, se apelează funcţia activeaza_parola(), care va activa câmpul Parola şi
apoi funcţia creeaza_parola(), care va reseta atributul readonly la valoarea false şi îi
va atribui valoarea formată din primele litere din câmpurile Nume şi Prenume şi
din lungimea câmpului 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
proprietăţi, atributele elementului IMG enumerate mai sus, cu excepţia atributului
ID.
Evenimentele recepţionate de elementul IMG sunt:
− onclick – evenimentul se produce când se execută un clic pe un obiect
aflat pe pagină
− ondblclick – evenimentul se produce când se execută dublu clic pe un
obiect
− onmousemove – evenimentul se produce, în mod continuu, când cursorul
mouse-ului se mişcă pe un obiect
− onmouseover – evenimentul se produce, o singură dată, când se trece cu
mouse-ul peste un obiect
− onmouseout – evenimentul se produce când mouse-ul părăseşte
suprafaţa unui obiect
Se observă şi din modul de definire că aceste evenimente pot fi

recepţionate şi de alte obiecte, nu doar de obiectul IMG.
Pentru a schimba aspectul unei pagini, pe măsură ce vizitatorul parcurge o
pagină, cu ajutorul mouse-ului se folosesc elementele care recepţionează
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 când 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 acţiuni atributului onmouseover (de
exemplu) al unui tag HTML, caz în care nu se foloseşte JavaScript
− metoda indirectă – prin crearea unei funcţii JavaScript apelată de
atributul onmouseover (de exemplu) la declanşarea unui eveniment
(onmouseover). Se foloseşte, mai ales, dacă se doreşte să aibă loc mai
multe acţiuni ca răspuns la un eveniment.
OBSERVAŢIE!
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 compatibilităţii browser-ului cu elemente rollover se poate face
astfel:
if (document.images)
{ Browserul recunoaşte elementele rollover şi folosirea lor
prin metoda directă }
else
{ Browserul nu recunoaşte elementele rollover}
Vom încerca în continuare să simplificăm utilizarea elementelor de

modificare a unei pagini în funcţie de plimbarea mouse-ului pe pagină, folosind
una sau ambele metode.
19.4.1. Evenimentele onclick şi ondblclick

Să presupunem că obiectul IMG recepţionează evenimentul onclick. În
urma acestui eveniment, imaginea, care va conţine atributul onclick, va evidenţia
imaginea, înconjurând-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

funcţii 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 funcţie
OBSERVAŢII!
− Dacă atributul onclick din ambele metode (figurile 19.14 si 19.15) se
înlocuieşte cu atributul ondblclick, efectul este acelaşi, diferenţa 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 instrucţiunea de atribuire
completă, în cazul nostru onclick = “border=”7”
295
Instrucţiunea de atribuire (“border = 7”) trebuie neapărat sa fie inclusă
între ghilimele sau între apostrofuri. Este indicat ca între ghilimele să fie cuprinsă
instrucţiunea de atribuire şi între apostrofuri valorile atributelor.
19.4.2. Evenimentul onmousemove

Dacă dorim ca un element să se se mişte continuu atunci când ne aflăm cu
mouse-ul deasupra unui obiect se foloseşte evenimentul onmousemove.
Să considerăm că dorim să mărim continuu o imagine în înălţime când ne
aflăm 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>
Utilizând o funcţie JavaScript, apelată de atributul onmousemove al
elementului IMG, pot să aibă loc mai multe acţiuni. În exemplul de mai sus se
poate mări o imagine şi în lăţime şi în înălţime.
<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ă când mouse-ul trece peste un obiect. Dacă se doreşte a reveni asupra
modificărilor făcute de producerea evenimentului onmouseover, se utilizează
evenimentul onmouseout care are loc atunci când mouse-ul părăseşte obiectul
respectiv.
De exemplu, dorim să schimbăm o imagine atunci când mouse-ul este
deasupra ei cu o alta şi după ce mouse-ul părăseşte 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>
Acelaşi efect obţinem utilizând 2 funcţii:
− 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 când mouse-ul iese de pe suprafaţa 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 animaţii

Din capitolul 12 se ştie cum poate fi încărcat un fişier avi, care este un film
realizat din câteva imagini. De multe ori încărcarea unui fişier avi poate dura, ceea
ce poate supăra pe unii vizitatori.
Se poate realiza o animaţie încărcând imaginile într-un obiect array şi
folosind unele funcţii apelate de evenimentele onmouseover sau onclick. Funcţia se
va executa când mouse-ul va fi pe imagine, respectiv când se va da clic pe imagine.
Funcţia va afişa la o secundă sau la un alt interval de timp dorit o imagine. În felul
acesta se va crea impresia derulării 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ă realizăm o animaţie
nu se mai pierde timp cu încărcarea lor ca în cazul unui fişier avi de animaţie.
Următorul exemplu arată cum se realizează acest lucru, afişând 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. Animaţie
299
20. Elemente avansate JavaScript
20.1. Legătura între HTML, JavaScript şi CSS

În capitolele 13-15 s-a introdus CSS (Cascading Style Sheets) – foi de stil
(în cascadă). Utilizând JavaScript stilurile se pot modifica dinamic. Amintim că
stilurile pot fi create inline (utilizând atributul style), foi de stil în partea de antet a
paginii (utilizând blocul <STYLE> ... </STYLE>) şi foi de stil externe, în fişiere
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ă posibilităţi:
− 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 legătura între HTML, JavaScript şi CSS trebuie ştiut că:
Elementele HTML sunt obiecte în JavaScript. Fiecărui element i se

poate asocia un id cu ajutorul căruia avem acces la proprietăţile
obiectului respectiv
În JavaScript fiecare obiect are proprietatea style cu excepţia obiectelor:
HTML, HEAD, BODY, BASE şi BASEFONT
300
Proprietatea style în JavaScript este tot de tip obiect. Obiectul style are la
rândul lui, alte obiecte corespunzătoare atributelor de stil din CSS.
În JavaScript se foloseşte 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 corespunzătoare 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
proprietăţilor (obiectelor) obiectului style
În continuare se vor prezenta exemple care vor proba cele menţionate mai
sus.
1) În acest exemplu se doreşte formatarea unui bloc de text atunci când se
dă un dublu clic pe suprafaţa lui. Pentru acesta obiectul DIV recepţionează
evenimentul ondblclick, care va apela o funcţie ce va formata textul din blocul
DIV, aşa cum reiese din următorul 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 funcţia
stiluri(). Funcţia 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ă afişarea unui text, care iniţial 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 afişează un tabel care conţine temperatura,
umiditatea şi presiunea. Acestea vor defila pe verticală. Odată afişată o
caracteristică, aceasta va staţiona o perioadă pe ecran, după care va dispărea şi va
apărea la sfârşitul celorlalte, după care din nou totul se deplasează pe verticală.
Poziţionarea este absolută, faţă de colţul stânga-sus. Pentru aceasta se foloseşte
atributul top.
Se foloseşte o funcţie mutare(), care realizează deplasarea unei linii de
tabel. După ce aceasta dispare, executarea se opreşte. Această funcţie este apelată
de altă funcţie schimbare(), care se execută la intervale egale de timp după o
aşteptare.
Î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. Informaţiile sunt
afişate de către browser un ajutorul ferestrelor.
Utilizând JavaScript, putem gestiona lucrul cu obiectul fereastră. Obiectul
window este de cel mai înalt nivel, motiv pentru care se poate omite cuvântul
window din faţa proprietăţilor sau metodelor. De exemplu, sunt corecte ambele
variante de apel a metodei alert():
window.alert(“Un text”)
sau
alert(“Un text”)
Utilizând proprietăţile şi metodelele obiectului window putem:
− să deschidem mai multe ferestre şi să schimbăm conţinutul acestora
dinamic
− să închidem ferestrele
− să determinăm un stil ferestrei (cu menubar, scrollbar, bara de stare etc.)
− să activăm şi să dezactivăm o fereastră
În continuare se definesc cele mai importante metode şi proprietăţi ale

obiectului window.
Unele metode ale obiectului window au fost deja introduse, fiind necesare
pentru exemplificările 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 când sunt apăsate,
deschid ferestre. Unele ferestre se pot deschide instantaneu la încărcarea unei
pagini web, de exemplu, reclamele.
Pentru a deschide o fereastră se foloseşte metoda open(), care returnează o
referinţă care este un obiect fereastră. Sintaxa utilizării metodei open este:
fereastra=window.open(“nume_fişier.html”,“nume_fereastră”,“listă_parametri”)
unde:
− nume_fişier.html este adresa URL a paginii web care va apărea în
fereastră
− nume_fereastră este numele pe care dorim să-l dăm ferestrei
− listă_parametri este opţională şi reprezintă o listă de parametri, separaţi
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 importanţi ai metodei open() sunt daţi î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 conţine adresa location=1
location
fişierului 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 Inălţimea ferestrei în pixeli
width Lăţimea ferestrei în pixeli
Coordonatele x, y ale
top, left coltului stânga-sus la care va fi în pixeli
afişată fereasta
Figura 20.4. Parametrii metodei open()
Pentru a închide o fereastră se foloseşte metoda close() a obiectului

window. Pentru a apela metoda close() se foloseşte referinţa 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ă. Următorul exemplu arată cum se poate deschide o nouă
fereastră în colţul din stânga sus (left=0, top=0). Fereastra curentă conţine două
butoane, unul folosit pentru deschiderea unei ferestre, celălalt 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
OBSERVAŢIE!
Dacă se doreşte 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 funcţie care conţine ciclul for. Primul parametru al metodei
open() este şirul vid(“ “), presupunând că dorim să se afişeze ferestre vide. În cazul
în care în ferestre se afişează anumite pagini web, nu se mai poate folosi un ciclu
for, ci fiecare fereastră trebuie deschisă cu metoda open().
Următorul exemplu afişează 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), deşi sunt site-uri care
afişează mai multe ferestre cu reclame. Când o fereastră este activă, este vizibilă pe
ecran şi poate recepţiona evenimentele de la mouse şi tastatură.
Pentru a activa o fereastră se poate face atât cu un clic pe fereastra
respectivă, cât şi cu metoda focus(). O fereastră inactivă se poate afla atât pe ecran,
307
cât şi pe bara de stare. Pentru a dezactiva o fereastră (pierde focus) se execută clic
pe suprafaţa altei ferestre sau se foloseşte metoda blur(), în acest ultim caz
fereastra nu mai poate fi pe ecran ci numai pe bara de stare.
Următorul exemplu deschide o nouă fereastră care va insera o pagină web
cu informaţii despre universităţile 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 informaţii despre universităţile 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 doreşte 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 colţului din stânga sus, de unde se doreşte afişarea
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 funcţie care să
apeleze metoda scrollTo(0,0) şi un buton în corpul programului care să apeleze
funcţia astfel:
function Derulare() { fereastra.scrollTo(0,0) }
şi butonul
<INPUT type=”button” value=”Derulat” onclick=”Derulare()” >
La apăsarea butonului “Derulat”, pagina web încărcată în fereastră nouă,
se va derula automat. Apelul metodei în cazul în care se doreşte ca pagina din
fereastra curentă să se deruleze automat poate fi : self.scrollTo(0,0).
Metodele back(), forward(), stop() sunt mai puţin folosite, având acelaşi
efect ca şi butoanele browser-ului cu aceleaşi nume.
Dintre proprietăţile obiectului window, cea mai utilă este proprietatea
status(), care are ca efect afişarea valorii reţinută de ea în bara de stare.
De exemplu, adăugarea următoarei funcţii la unul din exemplele de mai
sus are ca efect afişarea mesajului în bara de stare:
function Mesaj() {status=”Testarea proprietăţii 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 proprietăţi ale obiectului (document.write(),
document.images, document.forms etc.) s-a discutat în capitolele precedente.
În continuare se prezintă proprietăţile principale ale obiectului document,
precum şi cele mai importante metode ale sale.
Unele proprietăţi sunt de tip obiect, aşa 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 rândul ei, alte proprietăţi şi metode.
Este un obiect vector ale tuturor elementelor care se găsesc într-o pagină, aşa 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, câte un element pentru
fiecare imagine (IMG), paragraf (P) etc.
Cele mai importante proprietăţi ale obiectului vector all sunt:
− tagName – reţine tipul, de exemplu IMG, P etc. Dacă există, de
exemplu, o imagine într-o celulă a unui tabel se va afişa TABLE, TR,
TH sau TD, IMG
− length – indică numărul de elemente ale vectorului all
− id – afişează id-ul elementelor pentru care atributul id a fost definit
Următorul exemplu probează aceste proprietăţi ale obiectului all[i]. Se va

crea o funcţie care va afişa atât tipul tuturor elementelor unei pagini web, cât ş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, funcţia de

mai jos numără elementele de tip paragraf (elementul P) dintr-o pagina
şi le colorează în roşu
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 secţiunea
animaţie. Images este un vector care conţine toate imaginile dintr-un document.
Fiecărei imagini i se asociază câte un element de tablou în funcţie de ordinea
imaginilor în pagină. Funcţia următoare afişează sursa imaginilor dintr-un document.
function imagini() {
for (i=0; i<document.images.length; i++)
alert(document.images[i].src)}
20.3.2. Proprietăţi de culoare ale obiectului document

Proprietăţile de culoare sunt mai rar folosite din cauză că este mult mai util
să se folosească stilurile. Proprietăţile de culoare sunt pentru fond, font şi legături.
Acestea sunt:
− bgColor – pentru culoarea de fond a documentului
− fgColor – pentru culoarea fontului
− linkColor – culoarea pentru legături (textul legăturilor)
312
În următorul exemplu se creează o funcţie care, atunci când va fi apelată,
va colora în galben documentul, textul cu albastru şi legăturile cu roşu.
<HTML><HEAD>
function Coloreaza() {
document.bgColor="yellow"
document.fgColoor="red"
document.linkColor="blue"}
</SCRIPT></HEAD>
<BODY>
Un exemplu pentru proprietăţile de coloare
<A href="www.edu.ro">Universităţi</A><BR>
<A href="www.edu.ro">Universităţi de stat</A><BR>
<A href="www.edu.ro">Universităţi particulare acreditate</A><BR>
<INPUT type="button" name="Culoare" value="Coloreaza"
onclick="Coloreaza()">
</BODY></HTML>
După apăsarea butonului Coloreaza, browser-ul afişează:
Figura 20. 11. Proprietăţi de culoare
313
Metoda write() – a fost prezentată în capitolul 17, având nevoie să fie
folosită în exemplificări. Amintim că ea este utilizată pentru a scrie în document şi
se aplică sub forma document.write(text).
Dacă textul conţine tag-uri HTML, sau este un fişier html, browser-ul
interpretează tag-urile şi le afişează.
Î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 - Specificaţii 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
Clasificări
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
Conţinut 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; %
Poziţionare
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 Huţanu, Crearea şi programarea paginilor Web

HTML+CSS+JavaScript+Photoshop+PHP, Editura L&S Soft, 2006
3. Jim Keogh, JavaScript fără 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, Iniţiere în JavaScript şi tehnologii Netscape, Editura Tehnică,

1998
7. Mihaela Brut, Sabin Buruga, Prezentări 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/70×100
Editura Fundaţiei România de Mâine
Bulevardul Timişoara nr.58, Bucureşti, Sector 6
Tel./Fax: 021/444.20.91; www.spiruharet.ro
e-mail: contact@edituraromaniademaine.ro
332

Proiectare Pagini Web

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Proiectare Pagini Web

Caricato da

Copyright:

Formati disponibili

FLORENTINA RODICA NICULESCU

PROIECTAREA PAGINILOR WEB

© Editura Fundaţiei România de Mâine, 2007

FLORENTINA RODICA NICULESCU

PROIECTAREA PAGINILOR WEB

EDITURA FUNDAŢIEI ROMÂNIA DE MÂINE

2. HTML – noţiuni de bază....................................................................................... 20

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

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

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

11. Hărţi de imagine .................................................................................................. 131

12. Facilităţi suplimentare Multimedia ………………………………………… 142

14. Clase de proprietăţi în CSS ................................................................................ 173

15. Poziţionarea elementelor în pagină în CSS ....................................................... 193

16. JavaScript – Elemente de bază........................................................................... 209

17. Instrucţiuni şi Funcţii în JavaScript .................................................................. 230

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

19. Interacţiune 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 informaţiei 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 fişiere. Transferul

Dacă datele au fost introduse corect, atunci programul afişează o fereastră cu 2

1.4. Crearea paginilor Web

În acest capitol se vor introduce noţiunile de bază ale Limbajului de Marcare

2.1. Elemente standard ale unei pagini Web

05-01-2007 Ana Ionescu

Fişierul va fi afişat de browser, ca în figura de mai jos.

Se observă că ceea ce afişează browser-ul nu seamănă 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 fişierul 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 redactării 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 înţeles specific unui font

Figura 3. 8. Stiluri logice de frază

De multe ori avem nevoie să introducem în pagini web secvenţe de

Liste Ordonate Liste Marcate Liste de Definiţii

Toate tipurile de liste:

4.1. Liste ordonate (Ordered lists)