Suport Laborator AE

Suport laborator
Afaceri electronice
Informatică economică
1. HTML.......................................................................................................................................... 4
1.1. Structura documentului HTML ..........................................................................................................4
1.2. Formatarea caracterelor, organizarea textului. .................................................................................10
1.3. Blocuri de text ..................................................................................................................................11
1.4. Liste ..................................................................................................................................................15
1.5. Tabele ...............................................................................................................................................20
1.6. Operarea cu imagini, obiecte audio și video ....................................................................................28
1.6.1. Inserarea imaginilor ...................................................................................................................28
1.6.2. Inserarea sunetelor și videoclipurilor ........................................................................................31
1.7. Referințe ...........................................................................................................................................35
1.7.1. Marcajul <a> .............................................................................................................................36
1.7.2. Referințe către alte pagini Web .................................................................................................37
1.7.3. Referințe cu imagini ..................................................................................................................37
1.7.4. Referințe cu adrese URL relative ..............................................................................................38
1.7.5. Referințe către informații non Web ...........................................................................................38
1.7.6.Referințe către fișiere non HTML ..............................................................................................39
1.7.7.Referințe interne în cadrul unei pagini .......................................................................................39
1.7.8. Trimiterea automată a unui e-mail ............................................................................................40
1.8. Hărți de imagini ................................................................................................................................41
1.9. Documentarea unei pagini Web .......................................................................................................43
1.10. Formulare .......................................................................................................................................45
1.11. Cadre interne ..................................................................................................................................52
2. CSS ............................................................................................................................................ 53
2.1. Introducere în CSS ...........................................................................................................................53
2.2. Sintaxa construcției CSS ..................................................................................................................53
2.3. Comentarii CSS ................................................................................................................................54
2.4. Foi de stil ..........................................................................................................................................55
2.4.1. Foaie externă de stil ...................................................................................................................55
2.4.2. Foaie internă de stil ...................................................................................................................56
2.4.3. Stiluri inline ...............................................................................................................................56
2.4.4. Foi multiple de stiluri ................................................................................................................57
2.5. Selectorii CSS ..................................................................................................................................58
2.5.1. Selectorul element .....................................................................................................................58
2.5.2. Selectorul id...............................................................................................................................59
2.5.3. Selectorul class ..........................................................................................................................59
2.6. Formatarea background-ului ............................................................................................................60
2.7. Formatarea textului...........................................................................................................................64
2.8. Fonturi ..............................................................................................................................................70
2.9. Linkuri ..............................................................................................................................................77
2.10. Liste ................................................................................................................................................79
2.11. Tabele .............................................................................................................................................85
2.12. Modelul box în CSS .......................................................................................................................90
2.12.1. Dimensiunile unui element: .....................................................................................................90
2.12.2. Chenare....................................................................................................................................92
2.12.3. Linii exterioare (outlines) ........................................................................................................99
2.12.4. Margini ..................................................................................................................................102
2.12.5. Padding ..................................................................................................................................104
2.13. Gruparea și imbricarea selectorilor ..............................................................................................109
2
2.14. Setarea dimensiunilor unui element .............................................................................................110
2.15. Proprietățile display și visibility ...................................................................................................113
2.16. Poziționarea unui element ............................................................................................................116
2.17. Deplasarea elementelor ................................................................................................................122
2.17.1. Proprietatea float ...................................................................................................................122
2.17.2. Proprietatea clear ...................................................................................................................124
2.18. Alinierea elementelor ...................................................................................................................128
2.19. Pseudo-clasele CSS ......................................................................................................................130
2.20. Bara de navigare ...........................................................................................................................138
2.21. Galerie de imagini ........................................................................................................................149
3. HTML 5................................................................................................................................... 156
3.1. Utilizare HTML 5...........................................................................................................................157
3.2. Sintaxa simplificată ........................................................................................................................157
3.3. Elemente noi în HTML5 ................................................................................................................158
3.4. Elementele exluse ...........................................................................................................................159
3.5. Site-uri responsive ..........................................................................................................................163
3.5.1. Sursa RWD ..............................................................................................................................165
3.5.2. Avantajele RWD .....................................................................................................................165
3.5.3. Modul de funcționare al RWD ................................................................................................166
3.5.4. Crearea unui site responsive ....................................................................................................166
4. JAVASCRIPT ......................................................................................................................... 168
4.1. JavaScript - Noțiuni de bază ...........................................................................................................168
4.2. Inserarea scripturilor JavaScript .....................................................................................................169
4.3. Tipuri de date JavaScript ................................................................................................................174
4.3.1. Date numerice.........................................................................................................................174
4.3.2. Şir de caractere ........................................................................................................................175
4.3.3. Valori logice sau booleene ......................................................................................................175
4.4. Operatori JavaScript .......................................................................................................................176
4.5. Instrucţiuni JavaScript ....................................................................................................................183
4.6. Funcţii.............................................................................................................................................192
4.7. Evenimentele JavaScript. ...............................................................................................................195
4.8. Obiectele JavaScript .......................................................................................................................201
4.8.1. Obiectul String ........................................................................................................................202
4.8.2. Obiectul Date...........................................................................................................................208
4.8.3. Obiectul Array .........................................................................................................................212
4.8.4. Obiectul Boolean .....................................................................................................................219
4.8.5. Obiectul Math ..........................................................................................................................220
4.8.6. Obiectul RegExp .....................................................................................................................223
4.8.7. Obiectul Navigator ..................................................................................................................231
4.8.8. Obiectele browserului..............................................................................................................232
4.8.9. Crearea obiectelor proprii ........................................................................................................251
3
1. HTML
Unul din primele elemente fundamentale ale WWW ( World Wide Web ) este HTML ( Hypertext Markup
Language ), care descrie formatul primar în care documentele sunt distribuite și văzute pe Web. Multe din
trasaturile lui, cum ar fi independenta fata de platforma, structurarea formatării și legaturile hypertext, fac
din el un foarte bun format pentru documentele Internet și Web. Documentele HTML sînt documente în
format ASCII și prin urmare pot fi create cu orice editor de texte. Au fost insa dezvoltate editoare
specializate care permit editarea într-un fel de WYSIWYG desi nu se poate vorbi de WYSIWYG atita
vreme cit navigatoarele afișează acelasi document oarecum diferit, în functie de platforma pe care ruleaza.
Au fost de asemenea dezvoltate convertoare care permit formatarea HTML a documentelor generate ( și
formatate ) cu alte editoare. Evident conversiile nu pot patra decit partial formatarile anterioare deoarece
limbajul HTML este inca incomplet.
1.1. Structura documentului HTML

Orice document HTML incepe cu notația <html> și se termina cu notația </html>. Aceste "chestii" se
numesc în literatura de specialitate "TAG-uri".Prin convenție, toate informațiile HTML incep cu o
paranteza unghiulara deschisa " < " și se termina cu o paranteza unghiulara inchisa " > ".
Tag-urile între aceste paranteze transmit comenzi către browser pentru a afișa pagina într-un anumit mod.
Unele blocuri prezintă delimitator de sfârșit de bloc, în timp ce pentru alte blocuri acest delimitator este
opțional sau chiar interzis.
Între cele doua marcaje <html> și </html> vom introduce doua secțiuni:
- sectiunea de antet <head>...</head> și
- corpul documentului <body>...</body>. Blocul <body>...</body> cuprinde conținutul propriu-zis al
paginii HTML, adică ceea ce va fi afișat în fereastra browser-ului.
O etichetă poate fi scris atât cu litere mici, cat și cu litere mari.

Adică <html> = <HTML> = <Html>. Caracterele "spațiu" și "CR/LF" ce apar între etichete sunt
ignorate de către browser. Deci un prim document HTML ar fi ceva de genul asta:
<html>
<head> </head>
<body>
</body>
</html>
4
Așa arată primul document HTML. Porniți Internet Explorer sau Google Crome, deschideți fișierul creat.
Dar un afișează nimic.
În primul rând, titlul unei pagini se obține inserând în secțiunea <head>...</head> a următoarei linii:
<title>Aceasta este prima mea pagina de Web</title>
în plus, în secțiunea <body>...</body> putem scrie texte cît dorim. Dacă nu întâlnim nici un marcaj < sau
> atunci interpretorul HTML le va lua ca texte simple și le va afișa pe ecran. să vedem o noua versiune a
paginii noastre:
<html>
<head>
<title>Aceasta este prima mea pagina de Web</title>
</head>
<body>
Bine ati venit în pagina mea de Web!
</body>
</html>
Conținutul blocului <title>...</title> va apărea în bara de titlu a ferestrei browser-ului.

Dacă acest bloc lipsește într-o pagina HTML, atunci în bara de titlu a ferestrei browser-ului va apărea
numele fișierului.
Dacă introducem mai multe linii într-o pagina browser-ul va afișa într-un singur rând, intrucât caracterele
" CR/LF " sunt ignorate de browser. Trecerea pe o linie noua se face la o comanda explicita, care trebuie
să apară în pagina html.
Această comandă este marcajul <br> ( de la " line break " - intrerupere de linie ).
Folosind aceleași operații ca mai sus, vizualizați noua pagina! Veți vedea textul ce apare în fereastra
navigatorului. În plus, pagina dvs. va avea un titlu nou, cel introdus de dvs.
<html><head>
<title>Titlul paginii</title>
</head>
<body>
Bine ati venit în <br> pagina mea de Web!
</body></html>
Blocuri preformatate
Pentru ca browser-ul să interpreteze corect caracterele " spațiu ", " tab " și " CR/LF " ce apar în cadrul
unui text, acest text trebuie inclus într-un bloc <pre>...</pre>.
<html><head>
<title>Bloc preformatat </title>
</head>
<body>
<pre>
Prima linie
A doua linie
A treia linie
5
</pre>
</body></html>
Culoarea de fond
O culoare poate fi precizata în două moduri:
 Prîntr-un nume de culoare. Sunt disponibile cel puțin 16 nume de culori: aqua, black, fuchsia, gray,
green lime, maroon, navy, olive, purple, red, silver, teal, white și yellow.
 Prin construcția " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifre hexazecimale și pot lua
valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot defini astfel 65536 de culori.
Culoarea unei pagini se precizează prin intermediul unui atribut al etichetei <body>. Culoarea fondului
paginii Web se stabilește cu atributul bgcolor al etichetei <body>, de exemplu: <body bgcolor =
culoare>.
Următorul exemplu realizează o pagină cu fondul de culoare gri.

<html><head>
<title>Culoare de fond </title>
</head>
<body bgcolor="gray">
O pagina Web cu fondul GRI!
</body></html>
Culoarea textului
Acest lucru se face prin intermediul atributului text al etichetei <body> după sintaxa <body
text=culoare>.
În următorul exemplu textul are culoarea roșie.
<html><head>
<title>culoare textului </title>
</head>
<body text="red">
Un text de culoare rosie.
</body></html>
O eticheta poate avea mai multe atribute. De exemplu, o etichetă cu trei atribute arată astfel:
<eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 = valoare3>.
Următorul exemplu prezintă o pagină cu fondul de culoare albastră și textul de culoare galbenă.
<html><head>
<title>atribute multiple </title>
</head>
<body bgcolor="blue" text="yellow">
Fond de culoare albastra și text de culoare galbena.
</body>
</html>
Textul afișat este caracterizat de următoarele atribute: Mărime ( size), Culoare ( color ), Font (style).
Acestea sunt atribute ale etichetei <basefont>.Este o eticheta singulara (fără delimitator de sfirșit de bloc).
6
<basefont size = număr color = culoare style = font>
unde:
 număr - poate fi 1, 2, 3, 4, 5, 6 sau 7; ( 1 pentru fontul cel mai mic și 7 pentru fontul cel mai mare);
 culoare - este o culoare precizata prin nume sau printr-o construcție RGB;
 font - poate fi un font generic ca " serif ", " san serif ", " cursive ", " monospace ", "fantasy " sau un font
specific instalat pe calculatorului clientului, ca " Times New Roman ", " Helvetica " sau " Arial ".Se
accepta ca valoare și o lista de fonturi separate prin virgula, de exemplu: " Times New Roman, serif,
monospace ".
Domeniul de valabilitate al caracteristicilor precizate de aceasta eticheta se intinde de la locul în care

apare eticheta până la sfarșitul paginii sau până la următoarea eticheta <basefont>. Dacă acest atribut
lipsește atunci textul din pagina Web are atribute prestabilite sau atribute precizate de browser-ul utilizat.
Atributele prestabilite sunt: size = 3, color = black, și style = " Times New Roman ". Poziționarea
conținutului paginii Web fata de marginile ferestrei browser-ului se poate face cu ajutorul a două atribute
ale etichetei <body>:
 leftmargin ( stabilește distanta dintre marginea stânga a ferestrei browser-ului și marginea stângă a
conținutului paginii );
 topmargin ( stabilește distanta dintre marginea de sus a ferestrei browser-ului și marginea de sus a
conținutului paginii );
<html><head><title>Configurarea textului și stabilirea marginii </title></head>
<body leftmargin="100" topmargin="50">
Textul are atribute implicite. <br>
<basefont style="Arial" color="blue" size="6">Textul este scris cu fontul "Arial", culoare
albastru și marime 6.
</body></html>
Stiluri pentru blocurile de text

Pentru ca un bloc de text să apară în pagina evidențiat (cu caractere aldine), trebuie inclus între
delimitatorii <b>...</b> ( b vine de la "bold" = indrăzneț). Pentru ca un text să fie scris cu caractere mai
mari cu o unitate decât cele curente acesta trebuie inclus într-un bloc delimitat de etichetele
<big>...</big>. Pentru ca un text să fie scris cu caractere mai mici cu o unitate decât cele curente acesta
trebuie inclus într-un bloc delimitat de etichetele <small>...</small>. Pentru ca un text să fie scris cu
caractere cursive acesta trebuie inclus într-un bloc delimitat de etichetele <i>...</i> ( i vine de la " italic ").
Pentru a insera secvențe de text aliniate ca indice (sub-script) sau ca exponent (super-script) , aceste
fragmente trebuie delimitate de etichetele <sub>...</sub>, respectiv <sup>...</sup>. Pentru a insera un
bloc de caractere subliniate se utilizează etichetele <u>...</u> (u vine de la " underline "). Pentru a insera
un bloc de caractere tăiate se utilizează etichetele <strike>...</strike> sau <s>...</s>. În exemplul
următor vom utiliza toate etichetele menționate anterior.
<html><head><title>Stiluri pentru blocuri de text </title></head>

<body>
<b>Text scris cu caractere ingrosate.</b><br />
<big>Text cu caractere marite cu o unitate <big>mai mare<big>și mai mare<big>și mai
mare.</big></big></big></big>
<br><small>Textul este scris cu caractere micsorate cu o unitate <small>mai
mic.</small></small><br>
7
<i>Text scris cu caractere italice.</i>
<br>în aceasta linie <sup>sus</sup> este superscript iar <sub>jos</sub> este subscirpt.<br>
<strike>Aceasta linie este în intregime sectionata de o linie orizontala.</strike> <br>
în aceasta linie urmatorul cuvant este <u>subliniat</u>, iar cuvantul <s>strike</s> sectoinat.
</body></html>
Stiluri fizice și logice

Am prezentat deja 8 stiluri de scriere a caracterelor unui bloc de text, numite și stiluri fizice intrucat nu s-a
acordat nici o atentie semnificației informatiei conținute de aceste blocuri. În continuare sunt prezentate
stilurile utilizate la formatarea unui bloc. Aceste stiluri țin cont de semnificația pe care o are blocul în
cadrul paginii Web.
Pentru a pune în evidență ( prin silul cursiv ) fragmente de text se utilizează etichetele:
 <cite>...</cite> ( " cite " inseamna citat);
 <em>...</em> (em vine de la " emphasize " = a evidentia).
în locul lor se poate utiliza eticheta echivalenta <i>...</i>.
Urmatoarele etichete au efecte similare. Ele permit scrierea fragmentului de text cu caractere monospatiate
(de tipul celor folosite de o mașină de scris):
 <code>...</code> ( " code " inseamna cod sau sursă);
 <kbd>...</kbd> ( kbd vine de la " keyboard " = tastatura);
 <tt>...</tt> ( tt vine de la " teletype " = teleprinter).
Eticheta de tip bloc <blink>...</blink> delimitează fragmente de text clipitoare. Aceasta eticheta
funcționează numai în browser-ul Netscape Communicator.
<html><head><title>Blocuri de caractere monospatiate și clipitoare </title></head>
<body>
Aceasta linie este formata din text normal.<br>
Codul functiei f(x,y) este: <code> Function f(x,y) {return x+y;}</code><br>
Tastati urmatoarea comanda comanda DOS:
<kbd> copy c:\windows\* c:\temp</kbd><br>
<tt>Asa scrie un teleprinter</tt><br>
Acest cuvant clipeste<blink>Blink</blink>
</body></html>
Exemplul următor ilustrează că etichetele pot fi imbricate.

Un fragment de text poate fi scris cu aldine și cursive în același timp.
Pentru un fragment de text se pot folosi simultan stilurile subliniat, exponent, mărit și cursiv.
<html><head><title>Imbricarea etichetelor </title></head>

<body>
Aceasta linie este formata din text normal.<br />
Normal<b>ingrosat<i>ingrosat și italic</i>ingrosat</b>.<br />
Normal <u>subliniat <b> subliniat și ingrosat <big>subliniat, ingrosat și marit.<br>
<i>Subliniat, ingrosat, marit și italic.</i></big></b></u>
</body></html>
8
Blocul <q>...</q> permite inserarea în-line a citatelor. Brouwser-ul afișează citatele în ghilimele. " q "
vine de la " în-line quotation " (citate inserate în-line). Și blocurile " q " pot fi imbricate.
Simbolurile "<" și ">" sunt percepute de sistemele browser ca inceputuri și sfârșituri de HTML-taguri.
Apare intrebarea, cum săreprezentăm aceste simboluri pe ecran?
În limbajul HTML aceasta se poate realiza cu ajutorul &- consecutivităților (ele se mai numesc obiecte
simbolice sau escapeconsecutivități).
Există mai multe consecutivități de acest tip:
"<" - <
">" - >
"&" (ampersand) &
Ghilimelele(") se codifică - "
Pentru escape-consecutivități sunt două restricții suplimentare:
 Fiecare consecutivitate se scrie numai cu minuscule
 Sfârșitul fiecărei consecutivități este marcat de ;
În general, asemenea consecutivități există pentru toate simbolurile cu codurile ASCII mai mari decât 127.
Motivul este că unele servere nu susțin transmiterea datelor câte 8 biți.
Există mai multe metode de a include semnele diacritice române în documentele HTML. Cea mai simplă
este codificarea directă a lor prin &-consecutivități:
ă - ă Ă - Ă
i - î i - Î
ș - ş Ș - Ş
ț - ţ Ț - Ţ
â - â â - Â
Exemplu:
<html ><head><title>Codificarea semnelor diacritice românești în limbajul HTML </title></head>
<h3>Codificarea semnelor diacritice românești în limbajul HTML</h3>
<p> <b>Ă</b> - Ă</p>
<p> <b>ă</b> - ă</p>
<p> <b>Î</b> - Î</p>
<p> <b>î</b> - î</p>
<p> <b>Ș</b> - Ş</p>
<p> <b>ș</b> - ş</p>
<p> <b>Ț</b> - Ţ</p>
<p> <b>ț</b> - ţ</p>
<p> <b>Â</b> - Â</p>
<p> <b>â</b> - â</p>
</body></html>
Comentarii
Sistemele browser ignoră reproducerea oricărui text situat între . Este o opțiune specială pentru
introducerea în textul documentului HTML a unor comentarii, ce nu for fi afișate pe ecran.

9
1.2. Formatarea caracterelor, organizarea textului.
Un font este caracterizat de următoarele atribute:
 culoare (stabilita prin atributul color);
 tipul sau stilul (stabilit prin atributul face);
 mărimea (definita prin atributul size);
 mărimea în puncte tipografice (stabilita prin atributul point-size);
 grosime (definita prin atributul weight).
Toate aceste atribute aparțin etichetei <font>, care permite inserarea de blocuri de texte personalizate.
Culori
O culoare poate fi precizata în două moduri:
 prîntr-un nume de culoare.
 printr-o constantă conform standardului de culoare RGB (Red, Green, Blue). O astfel de constantă se
formează astfel: #rrggbb, unde r, g și b sunt cifre hexazecimale.
Culoarea fontului
Pentru a scrie un fragment de text cu caractere de o anumită culoare se incadrează acest fragment între
delimitatorii <font>...</font> având stabilit atributul color la valoarea necesara. De exemplu:
<font color=red>fragment de text de culoare rosie</font>
Familia fontului
Pentru a scrie un text într-o pagină pot fi folosite mai multe fonturi (stiluri de caractere). Există cinci
familii generice de fonturi care sunt de regulă disponibile pe toate calculatoarele utilizatorilor: serif, sans
serif, cursive, monospace și fantasy.
Tipul de font necesar poate fi stabilit prin atributul face al etichetei <font>.
Pot fi introduse mai multe fonturi separate prin virgula.
<font face = " Arial, serif, monospace ">
în acest caz browser-ul va utiliza primul font pe care il cunoaște.
<html><head><title> Culoarea și familia fontului</title>

</head>
<body>
Aceste linie este scrisa cu caractere normale.<br />
<font color="red">Aceasta linie este rosie.</font><br />
Aici<font color="green">fiecare</font>
<font color="blue">cuvant</font>
<font color="yellow">are</font>
<font color="cyan">alta</font>
<font color="#3478fa">culoare.</font><br />
<font face="monospace">Linie scrisa cu caractere monospatiate.</font> <br />
<font face="arial">Linie scrisa cu caractere arial.</font>
</body></html>
10
Mărimea fontului
Pentru a stabili mărimea unui font se utilizează atributul size al etichetei <font>. Valorile acestui atribut
pot fi:
 1, 2, 3, 4, 5, 6, 7 ( 1 pentru cel mai mic font și 7 pentru cel mai mare);
 +1, +2, etc. pentru a mari dimensiunea fontului cu 1, 2, etc. fata de valoarea curentă;
 -1, -2, etc. pentru a micșora dimensiunea fontului cu 1, 2, etc. fata de valoarea curentă.
<html><head><title> Marimea fontului</title>

</head>
<body>
Aceste linie este scrisa cu caractere normale. <br />
<font size="5">Fonturi de marime 5.</font><br />
<basefont size="4">Fonturi de marime 4.</font><br />
<font size="-3">Fonturi de marime 1.</font><br />
<font size="+2">Fonturi de marime 6.</font><br />
<font point-size="30">Fonturi de marime 30 pt (numai cu Netcape Communicator).</font> <br />
<font point-size="50">Fonturi de marime 50 pt (numai cu Netcape Communicator).</font>
</body></html>
Grosimea unui font

Grosimea unui caracter poate fi definită cu ajutorul atributului weight al etichetei <font>. Valorile posibile
pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800 și 900 (100 pentru fontul cel mai subțire și
900 pentru cel mai gros).
<html><head><title> Grosimea fontului</title>

</head>
<body>
Aceste linie este scrisa cu caractere normale. <br>
<font weight="100">Fonturi de grosime 100.</font> <br>
<font weight="500">Fonturi de grosime 500.</font> <br>
<font weight="900">Fonturi de grosime 900.</font>
</body></html>
1.3. Blocuri de text

Aceste etichete nu se refera la particularitatiile caracterelor ce compun textul, ci la functiile pe care le
poate avea un bloc de text în cadrul paginii Web. Toate aceste etichete produc automat trecerea la un rând
nou și adaugarea unui spatiu suplimentar.
Inserarea unei adrese

Dacă într-o pagină web trebuie inclusă o adresă ,atunci putem utiliza facilitatile oferite de o eticheta
dedicată: <address>...</address>.
<html><head>
<title> Adresa</title>
</head>
<body>
11
Adresa institutiei noastre este :<address> Str. Garii <br>
nr 59-61<br>
Galati </address>
</body></html>
Indentarea unui bloc

Pentru ca un bloc de text să fie indentat ( marginea din stânga a textului să fie deplasata la dreapta la o
anumita distanta fata de marginea paginii ), acesta trebuie inclus între etichetele
<blockquote>...</blockquote>.
<html><head>
<title> Indentarea unui bloc</title>
</head>
<body>
Textul ce urmeaza este indentat:<blockquote> Aceste etichete nu se refera la particularitatiile
caracterelor ce compun textul, ci la functiile pe care le poate avea un bloc de text în cadrul paginii
Web. Toate aceste etichete produc automat trecerea la un rând nou și adaugarea unui spatiu
suplimentar. </blockquote>
</body></html>
Blocul preformatat
Într-un bloc <pre>...</pre>, semnificația marcajelor HTML se păstrează. Blocul <pre>...</pre> este
indicat pentru a insera rânduri vide ( spatiu între rândurile succesive ). Caracterul " spațiu " poate fi luat în
considerare de browser, dacă este inserat explicit prin .
<html><head><title> Bloc preformatat</title></head>
<body>
Orar:
<pre>
Ora/Ziua Luni Marti Miercuri
8:00 Romana Matematica Sport

9:00 Geografie Istorie Fizica
</pre>
</body></html>
Într-un fișier HTML, caracterele "<"şi ">" au o semnificație specială pentru browser. Ele încadrează
comenzile și atributele de afișare a elementelor într-o pagină. Dacă dorim ca un fragment de text să
conțină astfel de caractere, acest fragment trebuie incadrat de una dintre perechile de etichete:
 <xmp>...</xmp> ( 80 de caractere pe rând );
 <listing>...</listing> ( 120 de caractere pe rând ).
Aceste marcaje interpreteaza corect caracterele " spatiu ", " eticheta "şi "CR/LF ". Textul afișat în pagina
este monospațiat.
<html><head>
<title> xmp și listing</title>
</head>
<body></html>
12
Un fișier html standard arată astfel:
<xmp>
<html><head><title> </title></head>
<body>
O pagina Web ...
</body>
</html>
</xmp>
</body></html>
Blocuri paragraf
Cu ajutorul etichetei paragraf <p> este posibil trecerea la o linie nouă și permite:
 inserarea unui spatiu suplimentar înainte de blocul paragraf;
 inserarea unui spatiu suplimentar dupa blocul paragraf, Dacă se folosește delimitatorul </p> (acesta
fiind optional);
 alinierea textului cu ajutorul atributului align, avand valorile posibile " left ", " center " sau " right ".
<html><head><title> Blocuri paragraf</title></head>

<body>
Prima linie
<p> Lini generata de un paragraf (implicit paragraful este aliniat la stânga).
<p align="right"> Paragraf aliniat la dreapta.Paragraf aliniat la dreapta.Paragraf aliniat la
dreapta.Paragraf aliniat la dreapta. Paragraf aliniat la dreapta.Paragraf aliniat la dreapta.Paragraf
aliniat la dreapta.
<p align="center"> Paragraf aliniat în centru.Paragraf aliniat în centru.Paragraf aliniat în
centru.Paragraf aliniat în centru. Paragraf aliniat în centru.Paragraf aliniat în centru.Paragraf aliniat
în centru.
</body></html>
Blocuri de titlu
Într-un text titlurile ( headers ) de capitole pot fi introduse cu ajutorul etichetelor <h1>. <h2>, <h3>,
<h4>, <h5>, <h6>.
Toate aceste etichete se refera la un bloc de text și trebuie insotite de o eticheta de incheiere similara.
Aceste etichete accepta atributul align pentru alinierea titlului blocului de text la stânga (în mod prestabilit
) , în centru și la dreapta. Tag-ul <h1> permite scrierea unui titlu cu caractere mai mari și aldine, pe când
<h6> folosește caracterele cele mai mici.
<html><head>
<title> Blocuri de titlu</title>
</head>
<body>
<h1 align="center"> Titlu de marime 1 aliniat în centru </h1>
<h2 align="right"> Titlu de marime 2 aliniat la dreapta. </h2>
<h4> Titlu de marime 4 aliniat la stânga (implicit) </h4>
</body></html>
13
Linii orizontale
Într-o pagina Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul etichetei <hr>. Pentru a
configura o linie orizontală se utilizează următorele atribute ale etichetei <hr>:
 align - permite alinierea liniei pe orizontală. Valorile posibile sunt " left " ," center " și " right ";
 width - permite alegerea lungimii liniei;
 size - permite alegerea grosimii liniei;
 noshade - când este prezent definește o linie fără umbră;
 color - permite definirea culorii liniei.
<html><head><title> Linii orizontale</title>

</head>
<body>
<h1 align="center"> Tipuri de linii orizontale </h1> O linie implicita alinierea stânga, lățime
100%, grosime 2 cu umbra.
<hr>
Urmeaza o linie aliniata în centru , de lățime 50%, grosime 5 pixeli , fara umbra.
<hr align="center" width="50%" size="5" noshade> Urmeaza o linie aliniata la dreapta , de lățime
150 de pixeli, grosime 12 pixeli , de culoare rosie.
<hr align="right" width="150" size="12" color="red">
</body></html>
Blocuri <center>
Blocul introdus de etichetele <center>...</center> aliniaza centrat toate elementele pe care le conține.
<html><head>
<title> Linii orizontale</title>
</head>
<body>
<center> <hr width=10%> <hr width=40%> <hr width=70%><hr width=100%> <hr width=70%>
<hr width=40%> <hrwidth=10%> </center>
</body></html>
Blocuri <nobr>
Blocul de text cuprins între etichetele <nobr>...</nobr> va fi afisat pe o singura linie.
<html><head>
<title> Blocul <nobr></title>
</head>
<body>
<nobr> O singura linie.O singura linie.O singura linie.O singura linie.O singura linie. O singura
linie.O singura linie.O singura linie.O singura linie.O singura linie. O singura linie.O singura
linie.O singura linie.O singura linie.O singura linie.
</nobr>
</body></html>
14
Blocuri <div>
Modalitatea cea mai eficienta de delimitare și de formatare a unui bloc de text este folosirea
delimitatorilor <div>...</div>. Un parametru foarte foarte util pentru stabilirea caracteristicilor unui bloc
<div> ( diviziune ) este align ( aliniere ). Valorile posibile ale acestui parametru sunt:
 left " ( aliniere la stânga );
 center " ( aliniere centrală );
 right " ( aliniere la dreapta ).
Un bloc <div>...</div> poate include alte subblocuri. În acest caz , alinierea precizata de atributul align al
blocului are efect asupra tuturor subblocurilor incluse în blocul <div>.
Un bloc <div>...</div> admite atributul " nowrap " care interzice intreruperea rândurilor de catre browser.
<html><head><title> Blocul <div></title>

</head>
<body>
Aceasta linie este o linie normala.Urmatorul bloc este aliniat la dreapta.
<div align="right">
O singura linie.O singura linie.O singura linie.O singura linie.<br>
</div>
<div align="center">
Bloc aliniat pe centru.Bloc aliniat pe centru.<br>
</div>
</body></html>
1.4. Liste
Unul din cele mai obișnuite elemente din documentele cu mai multe pagini este un set de definiții,
referințe sau indexuri. Glosarele sunt exemple clasice în acest sens; cuvintele sunt listate în ordine
alfabetică, urmate de definiții ale termenilor respectivi. În HTML, intreaga secțiune a unui glosar va fi
gestionată printr-o lista de definiții, care este inclusa într-o pereche de marcaje de lista de definiții:
<dl>...</dl> (de la "definition list" = lista de definiții).
Observații:
- Un termen al listei este inițiat de eticheta <dt> (de la "definition term" = termen definit);
- Definitia unui termen este inițiata de eticheta <dd> (de la "definition description" = descrierea
definiției);
- Definitia unui termen incepe pe o linie noua și este indentată;
<html>
<head>
<title>Liste_ex1</title>
</head>
<body><h1 align="center">O lista de definitii</h1><hr>
15
<dl>
Glosar de termeni de World Wide Web
<dt><b>hypertext</b>
<dd> - o interconectare Web de informatii de tip text, în care orice cuvant sau fraza poate face legatura
catre un alt punct din document sau catre un alt document
<dt><b>date</b>
<dd> - fluxul nesfarsit de materiale care apar pe Internet, spre deosebire de <em>informatii</em> care
sunt date cu un anumit inteles sau valoare
<dt><b>informatie</b>
<dd> - sub-setul de date care are efectiv semnificație și care este util la momentul curent
</dl>
</body>
</html>
Liste neordonate
O lista neordonata este un bloc de text delimitat de etichetele corespondente <ul>...</ul> (" ul " vine de la
" unordered list " = lista neordonata). Fiecare element al listei este inițiat de eticheta <li> (list item).
Lista va fi intentata fata de restul paginii Web și fiecare element al listei incepe pe un rând noua.
<html><head><title>Liste_ex2</title></head>
<body><h1 align="center">O lista neordonata</h1><hr>
<ul>Culori uzuale disponibile prin nume
<li>Black</li>
<li>White</li>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li>Yellow</li>
<li>Purple</li>
<li>Aqua</li>
</ul>
</body></html>
Tag-urile <ul> și <li> pot avea un atribut type care stabilește caracterul afișat în fața fiecărui element al
listei. Valorile posibile al acestui atribut sunt:
 "circle" (cerc)
 "disc" (disc plin) (valoarea prestabilita);
 "square" (pătrat)
Listele neordonate pot fi imbricate pe mai multe niveluri

<body>
<h1 align="center">O lista neordonata de liste neordonate</h1>
<hr>
<ul>Elemente și atribute a unei pagini HTML
16
<li>Frameset
<ul>Atribute:
<li>cols</li>
<li>rows</li>
<li>border</li>
</ul></li>
<li>Frame
<ul>Atribute:
<li>src</li>
<li>name</li>
<li>scrolling</li>
</ul>
</ul>
</body></html>
Liste ordonate
O listă ordonată de elemente este un bloc de text delimitat de etichetele corespondente <ol>...</ol> (" ol "
vine de la " ordered list " = lista ordonată). Fiecare element al listei este inițiat de eticheta <li> (list item).
Lista va fi identată față de restul paginii Web și fiecare element al listei incepe pe un rând nou.
<html><head>
<title>listex_4</title>
</head>
<body>
<h1 align="center">O lista ordonata</h1>
<hr>
<ol>Culori uzuale disponibile prin nume
<li>Black</li>
<li>White</li>
<li>Red</li>
</ol>
</body></html>
Tag-urile <ol> și <li> pot avea un atribut type care stabilește tipul de caractere utilizate pentru ordonarea
listei. Valorile posibile sunt:
 " A " pentru ordonare de tipul A , B , C , D etc. ( litere mari );
 " a " pentru ordonare de tipul a , b , c , d etc. ( litere mici );
 " I " pentru ordonare de tipul I , II , III , IV etc. ( cifre romane mari );
 " i " pentru ordonare de tipul i , ii , iii , iv etc. ( cifre romane mici );
 " 1 " pentru ordonare de tipul 1 , 2 , 3 , 4 etc. ( cifre arabe - opțiune prestabilita );
Următorul exemplu este o lista ordonata cu cifre romane:

<body>
<h1 align="center">O lista ordonata cu cifre romane</h1>
<hr>
<ol type="I">Culori uzuale disponibile prin nume
17
<li>Black</li>
<li>White</li>
<li>Red</li>
</ol></body></html>
Tag-ul <ol> poate avea un atribut start care stabilește valoarea inițiala a secvenței de ordonare. Valoarea
acestui atribut trebuie să fie un număr intreg pozitiv. Următorul exemplu este o lista ordonata cu litere
mari, incepând de la valoarea C.
<body>
<h1 align="center">O lista ordonata cu litere mari, incepând de la valoarea C</h1>
<hr>
<ol type="A" start="3">Culori uzuale disponibile prin nume
<li>Red</li>
<li>Green</li>
</ol>
</body></html>
Tag-ul <li> poate avea un atribut value care stabilește valoare pentru elementul respectiv al listei.
Valoarea acestui atribut trebuie să fie un număr intreg pozitiv.
<body>
<h1 align="center">O lista ordonata avand itemi setati individual</h1>
<hr>
<ol start="3">Repetati urmatorii pasi ai algoritmului
<li>salvati fișierul</li>;
<li value="6">incarcati fișierul în browser; </li>
<li>schimbati browserul utilizat</li>
<li>incarcati din nou fișierul</li>
</ol>
</body></html>
Listele ordonate pot fi imbricate între ele sau cu liste neordonate, ca în exemplul următor:
<html><head><title>listex_8</title></head>
<body><h1 align="center">O lista ordonata de liste ordonate și neordonate</h1><hr>
<ol>Un sistem informatic include:
<li>Hardware:
<ol type="A">
<li>placa de baza</li>
<li>procesor</li>
<li>memorie</li>
<li>harddisk</li>
</ol>
<li>Software: </li>
<ul>
18
<li>Linux</li>
<li>Windows</li>
</ul>
<li>Software de aplicatie: </li>
<ul type="disc">
<li>VisualC++</li>
<li>Java</li>
<li>CorelDraw</li>
</ul>
</ol>
</body></html>
O lista de meniuri este un bloc delimitat de etichete corespondente <menu>...</menu>. Fiecare element
al listei este initiat de eticheta <li> ( list item ). Cele mai multe browsere afișează lista de meniuri ca pe o
lista neordonata. O lista de directoare este un bloc delimitat de etichete corespondente <dir>...</dir> (de
la " director "). Fiecare element al listei este inițiat de eticheta <li> (list item). Cele mai multe browsere
afișează lista de directoare ca pe o lista neordonata.
(Nu se recomanda utilizarea acestori tipuri de liste).
Utilizări speciale ale listelor

Dacă într-o listă, în loc de elementele acesteia introduse prin <li>, se inserează un bloc de text, aceasta va
fi identat ( intocmai ca elementele unei liste), exemplu:
<html><head>
<title>Liste_ex9</title>
</head>
<body>
<h1>Un bloc de text indentat</h1><hr>
<ul>Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text
indentat.
Un bloc de text indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text
indentat. Un bloc de text indentat.
</ul></body></html>
În exemplul următor lista de definiții are itemii <dt> și <dd> multipli:

<body><h1 align="center">O lista de definiții speciala</h1>
<hr>
<dl>Program
<dt><b>Luni</b></dt>
<dt><b>Marti</b>
<dt><b>Miercuri</b></dt>
<dd><i>Ora 9.00. </i>Insciere</dd>
<dd><i>Ora 11.00. </i>Audieri</dd>
<dd><i>Ora 13.30. </i>Raspunsuri</dd>
</dl>
19
</body></html>
Ultimul exemplu este o lista neordonata personalizată care utilizează pe post de elemente imagini și texte.
<body><h1>O lista personalizata</h1><hr>
<ul>Lista disciplinelor:<br />
<img src="images/r1.gif">Afaceri electronice<br />
<img src="images/r1.gif">Birotica<br />
<img src="images/r1.gif">Baze de date<br />
<img src="images/r1.gif">Informatica pentru economisti<br />
</body></html>
1.5. Tabele
Tabelele ne permit să cream o rețea dreptunghiulară de domenii, fiecare domeniu având propriile opțiuni
pentru culoarea fondului, culoarea textului, alinierea textului etc.
Pentru a insera un tabel se folosesc etichetele corespondente <table>...</table>. Un tabel este format din
rânduri. Pentru a insera un rând într-un tabel se folosesc etichetele <tr>...</tr> ( de la " table row "= rând
de tabel ).Folosirea etichetei de sfârșit </tr> este opțională.
Un rând este format din mai multe celule ce conțin date.
O celulă de date se introduce cu eticheta <td>..</td>, exemplu:
<html><head><title>Tabel_ex1</title></head>
<body>
<h1 align="center">Un tabel simplu format din 4 linii și 2 coloane</h1>
<hr>
<table>
<tr><td>cell 11</td><td>cell 11</td></tr>
</table>
</body></html>
În mod prestabilit, un tabel nu are chenar. Pentru a adăuga un chenar unui tabel, se utilizează un atribut al
etichetei <tabel>numit border. Acest atribut poate primi ca valoare orice număr intreg ( inclusiv 0 ) și
reprezintă grosimea în pixeli a chenarului tabelului. Dacă atributul border nu este urmat de o valoare
atunci tabelul va avea o grosime prestabilită egală cu 1 pixel, o valoare egală cu 0 a grosimii semnifică
absenta chenarului. Când atributul border are o valoare nenulă chenarul unui tabel are un aspect
tridimensional, exemplu:
<body>
<h1 align="center">Un tabel simplu cu chenar</h1>
<hr>
<table border="4">
20
<tr><td>cell 11</td> <td>cell 11</td></tr>
</table>
</body></html>
Alinierea tabelului
Pentru a alinia un tabel într-o pagină Web se utilizează atributul align al etichetei <table>, cu următoarele
valori posibile:
 "left " ( valoarea prestabilita );
 "center ";
 "right ".
Alinierea este importantă pentru textul ce inconjoară tabelul. Astfel :

 Dacă tabelul este aliniat stânga ( <table align="left"> ), atunci textul care urmează după punctul de
inserare al tabelului va fi dispus în partea dreapta a tabelului.
 Dacă tabelul este aliniat dreapta ( <table align="right"> ), atunci textul care urmează după punctul de
inserare al tabelului va fi dispus în partea stânga a tabelului.
 Dacă tabelul este aliniat pe centru ( <table align="center"> ), atunci textul care urmează după punctul
de inserare al tabelului va fi afișat pe toata lățimea paginii, imediat sub tabel.
<body>
<h1 align="center">Un tabel aliniat la dreapta</h1>
<hr>
Text înainte de tabel. Text înainte de tabel. Text înainte de tabel. Text înainte de tabel. Text înainte
de tabel. Text înainte de tabel. Text înainte de tabel. Text înainte de tabel. Text înainte de tabel.
Text înainte de tabel. Text înainte de tabel. Text înainte de tabel.
<table border align="right">
</table>
Text după tabel.Text după tabel.Text după tabel.Text după tabel.Text după tabel.Text după tabel.
</body></html>
Distanța dintre tabel și celelalte elemente din pagina Web poate fi stabilită cu ajutorul atributelor hspace și
vspace al etichetei <table>. Valoarea atributului hspace poate fi orice număr pozitiv, inclusiv 0, și
reprezintă distanta pe orizontala dintre tabel și celelalte elemente ale paginii Web.
Valoarea atributului vspace poate fi orice număr pozitiv, inclusiv 0, și reprezintă distanta pe verticala
dintre tabel și celelalte elemente ale paginii Web.
Aceste atribute funcționează numai cu Netscape Communicator.
Definirea culorilor de fond pentru un tabel

21
Culoarea de fond se stabilește cu ajutorul atributului bgcolor, care poate fi atasat intregului tabel prin
eticheta <table>, unei linii prin eticheta <tr> sau celule de date prin eticheta <td>. Valorile pe care le
poate primi bgcolor sunt cele cunoscute pentru o culoare. Dacă în tabel sunt definite mai multe atribute
bgcolor, atunci prioritatea este următoarea: <td>, <tr>, <table>(cu prioritate cea mai mica).
<body>
<h1 align="center">Un tabel simplu colorat</h1>
<hr>
<table border="3" bgcolor="green">
<tr><td>verde 11</td><td bgcolor="red">rosu 12</td></tr>
<tr bgcolor="blue"><td>albastru 21</td><td bgcolor="yellow">galben 22</td></tr>
<tr bgcolor="cyan"><td>cell 31</td><td>cell 32</td></tr>
<tr><td>cell 41</td> <td bgcolor="white">cell 42</td></tr>
</table>
</body></html>
Culoarea textului din fiecare celulă se poate stabili cu ajutorul expresiei:
<font color="valoare">...</font>.
Dimensionarea celulei unui tabel

Distanta dintre doua celule vecine se definește cu ajutorul atributului cellspacing al etichetei <table>.
Valorile acestui atribut pot fi numere întregi pozitive, inclusiv 0, și reprezintă distanta în pixeli dintre doua
celule vecine. Valoarea prestabilita a atributului cellspacing este 2.
<body>
<h1 align="center">Un tabel fara chenar de celule alipite</h1>
<hr>
<table cellspacing="0">
<tr><td bgcolor="gray">gri 11</td><td bgcolor="red">rosu 12</td></tr>
<tr bgcolor="blue"><td>albastru 21</td><td bgcolor="yellow">galben 22</td></tr>
</table>
</body></html>
Distanța dintre marginea unei celule și conținutul ei poate fi definita cu ajutorul atributului cellpadding al
etichetei <table>. Valorile acestui atribut pot fi numere întregi pozitive, și reprezintă distanta în pixeli
dintre celule și conținutul ei. Valoarea prestabilita a atributului cellpadding este 1.
<html><head><title>tabelex_6</title></head>
<body><h1 align=center>Un tabel de celule mari</h1>
<hr>
<table border cellpadding="20">
<tr><td>gri 11</td><td>rosu 12</td></tr>
<tr><td>albastru 21</td><td>galben 22</td></tr>
</table>
</body></html>
22
Dimensionarea unui tabel
Dimensiunile unui tabel - lățime și inălțimea - pot fi stabilite exact prin intermediul a doua atribute, width
și height, ale etichetei <table>. Valorile acestor atribute pot fi:
 numere întregi pozitive reprezentând lățime respectiv inălțimea în pixeli a tabelului;
 numere întregi între 1 și 100, urmate de semnul %, reprezentând fracțiunea din lățime și înălțimea
totală a paginii.
<body>
<h1 align="center">Un tabel de de 200 pixeli X 50%</h1>
<hr>
<table border width="200" height="50%">
</table>
</body></html>
În exemplul următor se utilizează un truc care permite afișarea într-o pagină Web a unui text poziționat în
centrul paginii.
<body>
<h1 align="center">Un text centrat într-o pagina</h1>
<table width="100%" height="100%">
<tr><td align="center"><h2>Text centrat.</h2></td></tr>
</table>
</body></html>
Titlul unui tabel

Unui tabel i se poate atașa un titlu cu ajutorul etichetei <caption> ( de la "table caption" = titlu tabel ).
Aceasta eticheta trebuie plasata în interiorul etichetelor <table>...</table>, dar nu în interiorul etichetelor
<tr> sau <td> Titlul unui tabel poate fi aliniat cu ajutorul atributului align al etichetei <caption> care
poate lua una dintre valorile:
 " bottom " ( sub tabel );
 " top " ( deasupra tabelului );
 " left " ( la stânga tabelului );
 " right " ( la dreapta tabelului ).
<body>
<h1 align="center">Un tabel cu titlu</h1>
<table border><caption align="top">Masini
<tr><td>Mercedes</td><td>Citroen</td><td>Jaguar</td></tr>
<tr><td>BMW</td><td>Volvo</td><td>Renault</td></tr>
</table>
</body></html>
23
Cap de tabel
Un tabel poate avea celule cu semnificația de cap de tabel. Aceste celule sunt introduse de eticheta <th> (
de la " tabel header " = cap de tabel ) în loc de <td>. Toate atribute care pot fi atașate etichetei <td> pot fi
de asemenea atașate etichetei <th>. Conținutul celulelor definite cu <th>este scris cu caractere aldine și
centrat.
<body>
<h1 align="center">Un tabel cu titlu și cap de tabel</h1>
<table border><caption align="bottom">Preturile masinii
<tr><th>Pret</th><th>Citroen</th><th>Jaguar</th><th>BMW</th><th>Volvo</th></tr>
<tr><th>în dolari</th><td>5000</td><td>100000</td><td>50000</td><td>80000</td></tr>
<tr><th>în
lei</th><td>2000000</td><td>2000000000</td><td>2000000</td><td>16000000</td></tr>
</table></body></html>
Alinierea conținutului unei celule

Alinierea pe orizontala a conținutului unei celule se face cu ajutorul atributului align care poate lua
valorile:
 "left" ( la stânga );
 "center" ( centrat , valoarea prestabilita );
 "right" ( la dreapta );
 "char" ( alinierea se face fata de un caracter ).
Alinierea pe verticala a conținutului unei celule se face cu ajutorul atributului valign care poate lua
valorile:
 "baseline" ( la baza );
 "bottom" ( jos );
 "middle" ( la mijloc, valoarea prestabilita );
 "top" ( sus ).
Aceste atribute pot fi atașate atât etichetei <tr> pentru a defini tuturor elementelor celulelor unui rând, cat
și etichetelor <td> și <th> pentru a stabili alinierea textului într-o singura celulă.
<body>
<h1 align="center">Un tabel avand conținutul celulelor aliniate</h1>
<table border width="50%" height="50%">
<tr align="right"><td>Aici</td><td>alinierea</td><td>este centru</td><td>dreapta</td></tr>
<tr><td align="left">stânga</td><td align="center">centru</td><td
valign="top">sus</td><tdvalign="bottom">jos</td></tr>
<tr align="left"><td>aici</td><td>alinierea</td><td>este centru</td><td>stânga
(implicita)</td></tr></table>
</body></html>
24
Dimensionarea exacta a celulelor unui tabel
Dimensiunea unei celule de tip <td> sau de tip <th> pot fi stabilite exact cu ajutorul a două atribute ale
acestor etichete: widthpentru lățime și height pentru inălțime. Valorile posibile ale acestor atribute sunt:
 numere întregi pozitive ( inclusiv 0 ) reprezentand dimensiunea în pixeli a latimii, respectiv a inaltimii
unei celule;
 procente din lățime , respectiv înălțimea tabelului.
<body><h1 align=center>Un tabel cu celule de 100x150 de pixeli</h1>
<hr>
<table border>
<tr><td width="100" height="150">cell 11</td><td width="100" height="150">cell 11</td></tr>
<tr><td width="100" height="150">cell 21</td><td width="100" height="150">cell 22</td></tr>
</table>
</body></html>
Tabele de forme oarecare

Un tabel trebuie privit ca o retea dreptunghiulara de celule. Cu ajutorul a doua atribute ale etichetelor
<td> și <th>, o celulă se poate extinde peste celule vecine. Astfel:
 extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului colspan, a cărui
valoare determină numărul de celule care se unifică.
 extinderea unei celule peste celulele dedesubt se face cu ajutorul atributului rowspan, a carui valoare
determină numărul de celule care se unifică.
Sunt posibile extinderi simultane ale unei celule pe orizontala și pe verticala. În acest caz , în etichetele
<td> și <th> vor fi prezente ambele atribute colspan și rowspan.
<body>
<h1 align="center">Un tabel simplu cu chenar</h1>
<hr>
<table border="3">
<tr><td rowspan="3">cell 11<br>cell 21<br>cell 31</td><td>cell 12</td><td colspan="2"
rowspan="3">cell 13, cell 14<br>cell 23, cell 24<br>cell 33, cell 34</td></tr>
<tr><td>cell 22</td></tr>
<tr><td>cell 32</td></tr>
<tr><td>cell 41</td> <td colspan="3">cell 42, cell 43, cell 44</td></tr>
</table>
</body></html>
Atributul " nowrap "

Atributul nowrap apartine elementelor <td> și <th> ; el interzice intreruperea unei linii de text.Astfel , în
tabel pot apărea coloane cu o lățime oricit de mare.
<body>
<h1 align="center">Un tabel cu celule de lățime mare</h1>
25
<hr>
<table border>
<tr><td nowrap>cell 21</td> <td>cell 22 este foarte lata,aceasta celulă este foaret lata.</td></tr>
</table>
</body></html>
Celule vide ale unui tabel
Dacă un tabel are celule vide, atunci aceste celule vor aparea în tabel fară un chenar de delimitare. În
scopul de a afișa un chenar pentru celule vide se utilizează urmatoarele trucuri:
 dupa <td> se pune ;
 dupa <td> se pune <br>.
Caracterul ( no break space ) este de fapt caracterul spatiu. Un spațiu introdus prin intermediul
acestui caracter nu va fi ignorat de browser.
<body>
<h1 align="center">Un tabel cu celule vide</h1>
<hr>
<table border>
<tr><td>cell 11<td><td>cell 12</td><td>cell 13</td></tr>
<tr><td> </td> <td></td></tr>
</table>
</body></html>
Grupuri de coloane
Blocul <colgroup>...</colgroup> permite definirea unui grup de coloane. Atributele acceptate de
<colgroup> sunt:
 span determina numărul de coloane dintr-un grup;
 width determina o lățime unica pentru coloanele din grup;
 align determina un tip unic de aliniere pentru coloanele din grup.
Exemplu:
<colgroup span="3" width="100"></colgroup>
într-un bloc <colgroup>, coloanele pot avea configurări diferite dacă se utilizează elementul <col>, care
admite atributele:
 span identifica acea coloană din grup pentru care se face configurarea. Dacă lipsește, atunci coloanele
sunt configurate în ordine;
 width determina o lățime pentru coloana identificata prin span;
 align determina o aliniere pentru coloana identificata prin span.
<body>
<h1 align="center">Grupuri de coloane</h1>
<hr>
<table width="400" cellspacing="10">
26
<colgroup><col width="100" align="right"><col width="100" align="center"><col width="200"
align="right"></colgroup>
<tr><td valign="top">Text în prima coloana. Text în prima coloana. Text în prima coloana. Text
în prima coloana.</td> <td valign="top">Text în coloana doua.Text în coloana doua.Text în
coloana doua.Text în coloana doua.</td><td valign="top">Text în coloana a treia. Text în coloana
a treia. Text în coloana a treia. Text în coloana a treia.</td></tr>
</table>
</body></html>
Atributele frame și rules

Atributul frame al etichetei <table> permite specificarea parților din chenarul unui tabel care vor fi
afișate. Valorile posibile ale acestui atribut sunt:
 void - elimina toate muchiile exterioare ale tabelului;
 above - afișează o muchie în partea superioară a cadrului tabelului;
 below - afișează o muchie în partea inferioară a cadrului tabelului;
 hsides - afișează cate o muchie în partea superioară și inferioară cadrului tabelului;
 lhs - afișează o muchie în partea din stânga a cadrului tabelului;
 rhs - afișează o muchie în partea din dreapta a cadrului tabelului;
 vsides - afișează o muchie în partea din stânga și din dreapta a cadrului tabelului;
 box - afișează o muchie pe toate laturile cadrului tabelului;
 border - afișează o muchie pe toate laturile cadrului tabelului;
 Atributul rules al etichetei <table>permite alegerea unor delimitatori pentru celulele unui tabel.
Valorile posibile sunt:
 none - elimina toate muchiile interioare ale tabelului;
 groups - afișează muchii orizontale între toate grupurile din tabel.Grupurile sunt specificate prin
elementele <thead>, <tbody>, <tfoot>și <colgroup>.
 rows - afișează muchii orizontale între toate liniile tabelului;
 cols - afișează muchii verticale între toate coloanele tabelului;
 all - afișează muchii între toate liniile și coloanele;
<body>
<h1 align="center">Atributele frames și rules</h1>
<table width="400" frame="box" rules="rows" cellspacing="10">
<tr><td>cell 11</td><td>cell 12</td><td>cell 13</td></tr>
<tr><td>cell 21</td><td>cell 22</td><td>cell 23</td></tr>
</table>
</body></html>
Subblocurile unui table - în specificatiile HTML 4.0, conținutul unui tabel poate fi împărțit în subblocuri
prin elementele:
 <thead><tr><td>...</thead> ( un singur rând );
 <tfoot><tr><td>...</tfoot> ( un singur rând );
 <tbody><tr><td>...</tbody> ( oricâte rânduri );
într-un tabel există un singur subbloc de tipul <thead> și un singur subbloc de tipul <tfoot>, dar pot
există mai multe subblocuri de tip <tbody>.
27
1.6. Operarea cu imagini, obiecte audio și video
1.6.1. Inserarea imaginilor
Folosirea imaginilor sporește atractivitatea și designul paginii, duce la o mai bună ințelegere a mesajului,
dar trebuie luat în considerație și faptul că excesul de imagini va duce la incărcarea greoaie a site-ului.
Există numeroase formate grafice, dar cele mai răspândite sunt:
 GIF – pentru majoritatea imaginilor din web, butoane, panouri publicitare, desene etc., datorită
dimensiunii mici a fișierelor.
 JPEG pentru fotografii, când se dorește să se redea cât mai exact culoarea reală a imaginii.
 PNG – pentru desene complexe, dar și pentru fotografii, acesta fiind formatul care imbină
caracteristicile celor două.
Imaginile pot fi descărcate de la adrese absolute sau relative. Adresele URL (Uniform Resource Locator)
reprezintă standarde de identificare a resurselor (de exemplu, fișiere) și pot fi adrese URL absolute și
relative.
Adrese URL absolute

Adresele absolute identifică locația unui fișier imagine de pe Internet sau alte calculatoare conectate la
Internet și au sintaxa: protocol/nume_calculator/cale/nume_fișier
Un exemplu de adresă URL absolută: http://edugal.ro/images/eu.jpg unde:
 htpp:// – este protocolul Internet utilizat;
 edugal.ro – este numele calculatorului;
 images – este calea până la fișierul imagine dorit;
 eu.jpg – este fișierul imagine C.A.
Adrese URL relative

O adresă relativă identifică locația unei imagini, descriind o cale relativă la directorul curent unde se află
fișierul imagine. Adresele relative se referă la localizarea fișierului imagine de pe calculatorul personal și
are sintaxa: cale/nume_fișier.
Referirea la:
– directorul părinte se poate face prin “../”
– directorul rădăcină se poate face prin “/”
Un exemplu de adresă URL relativă: /../../../friend.jpg sau se mai poate scrie

c:/windows/web/wallpaper/friend.jpg
Toate imaginile cu care vom lucra vor avea adresa URL exprimată în funcție de directorul ce conține
documentul HTML care face referire la imagine, adică adresă relativă.
Imaginile se inseraeză în pagini cu ajutorul tag-ului <img>, care este un element inline, adică poate fi
inserat oriunde în pagină. Sintaxa acestui element este: <img atribute>.
în continuare este prezentat un exemplu de utilizare a elementului <img>:
<html><head></head>
<body>
Imagine
<img src="Poza.jpg" height="150" width="150" border="4"> de la Atlantic City
<body><html>
28
Pentru ca acest exemplu să poată fi executat, trebuie ca fișierul Taj_Mahal.jpg să fie în același folder cu
pagina, deoarece nu s-a indicat nicio adresă.
Atributele elementului img

Atributele elementului <img> sunt: src, alt, align, border, height, width, hspace, vspace.
În continuare vor fi descrise succint aceste atribute.
Atributul src
Atributul src este un atribut obligatoriu al elementului IMG, care identifică fișierul ce conține imaginea
care se dorește a fi inserată. Fișierele imagine pot avea extensia: .jpg, jpeg, png etc. Fișierul care conține
imaginea se găsește în directorul curent (ca în exemplul de mai sus), în alt folder din calculatorul curent
sau în rețeaua web. În cazul în care fișierul se află:
 în altă locație decât directorul curent, numele fișierului trebuie precedat de calea relativă la directorul
curent;
 în rețeaua web, trebuie dată adresa URL absolută, ca de exemplu
http://edugal.ro/galerie/img_1631.jpg.
Atributul alt Există posibilitatea ca imaginile să nu se poată incărca din diferite motive, situație în care se
folosește atributul alt al elementului <img>. Valoarea acestui atribut este un text, care va fi afișat în locul
imaginii.
<html>
<head></head>
<body>
<img src="Poza.jpg" height =150 width = 150 alt="Hotelul ">de la Galati
</body>
</html>
Atributul align
Atributul align indică browser-ului cum va fi aliniată poza față de text. În lipsa unei opțiuni, poza este
plasată acolo unde este scrisă în cod (<img>este element inline, iar textul incepe de la baza
pozei).Valorile atributului sunt:
 left – aliniere la stânga și textul „curge” pe lângă imagine în dreapta ei, incepând din partea superioară;
 right – aliniere la dreapta și textul „curge” pe lângă imagine în stânga ei, incepând din partea superioară
;
 top – textul este plasat în partea superioară a imaginii;
 middle – textul are plasat, la mijlocul imaginii, numai primul rând, restul continuând sub imagine;
 bottom – textul este plasat în partea de jos a imaginii și continuă sub imagine.
În exemplul următor se poate vedea modul de aliniere a imaginii într-o pagină:

<html><head></head><body>
<h2 align="center">Alinieri Imagini</h2>
<pre>Aliniere Bottom </pre>
<img src="Poza.jpg" height="100" width="100" align="bottom">
Aceasta este o imagine aliniata <i>bottom </i> care este alinierea implicita pe verticala.
Numai primul rând este aliniat bottom restul textului este sub imagine.
<pre>Aliniere Top</pre>
29
<img src="Poza.jpg" height ="100" width="100" align="top">
Aceasta este o imagine aliniata <i>Top </i>, care este alinierea <i> sus</i> pe verticala.
Numai primul rând este aliniat <i>Top </i> restul textului este sub imagine.
<pre>Aliniere Middle </pre>
<img src="Poza.jpg" height="100" width="100" align="middle">
Aceasta este o imagine aliniata <i>Middle</i> care este alinierea <i>pe centru </i> pe verticala.
Numai primul rind este aliniat <iI>Middle </i> restul textului este sub imagine.
<pre>Aliniere Left </pre>
<img src="Poza.jpg" height="100" width="100" align="left">
Aceasta este o imagine aliniata<i>Left</i>care este alinierea<i>stinga</i> pe orizontala.
<p>Textul curge pe lingă poză în dreapta ei.
<pre>Aliniere Right </pre>
<img src="Poza.jpg" height="100" width="100" align="right">
Aceasta este o imagine aliniata <i>Right</i> care este alinierea <i>dreapta</i> pe orizontala.
<p>Textul curge pe linga poză în stinga ei.
</body></html>
Atributul border
Atunci când se inserează o imagine, browser-ul o va afișa fără chenar. Pentru a adăuga un chenar unei
imagini se folosește atributul border=”nr_pixeli”, unde nr_pixeli reprezintă grosimea chenarului în
pixeli. Valoarea implicită este 0. Dacă în exemplul de mai sus se mai adaugă acest atribut <img
src="Poza.jpg" height ="150" width = "150" border = "4"> browser-ul va afișa: vezi ...
Atributele width și height

Imaginea este transferată de browser-e de la adresele URL la adresa de unde se vizualizează pagina, la
dimensiunile ei reale. Pentru a redimensiona o imagine pe lățime se folosește atributul width, iar pe
inălțime se folosește atributul height. Redimensionarea unei imagini se face în mod absolut în pixeli sau
prin raportare la ecran, astfel că valorile acestor atribute pot fi date în:
 numere naturale, ce reprezintă dimensiunea în pixeli;
 în procente, ce reprezintă o fracțiune din dimensiunea ferestrei.
Observații: Dacă se modifică doar o dimensiune, imaginea va fi afișată de browser proporțional. Dacă
se modifică ambele dimensiuni, imaginea va fi afișată de browser deformată.
Un exemplu de redimensionare a imaginii este dat mai jos.
<html><head></head>
<body>
<img src="Poza.jpg" height="150" width="150" alt="Imagine">de la Atlantic City
<img src="Poza.jpg" width="80" height="200" alt="Imagine">de la Atlantic City
<img src="Poza.jpg" height="350" alt="Imagine">de la Atlantic City
</body></html>
30
Atributele hspace și vspace
Aceste atribute au același efect ca și atributele cu același nume ale elementului <table>, și, anume, asigură
distanța de la imagine la celelalte componente din pagină, pe orizontală (hspace) și pe verticală (vspace),
adică definesc spații albe în jurul imaginilor.
Un exemplu în care sunt folosite aceste atribute este dat mai jos.
<html><head></head>
<body>
<p>text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text.</p>
<p>Imagine <img src="Poza.jpg" height="150" width="150" alt="Imagine"hspace="50"
vspace="20"> inca text text text text text text text text text text text text text text text text
</body></html>
Atributul clear al elementului BR
Dacă se dorește a se șterge textul din jurul unei imagini se folosește elementul <br clear=”valoare”>,
unde valoare poate fi:
 all – se șterge tot textul din jurul imaginii
 left – se șterge tot textul din stânga imaginii
 right – se șterge tot textul din dreapta imaginii
 none – se lasă textul din jurul imaginii
În exemplul de mai sus se adaugă <BR clear=right>, după elementul <img>

O imagine poate fi utilizata pentru a stabili fondul unei pagini Web. În acest scop se folosește atributul
background al etichetei <body>, având ca valoare adresa URL a imaginii.
Imaginea se multiplică pe orizontală și pe verticală până umple intregul ecran.
<html><head><title>Imagini pentru fundal</title><head>

<body background="../images/bg.gif">
<pre>
</pre>
</body>
</html>
Utilizari speciale ale imaginilor

Imaginile pot fi utilizate pentru a obține efecte deosebite într-o pagină web. Printre aceste utilizări speciale
putem enumera:
 Linii orizontale formate cu ajutorul imaginilor;
 Simboluri speciale pentru elementele unei liste neordonate.
1.6.2. Inserarea sunetelor și videoclipurilor

Informațiile multimedia pot fi redate direct de browser sau prin intermediul unui program ajutător (un
player specializat), în funcție de elementul HTML și de formatul fișierului multimedia folosit.
Cea mai simplă cale de a realiza acest lucru este prin folosirea unei ancore (link) care să ducă la sursa
elementului multimedia. Este cea mai “prietenoasă” metodă intrucât oferă posibilitatea vizitatorilor de a
alege între a vedea o pagină web cu elemente multimedia sau fără acestea. În acest caz pagina se incarcă
mult mai repede nemaifiind nevoie să se incarce toate informațiile multimedia.
31
O metodă specifică, mai complexă, ce are ca rezultat includerea în pagina web (ca parte integrantă din
aceasta) a unor informații multimedia, se realizează prin intermediul elementului <OBJECT>.
Notă: Deși, în funcție de browser-ul folosit, mai pot fi folosite și alte elemente, cum ar fi <BGSOUND>,
recunoscut de Internet Explorer, și <EMBED>, recunoscut de Internet Explorer și Netscape, consorțiul
W3C (World Wide Web Consortium) recomandă utilizarea elementului <OBJECT>.
Atributele utilizate cu acest element sunt:

Atribut Descriere
archive Precizează locația (URL-ul) fișierelor arhivă
Precizează locația (URL-ul) obiectului. Valorile posibile depind de proiectantul
classid elementului de control. În Windows, aceste valori sunt inscrise în regiștri și pot fi
accesate cu aplicația Registry Editor
Precizează calea (URI-ul) în care se găsește clasa obiectului specificat prin
codebase
atributele classid, data şi archive
codetype Specifică tipul fișierului specificat prin atributul classid
Precizează numele și locația (URL-ul) obiectului. Se poate folosi împreună sau ca o
data
alternativă a atributuluiclassid, în funcție de tipul obiectului
Cind este prezent, acet atribut face ca definiția curentă introdusă de elementul
declare
<OBJECT> să fie tratată ca o simplă declarație
height Specifică inălțimea suprafeței în care va fi afișat obiectul
name Precizează denumirea obiectului (când acesta este cuprins într-un formular)
standby Precizează textul ce va fi afișat până când este incărcat obiectul
Precizează poziția elementului curent în document (ordinea în care va fi focalizat
tabindex
de utilizator când se folosește tastatura)
Determină tipul MIME asociat cu fișierul respectiv. Este un atribut opțional dar
type
recomandat când se folosește atributul data
width Specifică lățimea suprafeței în care va fi afișat obiectul
Acest element necesită în mod obligatoriu tag-ul de inchidere corespunzător </OBJECT>. Împreună cu
elementul <OBJECT> (în interiorul acestuia) se folosește și elementul asociat <PARAM> care definește
parametrii elementului <OBJECT>.
Atributele utilizate cu acest element sunt:

Atribut Descriere
id Precizează un identificator unic pentru element
name Precizează o denumire pentru element
32
type Determină tipul conținutului
value Specifică valoarea parametrului
valuetype Specifică tipul valoarii parametrului
Alte metode de inserare a unor sunete într-o pagină web

Așa cum am atras atenția anterior, pentru introducerea de sunete într-o pagină web mai pot fi folosite și
alte elemente, cum ar fi <BGSOUND>, recunoscut de Internet Explorer, și <EMBED>, recunoscut de
Internet Explorer și Netscape.Elementul <BGSOUND> este folosit pentru a insera un sunet pe fundalul
unei pagini web. Fișierele suportate de acest element pot fi în format WAV, AU sau MID. Atributele
caracteristice acestui element sunt:
Atribut Descriere
Precizează balansul. Poate lua valori între -10000 (100% stânga) și +10000 (100%
balance
dreapta)
delay Definește timpul de pauză dintre repetiții
id Definește un identificator atribuit sunetului
loop Precizează de câte ori va fi repetat sunetul (-1 = infinit)
src Precizează locația (URL-ul) fișierului ce conține sunete
title Precizează un titlu atribuit sunetului
volume Precizează volumul. Poate lua valori între 0 (max.) și -10000 (min.)
Sintaxa folosirii acestui element este foarte simplă:

<html><body>
<h2>Muzica în fundal </h2>
<bgsound src="http://edugal.ro/muz/town.mid"></body></html>
Folosind codul de mai sus veți obține o pagină web pe fundalul cărei se va auzi o piesă
instrumentală.Elementul <EMBED> este folosit pentru a insera elemente multimedia într-o pagină web în
cazul browsere-lor care nu suportă elementul <OBJECT>. Elementul <OBJECT> poate fi folosit cu
browserele mai noi, care suportă controale ActiveX (Internet Explorer ³ 5), în vreme ce elementul
<EMBED> este recomandat să fie folosit pentru browserele mai vechi. Pentru compatibilitate, se
recomandă folosirea simultană a celor două elemente. În această situație, un browser care recunoaște
elementul <OBJECT> va ignora elementul <EMBED>.
Atributele caracteristice acestui element sunt:

Atribut Descriere
Stabilește dacă obiectul multimedia pornește în mod automat la incărcarea paginii
autostart
web. Poate lua valorile true sau false
height Specifică inălțimea suprafeței în care va fi afișat obiectul
33
Stabilește dacă obiectul multimedia este vizibil pentru vizitatorul paginii web. Poate
hidden
lua valorile true sau false
src Precizează locația (URL-ul) fișierului ce conține sunete
width Specifică lățimea suprafeței în care va fi afișat obiectul
volume Precizează volumul. Poate lua valori între 0 (max.) și -10000 (min.)
Împreună cu elementul <EMBED> se recomandă folosirea elementului <NOEMBED> care ar trebui să

conțină informații ce vor fi afișate în cazul în care browser-ul nu suportă elementul <embed>. din
nefericire, un browser care suportă elementul <embed> va ignora elementul <noembed>, chiar dacă este
incapabil să afișeze obiectul introdus de elementul <embed>.
Sintaxa recomandată pentru folosirea acestui element este următoarea:

<embed src="http://edugal.ro/cale/fișier_multimedia" width="..." height="..." >
<noembed>
<p>din păcate nu aveți instalat plugin-ul corespunzător pentru a vedea acest tip de fișier multimedia.
puteți vedea în continuare o imagine edificatoare.
<img src="http://edugal.ro/cale/fișier_imagine" width="..." height="..." alt="o imagine edificatoare">
</noembed>
Se poate folosi chiar și o combinație între elementele <EMBED> și <BGSOUND>, astfel incât, dacă unul
din elemente nu este suportat de browser, să fie recunoscut celălalt.
Folosirea codului următor:
<html><body>
<embed src="m_v/RM.mid" width ="100" height="40" >
<noembed>
<h2>Muzica în fundal </h2>
<bgsound src="m_v/RM.mid">
</noembed>
</body></html>
Pentru exemplificare, vom crea un fișier test.html ce va cuprinde o parte dintre elementele prezentate
anterior:
<html><head><title>Adaugarea de informatii multimedia unei pagini web</title></head>
<body>
<h2>Inserarea unei imagini</h2>
<object height="200" width="200" type="image/jpeg" data="../images/Poza.jpg">
</object>
<br />
<h2>Inserarea unui sunet (format .wav)</h2>
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="FileName" valua="Ready.wav">
<embed src="m_v/Ready.wav" width="100" height="40" >
<noembed> Browser-ul dvs. nu suportă elementele object și nici embed</noembed>
</object>
34
<br />
<h2>Inserarea unui film (format .wmv)</h2>
<object width="240" height="160" type="video/x-ms-asf" url="3d.wmv"
data="m_v/news.wmv"classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="m_v/news.wmv">
<param name="filename" value="m_v/news.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full">
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="m_v/news.wmv" width="240" height="160"
autostart="true"showcontrols="true"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>
<br />
<h2>Inserarea unei pagini web</h2>
<object type="text/html" heght="200" width="400" data="ex40.html">
</object>
<br />
<h2>Inserarea unei animatii Flash (format .swf)</h2>
<object width="400" height="200" classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#4,0,
0,0">
<param name="movie" value="m_v/flash.swf">
<embed src="m_v/flash.swf" width="400" height="200">
</embed>
</object>
</body></html>
1.7. Referințe
Până acum am invățat să creăm documente HTML în care am introdus text și imagini. În acest capitol
vom arăta cum putem accesa orice resursă Web, Internet și internă cu ajutorul referințelor (legături, link-
uri, hiperlegături).
Referințele au următoarele roluri:

 Permit trecerea de la o pagină la alta de pe Web și revenire la pagina inițială prin apăsarea butonului
Back al browser-ului;
 Permit trecerea de la o pagină la alta de pe calculatorul propriu;
 Permit trecerea la fișiere non web de pe Internet (ftp, telnet etc.);
 Permit trecerea la fișiere non HTML (.txt, .jpg, .pdf etc.);
 Permit vizitarea unei pagini оncepând dintr-un anumit loc, renunțând la barele de defilare;
 Permit trimiterea unui e-mail.
35
1.7.1. Marcajul <a>
Pentru a crea o legătură se folosește marcajul <a> ancoră, care are sintaxa: <a atribute> conținut </a>.
Conținutul dintre marcajele <a> și </a> poate fi text și/sau imagine, este afișat de browser sub formă de
legătură (colorat și subliniat), și poate accepta comenzi de la mouse (un clic) sau de la tastatură (ENTER).
Când este deasupra unei legături, cursorul grafic ia forma unei mâini, indicându-ne astfel că browser-ul
este pregătit să descarce resursa Internet de la adresa URL indicată. Dacă un document are mai multe
legături ne putem deplasa de la una la alta și cu mouse-ul și cu ajutorul tastei TAB, iar pentru a face o
legătură activă se execută clic cu butonul stâng pe legătură sau se tastează ENTER.
Atributele tag-ului <a> sunt:
 href;
 target;
 title;
 name;
Atributul href
Atributul href (referință hipertext) este obligatoriu pentru tag-ul legătură (ca src pentru elementul <img>),
are sintaxa href="adresa URL" și are rolul de a identifica o adresă URL absolută (de pe Internet) sau
relativă (locală). În exemplul de mai jos dăm o referință către un fișier local, flori.jpg, și către pagina
Colegiului de Informatică, de pe WEB:
<html><head> <title>Referinte</title></head>
<body>
<p>Florile mele preferate<a href="images/crini.jpg">Crini</a>
<p>Detalii despre Colegiul de Informatica
<a href="http://edugal.ro">CIC</a>
</body></html>
Atributul target
Când utilizatorul activează o legătură, browser-ul inlocuiește fereastra care conține legătura cu o nouă
fereastră, specificată de adresa URL din href. Atributul target face să se schimbe această operație implicită
și el are sintaxa target="nume", unde numedefinește fereastra în care va fi incărcată noua pagină.
Numele este orice șir de caractere sau valori constante:
 _blank pagina va fi incărcată într-o nouă fereastră;
 _parent pagina va fi incărcată în fereastra părinte;
 _top pagina va fi incărcată în fereastra top a cadrului;
 _self pagina va fi incărcată în aceeași fereastră(implicită).
<html><head> <title>Referinte</title></head>
<body>
<p>Detalii
<a href="http://edugal.ro" target="_blank" >CIC</a>
</body>
</html>
36
Atributul title
Acest atribut are un caracter general și poate fi atașat la majoritatea elementelor HTML. Sintaxa acestui
element este: title="valoare". Când mouse-ul este deasupra conținutului tag-ului <a> conținut </a> se
transformă într-o mână și va afișa valoarea atributului title, într-o sugestie de instrument (într-un cadru).
<html><head> <title>Referinte</title></head><body>
<p>Detalii
<a href="http://edugal.ro" title="Platforma" >CIC</a>
</body>
</html>
Atributul name
Acest atribut este utilizat pentru a defini o ancoră în interiorul unei pagini. Sintaxa acestui atribut este:
name="valoare".
1.7.2. Referințe către alte pagini Web

Dacă se dorește accesarea unei pagini de pe alt site, valoarea atributului href este o adresă URL absolută.
Amintim că o adresa URL absolută are sintaxa: protocol /nume-calculator/cale/fișier unde protocol
poate fi, de exemplu, http. Exemplu:
<html><head></head>
<body>
Pentru mai multe informatii despre <br>
invatamint vizitati site-ul Ministerul Educatiei
<a href="http://www.edu.md"> ME</a>
</body></html>
Același rezultat obținem dacă scriem și numele fișierului index(default) care se incarcă <a
href="http://www.edu.md/index.php"> ME </a>
Dacă se dorește să se viziteze altă pagină a respectivului site, se scrie numele fișierului .php(.html),
respectiv.
1.7.3. Referințe cu imagini

Așa cum am specificat mai sus, o legătură poate fi creată și cu ajutorul unei imagini. Ca și în cazul în care
conținutul unei legături este un text, și în cazul în care conținutul este o imagine, accesarea paginii se face
cu un clic, sau un ENTER pe imagine.
Exemplu:
<html><head> <title> Legaturi cu imagini </title> </head>
<body>
Platforma <a href="http://edugal.ro">
<img src= "http://edugal.ro/galerie/content/Exteriorul colegiului/IMG_1631.jpg">
</a>
</body></html>
Un link poate fi format și din text și din imagine adică:

<html><head> <title> Legaturi cu imagini </title> </head>
37
<body>
Platforma <a href="http://edugal.ro">CIC
<img src= "http://edugal.ro/galerie/content/Exteriorul colegiului/IMG_1631.jpg" width=70
height=70>
</a>
</body></html>
1.7.4. Referințe cu adrese URL relative

Adresele URL relative sunt acele adrese care fac referire la pagini de pe calculatorul propriu, indicând
cale/nume-fișier, fără a fi prefixate de protocol și nume calculator. În adresele relative putem folosi
caracterele ../ – pentru a urca un nivel în structura de directoare(către directorul părinte).
Se cunoaște faptul că un site poate să aibă paginile (fișierele) organizate într-o structură arborescentă de
directoare. Să presupunem că avem următoarea structura arborescentă :
Conform structurei arboriscente date din pagina pag6.html din mapa M5 se pot accesa celelalte pagini,
utilizând următoarele referințe:
1. ../../pag1.html
2. ../../M1/pag2.html
3. ../../M3/M6/pag7.html
4. ...
<html><head> <title> Referinte relative </title> </head>

<body>
Pagina7
<a href="../../M4/pag5.html"> Referinta catre pagina pag5.html </a>
</body>
</html>
<html><head> <title> Referinte relative </title> </head>

<body>
Pagina5
<a href="../M3/M6/pag7.html"> Referinta catre pagina pag7.html </a>
</body></html>
1.7.5. Referințe către informații non Web
38
Se pot face referințe și la adrese URL absolute de pe Internet, care nu sunt resurse Web. În adresele URL
absolute se inlocuiește protocolul http cu alte protocoale non Web (ftp, telnet, gopher etc.).
Exemplu:
<html><head></head>
<body>
<ul>
<li><a href="ftp://gatekepper.dec.com" >Vizitati locatia</a></li>
<li><a href="ftp://ftp.arsc.edu"> Educatie</a> </li>
<li><a href="telnet://well.com" > Whole Earth</a></li>
<li><a href="gopher://gopher.loc.gov"> GongresGopher</a></li>
</ul>
</body></html>
1.7.6.Referințe către fișiere non HTML

Se pot stabili legături către orice tip de fișiere, nu numai html, ca de exemplu .pdf, .txt, .gif, .rar, .zip, etc.
În aceste condiții se intâlnesc două situații:
I. Browser-ul nu poate lucra cu fișierul intâlnit și atunci incearcă să-l descarce, executând operația
download.
II. Browser-ul cunoaște tipul de fișier și acesta va fi deschis în fereastra sa.
Exemplu:
<html><head></head>
<body>
<a href="pag_2.pdf"> Fișier PDF</a> <br>
<a href="doc.txt">Fișier TXT </a> <br>
<a href="../files/tabel_culori.rar"> Fișier RAR </a> <br>
<a href="http://edugal.ro/galerie/content/Ext/IMG_1631.jpg">Fișier JPG </a>
</body></html>
1.7.7.Referințe interne în cadrul unei pagini

În această secțiune vom defini ancore (ținte) într-o pagină, adăugarea legăturilor către aceste ținte, precum
și legături către ținte din documente externe. Dacă documentele HTML sunt prea lungi și sunt greu de
parcurs, pentru a evita parcurgerea cu bara de defilare, se definesc ancore. Ancorele ne permit să ne
deplasăm rapid într-un loc din document. Ancora este un identificator al inceputului unui element dintr-o
pagină web. Dacă au fost definite ancore într-o pagină, se pot crea legături către respectivele ancore.
Ancorele se pot defini în două moduri:
 utilizând orice element HTML, inclusiv elementul <a> cu atributul id, de exemplu: <p
id="valoare_id"> sau <a id="valoare_id"> </a>
 utilizând tag-ul <a> cu atributul name, de exemplu: <a name="valoare_nume"> </a>
Pentru a crea o legătură la o ancoră se folosește tag-ul <a>...</a> cu atributul href, care are ca valoare o
referință de ancoră, precedată de simbolul “#”, astfel:
 # valoare_nume
 # valoare_id
Fișierul trebuie să fie suficient de mare, astfel оncât secvența care conține o ancoră să nu fie vizibilă în
momentul trimiterii către ea. Ca exemplu să considerăm agenda:
39
<html><head><title>Agenda grupei</title></head>
<body>
<h1 align="center"> Agenda grupei I-942<br />
<p>
<a href="#a-c"> [A-C] </a>
<a href="#d-h"> [D-H] </a>
<a href="#i-l"> [I-L] </a>
</h1>
<br />
<hr size="4" width="100%" align="center" color="#666666">
<br />
<pre>
<h1>
<p id="a-c"> [A-C] </p>
1.Bogdan Constantin
2.Budu Tudor
<p id="d-h"> [D-H] </p>
1.Daria Viorel
2.Ganea Radu
<p id="i-l"> [I-L] </p>
1.Lungu Inga
2. ...
</body></html>
1.7.8. Trimiterea automată a unui e-mail

Dacă dorim să trimitem un e-mail dintr-o pagină, se creează o legătură la o adresă e-mail. Legătura va
avea atributul href a cărui valoare este mailto (protocol pentru poștă), urmată de”:” și de o adresă de e-
mail validă, de exemplu:
<a href="mailto:cristinaenache15@yahoo.com"> Puteti să-mi scrieti </a>
Se poate folosi elementul <adress> de formatare logică, care are rolul de a evidenția o adresă (mesajul se
va scrie la început de linie), așa cum reiese din exemplu de mai jos. Sintaxa elementului <adress> este:
<adress> <a href="mailto: enache15@yahoo.com"> Puteti să-mi scrieti </a> </adress>
Când se execută clic pe o legătură e-mail, se va deschide o aplicație e-mail care are, în câmpul To, adresa
din legătură și care permite să introducem mesajul. Se poate trece și un subiect, care va fi despărțit de
adresă prin “?”, precum și un text în interiorul mesajului (de forma body=text) și care se va separa de
subiect prin caracterul “&”, ca în exemplul de mai jos:
<html><head></head>
<body>
<adress>
<a href="mailto:cristinaenache15@yahoo.com"> Puteți să-mi scrieti</a>
40
</adress>
</body></html>
Culorile referințelor
O referință poate fi în una din stările:
 activă
 vizitată
 nevizitată
În funcție de starea în care se află, o legătură are o anumită culoare și anume:

 Starea activă are culoarea implicită roșu (#FF0000). Culoarea se poate schimba cu atributul
alink=”culoare” al elementului <body>
 Starea vizitată are culoarea implicită purple (#800080). Culoarea se poate schimba cu atributul
vlink=”culoare” al elementului <body>
 Starea nevizitată are culoarea implicită albastru (#0000FF). Culoarea se poate schimba cu atributul
link=”culoare” al elementului < body>
<html><head></head>
<body alink="green" vlink="red" link="blue">
<ul>
<li><a href="http://edugal.ro">CIC</a>
<li><a href="http://cfbc.md">CFBC</a>
<li><a href="http://ccc.md">CCC</a>
</ul>
</body></html>
1.8. Hărți de imagini

Hartile de imagini sunt părți din aceeași imagine care este "împărțită" în mai multe zone, apoi în funcție de
zona pe care se execută click, browserul poate afișa o altă pagină. De exemplu, pe un site dedicat
turismului am putea avea pe pagina principală o imagine care reprezintă harta.
O harta de imagini ar putea fi folosită și pentru navigarea în cadrul unui site: dacă avem mai multe
butoane de navigare grupate, se poate folosi o imagine care reprezinta toate acele butoane - mai multe
imagini se încarcî mai incet decât o imagine cu dimensiunea egalî cu suma celorlalte deoarece
comunicarea cu serverul (cand se cere imaginea) se face o singura data.
Dezavantajul major este ca un vizitator care are browserul setat să nu încarce imagini pentru a naviga mai
repede nu va vedea imaginea și nu va întelege mai nimic.
Crearea hartii de imagini

Pentru formarea unei harti de imagini, se adauga în interiorul tag-ului "<img>" atributul usemap a carui
valoare reprezinta numele hartii, apoi se incepe formarea hartii prin elementul:
<map name="nume_harta"></map>
- unde pt. "nume_harta" a atributului "name" se folosește acelasi cuvant adaugat la "usemap"
- în cadrul acestuia se adauga elemente
<area atribute>
41
- acestea definesc zonele hartii imaginii și forma acestora (prin valorile atributelor),
- numărul de elemente "AREA" reprezinta numărul de suprafete (cu link-uri specifice) în care este
"impartita" imaginea.
În următorul exemplu puteți vedea forma generala a creari unei "harti de imagini" (cu 2 cadre), URL poate
fi orice adresa de site sau pagina a site-ului curent:
<img src="poza.jpg" usemap="#map1">

<map name="map1">
<area shape="rect" coords="9, 120, 56, 149" href="url">
<area shape="rect" coords="100, 200, 156, 249" href="url">
</map>
În tabelul de mai jos puteți vedea atributele care se folosesc și descrierea acestora:
Instructiune Atribute Descriere
- marcaj de includere a imaginilor
specifica faptul ca este o harta de imagine pe server
ismap (se folosește mai rar; de obicei folosim harti de
<img atribute > imagine la client)
usemap="nume_harta" specifica harta de imagine la client
imaginea de rezolutie scazuta care se incarca prima
lowscr = "url"
(doar pentru Netscape)
<map atribute - specifica regiunile unei harti de imagine la client

> numele hartii de imagine (corespunzator atributului
< / map > name = "nume_harta"
USEMAP al marcajului <IMG>)
- defineste o regiune a unei harti de imagine
forma regiunii: rect sau rectangle (dreptunghi),
shape = "forma" circle sau circ (cerc), point (punct), poly sau
polygon (poligon)
coordonatele unei regiuni (in pixeli); se calculeaza
în functie de coltul din stânga sus al imaginii (care
are coordonatele (0, 0), adica x = 0, y = 0); variaza
<area atribute > în functie de SHAPE = forma regiunii:
- pentru rect (dreptunghi) se dau coordonatele celor
4 colturi sau a celor din stg. sus și dr. jos ale
coords = "coordonate"
regiunii
- pentru circ (cerc) se dau coordonatele centrului
cercului și raza
- pentru point (punct) se dau coordonatele punctului
- pentru poly (poligon) se dau coordonatele
colturilor poligonului
42
URL - ul asociat regiunii specificate din cadrul
href = "=url=" imaginii; în cazul unui clic pe acea regiune se
incarca pagina specificata prin URL
textul asociat regiunii specificate din cadrul
imaginii; apare plasand mouse-ul deasupra regiunii
alt = "text"
respective sau celor cu browserul setat să nu incarce
imagini
1.9. Documentarea unei pagini Web

Meta-informațiile sunt informațiile despre „modul de organizare a informațiilor”. În cazul unei pagini
Web meta-informațiile vor furniza date despre modul în care a fost creată această pagină.
Meta-informațiile nu sunt vizibile într-o pagină Web. Ele sunt conținute în fișierul sursă „.html” și sunt
utilizate de serverele Web aflate în INTERNET, specializate în stocarea de „informații despre
informațiile” stocate pe diferite site-uri. Meta-informațiile sunt culese de către aplicațiile speciale ale
motoarelor de căutare numite spiders sau robots. Serverele specializate în stocarea și indexarea de meta-
informații oferă utilizatorilor motoare de căutare puternice care permit regăsirea informațiilor (a adreselor
la care aceste informații există).
Meta-informațiile adică informațiile despre informațiile conținute într-o pagină Web se introduc cu
ajutorul tag-ului <meta>plasat în interiorul blocului <head>…<head>. Acest tag se utilizează cel mai
frecvent impreună cu trei atribute:
 name;
 http-equiv;
 content.
Cele trei atribute se folosesc în perechi "name content" sau "http-equiv content".
Descrierea unei pagini Web

Pentru a face cunoscut motoarelor de căutare din Internet scopul pentru care a fost creată o pagină Web
poate fi inserat un element <meta> având atributele:
 name - setat la valoarea description;
 content - setat la un șir de caractere ce conține o descriere generală a paginii.
<html><head><title>Centrul de Excelență în Informatică </title>

<meta name="description" content="Site-ul de test">
</head>
<body>
………
<body>
</html>
Cuvintele cheie pentru o pagină Web

Cuvintele cheie oferă o altă metodă de descriere a informațiilor conținute de o pagină Web. Cuvintele
cheie trebuie alese cu atenție pentru ca informația indexată pe baza lor de către spiders, să poată fi regăsită
corect în bazele de date ale mooarelor de căutare.
Pentru a preciza cuvintele cheie ale paginii Web se utilizează atributele:
43
 name - setat la valoarea keywords;
 content - care va primi ca valoare lista cuvintelor cheie separate prin ",".
<meta name="keywords" content="Pagina de test, Galati ">
Drepturile de autor
Atributul name poate fi utilizat pentru a furniza informații legate de autorul paginii și despre Copyright
(drepturile de autor). Exemplul următor ilustrază aceste lucruri:
<meta name="author" content="web Cristina">
<meta name="copyright" content="edugal.ro">
Persoana de contact
Pentru a putea furniza informații despre persoana care administrează site-ul, se utilizează atributul http-
equiv. În acest caz valoarea atributului content va conține o adresă e-mail eventual urmată în paranteze
rotunde de un nume complet al persoanei.
Exemplu:
<meta http-equiv="from" content="web@edugal.ro (web Nadejda)">
<meta http-equiv="reply-to" content=="cristinaenache15@yahoo.com">
Setul de caractere utilizat

Setul de caractere se stabilește prin intermediul atributului charset. În mod implicit setul de caractere al
unei pagini Web este western. Opțional acest set de caractere poate fi stabilit prin următoarea exprimare:
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
Pentru a se putea utiliza diacriticele limbii române trebuie ales setul de caractere Sud-Est European:
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-2">
Reâncărcarea automată a unei pagini Web

O utilizare interesantă a atributului http-equiv este aceea de a seta reincărcarea automată în fereastra
browser-ului a aceleiași pagini (de exemplul pagina cu evoluția cursurilor la o bursă) sau a unei pagini noi.
În acest fel se obțin facilități dinamice pentru un Website. Pentru a reincărca aceeași pagină la un interval
precizat de secunde se utilizează atributul http-equiv setat la valoarea refresh iar atributul content setat la
valoarea numărului de secunde după care se dorește ca pagina să fie reactualizată.
Exemplul 1. Aceeași pagină va fi reîncarcată după 5 secunde:

<meta http-equiv="refresh" content="5">
Exemplul 2. O altă pagină (cuprins.html) va fi reîncarcată după 9 secunde:
<meta http-equiv="refresh" content="9; url='cuprins.html'">
Limba utilizată în pagină

Informaţia legată de limba utilizată în pagina web este furnizată de atributul http-equiv configurat la
valoarea keywordsîmpreună cu atributul lang
Exemplul 1. Pagina va furniza informația că limba utilizată este Engleza:
<meta name="keywords" lang="en-us" content="universitaty, galati, professor, education">
Exemplul 2. Pagina va furniza informația că limba utilizată este Româna:
<meta name="keywords" lang="ro" content="universitate, Chișinău, prestigiu, Romania, profesor,
student">
44
Comentariile
Comentariile sunt blocuri de text utile care prezintă informații de proiectare utile despre modul în care a
fost scris un fișier sursă „.html”. Comentariile sunt ignorate de către browser la incarcarea paginii. Pentru
a insera un bloc de comentarii se utilizează sintaxa:

Blocul de comentarii poate fi plasat oriunde este necesar în cadrul documentului „.html” și se poate
extinde pe mai multe rânduri;
1.10. Formulare
Un formular este un ansamblu de zone active alcătuit din butoane ,casete de selecție,câmpuri de editare
etc. Formularele va asigura construirea unori pagini Web care permit utilizatorilor să introducă efectiv
informații și să le transmită serverului. Formularele pot varia de la o simplă casetă de text, pentru
introducerea unui șir de caractere pe post de cheie de cautare - element caracteristic tuturor motoarelor de
căutare din Web - până la o structură complexă ,cu multiple secțiuni, care oferă facilități puternice de
transmisie a datelor. O sesiune cu o pagină web ce conține un formular cuprinde următoarele etape:
- Utilizatorul completează formularul și il expediează unui server;
- O aplicație dedicată de pe server analizează formularul completat și (dacă este necesar) stochează datele
într-o bază de date;
- Dacă este necesar serverul expediează un raspuns utilizatorului.
Un formular este definit într-un bloc delimitat de etichetele corespondente <form>şi </form>.
Există două atribute esențiale ale elementului <form>:

1. Atributul action precizează ce se va intampla cu datele formularului odată ce acestea ajung la destinație.
De regulă ,valoarea atributului action este adresa URL a unui script aflat pe un srver WWW care primește
datele formularului, efectuează o prelucrare a lor și expediează către utilizator un răspuns.
<form action="http://www.yahoo.com/cgi-bin/nume_fis.cgi">
Script-urile pot fi scrise în limbajele Perl, C, PHP, Unix shell.

2. Atributul method precizează metoda utilizată de browser pentru expedierea datelor formularului. Sunt
posibile următoarele valori:
 get (valoarea implicită). În acest caz, datele din formular sunt adăugate la adresa URL precizată de
atributul action;
- nu sunt permise cantități mari de date (maxim 1 Kb);
- între adresa URL și date este inserat un "?".
Datele sunt adăugate conform sintaxei: nume_camp = valoare_camp. Între diferite seturi de date este
introdus un "&".
Exemplu: "http://www.yahoo.com/cgi-bin/nume_fis.cgi?nume1 = valoare1&nume2 = valoare2";
 post în acest caz datele sunt expediate separat. Sunt permise cantități mari de date (ordinul MB). Pentru
ca un formular să fie funcțional, trebuie precizat ce se va intâmpla cu el după completarea și expediere.
Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin poșta electronică (e-
mail). Pentru aceasta se folosește un atribut al etichetei <form>: și anume action care primește ca
valoare " mailto: " concatenat cu o adresă validă de e-mail către care se va expedia formularul
completat.
45
Un formular cu un câmp de editare și un buton de expediere
Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. Pentru a preciza tipul
elementului se folosește atributul type al etichetei <input>. Pentru un câmp de editare, acest atribut
primeste valoarea "text". Alte atribute pentru un element <input> sunt:
 name - permite atașarea unui nume fiecărui element al formularului;
 value - care permite atribuirea unei valori inițiale unui element al formularului.
Un buton de expediere al unui formular se introduce cu ajutorul etichetei <input>, în care atributul type
este configurat la valoarea "submit".Acest element poate primi un nume prin atributul name. Pe buton
apare scris "Submit Query" sau valoarea atributului value, dacă această valoare a fost stabilită.
<html><head><title>Form_ex1</title></head>
<body>
<h1>Un formular cu un camp de editare și un buton de expediere</h1>
<hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Numele:<input type="text" name="numele" value="Numele și prenumele"><br />
<input type="submit" value="Expedieaza">
</form>
</body></html>
Pentru elementul <input> de tipul câmp de editare (type = "text") , alte doua atribute pot fi utile:
 size - specifică lățimea câmpului de editare ce depășește această lățâme ,atunci se execută automat o
derulare acestui câmp;
 maxlength - specifică numărul maxim de caractere pe care le poate primi un câmp de editare,
caracterele tastate peste numărul maxim sunt ignorate.
Observații:
Dacă atributul type lipsește într-un element <input>, atunci câmpul respectiv este considerat în mod
prestabilit ca fiind de tip "text";
Formularele cu un singur câmp (de tip text) nu au nevoie de un buton de expediere, datele sunt
expediate automat dupa completarea și apăsarea tastei ENTER.
Butonul Reset
Dacă un element de tip <input> are atributul type configurat la valoarea "reset", atunci în formular se
introduce un buton pe care scrie "Reset". La apăsarea acestui buton, toate elementele din formular primesc
valorile prestabilite (definită odata cu formularul ), chiar dacă aceste valori au fost modificate de
utilizator. Un buton Reset poate primi un nume cu ajutorul atributului name și o valoare prîntr-un atribut
value. Un asemenea buton afișează textul "Reset" dacă atributul value lipsește, respectiv valoarea acestui
atribut în caz contar.
<body>
46
<h1>Un formular cu un buton reset</h1><br />
<hr> <br />
<form action="mailto:xxxxx@xxx.com" method="post"> <br />
Introduceti numele:<input type="text" name="nume" value="Numele"><br /> <br />
Introduceti prenumele:<input type="text" name="prenume" value="Prenumele"><br /><br />
<input type="reset" value="Sterge"> <input type="submit" value="Expedieaza"> <br />
</form>
</body></html>
Câmp de editare de tip "password"

Dacă se utilizează eticheta <input> având atributul type configurat la valoarea "password" , atunci în
formular se introduce un element asemănător cu un câmp de editare obișnuit introdus prin type="text".
Toate atributele unui câmp de editare rămân valabile. Singura deosebire constă în faptul că acest câmp de
editare nu afișează caracterele clar, ci numai caractere *, care ascund de privirile altui utilizator aflat în
apropiere valoarea introdusă într-un asemenea câmp. La expedierea formularului insă, valoarea tastată
într-un câmp de tip "password" se transmite clar.
<body>
<h1>Un formular cu un buton reset</h1>
<hr> <br />
Nume:<input type="text" name="nume" value="Numele"><br>
Prenume:<input type="text" name="prenume" value="Prenumele"><br>
Password:<input type="password" name="parola" ><br>
<input type="reset" value="Sterge"> <input type="submit" value="Expedieaza">
</form></body></html>
Butoane radio
Butoanele radio permit alegerea, la un moment dat, a unei singure variante din mai multe posibile.
Butoanele radio se introduc prin eticheta <input> cu atributul type având valoarea "radio".
<body>
<h1>Un formular cu butoane radio</h1>
<hr>
<p>
Alegeti sexul:<br>
Barbatesc: <input type="radio" name="sex" value="b"> <br />
Femeiesc: <input type="radio" name="sex" value="f"> <br />
<input type="reset"> <input type="submit">
</p>
La expedierea formularului se va transmite una dintre perechile "sex=b" sau "sex=f", în funcție de
alegerea făcută de utilizator.
47
Casete de validare
O casetă de validare (checkbox) permite selectarea sau deselctarea unei opțiuni. Pentru inserarea unei
casete de validare se utilizează eticheta <input> cu atributul type configurat la valoarea "checkbox".
Observații:
Fiecare casetă poate avea un nume definit prin atributul name.
Fiecare casetă poate avea valoarea prestabilită selectat definită prin atributul checked.
<body>
<h1>Un formular cu casete checkbox</h1>
<hr>
Alegeti meniul:<br />
<input type="checkbox" name="pizza" value="o portie"> Pizza<br />
<input type="checkbox" name="nectar" value="un pahar"> Nectar<br />
<input type="checkbox" name="bere" value="o sticla"> Bere<br />
<input type="checkbox" name="cafea" value="o ceasca"> Cafea<br />
Casete de fișiere
Într-o pereche "name = value" a unui formular se poate folosi intregul conținut al unui fișier pe post de
valoare. Pentru aceasta se inserează un element <input> într-un formular, cu atributul type având
valoarea "file"(fișier).
Atributele pentru un element de tip casetă de fișiere:
 name - permite atașarea unui nume;
 value - primește ca valoare adresa URL a fișierului care va fi expediat o dată cu formularul. Această
valoare poate fi atribuită direct atributului value, sau poate fi selectată prin intermediul unei casete de
tip File Upload sau Choose File care apare la apăsarea butonului Browse... din formular;
 enctype - precizează metoda utilizată la criptarea fișierului de expediat.Valoarea acestui atribut este
"multipart/form-data".
<html><head><title>Form_ex6</title></head><body>
<h1>Un formular cu caseta de fișiere</h1>
<hr>
Alegeti fișierul:<input type="file" name="fișier" enctype="multipart/form-data"><br />
</form>
</body></html>
48
Liste de selecție
O listă de selecție permite utilizatorului să aleagă unul sau mai multe elemente dintr-o listă finită. Lista de
selecție este inclusă în formular cu ajutorul etichetelor corespondente <select>și </select>.
O listă de selecție poate avea următoarele atribute:
 name - atașează listei un nume (utilizat în perechile "name=value" expediat serverului);
 size - care precizează(prîntr-un număr intreg pozitiv, valoarea prestabilită fiind 1) câte elemente din
listă sunt vizibile la un moment dat pe ecran(celelalte devenind vizibile prin acționarea barei de
derulare atașate automat listei).
Elementele unei liste de selecție sunt incluse în lista cu ajutorul etichetei <option>. Două atribute ale
etichetei <option> se dovedesc utile:
 value - primește ca valore un text care va fi expediat server-ului în perechea "name=value", dacă
acest atribut lipsește, atunci către server va fi expediat textul ce urmează după <option>;
 selected(fara alte valori) - permite selectarea prestabilită a unui element al listei.
<h1>Un formular cu o lista de selectie</h1>
<hr>
Universitatea absolvita:<br><br>
<select name="universitate" size="3">
<option value="UDJ">Universitatea Dunarea de Jos
<option value="UD" selected>Universitatea Danubius
<option value="UB">Universitatea Bucuresti
</select>
<br><br>
</form>
</body></html>
Listă de selecție cu selecții multiple

O listă de selecție ce permite selecții multiple se creează intocmai ca o listă de selecție obisnuită. În plus,
eticheta <select> are un atribut multiple(fară alte valori). Când formularul este expediat către server
pentru fiecare element selectat al listei care este se inserează către o pereche "name=value" unde name
este numele listei.
<h1>Un formular cu o lista de selectie ce accepta selectii multiple</h1>
<hr>
Limbi straine cunoscute:<br><br>
<select name="limbi straine" size="5" multiple >
<option value="e"> Engleza
<option value="f" selected>Franceza
<option value="s">Spaniola
<option value="i">Italiana
</select><br><br>
49
</form>
</body></html>
Câmpuri de editare multilinie

într-un formular câmpuri de editare multilinie pot fi incluse cu ajutorul etichetei <textarea>. Eticheta are
următoarele atribute:
 cols - specifică numărul de caractere afișate într-o linie;
 rows - specifică numărul de linii afișate simultan;
 name - permite atașarea unui nume câmpului de editare multilinie;
 wrap - determină comportamentul câmpului de editare față de sfârșitul de linie. Acest atribut poate
primi urmatoarele valori:
 "off" - intreruperea cuvintelor se produce la marginea dreaptă a editorului, când dorește
utilizatorul. Caracterul de sfârșit de linie este inclus în textul transmis serverului o data cu
formularul;
 "hard" - intreruperea cuvintelor se produce la marginea dreaptă a editorului. Caracterul de
sfârșit de linie este inclus în textul transmis serverului o dată cu formularul;
 "soft" - intreruperea cuvintelor se produce la marginea dreaptă a editorului. Nu se include
caracterul de sfârșit de linie în textul transmis serverului o dată cu formularul.
<h1>Un formular cu un camp de editare multilinie</h1>
<hr>
<textarea name="text multilinie" cols="30" rows="5" wrap="off">
Prima linie din textul initial.
A doua linie din textul initial.
</textarea><br /><br />
Un formular complex
În exemplul următor este prezentat un formular conținând elemente prezentate anterior. Câmpurile
formularului sunt incluse în celulele unui tabel pentru a obține o aliniere dorită.
<h1>Un formular complex</h1>
<hr>
<center>
<table bgcolor="orange"> <form action="mailto:xxxxx@xxx.com" method="post">
<caption align="top">MENIU</caption>
<tr align="left"><th>Numele: <td><input type="text" name="numele">
<tr align="left"><th>Preumele: <td><input type="text" name="prenumele">
<tr align="left"><th>Telefonul: <td><input type="text" name="telefonul">
<tr align="left"><th>Alegeti pizza:
<td>
50
<input type="checkbox" name="ciuperci">cu ciuperci
<input type="checkbox" name="mexicana">mexicana
<input type="checkbox" name="europeana">europeana
<tr align="left"><th>Alegeti plata:
<td bgcolor="lightblue">
<ul>
<li><input type="radio" name="plata">cash
<li><input type="radio" name="plata">card
</ul>
<tr align="left"><th>Comentarii:
<td>
<textarea name="comentarii" cols="30" rows="5" wrap="off">
Inserati aici aprecierile dumneavoastra legate de calitatea serviciilor noastre
</textarea>
<tr align="left" valign="top">
<td>
<input type="reset" value="Sterge"><td><input type="submit" value="Expedieaza">
</form>
Butoane
Într-un formular pot fi afișate butoane. Când utilizatorul apasă un buton, se lansează în execuție o funcție
de tratare a acestui eveniment. Limbajul HTML nu permite scrierea unor astfel de funcții (acest lucru este
posibil dacă se utilizează limbajele Javascript sau Java).
Pentru a insera un buton într-un formular, se utilizează eticheta <input> având atributul type configurat la
valoarea "button". Alte două atribute ale elementului <input> sunt:
 name - permite atașarea unui nume butonului;
 value -primește ca valoare textul ce va fi afișat pe buton.
Un buton pentru lansarea în execuție a unei acțiuni poate fi introdus într-un formular prin elementul
<input> având atributul typeconfigurat la valoarea "button", așa cum s-a văzut mai înainte. Există o a
doua modalitate de a introduce într-o pagina Web un buton, și anume prin intermediul blocului
<button>...</button>. Un astfel de buton poate fi inserat într-un formular, în acest caz declanșând
acțiuni legate de acel formular, sau poate fi introdus oriunde în pagină pentru inițierea unor acțiuni
independente de formulare. Atributele posibile ale elementului "button" sunt:
 name - acordă elementului un nume;
 value - precizează textul care va fi afișat pe buton;
 type - precizează acțiunea ce se va executa la apăsarea butonului dacă acesta este inclus într-un
formular. Valorile posibile pentru acest atribut sunt: "button/submit/reset".
În corpul blocului <button>...</button> se poate afla un text sau un marcaj de inserare a unei
imagini.
Observații:
Elementul <form> poate avea un atribut target, care primește ca valoare numele unei ferestre a
browserului în care va fi incărcat răspunsul trimis serverului WWW la expedierea unui formular.
51
Toate elementele cuprinse într-un formular pot avea un atribut disabled care permite dezactivarea
respectivului element.
Toate elementele de tip text cuprinse într-un formular pot avea un atribut readonly care interzice
modificarea conținutului acestor elemente.
1.11. Cadre interne

Un cadru intern este specificat prin intermediul blocului <iframe>...</iframe>. Un cadru intern se
inserează într-o pagina Web în mod asemănător cu o imagine sau în modul în care se specifică marcajul
<frame>, așa cum rezultă din următorul exemplu:
<iframe src="pagina1.html" height=40% width=50%> </iframe>
În acest caz, am specificat că doresc o fereastră de cadru intern care are 40% din inălțimea și 50% din
lățimea paginii curente.
Atributele acceptate de eticheta <iframe> sunt în parte preluate de la etichetele <frame>şi <frameset>,
cum ar fi: src, frameborder, marginheight, marginwidth, scrolling, name, noresize; sau de la eticheta
<img>: vspace, hspace, align, width, height.
<html><head><title>Fer_ex1</title></head>
<body>
<a href="p1.html" target="icad">Pagina1</a><br />
<a href="p.html" target="icad">Home</a><br>
<center>
<iframe width="60%" height="50%" frameborder="1" name="icad" src="p.html"> Dacă vedeti acest text
inseamna ca browserul dumnevoastra nu suporta cadre interne.
<a href="p0.html">Pagina fara cadre interne</a>
</iframe>
</center>
</body></html>
Ținte pentru legături

În mod prestabilit, la efectuarea unui clic pe o legatură nouă, pagina către care indică legătura o
inlocuiește pe cea curentă, în aceeași fereastră(cadru). Acest comportament se poate schimba în două
moduri:
 prin plasarea în blocul <head>...</head> a unui element <base> care precizează, prin atributul target
numele ferestrei(cadrului) în care se vor incărca toate paginile noi referite de legaturile din pagina
curentă conform sintaxei:
<base target="nume_ferastra/frame_de_baza">
52
 prin plasarea în eticheta <a> a atributului target, care precizează numele ferestrei (cadrului) în care se
va incărca pagina nouă referită de legătură, conform sintaxei: <a href="legatura"
target="nume_fereastra/frame">...</a>
Valori pentru atributul target

Atributul target al etichetei <frame> acceptă anumite valori predefinite de o valoare deosebită pentru
creatorii de pagini Web. Aceste valori sunt:
 _self - încărcarea noii pagini are loc în cadrul curent;
 _blank - încărcarea noii pagini are loc într-o fereastră nouă anonimă;
 _parent - încărcarea noii pagini are loc în cadrul părinte al cadrului curent dacă acesta există, altfel are
loc în fereastra browser-ului curent;
 _top - încărcarea noii pagini are loc în fereastra browser-ului ce conține cadrul curent;
2. CSS
2.1. Introducere în CSS
În cursul de HTML, am vorbit despre cum să structurăm și să dăm sens informațiilor conținutului
paginilor web. În acest curs ne vom ocupa de stilizare, de modul și locul în care sunt redate elementele
HTML în pagină. CSS (Cascading Style Sheets) sau foi de stil în cascadă, reprezintă un mecanism simplu
de a adăuga elemente de stil (tipuri de caractere, culori, aliniere, spațiere etc.) unui document web. Tag-
urile HTML au avut inițial rolul de defini conținutul unui document, de a face distincția între titlul unui
paragraf (definit prin tag-urile <Hn>), conținutul paragrafului (definit prin tag-ul <p>), tabele (definite
prin tag-ul <table>) etc. Aspectul și modul de afișare al unui site cădeau în sarcina browserului, fără a fi
folosite niciun fel de tag-uri de formatare. Dar cum cele două principale browsere – Internet Explorer și
Netscape Navigator – au continuat să adauge noi tag-uri și atribute limbajului HTML original, a devenit
tot mai dificil să creezi un site în care conținutul documentului HTML să fie clar separat de modul său de
prezentare. Pentru a rezolva această problemă, consorțiul W3C, responsabil de standardizarea
specificațiilor HTML, a creat stilurile și le-a adăugat specificațiilor HTML 4.0.
2.2. Sintaxa construcției CSS

O construcție CSS are două părți: un selector, și una sau mai multe declarații:
unde:
 selector - această componentă, identifică elementul HTML, căreia i se aplică stilul dat;
 acoladele - delimitează, care proprietăți și cu ce valori se aplică elementului HTML;
 proprietăți - sunt elementele de aspect care vrem să le modificăm;
 valori ale proprietăților - sunt noile valori pe care vrem să le atribuim proprietății respective.
Fiecare proprietate suportă, anumite tipuri de valori, de exemplu culoarea poate fi dată în trei moduri:
 hexazecimal - #ffaa99;
 prin denumire - red;
 cu valori rgb - rgb(123,255,17).
53
Observație: Declarațiile CSS se încheie întotdeauna cu ";".
Exemplu:
p {color:red; text-align:center;}
Pentru a face declarațiile CSS mai ușor de citit, puteți scrie fiecare declarație pe câte o linie ca în exemplul
următor:
p{
color:red;
text-align:center;
}
Documentul HTML care conține declarațiile CSS de mai sus va arăta astfel:
<html><head>
<style type="text/css">
p{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Buna ziua!</p>
<p>Acest paragraf este stilizat cu CSS.</p>
</body>
</html>
2.3. Comentarii CSS

Comentariile se folosesc pentru a explica codul și pot fi utile când modificați codul sursă pe parcurs.
Comentariile sunt ignorate de către browsere. Un comentariu CSS începe cu "/*", și se termină cu "*/", ca
în exemplul următor:
Exemplu:
/*Acesta este un comentariu și nu se va afișa */
p{
text-align:center;
/*Acesta este un alt comentariu*/
color:blue;
font-family:arial; }
54
2.4. Foi de stil
O foaie de stil poate fi inserată în trei moduri:
 Foaie externă de stil;
 Foaie internă de stil;
 Stil inline.
2.4.1. Foaie externă de stil

O foaie de stil externă este ideală atunci când stilul respectiv se aplică mai multor pagini. Cu o foaie CSS
externă, puteți modifica aspectul întregului site modificând un singur fișier.
Fiecare pagină trebuie să se lege la foaia de stil folosind tagul <link> în interiorul secțiunii head:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
...
</body>
</html>
unde:
 atributul rel specifică relația dintre documentul apelant și documentul legat. Are numeroase valori
posibile, dar în cazul de față valoarea să trebuie să fie stylesheet;
 atributul type specifică tipul documentului legat, adică definește ce fel de resursă este (extensia
fișierului nu este suficientă pentru a determina această) - în cazul nostru trebuie să aibă valoarea
text/css;
55
 atributul href cum am văzut și la elementul link, specifică adresa (URL) de unde se introduce fișierul
foaie de stil.
Sau
<html><head>
<style type="text/css" media="all">
@import url(style.css);
</style>
</head>
<body>
...
</body></html>
O foaie externă de stil poate fi scrisă în Notepad++, nu trebuie să conțină taguri html și trebuie salvată cu
extensia .css. Un exemplu de foaie de stil externă, memorată în fișierul style.css, este prezentată mai jos:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("roses.gif");}
Observație: Nu lăsați spații între valoarea proprietății și unitatea de măsură! Dacă scrieți "margin-
left:20 px" (în loc de "margin-left:20px") va merge în browser-ul IE, dar nu în Firefox sau Opera.
2.4.2. Foaie internă de stil

O foaie internă de stil trebuie folosită când un singur document are un anumit stil. Foaia internă de stil se
definește în secțiunea head a paginii HTML folosind tagul <style>, ca în exemplul următor:
<head>
hr {color:#424242;}
p {margin-left:20px;}
body {background-image:url("roses.gif");}
</style>
</head>
2.4.3. Stiluri inline

Un stil inline pierde multe din avantajele foilor de stiluri amestecând conținutul cu prezentarea. Utilizați
această metodă cât mai rar. Pentru a utiliza un stil inline, folosiți atributul style în tagul respectiv.
Atributul style poate conține orice proprietăți CSS. Exemplul următor ilustrează cum se poate schimba
culoarea și marginea stângă a unui paragraf:
<p style="color:#424242; margin-left:20px">Acesta este un paragraf.</p>
56
2.4.4. Foi multiple de stiluri
Dacă anumite proprietăți ale unui selector au fost setate în foi de stiluri diferite, valorile vor fi moștenite
din cea mai specifică foaie de stil. Spre exemplu,într-o foaie de stil externă, selectorul h3 are setate
următoarele trei proprietăți:
h3 {
color:red;
text-align:left;
font-size:8pt;
}
Și foaia de stil intern setează pentru h3 următoarele proprietăți:

h3 {
text-align:right;
font-size:20pt;
}
Dacă pagina care conține această foaie internă de stil se leagă și la foaia de stil externă, atunci proprietățile
pentru h3 vor fi:
 color:red;
 text-align:right;
 font-size:20pt;
Culoarea este moștenită din foaia externă, iar alinierea și dimensiunea fontului sunt înlocuite cu valorile
din foaia internă de stil.
Stilurile pot fi specificate:
 într-un element HTML;
 în secțiunea head a unei pagini HTML;
 -într-un fișier extern CSS.
Observație: Într-un document HTML pot fi referite mai multe foi de stiluri externe.
Ordinea de aplicare
Ce stil va fi utilizat când într-un document HTML sunt specificate mai multe foi de stil pentru un element
HTML? La modul general, putem spune că stilurile se vor mixa într-o foaie de stil virtuală după
următoarele reguli, unde prioritatea crește odată cu numărul de ordine:
 setările implicite ale browserului;
 foi de stiluri externe (din fișiere CSS);
 foi de stiluri interne (din secțiunea head);
 stiluri inline (din tagul elementului HTML).
57
Deci, stilul inline al unui element suprascrie stilul definit în <head>, într-un fișier extern sau în browser.
Observație: Dacă legătura către o foaie externă de stil este amplasată în secțiunea <head> după foaia
internă de stiluri, atunci fișierul extern va suprascrie stilul intern!
2.5. Selectorii CSS

CSS-ul are mai multe tipuri de selectori. Selectorii cei mai des folosiți, prin urmare și cei mai importanți
sunt:
 - selector element
 - selector id
 - selector class
2.5.1. Selectorul element

Acest selector aplică proprietățile conținute, tuturor elementelor de acest tip.
h5 {
color:blue;
}
Toate elementele h5 din pagina vor avea culoarea albastra.

<html><head>
h5 {
color:blue;
}
</style>
</head>
<body>
<h4>Titlu de marimea 4</h4>
<h5>Alt titlu de marimea 5</h5>
</body></html>
58
2.5.2. Selectorul id
Selectorul id este utilizat pentru a specifica stilul unui singur element . Selectorul id folosește atributul id
al unui element HTML, și este definit cu "#".
Exemplu: Stilul următor va fi aplicat elementului care are atributul id="par1".

<html><head>
#par1 {
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="par1">Buna ziua!</p>
<p>Acest paragraf nu este afectat de declaratia de stil.</p>
</body></html>
Observație: Nu începeți numele id cu un număr deoarece nu va lucra în Mozilla Firefox.
2.5.3. Selectorul class

Acest selector este utilizat pentru a specifica stilul unui grup de elemente. Astfel, puteți seta un stil
particular pentru toate elementele HTML care face parte din aceeași clasă. Selectorul class folosește
atributul HTML class și este definit cu ".". În exemplul următor, toate elementele HTML cu atributul
class="center" vor fi aliniate la centru:
<html><head>
.center {
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Acest titlu este aliniat la centru cu CSS</h1>
<p class="center">Acest paragraf este de asemenea aliniat la centru cu CSS.</p>
</body></html>
Puteți de asemenea specifica ce elemente din clasă vor fi afectate de stil. În exemplul următor, numai
elementele p din clasa center vor fi aliniate la centru:
<html><head>
p.center {
text-align:center;
59
}
</style>
</head>
<body>
<h1 class="center">Acest titlu nu este afectat de stilul CSS</h1>
<p class="center">Acest paragraf este aliniat la centru cu CSS.</p>
</body></html>
Observație: Nu începeți un nume de clasă cu un număr deoarece numai Internet Explorer acceptă acest
lucru.
2.6. Formatarea background-ului

Proprietățile utilizate în CSS pentru a defini fundalul unui element sunt:
 background-color;
 background-image;
 background-repeat;
 background-attachment;
 background-position.
Proprietatea background-color
Proprietatea specifică culoarea de fundal a unui element. Culoarea de fundal pentru întreaga pagină este
definită în selectorul body ca în exemplul următor:
<html><head>
body {
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>Pagina stilizata cu CSS!</h1>
<p>Buna ziua! Acesta este un exemplu de utilizare a stilurilor.</p>
</body></html>
Culoarea de fundal poate fi specificată prin:

 nume - un nume de culoare, de exemplu "red";
 RGB - o valoare RGB, de exemplu "rgb(255,0,0)";
 Hex - o valoare hexazecimală, de exemplu "#ff0000".
În exemplul următor, elementele h1, p, și div au diferite culori de fundal:

<html><head>
h1 {
background-color:#6495ed;
60
}
p{
background-color:#e0ffff;
}
div {
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>Exemplu pentru proprietatea CSS background-color!</h1>
<div>
Acesta este un text în interiorul unui element div.
<p>Acest paragraf are propria culoare de fundal, desi este în interiorul elementului div.</p>
Acest text face parte tot din elementul div.
</div>
</body></html>
Proprietatea background-image
Această proprietate definește imaginea folosită ca fundal pentru un element. Implicit, imaginea se repetă
pe suprafața întregului element. Imaginea de fundal a paginii poate fi setată ca în exemplul următor:
<html><head>
body {background-image:url("paper.gif");}
</style>
</head>
<body>
<h1>Buna ziua!</h1>
</body></html>
Observație: Construcția url(...) precizează locul în care este stocată imaginea. Dacă provine de pe net,
precizați adresa completă ca în exemplul următor:
url(“http://www.image.com/image.gif”).
Imaginea de fundal trebuie aleasă astfel încât textul să poată fi citit cu ușurință.
Proprietatea background-repeat
Prin definiție, proprietatea background-image repetă o imagine și vertical și orizontal. Unele imagini
trebuie repetate numai vertical sau numai orizontal. Dacă doriți ca imaginea să se repete numai pe
orizontală, folosiți valoarea repeat-x, iar pentru verticală folosiți repeat-y.
Exemplu:
<html><head>
body {
background-image:url("gradient2.png");
61
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Buna ziua!</h1>
</body></html>
Proprietatea background-position și no-repeat

Când folosiți o imagine de fundal aveți grijă să nu îngreunați citirea textului. Dacă doriți ca imaginea să
fie afișată o singură dată (să nu se repete), folosiți valoarea no-repeat ca în exemplul următor:
<html><head>
body {
background-image:url("tree.jpg");
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1>Buna ziua!</h1>
<p>Exemplu de imagine de fundal.</p>
<p>Imaginea este afisata o singura data,dar incomodeaza cititorul!</p>
</body></html>
Pentru a schimba poziția imaginii de fundal, folosiți proprietatea background-position ca în exemplul

următor:
<html><head>
body {
background-image:url("tree.jpg");
background-position:top right;
margin-right:200px;
}
</style>
</head><body>
<h1>Buna ziua!</h1>
<p>Exemplu de imagine de fundal.</p>
<p>Imaginea este afisata o singura data și pozitionata în afara textului.</p>
<p>În acest exemplu,marginea dreapta a textului a fost setata la 200 pixeli. În acest fel, textul nu se va
suprapune cu imaginea.</p>
</body></html>
62
Proprietăți multiple pentru background
Pentru a scurta codul, puteți preciza toate proprietățile într-o proprietate numită scurt background ca în
exemplul următor:
<html><head>
body {
background:#ffff00 url("tree.jpg") no-repeat top right;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Buna ziua!</h1>
<p>Imaginea este afisata o singura data și pozitionata în afara textului.</p>
<p>În acest exemplu,marginea dreapta a textului a fost setata la 200 pixeli. În acest fel, textul nu
se va suprapune cu imaginea.</p>
</body></html>
Când folosiți proprietatea scurtă, ordinea valorilor proprietăților este:

 - background-color
 - background-image
 - background-repeat
 - background-attachment
 - background-position
Nu contează dacă valoarea unei proprietăți lipsește, atât timp cât valorile prezente sunt scrise în această
ordine.
Exemplu: Stabilirea unei imagini fixe de fundal. Imaginea nu se va deplasa odată cu restul paginii.
<html><head>
body {
background-image:url("smiley.gif");
background-attachment:fixed;
}
</style>
</head>
<body>
<p>Imaginea de fundal este fixa. Incercati să micsorati fereastra și să derulati până la sfarsitul
paginii.</p>
</body></html>
Toate proprietățile fundalului în CSS

63
Proprietate Descriere Valori
background-color
Setează toate proprietățile background background-image
background într-o singură background-repeat
declarație background-attachment
background-position
Stabilește dacă imaginea de fundal este
background- scroll
fixă sau
attachment fixed
defilează împreună cu restul paginii
color-rgb
color-hex
background-color Setează culoarea de fundal a unui element
color-name
transparent
Setează imaginea de fundal a unui url(URL)
background-image
element none
top left
top center
top right
center left
center center
Setează poziția de început a unei imagini
background-position center right
de fundal
bottom left
bottom center
bottom right
x% y%
xpos ypos
repeat
Stabilește dacă și cum va fi repetată repeat-x
background-repeat
imaginea de fundal repeat-y
no-repeat
2.7. Formatarea textului

Culoarea textului
Culoarea textului este stabilită cu proprietatea color. Culoarea poate fi specificată prin:
 nume - un nume de culoare, de exemplu "red";
 RGB - o valoare RGB, de exemplu "rgb(255,0,0)";
 Hex - o valoare hexazecimală, de exemplu "#ff0000".
Culoarea implicită pentru întreaga pagină este definită în selectorul body.

Exemplu:
<html><head>
64
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>Acesta este un titlu 1</h1>
<p>Acesta este un paragraf obisnuit și are culoarea rosie. Culoarea implicita a textului paginii este
definita în selectorul body.</p>
<p class="ex">Acesta este un paragraf din clasa "ex" și are culoarea albastra.</p>
</body></html>
Observație: Conform cerințelor W3C, dacă ați definit proprietatea color în body, trebuie să definiți și
proprietatea background-color.
Alinierea textului
Proprietatea text-align este utilizată pentru a seta alinierea orizontală a textului. Textul poate fi aliniat la
dreapta, la stânga, centrat sau justified.
Exemplu:
<html><head>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>
<body>
<h1>Exemplu de aliniere a textului cu CSS</h1>
<p class="date">Ianuarie, 2010</p>
<p class="main">” Dacă asi sti ca efortul pentru scrierea unui roman ma poate costa viata, mi-asi
lua toate masurile de siguranta pentru a inlatura o eventualitate cum ar fi boala din care sa mi se
traga moartea.Dar unica masura hotaratoare, aceea de a renunta la scris, nu asi lua-o.”
<br />Marin Preda</p><p><b>Observație:</b>
Modificați dimensiunea ferestrei browser-ului pentru a vedea cum arată alinierea justified.</p>
</body></html>
Decorarea textului
Proprietatea text-decoration este utilizată pentru a stabili decorarea unui text. Cel mai des este utilizată
pentru a înlătura sublinierea link-urilor din motive de aspect, ca în exemplul următor:
<html><head><style type="text/css">
a {text-decoration:none;}
</style>
</head>
<body>
65
<p>Link catre: <a href="http://www.yahoo.com">Yahoo</a></p>
</body></html>
Poate fi utilizată și pentru a decora textul, ca în exemplul următor:

<html><head><style type="text/css">
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
</style>
</head>
<body>
<p><b>Obs:</b> Valoarea "blink" nu este recunoscuta de IE, Chrome, sau Safari.</p>
</body></html>
Nu este recomandat să subliniați un text care nu este un link deoarece poate produce confuzie în rândul
cititorilor.
Transformarea textului
Proprietatea text-transform este utilizată pentru a specifica literele mici și literele mari dintr-un text.
Poate fi utilizată pentru a transforma tot textul în minuscule sau majuscule, sau pentru a transforma în
majusculă prima literă din fiecare cuvânt.
<html><head>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">Acesta este un text scris cu litere mari.</p>
<p class="lowercase">Acesta este un text scris cu litere mici.</p>
<p class="capitalize">Acesta este un text în care fiecare cuvant incepe cu litera mare.</p>
</body></html>
Indentarea textului
Proprietatea text-indentation este utilizată pentru a specifica indentarea primei linii dintr-un text.
<html>
<head>
p {text-indent:50px;}
</style>
66
</head>
<body>
<p>”Dacă asi sti ca efortul pentru scrierea unui roman ma poate costa viata, mi-asi lua toate masurile
de siguranta pentru a inlatura o eventualitate cum ar fi boala din care să mi se traga moartea. Dar
unica masura hotaratoare, aceea de a renunta la scris, nu asi lua-o.”</p>
<p>Marin Preda</p>
</body>
</html>
Exemplul 1: Ilustrează cum se mărește sau se micșorează spațiul dintre caractere.

<html>
<head>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>
<body>
</body>
</html>
Exemplul 2: Ilustrează cum se stabilește spațiul dintre liniile unui paragraf.

<html><head>
p.small {line-height: 90%;}
p.big {line-height: 200%;}
</style>
</head>
<body>
<p>
Acesta este un paragraf cu distanța dintre linii normala.
În majoritatea browserelor, distanta standard dintre linii este între 110% și 120%.
Acesta este un paragraf cu distanta dintre linii normala.
</p>
<p class="small">
Acesta este un paragraf cu distanta dintre linii micsorata.
Acesta este un paragraf cu distanta dintre linii micsorata
Acesta este un paragraf cu distanta dintre linii micsorata.
</p>
<p class="big">
Acesta este un paragraf cu distanta dintre linii marita.
</p>
67
</body></html>
Exemplul 3:Ilustrează cum se schimbă direcția textului pentru un element.

<html><head>
div.ex1 {direction:rtl;}
</style>
</head>
<body>
<div>Acest text are directia normala de scris.</div>
<div class="ex1">Acest text este scris de la dreapta la stânga.</div>
</body></html>
Exemplul 4: Ilustrează cum se mărește spațiul dintre cuvintele unui paragraf.

<html><head>
p{
word-spacing:30px;
}
</style>
</head>
<body>
<p>Acesta este un text cu distanta dintre cuvinte marita.</p>
</body></html>
Exemplul 5: Ilustrează cum se forțează scrierea textului dintr-un element pe singură linie.
<html><head>
p{
white-space:nowrap;
}
</style>
</head>
<body>
<p>
Acesta este un text. Acesta este un text. Acesta este un text.
</p>
</body></html>
Exemplul 6: Ilustrează cum se stabilește alinierea verticală a unei imagini din text.
<html><head>
img.top {vertical-align:text-top;}
68
img.super {vertical-align:super;}
</style>
</head>
<body>
<p>O <img src="../Poza.jpg" alt="Hotelul" width="100" /> imagine în interiorul unui paragraf, cu
aliniere verticala implicita.</p>
<p>O <img class="top" src="../Poza.jpg" alt="Hotelul" width="100" /> imagine în interiorul unui
paragraf,cu aliniere la marginea de sus a textului.</p>
<p>O <img class="super" src="../Poza.jpg" alt="Hotelul" width="100" /> imagine în interiorul unui
paragraf, cu aliniere la marginea de jos a textului.</p>
</body></html>
Exemplul 7: Ilustrează cum se adaugă umbră unui text.

<html><head>
.c1 {text-shadow:1px 1px 2px blue,
-1px -1px 2px lightblue;}
.c2 {text-shadow:5px -9px red;}
.c3 {text-shadow:5px -9px 3px green;}
</style>
</head>
<body>
<h1 class="c1">text-shadow</h1>
</body></html>
Toate proprietățile CSS pentru formatarea textului

Proprietatea Descriere Valori
color Setează culoarea textului color
ltr
direction Setează direcția textului
rtl
normal
number
line-height Setează distanța dintre linii
length
%
normal
letter-spacing Mărește sau micșorează spațiul dintre caractere
length
left
right
text-align Aliniază un element în cadrul textului
center
justify
69
none
underline
text-decoration Adaugă decorațiuni unui text overline
line-through
blink
length
text-indent Indentează prima linie de text dintr-un element
%
none
text-shadow Adaugă umbră unui text color
length
none
capitalize
text-transform Controlează literele unui element
uppercase
lowercase
baseline
sub
super
top
text-top
vertical-align Setează alinierea verticală a unui element
middle
bottom
text-bottom
length
%
normal
white-space Setează spațiul alb din interiorul unui element pre
nowrap
normal
word-spacing Mărește sau micșorează spațiul dintre cuvinte
length
2.8. Fonturi
Proprietățile CSS pentru fonturi definesc familia de fonturi, îngroșarea, mărimea și stilul unui text.
Familiile de fonturi în CSS
În CSS, numele unei familii de fonturi se poate defini în două moduri:
 Familie generică – un grup de familii de fonturi care au un aspect similar (ca "Serif" sau
"Monospace");
 Familie de fonturi – o familie specifică de fonturi (ca "Times New Roman" sau "Arial").
Familia
Familia specifică Descriere
generică
Serif Times New Roman Fonturile de tip serif au linii mici la sfârșitul unora
70
Georgia dintre caractere.
Arial "Sans" înseamnă fără – aceste fonturi nu au linii la
Sans-serif
Verdana sfârșitul caracterelor
Courier New
Monospace Toate caracterele monospace au aceeași lățime
Lucida Console
Familia de fonturi a unui text este stabilită cu proprietatea font-family. Această proprietate ar trebui să
precizeze cel puțin două familii de fonturi. Dacă browserul nu recunoaște prima familie, o va încerca pe a
doua. Începeți cu fontul pe care îl doriți și terminați cu o familie generică.
Observație: Dacă numele familiei de fonturi este format din mai multe cuvinte, numele trebuie scris
între ghilimele, ca: "Times New Roman". Dacă folosiți mai multe nume de fonturi, ele trebuie
separate în listă prin virgulă.
<html><head>
p.serif {font-family:"Times New Roman", Times, Serif;}
p.sansserif {font-family:Arial, Helvetica, Sans-serif;}
</style>
</head>
<body>
<h1>Familiile de fonturi în CSS</h1>
<p class="serif">Acest paragraf folosește fontul Times New Roman.</p>
<p class="sansserif">Acest paragraf folosește fontul Arial.</p>
</body></html>
Proprietatea font-style
Această proprietate este utilizată frecvent pentru a seta textul italic. Proprietatea are trei valori:
 normal – textul este afișat normal;
 italic – textul este afișat italic;
 oblique – foarte similar cu italic, dar mai puțin recunoscut de browsere.
<html><head>
p.normal {font-style:normal;}
71
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>
<body>
<p class="normal">Acest paragraf este scris cu fontul normal.</p>
<p class="italic">Acest paragraf este scris cu fontul italic.</p>
<p class="oblique">Acest paragraf este scris cu fontul oblic.</p>
</body></html>
Proprietatea font-size
Această proprietate stabilește dimensiunea unui text. Valoarea proprietății poate fi absolută sau relativă.
Dimensiunea absolută:
 Fixează textul la dimensiunea specificată;
 Nu permite user-ului să modifice dimensiunea textului în toate browserele (dezavantaj);
 Este utilă când este cunoscută dimensiunea fizică a ferestrei de afișare.
Dimensiunea relativă:
 Stabilește dimensiunea textului în funcție de elementele înconjurătoare;
 Permite utilizatorului să modifice în browser dimensiunea textului.
Observație: Dacă nu specificați dimensiunea fontului, mărimea implicită pentru textul normal (cum
ar fi paragraful) este de 16px (16px=1em).
Stabilirea dimensiunii textului în pixeli

Dacă lucrați cu valori în pixeli, aveți control total asupra dimensiunii textului.
<html><head>
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
</style>
</head>
<body>
<p>Acesta este un paragraf.</p>
<p>Dacă precizati dimensiunea fontului în pixeli, în Firefox, Chrome, și Safari textul va putea fi
redimensionat, iar în Internet Explorer nu.</p>
</body></html>
Observație: Textul poate fi redimensionat în orice browser folosind instrumentul zoom. Aceasta se
aplică însă întregii pagini, nu numai textului dorit.
72
Stabilirea dimensiunii textului în em
Pentru a evita problemele de redimensionare din Internet Explorer, mulți proiectanți web utilizează em în
loc de pixeli. Unitatea de măsură em este recomandată și de W3C. 1em este egal cu dimensiunea fontului
normal, adică 16px. Pentru a trece de la pixeli la em folosim formula: pixels/16=em
<html><head>
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
</style>
</head>
<body>

<p>Dacă specificati dimensiunea fontului în em, în Internet Explorer, Firefox, Chrome, și Safari
textul va putea fi redimensiona </p>
</body></html>
Deși textul arată la fel ca în exemplul precedent, el poate fi redimensionat în orice browser. Totuși, în
Internet Explorer, când un text este redimensionat, devine mai mic sau mai mare decât ar trebui.
Combinație de procente și em
Soluția care funcționează în toate browserele, este să stabiliți în procente dimensiunea implicită pentru
elementul body, ca în exemplul următor:
<html><head>
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
</style>
</head>
<body>
<p>Dacă specificati dimensiunea fontului în procente și em,textul va fi afisat la fel în toate
browserele și va putea fi redimensionat!</p>
</body></html>
Exemplul 1: Ilustrează cum se stabilește grosimea fontului.

<html><head>
73
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
</style>
</head>
<body>
<p class="normal">Acesta este un paragraf.</p>
<p class="light">Acesta este un paragraf.</p>
<p class="thick">Acesta este un paragraf.</p>
<p class="thicker">Acesta este un paragraf.</p>
</body> </html>
Exemplul 2: Ilustrează cum se stabilește varianta fontului.

<html><head>
p.normal {font-variant:normal}
p.small {font-variant:small-caps;}
</style>
</head>
<body>
<p class="normal">Numele meu este Andrei Enache.</p>
<p class="small">Numele meu este Andrei Enache.</p>
</body>
</html>
Exemplul 3: Ilustrează cum puteți folosi proprietatea scurtă pentru a stabili toate caracteristicile fontului
într-o singură declarație.
<html><head>
p.ex1{
font:15px arial,sans-serif;
}
p.ex2{
font:italic bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>
<p class="ex1">Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf. Acesta este
un paragraf. Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf. Acesta este un
paragraf. </p>
<p class="ex2"> Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf. Acesta
este un paragraf. Acesta este un paragraf. Acesta este un paragraf. Acesta este un paragraf. Acesta
este un paragraf. </p>
74
</body></html>
Toate proprietățile pentru fonturi în CSS

font-style
font-variant
font-weight
font-size/line-height
font-family
Setează toate proprietățile fontului într-o singură
font caption
declarație
icon
menu
message-box
small-caption
status-bar
family-name
font-family Specifică familia de fonturi
generic-family
xx-small
x-small
small
medium
large
font-size Specifică dimensiunea fontului x-large
xx-large
smaller
larger
length
%
normal
font-style Specifică stilul fontului italic
oblique
font- Specifică dacă textul este afișat sau nu cu majuscule normal
variant mici small-caps
normal
bold
bolder
lighter
font-
Specifică grosimea fontului 100
weight
200
300
400
500
75
600
700
800
900
Unități de măsură utilizate în CSS

Unitățile de măsură sunt utilizate în CSS pentru a controla distanța față de marginile browser-ului, față de
alte elemente HTML, pentru a controla înălțimea literelor sau a unui text. În CSS utilizăm două tipuri de
unități de măsură:
 absolute
 relative
Unitățile de măsură absolute

Caracteristica principală a unităților de măsură absolute este independența de orice mediu electronic -
sistem de operare, browser, rezoluție monitor - în care este aplicat. Măsurile absolute sunt specifice lunii
reale, cum ar fi milimetrul, centimetri, puncte, inch, etc. Aceste unități de măsură sunt fixe în relație cu
mediul sau elementele la care se aplică.
Unitățile de măsură absolute utilizate în CSS:
Unități de măsură Descriere
in Inch, 1 inch este egal cu 2.54 cm
cm Centimetri
mm Milimetri
pt Puncte tipografice(point),1 punct este egal cu 1/72 inch
pc Picas, 1 picas este egal cu 12 puncte sau 1/6 inch.
Unitățile de măsură absolute sunt recomandate a fi utilizate pentru imprimarea unui document, unde
unitățile de măsură fizice, cum ar fi mm, cm, etc., sunt recunoscute, în timp ce utilizarea lor pentru
monitorul calculatorului nu sunt recomandate, deoarece aceste unități de măsură absolute sunt
independente de browser și rezoluția monitorului unui calculator.
Unitățile de măsură relative

Unitățile de măsură relative se caracterizează prin faptul că sunt dependente de mediul în care se aplică
sistem de operare, rezoluție monitor, browser. Aceste unități de măsură sunt relative în relație cu mediul
sau elementele la care se aplică.
Unitățile de măsură relative utilizate de CSS:
Unități de măsură Descriere

em Lățimea literei m a fontului curent
ex Înălțimea literei x a fontului curent
px Pixeli – mărimea unui punct pe monitor, 1px este egal cu 1/96 inch.
76
% Procent
Unitățile de măsură relative sunt recomandate a fi folosite pentru aspectul unei pagini web, deoarece sunt
dependente de browser și rezoluția monitorului. Unitatea em este utilizată pentru dimensiunea fontului,
pixelii sunt utilizați pentru rezoluția monitorului și procentajul se aplică în funcție de proprietatea
utilizată.
Notă: În documentele W3C, pixelii sunt considerați o unitate de măsură absolută. Sunt specialiști în
web design și CSS care consideră că pixelii sunt unități de măsură relativi, deoarece utilizarea să
depinde de mai mulți factori, dintre care cel mai important este rezoluția monitorului unui calculator.
Vom considera că pixelii sunt unități de măsură relativi, datorită faptului că utilizarea să este relativă,
în mod deosebit, în ceea ce privește rezoluția monitorului.
2.9. Linkuri
Formatarea linkurilor
Linkurile pot fi stilizate cu ajutorul proprietăților CSS , cum ar fi color, font-family, background-color.
Special pentru linkuri este faptul că ele trebuie formatate diferit, în funcție de starea în care sunt. Cele
patru stări ale unui link sunt:
 a:link - link normal, nevizitat;
 a:visited - link care a fost vizitat de user;
 a:hover - link peste care se mișcă mouse-ul;
 a:active - link apăsat (activ).
<html><head>
a:link {color:#FF0000} /* link nevizitat */
a:visited {color:#00FF00} /* link vizitat */
a:hover {color:#FF00FF} /* link peste care se misca mouse-ul */
a:active {color:#0000FF} /* link selectat */
</style>
</head>
<body>
<p><b><a href="http://www.google.com" target="_blank">Acesta este un link</a></b></p>
<p><b>Nota:</b> a:hover TREBUIE scrisa în definitia CSS dupa a:link și a:visited pentru a fi
efectiva.</p>
<p><b>Nota:</b> a:active TREBUIE scrisa în definitia CSS dupa a:hover pentru a fi efectiva.</p>
</body></html>
Când stabiliți stilul linkurilor, există anumite reguli privind ordinea declarațiilor:
 - a:hover trebuie scrisă după a:link și a:visited
 - a:active trebuie scrisă după a:hover
Decorarea textului
77
Proprietatea text-decoration este folosită cel mai des pentru a înlătura sublinierea link-urilor.
<html><head>
a:link {text-decoration:none} /* link nevizitat */
a:visited {text-decoration:none} /* link vizitat */
a:hover {text-decoration:underline} /* mouse peste link */
a:active {text-decoration:underline} /* link selectat */
</style>
</head>
<body>
</body></html>
Culoarea fundalului
Proprietatea background-color este utilizată pentru a specifica culoarea de fundal a linkurilor.
<html><head>
a:link {background-color:#B2FF99;} /* link nevizitat */
a:visited {background-color:#FFFF85;} /* link vizitat */
a:hover {background-color:#FF704D;} /* mouse peste link */
a:active {background-color:#FF704D;} /* link selectat */
</style>
</head>
<body>
</body></html>
Exemple:
Exemplul 1: Ilustrează cum se aplică unui link diferite stiluri.

<html><head>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
78
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>Plimbati mouse-ul peste linkuri pentru a vedea cum se schimba aspectul lor.</p>
<p><b><a class="one" href="http://www.google.com" target="_blank">Acest link isi schimba
culoarea</a></b></p>
<p><b><a class="two" href="http://www.google.com" target="_blank">Acest link isi schimba
dimensiunea fontului</a></b></p>
<p><b><a class="three" href="http://www.google.com" target="_blank">Acest link isi schimba
culoarea de fundal</a></b></p>
<p><b><a class="four" href="http://www.google.com" target="_blank">Acest link isi schimba
familia de fonturi</a></b></p>
<p><b><a class="five" href="http://www.google.com" target="_blank">Acest link isi schimba
decoratia</a></b></p>
</body></html>
Exemplul 2: Ilustrează cum se combină mai multe proprietăți CSS pentru a afișa link-urile ca niște căsuțe
colorate.
<html><head>
a:link,a:visited {display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active {
background-color:#7A991A;
}
</style>
</head>
<body>
<a href="http://www.google.com" target="_blank">Acesta este un link</a>
</body></html>
2.10. Liste
Proprietățile CSS pentru liste vă permit să:
 setați diferiți marcatori pentru itemii dintr-o listă ordonată sau neordonată
 să setați o imagine ca marcator pentru itemii unei liste neordonate
Setarea diferiților marcatori
79
Tipul marcatorilor itemilor dintr-o listă neordonată se stabilește cu proprietatea list-style-type.
Exemplu:
<html><head>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>Exemplu de lista neordonata:</p>
<ul class="a">
<li>Cafea</li>
<li>Ceai</li>
</ul>
<ul class="b">
<li>Cafea</li>
<li>Ceai</li>
</ul>
<p>Exemplu de listă ordonată:</p>
<ol class="c">
<li>Cafea</li>
<li>Ceai</li>
</ol>
<ol class="d">
<li>Cafea</li>
<li>Ceai</li>
</ol>
</body></html>
Valorile proprietății pentru liste neordonate

Valoare Descriere
none Fără marcator
disc Implicit. Marcatorul este un cerc plin
circle Marcatorul este un cerc gol
square Marcatorul este un pătrat
Valorile proprietății pentru liste ordonate

Valoare Descriere
armenian Marcatorul este un număr tradițional armenesc
decimal Marcatorul este un număr în baza zece
80
decimal-leading-zero Marcatorul este un număr precedat de zero (01, 02, 03, etc.)
georgian Marcatorul este un număr tradițional georgian (an, ban, gan, etc.)
lower-alpha Marcatorul este litera mica (a, b, c, d, e, etc.)
lower-greek Marcatorul este literă mică grecească (alpha, beta, gamma, etc.)
lower-latin Marcatorul este literă latină mică (a, b, c, d, e, etc.)
lower-roman Marcatorul este număr roman mic (i, ii, iii, iv, v, etc.)
upper-alpha Marcatorul ete literă mare (A, B, C, D, E, etc.)
upper-latin Marcatorul este literă latină mare (A, B, C, D, E, etc.)
upper-roman Marcatorul este număr roman mare (I, II, III, IV, V, etc.)
Observație: Nici-o versiune de Internet Explorer (inclusiv IE8) nu acceptă valorile "decimal-leading-
zero", "lower-greek", "lower-latin", "upper-latin", "armenian", sau "georgian".
O imagine ca marcator în listă

Pentru a specifica o imagine ca marcator într-o listă se utilizează proprietatea list-style-image, ca în
exemplul următor:
<html><head>
ul{
list-style-image:url('sqpurple.gif');
}
</style>
</head>
<body>
<ul>
<li>Ceai</li>
<li>Cafea</li>
</ul>
</body></html>
Proprietatea scurtă
Puteți specifica toate proprietățile unei liste într-o singură declarație folosind list-style ca în următorul
exemplu:
<html>
<head>
ul
{
list-style:square url("sqpurple.gif");
}
81
</style>
</head>
<body>
<ul>
<li>Cafea</li>
<li>Ceai</li>
<li>Lapte</li>
</ul>
</body></html>
Când folosiți varianta scurtă, ordinea valorilor este:

 list-style-type
 list-style-position
 list-style-image
Nu contează dacă unele valori lipsesc, cât timp valorile care apar respectă această ordine.
Exemplu: Acest exemplu ilustrează utilizarea tuturor tipurilor de marcatori în CSS.

<html><head>
ul.a {list-style-type:disc;}
ul.b {list-style-type:circle;}
ul.c {list-style-type:square;}
ul.d {list-style-type:none;}
ol.e {list-style-type:decimal;}
ol.f {list-style-type:decimal-leading-zero;}
ol.g {list-style-type:lower-roman;}
ol.h {list-style-type:upper-roman;}
ol.i {list-style-type:lower-alpha;}
ol.j {list-style-type:upper-alpha;}
ol.k {list-style-type:lower-greek;}
ol.l {list-style-type:lower-latin;}
ol.m {list-style-type:upper-latin;}
ol.n {list-style-type:armenian;}
ol.o {list-style-type:georgian;}
</style>
</head>
<body>
<ul class="a">
<li>Discuri</li>
<li>Ceai</li>
<li>Cafea</li>
</ul>
<ul class="b">
<li>Cercuri</li>
<li>Ceai</li>
<li>Cafea</li>
82
</ul>
<ul class="c">
<li>Patrate</li>
<li>Ceai</li>
<li>Cafea</li>
</ul>
<ul class="d">
<li>Fara marcatori</li>
<li>Ceai</li>
<li>Cafea</li>
</ul>
<ol class="e">
<li>Marcatori cifre</li>
<li>Ceai</li>
<li>Cafea</li>
</ol>
<ol class="f">
<li>Marcatori care incep cu zero</li>
<li>Ceai</li>
<li>Cafea</li>
</ol>
<ol class="g">
<li>Cifre romane mici</li>
<li>Ceai</li>
<li>Cafea</li>
</ol>
<ol class="h">
<li>Cifre romane mari</li>
<li>Ceai</li>
<li>Cafea</li>
</ol>
<ol class="i">
<li>Marcatori litere mici</li>
<li>Ceai</li>
<li>Cafea</li>
</ol>
<ol class="j">
<li>Marcatori litere mari</li>
<li>Ceai</li>
<li>Cafea</li>
</ol>
<ol class="k">
<li>Litere grecesti mici</li>
<li>Ceai</li>
<li>Cafea</li>
</ol>
83
<ol class="l">
<li>Litere latine mici</li>
<li>Ceai</li>
<li>Cafea</li>
</ol>
<ol class="m">
<li>Litere latine mari</li>
<li>Ceai</li>
<li>Cafea</li>
</ol>
<ol class="n">
<li>Marcatori armenesti</li>
<li>Ceai</li>
<li>Cafea</li>
</ol>
<ol class="o">
<li>Marcatori georgieni</li>
<li>Ceai</li>
<li>Cafea</li>
</ol>
</body></html>
Toate proprietățile pentru liste în CSS

list-style-type
Precizează toate proprietățile listei într-o singură
list-style list-style-position
declarație
list-style-image
list-style- URL
Specifică o imagine drept marcator
image none
list-style- Specifică dacă marcatorii din listă sunt în interiorul inside
position sau exteriorul conținutului outside
none
disc
circle
square
decimal
decimal-leadingzero
list-style-type Specifică tipul marcatorilor din listă
armenian
georgian
lower-alpha
upper-alpha
lower-greek
lower-latin
84
upper-latin
lower-roman
upper-roman
2.11. Tabele
Aspectul unui tabel HTML poate fi îmbunătățit folosind CSS.
Chenarele tabelului
Pentru a specifica chenarele unui tabel în CSS, se folosește proprietatea border. Exemplul următor
setează un chenar negru pentru tabel și pentru elementele th și td:
<html><head>
table,th,td{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr><th>Nume</th><th>Prenume</th></tr>
<tr><td>Scutelnic</td><td>Speranța</td></tr>
<tr><td>Cojocaru</td><td>Cristian</td></tr>
</table>
</body></html>
Observați că tabelul din exemplul anterior are chenare duble. Acest lucru se întâmplă deoarece
elementele table, th, și td au chenare separate. Pentru a afișa un singur chenar pentru tabel, folosiți
proprietatea border-collapse.
Proprietatea border-collapse
Această proprietate specifică dacă chenarele tabelului sunt sau nu reunite întrunul singur.
<html><head>
table {
border-collapse:collapse;
}
table, td, th{
}
</style>
</head>
<body>
<table>
<tr><th>Nume</th><th>Prenume</th></tr>
85
<tr><td>Scutelnic</td><td>Speranța</td></tr>
<tr><td>Cojocaru</td><td>Cristian</td></tr>
</table>
</body></html>
Dimensiunile unui tabel

Cu ajutorul proprietăților width și height puteți stabili lățimea și înălțimea unui tabel. În exemplul
următor lățimea tabelului este stabilită la 100% și înălțimea elementelor th la 50px:
<html><head>
table,td,th {
}
table {
width:100%;
}
th {
height:50px;
}
</style>
</head>
<body>
<table>
<tr><th>Nume</th><th>Prenume</th><th>Economii</th></tr>
<tr><td>Scutelnic</td><td>Speranța</td><td>5000 MDL</td></tr>
<tr><td>Cojocaru</td><td>Cristian</td><td>3500 MDL</td></tr>
<tr><td>Barbu</td><td>Lucia</td><td>3000 MDL</td></tr>
<tr><td>David</td><td>Andrei</td><td>4500 MDL</td></tr>
</table>
</body></html>
Alinierea textului din tabel

Pentru a alinia textul dintr-un tabel se folosesc proprietățile text-align și vertical-align.
Proprietatea text-align stabilește alinierea orizontală a textului, care poate avea valorile left, right sau
center:
<html><head>
table,td,th {
}
td {
text-align:right;
}
</style>
86
</head>
<body>
<table>
</table>
</body></html>
Proprietatea vertical-align stabilește alinierea verticală a textului, și poate avea valorile top, bottom sau
middle:
<html><head>
table, td, th {
}
td {
height:50px;
vertical-align:bottom;
}
</style>
</head>
<body>
<table>
Spațiul dintre chenar și conținut (table padding)

Pentru a controla spațiul dintre chenarul și conținutul tabelului, utilizați în elementele td și th proprietatea
padding:
<html><head>
table, td, th {
}
td {
padding:15px;
}
</style>
87
</head>
<body>
<table>
<tr><td>Ion</td><td>Ion</td><td>5000 Ron</td></tr>
<tr><td>Ion</td><td>Ana</td><td>3500 Ron</td></tr>
<tr><td>Petru</td><td>Ion</td><td>3000 Ron</td></tr>
</table>
</body></html>
Culoarea tabelelor
În exemplul următor este precizată culoarea chenarului tabelului și culorile pentru textul și fundalul
elementelor th:
<html><head>
table, td, th {
border:1px solid green;
}
th {
background-color:green;
color:white;
}
</style>
</head>
<body>
<table>
Exemple:
Exemplul 1: Ilustrează cum puteți crea un tabel cu un aspect deosebit.
<html>
<head>
#customers {
font-family:"Trebuchet MS", Arial, Helvetica, sansserif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th {
font-size:1em;
border:1px solid #98bf21;
88
padding:3px 7px 2px 7px;
}
#customers th {
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<table id="customers">
<tr><th>Compania</th><th>Contact</th><th>Tara</th></tr>
<tr><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Germania</td></tr>
<tr class="alt"><td>Berglunds snabbköp</td><td>Christina Berglund</td><td>Suedia</td></tr>
<tr><td>Centro comercial Moctezuma</td><td>Francisco Chang</td><td>Mexic</td></tr>
<tr class="alt"><td>Ernst Handel</td><td>Roland Mendel</td><td>Austria</td></tr>
<tr><td>Island Trading</td><td>Helen Bennett</td><td>UK</td></tr>
<tr class="alt"><td>Königlich Essen</td><td>Philip Cramer</td><td>Germania</td></tr>
<tr><td>Laughing Bacchus Winecellars</td><td>Yoshi Tannamuri</td><td>Canada</td></tr>
<tr class="alt"><td>Magazzini Alimentari Riuniti</td><td>Giovanni
Rovelli</td><td>Italia</td></tr>
<tr><td>North/South</td><td>Simon Crowther</td><td>UK</td></tr>
<tr class="alt"><td>Paris spécialités</td><td>Marie Bertrand</td><td>Franta</td></tr>
Exemplul 2: Ilustrează cum stabiliți poziția denumirii tabelului (proprietatea caption).

<html><head>
caption {caption-side:bottom;}
</style>
</head>
<body>
<table border="1">
<caption>Tabel 1.1 Clienti</caption>
<tr><th>Compania</th><th>Contact</th><th>Tara</th></tr>
<tr><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Germania</td></tr>
<tr><td>Berglunds snabbköp</td><td>Christina Berglund</td><td>Suedia</td></tr>
<tr><td>Centro comercial Moctezuma</td><td>Francisco Chang</td><td>Mexic</td></tr>
<tr><td>Ernst Handel</td><td>Roland Mendel</td><td>Austria</td></tr>
89
<tr><td>Island Trading</td><td>Helen Bennett</td><td>UK</td></tr>
<tr><td>Magazzini Alimentari Riuniti</td><td>Giovanni Rovelli</td><td>Italia</td></tr>
<tr><td>North/South</td><td>Simon Crowther</td><td>UK</td></tr>
</table></body> </html>
2.12. Modelul box în CSS

Toate elementele HTML pot fi considerate a fi de tip box (casetă). În CSS, termenul "box model" este
folosit când se discută despre proiectare și aspect. În CSS modelul box este în esență o casetă care
înconjoară un element HTML și este formată din: margini, chenare, distanța dintre chenar și conținut
(padding) și conținut. Modelul box ne permite să plasăm chenare în jurul elementelor și să amplasăm
elementele în relație cu alte elemente. Imaginea de mai jos ilustrează modelul box:
Explicarea componentelor:
 Margin - o zonă goală în jurul unui chenar. Marginea nu are culoare de fundal și este complet
transparentă.
 Border - un chenar care înconjoară conținutul.
 Padding - o zonă goală în jurul conținutului. Această zonă este afectată de culoarea de fundal a
casetei.
 Content - conținutul casetei, unde apar textul și imaginile.
Pentru a stabili corect înălțimea și lățimea unui element în orice browser, trebuie să înțelegeți cum
lucrează modelul box.
2.12.1. Dimensiunile unui element:
Important: Când specificați în CSS proprietățile width și height ale unui element, stabiliți de fapt
dimensiunile numai pentru zona de conținut din desenul de mai sus. Pentru a cunoaște adevăratele
dimensiuni ale unui element, trebuie să adăugați padding-ul, chenarul și marginea. Lățimea totală a
elementului din exemplul următor este 300px:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
90
Să socotim: 250px (lățimea conținutului) + 20px (padding-ul stâng și drept) + 10px (chenarul din
stânga și din dreapta) + 20px (marginea din stânga și din dreapta) = 300px
Să presupunem că există doar 250px spațiu pentru un element și să construim un element cu lățimea
totală de 250px:
<html><head>
div.ex{
width:220px;
padding:10px;
margin:0px;
}
</style>
</head>
<body>
<img src="..250px.gif" width="250" height="10" /><br /><br />
<div class="ex">Linia de deasupra are 250px lungime.<br />
Lungimea totală a acestui element este tot 250px.
</div>
<p><b>Important:</b> Acest exemplu nu va fi afisat corect în IE!<br /></p>
</body></html>
Lățimea totală a unui element trebuie calculată astfel: Lățimea totală a elementului = lățime +
padding-ul stâng + padding-ul drept + chenarul stâng + chenarul drept + marginea stângă + marginea
dreaptă
Înălțimea totală a unui element trebuie calculată astfel:
Înălțimea totală a elementului = înălțime + padding-ul de sus + padding-ul de jos + chenarul de sus+
chenarul de jos + marginea de sus + marginea de jos
Probleme de compatibilitate în browsere:

Dacă testați exemplul anterior în Internet Explorer, veți vedea că lățimea totală nu este de 250px. IE
include padding-ul și bordura în lățime, când proprietatea width este setată. Pentru a rezolva această
problemă, adăugați în document declarația DOCTYPE ca în exemplul următor:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
div.ex{
width:220px;
padding:10px;
91
margin:0px;
}
</style>
</head>
<body>
<img src="250px.gif" width="250" height="10" /><br /><br />
<div class="ex">
Linia de deasupra are 250px lungime.<br />
Acum lățimea totală a acestui element este tot 250px.
</div>
<p><b>Note:</b> în acest exemplu am adaugat declaratia DOCTYPE (deasupra elementului html),
astfel incat va
fi afisat corect în toate browserele.</p>
</body></html>
2.12.2. Chenare
Proprietatea CSS border definește chenarul din jurul unui element. Puteți specifica stilul și culoarea unui
element al chenarului.
Stilul chenarului
Proprietatea border-style specifică ce fel de bordură va fi afișată.
Observație: Nici-una din celelalte proprietăți ale chenarului nu va avea efect, dacă proprietatea
border-style nu este setată. Acest exemplu ilustrează ce valori poate avea proprietatea border-style și
cum arată fiecare chenar:
<html>
<head>
p.none {border-style:none}
p.dotted {border-style:dotted}
p.dashed {border-style:dashed}
p.solid {border-style:solid}
p.double {border-style:double}
p.groove {border-style:groove}
p.ridge {border-style:ridge}
p.inset {border-style:inset}
p.outset {border-style:outset}
p.hidden {border-style:hidden}
</style>
</head>
<body>
<p class="none">Fara chenar.</p>
<p class="dotted">Chenar punctat.</p>
<p class="dashed">Chenar tip linie intrerupta.</p>
92
<p class="solid">Chenar plin.</p>
<p class="double">Chenar dublu.</p>
<p class="groove">Chenar tip groove.</p>
<p class="ridge">Chenar tip ridge.</p>
<p class="inset">Chenar tip inset.</p>
<p class="outset">Chenar tip outset.</p>
<p class="hidden">Chenar ascuns.</p>
</body>
</html>
Grosimea chenarului
Grosimea chenarului se stabilește cu proprietatea border-width. Grosimea se stabilește în pixeli sau se
folosește una din valorile predefinite: thin, medium, sau thick.
Observație: Proprietatea border-width nu funcționează dacă este utilizată singură; mai întâi trebuie
stabilită proprietatea border-style.
Exemplu:
<html><head>
p.one{
border-style:solid;
border-width:5px;
}
p.two{
border-style:solid;
border-width:medium;
}
p.three{
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<p class="one">Un text oarecare.</p>
<p class="two">Un text oarecare.</p>
<p class="three">Un text oarecare.</p>
</body></html>
Culoarea chenarului
Pentru a stabili culoarea chenarului se utilizează proprietatea border-color. Culoarea poate fi precizată
prin:
 nume - numele culorii, ca "red"
 RGB - valoare RGB, ca "rgb(255,0,0)"
 Hex - valoare hexazecimală, ca "#ff0000"
93
Puteți stabili culoarea chenarului și cu valoarea "transparent".
Observație: Proprietatea border-color nu are nici-un efect dacă nu a fost setată mai întâi proprietatea
border-style.
Exemplu:
<html><head>
p.one{
border-style:solid;
border-color:red;
}
p.two{
border-style:solid;
border-color:#98bf21;
}
</style>
</head>
<body>
<p class="one">Un chenar rosu plin.</p>
<p class="two">Un chenar verde plin.</p>
</body></html>
Laturile unui chenar

În CSS este posibil să setați în mod diferit laturile unui chenar.
Exemplu:
<html><head>
p{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
</style>
</head>
<body>
<p>Acest paragraf are doua tipuri de chenare.</p>
</body></html>
Exemplul anterior poate fi realizat și cu o singură declarație, ca în exemplul următor:

<html><head>
p{
94
border-style:dotted solid;
}
</style>
</head>
<body>
<p>Acest paragraf are doua tipuri de chenare.</p>
</body></html>
Proprietatea border-style poate avea între una și patru valori.

border-style:dotted solid double dashed:
 latura de sus este punctată;
 latura dreaptă este plină;
 latura de jos este dublă;
 latura stângă este întreruptă.
border-style:dotted solid double:
 latura de sus este punctată,
 laturile dreaptă și stângă sunt pline;
 latura de jos este dublă.
border-style:dotted solid;
 laturile de sus și de jos sunt punctate;
 laturile din stânga și din dreapta sunt pline.
border-style:dotted;
 cele patru laturi sunt punctate.
Pentru a scurta codul, este posibil să specificăm toate proprietățile chenarului într-o singură proprietate.
Pentru chenare, varianta scurtă este border:
<html><head>
p{
border:5px solid red;
}
</style>
</head>
<body>
<p>Acesta este un paragraf oarecare.</p>
</body></html>
Când folosiți varianta scurtă, ordinea valorilor este:

 border-width
 border-style
 border-color
Nu contează ce valori lipsesc (oricum border-style trebuie să apară), atât timp cât valorile prezente sunt
specificate în această ordine.
95
Exemple:
Exemplul 1: Ilustrează utilizarea variantei scurte pentru a seta toate proprietățile chenarului cu o singură
declarație.
<html><head>
p{
border-style:solid;
border-top:thick double #ff0000;
}
</style>
</head>
<body>
<p>Acesta este un paragraf oarecare.</p>
</body></html>
Exemplul 2: Ilustrează cum se stabilește stilul laturii de jos a chenarului.

<html>
<head>
p {border-style:solid}
p.none {border-bottom-style:none}
p.dotted {border-bottom-style:dotted}
p.dashed {border-bottom-style:dashed}
p.solid {border-bottom-style:solid}
p.double {border-bottom-style:double}
p.groove {border-bottom-style:groove}
p.ridge {border-bottom-style:ridge}
p.inset {border-bottom-style:inset}
p.outset {border-bottom-style:outset}
</style>
</head>
<body>
<p class="none">Chenar fara latura de jos.</p>
<p class="dotted">Chenar cu latura de jos punctata.</p>
<p class="dashed">Chenar cu latura de jos intrerupta.</p>
<p class="solid">Chenar cu latura de jos plina.</p>
<p class="double">Chenar cu latura de jos dubla.</p>
<p class="groove">Chenar cu latura de jos groove.</p>
<p class="ridge">Chenar cu latura de jos ridge.</p>
<p class="inset">Chenar cu latura de jos inset.</p>
<p class="outset">Chenar cu latura de jos outset.</p>
</body></html>
Exemplul 3: Ilustrează cum se stabilește grosimea laturii stângi a chenarului.

<html><head>
96
p{
border-style:solid;
border-left-width:15px;
}
</style>
</head>
<body>
<p><b>Note:</b> Proprietatea "border-left-width"
functioneaza numai dacă ati setat mai intai
proprietatea "border-style".</p>
</body></html>
Exemplul 4: Ilustrează cum se stabilește culoarea fiecărei laturi a chenarului.

<html><head>
p.one{
border-style:solid;
border-color:#0000ff;
}
p.two{
border-style:solid;
border-color:#ff0000 #0000ff;
}
p.three{
border-style:solid;
border-color:#ff0000 #00ff00 #0000ff;
}
p.four{
border-style:solid;
border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>
<body>
<p class="one">Chenar cu o singura culoare!</p>
<p class="two">Chenar cu doua culori!</p>
<p class="three">Chenar cu trei culori!</p>
<p class="four">Chenar cu patru culori!</p>
</body></html>
Exemplul 5: Ilustrează cum se stabilește culoarea pentru latura dreaptă a chenarului.

<html><head>
p{
border-style:solid;
border-right-color:#ff0000;
97
}
</style>
</head>
<body>
</body></html>
Toate proprietățile CSS pentru chenare

border-width
Setează toate proprietățile într-o singură
border border-style
declarație
border-color
border-bottom-width
Setează toate proprietățile laturii de jos a
border-bottom border-bottom-style
chenarului cu o singură declarație
border-bottom-color
border-bottom-
Stabilește culoarea laturii de jos border-color
color
border-bottom-
Stabilește stilul laturii de jos border-style
style
border-bottom-
Stabilește grosimea laturii de jos border-width
width
color_name
hex_number
border-color Stabilește culoarea întregului chenar
rgb_number
transparent
border-left-width
Stabilește toate proprietățile laturii stângi cu o
border-left border-left-style
singură declarație
border-left-color
border-left-color Stabilește culoarea laturii stângi border-color
border-left-style Stabilește stilul laturii stângi border-style
border-left-width Stabilește grosimea laturii stângi border-width
border-right-width
Stabilește toate proprietățile laturii drepte cu o
border-right border-right-style
singură declarație
border-right-color
border-right-color Stabilește culoarea laturii drepte border-color
border-right-style Stabilește stilul laturii drepte border-style
border-right-
Stabilește grosimea laturii drepte border-width
width
98
none
hidden
dotted
dashed
solid
border-style Stabilește stilul pentru întregul chenar
double
groove
ridge
inset
outset
border-top-width
Stabilește toate proprietățile laturii de sus cu o
border-top border-top-style
singură declarație.
border-top-color
border-top-color Stabilește culoarea laturii de sus border-color
border-top-style Stabilește stilul laturii de sus border-style
border-top-width Stabilește grosimea laturii de sus border-width
thin
medium
border-width Stabilește grosimea pentru întreg chenarul
thick
length
2.12.3. Linii exterioare (outlines)

O linie exterioară (outline) este o linie trasată în jurul elementului, în afara chenarului. Proprietățile unei
linii exterioare precizează stilul, culoarea și lățimea.
Exemple:
Exemplul 1: Ilustrează cum se trasează o linie exterioară (verde, groasă, punctată) în jurul unui element,
în afara chenarului.
<html><head>
p{
outline:green dotted thick;
}
</style>
</head>
<body>
<p><b>Obs:</b> Internet Explorer 8 accepta proprietatea outline dacă este specificat !DOCTYPE în
codul html.</p>
</body></html>
99
Exemplul 2: Ilustrează cum se stabilește stilul unei linii exterioare.
<html>
<head>
p {border:1px solid red}
p.dotted {outline-style:dotted}
p.dashed {outline-style:dashed}
p.solid {outline-style:solid}
p.double {outline-style:double}
p.groove {outline-style:groove}
p.ridge {outline-style:ridge}
p.inset {outline-style:inset}
p.outset {outline-style:outset}
</style>
</head>
<body>
<p class="dotted">O linie exterioară punctata.</p>
<p class="dashed">O linie exterioara intrerupta.</p>
<p class="solid">O linie exterioara plina.</p>
<p class="double">O linie exterioara dubla.</p>
<p class="groove">O linie exterioara groove</p>
<p class="ridge">O linie exterioara ridge</p>
<p class="inset">O linie exterioara inset</p>
<p class="outset">O linie exterioara outset</p>
<b>Obs:</b> Internet Explorer 8 accepta proprietatea outline dacă este specificat !DOCTYPE.
</body></html>
Exemplul 3: Ilustrează cum se stabilește culoarea unei linii exterioare.

<html>
<head>
p{
outline-style:dotted;
outline-color:#00ff00;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 8 accepta proprietatea outline dacă este specificat !
DOCTYPE.</p>
</body></html>
Exemplul 4: Ilustrează cum se stabilește grosimea unei linii exterioare.

100
<html>
<head>
p.one{
outline-style:solid;
outline-width:thin;
}
p.two{
outline-style:dotted;
outline-width:3px;
}
</style>
</head>
<body>
<p class="one">Un text într-un paragraf.</p>
<p class="two">Un text în alt paragraf.</p>
</body></html>
Toate proprietățile CSS pentru linii exterioare

outline-color
Stabilește toate proprietățile liniei
outline outline-style
exterioare într-o singură declarație
outline-width
color_name
hex_number
outline-color Stabilește culoarea liniei exterioare
rgb_number
invert
none
dotted
dashed
solid
outline-style Stabilește stilul liniei exterioare double
groove
ridge
inset
outset
thin
medium
outline-width Stabilește grosimea liniei exterioare
thick
length
101
2.12.4. Margini
Proprietatea CSS margin definește spațiul din jurul unui element (în afara chenarului). Marginea nu are
culoare de fundal și este complet transparentă. Cele patru margini ale elementului pot fi modificate în mod
independent, folosind proprietăți separate. O proprietate scurtă poate fi, de asemenea, folosită pentru a
schimba toate cele patru margini simultan.
Valori posibile:
Valoare Descriere
auto Marginile sunt stabilite de către browser. Rezultatul depinde de browser.
length Definește o margine fixă (în pixeli, puncte, em, etc.)
% Definește o margine în procente față de elementul conținut
Observație:Este posibilă utilizarea valorilor negative, pentru a suprapune conținutul.
Laturile marginii
În CSS, este posibil să definim margini diferite pe cele patru laturi:
<html>
<head>
p{
background-color:yellow;
}
p.margin
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body>
<p>Acesta este un paragraf cu margini nedefinite.</p>
<p class="margin">Acesta este un paragraf cu margini definite.</p>
</body></html>
Proprietatea prescurtată
Pentru a scurta codul, pot fi specificate cele patru margini într-o singură declarație, utilizând proprietatea
scurtă margin:
102
<html><head>
p{
}
p.margin
{
margin:100px 50px;
}
</style>
</head>
<body>
<p>Acest paragraf nu are marginile definite.</p>
<p class="margin">Acest paragraf are marginile definite.</p>
</body></html>
Proprietatea margin poate avea între una și patru valori.

 margin:25px 50px 75px 100px;
o marginea de sus este 25px
o marginea dreaptă este 50px
o marginea de jos este 75px
o marginea stângă este 100px
 margin:25px 50px 75px;
o marginea de sus este 25px
o marginile din dreapta și din stânga sunt 50px
o marginea de jos este75px
 margin:25px 50px;
o marginile de sus și de jos sunt 25px
o marginile din dreapta și din stânga sunt 50px
 margin:25px;
o toate cele patru margini sunt 25px
Exemple:
Exemplul 1: Ilustrează cum se stabilește marginea de sus a unui text utilizând o valoare în cm.
<html><head>
p.ex1 {margin-top:2cm}
</style>
</head>
<body>
<p>Un paragraf cu margini nedefinite.</p>
<p class="ex1">Un paragraf cu marginea de sus de 2cm.</p>
<p>Un paragraf cu margini nedefinite.</p>
</body></html>
Exemplul 2:Ilustrează cum se stabilește marginea de jos a unui text utilizând o valoare procentuală.
103
<html><head>
p.bottommargin {margin-bottom:25%}
</style>
</head>
<body>
<p>Acest paragraf are margini nedefinite.</p>
<p class="bottommargin">Acest paragraf are marginea de jos definita.</p>
<p>Acest paragraf are margini nedefinite.</p>
</body></html>
Toate proprietățile pentru margini

margin-top
Proprietate prescurtată pentru a seta margin-right
margin
simultan toate marginile margin-bottom
margin-left
auto
margin-bottom Stabilește marginea de jos length
%
auto
margin-left Stabilește marginea stângă length
%
auto
margin-right Stabilește marginea dreaptă length
%
auto
margin-top Stabilește marginea de sus length
%
2.12.5. Padding
Proprietatea CSS padding definește spațiul dintre chenar și conținut. Acest spațiu este afectat de culoarea
de fundal a elementului. Spațiul drept, stâng, de sus și de jos (relativ la conținut) poate fi modificat în mod
independent folosind proprietăți diferite. Există și varianta scurtă a proprietății pentru a modifica cele
patru spații simultan.
Valori posibile:
Valoare Descriere
length Definește un spațiu fix (în pixel, puncte, em, etc.)
% Definește un spațiu în valoare procentuală relativ la conținut
104
Modificarea individuală a celor patru spații
În CSS, puteți specifica spații diferite pe cele patru laturi ale elementului, ca în exemplul următor:
<html><head>
p{
border: 1px solid #ccc;
}
p.padding{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
</style>
</head>
<body><p>Acesta este un paragraf cu spatiul nedefinit.</p>
<p class="padding">Acest paragraf are cele patru spatii definite cu proprietatea padding.</p>
</body></html>
Pentru a scurta codul, puteți specifica toate cele patru spații într-o singură proprietate numită simplu
padding, ca în exemplul următor :
<html><head>
p{
}
p.padding{
padding:25px 50px;
}
</style>
</head>
<body>
<p>Acesta este un paragraf cu spatiul nedefinit.</p>
<p class="padding">Acest paragraf are cele patru spatii definite cu proprietatea padding.</p>
</body></html>
Proprietatea padding poate avea între una și patru valori:

 padding:25px 50px 75px 100px;
 spațiul de sus are 25px
 spațiul din dreapta are 50px
 spațiul de jos are 75px
105
 spațiul din stânga are100px
 padding:25px 50px 75px;
 spațiul de sus are 25px
 spațiile din dreapta și din stânga au 50px
 spațiul de jos are 75px
 padding:25px 50px;
 spațiile de sus și de jos au 25px
 spațiile din dreapta și din stânga au 50px
 padding:25px;
 toate cele patru spații au 25px
Exemple:
Exemplul 1: Ilustrează utilizarea proprietății scurte pentru a seta spațiile unui element.
<html><head>
p.ex1{
border:1px solid #ccc;
padding:2cm;
}
p.ex2{
padding:0.5cm 3cm;
}
</style>
</head>
<body>
<p class="ex1">Acest text are cele patru spatii egale. Spatiul pe fiecare latura a textului este de
2cm.</p>
<p class="ex2">Acest text are spatiile de sus și de jos de cate 0.5cm și spatiile din dreapta și din
stânga de cate 3cm.</p>
</body></html>
Exemplul 2: Ilustrează cum se stabilește spațiul din stânga pentru un paragraf.

<html><head>
p.padding{
padding-left:2cm;
}
p.padding2{
padding-left:50%;
}
</style>
</head>
<body>
106
<p>Acest text nu are spatiul din stânga definit.</p>
<p class="padding">Acest paragraf are spatiul din stânga de 2cm.</p>
<p class="padding2">Acest paragraf are spatiul din stânga de 50%.</p>
</body></html>
Exemplul 3: Ilustrează cum se stabilește spațiul din dreapta pentru un paragraf.

<html><head>
p.padding{
padding-right:2cm;
}
p.padding2{
padding-right:50%;
}
</style>
</head>
<body>
<p>Acesta este un text care nu are definit spatiul din dreapta. Acesta este un text care nu are definit
spatiul din dreapta. Acesta este un text care nu are definit spatiul din dreapta.</p>
<p class="padding">Acest text are spatiul din dreapta de 2cm. Acest text are spatiul din dreapta de
2cm. Acest text are spatiul din dreapta de 2cm.</p>
<p class="padding2">Acest text are spatiul din dreapta de 50%. Acest text are spatiul din dreapta de
50%. Acest text are spatiul din dreapta de 50%.</p>
</body></html>
Exemplul 4: Ilustrează cum se stabilește spațiul de sus pentru un paragraf.

<html>
<head>
p.padding{
padding-top:2cm;
}
p.padding2{
padding-top:50%;
}
</style>
</head>
<body>
<p>Acest text nu are spatiul de sus definit. Acest text nu are spatiul de sus definit. Acest text nu are
spatiul de sus definit. Acest text nu are spatiul de sus definit.</p>
<p class="padding">Acest text are spatiul de sus de 2cm. Acest text are spatiul de sus de 2 cm. Acest
text are spatiul de sus de 2 cm. Acest text are spatiul de sus de 2 cm. </p>
107
<p class="padding2">Acest text are spatiul de sus de 25%. Acest text are spatiul de sus de 25%.
Acest text are spatiul de sus de 25%. Acest text are spatiul de sus de 25%.</p>
</body>
</html>
Exemplul 5: Ilustrează cum se stabilește spațiul de jos pentru un paragraf.

<html><head>
p.padding{
border:1px solid #ccc;
padding-bottom:2cm;
}
p.padding2{
padding-bottom:50%;
}
</style>
</head>
<body>
<p>Acest text nu are spatiul de jos definit. Acest text nu are spatiul de jos definit. Acest text nu are
spatiul de jos definit. Acest text nu are spatiul de jos definit.</p>
<p class="padding">Acest text are spatiul de jos de 2cm. Acest text are spatiul de jos de 2 cm. Acest
text are spatiul de jos de 2 cm. Acest text are spatiul de jos de 2 cm.</p>
<p class="padding2">Acest text are spatiul de jos de 25%. Acest text are spatiul de jos de 25%. Acest
text are spatiul de jos de 25%. Acest text are spatiul de jos de 25%.</p>
<p>Acest text nu are spatiul de jos definit. Acest text nu are spatiul de jos definit. Acest text nu are
spatiul de jos definit. Acest text nu are spatiul de jos definit.</p>
</body></html>
Toate proprietățile CSS pentru padding

padding-top
Proprietatea scurtă pentru a stabili toate padding-right
padding
spațiile cu o singură declarație padding-bottom
padding-left
length
padding-bottom Stabilește spațiul de jos
%
length
padding-left Stabilește spațiul din stânga
%
length
padding-right Stabilește spațiul din dreapta
%
length
padding-top Stabilește spațiul de sus
%
108
2.13. Gruparea și imbricarea selectorilor
Gruparea selectorilor
În foile de stil se regăsesc deseori elemente care au același stil. Exemplu:
h1{
color:green;
}
h2{
color:green;
}
p{
color:green;
}
Pentru a micșora codul, puteți grupa selectorii într-o listă în care selectorii sunt separați prin virgulă. În
exemplul următor, selectorii de mai sus au fost grupați:
<html><head>
h1,h2,p{
color:green;
}
</style>
</head>
<body>
<h1>Un titlu!</h1>
<h2>Un titlu mai mic!</h2>
<p>Un paragraf oarecare.</p>
</body></html>
Imbricarea selectorilor
Este posibil să aplicați un stil unui selector aflat în interiorul unui alt selector. În exemplul următor, este
precizat un stil pentru toate elementele p, și un alt stil pentru elementele p aflate în clasa "marked":
<html><head>
p{
color:blue;
text-align:center;
}
.marked{
background-color:blue;
}
.marked p{
color:white;
}
109
</style>
</head>
<body>
<p>Acest paragraf are culoarea albastra și este aliniat la centru.</p>
<div class="marked">
<p>Acest paragraf din clasa marked trebuie să aiba culoarea alba.</p>
</div>
<p>Paragrafele declarate în clasa "marked" păstrează stilul de aliniere, dar textul are o culoare
diferita.</p>
</body></html>
2.14. Setarea dimensiunilor unui element

Dimensiunile unui element pot fi setate cu proprietățile height și width.
Exemple:
Exemplul 1: Ilustrează cum se pot stabili dimensiunile unui element.
<html>
<head>
img.normal {height:auto;}
img.big {height:150px;}
p.ex{
height:100px;
width:100px;
}
</style>
</head>
<body>
<img class="normal" src="logo.gif" width="95" height="69" /><br />
<img class="big" src="logo.gif" width="95" height="69" />
<p class="ex">Înălțimea și lățimea acestui paragraf sunt de 100px.</p>

<p>Un text într-un paragraf. Un text într-un paragraf. Un text într-un paragraf.
Un text într-un paragraf. Un text într-un paragraf. Un text într-un paragraf.
Un text într-un paragraf.</p>
</body></html>
Exemplul 2: Ilustrează cum se setează înălțimea unui element folosind o valoare procentuală.
<html><head>
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
</style>
</head>
110
<body>
<img class="normal" src="logo.gif" width="95" height="69" /><br />
<img class="big" src="logo.gif" width="95" height="69" /><br />
<img class="small" src="logo.gif" width="95" height="69" />
</body></html>
Exemplul 3: Ilustrează cum se setează lățimea unui element folosind o valoare în pixeli.
<html><head>
img{
width: 200px;
}
</style>
</head>
<body>
<img src="logo.gif" width="95" height="84" />
</body></html>
Exemplul 4: Ilustrează cum se setează înălțimea maximă a unui element.

<html><head>
p.ex{
max-height:100px;
background-color:cyan;
}
</style>
</head>
<body>
<p class="ex">
Înălțimea maxima a acestui paragraf este setata la 100px.
Înălțimea maxima a acestui paragraf este setata la 100px.
</p>
<p>
Un alt paragraf. Un alt paragraf. Un alt paragraf.
Un alt paragraf. Un alt paragraf. Un alt paragraf.
</p>
</body></html>
Exemplul 5: Ilustrează cum se setează lățimea maximă a unui element folosind o valoare procentuală.
Textul va ocupa 50% din lățimea ferestrei browserului, chiar dacă redimensionați fereastra.
<html><head>
p{
max-width: 50%;
}
111
</style>
</head>
<body>
<p>
</p>
</body>
</html>
Exemplul 6: Ilustrează cum se setează înălțimea minimă a unui element.

<html><head>
p.ex{
min-height:100px;
}
</style>
</head>
<body>
<p class="ex">
Înălțimea minima a cestui paragraf este setata la 100px.
</p>
<p>
Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf. </p></body></html>
Exemplul 7: Ilustrează cum se setează lățimea minimă a unui element folosind o valoare în pixeli.
<html><head>
p.ex{
min-width:50px;
}
</style>
</head>
<body>
<p class="ex">
Lățimea minima a acestui paragraf este setata la 50px.
</p>
<p>
Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf.
Un alt paragraf. Un alt paragraf. Un alt paragraf. Un alt paragraf.
</p>
</body></html>
112
Toate proprietățile CSS pentru dimensiuni:
auto
height Stabilește înălțimea unui element length
%
none
max-height Stabilește înălțimea maximă a unui element length
%
none
max-width Stabilește lățimea maximă a unui element length
%
length
min-height Stabilește înălțimea minimă a unui element
%
length
min-width Stabilește lățimea minimă a uni element
%
auto
width Stabilește lățimea unui element length
%
2.15. Proprietățile display și visibility

Proprietatea display specifică dacă/cum este afișat un element, iar proprietatea visibility specifică dacă
elementul este vizibil sau ascuns.
Ascunderea unui element
Se poate realiza setând proprietatea display la valoarea none sau proprietatea visibility la valoarea
hidden. Cele două metode produc rezultate diferite. Proprietatea visibility:hidden ascunde elementul, dar
el va ocupa același spațiu în pagină afectând aspectul acesteia:
<html><head>
h1.hidden {visibility:hidden;}
</style>
</head>
<body>
<h1>Acesta este un titlu vizibil</h1>
<h1 class="hidden">Acesta este un titlu ascuns</h1>
<p>Observati ca titlul ascuns ocupa spatiu în pagina.</p>
</body></html>
Proprietatea display:none ascunde elementul astfel încât acesta nu va mai ocupa spațiu în pagină.
<html><head>
h1.hidden {display:none;}
</style>
113
</head>
<body>
<h1> Acesta este un titlu vizibil </h1>
<h1 class="hidden"> Acesta este un titlu ascuns </h1>
<p> Observati ca titlul ascuns nu ocupa spatiu în pagina.</p>
</body></html>
Afișarea elementelor bloc și a elementelor inline

Un element bloc ocupă întreaga lățime disponibilă în pagină și are o întrerupere de linie înainte și după el.
Exemple de elemente bloc:
 <h1>
 <p>
 <div>
 <li>
 ...
Un element inline ocupă numai lățimea necesară și nu forțează întreruperile de linie.
Exemple de elemente inline:
 <span>
 <a>
Schimbarea modului de afișare a unui element

Schimbarea unui element inline într-un element bloc, și reciproc, poate fi utilă pentru a face pagina să
arate într-un anumit fel, respectând standardele web. Exemplul următor afișează o listă de link-uri ca
elemente inline, creând un meniu orizontal:
<html><head>
li{display:inline;}
</style>
</head>
<body>
<p>Lista de linkuri este afisata ca un meniu orizontal:</p>
<ul>
<li><a href="http:www.yahoo.com" target="_blank">Yahoo</a></li>
<li><a href="http:www.google.com" target="_blank">Google</a></li>
</ul>
</body></html>
Exemplul următor afișează elementele span ca elemente bloc:

<html> <head>
span{
display:block;
}
</style>
</head>
<body>
114
<h2>Nirvana</h2>
<span>Record: MTV Unplugged în New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>
</body></html>
Observație: Schimbând modul de afișare a unui element, nu schimbăm și tipul acestuia. De exemplu,
un element inline cu proprietatea display:block nu poate avea un element bloc în interiorul lui.
Exemple:
Exemplul 1: Ilustrează cum se afișează un element bloc ca element inline.
<html><head>
p {display:inline;}
</style>
</head>
<body>
<p>Deoarece proprietatea display a elementului p a fost setata la inline</p>
<p>intre aceste doua paragrafe nu mai există intreruperile de linie.</p>
</body></html>
Exemplul 2: Ilustrează cum se afișează un element inline ca element bloc.

<html><head>
span{
display:block;
}
</style>
</head>
<body>
<span>Deoarece proprietatea display a elementului span a fost setata la block</span>
<span>intre aceste doua elemente există o intrerupere de linie.</span>
</body></html>
Exemplul 3: Ilustrează cum se poate elimina o linie dintr-un tabel.

<html><head>
tr.collapse {visibility:collapse}
</style>
</head>
<body>
<p><b>Tabelul normal</p>
<table border="1">
115
<tr>
<td>Ion</td>
<td>Ion</td>
</tr>
<tr>
<td>Ion</td>
<td>Ana</td>
</tr>
</table>
<p>Tabelul cu a doua linie setata la collapse.</p>
<table border="1">
<tr>
<td>Ion</td>
<td>Ion</td>
</tr>
<tr class="collapse">>
<td>Ion</td>
<td>Ana</td>
</tr>
</table>
<p><b>Nota:</b> Internet Explorer nu recunoaste valoarea "collapse".</p>
</body>
</html>
2.16. Poziționarea unui element

Proprietatea position vă permite să stabiliți poziția unui element în pagina web. Elementele pot fi
poziționate utilizând proprietățile top, bottom, left, și right, dar ele nu vor funcționa dacă nu setați mai
întâi proprietatea position. De asemenea, cele patru proprietăți lucrează diferit, în funcție de metoda de
poziționare. Sunt patru metode diferite de poziționare a unui element.
Poziționarea statică
Este modul implicit de poziționare a elementelor HTML. Un element poziționat static respectă
întotdeauna fluxul normal al paginii web. Elementele poziționate static nu sunt afectate de proprietățile
top, bottom, left, și right.
Poziționarea fixă
Un element cu poziționare fixă este poziționat relativ la fereastra browserului și nu se va deplasa chiar
dacă fereastra este derulată.
Exemplu:
<html>
<head>
p.pos_fixed{
color:red;
116
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="pos_fixed">Un text cu pozitia fixa</p>
<p><b>Note:</b>Internet Explorer accepta pozitionarea fixa numai dacă există declaratia
!DOCTYPE.</p>
<p>Un text normal</p><p>Un text normal</p><p>Un text normal</p><p>Un text
normal</p><p>Un text normal</p>
</body></html>
Elementele cu poziția fixă sunt înlăturate din fluxul normal al documentului. Documentul și alte elemente
se comportă ca și cum elementele cu poziția fixă nu ar exista. Elementele cu poziția fixă se pot suprapune
peste alte elemente.
Poziționarea relativă
Un element cu poziționare relativă este poziționat relativ la poziția lui normală în document.
Exemplu:
<html><head>
h2.pos_left{
position:relative;
left:-30px;
}
h2.pos_right{
position:relative;
left:30px;
}
</style>
</head>
<body>
<h2>Acest titlu are pozitionarea statica (implicita)</h2>
<h2 class="pos_left">Acest titlu este deplasat la stânga cu 30px fata de pozitia lui normala</h2>
<h2 class="pos_right">Acest titlu este deplasat la dreapta cu 30px fata de pozitia lui normala</h2>
</body></html>
Conținutul unui element poziționat relativ poate fi mutat și suprapus peste alte elemente, dar spațiul
rezervat elementului este păstrat în document.
117
Exemplu:
<html><head>
h2.pos_top{
position:relative;
top:-40px;
}
</style>
</head>
<body>
<h2>Acest titlu are pozitia implicita</h2>
<h2 class="pos_top">Acest titlu este mutat în sus cu 40px fata de pozitia lui normala</h2>
</body></html>
Elementele poziționate relativ sunt folosite frecvent ca blocuri container pentru elementele cu poziționare
absolută.
Poziționarea absolută
Pozitionarea absolută este o poziționare destul de des folosită. O poziționare absolută înseamnă
poziționarea elementului relativ la elementul parinte la care deja s-a definit o poziționare. Dacă
elementul părinte nu a fost poziționat, adică are o poziționare statică, atunci elementul părinte este
considerat tagul <html>, adică pagina în sine.
Atentie! – ca să funcționeze corect poziționarea absolută, elementul părinte trebuie să aibă proprietatea
de poziționare definită, și nu are voie să fie poziționată static.
Exemplu:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div style="position:relative; margin-bottom:80px;">
<p style="position:absolute;left:60px; background-color:#000000;color:#FFFFFF;">
Acest paragraf a fost pozitionat cu pozitionare absoluta la 60 de pixeli de la partea stânga a
elementului parinte care este un div pozitionat relativ.
</p>
</div>
</body>
</html>
118
Un element cu poziționarea absolută poate fi plasat oriunde în pagină. Aceste elemente sunt îndepărtate
din fluxul normal și documentul se comportă ca și cum nu ar exista. Elementele cu poziționare absolută se
pot suprapune peste alte elemente.
Suprapunerea elementelor
Când elementele sunt poziționate în afara fluxului normal al documentului, ele pot acoperi alte elemente.
Proprietatea z-index specifică ordinea elementelor suprapuse: care element va fi plasat în fața sau în
spatele celorlalte elemente. Ordinea în listă poate fi pozitivă sau negativă.
<html><head>
img{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>Acesta este un titlu pozitionat static</h1>
<p>Deoarece imaginea are proprietatea z-index egala cu -1, va fi afisata în spatele textului.</p>
</body></html>
Un element cu indexul mai mare va fi plasat întotdeauna în fața elementului cu indexul mai mic.
Exemple
Exemplul 1: Ilustrează cum se stabilește forma unui element. Imaginea din exemplul următorul este
prinsă în forma dorită (cu proprietatea clip) și afișată.
<html><head>
img {
position:absolute;
clip:rect(0px,80px,200px,0px);
}
</style>
</head>
<body>
<img src="roses.gif" width="100" height="140" />
<hr/>
</body></html>
Exemplul 2: Ilustrează cum se folosește proprietatea overflow pentru a crea o bară de derulare atunci când
conținutul elementului este prea mare pentru zona specificată.
<html><head>
119
div.scroll{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}
div.hidden{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
</style>
</head>
<body>
<p>
Folositi proprietatea overflow atunci când conținutul elementului depaseste marimea zonei rezervate.
</p>
<p><b>overflow:scroll</b></p>
<div class="scroll">
Folositi proprietatea overflow pentru a controla mai bine aspectul documentului.Valoarea implicita
este visible.
</div>
<p><b>overflow:hidden</b></p>
<div class="hidden">
Folositi proprietatea overflow pentru a controla mai bine aspectul documentului.Valoarea implicita
este visible.
</div>
</body></html>
Exemplul 3: Ilustrează cum poate fi setat browserul astfel încât să gestioneze în mod automat depășirea
spațiului rezevat de către conținutul unui element.
<html><head>
div{
background-color:#00FFFF;
width:150px;
height:120px;
overflow:auto;
}
</style>
</head>
<body>
<p>
Proprietatea overflow are valoarea auto și detectează dacă conținutul elementului depaseste zona
120
rezervată și este necesara bara de derulare.
</p>
<div>
Puteti folosi proprietatea overflow pentru a controla mai bine aspectul documentului. Valorile
posibile sunt: visible, hidden, scroll, inherit. Valoarea implicita este visible.
</div>
</body></html>
Exemplul 4: Ilustrează cum se poate modifica tipul cursorului.

<html><body>
<p>Plimbati mouse-ul peste cuvintele din lista pentru a-l modifica.</p>
<span style="cursor:auto">auto</span>
<span style="cursor:crosshair">crosshair</span>
<span style="cursor:default">default</span>
<span style="cursor:e-resize">e-resize</span>
<span style="cursor:help">help</span>
<span style="cursor:move">move</span>
<span style="cursor:n-resize">n-resize</span>
1 <span style="cursor:ne-resize">ne-resize</span>
<span style="cursor:nw-resize">nw-resize</span>
<span style="cursor:pointer">pointer</span>
<span style="cursor:progress">progress</span>
<span style="cursor:s-resize">s-resize</span>
<span style="cursor:se-resize">se-resize</span>
<span style="cursor:sw-resize">sw-resize</span>
<span style="cursor:text">text</span>
<span style="cursor:w-resize">w-resize</span>
<span style="cursor:wait">wait</span>
</body></html>
Toate proprietățile CSS pentru poziționarea unui element

auto
bottom Stabilește marginea de jos pentru o casetă poziționată length
%
shape
clip Fixează într-o formă un element poziționat absolut
auto
url
auto
crosshair
cursor Specifică tipul cursorului default
pointer
move
e-resize
121
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
auto
Stabilește marginea din stânga pentru o casetă
left length
poziționată
%
auto
Stabilește ce se întâmplă dacă conținutul elementului hidden
overflow
depășește zona rezervată scroll
visible
absolute
fixed
position Specifică tipul de poziționare a elementului
relative
static
auto
Stabilește marginea din dreapta pentru o casetă
right length
poziționată
%
auto
top Stabilește marginea de sus pentru o casetă poziționată length
%
number
z-index Stabilește ordinea de afișare a unui element suprapus
auto
2.17. Deplasarea elementelor

2.17.1. Proprietatea float
Cu proprietatea CSS float, un element poate fi împins către dreapta sau către stânga, permițând celorlalte
elemente să se organizeze în jurul lui. Proprietatea este folosită frecvent pentru imagini, dar este foarte
utilă și când lucrați cu aspectul paginii (layouts).
Cum sunt deplasate elementele

Elementele se deplasează numai orizontal, către stânga sau către dreapta. Un element deplasabil va împins
spre dreapta sau spre stânga cât de mult se poate. Asta înseamnă că elementele care urmează elementului
deplasabil se vor aranja în jurul lui. Elementele dinaintea elementului deplasabil nu vor fi afectate. Dacă o
122
imagine este deplasată spre dreapta, textul care urmează se va aranja în jurul imaginii ca în exemplul
următor:
<html><head>
img{
float:right;
}
</style>
</head>
<body>
<p>În paragraful urmator este o imagine cu proprietatea style setata la <b>float:right</b>. Ca
urmare, imaginea se va deplasa în paragraf spre dreapta.</p>
<p>
Un text. Un text. Un text. Un text. Un text. Un text.
</p>
</body></html>
Observație: Micșorați fereastra browserului pentru a observa aranjarea textului în jurul imaginii.
Mutarea elementelor unele lângă altele

Dacă plasați mai multe imagini deplasabile una după alta, ele se vor deplasa una lângă cealaltă, cât timp
există spațiu suficient. În exemplul următor este construită o galerie de imagini folosind proprietatea float:
<html><head>
.thumbnail{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>
<body>
<h3>Galerie de imagini</h3>
<p>Micsorati fereastra browserului pentru a vedea ce se intampla cu imaginile când nu mai au spatiu
suficient.</p>
<img class="thumbnail" src="roses.gif" width="107" height="90">
</body></html>
123
2.17.2. Proprietatea clear
Elementele de după un element deplasabil se vor organiza în jurul lui. Pentru a împiedica acest lucru,
folosiți proprietatea clear. Această proprietate specifică care laturi nu sunt permise pentru deplasare. În
exemplul următor a fost adăugată o linie de text în galeria de imagini, folosind proprietatea clear:
<html><head>
.thumbnail{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line{
clear:both;
margin-bottom:2px;
}
</style>
</head>
<body>
<h3>Galerie de imagini</h3>
<p>Micsorati fereastra browserului pentru a vedea ce se intampla cu imaginile când nu mai au spatiu
suficient.</p>
<img class="thumbnail" src=" roses.gif" width="107" height="80">
<img class="thumbnail" src=" roses.gif " width="116" height="90">
<h3 class="text_line">A doua linie</h3>
<img class="thumbnail" src=" roses.gif" width="107" height="80">
</body></html>
Exemple:
Exemplul 1: Ilustrează cum se deplasează o imagine la dreapta unui paragraf. Imaginea are bordură și
margini.
<html><head>
img{
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}
</style>
</head>
124
<body>
<p>
Imaginea din paragraful urmator se va deplasa spre dreapta.Imaginea are un chenar negru
punctat.Imaginea are și margini pentru a tine textul la distanta fata de imagine:0px deasupra și în
partea dreapta a imaginii, 15px sub imagine și 20px în partea stânga a imaginii.
</p>
<p>
</p>
</body></html>
Exemplul 2: Ilustrează utilizarea unei imagini cu un titlu care se deplasează spre dreapta.
<html><head>
div{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
text-align:center;
}
</style>
</head>
<body>
<div>
<img src="logo.gif" width="95" height="84" /><br />
CSS este distractiv!
</div>
<p>
</p>
<p>
În acest exemplu, elementul div are 120 pixeli lățime și conține imaginea.Elementul div se va deplasa
spre dreapta. Au fost adaugate margini pentru a indeparta textul de element.Elementul are chenar și
padding pentru a incadra imaginea și titlul.
</p>
</body></html>
125
Exemplul 3: În acest exemplu, prima literă din paragraf este stilizată și deplasată spre stânga.
<html><head>
span{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
</head>
<body>
<p>
<span>A</span>cesta este un text.
</p>
<p>
În paragraful de mai sus, prima litera este inclusa într-un element span. Elementul are lățimea de 0.7
din marimea fontului curent.Dimensiunea fontului pentru elementul span este de 400% și înălțimea
liniei este de 80%. Fontul literei din span este "Algerian".
</p>
</body></html>
Exemplul 4: Ilustrează cum se folosește float cu o listă de link-uri pentru a crea un meniu orizontal.
<html><head>
<base target="_blank"/>
ul{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a{
float:left;
width:6em;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
126
a:hover {background-color:#ff3300;}
li {display:inline;}
</style>
</head>
<body>
<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
</ul>
<p>
În acest exemplu elementele ul și a se deplaseaza spre stânga cu proprietatea float. Elementele li vor
fi afisate unul dupa altul pe aceeasi linie. În acest fel lista de link-uri devine un meniu
orizontal.Elementul ul are lățimea de 100% și fiecare link din lista are lățimea de 6em (de 6 ori
marimea fontului curent).Au fost adugate culori și chenare pentru a imbunatati aspectul listei.
</p>
</body></html>
Exemplul 5: Ilustrează crearea unei pagini web (homepage) cu antet, subsol, conținut stâng și conținut
principal utilizând proprietatea float.
<html><head>
div.container{
width:100%;
margin:0px;
line-height:150%;
}
div.header,div.footer{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header{
padding:0;
margin:0;
}
div.left{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content{
margin-left:190px;
border-left:1px solid gray;
127
padding:1em;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1 class="header">Web Data</h1>
</div>
<div class="left">
<p>"Niciodata nu mariti, mai mult decat este necesar, numărul notiunilor necesare pentru a explica
ceva." William of Ockham (1285-1349)</p>
</div>
<div class="content">
<h2>Programare web</h2>
<p>În acest site veti gasi informatiile necesare pentru programarea web.</p>
<p>Fiti competitivi!</p>
</div>
<div class="footer">
Copyright
</div>
</div>
</body></html>
Toate proprietățile CSS pentru deplasarea elementelor

Property Description Values
left
Specifică pe care laturi ale elementului nu se pot deplasa right
clear
elementele vecine both
none
left
float Specifică dacă un element este sau nu deplasabil right
none
2.18. Alinierea elementelor

Alinierea elementelor bloc
Un element bloc este un element care ocupă toată lățimea disponibilă și are o întrerupere de linie înainte și
după el. Exemple de elemente bloc:
 <h1>
 <p>
 <div>
Pentru alinierea textului vedeți capitolul corespunzător din această lecție. În acestă temă va fi prezentată
alinierea orizontală a elementelor bloc pentru îmbunătățirea aspectului paginii.
128
Alinierea la centru folosind proprietatea margin
Elementele bloc pot fi aliniate setând marginea stângă și cea dreaptă la "auto".
Observație: Proprietatea margin:auto funcționează în Internet Explorer numai dacă includeți

declarația !DOCTYPE.
Specificând marginile laterale ca auto, spațiul disponibil va fi împărțit în mod egal rezultând un element
aliniat la centru.
Exemplu:
<html><head>
.center{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="center">
<p>"Judecam oamenii nu numai prin ceea ce ei gandesc și nici macar prin sentimentele care ii
domina, ci prin interferentele cu viata noastra, pe care soarta i-a silit să le traiasca."</p>
<p>Marin Preda - "Cel mai iubit dintre pamanteni"</p>
</div>
</body></html>
Observație: Alinierea nu are efect dacă width este 100%.
Alinierea la stânga și la dreapta folosind proprietatea position

Puteți alinia elementele folosind poziționarea absolută ca în exemplul următor:
<html><head>
.right{
position:absolute;
right:0px;
width:300px;
}
</style>
</head>
<body>
<div class="right">
129
</div>
</body></html>
Alinierea la stânga și la dreapta folosind proprietatea float

Exemplu:
<html><head>
.right{
float:right;
width:300px;
}
</style>
</head>
<body>
<div class="right">
</div>
</body></html>
Observație: Când aliniați astfel de elemente cu float sau position, este indicat să definiți elementele
margin și padding pentru elementul <body>. În acest fel nu vor apărea diferențe vizibile între
browsere.
2.19. Pseudo-clasele CSS

Pseudo-clasele CSS sunt folosite pentru a adăuga efecte speciale unor selectori.
Sintaxa
Sintaxa pentru pseudo-clase este:
selector:nume-pseudo-clasa {property:value}
Pseudo-clasele pot fi utilizate împreună cu clasele CSS:
selector.class:pseudo-clasa {property:value}
Pseudo-clase pentru link-uri
Linkurile pot fi afișate în diferite moduri în browserele care suportă CSS:
<html><head>
a:link {color:#FF0000;} /* link nevizitat */
a:visited {color:#00FF00;} /* link vizitat */
a:hover {color:#FF00FF;} /* mouse peste link */
a:active {color:#0000FF;} /* link selectat */
</style>
130
</head>
<body>
<p><b><a href="mypage.htm" target="_blank">Acesta este un link</a></b></p>
</body></html>
Observație: Numele unei pseudo-clase nu este case-sensitive.
Pseudo-clasele pot fi combinate cu clasele CSS:

a.red:visited {color:#FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
Dacă link-ul din acest exemplu a fost vizitat, el va fi afișat cu culoarea roșie.
Pseudo-clasa: first-child
Această pseudo-clasă se aplică unui element care este primul descendent (child) al unui alt element.
Observație: Pseudo-clasa: first-child funcționează în IE numai dacă declarația <!DOCTYPE> este

inclusă în document.
Selectarea primului element <p>

În exemplul următor, selectorul se aplică oricărui element <p> care este primul descendent al unui alt
element:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
p:first-child{
color:blue;
}
</style>
</head>
<body>
<p>Acest paragraf este primul descendent al elementului body și va fi stilizat.</p>
<p>Acest paragraf este al doilea descendent al elementului body și nu este stilizat.</p>
</body></html>
Selectarea primului element <i> din toate elementele <p>

Exemplu:
<html><head>
p > i:first-child{
color:blue;
131
}
</style>
</head>
<body>
<p>Acesta este primul <i>element italic</i> din primul paragraf.
Acesta este al doilea <i>elementitalic</i> din primul paragraf.</p>
<p>Acesta este primul <i>element italic</i> din al doilea paragraf.
Acesta este al doilea <i>element italic</i> din al doilea paragraf.</p>
</body></html>
Selectarea tuturor elementelor <i> din primul element <p> care este descendent al unui alt element
Exemplu:
<html><head>
p:first-child i{
color:blue;
}
</style>
</head>
<body>
<p>Acesta este primul <i>element italic</i> din primul paragraf.
Acesta este al doilea <i>element italic</i> din primul paragraf.</p>
<p>Acesta este primul <i>element italic</i> din al doilea paragraf.
Acesta este al doilea <i>element italic</i> din al doilea paragraf.</p>
</body></html>
Selectarea primului item dintr-o listă

În acest exemplu, selectorul se aplică primelor elemente li din liste:
<html><head>
li:first-child{
color:red;
}
</style>
</head>
<body>
<ul>
<li>Apa</li>
< <li>Ceai</li>
</ul>
<ul>
<li>Cafea</li>
<li>Ceai</li>
</ul>
</body></html>
132
Selectarea primului descendent al tuturor elementelor li dintr-o listă
Exemplu:
<html><head>
li>*:first-child{
color:red;
}
</style>
</head>
<body>
<ul>
<li>Cafea <i>- bautura neagra fierbinte</i></li>
<li>Coca Cola <i>- bautura neagra rece</i></li>
</ul>
<ul>
<li>Cafea <i>- bautura neagra fierbinte</i></li>
<li>Lapte <i>- bautura alba rece</i></li>
</ul>
</body></html>
Pseudo-clasa : lang
Această clasă vă permite să definiți reguli speciale pentru diferite limbi.
Observație: Internet Explorer recunoaște pseudo-clasa: lang numai dacă declarația <!DOCTYPE> este
În exemplul următor, pseudo-clasa : lang definește modul de marcare a citatelor pentru elementele q care
au lang="no":
<html><head>
q:lang(no){
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Un text în paragraf.<q lang="no">Un citat în cadrul paragrafului</q> Un text în paragraf.</p>
</body></html>
Exemple:
Exemplul 1: Ilustrează cum se stabilesc diferite stiluri pentru link-uri.
<html><head>
a.one:link {color: #ff0000;}
133
a.one:visited {color: #0000ff;}
a.one:hover {color: #ffcc00;}
a.two:link {color: #ff0000;}
a.two:visited {color: #0000ff;}
a.two:hover {font-size: 150%;}
a.three:link {color: #ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background: #66ff66;}
a.four:link {color: #ff0000;}
a.four:visited {color: #0000ff;}
a.four:hover {font-family: monospace;}
a.five:link {color: #ff0000; text-decoration: none;}
a.five:visited {color: #0000ff; text-decoration:none;}
a.five:hover {text-decoration: underline;}
</style>
</head>
<body>
<p>Miscati mouse-ul peste link-uri pentru a vedea cum li se schimba aspectul..</p>
<p><b><a class="one" href="http://www.google.com" target="_blank">Acest link isi schimba
culoarea</a></b></p>
<p><b><a class="two" href="http://www.google.com" target="_blank">Acest link isi schimba
dimensiunea fontului</a></b></p>
<p><b><a class="three" href="http://www.google.com" target="_blank">Acest link isi schimba
culoarea de fundal</a></b></p>
<p><b><a class="four" href="http://www.google.com" target="_blank">Acest link isi schimba
familia fontului</a></b></p>
<p><b><a class="five" href="http://www.google.com" target="_blank">Acest link isi schimba
modul de decorare</a></b></p>
</body></html>
Exemplul 2: Ilustrează cum se folosește pseudo-clasa :focus.

<html><head>
input:focus{
}
</style>
</head>
<body>
<form action="form_action.asp" method="get">
Nume: <input type="text" name="nume" /><br />
Prenume: <input type="text" name="pren" /><br />
<input type="submit" value="Trimite" />
</form>
</body></html>
134
Pseudo-clasele CSS
Nume Descriere
:active Adaugă un stil unui element care este activat
Adaugă un stil unui element care este primul
:first-child
descendent al unui alt element
Adaugă un stil unui element care este focusat pentru
:focus
intrare de la tastatură
Adaugă un stil unui element când mouse-ul trece peste
:hover
el
Adaugă un stil unui element care are un anumit atribut
:lang
lang
:link Adaugă un stil unui link nevizitat
:visited Adaugă un stil unui link vizitat
Pseudo-elementele CSS
Sunt folosite pentru a adăuga efecte speciale unor selectori.
Sintaxă
Sintaxa unui pseudo-element este:
selector:pseudo-element {property:value;}
Pseudo-elementele pot fi folosite împreună cu clasele CSS:
selector.class:pseudo-element {property:value;}
Pseudo-elementul : first-line
Acest pseudo-element este utilizat pentru a adăuga un stil primei linii dintr-un text. În exemplul următor,
stilul se aplică primei linii din elementele p:
<html><head>
p:first-line{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>Prima linie din fiecare paragraf are un stil special, adaugat cu pseudo-elementul :first-line.</p>
<p>Pentru a vedea efectul, redimensionati fereastra browserului astfel incat aceste doua paragrafe
sa fie afisate pe doua sau mai multe linii.</p>
</body></html>
135
Observație: Pseudo-elementul "first-line" poate fi utilizat numai cu elementele bloc.
Pseudo-elementul "first-line" poate avea următoarele proprietăți:

 pentru font
 pentru culoare
 pentru fundal
 spațierea cuvintelor
 spațierea literelor
 decorarea textului
 aliniere verticală
 transformarea textului
 înălțimea liniei
 clear
Pseudo-elementul: first-letter
Acest pseudo-element este utilizat pentru a adăuga un anumit stil primei litere dintr-un text:
<html>
<head>
p:first-letter{
color:#ff0000;
font-size:xx-large;
}
</style>
</head>
<body>
<p>Prima litera din acest paragraf este stilizata cu ajutorul pseudo-elementului :first-letter.
Prima litera din acest paragraf este stilizata cu ajutorul elementului :first-letter.</p>
</body>
</html>
Observație: Pseudo-elementul "first-letter" poate fi utilizat numai cu elementele bloc.
Pseudo-elementul "first-letter" poate avea următoarele proprietăți:

 pentru font
 pentru culoare
 pentru fundal
 pentru margini
 pentru padding
 pentru chenar
 decorarea textului
 aliniere verticală (numai dacă "float" este "none")
 transformarea textului
 înălțimea liniei
136
 float
 clear
Pseudo-elementele și clasele CSS

Pseudo-elementele pot fi combinate cu clasele CSS :
p.articol:first-letter {color:#ff0000;}
<p class="articol">Un paragraph din clasa articol.</p>
Exemplul de mai sus va afișa prima literă din toate paragrafele care fac parte din clasa "articol", în roșu.
Pseudo-elemente multiple
Pseudo-elementele pot fi combinate. În exemplul următor, prima literă din paragraf este roșie cu
dimensiunea fontului xx-large. Restul textului din prima linie este albastru, cu majuscule mici (small-
caps). Restul textului din paragraf are culoarea și dimensiunea fontului implicite:
<html><head>
p:first-letter{
color:#ff0000;
font-size:xx-large;
}
p:first-line{
color:#0000ff;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>
Puteti combina pseudo-elementele :first-letter și :first-line pentru a adauga
efecte speciale primei litere, respectiv primei linii dintr-un text.
</p>
</body></html>
Pseudo-elementul: before
Acest pseudo-element poate fi utilizat pentru a insera un conținut înaintea unui element. În exemplul
următor este inserată o imagine înaintea fiecărui element <h1> din document:
<html><head>
h1:before {content:url(roses.gif);}
</style>
</head>
<body>
<h1>Acesta este un titlu</h1>
<p>Pseudo-elementul :before insereaza un conținut înaintea unui element.</p>
<p><b>Note:</b> Internet Explorer accepta aceasta proprietate numai dacă este specificat
137
!DOCTYPE.</p>
</body></html>
Pseudo-elementul: after
Acest pseudo-element poate fi folosit pentru a insera un conținut după un element. În exemplul următor
este inserată o imagine după fiecare element <h1>:
<html><head>
h1:after {content:url(roses.gif);}
</style>
</head>
<body>
<p>Pseudo-elementul :after insereaza un conținut dupa un element.</p>
<p><b>Note:</b> Internet Explorer accepta aceasta proprietate numai dacă este specificat
!DOCTYPE.</p>
</body></html>
Pseudo-elementele CSS
Nume Descriere
:after Adaugă conținut după un element
:before Adaugă conținut înaintea unui element
:first-letter Adaugă un stil primei litere dintr-un text
:first-line Adaugă un stil primei linii dintr-un text
2.20. Bara de navigare

Este foarte important pentru un site web să aibă un sistem de navigare ușor de folosit. Cu CSS puteți
transforma plictisitoarele meniuri HTML în bare de navigare aspectuoase. O bară de navigare este de fapt
o listă de link-uri. În exemplul vom construi o bară de navigare dintr-o listă HTML standard.
<html><body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>Obs: Pentru a testa link-urile folosim href="#". Într-un site real trebuie să apara adresele URL
reale.</p>
</body></html>
Acum înlăturăm marcatorii, marginile și padding-ul din listă:

<html><head>
138
<style>
ul{
margin:0;
padding:0;
}
</style>
</head>
<body>
<ul>
</ul>
</body></html>
Explicații: Codul din exemplul următor este codul standard utilizat în construirea barelor de navigare
verticale sau orizontale.
- list-style-type:none – înlătură marcatorii; ei nu sunt necesari într-o bară de navigare
- proprietățile margins și padding au valoarea 0 pentru a înlătura setările implicite ale browserului
Bară de navigare verticală

Pentru a construi o bară de navigare verticală, trebuie să stilizăm elementele <a>:
<html><head>
ul{
margin:0;
padding:0;
}
a:link,a:visited{
display:block;
font-weight:bold;
color:#FFFFFF;
width:120px;
text-align:center;
padding:4px;
text-transform:uppercase;
}
a:hover,a:active{
139
}
</style>
</head>
<body>
<ul>
</ul>
</body></html>
Explicații:
- display:block – afișând linkurile ca blocuri, întreaga zonă poate fi acționată cu mouse-ul, nu numai
textul, și se poate specifica lățimea
- width:60px – elementele bloc ocupă toată lățimea disponibilă, de aceea se specifică lățimea dorită
Observație: Specificați întotdeauna lățimea pentru elementele <a> dintr-o bară de navigare verticală,
altfel puteți obține rezultate nedorite în IE.
Bară de navigare orizontală

Putem crea o bară de navigare în două moduri, folosind itemi inline sau float. Amândouă metodele sunt
bune, dar dacă doriți ca linkurile să aibă aceeași dimensiune, trebuie să folosiți itemi de tip float.
Itemi inline
O metodă de a construi o bară de navigare verticală este să declarați elemente <li> din lista de linkuri ca
elemente inline:
<html><head>
ul{
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li{
display:inline;
}
a:link,a:visited{
font-weight:bold;
color:#FFFFFF;
text-align:center;
140
padding:6px;
}
a:hover,a:active{
}
</style>
</head>
<body>
<ul>
</ul>
</body></html>
Explicații:
- display:inline - implicit, elementele <li> sunt elemente bloc. Au fost înlăturate întreruperile de linie
dinaintea și după fiecare element, pentru a fi afișate pe aceeași linie.
- dacă setați padding-ul pentru elementele <li> (și nu pentru <ul>), linkurile se vor deplasa în afara
elementului < ul>. Din acest motiv, a fost specificat padding-ul de sus și de jos pentru elementul ul.
Itemi float
În exemplul anterior, link-urile au lățimi diferite. Pentru ca toate link-urile să aibă aceeași lățime,
elementele <li> trebuie declarate ca float și trebuie specificată lățimea pentru elementele <a>:
<html>
<head>
ul{
margin:0;
padding:0;
overflow:hidden;
}
li{
float:left;
}
a:link,a:visited{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
141
text-align:center;
padding:4px;
}
a:hover,a:active{
}
</style>
</head>
<body>
<ul>
</ul>
</body></html>
Explicații:
- float:left - se folosește float pentru ca elementele bloc să se deplaseze unele lângă celelalte
- display:block - afișând link-urile ca elemente bloc, întreaga zonă (nu numai textul) poate fi acționată
cu mouse-ul și se poate specifica lățimea fiecărei zone
- width:60px - deoarece elementele bloc ocupă întreaga lățime disponibilă, nu se pot deplasa unul
lângă altul. Din acest motiv, se specifică lățimea dorită a link-urilor.
Exemple de meniuri:
Exemplul 1: Meniu orizontal cu trei nivele
Documentul HTML:
<!doctype html>
<html>
<head>
<title>CSS3 Dropdown Menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
142
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Articles</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">User Experience</a></li>
</ul>
</li>
<li><a href="#">Inspiration</a></li>
</ul>
</nav>
</body>
</html>
Documentul CSS:
nav ul ul {
display: none;
}
nav ul li:hover > ul {

display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius:12px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
143
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 20px 45px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 45px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Exemplul 2: Meniu orizontal cu patru nivele

Documentul HTML:
<!doctype html>
<html>
<head>
<title>CSS3 Dropdown Menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
144
<body>
<ul id="nav">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">My Projects</a>
<ul>
<li><a href="#">N.Design Studio</a>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">WordPress Themes</a></li>
<li><a href="#">Wallpapers</a></li>
<li><a href="#">Illustrator Tutorials</a></li>
</ul>
</li>
<li><a href="#">Web Designer Wall</a>
<ul>
<li><a href="#">Design Job Wall</a></li>
</ul>
</li>
<li><a href="#">IconDock</a></li>
<li><a href="#">Best Web Gallery</a></li>
</ul>
</li>
<li><a href="#">Multi-Levels</a>
<ul>
<li><a href="#">Team</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a>
<ul>
</ul>
</li>

</ul>
</li>
<li><a href="#">Sales</a></li>
<li><a href="#">Another Link</a></li>
<li><a href="#">Department</a>
<ul>
</ul>
145
</li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>
Documentul CSS:
body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background: #ebebeb;
width: 900px;
margin: 100px auto;
color: #666;
}
a{
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
background: #7d7d7d url(img/gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);

-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */

#nav a {
font-weight: bold;
146
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);

}
#nav a:hover {
background: #000;
color: #fff;
}
/* main level link hover */

#nav .current a, #nav li:hover > a {
background: #666 url(gradient.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;

box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);

}
/* sub levels link hover */

#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #0078ff url(gradient.png) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);

147
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
/* level 2 list */
#nav ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(img/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners of first and last link */

148
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
2.21. Galerie de imagini

Putem folosi CSS pentru a crea o galerie de imagini, ca în exemplul următor:
<html><head>
div.img{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
149
text-align: center;
}
div.img img{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="roses.htm"><img src="roses.jpg" alt="Roses" width="110" height="90"
/></a>
<div class="desc">Adaugati o descriere a imaginii</div>
</div>
<div class="img">
<a target="_blank" href="roses.htm"><img src="images/roses.jpg" alt="Roses" width="110"
height="90" /></a>
</div>
<div class="img">
height="90" /></a>
</div>
<div class="img">
height="90" /></a>
</div>
</body></html>
Opacitatea/transparența unei imagini

Exemplul 1: Crearea unei imagini transparente cu efect la mișcarea mouse-ului peste imagine:
<html><head>
img{
opacity:0.4;
filter:alpha(opacity=40)
150
}
</style>
</head>
<body>
<h1>Imagini transparente cu efect mouseover</h1>
<img src="roses.jpg" width="150" height="113"
alt="Roses"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
<img src="tulip.jpg" width="150" height="113"
alt="Tulips"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</body></html>
Exemplul 2: Crearea unei casete transparente cu text peste o imagine de fundal:

<html><head>
div.background{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
}
div.transbox{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
div.transbox p{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>
Acesta este un text plasat intr-o caseta transparenta.
151
Acesta este un text plasat intr-o caseta transparenta
</p>
</div>
</div>
</body></html>
În acest exemplu a fost adăugat un atribut onmouseover și un atribut onmouseout. Atributul

onmouseover definește ce se întâmplă când mouse-ul se mișcă peste imagine. În acest exemplu dorim ca
imaginea să nu fie transparentă când mișcăm mouse-ul peste ea. Pentru aceasta, sintaxa în Firefox este:
this.style.opacity=1, iar în IE este: this.filters.alpha.opacity=100.
Când mouse-ul părăsește imaginea, ea va fi din nou transparentă. Acest lucru este realizat cu atributul
onmouseout.
Mai întâi, a fost creat elementul <div> din class="background" cu înălțimea și lățimea fixate, o imagine
de fundal și un chenar. În interiorul acestui element, a fost creat un element <div> mai mic, din
class="transbox". Acest element <div> are înălțimea și lățimea fixate, o culoare de fundal, un chenar și
este transparent. În interiorul elementului <div> transparent a fost creat un element p care conține textul.
Imagini sprite
O imagine sprite este o colecție de imagini asamblate într-o singură imagine. O pagină web care conține
multe imagini are nevoie de mult timp pentru a fi încărcată și generează numeroase cereri către server.
Folosirea imaginilor sprite reduce numărul acestor cereri către server și lățimea de bandă utilizată.
Exemplu:
În loc să folosiți trei imagini separate pentru navigarea în pagina web, folosiți imaginea sprite de mai jos
(„nav_sprite.gif"):
Cu CSS, putem afișa doar porțiunea de imagine pe care o dorim, așa cum ilustrează exemplul următor:
Crearea unei liste de navigare
Vom folosi o listă HTM, deoarece toate elementele pot fi linkuri și suportă o imagine de fundal:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;liststyle:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('nav_sprite.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('nav_sprite.gif') -47px 0;}
#next{left:129px;width:43px;}
152
#next{background:url('nav_sprite.gif') -91px 0;}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body></html>
Explicații:
#navlist{position:relative;} – poziția listei de navigare este relativă pentru a permite poziționarea
absolută în interiorul ei
#navlist li{margin:0;padding:0;liststyle: none;position:absolute;top:0;} – elementele listei au
marginile și padding-ul setate la 0, stilul caracteristic listelor este înlăturat și sunt poziționate absolut
#navlist li, #navlist a{height:44px;display:block;} – înălțimea pentru toate imaginile este setată la
44px
Acum poziționăm și fixăm stilul pentru fiecare porțiune de imagine:
#home{left:0px;width:46px;} – elementul este poziționat la stânga și are lățimea de 46px

#home{background:url(img_navsprites.gif) 0 0;} – se definește imaginea de fundal pentru element și
poziția acestei imagini (left 0px, top 0px)
#prev{left:63px;width:43px;} – elementul listei este poziționat la 63px spre dreapta (#home are 46px
+ 17px spațiu suplimentar între elementele listei), și lățimea este de 43px.
#prev{background:url('img_navsprites.gif') -47px 0;} – defineste imaginea de fundal a acestui
element la 47px spre dreapta (#home are 46px + 1px linia despărțitoare)
#next{left:129px;width:43px;} – elementul este poziționat la 129px spre dreapta (elementul #prev
începe la 63px + lățimea lui#prev de 43px + spațiu suplimentar), și are lățimea de 43px.
#next{background:url('img_navsprites.gif') norepeat -91px 0;} – definește imaginea de fundal a
acestui element la 91px spre dreapta (#home are 46px + 1px linia + #prev are 43px + 1px linia)
Acum vom adăuga un efect listei de navigare, atunci când mouse-ul se mișcă peste ea (hover). Noua
imagine ("nav_sprite_hover.gif") conține trei imagini normale de navigare și trei imagini pentru efect:
Deoarece este o singură imagine și nu șase imagini separate, pagina va fi încărcată rapid. Pentru a obține
acest efect adăugăm doar trei linii de cod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;liststyle:none;position:absolute;top:0;}
153
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('nav_sprite_hover.gif') 0 0;}
#home a:hover{background: url('nav_sprite_hover.gif') 0 -45px;}
#prev{left:63px;width:43px;}
#prev{background:url('nav_sprite_hover.gif') -47px 0;}
#prev a:hover{background: url('nav_sprite_hover.gif') -47px -45px;}
#next{left:129px;width:43px;}
#next{background:url('nav_sprite_hover.gif') -91px 0;}
#next a:hover{background: url('nav_sprite_hover.gif') -91px -45px;}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="home.htm"></a></li>
<li id="prev"><a href="page1.htm"></a></li>
<li id="next"><a href="page2.htm"></a></li>
</ul>
</body></html>
Explicații:
- deoarece itemii listei sunt link-uri, putem folosi pseudo-clasa : hover
- #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;}
– pentru toate cele trei imagini cu efect, precizăm aceeași poziție a fundalului, dar cu 45px mai jos.
Atribute selector
Este posibil să stilizați elementele HTML care au un anumit atribut, nu numai class și id.
Observație: Internet Explorer recunoaște atributele selector numai dacă declarația ! DOCTYPE este
Exemplul 1: Exemplul următor ilustrează cum pot fi stilizate toate elementele care au atributul title:
<html>
<head>
[title]{
color:blue;
}
</style>
</head>
<body>
<h2>Stilul va fi aplicat elementelor:</h2>
<h1 title="Salut">Buna ziua</h1>
<a title="Google" href="http://www.google.com">Google</a>
<hr />
154
<h2>Stilul nu va fi aplicat elementelor:</h2>
<p>Salutare!</p>
</body></html>
Exemplul 2: Ilustrează aplicarea unui stil tuturor elementelor care au atributul title="CSS":
<html>
<head>
[title=CSS]{
border:5px solid green;
}
</style>
</head>
<body>
<img title="CSS" src="logo.gif" width="170" height="50" /> <br />
<a title="CSS" href="http://www.cisco.com/">Cisco</a>
<hr />
<p title="salutari">Buna!</p>
<a class="CSS" href="http://www.cisco.com/">Cisco</a>
</body></html>
Exemplul 3: Ilustrează cum pot fi stilizate toate elementele al căror atribut conține o anumită valoare:
<html><head>
[title~=hello]{
color:blue;
}
</style>
</head>
<body>
<h1 title="hello all">Buna ziua</h1>
<p title="elev hello">Buna ziua elevi!</h1>
<hr />
<p title="elev">Buna ziua elevi!</p>
</body></html>
Exemplul 4: Exemplul următor ilustrează cum se stilizează toate elementele care conțin o anumită valoare
în atributul lang:
<html><head>
[lang|=en]{
color:blue;
155
}
</style>
</head>
<body>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Hello!</p>
<hr />
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>
</body></html>
Exemplul 5: Atributele selector sunt în mod deosebit utile pentru stilizarea formularelor fără atributele
class sau id:
<html><head>
<style>
input[type="text"]{
width:150px;
display:block;
margin-bottom:10px;
}
input[type="button"]{
width:120px;
margin-left:35px;
display:block;
}
</style>
</head>
<body>
<form name="input" action="" method="get">
Nume:<input type="text" name="Nume" value="Scutelnic" size="20">
Prenume:<input type="text" name="Prenume" value="Speranța" size="20">
<input type="button" value="Trimite">
</form>
</body></html>
3. HTML 5
HTML5 este cea mai recentă versiune de HTML, în scopul de a simplifica dezvoltarea de aplicatii web.
Sintaxa HTML5 este mult mai ușoară în comparație cu HTML4, și oferă multe caracteristici noi. Acest
articol oferă o introducere în HTML5.
156
3.1. Utilizare HTML 5
Aplicațiile HTML5 pot fi pornite pentru a rula offline. HTML5 oferă funcția de stocare offline, numit un
cache al cererii pentru stocarea de fișiere. Deci, dacă utilizatorul este offline, browser-ul încă mai are
acces la fișierele necesare. Acesta poate fi HTML, CSS, Javascript, sau orice alte resurse necesare pentru a
vizualiza pagina de web.
Drag and Drop - HTML5 oferă o funcție incorporată Drag and Drop, care permite dezvoltarea de
aplicații interactive. Cu Drag & Drop aveți posibilitatea să mutați orice element în locul potrivit.
Geolocation - Geolocation API în HTML5, permite să partajați locația dvs. cu site-uri de încredere.
Confidențialitatea este importantă în funcția de geolocalizare. Browserele nu au nevoie să trimită
informații despre locație la site-uri Web, fără permisiunea expresă a utilizatorului. De exemplu, dacă un
utilizator accesează o pagină web, în care, de asemenea,este prezentă funcția de geolocalizare folosind
browser-ul Firefox. Browser-ul va cere permisiunea, dacă utilizatorul dorește să împărtășească locația lui.
Dacă utilizatorul consimte, Firefox va aduna informații despre punctele de acces fără fir în apropiere și
adresa IP a computerului vizitatorilor și va trimite aceste informații în Google Location Services, care este
un serviciu de geolocalizare Firefox implicit.
Audio și video - În prezent, există facilități HTML necesare pentru punerea în aplicare a fișierelor
multimedia. De aceea, fișierele media se includ în HTML folosind diferite plugin-uri . De exemplu, Flash
este utilizat pe scară largă pentru a încorpora video și fișiere audio. Cu toate acestea, acest lucru poate fi
foarte ușor de făcut în HTML5 cu ajutorul elementelor audio și video, fără utilizarea de plugin-uri.
Formulare de introducere - HTML5 introduce mai multe elemente noi de intrare, cum ar fi pop-up
calendare, selectoare de culori și multe altele. Cu aceste funcții de intrare se poate crea o forma foarte
eficienta, cu un control mai bun al intrării și verificării.
3.2. Sintaxa simplificată
Doctype: - Declarația DOCTYPE este primul lucru, ce trebuie de făcut într-un document HTML. Ea
indică browser-ui web versiunea limbajui de marcare a paginii.
Exemplu: Versiunea HTML 4.01 Transitional DOCTYPE este definit ca:

Iar versiunea XHTML 1.0 Transitional DOCTYPE este definită ca:
În HTML5, declarația DOCTYPE este mult mai ușoară, și arată astfel:
<!DOCTYPE html>
Codificarea caracterelor:
Pentru a afișa documentul HTML, programul ar trebui să selecteze o codificare. Codificarea caracterelor
indică browser-ului ce set de caractere să utilizeze la conversia biților în caractere.
Exemplu: Codificarea caracterelor UTF-8 în HTML 4.01:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Pentru XHTML:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
157
Sintaxa de codificare a caracterelor este foarte simplă în HTML 5, și anume:
Astfel, cel mai simplu documentul HTML5 ar fi:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Exemplu de document</title>
</head>
<body>
<b>Hello, World</b>
</body></html>
Tag-ul script - Tag-ul script este folosit pentru a defini partea de client, cum ar fi JavaScript. În HTML 4
este necesar de folosit atributul type, dar nu este necesar în HTML5.
De exemplu, în HTML4, tag-ul script este folosit astfel:

<script type="text/javascript" src="/scripts/something.js">
Iar în HTML 5:
<script src="/scripts/something.js">
În tag-ul script în HTML5 este introdus un nou atribut opțional «async», care indică browser-ului să
execute script-ul asincron cu restul paginii, astfel încât script-ul va fi executat până când pagina încă se
încarcă. Acest lucru se scrie astfel:
<script async="async" />
sau
<script src="/scripts/something.js" async="async">
Tag-ul link - defineste o relație dintre documente și resursele externe. Această etichetă este frecvent
utilizată pentru a include fișiere CSS.
De exemplu:
<link rel="stylesheet" href="style.css" />
În HTML5, atributul type este opțional pentru tag-ul link, similar și pentru tag-ul script.
De exemplu:
<link rel="stylesheet" href="style.css" />
3.3. Elemente noi în HTML5

În HTML5 s-au adăugat unele etichete foarte interesante și utile pentru structurarea aspectului și
dezvoltarea mai ușoară. Aici sunt unele dintre cele mai importante tag-uri:
Tag-ul header - Tag-ul header conține titlul paginii web, care este, de obicei, în partea de sus a paginii
care conține logo-ul și alte informații, cum ar fi un slogan, și meniuri, etc. În loc de a folosi:
<div id="header">
puteți scrie pur și simplu
<header>
158
Tag-ul nav - Tag-ul nav este folosit pentru a naviga prin meniu. De exemplu, în loc de
<div id="nav">
aveți posibilitatea să utilizați
<nav>
pentru navigare.
Tag-ul arcticle - Tag-ul arcticle prezintă conținutul independent și separate. Un exemplu de utilizare a
tag-ul poate fi un post pe blog, articol de știri, postare pe forum, comentariul utilizatorului, etc.
Tag-ul section - Tag-ul section este folosit pentru a separa diferite secțiuni ale paginii. Tag-ul grupează
conținutul care, de obicei, vine după antet sau înaintea subsolului. Dacă este necesar, secțiunile pot fi
imbricate între ele.
Tag-ul aside - Tag-ul aside definește o secțiunea de pagină cu conținut care este tangențial legat de
conținutul din jurul lui. Tag-ul poate fi folosit pentru panourile laterale sau orice alt conținut care poate fi
analizat separat de conținutul principal al paginii.
Tag-ul figure - Tag-ul figure este folosit pentru comentarii la ilustrații, diagrame, fotografii, și la listele
de cod, etc.Tag-ul figcaption este utilizat ca titlu pentru tag-ul figure.
Tag-ul footer - Este folosit pentru a reprezenta secțiunea subsol și este, de obicei, situat în partea de jos a
paginii. Footer conține de obicei informații precum numele autorului, privind drepturile de autor, link-uri
către termenii de utilizare și politica de confidențialitate, etc. Informațiile de contact în footer trebuie să
fie scrisă în tag-ul address.
3.4. Elementele exluse
În afară de cele noi, există unele elemente care nu mai sunt acceptate în HTML5. Aici sunt unele dintre
elementele șterse:
<frameset>
<frame>
<noframes>
După cum a-ți văzut, elemente cum ar fi cadrele - frame, frameset și noframes au fost eliminate din
HTML5.
Tag-ul Font - Elementul font se utiliza pentru a determina fontul, dimensiunea și culoarea textului.
Tag-ul strike - Elementul strike a fost necesar pentru a determina textul tăiat cu o linie. În schimb,
utilizați acum <del>
Tag-urile u, center, big, applet și acroniym

Eticheta
<u></u>
utilizată pentru a determina textul subliniat.
<center></center>
ajustă textul și conținutul în centru.
<big></big>
159
folosit pentru a mari textul.
<applet></applet>
utilizată pentru a determina applet-ul încorporat. HTML5 suportă tag-ul object în loc.
<acronym></acronym>
Exemplu, de cod complet pentru o pagină simplă în HTML5:
<!doctype html><html><head>
<meta charset="utf-8" />
<title> Cursuri și Tutoriale</title>
<meta name="description" content="Examplu document în HTML5, template, cursuri și tutoriale" />
<meta name="keywords" content="html5, tutoriale html5, cursuri" />

</head>
<body>
<header id="page_header">
<h1>Web Development Cursuri și Tutoriale</h1>
<nav>
<ul>
<li><a href="edugal.ro/" title="Principala">Home</a></li>
<li><a href="edugal.ro/lectii.php" title="Lectii">Lecții</a></li>
<li><a href="edugal.ro/lucrari.php" title="Lucrari">Lucrări</a></li>
<li><a href="edugal.ro/teste.php" title="Teste">Teste</a></li>
<li><a href="edugal.ro/referinte.php" title="Referinte">Referințe</a></li>
<li><a href="edugal.ro/descarca.php" title="Descarca">Descarcă</a></li>
<li><a href="edugal.ro/contacte.php" title="Contacte">Contacte</a></li>
</ul>
</nav>
</header>
<section id="posts">
<header id="posts_header">
<h2>Tutoriale HTML5</h2>
</header>
<article class="post">
<header>
<h3>Învață rapid HTML5</h3>
</header>
<div class="ctext">
Invata despre noile caracteristici din HTML5.<br />
Tag-uri noi, și elemente pentru structura.
</div>
<aside class="post_baner">Aici poate fi un banner</aside>
<p>
160
Noile caracteristici din <b>HTML5</b> sunt bazate pe HTML, CSS, DOM, și JavaScript; și reduc
necesitatea plugin-urilor externe (precum Flash).<br />
Multe alte noi caracteristici HTML5 sunt centrate pe crearea unei mai bune platforme pentru
aplicatiile web, <a href="http://www.w3schools.com/html/html5_intro.asp" title="HTML5">Cititi
mai mult</a> ...
</p>
</article>
<article class="post">
<header>
<h3>Elemente și attribute noi pentru formular în HTML5</h3>
</header>
<div class="ctext">
Formularele HTML sunt folosite în general ca să transfere date adaugate de utilizator la un script de
pe server sau JavaScript, ca să fie procesate de un limbaj de programare.
</div>
<p>
HTML5 adauga mai multe tipuri de casute input noi, pentru formular (datetime, datetime-local, date,
month, week, time, number, range, email, url, search, and color), <a
href="edugal.ro/lectii.php"title="Elemente de formular noi">Cititi mai mult</a> ...
</p>
</article>
<footer id="post_footer">
<p>Mai multe lectii și tutoriale HTML: <a href="http://www.w3schools.com" title="Lectii și
tutoriale">Lectii și tutoriale</a>.</p>
</footer>
</section>
<section id="sidebar">
<nav>
<ul>
<li><a href="edugal.ro/lectii_view.php?id=1" title="Initiere în HTML">Initiere în HTML</a></li>
<li><a href="edugal.ro/lectii_view.php?id=2" title="Stiluri CSS">Stiluri CSS</a></li>
<li><a href="edugal.ro/lectii_view.php?id=6" title="Initiere în PHP">Initiere în PHP</a></li>
<li><a href="edugal.ro/lectii_view.php?id=4" title="Macromedia Dreamweaver">Macromedia
Dreamweaver</a></li>
</ul>
</nav>
<aside class="sidebar_baner">Banner în sidebar</aside>
</section>
<footer id="page_footer">
<p>De la: <a href="edugal.ro/" title="Lectii WEB">edugal.ro/</a></p>
</footer>
</body></html>
Cod CSS, în fișierul style.css:

body {
width: 99%;
161
margin: 2px auto;
font-family: Arial, "MS Trebuchet", sans-serif;
text-align: center;
}
header, footer, section, aside, nav, article { display: block; }
header#page_header {
width: 100%;
margin: 4px auto;
border: 2px solid blue;
}
header#page_header nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#page_header nav ul li {
display:inline;
margin: 0 20px 0 0;
padding: 1px;
}
section#posts {
float: right;
width: 79%;
background-color: #f1f2fe;
border: 1px solid yellow;
}
section#posts header#posts_header {
background-color: #abcdef;
border: 1px solid green;
}
article.post {
margin:10px;
background-color: yellow;
text-align: left;
}
article.post aside {
float: right;
margin-top: -58px;
width: 250px;
height: 120px;
background-color: #fefefe;
}
article.post p { clear: right;}
section#sidebar {
float: left;
162
width: 18%;
background-color: #d7d8fe;
border: 1px solid green;
padding:5px;
}
section#sidebar nav ul {
margin: 3px auto;
text-align: left;
padding: 0 0 0 15;
}
section#sidebar aside {
width: 160px;
height: 250px;
margin: 10px auto;
background-color: #fefefe;
}
footer#page_footer {
clear: both;
width: 100%;
margin: 4px auto;
border: 2px solid blue;
}
3.5. Site-uri responsive

În general, un site web se compune din 6 elemente de bază: Header, Sub-header, Left, Right, Pages
Footer.
Design-ul de
bază
163
Header - ul - Conține numele și sigla companiei care deține site-ul, fotografii, etc. Sub header - Conține
meniul orizontal etc.
Pages - Conține cuprinsul specific fiecărei pagini, restul elementelor rămânând fixe.
Right - Poate conține: Noutăți; Contact; Hartă etc.
Footer - Poate conține: Contor de Trafic; Copyright; Bottom Menu; etc.
În Photoshop putem realiza cu ușurință layout-ul unui site. Pentru a transpune o idee într-un site
complet funcțional, vom mai avea nevoie și de alte programe (de ex Dreamweaver) sau dacă nu,
cunoștințe de html.
Pentru a face butoanele funcționale, dintr-un design, vom secționa layout-ul, folosind Slice Tool.
Cursorul va avea forma unui cuțit. Imediat sub slice tool găsim Slice Select Tool, cu care putem selecta
slice-urile și pe putem redimensiona, redenumi etc.
Începând din colțul din stânga sus, începem să conturăm slice-urile, având grija ca fiecare buton să
fie cuprins într-un singur slice și să nu avem nici o portiune libera. Este de recomandat ca măcar
butoanelor să le dăm un alt nume față de cel care îl dă implicit photoshop-ul. Putem face asta executând
click dreapta pe slice, și selectând Edit Slice Options.
După ce am terminat de "tăiat" layout-ul nostru, mergem la File - Save for Web, și după ce
selectăm toate slice-urile din dreapta alegem calitatea imaginilor, apoi Save și alegem opțiunea Html și
Images (de la Save As Type). În acest mod, photoshop-ul ne crează un fișier index.html incare sunt trecute
toate slice-urile noastre sub forma unui tabel, iar pe lângă acest fișier vom avea un director Images în care
se vom afla toate slice-urile noastre.
Dacă de exemplu lucrăm în Dreamweaver, și vrem ca butonul să aibă două stări diferite, ne
reintoarcem în Photoshop, schimbăm font-ul butoanelor și redenumim slice-urile respective apoi Save for
Web, dar nu mai selectăm opțiunea Html și Images ci doar Images.
Deja de câțiva ani smartphone-urile și tabletele sunt într-o continuă creștere. Un sfârsite al acestei
evoluții este greu de estimat, dimpotrivă, potențialii clienți care folosesc dispozitive mobile pentru a
naviga pe Internet sunt din ce în ce mai mulți, iar aceștia nu mai interacționează doar pe un ecran gigant.
Responsive reprezintă o tehnică care permite unei pagini web sa se ajusteze în mod automat
dispozitivului final (telefon inteligent, tabletă, calculator) al utiliztorului. Cu atât de multe rezoluții
diferite, sisteme de operare noi și un număr infinit de dispozitive, se vor implementa pe lângă Layout-ul
standard de monitor și alte layout-uri care nu vor fi lăsate la voia întâmplării, toatea acestea vor fi incluse
în proiectul receptiv al layout-ului și al programării. Fără “zoom” sau “scroll în dreapta și în stânga” și
nici cu elemente complicate care ar face dificilă funționalitatea paginii. Un concept bine gândit și adaptat
la dispozitivul final.
Web design personalizat, cunoscut sub acronimul englez RWD (Responsive Web Design) este o
filozofie de design și dezvoltare destinată adaptării apariției de pagini web pentru dispozitivul utilizat
pentru vizualizare.
Astăzi paginile web sunt afișate pe mai multe tipuri de dispozitive, cum ar fi tablete, Smartphone-
uri, cărți electronice, calculatoare, și asa mai departe. Mai mult, fiecare dispozitiv are caracteristicile sale
specifice: dimensiunea ecranului, rezoluție, putere CPU, capacitatea de memorie, printre altele. Această
tehnologie își propune ca, deși cu un design unic sa poată fi vizualizată de pe orice dispozitiv.
164
Proiectantul american și autor Ethan Marcotte a creat și furnizat această tehnică printr-o serie de
articole publicate pe A List Apart, o publicație specializată în design și dezvoltare web, pentru ca apoi sa
includă ideea în cartea sa Responsive Web Design.
3.5.1. Sursa RWD
Atât idea cât și rolul responsive web design au fost discutate și descrise în prealabil de World Wide Web
Consortium (W3C) în iulie 2008 în recomandarea sa "Mobile Web Best Practices" având subtitlul "One
Web".
Această recomandare, deși specifica pentru dispozitive mobile, subliniază ca este făcuta în
contextul One Web, și, prin urmare include nu numai experiența de navigare pe dispozitive mobile, ci și
pe dispozitive cu rezoluție a ecranului mai mare cum ar fi desktop-ul.
Conceptul One Web face referire la idea de a realiza un “Web pentru Toți” (Web for All) și
accesibil de pe orice tip de dispozitiv (Web on Everything).
În ziua de azi, varietatea tipurilor de dispozitive existente pe piață a făcut ca informația sa nu fie
accesibilă pe toate tipurile de dispozitive, sau, mai bine spus, este accesibilă, dar navigarea pe acestea este
foarte greoaie.
3.5.2. Avantajele RWD
Utilizarea de dispozitive mobile este în creștere, dispozitivele de genul tabletelor și telefoanelor inteligente
mărindu-și vânzările în ultimii ani și în acest fel, navigarea pe Internet pe astfel de dispozitive a devenit
din ce în ce mai comuna. Acesta este motivul pentru care responsive web design a devenit atât de popular,
deoarece aceasta este o tehnologie ce propune o soluție web ce permite vizualizarea web atât pe un
dispozitiv desktop cât și pe unul mobil.
Cu o singura versiune în HTML și CSS se acoperă toate versiunile de ecran, adică, site-ul web
creat va fi optimizat pentru toate tipurile de dispozitive: PC, tablete, telefoane mobile, etc. Acest lucru va
îmbunătăți experiența utilizatorului spre deosebire de ceea ce se întâmplă cu site-urile fixe atunci când
sunt accesate de pe dispozitive mobile.
În acest fel se reduc costurile de creație și administrare atunci când design-ul ecranului este similar
pe dispozitive de mărimi diferite.
Se presupune de asemenea ca evita dezvoltarea de aplicații ad-hoc pentru versiuni mobile, sau nu,
de exemplu o aplicație specifica pentru iPhone, alta pentru mobile Android, etc, deși în ziua de azi site-
urile pentru mobile nu pot realiza aceleași funcții ca și aplicațiile native.
Din punctul de vedere al optimizării pe motoarele de căutare, ar apărea doar un URL în rezultatele
de căutare, prin intermediul cărora se șterg redirectările și erorile ce deriva din acestea.
Se evită de asemenea erorile la accesarea site-urilor web, în special de pe social links, adică, de pe
link-urile pe care utilizatorii le distribuie pe rețelele sociale de genul Facebook sau Twitter și care pot sa
sfârșească eronat, depinzând de link-ul ce a fost copiat (de pe ce dispozitiv a fost copiat) și de dispozitivul
de pe care se accesează.
165
3.5.3. Modul de funcționare al RWD
Web Design-ul Responsiv este posibil datorită introducerii Media Queries în proprietățile stilurilor CSS în
versiunea numărul 3. Media querie-urile sunt o serie de comenzi ce se includ în pagina de stiluri ce face
indică documentului HTML cum trebuie să se comporte pe diferite tipuri de ecrane.
Pentru a înțelege mai bine această tehnologie, design-ul paginii web, ca și ziarele și revistele, se
bazează pe coloane. Astfel că, după filozofia design-ului responsive, dacă o pagina web la rezoluția de PC
(1028x768 px) are 5 coloane, pentru o tabletă (800x600 px) ar fi necesare doar 4 și în cazul unui telefon
inteligent care are de obicei o lățime de 320 pana la 480 pixeli ar folosi doar 3 coloane.
3.5.4. Crearea unui site responsive

Pentru crearea unui site responsive ar trebui să parcurgem 3 etape:
1. În prima etapă ne vom folosi de tagul meta, cu proprietatea name. Cele mai multe browsere pentru
dispozitive mobile, caută în paginile HTML pe care le încarcă, tagul meta viewport. Tagul meta
viewport de notifică browserul, să folosească dimensiunile specific dispozitivului, și să ignore
dimensiunile setate initial. Tagul meta viewport se va poziționa în etichetele <head>.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Structura HTML – Într-o variantă minimală presupunem că avem un site cu următoarea structură
Structura HTML
Headerul are o înălțime fixă de 180px, zona dedicată conținutului are 600px lățime, iar sidebar-ul
este de 300px lățime.
3. Crearea fișierului CSS
Utilizând Css3 site-urile pot deveni responsive. Practic, se specifică condițiile în care browserul va
reda o pagină în momentul în care se specifică dimensiunea prin tagul name viewport. Setul de reguli
de mai jos, este aplicabil doar pentru dispozitive care au dimensiuni de 980px sau mai mici. Practic, se
stabilește dimensiunea zonei dedicate conținutului din pixeli, în procente, astfel ea devine fluidă.
166
/* pentru 980px sau mai puțin */
@media screen and (max-width:980px) {

#pagewrap{
width:94%;
}
#content{
width:65%;
}
#pagewrap{
width:30%;
}
Setul de reguli de mai jos, este aplicabil doar pentru dispozitive care au dimensiuni de 700px sau mai
mici. Se stabilește astfel lățimea cu valoarea auto pentru zonele definite de #content și #sidebar, iar pentru
float valoarea none, pentru ca aceste zone să nu plutească sau să devină fluide, să-și păstreze poziția
normală.
/* pentru 700px sau mai puțin*/

#content{
width:auto;
float:none;
}
#sidebar{
width:auto;
float:none;
}
}
Setul de reguli de mai jos, este aplicabil doar pentru dispozitive care au dimensiuni de 480px sau mai mici
(ecran telefon mobil). Se stabilește înălțimea zonei header pe cea implicită, dimensiunea pentru
elementele H1 va fi de 24px, și se va ascunde zona definită de #sidebar.
167
/* pentru 480px sau mai puțin*/

#header{
height:auto;
}
#sidebar{
display:none;
}
h1 {font-size:24px;
}
}
Atât pe dispozitivele mobile cât și pe cele clasice (desktop), utilizatorii au fost obișnuiți să folosească
mai mult scroll-ul vertical decât pe cel orizontal. Acest lucru se datorează în principal construcției rotiței
mouse-ului, care permitea la început numai scroll-ul vertical. De aceea, pe dispozitivele mobile este
esențial să nu avem elemente mai mari decât dimensiunea orizontală a browserului, pentru a nu obliga
utilizatorul să navigheze folosind scroll-ul orizontal.
Un instrument util pentru a verifica căt de responsive este site-ul nostru cel de la google:
https://www.google.ro/webmasters/tools/mobile-friendly/
4. JAVASCRIPT
4.1. JavaScript - Noțiuni de bază
JavaScript a fost dezvoltat prima dată de către firma Netscape, cu numele de Live Script, un limbaj de
script care extindea capacitățile HTML, oferă o alternativă parțială la utilizarea unui număr mare de
scripturi CGI pentru prelucrarea informaţiilor din formulare și care adaugă dinamism în paginile web.
Limbajul HTML oferă autorilor de pagini Web o anumită flexibilitate, dar statică. Documentele HTML
nu pot interacționa cu utilizatorul în alt mod mai dinamic, decât pune la dispoziția acestuia legături la alte
resurse (URL-uri). Crearea de CGI-uri (Common Graphics Interface) - [programe care ruleaza pe serverul
Web și care accepta informatii primite din pagina de web și returneaza cod HTML] - a dus la îmbogăţirea
posibilităţilor de lucru. Astfel, un pas important spre interactivizare a fost realizat JavaScript, care
permite inserarea în paginile web a script-urilor care se executa în cadrul paginii web, mai exact în cadrul
browser-ului utilizatorului, usurand astfel și traficul dintre server și client. De exemplu, într-o pagina
pentru colectarea de date de la utilizator se pot adauga scripturi JavaScript pentru a valida corectitudinea
introducerii și apoi pentru a trimite serverului doar date corecte spre procesare. JavaScript conține o listă
destul de amplă de funcții și comenzi menite să ajute la operaţii matematice, manipulări de şiruri, sunete,
imagini, obiecte și ferestre ale browser-ului, link-urile URL și verificari de introduceri ale datelor în
formulare. Codul necesar acestor actiuni poate fi inserat în pagina web și executat pe calculatorul
vizitatorului.
168
În general se consideră că există zece aspecte fundamentale ale limbajului JavaScript pe care orice
programator în acest limbaj ar trebui să le cunoască :
1. JavaScript poate fi introdus în HTML - De obicei codul JavaScript este gazduit în documentele
HTML și executat în interiorul lor. Majoritatea obiectelor JavaScript au etichete HTML pe care le
reprezintă, astfel încât programul este inclus pe partea de client a limbajului. JavaScript folosește
HTML pentru a intra în cadrul de lucru al aplicațiilor pentru web.
2. JavaScript este dependent de mediu - JavaScript este un limbaj de scriptare; software-ul care
ruleaza de fapt programul este browser-ul web (Firefox, Opera, Netscape Navigator, Internet
Explorer, Safari, etc.) Este important să luăm în considerare această dependență de browser atunci
când utilizăm aplicații JavaScript.
3. JavaScript este un limbaj în totalitate interpretat - codul scriptului va fi interpretat de browser
înainte de a fi executat. JavaScript nu necesită compilări sau preprocesări, ci rămane parte
integranta a documentului HTML. Dezavantajul acestui limbaj este că rularea durează ceva mai
mult deoarece comenzile JavaScript vor fi citite de navigatorul Web și procesate atunci când user-
ul apelează la acele funcții (prin completare de formulare, apăsare de butoane, etc). Avantajul
principal este faptul că putem mult mai ușor să actualizăm codul sursă.
4. JavaScript este un limbaj flexibil - în aceasta privință limbajul diferă radical de C++ sau Java. În
JavaScript putem declara o variabilă de un anumit tip, sau putem lucra cu o variabilă deși nu-i
cunoaștem tipul specificat înainte de rulare.
5. JavaScript este bazat pe obiecte - JavaScript nu este un limbaj de programare orientat obiect, ca
Java, ci mai corect, este "bazat pe obiecte"; modelul de obiect JavaScript este bazat pe instanță și
nu pe moștenire.
6. JavaScript este condus de evenimente - mare parte a codului JavaScript răspunde la evenimente
generate de utilizator sau de sistem. Obiectele HTML, cum ar fi butoanele, sunt îmbunătățite
pentru a accepta handlere de evenimente.
7. JavaScript nu este Java - Cele doua limbaje au fost create de companii diferite, motivul
denumirii asemănătoare este legat doar de marketing.
8. JavaScript este multifuncțional - limbajul poate fi folosit într-o multitudine de contexte pentru a
rezolva diferite probleme: grafice, matematice, și altele.
9. JavaScript evoluează - limbajul evoluează, fapt pozitiv care însă poate genera și probleme,
programatorii trebuind să verifice permanent ce versiune să folosească pentru ca aplicațiile să
poată fi disponibile unui număr cât mai mare de utilizatori de browsere diferite.
10. JavaScript acoperă contexte diverse - programarea cu acest limbaj este îndreptată mai ales către
partea de client, dar putem folosi JavaScript și pentru partea de Server. JavaScript este limbajul
nativ pentru unele instrumente de dezvoltare web, ca Borland IntraBuilder sau Macromedia
Dreamweaver.
4.2. Inserarea scripturilor JavaScript

Pentru a insera cod JavaScript într-un document HTML, folosim tagul <script> şi respectiv </script>.
Deci tagurile <script> şi </script> marchează locul în care începe, respectiv se sfârşeşte scriptul.
Observație: În exemplele vechi se utiliza atributul type pentru a defini limbajul în care este scris
scriptul. Atributul type nu este necesar, JavaScript este limbajul de scripting implicit în HTML.
Pentru inserarea script-urilor în documente HTML pot fi folosite cele 4 metode prezentate mai jos:
169
 Metoda 1 – plasarea script-ului în antet-ul paginii (între <head> şi </head>);
 Metoda 2 – plasarea script-ului în corpul paginii (între <body> şi </body>);
 Metoda 3 – utilizarea fişierelor sursă externe;
 Metoda 4 – crearea unui gestionar de evenimente.
Scripturi în antetul paginii

Scripturile care trebuie executate când sunt apelate sau când are loc un eveniment, trebuie scrise în
secţiunea head. În acest fel, scriptul va fi sigur încărcat înainte de a fi utilizat.
<html> <head>
<script>
function message()
{
alert("Aceasta caseta de alertare este apelata și afisata cind are loc evenimentul onload");
}
</script>
</head>
<body onload="message()">
<h3>Casetele de alertare</h3> <hr/>
</body> </html>
Scripturi în corpul paginii

Scripturile care trebuie executate când pagina se incarcă trebuie scrise în secţiunea body şi vor genera
conţinutul paginii.
<html> <head> </head>

<body>
<h3>Afisarea textului cu JavaScript</h3> <hr/>
<script>
document.write("Acest mesaj este scris cu JavaScript");
</script>
</body> </html>
Scripturi în fişier extern

Dacă dorim să utilizăm acelaşi script în mai multe pagini web fără a rescrie codul, trebuie să scriem
scriptul JavaScript într-un fişier extern. Fişierul trebuie să aibă extensia .js şi nu poate conţine tagul
<script>. Pentru a utiliza fişierul extern, indicăm numele fişierului în atributul src al tagului <script>.
<html> <head>
<script src="functie.js"></script>
</head>
<body >
<p onclick="afisare()"> Apasa aici!</p>
</body> </html>
170
Conţinutul fişierului functie.js
function afisare() {
document.write("<h2>Imi place să fiu asa cum sunt</h2>");}
Crearea unui gestionar de evenimente
Nu este obligatoriu ca toate script-urile JavaScript să se găsească în interiorul tag-urilor <script> ...
</script>. Puteţi apela, de asemenea la script-uri sub forma gestionarilor de evenimente, care indică
navigatorului cum să reacţioneze atunci când se produc anumite evenimente.
În exemplu de mai jos s-a creat un script care afişează un mesaj cu ajutorul gestionarului de evenimente
onClick.
Exemplu
<body >
<p onclick="alert('Imi place să fiu asa cum sunt')"> Apasa aici!</p>
</body> </html>
Browsere care nu recunosc JavaScript

Dacă browserul nu recunoaşte JS, liniile de cod vor fi afişate ca atare în pagină. Pentru a evita acest lucru,
scriptul ar trebui „ascuns” în taguri de comentariu. În exemplul următor, scriptul este scris între tagurile de
comentariu
<html><body>
<script>

</script>
</body></html>
Ultimele două caractere // reprezintă simbolul JS pentru comentariu şi sunt scrise pentru a impiedica JS să
execute tagul -->.
Afişarea datelor în JavaScript
În limbajul JavaScript datele pot fi afişate în 4 moduri diferite:
1. Afișarea în fereastra de alertare, folosind window.alert ().
2. Afișarea în documentul HTML folosind document.write ().
3. Afișarea într-un element HTML, folosind innerHTML.
4. Afișarea în consola browser-lui, folosind console.log ().
Utilizarea window.alert ()
Putem folosi o fereastră de alertare pentru a afișa date.
<!DOCTYPE html><html><body>
<h1>Prima mea pagina WEB.</h1>
<p>Primul meu paragraf.</p>
<script>
window.alert(5 + 6);
</script>
</body></html>
171
Utilizarea document.write ()
Pentru testare se recomandă de folosit metoda document.write ().
<!DOCTYPE html><html>
<body><h1>Prima mea pagina WEB.</h1>
<script>
document.write(5 + 6);
</script>
</body></html>
Utilizarea metodei document.write () după ce este complet încărcat un document HTML, șterge toate
elementele HTML existente:
<!DOCTYPE html><html><body>
<button onclick="document.write(5 + 6)">Click aici!</button
</body></html>
Observație: document.write () este o metodă ce ar trebui să fie folosită numai pentru testare.
Utilizarea innerHTML
Pentru a accesa un element HTML, JavaScript poate utiliza metoda document.getElementById (id).
Atributul id definește elementul HTML. Proprietatea innerHTML definește conținutul HTML:
<!DOCTYPE html> <html> <body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body> </html>
Utilizarea console.log ()
În browser-ul dvs., puteți utiliza metoda console.log () pentru a afișa date. Activați consola browserului cu
F12, și selectați "Console" din meniu.

<script>
console.log(5 + 6);
</script>
</body> </html>
172
Comentarii JavaScript
Comentariile pot fi adăugate pentru a explica codul sau a-l face mai uşor de citit. Comentariile care se
scriu pe o singură linie încep cu //.
În exemplul următor, comentariile tip linie sunt folosite pentru a explica codul:
<html> <body>
<script>
// Scrie un titlu:
document.write("<h1>Acesta este un titlu</h1>");
// Scrie doua paragrafe:
document.write("<p>Acesta este un paragraf.</p>");
document.write("<p>Acesta este un alt paragraf.</p>");
</script>
</body> </html>
Comentarii multi-linie
Aceste comentarii încep cu /* şi se încheie cu */, ca în exemplul următor:
<html> <body>
<script>
/*
Codul urmator va scrie în pagina
un titlu și doua paragrafe
*/
</script>
</body> </html>
Folosirea comentariilor pentru a preveni execuţia

În exemplul următor, comentariul este utilizat pentru a impiedica executarea unei linii de cod (metoda
poate fi utilizată pentru a depăna codul):
<html>
<body>
<script>
//document.write("<h1>Acesta este un titlu</h1>");
</script>
</body>
</html>
În exemplul următor, comentariul este utilizat pentru a impiedica execuţia unui bloc de cod (util pentru
depănarea codului):
<html> <body>
<script>
/*
173
*/
</script>
</body> </html>
În exemplul următor, comentariul este plasat la sfârşitul liniei de cod:

<html> <body>
<script>
document.write("Salutare"); // scrie în pagina textul "Salutare"
document.write(" prieteni!"); // scrie în pagina textul " prieteni!"
</script>
</body> </html>
4.3. Tipuri de date JavaScript

În JavaScript există 5 tipuri de date diferite care pot conține valori:
1. Number
2. String
3. Boolean
4. Object
5. Function
Exista 3 tipuri de obiecte:
1. Object
2. Date
3. Array
Şi 2 tipuri de date care nu pot conține valori:
1. Null
2. Undefened
4.3.1. Date numerice

Limbajul JavaScript permite specificarea datelor numerice în patru formate diferite: întreg, virgulă
flotană, octal şi hexazecimal.
Prin definiţie, numerele în octal şi în hexazecimal sunt numere întregi care sunt exprimate într-un sistem
de numeraţie cu baza 8, respectiv baza 16. În JavaScript un număr întreg octal este precedat de zero iar un
număr hexazecimal este precedat de caracterele ”0x” sau ”0X”.
Observaţii:
JavaScript recunoaşte numerele întregi (în baza 10, pozitive sau negative) cuprinse între: +/–
1.7976931348623157 E 308 şi +/–5 E – 324.
Un număr întreg hexazecimal (hexadecimal, în limba engleză) începe în mod obligatoriu cu 0X sau 0x
şi este compus din următoarele simboluri: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Putem utiliza
majuscule sau minuscule.
Un număr întreg octal începe obligatoriu cu 0 (zero) şi este compus din următoarele simboluri:0, 1, 2,
3, 4, 5, 6, 7
174
Un număr în virgulă flotantă este în baza 10. El poate fi pozitiv sau negativ şi poate conţine zecimale.
El poate de asemenea include un exponent pozitiv sau negativ, prin E. Separatorul zecimal este
întotdeauna punctul. JavaScript recunoaşte numerele cuprinse între: +/–1.7976931348623157 E 308 şi
+/–5 E –324.
4.3.2. Şir de caractere

Un şir de caractere (string, în limba engleză) este compus din litere, cifre, simboluri, caractere speciale şi
secvenţe de ieşire. Conţinutul unui şir de caractere este considerat tot timpul ca fiind text, chiar dacă el
constă din cifre şi simboluri numerice. Un şir de caractere este încadrat de ghilimele simple sau duble. Un
şir de caractere încadrat de ghilimele duble poate fi inclus într-un şir încadrat de ghilimele simple şi vice
versa.
4.3.3. Valori logice sau booleene

Ele sunt în număr de două: true (adevărat) şi false (fals). Cele două valori se folosesc pentru a indica
dacă rezultatul evaluării unei condiţii este adevărat sau nu.
Variabile JavaScript
De obicei, limbajele de programare cer să definiţi tipul de date pe care-l va reprezenta o variabilă, în plus
se generează o eroare atunci când încercaţi să-i atribuiţi variabilei un alt tip de date. Din fericire, aşa ceva
nu se întâmplă în JavaScript, care este un limbaj flexibil. Variabilele JavaScript pot accepta oricând un
nou tip de date, fapt care duce la modificarea tipului variabilei.
Reguli pentru numele variabilelor JavaScript:
 Numele este case-sensitive (y şi Y sunt două variabile diferite)
 Numele trebuie să înceapă cu o literă sau cu liniuţa de subliniere (underscore)
Exemplu - Valoarea unei variabile se poate modifica în timpul execuţiei scriptului. Putem referi variabila
prin nume pentru a-i afişa sau modifica conţinutul, ca în exemplul următor:
<html> <body>
<h3>Declararea, initializarea, atribuirea și afisarea unei variabile</h3> <hr/>
<script>
var prenume;
prenume="Mihai";
document.write("<b>Numele variabilei</b>: prenume");
document.write("<br/>");
document.write("<b>Valoare initiala</b>: "+ prenume);
prenume="Adrian";
document.write("<b>Valoare dupa atribuire</b>: "+ prenume);
</script>
</body> </html>
Declararea variabilelor JavaScript

Putem crea variabile cu sintaxa: var nume_variabila;
175
După declarare, variabila nu conţine valori (este vidă). Puteţi să iniţializaţi o variabilă chiar în momentul
declarării: var x=8; var prenume="Matei";
Observație: când atribuiţi unei variabile o valoare de tip text, textul trebuie scris între ghilimele.
Dacă atribuiţi valori unei variabile care nu a fost încă declarată, ea va fi declarată automat.
Declaraţiile:
x=8; prenume="Matei";
au acelaşi efect cu declaraţiile:
var x=8; var prenume="Matei";
Dacă redeclaraţi o variabilă JavaScript, ea va păstra valoarea iniţială:

var x=7; var x;
După execuţia instrucţiunilor de mai sus, variabila x are valoarea 7 care nu a fost resetată la redeclarare.
4.4. Operatori JavaScript
Operatorii aritmetici
Sunt folosiţi pentru a efectua operaţii aritmetice cu variabile şi/sau valori. Dacă y=5, tabelul următor
prezintă operatorii aritmetici:
Operator Descriere Exemplu Rezultat
+ adunare x=y+2 x=7
- scădere x=y-2 x=3
* inmulţire x=y*2 x=10
/ impărţire x=y/2 x=2.5
% modulo (restul impărţirii întregi) x=y%2 x=1
Operatorii de atribuire
Sunt folosiţi pentru a atribui valori variabilelor JavaScript. Dacă x=10 şi y=5, tabelul următor prezintă
operatorii de atribuire:
Operator Exemplu Echivalent cu Rezultat
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
176
Operatorul + utilizat pentru şiruri de caractere
Acest operator poate fi utilizat şi pentru a concatena variabile tip şir de caractere (string sau text).
Exemplu:
<p>Operatorul + utilizat pentru şiruri de caractere.</p>
<script>
var txt1 = "Ce mai";
var txt2 = "faci azi?";
document.write(txt1 + txt2);
</script>
</body> </html>
Adunarea şirurilor şi a numerelor

Regulă: Dacă adunaţi un număr cu un şir de caractere, veţi obţine un şir de caractere.
Exemplu:
<html> <body>
<h3>Adunarea sirurilor de caractere și a numerelor cu siruri de caractere</h3> <hr/>
<script>
x=6+7;
document.write("6+7="+x);
document.write("<br />");
x="6"+"7";
document.write('"6"+"7"='+x);
x=6+"7";
document.write('6+"7"='+x);
x="6"+7;
document.write('"6"+7='+x);
</script>
</body> </html>
Operatori de incrementare / decrementare

Operatorii se mai clasifică şi în functie de operatia pe care o efectuează şi anume în:
 operatori de incrementare – creşte valoarea variabilei cu o unitate
 operatori de decrementare – scade valoarea variabilei cu o unitate;
Acestea la rândul lor sunt de două feluri:

 prefixată – operatorul se scrie înaintea operandului. Operatia de incrementare (sau decrementare) se
efectuează înainte de a se efectua operatiile expresiei în care se află.
De exemplu, dacă initial a=1 şi x=++a; vom avea la final x=2 şi a=2, adică se incrementează
variabila a cu o unitate înainte de a i se atribui variabilei x valoarea variabilei a.
 postfixată – operatorul se scrie după operand. Operatia de incrementare (sau decrementare) se
efectuează după ce se efectuează operatiile expresiei în care se află.
177
De exemplu, dacă initial a=1 şi x=a++; vom avea la final x=1 şi a=2, adică se incrementează
variabila a cu o unitate după ce i se va atribui variabilei x valoarea variabilei a.
Operator Tip de operator Descriere Exemplu
++ incrementare incrementare prefixată ++x sau x=x+1
incrementare postfixată x++ sau x=x+1
-- decrementare decrementare prefixată --x sau x=x-1
decrementare postfixată x-- sau x=x-1
<html> <head><title>Operatori de incrementare/decrementare </title>

</head>
<body>
<script >
var x=1, y=2;
document.write("x=1 y=2");
document.write("z=++x-y--=",++x-y--);
</script>
</body> </html>
Operatorii de comparare
Operatorii de comparare sunt utilizaţi în construcţii logice pentru a verifica egalitatea sau diferenţa dintre
două variabile sau valori. Dacă x=5, tabelul următor prezintă operatorii de comparare.
Operator Descriere Exemple

== Egal cu x==5 este fals
x===5 este adevărat
=== Este egal exact (valoare şi tip)
x==="5" este fals
!= Diferit x!=8 este adevăra
> Mai mare decit x>8 este fals
< Mai mic decit x<8 este adevărat
>= Mai mare sau egal cu x>=8 este fals
<= Mai mic sau egal cu x<=8 este adevarat
Operatorii logici
Operatorii logici sunt utilizaţi pentru a determina relaţia logică dintre variabile sau valori. Dacă x=6 şi
y=3, tabelul următor prezintă operatorii logici:
Operator Descriere Exemple
&& și (x < 10 && y > 1) este adevărat
178
|| sau (x==5 || y==5) este fals
! not !(x==y) este adevărat
Operatorul condiţional(ternar)
Acest operator atribuie o valoare unei variabile în funcţie de o anumită condiţie.
Sintaxă:
variabila=(conditie)?valoare1:valoare2
<!doctype html><html><head>
<title>Operatorul ternar ?</title>
</head>
<body>
<script>
var a=4;
document.write(
a <= 5 ?
"a este mai mic și egal ca 5" :
"a este mai mare ca 5"
)
</script>
</body></html>
Exemplul 2:
<html> <body>
<script>
var x=5; y=7;
document.write("x=2 y=3");
document.write("Calculati elementul maxim.");
document.write("Expresia conditionala este:");
document.write(" (x>y)?max=x:max=y");
document.write("Rezultatul este: ",(x>y)?"max=x":"max=y");;
</script>
</body> </html>
Operatorul typeof
Operatorul typeof returnează tipul de date conținut de operandul său. Tipurile de date pe care le poate
returna sunt:
 string – pentru şiruri de caractere
 number – pentru numere
 function – pentru functiile JavaScript
 object – pentru obiectele JavaScript
<!DOCTYPE html> <html>

179
<body>
<p>Operatorul typeof utilizat pentru a returna tipul de date.</p>
<script>
document.write("variabila: tipul de date <br>");
var x1=-33.4;
document.write(x1+ ": ", typeof x1);
document.write("<br>");
x2=234;
document.write(x2+ ": ", typeof x2);
y="Lucian Blaga";
document.write(y+ ": ", typeof y);
z=escape;
document.write(z+ ": ", typeof z);
t=Image;
document.write(t+ ": ", typeof t);
</script>
</body> </html>
Inserarea caracterelor speciale

Pentru a insera într-un şir caractere speciale, cum ar fi apostrof, ghilimele, întrerupere de linie etc., se
foloseşte caracterul backslash (\).
Fie următorul cod JavaScript:
var txt="Noi suntem cetateni "Galateni" din orasul Galati.";
document.write(txt);
Tabelul următor prezintă caracterele speciale ce pot fi inserate într-un text cu ajutorul caracterului
backslash:
Cod Ieşire
\' apostrof
\" ghilimele
\& ampersand
\\ backslash
\n linie nouă
\r retur de car
\t tab
\b backspace
\f form feed
180
Casete Popup
JavaScript are trei tipuri de casete popup: caseta Alert, caseta Confirm şi caseta Prompt.
Caseta Alert
O casetă de alertă se utilizează atunci doriţi să fiţi siguri că o anumită informaţie ajunge în atenţia
utilizatorului. când o casetă de alertă este afişată, utilizatorul va trebui să acţioneze butonul "OK" pentru
a putea continua.
Sintaxă:
alert("...un text....");
Exemplu:
<html> <head>
<script>
function afiseaza_alert()
{
alert("Sunt o caseta de alertare!");
}
</script>
</head>
<body>
<h3>La apasarea butonului va fi apelata o functie care afiseaza caseta alert</h3> <hr/>
<input type="button" onclick="afiseaza_alert()" value="Apasa" />
</body> </html>
Caseta Confirm
O casetă de confirmare se utilizează atunci când doriţi ca utilizatorul să verifice sau să accepte ceva. Când
caseta de confirmare este afişată, utilizatorul va trebui să acţioneze butonul "OK" sau butonul "Cancel"
pentru a putea continua. Dacă utilizatorul acţionează butonul "OK", caseta returnează valoarea true, dacă
acţionează butonul "Cancel", caseta returnează valoarea false.
Sintaxă:
confirm("...un text....");
Exemplu:
<html> <head>
<script>
function afiseaza_confirm()
{
var r=confirm("Apasati un buton");
if (r==true)
{
document.write("Ati apasat butonul OK!");
}
else
{
document.write("Ati apasat butonul Cancel!");
}
}
</script>
181
</head>
<body>
<h3>La apasarea butonului va fi apelata o functie care afiseaza caseta confirm și verifica ce buton ati
apasat</h3>
<hr/>
<input type="button" onclick="afiseaza_confirm()" value="Apasa" />
</body> </html>
Caseta Prompt
Această casetă se utilizează atunci când doriţi ca utilizatorul să introducă o anumită valoare înainte de a
accesa pagina. Când caseta prompt este afişată, utilizatorul va trebui să acţioneze butonul "OK" sau
butonul "Cancel" pentru a putea continua după ce introduce valoarea solicitată. Dacă utilizatorul
acţionează butonul "OK", caseta returnează valoarea true, dacă acţionează butonul "Cancel", caseta
returnează valoarea false.
Sintaxă:
prompt("....un text....","valoare_implicita");
Exemplu:
<html>
<head>
<script>
function afiseaza_prompt()
{
var name=prompt("Va rog să va introduceti numele","");
if (name!=null && name!="")
{
document.write("Buna ziua " + name + "! Ce mai faci?");
}
}
</script>
</head>
<body>
<h3>La apasarea butonului va fi apelata o functie care afiseaza caseta prompt</h3> <hr/>
<input type="button" onclick="afiseaza_prompt()" value="Apasa" />
</body>
</html>
Observație Dacă doriţi ca textul dintr-o casetă să fie afişat pe mai multe linii, procedaţi ca în exemplul
următor:
<html> <head> <script>

function afiseaza_alert()
{
alert("Buna! Asa se adauga" + '\n' + "o întrerupere de linie" + '\n' + "intr-o caseta de alertare!");
}
</script>
182
</head>
<body>
<h3>Caseta alert cu textul scris pe mai multe linii</h3> <hr/>
<input type="button" onclick="afiseaza_alert()" value="Apasa" />
</body> </html>
4.5. Instrucţiuni JavaScript

JavaScript este o secvenţă de declaraţii, instrucţiuni şi comenzi care vor fi executate de către browser.
Spre deosebire de HTML, JavaScript este case-sensitive, deci aveţi grijă când scrieţi instrucţiuni, declaraţi
variabile sau apelaţi funcţii. O instrucţiune JavaScript este o comandă către browser şi are rolul de a spune
browserului ce trebuie să facă. Următoarea instrucţiune JavaScript spune browser-ului să scrie în pagină
textul "Buna ziua":
document.write("Buna ziua");
Fiecare instrucţiune se încheie cu punct şi virgulă (;).
Codul JavaScript este o secvenţă de instrucţiuni JavaScript. Fiecare instrucţiune este executată de browser
în ordinea în care a fost scrisă.
Exemplul următor va scrie un titlu şi două paragrafe într-o pagină web:

<html>
<body>
<h3>Utilizarea tagurilor HTML în mesajele afisate cu JavaScript</h3> <hr/>
<script>
</script>
</body>
</html>
Blocuri JavaScript
Instrucţiunile JavaScript pot fi grupate în blocuri care se scriu între acolade. Instrucţiunile dintr-un bloc
vor fi executate împreună. În acest exemplu, instrucţiunile care scriu un titlu şi două paragrafe, au fost
grupate împreună într-un bloc.
<html> <body>
<script>
{
}
</script>
</body> </html>
În mod normal, un bloc este folosit pentru a grupa un grup de instrucţiuni într-o funcţie sau într-o condiţie
(blocul va fi executat dacă o anumită condiţie este satisfăcută).
183
Instrucţiunile condiţionale
Adesea, când scrieţi cod JavaScript, trebuie să realizaţi operaţii diferite în funcţie de decizii diferite.
Pentru a realiza acest lucru, folosiţi în cod instrucţiunile condiţionale.
În JavaScript există următoarele instrucţiuni condiţionale:
 if – folosiţi această instrucţiune dacă un cod trebuie executat când o condiţie este adevărată
 if...else - folosiţi această instrucţiune pentru a executa un cod când o condiţie este adevărată şi alt
cod dacă condiţia este falsă
 if...else if....else – folosiţi această instrucţiune pentru a selecta unul din mai multe blocuri de cod
pentru a fi executat
 switch - folosiţi această instrucţiune pentru a selecta unul din mai multe blocuri de cod pentru a fi
executat
Instrucţiunea if
Sintaxă:
if (conditie) {
cod ce trebuie executat dacă conditia este adevarată
}
Exemplu:
<html>
<body>
<h3>Scriptul va afisa un mesaj dacă ora<10 folosind instructiunea if</h3> <hr/>
<script>
var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write("<b>Buna dimineata</b>");
}
</script>
</body>
</html>
Instrucţiunea if…else
Sintaxă:
if (conditie) {
cod executat dacă conditia este adevarată
}
else {
cod executat dacă conditia este falsa
}
Exemplu:
<html> <body>
<h3>Scriptul va afisa un mesaj sau altul în functie de ora, cu instructiunea if..else</h3> <hr/>
184
<script>
var d = new Date();
if (time < 10)
{
}
else
{
document.write("<b>Buna ziua</b>");
}
</script> </body> </html>
Instrucţiunea if...else if...else

Sintaxă:
if (conditia1) {
cod executat dacă conditia1 este adevarată
}
else if (conditia2) {
cod executat dacă conditia2 este adevarată
}
else {
cod executat dacă nici conditia1, nici conditia2 nu sunt adevarate
}
Exemplu:
<html>
<body>
<h3>Scriptul va afisa unul din trei mesaje în functie de ora, cu instructiunea if-else-if-else</h3>
<hr/>
<script>
var d = new Date();
if (time<10)
{
}
else if (time>=10 && time<17)
{
document.write("<b>Buna ziua</b>");
}
else
{
document.write("<b>Buna seara</b>");
}
185
Exemplu:
Link-ul din exemplul următor va deschide Google sau Yahoo
<html> <body>
<h3>Scriptul afiseaza în mod aleator unul din doua link-uri, folosind if..else</h3> <hr/>
<script>
var r=Math.random();
if (r>0.5)
{
document.write("<a href='http://www.google.com'>Google!</a>");
}
else
{
document.write("<a href='http://www.yahoo.com'>Yahoo!</a>");
}
Instrucţiunea switch
Sintaxă:
switch(exp) {
case val-1: executa bloc-1; break;
case val-2: executa bloc-2; break;
......
default: cod executat dacă exp este diferit de val-1, val-2,....
}
Exemplu:
<html>
<body>
<h3>Scriptul utilizează instructiunea switch</h3>
<hr/>
<script>
var d = new Date();
theDay=d.getDay();
switch (theDay)
{
case 5: document.write("<b>Vineri</b>"); break;
case 6: document.write("<b>Sambata</b>"); break;
case 0: document.write("<b>Duminica</b>"); break;
default: document.write("<b>Astept weekend-ul!</b>");
}
Exerciții:
1. Să se afle minimum şi maximum din trei numere date a, b, c, cu ajutorul instrucțiunii if else.
2. Sunt date trei numere a, b, c. De afişat numerele în ordine crescătoare(descrescătoare).
186
Instrucţiuni repetitive
Instrucţiunile repetitive sunt utilizate pentru a executa o secvenţă de cod în mod repetat. În JavaScript
putem folosi urmatoarele instrucţiuni repetitive:
 for – repetă o secvenţă de cod de un număr precizat de ori
 for...in – parcurge elementele unui tablou sau a enumera proprietăţile unui obiect
 while – repetă o secvenţă de cod cît timp o condiţie este adevărată
 do...while – întîi execută o dată secvenţă de cod apoi o repetă cît timp o condiţie este adevărată
Instrucţiunea for
Instrucţiunea for se utilizează când se cunoaşte dînainte numărul de iteraţii dorit pentru secvenţa de cod.
Sintaxă:
for (var=val_initiala; var<=val_finala; var=var+increment)
{
codul ce trebuie executat
}
Exemplu:
În exemplul următor, instrucţiunea for începe cu i=0, corpul instrucţiunii se repetă cît timp i≤50 şi
contorul i este incrementat cu 2 la fiecare iteraţie. Vor fi afişate numerele pare ≤50.
Observații: Valoarea increment poate fi şi negativă şi comparaţia se poate realiza şi cu orice alt
operator de comparare.
<html> <body>
<h3>Utilizarea instructiunii for</h3> <hr/>
<script>
document.write("Numerele pare mai mici sau egale cu 50: "+"<br/>");
var i=0;
for (i=0;i<=50;i+=2)
{
document.write(i +" ");
}
</script>
</body> </html>
Exemplu: În acest exemplu, instrucţiunea for este utilizată pentru a afişa cele 6 titluri HTML.
<html> <body>
<h3>Afisarea titlurilor HTML cu instructiunea
for</h3> <hr/>
<script>
for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">Aceste este un titlu " + i);
document.write("</h" + i + ">");
}
187
Instrucţiunea for...in
Această instrucţiune este utilizată pentru a parcurge elementele unui tablou sau a enumera proprietăţile
unui obiect.
Sintaxă:
for (variabila în obiect) {
cod ce trebuie executat
}
Observații: Codul din corpul instrucţiunii este executat cîte o dată pentru fiecare element din tablou
sau proprietate. Argumentul variabila poate fi o variabilă, un element de tablou sau o proprietate a
unui obiect.
Exemplu:
Instrucţiunea for..in este utilizată pentru a parcurge elementele unui tablou:
<html> <body>
<h3>Parcurgerea elementelor unui tablou cu instructiunea for..in</h3> <hr/>
<script>
var x;
var pets = new Array();
pets[0] = "Pisica";
pets[1] = "Caine";
pets[2] = "Papagal";
pets[3] = "Hamster";
document.write("Valorile memorate în tablou sunt:"+"<br/>");
for (x în pets)
{
document.write(pets[x] + "<br />");
}
</script>
</body> </html>
Exemplu:
Instrucţiunea for..in este utilizată pentru a parcurge proprietăţile unui obiect:
<script>
var txt = "";
var persoana = {nume:"Ion", prenume:"Cheni", virsta:25};
var x;
for (x în persoana) {
txt += persoana[x] + " ";
}
document.write(txt);
188
Instrucţiunea while
Instrucţiunea execută în mod repetat o secvenţă de cod, cît timp o condiţie este adevărată.
Sintaxă:
while (var<=val_finala) {
}
Observație: Operatorul <= poate fi înlocuit cu orice alt operator de comparare.
Exemplu:
<html> <body>
<h3>Utilizarea instructiunii while</h3> <hr/>
<script>
document.write("Numerele naturale mai mici egale cu 5:"+"<br/>");
var i=0;
while (i<=5)
{
document.write(i);
i++;
}
Instrucţiunea do...while
Instrucţiunea do...while este o variantă a instrucţiunii while. Secvenţa de instrucţiuni va fi executată în
mod sigur o dată, apoi în mod repetat, cît timp condiţia specificată este adevărată.
Sintaxă:
do {
}
while (var<=val_finala);
Exemplu:
În acest exemplu vor fi afişate numerele impare ≤50.
<html>
<body>
<h3>Utilizarea instructiunii do-while</h3> <hr/>
<script>
document.write("Numerele impare mai mici sau egale cu 50:"+"<br/>");
var i=1;
do
{
document.write(i + " ");
189
i+=2;
}
while (i<=50);
</script>
</body>
</html>
Exerciții:
1. Sunt date numerele K şi N(N>0). De afişat de N ori numărul K;
2. De elaborat un script ce va afişa tabla înmulțirii;
3. De elaborat un script ce va afişa tabla de şah;
4. De elaborat un script ce va calcula n!;
5. De elaborat un script ce va calcula numărul exact de ani, luni şi zile de la ziua de naştere.
6. Să se scrie un program care să afişeze următoarele valori:
1*9 + 2 = ?
12*9 + 3 = ?
123*9 + 4 = ?
.................
123456789*9 + 10 = ?
7. Să se scrie un program care să afişeze următoarea "piramidă" de numere:
1
123
12345
..............
1 ......(2n-1)
Instrucţiunile break şi continue

Instrucţiunea break
Este utilizată pentru a întrerupe în mod forţat execuţia unei bucle. În exemplul următor, bucla va fi
întreruptă când i=3.
<html> <body> <h3>Utilizarea instructiunii break</h3> <br/>
<script>
document.write("Numerele naturale mai mici egale cu 5:"+"<br/>");
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
document.write("Ciclu oprit cu break"); break;
}
document.write(i);
}
Instrucţiunea continue
190
Instrucţiunea întrerupe execuţia iteraţiei curente şi sare la următoarea iteraţie. În exemplul următor,
valoarea 3 nu va fi afişată (este sărită cu instrucţiunea continue).
<html> <body>
<h3>Utilizarea instructiunii continue</h3> <hr/>
<script>
document.write("Numerele naturale mai mici sau egale cu 10:"+"<br/>");
var i=0
for (i=0;i<=10;i++)
{
if (i==3)
{
document.write("valoare sarita cu continue"+"<br/>");continue;
}
document.write(i);
}
Instrucţiunea with
Instrucţiunea with simplifică scrierea programelor JavaScript sau reduce pe cât posibil cantitatea de cod
JavaScript. Instrucţiuneawith permite specificarea unui obiect şi este urmat de un bloc de instrucţiuni
plasat între acolade. Pentru fiecare din instrucţiunile blocului, proprietăţile menţionate fără ca obiectul
corespunzător să fie indicat se referă la obiectul specificat prin with.
Sintaxă:
with (obiect) { cod JavaScript }
Exemplu 1:
În următorul exemplu este apelată metoda document.write() de patru ori
<html><head></head>
<body>
<script>
document.write("Pe trotuar, alături saltă"+"<br />");
document.write("Două fete vesele,"+"<br />");
document.write("Zău că-mi vine să las baltă,"+"<br />");
document.write("Toate interesele"+"<br />");
</script></body> </html>
Exemplu 2:
Acelaş exemplu, numai că cuvântul cheie with elimină referinţele multiple la obiectul document
<html><head></head>
<body>
<script>
with(document){
write("Pe trotuar, alături saltă"+"<br />");
write("Două fete vesele,"+"<br />");
191
write("Zău că-mi vine să las baltă,"+"<br />");
write("Toate interesele"+"<br />");
}
</script></body> </html>
Observație: Pentru un cod scurt interesul utilizării instrucţiunii with nu este evident, dar când
trebuie să accesăm acelaşi obiect în cadrul unei proceduri sau când utilizăm un obiect predefinit
precum Math, with vă ajută să câştigaţi foarte mult timp.
4.6. Funcţii
O funcţie va fi executată când are loc un eveniment sau când este apelată. Dacă doriţi ca browserul să nu
execute un script atunci când pagina se incarcă, puteţi scrie scriptul într-o funcţie. O funcţie poate fi
apelată din orice punct al paginii, sau chiar din alte pagini, dacă funcţia este scris într-un fişier JS extern.
Funcţiile JS pot fi scrise în secţiunea <head> sau în secţiunea <body> a documentului. Totuşi, pentru a fi
siguri că funcţia este încărcată în browser înainte de a fi apelată, este recomandat să o scrieţi în secţiunea
<head>.
Definirea unei funcţii

Sintaxă:
function nume_functie(var1,var2,...,varX)
{
codul functiei
}
Parametrii var1, var2, etc. sunt variabile sau valori transmise funcţiei. Acoladele marchează inceputul şi
sfârşitul corpului funcţiei.
Observație: Chiar dacă funcţia nu are parametri, parantezele rotunde de după numele funcţiei
trebuie să fie prezente.
Exemplu:
function afiseaza_mesaj()
{
alert("Bine ati venit!");
}
</script>
</head> <body>
<h3>La apasarea butonului este apelata o functie JS care afiseaza caseta alert</h3> <hr/>
<form>
<input type="button" value="Apasati!" onclick="afiseaza_mesaj()" />
</form>
</body> </html>
192
Dacă linia de cod alert("Bine ati venit!") din exemplul anterior nu ar fi fost scrisă în corpul unei funcţii,
codul ar fi fost executat imediat ce linia respectivă ar fi fost încărcată în browser. Deoarece codul a fost
inclus într-o funcţie, el nu va fi executat decit atunci când utilizatorul acţionează butonul şi este apelată
funcţia afiseaza_mesaj().
Instrucţiunea return
Instrucţiunea return este folosită pentru a specifica valoarea returnată de o funcţie şi trebuie inclusă în
orice funcţie care returnează o valoare.
În exemplul următor, funcţia suma returnează suma celor doi parametri de intrare:
<html> <head>
<script>
function suma(a,b)
{
return a+b;
}
</script>
</head>
<body>
<h3>Suma urmatoare este calculata și returnata de o functie</h3> <hr/>
<script>
document.write("7+9="+suma(7,9));
Durata de viaţă a variabilelor JavaScript

Dacă declaraţi o variabilă în interiorul unei funcţii, ea poate fi accesată numai din interiorul funcţiei. Când
funcţia se incheie, variabila este distrusă. Variabilele declarate în corpul unei funcţii se numesc variabile
locale. Puteţi avea variabile locale cu acelaşi nume în funcţii diferite, deoarece fiecare variabilă locală este
recunoscută numai în interiorul funcţiei în care este declarată. Dacă declaraţi o variabilă în afara tuturor
funcţiilor (variabilă globală), ea poate fi accesată de toate funcţiile din pagină. O variabilă globală este
distrusă numai atunci când pagina este inchisă.
Exemple:
Exemplul 1
Ilustrează cum se poate transmite o variabilă unei funcţii şi cum poate fi folosită respectiva variabilă în
corpul funcţiei.
<html> <head>
<script>
function functia_1(text)
{
alert(text);
}
</script>
</head>
<body>
<h3>Functii JavaScript</h3> <hr/>
<form>
193
<input type="button" onclick="functia_1('Bune ati venit!')" value="Apasati">
</form>
<p>Cind apasati butonul, va fi apelata o functie cu textul "Bine ati venit!" drept parametru. Functia
va afisa parametrul cu o caseta de alertare.</p>
</body> </html>
Exemplul 2
Ilustrează cum poate fi folosit rezultatul returnat de o funcţie.
function functie_2()
{
return ("Bine ati venit!");
}
</script>
</head>
<body>
<h3>Textul urmator este returnat de o functie apelata direct din document.write()</h3> <hr/>
<script>
document.write(functie_2())
Exemplul 3
function salut(txt)
{
alert(txt);
}
</script>
</head>
<body>
<h3>Utilizarea functiilor JavaScript</h3> <hr/>
<form>
<input type="button" onclick="salut('Buna dimineata!')" value="Dimineata">
<input type="button" onclick="salut('Buna seara!')" value="Seara">
</form>
<p>Cind apasati unul dintre butoane, va fi apelata o functie care afiseaza mesajul primit ca
parametru.</p>
</body>
</html>
194
4.7. Evenimentele JavaScript.
Conceptul de eveniment şi gestionar de evenimente

Un eveniment este o acţiune care se produce în raport cu un element (fereastră, document, buton, etc.) el
poate fi detectat şi prelucrat de către un script care va declanşa o acţiune. Script-ul este executat dacă
evenimentul se produce pe obiectul căruia îi este asociat.
Reacţia la un eveniment este cunoscută sub numele de prelucrarea evenimentului, iar codul JavaScript
corespunzător este cunoscut sub numele de gestionar de evenimente.
Un gestionar de evenimente este o metodă puţin specială care va fi apelată în mod automat de către
browser ori de câte ori va surveni un eveniment particular.
Gestionarii de evenimente sunt funcţii JavaScript. Aceştia sunt uşor de programat, de multe ori este
suficientă o singură instrucţiune pentru a putea fi creaţi.
Acţiunile utilizatorilor sunt cele mai frecvente evenimente. Însă acestea nu sunt singurele. De exemplu
evenimentul load este declanşat automat de către browser atunci când este încheiată încărcarea unui
document.De obicei evenimentele sunt provocate de utilizator prin efectuarea unui click sau introducerea
unor date.
Fiecare eveniment are un nume prestabilit care în acelaşi timp este şi parametrul unui tag. Acest parametru
stabileşte care eveniment anume trebuie procesat – glisarea mouse-ului, introducerea textului, încărcarea
paginii, etc. Valoarea parametrului este acţiunea care trebuie îndeplinită:
<tag gestionar_evenimente=”cod JavaScript (descrierea acţiunii)”> conţinut </tag>
Pentru a defini un gestionar de evenimente se adaugă prefixul on la numele evenimentului.

Toate evenimentele procesate de browser pot fi împărţite în patru grupuri în dependenţă de elementul ce le
provoacă: evenimente provocate de mouse, de tastatură, de elementul formularului, şi de ferestre.
Evenimente provocate de mouse

 onclick - are loc când se da click pe un element
 ondblclick - are loc când se da dublu click pe un element
 onmousedown - are loc când este apasat click-ul
 onmousemove - are loc când se misca cursorul în interiorul unui element
 onmouseover - are loc când se pune cursorul deasupra unui element
 onmouseout - are loc când cursorul iese din cadrul unui element
 onmouseup - are loc când se elibereaza click-ul
Exemple:
Exemplul 1
<input type="button" value="onclick" onclick="alert('eveniment la click')" />
<p>
<input type="button" value="ondblclick" ondblclick="alert('eveniment la dublu click')" />
<p>
<input type="button" value="onmouseout" onmouseout="alert('eveniment la mouseout')" />
<p>
<input type="button" value="onmouseup" onmouseup="alert('eveniment la mouseup')" />
<p>
195
<input type="button" value="onmouseover" onmouseover="alert('eveniment la mouseover')" />
</body> </html>
Exemplul 2
În exemplul de mai jos, am utilizat o functie care permite afişarea coordonatelor cursorului unui mouse în
mişcare.
<!DOCTYPE html> <html><head>
<title>Coordonatele cursorului</title>
</head>
<body>
<form name=formular> Coordonatele cursorului<br /><br />
X <input type=text name=x value=""><br />
Y <input type=text name=y value="">
</form>
<script>
var InternetExplorer = document.all?true:false;
if (!InternetExplorer)
document.captureEvents(Event.mousemove);
document.onmousemove = pozitie;
function pozitie(poz)
{
var x;
var y;
if (!InternetExplorer)
{
x = poz.pageX;
y = poz.pageY;
}
if (InternetExplorer)
{
x = event.clientX + document.body.scrollLeft;
y = event.clientY + document.body.scrollTop;
}
document.formular.x.value=x;
document.formular.y.value=y;
return true; }
</script>
</body> </html>
Evenimente provocate de tastatură

 onkeydown - are loc când se apasa o tasta
 onkeypress - are loc când este apasata o tasta
 onkeyup - are loc când este eliberata o tasta
Exemple:
Exemplul 1
196
<!DOCTYPE html> <html><body>
<input type="text" onkeydown="alert('eveniment la onkeydown')" />
<p>
<input type="text" onkeyup="alert('eveniment la onkeyup')" />
<p>
<input type="text" onkeypress="alert('eveniment la onkeypress')" />
</body></html>
Exemplul 2
<!DOCTYPE html> <html><head><title>Evenimente</title>
</head>
<body>
<form>
<input type=button value="apasati orice tasta" onKeyPress="window.alert('Codul tastei apasate este:'
+window.event.keyCode)">
</form>
</body></html>
Exemplul 3
<!DOCTYPE html> <html><head><title>Evenimente</title>
</head>
<script>
function urmatorul(elment,text) {
if (text.length==elment.maxLength) {
next=elment.tabIndex;
if (next<document.form3.elements.length) {
document.form3.elements[next].focus();
}
}
}
</script>
</head><body>
- Cursorul se muta automat în urmatoarea caseta atunci când s-a completat tot campul
precedent (cand se ajunge la lungimea stabilita a campului, aici 4 caractere) <br>
<form name="form3">
<input size="4" tabindex="1" name="field" maxlength="4" onkeyup="urmatorul(this,this.value)">
<input size="4" tabindex="2" maxlength="4" onkeyup="urmatorul(this,this.value)">
<input size="4" tabindex="4" maxlength="4" onkeyup="urmatorul(this,this.value)">
</form>
</body>
</html>
Functia urmatorul(elment,text), are doua argumente: element (care, prin apel, se referă la caseta input)
şi text (se referă la valoarea casetei).
În apelul funcţiei: urmatorul(this,this.value), this se referă la obiectul curent (reprezintă primul
argument) iar al doile argument this.value reprezintă valoarea obiectului curent (valoarea din câmp).
197
Observaţi folosirea evenimentului onKeyup, pentru a se trece la urmatorul câmp atunci când s-a
completat ultimul caracter din caseta precedentă.
Pentru a înţelege mai bine puteţi să înlocuiţi onkeyup cu onkeydown pentru a vedea diferenţa.
Evenimente provocate de ferestre

 onabort - are loc în momentul în care se se întrerupe încarcarea ferestrei
 onerror - are loc în momentul în care o imagine nu se încarcă corect (pentru object, body şi
frameset)
 onload - are loc în momentul în care se termină încarcarea ferestrei
 onresize - are loc când este modificată dimensiunea ferestrei
 onscroll - are loc în momentul în care se derulează bara de scroll
 onunload - are loc în momentul în care nu se încarcă fereastra
Exemplu
<script>
function g()
{
alert("Salut!");
}
</script>
</head>
<body onLoad="g()">
</script>
</body> </html>
Evenimente provocate de formular

 onblur - are loc în momentul în care cursorul este scos din casuta respectiva (se dă click în alta
parte)
 onchange - are loc în momentul în care se schimbă conţinutul din casuţa respectivă
 onfocus - are loc în momentul în care se pune cursorul în casuţa respectivă
 onreset - are loc când este apasat butonul reset din formular
 onselect - are loc în momentul în care se selectează un text din câmpul respectiv
 onsubmit - are loc în momentul în care se apasă butonul de submit din formular
Exemple:
Exemplul 1
În exemplul de mai jos, am utilizat o funcţie care preia o valoare introdusă în formular, o verifică şi
afişează un mesaj corespunzător. Dacă nu a fost introdus un număr, functia isNaN() va returna valoarea
true, iar pe monitor va apărea mesajulIntroduceti un număr!. Mesajele afişate vor apare pe ecran numai
dacă introducem altceva decît un număr pozitiv. Evenimentul onBlur îşi face efectul, adică transmite
valoarea introdusă de către utilizator, funcţiei verificare, dacă dăm click în afara zonei de text a
formularului.
<!DOCTYPE html> <html> <head>
<title> onBlur </title>
<script>
198
function verificare(form)
{
var x=0;
x=document.formular.date.value;
y=isNaN(x);
if (y==true)
alert("Introduceti un număr!");
else
if (x<0)
{
alert("Va rog să introduceti un număr pozitiv!");
}
}
</script>
</head>
<body>
<h3>Introduceti un număr pozitiv:</h3>
<p>Pentru verificare, puteți introduce altceva
<br />
<form name="formular">
<input type="text" name="date" value="" size="20" onBlur='verificare(this.form)'>
</form>
</body> </html>
Exemplul 2
În exemplul de mai jos, am utilizat o functie care preia şirul de caractere introdus în formular şi il
transformă în şir scris cu majuscule.
<!DOCTYPE html> <html> <head><title>onChange</title>
<script>
function majuscule(a)
{
a.value = a.value.toUpperCase();
}
</script>
</head>
<body>
<h3>Introduceti numele și prenumele:</h3>
<table>
<tr>
<td>Numele:</td>
<td><input type="text" name="x" value="" size="20" onChange="majuscule(this)"></td>
</tr>
<tr>
<td>Prenumele:</td>
<td><input type="text" name="y" value="" size="20" onChange="majuscule(this)"></td>
199
</tr>
</table>
</form>
</body> </html>
Exemplul 3
În următorul exemplu, am utilizat o funcţie care afişează un mesaj, în cazul în care selectăm caracterele
scrise într-un câmp de tip text.
<!DOCTYPE html> <html><head>
<title>onSelect</title>
</head>
<script>
function f()
{
alert("Felicitari! \n Ati selectat textul.");
}
</script>
<body>
<h3>Selectati textul de mai jos!</h3>
<input type="text" name="data" value="Textul de mai jos :)" size=20 onSelect='f()'>
</form>
</body></html>
Exemplul 4
În exemplul de mai jos am creat un formular ce permite calcularea unei sume, pe măsură ce sunt introduse
cifrele în câmpurile formularului.
<!DOCTYPE html> <html><title>Exemplu de formular</title>
<style>
body {
background-color: #B3FFB3;
}
.titlul { font-family: "Aldine721 Lt BT", Adolescence, "Alexei Copperplate";
font-size: 18px;
font-weight: bolder;
color: #006600;
}
</style>
<script>
function PornireCalculare()
{
interval = setInterval("Calculare()",1);
}
function Calculare()
{
primul = document.adunare.x1.value;
200
alDoilea = document.adunare.x2.value;
document.adunare.x3.value = (primul * 1) + (alDoilea * 1);
}
function Oprire()
{
clearInterval(interval);
}
</script>
</head>
<body>
<p class="titlul">Introduceti numere, pentru a le aduna
</p><br />
<form name="adunare">
<input type=text name="x1" value="" onFocus="PornireCalculare();" onBlur="Oprire();" size="10">
+
<input type=text name="x2" value="" onFocus="PornireCalculare();" onBlur="Oprire();" size="10">
=
<input type=text name="x3" size="10">
Exemplul 5
În exemplul de mai jos am creat un formular ce permite transmiterea unui comentariu. La activarea
butonului de expediere a datelor apare o caseta de alertare.
<!DOCTYPE html><html>
<title>Evenimente</title>
<body>
<form onSubmit="window.alert('Multumim! Comentariul Dvs va fi analizat!')">
Comentarii:
<textarea cols=25 rows=5>
</textarea>
<input type=submit value=ok>
</form>
</body></html>
4.8. Obiectele JavaScript

JavaScript este un limbaj de programare orientat pe obiecte (POO). Un limbaj POO vă permite să vă
definiţi propriile obiecte şi propriile tipuri de variabile.
Obiectele JavaScript sunt de trei tipuri:

– Obiecte interne(integrate) – fac parte din limbajul JavaScript și anume Array, Boolean, Date,
Function, Math, Number, Object, RegExp, String şi Arguments.
– Obiectele navigatorului – nu fac parte din limbajul JavaScript, dar sunt recunoscute de navigatoare.
– Obiecte personalizate – obiecte create de utilizator.
Crearea propriilor obiecte va fi explicată mai tirziu. Vom începe prin a examina obiectele încorporate în
JavaScript şi cum sunt ele utilizate.
201
Trebuie de reţinut că un obiect este de fapt, un tip special de date care are proprietăţi şi metode.
Proprietăţi
Proprietăţile sunt valori asociate cu un obiect.
În exemplul următor, utilizăm proprietatea length a obiectului String (şir de caractere) pentru a determina
numărul de caractere memorate într-un şir:
<html>
<head></head>
<body>
<script>
var txt="Bine ati venit!";
document.write(txt.length);
</body>
</html>
Codul de mai sus va afişa valoarea: 15
Metode
Metodele sunt acţiuni ce pot fi realizate cu un obiect.
În exemplul următor, utilizăm metoda UpperCase() a obiectului String pentru a afişa un text cu litere
mari:
<html><head></head>
<body>
<script>
document.write(txt.toUpperCase());
</body></html>
Codul de mai sus va afişa şirul: BINE ATI VENIT!
4.8.1. Obiectul String

Obiectul String este folosit pentru a manipula secvenţe de caractere (text). Un obiect String este creat cu
instrucţiunea new String().
Sintaxa:
var txt = new String(string);
sau mai simplu:
var txt = string;
Proprietăţile obiectului String

Proprietate Descriere
constructor Returnează funcţia care a creat prototipul obiectului String
length Returnează lungimea şirului
prototype Permite adăugarea de proprietăţi şi metode unui obiec
Metodele obiectului String

202
Metodă Descriere
charAt() Returnează caracterul cu indexul specificat
charCodeAt() Returnează codul Unicode al caracterului cu indexul specificat
concat() Concatenează două sau mai multe şiruri şi returnează şirul obţinut
fromCharCode() Converteşte valori Unicode în caractere
indexOf() Returnează poziţia primei apariţii a unui subşir într-un şi
lastIndexOf() Returnează poziţia ultimei apariţii a unui subşir оntr-un şir
Caută potrivirile dintre un subşir şi un string şi returnează subşirul sau null (dacă
match()
subşirul nu este găsit)
replace() Caută toate apariţiile unui subşir într-un şir şi le inlocuieşte cu un nou subşir
Caută potrivirea dintre un subşir şi un şir şi returnează poziţia în care apare
search()
potrivirea
slice() Elimină o porţiune din şir şi returnează şirul extras
split() Imparte un şir în subşiruri pe baza unui caracter separator
Extrage dintr-un şir secvenţa de caractere care începe într-o anumită poziţie şi are
substr()
o anumită lungime
substring() Extrage dintr-un şir caracterele situate între două poziţii
toLowerCase() Converteşte un şir în litere mici
toUpperCase() Converteşte un şir în litere mari
valueOf() Returnează valoarea primară a unui obiect String
Metode împachetate în taguri HTML

Aceste metode returnează şirul împachetat în tagurile HTML potrivite.
Metodă Descriere
anchor() Creează o ancoră
big() Afişează şirul cu font mare
blink() Afişează un şir care clipeşte
bold() Afişează şirul cu font bold
fixed() Afişează şirul cu un font cu pas fix
fontcolor() Afişează şirul folosind o anumită culoare
fontsize() Afişează şirul cu o anumită dimensiune a fontului
italics() Afişează şirul cu font italic
203
link() Afişează şirul ca hiperlegătură
small() Afişează şirul cu font mic
strike() Afişează şirul ca tăiat
sub() Afişează şirul ca subscript (indice)
sup() Afişează şirul ca superscript (exponent)
Exemple:
Exemplul 1
Ilustrează utilizarea proprietăţii length pentru a determina lungimea unui şir.
<html> <body>
<h3>Obiectul String. Determinarea lungimii unui sir</h3> <hr/>
<script>
document.write("Sirul este: "+txt+"<br/>");
document.write("Are lungimea "+txt.length);
</script>
<p><b>Obs.</b>Sirul nu se modifica.</p>
</body> </html>
Exemplul 2
Ilustrează cum se utilizează tagurile HTML pentru a stiliza un şir.
<html> <body>
<h3>Obiectul String. Utilizarea tagurilor HTML pentru stilizarea unui sir.</h3> <hr/>
<script>
document.write("<p>Big: " + txt.big() + "</p>");
document.write("<p>Small: " + txt.small() + "</p>");
document.write("<p>Bold: " + txt.bold() + "</p>");
document.write("<p>Italic: " + txt.italics() + "</p>");
document.write("<p>Blink: " + txt.blink() + " (nu functioneaza în IE, Chrome, Safari)</p>");
document.write("<p>Fixed: " + txt.fixed() + "</p>");
document.write("<p>Strike: " + txt.strike() + "</p>");
document.write("<p>Fontcolor: " + txt.fontcolor("Blue") + "</p>");
document.write("<p>Fontsize: " + txt.fontsize(14) + "</p>");
document.write("<p>Subscript: " + txt.sub() + "</p>");
document.write("<p>Superscript: " + txt.sup() + "</p>");
document.write("<p>Link: " + txt.link("http://www.google.com") + "</p>");
</script>
<br/> <br/>
<p><b>Obs.</b>Sirul stilizat nu se modifica!</p>
</body> </html>
204
Exemplul 3
Ilustrează cum se utilizează metoda concat() pentru a concatena şiruri.
Concatenarea a două şiruri:
<html> <body>
<h3>Obiectul String. Concatenarea a doua siruri.</h3>
<hr/>
<script>
var txt1 = "Buna ";
var txt2 = "ziua!";
document.write("Primul sir este: "+txt1+"<br/>");
document.write("Al doilea sir este: "+txt2+"<br/>");
document.write("Sirul concatenat este: "+txt1.concat(txt2)+"<br/>");
</script>
<p><b>Obs.</b>Sirurile concatenate nu se modifica. Rezultatul concatenarii poate fi pastrat într-un
nou sir.</p>
</body> </html>
Concatenarea a trei şiruri:

<html> <body>
<h3>Obiectul String. Concatenarea a trei siruri.</h3>
<hr/>
<script>
var txt1="Buna ";
var txt2="ziua!";
var txt3=" Bine ati venit!";
document.write("Primul sir este: "+txt1+"<br/>");
document.write("Al doilea sir este: "+txt2+"<br/>");
document.write("Al treilea sir este: "+txt3+"<br/>");
document.write("Sirul concatenat este: "+txt1.concat(txt2,txt3)+"<br/>");
</script>
<p><b>Obs.</b>Sirurile concatenate nu se modifica. Rezultatul concatenarii poate fi pastrat într-un
nou sir.</p>
</body> </html>
Exemplul 4
Ilustrează cum se utilizează metoda indexOf() pentru a determina poziţia primei apariţii a unei valori într-
un şir.
<html> <body>
<h3>Obiectul String. Cautarea primei aparitii a unei valori în sir cu indexof().</h3> <hr/>
<script>
var str="Buna ziua!";
document.write("Sirul în care se cauta este: "+str+"<br/>");
document.write("Sirul \"Buna\" apare în sir în pozitia "+str.indexOf("Buna") + "<br />");
document.write("Sirul \"ZIUA\" apare în sir în pozitia "+str.indexOf("ZIUA") + "<br />");
document.write("Sirul \"ziua\" apare în sir în pozitia "+str.indexOf("ziua"));
</script>
205
<p><b>Obs.</b>Sirul nu se modifica în urma cautarii!</p>
</body> </html>
Valorile afişate sunt: 0 -1 5.
Observații: Dacă valoarea nu apare în şir, valoarea returnată este -1. Şirurile sunt indexate de la 0.
Exemplul 5
Ilustrează cum se utilizează metoda match() pentru a căuta un subşir într-un şir. Metoda returnează
subşirul, dacă este găsit, sau valoarea null, dacă subşirul nu este găsit în şir.
<html> <body>
<h3>Obiectul String. Cauta unui subsir într-un sir cu match().</h3> <hr/>
<script>
var str="Hello world!";
document.write("Sirul în care se cauta este: "+str+"<br/>");
document.write("Sirul cautat: "+"world"+". ");
document.write("Valoarea returnata: "+str.match("world") + "<br />");
document.write("Sirul cautat: "+"World"+". ");
document.write("Valoarea returnata: "+str.match("World") + "<br />");
document.write("Sirul cautat: "+"worlld"+". ");
document.write("Valoarea returnata: "+str.match("worlld") + "<br />");
</script>
<p><b>Obs.</b>Sirul nu se modifica în urma cautarii. Rezultatul poate fi memorat intr-o
variabila.</p>
</body> </html>
Exemplul 6
Ilustrează cum se utilizează metoda replace() pentru a înlocui o secvenţă din şir cu altă secvenţă.
<html> <body>
<h3>Obiectul String. Inlocuirea unei secvente din sir cu replace().</h3> <hr/>
<script>
var str="Vizitati Microsoft!";

document.write("Sirul initial este: "+str+"<br/>");
document.write("Subsirul care se modifica este: "+"Microsoft"+"<br/>");
document.write("Subsirul cu care se inlocuieste este: "+"Google"+"<br/>");
str.replace("Microsoft","Google");
document.write("Sirul obtinut este: "+str);
</script>
<p><b>Obs.</b>Sirul se modifica!</p>
</body> </html>
Exemplul 7
206
Ilustrează cum se foloseşte metoda slice() pentru a extrage dintr-un şir o secvenţă. Metoda returnează şirul
extras sau valoarea -1. În mod normal are două argumente: poziţia din care începe extragerea (primul
caracter are indexul 0) şi, opţional, poziţia în care se încheie extragerea. Dacă al doilea argument lipseşte,
se vor extrage toate caracterele dintre poziţia de început şi sfârşitul şirului. Dacă se folosesc valori
negative, extragerea se va face numărînd înapoi de la sfârşitul şirului.
<html> <body>
<h3>Obiectul String. Extragerea unui subsir dintr-un sir cu slice().</h3> <hr/>
<script>
var str="Bine ati venit!";

document.write("Sirul initial este: "+str+"<br/>");
// extrage toate caracterele incepand cu pozitia 0:
var txt=str.slice(0);
document.write("Subsirul extras cu slice(0): "+txt+"<br/>");
//extrage toate caracterele incepand cu pozitia 5:

txt=str.slice(5);
document.write("Subsirul extras cu slice(5): "+txt+"<br />");
//extrage ultimele 6 caractere de la sfarsitul sirului:

txt=str.slice(-6);
document.write("Subsirul extras cu slice(-6): "+txt+"<br />");
//extrage primul caracter din sir:

txt=str.slice(0,1);
document.write("Subsirul extras cu slice(0,1): "+txt+"<br />");
//extrage caracterele dintre pozitiile 5 și 10

txt=str.slice(5,10);
document.write("Subsirul extras cu slice(5,10): "+txt+"<br />");
</script>
<p><b>Obs.</b> Sirul nu se modifica în urma extragerii. Subsirul extras poate fi memorat intr-o
variabila.</p>
</body> </html>
Exemplul 8
Ilustrează utilizarea metodei split() pentru a împărţi un şir în subşiruri pe baza unui caracter separator.
Dacă caracterul separator este omis, se va returna întreg şirul. Dacă caracterul este şirul vid, şirul va fi
împărţit caracter cu caracter. Opţional, se poate preciza şi numărul maxim de împărţiri.
<html> <body>
<h3>Obiectul String. Impartirea unui sir în subsiruri cu split().</h3> <hr/>
<script>
var str="Bine ati venit";

document.write("Sirul initial: "+str+"<br/>");
//este returnat întreg sirul
207
document.write("Sirurile returnate cu split(): "+str.split() + "<br />");
//sunt returnate cele trei cuvânte din sir
document.write("Sirurile returnate cu split(\" \"): "+str.split(" ") + "<br />");
//sunt returnate caracterele din şir
document.write("Sirurile returnate cu split(\"\"): "+str.split("") + "<br />");
//sunt returnate numai primele doua cuvânte din sir
document.write("Subsirurile returnate cu split(\" \",2): "+str.split(" ",2)+"<br/>");
</script>
<p><b>Obs.</b> Sirul initial nu se modifica. Rezultatul poate fi memorat intr-o variabila.
</body> </html>
4.8.2. Obiectul Date

Obiectul Date este utilizat pentru a lucra cu date calendaristice şi ore. Un obiect de tip Date este creat cu
instrucţiunea new Date(). Sunt patru metode de a instanţia un obiect Date:
1) var d = new Date();
2) var d = new Date(milisecunde);
3) var d = new Date(dataString);
4) var d = new Date(an, luna, zi, ore, minute, secunde, milisecunde);
Setarea datei
Putem manevra uşor datele calendaristice folosind metodele obiectului Date.
În exemplul următor, data este setată la 19 februarie 2010:
var myDate=new Date();
myDate.setFullYear(2010,1,19);
În exemplul următor, data este setată la şapte zile în viitor:

myDate.setDate(myDate.getDate()+7);
Compararea a două date calendaristice

Exemplul următor compară data curentă cu 19 februarie 2010:
myDate.setFullYear(2010,1,19);
var today = new Date();
if (myDate>today)
{
alert("Astazi este înainte de 19 Februarie 2010");
}
else
{
alert("Astazi este dupa 19 Februarie 2010");
}
208
Metodele obiectului Date
Metodă Descriere
getDate() Returnează ziua din lună (între 1 şi 31)
getDay() Returnează ziua din săptămînă (0-6)
getFullYear() Returnează anul (patru cifre)
getHours() Returnează ora (0-23)
getMilliseconds() Returnează milisecundele (0-999)
getMinutes() Returnează minutele (0-59)
getMonth() Returnează luna (0-11)
getSeconds() Returnează secundele (0-59)
getTime() Returnează numărul de milisecunde scurse de la 1.01.1970
getTimezoneOffset() Returnează diferenţa dintre GMT şi timpul local, în minute
Analizează(parsează) o dată ca şir de caractere şi returnează numărul de
parse()
milisecunde scurse de la 1.01.1970
setDate() Setează data din lună (1-31)
setFullYear() Setează anul (patru cifre)
setHours() Setează ora (0-23)
setMilliseconds() Setează milisecundele (0-999)
setMinutes() Setează minutele (0-59)
setMonth() Setează lunile (0-11)
setSeconds() Setează secundele (0-59)
Setează o dată şi o oră adunînd sau scăzînd un anumit număr de milisecunde
setTime()
la/din 1.01.1970
Converteşte porţiunea corespunzătoare datei calendaristice dintr-un obiect
toDateString()
Date într-un şir de caractere
toString() Converteşte un obiect Date într-un şir de caractere
Converteşte porţiunea corespunzătoarea timpului dintr-un obiect Date într-un
toTimeString()
şir de caractere
valueOf() Returnează valoarea primară a unui obiect Date
Exemple:
Exemplul 1
Ilustrează utilizarea metodei Date() pentru a obţine data curentă.
209
<html> <body>
<h3>Obiectul Date. Obtinerea datei curente cu Date().</h3> <hr/>
<script>
document.write("Astazi este: "+Date());
Exemplul 2
Ilustrează utilizarea metodei getTime() pentru a calcula anii scurşi din 1970 pină în prezent.
<html> <body> <h3>Obiectul Date. Utilizarea metodei getTime().</h3>
<hr/>
<script>
var d=new Date();
document.write("Au trecut "+d.getTime() + " milisecunde din 01.01.1970 și până acum.");
</script>
</body> </html>
Exemplul 3
Ilustrează utilizarea metodei setFullYear() pentru a seta o dată specifică.
<html> <body> <h3>Obiectul Date. Setarea datei cu setFullYear().</h3> <hr/>
<script>
var d = new Date();

d.setFullYear(2010,1,19);
document.write("Data a fost setata la "+d);
Exemplul 4
Ilustrează utilizarea metodei toString() pentru a converti data curentă într-un şir de caractere.
<html> <body> <script>
var d=new Date();
document.write(d.toString());
</script>
</body> </html>
Exemplul 5
Ilustrează utilizarea metodei getDay() şi a unui tablou pentru a scrie denumirea zilei din săptămâna
curentă.
<html> <body> <h3>Obiectul Date. Utilizarea metodei getDay() pentru a determina ziua din
saptamana.</h3> <hr/>
<script>
var d=new Date();

var weekday=new Array(7);
210
weekday[0]="Duminica";
weekday[1]="Luni";
weekday[2]="Marti";
weekday[3]="Miercuri";
weekday[4]="Joi";
weekday[5]="Vineri";
weekday[6]="Sambata";
document.write("Astazi este " + weekday[d.getDay()]);
Exemplul 6
Ilustrează cum se poate afişa un ceas într-o pagină web.
function ceas()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
//functia urmatoare adauga un zero în fata
//numerelor<10
m=verifica(m);
s=verifica(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('ceas()',500);
}
function verifica(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="ceas()">
<h3>Obiectul String. Afisarea unui ceas.</h3> <hr/>
<div id="txt"></div>
</body> </html>
211
4.8.3. Obiectul Array
Un tablou este o variabilă specială care poate păstra la un moment dat mai multe valori de un anumit tip.
Dacă aveţi o listă de elemente, animale de companie de exemplu, aţi putea păstra valorile în variabile
simple, ca în exemplul următor:
pet1="Caine";
pet2="Pisica";
pet3="Papagal";
Desigur, problema se complică dacă aveţi de memorat zeci, sau sute de valori. Cea mai bună soluţie este
să folosiţi tablouri. Un tablou poate reţine toate valorile sub un singur nume şi puteţi accesa fiecare
valoare stocată în tablou folosind numele tabloului şi indexul valorii.
Crearea unui tablou

Un tablou poate fi definit în trei moduri:
1:
var pets=new Array();
//tablou obisnuit
pets[0]="Caine";
pets[1]="Pisica";
pets[2]="Papagal";
2:
var pets=new Array("Caine","Pisica","Papagal");
//tablou condensat
3:
var pets=["Caine","Pisica","Papagal"];
//tablou literal
Observații: Dacă în tablou stocaţi valori numerice sau logice, tipul tabloului va fi Number sau
Boolean, în loc de String.
Accesarea elementelor dintr-un tablou

Puteţi accesa un element dintr-un tablou precizînd numele tabloului şi indexul elementului. Primul
element din tablou are indexul 0.
Următoarea linie de cod
document.write(pets[0]);
va afişa şirul: Caine
Modificarea valorilor dintr-un tablou

Pentru a modifica o valoare dintr-un tablou, este suficient să atribuiţi o nouă valoare elementului
respectiv, ca în exemplul următor:
pets[0]="Iguana";
Proprietăţile obiectului Array

Proprietatea Descriere
212
constructor Returnează funcţia care a creat prototipul obiectului Array
length Setează sau returnează numărul elementelor stocate în tablou
prototype Permite adăugare de proprietăţi şi metode unui obiect
Metodele obiectului Array

Metodă Descriere
concat() Concatenează două sau mai multe tablouri şi returnează tabloul obţinut
join() Concatenează toate elementele unui tablou într-un şir de caractere
pop() Inlătură ultimul element dintr-un tablou şi returnează respectivul element
Adaugă noi elemente la sfârşitul unui tablou şi returnează noua lungime a
push()
tabloului
reverse() Răstoarnă ordinea elementelor dintr-un tablou
shift() Inlătură primul element dintr-un tablou şi returnează respectivul element
slice() Selectează o parte dintr-un tablou şi returnează elementele selectate
sort() Returnează secundele (0-59)
getTime() Sortează elementele unui tablou
splice() Adaugă/Înlătură elemente dintr-un tablou
toString() Converteşte un tablou în şir de caractere şi returnează rezultatul
Adaugă noi elemente la începutul unui tablou şi returnează noua lungime a
unshift()
tabloului
valueOf() Returnează valoarea primară a unui tablou
Exemple:
Exemplul 1
Ilustrează crearea unui tablou, atribuirea de valori şi afişarea elementelor tabloului.
<html> <head>
<h3>Obiectul Array. Crearea unui tablou, initializarea și afisarea elementelor.</h3> <hr/>
<script>
pets[0] = "Pisica";
pets[1] = "Caine";
pets[2] = "Perus";
document.write("Elementele memorate în tablou sunt:"+"<br/>");

for (i=0;i<pets.length;i++)
{
document.write(pets[i] + "<br />");
213
}
Exemplul 2
Ilustrează utilizarea instrucţiunii for...in pentru a parcurge elementele unui tablou.
<html> <body>
<h3>Obiectul Array. Afisarea elementelor unui tablou cu instructiunea for..in.</h3> <hr/>
<script>
var x;
pets[0] = "Pisica";
pets[1] = "Caine";
pets[2] = "Perus";
document.write("Elementele memorate în tablou sunt:"+"<br/>");

for (x în pets)
{
document.write(pets[x] + "<br />");
}
Exemplul 3
Ilustrează utilizarea metodei concat() pentru a concatena trei tablouri.
<html> <body> <h3>Obiectul Array. Concatenarea a trei tablouri cu concat().</h3> <hr/>
<script>
var parinti = ["Maria", "George"];

var copii = ["Elena", "Mihai"];
var frati = ["Paul", "Dan"];
var familie = parinti.concat(copii,frati);
document.write("Parinti: "+parinti+"<br/>");
document.write("Copii: "+copii+"<br/>");
document.write("Frati: "+frati+"<br/>");
document.write("Familia: "+familie);
</script>
<p><b>Obs.</b>Tablourile concatenate nu se modifica. Rezultatul concatenarii este un nou
tablou.</p>
</body> </html>
Exemplul 4
Ilustrează utilizarea metodei join() pentru a concatena toate elementele unui tablou într-un şir de
caractere.
<html> <body>
<h3>obiectul Array. Concatenarea elementelor unui tablou într-un sir de caractere cu join().</h3>
214
<hr/>
<script>
var fructe = ["Mere", "Pere", "Banane", "Kiwi"];

document.write("Tabloul conține valorile: "+fructe+"<br/>");
document.write("Sirul concatenat cu join(\" \"): "+fructe.join(" ") + "<br />");
document.write("Sirul concatenat cu join(\"+\"): "+fructe.join("+") + "<br />");
document.write("Sirul concatenat cu join(\" și \"): "+fructe.join(" și ")+"<br/>");
</script>
<p><b>Obs.</b>Tabloul nu se modifica. Sirul concatenat poate fi memorat intr-o variabila.
</body> </html>
Exemplul 5
Ilustrează utilizarea metodei pop() pentru a înlătura ultimul element dintr-un tablou.
<html> <body>
<h3>Obiectul Array. Eliminarea ultimului element din tablou cu pop().</h3> <hr/>
<script>
var pets = ["Pisica", "Caine", "Hamster", "Iguana"];
document.write("Tablou initial conține valorile: "+pets+"<br/>");

document.write("S-a eliminat valoarea: "+pets.pop() + "<br />");
document.write("Tabloul dupa eliminare: "+pets + "<br />");
document.write("S-a eliminat valoarea: "+pets.pop() + "<br />");
document.write("Tabloul dupa eliminare: "+pets);
</script>
<p><b>Obs.</b> Tabloul se modifica! Valoarea eliminata poate fi memorata intr-o variabila.</p>
</body> </html>
Exemplul 6
Ilustrează utilizarea metodei push() pentru a adăuga noi elemente la sfârşitul unui tablou. Pot fi adăugate
mai multe valori simultan. Valorile trebuie separate prin virgulă.
<html> <body>
<h3>Obiectul Array. Adaugarea de noi elemente la sfarsitul tabloului cu push().</h3> <hr/>
<script>
var pets = ["Pisica", "Caine", "Perus", "Hamster"];
document.write("Tabloul initial: "+pets+"<br/>");

document.write("Se adauga valorile: "+"Iguana"+"<br/>");
pets.push("Iguana");
document.write("Tabloul obtinut: "+pets+"<br/>");
document.write("Se adauga valorile: "+"Pesti și Iepure"+"<br/>");
k=pets.push("Pesti","Iepure");
215
document.write("Tabloul obtinut: "+pets+"<br/>");
document.write("Tabloul final are "+k+" elemente");
</script>
<p><b>Obs.</b> Tabloul se modifica. Metoda returneaza noua lungime a tabloului și valoarea poate
fi memorata intr-o variabila.</p>
</body> </html>
Exemplul 7
Ilustrează utilizarea metodei reverse() pentru a inversa ordinea elementelor dintr-un tablou.
<html> <body>
<h3>Obiectul Array. Inversarea ordinii elementelor din tablou cu reverse().</h3> <hr/>
<script>
var friends = ["Mihai", "Elena", "Andra", "Dan"];
document.write("Tabloul initial: "+friends+"<br/>");
friends.reverse();
document.write("Tabloul dupa inversare: "+friends);
Exemplul 8
Ilustrează utilizarea metodei shift() pentru a elimina primul element dintr-un tablou.
<html> <body>
<h3>Obiectul Array. Eliminarea primului element din tablou cu shift().</h3> <hr/>
<script>

var x=friends.shift();
document.write("Elementul eliminat: "+x+"<br/>");
document.write("Tabloul dupa eliminare: "+friends);
</script>
<p><b>Obs.</b> Tabloul se modifica. Metoda returneaza elementul eliminat și rezultatul poate fi
memorat intr-o variabila.</p>
</body> </html>
Exemplul 9
Ilustrează cum se selectează elementele unui tablou cu metoda slice(). Metoda are două argumente: primul
precizează poziţia de început a secvenţei selectat, iar al doilea poziţia de sfârşit. Dacă al doilea argument
lipseşte, se vor selecta toate elementele pînă la sfârşitul tabloului. Dacă argumentul este negativ, se vor
selecta elementele de la sfârşitul şirului către început.
<html> <body> <h3>Obiectul Array. Selectare elementelor din tablou cu slice().</h3> <hr/>
<script>
216
var pets = ["Caine", "Pisica", "Papagal", "Hamster"];
var x=pets.slice(0,1);
document.write("Elementele selectate cu slice(0,1): "+x+"<br/>");
document.write("Elementele selectate cu slice(1): "+pets.slice(1) + "<br />");
document.write("Elementele selectate cu slice(-2): "+pets.slice(-2) + "<br />");
</script>
<p><b>Obs.</b> Tabloul nu se modifica. Elementele selectate pot fi memorate intr-o variabila.</p>
</body> </html>
Exemplul 10
Ilustrează utilizarea metodei sort() pentru a sorta alfabetic crescător un tablou de şiruri de caractere.
Metoda sortează implicit în ordine alfabetică crescătoare.
<html> <body> <h3>Obiectul Array. Sortarea unui tablou cu sort().</h3> <hr/>
<script>

document.write("Tabloul sortat: "+friends.sort());
</script>
<p><b>Obs.</b> Tabloul se modifica!</p>
</body> </html>
Exemplul 11
Ilustrează utilizarea metodei sort() pentru a sorta descendent un tablou de numere. Numerele nu vor fi
sortate corect. Trebuie adăugată o funcţie care să compare numerele.
<html> <body>
<h3>Obiectul Array. Sortarea unui tablou cu valori numerice.</h3> <hr/>
<script>
function sortDesc(a, b)
{
return b - a;
}
function sortCresc(a,b)
{
return a-b;
}
var n = new Array(10,5,40,25,100,1);

document.write("Tabloul initial: "+n+"<br/>");
document.write("Tabloul sortat crescator: "+n.sort(sortCresc)+"<br/>");
217
document.write("Tabloul sortat descrescator: "+n.sort(sortDesc));
</script>
<p><b>Obs.</b> în urma sortarii tabloul se modifica!</p>
</body> </html>
Exemplul 12
Ilustrează utilizarea metodei splice() pentru a adăuga un element în poziţia 3 din tablou. Metoda are trei
argumente: primul, obligatoriu precizează poziţia în care vor fi adăugate/şterse valori, al doilea,
obligatoriu, reprezintă numărul de valori care vor fi şterse (dacă are valoarea 0, nu se vor şterge ci se vor
insera valori) şi, al treilea, opţional, care reprezintă noile valori adăugate în tablou.
<html> <body>
<h3>Obiectul Array. Inserarea/stergerea elementelor dintr-o pozitie a tabloului cu splice().</h3> <hr/>
<script>
var friends = ["Ana", "Mircea", "Dan", "Maria"];

document.write("Se adauga valoarea \"Andra\" în pozitia 3 din tablou cu splice(3,0)"+"<br/>");
friends.splice(3,0,"Andra");
document.write("Tabloul obtinut: "+friends+"<br/>");
document.write("Se sterg din tablou primele doua valori cu splice(0,2)"+"<br/>");
document.write("Valorile sterse: "+friends.splice(0,2)+"<br/>");
document.write("Tabloul obtinut: "+friends);
</script>
<p><b>Obs.</b> Tabloul se modifica. Dacă metoda elimina elemente din tablou, va returna elementele
eliminate.</p>
</body> </html>
Exemplul 13
Ilustrează utilizarea metodei toString() pentru a converti un tablou într-un şir de caractere. Metoda
returnează şirul de caractere, valorile fiind separate prin virgulă.
<html> <body>
<h3>Obiectul Array. Convertirea unui tablou în sir de caractere cu toString().</h3> <hr/>
<script>
var n = new Array(14,0,7,-4,25,13,7);

document.write("Tabloul conține valorile:"+"<br/>");
for(x în n) document.write(n[x]+"<br/>");
document.write("Sirul de caractere obtinut:" +n.toString());
</script>
<p><b>Obs.</b> Tabloul nu se modifica. Metoda returneaza sirul de caractere obtinut.</p>
</body> </html>
218
Exemplul 14
Ilustrează utilizarea metodei unshift() pentru a adăuga noi valori la începutul unui tablou
<html> <body>
<h3>Obiectul Array. Adaugarea de elemente la inceputul unui tablou cu unshift().</h3> <hr/>
<script>
var pets = ["Pisica", "Caine", "Iguana", "Pesti"];

document.write("Se adauga valoarea \"Papagal\" "+"<br/>");
pets.unshift("Papagal");
document.write("Tabloul dupa adaugare: "+pets+"<br/>");
document.write("Se adauga valorile \"Perus\" și \"Broasca testoasa\" "+"<br/>");
k=pets.unshift("Perus","Broasca testoasa");
document.write("Tabloul dupa adaugare: "+pets+"<br/>");
document.write("Tabloul final are "+k+" elemente.");
</script>
<p><b>Nota:</b> Metoda unshift() nu lucreaza corect în Internet Explorer; returneaza undefined!</p>

<p><b>Obs.</b>Tabloul se modifica. Metoda returneaza numărul de elemente din tablou dupa adaugare.
<br>Valoarea poate fi memorata intr-o variabila.</p>
</body> </html>
4.8.4. Obiectul Boolean

Obiectul Boolean este utilizat pentru a converti o valoare ne-booleană într-o valoare booleană (cu
valoarea true sau false). Crearea unui obiect boolean poate fi realizată ca în secvenţa de cod următoare:
var sem=new Boolean();
Observații: Dacă obiectul Boolean nu are valoare iniţială sau are una din valorile 0, -0, null, "",
false, undefined, sau NaN(Not a Number), obiectul este iniţializat cu valoarea false. În caz
contrar, valoarea obiectului va fi true.
Toate declaraţiile din liniile următoare de cod creează un obiect boolean iniţializat cu false:
var sem=new Boolean();
var sem=new Boolean(0);
var sem=new Boolean(null);
var sem=new Boolean("");
var sem=new Boolean(false);
var sem=new Boolean(NaN);
Toate declaraţiile din liniile următoare de cod crează un obiect boolean iniţializat cu true:
var sem=new Boolean(true);
var sem=new Boolean("true");
219
var sem=new Boolean("false");
var sem=new Boolean("home");
Proprietăţile obiectului Boolean

constructor Returnează funcţia care a creat prototipul obiectului
prototype Permite adăugarea de proprietăţi şi metode unui obiect
Metodele obiectului Boolean

Metodă Descriere
toString() Converteşte o valoare booleană în şir de caractere şi returnează rezultatul
valueOf() Returnează valoarea primară a unui obiect Boolean
Exemplu
Ilustrează cum se verifică valoarea unui obiect Boolean.
var b1=new Boolean( 0);
var b2=new Boolean(1);
var b3=new Boolean("");
var b4=new Boolean(null);
var b5=new Boolean(NaN);
var b6=new Boolean("false");
document.write("0 are valoarea "+ b1 +"<br />");

document.write("1 are valoarea "+ b2 +"<br />");
document.write("Un sir vid are valoarea "+ b3 + "<br />");
document.write("null are valoarea "+ b4+ "<br />");
document.write("NaN are valoarea "+ b5 +"<br />");
document.write("Sirul 'false' are valoarea "+ b6 +"<br />");
</script>
</body> </html>
4.8.5. Obiectul Math

Obiectul Math permite realizarea prelucrărilor matematice. Obiectul include constante matematice şi
metode. Obiectul nu are constructor. Toate proprietăţile şi metodele pot fi utilizate fără a crea efectiv un
obiect.
Sintaxa de utilizare:
var pi=Math.PI;
var x=Math.sqrt(16);
Constante matematice
În JavaScript se pot utiliza opt constante matematice accesibile prin obiectul Math. Ele pot fi utilizate cu
următoarea sintaxă:
220
Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
Metode matematice
Exemplul următor ilustrează utilizarea metodei round() pentru a rotunji un număr la cel mai apropiat
întreg:
document.write(Math.round(4.7));
Exemplul următor utilizează metoda random() pentru a genera un număr aleator cuprins între 0 şi 1:
document.write(Math.random());
Exemplul următor utilizează metodele floor() şi random() pentru a genera un număr aleator cuprins între
0 şi 10:
document.write(Math.floor(Math.random()*11));
Proprietăţile obiectului Math

E Returnează constanta lui Euler (cca. 2.718)
LN2 Returnează logaritm natural din 2 (cca. 0.693)
LN10 Returnează logaritm natural din 10 (cca. 2.302)
LOG2E Returnează logaritm în baza 2 din E (cca. 1.442)
LOG10E Returnează logaritm în baza 10 din E (cca. 0.434)
PI Returnează PI (cca. 3.14159)
SQRT1_2 Returnează rădăcina pătrată din 1/2 (cca. 0.707)
SQRT2 Returnează rădăcina pătrată din 2 (cca. 1.414)
Metodele obiectului Math

Metodă Descriere
abs(x) Valoarea absolută a lui x
acos(x) Arccosinus de x, în radiani
asin(x) Arcsinus de x, în radiani
atan(x) Arctangentă de x ca valoare numerică între -PI/2 şi PI/2 radiani
ceil(x) Rotunjeşte x la întreg prin adaos
cos(x) Cosinus de x (x în radiani)
221
exp(x) Valoarea lui Ex
floor(x) Rotunjeşte x la întreg prin lipsă
log(x) Logaritm natural din x
max(x,y,z,...,n) Valoarea maximă din şir
min(x,y,z,...,n) Valoarea minimă din şir
pow(x,y) Valoarea lui x la puterea y
random() Un număr aleator între 0 şi 1
round(x) Rotunjeşte x la cel mai apropiat întreg
sin(x) Sinus de x (x în radiani)
sqrt(x) Rădăcină pătrată din x
tan(x) Tangenta unui unghi
Exemple:
Exemplul 1
Ilustrează utilizarea metodei max() pentru a determina maximul a două sau mai multe valori.
<html> body>
<script>
document.write(Math.max(5,10) + "<br />");
document.write(Math.max(0,150,30,20,38) + "<br />");
document.write(Math.max(-5,10) + "<br />");
document.write(Math.max(-5,-10) + "<br />");
document.write(Math.max(1.5,2.5));
</script>
</body> </html>
Exemplul 2
Ilustrează utilizarea metodei min() pentru a determina minimul a două sau mai multe valori.
<html> <body>
<script>
document.write(Math.min(5,10) + "<br />");
document.write(Math.min(0,150,30,20,38) + "<br />");
document.write(Math.min(-5,10) + "<br />");
document.write(Math.min(-5,-10) + "<br />");
document.write(Math.min(1.5,2.5));
</script>
</body> </html>
Exemplul 3
Convertirea gradelor din Celsius în Fahrenheit şi reciproc:
<html> <head>
222
<script>
function convert(degree)
{
if (degree=="C")
{
F=document.getElementById("c").value * 9 / 5 + 32;
document.getElementById("f").value=Math.round(F);
}
else
{
C=(document.getElementById("f").value -32) * 5 / 9;
document.getElementById("c").value=Math.round(C);
}
}
</script>
</head>
<body>
<p><b>Introduceti un număr în unul din cele doua campuri:</b></p>
<form>
<input id="c" name="c" onkeyup="convert('C')"> grade Celsius<br />
egal<br />
<input id="f" name="f" onkeyup="convert('F')"> grade Fahrenheit
</form>
</body> </html>
4.8.6. Obiectul RegExp

Obiectul RegExp este folosit pentru a realiza căutări şi înlocuiri într-un text. RegExp este prescurtarea
pentru expresie regulată. Când realizaţi căutări într- un text, puteţi defini modele de căutare cu ajutorul
obiectului RegExp.
Un model simplu poate fi un singur caracter. Un model mai complicat conţine mai multe caractere şi poate
fi utilizat pentru a analiza, verifica formatul, înlocui etc. O expresie regulată este un obiect care descrie
modelul căutat în text.
Definire
Un obiect RegExp poate fi definit cu una din următoarele forme:
var txt=new RegExp(pattern,modifiers);
sau, mai simplu:
var txt=/pattern/modifiers;
 pattern specifică modelul căutat

 modifiers specifică dacă cătarea este globală, case-senzitivă etc.
Următoarea linie de cod defineşte un obiect RegExp numit m1 cu modelul "d":

var m1=new RegExp("d");
Când folosiţi obiectul m1 ca să căutaţi într-un şir, va fi găsită litera "d".
223
Modificatorii
Modificator Descriere
i Caută potrivirea fără a face diferenţa între literele mici şi mari
g Realizează o căutare globală (găseşte toate potrivirile, nu numai prima)
m Caută potrivirea pe mai multe linii
Parantezele pătrate
Sunt utilizate pentru a defini un şir de caractere.
Expression Descriere
[abc] Găseşte orice caracter precizat între paranteze
[^abc] Găseşte orice caracter diferit de cele precizate
[0-9] Găseşte o cifră între 0 şi 9
[a-z] Găseşte orice literă mică
[A-Z] Găseşte orice literă mare
[a-Z] Găseşte orice literă, mare sau mică
[red|blue|green] Găseşte oricare dintre alternativele specificate
Metacaracterele
Sunt caracterele care au o semnificaţie specială:
Metacaracter Descriere
Găseşte un singur caracter (orice caracter diferit de linie nouă şi sfirşit
.
de linie).
\w Caută un caracter de cuvânt (litere mici sau mari, cifre şi underscore)
\W Găseşte un caracter care nu este de cuvânt
\d Găseşte o cifră
\D Găseşte un caracter care nu este cifră
\s Caută un spaţiu alb
\S Caută un caracter diferit de spaţiu
\b Caută o potrivire la începutul/sfârşitul unui cuvânt
\B Caută o potrivire care nu este la începutul/sfârşitul unui cuvânt
\0 Caută un caracter NUL
\n Caută un caracter linie nouă
\f Caută un caracter form feed
224
\r Caută un caracter retur de car
\t Caută un caracter tab
\v Caută un tab caracter
Cuantificatori
Cuantificator Descriere
n+ Caută orice şir care conţine cel puţin un caracter n
n* Caută orice şir care conţine 0 sau mai multe apariţii ale caracterului n
n? Caută orice şir care conţine 0 sau o apariţie a caracterului n
n{X} Caută orice şir care conţine o secvenţă de X caractere n
n{X,Y} Caută orice şir care conţine o secvenţă de X sau Y caractere n
n{X,} Caută orice şir care conţine o secvenţă de cel puţin X caractere n
n$ Caută orice şir care se incheie cu caracterul n
^n Caută orice şir care începe cu caracterul n
?=n Caută orice şir care este urmat de şirul n
?!n Caută orice şir care nu este urmat de şirul n
Proprietăţile obiectului RegExp

global Specifică dacă modificatorul "g" este setat
ignoreCase Specifică dacă modificatorul "i" este setat
lastIndex Specifică indexul de la care începe căutarea următoarei potriviri
multiline Specifică dacă modificatorul "m" este setat
source Textul din modelul RegExp
Metodele obiectului RegExp

Obiectul RegExp are trei metode: test(), exec() şi compile().
Metoda test()
Caută într-un şir un model şi returnează true sau false.
Exemplu:
<html> <body>
<script>
var m1=new RegExp("e");
document.write(m1.test("Cele mai frumoase carti le pastrez în amintire"));
</script>
225
</body></html>
Deoarece modelul "e" apare în şir, metoda va returna valoarea true care va fi afişată.
Metoda exec()
Caută în text un model şi returnează modelul, dacă acesta este găsit, sau valoarea null, dacă modelul nu
apare în text.
Exemplu:
<html> <body>
<script>
document.write(m1.exec("Cele mai frumoase carti le pastrez în amintire"));

</script>
</body></html>
Deoarece modelul "e" apare în şir, metoda va returna valoarea e care va fi afişată.
Puteţi adăuga al doilea parametru obiectului RegExp, pentru a specifica modul de căutare. Spre exemplu,
dacă doriţi să găsiţi toate apariţiile unui caracter, puteţi folosi parametrul "g" ("global").
Când utilizaţi parametrul "g", metoda exec() lucrează astfel:
 Găseşte prima apariţie a modelului "e" şi îi memorează poziţia
 Dacă executaţi din nou metoda exec(), căutarea va începe de la poziţia memorată anterior.
Exemplu:
<html> <body>
<script>
var m1=new RegExp("e","g");
do
{
result=m1.exec("Cele mai frumoase carti le pastrez în amintire");
document.write(result);
}
while (result!=null)
</script>
</body></html>
Deoarece modelul "e" apare de şase ori în text, programul de mai sus va afişa secvenţa:eeeeeenull
Metoda compile()
Este utilizată pentru a modifica conţinutul obiectului RegExp.
Metoda poate schimba modelul căutat şi poate adăuga sau elimina al doilea parametru.
Exemplu:
<html> <body>
<script>
m1.compile("d");
226
</script>
</body></html>
Deoarece modelul "e" apare în şir, dar modelul "d" nu apare, programul anterior va afişa valorile:
truefalse
Exemple:
Exemplul 1
Ilustrează utilizarea metodei match() a obiectului String pentru a găsi toate caracterele precizate în model
cu ajutorul parantezelor pătrate.
<html> <body>
<script>
var str="Ce mai faci?";
var m1=/[a-h]/g;
document.write(str.match(m1));
</script>
</body> </html>
Programul va afişa rezultatul: e,a,f,a,c
Exemplul 2
Ilustrează utilizarea metodei match() a obiectului String pentru a găsi toate caracterelor diferite de cele
din model.
<html> <body>
<script>
var str="Ce mai faci?";
var m1=/[^a-h]/g;
</script>
</body> </html>
Programul anterior va afişa rezultatul: C, ,m,i, ,i,?
Exemplul 3
Ilustrează cum se poate construi un model care să găsească toate secvenţele în care un caracter poate avea
orice valoare.
<html> <body>
<script>
var str="Pisica nu are blana tarcata";
var m1=/a.a/g;
</script>
</body> </html>
Programul va găsi toate ecvenţele de trei caractere în care primul şi ultimul caracter este „a”.
Rezultatul afişat pentru şirul de mai sus este: ana,ata
Exemplul 4
Ilustrează cum se poate construi un model care să găsească toate caracterele care nu fac parte dintr-un
cuvânt.
227
<html> <body>
<script>
var str="Ai obtinut 75%!";
var m1=/\W/g;
</script>
</body> </html>
Programul anterior va afişa rezultatul: , ,%,!
Exemplul 5
Ilustrează cum se poate construi un model cu care să înceapă sau să se sfirşească un cuvânt.
<html> <body>
<script>
var str="Vizitati Google";
var m1=/\bGo/g;
</script>
</body> </html>
Dacă nu este găsit nici-un cuvânt care începe sau se sfârşeşte cu modelul dat, metoda match() va returna
valoarea null. Pentru exemplul considerat anterior, există în text un cuvânt care se potriveşte şi metoda
returnează modelul.
Rezultatul afişat este: Go
Exemplul 6
Ilustrează cum se pot găsi toate secvenţele dintr-un text, în care un anumit caracter apare cel puţin o dată.
<html> <body>
<script>
var str="Tu creezi pagini web interesante!";
var m1=/e+/g;
do
{
result=m1.exec(str);
document.write(result); document.write(" ");
}
while(result!=null)
</script>
</body> </html>
Programul anterior va determina toate secvenţele din text în care caracterul „e” apare cel puţin o dată (în
poziţii consecutive).
Rezultatul afişat de program este: ee e e e e null
Exemplul 7
Ilustrează cum se pot găsi secvenţele de text în care un anumit caracter apare de minim x ori.
<html> <body>
<script>
228
var str="Aveti 10, 100, 1000 sau 10000 de lei?";
var m1=/\d{3,}/g;
</script>
</body> </html>
Programul anterior afişează rezultatul: 100,1000,10000, adică secvenţele care conţin cel puţin trei cifre
zecimale.
Exemplul 8
Ilustrează cum se pot găsi toate subşirurile dintr-un text, care sunt urmate de un subşir dat.
<html> <body>
<script>
var str="eu am o pisica, dar eu am și un papagal";
var m1=/eu(?= am)/g;
</script>
</body></html>
Programul anterior determină toate şirurile „eu” care sunt urmate de şirul „am”.
Rezultatul afişat este: eu,eu
Obiectul Number
Obiectul Number este un container pentru valorile numerice de bază.
Obiectele Number sunt create cu următoarea sintaxă:
var nume = new Number(valoare);
Obs: Dacă parametrul valoare nu poate fi convertit într-un număr, va fi returnată valoarea NaN (Not-
a-Number).
Proprietăţile obiectului Number

constructor Returnează funcţia care a creat prototipul obiectului
MAX_VALUE Returnează cel mai mare număr posibil în JavaScript
MIN_VALUE Returnează cel mai mic număr posibil în JavaScript
NEGATIVE_INFINITY Reprezintă infinitul negativ (returnat la depăşire)
POSITIVE_INFINITY Reprezintă infinitul pozitiv (returnat la depăşire)
prototype Permite adăugarea de proprietăţi şi metode
Metodele obiectului Number

Metodă Descriere
toExponential(x) Converteşte numărul într-o notaţie exponenţială
229
toFixed(x) Formează un număr cu x cifre după virgulă
toPrecision(x) Formează un număr cu lungimea x
toString() Reprezintă infinitul negativ (returnat la depăşire)
Converteşte un obiect Number în şir de caractere. Dacă metoda are
POSITIVE_INFINITY parametru, acesta precizează baza în care este reprezentat numărul
convertit în şir.
valueOf() Returnează valoarea primară a obiectului
Exemple:
Exemplul 1
Ilustrează cum se afişează cel mai mare număr din JavaScript.
<html> <body>
<script>
document.write(Number.MAX_VALUE);
</script>
</body> </html>
Exemplul 2
Ilustrează cum se stabileşte numărul de zecimale afişate.
<html> <body>
<script>
var num = new Number(27.2547);
document.write(num.toFixed()+"<br />");
document.write(num.toFixed(1)+"<br />");
document.write(num.toFixed(3)+"<br />");
document.write(num.toFixed(10));
</script>
</body> </html>
Exemplul 3
Ilustrează cum se stabileşte precizia numărului afişat (numărul total de cifre afişate).
<html> <body>
<script>
var num = new Number(31.1593);
document.write(num.toPrecision()+"<br />");
document.write(num.toPrecision(2)+"<br />");
document.write(num.toPrecision(3)+"<br />");
document.write(num.toPrecision(10));
</script>
</body> </html>
Exemplul 4
Ilustrează cum se converteşte în şir un număr, folosind diferite baze de numeraţie.
230
var num=new Number(31);
document.write(num.toString()+"<br />"); //numărul este reprezentat în baza 10 (implicit)
document.write(num.toString(2)+"<br />"); //numărul este reprezentat în baza 2
</script>
</body> </html>
4.8.7. Obiectul Navigator

Obiectul Navigator conţine informaţii despre browserul vizitatorului. Aproape orice exemplu din acest
curs funcţionează în browserele care recunosc JavaScript. Totuşi, unele exemple nu funcţionează în
anumite browsere, în special în cele vechi. De aceea, uneori este foarte util să determinaţi browserul
utilizat de vizitator pentru a-i putea furniza informaţiile potrivite. Cea mai bună metodă este să vă
proiectaţi paginile web să se comporte diferit, în funcţie de browserul vizitatorului. Obiectul
Navigatorpoate fi utilizat în acest scop, deoarece conţine informaţii despre numele şi versiunea
browserului vizitatorului.
Proprietățile obiectului Navigator

appCodeName Returnează codul browserului
appName Returnează numele browserului
appVersion Returnează informaţii despre versiunea browserului
cookieEnabled Determină dacă are cookies activate
platform Returnează pentru ce platformă este compilat browserul
Exemple:
Exemplul 1
Variabila "browser" din exemplul următor memorează numele browserului. Proprietatea appVersion
returnează un şir de caractere care conţine mult mai multe informaţii, nu numai numărul versiunii.
Deoarece ne interesează numai versiunea, pentru a o extrage din şir, se utilizată o funcţie numită
parseFloat(), care extrage din şir şi returnează prima secvenţă care arată ca un număr zecimal.
<html> <body>
<script>
var browser=navigator.appName;
var b_ver=navigator.appVersion;
var versiune=parseFloat(b_ver);
document.write("Numele browserului: "+ browser);

document.write("Versiunea browserului: "+ versiune);
</script>
</body> </html>
231
Exemplul 2
Ilustrează cum pot fi afişate diferite mesaje, în funcţie de tipul şi versiunea browserului.
<html> <head>
<script>
function detectBrowser()
{
var browser=navigator.appName;
var b_ver=navigator.appVersion;
var versiune=parseFloat(b_ver);
if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") && (versiune>=4))
{
alert("Browserul dvs. este destul de bun!");
}
else
{
alert("Este timpul să va upgradati browserul!");
}
}
</script>
</head>
<body onload="detectBrowser()">
</body></html>
Exemplul 3
Ilustrează cum pot fi afişate mai multe detalii despre browserul vizitatorului
<html> <body>
<script>
document.write("<p>Browser: ");
document.write(navigator.appName + "</p>");
document.write("<p>Versiune: ");
document.write(navigator.appVersion + "</p>");
document.write("<p>Cod: ");
document.write(navigator.appCodeName + "</p>");
document.write("<p>Platforma: ");
document.write(navigator.platform + "</p>");
document.write("<p>Cookies activate: ");
document.write(navigator.cookieEnabled + "</p>");
4.8.8. Obiectele browserului
A. Obiectul window
Acest obiect reprezintă o fereastră deschisă în browser. Dacă conţine cadre (tagurile <frame> sau
<iframe>), browserul creează un obiect window pentru documentul HTML, şi cîte un obiect window
pentru fiecare cadru.
232
Proprietăţile obiectului window
closed Returnează o valoare booleană care indică dacă fereastra a fost închisă sau nu
defaultStatus Setează sau returnează textul implicit din bara de stare a ferestrei
document Returnează obiectul Document al ferestrei
frames Returnează un tablou cu toate cadrele din fereastra curentă
history Returnează obiectul History al ferestrei
innerHeight Setează sau returnează înălţimea interioară a zonei de conţinut a ferestrei
innerWidth Setează sau returnează lăţimea interioară a zonei de conţinut a ferestrei
length Returnează numărul de cadre (inclusiv cele inline) din fereastră
location Returnează obiectul Location al ferestrei
name Setează sau returnează numele ferestrei
opener Returnează referinţa care a creat fereastra
Setează sau returnează înălţimea exterioară a ferestrei (inclusiv
outerHeight
toolbars/scrollbars)
Setează sau returnează lăţimea exterioară a ferestrei (inclusiv
outerWidth
toolbars/scrollbars)
Returnează numărul de pixeli cu care documentul curent a fost derulat
pageXOffset
orizontal, în raport cu colţul stinga sus al ferestrei
Returnează numărul de pixeli cu care documentul curent a fost derulat vertical,
pageYOffset
în raport cu colţul stinga sus al ferestrei
parent Returnează fereastra părinte a ferestrei curente
screenLeft Returnează coordonata x a ferestrei, relativ la ecran
screenTop Returnează coordonata y a ferestrei, relativ la ecran
screenX Returnează coordonata x a ferestrei, relativ la ecran
screenY Returnează coordonata y a ferestrei, relativ la ecran
self Returnează fereastra curentă
status Setează textul din bara de stare a ferestrei
top Returnează cea mai din vîrf fereastră deschisă în browser
Metodele obiectului window

Metodă Descriere
233
alert() Afişează o casetă de alertare care conţine un mesaj şi un buton OK
blur() Îndepărtează focus-ul de la fereastra curentă
clearInterval() Resetează timer-ul setat cu setInterval()
clearTimeout() Resetează timer-ul setat cu setTimeout()
close() Închide fereastra curentă
confirm() Afişează o casetă de dialog care conţine un mesaj şi butoanele OK şi Cancel
createPopup() Creează o fereastră Pop-up
focus() Fixează focus-ul pe fereastra curentă
moveBy() Mută fereastra, relativ la poziţia ei curentă
moveTo() Mută fereastra într-o nouă poziţie
open() Deschide o nouă fereastră în browse
print() Tipăreşte conţinutul ferestrei curente
Afişează o casetă de dialog care cere utilizatorului să introducă anumite
prompt()
informaţii
resizeBy() Redimensionează fereastra la dimensiunea specificată în pixeli
resizeTo() Redimensionează fereastra la înălţimea şi lăţimea specificate
scrollBy() Derulează conţinutul ferestrei cu numărul specificat de pixeli
scrollTo() Derulează conţinutul ferestrei pînă la coordonatele specificate
Apelează o funcţie sau evaluează o expresie la intervale specificate de timp
setInterval()
(în milisecunde)
Apelează o funcţie sau evaluează o expresie dupa un număr specificat de
setTimeout()
milisecunde
Exemplul 1
Ilustrează utilizarea metodelor open() şi focus()
<html> <head>
<script>
function deschide()
{
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("<p>Aceasta este o fereastra creata cu metoda open()</p>");
myWindow.focus();
}
</script>
</head>
<body>
234
<input type="button" value="Deschide fereastra" onclick="deschide()" />
</body> </html>
Exemplul 2
În acest exemplu, funcţia clock() este apelată la fiecare 1000 milisecunde şi actualizează ceasul afişat.
Ceasul poate fi oprit prin apăsarea unui buton
<html> <body>
<input type="text" id="clock" />
<script language=javascript>
var int=self.setInterval("clock()",1000);
function clock()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("clock").value=t;
}
</script>
</form>
<button onclick="int=window.clearInterval(int)">Stop</button>
</body> </html>
Exemplul 3
Ilustrează mutarea ferestrei curente cu 250 pixeli relativ la poziţia ei curentă
<html> <head>
<script>
function deschide()
{
myWindow.document.write("<p>Aceasta este o fereastra deschisa cu open()</p>");
}
function muta()
{
myWindow.moveBy(250,250);
myWindow.focus();
}
</script>
</head>
<body>
<br /><br />
<input type="button" value="Muta fereastra" onclick="muta()" />
</body> </html>
Exemplul 4
Ilustrează redimensionarea ferestrei curente
235
<html> <head>
<script>
function redimensioneaza()
{
top.resizeTo(500,300);
}
</script>
</head>
<body>
<form>
<input type="button" onclick="redimensioneaza()" value="Redimensioneaza fereastra" />
</form>
</body> </html>
Exemplul 5
Ilustrează utilizarea metodei blur() pentru a trimite o fereastră în background.
<html> <head>
<script>
function deschide()
{
myWindow.document.write("<p>Aceasta fereastra este deschisa cu open()</p>");
myWindow.blur();
}
</script>
</head>
<body>
</body> </html>
B. Obiectul screen
Acest obiect conţine informaţii despre ecranul vizitatorului.
Proprietăţile obiectului screen

availHeight Returnează înălţimea ecranului (fără Taskbar)
availWidth Returnează lăţimea ecranului (fără Taskbar)
Returnează numărul de biţi din paleta de culori folosită pentru afişarea
colorDepth
imaginilor
height Returnează înălţimea totală a ecranului
pixelDepth Returnează rezoluţia culorii ecranului (în biţi/pixel)
width Returnează lăţimea totală a ecranului
236
Exemplu următor ilustrează utilizarea tuturor proprietăţilor obiectului screen pentru a obţine informaţii
despre ecranul vizitatorului:
<html> <body>
<h3>Ecranul dumneavoastra are proprietatile:</h3>
<script>
document.write("Lățime/Inaltime totală: ");
document.write(screen.width + "*" + screen.height);
document.write("Lățime/Inaltime disponibila: ");
document.write(screen.availWidth + "*" +
screen.availHeight);
document.write("Numărul de biti ai culorii: ");
document.write(screen.colorDepth);
document.write("Rezoluţia culorii: ");
document.write(screen.pixelDepth);
</script>
</body> </html>
C. Obiectul history
Acest obiect conţine URL-urile vizitate de utilizator (într-o fereastră de browser). Obiectul history face
parte din obiectul window şi este accesat prin proprietatea window.history.
Proprietăţile obiectului history

length Returnează numărul de URL-uri din lista history
Metodele obiectului history

Metodă Descriere
back() Încarcă URL-ul anterior din lista history
forward() Încarcă URL-ul următor din lista history
go() Încarcă un anumit URL din lista history
D. Obiectul location
Obiectul location conţine informaţii despre URL-ul curent. Obiectul location este parte a obiectului
window şi este accesat prin intermediul proprietăţii window.location.
Proprietăţile obiectului location

hash Returnează porţiunea de ancoră din URL
237
host Returnează hostname-ul şi port-ul URL-ului
hostname Returnează hostname-ul URL-ului
href Returnează întregul URL
pathname Returnează numele căii URL-ului
port Returnează numărul de port pe care serverul îl utilizează pentru URL
protocol Returnează protocolul URL-ului
search Returnează porţiunea query din URL
Metodele obiectului location

Metodă Descriere
assign() Încarcă un nou document
reload() Reincarcă documentul curent
replace() Înlocuieşte documentul curent cu un alt document
Exemplu
Ilustrează utilizarea metodei assign()
<html> <head>
<script>
function nou()
{
window.location.assign("http://www.google.com")
}
</script>
</head>
<body>
<input type="button" value="Incarca noul document" onclick="nou()" />
</body> </html>
Cookies
Un cookie este o variabilă păstrată în calculatorul vizitatorului. De fiecare dată când calculatorul respectiv
cere browserului o pagină, el va trimite şi cookie-ul respectiv. Cu JavaScript, puteţi crea şi extrage
cookies.
Exemple de cookies:
1. Numele utilizatorului – Prima dată când utilizatorul vă vizitează pagina trebuie să-şi completeze
numele. Numele este stocat într-un cookie. Următoarea dată când vizitatorul ajunge la pagina dvs., puteţi
să-l întimpinaţi cu un mesaj de genul "Bine ai venit........!" Numele este recuperat dintr-un cookie.
2. Parolă – Prima dată utilizatorul vă vizitează pagina trebuie să completeze o parolă. Parola este
memorată într-un cookie. Data viitoare când vizitatorul ajunge în pagină, parola poate fi recuperată dintr-
un cookie.
238
3. Data calendaristică – Prima dată când utilizatorul vă vizitează pagina, data curentă este memorată într-
un cookie. Data viitoare când utilizatorul vă vizitează pagina, puteţi să afişaţi un mesaj de genul "Ultima
dvs. vizita a fost în data de .........." Această dată este recuperată dintr-un cookie.
Crearea şi memorarea unui cookie

În acest exemplu vom crea un cookie care memorează numele vizitatorului, apoi vom folosi numele
memorat în variabila cookie pentru a afişa un mesaj de bun venit. Prima dată vom crea o funcţie care
memorează numele vizitatorului într-o variabilă cookie:
function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" :
";expires="+exdate.toGMTString());
}
Parametrii funcţiei reprezintă numele şi valoarea cookie-ului şi numărul de zile pînă când acesta expiră.
Funcţia converteşte numărul de zile într-o dată validă şi apoi adaugă numărul de zile după care va expira
cookie-ul. Apoi, numele şi valoarea cookie-ului şi data expirării sunt memorate într-un obiect
document.cookie.
În continuare, vom crea o funcţie care verifică dacă cookie-ul a fost setat:
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}
Funcţia verifică mai întii dacă în obiectul document.cookie este memorat vreun cookie. În caz afirmativ,
verificăm dacă este memorat cookie-ul dorit. Dacă cookie-ul este găsit, îi returnăm valoarea, în caz contrar
returnăm un şir vid. În cele din urmă, vom crea funcţia care afişează un mesaj de bun venit dacă cookie-ul
este setat şi o casetă prompt care cere numele vizitatorului, în caz contrar:
function checkCookie()
{
username=getCookie('username');
239
if (username!=null && username!="")
{
alert('Welcome again '+username+'!');
}
else
{
username=prompt('Please enter your name:',"");
{
setCookie('username',username,365);
}
}
}
Programul complet este:

<html><head>
<script>
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1 ;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length return
unescape(document.cookie.substring(c_start,c_end));
}
}
return ""
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";
expires="+exdate.toGMTString());
}
function checkCookie()
{
username=getCookie('username');
{
240
alert('Bine ai revenit '+username+'!');
}
else
{
username=prompt('Va rog să va introduceti numele:',"");
{
setCookie('username',username,365);
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>
Exemplul prezentat execută funcţia checkCookie() când pagina se încarcă.
E. Obiectul Form
Formularele sunt elemente HTML care dau viata unor pagini statice deoarece asigura o interfata prin care
vizitatorii pot interactiona, cu ajutorul controalelor (elemente ale formularului).
Obiectul Form este mijlocul prin care se poate interactiona cu acest element HTML în scripturile
JavaScript.
Metode și proprietati ale obiectului Form

Proprietatile obiectului Form
Conține atributul "action" din eticheta <form>, specifica adresa URL unde este
action
trimis formularul
elements Matricea care conține toate elementele din <form>
Conține atributul "enctype" din <form>, specifica o codificare MIME a
encoding
formularului
Numărul de elemente conținute în formular method - conține atributul "method"
length din <form>, defineste felul în care formularul este trimis serverului (get sau
post)
name Conține atributul "name" al unei etichetei <form>
Conține atributul "target" al etichetei <form>, specifica fereastra în care serverul
target ar trebui să returneze informatiile. Dacă nu este specificata, serverul afiseaza
Rezultatele în fereastra care a expediat formularul
241
Metodele obiectului Form
handleEvent() Apeleaza handlerul de eveniment specificat
reset() Readuce elementele formularului la valorile prestabilite
Declanseaza un eveniment "submit" care trimite datele spre programul
submit()
specificat în atributul "action" al etichetei <form>
Trimiterea formularelor spre server

Limbajul JavaScript permite prelucrarea datelor introduse în formular înainte ca acestea să fie trimise spre
procesare la programul (scriptul) de pe server. Puteti expedia dadele unui formular utilizand una din cele
doua modalitati:
- Prin apelarea metodei "submit()" a obiectului "Form".
- Prin click pe un buton Submit care trimite automat datele din formularul de care apartine.
Multe din proprietatile obiectului "Form" se ocupa de informatiile suplimentare care sunt trimise la server
prin intermediul formularului. Aceste proprietati sunt:
- action - specifica adresa URL a programului catre care vor fi trimise datele din formular
Exemplu:
<form name="f1" action="http://www.edugal.ro/script.php" method="post">
Pentru formularele care folosesc metoda "post" puteți preciza în atributul "action" ca datele să fie trimise
prin e-mail, folosind urmatoarea sintaxa:
<form name="f2" action="mailto:adresa_de_email" method="post">
Când expediati formularul, se va deschide un client de e-mail ce conține, printre altele, și perechile de
"nume-valoare" ale elementelor (casetelor) cuprinse în formular.
- enctype - specifica o codificare MIME a formularului, valoarea prestabilita este "application/x-www-
form-urlencode".
O metoda de verificare a acestei codificari este urmatoarea:
if (f1.enctype == "application/x-www-form-urlencode") {
alert("Tipul de codificare e normal");}
Un alt tip de codificare des folosit este "text/plain".

Iata un exemplu:
<form method="post" name="f3" action="mailto:adresa_de_mail" enctype="text/plain">
<br>
Va place site-ul? <br><br>
<input name="alege" type="radio" value="1" checked> Da
<br>
<input name="alege" type="radio" value="2"> Nu
<br>
<input name="alege" type="submit" value="Trimite">
</form>
242
Proprietatea enctype="text/plain" este folosita pentru a trimite text neformatat. Prin aceasta, mailul va fi
mai usor de citit, în cadrul mesajului va apare optiunea aleasa. Fara specificarea acestei proprietati mailul
va avea ca atasament un fișier cu optiunea aleasa.
- method - defineste modul în care datele formularului sunt expediate. Se poate folosi valoarea "get" sau
"post".
Pentru formularele care folosesc metoda "get", în majoriatea site-urilor este disponibil un program CGI de
testare, numit "test-cgi" furnizat impreuna cu serverul (locatia fișierului "test-cgi" poate fi diferita,
intrebati administratorul serverului). Folositi urmatoarea sintaxa:
<form action="http://nume_site/cgi-bin/test-cgi" method="get">
Veti primi o pagina care va conține, printre altele, și valorile elementelor din formular. Pentru incepatori,
mai putin cunoscatori, și pentru folosirea cu scripturi PHP, este recomandata metoda "post". Pentru
formularele care folosesc metoda "post", în majoriatea site-urilor este disponibil un program CGI de
testare, numit "post-query" furnizat impreuna cu serverul (locatia acestuia poate fi diferita, intrebati
administratorul serverului). Dacă doriți să verificati ce date trimite formularul, folositi urmatoarea
eticheta:
<form action="http://nume_site/cgi-bin/post-query" method="post">
Cind trimiteti formularul veti primi, printre altele, și perechile de "nume-valoare" corespunzatoare
elementelor din formular. Puteti verifica tipul metodei de trimitere a datelor și cu un script JavaScript, ca
în exemplul urmator:
<script>

</script>
Dacă doriți să faceți o verificare a datelor din formular înainte ca acestea să fi expediate la server, puteți
folosi evenimentul "onSubmit".
onSubmit - este folosita pentru a valida formularul înainte de a fi trimis.
Metoda "onSubmit" se introduce în interiorul etichetei <form>, ca în exemplul urmator:

<script>

</script>
...
<form method="post" name="nume_form" action="script.php" onSubmit="return validare()">
...
243
Validarea formularelor
JavaScript poate fi utilizat pentru a valida formularele HTML înainte de a fi trimise către server.
Datele verificate uzual cu JavaScript pot fi:
 au rămas câmpuri obligatorii necompletate?
 adresa de e-mail este validă?
 data calendaristică este validă?
 s-a introdus text într-un cimp numeric?
Câmpuri obligatorii
Exemplul următoar utilizează o funcţie care verifică dacă un câmp obligatoriu a rămas necompletat. În caz
afirmativ, o casetă de alertare afişează un mesaj şi funcţia returnează valoarea false. Dacă câmpul a fost
completat, funcţia returnează valoarea true şi data este considerată validă:
<html> <head>
<script>
function valideaza_obligatoriu(camp,txt)
{
with (camp)
{
if (value==null||value=="")
{
alert(txt);return false;
}
else
{
return true;
}
}
}
function valideaza_formular(formular)
{
with (formular)
{
if (valideaza_obligatoriu(email,"Campul Email este obligatoriu!")==false)
{
email.focus();return false;
}
}
}
</script>
</head> <body>
<form action="submit.htm" onsubmit="return valideaza_formular(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Trimite">
</form>
</body> </html>
244
Validarea adresei de e-mail
Exemplul următoar utilizează o funcţie care verifică dacă câmpul respectă sintaxa generală a unei adrese
de e-mail. Asta înseamnă că date respectivă trebuie să conţină cel puţin caracterul @ şi un punct. De
asemenea, @ nu poate fi primul caracter din şir, iar ultimul punct trebuie să fie cel puţin la un caracter
distanţă de @:
function valideaza_email(camp,txt)
{
with (camp)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{alert(txt);return false;}
else {return true;}
}
}
function valideaza_formular(formular)
{
with (formular)
{
if (valideaza_email(email,"Adresa e-mail nu este valida!")==false)
{email.focus();return false;}
}
}
</script>
</head>
<body>
<form action="submit.htm" onsubmit="return valideaza_formular(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Trimite">
</form> </body> </html>
Validarea Butoanelor Radio şi Checkbox

În caz că sunt mai multe variante de răspuns la o întrebare şi doriţi să se poată alege doar una este
suficient să daţi nume identice butoanelor radio care sunt cuprinse în acea întrebare. Vom folosi
JavaScript pentru a ne asigura că formularul nu va fi trimis fără să fie bifat un răspuns la fiecare întrebare.
Întroducem funcţia check_buttons care va indica spre fişierul care să preia datele din formular numai în
cazul în care s-a răspuns la fiecare rubrică. Vom verifica asta cu IF, parcurgînd înainte fiecare buton ca pe
un array cu FOR.
<body>
<script>
function check_buttons(){
for(i=0; i<4; i++)
245
for (j=0; j<4; j++){
if(document.form1.intr1[i].checked==true) {
if(document.form1.intr2[j].checked==true) {
document.form1.action="rezultat.php"; }
}
}
return
}
</script>
<form name="form1" method="post" onSubmit="javascript:check_buttons();" action="">
1. Cate limbaje de programare cunoşti?
<p>
<input type="radio" name="intr1" value="a">a. Nici unul<br>
<input type="radio" name="intr1" value="b">b. 1<br>
<input type="radio" name="intr1" value="c">c. 2<br>
<input type="radio" name="intr1" value="d">d. 3<br>
</p>
2. De cît timp eşti interesat de Web Design?
<p>
<input type="radio" name="intr2" value="a">a. De când m-am născut<br>
<input type="radio" name="intr2" value="b">b. De mai mult de 10 ani<br>
<input type="radio" name="intr2" value="c">c. De mai puţin de 10 ani<br>
<input type="radio" name="intr2" value="d">d. De Ieri<br>
</p>
<br>
<input type="submit" value="Trimite formularul">
</form></body> </html>
Animaţie
Puteţi folosi JavaScript pentru a crea imagini animate. Secretul este să lăsaţi scriptul să afişeze imagini
diferite pentru evenimente diferite.
În exemplul următor vom adăuga o imagine care se va comporta ca un link în pagina web. Vom adăuga
apoi un eveniment onMouseOver şi un eveniment onMouseOut care vor apela două funcţii JavaScript ce
vor comuta între două imagini.
Codul HTML arată astfel:

<a href="http://www.google.com" target="_blank">
<img border="0" alt="Vizitati Google!" src="img2.gif" id="m1" onmouseOver="mouseOver()"
onmouseOut="mouseOut()">
</a>
Observaţi că imaginea a primit un id, pentru ca JavaScript să poată referi imaginea în diferite puncte din
script. Evenimentul onMouseOver va spune browserului că, în momentul în care mouse-ul trece peste
imagine, trebuie apelată o funcţie care să schimbe imaginea. Evenimentul onMouseOut va spune
browserului că, atunci când mouse-ul se îndepărtează de imagine, trebuie apelată o funcţie care va afişa
din nou imaginea iniţială.
246
Codul celor două funcţii este:
<script>
function mouseOver()
{
document.getElementById("m1").src ="img1.gif";
}
function mouseOut()
{
}
</script>
Funcţia mouseOver() va determina afişarea imaginii "img1.gif", iar funcţia mouseOut() va determina
afişarea imaginii "img2.gif". Efectul de animaţie este mai vizibil dacă cele două imagini sunt foarte
asemănătoare, diferind spre exemplu prin culoare.
Codul întregului program este:

function mouseOver()
{
}
function mouseOut()
{
}
</script>
</head>
<body>
<a href="http://www.google.com" target="_blank">
<img border="0" alt="Vizitati Google!" src="img2.gif" id="m1" onmouseover="mouseOver()"
onmouseout="mouseOut()">
</a>
</body> </html>
Imagini mapate
O imagine mapată (image-map) este o imagine care are zone ce pot fi acţionate cu mouse-ul. În mod
normal, fiecare zonă are un hiperlink asociat. În tagurile <area> din imaginea mapată pot fi adăugate
evenimente care apelează funcţii JavaScript. Tagul <area> suportă evenimentele onClick, onDblClick,
onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress,
onKeyDown, onKeyUp, onFocus şi onBlur.
Exemplul următor ilustrează utilizarea unei imagini mapate într-un program HTML:
<html> <head>
<script>
247
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt;
}
</script>
</head>
<body>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap"> </p>
<area shape ="rect" coords ="0,0,82,126" onMouseOver="writeText('Soarele și planetele gigante
gazoase, ca Jupiter, sunt cu certitudine cele mai mari corpuri din sistemul nostru solar.')" href
="sun.htm" target ="_blank" alt="Sun" />
<area shape ="circle" coords ="90,58,3" onMouseOver="writeText('Planeta Mercur este foarte greu
de studiat de pe Pamant datorita apropierii ei de Soare.')" href ="mercur.htm" target ="_blank"
alt="Mercur" />
<area shape ="circle" coords ="124,58,8" onMouseOver="writeText('Pana în anii 60, Venus a fost
adesea considerata sora geamana a Pamantului pentru ca este cea mai apropiata de noi, și cele doua
planete au multe caracteristici comune.')" href ="venus.htm" target ="_blank" alt="Venus" />
</map>
<p id="desc"></p>
</body> </html>
Programarea evenimentelor
Codurile JavaScript pot fi execute la intervale de timp programate. Programarea evenimentelor JavaScript
se realizează uşor cu ajutorul următoarelor două metode:
 setTimeout() – execută un cod cândva în viitor
 clearTimeout() – anulează programările realizate cu setTimeout().
Observație: Ambele metode aparţin obiectului Window din HTML DOM.
Metoda setTimeout()
Sintaxă:
var t=setTimeout("declaraţie javascript", milliseconds);
Metoda setTimeout() returnează o valoare care este memorată în variabila t declarată mai sus. Dacă doriţi
să anulaţi programarea, o puteţi face folosind variabila asociată. Primul argument al metodei este un şir de
caractere care conţine o declaraţie JavaScript care poate fi, de exemplu, un apel de funcţie sau
instrucţiunea de afişare a unei casete de mesaj. Al doilea parametru precizează numărul de milisecunde
(începind de acum) după care va fi executat primul parametru.
Observație: O secundă are 1000 de milisecunde.
248
Exemplul 1
În exemplul următor, când butonul este apăsat, o casetă de alertare va fi afişată după 7 secunde.
<html> <head>
<script>
function mesaj()
{
var t=setTimeout("alert('Caseta afisata dupa 7 secunde!')",7000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Afiseaza mesajul!" onClick="mesaj()" />
</form>
</body> </html>
Exemplul 2
Pentru a repeta la infinit o secvenţă de cod, trebuie să scriem o funcţie care se autoapelează. În exemplul
următor, când butonul este apăsat, un câmp de intrare dintr-un formular va începe să numere, plecând de
la zero, secundele scurse, fără să se oprească. A fost inclusă şi o funcţie care verifică dacă numărătorul
funcţionează deja, pentru a nu crea un alt numărător dacă butonul este apăsat de mai multe ori.
var c=0;
var t;
var pornit=0;
function număra()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("număra()",1000);
}
function verifica()
{
if (!pornit)
{
pornit=1;
număra();
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Incepe numărarea!" onClick="verifica()">
249
<input type="text" id="txt" />
Metoda clearTimeout()
Sintaxă:
clearTimeout(variabila_setTimeout)
În exemplul următor utilizăm numărătorul infinit din exemplul următor şi adăugăm o funcţie care va opri
numărătorul la apăsarea unui buton:
var c=0;
var t;
var pornit=0;
function număra()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("număra()",1000);
}
function verifica()
{
if (!pornit)
{
pornit=1;
număra();
}
}
function stop()
{
clearTimeout(t);
pornit=0;
}
</script>
</head>
<body>
<form>
<input type="button" value="Incepe numărarea!" onClick="verifica()">
<input type="text" id="txt">
<input type="button" value="Opreste numărarea!" onClick="stop()">
Exemplu
Acest exemplu ilustrează crearea unui ceas cu ajutorul evenimentelor programate.
250
function număra()
{
var azi=new Date();
var h=azi.getHours();
var m=azi.getMinutes();
var s=azi.getSeconds();
// adauga un zero în fata numerelor <10
m=verifica(m);
s=verifica(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('număra()',500);
}
function verifica(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="număra()">
<div id="txt"></div>
</body> </html>
4.8.9. Crearea obiectelor proprii

Obiectele sunt utile pentru a organiza informaţia. În completarea obiectelor predefinite în JavaScript, cum
ar fi String, Date, Array, etc., vă puteţi crea propriile obiecte.
Un obiect este doar un tip particular de date, cu o colecţie de proprietăţi şi metode. Spre exemplu, o
persoană este un obiect inzestrat cu proprietăţi cum ar fi: nume, virstă, inălţime, greutate, culoarea ochilor
etc. Proprietăţile au anumite valori, care diferă de la o persoană la alta. Metodele sunt acţiuni care pot fi
realizate cu un obiect. Pentru obiectul persoana, acestea ar putea fi: mananca(), munceste(), doarme(),
scrie(), citeste() etc.
Proprietăţile
Pentru a accesa o proprietate a unui obiect sintaxa este:
nume_obiect.nume_proprietate
Puteţi adăuga proprietăţi unui obiect prin simpla atribuire de valori. Dacă presupunem că obiectul
persoana există deja, putem să-i adăugăm proprietăţi prin atribuiri, ca în exemplul următor:
persoana.nume="Popescu";
persoana.prenume="Andrei";
persoana.varsta=25;
persoana.ochi="verzi";
document.write(persoana.nume);
251
Codul de mai sus va afişa rezultatul: Popescu
Metodele
Pentru a accesa o metodă a unui obiect sintaxa este:
Nume_obiect.nume_metoda()
Observație: Dacă metoda are parametri, ei vor fi scrişi între paranteze.
Un obiect poate fi creat în trei moduri:
1. Crearea directă a unui obiect

Secvenţa următoare de cod creează un obiect şi ii adaugă proprietăţi:
persoana=new Object();
persoana.nume="Popescu";
persoana.prenume="Andrei";
persoana.varsta=25;
persoana.ochi="verzi";
Adăugare unei metode se face simplu, ca în exemplul următor: persoana.scrie=scrie;
2. Crearea şablonului unui obiect
Şablonul defineşte structura unui obiect:
function persoana(nume,prenume,varsta,ochi)
{ this.nume=nume;
this.prenume=prenume;
this.varsta=varsta;
this.ochi=ochi;
}
Observaţi că şablonul este doar o funcţie. În interiorul funcţiei trebuie să faceţi atribuiri pentru
this.nume_proprietate. Construcţia "this" se referă la instanţa curentă a obiectului.
După ce aţi construit şablonul obiectului, puteţi crea noi instanţe după modelul următor:
tata=new persoana("Marcu","Ion",40,"verzi");
mama=new persoana("Marcu","Maria",38,"negri");
Adăugarea de metode obiectului persoana se realizează tot în interiorul şablonului:

function persoana(nume,prenume,varsta,ochi)
{
this.nume=nume;
this.prenume=prenume;
this.varsta=varsta;
this.ochi=ochi;
this.numenou=numenou;
}
252
Observaţi că metodele sunt funcţii ataşate obiectului. Acum va trebui scrisă
funcţia numenou():
function numenou(str)
{
this.nume=str;
}
Puteţi folosi metoda astfel: mama.numenou(”Georgescu”);
Proprietăţi şi metode globale

Aceste proprietăţi şi metode pot fi folosite pentru orice variabile, din acest motiv se numesc globale.
Proprietăţile
Infinity O valoare numerică care reprezintă infinitiv pozitiv/negativ
NaN O valoare "Not-a-Number"
undefined Indică o variabilă căreia nu i-a fost atribuită o valoare
Exemplul 1
Ilustrează utilizarea proprietăţii NaN:
<html> <body>
<script>
var luna=13;
if (luna < 1 || luna > 12)
{
luna = luna.NaN;
}
document.write(luna);
</script>
</body> </html>
Exemplul 2
Ilustrează utilizarea proprietăţii undefined:
<html> <body>
<script>
var t1="";
var t2;
if (t1==undefined)
{
document.write("Variabila t1 nu este definita");
}
if (t2==undefined)
253
{
document.write("Variabila t2 nu este definita");
}
</script>
</body> </html>
Metodele
Funcţie Descriere
Codează caracterele speciale dintr-un şir de caractere astfel incit şirul devine
escape()
portabil în reţea către orice calculator care suportă codurile ASCII
Evaluează un şir de caractere şi, dacă şirul conţine o secvenţă de cod JavaScript,
eval()
execută secvenţa
isFinite() Determină dacă valoarea este un număr valid, finit
isNaN() Determină dacă valoarea este un număr invalid
Number() Converteşte valoarea unui obiect în număr
parseFloat() Converteşte un şir într-un număr zecimal
parseInt() Converteşte un şir într-un număr întreg
String() Converteşte valoarea unui obiect într-un şir
unescape() Decodează un şir codat
Exemplul 1
Ilustrează utilizarea metodei eval():
eval("x=10;y=20;document.write(x*y)");
document.write("<br />" + eval("2+2"));
document.write("<br />" + eval(x+17));
Exemplul 2
Ilustrează utilizarea metodei Number():
<html> <body>
<script>
var t1= new Boolean(true);
var t2= new Boolean(false);
var t3= new Date();
var t4= new String("921");
var t5= new String("193 469");
document.write(Number(t1)+ "<br />");
254
Exemplul 3
Ilustrează utilizarea metodei parseFloat() pentru a extrage valoarea dintr-un şir ca număr zecimal:
document.write(parseFloat("10") + "<br />");
document.write(parseFloat("10.00") + "<br />");
document.write(parseFloat("10.33") + "<br />");
document.write(parseFloat("34 45 66") + "<br />");
document.write(parseFloat(" 60 ") + "<br />");
document.write(parseFloat("40 de ani") + "<br />");
document.write(parseFloat("Ea are 40 de ani") + "<br />");
</script> </body>
</html>
Observație: Metoda verifică dacă primul caracter din şir poate apare în scrierea unei valori zecimale
şi, în caz afirmativ continuă construirea acestui număr pină la intilnirea primului caracter care nu poate
apare în scrierea unui număr.
Exemplul 4
Ilustrează utilizarea metodei parseInt() pentru a extrage valoarea dintr-un şir ca număr întreg:
document.write(parseInt("10") + "<br />") ;
document.write(parseInt("10.33") + "<br />");
document.write(parseInt("34 45 66") + "<br />");
document.write(parseInt(" 60 ") + "<br />");
document.write(parseInt("40 de ani") + "<br />");
document.write(parseInt("Ea are 40 de ani") + "<br />");
document.write(parseInt("10",10)+ "<br />");
document.write(parseInt("010")+ "<br />");
document.write(parseInt("0x10")+ "<br />");
Observație: Dacă numărul începe cu 0 va fi interpretat ca fiind scris în baza 8, iar dacă începe cu 0x ca
fiind scris în baza 16. Baza poate fi specificată şi prin adăugarea celui de-al doilea parametru în
metodă. Conversia se încheie la întilnirea primului caracter din şir care nu poate aparea în scrierea unui
număr întreg.
255

Suport Laborator AE

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Suport Laborator AE

Încărcat de

Drepturi de autor:

Formate disponibile

Suport laborator

1.1. Structura documentului HTML

O etichetă poate fi scris atât cu litere mici, cat și cu litere mari.

Conținutul blocului <title>...</title> va apărea în bara de titlu a ferestrei browser-ului.

Următorul exemplu realizează o pagină cu fondul de culoare gri.

Domeniul de valabilitate al caracteristicilor precizate de aceasta eticheta se intinde de la locul în care

Stiluri pentru blocurile de text

<html><head><title>Stiluri pentru blocuri de text </title></head>

Stiluri fizice și logice

Exemplul următor ilustrează că etichetele pot fi imbricate.

<html><head><title>Imbricarea etichetelor </title></head>

<html><head><title> Culoarea și familia fontului</title>

<html><head><title> Marimea fontului</title>

Grosimea unui font

<html><head><title> Grosimea fontului</title>

1.3. Blocuri de text

Inserarea unei adrese

Indentarea unui bloc

8:00 Romana Matematica Sport

<html><head><title> Blocuri paragraf</title></head>

<html><head><title> Linii orizontale</title>

<html><head><title> Blocul <div></title>

Listele neordonate pot fi imbricate pe mai multe niveluri

Următorul exemplu este o lista ordonata cu cifre romane:

Utilizări speciale ale listelor

În exemplul următor lista de definiții are itemii <dt> și <dd> multipli:

Alinierea este importantă pentru textul ce inconjoară tabelul. Astfel :

Definirea culorilor de fond pentru un tabel

Dimensionarea celulei unui tabel

Titlul unui tabel

Alinierea conținutului unei celule

Tabele de forme oarecare

Atributul " nowrap "

Celule vide ale unui tabel

Atributele frame și rules

Adrese URL absolute

Adrese URL relative

Un exemplu de adresă URL relativă: /../../../friend.jpg sau se mai poate scrie

Atributele elementului img

În exemplul următor se poate vedea modul de aliniere a imaginii într-o pagină:

Atributele width și height

Un exemplu de redimensionare a imaginii este dat mai jos.

În exemplul de mai sus se adaugă <BR clear=right>, după elementul <img>

<html><head><title>Imagini pentru fundal</title><head>

Utilizari speciale ale imaginilor

1.6.2. Inserarea sunetelor și videoclipurilor

Atributele utilizate cu acest element sunt:

Atributele utilizate cu acest element sunt:

Alte metode de inserare a unor sunete într-o pagină web

Sintaxa folosirii acestui element este foarte simplă:

Atributele caracteristice acestui element sunt:

Împreună cu elementul <EMBED> se recomandă folosirea elementului <NOEMBED> care ar trebui să

Sintaxa recomandată pentru folosirea acestui element este următoarea:

Referințele au următoarele roluri:

1.7.2. Referințe către alte pagini Web

1.7.3. Referințe cu imagini

Un link poate fi format și din text și din imagine adică:

1.7.4. Referințe cu adrese URL relative

<html><head> <title> Referinte relative </title> </head>

<html><head> <title> Referinte relative </title> </head>

1.7.6.Referințe către fișiere non HTML

1.7.7.Referințe interne în cadrul unei pagini

1.7.8. Trimiterea automată a unui e-mail