Sunteți pe pagina 1din 174

Proiect cofinanat din Fondul Social European prin Programul Operaional Sectorial Dezvoltarea Resurselor Umane 2007-2013

Investete n oameni!

Formarea profesional a cadrelor didactice


din nvmntul preuniversitar
pentru noi oportuniti de dezvoltare n carier

REALIZAREA
PAGINILOR WEB
Traian C. IONESCU

Ana Magdalena ANGHEL

Adriana OLTEANU

Radu Nicolae PIETRARU

Program de conversie profesional la nivel postuniversitar


pentru cadrele didactice din nvmntul preuniversitar
Specializarea TEHNOLOGIA INFORMAIEI I COMUNICRII
Forma de nvmnt ID - semestrul II

2011

2011

Acest manual a fost elaborat n cadrul


"Proiectului pentru nvmntul Rural", proiect co-finanat de
ctre Banca Mondial, Guvernul Romniei i comunitile locale
i este revizuit n cadrul proiectului "Formarea profesional a
cadrelor didactice din nvmntul preuniversitar pentru noi
oportuniti de dezvoltare n carier", proiect co-finanat din
Fondul Social European.
Nici o parte a acestei lucrri nu poate fi reprodus fr acordul
scris al Ministerului Educaiei, Cercetrii, Tineretului i Sportului.

ISBN 973-0-04103-2

Cuprins

REALIZAREA PAGINILOR WEB


CUPRINS

Unitate
de invatare

Titlu

INTRODUCERE

Pagin
1

INTERNET I WORD WIDE WEB


Obiectivele Unitii de nvare nr.1
1.1 Introducere n Internet
1.2 Arhitectura Word Wide Web
1.3 Editarea i vizualizarea unei pagini WEB
Rspunsuri i comentarii la ntrebrile din testele de autoevaluare
Bibliografie Unitate de nvare nr.1

4
5
5
7
8
11
11

LIMBAJUL HTML
Obiectivele Unitii de nvare nr.2
2.1 Introducere n HTML
2.2 Sintaxa Directivelor HTML
2.3 Structura de baz a unui document HTML
Rspunsuri i comentarii la ntrebrile din testele de autoevaluare
Bibliografie Unitate de nvare nr.2

12
13
13
13
19
22
22

FORMATAREA TEXTELOR IN LIMBAJUL HTML


Obiectivele Unitii de nvare nr.3
3.1 Limbajul HTML si formatarea textelor
3.2 Titluri i paragrafe HTML
3.3 Definirea caracteristicilor fontului
3.4 Formatarea fixic a textelor
3.5 Formatarea logica a textelor
3.6 Preformatarea textului cu ajutorul directivei <PRE>
Lucrare de verificare Unitate de nvare nr.1, 2, i 3
Rspunsuri i comentarii la ntrebrile din testele de autoevaluare
Bibliografie Unitate de nvare nr.3

23
24
24
24
29
32
33
34
35
37
37

LISTE N LIMBAJUL HTML


Obiectivele Unitii de nvare nr.4
4.1 Tipuri de liste n limbajul HTML
4.2 Liste HTML neordonate
4.3 Liste HTML ordonate
4.4 Liste definite
Rspunsuri i comentarii la ntrebrile din testele de autoevaluare
Bibliografie Unitate de nvare nr.4

38
39
39
40
42
44
47
48

Cuprins

HYPERLINKS N LIMBAJUL HTML


Obiectivele Unitii de nvare nr.5
5.1 Hypertext i hyperlink
5.2 URL identificator unic de resurse web
5.3 Realizarea legaturilor n HTML
5.4 Folosirea imaginilor pentru legturi
Rspunsuri i comentarii la ntrebrile din testele de autoevaluare
Bibliografie Unitate de nvare nr.5

49
50
50
51
51
55
57
57

FOLOSIREA IMAGINILOR N LIMBAJUL HTML


Obiectivele Unitii de nvare nr.6
6.1 nelegerea formatelor grafice folosite n WEB
6.2 Folosirea imaginilor n cadrul paginilor WEB
6.3 Imagini cu arii sensibile (Image Maps)
Lucrare de verificare Unitate de nvare nr.4, 5, i 6
Rspunsuri i comentarii la ntrebrile din testele de autoevaluare
Bibliografie Unitate de nvare nr.6

58
59
59
60
65
67
70
71

REALIZAREA TABELELOR
Obiectivele Unitii de nvare nr.7
7.1 Realizarea unui tabel simplu n limbajul HTML
7.2 Definirea proprietatilor globale ale unui tabel HTML
7.3 Definira rndurilor unui tabel
7.4 Definirea celulelor unui tabel
Rspunsuri i comentarii la ntrebrile din testele de autoevaluare
Bibliografie Unitate de nvare nr.7

72
73
73
75
78
79
82
82

FORMULARE N PAGINA WEB


Obiectivele Unitii de nvare nr.8
8.1 Ce sunt formularele?
8.2 Introducerea unui formular n pagina WEB
8.3 Elementele HTML folosite n formulare
8.4 Alte tipuri de elemente folosite n formulare WEB
Rspunsuri i comentarii la ntrebrile din testele de autoevaluare
Bibliografie Unitate de nvare nr.8

83
84
84
86
88
90
93
93

SCRIPT, JAVASCRIPT
Obiectivele Unitii de nvare nr.9
9.1 Ce este JavaScript?
9.2 Inserarea unui JavaScript ntr-un document HTML
9.3 Cum i cnd se execut un script ntr-o pagina WEB
9.4 Atribute de tip Event Handler
Lucrare de verificare Unitate de nvare nr. 7, 8 i 9
Rspunsuri i comentarii la ntrebrile din testele de autoevaluare
Bibliografie Unitate de nvare nr.9

94
95
95
95
97
99
100
102
102

10

EXECUTABILE I MULTIMEDIA N PAGINA WEB


Obiectivele Unitii de nvare nr.10
10.1 Java i Java APPLET
10.2 Obiecte ACTIVE X
10.3 Fiiere multimedia n pagina WEB
10.4 Adugarea clipurilor multimedia la o pagina Web

103
104
104
106
107
108

II

Cuprins

Rspunsuri i comentarii la ntrebrile din testele de autoevaluare


Bibliografie Unitate de nvare nr.10

110
110

11

LIMBAJUL PHP I FOLOSIREA LUI N PAGINA WEB


Obiectivele Unitii de nvare nr.11
11.1 Introducere n limbajul PHP
11.2 Includerea de cod PHP n documente HTML
11.3 Variabile, constante, operatori n limbajul PHP
11.4 Structuri de control i funcii PHP
11.5 Clase i obiecte PHP
Rspunsuri i comentarii la ntrebrile din testele de autoevaluare
Bibliografie Unitate de nvare nr.11

111
112
112
114
116
119
122
125
125

12

CAPACITATEA DE A FOLOSI INFORMAII DIN BAZE DE DATE N


CADRUL PAGINILOR WEB
Obiectivele Unitii de nvare nr.12
12.1 Sisteme de baze de date
12.2 Tehnologii de acces la baze de date
12.3 Introducere n SQL
12.4 4 Folosirea PHP pentru accesul la baze de date din cadrul
paginilor Web
12.5 Limbaje de script pe partea de client
Rspunsuri i comentarii la ntrebrile din testele de autoevaluare
Bibliografie Unitate de nvare nr.12

126

138
140
140

13

XML I FOLOSIREA LUI N PAGINA WEB


Obiectivele Unitii de nvare nr.13
13.1 Introducere n XML
13.2 Caracteristici ale XML
13.3 Sintaxa XML
13.4 Modul de folosie a XML n pagina Web
Rspunsuri i comentarii la ntrebrile din testele de autoevaluare
Bibliografie Unitate de nvare nr.13

141
142
142
143
144
146
149
149

14

FOI DE STIL
Obiectivele Unitii de nvare nr.14
14.1 Foi de stil n HTML-CSS
14.2 Cum funcioneaz stilurile n HTML
14.3 Adugarea foilor de stil n documentele HTML
14.4 Proprieti CSS
Lucrare de verificare Unitate de nvare nr. 10, 11, 12, 13 i 14
Rspunsuri i comentarii la ntrebrile din testele de autoevaluare
Bibliografie Unitate de nvare nr.14

150
151
151
152
153
156
157
159
159

BIBLIOGRAFIE

160

ANEXA 1 Lucrri de laborator

161

127
127
128
129
134

III

Cuprins

IV

Introducere

REALIZAREA PAGINILOR WEB


INTRODUCERE
Stimate cursant,
nc de la nceput doresc s i urez bun venit la studiul modulului,
destinat deprinderii utilizrii unor unelte pentru realizarea paginilor
WEB. Acest modul se adreseaz n principal personalului didactic din
aria nvmntului obligatoriu, ce activeaz n mediul rural n
vederea obinerii calificrii necesare prin intermediul Programului de
Educaie la Distan. Sper c acest modul va fi util personalului
didactic care dispune de cunotine despre universul calculatoarelor
ct i oricrei persoane interesate n dobndirea de cunotine
specifice de introducere in acest domeniu.
Exist totui anumite cunotine specifice necesare parcurgerii
acestui modul:
Cunoaterea modalitii de organizare i manipulare a
informaiei n format electronic (sistem de fiiere, directoare,
copierea, mutarea i deschiderea de fiiere electronice).
Operaii de baz utiliznd sistemul de operare Microsoft
Windows (pornirea unei sesiuni de lucru, deschiderea unei
aplicaii, comutarea ntre mai multe aplicaii ce ruleaz
simultan, nchiderea n mod corespunztor a sistemului),
Obiectivele modulului:
Dup studiul acestui modul vei fi suficient de pregtit pentru a fi
capabil s:
Descriei arhitectura World Wide Web
Descriei structura de baz a unui document HTML
Explicai sintaxa directivelor HTML
Descriei modul de specificare a culorilor pentru elementele
HTML
Definii titluri i paragrafe n cadrul unui document HTML
Modificai tipurile de caractere, mrimea sau culoarea
acestora ntr-un document HTML
Creai liste ordonate, neordonate i imbricate cu ajutorul
directivelor HTML specializate
Creai hyperlink-uri n documente HTML
Folosii imagini ca hyperlink-uri
Adaugai imagini la o pagin HTML
Specificai modul de aliniere al imaginii n pagin i al textului
din jurul ei ; dimensiunea imaginii
Creai un tabel HTML si s modificai proprietile acestuia
Creai i s adaugai elemente la un formular
Ce este un script pe partea de client
Folosii un scrip ntr-o pagin WEB
Folosii un applet Java ntr-o pagin WEB
Folosii un obiect Active X ntr- pagin WEB
1

Introducere

Folosii fiierele multimedia ntr-o pagin Web


Folosii limbajul PHP pentru a realiza pagini Web dinamice
Folosii limbajul PHP pentru a utiliza informaii dintr-o baz de
date
Folosii un document XML ntr-o pagin HTML
Folosii sintaxa pentru definirea unei foi de stil

Prezentul modul este n format tiprit fiind conceput pentru educaia


prin coresponden. Modulul este de lungime medie: 14 ore pentru SI
(studiu individual), 7 ore pentru AT (activiti tutoriale), 7 ore pentru
TC (teme de cas) i 28 de ore pentru AA (activiti asistate).
Activitile tutoriale au ca scop stabilirea unui dialog ntre cursant i
tutore n vederea discutrii rezultatelor obinute n urma evalurii
temelor de cas i nu n ultimul rnd pentru lmurirea eventualelor
neclariti sau probleme ntlnite de cursant. Temele de cas
constau n rezolvarea lucrrilor de verificare care vor fi trimise
tutorelui. Cele 28 ore alocate activitilor asistate vor fi destinate
efecturii celor apte lucrri de laborator prezente n Anexa 1. Timpul
de nvare poate varia n funcie de cunotinele anterioare ale
cursantului despre realizarea paginilor WEB i de cantitatea de
munc dedicat subiectului n studiu, pe care cursantul este dispus
s o aloce.
Manualul de fa este organizat n 14 uniti de nvare, fiecare
dintre aceste uniti coninnd o parte de prezentare teoretic a
subiectului tratat, o parte de exerciii i rezolvrile acestora. Cele 14
uniti de nvare si propun s te nvee ce este i cum poti sa
construieti o pagin WEB. Prima unitate face o introducere n
Internet, World Wide Web, i prezint paii i uneltele necesare
pentru realizarea primei tale pagini de WEB. ncepnd cu unitatea de
nvare 2 pn la unitatea de nvare 8 manualul te va ghida pas cu
pas n tainele limbajului HTML. n unitatea de nvare 9 i 10 sunt
prezentate tehnologii folosite n World Wide Web pentru a realiza o
pagin capabil s interacioneze cu utilizatorul. Unitile de nvare
11 i 12 v vor familiariza cu limbajul PHP i cu utilizarea bazelor de
date utiliznd acest limbaj. La finalul manualului n unitile de
nvare 13 i 14 vom studia tehnici avansate pentru structurarea
ntr-un mod ct mai eficient i mai flexibil a informaiilor ce trebuiesc
prezentate n pagina Web.
Instruciuni de transmitere a lucrrilor de verificare:
Modulul Realizarea paginilor WEB conine patru lucrri de verificare
(LV). Fiecare LV va fi transmis spre corectare tutorelui, la care ai
fost alocat, ntr-un fiier separat, astfel inct s intre n posesia
acesteia nainte sau cel trziu la data specificat de calendarul
modului. Prima LV trebuie predat dup ce ncheiai studiul Unitii
de nvare nr. 3, a doua dup ncheierea studiului Unittii de
nvare nr. 6; a treia dup ncheierea studiului Unittii de nvare nr.
9; iar ultima, la sfritul modului.

Introducere

Instructiuni de ntocmire a lucrrilor de verificare:


LV-urile sunt o component important a modulului, care ngduie o
corect evaluare a experienei pe care o cptai studiind modulul i
a capacitii dvs. de a-i aplica ideile n practic. Rezolvarea
problemelor propuse din lucrrile de verificare este asemnatoare cu
cea din exemplele din cadrul unitii de nvare respective. Ceea ce
trebuie s facei este s prezentai ct mai concis ideile cele mai
importante, ncercnd s nu depii limita de 3000 de cuvinte.
Suma maxim a punctelor care vi se acord pentru tratarea
subiectelor unei lucrri de verificare este 25.
Criteriile de evaluare si ponderile evalurii continuie i final:
Notele pe care le vei obine la sfritul acestui modul se calculeaz
n funcie de nota pe care o vei primi la examen i de media obinut
la LV-uri (evaluare pe parcurs). Cele dou componente particip la
nota final cu ponderi de 60% (pentru LV), respectiv 40% (pentru
evaluarea final realizat prin examen). In notarea evalurii pe
parcurs, notele celor patru LV-uri intr cu ponderi egale. De aceea,
v recomand insistent s predai toate cele patru LV-uri, deoarece
pentru o lucrare pe care nu o realizai vei primi nota 0.
Testele de autoevaluare (TA) reprezint o form de autoevaluare a
cursantului i face parte din tehnologia ID de parcurgere a
materialului de studiu. Testele de autoevaluare sunt incluse n
manual pentru a te ajuta s i testezi cunotinele i felul n care ai
neles materialul deja parcurs dintr-o unitate de nvare. TA sunt
concepute astfel nct s nu i consume mai mult de cteva minute.
Rspunsurile la testele de autoevaluare se vor completa n spaiile
libere din chenar, acestea ncadrndu-se strict n spaiul rezervat.
La nceputul fiecrei Unitii de nvare vor fi detaliate obiectivele
propuse, aceast seciune fiind indicat de imaginea alturat ( o
sgeat). Modulul nu integreaz alte materiale suplimentare de
studiu individual, dar recomanda la finalul fiecrei Unitii de nvare
un decupaj minimal din bibliografia manualului, decupaj necesar
pentru aprofundarea i inelegerea complet a noiunilor expuse pe
durata Unitii de nvare.
Pe tot parcursul prezentrilor teoretice, importana anumitor
paragrafe va fi semnalizat in partea stang a textului prin imaginea
unei goarne.
Paragrafele care conin testele de autoevaluare vor fi semnalizate
prin folosirea imaginii unei pene i vor fi incadrate ntr-un chenar.
n cazul n care nu vei reui s rezolvai problemele propuse trebuie
recitite zonele de text care apar nainte de lucrarea de verificare. n
sperana c nu vor exista probleme v urm:
Spor la treab!

Internet i World Wide Web

Unitatea de nvare Nr. 1


INTERNET I WORLD WIDE WEB

Obiectivele Unitii de nvare Nr.1

1.1 Introducere n Internet

1.2 Arhitectura World Wide Web

1.3 Editarea i vizualizarea unei paginii WEB

Rspunsuri i comentarii la ntrebrile din testele de evaluare

11

Bibliografie

11

Internet i World Wide Web

Obiectivele Unitii de nvare Nr. 1:

Principalele obiective ale Unitii de nvare 1 sunt:

nsuirea unor noiuni de baz din domeniul reelelor


de calculatoare
nsuirea unor noiuni de baz din domeniul Internet
Descrierea arhitecturii World Wide Web
nsuirea pailor necesari ntr-un ciclu de crearevizualizare rezultat, pentru o pagin Web

1.1 Introducere n Internet


nainte de a putea nelege ce nseamn i cum funcioneaz World
Wide Web, va trebui s clarificm anumite noiuni, definiii, tehnologii
pe care se bazeaz.
Ce este o reea O Reea de calculatoare este o colecie de calculatoare (zeci sau
sute) interconectate ntre ele prin cabluri speciale cu scopul de a
de
calculatoare? putea interschimba sau folosi n comun anumite resurse (fiiere,
imprimante, etc).
Pentru a comunica ntre ele calculatoarele folosesc un set de reguli
care definesc noiunea de protocol de comunicaie.
Ce este
Internetul?

Reelele de calculatoare locale pot fi la rndul lor interconectate ,


formnd reele globale de calculatoare, adic inter-reele. Cea mai
mare inter-reea cu access public este reeaua Internet.
Definiia de mai sus este foarte general i mai necesit cteva
completri:

Care sunt
serviciile
Internet?

Internetul este un mijloc de comunicare este un mediu foarte


eficient de expunere a ideilor unei audiene foarte mari.
Internetul este o resurs de informare este un imens depozit
de informaii. Oricnd ai nevoie de o informaie legat de orice
domeniu vei putea gsi undeva publicat pe Internet o lucrare
care s te ajute.
Internetul este o comunitate face posibil i foarte eficient
comunicarea ntre oameni cu aceleai preocupr.

Pentru toate facilitile enumerate mai sus Internetul ofer mai multe
metode de access servicii Internet :

World Wide Web serviciul ce perminte accesul la informaia


stocat pe un calculator aflat oriunde n lume,
5

Internet i World Wide Web

TCP/IP
protocolul
folosit n
Internet

Ce este o
adres IP?

E-Mail este un serviciu de mesagerie electronic. Permite


schimbul de mesaje ntre utilizatorii Internet,
FTP este prescurtarea de la File Transfer Protocol care
nseamn n limba romn protocol pentru transferul fiierelor,
Telnet serviciul ce permite accesul la resursele altui
calculator din Internet.

Protocolul de comunicaie folosit n Internet pentru oricare din


serviciile de mai sus este TCP/IP (i pentru altele). Acesta definete:
modul n care calculatoarele ar trebui s fie conectate n
Internet,
modul n care se stabilete o legtur de la un calculator la
altul din Internet,
modul n care sunt transmise date ntre calculatoarele din
Internet.
Pentru a se putea conecta i a fi identificat n reea un calculator
trebuie s aib o adres de reea unic n Internet aceast adres se
numete adresa IP. O adres de IP este format din 4 numere
cuprinse ntre 0 i 255 separate prin caracterul ..
66.249.85.99 este un exemplu de adres IP
Deoareace acest format de adrese este greu de reinut de ctre om
exist posbilitatea asocierii unei forme mai prietenoase de adresare
fiecrei adrese IP. Aceast form de adresare poart denumirea de
Nume de Domeniu.
De exemplu pentru adresa IP de mai sus este asociat urmtorul
nume de domeniu:
www.google.com
Test de autoevaluare
1.1 Ce este un protocol de comunicaie?

1.2 Cum este identificat un calculator n Internet?

Rspunsurile corecte i comentarii asupra acestora se gsesc la pagina 11.

Internet i World Wide Web

1.2 Arhitectura World Wide Web


Ce este World
Wide Web?

World Wide Web sau pe scurt Web este un sistem de calculatoare n


Internet care poate efectua schimb de fiiere ntr-un anumit format,
denumit HTML care suport existena de legturi ctre alte
documente sau ctre fiiere grafice sau audio.

Acest schimb de fiiere se face folosind tehnologia client-server care


Din ce este
presupune existena urmtoarelor entitti:
format Web-ul?

Pagini Web Fiiere cu un anumit format ce permite


organizarea asociativ a informaiilor HTML,
Web Site Este o mulime organizat de pagini Web
Server Un calculator contectat la Internet pe care sunt
stocate paginile Web i pe care ruleaz un program - Web
server - care poate servi aceste pagini Web la cerere unui alt
calculator din Internet,
Client - Un calculator conectat la Internet pe care ruleaz un
program - Web Browser - ce permite comunicaia cu HTTP
server la care face cerere pentru a primii o resurs Web
specificat de un URL introdus de utilizator pe care este apoi
capabil s il interpreteze i s l afieze.
URL - Fiecare pagin sau resurs WEB are asociat o adres
unic n Internet cunoscut sub acronimul de URL (Uniform
Resource Locator).

Client
1.
Introduce

Utilizator
4.
Vizualizeaz

Web
Browser

3. Trimite
WEB

2. Trimite cerere
Internet
Web Site
{Fiiere HTML,
Imagini
Fiiere multimedia}

Figura 1.1 Arhitectura World Wide Web


Sensul de
circulaie al
datelor n Web

n Figura 1.1 este prezentat locul fiecrei entiti descrise mai sus
ca fiind parte din World Wide Web, i de asemenea ordinea etapelor
pentru accesul la resursele Web:
1. Utilizatorul introduce URL-ul care identific resursa Web
dorit n browserul care ruleaz pe calculatorul client,
7

Internet i World Wide Web

2. Clientul conectat la Internet formuleaz o cerere de resurs


ctre Web-Serverul identificat de URL,
3. Web Serverul primete, analizeaz cererea i ntoarce ca
rspuns la client resursa cerut dac aceasta exist. In caz
contrar ntoarce un rspuns ce conine un mesaj de eroare.
4. Web Browserul de pe calculatorul client primete rspunsul
de la Web-server i l afieaz.
Test de autoevaluare
1.3 Un Web Browser poate rula pe acelai calculator cu un Web
Server?

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 11.

1.3 Editarea i vizualizarea unei paginii WEB


Un document HTML implementeaz o pagin Web. Documentele
HTML sunt simple fiiere text ceea ce permite ca editarea lor s fie
posibil prin folosirea oricrui editor de texte.
Cum editez o
pagin Web?

n prezent exist o serie de editoare specializate pentru editarea


paginilor HTML. Acestea permit realizarea de documente HTML
rapid i uor doar prin apsarea a ctorva butoane fr ca utilizatorul
s aib cunotine de HTML. Aceast facilitate este foarte bun
pentru utilizatorii nceptori, ns este foarte important cunoaterea
temeinic i nelegerea limbajului. deoarece dezavantajul principal al
acestor unelte este c genereaz adesea cod redundant i uneori
chiar incorect. n aceste cazuri fiind necesar intervenia direct in
codul generat pentru a corecta aceste neajunsuri.
Exemple de astfel de editoare: Microsoft FrontPage, Macromedia
DreamWaver, Eclipse, Bluefish etc.
n acest modul se va folosi editorul de text standard care este livrat
cu sistemul de operare Windows: Notepad. Acesta precum banuieti
nu are nici o facilitate special pentru HTML ci este un simplu editor
de text.
Dac nu foloseti sistemul de operare Windows poi folosi n mod
asemntor orice editor de text disponibil pe sistemul tu:
1. Pentru a porni programul Notepad pe un sistem Windows XP:

Click pe butonul Start din colul stnga jos al ecranului


Click pe meniul All Programs -> Accessories
Localizai iconia NotePad din acest meniu i facei click pe ea

Internet i World Wide Web

2. Odat ce ai pornit aplicaia poi ncepe s scrii documentul HTML.


ncearc s-l scrii pe cel de mai jos:
<HTML>
<HEAD>
<TITLE>Prima mea pagina</TITLE>
</HEAD>
<BODY>
<H1>Prima mea pagina Web</H1>
Curand am sa devin un
<STRONG>expert</STRONG> HTML
<P>
Pagina realizata de:
<CITE>numele tau aici</CITE>
</BODY>
</HTML>
3. n momentul n care documentul este complet i doreti s-ti
salvezi munca urmtoarele operaii sunt necesare:

Localizeaz n fereastra programului NotePad meniul File


De aici selecteaz opiunea Save As
n fereastra dialog care se deschide introdu numele sub care
vrei s salvezi fiierul urmat de extensia .htm sau .html. Spre
exemplu alege numele primapagin.html.

Atenie este important s specifici extensia deoarece altfel programul


NotePad va aduga automat extensia .txt la numele fiierului.
Cum vizualizez 4. Pentru a vizualiza fiierul .html proaspt creat de tine ntr-un
browser, urmtoarele operaii sunt necesare:
pagina Web
creat de mine?
Pornete programul Microsoft Internet Explorer
n meniul File localizeaz opiunea Open
Click pe aceast opiune i se va deschide urmtorul dialog:

Click pe butonul Browse i navigheaz pn n folderul n


care ai salvat fiierul primapagina.html, selecteazl i. apas
butonul Open

Felicitri! Ai creat prima pagin HTML. Rezultatul ar trebui s fie


asemntor cu imaginea de mai jos :
9

Internet i World Wide Web

Figura 1.2 Primul meu document HTML


Dac rezultatul nu este asemntor cu cel din figura de mai sus
nseamn c nu ai introdus corect codul HTML sau unul dintre pai
nu au fost executat corect.
Mai ncearc odat!

10

Internet i World Wide Web

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 1.1.
Un protocol de comunicaie este un set de reguli folosite de
calculatoarele ntr-o reea ca s comunice ntre ele. A se revedea
seciunea 1.1.

ntrebarea 1.2.
Un calculator este identificat n internet cu ajutorul unei adrese de IP
unic n Internet. Adresele de IP au form numeric i sunt greu de
reinut de ctre oameni. Din acest motiv o adres IP poate avea
asociat un nume de domeniu cu ajutorul cruia se poate identifica de
asemenea un calculator n Internet. A se revedea seciunea 1.1.

ntrebarea 1.3.
Binenteles c da! Nu este cea mai des ntlnit situaie ns este
posibil. A se revedea seciunea 1.2.

Bibliografie
1. Dave Taylor - Crearea paginilor WEB, Editura Teora 1999,
pg.21-40
2. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i
XML, Editura Printech Bucureti 2004, pg.1-7
3. Sabin Buraga Proiectarea siturilor Web. Design i
funcionalitate, Ediia a II-a, Editura Polirom 2002, pg. 13-22

11

Limbajul HTML

Unitatea de nvare Nr. 2


LIMBAJUL HTML

Obiectivele Unitii de nvare Nr. 2

13

2.1 Introducere n HTML

13

2.2 Sintaxa Directivelor HTML

13

2.3 Structura de baz a unui document HTML

19

Rspunsuri i comentarii la ntrebrile din testele de evaluare

22

Bibliografie

22

12

Limbajul HTML

Obiectivele Unitii de nvare Nr. 2:

Principalele obiective ale Unitii de nvare nr. 2 sunt:

Definirea noiunii HTML


Descrierea structurii de baz a unui document
Explicarea sintaxei directivelor HTML
Descrierea modului de specificare a culorilor pentru
elementele HTML

2.1 Introducere n HTML

Definitie

Definitie

HTML este limbajul folosit pentru a structura informaia n


documentele World Wide Web. Numele su reprezint iniialele
urmtoarelor cuvinte in limba englez: HyperText Markup
Language.
Limbajul HTML este compus din instruciuni de afiare, care vor fi
folosite de ctre browser pentru a determina cum anume s afieze
informaia util din document. Aceste instruciuni de afiare poat
denumirea de directive HTML sau, tags n limba englez.
Un element este o component fundamental din strucutra unui
document. O pereche de directive delimiteaz un element HTML, iar
informaia cuprins ntre directiva de nceput i cea de sfrit
delimiteaz coninutul elementului. Un element poate conine text
simplu sau alte elemente.

2.2 Sintaxa Directivelor HTML


n cazult documentelor HTML mai mult de jumtate din textul surs
nu este afiat de ctre browser. Mai precis ceea ce lipsete este
textul cuprins nuntrul caracterelor pereche < i >, aceasta
datorit faptului c n limbajul HTML ceea ce este cuprins ntre
aceste caractere sunt interpretate ca fiind directive HTML (tags).
O directiv HTML const dintr-un nume care, opional, este urmat de
o list de atribute ale directivei HTML, toate acestea fiind plasate
ntre perechea de caractere < i >. Atributele unei directive HTML
pot lua diferite valori i permit autorului documentului s-i modifice
comportamentul. Iat un exemplu:
Dac directivei <BODY> i se adaug atributul BGCOLOR cu o
valoare dorit atunci browserul va afia pagina respectiv pe un
fundal de culoarea specificat de valoarea atributului. Pentru a afia
pagina pe fond rou vom scrie:
<BODY BGCOLOR=red>
13

Limbajul HTML

De obicei numele directivei este intuitiv fiind reprezentat de un cuvnt


sugestiv pentru funcia pe care o are.
Directive
HTML
pereche

Directivele HTML apar de regul n perechi, de exemplu <html>


</html> sau <body></body>, prima directiv fiind de ncept iar cea
de-a doua de sfarit. Un text aflat ntre aceste directive va respecta
funcionalitatea directivei respective.

<B>Text afiat cu caractere Bold</B>


Directiva
de nceput

Directiva
de sfrit

Figura 2.1 Mod de folosire al directivelor HTML pereche.


Exemplu de mai sus prezint modul n care se pot folosi directivele
HTML pentru afiarea textului cu caractere de tip Bold.
O directiv de sfrit are acelai nume cu directiva corespunztoare
de nceput, dar este precedat de caracterul /. Tagurile de sfrit
nu conin niciodat atribute.
Directive
HTML far
pereche

Atributele

O parte din directivele HTML nu au directive pereche de sfrit.


Acestea poart denumirea de stand-alone. Un exemplu de directiv
stand-alone este <img>. Aceasta face ca browserul s plaseze o
imagine (specificat de valoarea atributelor directivei) n pagin.
Atributele sunt adugate directivelor HTML pentru a extinde sau
pentru a modifica comportamentul acestora. Atributele apar
ntotdeauna n perechi de forma nume/valoare. Poi aduga mai
multe atribute la acelai tag, separnd fiecare tag printr-unul sau mai
multe spaii. Ordinea de apariie nu este relevant. Valorile atributelor
au lungimea limitat la 1024 caractere.
<IMG SRC=images/smile.gif ALT=vesel>

Nume
Atribut

Valoare
Atribut

Valoarea unui atribut trebuie scris de regul ntre caracterele i


, iar n cazurile speciale n care nsui valoarea atributului conine
14

Limbajul HTML

caracterul ghilimele se folosesc apostroafe, ca n exemplu de mai


jos:
<MAP NAME=nume cu caracterul >
Dac valoarea este un singur numr sau cuvnt i conine numai
litere (a-z) sau cifre (0-9) sau caracterele . i -, nu este obligatorie
ncadrarea ntre ghilimele sau apostroafe a valoarii atributului, ea
putnd fi plasat imediat dup semnul =.
Totui atunci cnd nu eti sigur c regula de mai sus este respectat
este o idee bun folosirea ncadrrii ntre ghilimele a valorii
atributelor.
Mai jos sunt prezentate cteva exemple de directive care conin
atribute. Fii atent la faptul c prima directiv conine att atribute a
cror valoare este ncadrat de ghilimele ct i atribute care nu
necesit aceast ncadrare:
<IMG SRC="img/myimg.gif" ALIGN=right WIDTH=45
HEIGHT=60>
<BODY BGCOLOR="#000000">
<FONT FACE="Arial, Helvetica" SIZE=4>
n afar de textele care conin caractere obinuite, HTML ofer
posibilitatea de a insera i afia caractere care n mod normal nu ar
putea fi incluse n document sau care au un scop predefinit n
limbajul HTML cum ar fi, spre exemplu, caracterul < care este
folosit n limbajul HTML pentru a semnala nceputul unei directive.
Test de autoevaluare
2.1 Ce este un element HTML?

2.2 Ce este o directiv HTML?

2.3 Ce rol au atributele unui element?

Rspunsurile corecte i comentarii asupra acestora se gsesc la pagina 22.

15

Limbajul HTML

Caractere
speciale

n limbajul HTML, caracterul ampersand (&) instruiete browserul


s insereze un caracter special n funcie de codul sau identificatorul
ce l urmeaz. O astfel de construcie poart denumirea de
character entities i este format din trei pri:

Caracterul ampersand &


Un nume predefinit al caracterului sau semnul # urmat de
codul caracterului
Caracterul ; (punct i virgul)

Spre exemplu pentru a afia caracterul < se va scrie n text


urmtoarea construcie: &lt;. Similar &gt; introduce caracterul > iar
&amp; introduce caracterul ampersand.
Numele predefinite pentru caracterele speciale trebuiesc ntotdeauna
scrise cu litere mici.
Se pot de asemenea introduce caractere speciale pentru care nu
exist identificatori predefinii, folosindu-se semnul # urmat de codul
ASCII al caracterului. Spre exemplu urmtoarea construcia &#60;
are acelai efect ca &lt; , adic introducerea caracterlui <.
Specificarea
culorilor n
HTML

Culoarea anumitor elemente din cadrul documentului HTML se poate


specifica folosindu-se anumite directive HTML sau atribute ale
acestora. Exist 2 metode de specificare a culorilor n cadrul
paginilor WEB:
prin valorea codului RGB
folosind numele culorii
Cel mai adesea folosit i mai flexibil modalitate este folosirea
codului RGB. Fiecare culoare RGB conine 3 valori corespunztoare
concentraiei fiecrei componente rou (RED), verde (GREEN) sau
albastru (BLUE) din cadrul culorii alese. Aceste valori se ncadreaz
ntre 0 si 255. Specificarea concentraiei maxime (R=255, G=255,
B=255) n fiecare component rezult n culoarea alb, iar
specificarea valorii 0 pentru toate componentele rezult n culoarea
neagr.
Majoritatea utilitarelor de grafic au dialog care permite n mod grafic
alegerea culorii dorite furniznd pentru aceasta codul RGB
corespunztor. n figura de mai jos este prezentat un astfel de dialog:

16

Limbajul HTML

Se observ n imaginea de mai sus c n funcie de culoarea aleas


se genereaz concentraia corespunztoare fiecrei componente de
culori n cazul nostru (R=237, G=15, B=99).
Odat identificate aceste concentraii pentru culoarea dorit vor
trebui transformate n valori hexazecimale echivalente pentru a le
putea folosi ca valoare pentru un atribut n cadrul unei directive
HTML. Aceasta este sintaxa:

#RRGGBB
Cu ajutorul acestor valori se poate specifica orice culoare din spaiu
de culori true color.
Cea de-a doua metod este a identifica culorile dup nume. Exist
un set de 140 de culori predefinite.
Comentarii
HTML

Cometariile sunt folosite n cadrul unui document HTML pentru a


documenta codul HTML scris in pagina respectiv. Comentariile nu
sunt afiate de ctre browser. n procesul de creare sau de
mentenan a paginilor de Web aceste comentarii se pot dovedii
foarte utile oferind persoanei care creaz sau modific pagina
informaii suplimentare despre ce anume s-a dorit a fi realizat n acea
pagin i eventual informaii suplimentare despre modul n care se
realizeaz acel obiectiv.
Pentru a definii un comentariu HTML se folosete o directiv special
cu urmtoarea sintax:
<!--Textul comentariului -->
sau
<!--Textul comentariului
pe mai multe randuri -->

Imbricarea
directivelor
HTML

Trebuie s existe obligatoriu un spaiu dup <!-- i un spaiu


nainte de --> , n rest se poate folosi aproape orice caracter sau
combinaie de caractere n interiorul cometariului fr a influena
modul n care pagina va fi afiat de ctre browser.
O directiv HTML pote fi folosit n interiorul unei alte directive
HTML cu scopul de a putea aplica efectul ambelor directive asupra
unui anumit element. Spre exemplu dac se dorete ca un anumit
cuvnt din text s fie i n format italic i bold n acelai timp pentru
a-l scoate n eviden se folosete aceast metod de imbricare a
directivelor dup cum este artat n exemplul de mai jos:

Numele meu este: <B><I>Ana</I><B>.

17

Limbajul HTML

Va avea ca rezultat:
Numele meu este: Ana
Totui aceast imbricare trebuie facut avnd mereu grj ca ordinea
de nchidere a tagurilor s fie invers cu ordinea de deschidere
ultimul tag deschis s fie primul inchis.

Informaii
ignorate de
browser

Exist anumite informaii, caractere sau chiar directive pe care


browserele nu le afieaz. Acestea sunt:

Sfaitul de linie (CR/LF)


Caracterele de sfrit de linie folosite n interiorul
documentului HTML sunt ignorate i browserul va organiza
textul in funcie de dimensiunea ferestrei. Trecerea la linie
nou se va face explicit prin folosirea directivelor <P> sau
<BR>
Taburile sau spaiile multiple
Dac browserul ntlnete un caracter Tab sau mai multe
caractere spaiu liber consecutive l va afia ca un singur
caracter spaiu liber. Pentru a introduce spaii suplimentare se
poate folosi caracterul special: &nbsp;.
Spre exemplu:
Text,
cu
multe
Va fi afiat ca:
Text, cu multe spatii

18

spatii

Directivele <p> care apar de mai multe ori.


Dac directiva <P> este folosit de mai multe ori consecutiv
fr coninut, browserul va interpreta aceast construcie ca
un singur paragraf i l va afia ca atare.
Comentariile
Browserele nu vor afia textul cuprins ntre caracterele <!-- i ->
Directivele necunoscute
Browserele ignor directivele pe care nu le suport sau pe
cele incorect specificate. n funcie de tipul browserului
comportamentul n cazul acestor directive este fie de a nu
afia nimic cnd sunt ntlnite, fie de a afia coninutul
directivei ca simplu text.

Limbajul HTML

Test de autoevaluare
2.4 Ce sunt caracterele speciale i cum pot fi acestea folosite in
cadrul unui document HTML?

2.5 Identificai care din codurile de mai jos reprezint codul RGB
care specific culoarea roie :
a>
b>
c>
d>

(255, 0, 0) sau #FF0000


(0, 0, 0) sa #000000
(0, 255, 0) sau #00FF00
(255, 255, 0) sau #FFFF00

Rspunsurile corecte i comentarii asupra acestora se gsesc la pagina 22.

2.3 Structura de baz a unui document HTML


Documentele realizate cu ajutorul limbajului HTML au extensia htm
sau html i sunt simple fiiere de tip ASCII (text). Un document
HTML conine text util (coninutul efectiv al paginii) i directive HTML
care sunt folosite pentru a defini structura, modul de afiare i
comportamentul coninutului.
Structura
unui
document
HTML

Fiecare document HTML ncepe cu directiva <HTML> care specific


browserului faptul c informaia care urmeaz n fiier este n format
HTML. Ultima directiv este </HTML> i marcheaz sfaritul
documentului HTML.
Dup aceast prim directiv urmeaz un bloc marcat de directivele
<HEAD> i </HEAD> care reprezint antetul documentului,
informaiile din cadrul acestui bloc nefiind afiate de ctre browser.
Urmtoarea seciune, marcat de directivele <BODY> i </body>,
conine informaia afiat de ctre browser. Aceast seciune include
informaia util, i directive HTML care specific browserului modul n
care acesta o va afia. Directivele HTML pot de asemenea s fac
referire la diverse fiiere externe cum ar fi fiiere de imagine sau alte
documente HTML.
Structura de baz unui document HTML este urmtoarea:

19

Limbajul HTML

<HTML>
<HEAD>
Informaii generale despre documentul HTML
</HEAD>
<BODY>
Corpul principal al paginii
</BODY>
</HTML>
Directiva
HEAD

Antetul unui document HTML conine informaii generale despre


coninutul i strucura documentului. Directiva <HEAD> nu conine
atribute ci servete drept cadru pentru alte directive: <BASE>,
<ISINDEX>, <LINK>, <META>, <NEXTID>, <OBJECT>, <SCRIPT>,
<STYLE> i <TITLE>. Le vom descrie pe scurt pe cele mai des
folosite.
Directiva <TITLE> - reprezit titlul documentului. Textul definit n
interiorul ei va aprea ca titlu pentru fereastra de browser care
afieaz pagina i de asemenea va fi folosit atunci cnd pagina este
adaugat la n meniul Favorites sau Bookmarks. De asemenea
acest text va fi folosit de ctre motoarele de cutare atunci cnd i
adaug pagina n baza de date. Pentru toate aceste motive este
important ca acest text s fie ct mai sugestiv.
Directiva <BASE> - stabilete calea de baz pe care serverul de
WEB o va folosi pentru toate legturile definite n interiorul
documentului. Despre aceasta i despre legturi vom vorbi n
unitatea de nvare 5
Directiva <SCRIPT> - conine cod Java Script sau VB Script despre
care vom vorbi n unitate de nvare 9 (
Directiva <STYLE> - conine informaii despre stilurile folosite de
ctre tabela de stiluri (CSS) despre care vom vorbi n unitate de
nvare 12.

Directiva
BODY

Corpul documentului HTML este definit de ctre directiva pereche


<BODY></BODY>. Coninutul lui poate fi un singur paragraf, o
imagine sau o combinaie complex de imagini, tabele, obiecte
multimedia, text.
Elementul BODY are un rol foarte important n ceea ce privete
imaginea de ansamblu a pagini HTML, deoarece permite definirea
unor parametrii globali cum ar fi: culoarea sau imaginea de fundal a
paginii sau culoarea textului i a legaturilor din pagin. Aceti
parametrii globali se definesc cu ajutorul atributelor directivei
<BODY>.
Atributul BGCOLOR permite stabilirea culorii de fundal a paginii. n
exemplul de mai jos se definete culoarea albastru ca fundal:
<BODY BGCOLOR=blue></BODY>

20

Limbajul HTML

Atributul TEXT este folosit pentru a definii culoarea textului normal


din cadrul documentului. Culoare implicit a textului este negru. n
exemplul de mai jos este setat culoarea de fundal alb i culoarea
textului rou.
<BODY BGCOLOR=#FFFFFF TEXT=#FF0000>
La alegerea culorii textului trebuie avut n vedere ca acesta s poat
fi distins uor de fundal.
Atributele LINK, ALINK, VLINK permit controlul culorii legturilor n
funcie de starea acestora dup cum este descris mai jos:

LINK stabilete culoarea cu care vor fi afiate iniial


legturile i implicit este Albastru
VLINK stabilete culoarea cu care vor fi afiate legaturile
care au mai fost vizitate implicit este Purpuriu
ALINK stabilete culoarea cu care este afiat legtura deja
vizitat.

n exemplul de mai jos se va stabili urmtoarea schem de culori


pentr pagin: culoarea de fundal alb, culoarea textului va fi rou,
culoarea legturilor albastru, culoarea legturilor vizitate va fi
magenta, iar a legturilor active va fi verde
<BODY

BGCOLOR=#FFFFFF TEXT=#FF0000
LINK=#0000FF VLINK=#FF00FF
ALINK=#00FF00>

</BODY>
Atributul BACKGROUND cu ajutorul acestui atribut al elementului
BODY se poate seta ca fundal pentru documentul HTML o imagine.
Imaginea specificat ca valoare a atributului trebuie s fie n format
.gif sau .jpg, i va fi poziionat astfel nct s acopere ntreaga arie a
paginii. Dac o singur imagine nu este destul de mare pentru a
satisface aceast condiie atunci aceasta va fi replicat i spaiul
rmas neocupat va fi umplut la dreapta i n jos cu aceste replici
pn cnd fereastra browserului este complet ocupat de imagine.
<BODY

BGCOLOR=#FFFFFF
BACKGROUND=logo.jpg>

n exemplul de mai sus s-a specificat imaginea care va fi folosit ca


fundal i de asemenea culoarea de fundal utilizat de browser pn
n momentul ncrcrii imaginii.

21

Limbajul HTML

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 2.1.
Un element este o component fundamental din structura unui
document. O pereche de directive delimiteaz un element HTML, iar
informaia cuprins ntre directiva de nceput i cea de sfrit
delimiteaz coninutul elementului. Revedei seciunea 2.1.
ntrebarea 2.2.
Directivele HTML sunt instruciuni folosite de ctre browser pentru a
determina cum anume s afieze informaia util din document.
Revedei seciunea 2.1.
ntrebarea 2.3.
Atributele sunt adugate directivelor HTML pentru a extinde sau
pentru a modifica comportamentul acestora. Revedei seciunea 2.2.
ntrebarea 2.4.
n afar de textul normal HTML ofer posibilitate afirii unor
caractere care n mod normal nu sunt aifate de ctre browser
deoarece acestea sunt caractere cheie folosite pentru identificarea
unor construcii HTML. Spre exemplu: caracterele < sau >.
Acestea se pot specifica n cadrul unui document HTML cu ajutorul
caracterelor speciale definite printr-o construcie de tipul: caracterul
& + cod caracter + caracter ;. Revedei seciunea 2.2.
ntrebarea 2.5.
Codul RGB este : (255, 0, 0). Varianta corect de rspuns : a).
Revedei seciunea 2.2.
Indicaii la problemele propuse
Problemele propuse n lucrrile de verificare se fac dupa modelele
de exemple prezentate n unitatea de nvare sau dupa tipicul
acestora.

Bibliografie
1. Dave Taylor - Crearea paginilor WEB, Editura Teora 1999,
pg.53-70
2. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i
XML, Editura Printech Bucureti 2004, pg.17-20, pg.28-29,
pg.48-49

22

Formatarea Textelor n limbajul HTML

Unitatea de nvare Nr. 3


FORMATAREA TEXTELOR IN LIMBAJUL HTML

Obiectivele Unitii de nvare Nr.3

24

3.1 Limbajul HTML i formatarea textelor

24

3.2 Titluri i paragrafe HTML

24

3.3 Definirea caracteristicilor fontului

29

3.4 Formatarea fizic a textelor

32

3.5 Formatarea logic a textelor

33

3.6 Preformatarea textului cu ajutorul directivei <PRE>

34

Lucrare de verificare a Unitilor de nvare nr. 1, 2 i 3

35

Rspunsuri i comentarii la ntrebrile din testele de evaluare

37

Bibliografie

37

23

Formatarea Textelor n limbajul HTML

Obiectivele Unitii de nvare Nr. 3:


Principalele obiective ale Unitii de nvare Nr. 3 sunt:
Dup parcurgerea acestei Unitii de nvare vei fi capabili:

S definii
titluri i paragrafe n cadrul unui
document HTML

S modificai tipurile de caractere, mrimea sau


culoarea acestora ntr-un document HTML

S folosii directivele HTML pentru formatarea logic


a textului

S folosii directivele HTML pentru formatarea fizic


a textului

3.1 Limbajul HTML si formatarea textelor


Pentru ca informaiile dintr-un document s fie asimilate ct mai uor
de ctre cititorii si i pentru ca prezentarea lor s aib succes
maxim este foarte important ca textul s fie organizat ntr-o form
ct mai atractiv. HTML ofer mijloace eficiente pentru a structura i
a nfrumusea un text.
Ca autor al unui document HTML ai dou opiuni n ceea ce privete
textul pe care doreti s l afiezi. Prima este s l scrii aa cum este
i a doua s n incluzi ntre anumite directive HTML. Spre exemplu
dac vrei s afiezi textul La multi ani! poi pur i simplu s l tastezi
n cadrul documentului i va fi afiat fr nici o problem. ns dac
vrei ca acest text s fie afiat ntr-un anumit mod spre exemplu vrei
ca textul s fie scris cu caractere roii de dimensiunea mai mare
dect cea normal a textului - va trebui s specifici explicit
browserului modul n care vrei ca textul tu s fie afiat cu ajutorul
directivelor HTML pentru formatarea a textelor.

3.2 Titluri i paragrafe HTML


Directiva
<Hn></H>

24

n cadrul oricrui document este necesar definirea unui titlu


principal i a mai multor titluri pentru fiecare din subseciunile
documentului. Limbajul HTML ofer o modalitate uoar de definire a
titlurilor de diferite dimensiuni. Titlurile se definesc folosindu-se
directiva <Hn>, unde n este un numr cuprins ntre 1 si 6. Valoarea 1
indic realizarea unui titlu cu cea mai mare dimensiune n timp ce 6
va creea un titlu cu cea mai mic dimensiune.

Formatarea Textelor n limbajul HTML

Directivele pentru titlu au un atribut optional care poate schimba


modul de aliniere. Acest atribut este align i poate luat una din
valorile: left - stnga, right dreapta sau center centru.
Folosirea valori left pentru atributul align este ns redundant
deoarece alinierea implicit folosit pentru cazurile n care nu este
specificat este left.
Pentru a vedea modul n care este poziionat textul din interiorul
directivelor de titlu HTML i pentru a compara diferitele dimensiuni
ale acestora vom considera codul HTML de mai jos:

<HTML>
<HEAD>
<TITLE>
Exemplu titluri
</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">
Titlul H1 pozitionat central
</H1>
<H2>
Titlul de tip H2.
</H2>
<P>
Acesta nu este un titlu ci este text normal
</P>
<H3>
Titlul de tip H3.
</H3>
<H4 ALIGN="RIGHT">
Titlul H4 aliniat la dreapta
</H4>
<H5>
Titlul de tip H5.
</H5>
<H6>
Titlul de tip H6.
</H6>
</BODY>
</HTML>
Rezultatul va fi n browser de forma:

25

Formatarea Textelor n limbajul HTML

Figura 3. 1 Exemple titluri HTML

Directiva
<P></P>

Nu uita s foloseti directiva de sfrit pentru titlu deoarece


browserul nu va include implicit una.
Un document HTML bun ar trebui s foloseasc titlurile n
ordinea ierarhic. H1 ar trebui folosit pentru primul nivel de
titlu, H2 pentru al doilea s.a.m.d
Se va evita omiterea unui nivel ierarhic la un moment dat,
adic H3 nu ar trebui s apar imediat dup H1, ci se va folosi
H2 n loc.

O metoda eficient de a face o pagin ct mai uor de citit este


desprirea acesteia n paragrafe. Spre deosebire ns de
documentele scrise cu majoritatea procesoarelor de text existente,
caracterele de linie nou nu sunt luate n considerare. n fapt, orice
tip de spaiere linie nou, taburi sau spaii vor fi transformate ntrun singur spaiu liber n momentul afirii documentului de ctre
browser.
Pentru a indica nceperea sau terminarea unui paragraf i deci
trecerea la o linie nou se folosete directiva HTML <P></P>.
Directiva de ncheiere </P> poate fi omis. Aceasta deoarece
majoritatea browserelor la ntlnirea unei noi directive <P> consider
automat c paragraful anterior s-a terminat.

26

Formatarea Textelor n limbajul HTML

Elementele de tip paragraf permit adugarea de text la un document


iar dimensiunea liniei va fi ajustat n funcie de dimensiunea
ferestrei browserului. Aceast ajustare se face automat de ctre
browser n momentul vizualizrii paginii.

Directiva
<BR>

Inserarea mai multor elemente <P> fr coninut succesiv va


avea ca rezultat n browser afiarea unei singure linii libere n
locul lor.
Pentru a introduce mai multe rnduri libere consecutiv se
poate folosi directiva <BR> descris mai jos.
Deoareace textul este reformatat de cte ori utilizatorul i
dimensioneaz fereastra se va evita introducerea manual a
rndurilor libere.

Adeseori este necesar trecerea forat la o linie nou fr a termina


ns paragraful curent. Deoarece caracterele de linie nou sunt
ignorate n HTML aceast trecere se face folosind directiva HTML
<BR>. Elementele <BR> nu au directiv de sfrit obligatorie
deoarece elementul marcheaz o poziie i nu are nici un coninut
care s trebuiasc delimitat.
n exemplul de mai jos vom urmri modul de folosire a directivelor
HTML <P> i <BR> precum i diferenele de poziionare n cazul
folosirii fiecreia:
<HTML>
<HEAD>
<TITLE>
Exemplu Paragraf si Break line
</TITLE>
</HEAD>
<BODY>
<H1>Titlul</H1>
<P> Textul paragrafului 1 </P>
<P> Textul paragrafului 2
<BR>
Linie noua in cadrul paragrafului 2
<BR> A doua linie noua in cadrul paragrafului 2
</P>
<P> Textul paragrafului 3 </P>
</BODY>
</HTML>
Va avea ca rezultat n browser:

27

Formatarea Textelor n limbajul HTML

Figura 3.2. Folosirea directivelor <P> i <BR>


Se observ faptul c n cazul directivei <P> se insereaz automat o
linie liber nainte i dup terminarea paragrafului, iar n cazul folosirii
directivei <BR> nu este introdus nici un spaiu suplimentar.
Directiva
<HR>

Un alt mijloc de a separa diferitele seciuni ale unui document este


folosirea directivei <HR>. La ntlnirea acestei directive browserul
trece automat la linie nou i deseneaz o linie orizontal.
Caracteristicile linie orizontale pot fi controlate de ctre atributele
directivei.
Atributul WIDTH. Specific lungimea liniei fie ca dimensiune absolut
n pixeli, fie ca procent din lungimea ferestrei browserului.
Atributul ALIGN. Poate lua una din valorile left, center sau right i
specific modul de aliniere a liniei. Acest atribut nu are semnificaie
fr existena atributului WIDTH.
Atributul NOSHADE. Implicit linia este desenat n relief avnd
umbr. Prezena acestui atribut indic faptul c linia va fi desenat
fr umbr.
Atributul SIZE. Specific grosimea numrul de pixeli - cu care va fi
desenat linia.
n exemplu de mai jos vom specifica o desenare a unei linii aliniate la
dreapta desenat fr umbr i cu dimensiunea 20% din fereastra
browserului i grosimea de 10 pixeli:

28

Formatarea Textelor n limbajul HTML

<HR
NOSHADE
ALIGH=RIGHT
SIZE=10
WIDTH=20%>
Test de autoevaluare
3.1. Directiva <BR> se folosete :
a>
b>
c>
d>

pentru a fora trecerea la o linie nou


forteaz nceperea unui paragraf nou
pentru introducerea mai multor
succesive
introducerea unei linii orizontale

linii

libere

3.2. Cum formateaz textul elementele de tip paragraf?

3.3. Cum se deseneaz n HTML o linie orizontal centrat cu


dimensiunea jumtate din lungimea ferestrei browserului

Rspunsurile corecte i comentarii asupra acestora se gsesc la pagina 37.

3.3 Definirea caracteristicilor fontului


Directiva
<BASEFONT>

Directiva <BASEFONT> definete dimensiunea implicit a fontului


pentru ntreg textul folosit n interiorul elementului <BODY>. Titlurile
H1-H6 nu sunt afectate de aceast directiv. Directiva BASEFONT
are un singur atribut: SIZE care definete dimensiunea implicit a
fontului folosit n cadrul documentului. Valoarea acestui atribut este
un intreg ntre 1 i 7 Dac nu este specificat acest atribut are
valoarea 3.
Pentru a schimba dimensiunea implicit a fontului la 5 scriem:
<BASEFONT SIZE=5>

Schimbarea fontului de baz ar trebui s fie fcut cu grij i


avnd un motiv clar deoarece utilizatorul are posibilitatea
oricum s defineasc dimensiunea preferat a textului din
opiunile browserului.
Aceast element nu are directiv de ncheiere
Directiva BASEFONT afecteaz textul din cadrul elementului
BODY dar nu i titlurile. Alegerea unei dimensiuni prea mari
pentru fontul de baz poate duce la situaia n care fontul
29

Formatarea Textelor n limbajul HTML

Directiva
<FONT>

pentru titlu are dimensiuni mai mici dect fontul textului


propriuzis producnd astfel confuzie.
Directiva BASEFONT afecteaz ntreg textul ce urmeaz dup
ea i pn la ncheierea elementului BODY.
Nu este recomandat folosirea ei pentru schimbarea
dimensiunii fontului unui bloc de text a caracterelor
individuale, pentru aceasta fiind disponibile alte directive
precum FONT, BIG sau altele despre care vom discuta mai
taziu n aceast unitate de nvare

Pentru a stabili caracteristici ale fontului precum: dimensiune,


culoare, tip pentru un bloc de text se folosete directiva <FONT>.
Schimbarea caracteristicilor fontului pentru o parte din caractere sau
pentru anumite cuvinte este o metod bun pentru a scoate n
eviden ceva important sau pentru a creea efecte interesante.
Directiva de sfrit este obligatorie.
Atributul SIZE. determin noua dimensiune a fontului pentru textul
elementului. Valoarea atributului este un intreg ntre 1 i 7
specificnd astfel dimensiunea absolut a fontului. Prin prin
adugarea prefixului + sau - este specificat dimensiunea relativ
fa de fontul de baz.
Pentru specificarea dimensiunii n valoarea absolut vom scrie:
<FONT SIZE=7>A </FONT>fost odata ca niciodata
care va avea care rezultat n browser:

Figura 3. 3. Exemplu specificare dimensiune font n valoare


absolut

n exemplu de mai jos vom incerca s creem un efect de


persepctiv pentru exclamaia URAAA folosind atributul
SIZE pentru directiva font i specificnd dimensiunea n
format relativ:

<P>
U
<FONT SIZE="+1">R
<FONT SIZE="+2">A
<FONT SIZE="+3">A
<FONT SIZE="+4">A
</FONT>
</FONT>
</FONT>
</FONT>

30

Formatarea Textelor n limbajul HTML

Va avea ca rezultat n browser:

Figura 3. 3. Exemplu specificare dimensiune font n valoare


relativ
n cazul folosirii intercalate a directivelor <FONT> cu valoarea
atributului SIZE specificat n valoare relativ, efectul nu este
cumulativ ci referina este dimensiunea fontului de baz.
Atributul COLOR. Definete culoarea textului din interiorul
elementului FONT. Specificarea culorii se face folosindu-se codul
RGB1 sau numele predefinit al culorii dorite.
Pentru a afia un text cu culoarea galben i dimensiunea absolut 5
vom scrie:

<P>
Ultimul cuvant are culoarea
<FONT COLOR="#0000FF" SIZE="5">
Albastra
<FONT>.
</P>

i rezultatul n browser va fi:

Figura 3. 4. Exemplu specificare culoare font


Atributul FACE. Permite schimbarea tipului de font folosit pentru
afiarea textului. Dac fontul nu este suportat de ctre browser va fi
folosit tipul implicit de font. Se pot specifica mai multe tipuri de font
desprie prin virgul i un spaiu.
<FONT FACE=arial, courier, garamond>
n acest caz daca primul tip de font nu este suportat de ctre browser
se va ncerca cu cel de al doilea s.a.m.d.
n exemplu prezentm o list de fonturi uzuale suportate de ctre
majoritatea browserelor:

Vezi unitatatea de nvare numrul 2

31

Formatarea Textelor n limbajul HTML

Figura 3. 5. Tipuri de font uzuale

Folosete directiva FONT pentru a schimba caracteristicile


fontului pentru un numr oarecare de cuvinte sau paragrafe,
iar pentru schimbarea intregii pagini fosolsete BASEFONT.
Este indicat s evii folosirea schimbrii dimensiunii fontului
folosind valori extreme deoarece aceasta poate face
documentul greu de citit.

Test de autoevaluare
3.4 n ce cazuri este recomandat a se folosi directiva
<BASEFONT> n locul directivei <FONT>

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 37.

3.4 Formatarea fizic a textelor


Directivele pentru formatare fizic foreaz browserul s afieze
textul elementului respectiv ntr-un anumit format dorit de creatorul
documentului HTML respectiv neinnd cont de setrile din browser
ale utilizatorului respectiv.
Dac una din aceste directive nu este suportat de ctre browser ea
va fi ignorata deoarece browserul nu are nici o alt alternativ de
afiare. n cele ce urmeaz este prezentat o list cu aceste
directive i este pe scurt descris funcionalitatea fiecreia.

32

Formatarea Textelor n limbajul HTML

Directiv
<B>
<BIG>

Funcionaliate
Afieaz textul ngroat
Afieaz textul cu o unitate mai mare dect
dimensiunea fontului de baz
<SMALL> Afieaz textul cu o unitate mai mic dect
dimensiunea fontului de baz
<I>
Afieaz textul nclinat.
<U>
Afieaz textul subliniat
<SUB>
Afieaz textul sub form de indice inferior
<SUP>
Afieaz textul sub form de indice superior
<TT>
Afieaz textul cu caractere teleprinter
<BLINK> Afieaz textul plpind
Toate directivele de formatare fizic de mai sus necesit specificarea
explicit a directivei pereche de sfrit.

3.5 Formatarea logic a textelor


Formatarea logic presupune, spre deosebire de cea fizic, faptul c
fiecare browser va formata textul afectat de directivele logice n
funcie de posibilitile platformei pe care ruleaz. Prin urmare
formatarea propriuzis nu va fi neaprat la fel de la un browser la
altul, ns efectul va fi acelai. Spre exemplu pentru unele browsere
textul din cadrul directivei <EM> va aprea ngroat n timp ce pentru
altele va aprea italic.Creatorul paginii se va concentra n acest caz
mai mult pe definirea seminificaiei textului dect asupra modului n
care acesta va fi formatat n browser.
S discutm despre fiecare element n parte:
<ACRONYM> indic faptul c textul inclus este un acronim, adic un
cuvnt format din iniialele unor cuvinte care fac parte dintr-o
expresie sau un nume.
<CITE> indic faptul c testul inclus este un citat bibliografic. Prin
convenie acest text este afiat nclinat.
<CODE> este folosit pentru a afia exemple de cod surs. Textul
acestui element este afiat cu font de tip teleprinter precum este
fontul courier.
<EM> este folosit pentru a afia un text ce trebuie scos n eviden,
sau un termen nou introdus in document. Majoritatea browserelor vor
afia textul acestui element n format ngroat sau nclinat.
<STRONG> efectul este asemntor cu cazul folosirii directivei
<EM> dar mai puternic.
Toate directivele de formatare logic de mai sus necesit
specificarea explicit a directivei pereche de sfrit.
33

Formatarea Textelor n limbajul HTML

3.6 Preformatarea textului cu ajutorul directivei <PRE>


Aa cum am mai artat n unitatea de nvare precedent n
momentul n care un document HTML este afiat de ctre browser,
spaiile aflate ntre dou cuvinte adiacente, n caz ca sunt mai multe,
vor fi transformate automat ntr-un singur spaiu. Exist, bineneles
metode de a definii spaii suplimentare ntre cuvinte dac acest lucru
este necesar, iar una din aceste metode este folosirea directivei
HTML: <PRE>.
Directiva <PRE> mpreun cu directiva sa pereche de sfrit,
creeaz un spaiu n interiorul cruia textul va fi afiat de ctre
browser exact n formatul din codul surs HTML, pstrndu-se
numrul de spaii libere sau numrul de linii libere succesive.
Lungimea liniei nu mai este ajustat n acest caz n funcie de
dimensiunea ferestrei browserului.
Textul din interiorul elementului <PRE> este afiat folosindu-se un
font cu lungimea constant a caracterului (e.g. courier).
Coninutul elementului <PRE> poate include orice directiv de
formatare fizic sau logic, imagini sau legturi2. Directivele care
implic terminarea unui paragraf adic <P> sau <Hn> - nu sunt
recomandate spre a fi folosite n interiorul elementului deoarece
rezultatul folosirii acestora n acest caz nu este consistent pentru
toate tipurile de browser.
Directiva <PRE> are un atribut opional - WIDTH care determin
numrul de caractere coninute ntr-o linie a blocului preformatat.
Dac o linie are lungimea mai mare de cea specificat de acest
atribut nu nseamn ca aceasta va fi automat ajustat la aceast
dimensiune ci mai degrab va fi extins n afara regiunii vizibile a
ferestrei browserului.
Folosirea acestor elemente este n general util pentru realizarea de
tabele sau atunci cnd se dorete pstrarea integritii unor coloane
sau rnduri. Pentru aceasta HTML pune la dispoziie ns i alte
directive speciale despre care vom vorbi n leciile urmtoare. ns
avantajul folosirii acestei tehnici n locul directivelor specializate este
c nu toate browserele suport utilizarea acestora.

Vom discuta despre acestea in unitatea de invaare 5 i 6

34

Formatarea Textelor n limbajul HTML

Lucrare de verificare a Unitilor de nvare Nr. 1, 2 i 3

1. Creai un document HTML care s conin doar structura de baz


a unui document HTML i care s aib
culoare de fundal: galben
S afieze textul: Am fcut prima Lucrare! cu culoarea roie
Predai fiierul HTML n format electronic ca rezultat al rezolvrii
lucrrii de verificare.
Pe lng informaiile prezentate n manual se poate utiliza reperul
bibliografic numrul 2 din bibliografia unitii de nvare.
Nr. de puncte 15 (7 puncte definire culoare fundal, 8 puncte afiarea
textului cerut folosid culoarea roie)

2. Scrieti documentul HTML pentru o pagin WEB ca cea din figura


de mai jos. Aceasta trebuie sa conin: 1 titlu de tip H1 poziionat
central, 1 titlu de tip H2 aliniat la stnga, corpul textului va fi format
din 2 paragrafe n care primul cuvnt din text are format italic.
Predai fiierul HTML n format electronic ca rezultat al rezolvrii
lucrrii de verificare.
Ca ajutor suplimentar utilizati reperele bibliografice 2 i 3 din
bibliografia unitii de nvare.
Nr de puncte 10 (5p - folosirea directivelor specifice pentru titluri i
paragrafe, 2p - mprirea n 2 paragrafe a textului (la fel ca in figur),
3p - formatarea tip italic a primului cuvnt din fiecare paragraf.

35

Formatarea Textelor n limbajul HTML

36

Formatarea Textelor n limbajul HTML

Rspunsuri i comentarii la ntrebrile din testele de autoevaluare


ntrebarea 3.1.
Directiva <BR> se folosete pentru a fora trecerea la o linie nou.
De asemenea se poate folosi n cazul n care se dorete
introducerea mai multor linii libere succesive. Vezi seciunea 3.2.

ntrebarea 3.2.
Elementul de tip paragraf va formata textul coninut astfel nct
dimesiunea liniei s nu depeasc lungimea ferestrei. La nceputul
i sfritul unui paragraf se va adaug automat o linie liber. Vezi
seciunea 3.2.

ntrebarea 3.3.
Directiva HTML pentru a desena aceast linie se scrie n felul
urmtor:
<HR
ALIGH=CENTER
WIDTH=50%>
Vezi seciunea 3.2.
ntrebarea 3.4.
Directiva <BASEFONT> se folosete n cazul n care se dorete
schimbarea
caracteristicilor
fontului
pentru
ntreg
textul
documnetului. Directiva FONT se folosete pentru a schimba
caracteristicile pentru un numr oareacare de cuvinte din text. Vezi
seciunea 3.4.

Indicaii la problemele propuse


Problemele propuse n lucrrile de verificare se fac dup modelele
de exemple prezentate n unitatea de nvare sau dup tipicul
acestora.

Bibliografie
1. Dave Taylor - Crearea paginilor WEB, Editura Teora 1999,
pg.71-82
2. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i
XML, Editura Printech Bucureti 2004, pg.20-27
3. T.Gugoiu HTML prin exemple, Editura Teora 2000

37

Liste i tabele n limbajul HTML

Unitatea de nvare Nr. 4


LISTE N LIMBAJUL HTML

38

Obiectivele Unitii de nvare Nr. 4

39

4.1 Tipuri de liste n limbajul HTML

39

4.2 Liste HTML neordonate

40

4.3 Liste HTML ordonate

44

4.4 Liste de definiie

44

Rspunsuri i comentarii la ntrebrile din testele de evaluare

47

Bibliografie

48

Liste i tabele n limbajul HTML

Obiectivele Unitii de nvare Nr. 4:

Dup parcurgerea acestei Unitii de nvare vei fi capabil:

S creezi liste neordonate cu ajutorul directivelor


HTML specializate

S creezi liste ordonate cu ajutorul directivelor HTML


specializate

S creezi liste de definiii

S creezi liste imbricate.

4.1 Tipuri de liste n limbajul HTML


Clasificare
Liste

Listele reprezint un excelent mijloc pentru a sistematiza informaia


i de a scoate n eviden anumite aspecte importante dintr-un
anume context. Limbajul HTML ofer un suport bogat, pentru
definirea listelor. Se pot creea trei tipuri de liste:
Neordonate (unordered lists) List fr numere de ordine.
Ordonate (ordered lists) List cu numere de ordine.
List de definiii (definition lists) Este o list compus din
termeni i definiii ale acestora.
Cu excepia listelor de definiii, toate tipurile de list au aceeai
structur de baz, fiecare list constnd dintr-o secven de
elemente marcate de directiva <LI>.
<SPECIFICATOR_TIP_LISTA>
<LI> ELEMENT 1 text element 1 </LI>
<LI> ELEMENT 2 text element 2 </LI>
...
</SPECIFICATOR_TIP_LISTA>
n cadrul unui element al unei liste se pot folosi urmtoarele
construcii HTML: paragrafe, imagini, legturi, alte liste, directive de
formatare text.

39

Liste i tabele n limbajul HTML

<LI>
Funcionalitate:
Definete un element dintr-o
list
Atribute:
TYPE
VALUE
Directiva de sfrit:
</LI> este opional
Directiva <LI> este folosit att n cadrul listelor ordonate ct i
neordonate dup cum vom vedea n seciunile urmtoare.

4.2 Liste HTML neordonate

Cum
definim
lista

Listele neordonate sunt folosite pentru enumerarea unor elemente


pentru care ordinea de apariie nu este important, cum ar fi, spre
exemplu o list de cumprturi, sau lista de obiective ale acestei
seciuni de nvare.
Elementele unei liste neordonate vor fi afiate intendat i fiind
precedate de un marcaj. Aceast marcaj este introdus automat de
ctre browser i prin urmare nu trebuie specificat n codul surs
HTML.

<UL>
Funcionalitate:
Definete o list neordonat
Atribute:

TYPE

Directiva de sfrit:
</UL> este OBLIGATORIE
O list neordonat se definete folosind directiva HTML <UL>, iar
directiva de sfrit corepunztoare </UL> este obligatorie. nauntrul
acestui element fiecare element se specific folosind directiva <LI>.
Directiva de sfrit </LI> poate fi omis ns este recomandat ca
aceasta s fie totui specificat deoarece este util n cazul folosirii
stilurilor CSS despre care vom vorbii in unitatea de nvare 12.

40

Liste i tabele n limbajul HTML

<P> Acesta este un exemplu de lista neordonata:


<UL>
<LI>Primul element al listei</LI>
<LI>Al doilea element al listei</LI>
<LI>Al treilea element al listei</LI>
</UL>
</P>
Va avea ca rezultat n browser:

Figura 4.1 Examplu lista neordonata


O list neordonat introduce o linie liber ntre ea i textul de
deasupra i nc una ntre ea i textul ce urmeaz ei.
Atributul TYPE. Forma marcajului pentru fiecare element se poate
schimba folosind atributul TYPE, care permite specificarea a 3 forme
pentru marcaj:
Valoarea DISC pentru forma de cerc plin valoarea implicit
Valoare CIRCLE pentru forma de cerc gol
Valoarea SQARE pentru forma de ptrat gol
Atributul type poate fi de asemenea aplicat i fiecrei directive <LI>
n parte, n cazul n care se dorete o form diferit pentru fiecare din
elementele listei.
Test de autoevaluare:
4.1 De cte tipuri pot fi listele HTML
4.2 Definii o list neordonat care s conin 3 elemente. Primul i
ultimul element s aib marcajul de tip ptrat, iar al doilea element
s aib marcajul de tip disc.

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 47.

41

Liste i tabele n limbajul HTML

4.3 Liste HTML ordonate


Listele ordonate sunt folosite n cazul n care ordinea elementelor
Cum definim este important s fie respectat, cum ar fi spre exemplu cuprinsul
lista
unei lucrri sau o list de instruciuni. La fel ca n cazul listelor
ordonata?
neordonate elementele sunt afiate intendat dar n loc de un marcaj
grafic browserul va afia automat n faa fiecrui element un numr
de ordine.

<OL>
Funcionalitate:
Definete o list ordonat
Atribute:

START
TYPE

Directiva de sfrit:
</OL> - OBLIGATORIE
O list ordonat are aceeai structur de baz ca o list neordonat.
Pentru a defini o list ordonat se folosete directiva <OL> nuntrul
careia fiecare element se specific folosind directiva <LI>.
<P> Acesta este un exemplu de lista ordonata:
<OL>
<LI>Primul element al listei</LI>
<LI>Al doilea element al listei</LI>
<LI>Al treilea element al listei</LI>
</OL>
</P>

Va avea ca rezultat n browser:

Exemplu 4.2 Exemplu list ordonat

42

Liste i tabele n limbajul HTML

Atributul TYPE.
Implicit numerotarea elementelor dintr-o list
ordonat se face automat folosindu-se cifre de tip arabice. Pentru a
modifica stilul de numerotare se poate folosi atributul TYPE n cadrul
directivei <OL>. Exist 5 tipuri de numerotare suportate. n funcie
de stilul de numerotare dorit se va specifica valoara atributului TYPE
aa cum este specificat n tabelul de mai jos.
Valoare
atribut TYPE
A
a
I
i
1

Stilul generat
Litere majuscule
Litere mici
Cifre romane majuscule
Cifre romane mici
Cifre arabe

Exemplu
A, B, C, D...
a, b, c, d...
I, II, III, IV...
i, ii, iii, iv...
1, 2, 3, 4

Spre exemplu pentru a defini o list care folosete stilul de


numerotare cu litere majuscule vom scrie astfel:
<OL TYPE=A>
< LI> Primul element < /LI>
< LI> Elementul 2 din lista< /LI>
< LI> ultimul element din lista< /LI>
</OL>
Atributul START. Permite specificarea valorii cu care va ncepe
numerotarea elementelor listei. Daca nu este folosit atributul start
numerotarea va ncepe cu 1 sau respectiv cu primul caracter din
setul specificat de ctre atributul TYPE. Spre exemplu pentru a
specifica o list ordonat care folosete stilul de numerotare cu cifre
romane i pentru care primul element ncepe de la valoarea VI (6)
vom scrie astfel:
<OL TYPE=I START=6>
<LI>
Primul element este numerotat cu VI
</LI>
<LI>
Elementul urmtor va fi numeroat cu VII
</LI>
<LI>
Si asa mai departe.....
</LI>
</OL>
Listele ordonate precum i cele neordonate pot avea diferite nivele,
n sensul c fiecare din elementele unei liste poate consta dintr-o alt
sublist. Fiecare din aceste subnivele va fi intendat corespunztor
de ctre browser, efectul acestor intendri fiind cumulativ. De acest
fapt trebuie inut cont atunci cnd se folosesc mai multe nivele de
imbricare pentru liste.
43

Liste i tabele n limbajul HTML

Test de autoevaluare:
4.3 Cnd se folosesc listele ordonate n locul celor neordonate?
Dai cteva exemple de folosire.

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 47.

4.4 Liste de definiie


Listele de definiii permit enumerarea unei liste de elemente fiecare
Cum definim
din acestea fiind urmate de explicaia lor. Spre exemplu Glosarul
lista de
unei cari poate fi considerat o list de definiii. Pentru definirea
definiie?
acestor tipuri de list se folosesc trei directive HTML: <DD> , <DL> i
<DT>.

<DL>
Funcionalitate:

Creeaz o list de definiii

Atribute:

COMPACT

Directiva de sfrit:

</DL> - OBLIGATORIE
O list de definiii este ncadrat de directiva pereche <DL>. n
interiorul acestor directive fiecare element al unei liste de definiii
este compus din 2 pri. Prima parte este un termen urmat n partea
a doua de definiia acestuia. Pentru definirea primei pari se folosete
directiva HTML <DT>, urmat de definia acestuia care se face cu
ajutorul directivei <DD>.
n mod normal browserul plaseaz definiia termenului pe un rnd
nou, ns dac aceast definiie este foarte scurt (3 caractere) o va
plasa pe acelai rnd cu termenul.
Atributul COMPACT. Specific browserului s afieze lista ocupnd
ct mai puin spaiu posibil.

44

Liste i tabele n limbajul HTML

<DT>

<DD>

Funcionalitate:
Funcionalitate:
Creeaz o definiie
Creeaz un termen
pentru un termen
ntr-o list de definiii
Atribute:

Nu are

Directiva de sfrit:
</DT> - opional

Atribute:

Nu are

Directiva de sfrit:
</DD> - opional

n interiorul elementului <DD> se poate folosi aproape orice directiv


HTML, inclusiv alte liste, imagini, directive pentru formatarea textului
etc. Totui dac nu este folosit nici o directiv de formatare, textul din
cadrul elementului <DD> este afiat intendat.
Mai jos este exemplificat modul de folosire a unei liste de definiii prin
realizarea unui glosar de termeni din domeniul WEB:
...
<H3> Glosar termeni WEB </H3>
<DL>
<DT>Browser</DT>
<DD>Aplicatie software utilizat pentru
vizualizarea paginilor WEB</DD>
<DT>GIF</DT>
<DD>Format de imagine comprimat utilizat
frecvent in Internet</DD>
<DT>HTML</DT>
<DD>Limbaj pentru realizarea paginilor
WEB</DD>
</DL>
...
Va avea ca rezultat n browser:

45

Liste i tabele n limbajul HTML

Figura 4.3 Exemplu lista definiii


Test de autoevaluare:
4.4 . Construii o list de definiii care s conin tipurile de liste
disponibile n HTML i definiia lor.

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 47.

46

Liste i tabele n limbajul HTML

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 4.1.
Limbajul HTML ofer suport pentru realizarea a trei tipuri de liste:
neordonate, ordonate, liste de definiii. Consultai seciunea 4.1.

ntrebarea 4.2.
Codul HTML pentru realizarea acestei liste este:
<UL>
<LI TYPE=SQARE>Element 1</LI>
<LI>Element 2 </LI>
<LI TYPE=SQARE><LI>Element 3</LI>
</UL>
Consultai seciunea 4.2.
ntrebarea 4.3.
Listele ordonate sunt folosite n cazul n care ordinea elementelor
este relevant. Exemple de folosire pentru listele ordonate: Cuprinsul
lucrarilor, lista de pai a unui algoritm etc. Consultai seciunea 4.3.

ntrebarea 4.4.
Codul HTML pentru realizarea acestei liste este:
<DL>
<DT>Neordonate</DT>
<DD>
Lista fara numere de ordine
</DD>
<DT>Ordonate</DT>
<DD>
Lista cu numere de ordine
</DD>
<DT>Lista de definitii</DT>
<DD>
Lista compusa din termeni si definitii ale
acestora
</DD>
</DL>
Consultai seciunea 4.4.
Indicaii la problemele propuse
Problemele propuse n lucrrile de verificare se fac dup modelele
de exemple prezentate n unitatea de nvare sau dup tipicul
acestora.

47

Liste i tabele n limbajul HTML

Bibliografie
1. Dave Taylor - Crearea paginilor WEB, Editura Teora 1999,
pg.85-99
2. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i
XML, Editura Printech Bucureti 2004, pg.36-38
3. T.Gugoiu HTML prin exemple, Editura Teora 2000, pg.33-38

48

Hyperlinks in limbajul HTML

Unitatea de nvare Nr. 5


HYPERLINKS N LIMBAJUL HTML
Obiectivele Unitii de nvare Nr.5

50

5.1 Hypertext i hyperlink

50

5.2 URL identificator unic de resurse WEB

51

5.3 Realizarea legturilor n HTML

51

5.4 Folosirea imaginilor pentru legturi

55

Rspunsuri i comentarii la ntrebrile din testele de evaluare

57

Bibliografie

57

49

Hyperlinks in limbajul HTML

Obiectivele Unitii de nvare Nr. 5:

Dup parcurgerea acestei Unitii de nvare vei fi capabili:

S creai hyperlink-uri n documente HTML

S definii tipurile de legturi

S folosii imagini ca hyperlink-uri

S ntelegei definiia i structura unui URL

5.1 Hypertext i Hyperlink


Hypertext,
Hyperlinks

Termenul de Hypertext este format dintr-o asociere de ali doi


termeni: Hyper - care nseamn mai incolo de si text. i se refer la
o modalitate de organizare a unui document diferit de organizarea
liniar folosit n cazul documentelor tiprite. Mai concret cititorul
unui document Hypertext are posibilitatea s-l parcurg ntr-o alt
ordine dect cea predefinit de ctre autor. Acest lucru este posibil
prin existena legturilor Hyperlinks ntre diferite componente ale
documentului.
Adevrata putere a limbajului HTML const tocmai n abilitatea sa de
a lega texte sau imagini din cadrul unui document HTML de alt
document HTML sau seciune a acestuia. Aceste legturi au scopul
de a perminte cititorului s sar la un moment dat direct la locul
unde va gsi mai multe informaii despre o chestiune n discuie.
Implementnd astfel conceptul de Hypertext.

Definitie

n esen un sistem Hypertext este o reea semantic ale crui


noduri sunt fragmente de text. Dac nodurile conin i imagini sau
sunete, putem vorbi de un sistem Hypermedia ntr-un sistem
Hypertext se disting urmtoarele elemente fundamentale:

50

nodurile reprezint paginile unui document Hypertext


ancorele (intele) reprezit fragmente unitare de noduri
cum ar fi spre exemplu cuvinte evideniate n text,
imagini, butoane etc.
legturile ntre noduri, avnd drept punct de plecare fie
ntreg nodul surs fie o ancor a sa

Hyperlinks in limbajul HTML

5.2 URL Identificator unic de resurse WEB


Fiecare pagin sau resurs WEB are asociat o adres unic n
internet cunoscut sub acronimul de URL (Uniform Resource
Locator).

Componentele
URL-ului

Sintaxa unui URL este conceput a fi ct mai generic posibil, un


URL fiind compus din urmtoarele componente:
1. Numele resursei, precedat de:
2. Ierarhia de directoare unde se afl resursa respectiv,
precedat de:
3. Adresa de internet sau numele de domeniu al serverului
care gzduiete resursa, precedat de:
4. Protocolul folosit de ctre browser i serverul care
gzduiete resursa pentru a o transmite
Nu este obligatoriu pentru toate componentele descrise mai sus s
apar ntr-un URL acestea fiind (n msura posibilitilor) completate
automat de ctre browser sau server Aceasta este sintaxa unui URL:
protocol://adres_server/cale_resurs/nume_resurs
i iat cteva exemple de URL-uri:
http://www.hotnews.ro/revista_presei.htm
http://www.desprecopii.com
ftp://ftp.myftp.ro/pub
informatii_contact.html
Primul URL din exemplul de mai sus este un URL n format absolut
sau complet. Browserele ofer de asemenea posibilitatea folosirii
URL-urilor relative sau incomplet specificate, completnd automat
prile lips ale URL-ului specificat att ct este posibil.
Cum ar fi n exemplul de mai sus pentru cel de-al patrulea URL
browserul l va completa automat presupunnd c pagina
informatii_contact se afl pe acelai server i n acelai director cu
documentul curent.

5.3 Realizarea legturilor n HTML


n cadrul unei pagini HTML unul sau mai multe cuvinte consecutive
pot s aib asociate o anumit resurs WEB adic, o alt pagin
HTML, o imagine, un film etc. Directiva <A> face posibil definirea
acestei asocieri sau legturii folosind n acest scop urmtoarea
sintax:

51

Hyperlinks in limbajul HTML

<A HREF=URL>
Textul afiat cu care se face asocierea
</A>
Legturile vor fi afiate de ctre browser cu alt culoare i vor fi
scoase n eviden fa de restul textului, de obicei fiind subliniate.
Iat un exemplu de definire a unei legturi HTML:
...
<P>Definirea
<A HREF=http://www.invathtml.ro/despre_legaturi.html>
legaturilor HTML
</A>
este simpla!
</P>
...

Va avea ca rezulta n browser:

Figura 5.1 Exemplu legtur HTML


Dac utilizatorul va selecta zona legturii cu mouse-ul browserul va
ncrca pagina identificat de URL-ul specificat ca valoare a
atributului HREF.

<A>
Funcionalitate:
Creeaz o
ancor

legtur

sau

Atribute:

HREF
NAME
TITLE
TARGET

Directiva de sfrit:

</A> este OBLIGATORIE

52

Hyperlinks in limbajul HTML

n concluzie, directiva <A> este folosit pentru a creea o legtur


(hyperlink) ctre un document, atributul HREF avnd rolul de a
specifica adresa acelui document, iar cuvintele dintre directivele
ancor de deschidere <A> i respectiv de nchidere vor fi afiate ca
hyperlink.
Tipuri de
legaturi

Exist trei tipuri principale de legturi:

Atributul
NAME

Legturi interne folosite n cadrul documentelor de


dimensiuni mari pentru o mai bun structurare a coninutului.
Legturi locale sunt legturi ctre alte documente aflate pe
acelai server. Legturile locale se pot specifica folosind fie
URL-ul complet, fie un URL relativ care conine doar calea
ctre resursa respectiv relativ la directorul curent.
Legturi externe sunt legturi ctre pagini gzduite pe alt
server de WEB. Pentru legturile externe se folosete
ntotdeauna URL-ul specificat complet.

Aa cum am artat mai sus o ancor este o etichet folosit pentru a


identifica o anumit seciune a unui document HTML. Pentru a defini
o ancor directiva <A> este folosit mpreun cu atributul su NAME.
Spre exemplu, presupunnd c acest document este un document
HTML i vrem s definim o ancor pe titlul acestei subunitii de
nvare pentru a putea face referire la el din alt parte a
documentului, vom scrie:
<A NAME=legaturi_html>
Realizarea legturilor HTML
</A>

Atributul
HREF

Mai departe, n momentul n care se dorete referirea acestei ancore


se va folosi tot directiva <A> dar de aceast dat mpreun cu
atributul HREF. n cazul n care referina se face din aceeai pagin
n care a fost definit ancora este de ajuns specificarea numelui
ancorei precedat de caracterul #. Ca n exemplul de mai jos:
...
<P>Definirea
<A HREF=#legaturi_html>
legaturilor HTML
</A>
este simpla.</P>
...
Accesarea acestei legturi va spune browserului s deruleze pagina
pn la nceputul Unitii de nvare Realizarea legturilor HTML,
unde este definit ancora legaturi_html.
Dac referirea se face din alt pagin HTML dar care se afl pe
acelai server i n acelai director se poate de asemenea folosi de
asemenea un URL relativ. Presupunnd c fiierul ce conine
53

Hyperlinks in limbajul HTML

Unitatea noastra de nvare se numete despre_legaturi.html vom


scrie:
...
<P>Definirea
<A HREF=despre_legaturi.html#legaturi_html>
legaturilor HTML
</A>
este simpla.</P>
...
n cazul n care pagina noastr se afl pe alt server este necesar
folosirea URL-ului complet specificat.
Test de autoevaluare
5.1 Scriei directiva ce realizeaz hyperlink la pagina i la ancora
definite mai sus n cazul n care aceasta se afl pe un alt server de
WEB dect pagina din care se face referire.

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 57.

Atributul
Target

Atributul TARGET. n mod obinuit la aceesarea unui hyperlink


browserul va ncrca resursa specificat n aceeai pagin a
browserului. Pentru a specifica o locaie diferit de ncrcare a
resursei se folosete atributul target. Dac este specific valoarea
_blank resursa va fi ncrcat ntr-o fereastr pe care browserul o
va crea special pentru afiarea noii resurse.
<A
HREF=http://www.yahoo.com
TARGET=_blank
>
Yahooooo!
</A>
La accesarea legturii browserul va deschide o nou fereastr n
care va afia pagina cunoscutului portal Yahoo.
Dac vei folosi pentru toate legturile din pagin atributul TARGET
specificnd valorea _blank, fiecare din aceasta va fi lansat ntr-o
nou fereastra de browser ceea ce nu este intotdeauna elegant

54

Hyperlinks in limbajul HTML

deoarece este foarte probabil ca utilizatorul s pierd numrul


ferestrelor deschise i s nu mai fie capabil s le gestioneze eficient.
Atributul
TITLE

Atributul TITLE Permite specificarea unui text descriptiv pentru


resursa la care se refer legtura. Acest text va fi afiat de ctre
browser n momentul n care cursorul mouse-ului este deplasat
deasura legturii.
De obicei acest text este afiat sub form de fereastr tool tip
precum n exemplul de mai jos.
<A HREF="http://www.yahoo.com"
TITLE="Aceasta legatura ne transporta direct la
pagina Yahoo"
>
Yahooooo!
</A>

Figura 5.2 Exemplu utilizare atribut TITLE


Atributul
TABINDEX

Atributul
ACCESSKEY

Atributul TABINDEX. n mod obinuit o legtur este accesat n


momentul n care utilizatorul se afl cu cursorul deasupra legturii i
apas butonul mouse-ului. O alt modalitate de accesare a unei
legturi este prin apsarea succesiv a tastei <TAB> pn n
momentul n care cursorul ajunge deasupra legturii urmat de
apsarea tastei <ENTER>. Ordinea n care se face trecerea de la o
legtura la alta la apsarea tastei <TAB> poate fi stabilit de ctre
valoarea atributului TABINDEX. Valoarea atributului TABINDEX
poate fi orice ntreg mai mare dect zero.
Atributul ACCESSKEY. Valoarea acestui atribut const ntr-un
identificator al unei taste la apsarea careia se va accesa legtura.

5.4 Folosirea imaginilor pentru legturi


Pentru a face o pagin ct mai dinamic, mai interactiv i mai uor
de folosit pentru utilizator o tehnic adesea utilizat este cea a
folosirii imaginilor ca hyperlink-uri n locul textelor. Spre exemplu
pentru legtra ctre pagina WEB principal se poate folosi n locul

55

Hyperlinks in limbajul HTML

textului HOME o imagine ce nfisaz o cas precum imaginea de


mai jos:

Realizarea unei legturi care s foloseasc imagini n locul textului


este simpl i se face cu ajutorul directivelor <A> i <IMG>, directiva
IMG fiind specificat n interiorul perechii <A></A> ca n exemplu de
mai jos:
<A HREF="Home.html">
<IMG SRC="home.jpg">Acasa
</A>
Codul HTML de mai sus va crea o imagine nsoit de un text
(Acasa) care se va comporta ca un hyperlink.
Atunci cnd este folosit ca hyperlink o imagine este n mod normal
ncadrat ntr-un ptrat de culoarea setat pentru hyperlink n pagina
respectiv. n felul acesta este indicat faptul c hyperlinkul este activ

Afiarea imaginilor n pagin


browsere de aceea este
imaginilor drept hypelink ca
atributul ALT cu o descriere
hyperlink-ul respectiv.

poate fi dezactivat n anumite


recomandat n cazul folosirii
directiva <IMG> s conin i
sugestiv pentru imaginea sau

Test de autoevaluare
5.2 Definii un hyperlink de tip imagine care s afiseze un text
explicativ n locul imaginii n cazul n care imaginea nu poate fi
inrcat n browser.

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 57.

56

Hyperlinks in limbajul HTML

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 5.1.
...
<P>Definirea
<A
HREF=http://www.adresa_server.ro/cale_fisiere_html
/despre_legaturi.html#legaturi_html>
legaturilor HTML
</A>
este simpla.</P>
...
Pentru nelmuriri revedei seciunea 5.3.
ntrebarea 5.2.
Codul HTML este urmtorul:
<A HREF="Home.html">
<IMG SRC="home.jpg" ALT=ACASA>
</A>
Pentru nelmuriri revedei seciunea 5.4.

Indicaii la problemele propuse


Problemele propuse n lucrrile de verificare se fac dup modelele
de exemple prezentate n unitatea de nvare sau dup tipicul
acestora.

Bibliografie
1. Dave Taylor - Crearea paginilor WEB, Editura Teora 1999,
pg.100-108
2. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i
XML, Editura Printech Bucureti 2004, pg.29-32
3. T.Gugoiu HTML prin exemple, Editura Teora 2000, pg.65-74
4. Sabin Buraga Proiectarea siturilor Web. Design i
funcionalitate, Ediia a II-a, Editura Polirom 2002, pg. 23-30

57

Folosirea imaginilor n limbajul HTML

Unitatea de nvare Nr. 6


FOLOSIREA IMAGINILOR N LIMBAJUL HTML

Obiectivele Unitii de nvare Nr.6

59

6.1 ntelegerea formatelor grafice folosite n WEB

59

6.2 Folosirea imaginilor n cadrul paginilor WEB

69

6.3 Imagini cu arii sensibile (Image Maps)

65

Lucrare de verificare a Unitilor de nvare Nr. 4, 5 i 6

67

Rspunsuri i comentarii la ntrebrile din testele de evaluare

70

Bibliografie

71

58

Folosirea imaginilor n limbajul HTML

Obiectivele Unitii de nvare Nr. 6:


Principalele obiective ale Unitii de nvare Nr. 6 sunt:
Dup parcurgerea acestei Unitii de nvare vei fi capabil:

S identifici diferite formate de imagini suportate de


browsere

S adaugi imagini la o pagin HTML

S specifici modul de aliniere al imaginii n pagin i


al textului din jurul ei

S specifici dimensiunea imaginii

6.1 ntelegerea formatelor grafice folosite n WEB


Limbajul HTML nu impune folosirea unui anumit format de imagine ci
ofer n shimb o modalitate flexibil de a include orice tip de imagine
n pagina HTML. Afiarea unui anumit tip de imagine depinde ns
de tipul browserului, de aceea exist totui un numr limitat de
formate grafice folosite n WEB., i dintre acestea doar dou sunt
populare i foarte des folosite: GIF i JPEG.
GIF

Formatul grafic folosit prima oar n cadrul paginilor WEB i care a


rmas cel mai popular este formatul GIF. Denumirea de GIF
reprezint iniialele expresiei Graphic Interchange Format care n
limba romn se traduce prin Format grafic pentru transfer .
Avantajele formatului grafic GIF sunt urmtoarele:

Este independent de platform. Aceasta nsemn c dac o


imagine este creat pe o main care ruleaz LINUX aceasta
se va vedea la fel pe o main care ruleaz alt sistem de
operare Windows sau Macintosh.
Stocarea datelor se face comprimat ceea ce duce la fiiere de
dimensiuni mici care se pot transfera rapid n reea.
Comprimarea datelor n cazul formatului grafic GIF se face
folosindu-se un algoritm fr pierdere de date. Aceasta
nsemn c dintr-o imagine in format GIF se poate restaura n
orice moment imaginea original necomprimat.

59

Folosirea imaginilor n limbajul HTML

JPEG

Dezavantajul formatului GIF este acela c nu permite folosirea unui


numr mai mare de 256 de culori pentru o imagine. Acest neajuns
este nlturat n cazul formatului JPEG.
Formatul grafic JPEG a fost creat de ctre Joint Photographic
Experts Group care nseamn n limba romn Grupul experilor
fotografi, i este ca i formatul GIF independent de platform. Spre
deosebire ns de GIF acest format suport zeci de mii de culori
pentru a putea reprezenta imagini fotografice ct mai aproape de
realitate. Un alt avantaj i dezavantaj n acelai timp al formatului
JPEG fa de GIF este acela c formatul JPEG folosete un algoritm
cu ajutorul cruia se obine o rat mai bun de compresie a datelor.
Spre exemplu este un lucru obijnuit ca un fiier JPEG s aib
dimensiuni de pn la 7-8 ori mai mici dect un fiier n format GIF
care reprezint aceeai imagine. Am spus dezavantaj n acelai timp
deoarece aceast compresie se face spre deosebire de GIF cu
pierdere de date. Aceasta nseamn c o imagine transformat din
format JPEG n format necomprimat nu va corespunde exact cu
originalul ci vor fi anumite diferene. Aceste diferene ns nu se pot
observa n mod normal cu ochiul liber.
Cum alegem ntre GIF i JPEG? Ei bine, ambele formate sunt
universal suportate de ctre majoritatea browserelor, i prin urmare
criteriul compatibitii nu este unul puternic. Prin urmare vom incerca
s folosim avantajele fiecrui format n parte.

6.2 Folosirea imaginilor n cadrul paginilor WEB


Pentru a introduce imagini ntr-o pagin HTML se folosete directiva
HTML <IMG>.

<IMG>
Funcionalitate:
Introduce o imagine n pagin
Atribute:
SRC
ALT
ALIGN
BORDER
HEIGHT
WIDTH
HSPACE
VSPACE
Directiva de sfrit:
</IMG> este OPTIONAL

60

Folosirea imaginilor n limbajul HTML

Directiva HTML IMG folosete valoarea atributului SRC pentru a


identifica locul de unde va prelua imaginea care se dorete a fi
adugat n pagin. Iat mai jos un exemplu cu cel mai simplu mod
de utilizare al directivei IMG:
<P>
Acesta este poza iepurasului roz:
<IMG SRC="iepuras.gif" ALT="iepuras roz">
</IMG>
</P>
va avea ca rezultat n browser:

Figura 6.1 Exemplu folosire directiva <IMG>


Folosirea atributului ALT nu este obligatorie ns este recomandat
deoarece browserul se poate configura astfel nct s nu ncarce
imaginile din pagin, caz n care n locul imaginii este afiat textul
oferit de atributul ALT. n mod ideal pagina ar trebui construit astfel
nct s fie lizibil chiar dac imaginile nu pot fi ncrcate.
Folosirea directivei <IMG> nu va introduce imaginea pe o linie nou
ci n continuarea textului. Implicit imaginea va fi aliniat astfel nct
marginea inferioar a imaginii s corespund cu marginea inferioar
a textului precum se vede n Figura 6.1. Dac se dorete o altfel de
aliniere vertical a imaginii sau a textului se vor folosi atributele
directivei <IMG> dup cum vom vedea mai jos.
Atributul SRC. Acest atribut este obligatoriu n cazul directivei
<IMG>. Valoarea este un URL i reprezint locul n care se afl
fiierul ce conine imaginea ce se doresete a fi inclus n pagina.
Etichetare
imagine

Atributul ALT. Dac imaginea specificat de ctre atributul SRC nu


poate fi ncrcat din diferite motive: fiier imagine incomplet,
conexiune intrerupt, URL specificat greit sau browserul este
configurat pentru a nu ncarca imaginile, atunci vor fi afiate implicit
n locul imaginii o alt imagine generic care s indice faptul c
imaginea specificat nu a fost ncrcat. Acest lucru nu este
ntotdeauna de dorit deoarece utlizatoul nu ar putea avea nici o
61

Folosirea imaginilor n limbajul HTML

informaie n legtur cu imaginea care nu s-a incrcat. n aceste


cazuri textul specificat de atributul ALT va fi afiat n locul imaginii
generice.
Teste autoevaluare
6.1. Cum se poate face ntr-o pagin HTML pentru ca imaginea
margareta.jpg din directorul curent s fie afiat la nceputul
paginii?

6.2 Cum se poate face ca browserul s afieze cuvntul


margareta n locul imaginii dac aceasta nu a putut fi ncrcat
de ctre browser?
a>
b>
c>
d>

<IMG SRC= Margareta.jpg>margareta


margareta<IMG SRC= margareta.jpg>
<IMG SRC= margareta.jpg ALT= margareta>
<P>margareta<IMG SRC=margareta.jpg></P>

Rspunsurile corecte i comentarii asupra acestora se gsesc la pagina 70.

Atributul ALIGN. Cu ajutorul acestui atribut se poate specifica


modalitatea de aliniere pe orizontal sau pe vertical a unei imagini
fa de textul sau alt imagine vecin.
Alinierea pe
orizontal

Valorile disponibile pentru alinierea pe orizontal sunt :


ALIGN = LEFT va avea ca efect poziionarea imaginii n
stnga paginii, iar textul va ncadra imaginea prin partea
dreapt a acesteia ca n figura 6.2.
ALIGN = RIGHT va avea ca efect poziionarea imaginii n
dreapta paginii, iar textul va ncadra imaginea prin partea
stng a acesteia ca n figura 6.2.
Dac se dorete la un momendat ntreruperea ncadrrii imaginii de
ctre text se folosete directiva <BR> mpreun cu atributul su
CLEAR.
...
<P>
<IMG

SRC="iepuras.gif"
ALT="Bugs Bunny"
ALIGN="left">
Un iepuras ... 9 x 9 x 19 h
<BR CLEAR=LEFT>
...
<IMG SRC="iepuras.gif"
62

Folosirea imaginilor n limbajul HTML

ALT="Bugs Bunny"
ALIGN="RIGHT">
Un iepuras ... 9 x 9 x 19 h
<BR CLEAR=RIGHT>
...
Va avea ca rezultat n browser:

Figura 6.2 Exemplu aliniere orizontal la stanga si la dreapta


Alinierea pe
vertical

Pentru specificarea modului de aliniere pe vertical a imaginii fa de


textul vecin sau fa de alte imagini pe aceeai linie se folosete de
asemenea atributul ALIGN urmtoarele valori fiind disponibile:

ALIGN=TOP partea superioar a imaginii va fi la acelai


nivel cu partea superioar a altei imagini sau cu a celei mai
nalte litere din textul de pe aceeai linie.
ALIGN=MIDLLE mijlocul imaginii va corespunde cu
mijlocul altei imagini sau cu mijlocul textului de pe aceeai
linie.
ALIGN=BOTTOM partea inferioar a imaginii va
corespunde cu partea inforioar a textului de pe aceeai linie.

...
Iepuras sus
<IMG SRC="iepuras.gif"
ALIGN="TOP">. Ce dragut este!
<BR CLEAR="ALL">
Iepuras la mijloc
<IMG SRC="iepuras.gif"
ALIGN="MIDDLE">Ce dragut este!
<BR CLEAR="ALL">
63

Folosirea imaginilor n limbajul HTML

Iepuras jos
<IMG SRC="iepuras.gif"
ALIGN="BOTTOM">Ce dragut este!
...
Va avea ca rezultat n browser:

Figura 6.3 Exemple aliniere vertical.


Teste autoevaluare
6.3 Cum se scrie codul HTML care s afieze o imagine centrat
fr text la stnga i la dreapta ei ?

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 70.

Dimensiunea
imaginilor

64

Atributele HEIGHT i WIDTH n mod normal browserul determin


dimensiunea imaginii i n funcie de acesta rezerv un spaiu
corespunztor pentru imagine n pagin pentru fiecare imagine n

Folosirea imaginilor n limbajul HTML

parte. Totui aceste informaii nu pot fi determinate dect n


momentul n care imaginea a fost complet adus de pa server. Acest
lucru poate face ca timpul necesar pentru afiarea paginii n browser
s creasc. Dac aceste informaii legate de dimensiunile imaginii
sunt specificate prin atributele HEIGHT i WIDTH timpul necesar
pentru ca browserul s afieze pagina va vi mult mai mic (chiar dac
imaginile vor fi afiate n pagin mai trziu, n momentul n care au
fost complet ncrcate).
Valoarea atributelor HEIGHT i WITH poate fi un ntreg pozitiv i
reprezint numrul de pixeli pe vertical respectiv pe diagonal pe
care i ocup imaginea.
Dac valorile acestor atribute nu corespund cu dimensiunile imaginii
browserul va redimensiona imaginea afiat astfel nct s fie
conform cu valorile specificate de atribute.
Redimensionarea imaginilor trebuie fcut cu grij deoarece
specificararea unor valori foarte ndeprtate de valoarea original a
imaginii poate rezulta n afiarea unor imagini distorsionate sau cu o
rezoluie nepotrivit.
Dimensiunea
spatiilor

Atributele HSPACE i VSPACE. Permite definirea spaiilor ntre


imagine i textul sau obiectele vecine. Valoarea acestor atribute
poate fi un ntreg pozitiv i reprezint numrul de pixeli ce va fi lsat
ntre imagine i textul ce o nconjoar la stnga sau dreapta ei
respectiv deasupra sau dedesubtul ei.

6.3 Imagini cu arii sensibile (Image Maps)


Aa cum am vazut n seciunea anterioar imaginile pot fi folosite
pentru hyperlink prin simpla adugare a directivei <IMG> n interiorul
directivei <A>. Dac utilizatorul va selecta oricare din punctele
imaginii respective se va deschide pagina de la URL-ul specificat de
valoarea atributului HREF. HTML ofer n plus o modalitate special
de folosire a imaginilor ca hyperlink permind definirea unor
suprafee n cadrul imaginii care s aib fiecare asociat cte un URL
separat.. Definirea acestor suprafee se face cu ajutorul directivelor
<MAP> i <AREA>.

65

Folosirea imaginilor n limbajul HTML

<MAP>

<AREA>

Funcionalitate:
Funcionalitate:
Definete o hart de
Definete o suprafa
suprafee sensibile
sensibil n cadrul
unei hri
Atribute:
Atribute:
NAME
SHAPE
Directiva de sfrit:
COORDS
HREF
</MAP> este
NOHREF
OBLIGATORIE
Directiva de sfrit:
</AREA> este OPTIONAL
Iat paii pentru definirea suprafeelor sensibile pentru o anume
imagine:

Utilizarea n cadrul directivei IMG a atributelor ISMAP i


USEMAP
<IMG

SRC=imagine.gif
ISMAP
USEMAP=#harta>

Definirea harii specificate ca valoarea a atributului MAP cu


ajutorul directivelor MAP i AREA
<map name="harta">
<area coords="0,25,50,50"
href="link1.html">
<area coords="0,0,25,25"
href="link2.html"
</map>

Rezultatul va fi o imagine care va avea 2 arii sensibile una n partea


stng i una n partea dreapt a imaginii. Dac utilizatorul va
selecta partea stng browserul va ncrca pagina link1.html, dac
se va selecta aria dreapt browserul va ncrca pagina link2.html .
Directiva
MAP

Directiva
AREA
66

Directiva MAP are un singur atribut, NAME, cu ajutorul cruia


aceast hart poate fi identificat i folosit pentru o anumit
imagine. Definirea suprafeelor sensibile pentru fiecare hart n parte
se face folosind o succesiune de directive <AREA> i a atributelor
acesteia dup cum vom vedea mai jos.
Directiva AREA definete fiecare din suprafeele sensibile ale unei
hari. Cu ajutorul atributelor sale se pot defini suprafee cu diferite

Folosirea imaginilor n limbajul HTML

forme i dimensiuni i se pot asocia hyperlinkuri pentru fiecare n


parte.
Atributul COORDS permite definirea limitelor suprafeei, valoarea sa
fiind reprezentat de o serie de numere ntregi separate prin virgul.
Numul i semnificaia acestor valori este n funcie de valoarea
atributului SHAPE.
Atributul SHAPE. Permite definirea formei pentru zona sensibil. Mai
jos sunt prezentate formele ce pot fi specificate de ctre acest atribut
i valoarea corespunztoare i de asemenea este explicat pentru
fiecare n parte cum este interpretat :
RECTANGLE definete o zon dreptunghiular.
Coordonatele se specific sub forma: COORS=x,y,z unde

CIRCLE definete o zon circular


POLYGON definete un poligon neregulat i nchis cu un
numr oareacare de laturi.

Lucrare de verificare a Unitilor de nvare Nr. 4, 5 i 6


1. Creai o list precum cea de mai jos din Figura 4.4 . Lista conine
dou nivele imbricate. La primul nivel avem o list de definiii.
Definiia pentru primul termen este o list neordonat, iar definitia
celui de-al doilea termen este o list ordonat. Termenii listei de
definitie trebuie s fie afiai ngroat.
Predai fiierul HTML n format electronic ca rezultat al rezolvrii
lucrrii de verificare
Pe lng informaiile prezentate n manual se poate utiliza reperul
bibliografic numrul 2 din bibliografia unitii de nvare.
Nr. de puncte 8 (4p - realizarea listei de definitie conform cerinelor
2p realizarea listei neordonate ca definiie pentru primul termen 2p
realizarea listei ordonate ca definiie pentru cel de-al doilea
termen)

67

Folosirea imaginilor n limbajul HTML

Figura 4.4 Lucrarea de verificare

2. Realizai un meniu pentru un site Web de prezentare a unei


firme. Site-ul are urmtoarele pagini: acasa.html, produse.html,
servicii.html i contact.html. n fiecare din acestea trebuie s fie o
legtur la oricare alt pagin a site-ului. ncercai s l facei ct
mai atractiv cu putin!

Predai cele 4 fiiere HTML n format electronic ca rezultat al


rezolvrii lucrrii de verificare.
Nr de puncte 9 (6p definirea corect, n fiecare pagin a
legturilor ctre celelalte pagini html, 3p - pentru aspectul paginii i
ingeniozitate.
Ca ajutor suplimentar utilizati reperele bibliografice 2 din bibliografia
unitii de nvare.
3. Realizati o list HTML neordonat care s aib n locul
marcajelor standard imaginea coninut n fiierul bulina.jpg
Sugestie: Folosii o list de definiie pentru a simula lista neordonat
cerut.
68

Folosirea imaginilor n limbajul HTML

Predai fiierul HTML n format electronic ca rezultat al rezolvrii


lucrrii de verificare
Pe lng informaiile prezentate n manual se poate utiliza reperul
bibliografic numrul 2 i 3 din bibliografia unitii de nvare.
Nr. de puncte 8 (4p - realizarea listei, 4p folosirea imaginii cerute
n locul semnelor predefinite pentru listele neordonate)

69

Folosirea imaginilor n limbajul HTML

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 6.1.
Codul HTML care realizeaz acest lucru este urmtorul:
...
<BODY>
<P >
<IMG SRC="margareta.jpg"> </IMG>
</P>
Directiva IMG este pus imediat dup directiva BODY pentru ca
imaginea s fie afiat la nceputul paginii. Revedei indicaiile din
seciunea 6.2.
ntrebarea 6.2.
Varianta corect de rspuns este c. Pentru aceasta se folosete
atributul ALT pentru a specifica textul nlocuitor ca n exemplul de
mai jos:
<IMG SRC="margareta.jpg"
ALT=margareta> </IMG>
Revedei indicaiile din seciunea 6.2.
ntrebarea 6.3.
Pentru a realiza acest lucru folosim directiva BR mpreun cu
atributul CLEAR pentru a evita nconurarea imaginii cu text i
directiva <P> mpreun cu atributul ALIGN pentru a centra imaginea
n pagin ca n exemplul de mai jos:
<BR CLEAR="ALL">
<P ALIGN=CENTER>
<IMG SRC="margareta.jpg"
ALT=margareta> </IMG>
</P>
Revedei indicaiile din seciunea 6.2.
Indicaii la problemele propuse
Problemele propuse n lucrrile de verificare se fac dup modelele
de exemple prezentate n unitatea de nvare sau dup tipicul
acestora.

70

Folosirea imaginilor n limbajul HTML

Bibliografie
1. Dave Taylor - Crearea paginilor WEB, Editura Teora 1999,
pg.127-169
2. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i
XML, Editura Printech Bucureti 2004, pg.46-47
3. T.Gugoiu HTML prin exemple, Editura Teora 2000, pg.51-59

71

Realizarea tabelelor

Unitatea de nvare Nr. 7


REALIZAREA TABELELOR

72

Obiectivele Unitii de nvare Nr.7

73

7.1 Realizarea unui tabel simplu n limbajul HTML

73

7.2 Definirea proprietilor globale ale unui tabel HTML

75

7.3 Definirea rndurilor unui tabel

78

7.4 Definirea celulelor unui tabel

79

Rspunsuri i comentarii la ntrebrile din testele de evaluare

82

Bibliografie

82

Realizarea tabelelor

Obiectivele Unitii de nvare Nr.7 :

Dup parcurgerea acestei Unitii de nvare vei sti:

Care este structra unui tabel HTML


Care sunt elementele unui tabel HTML
S creezi un tabel HTML
S schimbi proprietile unui tabel

Scopul iniial al tabelelor n limbajul HTML a fost pentru prezentarea


anumitor date organizate n format tabular. Suportul oferit de ctre
HTML pentru tabele s-a dovedit ns foarte eficient la aranjarea n
pagin a diferitelor elemente HTML. Cu ajutorul directivelor oferite de
ctre limbajul HTML este posibil poziionarea a practic oricrui tip
de element HTML la pozitia dorit n pagin.
Componentele Hai s
unui
parte:
tabel

enumerm i s descriem fiecare component a unui tabel n

ROW Se refer la rndul unui tabel


COLUMN Se refer la coloana unui tabel
CELL Se refer la intersecia dintre o linie i o coloan
CAPTION Se refer la un text explicativ cu privire la
coninutul tabelului care apare deasupra tabelului
HEADERS Se refer la primul rnd al tabelului sau antetul
tabelului
BORDERS Se refer la liniile de delimitare care nconjoar
o celul a tabelului sau ntreg tabelul.

7.1 Realizarea unui tabel simplu n limbajul HTML


n limbajul HTML, un tabel simplu se poate defini cu ajutorul directivei
<TABLE>; cu ajutorul directivei <TR> tabelul este mprit n linii, iar
cu ajutorul directivei <TD> fiecare linie este mprit n celule.
Orice tabel n limbajul HTML va ncepe ntotdeauna cu urmtoarea
directiv pereche cu rol de container:
<TABLE>
</TABLE>

73

Realizarea tabelelor

Pai

Dup directiva <TABLE> urmtorii pai sunt necesari pentru


construirea tabelului:
Pasul 1. Adugarea unui rnd. Se face folosind directiva pereche
<TR> </TR> n intoriorul elementului <TABLE>
<TABLE>
<TR>
</TR>
</TABLE>
Pasul 2. mprirea rndului ntr-un numr de coloane Se face
folosind directiva pereche <TD></TD> n interiorul unui element
<TR>. Fiecare combinaie <TD></TD> reprezint o coloan/celul a
tabelului. Spre exemplu dac tabelul are 3 coloane vom scrie:
<TABLE>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
Pasul 3. Introducerea datelor n fiecare celul a tabelului. n fiecare
celul a tabelului definit mai sus se introduce textul sau elementele
HTML pe care vrem s le afim n tabel, precum n exemplul de mai
jos:
<TABLE>
<TR>
<TD>Iepure</TD>
<TD>25 Kg</TD>
<TD><IMG SRC=iepuras.gif></TD>
</TR>
</TABLE>
ntr-o celul a unui tabel se poate pune aproape orice element
HTML: text formatat, imagini, liste, hyperlink etc. n exemplul de mai
sus ultima coloan conine imagine.
Pasul 4. Repetarea pailor 1,2, 3 pn ce tabelul este complet

74

Realizarea tabelelor

Test de autoevaluare
7.1 Introducei un nou rnd n tabelul de mai sus

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 82.

7.2 Definirea proprietilor globale ale unui tabel HTML


Directiva HTML <TABLE> semnaleaz browserului faptul c
urmeaz definiia unui tabel. La ntlnirea acesteia browserul va
trece automat la o linie nou unde va poziiona tabelul definit urmnd
ca la ntlnirea directivei de sfrit </TABLE> s sar din nou la o
linie nou unde va afia textul ce urmeaz tabelului.
Caracteristicile globale ale tabelului precum: modul de aliniere,
dimensiuni, culori pot fi specificate folosind atributele acestei
directive dup cum vom vedea mai jos.

<TABLE>
Funcionalitate:
Definete un tabel
Atribute:
ALIGN
BORDER
BGCOLOR
WIDTH
HEIGHT
Directiva de sfrit:
</TABLE> este OBLIGATORIE
Atributul
ALIGN

Atributul ALIGN. Specific unde anume va fi poziionat tabelul n


pagin: aliniat la stnga (LEFT), la dreapta (RIGHT) sau pe centru
(CENTER). Dac acest atribut nu este specificat tabelul va fi aliniat
la stnga.

Atributul
VALIGN

Atributul VALIGN. Specific modul de aliniere al textului din cadrul


celulelor tabelului. Valorile posibile pentru atribut sunt TOP pentru
75

Realizarea tabelelor

aliniere la partea superioar a celulei, BOTTOM aliniere la partea


inferioar a celulei i CENTER aliniere la centru celulei.
Atributul
BORDER

Atributul
CELLSPACING

Atributul BORDER. Specific dimensiunea liniilor de delimitare care


ncadreaza celulele tabelului. Valoarea atributului este un intreg ntre
0 i 15 i reprezit grosimea n pixeli a liniei. Specificarea valorii 0
va face ca aceste linii de delimitare s fie invizibile n browser. Dac
atributul nu este specificat dimensiunea implicit este de 1 pixel.
Atributul CELLSPACING. Specific spaiul dintre dou celule
adiacente ale tabelului. Dac nu este specificat valoarea implicit a
acestui atribut este de 2 pixeli.

Atributul
Atributul CELLPADDING Specific spaiul minim n numr de pixeli
CELLPADDING dintre marginea unei celule i coninutul su. Implicit acest atribut
are valoarea de un pixel.
Toate atributele de mai sus se pot folosi n acelai timp pentru a
obine aspectul dorit pentru tabel.
Iat mai jos un exemplu de folosirea a acestor atribute. S-a folosit o
valoare intenionat exagerat pentru a identifica n figura rezultat
rolul fiecruia n parte. De asemenea n aceeai pagin a fost definit
un tabel pentru care aceste atribute nu au fost specificate i deci
pentru care browserul a folosit la afiarea lui valorile implicite.

76

Realizarea tabelelor

...
<TABLE BORDER="1">
<TR>
<TD>celula11</TD>
<TD>celula12</TD>
</TR>
<TR>
<TD>celula21</TD>
<TD>celula22</TD>
</TR>
</TABLE>
...
<TABLE
BORDER="15"
CELLPADDING="15"
CELLSPACING="15"
>
<TR>
<TD>celula11</TD>
<TD>celula12</TD>
</TR>
<TR>
<TD>celula21</TD>
<TD>celula22</TD>
</TR>
</TABLE>
...

BORDER

CELLPADDING
CELLSPACING
Figura 7.1 Exemplu folosire atribute pentru directiva TABLE
Atributele WIDTH i HEIGHT. n mod implicit browserul va
dimensiona tabelul n funcie de dimensiunea ferestrei browserului i
n funcie de dimensiunea coninutului tabelului. Dac este necesar
se poate specifica o dimensiune explicit a tabelului cu ajutorul
atributului WIDTH. Aceast dimensiune poate fi fie o valoare
absolut, adic un ntreg reprezentnd numrul de pixeli ocupai de
tabel pe orizontal, fie o valoare procentual caz n care browserul
va afia tabelul ocupnd procentul specificat din dimensiunea
ferestrei browserului.

77

Realizarea tabelelor

Spre exemplu dac se vrea ca dimensiunea tabelului s fie de 100


pixeli vom scrie:
<TABLE WIDTH=100>
sau dac dorim ca dimensiunea tabelului s fie jumtate din
dimensiunea browserului vom scrie:
<TABLE WIDTH=50%>
Dac dimensiunea tabelului este mai mare dect valoarea
specificat de ctre atributul WIDTH browserul ca ignora acest
atribut i va dimensiona tabelul.
Similar atributul HEIGHT poate fi folosit pentru a specifica nlimea
tabelului. Browserul va afia tabelul astfel nct nlimea lui s nu fie
mai mic dect valoarea acestui atribut.
Atributul
NOWRAP

Atributul NOWRAP. Textul dintr-o celul a unui tabel este rupt i


se trece la linie nou3 n momentul n care dimensiune acestuia este
mai mare dect lungimea celulei. Dac este specificat atributul
NOWRAP atunci browserul va dimensiona celulele astfel nct s nu
fie nevoie ca textul coninut n nici una din ele sa nu fie rupt. Dac
se dorete trecerea la o linie nou n cadrul unei celule se poate
folosi una din directivele HTML <BR> sau <P>.
Test de autoevaluare
7.2 Cum se definete un tabel care s aib laimea 80% din
fereastra browserului i care s fie afiat centrat n pagin?

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 82.

7.3 Definirea rndurilor unui tabel


Pentru a insera un nou rnd ntr-un tabel se folosete directiva <TR>
a crui denumire vine de la Table Row.4

3
4

Operaiunea se numete n limba englez WRAP


Rnd de tabel

78

Realizarea tabelelor

<TR >
Funcionalitate:

Definete un rnd ntr-un tabel

Atribute:
ALIGN
VALIGN
BGCOLOR
NOWRAP
Directiva de sfrit:

</TR> este opional


Atributul
ALIGN

Atributul ALIGN . Permite configurarea modului de aliniere a textului


pentru toate celule dintr-un rnd. Valoarea acestuia nu afecteaz
ns modul de aliniere pentru celule din alt rnd dect cel curent.
Valorile posibile sunt LEFT pentru stnga, RIGHT pentru dreapta
i CENTER pentru aliniere la centru.
Restul atributelor au aceeai efect ca a atributelor directivei TABLE
despre care tocmai am discutat.

7.4 Definirea celulelor unui tabel


Directiva <TD> este folosit n cadrul directivei <TR> pentru a defini
o celul a tabelului i coninutul acesteia. Exist cazuri n care ntr-un
tabel primul rnd este mai special deoarece conine informaii despre
tipul datelor coninute n tabel Acest rnd poart denumirea de antet.
n HTML acest rnd se poate defini cu ajutorul directivei <TH>
Cele dou directive acioneaz asemntor i au aceleai atribute
diferena ntre ele fiind faptul c n cazul directivei <TH> textul este
afiat bold i centrat (dac nu este specificat altfel) iar n cazul <TD>
textul este afiat aliniat la stnga (dac nu este specificat altfel);

79

Realizarea tabelelor

<TD > sau <TH>


Funcionalitate:
Definete o celul a unui tabel
Atribute:
ALIGN
VALIGN
COLSPAN
ROWSPAN
WIDTH
HEIGHT
BGCOLOR
BACKGROUND
Directiva de sfrit:
</TD> respectiv </TH> sunt
opionale

Atributul
COLSPAN

Atributul COLSPAN este folosit pentru a unui celulele nvecinate ale


unui rnd. Valoarea acestui atribut indic numrul de celule de pe
rndul curent care vor fi unite astfel nct s formeze o singur
celul.
Spre exemplu dac vrei ca pe primul rnd ntr-un tabel cu 4 coloane
s fie titlul tabelului care s ocupe toat lungimea tabelului i nu
numai o celul se poate folosi atribut COLSPAN att pentru <TH>
ct si pentru <TD> astfel:

<TABEL>
<TR>
<TH COLSPAN="4">
Titlul principal
</TH>
</TR>
<TR>
<TD COLSPAN=4>
Subtitlul tabelului
</TD>
</TR>
<TR>
<TD>Col1</TD>
<TD>Col2</TD>
<TD>Col3</TD>
<TD>Col4</TD>
</TR>
</TABEL>

Rezultatul n browser va fi de
forma:

Figura 7.3 Exemplu utilizare COLSPAN


80

Realizarea tabelelor

Atributul
ROWSPAN

Atributul ROWSPAN este folosit pentru a unii mai multe celule


nvecinate de pe aceeai coloan. Se folosete similar cu atributul
COLSPAN. Prin urmare dac dorim s extindem o celul pe mai
multe rnduri vom scrie:
...
<TR>
<TD ROWSPAN=2>
Celula12+21</TD>
<TD>Celula12<TD>
</TR>
<TR>
<TD>Celula22<>
</TR>
...

Si va avea ca rezultat n
browser:

Figura 7.4 Exemplu utilizare ROWSPAN


O celul se poate extinde pe mai multe celule nvecinate de pe
acelai rnd i n acelai timp pe mai multe celule nvecinate de pe
mai multe rnduri. Acest efect se obine combinnd cele dou
atribute n cadrul aceleiai directive <TD> sau <TH>.

81

Realizarea tabelelor

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 7.1.
Codul HTML pentru tabelul cu un nou rnd adugat va arta ca cel
de mai jos
<TABLE>
<TR>
<TD>Iepure</TD>
<TD>25 Kg</TD>
<TD><IMG SRC=iepuras.gif></TD>
</TR>
<TR>
<TD>Pisica</TD>
<TD>10 Kg</TD>
<TD><IMG SRC=pisica.gif></TD>
</TR>
</TABLE>
Pentru nelmuriri revedei seciunea 7.1.
ntrebarea 7.2.
Pentru a afia tabelul cerut se pot folosi atributele directivei TABLE
ca n exemplul de mai jos:
<TABLE ALIGN=CENTER WIDTH=80%>
A se revedea seciunea 7.2.
Indicaii la problemele propuse
Problemele propuse n lucrrile de verificare se fac dup modelele
de exemple prezentate n unitatea de nvare sau dup tipicul
acestora.

Bibliografie
1. Dave Taylor - Crearea paginilor WEB, Editura Teora 1999,
pg.171-198
2. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i
XML, Editura Printech Bucureti 2004, pg.32-36
3. T.Gugoiu HTML prin exemple, Editura Teora 2000, pg.39-50

82

Formulare in pagina WEB

Unitatea de nvare Nr. 8


FORMULARE N PAGINA WEB
Obiectivele Unitii de nvare Nr.8

84

8.1 Ce sunt formularele?

84

8.2 Introducerea unui formular n pagina WEB

86

8.3 Elementele HTML folosite n formulare

88

8.4 Alte tipuri de elemente folosite n formulare WEB

90

Rspunsuri i comentarii la ntrebrile din testele de evaluare

93

Bibliografie

93

83

Formulare in pagina WEB

Obiectivele Unitii de nvare Nr. 8:


Dup parcurgerea acestei Unitii de nvare vei fi capabili:

S creeai un formular
S cunoatei elementele unui formular
S adaugai elemente la un formular
S specificai o aciune pentru un formular
S nelegei ce nseamn CGI

8.1 Ce sunt formularele?


Formularele sunt o metod de colectare a datelor de la utilizator cu
scopul prelucrrii lor sau a stocrii ntr-o baz de date pentru o
prelucrare viitoare.
Formularele n WEB sunt compuse din obiecte ce permit
introducerea de text, selectarea unor opiuni, liste de selecie, hari
de imagine sau butoane. Vom discuta despre fiecare n parte n
cadrul acestei uniti de nvare.
S vedem care este fluxul de operaii i de date pentru o pagin
WEB care conine un formular (Vezi figura 8.1):
Fluxul de
operaii/date

84

1.
2.
3.
4.
5.

Utilizatorul va introduce informaii n cadrul formularului


Utilizatorul va apsa un buton special n cadrul formularului
Formularul va fi trimis la server
Serverul va primi informaia i o va prelucra
Serverul va trimite napoi la browser o pagin de rspuns ce
poate conine un rezultat al prelucrrii datelor trimise.
Prelucrarea informaiei i alctuirea rspunsului pe partea de server
este o problem relativ complex i nu vom discuta despre ea n
cadrul acestui modul. Aceast prelucrare se face folosindu-se un
program ce poart denumirea de CGI. CGI reprezit iniialele de la
Common Gateway Interface care se poate traduce n limba romn
prin interfa comun pentru schimb de date. Un program sau script
CGI poate fi un program scris n orice limbaj de programare. Cele
mai folosite limbaje sunt: C/C++, Perl, Python, sau anumite limbaje
specializate pentru prelucrarea informaiilor WEB cum ar fi PHP,
ASP, JSP sau altele.

Formulare in pagina WEB

1. Completeaza
formular

Utilizator

2. Apasa buton
TRIMITE

3. Trimite formular

Browser

5. Trimite raspuns
WEB server

4. Prelucrare
informaii
Figura 8.1 Prelucrare formular la server

CGI
n scenariu descris mai sus informaia din formular este trimis la un
server spre a fi prelucrat, exist ns i posibilitatea ca aceast
informaie s fie prelucrat de ctre browser. Prelucrarea se face n
acest caz cu ajutorul unui limbaj de script pe partea de client despre
care vei nva n unitatea de nvare numrul 9. Fluxul operaiilor
pentru acest caz este prezentat n figura 8.2.
3. Prelucrare
informatii

1. Completeaza
formular

Utilizator

2. Apasa buton
TRIMITE

Browser

Java Script
VB Script

Figura 8.2 Formular prelucrat la client


Test de autoevaluare
8.1 Ce se ntmpl cu datele introduse de ctre utilizator ntr-un
formular?

Rspunsul se va da n spaiul gol de mai sus. Rspunsurile se gsesc la pagina


93.

85

Formulare in pagina WEB

8.2 Introducerea unui formular n pagina WEB


Pentru a introduce un formular ntr-o pagin WEB se folosete
directiva pereche <FORM></FORM>. Rolul acestei directive este de
a delimita formularul i de a defini cu ajutorul atributelor sale modul i
de ctre cine vor fi prelucrate informaiile introduse de ctre utilizator.

<FORM>
Funcionalitate:
Definete un formular
Atribute:
ACTION
METHOD
NAME
TARGET
Directiva de sfrit:
</FORM> - OBLIGATORIE

Toate elementele unui formular trebuiesc incluse n cadrul unui


element de tip <FORM>.
Elementele unui formular vor fi afiate n fereastra browserului
chiar dac nu sunt incluse ntr-un formular ns n acest caz
informaiile introduse NU pot fi prelucrate.
Un formular NU poate fi definit n interiorul altui formular
O pagin WEB poate conine mai multe formulare n acelai
timp.

n figura de mai jos (Figura 8.3) avem un formular simplu aa cum


este afiat de ctre browser. Vom nva n aceast seciune cum se
poate realiza un astfel de formular i chiar altele mai complexe:

Figura 8.3 Exemplu simpu formular

86

Formulare in pagina WEB

Atributul
ACTION

Atributul ACTION. Serverul de WEB va alege scriptul CGI care va


prelucra informaia din formular n funcie de valoarea acestui atribut.

Atributul
METHOD

Atributul METHOD se refer la modul n care valorile elementelor din


formular vor fi transmise la browser. Exist dou metode:

POST Aceast metod are 2 etape de transmitere a


informaiilor. Prima etap const n stabilirea unei conexiuni
cu URL-ul specificat de ctre atributul ACTION. Odat stabilit
conexiunea a doua etap const n transmiterea informaiilor
din formular la server
GET informaiile din formular sunt adugate la URL-ul
specificat de ctre atributul ACTION. Scriptul CGI va prelua
aceste informaii din interiorul URL-ului.

Cnd se folosete metoda GET i cnd metoda POST? Iat cteva


reguli:

Dac este important viteza de transmisie a informaiilor


atunci va fi folosit metoda GET
n cazul metodei GET preluarea informaiilor de ctre aplicaia
server de prelucrare se face mai uor
Dac securitatea este o problem atunci este de preferat
folosirea metodei POST deoarece n cazul metodei GET
informaiile pot fi citite din URL de ctre persoane
neautorizate.

n exemplul de mai jos definim un formular care va transmite


informaiile la URL-ul http://www.despremine.ro folosind metoda
GET
<FORM ACTION=http://www.despremine.ro
METHOD=GET
>
...
</FORM>
Atributul
TARGET

Atributul TARGET Cu ajutorul acestui atribut se poate redireciona


rezultatul prelucrrii formularului ntr-o alt fereastr de browser.
Test de autoevaluare
8.2 Exist mai multe metode de transmitere a datelor dintr-un
formular la server? Dac rspunsul este DA care este cea mai
nesigur metod?

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 93.

87

Formulare in pagina WEB

8.3 Elementele HTML folosite n formulare


Elementele unui formular se introduc folosind directiva HTML
<INPUT>. Tipul cmpului din formular i proprietile acestuia sunt
specificate cu ajutorul atributelor directivei dup cum vom vedea mai
jos.

<INPUT>
Funcionalitate:
Definiete un cmp ntr-un
formular
Atribute:
TYPE
NAME
ALIGN
MAXLENGTH
SIZE
CHECKED
Directiva de sfrit:
</INPUT> este opional
Cmpul
TEXTBOX

TEXTBOX sunt cmpuri de tip text care permit utilizatorului


introducerea unui text pe un singur rnd. Este util n colectarea
informaiilor de tip nume, adres, dat, telefon, e-mail i multe altele
<INPUT TYPE=TEXTBOX>

Browserul va afia:
Cmpurile TEXTBOX folosesc urmtoarele atribute:
NAME: Numele variabilei ce conine textul introdus de utilizator
ce va fi trimis ctre scriptul CGI
SIZE specific lungimea vizibil a cmpului text. Dimensiunea
implicit, n cazul n care acest cmp nu este specificat este
20
VALUE textul implicit ce va fi afiat n acest cmp atunci cnd
acesta va fi prima oar afiat de ctre browser.
MAXLENGTH specific numrul maxim de caractere pe care le
poate accepta cmpul.
Cmpul
PASSWORD

PASSWORD Sunt cmpuri folosite pentru introducerea de parole.


Textul introdus de ctre utilizator nu va fi vizibil n interiorul acestui
cmp. Pentru acest cmp se pot folosi aceleai atribute cu aceeai
semnificaie ca pentru cmpul Textbox
<INPUT TYPE=PASSWORD>

88

Formulare in pagina WEB

Browserul va afia:
Se observ c pentru fiecare caracter introdus de utilizator se
afieaz un caracter sau n loc. Aceasta cu scopul de a proteja
informaia introdus n acest cmp de alte persoane neautorizate
care vd ecranul utilizatorului n timp ce acesta introduce parola.
Cmpul
CHECKBOX

CHECKBOX Este un cmp ce poate avea dou stri Selectat


CHECK sau Neselectat. Se folosete atunci cnd este necesar
obinerea unei informaii de tip adevrat/fals da/nu de la utilizator
<INPUT TYPE=CHECKBOX>
Browserul va afia:

- neselectat
- selectat

Cmpurile CHECKBOX folosesc urmtoarele atribute:

Cmpul
RADIOBUTTON

CHECKED dac acest atribut este prezent atunci la


ncrcarea paginii acest cmp va fi selectat implicit
NAME numele variabilei cu valoarea corespunztoare
acestui cmp ce va fi trimis la scriptul CGI.

RADIOBUTTON Permite utilizatorului s selecteze la un moment dat


doar o singur oiune dintr-un grup de opiuni disponibile. Dac un
grup de cmpuri radiobutton au celai nume numai unul dintre ele va
putea fi selectat la un moment dat restul fiind automat deselectate.

...
<INPUT TYPE="RADIO" NAME="RADIO1" CHECKED>
...
<INPUT TYPE="RADIO" NAME="RADIO1">
...
Browserul va afia:
Cmpurile CHECKBOX folosesc urmtoarele atribute:

CHECKED dac acest atribut este prezent atunci acest cmp


va fi selectat implicit la ncrcarea pagii.
NAME specific numele variabilei care va fi transmis la CGI.
Se folosete aceeai valoare pentru butoanele din acelai
grup.

89

Formulare in pagina WEB

Butonul
TRIMITE

BUTTON SUBMIT Creeaz un buton care odat apsat de ctre


utilizator va declana trimiterea informaiei din formular la server
pentru a fi prelucrat
<INPUT TYPE="SUBMIT" VALUE="Trimite">

Browserul va afia:
Butonul SUBMIT folosete urmtoarele atribute:

Butonul
ANULEAZ

VALUE Definete textul care va fi afiat pe buton


NAME specific numele variabilei care va fi transmis la CGI.

BUTTON RESET Creeaz un buton care odat apsat de ctre


utilizator va sterge informaia introdus pn la momentul respectiv
n formular de ctre utilizator. Nici un fel de informaie nu va fi trimis
la server.
Dup apsarea acestui buton formularul va fi afiat ca i cum ar fi
proaspt rencrcat. Utilizatorul poate rencepe introducerea de date
n formular imediat dup apsarea acestuia.
<INPUT TYPE="SUBMIT" VALUE="Anuleaz">

Browserul va afia:
Butonul RESET folosete urmtorul atribut:

VALUE pentru a defini textul care va fi afiat n browser pe


acest buton

8.4 Alte tipuri de elemente folosite n formulare WEB


Liste de
selecie

Cmpurile de tip RADIOBUTTON i CHECKBOX ofer posibilitatae


utilizatorului s aleag o anumit opiune dintr-un set. Au ns un
mic dezavantaj: n cazul n care exist multe opiuni posibile spaiul
fizic necesar pentru prezentarea tuturor acestor opiuni este foarte
mare.
Pentru aceste cazuri exist elementele de tip list de selecie care se
creeaz n cadrul formularului cu ajutorul directivelor SELECT i
OPTION.

90

Formulare in pagina WEB

<SELECT>

<OPTION>

Funcionalitate:
Funcionalitate:

Defininete o list

Defininete o
de selecie ntr-un
opiune ntr-o list de
formular
selecie
Atribute:
Atribute:
NAME
SELECTED
SIZE
VALUE
MULTIPLE
Directiva de sfrit:
Directiva de sfrit:
</OPTION> Obligatorie
</SELECT> Obligatorie
Exist dou tipuri de liste de selecie:
1. Dropdown List care iniial afieaz un singur element pe un
singur rnd iar n momentul n care utilizatorul selecteaz
aceast list se va extinde afind toate opiunile disponibile.
Dac valoarea atributului SIZE este 1 atunci lista de opiuni va
fi afiat n aceast form.

Neextins:

i extins:

Figura 8. 4 Exemplu list selecie de tip Dropdown


2. List Box Elementele listei sunt afiate ntr-o zon
rectangular unele sub altele. Dimensiunea vizibil a acestei
zone se definete cu ajutorul atributului SIZE. Lista de selecie
va fi afiat n aceast form dac valoarea atributului SIZE
este diferit de 1

Figura 8.5 Exemplu list de selecie de tip Listbox


Paii pentru realizarea unei liste de selecie:
91

Formulare in pagina WEB

1.
2.

3.

Introducerea
directivei
pereche
<SELECT>
</SELECT>
Stabilirea cu ajutorul atributului SIZE a tipului de list
de selecie
i. SIZE =1 Dropdown List
ii. SIZE > 1 ListBox
Adugarea elementelor la list cu ajutorul directivei
<OPTION>. Un element din list este introdus de o
directiv <OPTION> ca n exemplul de mai jos:

<SELECT SIZE="1" MULTIPLE>


<OPTION>Margareta</OPTION>
<OPTION SELECTED>Trandafir</OPTION>
<OPTION >Garoafa</OPTION>
...
</SELECT>

92

Atributul
MULTIPLE

Atributul MULTIPLE al directivei <SELECT> seteaz modul de


selecie multipl permind selectarea mai multor elemente din list
odat. In mod implicit nu se poate selecta dect un singur element
din list la un moment dat.

Atributul
SELECTED

Atributul SELECTED al directivei <OPTION> definete care din


elementele listei este setat implicit la ncrcarea paginii.

Formulare in pagina WEB

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 8.1.
La apsarea butonului Trimite (submit) datele vor fi trimise spre a fi
prelucrate n funcie de modul n care a fost specificat, fie ctre un
server fie ctre un script care ruleaz n browser. Pentru nelmuriri
revedei seciunea 8.1.

ntrebarea 8.2.
Exist dou metode de transmitere a datelor dintr-un formular ctre
server: GET i POST. Cea mai nesigurte metoda este GET
deoarece aceasta trimite datele din formular ca parte din URL care
poate fi vizualizat de ctre utilizatori neautorizai. Consultai
seciunea 8.2.

Indicaii la problemele propuse


Problemele propuse n lucrrile de verificare se fac dup modelele
de exemple prezentate n unitatea de nvare sau dup tipicul
acestora.

Bibliografie
1. Dave Taylor - Crearea paginilor WEB, Editura Teora 1999,
pg.253-277
2. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i
XML, Editura Printech Bucureti 2004, pg.38-46
3. T.Gugoiu HTML prin exemple, Editura Teora 2000, pg.82-95

93

Script Javascript

Unitatea de nvare Nr. 9


SCRIPT, JAVASCRIPT
Obiectivele Unitii de nvare Nr.9

95

9.1 Ce este JavaScript?

95

9.2 Inserarea unui JavaScript ntr-un document HTML

95

9.3 Cum i cnd se execut un script ntr-o pagin WEB

97

9.4 Atribute de tip Event Handler

99

Lucrare de verificare a Unitilor de nvare Nr. 7, 8 i 9

100

Rspunsuri i comentarii la ntrebrile din testele de evaluare

102

Bibliografie

102

94

Script Javascript

Obiectivele Unitii de nvare Nr. 9:


Dup parcurgerea acestei Unitii de nvare vei stii:

Ce este un script pe partea de client


Ce este JavaScript
Ce este un atribut Event Handler
S foloseti un scrip ntr-o pagin WEB

9.1 Ce este JavaScript?


JavaScript a fost inventat pentru a aduga paginilor WEB
capabilitatea de a prelucra informaii introduse de utilizator sau de a
executa operaii fr a fi nevoie de intervenia sau ajutorul serverului
de WEB.
Iat cteva exemple practice de ntrebuinare a JavaScript ntr-o
pagin WEB:

Animaii
Prelucrarea unor informaii introduse de utilizator fr a fi
nevoie de trimiterea datelor la server pentru a fi prelucrate de
un CGI
Realizarea de meniuri dinamice n pagina WEB.

Spre deosebire de limbajul Java care este scris exclusiv pentru


programatori, JavaScript este un limbaj simplu scris cu scopul de a fi
uor de asimilat i de folosit de ctre persoane care nu au experien
anterioar n programare.

9.2 Inserarea unui JavaScript ntr-un document HTML


O aplicaie JavaScript poate fi adugat ntr-un document HTML
utiliznd directiva pereche <SCRIPT>. </SCRIPT>. Se pot include
oricte directive <SCRIPT> ntr-o pagin WEB n oricare din
seciunile documentului <HEAD> sau <BODY>.
Singura restricie ar fi c n interiorul acestei directive nu se pot
introduce alte directive HTML. Introducerea de directive HTML aici va
fi semnalat ca eroare de ctre browser n momentul n care va afia
pagina.

95

Script Javascript

<HEAD>
...
<SCRIPT LANGUAGE=JavaScript>
Aici intr scriptul tu
</SCRIPT>
...
</HEAD>
<BODY>
...
<SCRIPT LANGUAGE=JavaScript>
Aici intr scriptul tu
</SCRIPT>
...
</BODY>
Exemplul 9.1 Inserare script n document HTML
Browserele care nu suport JavaScript vor trata scriptul din interiorul
acestei directive ca pe un text normal i prin urmare l va afia n
pagin. Acest lucru nu este de dorit adesea. Pentru a nu ajunge ntro astfel de situaie se recomand ca scriptul din interiorul acestei
directive s fie inclus ntr-un comentariu HTML, ca n exemplul de
mai jos:
<SCRIPT LANGUAGE=JavaScript>
<!
Aici intr scriptul tu
-->
</SCRIPT>

<SCRIPT>
Funcionalitate:
Insereaz
un
script
documentul HTML
Atribute:
LANGUAGE
SRC
TYPE
Directiva de sfrit:
</SCRIPT> OBLIGATORIE

Atributele LANGUAGE i TYPE JavaScript sunt unele dintre cele


Atributele mai populare limbaje de script folosite n WEB, ns exist si altele
LANGUAGE precum VBScript. Rolul acestor atribute este de a specifica
Si TYPE
browserului ce tip i ce versiune de script este inclus n interiorul
directivei.
96

Script Javascript

Este de ajuns folosirea fie a atributului LANGUAGE, fie a atributului


TYPE. NU este nevoie a fi folosite ambele n acelai timp.
Cele mai utilizate valori pentru atributul LANGUAGE sunt
JavaScript i VBScript. Acelai lucru se poate specifica utiliznd
valoarile text/javascript respectiv text/vbscript pentru atributul
TYPE.
Atributul
SRC

Atributul SRC. Pentru cazurile n care un anumit script are


dimensiuni foarte mari sau este folosit de ctre mai multe pagini
WEB acesta poate fi scris ntr-un fiier separat. Includerea acestor
scripturi pentru a putea fi referite n pagina HTML curent se face
folosind atributul SRC.
Valoarea atributului este URL-ul la care se gsete fiierul ce conine
scriptul. Prin urmare pentru a include un script definit n alt fiier vom
scrie:
<SCRIPT LANGUAGE=JavaScript
SRC=scripts/scriptulmeu.js>
Test de autoevaluare
9.1 De ce este recomandat plasarea codului unui script n interiorul
unui comentariu HTML?

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 102.

9.3 Cum i cnd se execut un script ntr-o pagin WEB


Scripturile se pot executa fie la ncrcarea paginii, dac scriptul este
definit n seciunea <BODY> fie la apariia unui eveniment care are
asociat un script.
Una din cele mai importante faciliti oferite de JavaScript este
posibilitatea de a detecta anumite evenimente care au loc n pagin
i de a reaciona la acestea.
Exemple de astfel de evenimente pot fi: trecerea cu cursorul mouseului peste un anumit obiect (hyperlink, imagine, buton etc ) ,
ncrcarea paginii, descrcarea paginii, apsarea unei taste etc.
Majoritatea directivelor pot fi configurate s rspund la astfel de
evenimente prin executarea unui script JavaScript la producerea
acestuia.
97

Script Javascript

Hai sa vedem ce scriem pentru ca o imagine s declaneze execuia


unui script JavaScript atunci cnd utilizatorul trece cu cursorul
mouse-ului pe deasupra imaginii:
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
function mesajIepuras()
{
alert(Salut! Sunt iepurasul pinki!)
}
</SCRIPT>
</HEAD>
<BODY>
...
<IMG SRC="iepuras.gif"
ALT="Bugs Bunny"
onMouseOver="mesajIepuras();">
...
n browser la ncrcarea paginii va fi ncrcat imaginea iar n
momentul n care cursorul mouse-ului va trece peste imagine va fi
afiat o fereastr cu mesaj ca n figura de mai jos:

Figura 9.1 Exemplu declanare execuie script


De ce a aprut mesajul? Deoarece la definirea directivei IMG mai
sus am adugat atributul onMouseOver care are ca valoare numele
unei funcii JavaScript.
Asemntor pentru fiecare tip de eveniment exist un atribut asociat.
Dac unul din aceste atribute este definit n cadrul directivei HTML,
iar evenimentul asociat are loc la un anumit moment dat atunci se va
executa funcia JavaScript definit de valoarea atributului.

98

Script Javascript

Atribute
Event
Handler

Acest tip de atribute se numesc Atribute Event Handler. n limba


romn aceasta se poate traduce prin atribute pentru procesarea
evenimentelor. Pentru majoriatea directivelor HTML se pot defini
astfel de atribute asociind astfel un script care s fie executat la
apariia evenimentului. Exist doar cteva execepii de directive care
nu suport astfel de atribute, acestea sunt: <HEAD>, <BODY>,
<BASEFONT>, <FONT>, <BR>, <HTML>, <SCRIPT>, <TITLE>,
<APPLET>, <SCRIPT> i <FRAME>
Execuia scriptului declanat poate consta n simpla afiare a unui
mesaj ca mai sus sau poate fi o prelucrare complex de date
introduse de ctre utilizator.

Test de autoevaluare
9.2 Cnd se execut un script JavaScript ntr-o pagin WEB?
a>
b>
c>
d>

La incarcarea paginii
La aparitia unui eveniment
la cererea vizitatorului paginii WEB
la o anumita ora stabilita de catre vizitatorul paginii
WEB

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 102.

9.4 Atribute de tip Event Handler


Mai jos vom enumera cele mai utilizate atribute Event Handler
suportate de ctre directivele HTML, nsoite de o scurt explicaie
pentru fiecare n parte. Pentru o list complet a acestor atribute
consult una din lucrrile din bibliografia acestei Unitii de nvare.
Unele evenimente apar mai rar i nu pot fi asociate dect anumitor
directive. Pentru acestea vom enumera directivele care le suporat.
Directive
suportate

onClick Evenimentul apare atunci cnd utilizatorul execut un


click de mouse pe elementul respectiv. Este suportat
de majoritatea directivelor.
onDblClick Evenimentul apare atunci cnd utilizatorul
execut un dublu click de mouse pe elementul
respectiv. Este suportat de majoritatea directivelor.
onMouseOver Evenimentul apare atunci cnd utilizatorul
trece cu cursorul mouseului pe deasupra elementului.
Este suportat de majoritatea directivelor.
onSubmit Evenimentul apare atunci cnd exist un formular
n pagin n momentul n care utilizatorul apas un
buton de tip submit (Trimite). Directivele care
suport acest atribut sunt <FORM> i <BODY>.
99

Script Javascript

onReset Evenimentul apare atunci cnd exist un formular n


pagin n momentul n care utilizatorul apas un buton
de tip reset (Anuleaz). Directivele care suport
acest atribut sunt <FORM> i <INPUT>.
onKeyPress Evenimentul apare atunci cnd utilizatorul apas
o tast. Este suportat de majoritatea directivelor.

Test de autoevaluare
9.3 Ce rol au atributele Event Handler?

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 102.

Lucrare de verificare a Unitilor de nvare Nr. 7, 8 i 9


1. S se realizeze un tabel HTML cu urmtoarele caracteristici:
1. tabelul s fie centrat i s ocupe 50% din lungimea
ferestrei browserului
2. S aib 4 rnduri
3. S aib 3 colane
4. Datele pe coloana 1 s fie aliniate la stnga
5. Datele pe coloana 2 s fie centrate
6. Datele pe coloana 3 s fie aliniate la dreapta
Predai fiierul HTML n format electronic ca rezultat al
rezolvrii lucrrii de verificare
Pe lng informaiile prezentate n manual se poate utiliza
reperul bibliografic numrul 2 i 3 din bibliografia unitii de
nvare nr.7.
Nr. de puncte 9 :
1 3p, 2 1p, 3 1p, 4 1p, 5 1p, 6 1p
2. Realizai un formular HTML care s poat fi folosit la un
sondaj de opinie (alege singur subiectul). Acesta trebuie s
conin cmpuri textbox, butoane radio i liste de selecie
Predai fiierul HTML n format electronic ca rezultat al
rezolvrii lucrrii de verificare
Pe lng informaiile prezentate n manual se poate utiliza
reperul bibliografic numrul 2 i 3 din bibliografia unitii de
nvare nr.8.
100

Script Javascript

Nr. de puncte 8 (2p utilizarea directivei FORM, 2p -utilizarea


cmpuri de tip textbox, 2p utilizarea cmpuri de tip buton
radio; 2p - utilizarea cmpurilor de tip list de selecie )

3. Realizai o pagin HTML care s conin o directiv HTML


<A> care s aib urmtorul comportament: cnd utilizatorul
execut dublu-click pe acest hyperlink s se afieze mesajul
De doua ori click! ntr-o fereastr separat (o fereastr de tip
dialog). Pentru aceasta se va utiliza JavaScript i atribute de tip
Event Handler.
Predai fiierul HTML n format electronic ca rezultat al
rezolvrii lucrrii de verificare
Pe lng informaiile prezentate n manual se poate utiliza
reperul bibliografic numrul 1 i 2 din bibliografia unitii de
nvare.
Nr. de puncte 8 (4p pentru definirea corect a atributului
EventHandler pentru directiva <A>, 4p definirea i folosirea
secvenei JavaScript pentru afiarea mesajului)

101

Script Javascript

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 9.1.
Este recomandat definirea scripturilor n interiorul comentariilor
HTML pentru cazurile n care browserul cu care este vizualizat
pagina nu suport JavaScript. n aceste cazuri browserul va afia
textul scriptului n loc s il execute. Pentru a preveni afiarea
scriptului n pagin acesta trebuie introdus n interiorul unui
comentariu HTML. A se revedea seciunea 9.2.

ntrebarea 9.2.
Un scrip Java Script se execut la ncrcarea paginii dac acesta
este definit n interiorul directivei<BODY> sau la apariia unui anumit
eveniment. Variante corecte de raspuns: a) i b). A se revedea
seciunea 9.3.

ntrebarea 9.3.
Atributele Event Handler au rolul de a defini aciunea (scriptul) care
se va executa n momentul apariiei unui eveniment. Consultai
seciunea 9.4.

Indicaii la problemele propuse


Problemele propuse n lucrrile de verificare se fac dup modelele
de exemple prezentate n unitatea de nvare sau dup tipicul
acestora.

Bibliografie
1. Richard Wagner, R.Allen Wyke Java Script, Editura Teora
2000, pg.47-59, 64-76
2. Mihaela Brut, Sabin Buraga - Prezentari multimedia pe Web.
Limbajele XHTML + TIME i SMIL Editura Polirom 2003, pg.
13-22, 30-33
3. Clin Ioan Acu Optimizarea paginilor Web, Editura Polirom
2003, pg.182-267

102

Executabile si multimedia in pagina WEB

Unitatea de nvare Nr. 10


EXECUTABILE I MULTIMEDIA N PAGINA WEB

Obiectivele Unitii de nvare Nr.10

104

10.1 Java i Java APPLET

104

10.2 Obiecte ACTIVE X

106

10.3 Fiiere multimedia n pagina WEB

107

10.4 Adugarea clipurilor multimedia la o pagin Web

108

Rspunsuri i comentarii la ntrebrile din testele de evaluare

110

Bibliografie

110

103

Executabile si multimedia in pagina WEB

Obiectivele Unitii de nvare Nr.10:


Dup parcurgerea acestei Unitii de nvare vei stii:

Ce este un Applet Java


Cum se folosete un applet Java ntr-o pagin WEB
Ce este un obiect Active X
Cum se folosete un obiect Active X ntr-o pagin
WEB
Ce sunt i cum se pot folosi fiierele multimedia ntr-o
pagin Web

10.1 Java i Java APPLET


Java

Avantaj

APPLET
Java

Java este un limbaj de programare dezvoltat de compania Sun


Microsystems. Este un limbaj care ofer ntreg suportul pentru
programarea orietat pe obiecte i a fost creat cu scopul de putea fi
utilizat fr nici un fel de diferen pe orice sistem care suport Java
(cross-platform). Un alt mare avantaj al limbajului Java este faptul c
programele scrise n Java i compilate pentru un sistem de operare
vor rula fr a fi recompilate pe orice alt sistem de operare care
suport Java. Acest lucru este posibil deoarece programele Java nu
ruleaz folosind direct resursele oferite de sistemul de operare ci
ruleaz ntr-un alt program numit Java Virtual Machine care se
traduce prin Maina Virtual Java.
n literatura de specialitate se face referire la ea prin acronimul su JVM.
Dup cum i spune i numele acest program creeaz un mediu
virtual n care un program Java poate rula.
Programele Java pot fi folosite ntr-o pagin Web sub form de
APPLET Java. Un applet Java este un program executabil ntr-un
JVM. Aceste programe se gsesc n fiiere cu extensia .class, i pot
fi incluse direct n pagina Web folosind directiva HTML <APPLET>
mpreun cu directiva <PARAM> dup cum vom vedea mai jos.
Browserele care suport Java creaz un astfel de mediu pe care
programele Java de tip APPLET pot s l foloseasc pentru a rula.
Dar atenie nu toate browserele suport Java! i deci la realizarea
unei pagini de Web trebuie inut cont de acest lucru.

104

Executabile si multimedia in pagina WEB

<APPLET>
Funcionalitate:
Introduce un
Java n pagin

<PARAM>
Applet

Atribute:
CODE
CODEBASE
ALIGN
WIDTH
HEIGHT
Directiva de sfrit:
</APPLET> OBLIGATORIE
Pai folosii

Funcionalitate:
Permite
setarea
unui parametru de
intrare pentru un
applet
Atribute:
NAME
VALUE
Directiva de sfrit:
</PARAM> OPTIONAL

Paii pentru a introduce un applet Java ntr-o pagin Web sunt


urmtorii:
Pasul 1: Fiierul .class ce conine appletul Java va trebui copiat n
directorul care se afl fiierul HTML, sau n directorul specificat de
ctre atributul CODEBASE.
Pasul 2: Appletul Java aflat n fiierul .class va fi introdus n pagina
Web folosind directiva HTML <APPLET>. Exemplul de mai jos
ilustreaz modul n care se poate introduce ntr-o pagin HTML un
simplu applet Java fr parametrii de intrare:
<APPLET CODE=appletulmeu.class
WIDTH=300
HEIGHT=200>
</APPLET>
Dac appletul are nevoie de anumii parametrii de intrare pentru a
rula acetia pot fi specificai cu ajutorul unui set de directive
<PARAM> n interiorul elementului <APPLET> ca n exemplul de mai
jos unde apletul primete ca parametrii de intrare un nume i o
parol:
<APPLET CODE=appletulmeu.class
WIDTH=300
HEIGHT=200>
<PARAM NAME=nume VALUE=ana>
<PARAM NAME=parola VALUE=bu12cc>
</APPLET>
Hai s vedem ce semnificaie are i unde poate fi folosit fiecare
atribut n parte:

105

Executabile si multimedia in pagina WEB

Atributul
CODE

Atributul CODE specific numele fiierului .class sau .jar care


conine codul executabil al applet-ului Java folosit. Acest parametru
este obligatoriu.

Atributul
CODEBASE

Atributul CODEBASE specific locaia unde poate fi gsit fiierul


specificat de atributul CODE. Dac acest atribut lipsete fiierul
.class va fi cutat n directorul unde se afl documentul HTML.

Atributele
WIDTH si
HEIGHT

Atributele WIDTH i HEIGHT specific dimensiunea pe orizontal


respectiv pe vertical a spaiului rezervat de browser pentru afiarea
appletului. Este recomandat specificarea acestor atribute pentru ca
appletul s afieze datele corect.
Pentru directiva <PARAM> atribututul NAME este folosit pentru a
specifica numele, iar atributul VALUE pentru a specifica valoarea
parametrului de intrare care va fi transmis appletului.
Appleturile Java extind posibilitile oferite de HTML i/sau browser
permind realizarea unor pagini puternic interactive, cu interfa
grafic ce nu ar putea fi n mod normal creeat cu facilitile puse la
dispoziie de ctre limbajul HTML.
Test de autoevaluare
10.1 Un applet Java ruleaz pe calculatorul client sau ruleaz pe
server i prezint doar rezultatul n fereastra browserului?

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 110.

10.2 Obiecte ACTIVE X


Active X este o tehnologie dezvoltat de ctre compania Microsoft
care permite adugarea unor componente executabile n pagina
WEB. Obiectele sau controalele Active X sunt asemntoare cu un
applet Java. Spre deosebire de acestea, ns, pot avea un control
mult mai puin restricionat asupra mainii pe care ruleaz, ceea ce
poate fi perceput ca o problem de securitate de ctre anumii
utilizatori.
Avantaj

106

Marele avantaj al obiectelor Active X fa de appleturile Java este


c sunt transferate de la server o singur dat. Dup ce au fost
transferate ele devin parte integrant din sistemul de operare.
Execuiile ulterioare ale obiectului se vor face astfel rapid. Datorit
acestui avantaj i al altor caracteristici, Active X este folosit n special
pentru aplicaiile grafice livrate ctre utilizator prin intermediul
browserului.

Executabile si multimedia in pagina WEB

Dezavantaj

Marele dezavantaj al obiectelor Active X este c acestea nu pot rula


dect pe un calculator care ruleaz sistemul de operare Windows.
Controalele Active X pot fi dezvoltate folosind diferite limbaje de
programare, cum ar fi Microsoft Visual Basic, Microsoft Visual C++, i
chiar Java.
Un control Active X poate fi adugat ntr-o pagin Web folosind
directiva HTML <OBJECT> n mod similar cu directiva APPLET
pentru appleturi Java. Ca i n cazul elementului APPLET parametrii
de intrare pot fi specificai utiliznd directiva <PARAM>.

10.3 Fiiere multimedia n pagina WEB


Fiierele multimedia sunt fiiere care conin sunete, secvene
muzicale, sau chiar clipuri video. Acestea sunt din ce n ce mai
folosite n paginile Web.
n momentul n care browserul detecteaz un fiier multimedia fie va
lansa un program extern fie va folosi o facilitate intern (plug-in)
pentru a v rula clipul multimedia aflat n fisierul respectiv. Ce
program extern va folosi pentru a rula clipul multimedia depinde de
mai muli factori, precum tipul sistemului de operare sau tipul i
versiunea browserului. De aceea n calitate de creator al unei pagini
web nu poi controla direct programul n care va rula clipul
multimedia pe care l oferi n pagin.

Metode

Exist dou metode de a livra coninutul fiierelor multimedia ctre


browserul unui utilizator:

Avantaj
Dezavantaj

Streaming

Metoda static sau non-streaming caz n care fiierul


multimedia trebuie s fie complet descrcat pe calculatorul
utilizatorului nainte ca acesta s fie rulat.
Metoda dinamic sau streaming caz n care clipul coninut de
un fiier este rulat aproape imediat ce a fost referit transferul
restului de fiier fcndu-se pe msur ce clipul este rulat.

Avantajul primei metode este c nu necesit existena nici unui


program pe partea de server care s fac posibil rularea clipului.
Principalul dezavantaj al acestei meteode este c n cazul n care
dimensiunea fiierelor este mare, durata de transfer crete foarte
mult i deci si timpul pn cnd clipul poate fi rulat. De asemenea
datorit faptului c fiierul ajunge direct pe calculatorul utilizatorului
face mai dificil pentru creatorii acelor clipuri s i protejeze drepturile
de autor asupra unor lucrri.
Pentru a nltura aceste dezavantaje majore a fost dezvoltat
metoda dinamic de transfer a fiierelor multimedia referit n
107

Executabile si multimedia in pagina WEB

literatura de specialitate cu termenul de streaming. Aceast


tehnologie presupune existena urmtoarelor componenete software:

Avantaje si
dezavantaje

Streaming server este o component care gestioneaz


cererile de streaming pentru diferite formate multimedia de la
mai muli utilizatori simultan, folosind n mod eficient resursele
calculatorului server.
Encoder Este o component software care convertete un
fiier dintr-un anumit format multimedia ntr-un format potrivit
pentru streaming.
Player - este o aplicaie software care ruleaz pe maina
utilizatorului i care are rolul de a reliza la cerere conexiunea
cu serverul de streaming i de a rula clipul servit de acesta.
Avantajele acestei metode sunt clare dup cum am descris mai sus
deoarece utilizatorul nu trebuie s atepte transferul complet al
clipului multimedia nainte de a putea s-l vizioneze. Dezavantajele
ns se leag de faptul c aceast metod necesit existena unui
server de streaming care este de obicei scump i destul de dificil de
configurat i meninut.

10.4 Adugarea clipurilor multimedia la o pagin Web


Pentru a include un clip multimedia ntr-o pagin Web se poate folosi
fie directiva <A> fie directiva <EMBED>. Fiierele multimedia audio
pot fi de asemenea rulate ca fundal sonor la o pagin Web cu
ajutorul unor comenzi JavaScript.
Prin urmare poi folosi o directiv simpl de tip ancor ca n exemplul
de mai jos:
<A HREF=audio/clipulmeu.avi>
No.1 clip (1.3Mo)
</A>
Atunci cnd utilizatorul selecteaz hiperlinkul de mai sus browserul
va transfera pe hardiskul local clipul respectiv i l va rula cu ajutorul
unei aplicaii externe sau folosind facilitile oferite de ctre browser
n acest sens.
Directiva
EMBED

Folosirea directivei <EMBED> ofer mai multe opiuni pentru rularea


clipurilor multimedia dect n cazul folosirii unui simplu hiperlink.
Browserul va afia n pagin n locul acestei directive o interfa
grafic ce va permite utilizatorului s controleze derularea clipului
s-l opreasc sau s-l reporneasc, s deruleze nainte i napoi etc.
Cu ajutorul atributelor directivei <EMBED> se poate configura ca
clipul s fie rulat automat, ori s poat fi rulat n bucl sau doar o
singur dat. Iat un exemplu de folosire a acestei directive:
<EMBED
SRC=http://www.siteulmeu.ro/clip1.wav>

108

Executabile si multimedia in pagina WEB

Singurul atribut obligatoriu pentru aceast directiv este SRC


Valoarea lui reprezint URL-ul unde se afl clipul multimedia care se
dorete a fi rulat n pagin.
Atributele WIDTH i HEIGHT permit definirea dimensiunilor interfeei
grafice de control afiate n browser.
Atributul AUTOSTART poate lua una din valorile TRUE sau FALSE
Atributul
AUTOSTART i specific browserului s ruleze la ncrcarea paginii clipul
specificat de atributul SRC.
Atributul
LOOP

Atributul LOOP poate lua una din valorile TRUE sau FALSE i
specific browserului s ruleze sau nu n bucl clipul specificat de
atributul SRC.

Atributul
HIDDEN

Atributul HIDDEN poate lua una din valorile TRUE sau FALSE i
specific browserului s afieze sau s nu afieze interfaa grafic de
control n pagina Web.
Test de autoevaluare
10.2 Realizai o pagin web care s includ clipul de la URL-ul
http://www.multamuzica.ro/melo1.wav care s fie rulat automat la
ncrcarea paginii i care s fie cntat n bucl

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 110.

109

Executabile si multimedia in pagina WEB

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 10.1.
Un applet Java ruleaz ntotdeauna direct pe maina client dup ce a
fost transferat de la server. Acesta fiind unul din avantajele acestei
tehnologii pentru c n acest fel serverul este eliberat de anumite
sarcini. n acelai timp, ns poate fi i un dezavantaj pentru cazurile
n care maina client nu este destul de puternic. Consultai
seciunea 10.1.

ntrebarea 10.2.
Codul HTML corespunztor pentru a include acest clip este:
<EMBED
SRC=http://www.multamuzica.ro/melo1.wav
LOOP=TRUE
AUTOSTART=TRUE
>
Revedei indicaiile din seciunea 10.4.
Indicaii la problemele propuse
Problemele propuse n lucrrile de verificare se fac dup modelele
de exemple prezentate n unitatea de nvare sau dup tipicul
acestora.

Bibliografie
1. Cioata Mihai ActiveX. Concepte i aplicatii Editura Polirom,
pg.95-102, 174-175
2. Clin Ioan Acu Optimizarea paginilor Web, Editura Polirom
2003, pg.95-99, 144-156
3. Mihaela Brut, Sabin Buraga - Prezentari multimedia pe Web.
Limbajele XHTML + TIME i SMIL Editura Polirom 2003, pg.
13-22 i 233-247

110

Limbajul PHP i folosirea lui n pagina WEB

Unitatea de nvare Nr. 11


LIMBAJUL PHP I FOLOSIREA LUI N PAGINA WEB.

Obiectivele Unitii de nvare Nr.11

112

11.1 Introducere n limbajul PHP

112

11.2 Includerea de cod PHP n documente HTML

114

11.3 Variabile, constante, operatori n limbajul PHP

116

11.4 Structuri de control i funcii PHP

119

11.5 Clase i obiecte PHP

122

Rspunsuri i comentarii la ntrebrile din testele de evaluare

125

Bibliografie

125

111

Limbajul PHP i folosirea lui n pagina WEB

Obiectivele Unitii de nvare Nr.11:

Principalele obiective ale Unitii de nvare Nr. 11 sunt:

Ce este limbajul PHP i la ce poate fi folosit.


Cum poate fi integrat un script ntr-un document
HTML.
Care sunt principalele tehnici i metode de
programare n cadrul limbajului PHP.

11.1 Introducere n limbajul PHP


PHP (Hypertext Preprocessor) este un limbaj de scripting de uz
general, utilizat pe scar larg, potrivit pentru dezvoltarea aplicaiilor
Web i care poate fi integrat n paginile HTML. Sintaxa sa este
asemntoare cu a limbajelor de programare C, Java sau Perl fiind
uor de nvat. Scopul principal al su este de a permite
programatorilor web s genereze rapid pagini web cu un
comportament dinamic.
Limbajul PHP difer de limbajul de scripting JavaScript prin faptul c
este rulat pe partea de server, genernd HTML care este apoi trimis
ctre client. Clientul va primi rezultatele rulrii acelui script, fr a
putea cunoate codul surs iniial. Avnd n vedere rularea pe partea
de server, limbajul PHP permite lucruri similare cu aplicaiile de tip
CGI cum ar fi realizarea de formulare de colectare de date,
generarea dinamic a coninutului de pagini web, trimiterea sau
analiza obiectelor de tip cookies.
Pentru a putea vizualiza paginile web cu coninut PHP trebuie s dispunei
de un server web cu extensia PHP instalat. PHP poate fi utilizat pe toate
sistemele de operare majore (Linux, Unix, MacOS sau Microsoft Windows)
fiind suportat de majoritatea serverelor web (apache, Microsoft IIS,
lighthttpd sau nginx). Instalarea n cadrul serverului web se poate face ca
modul sau ca procesor CGI.
n cadrul utilizrii PHP nu suntei limitai doar la afiarea HTML ci
exist posibilitatea de a afia (ca rspuns al rulrii scriptului PHP)
imagini, fiiere PDF sau chiar animaii Flash generate n timp real. O
alt facilitate foarte important a limbajului PHP este posibilitatea de
interconectare cu un server de baze de date, utiliznd coninutul
preluat n generarea paginii web trimis ctre client (acest aspect va
fi detaliat n unitatea de nvare urmtoare). Pe lng posibilitatea
de generare de pagini i obiecte transmise prin intermediul
protocolului HTTP de ctre serverul web, limbajul PHP permite
interconectarea i cu alte servicii de reea (LDAP, IMAP, SNMP,
NNTP, POP3, SMTP) prin intermediul librriilor proprii specializate.
112

Limbajul PHP i folosirea lui n pagina WEB

Limbajul PHP posed faciliti foarte puternice de procesare a


textului i multe extensii de accesare i interpretare a limbajelor XML.
Exemplu de fiier PHP:
<html>
<head>
<title>Exemplu PHP</title>
</head>
<body>
<?php echo '<p>Salut!</p>'; ?>
</body>
</html>
n urma prelucrrii de ctre server a scriptului PHP, clientul va primi
urmtorul fiier HTML (comanda echo din limbajul PHP are efect
trimiterea ctre client a irului de caractere dintre ghilimele):
<html>
<head>
<title>Exemplu PHP</title>
</head>
<body>
<p>Salut!</p>
</body>
</html>

Figura 11.1 Realizarea unui script PHP utiliznd phpDesigner 7

113

Limbajul PHP i folosirea lui n pagina WEB

Cum testm
fiierele PHP?

La fel ca i n cazul fiierelor HTML editarea fiierelor PHP se poate


cu orice editor de text (Notepad sau Notepad++) sau cu un editor
specializat (phpDesigner, PHP Editor, Zend Studio). Salvarea
programelor PHP trebuie fcut n fiiere cu extensia .php . Pentru a
putea evalua efectul rulrii unei pagini web ce include scripturi php
este necesar instalarea unui server web cu extensie php. Exist
posibilitatea instalrii extensiei php sub Microsoft IIS sau putem
utiliza o suit integrat ce cuprinde serverul web apache, extensia
php i serverul de baze de date MySQL (de exemplu WampServer
http://www.wampserver.com).

11.2 Includerea de cod PHP n documente HTML


Secvenele de cod PHP se regsesc integrate n documentele HTML
ntre instruciuni de procesare de nceput i sfrit: <?php i ?>.
<?php echo '<p>Salut!</p>'; ?>
Cele dou instruciuni au semnificaia de intrare i ieire din modul
PHP. Tot ce este n afara celor dou instruciuni delimitatoare nu se
interpreteaz la nivel de server (este cod HTML simplu), codul cuprins
ntre cele dou instruciuni va fi nlocuit de ctre server cu ieirea
generat de execuia scriptului.
Un alt exemplu de cod surs PHP care n funcie de ziua sptmnii
modific culoare fundalului unei pagini HTML:
<html>
<head>
<title>Culoarea de fundal se modifica in functie de
ziua saptamanii</title>
</head>
<?php
// extragem ziua sptmnii cu ajutorul
funciei date
$today = date("l");
// afim ziua sptmnii
print("$today");
// verificm dac este duminic (sunday)
if($today == "Sunday") { $bgcolor = "#FEF0C5"; }
// verificm dac este luni (monday)
elseif($today == "Monday")
{ $bgcolor = "#FFFFFF";}
// verificm dac este mari (tuesday)
elseif($today == "Tuesday")
{ $bgcolor = "#FBFFC4"; }
// verificm dac este miercuri (wednesday)
elseif($today == "Wednesday")
{ $bgcolor = "#FFE0DD"; }
// verificm dac este joi (thursday)
114

Limbajul PHP i folosirea lui n pagina WEB

elseif($today == "Thursday")
{ $bgcolor = "#E6EDFF"; }
// verificm dac este vineri (friday)
elseif($today == "Friday")
{ $bgcolor = "#E9FFE6"; }
// dac nu este nici una din zilele de mai sus
atunci este smbt (Saturday)
else { $bgcolor = "#F0F4F1"; }
print("<body bgcolor=\"$bgcolor\">\n");
?>
<br>Culoarea de fundal a acestei pagini se modifica
in functie de ziua saptamanii.
</body>
</html>
Dac vom accesa pagina de mai sus prin intermediul unui browser
web de pe un server care are extensia PHP instalat vom obine
urmtorul rezultat:

n cadrul exemplului anterior putem observa c putem introduce un


comentariu cu ajutorul // . Sunt valabile i alte forme de delimitare a
textelor explicative: /* */ - varianta C clasic i # - varianta de bash.
Pentru a nelege modul de funcionare a scriptului anterior trebuie s
nelegem modul de funcionare a variabilelor (am utilizat variabila
$today i $bgcolor), a funciilor ce permit interaciune cu sistemul
de calcul (funcia date) i a instruciunilor program obinuite
(instruciunea if else). Toate aceste aspecte vor fi detaliate n
cele ce urmeaz.
115

Limbajul PHP i folosirea lui n pagina WEB

11.3 Variabile, constante, operatori n limbajul PHP


Variabile n
PHP

Variabilele n limbajul PHP nu necesit o declarare prealabil sau


stabilirea tipului precum n alte limbaje. O variabil se consider
declarat i devine utilizabil printr-o simpl atribuire:
$var = 0;
$nume = George;
Pentru a utiliza o variabil, numele acesteia trebuie precedat de
semnul $. Numele unei variabile este format din litere, cifre sau
semnul _ i nu poate ncepe cu o cifr.
Chiar dac nu este necesar s indicm tipul unei variabile n
momentul primei utilizri asta nu nseamn c datele stocate n
variabilele utilizate nu au tip, doar c limbajul PHP stabilete n mod
automat tipul datelor utilizate de noi. Astfel, vorbim de urmtoarele
tipuri n limbajul PHP:
Boolean variabila poate lua valorile True sau False.
Float numr n virgul mobil.
Integer numr ntreg.
String - ir de caractere.
Array matrice (list de variabile).
Object instana unui obiect de tip clas.
Resource pointer ctre o baz de date, poate fi conexiune
sau set de date rezultat.
Tipurile sunt necesare pentru ca n cadrul scripturilor s putem
efectua diverse operaii asupra variabilelor (operaii matematice cu
numere, operaii de cutare sau concatenare cu irurile de caractere
.a.m.d.).

Constante
n PHP

Constantele reprezint aliasuri pentru diverse valori; n loc s


utilizm o anume valoare putem utiliza o denumire pentru a uura
procesul de referire. Pentru a declara o constant utilizm cuvntul
cheie const sau define:
const DENSITATE_APA = 1;
define(VOLUM,100);
$greutate = DENSITATE_APA*VOLUM;
Dup cum se poate observa referirea unei constate nu necesit
utilizarea semnului $. Bineneles, valoarea unei constante nu poate
fi modificat dup declarare. Nu se pot construi matrice de
constante.

Variabile i
constante
predefinite
116

Pe lng variabilele i constantele definite de programator, limbajul


PHP pune la dispoziie o serie de elemente predefinite. Constantele
predefinite in mai mult de diveri parametrii ce nu se modific n
timpul execuie iar variabilele predefinite reprezint o metod pus la

Limbajul PHP i folosirea lui n pagina WEB

dispoziie de mediul de programare pentru a afla diveri parametrii ce


se modific n timpul execuiei.
<html>
<head>
<title>Exemplu de utilizare pentru constante si
variabile predefinite</title>
</head>
<body>
<?php
/* se va afia versiunea de limbaj PHP prin
intermediul constantei sistem predefinite
PHP_VERSION */
echo "<br>Versiunea de PHP este ".PHP_VERSION;
/* se va afia versiunea sistemului de operare
prin intermediul constantei sistem
prededinite PHP_OS */
echo "<br>Rulati sistemul de operare: ".PHP_OS;
/* se va afia adresa IP i denumirea
serverului prin intermediul setului de
variabile sistem predefinite _SERVER */
echo "<br>Adresa IP: ".$_SERVER['SERVER_ADDR'];
echo "<br>Denumire: ".$_SERVER['SERVER_NAME'];
?>
</body>
</html>
Operatori

Precum cum se poate observa n cele dou exemple precedente,


att cu variabilele ct i cu constantele se pot efectua diverse
operaii. Primul exemplu folosete operatorul * pentru a efectua
nmulirea a dou constante numerice i operatorul = pentru a atribui
rezultatul operaiei unei variabile. Cel de-al doilea exemplu utilizeaz
operatorul . pentru a concatena dou iruri de caractere. Pentru
fiecare tip de date n parte exist operatori pentru execuia unor
operaii specifice:
Operatori aritmetici
Operator
+
*
/
%

Operaie
Negaie
Adunare
Scdere
nmulire
mprire
Modulo

Exemplu
-$a
$a+$b
$a-$b
$a*$b
$a/$b
$a%$b

Operatori de atribuire compui


Operator Operaie
Atribuire
=

Exemplu
$a=$b
117

Limbajul PHP i folosirea lui n pagina WEB

+=
-=
*=
/=
%=
&=
|=
^=
<<=
>>=

nsumare
Diferen
Multiplicare
mprire
Modul
i la nivel de bit
Sau la niv de bit
Sau exclusiv
Deplasare st
Deplasare dr

$a+=$b echivalent $a=$a+$b


$a-=$b echivalent $a=$a-$b
$a*=$b echivalent $a=$a*$b
$a/=$b echivalent $a=$a/$b
$a%=%b echivalent $a=$a%$b
$a&=$b echivalent $a=$a&$b
$a|=$b echivalent $a=$a|$b
$a^=$b echivalent $a=$a^$b
$a<<=$b echivalent $a=$a<<$b
$a>>=$b echivalent $a=$a>>$b

Operatori pentru iruri de caractere


Operator
=
.
.=

Operaie
Atribuire
Concatenare
Atribuire cumulativ

Exemplu
$a="Test"
$a="Te"."st"
$a.= nr.11

Exemple de lucru cu diveri operatori:


<?php
/* Operaie de concatenare de iruri de
caractere */
$nume = "Popescu";
$prenume = "Ionel";
$nume_complet = $nume." ".$prenume;
echo $nume_complet;
/* Rezolvare ecuatie grad 2 ax2+bx+c=0 */
$a = 2;
$b = -7;
$c = 5;
$delta = ($b*$b)-(4*$a*$c);
if ($delta==0)
{
$x1=(-$b)/(2*$a);
echo "<br>x1=x2=".$x1;
}
elseif ($delta>0)
{
$x1=(-$b-sqrt($delta))/(2*$a);
$x2=(-$b+sqrt($delta))/(2*$a);
echo "<br>x1=".$x1;
echo "<br>x2=".$x2;
}
else
{
echo "<br>Nu exista solutii reale";
}
?>

118

Limbajul PHP i folosirea lui n pagina WEB

Test de autoevaluare
11.1 Scriei un script PHP care s calculeze aria unui cerc
bazndu-se pe o constant PI i o variabil $raza.

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 125.

11.4 Structuri de control i funcii PHP


Structuri de
control

Structurile de control n limbajul PHP sunt reprezentate de


instruciuni de baz care permit efectuare operaiilor elementare la
nivel de cod: instruciuni decizionale (if elseif else, switch),
instruciuni repetitive (while, for, break, continue) sau instruciuni de
includere (include, require). Fr aceste instruciuni de baz nu am
putea construi programe n limbajul PHP. Chiar dac, n exemplele
precedente, am utilizat deja instruciunea if elseif else este cazul
s detaliem modul de utilizare i a celorlalte structuri de control puse
la dispoziie de limbajul PHP.

Este momentul s facem o mic parantez pentru a lmuri dou


aspecte sintactice importante ale limbajul PHP (aspecte deja utilizate
n exemplele de cod precedente).
1. Toate instruciunile din program trebuie s aib ca delimitator
final simbolul ;
2. Un grup de instruciuni poate fi delimitat de simbolurile { }
obinndu-se astfel un bloc de instruciuni sau o
macroinstruciune care poate fi indicat ca ramur de execuie
pentru o instruciune decizional.

Instruciunea if elseif else este o instruciune decizional care


permite evaluarea unor condiii multiple.
if (condiie1)
instruciune (sau macroinstruciune) care se
execut dac condiie1 este ndeplinit (are
valoare de adevr true)
elseif (conditie2)
instruciune care se execut dac conditie2
este ndeplinit
else
119

Limbajul PHP i folosirea lui n pagina WEB

instruciune care se execut dac nici una din


condiiile anterioare nu sunt ndeplinite
Ramurile elseif i else nu sunt obligatorii putem avea o instruciune
if simpl, cu o singur condiie. Pot exista oricte ramuri de tip elseif
dar o singur ramur else.
Instruciunea switch este o instruciune similar cu instruciunea if
dar care permite declararea simpl a unui numr mare de ramuri
decizionale.
switch ($variabil) {
case valoare1
instruciune care se execut dac
$variabil are valoarea valoare1
case valoare2
idem
case valoare3
idem
.
}
Instruciunile while i do while permit efectuarea repetitiv a unui
grup de instruciuni atta timp ct este adevrat o anumit condiie.
while (condiie):
grup de instruciuni;
endwhile;
do
grup de instruciuni;
while (condiie);
Instruciunea for permite realizarea unei operaii n mod repetitiv,
putnd controla numrul de iteraii.
for ($i=1; $i<=10; $i++):
echo("<br>Ma aflu la iteratia numarul: ".$i);
endfor;
La prima execuie a instrucii variabila $i este iniializat cu valoarea
1. La urmtoarea execuia variabila $i este incrementat n mod
automat i se verific dac a atins valoarea maxim 10. Instruciunile
cuprinse ntre instruciunea for i instruciunea endfor se vor executa
n exemplul anterior de 10 ori.
O instruciune similar este instruciunea foreach care n loc s
parcurg un interval de valori parcurge elementele unui vector sau a
unei colecii de valori.
$vector = array(1,2,5,10,55);
$i=1;
120

Limbajul PHP i folosirea lui n pagina WEB

foreach ($vector as $element) {


echo("<br>Elementul ".$i." este ".$element);
$i++;
}
Dou instruciuni utile n conjuncie cu instruciunile de ciclare sunt
continue i break. Apariia instruciunii continue conduce la
trecerea la urmtorul pas al ciclului fr a executa restul de
instruciunii din cadrul buclei iar apariia instruciunii break conduce
la oprirea procesului de ciclare indiferent de numrul de pai rmai.
$vector = array(1,2,5,10,55);
$i=1;
foreach ($vector as $element) {
if ($element==10):
echo("<br>Elementul 10 se afla pe pozitia: ".$i);
break;
endif;
$i++;
}
Funcii

Pe lng instruciunile de baz, descrise anterior, n cadrul limbajului


PHP mai ntlnim i funcii care sunt extrem de utile n scrierea de
aplicaii web. La momentul actual limbajul PHP include peste 700 de
funcii predefinite. Exemple de tipuri de funcii i funcii existente n
limbajul PHP:
Funcii de lucru cu iruri de caractere
o strcmp compar dou iruri de caractere
o strlen returneaz dimensiunea unui ir de caractere
o trim elimin spaiile
o crc32 calculeaz suma CRC pe 32 de bii
Funcii de lucru cu vectori i matrice
o sort sorteaz elementele
o range genereaz un vector pentru un interval
o sizeof returneaz numrul de elemente
Funcii de lucru cu date calendaristice
o date_sunrise returneaz ora rsritului pentru o
anume dat
o getdate returneaza data curenta
o checkdate verifica validitatea unei date
Funcii matematice
o max returneaz maximul dintre dou numere
o log logaritm
o sqrt radical
Funcii diverse
o sleep introduce o ntrziere
o die stopeaz rularea scriptului curent
o get_browser returneaz versiunea de browser

121

Limbajul PHP i folosirea lui n pagina WEB

Pentru o list complet i detaliat a funciilor putei consulta


manualul oficial al limbajului PHP. El poate fi accesat gratuit la
adresa:
http://www.php.net/manual/ro/index.php (limba romn)
http://www.php.net/manual/en/index.php (limba englez)
n felul acesta putei s fii siguri c lista este complet i actualizat
cu ultimele funcii implementate n limbajul PHP.

Pe lng funciile deja existente n limbajul PHP utilizatorul poate


defini propriile funcii pe care le poate apela n mod similar cu
funciile deja existente.
function patrat($x)
{
$rezultat =$x*$x;
return $rezultat;
}
$a = 5;
$a2 = patrat($a);

Test de autoevaluare
11.2 Scriei o funcie proprie care s returneze elementul cel mai
mare element dintr-un vector primit ca parametru.

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 125.

11.5 Clase i obiecte PHP


Ultimele generaii de limbaje de programare introduc un nou concept
referitor la modul n care poate fi structurat un program i anume
programare orientat obiect (OOP Object Oriented Programming).
Aceast modalitate de programare are o mare posibilitate de
abstractizare a elementelor folosite n program i din aceast cauz
reutilizarea i depanarea codului este mult mai uoar.
Principiile de baz ale OOP sunt:
Abstractizarea este posibilitatea ca un program s ignore
unele aspecte ale informaiei pe care o manipuleaz existnd
posibilitatea s se concentreze asupra esenialului. Fiecare
122

Limbajul PHP i folosirea lui n pagina WEB

obiect are posibilitate s i poat modifica starea sau s


comunice cu alte subiecte din sistem fr a dezvlui cum au
fost implementate aceste faciliti.
ncapsularea numit i ascunderea de informaii: permite ca
obiectele nu pot modifica starea altor obiecte n mod direct ci
doar prin metode puse la dispoziie de obiectul respectiv.
Polimorfismul este abilitatea de a procesa obiectele n mod
diferit, n funcie de tipul sau de clasa lor. Altfel spus, este
abilitatea de a redefini metode pentru clase derivate.
Motenirea permite organizarea i faciliteaz polimorfismul
i ncapsularea, permind definirea i crearea unor clase
specializate plecnd de la clase (generale) deja definite care
pot avea acelai comportament fr a fi nevoie s
redefineasc diverse metode sau instrumente.
Prin aplicarea acestor concepte programele devin, din simple liste de
instruciuni sau apeluri de proceduri i funcii, colecii de obiecte
uniti individuale de cod care interacioneaz unele cu altele.
Facilitile de programare POO au existat i n versiunea 4 a
limbajului PHP dar au fost mbuntite semnificativ n versiunea
curent 5.
Exemplu de utilizare a unui container de date ncapsulat a unui
obiect:
<?php
$elev->nume="Ionescu Gabriel";
$elev->varsta=14;
printf("Elevul %s are %d ani.", $elev->nume,
$elev->varsta);
?>
Secvena de cod anterioar va afia:
Elevul Ionescu Gabriel are 14 ani.
Dup cum se poate observa dou variabile nume i varsta au fost
grupate n cadrul aceluiai obiect elev. Un obiect este un tip de date
care permite gruparea datelor i funciilor n cadrul aceleiai
variabile. O clas este un ablon reutilizabil din care pot genera
oricte obiecte similare (instane ale clasei). De exemplu pot defini o
clas de tip elev care s arate n felul urmtor:
<?php
class elev
{
function __construct($nume, $varsta)
{
$this->nume = $nume;
$this->varsta = $varsta;
123

Limbajul PHP i folosirea lui n pagina WEB

}
public function afisare()
{
printf("Elevul %s are %d ani.", $this->nume,
$this->varsta);
}
}
$elev_VIIIA = new elev("Ionescu Gabriel",14);
$elev_VIIIA->afisare();
?>
n acest caz elev identific clasa definit pentru a putea fi instaniat
pentru mai multe obiecte similare. Dup cum se poate observa
instanierea se face utiliznd cuvntul cheie new ce primete ca
parametrii valorile iniiale pentru componentele de date interne ale
obiectului. Aceste valori pot fi modificate ulterior pe parcursul utilizrii
obiectului. n momentul instanierii unei clase se apeleaz n mod
automat funcia intern __construct care efectueaz iniializarea
structurii de date interne a obiectului n cauz aceast funcie
poart denumirea de constructor. Exist posibilitatea ca la instaniere
s existe valori predefinite pentru valorile interne ale obiectului fr a
fi nevoie s le transmitem n momentul declarrii iniiale. Valorile
interne ale unui obiect se numesc i proprieti ale obiectului.
Dup cum se poate observa am adugat i o funcie intern clasei
elev funcia afiare. Aceasta poart denumirea de metod a clasei.
n cadrul declarrii acestei funcii apare cuvntul cheie public care
indic faptul c aceast metod (funcie) este accesibil din exterior
pentru obiectele instaniate din aceast clas. n momentul n care
omiteam aceast declaraie metoda era implicit accesibil din
exterior (toate proprietile i metodele sunt implicit publice). n afar
de posibilitatea de a declara o metod sau o proprietate public mai
exist variantele private acele metode sau proprieti sunt
accesibile doar metodelor interne clasei, nu pot fi accesate prin
intermediul obiectului instaniat sau protected acele metode sau
proprieti sunt accesibile doar intern n cadrul clasei sau n cadrul
claselor derivate din clasa iniial. Prin intermediul acestor metode de
limitare a accesului la componentele interne ale unei clase se poate
realiza o iniializare controlat a proprietilor clasei (de exemplu, nu
pot iniializa proprietatea varsta n mod direct ci doar prin intermediul
unei metode care verific dac valoarea introdus este un ntreg
pozitiv mai mic de 100.
Test de autoevaluare
11.3 Definii o clas care s poat fi utilizat pentru gestionarea
mrfii ntr-un depozit de textile.
Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 125.

124

Limbajul PHP i folosirea lui n pagina WEB

Rspunsuri i comentarii la ntrebrile din testele de evaluare


Problema 11.1.
define("PI",3.14);
$raza=3;
$arie=PI*pow($raza,2);
echo("<br>Aria cercului de raza ".$raza." este
".$arie." .");
Problema 11.2.
function max_vector($vector) {
$maxim=0;
foreach ($vector as $element) {
if($element>$maxim):
$maxim=$element;
endif;
}
return $maxim;
}
$vector_test = array(1,4,63,45,45);
$element_maxim = max_vector($vector_test);
echo("<br>Elementul maxim este
".$element_maxim." .");
Problema 11.3.
class marfa
{
function __construct($stoc=0, $valoare_unitara=0)
{
$this->stoc = $stoc;
$this->valoare_unitara = $valoare_unitara;
}
public function calcul_valoare_totala()
{
return($this->stoc*$this->valoare_unitara);
}
}
$pijama = new marfa();
echo("Valoarea totala a stocului este ".
$pijama->calcul_valoare_totala()." .");

Bibliografie
1. Luke Welling i Laura Thomson, Dezvoltarea aplicaiilor web
cu PHP i MySQL, Editia a II-a, Editura Teora, 2005
2. Manualul PHP - http://php.net/manual/ro/index.php

125

Capacitatea de a folosi informaii din baze de date n cadrul paginilor Web

Unitatea de nvare Nr. 12


CAPACITATEA DE A FOLOSI INFORMAII DIN BAZE DE DATE N
CADRUL PAGINILOR WEB

Obiectivele Unitii de nvare Nr.12

127

12.1 Sisteme de baze de date

127

12.2 Tehnologii de acces la baze de date

128

12.3 Introducere n SQL

129

12.4 Folosirea PHP pentru accesul la baze de date din cadrul


paginilor Web

134

12.5 Limbaje de script pe partea de client

138

Rspunsuri i comentarii la ntrebrile din testele de evaluare

140

Bibliografie

140

126

Capacitatea de a folosi informaii din baze de date n cadrul paginilor Web

Obiectivele Unitii de nvare Nr.12:

Principalele obiective ale Unitii de nvare Nr. 12 sunt:

Ce este un sistem de baze de date i care sunt


tehnologiile de acces existente.
Ce este i cum funcioneaz limbajul SQL.
Cum putem utiliza sistemele de baze de date
utiliznd limbajul PHP i limbajele de script pe partea
de client.

12.1 Sisteme de baze date


Un sistem de baze de date este o colecie de date centralizate,
creat i meninut computerizat, n scopul prelucrrii datelor n
contextul unui set de aplicaii. Prelucrarea datelor se refer la operaiile de
introducere, tergere, actualizare i interogare a datelor.
Simple colecii de fie sau tabele (de exemplu documente fizice pe hrtie
sau tabele n Excel) ce conin date dar nu permit operaii de prelucrare
automat (interogare, modificare, raportare) nu sunt considerate
sisteme de baze de date.
Exist mai multe tipuri de clasificri cu privire la sistemele de baze de
date: clasificare dup modelul de date (relaionale, orientate obiect,
obiect-relaional, date ierarhizate), clasificare dup numrul de
utilizatori (monoutilizator, multiutilizator), clasificare dup arhitectura
de stocare (centralizate, distribuite) sau clasificare dup arhitectura
intern (sisteme de tip client-server sau sisteme integrate). Din
perspectiva utilizrii sistemelor de baze de date aceste clasificri
influeneaz modul n care se poate face accesul la baza de date,
uurina utilizrii informaiilor din baza de date i performanele de
utilizare.
Exemple de sisteme de baze de date utilizate n cadrul aplicaiilor
web:
Oracle sistem de baze de date comercial destinat aplicaiilor
de dimensiuni i complexitate mare (de exemplu site-ul
amazon.com utilizeaz acest sistem de baze de date).
Microsoft SQL Server sistem de baze de date client-server
destinat aplicaiilor dezvoltate pe platforme Microsoft. Permite
realizarea de aplicaii complexe dar are performane foarte
bune mpreun cu alte tehnologii i produse Microsoft (server
web IIS, tehnologie de scripturi web ASP.NET).
127

Capacitatea de a folosi informaii din baze de date n cadrul paginilor Web

MySQL / PostgresSQL baze de date open-source utilizate cu


precdere sub sistemul de operare Linux. Sunt ntlnite ntr-o
gam larg de aplicaii web de la site-uri personale pn la
site-uri ale companiilor mici i mijlocii. Aplicaiile web care
utilizeaz aceste baze de date sunt scrise n mare parte n
limbajul PHP.
Microsoft Access este un sistem de baze de date gndit
pentru aplicaii de tip office de mici dimensiuni. Este utilizat n
aplicaii web simple (formulare de preluare a datelor, pagini de
nscriere). Are avantajul de a avea o modalitate de acces
similar cu Microsoft SQL Server astfel nct o baz de date
mpreun cu aplicaia corespondent pot fi migrate uor n
momentul n care dimensiunea de stocare a datelor i
complexitatea operaiilor efectuate cresc.

Figura 12.1 Interfaa de management pentru un server de baze de date Microsoft


SQL Server 2008

12.2 Tehnologii de acces la baze de date


Prin acces (sau conectare) la un sistem de baze de date nelegem o
modalitate n care putem s comunicm n mod primar cu sistemul de
baze de date nu este vorba de manipularea informaiilor coninute n
baza de date ci despre modul n care se transmit comenzile ctre
sistemul de management al bazei de date (cum efectum
autentificarea utilizatorilor, cum selectm baza de date i tabelele cu
care dorim s lucrm, cum transmitem comenzile de prelucrare a
informaiilor i cum primim napoi informaiile dorite). Astfel majoritatea
sistemelor de baze de date permit urmtoarele tehnici de acces:

128

Capacitatea de a folosi informaii din baze de date n cadrul paginilor Web

Acces prin intermediul unui client propriu fie c vorbim de


sisteme de tip server fie c vorbim de sisteme gndite s
funcioneze n mod monoutilizator ntotdeauna va exista o
modalitate pus la dispoziie de productorul sistemului de
baze de date care va permite accesul la sistem. Aceast
tehnic este implementat prin punerea la dispoziia
programatorului a unei biblioteci de funcii de acces sau a unui
client n reea. De cele mai multe ori aceast tehnic ofer
performane optime i permite accesarea ntregii game de
faciliti a sistemului de baze de date.

Acces prin intermediul unor biblioteci de funcii puse la


dispoziie de limbajul de programare. Multe limbaje de
programare vin n ajutorul programatorului punnd la dispoziia
acestuia o serie de funcii deja existente pentru facilitarea
accesului la o serie de sisteme de baze de date des ntlnite.
Avantajul acestor funcii este faptul c ascund particularitile
sistemului de baze de date ncercnd s realizeze o modalitate
similar de lucru independent de sistemul de baze de date.
Un exemplu de bibliotec de acces specific unui limbaj este
JDBC (Java Database Connectivity) tehnic de acces
destinat limbajului de programare Java. Permite accesul
bazelor de date relaionale prin intermediul unei biblioteci de
funcii API. Alt exemplu const n faptul c limbajul PHP (n
instalare implicit) pune la dispoziie o serie de funcii pentru
lucrul cu serverul MySQL.

Figura 12.2 Arhitectura interfeei ODBC

129

Capacitatea de a folosi informaii din baze de date n cadrul paginilor Web

ODBC (Open Database Connectivity) este o tehnic care


permite accesul la sistemul de management al bazei de date
prin intermediul unei interfee software standard. Necesit un
driver software care s efectueze translaia ntre comenzile
generice agreate de formalismul ODBC i particularitile
sistemului de baze de date. n principal utilizarea acestei
tehnici scutete programatorul de un efort suplimentar referitor
la nelegerea modalitii de funcionarea a sistemului de baze
de date cu care lucreaz dar degradeaz performanele de
prelucrare i acces la informaiile din baza de date. Tehnologia
ODBC reprezint o modalitatea de abstractizare a metodelor
de acces la un sistem de baze de date. Exist i alte tehnologii
de abstractizare a accesului la sisteme de baze de date dar au
o popularitate mai redus: DBA, dbx, PDO (PHP Data Objects),
ADO, ADO.NET.

12.3 Introducere n SQL


Limbajul SQL (Structured Query Language) a fost conceput ca un
limbaj standard de descriere a datelor i acces la informaiile din
baze de date, ulterior dezvoltndu-se ca o adevrat tehnologie
dedicat standardizrii modului de lucru cu informaiile din sistemele
de baze de date relaionale.
Comenzile principale n cazul limbajului SQL se refer la cele cinci
operaii de baz care se pot efectua ntr-un limbaj relaional:
Crearea / tergerea / modificarea unei tabele
Inserarea de noi linii ntr-o tabel
tergerea unor linii dintr-o tabel
Modificarea unor linii dintr-o tabel
Listarea selectiv a datelor din una sau mai multe tabele
Operaii cu
tabele

Comanda de creare de noi tabele n baza de date curent n limbajul


SQL standard este CREATE TABLE. Sintaxa acestei comenzi este:
CREATE TABLE denumire_tabela (
coloana1 tip_date_coloana1,
coloana2 tip_date_coloana2,
........
);
Pe lng declararea tipurilor de date pentru fiecare coloan de date
a tabelei create pot apare i alte informaii care pot indica diverse
constrngeri asupra datelor care vor putea fi introduse n acel cmp:
NOT NULL valorile din acel cmp nu vor putea lipsi n cadrul
unei noi nregistrri;
PRIMARY KEY cmpul care are specificat acest cuvnt cheie
este cheie primar a tabelului i permite indexarea (sortarea i
cutarea mai rapid) dup valorile coninute;

130

Capacitatea de a folosi informaii din baze de date n cadrul paginilor Web

FOREIGN KEY acest cmp este o referin ctre o cheie


primar dintr-o alt tabel lucru ce permite efectuarea de
operaii complexe pe ambele tabele simultan;
DEFAULT indic o valoare implicit pentru un cmp.
Exemplu de fraz SQL care permite crearea unei tabele:
CREATE TABLE tabela_catalog (
nr_crt integer AUTONUMBER PRIMARY KEY,
nume text(50) NOT NULL,
medie_matematica double,
medie_limba_materna double,
medie_geografie double,
medie_istorie double);
n limbajul SQL comanda de tergere a unei tabele n baza de date este
DROP TABLE:
DROP TABLE denumire_tabela;
tergerea unei tabele este o operaie permis atta timp ct nu exist
legturi cu alte tabele (indexul primar al tabelei terse nu este index
extern foreign key al unei alte tabele din aceiai baz de date).
Modificarea unei tabele utiliznd limbajul SQL presupune utilizarea
instruciunii ALTER TABLE.
ALTER TABLE denumire_tabela
ADD nume_coloana tip_date_coloana
[DROP COLUMN nume_coloana]
[ALTER COLUMN nume_coloana nou_tip_date_coloana];
Lucru cu
informaii

Pe lng instruciuni de lucru la nivel de tabel, limbajul SQL ofer o


serie de instruciuni care permit manipularea informaiilor din tabel.
Pentru a introduce date ntr-o tabel avem la dispoziie comanda
INSERT:
INSERT INTO denumire_tabela [denumire_coloana,...]
VALUES (valoare1, valoare2,...);
Dac nu se precizeaz coloanele ce urmeaz a fi populate cu date
nseamn c setul de valori precizat dup cuvntul cheie VALUES
cuprinde un set complet de valori pentru acea tabel. Inserarea
selectiv de valori (doar anumite cmpuri) trebuie fcut avnd n
vedere eventualele cmpuri declarate NOT NULL.
Pentru a terge informaii dintr-o tabel se utilizeaz comanda
DELETE:
DELETE FROM denumire_tabela
[WHERE (conditie)] [LIMIT numar_maxim_linii]
131

Capacitatea de a folosi informaii din baze de date n cadrul paginilor Web

Dac n cadrul unei comenzi de tip DELETE nu apare clauza


WHERE atunci toate liniile din acea tabel vor fi terse. Nu se pot
terge linii care conin indeci externi pentru alte tabele. Clauza
LIMIT, care este opional, limiteaz numrul de linii terse la
execuia comenzii. Exemplu de comand DELETE care va terge din
tabela tabela_catalog, dat ca exemplu anterior, toi elevii care au
media_matematica mai mic de 5:
DELETE FROM tabela_catalog
WHERE (medie_matematica<5);
Modificarea unor informaii (linii) n cadrul unei tabele se face cu
ajutorul comenzii UPDATE:
UPDATE denumire_tabela
SET denumire_coloana1=valoare1,
denumire_coloana2=valoare2,....
WHERE (conditie);
Efectul unei comenzi UPDATE este acela c va nlocui valorile din
coloanele precizate dup clauza SET pentru liniile care ndeplinesc
condiia specificat dup clauza WHERE.
Limbajul SQL i posibilitatea de filtrare a informaiilor provenite dintrun tabel. Acest lucru se face utiliznd comanda SELECT care are
urmtoarea sintax:
SELECT [DISTINCT] lista_coloane_rezultat
FROM denumire_tabela(e)
[WHERE (conditie)]
[GROUP BY denumire_coloana1, denumire_coloana2,...]
[HAVING conditie_de_grup]
[ORDER BY denumire_coloana1,...[ASC/DESC]];
Dup cum se poate observa comanda SELECT permite solicitarea
extragerii unui set de informaii dintr-o tabel sau mai multe tabele.
Clauza DISTINCT specific c dorim s nu primim ca rezultat
nregistrri duplicat. Acest lucru se poate ntmpla cnd efectum o
selecie pe mai multe tabele ntre care exist legturi i condiiile
specificate n cadrul clauzei WHERE genereaz selecii de perechi
de nregistrri duplicate. Parametrul lista_coloane_rezultat este
format dintr-o list de denumiri de coloane care dorim s apar n
filtrarea efectuat. Parametrul denumire_tabela(e) specific
denumirea tabelei sau a setului de tabele pe care executm filtrarea.
Urmtorul exemplu este cea mai simpl fraz de selecie SQL care
are ca efect selectarea tuturor nregistrrilor dintr-o tabel. Se poate
observa c n acest caz nu sunt prezente dect comanda SELECT i
clauza FROM.
SELECT * FROM denumire_tabela;
132

Capacitatea de a folosi informaii din baze de date n cadrul paginilor Web

Urmtoarea fraz SQL filtreaz rezultatul seleciei din cadrul tabelei


tabela_catalog astfel nct s ne fie returnate doar coloanele nume
i medie_geografie pentru nregistrrile care ndeplinesc condiia ca
medie_geografie s fie mai mare de 6. nregistrrile rezultate vor fi
ordonate alfabetic dup cmpul nume.
SELECT nume, medie_geografie
FROM tabela_catalog
WHERE (medie_geografie>6)
ORDER BY nume ASC;
n cazul n care definim i urmtoarea tabel:
CREATE TABLE tabela_clasa (
nr_clasa integer PRIMARY KEY,
denumire text(50) NOT NULL,
);
i modificm tabelul tabela_catalog astfel nct s conin i
informaii legate de clas:
ALTER TABLE tabela_catalog
ADD nr_clasa integer FOREIGN KEY;
putem efectua o filtrare combinat pe cele dou tabele
tabela_catalog i tabela_clasa astfel nct s obinem un rezultat
care s includ nume, medie_istorie, denumire (clasa) ordonate
dup clas i dup medie_istorie n mod descresctor.
SELECT tabela_catalog.nume,
tabela_catalog.medie_istorie,tabela_clasa.denumire
FROM tabela_catalog, tabela_clasa
WHERE
(tabela_catalog.nr_clasa=tabela_clasa.nr_clasa)
ORDER BY tabela_clasa.denumire,
tabela_catalog.medie_istorie DESC;
Test de autoevaluare
12.1 Utiliznd cele dou tabele definite n cadrul capitolului scriei
o fraz SQL care s returneze numele elevilor din clasa a VII-a B
(denumire) i care s aib medii mai mari ca 5 la toate materiile.
Rezultatele trebuie s fie ordonate alfabetic dup nume.
Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 125.

133

Capacitatea de a folosi informaii din baze de date n cadrul paginilor Web

12.4 Folosirea PHP pentru accesul la baze de date din cadrul paginilor
Web
Prin intermediul utilizrii limbajului PHP pentru accesul informaiilor
din sisteme de baze de date putem genera pagini web dinamice sau
interactive a cror coninut s fie generat pe baza informaiilor
stocate n baza de date.
Limbajul PHP permite accesul sistemelor de baze de date prin mai
multe metode:
Metode abstracte:
o DBA Oracle Berkley DB
o dbx
o ODBC
o PDO PHP Data Object
Biblioteci specifice unor sisteme de baze de date (selecie):
o dBase
o Firebird/InterBase
o Informix
o IBM DB2 IBM DB2, Cloudscape and Apache Derby
o Mssql Microsoft SQL Server
o MySQL
o OCI8 Oracle OCI8
o Paradox Paradox File Access
o PostgreSQL
o SQLite
o Sybase
Funciile utilizate pentru conectarea i transmiterea comenzilor ctre
sistemul de baze de date depind de metoda aleas. Exemple de
comenzi de conectare pentru diverse metode de acces:
ODBC:
odbc_connect(denumire_bd, user, parola, driver);
PDO (MySQL):
new PDO(mysql:host=...;dbname=...,user, parola);
MSSQL (Microsoft SQL Server):
mssql_connect(server, user, parola);
MySQL:
myssql_connect(server, utilizator, parola);
Cele mai multe aplicaii web scrise n PHP ce utilizeaz baze de date
sunt scrise pentru serverul de baze de date MySQL. Acest lucru se
datoreaz tehnologiilor similare ale celor dou produse ambele
produse sunt open-source i ruleaz cu performane bune sub
sistemul de operare Linux. Pentru aplicaii web de dimensiune mic
i mijlocie (magazine virtuale, pagini de socializare, site-uri de
134

Capacitatea de a folosi informaii din baze de date n cadrul paginilor Web

prezentare a unor produse, agenii de turism sau chiar pagini


personale) o soluie integrat ce nu necesit costuri de liceniere este
o alegere la ndemn. Din acest motiv pentru exemplificarea
complet a tuturor operaiilor de lucru cu o baz de date prin
intermediul limbajului PHP o s utilizm biblioteca specific de
MySQL inclus n limbajul PHP.
Operaiile necesare pentru utilizarea informaiilor dintr-o tabel
MySQL ntr-o pagin web sunt urmtoarele:
conectarea la serverul MySQL
selectarea bazei de date cu care lucrm
construirea frazei SQL pe care dorim s o rulm
execuia acesteia
primirea rezultatelor i afiarea n cadrul paginii web
repetarea ultimelor trei operaii de cte ori este necesar
nchidere conexiunii cu serverul MySQL
Dup cum am vzut deja conectarea la un server MySQL se face
specificnd denumirea serverului, a unui nume de utilizator i a unei
parole.
<?php
$db_numeserver = "localhost";
$db_user = "utilizator";
$db_parola = "parola";
$db_server = mysql_connect($db_numeserver,$db_user,
$db_parola);
if (!$db_server) die ("Nu ma pot conecta la
serverul MySQL. Motiv: ". mysql.error());
?>
Scriptul anterior utilizeaz funcia mysql_connect pentru a realiza
conexiunea cu serverul de baze de date utiliznd adresa i setul de
credeniale furnizat. De cele mai multe ori serverul web care ruleaz
scriptul este instalat pe aceiai main de calcul cu server de baze
de date. Din aceast cauz la numele serverului exemplul folosete
denumirea localhost ce identific acelai sistem de calcul. Funcia
mysql_connect returneaz un identificator al conexiunii realizate,
identificator reinut n variabila $db_server. Dac conexiunea nu a
putut
fi
realizat
(server
nefuncional
sau
credeniale
necorespunztoare) coninutul variabilei este nul. Prin intermediul
instruciunii if se verific acest lucru i n cazul n care eum n
realizarea conexiunii scriptul PHP este oprit (cu ajutorul comenzii die)
i este afiat motivul (cu ajutorul funciei mysql.error()). Aceast
abordare trateaz n mod primar apariia unei erori la conectare.
Pentru aplicaii reale putem nlocui acest mesaj cu unul mai
protocolar care s ascund utilizatorului motivul erorii i s
semnaleze doar administratorului detaliile tehnice necesare (prin
intermediul unui email sau prin consemnarea ntr-un fiier jurnal).
Selectarea bazei de date cu care dorim s lucrm se face n mod
similar cu realizarea conexiunii.
135

Capacitatea de a folosi informaii din baze de date n cadrul paginilor Web

<?php
$db_numebd = "test";
mysql_select_db($db_numedb) or die ("Nu ma pot
conecta la baza de date. Motiv: ". mysql.error());
?>
Comanda or permite ca n cazul n care prima procedur
(mysql_select_db) se ncheie cu o eroare intr n execuie cea de a
doua instruciune (die).
Pentru a lansa n execuie o fraz SQL avem la dispoziie funcia
mysql_query. Prin intermediul acesteia putem executa att fraze
SQL la nivel de structur de tabel (CREATE, ALTER, DELETE) ct
i fraze SQL de prelucrare sau filtrare a informaiilor (SELECT,
UPDATE).
Exemplu de execuie a unei fraze SQL de modificare a unei tabele.
<?php
$query = "ALTER TABLE tabela_catalog
ADD nr_clasa integer FOREIGN KEY;";
$result = mysql_query($query);
if (!$result) die ("Executie esuata.
Motiv: ". mysql.error());
?>
Exemplu de execuie a unei fraze SQL de filtrare a informaiilor.
Scriptul va afia datele rezultate n cadrul unei pagini web.
<?php
$query = "SELECT nume, medie_istorie
FROM tabela_catalog
WHERE (medie_istorie>5)
ORDER BY nume ASC;";
$result = mysql_query($query);
if (!$result) die ("Executie esuata.
Motiv: ". mysql.error());
$nr_linii = mysql_num_rows($result);
echo "<table><tr> <th>Nume </th> <th>Medie
istorie</th></tr>";
for ($j = 0 ; $j < $nr_linii ; ++$j)
{
$linie = mysql_fetch_row($result);
echo "<tr>";
echo "<td>$linie["nume"]</td>";
echo "<td>$linie["medie_istorie"]</td>";
echo "</tr>";
}
echo "</table>";
?>
136

Capacitatea de a folosi informaii din baze de date n cadrul paginilor Web

Exemplul anterior lanseaz n execuie o fraz SQL de tip SELECT i


preia n variabila $result setul de informaii rezultat. Cu ajutorul
funciei mysql_num_rows determin dimensiunea rezultatului
(numrul de linii care respect condiia din clauza WHERE) i
efectueaz o bucl for n scopul de a construi un tabel HTML care s
afieze rezultatele. n cadrul buclei fiecare linie din rezultat este
preluat cu ajutorul funciei mysql_fetch_row i afiat ca o linie n
tabel.
Pentru a nchide conexiunea cu serverul MySQL, la finalul operaiilor
efectuate, se utilizeaz comanda mysql_close. Dac n cadrul unei
pagini PHP (sau a unei alte aplicaii cu orice alt sistem de baze de
date) nu se nchide conexiunea la finalul seciunii de cod aceast
conexiune va rmne deschis un timp prestabilit dup care se va
nchide n mod automat. Dac scriptul PHP este accesat de un
numr mare de ori ntr-un interval de timp mai mic dect cel de
nchidere automat presetat exist posibilitatea ca serverul de baze
de date s ating numrul maxim de conexiune deschise simultan i
s se blocheze (s nu accepte alte conexiuni).
<?php
mysql_close($db_numeserver);
?>
Atenie! Chiar dac anumite credeniale permit efectuarea unor
operaii de tip SELECT sau UPDATE la nivel de tabel asta nu
nseamn c aceleai credeniale nu pot avea interzise alte tipuri de
operaii (de exemplu de modificare a tabelei ALTER sau DELETE).
Pentru a nelege mai bine modul n care funcioneaz drepturile de
acces n cadrul serverului MySQL putei consulta manualul online a
acestuia:
http://dev.mysql.com/doc/refman/5.5/en/

Test de autoevaluare
12.2 Utiliznd urmtoarea tabelele definite n seciunea anterioar
(tabela_catalog i tabela_clasa) realizai un script PHP care
afieze ntr-un tabel HTML toi elevi grupai pe clase i ordonai
descresctor dup media de la matematic.

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 140.

137

Capacitatea de a folosi informaii din baze de date n cadrul paginilor Web

12.5 Limbaje de script pe partea de client


Din punct de vedere al prelucrrii datelor existente ntr-o baz de
date pe partea de client putem s identificm urmtoarele situaii:
Utilizarea limbajelor de script pentru validarea datelor ce
urmeaz a fi trimise ctre un script (pe partea de server) de
introducere n baza de date. Aceast situaie este foarte des
ntlnit n cadrul aplicaiilor web ce utilizeaz baze de date
deoarece este mai eficient (i mai rapid) s verifici
corectitudinea datelor introduse de utilizator la nivel de script
client dect s le trimii ctre un script server care, n cazul n
care ceva este n neregul, s returneze un mesaj de
avertizare i s redirecioneze napoi n pagina de introducere.
Utilizarea limbajelor de script client pentru accesul bazelor de
date locale (aflate pe maina client). Majoritatea scripturilor de
tip client (JavaScript, VBScript) permit instanierea de obiecte
de acces la baze de date (ODBC sau ADO). Prin aceast
metod se poate avea accesul la baze de date locale sau
declarate local (bazele de date ODBC permit i conexiuni la
baze de date aflate pe alte calculatoare) dar nu permit accesul
la baze de date aflate de serverul web (ca n exemplele
prezentate n seciunea anterioar). Din pcate aceast
situaie ridic semne de ntrebare legate de securitatea datelor
i despre rostul aplicaiei web. Putem valida din punct de
vedere funcional o pagin web care nlocuiete aplicaia
Microsoft Access i permite lucrul cu fiiere de baze de date
locale dar nu putem concepe rostul unei aplicaii web care i
propune s utilizeze o baz de date central prin intermediul
unei conexiuni ODBC declarate pe maina client (n acest caz
nu mai putem vorbi de protecia bazei de date).
Utilizarea de tehnologii de tip Ajax (Asynchronous JavaScript
and XML) care permit transferul, n timpul execuiei scriptului
client, de informaii de pe server. n felul acesta putem vorbi
de un schimb de informaii ntre scriptul client i scriptul server
i putem imagina o combinaie de tehnologii client i server
(JavaScript / PHP de exemplu) care s permit scriptului client
s obin i s prelucreze informaii provenite dintr-o baz de
date aflat pe server. Un exemplu de aplicaie web care
utilizeaz tehnologia Ajax este Google Maps.
n continuare vom exemplifica prima situaie de utilizarea a
scripturilor client (de altfel i cea mai des ntlnit n cadrul aplicaiilor
web) i anume vom utiliza un script JavaScript pentru a valida
cmpurile dintr-un formular web (cmpuri ce pot fi trimise ulterior
unui script PHP pentru a le introduce ntr-o tabel dintr-o baz de
date).
138

Capacitatea de a folosi informaii din baze de date n cadrul paginilor Web

<html>
<head>
<title>Exemplu de formular cu validare</title>
</head>
<body>
<form method="POST" action="insert.php"
name="info_form">
<p>Nume:
<input type="text" name="nume" size="50"></p>
<p>Medie matematica:
<input type="text" name="medie_mat" size="2"></p>
<p><input type=button value="TRIMITE"
onclick="javascript:
if(window.document.info_form.nume.value=='')
{window.alert('Completati numele!');
window.document.info_form.nume.focus();}
else {window.document.info_form.submit();}"></p>
</form>
</body>
</html>
Iar pe partea de server putem avea urmtorul script PHP
(insert.php):
<?php
$nume = $HTTP_POST_VARS[nume];
$medie_mat = $HTTP_POST_VARS[medie_mat];
$query = "INSERT nume, medie_matematica VALUES ('".
$nume."'," . $medie_mat. ") ".
"INTO tabela_catalog";
$result = mysql_query($query);
if (!$result) die ("Introducere esuata.
Motiv: ". mysql.error());
?>

Test de autoevaluare
12.3 Completai funcia JavaScript din exemplul de mai sus pentru
a verifica i corectitudinea completrii cmpului medie matematic.

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 140.

139

Capacitatea de a folosi informaii din baze de date n cadrul paginilor Web

Rspunsuri i comentarii la ntrebrile din testele de evaluare


Problema 12.1.
SELECT tabela_catalog.nume
FROM tabela_catalog, tabela_clasa
WHERE
((tabela_catalog.nr_clasa=tabela_clasa.nr_clasa)
AND
(tabela_clasa.denumire= 'VII-a B ') AND
(tabela_catalog.medie_matematica>5) AND
(tabela_catalog.medie_limba_materna>5) AND
(tabela_catalog.medie_geografie>5) AND
(tabela_catalog.medie_istorie>5))
ORDER BY tabela_catalog.nume ASC;
Problema 12.2.
Se modific din exemplul de la pagina 136 doar fraza SQL:
SELECT tabela_catalog.nume,
tabela_catalog.medie_matematica
FROM tabela_catalog, tabela_clasa
WHERE
(tabela_catalog.nr_clasa=tabela_clasa.nr_clasa)
ORDER BY tabela_clasa.denumire,
tabela_catalog.medie_matematica DESC;
Problema 12.3.
javascript:
if(window.document.info_form.nume.value=='')
{window.alert('Completati numele!');
window.document.info_form.nume.focus();}
else {
if(window.document.info_form.medie_mat.value=='')
{window.alert('Completati media de la
matematica!');
window.document.info_form.medie_mat.focus();}
else {window.document.info_form.submit();}}

Bibliografie
3. Luke Welling i Laura Thomson, Dezvoltarea aplicaiilor web
cu PHP i MySQL, Editia a II-a, Editura Teora, 2005
4. Manualul PHP - http://php.net/manual/ro/index.php

140

XML i folosirea lui n pagina WEB

Unitatea de nvare Nr. 13


XML I FOLOSIREA LUI IN PAGINA WEB.

Obiectivele Unitii de nvare Nr.13

142

13.1 Introducere n XML

142

13.2 Caracteristici ale XML

143

13.3 Sintaxa XML

144

13.4 Modul de folosire a XML n pagina Web

146

Rspunsuri i comentarii la ntrebrile din testele de evaluare

149

Bibliografie

149

141

XML i folosirea lui n pagina WEB

Obiectivele Unitii de nvare Nr.13:

Principalele obiective ale Unitii de nvare Nr. 13 sunt:

Ce este limbajul XML i la ce poate fi folosit


Ce este i care este structura unui document XML
Cum poate fi folosit un document XML ntr-o pagin
HTML

13.1 Introducere n XML


Limbajul XML (eXtended Markup Language) este un nou limbaj de
adnotare, care este folosit intens de tehnologiile software actuale
pentru schimburi de informaii ntre diverse aplicaii din Internet sau
reele. n cazul n care aceste aplicaii funcioneaz conform unor
standarde diferite, XML este limbajul comun n care acestea pot
schimba informaii. Aceast facilitate este foarte important n cazul
comunicrii datelor ntre companii i firme. Dac este folosit XML nici
una din companii nu trebuie s cunoasc modul de structurare a
datelor n baza de date a partenerului ci doar s stie structura XML
de export a acestor date pentru a avea acces la informaiile
necesare.
XML nu este un nlocuitor al HTML, ci este mai degrab un
complement al acestuia. n vreme ce n cazul HTML atenia este
orientat spre modul n care trebuie s fie afiat informaia coninut
de directivele HTML, XML este realizat cu unicul scop de a oferi
suport pentru structurarea informaiilor.
La realizarea acestui limbaj s-au stabilit urmtoarele obiective:

Limbajul XML
nu poate
executa nici o
operaie

142

XML va fi compatibil cu SGML (un alt limbaj de adnotare).


Documentele XML vor putea fi uor citite i interpretate de
ctre om.
Documentele XML vor putea fi proiectate i realizate uor.
Programele pentru a interpreta documentul XML trebuie s
poat fi realizate uor.
S fie destul de flexibil pentru a putea fi utilizat ntr-o gam
larg de aplicaii.

Limbajul XML nu este conceput s ofere instruciuni pentru execuia


unor operaii, ci este conceput pentru a npacheta informaia cu
scopul de a fi trimis sau stocat. Pentru a face ceva cu aceste date
cineva trebuie s scrie un program ntr-un limbaj de programare
oarecare care s interpreteze aceste date i s le foloseasc ntr-un
anume scop.

XML i folosirea lui n pagina WEB

Iat un exemplu de fiier XML:


<?xml version="1.0" encoding="iso-8859-1" ?>
<articol>
<titlu>
Impozitarea tranzactiilor imobiliare
</titlu>
<descriere>
Terenurile sunt din ce in ce mai
scumpe in Capitala dupa ce ...
</descriere>
<URL>
http://stiri.ro/articol123.html
</URL>
</articol>
<articol>
...
</articol>
n exemplul de mai sus se constat c este vorba despre un
document XML care ar putea fi folosit de o aplicaie ce afieaz
revista presei. Documentul XML din exemplul de mai sus conine
informaii despre articolele disponibile n ziarele de azi

Nume articol - <titlu>


O scurt descriere - <descriere>
Locaia unde poate fi gsit acest articol - <URL>

Se vede c n acest document sunt prezente numai informaii cu


privire la structura sau tipul datelor i binenteles datele propriuzise.
Acestea vor putea fi folosite de ctre o aplicaie care s afieaze
revista presei folosind datele din acest document XML care ar putea
fi transmise periodic de la un server.

13.2 Caracteristici ale XML


Principalele caracteristici ale XML sunt:
o XML nu are directive predefinite, acestea vor fi relizate n
momentul proiectrii documentului XML n funcie de scopul
acestuia i tipul sau structura datelor.
o Pentru descrierea directivelor folosite, XML utilizeaz un set
de reguli denumit DTD (Document Type Definition) sau o
schem XML. mpreun cu aceast schem se spune despre
XML c este autodescriptiv.
o Documentul XML trebuie s respecte strict regulile definite n
DTD pentru a fi un document valid.
o Documentele XML au o structur strict (Well-formed). Asta
nseam c documentul trebuie s respecte anumite reguli de
sintax prezentate n Unitatea de nvare urmtoare.
143

XML i folosirea lui n pagina WEB

o XML este un limbaj de adnotare complementar cu HTML i


NU nlocuiete HTML. Cele dou limbaje, dup cum s-a
artat, au scopuri distincte: HTML afieaz informaii ce apar
n pagin Web, n timp ce XML descrie aceste informaii.

13.3 Sintaxa XML


Un document XML este format din dou blocuri principale astfel:

Antetul documentului care cuprinde la rndul su:


o Declaraia XML Se afl ntotdeauna pe prima linia a
documentului i conine informaii despre versiunea
XML i standardul de codificare al caracterelor.
o Declaraia DTD
care conine informaii despre
structura documentului. Documentul este verificat dac
este valid sau nu conform cu aceast declaraie
Documentul XML propriuzis Un document XML are o
structur arborescent avnd un singur element rdcin
marcat de o pereche de directive XML. Toate celelalte
elemente sunt descendeni i coninute n interiorul
elementului rdcin Un element poate conine la rndul su
alte subelemente.

Un exemplu complet:

Declaraia
XML

Declaraia
DTD

Elementul
rdcin

<? xml version="1.0" encoding="iso-8859-1"?>


<!DOCTYPE mesaj [
<!ELEMENT email (destinatie,sursa,mesaj)>
<!ELEMENT destinatie (#PCDATA)>
<!ELEMENT sursa
(#PCDATA)>
<!ELEMENT mesaj
(titlu,continut)>
<!ELEMENT titlu
(#PCDATA)>
<!ELEMENT continut
(#PCDATA)>
]>
<email>
<destinatie>Daniel</destinatie>
<sursa>Ana</sursa>
<mesaj>
<titlu>Intalnire diseara! </titlu>
<continut>
Ne intelnim diseara!
</continut>
</mesaj>
</email>
n exemplul de mai sus:
o Prima linie reprezint Declaraia XML,
o Este urmat de Declaraia DTD care conine reguli despre
structura documentului ntr-un anumit format
o Documentul XML propriuzis are ca element rdcin
elementul
reprezentat
cu
ajutorul
directivei

144

XML i folosirea lui n pagina WEB

<email></email>. Elementele care urmeaz marcate de


directivele <destinatie>, <sursa> i <mesaj> sunt
descendeni de rangul 1. Elementul <mesaj> are la rndul
su descendeni elementele marcate de directivele <titlu> i
<coninut>. Nivelul de imbricare poate continua att ct este
nevoie i nu sunt stabilite limite.
Directive
XML

Directivele XML sunt identificatori pentru elementele XML i sunt


plasate ca i n cazul directivelor HTML ntre paranteze ascuite < i
> Iat care sunt regulile pentru folosirea directivelor XML:
Orice directiv, ex. <directiv>, trebuie s aib o directiv pereche de
ncheiere ex </directiv>. Omiterea directivei de ncheiere nu este
permis ca n cazul unor directive HTML
Directivele XML sunt sensibile la scrierea cu majuscule sau litere
mici prin urmare directiva <Titlu> este diferit de directiva <titlu>.
n cazul n care se folosesc mai multe niveluri de imbricare ordinea
nchiderii directivelor trebuie s fie invers dect ordinea n care au
fost deschise.
Pentru elementele care nu conin text se poate folosi o alt
modalitate de definire a directivelor.. Iat cum:
<directiva />
Se observ c s-a folosit un caracter / dup numele
elementului. n acest caz NU se mai specific directiva pereche de
ncheiere

Atribute
XML

Directivele XML pot avea atribute pentru a putea specifica informaii


suplimentare despre acel element. Atributele sunt definite sub form
de perechi nume-valoare. Valorile atributelor se scriu obligatoriu ntre
ghilimele ca n exemplul de mai jos:
...
<mesaj data=01/08/2005>
...
</mesaj>
...
n XML se pot folosi comentarii care au o sintax similar cu cea din
HTML, adic:
<!-- Orice text explicativ --!>
Acestea pot aprea oriunde n documentul XML.

145

XML i folosirea lui n pagina WEB

Test de autoevaluare
13.1 XML poate fi considerat ca fiind o alta versiune de HTML?

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 149.

13.4 Modul de folosire a XML n pagina Web


Aa cum am spus mai sus XML a fost realizat ca un limbaj folosit
pentru a structura datele pentru a fi trimise spre prelucrare n cadrul
altor aplicaii. HTML are ca principal scop definirea modului n care
sunt afiate date.
Cele dou concepte pot fi folosite mpreun pentru a putea separa
datele care trebuiesc afiate de instruciunile de afiare ntr-o pagin
Web, implementnd astfel conceptul de insul de date i permind
afiarea, selectiv sau total a datelor coninute ntr-un document
XML ntr-o pagin HTML
Acest lucru este posibil utiliznd n cadul paginii HTML directiva
HTML <XML> pentru a o lega pe aceasta de datele din fiierul XML
ca n exemplul de mai jos:
Presupunnd ca avem urmtorul fiier XML care contine date despre
studentii admisi la un anumit examen i nota obtinuta, ne propunem
s realizm o pagin HTML care s utilizeze datele din fiierul XML
pentru a afia un tabel cu studenii admii ntr-o pagin Web.

146

XML i folosirea lui n pagina WEB

Fiierul listaadmitere.xml:

Fiierul publicListaAdmitere.html
<HTML>
<HEAD>
<TITLE>
Exemplu Insula Date
</TITLE>
</HEAD>
<BODY>
<XML ID="admitere"
SRC="listaadmitere.xml"
async="false"></XML>
<TABLE BORDER="1"
DATASRC="#admitere">
<THEAD>
<TH> Nume Student </TH>
<TH> Nota </TH>
</THEAD>
<TR>
<TD>
<SPAN DATAFLD="nume">
</SPAN>
</TD>
<TD>
<SPAN DATAFLD="nota">
</SPAN>
</TD>
</TR>
</TABLE>
</BODY>
<HTML>

Deschiderea paginii publicListaAdmitere n browser va avea ca


rezultat afiarea datelor din fiierul XML sub forma unui tabel a crui
form de afiare a fost definit n pagina HTML precum n figura 13.1:

147

XML i folosirea lui n pagina WEB

Figura 13.1 Exemplu insula de date.


Test de autoevaluare
13.2 Definii conceptul de insul de date.

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 149.

148

XML i folosirea lui n pagina WEB

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 13.1.
NU XML este un limbaj de adnotare complementar cu HTML i NU
nlocuiete HTML. Cele dou limbaje, dup cum s-a artat, au
scopuri distincte: HTML afieaz informaii ce apar n pagin Web, n
timp ce XML descrie aceste informaii. Revedei indicaiile din
seciunea 11.1.

ntrebarea 13.2.
Conceptul de insul de date se refer la separarea datelor de afiat
de instruciunile de afiare dintr-un document HTML. Datele vor fi
citite dintr-un document XML i afiate conform instruciunilor de
afiare din documentul HTML. Pentru nelmuriri revedei seciunea
11.4.
Indicaii la problemele propuse
Problemele propuse n lucrrile de verificare se fac dup modelele
de exemple prezentate n unitatea de nvare sau dup tipicul
acestora.

Bibliografie
5. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i
XML, Editura Printech Bucureti 2004, pg.59-82
6. http://www.w3schools.com/default.asp

149

Foi de stil

Unitatea de nvare Nr. 14


FOI DE STIL

Obiectivele Unitii de nvare Nr.14

151

14.1 Foi de stil n HTML CSS

151

14.2 Cum funcioneaz stilurile n HTML

152

14.3 Adugarea foilor de stil n documentul HTML

153

14.4 Proprieti CSS

156

Lucrare de verificare a Unitilor de nvare Nr. 10, 11, 12, 13 i 14

157

Rspunsuri i comentarii la ntrebrile din testele de evaluare

159

Bibliografie

159

150

Foi de stil

Obiectivele Unitii de nvare Nr. 14:


Dup parcurgerea acestei Unitii de nvare vei tii:

Care sunt avantajele folosirii foilor de stil


Sintaxa folosit pentru definirea unei foi de stil
Metode de folosire a informaiilor de stil ntr-un
document HTML

14.1 Foi de stil n HTML - CSS

Foie de stil

Stilurile CSS au fost recent adugate la limbajul HTML cu scopul de


a aduga mai multe faciliti pentru controlul modului de apariie al
paginii. ncepnd cu HTML 4, toate instruciunile de formatare pot fi
definite n afara documentului HTML ntr-o strucutr denumit foaie
de stil.
n literatura de specialitate foile de stil sunt referite de acronimul CSS
care vine de la Cascading Style Sheets. Cuvntul Cascading
nseamn n cascad i se refer la modul de aplicare al acestor
stiluri asupra elementelor din pagina WEB .atunci cnd sunt folosite
simultat mai multe foi de stil.

Avantaje

Acestea sunt avantajele folosirii foilor de stil:

Dezavantaje

Separarea instruciunilor de formatare de structura


documentului HTML
Documentele HTML care folosesc foi de stil pot avea
dimensiuni mai mici
Site-uri mai uor de meninut. Prin folosirea unui set comun de
foi de still pentru toate paginile HTML se poate schimba
nfiarea unui site care conine sute de pagini WEB prin
editarea unui singur fiier.

Dezavantajul este c nc exist browsere care nu au implementat


suport pentru foi de stil. Dar chiar si pentru acest dezavantaj exist
un remediu. Paginile de web pot fi iniial realizate fr a folosi
facilitile de stil.
n acest fel se poate verifica modul n care acestea sunt afiate de
browserele fr suport pentru CSS. Informaiile de stil urmd a fi
adugate pe urm pstrnd n acelai timp nealterat coninutul
documentului HTML.

151

Foi de stil

14.2 Cum funcioneaz stilurile n HTML


Sintaxa
de baz

O foaie de stil const n una sau mai multe reguli care descriu modul
n care un element dintr-o pagin HTML va fi afiat. O regul ntr-o
foie de stil are urmtorul format:
selector{proprietate:valoare}
unde:

Selector

selector identific elementul HTML pentru care se specific modul


de afiare. Practic orice element HTML poate fi un posibil selector
CSS. n exemplul de mai jos, P este un selector de stil i va defini
pentru elementele de tip <P> din documentul care folosete aceast
foie de stil dimensiunea fontului de 12 puncte
P {font-size: 12pt;}

Proprietate
-valoare

Declaratie

proprietate i valoare definesc stilul care va fi aplicat elementului


identificat de selector. Proprietatea este separat de valoare prin
caracterul : urmat de un spaiu. Aceast pereche, proprietatevaloare, este ncadrat ntre acolade i reprezint declaraia stilului.
O declaraie de stil poate conine mai multe perechi proprietatevaloare separate prin caracterul ; ca n exemplul de mai jos:
P {font-size: 12pt;
font-face: Arial}
Declaraie

Gruparea
stilurilor

Pentru a nu folosi n mod repetat aceeai declaraie pentru mai multe


tipuri de elemente, CSS ofer posibilitatea gruprii selectorilor. Spre
exemplu toate titlurile dintr-un document HTML pot fi configurate s
aib anumite proprieti comune:
H1, H2, H3, H4, H5, H6 {
color: blue;
font-face: Arial}

152

Foi de stil

Test de autoevaluare
14.1 Care este principalul avantaj al folosirii foilor de stil la
realizarea paginilor de WEB?

14.2 Ce este un selector ntr-o foaie de stil?

Rspunsurile corecte i comentarii asupra acestora se gsesc la pagina 159.

14.3 Adugarea foilor de stil n documentul HTML


Regulile i seturile de reguli pot fi incluse n documentul HTML n trei
feluri: ca stiluri inline, ca foaie de stil intern sau ca foie de stil extern.
Stiluri
INLINE

Stilurile inline.sunt adugate fiecrui element HTML n parte prin


folosirea atributului STYLE care este disponibil pentru majoritatea
directivelor HTML. Valoarea atributului este reprezentat de una sau
mai multe declaraii de stil ca n exemplul de mai jos:

<H1 STYLE="color: blue">


Acest titlu este albastru
</H1>
sau:
<P
STYLE="font-size: 12pt;
font-face: Verdana">
Acesta este un paragraf
inline.

cu

stilul

definit

Dei este o construcie perfect valabil pentru HTML, nu este


recomandat deoarece nici unul din avantajele foilor de stil nu poate
fi folosit n acest caz. Dac se dorete modificarea modului de
afiare pentru un set de elemente este necesar intervenia n
documentul HTML asupra fiecrui element n parte.
Foi
interne de
stil

O metod mult mai compact i mai eficient este folosirea foilor


interne de stil. O foaie intern de stil se definete n headerul
documentului HTML folosind directiva pereche <STYLE> </STYLE>.
153

Foi de stil

n interiorul acestui element se pot defini stilurile elementelor din


pagin folosind sintaxa descris mai sus, Spre exemplu:
<STYLE TYPE=test/css>
<!-P {color: blue};
H1, H2, H3, H4, H5{
color: aqua;
font-size: 12pt
}
--}
</STYLE>
Se observ c n interiorul elementului STYLE declaraiile de stil sunt
ncadrate de comentariu HTML: <!-- i -->. Aceasta este pentru cazul
n care pagina este vizualizat ntr-un browser care nu suport foi de
stil, pentru a evita afiarea informaiilor din cadrul acestui element n
pagin.
O foaie intern de stil se poate aplica unui singur document HTML.
Aceasta poate modifica aspectul paginii pstrnd n acelai timp
nealterat coninutul documentului HTML.
Foi
externe
de stil

Legarea

Cea mai puternic metod de folosire a foilor de stil este de a le


defini pe toate n interiorul unui fiier separat la care s se fac
referire n toate documentele HTML care vor folosi acest stil. Aceste
foi de stil poart denumirea de foi externe de stil, iar pentru referirea
lor exist dou modaliti.
Legarea (linking) Este cea mai des folosit metod i const n
folosirea directivei <LINK>. Aceast directiv se definete n
interiorul headerului .

<LINK>
Funcionalitate:
Import o foaie de stil dintr-un fiier
Atribute:
HREF
REL
TYPE
Directiva de sfrit:
</LINK> OBLIGATORIE

154

Foi de stil

Iat un exemplu de folosire a acestei directive pentru importarea unei


foi de stil definit ntr-un fiier stilulmeu.css extern aflat n acelai
director cu documentul HTML:
<HEAD>
<LINK
REL="STYLESHEET"
HREF="stilulmeu.css"
TYPE="text/css">
</HEAD>
Atributul
REL
Atributul
HREF
Atributul
TYPE

Atributul REL Definete relaia dintre documentul HTML i fiierul


cu care se face legtura o foaie de stil: STYLESHEET.
Atributul HREF Reprezint URL-ul fiierului care conine
declaraiile de stil.
Atributul TYPE Definete formatul fiierului ce conine informaiile
de stil. Se folosete valoarea text/css.

Import O metod alternativ pentru folosirea foilor externe de stil


este folosirea directivei <STYLE> mpreun cu declaraia @import
dup cum este artat n exemplul de mai jos:
<STYLE
TYPE="text/css">
<!-@import url(http://stiluri.ro/stilulmeu.css);
@import url(altstil.css);
DT { background: yellow;
color: black }
-->
</STYLE>
Declaraia @import trebuie s fie nainte de orice alt declaraie de
stil.

Test de autoevaluare
14.3 Enumerai metodele de adugare a informaiilor de stil ntr-o
pagin HTML.

Rspunsul corect i comentarii asupra acestuia se gsesc la pagina 159.

155

Foi de stil

14.4 Proprieti CSS


O foaie de stil este compus dintr-un set de instruciuni de afiare.
Fiecare instruciune este la rndul su compus dintr-un selector
care identific elementul cruia i se aplic stilul i o declaraie care
definete modul n care va fi afiat elementul respectiv. O declaraie
este o colecie de proprieti CSS.
O proprietate CSS este o construcie de forma nume/valoare. CSS
mparte aceste proprieti in cteva categorii pricipale. Vom enumera
aceste categorii i vom trece n revist proprietile din fiecare
categorie n parte. Pentru o list complet a proprietilor disponibile
recomandm consultarea materialelor din bibliografie.
Proprietati
ale
fontului

Proprieti ale fontului - Aceste proprieti definesc aspectul grafic al


textului afiat. Majoritatea modific caracteristicile fontului cu care
este afiat textul. Iat cteva exemple de astfel de proprieti:

font-family definete tipul fontului folosit pentru afiarea


textului

font-size definete dimensiunea fontului folosit pentru


afiarea textului

font-style definete modul de afiare a fontului: bold,


italic, subliniat
Exemplu de utilizare
P {font-family: Arial;
font-size: 14pt;
font-style: italic
}
Proprietati
pentru text

Proprieti pentru text - Aceste proprieti definesc modul de aliniere,


i spaiere la afiarea unui text. Iat cteva exemple de astfel de
proprieti:

letter-spacing definete dimesiunea spaiului ntre litere


text-align definete modul de aliniere al textului
text-intend definete spaiul folosint pentru intendarea
textului

Exemplu de utilizare:
P {letter-spacing: 0.1em;
text-align: center
text-intend: 5em
}

156

Foi de stil

Proprietati
pentru
spatierea
elementelor

Proprieti pentru spaierea elementelor - Aceste proprieti sunt


folosite pentru a definii spaiul dintre elemente HTML, marginile
acestora i alte aspecte privind poziionarea lor. Iat cteva exemple
de astfel de proprieti:

Proprietati
pentru
definirea
culorilor

Proprietati
pentru
definirea
fundalului

padding-top definete dimensiunea spaiului ce va fi pus


ntre coninutul elementului i marginea superioar
padding-right - definete dimensiunea spaiului ce va fi pus
ntre coninutul elementului i marginea dreapt
padding-left similar cu padding-right pentru stnga.

Proprieti pentru definirea culorilor:

color - Aceast proprietate este folosit pentru a defini


culoarea textului din cadrul elementului specificat de ctre
selector. Culoarea poate fi specificat fie prin codul RGB, fie
prin numele predefinit.

Proprieti pentru definirea fundalului - Aceste proprieti sunt folosite


pentru a definii caracteristicile fundalului pentru elementul specificat
de ctre selector. Iat cteva exemple de astfel de proprieti:

background-color definete culoarea fundalului


backround-image definete imaginea ce va fi afiat ca
fundal.

Lucrare de verificare a Unitilor de nvare Nr. 10, 11, 12, 13 i 14


1. Realizai un formular de nscriere pentru un concurs n care s
solicitai numele, data naterii, adresa potal i adresa de email.
Validai datele cu ajutorul unui script client de tip JavaScript.
Preluai datele introduse cu ajutorul unei pagini PHP i introduceile ntr-o baz de date.
Predai fiierul HTML i cel PHP n format electronic ca rezultate al
rezolvrii lucrrii de verificare.
Putei porni n rezolvarea problemei de la exemplul din exerciiul
12.3 din testul de evaluare al unitii de nvare nr. 12.
Nr. puncte: 7 (4p. scrierea corect a codului HTML i JavaScript
din cadrul formularului, 3p scrierea corect a codului PHP de
inserare n baza de date)
2. Realizai o pagin Web care s includ un applet Java al crui
cod se afl n fiierul film.class. Appletul are deja scris codul
pentru a rula un film de la un anumit URL ns acest URL trebuie
transmis ca parametru de intrare. Poziionai appletul n centrul
157

Foi de stil

paginii.
Predai fiierul HTML n format electronic ca rezultat al rezolvrii
lucrrii de verificare
Ca ajutor suplimentar n rezolvarea lucrii se recopmand
utilizarea reperului bibliografic numrul 1 din bibliografia unitii de
nvare nr.10.
Nr. puncte: 6 (3p. utilizarea corect a directivei APPLET, 2p utilizarea atributului PARAM, 1p - poziionarea apletului pe centrul
paginii )
3. Realizai un document XML care s descrie i s conin
informaii despre produsele unui magazin, precum: Nume produs,
descriere, pret, cantitate etc. Realizai pe urm un document
HTML care s afieze aceste date din fiierul XML sub form de
tabel.
Predai documentele n format electronic (un fiier HTML i un
fiier XML) ca rezultat al rezolvrii lucrrii de verificare.
Ca ajutor suplimentar n rezolvarea lucrii se recopmand
utilizarea reperului bibliografic numrul 1 din bibliografia unitii de
nvare nr.11.
Nr. puncte: 6 (3p realizarea corect a fiierului XML, 3p
realizarea fiierului HTML care s afieze infirmaiile din cadrul
documentului XML)
4. Definii un fiier stilulmeu.css pe care s l folosii pentru a
construi o pagin HTML care s formateze elementele folosind
foaia de stil din fiierul stilulmeu.css. Stilurile definite n acest fiier
trebuie s afecteze urmtoarele elemente din pagina HTML:
H1, H2 , H3 s fie scris cu font Veranda cu culoarea
galbena
Textul din documentul HTML s fie scris cu font de
dimensiunea 10pt, culoarea textului s fie alb, iar
culoarea de fundal s fie neagr.
Predai fiierul stilulmeu.css precum i documentul HTML n format
electronic ca rezultat al rezolvrii lucrrii de verificare
Ca ajutor suplimentar n rezolvarea lucrii se recopmand
utilizarea reperului bibliografic numrul 1 din bibliografia unitii de
nvare.
Nr. puncte: 6 (4p definirea corect n cadrul foii de stil a
atributelor cerute, 2p folosirea foii de stil in cadrul documentului
HTML)

158

Foi de stil

Rspunsuri i comentarii la ntrebrile din testele de evaluare


ntrebarea 14.1.
Principalul avantaj este separarea informaiilor de formatare de
structura documentului HTML i posibilitatea modificrii modului de
afiare a paginii fr a intervenii n documentul HTML. Pentru
nelmuriri revedei seciunea 14.1.

ntrebarea 14.2.
Un selector, este acea parte dintr-o regula CSS care identific
elementul HTML pentru care se specific modul de afiare. A se
revedea seciunea 14.2.

ntrebarea 14.3.
Informaiile de stil pot fi adugate ntr-un document HTML folosind
una din cele 3 metode: adugarea informaiilor inline, folosirea foilor
interne de stil, folosirea foilor de stil definite ntr-un fiier extern.
Consultai seciunea 14.3.
Indicaii la problemele propuse
Problemele propuse n lucrrile de verificare se fac dup modelele
de exemple prezentate n unitatea de nvare sau dup tipicul
acestora.

Bibliografie
1. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i
XML, Editura Printech Bucureti 2004, pg.51-53
2. Sabin Buraga Proiectarea siturilor Web. Design i
funcionalitate, Ediia a II-a, Editura Polirom 2002, pg. 163-195
3. Clin Ioan Acu Optimizarea paginilor Web, Editura Polirom
2003, pg. 35-73
4. Richard Wagner, R.Allen Wyke Java Script, Editura Teora
2000, pg.481-495

159

Foi de stil

BIBLIOGRAFIE

1. Clin Ioan Acu Optimizarea paginilor Web, Editura Polirom 2003


2. Cioata Mihai ActiveX. Concepte si aplicatii Editura: Polirom 2003
3. Dorin Crstoiu, Ecaterina Oltean Introducere n HTML i XML, Editura Printech
Bucureti 2004
4. Luke Welling i Laura Thomson, Dezvoltarea aplicaiilor web cu PHP i MySQL,
Editia a II-a, Editura Teora, 2005
5. Manualul PHP - http://php.net/manual/ro/index.php
6. Mihaela Brut, Sabin Buraga - Prezentari multimedia pe Web. Limbajele XHTML +
TIME i SMIL Editura Polirom 2003
7. McFedries Paul, Trad Voin, Doru Sorin Crearea paginilor WEB, Editura ALL 2003
8. Negrino Tom, Smith Dori - JavaScript pentru World Wide Web. Ghid de invatare
rapida prin imagini, Editura Corint 2004
9. Richard Wagner, R.Allen Wyke Java Script, Editura Teora 2000
10. Sabin Buraga Proiectarea siturilor Web. Design i funcionalitate, Ediia a II-a,
Editura Polirom 2002
11. T.Gugoiu HTML prin exemple, Editura Teora 2000
12. http://www.w3schools.com/default.asp

160

ANEXA 1 Lucrri de laborator


Sesiunea de lucru de laborator L1
Setul de lucrri are ca structur aprofundarea i consolidarea cunotinelor dobndite n
cadrul Unitilor de nvare Nr.1 i 2.
Sesiunii de laborator i sunt alocate 4 ore. Se recomand a se efectua sub supravegherea
cadrului didactic.
Pentru efectuarea laboratorului este necesar utilizarea unui editor de texte, spre exemplu:
Windows Notepad, i a unui program de navigare internet: Internet Explorer
Obiectivele acestei sesiuni de lucru sunt:

nsuirea unor noiuni de baz din domeniul reelelor de calculatoare

nsuirea pailor necesari ntr-un ciclu de realizare-vizualizare rezultat, pentru o


pagin Web

nsuirea regulilor de sintax pentru directivele HTML

nsuirea modului de definire a culorilor pentru elementele HTML


n cadrul lucrrii de laborator numarul 2 se recomand efectuarea urmtoarelor tipuri de
activiti:

Discuie pe tema noiunilor introduse n Unitatea de nvare numrul 1 cu scopul


de a clarifica nelmuriri n ceea ce privete arhitectura World Wide Web sau Internet

Efectuarea unui exerciiu la calculator, asistat de tutore pas cu pas care s


urmreasc clarificarea pailor necesari ntr-un ciclu de realizare-vizualizare rezultat,
pentru o pagin WEB

Discuie despre structura de baz a unui document HTML (schelet) i despre reguli
ce privesc sintaxa directivelor HTML

Efectuarea unui exerciiu la calculator care s urmreasc definirea i utilizarea


corect a culorilor ntr-un document HTML

Sesiunea de lucru de laborator L2


Setul de lucrri are ca structur aprofundarea i consolidarea cunotinelor dobndite n
cadrul Unitilor de nvare Nr.3 i 4.
Sesiunii de laborator i sunt alocate 4 ore. Se recomand a se efectua sub supravegherea
cadrului didactic.
Pentru efectuarea laboratorului este necesar utilizarea unui editor de texte, spre exemplu:
Windows Notepad, i a unui program de navigare internet: Internet Explorer
Obiectivele acestei sesiuni de lucru sunt:

Definirea i folosirea titluri i paragrafe n HTML

Definirea i folosirea directivelor HTML pentru formatare logic

Definirea i folosirea directivelor HTML pentru formatare fizic

Definirea i folosirea listelor n limbajul HTML


n cadrul lucrrii de laborator numarul 2 se recomand efectuarea urmtoarelor tipuri de
activiti:
161


Discuie pe tema formatrii textelor HTML n care se vor clarifica noiunile nsuite
n Unitatea de nvare numrul 3 legate de formatare textelor cu ajutorul HTML

Efectuarea unui exerciiu la calculator care s urmreasc nsuirea noiunilor i


tehnicilor de formatare a textelor HTML.

Discuie pe tema celor 3 tipuri de liste HTML n care se vor clarifica noiunile
nsuite n Unitatea de nvare numrul 4 legate de utilizarea listelor HTML

Efectuarea unui exerciiu la calculator care s urmreasc nsuirea modului de


definire a listelor in limbajul HTML.

Sesiunea de lucru de laborator L3


Setul de lucrri are ca structur aprofundarea i consolidarea cunotinelor dobndite n
cadrul Unitilor de nvare Nr. 5, i 6.
Sesiunii de laborator i sunt alocate 4 ore. Se recomand a se efectua sub supravegherea
cadrului didactic.
Pentru efectuarea laboratorului este necesar utilizarea unui editor de texte, spre exemplu:
Windows Notepad, i a unui program de navigare internet: Internet Explorer
Obiectivele acestei sesiuni de lucru sunt:

nelegerea conceptelor de Hypertext, Hyperlink i URL

Definirea i folosirea legturilor n cadrul paginilor Web

ntelegerea formatelor grafice folosite in Web

ntelegerea modului de adugare i utilizare a imaginilor ntr-o pagina Web


n cadrul lucrrii de laborator numarul 3 se recomand efectuarea urmtoarelor tipuri de
activiti:

Discuie teoretic pe marginea conceptelor de Hypertext, Hyperlink i URL. Se va


urmri clarificarea acestor concepte, i nelegerea modului de folosire al acestor concepte
n cadrul paginilor WEB

Efectuarea unui exerciiu la calculator care s urmreasc nsuirea noiunilor i


tehnicilor de utilizare a linkurilor n cadrul paginilor HTML.

Discuie asupra tipurilor de formate grafice folosite pentru realizarea paginilor WEB,
avantajele i dezavantajele fiecrui tip de format.

Discuie teoretic pe tema utilizrii imaginilor n cadrul paginilor WEB cu scopul


clarificrii noiunilor din cadrul Unitii de nvare numrul 6

Efectuarea unui exerciiu la calculator care s urmreasc nsuirea modului de


folosire a imaginilor, integrare, aliniere, dimensionare n pagina HTML

Sesiunea de lucru de laborator L4


Setul de lucrri are ca structur aprofundarea i consolidarea cunotinelor dobndite n
cadrul Unitii de nvare Nr.7
Sesiunii de laborator i sunt alocate 4 ore. Se recomand a se efectua sub supravegherea
cadrului didactic.
Pentru efectuarea laboratorului este necesar utilizarea unui editor de texte, spre exemplu:
Windows Notepad, i a unui program de navigare internet: Internet Explorer
162

Obiectivele acestei sesiuni de lucru sunt:

nelegerea modului de realizare i de configurare al tabelelor HTML

Explicarea prilor componente ale unui tabel HTML i a modului n care


proprietile acestora pot fi schimbate

Prezentarea diferitelor moduri de folosire a tabelelor n pagina HTML


In cadrul lucrrii de laborator numarul 4 se recomand efectuarea urmtoarelor tipuri de
activiti:

Explicarea modului de utilizare a tabelelor i clarificarea noiunilor prezentate n


Unitatea de nvare numrul 7.

Efectuarea unui exerciiu la calculator care s urmreasc nsuirea modului de


definire i folosire a tabelelor HTML

Sesiunea de lucru de laborator L5


Setul de lucrri are ca structur aprofundarea i consolidarea cunotinelor dobndite n
cadrul Unitii de nvare Nr. 8.
Sesiunii de laborator i sunt alocate 4 ore. Se recomand a se efectua sub supravegherea
cadrului didactic.
Pentru efectuarea laboratorului este necesar utilizarea unui editor de texte, spre exemplu:
Windows Notepad, i a unui program de navigare internet: Internet Explorer
Obiectivele acestei sesiuni de lucru sunt:

Clarificarea conceptului de formular HTML

Explicarea modului de folosire al fiecrui tip de element din cadrul unui formular
HTML

nelegerea modului de folosire al formularelor HTML


n cadrul lucrrii de laborator numarul 5 se recomand efectuarea urmtoarelor tipuri de
activiti:

Discuie asupra modului de utilizare a tabelelor i clarificarea noiunilor prezentate


n Unitatea de nvare numrul 8.

Efectuarea unui exerciiu la calculator care s urmreasc nsuirea modului de


definire i folosire a formularelor HTML. Exerciiul ar trebui sa acopere modul de folosire al
fiecrui tip de element din cadrul unui formular HTML

Sesiunea de lucru de laborator L6


Setul de lucrri are ca structur aprofundarea i consolidarea cunotinelor dobndite n
cadrul Unitilor de nvare Nr. 9 i 10.
Sesiunii de laborator i sunt alocate 4 ore. Se recomand a se efectua sub supravegherea
cadrului didactic.
Pentru efectuarea laboratorului este necesar utilizarea unui editor de texte, spre exemplu:
Windows Notepad, i a unui program de navigare internet: Internet Explorer, precum i
accesul la componente JavaApplets i/sau ActiveX.
Obiectivele acestei sesiuni de lucru sunt:
163


nelegerea rolului limbajului JavaScript

Clarificare noiunilor de tip script pe partea de client, Evenimente i tratarea


acestora

nelegerea modului de folosire al JavaScript n cadrul unui document HTML

Clarificarea aspectelor legate de folosirea executabilelor i componentelor


multimedia n pagina WEB
n cadrul lucrrii de laborator numarul 6 se recomand efectuarea urmtoarelor tipuri de
activiti:

Discuie asupra modului de utilizare a tabelelor i clarificarea noiunilor prezentate


n Unitatea de nvare numrul 8.

Efectuarea unui exerciiu la calculator care s urmreasc nsuirea modului de


definire i folosire a formularelor HTML. Exerciiul ar trebui sa acopere modul de folosire al
fiecrui tip de element din cadrul unui formular HTML

Efectuarea unui exerciiu la calculator care s urmreasc nsuirea modului de


folosire al diferitelor tipuri de componente multimedia i executabile n cadrul unei pagini
WEB

Sesiunea de lucru de laborator L7


Setul de lucrri are ca structur aprofundarea i consolidarea cunotinelor dobndite n
cadrul Unitilor de nvare Nr. 11 i 12
Sesiunii de laborator i sunt alocate 2 ore. Se recomand a se efectua sub supravegherea
cadrului didactic.
Pentru efectuarea laboratorului este necesar utilizarea unui editor de texte, spre exemplu:
Notepad++, sau a unui editor specializat PHP, a unui server web cu extensia PHP
instalat, a unui server de baze de date MySQL i a unui program de navigare internet:
Internet Explorer sau FireFox.
Obiectivele acestei sesiuni de lucru sunt:

Clarificarea noiunilor legate de limbajul PHP precum variabile, constante, sintax,


funcii i obiecte.

Includerea de cod PHP n cadrul paginilor HTML.

Familiarizarea cu noiunile de baz legate de limbajul SQL.

Utilizarea informaiilor din cadrul unei baze de date n cadrul unei pagini web.
n cadrul lucrrii de laborator numarul 7 se recomand efectuarea urmtoarelor tipuri de
activiti:

Explicarea noiunilor de baz legate de limbajul PHP.

Efectuarea unui exerciiu la calculator care s pun n practic noiunile nvate


despre limbajul PHP.

Discuie legat de sistemele de baze de date i despre limbajul SQL.

Efectuarea unui exerciiu la calculator care s urmreasc nsuirea tehnicilor de


utilizare a bazelor de date n cadrul paginilor web.

164

Sesiunea de lucru de laborator L8


Setul de lucrri are ca structur aprofundarea i consolidarea cunotinelor dobndite n
cadrul Unitilor de nvare Nr. 13 i 14
Sesiunii de laborator i sunt alocate 2 ore. Se recomand a se efectua sub supravegherea
cadrului didactic.
Pentru efectuarea laboratorului este necesar utilizarea unui editor de texte, spre exemplu:
Windows Notepad, i a unui program de navigare internet: Internet Explorer
Obiectivele acestei sesiuni de lucru sunt:

Clarificarea noiunilor legate de XML precum definiii, sintax, caracteristici

Clarificarea modului de folosire al XML n cadrul unei pagini WEB, i a conceptului


de separare a datelor utile de interfaa grafic

Clarificarea noiunii de pagin de stil.

Evidenierea avantajelor folosirii paginilor de stil


n cadrul lucrrii de laborator numrul 8 se recomand efectuarea urmtoarelor tipuri de
activiti:

Discuie asupra conceptelor de baz XML i clarificarea noiunilor de baz

Efectuarea unui exerciiu la calculator care s urmreasc nsuirea noiunilor


fundamentale ale limbajului XML.

Discuie asupra modului de utilizare al paginilor de stil n cadrul unei pagini WEB

Efectuarea unui exerciiu la calculator care s urmreasc nsuirea modului de


folosire al paginilor de stil

165

Felicitri pentru parcurgerea acestui modul! Acesta reprezint un prim pas in vastul
domeniu al Internetului care este ntr-o continu evoluie. Si acum va dorim succes n
realizarea paginilor de WEB pe care le vei realiza!

166

Proiect cofinanat din Fondul Social European prin Programul Operaional Sectorial Dezvoltarea Resurselor Umane 2007-2013
Investete n oameni!

Formarea profesional a cadrelor didactice


din nvmntul preuniversitar
pentru noi oportuniti de dezvoltare n carier

Unitatea de Management al
Proiectelor cu Finanare Extern
Str. Spiru Haret nr. 12, Etaj 2,
Sector 1, Cod potal 010176,
Bucureti
Tel: 021 305 59 99
Fax: 021 305 59 89
http://conversii.pmu.ro
e-mail: conversii@pmu.ro

IS

BN

97

8-

60

6-

51

5-

13

0-

S-ar putea să vă placă și