CURS Thnologii WEB

Centrul de Învăţământ la Distanţă şi Învăţământ cu Frecvenţă Redusă
FACULTATEA DE MATEMATICĂ ȘI INFORMATICĂ

PROGRAM DE LICENȚĂ ID:
Informatică
Tehnologii Web
CURS PENTRU ÎNVĂȚĂMÂNT LA DISTANȚĂ
AUT O RI :
Conf. Dr. Livia Sângeorzan
Lector Dr. Nicoleta Enache-David
Prep. Corina Nӑnӑu
ANUL I I I , S E M . 1
2017
1
Cuprins
Introducere ................................................................................................................................. 6
Modulul I. Introducere în tehnologiile Web............................................................................... 8
U1. Consideraţii generale privind Internet şi World Wide Web............................................ 9
M1.U1.1. Introducere ............................................................................................................. 9
M1.U1.2. Obiectivele unităţii de învăţare .............................................................................. 9
M1.U1.3. Evoluţia Web-ului................................................................................................ 10
M1.U1.4 Browsere WEB ..................................................................................................... 11
M1.U1.5 Primii paşi către construcţia unui site ................................................................... 11
M1.U1.6. Rezumat ............................................................................................................... 13
M1.U1.7. Test de evaluare a cunoştinţelor........................................................................... 13
U2. Principii de bază în web design ..................................................................................... 14
M1.U2.1. Introducere ........................................................................................................... 14
M1.U2.2. Obiectivele unităţii de învăţare ............................................................................ 14
M1.U2.3. Alinierea............................................................................................................... 15
M1.U2.4. Proximitatea ......................................................................................................... 17
M1.U2.5. Repetiţia ............................................................................................................... 19
M1.U2.6. Contrastul............................................................................................................. 20
M1.U2.7. Rezumat ............................................................................................................... 23
Modulul II HTML (Hyper Text Markup Language)................................................................ 24
Introducere ........................................................................................................................... 24
Competenţe........................................................................................................................... 25
U1. Crearea unui document HTML ..................................................................................... 26
M2.U1.1. Introducere ........................................................................................................... 26
M2.U1.3. Structura de bază a unui document HTML.......................................................... 26
M2.U1.4. Tag-uri HTML ..................................................................................................... 27
M2.U1.5. Tag-uri din cadrul documentului HTML ............................................................. 28
M2.U1.6. Culori, fonturi, margini ........................................................................................ 29
M2.U1.7. Tag-ul Body ......................................................................................................... 29
M2.U1.8. Tag-ul Basefont (textul de bază).......................................................................... 32
M2.U1.9. Rezumat ............................................................................................................... 34
M2.U1.10. Test de evaluare a cunoştinţelor......................................................................... 34
U2. Stilurile blocurilor de text.............................................................................................. 35
M2.U2.1. Introducere ........................................................................................................... 35
M2.U2.3. Stiluri fizice.......................................................................................................... 35
M2.U2.4. Stiluri logice......................................................................................................... 40
M2.U2.5. Tag-ul font (configurarea font-urilor).................................................................. 42
M2.U2.6. Blocuri de texte.................................................................................................... 45
M2.U2.7. Linii orizontale..................................................................................................... 50
M2.U2.8. Rezumat ............................................................................................................... 51
U3. Tabele ............................................................................................................................ 53
M2.U3.1. Introducere ........................................................................................................... 53
M2.U3.3. Tag-ul <table> ..................................................................................................... 53
M2.U3.4. Alinierea tabelului în pagina web ........................................................................ 55
2
M2.U3.5. Precizarea culorilor de fond pentru un tabel ........................................................ 56
M2.U3.6. Dimensionări........................................................................................................ 58
M2.U3.7. Rezumat ............................................................................................................... 61
U4. Imagini şi ancore ........................................................................................................... 62
M2.U4.1. Introducere ........................................................................................................... 62
M2.U4.3. Tagul <img> ........................................................................................................ 62
M2.U4.4. Legaturi (link-uri) ................................................................................................ 66
M2.U4.5. Hărţi de imagini ................................................................................................... 71
M2.U4.6. Rezumat ............................................................................................................... 73
U5. Formulare ...................................................................................................................... 74
M2.U5.1. Introducere ........................................................................................................... 74
M2.U5.3. Tagul <form>....................................................................................................... 74
M2.U5.4. Tag-ul <input> ..................................................................................................... 75
M2.U5.5. Liste de selecţie <select> <option >…. </select>......................................... 76
M2.U5.6. Câmpuri de editare multiple ................................................................................ 77
M2.U5.7. Rezumat ............................................................................................................... 80
M2.U5.9. Temă de control ................................................................................................... 80
Modulul III Reguli CSS (Cascading Style Sheets) .................................................................. 81
Introducere ........................................................................................................................... 81
Competenţe........................................................................................................................... 81
U1. Reguli CSS la nivel teoretic .......................................................................................... 82
M3.U1.1. Introducere ........................................................................................................... 82
M3.U1.3. Integrarea regulilor CSS într-un fişier HTML..................................................... 82
M3.U1.4. Pseudo-clase şi pseudo-elemente......................................................................... 84
M3.U1.5. Precedenţa regulilor ............................................................................................. 85
M3.U1.6. Atribute CSS ........................................................................................................ 86
M3.U1.7. Rezumat ............................................................................................................... 90
U2. Exemplificarea regulilor CSS........................................................................................ 91
M3.U2.1. Introducere ........................................................................................................... 91
M3.U2.3. Exemplificarea utilizării foilor de stil.................................................................. 92
Temă de control.................................................................................................................. 110
Modulul IV JavaScript ........................................................................................................... 111
Introducere ......................................................................................................................... 111
Carateristici ale limbajului JavaScript: .............................................................................. 111
Competenţe......................................................................................................................... 112
U1. Introducere în JavaScript............................................................................................. 113
M4.U1.1. Introducere ......................................................................................................... 113
M4.U1.2. Obiectivele unităţii de învăţare .......................................................................... 113
M4.U1.3. Avantajele utilizării limbajului JavaScript ........................................................ 113
M4.U1.4. Înglobarea instrucţiunilor JavaScript în HTML................................................. 115
M4.U1.5. Executarea scripturilor....................................................................................... 115
3
M4.U1.6. Rezumat ............................................................................................................. 116
U2. Limbajul JavaScript..................................................................................................... 117
M4.U2.1. Introducere ......................................................................................................... 117
M4.U2.3. Tipuri de date, variabile şi operatori .................................................................. 117
M4.U2.4. Instrucţiuni şi funcţii predefinite........................................................................ 118
M4.U2.5. Evenimente ........................................................................................................ 120
M4.U2.6. Obiecte ............................................................................................................... 120
M4.U2.7. Legatura între limbajul JavaScript şi elementele dintr-un formular .................. 120
M4.U2.8. Manipularea tag-urilor/nodurilor/elementelor ................................................... 122
M4.U2.9. Handlere de evenimente..................................................................................... 124
M4.U2.10. Rezumat ........................................................................................................... 126
M4.U2.11. Test de evaluare a cunoştinţelor....................................................................... 126
U3. Obiecte JavaScript ....................................................................................................... 127
M4.U3.1. Introducere ......................................................................................................... 127
M4.U3.3. Obiectul window................................................................................................ 127
M4.U3.4. Obiectul location................................................................................................ 130
M4.U3.5. Obiectul document............................................................................................. 131
M4.U3.6. Obiectul forms ................................................................................................... 132
M4.U3.7. Obiectul image................................................................................................... 133
M4.U3.8. Obiectul date ...................................................................................................... 134
M4.U3.9. Obiectul navigator.............................................................................................. 134
M4.U3.10. Obiectul layers (all) ......................................................................................... 135
M4.U3.11. Obiectul Math .................................................................................................. 139
M4.U3.12. Obiectul Array ................................................................................................. 140
M4.U3.13. Obiectul String................................................................................................. 141
M4.U3.14. Rezumat ........................................................................................................... 143
U4. Aplicaţii complexe în JavaScript................................................................................. 145
M4.U4.1. Introducere ......................................................................................................... 145
M4.U4.3. Învăţarea JavaScript prin exemple..................................................................... 146
Temă de control.................................................................................................................. 159
Modulul V Alte tehnologii pentru realizarea paginilor web .................................................. 160
Introducere ......................................................................................................................... 160
Competenţe......................................................................................................................... 160
U1. Limbajul PHP .............................................................................................................. 161
M5.U1.1. Introducere ......................................................................................................... 161
M5.U1.3. Primii paşi în PHP.............................................................................................. 161
M5.U1.4. Noţiuni indroductive de sintaxă........................................................................ 163
M5.U1.5. Aplicaţii complexe utilizând limbajele PHP, HTML şi JavaScript ................... 166
M5.U1.6. Rezumat ............................................................................................................. 170
U2. Flex3............................................................................................................................ 172
M5.U2.1. Introducere ......................................................................................................... 172
4
M5.U2.3. Elemente de bază ale lui Adobe Flex3............................................................... 173
M5.U2.4. Limbajul MXML ............................................................................................... 176
M5.U2.5. ActionScript3 ..................................................................................................... 178
M5.U2.5. Rezumat ............................................................................................................. 182
U3. Lumea virtuală pe Internet .......................................................................................... 183
M5.U3.1. Introducere ......................................................................................................... 183
M5.U3.3. Produse soft pentru realizarea graficii 3D ......................................................... 184
M5.U3.4. Introducere în limbajul VRML .......................................................................... 187
M5.U3.5. Noduri în VRML V2.0....................................................................................... 189
M5.U3.6. Evenimente în VRML........................................................................................ 199
M5.U3.7. Noduri speciale .................................................................................................. 206
M5.U3.8. Interpolare în VRML ......................................................................................... 207
M5.U3.9. Rezumat ............................................................................................................. 209
Modulul VI. Prelucrarea imaginilor cu Gimp 2.6 .................................................................. 211
Introducere ......................................................................................................................... 211
Competenţe......................................................................................................................... 211
U1. Concepte de bază în GIMP 2.6.................................................................................... 212
M6.U1.1. Introducere ......................................................................................................... 212
M6.U1.3. Ferestre de lucru în GIMP 2.6 ........................................................................... 212
M6.U1.4. Lucrul cu imagini: salvare, dimensionare, comprimare, decupare, rotire ......... 213
M6.U1.5. Rezumat ............................................................................................................. 215
U2. Lucrul cu logo-uri, butoane, bannere .......................................................................... 217
M6.U2.1. Introducere ......................................................................................................... 217
M6.U2.3. Crearea unui logo............................................................................................... 217
M6.U2.4.Crearea unui banner ............................................................................................ 218
M6.U2.5.Realizarea unui GIF animat ................................................................................ 218
M6.U2.6. Rezumat ............................................................................................................. 222
U3. Crearea animaţiilor complexe ..................................................................................... 223
M6.U3.1. Introducere ......................................................................................................... 223
M6.U3.3. Lucrul cu filtre în GIMP .................................................................................... 223
M6.U3.4. Animaţii complexe............................................................................................. 226
M6.U3.5. Rezumat ............................................................................................................. 227
Bibliografie......................................................................................................................... 228
5
Introducere
Tehnologii Web şi Webdesign reprezintă şi vor reprezenta cel mai dinamic şi fascinant
domeniu al informaticii actuale şi de viitor. Obiectivele disciplinei sunt prezentarea unor
aspecte importante ale Web-ului, atât din punct de vedere teoretic dar, şi în special aplicativ.
Se urmăreşte ca în final, studentul, având la îndemână o serie de limbaje şi instrumente
informatice, să poată crea pagini WEB atractive şi competitive.
Obiectivele cursului
Obiectivele cursului desemneazӑ diferite tipuri de achiziţii particulare la
care urmeazӑ sӑ ajungӑ studentul şi anume:
- capacitatea de a utiliza tehnologii moderne în proiectarea, implementarea şi
modificarea unui site;
- proiectarea, implementarea, modificarea şi crearea unui design atractiv
pentru situri web;
- utilizarea prelucrarilor grafice, video, multimedia şi alte mijloace de
comunicare interactive in realizarea soluţiilor software in Internet.
Competenţe conferite
După parcurgerea materialului, studentul va fi capabil să:
• înţeleagă utilitatea tehnologiilor web în realizarea site-urilor
• înţeleagă principiile de design
• realizeze proprul site care să includă diverse elemente HTML
• stilizeze modul de afişare al informaţiilor pe pagină folosind CSS
• realizeze pagini web interactive (pe parte de client) folosind JavaScript
• realizeze pagini web interactive (pe parte de server) folosind PHP
• utilizeze limbajul Flex3 pentru uşurinţa în realizarea unei aplicaţii web
• înţeleagă modul de manifestare a lumii virtuale în Internet
• realizeze propriile aplicaţii de grafică 3D (statică sau animată) pe care
să le includă mai apoi în site-uri
Resurse şi mijloace de lucru

Pentru a parcurge acest curs şi pentru a putea rula exemplele de apliaţii
oferite de către acesta sau pentru a putea realiza aplicaţiile propuse ca temă,
6
studenţii vor avea nevoie de următoarele resurse materiale şi logistice:
- computer
- conexiune la Internet
- cel puţin un browser instalat pe computer (Internet Explorer, Chrome,
Mozilla Firefox, Opera, etc)
- un soft pentru a putea realiza aplicaţii PHP (WinLAMP, XAMPP, etc)
- un soft pentru a putea realiza aplicaţii în Flex3 (Flex SDK)
- un plug-in pentru browser pentru a putea vizualiza aplicaţiile VRML
(Cortona 3D Viewer, Cosmo Player, FreeWRL, OpenVRML, etc)
- un software pentru prelucrare de imagini (GIMP 2.6)
Structura cursului
Cursul este structurat pe în 6 capitole.
Cele 6 capitole prezintӑ: Principii de bazӑ in WebDesign; limbajul
HTML; reguli CSS; limbajul JavaScript; limbajul PHP; limbajul Flex;
limbajul VRML; prelucrarea imaginii cu Gimp 2.6.
Cerinţe preliminare
Algoritmicӑ;
- Programae Java;
- POO.
Durata medie de studiu individual

Fiecare UI trebui parcursă în 2–3 ore de studiu individual.
Evaluarea
La sfârşitul semestrului, fiecare student va primi o notă, care va cuprinde:
• un test grilă, ce va conţine întrebări teoretice din materia prezentată în cadrul
acestui material. Testul şi rezolvarea de exerciţii şi probleme propuse la curs
vor deţine o pondere de 50% în nota finală;
• însuşirea lucrărilor de laborator şi realizarea de aplicaţii asemănătoare celor
făcute în cadrul orelor de laborator care vor deţine o pondere de 20% în nota
finală;
• prezentarea unui proiect care va cuprinde tehnologiile învӑţate şi care va
deţine o pondere de 30% în nota finală.
7
Modulul I. Introducere în tehnologiile Web
Introducere
Principala atracţie a Internetului o reprezintă World Wide Web-ul. Acesta a
constituit partea cu dezvoltarea cea mai rapidă şi cea mai populară a Internetului
(cu excepţia, probabil, a fluxului voluminos de e-mail de pe tot globul). Din punct
de vedere tehnic Web-ul, nu este decât o parte a Internetului sau mai corect spus, o
componentă, care permite navigarea prin Internet.
Web-ul reprezintă o interfaţă, o fereastră spre Internet sau o metodă de a
ajunge în locurile dorite.
Noţiunile de “interfaţă” şi “navigare”sunt importante în realizarea unui
design atragator, dar necesită şi puţină gândire şi planificare. Conceptele utilizate
sunt lucruri foarte simple, care vor schimba rapid şi cu uşurinţă banalele pagini
Web, în pagini cu aspect profesionist.
Cele patru principii de bază, care permit ca o pagină Web să arate clară,
ordonată şi profesionistă sunt: alinierea, proximitatea, repetarea şi contrastul.
Aceştia sunt factorii de bază ai oricărei lucrări tipărite pe ecran sau
altundeva.
Competenţe
La sfârşitul acestui modul studenţii vor fi capabili:
• să înţeleagă importanţa web design-ului în realizarea unui site
• să definească noţiunea de browser web şi să o exemplifice
• să utilizeze un browser web
• să înţeleagă principiile de bază ale web designului: alinierea, proximitatea,
repetarea, contrastul
• să atragă atenţia prin design asupra informaţiilor importante atunci când
realizează o pagină web
8
U1. Consideraţii generale privind Internet şi World Wide Web
M1.U1.1. Introducere
La ora actuală în lume există milioane de calculatoare, care sunt folosite în

cele mai diverse domenii, multe dintre aceste calculatoare sunt legate între ele,
interconectate în forma reţelelor de calculatoare. Multe dintre aceste reţele sunt la
rândul lor conectate între ele, formând inter-reţele (reţele de reţele de calculatoare).
Denumirea de internet desemnează o reţea de reţele ("net" însemnând în limba
engleză "reţea"). Cea mai mare intereţea publică (reţea de reţele de calculatoare cu
acces public) este reţeaua Internet.
Principala atracţie a Internetului o reprezintă World Wide Web-ul. Acesta a
constituit partea cu dezvoltarea cea mai rapidă şi cea mai populară a Internetului
(cu excepţia, probabil, a fluxului voluminos de e-mail de pe tot globul). Din punct
de vedere tehnic Web-ul, nu este decât o parte a Internetului sau mai corect spus, o
componentă, care permite navigarea prin Internet.
Web-ul reprezintă o interfaţă, o fereastră spre Internet sau o metodă de a
ajunge în locurile dorite. Popularitatea sa derivă din trei aspecte distincte şi anume:
• Maschează limbajul pretenţios folosit pentru adresele Internet şi pentru
comenzile specifice.
• Grupează mai multe componente diferite ale Internetului într-o singură
interfaţă.
• Permite ca pe lângă citirea textului să se vizualizeze imagini, să se asculte
sunete şi chiar să se urmărească filme (în raport de resursele calculatorului
- client).
M1.U1.2. Obiectivele unităţii de învăţare

Această unitate de învăţare îşi propune ca obiectiv principal o iniţiere a
studenţilor în interesanta lume a tehnologiilor web.
La sfârşitul acestei unităţi de învăţare studenţii vor fi capabili să:
• înţeleagă importanţa web design-ului şi a tehnologiilor web în realizarea
unui site profesionist
• definească noţiunea de browser web şi să aducă exemple edificatoare
• utilizeze diverse browsere web
Durata medie de parcurgere a primei unităţi de învăţare este de 1-2 ore.
9
M1.U1.3. Evoluţia Web-ului
Un pas important în evoluţia Web-ului a fost dezvoltarea browsererelor grafice, care

puteau fi rulate pe un PC desktop sau pe un Macintosh, permiţând utilizatorului să folosească
tehnicile familiare disponibile şi în alte programe, încorporând formate de text şi grafică în
ecranul de navigare etc. Primul program de acest tip a fost NCSA Mosaic, dezvoltat de
centrul naţional pentru aplicaţii de supercalculatoare şi distribuit gratuit.
Web-ul a permis browserelor să afişeze imagini chiar în mijlocul textului, fără a fi

nevoie să se cunoască metoda de decodificare a fişierelor. Specialiştii în mass media afirmă că
o imagine contează cât o mie de cuvinte, imaginile din articolele de ziar sau din emisiunile
TV fiind incomparabil mai sugestive decât şiruri lungi de text scris la maşină. Deci acest
ingredient final a permis ca Web-ul să pară atât sensibil, cât şi interesant pentru persoana care
nu ar fi învăţat niciodată ce înseamnă o expresie obişnuită in Unix.
Creatorii de browse Nestcape şi Microsoft încearcă fiecare să dezvolte soluţii globale

care să transforme produsele proprii în "platforme" ale tuturor operaţiilor din Internet. La ora
actuală existză companii care oferă conturi Internet gratuite, având o interfaţă pentru e-mail
bazată pe Web. Gratuitatea găzduirii site-urilor este condiţionată de menţinerea pe ecran a
unei ferestre publicitare. Există şi alte modalităţi de a intra in lumea Internetului, fără a fi
nevoie de un calculator, cum ar fi Web TV (pentru care este nevoie de un televizor, un
modem, o tastatură şi o telecomandă), sau a unui modem, cum ar fi DirectPC (este nevoie de
un calculator şi de o antenă specială pentru satelit).
Dezvoltarea Internetului, combinată cu apariţia reţelelor de tip Internet locale, de

dimensiuni mai mici, care funcţionează după principiile Internetului, a dus la cerinţe din
partea utilizatorului pentru ca partea de software să îi ajute să recupereze documentele de la
distanţă, să colaboreze prin intermediul legăturilor de reţea şi să salveze sau să publice
documente. Pentru a îndeplini aceste cerinţe, producătorii de software au adăugat
componentele Internet la programele lor.
O mare parte din eleganţa Internetului constă în cantitatea impresionantă de putere de

prelucrare şi de stocare a programelor de dimensiuni mari şi a informaţiilor dense, operaţii
care au loc în Internet şi nu în calculatorul propriu. Calculatorul propriu - fie că este un PC, un
Mac sau o staţie de lucru Unix - rămâne doar o rampă de lansare către lumea Internetului.
Această structură comună de facilităţi Internet este referită uneori cu expresia client-server.
Calculatorul personal (sau programul care rulează pe acesta) este clientul, iar sursa de
informaţii sau site-ul World Wide Web este serverul. Serverele reprezintă depozite
centralizate de informaţii sau de manipulatori specializaţi pentru anumite tipuri de trafic.
Clientul nu trebuie decât să se conecteze la serverul potrivit şi astfel foarte multe lucruri
interesante vor fi la dispoziţia sa, fără a fi nevoie să supraîncarce calculatorul propriu. Acesta
este unul din principalele motive pentru care nu are importanţă ce tip de calculator se
utilizează.
WWW este un sistem distribuit. Informaţiile sunt plasate în mii de site-uri. Când
utilizatorul doreşte o informaţie, apelează site-ul care a publicat-o. Fiecare site şi fiecare
pagină de informaţii au o adresă unică numită URL (Uniform Resource Locator URL =
identificator uniform al resursei). Aceată informaţie publicată într-un site poate fi oricând
actualizată de autorul site-ului.WWW devine din ce în ce mai mult un sistem interactiv.
10
Evoluţia tehnologiilor Web îl transformă într-un mediu de comunicare. De exemplu,
includerea formularelor în paginile Web permite colectarea de informaţii de la utilizator.
Termeni care se vehiculează în lumea Web-ului sunt:

• Host – Computer legat la Internet care găzduieşte unul sau mai multe servere;
• Server Web – Software care administrează site-uri web;
• Site Web – Colecţie structurată de pagini web;
• Pagină (document) web – Conţinutul unui fişier, afişat ca urmare a unei cereri a
utilizatorului;
• Pagină home – Pagina de intrare a unui site.
Un host poate găzdui mai multe tipuri de servere (FTP, Gopher, Web). Fiecare tip de
server are propriul tip de comunicaţie cu Internet-ul. Protocolul de comunicaţie al server-elor
web se numeşte HTTP (Hyper Text Transformer Protocol).
Un server web administrează mai multe site-uri web. Un site conţine una sau mai multe
pagini între care există legături. Pagina home este intrarea în site.
M1.U1.4 Browsere WEB

Pentru a accede la web, utilizatorul trebuie să aibă instalat pe computerul său un
browser.
Browser-ul este o aplicaţie cu trei funcţii principale: accesul la informaţii, formatare şi
afişarea informaţiilor. Utilizatorul furnizează browser-ului adresa paginii dorite (URL-ul).
Browser-ul solicită conectarea la server-ul web, pe baza protocolului HTTP. O dată
conectarea acceptată, server-ul transmite browser-ului fişierul cerut. Browser-ul formatează
pagina şi o afişează pe monitorul utilizatorului.
Formatarea se face în funcţie de:

• indicaţiile de formatare conţinute în fişierul primit;
• caracteristicile platformei cu care lucrează utilizatorul.
Piaţa are o ofertă bogată de browsere disponibile pentru diverse platforme. Există
browsere operaţionale pe sisteme cu interfaţă grafică (Macintosh, Windows), dar şi pe
sisteme cu interfaţă exclusiv textuală. Poziţia dominantă pe piaţă este ocupată de Microsoft
Internet Explorer (IE) şi Netscape Navigator (NN). IE este operaţional sub Windows
(începând cu 3.1), sub UNIX şi pentru calculatoare Apple. Netscape Navigator este
componentă a unui set de instrumente Internet, numit Netscape Communicator al firmei
Netscape Communications Corporation. Componenta numită Netscape Composer permite
editarea paginilor Web. Netscape Navigator este operaţional sub Windows, sub anumite
versiuni UNIX şi pentru Apple.
M1.U1.5 Primii paşi către construcţia unui site
Dacă se doreşte realizarea unei pagini www, trebuie să apelăm la o firmă specializată,
numită provider. Provider-ul dispune de mai multe calculatoare foarte performante, numite
server-e şi pune la dispoziţie:
• spaţiu pe hard-ul server-ului de cel putin 10 MB;
• o adresă de Internet, de exemplu : www.adresa_student.ro.
11
În spaţiul rezervat se pot pune mai multe fişiere care conţin instrucţiuni HTML dar şi
orice alte fişiere.
Definiţie ([1]):
Prin site se înţelege ansamblul:
• spaţiu hard;
• fişierele pe care le conţine;
• adresa
Prin pagină se înţelege conţinutul afisat al unui fisier HTML.
Definiţie ([1]):
Ansamblul regulilor care trebuiesc respectate pentru schimbul informaţiilor de un
anumit tip se numeşte protocol.
Dacă dorim să transferăm fişiere către server sau invers, de la server către propriul
calculator se utilizează protocolul FTP (File Transfer Protocol).
Pentru a realize o pagină atractivă este bine să se utilizeze un design adecvat. În acest
scop se pot utiliza limbajele:
• JavaScript,
• PHP
• Java (Applet)
• Flash
• etc.
Trebuie să se aibă în vedere faptul că JavaScript rulează pe calculatorul vizitatorului, o

secvenţă JavaScript este tradusă şi executată de către browser şi este trimisă acestuia odată cu
fişierul HTML.
Limbajul PHP este un limbaj de programare ce rulează pe server şi este proiectat
special pentru WEB.
Într-o pagină HTML putem îngloba cod PHP care va fi executat la fiecare vizitare a
paginii.
Limbajul PHP permite lucrul cu baze de date, în MySql.
Mysql este un sistem de gestiune a bazelor de date, foarte rapid şi robust.
Aplicaţiile scrise în PHP şi MySql se rulează pe server.
Atenţie: Nu toţi provider-ii pun la dispoziţie utilizatorilor posibilitatea utilizării acestor

limbaje, deci o să trebuiască să studiem oferta.
Exemple
Exemple de browsere web: Internet Explorer (IE), Mozilla Firefox, Opera,
Safari, Chrome, etc...
Să se realizeze un studiu de caz despre istoricul browserelor web

exemplificate mai sus şi să se precizeze anul în care a apărut fiecare versiune a
acestora.
12
Să ne reamintim...
• Browser-ul este o aplicaţie cu trei funcţii principale: accesul la informaţii,
formatare şi afişarea informaţiilor. Utilizatorul furnizează browser-ului adresa
paginii doritE, browser-ul solicită conectarea la server-ul web, server-ul
transmite browser-ului fişierul cerut, iar la final browser-ul formatează pagina
şi o afişează pe monitorul utilizatorului.
• Prin site se înţelege ansamblul format din spaţiu hard, fişierele pe care le
conţine şi adresa
• Prin pagină se înţelege conţinutul afisat al unui fisier HTML.
M1.U1.6. Rezumat
• Un pas important în evoluţia Web-ului a fost dezvoltarea browsererelor

grafice, care puteau fi rulate pe un PC desktop sau pe un Macintosh,
permiţând utilizatorului să folosească tehnicile familiare disponibile şi în alte
programe, încorporând formate de text şi grafică în ecranul de navigare.
• WWW este un sistem distribuit. Informaţiile sunt plasate în mii de site-uri.
Când utilizatorul doreşte o informaţie, apelează site-ul care a publicat-o.
Fiecare site şi fiecare pagină de informaţii au o adresă unică numită URL
(Uniform Resource Locator URL = identificator uniform al resursei)
• Browser-ul este o aplicaţie cu trei funcţii principale: accesul la informaţii,
formatare şi afişarea informaţiilor.
M1.U1.7. Test de evaluare a cunoştinţelor
Definiti un protocol?
Ce limbaje folosim pentru a obţine un design atrӑgӑtor?
Ce este o paginӑ web?
Ce este un site ?
Ce este MySQL ??
13
U2. Principii de bază în web design
Oricine poate să înveţe tehnicile creării unei pagini Web. Şi oricine poate să
creeze o pagină Web urâtă. Totuşi, singurul motiv pentru care atâtea persoane
realizează pagini web slabe este faptul că nu cunosc principiile de bază ale
designului. Noţiunile de “interfaţă” şi “navigare” sunt importante în realizarea unui
design atragator, dar necesită şi un pic de gândire şi planificare. Conceptele
utilizate sunt lucruri foarte simple, care vor schimba rapid şi cu uşurinţă banalele
pagini Web, în pagini cu aspect mult mai profesionist.
Cele patru principii de bază, care permit ca o pagină Web să arate clară,
ordonată şi profesionistă sunt: alinierea, proximitatea, repetarea şi contrastul.
Aceştia sunt factorii de bază ai oricărei lucrări tipărite pe ecran sau

altundeva.
Această unitate de învăţare îşi propune aducerea în prim plan a principiilor

de bază în realizarea unui site profesionist.
La sfârşitul acestei unităţi de învăţare studenţii vor fi capabili:
• să ştie să realizeze o pagină web cu elementele corect aliniate
• să grupeze corect elementele care se invecinează pe pagină, atât din punct
de vedere fizic cât şi logic
• să identifice elementele din pagina web a căror proprietăţi ar trebui să se
repete
• să atragă atenţia asupra informaţiilor principale dintr-o pagină web pe baza
contrastului cu celelalte informaţii
Durata medie de parcurgere a acestei unităţi de învăţare este de 2 ore.
14
M1.U2.3. Alinierea
Alinierea înseamnă că elementele de pe pagină sunt aliniate unele în raport cu celalalte.

Lipsa alinierii este principala problemă de pe paginile Web. Aceasta reprezinta o problemă
importantă şi pe paginile tipărite, însă pare şi mai prezentă şi mai dezastruasă pe paginile
Web. Nimic nu trebuie aşezat la întâmplare pe pagină. Se creează un aspect curat, sofisticat şi
proaspăt al paginii dacă fiecare element are o legatură vizuală cu un alt element de pe pagină.
Alinierea elementelor după latura stângă, dreaptă sau centrat trebuie să urmeze o
anumită regulă, şi anume:
Alegeti UNA. Se alege o singură aliniere care se utilizează pe toată pagina.

Dacă se optează pentru a se alinia textul de bază în stânga, nu se pune titlul pe centru;
Dacă se aliniază centrat o parte din text, atunci se aliniază centrat peste tot.
Nu amestecaţi alinierile.
Acest singur principiu va modifica radical aspectul paginilor.
Se pot face alinieri verticale, orizontale şi centrale.
O aliniere centrala se poate spune că este :

echilibrată;
simetrică;
calmă;
oficială.
Aliniind o parte din text la stanga, o parte la dreapta şi o parte centrat, se crează senzaţia
de dezordine şi se transmite impresia de amatorism.
Dacă se aliniaza textul şi imaginile, este bine să îndepărtăm textul de marginea stângă.
Este obositor şi distrage atenţia să dam cu ochii de marginea stângă a paginii browserului de
fiecare dată când trecem la rândul următor. Când decalăm text (operaţie de “indentare”), se
poate face şi din partea dreaptă, impiedicând formarea rândurilor de text lungi şi dificil de
citit.
Text pe butoane neglijent realizat (vezi figura de mai sus)
Alinierea orizontală este la fel de importantă ca şi cea verticală. Este important să

vedeţi butoane ca în exemplul de mai sus, în care literele nu se aliniază pe orizontală. Această
deplasare “sus/jos/sus/jos” face ca toată manşeta să arate dezordonată. De aceea, pe lângă
alinierea verticală trebuie să fim atenţi şi la alinierea orizontală a butoanelor şi legăturilor.
15
Text pe butoane corect realizat (vezi figura de mai sus)
Literele stau pe o linie invizibilă numită “linie de bază”. Manşeta de legături este mai
ordonată şi mai organizată dacă aliniem tot textul pe aceeaşi linie de bază. În majoritatea
software-lor create pentru Web există un buton pentru alinierea după linia de bază, de obicei
în specificaţiile pentru tabele.
Formular incorect realizat din punct de vederea al web design-ului (vezi

formularul de mai sus)
Formularul acesta începe excelent; există câteva alinieri foarte bune, bine definite, dar şi
locuri în care textul pare să fi fost trântit aleatoriu pe pagină.
Alinierea verticală în partea laterală a formularului lasă de dorit. Consolidăm aspectul
paginii, aliniind celalalte elemente după această linie.
Totul trebuie să aibă un motiv pentru a-şi justifica locaţia deoarece, nimic nu trebuie
plasat arbitrar pe pagină. Nu azvârlim pur şi simplu elementele şi vedem cum şi unde se
lipesc. Trebuie să putem explica motivul pentru care un element se află în acel loc.
O pagină, poate să fie instantaneu folosită, prin alinierea tuturor elementelor după o
latură şi pagina arată mult mai organizată. Dacă lucrurile sunt organizate, ele comunică mult
mai bine.
16
Alinierea nu înseamnă că totul este aliniat dupa aceeaşi latură. Înseamnă pur şi simplu
că totul are aceeaşi aliniere – fie lipit la stânga, fie lipit la dreapta, fie centrat.
Când o margine bună se repetă, ea câştigă în forţă.
Exemplu
Formular corect realizat din punct de vederea al webdesign-ului

(vezi formularul de mai sus) Mai sus am dat un mod de aliniere optim, pentru
formularul creat anterior. Se observă linia verticală după care se aliniază
căsuţele text, checkbox sau cea de submit. Formularul arată mult mai bine.
M1.U2.4. Proximitatea
Proximitatea se referă la relaţiile dintre elemente, când acestea sunt foarte aproape. Pe
o pagină, componentele aflate în legatură cu altele trebuie sa fie grupate. Dacă anumite
componente se află în apropierea altora, ele devin o singură unitate din punct de vedere
vizual, astfel informaţiile pot fi organizate mai bine şi permite astfel să dispară orice confuzie.
Se pare că există o frică faţă de spatiul liber. Pagina pare neorganizată dacă elementele
de machetare sunt împrăştiate peste tot, fiind posibil ca informaţia să devină mai greu
accesibilă.
Principiul proximităţii spune că trebuie să se grupeze componentele aflate în legătură, să
fie mutate mai aproape unele de altele, a.i. să fie percepute ca un grup unitar, nu ca o grămadă
de elemente fără legătură. Componentele şi grupurile de informaţii care nu au legatură unele
cu altele nu trebuie să se afle în proximitate (vecinătate).
17
Exemplu
Dorim să realizăm o carte de vizită care cuprinde 5 elemente

(componente) separate (vezi figura de mai jos, fig.1). În acest caz ochiul se
opreşte de cinci ori. Ochiul începe să citească în mijloc, deoarece textul este
bold.
DIRECTOR S.C. PISOI (0268) 956419
VICTOR GABRIEL MOTANEL
Str. Leului nr.123 Brasov
Fig.1. Carte de vizitӑ
Dacă complicăm problema, adică mai îngroşăm alte elemente, vom vedea că ne vom
plimba privirea între cuvintele îngroşate (Fig.2).
DIRECTOR S.C. PISOI (0268) 956419
Str. Leului nr.123 Brasov

Proximitatea sau apropierea înseamnă o relaţie.
18
O problemă a cărţii de vizită anterioare este faptul că nici una dintre componente nu
pare a fi în legatură cu alta. Dar dacă fac o rearanjare a componentelor de pe cartea de vizită,
aceasta arată cu totul altfel, componentele care au o legatura între ele fiind grupate. Aceste
componente sunt mai aproape unele de altele (vezi figura de mai jos, Fig.3).

DIRECTOR S.C. PISOI
Str. Leului nr.123

Brasov
(0268) 956419
Uneori, atunci când se grupează componentele foarte apropiate, este nevoie să se

modifice câte ceva, de exemplu mărimea, ponderea sau aşezarea textului ori a desenelor.
Componente aflate în apropiere unele de altele devin o unitate vizuală, nu trebuie
organizate ca unităţi separate. Deci componentele cu legătură între ele trebuie grupate
împreună.
Principiul proximităţii are ca scop de bază organizarea paginii.

Dacă pe pagină există mai mult de trei până la cinci componente, trebuie văzut care
dintre elementele separate pot fi grupate, mai apropiat, pentru a deveni o unitate vizuală.
Proximitate nu înseamnă că totul este apropiat, ci că elementele care sunt legate din
punct de vedere al semnificaţiei lor, între care există un fel de relaţie privitoare la ceea ce
comunică, trebuie să fie conectate şi vizual.
Informatia dintr-o pagină trebuie mai întâi grupată din punct de vedere al semnificaţiei,
apoi aşezată din punct de vedere fizic pe pagină. Informaţia secundară trebuie să fie mai
distanţată, astfel încât să se vadă că este vorba despre o completare a informaţiei principale.
M1.U2.5. Repetiţia
Principiul repetiţiei spune că anumite părţi ale machetării trebuie repetat în întreaga
lucrare. Se poate repeta de exemplu un font îngroşat, o linie groasă, un anumit tip de marcaj,
un element de design, etc. Poate fi orice element care poate fi recunoscut de vizitator.
Reluăm cartea de vizită şi organizăm informaţia altfel (vezi figura de mai jos, Fig.4).
19
Observăm că după ce am privit informaţia de pe această carte de vizită, ochii rămân
agăţaţi de nume, deorece este îngroşat şi subliniat.
Dar totusi avem senzaţia de neterminare. Următoarea figură, Fig.5, prezintă aceiaşi
carte de vizită dar în care am îngroşat şi ultima informaţie, astfel ochiul se uită la nume şi la
numărul de telefon.

DIRECTOR S.C. PISOI
Str. Leului nr.123

Brasov
(0268) 956.41.93

DIRECTOR S.C. PISOI
Str. Leului nr.123

Brasov
( 0268 ) 956.41.93
M1.U2.6. Contrastul
Contrastul este cea mai eficientă cale de a adăuga valoare vizuală paginii noastre.
20
Principiul contrastului spune că dacă două componente nu sunt exact la fel, atunci
trebuie să fie complet diferite.
Regula de „aur” în utilizarea contrastului spune că pentru a fi eficient, contrastul trebuie
să fie puternic.
Contrastul poate fi creat în mai multe moduri, de exemplu punem în contrast:

un font mare cu unul mic;
un font elegant cu unul îngroşat;
o culoare rece cu una calda;
un element orizontal ( ex. un rând lung de text) cu unul vertical (ex. o coloană
de text înaltă şi îngustă);
rânduri cu spaţii multe între ele cu rânduri dese;
un desen mare cu unul mic.
Atenţie! Nu putem pune în contrast maro închis cu negru sau un font de 14 puncte
cu unul de 16 puncte.
Exemplu
Fie un anunţ pentru obţinerea unei burse Socrates în cadrul Facultăţii de

MI. Sunt prezentate două variante. Se observă că ambele variante conţin
aceleaşi informaţii doar că al doilea anunţ conţine mai mult contrast şi ne
uităm cu mult mai multă plăcere la cel de-al doilea anunţ.
BURSE SOCRATES 2007 !
Conditii de aplicare
Integralist
Depunere dosar care sa cuprinda : CV, Scrisoare de intentie, situatia
scolara
Participare la testul de limba straina
Termen limita de depunere dosar la Decanatul Facultatii MI:

14.04.2007
Universitati partenere:
University Oldenburg
University Dortmund
University of Applied Sciences Fulda,
University of Applied Sciences Wiesbaden,
Contrastul în formularul modificat este evident.
Am folosit un font mai puternic şi am îngroşat titlurile.
21
Fontul folosit l-am repetat şi în titlul paginii.
Titlul l-am transformat din majuscule în litere mici şi astfel am avut posibilitatea să
folosesc o dimensiune mai mare a fontului, pe care l-am îngroşat.
Totodată am scris titlul cu alb pe fond negru (banda neagră). Astfel am mărit contrastul.
Contrastul nu numai că face pagina mai atractivă, ci şi clarifică scopul şi organizarea
documentului.
Burse Socrates 2007 !

Conditii de aplicare
Integralist
Depunere dosar care sa cuprinda :
o CV,
o Scrisoare de intentie,
o situatia scolara
Participare la testul de limba straina
Termen limita de depunere dosar

Decanatul Facultatii MI;
14.04.2007
Universitati partenere:
University Oldenburg
University Dortmund
University of Applied Sciences Fulda
University of Applied Sciences Wiesbaden,
University of Applied Sciences Mittweida
Să se realizeze schiţa unei pagini web pe o temă la alegere, respectându-

se principiile explicate şi exemplificate mai sus.
Să ne reamintim...
• Alinierea într-o pagină web înseamnă că elementele de pe acea pagină sunt
aliniate unele în raport cu celalalte
• Proximitatea se referă la relaţiile dintre elemente, când acestea sunt foarte
aproape - pe o pagină, componentele aflate în legatură cu altele trebuie sa fie
22
grupate.
• Principiul repetiţiei spune că anumite părţi ale machetării trebuie repetat în
întreaga lucrare.
• Contrastul este cea mai eficientă cale de a adăuga valoare vizuală paginii
noastre - regula de „aur” în utilizarea contrastului spune că pentru a fi
eficient, contrastul trebuie să fie puternic.
M1.U2.7. Rezumat
Pentru a realiza un site web frumos structurat şi atractiv este absolut necesar
să se respecte principiile de bază ale realizării designului unei pagini web. Aceste
principii sunt: alinierea, proximitatea, repetarea şi contrastul.
Prin aliniere înţelegem faptul că elementele de pe o pagină web vor trebui
aliniate unele în raport cu celelalte. Prin proximitate se înţelege faptul că elementele
care au un context comun şi sunt situate unele în apropierea celorlalte se vor grupa şi
vor constitui un totunitar. Repetiţia sugerează faptul că anumite proprietăţi ale
elementelor de pe pagină trebuiesc repetate pentru a produce simetrie şi senzaţia de
ordine. Contrastul este cel care ajută la scoaterea în evidenţă a anumitor informaţii
pe baza atribuirii unor proprietăţi "diametral opuse" faţă de alte elemente mai puţin
importante. Se poate crea contrast de culoare, de formă, de font, etc.

Realizaţi o carte de vizitӑ pentru angajatii unei firme ce comercializeazӑ
produse IT.
23
Modulul II HTML (Hyper Text Markup Language)
Introducere
O versiune mai veche a HTML-ului folosea unele idei şi modificări propuse

pentru HTML 3, care au fost abandonate la apariţia HTML 3.2.
HTML 4 propune separarea stilurilor fizice de marcarea conţinutului printr-o

folosire mai intensă a foilor de stil. Elementul frame este acum definit oficial
altundeva decât în produsele firmelor Nestcape sau Microsoft. Include elementele
style, div, span pentru încorporarea foilor de stil.
Eticheta object este de asemenea extinsă, astfel să includă practic orice fişier
extern care se doreşte introdus într-o pagină Web. Sunt introduse etichetele ins şi
del, acronym, colgroup, fieldset, button.
HTML e un limbaj bazat pe SGML (Standard Generalized Murkup

Language = ”Limbaj Standard Generalizat de Marcare”) care este un standard
internaţional ce a fost aprobat în 1986 şi care permite crearea de documente
hipertext pentru paginile Web.
Principalele caracteristici ale limbajului SGML sunt:
1. Descrierea structurii documentului;

2. Nu este descrisă aranjarea în pagină;
3. Permite fiecărui navigator să aibă propria prezentare;
4. Un document HTML poate fi reutilizabil.
Standardul oficial HTML este dat de World Wide Web Consortium (W3C)
care este afiliat la Internet Engineering Task Force (IETF). W3C a enunţat câteva
versiuni ale specificaţiei HTML, printre care şi HTML 2.0, HTML 3.0, HTML 3.2,
HTML 4.0, HTML 4.01 şi, cel mai recent, HTML 5.0. Fiecare din aceste standarde
este mai mult sau mai puţin suportat de către toate sau o parte din browsere.
La ora actuală HTML 4.0 si HTML 4.01 sunt larg utilizate şi au fost deja
publicate specificaţiile HTML 5.0. Obiectivul HTML5 este acela de a îmbogăţi
suportul pentru aplicaţiile multimedia prin aducerea laolalta a capabilităţilor oferite
de HTML4, cu XHTML şi JavaScript.
Limbajul HTML oferă proiectanţilor de pagini Web următoarele posibilităţi:

Să publice documente cu headere, texte, tabele, liste, fotografii, etc;
Să regăseascã on-line informaţiile prin intermediul hiperlink-urilor
printr-un simplu click de mouse;
Să proiecteze formulare pentru realizarea tranzacţiilor cu servere aflate la
distanţã pentru căutări de informaţii sau pentru activităţi specifice
comerţului;
24
Să includa foi de calcul tabelar, clipuri video, sunete şi alte aplicaţii
direct în documente.
Elementul esenţial diferit adus de versiunea 4.0 şi mai ales 4.01 faţă de
versiunea 3.2 este posibilitatea separării structurii unui document de prezentarea
lui prin introducerea “stilurilor de documente” (style sheet).
Prin utilizarea limbajului HTML4 pentru structurarea unui document şi a

style sheet-urilor pentru a stiliza prezentarea acestuia, se poate obţine mult mai
uşor independenţa de periferic/computer/platforma hard-soft.
Deoarece HTML5 aduce elemente noi care permit includerea obiectelor

multimedia sau a graficelor, fără a mai avea nevoie de plugin-uri, se vor putea crea
aplicatii mult mai complexe utilizându-se doar limbajul HTML.
Limbajul HTML a fost preferat pentru publicaţii pe Web în primul rând

datorită simplităţii sale şi în al doilea rând deoarece permite formatarea textului
ASCII cu tag-uri în format ASCII.
Competenţe
• să înţeleagă şi să utilizeze tag-urile HTML
• să definească şi să utilizeze tag-uri pentru introducerea textului
• să formateze un text folosind tag-uri şi atribute ale acestora
• să utilizeze tabele pe pagina web
• să formateze un tabel
• să introducă în pagina web imagini şi link-uri
• să creeze formulare
25
U1. Crearea unui document HTML
HTML = Hyper Text Markup Language este limbajul de bază al WWW şi

constă dintr-un set standard de coduri care specifică în ce mod documentele vor fi
afişate pe ecran de către navigatoare.
Caracteristica importantă a limbajului este portabilitatea ≡ adică orice

document sursă HTML va arăta identic pe orice tip de calculator şi în orice sistem
de operare, sarcina interpretării sale revenind diverselor navigatoare.

Această unitate de învăţare îşi propune iniţierea studenţilor în crearea unei
pagini HTML.
La sfârşitul acestei unităţi de învăţare aceştia vor putea:
• să creeze structura de bază a unei pagini HTML
• să pună culoare pe o pagină web
• să coloreze, să dimensioneze şi să alinieze textul dintr-o pagină web
• să seteze în mod corect marginile paginii web
Durata medie de parcurgere a acestei unităţi de învăţare este de 2-3 ore.
M2.U1.3. Structura de bază a unui document HTML
Orice document HTML începe cu marcajul (tag-ul) <html> şi se termină cu marcajul

(tag-ul)</html>.
Un marcaj poate avea unul sau mai multe atribute care se specifică prin perechi de
forma: nume="valoare".
Se recomandă ca valorile atributelor să fie plasate între ghilimele (" ").
Marcajele dintre aceste paranteze unghiulare transmit comenzi către browser pentru a
afişa pagina într-un anumit mod.
Între cele doua marcaje <html> şi </html> apar două secţiuni;
1. Secţiunea de antet delimitată de marcajele

<head> TEXT </head>;
26
2. Corpul documentului care este delimitat de marcajele
<body> CORPUL TEXTULUI </body>.
Un marcaj poate fi scris atât cu litere mici, cât şi cu litere mari. Deci limbajul HTML nu
este CASE – sensitive.
Comentariile din cadrul documentelor HTML se realizează utilizậnd tag-ul următor :
<!—AICI APARE UN COMENTARIU -->.
Orice şir de caractere încadrat de aceste elemente va fi ignorat de programele de

navigare Web.
Structura de bază a unui document HTML este:
<html>
<head>
Informaţia
</head>
<body>
Corpul fişierului
</body>
</html>
Un fişier HTML este creat cu orice editor de texte cu menţiunea că fişierul trebuie salvat
cu extensia html sau htm.
M2.U1.4. Tag-uri HTML
În limbajul de marcare a hipertextului totul se rezumă la structură. Un limbaj de marcare

este folosit pentru a descrie care este rolul fiecărei părţi din document în raport cu celelalte.
Terminologia HTML:
α) atribut: furnizează instrucţiuni adiţionale despre o etichetă. Informaţiile
variază de la etichetă la etichetă şi pot include subiecte cum ar fi locaţia
fişierelor, mărimea, numele lor sau stiloul lor;
β) browser: este un motor de parcurgere special care evaluează etichetele şi
conţinutul unui fişier HTML, pe care îl afişează în concordanţă cu posibilităţile
şi regulile platformei şi capacităţile sale;
χ) element: o componentă distinctivă a structurii unui document, cum ar fi titlul,
un paragraf sau o listă. Când ne referim la forma sa aplicată în cadrul unui
document, un element se mai numeşte etichetă (tag);
δ) etichetă: un cod care identifică un element pentru ca browserul sau alt program
de parcurgere să ştie în ce mod să afişeze conţinutul. Etichetele sunt încadrate
de caractere de delimitare (paranteze ascuţite) Ele sunt întotdeauna cuprinse
între paranteze unghiulare (<>) iar utilizarea literelor mici sau mari în scriere
nu are importanţă.
27
Documentele HTML sunt fişiere text (ASCII). În text sunt inserate o serie de coduri aşa
numitele tag-uri sau marcaje care stau la baza modurilor de afişare a documentului. Un
document HTML este compus din tag-uri şi text curat. Documentele au componente
asemănătoare cum ar fi titluri, tabele, liste, paragrafe, etc.
Tag-urile HTML sunt folosite tocmai pentru a marca elementele comune, care pot
conţine text, grafică sau alte elemente. Tag-urile sunt de forma – pereche început-sfârşit
<tag>.............................</tag>
conţinut arbitrar
tagul de
tagul de sfârşit care are
început
caracterul slash (/ )
Scrierea perechilor de legături:
CORECT INCORECT
CORECT
<tag1> <tag1>
<tag2> <tag2>
</tag2> </tag1>
</tag1> </tag2>
M2.U1.5. Tag-uri din cadrul documentului HTML
Fiecare document HTML, încă de la creare are două părţi principale: un antet şi un corp.
Chiar dacă nu sunt special delimitate, HTML presupune existenţa lor. HTML oferă de
asemenea şansa de a adăuga şi alte componente funcţionale paginii, sub forma foilor de stil,
scripturilor şi seturilor de cadre.
Deşi fac parte din definirea unui document HTML, două etichete există în afara
structurii documentului: doctype şi html. Prima identifică versiunea de HTML folosită pentru
pagina respectivă şi regulile pe care acestea le respectă. A doua etichetă identifică un limbaj
global şi direcţia textului pentru documentul respectiv, în plus marchează începutul şi sfârşitul
conţinutului HTML.
28
Documentul HTML se indică prin tag-ul HTML
<HTML>.........................</HTML>
Vom prezenta numai o parte din tag-urile HTML, care sunt importante în realizarea
unui design atragator.
M2.U1.6. Culori, fonturi, margini
O pagină Web poate fi setată prin:

- alegerea culorii de fond
- alegerea culorii textului şi
- alegerea dimensiunilor paginii
Stabilirea culorii în tag-uri

Culoarea se obţine din amestecul a celor trei culori fundamentale: roşu, verde şi
albastru.
Culoarea de fond a unei pagini se specifică astfel :

• nume de culoare. Astfel sunt disponibile cel puţin 16 nume de culori, astfel avem
urmatoarele nume: red, green, blue, aqua, black, fuchsia, gray, lime, maroon, navy,
olive, purple, silver, teal, white şi yellow.
• secventa hexazecimala “#rrggbb” unde r,g sau b sunt cifre hexazecimale şi pot lua
valorile din multime {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F};astfel
se pot defini 65536 de culori.
• functia rgb(r,g,b), unde r,g si b iau valori din multimea numerelor naturale
{0,1,2…255}
M2.U1.7. Tag-ul Body
Tagul body are o listă de atribute incluse după denumirea tagului şi delimitate prin
spaţiu. Proprietăţile principale ale acestui tag sunt cele care definesc fundalul paginii, fie că
este vorba de o culoare sau de o imagine.
Atribute ale acestui marcator: bgcolor, background, text, leftmargin, topmargin
Aceste atribute se vor evidenţia în exemplele urmatoare.
Culoare pentru fundalul paginii

Culoarea unei pagini se precizează prin intermediul atributul bgcolor.
Sintaxa:
<body bgcolor = culoare>
Semantica:
culoare se stabileşte după modelul precizat în sect1.
29
Exemplu
Pagină Web cu fundalul de culoare “cyan”:
Culoarea textului
Definirea culorii textului pentru o pagină Web se face prin intermediul atributului text
al etichetei <body>
Sintaxa:
<body text = culoare>
Semantica:
culoare se precizează la fel ca la exemplul precedent.
Exemplu
Pagina Web următoare are textul de culoare roşie:
30
Atribute multiple
O etichetă poate să aibă mai multe atribute.
O etichetă cu trei atribute are urmatoarea sintaxă:
Sintaxa:
<eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 = valoare3>
Exemplu
Pagină Web cu textul de culoare albastră şi fondul de culoare galbenă:
Să se realizeze o pagină web de culoare portocalie care să conţină mai

multe linii de text de culoare verde.
31
Marginile paginii Web
Se face cu ajutorul a două atribute ale etichetei <body>:

• leftmargin – distanţa dintre marginea din stânga a ferestrei browserului şi
marginea din stânga a conţinutului paginii
• topmargin – distanţa dintre marginea de sus a ferestrei browserului şi
marginea de sus a conţinutului paginii
Valorile care se pot atribui celor două atribute sunt :

• numere întregi pozitive, care indică distanţa dintre conţinutul ferestrei şi
fereastra browserului, distanţă măsurată în pixeli
• un procent, ce reprezinta procent din lăţimea, respectiv înălţimea
ferestrei browserului
M2.U1.8. Tag-ul Basefont (textul de bază)
Atributele de bază ale textului dintr-o pagină web sunt:

Mărime (size)
Culoare (color)
32
Font (style)
Sintaxa:
<basefont size = număr color = culoare style = font>
Semantica:
număr poate lua una dintre valorile din mulţimea {1, 2, 3, 4, 5, 6, 7 }
(valoarea 1 fiind pentru fontul cel mai mic şi valoarea 7 – pentru fontul cel mai
mare)
culoare se precizează prin nume sau prin RGB
font poate fi un font generic din multimea {„serif”, “sans serif”, ”cursive”,
”monospace”, ”fantasy”, ”Times New Roman”, “Helvetica”, “Arial” }
Eticheta (Tag-ul) Basefont este valabilă până la sfârşitul paginii sau până apare
următoarea etichetă <basefont>.
În cazul în care eticheta <basefont> lipseşte, textul din pagina Web are atributele
prestabilite şi anume:
size=3,
color=”black”
style=”Times New Roman”
33
Să se realizeze o pagină web de culoare albastru deschis în care să se scrie
o poezie cu 2 strofe. Titlul poeziei va avea culoarea verde, prima strofă va fi scrisă
cu maro, iar cea de-a doua cu roşu. Titlul va avea dimensiunea mai mare decât restul
poeziei.
M2.U1.9. Rezumat
Codul HTML din spatele unei pagini web se scrie cu ajutorul etichetelor (Tag-
urilor). O etichetă este de forma – pereche început-sfârşit şi numele acesteia se scrie
între paranteze unghiulare. O etichetă poate avea unul sau mai multe atribute, acestea
aducând informaţii adiţionale etichetei.
Tag-ul Body este cel care specifică proprietăţile întregii pagini web. Se pot
seta astfel: culoarea de fundal a paginii, culoarea textului, marginile paginii, etc.
Tag-ul Basefont stabileşte fontul de bază al paginii şi este valabil până la
sfârşitul paginii sau până apare următoarea etichetă <Basefont>.
Să se realizeze o pagină HTML având culoarea de fond verde şi textul de culoare

roşie.
34
U2. Stilurile blocurilor de text
Unul dintre elementele principale şi poate cel mai important dintr-o pagină
web îl constituie textul. Acesta este cel care poartă în sine informaţia pe care
creatorul site-ului doreşte să o transmită cititorilor. Pentru ca informaţia să ajungă
la publicul ţintă aşa cum este aşteptat, aceasta trebuie expusă într-un mod plăcut.
Modurile de reprezentare ale textului într-o pagină web sunt foarte diverse
din punctul de vedere al impactului vizual.
Se pot alege diferite stiluri pentru caracterele din textul unei pagini web,
putându-se astfel seta: dimensiunea, culoarea, marginile, grosimea, înclinarea,
tipul de subliniere, etc.

pagini HTML.
• să creeze structura de bază a unei pagini HTML
• să pună culoare pe o pagină web
• să coloreze, să dimensioneze şi să alinieze textul dintr-o pagină web
• să seteze în mod corect marginile paginii web
M2.U2.3. Stiluri fizice
Caractere: îngroşate (tag-ul <b>), cursive (tag-ul <i>)
Un bloc de text apare îngroşat în pagină dacă este inclus între <b> text </b> .
Un bloc de text inclus între etichetele <i> text </i> este scris cu caractere cursive.
Aceste tag-uri sunt valabile, dar sunt mai vechi. Variantele mai noi pentru scrierea
textului îngroşat sunt realizate cu ajutorul etichetei <strong>, iar pentru scrierea textului
înclinat se foloseşte eticheta <em>.
35
Exemplu
Text scris normal vs text scris îngroşat.
36
Exemplu
Text scris normal vs text scris înclinat.
Caractere: mărite (tag-ul <big>), micşorate( tag-ul <small>)
Un text inclus între etichetele <big> text </big> este scris cu caractere mai mari cu o
unitate decât dimensiunea curentă.
37
Un text inclus între etichetele <small> text </small> este scris cu caractere mai mici cu
o unitate decât dimensiunea curentă.
Exemplu
Text scris normal vs text scris îngroşat.
38
Caractere:„indice superior” şi „ indice inferior”
Fragmentele de text aliniate ca indice inferior (sub-script) sunt delimitate de etichetele

<sub> şi </sub>.
Secvenţele de text aliniate ca indice superior (super-script) sunt incluse între etichetele
<sup> şi </sup>.
39
Caractere: subliniate şi secţionate
Eticheta de tip bloc <u> text </u> inserează un bloc de caractere subliniate.
Etichetele <strike> şi </strike> sau <s> şi </s> inserează un bloc de caractere secţionate
la mijloc cu o linie orizontală.
Să se scrie pe o pagină web următoarea ecuaţie:
M2.U2.4. Stiluri logice
Stilurile logice sunt bazate pe cele fizice. Modul lor de acţiune depinde în mare măsură
de de browserul utilizat.
Blocuri de caractere evidenţiate
Următoarele două etichete pun în evidenţă prin stilul cursiv fragmente de text:
<cite> text </cite> (“cite” = citat)
<em> text </em> (“emphasize” = a evidenţia)
Exemplu
Aceste două etichete de mai jos sunt echivalente cu eticheta <i> …</i>.
40
Blocuri de caractere monospaţiate
Etichetele urmatoare permit scrierea fragmentelor de text cu caractere monospaţiate de

diferite tipuri
<code> text </code> (“code” = cod sau sursă)

<kbd> text </kbd> (“keyboard” = tastatură)
<tt> text </tt> (“teletype” = teleprinter)
<var>text</var> (“variable” = variabile)
<cite>text</cite> (“citation” = citare)
<dfn>text</dfn> (“definition” = definirea unor termeni)
41
M2.U2.5. Tag-ul font (configurarea font-urilor)
Un font are următoarele atribute:

• culoarea - se stabileşte cu atributul “color”
• tipul sau stilul - se stabileşte cu atributul “face”
• mărimea - se stabileşte cu atributul “size”
• mărimea în puncte tipografice (este stabilită prin atributul „point-size”)
• grosimea - se defineşte cu atributul “font-weight”
Culoarea fontului
Pentru a scrie un text cu o anumita culoare se încadrează acest text între delimitatorii
<font> text</font> în felul următor:
Sintaxa:
<font color = culoare>text de culoarea specificată </font>
Semantica:
culoare va reprezenta culoarea fontului
42
Familia fontului
Tipul de font se stabileşte prin atributul “face” al etichetei <font>.

Fonturile pot fi separate prin virgulă.
Cele cinci familii generice de fonturi sunt:

• serif
• sans serif
• cursive
• monospace
• fanatasy
Pot fi utilizate şi alte fonturi specifice cum ar fi:

• Times (tip particular de font serif)
• Helvetica (tip particular de font sans serif)
• Arial
• Courier (tip particular de font monospace)
• Western (tip particular de font fantasy) , etc.
Exemplu
<font face=”Arial, serif, monospace”>.

Browserul va utiliza primul font pe care îl recunoaşte.
43
Mărimea fontului
Marimea fontului se indică cu atributul “size” al etichetei <font>.

Acest atribut poate lua următoarele valori:
• 1, 2, 3, 4, 5, 6, 7 (1= cel mai mic font, 7= cel mai mare font);
• -1, -2, -3, etc. pentru a micşora dimensiunea fontului cu -1, -2 … faţă de
dimensiunea curentă;
• +1, +2, +3, etc. pentru a mări dimensiunea fontului cu +1,+2,.. faţă de
dimensiunea curentă;
O altă metodă de stabilire a mărimii unui font este prin utilizarea atributului „point-size”
al etichetei <font> şi reprezintă mărimea fontului în puncte tipografice. Acest atribut poate
lua ca si valori orice numar natural pozitiv.
Observaţie! Atributul “point–size” funcţionează numai cu Netscape Comunicator.
44
Grosimea unui font
Grosimea poate fi definită cu cu atributul “font-weight” al etichetei <font>.
Valorile pe care le poate lua atributul font-weight sunt: 100, 200, 300, 400, 500, 600,
700, 800 şi 900 (100 – fontul cel mai subţire, 900 – fontul cel mai gros)
M2.U2.6. Blocuri de texte
a) Inserarea unei adrese

Inserarea unei adrese se face cu ajutorul etichetei <address> … </address>. Textul este
afişat cu caractere cursive.
45
b) Indentarea unui bloc de text
Un bloc de text indentat este un bloc de text la care marginea din stânga a textului este
deplasată la o anumită distanţă de marginea paginii.
Codul HTML al acestei pagini îl veţi putea vedea în imaginea de mai jos.
46
Blocuri <div>
Delimitarea şi formatarea unui bloc de text se face cu delimitatorii <div> text</div>.

Blocul <div> are urmatoarele atribute :
• “align” (aliniere).
Valorile atributului “align” sunt:
“left” – aliniere la stânga
“center” – aliniere centrală
“right” – aliniere la dreapta
Blocul <div>text </div> are posibilitatea să includă şi alte subblocuri.

Atributul “align” are efect asupra tuturor subblocurilor incluse în blocul <div>.
Atributul “nowrap” permite întreruperea rândurilor acolo unde este precizat acest
lucru.
Blocul preformatat
Etichetele <pre> … </pre> permit păstrarea caracteristicilor textului aşa cum a fost
introdus în fişier, deci ia în considerare caracterele “spaţiu”, “tab” şi “CR/LF” (enter la sfârşit
de linie).
Blocul <pre> ... </pre> poate fi folosit pentru a insera rânduri vide.
Caracterul spaţiu, pentru a putea fi luat în considerare trebuie precizat prin „ ”.
47
Blocuri paragraf (tag-ul <p>)
Trecerea la o linie nouă se face cu eticheta <br>, (br de la break=pauză). La fel şi

eticheta <p> face trecerea la o linie nouă.
Eticheta <p> mai permite:
• inserarea unui spaţiu suplimentar inainte de blocul paragraf.
• inserarea unui spaţiu suplimentar după blocul paragraph;.
• alinierea textului cu ajutorul atributului “align”, cu valorile “left”, “center” sau
“right”
48
Blocuri de titlu
Titlurile (headers) de capitole sau paragrafe pot avea diferite dimensiuni. Ele pot fi
introduse cu tag-ul <hx> text </hx> unde x poate lua valori din multimea {1,2,3,4,5,6}
Se acceptă atributul align de către aceste etichete pentru alinierea titlului blocului de
text la stânga (modul prestabilit), în centru şi la dreapta.
Tag-ul <h1> scrie titlul cu caracterele cele mai mari şi cele mai îngroşate.
Tag-ul <h6> foloseşte caracterele cele mai mici.
Exemplu
<h3>…(bloc de text)…</h3>
49
M2.U2.7. Linii orizontale
Se pot insera linii orizontale într-o pagină web cu ajutorul etichetei <hr>.
Configurarea unei linii orizontale
Atributele etichetei <hr> sunt:

• “align” - permite alinierea. Valori posibile: “left”, “center”, “right”.
• “width” - permite alegerea lungimii liniei. Valori posibile:
o numere întregi pozitive care reprezintă lungimea liniei, în pixeli;
o numere între 1 şi 100 urmate de semnul %; reprezintă procentul din
lăţimea paginii pe care se întinde linia;
• “size” – permite alegerea grosimii liniei. Valorile posibile sunt numere întregi
pozitive reprezentând grosimea liniei în pixeli (valoarea prestabilită este “2”);
• “noshade” – defineşte o linie fără umbră;
• “color” – permite definirea culorii liniei
50
Să se realizeze o pagină web în care să se folosească toate tag-urile şi atributele
aferente acestora care au fost prezentate în această unitate de învăţare.
M2.U2.8. Rezumat
Blocurile de text au multiple modalităţi de a fi formatate. În acest scop, există

următoarele etichete:
<div> - e considerat unul dintre cele mai populare containere de elemente web,
şi implicit de text. Acestui tip de formatare i sepoate seta alinierea, fragmentarea la
capatul liniei, etc.
<p> - este eticheta clasică pentru a declara un paragraf
<pre> - reprezintă un bloc de text preformatat.
<h1>, <h2>, ....<h6> - sunt etichete care marchează titlurile, <h1> reprezentând
titlul de dimensiunea cea mai mare, iar <h6> reprezentând titlul de dimensiunea cea
mai mică
<hr> - este eticheta care ajută la inserarea unei linii orizontale în pagină, linie
căreia putem să îi setăm lungimea, grosimea, culoarea, alinierea, umbra, etc.
51
1. Care sunt atributele etichetei <HR>?

2. Care este semnificaţia etichetei <DIV>?
3. Daţi un exemplu de cod HTML în care să utilizaţi tag-ul <DIV>.
4. Scrieti o cerere.
5 Realizati un CV.
6. Scrieti o scrisoare de intenţie.
52
U3. Tabele
Un alt tag important din HTML este tag-ul <table>. Acesta permite
adaugarea tabelelor într-o pagină web. Tabelele se folosesc pentru a
dispune informaţiile de pe pagină sub formă de structură tabelară, dar nu în
ultimul rând pentru a oferi structura întregii pagini web.
Tabelele sunt formate din rânduri, iar rândurile din celule cu
informaţii. În celula unui tabel se pot regăsi diverse elemente: text, liste,
alte tabele, etc.

• realizeze un tabel pe pagina web
• coloreze fundalul tabelului şi al celulelor sale
• spaţieze informaţia dintr-un tabel
• poziţioneze tabelul în pagină la locaţia dorită
M2.U3.3. Tag-ul <table>
Un tabel se inserează între etichetele <table> şi </table>.

Pentru inserarea unui rând într-un tabel se folosesc etichetele <tr> şi </tr> (tr = “table
row”)
Coloanele sunt introduse pe rând pe câte o linie cu tag-ul <td> şi </td> ( td = “table
data”).
Chenarul unui tabel se introduce cu atributul border din tag-ul table. În mod implicit un
tabel nu are chenar. Titlul unui tabel se introduce cu tag-ul <caption> text </caption>.
Atribute importante ale tag-ului <table>:

• pentru a alinia un tabel se foloseste atributul align cu valorile posibile: “left”
(valoarea prestabilită), “center” şi “right”.
• pentru a adauga chenar unui tabel se utilizează atributul “border” care ia ca
valoare orice număr întreg (inclusiv zero) şi reprezintă grosimea în pixeli a
chenarului tabelului.
53
Observaţii:
Valoarea prestabilită a grosimii chenarului tabelului este de 1 pixel.
Dacă valoarea grosimii chenarului este egală cu 0, atunci nu avem chenar.
Exemplu
1. Crearea unui tabel fără chenar
2. Crearea unui tabel cu chenar
54
M2.U3.4. Alinierea tabelului în pagina web
Tabelul poate fi aliniat la stanga, la dreapta sau pe centrul paginii web.
55
M2.U3.5. Precizarea culorilor de fond pentru un tabel
Culoarea de fond se stabileşte cu atributul “bgcolor”.

Culoarea de fond poate fi ataşată întregului tabel prin eticheta <table>.
Culoarea de fond poate fi ataşată unei linii de tabel prin eticheta <tr>.
Culoarea de fond poate fi ataşată unei celule de tabel prin eticheta <td>.
56
Atenţie:
Dacă avem definite mai multe atribute bgcolor, se vor lua în considerare în ordinea:
<td>, <tr>, <table>. Tag-ul <table> are prioritatea cea mai mică.
Culoarea textului din fiecare celulă se indică în tag-ul <font>.

Ex: <td><font color=”valoare”>…</font></td>
Exemplu
Adaugarea în pagina web a unui tabel care are culori diferite pentru
fundalul fiecărei celule cu text.
57
M2.U3.6. Dimensionări
Dimensionarea celulelor unui tabel
Distanţa dintre două celule vecine se defineşte cu ajutorul atributului “cellspacing” al

etichetei „table”. Valorile lui „cellspacing” pot fi numere întregi pozitive, inclusiv 0. Valoarea
prestabilită este 2.
Distanţa dintre marginea unei celule şi conţinutul ei se definieşte cu atributul

“cellpadding” al etichetei <table>. Valorile lui „cellpadding” pot fi numere întregi pozitive.
Valoarea prestabilită este 1.
Exemplu
Adaugarea în pagina web a două tabele colorate, care au spaţiere

diferită între celule.
58
Codul HTML care descrie tabelele de mai sus poate fi văzut în imaginea de pe pagina
următoare.
Dimensionarea unui tabel

Dimensiunile unui tabel – lăţimea şi înălţimea – se stabilesc cu atributele “width” şi
“height” ale etichetei <table>.
Aceste atribute pot lua valorile:
• numere întregi pozitive, reprezintă lăţimea, respectiv înălţimea în pixeli a tabelului.
59
• numere întregi între 1 şi 100, urmate de semnul %, reprezintă o fracţiune din lăţimea,
respectiv înălţimea, totală a paginii.
60
M2.U3.7. Rezumat
Tabelul este un element important care se poate regăsi într-o pagină web. Acesta se
introduce pe pagină folosind tag-ul <table>. Conţinutul tabelului este repezentat de către
rândurile acestuia, care se introduc cu ajutorul tag-ului <tr>, iar conţinutul rândurilor este
reprezentat de către celulele cu date, care e introduc la rândul lor cu ajutorul tag-ului <td>.
Întreg tabelul, dar şi rândurile sau celulele pot fi colorate folosind atributul bgcolor.
Tabelul poate fi pozitionat pe pagina la stanga, la dreapta sau pe centru folosind
atributul align.
Întreg tabelul, dar şi rândurile sau celulele pot fi dimensionate folosind atributele
width şi height.
Scrieţi codul HTML pentru realizarea unui tabel cu 3 linii si 4 coloane, având chenarul de
culoare albastră.
61
U4. Imagini şi ancore
Imaginile reprezină o componentă vizuală de bază din pagina web.

Se spune că "o imagine face cât o mie de cuvinte", aşa că imaginile ar
trebui poziţionate şi încadrate corect în pagină.
Ancorele sunt acele elemente care ne ajută să facem legătura între
mai multe pagini web sau între informaţiile de pe aceeaşi pagină.
Hărţile de imagini constau în realizarea unor imagini care să conţină
ancore către diverse pagini la click pe diferite zone ale imaginii.

• introducă o imagine în pagina web
• redimensioneze o imagine
• creeze ancore către alte pagini web sau către diverse elemente de pe aceeaşi
pagină
• creeze o hartă de imagini
M2.U4.3. Tagul <img>
Formatele acceptate de browsere pentru fişierele de imagini sunt:
• GIF (Graphics Interchange Format) – extensia .gif

• JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg
• BMP (BitMap) cu extensia .bmp (este întâlnită numai cu browserul Internet Explorer,
etc.
Inserarea într-o pagină Web a unei imagine se face utilizând eticheta <img> cu atributul
“src”, iar valoarea acestui atribut este adresa URL a imaginii.
Dacă se doreşte adăugarea unui chenar în jurul imaginii se foloseşte atributul border al
etichetei <img> care poate lua valori numere întregi pozitive.
Dimensiunile unei imagini pot fi modificate prin intermediul atributelor “width” şi
“height” ale etichetei <img>.
Acestea pot avea ca şi valori :
• numere întregi pozitive ce reprezintă numărul de pixeli
62
•numere de la 1 la 100 urmate de % ce reprezintă procente din lăţimea, respectiv din
înălţimea blocului în care se află imaginea.
Precizarea dimensiunilor spaţiului ocupat de o imagine duce la creşterea vitezei de
încărcare a paginii.
Alinierea unei imagini în pagina Web
Alinierea se face prin intermediul atributului “align” al etichetei <img>, care ia valorile:
• “left” – aliniere la stânga
• “right” – aliniere la dreapta
• “top” – aliniere deasupra. Partea de sus a imaginii se aliniază cu partea de sus a
textului ce precede imaginea.
• “middle” – aliniere la mijloc
• “bottom” sau “baseline” – aliniere la bază
Exemplu
Alinierea unei imagini pe verticală:
63
Alinierea textului în jurul unei imagini
Se face cu atributele “hspace” şi “vspace” ale etichetei <img> care precizează distanţa
în pixeli pe orizontală şi pe verticală, dintre imagine si elementele din pagină.
64
Imaginea pentru fondul unei pagini Web
Se poate folosi imaginea pentru a stabili fondul unei pagini Web cu ajutorul atributului
“background” al etichetei <body> care ia ca valoare adresa URL a imaginii.
65
Imagini ca legături
Imaginea trebuie să apară ca element de legatură în cadrul tagulul <a> imagine </a>
M2.U4.4. Legaturi (link-uri)
Cu ajutorul legăturilor, un text obişnuit se transformă în hipertext sau hipermedia.

Legăturile sunt zone active într-o pagină Web.
Paginile Web sunt interactive deoarece au un răspuns la acţiunile care sunt iniţiate de
cei care le utilizează.
Legăturile în pagina html se inserează cu ajutorul etichetei speciale <a> şi a atributului
„href” care ia ca valoare adresa URL a resursei solicitate.
Când mouse-ul este deasupra unei zone active, el ia forma unei mâini. Calculatorul
client expediază cererea , primeşte resursa pe care a solicitat-o pe care o va încărca în
browser.
În acelaşi browser, pagina nouă va fi înlocuită de cea veche.
Exemplu
Exemple diverse de realizare a unor legături între pagini web
66
Link către un site
67
Legătură către o ancoră din acelaşi document.
Acest lucru se realizează utilizând perechea de tag-uri:
<a href=”#eticheta”> SALT </a>
<a name = “etic> AICI am facut SALT</a>
68
Ancoră aflată în alt document
69
O pagină nouă într-o fereastră nouă
Stabilirea culorilor pentru legături

Se utilizează trei culori pentru legături:
o culoare pentru legăturile nevizitate
o culoare pentru legăturile vizitate
o culoare pentru legăturile active
Acestea se stabilesc cu atributele:

”link” pentru legaturile nevizitate
„vlink” pentru legaturile vizitate
„alink” pentru legaturile active
70
M2.U4.5. Hărţi de imagini
O imagine poate fi folosită ca şi zonă activă. În acest caz imaginea se inserează în

documentul HTML între etichetele <a> şi </a>.
Există însă posibilitatea de a crea hărţi de imagini („image maps”) care permit ca
diferite zone ale unei imagini să fie definite drept legaturi către diverse pagini WEB.
Crearea unei hărţi de imagini presupune trei etape:

• Definirea unei imagini ca hartă de imagini. Se va utiliza tag-ul <img> cu atributele
src şi usemap. Numele dat pozei în usemap, precedat de semnul #, se va regăsi
obligatoriu în tag-ul map, în atributul name.
• Definirea hărţii în interiorul unui bloc special definit cu tag-ul <map> şi </map>.
Tag-ul are un atribut obligatoriu şi anume „name”, care primeşte ca şi valoare
numele hărţii (numele din usemap)
• Crearea zonelor pe hartă. Fiecare zonă se introduce cu eticheta <area>.
Eticheta <area> are trei atribute obligatorii:
1) „shape” care poate lua una din valorile:

• „rect” (pentru zone de formă dreptunghiulară);
71
• „circle” (pentru zone de formă circulară);
• „poly” (pentru zone de formă poligonală);
• default” (pentru porţiunile imaginii care nu se încadrează în nici una
dintre categoriile anterioare)
2) „coords” determină coordonatele zonei
3) „href” primeşte adresa URL a paginii indicate de legatura zonei respective.
Valorile atributului „shape”:

• rect coords=”x1,y1,x2,y2” – dreptunghi unde (x1, y1) este coordonata colţului
stânga sus şi (x2, y2) este coordonata colţului dreapta jos.
• circle coords=”x1, y1,r” – (x1,y1) este centrul cercului de rază r.
• Poly coords=”x1,y1,x2,y2,...xn,yn” – poligonul cu vârfurile de coordonate (x1,y1),
(x2,y2), (x3,y3),....
Pentru obţinerea automată a coordonatelor se poate folosi programul MAP This,

program care defineşte regulile pentru o imagine .gif sau .jpeg. Programul este freeware şi se
poate descărca de pe Internet.
72
Să se realizeze o pagină web care să conţină o imagine cu mai multe persoane.
Atunci când se va da click pe o persoană se va deschide o pagină cu imagini si date
despre persoana din imagine, pe care s-a dat click.
M2.U4.6. Rezumat
Imaginile se introduc în pagină cu ahutorul tag-ului <img>. Poziţionarea unei

imagini pe pagină se face cu ajutorul atributului "align" al tag-ului <img>. Orientarea
textului în jurul imaginii se face cu atributele "hspace" şi "vspace" ale etichetei <img>
care precizează distanţa în pixeli pe orizontală şi pe verticală, dintre imagine şi
elementele din pagină.
Ancorele se realizează cu ajutorul tag-ului <link>, iar pagina către care se va
face redirecţionarea se precizează cu ajutorul atributului "src" al lui <link>.
Definirea unei imagini ca hartă de imagini se face utilizând tag-ul <img> cu
atributele src şi usemap. Numele dat pozei în usemap, precedat de semnul #, se va
regăsi obligatoriu în tag-ul map, în atributul name. Definirea hărţii se realizează în
interiorul unui bloc special definit cu tag-ul <map>. Tag-ul are un atribut obligatoriu şi
anume „name”, care primeşte ca şi valoare numele hărţii (numele din usemap). Fiecare
zonă de pe hartă se introduce cu eticheta <area>.
1. Care este sintaxa tag-ului IMG?

2. Care sunt atributele etichetei AREA?
73
U5. Formulare
Formularele HTML sunt cele mai frecvent utilizate pentru a colecta

informaţii de la persoane care vizitează site-ul. Un formular este un ansamblu de
zone active alcătuite din butoane de apăsat, casete de selecţie, câmpuri de editare şi
altele.
O sesiune de lucru cu cu o pagină Web ce conţine un formular cuprinde
următoarele etape:
1. Se completează formularul care se transmite unui server;
2. O aplicaţie dedicată de pe server analizează formularul completat şi
eventual se stochează datele într-o bază de date.
3. Eventual serverul expediază un răspuns utilizatorului.
La sfârşitul acestei unităţi de învăţare studenţii vor fi capabili să realizeze

următoarele:
• să creeze un formular pe pagina web
• să creeze diferite elemente specifice formularului: câmpuri de text, câmpuri
de selecţie, butoane, etc.
• să înţeleagă noţiunea de eveniment asociat unui element din interiorul
formularului
M2.U5.3. Tagul <form>
Un formular este delimitat de tag-ul <form>....descriere formular...</form>.

Între tag-ul de intrare şi cel de ieşire sunt inserate, în principal controalele formularului.
Principalele atribute ale tag-ului form sunt:

• action
• method
• enctype
• target
74
Form-ul are 2 atribute importante: action şi method.
Sintaxa:
<form action = valoare_a method = valoare_m> ……</form>
Semantica:
valoare_a poate lua ca şi valoare:
• adresa URL a unui script aflat pe server, care primeşte datele formularului; se
face o prelucrare a datelor şi se expediază un răspuns utilizatorului dacă e cazul
• adresa de email, caz în care datele formularului sunt transmise prin poşta
electronică
valoare_m poate lua 2 valori:
• get este valoare implicită (datele din formular se adauga la adresa URL
specifcata in action);
• post (datele sunt expediate separat; se foloseşte când sunt transmise cantităţi
mari de date ).
Exemple:
action = “www…/…”
↓
Script
action = “mailto: livia.sangeorzan@yahoo.com”
M2.U5.4. Tag-ul <input>
Pentru a crea diferite butoane sau casete se foloseşte tag-ul <input>
Sintaxa:
<input type = name = value = >
Semantica:
type poate lua valorile următoare
• text
• radio (atributul checked selectează butonul la prima activare a paginii);
• checkbox;
• submit – trimite
• reset – şterge (resetează);
• password – parola (când scriem se vad asterixuri, dar la server
(destinatar) se vede totusi parola decodificata).
name este numele ataşat casetei sau butonului. Nu reprezintă conţinutul butonului
sau casetei.
value este conţinutul ce apare scris pe buton sau conţinutul casetei sau în cazul
butoanelor radio numele butoanelor care fac parte din aceeaşi familie;
Alte atribute ale tag-ului input:

• size - specifică lăţimea câmpului de editare;
• maxlenght - specifică maximul de caractere.
Dacă într-un input lipseşte atributul type, rezultă implicit type = text.
Limbajul JavaScript va recunoaşte butoanele după atributul name.
75
M2.U5.5. Liste de selecţie <select> <option >…. </select>
O listă de selecţie permite alegerea unuia sau mai multor elemente dintr-o listă finită.
Are 2 atribute importante : name şi size.
Elementele dintr-o listă se introduc cu tag-ul <option>.
Sintaxa:
<select name = nume size = numar>
<option value = valoare_1 selected> Element_1
<option value = valoare_2 > Element_2
<option value = valoare_3> Element_3
</select>.
Semantica:
name numele listei de selecţie
size este un număr întreg pozitiv şi precizează câte elemente din listă sunt
vizibile la un moment dat
<option> este tag-ul care include elementele listei. Server-ul primeşte perechea
alcătuită din conţinutul din value şi valoarea de după tagul option
selected permite selectarea prestabilită a unui element al listei
Exemplul următor ilustrează un formular care conţine o listă de selecţie şi două butoane.
Codul HTML aferent acestui exemplu se poate vizualiza în imaginea de mai jos.
76
Lista de selecţie cu selecţii multiple
Are aceeaşi sintaxă ca şi lista de selecţie descrisă mai sus, dar în plus are atributul
multiple în tag-ul select.
M2.U5.6. Câmpuri de editare multiple
Acest lucru se realizează cu tag-ul <textarea>
Sintaxa:
<textarea listă de atribute> text </textarea>
Semantica:
Din lista de atribute enumerăm:
• cols (nr de caractere afişate într-o linie),
• rows (nr de linii afişate simultan),
• name (permite ataşarea unui nume),
• wrap care determină comportamentul câmpului de editare faţă de sfârşitul de linie.
Atributul poate lua valorile: off, hard, soft.
77
Între tag-ul de intrare şi cel de ieşire ale formularului sunt inserate, în principal,
controalele formularului. Un control este o formă de interacţiune a utilizatorului cu
formularul. Putem prezenta conform tabelului de mai jos principalele controale într-un
formular HTML prezentate mai sus:
CONTROL ACŢIUNE A UTILIZATORULUI TAG

text Introducerea unui text de volum redus Input
password Introducerea unui text de volum redus, care apare, pe ecran, Input
mascat cu "*"
submit Activare (pentru a transmite informaţiile completate de Input
utilizator)
reset Activare (pentru a restabili valorile iniţiale ale tuturor Input
controalelor formularului)
checkbox Bifare Input
radio Bifare Input
textarea Introducere a unui volum mare de text Textarea
menu Alegere a unei opţiuni dintr-un meniu Select option
78
Evenimentele „onfocus” şi „onblur”
O pagina poate conţine mai multe elemente prin care putem introduce date. Dacă
introducem un şir de caractere într-un câmp de editare spunem că respectivul element
primeşte focus-ul.
• Evenimentul onfocus are loc atunci când un element primeşte focus-ul;
• Evenimentul onblur are loc atunci când elementul pierde focusul.
Elementele care primesc focus-ul au două metode importante:

• metoda onfocus() atribuie focus-ul elementului
• metoda onblur() face ca elementul să piardă focus-ul.
Exemplu
Într-o casetă trebuie să se introducă un text; în cazul în care se face click,
fară a introduce ceva, apare un mesaj, prin care se cere reintroducerea unei valori. Nu
putem pleca mai departe pâna când nu am introdus ceva.
79
Să se realizeze o pagină web care să conţină scheletul unui CV european. Această
pagină va conţine elemente de tip formular şi va permite introducerea datelor de
către utilizator. Se vor folosi toate elementele de tip formular studiate la această
unitate de învăţare.
M2.U5.7. Rezumat
Formularele sunt utilizate pentru introducerea şi transmiterea de date de către

utilizatorii site-ului. Introducerea unui formular se face folosind tag-ul <form>. Cele
mai importante atribute ale lui <form> sunt "action" şi "method". Action mă
redirecţionează către o altă pagină după ce au fost procesate datele din formular, iar
method îmi indică modul de transmitere a datelor introduse în formular. Varianta de
transmitere a datelor cu get se face prin URL, iar transmiterea datelor cu post se face
cu ajutorul protocolului HTTP.
Exemple de elemente de tip formular: caseta de text, buton radio, căsuţă pentru
bifare, buton, listă de selecţie, câmp de editare pe mai multe linii, etc.
Daţi un exemplu practic de utilizare a evenimentelor „onfocus” şi „onblur”.
M2.U5.9. Temă de control
1. Realizaţi un formular de soliciare a unui meniu la domiciliu de la o

pizarie.
2. Realizaţi un formular pentru a comanda un anumit tip de carte de la o
editura.
80
Modulul III Reguli CSS (Cascading Style Sheets)
Introducere
CSS este un acronim pentru Cascading Style Sheets (foi de stil în cascadă).
CSS este utilizat la îmbunătăţirea prezentării unei pagini Web (adică a modului în
care browser-ul o afişează). CSS permite stabilirea proprietăţilor pentru elementele
HTML utilizând o gamă uriaşă de valori. Având la dispoziţie mai mult de 100 de
proprietăţi, CSS este un instrument avansat destinat proiectanţilor Web pentru
crearea de site-uri profesionale, care nu pot fi construite folosind atribute HTML
obişnuite. În CSS există posibilitatea să se aşeze elementele în poziţiile dorite (alta
decât cea în cazul fluxului normal).
În mod normal definiţiile stilurilor sunt introduse în “foi de stil” (style

sheet).
Stilurile au fost introduse în versiunea HTML 4.0.
Există două modalităţi de a defini un stil prin:

• sintaxa CSS (Cascading Style Sheets);
• sintaxa limbajului JavaScript.
Una dintre caracteristicile fundamentale ale CSS este faptul că autorul poate
ataşa un stil, iar cititorul paginii respective poate ataşa altul, deci se obţine un set
de reguli în cascadă. În acest caz existǎ un set de reguli de prioritate care va decide
care regulǎ se va aplica.
Exista 4 tipuri de stiluri CSS: implicite, externe, interne şi inline.
Ordinea de utilizare a stilurilor este următoarea:

1 stilul implicit al navigatorului (browser default);
2 foi de stil externe (External style sheets, nume_fisier.*css);
3 foile de stil interne ( din interirul elementului head)
4 stiluri specificate în marcajul de start al unui element HTML
(inline style).
Competenţe
La finalul acestui modul, studenţii vor putea să:

• definească o regulă CSS
• grupeze selectorii şi declaraţiile în cadrul regulilor
• definească o pseudo-clasă şi un pseudo-element
• înţeleagă şi să aplice corect ordinea de precedenţă a regulilor CSS
• definească stiluri intern, inline şi în fişiere externe
• stilizeze frumos şi corect o pagină web
81
U1. Reguli CSS la nivel teoretic
Regulile CSS sunt utilizate la îmbunătăţirea prezentării unei pagini Web

(adică a modului în care browser-ul o afişează).
O regulǎ este formatǎ din douǎ pǎrţi principale: selectorul şi declaraţia.
Declaraţia se află între elementul “{“ şi elemental “ }”. La rândul ei,
declaraţia este formatǎ tot din douǎ pǎrţi: proprietatea şi valoarea. Spre exemplu,
pentru colorarea textului dintr-un tag <h1> vom scrie h1 { color: blue }. În
exemplul anterior h1 este selectorul, { color: blue } declaraţia cu proprietatea color
şi valoarea blue.
În blocul <style>...</style> avem regulile CSS definite ca mai sus.
Deci definim mai întâi, clasa de stiluri în interiorul blocului
<style>…</style> care se poate afla în blocul <head>...</head>.

pagini HTML stilizate cu ajutorul regulilor CSS.
• să definească o regulă CSS
• să grupeze selectorii şi declaraţiile în cadrul regulilor
• să definească o pseudo-clasă şi un pseudo-element
• să înţeleagă şi să aplice corect ordinea de precedenţă a regulilor CSS
• să definească stiluri intern, inline şi în fişiere externe
• să stilizeze frumos şi corect o pagină web
M3.U1.3. Integrarea regulilor CSS într-un fişier HTML
<HTML>
<HEAD>
<TITLE> Exemplu </TITLE>
<STYLE TYPE=”text/css”>
H1 { color: green; }
</STYLE>
</HEAD>
82
<BODY>
<H1> Acest heading este verde datoritǎ unei reguli CSS </H1>
</BODY>
</HTML>
În exemplul anterior regula CSS este specificatǎ în interiorul fişierului HTML. Prin
aceastǎ metodǎ modificările în cazul fişierelor mari devin greoaie de aceea se recomandǎ
scrierea regulilor într-un fişier separat de unde sǎ fie importate în fişierul HTML. Pentru
exemplificare editǎm un fişier pe care îl denumim „reguli.css”. În acest fişier scriem
H1 { color: green }. Documentul HTML care importǎ acest regulile din acest fişier este de
forma urmǎtoare:
<HTML>
<HEAD>
<TITLE> Exemplu de import </TITLE>
<LINK REL=”stylesheet” HREF=”c:\reguli.css” TYPE=”text/css”>
</HEAD>
<BODY>
<H1> Acest heading este verde datoritǎ unei reguli importate </H1>
</BODY>
</HTML>
Gruparea selectorilor şi a declaraţiilor
Pentru a reduce dimensiunea fişierelor selectorii se pot grupa, separarea lor făcându-se
prin virgulǎ.
H1, H2, H3, P { font-family: helvetica }
Asemănător se pot grupa şi declaraţiile:

H1
{
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
Class ca selector
O regulǎ de genul H1 { color: blue } se aplicǎ mereu când apare selectorul H1 indiferent
dacǎ vrem sau nu. Pentru a evita acest lucru se folosesc clasele.
Fie fişierul reguli.css, fişierul în care scriem regulile pe care le vom importa.
Sintaxa pentru definirea unei clase este următoarea: H1.clasa_noastrǎ { color: red }
In fişierul HTML când vrem sǎ aplicǎm regula respectivǎ scriem

<H1 CLASS=”clasa_noastrǎ”> Heading roşu </H1>.
Dacǎ am scrie <H1> Heading obişnuit </H1> nu se va mai aplica regula CSS, deci
textul „Heading obişnuit” nu va mai apărea roşu.
83
Clasa definitǎ mai sus se poate aplica numai pentru H1.
Dacǎ am avea <P CLASS=”clasa_noastrǎ” nu se obţine nici un efect. Totuşi se pot
defini clase generale astfel: .clasa_doi { color: blue }. O astfel de clasa poate fi aplicatǎ
oricărui selector care suportǎ specificarea unei culori.
ID ca selector
O construcţie asemănătoare cu CLASS este ID.
Sintaxa pentru definirea unui element ID este următoarea:

H1#z98y { letter-spacing: 0.5em }.
Un astfel de ID se poate aplica numai pentru H1 în felul următor:
<H1 ID=z98y>Wide text</H1>.
Pentru definirea unui ID care sǎ poată fi aplicat oricărui selector declaraţia se face
astfel: #z98y { letter-spacing: 0.3em }.Acest ID poate fi aplicat oricărui selector care suportǎ
specificarea dimensiunii dintre litere.
Comentarii
Comentariile sunt asemănătoare cu cele din limbajul de programare C.
EM { color: lime } /* un verde sǎ te doară ochii */
M3.U1.4. Pseudo-clase şi pseudo-elemente
Au fost introduse pentru adăugarea unor facilitǎţi suplimentare de formatare. Pseudo-

clasele şi pseudo-elementele sunt recunoscute în cadrul regulilor CSS, dar nu sunt
recunoscute direct în fişierul HTML.
Pseudo-clasa anchor
Aceastǎ pseudo-clasǎ permite formatarea link-urilor din cadrul unui pagini web.
A:link { color: red } /* link nevizitat */

A:visited { color: blue } /* link vizitat */
A:active { color: lime } /* link activ */
Prin aceste reguli toate link-urile din pagina HTML vor lua culorile specificate. Pseudo-
clasa anchor nu are efect decât asupra selectorului A, de aceea regula: A:link { color: red } are
acelaşi efect ca şi :link { color: red }.De asemenea pseudo-clasele pot fi combinate cu clasele
obişnuite astfel: A.clasa_mea:link { color: red }.
Pseudo-elemente
1. first-line
Permite specificarea unui anumit stil pentru prima linie dintr-un paragraf.
<STYLE TYPE="text/css">
P:first-line { font-variant: small-caps }
</STYLE>
<P>The first line of an article in Newsweek.
Presupunând ca prima linie se terminǎ dupǎ cuvântul „an” în pagina web acest text va
apare sub forma:
84
THE FIRST LINE OF AN
article in Newsweek.
2. first-letter
Asemǎnǎtor cu first-line acest pseudo-element permite specificarea unui stil pentru
prima literǎ dintr-un text.
M3.U1.5. Precedenţa regulilor
De multe ori se întâmplǎ ca într-un punct în cadrul unui fişier HTML sǎ fie valabile mai
multe reguli CSS. Pentru a rezolva astfel de situaţii trebuie stabilite nişte reguli de prioritate.
'important'
'Important' este un cuvânt rezervat prin care i se dǎ unei reguli CSS o prioritate mai
mare decât unei reguli obişnuite.
P { font-size: 12pt ! important; font-style: italic }
Reguli:
1) Regula care conţine `! important` suprascrie o regulǎ obişnuitǎ.

2) Specificitatea unui selector: selectorii mai specifici îi suprascriu pe cei mai generali.
Specificitatea se obţine prin concatenarea a trei numere: numǎrul de atribute ID din
cadrul selectorului (a), numǎrul de atribute CLASS (b) şi numǎrul de tag-uri din
selector (c).
LI {...} /* a=0 b=0 c=1 -> specificitate = 1 */
UL LI {...} /* a=0 b=0 c=2 -> specificitate = 2 */
UL OL LI {...} /* a=0 b=0 c=3 -> specificitate = 3 */
LI.red {...} /* a=0 b=1 c=1 -> specificitate = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> specificitate = 13 */
#x34y {...} /* a=1 b=0 c=0 -> specificitate = 100 */
Pseudo-clasele sunt numǎrate ca şi clasele obişnuite, iar pseudo-elementele sunt

numǎrate ca şi elementele obişnuite.
În cazul în care douǎ reguli ajung sǎ aibǎ aceaşi specificitate se aplicǎ regula specificatǎ
mai târziu. Regulile importate se considerǎ a fi înaintea oricǎrei reguli din fişierul în care sunt
importate.
Stiluri in-line
Sunt definite în eticheta în care dorim să se aplice aceste stiluri.

Valoarea lui style = “valoare” este cuprinsă între ghilimele.
Stiluri definite în fişiere externe
Stilurile definite în interiorul blocului <style>…</style> pot fi scrise într-un fişier

extern, pentru a putea fi utilizate în mai multe fişiere HTML.
Se creează un fişier care conţine descrierea stilurilor şi se salvează cu extensia .css.
În fişierul HTML care utilizează stilurile se include în blocul <head>…</head> o
etichetă <link> cu atributele:
• „rel” cu valoarea stylesheet
85
• „href” cu valoarea adresa URL a fişierului creat, care conţine regulile css.
M3.U1.6. Atribute CSS
Font
• font-family Valoarea: nume de font. Exemple: helvetica, serif, sans-serif,
cursive, monospace, fantasy, etc
• BODY { font-family: gill, helvetica, sans-serif }
• font-style Valoarea: normal | italic | oblique
• font-variant Valoarea: normal | small-caps
• font-weight Valoarea: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 |
500 | 600 | 700 | 800 | 900. Valoarea: normal echivaleazǎ cu 400, iar bold cu 700.
• font-size Valoarea: <absolute-size>|<relative-size>|<length>|<percentage>
• absolute-size poate lua una din valorile: xx-small | x-small | small | medium |
large | x-large | xx-large
• relative-size poate lua una din valorile: larger sau smaller
• percentage
Exemplu
Stiluri pentru paragrafe şi titluri (heading-uri)
P { font-size: 120% }
H1, H2, H3 { font-style: italic }
Dimensiunile pentru font-size sunt specificate prin:
1. mărime absolută; avem urmatoarele valori posibile:

• xx-small
• x-small
• small
• medium (valoarea prestabilită)
• large
• x-large
• xx-large
2. mărime relativă faţă de valoarea curentă; avem urmatoarele valori posibile:

• larger
• smaller
3. numar întreg urmat de unitatea de măsură

4. procente din valoarea curentă.
Exemplu
Stil pentru dimensiunea fontului dintr-un paragraf
P {font-size: 9px }
86
Dimensiunea fontului poate fi specificatǎ în centimetri(cm), milimetri(mm), pixeli(px),
ţoli(in), puncte(pt 1pt=1/72in), etc.
1 in=72 pt=2.54 cm=6 pc
Background şi culoare
• Color - Valoarea culorii poate fi specificatǎ prin RGB(roşu,verde,albastru),

parametrii luând valori între 0 şi 255, prin numele unei culori care este deja definitǎ
(blue,green,black, etc) sau prin #nr1nr2nr3. Nr1,nr2,nr3 sunt numere de douǎ cifre
în baza 16.
• H2 { color: rgb(255,0,0) } H3 { color: #00FF6A }
• background-color - Valoarea: <color> | transparent.
• background-image - Valoarea: <url> | none
• background-repeat - Valoarea: repeat | repeat-x | repeat-y | no-repeat Precizeazǎ
dacǎ imaginea din fundal este repetatǎ sau nu. Pentru valoarea „repeat” imaginea
este multiplicatǎ pe orizontalǎ şi verticalǎ. Pentru valoarea „repeat-x” imaginea este
multiplicatǎ numai pe orizontalǎ,iar pentru „repeat-y” imaginea este multiplicatǎ
doar pe verticalǎ.
• background-attachment - Valoarea: scroll | fixed Specificǎ dacǎ imaginea din
fundal este derulatǎ odatǎ cu conţinutul sau nu.
Text
• word-spacing Valoarea: normal | <lenght> (dimensiunea dintre cuvinte)
• letter-spacing Valoarea: normal | <lenght> (dimensiunea dintre litere)
• text-decoration Poate lua una din valorile: underline, overline, line-through, blink.
• vertical-align Valoarea: baseline | sub | super | top | text-top | middle | bottom | text-
bottom | <percentage>
• text-transform Valoarea: capitalize | uppercase | lowercase | none
• text-align Valoarea: left, right, center, justify
Distanţa dintre rânduri
Se foloseşte atributul “line-height”. Valori posibile:

• valoarea “normal”
• factor de scală
• prin lungime
• prin procente din valoarea curentă a fontului
Stiluri pentru diferite medii
Se ştie că un text afişat pe monitor cu culoarea galbenă se vede foarte slab atunci când
este tipărit la o imprimantă alb-negru. Această deficienţă poate fi corectată dacă se utilizează
stiluri potrivite pentru fiecare mediu. Mediul pentru care este valabil un stil este specificat
prin atributul media al elementului <style>, care poate lua urmatoarele valori posibile:
• “screen” (pentru monitoare)
• “print” (pentru imprimante)
• “projection” (pentru proiectoare video)
• “braille” (pentru terminale destinate nevăzătorilor)
87
• “speech” (pentru terminale audio)
• “all” (pentru toate tipurile de medii)
Exemplu
Stilizarea unui paragraf pe pagina web şi la imprimarea pe hârtie
<html>
<head><title> Exemplu MEDIA</title>
<style type-“text/css” media=”screen”>
p {color: yellow;}
</style>
<style type=”text/css” media=”print”>
p {color: black;}
</style>
</head>
<body>
<p> Acest paragraf va avea culoarea galbena pe monitor si culoarea neagra la
imprimare.
</body>
</html>
Configurarea blocurilor de text
Dimensiunile unui bloc
Un bloc este format din:

• conţinut
• distanţa dintre conţinut şi chenar
• chenar
• margini
Marginile blocului
Marginile unui bloc reprezintă distanţa minimă dintre chenarele a două blocuri vecine.
Pentru a stabli marginile unui bloc se utilizează atributele:
• margin-left
• margin-right
• margin-top
• margin-bottom
• margin.
88
Dacă sunt indicate pentru proprietatea „margin” valori separate prin spaţiu, acestea
reprezintă dimensiunile în ordinea urmatoare: sus, dreapta, jos, stânga.
Dimensiunile care lipsesc preiau valorile de la elementele opuse.
Dacă este dată o singură valoare, aceasta va fi folosită pentru toate direcţiile.
Valorile posibile ale acestor atribute sunt:
• “auto”
• marime (număr urmat de o unitate de măsură)
• procent din lăţimea paginii (număr întreg între 0 şi 100, urmat de simbolul %)
Observaţii: Valorile menţionate anterior pot fi şi negative.
Distanţa dintre conţinut şi chenar
Se va seta cu ajutorul atributelor de mai jos se stabileşte distanţa dintre conţinutul unui
bloc (text, imagini, etc) şi chenarul acestuia.
Atribute:
• padding-top
• padding-right
• padding-bottom
• padding-left
• padding
Valori posibile ale atributelor sunt:

• Mărimea (număr întreg pozitiv)
• Procent din lăţimea paginii
Lăţimea chenarului
Atribute:
• Border-top-width
• Border-right-width
• Border-bottom-width
• Border-left-width
• Border-width
Valori posibile:
• “thin”, “medium” sau “thick”
• Numere întregi pozitive urmate de o unitate de măsură
Stilul chenarului
Se va seta cu ajutorul atributului “border-style”.

Valori posibile:
• “none” (valoarea prestabilită)
• “solid” (continuu)
• „double” (linie dublă)
• “inset” (chenar 3D)
• “outset” (chenar 3D) etc.
89
Culoarea chenarului
Se va seta cu ajutorul atributului “border-color”.

Valori posibile:
• “none” (niciuna)
• un nume de culoare (aqua, red, blue, etc.)
• specificaţie numerică de tip RGB
• funcţia (r, g, b) cu valori între 0 şi 255
• funcţia (r, g, b) cu procente între 0% şi 100%
Să se realizeze structura unui tabel fără a folosi tag-ul <table>, ci folosind doar tag-
uri <div> stilizate. Celulele acestui tabel vor avea culori diferite. Colorarea nu se va
face pe baza atributului bgcolor al tag-urilor HTML ci cu reguli CSS.
M3.U1.7. Rezumat
CSS este un acronim pentru Cascading Style Sheets (foi de stil în cascadă).
CSS este utilizat la îmbunătăţirea prezentării unei pagini Web (adică a modului în care
browser-ul o afişează).
Pentru a reduce dimensiunea fişierelor selectorii se pot grupa, separarea lor
făcându-se prin virgulǎ. Asemănător se pot grupa şi declaraţiile.
Sintaxa pentru definirea unei clase este următoarea:
.clasa_noastrǎ { regulă CSS }
În fişierul HTM,L când vrem sǎ aplicǎm regula respectivă unui tag, scriem astfel:
<nume_tag class=”clasa_noastrǎ”>Conţinut tag </nume_tag>.
Precedenţa regulilor CSS este următoarea:
1) Regula care conţine `! important` suprascrie o regulǎ obişnuitǎ.
2) Specificitatea unui selector: selectorii mai specifici îi suprascriu pe cei mai
generali. Specificitatea se obţine prin concatenarea a trei numere: numǎrul de
atribute ID din cadrul selectorului (a), numǎrul de atribute CLASS (b) şi
numǎrul de tag-uri din selector (c).
1. Precizaţi câteva atribute CSS.

2. Daţi exemplu de utilizare a unui chenar de culoarea rosie.
90
U2. Exemplificarea regulilor CSS
Pentru a se fixa mai bine regulile CSS prezentate în unitatea de învăţare

anterioară, unitatea de învăţare curentă îşi propune exemplificarea acestora. Astfel
se poate vedea în mod concret modul de utilizare al diferitelor tipuri de reguli.
Astfel, exemplele care vor fi oferite în această unitate vor servi studentului
ca un plus de claritate şi ca un model pentru aplicaţiile pe care le va avea de
realizat ca şi temă.
Această unitate de învăţare îşi propune clarificarea utilizării foilor de stil

prin exemple concludent.
• să aplice regulile CSS
• să grupeze selectorii şi declaraţiile în cadrul regulilor
• să definească stiluri intern, inline şi în fişiere externe
• să stilizeze frumos şi corect o pagină web
•
91
M3.U2.3. Exemplificarea utilizării foilor de stil
Exemplu de stil definit în secţiunea “head”
Alt exemplu de stil definit în secţiunea ”head”:
92
Stiluri identificate cu ajutorul id-ului
Stiluri inline
93
Stil definit ca fişier extern
Exemplu de stiluri pentru font
94
Exemplu de culoare a fontului pentru tag-urile p, b şi h1
95
Exemplu de stil pentru culoarea fontului textului
96
Exemplu de imagine cu stil
97
98
Exemplu de stil pentru distanţa dintre rândurile de text
99
Exemplu de stil pentru grosimea fontului
100
Exemple stiluri pentru chenare
101
Alt exemplu cu chenare
102
Exemplu de creare a unui meniu de navigare cu ajutorul stilurilor
Vom observa că meniul s-a realizat doar cu ajutorul unei liste neordonate şi al stilurilor
103
Un exemplu cu imagini stilizate folosind CSS3
În <body> se poate observa ca nu este pus decât un <div> şi patru tag-uri <img>,
fiecare dintre acestea având câte o clasă.
În imaginile de mai jos va fi prezantat codul CSS aferent fiecăreia din aceste 5 clase:
shadow, shadow2, one-edge-shadow, rotation şi border-image.
Se poate observa că stilurile din CSS3 sunt prefixate de –moz–, –webkit–, –o–, –ms–.
Stilul care este prefixat de –moz– este vizibil pe Mozilla Firefox, cel prefixat de –webkit– este
pentru Chrome sau Safari, cel prefixat de –o– este pentru Opera, iar cel prefixat de –ms– este
pentru Internet Explorer. Avem nevoie de prefixări pentru fiecare browser în parte întrucât
CSS3 nu a intrat încă în standardele de codificare ale W3C.
104
105
Pentru a aşeza mai multe imagini în straturi va trebui să folosim stilul z-index care ne
indică adâncimea la care se găseşte imaginea.
Cu cât valoarea lui z-index este mai mică, cu atât imaginea va fi într-un plan mai
îndepărtat.
Exemplul următor va prezenta un şir de imagini în acordeon şi stilurile care au ajutat la

poziţionarea acestora în maniera precizată.
106
107
Un alt exemplu de CSS este prezentat pentru stilizarea butoanelor. Acestea nu sunt de
fapt decat link-uri care, pe baza stilurilor, vor arata sub forma de buton.
108
Pentru realizarea acestora s-a folosit biblioteca Bootstrap care contine CSS, JavaScript
şi diferite font-uri.
În codul sursă nu a trebuit decât apelarea unei clase de css în interiorul tag-ului <a>
<a href=”#” class=”btn-success”> Detalii</a> | <a href=”#” class=”btn-success”>
Editeaza</a> | <a href=”#” class=”btn-success”> Sterge</a>
În aplicaţia web a fost inclus si fisierul css „Bootstrap.css” care a fost descărcat în
prealabil de pe internet. Codul de mai sus este aferent butoanelor exemplificate.
109
Să se realizeze o pagină web care să conţină un meniu de restaurant. Aplicaţia va
trebui să conţină cât mai multe imagini şi informaţii, iar stilizarea acesteia se va face
doar cu ajutorul regulilor CSS. Nu se va folosi stilizarea pe baza atributelor tag-
urilor HTML.
1. Enumeraţi 2 particularităţi pentru CSS.

2. Realizaţi un evantai din imagini folosindu-va de stilul z-index.
Temă de control
1. Realizaţi o paginӑ cu poze care sӑ fie aranjate ca şi un evantai, folosind

CSS3;
.2. Realizati o animatie cu ajutorul regulilor CSS3.
110
Modulul IV JavaScript
Introducere
Limbajul JavaScript a fost realizat de firmele Netscape si Sun si a fost

conceput ca un limbaj care extinde posibilitatile de lucru ale HTM-ului. Limbajul
conlucreaza cu HTML-ul.
Carateristici ale limbajului JavaScript:

• În JavaScript se scriu secvenţe de program numite scripturi. Majoritatea
acestor secvenţe sunt alcătuite din funcţii, care răspund anumitor
evenimente.
• În JavaScript NU se citesc şi NU se scriu fişiere;
• JavaScript este un limbaj interpretat. Asta înseamnă că browserul preia
o instrucţiune, o execută, apoi preia o altă instrucţiune pe care o
execuăa, ş.a.m.d.
• JavaScript este un limbaj care utilizează obiecte;
• În JavaScript se face distincţie între literele mari şi literele mici, adică
este "case sensitive".
• Erorile de sintaxă se depistează greu, drept urmare se poate folosi
funcţia alert( ).
• Foloseşte din sintaxa lui C++ şi a limbajului Java
• JavaScript lucrează cu funcţii definite de programatori sau/şi cu funcţii
predefinite
JavaScript oferă capacitatea de a face paginile statice să devină interactive

şi mai prompte faţă de acţiunile utlilizatorilor şi de intrările acestora.
JavaScript pemite utilizatorilor în Web să creeze pagini dinamice, prin

înglobarea unui script în structura HTML existentă. În felul acesta se pot plasa
procese în spatele butoanelor, se pot efectua calcule cu datele introduse prin
formulare, sau se poate efectua acţiuni cand utilizatorul trece cursorul mouse-ului
peste un element HTML sau peste un obiect de tipul Document.
JavaScript oferă avantaje faţă de documentele interactive bazate pe server,

deoarece în general documentele bazate pe JavaScript nu sunt dependente de
prelucrarea pe parte de server, astfel că pot răspunde mai rapid la interacţiunile şi
cererile utilizatorului.
111
Competenţe
Acest modul are ca obiectiv introducerea studenţilor în lumea limbajului de

scriptare JavaScript şi familiarizarea acestora cu căteva dintre noţiunile utile
începerii lucrului bazat pe interacţiunea cu elementele din pagina web.
• înţeleagă utilitatea şi importanţa limbajului JavaScript
• creeze propriile scripturi
• includă scripturile scrise de către ei în codul HTML
• creeze cod care răspunde prin acţiuni la evenimente
• utilizeze obiectele puse la dispoziţie de JavaScript
• creeze propriile obiecte folosind JavaScript
• creeze animaţii pe care să leincludă în paginile web
112
U1. Introducere în JavaScript
JavaScript este un limbaj de scriptare, adică este un limbaj de programare

mai redus ca şi funcţionalităţi. Este un limbaj orientat pe obiecte, dar totuşi destul
de uşor de învăţat.
Codul JavaScript poate fi inclus în paginile HTML şi majoritatea
browserelor moderne recunosc şi interpretează acest cod. Acesta este un limbaj
interpretat de către partea de client a comunicării (adică de către browser) şi de
aceea durează mai mult execuţia codului, întrucât browserul compilează
instrucţiunile linie cu linie în timpul rulării, chiar înainte să le execute.
Motivul pentru care se foloseşte JavaScript este acela că permite
interacţiunea utilizatorului paginii web cu elementele din acea pagină. Astfel vop
putea crea un site care să nu fie doar unul de prezentare, ci unul interactiv.
Această unitate de învăţare îşi propune iniţierea studenţilor limbajul

JavaScript.
• să înţeleagă avantajele utilizării limbajului JavaScript
• să înglobeze instrucţiuni Javascript în HTML
• să înţeleagă modul de execuţie a scripturilor
Durata medie de parcurgere a acestei unităţi de învăţare este de 1 oră.
M4.U1.3. Avantajele utilizării limbajului JavaScript
• JavaScript poate fi înglobat în HTML
Codul JavaScript este găzduit în documente HTML şi executat din interiorul lor.
JavaScript foloseşte HTML ca modalitate de a sări în cadrul de lucru al aplicaţiilor pentru
Web şi-i extinde capacităţile normale, asigurând evenimente pentru etichete HTML şi
permiţând acestui cod condus de evenimente să se execute din interiorul său.
• JavaScript este dependent de mediu
113
JavaScript este un limbaj de scriptare. Software-rul care rulează programul JavaScript
scris este motorul de intrepretare din mediu - NetscapeNavigator, Microsoft Internet Explorer
sau unul din motoarele pe parte de server. Când este inclus într-un document HTML,
JavaScript depinde de browser pentru a fi recunoscut. Dacă browserul nu îl recunoaşte,
programul va fi ignorat sau mai rău, poate fi afişat ca text pe pagină.
• JavaScript este un limbaj interpretat
JavaScript fiind un limbaj de scriptare este interpretat de browser înainte de a fi

executat. JavaScript nu este compilat în binary - ca un fişier EXE, ci rămâne parte a
documentului HTML la care este ataşat. Dezavantajul unui limbaj interpretat este că
executarea limbajului de bază durează mai mult, deoarece browserul compilează instrucţiunile
în timpul rulării chiar înainte să le execute. Avantajul constă în faptul că este mult mai uşor de
actualizat codul sursă.
• JavaScript este un limbaj flexibil în privinţa tipului de date
JavaScript diferă mult de limbajele stricte în privinţa tipului de date, JavaScript este
mult mai flexibil. Variabilele de un anumit tip pot fi declarate, dar nu este obligatoriu ca acest
lucru să fie făcut. Se poate lucra cu o variabilă chiar dacă nu i se cunoaşte tipul specific
înainte de rulare.
• JavaScript este un limbaj bazat pe obiecte
Netscape şi alţii se referă la JavaScript ca la un limbaj de programare orientat spre

obiecte (OOP), dar aceasta este o deformare a adevărului înteles al sintagmei OOP. JavaScript
este un limbaj bazat pe obiecte. În cadrul limbajului JavaScript se lucrează cu obiecte care
încapsulează date (proprietăţi) şi comportamente (metode), dar acestea nu pot fi subclasate.
Modelul de obiect JavaScript este bazat pe instanţă, nu pe moştenire.
• JavaScript este condus de evenimente
Codul JavaScript scris într-o aplicaţie Web poate răspunde la evenimente generate de
utilizator sau de sistem. În sine, limbajul JavaScript este echipat pentu a trata evenimente.
Obiectele HTML, de exemplu butoanele sau câmpurile de text, sunt îmbunătăţite pentru a
accepta handlere de evenimente.
• JavaScript nu este Java
Java şi JavaScript au fost create de două companii diferite şi motivul principal pentru
similitudinea denumirilor este legat exclusive de marketing. Există o numeroase deosebiri
între Java şi JavaScript. În primul rând, dacă JavaScript este strâns legat de HTML, o
miniaplicaţie Java este conectată la un document HTML prin eticheta <applet>. Java este
folosit pentru miniaplicaţii sau pentru aplicaţii complexe, pe când JavaScript este folosit în
primul rând pentru scripturi. Sintaxa limbajului JavaScript aduce cu sintaxa limbajului Java.
• JavaScript este multifuncţional
114
JavaScrip are o mulţime de faţete şi poate fi folosit în multe contexte pentru a oferi
soluţii la probleme din Web. Principalele scopuri ale limbajului JavaScript sunt:
• înfrumuseţează şi animă paginile HTML statice prin efecte speciale, animaţii şi
manşete;
• validează date, fără a trece totul serverului;
• are un rol important în aplicaţii client/server pentu Web;
• permite dezvoltarea de aplicaţii pe parte de client;
• slujeşte ca şi legătură pe partea de client între obiecte HTML, miniaplicaţii Java,
controale ActiveX şi module plug-in Netscape.
• JavaScript evoluază
JavaScript continuă să evolueze ca limbaj.
• JavaScript acoperă diverse cotexte
JavaScript este un limbaj de scriptare. Programatorii Web se îndreaptă mai ales spre
scriptarea pe parte de client. JavaScript este un limbaj nativ pentru instrumente de dezvoltare
Web.
M4.U1.4. Înglobarea instrucţiunilor JavaScript în HTML
Scripturile JavaScript sunt integrate într-un document HTML folosind perechea de

etichete <script> şi </script>. Atributul type este folosit pentru a specifica numele fişierelor
sursă JavaScript externe.
Atributele etichetei script sunt:
• Defer - atribut Boolean folosit pentru a anunţa browserul dacă scriptul din această
secţiune generează un conţinut;
• Language - atribut depreciat, care este utilizat pentru a specifica limbajul şi versiunea
folosite între etichete;
• Src - atribut care specifică locaţia URL a unui fişier JavaScript sursă externă;
• Type - atribut care a înlocuit atributul language şi care anunţă browserul ce limbaj se
foloseşte între etichete.
În concluzie, există trei modalităţi de a introduce un script JavaScript într-un document

HTML, şi anume:
• Scriptul se scrie în head; .<script language=”JavaScript” > si</script>;
• Scriptul se scrie în body; .<script language=”JavaScript” > si</script>;
• Scriptul apare ca şi fişier extern cu extensia js, deci “nume.js”;
<script src = “nume.js ”> şi</script>
M4.U1.5. Executarea scripturilor
Executarea unui script JavaScript începe în momente diferite, în functie de felul în care
este scris. Dacă scriptul afectează conţinutul de pe pagină, aşa cum se întâmplă prin folosirea
instrucţiunii document.write(), este executat pe măsura ce este întâlnit. Există de asemenea un
115
handler de eveniment, onLoad, care este executat numai după ce documentul HTML a fost
complet încărcat în browser.
Dacă scripturile JavaScript sunt stocate într-un fişier separat, ele sunt de asemenea
evaluate atunci când se încarcă pagina şi înainte să aibă loc vreo acţiune.
Toate instrucţiunile JavaScript aflate în blocul unei funcţii sunt interpretate, iar
executarea nu se petrece pană ce funcţia nu este apelată dintr-un eveniment JavaScript.
Instrucţiunile JavaScript care nu se află în blocul unei funcţii sunt executate după ce
documentul se încarcă în browser, practic pe măsură ce este redat. Rezultatul executării
acestor instrucţiuni va fi vizibil pentru utilizatori atunci când văd pentru prima dată pagina.
M4.U1.6. Rezumat
Principalele caracteristici ale limbajului JavaScript sunt:

• poate fi înglobat în codul HTML
• este dependent de mediu
• este un limbaj interpretat
• este flexibil în ceea ce priveşte tipurile de date
• este obiect orientat
• este bazat pe evenimente
• este multifuncţional
• este într-o continuă evoluţie
• coperă numeroase contexte
Includerea codului JavaScript în HTML se face cu ajutorul tag-ului
<script>. Dacă folosim fişier extern cu codul JavaScript, atunci fişierul va fi apelat
prin proprietatea src a tag-ului <script> care va lua ca şi valoare numele fişierului.
Executarea scripturilor are loc după ce funcţia este apelată dintr-un
eveniment JavaScript.
Precizaţi câteva facilităţi oferite de limbajul JavaScript.
116
U2. Limbajul JavaScript
JavaScript este un limbaj de nivel înalt, bazat pe obiecte, conceput pentru a

le permite utilizatorilor şi programatorilor în Web să creeze cu uşurinţă documente
Web interactive. El oferă caracteristicile esenţiale ale unui limbaj orientat spre
obiecte, fără caracteristicile complicate care însoţesc alte limbaje, ca Java şi C++.
Vocabularul relativ restrâns al limbajului JavaScript este uşor de înţeles, oferind în
acelaşi timp mai multe posibilităţi inaccesibile anterior.

• declare variabile în JavaScript
• folosească operatorii puşi la dispoziţie de JavaScript
• folosească funcţii predefinite de JavaScript şi să îşi declare propriile funcţii
• înţeleagă structura ierarhică a obiectelor JavaScript
• înţeleagă în mod corect noţiunea de eveniment şi să trateze evenimentele
care se produc
M4.U2.3. Tipuri de date, variabile şi operatori
În JavaScript există următoarele tipuri de date : tip şir; tip număr întreg; număr întreg în
baza 10, 8 sau 16.
O variabilă se poate declara particular cu "var".
O variabilă poate primi orice valoare, nu se declară tipul ei.
Operatori
Operatori aritmetici : +, -, * /, %, ++ ,-- , + (operator unar), - (operator unar)

Operatori relaţionali: <, <=, >, >=
Operatori de egalitate: = = pentru test egalitate
!= pentru test inegalitate
Operatori logici: ! (negarea logică)
|| operatorul logic “sau” (este operator binar): dacă cel puţin unul
dintre operanzi este true, rezultă true, altfel rezultatul este false
&& operatorul logic “si”
117
Operatori logici pe biti: <<, >> operatori de deplasare
& - “si” pe biţi
| - “sau” pe biţi
٨- “sau exclusiv” pe biţi
~ - “negarea pe biţi”- are rolul de a inversa conţinutul biţilor
Operatorul ',' (virgulă)
Operatorul conditional : exp1 ? exp2 : exp3;
Operatorul de concatenare pentru siruri este +
M4.U2.4. Instrucţiuni şi funcţii predefinite
Instrucţiunile următoare au aceiaşi sintaxă şi semantică precum şi în limbajul Java:

• if
• bloc de instrucţiuni ( {….} )
• switch;
• while;
• do while
• for
Funcţii predefinite
• alert (“mesaj”) – afişează o casetă în care se va scrie “mesaj”

• confirm(“mesaj”) – caseta afişează date de tip şir. Utilizatorul poate apăsa
butonul OK , caz în care se returnează true, sau Cancel, caz în care se returnează
false
• prompt(sir_afisat, sir_asteptat) – caseta afişează sir_afisat şi aşteaptă
introducerea valorii în sir_asteptat. Variabila sir_asteptat poate fi iniţializată cu
zero.
• escapes(s)
• eval(s) - s este un String care conţine operaţii matematice (de. ex.:.“2+4“). Funcţia
returnează rezultatul acestei operaţii, în acest caz 6. Dacă nu este vorba despre o
expresie calculabilă, atunci se returnează un mesaj de eroare.
• isFinite(n) - decide dacă numărul n este finit
• isNaN(x) - verifică dacă valoarea x este un număr valabil (not-a-number). Funcţia
returnează valoarea true, daca x e un număr.
• Number(x) - Converteşte conţinutul obiectului x în număr şi îl returnează
• parseInt (sir) – converteste un şir către un întreg. Conversia se face până când
este întâlnit un caracter care nu este cifră.
• parseFloat(sir) - converteşte un şir către o valoare reală. Conversia se face până
când este întâlnit un caracter care nu este cifră. Punctul este "virgula zecimală".
În JavaScript putem introduce un text în mod dinamic.

În JavaScript putem introduce şi tag-uri HTML.
118
De exemplu putem scrie: document.write(“<b>”+ text + “</b>”). Pe pagină nu se va
afisa textul “<b>”+ text + “</b>”, ci se va afisa "text" scris îngrosat, de unde rezultă că
browserul aînţeles că este vorba de tag-ul HTML <b>.
Exemplu
Două exemple de aplicaţii în JavaScript
Aplicatie_1:
Aplicatie_2:
119
M4.U2.5. Evenimente
Una dintre caracteristicile-cheie ale limbajului JavaScript este capacitatea de a

intercepta un număr limitat de acţiuni, cunoscute ca evenimente. Un eveniment este o acţiune,
care apare la un moment dat şi în urma căreia este declanşată execuţia unei anumite părţi din
program. Ori de câte ori vizitatorul face click pe o legătură, de exemplu, când introduce un
text sau chiar când trece cu mouse-ul deasupra unei zone a paginii, survine un eveniment la
care scriptul reacţionează generând un răspuns.
M4.U2.6. Obiecte
Folosind limbajul JavaScript, se pot defini obiecte proprii. Limbajul pune însă la
dispoziţie o ierarhie de obiecte predefinite, respectând modelul DOM (Document Object
Model care este un pachet de interfeţe conceput de W3C). Elementul de legătură între
JavaScript şi DOM este obiectul Document, ce implementează interfaţa Document din DOM.
M4.U2.7. Legatura între limbajul JavaScript şi elementele dintr-un formular
JavaScript crează o ierarhie de obiecte predefinite, respectând modelul obiect document

(DOM). Astfel conţinutul fiecăruit tag- HTML sau regulă CSS pot fi modificate.
Această ierarhie – prezentată de navigatorul Netscape – este ilustrată în figura de mai

jos [3]:
Fiecărui nivel din ierarhia de mai sus putem spune că îi corespunde o serie de noduri.
Astfel avem nodul document, cu subnivele/subnoduri cum ar fi image.
120
Pornim de la o aplicaţie concretă, fie un formular care are structura conform imaginii de
mai jos:
JavaScript recunoaşte elementele din pagina WEB în două moduri:

după atributul name al fiecărui tag, începând cu tag-ul <form> şi continuând cu
elementele acestuia;
după numele implicit alocat elementelor din pagină. Elementele de acelaşi fel sunt
stocate într-un vector (array[i]) a cărui index începe cu valoarea zero.
Pentru formularul de mai sus, JavaScript crează o structură arborescentă conform

poziţiei ocupată de fiecare element în pagină.
Pagina se numeşte document, adică ne referim la nodul document.

Structura arborescentă arată astfel:
121
document
________________│_______________________________
│ │ │ │
images[0] forms[0] links[0] images[1]
__________│_________
│ │ │
elements[0] elements[1] elements[2]
Într-un document HTML se pot crea mai multe formulare. Acestea se vor numi implicit
forms[0], forms[1],…etc.
Elementele fiecărui formular vor fi denumite elements[0], elements[1],…etc.
Imaginile dintr-o pagină vor fi numerotate începând cu prima imagine din pagină cu
numele images[0], images[1],…etc.
Link-urile dintr-o pagină vor fi şi ele numerotate începând cu indexul 0 cu numele

links[0], links[1],…etc.
Pentru a acesa primul element din formular vom scrie una din următoarele secvenţe în
JavaScript:
1. document.forms[0].elements[0]
2. document.f1.nume – această expresie se foloseşte în cazul în care formularul

este descris conform secvenţei de cod de mai jos:
<form name="f1">
Imagine_1 <br><img src=c:\CURS_WEB_ID_FINAL\s.jpg> <br>
Nume&nbsp&nbsp&nbsp&nbsp&nbsp:<input type ="text" name="nume"
value=""><br>
Prenume :<input type ="text" name="prenume" value=""><br>
<input type="submit" value=" OK " ><br><br><br>
Imagine_2 <br><img src=c:\CURS_WEB_ID_FINAL\s.jpg>
<br><br>
<a href="l.html"> <i>WWW.GOOGLE.COM </i></a>
</form>
M4.U2.8. Manipularea tag-urilor/nodurilor/elementelor
Pentru a putea manipula informaţia dintr-un element (tag) HTML este necesar ca mai
întâi să se obţină o “referinţă” la acel element. În acest scop se pot folosi următoarele metode:
• document.getElementById( )- returnează un element, identificat după atributul id.W3C
recomandă ca pentru identificarea elementelor să se folosească id;
• document.getElementByName() - returnează un element, identificat după atributul
name. ;
• document.getElementsByTagName() - returnează o listă de elemente, identificate după
numele tag-ului.
122
După localizarea unui element, se poate explora structura arborescentă începând cu acel
punct, folosind proprietăţi ale obiectului precum: parentNode, firstChild, nextSibling etc.
După obţinerea unei referinţe la un element, se pot manipula diversele proprietăţi ale
acestuia. Un exemplu în acest sens sunt atributele CSS care se pot modifica prin intermediul
proprietăţii style. Există şi o excepţie: float. Acesta este un cuvânt rezervat în JavaScript, deci
nu se poate folosi element.style.float, dar se poate folosi element.style.cssFloat.
Crearea de noi tag-uri/noduri/elemente
Există cel puţin două tipuri diferite de noduri, astfel avem : nodurile element şi nodurile
de text. Acestea se crează folosind metodele
• document.createElement() - pentru elemente;
• document.createTextNode() - pentru nodurile de text.
Metoda appendChild() adaugă un nod fiu nodului pentru care este invocată. Metoda
„pereche” este removeChild() care permite ştergerea unui nod fiu. Crearea unui nod se poate
face şi prin altă metodă, folosind metoda document.write(), dar datorită faptului că există
posibilitatea de a introduce orice, chiar şi cod prost structurat, această metodă poate crea
probleme serioase, în special în cazul documentelor XML. Din această cauză, funcţia nu are
nici un efect în documentele XHTML (şi introducerea ei generează mesaje de eroare). În
cazul XHTML, singura modalitate de a manipula structura documentelor via JavaScript este
DOM.
Preluarea coordonatelor la apăsarea unui click al mouse-ului cu ajutorul

JavaScript
JavaScript permite preluarea de coordonate în momentul în care se efectuază click pe o

anumită imagine. Acest lucru este realizat cu ajutorul obiectelor Event care sunt create
automat ori de câte ori are loc un eveniment. Există un număr de proprietăţi asociate unui
obiect Event care pot fi interogate pentru a afla informaţii suplimentare despre obiectul Event.
Dintre aceste proprietăţi fac parte şi Event.pageX şi Event.pageY în care sunt reţinute
coordonatele X şi Y în pixeli ale cursorului, relativ la pagina curentă, în momentul în care s-a
produs evenimentul. Cu ajutorul acestor două proprietăţi ale unui obiect de tip Event se poate
calcula poziţia mouse-ului asupra imaginii, în momentul în care s-a efectuat un click asupra
acesteia.
Desenarea unor figuri geometrice cu ajutorul limbajului JavaScript
Librăria JavaScript Vector Graphics furnizează capabilităţi de realizare a graficii petru

JavaScript: funcţii de desenare dinamică a cercurilor, elipselor, liniilor oblice şi a poligoanelor
(de exemplu triunghiuri, dreptunghiuri). Utilizarea librăriei Vector Graphics poate poate fi
uşoară chiar şi în cazul în care un utilizator nu are experienţă în lucrul cu JavaScript. Această
librărie constă dintr-un script JavaScript numit wz_jsgraphics.js.
În limbajul HTML nu exită elemente ca linii oblice, elipse, cercuri sau alte elemente de
acest gen.
123
Funcţionalitatea acestei librării este redusă la următorele browsere Web: Gecko-
Browsers, Internet Explorer 4, 5 and 6, Opera 5, 6 şi 7+, pentru sistemul de operare
Windows.
M4.U2.9. Handlere de evenimente
Handler-ele de evenimente sunt introduse în <form> ca atribute suplimentare în tagurile

HTML. Ca valoare pentru aceste atribute, sunt date instrucţiuni JavaScript, care trebuie
executate. Handler-ele de evenimente se recunosc după numele lor. Acestea încep, de
exemplu, cu onClick.
Nr EVENTHANDLER TAG-URILE HTML PERMISE

crt
1 onAbort img
2 onBlur a, area, button, input, label, select, textarea
3 onChange Input, select, textarea
4 onClick a., abbr, acronym, address, area, b, big,
blockquote, body, button, caption, center, cite,
col, colgrouzp, dd, del, dfn, dir, div, dl, dt, em,
fieldset, form, hx, hr, I, img, input, ins, kbd,
label, legend, li, link, map, menu, noframes,
noscript, object, ol, optgroup, option, p, pre, q,
s, samp, select, small, span, strike, strong, sub,
sup, table, tbody, td, textarea, tfoot, th, thead, tr,
tt, u, ul, var
5 onDblClick Vezi onClick
6 onError img
7 onFocus a, area, button, input, label, select, textarea
8 onKeydown Vezi onClick
9 onKeypress Vezi onClick
10 onKeyup Vezi onClick
11 onLoad body, frameset
12 onMousedown Vezi onClick
13 onMousemove Vezi onClick
14 onMouseout Vezi onClick
15 onMouseout Vezi onClick
16 onMouseup Vezi onClick
17 onReset form
18 onSelect Vezi onClick
19 onSubmit form
20 onUnload frameset, body
21 javascript a , area
124
Exemplu
Să se scrie un text „ANTETUL MEU” folosindu-se culoarea

verde. Când se trece cu mouse-ul deasupra acestui cuvânt acesta să se
transforme în cuvântul ANTET! scris cu negru.
Totodată să se scrie un text în caseta care apare pe ecran, iar textul
scris să fie afişat într-o căsuţă alert, atunci când se face click în afara casetei,
pe ecran.
Soluţia este dată în figura de mai jos.
Să se realizeze un formular care să permită adăugarea datelor despre o persoană:

nume, prenume, cnp şi adresa. Formularul va avea un buton de submit. De fiecare
dată când se va apasa acest buton se va face o verificare (dacă sunt completate toate
câmpurile). În caz afirmativ, se vor scrie într-un alert() datele despre persoana care
125
tocmai a fost introdusă.
Să ne reamintim...
• Variabilele în JavaScript se declară folosind cuvântul cheie "var"
• Un eveniment este o acţiune, care apare la un moment dat şi în urma căruia
este declanşată execuţia unei anumite părţi din program.
• Pentru a calcula care sunt coordonatele X şi Y în pixeli ale cursorului, relativ la
pagina curentă, în momentul în care s-a produs un se folosesc două proprietăţi
ale luiEvent: Event.pageX şi Event.pageY.
• Librăria JavaScript Vector Graphics furnizează capabilităţi de realizare a
graficii petru JavaScript
M4.U2.10. Rezumat
JavaScript este un limbaj destul de permisiv în ceea ce priveşte scrierea de cod.

Spre exemplu, variabilele nu au un anumit tip, ele declarându-se precedate de
cuvântul cheie "var". În JavaScript însă există următoarele tipuri de date: tip şir, tip
număr întreg şi număr întreg în baza 10, 8 sau 16.
Operatorii din JavaScript sunt cei cunoscuţi din limbajele de programare:
aritmetici, logici, logici pe biţi, condiţional, de concatenare.
Instrucţiunile din JavaScript sunt: if, switch, for, while, do-while.
JavaScript este un limbaj obiect orientat. Putem astfel să creem obiecte proprii,
dar avem la dispoziţie şi o serie de obiecte prestabilite cu care putem lucra. Însăşi
întreaga structură de componente JavaScript este ierarhizată sub formă de obiecte,
toate pornind dintr-un obiect central numit document, obiect ce reprezintă pagina
web.
JavaScript este un limbaj care permite tratarea evenimentelor. De fiecare dată
când utilizatorul interacţionează cu pagina web se produce un eveniment, pe care
JavaScript îl poate interpreta şi poate produce acţiuni asociate evenimentelor.
Răspundeţi la următoarele întrebări:
1. Care sunt operatorii aritmetici utilizaţi în JavaScript? Daţi un exemplu de

utilizare a acestora.
2. Care sunt operatorii logici utilizaţi în JavaScript?
3. Care sunt operatorii relaţionali utilizaţi în JavaScript? Daţi un exemplu de
utilizare a acestora.
126
U3. Obiecte JavaScript
În limbajul JavaScript sunt multe obiecte predefinite. Acestea dispun de

proprietăţi şi metode specifice, care se pot folosi direct. în exemple sunt folosite
obiectele window şi document, împreună cu metodele lor, fără ca acestea să fie
specificate explicit.
Obiectele sunt ordonate într-o structură ierarhică, la vârful ei afându-se

obiectul window care descrie fereastra actuală a browserului. Pe treapta următoare
se află obiectul document, care descrie conţinutul paginii. Pe treapta următoare se
află obiectul form. Pe lângă aceste obiecte, există o serie de alte obiecte.
Pentru a putea folosi un obiect, trebuie ca acesta să fie mai întâi creat cu
ajutorul cuvântului cheie „new” (vezi limbajul Java). Astfel pot fi apelate ulterior
diferite proprietăţi şi metode.

• folosească obictele puse la dispoziţie de JavaScript
• declare şi să folosească propriile obiecte
• să folosească proprietăţile obiectelor
• să creeze aplicaţii utilizănd obiecte, metode şi proprietăţi din JavaScript
M4.U3.3. Obiectul window
Obiectul window corespunde ferestrei curente din browser şi cu ajutorul lui se pot afla /
modifica proprietăţile ferestrei.
Există şi posibilitatea de a deschide ferestre noi. Acesta este cel mai de sus obiect din
ierarhia obiectelor JavaScript, corespunde ferestrei curente din browserul web. Prin acest
obiect se pot afla prorietăţile ferestrei curente.
Există şi posibiltatea de a deschide ferestre noi. Aşa-numita "fereastră principală" a
browserului web se poate apela prin numele rezervate "window" sau "self".
127
Proprietăţi ale obiectului window:
Nr. PROPRIETATE ACCES

crt.
1 closed read
2 defaultStatus read, write
3 innerHeight read, write
4 innerWidth read, write
5 locationBar read
6 menuBar read
7 name read, write
8 outerHeight read, write
9 outerWidth read, write
10 pageXOffset read
11 pageYOffset read
12 personalBar read
13 scrollBar read
14 statbar read
15 status read, write
16 toolbar read
Exemplu
Două exemple de aplicaţii în JavaScript
Aplicaţie_1:
128
Aplicatie_2
Metode prin care se poate apela obiectul window:
Nr. METODA DESCRIERE

crt.
1 alert(s) Returnează Stringul s ca text într-un dialog-box.
2 blur() Face fereastra inactivă.
3 clearIntervall(p) Termină un eveniment/proces infint, inceput cu setIntervall(). p
este parametrul in care a fost salvat rezultatul din setIntervall().
4 clearTimeout(p) Termină un Timeout care a fost început cu setTimeout().p este
parametrul in care a fost salvat rezultatul din setTimeout().
5 close() Inchide fereastra.
6 confirm(s) Returnează Stringul s ca text într-un dialog-box., care este
prevazut cu butoanele de ok si cancel.
7 moveBy(x,y) Mută o fereatra in directia (x,y)-pixeli (orizontal(x) sau vertical
(y)). Un nr. negativ mută fereastra înspre stânga-sus.
8 moveTo(x,y) Mută fereastra la coordonatele x,y – pixeli.
9 open(p1,p2,p3) Deschide o nouă fereastră. Al 3-lea parametru e optional.
p1: adresa (URL) unui fişier , care se vrea deschis în fereastră.(Un
String gol deschide o fereastra goala)
p2: Numele ferestrei
p3: (optional) Date despre cum arată fereastra. Mai multe
propietăţi se despart prin virgulă
11 prompt(p1,p2) Creează un dialogbox cu 2 butoane analog metodei confirm() şi
129
un câmp de text (textfield), în care utilizatorul face propriile
remarci.
p1 e un String, care apare în dialogbox
p2 este textul acre apare prima dată în câmpul de text.
12 resizeBy(x,y) Măreşte fereastra cu x pixeli la dreapta şi cu y pixeli în jos. La
valori negative, fereastra se micşorează.
13 resizeTo(x,y) Măreşte fereastra la o marime de x pixeli în direcţie orizontală şi
cu y pixeli în direcţie verticală.
14 scrollTo(x,y) Duce (scroll) fereastra la o anumită poziţie care e dată de coord. x
şi y.
15 setIntervall(p1,p2) Rulează o instrucţiune într-un ritm dinainte dat până când e oprită
de clearIntervall()
p1: instrucţiune sau funcţie JavaScript care trebuie executată.
p2: Valoare in milisecunde, până când se execută p1.
16 setTimeout(p1,p2) Rulează o instrucţiune în funcţie de un anumit timeout.
p1: instrucţiune sau funcţie JavaScript care trebuie executată.
p2: Valoare in milisecunde, până când se execută p1.
Direct din acest obiect sunt derivate obiectele document, event, history şi location.
M4.U3.4. Obiectul location
Obiectul location ne dă adresa HTML-ului local. Când o pagină este încărcată (de
exemplu http://www.xyz.com/page.html) atunci location.href conţine adresa. Pentru
location.href îi putem atribui noi o adresă. Butonul "button" aduce o nouă pagină în fereastra
actuală (Window)
Aplicaţie:
130
M4.U3.5. Obiectul document
Acest obiect se referă la conţinutul unei ferestre dintr-un browser.

În tabelul următor sunt metodele obiectului document:
Nr. PROPRIETATE DESCRIERE ACCES

Crt
1 alinkColor culoarea unui link pe care s-a dat click read, write
2 bgColor culoarea de fundal read, write
3 cookie posibilitatea de a citi si de a scrie cookie-uri read, write
4 fgColor culoarea textului (foreground) read, write
5 lastModified data si ora ultimei modificări read
6 linkColor culoarea linkurilor care nu au fost încă vizitate read, write
7 referer adresa URL de la care a fost chemată pagina read
curentă
8 title titlul unui fisier HTML, aşa cum apare el în read
tagul <title>
9 URL adresa completa a documentului curent read
10 vlinkColor culoarea linkurilor care au fost vizitate read, write
Metode care stau la dispoziţie:

Crt.
1 close() Inchide un document care a fost deschis cu metoda open()
2 open() Deschide un document pt scriere. Nu se desschide o nouă
fereastră, documentul actula se va suprascrie
3 write(s) Scrie Stringul s în documentul actual
4 writenln(s) Analog metodei write(), doar că se trece la linie nouă
Obiecte derivate din obiectul document: all, anchors, applets, areas, embeds, forms,
images, layers, links, plugins.
Aplicaţie:
131
M4.U3.6. Obiectul forms
Acest obiect pune la dispoziţie metode şi proprietăţi care permit accesul la un formular
definit în interiorul unui fişier HTML.
Accesul la un formular se poate face prin 3 metode:
1. prin numele formularului: <form name=“FormNAME“>

Acces : document.FormNAME.reset()
2. prin indexul formularului. Primul formular primeste 0 etc.

Acces : document.forms[4].reset()
3. Prin numele formularului ca indicator al indexului. Numele se dă cu atributul name

din tagul <form>
Acces : document.forms[„FormNAME“].reset()
Proprietăţi ale obiectului form:

Crt.
1 action retine cuvântul/valoarea stabilit/ă în read, write
atributul action din tagul <form>
2 encoding retine cuvântul/valoarea stabilit/ă în read, write
atributul encoding din tagul <form>
3 length reţine nr. formularelor dintr-un fisier read
4 method retine valoarea stabilit/ă în atributul read, write
method din tagul <form>
5 name retine cuvântul/valoarea stabilit/ă în read, write
atributul name din tagul <form>
6 target reţine numele frame-ului care să devină read, write
activ după trimiterea unui formular
Metode ale obiectului form:

Crt.
1 reset() Sterge toate datele introduse într-un formular, si are aceeaşi
funcţie ca butonul care se introduce cu atributul type=reset
2 submit() Trimite un formular, si are aceeaşi funcţie ca butonul care
se introduce cu atributul type=submit
132
Exemplu
Exemplu de aplicaţie mai complexă în JavaScript
M4.U3.7. Obiectul image
Acest obiect se afla în ierarhie sub obiectul document. Se referă la proprietăţile imaginii
introduse in HTML. Aceste proprietăţi pot fi modificate în interiorul unui fişier HTML.
Obiectele image se pot apela in felul urmator:
1. Folosirea unui index. Prima imagine primeşte nr. 0.

document.images[0].src
2. Prin numele imaginii din tagul img

<img name=“BILD“ src=“t.jpg“>
document.BILD.src
133
Proprităţi ale obiectului image:

Crt.
1 Border conţine indicaţii despre margine, aşa cum se read
găsesc ele in tag-ul img
2 Complete e true atunci când imaginea e complet read
inacărcată
3 Height conţine indicaţii despre înălţimea pozei read
4 Hspace conţine indicaţii despre distanta orizonatala read
fata de obiectele din jur
5 Length retine nr. imaginilor dintr-un fişier read
6 Lowsrc reţine lowsrc asa cum e in tagul img read
7 Name reţine numele pozei asa cum e in tagul img read
8 Src reţine numele intreg al fisierului asa cum e in read
atributul src
9 Vspace conţine indicaţii despre distanta verticală fata read
de obiectele din jur
10 width conţine indicaţii despre laţimea pozei read
Pe lângă metoda handleEvent(), care este interpretată numai de Netscape

Navigatorobiectul-image conţine şi alte metode proprii.
M4.U3.8. Obiectul date
Se foloseşte pentru calcularea datei şi a orei/timpului. Un obiect "date" se poate crea în

modul următor:
<script language=“JavaScript“>
function simpleDate()
{
Date1= new Date();
Date2= new Date(YYYY,MM,DD);
Date3= new Date(“MM DD YYYY HH:mm:ss”);
Date4= new Date(YYY,MM,DD,HH,mm,ss);
}
</script>
M4.U3.9. Obiectul navigator
Acest obiect conţine informaţii despre browser şi se poate folosi pentru a adapta mai
bine scriptul fiecărui browser în parte.
Proprietăţi ale obiectului navigator:

Crt.
1 appCodeName Conţine nicknameul browserului(d.ex., read
Netscape urăşte nickname-ul “Mozilla”)
2 appName Reţine numele browserului în care read
134
rulează scriptul
3 appVersion Reţine nr. versiunii browserului în care read
rulează scriptul
4 language Conţine limbajul în care este instalat read
scriptul(doa Netscape)
5 platform Reţine numele sistemului de operare pe read
care este instalat scriptul (doar
Netscape)
6 userAgent Reţine informaţii de browser, aceleaşi read
pe care le transmite browserulul şi la o
apelare http
Obiectul navigator spune, prin metoda javaenabled(), dacă în browser este activat Java,
astfel încât să se ştie dacă se pot folosi appleturi. Dacă Java este acceptat, metoda returnează
true.
M4.U3.10. Obiectul layers (all)
Acest obiect este valabil doar pentru browsere Netscape şi conţine informaţii despre
nivelul/layer-ul care este accesibil unui fişier HTML. Nivelurile/layer-ele sunt baza
poziţionării dinamice a elementelor în pagină. Obiectul layers este sub obiectul document în
ierarhia obiectelor.
Obiectul all este accesibil numai cu browsere Explorer. Acest obiect conţine
proprietăţile şi metodele realizării acestui concept:
Apelarea layers:
1. prin index, care caracterizează straturile. Primul nivel are index 0.

document.layers[5].above
2. Referenţierrea prin numele layer-ului

<layer name=“Layer0“>
document. Layer0.above
Proprietăţi ale obiectului layers:

Crt.
1 above Conţine obiectul layer care se afla deasupra read
nivelului actual
2 background background-ul layer-ului read, write
3 bgcolor culoarea fundaluilui layer-ului read, write
4 below opusul lui above read, write
5 clip care parte/tăietură a layerului este arătată read, write
6 document Pt fiecare nivel există un obiect document, care îi read,
conţine caracteristicile
7 left Conţine poziţia colţului din stânga sus a read, write
135
layerulului (în pixeli), raportată la documentul de
deasupra.
8 length Nr. layer-elor dintr-un fişier HTML read,
9 name Numele layerului read, write
10 pageX Poziţia pe axa X a colţului din stânga sus a layer- read, write
ului, raportată la întreg documentul.
11 pageY Poziţia pe axa Y a colţului din stânga sus a layer- read, write
ului, raportată la întreg documentul.
12 parentLayer Reţune obiectul-părinte al layerului, adică read,
documentul de deasupra
13 src Conţine numele unui document extern, introdus read, write
în layer
14 top Conţine poziţia pe axa Y a colţului din stânga sus read, write
a layerulului (în pixeli), raportată la documentul
de deasupra.
15 visibility informaţii despre visibilitatea unui layer. Valori read, write
posibile: hide, show, inherit
Metode pentru obiectul layers:
Nr. METODE DESCRIERE

Crt.
1 captureEvents() Supraveghează evenimentele din layer-ul actual.
2 handleEvent() Dă mai departe evenimentul unui element care se poate ocupa de
el.
3 load(p1,p2) Incarcă un fişier extern în layer.
p1-numele fişierului
p2-lăţimea vizibila din layer (pixeli)
4 moveAbove(p1) Mută layer-ul deasupra layer-ului dat de parametrul p1.
5 moveBelow(p1) Mută layer-ul sub layer-ul dat de parametrul p1.
6 moveBy(p1,p2) Mută layerul curent cu p1 pixeli la stânga/dreapta şi cu p2 pixeli
mai sus sau mai jos.
7 moveTo(p1,p2) Mută layer-ul la o nouă poziţie dată de p1 şi p2. Aceasta este
posiţia colţului din stânga sus al layer-ului.
8 releaseEvents() Termină supravegherea de evenimente.
9 resizeBy(p1,p2) Schimbă mărimea layerului cu:
p1-mărimea în directia de pe axa x
p2-mărimea în direcţia pe axa y
10 resizeTo(p1,p2) O nouă mărime pt layer.
p1-mărimea în directia de pe axa x
p2-mărimea în direcţia pe axa y
11 routeEvent() Dă evenimentul mai departe obiectului document. De acolo
ajunge la un eventhandler care îi este subordonat.
Proprietăţi şi metode pentru obiectul all
Apelare:
1. prin numele tagului sau identificatorului tagului şi un index care conţine poziţia sa.
De exemplu: pt tagul <title>, numele este “title”. Indexul spune al câte-la tag cu acest
136
nume este referit. Primul tag are indexul 0. Fie 3 tilturi referite prin tagul <h2>.
Accesul la tagul al doilea se face astfel:
document.all.tags("h2")[1].innerText
2. prin numele dat cu atributul “name”:

<h2 name=“Title2“>TITLE 2 </h2>
document.all.Title2.innerText
Proprietăţi aleobiectului all:
Nr. PRPRIETATE DESCRIERE ACCES

Crt.
1 className Numele clasei style-sheet, careia read, write
îi aparţine un element.
2 dataFld Numele unui câmp de date. read, write
3 dataFormatrAs Tipul unui câmp de date. read, write
4 dataPageSize Numărul datapage-urilor care read, write
trebuie returnate simultan
5 dataSrc Referinţa la obiectul cu care s-a read, write
realizat conexiunea
6 id Numele unui element read,
7 innerHTML Conţinutul unui element GHtml read, write
8 innerText Conţinutul textual al unui elemnt read, write
GHtml.
9 isTextEdit true-dacă elementul este editabil, read,
false dacă nu
10 lang Limbajul elementului, atâta timp read, write
cât acesta a fost menţionat în
atributul lang.
11 language Numele limbajului script read,
12 length Nr tagurilor HTML dintr-un read,
fisier.
13 offsetHeight Inălţimea elementului în pixeli. read,
14 offsetLeft Distanţa elementului până la read
marginea stângă a ferestrei.
15 offsetParent O referinţă la obiectul părinte. read,
16 offsetTop Distanţa elementului până la read,
marginea de sus a ferestrei.
17 offsetWidth Lăţimea unui element in pixeli read
18 outerHTML Conţinutul unui tag HTML, read, write
incusiv al celor de început şi
sfârşit.
19 outerText idem innerText read, write
20 parentElement Elementul părinte al elementului read,
curent.
21 parentTextEdit Elementul următor care este read,
editabil.
22 recordNumber Numărul data page-ului arătat read,
137
23 sourceIndex Spune despre care element din read,
interiorul unui fişier HTML este
vorba în actualul
element/document???.
24 tagName Numele unui tag read,
25 title Conţinutul atributului title al read, write
elementului HTML.
Metode ale obiectului all:

Crt.
1 Click() Cauzează click-ul unui element, ca şi când acesta ar fi
fost click-enit de utilizator.
2 Contains(p1) Verifică dacă elemntul conţine şi un alt element, al cărui
nume (id) este dat de p1. Returnează true, dacă există un
astfel de element.
3 getAttribute(p1,p2) Verifică dacă există în tagul HTML un atribut dat prin
p1. p2 este pus pe true, dacă se ia în seama dacă se scrie
cu litere mari sau sau mici. Funcţia returnează valoarea
atributului sau un String gol.
4 insertAdjacentHTML(p1,p2) Introduce cod HTML suplimentar, înainte sau după
elementul HTML.
p1-poziţia unde trebuie introdus. Valori posibile:
BeforBegin, AfterBegin, BeforEnd, AfterEnd.
p2-codul care trebuie introdus.
5 insertAdjacentText(p1,p2) idem insertAjacentHTML, cu diferenţa că se introduce
text.
6 removeAttribute(p1,p2) Indepărtează un atribut dintr-un tag HTML.
p1-numele atributului în tag.
p2-true-dacă e case sensitive.
7 scrollIntoView(p1) Poziionează conţinutul astfel în fereastră, încât să poată
fi vizibil.
p1-true-dacă elementul trebuie să apară sus în fereastră.
p1-false- dacă elementul trebuie să apară jos în fereastră.
8 setAttribute(p1,p2,p3) Introduce într-un tag html un nou atribut.
p1-numele atributului.
p2-valoarea acestui atribut
p3-true-dacă e case sensitive.
Exemplu
Cod complet pentru o metodă care este apelată prin proprietăţile

browserului şi care ţine cont de elementele specifice browserelor Netscape şi
Explorer
function checkBrowser()
{
var browserName=navigator.appName;
var browserNickname=navigator.appCodeName;
138
var browserVersion=parseFloat(navigator.appVersion);
var browserInfos=navigator.userAgent;
var isNetscape=false;
var isMicrosoft=false;
window.document.write(“Browser :”+browserName);
if(browserName==”Microsoft Internet Explorer”)
{
isMicrosoft=true;}
}
if(browserName ==“Netscape“)
{
isNetscape=true;
}
if(isMicrosoft)
{
if(navigator.app.Version.indexOf(„MSIE“)!=-1)
{
versiontmp1=navigator.appVersion.indexOf(“MSIE”)+4;
Versiontmp2=versiontmp1+5;
bowserVersion=navigator.appVersion.substring(versiontmp1,
versiontmp2);
}
}
window.document.write(“<br> VERSION :”+browserVersion);

window.document.write(“<br> NICKNAME :”+browserNickname);
window.document.write(“<br> userAgent :”+browserInfos);
if(isNetscape)
{
window.document.write(“<br> NETSCAPE SPEZIFIKATION= ======:”);
window.document.write(“<br> System :”+navigator.platform);
window.document.write(“<br> Language :”+navigator.language);
window.document.write(“<br> ===”);
}
alert(“BROWSER : “+browserName+”\n”+” VERSION :”+browserVersion);

return;
}
M4.U3.11. Obiectul Math
Conţine constante şi metode pentru a putea folosi funcţii matematice.

Constante: PI ( numarul pi=3,14..), E (e=2,71..).
Metode:
abs(x): modulul
139
cos(x): cosinus
tan(x): tangnta
sin(x): sinus
acos(x): arccosinus
asin(x): arcsinus
atan(x): arctangenta
floor(x): cel mai mare întreg mai mic sau egal cu x. Ex: Math.floor(-3,73), returnează -4.
( reprezentarea unui număr real sub formă de o sumă dintre parte întreagă şi partea
fracţionară x=[x]+{x}; 0<={x}<1; -2,63= -3+0,37)
random(x): nr aleator în intervalul [0,1]
round(x): cel mai apropiat întreg de x
sqrt(x): radical din x
pow(x,y): x la puterea y
log(x): logaritm natural din x
exp(x): e la puterea x
Exemplu: Math.floor(1+100*Math.random()); va returna un nr aleator cuprins intre[1,101].
M4.U3.12. Obiectul Array
În JavaScript se pot declara numai vectori. Vectorii sunt de tip obiect. Un vector se
declară cu Array() iar elementele se acceseaza cu numeVector[indice].
Proprietăţi şi metode ale obiectului Array:

proprietatea length;
metoda sort() – sorteaza in ordine lexicograficaelementele unui tablou;
metoda reverse() – inverseaza pozitiile elementelor unui vector;
Exemplu : vv=new Array(4); vv[2]=6; alert(vv[2]);
Declararea unei matrici de 4 linii si 3 coloane se face astfel:
vv=new Array(4);
for (i=0;i<4;i++) vv[i]=new Array(3);
Fiecare element al vectorului este privit ca un vector. Putem considera astfel că

matricea este un vector de vectori (fiecare element al vectorului mare este tot un vector).
140
M4.U3.13. Obiectul String
Cu acest obiect se pot manipula şiruri de caractere.

Crearea unui string se poate face în doua moduri :
utilizand new : var a = new String (“Ana”) ;
atribuid variabilei direct sirul :a = “Ana”;
Obiectul String are propritatea length care ne indică numărul de caractere din şir.
Metode ale obiectului String:
search(s) – caută caracterul de început al şirului "s" în obiect. Dacă şirul "s" nu
există se returnează -1.
charAt(index) – returnează caracterul aflat pe poziţia index în şir;
slice (i1, i2) – returnează substring-ul cuprins între i1 inclusiv şi i2 exclusiv.
substr(i1,lung) – returnează subşirul care începe cu i1 şi are lungimea lung;
toUpperCase () – returnează şirul scris cu litere mari;
toLowerCase() - returnează şirul scris cu litere mici;
replace(sir1, sir2) – returnează şirul în care s-a înlocuit prima apariţie a lui sir1 cu
sir2;
bold() – returnează şirul scris cu bold;
italics() - returnează şirul scris cu italic;
fontcolor(“nume_culoare”) – returnează şirul scris cu "nume_culoare"
fontsize(“marime”) - returnează şirul scris cu "marime"
link(“adresa_http”) – crează o ancoră către adresa_http
Aplicaţie utilizând metode ale obiectului String:
141
Animaţii
Prin afişarea în aceeaşi poziţie a mai multor imagini, fiecare imagine "stând" un anumit
interval de timp, duce la animaţie. Există anumite funcţii predefinite şi funcţii utilizator care
rezolvă această problemă.
Funcţia setTimeout
Sintaxa :
setTimeout(“nume_functie”, nr_milisecunde)
Semantica :
nume_functie – funcţia care urmează a se executa după nr_milisecunde;
nr_milisecunde – un număr întreg de milisecunde
Funcţia clearTimeout
Sintaxa :
clearTimeout(“variabila”)
Semantica :
"variabila" conţine o valoare returnată de funcţia setTimeout. După executarea
ei, procesul se suspendă.
142
Să se realizeze o pagină web care să afişeze un ceas digital si clasic în JavaScript
M4.U3.14. Rezumat
• Obiectul window corespunde ferestrei curente din browser şi cu ajutorul lui se

pot afla / modifica proprietăţile ferestrei.
• Obiectul location ne dă adresa HTML-ului local
• Obiectul document se referă la conţinutul unei ferestre dintr-un browser
• Obiectul forms pune la dispoziţie metode şi proprietăţi care permit accesul la
un formular definit în interiorul unui fişier HTML
• Obiectul image permite accesul la metodele şi proprietăţile unei imagini
introduse in HTML
• Obiectul date se foloseşte pentru calcularea datei şi a orei
• Obiectul navigator conţine informaţii despre browser şi se poate folosi pentru a
adapta mai bine scriptul fiecărui browser în parte
• Obiectul layer este valabil doar pentru browsere Netscape şi conţine informaţii
despre nivelul/layer-ul care este accesibil unui fişier HTML
• Obiectul Math conţine constante şi metode pentru a putea folosi funcţii
matematice
• Obiectul Array oferă posibilitatea de lucru cu tablouri (vectori) in JavaScript
143
• Obiectul String permite manipularea şirurilor de caractere
1. Descrieţi sintaxa obiectului Navigator.
2. Daţi un exemplu de utilizare a obictului Form.
3. Descrieţi sintaxa obiectului Array.
4. Daţi exemple de metode pentru obiectul Math.
5. Daţi un exemplu de utilizare a obiectului image.
144
U4. Aplicaţii complexe în JavaScript
Pentru a se fixa mai bine lucrul cu JavaScript prezentat în unităţile de

învăţare din acest modul, unitatea de învăţare curentă îşi propune exemplificarea
acestora.
Astfel se poate vedea în mod concret modul de utilizare al diferitelor tipuri

instrucţiuni şi obiecte JavaScript.
Astfel, exemplele care vor fi oferite în această unitate vor servi studentului ca
un plus de claritate şi ca un model pentru aplicaţiile pe care le va avea de realizat
ca şi temă.
Această unitate de învăţare îşi propune clarificarea scrierii de scripturi

JavaScript.
La sfârşitul acestei unităţi de învăţare studenţii vor putea:
• să folosească instrucţiunile limbajului JavaScript
• să folosească obiectele limbajului JavaScript
• să creeze funcţii JavaScript
• să integreze codul JavaScipt în pagina HTML
145
M4.U4.3. Învăţarea JavaScript prin exemple
Aplicaţia_1
146
Codul sursă pentru Aplicaţia_1 de mai sus:
<html>
<head>
<script language="JavaScript">
function suma()
{
a=parseInt(document.form1.inputa.value);
b=parseInt(document.form1.inputb.value);
document.form1.s.value=a+b;
}
function diferenta()
{
document.form1.d.value=a-b;
}
function produs()
{
document.form1.p.value=a*b;
}
function cat_rest()
{
document.form1.c.value=Math.floor(a/b);
document.form1.r.value=a % b;
}
function calc_invers()
{
n=parseInt(document.form2.input.value);
cifra=0;inv=0;
while(n!=0)
{
cifra=n % 10;
n=(n-cifra)/10;
inv=inv*10+cifra;
}
document.form2.invers.value=inv;
}
function test()
{
cifra=0;inv=0; n_init=n;
while(n!=0)
{
cifra=n % 10;
n=(n-cifra)/10;
147
inv=inv*10+cifra;
}
if (n_init==inv)
document.form2.palindrom.value="da"
else
document.form2.palindrom.value="nu";
}
function transf_dinbaza10()
{
b=parseInt(document.form3.baza.value);
i=0; a="";
var sir=new Array();
do
{
cifra = n%b;
if (cifra>9)
{
switch (cifra)
{
case 10: cifra='A';break;
case 11: cifra='B';break;
case 12: cifra='C';break;
case 13: cifra='D';break;
case 14: cifra='E';break;
case 15: cifra='F';break;
}
}
sir[i] = cifra;
i++;
n=Math.floor(n/b);
}
while(n);
for (j=i-1;j>=0;j--)
a= a+sir[j];
document.form3.transf.value=a;
}
function calc_modulul()
{
a = document.form4.re.value;
b = document.form4.img.value;
z1 = new Object();
z1.real = parseInt(a);
z1.imaginar = parseInt(b);
modul=Math.sqrt(z1.real*z1.real+z1.imaginar*z1.imaginar);
document.form4.modul.value=modul;
}
function inlocuire_litera()
{
sir = document.form5.input.value;
148
sir = sir.replace(/u/g,"a");
document.form5.output.value=sir;
}
function sortare_alfabetica()
{
sir = document.form6.input.value;
var a=new Array();
var i,k=0,alfabetic="";
for(i=0;i<sir.length;i++)
{
a[k]=sir.charAt(i);
k++;
}
a.sort();
for(i=0;i<k;i++)
alfabetic=alfabetic+a[i];
document.form6.output.value=alfabetic;
}
</script>
</head>
<body>
<ul>
<li>
<i>Suma, diferenta, produsul, si catul a doua numere <b>a</b> si <b>b</b></i>
<br>
<form name="form1">
a: <input type="text" name="inputa" size="14"> <br>
b: <input type="text" name="inputb" size="14"> <br>
Suma: <input type="text" name="s" size="14"> <input type="button"
value="Aduna" onClick="suma()"> <br>
Diferenta: <input type="text" name="d" size="14"><input type="button"
value="Scade" onClick="diferenta()"> <br>
Produsul: <input type="text" name="p" size="14"><input type="button"
value="Inmulteste" onClick="produs()"> <br>
Catul : <input type="text" name="c" size="14"> <input type="button"
value="Imparte" onClick="cat_rest()"> <br>
Restul: <input type="text" name="r" size="14"> <br>
</form>
</li>
<li>
<i>Inversul unui numar si se testarea daca este palindrom</i>
<form name="form2">
Numarul: <input type="text" name="input" size="14"><br>
Inversul: <input type="text" name="invers" size="14">
<input type="button" value="Calculeaza" onClick="calc_invers()"><br>
Palindrom? <input type="text" name="palindrom" size="14">
<input type="button" value="Testeaza" onClick="test()"><br>
</form>
</li>
149
<li>
<i> Transformare din baza 10 in baza 2, 8 sau 16</b></i>
<form name="form3">
Numarul: <input type="text" name="input" size="14"><br>
Baza: <input type="text" name="baza" size="14"><input type="button"
value="Calculeaza" onClick="transf_dinbaza10()"><br>
Numarul este: <input type="text" name="transf" size="14"><br>
</form>
</li>
<li>
<i> Modulul unui numar complex</i><br>
<form name="form4">
z1: <input type="text" name="re" size="14"><input type="text"
name="img" size="14">
<input type="button" value="Calculeaza" onClick="calc_modulul()"><br>
Modulul: <input type="text" name="modul" size="14"><br>
</form>
</li>
<li>
<i> Inlocuirea literei "u" cu litera "a" intr-un sir de caractere</i><br>
<form name="form5">
Sirul: <input type="text" name="input" size="14"><input type="button"
value="Inlocuieste" onClick="inlocuire_litera()"> <br>
Dupa inlocuire: <input type="text" name="output" size="14"><br>
</form>
</li>
<li>
<i> Ordonarea alfabetica a unui cuvant </i> <br>
<form name="form6">
Sirul: <input type="text" name="input" size="14"><input type="button"
value="Sorteaza" onClick="sortare_alfabetica()"><br>
Alfabetic: <input type="text" name="output" size="14"><br>
</form>
</li>
</ul>
</body>
</html>
Să se creeze un formular care să conţină 2 câmpuri de text care să permită

introducerea numărului de linii şi de coloane al unui tabel. În funcţie de numerele
introduse, la click pe butonul Submit, va apărea pe pagină un tabel cu numărul de
linii şi de coloane indicat.
150
Aplicaţia_2
Realizarea unui minicalculator de buzunar cu JavaScript
Codul sursă pentru Aplicaţia_2:
<html>
<head>
var str="", operator="",str2="";
function input(val)
{
if(str.length<10)
str=str+val;
document.form1.text1.value=str;
}
function add()
{
if (operator=="")
{
str2=document.form1.text1.value;
str="";
operator="+";
}
}
function sub()
{
if (operator=="")
{
str="";
operator="-";
}
}
151
function mult()
{
if (operator=="")
{
str="";
operator="*";
}
}
function div()
{
if (operator=="")
{
str="";
operator="/";
}
}
function resolve()
{
var rez=0;
switch (operator)
{
case "+":
rez = (str2*1) + (str*1) ;
document.form1.text1.value = rez;
break;
case "-":
rez = (str2*1) - (str*1);
break;
case "*":
rez = (str2*1) * (str*1);
break;
case "/":
rez = (str2*1) / (str*1);
break;
}
operator=""; str=""; str2="";
}
function clearall()
{
document.form1.text1.value="";
str=""; str2=""; operator="";
}
</script>
152
</head>
<body>
<br><br><br><br>
<center>
<table border="1" bgcolor="lightblue">
<form name="form1">
<tr>
<td>
<input type="text" name="text1" style="color:navy;font-weight: bold"
size="20">
</td>
</tr>
<tr>
<td>

</td>
</tr>
</table>
<table border="3" bgcolor="lightblue">
<tr>
<td align="center">
<input type="button" value=" 1 " style="color:navy;font-weight: bold"
onClick="input(1)">
onClick="input(2)">
onClick="input(3)">
<input type="button" value=" + " style="color:navy;font-weight: bold"
onClick="add()">
</td>
</tr>
<tr>
<td align="center">
onClick="input(4)">
onClick="input(5)">
onClick="input(6)">
<input type="button" value=" - " style="color:navy;font-weight: bold"
onClick="sub()">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value=" 7 " style="color:navy;font-weight:
bold" onClick="input(7)">
153
<input type="button" value=" * " style="color:navy;font-weight:
bold" onClick="mult()">
</td>
</tr>
<tr>
<td align="center">
<input type="button" value=" C " style="color:navy;font-weight:
bold" onClick="clearall()">
<input type="button" value=" = " style="color:navy;font-weight:
bold" onClick="resolve()">
<input type="button" value=" / " style="color:navy;font-weight:
bold" onClick="div()">
</td>
</tr>
</form>
</table>
</body>
</html>
Aplicaţia_3
Să se introducă într-un element al unui formular o valoare şi apăsând pe tasta OK15% să
se calculeze 15% din acea valoare.
154
Aplicaţia_4
Operaţii cu numere complexe şi afişarea unor rezultate în caseta de alert. Pentru aceasta
se vor introduce două numere complexe de forma z1 = a+b*i şi z2 = b+a*i într-un formular.
Codul sursa pentru Aplicaţia_4:
<html>
<head>
function complex(x,y)
{
this.real=x;
this.img=y;
this.adun=add;
this.inmultire=mult;
this.impartire=div;
}
z=new complex(0,0);
function getDataR(a)
{
z.real=parseInt(a);
alert("z.real = "+z.real);
document.f1.rez1.value=a;
return;
}
function getDataI(b)
{
155
z.img=b;
alert("z.img = "+z.img)
document.f1.rez2.value=b;
return;
}
function add(z)
{
t=new complex(0,0);
t.real=eval(this.real)+eval(z.real);
t.img=eval(this.img)+eval(z.img);
alert("t.real add= "+eval(t.real));
return t;
}
function mult(z)
{
t=new complex(0,0);
t.real=eval(this.real)*eval(z.real)-eval(this.img)*eval(z.img);
t.img=eval(this.real)*eval(z.img)+eval(this.img)*eval(z.real);
alert(" REZULTAT INTERMEDIAR t.real mul= "+eval(t.real));
return t;
}
function div(z)
{
t=new complex(0,0);
t.real=(eval(this.real)*eval(z.real)+eval(this.img)*eval(z.img))/(z.real^2-z.img^2);
t.img=(eval(this.real)*eval(z.img)-eval(this.img)*eval(z.real))/(z.real^2-z.img^2);
alert(" REZULTAT INTERMEDIAR t.real div= "+eval(t.real));
return t;
}
function calcul(a,b)
{
z3A=new complex(0,0);
z3I=new complex(0,0);
z3D=new complex(0,0);
z1=new complex(a,b);alert("data complexa z1= "+z1.real+" + "+z1.img+"i");
z2=new complex(b,a);alert("data complexa z2 ="+z2.real+" + "+z2.img+"i");
z3A=z2.adun(z1)
alert("ADUNARE ="+z3A.real+"+"+z3A.img+"i");
z3I=z2.inmultire(z1);
alert("INMULTIRE ="+z3I.real+" +"+z3I.img+"i");
z3D=z2.impartire(z1);
alert("IMPARTIRE ="+z3D.real+" + "+z3D.img+"i");
}
</script>
</head>
<body>
<form name="f1">
Real(z) :<input type ="text" name="Input1" value="0"> &nbsp &nbsp
Imaginar(z):<input type ="text" name="Input2" value="0"><br>
156
<input type="button" value="OK-REAL"
onClick="getDataR(document.f1.Input1.value)">
&nbsp &nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp
&nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp
&nbsp
<input type="button" value="OK-Imaginar"
onClick="getDataI(document.f1.Input2.value)"><br>
Afisez Real(z):<input type="text" name="rez1">&nbsp &nbsp
Afisez Imaginar(z):<input type="text" name="rez2"><br><br><br><br>
<input type="button" value="OK - alert( )"
onClick="calcul(document.f1.Input1.value,document.f1.Input2.value)">
</form>
</body>
</html>
Aplicaţia_5
Să se scrie un text care îşi schimbă culoarea. Să se insereze şi o imagine, iar atunci când
mouse-ul rămâne pe imaginea de pe display, aceasta se măreşte până când mouse-ul este luat
de pe imagine.
157
Codul sursă pentru Aplicaţia_5
<html>
<head>
<style>
#Titlu
{
color:rgb(130,12,113);
font-size:40;
}
</style>
var t=0,inalt=0, latime=0;
function move()
{ if(t==0)
{
latime=foto.width;
inalt=foto.height;
t=1;
}
foto.width++;
foto.height++;
}
function out()
{
t=0;
foto.width=latime;
foto.height=inalt;
}
i=255;
tt=0;
function lumina()
{
do
{
i--;
Titlu.style.color=255*256*256+i*256*i;
tt=setTimeout("lumina()",100);
if(i==0) clearTimeout(tt);
} while(i>0)
}
</script>
</head>
<body onload="lumina()">
<img id="foto" src="t1.jpg" onmouseout="out()" onmousemove="move()" width="80"
height="80">
<h1 id="Titlu"> ID - INVATAMANT LA DISTANTA </h1>
<br><br>
</body>
</html>
158
Să se realizeze un "menu-bar" în JavaScript. Bara de meniuri pe care o veţi
realiza va avea 5 meniuri, fiecare cu câte cel puţin 3 submeniuri
Să se realizeze o funcţie Java Script pentru detectarea browserului vizitatorului

unui site.
Temă de control
1. Sӑ se realizeze un calculator cu funcţii matematice specifice;

2. Sӑ se realize un album cu poze.
159
Modulul V Alte tehnologii pentru realizarea paginilor web
Introducere
În acest modul sunt aduse în discuţie şi alte limbaje cu ajutorul cărora

paginile web pot deveni mai atractive, mai uşor şi mai interesant de realizat. E
prezentată astfel o scurtă introducere în limbajul PHP, limbaj orientat pe server,
care permite realizatorului site-ului să creeze pagini interactive.
Pe lângă PHP se va mai crea şi o scurtă prezentare a limbajului MXML.

Acesta pune la dispoziţie doverse controale care pot face mult mai la îndemână
scrierea codului pentru un site.
Cel de-al treilea limbaj prezentat va fi VRML. Acesta permite modelarea

lumii virtuale prin introducerea de obiecte 3D ce pot fi integrate în paginile web.
Competenţe
Acest modul are ca obiectiv introducerea unor noi limbaje care să ajute
studentul în realizarea unor aplicaţii web mai performante.
• înţeleagă utilitatea şi importanţa limbajului PHP
• creeze propriile scripturi PHP
• intercaleze codul PHP în codul HTML

• înţeleagă utilitatea şi importanţa limbajului MXML
• înţeleagă şi să urmeze paşii necesari realizării unei aplicaţii în Flex3

• introducă diverse componente MXML într-o pagină web
• înţeleagă utilitatea şi importanţa limbajului VRML

• realizeze aplicaţii utilizând limbajul VRML
160
U1. Limbajul PHP
PHP a fost conceput în anul 1994 şi a fost iniţial munca unui singur om,
Rasmus Lerdorf. În octombrie 2002, era folosit în mai mult de nouă milioane de
domenii din lumea întreagă. PHP este un produs Open Source, cu acces la codul
sursă.Îl putem folosi, modifica şi redistribui, toate acestea în mod gratuit.
PHP a fost iniţial acronimul de la Personal Home Page.
Limbajul PHP se aseamană mult cu limbajul C++ sau Java. Este un limbaj de
scriptare care se utilizează pe partea de server. Când scriem un script în PHP vom
rula direct de pe server. Există însă posibilitatea de a testa pe propriul calculator,
acest lucru necesită instalări speciale. Codul PHP este interpretat de serverul web
şi generează un cod HTML care va fi văzut de uilizator (clientului - browserului -
fiindu-i transmis numai cod interpretat ca şi HTML).

• instaleze şi să configureze WinLAMP pentru PHP
• creeze propria pagină cu extensia php
• înţeleagă modul de transmitere a datelor la server şi înterpretarea codului
de retur de către browser
• înglobeze codul PHP în codul HTML
M5.U1.3. Primii paşi în PHP
Pentru a putea lucra cu PHP avem nevoie de serverul Apache. Dacă dorim să lucrăm şi
cu baze de date vom avea nevoie şi de serverul MySql.
Există programe care instalează automat aceste servere, de exemplu WinLAMP sau
XAMPP care se pot descarca de pe Internet.
În continuare este prezentat modul în care edităm fişierul de configurare al PHP-ului, şi
anume php.ini.
161
Deschidem Edit php.ini şi efectuăm modificările următoare:
1. display_errors=Off se schimbă în display_errors=On

2. activaţi extensiile de care avem nevoie ştergând punct şi virgulă ; din faţa extensiei
astfel:
• ;extension=php_gd2.dll devine extension=php_gd2.dll (fără ;)
• ;extension=php_mbstring.dll devine extension=php_mbstring.dll (fără ;)
• ;extension=php_mime_magic.dll devine
extension=php_mime_magic.dll(fără ;)
• ;extension=php_mysql.dll devine extension=php_mysql.dll(fără ;)
3. register_globals = off devine register_globals = on (se schimba off in on)
Prin lansarea în execuţie a lui winLamp se crează server-ul cu numele “localhost”.

Numai din acest server se pot lansa fişerele php sau fişiere html ce conţin secvenţe de cod
php. În directorul C: se crează un director cu numele Apache2. În acest director se află
subdirectorul htdocs unde se vor stoca toate fisierele cu extensia php sau html. Acesta este
localhost-ul nostru.
Pentru a putea vedea configuraţia php, realizăm un fişier cu numele my.php, în care
punem codul:
<?php
phpinfo();
?>
Lansăm fişierul din browser astfel: http://localhost/my.php
Pe ecran se va afişa următoarea pagină:
162
M5.U1.4. Noţiuni indroductive de sintaxă
Orice script PHP se încadrează între marcajele

<?
?>
sau
<?php
?>
De prefarat se va folosi varianta a doua deoarece în mod implicit nu recunosc toate

browserele prima variantă.
Tipărirea pe display se poate face în două moduri şi anume folosind:
1. sintagma echo "TEXT";
2. functia printf("TEXT");
163
Script-ul PHP poate fi introdus într-un fişier html sau se poate crea un fişier direct cu
extensia php.
Observaţii:
1. Orice variabilă în PHP începe cu semnul $.
2. Constantele se introduc cu funcţia define(nume_constanta, valoare_constanta);
3. Operatorul de concatenare pentru şiruri este punctul (.), spre deosebire de limbajele
de programare unde concatenarea de şiruri se face cu semnul "+";
4. Operatorii PHP sunt la fel ca şi cei din limbajul JavaScript, Java sau C++;
5. Instrucţiunile PHP sunt la fel ca şi cele din limbajul JavaScript, Java sau C++;
6. Redirecţionarea cătreo altă pagină se face cu ajutorul atributului action din tag-ul
form (vom avea <form action="pagina2.php">).
7. Modul de transmitere a datelor la server se face cu ajutorul atributului method al tag-
ului form care poate lua două valori: get sau post. (vom scrie <form action="post">
sau <form action="get">). Transmiterea făcută cu get se face prin URL şi este mai
restrictivă ca şi dimensiune. Transmiterea făcută cu post se face via HTTP şi nu are
restricţie de dimensiune a datelor transmise.
Funcţii matematice
Ca şi în celelate limbaje există o serie de funcţii matematice. Enumerăm câteva dintre

acestea:
• abs(numar) – returnează modulul numărului
• sin(x), cos(x), tan(x) – argumentul x este în radiani
• pow(x,y) – returneaza xy cu observaţia că x trebuie să fie un număr real pozitiv
• log10(x), log(x) – returnează logaritm în baza 10, respectiv logaritm în baza e
din x
• max(x1, x2,…,xn), min(x1, x2, x3….xn) – returnează maximul, respectiv
minimul dintr-un şir de numere;
• ceil(x) – returnează cel mai mare întreg mai mare sau egal cu x
• round(x) – returnează întregul rezultat prin rotunjirea lui x
• floor(x) – returnează cel mai mare număr întreg, mai mic sau egal cu x
• rand(min, max) – returnează o valoare aleatoare între valorile întregi min şi max
• pi() – returnează valoarea numărului pi;
• sqrt() – returnează rădăcina pătrată a lui x
Funcţii pentru prelucrarea şirurilor de caractere
Ca şi în celelate limbaje există o serie de funcţii pentru prelucrarea şirurilor. Enumerăm

câteva dintre acestea:
• strlen(sir) – returnează lungimea şirului;
164
• strops(sir1, sir2, [poz_start]) – verifică dacă sir1 este subşir al lui sir2. Dacă da,
afişează poziţia de început a acestuia. [poz_start] este opţional şi verifică de unde
să înceapă căutarea; implicit [poz_start] are valoarea zero;
• strstr([sir1, sir2]) – returnează sir1 începând cu poziţia în care a fost găsit sir2;
• strcmp(sir1, sir2) – compară lexicografic (alfabetic) sir1 cu sir2 şi returnează
valoarea zero dacă sir1=sir2, returnează o valoare mai mare ca zero dacă
sir1>sir2 şi returnează o valoarea mai mică decât zero dacă sir1<sir2
Vectori în PHP
În PHP vectorii sunt de trei tipuri:

• indexaţi - care conţin indici numerici
• asociativi - perechi de tipul cheie=>valoare
• multidimensionali - vectori ce conţin tot vectori în fiecare celulă
Exemplu
Exemple de declarare şi utilizare a vectorilor:
<?php
$flori=array("garoafa","trandafir","lalea");
echo "Imi plac " . $flori[0] . ", " . $flori[1] . " si " .
$flori[2];
?>
<?php
$pret=array("garoafa"=>"2","trandafir"=>"7","lalea"=>"5");
echo "Trandafirul costa " . $pret['trandafir'] . " RON";
?>
Instrucţiuni şi funcţii pentru lucrul cu vectori
• instrucţiunea foreach(n_vector as n_indice=>n_variabila) – permite

parcurgerea unui vector cu numele n_vector, cu variabila de ciclare n_indice, în
care citirea se face în variabilă n_variabila.
• funcţia current(vector) – returnează valoarea reţinută de elementul din vector
asupra căruia se găseşte pointer-ul;
• functia key(vector) – returnează indicele elementului din vector asupra căruia se
găseşte pointer-ul;
• funcţia next(vector) – deplasează pointer-ul pe elementul următor din vector şi
returnează valoarea reţinută de acesta;
• funcţia prev(vector) – deplasează pointer-ul pe elementul anterior al vectorului
şi returnează valoarea reţinută de acesta;
165
Să se realizeze un formular în PHP care să conţină două câmpuri pentru
introducerea a două numere şi un buton "Calculează". După ce au fost introduse
şi validate numerele se va da click pe buton care ne va redirecţiona către o nouă
pagină pe care vom avea afişate: suma numerelor, diferenţa lor, produsul, câtul şi
minimul dintre cele două numere.
M5.U1.5. Aplicaţii complexe utilizând limbajele PHP, HTML şi JavaScript
Aplicaţia_1
166
Codul sursă pentru Aplicaţia_1:
<html>
<body>
SALUT <br><br>
<?php
echo"test test test REZULTAT ";
$a=3;
$b=6;
$rezultat=$a+$b;
echo ("<br> rezultat=".$rezultat."<br>");
echo ($rezultat."<br>");
$nume="informatica";
echo ($nume);
?>
<br><b><font color="red">DEFINIREA DE CONSTANTE CU FUNCTIA
DEFINE</font></b>
<br>
<?php
define("const1", 3.675);
echo ("const1 = ".const1) ;
?>
<br><br> <font color="green"> SIR CARACTERE </font><br>
<?php
$x=5;
echo (" x = ".$x."<br>");
$y="SIRUL MEU <bR>";
echo strlen($y);
echo "<br><br> POZITIE ME =";
echo (strpos($y,"ME"));
echo "<br> COMPARARE <br>";
echo strcmp("mama","mama");
$x=$y;
echo (" <br>x = ".$x."<br>");
echo (" y = ".$y);
echo "<br><br> CARACTERE MICI =";
echo strtolower($y);
?>
<br><br><font color="green"> CONVERSII </font><br>
<?php
$y=11.7;
echo (" y = ".$y."<br>");
$x=(int) $y;
echo (" x = ".$x."<br>");
?>
<br> <font color="red"> FACTORIAL</font><br>
<?php
function fact($n)
167
{
if ($n==0)
return 1;
else
return $n*fact($n-1);
}
echo ("FACT(7)=".fact(7)."<br>");
print ("FACT3= ".fact(3));
$a=65;
$b=78;
print (" <br>a =".$a." <br> b=".$b);
?>
</body>
</html>
Aplicaţia_2: Aplicaţia este formată din două fişiere :

1. formular.html
2. formular.php
Execuţia şi codul celor două fişere sunt prezentate mai jos:
168
Aplicaţia_3 : Validarea câmpului Nume:
169
Să se realizeze un formular în PHP care să conţină două câmpuri pentru
introducerea numelui şi vârstei unei persoane, un buton "Adaugă" şi un buton
"Trimite". După ce se vor completa câmpurile de nume şi vârstă, utilizatorul va
da click pe butonul "Adaugă" şi va adăuga acea persoană într-un vector asociativ.
Operaţia de introducere a persoanelor şi de adăugare se poate repeta succesiv de
câteva ori astfel încât să avem cel puţin 5 prsoane adăugate în vector.
După ce au fost adăugate persoanele se va da click pe "Trimite" care va
permite afişarea persoanei cu vârsta cea mai mare.
M5.U1.6. Rezumat
PHP este un limbaj open source, a cărui sintaxă seamănă cu cea a limbajelor
de programare precum Java sau C++.
Deoarece PHP este un limbaj de scriptare bazat pe server, pentru a lucra cu
acesta avem nevoie de un server web (Apache). Dacă dorim să realizăm site-uri mai
complexe putem opta pentru stocarea datelor într-o bază de date. Pentru a lucra cu
aceasta avem nevoie şi de un server de baze de date (MySql).
Avem două posibilităţi de transmitere a datelor la server: prin GET sau prin
POST. Acestea reprezintă cele douăvalori pe care le poate lua atributul method al
tag-ului form.
170
1. Care este sintaxa unui script PHP?

2. Care este sintaxa instrucţiunii foreach din limbajul PHP? Daţi un exemplu de
utilizare a acestei instrucţiuni.
3. Precizaţi câteva funcţii matematice utilizate în PHP.
4. Care este sintaxa instrucţiunii abs din limbajul PHP?
5. Care este sintaxa instrucţiunii pow din limbajul PHP?
171
U2. Flex3
Adobe Flex este un instrument pentru dezvoltarera aplicaţiilor Internet, care

sunt indicate sub denumirea de RIA (Rich Internet Applications). Aplicaţiile
realizate cu Flex au următoarele avantaje:
- scalabilitate
- independenţă faţă de orice sistem de operare
- rulează cu orice Browser.
În realizarea unei aplicaţii Flex se poate folosi mediul de dezvoltare Flex

Builder sau Flex SDK, acesta din urmă fiind gratuit. Framework-ul Flex se
bazează pe o sintaxă XML proprie şi pe limbajul ActionScript3. In realizarea
aplicaţiilor Flex sunt necesare cunoştiinţe de bază în ceea ce priveşte tehnologiile
(X)HTML , reguli CSS şi noţiuni de programare.
O aplicaţie Flex se realizează cu ajutorul unor compononte existente care se

pot configura cu ajutorul limbajului de marcare MXML. Aceste componente
reacţionează la anumite evenimente şi funcţii. Componente sunt realizate cu
ajutorul limbajului de scriptare ActionScript.
• înţeleagă modul de lucru folosind Flex3

• parcurgă paşii necesari în realizarea unei aplicaţii
• scrie aplicaţii folosind limbajul MXML

• compileze şi să execute codul MXML
• introducă în mod corect în aplicaţiile proprii diferite componente MXML
172
M5.U2.3. Elemente de bază ale lui Adobe Flex3
Dezvoltatorii de aplicaţii Web doresc toţi acelaşi lucru : pagina web realizată de aceştia
să fie vizitată de foarte mulţi clenţi. Acest lucru presupune ca această aplicaţie să ruleze cu
orice sistem de operare şi in orice Browser. Aici intervine Adobe Flex Framework, aplicaţiile
realizate în Flex rulează în Adobe Flash Player, care poate fi un Stand-alone-Player sau ca şi
Plugin încorporat într-un browser. Flash Player-ul oferă următoarele avantaje:
- apare cu mai multe versiuni
- este realizate pentru mai multe sisteme de operare
- garantează executarea aplicaţiei identic pe orice PC
- există şi pentru telefoane mobile, Smartphones un Flash Player propriu.
Domeniile de aplicaţii în Internet în care se poate folosi Flex sunt următoarele:

- Onlineshops
- Personalizarea unui produs
- Vizualizare de informaţii
- Aplicaţii eBusiness
- Media Player
- Instrumente
- Combinaţii
- Aplicaţii Desktop.
Flex-Framework conţine o mulţime de componente care se bazează pe ActionScript3.

Aceste componente sunt clase scrise în ActionScript3 şi care au anumite proprităţi.
Programatorii care cunosc structura tag-urilor în HTML şi XML vor înţelege modul de
realizare a unei aplicaţii Flex cu ajutorul limbajului de marcare MXML.
Componentele existente pot fi extinse atât din punct de vedere funcţional cât şi optic.
Există patru tipuri diferite de componente:
Controls
Componentele Controls se folosesc pentru realizarea de conţinut şi pentru
interacţiunea utilizatorului cu aplicaţia
Layout
Aceste componente au un rol important în rederarea aplicaţiei Flex
Navigators
Asigură navigarea între diverse conţinuturi
Charts
Aceste componente asigură reprezentarea vizuală a nor informaţii (de exemplu :
diagrame )
173
Etapele de parcurs în realizarea unei aplicaţii Flex
O aplicaţie Flex se realizează în limbajul MXML şi conţine funcţionalităţi introduse prin

ActionScript3.
După ce s-a scris aplicaţia cu ajutorul unui editor, aceasta se compilează şi se traduce
intr-un cod binar cu extensia SWF, care va fi vizualizată de către Flash-Player.
Aplicaţia Flex realizată se poate compila în două moduri cu :

- Flex Builder
- Adobe Flex SDK (compilarea se face manual din fereastra MS-DOS).
Etapele în realizarea unei aplicaţii Flex cu SDK
1. Se scrie codul sursă al aplicaţiei în fereastra MS-DOS cu ajutrorul editorului edit şi

cu extensia mxml;
2. Se compilează codul cu mxmlc, în urma compilării se obţine fişierul cu extensia swf
3. Fişierul rezultat se poate vizualiza cu orice Browser (cu Plugin FlashPlayer9)
Exemplu
Realizarea unui formular format din două câmpuri de editare, un

checkbox şi 4 butoane radio. Etapele de parcurs pentru realizarea formularului:
• se scrie codul sursa cu edit de sub MS DOS şi se compilează cu mxmlc (conform primei
imagini de mai jos);
• se execută aplicaţia cu estensia swf într-un browser, care are flash player (conform celei
de-a doua imagini de mai jos);
174
Formularul rezultat în urma compilării codului de mai sus este cel imediat următor:
175
M5.U2.4. Limbajul MXML
Limbajul de marcare MXML se bazează pe standardul Web ECMA4 şi a fost iniţial

dezvoltat de către Macromedia în martie 2004. Acest limbaj se aseamănă cu limbajul XML.
Într-un tag MXML se află foarte multe componente care vor stabili aspectul aplicaţiei.
Fiind un dialect al limbajului XML (eXtensible Markup Language- limbaj care permie
structurarea datelor)se vor respecta regulile de bază şi anume:
- fiecare tag trebuie închis;

- se aplică şi celelate reguli XML.
Fiecare componentă (tag) din MXML are aceeaşi structură:
- tag-ul se în cadrează între semnele <................./> .

- primele două linii sunt obligatorii:
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
- se declară numele tag-ului care se doreşte a se utiliza şi care se va adresa clasei

corespunzătoare din ActionScript3 pentru a crea componenta (forma ) dorită
- se modifică prorietăţile şi metodele disponibile folosind atribute:
<mx:nume_tag [proprietăţi metode]/>
Exemplu
Sunt propuse două aplicaţii care să evidenţieze lucrul cu MXML.
Aplicaţia_1: Realizarea unui buton care are eticheta butonul meu

<mx:Button label="Butonul MEU" id="buton_nou"/>
176
Aplicaţia_2: Realizarea unui editor de text
<mx:RichTextEditor id="rte" width="75%" height="75%" />
Conţinutul unei componente
Într-o componentă se poate descrie un conţinut care urmează a fi asfişat. Descrierea

conţinutului se va face conform următoarei sintaxe:
<mx:nume_tag...>
Conţinut
</mx nume_tag>
Exemplu
Să se realizeze două panele cu denumirea Panel_1 respectiv Panel_2.

În Panel_1să se afle un buton pe care stă scris CLICK..... Dacă se apasă
butonul, să apară un mesaj de alert cu mesajul HALLO CLICK????!
În imaginile de mai jos sunt prezentate atât codul sursă cât şi rezultatul în urma
compilării acestuia.

<mx:Panel title="Panel_1" width="250" height="200" x="20" y="20"
cornerRadius="20">
<mx:Button id="dem1" label="CLICK......" click="mx.controls.Alert.show('HALLO ..
CLICK????!')" x="30" y="60"/>
</mx:Panel>
<mx:Panel title="Panel_2" width="250" height="200" x="270" y="20" cornerRadius="0"/>
</mx:Application>
177
Parametrul id
Fiecare tag poate primi un identificator care este dat prin parametrul id=”nume”.
M5.U2.5. ActionScript3
Codul ActionScript3 poate fi înglobat într-un fişier mxml în patru moduri, astfel:
1. în interiorul unui tag mxml (inline).
<mx:Button label="Panel_01" click="Alert.show('Click pe buton....')"/>
2. într-un bloc script într-un tag mxml
<mx:Button label=“panel_01“>
<mx:click>
<![CDATA[
Alert.show('Butonul a fost apasat');
Valoarestart=0;
play();
]]>
</mx:clik>
3. într-un tag <script>, dacă dorim să descriem anumite acţiuni, care să fie valabile
pentru toată aplicaţia, atunci folosim aceast mod de descriere
4. într-un fişier ActionScript extern, fişierele externe au extensia .as
178
Comenzi ActionScript în tag-ul MXML
Într-un tag parametrul click reprezintă Event-Handler-ul corespunzător care eliberează o

acţiune când componenta este acţionată.
Data Binding
O altă formă inline de a îngloba instrucţiunile ActionScript3 este aşa numita Data
Binding.
Prin Data Binding pot să realizez legătura între două componente, avatajul acestui
procedeu este de a transmite valori în timp real fără o confirmare printr-un buton sau printr-o
nouă pagină.
Principiul de lucru este următorul: proprietatea unei componente este folosită ca şi sursă
şi va fi transmisă, ca şi valoare adecvată, unei a doua componente.
Exemplu
Să se transmită în timp real textul din primul panel în cel de-al doilea. În figurile
următoare se pot vedea textul sursă şi rezultatul în urma compilării acestuia.

cornerRadius="20">
CLICK????!')" x="30" y="60"/>
<mx:TextInput id="Exemplu"/>
</mx:Panel>
cornerRadius="0">
<mx:Text id="Output" text="{Exemplu.text}"/>
</mx:Panel>
</mx:Application>
179
Observaţie:
După cum se poate vedea, pentru a transmite aplicaţiei mesajul că este vorba despre
conţinut dinamic, care se va transmite în timpul executiei aplicaţiei, containerul se va pune în
acolade în acest caz este {Exemplu.text} .
Exemplu
Să se dimensioneze al doilea panel (Panel_2) cu ajutorul riglei definită

în Panel_1.

cornerRadius="20">
CLICK????!')" x="30" y="60"/>
<mx:HSlider id="Rigla" minimum="1" maximum="500" snapInterval="1"/>
<mx:Text id="Vizibil" x="40" y="20" text="{Rigla.value}"/>
<mx:TextInput id="Exemplu"/>
</mx:Panel>
<mx:Panel title="Panel_2" width="{Rigla.value}" height="{Rigla.value}" x="270" y="20"
cornerRadius="0">
<mx:Text id="Output" text="{Exemplu.text}"/>
</mx:Panel>
</mx:Application>
180
Rezultatul codului sursă este afişat mai jos:
ActionScript în blocul Script
Codul ActionScript3 poate fi înglobat într-un fişierul mxml şi în modul inline, dar din
păcate numai o singură funcţie per rezultat sau o singură acţiune cu Data Binding. Scripturile
pot fi incluse una într-alta. Toate instrucţiunile vor fi definite/descrise într-un bloc CDATA,
care va fi integrat într-o componentă MXML.
Vom discuta pe un exemplu: dorim să ataşăm unui buton o acţiune, dorim să afişeze un
mesaj la apăsarea butonului. În interiorul tag-ului care defineste butonul trebuie să definim
un Event-Handler, care va intra în acţiune când acţionăm butonul. Descrierea codului
ActionScript3 se face în interiorul tag-ului clic
<mx:Button label="Click-Click-Click">
<mx:clic>
<![CDATA[
mx.controls.Alert.show('SALUT ActionScript3 !');
]]>
</mx:clic>
</mx>
181
Să se realizeze o aplicaţie care va conţine un Label cu textul "Nume
floare:", un TextInput şi un Buton pe care va scrie "Adauga". Sub aceste
controale se va poziţiona un ComboBox care va conţine lista florilor introduse.
Utilizatorul va trebui să introducă un nume de floare, să dea click pe butonul
"Adauga", după care va trebui să vadă că acea componentă de tip ComboBox
conţine şi floarea pe care tocmai a introdus-o.
M5.U2.5. Rezumat
Adobe Flex este un instrument pentru dezvoltarera web. Aplicaţiile realizate cu

Flex au următoarele avantaje: scalabilitate, independenţă faţă de orice sistem de
operare, rulează cu orice Browser.
O aplicaţie Flex se realizează cu ajutorul unor compononte existente care se

pot configura cu ajutorul limbajului de marcare MXML. Aceste componente
reacţionează la anumite evenimente şi funcţii. Componente sunt realizate cu ajutorul
limbajului de scriptare ActionScript.
Limbajul MXML se aseamănă cu limbajul XML şi respectă toate principiile

acestuia de scriere a marcatorilor.
Primele două linii ale fişierului în care scriem codul vor fi în mod obligatoriu
acestea:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
Codul ActionScript3 poate fi înglobat într-un fişier mxml în patru moduri,

astfel: în interiorul unui tag mxml (inline), într-un bloc script într-un tag mxml, într-
un tag <script> (dacă dorim să descriem anumite acţiuni, care să fie valabile pentru
toată aplicaţia, atunci folosim aceast mod de descriere) sau într-un fişier
ActionScript extern (fişierele externe au extensia .as)
1. Care sunt domeniile de aplicaţii pe Internet în care se poate folosi Flex?

2. Ce este limbajul MXML?
182
U3. Lumea virtuală pe Internet
În lumea IT, apariţia lumilor virtuale se datorează cercetătorilor Universităţii

Utah, conduşi de către Ivan Sutherland care au relizat primul soft cu ajutorul
căruia se creea imaginea unui autovehicul şi tot ei au fost cei care au reuşit să
genereze pentru prima oară imaginea cu umbră, al unui poligon.
Ulterior ei au scris soft şi pentru vizualizarea primului obiect wireframe,
pentru simulatoare de zbor.
Următorul pas în lumea graficii a fost făcut de către un grup de cercetări numiţi
HITL (Human Interface Technology Laboratory, fondat in 1989). Aceştia au creat
primele resurse hardware dar şi resurse soft, cum ar fi:
- Aspen Movie Map – simula o călătore în Aspen, Colorado, folosind
secvenţe de imagini filmate în prealabil
- GROPE – aplicaţie folosită în domeniul medical şi bio-chimic.
Primul algoritm de reprezentare 3D a datelor, botezat „Marching Cubes”, a

fost creat de Bill Lorensen şi Harvey Cline. In anii următori în grafica 3D s-a
încercareat de a reprezenta datele cât mai veridic posibil, astfel încât lumea creată
să se apropie cât mai mult de lumea reală. Scenele realizate aveau o complexitate
crescută. Bill Reeves, este cel care a introdus noţiunea de „sisteme de particule”,
fiecare scenă 3D fiind construită din elemente indivizibile, numite particule.
Fiecare particulă posedând anumite caracteristici de bază, de exemplu poziţionare
în spaţiu, viteză şi direcţie în mişcare, culoare, timp de viaţă etc., care creau
dinamism în cadrul scenei. Exemplul clasic de utilizare al sistemului de particule
reprezintă filmul „Aventurile lui Andre şi al lui Wally B.”, unde pădurea este
creată cu ajutorul acestei tehnologii.
Toate cercetările ulterioare se bazează pe noţiunea de sistem de particule:
- Craig Reynolds a redefinit particula, considerând-o un poligon care
posedă sistem de coordonate propriu. Cu ajutorul noii particule el a
încercat să modeleze migraţia păsărilor şi peştilor, punând accent pe
comportamentul specific al populaţiei migratoare.
- Dave Haumann şi James Hahn au creat prima scenă virtuală care poate
fi modificată de către utilizatorul softului, prin interacţiune directă.
- Demetri Terzopaulos este primul care a creat lumi virtuale complexe: a
„construit” animale virtuale cu modelarea comportamentului specific, şi
a modelat şi faţa umană, modelul fiind folosit de către chirurgi pentru
pregătirea intervenţiilor chirurgicale reconstructive.
- Loren Carpenter a folosit teoria fractalilor expusă de Mandelbrot şi
Julia pentru a crea un lanţ muntos virtual în filmul „Vol Libre”
Începând din anii 1990 cercetările referitoare la grafica 3D au urmărit fie
183
fluidizarea mişcării în cadrul scenelor virtuale, fie îmbunătăţirea acestor scene cu
ajutorul efectelor de lumină.

• înţeleagă rolul lumii virtuale în Internet
• recunoască softuri pentru realizarea graficii 3D
• utilizeze limbajul VRML pentru realizarea de grafică 3D
• recreeze diverse scene din lumea reală folosind obiecte VRML
• trateze evenimente în VRML
M5.U3.3. Produse soft pentru realizarea graficii 3D
3ds Max
Este o aplicaţie dezvoltată de Autodesk Media & Entertainment pentru platformele Win
32 şi Win 64.
Numele aplicaţia a fost iniţial de 3D Studio şi a funcţionat numai pe platforma DOS.
După achiziţionarea ei de către Autodesk şi-a schimbat denumirea (mai întâi în 3ds max, apoi
în versiunea actuală) şi s-a îmbogăţit din punctul de vedere al funcţionalităţii. Este o aplicaţie
răspândită, dispunând de unele unelte speciale, limbaj de scriptare propriu şi altele cum ar fi:
- unelte pentru modelarea unui sistem de particule şi unelte de animare ale
sistemului creat;
- unealta Surface Tool pentru crearea de peisaje complexe cu ajutorul sistemului
de particule;
- MAX Script, limbaj de script propriu;
- posibilitate de modelare prin:
- sistem de poligoane (şi primitive clasice)
- NURBS (nonuniform rational B-splins);
- Particle Flow, unealtă de dinamizare a scenei 3D create;
3ds Max este folosit în special în industria jocurilor PC (contribuind la crearea jocurilor
„Battlefield Vietnam”, „Battlefield 1942”, „Call of duty” etc.) şi în cinematografie (se pot
menţiona filemele „Black hawk down”, „Harry Potter and the prisoner of Azbakam”, „Lara
Croft: tomb raider” etc.)
Lightwave 3D
Este un program folosit pentru modelare şi animaţie 3D şi a fost creat în 1988 de către
programatorii Allen Hastings şi Stuart Ferguson, purtând numele de Videoscape. Iniţial softul
184
a fost creat exclusiv pentru placa video Amiga 2000 în cadrul proiectului Video Toaster.
Ulterior a fost îmbunătăţit, astfel încât să fie compatibil pe platforme multiple (Mac OS X,
Windows, Linux şi SGI IRIX.
Fiind achiziţionat de către compania Newtek, a fost redenumit în Lightwave.
Lightwave 3D are caracteristici care îi conferă unicitate în comparaţie cu alte softuri de
grafică 3D, şi anume:
- conţine funcţii multi-thread – acestea pot utiliza simultan până la 8 procesoare pentru
efectuarea de calcule matematice complexe;
- are limbaj de scriptare propriu: LScript;
- este alcătuit din 2 pachete soft distincte:
- modelatorul: folosit pentru creare de obiecte tridimensionale
- pachetul cu ajutorul căruia se creează animaţia, efectele de lumină/umbră, etc.
Maya
Este un soft de grafică 3D folosit cu preponderenţă în domeniul cinematografiei, dar şi
la crearea de jocuri PC şi video. Softul fost creat de către Alias System Corporation, în 2
variante şi anume:
- una cu funcţii limitate: Maya Complete;
- una completă, Maya Unlimited.
Maya, funcţionează pe platforme de Windows, Linux, IRIX şi MAC OS.
Maya dispune de unelte speciale, limbaj de scriptare propriu , ş.a. :
- MEL (Maya Embedded Language) limbaj de scriptare propriu;
- modelare prin: - poligoane şi primitive
- NURBS (la fel ca şi la 3ds Max)
- subdiviziuni (SubD modelling;
- animaţia lumii 3D prin crearea unui „clip de animaţie”, care permite centralizarea
comportamentului unui element din lumea 3D, urmând ca mişcarea să se realizeze
selectând secvenţe din „clip”;
Macromedia (Adobe) Flash

Tehnologia Flash a fost introdusă pe piaţă în 1996 şi este binecunoscută pentru abilitatea
ei de a adăuga animaţie şi interactivitate în pagini web. Macromedia Flash cuprinde 2
componente:
- Adobe Flash Player – este o aplicaţie client, folosită în cadrul celor mai cunoscute
browsere (cum ar fi Netscape, Internet Explorer sau AOL) pentru integrare de animaţii
în pagini web;
- Adobe Engagement Platform – softul folosit pentru crearea conţinutului redat de către
Flash Player. Cu ajutorul lui se pot creea, pe lângă animaţii web, şi filmuleţe sau jocuri
(ca exemplu seria Yetisports)
SVG (Scalable Vector Graphics)

Este un limbaj pentru creare de grafică 3D statică sau animată, bazată pe tehnologia
XML; aparţine clasei de limbaje „open standard”, fiind creată de asociaţia World Wide Web
185
Consortium. SVG a fost construit după introducerea pe piaţă în 1998 a limbajului VML
(Vector Markup Language, asemănător cu XML), de către Adobe şi Microsoft. A cunoscut o
ascensiune rapidă, cea mai recentă versiune a sa fiind SVG Tiny 1.2, lansată în 10 august
2006. SVG are versiuni construite şi pentru platforme mobile (IPOD-uri, telefoane mobile,
PDA-uri), cum ar fi SVG Tiny sau SVG Basic.
Permite crearea a 3 tipuri de obiecte:

- forme grafice vectoriale, construite din linii drepte sau curbe, ele pot fi grupate,
formând obiecte compuse;
- imagini grafice digitale;
- obiecte text;
Grafica creată prin SVG poate fi in acelaşi timp animată şi interactivă, se permite
alocarea oricărui obiect SVG a evenimentelor de tip „onmouseover” şi „onclick”. De
asemenea SVG oferă posibilitatea comprimării elementelor folosite, obţinându-se de tip
„gzip”, astfel îmbunătăţindu-se performanţa rulării acestor fişiere.
Grafica SVG poate fi vizualizată pe multiple browsere Opera, Firefox, OmniWeb,

Konqueror, Internet Explorer şi Safari (pe ultimele două browsere conţinutul SVG poate fi
vizualizat numai dacă se foloseşte un plugin SVG).
Avantaje/dezavantaje ale folosirii elementelor grafice pe web

Grafica 3D pe web are avantaje deosebite, deoarece utilizatorii internetului preferă ca
paginile de web vizitate să fie animate, dinamizate şi interactive, ei nu mai sunt satisfăcuţi de
paginile care conţin numai text sau imagini neanimate.
Principalele avantaje ale folosirii graficii pe web sunt:

- efectele vizuale avansate sunt atractive pentru utilizator, el având posibilitatea de a
interacţiona cu lumea virtuală;
- se obţine o redimensionare a paginilor web: efectul 3D este veridic, controlul
conţinutului se poate realiza uşor şi de către utilizator;
- programatorul are o mare libertate în crearea animaţiilor 3D, el având la dispoziţie pe
lângă multiplele limbaje de programare şi multe obiecte 3D predefinite;
Pe lângă aceste avantaje, există însă şi dezavantaje:

- manipularea lumii tridimensionale se face pe o platformă bidimensională;
- folosirea elementelor grafice îngreunează cu mult lucrul procesorului.;
- în cazul elementelor dinamizate, creşte volumul de cod sursă, de aceea este foarte greu
să se obţină o fluiditate a mişcărilor în lumea virtuală.
186
M5.U3.4. Introducere în limbajul VRML
Tehnologia VRML ( Virtual Reality Markup Language) a fost intens folosită încă de la
lansare, în decursul anului 1997 apărând primele pagini web cu grafică 3D VRML (de
exemplu siteurile de chat 3D CyberTown). Datorită succesului cunoscut, a fost preluată de
SGI’s Cosmo Software, iar mai apoi de Platinum Technologies şi Computer Associates (CA).
Avantaje/dezavantaje ale folosirii tehnologiei VRML
Folosirea tehnologiei VRML prezintă aceleaşi avantaje şi dezavantaje ca şi utilizarea

celorlalte metode de creare a graficii 3D. Printre avantaje se poate menţiona:
- libertate în crearea de grafică 3D: toate efectele create în VRML sunt la discreţia
utilizatorului, acesta având control deplin asupra graficii create şi multiple
posibilităţi de a o vizualiza (obiectele create pot fi apropiate sau depărtate,
întoarse, răsturnate etc.);
- structurile create în VRML sunt copii fidele ale structurilor reale, efectul vizual
creat fiind unul avansat (datorită lucrului în trei dimensiuni);
Principalele dezavantaje ale tehnologiei VRML sunt:

- dificultăţi în a reprezenta cu exactitate structurile reale: complexitatea lumii reale
este greu de redat în VRML, deoarece se încearcă recrearea şi manipularea unei
lumi tridimensionale într-un mediu bidimensional. Tot din acestă cauză este
dificilă stabilirea şi reprezentarea poziţiei relative a mai multor obiecte 3D.
- timpul de prelucrare a calculelor necesare reprezentării unei lumi VRML este
foarte lung, ceea ce duce la suprasolicitarea procesorului, astfel încât scenele 3D
reprezentate cu multe detalii sau cele foarte dinamice se vor afişa trunchiat.
VRML 1.0 vs. VRML 2.0
Prima versiune oficială a tehnologiei VRML este 1.0, aceasta având următoarele
caracteristici:
- a fost construită exclusiv pentru creare de grafică 3D statică, neanimată.
- se foloseşte de anumite forme predefinite (numite primitive), pentru a construi
scenele 3D. Exemple de primitive: cub (box), cilindru (cylinder), sferă (sphere),
con (cone) etc. Programatorul are însă posibilitatatea de a-şi defini propriile forme
complexe, de a le salva şi de a le utiliza în crearea de scene 3D. Toate formele
vizibile şi caracteristicile lor sunt definite în entităţi numite noduri.
- permite operaţii relativ simple pentru manipularea obiectelor create, cum ar fi
transformări, scalări sau rotaţii.
- permite personalizarea lumii 3D construite prin aplicare de culori, texturi şi prin
metode de iluminare a scenei.
VRML 2.0 a păstrat toate funcţionalităţile şi caracteristicile primei versiuni, adăugând

altele noi, cum ar fi:
187
- posibilitatea de a adăuga anumite comportamente obiectelor create, fără să fie
nevoie de rescrierea întregului cod-sursă. Astfel, din statice lumile 3D au devenit
dinamice. Totodată se pot implementa tipare de comportament pentru interacţiunea
utilizatorului cu scena virtuală, acesta având şi posibilităţi de a modifica scena deja
construită.
- posibilitatea de a încorpora sunete sau fişiere video în lumea virtuală.
- posibilitatea de a folosi limbaje de script (JavaScript) sau limbaje de programare
(Java) pentru perfecţionarea lumii 3D create.
Navigare în lumea virtuală
Odată creată şi integrată într-o pagină HTML, o scenă grafică VRML poate fi
vizualizată de către toţi cei care vizitează acea pagină, cu condiţia ca browserul lor să suporte
conţinut VRML. Browserele compatibile VRML sunt de două tipuri:
- browsere independente (standalone) – acestea oferă posibilitatea de a vizualiza
numai conţinut VRML;
- browsere integrate – folosite în cazul în care se încearcă vizualizarea unei pagini
cu conţinut mixt HTML-VRML. Acestea sunt folosite ca plugin la browserele
clasice HTML.
Exemple de browsere VRML:

- Microsoft ActiveVRML: browser lansat în 1996, folosit pentru o perioadă scurtă
de timp, deoarece prezenta probleme la vizualizarea graficii VRML dinamice.
- Live3D: este un browser VRML independent, folosit cu browserul HTML
Netscape Navigator. El poate fi folosit pentru vizualizare de grafică statică
(VRML 1.0) şi dinamică (VRML 2.0), fiind distribuit împreună cu Netscape,
începând cu versiunea 3.0 al acestuia.
- Intervista’s WorldView: acest browser poate fi folosit atât independent cât şi ca
plugin la Netscape respectiv Internet Explorer. Oferă posibilitatea ca utilizatorul
să-şi salveze anumite puncte de reper pe parcusrul vizualizării lumii virtuale,
puncte ce pot fi revizitate.
- SGI’s CosmoPlayer: este cel mai cunoscut browser VRML, având integrat şi un
convertor pentru transformarea fişierelor VRML 1.0 în VRML 2.0. Este
compatibil şi cu părţile de cod implementate în Java sau JavaScript.
- Sony’s CyberPassage: este considerat a fi primul browser creat exclusiv pentru
vizualizare de grafică VRML 2.0 (celelalte au avut mai întâi versiune pentru
VRML 1.0, fiind apoi upgradate pentru conţinut VRML 2.0). Este compatibil şi cu
scripturi JavaScript şi oferă facilităţi de multiuser (lumea virtuală poate fi analizată
în timp real de către mai mulţi utilizatori).
Construcţia scenelor virtuale cu VRML
O scenă virtuală VRML poate fi construită prin 2 modalităţi:

1) folosind un simplu editor text (Notepad) pentru a scrie fiecare linie de cod în parte.
Această metodă este una foarte costisitoare din punctul de vedere al timpului
188
sacrificat de către programator, oferă însă posibilitatea ca acesta să aibă control
deplin asupra etapelor de creare a graficii.
2) cu ajutorul unui builder VRML: acesta este un pachet soft folosit pentru a construi
orice scenă 3D cu efort minim de programare. Printre principalele buildere aflate la
dispoziţia programatorului sunt demne de menţionat următoarele două:
• VRealmBuilder – pachet soft creat de către IDS Software. Este ideal
pentru începători, aceştia având posibilitatea de a comuta între grafica
creată şi codul sursă generat (sunt respectate cu stricteţe sintaxa şi regulile
de construcţie ale fişierului VRML). Structura fişierului creat nu poate fi
modificată, programatorul neavând posibilitatea de a-şi crea propria
ierarhie de noduri sau obiecte.
• Caligari’s Truespace – este cunoscut şi sub numele de Pioneer sau
Fountain. Acest pachet soft oferă, pe lângă primitivele şi formele
geometrice clasice, posibilitatea construirii de forme grafice 3D complexe,
bazate pe sisteme de poligoane şi conţine instrumente şi pentru creare de
text animat.
•
Structura şi caracteristicile unui fişier VRML V2.0
Structura generală a unui fişier VRML (fşierul are extensia .wrl) este dată de
următoarele secţiuni:
1. un fişier VRML începe întotdeauna cu următorul header:
#VRML V2.0 utf8
2. comentarii precedate de caracterul #
3. noduri
Identificatorul utf8 din header permite programatorului folosirea unui set de caractere
extins pentru construcţia scenei 3D (litere greceşti, caractere din alfabetul chinez etc.). Orice
linie care începe cu caracterul #, în afară de acest header este considerat a fi comentariu.
Fişierul VRML este salvat cu extensia „.wrl”.
Modelul de culoare folosit în VRML este RGB, astfel încât este nevoie de 3 valori
pentru specificarea unei culori: roşu (RED), verde (GREEN) şi albastru (BLUE), fiecare cu
valori cuprinse în intervalul [0, 1] (de exemplu combinaţia 0.0 0.0 0.0 semnifică culoarea
neagră şi 1.0, 1.0, 1.0 reprezintă culoarea albă). Unitatea de măsură predefinită a distanţei este
metrul, iar unghiurile sunt măsurate în radiani (şi nu în grade).
M5.U3.5. Noduri în VRML V2.0
Mulţimea de bază a obiectelor VRML constă din nodurui.

Dacă nodurile geometrice nu au precizate dimensiunile, atunci vor fi considerate valorile
implicite date în sintaxa nodurilor.
Nodul Shape
Sintaxă:
Shape{
189
appearance NULL
geometry NULL
}
Semantică:
Toate obiectele vizibile create în VRML sunt definite în interiorul nodului Shape, unde
găsim următoarele câmpuri:
- appearance – specifică un nod de tip Appearance, prin intermediul căruia stabilim
culoarea, textura şi celelalte caracteristici vizuale ale formei geometrice;
- geometry – indică forma geometrică creată. Acestea pot fi de două tipuri:
• forme primitive: Box (cub), Cone (con), Cylinder (cilindru) şi Sphere
(sferă).
• forme geometrice avansate: Elevation Grid, Extrusion,
IndexedFaceSet, IndexedLineSet şi PointSet.
Nodul Box
Sintaxă:
Box {
size 1.0 1.0 1.0
}
Semantică:
Nodul Box defineşte un paralelipiped căruia i se poate stabili lăţimea, înălţimea şi
grosimea. Centrul de greutate el formei create este prestabilit la punctul cu coordonatele
(0,0,0) din sistemul de coordonate local (practi centrul ecranului). Box are un singur câmp,
size, prin intermediul căruia se defineşte mărimea corpului geometric pe axele X, Y şi Z.
Câmpul are valoarea iniţială 1.0, 1.0, 1.0.
Nodul Sphere
Sintaxă:
Sphere {
radius 1.0
}
Semantică:
Nodul Sphere defineşte o sferă cu raza predefinită la 1.0 m. Sphere are un singur camp,
radius, iar sfera afişată va avea centrul de greutate în centrul ecranului, în punctul cu
coordonatele (0,0,0).
Nodul Cone
Sintaxă:
Cone {
bottomRadius 1.0
height 2.0
side TRUE
bottom TRUE}
190
Semantică:
Nodul Cone se foloseşte pentru definirea unui con şi are 4 câmpuri:
- bottomRadius: reprezintă raza cercului aflat la baza conului. Valoare ei trebuie să
fie mai mare de 0.0;
- height: înălţimea conului;
- side şi bottom: valori booleene, care specifică părţile vizibile ale conului desenat
(de exemplu dacă side e FALSE, se va afişa numai cercul aflat la baza conului);
Nodul Cylinder
Sintaxă:
Cylinder {
radius 1.0
height 2.0
side TRUE
bottom TRUE
top TRUE
}
Semantică:
Nodul Cylinder defineşte un cilindru, şi are 5 câmpuri:
- radius şi height – definesc proporţiile geometrice ale cilindrului. Valoarea lor
trebuie să fie mai mare de 0.0;
- side şi bottom – valori boolene, au aceeaşi funcţie ca şi în cazul nodului Cone;
- top – valoare booleană, este TRUE dacă se doreşte afişarea cercului din partea de
sus a cilindrului („capacul” lui), şi FALSE, dacă acesta e invizibil.
Nodul PointSet
Sintaxă:
PointSet {
color NULL
coord NULL
}
Semantică:
Nodul PointSet defineşte o mulţime de puncte 3D din sistemul de coordonate local şi
are 2 câmpuri:
- color – reprezintă un nod de tip Color, fiind un camp opţional, cu valoarea
predefinită la culoarea neagră;
- coord – reprezintă un nod de tip Coordinate, conţinând un set de coordonate 3D.
Numărul componentelor din câmpul color trebuie să coincidă cu numărul celor din
coord.
Nodul IndexedLineSet
Sintaxă:
IndexedLineSet {
coord NULL
191
coordIndex [ ]
color NULL
colorIndex [ ]
colorPerVertex TRUE
}
Semantică:
Nodul IndexedLineSet defineşte o mulţime de drepte din sistemul de coordinate local şi
are 5 câmpuri:
- color şi coord – cu aceleaşi funcţii ca şi la PointSet;
- coordIndex – conţine o mulţime de indecşi de coordinate cu ajutorul cărora se va
desena dreapta 3D. Indecşii se separă cu ajutorul caracterului “ “, un index cu
valoarea -1 reprezentând şfârşitul listei coordonatelor aparţinând dreptei curente.
- colorIndex – are aceeaşi funcţie ca şi coordIndex, însă se referă la culorile aplicate
dreptelor.
- colorPerVertex – camp Boolean prin intermediul căruia se defineşte modul de
aplicare al culorilor. Dacă valoarea lui este TRUE, fiecare segment de linie poate
avea culoare diferită, astfel încât desenarea dreptei poate începe cu o culoare şi se
poate termina cu alta. Dacă valoarea câmpului e FALSE, fiecare dreaptă are o
singură culoare.
Exemplu
Desenarea unei linii frânte în VRML
#VRML V2.0 utf8

IndexedLineSet {
coord 0 0 0 1 1 0 -1 0 0 -1 -1 0
coordIndex [3 0 2 1]
colorIndex [0 1 2 0 ]
colorPerVertex TRUE
}
Afişarea textului în VRML
Nodul care permite afişarea de şiruri de caractere (stringuri) în lumea VRML este Text.
Sintaxă:
Text {
string [ ]
fontStyle NULL
length [ ]
maxExtent 0.0
}
Semantică:
Nodul Text conţine următoarele câmpuri:
- string – conţine textul care va fi afişat, formatat pe un singur sau mai multe
rânduri, caz în care fiecare linie este considerată ca fiind un string de sine stătător;
192
- fontstyle – conţine un nod Fontstyle şi se referă la modul de afişare al şirului de
caractere;
- length – reprezintă lungimea fiecărui string în unităţi VRML şi anume: valoarea 0
înseamnă că şirul de caractere rămâne nemodificat, o valoare pozitivă înseamnă
comprimarea unui string considerat lung, iar o valoare negativă se interpretează ca
o expandare al unui string scurt;
- maxLength – setează o limită maximă pentru lungimea stringurilor.
Proprietăţile de afişare al unui şir de caractere se stabilesc prin intermediul nodului

FontStyle.
Sintaxă:
FontStyle {
family "SERIF"
horizontal TRUE
justify "BEGIN"
language ""
leftToRight TRUE
size 1.0
spacing 1.0
topToBottom TRUE
}
Semantică:
Nodul FontStyle are câmpurile:
- family – specifică familia de fonturi şi poate lua valorile SERIF, SANS sau
TYPEWRITER;
- style – se referă la stilul de afişare al caracterelor. Valori posibile: PLAIN, BOLD,
ITALIC sau BOLDITALIC;
- horizontal – câmp cu valori booleene, permite afişarea de text pe orizontală;
- leftToRight – câmp boolean care specifică dacă textul se afişează de la stânga la
dreapta sau de la dreapta la stânga (în stil arab);
- topToBottom – stabileşte direcţia de afişare de sus în jos sau de jos în sus (în stil
chinezesc);
- justify – stabileşte modul de aliniere al textului. Câmpul poate avea valorile
FIRST, BEGIN (ambele însemnând aliniere la stânga), MIDDLE (text centrat) sau
END (aliniere la dreapta);
- language – specifică setul de caractere folosit, de exemplu „en” – engleză,
„en_US” – engleză americană etc.
- size – specifică mărimea caracterelor în unităţi VRML (şi nu în pixeli);
- spacing – folosit pentru a specifica spaţiul între rândurile textului;
Nodul Appearance
Formele geometrice – mai simple sau mai complexe – create în VRML vor arăta toate la
fel în cazul în care nu sunt personalizate. Culoarea predefinită în VRML este cea neagră, ea se
va aplica tuturor elementelor lumii virtuale în cazul în care acestea nu sunt complet definite
de către creatorul lor.
Nodul care ajută la definirea caracteristicilor vizuale al oricărui nod de tip Shape este
Appearance.
193
Nodul Appearance are sintaxa:
Appearance {
material NULL
texture NULL
textureTransform NULL
}
Semantică:
Nodul are 3 câmpuri opţionale:
- material – defineşte un nod de tipul Material, care specifică culoarea corpului
VRML şi modul în care acesta va reflecta lumina;
- texture – va conţine un nod de textură, de tipul ImageTexture, MovieTexture sau
PixelTexture;
- textureTransform – conţine un nod de tipul TextureTransform şi defineşte modul
în care se aplică textura pe forma geometrică;
Nodul Material
Cu ajutorul acestui nod se poate specifica culoarea, modul de reflecţie şi transparenţa

materialului aplicat unui corp geometric. Nodul se poate defini numai în interiorul unui nod
de tip Appearance.
Sintaxă:
Material {
diffuseColor 0.8 0.8 0.8
ambientIntensity 0.2
emissiveColor 0.0 0.0 0.0
specularColor 0.0 0.0 0.0
shininess 0.2
transparency 0.0
}
Semantică:
Nodul Material are 6 câmpuri:
- diffuseColor – se foloseşte pentru definirea culorii aplicate. Câmpul este ignorat
dacă se aplică şi texturi pe corpul geometric;
- emissiveColor – defineşte gradul de strălucire al suprafeţei colorate;
- ambientIntensity – determină volumul de lumină reflectat de către corpul
geometric;
- specularColor – defineşte culoarea „petelor” lucioase de pe materialul corpului
geometric;
- shininess – moderează intensitatea cu care strălucesc „petele” lucioase de pe
suprafaţă, valori mici însemnând strălucire moderată, iar valori mari strălucire
intensă;
- transparency – este folosit pentru specificarea gradului de transparenţă al
materialului. Valoarea 0.0 semnifică o suprafaţă complet opacă, iar 1.0 o suprafaţă
total transparentă.
194
Culorile în nodul Material se reprezintă în mod caracteristic VRML, ca un triplet RGB,
cu valori reale cuprinse între 0.0 şi 1.0.
Texturi
VRML 2.0 permite texturarea formelor geometrice cu ajutorul imaginilor, filmelor sau
imaginilor pixelate. Odată aleasă, textura se va aplica tuturor feţelor formei geometrice. Se
permite redimensionarea texturii alese, dar şi repetarea ei pe orizontală, verticală sau ambele
sensuri astfel încât să acopere faţa/feţele corpului geometric. De asemenea există şi
posibilitatea de a transforma sau roti o textură cu ajutorul nodurilor TextureTransform şi
TextureCoordinate.
Nodul ImageTexture
Permite setarea unei imagini JPEG, GIF sau PNG ca textură, cu ajutorul acestui nod se
poate stabili şi modul în care se va aplica textura (dacă se va repeta pe orizontală sau verticală
şi cum se va aplica pe feţele formei geometrice).
Sintaxă:
ImageTexture {
url [ ]
repeatS TRUE
repeatT TRUE
}
Semantică:
Nodul are următoarele câmpuri opţionale:
- url – specifică locaţia imaginii, se pot da şi liste de locaţii în care browserul să
caute imaginea;
- repeatS – specifică dacă imaginea se va repeta pe verticală, câmpul poate lua
valori booelene;
- repeatT - specifică dacă imaginea se va repeta pe orizontală, câmpul poate lua
valori booelene;
Nodul TextureTransform
Acest nod permite efectuarea de operaţii simple (scalări, transformări, rotaţii sau
translaţii) asupra coordonatelor texturii folosite. TextureTransform poate apărea numai în
interiorul unui nod Appearance.
Sintaxă:
TextureTransform {
scale 1 1
rotation 0
center 0 0
translation 0 0
}
Definirea surselor de lumină
Obiectele create au fost luminate cu sursa de lumină predefinită de către browser,

lumina indicând obiectul examinat la un moment dat. Această sursă de lumină este una de tip
195
headlight, VRML oferind posibilitatea de a folosi şi alte tipuri de iluminări, şi anume: lumina
direcţionată (directional light), lumina punctiformă (point light) şi lumina de tip bec (spot
light).
Probleme întâmpinate în iluminarea unei scene VRML:
- reflecţia luminii – în realitate în momentul în care un obiect este iluminat acesta
reflectă lumina în funcţie de materialul din care este construit şi de culoarea sa. În
lumea virtuală VRML însă nu este cunoscut conceptual de lumină reflectată, ceea
ce înseamnă că sunt vizibile numai obiectele care sunt illuminate în mod direct.
- atenuarea luminii – VRML are această funcţie prin intermediul căruia se
modelează efectul de scădere în intensitate a luminii odată cu creşterea distanţei
dintre obiectul iluminat şi sursa de lumină (numai în cazul unei surse de lumină
punctiforme sau de tip bec).
- umbrele – VRML nu permite modelarea efectului de umbră, deoarece ar creşte
foarte mult complexitatea graficii create. Umbrele pot fi doar simulate,
manipulând culoarea aplicată elementelor lumii virtuale.
- iluminarea unei suprafeţe plane - prezintă probleme în cazul în care se doreşte
iluminarea doar al unei părţi din totalul suprafeţei, însă aceste probleme se pot
rezolva dacă suprafeţele plane se definesc cu ajutorul unor noduri IndexedFaceSet
sau ElevationGrid, asftel încât ele să fie alcătuite din mai multe sectoare, creându-
se astfel suprafeţe gen meşe.
- lumini colorate – VRML oferă posibilitatea de a color alumina, trebuie însă să se
ţină cont de anumite reguli:
• în cazul în care se definesc culori pure (roşu, verde sau albastru) obiectele
colorate astfel vor reflecta numai lumina de aceeaşi culoare;
• obiectele colorate cu culori pure iluminate cu lumină de altă culoare, vor
rămâne “în intuneric”, nu vor reflecta lumina;
Se recomandă deci folosirea culorilor mixte (amestecuri de roşu, verde şi albastru).
Nodul DirectionalLight
Sintaxă:
DirectionalLight {
on TRUE
intensity 1
ambientIntensity 0
color 0.4 1 0.0
direction 0 1 -1
}
Semantică:
Acest nod defineşte o sursă de lumină aflată la o distanţă foarte mare de lumea virtuală
creată, astfel încât razele de lumină care ajung la obiectele din acea lume sunt deja paralele pe
o anumită direcţie. Lumina definită prin intermediul acestui nod are effect numai asupra
obiectelor definite în acelaşi grup cu nodul DirectionalLight. Câmpurile acestui nod sunt:
- on – camp boolean, determină dacă lumina direcţională e sau nu activă;
- intensity – reprezintă intensitatea luminii, poate avea valori între 0.0 şi 1.0;
- ambientIntensity – specifică prin valoarea sa (între 0.0 şi 1.0) măsura în care
lumina direcţională contribuie la iluminarea generală a scenei 3D;
- color – un camp RGB prin care se determină culoarea luminii;
- direction – specifică un vector 3D care setează direcţia luminii;
196
Nodul PointLight
Sintaxă:
PointLight {
on TRUE
intensity 0.8
color 1 1 0.1
location 0 0 0
attenuation 1 0 0
radius 80
}
Semantică:
Acest nod defineşte o sursă de lumină aflată într-o locaţie exactă, din această locaţie
razele de lumină se împrăştie în toate direcţiile. Se iluminează toate corpurile care se află în
calea de lumină, nu numai cele definite în acelaşi grup de obiecte cu nodul PointLight.
Intensitatea luminii se poate totuşi limita cu atributul radius, care specifică raza sferei în
interiorul căreia obiectele sunt iluminate de către sursa de lumină definită. Alte câmpuri ale
nodului PointLight:
- on - camp boolean, determină dacă lumina punctiformă e sau nu activă;
- intensity – reprezintă intensitatea luminii, cu valori între 0.0 şi 1.0;
- ambientIntensity – specifică prin valoarea sa (între 0.0 şi 1.0) măsura în care
lumina direcţională contribuie la iluminarea generală a scenei 3D;
- color – un câmp RGB care determină culoarea luminii;
- location – specifică un vector 3D care defineşte coordonatele sursei de lumină;
- attenuation – vector 3D care specifică modul în care lumina îşi va pierde din
intensitate odată cu creşterea distanţei de la sursă;
Nodul SpotLight
Sintaxă:
SpotLight {
on TRUE
intensity 1
color 1 0.1 1
location 0 1 0
direction 0 0 0
attenuation 1 0 0
radius 80
cutOffAngle 0.78
beamWidth 0.78
}
Semantică:
Acest nod defineşte o sursă de lumină aflată într-o locaţie anume, cu direcţia luminii
bine stabilită, astfel încât razele de lumină emise dintr-o astfel de sursă să formeze un con de
lumină. Acest con este caracterizat de două din câmpurile nodului, şi anume:
197
- cutOffAngle – defineşte unghiul pe care îl formează generatorii conului, se
specifică în radiani, valoarea sa trebuie să se încadreze în intervalul 0-1,57 (0˚-
180˚);
- beamWidth – defineşte unghiul unui con mai mic, în interiorul căruia lumina are o
intensitate constantă;
Noduri cu funcţie de grupare
VRML oferă următoarele noduri cu funcţie de grupare:

- Anchor – reprezintă o formă complexă construită dintr-o mulţime de alte forme,
preluate printr-un hyperlink dintr-o altă lume VRML, pagină HTML sau orice altă
structură de date ce poate fi interpretată de către browser;
- BillBoard – reprezintă o mulţime de noduri, care indiferent de poziţia privitorului
sunt vizibile şi apar cu faţa spre privitor;
- Collision – o mulţime de noduri care anunţă browserul momentul în care se
întâlneşte un eveniment de tip coliziune;
- Group – defineşte un nod compus, format de o mulţime de alte noduri, facilitează
reutilizarea acelor noduri;
- Switch – o mulţime de noduri din care poate fi reprezentat cel mult un nod la un
moment dat;
- Transform - defineşte un sistem nou de coordonate pentru lumea virtuală, diferit
de cel predefinit;
În VRML gruparea are ca scop principal limitarea modificărilor ce se pot realiza asupra
nodurilor doar la anumite noduri, cele care fac parte din acelaşi grup. Se permite ca un grup
de noduri să fie inclus în alt grup, astfel încât să se creeze structuri ierarhice de noduri.
Nodul Group
Sintaxă:
Group {
children []
bboxCenter 0 0 0
bboxSize -1 -1 -1
}
Semantică:
Acest nod permite ca o mulţime de noduri să fie tratate ca o singură entitate (nod)
VRML. Conţine următoarele câmpuri:
- children – conţine nodurile (elementele) incluse în grup;
- bboxCenter şi boxSize - cu semnificaţia definită în nodul Anchor;
Nodul Transform
Sintaxă:
Transform {
scale 1 1 1
198
scaleOrientation 0 0 1 0
center 0 0 0
rotation 0 0 1 0
translation 0 0 0
bboxCenter 0 0 0
bboxSize -1 -1 -1
children []
}
Semantică:
Nodul Transform permite definirea unui nou system de coordinate local pentru nodurile
ce fac parte din grup. Cu ajutorul său se pot efectua operaţii de tip rotaţie, scalare sau
translaţie, acestea afectând de asemenea toate nodurile conţinute de grup. Câmpurile nodului
Transform sunt:
- children – conţine toate nodurile ce vor face din grup;
- scale – se referă la o transformare de tipul scalare;
- scaleOrientation – specifică modul de rotaţie al axelor sistemului de coordinate
pentru ca scalarea să se poată realize;
- center – defineşte centrul operaţiei de scalare;
- rotation – defineşte o rotaţie pe una din axe, are 4 valori, primele 3 se referă la
axele de coordinate X, Y, Z, iar cel de-al 4-lea unghiul rotaţiei;
- translation – defineşte o nouă origine pentru sistemul de coordinate;
- bboxCenter şi boxSize - cu semnificaţia definită în nodul Anchor;
Să se realizeze un om de zăpadă înconjurat de brazi folosind nodurile VRML

V2.0
M5.U3.6. Evenimente în VRML
Principala diferenţă între VRML 1.0 şi VRML 2.0 este reprezentată de capacitatea
nodurilor să fie emiţători sau receptori de evenimente, astfel încât în VRML 2.0 se pot defini
obiecte animate care pot avea anumite reacţii la interacţiunea cu utilizatorul. Aceste reacţii se
obţin prin modificarea anumitor câmpuri din nodurile deja create, acestea purtând numele de
„câmpuri expuse” şi putând fi descompuse în 3 subcomponente (fieldName reprezentând
numele câmpului expus):
- eventIn set_fieldName
- field fieldName
- eventOut fieldName_changed
O astfel de definiţie semnifică faptul că nodul declarat are capacitatea de a recepta

evenimente (eventIn), dar în acelaşi timp poate să şi genereze evenimente (eventOut). Prin
eventIn se setează valoarea implicită al câmpului expus, în momentul în care această valoare
199
se modifică se va genera răspunsul la acea modificare cu ajutorul componentei eventOut.
Exemple de câmpuri expuse: diffuseColor, url, point[], scale, rotation sau translation.
Nodurile VRML pot dispune şi de alte câmpuri de tip eventIn sau eventOut, acestea însă
nu sunt vizibile în definiţia nodului, sunt considerate implicite. De asemenea pot exista noduri
care au câmpuri eventIn definite fără să aibă correspondent eventOut (cum ar fi câmpurile
coordIndex[], colorIndex[], orientation sau scale).
Modul de gestionare al evenimentelor este următorul: în momentul producerii unui
eveniment, nodul care l-a generat returnează o valoare sau o mulţime de valori de un anumit
tip (în funcţie de tipul evenimentului). Astfel, producerea de evenimente în VRML poate fi
văzută ca o transmitere de date de la utilizator către nodul care va fi modificat. În funcţie de
valorile transmise de către parametric nodul va răspunde cu o acţiune specifică, acţiune
reflectată de modificare valorilor câmpurilor expuse. Pentru a putea transmite acţiunea dorită
unui nod şi pentru a putea recepta răspunsul său, VRML se foloseşte de scripturi şi de rutarea
evenimentelor (ROUTES).
În VRML există posibilitatea de a genera evenimente şi fără modificarea valorii
câmpurilor expuse, folosind una din următoarele structuri:
- timere – generează evenimente la anumite intervale de timp predefinite;
- senzori – senzori de atingere (touch sensors): generează evenimente atunci când
cursorul mouse-ului este plasat asupra unui obiect/nod definit în acelaşi grup de
noduri ca şi senzorul;
- senzori de vizibilitate (visibility sensors): generează evenimente atunci când un
obiect sau mai multe din grupul în care e definit senzorul este vizibil pentru
utilizator;
- senzori de mişcare (dragging sensors): generează evenimente atunci când
utilizatorul dă click peste un obiect (din acelaşi grup ca şi senzorul) şi îl „trage” pe
ecran, schimbându-i poziţia;
- senzori de apropiere (proximity sensors): evenimentul se declanşează în momentul
în care pointerul mouse-ului se află la o anumită distanţă de obiectul care va
suporta consecinţele evenimentului;
Rutarea evenimentelor (ROUTES)
În VRML un nod poate genera (trimite) sau recepţiona evenimente, legătura între un
eveniment generat de un nod şi nodul care receptează evenimentul fiind realizat de entitatea
ROUTE.
Sintaxă: ROUTE Node.eventOut_changed TO Node.set_eventIn

Prefixul “set_” şi sufixul “_changed” nu sunt obligatorii, este corectă şi următoarea
sintaxă: ROUTE Node.eventOut TO Node.eventIn. După cum se vede, ROUTE nu permite
stabilirea noii valori pentru câmpul expus modificat.
În VRML pot exista adevărate cascade de evenimente, deoarece se generează câte un

eveniment de fiecare dată când un câmp expus îşi schimbă valoarea. Fiecare eveniment
generat are ataşat momentul exact al producerii sale, şi în cazul în care sunt mai multe
evenimente care s-au produs în acelaşi moment, ele au ataşate aceeaşi etichetă temporală. În
cascada de evenimente pot exista evenimente care se repetă nejustificat. Ele sunt automat
eliminate din cascadă în cazul în care au aceeaşi etichetă temporală, deoarece VRML nu
permite astfel de repetiţii.
200
Senzori în VRML
Nodul TimeSensor
Sintaxă:
TimeSensor {
cycleInterval 1.0
enabled TRUE
loop FALSE
startTime 0
stopTime 0
}
Semantică:
Acest nod funcţionează ca un cronometru care declanşează unul sau mai multe
evenimente la anumite intervale de timp (creându-se astfel efecte de animaţie). Nodul are
următoarele câmpuri:
- enabled – specifică statutul senzorului (dacă are valoarea TRUE senzorul e activ,
la valoarea FALSE senzorul este inactiv);
- startTime – specifică momentul în care senzorul începe generarea evenimentelor.
Valoarea câmpului este în secunde şi reprezintă numărul de secunde trecute de la
data 01.01.1970, ora 00:00;
- stopTime – specifică momentul în care senzorul va înceta generarea de
evenimente. Valoarea câmpului este în secunde şi reprezintă numărul de secunde
trecute de la data 01.01.1970, ora 00:00;
- cycleInterval – specifică intervalul de timp în carese vor genera evenimentele,
având valoarea măsurată în secunde;
- loop – specifică dacă în momentul în care expiră numărul de secunde definite în
câmpul cycleInterval, TimeSensor va fi sau nu restartat;
Senzorul de timp funcţionează astfel: în momentul în care de la crearea lumii virtuale a

trecut numărul de secunde specificată în câmpul startTime, TimeSensor începe măsurarea
timpului alocat producerii evenimentelor. Se vor produce evenimente până când numărul de
secunde contorizate va fi egal cu valoarea specificată în stopTime sau cu valoarea obţinută din
suma valorii din startTime cu cea din câmpul cycleInterval.
În cazul în care este specificată o valoare validă în câmpul cycleInterval nodul

TimeSensor va genera un eveniment fraction_changed, ce va avea valori cuprinse între 0.0 şi
1.0 (reprezentând fracţiunea de timp consumată din cycleInterval). Un alt eveniment generat
de către nodul TimeSensor este isActive. Acesta va avea valoarea TRUE cât timp cronometrul
măsoară trecerea timpului şi valoarea FALSE atunci când acesta nu mai funcţionează.
Nodul TouchSensor
Sintaxă:
TouchSensor {
enabled TRUE }
201
Semantică:
Este un nod care asigură interactivitatea lumii VRML cu utilizatorul. De obicei nodul
este definit în cadrul unui grup de noduri, având efect asupra tuturor nodurilor definite în
cadrul grupului. Acest senzor este activat în momentul în care pointerul mouse-ului este
poziţionat asupra unui obiect din cadrul grupului şi utilizatorul efectuează un click asupra
acelui obiect.
Nodul TouchSensor are un singur câmp, şi anume enabled, care specifică statutul
senzorului.
Evenimente generate de TouchSensor:
- isOver – este un eveniment generat cu valoarea TRUE atunci când câmpul enabled
are valoarea TRUE şi cursorul mouse-ului este mutat deasupra unui obiect din
grup. Evenimentul se generează cu valoarea FALSE dacă senzorul e activ (adică
enabled e TRUE) şi cursorul mouse-ului nu se opreşte deasupra niciunui obiect din
grup. Evenimentul isOver se generează numai în cazul obiectelor vizibile pentru
utilizator.
- evenimente care apar la mişcarea cursorului poziţionat pe un obiect din grup:
• hitPoint_changed – returnează poziţia exactă a obiectului în cadrul
grupului de obiecte;
• hitNormal_changed – returnează normala la suprafaţă, folosind
coordonatele 3D stabilite prin evenimentul hitPoint_changed;
• hitTextCoord_changed – returnează valorile textCoord referitoare la
suprafaţă;
- isActive – este un eveniment generat în momentul în care senzorul este activ şi se
realizează un click asupra unui obiect (valoarea alocată evenimentului va fi
TRUE). În momentul în care mouse-ul nu mai este apăsat isActive ia valoarea
FALSE şi se generează un eveniment touchTime care memorează momentul
înregistrării click-ului.
Nodul VisibilitySensor
Sintaxă:
VisibilitySensor {
enabled TRUE
center 0 0 0
size 0 0 0
}
Semantică:
Acest nod poate fi folosit pentru a detecta modificările aduse în vizibilitatea obiectelor
VRML, răspunzând cu anumite evenimente la aceste modificări de vizibilitate. Rolul său însă
nu este acela de a stabili dacă un anumit obiect este sau nu vizibil, senzorul reacţionează doar
la modificările aduse lumii VRML.
VisibilitySensor are următoarele câmpuri:

- center – reprezintă punctul central al unui cub virtual care cuprinde în interiorul
său obiectele urmărite de către senzor;
202
- size – reprezintă mărimea laturii cubului;
- enabled – specifică statutul senzorului, valorile sale sunt booleene;
Evenimente generate de către VisibilitySensor:

- enterTime – reţine momentul în care obiectele din interiorul cubului devin vizibile;
- exitTime - reţine momentul în care obiectele din interiorul cubului devin invizibile
utilizatorului;
- isActive – ia valoarea TRUE atunci când obiectele din interiorul cubului devin
vizibile şi FALSE când acestea devin invizibile;
Senzori de mişcare
Aceşti senzori detectează mişcarea obiectelor declanşată de către utilizatori, însă pe

lângă această detecţie senzorii au posibilitatea de a schimba poziţia unui obiect definit în
acelaşi grup de noduri ca şi senzorul. În VRML sunt definite 3 tipuri de senzori de mişcare:
- senzor „de plan” (Plane Sensor) – permite deplasarea obiectelor în sistemul de
coordonate XY;
- senzor “cilindric“ (Cylinder Sensor) – permite deplasarea obiectelor pe suprafaţa
unui cilindru virtual;
- senzor “sferic” (Sphere Sensor) - permite deplasarea obiectelor pe suprafaţa unei
sfere virtuale;
Câmpurile partajate de către aceste noduri sunt:

- enabled – specifică statutul senzorului (valoarea TRUE semnifică senzor activ, iar
valoarea FALSE un senzor inactiv);
- offset – memorează poziţia iniţială a obiectelor a căror poziţie va fi modificată.
Câmpul conţine valori întregi, o valoare 0 ar însemna că obiectele sunt în poziţia
lor iniţială, o valoare mai mare decât 0 înseamnă că deplasarea obiectelor va
începe din poziţia offset+valoare. Valoarea alocată câmpului va fi ignorată dacă în
câmpul autoOffset se regăseşte valoarea TRUE;
- autoOffset – specifică browserului dacă deplasarea obiectelor se va realize relativ
la poziţia lor iniţială (şi atunci autoOffset are valoarea TRUE) sau relativ la poziţia
lor iniţială, specificată în câmpul offset (în cazul în care autoOffset are valoarea
FALSE);
Evenimentele generate de către senzorii de mişcare:

- isActive – indică faptul că o operaţie de deplasare al unui obiect este în curs
(câmpul ia valori booleene);
- trackPoint_changed – returnează coordonatele actuale rezultate în urma deplasării
obiectului;
- rotation_changed – apare în definiţia nodurilor SphereSensor şi CylinderSensor şi
returnează rotaţia realizată în timpul deplasării obiectului;
- translation_changed – returnează translaţia realizată pentru deplasarea obiectelor;
203
Nodul PlaneSensor
Sintaxă:
PlaneSensor {
enabled TRUE
offset 0 0 0
autoOffset TRUE
maxPosition 1 1
minPosition 0 0
}
Semantică:
Permite o deplasare a obiectelor VRML în sistemul de coordinate local în planul XY,
astfel încât mişcarea se poate limita la o suprafaţă dreptunghiulară. Câmpurile specifice
acestui nod sunt:
- maxPosition – reţine valoarea maximă permisă pentru X şi Y;
- minPosition - reţine valorile minime pentru X şi Y;
În cazul în care valoarea specificată de maxPosition este mai mică decât cea din
minPosition, nu există limitare în deplasarea obiectului.
Nodul SphereSensor
Sintaxă:
SphereSensor {
enabled TRUE
offset 0 1 0 0
autoOffset TRUE
}
Este folosit pentru a realiza mişcarea obiectelor pe suprafaţa unei sfere imaginare (deci
în jurul centrului sistemului de coordonate local).
Nodul CylinderSensor
Sintaxă:
PlaneSensor {
enabled TRUE
offset 0
autoOffset TRUE
maxAngle -1
minAngle 0
diskAngle 0.262
}
204
Semantică:
Este folosit pentru a realize mişcarea obiectelor pe suprafaţa unui cilindru imaginar
(adică în jurul axei Y al sistemului de coordinate local, limitând mişcarea la un anumir unghi
dat).
Câmpurile nodului CylinderSensor sunt:
- offset – cu aceeaşi semnificaţie ca şi în cazul celorlalte noduri de mişcare, însă
mişcarea se realizează relativ la valoarea de pe axa X;
- maxAngle – specifică rotaţia maximă ce poate fi realizată;
- minAngle- specifică rotaţia minimă;
Dacă valoarea specificată în maxAngle este mai mică decât cea din minAngle, atunci
rotaţia care se realizează nu este limitată (unghiul poate fi şi de 360 de grade).
ProximitySensor - Senzori de proximitate
Acest tip de senzori sunt reprezentaţi de către nodul ProximitySensor. Acesta asigură un
anumit grad de interactivitate într utilizator şi lumea VRML, generând anumite evenimente de
fiecare dată câbd utilizatorul intră, iese sau se mişcă în interiorul unui spaţiu de control,
delimitat printr-un cub imaginar. Senzorul nu ajută la determinarea poziţiei relative al
obiectelor din lumea VRML.
Sintaxă:
ProximitySensor {
enabled TRUE
center 0 0 0
size 0 0 0
}
Semantică:
ProximitySensor are următoarele câmpuri:
- enabled – specifică statutul senzorului (poate fi activ sau inactiv);
- center – conţine coordonatele centrului cubului imaginar;
- size – specifică dimensiunea laturii cubului;
Evenimente generate de către ProximitySensor:
- isActive – este generat cu valoarea TRUE atunci când senzorul este activ (câmpul
enabled are valoarea TRUE) şi pointerul mouse-ului se deplasează dintr-o poziţie
din exteriorul cubului într-o poziţie din interiorul cubului. Câmpul ia valoarea
FALSE atunci când mişcarea se realizează în sens invers;
- enterTime – este generat atunci când utlizatorul (prin intermediul mouse-ului)
accesează interiorul cubului. În momentul în care utilizatorul părăseşte interiorul
cubului se generează un eveniment exitTime. La orice mişcare a mouse-ului
(accesarea interiorului cubului, schimbarea poziţiei în interiorul cubului sau ieşirea
din cub) se generează următoarele evenimente:
• position_changed – returnează coordonatele 3D ale poziţiei

utilizatorului;
• orientation_changed – returnează orientarea utilizatorului în

sistemul de coordinate;
205
M5.U3.7. Noduri speciale
DEF – denumirea unui nod în VRML

În VRML se permite denumirea de grupuri de noduri sau redefinirea unor noduri deja
existente prin adăugarea unor câmpuri noi la cele deja existente. Procesul de definire este cu
adevărat folositor atunci când este nevoie de aducerea unor modificări în interiorul definiţiei
nodului, deoarece acestea se vor îmregistra o singură dată (în cadrul definiţiei) şi nu în fiecare
instanţă al nodului definit.
Sintaxă:
{
DEF name node
}
Nodul astfel creat poate fi apelat folosind sintaxa:
{
USE name
}
Nodul Inline
Sintaxă:
Inline {
url []
bboxCenter 0 0 0
bboxSize -1 -1 -1
}
Semantică:
VRML permite ca lumea virtuală să fie “împrăştiată” în mai multe fişiere .wrl, astfel
încât codul să fie mai lizibil şi gradul său de reutilizabilitate să fie crescut. Nodul Inline
permite definirea unui URL de unde browserul poate extrage datele necesare construcţiei
lumii 3D (URL-ul trebuie să conţină calea absolută către un fişier VRML complet şi corect).
Inline conţine următoarele câmpuri:

- url – specifică locaţia fişierului care va fi folosit pentru construcţia lumii VRML,
se permite specificarea listelor de locaţii, unde browserul poate căuta un anumit
fişier .wrl;
- bboxCenter – are aceeaşi semnificaţie ca şi în cazul nodului Anchor;
- bboxSize - are aceeaşi semnificaţie ca şi în cazul nodului Anchor;
Nodurile definite în cadrul unui fişier VRML folosit în construcţia unei lumi 3D
complexe, formate din fişiere multiple, nu sunt recunoscute şi în exteriorul acelui fişier.
LOD (Level Of Detail )Node

Sintaxă:
LOD {
level []
center 0 0 0
206
range []
}
Semantică:
Nodul LOD permite ca un obiect VRML să fie reprezentat în mai multe versiuni la care
diferă doar gradul de reprezentare ale detaliilor acelui obiect, în funcţie de distanţa la care
acesta se află de utilizator.
Nodul LOD are următoarele câmpuri:
- level – reprezintă multţimea de reprezentări posibile ale obiectului VRML;
- center – conţine coordonatele unui punct 3D în funcţie de care se va calcula
distanţa faţă de obiectul reprezentat;
- range – cuprinde o mulţime de valori reale ce reprezintă distanţele faţp de obiect,
în ordine crescătoare; valorile trebuie să fie mai mari sau egale decât 0.
M5.U3.8. Interpolare în VRML
Operaţia de interpolare se referă la definirea unei legături directe dintre o cheie (key) şi
o valoare a cheii (keyValue). Cheia poate avea valori cuprinse între 0.0 şi 1.0, iar keyValue
poate fi reprezentată de orice tip de dată în funcţie de tipul interpolării. VRML permite
următoarele tipuri de interpolări:
- ColorInterpolator
- CoordinateInterpolator
- NormalInterpolator
- OrientationInterpolator
- PositionInterpolator
- ScalarInterpolator
Fiecare dintre aceste noduri are un eveniment eventIn de tip set_fraction (este acel
eveniment ce produce modificările la nivelul nodului vizat) şi un eventOut value_changed
(care reflectă modificările realizate). Legătura între cele două evenimente este realizată de
către cheie: set_fraction stabileşte valoarea ei, iar value_changed reacţionează verificând
valoarea lui keyValue, direct asociată cheii.
Operaţiile de interpolare combinate cu efectele senzorului TimeSensor rezultă în apariţia
de lumi virtuale animate (lumi care conţin variaţii de culori, obiecte ce se metamorfozează
etc.). Modul de funcţionare al acestor două noduri este următorul: TimeSensor are un
eveniment fraction_changed care poate fi legat de evenimentul set_fraction, folosind operaţia
de rutare a evenimentelor (ROUTE). Interpolatorul va genera un eveniment value_changed
care poate fi legat prin rutare de una din câmpurile expuse ale unui nod obişnuit. Rezultatul
final constă în modificarea unei anumite proprietăţi al obiectului VRML (culoare, mărime,
poziţie etc.), odată cu trecerea timpului.
Câmpurile nodurilor de interpolare sunt key[] şi value[], valorile alocate acestor câmpuri
având următoarea semnificaţie: set_fraction primeşte ca parametru valorile din key[], atunci
valoarile returnate prin eveneimentul value_changed este keyValue.
207
Nodul ColorInterpolator
Este un nod de interpolare care în câmpul keyValue conţine o listă de valori RGB şi care
are ca efect modificarea culorii obiectului VRML asupra căruia se aplică.
Sintaxă:
ColorInterpolator {
key [ ]
keyValue[ ]
}
Nodul CoordinateInterpolator
Este un nod de interpolare care în câmpul keyValue conţine o listă de coordonate 3D şi

care are ca efect un control deplin asupra punctelor ce definesc orice obiect VRML, creând
senzaţia de metamorfoză al acelui obiect.
Sintaxă:
CoordinateInterpolator {
key [ ]
keyValue[ ]
}
Nodul NormalInterpolator
Este un nod de interpolare care în câmpul keyValue conţine o listă de vectori 3D şi

permite utilizatorului să modifice normalele definite în cadrul unui nod Normal.
Sintaxă:
NormalInterpolator {
key [ ]
keyValue [ ]
}
Nodul OrientationInterpolator
Este un nod de interpolare care în câmpul keyValue conţine o listă de parametri de

rotaţie 3D (un set de coordonate 3D şi un unghi de rotaţie). Este folosit pentru crearea de
animaţii prin rotaţia obiectelor VRML asupra cărora se aplică.
Sintaxă:
OrientationInterpolator {
key [ ]
keyValue[ ]
}
Nodul PositionInterpolator
208
Este un nod de interpolare care în câmpul keyValue conţine o listă de coordonate 3D şi
care are ca efect animaţia obiectelor VRML asupra cărora se aplică prin deplasarea lor pe ruta
definită în keyValue.
Sintaxă:
PositionInterpolator {
key [ ]
keyValue[ ]
}
Nodul ScalarInterpolator
Este un nod de interpolare care în câmpul keyValue conţine o listă de valori reale
folosite pentru modificarea oricărui câmp expus cu valori reale (de exemplu: viteza cu care se
redă un film sau sunet – dacă se modifică valoarea câmpului speed).
Sintaxă:
ScalarInterpolator {
key [ ]
keyValue[ ]
}
Să se realizeze o maşină în mişcare în VRML.
M5.U3.9. Rezumat
Grafica 3D pe web are avantaje deosebite, deoarece utilizatorii internetului

preferă ca paginile web vizitate să fie animate, dinamizate şi interactive, iar cu
ajutorul graficii 3D acest lucru a devenit posibil.
Codul VRML se scrie în fişiere care se salvează cu extensia ".wrl", iar
redactarea acestuia se poate face în orice editor de text sau cu ajutorul unui builder
VRML. Structura generală a unui fişier VRML este dată de următoarele secţiuni:
1. headerul #VRML V2.0 utf8
2. comentarii precedate de caracterul #
3. noduri
Nodul este obiectul de bază al codului VRML.
Principalele noduri sunt: Box, Sphere, Cone, Cylinder, Text, FontStyle,
Material, Appearance, PointLight, SpotLight, DirectionalLight, Group, Transform,
TimeSensor, TouchSensor, ProximitySensor, etc.
Aceste noduri permit adăugarea de obiecte, colorarea şi acoperirea acestora cu
diferite texturi, poziţionarea sau mişcarea obiectelor.
209
1. Enumeraţi diferenţele dintre VRML 1.0 şi VRML 1.2.

2. Care este sintaxa elementului Node Shape?
3. Care este sintaxa elementului Node Cylinder?
4. Care sunt avantajele şi dezavantajele folosirii elementelor grafice pe web?
5. Ce utilizare are elementul Node Position Interpolator?
210
Modulul VI. Prelucrarea imaginilor cu Gimp 2.6
Introducere
GIMP (GNU Image Manipulation Program este un program software pentru
prelucrarea imaginilor. GIMP poate fi utilizat la cele mai simple prelucrari de
imagini, cum ar fi luminozitate, contrast, filtre RGB, pana la realizarea celor mai
complexe colaje de imagini, efecte, GIF-uri animate, care pot fi incorporate într-o
pagină web.
GIMP este disponibil gratuit pentru diferite sisteme de operare. Cele mai multe
distribuţii Linux includ GIMP ca aplicaţie standard. Programul este disponibil de
asemenea si pentru Microsoft Windows si Apple. GIMP este un software gratuit
care detine o licenţă de utilizare publică numită General Public License.
Competenţe
• să utilizeze un program pentru prelucrarea imaginilor
• să înţeleagă principiile de bază ale prelucrării imaginilor: luminozitate,
contrast, poziţionarea subiectului
• să realizeze logo-uri, bannere, GIF-uri animate, care pot fi incorporate într-
un site web
211
U1. Concepte de bază în GIMP 2.6
GIMP oferă o varietate de instrumente pentru prelucrarea imaginilor:

dimensionare, comprimare, decupare, rotire, luminozitate.

studenţilor în instrumentele de lucru oferite de GIMP.
• utilizeze ferestrele de lucru ale programului de prelucrare a imaginilor
GIMP
• salveze o imagine într-un format cat mai potrivit pentru a putea fi utilizată
într-un site web
M6.U1.3. Ferestre de lucru în GIMP 2.6
GIMP oferă o varietate de modalităţi de prelucrare a imaginilor şi suportă fişiere având

extensiile: .GIF, .JPG, .TIF, .PNG, .XCF. Dintre acestea, sursa de lucru are extensia .XCF, iar
celelalte tipuri de imagini se obţin prin operaţia de export.
O imagine GIMP conţine mai multe obiecte, fiind similară cu o carte având mai multe
pagini, numite straturi (layers). Pe lângă acestea, imaginea mai poate conţine o mulţime de
canale (channels).
Straturi (layere)
Straturile reprezintă foi suprapuse şi sunt utilizate pentru a facilita manipularea
imaginilor. Straturile pot fi ascunse, şterse sau transparente.
Canalele (channels)
Canalele sunt utilizate pentru a face modificări la nivel de culoare, spre exemplu
stergerea efectului de ochi roşii.
212
Selecţiile (selection)
Sunt utilizate pentru a selecta o anumită parte dintr-o imagine. În GIMP există trei
tipuri de selectori: dreptunghiular (rectangular selection), sub formă de elipsă (elipse
selection) şi formă neregulată (lasso selection).
Ferestre de lucru în GIMP 2.6

Cele mai importante ferestre de lucru sunt:
1. Toolbox – conţine instrumentele de lucru
2. Canvas – suprafaţa de lucru
3. Gradients – conţine butoane pentru utilizarea schemelor de culori
4. Fereastra Layers, Channels, Paths
În figura 1 sunt prezentate ferestrele de lucru.
Fig. 1 Ferestrele de lucru în GIMP

Pentru activarea sau dezactivarea butoanelor din bara de instrumente, se utilizează
opţiunea Edit –Preferences.
M6.U1.4. Lucrul cu imagini: salvare, dimensionare, comprimare, decupare, rotire

Salvarea unei imagini
În GIMP se utilizează opţiunea File – Export, din care se poate alege o varietate de
formate: .GIF, .JPG., .EPS., ICO., PNG, etc. In timpul exportului se poate seta calitatea
imaginii, care trebuie să fie cât mai buna (figura 2).
213
Fig.2 Setarea parametrului Quality
Informaţii despre o imagine

Se deschide o imagine in GIMP utilizând opţiunea File – Open. Din meniul Image se
alege opţiunea Image Properties, care va deschide o fereastră conţinând următoarele
informaţii: dimensiunea imaginii în pixeli (Size in pixels), rezoluţia (Resolution),
dimensiunea (File size), tipul imaginii (File type), numărul de straturi (Number of layers), etc.
Dimensionarea unei imagini

Se realizează cu opţiunea Image – Scale Image. Se deschide o fereastră ca în figura 3,
în care se pot seta noile dimensiuni ale imaginii: lăţimea (Width), înălţimea (Height) în pixeli
sau cm, precum şi rezoluţia imaginii.
Fig. 3 Dimensionarea unei imagini
214
Comprimarea unei imagini
Se realizează cu File- Save As – JPG. Se setează parametrul Quality, spre exemplu valoarea
10 înseamnă o imagine de dimensiune mai mica, iar valoarea 40 înseamnă o imagine de dimensiune
mai mare dar de o calitate mai ridicată.
Decuparea unei imagini

Se selectează o parte din imagine, folosind instrumentul de selecţie, apoi se utilizează opţiunea
Image – Crop to Selection sau butonul Crop din bara de instrumente.
Rotirea unei imagini

Se utilizează opţiunea Image – Transform, cu posibilităţile: Flip Horizontally, Flip
Vertically, Rotate 90 Clockwise, etc.
Modificarea luminozităţii unei imagini

Se utilizează opţiunea Colors – Brightness – Contrast.
Să se deschidă în GIMP o imagine cu oraşul Braşov. Să se salveze în format

.JPG, cu Quality 100%. Să se regleze contrastul şi luminozitatea imaginii.
Să ne reamintim...
• GIMP este un program utilizat pentru prelucrarea imaginilor
• Pentru a obţine imagini de calitate, trebuie să le salvăm într-un format adecvat,
setând paramentrul Quality la 100%
M6.U1.5. Rezumat
• GIMP oferă o varietate de modalităţi de prelucrare a imaginilor şi suportă
fişiere având extensiile: .GIF, .JPG, .TIF, .PNG, .XCF
• O imagine GIMP conţine mai multe obiecte, fiind similară cu o carte având
mai multe pagini, numite straturi (layers). Pe lângă acestea, imaginea mai
poate conţine o mulţime de canale (channels).
• Cele mai importante ferestre de lucru în GIMP sunt:
• Toolbox – conţine instrumentele de lucru
• Canvas – suprafaţa de lucru
• Gradients – conţine butoane pentru utilizarea schemelor de culori
215
• Fereastra Layers, Channels, Paths

1.Ce tipuri de fişiere suportă GIMP?

2. Ce reprezintă canalele (channels)?
3. Ce reprezintă straturile (layers)?
4. Ce comenzi se folosesc pentru rotirea unei imagini în GIMP?
5. Cum se realizează decuparea unei imagini?
6. Ce reprezintă scalarea unei imagini şi cum se poate realiza?
7. Cum se utilizează parametrul Quality la salvarea unei imagini în format .GIF?
8. Ce butoane conţine fereatra Tool Box?
9. Ce proprietăţi ale unei imagini se pot vedea folosind comanda Image Properties
din meniul Image?
10. Cum se poate modifica luminozitatea unei imagini?
216
U2. Lucrul cu logo-uri, butoane, bannere
Cuprins
M6.U2.1. Introducere ......................................................................................................
M6.U2.2. Obiectivele unităţii de învăţare .......................................................................
M6.U2.3. Crearea unui logo ............................................................................................
M6.U2.4.Crearea unui banner........................................................................................
M6.U2.5.Realizarea unui GIF animat..............................................................................
M6.U2.6. Rezumat ............................................................................................................
M6.U2.7. Test de evaluare..............................................................................................
GIMP oferă instrumente pentru realizarea logo-urilor, bannerelor, imaginilor

animate.

studenţilor în crearea diferitelor tipuri de imagini şi animaţii.
• creeze bannere statice sau animate pentru pagini web
• utilizeze diferite efecte de animaţie oferite de GIMP
M6.U2.3. Crearea unui logo

Temenul “logo” reprezintă un simbol grafic, un nume, creat pentru recunoaşterea unei
anumite mărci.
Pentru a realiza o imagine de tip logo în GIMP, se parcurg următorii paşi :
1.File – Create – Logos
2.Se alege tipul de logo (Exemplu : Blended)
3.Se salvează logo-ul cu File – Save As sau File – Export.
217
Pentru crearea unui buton, se parcurg aceiaşi paşi, însă folosind opţiunea File – Create –
Buttons.
M6.U2.4.Crearea unui banner

Termenul de “banner” reprezintă o imagine de tip reclamă. Bannerul poate fi static sau
animat, caz în care necesită utilizarea straturilor, efectelor de culoare şi efectelor de animaţie.
Pentru a realiza o imagine de tip banner în GIMP, se parcurg următorii paşi :
1. File – New – Template – Web banner common
2. Se deschide imaginea de fundal ca layer: File – Open as Layers – Open Image
3. Se scalează imaginea astfel: Image – Scale Image sau Toolbox – Scale Tool
4. Se adaugă text folosind butonul corespunzător din Toolbox sau alte imagini, deschise ca
strat nou (New Layer)
5. Se salvează imaginea de tip banner
În figura 4 se prezintă fereastra pentru crearea unui banner web.
Fig.4 Crearea unui banner
M6.U2.5.Realizarea unui GIF animat

Pentru a obţine o imagine animată, se utilizează setarea Save as Animation din
fereastra de salvare (export) a imaginii. În acest caz imaginea trebuie să fie de tip GIF. În
figura 5 este prezentată fereastra de salvare ca imagine animată, în care opţiunea Loop
forever asigură efectul de animaţie permanentă.
218
Fig. 5 Salvarea unei imagini ca .GIF animat
Exemplul 1
Crearea unui banner animat pentru produse din domeniul IT.

1.
219
Fig.6 Banner animat pentru produse din domeniul IT
Pentru a realiza acest banner în GIMP, mai întâi se caută imaginile necesare: imaginea colorată
de pe fundal, o imagine cu sigla Apple şi imaginea cu două iPhone-uri. Pentru realizarea
acestui banner se urmează paşii:
1. Se deschide aplicaţia GIMP

2. Se midifică dimensiunile imaginii de fundal astfel: Click dreapta -> Open with ->
Microsoft Office Picture Manager; din meniul Pictures se alege opţiunea Resize… ; din
fereastra aparută se alege Custom width and height şi se setează imaginea la dimensiunile
dorite
3. Din meniul File al aplicatiei GIMP se alege opţiunea Open as Layer
4. Se creaza un duplicat pentru Layerul de background
5. Folosind File - Open, se deschide imaginea cu sigla Apple; Pentru a putea selecta doar
sigla, fără fundal, se utilizează Fuzzy Select Tool din meniul Toolbox. Apoi se copiază sigla
peste cel de-al doilea Layer.
6. Pentru a introduce textul “Be different”, din meniul Toolbox se utilizează Text Tool pentru a
crea fiecare litera a textului. Apoi se editează pe rând fiecare litera astfel:
• Se selectează litera
• Din meniul Tool Option afisat in partea dreapta se seteatză fontul, mărimea şi
culoarea
După formatarea literelor, se aşează astfel încât acestea să compună un text coerent
7. Se selectează Layerul de background, şi se mută după ultimul Layer (cu litera “t”)
8. Se selectează Layerul al doilea, cel cu sigla Apple şi se mută deasupra celorlalte
9. Pentru a introduce textul “Be different”, se repetă paşii 6 şi 7
10. Se urmează pasul 4 de 2 ori
11. Din meniul File - Open se deschide imaginea cu cele 2 iPhone-uri. Din meniul Tool Box
aflat in dreapta ecranului se utilizează butonul Scissors Select Tool cu care se conturează
imaginea. Se copiază imaginea în ultimul Layer din proiect
12. Se salvează bannerul animat astfel:
• File – Export
• Se selectează extensia GIF image ( din Select File_Type )
220
Exemplul 2
Crearea unui banner animat cu urări de Sărbători.
Fig.7 Banner animat pentru Sărbători
Pentru realizarea acestui banner se urmează paşii:
1. Se crează în GIMP o pagină nouă cu formatul 640 x 300 px
2. Se desează o formă geometrică oarecare cu ajutorul tool-ului de path
3. Forma creată a fost duplicată și apoi întoarsă pentru a o pune în partea de sus a
banner-ului
4. Cele două forme se colorează cu roşu ”gradiant”
5. În interiorul banner-ului se introduce textul „Sărbători fericite!”, fiecare literă fiind pe

câte un Layer separat
6. În final se inserează sub formă de text, simbolul „*” care simulează fulgii de zăpadă
pe întregul banner
7. La sfârșit se salvează banner-ul în formatul .GIF animat, setând opţiunea Save as

Animation din fereastra Save...
Să se creeze în GIMP un logo şi un banner animat pentru o companie de

turism.
Să ne reamintim...
• În GIMP se pot crea butoane web, bannere, logo-uri
• Pentru a crea o imagine animată, se utilizează opţiunea Save as Animation
221
M6.U2.6. Rezumat
• Pentru a crea un logo în GIMP se utilizează File – Create – Logos
• Pentru a crea un buton în GIMP se utilizează File – Create – Buttons
• Pentru a crea un banner se utilizează File – New – Template – Web
banner common

1. Ce comenzi se folosesc pentru crearea unui buton în GIMP?

2. Cum se realizează un GIF animat?
3. Cum se realizează un banner în GIMP?
4. Ce semnificaţie are opţiunea Loop forever din fereastra de salvare a unei imagini
ca GIF animat?
5. Cum se redimensionează o imagine în GIMP?
222
U3. Crearea animaţiilor complexe
Cuprins
M6.U3.1. Introducere ......................................................................................................
M6.U3.2. Obiectivele unităţii de învăţare .......................................................................
M6.U3.3. Lucrul cu filtre în GIMP .................................................................................
M6.U3.4. Animaţii complexe...........................................................................................
M6.U3.5. Rezumat ............................................................................................................
M6.U3.6. Test de evaluare...............................................................................................
În prelucrarea imaginilor, o importanţă deosebită o are utilizarea filtrelor. Cu
ajutorul lor se pot obţine efecte vizuale de excepţie.

studenţilor în lucrul cu filtrele şi efectele de animaţie în GIMP.
• Utilizeze filtrele în prelucrarea imaginilor
• Realizeze animaţii complexe
M6.U3.3. Lucrul cu filtre în GIMP

În terminologia GIMP, un filtru este un plug-in care modifică modul de afişare a unei
imagini, în cele mai multe cazuri doar pentru layerul curent. Excepţie fac primele trei filtre
din meniul Filters, restul filtrelor fiind plug-ins. În continuare prezentăm cateva filtre care pot
fi aplicate în prelucrarea imaginilor (figura 8).
223
Filtrul Blur
Filtrul Blur produce un efect similar cu cel al unei camere foto. Acest filtru se utilizează cel
mai bine pentru imagini mari, deoarece el este foarte puţin perceptibil pe imagini de
dimensiune mică.
Fig. 8 Meniul Filters din GIMP

Filtrul Gaussian Blur
Acest filtru acţionează pe fiecare pixel layer-ului curent sau al selecţiei. Efectul obţinut
depinde de valoarea Blur Radius, aşa cum se observă în figura 9. GIMP suportă două variante de
Gaussian Blur: IIR G.B. şi RLE G.B. În figura 10 se prezintă imaginea originală şi imaginea
obţinută dupa aplicarea filtrului Gaussian Blur.
Fig. 9 Setările pentru filtrul Gaussian Blur
224
Fig. 10 Aplicarea filtrului Gaussian Blur
Filtrul Motion Blur

Filtrul Motion Blur crează un efect de mişcare. Tipurile de mişcare acceptate sunt :
Linear, Radial şi Zoom, fiecare dintre acestea putând fi ajustate folosind Length şi Angle.
Fig. 12 Imaginea obţinută prin aplicarea filtrului Motion

Blur
Fig. 11 Setările filtrului Motion Blur
225
Crearea unui colaj de imagini de tip diafilm
Se parcurg următorii paşi:
1. Open - File, se selectează mai multe imagini, cu ajutorul tastei SHIFT
2. Fiecare imagine se va deschide într-o fereastră separată; se selectează Filters –
Combine – FilmStrip
3. Se introduc imaginile dorite în diafilm folosind butonul ADD
4. Imaginea finală va fi o combinaţie de imagini de tip diafilm, care se salvează cu
extensia .GIF
Fig. 13 Colaj de imagini de tip Film Strip
M6.U3.4. Animaţii complexe
Exemplul 1
Efectul de apă - animaţie.

1. File – New
2. Pentru obţinerea imaginii cu apa, se utilizează: Filter – Render – Clouds – Difference
Clouds – New Seed
3. Se setează opţiunile Turbulent şi Detail:2
4. Pentru colorarea imaginii cu albastrul specific apei: Select All – Colors – Color Balance;
se setează parametrii Cyan-Red:-15 şi Yellow-Blue:15
5. Efectul de animaţie a apei se realizează astfel: Filters – Animation – Waves; se setează
parametrii Amplitude: 2.6 şi Wave length: 20
6. Rularea animaţiei: Filters – Animation – Playback
226
7. Se salvează imaginea ca .GIF animat
Exemplul 2
Animaţia textului „INFORMATICĂ”.

1. Se deschide o imagine nouă în GIMP
2. Se inserează pe rând literele textului „INFORMATICĂ”, în layere diferite, folosind
butonul Text Tool din Tool Box
3. După fiecare layer conţinând o literă, se inserează un layer de tip Background, folosind
butonul Create a New Layer
4. Se rulează animaţia astfel: Filters – Animation – Playback
5. Se salvează imaginea ca .GIF animat
Să se deschidă realizeze în GIMP o animaţie a textului “BRASOV,

ORAŞ DE POVESTE”.
M6.U3.5. Rezumat
• Un filtru este un plug-in care modifică modul de afişare a unei imagini
• Utilizarea filtrelor este foarte importantă pentru obţinerea lor de
animaţie complexe
• Animaţiile se rulează astfel: Filters – Animation – Playback

1. Ce reprezintă un filtru?
2. Ce efect are aplicarea filtrului Motion Blur?
3. Ce efect are aplicarea filtrului Blur?
4. Cum se realizează un colaj de imagini de tip diafilm?
5. Ce efect are setarea parametrului Blur Radius – Horizontal şi Vertical din
fereastra de setări Gaussian Blur?
227
Bibliografie
L. Sângeorzan, Tehnologii web şi WebDesign, Ed. Univ. Transilvania din Braşov,
pg.215, 2009, ISBN 978-973-598-523-3.
R. Dörner (FH Wiesbaden, Germania), L. Sângeorzan, K. Kiss-Iakab, Introducere în
OpenGL - Einführung in OpenGL, Ed. Univ. Transilvania din Braşov, pg.224, 2009, ISBN
978-973-598-472-4.
Gerald Reinhardt, Praxiswissen, Flex3, O’Reilly Verlag GmbH &Co.KG, 2009, pg.441,
ISBN 978-3-89721-860-4
Bettina K. Lechner, GIMP, Fuer digitale Fotografie, Webdesign und kreative
Bildbearbeitung, Addison-Wesley, pg.356,2009, ISBN 978-3-8273-2804-5.
L. Sângeorzan, K. Kiss-Iakab, Grafică pe calculator: JAVA - teorie şi aplicaţii, Ed.
Univ. Transilvania din Braşov, pg. 144, 2006, ISBN –973-635-713-9, ISBN – 978-973-535-
713-8.
Tudor Sorin, Vlad Hutanu, Crearea si programarea paginilor WEB, ed. L&S SOFT,
2006, ISBN 973 86022 2 X
L. Sângeorzan, C. L. Aldea, Tehnologii internet, Ed. Univ. Transilvania din Braşov, pg.
160, 2003, ISBN 973-635-176-9.
L. Sângeorzan, O. Tatu, A. Tatu, Web Resources for Teaching and Studying English; An
Introduction to HTML 4.0, Ed. Univ. Transilvania din Braşov, pg. 156, 2003 , Commenius
Programme, 87160-CP-1_2000-1-RO.COMENIUS–C31, ISBN 973-635-208-0.
Robin Williams Initiere in Design, Ed. Corint, 2003
Robin Williams, Design pentru WEB, Ed. Corint, 2003, ISBN 973 653 421 9.
L. Sângeorzan, O. Tatu, Basic Computer Science and English for Chemistry Teachers,
Ed. Univ. Transilvania din Braşov, pg. 68, 2002, ISBN: 973-635-066-5.
L. Sângeorzan, C. L. Aldea, M. R. Dumitru , JAVA, aplicaţii, Ed. Infomarket, Braşov,
pg. 203, 2001, ISBN 973-8204-14-3.
Tudor Gugoiu, HTML prin exemple, , Ed. Teora, 2001, ISBN 973 20 0455 X
Sabin Corneliu Buraga, Tehnologii WEB , Matrix Rom, Bucuresti 2001,nr. Pg. 662,
ISBN 973 685 28
L.Sângeorzan, VRML - Îndrumar de laborator, , Reprografia Universitatea Transilvania
Braşov, 1999
Rolf Daessler, Das Einsteigerseminar VRML, Ed. BHV, ISBN 3-8287-1082-4
http://www.gimp.org/tutorials/
http://http://docs.gimp.org/2.8/en/
http://getbootstrap.com/2.3.2/getting-started.html
228

CURS Thnologii WEB

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

CURS Thnologii WEB

Încărcat de

Drepturi de autor:

Formate disponibile

Centrul de Învăţământ la Distanţă şi Învăţământ cu Frecvenţă Redusă

FACULTATEA DE MATEMATICĂ ȘI INFORMATICĂ

Resurse şi mijloace de lucru

Durata medie de studiu individual

La ora actuală în lume există milioane de calculatoare, care sunt folosite în

M1.U1.2. Obiectivele unităţii de învăţare

Durata medie de parcurgere a primei unităţi de învăţare este de 1-2 ore.

Un pas important în evoluţia Web-ului a fost dezvoltarea browsererelor grafice, care

Web-ul a permis browserelor să afişeze imagini chiar în mijlocul textului, fără a fi

Creatorii de browse Nestcape şi Microsoft încearcă fiecare să dezvolte soluţii globale

Dezvoltarea Internetului, combinată cu apariţia reţelelor de tip Internet locale, de

O mare parte din eleganţa Internetului constă în cantitatea impresionantă de putere de

Termeni care se vehiculează în lumea Web-ului sunt:

M1.U1.4 Browsere WEB

Formatarea se face în funcţie de:

M1.U1.5 Primii paşi către construcţia unui site

Trebuie să se aibă în vedere faptul că JavaScript rulează pe calculatorul vizitatorului, o

Atenţie: Nu toţi provider-ii pun la dispoziţie utilizatorilor posibilitatea utilizării acestor

Să se realizeze un studiu de caz despre istoricul browserelor web

• Un pas important în evoluţia Web-ului a fost dezvoltarea browsererelor

M1.U1.7. Test de evaluare a cunoştinţelor

Aceştia sunt factorii de bază ai oricărei lucrări tipărite pe ecran sau

M1.U2.2. Obiectivele unităţii de învăţare

Această unitate de învăţare îşi propune aducerea în prim plan a principiilor

Durata medie de parcurgere a acestei unităţi de învăţare este de 2 ore.

Alinierea înseamnă că elementele de pe pagină sunt aliniate unele în raport cu celalalte.

Alegeti UNA. Se alege o singură aliniere care se utilizează pe toată pagina.

O aliniere centrala se poate spune că este :

Text pe butoane neglijent realizat (vezi figura de mai sus)

Alinierea orizontală este la fel de importantă ca şi cea verticală. Este important să

Formular incorect realizat din punct de vederea al web design-ului (vezi

Formular corect realizat din punct de vederea al webdesign-ului

Dorim să realizăm o carte de vizită care cuprinde 5 elemente

DIRECTOR S.C. PISOI (0268) 956419

VICTOR GABRIEL MOTANEL

Str. Leului nr.123 Brasov

Fig.1. Carte de vizitӑ

DIRECTOR S.C. PISOI (0268) 956419

VICTOR GABRIEL MOTANEL

Str. Leului nr.123 Brasov

Proximitatea sau apropierea înseamnă o relaţie.

VICTOR GABRIEL MOTANEL

Str. Leului nr.123

Fig.3. Carte de vizitӑ

Uneori, atunci când se grupează componentele foarte apropiate, este nevoie să se

Principiul proximităţii are ca scop de bază organizarea paginii.

VICTOR GABRIEL MOTANEL

Str. Leului nr.123

Fig.4. Carte de vizitӑ

VICTOR GABRIEL MOTANEL

Str. Leului nr.123

Fig.5. Carte de vizitӑ

Contrastul poate fi creat în mai multe moduri, de exemplu punem în contrast:

Fie un anunţ pentru obţinerea unei burse Socrates în cadrul Facultăţii de

BURSE SOCRATES 2007 !

Termen limita de depunere dosar la Decanatul Facultatii MI:

Burse Socrates 2007 !

Participare la testul de limba straina

Termen limita de depunere dosar

Să se realizeze schiţa unei pagini web pe o temă la alegere, respectându-

M1.U2.8. Test de evaluare a cunoştinţelor

O versiune mai veche a HTML-ului folosea unele idei şi modificări propuse

HTML 4 propune separarea stilurilor fizice de marcarea conţinutului printr-o

HTML e un limbaj bazat pe SGML (Standard Generalized Murkup