LTW

Laboratoare TWSM
eu
11 martie 2009
2
Cuprins
1 Introducere ı̂n (X)HTML 7

1.1 Resurse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.2 Exerciţii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.3 Bibliografie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2 CSS - Cascading Style Sheets (I) 13

2.1 Resurse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.2 Tutorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.3 Aplicarea CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.3.1 Stilurile in-line . . . . . . . . . . . . . . . . . . . . . . . . 14
2.3.2 Stilurile embedded . . . . . . . . . . . . . . . . . . . . . . 14
2.4 Definiţiile externe . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.5 Selectori, proprietăţi şi valori . . . . . . . . . . . . . . . . . . . . 15
2.5.1 Unităţi de măsură . . . . . . . . . . . . . . . . . . . . . . 16
2.6 Culori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.7 Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.7.1 Formatare avansată a textului . . . . . . . . . . . . . . . . 18
2.7.2 Margini şi zone de umplere (padding) . . . . . . . . . . . 19
2.8 Modelul Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
2.8.1 Proprietăţile blocurilor . . . . . . . . . . . . . . . . . . . . 19
2.8.2 Proprietăţi pentru zona de margine . . . . . . . . . . . . . 20
2.8.3 Proprietăţi pentru zona de umplere . . . . . . . . . . . . . 20
2.8.4 Borduri . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.9 Exemplu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.10 Exercitii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
2.11 Bibliografie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3 Descriere: CSS - Cascading Style Sheets (II) 31

3.1 Resurse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.2 Clase şi identificatori . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.3 Span şi Div . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
3.4 Grupuri şi contextuali . . . . . . . . . . . . . . . . . . . . . . . . 32
3.5 Pseudo-clase şi pseudo-elemente . . . . . . . . . . . . . . . . . . . 33
3.6 Imagini de fundal . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
3.7 Proprietatea display . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.8 Page Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3.8.1 Proprietatea position . . . . . . . . . . . . . . . . . . . . . 37
3.8.2 Proprietatea float . . . . . . . . . . . . . . . . . . . . . . . 39
3
4 CUPRINS
3.9 Exerciţii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
3.10 Bibliografie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
4 Descriere: CSS – Cascading Style Sheets (III) 55

4.1 Resurse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
4.2 Proiect (I) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
4.3 Bibliografie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
5 Descriere: Limbajul Javascript (I) 57

5.1 Resurse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
5.2 Limbajul JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . 57
5.3 Identificatori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
5.4 Variabile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
5.5 Operatori . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
5.6 Precedenţa operatorilor . . . . . . . . . . . . . . . . . . . . . . . 60
5.7 Instrucţiuni . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
5.8 Instrucţiuni expresii . . . . . . . . . . . . . . . . . . . . . . . . . 61
5.9 Instrucţiunea if . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
5.10 Instrucţiunea switch . . . . . . . . . . . . . . . . . . . . . . . . . 62
5.11 Instrucţiunea while . . . . . . . . . . . . . . . . . . . . . . . . . . 62
5.12 Instrucţiunea do-while . . . . . . . . . . . . . . . . . . . . . . . . 63
5.13 Instrucţiunea for . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
5.14 Instrucţiunile break şi continue . . . . . . . . . . . . . . . . . . . 63
5.15 Funcţii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
5.16 Tipuri de date de bază . . . . . . . . . . . . . . . . . . . . . . . . 65
5.17 Tipuri de date String . . . . . . . . . . . . . . . . . . . . . . . . . 66
5.18 Tipuri de date Math . . . . . . . . . . . . . . . . . . . . . . . . . 67
5.19 Tipuri de date Date . . . . . . . . . . . . . . . . . . . . . . . . . 68
5.20 Exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
5.21 Exerciţii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
5.22 Bibliografie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
6 Descriere: Limbajul Javascript (II) 73

6.1 Resurse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
6.2 Tipul Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
6.2.1 Instructiunea for . . . in . . . . . . . . . . . . . . . . . . . 74
6.3 JavaScript HTML DOM . . . . . . . . . . . . . . . . . . . . . . . 74
6.3.1 Obiecte DOM implicite . . . . . . . . . . . . . . . . . . . 75
6.3.2 Obiectul window . . . . . . . . . . . . . . . . . . . . . . . 76
6.3.3 Obiectul document . . . . . . . . . . . . . . . . . . . . . . 77
6.3.4 Alte obiecte predefinite . . . . . . . . . . . . . . . . . . . 79
6.4 Evenimente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
6.5 Javascript Cookies . . . . . . . . . . . . . . . . . . . . . . . . . . 82
6.6 Validare Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . 84
6.7 Exerciţii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
6.8 Bibliografie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
CUPRINS 5
7 Descriere: Limbajul Javascript (III) 87

7.1 Resurse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
7.2 Meniu expandabil ı̂n JavaScript . . . . . . . . . . . . . . . . . . . 87
7.2.1 Fişierul listmenu.css . . . . . . . . . . . . . . . . . . . . . 88
7.2.2 Fisierul listmenu.js . . . . . . . . . . . . . . . . . . . . . . 89
7.3 Slideshow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
7.4 Introducere ı̂n AJAX . . . . . . . . . . . . . . . . . . . . . . . . . 92
7.4.1 Exemplu AJAX . . . . . . . . . . . . . . . . . . . . . . . . 94
7.5 Exerciţii . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
7.6 Bibliografie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
8 Descriere: XML (eXtended Markup Language) 97

8.1 Resurse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
8.2 Introducere . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
8.2.1 Marcaje . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
8.2.2 Elemente . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
8.2.3 Atribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
6 CUPRINS
Capitolul 1
Introducere ı̂n (X)HTML
1.1 Resurse
1. Pentru un tutorial HTML online consultaţi: HTML
2. Pentru un tutorial XHTML online consultaţi: XHTML
3. Pentru entităţi HTML: Entităţi HTML
4. Pentru culori: Culori
1.2 Exerciţii
Exerciţiul 1 Realizaţi un document HTML simplu cu următoarea structură:
<html>
<head>
<t i t l e>Primul t e s t HTML</ t i t l e>
</head>
<body>
Textul c a r e va a p a r e ı̂ n b r o w s e r .
</body>
</html>
Exerciţiul 2 Realizaţi un document XHTML simplu cu următoarea structură:
< !DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1 . 0 T r a n s i t i o n a l

//EN”
” h t t p : / /www. w3 . o r g /TR/ xhtml1 /DTD/ xhtml1−t r a n s i t i o n a l . dtd ”
>
<html xmlns=” h t t p : / /www. w3 . o r g /1999/ xhtml ”>
<head>
<meta http−e q u i v=” Content−Type” content=” t e x t / html ;
c h a r s e t=i s o −8859−1” />
<t i t l e>XHTML T r a n s i t i o n a l Web Page</ t i t l e>
7
8 CAPITOLUL 1. INTRODUCERE ÎN (X)HTML
</head>
<body>
<h1>T i t l u H1</h1>
<p c l a s s=” c o n t e n t ”> Un p a r a g r a f c a r e va f o l o s i un o
f o a i e de s t i l (CSS) p e n t r u a c o n t r o l a f o r m a t a r e a
documentului .</p>
<img src=” h t t p : / / o r a r . u p i t . r o / S i g l a U p i t . GIF” a l t=”
U n i v e r s i t a t e a d i n P i t e s t i ” />
</body>
</html>
Exerciţiul 3 Folosind documentul realizat la punctual 1, verificaţi comporta-

mentul browserului dumneavoastră (utilizaţi atât IE cât şi Firefox) ı̂n următoarele
situaţii:
• scrieţi greşit numele marcatorilor de sfârşit pentru un container
• folosiţi ı̂n document spaţii, taburi şi linii goale pentru aranjarea codului
HTML
Exerciţiul 4 Realizaţi un document HTML care produce următorul rezultat: (i-
ul de după Salut este semnul exclamării răsturnat). Indicaţie: Folosiţi entităţile
HTML iexcl şi iquest.
Exerciţiul 5 Realizaţi un document XHTML 1.0 Transitional ca mai jos: iexcl

şi iquest.
1.2. EXERCIŢII 9
Exerciţiul 6 Testaţi validitatea documentului creat folosind validatorul W3C

de la adresa http://validator.w3.org/
Exerciţiul 7 Realizaţi un document XHTML cu CV-ul dumneavoastră:
• categorii: date de contact, data şi locul naşterii, studii, experienţă, referinţe,
aptitudini, hobby-uri, alte informaţii
• folosiţi formatări la nivel fizic (p, br) pentru a structura categoriile
• folosiţi formatări la nivel logic (h1, h2, etc) pentru a organiza ierarhic
documentul
• folositi formatări la nivel logic (em, strong) pentru a evidenţia eventualii

termeni
• folosiţi formatări la nivel de comunicare (address, acronym) acolo unde

este necesar
• creaţi un cuprins cu categoriile menţionate la ı̂nceputul documentului cu

legături către fiecare categorie
• creaţi o legătură către cuprins după fiecare categorie
• testati validitatea documentului creat folosind validatorul W3C si adau-

gati un link catre validator la sfarsitul cv-ului.
Exerciţiul 8 Împărţiti documentul HTML creat anterior ı̂n mai multe docu-
mente HTML. Cuprinsul se găseşte pe prima index.html, iar fiecare categorie
pe câte o pagină.
Exerciţiul 9 Adăugaţi ı̂n CV o legătură către un document PDF care să se

deschidă ı̂ntr-o fereastră nouă (folosiţi atributul target al tag-ului a). Folosiţi
atributul title pentru a adăuga o descriere (tooltip) legăturii spre fişierul PDF.
Exerciţiul 10 Realizaţi ı̂n HTML o listă ordonată (ı̂n ordinea rangului) cu

persoane din conducerea Universităţii din Piteşti.
Exerciţiul 11 Realizaţi ı̂n HTML o listă neordonată cu colegii dumneavoastră

de grupă.
Exerciţiul 12 Realizaţi un document HTML care afişează un tabel simplu.

Exerciţiul 13 Realizaţi o listă de definiţii ı̂n care termenii sunt oraşe din
străinătate ı̂n care aţi fost, iar definiţiile sunt câteva impresii despre fiecare
oraş.
Exerciţiul 14 Realizaţi un formular (formă) de introducere date conform următoarelor

specificaţii:
• componentă de tip text pentru preluare nume şi prenume
• componentă de tip text pentru preluare adresă e-mail
• componentă de tip casetă de selecţie pentru preluare specializare
• componentă de tip casetă de selecţie pentru preluare curs
• componentă de tip casetă de selecţie pentru preluare activitate. Acti-

vităţile pot fi: studiu curs, lucrare laborator, test grilă.
• componentă de tip buton radio pentru selecţie an de studiu (I, II, III sau
IV)
• componentă de tip buton de validare (checkbox) pentru specificare selecţii

dintre variantele:
– Activitate interactivă
– Activitate de studiu individual
– Activitate de lucru ı̂n colaborare cu alţi studenţi
• trei butoane de submisie a informaţiilor introduse ı̂n formular cu următoarele

semnificaţii:
– lansare activitate
– afişare stare student ı̂n raport cu activitatea selectată
– anulare informaţii introduse ı̂n formă (cancel)
1.3. BIBLIOGRAFIE 11
Exerciţiul 15 Creaţi un set de frame-uri. Unul dintre frame-uri va avea ca

sursă un fişier ce conţine un alt set de frame-uri. Specificaţi surse pentru fie-
care frame. Afişaţi pagina HTML compusă astfel. Adaugaţi o ancoră care are
ca TARGET numele unuia din frame-urile subsetului de frame-uri. Referinţa
pentru ancoră va fi un nou fişier HTML sau un fişier GIF. Activaţi referinţa.
Observaţi actualizarea conţinutului frame-ului. Adaugaţi o ancoră care are ca
TARGET numele frame-ului ce conţine subsetul de frame-uri. Referinţa pentru
ancora va fi un nou fişier HTML sau un fişier GIF. Activaţi referinţa. Observaţi
că astfel se poate actualiza conţinutul unui ı̂ntreg set de frame-uri. Realizaţi o
structură formată din 3 cadre cu următorul conţinut:
• Cadrul 1.
– Titlul aplicaţiei
– Butoane corespunzătoare opţiunilor aplicaţiei
• Cadrul 2.
– Forma creată la exerciţiul 1

• Cadrul 3.
– Un tabel cu cursurile disponibile:
– titlu curs
– nume profesor
– nume asistent
– programare curs
– programare laborator
– programare verificare
– algoritm de calcul notă
– o componentă de tip textarea pentru preluare comentarii.
1.3 Bibliografie
• W3C HTML Tutorial
• W3C XHTML Tutorial
Capitolul 2
CSS - Cascading Style

Sheets (I)
2.1 Resurse
• Pentru un tutorial CSS online consultaţi: CSS
• Pentru un tutorial HTML online consultaţi: HTML
• Pentru un tutorial XHTML online consultaţi: XHTML
2.2 Tutorial
CSS este un acronim pentru Cascading Style Sheets (foi de stiluri). O foaie
de stiluri conţine reguli de formatare ale elementelor unui document HTML.
Limbajul HTML este folosit pentru descrierea conţinutului ı̂n timp ce CSS este
utilizat pentru realizarea prezentării. Cascading ı̂nseamnă că stilurile se aplică
ı̂n ”cascadă”, proprietăţiile moştenite din alte declaraţii sunt suprascrise de
ultimele proprietăţi ı̂ncărcate de browser. O regulă de stil conţine:
• selectori – elementele cărora li se aplică regulile, separate prin virgulă (,)
• declaraţii – reguli care definesc modul de formatare al selectorilor, scrise

sub formă de perechi proprietate-valoare, separate prin punct şi virgulă
(;)
s e le c to r 1 , s e l e c t o r 2 { property1 : value1 ; property2 :

value2 }
Exemplu
H1 , H2 , H3 { f o n t −f a m i l y : H e l v e t i c a , Tahoma , A r i a l }
H1 { f o n t −s i z e : x−l a r g e ; c o l o r : r e d }
H2 { f o n t −s i z e : 12 pt }
13
14 CAPITOLUL 2. CSS - CASCADING STYLE SHEETS (I)
2.3 Aplicarea CSS

Există 3 modalităţi de aplicare a regulilor CSS.
• In-line
• Definiţii interne documentului HTML
• Definiţii externe ı̂n fişiere CSS
2.3.1 Stilurile in-line

Stilurile in-line sunt specificate chiar in tag-urile HTML cu atributul style, stilul
fiind aplicat doar containerului respectiv.
<p s t y l e=” c o l o r : r e d ”>t e x t</p>
Rezultatul aplicării acestui stil este colorarea paragrafului specificat ı̂n roşu.
Utilizarea stilurilor inline nu este recomandată, deoarece ele ı̂ncarcă documen-
tul HTML, fiind recomandat ca acestea să conţină cât mai puţine detalii de
prezentare.
2.3.2 Stilurile embedded

Stilurile embedded (interne documentului HTML) sunt specificate ı̂n interiorul
containerului head prin tag-uri style de tipul text/css.
< !DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1 . 0 S t r i c t //EN”
” h t t p : / /www. w3 . o r g /TR/ xhtml1 /DTD/ xhtml1−s t r i c t . dtd ”>
<html>
<head>
<t i t l e>CSS Example</ t i t l e>
<s t y l e type=” t e x t / c s s ”>
p {
c o l o r : red ;
}
a {
c o l o r : blue ;
}
</ s t y l e>
...
Acest stil va aplica tuturor paragrafelor din pagină culoarea roşie şi tuturor
link-urilor culoarea albastră. Stilurile embedded pot fi utilizate atunci când
numărul de reguli este relativ mic.
2.4 Definiţiile externe

Definiţiile externe sunt conţinute ı̂ntr-un fişier CSS separat. Este recomandată
această metodă pentru a separa conţinutul (documentul HTML) de prezentare
(foia de stil). Un exemplu de fişier CSS este:
2.5. SELECTORI, PROPRIETĂŢI ŞI VALORI 15
p {
c o l o r : red ;
}
a {
c o l o r : blue ;
}
Acest fişier va fi salvat cu extensia .css şi pentru a putea fi utilizat, trebuie
specificat ı̂n tag-ul header al documentului HTML. Tag-ul corespunzator este:
<l i n k r e l=“ s t y l e s h e e t ” type=” t e x t / c s s ” href=” a d r e s a
document c s s ”>
< !DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1 . 0 S t r i c t //EN”

” h t t p : / /www. w3 . o r g /TR/ xhtml1 /DTD/ xhtml1−s t r i c t . dtd ”>
<html>
<head>
<t i t l e>CSS Example</ t i t l e>
<l i n k r e l=” s t y l e s h e e t ” type=” t e x t / c s s ” href=”web . c s s ”
/>
...
Foile de stil externe pot fi specificate şi utilizând tag-ul style cu atributul
@import. În tag-ul head al documentului HTML se introduc marcaje style
astfel:
<s t y l e type=” t e x t / c s s ”>
@import u r l ( a d r e s a document c s s ) ;
</ s t y l e>
2.5 Selectori, proprietăţi şi valori

Pentru orice selector avem proprietăţi. Acestea sunt specificate ı̂ntr-un bloc
delimitat de acolade şi sunt sub forma de identificatori, de exemplu: color, font-
weight, sau background-color. Orice element HTML poate fi folosit ca selector.
De exemplu:
p {
t e x t −i n d e n t : 3em ;
}
Simbolul * reprezintă toate elementele HTML, şi proprietăţile specificate vor

fi aplicate tuturor elementelor. O valoare este atribuită unei proprietăţi după
simbolul (:). Proprietăţile sunt separate prin simbolul (;).
body {
f o n t −s i z e : 0 . 8 em ;
c o l o r : navy ;
}
Exemplul de mai sus va formata elementul body utilizând valorile pentru

proprietăţile font-size şi color specificate. Clase – o clasă este un identificator
care poate referi mai multe elemente din documentul HTML; o clasă este definită
prin numele ei prefixat de punct (.)
• warning color: red; background-color: yellow
• clasa este referită prin atributul class al elementelor
<p c l a s s=“warning”> A t e n t i e ! ! ! </p>

<h1 c l a s s=“warning”>A t e n t i e mare ! ! ! </h1>
Identificatori – un identificator se referă la cel mult un element din docu-

mentul HTML.
• identificatorul este definit prin numele lui prefixat de diez (#)
• #licenta color: red; border: solid 2pt yellow
• Un identificator apare ı̂n documentul HTML ı̂n atributul id al unui singur

element
<p id=” l i c e n t a ”>Nu a v e t i v o i e s ă . . . </p>
Contextuali – doi sau mai mulţi selectori care stabilesc contextul ı̂n care se
aplică stilul
• selector#id – stilul se aplică dacă selector are identificatorul id
• selector.clasa – stilul se aplică dacă selector are clasa clasa
• selector1 selector2 – stilul se aplică dacă selector1 este conţinut ı̂n selector2
(selectorii pot fi oricare din selectorii descrişi anterior)
2.5.1 Unităţi de măsură

Pe langă unităţi de măsură specifice anumitor proprietăţi, ı̂n CSS există şi câteva
unităţi de măsură standard:
em (de exemplu font-size: 2em) este folosită pentru calcularea dimensiunii unui
font. ”2em” ı̂nseamnă că dimensiunea fontului va fi de 2 ori mai mare decât
dimensiunea fontului elementului părinte.
px (de exemplu font-size: 12px) este unitatea de măsură pentru pixeli.
pt (de exemplu font-size: 12pt) este unitatea de măsură pentru puncte.
% (de exemplu font-size: 80%) este unitatea pentru procentaje.
Alte unităţi de măsură includ pc (picas), cm, mm şi in. Când o valoare este zero,
nu mai trebuie specificată şi o unitate de măsură. Este indicat să se utilizeze
unităţile em şi % pentru dimensiunea fonturilor ı̂n locul unităţilor px şi pt care
pot duce la probleme de vizualizare a paginilor.
2.6. CULORI 17
2.6 Culori
CSS pune la dispoziţie 16.777.216 culori. Culorile pot fi specificate sub forma
de nume, cod rgb (red/green/blue) sau cod hexa. Pentru culoarea roşu sunt
acceptate următoarele forme:
red
rgb ( 2 5 5 , 0 , 0 )
rgb (100% ,0% ,0%)
#f f 0 0 0 0
#f 0 0
Există 17 nume predefinite de culori: aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, orange, purple, red, silver, teal, white, şi yellow.
Transparent este de asemenea o valoare validă. Cele 3 elemente din codul RGB
iau valori ı̂ntre 0 şi 255. Un număr ı̂n hexazecimal poate fi reprezentat cu 3 sau
6 elemente. Forma cu 3 elemente este o variantă compresată a celei cu 6 (de
exemplu, #f00 devine #ff0000, #c96 devine #cc9966). Formatul hexa permite
un control mai fin al culorilor. Culorile pot fi specificate folosind proprietăţile
color şi background-color.
body {
f o n t −s i z e : 0 . 8 em ;
c o l o r : navy ;
}
h1 {
c o l o r : #f f c ;
background−c o l o r : #009;
}
2.7 Text
Dimensiunea şi formatarea textului dintr-o pagină web pot fi modificate folosind
următoarele proprietăţi:
font-family fontul utilizat. Poate fi: arial, helvetica, sans-serif sau alt font
instalat. Nu este recomandat să se utilizeze fonturi puţin răspindite. De
obicei se specifică o listă de fonturi “sigure”. Dacă un font nu este instalat,
atunci browser-ul trece la următorul font din listă.
font-size dimensiunea fontului
font-weight formatează textul. În practică poate lua valorile bold sau normal
deşi sunt posibile şi alte valori: bolder, lighter, 100, 200, 300, 400, 500,
600, 700, 800 şi 900.
font-style specifică dacă textul primeşte modificatorul italic sau nu. Poate
primi valorile italic sau normal.
text-decoration specifică dacă textul este formatat cu modificatorul underline
sau nu. Valorile posibile sunt:
text-decoration: overline
text-decoration: line-through
text-decoration: underline
text-decoration: none
text-transform transformari ale textului.
text-transform: capitalize
text-transform: uppercase
text-transform: lowercase
text-transform: none
body {
f o n t −f a m i l y : a r i a l , h e l v e t i c a , sans− s e r i f ;
f o n t −s i z e : 0 . 8 em ;
}
h1 {
f o n t −s i z e : 2em ;
}
h2 {
f o n t −s i z e : 1 . 5 em ;
}
a {
t e x t −d e c o r a t i o n : none ;
}
strong {
f o n t −s t y l e : i t a l i c ;
t e x t −t r a n s f o r m : u p p e r c a s e ;
}
2.7.1 Formatare avansată a textului
p {
l e t t e r −s p a c i n g : 0 . 5 em ;
word−s p a c i n g : 2em ;
l i n e −h e i g h t : 1 . 5 ;
t e x t −a l i g n : c e n t e r ;
}
letter-spacing şi word-spacing sunt proprietăţi pentru specificarea spaţiilor

dintre litere şi cuvinte.
Valorile posibile sunt normal sau o lungime.
text-align poate primi valorile left, right, center sau justify.
2.8. MODELUL BOX 19
2.7.2 Margini şi zone de umplere (padding)

Margin şi padding sunt cele mai folosite proprietăţi pentru distanţarea elemente-
lor. Prima proprietate specifică spaţiul extern pentru un element, iar padding-ul
specifică spaţiul intern.
Se pot specifica valori separate pentru cele patru laturi ale unui element:
top, right, left şi bottom, margin-top, margin-right, margin-bottom, margin-
left, padding-top, padding-right, padding-bottom şi padding-left.
Marginile, zonele de umplere şi bordurile (borders) fac parte din modelul
Box care este utilizat de CSS.
2.8 Modelul Box

CSS foloseşte un model de formatare orientat pe blocuri: fiecare element produce
o zonă dreptunghiulară (cu excepţia elementelor care au proprietatea display =
none).
Fiecare bloc are un conţinut ı̂nconjurat de o zonă de umplere (padding area),
o bordură (border), şi o zonă de margine (margin area).
• zona de completare are acelaşi fundal ca şi elementul (setat prin proprie-
tatea background).
• culoarea şi stilul bordurii sunt stabilite prin proprietăţile border
• zona de margine este mereu transparentă
h2 {
f o n t −s i z e : 1 . 5 em ;
background−c o l o r : #c c c ;
margin : 1em ;
padding : 3em ;
}
2.8.1 Proprietăţile blocurilor

• Prin intermediul acestei grupe de proprietăţi se stabilesc dimensiunile,
poziţia, marginile etc. pentru blocurile care reprezintă elementele.
• Există proprietăţi pentru formatarea:

– zonei de margine: margin-top, margin-right, margin-bottom, margin-

left, margin
– zonei de umplere: padding-top, padding-right, padding-bottom, padding-
left, padding
– bordurii: border-top-width, border-right-width, border-bottom-width,
border-leftwidth, border-width, border-color, border-style, border-
top, border-right, borderbottom, border-left, border
– conţinutului: width, height, float, clear
2.8.2 Proprietăţi pentru zona de margine

Proprietăţi pentru zona de margine - margin-top, margin-right, margin-bottom,
margin-left
v a l o a r e : auto | <mărime> | <p r o c e n t>
implicit: 0
• poate fi negativa, dar exista limite specifice implementarii
• valori procentuale: relative la lăţimea elementului părinte
• se aplica la toate elementele; nu este mostenită
• stabileste dimensiunea zonei de margine din partea de sus/dreapta/jo-

s/stânga a elementului.
2.8.3 Proprietăţi pentru zona de umplere

Proprietăţi pentru zona de umplere: padding-top, padding-right, padding-bottom,
padding-left
v a l o a r e : <mărime> | <p r o c e n t>
implicit: 0
• nu poate fi negativă
• valori procentuale: relative la lăţimea elementului părinte
• se aplica la toate elementele; nu este moştenită
• stabileşte dimensiunea zonei de umplere din partea de sus/dreapta/jo-

s/stânga a elementului.
Dacă sunt prezente patru valori, atunci ele se aplică pentru top, right, bottom şi
left, ı̂n această ordine. Dacă este dată o singură valoare, aceasta este atribuită
tuturor zonelor de umplere. Dacă sunt două sau trei valori, valorile lipsă se iau
din cele ale părţilor opuse.
2.9. EXEMPLU 21
2.8.4 Borduri
Pentru a realiza o bordura in jurul unui element se foloseste proprietatea border-
style. Valorile posibile sunt: solid, dotted, dashed, double, groove, ridge, inset
şi outset.
Grosimea bordurii este specificată cu proprietatea border-width. Valorile
posibile sunt: thin — medium — thick — ¡mărime¿.
Pentru specificarea bordurii separat pe fiecare latură avem: border-top-
width, border-right-width, border-bottom-width, border-left-width
h2 {
border −s t y l e : dashed ;
border −width : 3px ;
border −l e f t −width : 10 px ;
border −r i g h t −width : 10 px ;
border −c o l o r : r e d ;
}
2.9 Exemplu
Fie următorul document XHTML
<!DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1 . 0 S t r i c t //EN”
” h t t p : / /www. w3 . o r g /TR/ xhtml1 /DTD/ xhtml1−s t r i c t . dtd”>
<html>
<head>
< t i t l e >L a b o r a t o r de Programare Web</ t i t l e >
<!−− Un c o m e n t a r i u −−>
</head>
<body>
<h1>Exemplu de p a g i n a Web</h1>
<h2>D e s c r i e r e </h2>
<p>O p a g i n ă s i m p l ă XHTML. <s t r o n g > O p a g i n ă s i m p l ă XHTML
.</ s t r o n g > O p a g i n ă s i m p l ă XHTML. O p a g i n ă s i m p l ă
XHTML. O p a g i n ă s i m p l ă XHTML. O p a g i n ă s i m p l ă XHTML. O
p a g i n ă s i m p l ă XHTML. O p a g i n ă s i m p l ă XHTML. O p a g i n ă
s i m p l ă XHTML. O p a g i n ă s i m p l ă XHTML. O p a g i n ă s i m p l ă
XHTML. O p a g i n ă s i m p l ă XHTML. O p a g i n ă s i m p l ă XHTML.</
p>
<h2>Curriculum </h2>
<ul>
<l i >
Programare Web
<o l >
< l i >XHTML</ l i >
< l i >CSS</ l i >
< l i >J a v a s c r i p t </ l i >

< l i >PHP</ l i >
</o l >
</ l i >
< l i >R e t e l e de c a l c u l a t o a r e .</ l i >
</ul>
<h2>Unde p o a t e f i g a s i t t u t o r i a l u l de HTML</h2>
<p><a h r e f =”h t t p : / /www. w 3 s c h o o l s . com/ html / d e f a u l t . asp”>
<img s r c =”h t t p : / / o r a r . u p i t . r o / S i g l a U p i t . GIF”
width =”157” h e i g h t =”70” a l t =”UPIT l o g o ” /></a></p>
<h3>Un t a b e l </h3>
<t a b l e b o r d e r =”1”>
<t r >
<td>Row 1 , c e l l 1</td>
</t r >
<t r >
</t r >
<t r >
</t r >
<t r >
</t r >
</ t a b l e >
<h3>Formular </h3>
<p><s t r o n g >O b s e r v a t i i :</ s t r o n g > Un f o r m u l a r c a r e nu f a c e
n i m i c !</p>
<form a c t i o n =” a c t i u n e . php” method=”p o s t”>

<p>Nume:</p>
<p><i n p u t type=” t e x t ” name=”nume” v a l u e=”Nume s i
prenume ” /></p>
<p>C o m e n t a r i i : </p>
<p><t e x t a r e a rows =”10” c o l s =”20” name=” c o m e n t a r i i ”>
C o m e n t a r i i l e dvs </t e x t a r e a ></p>
<p>Sex :</p>
2.9. EXEMPLU 23
<p><i n p u t type=” r a d i o ” name=”s e x ” v a l u e=”m a s c u l i n ” />

Masculin </p>
<p><i n p u t type=” r a d i o ” name=”s e x ” v a l u e=”f e m i n i n ” />
Feminin </p>
<p><i n p u t type=”submit ” /></p>
<p><i n p u t type=” r e s e t ” /></p>
</form>
</body>
</html>
Realizati legatura dintre fisierul prezentat mai sus si urmatorul document
CSS.
body {
f o n t −f a m i l y : a r i a l , h e l v e t i c a , sans− s e r i f ;
f o n t −s i z e : 80%;
color : black ;
background−c o l o r : #f f c ;
margin : 1em ;
padding : 0 ;
}
/∗ Un c o m e n t a r i u ∗/
p {
l i n e −h e i g h t : 1 . 5 em ;
}
h1 {
c o l o r : #f f c ;
margin : 0 ;
margin−bottom : 0 . 5 em ;
padding : 0 . 2 5em ;
t e x t −a l i g n : c e n t e r ;
l e t t e r −s p a c i n g : 0 . 5 em ;
border −bottom−s t y l e : s o l i d ;
border −bottom−width : 0 . 5 em ;
border −bottom−c o l o r : #c00 ;
}
h2 {
c o l o r : white ;
f o n t −s i z e : 1 . 5 em ;
margin : 0 ;
padding : 0 . 1 em ;
padding− l e f t : 1em ;
}
h3 {
c o l o r : #999;
f o n t −s i z e : 1 . 2 5em ;
}
img {
border −s t y l e : dashed ;
border −width : 2px ;
border −c o l o r : #c c c ;
}
a {
}
strong {
t e x t −t r a n s f o r m : u p p e r c a s e ;
}
li {
c o l o r : #900;
}
table {
}
2.10 Exercitii
Realizaţi foile de stil şi documentele HTML care să prezinte următoarele vederi
ı̂n browser.
Exerciţiul 16 Folosiţi proprietatea border-style

2.10. EXERCITII 25
Exerciţiul 17 Folosiţi proprietăţile color şi background
Exerciţiul 18 Folosiţi proprietatea background-color

Exerciţiul 19 Folosiţi proprietatea word-spacing
Exerciţiul 20 Folosiţi proprietatea letter-spacing

2.10. EXERCITII 27
Exerciţiul 21 Folosiţi proprietatea text-decoration
Exerciţiul 22 Folosiţi proprietatea text-transform

Exerciţiul 23 Folosiţi proprietatea font-family
Exerciţiul 24 Folosiţi proprietatea font

Exerciţiul 25 Folosiţi proprietatea margin pentru un tag p
2.11 Bibliografie
• CSS Tutorial

Capitolul 3
Descriere: CSS - Cascading

Style Sheets (II)
3.1 Resurse
• Pentru un tutorial HTML online consultaţi: HTML
• Pentru un tutorial XHTML online consultaţi: XHTML
3.2 Clase şi identificatori

Clasele şi identificatorii permit definirea propriilor selectori. Elementele HTML
aparţinând aceluiaşi tip pot fi prezentate diferit ı̂n funcţie de clasa sau ID-ul cu
care sunt definite.
Clase – o clasă este un identificator care poate referi mai multe elemente
din documentul HTML.
• clasa este definită prin numele ei prefixat de punct (.)

warning { c o l o r : r e d ; background−c o l o r : y e l l o w }
• clasa este referită prin atributul class al elementelor

<p c l a s s=“warning”> A t e n ţ i e ! ! ! </p>
<h1 c l a s s=“warning”>A t e n ţ i e mare ! ! ! </h1>
Identificatori – un identificator se referă la cel mult un element din docu-

mentul HTML.
• identificatorul este definit prin numele lui prefixat de diez (#)

#l i c e n t a { c o l o r : r e d ; b o r d e r : s o l i d 2 pt y e l l o w }
31
32 CAPITOLUL 3. DESCRIERE: CSS - CASCADING STYLE SHEETS (II)
• Un identificator apare ı̂n documentul HTML ı̂n atributul id al unui singur

element
<p id=“ l i c e n t a ”>Nu a v e t i v o i e s • . . . </p>
Un exemplu de utilizare:
#top {
padding : 1em
}
. intro {
c o l o r : red ;
f o n t −w e i g h t : b o l d ;
}
Legătura dintre elementele HTML şi CSS se face prin atributele id şi class.
<div id=” top ”>
<h1>Curs de programare web</h1>
<p c l a s s=” i n t r o ”>CSS e s t e un acronim p e n t r u Cascading
S t y l e S h e e t s</p>
<p c l a s s=” i n t r o ”>R e s p e c t a t i i n t o t d e a u n a s t a n d a r d e l e
Web</p>
</ div>
3.3 Span şi Div

Tag-urile span şi div sunt folosite pe scara largă ı̂mpreună cu CSS. În comparaţie
cu alte tag-uri HTML, cum ar fi p, h1 sau a, aceste tag-uri nu sunt folosite pentru
a reprezenta un conţinut, ci doar pentru gruparea elementelor HTML. Folosind
atributele class şi id, putem identifica cu uşurinţă div-urile dintr-un document
şi cu ajutorul CSS putem aplica pentru fiecare o formatare specială.
Diferenţa dintre span şi div, este ca tag-ul span este afişat in-line pe când
tag-ul div este afisat block-line.
<div id=” c o n t a i n e r ”>
<p>Un exemplu <span c l a s s=”unSpan”>s i m p l u</span></p>
</ div>
3.4 Grupuri şi contextuali

Aceleaşi proprietăţi pot fi atribuite simultan mai multor selectori prin separarea
numelor acestora prin virgule. De exemplu, regulile de mai jos:
h2 {
c o l o r : red ;
}
. oClasa {
3.5. PSEUDO-CLASE ŞI PSEUDO-ELEMENTE 33
c o l o r : red ;
}
. altaClasa {
c o l o r : red ;
}
pot fi comprimate intr-o singura regula

h2 , . oClasa , . a l t a C l a s a {
c o l o r : red ;
}
Dacă fişierul CSS este bine structurat nu este nevoie de foarte multe reguli
de tip class sau ID, deoarece se pot specifica proprietăţi pentru selectorii din
cadrul altor selectori. De exemplu:
#top {
padding : 1em
}
#top h1 {
c o l o r : #f f 0 ;
}
#top p {
c o l o r : red ;
f o n t −w e i g h t : b o l d ;
}
Regula de mai sus aplicată codului HTML ce urmează, produce acelaşi re-
zultat ca şi ı̂n cazul utilizării claselor şi identificatorilor.
<div id=” top ”>
<h1>Curs de programare web</h1>
<p>CSS e s t e un acronim p e n t r u Cascading S t y l e S h e e t s<
/p>
<p>R e s p e c t a t i i n t o t d e a u n a s t a n d a r d e l e Web</p>
</ div>
Contextuali – doi sau mai mulţi selectori care stabilesc contextul ı̂n care
se aplică stilul
• selector#id – stilul se aplică dacă selector are identificatorul id
• selector.clasa – stilul se aplică dacă selector are clasa clasa
• selector1 selector2 – stilul se aplică dacă selector1 este conţinut ı̂n selector2
(selectorii pot fi oricare din selectorii descrişi anterior)
3.5 Pseudo-clase şi pseudo-elemente

Sunt clase şi elemente speciale care sunt recunoscute de browser.
• pseudo-clasele permit diferenţierea ı̂ntre mai multe tipuri de elemente.
• pseudo-elementele sunt sub-părţi de elemente.

Sunt definite prin construcţii:
s e l e c t o r : pseudo−c l a s a { p r o p e r t y : v a l u e }
s e l e c t o r : pseudo−e l e m e n t { p r o p e r t y : v a l u e }
Pseudo-clasele marcajului a:
a : l i n k { c o l o r : red }
link este pentru un link nevizitat

a : a c t i v e { c o l o r : b l u e ; f o n t −s i z e : 125% }
active este pentru momentul ı̂n care link-ul primeşte focus-ul

a : v i s i t e d { c o l o r : g r e e n ; f o n t −s i z e : 85% }
visited este pentru un link care a fost vizitat

a : hover { c o l o r : g o l d ; }
hover este pentru momentul ı̂n care cursorul mouse-ului este poziţionat peste
link. Pseudo-elementele marcajelor blocuri (p, h1, div, etc):
p : f i r s t −l i n e { f o n t −w e i g h t : b o l d }
p : f i r s t −l e t t e r { f o n t −s i z e : 300%; f l o a t : l e f t }
a : link {
c o l o r : blue ;
}
a: visited {
color : purple ;
}
a : active {
c o l o r : red ;
}
a : hover {
c o l o r : blue ;
background−c o l o r : y e l l o w ;
}
3.6 Imagini de fundal

Pentru manipularea imaginilor de fundal (background images) se utilizează pro-
prietatea background.
body {
background : w h i t e u r l ( h t t p : / /www. w 3 s c h o o l s . com/ c s s /
bgdesert . jpg )
no−r e p e a t top r i g h t ;
}
3.7. PROPRIETATEA DISPLAY 35
Definiţia de mai sus reuneşte următoarele proprietăţi.

background-color specifică culoarea de fundal a unui element.
• valoare: hculoarei | transparent
Se aplică la toate elementele; nu se moşteneşte, fundalul părintelui este
implicit vizibil datorită valorii transparent a proprietăţii.
background -image permite indicarea unei imagini care să constituie fundal
pentru element.
• valoare: hadresăi | none
La setarea unei imagini de fundal este recomandată definirea unei culori
de fundal pentru cazul când imaginea nu este accesibilă.
background-repeat dacă este specificată o imagine de fundal, prin această
proprietate se stabileste modul de repetare al imaginii.
• repeat - repetare pe verticală şi pe horizontală
• repeat-x, repeat-y - repetare imaginii pe orizontală, respectiv pe ver-
ticală
• no-repeat - imaginea nu este repetată
background-position dacă este specificată o imagine de fundal, indică poziţia
iniţială a unei imagini. Poate avea valorile top, center, bottom, left, right
sau o combinatie a lor ca ı̂n exemplul de mai sus. Este posibil să se indice
o pereche hprocenti hmărimei, ca şi poziţii negative.
Valoarea x y plasează imaginea cu x pixeli spre dreapta şi y pixeli ı̂n jos
pornind din coltul stânga sus.
Valoarea x% y% suprapune punctele care se află la x% pe orizontală şi y%
pe verticală din imagine şi din zona de conţinut. De exemplu:
• valoarea 0
• valoarea 100
• Dacă numai un procentaj sau o mărime este specificată, ea se referă
la orizontală, poziţia verticală fiind considerată 50
Proprietatea background stabileşte ı̂ntotdeauna toate valorile individuale (cele
nespecificate explicit vor fi setate la valorile iniţiale).
3.7 Proprietatea display

Specifică modul ı̂n care elementele vor fi tratate de către browser. Aceste pro-
prietăţi efectuează mai degrabă o clasificare a elementelor decât o intervenţie
asupra unor atribute vizuale. Există trei tipuri fundamentale: in-line, block şi
none.
inline – elementele care sunt afişate in-line vor fi poziţionate pe aceeaşi linie
cu conţinutul precedent din document. Elementele strong, anchor sau
emphasis fac parte din această categorie.
block – elementul creează un bloc nou poziţionat relativ la blocurile adiacente

ı̂n concordanţă cu modelul de formatare CSS (Box Model). Înainte şi după
bloc este introdusă o linie nouă. Elementele tipice care sunt afişate block
sunt de tipul paragraph şi header.
none – elementul şi conţinutul său nu se afişează.
Următorul exemplu manipulează câteva elemente in-line şi block-line.
h1 {
display : inline ;
}
p {
display : inline ;
f o n t −s i z e : 0 . 9 em ;
padding− l e f t : 2em ;
}
Proprietăţile display: none şi visibility: hidden au acelaşi efect, adică nu

afişează elementul şi conţinutul său, dar acţionează ı̂n mod diferit: display:
none ı̂ndepărtează complet elementul din layout iar visibiliy: hidden păstrează
elementul ı̂n layout, dar nu afişează conţinutul.
Alte tipuri pentru proprietatea display sunt:
list-item - elementul creează un bloc nou cu un marcaj de item de listă ı̂n faţă.
Un exemplu tipic este elementul li. Pentru o funcţionare corectă aceste
elemente trebuie incluse ı̂n tag-uri ul sau ol.
li {
c o l o r : #900;
}
Pentru formatarea marcajelor unei liste avem la dispoziţie următoarele pro-

prietăţi:
list-style-image - se aplică la toate elementele cu display: list-item şi specifică
imaginea utilizată drept marcaj de item.
• value: hurli | none
list-style-type - specifică marcajul itemilor de listă ı̂n cazul ı̂n care proprieta-
tea list-style-image este none sau imaginea nu poate fi afisată. Poate lua
una din urmatoarele valori:
• disc,
• circle,
• square,
• decimal,
• lower-roman,
• upper-roman,
3.8. PAGE LAYOUT 37
• lower-alpha,
• upper-alpha,
• none.
list-style-position - specifică poziţia marcajului ı̂n raport cu conţinutul ele-
mentului de listă. Poate lua valorile inside sau outside. list-style - specifică
simultan toate proprietăţile care se referă la modul de afişare a listelor:
liststyle- image, list-style-position, list-style-type.
• valoare: h list −style−typei | hlist-style-positioni | hurli
Se recomandă precizarea stilurilor pentru itemi la nivel de listă (ı̂n marcajele ol
şi ul)
ul {
l i s t −s t y l e : s q u a r e i n s i d e u r l ( l o g o . png )
}
3.8 Page Layout

Poziţionarea elementelor folosind CSS este mult mai naturală şi mai simplă decât
poziţionarea folosind tabele HTML. Secţiunile unei pagini pot fi poziţionate
absolut sau relativ faţă de celelalte secţiuni.
3.8.1 Proprietatea position

Proprietatea position este folosită pentru a specifica daca un element este poziţionat
absolute, relative, static sau fixed.
static – este proprietatea implicită, elementele fiind poziţionate normal, aşa
cum apar ı̂n documentul HTML.
relative – efectul este similar cu static, dar se poate specifica un offset faţă pe
poziţia originală folosind proprietăţile: top, right, bottom şi left.
absolute – anulează potionarea originală şi plasează elementul oriunde ı̂n pa-
gină folosind proprietăţile top, right, bottom şi left.
fixed – elementul se comportă ca ı̂n cazul folosirii valorii absolute, dar de
data aceasta este poziţionat relativ la fereastra browserului ı̂n loc să fie
poziţionat relativ la pagina web. În teorie elementele definite cu fixed ar
trebui să rămână imobile chiar ı̂n cazul ı̂n care se efectuează un scroll. Nu
funcţionează ı̂n IE.
Folosind poziţionarea absolută putem realiza un layout cu 2 coloane pentru
următorul document HTML.
<div id=” n a v i g a t i o n ”>
<ul>
< l i><a href=”unu . html ”>Unu</a></ l i>
< l i><a href=” d o i . html ”>Doi</a></ l i>
< l i><a href=” t r e i . html ”>T r e i</a></ l i>
</ ul>
</ div>
<div id=” c o n t e n t ”>
<h1>Un exemplu de p o z i t i o n a r e .</h1>
<p>Un exemplu de p o z i t i o n a r e . Un exemplu de
pozitionare .
Un exemplu de p o z i t i o n a r e . Un exemplu de p o z i t i o n a r e .
Un exemplu de p o z i t i o n a r e .</p>
<p>Alt exemplu de p o z i t i o n a r e .</p>
</ div>
Aplicam urmatoarele reguli CSS

#n a v i g a t i o n {
position : absolute ;
top : 0 ;
l e f t : 0;
width : 10em ;
}
#c o n t e n t {
margin− l e f t : 10em ;
}
Aceste definiţii vor poziţiona absolut bara de navigare ı̂n colţul stânga sus.
Deoarece dimensiunea este 10em, se introduce o margine cu aceeaşi valoare
pentru conţinut.
Dacă dorim să extindem designul paginii astfel ı̂ncat să includă a treia co-
loană, modificăm regulile CSS astfel:
top : 0 ;
l e f t : 0;
width : 10em ;
}
#n a v i g a t i o n 2 {
top : 0 ;
right : 0;
width : 10em ;
}
#c o n t e n t {
margin−top : 0 ;
margin−bottom : 0 ;
margin−r i g h t : 10em ;
}
În documentul HTML se defineşte ı̂ncă un container div cu id-ul navigation2.

<div id=” n a v i g a t i o n 2 ”>
<ul>
3.8. PAGE LAYOUT 39
< l i><a href=” p a t r u . html ”>Patru</a></ l i>

< l i><a href=” c i n c i . html ”>C i n c i</a></ l i>
</ ul>
</ div>
Dezavantajul poziţionării absolute constă ı̂n dificultatea adaptării regulilor

de mai sus pentru layout-uri mai complexe unde se folosesc valori relative pen-
tru dimensiuni, sau care conţin footer, header, etc. Pentru că elementele sunt
poziţionate absolut este dificil să determinam cu precizie unde se termină ele-
mentele. Pentru aceste cazuri se foloseşte poziţionare de tip float.
3.8.2 Proprietatea float

Proprietatea float specifică locul ı̂n care este afişat elementul. Poate lua valorile
left, right sau none. Pentru left (right) - elementul este tratat ca un bloc si este
mutat la stânga (respectiv la dreapta) şi textul va curge ı̂n dreapta (respectiv
stânga) lui.
Folosind exemplul HTML anterior putem aplica următoarele reguli CSS
(efectul este identic) dar putem ı̂mbogăţi layout-ul cu un footer.
float : left ;
width : 10em ;
}
#n a v i g a t i o n 2 {
float : right ;
width : 10em ;
}
#c o n t e n t {
margin−top : 0 ;
margin−bottom : 0 ;
margin−r i g h t : 10em ;
}
Dacă nu dorim ca următorul element să ı̂ncapsuleze obiectele flotante, pu-

tem utiliza proprietatea clear. Valorile posibile sunt none, left, right sau both.
Proprietatea clear specifică dacă elementul permite elemente flotante ı̂n părţile
laterale.
none - sunt permise elemente flotante pe laturile elementului.
left - nu sunt permise elemente flotante ı̂n stânga elementului (acesta va fi

mutat ı̂nainte de orice element flotant spre stânga).
right - nu sunt permise elemente flotante ı̂n dreapta elementului (acesta va fi

mutat ı̂nainte de orice element flotant spre dreapta).
both - nu sunt acceptate elemente flotante ı̂n jurul elementului.
Pentru a adauga un footer la designul specificat anterior vom specifica următoarea

regulă:
#f o o t e r {
c l e a r : both ;
}
În documentul HTML se aduagă un element cu ID-ul footer.
3.9 Exerciţii
Realizaţi foile de stil şi documentele HTML care să prezinte următoarele vederi
ı̂n browser.
3.9. EXERCIŢII 41
Exerciţiul 26 Folosiţi proprietăţile background-image şi background-repeat.

Exerciţiul 27 Folosiţi proprietăţile background-image şi background-repeat. Trataţi

şi cazul repetării pe orizontală.
3.9. EXERCIŢII 43
Exerciţiul 28 Folosiţi proprietăţile background-image, background-repeat şi ba-

ckground attachement.
Exerciţiul 29 Folosiţi proprietatea background.

3.9. EXERCIŢII 45
Exerciţiul 30 Folosiţi proprietatea list-style-type. Utilizaţi toate valorile posi-

bile.
Exerciţiul 31 Folosiţi proprietatea list-style-image.

3.9. EXERCIŢII 47
Exerciţiul 32 Folosiţi proprietatea float. Testaţi pentru valorile left, right şi
none. Adaugaţi o margine de 20 px la stânga, 15px jos, 0px sus şi la dreapta.
Adaugaţi şi o bordură de culoare roşie cu dimensiunea de 2px.
Exerciţiul 33 Se utilizează un container div. Folosiţi proprietăţile float, width,

margin, padding, border şi text-align.
3.9. EXERCIŢII 49
Exerciţiul 34 Realizaţi un meniu orizontal. Modificaţi apoi regulile CSS pen-

tru a aranja meniul pe verticală.
Exerciţiul 35 Poziţionaţi un element relativ la poziţia lui iniţială. Folosiţi

proprietatea position.
3.9. EXERCIŢII 51
Exerciţiul 36 Pozitionaţi un element utilizând modul absolute. Folosiţi propri-

etatea position. Ascundeţi tagul header folosind proprietatea visibility: hidden.
Exerciţiul 37 Adaugaţi culori unui hyperlink. Folosiţi pseudoclase.

Exerciţiul 38 Definiţi reguli CSS pentru modificarea stilului hyperlink-urilor.

Folosiţi pseudo-clase.
3.10 Bibliografie
• CSS Tutorial

Capitolul 4
Descriere: CSS – Cascading

Style Sheets (III)
4.1 Resurse
• Pentru un tutorial de CSS Layout consultaţi: CSS Layout
4.2 Proiect (I)
Descriere : Realizaţi un layout pentru un site web folosind CSS şi XHTML.
Cerinţe : Design-ul trebuie să respecte următoarele reguli:
1. Site-ul trebuie să fie compatibil cu următoarele browsere: Firefox

1.* – 2.0, Internet Explorer 6 şi Internet Explorer 7. Vizualizarea
site-ului trebuie să fie identică ı̂n browserele specificate. Regulile
CSS utilizate trebuie să respecte standardele W3C. Fişierele CSS şi
XHTML trebuie să treacă de validarea CSS şi XHTML:
• http://jigsaw.w3.org/css-validator/
• http://validator.w3.org/
2. Proiectul va fi notat ı̂n funcţie de aspect şi funcţionalitate. Nu sunt

impuse dimensiuni, dar designul trebuie să includă următoarele ele-
mente de bază: Meniu Principal, Header, Sidebar, Conţinut, Footer.
Un exemplu de layout care poate fi utilizat este:
55
56CAPITOLUL 4. DESCRIERE: CSS – CASCADING STYLE SHEETS (III)
3. Se va utiliza o schemă de culori unitară care facilitează vizualizarea

site-ului. Utilizarea excesivă a imaginilor de fundal, fonturilor sau
culorilor care fac textul greu descifrabil nu este recomandată. Pentru
selecţia culorilor puteţi folosi instrumente specializate, de exemplu:
• http://www.steeldolphin.com/color scheme.html
4. Proiectul trebuie să includă un meniu principal şi unul secundar,
ambele realizate ı̂n CSS. Meniul principal trebuie să fie compus din
minim 5 elemente, iar submeniul din minim 2 elemente pentru fiecare
pagină. Elementele meniului vor utiliza tehnica image rollover (un
element işi modifică dinamic aspectul ı̂n funcţie de starea ı̂n care se
află: selectat, primeşte focus, activ).
5. Pentru realizarea proiectului NU este permisă folosirea unor instru-
mente software WYSWYG (What You See Is What You Get) care
permit realizarea unui layout ı̂ntr-un mediu vizual.
6. Pentru a ilustra cât mai bine layout-ul adăugaţi conţinut site-ului
(text şi imagini).
7. Proiectul este individual şi va fi susţinut ı̂n Laboratorul 14.
4.3 Bibliografie
• CSS online consultaţi: CSS
• W3C XHTML Tutorial: XHTML

• Creating a CSS Layout from Scratch: CSS Layout
Capitolul 5
Descriere: Limbajul
Javascript (I)
5.1 Resurse
• Pentru un tutorial Javascript online consultaţi: Javascript
5.2 Limbajul JavaScript

• produs de Netscape Communications, numit original ECMAScript
• este destinat folosirii ı̂n cadrul paginilor Web
• codul sursă este interpretat de către browser (client-side scripting)
Inserarea de scripturi JavaScript ı̂n pagini Web se realizează cu marcajul h script
i
• atributul language poate specifica versiunea JavaScript folosită
<s c r i p t l a n g u a g e=” J a v a S c r i p t ”>

// a c e s t a e s t e un c o m e n t a r i u pe o l i n i e
window . s t a t u s=‘ S a l u t ‘ ; // a c e a s t a e s t e o i n s t r u c ţ i u n e
/∗ a c e s t a e s t e un c o m e n t a t i u
pe mai multe l i n i i ∗/
</ s c r i p t>
Codul JavaScript poate fi stocat ı̂ntr-un fişier extern (ı̂n general cu extensia
.js) şi folosit ı̂n cadrul paginii prin construcţia
<s c r i p t l a n g u a g e=” J a v a S c r i p t ” src=” f i l e . j s ” />
5.3 Identificatori
• Un identificat (nume) este un nume asociat unei variabile, funcţii, tip de
dată, etc.
57
58 CAPITOLUL 5. DESCRIERE: LIMBAJUL JAVASCRIPT (I)
• Un identificator
– este alcătuit din litere, cifre, caracterul liniuţă de subliniere (under-

score – ” ”).
– nu poate să conţină spaţii
– nu poate să ı̂nceapă cu o cifră
– nu poate fi unul din cuvintele rezervate ale limbajului JavaScript
• boolean, break, byte, case, char, continue, do, double, else, false, float, for,
if, long, new, null, private, protected, short, static, this, throw, var, void,
while etc.
• este case-sensitive (Test este diferit de TEST)
5.4 Variabile
• variabila este un identificator asociat unei zone de memorie.
• declararea variabilelor este precedată de cuvântul var, dar o variabilă poate

fi folosită fără a fi declarată.
var i , j , k ; // p e n t r u v a r i a b i l e l e i , j s i k s e f a c e
doar d e c l a r a r e
• variabilă nu are asociat un tip, adică este posibil ca variabila să aibă o
valoare numerică şi să i se atribuie o valoare de tip şir de caractere.
• o variabilă neiniţializată are valoarea Undefined. Operatorul de atribuire

(=) este folosit la declarare, pentru iniţializarea variabilelor.
var x=5; // v a r i a b i l a x e s t e d e c l a r a t ă ş i i n i ţ i a l i z a t ă
var s i r=” abc ” ;
• prin variabila locală se ı̂nţelege o variabilă declarată ı̂n interiorul unui bloc
– blocul este delimitat printr-o pereche de acolade, şi poate să apară
ı̂n interiorul instrucţiunii for, ı̂n interiorul unei funcţii etc.
– domeniul de vizibilitate al variabilei este blocul ı̂n care a fost decla-
rată
– domeniul de existenţă al variabilei este perioada execuţiei blocului ı̂n
care a fost declarată
<s c r i p t >
do {
var i = window . prompt ( ” Dati un numar” , ” ” ) ;
// i e s t e l o c a l a
} while ( Math . random ( ) <0.8) ;
</ s c r i p t >
5.5. OPERATORI 59
• prin variabila globală se ı̂nţelege o variabilă declarată ı̂n afara oricărui

bloc
– variabila este declarată direct ı̂n interiorul unui marcaj h script i

– domeniul de vizibilitate al variabilei este toată pagina
– domeniul de existenţă al variabilei este perioada cât pagina este
ı̂ncărcată ı̂n navigator
<s c r i p t >
var i ; // i e s t e g l o b a l a
do {
i = window . prompt ( ” Dati un numar” , ” ” ) ; // i
este locala
} while ( Math . random ( ) <0.8) ;
</ s c r i p t >
5.5 Operatori
Operatori aritmetici : + (adunare); - (scădere); * (^
ınmulţire); / (^
ımpărţire);
% (calculul restului)
Operatori de atribuire : = (se aplică ^

ın forma variabila=expresie),
+=, -=, /=, *=, /=, %=, ^=, &=, |=, <<=, >>= (aceleaşi semnificaţii
ca ^
ın C++)
Operatori de testare a egalităţii : == (EGAL), != (DIFERIT); rezultatul

calculelor este o valoare logică
Operatori relaţionali : <, >, <=, >= ; rezultatul calculelor este o

valoare logică
Operatori de incrementare/decrementare : ++, -- ^

ın forma prefixată
sau postfixată
Operatori pe biţi : | (sau), & (şi), ^ (sau exclusiv), ~ (not); pot

fi utilizaţi cu valori numerice; rezultatul este o valoare numerică
Operatori logici : || (sau - disjuncţie), && (şi - conjuncţie), ! (NOT

- negaţie); rezultatul este o valoare logică
Operatori de deplasare : << (SHIFT LEFT), >> (SHIFT RIGHT)
Operator condiţional : expresie? operand1 : operand2 (dacă expresia

este true, rezultatul este valoarea operandului1; altfel este
valoarea operandului2)
Operator de concatenare : + folosit pentru alipirea a două şiruri

de caractere
Alţi operatori (e.g. typeof)

5.6 Precedenţa operatorilor

• inversare, negaţie pe biţi (-, ~)
• incrementare, decrementare (++, --)
• ^
ınmulţire, ^
ımpărţire (*, /, %)
• adunare, scădere (+, -)
• deplasare (<<, >>)
• comparare (<, >, <=, >=)
• egalitate (==, !=)
• SI pe biţi (&)
• SAU EXCLUSIV pe biţi (^)
• SAU pe biţi ( | )
• conjuncţie (&&)
• disjuncţie (|| )
• condiţional (?:)
• atribuire (=, +=, -=, |=, &=, ^=, *=, /=, >>=, <<=, &&=, ||=,
%=)
5.7 Instrucţiuni
• instrucţiunea vidă: ;
– e.g. ;
• instrucţiuni expresii: formate din expresii (apeluri de funcţii, atribuiri,

etc).
– e.g. a=5;
• instrucţiunea bloc de instrucţiuni:
– e.g. a=b; if(c==3) c=d;
• instrucţiuni de test: if (if-else), switch
• instrucţiuni iterative: while, do-while, for, for-in
• instrucţiuni de control: continue, break, return
• instrucţiuni pentru obiecte: with, for-in

5.8. INSTRUCŢIUNI EXPRESII 61
5.8 Instrucţiuni expresii

• Interacţiunea cu utilizatorul (pe scurt)
– Citirea datelor
• variabila=window.prompt(“Mesaj:”,”Valoare implicită”);
– Scrierea datelor
• document.write(“Mesaj”);
• e.g. Citirea numelui utilizatorului si afişarea unui mesaj.

<html>
<head><t i t l e>S a l u t</ t i t l e></head>
<body>
<h1>
Salut ,
<s c r i p t l a n g u a g e=” j a v a s c r i p t ”>
nume=window . prompt ( ” I n t r o d u c e ţ i
numele dumneavoastră : ” , ” ” ) ;
document . w r i t e ( nume ) ;
</ s c r i p t> ! Ce mai f a c i ?
</h1>
</body>
</html>
5.9 Instrucţiunea if
• Folosită pentru luarea unei decizii ı̂n legătură cu modul ulterior de execuţie
al programului.
if ( expresie )
instructiune1 ;
else
instructiune2 ;
• Se evaluează expresia ca o condiţie booleană. Dacă este adevărată se va

executa instrucţiune1, altfel se va executa instrucţiune2.
• Ramura else este opţională.
• Pot exista instrucţiuni if-else imbricate şi ı̂n acest caz unui else i se asociază
primul if dinaintea lui care nu are else (şi nu este inclus ı̂ntr-un bloc).
i f ( n%2 == 0 )
par = true ;
else
par = f a l s e ;
5.10 Instrucţiunea switch

• Folosită pentru luarea unei decizii pe baza mai multor variante
switch ( e x p r e s i e ) {
case v a l 1 : i n s t r u c t i u n i 1 ; break ;
case v a l 2 : i n s t r u c t i u n i 2 ; break ;
....................
case v a l n : i n s t r u c t i u n i n ; break ;
default : i n s t r u c t i u n i i m p l i c i t e ;
}
• Se evaluează expresia. Valoarea ei se compară pe rând cu constantele

val1, val2, ..., valn. Se va executa instrucţiunea corespunzătoare con-
stantei egale cu valoarea expresiei. Instrucţiunea break este opţională.
Ea forţează programul ca după execuţia unei ramuri case sa se treacă la
instrucţiunea care urmează ı̂n program după switch. În caz contrar s-ar
executa instrucţiunea care apare pe ramura case care urmează după cea
executată. Ramura default este opţională, ea fiind selectată dacă nici o
altă ramură nu a fost selectată.
var s i r=“ S a l u t ” , a=0,b=0, c =0, a l t e =0;
f o r ( var i =0; i <s i r . l e n g t h ; i ++) // s i r . l e n g t h r e t u r n e a z a
lungimea s i r u l u i
switch ( s i r . charAt ( i ) ) {
// s i r . charAt ( i ) r e t u r n e a z a c a r a c t e r u l de pe
p o z i t i a i din s i r
case ” a ” : a++; break ;
case ”b” : b++; break ;
case ” c ” : c++; break ;
default : a l t e ++;
}
5.11 Instrucţiunea while

• Permite execuţia repetată a unei instrucţiuni
while ( e x p r e s i e )
instructiune ;
• Se evaluează expresia ca o condiţie booleană. Dacă este adevărată se exe-

cută instrucţiunea din buclă şi se reia bucla, altfel se continuă programul
cu instrucţiunea de după WHILE.
var n=14 , s =0, i =0;
while ( i<=n ) {
s+=i ;
i ++;
}
5.12. INSTRUCŢIUNEA DO-WHILE 63
5.12 Instrucţiunea do-while

do
instructiune ;
while ( e x p r e s i e ) ;
• Se execută instrucţiunea din buclă. Se evaluează expresia ca o condiţie

booleană. Dacă este adevarată se reia bucla, altfel se continuă programul
cu instrucţiunea de după do-while.
var n=14 , s =0, i =0;
do {
s+=i ;
i ++;
} while ( i<=n )
5.13 Instrucţiunea for

for ( e x p r e s i e i n i t i a l i z a r e ; e x p r e s i e c o n t i n u a r e ;
expresie actualizare )
instructiune ;
• Se evaluează expresie iniţializare. Se evaluează expresie continuare ca o

condiţie booleană.
• Dacă este adevarată se execută instrucţiunea din buclă, se evaluează expre-

sie actualizare şi se reia bucla, altfel se continuă programul cu instrucţiunea
de după for.
• Toate cele trei expresii sunt opţionale (o expresie continuare vidă are va-
loarea true), dar separatorul ”;” este obligatoriu.
var n=14 , f =1;
f o r ( var i =1; i<=n ; i ++)
f ∗= i ;
5.14 Instrucţiunile break şi continue

• Produc ı̂ntreruperea iteraţiei curente ı̂ntr-o buclă
• După execuţia lui break programul va continua cu prima instrucţiune care

urmează după buclă.
var s =0;
f o r ( var i =1; i <=5; i ++) {
i f ( i ==3) break ; // cand i = 3 , b u c l a s e
intrerupe
s += i ;
}
// a i c i s = 1 + 2 = 3
• După execuţia lui continue, programul continuă cu reevaluarea condiţiei

de ciclare a buclei (ı̂n cazul lui for, se execută mai ı̂ntâi expresia de actu-
alizare).
var s =0;
f o r ( var i =1; i <=5; i ++) {
i f ( i ==3) continue ; // cand i = 3 , i t e r a t i a s e
intrerupe ;
// b u c l a c o n t i n u a
s += i ;
}
// a i c i s = 1 + 2 + 4 + 5 = 12
5.15 Funcţii
• funcţie este un grup de declaraţii şi instrucţiuni, grupate sub un nume
comun.
f u n c t i o n n u m e f u n c t i e ( par1 , par2 , . . . , parN ) //
antetul functiei
{
d e c l a r a t i i ; // c o r p u l f u n c t i e i
instructiuni ;
}
• Funcţiile se pot declara oriunde ı̂n interiorul unui bloc ¡script¿, dar nu ı̂n
interiorul altei funcţii sau structuri de control.
• Numele unei funcţii trebuie să fie unic ı̂ntr-un program.
• Declaraţiile şi instrucţiunile funcţiei sunt grupate ı̂ntre acolade.
• Variabilele declarate ı̂n interiorul unei funcţii sunt variabile locale (funcţiei
respective).
• Parametrii din antetul funcţiei formează lista parametrilor formali ai funcţiei.
• Parantezele din antetul funcţiei sunt obligatorii după numele funcţiei, chiar
dacă lista parametrilor formali este vidă.
• funcţie se apelează prin numele ei urmat de valorile lor pentru parametrii
funcţiei
5.16. TIPURI DE DATE DE BAZĂ 65
n u m e f u n c t i e ( v al1 , va2 , . . . , valN )
• Valorile folosite la apelul funcţiei formează lista parametrilor actuali (sau

reali) ai funcţiei.
• Parantezele la apelul funcţiei sunt obligatorii dupa numele functiei, chiar
daca lista parametrilor actuali este vidă.
• Parametrii formali care nu au o valoarea corespondentă sunt iniţializaţi la
apelul funcţiei cu Undefined.
• Funcţiile pot să returneze (să ı̂ntoarcă) un rezultat ı̂n programul sau
funcţia care le apelează prin intermediul instrucţiunii return.
f u n c t i o n max( a , b )
{
i f ( a>b )
return a ;
else
return b ;
}
f u n c t i o n modul ( x )
{
i f ( x<0)
return −x ;
return x ;
}
• Parametri funcţiilor sunt transmişi prin valoare. La apel se face o copie a

parametrului transmis, iar funcţia lucrează cu copia.
5.16 Tipuri de date de bază

• Number
– numere ı̂ntregi: 16 (un număr ı̂n baza 10), 016 (un număr ı̂n baza 8),
0x16 (un număr ı̂n baza 16)
x = 10;
– numere reale: 10.3 (adică 10.3), 10.3e1 (adică 103), 10.3e-1 (adică
1.03)
x = 10.3
– se pot folosi constantele MIN VALUE, MAX VALUE, POSITIVE INFINITY,

NEGATIVE INFINITY, NaN
x = Number .MAX VALUE
• Boolean
– literalii true şi false (cu litere mici) au semnificaţia de adevărat şi
fals.
x = true
– orice număr diferit de 0 şi orice şir de caractere nevid este interpretat
ca valoarea logică true.
x = 2 ; // a d i c ă x == t r u e e s t e a d e v ă r a t ă
x = “” ; // a d i c ă x == t r u e e s t e f a l s ă
• Undefined, Null
– O variabilă neiniţializată are valoarea Undefined.

– O variabilă inexistentă are valoarea Null.
• String (şir de caractere)
– se reprezintă ı̂n JavaScript ı̂ntre ghilimele sau apostrofuri (şirul vid

este reprezentat prin ””)
– pot fi reprezentate caractere speciale prin construcţii escape: \b (ba-
ckspace); \n (new line); \t (tab); \’ (apostrof); \” (ghilimele).
• Object, Function, List, Reference şi Completion.
– Valorile de tip Reference, List şi Completion sunt utilizate ca rezul-

tate intermediare ı̂n cadrul evaluării expresiilor şi nu pot fi stocate
de proprietăţile vizibile ale obiectelor.
5.17 Tipuri de date String

• Metode de clasă
String.parseFloat(s) - returnează un număr real corespunzător şirului

s
• când este ı̂ntâlnit un caracter care nu poate face parte dintr-un număr,
restul caracterelor sunt ignorate
String.parseInt(s, b) - returnează un număr ı̂ntreg corespunzător şirului

s
• b este baza de numeraţie (implicit este 10)
• când este ı̂ntâlnit un caracter care nu poate face parte dintr-un număr,
restul caracterelor sunt ignorate
• Dacă s este un sir de caractere, putem apela următoarele metode de obiect
s.length – proprietate care indică numărul de caractere pe care le conţine

şirul
5.18. TIPURI DE DATE MATH 67
s.toLowerCase() – returnează s cu minuscule ı̂n loc de majuscule

s.toUpperCase() – returnează s cu majuscule ı̂n loc de minuscule
s.charAt(poz) – returnează caracterul din s de la poziţia poz (ı̂ncepând
de la 0)
s.substring(pozi,pozf ) - returnează subşirul dintre poziţiile pozi şi pozf
• dacă pozi¿pozf se face apelul substring(pozf, pozi)
• dacă pozf¿sir.length sau lipseşte se returnează subşirul până la sfârşitul

şirului
s.indexOf(subsir, poz) - returnează poziţia primei apariţii a subşirului.
• poz indică poziţia de la care ı̂ncepe căutarea (implicit este 0)
• dacă subşirul nu este găsit se returnează valoarea -1.
s.lastIndexOf(subsir, poz) – similar cu indexOf, dar căutare se face de

la sfârşit către ı̂nceput.
• Dacă s este un şir de caractere, putem apela următoarele metode de obiect
s.bold() – returnează s scris ı̂n marcajul hbi

s.fontcolor(culoare) - returnează s scris ı̂n marcajul hfont color=”
culoare”i
s.italics() – returnează s scris ı̂n marcajul hii
s.strike() – returnează s scris ı̂n marcajul h strike i
s.sup() – returnează s scris ı̂n marcajul hsupi
s.sub() – returnează s scris ı̂n marcajul hsubi
s.big() – returnează s scris ı̂n marcajul hbigi
s.small() – returnează s scris ı̂n marcajul hsmalli
s.fixed() – returnează s scris cu litere monospaţiate
s.fontsize(dim) – returnează s scris ı̂n marcajul hfont size =“dim”i
document . w r i t e ( “ S a l u t ” . f o n t s i z e ( 5 ) . f o n t c o l o r ( “ b l u e ” ) .
bold ( ) ) ;
5.18 Tipuri de date Math

Math.abs(x) – returnează modulul numărului x
Math.sqrt(x) – returnează rădăcina pătrată a numărului x
Math.power(x,y) – returnează xy
Math.sin(x) – returnează sinusul unghiului x, exprimat ı̂n radiani
Math.cos(x), Math.tan(x) - pentru cosinus şi tangentă

Math.asin(x) – returnează arcsinusul numărului x
Math.acos(x), Math.atan(x) - pentru arccosinus şi arctangentă
Math.round(x) – returnează cel mai apropriat ı̂ntregul de numărul x
Math.floor(x) – returnează cel mai mare ı̂ntregul mai mic decât x
Math.ceil(x) – returnează cel mai mic ı̂ntregul mai mare decât x
Math.exp(x) – returnează calculează ex
Math.log(x) – returnează logaritmul natural al numărului x
Math.random() – returnează un număr aleator din intervalul [0,1)
Math.min(x,y) – returnează minimul dintre numerele x şi y
Math.max(x,y) – pentru maxim
5.19 Tipuri de date Date

• Permite lucrul cu date calendaristice şi ore.
– Zilele săptămânii sunt numerotate de la 0 la 6.

– Lunile anului se numără de la 0 la 11.
• Dacă d este un obiect Date
d.getDate() - returnează ziua din lună (intre 1 si 31)

d.getDay() - returnează ziua din saptamana (intre 0 şi 6)
– 0=Duminică, 1=Luni, 2=Marţi, 3=Miercuri, ..., 6=Sâmbătă
d.getFullYear() - returnează anul, reprezentat pe 4 cifre
d.getHours() - returnează ora din zi (ı̂ntre 0 si 23)
d.getMinutes() - returnează minutele din ora (ı̂ntre 0 si 59)
d.getSeconds() - returnează secundele din minut (ı̂ntre 0 si 59)
d.getMonth() - returnează luna din an (ı̂ntre 0 si 11)
var a z i=new Date ( ) ; // c r e e a z ă un o b i e c t cu d a t a ş i

ora c u r e n t ă
var d=new Date ( ” September 1 5 , 2002 ” ) ; // d a t a
s p e c i f i c a t ă ı̂ n ş i r
var d1=new Date ( 0 5 , 1 , 0 , 1 5 , 3 0 , 2 5 ) ; // 1 f e b .
2005 , ora 1 5 : 3 0 : 2 5
5.20. EXEMPLE 69
5.20 Exemple
1. Scrieţi un script care testează paritatea unui număr introdus de la tasta-
tură.
<html>
<head><t i t l e >J a v a S c r i p t </ t i t l e ></head>
<body>
< s c r i p t l a n g u a g e=” J a v a S c r i p t ”>
var i ;
i = window . prompt ( ” I n t r o d u c e t i un numar
intreg : ”) ;
i f ( i % 2 == 0 )
document . w r i t e ( ”Numarul ” + i + ”
e s t e par . ” ) ;
else
document . w r i t e ( ”Numarul ” + i + ” nu
e s t e par . ” ) ;
</ s c r i p t >
</body>
</html>
2. Scrieţi un script care calculează n! cu while.

<html>
<body>
var i = 1 , n f a c t = 1 , n ;
n = window . prompt ( ” I n t r o d u c e t i un numar
intreg : ”) ;
while ( i <= n ) {
n f a c t ∗= i ;
++i ;
}
mesaj = n+” ! = ” + n f a c t ;
document . w r i t e ( mesaj . f o n t c o l o r ( ” b l u e ” ) ) ;
</ s c r i p t >
</body>
</html>
3. Scrieţi un script care calculează n! cu do-while.

<html>
<body>
var i = 1 , n f a c t = 1 , n ;
intreg : ”) ;
do {
n f a c t ∗= i ;
++i ;
} while ( i <= n ) ;
document . w r i t e ( n+” ! = ” + n f a c t ) ;
</ s c r i p t >
</body>
</html>
4. Scrieţi un script care calculează n! cu for.

<html>
<body>
var i , n , n f a c t = 1 ;
intreg : ”) ;
f o r ( i =1; i<=n ; ++i )
n f a c t ∗= i ;
mesaj = n+” ! = ” + n f a c t ;
document . w r i t e ( mesaj . f o n t s i z e ( ” 15 ” ) ) ;
</ s c r i p t >
</body>
</html>
5. Scrieţi un script care calculează cmmdc a două numere a şi b introduse de

la tastatură.
<html>
<body>
var a , b , ta , tb ;
a = window . prompt ( ” I n t r o d u c e t i p r i m u l
numar i n t r e g : ” ) ;
b = window . prompt ( ” I n t r o d u c e t i a l d o i l e a
numar i n t r e g : ” ) ;
t a = a ; tb = b ;
while ( t a != tb )
i f ( t a < tb )
tb −= t a ;
else
t a −= tb ;
mesaj = ”cmmdc( ” + a + ” , ” +b + ” ) = ” +
ta ;
document . w r i t e ( mesaj . b o l d ( ) ) ;
</ s c r i p t >
</body>
</html>
5.21. EXERCIŢII 71
6. Scrieţi un script care afişează numerele naturale mai mici decât 1000 care
sunt egale cu suma factorialelor cifrelor lor (145=1!+4!+5!=1+24+120).
<html>
<body>
function f a c t o r i a l (n) {
fact = 1;
while ( n > 1 )
f a c t ∗= n−−;
return f a c t ;
}
f o r ( var i =0; i <1000; ++i ) {
numar = i ; suma = 0 ;
while ( numar > 0 ) {
c i f r a = numar % 1 0 ;
numar = Math . f l o o r ( numar / 1 0 ) ;
suma += f a c t o r i a l ( c i f r a ) ;
}
i f ( suma == i )
document . w r i t e ( i + ”<br/>” ) ;
}
</ s c r i p t >
</body>
</html>
5.21 Exerciţii
1. Scrieţi un script care citeşte coeficienţii a, b, c ai ecuaţiei de gradul II şi
afişează rezultatul (se vor trata şi cazurile ecuaţie imposibilă, ecuaţie cu
număr infinit de soluţii, ecuaţie cu soluţii complexă)
2. Scrieţi o funcţie care primeşte ca parametru un număr n. Dacă n este

pătrat perfect, atunci funcţia returnează textul “DA”, formatat cu mar-
caje pentru afişare cu dimensiune 5 şi culoare verde; altfel, returnează
textul “NU”, formatat cu marcaje pentru afişare cu dimensiune 3 şi cu-
loare roşie.
3. Scrieţi un script care foloseşte funcţia cu un parametru citit de la tastatură

şi scrie ı̂n document rezultatul funcţiei.
4. Scrieţi o funcţie care primeşte un parametru de tip Date şi returnează un

mesaj de salut ı̂n funcţie de ora din acesta
• ı̂ntre 5 şi 11 – Bună dimineaţa

• ı̂ntre 12 şi 20 – Bună ziua
• ı̂ntre 21 şi 22 – Bună seara
• ı̂ntre 23 şi 4 – Noapte bună
Scrieţi un script care apelează această funcţie pentru data şi ora curentă
şi afişează rezultatul funcţiei.
5. Scrieţi o funcţie ce primeşte un parametru de tip Date şi scrieţi ı̂n docu-
ment marcajele necesare pentru afişarea unui calendar cu luna din para-
metru.
• scrieţi un script care apelează funcţia pentru data curentă.
• puteţi să folosiţi tabele pentru alinierea textului ca ı̂n exemplul de
mai jos. Poate să arate şi altfel:
5.22 Bibliografie
• Javascript tutorial: Javascript
Capitolul 6
Descriere: Limbajul
Javascript (II)
6.1 Resurse
6.2 Tipul Object

Un obiect JavaScript este privit ca o colecţie neordonată de proprietăţi, fiecare
proprietate având zero sau mai multe atribute. Proprietăţile pot conţine fie
alte obiecte, fie valori primitive sau metode. O valoare primitivă are unul dintre
tipurile fundamentale: Undefined, Null, Boolean, Number şi String.
< s c r i p t type=” t e x t / j a v a s c r i p t ”>
var t x t=”H e l l o World ! ”
document . w r i t e ( t x t . l e n g t h )
</ s c r i p t >
• un obiect are tipul de bază Object.

• metodă este o funcţie asociată unui obiect prin intermediul unei pro-
prietăţi.
• un obiect este compus din proprietăţi
• fiecare proprietate are un nume, o valoare şi o mulţime de atribute
p r o p r i e t a t e = < nume , v a l o a r e , a t r i b u t e >
Atributele proprietăţilor pot fi următoarele:

ReadOnly - ı̂ncercările de modificare a proprietăţii respective vor fi ignorate.
DontEnum - proprietatea nu poate fi enumerată de o construcţie for-in.
DontDelete - ı̂ncercările de a şterge proprietatea vor fi ignorate
73
74 CAPITOLUL 6. DESCRIERE: LIMBAJUL JAVASCRIPT (II)
Internal - proprietăţile declarate Internal nu posedă nume şi pot fi accesate ı̂n
mod direct. numele lor sunt ı̂ncadrate ı̂ntre [[ şi ]]: e.g. [[Class]]
Avem următoarele obiecte predefinite: Global, Object, Function, Array, String,

Boolean, Number, Math şi Date.
6.2.1 Instructiunea for . . . in

Instructiunea for .. in este utilizată pentru a parcurge elementele unui tablou
sau proprietatile unui obiect.
for ( variable in object )
{
code
}
Exemplu de utilizare pentru un tablou

<html>
<body>
var x ;
var mycars = new Array ( ) ;
mycars [ 0 ] = ” Saab ” ;
mycars [ 1 ] = ” Volvo ” ;
mycars [ 2 ] = ”BMW” ;
f o r ( x i n mycars ) {
document . w r i t e ( mycars [ x ] + ”<br />”) ;
}
</ s c r i p t >
</body>
</html>
6.3 JavaScript HTML DOM

Document Object Model este o interfaţă folosită pentru manipularea documen-
telor structurate (e.g. un fişier HTML). Toate elementele HTML, inclusiv textul
specificat ı̂ntre marcaje şi atributele tagurilor pot fi accesate prin intermediul
DOM. HTML DOM este independent de platformă sau limbaj. În JavaScript,
pentru un obiect cu numele NumeObiect folosim:
• NumeObiect.NumeProprietate
• NumeObiect[”NumeProprietate”]
• NumeObiect.NumeMetoda(parametri)
Informaţii detaliate despre manipularea fiecărui obiect DOM pot fi găsite la

adresa http://www.w3schools.com/htmldom/dom reference.asp.
6.3. JAVASCRIPT HTML DOM 75
6.3.1 Obiecte DOM implicite
navigator • proprietăţi care furnizează numele şi versiunea navigatorului

– appName
– appVersion
• lista de module plug-in (extensii) ale navigatorului
window • obiectul aflat la nivelul cel mai ı̂nalt ı̂n ierarhia obiectelor dispo-
nibile
• proprietăţile lui se aplică ı̂ntregii ferestre ı̂n care se afişează docu-
mentul
• pentru paginile având cadre, fiecărui cadru ı̂i corespunde un obiect
window
document • proprietăţile bazate pe conţinutul documentului (titlu, fundal,

legături, formulare etc.)
location • se referă la localizarea paginii (pe baza URI-ului).
history • conţine proprietăţi reprezentând adresele Web care au fost vizi-

tate de utilizator
6.3.2 Obiectul window

• Proprietăţile (window.proprietate):
closed - indică dacă o fereastră este ı̂nchisă sau nu
defaultStatus - specifică mesajul implicit de pe bara de stare
document - conţine informaţii despre documentul ı̂ncărcat
frames - tablou desemnând cadrele dintr-o fereastră
history - conţine istoricul navigării
length - indică numărul de cadre din fereastră
location - oferă informaţii despre URL-ul curent
name - desemnează numele unic al ferestrei
parent - indică fereastra-părinte a ferestrei curente
scrollbars - indică starea barelor de defilare (scroll)
status - conţine textul care este afişat pe linia de stare a ferestrei navi-
gatorului
outerheight şi outerwidth – dimensiunile ferestrei cu bordură, bara de
titlu, status bar, etc.
• Metode (window.metoda) :
open(URL, nume) - deschide o nouă fereastră de navigare către adresa
specificată
close() - ı̂nchide o fereastră de navigare
alert(mesaj) - afişează o fereastră de dialog conţinând mesajul specificat
confirm(mesaj) - afişează o fereastră de confirmare prevăzută cu bu-
toane OK şi Cancel, şi returnează true sau false
prompt(mesaj, valoare implicită) - afişează o fereastră pentru intro-
ducerea unei valori
print() - tipareşte ferestra sau cadrul asociat obiectului window.
setInterval(expresie, dt) - evaluează expresia dată la fiecare dt milise-
cunde (valoarea intoarsă de funcţie poate fi folosită cu funcţia clea-
rInterval(val) pentru a anula acest temporizator).
setTimeout(expresie, dt) - evaluează expresia dată după dt milise-
cunde
Exemplu (afişare mesaj ı̂n status bar)

<html>
<body>
window . s t a t u s =”Some t e x t i n t h e s t a t u s bar ! ! ”
</ s c r i p t >
<p>Look a t t h e t e x t i n t h e s t a t u s b a r .</p>
</body>
</html
6.3.3 Obiectul document

• Proprietăţi (document.proprietate): :
anchors[ ] - tablou conţinând ancorele documentului
applets [ ] - tablou conţinând applet-urile documentului
forms [ ]- tablou conţinând formularele documentului
images [ ] - tablou conţinând imaginile documentului
links [ ] - tablou conţinând legaturile documentului
bgColor - specifică culoarea implicită pentru fundal
fgColor - specifică culoarea implicită a textului
linkColor - specifică culoarea implicită a legăturilor nevizitate
alinkColor - specifică culoarea implicită a legăturilor active
vlinkColor - specifică culoarea implicită a legăturilor vizitate
lastModified - furnizează data şi timpul ultimei modificări a documen-
tului
referrer - specifică URL-ul documentului care a apelat prezentul docu-
ment
title - conţine titlul documentului
URL - furnizează URL-ul documentului
domain - furnizează domeniul serverului Web care a expediat documen-
tul
• Metodele write() şi writeln() generează cod HTML care va fi inclus ı̂n
cadrul documentului, astfel se poate modifica ı̂n mod dinamic o pagină
Web.
close()
getElementById() – ı̂ntoarce o referinţă la primul obiect cu id-ul spe-
cificat
getElementsByName()
getElementsByTagName()
write()
writeln()
<html>
<head>
func tion getValue ( ) {
var x=document . getElementById ( ” myHeader ” )
a l e r t ( x . innerHTML )
}
</ s c r i p t >
</head>
<body>
<h1 i d=”myHeader” o n c l i c k =”g e t V a l u e ( ) ”>This i s a

header </h1>
<p>C l i c k on t h e h e a d e r t o a l e r t i t s value </p>
</body>
</html>
Exemplu (proprietăţi de tip document)
<html>
<head>
</head>
<body>
<h1>Fundal v a r i a b i l </h1>
<s c r i p t >
<!−−
i f ( window . c o n f i r m ( ’ Este lumina p u t e r n i c a i n
camera ? ’ ) ) {
document . bgColor =’ blue ’ ;
document . f g C o l o r =’ y e l l o w ’ ;
}
//−−>
</ s c r i p t >
</body>
</html>
6.3.4 Alte obiecte predefinite

• window.history
– permite navigarea prin istoricul paginilor vizitate folosind metodele

back si forward
• window.location
– permite manipularea locaţiilor
• navigator
– furnizează informaţii despre navigator şi mediul său de rulare, prin in-
termediul proprietăţilor appCodeName, appName, appVersion, lan-
guage, platform, userAgent.
Exemplu
<html>
<head></head>
<body><h1>L e g a t u r i cu j a v a s c r i p t </h1>
<a h r e f =” j a v a s c r i p t : h i s t o r y . back ( ) ”>I n a p o i </a>
<a h r e f =” j a v a s c r i p t : h i s t o r y . f o r w a r d ( ) ”> I n a i n t e </a
>
</body>
</html>
Exemplu (obiectul location)
<html>
<head>
</head>
<body>
<s c r i p t >
document . w r i t e ( ” l o c a t i o n . h r e f = ” + location .
h r e f + ”<br >”) ;
document . w r i t e ( ” l o c a t i o n . p r o t o c o l = ” +
l o c a t i o n . p r o t o c o l + ”<br >”) ;
document . w r i t e ( ” l o c a t i o n . h o s t = ” + location .
h o s t + ”<br >”) ;
document . w r i t e ( ” l o c a t i o n . hostName = ” +
l o c a t i o n . hostName + ”<br >”) ;
document . w r i t e ( ” l o c a t i o n . p o r t = ” + location .
p o r t + ”<br >”) ;
document . w r i t e ( ” l o c a t i o n . pathname = ” +
l o c a t i o n . pathname + ”<br >”) ;
document . w r i t e ( ” l o c a t i o n . hash = ” + location .
hash + ”<br >”) ;
document . w r i t e ( ” l o c a t i o n . s e a r c h = ” +
l o c a t i o n . s e a r c h + ”<br >”) ;
</ s c r i p t >
</body>
</html>
Exemplu (obiectul navigator)
<html>
<head>
</head>
<body>
<s c r i p t >
6.4. EVENIMENTE 81
document . w r i t e (”<p>Numele n a v i g a t o r u l u i : ” +
n a v i g a t o r . appName + ” ” +
n a v i g a t o r . appVersion ) ;
document . w r i t e (”<p>P l a t f o r m a : ” + n a v i g a t o r .
platform ) ;
document . w r i t e (”<p>Agent−u t i l i z a t o r : ” +
n a v i g a t o r . userAgent ) ;
</ s c r i p t >
</body>
</html>
6.4 Evenimente
Unele marcaje oferă atribute pentru ataşarea de proceduri pentru evenimente
folosind sintaxa:
<marcaj onEveniment = ” cod J a v a S c r i p t ”>
unde Eveniment poate fi:

• pentru majoritatea marcajelor: KeyDown, KeyUp, KeyPress, MouseOver,
MouseOut, MouseMove, MouseUp, MouseDown, Click, DblClick, Dra-
gDrop, etc.
• pentru legături şi elemente de formular: Blur, Focus, etc.
• pentru body şi frameset: Load, Unload, etc.
Exemple (evenimente)
<html>
<head>
< t i t l e >Evenimente d i v e r s e </ t i t l e >
</head>
<body onLoad=” s e t I n t e r v a l ( ’ a l e r t ( \ ’ e n e r v a n t mesaj ,
nu ? ! \ ’ ) ’ , 5 0 0 0 ) ”
onUnload=” a l e r t ( ’ La r e v e d e r e ’ ) ”>
<img s r c =” t e s t . j p g ” o n C l i c k=”c o n f i r m ( ’ Mergi mai
d e p a r t e ’ ) ”>
<button o n C l i c k=” l o c a t i o n . h r e f =’ h t t p : / /www. g o o g l e
. ro ’”> Google </button>
</body>
</html>
Exemple (image rollover)

<p onMouseOver=” t h i s . s t y l e . f o n t S i z e = ’25 pt ’ ”
onMouseOut=” t h i s . s t y l e . f o n t S i z e = ’12 pt ’”> S a l u t </p>
<img s r c =” g i f . png” onMouseOver=” t h i s . s r c =’png . png ’ ”

onMouseOut=” t h i s . s r c =’ g i f . png ’”>
6.5 Javascript Cookies

Un cookie este o variabilă care este salvată pe calculatorul vizitatorilor paginilor
web. De fiecare dată când utilizatorul va solicita aceaşi pagină, browser-ul va
trimite şi cookie-ul. Programarea unui cookie se poate face ı̂n diverse variante.
Exemple de cookies:
• cookie pentru nume
• cookie pentru parolă
• cookie pentru dată
Următoarea funcţie JavaScript este destinată programării unui cookie, şi utili-
zează obiectul document.cookie:
6.5. JAVASCRIPT COOKIES 83
f u n c t i o n s e t C o o k i e ( c name , v alue , e x p i r e d a y s ) {
var e x d a t e=new Date ( )
e x d a t e . s e t D a t e ( e x d a t e . getDate ( )+e x p i r e d a y s )
document . c o o k i e=c name+ ”=” +e s c a p e ( v a l u e )+
( ( e x p i r e d a y s==n u l l ) ? ”” : ” ; e x p i r e s=”+e x d a t e .
toGMTString ( ) )
}
Funcţia va fi utilizată astfel:

var expdate = new Date ( ) ;
expdate . setTime ( expdate . getTime +(24∗60∗60∗1000) ) ;
s e t C o o k i e ( ” c u l o a r e ” , ” v e r d e ” , expdate ) ;
Funcţia pentru accesarea unui cookie este următoarea:

f u n c t i o n g e t C o o k i e ( c name )
{
i f ( document . c o o k i e . l e n g t h >0)
{
i f ( c s t a r t !=−1)
{
c s t a r t=c s t a r t + c name . l e n g t h + 1
c e n d=document . c o o k i e . indexOf ( ” ; ” , c s t a r t )
i f ( c e n d==−1) c e n d=document . c o o k i e . l e n g t h
r e t u r n u n e s c a p e ( document . c o o k i e . s u b s t r i n g (
c s t a r t , c end ) )
}
}
r e t u r n ””
}
Pentru a testa dacă un cookie a fost setat definim funcţia getCookie

f u n c t i o n checkCookie ( ) {
v a l o a r e=g e t C o o k i e ( ’ c u l o a r e ’ )
i f ( v a l o a r e != n u l l && v a l o a r e !=””) {
a l e r t ( ’ C u l o a r e a e s t e ’+ v a l o a r e + ’ ! ’ ) }
else {
v a l o a r e=prompt ( ’ I n t r o d u c e t i c u l o a r e a : ’ , ” ” )
i f ( v a l o a r e != n u l l && v a l o a r e !=””)
{
setCookie ( ’ culoare ’ , valoare , ’365 ’)
}
}
}
Pentru a testa cookie-ul apelăm funcţia checkCookie folosind evenimentul

onLoad.
<body onLoad=”c h e c k C o o k i e ( ) ”>
</body>
6.6 Validare Javascript

Limbajul poate fi utilizat pentru validarea datelor introduse cu ajutorul formu-
larelor HTML.
Următorul exemplu verifică dacă utlizatorul a introdus o adresă de email şi
aceasta este validă.
<html>
<head>
function validate email ( field , alerttxt ){
with ( f i e l d ) {
apos=v a l u e . indexOf ( ”@” )
d o t p o s=v a l u e . l a s t I n d e x O f ( ” . ” )
i f ( apos < 1 | | dotpos−apos <2)
{
a l e r t ( a l e r t t x t ) ; return f a l s e }
else
{
return true
}
}
}
function validate form ( thisform ){
with ( t h i s f o r m ) {
i f ( v a l i d a t e e m a i l ( email , ” Not a v a l i d
e−m a i l a d d r e s s ! ” )==f a l s e )
{
email . focus () ;
return f a l s e
}
}
}
</ s c r i p t >
</head>
<body>
<form a c t i o n =”submitpage . htm”
onsubmit=”r e t u r n v a l i d a t e f o r m ( t h i s ) ; ”
method=”p o s t”>
Email : <i n p u t type=” t e x t ” name=”e m a i l ” s i z e
=”30”>
<i n p u t type=”submit ” v a l u e=”Submit”>
</form>
</body>
</html>
6.7 Exerciţii
1. Scrieţi o funcţie javascript pentru afişarea unui ceas ı̂ntr-o pagină web.
2. Creaţi un formular html care să conţină câmpurile nume şi prenume, data
naşterii, sex, stare civilă, ocupaţie, email, hobby-uri şi un buton ”Trimite
informaţii”. Câmpurile nume, prenume, data naşterii şi sex sunt obligato-
riu de completat, celelalte sunt opţionale. Asiguraţi-vă că informaţiile din
câmpurile obligatorii sunt plauzibile. În cazul ı̂n care utilizatorul nu a com-
pletat toate informaţiile obligatorii, afişaţi un mesaj ı̂n care să atenţionaţi
utilizatorul şi setaţi focusul pe primul câmp rămas invalid.
3. Creaţi un formular cu două câmpuri pentru introducerea greutăţii (ı̂n kilo-
grame) şi ı̂nălţimii (ı̂n metri), şi un buton care la apăsare afişează indicele
de masă corporală (IMC=G/h2) şi un comentariu (dacă IMC¡18,5 – sub-
ponderabilitate, 18.5¡IMC¡=22 – slab, 20¡IMC¡=24.9 – normal, 25¡IMC¡=30
– supraponderabilitate, IMC¿=30 – obezitate).
4. Creaţi o pagină ı̂n care să realizaţi un slide show cu imagini cu lăţime fixă
şi butoane de navigare ı̂nainte şi ı̂napoi printre aceste imagini.
5. Creaţi un formular ı̂n care sunt afişate trei text-box-uri ı̂n care să introduceţi
temperatura ı̂n grade Celsius, ı̂n grade Fahrenheit şi ı̂n grade Kelvin. Când
se modifică valoarea din unul dintre comboboxuri, celelalte se actualizează
corespunzător.
6. Implementaţi un cronometru pe o pagină web (Indicaţie: Creaţi un for-

mular cu un text şi cu butoanele start, stop şi reset).
7. Utilizând funcţiile setCookie şi getCookie prezentate ı̂n tutorial, creaţi
o pagină Web care să permită setarea unui cookie prin preluarea de la
utilizator, ı̂ntr-o formă, a conţinutului acestuia. Afişaţi cookie-ul astfel
setat. Creaţi o altă pagină Web care utilizează informaţiile din cookie
pentru a indica selecţiile implicite ale utilizatorului pe o anumită formă
(eventual aceeaşi).
6.8 Bibliografie
Capitolul 7
Descriere: Limbajul
Javascript (III)
7.1 Resurse
7.2 Meniu expandabil ı̂n JavaScript

Folosind Javascript şi CSS putem realiza un meniu de tip tree view.
Pentru a refolosi codul Javascript, acesta va fi salvat ı̂ntr-un fişier cu extensia .js.
Scriptul trebuie inclus ı̂n documentul XHTML. Aspectul meniului este controlat
prin intermediul unui fişier CSS.
<head>
< s c r i p t s r c =”l i s t m e n u . j s ” type=” t e x t / j a v a s c r i p t ”></
script >
<l i n k r e l =” s t y l e s h e e t ” type=” t e x t / c s s ” h r e f =”l i s t m e n u
. c s s ” />
</head>
Elementele meniului vor fi definite sub forma unei liste neordonate.
87
88 CAPITOLUL 7. DESCRIERE: LIMBAJUL JAVASCRIPT (III)
<ul>
< l i c l a s s =”t r e e n o d e ”>
<a h r e f =””>Top L e v e l Item</a>
<ul>
< l i ><a h r e f =””> L i s t Item</a></ l i >
</ul>
</ l i >
</ul>
Dacă dorim ca un nod să fie deschis, trebuie să modificăm class=”treenode”
ı̂n class=”treenodeopen”. Codul JavaScript şi regulile CSS sunt prezentate ı̂n
continuare.
7.2.1 Fişierul listmenu.css
. treemenu
{
margin : 0px 20 px ;
padding : 10 px ;
l i s t −s t y l e : none ;
background−c o l o r : #EEE ;
b o r d e r : 1px s o l i d #000;
width : 200 px ;
}
. treemenu UL
{
l i s t −s t y l e : none ;
margin : 0px 10 px ;
padding : 0px 10 px ;
}
. treemenu LI
{
display : inline ;
}
. treemenu A
{
display : block ;
padding− l e f t : 12 px ;
}
. treemenu . t r e e o p e n
{
background−image : u r l ( ’ open . g i f ’ ) ;
background−r e p e a t : no−r e p e a t ;
background−p o s i t i o n : l e f t ;
}
7.2. MENIU EXPANDABIL ÎN JAVASCRIPT 89
. treemenu . t r e e c l o s e d
{
background−image : u r l ( ’ c l o s e d . g i f ’ ) ;
background−r e p e a t : no−r e p e a t ;
background−p o s i t i o n : l e f t ;
}
7.2.2 Fisierul listmenu.js

f u n c t i o n initMenus ( )
{
i f ( ! document . getElementsByTagName )
return ;
var aMenus = document . getElementsByTagName ( ” LI ” ) ;
f o r ( var i = 0 ; i < aMenus . l e n g t h ; i ++)
{
var m c l a s s = aMenus [ i ] . className ;
i f ( m c l a s s . indexOf ( ” t r e e n o d e ” ) > −1)
{
var submenu = aMenus [ i ] . c h i l d N o d e s ;
f o r ( var j = 0 ; j < submenu . l e n g t h ; j ++)
{
i f ( submenu [ j ] . tagName == ”A” )
{
submenu [ j ] . o n c l i c k = f u n c t i o n ( )
{
var node = t h i s . n e x t S i b l i n g ;
while (1)
{
i f ( node != n u l l )
{
i f ( node . tagName == ”UL” )
{
var d = ( node . s t y l e .
d i s p l a y == ” none ” )
node . s t y l e . d i s p l a y =
(d) ? ” block ”:”
none ” ;
t h i s . className = ( d ) ?
” treeopen ”:”
treeclosed ”;
return f a l s e ;
}
node = node . n e x t S i b l i n g ;
}
else
{
return f a l s e ;
}
}
return f a l s e ;
}
submenu [ j ] . className = ( m c l a s s .
indexOf ( ” open ” ) > −1) ? ” t r e e o p e n
”:” treeclosed ”;
}
i f ( submenu [ j ] . tagName == ”UL” )
submenu [ j ] . s t y l e . d i s p l a y = ( m c l a s s .
indexOf ( ” open ” ) > −1) ? ” b l o c k ” :
” none ” ;
}
}
}
}
window . o n l o a d = i n i t M e n u s ;
7.3 Slideshow
Următorul script va ı̂ncărca o serie de imagini realizând apoi o prezentare suc-
cesivă a acestora. Scriptul va fi salvat ı̂ntr-un fişier cu numele loading.js
f u n c t i o n changeOpac ( o p a c i t y , i d ) {
var o b j = document . getElementById ( i d ) ;
// IE /Win
o b j . s t y l e . f i l t e r = ” a l p h a ( o p a c i t y :”+ o p a c i t y +”) ” ;
// Older M o z i l l a and F i r e f o x
o b j . s t y l e . MozOpacity =o p a c i t y / 1 0 1 ;
// S a f a r i 1 . 2 , newer F i r e f o x and M o z i l l a , CSS3
obj . s t y l e . opacity = opacity /101;
// S a f a r i <1.2 , Konqueror
o b j . s t y l e . KHTMLOpacity = o p a c i t y / 1 0 0 ;
}
// i n t e r s c h i m b a i m a g i n i l e
f u n c t i o n blendimage ( d i v i d , imageid , i m a g e f i l e , m i l l i s e c )
{
var s p e e d = Math . round ( m i l l i s e c / 1 0 0 ) ;
var t i m e r = 0 ;
// f a c e i m a g i n e a t r a n s p a r e n t a
changeOpac ( 1 , i m a g e i d ) ;
// schimba i m a g i n e a
document . getElementById ( i m a g e i d ) . s r c = i m a g e f i l e ;
// f a d e i n
f o r ( i = 0 ; i <= 1 0 0 ; i ++) {
window . setTimeout ( ” changeOpac ( ” + i + ” , ’ ” +
imageid + ” ’) ” ,( timer ∗ speed ) ) ;
t i m e r ++;
}
}
7.3. SLIDESHOW 91
f u n c t i o n timedShow ( divID , imgID , obj , t r , timp ) {

setTimeout ( ” blendimage ( ’”+ divID +” ’ , ’”+ imgID +” ’ , ’”+ o b j
+” ’ , ’”+ t r +” ’) ” , timp ) ;
}
function slideshow ( tablou ) {
var temp=0;
f o r ( var i =0; i <100; i ++)
{
f o r ( var j =0; j <t a b l o u . l e n g t h ; j ++)
{
timedShow ( ’ b l e n d d i v ’ , ’ blendimage ’ , t a b l o u [ j
] , 2 0 0 0 , temp ) ;
temp+=9000;
}
}
}
Pentru a utiliza scriptul trebuie să specificăm sursele imaginilor din prezen-
tare, precum şi regulile CSS pentru ele. Vom utiliza un div cu id-ul blendimage
pentru a afişa prezentarea.
<head>
<s t y l e >
#blendimage
{
b o r d e r : 0 none ;
f i l t e r : a l p h a ( o p a c i t y =0) ;
−moz−o p a c i t y : 0 . 0 ;
opacity : 0;
}
. hidden
{
d i s p l a y : none ;
}
</ s t y l e >
< s c r i p t type=” t e x t / j a v a s c r i p t ” s r c =” l o a d i n g . j s ”></

script >

<!−−
var i m a g i n i=new Array ( )
i m a g i n i [ 0 ] = ” photo1 . j p g ”
window . o n l o a d = f u n c t i o n ( ) {
slideshow ( imagini ) ;
}
//−−>
</ s c r i p t >
Figura 7.1: Obiectul XMLHttpRequest executând cereri ı̂n mod asincron
</head>
<body>
<d i v c l a s s =”hidden”>
<img s r c =”photo1 . j p g ” />
</div>
<d i v i d=”b l e n d d i v”>
<img s r c =”blank . j p g ” i d=”blendimage ” />
</div>
</body>
7.4 Introducere ı̂n AJAX

Ajax este o tehnologie relativ nouă, numele ei fiind prescurtarea de la Asyn-
chronous JavaScript and XML. Exemplele clasice de utilizare sunt Google Maps
(maps.google.com) sau Gmail (gmail.google.com). Conceptual, tehnologia se
bazează pe utilizarea de obiecte XMLHttpRequest.
Obiectele XMLHttpRequest pot fi folosite ı̂n cadrul paginilor web pentru a
gestiona ı̂n background comunicarea dintre browser şi server, fără a fi necesară
o ı̂ntreagă reı̂ncărcare a paginii.
1. O pagină web ı̂ncarcă o funcţie JavaScript.
2. Funcţia JavaScript creează un obiect XMLHttpRequest. Este definit un
URL şi parametrii pentru cererea HTTP.
3. Funcţia JavaScript ı̂nregistrează un callback handler care va fi invocat de
răspunsul HTTP.
7.4. INTRODUCERE ÎN AJAX 93
4. Funcţia JavaScript apelează metoda send a obiectului XMLHttpRequest,

care trimite o cerere HTTP la server.
5. Obiectul XMLHttpRequest cedează imediat controlul funcţiei JavaScript.

Utilizatorul poate să continue să folosească pagina web.
6. După un interval de timp, serverul HTTP ı̂ntoarce un răspuns, invocând

callback handler.
7. Handler-ul are acces la HTML DOM şi poate să actualize pagina fără să
ı̂ntrerupă utilizatorul din lucru.
Descrierea metodelor:
abort() Cancels the current request.
getAllResponseHeaders() Returns the complete set of HTTP headers as a

string.
getResponseHeader(headerName) Returns the value of the specified HTTP

header.
open(method,URL[,async[,userName[,pass]]]) Specifies the method, URL,

and other optional attributes of a request. The method parameter can
have a value of ”GET”, ”POST”, ”HEAD”, ”PUT”, ”DELETE”, or a va-
riety of other HTTP methods listed in the W3C specification. The URL
parameter may be either a relative or complete URL. The ”async” pa-
rameter specifies whether the request should be handled asynchronously
or not – ”true” means that script processing carries on after the send()
method, without waiting for a response, and ”false” means that the script
waits for a response before continuing script processing.
send(content) Sends the request.
setRequestHeader(label,value) Adds a label/value pair to the HTTP hea-

der to be sent.
Descrierea proprietăţilor:
onreadystatechange Specifies a reference to an event handler for an event

that fires at every state change.
readyState Returns the state of the object as follows:
• 0 = uninitialized
• 1 = open
• 2 = sent
• 3 = receiving
• 4 = loaded
responseText Returns the response as a string.
responseXML Returns the response as XML

status Returns the HTTP status code as a number (e.g. 404 for ”Not Found”
and 200 for ”OK”).
statusText Returns the status as a string (e.g. ”Not Found” or ”OK”).
Dacă folosim proprietatea responseText, vom obţine de la server cod XHTML

sub forma unui şir de caractere. Acesta poate fi apoi inserat ı̂n pagină folosind
innerHTML.
7.4.1 Exemplu AJAX

var h t t p = f a l s e ;
// XMLHttpRequest a r e i m p l e m e n t a r i d i f e r i t e i n
M o z z i l a s i IE
i f ( n a v i g a t o r . appName == ” M i c r o s o f t I n t e r n e t E x p l o r e r
”)
{
h t t p = new ActiveXObject ( ” M i c r o s o f t .XMLHTTP” ) ;
}
else
{
h t t p = new XMLHttpRequest ( ) ;
}
// s e u t i l i z e a z a metoda HTTP GET p e n t r u a o b t i n e
continutul f i s i e r u l u i test . txt
function replace () {
h t t p . open ( ”GET” , ” t e s t . t x t ” , t r u e ) ;
h t t p . o n r e a d y s t a t e c h a n g e=f u n c t i o n ( ) {
i f ( h t t p . r e a d y S t a t e == 4 ) {
document . getElementById ( ’ t e x t ’ ) . innerHTML
= http . responseText ;
}
h t t p . send ( n u l l ) ;
}
</ s c r i p t >
<d i v i d=” t e x t ”>
Text i n i t i a l
</div>
<p><a h r e f =” j a v a s c r i p t : r e p l a c e ( ) ”>R ep l ac e Text</a></p>
7.5 Exerciţii
1. Pornind de la exemplul disponibil la adresa http://www.google.com/apis/maps/documentation/in
realizaţi o pagină web care să includă harta oraşului Piteşti de la Google
Maps.
2. Creaţi o pagină ı̂n care să realizaţi un slide show cu imagini cu lăţime fixă
şi butoane de navigare ı̂nainte şi ı̂napoi printre aceste imagini.
3. Creaţi un formular ı̂n care sunt afişate trei textbox-uri ı̂n care să introduceţi
temperatura ı̂n grade Celsius, ı̂n grade Fahrenheit şi ı̂n grade Kelvin. Când
se modifica valoarea din unul dintre comboboxuri, celelalte se actualizează
corespunzător.
4. Să se programeze o pagină HTML ı̂n care clientul poate converti orice
sumă ı̂n lei ı̂n suma echivalentă ı̂n dolari USA şi ı̂n EURO. Se va prevedea
posibilitatea modificării cursului valutar.
5. Creaţi o pagină Web cu următoarele specificaţii: pentru fiecare produs se

cunosc preţul unitar şi cantitatea disponibilă. Operaţiile sunt:
• determinare valoare stoc
• determinare valoare stoc dacă preţul se modifica (+ sau -) cu un
procent indicat de utilizator
• determinare valoare stoc dacă se vinde o cantitate indicată de utili-
zator
• operaţie propusă de voi
6. Creaţi o pagină Web care să afişeze un text ı̂n bară de stare pe perioada
cât cursorul de mouse se afla ı̂n zona unui control dat (ex. textarea,
button, etc). Indicaţii: Se va utiliza obiectul predefinit status căruia i se
va atribui valoarea textului de afişat. Se va utiliza cod JS in-line, adică
ataşat controlului. Deoarece codul trebuie plasat ı̂ntre ghilimele, pentru
delimitarea şirului ce conţine textul de afişat se va utiliza apostrof. Model:
< . . . onMouseOver = ” s t a t u s = ‘ un t e x t ‘ ; r e t u r n
t r u e ; ”>
7.6 Bibliografie
• Wikipedia XMLHttpRequest: XMLHttpRequest

• IBM Tutorial: Build enterprise SOA Ajax clients with the Dojo toolkit
and JSON-RPC
Capitolul 8
Descriere: XML (eXtended

Markup Language)
8.1 Resurse
1. Pentru un tutorial XML online consultati: XML
2. Pentru un tutorial DTD online consultati: DTD
8.2 Introducere
XML este un meta-limbaj pentru marcarea structurală a documentelor şi este
fundamental ı̂n manipularea datelor semistructurate specifice Internet-ului. Da-
tele semistructurate se mai numesc şi date autodescriptive, ele putând fi descom-
puse şi analizate fără referire la o schemă externă deoarece conţin şi informaţiile
de descriere a datelor.
Metoda principală de descriere a acestor tipuri de date este limbajul XML.
Acesta permite fie definirea de etichete proprii ce corespund atributelor, fie se
poate utiliza o definiţie existentă de tip de document (DTD) care precizează
atributele, şi o gramatică de utilizare a acestora.
Elementele constructive ale limbajului sunt etichete ierarhizate. Fiecare ele-
ment are o secvenţă de perechi atribut-valoare şi o secvenţă de subelemente.
Aceste subelemente pot fi, la rândul lor, marcate sau pot fi simple segmente de
date de tip text.
Un document XML este considerat valid dacă satisface o gramatică, definită
fie prin DTD sau XMLSchema. XML realizează o marcare a datelor conform
semnificaţiei acestora. Un marcaj identifică conţinutul datelor, specificând tipul
de date şi nu modul lor de prezentare.
Principalul rol al limbajului XML este de a structura, salva şi a transmite
informaţii. Următorul exemplu este un mesaj de la Alice la Bob codificat XML
<mesaj>
<to>A l i c e </to>
<from>Bob</from>
<heading>Question </heading>
97
98CAPITOLUL 8. DESCRIERE: XML (EXTENDED MARKUP LANGUAGE)
<body>Don ’ t f o r g e t me t h i s weekend !</body>

</mesaj>
8.2.1 Marcaje
Din punct de vedere sintactic, un document XML este format dintr-o colecţie
de elemente. În general, un element este un text cuprins ı̂ntre două marcaje
balansate. Sintaxa generală a unui marcaj este:
<nume marcaj>Un t e x t </nume marcaj>
8.2.2 Elemente
Un element XML este un container format din marcaj de start, din conţinut
propriu-zis, care poate fi format din caractere şi/sau din subelemente XML şi din
marcaj de final. Un element XML poate la rândul lui să conţină sub-elemente
XML. Următorul exemplu conţine ı̂n HTML, respectiv XML, descrierea unei
lucrări pentru o conferinţă studenţească:
• Versiunea HTML
<h1>AJAX Keyword Suggest </h1>

<h2>Joe Limonada</h2>
<ul>
< l i ><B>U n i v e r s i t a t e a d i n P i t e s t i </B>
< l i >F a c u l t a t e a : Matematica s i I n f o r m a t i c a
< l i >S e c t i u n e a : Programare i n I n t e r n e t
< l i >R e f e r e n d 1 : a c c e p t a t a
< l i >R e f e r e n d 2 : a c c e p t a t a cu m o d i f i c a r i
</ul>
• Versiunea XML
<l u c r a r e >
<t i t l u >AJAX Keyword Suggest </ t i t l u >
<autor >Joe Limonada</autor >
<univ>U n i v e r s i t a t e a d i n P i t e s t i </univ>
<f a c u l t a t e a >Matematica s i I n f o r m a t i c a </ f a c u l t a t e a
>
<s e c t i u n e a >Programare i n I n t e r n e t </ s e c t i u n e a >
<r e f e r e n d >a c c e p t a t a </ r e f e r e n d >
<r e f e r e n d >a c c e p t a t a cu m o d i f i c a r i </ r e f e r e n d >
</ l u c r a r e >
În varianta XML se observă o mai bună structurare şi reguli mai stricte de
apariţie a marcajelor, precum şi lipsa marcajelor de formatare a textului.
8.2. INTRODUCERE 99
8.2.3 Atribute
Elementele sunt descrise prin atributele ataşate acestora. Atributele sunt pe-
rechi (nume, valoare) unice. Pentru ca un document XML să fie acceptat din
punct de vedere sintactic, el trebuie să fie bine format (well-formed). Un do-
cument este bine format dacă marcajele sunt balansate şi dacă atributele sunt
unice şi au valorile reprezentate ca şiruri de caractere ı̂ncadrate de ghilimele.
Următorul exemplu ilustrează utilizarea atributelor (limba şi tip) pentru
descrierea elementului marcat cu tag-ul ¡nume¿. De asemenea, prima linie re-
prezintă o declaraţie xml care nu este obligatorie, dar care se recomandă a fi
utilizată.
<?xml v e r s i o n=”1 . 0 ” ?>
<l u c r a r e >
<nume limba=”romana” t i p=” s h o r t p a p e r ” >AJAX Keyword
Suggest </nume>
<autor >Joe Limonada</autor >
</ l u c r a r e >
Prin marcarea cu tag-uri a unui document, acesta este divizat ı̂n părţi se-
mantice. Un exemplu ar fi ı̂mpărţirea unui text ı̂n capitole şi secţiuni. Existenţa
distincţiei dintre diferite părţi ale unui document permite clasificarea sau grupa-
rea acestora, urmată de tratarea lor diferenţiată. În XML o astfel de clasificare
ı̂ncepe prin impunerea restricţiei ca un document valid să fie compus dintr-un
singur element, numit rădăcină, dar acel element poate conţine alte elemente,
astfel ı̂ncât se poate crea o structură ierarhică a documentului.
Deci, un document XML conţine un set de informaţii organizat ı̂ntr-o struc-
tură arborescentă.
Aceasta are un element rădăcină şi orice alt element are un unic părinte.
Structura arborescentă corespunzătoare documentului precedent este reprezen-
tată ı̂n figura următoare:

LTW

Î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

LTW

Încărcat de

Drepturi de autor:

Formate disponibile

Laboratoare TWSM

1 Introducere ı̂n (X)HTML 7

2 CSS - Cascading Style Sheets (I) 13

3 Descriere: CSS - Cascading Style Sheets (II) 31

4 Descriere: CSS – Cascading Style Sheets (III) 55

5 Descriere: Limbajul Javascript (I) 57

6 Descriere: Limbajul Javascript (II) 73

7 Descriere: Limbajul Javascript (III) 87

8 Descriere: XML (eXtended Markup Language) 97

Introducere ı̂n (X)HTML

Exerciţiul 2 Realizaţi un document XHTML simplu cu următoarea structură:

< !DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1 . 0 T r a n s i t i o n a l

Exerciţiul 3 Folosind documentul realizat la punctual 1, verificaţi comporta-

Exerciţiul 5 Realizaţi un document XHTML 1.0 Transitional ca mai jos: iexcl

Exerciţiul 6 Testaţi validitatea documentului creat folosind validatorul W3C

Exerciţiul 7 Realizaţi un document XHTML cu CV-ul dumneavoastră:

• folosiţi formatări la nivel fizic (p, br) pentru a structura categoriile

• folositi formatări la nivel logic (em, strong) pentru a evidenţia eventualii

• folosiţi formatări la nivel de comunicare (address, acronym) acolo unde

• creaţi un cuprins cu categoriile menţionate la ı̂nceputul documentului cu

• creaţi o legătură către cuprins după fiecare categorie

• testati validitatea documentului creat folosind validatorul W3C si adau-

Exerciţiul 9 Adăugaţi ı̂n CV o legătură către un document PDF care să se

Exerciţiul 10 Realizaţi ı̂n HTML o listă ordonată (ı̂n ordinea rangului) cu

Exerciţiul 11 Realizaţi ı̂n HTML o listă neordonată cu colegii dumneavoastră

Exerciţiul 12 Realizaţi un document HTML care afişează un tabel simplu.

Exerciţiul 14 Realizaţi un formular (formă) de introducere date conform următoarelor

• componentă de tip text pentru preluare nume şi prenume

• componentă de tip text pentru preluare adresă e-mail

• componentă de tip casetă de selecţie pentru preluare specializare

• componentă de tip casetă de selecţie pentru preluare curs

• componentă de tip casetă de selecţie pentru preluare activitate. Acti-

• componentă de tip buton de validare (checkbox) pentru specificare selecţii

• trei butoane de submisie a informaţiilor introduse ı̂n formular cu următoarele

Exerciţiul 15 Creaţi un set de frame-uri. Unul dintre frame-uri va avea ca

– Forma creată la exerciţiul 1

CSS - Cascading Style

• Pentru un tutorial HTML online consultaţi: HTML

• Pentru un tutorial XHTML online consultaţi: XHTML

• selectori – elementele cărora li se aplică regulile, separate prin virgulă (,)

• declaraţii – reguli care definesc modul de formatare al selectorilor, scrise

s e le c to r 1 , s e l e c t o r 2 { property1 : value1 ; property2 :

2.3 Aplicarea CSS

• Definiţii interne documentului HTML

• Definiţii externe ı̂n fişiere CSS

2.3.1 Stilurile in-line

2.3.2 Stilurile embedded

2.4 Definiţiile externe

< !DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1 . 0 S t r i c t //EN”

2.5 Selectori, proprietăţi şi valori

Simbolul * reprezintă toate elementele HTML, şi proprietăţile specificate vor

Exemplul de mai sus va formata elementul body utilizând valorile pentru

• warning color: red; background-color: yellow

• clasa este referită prin atributul class al elementelor

<p c l a s s=“warning”> A t e n t i e ! ! ! </p>

Identificatori – un identificator se referă la cel mult un element din docu-

• identificatorul este definit prin numele lui prefixat de diez (#)

• #licenta color: red; border: solid 2pt yellow

• Un identificator apare ı̂n documentul HTML ı̂n atributul id al unui singur

<p id=” l i c e n t a ”>Nu a v e t i v o i e s ă . . . </p>

• selector#id – stilul se aplică dacă selector are identificatorul id

• selector.clasa – stilul se aplică dacă selector are clasa clasa

2.5.1 Unităţi de măsură

px (de exemplu font-size: 12px) este unitatea de măsură pentru pixeli.