Sunteți pe pagina 1din 134

WEB DESIGN I E-COMMERCE

2011

CUPRINS
I. INTRODUCERE N REALIZARAEA PAGINILOR WEB..................................................................4
I.1. C E ESTE O PAGIN WEB ?..................................................................................................................4
I.2. E LEMENTELE UNUI SITE WEB............................................................................................................5
I.3. I NSTRUMENTE PENTRU DEZVOLTAREA PAGINILOR WEB................................................................8
II. INTRODUCERE N LIMBAJUL HTML.............................................................................................11
II.1.
II.2.
II.3.
II.4.
II.5.

C E ESTE LIMBAJUL HTML?..........................................................................................................11


S TRUCTURA UNUI FIIER HTML..................................................................................................13
D IRECTIVE ( TAG - URI ) HTML.......................................................................................................14
A TRIBUTE .........................................................................................................................................15
F ORMATAREA DOCUMENTELOR HTML ..........................................................................................17

III. ALTE COMPONENTE N PAGINI HTML........................................................................................24


III.1.
III.2.
III.3.
III.4.

L ISTE N PAGINI WEB....................................................................................................................24


A NCORE ( LINK - URI )......................................................................................................................29
I NSERARE IMAGINI ........................................................................................................................33
I NSERARE TABELE .........................................................................................................................36

IV. COMPONENTE DINAMICE IN HTML.............................................................................................40


IV.1.
IV.2.
IV.3.
IV.4.

U TILIZARE FORM N PAGINI WEB................................................................................................40


D IRECTIVE INPUT ..........................................................................................................................42
D IRECTIVA SELECT ........................................................................................................................44
D IRECTIVA TEXTAREA ..................................................................................................................47

V. ALTE ELEMENTE DE DESIGN N PAGINI WEB...........................................................................51


V.1. A FIAREA PAGINILOR N FERESTRE ..............................................................................................51
V.2. S TILURI N HTML..........................................................................................................................53
V.3. C ARACTERE SPECIALE ....................................................................................................................56
VI. REALIZAREA DE PAGINI WEB CU EDITOARE SPECIALIZATE...........................................58
VI.1.
VI.2.
VI.3.
VI.4.
VI.5.
VI.6.

I NSTALARE I LANSARE EDITOR K OMPO Z ER.............................................................................58


I NTERFAA EDITORULUI K OMPO Z ER..........................................................................................60
U TILIZARE K OMPO Z ER.................................................................................................................62
I NSERAREA DE TABELE .................................................................................................................68
L INKURI I IMAGINI ......................................................................................................................74
F ORME ............................................................................................................................................78

VII. CREAREA UNUI SITE WEB.............................................................................................................85


VII.1. S ERVICII DE GZDUIRE WEB.......................................................................................................85
VII.2. NREGISTRAREA SI CONFIGURAREA UNUI NUME DE DOMENIU ...............................................86
VII.3. NCARCAREA PAGINILOR WEB PE SITE ......................................................................................87
VIII. DEZVOLTAREA UNUI SITE PERSONAL/FAMILIAL..............................................................90
VIII.1. U TILIZAREA ABLOANELOR PENTRTU SITE - URI .....................................................................90
VIII.2. P ERSONALIZAREA ABLONULUI ................................................................................................93
VIII.3. P UBLICARE SITE .........................................................................................................................95
IX. REALIZARE SITE PENTRU O COMPANIE....................................................................................98
IX.1. D E CE UN SITE WEB PENTRU O COMPANIE ?...............................................................................98
IX.2. P ERSONALIZAREA ABLONULUI ................................................................................................102
IX.3. P REGTIRE PENTRU PUBLICARE SITE ........................................................................................102
X. E-COMMERCE......................................................................................................................................104
X.1. I NTRODUCERE N E - COMMERCE ..................................................................................................104
X.2. C OMPARAIE COMER TRADIIONAL , COMER ELECTRONIC ..................................................106
X.3. C REAREA UNUI MAGAZINE ELECTRONIC . M ODALITI DE PLAT .........................................109

X.4. L EGISLAIE

COMER ELECTRONIC .............................................................................................114

XI. DEZVOLTARE MAGAZIN ON LINE UTILIZND INSTRUMENTE PAYPAL....................117


XI.1.
XI.2.
XI.3.
XI.4.

U TILIZAREA UNUI TEMPLATE PENTRU MAGAZIN VIRTUAL ....................................................117


I NTEGRAREA CODULUI HTML PENTRU A DD TO C ART ............................................................118
V IZUALIZAREA CONINUTULUI COULUI VIRTUAL .................................................................124
E FECTUAREA PLAII ...................................................................................................................125

XII. DEZVOLTAREA UNUI MAGAZIN ON LINE CU PROCESARE ROMCARD......................128


XII.1. P ROCESAREA DE TRANZACII ON LINE N R OMNIA ............................................................128
XII.2. C REAREA MODULULUI DE PLAT 3D S ECURE .......................................................................130

I. INTRODUCERE N
REALIZARAEA PAGINILOR

WEB
Pe parcursul acestui capitol vei nva despre:
Ce este o pagin WEB?
Elementele uni site web
Instrumente pentru realizarea paginilor web

I.1. CE ESTE O PAGIN WEB ?


Word Wide Web (www sau w3) este un sistem de ninuire a
documentelor hypertext accesate prin Internet. Pentru realizarea
paginilor web este utilizat un limbaj de adnotare (marcare), limbajul
HTML.
World Wide Web (pe scurt WWW) este un serviciu ce permite
accesul la informaia stocat pe un calculator aflat oriunde n
lume, iar denumirea sa (n traducere pnz de pianjen extins
n lumea ntreag) pune n eviden acest lucru.
Cu ajutorul unui web browser paginile web ce contin text,
imagini, componente video sau alte componente multimedia pot
fi vizualizate i se poate naviga ntre ele utiliznd ancorele sau
legturile. Sunt utilizate conceptele vechilor sisteme hypertext,
cunoscut ca HTML(HyperText Markup Language), limbaj
dezvoltat iniial de Tim Berners-Lee n 1989, inginer la CERN
(European Organization for Nuclear Research), apoi director al
World Wide Consortium. Limbajul a fost vzut ca o posibilitate
de a schimba informaii ntre fizicienii care utilizau calculatoare
diferite prin intermediul Internet. n 1990 Berners-Lee si
specialistul belgian n calculatoare Robert Cailliau iniiaz un
proiect n care propun s utilizeze HyperText pentru a lega i
accesa informaii de diverse tipuri ca fragmente web, pe care
utilizatorii le pot urmri. Proiectul devine public n decembrie
1990 i a avut un succes cu mult mai mare dect i-au imaginat
iniiatorii. WWW a fost dezvoltat ca reunind o multime de
cunotine si culturi ocupaionale care s permit colaborarea
oamenilor aflai n diverse locaii pentru a mprti ideii i a
4

discuta de alte aspecte relative la proiectele comune la care


lucreaz.
Chiar dac termenii Internet i World Wide Web sunt utilizai
aproape zilnic, nu trebuie facut confuzia ca sunt unul i acelai
lucru. Internet este sitemul global care interconecteaz reelele
de calculatoare, pe cnd Web este unul dintre serviciile
furnizate de Internet prin execuia unei aplicaii specifice.
Dac analizm modul de organizare
pot fi mprite in trei categorii:

a documentelor, acestea

organizare liniar (de tip eseu). Pentru a nelege textul


respectiv, parcurgerea se face secvenial, de la nceput la
sfrit. Este cazul majoritii operelor literare.

organizare ierarhic, arborescent, pe mai multe niveluri.


Dac o lucrare este structurat pe capitole, cu seciuni
introductive i seciuni cu informaii aprofundate, un
nceptor poate parcurge eventual doar nivelul seciunilor
introductive din fiecare capitol. Evident c, ordinea de
parcurgere a textului nu mai este n acest caz secvenial.

organizarea asociativ, n reele de informaii, similar cu


organizarea memoriei i gndirii umane. n acest caz,
informaia dintr-o lucrare poate fi parcurs secvenial, dar se
poate urma i un anumit fir prin tehnici de tip note de
subsol, cutare prin tabela de indeci, urmrirea referirilor la
alte seciuni sau lucrri. Lectorul are un rol activ, el fiind cel
ce selecteaz parcursul n reeaua informaional. Acesta este
cazul documentelor hypertext.

I.2. ELEMENTELE UNUI SITE WEB


Fiecare cititor are o experien anterioar de navigare pe
Internet, el vizitnd probabil mai multe site-uri diferite. Multe
dintre acestea sunt foarte populare din punctul de vedere al
numrului de vizitatori cum sunt: yahoo.com, amazon.com,
google.com, ziare.ro, bestjobs.ro si multe altele.
Pentru a accesa un site web, calculatoarul de la care facem acest
lucru trebuie sa aib o conexiune la Internet. Daca in cadrul
companiilor legatura la Internet este asigurat pentru
majoritatea calculatoarelor, pentru utilizatorii casnici conectarea
la Internet este asigurat de catre furnizorii de servicii, cum
sunt: RDS&RCS (legatura pe cablu sau fibra), Romtelecom prin
serviciul clicknet (conexiune ASDL pe linia telefonic),
operatori de telefonie mobila etc. Remarcm faptul c exist o

multitudine de modaliti pentru acces la Internet chiar i pentru


zonele rurale. Companiile care asigur servicii de conectare la
Internet sunt cunoscute prin denumirea de ISP (Internet Service
Provider).
Vizitarea unei pagini web de pe un calculator conectat la
Internet presupune pornirea unui browser web i introducerea
numelui de domeniu al site-ului vizitat n bara de adrese a
browserului.

Fig 1.1 Captur ecran site web yahoo vizualizat cu browser


Mozilla Firefox
Au aparut doi termeni noi:

Browser numit i browser Internet, browser web,


navigator web sau explorator web, cuvnt de origine engleza,
este o aplicaie software care permite utilizatorilor s afieze
text, grafic, muzic, video i alte informaii localizate pe o
pagin web, dar i schimb de informaii ntre utilizator i siteul web. Pe pia sunt o mulime de browsere, cele mai
cunoscute fiind: Microsoft Internet Explorer, Mozilla Firefox,
Apple Safari, Google Crome, Opera, Nintendo.

Nume de domeniu reprezint adresa care se scrie in bara de


adrese a browserului web pentru a vizita site-ul web dorit.

Pentru a realiza un site web este nevoie s se cunoasc mai nti


componentele de baz ale oricrui site web. Orice site web are
urmtoarele componente:

Server web Un server web este un calculator conectat la


Internet avnd rolul de a furniza o locaie pentru paginile web
ale unui site web i de manipulare a cererilor sosite pentru
paginile web pstrate.

Nume de domeniu numele de domeniu al site-ului web este


un identificator unic pentru acel site, similar cu adresa potal
a persoanelor i identific n mod unic serverul web ce
gzduiete site-ul web.

Pagini web colecia de fiiere ce alctuiesc site-ul web.


Coninutul site-ului este dat de coninutul tuturor paginilor.

Am vzut c orice site web este gazduit de un server web. Cnd


vizitm un site web, browserul formuleaz o cerere ctre
serverul web, cerere la care serverul returneaz pagina
solocitat ce va fi afiat de ctre browser, similar cum am
artat n fig. 1.1. Fig. 1.2 arat aceast interaciune fr a intra
n detalii care nu trebuie s ne preocupe.

Fig.1.2 Interaciune browser, server web


Exist milioane de site-uri web publicate. Ca urmare este foarte
important metoda prin care fiecare site este identificat n mod
unic. Aa cum am precizat, identificarea este fcut prin
intermediul numelui de domeniu, nume care se alege pentru a fi
uor de reinut, dar i relevant pentru coninutul site-ului. De
cele mai multe ori utilizatorii ajung la un site ca urmare a unei
cutri dup cuvinte pe care le doresc n con inut. Uneori,
alegerea unui nume de domeniu este simpl, alegerea fiind o
continuare fireasc a numelui persoanei, firmei sau domeniului
pe care l va promova. Alterori, numele este indisponibil n
sensul ca a fost achiziionat deja de cineva. Statistic, 80% din
cuvintele din dictionarul limbii engleze sunt deja nregistrate.
Numele de domeniu se ncheie cu un gen de extensie format
din punct urmat de dou sau mai multe litere cu semnificaii
bine precizate. Dintre cele mai cunoscute extensii amintim:

.edu creat pentru site-uri avnd coninut educativ


(prescurtare de la Education)

.com creat pentru companii si comer online (Comercial)

.org creat special pentru organizaii (Organization)

.gov creat special pentru organizaii guvernamentale

.net creat special pentru reele i Internet (Network)

.ro creat special pentru site-rile si companiile care


promoveaz afacerile n Romnia

Elementele atomice constructive pentru site-urile web sunt


paginile web. Atunci cand vizitai un site web n browser va fi
afiat o pagin individual. n realitate fiecare pagin web este
un fiier care este identificat unic printr-un URL. Un Uniform
Resource
Locator
(URL)
are
urmtoarea
form:
http://NumeDomeniu/NumeFisierPagin . Pentru a solicita
serverului web o anumit pagin n browser se va introduce
URL-ul paginii web. Concret, pentru a vizualiza o pagin nu
este neaparat introducerea URL-ului, ci doar introducerea
numelui de domeniu al site-ului, ceea ce face ca o anumit
pagin s fie afiat, pagin numit i pagina de start din care se
poate ajunge uor la celelalte pagini ale site-ului.
Un site web este format dintr-un numar de pagini web ce sunt
identificate unic de un URL. Chiar dac o pagin poate fi
acceszat prin specificarea URL-ului acest lucru se face de
foarte puine ori. De regul se acceseaz pagina de baz i prin
intermediul hiperlegturilor se va ajunge la celelalte pagini ale
site-ului. Vom discuta mai trziu ce sunt i cum se realizeaz
hiperlegturile. n figura 1.1 am ilustrat accesarea paginii de
baza a site-ului Yahoo.

I.3. INSTRUMENTE PENTRU DEZVOLTAREA PAGINILOR WEB


Pentru dezvoltarea de pagini web se poate utiliza orice editor
ASCII n care se realizeaz sursa paginii web. Acest lucru nu
este foarte comod ntruct dezvoltatorul trebuie s introduc
toate marcajele specifice, astfel nct pagina s fie afiat n
formatul dorit. Dezvoltarea paginilor poate fi fcut utiliznd
editorul de texte Notepad existent n grupul accesorii la sistemul
Windows. Pentru a face ct mai simpl crearea de pagini web au
fost dezvoltate o mulime de instrumente software proiectate
special pentru realizarea paginilor web. Cu ajutorul
instrumentelor specializate se pot realiza pagini web n mod
vizual fr a scrie cod efectiv, ci doar apelnd la operaii simple
efectuate cu mouse-ul. Un alt avantaj major al utilizrii acestor
instrumente este marcat de existena unor abloane
8

specializate ,ce pot fi personalizate, de la care se pornete


dezvoltarea. Cu toate acestea cunoaterea limbajelor de realizare
este foarte importanta pentru a rafina codul ori ce cte ori este
necesar.
Cteva dintre instrumentele utilizate la realizarea site-urilor
web:

Microsoft FrontPage. Microsoft FrontPage este un editor


HTML profesional pentru design, codare i dezvoltare de
siteuri web, pagini web, aplicaii web. Fie c se dorete
controlul total asupra codului HTML prin scrierea de mn
a acestuia, fie c se dorete utilizarea unui mediu de editare
vizual, FrontPage ofer uneltele necesare, mbuntind de
asemenea experiena web. Facilitile vizuale din FrontPage
permit crearea de pagini web fr scrierea nici unui rnd de
cod. Se pot vizualiza toate elementele site-ului i se pot aduce
(drag and drop) component direct n document. De asemenea,
se pot importa i edita imagini direct n document. FrontPage
include unelte i faciliti legate de programare (n HTML
view), Cascade Style Sheets (CSS) i Active Server Pages
(ASP). Utiliznd limbajul de server ASP se pot construi siteuri web dinamice, care asigur accesul la baze de date.
Licenierea costa aproximativ 150$, pachetul fiind destinat
dezvoltatorilor web profesioniti.

Macromedia DreamWeaver. Este un pachet software cu o


interfa prietenoas care ofer posibilitatea de a utiliza
instrumentele componente, de la un nivel sczut pana la un
nivel ultra-profesional. Pachetul Macromedia pentru
realizarea paginilor web cuprinde programe precum:
Fireworks (utilizat n spe pentru crearea elementelor active
din pagin: butoane, cmpuri i diverse grafice); Freehand cu
atribute similare cu Fireworks; Director (un instrument
deosebit de util pentru crearea aplicaiilor interactive,
utiliznd scriptul lingo (movie script) ca mediu principal de
programare, descriind toate instanele i posibilitile de
manipulare pentru frame-uri i nu n ultimul rnd
DreamWeaver (prin intermediul cruia adugm toate
aplicaiile create). El este practic programul de implementare
i constituire propriu-zis a paginilor web. DreamWeaver, ca
si celelalte programe axate pe crearea i implementarea
aplicaiilor complexe, permite lucrul n doua medii: interfa
grafic de editare i cel de script prin care se pot insera coduri
pentru completarea i crearea de aplicaii (acestea sunt deja
subtiliti tehnice). Dreamweaver permite lucrul cu HTML,
PHP, JavaScript, ASP VB Script, CSS (pentru crearea de
stiluri i fonturi diferite). DreamWeaver Exchange trimite prin
intermediul unui link la pagina Macromedia de unde se pot
achiziiona diverse widget-uri pentru a face din pagina web o

prezentare deosebit de atractiv. ntradevr, facilitile oferite


sunt deosebite, dar i costurile de liceniere sunt pe msur,
pachetul Dreamweawer cost aproximativ 600$, cost pe
deplin justificat pentru crearea site-urilor profesionale.

Mozilla KompoZer. Este un instrument sufficient de bun i


gratuit oferit de oraganizaia Mozilla, organizaie care a creat
i intreine i browserul gratuit Mozilla. Consider c
instrumentul pus la dispoziie de Mozilla poate fi utilizat
pentru realizarea de site-uri web de complexitate acceptabil.
n plus este uor de folosit i are o interfa intuitiv.

Sarcin de lucru
1. Utiliznd browserul instalat pe calculatorul propriu
(Internet Explorer sau Mozilla Firefox deschidei
pagina google.com i cautai informaii suplimentare
despre
Microsoft
FrontPage,
Macromedia
DreamWeaver, Mozilla KompoZer.

10

II. INTRODUCERE N
LIMBAJUL

HTML

Pe parcursul acestui capitol vei nva despre:


Ce este limbajul HTML?
Structura unui fisier HTML
Directive (marcaje, etichete, tag-uri)
Atribute HTML
Formatarea documentelor HTML

II.1. CE ESTE LIMBAJUL HTML?


HyperText Markup Language (HTML) este, aa cum i spune i
numele, un limbaj de marcare (adnotare) utilizat pentru crearea
paginilor web care pot fi afiate ntr-un browser. Limbajul este
specializat n prezentarea informaiei, nu n definirea structurilor de
date. Etichetele (directive sau tag-uri) specific browserului modul n
care elementele de coninut sunt afiate.
Principala component introdus de HTML este directiva,
marcajul, eticheta sau tag-ul. Intr-un document HTML pe lng
informaia brut sunt incluse directive pentru a fi interpretate de
ctre browser. Prima referire la HTML s-a realizat ntr-un
document numit HTML Tags care descrie 22 de elemente ale
acestui limbaj, elemente care asigur un design simplu. Prin
intermediul marcajelor se specific browserului modul n care o
component a documentului va fi prezentat n pagina web.
HTML nu definete o anumit structur de date, ci doar modul
n care o informaie este afiat.
Organizarea asociativ a informaiilor presupune definirea unor
noduri, reprezentate de concepte, i a unor arce ca legturi
ntre noduri, reprezentnd relaiile logice dintre concepte. Se
obine astfel un graf sau o reea semantic. Informaiile
tiinifice se preteaz cel mai bine la acest tip de organizare, iar
suportul adecvat de implementare este oferit de calculatoarele
11

electronice conectate la Internet. Un alt avantaj al acestora, n


momentul de fa, este posibilitatea de vizualizare, pe lng
text, a figurilor, imaginilor i filmelor, precum i nsoirea
imaginilor cu sunete. n plus, informaii vaste pot fi accesate
rapid. Acest tip de sisteme se numesc sisteme hipertext i
hipermedia.
Din perspectiva definiiei de mai sus, ntr-un sistem hipertext se
disting urmtoarele elemente fundamentale:
nodurile (paginile),
informaii;

reprezentate

de

blocuri

unitare

de

ancorele (intele) reprezentnd fragmente unitare de noduri (de


exemplu n interfeele grafice se ntlnesc cuvinte evideniate n
text, imagini tip icoan, butoane Next/Previous, iar legturile de
la acestea se activeaz prin comand de la tastatur sau mouse
etc.)
legturile ntre noduri, avnd drept punct de plecare, fie ntregul
nod surs, fie o ancor a sa.
Exploatarea unui hipertext presupune deci navigarea de la un
nod la altul, prin activarea legturilor.
n afara definiiei precedente, se mai pot considera i alte
caracterizri pentru hipertext, dintre care enumerm succint
dou:

Hipertextul este un text cu mai multe dimensiuni explicite,


spre deosebire de textele uzuale liniare.

Hipertextul este o modalitate de comunicare


calculator, avnd drept interfa chiar hipertextul.

om-

Termenul hipertext a fost folosit n 1704 de matematicianul F.


Klein n legtur cu introducerea conceptului de spaiu
hiperbolic sau hiperspaiu, n geometria multidimensional de
aici accepiunea de text multidimensional. n 1962 Douglas
Engelbart dezvolt primul sistem hipertext Conceptual
Framework for Augmenting Human Intellect, iar mouse-ul a
fost inventat pentru a uura utilizarea acestui sistem. n prezent
sistemele hipertext se ntlnesc att n help-ul interactiv al unor
aplicaii (cum ar fi help-ul aplicaiei AdobeAcrobat sau help-ul
mediului de simulare MATLAB), ct i n sisteme de inteligen
artificial.
Una din cele mai importante aplicaii ale hipertextului este
World Wide Web, care poate fi considerat un hipertext la scar
planetar. Organizarea acestui hipertext se realizeaz cu ajutorul
HTML.

12

II.2. STRUCTURA UNUI FIIER HTML


O pagin web este similar cu un document ce conine o
anumit informaie, document salvat ca un fiier avnd extensia
specific (.html sau .htm). Pentru a scrie un document HTML
este necesar un editor de text (editor ASCII), ca de exemplu
Notepad sau orice alt program dedicat pentru dezvoltarea
paginilor web.
Pentru a realiza formatri ntr-o pagin web, limbajul HTML
folosete elemente specifice numite marcaje sau etichete (taguri). ntruct un fiier surs HTML conine numai caractere
ASCII, pentru a putea fi interpretate de ctre browser, etichetele
sunt marginite de simboluri speciale (paranteze ascuite).
Fiecare marcaj (cu unele excepii, care se doresc eliminate n
versiunile HTML noi) apare n pereche: etichet de nceput
naintea componentei creia i se aplic i etichet de sfrit
dup componenta creia i se aplic. Coninutul dintre eticheta
de nceput i cea de sfrit este afiat corespunztor efectului
etichetei care l mrginete.
Obs: La anumite marcaje eticheta de sfrit poate lipsi fr s
produc eroare la interpretare, ns standardul nu ncurajaz
omiterea marcajului de sfrit.
Un fiier surs HTML este similar cu oricare alt fiier surs ce
folosete limbaje de adnotare (ex, LaTeX) i este compus din
dou mari seciuni preambul (head) i corp (body). Informaia
din preambul nu este afiat de browser, coninutul vizibil n
browser este cel prezent n seciunea body.
<html>
<head>
Directive coninnd informaii generale despre pagin
</head>
<body>
Coninutul paginii incluznd texte i directive
</body>
</html>
Fig.2.1 Structura seneral a unui fiier html
Explicaii:
Prima directiv n documentul HTML este <html> i marcheaz,
pentru browser, nceputul fiierului, iar ultima directiv din
document este </html> prin ea marcnd sfritul fiierului
HTML. Orice coninut n fiierul surs situat dup directiva
</html> va fi ignorat nefiind interpretat de ctre browser.

13

Blocul cuprins ntre directivele <head> i </head> reprezint


informaia din header i nu apare la afiarea paginii, exceptnd
informaia aferent titlului, dac o astfel de directiv este
prezent.
Seciunea cuprins ntre directivele <body> i </body>
constituie informaia afiat de browser i formatat
corespunztor marcajelor cuprinse n seciune.
Obs:. Dei un fiier HTML se poate edita uor folosind editoare
WYSIWYG (WhatYyou See Is What You Get), cum ar fi
FrontPage, Mozilla KompoZer sau AdobePageMill, totui,
pentru o bun nsuire a limbajului HTML se recomand
realizarea sursei cu editoare de text generale de exemplu
Notepad - care necesit respectarea sintaxei i semanticii
limbajului de interpretare a directivelor.

II.3. DIRECTIVE ( TAG -URI) HTML


Vom ilustra utilizarea directivelor HTML pentru construcia
unei pagini simple utiliznd editorul Notepad. Pentru a crea
pagina se dechide editorul Notepad urmnd calea: Start /
Programs / Accesories / Notepad. Cu ajutorul editorului vom
crea un fiier avnd coninutul din figura 2.2, care va fi salvat
cu numele pagina1.htm. Etichetele pot fi scrise cu litere mari
sau litere mici, fr s afecteze interpretarea. Este foarte
important extensia fiierului htm sau html pentru a fi
recunoscut de browser ca fiind pagina HTML.
Dac pagina conine diacritice se va alege ca optiune la salvare
ENCODING UNICODE. Dac nu sunt incluse diacritice poate
fi salvat ca ANSI.

Fig.2.2 Fiier HTML pagina1.htm

14

Pentru vizualizarea rezultatului fiierul realizat va fi deschis cu


un browser (Internet Explorer, Mozilla sau oricare alt browser
disponibil). Rezultatul afiarii este ilustrat n fig. 2.3.

Fig.2.3 Vizualizare pagina1.htm


Textul dintre etichetele <html> i </html> descrie pagina web.
Textul cuprins ntre etichetele <head> i </head> nu este afiat, n
afar de titlu dac o astfel de etichet este prezent.
Textul cuprins ntre etichetele <body> i </body> reprezint
coninutul vizbil al paginii web.
n bara de adrese se afiaz calea de unde a fost ncrcat fiierul.
n tab se afiaz titlul paginii specificat ntre etichetele <title> i
</title>. Dac titlul lipsete n tab se afiaz numele fiierului.
O pereche de directive delimiteaz un element HTML, iar
informaia cuprins ntre directiva de nceput i cea de sfrit
reprezint coninutul elementului.
Limbajul HTML conine un numr predefinit de etichete ce vor
fi explicate pe msur ce se introduc. Vom prezenta etichetele
des utilizate n realizarea paginilor HTML, informaii
suplimentare despre limbajul HTML se gsesc la adresa:
http://www.w3schools.com/html/ .

II.4. ATRIBUTE
Atributele asociate etichetelor reprezint o modalitate de a furniza
informaii suplimentare despre tratarea elementelor HTML.
Atributele sunt ntotdeauna specificate n cadrul etichetei de nceput
sub forma nume=valoare, n care nume reprezint numele
atributului i valoarea asociat este pus ntre ghilimele.

15

O etichet poate avea mai multe atribute, numrul acestora fiind


dependent de etichet. Dac o etichet are mai multe atribute ,
acestea sun t separate prin spaiu.
Unele dintre etichete pot avea asociate atribute specificate n
cadrul etichetei de nceput. Formatul general de introducere a
atributelor este:
<nume_eticheta nume_atr1=valoare nume_atr2=valoare...>.
Toate valorile atributelor indiferent de tipul lor sunt plasate
ntre ghilimele.
n unele cazuri, destul de rare, cnd valorile atributelor conin
ghilimele este necesar s se utilizeze ghilimele simple pentru
delimitarea valorii, ca n exemplul: nume=Mirceacel batrn.
Numele atributelor i valorile atributelor nu sunt case sensitive.
Cu toate acestea, World Wide Web Consortium (W3C)
recomand atribute i valori scrise cu liter mic n
recomandarile pentru viitoarele versiuni.
Cteva exemple:

La eticheta <BODY> atributul BGCOLOR indic ce culoare


va avea fundalul (background n limba englez) viitoarei
pagini web. Tote culorile n HTML, sunt definite specific
printr-un cod asociat. Astfel, dac se dorete ca fundalul
paginii s fie verde, se va scrie astfel: <body
bgcolor=#347C17>. Codurile culorilor se pot gsi, pe
Internet,
la
diverse
adrese
printre
care:
http://www.computerhope.com/htmcolor.htm,
http://htmlcolor-codes.info/ etc.

La eticheta paragraph, care specific un paragraf nou, se poate


seta prin intermediul atributelor alinierea corespunztoare:
spre stnga (valoarea left), centrat (valoarea center), spre
dreapta (valoarea right) sau aliniere complet stnga
dreapta (valoare justify). Astfel, pentru a afia un paragraf
cu aliniere la stnga, se va utiliza atributul align cu valoarea
left ca in exemplul: <p align=left></p>.

Similar, pentru a scrie anumite poriuni de text cu litere de


diverse culori sau litere de diferite dimensiuni, se vor utiliza
atributele etichetei FONT ca n exemplul:

<FONT color=yellow size=12>

16

Text scris cu galben de dimensiune 12


pt(punct tipografic: 1 inch = 72.27 pt)
</FONT>

Utilizarea atributului style pentru un document


permite specificarea stilului local pentru un
element. Acest atribut supranscrie orice stil
specificat prin eticheta <style> sau stylesheet
Exemplu:

HTML
anumit
global
extern.

<h1 style="color:blue;text-align:center">
Acesta este un header
</h1>
<p style="color:green">Acesta este un paragraf</p>

II.5. FORMATAREA DOCUMENTELOR HTML


Similar oricrui alt document, documentele HTML necesit
formatare, care poate fi:
b) la nivel de document:
formatul pagini (A3, A4, A5)
marginile paginii
aezarea n pagin (pe lungime sau lime)
c) la nivel de paragraf:
alinierea unui paragraf;
spaiul dintre 2 paragrafe;
spaiul dintre liniile unui paragraf;
d) la nivel de caracter:
tipul caracterului;
dimensiunea caracterului;
spaiul dintre caractere.
II.5.1. Titluri
Un element important privind formatarea unui document se
refera la modul de afiare a titlurilor. De obicei ntr-o pagin
web se gsesc titluri i subtitluri, scrise cu diverse marimi de
caractere. Toate etichetele pentru titluri ncep cu litera "h" (de la
"heading") i se ncheie cu un numr de la unu la ase. n plus,
atunci cnd un text este prins ntre etichete de acest tip, textul
care urmeaz (dup eticheta de "sfrit titlu") este automat
prezentat mai jos, dup un rnd liber. Un exemplu de cod este
dat n figura 2.4 n care sunt utilizate cele 6 etichete pentru
titluri, de la cel mai mare la cel mai mic. Toate titlurile sunt
afiate cu supraimprimare (bold), pagina va fi vizualizat ca n
fig. 2.5.

17

Fig. 2.4 Titluri n HTML

Fig.2.5 Vizualizarea titlurilor


Dup ordinea mrimii (de la cel mai mare la cel mai mic)
titlurile sunt numerotate de la 1 la 6, astfel nct eticheta "<h1>
</h1>", este folosit pentru titlul avnd cele mai mari caractere,
iar eticheta "<h6> </h6>" este folosit pentru titluri avnd cele
mai mici caractere.
II.5.2. Paragrafe
Coninutul unui document poate fi mprit n paragrafe. Un
paragraf este separat de un alt paragraf printr-un spaiu
corespunztor, diferit de spaiul dintre dou rnduri. Pentru

18

marcarea nceputului unui paragraf se folosete eticheta <p>. O


etichet <p> nu necesit obligatoriu specificarea etichetei de
sfarit, cu toate c este recomnadabil s se utilizeze, ca n
exemplul:
<p>Accesta este coninutul unui paragraf.</p>
Dac nu se marcheaz sfritul unui paragraf o nou etichet
<p> determin trecerea la paragraf nou, fiind echivalent cu
marcarea sfritului paragrafului curent. Eticheta <p> poate fi
folosit n conjuncie cu atributul style pentru a preciza
elemente suplimentare privind modul de afiare a paragrafului.
n exemplul de mai jos textul paragrafului este scris cu verde i
textul este aliniat centrat n fereastra de afiare. Un paragraf se
poate ntinde pe mai multe rnduri respectnd spaierea dintre
rnduri, numrul de rnduri fiind dependent de lungimea
paragrafului i mrimea ferestrei de afiare.
<p style="color:green;text-align:center">
Accesta este coninutul unui paragraf.</p>
Trecerea forat la o linie nou este facut cu eticheta <br>.
Aceasta etichet nu delimiteaz un element i poate fi utilizat
in una din formele: <br>, </br>, <br />, toate cu acelai efect.
Atenie: <br> nu creaz un nou paragraf, ci trece la o linie nou.
Eticheta <hr>, fr a delimita un element insereaz o linie
orizontal in pagin pe toat limea acesteia.
n sursele HTML pot fi incuse comentarii ce sunt ignorate de
browser la afiarea paginii. Pentru a include un comentariu se
folosete un marcaj specific, ca n exempul:
<!Acesta este un comentariu ce nu este afiat de browser -->
II.5.3. Tipuri de caractere, culori, mrime
Directivele HTML pentru formatarea textului sau a paginii se
pot clasifica, dup funcionalitatea lor, n directive pentru
formatarea caracterelor textului i directive pentru configurarea
blocurilor de text (citri, indentri, definiii).
Pentru simplitate, iat n continuare o list a acestor directive, nsoit
de descrierea succint a semnificaiei, urmat de cteva exemple.

Tabelul 2.1 Etichete pentru formatarea caracterelor


Directiva
<b>

Semnificaia

Definete
bold

text

scris

cu

caractere

19

<big>
<blink>
<em>
<i>
<small>
<strong>
<sub>
<sup>
<ins>
<del>
<code>
<kbd>
<tt>
<var>
<pre>

Definete text scris cu caractere


mari
Text iluminat intermitent
Definete text scris cu caractere
evideniate
Definete text scris cu caractere
italice
Definete text scris cu caractere mici
Definete text scris cu caractere
evideniate
Definete text scris ca
indice
inferior
Definete text scris ca
indice
superior
Definete text inserat
Definete text ters
Definete text scris cu caractere
specifice pentru program surs
Definete
text
introdus
de
la
tastatur (keyboard)
Definete text scris cu caractere tip
teleprinter (teletype)
Definete o variabil
Definete text preformatat

Tabelul 2.2 Etichete pentru configurarea blocurilor de text


Directiva
<abbr>
<acronym>
<address>
<bdo>
<blockquote>
<q>
<cite>
<dfn>

Semnificaia

Definete
Definete
Definete
text
Definete
textului
Definete
Definete
Definete
Definete

o abreviere
un acronim
adresa unui element de
direcia

de

scriere

un bloc de text citat lung


un bloc de text citat scurt
o citare
un termen definiie

n fig.2.6 se ilustreaz utilizarea unor etichete pentru formatarea


caracterelor iar n fig. 2.7 pagina vizualizat n browser.

20

Fig. 2.6 Utilizare directive formatare caractere

Fig. 2.7 Afiare pagin

n fig.2.8 se ilustreaz folosirea unor etichete pentru formatarea


caracterelor si blocurilor de text, iar modul de vizualizare n browser
este artat n fig. 2.9

21

Fig. 2.8 Directive formatare caractere i blocuri

Fig. 2.9 Afiarea paginii cu directive de formatare caractere i blocuri


de text

Sarcin de lucru
Utiliznd exemplele prezentate s se realizeze o pagin web care
s conin urmtoarele elemente:

22

Titlul paginii: Exerciiul 2

Trei titluri scrise cu h1, h3, h4


Dupa fiecare titlu cte trei paragrafe n care se vor folosi
etichetele: <b>, <i>, <u>, <del>, <code>, <cite>, <q>,
<bdo>, <dfm>.

Cometai rezultatul afirii n browser.

23

III. ALTE COMPONENTE N


PAGINI

HTML

Pe parcursul acestui capitol vei nva despre:


Liste n pagini web
Ancore (link-uri)
Inserarea imaginilor
Tabele n pagini web

III.1. LISTE N PAGINI WEB


Listele sunt structuri ce conin o enumerare de informaii ntr-o
anumit ordine, fiecare fiind precedat de un simbol specific tipului
de list. n paginile web pot fi introduse liste ordonate, liste
neordonate i liste de definiii folosind etichetele HTML specifice.
HTML ofer etichete speciale pentru crearea a trei categorii de
liste, similare cu cele realizate cu editoarele de texte, obinnd
astfel: liste neordonate, liste ordonate i liste de definiii. O list
neordonat este o list fr numere de ordine (unordered list),
pe cnd o list ordonat este o list care conine numere de
ordine (ordered list). Att listele ordonate ct i cele neordonate
sunt compuse din elemente (item-uri), iar coninutul unui
element poate include ale elemente cum sunt:

Paragrafe;
Directive de trecere la rnd nou;
Imagini;
Link-uri (legturi, ancore);
Alte liste, etc.

O list neordonat, fr numere de ordine (unordered list)


ncepe cu directiva <ul>, iar fiecare element al listei va fi
marcat cu directiva <li>. Toate etichetele trebuiesc s aib i
eticheta de sfrit. Elementele unei liste nenumerotate sunt
afiate cu bullets. Structura tipic pentru introducerea unei
liste neordonate este:
24

<ul>
<li>Primul element din lista</li>
<li>Al doilea element din lista</li>
<!-- Alte elemente ale listei-->
<li>Ultimul element din lista</li>
</ul>
Listele ordonate au asociate numere de ordine (ordered list) i
ncep cu directiva <ol>. Elementele listei sunt marcate cu
aceeai etichet <li>. Similar cu listele nordonate trebuiesc
utilizate i etichetele de sfrit. Exemplu:
<ol>
<li>Primul element din lista</li>
<li>Al doilea element din lista</li>
<!Alte elemente din list-->
<li>Ultimul element din lista</li>
</ol>
Att etichetele pentru liste ordonate ct i cele pentru liste
neordonate pot avea asociate atribute prin care se specific alte
opiuni de numerotare sau simboluri asociate elementelor
componente. Implicit, se utilizeaz bullets pentru liste
neordonate i cifre arabe pentru liste neordonate, dar acestea pot
fi schimbate prin precizarea valorilor atributelor asociate.
Atributul type poate fi utilizat att la eticheta de nceput a listei
ordonate sau neordonate, ct i la etichetele de nceput ale
elementelor din list. Pentru liste neordonate atributul type
poate lua valorile: disc (cerc negrit), square (prtrat negrit) sau
circle (cerc), fiecare definind simbolul asociat. Pentru listele
ordonate valorile posibile ale atributului type sunt: 1, A, a, I, i
adic valori care definesc stilul de numerotare (cifre arabe,
litere mari, litere mici, cifre romane mari, cifre romane mici).
Utilizarea atributului type n eticheta de nceput a unui element
din list are ca efect schimbarea stilului de numerotare pentru
respectivul element, pstrnd ordinea de numerotare sau a
simbolului asociat elementului. La eticheta <li> atributul type
poate lua oricare dintre valorile precizate, indiferent de tipul
listei. Precizarea unui atribut type la eticheta de nceput a listei
definete modul de etichetare a elementelor din ntreaga list,
mod de etichetare ce poate fi schimbat la un element particular
al listei.
Pentru listele ordonate se poate utiliza i atributul start prin
care se precizeaz valoarea de nceput pentru numerotare.
n figura 3.1 este prezentat codul surs al seciunii unei pagini
n care s-a introdus o lista ordonat si o lista neordonat cu
atributele type i start att la eticheta de nceput a listei ct i la

25

eticheta de nceput a elementului. Pagina va fi afiat de


browser ca n fig. 3.2.

Fig. 3.1 Surs pagin HTML ce conine liste

Fig. 3.2 Afiarea paginii ce conine liste

26

Obs. O serie de alte atribute pot fi utilizate n conjuncie cu


fiierele css care permit specificarea modului de afiare a
paginilor web.
Pentru createa listelor de definiii limbajul HTML pune la
dispoziie trei tipuri de etichete. Eticheta de nceput <dl>
marcheaz nceputul unei liste de definitii, eticheta <dt> pentru
precizarea termenului din lista de definiii, iar eticheta <dd>
marginete txtul care descrie termenul definit. Lista de definiii
realizat prin codul HTML din fig. 3.3 este afiat de browser n
forma din fig. 3.4. n acest list TCP i IP reprezint termenii,
iar textele Transport Control Protocol, respectiv Internet
protocol constituie definiia termenului.

Fig. 3.3 Lista de definiii

Fig. 3.4 Afiarea listei de definiii

27

Sarcin de lucru
Pe un site, al crui titlu este Scriitori romni, se gsete
urmtoarea informaie: Cronicarii: cei mai cunoscui cronicari
sunt cei moldoveni si cei munteni. Printre cronicarii moldoveni
se numr: Miron Costin, Grigore Ureche i Ion Neculce.
Printre cronicarii munteni putem enumera pe: Radu Greceanu,
Radu Popescu, Constantin Cantacuzino, Stoica Ludescu.
Proprietarul site-ului este nemulumit de acest paragraf, pe care
l consider lung i dorete o organizare mai clar a acestuia,
sub form de liste. Pentru a ndeplini cerinele proprietarului
site-ului, ntr-un fiier Notepad se va scrie urmtoarea secven
de cod:
<html>
<head>
<title>Scriitori romani</title>
</head>
<body>
<h1 size=12>Cronicarii</h1>
<p>Cei mai cunoscui cronicari sunt: </p>
<ol>
<li>moldoveni</li>
<ul>
<li>Miron Costin</li>
<li>Grigore Ureche</li>
<li>Ion Neculce</li>
</ul>
<li>munteni</li>
<ul>
<li>Radu Greceanu</li>
<li>Radu Popescu</li>
<li>Constantin Cantacuzino</li>
<li>Stoica Ludescu</li>
</ul>
</ol>
</body>
</html>

Fiierul se va salva cu denumirea Pagina cronicari.html, i va


fi vizualizat cu ajutorului unui browser ca n fig. 3.5. Se observ
realizarea unei liste exterioare numerotat i a unei liste
interioare nenumerotat.

28

Fig. 3.5 Vizualizarea paginii Scriitori romni

III.2. ANCORE ( LINK -URI)


Ancorele sau link-urile (legturile) n HTML implementeaz practic
conceptul de hypertext. ntr-o pagin HTML prin intermediul
ancorei unul sau mai multe cuvinte au asociat o alt component ce
poate fi: alt pagin html, o imagine, o secven de sunet, film etc.
Cuvntul sau cuvintele succesive ce au asociat o alt
component sunt afiate n pagina surs n form hiperlink. n
momentul n care utilizatorul selecteaz cu mouse-ul zona
respectiv, automat browserul cere documentul asociat i l
afieaz pe ecran. O ancor poate referi un nou document, ce va
fi ncrcat sau va produce un salt la componenta asociat n
acelai document sau la un anumit marcaj n documentul nou
ncrcat. Pentru specificarea unui link folosim eticheta <a>,
etichet care are cel puin un atribut. Sintaxa unei ancore ce
refer un alt document ce va fi ncarcat in browser este:
<a href=url>Text afisat in pagina HTML printe </a>
unde url (Universal Resource Locator) reprezint adresa
specificat ca valoare a atributului href i poate fi:
relativ la pagina curent atunci cnd fiierul ce
conine documentul ce va fi ncrcat se gasete n acelai

29

director sau n unul din subdirectoarele directorului n


care se gsete pagina curent;
absolut atunci cnd se specific o cale complet pe
acelai server web ce conine pagina referit sau o adres
complet referind o alt maina server inclusiv calea
pna la documentul asociat

Implicit, textul afiat n pagina printe (surs) apare n toate


browserele astfel:
Un link nevizitat este subliniat i scris cu albastru
Un link vizitat este subliniat si scris cu purple
Un link activ este subliniat si scris cu rou
De exemplu:
<a href=http://www.w3schools.com/>Visit W3Schools!</a>
creeaz o legtur ctre site-ul W3Schools, iar textul din pagina
HTML surs este Visit W3Schools! .
O serie de alte atribute pot fi utilizate in conjuncie cu eticheta
<a>. Cele mai importante sunt:
charset specifica setul de caractere al documentului referit
prin link. Spre exemplu, charset="UTF-8" specific unul din
seturile suportate de cele mai multe browsere. Valoarea
implicit fiind ISO-8859-1.
coords permite specificarea de coordonate atunci cnd link-ul
este materializat printr-o parte a unei figuri din pagina surs.
Acesst atribut se utilizeaz mpreun cu shape, dar nu este de
toate browserele.
hreflang specific limba n care este scris documentul asociat,
limb ce este codificat printr-un set de valori. Ex: hreflang =
en, specific faptul c documentul asociat este scris n limba
englez.
target specific locul n care se deschide documentul asociat.
Valorile posibile pentru atribut sunt: _blank (ntr-o nou
fereastr), _self (n aceeai fereastr din care s-a apelat link-ul
valoare implicit), _parent (n framesetul printe), framename
(ntr-un frame specificat). Valoarea implicit este _self.
Atributul name permite crearea unor trimiteri chiar n interiorul
documentului HTML, astfel nct la parcurgerea paginii HTML
s se poat sri, eventual, la o anumit seciune dorit. Marcarea
locului referit se face printr-o directiv cu sintaxa
<a name=etichet_int>Text hiperlink</a>

30

iar referina are forma


<a
href=adres_document#eticheta_tintei>
Text hiperlink</a>
unde adresa documentului poate fi relativ sau absolut. De
exemplu, presupunem c seciunea Observaii finale
este
coninut n fiierul final.htm, de la pagina cu adresa
imaginar http://www.adr.com. Ancora cu numele obsf se poate
defini cu sintaxa:
<a name=obsf>Observatii finale</a>
iar seciunea Observaii finale poate fi accesat cu
<a href=http://www.adr.com/final.htm#obsf>
Salt obs</a>
sau direct din interiorul paginiifinal.htm cu
<a href=#obsf > Salt observatii finale</a>
Obs. Ancorele ce utilizeaza atributul name sunt des folosite n
partea de cuprins a documentelor pentru a produce saltul la
seciunea dorit printr-un simplu click.
Sarcin de lucru
S se creeze un document HTML numit coninut.htm,
document ce conine trei seciuni marcate prin ancore ce conin
atributul name. Un alt document numit cuprins.htm contine
titlurile celor trei seciuni cu ancore ce fac legatura cu
documentul coninut la marcajul inta corespunztor. Din
documentul cuprins prin intermediul link-ului se dorete s se
sar la oricare dintre seciunile documentului coninut.
Presupunem c cele dou fiiere se gsesc n acelai director,
deci aa vor trebui salvate. Codul surs i pagina afiat pentru
cuprins este ilustrat n fig. 3.6, respectiv 3.7

31

Fig. 3.6 Cod surs pagina cuprins

Fig. 3.7 Afiarea paginii cuprins


Codul surs i pagina afiat pentru coninut este ilustrat n fig.
3.8, respectiv 3.9.

Fig. 3.8 Cod surs pagina coninut

32

Fig. 3.9 Afiarea paginii coninut


n acest exemplu, ambele documente sunt n acelai folder, iar
la activarea unei ancore (hiperlink) n documentul cuprins.html ,
browserul ncarc ntregul document continut.html , dar
poziionarea se face n dreptul seciunii marcate.

III.3. INSERARE IMAGINI


n paginile web pot fi introduse i obiecte grafice cum sunt imaginile,
obinnd astfel pagini web atractive cu design placut.
n general, browserele recunosc n paginile web mai multe
formate ale imaginilor. Cele mai rspndite sunt cele cu
extensia .gif i cele care au una din extensiile .jpg sau .jpeg.
Formatul Graphics Interchange Formt (GIF) este folosit pentru
imaginile de dimensiuni mici, reprezentnd butoane, icon-uri,
animaii i poate reda pna la 256 culori. Formatul Joint
Photographic Expert Group (jpeg) nu este limitat la numai 256
culori, ofer o calitate mult mai bun a imaginii i necesit
pentru stocare un spaiu mult mai restrns. Recent, Google a
lansat un nou format de imagine WebPs, bazat tot pe o
compresie cu pierderi ca i jpeg, dar care are o rat de
compresie mult mai bun i accelereaz timpul de ncrcare.

33

Pentru a include o imagine ntr-o pagin HTML se utilizeaz


eticheta <img>, etichet ce nu are pereche de nchidere. Sintaxa
uzual este:
<img src=url [width=lat] [height=inalt] [alt=text]>
unde:
atributul src este obligatoriu i specific adresa fiierului ce
conine imaginea (adres relativ sau absolut);
atributele width i height reprezint elemente de scalare a
imaginii n pagina web. Prin scalare imaginea poate fi deformat
dac nu se pstreaz proporia iniial ntre valorile celor dou
atribute;
atributul alt specific un text alternativ ce va fi afiat n locul
imaginii dac formatul nu este recunoscut de ctre browser sau
conexiunea este prea lenta ori adresa de referin a imaginii este
eronat.
Exemplu: n directorul curent avem salvata o imagine n fiierul
cu numele garden.jpeg. Pentru a afia n pagina curent aceast
imagine vom introduce urmtorul cod surs:
<img src="garden.ipeg" alt="Imagine cu flori " />
n exemplu, nu am utilizat atributele care specific spaiul
rezervat pentru imagine la ncarcarea paginii. Recomandri:
Specificarea spaiului rezervat pentru o imagine este
recomandat pentru ca la ncrcarea paginii s se rezerve spaiul
cerut. Altfel pe msur ce pagina este ncarcat se va modifica
layout-ul.
Diminuarea mrimii imaginii prin cele dou atribute foreaz
utilizatorul s aduc imagini de mari dimensiuni, ce consum
lrgime de band, ca apoi s fie afiate la o dimensiune mai
mic. Utilizarea unui program pentru a realiza o rescalare a
imginii constituie o soluie bun.
n general toate atributele ce definesc stilul de formatare a unei
pagini se recomand a se utiliza n coinjuncie cu fiiere css sau
sintaxe css.
Alte atribute optionale:
Align atribut ce specific modul de aliniere pe orizontal sau
vertical a imaginii fa de restul coninutului. Valorile permise
sunt: top, bottom, left, right, middle. Pentru alinierea imaginii la
34

dreapta n sintaxa css, se specific aceasta prin atributul style ca


n exemplul: <img .... style="float:right" />.
Border atribut care specific laimea border-ului n jurul
imaginii exprimat n numr de pixeli. Cu atributul style poate
fi specificat borderul, n sintaxa css, ca in exemplul <img ....
style="border:5px solid black" />.
Hspace, vspace specific distana exprimat n pixeli din
partea dreapt i stng a imaginii fa de componente de tip
text, respectiv nainte i dup imagine. Similar sinntaza css
<img .... style="margin: 0px 20px" /> indic 0 pixeli pe
vertical i 20 pe orizontal.
Ismap specific o imagine ce reprezint o zon activ la click
mouse i trimite la server coordonatele (mai poart i denumirea
de server-side image-map).
Usemap creaz o relaie ntre o imagine i un map (similar cu
ismap dar client-side image-map).
n conjuncie cu imaginile este utilizat i eticheta <map>,
etichet care permite definirea de client-side image-map,
imagine cu zone sensibile la click mouse. Atributul nume este
obligatoriu la eticheta <map> i este asociat cu atributul usemap
al etichetei <img> pentru a crea asocierea dintre imagine i map.
Dac pentru o imagine stabilim doua zone active la click mouse
una de form rectangular i alta de tip cerc, urmtoarea
poriune de cod arat utilizarea etichetei <map>.
<img
src="url"
width="200"
height="150"
alt="Ilustrare map" usemap="#Ilmap" />
<map name="Ilmap">
<area
shape="rect"
coords="0,0,100,150"
href="image1.htm"/>
<area
shape="circle"
coords="125,75,6"
href="image2.htm"/>
</map>
Cu exemplul de mai sus am ilustrat i utilizarea etichetei <area>
pentru definirea zonelor n cadrul unei imagini.
Sarcin de lucru
S se creeze un document HTML numit Imagini.htm, care
conine dou imagini preluate din directorul user/picture ale
calculatoarului pe care l utilizai. Prima imagine este afiat avnd
spaiu orizontal de 20 pixeli fa de textul asociat i centrat pe
vertical fa de acesta. A doua imagine va utiliza eticheta <map>
pentru a defini dou zone active la click mouse. Ca urmare a

35

aciuni de apsare mouse se vor afia alte imagini din acelai


director.
Modificai valorile atributelor width, height, align, border i
observai ce se ntmpl la afiarea paginii. Modificai valorile
atributelor etichetei <area> i observai efectele.

III.4. INSERARE TABELE


Tabelele sunt elemente similare celor realizate n editoare de texte,
fiecare celul poate conine text, imagini, formulare, liste sau
subtabele.
n HTML, obiectele de tip tabel se introduc cu ajutorul
directivei <table>, prin directiva <th> se specific headerul,
directiva <tr> permite mprirea tabelului n linii, directiva
<td> este utilizat pentru a mpri liniile n celule. Informaia
afiat ntr-o celula poate fi de tip text, imagine, liste sau alte
obiecte grafice.
Vom crea mai nti un tabel avnd coloanele Nume, Prenume,
Valoare rat, tabel ce conine ratele ce trebuiesc pltite de
persoanele ce au accesat o linie de credit. Codul surs este
ilustrat n fig. 3.10 i pagina afiat n fig. 3.11.

Fig. 3.10 Cod surs pagin cu tabel


Pentru a aduga mai multe linii n tabel se repet structura
dintre etichetele <tr> i </tr>.

36

Fig. 3.11 Afiare pagin ce conine tabel


Eticheta <table> poate avea mai multe atribute. Cele mai
importante sunt:
Border specific grosimea borderului din jurul tabelului n
pixeli. Dac acesta lipsete tabelul este afiat cu stilul implicit,
tabel nebordat.
Cellpadding specific distana n pixeli ntre peretele celulei
i coninutul su.
Cellspacing specific spaiul dintre celule masurat n pixeli.
Frame specific partea borderului exterior ce va fi afiat.
Valorile posibile sunt: void, above, below, hsides, lhs, rhs,
vsides, box, border. Valorile acestui atribut nu sunt suportate de
toate browserele.
Rules - specific care pari din interiorul borderului vor fi
afiate. Valorile posibile sunt: none, groups, rows, cols, all. Nu
sunt afiate corect n toate browserele.
Width permite specificarea limii tabelei. Dac atributul
lipsete tabela va avea limea dat de informaia afiat n
tabel. Recomandat s se foloseasc css.
Align specific alinierea coninutului n celulele tabelei.
Valorile posibile sunt: left, right, center. Este recomdat
utilizarea atributului style n sintaxa css.
Bgcolor permite specificarea colori de background a tabelei
conform paletei de culori. Se recomand specificarea culori cu
atributul style n sintaxa css.

37

n conjuncie cu tabelele sunt utilizate i alte directive. Astfel,


directiva <caption> cuprinde textul ce va constitui numele
(label) pentru tabel. Prin atributul align cu valorile left, right,
top, bottom se precizeaz locul n care este afiat numele
tabelului. Se recomand utilizarea style pentru a specifica
modul de afiare nume.
Directiva <col> definete atribute pentru una sau mai multe
coloane dintr-o tabel. Ea este utilizat pentru a defini un stil
pentru ntreaga coloan fr a fi nevoie s se invoce stilul la
fiecare linie. Directiva poate fi utilizat numai n interiorul
directivei <table> sau a elementelor ce grupeaz rnduri.
Directiva suport o serie de atribute ce permit:
Specificarea modului de aliniere pe orizontal cu atributul align;
Specificarea numrului de coloane n care poate fi mprit o
coloan (span);
Specificarea modului de aliniere pe vertical (valign);
Specificarea laimii unei coloane n pixeli sau lime relativ
(width)
Directivele <tehad>, <tbody>, <tfoot> grupeaz elemente ale
tabelului n cele trei seciuni: header, coninut, footer. Directiva
<tfoot> trebuie s apar naintea directivei <tbody> astfel c
browserul poate pregti zona de footer nainte de a primi toate
liniile de date.
Sarcin de lucru
S se creeze o pagina web numit Tabele avansat.htm, n care se
va introduce codul HTML prezentat n fig 3.12.
<html>
<head>
<title> Tabele </title>
<style type="text/css">
thead {color:green}
tbody {color:blue;height:20px}
tfoot {color:red}
</style></head>
<body>
<h2> Tabela cu trei grupuri</h2>
<table border="1">
<thead>
<tr>
<th>Nume</th>
<th>Prenume</th>
<th>Valoare rata</th>

38

</tr>
</thead>
<tfoot>
<tr>
<td> </td>
<td>Sum</td>
<td>375 Eur</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Popescu</td>
<td>Ion</td>
<td>275 Eur</td>
</tr>
<tr>
<td>Ionescu</td>
<td>Vasile</td>
<td>100 Eur</td>
</tr>
</tbody>
</table>
</body>
</html>
Fig. 3.12 Sursa HTML tabela avansat.htm
Modificai valorile pentru culoare i height n codul introdus.
Adugai i directivele <caption> i <col> descrise n acest modul.
Observai diferenele la afiarea paginii de ctre browser dup
realizarea modificrilor n cod.

39

IV. COMPONENTE DINAMICE


IN HTML
Pe parcursul acestui capitol vei nva despre:
Utilizare form n pagini web
Directive input
Directiva select
Directiva textarea

IV.1. UTILIZARE FORM N PAGINI WEB


O pagin dinamic este o pagin ce conine directive speciale care
face posibil dialogul cu utilizatorul asigurnd astfel implementarea
paginilor interactive. n aceste pagini utilizatorul poate introduce
informaii ce vor fi transmise ctre server pentru a fi prelucrate.
n paginile web coninutul interactiv este plasat n interiorul
unei directive <form>, directiv prin care se precizeaz:
O aciune asociat cu ea, numit script CGI, sau alt program
executabil ce are cteva caracteristici specifice. Datele
completate de utilizator sunt preluate de acest script i
prelucrate. Rezultatul scriptului este trimis ca rspuns
utilizatorului. Aceast aciune se gsete n directiva <form>.
Unul sau mai multe cmpuri de tip text, buton, check-box, lista
de selecie etc. Acestea sunt introduse prin directivele <input>
din interiorul formei.
Un buton prin selectarea cruia valorile completate sunt trimise
serverului web. Acesta va lansa scriptul CGI i va trimite
rezultatele ctre browser. Acest buton se implementeaz tot prin
intermediul unei directive <input>.
O metod de pasare a parametrilor colectai n form ctre
script.
Structura general a unei directive <form>:
<form action="script.cgi" method="get">
40

<!--Prima etichet input-->


<!--Alte etichete input-->
<!--Buton submit -->
</form>
Pe scurt, elemente unei forme sunt ncadrate de directivele
<form> i </form> i ele permit introducerea informaiei
utilizatorului sub form de: cmpuri de text, cmpuri textarea,
meniuri drop-down, butoane radio, checkbox-uri etc.
La
directiva <form> sunt permise o serie de atribute prin care se
specific modul n care se transmit datele la server. Cteva
dintre atributele importante:
Action are semnificaie de url i specific unde sunt trimise
datele culese n forma cnd acestea sunt trimise. Adresa
specific fie o adres absolut fie o adres relativ fa de
locaia n care este pstrat pagina curent.
Method specific modul n care sunt trimise datele la pagina
specificat prin atributul action. Datele pot fi trimise ca
variabile url cu metoda get sau ca http prin metoda post.
Metoda get:
Adaug datele din form n perechi nume-valoare;
Metoda este util cnd utilizatorul dorete rezultat boockmark;
Volumul datelor este limitat i variaz de la un browser la altul
i nu se garanteaz faptul c toate datele sunt corect transferate;
Nu se va folosi metoda pentru transferul datelor sensibile cum
sunt parolele ce pot fi vzute n bara de adrese a browserului.
Metoda post:
Trimite datele de la form ca o tranzacie post HTTP;
Trimiterile cu metoda post nu pot fi boockmarked;
Metoda este mult mai robust dect get i nu are limitri de
volum.
Name specific numele formei i ofer un mod de referire a
formei ntr-un script.
Accept specific tipul de fiiere ce pot fi trimise la server. Ca
exemplu dac o directiv <input> este de tip file i se dorete
transmiterea unui fiier imagine se va preciza ca valoare pentru
atribut "image/gif, image/jpeg" pentru a indica acceptarea
fiierelor de imagini n format gif i jpeg. IANA MIME types
specific lista complet a tipurilor MIME standard.
41

Accept-charset specific setul de caractere al datelor ce sunt


trimise la server. Acest atribut nu este interpretat corect de
Internet Explorer, dac valoarea sa este "ISO-8859-1", IE va
trimite datele codificate "Windows-1252".
Enctype specific modul n care vor fi codificate datele
nainte de a fi trimise la server. Implicit sunt codificate
application/x-www-form-urlencoded", adica toate caracterele
sunt codificate nainte de a fi trimise, spaiile sunt convertite n
simboluri +, caracterele speciale n valori ASCII HEX. Alte
valori posibile multipart/form-data (datele nu sunt codificate)
sau text/plain (spaiile sunt convertite n +, celelalte
simboluri necodificate).
Target specific unde se deschide url-ul invocat n atributul
action.

IV.2. DIRECTIVE INPUT


Prin directivele input se definesc elemente n care se culeg
informaiile introduse de utilizatori n forma.
n interiorul unei forma pot fi invocate o serie de elemente ce
constituie coninutul formei. Toate elementele specificate pn
la acest moment, ce constituie coninut n pagini statice, pot fi
incluse n form. Pe lng acestea n form se introduc elemente
interactive cu directive speciale.
Directiva <input> este utilizat pentru a crea elementele pentru
introducerea informaiilor de ctre utilizator. Un cmp de intrare
poate fi de diverse tipuri funcie de valorile atributului type. O
serie de alte atribute pot fi invocate n conjuncie cu directiva
<input>. Cteva exemple:
Type specific tipul elementului de intrare. Valorile posibile
sunt: button (pentru butoane cu apsare utilizate n general
pentru activare javascript la apsare), checkbox (boxuri de
selecie), file (fisiere), hidden (similar cu text dar ascuns),
image (imagine ca un buton submit), password (parola afiat cu
*), radio (butoane dintre care doar unul poate fi activ), reset
(buton special pentru tergere coninut form), submit (buton
special pentru transmitere coninut la server), text (cmp pentru
introducere text).
Value specific valoarea elementului la ncrcarea paginii.
Size specific laimea unui cmp de intrare.
Disabled specific faptul c la ncrcarea paginii elementul de
intrare este dezactivat.

42

Accept cu aceeai semnificaie ca i la directiva <form> i


poate fi utilizat numai la type=file.
Alt utilizat numai la type=image pentru a specifica textul
alternativ afiat.
Checked pentru a specifica faptul c elementul respectiv este
selectat la ncrcarea paginii. Valabil doar la type = checkbox
i radio.
Maxlength numai pentru type de tip text i password
pentru a specifica numrul maxim de caractere permis la
introducerea de date n cmpul respectiv. Dac valoarea este
mai mare dect cea a atributului size la introducere se face
scroll automat.
Readonly numai pentru type de tip text i password
indicnd faptul c elementul este read only.
Src specific url-ul imaginii afiate ca un buton submit.
Align specific modul de aliniere la type=image, atribut ce
nu va fi permis n versiunile noi.
Sarcin de lucru
S se creeze pagina web numit Form1.htm, a carei surs este cea
prezentat n fig 4.1.
<html>
<head>
<title> Forma cu directive input </title>
</head>
<body>
<form action="form_action.asp" method="get">
Nume: <input type="text" name="nume" /><br />
Prenume: <input type="text" name="prenume" /><br />
Email: <input type="text" name="email" /><br />
<input type="button" value="Click " onclick="msg()" /> <br>
<b>Limbi straine:</b>
<input type="checkbox" name="limba1" value="Engleza" />
Engleza
<input type="checkbox" name="limba2" value="Franceza" />
Franceza <br>
Tara
<input type="hidden" name="Tara" value="Romania" /> <br>
<i><b>Sex:</b></i>
<input type="radio" name="sex" value="M" /> Masculin
<input type="radio" name="sex" value="F" /> Feminin<br />
Parola:
<input type="password" name="pwd" /><br/> <br/><hr>

43

<input type="reset" />


<input type="submit" value="Submit" />
</form></body>
</html>
Fig. 4.1 Sursa HTML Form1.htm
Verificai afiarea paginii similar cu cea din fig. 4.2 i exersai
introducerea coninutului elementelor pentru completare.
Exersai i alte atribute la directivele prezente n pagin.

Fig. 4.2 Afiarea paginii Form1.htm


Obs: Pentru rspunsul transmis de server la trimiterea formei
ncarcate va trebui realizat fisierul form_action.asp ce nu face
obiectul prezentului manual.

IV.3. DIRECTIVA SELECT


Listele de selecie sunt componente uzuale ale paginilor HTML. Cu
ajutorul directivei select se introduc n pagini web liste de selecie
numite i combobox.
Un alt element obinuit, la construcia interfeelor diverselor aplicaii
web, este cunoscut cu denumirea de combobox sa liste de selecie. O
list de selecii prezint opiunile ca un meniu vertical, fiecare linie
44

reprezint o opiune dintre care utilizatorul o alege pe cea dorit.


Numele simbolului este cel declarat la directiva select , iar lista
de valori este introdus element cu element, utiliznd directiva
<option > . Valoarea care se atribuie simbolului este cea declarat
la atributul value i dac atributul lipsete valoarea atribuit
automat este textul afiat la respectiva opiune. n forma cea mai
simpl o directiv select are urmtoarea form:
<select>
<option>Logan</option>
<option>Sandero</option>
<option>Daster</option>
<option>Pick-up</option>
</select>
list care permite alegerea unui model de automobil Dacia
Renault. Directiva <select> poate avea mai multe atribute ce
ofer o mai mare flexibilitate. Atribute importante:

Disabled prin care se specific dezactivarea listei dropdown, situaie n care lista nu este utilizabil i nu
reacioneaz la click. n acest mod se foreaz lista ca
neutilizabil pn cnd alte condiii sunt ndeplinite, cum
ar fi bifarea unui checkbox etc. Pentru a fi fcut
utilizabil la ndeplinirea condiiei se va lansa un
Javascript care va activa lista pentru a fi utilizabil.

Multiple permite afiarea de opiuni multiple funcie


de valoarea atributului size care specific numrul de
opiuni. Singura valoare a atributului este multiple i
necesit suplimentar atributul size a crui valoare
definete numrul de opiuni. Este intrepretat diferit de
sistemele de operare i se recomand pentru astfel de
cazuri utilizarea directivei <input> cu type=ckeckbox.

Name permite specificarea numelui listei de selecie.


Atributul este util pentru a referi elementele n Javascript
sau pentru a referi datele dup ce forma este trimis.

Size poate fi utilizat i de sine stttor, fr multiple,


pentru a specifica numrul de opiuni vizibile. Dac
valoarea sa este mai mic dect numrul de opiuni se va
afia intr-un numr egal cu size, iar browserul va aduga
automat un scroll bar pentru a indica faptul c mai sunt
opiuni ce nu sunt vizibile i a naviga printre ele.

Directiva <option> utilizat n conjuncie cu directiva <select>


permite specificarea opiunilor n lista de selecie. Opiunile
sunt afiate i procesate funcie de atributele suplimentare
permise acestora. Aceste atribute sunt:

45

Disabled specific faptul c opiunea este dezactivat.


O opiune dezactivat este afiat diferit fa de una
activ i la navigare cursorul sare peste respectiva
opiune.

Selected specific op iunea selectat la ncrcarea


paginii. Aceast op iune este cea afiat prima n lista
drop-down.

Value specific valoarea ce va fi transmis ctre server


la trimiterea formei. Chiar dac se afiaz coninutul
dintre <opion> i </option> valoarea este cea transmis
serverului.

Directiva <optgroup> grupeaz opiunile nrudite n lista de


opiuni. Opiunile cuprinse ntre <optgroup> i </optgroup> fac
parte dintr-un grup, grupul are o etichet ce este afiat n lista
de opiuni fr a putea fi selectat. n cazul unei liste de opiuni
bogate gruparea acestora este de mare ajutor pentru utilizator.
Atributul label specific numele grupului.
Sarcin de lucru
S se creeze pagina web numit Form2.htm, care conine dou
liste de opiuni. Se creaz fiierul avnd coninutul din fig. 4.3
utiliznd editorul de texte preferat dup care se va deschide cu un
browser pentru a observa modul n care este afiat.
<html>
<head>
<title> Forma cu directive select</title>
</head>
<body>
Masini:
<select name="lista1">
<optgroup label="Masini frantuzesti">
<option value="ren">Renault</option>
<option value="pg" selected="selected">Peugeout</option>
<option value="cit">Citroen</option>
</optgroup>
<optgroup label="Masini germane">
<option value="benz">Mercedes</option>
<option value="audi" disabled="disabled">Audi</option>
<option value="bmw">BMW</option>
</optgroup>
</select> </br></br></br></br></br></br></br></br>
<b> Zona geografica</b> <br>
<select>
<option value="MO">Moldova</option>
<option value="TR">Transilvania</option>

46

<option value="MUNT">Muntenia</option>
</select>
</body>
</html>
Fig. 4.3 Cod surs Form2.htm
n fig. 4.4 este ilustrat pagina afiat cu activarea listei de
selecii de la prima directiv <select>. Observai efectul
directivei <optgroup> cu gruparea maini frantuzeti, respectiv
masini germane, opiunea Audi deselectat i efectul atributului
selected la opiunea Peugeot.

Fig. 4.4 Afiare pagin Form2.htm

IV.4. DIRECTIVA TEXTAREA


Directiva <textarea> permite introducerea de texte ce se ntind pe mai
multe rnduri. La transmiterea ctre server textul poate fi liniarizat
funcie de atributele utilizate.
Directiva <textarea> definite un box n care se ntroduce text
pe mai multe linii. Un element <textarea> poate pastra un numr
nelimitat de caractere, iat textul este cules cu un font fixat.
Marimea zonei se specifica prin valorile atributelor cols i rows,
valori care definesc numrul de coloane i numrul de rnduri
sau cu proprietile css heigth i width. Directiva permite
atributele disabled, readonly i name cu semnificaii identice cu
cele prezentate la alte directive deja descrise. Un exemplu este:
47

<textarea rows="4" cols="20">


Acest text este coninutul textarea i este afiat pe mai multe
linii. Dac textul este lung i nu poate fi afiat in zona de
mrime definit browserul ataaz automat bar de scroll
vertical.
</textarea>
Oricare dintre elementele din pagin pot fi grupate utiliznd
directiva <fielset>, iar cu directiva <legend> se definete un
caption pentru setul de elemente.
Sarcin de lucru
n final vom realiza un exemplu n care sunt utilizate mai multe
elemente. Pentru aceasta se creaza fiierul Form3.htm, dup
modelul din fig. 4.5, utiliznd editorul de texte preferat, dup care
se va deschide cu un browser pentru a observa modul n care este
afiat.
</head>
<body>
Exemplu de pagina cu multiple elemente <hr><br>
<form action="form_action.asp" method="get">
<fieldset>
<legend> Date personale </legend>
Nume:
<input type="text" name="nume" /><br />
Prenume: <input type="text" name="prenume" /><br />
Email: <input type="text" name="email" /><br />
<input type="button" value="Click " onclick="msg()" /> <br>
<b>Limbi straine:</b>
<input type="checkbox" name="limba" value="Engleza" />
Engleza
<input type="checkbox" name="limba" value="Franceza" />
Franceza <br>
Tara
<input type="text" name="Tara" value="Romania" /> <br>
<i><b>Sex:</b></i>
<input type="radio" name="sex" value="M" /> Masculin
<input type="radio" name="sex" value="F" /> Feminin<br />
</fieldset> <br> <br>
<b>Masina preferata: </b>
<select name="lista1">
<optgroup label="Masini frantuzesti">
<option value="ren">Renault</option>
<option value="pg" selected="selected">Peugeout</option>
<option value="cit">Citroen</option>
</optgroup>
<optgroup label="Masini germane">
<option value="benz">Mercedes</option>
<option value="audi" disabled="disabled">Audi</option>
<option value="bmw">BMW</option>
48

</optgroup>
</select> </br></br>
<b>Ilustrare textarea:</b>
<textarea rows="3" cols="20"> Introduceti mesajul dorit
</textarea> </br>
<b>Parola:</b>
<input type="password" name="pwd" /><br/> <br/><hr>
<input type="reset" />
<input type="submit" value="Submit" />
</form></body>
</html>
Fig. 4.5 Cod surs Form3.htm
Pagina afiat trebuie s arate similar cu cea din fig. 4.6. Se va
exersa completarea elementelor active i adugarea de noi
atribute dintre cele prezentate.

49

Fig. 4.6 Afiarea paginii Form3.htm

50

V. ALTE ELEMENTE DE
DESIGN N PAGINI WEB
Pe parcursul acestui capitol vei nva despre:
Afiarea paginilor n ferestre
Stiluri n HTML
Caractere speciale

V.1. AFIAREA PAGINILOR N FERESTRE


Sunt situaii n care se dorete definirea n fereastra browserului a mai
multor cadre, fiecare dintre acestea putnd afia pagini diferite. n
alte situaii se doresc ca anumite pri ale ferestrei browserului s fie
fixe indiferent de navigarea n alte cadre.
Cu ajutorul directivelor care definesc cadre se poate crea n
fereastra browserului mai multe subferestre n care se pot
deschide mai multe pagini Web sau documente HTML. n
acest mod, fiecare document HTML va fi ncrcat ntr-un cadru
(frame), i fiecare cadru este independent de celelalte. Pentru a
defini cadrele se creaza un fiier HTML special, n care
marcajele definite de directivele <body> i </body> vor fi
nlocuite de marcajele <frameset> i </frameset>. n interiorul
blocului astfel marcat, fiecare cadru este introdus prin eticheta
<frame>, cu atributul obligatoriu src, care primete ca valoare
adresa URL a documentului HTML ce va fi ncrcat n acel
cadru. Un exemplu simplu care mparte fereatra browserului n
trei cadre pe vertical este:
<html>
<frameset cols="20%,*,30%">
<frame src="cadru1.htm" />
<frame src="cadru2.htm" />
<frame src="cadru3.htm" />
</frameset>
</html>
Codul prezentat creaz n fereatra browserului un frame care
ocupa 20% din numrul de coloane n care se ncarc pagina
cadru1.htm, un frame care ocupa 30% din coloane n care se

51

afiaz pagina cadru3.htm i un frame care ocup restul de


coloane n care se afiaz pagina cadru2.htm. Similar, dac se
dorete definirea de cadre dispuse orizontal se va utiliza
atributul rows. Directiva <frameset> accept dou atribute, un
atribut ce definete limea (cols), respectiv nlaimea (rows)
pentru fiecare frame. Combinarea directivelor <frameset>
permite realizarea de cadre mixte, cadre care mpart fereatra
browserului att pe orizontal ct i pe vertical. Valorile pentru
cele dou atribute pot fi exprimate: n pixeli (specific numarul
de pixeli), procentual (reprezentnd procentul din spaiul
disponibil), * (restul spaiului disponibil). Pentru a defini o
structura mixt de cadre, un cadru orizontal urmat de dou cadre
verticale vom scrie un cod similar cu urmtorul:
<html>
<frameset rows="60%,40%">
<frame src="cadru_orizontal.htm" />
<frameset cols="50%,*">
<frame src="cadru_vertical1.htm" />
<frame src="cadru_vertical2.htm" />
</frameset>
</frameset>
</html>

Directiva <frame> poate avea cteva atribute: src specific


pagina ncarcat, frameborder specific dac cadrul are border,
marginhigh specific distana ntre coninut i marginile
cadrului top/bottom, marginwidth distana ntre coninut i
marginile cadrului pe orizontal (left/right), scrolling dac se
asociaz bar pentru scroll, noresize pentru a nu permite
modificarea dinamic a dimensiunii cadrului.
Obs: Dac coninutul fisierului afiat n cadru depete spaiul
alocat n fereastra browserului i atributul scrolling permite,
browserul va aduga automat bara se scroll pe vertical, pe
orizontal sau pe ambele.
n contextul cadrelor directiva <noframe> este utilizat pentru
browsere care nu pot manipula cadre. Ea este plasat ntre
<frameset> i </frameset> i poate conine oricare dintre
elementele ce pot fi dispuse ntre <body> i </body> ntr-o
pagin obinuita.
O directiv <ifframe> poate defini un cadru n linia curent n
care se va afia pagina specificat. Atributele sale: src pentru a
specifica pagina ncarcat n cadru, width pentru a specifica
limea cadrului, hight pentru a specifica nlimea cadrului,
frameborder specific dac cadrul are border, marginhigh
specific distana ntre coninut i marginile cadrului
top/bottom, marginwidth distana ntre coninut i marginile
cadrului pe orizontal (left/right), scrolling dac se asociaz
bara pentru scroll.
52

Sarcin de lucru
Folosind cunotinele accumulate s se creeze o pagin web care
contine un frame cu o list de linkuri pentru care inta este
coninutul celuilalt frame. n primul frame se ncarc fiierul
cadru_continut.htm n care sunt definite cele trei linkuri. Cele trei
fiiere ce se ncarc n al doilea frame sunt: cadru_1.htm,
cadru_2.htm, cadru_3.htm. Sursa pentru definirea de linkuri
este similara cu:
<a href ="cadru_1.htm" target ="showframe">Cadru 1</a><br>
<a href ="cadru_2.htm" target ="showframe">Cadru 2</a><br>
<a href ="cadru_3.htm" target ="showframe">Cadru 3</a>
Fiecare fiier cadru_x va afia textul Acesta este coninutul
fiierului Cadru x, unde x ia valorile 1,2,3. Verificai dac
rezultatul este similar cu cel din fig. 5.1.

Fig. 5.1 Aa trebuie s arate rezultatul sarcinii de lucru

V.2. STILURI N HTML


n versiunile recente HTML, toate instruciunile de formatare pot fi
incorporate n afara documentului ntr-o foaie separata de stil. Un
astfel de procedeu este adecvat n situaia n care un anumit stil este
utilizat la mai multe pagini Web. Prin intermediul unei foi externe de
stil, se poate modifica aspectul unei pagini de Web, pstrnd nealterat
fiierul HTML ce descrie respectiva pagin. n plus, mai multe pagini
HTML pot folosi acelai fiier de stil, lucru obinuit pentru site-uri
web pentru ca toate paginile s aib format similar.
Definirea stilului n care se formateaz o pagin html de ctre
browser poate fi fcut fie prin specificarea stilului intern n
fiierul html, fie prin utilizarea de fiiere separate, acele fiiere
de stil sau fiiere css. Cu toate acestea recomandarile w3
53

consortium descurajaz
fiierelor html.

definirea

de

stiluri

interiorul

Referirea la o foaie extern de stil se face cu ajutorul directivei


<link>, plasat n header-ul documentului cu o structur ca cea
de mai jos:
<head>
<link rel=stylesheet type=text/css
href=adresa.css>
</head>
Atributul rel definete relaia dintre documentul curent i
resursa extern referit, n cazul de faa este vorba de un
stylesheet. Atributul poate avea o mulime de alte valori pentru
a indica faptul ca este un document alternativ, un index, un
glosar de termeni, o seciune, un capitol etc. Atributul type
specific tipul documentului referit conform IANA MIME type.
Uzual valoarea acestui atribut este stylesheet. Mai pot fi
utilizate atributele: rev pentru a preciza rela ia ntre
documentul la care se face legtura i documentul curent, target
pentru a preciza unde se va deschide respectivul link, href
pentru a preciza adresa absolut sau relativ a documentului,
media pentru a preciza care este categoria de echipament pe
care se va reda docuemntul (tv, proiector, print, braille etc.),
hreflang pentru a preciza limba n care este scris documentul
referit, charset pentru precizarea codificrii caracterelor n
documentul referit. Dac se realizeaz un site web, pentru ca
paginile sa aib acela i stil, este recomandat folosirea unui
fi ier de stil extern care va fi referit prin intermediul directivei
<link> n toate fi ierele html ce compun site-ul.
n cazul n care se dore te un stil particular (unic) pentru un
anumit document se folose te o foaie intern de stil ce este
nglobat n fi ierul html. O foaie intern de stil se definete tot
n headerul documentului HTML, cu ajutorul directivei <style>,
prin specificarea proprietilor diferitelor elemente ale paginii,
cum ar fi culoarea fondului, mrimea, tipul i culoarea fontului
pentru titluri, setarea marginilor unor blocuri de text definite ca
paragrafe etc. Ca exemplu:
<head>
<style type=text/css>
body {background-color: yellow}
h1 {color:red}
p {color:blue}
</style>
</head>

54

definete afiarea pe fond galben a ntregii pagini Web, titlurile


heading 1 vor fi scrise cu ro u, paragrafele vor fi scrise cu font
de culoare albastr.
Principalul atribut al directivei <style> este type, iar valoarea
text/css specific un con inut standard css. Prin atributul style
se identific con inutul dintre directiva <style> i </style>.
Op ional atributul media specific stilul pentru diverse medii de
redare. Pentru a defini mai mult de un tip de stil se utilizeaz
virgula pentru a separa elementele din lista de stiluri sau se
definesc mai multe stiluri diferite pentru medii de redare
diferite.
Directiva <div> este utilizat pentru a specifica o sec iune sau o
diviziune ntr-un document html. Ea este utilizat pentru a grupa
blocuri de elemente ce sunt afi ate n stilul dorit. Similar
por iuni de text pot fi mpr ite utiliznd directiva <span>
pentru a fi afi ate n forma dorit. Cele dou directive sunt
asemntoare din punctul de vedere al atributelor standard
acceptate.
Stilurile inline sunt valabile doar pentru un anumit element al
paginii Web. Ele sunt precizate cu ajutorul atributului style,
prezent n directiva ce marcheaz elementul respectiv al paginii.
De exemplu:
<p style=color: red> Textul
paragrafului </p>
specific scrierea cu font de culoare rou a paragrafului marcat.
Sarcin de lucru
S se editeze fiierul din fig. 5.2 si se se observe stilurile de afi are
pentru diversele elemente. Compara i cu rezultatul afi at n fig.5.3.
ncercai s explica i efectul directivelor i atributelor prezente n
fiier. Modificai stilul i observai efectele.
<html>
<head>
<style type="text/css">
span.blue {color:lightskyblue;font-weight:bold}
span.green {color:darkoliveblack;font-weight:bold}
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<p>Vara cerul este <span class="blue">albastru</span>
iarna <span class="green">intunecat</span>.</p>
<br>

55

<h1 class="intro">Header 1</h1>


<p>A paragraph.</p>
<p class="Important">Este un paragraf important !</p>
</body>
</html>
Fig.5.2 Exemple de definire stiluri

.
Fig.5.3 Afi are pagin cu mai multe stiluri

V.3. CARACTERE SPECIALE


Am vazut c anumite caractere au interpretare special n HTML. n
anumite situaii se dorete ca aceste caractere s fie afiate de ctre
browser i nu interpretate de acesta. De multe ori n paginile web se
dorete i afiarea unor caractere ce nu pot fi introduse de la tastatur.
Pentru astfel de situaii a fost introdus un set de caractere speciale.
Unele caractere introduse de la tastatur, de exemplu mai mic,
mai mare (< >) au semnificaie special, fiind rezervate pentru
a specifica browserului c delimiteaz o directiv. Dac se
dorete ca browserul s afieze astfel de caractere, ele fcnd
parte integrant din pagina afi at se va foloseasi, n fiierul
surs, codurile acestor caractere. Un cod al unui caracter este
compus din trei pri:
semnul & constituie prefixul unui caracter special;

56

numele caracterului sau semnul # urmat de numrul de cod al


caracterului;
simbolul de ncheiere marcat de punct i virgul (;).
De exemplu, pentru ca browserul s afieze caracterul mai mic
(<), este nevoie ca n codul surs al fiierului HTML s se scrie
fie &lt; fie &#60;, cele dou forme de introducere a caracterelor
speciale.
Spre deosebire de numerele de cod, numele caracterelor sunt
mult mai uor de re inut. Chiar dac numele caracterelor pot fi
re inute u or, nu toate browserele accept toate numele
caracterelor speciale, n timp ce numerele de cod sunt acceptate
pe scar mult mai larg. De reinut: numele de cod ale
caracterelor trebuie scris cu litere mici. O list a caracterelor
speciale uzuale utilizate n pagini html este dat n tabelul 5.1.
Tabel 5.1. Caractere sapeciale uzuale
Caracter

<
>
&

Semnificaie

Nume de cod

spaiu
mai mic
mai mare
et (ampersand)
semn de citare
(quotation)
apostrof

&nbsp

Numr de
cod
&#160;

&lt

&#60;

&gt;

&#62

&amp;

&#38;

&quot

&#34;

seciune

&sect;
&copy;

&#167;
&#169;

&reg;

&#174;

&times;

&#215;

&divide;

&#247;

copyright
marc
nregistrat
(registered
trademark)
nmulire
mprire

&#39;

57

VI. REALIZAREA DE PAGINI


WEB CU EDITOARE
SPECIALIZATE
Pe parcursul acestui capitol vei nva despre:
Instalare i lansare editor KompoZer
Interfaa editorului KompoZer
Utilizare KompoZer
Aa cum am precizat n capitolul 2 sunt disponibile o mulime
de editoare specializate ce permit realizarea de pagini web fr a
necesita cunotine deosebite de limbaj HTML sau css. Dintre
editoarele disponibile am ales Mozilla KompoZer, editor ce nu
necesit liceniere i poate fi descrcat de pe Internet de la
adresa http://kompozer.net/ . El integreaz dezvoltarea de pagini
web i managementul fiierelor web, este un editor wysiwyg
i poate fi utilizat chiar de ctre nceptori pentru a crea rapid si
uor pagini web. Codul rezultat este compatibil cu cele mai
multe browsere i corespunde specificaiilor w3 consorium.
KompoZer incorporeaz i un Site Manager care permite accesul
rapid la fiiere stocate local sau pe un server la distan. El
suport definirea de stiluri n interiorul paginii sau n fiiere
externe.

VI.1. INSTALARE I LANSARE EDITOR K OMPOZER


Dupa ce ai descarcat versiunea dorit pentru sistem de operare
Windows ca de exemplu kompozer-0.8b3.en-US.win32 va trebui
s-l lansai n execuie. Se va afia fereastra din fig. 6.1 la care
acionai prin Click pe butonul Next

58

Fig.6.1 Setup KompoZer


n fereatra urmatoare bifai checkbox-ul I accept the
agreement i click pe butonul Next. Locaia de instalare
implicit este C:\Program Files\KompoZer pe care putei s o
acceptai sau s alegei alt director pentru program. Click pe
butonul Next v duce ntr-o nou fereastr n care putei
confirma crearea unui shortcut n start menu cu un nume selectat
sau fr shortcut. Apsai Next n continuare pn la apariia
ferestrei ce conine butonul Install. Dupa apasarea sa ncepe
instalarea programului, ncheierea fiind semnalat prin fereastra
cu mesjul Finish. Dac programul nu este lansat automat l
putei lansa din meniul Start / Programs / KompoZer /
KompoZer (fig.6.2).

59

Fig6.2 Lansare KompoZer

VI.2. INTERFAA EDITORULUI KOMPOZER


Editorul HTML are o interfa grafic cu ajutorul creia
utilizatorul poate crea pagini web utiliznd instrumentele
grafice puse la dispoziie, dar poate interveni i n codul surs a
paginilor dezvoltate.
Interfaa editorului KompoZer este alctuit din urmtoarele
elemente principale:

60

Bara de meniu
Bara de instrumente
Dou bare de instrumente pentru formatare (Format1 i
Format2)
Taburi pagin (pot fi deschise mai multe pagini)
Spatiul de lucru pagin
Spatiul Site manager
Bara mod de editare/vizualizare
Bara de stare

Fig.6.3 KompoZer, Interfaa grafic


Vom discuta mai nti de spaiul de lucru oferit de KompoZer. n
partea superioar avem tab pagin, numit Untitled cnd se
creaz o pagin nou sau dac a fost salvat numele fiierului. Dac
sunt mai multe pagini deschise se poate selecta cea afiat prin
simplu click. n partea inferioar a zonei de lucru este poziionat
bara de selectare a modului de editare (Design, Split,
Source) ct i modul de vizualizare local a paginii (Normal,
HTML sau Preview).
Pe ultima linie este aezata bara de stare o ustensil foarte puternic
ntruct pe msur ce pagina este completat focalizarea pe un
element al paginii face s fie afiat stractura sa.
Un document se poate modifica n modul editor prin una dintre
metodele:
modul Normal modul implicit n care se lucreaz
pentru editarea paginii Web care se poate accesa
acionnd
butonul
Design
din
bara
de
editare/vizualizare. n acest mod se scriu textele, se
formateaz, se insereaz diferite elemente (tabele,
butoane, imagini, forme) sau se definesc hyperlinkuri. n
acest mod editorul se comport similar cu orice procesor
de texte.
modul HTML - se poate accesa acionnd butonul
Source din bara de vizualizare, cu ajutorului cruia se
lucreaz direct n codul surs al documentului HTML. Se

61

pot face modificri ale codului surs care se vor reflecta


n pagina afiat n modul Normal sau Preview.
Din punct de vedere vizualizate modul Preview va afia pagina
n modul n care este vizibil n browser, n modul Normal sunt
vizibile marginile (borderele) containnerelor n care sunt
dispuse elementele paginii, iar n modul HTML tag coninutul
este afiat cu punerea n eviden a tag-urilor utilizate.

VI.3. UTILIZARE KOMPOZER


Sarcin de lucru
Vom realiza mai nti o pagin simpl care conine elemente de
tip text formatate n diverse moduri (incluznd titluri, headings,
paragrafe cu diferite alinieri i fonturi) i componente de tip
liste cu scopul de a ne familiariza cu acest mediu de realizare a
paginilor web. Pentru a ncepe editarea unei pagini noi se
acceseaz meniul File / New i ca urmare se deschide o pagin
ce poart poart numele untitled. Pot fi deschise mai multe
pagini n tab-uri diferite ntre care avei posibilitatea de a
naviga.
Pentru a introduce elementele specificate in cerin se va edita
coninutul care apoi va fi formatat corespunztor utiliznd
opiunea format din bara de meniu.

Avei la dispoziie urmtoarele ustensile:


62

Format / Font permite alegerea tipului de font similar


cu un editor de texte;

Format / Size permite specificarea mrimii caracterelor


dintr-un numr de opiuni (small, large, medium, x-large
etc.).

Format / Text style permite specificarea stilului (bold,


subscript, superscript etc), dar i a modului n care este
afiat (citation, code, acronym etc.)

Format / Text Color deschide paleta de culori ce se


poate alege pentru afiarea textului.

63

64

Format / Writing Direction permite selectarea scrieri


de la dreapra la stnga sau de la stnga la dreapta.

Format / Paragraph specificarea faptului ca este body


text, paragraf, tipuri de heading, sau sectiune similar cu
cea introdus de ctre directiva <div>

Format / List permite toate opiunile pentru


introducerea de liste n HTML. Elementele permise sunt
liste
nenumerotate
(buletted),
liste
numerotate
(Numbered), iar pentru listele de definitii avem opiunile
Term i Definition semnificnd termenul i definiia
asociat termenului. Foarte important este facilitatea de
a specifica proprietaile listelor.

La click pe opiunea List properties se deschide fereatra de mai


jos care conine dou liste de selecie, un radio buton i butonul
Advanced Edit cu care se deschide fereatra care permite
specificarea valorilor atributelor.

65

Dup cum se observ editorul de proprieti avansate include


trei tab-uri. Tab-ul HTML Attributes permite selectarea/alegerea
din lista de selecie Attribute a oricaruia dintre atributele
standard. Funcie de atributul ales cmpul Value fie primete
automat valoarea specific atributului, fie se transform ntr-o
list de selecie din care se poate alege o valoare dintre valorile

66

permise, fie devine un texbox n care se poate edita valoarea


dorit.

Format / Increase Indent i Format / Descrease Indent


permite creterea, respectiv descreterea indentrii,
opiuni care sunt active contextual. Dac cursorul este
poziionat la un element aliniat la marginea din stnga
opiunea Descrease Indent este, normal inactiv.

Format / Align specific alinierea coninutului pe


orizontal, similar cu un editor de texte (left, right,
center, justify).

Format / Page Colurs and Background deschide o


fereatra specific n care prin radio button se poate alege
opiunea de specificare a culorilor pentru text, link, linkuri deja vizitate si culoare de background. Pentru fiecare,
KompoZer pune la dispoziie ntreaga palet de culori,
alegerea se face printr-un simplu click de mouse. Dac se
dorete o imagine de background se va specifica adresa
relativ sau absolut a url-ului ce conine imaginea. Cu
butonul Advanced Edit se va deschide fereastra
Advanced Propriety Editor similar cu cea descris la
seciunea de liste i bineneles adaptat din punct de
vedere coninut.

67

Format / Page Title and Properties deschide o nou


fereastr ce conine o serie de elemente specifice pentru
realizarea prii de header a unui document HTML. Cu
ajutorul acesteia se poate specifica titlul paginii, autorul,
o descriere sumar a paginii, se poate seta limba n care a
fost dezvoltat, care este direcia de scriere, ce set de
caractere este utilizat. n afar de titlul paginii i a
direciei de scriere informaiile din aceast fereastr nu
sunt vizibile n pagina afiat de browser.

VI.4. INSERAREA DE TABELE


Am vazut modul n care se introduc tabelele n paginile HTML
prin utilizarea directivelor specifice. Editoarele specializate
prmit introducerea mult mai facil a tebelelor n pagini. Vom
dicuta n acest sec iune facilit ile oferite de KompoZer pentru
realizarea tabelelor.
Sunt posibile dou metode pentru inseratea de tabele: utiliznd
icon-ul Table din bara de instrumente sau selectnd din bara de
meniu Table / Insert. Ca urmare a oricrei aciuni se va

68

deschide fereastra Insert Table ce conine trei tab-uri: Quicly,


Precisely i Cell. n tab-ul Quickly se poate marca cu ajutorul
mouse-ului numrul de linii i numrul de coloane ale tabelei
inserate. n figur se insereaz o tabel cu 2 rnduri i 6
coloane.

Tabul Precisely permite specificarea numrului de rnduri, a


numrului de coloane, a laimii unei coloane exprimat n numar
de pixeli sau n procente din limea ferestrei i a tipului de
border. Tipul de border este specificat printr-o valoare
numeric.

Tabul Cell permite specificarea tipului de aliniere a coninutului


n celule att pe orizontal ct i pe vertical, a posibilitii de
migrare a coninutului pe mai multe linii n aceeai celul, a
spaiului de separare ntre celule.

69

n oricare dintre tab-uri prin click pe butonul Advanced Edit se


deschide o fereatr n care pot fi vizualizate atributele asociate.
Por fi eliminate atribute deja specificate sau pot fi adugate noi
atribute din lista atributelor standard i opionale ale
componentei de tip tabel. n figur sunt vizualizate atributele
acceptate pentru componenta table.

70

n urma acestor comenzi se creaz n pagin structura tabelei ce


urmeaz a fi completat cu coninut. Structura tabelei poate fi
ns modificat la orice moment. Pentru aceasta tabela trebuie
selectat prin click mouse pe tabel urmat de apsarea butonului
dreapta al mouse-ului. Se va deschide un meniu drop-down ce
conine pad-ul Table Cell Properties, care grupeaz op iunile
referitoare la propriet ile tabelei sau ale unor elemente ale
acesteia. Dac se dore te inserarea de noi rnduri se va ac iona
pad-ul Table Insert care permite inserarea unei alte tabele, a
unui rnd deasupra celui focalizat sau dupa cel focalizat, a unei
coloane naintea celei focalizate sau dup cea focalizat sau a
unei celule nainte sau dup cea curent.

71

Ac iuni similare pot fi fcute pentru Table Select sau Table


Delete. O celul poate fi alipit cu celula din dreapta dac se
activeaz pad-ul Join Cell to the Right. Culoarea de Background
poate fi aleas att pentru ntreaga tabel ct i pentru fiecare
celul cu Table or Cell Background Color.
Aceleai operaii pot fi fcute dac apelm la meniul Table din
bara de meniu. n plus aici avem pad-ul Table Properties cu
72

ajutorul cruia se pot modifica proprietile ntregii tabele, a


rndurilor sau a celulelor dorite. Sunt setabile numrul de
rnduri, numrul de coloane, nalimea i laimea acestora,
dimensiunea n pixeli pentru border, spaiile dintre celule,
spaiul dintre borderul unei celule i coninutul celulei, tipul de
aliniere, poziia pentru caption, culori pentru background.

Sarcin de lucru
Sa se realizeze o pagin care conine pe lng elemente de tip
text un tabel cu producia agricol la hectar din anul 2010 i un
al doilea tabel ce conine cantitatea de produse disponibile
pentru comercializare cu specificarea pre ului unitar. Pagina
con ine un titlu afiat centrat, textul explicativ aliniat att la
stnga ct i la dreapta (justified full), o linie orizontal, iar cele
dou tabele sunt centrate n pagin.
Dup realizarea codului surs n KompoZer, verificai dac
pagina este afiat pagina n browser similar cu imaginea din
fig. 6.4.

73

Fig. 6.4 Vizualizarea paginii ce con ine tabele

VI.5. LINKURI I IMAGINI


n HTML pot fi create linkuri la alte pagini web sau n interiorul
aceleiai pagini. Pentru aceasta, am vzut c trebuia s editm
directivele specifice unui link. Cu editorul specializat
KompoZer sarcina devine mult mai simpl, directivele fiind
puse automat n codul surs ca urmare a apelrii la ustensilele
pe care le pune la dispoziie.
Pentru a crea un link, fie se selecteaz instrumentul Link din
bara de instrumente, fie apelm la meniul Insert / Link. Ambele
deschid
aceeai
fereastr
care
permite
specificarea
proprietilor. Pentru linkuri n aceeai pagin este necesar s se
declare mai nti marcajul utiliznd instrumentul Anchor, iar
dac saltul n aceeai pagin se efectueaz la un titlu, se va
alege ca marcaj un element de tip heading. Indiferent dac se
folosete opiunea din meniu sau instrumentul Link din bara de
instrumente se va dischide fereatra Link Properties n care se
completeaz cmpurile cerute.

74

Link Text un text box n care se se introduce textul ce


va fi afiat n pagina care refer linkul, text ce este afiat
n culoarea stabilit la definirea proprietailor paginii i
care este activ la click.

Link Location - un text box n care se specific adresa


paginii care se va deschide la click pe link, ca adres
absolut sau o adres relativ fa de pagina curent sau

o adres de mail (pentru a deschide un formular pentru


transmitere de mail). Cele dou check box-uri specific
dac locaia este o adres de mail, iar pentru pagini
referite dac adresa este relativ la pagina curent. n
lista de selecie (popup list) se vor gsi toate marcajele si
toate elementele cu stil heading din document. Alegerea
unui astfel de element determin saltul la elementul
specificat.

Target specific locul n care este deschis pagina


referit prin legtura creat.

Alte proprietai pot fi specificate dac se apas butonul More


Properties, ns acele proprieti nu sunt eseniale n realizarea
linkurilor. Butonul Advanced Edit deschide fereastra n care se
pot aduga i seta valorile atributelor standard sau opionale,
ntr-un mod similar cu utilizarea acestora la alte elemente
discutate pn la acest moment.
Pentru a realiza un marcaj int, instrumentul Anchor permite
definirea acestuia. Marcajul poate sa aib acelai nume cu un
cuvnt sau mai multe cuvinte din coninutul paginii sau un nume
diferit.
O imagine prezent ntr-un document poate fi n acelai timp un
link care s refere un alt document, un marcaj sau o adres de
email. Cu aceast ocazie vom discuta i modalitatea de inserare
a imaginilor n pagini web, bineneles i cu asocierea de
linkuri. Pentru a insera o imagine aceasta trebuie s fie pstrat
ntr-un fisier i salvat ntr-un format ce este recunoscut de ctre
75

browser (.jpeg, .gif, .png etc). Pentru a iniia inserarea unei


imagini avem la dispoziie meniul Insert / Image sau
instrumentul Image din bara de instrumente. Ambele deschid
fereatra Image Properties, ce are n compunere mai multe taburi.

n primul rnd trebuie specificata adresa fiierului ce conine


imaginea ca adres relativa sau absolut, funcie de bifarea
check boxului situat sub text box. Icon-ul din dreapta textboxului ofer posibilitatea navigrii prin directoarele stocate local
pentru a alege fiierul dorit. Se poate preciza sau nu textul afiat
alternativ. Dimensiunea de afiare a imaginii se poate seta din
tab-ul Dimension. Pentru a nu deforma imaginea este
recomandat bifarea check boxului Constrain astfel ca la
introducerea uneia dintre dimensiuni cealalt s fie setat
automat pstrnd proporiile. Pot fi setate distanele fa de
margini, borderul care nconjoar imaginea, modul de aliniere a
textului din pagina cutent cu imaginea.
Pentru ca imaginea s se comporte similar cu un link n tab-ul
link se vor preciza atributele n acelai mod n care sau precizat
la elemete de tip text.

76

Sarcin de lucru
Sa se realizeze o pagin ce are aspectul din figura 6.5. Pagina
con ine un titlul centrat, o lista numerotat ce include o list cu
bullets, un tabel cu dou linii i dou coloane ce conine pe al
doilea rnd dou imagini. Pagina conine mai multe link-uri,
form1 este un link la o alt pagin ce se deschide n pagina
curent, link la pagina curent deschide ntr-o alt fereastr
pagina curent i se pozitioneaz la marcajul aici. Imaginea din
prima coloan are asociat un link care deschide pagina form2 n
aceeai fereastr.

Fig 6.5 Rezultat pagin


77

Realizai pagina din figur utiliznd editorul specializat i


verificai corespondea dintre cerinele formulate i
comportamentul paginii realizate. n locul imaginilor din figur
putei afia orice alte imagini.

VI.6. FORME
Am realizat pagini HTML dinamice prin scrierea de cod n
editor de texte obinuit. Este momentul s realizm pagini
dinamice utiliznd un editor specializat.
Pentru a insera o form se folosete meniul Insert / Form sau
Form din bara de instrumente. Ca rezultat, devin vizibile
opiunile pentru definirea formei i a elementelor specifice ce
pot fi inserate ntr-o form.

Se ncepe cu definirea formei prin click pe tab-ul Define Form


care deschide fereastra de proprieti n care se va preciza
numele formei, aciunea ntreprins la receptionarea formei
completate de ctre server i metoda de transfer a parametrilor.
Apoi forma poate fi populat cu elementele dorite prin alegerea
tab-ului corespunztor tipului de element. Ac ionarea unui tab
deschide fereastra de propriet i n care se precizeaz valorile
dorite pentru atribute. Ca un prim exerci iu vom realiza pagina

78

din fig. 6.6 n care sunt prezente componentele principale ale


unei forme.

Fig. 6.6 Pagina ce con ine o form realizata cu editorul KompoZer


Pentru a realiza pagina se parcurg urmtorii pai:
1. Se deschide un nou fiier din meniul File / New sau
cu opiunea New din bara de instrumente.
2. Se introduce titlul paginii, stil heading 3, centrat.
3. Se editeaz textul scris cu
corespunztor culoarea textului

albastru,

alegnd

4. Se insereaz forma din meniul Inset / Form / Define


form.
5. n fereastra deschis se completeaz cmpurile ca n
imaginea de mai jos:

79

6. Se introduce i se formateaz textul pn la primul


element de tip textbox.
7. Click pe tab-ul Form Field i se completeaz cmpurile.
Dup completare se apas butonul OK.

8. Se procedeaz similar pentru al doilea textbox.


9. Se introduce i se formateaz corespunzator textul pn
la cmpul de introducere parol.
10. Click pe tab-ul Form Field i se completeaz cmpurile
alegnd tipul Password.

80

11. Se introduce i se formateaz textul pn la primul


checkbox.
12. Click pe tab-ul Form Field, se alege tipul Check Box i se
completeaz cmpurile.

13. Se procedeaz similar pentru celelalte check boxuri fr a


bifa opiunea Initially Checked.
14. Se continu introducerea i formatarea textului pn la
primul radio button.
15. Click pe tab-ul Form Field, se alege tipul Radio Button i
se completeaz cmpurile.

81

16. Se procedeaz similar pentru celelalte butoane radio.


17. Se introduce i se formateaz textul pn la textarea
18. Click pe tab-ul Text Area i se completeaz cmpurile.

82

19. Se introduce textul pn la lista de selctie.


20. Click pe tab-ul Selection List.
21. Se completeaz informaia n fereastra deschis

22. Se introduce i se formateaz textul pn la primul buton.


23. Click pe tab-ul Form Field, alege tipul Reset Button i se
completeaz cmpurile.

83

24. Se procedeaz similar pentru butonul Trimitere Form


completat, cu alegerea tipului Submit Button.
Dup realizarea paginii click pe celelalte opiuni din bara mod
editare/vizualizare pentru a vedea codul surs al paginii i a
urmri tag-urile HTML.
Salvai pagina n directorul dorit, dup care o deschidei cu
browserul preferat. Verificai dac pagina este afiat n forma
ceruta i dac toate elementele se comport corespunztor.

84

VII. CREAREA UNUI SITE WEB


Pe parcursul acestui capitol vei nva despre:
Servicii de gazduire web.
nregistrarea i configurarea unui nume de domeniu.
ncrcarea paginilor web pe site.

VII.1. SERVICII DE GZDUIRE WEB


Pn acum am nvat sa construim pagini HTML ce conin diverse
elemente, pagini ce au fost salvate ntr-un director pe maina proprie.
Aceste pagini pot fi oricnd modificate, dar nu se permite altor
persoane s vizualizeze paginile cu un browser. Aceste pagini sunt
vizibile doar local. O pagin web devine vizibil ntregii lumi numai
dac este componenta unui site web publicat.
Un site web este format dintr-o colecie de documente pstrate pe un
calculator ce este n permanen conectat la Internet, documente ce
pot fi accesate de oricine dispune de o conexiune Internet.
Pentru a crea un site web trebuie parcurse mai multe etape. De
regul, aceste etape sunt:
1. Realizarea documentelor n format HTML utiliznd
editoare de texte clasice sau editoare specializate.
2. Gsirea unui serviciu de gazduire web.
3. nregistrarea unui nume de domeniu i nregistrarea siteului sub acel nume de domeniu.
4. ncrcarea paginilor realizate de pe maina local pe siteul public.
Un serviciu de gazduire web este oferit de o companie ce ofer
un calculator ce funcioneaz ca server web i este conectat tot
timpul la Internet. Acest calculator ateapt cereri de la
browserele web aflate la distan i returneaz acestora paginile
web solicitate. Pot asigura gazduire companii de diverse
dimensiuni (n special furnizorii de Internet), preurile pot avea
o gam larg de valori ncepnd chiar cu servicii gratuite. Dac

85

ncercai o cutare dup cuvintele gazduire web sau web


hosting, utiliznd un motor de cutare, vei constata c sunt o
mulime de companii care ofer astfel de servicii. Cel mai
indicat ar fi s ntrebai furnizorul de Internet dac nu ofer i
servicii de gzduire web.
O serie de elemente tehnice sunt importante pentru alegerea
serviciului de gzduire:

Spaiul pe disc majoritatea serviciilor de gazduire


limiteaz capacitatea maxim a spaiului de stocare
atribuit. Mrimea spaiului pe disc necesar pentru site-ul
dezvoltat este dat de volumul informatiilor oferite de
site. Avei n vedere faptul c publicarea de fotografi pe
site necesit uzual volume de 50-250 kb pentru fiecare
fotografie. Treuie s avei n vedere i extinderea
ulterioar a site-ului. La un site obinuit, de regul 20
Mb sunt suficieni.

Limita de transfer. Pentru ca browserul care a cerut


pagina s ncarce coninutul ei datele sunt transferate de
la server la browser. Limita de transfer este specificata
uzual, ca fiind volumul datelor ce se pot transfera lunar
de la serverul web. Pot fi servicii cu limit de transfer
absolut (efect: nchiderea serviciului cnd s-a atins
limita), cu limit flexibil (la care se percep costuri
suplimentare pentru traficul care depete limita) sau
fr limit de transfer (nelimitat). Pentru un site personal
o limit de circa 2Gb lunar este suficient.

Suport FTP pentru transport. Paginile create i salvate


pe calculatorul personal vor trebui mutate pe serverul
web al serviciului de gzduire. Mijlocul uzual pentru
transferul de fiiere ntre calculatoare prin Internet este
File Transfer Protocol (FTP). Editorul specializat
KompoZer utilizeaz protocolul FTP pentru a ncrca
fiiere pe serverul web al serviciului de gzduire.

Dup alegerea serviciului web de gazduire vei intra n


posesia informaiilor despre serverul FTP pentru ncrcarea
fiierelor i a numelui de utilizator, respectiv parol pentru
accesarea acestui server.

VII.2. NREGISTRAREA SI CONFIGURAREA UNUI NUME DE


DOMENIU
La nceputul cursului s-a discutat despre posibilitatea de
vizualizare a unui site web prin introducerea numelui de
domeniu al site-ului n bara de adrese a browserului. Dac se
dorete un nume de domeniu pentru site-ul dezvoltat trebuie
86

nregistrat numele de domeniu dorit i configurat astfel nct s


indice serverul web al serviciului de gazduire. Nu este
obligatorie nregistrarea unui nume de domeniu, dar fr aceasta
site-ul nu este prsonalizat. Fr nregistrarea unui domeniu
adresa sa va fi ..numeserviciugazduire/NumeSite. Mai nti
trebuie ales un nume de domeniu i apoi configurat astfel nct
s indice corect site-ul. De regul aceste operaii sunt fcute de
cei care asigur serviciul de gzduire. Totui cteva informaii
sunt utile. Poate fi ales doar un nume de domeniu ce nu a fost
nregistrat anterior de altcineva. Numele de domeniu este
achiziionat de la registratorii de nume de domenii. Un nume de
domeniu este nchiriat pentru o perioad determinat, la
expirarea sa putei renregistra numele pentru o alt perioad
sau l putei elibera. Numele de domenii se i vnd, exist
persoane care au fcut o afecere din asta. Au fost nregistrate
domenii avnd nume sonore, ce sunt identificate cu afaceri
profitabile. Acum, proprietarul afacerii ar dori ca i site-ul s
aiba acelai nume i poate cheltui o sum uriae pentru a
dobndi numele. Dac accesai site-ul http://www.inregistraredomenii.ro/ putei verifica dac numele pe care intenionai sa-l
atribuii site-ului dumneavoastra este liber.
Poate mai important este configurarea domeniului achiziionat
pentru a indica corect site-ul. n primul rnd trebuie s furnizai
adresa IP pentru serverele de nume la care se dorete s indice
numele de domeniu. Dac nu cunoatei adresa IP a serveruluii
de nume ntrebai serviciul de gzduire web, care va oferi de
regul, dou adrese IP, una pentru serverul primar i una pentru
cel secundar. Odat configurat numele de domeniu se pot
ncrca paginile web pe site.

VII.3. NCARCAREA PAGINILOR WEB PE SITE


Orice pagin web salvat pe propriul calculator poate fi
ncrcat pe serverul web. Noi pn acum am realizat doar
pagini HTML care sunt componente ale site-ului. S
presupunem c dorim s ncrcm pe site pagina Forme
KompoZer dezvoltat n capitolul anterior. Pentru aceasta
deschidem n Mozilla KompoZer pagina Forme KompoZer i
alegem meniul File / Publish sau Publish din bara de
instrumente. Se va deschide o nou fereastr ce are dou tab-uri
Publish si Settings. Dac nu ai publicat nici o pagin fereastra
se va deschide cu eticheta de pain (tab) Settings ca n figura de
mai jos.

87

Vei introduce n casetele de text informaiile cerute, ncepnd


cu numele site-ului la caseta Site Name, adresa directorului
rdcin sau url-ul site-ului (nu includei nume de fiiere) la
Web Site Information, adresa serverului ftp comunicat de
serviciul de gazduire web la caseta Publishing Server. n
casetele de text User name i Password introducei numele
utilizatorului i parola pentru accesarea serverului ftp. Aceste
informaii sunt cerute la prima publicare a unui site. Pentru
publicarea altor pagini pentru acelai web site aceste informai
nu mai sunt cerute.
Dac ai introdus informaiile cerute n pagina cu eticheta
Settings, trecei la pagina cu eticheta Publish, ilustrat mai jos.

88

n csuele de dialog sunt motenite o serie de informaii


introduse n pagina cu eticheta Settings sau caracteristici ale
paginii ce se public. Astfel, Site Name este motenit din tab-ul
Settings, Click pe New Site comut pe tab-ul Settings pentru a
introduce informaiile caracteristice noului site. Csua Page
Title permite specificarea titlului paginii sau motenete titlul
sopecificat n fiierul surs, Filename specific numele
fiierului. Ne amintim c paginile web sunt stocate pe serverul
web ca fiiere. Dac pagina nu are un titlu i nu a fost salvat ca
fiier local, titlul i numele fiierului se vor introduce n
csuele corespunztoare. Pagina cu eticheta Publish permite
specificarea unui subdirector al site-ului pentru pagina curent,
ct i includerea imaginilor sau a altor fiiere referite utiliznd
aceeai locaie cu pagina sau utiliznd un subdirector al siteului. Dup completarea informaiilor dorite, un simplu click pe
butonul Publish va trimite pagina la server iar fereastra
Publishing va raporta starea ncrcrii paginii web. La
ncercarea de publicare pot s apar erori n principal datorit
numelui greit al serverului FTP, al unei combinaii incorecte
nume utilizator parol.
O pagin odat ncrcat poate fi vizualizat cu ajutorul unui
browser. Pentru asta se introduce n bara de adrese a
browserului adresa (url-ul) site-ului.

89

VIII. DEZVOLTAREA UNUI


SITE PERSONAL/FAMILIAL
Pe parcursul acestui capitol vei nva despre:
Utilizarea abloanelor pentru site-uri
Personalizarea ablonului
Publicare site
Ca toate c putem crea un site web de la zero, caz n care trebuie
dezvoltat propriul design, este mult mai practic a crea un site pornind
de la un template (ablon).

VIII.1. UTILIZAREA ABLOANELOR PENTRTU SITE -URI


Un template (ablon) este reprezentat de o colecie de pagini
web generale, nefinalizate (semifabricate) care pot fi uor
personalizate pentru a crea site-ul dorit. Pot fi gsite pe Internet
o multitudine de abloane, pregtite pentru diverse clase de siteuri, oferite fie gratuit fie avnd costuri mici. Pot fi cutate
abloane dup diverse categorii specifice tipului de site
dezvoltat, ca de exemplu: Personal, Business, Evenimente (ex,
Cstorie), E-commerce etc. Unele dintre abloane sunt
abloane profesionale, motiv pentru care sunt disponibile la
preuri ridicate.
Dezvoltarea de site-uri bazate pe abloane are motivaii diverse.
Visul oricreia dintre persoanele ce utilizeaz Internetul este de
a avea propriul website, vis se nu este totdeauna o realitate
datorit restriciilor financiare pentru a susine dezvoltarea unui
site sau a lipsei unei idei de dezvoltare a propriului site. Dac se
apeleaz la o firm specializat n construirea de site-uri,
aceasta va face designul i va popula paginile cu informaia
furnizat de ctre beneficiar. Utilizarea abloanelor ofer
posibilitatea de a fi personalizate uor, chiar de un nceptor,
necesitnd eventual o finisare final realizat de ctre
specialiti. La momentul actual exist abloane pentru aproape
orice produs: logo, introduceri, bannere, reclame, brouri etc.
Sunt de asemenea disponibile template-uri n HTML, Adobe
Photoshop i Macromedia Flash. Modelele sunt att de bine
particularizate, nct se poate crede c sunt chiar un website nu
un ablon (template) pentru dezvoltare. Dac abloanele HTML
i Photoshop sunt uor de personalizat chiar de ctre un
nceptor, Flash este ceva mai dificil pentru nceptori el fiind

90

de regul utilizat pentru pagini animate. n plus, site-urile flash


sunt mai greu de indexat de ctre motoarele de cutare i
necesit un timp mai mare pentru a se descrca n comparaie cu
un site HTML.
Din considerente de disponibilitate, dar i eficien n realizarea
de site-uri web am ales pentru dezvoltarea de site-uri Yahoo
SiteBuilder, un produs free care pune la dispoziie 422
abloane. El poate fi descrcat gratuit de la adresa
http://webhosting.yahoo.com/ps/sb/index.php?redirect_uri=tt .
Dup descrcare, executabilul obinut se va rula pe maina
proprie urmrind indicaiile softwareului de instalare. Dup
instalare SiteBuilder este lansat automat sau se poate lansa din
meniul Programs / Yahoo! / SiteBuilder / SiteBuilder ,
programul deschiznd fereastra din fig. 8.1.

Fig. 8.1. Pagina de start SiteBuilder


Produsul a fost conceput pentru a fi utilizat de publiucul larg,
fr cunotinte anterioare motiv pentru care nc de la start
ofer o serie de instrumente care s ghideze utilizatorul pentru
realizarea paginilor web. n tab-ul Quick Links avem trei
seciuni care permit acces la help, crearea unui nou site, operatii
asupra unui site existent. Pentru a crea un nou site se apeleaz la
opiunea Quick Links / Create a New Site lansnd astfel n
execuie un wizard (vrjitor) pentru creare site-uri. n tab-ul
Quick Links executai click pe butonul Start.

91

Ca urmare se trece la fereastra urmtoare n care se cere


specificarea numelui noului site i a locaiei n care va fi salvat.
Pentru primul site am ales numele Personal i folderul n care
va fi salvat C:\Users\User\sitebuilder\sites, ecran ilustrat n
figura 8.2.

Fig. 8.2. Dezvoltarea uni site nou Personal


Click pe butonul Next i n urmtoarea fereatr avem de ales
ntre dou alternative, cea de a deschide o pagin blank i cea de
a ncrca un template. Cum n aceast seciune dorim s nvm
despre dezvoltarea paginilor utiliznd un template vom opta prin
click pe Template. La click pe Next sunt puse la dispoziie
abloanele oferite de ctre SiteBuilder. Am ales pentru nceput o
pagin personal pentru o
familie ce are activitate n
agroturism. n directorul specificat vor fi salvate toate
componentele site-ului, structura fiierelor fiind cea ilustrat n
tab-ul Coninut Site (Site Contents) din fig. 8.3.

92

Fig. 8.3 Coninut site (Site Contents)

VIII.2. PERSONALIZAREA ABLONULUI


ablonul conine 4 pagini: Index.html (home page),
Aboutus.html, Contactus.html i Services.html. Fiecare pagin
are construit un ablon ce poate fi adaptat. Prima pagin a site
este pagina Index.html. n fig. 8.4 sunt ilustrate principalele
elemente SiteBuilder..

Fig.8.4 Elemente SiteBuilder


93

Similar cu alte medii pentru dezvoltare site-uri web dup


ncarcarea ablonului selectat n pagin sunt vizibile
urmtoarele zone:

Bara de meniu

Bara de instrumente

Spatiul de ajutor (help)

Spaiul de lucru n care este vizibil pagina de nceput

Spaiul coninut site

Zona de vizualizare pagin

Numele site-ului i fiierele aferente sunt afiate n spaiul


coninut site. Fiecare pagin conine un ablon ce va trebui
particularizat cu informaiile particulare ce dorim s fie afiate.
Vom ncepe cu pagina index.html, pagina de nceput ce va fi
prima afiat. Pagina are n partea stng meniul care permite
navigarea ntre pagini. n partea dreapt a paginii este afiat
ablonul paginii curente ce va fi particularizat.
n pagina index.html ntrepridem urmtoarele aciunui:

94

nlocuim numele companiei cu Pensiunea turistic


Roua;

nlocuim Page name hier cu Acasa. Text boxul poate


fi mutat n oricare alt poziie funcie de dorina
beneficiarului.

Vom nlocui cele trei seciuni de coninut cu cel din fig.


8.5. Fiecare seciune are un titlu scris cu stil heading i o
poriune de text scris cursiv. Seciunea centrala este o
lista nenumerotat.

n meniul din stnga paginii dublu click pe Home


permite modificarea textului afiat pe buton. Vom tipri
Acas.

Fig. 8.5 Pagina Index a site-ului


Procedai similar cu celelate 3 pagini ale site-ului n vederea
particularizrii. n final salvai toate paginile site-ului.

VIII.3. PUBLICARE SITE


SiteBuilder lucreaz offline realiznd toate funciile ca un editor
de texte instalat pe propriul calculator. Ca urmare el este utilizat
pentru construirea propriilor pagini pe propriul calculator.
Pentru ca site-ul dezvoltat s poat fi vizitat de ali utilizatori
acesta trebuie publicat. Pentru publicare paginile dezvoltate
trebuiesc copiate din directorul local pe un server web aa cum
am mai discutat n capitolul anterior. Totui, nainte de
publicare trebuiesc intreprinse o serie de aciuni pentru a ne
asigura c siteul este vizibil aa cum dorim.
Mai nti ne asigurm c pagina de nceput (home page) este
denumit index.html. Pentru a verifica acest lucru ne uitm n
panoul Site Contents din dreapta ecranului dac pagina de
nceput este numit index.html. Dac nu are acest nume va
trebui redenumit nainte de publicare. Pentru site-ul dezvoltat
pe baza ablonului maginea panoului Site Contents este cea din
fig. 8.6.

95

Fig. 8.6 Site Contents


n cazul nostru home page este salvat cu numele index.html.
Pentru a ilustra modul n care se redenumete o pagin vom
redenumi
paginile
aboutus.html
n
despre_noi.html,
contactus.html n contact.html i services.html n servicii.html.
Reinei c numele fiierului asociat unei pagini devine parte a
adresei web (url) i trebuie s respecte restriciile impuse pentru
numele unui url. Astfel, numele fiierului poate conine numai
litere, numere, undersores, linie de desprire. Pentru a
redenumi un fiier efectuai urmtoarele operaii:

96

Localizai numele fiierului pentru pagina pe care dorii


s o redenumii n panoul Site Contents.
Plasai cursorul peste numele fiierului i click dreapta
pe mouse.
Selectai opiunea Rename File.
Numele fiierului este hightlight i se permite editarea
noului nume, dup care Enter.

Dup redenumire SiteBuilder va cere confirmarea operaiui de


uldate a numelui fiierului. Procedai similar pentru toate
fiierele ce vor fi redenumite.
Totdeauna nainte de a publica un site este recomandat s se
vizualizeze coninutul su pentru a fi siguri c este afiat aa
cum s-a dorit. Pentru a vedea paginile nainte de a fi publicate n
acelai mod n care vor fi vzute de ctre vizitatori parcurgei
urmtori pai:

Deschidei pagina index a site-ului

Selectai File / Preview in Browser

Pagina curent va fi afiat ntr-o fereastr separat a


browserului. De aici putei naviga la celelalte pagini ale siteuluji. Dac dorii s vedei modificrile fcute n una dintre
pagini nchidei fereatra Preview i deschidei alta, Refresh sau
Reload nu va afia modificrile fcute n pagin dup ce
Preview a fost lansat.
Obs: Reinei c preview nu este dect o reprezentare a
paginilor i pentru a face site-ul disponibil n Internet va trebui
publicai site-ul web.
Sarcin de lucru
Sa se personalizeze i s se pregateasc pentru publicare site-ul
personal/familiar utiliznd ablonul disponibil pe CD. Operaia
de personalizare a site-ului necesit n jur de dou ore de lucru.

97

IX. REALIZARE SITE PENTRU


O COMPANIE
Pe parcursul acestui capitol vei nva despre:
De ce un site web pentru o companie?
Personalizarea ablonului
Pregatirea pentru publicare site
Am dezvoltat n capitolul anterior un site simplu personal/familiar. n
acest capitol vom proceda similar pentru a dezvolta un site pentru o
companie utiliznd un ablon din categoria business. Chiar dac
exist similitudini ntre cele dou, un site pentru o companie are o
complexitate mult mai mare.

IX.1. DE CE UN SITE WEB PENTRU O COMPANIE ?


De ce este att de important ca o companie sa aib propriul site?
S presupunem c dorii s achiziionai un automobil, nu
suntei hatri asupra marcii i a modelului, dar tii care este
suma pe care suntei dispui s o investii. V putei gndi la
achiziia unui automobil nou, n contextul limitrilor bugetare,
caz n care va trebui s v limitai la un model ieftin sau
decidei s achiziionai o main second hand pentru care pe
langa datele specifice modelului v intereseaz o serie de date
suplimentare cum ar fi: kilometrii parcuri, numr de proprietari
etc. Dect s pierdei foarte mult timp pentru a face vizite la
firmele care se ocup cu vnzarea de autoturisme n oraul
dumneavoastr putei vizita site-urile vnztorilor locali pentru
a afla promoiile existente, preurile pentru diferite mrci i
modele, dotri standard, dotri opionale i chiar posibiliti de
finanare.
Studii recente au artat ca din ce n ce mai muli cumprtori
apeleaz la Internet, vizitnd site-uri pentru a face un studiu de
pia nainte de a achiziiona un produs. Ca o concluzie fireasc
studiile au evideniat, pentru companii, necesitatea existenei
unui site web prin intermediul cruia s prezinte serviciile i
produsele pe care le ofer. Companiile stiu c la momentul
actual o firm care nu este prezent pe web, practic nu exist,
toate companiile avnd de ctigat din prezena pe web. Pn la
98

urm un site web este o form de publicitate on-line pentru


companie, similar cu publicitatea facut prin pliante, reclame
publicate n ziare sau cataloage de produse. Pentru a crea un site
informaional pentru o companie este foarte simplu s pornim de
la un ablon care are un astfel de coninut i poate fi
personalizat din punctul de vedere al
preferinelor i
specificului companiei promovate. Pentru a alege tipul de ablon
v gndii mai nti la ce ar trebui s conin un pliant
publicitar. Printre lucrurile ce trebuie s ias n eviden sunt:
numele companiei, adresa, orar, o prezentare a companiei,
produsele i serviciile oferite, mod de contactare. Pliantul mai
poate s conin lista celor mai vndute produse, o prezentare a
ofertelor speciale, portofoliu de clieni. Pentru realizarea acestui
site am construit un ablon ce conine 5 pagini a caror coninut
este:

Pagina de start (Acas)


- o scurt prezentare a
companiei, principalele nouti, promoii i alte descrieri
(fig. 9.1).

Despre noi Prezentarea n detaliu a companiei (fig. 9.2)

Produse Prezentarea portofoliului de produse oferite


(fig. 9.3)

Servicii Oferta de servicii (fig. 9.4)

Contact Furnizarea unui formular pentru a transmite


opinii catre companie (fig. 9.5).

99

Fig. 9.1 Pagina de start

Fig.9.2 Pagina Despre noi

100

Fig. 9.3 Pagina Produse

Fig. 9.4 Pagina Servicii

101

Fig. 9.5 Pagina Contact

IX.2. PERSONALIZAREA ABLONULUI


Cele cinci pagini ce constituie site-ul urmeaz a fi personalizate
cu informaia dorit. Cu un simplu dublu click pe fiecare zona a
ablonului se intr n mod editare pentru a schimba coninutului
paginii. Pot fi alese culorile dorite utiliznd instrumentele din
bara de instrumente, pot fi inserate imagini, completarea
tabelelor i redimensionarea acestora. Poziia obiectelor poate fi
modificat prin drag and drop. Dac se dorete noi obiecte pot
fi adugate sau se poate renuna la obiecte existente. Toate
butoanele de navigare pot fi reinscripionate, eventual schimbat
ordinea.

IX.3. PREGTIRE PENTRU PUBLICARE SITE


SiteBuilder lucreaz offline realiznd toate funciile ca un editor
de texte instalat pe propriul calculator. Ca urmare el este utilizat
pentru construirea propriilor pagini pe propriul calculator.
Pentru ca site-ul dezvoltat s poat fi vizitat de ali utilizatori
acesta trebuie publicat. Pentru publicare paginile dezvoltate
trebuie copiate din directorul local pe un server web aa cum am
mai dicutat n capitolele anterioare. Cu toate acestea, nainte de
publicare trebuie s ne asigurm c siteul este vizibil aa cum
dorim.
n primul rnd am avut grije ca pagina de nceput (home page)
s fie denumit index.html. Verificm acest lucru n panoul Site
102

Contents care trebuie s indice numele index.html pentru pagina


de nceput. Am ilustrat n capitolul anterior modul de
redenumire a paginii. Reinei c numele fiierului asociat unei
pagini devine parte a adresei web (url) i trebuie s respecte
restriciile impuse. Astfel, numele fiierului poate conine numai
litere, numere, undersores, linie de desprire.
Totdeauna nainte de a publica un site este recomandat s se
vizualizeze coninutul su pentru a fi siguri c este afiat aa
cum s-a dorit. Pentru a vedea paginile nainte de a fi publicate n
acelai mod n care vor fi vzute de ctre vizitatori parcurgei
urmtori pai:

Deschidei pagina index a site-ului

Selectai File / Preview in Browser

Pagina curent va fi afiat ntr-o fereastr separat a


browserului. De aici putei naviga la celelalte pagini ale siteuluji. Dac dorii s vedei modificrile fcute n una dintre
pagini nchidei fereatra Preview i deschidei alta, Refresh sau
Reload nu va afia modificrile fcute n pagin dup ce
Preview a fost lansat.
Obs: Reinei c preview nu este dect o reprezentare a
paginilor i pentru a face site-ul disponibil n Internet acesta va
trebui publicat.
Sarcin de lucru
Sa se personalizeze i s se pregteasc pentru publicare site-ul
aferent companiei care trebuie s conin cel puin cele 5 pagini
prezentate. Se va utiliza ablonul disponibil pe CD. Operaia de
personalizare a site-ului necesit n jur de dou ore de lucru.

103

X. E-COMMERCE
Pe parcursul acestui capitol vei nva despre:
Introducere n e-commerce
Comparaie comer tradiional, comer electronic
Crearea unui magazin electronic. Modaliti de plat
Utilizare instrumentelor PayPal Merchant Account
Legislaie comer electronic
Comerul electronic constituie un proces de business revoluionar.
Putem defini comerul electronic (e-commerce) ca fiind prezentarea,
vnzarea i comercializarea bunurilor i serviciilor prin intermediul
tehnologiilor oferite de Internet.

X.1. INTRODUCERE N E-COMMERCE


Comerul electronic a aprut n jurul anilor 1990, moment n care
sistemele de comer electronic se focalizau pe definirea i nelegerea
funciilor n acivitile de comer, a rolului entitilor implicate i a
cerinelor fiecarui grup implicat.
Comerul electronic poate fi definit din mai multe perspective:

104

Perspectiva on-line: Cumprarea i vnzarea de produse i


servicii de ctre companii i consumatori folosind
infrastructura Internet.

Perspectiva comucaional: Livrarea de informaii, produse i


servicii, dar i efectuarea plilor peste linii telefonice, reele
de calculatoare sau alte mijloace de comunicaie electronic.

Procese de business: Aplicarea noilor tehnologii electronice


pentru automatizarea tranzaciilor i fluxurilor de afaceri.

Servicii de business: Un instrument care permite limitarea


costurilor simultan cu mbuntirea calitii produselor i
creterea vitezei de livrare a serviciilor.

Pe de alt parte comerul electronic trebuie privit va fiind mai mult


dect posibilitatea de a comanda dintr-un catalog on-line. El include
o serie de activiti stabilite n site-ul web ca suport pentru
comunicare electronic ntre vnztor i cumprtor, procesarea
tranzaciilor, relaiile cu instituiile financiare. Pot fi identificate o
serie de avantaje ale comerului electronic dintre care amintim:

Fr bariere legate de orar, un site de comer electronic este


disponibil pentru operare 24 ore pe zi, 7 zile pe sptmn.

Eliminarea intermediarilor din lanul dintre productor i


utilizatorul final.

Costurile pentru procesarea tranzaciilor sunt reduse.

Automatizarea procesului are ca effect reducerea numrului


erorilor.

Este bine adaptat la globalizarea pieelor, vnztorul i


cumprtorul se pot gsi la mari distane geografice.

Nu limiteaz gama de produse sau servicii vndute.

Promovarea unui produs poate fi fcut mult mai amplu i


rapid.

Ofer deschidere ctre noi modele de afaceri prin analiza


statistic din propria baz de date.

Existena unui feedback de la clieni permite realizarea noilor


produse n concordan cu cerinele i ateptrile clienilor.

Scderea timpului de livrare a serviciilor, mai ales pentru


acele servicii ce se livreaz online.

n acelai timp, trebuie luate n consideraie i problemele inerente


ale sistemelor de e-commerce, ca de exemplu:

Informaii incomplete, n unele cazuri, despre produse i


servicii, dar i asistena deficitar la alegerea unui produs sau
serviciu.

Muli utilizatori nu au prea mult ncredere n comerul


electronic.

Sunt utilizatori care doresc s vad un produs pentru a se


convinge c este ceea ce i dorete, nu sunt complet edificai
pe baza descrierii i a imginilor prezente pe site.

Cteva repere istorice:

Compuserve ofer clienilor n 1992 posibilitatea de a


cumpra produse online folosind propriile calculatoare.

105

Integrarea n browserul Nescape a Secure Sockets Layer


(SSL) n 1994.

n anul 1995 apar dou dintre marile magazine virtuale de


astzi: Amazon.com i eBay.com.

Valoarea tranzaciilor achiziiilor on-line ajunge la 20


miliarde USD n 1999.

La momentul actual comerul electronic este consolidat i


vnzrile au nregistrat cifre de afaceri record.

n Romnia au aprut n ultimii 3 ani multe magazine on-line.


Este adevrat c numai un anumit segment al populaiei
folosete aceste servicii, n general cei cu un nivel de instruire
ridicat i cu experien mai mare in IT.

X.2. COMPARAIE

COMER

TRADIIONAL ,

COMER

ELECTRONIC
Comerul electronic se difereniaza de cel tradiional chiar dac exist
i pri comune. Se utilizeaz deseori termenul de comer electronic
parial, funcie de nivelul de digitizare a trei factori: process, produs,
agent de vnzri. Dac cel puin unul dintre factori nu este digitizat,
adica este fizic, spunem ca avem un comer electronic parial, spre
deosebire de cazul n care toi factorii sunt digitizai caz n care
numim comer electronic pur.
Pentru o achiziie de produs sau serviciu n comerul tradiional
tranzaciile necesit parcurgerea mai multor etape:

Analiza ofertei existente pe pia din punctul de vedere al


satisfaceri cerinei clientului. Ea mai poarta denumirea de faza
precontractual i este realizat de client;

Negocierea clauzelor contractuale, a condiiilor de achiziie, a


serviciilor oferite, garanii etc, faz la care particip att
clientul ct i agentul de vnzri;

Faza de realizare a comenzii. O comand trebuie procesat


ntruct ea poate solicita produse sau servicii inexistente n
stoc;

Faza de pregtire i expediere a marfii;

Faza de achitare n concordan cu modalitatea de plat


convenit ntre pri la contractare. Sunt situaii n care o parte
din cost este achitat la ncheierea contractului alt parte la
primirea mrfii sau diverse alte combinaii;

Servicii comerciale post-vnzare, numit i faza post-proces.

O activitate de comer electronic utilizeaz un sistem informatic


orientat web, sistem ce este construit n jurul unui site de comer
106

electronic. La comerul electronic gsim aceleai faze specifice


comerului tradiional, cu deosebirea c presupune alte activiti:

Gestionarea catalogului de produse este echivalentul analizei


ofertelor. Catalogul de produse este proprietatea vnztorului,
clientul caut n catalog produsele de care este interesat;

Echivalentul fazei de negociere este faza de gestionare a


coului de produse pe care clientul dorete s-l comande.
Condiiile de achiziie, serviciile oferite, garaniile sunt
informaii la care clientul are acces atunci cnd stabilete
componena coului;

Faza de realizare a comenzii din comerul tradiional are


echivalent n comertul electronic prin faza de prelucrarea
comenzii;

Faza de pregatire i expediere a comenzii este singura faz ce


se desfoar n unele cazuri identic cu cea din comerul
tradiional. Sunt i situaii n care expedierea presupune doar
transmiterea unui cod de activare tot n format digital, de
exemplu licenele software;

Faza de achitare este rezolvat la comerul electronic prin


sistemul de plai electronice. Nu toate magazinele de comer
electronic utilizeaz un sistem de pli electronice, fiind
ntlnite modaliti de plat pein transfer bancar, ramburs la
primirea marfii.

Faza post-vnzare presupene urmrirea relaiilor cu clienii.

Un site de comer electronic trebuie s ofere urmtoarele


funcionalitti:

S afieze produsele comercializate mpreun cu preul i


caracteristicile ce le definesc. Informaia trebuie s fie clar,
corect i complet.

S ofere utilizatorului posibilitatea de a gestiona coul virtual


de cumprturi prin adugarea sau retragerea produselor din
co. Coul arat la orice moment produsele ce urmeaz a fi
comandate i suma ce trebuie achitat pentru cumprare.

S permit efectuarea comenzii prin validarea coninutului


coului;

S accepte modalitile i informaiile de plat de la client. Un


site care accept plai electronice presupune furnizarea de
ctre client a informaiilor referitoare la cartea de credit a
acestuia.

107

Acestea sunt cerine minimale, multe site-uri de comer electronic


ofer funcionaliti suplimentare cum ar fi faciliti de cutare
produse, ordonarea produselor dup cost i/sau denumire, mprirea
produselor dupa categorii etc. Am vorbit despre coul virtual de
cumprturi, el este similar cu un co din comerul tradiional n care
punei produsele dorite nainte de a ajunge la cas i a le cumpra
efectiv. Uzual, cumprtorul studiaz produsele din oferta site-ului,
iar cnd ajunge la un produs dorit prin apsarea butonului Adauga
cos pune produsul n co i continu cutarea. Acceptarea plailor
prin cartea de credit i gestiunea coului de cumprturi nu sunt
operaii banale.
Un magazin electronic trebuie s includ, n plus, un sistem de
administrare ce este invizibil pentru vizitatorii obinuii. Acest sistem
de administrare permite introducerea i actualizarea informaiilor
despre produse, evidena comenzilor, evidena cumprtorilor
nregistrai. Lista opiunilor poate fi mult mai extins permind
realizarea de statistici despre cele mai cutate produse i chiar de
promovarea produselor prin mesaje care informeaz clienii despre
ofertele magazinului.
O serie de legi, scrise sau nescrise, stau la baza comerului electronic:

108

Zona fr perspective instalarea unui site web este


echivalent cu a construi un magazin pe o strad nfundat.
Acesta trebuie promovat printr-un plan de marketing bine pus
la punct pentru a atrage clienii. Metodele uzuale: bannere
pentru a face site-ul cunoscut, obinerea unei poziii avansate
pe site-uri de cutare, legturi cu alte organizaii care s fac
promovarea, coninut care s atrag atenia n care clienii
gsesc un motiv pentru a accesa site-ul de comer electronic.

Legea vnzrii i a cumprrii prin care se atrag clienii


pentru a le oferi ceva gratis i astfel se va vinde i altceva.
Este una dintre metodele des utilizate mai ales la deschiderea
unor magazine sau a promoiilor de sezon Cine cumpr 2
tricouri obine un al treilea gratis, sau Un articol gratuit
pentru primii 30 de vizitatori ai magazinului.

Legea ncrederii produsele i serviciile au un cost


competitiv, sunt de bun calitate. n plus se lucreaz foarte
mult pentru ctigarea ncrederii clienilor, prin diverse
metode: oferirea de datlii asupra locaiei (adres complet,
telefon), includerea de fotografi att pentru prezentare, ct si
pentru personalul implicat n afacere (astfel clienii vd cine
suntei), detalii complete despre produse, o politic clar i
funcional pentru renunarea la produse sau servicii, oferirea
de garanii, contactarea periodic a clienilor. Un element
important pentru ctigarea ncrederii este calitatea site-ului

de comer electronic, care trebuie s aiba un aspect


profesional, nu un site de amatori.

Atragerea clienilor atragere prin coninut atractiv, urmat


de furnizarea regulat a informaiilor prin e-mail. De regul,
afacerile nu supravieuiesc printr-o singur reclam, ci sunt
implicate costuri substaniale pentru stabilizarea clienilor. Se
spune pe bun dreptate c este mult mai dificil pstrarea
unui client, dect atragerea unui client nou. De regul, se
include un formular prin care se colecteaz adresa de e-mail a
vizitatorilor, iar pentru a fi convini s fac acest lucru v vei
asuma c vei trimite informaie de valoare i faptul c adresa
lor de e-mail rmne confidenial. Informaiile transmise
clienilor trebuie s aib frecven regulat, coninutul trebuie
s fie adecvat i s conin ceea ce este de interes pentru
acetia.

Legea niei afacerile mici au succes prin gsirea nielor


goale sau ocupate parial ce vor fi completate impecabil. Este
interesant aici abordarea JustBalls care a descoperit o ni n
domeniul echipamentului sportiv i care s-a mulumit s se
ocupe doar de comercializarea de mingii.

Sondajele efectuate au artat care este profilul clientului ce apeleaz


la serviciile de comer electronic: persoan cu studii superioare,
utilizator de Internet, posesor de card i abonament de telefon mobil,
are venituri peste media populaiei, ocup funcii de decizie la diferite
niveluri.

X.3. CREAREA UNUI MAGAZINE ELECTRONIC . MODALITI


DE PLAT
nainte de a lua hotrrea de a deschide un magazin electronic trebuie
stabilite obiectivele legate de ateptrile avute de la magazin, modul
n care se coreleaz aceast activitate cu celelalte activiti din cadrul
companiei, care sunt resursele ce vor fi alocate. Dac un plan de
afaceri a fost elaborat, acesta trebuie s precizeze cel puin: ce se
vinde, cui se vinde i n ce mod, produsele sunt produse proprii sau
sunt preluate de la furnizorii agreai, parteneri si colaboratori
implicai, soluia de plat aleas. Odat realizat planul de afaceri
realizarea magazinului virtual poate fi fcut in house dac
posedai cunotine de programare pentru a utiliza o soluie gratuit
ce va fi adaptat la propriile nevoi sau se va apela la serviciile unei
agenii specializate.
Din punct de vedere tehnic una dintre ntrebrile majore pentru cei
care deschid o afacere de comer electronic este modul n care
primesc pli de la clienii de pe Internet ceea ce pare pentru muli o
problem. Pentru ca o astfel de afacere s aib success, furnizorul
trebuie s ofere clienilor ct mai multe posibiliti de plat. Cu toate
109

c cel mai utilizat mod de plat pe Internet este cartea de credit, un


magazin trebuie s accepte i alte modaliti de plat ca de exemplu
transfer bancar, ramburs sau mandat potal. Vom detalia numai plata
prin carte de credit, un mod de plat foarte facil pentru care setarea
paginii nu necesit efort mare. Pe de alt parte, acceptul plaii cu
cartea de credit ofer mai mare credibilitate i atrage i clienii
dificili.
Chiar dac nu intenionm s indicm modul optim de realizarea a
unei comenzi online, este bine de precizat la ce sunt supui
participanii la o tranzacie online: vnztor, respectiv cumprtor.
Iniiativa o are cumprtorul, posesorul de card, care decide a
cumpra unul sau mai multe produse din faa calculatoarului, nu n
mod tradiional. S presupunem c site-ul are posibilitatea de
identificare a cumprtorului prin adresa de e-mail. Dac un
cumprtor este pentru prima oar pe site va trebui s creeze un cont
de utilizator, completnd datele ce vor fi necesare pentru identificare
i livrarea bunurilor achiziionate. Presupunem ca se dorete achitarea
comenzii accesnd opiunea checkout (consacrat n limbaj
internaional sau comanda complet n limba romn) care duce la
prima etap a procesului de plat cu cardul autorizarea tranzaciei.
Pentru autorizare, implementarea din Romnia este bazat pe
standardul 3-D Secure care transfer datele comenzii ctre pagina
procesatorului pentru continuarea procesului de plat. Pentru a
autoriza plata, cumprtorul va introduce numrul su de card, data
expirrii cardului, tipul cardului i codul CVV2/CVC2 imprimat pe
card, verificnd n ecranul de plat datele comenzii. Dac
cumprtorul are are un card activat n sistemul 3-D Secure, acesta va
trebui s completeze parola 3-D Secure. Procesatorul de card va
realiza o serie de verificri si va finaliza prin transmiterea prin
intermediul reelelor Visa i MasterCard (funcie de tipul cardului)
ctre banca emitent a cardului un mesaj electronic prin care solicit
autorizarea tranzaciei. Dac cardul are suficiente disponibiliti
pentru acoperirea sumei de plat aferenta comenzii, banca emitent
va rspunde cu un mesaj de confirmare, mesaj ce va fi transmis de
procesator ctre magazinul virtual. Mesajul este sificient pentru
administratorul magazinului pentru a considera comanda complet i
a proceda la livrarea produselor ctre cumprtor. Procesul a pornit
de la comand, procesarea plii a fost transferat ctre alte entiti
abilitate pentru astfel de pli, iar confirmarea certific faptul c suma
aferent comenzii a fost rezervat n contul pltitorului i poate fi
solicitat la momentul livrrii bunurilor.
Din acest moment cumprtorul prsete site-ul i ateapt primirea
comenzii. Vnztorul pregtete produsele pentru expediere prin
curier, colet potal sau alt modalitate. El va solicita decontarea
utiliznd din nou modulul de plat prin accesarea opiunii de
decontare a comenzii. Decontarea presupune transmiterea unui mesaj
ctre procesator, masaj care ajunge la banca cu care a fost semnat
contractul de acceptare, n calitatea sa de proprietar al magazinului

110

virtual. Ca urmare a modului de procesare a tranzaciilor la banc,


suma convenit va fi retras din contul pltitorului i transferat n
contul magazinului genernd un raport detaliat despre sumele
ncasate n cont.
Trebuie avut n vedere i o a treia operaie asigurat de modulul de
plat prin care se poate anula o operaiune la diferite momente:
naintea livrarii prin deblocarea sumei n contul pltitorului, respectiv
dup sau pe parcursul livrrii, operaie echivalent cu o rambursare
realizat n paralel cu recuperarea comenzii. Pot exista o multitudine
de motive pentru anularea unei operaii, ct i nelegeri ntre
cumprtor i vnztor. Tehnic, cele trei funcionaliti sunt
materializate prin formulare web.
Comerul electronic n Romnia bazat pe 3-D Secure este intermediat
de ctre Romcard SA i plata electronic presupune:

Plasarea comenzii ctre procesatorul de card prin mijloace


online;

Transmiterea detaliilor plii care conine suma, datele de


identificare, comanda asociat ctre procesator pentru
rezervarea sumei aferente comenzii din contul pltitorului;

Livrarea comenzii i ncasarea sumei prin intermediul


procesatorului.

Obs: Utilizarea protocolului 3-D Secure protejaz participanii la


tranzacie diminund riscurile. Neutilizarea posibilitii de plat
direct de pe card duce la scderea profitului realizat de vnzator. La
momentul actual, n lume, aproximativ 90% din vnzrile pe Internet
se fac utiliznd plata online, modalitate de plat care simplific
procesul din punctul de vedere al clienilor.
X.3.1. Utilizare instrumentelor PayPal Merchant Account
Compania PayPal a fost nfiinat n 1998 i are ca scop facilitarea
persoanelor fizice i a companiilor s trimit i s primeasc pli.
Oricine poate crea un cont PayPal gratuit. Apoi, poate transfera bani
n acest cont prin trimiterea unui cec la PayPal, prin transfer bancar
sau printr-o tranzacie cu cartea de credit. Odat ce banii au intrat n
contul PayPal ei pot fi transferai n orice alt cont PayPal printr-o
operaie simpl de specificare a adresei de e-mail a persoanei n al
crei cont PayPal se transfer banii i a sumei transferate. Suma din
cont poate fi retras integral sau parial prin depunere n contul
bancar sau printr-un cec. La 4 ani de la nfiinare compania a fost
preluat de eBay, companie care ncurajaz utilizarea PayPal pentru
plata licitaiilor eBay. n prima etap, volumul de pli era obinut
de la eBay, dar sistemul este extrem de atractiv pentru vnztorii la
licitaie i muli clieni cu afaceri mici sau individuale far
posibilitatea de acceptare a carilor de credit. De fapt muli
111

comerciani nu se pot califica pentru credit card merchant account


deoarece sunt blocai de istoricul creditelor comerciale. Dup 2003 sa creat un nou serviciu Merchant Services, serviciu care ofer
soluii de plat pentru comerciani.
Pentru a utiliza instrumentele Merchant Account oferite de PayPal
este nevoie s v inregistrai cu un cont de comerciant PayPal. Un
astfel de cont ofer un co virtual de cumprturi i un proces de
efectuare a plaii, ambele instrumente fiind gazduite pe site-ul
PayPal. Vom detalia mai nti modul n care funcioneaz un astfel de
cont.

Utilizatorul viziteaz site-ul cutnd produsele de care este


interest;

Cnd s-a decis asupra unui anumit produs utilizatorul apas


pe butonul Adaug co (Add to Chart - n denumirea
original) aflat lng numele produsului. Un astfel de buton
are rolul submit i aciunea se trimite la site-ul web PayPal,
lansnd scriptul cgi https://www.paypal.com/cgi-bin/webscr.
Prin aceasta produsul este adugat n coul virtual de
cumprturi. Se va deschide pagina web PayPal n care este
afiat coninutul coului. Utilizatorul poate s se ntoarc la
pagina magazinului virtual pentru cuta i eventual aduga
alte produse sau poate s treac la plata produselor aflate n
co.

La momentul la care utilizatorul consider c a ncheiat


ctarea de produse prin apsarea butonului Vizualizare Co
(View Cart) se ntoarce la coul virtual de cumprturi
gazduit de site-ul PayPal i declanaz procedura de plat.
Pentru aceasta va introduce informaiile necesare pentru plat
i dup furnizarea corect a acestora va fi direcionat automat
la site-ul magazinului.

Valoarea i coninutul ntregului co este afiat pe site-ul PayPal la


operaia de Vizualizare Co. La iniierea procedurii de plat cu
specificarea datelor corecte pentru a putea fi procesat tranzacia,
PayPal va extrage valoarea cumprturilor de pe cartea de credit a
cumprtorului. La decontarea dintre PayPal i vnztor, PayPal
reine un procent mic din sum i o tax fix de tranzacionare. Dup
scaderea acestor taxe din valoarea pltit de cumprtor PayPal
transfer restul banilor n contul vnztorului. Dup procesarea plii
vnztorul este notificat prin e-mail despre achiziia fcut pentru ca
acesta s pregteasc livrarea.
Din punctual de vedere al comerciantului abordarea bazat pe PayPal
are o serie de avantaje, ce nu sunt neglijabile:

112

Coul de cumparturi si procesarea plaii aparin site-ului


PayPal;

Reduce complexitatea site-ului de comer ntruct nu se


gestioneaz coul virtual i nu se proceseaz cri de credit;

Ofer posibilitatea de a face vnzri online fr a procesa


tranzacii cu cri de credit;

Ofer securitate ridicat n procesarea tranzaciilor;

Poate fi accesat din majoritatea arilor, acceptnd cri de


credit cu o gam larg de emiteni. Pna n 2007 nu accepta
cri de credit emise n Romnia.

PayPal ofer conturi pentru persone fizice, dar si pentru persoane


juridice. Conturile pentru persoanele fizice sunt de dou tipuri: Basic
i Premier. Pentru conturile Basic nu sunt percepute taxe la primirea
sau transferul de bani, ns nu au caracteristici similare celor de
comerciant. Toate conturile de firm i cele personale de tip Premier
permit accesarea instrumentelor Merchant Acount. Aceste conturi
percep commision pentru orice operaie. Cu toate acestea
comisioanele sunt destul de mici. Pentru a crea sau verifica tipul de
cont deinut se va accesa site-ul PayPal la adresa
https://www.paypal.com/ i unul din butoanele Log In pentru cei
care au un cont, rerspectiv Sign In pentru cei nou venii pe site.

Fig. 10.1 Prima pagin PayPal

113

Fig. 10.2 Creare cont PayPal


Dupa cum se observ n fig. 10.2 sunt posibile trei variante de
conturi: unul personal numai pentru cumprturi on line, personal
Premier pentru cumprturi i vnzri on line, respectiv cont de
business. Am spus mai sus c un cont are acces la instrumentele
Merchant Account doar dac este Premier sau Business.
Caracteristicile unui cont existent pot fi modificate prin apsarea pe
linkul Upgrade Account. La un cont nou se vor introduce
informaiile cerute: adresa e-mail, parol, adresa potal, nume,
prenume, numr telefon etc, funcie de tipul de cont. Odat contul
creat suntem pregatii s realizm un magazin virtual care s utilizeze
facilitile oferite de PayPal.

X.4. LEGISLAIE COMER ELECTRONIC


n Romnia avem Legea comerului electronic care reglementeaz
tranzaciile comerciale pe Internet. n aceast seciune vom prezenta
cteva dintre elementele ce trebuie avute n vedere atunci cnd ne
hotrm s realizm o afacere on line.
1. Orice activitate de vnzare on line este o activitate comercial
care se desfoar n cadrul unei firme, a unei asociaii
familiar sau de ctre o persoan fizic autorizat.
2. Informarea consumatorului este un element principal att n
legislaia privind comerul electronic, ct i n cea aferent
contractelor la distan. Consumatorul trebuie s afle clar i
direct principalele informaii cu privire la ce se prezint i se
comercializeaz online.
114

3. Atta timp ct nu exist acceptul explicit al destinatarului


mesajele pe e-mail sunt interzise. nclcarea dispoziiilor din
legea comerului electronic i din legea privind prelucrarea
datelor cu caracter personal i protecia vieii private n
sectorul comunicaiilor electronice reprezint contravenie.
4. Un contract ncheiat on line este recunoscut de legislaia
romna. Marcarea csuei Sunt de accord cu termenii
reprezint acordul liber exprimat al prii i are aceeai
semnificaie cu o clauz ntr-un contract.
5. Capitolul IV din legea comerului electronic stipuleaz
condiiile de exonerare a rspunderii furnizorilor de servicii
n societatea informaionala. Ele nu sunt direct aplicabile la
un site de comer electronic, dar sunt utile pentru activiti
adiacente (forum, cometarii ale utilizatorilor la produsele
afiate, legturi la alte pagini web).
6. Bunul achiziionat poate fi returnat n termen de 10 zile,
echivalent cu denunarea uniulateral a contractului la
distan fr invocarea vreunui motiv. Costurile ce pot fi
suportate ce ctre cumprtor sunt cheltuielile directe de
returnare a produselor.
7. Dispoziii privind executarea contractului. Termenul legal
pentru executarea contractului la distan, specific comerului
electronic este de 30 zile calendaristice. Dac acest lucru nu
se ntmpl, cu toate c termenul este generos, magazinul
trebuie s informeze consumatorul de acest aspect i s
returneze cuantumul contractului, dac este cazul. O
dispoziie util pentru comerciani este inclus n legea
romna: n cazul neexecutrii, produsul poate fi nlocuit de
unul similar, n condiiile n care acest lucru este prevzut n
mod expres n contract.
8. Protecia datelor cu caracter personal. Nu putem discuta de
comer electronic fr a fi implicat n prelucrarea datelor cu
caracter personal (fie la nregistrare, fie pentru plat sau
expediere). Legea 677 din 21 noiembrie 2001 stabilete
condiiile generale cu privire la prelucrarea datelor cu
caracter personal, care sunt acestea i obligaiile operatorilor
cate le manipuleaz.
9. Numele domeniului i conflictul cu marca nregistrat.
ntreaga promovare a unui site de comer electronic va fi
legat de un site web i alegerea numelui de domeniu nu
trebuie s creeze vreo problem juridic legat de utilizarea
lui.

115

10. Dreptul de autor. Toate componentele ce sunt protejate de


dreptul de autor ce intr n site sunt fie proprietate, fie pot fi
utilizate fr restricii.
Pentru mai multe informaii v sugerm s citii legea comerului
electronic nr 365, din 7 iunie 2002 cu modificrile aduse de legea nr.
121/2006.

116

XI. DEZVOLTARE MAGAZIN


ON LINE UTILIZND
INSTRUMENTE PAYPAL
Pe parcursul acestui capitol vei nva despre:
Utilizarea unui template pentru magazin virtual
Integrarea codului html pentru Add to Cart
Utilizarea aplicaiei expert de la PayPal
Scrierea si particularizarea codului pentru butonul Add
to Cart
Vizualizarea coninutului coului virtual
Efectuarea plaii

XI.1. UTILIZAREA

UNUI

TEMPLATE

PENTRU

MAGAZIN

VIRTUAL
Ne propunem s dezvoltm un megazin virtual simplu pentru
comercializarea on line a florilor i a diverselor accesorii pentru flori.
Vom utiliza instrumentele puse la dispoziie de PayPal astfel c se va
pstra pe site-ul PayPal coul de cumprturi i tot acesta se va ocupa
de procesarea tranzaciei. Pentru dezvoltarea magazinului virtual vom
utiliza un template pe care il gsii pe CD n directorul
..Web/Exercitii/E-commerce. Pentru dezvoltare vom folosi
KompoZer, utilitar cu care ne-am familiarizat la dezvoltarea paginilor
web. n directorul specificat avem cele dou fiiere index.html i
accesorii.html. Directorul Imagini pstreaz imaginile ce au fost sau
vor fi ncarcate n cele dou pagini. ntre cele dou pagini exist
legturi care permit trecerea de la o pagin la alta. Designul celor
dou pagini este similar. Un articol sau un accesoriu are asociat un
nume, preul de vnzare, o scurt descriere, o imagine asociat i
bineneles butonul prin care se adaug n coul de cumprturi. n
partea de sus mai exist butonul View Cart prin care se poate
vizualiza coul de cumprturi la orice moment. ntruct aceast
dezvoltare utilizeaz instrumentele puse la dispoziie de PayPal
tratarea sa va fi fcut tot pe site-ul PayPal.

117

XI.2. INTEGRAREA CODULUI HTML PENTRU ADD TO CART


Pentru adugarea produselor n coul de cumprturi lng fiecare
produs trebuie adugat cte un buton Add to Cart, buton a crui
apsare va trimite utilizatorul la site-ul PayPal n paralel cu adugarea
produsului n co. Aparent butonul face o legtur la o alta pagin,
dar funcia sa nu este cea a unui simplu link. Pentru acest buton s-a
utilizat tehnica specific pentru paginile dinamice ce utilizeaz
eticheta form. Fiecare buton Add to Cart are o comportare identic
cu cea a unui buton de tip Submit al unei construcii de tip form.
Practic pentru integrarea funcionalitii sunt dou posibiliti:
crearea codului pentru butoanele Add to Cart sau utilizarea
aplicaiei pus la dispoziie de PayPal care ne asist la procesul de
adugare a unui astfel de buton. La ncheierea aplicaiei pentru
adugarea butonului vom obine un fragment de cod ce poate fi
adugat direct n pagina web acolo unde dorim s apar butonul.
XI.2.1. Utilizarea aplicaiei expert de la PayPal
Pentru a genera codul de implementare a butonului Add to Cart
trebuie s avem un cont PayPal din categoria Premier sau Business.
Pentru a crea un astfel de cont parcurgei etapele descries n seciunea
X.3. Dac un astfel de cont exist mai nti va trebui s intrm n
contul creat pe site i pagina My Account Overview se va deschide.
Executai click pe eticheta Profiles ce se gsete n partea de sus a
pagini afiate i pagina Profile Sumary se deschide (fig. 11.1).

Fig. 11.1 Pagina Profile Summary

118

n aceast pagin ultima coloan Selling Preferences ofer o serie


de opiuni dintre care vei alege legtura Create new button ce are
ca efect deschiderea paginii Create PayPal payment button n care
vei parcurge ntregul process de configurare a butonului aferent
produsului pentru care butonul este adugat. n aceast pagin va
trebui s completai casetele de dialog cu informaii despre produsul
pe care dorii sa-l vindei (fig. 11.2).

Fig. 11.2 Prima parte a paginii Create PayPal payment button


Informaiile cerute de pagina din fig. 11.2 se refer la: tipul butonului
ce va fi creat, numele produsului sau serviciului ce se dorete vndut,
codul produsului (opional), preul acestuia, moneda aferent preului
i alte informaii. Aa cum se specific la fiecare cmp anumite
informaii sunt obligatorii altele sunt opionale. n exemplul nostru
pentru primul articol se va preciza la numele produsului flori de
pdure, preul 19.99, eventual codul produsului (opional), moneda
USD. Derulai pagina i vei ajunge la seciunea la care vi se cere s
alegei tipul de buton utilizat. Aici putei selecta butonul prestabilit de
ctre PayPal, caz n care imaginea butonului este cea gasit la adresa
https://www.paypal.com/en_US/i/btn/x-click-but22.gif . n cazul
n care dorii un buton personalizat vei specifica URL-ul
imaginii butonului din site-ul propriu. Butonul creat poate avea
mai multe opiuni suplimentare precizate n seciunea
Customize button, respectiv posibilitatea de a specifica
cheltuielile de transport sau alte taxe aplicabile articolului. Dac
nu dorii caracteristici suplimentare executai click pe butonul
Create Button (fig. 11.3).

119

Fig. 11.3 Creare buton fr opiuni suplimentare


Pentru adugarea de noi opiuni se execut click pe checkbox-urile
seciunii Customize button funcie de opiunea ce se dorete
adugat. Dintre cele trei clase de opiuni Add drop-down menu
with price/option este cea utilizat frecvent ntruct pentru un
produs pot fi specificate opiuni referitoare la culoare sau oferte
pentru pachete. Spre exemplu, un pachet de servicii poate avea o
opiune de baz, opiune extins, opiune premium, silver, gold,
platinum. Fiecare opiune are pre diferit i poate fi accesat la
adugarea produsului n co. Aa cum se vede n fig. 11.4 exista
butoane pentru adugarea de noi opiuni, respectiv stergerea
opiunilor existente. Clasa de opiuni Add drop-down menu
permite specificarea de taxe suplimentare dup diverse modele de
calcul:

Procentual ca procent din valoarea total a cumprturii,


eventual cu specificarea de valori diferite pentru intervale de
preuri

Fix cheltuieli fixe pentru diverse intervale de preuri.

Tot n categoria opiuni se ncadreaz i posibilitatea de a specifica


cheltuielile de expediere i valoarea procentual a taxelor aplicate la
costul produsului. De exemplu, specificarea procentului TVA de
24%.

120

Fig. 11.4 Particularizarea butonului


La final se acioneaz butonul Create Button i aplicaia va genera
codul html asociat butonului, cod ce este vizibil ntr-o caset de tip
text (fig. 11.5). n realitate la crearea butonului este creat i butonul
View Cart, buton care se va utiliza la vizualizarea coului de
cumprturi i va fi discutat puin mai ncolo. ablonul pe care l
utilizai conine cod pentru butonul Add to Cart, cod ce nu
corespunde contului pe care l deinei i parametrii transmii sunt
setai aleator. Acest obiect trebuie nlocuit cu cel generat pe site-ul
PayPal, operaie care poate fi fcut prin tergerea butonului existent
urmat de inserarea codului html al butonului generat sau prin
nlocuirea codului html aferent butonului cu cel generat.

121

Fig. 11.5 Rezultatul generrii codului


Pentru nlocuirea codului procedai astfel:

122

Activai tab-ul Split n Kompozer pentru a vedea pe ecran


att fereastra Design ct i codul html.

Click pe butonul Add to Cart existent

Click pe bara de obiecte din subsol pagin pe directiva


<form>. n fereastra de cod vei avea afiat codul html pentru
buton ce va trebui nlocuit cu cel nou. Pe ecran vei avea o
imagine similar cu cea din fig. 11.6.

Copiai n clipboard codul html din caseta de text Add to


Cart Button code aferent paginii de pe site-ul PayPal prin
marcare i Ctrl+C

Marcai codul html din ferestra de cod aferent paginii


dumneavoastr afiat de KompoZer.

Copiai codul din clipboard n locul codului afiat de


KompoZer, prin Ctrl+V sau click dreapta +Paste.

Felicitri, ai inserat primul buton Add to Cart.

Fig. 11.6 Afiarea paginii n KompoZer i a codului Add to Cart


Repetai operaia pentru butoanele Add to Cart aferente fiecrui
produs din magazinul virtual (flori, dar i accesorii).
XI.2.2. Scrierea i particularizarea codului pentru butonul Add
toCart
Codul pentru generearea butonului Add to Cart poate fi scris direct
n html dac ncrecam s folosim cunotinele acumulate despre
limbajul html n seciunea n care am discutat de paginile dinamice.
Un exemplu de cod pentru acest buton este:
<form target="paypal" action= https://www.paypal.com/cgibin/webscr method="post">
<input src= url_buton name="submit" alt="Plata PayPal sigura si
rapida" border="0" type="image">
<input name="add" value="1" type="hidden">
<input name="cmd" value="_cart" type="hidden">
<input name="business" value="adresa mail" type="hidden">
<input name="item_name" value="nume articol" type="hidden">
<input name="item_number" value="identificator" type="hidden">
<input name="amount" value="19.99" type="hidden">
<input name="no_note" value="1" type="hidden">
<input name="currency_code" value="RON" type="hidden">
</form>
S analizm codul pentru a vedea cum va fi particularizat pentru alte
produse prezente n magazin. Atributul target al directivei <form>
specific un frame ntr-un set de frame-uri la care trimite rezultatul,
123

atributul action specific scriptul ce va fi lansat la trimiterea formei


completate, iar method specific metoda de pasare a parametrilor,
metoda Post. Valoarea atributului action este adresa url a scriptului
executat pe pagina PayPal. Butonul creat este de tip submit i este
afiat ca o imagine ce poate fi luat de pe siteul propriu sau din orice
alt locaie. Aici trebuie precizat adresa corect a fiierului ce
conine imaginea. Un buton predefinit ncarc imaginea butonului de
la adresa https://www.paypal.com/en_US/i/btn/x-click-but22.gif.
Celelalte 8 butoane input toate cu type hidden sunt de fapt butoane
ascunse prin care se transmit scriptului cgi detaliile specificate la
crearea butonului. Aceste detalii precizeaz n ordine: numarul de
buci cerute, tipul comenzii de adugare n co, utilizarea contului
identificat prin adresa de mail, numele articolului comandat, un
identificator al articolului, valoarea produsului comandat, moneda n
care se pltete. Acestea reprezint date de intrare pentru scriptul cgi
lansat de form, script care acceseaz coul virtual i l afiaz. Sunt
necesare aceste date de intrare pentru c aa a fost scris scriptul i noi
realizm un magazin care utilizeaz acest instrument pus la dispoziie
de PayPal.

XI.3. VIZUALIZAREA CONINUTULUI COULUI VIRTUAL


Pe lng butonul de adaugare n co orice site de comer electronic
trebuie s aib i o facilitate de vizualizare a coninutului coului
virtual. Pentru aceasta se construiete un buton care s ofere o astfel
de funcionalitate, numit de obicei View Cart. n ablonul furnizat
am adugat un astfel de buton pe fiecare dintre pagini n partea de
sus. La generarea codului html pentru butonul Add to Cart am
vzut ca pe site-ul PayPal au aprut dou casete de tip text, cea de a
doua coninnd codul html pentru butonul View Cart. Pentru
particularizarea datelor de intrare transmise la apsarea butonului
codul generat va nlocui codul din ablon utiliznd aceeai procedur
cu cea de nlocuire a codului pentru butonul Add to Cart. Codul
pentru butonul View Cart este afiat mai jos:
<form target="paypal" action= https://www.paypal.com/cgibin/webscr method="post">
<input name="cmd" value="_cart" type="hidden">
<input name="business" value="adr mail" type="hidden">
<input name="display" value="1" type="hidden">
<input src= url_buton name="submit" alt="Plata PayPal sigura si
rapida" border="0" type="image">
</form>
Prin codul asociat se transmite faptul c este o comand ce
trebuie vizualizat, comanda este asociat contului vnztorului
nregistrat.

124

Fig. 11.7 Vizualizarea coului de produse


Dup cum se observ din figura 11.7 cumprtorul poate face
opera ii de ajustare a coului de cumprturi prin eliminarea
unor articole din co sau modificarea cantitilor comandate.
Dac dorete continuarea navigarii pe site pentru noi produse
sau servicii efectueaz click pe butonul Continue Shopping i
se ntoarce pe site-ul de prezentare al magazinului virtual.

XI.4. EFECTUAREA PLAII


Procesarea tranzaciei de plat va fi realizat pe site-ul PayPal.
Aceasta este iniiat prin apsarea butonului Check Out avnd
ca efect afiarea paginii n cadrul creia cumprtorul alege
modalitatea de plat (fig. 11.8). Aceast pagin conine n partea
stng un sumar al comenzii ce cuprinde produsele comandate
preul unitar i valoarea ntregii tranzacii. Coninutul coului de
cumprturi mai poate fi modificat prin apsarea pe legturile
Update sau Remove fr a se ntoarce pe site-ul
magazinului.
n partea dreapt a ecranului cumprtorul poate alege
modalitatea de plat, avnd de ales ntre plata din contul su
PayPal sau utiliznd o carte de credit agreat. Dac plata se face
dintr-un cont PayPal acesta se va conecta la contul propriu
utiliznd legtura Log in to my PayPal account. Pentru
conectare la propriul cont va trebui s furnizeze adresa de email i parola contului.

125

Fig. 11.8 Pagina de procesare tranzacie


Dac cumprtorul nu are un cont PayPal poate debita ntr-un
astfel de cont din cartea de credit sau debit pe care o deine. n
aceast situaie se introduc nformaiile specifice pentru o plat
cu card (fig. 11.9).

Fig. 11.9 Utilizare card debit sau credit

126

Dup introducerea informaiilor cerute se apas butonul


Continue i PayPal ncepe verificarea pentru autorizarea
tranzaciei. Dac informaiile introduse nu sunt corecte
tranzacia nu este procesat, se revine n pagina anterioar
indicnd elementele considerate eronate.

127

XII. DEZVOLTAREA UNUI


MAGAZIN ON LINE CU
PROCESARE ROMCARD
Pe parcursul acestui capitol vei nva despre:
Procesator de tranzacii on line n Romnia
Crearea modulului de plat 3D Secure

XII.1. PROCESAREA DE TRANZACII ON LINE N ROMNIA


Romcard este cel mai cunoscut furnizor de servicii pentru
tranzactiile cu carduri bancare. Romcard ofer autorizarea
tranzaciilor cu carduri, decontarea i procesarea tranzaciilor cu
carduri, soluii 3D Secure pentru bncile acceptatoare i
emitente de servicii e-commerce Verified by Visa i
MasterCard SecureCode. Compania a fost fondat ca societate
comercial pe aciuni de un consoriu de bnci care operau n
Romnia dup ce acestea au devenit membrii Visa Internaional.
Romcard nu asigur servicii pentru gestionarea coului de
produse sau pentru generare secvene de cod. El se ocup doar
de procesarea tranzaciilor oferind un nivel ridicat de securitate.
3D Secure este un sistem prin care se crete securitatea
tranzaciilor online prin solicitarea unei parole la fiecare plat
on line. Un card nrolat 3D Secure nu poate fi utilizat de tere
persoane pentru cumprturi online dac a fost furat sau pierdut.
Prin acest sistem se elimin fraudele prin copierea informaiilor
de plat sau prin generarea aleatoare a numrului de card. Se
estimeaz o reducere a disputelor din tranzaciile on line cu
peste 80%. Un deintor de card se poate orienta pentru
efectuarea de cumprturi online numai de la acele site-uri care
afiaz logo-urile Verified by Visa sau Mastercard SecureCode.
Serviciul se bazeaz pe efortul comun al bncilor emitente de
carduri, al bncilor cu care proprietarii magazinelor online au
ncheiat contracte de acceptare la plat a cardurilor i al
organizaiilor internaionale de carduri.
La acest moment majoritatea bncilor din Romnia au aderat la
acest serviciu. Pentru a implementa un sistem de plata on line

128

prin card este necesar construirea unei interfee de comunicaie


ntre magazinul virtual i sistemul de e-comer oferit de
Romcard. Romcard pune la dispoziie documentaia tehnic
necesar ce va fi utilizat de ctre comerciant. Comerciantul va
parcurge urmtorii pai:

Comerciantul contacteaz una dintre bncile certificate


3Dsecure de ctre Romcard cu care va ncheia un
contract de procesare e-commerce, contact care stabilete
condiiile comerciale i condiii tehnice de procesare.

Banca transmite contractul ncheiat ctre Romcard,


contract care stipuleaz termenii financiari i condiii de
procesare. Termenii financiari includ comisione, taxe etc.
Contractul este valabil pentru orice card Visa sau
MasterCard indiferent de cine este emis.

Dup procesarea contractului Romcard contacteaz


clientul pentru realizarea configurrii tehnice.

Romcard furnizeaz documentaia tehnic pentru


implementarea sistemului i ofer suportul tehnic pentru
implementarea modulului de plat cu card.

La finalizarea cu succes a modulului de plat, Romcard


va informa banca i comerciantul i va transmite cererea
de nregistrare la Visa i MasterCard. Procesul de
nrolare dureaz cel mult dou sptmni.

Obs: Costurile sunt negociate cu banca prin contractul semnat


i plata serviciilor este fcut tot la banc.
Pentru cumprtori, Romcard mpreun cu bncile partenere a
lansat de curnd un serviciu de activare n timpul
cumprturilor, serviciul Activation During Shopping (ADS).
Dac folosii acest serviciu verificai urmtoarele:

Adresa
din
bara
navigatorului
https://www.secure2gw.ro/

Bara de stare sa arate c pagina este securizat (afiaz un


lact)

Adresa pentru care a fost emis certificatul de securitate este


cea de mai sus.

Cu dublu click pe lact verificai c pe certificatul de


securitate scrie: Issued to: www.secure2gw.ro sau
www.activare3dsecure.ro.

ncepe

cu

129

XII.2. CREAREA MODULULUI DE PLAT 3D SECURE


Unul dintre motivele pentru care comerului on line n Romnia
nu a cunoscut o dezvoltare accentuat este cel a securitii
tranzaciilor. Pentru a asigura o securitate ct mai mare a
tranzaciilor a fost dezvoltat serviciul 3D Secure, serviciu ce
este implementat i de Romcard. Acest serviciu este un rspuns
la necesitatea dezvoltrii unor mijloace prin care s verifice
dac persoana care face o plat pe Internet este deinatorul
cardului. 3D Secure este un standard de securitate dezvoltat i
oferit de Visa i MasterCard sub denumirile Verified by Visa,
respectiv MasterCard SecureCode. El asigur un mediu
securizat de tranzacionare i verificare a datelor introduse de
cumprtori ntre cele trei entiti principale participante la
tranzacie: banca emitent a cardului cumprtorului, banca
magazinului on line i organizaiile de card Visa i MasterCard.
Majoritatea cardurilor emise n Romnia sunt prenrolate 3D
Secure, cumprtorii trebuind doar s activeze cardurile n 3D
Secure. Activarea cardului 3D Secure presupune stabilirea de
ctre deintorul cardului a unei parole, diferit de codul PIN,
parol ce va fi solicitat atunci cnd acesta face o plat on line.
Activarea cardului n 3D Secure ofer dou mari beneficii:

Protecia cardului la furt, pierdere, copiere a datelor. Aa


cum PIN-ul este protecia pentru utilizarea cardurilor
furate la bancomat i comerciant, 3D Secure reprezint
protecia cardului n mediu on line.

Recuperarea pierderilor. Dac s-a utilizat fraudulos


cardul pentru cumprturi online la magazinele care nu
folosesc 3D Secure se vor recupera banii tranzaciei ce
nu a fost aprobat de deintor.

Dup cum se observ 3D secure are efecte benefice att pentru


cumprtor ct i pentru vnztor. Deintorul cardului se va
orienta pentru cumprturi numai de la magazine online care
afiaz logo-urile Verified by Visa sau Mastercard SecureCode,
cunoscnd c n aceste magazine nu este posibil fraudarea
datelor de plat. El se autentific la fiecare tranzacie i are un
control total asupra cumprturilor on-line.
Autentificarea nu necesit instalarea vreunei componente
software speciale pe maina clientului i nici nu influieneaz
performanele privind navigarea pe site-ul magazinului. La
rndul lor magazinele virtuale sunt interesate s utilizeze
serviciul 3-D Secure pentru c elimin riscul de fraud i
implicit de contestare a tranzaciilor mpreun cu toate costurile
asociate refuzului de plat. Noutatea serviciului e-commerce pus
la dispozitie de Visa i MasterCard const n faptul c prin

130

intermediul unor proceduri software i a unor echipamente


hardware, instalate la centrul de procesare (n cazul nostru
Romcard), se certific autenticitatea celor doi participani ai
oricrei tranzactii, autenticitatea celor doi fiind garantat chiar
de ctre cele dou organizaii internaionale.
ntr-o schem 3D Secure avem practic trei domenii cu roluri
bine precizate (fig. 12.1):

Issuer gestioneaz serviciul de nregistrare a


deintorului de card (inclusiv verificarea identitii
fiecrui deintor la nregistrare) i autentific
deintorul de card la plata online.

Acquirer asigur c vnztorul participant la tranzacia


on line opereaz sub o nelegere i furnizeaz
procesarea tranzaciei pentru autentificare.

Interoperability faciliteaz schimbul de informaii ntre


cele dou domenii.

Fig. 12.1 Arhitectura 3D Secure


O tranzac ie utiliznd Verified by Visa sau Mastercard
SecureCode va face o redirectare la site-ul bncii posesorului
de card pentru a face autorizarea tranzaciei. Pentru a beneficia
de aceste servicii posesorul de card trebuie s fie nregistrat.
Pentru a face acest lucru deintorul de card se va conecta la
serverul de inregistrare cu care stabilete un secret materializat
printr-o parol secret, alta dect codul PIN. Informaia secret
este pstrat pentru viitoarele utilizri n procesul de
autentificare 3D Secure. ntregul proces privind procesarea unei
tranzacii se bazeaz pe schimbul mai multor mesaje ntre site-ul
magazinului virtual i procesatorul de carduri. Pentru ca
schimbul de mesaje s poat fi realizat este necesar mai nti
configurarea contului magazinului virtual cu informaii corecte

131

la cmpurile: Companie (Nume companie), Site (Adres site),


Banca (Numele bncii), Telefon, E-mail.
Romcard pune la dispoziie o aplicaie de testare a modulului de
comunicaie cu procesatorul de carduri pentru a ne asigura c la
lansarea n producie modulul de plat este funcional. Cele trei
mesaje formate i transmise de ctre magazinul virtual ctre
Romcard poat denumirile: preautorizare, sales completion i
reversal, mesaje ce trebuiesc transmise n aceasta ordine.
Mesajele sunt transmise prin HTTP-POST la aceeai adres
https://www.activare3dsecure.ro/teste3d/cgi-bin/ . Mesajele sunt
difereniate prin cmpul TRTYPE, cmp ce are valoarea 0
pentru preautorizare, 21 pentru sales completion, 24 pentru
reversal. La fiecare mesaj magazinul primete n timp real
rspunsul de la banca emitent, rspuns trimis de sistemul
Romcard prin metoda HTTP-GET ctre adresa care apare n
cmpul BACKREF al fiecrui mesaj transmis de magazin.
Pentru detalii complete despre coninutul formularelor transmise
se ia legtura cu Romcard.
Preautentificare. Cumprtorul a configurat coul de
cumprturi, s-a autentificat pe site-ul magazinului virtual i
este n faza de plat a produselor. La iniializarea plii
magazinul va direciona cumprtorul ctre site-ul Romcard
pentru a introduce datele cardului. Magazinul completeaz
formularul ce conine: suma total de plat, moneda n care se
face tranzacia, numrul comenzii generate de comerciant,
descrierea comenzii, numele comerciantului (numele care apare
pe site i este declarat la banc), adresa url a site-ului
comerciant, valori asignate de banc la configurarea contului, email contact comerciant, o valoare generat aleator unic pentru
fiecare mesaj, cod de securitate, etc. Odat cu acest mesaj
cumprtorul a fost direcionat pe site-ul Romcard, site pe care
cumprtorul trebuie s introduc datele de pe card. Dup
introducerea datelor mesajul este trimis ctre banca emitent a
cardului pentru autorizarea tranzaciei. O tranzacie poate fi
autorizat, respins, tranzacie duplicat sau se poate ncheia cu
eroare de procesare. Oricare ar fi starea acesteia mesajul este
transmis prin redirecionarea posesorului de card ctre
magazinul virtual. Magazinul primete un mesaj de la Romcard
prin metoda HTTP-GET, mesaj ce conine o serie de informaii
ce permit asocierea cu mesajul care a generat rspunsul, foarte
important fiind coninutul cmpului Action. Valorile acestui
cmp au urmtoarea interpretare:

132

0 tranzacia aprobat;
1 tranzacie duplicat;

2 tranzacie respins;

3 eroare de procesare.

La o tranzacie autorizat n cmpul Approval se gsete codul


de autorizare. Suma de plat este blocat n contul deintorului
de card i nu poate fi utilizat pentru alt tranzacie. O
tranzacie respins nu va mai continua s fie procesat. La o
tranzacia aprobat comerciantul procedeaz la virarea
produselor sau serviciilor ctre client. Dup ce produsele sau
serviciile au fost livrate administratorul magazinului
(comerciantul) va genera un mesaj Sales completion ctre
Romcard pentru a iniia primirea n cont a banilor afereni
tranzaciei. Dac un astfel de mesaj nu este generat n termen de
o lun de la data preautentificrii, banca va debloca automat
banii n contul deintorului de card. Rezultatul testului de
preautentificare este ilustart n fig. 12.2.

Fig. 12.2 Rezultat test preautentificare


Sales completion. 3D Secure impune i o serie de reguli care
trebuie respectate de ctre participani. O regul important
impune ca ncasarea oricrei comenzi s se fac numai dup
livrarea acesteia. Pentru aceasta administratorul magazinului
apas butonul ncasare ce are ca efect transmiterea unui mesaj
ctre Romcard, mesaj ce conine unele informaii din mesajele
schimbate n etapa de preautorizare. Aceste mesaj poate fi
aprobat sau respins de Romcard, similar cu aprobarea sau
respingerea preautentificrii de ctre banca deintorului de
card. Dac valoarea cmpului Action este 0 tranzacia este
133

aprobat i pentru orice alt valoare trebuie verificat la


Romcard starea tranzaciei. Funcie de configuraia bncii, la o
tranzacia aprobat, banii vor ajunge n contul comerciantului n
cteva zile.
Reversal (Anulare).
n cazul in care comanda nu se poate onora din diverse motive
(detinatorul de card s-a razgandit, comerciantul are o problem)
va trebui deblocat sau chiar returnat suma aferent ei. Mesajul
de anulare se poate trimite att dup preautorizare (echivalent
cu deblocare sum), dar i dup sales completion (echivalent cu
returnare sum). Formularul de anulare conine aceleai cmpuri
ca i formularul Sales completion cu deosebirea c valoarea
cmpului ce specific tipul mesajului este cel aferent mesajului
Reversal.
Obs. Fiecare mesaj include un cmp P_SIGN pentru semnarea
mesajului utiliznd HMAC-SHA1.
Finalizare. Testele se consider finalizate cnd exista o valoare
de referin n contactul cu Romcard (RRN) la care cmpul
"reversal final" de la mesajul anulare este bifat.
Acest RRN trebuie s se regseasc i n seciunile
"Preautentificare" i "Sales" cu starea general bifat .
Dup ce testele au fost finalizate, n seciunea "Configurare
cont", putei descrca "Procesul Verbal de punere in functiune"
i logo-urile "Verified by Visa", i "MasterCard SecureCode",
logo-uri care vor fi prezente pe site-ul magazinului pentru a
informa cumprtorii asupra modului n care se trateaz
tranzaciile oferind astfel
informaii despre securitatea
tranzaciilor. Procesul verbal se completeaz i se trimite prin
fax la Romcard. Dup primirea procesului verbal de ctre
RomCard contul dumneavoastr poate fi mutat pe producie prin
schimbarea adresei la care mesajele sunt trimise, nlocuind
adresa
de
test
cu
adresa
de
producie
https://www.secure11gw.ro/portal/cgi-bin/ .
Se recomand ca nainte de a permite clientilor s efectueze
plati online, sa se fac un test complet pe sistemul de productie
utiliznd carduri Visa i MasterCard pentru a verifica buna
funcionare a contului real.

134