Cuprins:

1. INTRODUCERE

2. FUNDAMENTE TEORETICE ALE PAGINILOR WEB LIMBAJUL HTML

2.1. Scurt istoric al apari✁iei Internetului ✂i func✁ ionarea sa. Re✁ eaua WWW. Conceptul de Hipertext..........8
2.2. Despre website-uri...................................................................................................................................10
2.3. HTML standard ✄ limbaj descriptiv al unei pagini WEB........................................................................11
2.3.1 Scrierea de cod HTML. Editoare specializate ☎i validatoare HTML..............................................................12
2.3.2. Structura de baz✆ a unei pagini.......................................................................................................................12
2.3.3. Paragrafe. Atribute ale unui tag......................................................................................................................13
2.3.4. Elemente care permit formatarea textului.......................................................................................................14
2.3.5. Liste................................................................................................................................................................17
2.3.6. Imagini............................................................................................................................................................19
2.3.7. Specificarea culorilor în HTML.....................................................................................................................22
2.3.8. Tabele.............................................................................................................................................................23
2.3.9. Leg✆ turi (link-uri)...........................................................................................................................................26
2.3.10. Elemente de structur✆ (HTML, HEAD, BODY)..........................................................................................29
2.3.11. Pagini cu cadre (FRAMESET, FRAME, IFRAME)....................................................................................31
2.3.12. Bare de separare (HR)..................................................................................................................................35
2.3.13. Formulare......................................................................................................................................................36
2.4. Extinderi ale limbajului HTML standard: HTML dinamic, script-uri.....................................................41
2.4.1. CSS (Cascading Style Sheets)........................................................................................................................41
2.4.2. JavaScript........................................................................................................................................................45
2.4.3. DOM (Document Object Model)....................................................................................................................47

3. LIMBAJUL PHP FACILIT✝✞I ALE ACESTUIA

3.1. Introducere ✄ scurt istoric al apari✁iei limbajului PHP; facilit✟✁ i ✂i mod de func✁ ionare; similitudini între
limbajele PHP ✂i C++...............................................................................................................................51
3.2. Cerin✁ e tehnice pentru rularea limbajului PHP pe un sistem Windows. Detalii asupra instal✟ rii............52
3.3. Testarea instal✟ rii. Structura unui fi✂ier PHP...........................................................................................53
3.4. Constante. Variabile. Operatori. Afi✂area datelor....................................................................................58
3.5. Instruc✁ iuni ale limbajului PHP................................................................................................................62
3.5.1. Instruc✠iunea expresie.....................................................................................................................................62
3.5.2. Instruc✠iunea bloc (se mai nume☎te ☎i compus✆ )............................................................................................62
3.5.3. Instruc✠ iunea if................................................................................................................................................63
3.5.4. Instruc✠ iunea while.........................................................................................................................................63
3.5.5. Instruc✠ iunea do...while..................................................................................................................................64
3.5.6. Instruc✠ iunea for.............................................................................................................................................64
3.6. Transmiterea datelor prin intermediul formularelor.................................................................................65
3.7. Func✁ ii în PHP..........................................................................................................................................71
3.8. Prelucrarea ✂irurilor de caractere.............................................................................................................74
3.9. ✡iruri (masive) în PHP.............................................................................................................................77
3.10. Programare grafic✟ utilizând PHP..........................................................................................................80
3.11. Upload de fi✂iere via PHP......................................................................................................................85
3.12. Variabile cookie.....................................................................................................................................87
3.13. Exploatarea bazelor de date MySQL prin intermediul limbajului PHP
3.13.1. Introducere în MySQL.................................................................................................................................89
3.13.2. Testarea instal✆ rii MySQL. Configurarea bazei de date..............................................................................89
3.13.3. Crearea unei baze de date.............................................................................................................................91
3.13.4. Tabele...........................................................................................................................................................91
3.13.5. Tipuri de date în MySQL.............................................................................................................................93
3.13.6. Operatori utiliza✠ i în MySQL. Variabile......................................................................................................96
3.13.7. Func✠ ii predefinite în MySQL......................................................................................................................99
3.13.8. Coloane calculate prin intermediul unei interog✆ri....................................................................................101
3.13.9. Valoarea NULL..........................................................................................................................................102
3.13.10. Valori implicite pentru coloanele unei tabele...........................................................................................102
3.13.11. Cheie primar✆ ☎i cheie unic✆ .....................................................................................................................103
3.13.12. Coloane cu valori de tip autoincrementare...............................................................................................104

3
 3.13.13. Sortarea datelor.........................................................................................................................................105
3.13.14. Filtrarea datelor........................................................................................................................................106
3.13.15. Actualizarea datelor..................................................................................................................................106
3.13.16. Func ii agregate........................................................................................................................................107
3.13.17. Subinterog✁ ri............................................................................................................................................108
3.13.18. Gruparea datelor.......................................................................................................................................109
3.13.19. Uniuni de tabele........................................................................................................................................111
3.13.20. Exploatarea bazelor de date MySQL prin intermediul limbajului PHP...................................................115
3.13.21. Elementele de bazã ale limbajului SQL*PLUS .......................................................................................118
3.13.22. Crearea unei baze de date prin comenzi SQL ..........................................................................................163

Bibliografie:

1. Tudor Sorin ✂i Vlad Hu✄anu, Crearea ☎i programarea paginilor WEB,

Bucure✂ti, L&S Infomat, 2004;
2. Vlad Hu✄anu ✂i Carmen Popescu, Manual de Informatic✆ Intensiv pentru clasa a XII-a,
Bucure✂ti, L&S Infomat, 2007;
3. Bogdan P✝ tru✄, Internet pentru încep✆tori,
Bucure✂ti, Teora, 1998;
4. Traian Anghel, Programarea în PHP. Ghid practic,
Ia✂i, Polirom, 2005;
5. Julie C. Meloni, Înva✞✆ singur PHP, MySQL ☎i APACHE,
Bucure✂ti, Corint, 2005;
6. Larry Ulman, PHP ☎i MySQL pentru site-uri web dinamice,
Bucure✂ti, Teora, 2006;

Bibliografie Internet :

7. http://wikipedia.org ✟ enciclopedia liber✝ ;

8. http://www.php.net ✟ pagina oficial✝ a grupului de lucru pentru dezvoltarea limbajului PHP;
9. http://www.w3schools.com ✟ set gratuit de tutoriale ✂i documenta✄ii pentru programarea paginilor we.b.

4
1. INTRODUCERE

Începând cu anii 95, Internetul, sub aspectul s✁u cel mai popular, ✂i anume al paginilor web,
a cunoscut o amploare greu de imaginat.
Dac✁ la început, paginile web aveau un con✄inut simplu ✂i oarecum stângace, în zilele
noastre aspectul acestora s-a schimbat radical. Dup✁ doar 10 ani, în paralel cu evolu✄ ia tehnicii de
calcul, au evoluat ✂i tehnicile de programare a acestora. Primele pagini permiteau doar navigarea
prin con✄ inutul lor, pe când în zilele noastre ele au o utilizare foarte larg✁, de la jocuri ✂i aplica✄ ii
grafice dinamice la comer✄ pe Internet.

Limbajul PHP este un limbaj de programare destinat în primul rând Internetului, aducând
dinamic✁ unei pagini web. Este unul dintre cele mai importante limbaje de programare web
open-source (codul surs✁ este public, fiind accesibil tuturor) ✂i server-side (rularea sa nu se face pe
calculatorul celui care vizualizeaz✁ pagina, ci pe server-ul care o con✄ ine).
Este unul dintre cele mai folosite limbaje de programare server-side. Statisticile arat✁ c✁ la 1
mai 2008, suportul PHP este prezent pe 20 de milioane dintr-ul total de 70 de milioane de
website-uri active din lumea întreag✁.
Popularitatea de care se bucur✁ acest limbaj de programare se datoreaz✁ urm✁toarelor sale
caracteristici:
• Familiaritatea ☎ sintaxa limbajului este foarte u✂oar✁, fiind foarte la îndemân✁ în
special pentru programatorii care cunosc limbajul C;
• Simplitatea ☎ sintaxa limbajului este destul de liber✁. Nu este nevoie de includere de
biblioteci sau de directive de compilare, codul PHP inclus într-un document fiind trecut între ni✂te
marcaje speciale;
• Securitatea ☎ PHP-ul pune la dispozi✄ ia programatorilor un set flexibil ✂i eficient de
m✁suri de siguran✄✁;
5
 • Flexibilitatea fiind ap✁rut din necesitatea dezvolt✁ rii web-ului, PHP a fost
modularizat pentru a ✂ine pasul cu dezvoltarea diferitelor tehnologii. Nefiind legat de un anumit
server web, PHP-ul a fost integrat pentru numeroasele servere web exitente: Apache, IIS, Zeus, etc.
• Gratuitatea este, probabil, cea mai important✁ caracteristic✁ a PHP-ului. Dezvoltarea
PHP-ului sub licen✂a open-source a determinat adaptarea rapid✁ a sa la nevoile web-ului,
eficientizarea ✄ i securizarea codului.

În capitolul al II-lea al acestei lucr✁ ri (Fundamente teoretice ale paginilor WEB limbajul
HTML) mi-am propus o parcurgere ceva mai am✁ nun✂it✁ , sub forma unui tutorial, a limbajului
HTML standard, descriind tag-urile cele mai importante ✄ i exemplificând aceste descrieri cu mici
aplica✂ii. Capitolul se încheie cu o trecere în revist✁ , în care exist✁ câteva exemple comentate, a
tehnicilor de programare dinamice ale unei pagini web, care r✁mân îns✁ tot pe domeniul HTML.
Acest capitol este mai mult decât necesar, din cauz✁ c✁ PHP nu face altceva decât s✁ ruleze
programe în urma c✁ruia este generat cod HTML. Nu putem a✄ adar vorbi de limbajul PHP f✁ r✁ a
cunoa✄ te HTML

În capitolul al III-lea (Limbajul PHP facilit✁✂i ale acestuia) am f✁ cut, la fel ca ✄ i în

capitolul al II-lea, o parcurgere mai am✁nun✂it✁ a elementelor limbajului PHP, cu exemple.
Totodat✁ , în acest capitol exist✁ ✄ i câteva detalii tehnice despre instalarea pachetelor software
necesare rul✁ rii.

De remarcat faptul c✁ transcrierea algoritmilor propriu-zi✄ i în PHP r✁ mâne foarte similar✁

limbajului C++. Principalul element care face diferen✂a este dat de interfa✂a acestora, lucru normal
de altfel, deoarece aplica✂iile PHP sunt destinate în primul rând utiliz✁rii lor pe Internet, deci de
c✁ tre public foarte larg. Este motivul pentru care interfa✂a trebuie s✁ prezinte un grad ridicat de
interactivitate (adesea vorbim de "interfa✂✁ inteligent✁") astfel încât s✁ permit✁ o comunicare cât mai
simpl✁ dintre utilizator ✄ i aplica✂ie.

6
7
2. FUNDAMENTE TEORETICE ALE PAGINILOR WEB LIMBAJUL HTML

2.1. Scurt istoric al apari✁ iei Internetului ✂i func✁ ionarea sa. Re✁ eaua WWW.
Conceptul de Hipertext.

Istoria Internetului începe cu anul 1968, când guvernul S.U.A. inten✄iona s☎ interconecteze
universit☎✄ile, departamentele militare ✆i de ap☎ rare ale ✄☎ rii, astfel încât ele s☎ coopereze în cadrul
unor proiecte de cercetare comune. Astfel, s-a format o agen✄ie numit☎ Advanced Research Projects
Agency (ARPA). Una din cheile proiectului punea în discu✄ie faptul c☎ , stocarea tuturor informa✄iilor
pe un singur calculator nu ar fi fost deloc sigur☎ , fie din cauz☎ c☎ acesta ar putea fi ✄int☎ vulnerabil☎
a unui eventual atac, fie pur ✆ i simplu din cauz☎ c☎ acestea ar putea fi pierdute în cazul unei
defec✄iuni tehnice majore. O metod☎ de a face fa✄☎ unei asemenea situa✄ii ar fi de a copia ✆i distribui
informa✄iile pe mai multe calculatoare, în întreaga ✄ar☎, folosind o re✄ea.
În 1975, câteva dintre limbajele sau protocoalele pe care calculatoarele le foloseau pentru a
comunica între ele s-au standardizat. Majoritatea universit☎✄ilor importante ✆ i a departamentelor de
ap☎rare din S.U.A. s-au legat împreun☎ într-o re✄ea numit☎ DARPANET, toate calculatoarele
folosind acela✆i protocol pe care ast☎ zi îl cunoa✆ tem sub denumirea de TCP/IP. Re✄eaua, cu timpul,
a fost înlocuit☎ de mai multe re✄ele, care ast☎ zi împânzesc globul p☎mântesc.
Începând cu anul 1980, mai multe colegii ✆ i universit☎✄i au fost conectate la Internet. Acest
lucru a permis universit☎✄ilor s☎-✆ i împart☎ informa✄ii despre cercet☎rile lor, programe ✆i ✆ tiri
recente. În anii ✝90 Internetul s-a deschis ✆ i în scopuri comerciale. În curând, multe alte c☎ i de
utilizare a informa✄iilor transmise prin intermediul acestei gigantice re✄ele au fost dezvoltate.
În prezent, este posibil s☎ folose✆ ti Internetul pentru a trimite scrisori electronice pe întregul
glob în doar câteva secunde. Po✄i c☎ uta informa✄ii despre orice subiect dore✆ ti. Expresia ✞World
Wide Web✟ (WWW) define✆ te o colec✄ie de documente care se întinde în câteva sute de milioane de
calculatoare.
Principiul de baz☎ al func✄ion☎ rii Internetului const☎ în faptul c☎ dou☎ sau mai multe
calculatoare pot comunica între ele. Pentru ca acest lucru s☎ fie posibil este necesar s☎ existe un
✞ protocol✟, adic☎ un ansamblu de norme care trebuie respectate de calculatoare (deci de programele
care ruleaz☎ pe ele) pentru ca schimbul de date s☎ poat☎ avea loc.
Normele se refer☎ la:
• g☎ sirea calculatorului destinatar al transferului de date;
• transmiterea efectiv☎ a datelor;
• modalit☎✄i prin care expeditorul comunic☎ faptul c☎ au fost transmise toate datele, iar
destinatarul comunic☎ faptul c☎ le-a recep✄ionat;

8
 • compresia datelor: prin aplicarea anumitor algoritmi matematici, datele care urmeaz s fie
expediate sunt prelucrate de a✁a natur , încât s fie memorate prin utilizarea unui spa✂iu cât mai mic
de memorie. Prin urmare, transmiterea lor dureaz mai pu✂in. Invers, la destina✂ie sunt
decompresate prin utilizarea acelora✁i algoritmi matematici;
• identificarea erorilor care pot interveni în transmiterea datelor: ✁i aici exist mai mul✂i
algoritmi care permit identificarea ✁i corectarea erorilor.

Standardul care s-a impus în ceea ce prive✁te Internetul, const în protocolul TCP/IP.
Numele este de fapt, numele comun al unei familii de protocoale utilizate pentru transferul datelor
în re✂ea. Orice calculator conectat la Internet are o adres , numit adres IP (Internet Protocol
Address). O adres IP este alc tuit din 4 numere între 0 ✁i 255, prin urmare o astfel de adres
ocup 4 octe✂i. Cum transmiterea datelor la un moment dat se face între dou calculatoare, datele se
transmit de la o adres IP la alta.

Protocolul IP (Internet Protocol) reglementeaz transmiterea datelor de la o adres IP la alta.

Datele sunt transmise divizate în pachete. În acest fel, se preîntâmpin monopolizarea transmisiei în
re✂ea doar de c tre un singur utilizator.

Protocolul TCP (Transmission Control Protocol): de la plecare, un program TCP împarte

informa✂ia de transmis în mai multe pachete IP. Acestea sunt transmise la destina✂ie prin
intermediul re✂elei. O dat ajunse la destina✂ie, un alt program TCP asambleaz ✁i aranjeaz în
ordinea corect pachetele IP de date primite. Fire✁te, din cauza unor probleme hardware, unele
pachete se pot pierde pe drum. Protocolul TCP se ocup ✁i de acest lucru. Astfel, când împacheteaz
datele într-un plic ✄IP☎, protocolul TCP al expeditorului adaug ✁i un num r (numit sum de
control) care va permite destinatarului s se asigure de faptul c datele primite sunt corecte.
Receptorul recalculeaz suma de control ✁i o compar cu cea transmis de emi✂ tor. Dac ele nu
sunt identice, înseamn c a ap rut o eroare în timpul transmisiei, motiv pentru care protocolul TCP
anuleaz acel pachet, cerând retransmiterea sa.

Bazele World Wide Web (WWW) au fost puse în 1989 la Centrul European de Cercet ri
Nucleare (CERN) în Geneva (Elve✂ia). Propunerea ini✂ial de creare a unei colec✂ii de documente
având leg turi între ele a fost f cut de Tim Berners-Lee în martie 1989. Aceast propunere a ap rut
în urma problemelor de comunicare pe care le întâmpinau echipele de cercet tori ce foloseau
centrul, chiar ✁i folosind po✁ta electronic .

9
 Primul server web folosit de Tim Berners-Lee a ap rut nu mult înainte de decembrie 1991,
când s-a f cut prima lui demonstra✁ ie public . Studiul a fost continuat prin apari✁ ia primei aplica✁ ii
grafice Mosaic, în februarie 1993, realizat de cercet torul Marc Andreessen de la centrul
universitar National Center for Supercomputing Applications (NCSA) din ora✂ul Urbana-
Champaign din statul federal Illinois, SUA. Ulterior WWW-ul a evoluat pân la ceea ce este ast zi,
un serviciu integrativ ✂i multimedial, având ca suport fizic Internetul.
Practic, WWW este un sistem de documente ✂i informa✁ ii de tip hipertext legate ele între ele,
care pot fi accesate prin re✁ eaua mondial de Internet. Documentele, care rezid în diferite loca✁ ii pe
diverse calculatoare-server, pot fi reg site cu ajutorul unei adrese unice. Hipertextul este prelucrat
cu un ajutorul unui program de navigare în web numit browser care descarc paginile web de pe un
server web ✂i le afi✂eaz pe un terminal.

Prin conceptul de hipertext se în✁ elege o form de document electronic, o metod de

organizare a informa✁ iilor în care datele sunt memorate într-o re✁ ea de noduri ✂i leg turi, putând fi
accesat prin intermediul programelor de navigare interactiv , ✂i manipulat de un editor structural.
Conceptul de baz în definirea hipertextului este "leg tura" (link-ul), fie în cadrul aceluia✂i
document, fie c tre alt document. Leg tura de tip link permite organizarea neliniar a informa✁ iilor.
Un sistem hipertext permite autorului s u s creeze a✂a-numite "noduri", s le lege între ele, iar unui
cititor navigarea de la un nod la altul. Astfel un nod reprezint un concept putând con✁ ine orice fel
de informa✁ ie: text, grafic , imagini, anima✁ii, sunete, etc. Nodul surs al unei leg turi se nume✂te
"referin✁ " iar cel destina✁ ie "referent" sau ancor , punctele de leg tur din respectivele noduri fiind
marcate. Activarea marcajelor unei leg turi duce la vizualizarea nodurilor. Asocierea cu unele
elemente mediale a dus la extinderea no✁iunii de hipertext c tre "hipermedii".

2.2. Despre website-uri.

No✁iunea de website (sau pur ✂i simplu site, ori ✄site web☎) desemneaz o grup de pagini
web multimediale (con✁inând texte, imagini fixe, imagini mi✂c toare ✂i chiar sunete), accesibile în
Internet în principiu oricui, de obicei pe o tem anume, ✂i care sunt conectate între ele prin a✂a-
numite hyperlinkuri. Diversele situri web pot fi oferite de c tre o companie, un proiect, o re✁ea de
utilizatori, o persoan particular , o administra✁ ie public ✂i multe altele.

10
 Pentru crearea paginilor web s-a impus limbajul HTML (HyperText Markup Language) un
limbaj de marcare, al c✁rui scop const✁ în prezentarea într-un anumit format a informa✂iilor:
paragrafe, tabele, fonturi, culori, ✄.a.m.d.
Calculatorul pe care se g✁se✄te site-ul se nume✄te ☎server✆, iar calculatoarele care acceseaz✁
con✂ inutul site-ului se numesc ☎client✆.
Orice calculator client trebuie s✁ dispun✁ de un program specializat, numit ☎browser✆, cu
ajutorul c✁ ruia s✁ se poat✁ interpreta ✄i deci vizualiza fi✄ierele HTML.
Pe server trebuie s✁ se g✁seasc✁ un program care r✁ spunde cererilor browser-ului aflat pe
calculatorul client. Cererea efectuat✁ de c✁tre browser ✄i r✁ spunsul server-ului se fac prin
respectarea unui anumit protocol. Acest protocol se nume✄te HTTP (HyperText Transfer Protocol).

2.3. HTML standard ✝ limbaj descriptiv al unei pagini WEB.

HTML este un limbaj de marcare orientat c✁tre prezentarea documentelor text pe o singura
pagin✁.
Utilizând un software de redare specializat, numit agent utilizator HTML (cel mai bun
exemplu de astfel de software fiind browserul web) HTML furnizeaz✁ mijloacele prin care
con✂ inutul unui document poate fi adnotat cu diverse tipuri de metadate ✄i indica✂ ii de redare.
Indica✂iile de redare pot varia de la decora✂ iuni minore ale textului (cum ar fi specificarea faptului
c✁ un anumit cuvânt trebuie subliniat sau c✁ o imagine trebuie introdus✁) pân✁ la scripturi
sofisticate, h✁ r✂ i de imagini ✄i formulare. Metadatele pot include informa✂ii despre titlul ✄i autorul
documentului, informa✂ii structurale despre cum este împ✁ r✂ it documentul în diferite segmente,
paragrafe, liste, titluri etc. ✄i informa✂ii cruciale care permit ca documentul s✁ poat✁ fi legat de alte
documente pentru a forma astfel hiperlink-uri.
HTML este un format text proiectat pentru a putea fi citit ✄i editat de oameni utilizând un
editor de text simplu. Totu✄i scrierea ✄i modificarea paginilor în acest fel solicit✁ cuno✄tin✂e solide
de HTML ✄i este consumatoare de timp. Editoarele grafice cum ar fi Macromedia Dreamweaver sau
Microsoft FrontPage permit ca paginile web sa fie tratate asem✁ n✁ tor cu documentele Word, dar cu
observa✂ ia c✁ aceste programe genereaz✁ un cod HTML care este de multe ori de proast✁ calitate.
HTML se poate genera direct utilizând tehnologii de codare din partea serverului cum ar fi
PHP, JSP sau ASP.

11
2.3.1 Scrierea de cod HTML. Editoare specializate i validatoare HTML.

Crearea unui fi✁ier HTML este foarte simpl✂, putând fi f✂ cut✂ cu ajutorul oric✂ rui editor de
text. Totu✁i, pentru a avea un control ridicat asupra corectitudinii codului scris, este recomandat s✂
utiliz✂m un editor specializat, care s✂ pun✂ în eviden✄✂ diversele elemente de marcare (TAG-uri,
numite ✁i ☎elemente✆ sau ☎ etichete✆) sau, mai mult, s✂ poat✂ verifica ✁i detecta erorile.
Din categoria editoarelor care pun în eviden✄✂ diferitele elemente face parte editorul
Notepad++, iar din categoria validatoarelor face parte CSE HTML Validator Lite, ambele fiind
gratuite ✁i putând fi desc✂rcate de pe Internet.

2.3.2. Structura de baz✝ a unei pagini.

Structura de baz✂ a unei pagini HTML este urm✂ toarea (apl001.html):

Iat✂ ✁i modul în care pagina de mai sus este vizualizat✂ în Internet Explorer:

Din analiza exemplului observ✂ m c✂ :

• O pagin✂ începe cu tag-ul <HTML> ✁i se termin✂ cu tag-ul </HTML>;
• O pagin✂ con✄ ine un antet (HEAD) ✁i corpul propriu-zis (BODY);
• Antetul este cuprins între etichetele <HEAD> ✁i </HEAD>;
• Corpul este cuprins între etichetele <BODY> ✁i </BODY>;

12
• Op ional, antetul poate con ine titlul paginii, cuprins între tag-urile <TITLE> ✁i </TITLE>. Titlul
apare pe bara de titlu a ferestrei afi✁ate în browser.
• Corpul poate con ine texte ✁ i/sau imagini. În exemplu, pagina con ine textul ✂ Acesta este primul
exemplu de pagina...✄
• Comentariile, care nu sunt afi✁ ate de c☎ tre browser, pot fi scrise între tag-urile <!-- ✁ i -->.
• Numele tag-urilor nu sunt case sensitive, deci pot fi scrise atât cu litere mici cât ✁ i cu litere mari.
În continuare, pentru a le pune în eviden ☎ , le vom scrie cu litere mari.

2.3.3. Paragrafe. Atribute ale unui tag.

În general, textele con inute de o pagin☎ se pot g☎si în mai multe paragrafe. Un paragraf se
introduce între tag-urile <P> ... </P>.
La afi✁ are, dou☎ paragrafe consecutive vor fi separate printr-o linie goal☎.
Tag-ul </P> poate lipsi; un nou paragraf poate fi detectat prin tag-ul <P>.
În cadrul unui fi✁ ier HTML, Enter-ul nu are nici un efect. De asemenea, dac☎ dou☎ cuvinte
ale unui paragraf sunt separate prin mai multe spa ii sau alte caractere albe (enter-uri, tab-uri),
browser-ul afi✁ eaz☎ doar un singur spa iu.

Majoritatea tag-urilor li se pot specifica atribute. Acestea determin☎ comportamentul mai

am☎nun it al elementului respectiv.

Un atribut se specific☎ înainte de închiderea parantezei unghiulare a tag-ului ( >) prin

nume_atribut=✆ valoare✆ .

În cazul paragrafului, atributul align controleaz☎ alinierea textului din cadrul paragrafului.
Dac☎ acest atribut nu este prezent, alinierea este f☎ cut☎ în mod implicit la stânga. Acest atribut poate
lua una dintre valorile center, left, right, justify, ca în exemplul de mai jos
(apl002.html):
<HTML>
<HEAD>
<TITLE>Alinierea paragrafelor</TITLE>
</HEAD>
<BODY>
<P align="center">Aliniat in centru</P>
<P align="right">Aliniat la dreapta</P>
<P align="left">Aliniat la stinga</P>
<P align="justify">Paragraful acesta este aliniat la ambele margini</P>
</BODY>
</HTML>

13
Iat pagina al c rei cod tocmai a fost prezentat, vizualizat în Internet Explorer:

2.3.4. Elemente care permit formatarea textului.

• <BR> : Are ca efect for✁ area afi✂ rii a ceea ce urmeaz pe rândul urm tor. Acest tag nu
creeaz un nou paragraf (s ne reamintim c între dou paragrafe este automat l sat o linie vid )
• <B>...</B> : Are rolul de a afi✂a bold (îngro✂at) textul cuprins între cele dou tag-uri ale
sale. Un tag sinonim al lui <B> este: <STRONG>...</STRONG>
• <I>...</I> : Are rolul de a afi✂a italic (înclinat) textul cuprins între cele dou tag-uri ale
sale. Tag-uri sinonime ale lui <I> sunt: <EM>...</EM>, <DFN>...</DFN>,<CITE>...</CITE>.
• <U>...</U> : Are rolul de a afi✂ a subliniat textul cuprins între cele dou tag-uri ale sale. Un
tag sinonim al lui <U> este: <INS>...</INS>
• <S>...</S> : Are rolul de a afi✂ a t iat (cu o linie orizontal ) textul cuprins între cele dou
tag-uri ale sale. Un tag sinonim al lui <S> este: <DEL>...</DEL>
• <BIG>...</BIG> : Are rolul de a afi✂ a textul cuprins între cele dou tag-uri ale sale mai
mare decât textul în care este cuprins.
• <SMALL>...</SMALL> : Are rolul de a afi✂ a textul cuprins între cele dou tag-uri ale sale
mai mic decât textul în care este cuprins.
• <SUP>...</SUP> : Are rolul de a afi✂ a textul cuprins între cele dou tag-uri ale sale mai
sus (ca o putere)
• <SUB>...</SUB> : Are rolul de a afi✂ a textul cuprins între cele dou tag-uri ale sale mai
sus (ca un indice)

14
 • <TT>...</TT> : Are rolul de a afi a textul cuprins între cele dou✁ tag-uri ale sale mai sus
monospa✂iat (toate caracterele ocup✁ aceea i lungime ✄ practic, se folose te fontul Courier New)
În cod-ul HTML de mai jos g✁ si✂i toate aceste tag-uri exemplificate (apl003.html):
<HTML>
<HEAD>
<TITLE>Formatarea textului</TITLE>
</HEAD>
<BODY>
<P>
<B>Acest text este afisat folosind tag-ul B</B> <BR>
<STRONG>Acest text este afisat folosind tag-ul STRONG</STRONG> <BR>
<I>Acest text este afisat folosind tag-ul I</I> <BR>
<DFN>Acest text este afisat folosind tag-ul DFN</DFN> <BR>
<EM>Acest text este afisat folosind tag-ul EM</EM> <BR>
<U>Acest text este afisat folosind tag-ul U</U> <BR>
<INS>Acest text este afisat folosind tag-ul INS</INS> <BR>
<S>Acest text este afisat folosind tag-ul S</S> <BR>
<DEL>Acest text este afisat folosind tag-ul DEL</DEL> <BR>
Normal <BIG>Mai mare</BIG> Normal <BR>
Normal <SMALL>Mai mic</SMALL> Normal <BR>
Iata si un <SUP>exponent</SUP> <BR>
iar acum un <SUB>indice</SUB> <BR>
<TT>Acest text este monospatiat</TT>
</P>
</BODY>
</HTML>

Acest cod vizualizat în browser arat✁ în felul urm✁ tor:

• Pentru scrierea titlurilor se utilizeaz✁ tag-urile <H1>...<H1>, <H2>...<H2>, . . . ,

<H6>...<H6>. Practic, în func✂ie de num✁ rul de dup✁ H m✁ rimea fontului difer✁ (<H1> utilizeaz✁
fontul de dimensiune maxim✁ , <H6> fontul de dimensiune minim✁ ) iar textul care apare între tag-uri
este scris îngro at (bold).
• Pentru stabilirea font-ului se folose te tag-ul <FONT>...<FONT>. Atributele acestuia sunt:
- face indic✁ numele font-ului
- size indic✁ m✁ rimea (trebuie s✁ fie un num✁ r cuprins între 1 i 7. Implicit este 3)

15
 - color permite specificarea culorii. Aceasta se specific fie prin intermediul
constantelor predefinite ale HTML-ului (numele englezesc al culorii) fie prin componentele sale de
Ro✁u, Verde ✁i Albastru exprimate în hexazecimal, de forma #RRGGBB (vom detalia aceste
constante de culoare ceva mai încolo).
Iat un exemplu de utilizare al lor (apl004.html):
<HTML>
<HEAD>
<TITLE>Exemplificare titluri si font</TITLE>
</HEAD>
<BODY>
<P>
<H1>Acesta este un titlu de tip H1</H1>
<H2>Acesta este un titlu de tip H2</H2>
<H3>Iar acesta este un titlu de tip H3</H3>
<FONT face="arial" color="blue" size="4">
Acest text este scris cu fontul Arial, albastru, dimensiune 4
</FONT><BR>
Iar acest text este scris normal<BR>
</P>
<P>
Iata si culorile cucubeului, scrise cu font-ul Comic Sans MS,
bold, dimensiune 7:<br>
<B>
<FONT face="Comic Sans MS" size="7" color="red">R</FONT>
<FONT face="Comic Sans MS" size="7" color="orange">O</FONT>
<FONT face="Comic Sans MS" size="7" color="yellow">G</FONT>
<FONT face="Comic Sans MS" size="7" color="green">V</FONT>
<FONT face="Comic Sans MS" size="7" color="blue">A</FONT>
<FONT face="Comic Sans MS" size="7" color="darkblue">I</FONT>
<FONT face="Comic Sans MS" size="7" color="magenta">V</FONT>
</B>
</P>
</BODY>
</HTML>

Vizualizat în browser:

A✁a cum am v zut, dac în cadrul unui text din cadrul documentului HTML apare un grup de mai
multe spa✂ii, în browser va fi afi✁at doar unul singur. Dac dorim for✂ area afi✁ rii unui spa✂ iu, se
folose✁te identificatorul special &nbsp; (ultimul caracter, ✄;✄, face parte din identificator)

16
2.3.5. Liste.
Acestea permit ca anumite enun uri (texte, elemente) s✁ fie numerotate sau marcate într-un
anumit fel. O astfel de organizare poart✁ numele de liste.
În HTML distingem 3 feluri de liste:
• Liste ordonate (Ordered Lists): sunt liste în care elementele sunt numerotate.
Inserarea lor în cadrul documentului HTML se face prin tag-urile <OL>...</OL>, elementele
(itemii) lor fiind introduse între aceste dou✁ tag-uri prin <LI>...</LI> (tag-ul de sfâr✂it nefiind
obligatoriu). Implicit, numerotarea se face cu numere arabe (1, 2, 3, ...). Ea poate fi modificat✁ prin
folosirea atributului type în cadrul tag-ului OL. Acesta poate lua una dintre valorile:
- a : numerotarea se va face cu litere mici (a, b, c, ...)
- A : numerotarea se va face cu litere mari (A, B, C, ...)
- i : numerotarea se va face cu numere romane mici (i, ii, iii, iv ...)
- I : numerotarea se va face cu numere romane mari (I, II, III. IV, ...)
- 1 : (implicit) numerotarea se va face cu numere arabe obi✂nuite (1, 2, 3, ...)
Iat✁ un exemplu de cod ✂i vizualizarea sa în browser (apl005.html):
<HTML>
<HEAD>
<TITLE>Liste</TITLE>
</HEAD>
<BODY>
<P>
Iata o lista ordonata implicita:
<OL>
<LI>Primul item</LI>
<LI>Al doilea item</LI>
<LI>Al treilea item</LI>
<LI>Al patrulea item</LI>
</OL>
Iata si o alta lista, cu numere romane
<OL type="i">
<LI>Primul item</LI>
<LI>Al doilea item</LI>
<LI>Al treilea item</LI>
<LI>Al patrulea item</LI>
</OL>
</P>
</BODY>
</HTML>

• Liste neordonate (Unordered Lists): sunt liste în care elementele nu sunt numerotate, ci în
dreptul fiec✁ruia este afi✂at un marcator.
Inserarea lor în cadrul documentului HTML se face prin tag-urile <UL>...</UL>, elementele
(itemii) lor fiind introduse între aceste dou✁ tag-uri prin <LI>...</LI> (tag-ul de sfâr✂it nefiind
obligatoriu).
Implicit, marcarea lor se face prin cercule e pline. Ea poate fi modificat✁ prin folosirea
atributului type în cadrul tag-ului UL. Acesta poate lua una dintre valorile:

17
 - disc : marcarea se face cu cercule e pline (implicit)
- square : marcarea se face cu p✁tr✁ ele
- circle : marcarea se face cu cercule e goale
Iat✁ un exemplu de cod ✂ i vizualizarea sa în browser
(apl006.html):
Iata o lista neordonata implicita:
<UL>
<LI>Primul item</LI>
<LI>Al doilea item</LI>
<LI>Al treilea item</LI>
<LI>Al patrulea item</LI>
</UL>
Iata si o alta lista, marcata cu patratele
<UL type="square">
<LI>Primul item</LI>
<LI>Al doilea item</LI>
<LI>Al treilea item</LI>
<LI>Al patrulea item</LI>
</UL>
Si alta, marcata cu cerculete goale
<UL type="circle">
<LI>Primul item</LI>
<LI>Al doilea item</LI>
<LI>Al treilea item</LI>
<LI>Al patrulea item</LI>
</UL>

• Liste de defini✄ie (Definition Lists): au rolul de a descrie o list✁ de defini ii.

Inserarea lor în cadrul documentului HTML se face prin tag-urile <DL>...</DL>. Elementele
lor sunt de dou✁ tipuri:
- Termenul care este definit: este introdus între tag-urile <DT>...</DT> (tag-ul de
sfâr✂it nefiind obligatoriu).
- Defini ia propriu-zis✁ : este introdus✁ între tag-urile <DD>...</DD> (tag-ul de sfâr✂it
nefiind obligatoriu).
Iat✁ un exemplu de cod ✂i vizualizarea sa în browser (apl007.html):
Iata o lista de definitie:
<DL>
<DT>Leontopodium Alpinum</DT>
<DD>Este numele stiintific al florii de colt.
Este o planta ocrotita. Creste la altitudini
mari, in locuri stancoase</DD>
<DT>Dianthus Callizonus</DT>
<DD>Este numele stiintific al Garofitei
Pietrei Craiului. Este o planta ocrotita.
Fiind un endemism, este o planta unica in
lume. Practic, aceasta specie de garofita,
in afara de locul sau de origine, si anume
masivul Piatra Craiului din apropierea
Brasovului, nu se mai intilneste in nici un
alt loc de pe planeta</DD>
<DT>Aconitum Napellus</DT>
<DD>Este numele stiintific al Omagului.
Este o planta otravitoare. Totusi, in cantitati
foarte mici contine o substanta activa din care
este preparat un medicament contra tusei</DD>
</DL>

18
2.3.6. Imagini.

Tag-ul utilizat pentru inserarea unei imagini în documentul HTML este <IMG>. Forma
general a acestui element este <IMG atribute>. Acest tag nu are ✁i form de închidere.
Atributele sale sunt:
• src identific fi✁ ierul efectiv de pe disc, ce con✂ine imaginea respectiv . Dac imaginea
se afl în directorul curent, se specific doar numele ✁ i extensia sa. Dac se afl într-un subdirector,
acesta se specific înaintea numelui ✁i extensiei imaginii, separat prin caracterul /. Imaginile
recunoscute de majoritatea browser-elor internet sunt de tip .jpg, .gif, .png
• align specific tipul de aliniere al imaginii în raport cu textul în cadrul c ruia se afl .
Acesta poate lua una dintre valorile urm toare:
- right : imaginea se aliniaz în dreapta, iar textul care urmeaz este scris în locul
r mas liber, în stânga acesteia;
- left : imaginea se aliniaz în stânga, iar textul care urmeaz este scris în locul
r mas liber, în dreapta acesteia;
- top : doar latura de sus a imaginii se aliniaz cu rândul de text în cadrul c ruia se
afl ; urm torul rând de text va fi afi✁ at dup imagine, ocupând întreaga l ✂ime a ecranului;
- middle : rândul de text în cadrul c ruia se afl imaginea se aliniaz la jum tatea
în ✂imii acesteia; urm torul rând de text va fi afi✁ at dup imagine, ocupând întreaga l ✂ime a
ecranului;
- bottom : doar latura de jos a imaginii se aliniaz cu rândul de text în cadrul c ruia
se afl ; urm torul rând de text va fi afi✁ at dup imagine, ocupând întreaga l ✂ime a ecranului;
• Dac dorim întreruperea unei alinieri de imagine de tip right sau left înainte ca textul s fi
umplut spa✂iul liber din stânga, respectiv dreapta acesteia, putem folosi tag-ul br, c ruia îi ad ug m
unul dintre atributele clear=✄left✄ sau clear=✄ right✄ sau clear=✄ all✄ , dup caz.
• atributul alt=✄ text✄ permite specificarea unui text alternativ ce va fi afi✁ at fie dac
men✂inem cursorul de mouse asupra imaginii, fie în locul imaginii propriu-zise, în cazul în care
imaginea nu poate fi înc rcat din cauza unei probleme de conexiune.
Iat câteva exemple, cu tot cu vizualizarea lor în browser:
1) Exemplu la folosirea atributului align=✄ right✄ ✁ i a atributului
alt=✄ text✄ :(apl008.html)
<P>Acest text este asezat inaintea imaginii<br>
<IMG SRC="dog.jpg" align="right" alt="catelus">
In schimb, acest text este aliniat in stinga imaginii,
deoarece am folosit atributul align="right" in momentul
in care am inserat imaginea in pagina noastra web prin
intermediul tag-ului src.
</P>

19
2) Exemplu la folosirea op iunii align=✁ right✁ împreun✂ cu tag-ul <br clear=✁ right✁>
(apl009.html):
<P>
Acest text este asezat inaintea imaginii<br>
<IMG SRC="dog.jpg" align="right" alt="catelus">
Acest text, aliniat in stinga imaginii, il
intrerupem fortat AICI
<BR clear="right">
In acest fel, restul textului se va alinia
in mod obisnuit, sub imagine, restul spatiului
din stinga raminind liber.
</P>

3) Exemplu la folosirea op iunii align=✁ top✁

(apl010.html):
<P>
Acest text este asezat inaintea imaginii <br>
Se observa ca
<IMG SRC="dog.jpg" align="top" alt="catelus">
doar primul rind al textului este aliniat cu
latura de sus a imaginii, restul textului
fiind afisat dupa imagine
</P>

4) Exemplu la folosirea op iunii align=✁ middle✁

(apl011.html):
<P>
Acest text este asezat inaintea imaginii <br>
Se observa ca
<IMG SRC="dog.jpg" align="middle"
alt="catelus">
doar primul rind al textului este aliniat la
jumatatea inaltimii imaginii, restul textului
fiind afisat dupa imagine
</P>

5) Exemplu la folosirea op iunii align=✁ bottom✁

(apl012.html):
<P>
Acest text este asezat inaintea imaginii <br>
Se observa ca
<IMG SRC="dog.jpg" align="top" alt="catelus">
doar primul rind al textului este aliniat cu
latura de jos a imaginii, restul textului
fiind afisat dupa imagine
</P>

• atributele height ✄i width permit specificarea altor dimensiuni pentru imagine, decât
cele reale ale acesteia. Evident, dac✂ dimensiunile nu sunt propor ionale cu cele reale, imaginea va
fi deformat✂ . Totodat✂ , dac✂ specific✂m dimensiuni mai mari decât cele reale, imaginea se va vedea
mai pu in clar. În realitate, imaginea este transferat✂ de pe server la dimensiunile sale originale,
redimensionarea având loc doar la nivelul calculatorului pe care este vizualizat✂ pagina.

20
Iat un exemplu de folosire al celor dou tag-uri, ✁i vizualizarea
acestui exemplu în browser (apl013.html):

<P>
Imaginea originala are dimensiunile 200x150:
<BR>
<IMG src="dog.jpg">
<BR>
Iat-o redimensionata proportional la 100x75:
<BR>
<IMG src="dog.jpg" width="100" height="75">
<BR>
Iat-o si deformata:<BR>
<IMG src="dog.jpg" width="50" height="100">
sau
<IMG src="dog.jpg" width="150" height="50">
<BR>
</P>

• atributul border permite stabilirea grosimii unui chenar care

va înconjura poza. Implicit, valoarea acestui atribut este ✂0✂ , ceea ce
înseamn c imaginea nu este înconjurat de chenar (apl014.html):

<P>
Imaginea este inconjurata
de un chenar
de dimenisiune 10<br>
<IMG src="dog.jpg" border="10">
</P>

• atributele hspace=✄ nr.pixeli✄ respectiv vspace=✄nr.pixeli✄ permit stabilirea

distantei minime care separa imaginea de celelalte obiecte pe vertical , respectiv pe orizontal
(apl015.html):
<P>
Iata o aliniere a imaginii
de tip "right", aliniere
<IMG src="dog.jpg" align="right">
in cadrul careia nu am modificat
nici unul dintre cele doua
atribute care controleaza
spatierea dintre imagine
si restul elementelor, pe
orizontala respeciv pe
verticala
<BR clear="all"><BR>
Iata acum o aliniere a imaginii
tot de tip "right", aliniere
<IMG src="dog.jpg" align="right"
hspace="15" vspace="20">
in cadrul careia am modificat
ambele atribute care controleaza
spatierea dintre imagine
si restul elementelor, stabilind
valorile de 20 pe verticala
respeciv de 15 pe orizontala
<BR clear="all">
</P>

21
2.3.7. Specificarea culorilor în HTML.

O serie de elemente din HTML permit utilizarea de atribute de culoare. Acestea pot fi
specificate în dou moduri:
• prin constanta HTML ce reprezint numele culorii (în englez , bineîn✁eles). Exist 216
astfel de constante recunoscute de majoritatea browser-elor. Ne vom limita în a le enumera doar pe
cele 16 care sunt considerate de baz , exemplificându-le pe fiecare:

O serie dintre culori (îns nu toate) au ✂i constante în variantele ✄ dark☎ (închis) respectiv
✄ light☎ (deschis). De exemplu: darkred sau lightblue.

• prin constanta de tip RGB (Red, Green, Blue):

Principiul de baz al red rii electronice ale unei imagini în culori se bazeaz pe amestecarea
în propor✁ii diferite ale culorilor Ro✂ u, Verde ✂i Albastru. În acest mod, se poate ob✁ine orice
culoare se dore✂ te. În cazul culorilor pe care le poate reda un browser HTML, fiecare dintre aceste
componente de culoare poate avea 256 de st ri posibile: de la 0, care înseamn c respectiva culoare
lipse✂ te cu des vâr✂ ire, pân la 255, care înseamn c respectiva culoare este folosit la intensitatea
maxim . În acest fel, prin amestecuri diferite, putem ob✁ine 2563, deci aproximativ 16 milioane de
nuan✁e diferite.
Componentele de culoare în HTML se specific folosind numere hexazecimale. Astfel, fiecare
dintre numerele dintre 0 ✂ i 255 se codific în hexazecimal printr-un num r între 00 ✂ i FF. Constanta
HTML pentru specificarea unei culori are forma general #RRGGBB, în care RR, GG respectiv BB
reprezint câte un num r hexazecimal cuprins între 00 ✂ i FF.
Iat câteva exemple de culori ob✁inute folosind constante de forma celei de mai sus:

22
2.3.8. Tabele.

Tabelele reprezint un element foarte important al unei pagini web. În foarte multe cazuri,
tabele cu chenare invizibile sunt folosite ca ✁i ✂ schelet✄ al paginii, pentru a putea realiza alinieri
complexe ale elementelor acesteia.

Tag-ul pentru descrierea unui tabel este <TABLE>...</TABLE>. În cadrul acestora trebuie
descrise liniile (rândurile) tabelului, în cadrul fiec rui rând trebuind descrise celulele acestuia.

Descrierea unui rând se face între tag-urile <TR>...</TR>. La rândul lor, celulele din cadrul
rândului se descriu între <TD>...</TD>. Atît tag-ul </TR> cât ✁i tag-ul </TD> pot fi omise.

Un prim atribut al tag-ului <TABLE> este border=☎grosime_pixeli☎ . Dac acest atribut

este omis, tabelul va avea un chenar invizibil. Dac se specific doar atributul, omi✆ând grosimea,
aceasta va fi luat , implicit, ca fiind 1.

Iat un exemplu de cod pentru definirea unui tabel (apl016.html):

<TABLE border>
<TR>
<TD>Rindul 1, celula 1
<TD>Rindul 1, celula 2
<TR>
<TD>Rindul 2, celula 1
<TD>Rindul 2, celula 2
</TABLE>

Atribute ale tag-ului <TABLE>

• cellpadding=☎ nr_pixeli☎ permite stabilirea unui spa✆iu care va fi l sat, în fiecare

celul a tabelului, între con✆inutul celulei ✁i marginile acesteia. Dac nu se specific acest atribut, el
este în mod implicit considerat 0
• cellspacing=☎nr_pixeli☎ permite stabilirea spa✆iului care va fi l sat între chenarele
celulelor vecine în tabel (✁i inclusiv între ele ✁i chenarul exterior al tabelului). Dac nu se specific
acest atribut, el este în mod implicit considerat 2.

Con✆inutul unei celule poate fi cât se poate de general: de la text ✁i imagini pân la alte
tabele (se pot deci construi chiar ✁i tabele imbricate), ca în exemplul urm tor ( apl017.html):

23
<TABLE border="1" cellspacing="4" cellpadding="5">
<TR>
<TD>
Poza cu catelus<BR>
<IMG src="dog.jpg">
<TD>
Tabel cu baieti
<TABLE border cellspacing="0">
<TR><TD>Mihai
<TR><TD>Costel
<TR><TD>Alin
</TABLE>
<TD>
Tabel cu fete
<TABLE border cellspacing="0">
<TR><TD>Mihaela
<TR><TD>Costina
<TR><TD>Alina
</TABLE>
</TABLE>

• width= l✁✂ime poate stabili cât de lat s✄ fie tabelul. L✄☎imea poate fi dat✄ în procente,
caz în care se va calcula ca ✆i procent din l✄☎imea ferestrei browser-ului (ex: width= 50% ) sau în
pixeli (ex: width= 500 );
• height= în✁ l✂ ime poate stabili cât de înalt s✄ fie tabelul. L✄☎imea poate fi dat✄, la fel
ca ✆i în cazul atributului width, în procente sau în pixeli;
• align determin✄ alinierea tabelului în pagin✄. Poate la una dintre valorile left, right
sau center. Dac✄, pe lâng✄ tabel, mai scriem ✆i text, acesta se va pozi☎iona fa☎✄ de tabel în acela✆ i
mod în care se pozi☎ioneaz✄ ✆ i fa☎✄ de imagini;
• bgcolor= culoare permite stabilirea culorii de fundal a tuturor celulelor tabelului;
• bordercolor= culoare permite stabilirea culorii chenarului (deopotriv✄ cel interior
cât ✆i cel exterior)

Atribute ale tag-ului <TR>

• align determin✄, pentru toate celulele de pe linie, modul alinierii con☎inutului pe

orizontal✄, în interiorul celulelor. Poate la una dintre valorile left, right, center sau justify;
• valign determin✄, pentru toate celulele de pe linie, modul alinierii con☎inutului pe
vertical✄, în interiorul celulelor. Poate la una dintre valorile top, bottom sau middle;
• bgcolor determin✄, pentru toate celulele de pe linia respectiv✄, culoarea de fundal.

Atribute ale tag-ului <TD>

• width ✆ i height determin✄, pentru celula respectiv✄, l✄☎imea ✆ i în✄l☎imea. Poate fi dat✄ în
procente sau pixeli. Dac✄ e specificat✄ în procente, se va lua din l✄☎imea, respectiv în✄l☎imea

24
tabelului. Modificarea l ✁imii ✂ i a în l✁imii unei celule va avea efect ✂i asupra celorlalte celule,
pentru ca tabelul s fie aliniat;
• align ✂ i valign stabilesc, la fel ca ✂i în cazul lui <TR>, modul în care este aliniat
con✁inutul în interiorul celulei, pe orizontal respectiv pe vertical , fiind prioritare fa✁ de alinierea
la nivel de linie
• colspan=✄n✄ stabile✂te întinderea celulei respective în dreapta cu n coloane
(echivalentul opera✁iei Merge Cells din Word, în cazul în care unim celule adiacente pe orizontal );
• rowspan=✄n✄ stabile✂ te întinderea celulei respective în jos cu n linii (echivalentul
opera✁iei Merge Cells din Word, în cazul în care unim celule adiacente pe vertical );
• bgcolor determin , pentru celula respectiv , culoarea de fundal. Evident, este prioritar
fa✁ de acela✂ i atribut la nivel de linie.
Exemplu (apl018.html):
<TABLE border="1" cellspacing="0" cellpadding="5">
<TR bgcolor="#c0c0ff">
<TD>Ziua
<TD>09h00 - 11h00
<TD>11h00 - 13h00
<TD>13h00 - 15h00
<TR bgcolor="yellow" align="center">
<TD align="left"><B>Luni</B>
<TD colspan="2">Mecanica
<TD bgcolor="#ffd0d0">Termodinamica
<TR bgcolor="yellow" align="center">
<TD align="left"><B>Marti</B>
<TD>Electrostatica
<TD>Optica
<TD>Atomica
<TR bgcolor="yellow" align="center">
<TD align="left"><B>Miercuri</B>
<TD rowspan="2" bgcolor="#ffd0d0">Termodinamica
<TD>Optica
<TD>Electrostatica
<TR bgcolor="yellow" align="center">
<TD align="left"><B>Joi</B>
<TD>Mecanica
<TD>Optica
</TABLE>

• Tag-ul <TH>...</TH> poate înlocui <TD>...</TD>. Atributele sunt acelea✂ i. Singura

diferen✁ este c textele de dup tag-ul <TH> sunt, în mod implicit, tip rite îngro✂at (Bold) iar
alinierea lor se face pe centru;
• Tag-ul <CAPTION>...</CAPTION> permite scrierea unui titlu pentru tabel. Acest tag
trebuie s se g seasc imediat dup </TABLE>. Acest tag suport atributul align. Acesta poate lua
una dintre valorile: left (titlul va fi pozi✁ionat în stânga sus), right (pozi✁ionare dreapta sus), top
(pozi✁ionare pe centru sus), bottom (pozi✁ionare pe centru jos);

25
Exemplu (apl019.html):
<H3>Colegiul National "Andrei Saguna"</H3>
<TABLE border="1" cellspacing="0"
cellpadding="5" align="left">
<CAPTION align="bottom">
Scorul pe echipe</CAPTION>
<TR><TH>Echipa<TH>Punctaj
<TR><TD>clasa a 9-a A<TD align="right">87
<TR><TD>clasa a 10-a B<TD align="right">80
<TR><TD>clasa a 12-a B<TD align="right">91
</TABLE> <FONT color="blue">
Colegiul National "Andrei Saguna"
Colegiul National "Andrei Saguna"
Colegiul National "Andrei Saguna"
Colegiul National "Andrei Saguna"
Colegiul National "Andrei Saguna"
Colegiul National "Andrei Saguna"
Colegiul National "Andrei Saguna"
Colegiul National "Andrei Saguna"
Colegiul National "Andrei Saguna"
Colegiul National "Andrei Saguna"
</FONT>

2.3.9. Leg turi (link-uri).

A✁a cum am v✂zut în partea introductiv✂ a acestui capitol, no✄ iunea de www este strâns
legat✂ de documentele de tip hipertext.
Tot ceea ce am prezentat din limbajul HTML pân✂ în momentul de fa✄✂, reprezint✂ doar
partea descriptiv✂ a acestuia, cu ajutorul c✂reia putem crea un con✄inut static.
Link-urile reprezint✂ mecanismul prin care:
• putem face ca un vizitator al paginii, prin executarea unui click, s✂ poat✂ accesa o alt✂
pagin✂, la care dorim s✂-i cre✂m posibilitatea unui acces rapid ✁i, dac✂ acesta dore✁te, s✂ poat✂
reveni în pagina ini✄ ial✂ prin ap✂sarea butonului Back al browser-ului de Internet;
• putem face ca un vizitator al paginii noastre s✂ primeasc✂ un anumit fi✁ier, de orice tip,
care se g✂se✁te pe site-ul nostru (download);
• putem face ca un vizitator al paginii noastre s✂ poat✂ asculta un mesaj sonor sau chiar s✂
poat✂ viziona un film;
• putem ca, printr-un click, s✂ putem vizualiza o pagin✂ (inclusiv cea curent✂) doar dintr-un
anumit loc, f✂r✂ a folosi barele de derulare;
• putem ca, prin accesarea unui click, cel care viziteaz✂ pagina s✂ ne poat✂ trimite un e-mail.
Pentru toate acestea, vom folosi tag-ul <A>...</A>, numit ✁i Ancor✂.

26
Ancore de leg tur c tre alte pagini

Acestea permit ca un anumit element din document s✁ con✂in✁ leg✁ tura c✁ tre o alt✁ pagin✁ .
Elementul care face leg✁tura este de obicei un text sau o imagine. De regul✁ , elementul legat î✄i
schimb✁ aspectul fa✂✁ de cel clasic: textul va fi subliniat ✄i colorat altfel, iar imaginea va avea un
chenar colorat. În momentul în care ducem cursorul deasupra elementului legat, acesta cap✁ t✁ forma
unei mâini, indicându-ne astfel c✁ este vorba de un link pe care îl putem utiliza. Printr-un simplu
click, acces✁ m pagina c✁ tre care este f✁cut✁ leg✁ tura.
Acest tip de leg✁tur✁ se realizeaz✁ practic folosind atributul href, ca în exemplul de mai jos
(a se remarca modul în care, elementul legat, este inclus între tag-urile <A href=...> ✄i </A> :
apl020.html):
<p> Prin executarea unui click
<A href="http://mail.yahoo.com">
pe acest text </A>
poti accesa direct pagina de mail yahoo.
</p>

Dup✁ cum se observ✁ , atributul href prime✄te adresa complet✁ a paginii c✁tre care dorim s✁
facem leg✁ tura. Dac✁ e vorba de un fi✄ier local, din acela✄i director cu pagina din care facem
leg✁ tura, la href este suficient s✁ scriem numele ✄i extensia (de ex: href=☎pagina.htm☎ )

Ancore de leg tur c tre fi✆iere (pentru download)

Se realizeaz✁ în mod analog cu cele c✁ tre alte pagini, la atributul href trebuind specificat
adresa fi✄ierului respectiv (dac✁ este în acela✄i director cu pagina din care facem leg✁ tura, e
suficient s✁ -i scriem numele ✄i extensia).
Ex: în cazul în care fi✄ierul pentru download este local:
Pentru download arhiva executa un click
<A href="arhiva.zip">aici</A>

Ex: în cazul în care fi✄ierul pentru download se afl✁ la alt✁ adres✁ :

Pentru a descarca subiectele de bacalaureat la disciplina informatica, da un click
<A href="http://subiecte2008.edu.ro/bacalaureat/subiecte/E_informatica_c.zip">aici</A>

Leg✁ turile c✁tre fi✄iere de tip sunet sau film se fac absolut în aceea✄i manier✁ . În func✂ie de extensia
lor (.wav, .mid, .mp3, .avi) în momentul execut✁ rii unui click asupra obiectului care face leg✁tura
c✁ tre ele, acestea vor fi deschise automat c✁ tre browser cu programul corespunz✁ tor.

27
Leg turi relative la con✁inutul documentului (paginii)

Sunt acele ancore care permit accesarea direct✂ a unei pagini web într-un anumit loc, f✂r✂ a
mai folosi barele de derulare pentru a ajunge în acel loc.
Pentru aceasta, locul respectiv trebuie marcat. Acest lucru se face tot cu ajutorul tag-ului
<a>, îns✂ folosind atributul id, care va denumi locul respectiv printr-un identificator, ca în
exemplul de mai jos (a se observa c✂ între tag-ul de deschidere ✄i cel de închidere putem s✂ nu
punem nici un element):
<A id=☎ capitolul2☎ ></A>

Accesarea direct✂ a acestui loc cu ajutorul unui link se poate face astfel:
a) Din interiorul acelei✄ i pagini: specificând la atributul href identificatorul respectiv (cel
de la id) înainte de care se pune de caracterul #, ca în exemplul urm✂tor:
<A href=☎ #capitolul2☎ >Salt direct la capitolul 2</A>

b) Din alt✂ pagin✂: specificând la atributul href adresa paginii accesate (a fi✄ ierului html)
urmat✂ de caracterul #, ca în exemplul urm✂tor:
<A href=☎ http://www.myserver.ro/document.html#capitolul2☎ >Deschide documentul extern,
direct la capitolul 2</A>

Ancor de leg tur pentru trimiterea unui e-mail

Acestea permit ca, atunci când o persoan✂ ne viziteaz✂ site-ul, dac✂ dore✄ te, s✂ ne poat✂
trimit✂ un e-mail f✂când un simplu click pe leg✂tura respectiv✂. Totu✄i, pentru ca acest lucru s✂ fie
func✆ional, cel care viziteaz✂ site-ul trebuie s✂ aib✂ configurat pe calculatorul s✂u un client de e-mail
(cel mai frecvent este Outlook Express).
Iat✂ un exemplu pentru o astfel de ancor✂:
<ADDRESS>
Click <A href=☎ mailto:[email protected]☎ >aici</A> pentru a trimite un e-mail
</ADDRESS>

(tag-ul <ADDRESS>...</ADDRESS> nu face altceva decât s✂ afi✄ eze textul din cadrul s✂u italic)

Dup✂ cum se observ✂, pentru trimiterea unui e-mail, dup✂ atributul href trebuie specificat
mailto: urmat de adresa de e-mail a destinatarului.

28
2.3.10. Elemente de structur (HTML, HEAD, BODY).

Dup✁ cum am v✁zut în partea introductiv✁, orice document html este cuprins între tag-urile
<HTML> ✂i </HTML>. El este alc✁tuit dintr-un unic antet (HEAD) ✂i un unic corp (BODY). Aceste 3
elemente au rolul de a defini structura documentului. Din acest motiv ele se mai numesc ✂i elemente
de structur✁.

Tag-ul BODY poate con✄ ine urm✁toarele atribute:

• background=☎fi✆ier_imagine☎ permite specificarea unei imagini de fundal. Aceasta
se va repeta atât pe orizontal✁ cât ✂i pe vertical✁, pân✁ când se acoper✁ întreaga suprafa✄✁ necesar✁
corpului;
• bgcolor=☎culoare☎ permite specificarea unei culori de fond;
• text=☎culoare☎ permite specificarea culorii întregului text cuprins în pagin✁;
• link=☎culoare☎ permite specificarea culorii unui link nevizitat;
• alink=☎culoare☎ permite specificarea culorii unui link activ; un link este considerat
activ în timpul vizit✁rii ✂i imediat dup✁ aceasta;
• vlink=☎culoare☎ permite specificarea culorii unui link vizitat, care nu mai este activ.

Con✝inutul sec✝iunii <HEAD>

În cadrul acestei sec✄ iuni putem întâlni diverse alte tag-uri. Despre tag-ul <TITLE> am
discutat deja, el permi✄ând scrierea unui titlu pentru pagin✁.
În afar✁ de acestea, vom aminti înc✁ alte 3 tag-uri:
• <BASE> permite stabilirea unei adrese de baz✁ pentru resurse. Acest tag se folose✂te în
special atunci când resursele (sau, în fine, o mare parte a acestora) se g✁sesc în alt director decât cel
în care se afl✁ documentul curent. În acest fel, folosirea fi✂ierelor din directorul specificat în BASE
se poate face direct prin numele ✂i extensia lor. Specificarea se face prin:
<BASE href=☎adresa resurse☎>

• <META> este folosit pentru a furniza informa✄ ii motoarelor de c✁utare. Unele dintre acestea
viziteaz✁ doar antetul pentru a ob✄ ine informa✄ ii. Informa✄ iile con✄ inute de acest element nu sunt
afi✂ate de browser, îns✁ este important s✁ îl folosim pentru ca informa✄iile con✄ inute în site-ul nostru
s✁ fie accesibile. Locul tag-ului <META> este în antet (<HEAD>).

29
 Atributele tag-ului <META> sunt name i content. Folosirea lor este ceva mai particular✁,
rezultând din exemplele urm✁toare:
- pentru a specifica autorul unui document:
<META name=✂Author✂ content=✂Prenume NUME✂>
- pentru a specifica titlul unui document:
<META name=✂TITLE✂ content=✂Metode de programare✂>
- pentru a preciza cuvintele cheie dup✁ care s✁ fie reg✁sit site-ul:
<META name=✂KEYWORDS✂ content=✂backtracking, divide et impera,
greedy, programare dinamica✂>
- pentru a specifica limba în care este scris site-ul:
<META name=✂LANGUAGE✂ content=✂RO✂>
Exist✁ i alte atribute ale elementului META, îns✁ cele dou✁ deja prezentate sunt suficiente.

• <STYLE> este utilizat pentru introducerea stilurilor. Acestea permit stabilirea mai
am✁nun✄it✁ a modului în care apar, implicit, diferitele elemente din document. Valorile se trec între
<STYLE>...</STYLE>.
Exemplu:
<STYLE>
P {font-family:☎ Comic Sans MS☎ ; font-size:14pt;}
</STYLE>

Prin specificarea lui P înainte de paranteza acolad✁, stabilim ca modul implicit de afi are al
paragrafelor (s✁ ne reamintim c✁ <P> este tag-ul pentru paragraf) s✁ fie cel descris între parantezele
acolade, deci, în cazul exemplului de fa✄✁ font-ul folosit s✁ fie ✆Comic Sans MS✆, iar dimensiunea
caracterelor s✁ fie de 14.

• <SCRIPT> este utilizat pentru introducerea anumitor secven✄e de program în cadrul

paginilor web. Exist✁ mai multe limbaje (numite de scriptare) care permite scrierea acestor
secven✄e, cum ar fi JavaScript, VBscript. Specificarea limbajului în care este codat scriptul se face
cu ajutorul atributului language, ca în exemplul de mai jos (apl021.html):
<SCRIPT language="JavaScript">
function calcul()
{ s=0; for(i=1;i<=10;i++)
s+=i;
alert("suma nr. de la 1 la 10 este: "+s);}
</SCRIPT>
...
<BODY onload="calcul();"> ... </BODY>

Acest exemplu define te în antetul paginii o func✄ie JavaScript capabil✁ s✁ calculeze suma
numerelor de la 1 la 10 într-o variabil✁ s i-apoi s✁ afi eze valoarea ob✄inut✁ prin intermediul unei
ferestre de dialog. Func✄ia este apelat✁ automat (atributul onload) la înc✁rcarea paginii.

30
2.3.11. Pagini cu cadre (FRAMESET, FRAME, IFRAME).

Utilizarea frame-urilor permite ca, în cadrul aceleia i ferestre ale browser-ului s✁ fie afi ate
simultan mai multe documente HTML (sau alte resurse).
Tag-ul <FRAMESET> are rolul de a împ✁r✂i fereastra în mai multe cadre. În fi ierul HTML,
el înlocuie te tag-ul <BODY>. Iat✁ câteva atribute ale lui FRAMESET:
• rows ✄ descrie liniile în care este împ✁r✂it✁ sec✂iunea FRAMESET respectiv✁
• cols ✄ descrie coloanele în care este împ✁r✂it✁ sec✂iunea FRAMESET respectiv✁
descrierile pentru rows, respectiv cols, pot fi de forma:
<FRAMESET rows=☎ 30%, 50%, 20%☎ >
<FRAME ...>
<FRAME ...>
<FRAME ...>
</FRAMESET>
în acest exemplu, se definesc 3 cadre orizontale (linii) de în✁l✂imi 30%, 50% respectiv 20% din
în✁l✂imea ferestrei.

Un alt exemplu, în care în✁l✂imea cadrelor este definit✁ propor✂ional:

<FRAMESET rows=☎ 3*, 1*, 2*☎>...

aici se definesc 3 cadre orizontale, propor✂ionale cu 3, 1 i 2 dintr-o în✁l✂ime de 3+2+1=6

(deci cadrele vor fi 3/6, 1/6 respectiv 2/6 din în✁l✂imea ferestrei)

Un alt exemplu, în care în✁l✂imea cadrelor este definit✁ în pixeli:

<FRAMESET rows=☎ 100, 200, *☎ >...

aici se definesc trei frame-uri: unul de în✁l✂ime de 100 de pixeli, altul de 200 de pixeli, al treilea
fiind alocat cu spa✂iul r✁mas.

Tag-ul <NOFRAMES>...</NOFRAMES> reprezint✁ con✂inutul care va fi afi at unui vizitator,

în cazul în care browser-ul s✁u nu poate afi a cadre (în prezent, nu prea mai este cazul unor
asemenea browsere).

Fiecare tag <FRAMESET>...</FRAMESET> trebuie ca, dup✁ definirea aspectului (cu ajutorul
unuia dintre atributele cols sau rows) s✁ con✂in✁ descrierile fiec✁ruia dintre cadrele definite. Acest
lucru se face cu ajutorul tag-ului <FRAME> prin intermediul atributelor:
• src ✄ adresa fi ierului HTML sau a imaginii care se va înc✁rca ini✂ial în cadru;
• marginheight ✄ marginile (în pixeli sau procent) fa✂✁ de partea de sus i cea de jos;
• marginwidth ✄ marginile (în pixeli sau procent) fa✂✁ de partea din stânga i din dreapta;

31
 • frameborder poate lua valorile 1 (implicit✁), care înseamn✁ c✁ acest cadru este separat
de celelalte printr-un chenar, respectiv 0, care înseamn✁ c✁ acest cadru nu mai este separat de
celelalte printr-un chenar.
• scrolling trateaz✁ afi✂ area barei de scroll (derulare). Poate lua trei valori:
auto valoarea implicit✁. Bara de scroll este prezent✁ numai dac✁ este cazul
yes bara de scroll este totdeauna prezent✁
no bara de scroll nu va fi niciodat✁ afi✂ at✁
• noresize dac✁ atributul acesta este prezent (el se folose✂ te f✁r✁ a i se atribui nici o
valoare) atunci vizitatorului paginii nu i se va permite s✁ redimensioneze cadrul. Prezen✄a acestui
atribut pentru un cadru nu permite nici redimensionarea cadrelor vecine.
• name este un atribut foarte important. Prin intermediul s✁u va putea fi identificat
frame-ul respectiv. Acest lucru este foarte important, deoarece dintr-un cadru se poate comanda
con✄inutul oric✁rui alt cadru.
Deschiderea unei pagini într-un anumit cadu, prin intermediul ancorelor, se poate specifica
prin folosirea atributului target=☎nume cadru☎ imediat dup✁ folosirea atributului href în
cadrul tag-ului <A href=☎ ...☎ .. >.

Iat✁ un exemplu prin care definim o pagin✁ cu dou✁ frame-uri verticale. Frame-ul din stânga
va con✄ine numele a 3 zile ale s✁pt✁mânii (pe limba român✁). Accesarea fiec✁ruia va produce
deschiderea în frame-ul drept a unei pagini care va con✄ine traducerea numelui zilei respective în 4
limbi.
În total vom avea de construit 5 fi✂ iere:
- un fi✂ ier pentru pagina ini✄ial✁, cea care define✂ te scheletul paginii cu frame-uri
- un fi✂ ier cu cele 3 zile ale s✁pt✁mânii, pe fiecare dintre ele fiind pus câte un hyperlink care va
deschide traducerea numelui s✁u în cel✁lalt frame
- 3 fi✂ iere cu traducerilor numelor zilelor în 4 limbi str✁ine.

Pagina ini✄ial✁ (apl022pagframe.html):

<HTML>
<HEAD>
<TITLE>Pagina cu frames</TITLE>
</HEAD>
<FRAMESET cols="30%,*">
<FRAME name="stinga" src="apl022zile.html" noresize>
<FRAME name="dreapta" src="apl022luni.html">
</FRAMESET>
<NOFRAMES>
Browser-ul tau nu este capabil sa afiseze pagini cu frame-uri
</NOFRAMES>
</HTML>

32
 De remarcat faptul c aceast fi✁ier HTML nu con✂ine decât scheletul cadrelor, ele urmând a
fi populate ini✂ial, dup cum remarca✂i din codul surs , cu fi✁ ierele apl022zile.html pentru
primul cadru (cel din stânga) respectiv cu fi✁ierul apl022luni.html pentru cel de-al doilea cadru.
Observa✂i modul în care au fost definite cadrele în cadrul tag-ului FRAMESET:
cols="30%,*". Acest lucru semnific prezen✂a a dou cadre verticale (coloane) dintre care primul
va ocupa 30% din l ✂imea ferestrei, iar al doilea restul (lucru semnificat de caracterul * care
închide ✁ irul de defini✂ie al cadrelor).
De asemenea, atributul noresize în cadrul primului tag FRAME împiedic redimensionarea
cadrelor de c tre utilizator. În cazul în care acest atribut nu ar fi fost prezent, utilizatorul, printr-un
simplu ✄drag and drop☎ ar fi putut trage bara care separa cele dou frame-uri, dându-i orice pozi✂ie
ar fi dorit.
Dac înc rc m în browser-ul de internet documentul creat în acest stadiu, f r ca pe disc s
existe vreunul dintre celelalte patru fi✁ iere planificate, am ob✂ine urm torul rezultat:

Acesta era ✁ i de a✁ teptat, de altfel, deoarece el demonstreaz existen✂a frame-urilor ✁ i lipsa

con✂inutului.

Iat ✁ i con✂inutul celorlalte fi✁iere, pe care le vom pune în acela✁i director cu documentul de
mai sus (în dreptul fiec ruia vom ar ta ✁ i vizualizarea sa în browser):
Fi✁ ierul apl022zile.html:
<HTML>
<HEAD> <TITLE>Zilele</TITLE> </HEAD>
<BODY>
<br>
<A href="apl022luni.html" target="dreapta">Luni</A><br><br>
<A href="apl022marti.html" target="dreapta">Marti</A><br><br>
<A href="apl022miercuri.html" target="dreapta">Miercuri</A><br><br>
</BODY>
</HTML>

De remarcat modul în care am realizat link-urile asupra celor 3 cuvinte: folosind ✁ i atributul
target în cadrul ancorei (<A ...>) am specificat browser-ului ca paginile respective s fie
deschise în cadrul frame-ului al c rui nume apare dup target.
33
Fi ierul apl022luni.html: Fi ierul apl022marti.html: Fi ierul apl022miercuri.html:
<HTML><BODY> <HTML><BODY> <HTML><BODY>
<H2>Luni</H2> <H2>Marti</H2> <H2>Miercuri</H2>
FR: Lundi<BR> FR: Mardi<BR> FR: Mercredi<BR>
IT: Lunedi<BR> IT: Martedi<BR> IT: Mercoledi<BR>
GE: Montag<BR> GE: Dienstag<BR> GE: Mittwoch<BR>
EN: Monday<BR> EN: Tuesday<BR> EN: Wednesday<BR>
</BODY></HTML> </BODY></HTML> </BODY></HTML>

Iat✁ cum arat✁ vizualizarea final✁ în browser (dup✁ crearea celor 4 fi iere de mai sus):

Evident, la efectuarea unui click asupra leg✁ turilor (luni, marti, miercuri) din partea stâng✁ ,
se va produce deschiderea paginii corespunz✁ toare în frame-ul drept.

Tag-ul <IFRAME> este un element care nu a fost prezent în primele versiuni ale limbajului
HTML, ci a ap✁ rut ceva mai nou. Actualmente, folosirea sa este preferat✁ de majoritatea celor care
programeaz✁ pagini web, deoarece se comport✁ ceva mai flexibil decât cadrele clasice. Totodat✁ ,
motoarele de c✁utare nu indexeaz✁ con✂ inutul paginilor cu frame-uri obi nuite, pe când cele care
con✂ in iframe-uri sunt indexate.
Prin intermediul s✁ u, este permis✁ crearea unui cadru în corpul unui documente HTML,
cadrul care se comport✁ asem✁ n✁ tor unei imagini.
Atributele lui IFRAME sunt:
• name ✄ la fel ca i la FRAME, acest atribut permite identificarea IFRAME-ului (pentru a
putea comanda con✂ inutul s✁ u din orice link)
• height, width în✁ l✂ imea, respectiv l✁✂ imea. Pot fi specificate atât în pixeli, cât i în
procente, relativ la dimensiunile ferestrei browser-ului
• frameborder ✄ poate lua valoarea 0 sau 1, la fel ca la elementul FRAME
• src ✄ adresa resursei care va fi înc✁rcat✁ ini✂ ial în IFRAME
• marginwidth, marginheight, scrolling ✄ la fel ca i la FRAME
• align ✄ poate lua una dintre valorile left, right, top, bottom, middle,
comportându-se întocmai ca i în cazul imaginilor

34
 Iat reluarea aceleia✁i idei structurale ca ✁ i la aplica✂ia de dinainte (cu frame-uri clasice) îns
folosind un element de tipul IFRAME. Fi✁ ierele apl022luni.html, apl022marti.html
respectiv apl022miercuri.html le p str m nemodificate. Practic, mai cre m doar un singur
fi✁ ier HTML, cu con✂ inutul urm tor, ✁ i avem grij s copiem în acela✁i director ✁i cele 3 fi✁ iere de
mai sus (apl023.html):
<HTML>
<HEAD><TITLE>Elementul IFRAME</TITLE></HEAD>
<BODY>
<IFRAME name="cadru" width="140"
height="160" align="right" src="apl022luni.html">
</IFRAME>
<BR>
<A href="apl022luni.html" target="cadru">
Luni</A><BR><BR>
<A href="apl022marti.html" target="cadru">
Marti</A><BR><BR>
<A href="apl022miercuri.html" target="cadru">
Miercuri</A><BR><BR>
</BODY>
</HTML>

2.3.12. Bare de separare (HR).

Bara de separare, al c rei tag este <HR> reprezint un element decorativ. De obicei se
folose✁ te pentru a separa anumite sec✂ iuni ale paginii web.
Atributele sale sunt:
• width ✄ permite specificarea lungimii sale. Poate fi dat în pixeli sau în procente. Dac
acest atribut lipse✁ te, atunci lungimea sa va fi maxim (din marginea stâng ✁i pân marginea
dreapt a ferestrei);
• size ✄ permite specificarea în l✂ imii barei. Se specific în pixeli;
• color ✄ permite specificarea culorii sale.

Exemplu (apl024.html):
<BODY>
O linie clasica:
<HR>
<CENTER>O linie de lungime 50%</CENTER>
<HR width="50%">
<CENTER>O linie de lungime 200 de pixeli,
grosime 10 pixeli, de culoare rosie</CENTER>
<HR width="200" size="10" color="red">
</BODY>

35
2.3.13. Formulare.

Formularele sunt elemente ale limbajului HTML. Ele reprezint o grupare de componente
care permit trimiterea de date ✁i de comenzi c tre un server. Acesta trebuie s fie mai mult decât un
clasic server HTTP, trebuind s aib instalat ✁i o component capabil de a r spunde comenzilor ✁i
a prelucra datele. Cea mai popular astfel de component , foarte larg utilizat în ultimii 10 ani în
programarea pe Internet este limbajul PHP, de care ne vom ocupa pe larg în capitolul al III-lea al
acestei lucr ri.
Pentru moment ne vom concentra asupra componentelor unui formular ✁i a aspectului
acestora.

Un formular este descris prin intermediul tag-ului <FORM>...</FORM>. Atributele acestuia

sunt:
• action=✂adresa✂ ✄ acest atribut specific adresa script-ului care se va ocupa de a
r spunde la comenzi ✁i de a prelucra datele.
• method ✄ acest atribut specific modul în care datele vor fi transmise c tre server.
Distinge, dou valori pe care le poate lua acest atribut, ✁i anume:
- get ✄ datele sunt ☎la vedere✆ ✄ acest lucru înseamn c , în momentul trimiterii lor
c tre server, ele vor ap rea scrise în clar, în bara de adres , într-un anumit format standard. De
exemplu, dac formularul trimite c tre pagina test.php o variabil a care este egal cu 5, în bara de
adres a browser-ului ne va ap rea http://.../test.php?a=5. Un dezavantaj major al acestei
metode de trimitere a datelor este c volumul acestora este limitat (datorit ✁irului de caractere din
adres , care este limitat în cazul fiec rui browser).
- post ✄ datele nu mai apar în mod explicit utilizatorului. Totu✁i, ele nu sunt
criptate ✄ practic, un program r uf c tor le poate intercepta.

Pe lâng componentele specifice, un formular poate con✝ ine orice fel de alte elemente valide
de HTML ✄ tabele, imagini, text, bare de separare ...
În continuare vom prezenta câteva din componentele unui formulare, prin intermediul c rora
utilizatorul poate introduce date ✁i trimite apoi aceste date c tre server. Un atribut foarte important
al oric ruia dintre aceste componente este name, deoarece prin intermediul s u, server-ul care va
primi datele va ✁ti despre care dintre controale este vorba.

36
Câmpuri text

Permit utilizatorului s introduc date într-un câmp de tip edit (pe o singur linie).
Aceste se specific prin tag-ul
<INPUT type=✁text✁ ...>
Atributele sale sunt:
• size ✂ specific l ✄ imea (în num r aprox. de caractere) câmpului text; Dac acest
parametru este omis, este implicit considerat ca fiind 20;
• maxlength ✂ specific num rul maxim de caractere ce pot fi scrise în câmpul text. Acest
atribut poate primi o valoare mai mare decât cea scris la size, caz în care, textul va defila în control
(stânga dreapta) în cazul în care scriem mai multe caractere decât câte încap în por✄ iunea vizibil .
Omiterea acestui atribut va permite introducerea unui num r foarte mare de caractere (limita difer
de la un browser la altul);
• name ✂ numele câmpului text (prin care server-ul va identifica acest câmp, pentru a prelua
datele din el);
• value ✂ poate specifica o valoare care s fie ini✄ ial (la înc rcarea paginii) deja scris în
cadrul controlului. Dac omitem acest atribut, câmpul text va fi gol.

Butoane de tip ☎ submit✆

Aceasta componenta se prezint sub forma unui buton. Prin ap sarea sa are loc trimiterea
tuturor datelor din formular c tre script-ul de pe server-ul care le va prelucra.
Un control de tip submit se specific prin tag-ul:
<INPUT type=✁submit✁ ...>
Atributele sale sunt:
• name ✂ numele de identificare a componentei. Putem omite acest atribut. El se folose✝te în
cazul în care aceluia✝i formular dorim s -i ata✝ m mai multe butoane de acest tip, iar ap sarea
fiec ruia s produc o ac✄ iune diferit ;
• value ✂ textul care va fi scris pe buton. De altfel, aceasta va fi ✝i valoarea pe care server-
ul o va primi pentru acest control.

37
Câmpuri de tip password

Se comport identic cu câmpurile de tip text. Singura deosebire este c , la scrierea de text în
ele, acesta nu va fi vizibil, ci în locul caracterelor introduse se vor afi✁a asterisc-uri. Totodat , textul
dintr-un astfel de control nu poate fi luat cu copy/paste.
Controalele de acest fel se specific prin tag-ul:
<INPUT type=✂password✂ ...>
Atributele sunt identice cu cele de la <INPUT type=✂text✂ ...>

Câmpuri de tip butoane radio

Sunt controalele care permit ca, dintr-o serie de op✄iuni posibile, utilizatorul s aleag una
singur . Controalele de acest fel se specific prin tag-ul:
<INPUT type=✂radio✂ ...>
Atributele sale sunt:
• name ☎ numele de identificare al componentei. Este obligatoriu ca toate butoanele care
apar✄in aceluia✁ i grup (deci seria de op✄iuni din care trebuie aleas doar una singur posibil ) s
poarte acela✁ i nume de identificare;
• value ☎ valoarea pe care o va întoarce butonul respectiv, dac el a fost cel ales;
• checked ☎ dac acest atribut este prezent, butonul respectiv va fi ales în mod implicit, la
înc rcarea paginii. Este recomandabil ca, dintre toate butoanele care apar✄in aceluia✁ i grup, exact
unul singur s con✄in acest atribut.
Iat ✁ i un exemplu care combin controalele prezentate pân acum ( apl025.html):
<FORM action="nefunctional.php" method="post">
Introdu numele tau de familie
<INPUT type="text" size="10" maxlength="20"
name="numele">
<BR><BR>Alege-ti si o parola
<INPUT type="password" size="10" maxlength="20"
name="parola">
<BR><BR>
Alege ce fel de studii ai:<BR><BR>
<INPUT type="radio" name="studii" value="scprim">
Doar scoala primara<BR>
<INPUT type="radio" name="studii" value="8clase">
Scoala primara si cea generala (8 clase)<BR>
<INPUT type="radio" name="studii" value="medii"
checked>
Studii medii (liceul si eventual un curs postliceal)
<BR>
<INPUT type="radio" name="studii" value="univ">
Studii universitare<BR><BR>
<INPUT type="submit" value="Trimite datele">
</FORM>

Evident, acest exemplu este nefunc✄ional, în sensul c datele din formular nu sunt prelucrate.
Acest lucru va face obiectul capitolului urm tor, ✁ i anume preluarea datelor dintr-un formular prin
intermediul limbajului php.

38
Câmpuri de tip checkbox

Sunt controale care permit bifarea sau tergerea bif✁rii unei c✁su✂ e. Din punct de vedere
practic, ele permit utilizatorului s✁ marcheze una, nici una, sau mai multe op✂iuni.
Controalele de acest fel se specific✁ prin tag-ul:
<INPUT type=✄checkbox✄ ...>
Atributele sale sunt:
• name ☎ numele de identificare al componentei;
• value ☎ valoarea pe care o va întoarce controlul respectiv;
• checked ☎ dac✁ acest atribut este prezent, atunci controlul va fi bifat la înc✁rcarea paginii.
Exemplu (apl026.html):
<FORM action="nefunctional.php" method="post">
Alege din lista de mai jos limbile
pe care le cunosti:<BR><BR>
<INPUT type="checkbox" name="rom" value="1" checked>
Limba românã<BR>
<INPUT type="checkbox" name="eng" value="2">
Limba engleza<BR>
<INPUT type="checkbox" name="fr" value="3">
Limba franceza<BR>
<INPUT type="checkbox" name="germ" value="4">
Limba germana<BR><BR>
<INPUT type="submit" value="Trimite datele">
</FORM>

Câmpuri ascunse (de tip hidden)

Aceste componente permit trimiterea de valori c✁tre server (o dat✁ ce butonul submit a fost
ap✁sat) f✁r✁ ca acestea s✁ fie vizibile în cadrul form-ului. Practic, aceste componente se specific✁
doar în cadrul codului HTML:
<INPUT type=✄hidden✄ name=✄nume✄ value=✄value✄>
A a cum se observ✁ în tag-ul de mai sus, cu ajutorul atributului name specific✁m numele
controlului, iar cu ajutorul atributului value specific✁m valoarea care va fi trimis✁ c✁tre server.

Controlul de tip TEXTAREA

Este o component✁ care se utilizeaz✁ pentru a introduce un text mai lung, care se poate
întinde pe mai multe linii.
Tag-ul s✁u este: <TEXTAREA>...</TEXTAREA>.

39
 Atributele sale sunt:
• name numele de identificare al componentei;
• rows num✁rul de linii pe care se întinde componenta (implicit 2);
• cols num✁rul de coloane pe care se întinde componenta (implicit 20);
Dac✁ dorim ca la înc✁rcarea paginii s✁ ne apar✁ un text deja scris în cadrul controlului, acest
text se va scrie între tag-ul de deschidere ✂i cel de închidere al lui TEXTAREA.
Exemplu (apl027.html):
<FORM action="nefunctional.php" method="post">
Scrie-ti parerea despre spectacol:<BR>
<TEXTAREA rows="3" cols="30" name="parerea"></TEXTAREA>
<BR>
<INPUT type="submit" value="Trimite datele">
</FORM>

Controlul de tip SELECT

Acest control este utilizat pentru afi✂ area unei liste din care utilizatorul poate s✁ aleag✁ unul
sau mai multe op✄iuni.
Tag-ul prin care se utilizeaz✁ aceast✁ component✁ este <SELECT>...</SELECT>.
Atributele sale sunt:
• name numele de identificare al componentei;
• multiple dac✁ acest atribut este prezent, utilizatorul poate alege mai multe op✄ iuni din
list✁, ✄ inând ap✁sat✁ tasta control sau shift în timp ce d✁ click pe acestea.
• size num✁rul de op✄ iuni care sunt afi✂ ate. Implicit este 1, în cazul listelor care nu sunt
de tip multiple. În acest caz, lista se prezint✁ sub forma unei liste de tip drop-down;

Fiecare op✄ iune din list✁ se specific✁ printr-un tag <OPTION>...</OPTION>. Acestea, la
rândul lor, au urm✁toarele atribute:
• value reprezint✁ valoarea care va fi întoars✁ de controlul SELECT în cazul în care va fi
selectat✁ op✄ iunea respectiv✁;
• selected dac✁ acest atribut este prezent, op✄ iunea respectiv✁ va fi selectat✁ la
înc✁rcarea paginii
Textul efectiv al op✄ iunii se scrie între tag-ul de deschidere ✂i cel de închidere. Tag-ul de
închidere este op✄ ional, el putând fi omis.

40
 Iat un exemplu de folosire al controlului de tip select (apl028.html):
<FORM action="nefunctional.php" method="post">
Alege din lista de mai jos ce fel de studii ai:
<BR>
<SELECT name="studii">
<OPTION value="prim">Scoala primara (4 clase)
<OPTION value="gen">Scoala generala (8 clase)
<OPTION value="lic" selected>Studii medii (12 clase)
<OPTION value="univ">Studii universitare
</SELECT>
<INPUT type="submit" value="Trimite datele">
</FORM>

2.4. Extinderi ale limbajului HTML standard: HTML dinamic, script-uri.

De✁i HTML-ul clasic permite redactarea unor documente hypertext de un nivel foarte înalt
✁i elaborat, o dat cu evolu✂ia limbajelor de programare vizuale, a început s devin mai pu✂ in
atractiv decât a fost la început.
Din acest motiv, a fost pus la punct ceea ce numim DTHML (Dynamic HTML) ✄ care nu
este un limbaj în sine, ci un termen prin care sunt desemnate tehnicile utilizate pentru a face
paginile web cât mai dinamice ✁i cât mai interactive.
Pe lâng HTML-ul propriu-zis, noile unelte recunoscute de browser-ele din ultima genera✂ie
sunt CSS (Cascading Style Sheets), JavaScript ✁i DOM (Document Object Model).
Scopul acestei lucr ri nu este studiul am nun✂ it al acestora, de aceea le vom trece doar în
revist , folosind mici exemple comentate pentru fiecare dintre ele.

2.4.1. CSS (Cascading Style Sheets).

No✂iunea de stil este, pentru un document HTML, asem n toare cu formatarea

documentului, spre exemplu, pentru un document Word. Exis o mul✂ ime de atribute prin care se
pot stabili font-urile, caracteristicile de aliniere a textului, forma elementului, culorile de fond ✁i ale
literelor, marginile, pozi✂ ia elementelor, etc.
Pentru a putea gestiona cât mai eficient stilurile, a fost pus la dispozi✂ ia programatorilor de
pagini web un limbaj prin care se poate realiza acest lucru. Acest limbaj este cunoscut sub numele
de CSS (actualmente, vorbim de versiunea CSS2).
Leg tura dintre HTML ✁i CSS se realizeaz prin intermediul tag-ului <STYLE>...</STYLE>
care trebuie a✁ezat între <HEAD> ✁i </HEAD>.

41
 În cadrul tag-ului STYLE vom stabili modul în care dorim s arate elementele paginii.
Fiecare element al HTML-ului pe care l-am studiat este identificat, în cadrul CSS-ului de tag-ul care
îl gestioneaz . Spre exemplu, identificatorul CSS pentru paragrafe este P, pentru table este TABLE,
pentru imagini este IMG, ✁ .a.m.d.
Folosind ace✁ ti identificatori în cadrul unui <STYLE>...</STYLE>, putem face ca toate
elementele de acela✁ i fel din cadrul unui document s arate la fel. Astfel suntem scuti✂ i de a scrie o
gr mad de cod care s-ar repeta în cazul fiec rui element de acela✁i fel.
De exemplu, dac dorim ca, în cadrul paginii noastre, absolut toate paragrafele s fie scrise
cu fontul Comic Sans MS, caractere de 14, culoare albastr , pe fond galben, în loc de a scrie ace✁ ti
parametri la fiecare paragraf din document, este suficient s definim urm torul STYLE
(apl029.html):
<HTML><HEAD>
<TITLE>Utilizare STYLE in HEAD</TITLE>
<STYLE>
P {
background:yellow;
color:blue;
font-family:"Comic Sans MS";
font-size:14pt;
}
HR {
text-align:left;
width:50%;
height:5px;
color:red;
}
</STYLE>
</HEAD>
<BODY>
<P>Iata un paragraf formatat asa cum am anuntat</P>
<HR>
Acesta este un text care nu se afla in paragraf
<HR>
<P>Acest text este din nou in cadrul unui paragraf</P>
</BODY></HTML>
De remarcat faptul c ambele paragrafe, ✁ i de asemenea ambele linii orizontale (HR) din
cadrul lui BODY nu con✂ in nici un fel de referin✂ de formatare. Cu toate acestea, definirile lui P ✁i
ale lui HR în cadrul lui STYLE au ✄predefinit☎ modul în care vor ar ta toate paragrafele respectiv
toate liniile orizontale ale documentului.
Sintaxa defini✂ iei este de felul urm tor: Se începe cu identificatorul elementului dorit a fi
formatat (în cazul nostru P ✆ tag-ul pentru paragraf, respectiv HR) între acolade trecându-se
specificatorii de format (ace✁tia ✂ in de limbajul CSS) dori✂ i a fi modifica✂i. În cazul de fa✂ , avem
de-a face cu:
background = culoarea de fundal; color = culoarea scrisului;
font-familiy = numele font-ului; font-size = dimensiunea caracterelor;
text-align = alinierea în cadrul unui text; width = l ✂imea;
height = în l✂ imea.

42
 O alt form de utilizarea a CSS-ului const în definirea stilurilor cu ajutorul unor
identificatori proprii, care se pot aplica ulterior unui anumit paragraf. În acest caz, în cadrul unui
style putem defini proprii identificatori, precedându-i de caracterul #. Aplicarea ulterioar a lor
asupra unui element, se face specificând un nou atribut, ✁i anume id=✂identificator✂ unde
identificator este cel propriu, definit în cadrul lui STYLE (cel precedat de #)

Ex: dac inser m în codul de mai sus secven✄a urm toare (tot în cadrul lui STYLE, dup
defini✄ia lui HR, adic cea scris cu ro☎ u închis):

#alt_paragraf {
color:green;
font-weight:bold;
}

iar înainte de </BODY> mai inser m urm torul paragraf:

<P id="alt_paragraf">Acesta este un paragraf personalizat</P>

vom ob✄ine urm torul rezultat:

Remarca✄i faptul c au fost aplica✄i doar cei doi specificatori de format defini✄i în noul stil, ✁ i
anume culoarea fontului ✁ i faptul c scrisul este bold. Celelalte caracteristici (font-ul ✁i culoarea
galben de fundal) au r mas cele definite tot în STYLE, în cadrul lui P.

În loc de a defini stilurile în cadrul antetului (HEAD), a✁ a cum am ar tat mai sus, ele pot fi
scrise separat, într-un fi✁ ier text cu extensia .css, exact în aceea✁ i manier în care le-am fi scris între
cele dou tag-uri prezentate, <STYLE>...</STYLE>.
Includerea efectiv a acestui fi✁ ier în cadrul HTML-ului se face tot în sec✄iunea <HEAD>,
prin intermediul urm torului tag:
<LINK rel="stylesheet" type="text/css" href="fisier_stil.css">

43
Iat un exemplu:
1) Con✁ inutul fi✂ierului css, pe care l-am numit apl30stil.css:
TABLE {
border-width:2px;
border-style:ridge;
border-collapse:collapse;
}
TD {
border-style:ridge;
border-width:2px;
padding:5px;
}
TH {
border-style:ridge;
border-width:2px;
background:#7fffff;
padding:5px;
}

TR {
background:#ffff7f;
}

#TR1 {
background:#00ff00;
}
Dup cum se observ , am definit în cadrul s u formatele implicite pentru un tabel, rândurile
✂ i celulele sale (TABLE, TR, TD, TH) precum ✂ i un identificator propriu, #TR1.
Iat ✂ i fi✂ ierul HTML care va folosi acest .css (apl030.html):
<HTML>
<HEAD>
<TITLE>Utilizare css</TITLE>
<LINK rel="stylesheet" type="text/css" href="apl30stil.css">
</HEAD>
<BODY>
<TABLE>
<TR><TH>Numar<TH>Nume
<TR><TD>1<TD>Ion
<TR><TD>2<TD>Pop
<TR><TD>3<TD>Top
<TR id="TR1"><TD>4<TD>Ivan
</TABLE>
</BODY>
</HTML>

Iat , în continuare, în partea stâng , cum arat HTML-ul, datorit includerii acestui fi✂ ier CSS, iar
în partea dreapt cum ar fi ar tat acela✂ i HTML, f r a specifica nici un fel de format în CSS:

44
2.4.2. JavaScript.

JavaScript este un limbaj de programare orientat pe obiecte. În ciuda numelui i a unor

oarecare similarit✁✂i în sintax✁, între JavaScript i Java nu exist✁ nici o leg✁tur✁.
JavaScript are o sintax✁ apropiat✁ de cea a C-ului; din acest motiv un programator care
cunoa te C poate cu u urin✂✁ s✁ înve✂e JavaScript.
De i acest limbaj are o plaj✁ mai larg✁ de extindere, cel mai des întâlnit este în scriptarea
paginilor web. Programatorii web pot îngloba în paginile HTML script-uri pentru diverse activit✁✂i,
cum ar fi verificare datelor introduse de utilizatori, sau crearea de meniuri ori de alte efecte animate.
Browser-ele re✂in în memorie o reprezentare a paginii web sub forma unui arbore de obiecte,
punând aceste obiecte la dispozi✂ia JavaScript-ului, care le poate citi i manipula. Acest arbore de
obiecte, de care ne vom ocupa în paragraful urm✁tor, poart✁ numele de DOM (Document Object
Model).
Pentru moment, vom da câteva exemple comentate de script-uri JavaScript, care nu folosesc
DOM (pentru familiarizarea cu sintaxa), în cadrul unor documente HTML.
1) Calculul sumei cifrelor unui num✁r natural (apl031.html):
<HTML><HEAD>
<TITLE>JavaScript</TITLE>
</HEAD>
<BODY><HR>
<!--Vom scrie secventa de cod direct in cadrul paginii.
A se remarca faptul ca, va aparea mai intii primul HR,
se va rula codul din tag-ul SCRIPT iar apoi va aparea
cel de-al doilea HR-->
<SCRIPT language="JavaScript">
v_text=prompt("Introdu un numar intreg cu maxim 9 cifre:","");
//functia prompt deschide o fereastra de dialog prin intermediul
//careia utilizatorul poate sa introduca date de tip string. Al doilea parametru
//(✄ irul vid "") reprezint☎ valoarea care se va g☎ si implicit scris☎ în fereastra
//de dialog. Evident, dac☎ nu dorim nici o valoare implicit☎ , se folose✄ te ✄ irul vid ("")
//String-ul obtinut l-am atribuit variabilei v_text
nr=parseInt(v_text);//am facut conversia de la variabila text
//la un numar intreg
s=0;//in s calculam suma cifrelor lui nr
do//procedam intocmai ca in limbajul C:
{
r=nr%10;
s+=r;
nr=parseInt(nr/10);//in JavaScript impartirea NU mai respecta
//regulile din C, deoarece operatorul / face impartire cu
//zecimale. Pentru a obtine citul intreg, am facut conversia la
//intreg cu acelasi parseInt
}while(nr);
alert("Suma cifrelor este "+String(s));
//functia alert(mesaj_de_tip_string) produce afisarea unei ferestre
//de dialog ce contine mesajul respectiv. A se remarca modul in care
//am concatenat mesajul cu valoarea variabilei s, convertita la string
//cu ajutorul functiei String.
</SCRIPT>
<HR>
</BODY></HTML>
A se remarca locul în care am pus script-ul (în cadrul paginii). În exemplele urm✁toare nu
vom mai da tot codul, ci doar secven✂a efectiv✁ a script-ului.

45
2) Sortarea unui ir de numere (apl032.html):

<SCRIPT language="JavaScript">
v_text=prompt("Introdu un sir de numere pe care le separi prin spatii:","");
x=v_text.split(" ");//functia split, aplicata lui v_text (cu parametrul " ")
//va extrage substringurile din v_text care sunt separate de spatii si va crea
//un sir de string-uri, pe care i-l atribuie variabilei x. Acestea vor fi
//x[0], x[1], ... Numarul total de elemente din sirul x se obtine prin x.length
n=x.length;//obtinem acest numar in variabila n
for(i=0;i<n;i++)
x[i]=parseInt(x[i]);//in acest fel transformam toate componentele sirului
//x din string-uri in intregi. In C acest lucru nu ar fi fost posibil.
//acum sortam sirul obtinut:
for(i=0;i<n-1;i++)
for(j=i+1;j<n;j++)
if(x[i]>x[j])
{ aux=x[i];x[i]=x[j];x[j]=aux;}
//si afisam sirul final. Pentru asta, formam tot mesajul de afisat intr-un string
s="Iata sirul final, sortat:\n";
for(i=0;i<n;i++)
s=s+String(x[i])+" ";
alert(s);
</SCRIPT>

3) Descompunerea unui num✁r în factori primi (apl033.html):

<SCRIPT language="JavaScript">
v_text=prompt("Introdu nr. intreg pe care doresti sa-l descompui in factori primi:","");
s="Iata descompunerea in factori primi:\n";
//pregatim string-ul in care vom afisa rezultatul final, pentru ca la acest string
//vom tot concatena noile date obtinute
n=parseInt(v_text);
f=2;
while(n!=1)
{
p=0;
while(n%f==0)
{
n=parseInt(n/f);
p++;
}
if(p)
s+="Factor="+String(f)+" putere="+String(p)+"\n";
//fiecare nou factor si putere obtinute le concatenam la stringul
//care va fi in final afisat
f++;
}
alert(s);
</SCRIPT>

46
2.4.3. DOM (Document Object Model).

DOM reprezint o interfa✁ independent fa✁ de orice limbaj de programare ✂i platform ,

care permite programelor informatice ✂i script-urilor s aib acces sau s actualizeze con✁inutul,
structura sau stilurile unui document. Documentul poate fi apoi prelucrat, iar rezultatele acestor
prelucr ri pot fi reincorporate în document atunci când acesta este prezentat.
Înainte de standardizarea DOM-ului, fiecare navigator dispunea de propriul s u model. Dac
limbajul de baz destinat manipul rii documentelor web a fost repede standardizat în jurul lui
JavaScript, nu acela✂i lucru se poate spune ✂i despre func✁ iile specifice de utilizat ✂i maniera de a
parcurge documentul. Cele dou mari browser-e care s-au impus (Netscape Navigator ✂i Internet
Explorer) denumeau în moduri diferite o serie de componente. În practic , acest lucru obliga
programatorul s scrie cel pu✁in dou versiuni ale fiec rui script, dac dorea ca site-ul s u s fie
accesibil pentru cât mai mult lume.
Prima încercare de standardizare (DOM 1) a avut loc de-abia în 1998. Ultimul nivel de
standardizare (DOM 3) a avut loc în 2004.

Din punct de vedere dinamiz rii paginilor web, limbajul JavaScript reprezint doar o unealt
de lucru (a✁i remarcat în paragraful anterior similitudinea dintre acesta ✂i limbajul C). Pentru ca
limbajul JavaScript s ac✁ ioneze asupra con✁ inutului paginii, ei bine, acest lucru îl face tocmai prin
intermediul DOM.
Prin intermediul DOM putem accesa orice obiect al paginii web ✂i îl putem face s se
comporte exact în felul în care dorim noi.
Ca ✂i în cazul program rii vizuale, DOM permite interceptarea anumitor evenimente (pozi✁ ia
mouse-ului, click-uri, etc.) ✂i tratarea lor diferen✁ iat .
Vom da în continuare, câteva exemple comentate, în care oper m cu JavaScript + DOM.

1) Schimbarea unei imagini atunci când trecem cu cursorul peste ea: Pentru aceasta aplica✁ ie
avem nevoie de doua fi✂iere imagine, care s fie, de preferabil, identice ca ✂i dimensiuni, ✂i ob✁ inute
una dintr-alta printr-un procedeu de genul negativ sau trecere la alb-negru.
Iat fi✂ierele imagine pe care am testat script-ul urm tor:

dog.jpg: dogneg.jpg (negativul)

47
apl034.html:
<HTML><HEAD>
<TITLE>Schimbare de imagini</TITLE>
<SCRIPT language="JavaScript">

function schimba_negativ()
{//in momentul apelului, aceasta functie obtine
//in variabila dp o referinta catre obiectul img
//din pagina principala, gratie id-ului sau, si
//anume 'poza'
dp=document.getElementById("poza");
//dupa care imaginea sursa a sa este schimbata,
//folosind imaginea din fisierul dogneg.jpg (cea negativa)
dp.src="dogneg.jpg";
}

function revine_normal()
{//exact la fel ca functia precedenta, insa
//se foloseste alta imagine, si anume cea initiala,
//dog.jpg
dp=document.getElementById("poza");
dp.src="dog.jpg";
}

</SCRIPT>
</HEAD>
<BODY>
<!--elementului img ii stabilim id-ul 'poza'
pentru a-l putea folosi apoi in cadrul script-ului
de asemenea, programam ca elementul img sa reactioneze
la cele doua evenimente:
- onmouseover (cind mouse-ul intra deasupra imaginii)
se va apela functzia care schimba imaginea originala cu
cea pe negativ
- onmouseout (cind mouse-ul iese de deasupra imaginii)
se va apela functzia care pune la loc imaginea originala-->
<IMG src="dog.jpg" id="poza"
onmouseover="schimba_negativ();"
onmouseout="revine_normal();">
</BODY>
</HTML>

2) Schimbarea culorii de fundal a unui tabel, culoare pe care o compunem cu ajutorul a 3

valori pentru componentele R, G, B (între 0 i 255) pe care le scriem în ni te zone text. Cele 3
valori le vom valida (apl035.html):
<HTML><HEAD><TITLE>Exemplu de JavaScript</TITLE>
<SCRIPT laguage="JavaScript">
function toHex(numar)
{//aceasta functie converteste numarul parametru din zecimal
//in hexazecimal. Ne bazam ca este cuprins intre 0 si 255
c1=parseInt(numar/16);
c2=numar%16;
//in c1 si c2 am obtinut cele 2 cifre hexazecimale
if(c1>9) c1=String.fromCharCode(65+c1-10);
//daca c1 este mai mare decit 9, o inlocuim cu litera corespunzatoare (A=10, B=11, ...,
// F=15) adunind la codul ASCII al lui A (65) diferenta corespunzatoare. Conversia, in
//JavaScript, de la codul ASCII la caracter se face prin
//String.fromCharCode(codul ascii al caracterului)
if(c2>9) c2=String.fromCharCode(65+c2-10);
return String(c1)+String(c2);
}

function rgb(red,green,blue)
{//aceasta functie genereaza constanta HTML de tip culoare plecind de la valorile lui
//red, green, blue, numere cuprinse intre 0 shi 255.Ea se foloseste de functia de mai sus
return "#"+toHex(red)+toHex(green)+toHex(blue);
}

48
function coloreaza()
{//aceasta functie se apeleaza la apsarea butonului definit in cadrul lui BODY. In primul
//rind testam daca valorile sunt intregi. Observati ca am folosit identificatorii dati la
//atributul id pentru a extrage valorile din cimpurile text. In primul rind, pentru a
//accesa obiectele de tip <input type="text" id="..."> va trebui sa ne folosim de o
//functie speciala DOM, si anume document.getElementById. Aceasta functie ne intoarce
//o variabila prin intermediul careia putem accesa in continuare obiectul cu ID-ul
//respectiv.
//In cazul nostru, obtinem variabilele r, g si b pe baza cimpurilor text cu ID-urile
//rr, gg si bb definite in cadrul sectiunii <body>, mai jos.
//Pe baza variabilelor de tip obiect r, g si b, cimpul "value" ne va intoarce taman
//valoarea scrisa in acestea
r=document.getElementById("rr");
g=document.getElementById("gg");
b=document.getElementById("bb");
nr=parseInt(r.value);ng=parseInt(g.value); nb=parseInt(b.value);
if(nr!=r.value)//daca valoarea convertita la intreg nu coincide
//cu cea neconvertita, inseamna ca nu este inteaga, deci dam un mesaj
{alert("Valoarea lui r nu este corecta!");
return;}//si iesim fortat (ca in C) cu return
//procedam analog pentru celelalte doua
if(ng!=g.value)
{alert("Valoarea lui g nu este corecta!");return;}
if(nb!=b.value)
{alert("Valoarea lui b nu este corecta!");return;}
//acum verificam sa fie cuprinse intre 0 si 255
if(nr<0||nr>255)
{ alert('Valoarea lui r nu este cuprinsa intre 0 si 255');return;}
if(ng<0||ng>255)
{ alert('Valoarea lui g nu este cuprinsa intre 0 si 255');return;}
if(nb<0||nb>255)
{ alert('Valoarea lui b nu este cuprinsa intre 0 si 255');return;}
//in fine, daca am trecut de aceste filtre, valorile lui r, g si b sunt corecte
// si putem, in fine, stabili culoarea de fundal a celuilalt tabel (caruia i-am dat
//id-ul tabel) la cea pe care o obtinem din combinatia r, g, b introdusa.
tbl=document.getElementById("tabel");
//La fel ca mai sus, getElementById ne intoarce o variabila prin intermediul
//careia putem accesa obiectul cu id-ul respectiv
tbl.style.backgroundColor=rgb(nr,ng,nb);
//apoi, prin intermediul variabilei intoarse, si anume tbl,
//stabilim culoarea de fundal a tabelului. Pentru intoarcerea culorii
//in formatul recunoscut de HTML, adica #RRGGBB apelam functia
//rgb scrisa tot de noi, mai sus
}
</SCRIPT>

<BODY>
Introdu componentele de culoare (numere intre 0 si 255):<BR><BR>
<!--In tabelul de mai jos am folosit 3 input type="text" fara a ne afla intr-un form.
Este posibil si asa ceva, deoarece continutul lor il vom prelua cu ajutorul unui script
JavaScript. In cadrul acelui script ne vom folosi de aceste controale prin intermediul
atributului id pe care l-am stabilit, deci rr, gg si bb-->
<TABLE border="1" cellspacing="0" cellpadding="5">
<TR><TD>Rosu<TD>
<INPUT type="text" id="rr" maxlength="3" size="3">
<TR><TD>Verde<TD>
<INPUT type="text" id="gg" maxlength="3" size="3">
<TR><TD>Albastru<TD>
<INPUT type="text" id="bb" maxlength="3" size="3">
</TABLE><BR>
<!--Mai jos am folosit o componenta de tip BUTTON. Aceastei componente i-am folosit
atributul onclick. Acestui atribut ii specificam practic ce functie JavaScript trebuie
apelata in momentul in care se da click pe buton -->
<BUTTON onclick="coloreaza();">Testeaza</BUTTON>
<BR><BR>
<!--acestui tabel i-am utilizat atributul id, pentru a-l putea mai usor accesa
prin modelul DOM in cadrul codului JavaScript-->
<TABLE width="50%" height="50%" id="tabel" border="1">
<TR><TD align="center" valign="middle">TEST AREA
</TABLE>
</BODY></HTML>

49
 3) În aplica ia urm✁toare, prin intermediul unui control de tip input type=✂text✂ vom
cere utilizatorului s✁ introduc✁ un num✁r x între 4 si 20. Pe baza acestui num✁r (pe care-l valid✁m)
vom genera, într-un element de tipul iframe, un tabel cu x linii ✄i x coloane, în care punem numerele
de la 1 la x2 ✄ i ale c✁rui celule le color✁m alternativ, la fel ca pe o tabl✁ de ✄ ah.
Pe lâng✁ codul surs✁ am pus ✄ i o captur✁ a ferestrei, in urma rul✁rii cu n=7 (apl036.html):
<HTML><HEAD><SCRIPT language="JavaScript">
function genereaza()
{
n=document.getElementById("nn");
nr=parseInt(n.value);
if(nr!=n.value)//verificam daca in n este un numar intreg
{alert('Numarul introdus nu este intreg');return;}
else if(nr<4||nr>20)//verificam si daca este intre 4 si 20
{alert('Numarul trebuie sa fie intre 4 si 20');
return;}
d=document.getElementById("ifr").contentWindow.document;
//obtinem in variabila d referinta DOM catre documentul din iframe
d.open();//deschidem acest document pentru rescriere
d.write('<TABLE border="1" cellspacing="0" cellpadding="5">');
k=0;//si generam, prin script, in cadrul sau, codul HTML
//care creeaza tabelul anuntat
for(i=1;i<=nr;i++)
{
d.write('<TR>');
for(j=1;j<=nr;j++)
{
d.write('<TD align="center" ');
if((i+j)%2)//in functie de paritatea lui i+j
//coloram intr-un fel sau intr-altlul fundalul celulei
d.write('bgcolor="#ffff7f">');
else
d.write('bgcolor="#7fffff">');
++k;
d.write(String(k));
}
}
d.write('</TABLE>');
d.close();
}
</SCRIPT></HEAD><BODY>
Introdu un numar natural cuprins intre 4 si 20:
<!--prin intermediul input type="text" scriem o valoare
care este apoi preluata de JavaScript. Acesta are id-ul
"nn" -->
<INPUT type="text" id="nn" size="2" maxlength="2">
<BR><BR>
<!--prin intermediul metodei "onclick()" a butonului
apelam functia care generaza codul HTML al tabelului
in documentul din iframe-->
<BUTTON onclick="genereaza();">Genereaza tabelul</BUTTON>
<BR><BR>
<IFRAME id="ifr" width="70%" height="500">
</IFRAME><HR></BODY></HTML>

De re inut din aceast✁ ultim✁ parte, c✁ script-urile, de✄ i reprezint✁ o automatizare ✄i

dinamizare foarte important✁ a unei pagini web, nu sunt rulate pe server-ul HTML (de altfel, pân✁
în momentul de fa ✁ am lucrat cu toate fi✄ iere în mod local, ele fiind deschise automat de c✁tre
browser-ul de internet) ci ele sunt rulate de c✁tre browser pe calculatorul clientului care acceseaz✁
pagina ce le con ine.

50