Introducere În HTML Şi CSS

1
LINK Academy eLearning

Introducere n HTML i CSS
Descrierea cursului
n cadrul cursului Introducere n HTML i CSS, v vei familiariza cu elementele de baz ale
limbajelor HTML i CSS. Vom clarifica noiunile de baz ale scrierii i construirii unui cod
HTML, respectiv a unui cod CSS. Vei afla cum putei scrie pagini HTML, cum se seteaz i se
scriu tag-urile, cum se pot introduce textul, imaginile, listele, linkurile, tabelele i alte elemente
care alctuiesc coninutul paginilor. Vei nva ce nseamn o regul CSS, din ce este alctuit,
ns i cum i unde se plaseaz. Apoi, vei afla cum putei folosi regulile CSS i influena diferite
elemente.
Scopul cursului
Obiectivul cursului este s nvai cum s creai, cu ajutorul limbajelor HTML i CSS,
documente pentru web. Vei nva elementele de baz ale HTML-ului i CSS-ului i cum s
scriei un cod clar i accesibil. De asemenea, vei nva cum s creai i s stilizai corect
paginile. Dup finalizarea acestui curs, vei avea o baz excelent pentru dezvoltarea ulterioar
n vederea perfecionrii n domeniul designului web i/sau n domeniul programrii web.
Lecie introductiv
Unitate: 1 din 17 00:17:46
+Rezumat
n aceast lecie, ne vom familiariza cu noiunile de baz ale limbajelor HTML i CSS, dar i cu
cele ale internetului n general.
Ce este HTML?
HTML este acronimul de la HyperText Markup Language1, care reprezint un limbaj descriptiv
cu ajutorul cruia putem crea pagini web, respectiv cu care putem aranja elementele paginilor
web. HTML este un limbaj descriptiv, dei uneori poate fi numit greit limbaj de programare.
Dac am deschide o pagin HTML folosind un Notepad, n Windows, sau instrumentul TextEdit,
n sistemul Mac, aceasta se deschide i apare codul html (text). Pe de alt parte, atunci cnd
deschidem aceeai pagin ntr-un browser web, el o interpreteaz i o afieaz n mod adecvat.
Istoric
2
Limbajul HTML a fost creat de Tim Berners-Lee n anul 1990, pe atunci angajat la CERN. n
paralel, a fost creat i primul browser web. n acea perioad, exista internetul, dar ntr-o form
foarte diferit de cea care exist astzi. n acea etap iniial de dezvoltare, HTML a permis
colaborarea mai uoar pe proiecte ntre colaboratori aflai la distane mari unii de al ii. Cu
ajutorul lui HTML, putem transmite un simplu cod (text) de la surs la destinatar, al crui
browser interpreteaz codul ntr-un document cu sens.
Imaginea 1.1 - Calculatorul lui Berners-Lee, numit NeXT, care se folosea ca primul server web
din lume.
Sursa imaginii: http://en.wikipedia.org/wiki/File:First_Web_Server.jpg
Astzi, HTML este foarte diferit de versiunea sa iniial, dar pstreaz elementele de baz.
Berners-Lee nu i-a protejat limbajul HTML prin drepturi de autor, ci l-a lansat ca i open
source. De-a lungul anilor, a fost mbuntit n mod constant. Apoi, a fost nfiinat W3C (World
Wide Web Consortium http://www.w3.org/), care se ocup cu standardizarea i mbuntirea
limbajului HTML i a altor standarde. De asemenea, n anul 2004 a fost nfiinat i WHATWG
(Web Hypertext Application Technology Working Group http://www.whatwg.org/) de ctre
angajaii unor companii din domeniul web-ului, precum Apple, Mozilla, Opera i multe altele,
toate acestea ca reacie la modul foarte lent n care W3C dezvolta tehnologii noi.
3
Astzi, W3C i WHATWG sunt dou dintre cele mai importante agenii implicate n viitorul
internetului. n momentul de fa, versiunea actual i cea recomandat a limbajului HTML este
HTML5, care pe data de 28 octombrie 2014 a obinut statusul de W3C Recommendation.
Aceasta nseamn c HTML, dup o lung perioad de timp, a devenit un standard recomandat
pentru toate site-urile noi i putem spune c este publicat versiunea sa final. ntreaga
specificaie a limbajului i detaliile se pot gsi la urmtorul link: http://www.w3.org/TR/html5/
Imaginea 1.2 - Logoul limbajului HTML5

Sursa imaginii: http://en.wikipedia.org/wiki/File:HTML5-logo.svg
Ce este CSS?
CSS (acronimul de la Cascading Style Sheets) este un limbaj de stilizare (style sheet), care se
folosete pentru descrierea semanticii de prezentare a documentului scris n limbajul descriptiv
(markup language). Mai simplu, dac ignorm definiia formal, am putea spune c CSS descrie,
respectiv aranjeaz aspectul i formatarea oricrui element de pe pagin.
V ntrebai, probabil, de ce CSS nu are aceeai funcie ca i HTML. Dei o astfel de ntrebare
poate prea logic la prima vedere, HTML i CSS au scopuri complet diferite, dar se completeaz
foarte bine. HTML nglobeaz coninutul, n timp ce CSS l aranjeaz. Putem face o analogie
ntre programatori i designeri. Fiecare ncearc s dovedeasc c profesia lui este cea mai
important, ns n realitate nu pot exista unii fr alii. Un site creat doar de un programator va
funciona, dar numai ali programatori vor putea s-l citeasc. Un site creat doar de un designer
probabil c nu va funciona deloc, dar cel puin va arta bine. Aadar, aa cum colaborarea dintre
designeri i programatori are drept rezultat un site ideal, la fel i legtura dintre HTML i CSS
este combinaia ctigtoare pentru paginile web.
4
HTML singur, separat de CSS, are anumite reguli i opiuni de stilizare, dar acestea ar trebui
evitate. Trebuie s lsm n seama stilurilor CSS tot ce ine de stilizarea elementelor.
Istorie
Rdcinile limbajului style sheets dateaz de la nceputul anilor '80, odat cu apariia lui SGML
(Standard Generalized Markup Language). CSS a fost dezvoltat la sfritul anilor '90, iar din
anul 2000 a nceput s fie utilizat intensiv. Dup cum am menionat deja, HTML nu a fost creat
ca un mediu vizual, ci ca un limbaj utilizat de programatori i ali experi pentru a face schimb de
informaii n timpul lucrului la proiecte. Aa a aprut nevoia de a aranja vizual pagina HTML.
Fcnd parte din W3C, au fost propuse nou limbaje de style sheets diferite. Au fost selectate
dou, din fuzionarea crora a aprut CSS-ul aa cum l tim astzi.
n momentul de fa, putem spune c versiunea actual este CSS3, ns afirma ia este parial
corect. n trecut, i limbajul CSS se marca cu numere, inclusiv i versiunea CSS3. n momentul
de fa, dar i n anii care vin, nu vom mai avea versiuni noi ale ntregului limbaj (nu vor mai
aprea niciodat CSS4 sau CSS5, de exemplu), ci fiecare modul (parte a limbajului) se va
dezvolta n ritmul su. Este clar c anumite versiuni nu vor mai fi practice (cel puin cnd este
vorba de limbajul CSS) i de aceea aceast terminologie va fi abandonat, dei astzi este la
mod discuia despre HTML5 i CSS3. Pentru mai multe informaii, accesai acest post de pe
urmtorul blog: http://www.xanthir.com/b4Ko0
Cteva noiuni de baz
Dei urmtoarele noiuni v sunt probabil cunoscute, este util s le recapitulm nainte de a
continua.
Ce este internetul?
Internetul este reeaua tuturor reelelor. El conecteaz milioane de calculatoare la nivel global,
formnd astfel o reea global. Cu ajutorul internetului, un calculator poate comunica cu un alt
calculator aflat oriunde n lume, atta timp ct ambele sunt conectate la internet. Informa iile
circul pe internet prin intermediul diferitor metode (protocoale). Ca pri ale internetului
funcioneaz diferite servicii, cum ar fi WWW (World Wide Web), e-mail, FTP i multe altele.
Ce este WWW (World Wide Web)?
Dei majoritatea oamenilor pun semnul egal ntre sus-menionatul internet i WWW, aceste dou
noiuni nu reprezint n niciun caz acelai lucru. World Wide Web sau, prescurtat, WWW este un
model de acces la informaii utiliznd internetul ca mediu. WWW folosete protocolul HTTP,
unul dintre limbajele utilizate pe internet. WWW este folosit de browser-ele care acceseaz site-
urile web.
5
n cazul n care diferena dintre internet i WWW v este n continuare neclar, imagina i-v
internetul ca reeaua de drumuri a unei ri, iar WWW ca sistemul de transport cu autobuze ale
aceleiai ri. n calitate de utilizatori, noi putem folosi autobuzul pentru a cltori n diferite
pri ale rii, putem apela la diferite companii de transport i diferite tipuri de servicii etc. ns,
pe de alt parte, reeaua de drumuri (internetul) poate fi utilizat i de alte vehicule, nu doar de
autobuze (WWW).
Browser-ul web
Oamenii acceseaz internetul prin intermediul unui tip de software, denumit browser web sau
doar browser. Cele mai populare browser-e din zilele noastre sunt Chrome, Firefox, Internet
Explorer, Opera i Safari. Utilizatorii acceseaz site-urile introducnd URL-ul corect al site-ului,
urmnd un link de pe alt pagin sau prin intermediul unui semn de carte (bookmark). Browser-
ele propriu-zise sunt actualizate regulat n pas cu noutile, dar nu putem fi niciodat siguri dac
utilizatorul sau vizitatorul site-ului nostru are cea mai nou versiune sau dac utilizeaz n
continuare Internet Explorer 7, de exemplu, care a fost lansat n anul 2006 i care nu suport
majoritatea tehnicilor moderne. Aceasta este una dintre problemele de baz ale design-ului web
modern i, n general, ale dezvoltrii site-urilor. Pe de alt parte, noi putem folosi cele mai
moderne tehnici pe care le suport limbajele HTML i CSS, ns, dac pornim un site n browser-
ul aprut nainte de apariia noilor tehnici moderne, este clar c browser-ul vechi nu le va putea
citi i nici interpreta n mod corect.
Imaginea 1.3 - Logourile celor mai populare browser-e din prezent.

Sursa imaginii: techglobex.blogspot.com
6
Serverele web
Serverele web sunt calculatoare specializate, conectate n permanen la internet, avnd drept
scop accesul utilizatorilor la site-uri.
Atunci cnd un utilizator, respectiv browser, solicit un anumit site web, el este direcionat prin
internet ctre un calculator denumit server web sau, pe scurt, server, care conine site-ul cutat.
Cum funcioneaz www?
Atunci cnd introducem adresa dorit n browser, folosind sistemul DNS (Domain Name
System), browser-ul primete informaia despre adresa IP a serverului web, respectiv a site-ului
care trebuie ncrcat. Adresa IP este adresa corect a site-ului web dorit. Cu alte cuvinte, folosim
URL-ul (adresa site-ului) pentru a ne aminti mai uor, n timp ce calculatoarele gsesc site-urile
cu ajutorul adreselor IP.
De exemplu, este mai uor s reinem www.google.com, dect adresa IP: 74.125.224.72, dei,
dac tastm acest IP n browser, vom obine acelai rezultat (putei s deschidei orice browser i
s introducei n bara de adrese adresa IP menionat mai devreme sub form de:
http://74.125.224.72/ i se va deschide Google).
Odat ce browser-ul primete informaia despre adresa IP a site-ului de la serverul DNS, o

acceseaz, deschide folderul root (rdcin) i caut index.html (sau default.html), pentru ca apoi
s-l afieze utilizatorului:
7
Imaginea 1.4 - Accesarea unui site
Ce vedem pe un site?
Atunci cnd un utilizator deschide un site ntr-un browser, se afieaz o pagin n felul urmtor:
browser-ul preia HTML i CSS de pe server i interpreteaz acel cod ntr-un coninut cu sens,
pregtit n mod adecvat din punct de vedere vizual. Majoritatea site-urilor din zilele noastre
conin i imagini, clipuri video/audio, diferite scripturi i alte elemente multimedia. Toate aceste
elemente stau la baza experienei de utilizare a site-ului (sau, cum se mai numete n mod
popular, UX - User experience).
Ce se afl n spatele unui site?
Majoritatea utilizatorilor nu vd niciodat HTML-ul i CSS-ul din care este alctuit un site.
Browser-ul traduce tot ce primete de la server, inclusiv HTML, CSS, JavaScript i a a mai
departe, n coninutul care va fi afiat utilizatorului:
8
Imaginea 1.5 Site-ul http://www.adobe.com/ reprezentarea codului HTML (n stnga) i

reprezentarea pe care o vede un utilizator n browser (n dreapta)
Putei ncerca i singuri s vizualizai pagini-surs (HTML) pe un site. n majoritatea browser-

elor, scurttura este Ctrl+U (n Internet Explorer, dai clic dreapta pe pagin i apoi clic pe View
source (Vizualizai sursa)). Va aprea codul HTML care, dac nu l-ai mai ntlnit, probabil nu va
avea niciun sens pentru dvs. i despre care vei crede probabil c nu-l vei stpni niciodat.
Printre programatorii i dezvoltatorii web, circul o glum care spune c ace tia sunt la fel ca
personajele din filmul Matrix, adic se uit la cod i vd lumea real. Ceea ce vreau s subliniez
este faptul c, dup ce vei parcurge cteva lecii, v vei da seama i singuri c HTML i CSS
sunt limbaje foarte uor de neles, deoarece respect un anumit set de reguli. Dup ce vei lucra
un timp cu limbajele HTML/CSS, vei avea propriul moment de Evrika! 2 , dup care, cu
siguran, v vei ntreba cum de ai putut vreodat crede c sunt confuze.
Site-urile sunt alctuite doar din limbaje HTML i CSS?
Toate site-urile web din zilele noastre sunt, de fapt, tipuri de limbaje HTML. Chiar i site-urile
realizate integral n Flash sau ntr-un instrument similar necesit ca mcar o mic parte din ele s
9
fi fost scris n HTML, pentru a putea fi afiat n browser. Putem spune c HTML reprezint
baza ntregului web. De aceea, Tim Berners-Lee este considerat creatorul lui WWW.
Totui, HTML este doar un limbaj de marcare/descriptiv, iar simplitatea sa (inerent) a contribuit
la popularitatea i acceptarea sa general. Pe de alt parte, nu poate funciona singur. Astzi,
multe alte limbaje de programare, care permit interactivitatea i existena unui coninut dinamic,
sunt adugate la o baz alctuit din HTML. Cele mai populare limbaje de programare de pe web
sunt PHP, Python, Java, ASP.NET, Javascript, AJAX, de care sunt sigur c ai auzit, dar i multe
altele. Toate acestea lucreaz n simbioz cu HTML. Pentru a prezenta toate acestea ntr-un mod
mai ilustrativ, consultai paginile de contact de pe web, nregistrarea pe diferite site-uri folosind
user/pass, comentariile de pe Facebook, ncrcarea dinamic a noilor tweet-uri pe Twitter -
aproape fiecare interaciune dintre site i utilizator se bazeaz pe un limbaj de programare,
deoarece HTML nu poate face acest lucru. O pagin realizat doar n HTML/CSS nu ar putea
exista. Vom exemplifica acest lucru mai jos.
n imaginea urmtoare, putem vedea un formular de introducere a unui comentariu:

10
Imaginea 1.6 - Formular pentru introducerea comentariilor pe una dintre paginile site-ului
http://www.smashingmagazine.com/
n acest exemplu concret, HTML este responsabil de plasarea antetului, a textului, a trei cmpuri
de introducere a datelor i a unui buton de validare. CSS stilizeaz culoarea, fontul i
dimensiunea antetului i a textului, definete spaiul dintre rnduri i cmpuri, rotunjimea
unghiurilor cmpului, culoarea de fundal a butonului, precum i limea i nlimea sa
etc. Practic, tot ceea ce vedem. Dac ne-am opri aici, formularul ar arta exact ca n imagine, dar
dac am introduce un comentariu i dac am valida aceasta cu un clic pe buton, nu s-ar ntmpla
nimic, deoarece HTML i CSS nu pot procesa datele introduse. De aceea, n acest scop se
utilizeaz limbajul PHP, care va colecta datele din formular, le va procesa (adic va trimite
comentariul la administratorul paginii site-ului pentru confirmare i, eventual, pentru postare),
iar, la final, va afia noua pagin pentru a informa vizitatorul c comentariul a fost
salvat. Desigur, aceast nou pagin este alctuit din nou din HTML i CSS.
11
Ajungem la concluzia c HTML i CSS mpreun cu limbajele de programare sunt strns legate
i interconectate pe paginile web moderne.
Dup aceste observaii introductive care v-au creat o imagine general, cred c suntei pregtii
s mergem mai departe. n acest curs, ne vom ocupa de limbajele HTML i CSS, n timp ce
despre design web i programare vom nva n alte cursuri. Continum cu tag-urile HTML.
Structura paginilor HTML
n aceast lecie, vom analiza structura de baz a documentelor HTML i vom nva cum se
seteaz i aplic tag-urile HTML, ca baz a limbajului HTML.
Structura de baz
Structura tuturor paginilor HTML este definit n mod strict. Elementul constitutiv de baz este
tag-ul HTML. Tag-urile se afl peste tot, iar fiecare element trebuie s fie inclus ntr-un tag.
De exemplu, s privim mai nti o pagin scurt de text n instrumentul Microsoft Word:
Imaginea 2.1 - Text scris n programul Microsoft Word

12
n imagine, putem vedea un document structurat corect. ncepe cu un titlu, cruia i-a fost atribuit
stilul Heading 1. Apoi, urmeaz un paragraf de text normal, obinuit. Dup aceea, urmeaz un
titlu de nivel inferior (Heading 2), dou paragrafe de text i un al alt titlu de nivel secundar
(Heading 2) i aa mai departe. Titlurile pe niveluri structureaz documentul i creeaz un flux
cu sens.
Acelai text poate fi transferat i pe o pagin web, care ar putea s arate ca n imaginea de mai
jos:
Imaginea 2.2 - Acelai text din exemplul precedent afiat pe o pagin HTML
Observm c textul arat aproximativ la fel. La nceput, avem titlul Heading 1 i textul
introductiv, precum i titlul Heading 2 etc. Pentru a obine o astfel de structur, trebuie s
introducem un anumit cod HTML, care arat astfel:
13
Imaginea 2.3 - Pagin HTML (incomplet) prezentarea codului
Culoarea roie indic existena codului HTML, n timp ce textul de pe pagin este negru.
Concluzia la care probabil ai ajuns i singuri este c n documentele HTML exist pri vizibile
utilizatorului i pri care nu i sunt vizibile 1. Acele pri care nu sunt vizibile determin i fac
diferena ntre elementele paginii.
S analizm mai bine exemplul anterior. Exist cteva elemente. Fiecare are propriul tag de
nceput i de sfrit:
14
Imaginea 2.4 - Pagin HTML (incomplet) reprezentarea codului i seciunile marcate
n imaginea de mai sus, avem aceeai pagin, dar cu seciunile clar marcate. Observm
urmtoarele elemente:
<html> </html>
La nceput i la sfrit este un tag html, respectiv tag-ul de nceput i cel de final. Ele nconjoar
toate elementele i indic faptul c tot ce se afl ntre ele este cod html.
<body> ... </body>
Imediat dup tag-ul html de nceput, respectiv dup cel de final, se afl tag-urile body de nceput
i de final. Tot ce se afl ntre ele, va fi afiat n fereastra browser-ului web.
<h1> ... </h1>
Tag-urile h1 de nceput i de final ncadreaz titlul primului nivel (Heading1).

15
<p> ... </p>
Un paragraf de text se afl ntre tag-urile p (p de la paragraph/paragraf).
<h2> ... </h2>
La fel ca i tag-urile h1 i p, tag-ul h2 de nceput i de final ncadreaz titlul celui de-al doilea
nivel (Heading2).
Imaginai-v tag-urile ca pe nite cadre (containere), care ne ofer informaii despre coninutul
aflat ntre tag-ul de nceput i cel de final. n continuare, vom detalia tipurile de tag-uri i
modurile n care acestea se aplic.
Tag-ul HTML
Pn acum am menionat tag-urile ca fiind elementele structurale principale ale unui document
HTML (pagin) i am vzut structura unui document simplu, n care apar anumite tag-uri. Acum,
vom explica ce este un tag HTML i cum se insereaz acesta.
Elementele (tag-urile) sunt alctuite din 3 pri:
tag-ul HTML de nceput;
tag-ul HTML de final;
coninutul dintre ele (unele tag-uri nu au niciun coninut).
Deseori, n locul cuvntului element se folosete cuvntul tag. n acest context, ntregul element
(tag-ul de nceput + coninut + tag-ul de final) se marcheaz doar ca tag. Astfel, putem spune
ceva de genul: Deschidem tag-ul p, introducem coninutul i nchidem tag-ul.
16
Imaginea 2.5 - Tag-uri HTML de nceput i final
A. Tag-ul HTML de nceput;

B. Tag-ul HTML de final;
C. Semnele mai mic i mai mare se folosesc pentru a indica nceputul, respectiv sfritul tag-
ului;
D. Caracterul sau caracterele care indic tipul tag-ului;
E. Linia oblic (forward slash) indic tag-ul HTML de final.
Deci, avnd n vedere tot ceea ce am menionat pn acum, fiecare element ncepe cu un tag
HTML de nceput. Mai nti, scriem semnul mai mic, apoi unul sau mai multe caractere care
indic tipul tag-ului (caracterele nu sunt arbitrare) i semnul mai mare. Urmeaz coninutul tag-
ului. n cele din urm, scriem tag-ul HTML de final, care const din semnul mai mic, un slash,
caractere repetitive care indic tipul tag-ului i semnul mai mare. Toate, cu anumite excep ii,
respect aceast regul.
Acum, dac revenim la acea parte a codului din exemplul de la nceputul leciei i l privim:
Imaginea 2.6 - Tag-ul h1
putem observa exact aceste elemente despre care am vorbit. Tag-ul HTML de nceput este
<h1>, unde, ntre semnele mai mic i mai mare, au fost introduse dou caractere h1 care indic
clar titlul (Heading1). Coninutul elementului este Lorem ipsum dolor sit amet. Tag-ul HTML de
final este </ h1> i l recunoatem ca tag final datorit simbolului liniu oblic / (slash).
V reamintim c ntregul rnd este un singur element (sau tag).

17
Reguli de baz pentru scrierea limbajului HTML
Cnd scriem tag-uri, trebuie s respectm dou reguli de baz:
1. Prima regul
Un tag (element) poate cuprinde un numr nelimitat de alte tag-uri, dar toate tag-urile trebuie
finalizate n cadrul tag-ului n care au fost create. S vedem un exemplu.
Exemplul este unul corect:
Imaginea 2.7 - Elementele p i strong plasate corect
n timp ce urmtorul exemplu nu este corect:
Imaginea 2.8 - Elementele p i strong plasate greit
n primul exemplu, tag-ul p conine un tag strong deschis i nchis, dup care tag-ul p se termin.
n al doilea exemplu, este o eroare, deoarece tag-urile se intersecteaz, tag-ul strong nu este
finalizat nainte de tag-ul p pus ntr-un cadru, ceea ce este o greeal.
Aceste tipuri de erori pot aprea uneori atunci cnd combinm documentul finalizat cu aplicaia
de design (WYSIWYG) i cu introducerea manual a codului HTML, care sunt destul de greu de
localizat n documentele mai mari. Cea mai bun msur de prevenie este introducerea atent a
tag-urilor.
2. A doua regul
Fiecare tag de nceput trebuie s aib i un tag de final. Respectiv, dac vom ncepe un anumit
element (tag), trebuie s-l i ncheiem undeva. Nu putem ncepe, de exemplu, cu tag-ul h1 pentru
titlu, ci introducem coninutul (textul titlului) i continum cu paragrafele de text. nainte de
paragraf, n acest exemplu trebuie s nchidem tag-ul h1 i abia apoi s continum.
Tag-urile cu autonchidere
Majoritatea elementelor se scriu aa cum am menionat, dar exist i a a-numitele tag-uri cu

autonchidere. Tag-urile cu autonchidere sunt cele care ncep i se termin n acelai timp.
18
De exemplu, semnul pentru ntreruperea/separarea unui rnd n cadrul unui paragraf este <br>
(br de la comanda break). Acest tag nu are coninut i, dac am respecta regulile de mai sus, ar
trebui s-l scriem ca <br> </ br>. Deoarece acest lucru nu este necesar (i incorect pe
deasupra), tag-urile vor fi scrise doar ca <br> sau <br />.
n varianta HTML, tag-urile cu autonchidere se scriu <x> (la fel ca i tag-urile de nceput, fr
cele finale), n timp ce n varianta xHTML trebuie scrise aa: <x /> (o combinaie a tag-urilor de
nceput i de final). Avnd acest lucru n vedere, s privim un exemplu de tag-uri normale i cu
autonchidere:
Imaginea 2.9 - Element p scris corect - deschis i nchis -, precum i tag-ul br cu autonchidere
Observm tag-ul p de nceput i de final, care formeaz elementul p i conine un paragraf de

text. n cadrul tag-ului p, se afl un tag cu autonchidere br, care indic faptul c n acel loc
rndul se ntrerupe.
Atunci cnd browser-ul ntmpin o problem legat de aceste dou reguli, respectiv un cod
incorect, el ncearc totui s-l afieze presupunnd unele detalii i corectnd codul pe ct posibil
n timpul afirii acestuia. n astfel de cazuri, pot aprea diferite situaii neprevzute i probabil o
afiare diferit n browser-e diverse.
Aici, la tag-urile cu autonchidere, am menionat HTML i xHTML i diferenele de scriere. n

general, ntreaga baz a scrierii limbajului HTML i xHTML este identic, n afar de unele mici
diferene. n cadrul acestui curs, vom aborda n primul rnd varianta HTML5, ns vom meniona
i versiunile mai vechi.
Atributele tag-urilor HTML
Tag-urile n sine, respectiv tag-urile de nceput ale elementelor, pot include atribute care conin
informaii suplimentare.
Atributele sunt formate din dou pri: din numele atributului i din valoarea atributului.
Acestea se scriu pe tag-ul de nceput al elementului i sunt separate de caracterul tipului de tag
printr-un spaiu. Numele atributului se scrie cu minuscule, apoi se pune semnul egal, dup care
ntre ghilimele se insereaz valoarea atributului. Spaiile sunt interzise n interiorul structurii
atributului. Iat un exemplu:
19
Imaginea 2.10 - Atributul class de deasupra elementului p
Numele atributului este etichetat cu A, n timp ce valoarea atributului cu B.
Numele atributelor nu sunt arbitrare i exist reguli conform crora anumite atribute sunt
utilizate n tag-uri diferite. Atributele pot fi opionale sau obligatorii, asta n funcie de tag i de
atribut.
n exemplul din imagine, paragrafului i-a fost adugat o clas folosind numele
atributului class. Un singur tag poate avea un atribut, mai multe atribute sau niciunul.
HTML5 permite scrierea numelor atributelor cu majuscule (uppercase), precum i omiterea

ghilimelelor n jurul valorii atributului, dar acest lucru nu este recomandat deoarece poate cauza
erori.
Crearea primei pagini HTML i tag-urile de baz

n lecia precedent, ne-am familiarizat cu elementele de baz ale limbajului HTML. Acum, vom
vedea care sunt prile de baz ale documentelor HTML i vom crea prima noastr pagin. De
asemenea, vom nva i variantele existente ale limbajului i cum i cnd le putem aplica. Vom
afla i ce este doctype i cum se folosete acesta.
Tag-urile de baz ale paginii HTML
Paginile HTML nu se scriu la ntmplare, ci respect o structur definit cu precizie. Trei tag-uri
sunt obligatorii, deci trebuie neaprat inserate n baz - <html>, <body> i <head>.
n HTML5, aceste tag-uri se pot i omite pentru a obine o structur mai liber a limbajului,
ns nu este recomandabil.
Imaginea 3.1 - Tag-ul HTML
Am ntlnit acest tag n lecia precedent. Tag-ul HTML de nceput se afl la nceputul
documentului HTML, n timp ce tag-ul HTML de final se afl ntotdeauna la sfr itul
documentului. Practic, acest lucru nseamn c ntregul coninut al documentului HTML complet
se afl n cadrul acestui tag. Tot ceea ce se gsete n cadrul tag-ului (ntre nceputul i sfritul
20
tag-ului html) reprezint partea paginii HTML. Nu mai putem scrie nimic nainte sau dup el, n
afar de o excepie, despre care vom vorbi ntr-una din leciile viitoare. De asemenea, acest
element apare doar o singur dat pe pagin.
Imaginea 3.2 -Tag-ul head
Tag-ul head trebuie scris imediat dup deschiderea tag-ului <html> menionat mai devreme. n
tag-ul head, se afl elemente care nu sunt vizibile n mod direct pe pagin. De exemplu, n partea
head inserm meta tag-urile folosite de motoarele de cutare cnd indexm paginile. De
asemenea, aici plasm i linkuri ctre fiiere CSS externe i ctre alte fiiere etc.
Imaginea 3.3 - Tag-ul body
Tag-ul body urmeaz imediat dup tag-ul head i conine tot ceea ce este vizibil direct pe pagin.
O greeal frecvent a nceptorilor este c dubleaz acest tag sau o parte a acestuia, atunci cnd
editeaz paginile sau cnd copiaz pri ale unei pagini pe alt pagin.
Structura de baz a tuturor paginilor HTML conine aceste tag-uri, iar codul poate arta astfel:
1 <html>
2 <head>
3 </head>
4 <body>
</body>
5 </html>
6
respectiv tag-ul html conine elementele head i body:

21
Imaginea 3.4 - Trei tag-uri de baz ale paginilor HTML
Reinei c toate celelalte elemente, tot codul suplimentar se afl fie n elementul head, fie n
elementul body. Tag-urile nu trebuie scrise direct n HTML. De asemenea, reinei c elementele
html, head i body apar doar o singur dat i ntotdeauna n ordinea prezentat mai sus.
Prima noastr pagin HTML
Deoarece deja am asimilat cteva cunotine, haidei s crem prima noastr pagin HTML.
CSS-ul l lsm pentru mai trziu.
Dac utilizai Windows, deschidei Notepad, iar dac utilizai Mac, deschidei TextEdit.
Dei aplicaiile menionate sunt suficiente pentru acest curs, v recomandm s mai instalai i s
folosii Notepad++ (Windows) - http://notepad-plus-plus.org/, respectiv TextWrangler (Mac) -
http://www.barebones.com/products/textwrangler/. Desigur, putei utiliza i editoare de text mai
avansate, cum ar fi Dreamweaver sau Eclipse, dar nu i recomandm chiar de la nceput. ntr-un
cuvnt, codul HTML poate fi editat n orice editor de text.
Dup ce ai pornit editorul de text, introducei urmtorul cod:
1
2 <html>
<head>
3 <title>My first HTML page</title>
4 </head>
5 <body>
6 <h1>Hello!</h1>
<p>I am HTML document.</p>
7 </body>
8 </html>
9
22
l putei copia direct de aici sau l putei tasta singuri.
Dac l mprim n elemente, observm elementele html, head ibody pe care le-am menionat
mai devreme n lecie. n continuare, n head se afl elementul title (element obligatoriu), care va
fi vizibil ntr-un tab din browser. n seciunea body, se afl elementele h1 i p, care reprezint
titlul i un paragraf al textului. Cu aceste tag-uri de text i cu restul tag-urilor ne vom ocupa n
urmtoarele lecii.
Salvai pagina undeva pe calculator, introducei numele, dar asigurai-v c nu o salva i ca

document txt (care este setarea de baz, implicit n toate editoarele de text), ci ca fiier html. Nu
uitai c toate fiierele html au extensia .html sau .htm.
Dac privii urmtoarea imagine, vei vedea fereastra de dialog Save as a instrumentului
Notepad++, n care html a fost selectat ca tip de fiier:
Im
aginea 3.5 - Salvarea paginii noastre n Notepad++ (Windows)
n caz c lucrai pe calculatoare Mac i n TextWrangler, fereastra de dialog va arta astfel:

23
Imaginea 3.6 Salvarea paginii noastre - TextWrangler (Mac)
Salvai fiierul ca html fie prin alegerea tipului de fiier (Notepad++), fie prin tastarea manual a
extensiei .html la sfritul numelui (Notepad++ i TextWrangler).
Acum, putei localiza fiierul pe harddisk i l putei porni. Se va deschide browser-ul web setat
ca implicit, care va afia pagina noastr. Vom obine ceva similar urmtoarei imagini:
24
Imaginea 3.7 Afiarea paginii noastre n browser-ul Chrome
Putei afia codul paginii i din browser. Dai clic dreapta pe pagin i din meniul derulant
selectai View page source, respectiv View source (n funcie de browser). Se va afia acelai cod
pe care tocmai l-ai introdus n editor. Din aceast fereastr de dialog a browser-ului, codul nu
poate fi schimbat, dar este util atunci cnd dorii s vizualizai HTML-ul unei alte pagini pe care
nu ai creat-o dvs.
S privim exemplele unor site-uri populare precum Wikipedia (wikipedia.org) i Amazon

(amazon.com). Dac deschidem sursa site-ului Wikipedia, vom observa c i aceast pagin are
tag-urile de baz <head> <html>, <body>, chiar dac are i foarte multe rnduri ale altui cod.
Principalele tag-uri menionate sunt marcate n imaginile de mai jos cu rou:

25
Imaginea 3.8 - Exemplu de cod a site-ului www.wikipedia.org

26
Imaginea 3.9 - Exemplu de cod pentru site-ul www.wikipedia.org
Variantele limbajului HTML
HTML s-a dezvoltat de-a lungul anilor, aa c astzi avem mai multe versiuni actuale. Dei poate
nu se deosebesc la prima vedere, cu siguran exist diferene i acestea
influeneaz drastic modul de scriere a codului, respectiv modul de creare a documentelor
noastre, ns i modul n care vor fi reprezentate documentele respective.
Fiecare versiune nou a limbajului HTML aducea anumite mbuntiri i elemente noi, n timp
ce unele elemente vechi i anumite reguli erau eliminate. n general, limbajul HTML a crescut i
a fost mbuntit odat cu apariia versiunilor noi, ceea ce implic i actuala versiune HTML5.
Totui, n paralel, din versiunea menionat este eliminat practic ntreaga stilizare HTML.
Astzi, putem spune c avem 3 versiuni actuale (cu unele variante ale acestora).
HTML 4
Aceast variant a fost publicat n anul 1997, ceea ce n domeniul designului web reprezint o
perioad de timp destul de lung. HTML4 suport o anumit stilizare direct prin HTML. n acest
scop, exist tag-uri precum center, font i altele. Totui, astzi, pentru fiecare stilizare se
27
utilizeaz CSS. Practic, HTML4 nici nu se mai folosete, ns se poate recunoate pe unele site-
uri mai vechi. Recomandarea noastr este s nu creai pagini noi n HTML4.
xHTML 1
Publicat n anul 2000, xHTML1 reprezint o combinaie a limbajului HTML4 i XML, de unde a
i primit numele de xHTML. Pe baza limbajului HTML4, sunt adugate unele reguli foarte
importante, dar i mult mai stricte din XML, n care intr i urmtoarele:
fiecare element (tag) trebuie s aib un tag de deschidere i unul de nchidere, excepie
fiind elementele cu autonchidere (precum <img />);
numele atributelor n tag-uri trebuie scrise cu minuscule;
toate atributele din tag-uri trebuie s aib valori inserate ntre ghilimele;
sunt interzise unele tag-uri din HTML4.
xHTML a permis ca documentele scrise n acest standard s poat funciona uor cu

instrumentele prevzute pentru XML. De asemenea, xHTML a asigurat i implementarea
elementelor n alte formate care se bazeaz pe XML, precum SVG, MathML i altele.
Exist trei tipuri de xHTML, i anume:
Strict XHTML 1.0 noile reguli XML introduse trebuie respectate n totalitate;
Transitional XHTML 1.0 n acest tip, este permis un mod de scriere mai liber al
documentelor. Este permis utilizarea tag-urilor care nu se mai folosesc, precum center i
font, de exemplu. Din denumirea acestui tip (transitional - tranziional, de trecere), putem
concluziona c acesta este conceput ca un tip tranziional, temporar, ns n continuare se
folosete mpreun cu varianta strict.
XHTML1.0 Frameset aceast variant nu se mai folosete deloc, ns ea presupunea

definirea regiunilor, a frame-urilor pe pagin, n care apoi erau ncrcate imagini
separate.
xHTML (strict i transitional) era n urm cu un an un standard care se folosea foarte des. Totui,
de cnd a aprut versiunea stabil de HTML5, acesta a devenit lider, pentru ca n octombrie 2014
s fie finalizat versiunea care obine totodat i statusul Recommendation, aadar putem spune
c xHTML nu se va mai folosi.
HTML5
28
Dup cum am menionat deja, HTML5 este standardul momentan recomandat pentru crearea
documentelor HTML. Tot ceea ce vom crea n cadrul acestui curs vom crea n aceast versiune.
Dezvoltarea continu nu este oprit, chiar dimpotriv, dezvoltarea versiunii 5.1 avanseaz foarte
bine i publicarea acesteia se anun pentru anul 2016.
Trebuie s menionm i c HTML5 este deja implementat n toate browser-ele moderne de pe

calculatoare (versiunile actuale), dar i pe dispozitivele mobile i pe alte dispozitive. De
exemplu, Android, iOS i Windows Phone, cele mai populare sisteme de operare, deja suport
HTML5.
Totui, trebuie s avem grij ca paginile noastre s fie accesibile i vizibile n mod corect i n
browser-e mai vechi, chiar dac acest lucru necesit scrierea elementelor suplimentare. Se poate
ntmpla ca unele elemente avansate s nu fie deloc vizibile n vechile browser-e (deoarece nu
suport HTML5), ns nu putem permite ca pagina s nu se afieze deloc sau s nu fie
funcional. Aceast problem apare la calculatoarele pe care sunt instalate browser-e mai vechi.
De exemplu, Microsoft Internet Explorer 8, lansat n anul 2009, i Internet Explorer 7, din anul
2006, nu suport specificaiile HTML5, dar sunt browser-e care nc se mai folosesc (nu ntr-o
msur mare, dar sunt totui prezente pe pia).
Am vzut ce variante de limbaj exist. Pentru determinarea variantei pe care o folosim, avem la
dispoziie Doctype-ul de la nceputul paginii.
Doctype
Fiecare document trebuie s posede o declaraie (n care se gsesc datele despre document i
caracteristicile limbajului) i un element root, sub care se gsete structura documentului.
Cnd este vorba de HTML, declaraia, de obicei, implic versiunea limbajului i adresa fiierului
n care se gsete definiia pentru acest limbaj. Declaraia se numete Document Type
Declaration i se gsete la nceputul fiecrei paginii HTML n tag-ul DOCTYPE. Motivul
pentru care am introdus cuvntul tag ntre ghilimele este c acest DOCTYPE, de fapt, nu este un
tag HTML adevrat, ci este o instruciune dat browser-ului (din cauza semnului ! dup
deschiderea tag-ului). Instruciunea poate fi dat i serverului web, dar o recunoatem (ca i
instruciunea browser-ului), n aa fel nct la nceputul su conine caractere speciale (de
exemplu, <? , <%).
n ceea ce privete instruciunea DOCTYPE (declaraia), de obicei, aceasta arat astfel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

1"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Acest exemplu definete pagina ca xHTML 1.0 transitional menionat mai devreme sau ca:
1 <!DOCTYPE html>
29
Ce definete pagina ca HTML5?
La ce se folosete definiia tipului de document?
DOCTYPE se poate imagina ca gramatica documentului HTML. La nceput, declarm ce DTD,

adic ce set de reguli vom folosi. Dac respectm regulile respective i dac pagina noastr este
creat conform acestora i nu exist erori n cod, atunci putem spune c documentul nostru este
valid. Regulile provin din versiunile limbajului HTML menionate mai devreme.
Cu alte cuvinte, la nceputul documentului, noi definim singuri dac vrem s crem HTML5,
xHTML1 transitional sau al treilea tip de pagin. Cnd determinm aceasta, n continuare
respectm regulile stabilite pentru versiunea aleas.
Documentul este valid dac n el nu avem erori. Erorile pot include i utilizarea unei anumite
reguli dintr-o alt versiune care nu este suportat n versiunea pe care o utilizm. De exemplu, n
xHTML am putut s folosim atributul cellspacing n tag-ul tabelului, n timp ce acest atribut
concret este eliminat din HTML5. Dac scriem atributul n xHTML, codul va fi valid, n timp ce,
dac l scriem n HTML5, codul nu va fi valid (indiferent dac browserul l-a recunoscut sau nu).
Tabelele i detaliile legate de acestea vor fi abordate mai trziu n acest curs.
Imaginea 3.10 - W3C Validator
Validitatea documentului se poate verifica pe site-ul W3C, creat tocmai cu acest scop
(http://validator.w3.org/). Cnd la adresa respectiv inserm linkul URL pn la site sau
ncrcm o pagin sau o parte din pagin, validatorul va verifica erorile n cod (precum tag-urile
care nu sunt nchise, atributele care lipsesc i altele), dar va verifica i dac codul este n
concordan cu DTD-ul pe care l-am setat. De exemplu, dac folosim varianta xHTML strict i
introducem tag-ul font care este interzis n aceast variant, validatorul va semnala existena unei
erori. Totui, dac folosim xHTML transitional, atunci nu va fi semnalat nicio eroare.
Validatorul nu este atotputernic i nu ne va corecta erorile, dar ne informeaz i ne arat unde am

greit, pentru a putea s corectm ceea ce nu este corect scris.
30
Variantele Doctype
Analog variantelor HTML, respectiv variantelor limbajului xHTML disponibile, exist mai
multe varinte de declaraii Doctype.
HTML4
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01

1Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
Transitional XHTML 1.0
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0

1Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Strict XHTML 1.0
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0

1Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5
La aceast variant, Doctype este foarte mult simplificat, aadar scriem doar:
1 <!DOCTYPE html>
Acestea nu trebuie nvate pe de rost, ci le copiai doar la nceputul noului document. Dac
folosii un instrument mai avansat, precum, de exemplu, Adobe Dreamweaver, n timp ce creai
documentul nou putei s alegei tipul de document, iar Dreamweaver se va ocupa de Doctype:
31
Imaginea 3.11 - Alegerea Doctype n timpul crerii documentului HTML n instrumentul

Dreamweaver
XMLNS
Mai devreme, am menionat c la nceputul documentului inserm tag-ul <html>. Acesta

urmeaz imediat dup Doctype. Dac folosim o versiune mai veche de xHTML, atunci pagina
goal va arta astfel:
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4
5 <head>
6 <title>Nov dokument</title>
7 </head>
8
<body>
9 </body>
1 </html>
0
Atenie la acest exemplu de pagin xHTML! tim c este xHTML, fiindc putem vedea n
primul rnd n Doctype. Ceea ce observm este existena atributului xmlns n tag-ul HTML.
Acest atribut este necesar n variantele xHTML, deoarece definete namespace-ul necesar n
32
fiierele xml (ceea ce dup structura i regulile sale este i xHTML). n general, vom folosi
HTML5, aadar acest detaliu nu ne va fi necesar.
Dac observm doar acest rnd, vedem c acesta este un tag html clasic pe care l-am folosit deja,
dar n plus avem i acest atribut xmlns:
1 <html xmlns="http://www.w3.org/1999/xhtml">
Ca material suplimentar al acestei lecii, avei la dispoziie o arhiv ZIP cu un doctype inclus, dar
i cu alte elemente de baz pentru cele mai des folosite variante de HTML. Putei descrca arhiva
de la urmtorul link:
http://www1.link-elearning.com/linkdl/coursefiles/690/UHIC_10_dodatni_mat.zip.
Meta pentru utf8
Un detaliu foarte important, care, deseori, se poate anticipa, este setarea lui encoding, respectiv
inserarea lui meta tag, care va determina modul n care browser-ul trebuie s citeasc pagina
noastr i cum s afieze caracterele/literele specifice unei limbi.
Se recomand ca encoding-ul s fie setat ntotdeauna la utf-8. n caz contrar, caracterele specifice
limbii romne/diacriticele (, , , , i altele) s-ar fi pierdut n totalitate, dar n special ar fi putut
aprea probleme dac s-ar fi folosit, de exemplu, alfabetul chirilic. Utf-8 rezolv problema limbii
i suport aproape toate limbile active i recunoscute.
De aceea, n partea head (pentru HTML5) inserm ntotdeauna:
1 <meta charset="utf-8">
n timp ce pentru xHTML inserm urmtoarele:
1 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Acesta este meta tag-ul care definete encoding-ul. Nu trebuie s-l memorm, ci l copiem
ntotdeauna n aceeai form n partea head.
Dup cum putei observa, i meta tag-ul pentru encoding este simplificat n versiunea HTML5.
Cnd la sfritul acestei lecii analizm toate cele spuse, baza paginii noaste HTML5 va arta
astfel:
1 <!DOCTYPE HTML>
<html>
2
3
<head>
4 <meta charset="UTF-8">
5 <title>HTML5</title>
33
6
</head>
7
8
<body>
9
10 </body>
11
12 </html> <span style="font-size: 14px;"> </span>
13
Textul
n lecia precedent, am discutat despre procesul de creare a unei pagini simple i despre cele trei
tag-uri de baz ale limbajului HTML (html, head i body). n aceast lecie, vom detalia cele mai
frecvent utilizate tag-uri n limbajul HTML.
Titlurile (headings)
Cu titluri ne-am ntlnit deja n leciile precedente. Pe lng faptul c marcheaz diferite pr i ale
textului, titlurile servesc la structurarea corect a documentului.
Exemplu de titluri n limbajul HTML:
1 <h1>Lorem ipsum dolor sit amet</h1>

i afiarea acestora n browser:
34
Imaginea 4.1 Tag-urile heading afiate n browser (de la h1 la h6)
Este important s reinem ct mai multe detalii cnd vine vorba de titluri:
n titluri, putem pune doar un text scurt, concis. Nu putem seta texte, imagini ntregi etc. De i
aceast regul pare logic, astfel de greeli apar de multe ori.
Trebuie s respectm ierarhia corect a titlurilor. h1 se utilizeaz pentru titlurile principale, h2

pentru subtitluri. Dac trebuie s mai ramificm textul n continuare (dup h2), folosim
subtitlurile h3 etc. Dar nu putem plasa un subtitlu h4 imediat dup h1 sau, de exemplu, un h1
dup h2.
Titlurile nu se folosesc pentru a mri dimensiunea textului i/sau pentru a seta formatul bold.
Pe baza setrilor implicite, imediat dup ce unui anumit text i inserm marcajul pentru titlu
(adic tag-ul heading), acestui text i se mrete fontul n mod automat i devine unul ngroat.
Paragrafele (Paragraphs)
Paragrafele reprezint ceea ce, de obicei, numim text obinuit. Ca i n cazul titlurilor, putem
crea paragrafele nconjurnd textul cu un tag p de nceput i unul de final.
Conform principalelor valori implicite, browser-ul afieaz fiecare paragraf pe un rnd nou i
adaug un anumit spaiu nainte i dup fiecare paragraf.
Exemplu de paragraf n limbajul HTML1:
1<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

2eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
35
3minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip

4ex ea commodo consequat.</p>
5<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
6cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
7cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
8id est laborum.</p>
i afiarea acestuia n browser:
Imaginea 4.2 - Exemplu de dou paragrafe n browser
Bold
Efectul bold (ngroarea caracterelor), aa cum poate presupunei deja, se adaug cu ajutorul unui
tag adecvat. Interesant este faptul c putem posta una dintre aceste dou variante, mai exact tag-
ul <b> sau <strong> i vom obine aproape acelai efect. Spun aproape acelai efect, pentru c
se difereniaz ntr-un punct foarte important. Pentru a nelege mai bine acest lucru, trebuie s
facem o mic parantez i s explicm mai nti conceptul de semantic.
Semantica este, n general, tiina despre sensul cuvintelor2. n contextul designului web i al
limbajului HTML pe care le studiem aici, semantica se refer la marcarea funcional a
elementelor. Dac ne referim n special la tag-urile <b> sau <strong>, primul va posta doar
varianta ngroat a fontului peste caracterele marcate, n timp ce <strong> va defini partea
marcat ca fiind separat, important, evideniat.
n ambele cazuri, toate browser-ele moderne afieaz fontul bold n acelai fel, dar <strong>
indic diferitor intrumente software, site-uri i reader-e c acea parte a textului este evideniat.
n urma tuturor celor menionate, este mai bine s utilizm varianta <strong>, deoarece, n afar
de aspectul vizual, aceasta are i o utilizare funcional. De exemplu, atunci cnd Google,
respectiv serviciul su automatizat, indexeaz paginile, <b> va fi omis, respectiv va fi tratat ca
36
un text obinuit, n timp ce <strong> va fi luat n considerare ca o parte mai important a

textului.
Exemplu de formatare bold (strong) n limbajul HTML:
<p>Lorem ipsum <strong>dolor sit amet</strong>,consectetur adipisicing

1elit.</p>
i afiarea acesteia n browser:
Imaginea 4.3 - Afiarea paragrafului cu partea strong
n exemplul de mai sus, observm c este inserat un paragraf de text i c o parte a sa este
marcat (nrmat) cu un nou tag strong. n reprezentarea din browser, partea din textul respectiv
este afiat cu varianta bold a fontului. Dac am fi folosit varianta cu tag-ul b, am fi obinut
acelai efect, cel puin este vorba de aspectul vizual:
Aici, am menionat termenul de semantic i am explicat c, prin intermediul

ei, transmitem n designul web semnificaia ascuns a elementelor. Utilizarea elementelor
semantice nu este obligatorie, ns poate fi util ntr-o msur mai mic sau mai mare.
Concret, utilizarea tag-ului b n loc de tag-ul strong nu va aduce beneficii foarte mari, ns
poate cauza erori.
Italic
n ceea ce privete varianta de scriere cu italice, avem o situaie similar cu cea a formatului bold
de mai sus. Putem folosi fie tag-urile <i>, fie tag-urile <em>. n mod analog, primul va posta
doar versiunea italic a fontului, n timp ce tag-ul <em> va posta i sensul semantic. Tag-ul <em>
menionat indic faptul c textul din interiorul lui este puin diferit i se evideniaz de restul
propoziiei. Em este prescurtarea de la cuvntul englezesc Emphasize, care nseamn a sublinia, a
accentua.
Exemplu de formatare italic (em) n limbajul HTML:
1 <p>Duis aute irure <em>dolor</em> in reprehenderit</p>

i afiarea acesteia n browser:
Imaginea 4.4 - Afiarea paragrafului cu partea cu italice

37
Dup cum am explicat deja, formatarea bold i italic se poate insera foarte simplu, utiliznd
tag-uri corespunztoare n textele noastre. Acesta nu este singurul mod de a avea formatarea
bold i italic. Folosind regulile CSS, pe care le vom aborda mai trziu n curs, putem, de
asemenea, s stilizm textul n diferite moduri, acestea fiind chiar i mai uoare dect
stilizarea prin tag-uri.
Sup i sub
Uneori, n texte avem nevoie de caractere pe care trebuie s le poziionm deasupra, respectiv
sub rndul principal/linia de baz (base line), n special n formule. Pentru astfel de detalii,
folosim tag-urile <sup>, respectiv <sub>. Sup este prescurtarea de la superscript, iar sub de la
subscript.
Iat un exemplu pentru sup (n primul rnd) i sub (n al doilea rnd):
1<p>E = MC<sup>2</sup></p>
2
3<p>CO<sub>2</sub> + H<sub>2</sub>O = H<sub>2</sub>CO<sub>3</sub></p>
i afiarea n browser:
Imaginea 4.5 - Afiarea tag-urilor sup i sub
Codul din al doilea exemplu vi se poate prea puin confuz din cauza numrului de tag-uri, dar,
dac l descompunei n pri, vei vedea c, de fapt, este foarte simplu. De exemplu, privi i
aceeai parte scris astfel:
1 <p>
2 CO<sub>2</sub>
3 +
4 H<sub>2</sub>O
5 =
6 H<sub>2</sub>CO<sub>3</sub>
</p>
7
38
Nu este mai simplu? Totul st n felul n care privim detaliile. Creierul nostru este obinuit cu
texte clasice (ca s spunem aa) i conecteaz prile textului n uniti logice. La limbajul
HTML, lucrurile stau puin altfel.
Codul de mai sus va da acelai rezultat pentru c noile rnduri i spaii introduse n el nu joac
un rol semnificativ.
Br
Am menionat deja c la sfritul i nceputul unui paragraf nou se adaug un rnd nou. ns,
uneori vrem s ntrerupem rndul n mijlocul paragrafului, fr s crem un paragraf nou. Putem
face acest lucru prin simpla adugare a unui tag, probabil c deja bnuii, de ntrerupere a
rndului, care are marcajul <br> n HTML, respectiv <br /> n varianta xHTML.
Datorit specificitii acestui element (nu are propriul coninut), nu scriem tag-ul de nceput i
cel de final, ci doar unul, care este n acelai timp i de nceput, i de sfrit. Acesta este unul
dintre tag-urile cu autonchidere pe care le-am menionat deja.
Br este prescurtarea de la cuvntul englezesc break (a ntrerupe). Dac ai folosit opiunea shift +
enter n Microsoft Word sau ntr-un instrument similar, atunci acest principiu v este cunoscut
deja.
Exemplu de tag HTML <br>:
1<p>Excepteur sint occaecat,<br>cupidatat non proident, sunt in culpa

2qui officia deserunt mollit anim id est laborum</p>
Imaginea 4.6 - Afiarea ntreruperii unui paragraf n browser
De ce s utilizm acest tag? Ar prea ntotdeauna mai logic s ntrerupem textul printr-un
paragraf nou, dar se poate ntmpla s fi setat, de exemplu, un stil CSS specific pentru paragraf,
precum i un spaiu mai mare nainte sau dup. Poate c vrem s pstrm o parte din text
mpreun, dar, totui, pe un rnd nou.
Utilizarea acestui tag nu este obligatorie. Browser-ul va muta singur continuarea textului ntr-un
rnd nou, n acelai paragraf, n caz c ajungem la sfritul paginii/la sfritul elementului
nconjurtor. Break se folosete doar atunci cnd vrem o anumit separare de text ntr-un anumit
loc din textul respectiv.
39
Hr
Hr este un tag care funcioneaz similar cu tag-ul br sus-menionat, n sensul c se scrie doar o
singur dat ca <hr> n varianta limbajului HTML, respectiv ca <hr/> n varianta xHTML, ns
are o funcie cu totul diferit. Acest tag adaug o linie orizontal n text. Hr este prescurtarea de
la englezescul horizontal rule (linie orizontal). n ultimul timp, se utilizeaz din ce n ce mai rar,
dar uneori poate fi util.
Exemplu de tag <hr> ntre dou paragrafe n limbajul HTML:
1<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

2eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
3ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
4ex ea commodo consequat.</p>
5<hr>
6<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
7cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
8
id est laborum.</p>
9
Imaginea 4.7 - Afiarea tag-ului <hr> n browser ntre dou paragrafe
Caracterele speciale
Pentru afiarea caracterelor speciale, folosim instruciuni HTML corespunztoare. Acestea ncep
ntotdeauna cu semnul & i se termin cu semnul ; .
40
Dac inserm unul dintre caracterele speciale, n cod inserm ceva pe care browser-ul l afieaz
ntr-un mod diferit. De exemplu, dac n cod am fi scris urmtoarele:
1 <p>Copyright LINKgroup</p>
n browser am fi obinut acest rezultat:
Imaginea 4.8 - Prezentarea caracterului nlocuitor n text
Caracterele nlocuitoare pot fi uneori foarte utile. n tabelul de mai jos, putei vedea unele dintre
cele mai des folosite caractere, iar mai multe detalii despre acestea le gsii la urmtorul link:
http://www.w3schools.com/html/html_entities.asp
Instruciune Aspectul pe pagina

HTML HTML
(non breaking space)
< <
> >
& &
Tabelul 4.1
Observaii despre spaiile albe (white-space)
Deseori, utilizatorii obinuii s lucreze (greit) n Word sau ntr-un instrument similar utilizeaz
spaii albe multiple pentru poziionarea textului. Acest lucru este greit din mai multe motive, pe
care nu le vom detalia acum, dar reinei c n limbajul HTML nu putem scrie mai multe spaii
albe. ntre dou caractere, poate exista numai un singur spaiu obinuit. n cazul n care adugm
mai multe spaii, utilizatorul va vedea doar unul. Pentru poziionarea elementelor, se utilizeaz
diferite moduri. Pur i simplu, HTML elimin toate spaiile albe multiple i las doar unul.
41
Situaia este asemntoare cu cea a rndurilor din cod. Noile rnduri nu fac nicio diferen .
Putem crea o pagin ntreag pe un singur rnd sau putem folosi mii de rnduri. Imaginea afi at
nu va fi diferit. Important este s scriem tag-uri complete, adic fr spaii ntre caracterele < i
>.
Listele
n aceast lecie, vom defini noiunea de liste i modul n care le putem utiliza pe web. Ne vom
familiariza i cu tag-urile utilizate pentru liste.
Noiunea de list
Cnd spunem list, ne referim, de obicei, la simpla structurare vizual a con inutului n unit i cu
sens. Acest lucru este, cu siguran, corect, ns n HTML listele pot nsemna mult mai mult. O
list poate fi folosit pentru a separa anumite uniti, pentru a grupa mai multe linkuri ntr-un
ntreg, pentru a acorda prioritate anumitor elemente etc.
Listele nu trebuie s arate aa cum ni le imaginm. Pot avea un aspect complet diferit. n acest
caz, utilizatorul nici nu observ c vizualizeaz un coninut structurat sub form de list. De
exemplu, un numr mare de sesiuni de navigare (meniuri principale) pe site-uri sunt create astzi
cu ajutorul listelor stilizate sub form de meniuri derulante:
Imaginea 5.1 - Prezentarea unei liste tipice pe o pagin Wikipedia

42
Imaginea 5.2 - Prezentarea listei ntr-o form puin mai diferit
n primul exemplu, n imagine putem vedea o utilizare standard a listei, aa-numitele liste
neordonate, n care textul este structurat n uniti cu sens i elemente individuale folosind
bullets, adic cerculee negre. O astfel de afiare a listei este mult mai clar dect un paragraf de
text obinuit.
n al doilea exemplu, vedem harta de navigare a unui site, de asemenea realizat cu ajutorul
listelor neordonate. Totui, aceast list este foarte diferit din punct de vedere vizual, pentru c
s-au utilizat regulile CSS. Elementele sunt plasate orizontal, unul lng altul, iar lista con ine i
elemente embedded (inserate), care apar pe vertical atunci cnd poziionm mouse-ul deasupra
elementului respectiv.
Totui, ambele liste din exemple au aceeai structur HTML, doar stilizarea difer, afiare
vizual pentru care este responsabil CSS. Putem concluziona c listele HTML se folosesc (n
general) pentru structurarea coninutului textual. Afiarea vizual ns poate fi diferit de ceea
ce, n mod tradiional, considerm list.
n continuarea leciei, ne vom familiariza n detaliu cu modul de structurare a unei liste.
Tipurile de liste
Exist trei tipuri de liste:
Ordered (liste ordonate) sunt liste ale cror elemente sunt marcate cu un tip de element
ordonat. De obicei, numerele, cifrele romane, literele alfabetului etc.
43
Unordered (liste neordonate) sunt liste ale cror elemente sunt marcate cu diferite
elemente - ptrate, cercuri, liniue etc. Spre deosebire de listele ordonate, aici ordinea
elementelor nu este important.
Definition (liste de definiie) sunt liste ale cror elemente sunt alctuite din dou pri,
text i definiie. Sunt utile pentru a crea ntrebri i rspunsuri, deoarece sunt ntotdeauna
formate din perechi. Astzi, acest tip se folosete din ce n ce mai puin.
Listele ordonate
Pentru a indica listele ordonate, folosim tag-ul <ol>. Ca i n cazul tag-urilor menionate mai
devreme, scriem un tag ol de nceput i un tag ol de final, dup care, n interiorul acestuia, scriem
noi tag-uri <li>, fiecare reprezentnd un nou element al listei. De exemplu:
1 <ol>
2 <li>nigredo</li>
3 <li>albedo</li>
4 <li>citrinitas</li>
<li>rubedo</li>
5
</ol>
6
Observm c la nceputul listei se afl un tag de nceput <ol>, dup care urmeaz elementele
individuale ale listei ncadrate de tag-ul <li>, iar n final lista se ncheie cu </ol>. Avnd o astfel
de structur, tag-ul listei cuprinde toate elementele introduse, iar browser-ul tie c toate
elementele sunt conectate ntr-un ntreg. Conform valorilor implicite, n browser aceast list
arat astfel:
Imaginea 5.3 - Afiarea unei liste ordonate n browser
Ceea ce este important i ce trebuie s reinei este c numeralele ordinale nu au fost introduse
manual n elemente, dei apar n reprezentare. Cnd afim listele ordonate, browser-ul adaug
un numeral ordinal n faa fiecrui element.
Desigur, dup cum vom vedea mai trziu n timpul cursului, cnd vorbim despre limbajul CSS,
aceste numere pot fi nlturate dac dorim sau le putem schimba n cifre romane, n litere ale
alfabetului etc.
Listele neordonate
44
Listele neordonate au o structur foarte asemntoare cu cea a listelor ordonate menionate mai
devreme. Diferena const n tag-ul folosit. n cazul listelor neordonate, tag-ul folosit este <ul>
Avnd n vedere acest lucru, privii urmtorul exemplu:
1 <ul>
2 <li>nigredo</li>
3 <li>albedo</li>
<li>rubedo</li>
5
</ul>
6
Afiarea n browser este urmtoarea:
Imaginea 5.4 - Afiarea unei liste neordonate n browser
Dup cum putem observa, nu mai sunt afiate numerale ordinale, ci bullets (cerculee negre). Nu
toate browser-ele afieaz acelai tip de bullets, n ceea ce privete dimensiunea i poziia lor,
dar, n general, sunt similare. Ca i n cazul listelor ordonate, mai trziu putem schimba sau
elimina cerculeele (utiliznd limbajul CSS).
Deoarece listele ordonate i cele neordonate sunt att de asemntoare, printr-o simpl
modificare a tag-ului listei n cod putem modifica tipul de list dintr-una ordonat ntr-una
neordonat i invers.
Am menionat mai devreme, iar acum repetm c este foarte important modul n care scriem
codul. Trebuie s ne asigurm c am deschis i nchis corect toate tag-urile, dar i c acestea nu
se intersecteaz. Un singur caracter greit poate produce un adevrat haos pe pagina afiat.
Mai exist i aa-numitele liste incluse (embedded), care, spre deosebire de exemplele anterioare,
au mai multe niveluri de elemente. Pentru a clarifica acest lucru, iat un exemplu:
1 <ul>
<li>nigredo
2
<ul>
3 <li>primo</li>
4 <li>secundo</li>
5 </ul>
6 </li>
<li>albedo</li>
8 <li>rubedo</li>
9 </ul>
10
45
11
Iat cum arat acest cod n browser:
Imaginea 5.5 - Afiarea unei liste incluse n browser
Dac privim prezentarea exemplului nostru n browser, putem vedea primul nivel al elementului,
n timp ce un element (nigredo) are propriile elemente incluse. Dac analizm cu atenie codul,
vedem c lista inclus complet este situat n interiorul unui element din list.
n exemplul de mai sus, lista neordonat este inclus tot ntr-o list ul. Dar, de asemenea, putem
include o list ol ntr-o list ul i invers.
Atenie! n timpul includerii unei liste noi, pentru al doilea nivel inserai ntreaga list n
interiorul tag-ului li de nivel 1. Deci, pentru primul nivel inserm nceputul tag-ului <li>,
introducem apoi textul primului nivel, inserm ntreaga list a nivelului 2 i abia apoi scriem
</li> pentru al doilea nivel.
Atributul type pentru listele ul i ol
Simbolul afiat n faa elementelor care alctuiesc lista poate fi definit cu ajutorul regulilor CSS,
dup cum vom vedea mai trziu n acest curs, sau prin atributul HTML type aplicat pe list n
cadrul codului HTML. Am spus deja c HTML5 a eliminat aceast posibilitate i c se
recomand exclusiv folosirea regulilor CSS pentru stilizare, att pentru stilizarea listelor, ct i
pentru stilizarea altor elemente. Mai multe despre varianta CSS vei descoperi n modulul 5. Pe
de alt parte, dac folosim xHTML sau HTML4, putem stiliza lista cu ajutorul, deja
menionatului, atribut type.
Atributul type pentru liste neordonate (ul) poate avea urmtoarele valori:
circle - cerc;
disc - disc;
46
square - ptrat.
Pentru listele ordonate (ol), valorile pot fi:
A - majuscule;
a - minuscule;
I - cifre romane majuscule;
i - cifre romane minuscule.
n cod, o list neordonat poate arta astfel:
1 <ul type=square>
2 <li>mere</li>
3 <li>banane</li>
4 <li>zmeura</li>
</ul>
5
Datorit atributului type cu valoarea square, putem trage concluzia c aceast list va avea
elementele marcate cu ptrate.
V reamintim c acest atribut este eliminat din HTML5 i c trebuie folosite regulile CSS.
Pe de alt parte, dac, totui, inserai o astfel de stilizare HTML, browserul o va interpreta i
o va afia corect chiar i cnd lucrm ntr-un document HTML5, ns pagina nu va fi valid.
Listele de definiie
Listele de definiie se utilizeaz mai rar, dar pot fi foarte utile. Cea mai frecvent utilizare este
pentru paginile de ntrebri frecvente (FAQ - Frequently Asked Questions), deoarece acestea sunt
aproape ntotdeauna sub form de ntrebri i rspunsuri, respectiv n perechi.
Reinei c elementele sunt alctuite ntodeauna din dou pri, reprezentate de tag-urile <dt> i
<dd>, iar lista n sine este marcat cu tag-ul <dl> (definition list).
Iat un exemplu n HTML:
1 <dl>
<dt>nigredo</dt>
2 <dd>a blackening or melanosis</dd>
3 <dt>albedo</dt>
47
4
5 <dd>a whitening or leucosis</dd>
6 <dt>citrinitas</dt>
<dd>a yellowing or xanthosis</dd>
7 <dt>rubedo</dt>
8 <dd>a reddening, purpling, or iosis</dd>
9 </dl>
10
n browser, exemplul arat astfel:
Imaginea 5.6 - Afiarea listei de definiie n browser
Dup cum putem vedea din exemplu, codul pentru aceste liste este destul de diferit de cel al
listelor ordonate i neordonate. Cu toate acestea, regulile de scriere a tag-urilor sunt ntotdeauna
aceleai.
Linkurile
n cadrul acestei lecii, vom nva cum s postm linkurile (hyperlinkurile) n documentele
HTML i cum s le folosim. Vom vedea i ce variante de linkuri exist i n ce scopuri se
utilizeaz. De asemenea, ne vom familiariza cu conceptele de ci relative i absolute.
Noiunea de hyperlink
Linkurile sau hyperlinkurile (engl. hyperlinks) ne permit conectarea i trecerea de la o pagin la

alta, precum i legarea fiierelor, a adreselor de e-mail etc.
Cu toii am utilizat linkuri pe internet, deoarece fr ele ar trebui ca de fiecare dat s introducem
manual adresa pe care vrem s o deschidem. Practic, pe internet fiecare text pe care putem da
clic este un link, indiferent dac este vorba de un site precum Google i Facebook, un site al
clubului de fotbal preferat sau un site al unui magazin local. nsi platforma pe care v aflai n
acest moment folosete linkuri pentru a trece de la o pagin la alta, pentru conectarea la
multimedia etc.
48
URL
Uniform Resource Locator sau, n varianta prescurtat, URL este, prin definiie, un ir de
caractere care definesc referina ctre o anumit resurs pe internet. Cu alte cuvinte, folosind un
URL, crem linkuri ctre elementele de pe internet. Exist URL-uri absolute i relative. Vom
reveni la ele imediat n cele ce urmeaz.
Structura tag-ului link
Pentru a seta linkurile, folosim tag-ul <a>. Acest tag este utilizat foarte des i de aceea i-a fost
acordat un simbol att de scurt. A este prescurtarea de la anchor, care n limba englez
nseamn ancor.
Cnd setm un link, trebuie s cunoatem dou detalii. Primul detaliu este URL-ul, respectiv
locaia la care ne duce linkul (pagin, fiier etc.). Al doilea detaliu este ce vom seta drept
coninut, respectiv textul linkului, pe care utilizatorul va da clic i care i va comunica ceva
despre linkul n sine. Pentru a clarifica acest lucru, iat un exemplu:
Imaginea 6.1 - Exemplu de text legat n browser
Ai ntlnit, probabil, acest exemplu foarte des pe diferite site-uri. Avem un paragraf de text, iar
un cuvnt (sau mai multe) au fost transformate n linkuri. n mod implicit, linkurile sunt albastre
i subliniate, iar cursorul se transform din sgeat ntr-o mnu, atunci cnd punem mouse-ul
deasupra lor.
n acest exemplu, cuvntul here este legat (linked) de URL-ul site-ului Google
(www.google.com). Cuvntul n sine (coninutul linkului) este vizibil utilizatorului, n timp ce
locaia la care duce linkul nu este vizibil, cel puin nu la prima vedere.
Acum c am clarificat cele dou detalii, trebuie s vedem cum putem insera toate acestea n
codul HTML. Vom folosi exemplul de mai sus. Avem un paragraf de text (tag-ul p), n care un
cuvnt este transformat ntr-un link. Am realizat acest lucru deschiznd tag-ul <a> chiar nainte
de cuvntul dat i nchizndu-l imediat. De asemenea, am adugat atributul HTML, numit href,
peste tag-ul <a> i astfel am definit calea (locaia) linkului, respectiv URL-ul. Href este
prescurtarea de la englezescul hypertext reference:
1 <p>Click <a href="http://www.google.com/">here</a> for Google</p>
Deci, n cod vedem tag-urile p i a, precum i atributul href cu URL-ul care duce la site-ul
Google:
49
Imaginea 6.2 - Afiarea unui link (tag-ul a)
n imaginea de mai sus, vedem tag-ul <a> descompus n pri.
Textul, i anume coninutul linkului, este scris cu negru. Dintre toate detaliile prezentate aici, el
este singurul element vizibil utilizatorului. Tag-ul <a>, respectiv tag-ul </a> de nceput i de
final, este scris cu rou la fel ca i celelalte tag-uri cu care ne-am ntlnit. Aici, noutatea este
atributul href, adugat n tag-ul de nceput (putem vedea c semnul mai mare, finalul tag-ului de
nceput, este plasat dup atribut).
Atributul href este alctuit din dou pri: numele atributului, care este ntotdeauna acelai pentru
toate linkurile (A), i locaia (URL), la care duce linkul (B). Desigur, nu trebuie s uitm nici
semnul egal i nici ghilimelele din jurul lui URL.
Exist mai multe tipuri diferite de linkuri. Toate aceste linkuri respect aceeai structur, doar
coninutul atributelor este diferit (URL), respectiv ceea ce este scris ntre ghilimele.
Tipurile de linkuri
Linkurile absolute
Acest tip de linkuri se utilizeaz, de obicei, atunci cnd vrem s conectm pagina noastr cu o
pagin sau un material de pe un alt site.
Linkurile absolute sunt probabil cel mai simplu de introdus, dar se pot dovedi i cele mai
complicate n ceea ce privete o viitoare modificare. Oricum, n cazul acestui tip de link,
important este doar pagina (sau alt element) la care duce linkul, n timp ce pagina pe care se afl
linkul este mai puin important.
De exemplu, dac privim urmtorul cod:
1 <a href="http://www.google.com/">Google</a>
2 <a href="http://www.facebook.com/">Facebook</a>
3 <a href="http://www.twitter.com/">Twitter</a>
putem determina cu uurin, respectnd regulile sus-menionate, c acestea sunt trei linkuri care
duc la trei site-uri: Google, Facebook i Twitter.
50
Ceea ce definete linkurile absolute este faptul c nu conteaz pe ce site sau pagin se afl.
ntotdeauna vor duce ctre site-urile specificate. Acest lucru se datoreaz faptului c am folosit
URL-ul absolut menionat mai devreme. n cazul acestui tip, coninutul URL-ului ncepe
ntotdeauna cu tipul de protocol, urmat de domeniu, apoi cu calea pn la pagina concret (de
exemplu, http://www.link-academy.com/prijava.php). Dac nu definim calea pn la pagin, ci
doar domeniul, se va deschide pagina de start a site-ului.
Linkurile relative
Spre deosebire de linkurile absolute, unde doar destinaia conteaz, la linkurile relative este
foarte important i locaia linkului, adic de unde este direcionat vizitatorul site-ului. Asta se
datoreaz faptului c acest tip de link creeaz o relaie ntre punctul de start i punctul de final.
Linkurile relative sunt, de obicei, utilizate pentru a crea conexiuni n cadrul unui site. Dei acum
linkurile absolute pot prea drept cea mai practic soluie, de fapt e invers. Linkurile relative se
folosesc ntotdeauna pentru linkuri n cadrul site-urilor.
Haidei s vedem urmtorul exemplu de cod:
1 <a href="contact-us.html">Contact info</a>
Dup cum putem observa n exemplu, n cazul linkurilor relative, n atributul href, exist un URL
relativ. Cu alte cuvinte, adugm o cale relativ pn la pagin (sau alt resurs). n acest
exemplu concret, linkul postat va cuta pagina contact.us.html n acelai folder n care se afl
pagina cu linkul, deoarece, aa cum am mai menionat, acest tip de link se refer la loca ia
iniial.
S vedem acum structura unui site:

51
Imaginea 6.3 - O parte din structura unui site web
n imagine, observm c site-ul HTMLcompany conine diferite pagini i foldere, n care este
organizat structura. Principiul folderelor i al fiierelor este cunoscut din mediul sistemului de
operare, aa c trecem peste el. Ceea ce ne intereseaz acum este modul n care stabilim linkurile
relative ntr-o asemenea structur.
52
Linkurile relative se insereaz astfel: mai nti scriem o cale relativ pn la folderul dorit i apoi
adugm numele resursei pe care o conectm la el. Dup cum am menionat deja, dac ambele
pagini se afl n acelai folder, scriem doar numele paginii.
S clarificm printr-un exemplu. Iat cteva situaii posibile:
Situaia 1 - Dac vrem s postm un link pe pagina de start a site-ului din exemplul de mai sus
(marcat cu A), dar care s duc la pagina john-doe.html (B, n exemplu), localizat n folderul
our-team, care, la rndul lui, se afl n folderul about-us, vom scrie urmtoarele:
1 <a href="about-us/our-team/john-doe.html">link</a>
Linkul va deschide mai nti folderul about-us, apoi folderul our-team i n el va cuta
pagina john-doe.html.
Situaia 2 Dac vrem s setm un link pe pagina john-doe.html (B), dar care s duc la pagina
de start a site-ului (A) - deci o situaie opus celei anterioare -, vom scrie:
1 <a href="../../index.html">link</a>
Deoarece pagina care conine linkul se afl n subfoldere i trebuie s o conectm cu o pagin
aflat mai sus, mai nti trebuie s ne ntoarcem, adic s ieim din ambele foldere pn cnd
ajungem la nivelul principal, rdcina site-ului web, i aici trebuie s cutm index.html. Cnd
ieim dintr-un folder, adugm de dou ori semnul punct n loc de numele folderului.
Situaia 3 Dac vrem s setm un link pe pagina john-doe.html (B), care s duc la pagina din
folderul services (C), vom scrie urmtoarele:
1 <a href="../../services/index.html">link</a>
n acest caz, avem o combinaie puin mai complicat dect cele dou situaii anterioare,
deoarece mai nti trebuie s ieim din ambele foldere n care se afl pagina la care ne conectm
i abia apoi putem deschide folderul services, n care s cutm pagina index.html.
Dac setm un link la un folder, n loc s-l setm la pagina site-ului, n el se va deschide pagina
implicit (index.html), dac exist. De exemplu, ../../services/ va da acelai rezultat ca
i ../../services/index.html. Sau, n cazul linkurilor absolute, www.sample.com/about/ va da
acelai rezultat ca www.sample.com/about/index.html.
Not:
Linkurile din aceast lecie, exemplele precum sample.com i mysite.com, sunt doar
exemple care nu direcioneaz ctre site-uri adevrate, ci se folosesc doar pentru prezentarea
modului de construire a linkurilor, iar acestea trebuie tratate ca atare.
53
nelegerea corect a modului de funcionare a linkurilor relative este foarte important n

procesul de creare a unui site. De asemenea, este foarte important ca toate resursele (pagini,
fiiere etc.) necesare unui site s fie ntotdeauna mpreun. De exemplu, creai un site pe
calculatorul dvs. (la nivel local). n el, vei conecta cu linkuri relative toate paginile i fiierele
necesare. Cnd folosim linkurile relative, nu trebuie s postm site-ul pe internet de la nceput,
deoarece se vor pstra legturile dintre toate elementele.
Lund n considerare toate acestea, putem concluziona urmtoarele: Toate fiierele relevante
pentru site trebuie s se afle n cadrul folderului principal/rdcin (root) a site-ului. Toate
fiierele inutile, care nu sunt n niciun fel asociate cu site-ul, nu ar trebui s se afle n folderul
root. Cnd mutm site-ul pe un alt calculator, trebuie s l postm pe server etc., trebuie s
copiem ntregul folder root, pentru a evita apariia erorilor.
Poate v ntrebai de ce nu folosim ntotdeauna linkurile absolute. Exist mai multe motive, dar
cel mai important este uurina de a face modificri. Astzi, instrumentele moderne de lucru cu
HTML i cu documente similare (cum ar fi Adobe Dreamweaver) urmeaz n mod automat toate
linkurile din cadrul unui site i corecteaz/editeaz tot ce e nevoie, de obicei n cazurile n care
schimbm numele fiierelor, structura lor etc. Totui, principalul avantaj al linkurilor relative
pentru toate linkurile din cadrul unui site este c linkurile relative creeaz linkuri ntr-un cerc
nchis al site-ului i acestea nu vor fi deteriorate i nici influenate chiar i atunci cnd site-ul, ca
un ntreg, este mutat ntr-un alt mediu.
De exemplu, dac am fi creat un site pe calculator i dac am fi mutat toate fiierele n folderul
D:/Sites/First-site, n timp ce n cadrul site-ului avem 2 pagini: index.html i info.html, linkul
setat ca index.html, care ar fi dus la info.html, ar fi avut urmtorul aspect:
Link absolut: <a href=D:/Sites/First-site/info.html>link</a>
Link relativ: <a href=info.html>link</a>
Este clar c fiecare link absolut, imediat dup postarea site-ului pe server, ar fi trebuit s se
modifice (deoarece pe server nu exist partiia D a harddiskului), n timp ce linkul relativ ar fi
funcionat normal, fr modificri. n acest context, imaginai-v c avei mai multe sute sau mii
de linkuri pe site i cte probleme ar fi aprut dac s-ar fi utilizat linkurile absolute.
Linkurile relative n raport cu folderul root al site-ului
Exist i linkuri care funcioneaz precum cele relative, dar direcioneaz browser-ele s nceap
cutarea unei ci, ncepnd de la nivelul root al site-ului. Pentru a scrie o astfel de cale, vom
aduga un forward slash n faa primului folder sau n faa numelui fiierului, ca n urmtorul
exemplu:
1 <a href="/index.html">link</a>
54
Observai c am adugat semnul / (forward slash) imediat dup deschiderea atributului href.
Aceste linkuri nu funcioneaz fr servere configurate corect.
Atributul Target
Am menionat deja c tag-ul <a> trebuie s aib atributul href, deoarece fr el, practic, este
inutil. Exist i un atribut target opional, care definete modul n care a fost activat linkul i care
poate avea una dintre urmtoarele valori:
_blank ncarc documentul legat ntr-o nou fereastr, n timp ce n trecut se foloseau
i urmtoarele valori:
_parent ncarc documentul legat ntr-un element printe al paginii, n care se

afl linkul. n cazul n care linkul nu se afl pe pagina inclus, acesta se ncarc n
toat fereastra;
_self ncarc documentul legat n aceeai fereastr n care se afl i linkul. Dac
omitem atributul target, aceast valoare va fi considerat implicit;
_top ncarc n toat fereastra, ignornd cadrele (frames).
Acest atribut este opional, dar se folosete de cele mai multe ori pentru conectarea la alte site-uri
pe baza valorii _ blank. Astfel, se deschide un nou tab n browser, iar cel curent rmne i el
deschis. Exemple:
1 <a href="second.html" target="_blank">link</a>

2 <a href="http://www.mysite.com/" target="_blank">link</a>
Linkurile ctre fiiere
Linkurile ctre fiiere se insereaz n mod identic ca i cele ctre paginile HTML din exemplele
anterioare. Deci, un link ctre un fiier example.pdf arat astfel:
1 <a href="example.pdf">link</a>
2 <a href="http://www.mysite.com/example.pdf">link</a><br><br>
Linkurile de e-mail
Exist i linkuri de e-mail care direcioneaz spre adrese de e-mail. Este interesant c, n loc s
deschid o pagin, ele deschid programul de e-mail implicit al vizitatorilor paginii. Dac acesta
este, de exemplu, Microsoft Outlook, linkul va porni clientul de e-mail menionat, va deschide
fereastra de dialog pentru noul e-mail i va introduce adresa pe care am specificat-o n cmpul to:
. Totui, pot aprea probleme n cazul n care vizitatorul nu are setat un program de e-mail.
55
Linkurile de e-mail se insereaz astfel:
1 <a href="mailto:office@example.com">email link</a>
Observm c singura diferen n raport cu linkurile anterioare este cuvntul-cheie mailto , urmat
de respectiva adres de e-mail.
Dac vrem, putem predefini i titlul (subject) i/sau coninutul (body) e-mailului. Facem acest
lucru adugnd semnul ? , urmat de cuvntul-cheie subject sau body, semnul egal, precum i
textul propriu-zis. Dac adugm i un alt parametru, atunci n loc de semnul ? punem &. Iat un
exemplu:
1<a href="mailto:office@example.com?subject=Title&body=Message">email link</a>
Aceste detalii nu nseamn c utilizatorul nu va putea s schimbe mai trziu textul predefinit, ci
doar reprezint punctul de plecare pentru e-mail.
Totui, astzi linkurile de e-mail se folosesc tot mai rar, fiindc pot crea confuzii pentru
utilizatori i astfel i pierd utilitatea. Linkul se insereaz, n general, ca un simplu text sau textul
linkului de e-mail se transform ntr-o imagine (pentru ca utilizatorii/programele maliioase s nu
poat copia linkul i s-l foloseasc pentru spam).
Named anchors (Ancorele denumite)
Named anchors se folosesc atunci cnd vrem ca linkul s direcioneze spre o parte exact a
paginii. n anumite cazuri, o pagin poate avea un coninut care necesit mult derularea ( scroll)
pe vertical pentru a gsi un anumit detaliu.
Putem plasa named anchors oriunde pe pagin i apoi setm un link la ele, la seciunea
respectiv de pe pagin.
De exemplu, Wikipedia (www.wikipedia.org) utilizeaz named anchors pentru a conecta anumite

intrri de text cu referine aflate n partea de jos a paginii. Pentru fiecare referin este setat un
named anchor, apoi sunt legate de intrrile n text.
56
Imaginea 6.4 - Prezentarea unui Named anchor n Wikipedia
Pentru a posta ancora, introducem tag-ul <a>, dar, deoarece ancora nu este un link, nu duce
nicieri, ci doar indic locul respectiv, nu are un atribut href i nici coninut. De exemplu:
1 <a name="something"></a>
Aceasta este doar o parte a procesului. Am setat un Named anchor care are un nume i nu este
vizibil n browser. Acum, ne rmne s legm aceast ancor de aceeai pagin sau de o alt
pagin. De exemplu, dac vrem s legm o ancor de aceeai pagin, vom aduga:
1 <a href="#something">link</a>
Pe de alt parte, dac vrem s ne legm de ancora de pe o alt pagin, vom aduga:
1 <a href="index.html#something">link</a>
Deci, un link clasic cu adugarea unui Named anchor precedat de semnul #.
Imaginile
Imaginile reprezint o parte indispensabil a site-urilor web moderne. Se spune c o imagine
spune mai mult dect o mie de cuvinte, lucru adevrat cel puin n cazul designului web. Era site-
urilor simple a apus de mult.
nainte de a explica modul de introducere i setare a imaginilor pe paginile noastre HTML,

trebuie s facem o pauz i s clarificm cteva detalii. Fiecare imagine pe care vrem s o
postm trebuie s fie pregtit pentru internet. Practica de a posta pe paginile noastre fotografii
direct dintr-un aparat digital sau de pe internet nu este bun deloc.
57
Imaginile trebuie s aib formatul adecvat
Exist doar trei formate de imagini pe care le putem utiliza astzi pe paginile web. Acestea sunt
JPG, GIF i PNG.
JPG (Joint Photographic Experts Group) folosete extensia .jpg sau .jpeg. Acest format nu
suport nici transparena (engl. Transparency), nici animaia, dar este excelent pentru
comprimarea fotografiilor, deoarece suport milioane de culori. n programele de procesare a
imaginilor, putem alege nivelul tolerat de degradare a calitii n schimbul unei dimensiuni mai
mici a fiierului. De fiecare dat cnd salvm, se pierd anumite informaii i de aceea este
recomandat s salvm separat imaginile originalele.
GIF (Graphics Interchange Format) este limitat la 256 de culori. GIF-urile sunt excelente pentru
desene tehnice i pentru imagini mici (iconie, thumbnails etc). GIF-urile pot memora 2, 4, 16
pn la 256 de culori, aadar putem salva mult din dimensiune n momentul n care crem
fiierele. Fiierele GIF se comprim pe orizontal, respectiv, dac pixelul unei imagini GIF are o
variaie mic de culori n direcia orizontal, este mult mai uor de redimensionat. Formatul GIF
suport transparena (cu multe restricii) i animaia, ceea ce nseamn c putem crea efectul de
micare etc. n fazele iniiale ale dezvoltrii animaiei pe internet, animaiile GIF se utilizau
frecvent, chiar i atunci cnd nu erau absolut necesare. Astzi, se folosesc tot mai puin.
PNG (Portable Network Graphic) este un format mai nou suportat de ctre toate browser-
ele actuale i combin funcionalitile formatelor GIF i JPEG. Acest format raster pentru
imagini folosete comprimarea fr pierderi. Utilizeaz RGB i sistemul de culori n tonurile gri.
Exist dou tipuri de formate:
PNG-8, care conine informaia pe 8 bii despre culori (asemntor cu GIF);
PNG-24, care conine informaia pe 24 de bii despre culori (combin cele mai bune
aspecte ale formatelor GIF i JPG).
PNG-8 nu suport animaia, dar suport transparena mult mai bine dect GIF, n timp ce PNG-
24 suport o transparen i mai bun i ofer o calitate a imaginii mai bun dect JPG. Totui,
fiierele PNG sunt mult mai mari, iar browser-ele mai vechi nu se descurc prea bine cu ele (de
exemplu, Internet Explorer 6 nu suport PNG transparent).
Dac rezumm toate cele trei tipuri, ajungem la urmtoarele concluzii:
JPG este cel mai bun pentru fotografii i imagini cu multe detalii;
GIF este cel mai bun pentru imagini mici i iconie;

58
PNG combin cele mai bune aspecte ale formatelor GIF i JPG, dar n detrimentul
dimensiunii fiierelor. Nu este suportat de browser-ele vechi, dei ncet, ncet acest lucru
devine irelevant, deoarece Internet Explorer 6 se folosete tot mai puin.
Imaginea trebuie s aib rezoluia i dimensiunile corespunztoare
Toate site-urile se afieaz pe monitoarele calculatoarelor i ale altor dispozitive mobile. Afiarea
pe monitoare este compus din mici puncte, numite pixeli (engl. pixels). Fiecare imagine este, de
asemenea, compus din pixeli, iar termenul de rezoluie indic numrul de pixeli (puncte) per
inch (dots per inch - dpi). Rezoluia standard n care majoritatea monitoarelor afieaz site-urile
este de 72 dpi, aa c imaginile ar trebui salvate ntotdeauna la aceast rezoluie.
n afar de rezoluie, trebuie s avem grij i de dimensiuni, adic de l imea (engl. Width) i
nlimea (engl. Height) imaginilor. Dimensiunile trebuie s fie aceleai n care se va afia i
imaginea pe pagin.
Dac dimensiunile i/sau rezoluia sunt foarte diferite n imagine fa de ceea ce apare pe pagin,
va avea loc o degradare a imaginii i o afiare de slab calitate. De aceea, este important s
reinem c imaginile trebuie mai nti pregtite n Adobe Photoshop sau ntr-un instrument
similar i abia apoi importate n documentul HTML.
Pentru a utiliza o imagine, trebuie s avem dreptul
Dei acest aspect nu ine de partea tehnic i nu este strict legat de subiectul acestui curs, este,
totui, un aspect foarte important, adesea neglijat. Fiecare imagine este supus legii drepturilor
de autor/copyright i are ntotdeauna un autor. Obligatoriu, trebuie s verificai n ce condiii i
sub ce licen a fost publicat acea lucrare i dac avei dreptul s o folosii. O gre eal frecvent
a nceptorilor este s caute pe Google images i s copieze imaginile direct, ceea ce, n
majoritatea cazurilor, reprezint o nclcare a drepturilor unui anumit autor.
Deci, ntotdeauna verificai licena imaginii i dac v este permis s o utilizai 1. Pe de alt parte,
exist i site-uri specializate de distribuire a imaginilor, cum ar fi iStockPhoto, Fotolia,
gettyimages, sxc.hu etc. Pentru majoritatea imaginilor, trebuie s plti i, dar exist i imagini
gratuite dac avei un buget limitat.
Organizarea structurii fiierelor
Spre deosebire de multe fiiere utilizate n prezent, paginile HTML nu salveaz fiierele cu
imagini direct n fiierul HTML. De exemplu, dac n Microsoft Word introducem un anumit text
i cteva imagini, cnd le salvm obinem un fiier doc. Dac trimitem acel fiier unui prieten i
el l deschide pe calculatorul su, textul i imaginile vor fi acolo, deci se ncarc din fi ier. n
schimb, dac introducem text i cteva imagini ntr-un document HTML, dup ce l salvm
obinem un fiier HTML, n care imaginile nu sunt ncorporate. Dac am trimite acum fiierul
59
HTML unui prieten, cnd l va deschide pe calculatorul lui va vedea numai textul i un spa iu
gol, fr imagini. Fiierul HTML a salvat poziiile imaginilor, dimensiunile lor i a ncercat s le
afieze, dar nu le-a gsit deoarece nu fac parte din fiierul HTML i nu au fost trimise niciodat.
De aceea, este foarte important s organizm structura site-ului ntr-un mod corespunztor. n
leciile precedente, am menionat folderul root (principal) al site-ului. V recomandm ca n
cadrul lui s creai un subfolder numit images sau un nume asemntor i s stocai toate
imaginile acolo. Dac site-ul este mare, cu multe materiale diferite, putei s ramifica i folderul
n continuare.
Ca i n cazul linkurilor despre care am vorbit mai devreme, la fel i imaginile pot fi apelate
pentru a fi afiate fie printr-o cale absolut, fie printr-o cale relativ, dar imaginile ar trebui
postate ntotdeauna prin intermediul cilor relative.
Dac inserm toate imaginile n cadrul folderului root al site-ului i le apelm prin intermediul
cilor relative, nicio imagine nu poate s se piard din greeal atunci cnd o trimitem sau o
postm pe site. Dup cum am mai menionat, n cazul n care copiem ntotdeauna ntregul folder
root i dat fiind c sunt cile relative, totul va fi n regul.
Adugarea imaginilor
Pentru a aduga imagini pe o pagin HTML, folosim tag-ul <img>. Acest tag este cu
autonchidere, respectiv nu are nici nceput i nici sfrit, dar trebuie s con in urmtoarele dou
atribute:
Src indic URL-ul din care se apeleaz imaginea (imaginea este ntotdeauna n afara
fiierului HTML);
Alt definete textul care va fi afiat vizitatorului site-ului dac, indiferent de motiv,
imaginea nu este afiat. n acest caz, textul menionat va aprea n locul prevzut pentru
imagine. Totui, acesta nu ar trebui s descrie imaginea literal, ci doar s dea nite
informaii legate de scopul ei. De exemplu, textul alt al imaginii de avertizare nu ar trebui
s fie: Triunghi galben cu cadru negru i semn de exclamare, ci Avertizare! sau ceva
asemntor. Chiar i motoarele de cutare precum Google folosesc pentru indexare textul
alt. Conform standardelor W3C, textul alt este obligatoriu pe o imagine.
Imaginea 7.1 - Reprezentarea tag-ului img n codul HTML cu atributele de baz

60
Tag-ul din exemplu va apela imaginea image.jpg (A) din acelai folder n care se afl i fiierul
HTML n sine. Dac imaginea nu apare, n caseta goal va fi scris Alt text (B).
Atenie la faptul c tag-urile cu autonchidere se scriu diferit n variantele HTML5 i

xHTML, aadar difer i scrierea imaginilor, respectiv a tag-urilor img.
n versiunea HTML5, scriem:
<img src=logo.png alt=logo>
n timp ce n varianta xHTML scriem urmtoarele:
<img src=logo.png alt=logo />
n varianta xHTML, trebuie s avem un spaiu gol i o linie oblic n dreapta nainte de
semnul mai mare.
Varianta HTML5 ar fi acceptat ambele moduri de scriere, n timp ce o situaie invers nu ar fi

fost posibil.
Atributele opionale ale tag-ului img:
Title putem folosi acest atribut dac vrem s introducem informaii suplimentare despre
o imagine. Majoritatea browser-elor moderne afieaz textul ca un tooltip atunci cnd
stm cu mouse-ul deasupra imaginii.
Width i Height limea i nlimea imaginii n pixeli. Dac nu sunt setate aceste
atribute, browser-ul va ncrca valorile din fiierul imaginii. n cazul n care sunt
introduse, atributele ar trebui s reflecte starea real, respectiv dac avem o imagine
logo.png cu nlimea de 120 px (pixeli) i limea de 300 px, tag-ul img ar putea arta
astfel n codul HTML:
<img src=logo.png alt=Nume companie width=300 height=120>
ntr-un tag HTML, ordinea atributelor nu este important. Acest lucru se aplic i la img, dar i la
alte tag-uri.
Align s-a utilizat pentru poziionarea imaginilor n raport cu elementele din jur. n
propoziia precedent, am folosit timpul trecut deoarece acest atribut nu este recomandat
n HTML5, dar i n versiunile mai vechi ale limbajului HTML/xHTML. n locul lui v
recomandm s utilizai regulile CSS de poziionare. Deoarece imaginile sunt elemente
61
inline (vom aborda acest subiect n curs), dac le plasm n interiorul unui paragraf, se
vor comporta drept caractere ale textului conform setrilor implicite. Valorile standard ale
acestui atribut sunt bottom, left, middle, right i top i alte cteva. Comportamentul lor se
poate observa n imaginea de mai jos:
Imaginea 7.2 - Atributul align
Tabelele
Structura tabelului
62
Exist mai multe tipuri de date care sunt mai uor de reprezentat sub form de tabel dect sub
form de text. De exemplu, rezultatele sportive, rapoartele financiare, orarele i multe alte
informaii de pe site-uri sunt mai uor de reprezentat prin tabele.
Tabelele trebuie utilizate pentru structurarea tabelar a datelor i nu trebuie folosite greit n
vederea organizrii elementelor, indiferent c este vorba de o pagin ntreag sau doar de o parte
a acesteia.
Dup cum deja tim c fiecare parte a unei pagini HTML este, n esen, un text structurat ntr-un
anumit mod, la fel i tabelele respect anumite reguli stricte.
n limbajul HTML, tabelele sunt alctuite din celule, pe care le marcm cu td (table data), i din
rnduri, pe care le marcm cu tr (table row) - acestea sunt coninute n cadrul tag-ului table, care
nconjoar totul.
Dac suntei obinuii s lucrai n Microsoft Excel sau ntr-un program similar, v vei ntreba
poate unde se afl coloanele i cum sunt marcate. Totui, n limbajul HTML nu exist termenul
de coloan, ci toate celulele (td) sunt aranjate n ordine i separate pe rnduri (tr). Observai
imaginea de mai jos pentru a nelege mai bine:
Imaginea 8.1 - Afiarea structurii tabelului
Aceasta este reprezentarea unui tabel cu trei rnduri i patru coloane, n total 12 celule. n
63
imagine, este marcat i ordinea n care sunt aranjate celulele. Cnd scriem tabele n limbajul
HTML, trebuie s respectm urmtorii pai:
1. Deschidem tag-ul table;
2. Deschidem rndul tabelului (tr);
3. Scriem toate celulele (td), n acest caz - patru;
4. nchidem rndul actual (tr);
5. Deschidem urmtorul rnd (tr);
6. Scriem toate celulele (td).
i aa mai departe, pn cnd trecem prin toate rndurile i ajungem la sfritul tabelului, unde
nchidem tag-ul table.
n cod, un astfel de tabel ar arta astfel:
1
2
<table>
3 <tr>
4 <td>1</td>
5 <td>2</td>
6 <td>3</td>
7 <td>4</td>
</tr>
8 <tr>
9 <td>5</td>
10 <td>6</td>
11 <td>7</td>
<td>8</td>
12
</tr>
13 <tr>
14 <td>9</td>
15 <td>10</td>
16 <td>11</td>
<td>12</td>
17 </tr>
18 </table>
19
20
Dac analizm acest cod, observm paii menionai mai devreme. Mai nti, am deschis tag-
ul table i imediat dup el am deschis rndul tabelului (tag-ul tr). n cadrul lui, se afl celulele n
tag-urile lor (td). Apoi, nchidem primul rnd i ncepem urmtorul. Dup el scriem al treilea
rnd, urmat de sfritul tabelului. Dac trebuie s lsm o celul goal (fr
coninut), totui trebuie s scriem tag-ul td.
64
n acest caz, codul creeaz un tabel foarte simplu, fr niciun fel de detalii vizuale. Nici tabelul
n sine nu se vede, ci doar elementele din cadrul lui.
Tabelele i elementele acestora se pot stiliza prin limbajul CSS, care este, cu siguran, cea mai
bun variant, iar n HTML5 aceasta este singura variant valid. n trecut, n versiunea xHTML
puteam s folosim i atribute n tabele, rnduri, dar i n celule.
Dei acum sunt depite, fiind nlocuite de CSS, urmtoarele atribute pot fi postate pentru un
tabel:
Atribut Valoare Descriere
align left Alinierea tabelului

center
right
bgcolor rgb(x,x,x) Culoarea fundalului
#xxxxxx
numele culorii
border pixeli Grosimea liniei tabelului
cellpadding pixeli Spaiul dintre coninutul celulelor i marginile lor
cellspacing pixeli Spaiul dintre celule
frame void Definete marginile exterioare vizibile.

above
below
hsides
lhs
rhs
vsides
box
65
border
rules none Definete marginile interioare vizibile.

groups
rows
cols
all
summary text Text care descrie, rezum coninutul tabelului.
width pixeli Limea tabelului

%
Tabelul 8.1
Menionm, nc o dat, c aceste atribute sunt date doar informativ. Stilizarea tabelului o vom
face prin CSS.
Celulele titlurilor
Aa cum exist tag-uri p pentru paragrafe, exist i tag-uri h pentru titluri i, n mod analog, pe
lng celulele obinuite, exist i celule pentru titluri. n loc de td, tag-ul lor este th (table
heading).
Privii exemplul:
1 <table width="600" border="1">

<tr>
2
<th>*</th>
3 <th>monday</th>
4 <th>tuesday</th>
5 <th>wednesday</th>
6 <th>thursday</th>
<th>friday</th>
7 </tr>
8 <tr>
9 <th>morning</th>
10 <td> </td>
11 <td> </td>
<td> </td>
12 <td> </td>
13
66
14
15
16 <td> </td>
</tr>
17 <tr>
18 <th>evening</th>
19 <td> </td>
20 <td> </td>
21 <td> </td>
<td> </td>
22 <td> </td>
23 </tr>
24 </table>
25
26
Celulele th sunt plasate pe primul rnd i n prima coloan. Atenie la faptul c n tag-ul
table sunt adugate atribute pentru limea (600px) i pentru grosimea liniilor marginilor/border
(1px). ntr-un browser, acesta ar arta astfel:
Imaginea 8.2 - Afiarea tabelului n browser
Dac mai devreme am spus c trebuie evitate atributele n codul din HTML5, de ce le-am
inserat totui? Le-am inserat pentru a putea s afim tabelul, deoarece nc nu am abordat
stilizarea CSS. Pe de alt parte, dac avei nevoie de aceste atribute, le putei insera n
HTML5. Browser-ul le va interpreta i afia n mod normal, deoarece i sunt cunoscute din
versiunile anterioare ale lui HTML, ns codul nu va fi unul valid.
Atributele td
Unirea pe orizontal
Dac trebuie s unim anumite celule ale tabelului pe orizontal, pe prima celul care trebuie
unit vom pune atributul colspan, n care definim peste cte celule trebuie s se extind.
Imaginai-v c celulele rmn ntotdeauna separate, iar celula unit se extinde peste cteva
astfel de celule. De aceea, trebuie s numrm cte celule vor fi acoperite i s introducem acest
numr ca valoare a atributului colspan. De asemenea, eliminm atributele td (sau th), care sunt n
plus.
67
De exemplu, privii acest cod:
1
2 <table>
3 <tr>
<td>1</td>
4 <td>2</td>
5 <td>3</td>
6 </tr>
7 <tr>
<td>4</td>
8
<td>5</td>
9 <td>6</td>
10 </tr>
11 </table>
12
care va crea urmtorul tabel:
1 2 3
4 5 6
ns, dac vrem s unim celulele 4 i 5, atunci trebuie s adugm atributul colspan cu valoarea 2
(deoarece unim dou celule) i, de asemenea, trebuie s eliminm ntregul tag td al celulei 5.
Codul va arta astfel:
1
2 <table>
<tr>
3 <td>1</td>
4 <td>2</td>
5 <td>3</td>
6 </tr>
7 <tr>
<td colspan="2">4</td>
8 <td>6</td>
9 </tr>
10 </table><span style="font-size: 14px;"> </span>
11
1 2 3
4 6
Astfel, am specificat celulei 4 s acopere i celula 5 i, practic, arat ca dou tag-uri td. Fiecare
rnd dintr-un anumit tabel (tr) trebuie s aib acelai numr de tag-uri td (sau th), excepie
fcnd cazul n care utilizm colspan, ns totalul trebuie s fie exact. Coninutul tag-ului td care
dispare trebuie transferat manual n celelalte tag-uri.
68
Unirea pe vertical
Dac vrem s unim celulele pe vertical, utilizm o tehnic similar celei prin care realizm
unirea pe orizontal, numai c n acest caz atributul este rowspan, n loc de colspan.
Privii exemplul:
1
2 <table>
3 <tr>
<td>1</td>
4 <td>2</td>
5 <td>3</td>
6 </tr>
7 <tr>
<td>4</td>
8
<td>5</td>
9 <td>6</td>
10 </tr>
11 </table>
12
Acest cod afieaz urmtorul tabel:
1 2 3
4 5 6
Dac schimbm codul astfel:
1
2 <table>
<tr>
3 <td rowspan="2">1</td>
4 <td>2</td>
5 <td>3</td>
6 </tr>
7 <tr>
<td>5</td>
8 <td>6</td>
9 </tr>
10 </table>
11
obinem urmtorul tabel:
2 3
1
5 6
69
Cele mai frecvente atribute din celule (xHTML)
Cele mai frecvente atribute care apar n celule sunt align, respectiv valign. Cu ajutorul lor, putem
aduga alinierea pe orizontal (align), respectiv alinierea pe vertical (valign). De exemplu,
putem scrie:
1 ...
2 <tr>
3 <td align="left" valign="top"></td>
...
4
Align poate avea valorile left, right i center. Dup cum ne spun i denumirile lor, se aliniaz
coninutul la stnga, la dreapta sau n centrul/mijlocul celulei.
Valign poate avea valorile: top, middle, bottom i baseline. Denumirile lor ne spun unde va fi
plasat coninutul n cadrul celulei. Top plaseaz coninutul n partea de sus a celulei, middle n
mijloc, n timp ce bottom i baseline au o menire aproape similar. n ce const diferena? n
faptul c bottom plaseaz ntregul coninut n partea de jos a celulei, n timp ce baseline plaseaz
aceeai linie de baz imaginar, iar coninutul este aezat pe ea. Baseline poate fi util dac avem
mai multe celule cu fonturi de diferite dimensiuni. Mai jos, avem urmtoarele imagini care
ilustreaz cele explicate:
Imaginea 8.3 - Valoarea Bottom a atributului valign
Imaginea 8.4 - Valoarea Baseline a atributului valign
Alte atribute
Exist i alte atribute care pot fi utilizate n tag-urile (celulele) td, ns, practic, acestea sunt
depite. n HTML5, sunt chiar interzise. Totui, tot ce fceam cu ele n trecut putem face astzi
cu ajutorul regulilor CSS ntr-un mod mult mai simplu. Toate atributele tag-urilor td se gsesc la
urmtorul link: http://www.w3schools.com/tags/tag_td.asp
Avem o situaie similar i n cazul atributelor de pe rndurile tabelului (tr). Astzi, nu se mai
utilizeaz. Mai multe informaii gsim la urmtorul link:
http://www.w3schools.com/tags/tag_td.asp
70
Tabelele lungi
Dac avem nevoie de tabele foarte lungi sau complicate, putem ramifica prile head, body i
footer ale tabelului. Termenii ne reamintesc de anumite pri ale documentului HTML, ns
similitudinea nu este foarte mare.
Tag-ul <thead> se folosete pentru a marca antetele tabelului. Se introduc rndurile (tr), care
alctuiesc antetul. Acest tag merge la nceput.
Tag-ul <tbody> se folosete pentru a introduce rndurile i celulele obinuite.
Tag-ul <tfoot> se folosete pentru a marca partea de jos a tabelului. Se introduc rndurile i
celulele care merg la sfrit.
n general, browser-ele trateaz toate cele trei pri, respectiv celulele din cadrul lor, n acelai
mod. Totui, separarea lor permite o stilizare diferit cu CSS. Pe lng asta, se poate ntmpla
uneori ca soluiile CMS s separe partea head i footer, pentru a le afia ntotdeauna. De
asemenea, la tiprire, majoritatea browser-elor repet head (antetul) i footer (subsolul) pe
fiecare pagin pentru o mai mare claritate.
Iat cum arat n cod:
1 <table>
<thead>
2
<tr>
3 <td>celula prii head</td>
4 </tr>
5 <tr>
6 <td>celula prii head</td>
</tr>
7 </thead>
8 <tfoot>
9 <tr>
10 <td>celula prii footer</td>
11 </tr>
<tr>
12 <td>celula prii footer</td>
13 </tr>
14 </tfoot>
15 <tbody>
<tr>
16 <td>celula prii body</td>
17 </tr>
18 <tr>
19 <td>celula prii body</td>
20 </tr>
</tbody>
21 </table><span style="font-size: 14px;"> </span>
22
71
23
24
25
26
Atenie la ordinea tag-urilor! Ordinea este ntotdeauna urmtoarea:
1. thead
2. tfoot
3. tbody
Dei poate prea mai logic ca mai nti s inserm coninutul (tbody) i apoi partea de jos a
tabelului (tfoot), nu este cazul. Mai nti, se insereaz antetul, apoi partea de jos i abia la sfrit
coninutul.
Indiferent de ordinea din cod, n reprezentarea din browser subsolul/footerul (tfoot) se va gsi
ntotdeauna n partea de jos a paginii (dup tbody).
Prin urmare, este suficient s punem thead, tbody, respectiv tfoot n jurul tuturor rndurilor pe
care vrem s le separm. De reinut este c trebuie s cuprindem rndul/rnduri ntregi, adic
mare atenie la suprapunerea tag-urilor. De asemenea, dac introducem aceste tag-uri
suplimentare ale tabelului, trebuie s includem i toate rndurile (s nu rmn niciunul n
exterior).
Formularele
n cadrul acestei lecii, ne vom familiariza cu formularele HTML i vom face o comparaie ntre
formularele offline i cele online.
Noiunea de formulare HTML
Formularele (engl. forms) reprezint un instrument excelent pentru colectarea informaiilor de la

vizitatorii unui site web. Formularele permit utilizatorilor s trimit comentarii i ntrebri, s
caute o anumit informaie, s se nscrie pentru newsletter, s completeze aplicaia online sau s
introduc informaii care nlesnesc cumprarea unui produs. n cadrul acestei lecii, ne vom
familiariza cu formularele i cu modul de introducere a acestora n pagin.
Iniial, termenul de formular era utilizat pentru documentul tiprit, care coninea cmpuri (spaii
goale) pentru introducerea datelor. Internetul a preluat acest concept i a modificat formularele ca
s funcioneze n mod digital.
72
Imaginea 9.1 - Exemplu de formulare clasice

Sursa: http://en.wikipedia.org/wiki/File:Mantelb%C3%B6gen.JPG
Probabil cel mai cunoscut formular de pe web este cel de pe pagina de start a lui Google:
Imaginea 9.2 - Formularul de pe pagina de start a lui Google

73
Formularul din imagine este cunoscut tuturor, dei este foarte simplu. Cu ajutorul acestui
formular, introducem textul (cuvintele de cutare) ntr-un cmp text input, iar apoi, dnd clic pe
butonul submit (etichetat ca Google Search), transmitem datele.
Bazele formularelor
Formularele n sine nu au nicio funcionalitate, ci reprezint doar un tip de ablon pentru

colectarea informaiilor. Cnd utilizatorul completeaz un formular de pe un site, datele colectate
sunt transmise pn la script-urile de pe o alt pagin, care va finaliza activitatea de colectare a
datelor.
Imaginea 9.3 - Conceptul de funcionare a formularului
S exemplificm toate acestea. Pagina contact.html conine un formular n care utilizatorul

introduce datele i un mesaj. Dup ce utilizatorul trimite formularul, acesta apeleaz pagina
contact_send.php, pe care se afl un script, care proceseaz datele colectate i le trimite prin e-
mail la adresa indicat. Acesta este doar un exemplu, script-ul poate trimite e-mailuri, poate
scrie/citi datele din baz sau poate face alte lucruri definite.
n acest exemplu, nu ne vom ocupa cu script-uri concrete. n general, acestea se scriu i

insereaz prin limbajul PHP, care nu intr n tematica acestui curs, ci n cea a programrii
web. Noi ne vom ocupa de partea de HTML i CSS, care ne vor ajuta s inserm i s
stilizm formulare.
Pe de alt parte, chiar dac nu cunoatei limbajul PHP, pe internet se pot gsi diferite
74
formulare PHP finalizate deja, care trebuie doar ncorporate n HTML.
Tag-ul form
Baza formularului web este tag-ul form. Acesta este doar un simplu element HTML cu atribute i
subelemente caracteristice. Astfel, n el introducem tot ceea ce vrem s trimitem serverului prin
formularul respectiv. Fiecare formular (tag form) recunoate evenimentul submit. Acesta
activeaz formularul i transfer valorile acestuia ctre server.
S o lum de la nceput. Tag-ul se scrie foarte simplu:
1 <form></form>
Totui, acest lucru nu este suficient pentru nceput. Fiecare formular trebuie s aib urmtoarele
atribute:
Action;
Method;
ID.
Putem aduga name, enctype i target. Dei atributele menionate nu sunt obligatorii n HTML5
(Action este obligatoriu n versiunile anterioare), fr acestea formularul nu ar fi avut sens.
Action
Fiecare formular conine atributul action care indic script-urile la care vor fi transferate datele.
n exemplul de mai sus, era vorba de pagina contact_send.php. Observm c pagina-int este de
tip .php. Acest lucru este frecvent (.php, .asp, .jsp) deoarece procesarea parametrilor de server se
poate efectua doar din script-urile de pe server. n cazul n care nu vrem s transmitem parametri
ctre server, nu avem nevoie de formular.
Dac omitem acest atribut, browser-ul va subnelege c aceeai pagin care conine formularul
va procesa i datele.
Method
Atributul method definete modul n care vor fi transmise datele. Exist dou opiuni, i anume:
75
metoda GET - datele din formular sunt trimise serverului printr-un URL. Informaiile
transmise n acest mod sunt transparente i supuse atacurilor din partea hackerilor.
Deoarece un URL poate avea cel mult 8 192 de caractere, aceast metod nu este
adecvat pentru formulare mai lungi. De asemenea, putem ajunge la transliteraie sau
transcripie, iar unele caractere se pot modifica sau pierde pe parcurs.
metoda POST - aceast metod mpacheteaz datele formularului n cadrul cererii

HTTP. Datele nu sunt codificate i de aceea (dei sunt mai sigure dect n cazul metodei
GET) sunt supuse atacurilor din partea hackerilor. Aadar, n cazul n care colectm
informaii personale, precum nume de utilizator, parole sau numere de carduri de credit,
trebuie s asigurm o conexiune mai sigur pn la un server sigur.
Name i ID
ID-ul se folosete pentru determinarea unic a elementului HTML pe o pagin n Document

Object Model (prin JavaScript sau pentru stilizare prin CSS). ID-ul trebuie s fie unic.
Name determin numele formularului. Este transmis serverului.
V recomandm s adugai ambele atribute de la nceput. Ele pot avea aceeai valoare, ceea ce
este, de asemenea, recomandat.
Enctype
Atributul enctype determin cum vor fi codate (encoded) datele n momentul trimiterii ctre
server.
Valoarea implicit a acestui atribut este application/x-www-form-urlencoded. Nu trebuie s-l

scriem sau s avem grij de el. Ceea ce ne intereseaz este ca, n cazul n care vrem s ncrcm
fiiere, enctype s aib valoarea: multipart/form-data.
Target
Acest atribut este acelai ca i n cazul linkurilor. Am analizat detaliile n lecia 6. Totul este
identic, cu excepia faptului c n cazul linkurilor se deschide o pagin, iar la formular se
deschide pagina/script-ul din atributul action.
Dac l folosim pe formular, de obicei utilizm valoarea _blank , deoarece astfel i transmitem
formularului c trebuie s deschid script-ul din atributul action ntr-un nou tab sau ntr-o nou
fereastr (n funcie de browser).
76
Inserarea unui formular
Avnd n vedere toate cele menionate mai sus, codul formularului nostru poate avea aspectul
urmtor:
1<form action="script" method="post" name="formular_exemplu"

id="formular_exemplu">
2
3</form>
Astfel, am completat elementul de baz form. Dac vrem s ncrcm fiiere prin formular i/sau
s deschidem formularul trimis ntr-un nou tab, vom introduce i celelalte dou atribute:
<form action="script" method="post" name="formular_exemplu"

1id="formular_exemplu" enctype="multipart/form-data" target="_blank">
2
3</form><span style="font-size: 14px; text-align: justify;"> </span>
Dei am introdus toate aceste elemente, avem doar cadrul gol al formularului, care nu nseamn
nimic. Trebuie s introducem i controalele formularului, care vor colecta datele.
Controalele formularului
Controalele din formular sunt responsabile pentru colectarea i trimiterea datelor. Acestea pot fi
butoane de tip text, radio sau de bifare etc. n continuarea leciei, ne vom familiariza cu acestea.
Input (text)
Tag-ul pe care l ntlnim cel mai des n formulare este <input>. Acesta este un tag cu
autonchidere, deoarece toi parametrii lui sunt setai prin atribute. Acelai tag se folosete pentru
mai multe controale diferite, ns este determinat de atributul type obligatoriu. Prin urmare, dac
vrem s introducem un cmp text simplu, vom introduce tag-ul input cu atributul type="text":
1 <input type="text" name="color" id="color">
n exemplul codului, se poate vedea c am scris atributul type, precum i atributul name, care
este important pentru script-ul care primete datele. Prin atributul name, script-ul va ti cum s
clasifice data. De asemenea, am adugat i o valoare ID, dei nu este obligatorie.
Mai putem aduga i atributul maxlength, cu care determinm numrul maxim de caractere. De
exemplu, dac vrem s limitm numrul posibil de caractere la 4, vom aduga maxlength="4".
De asemenea, mai devreme s-a folosit i atributul size, cu care am determinat limea cmpului.
Acum, pentru asta folosim regulile CSS.
Codul introdus anterior ar fi afiat acest detaliu pe pagina browser-ului:

77
Imaginea 9.4 - Cmpul Input text afiat n browser
Mai exact, codul care ar fi afiat cmpul de mai sus ar fi fost urmtorul:
1 <label for="color">color</label>
2 <input type="text" name="color" id="color">
Fr tag-ul label adugat, s-ar fi afiat doar cmpul fr textul din stnga lui. Tag-ul label nu
trebuie s se afle imediat nainte de tag-ul input, ns de cele mai multe ori l gsim n aceast
poziie. Important este faptul c label posed atributul for, care l leag de un anumit input.
Atributul for al tag-ului input trebuie s fie acelai ca i atributul ID al tag-ului input (sau al
unui alt tag).
Ambele tag-uri, i input, i label, sunt, conform naturii lor, tag-uri inline.
Input (password)
Tag-ul input se folosete tot pentru introducerea parolei (password). n acest caz, atributul type
este adugat pe password. Toate celelalte atribute sunt la fel ca i n cazul textului input.
1 <input type="password" name="pass" id="pass">
n browser, s-ar fi afiat urmtoarele:
Imaginea 9.5 - Cmpul pentru inserarea parolei
Observai c textul nu este afiat lng control, deoarece nu am adugat tag-ul label. Totui, putem
face acest lucru foarte simplu, dac adugm tag-ul label cu atributul for="pass".
Acest tip de cmp input ascunde caracterele introduse, ns nu garanteaz sigurana n timpul
trimiterii datelor. Pentru aceasta, avem nevoie de un server configurat corect i de script-uri
scrise corect.
Textarea
Acest tag creeaz un cmp textual ceva mai mare, care poate susine i mai multe rnduri de text.
Spre deosebire de cmpul input, textarea nu este un tag cu autonchidere, aadar necesit un
nceput i un sfrit. ntre acestea, se introduce textul care se va afia n control dup ncrcarea
paginii. Dac utilizatorul nu l terge, acesta va fi transmis mpreun cu datele.
78
Haidei s vedem un exemplu:
<textarea name="description" id="description">Lorem ipsum dolor sit

1amet.</textarea>
n browser, s-ar fi afiat:
Imaginea 9.6 - Cmpul Textarea n browser
n acest tip de control, nu introducem atributul type, deoarece textarea i stabilete singur rolul.
n cod, vedem textul introdus ntre tag-ul iniial i cel final, care se afieaz n cmp dup
ncrcarea paginii.
Poate vei observa pe unele pagini mai vechi atributele cols i rows, n care sunt introduse valori
numerice fr uniti. Acestea s-au utilizat n trecut pentru a determina limea (cols) i nlimea
(rows) acestui control. La fel ca i la input, astzi efectum acest lucru utiliznd CSS i nu mai
avem nevoie de ele.
Radio buttons (Butoanele radio)
Butonul radio este un control destul de diferit din punct de vedere vizual fa de controalele
menionate mai devreme, ns i acesta se bazeaz pe tag-ul input. Este puin mai complicat de
scris, dar haidei s vedem un exemplu n browser:
Imaginea 9.7 Controale radio n browser
Cu siguran, ai ntlnit controale radio n formulare. Ceea ce le caracterizeaz este faptul c nu

trebuie s introducem valori, ci doar s selectm una dintre opiunile oferite (putem selecta doar
una singur).
Pentru fiecare selecie, trebuie s crem un tag input separat. Pentru ca browser-ul s tie c
exist mai multe tag-uri input diferite (de tip radio) grupate mpreun, trebuie s le acordm
acelai nume n atributul name. De aceea, utilizatorului nu i va fi permis s aleag mai multe
opiuni. Dac selecteaz una, toate celelalte se dezactiveaz.
Atributul type menionat mai devreme trebuie adugat valorii radio n controlul radio.
79
Valoarea ID trebuie s fie diferit pentru fiecare input, indiferent dac atributul name este identic.
Atributul value reprezint o noutate i cu ajutorul lui transmitem valoarea pe care a selectat-o
utilizatorul. n exemplele precedente, am trimis doar textul, respectiv parola, iar aici transmitem
coninutul atributului value al butonului radio selectat.
Codul pentru acest exemplu ar arta astfel:
1
2 <input name="country" type="radio" id="Serbia" value="Serbia"
3 checked="checked">
4 <label for="Serbia">Serbia</label>
5
<br />
6
7 <input name="country" type="radio" id="Romania" value="Romania">
8 <label for="Romania">Romania</label>
9
1 <br />
0
11<input name="country" type="radio" id="Ukraine" value="Ukraine">
1 <label for="Ukraine">Ukraine</label>
2
Dac vrem ca, pe msur ce pagina se ncarc, s fie indicat o valoare, vom aduga atributul
checked="checked" pe tag-ul ei input. Valoarea este ntotdeauna aceeai. Putem aduga acest
atribut doar pe un input radio din grup.
Bineneles, am adugat i tag-uri label, pentru a face deosebirea ntre butoanele radio. Aici se
afl i cteva tag-uri br, care separ rndurile, deoarece toate elementele de aici sunt inline.
Cmpurile Checkbox
Acest control este foarte similar cu controlul radio, ns se deosebete prin faptul c utilizatorul
poate selecta mai multe valori n acelai grup. S vedem exemplul din browser:
Imaginea 9.8 - Controale Checkbox n browser
n timp ce codul ar fi urmtorul:
1 <input name="country" type="checkbox" id="Serbia" value="Serbia"

80
2
3 checked="checked">
4 <label for="Serbia">Serbia</label>
5
<br />
6
7 <input name="country" type="checkbox" id="Romania" value="Romania">
8 <label for="Romania">Romania</label>
9
1 <br />
0
11<input name="country"type="checkbox" id="Ukraine" value="Ukraine">
1 <label for="Ukraine">Ukraine</label>
2
Dup cum putem vedea, totul este identic, doar atributul type este modificat. Astfel, am activat
alegerea multipl, unde valorile nu se anuleaz reciproc. Restul rmne la fel ca n cazul
butoanelor radio.
Select (dropdown)
Acest control permite utilizatorului s selecteze o valoare din meniul dropdown (derulant):
Imaginea 9.9 - Control dropdown activat n browser
Se bazeaz pe tag-ul select, care conine deja bine cunoscutele atribute name i id. n cadrul tag-
ului select menionat, se afl mai multe tag-uri option, n care introducem posibilele valori:
1 <select name="country" id="country">

2
3 <option value="Serbia">Serbia</option>
4 <option value="Romania" selected="selected">Romania</option>
5 <option value="Ukraine">Ukraine</option>
6
</select>
7
Fiecare opiune (option) este o valoare i ca atare trebuie s conin atributul value, deoarece asta
transmitem serverului, respectiv script-urilor.
81
La fel ca i unele controale anterioare, putem alege valoarea care trebuie selectat n momentul
ncrcrii paginii. n acest caz, putem aduga atributul i valoarea selected="selected" la
opiunea dorit (n exemplu, a fost adugat celei de-a doua opiuni - "Romania").
De asemenea, putem aduga i tag-ul label dac vrem i l putem lega de atributul for prin nume
(name).
Elementul select
Controlul select menionat poate fi schimbat dac tag-ului select i adugm atributul size, iar ca
valoare introducem un numr. Valoarea acestui numr determin nlimea controlului i numrul
de opiuni care vor fi afiate. Pentru a nelege mai bine, observm exemplul de mai jos:
Imaginea 9.10 - Select cu atributul size 3
n acest exemplu, n cod am adugat size="3". Acum, nu mai este un meniu derulant, ci un cmp
care afieaz mai multe valori. Dac numrul size este mai mic dect valorile disponibile, n
partea dreapt va aprea un scroll bar/bar de derulare (aici este dezactivat). Haidei s vedem
urmtorul cod:
1 <select name="country" id="country" size="3">

2
6
</select>
7
De asemenea, putem s activm i alegerea mai multor valori prin adugarea atributului
multiple="multiple". Pentru ca selectarea multipl s funcioneze, este necesar i un atribut size
(ntr-un meniu derulant, nu poate exista selectare multipl). Codul arat astfel:
1 <select name="country" id="country" size="3" multiple="multiple">

2
6
</select>
7
82
Astfel, am permis selectarea mai multor opiuni, cu condiia ca utilizatorul s in apsat tasta
Control de pe tastatur (Ctrl), respectiv tasta Command () de pe tastatura calculatoarelor Mac,
n timp ce efectueaz selectarea multipl. De aceea, trebuie s existe i o not, instruciune n
acest sens, deoarece majoritatea utilizatorilor nu vor ti despre ce este vorba.
n plus, uneori browser-ele au dificulti cu un astfel de control select. Testai-l obligatoriu n

toate browser-ele.
ncrcarea fiierului
Controlul care asigur ncrcarea fiierelor prin intermediul formularelor este din nou input type,
ns cu file type (type="file"):
1 <input type="file" name="CV" id="CV">
n browser, se afieaz urmtoarele:
Imaginea 9.11 - Controlul pentru ncrcarea fiierelor
Dac folosim acest control, formularul trebuie s aib metoda setat la POST, precum i un
enctype corect (menionat mai devreme).
Acest control este specific prin faptul c nu permite stilizarea. Nu putem stiliza n niciun fel
butonul, cmpul etc. cu regulile CSS, ci aceste detalii depind de browser-ul care afieaz
formularul.
Butonul submit
Butonul submit, respectiv controlul submit, cum este mai corect, se folosete pentru a trimite
formulare i date introduse unui server, unde vor fi procesate. Din nou se folosete bine
cunoscutul input, dar cu atributul type setat la submit:
1 <input type="submit" name="submit" id="submit" value="Finish">
Name i ID nu sunt obligatorii aici. Value, pe de alt parte, definete ceea ce va fi scris pe
butonul respectiv. Dac nu l introducem, n unele browser-e va aprea Submit Query:
Imaginea 9.12 - Butonul submit din exemplul nostru

83
Dac vrem, n loc de butonul obinuit putem utiliza o imagine. n acest caz, trebuie setat atributul
type="image". Atunci, pe atributul input sunt permise atributele src, width, height i alt, astfel
nct s se comporte ca o imagine.
Controlul Button
Un control ceva mai nou este controlul button. La acest control, folosim tag-ul <button>
</button>, care poate cuprinde mai multe elemente, de exemplu text i imagine:
1 <button>
2 <img src="images/dugme.gif" alt="button" width="10" height="10">
3 Finish
</button><br><br>
4
Cmpul Hidden
Dei ideea unui cmp ascuns n formular poate prea contradictorie, un astfel de control este
posibil i se utilizeaz chiar foarte des. Cmpul ascuns, dup cum i spune numele, nu este vizibil
utilizatorului, ns se poate utiliza pentru salvarea temporar a unor date. Cnd spunem c nu
este vizibil, ne referim la faptul c nu este afiat direct n browser, ns este vizibil n codul-surs
(source code), aadar nu trebuie s postm date sensibile.
Haidei s vedem exemplul din cod:
1 <input type="hidden" name="hiddenField" id="hiddenField" value="x">
Controlul se folosete, de obicei, pentru a scrie anumite date n el n timpul ncrcrii paginii i
pentru a le trimite apoi script-urilor. De exemplu, imaginai-v un formular pentru sugestii i
comentarii de pe un site care vinde produse. Dac utilizatorul este logat atunci cnd formularul
este deschis, site-ul i poate afia ID-ul din baza de date n cmpul ascuns, iar utilizatorul nu
trebuie s vad acest lucru pe pagin. Cnd utilizatorul las un mesaj i trimite formularul, ID-ul
este trimis i el, ceea ce poate facilita sortarea, monitorizarea i procesarea n continuare.
Fieldset i legend
Dac vrem s ncadrm o parte din formular i s-i adugm un anumit titlu, putem face acest
lucru cu ajutorul tag-ului fieldset cu care ncadrm toate controalele pe care le selectm. Putem
aduga tag-ul legend imediat dup ce deschidem tag-ul fieldset. n continuare, avem urmtorul
exemplu:
1 <fieldset>
<legend>Contact</legend>
2
3
<label>Email:<br>
4 <input type="text" name="email">
5 </label><br>
84
6
7
8 <label>Phone:<br>
<input type="text" name="phone">
9 </label>
10
11 </fieldset>
12
n browser, acesta ar arta astfel:
Imaginea 9.13 Fieldset i legend ntr-un exemplu
Fieldset este, n mod implicit, un element block type.
Dac ai fi analizat cu atenie codul n acest exemplu, ai fi observat c tag-urile label sunt scrise
n jurul controlului, n acest caz input. Acesta este un alt mod de a aduga labels/etichete, dei v
recomandm s le scriei separat, utiliznd atributul for.
Controalele HTML5
HTML5 i validarea
Cred c ai observat pn acum c unele formulare de pe web includ validarea. Acesta este un
principiu conform cruia formularul este verificat n sensul datelor introduse, a tipului de date
etc. Acest lucru se realiza pn acum cu ajutorul unui JavaScript applet, care se executa pe
pagin. Astfel, se evita angajarea inutil a serverului n cazul n care formularul nu era completat
corect.
85
Imaginea 9.14 - Exemplu de formular cu validare. Sursa imaginii: http://www.drupal.org/
Pn acum, validarea era efectuat de JavaScript, ns, odat cu apariia limbajului HTML5,
aceste opiuni sunt ncorporate n HTML:
1 <input type="password" name="password" required="required">
n momentul n care a fost conceput acest curs, doar anumite browser-e suportau aceast opiune,
ns n viitor numrul lor va crete cu siguran.
Noi variante HTML5 de input
Versiunea HTML5 a adus i variante noi ale controlului input. Unele dintre acestea sunt:
cmpul textual de cutare (search) - type="search" ;
cmpul pentru dat - type="date" ;
cmpul pentru URL - type="url" ;
cmpul pentru e-mail - type="email" .

86
Nu trebuie s le explicm n detaliu, deoarece ele seteaz cmpul astfel nct acesta s fie
pregtit pentru introducerea coninutului corespunztor. Afiarea i funcionalitatea le sunt
influenate de capacitatea browser-ului de a le procesa. Folosii-le cu atenie i testai-le!
HTML5 placeholder
O alt noutate este opiunea placeholder, care asigur afiarea textului nainte de interaciunea cu
utilizatorul. De exemplu, n cmpul de cutare putem s introducem: Search... Acest cuvnt ar
fi disprut imediat dup ce cmpul ar fi fost focalizat (cnd utilizatorul d clic pe cmp i ncepe
s introduc date).
Este suficient s adugm atributul placeholder cu cuvntul dorit sau cu o propoziie ca valoare.
n continuare, avem i un exemplu:
<input type="search" name="search" placeholder="Search..."><span style="font-

1size: 14px;"> </span>
Informaiile despre pagin

n cadrul acestei lecii, vom aborda meta tag-urile care definesc informaii suplimentare despre
pagin. De asemenea, vom analiza atributele ID i CLASS, pe care le setm pe tag-urile HTML
n scopul conectrii cu regulile CSS i cu codul JavaScript.
Meta tags (Meta tag-urile)
Tag-urile <meta> se insereaz n partea head a paginii, iar rolul lor este s ofere informaii
suplimentare despre pagina pe care se afl.
Totui, aceste informaii nu sunt vizibile utilizatorului la prima vedere. Deoarece se afl n partea
head a paginii, nu apar n browser. Aceste informaii sunt utilizate doar de browser-e pentru o
afiare corect i de motoarele de cutare (Google i altele) pentru indexarea paginilor. De
exemplu, cu un meta tag putem s definim enconding-ul paginii, aspect important pentru browser
n ceea ce privete afiarea corect a textelor. Cu ajutorul acestor tag-uri, putem introduce i
descrierea paginii, pe care o va folosi Google n momentul indexrii paginii.
Tag-ul <meta> este unul cu autonchidere, deci nu are nceput i sfrit, iar toate informaiile se
afl n cadrul atributelor de pe tag.
Este important de menionat c pentru toate meta tag-urile se utilizeaz practic acelai tag -
<meta> -, ns cu atribute diferite. Totui, nu putem combina mai multe atribute diferite ntr-un
rnd. Trebuie s deschidem un tag <meta> nou. Pentru a clarifica acest lucru, vom analiza
urmtorul exemplu:
1<!DOCTYPE html>
87
2
<html>
3
<head>
4
<meta name="description" content="Exemplul paginii pentru meta tag-uri">
5
<meta name="keywords" content="HTML, Meta, HTML5, xHTML, lectie">
6
<meta name="author" content="Vuk Nini">
7
...
n exemplul de mai sus, vedem nceputul unei pagini HTML. Mai nti, este scris doctype, apoi
tag-ul HTML, dup care este deschis tag-ul head i n el sunt adugate cteva meta tag-uri.
Au fost adugate 3 meta tag-uri. Dac se folosete acelai tag (<meta>), cele trei se deosebesc
dup valoarea atributului. De obicei, se folosesc dou atribute n fiecare meta tag, acestea fiind
name i content. Primul determin tipul de informaie, n timp ce al doilea con ine informaia.
Exist i excepii de la aceast regul, despre care vom vorbi n continuarea leciei.
Meta tag-ul Description

Acest meta tag definete descrierea paginii. De obicei, este utilizat de motorul de cutare pentru
a nelege despre ce este vorba n pagin. Uneori, apare n rezultatele cutrii. Trebuie s aib
pn la 155 de caractere.
1<meta name="description" content="Exemplul paginii pentru meta tag-uri">

Haidei s vedem un exemplu! Dac tastm n Google Smashing magazine, vom obine
urmtorul rezultat:
88
Imaginea 10.1 - Afiarea rezultatelor n motorul de cutare Google

pentru cuvintele-cheie Smashing magazine
Haidei s vedem sursa paginii (Ctrl+U) la http://www.smashingmagazine.com/:
Imaginea 10.2 - Afiarea codului HTML al paginii http://www.smashingmagazine.com/
Vedem c descrierea oferit de Google n rezultatele cutrii a fost ncrcat din meta tag-ul
description al paginii.
Meta tag-ul Keywords
Se folosete pentru a introduce cuvintele-cheie (engl. Keywords), care descriu pagina. n cadrul
atributului, elementele sunt separate prin virgul. n trecut, motoarele de cutare acordau mai
mult atenie cuvintelor-cheie, n timp ce astzi acestea i pierd importana, fiind chiar
recomandat s nu le folosim:
1<meta name="keywords" content="HTML, Meta, HTML5, xHTML, lectie">
Meta tag-ul Robots
Acest meta tag indic motoarelor de cutare care indexeaz paginile (numii roboi) cum s
trateze pagina. Putem scrie noindex, dac nu vrem ca pagina noastr s apar n rezultatele
cutrii (nu este recomandat). Astfel, Google, Bing i alte motoare, pur i simplu, vor ignora
aceast pagin i se vor comporta ca i cnd ea nici nu ar exista. A doua opiune este nofollow,
care indic faptul c pagina trebuie indexat, ns va neglija toate linkurile care se afl pe ea.
89
Dac v ntrebai de ce sunt att de importante linkurile, v rspundem: deoarece roboii gsesc
pagini noi prin linkurile de pe alte pagini, navignd fr ntrerupere pe internet. De exemplu:
1 <meta name="robots" content="nofollow">
Tag-ul Title
Dei nu face parte dintr-un meta tag real, tag-ul title al paginii este deseori inclus n aceast
categorie (nu folosete meta, ci propriul su tag title).
Ne-am ntlnit deja cu el la nceputul cursului. n el, introducem titlul (title) paginii, care este
foarte important pentru motoare de cutare precum Google, Bing i altele:
1 <title>Titlul paginii</title>
Opinia expertului SEO despre meta tag-uri
Deoarece meta tag-urile influeneaz cel mai mult aspectul optimizrii site-ului nostru pentru
motoarele de cutare (Search Engine Optimization), iat ce spun experii SEO despre acest
subiect:
Meta tag-urile, care se afl n antetul paginii HTML, poate nu au un rol important atunci cnd
utilizatorul vizualizeaz un site, ns funcia lor capt o importan foarte mare pe pagina cu
rezultatele cutrii. Prin urmare, prin introducerea cuvintelor-cheie n motorul de cutare i
prin listarea rezultatelor cutrii, toate site-urile sunt prezentate prin trei elemente standard:
titlu, o scurt descriere i adresele URL.
Titlul afiat reprezint, de fapt, coninutul aflat n tag-ul Meta Title. Dac Meta Title al nostru
conine cuvintele-cheie pe care le-a introdus utilizatorul, ele vor fi marcate cu un font bolduit,
ceea ce va evidenia site-ul nostru ca fiind o surs relevant de informaii pentru utilizator. Cele
mai bune rezultate se obin folosind tag-ul Meta Title, cu o lungime total de pn la 70 de
caractere i cu un coninut de cuvinte-cheie n forma n care utilizatorii le introduc n cmpul de
cutare.
Bineneles, motorul de cutare preia urmtorul principiu similar, coninutul descrierii paginii
din tag-ul Meta Description. Valoarea tag-ului Meta Description nu se afl n cuvintele-cheie.
De fapt, s-a confirmat faptul c pagina noastr nu va avea o poziie mai bun dac tag-ul Meta
Description conine cuvintele-cheie dorite. Adevrata valoare a tag-ului Meta Description st n
abilitatea de a influena aciunea utilizatorului. Avnd n vedere c motorul de cutare ne ofer
opiunea de a ne prezenta printr-o singur propoziie, ar trebui s o utilizm la maxim i s-i
afim utilizatorului ceea ce poate obine de la pagina noastr; trebuie s menionm avantajele
pe care le oferim i s-i dm un motiv s ne aleag tocmai pe noi dintre toate site-urile listate.
90
n trecut, tag-ul Meta Keywords permitea poziionarea mai bun prin introducerea unui numr
ct mai mare de cuvinte-cheie, ns astzi situaia nu mai este aceea i. Abuzul de acest tag a
fcut ca toate motoarele de cutare s-l resping complet ca parametru de (clasificare) ranking.
Sfatul nostru este s nu folosii tag-ul Meta Keywords, deoarece nu v va fi de niciun folos din
punct de vedere SEO, dar vei ajuta concurena s vad ce cuvinte-cheie folosii pentru a iei n
eviden. Concurena nu trebuie dect s deschid codul-surs al paginii dvs., pentru a vedea
direct ce cuvinte-cheie fac obiectul angajamentului dvs.
SEO este o tiin de sine stttoare, iar o abordare mai detaliat a acestei teme depete sfera
acestui curs.
Atributul ID
Fiecare element HTML poate s conin un atribut ID. El se folosete pentru a determina un
element n mod unic i concret. Aceasta nseamn c pe o anumit pagin HTML poate exista
doar un singur element cu o anumit valoare ID. Poate fi repetat ntr-un alt document.
Valoarea atributului ID poate s conin litere/caractere de text (minuscule i majuscule),

anumite semne i numere. Totui, trebuie s nceap cu o liter. Se scrie ca orice alt atribut
HTML n tag-ul HTML de nceput:
<h1 id="titlu_principal">Acesta este un titlu caruia ii este adaugat un

1ID</h1>
Astzi, ID-ul se folosete cel mai des pentru stilizarea CSS i pentru programarea JavaScript.
CSS poate folosi ID-ul pentru a aplica o anumit regul CSS doar pe un singur element (vom
vedea mai trziu cum funcioneaz CSS). De asemenea, JavaScript folosete ID-ul ntr-un mod
similar, pentru a conecta anumite elemente ale paginii cu codul su.
Simpla adugare a atributului ID pe un element nu va influena afiarea acestuia. i adaug doar

o etichet, practic un nume pe care l putem folosi mai trziu, dac este necesar.
ID-ul se mai numete i atribut global (global attribute), deoarece se poate aplica pe orice
element.
Atributul CLASS
Atributul CLASS este foarte similar cu atributul ID menionat anterior, singura diferen
constnd n faptul c acesta poate aprea de mai multe ori pe aceeai pagin HTML. Uneori, este
util s etichetm mai multe elemente cu aceeai clas (CLASS), pentru a le stiliza pe toate
deodat cu CSS. Cu alte cuvinte, adugm o clas pe mai multe elemente i le stilizm pe toate
dintr-odat n CSS.
91
De asemenea, o alt diferen n raport cu ID-ul const n faptul c un element poate conine n
acelai timp mai multe clase. Le scriem pe toate ntr-un singur atribut CLASS, ns le separm
printr-un spaiu gol. Mai jos, analizm exemplul:
1 <p class="paragraf">Primul paragraf</p>

2 <p class="paragraf">Al doilea paragraf</p>
3 <p class="paragraf separat">Al treilea paragraf</p>
4 <p class="paragraf">Al patrulea paragraf</p>
n acest exemplu, putem atribui aceeai regul CSS tuturor celor patru paragrafe i putem aduga
o alt descriere doar pentru al treilea paragraf (prin clasa separat).
O ntrebare care se pune frecvent este: Cum stabilim dac vom folosi atributul ID sau atributul
CLASS i cnd trebuie s le folosim? Rspunsul nu poate fi simplu i nici nu exist doar unul
corect. Dup cum am menionat deja, atributele ID i CLASS doar determin sau distaneaz un
element de mediul su. n diferite circumstane, adugm atribute diferite. De asemenea, diferii
autori vor proceda diferit n situaii identice, ns vor obine probabil acelai rezultat. Pentru
moment, nu v batei capul cu aceast problem, reinei doar regulile i diferenele dintre
atributele ID i CLASS, iar totul v va fi mult mai clar cnd vom folosi regulile CSS.
Modul 5 Bazele CSS
n leciile precedente, ne-am familiarizat doar cu limbajul HTML i cu proprietile sale. Am

nvat cum s adugm coninut n pagini, iar acum ne vom familiariza cu CSS, cu regulile sale
de baz i cu stilizarea elementelor.
Ce este CSS?
CSS (Cascading Style Sheets) este un limbaj care se folosete pentru descrierea semanticii de
prezentare a documentului scris ntr-un limbaj descriptiv (markup language). Cu alte cuvinte,
acesta descrie, respectiv ordoneaz aspectul i formatarea oricrui element de pe pagin.
Regulile CSS ne permit s stilizm elementele HTML i alte documente.
CSS a aprut mult mai trziu dup HTML. La nceput, paginile HTML nu erau stilizate din punct
de vedere vizual. Apoi, tag-urile HTML le-am folosit pentru stilizare, ns totul s-a dovedit a fi
mult prea complicat i ineficient. De aceea, a fost conceput limbajul CSS, care permite structurii
HTML s afieze coninutul, iar CSS-ului s l stilizeze. La nceput, muli autori au combinat
stilizarea HTML i CSS, ns n zilele noastre, cnd CSS a ajuns la maturitate, putem respecta n
totalitate regula de separare a coninutului (HTML) de stilizare (CSS).
CSS ne permite s crem nite reguli ( descriptions), cu ajutorul crora vom stiliza anumite
elemente. De exemplu, cu CSS putem specifica faptul ca fundalul unei pagini s fie albastru, iar
92
textul rou cu font Arial. De asemenea, putem seta ca toate paragrafele s aib diferite tipuri de
margini etc.
n CSS, nu scriem tag-uri i nici nu adugm coninut HTML. CSS se folosete doar pentru
ordonarea i stilizarea coninutului n HTML i a altor documente.
CSS este separat de limbajul HTML i de tag-urile sale. Dac avem o pagin HTML, nu mai
trebuie s corectm codul respectiv pentru a introduce codul CSS. Pe acesta l introducem fie
ntr-un fiier separat (cu extensia .css), fie n partea head a documentului HTML. Mai trziu,
vom explica n detaliu aspecte legate de cum i unde se scrie CSS.
Cum funcioneaz CSS-ul?
Pentru a nelege cum funcioneaz limbajul CSS, trebuie s ne imaginm c n jurul fiecrui
element de pe pagin exist un cadru (box) invizibil. Utiliznd CSS, putem crea reguli, cu
ajutorul crora stilizm cadrul respectiv, dar i elementele din el.
Sintaxa CSS const n regula CSS (CSS Rule). Regulile CSS sunt alctuite n mod obligatoriu
din dou pri: selectorul (selector) i declaraia (declaration).
Selectorul indic elementul (sau, dac sunt mai multe, le separm prin virgul) la care se
refer respectiva regul CSS.
Declaraia implementeaz stilizarea pentru elementul la care se refer regula CSS.
Cnd crem o regul CSS, plasm selectorul, apoi introducem un spaiu gol i apoi punem
paranteze acolade, dup care introducem declaraia, ca n exemplul de mai jos:
1 h1 { color:red; }
Exemplul codului de mai sus reprezint o regul CSS simpl.
Declaraiile sunt, de asemenea, alctuite din dou pri: proprietate (property) i valoare
(value). Scriem proprietatea, apoi dou puncte (:), apoi valoarea. n aceeai regul, putem scrie
mai multe declaraii i trebuie doar s le separm prin punct i virgul (;). Haidei s vedem un
exemplu!
Dac vrem ca paragrafele paginii noastre s aib fontul Tahoma i dimensiunea de 12 px, vom
scrie urmtoarele:
1 p {
2 font-family:Tahoma;
3 font-size:12px;
}
4
93
n acest exemplu, am plasat selectorul p, ceea ce nseamn c regula respectiv se refer doar la
paragrafele din document (la tag-urile <p> din HTML). Am pus paranteze acolade i ntre ele
dou declaraii care selecteaz fontul (font family) i dimensiunea textului (font size). Observai
c ntre proprietate i valoare n declaraie st ntotdeauna semnul : (fr spaii), iar dup
declaraie st ntotdeauna semnul ; (care indic sfritul valorii).
Trebuie menionat c noile rnduri i spaii nu au un rol important n limbajul CSS, ns trebuie
respectat o anumit structur pentru a menine claritatea codului. De obicei, scriem selectorul i
paranteza deschis pe un singur rnd. Apoi, pe urmtoarele rnduri introducem toate declaraiile
(cte una pe fiecare rnd), pentru ca la sfrit s nchidem paranteza pe noul rnd, ca n exemplul
de mai sus.
Selectorii CSS fac diferena ntre minuscule i majuscule (sunt case sensitive), aadar trebuie s
acordm atenie acestui aspect.
Anumite proprieti pot avea mai multe valori (separate prin virgul) sau mai multe grupuri de
valori (separate prin spaii goale) sau pot conine un string (text). n acest caz, valoarea se scrie
ntre ghilimele. Putem combina aceste metode de scriere. Haidei s vedem exemple pentru astfel
de cazuri:
1p {
2 font-family:Times New Roman, Arial;
3 margin:10px 0 0 0;
4}
nainte de a continua, reinei termenii menionai pn acum n cadrul acestei lecii, deoarece
vom reveni la ei. Prin urmare: limbajul CSS este alctuit din reguli. Fiecare regul este alctuit
din selector i declaraie. Declaraia este alctuit din proprietate i valoare.
Modalitatea de scriere a unei reguli CSS
Am menionat c CSS este separat de codul HTML, de aceea exist trei opiuni de plasare a
acestuia, din care dou se folosesc n mod activ.
CSS-ul extern
Dup cum i spune i numele, CSS-ul extern se afl n afara documentului HTML, ntr-un fiier
separat.
Cea mai simpl versiune este cea n care avem un fiier HTML, iar lng el, un fiier CSS. Este
suficient s introducem un anumit tag n partea head a fiierului HTML, tag care va conecta
fiierul CSS extern. Pe de alt parte, n fiierul CSS scriem doar regulile. n fiierele CSS, nu
trebuie s apar nicio parte a limbajului HTML. Spre deosebire de fiierele HTML, fiierele CSS
sunt alctuite doar din reguli CSS.
94
Tag-ul pentru legarea regulilor CSS n partea head a paginii este <link>. La fel ca i alte tag-uri
(de exemplu, meta tag-ul), acest tag nu are coninut, fiind cu autonchidere. Toate valorile se afl
n atributele sale de pe tag. n cazul tag-ului <link>, aceste atribute sunt:
href definete calea pn la fiierul CSS extern. Poate fi relativ sau absolut. V
recomandm s setai ci relative i s v asigurai ca fiierele site-ului s fie ntotdeauna
mpreun i n aceleai relaii. Am ntlnit deja acest atribut i n tag-ul img, cu o funcie
similar (calea pn la imagine).
type definete tipul de document la care ne legm, deoarece tag-ul <link> se poate
folosi i n alte scopuri, dei n ultimul timp se folosete doar pentru CSS. Setm:
text/css.
rel definete relaia dintre fiierul HTML i cel legat, adic fiierul extern. Setm:
stylesheet.
Iat un exemplu de fiier CSS extern legat, mai exact un exemplu de nceput de pagin HTML,
care arat astfel:
1
<!DOCTYPE html>
2 <html>
3 <head>
4 <title>CSS extern</title>
5 <link href=css/stilizare.css type=text/css rel=stylesheet>
6 </head>
<body>
7 ...
8
Nu uitai c acest tag se pune ntotdeauna n cadrul prii head a fiierului HTML i, practic,
este ntotdeauna identic, numai calea pn la fiier fiind diferit:
95
Imaginea 11.1 - Pagini HTML i fiiere CSS externe
ntr-un singur document HTML, pot exista mai multe fiiere CSS legate 1. n acest caz, vom
aduga cte un tag <link> pentru fiecare fiier CSS extern. V reamintim c un fiier CSS poate
stoca un numr nelimitat de reguli, ns o parte dintre autori separ grupurile de reguli CSS n
diferite fiiere, pentru o organizare mai uoar.
Pe de alt parte, un fiier CSS poate fi apelat, ncrcat de mai multe fiiere HTML diferite.
Astfel, cu acelai fiier putem stiliza aceleai elemente de pe diferite pagini.
CSS-ul intern
Spre deosebire de CSS-ul extern, CSS-ul intern se afl direct n documentul HTML, mai exact n
partea head. n loc s punem un tag <link> ca mai sus, putem aduga tag-ul <style>, iar n
cadrul lui s scriem direct regulile CSS.
Iat un exemplu:
1 <!DOCTYPE html>
<html>
2
<head>
3 <title>CSS intern</title>
4 <style type=text/css>
5 p {
6 font-family:Tahoma;
font-size:12px;
7 }
8 </style>
9 </head>
10 <body>
11 ...
96
12
13
n acest mod, practic am ncorporat ntregul fiier CSS n structura paginii HTML. n afara tag-
ului <style>, se afl o pagin HTML i aici sunt valabile regulile ei. Pe de alt parte, n cadrul
acestui tag se afl regulile CSS i sunt valabile regulile limbajului CSS:
Imaginea 11.2 - CSS-ul intern ncorporat n pagina HTML
CSS-ul extern vs. CSS-ul intern
Se pune ntrebarea ce CSS ar trebui s utilizm, cel extern sau cel intern. Aproape ntotdeauna
este mai practic s utilizm CSS-ul extern. Iat doar cteva motive:
Putem folosi aceleai reguli CSS pentru mai multe pagini diferite, n loc s le repetm n
mod inutil;
Deoarece nu exist repetiii ale codului, paginile sunt mai uoare i se ncarc mai repede
(CSS se ncarc doar pe prima);
Putem separa coninutul de stilizare;
Putem schimba regulile CSS ntr-un singur loc, ceea ce va influena imediat toate paginile
legate;
Navigm mai uor n codul CSS, care este separat de HTML.
Inline CSS
Am menionat c exist trei moduri de a scrie codul CSS. n afar de CSS-ul extern i intern,
exist i modul de scriere inline. Acesta se deosebete prin faptul c selectorul este omis, iar
CSS-ul se scrie direct n tag-ul HTML, la fel ca atributul.
97
Acest mod de scriere este permis doar n variantele stricte ale documentelor i este o relicv din
trecut.
n CSS inline, adugm atributul style (pe tag-ul HTML pe care vrem s-l stilizm) i n el
scriem ntre ghilimele proprietile i valorile, ca mai devreme.
Din cauza specificitii acestei versiuni, regula pe care o introducem se refer doar la un singur
element. De aceea, scrierea stilurilor inline nu este practic, iar modificrile ulterioare sunt i mai
dificile.
Vom analiza urmtorul exemplu:
1 ...
2 <p>First paragraph</p>
3 <p style=font-family:Tahoma; font-size:12px;>My paragraph</p>
4 <p>Third paragraph</p>
...
5
Astfel, am stilizat un singur paragraf de text - al doilea. Dac am fi vrut s le stilizm pe toate, ar
fi trebuit s le adugm i lor atributul style i aceste proprieti i valori. Este mai uor s
adugm CSS-ul extern sau intern i s stilizm toate paragrafele cu o singur regul.
Poate c v ntrebai n acest moment cum putem stiliza doar un singur paragraf dac asta vrem
cu adevrat, respectiv s-l evideniem pe unul dintre ele? n astfel de cazuri sau n cazuri
similare, nu vom folosi stilizarea inline, ci vom folosi selectori mai compleci dect simplul p,
dup cum vom vedea n continuare.
Tipurile de selectori CSS
Exist diferite tipuri de selectori, cu ajutorul crora putem inti aproape fiecare element de pe
pagin. De noi depinde ce mod vom folosi n funcie de situaie. Interesant este faptul c nu
exist un singur mod adecvat, ci mai multe.
n paragraful de mai sus, vorbind despre selectori, am folosit cuvntul a inti. Cuvntul face
parte din jargon, respectiv din vocabularul experilor CSS. Dei ar fi mai corect s spunem:
aceast regul stilizeaz elementul determinat de selectorul x, spunem mai frecvent: aceast
regul intete elementul x. Acest mod de exprimare a devenit o regul nescris, deoarece
pleac de la faptul c selectorii separ doar anumite elemente dintr-o mulime de alte elemente
i le intete doar pe acelea.
Analizai tabelul de mai jos, n care sunt prezentate tipurile de selectori:
Tipul de selector Exemplu Explicaie

98
Universal * intete toate elementele de pe pagin.
General (tipic) Body, p, intete <body>, precum i toate elementele <p> i <h2> de
h2 pe pagin.
ID #exemplu intete elementul cu valoarea ID marcat.
CLASS .exemplu intete elementul cu valoarea CLASS marcat.
Motenitor h1 a intete toate elementele <a> aflate n cadrul <h1>, chiar

(descendent) dac ntre ele exist elemente.
Copil (child) h1>a intete toate elementele <a> aflate n cadrul <h1>, ns doar
acele elemente care se afl direct n el (fr elemente ntre).
Rud (sibling) h1~p <p> intete toate elementele <p> care vin dup elementul <h1> .
Rud direct (direct h1+p intete doar un element <p> , care se afl imediat dup
sibling) <h1> .
Tabelul 11.1 - Tipurile de selectori
Not: Valoarea ID se pune n atributul ID al tag-ului HTML doar dup nume, n timp ce n
regula CSS se scrie cu prefixul # .
Not: Valoarea CLASS se adaug n atributul CLASS al tag-ului HTML doar dup nume, n
timp ce n regula CSS se scrie cu un prefix.
Not suplimentar pentru ID i CLASS
Selectorii ID i CLASS se pot combina cu ali selectori. Facem aceasta scriindu-i mpreun. De
exemplu:
1 h1#example {}
99
ar inti doar tag-ul <h1>, care posed valoarea ID example. Acelai lucru este valabil i pentru
CLASS, numai c n loc de # se scrie . (punct).
Selectorii compleci
Haidei s vedem ce reguli sunt valabile pentru selectori i, n general, pentru regulile CSS.
Regula ordonrii stilurilor CSS
Am vzut c CSS se poate scrie n trei moduri (ca fiier separat, ca seciune head a documentului
HTML sau ca inline al tag-ului), astfel nct se poate ajunge la suprapunerea acelorai valori
CSS. De asemenea, n cadrul fiierelor CSS sau al seciunii CSS din cadrul paginii se poate
ajunge la suprapunere. n astfel de situaii, exist anumite reguli care se aplic n mod automat i
determin care regul CSS va fi aplicat.
n cazul n care regulile CSS se suprapun, browser-ul va aplica regula de proximitate

(engl. proximity rule), care specific aplicarea regulii CSS care este cea mai apropiat de
elementul-int.
Practic, aceasta nseamn c, n caz c exist mai multe stilizri diferite pentru acelai element,
browser-ul va folosi cel mai apropiat element de elementul respectiv, cu condiia ca selectorul s
fie identic. n caz c selectorii se deosebesc (dar intesc acelai element), este important care
dintre acetia este mai precis, iar apoi este important i ordinea.
Haidei s vedem n exemplu! Dac n fiierul CSS am fi inserat urmtoarele:
1 p {
2 color:#F00; /*red color*/
3 }
n partea head a paginii am fi inserat:
1 p {
2 color: #3F0; /*green color*/
3 }
iar n tag-ul inline, culoarea albastr (blue color):
1 <p style="color:#00F;">Acesta este un text.</p>
este logic c textul nu poate fi negru (cum este n mod implicit), rou, verde i albastru n acela i
timp. Browser-ul va seta culoarea albastr, deoarece aceast regul CSS este cea mai aproape de
element.
100
Este important s menionm i c, dac avem dou sau mai multe reguli CSS care se aplic la
acelai element-int, iar proprietile nu sunt n conflict, vor fi aplicate toate proprietile.
Iat dou exemple n acest sens.
Dac avem regula CSS:
1 p {
2 color:#F00;
3 }
dar i o alt regul:
1 p {
2 font-family:Arial;
3 }
Dei se refer la acelai element, paragraful va fi formatat n culoarea roie i cu fontul Arial,
deoarece acestea se completeaz.
Pe de alt parte, dac avem:
1 p {
2 color:#F00;
3 }
dar i:
1 p {
2 font-family:Arial;
3 color:#3F0;
}
4
atunci se iau toate proprietile care nu se contrazic, plus una dintre cele aflate n conflict.
Paragraful va fi formatat cu fontul Arial, ns formatarea culorii (rou sau verde) va depinde de
regulile contradiciei menionate mai devreme.
Elementele-int prin care atribuim proprieti pot fi mai complexe i mai specifice, n funcie de
elementele aflate deasupra lor.
De exemplu:
1 p {
2 color:red;
3 }
101
a stilizat toate elementele p, n timp ce urmtorul cod:
1 .first {
2 color:blue;
3 }
a stilizat doar elementele p care au clasa (class) first. Dac, de exemplu, avem 10 paragrafe pe
pagin, toate vor obine culoarea din primul selector (culoarea roie), n timp ce fiecare paragraf,
care are i clasa first, va obine culoarea albastr. Apoi, n acest caz, regula CSS cu clas nu
trebuie s se gseasc dup selectorul general pentru a funciona, deoarece clasa este ntotdeauna
mai important dect selectorul general. Acelai lucru se ntmpl i cu valorile ID, care sunt
ntotdeauna mai importante dect clasele.
Haidei s analizm i aceast situaie. De exemplu:
1 h1 {
2 color:#F90;
3 }
ar fi stilizat toate elementele h1, n timp ce urmtorul cod:
1 div h1 {
2 color:#F90;
3 }
ar fi stilizat doar elementele h1 care se afl n cadrul elementului div. Dac, de exemplu, punem
h1 direct n body, acesta nu este influenat i nici stilizat de aceast regul, deoarece nu se afl n
cadrul niciunui div.
n continuare, putem defini i mai precis raportul elementului pe care l intim cu stilizarea. n
exemplul anterior, am avut:
1 div h1 {
2 color:#F90;
3 }
iar dac scriem:
1 div.myClass h1 {
2 color:#F90;
3 }
vom stiliza toate titlurile h1, care se afl n elementul div cu clasa myClass.
Pe scurt, dac introducem un spaiu, intim elementul de dedesubt; dac nu exist niciun spaiu,
atunci intim elementul de la acelai nivel (elementul care ndeplinete ambele condiii).
102
Pn acum ai primit multe informaii noi, cu care nu v-ai mai ntlnit. Dup ce ve i parcurge
exemplele i vei exersa puin, revenii la aceast lecie pentru a fixa detaliile, deoarece ele
reprezint baza limbajului CSS.
Proprietile disponibile n CSS
Dup cum tim deja, n afar de selector, care face parte din regula CSS, trebuie s cunoa tem i
ce proprieti i valori putem utiliza.
Normal c nu trebuie s nvai pe de rost toate proprietile posibile, deoarece, pe de o parte,

exist prea multe, iar, pe de alt parte, nici nu e necesar. Oricum, v stau ntotdeauna la dispoziie
i pe internet i/sau n bibliografie2. Important este s tii cum i unde s le aplicai.
Cele mai des folosite proprieti vor fi abordate pe parcusul cursului.
Afiarea n diferite browser-e
Pe oricine ntrebai, un dezvoltator web cu experien, un designer sau, n general, orice persoan
cu experien n HTML i CSS, dac CSS se comport identic n diferite browser-e, rspunsul pe
care-l vei primi va fi unul negativ. Ca i HTML, CSS este un document text care trebuie parsat
i afiat, iar toate acestea depind de multe detalii, n special de browser. A devenit deja celebr
povestea browser-ului Internet Explorer i (ne)respectarea standardelor general-acceptate. n
continuare, Internet Explorer rmne n urma celorlalte browser-e moderne (Chrome, Opera,
Firefox). Ceea ce noi, ca programatori web, trebuie s facem este s testm site-urile noastre n
diferite browser-e, pentru a fi siguri c totul se afieaz n mod normal. Nu este suficient s
crem un site n care totul se afieaz perfect, de exemplu n browser-ul Chrome, i s ignorm
c totul arat greit n Internet Explorer. Poate nu folosii Internet Explorer, dar mul i al ii l
folosesc.
nainte de a ncepe s lucrai la un site, trebuie s determinai (sau s ajungei la un acord cu cel
care a comandat site-ul) ce browser-e va susine pentru a ti pe ce funcii v putei baza, deoarece
unele versiuni mai vechi pur i simplu nu suport funcii mai noi. De exemplu, dac proprietarul
site-ului v cere ca site-ul s se deschid normal n Internet Explorer 7, putei uita de toate
funciile mai noi, precum HTML5, CSS3 etc.
Limbajul CSS:
folosete toate tag-urile din limbajul HTML
folosete unele tag-uri din limbajul HTML
nu folosete tag-uri HTML, ci doar reguli CSS

103
ntrebarea legat de cum putem soluiona situaia n care ntr-un browser ceva poate fi afi at
normal, n timp ce n altul nu, rmne n picioare. Vom ncepe verificarea, parcurgnd
urmtoarele etape:
Exist o eroare n codul nostru HTML i/sau CSS? Dac browser-ul gsete un tag
deschis, tag-uri suprapuse, o regul CSS scris incorect etc., el va ncerca s presupun ce
ar trebui s se afle aici i atunci apar problemele. n majoritatea cazurilor, problema se
afl aici, iar nu n browser.
Browser-ul n care apare problema suport ceea ce vrem s realizm? Am menionat

deja acest detaliu n paragraful precedent. Nu toate browser-ele suport totul. De
exemplu, versiunea 6 de Internet Explorer nu suport fiierele PNG transparente. n toate
celelalte browser-e, un astfel de PNG va fi afiat normal, excepie fcnd doar browser-ul
de mai sus. Putem s nlocuim imaginile PNG cu altele diferite sau s ignorm acest
browser, ns aceasta este deja o chestiune legat de planificare.
Dac am trecut cu bine de cele dou etape sus-menionate i problema noastr nu este
legat de ele, atunci avem de-a face cu un CSS browser bug (o problem de browser),
respectiv browser quirk. n acest caz, cel mai bine ar fi s cutm un rspuns sau o
soluie pe internet, deoarece este aproape probabil ca cineva s se fi confruntat nainte cu
aceeai problem sau cu una similar i s fi mprtit soluia cu alte persoane de pe
internet.
Modelul CSS
Am menionat mai devreme n curs c fiecare element de pe o pagin HTML poate fi reprezentat
printr-un cadru (engl. box) imaginar trasat n jurul lui i c exist elemente Inline i Block. n
aceast lecie, ne vom ocupa n detaliu de aceste noiuni, precum i de modul n care putem
gestiona aceste cadre din jurul elementelor prin CSS box model.
IMPORTANT: Nu confundai noiunile de elemente Inline i stilizare CSS Inline. Elementele

Inline reprezint un tip de element de pe paginile HTML, n timp ce stilizarea CSS Inline
reprezint un mod de a posta stilizarea CSS pe orice element (n urmtoarea lecie, vei afla mai
multe informaii).
Bazele layoutului
Dac lucrm n Adobe Illustrator, putem aranja cadrele (layouts) pentru text cum vrem, mutndu-
le n document. n Photoshop, putem desena pe straturi (layers) oriunde vrem. n Microsoft
Word, putem muta imaginile dintr-un loc n altul prin glisare, dei am putea crede c acest lucru
funcioneaz i n HTML, i CSS. Adevrul este c ordonarea elementelor este foarte diferit.
Aici, ordonarea este un joc care const n mpingere i stivuire. Putem face o analogie cu cldirea
unui perete de crmid, unde trebuie s avem un rnd precedent (sau cel puin o crmid) ca
104
suport pentru urmtorul rnd. Diferena const n faptul c n cazul nostru crmizile sunt
aranjate de sus n jos, ns principiul de baz este identic.
Dac nu nelegei i nu acumulai cunotinele legate de organizarea elementelor i despre modul

de funcionare a combinaiilor de limbaje HTML/CSS, vei avea mari probleme mai trziu,
legate de transformarea designului ideal pe care l-am desenat n Photoshop (Fireworks,
Illustrator etc.) ntr-un document HTML funcional.
Elementele Block sunt aranjate unul sub altul,

n timp ce elementele Inline, unul lng altul
Toate elementele vizibile de pe o pagin, de la imagini i paragrafe pn la linkuri, sunt

localizate n cadre invizibile (n limba englez, se folosete termenul box).
Aceste cadre apar n dou variante: Block i Inline. Diferena dintre aceste elemente const n
comportamentul lor pe pagin:
Elementele Block sunt dreptunghiuri, care tind s umple ntregul spaiu orizontal.
Elementele Inline sunt dreptunghiuri, care se potrivesc cu alte elemente.
Imaginea 12.1 - Elementele Block i Inline
n ilustraia de mai sus, putem vedea n ce const diferena dintre aceste elemente. Elementele
Block se aranjeaz unul sub altul, indiferent de limea lor. Elementele Inline se aranjeaz unul
lng altul, precum literele ntr-un text.
Dac nu le definim altfel, elementele Block ocup ct mai mult spaiu pe orizontal i mut
elementul precedent i pe cel urmtor deasupra sau sub ele. Practic, mping toate elementele
aflate lng ele dedesubt i rmn singure pe rndul respectiv. Elementele Block reprezint
instrumentul principal de a ordona paginile. nlimea depinde de coninutul inserat (n caz c nu
este definit altfel).
105
Elementele Inline se bazeaz pe formatarea textului i astfel se i scriu. Dimensiunile lor depind
doar de coninutul din cadrul lor. Dac definim limea unui element Inline, de exemplu la 200
px, nu se va ntmpla nimic, limea lui va depinde n continuare de limea coninutului. Contrar
acestui lucru, adugarea de text va mri limea.
n mod implicit, fiecare element de pe pagin (n cadrul seciunii <body>) este element Block
sau Inline. Totui, cu ajutorul lui CSS, putem schimba un element Inline ntr-unul Block sau
invers. De exemplu, elementele de pe o list neordonat (Block) se pot transforma n elemente
Inline i astfel obinem un rnd de text cu elemente puse unul lng altul. De asemenea, putem
schimba un ir de linkuri dintr-un text (Inline) n elemente Block, pentru a obine linkuri aranjate
pe vertical.
Prin urmare, fiecare element vizibil poate fi Block sau Inline, ntrebarea este doar dac avem
nevoie de aa ceva ntr-un anumit context.
n mod implicit, n elementele Block intr:
elemente div (<div>);
paragrafe (!ss!p>);
liste (<ul>);
elementele listelor (<li>);
titluri (<h1> <h6>);
tabele (<table>);
elementele HTML5 de baz (<section>, <aside>, <nav>, <header> i <footer>);
tag-ul body (<body>).
n mod implicit, n elementele Inline intr:
elemente span (<span>);
linkuri (<a>);
formatarea bold (<strong> sau <b>);
formatarea italic (<em> sau <i>);

106
imagini (<img>);
citate (<cite>);
etichete (<label>).
Elementele (tag-urile) din partea head a paginii, precum <script>, <meta>, <link> i altele, nu
sunt nici Inline, nici Block, deoarece nu sunt vizibile pe pagin i nu respect aceste reguli.
Gruparea elementelor
Gruparea mai multor elemente ntr-un singur element Block (div)
Elementul <div> ne permite s grupm mai multe elemente ntr-un singur element Block. De
exemplu, putem s crem un div pentru antetul paginii i s punem n el toate elementele
antetului (logo, slogan, navigare, cutare).
Tag-ul div, fiind de tip Block, ncepe pe un rnd nou. n afar de aceasta, el nu influeneaz
aspectul paginii. n mod implicit, div-urile nu au niciun fel de stilizare (fundalul este transparent,
border, margin i padding sunt 0, nlimea depinde de coninut i aa mai departe). Totui, le
putem aduga valori ID i/sau CLASS i s le intim cu regulile CSS. Aceast simplitate de baz,
pe de o parte, i marile posibiliti de stilizare, pe de alt parte, fac din elementele div structura
de baz a fiecrui site.
Elementul div (box) poate s conin mai multe elemente diferite, crend astfel o ierarhie care
reprezint elementele ncorporate ale paginii. n aceast ierarhie, fereastra browser-ului
reprezint elementul Root (rdcin).
Gruparea mai multor elemente ntr-un singur element Inline (SPAN)
Elementul <span> este echivalentul Inline al elementului <div>. Cu ajutorul lui putem grupa
mai multe elemente Inline ntr-unul singur. De obicei, se folosete pentru a separa prile din
text, deoarece putem, de exemplu, s marcm o parte din text, s adugm CLASS sau ID, iar
apoi cu o descriere CSS s influenm partea respectiv a textului (care este nconjurat de span).
Ceea ce este specific pentru span este faptul c acesta nu trebuie s conin elemente Block, ci
doar alte elemente Inline. n specificarea W3C, despre HTML se spun urmtoarele:
Generally, block-level elements may contain inline elements and other block-level elements.
Generally, inline elements may contain only data and other inline elements. Inherent in this
structural distinction is the idea that block elements create "larger" structures than inline
elements. (n general, elementele block-level pot conine elemente inline i alte elemente block-
level. De obicei, elementele inline pot conine doar date i alte elemente inline. Inerent n aceast
107
deosebire de structur este ideea c elementele block creeaz structuri mai mari dect
elementele inline.) 1
Prin urmare, elementele Block pot conine att elemente Inline, ct i Block, n timp ce
elementele Inline pot conine doar alte elemente Inline.
Modelul CSS Box
Dup cum am menionat deja, n jurul fiecrui element vizibil de pe pagin exist un cadru ( box)
imaginar pe care l putem stiliza. Dac am mpr i afiarea unui element n etape, am obine
urmtoarea ordine: HTML seteaz coninutul i creeaz un cadru imaginar. CSS stilizeaz cadrul
respectiv, l modific dup nevoie, pentru ca n final s afieze utilizatorului elementul respectiv.
Modelul Box este alctuit din 5 proprieti de baz ale elementelor. Acestea sunt:
Width (limea);
Height (nlimea);
Margin (marginea sau spaiul extern);
Padding (padding sau spaiul intern);
Border (bordur, cadru);
Dei nu intr n modelul CSS Box, deseori se adaug i proprietatea Background

(fundalul).
Iat un exemplu n acest sens. Mai jos se afl un paragraf de text stilizat:
Imaginea 12.2 - Paragraf de text stilizat pe pagin
Acesta conine toate elementele modelului CSS box marcate n imaginea de mai jos:
108
Imaginea 12.3 - Acelai paragraf de text cu elementele modelului CSS box afiate
Marginile sunt ntotdeauna transparente i separ elementul de alte elemente de pe pagin.

Cadrele (Borders) pot avea diferite stiluri i stabilesc graniele elementului. Padding separ
coninutul (content) unui element de cadrele sale. Setrile elementelor de fundal se refer la aria
din interiorul cadrului, mpreun cu seciunea Padding i Content (n imagine, seciunea Padding
este afiat cu verde mai nchis, dei n realitate este invizibil).
Proprietile Margins, Borders i Padding pot avea valori diferite pentru fiecare parte a unui
element (Top, Right, Bottom, Left). n mod implicit, aceste proprieti sunt, de obicei, 0.
Marginile pot avea i o valoare negativ, dei acest lucru nu este recomandat.
Este important de reinut c valorile Width i Height determin doar limea, respectiv nlimea
coninutului elementului. nlimea i limea real pe care elementul le ocup pe pagin
sunt Content + Padding + Border.
De exemplu, dac avem un element div n care coninutul este de 100x100 pixeli, Padding este
10 px (pe toate prile), iar Border este 2 pixeli (de asemenea, pe toate prile), acesta va ocupa
124x124 pixeli. Asta se datoreaz faptului c limea total este: 100px pentru coninut + 10px
pentru Padding x2 pentru Padding-ului din stnga i dreapta + 2px pentru Border x2, deoarece
avem i cadru n stnga i n dreapta (100 + 10x2 + 2x2 = 124px). Acelai lucru este valabil i
pentru nlime.
Codul CSS pentru elementele din acest exemplu ar putea fi:
1 div {
width:100px;
2
height:100px;
3
4 padding:10px;
5 margin:0;
6
7 border-width:2px;
8 border-style:solid;
border-color:#f90;
9 }
109
10
11
n continuarea leciei, vom vedea detaliile acestor proprieti.
Proprietile CSS n modelul box
Width i Height
Cele dou proprieti reprezint limea, respectiv nlimea coninutului elementului. n mod
implicit, limea i nlimea sunt att de mari ct trebuie s nconjoare coninutul. Excepie face
limea elementelor Block, care se extinde la maxim.
Valoarea poate fi n pixeli, procente sau n valori em. Pixelii sunt cel mai popular mod i se
folosesc n majoritatea cazurilor. Dac folosim procente, dimensiunea va fi stabilit de
dimensiunea ferestrei browser-ului, respectiv de dimensiunea elementului printe (dac exist).
La valoarea em, dimensiunea depinde de dimensiunea textului (fontului) din cadrul lui:
1 .myDiv {
2 width:400px;
3 height:80%;
}
4
Padding
Aceast proprietate definete spaiul intern (Padding). Dac nu punem nicio valoare, cea
implicit este 0. Dac proprietatea nu conine niciun sufix, atunci aceasta se aplic pe toate cele
patru pri:
1 ...
2 padding:10px;
3 ...
Dac vrem valori Padding diferite sus, la dreapta, la stnga i jos, putem scrie, de exemplu:
1 ...
2 padding-top:10px;
3 padding-right:15px;
4 padding-bottom:20px;
padding-left:25px;
5
...
6
110
Exist i un mod prescurtat de scriere (Shorthand). Putem folosi doar proprietatea Padding (fr
sufix), pentru a determina toate cele 4 valori. La proprietatea Shorthand padding, putem s
scriem:
1 ...
2 padding:10px 15px 20px 25px;
3 ...
O declaraie scris astfel va avea acelai rezultat ca i cele patru de mai sus. Este important de
menionat doar c valorile se scriu ntotdeauna n sensul acelor de ceasornic, ncepnd de sus. n
exemplul nostru, 10 px este valoarea Padding-ului de sus, 15 px a celui din dreapta, 20 px a celui
de jos, iar 25 px a celui din stnga.
Margin
Aceast proprietate definete spaiul extern (Margin). Toate regulile valabile pentru Padding sunt
valabile i pentru Margin. Valoarea implicit este 0 la elementele div. Putem s scriem
proprietatea general (Margin) sau s folosim aceleai sufixe pentru pri ca i la Padding sau
putem s scriem i proprietatea shorthand (prescurtat).
1... 1... 1...

2margin:100px; 2margin-top:100px; 2margin:100px 30px 200px 25px;
3 /* toate identice */ 3margin-right:30px; 3...
...
4 4margin-bottom:200px;
5margin-left:25px;
...
6
n ceea ce privete marginile, este important de tiut c ele sunt pliabile (collapse), respectiv dac
dou elemente se afl unul sub altul i dac exist margini ntre ele (marginea de jos a
elementului de sus i marginea de sus a elementului de jos), spaiul total nu va fi egal cu suma
marginilor; va fi aplicat cea mai mare valoare dintre cele dou. n opoziie cu acest lucru, dac
elementele se afl unul lng altul, marginile nu se pliaz, ci sunt adunate.
111
Imaginea 12.4 - Ilustrarea marginii
Border-width
Folosim aceast proprietate pentru a defini grosimea marginii din jurul elementului. Putem folosi
pixeli sau una dintre urmtoarele trei valori: thin, medium, thick. n acest caz, procentele i alte
uniti nu sunt permise. La fel ca la margin i padding, valoarea border se aplic tuturor celor
patru pri. Valorile diferite le putem scrie prescurtat (shorthand) sau separat, de exemplu:
1 ...
2 border-top-width: 6px;
3 border-right-width: medium;
4 border-bottom-width: 3px;
border-left-width: thin;
5
...
6
Border-style
Aceast proprietate se folosete pentru a determina tipul de bordur, cadrul ( border) din jurul
elementului. n imaginea de mai jos, putem vedea opiunile posibile. n general, se
folosete solid (o linie simpl). Valoarea este propriul nume al tipului: solid, double, grooved etc.
112
Imaginea 12.5 - Tipuri de border
Dac toate marginile elementului sunt identice, scriem:
1 ...
2 border-style:solid;
3 ...
De asemenea, putem determina i tipul marginii, folosind:
1 ...
2 border-top-style: solid;
3 border-right-style: groove;
4 border-bottom-style: dotted;
border-left-style: outset;
5
...
6
Border-color
Dup cum i spune numele, aceast proprietate definete culoarea marginii. Valoarea culorii
poate fi scris n diferite moduri, cu ajutorul sistemului hex, RGB sau cu ajutorul numelor
culorilor (despre culorile pe web vom discuta ntr-o lecie separat):
1 border-color: #FF9900;
Alte proprieti importante

113
Display
Mai devreme, am menionat c elementele Block se pot transforma n elemente Inline i invers.
Tipul de element poate fi determinat folosind proprietatea Display prin CSS. Dac, de exemplu,
la valoarea Display a unui element Inline i atribuim valoarea Block, atunci acest element va fi
tratat ca oricare alt element Block:
1 span {
2 display:block;
3 }
Cu acest exemplu, am transformat elementele span n elemente Block.
n afar de valorile Block i Inline, pe care le folosim pentru a schimba tipul, proprietatea
Display poate avea i valoarea none. n acest caz, dac aplicm display:none, browser-ul se va
comporta ca i cnd elementul nu ar exista, dei acesta se va afla n cod. De asemenea, orice
element ncorporat n cadrul elementului respectiv nu va fi afiat, dei i este acordat o alt
valoare Display.
De exemplu, tag-ul span este un element Inline. Dac atribuim valoarea display:block, practic
aceasta se va comporta ca un div. Pe de alt parte, dac postm display:none, span-ul menionat
nu va fi vizibil. Totui, trebuie s reinem faptul c, datorit acestei opiuni nu eliminm n
totalitate elementul, ci doar ascundem afiarea lui, ns utilizatorul va putea citi ntotdeauna
codul-surs HTML, pe care l conine partea respectiv. Datele sensibile nu ar trebui ascunse n
acest mod.
Visibility
Proprietatea visibility asigur ascunderea unui anumit element, n timp ce spaiul rezervat pentru
elementul respectiv rmne. Poate avea una dintre urmtoarele dou valori: hidden (ascunde
elementul) sau visible (afieaz elementul - aceasta este valoarea implicit i nu trebuie s o
scriem).
1 span {
2 visibility:hidden;
3 }
Diferena dintre visibility:hidden; i display:none; const n faptul c, n primul caz, elementul

dispare, ns rmne un spaiu rezervat pentru el, iar celelalte elemente nu se mut, n timp ce n
al doilea caz, elementul dispare de pe pagin i odat cu el i spaiul rezervat, aadar i celelalte
elemente se mut pe pagin. V reamintim c, atunci cnd se utilizeaz aceste dou tehnici,
elementele sunt ascunse utilizatorului doar din punct de vedere vizual, rmnnd n continuare
disponibile n cod, aadar nu trebuie s ascundem date sensibile n acest mod.
114
Overflow
Aceast proprietate se folosete pentru a defini ce se ntmpl n cazul n care coninutul

depete cadrele date. De exemplu, putem s definim limea i nlimea unui div la 200x300
px, iar apoi s introducem ntreaga pagin de text. Deoarece dimensiunile definite sunt mai mici
dect cele necesare, textul ntreg nu va fi vizibil (partea care depete div-ul). Totui, folosind
proprietatea overflow, putem s definim cazul n care coninutul din cadrul elementului se
deruleaz utiliznd overflow:scroll; . O alt valoare posibil este overflow:hidden; , care va tia
partea ce iese n afara cadrului. Valoarea implicit este overflow:visible;
1 div.myText {
2 overflow:scroll;
3 }
n trecut, aceast proprietate se folosea mai mult pentru introducerea textelor mai lungi n ni te
cadre limitate. Acum, odat cu dezvoltarea web-ului, proprietatea a devenit inutil, chiar
ineficient. Totui, o caracteristic secundar a acestei proprieti a devenit util pe site-urile
moderne, ns despre ea vom vorbi mai trziu, n cadrul leciei care abordeaz aranjarea
elementelor.
Min-width, max-width
Dup cum ne i spun denumirile acestor proprieti, este vorba de o lime minim, respectiv
maxim a elementelor. n loc s folosim dimensiuni fixe, putem s definim dimensiunea minim
i/sau maxim:
1 #wrapper {
2 min-width:960px;
3 max-width:1280px;
}
4
Utilizarea ambelor proprieti n acelai element nu este obligatorie. Nu trebuie combinate cu

limea fix.
Min-height, max-height
Proprietile min-height i max-height se comport la fel ca proprietile menionate mai sus,

singura diferen constnd n faptul c se refer la nimea elementului:
1 p {
2 min-height:10px;
3 max-height:26px;
}
4
115
Fluxul documentului
Pn acum, ne-am familiarizat cu bazele limbajului CSS i cu proprietile elementelor. n cadrul
acestei lecii, ne vom extinde cunotinele i vom discuta despre fluxul documentului, respectiv
modul de aranjare a elementelor unul peste altul i de creare a structurii. Vom explica diferenele
dintre un flux normal (engl. natural stack) i alte tipuri. Vom vedea ce este valoarea float i cnd
se aplic.
Poziionarea
Cnd poziionm elementele, distingem urmtoarele tipuri:
static (care este implicit);
relative;
absolute;
fixed.
Poziionarea static i relativ creeaz un flux normal al documentului.
Poziionarea static
n mod implicit, Static este poziionarea de baz a fiecrui element de pe pagin. Deseori, aceast
poziionare nici nu este menionat n literatura de specialitate sau este indicat ca implicit,
normal etc. Important este faptul c exist i c poate fi aplicat pe elemente.
Poziionarea static este aplicat pe toate elementele care nu au o poziie specificat n prealabil
prin Absolute sau Fixed i care nu sunt Floated (despre float vom discuta mai trziu).
n lecia despre elemente, am aflat care sunt regulile de baz ale fluxului normal, iar acum le
vom repeta. Elementele Block sunt poziionate unul sub altul pe vertical, n timp ce elementele
Inline sunt poziionate pe orizontal, de la stnga la dreapta. Marginile verticale se suprapun n
fluxul normal al documentului. Aceasta nseamn c, n loc s adunm valorile marginilor
elementului de sus i de jos, calculm doar marginea mai mare. Marginile orizontale nu se
suprapun niciodat.
Poziionarea relativ
116
Cnd unui element i se acord proprietatea position:relative, atunci elementul este poziionat
iniial dup regulile fluxului normal, respectiv complet identic, dar cu o singur diferen n
raport cu poziionarea static; de aceea, poziionarea relativ este considerat un mod separat de
poziionare.
Elementul poate fi mutat din poziia sa iniial, iar spaiul pe care l ocup rmne gol. l mutm
conform proprietilor Offset, care pot fi Left (stnga), Right (dreapta), Top (sus) i Bottom (jos).
Valoarea fiecreia dintre aceste proprieti reprezint distana la care ar trebui mutat marginea
corespunztoare a elementului n raport cu poziia elementului n varianta static:
Imaginea 13.1 - Poziionarea relativ
Box 1 folosete poziionarea relativ pentru a se muta spre dreapta cu 120px, n raport cu poziia
lui de start. Box-urile 2 i 3 rmn n acelai loc, pe poziii neschimbate (se comport ca i cnd
Box 1 nu i-ar fi schimbat poziia, respectiv ca i cnd ar fi rmas n acelai loc), deoarece
poziionarea relativ nu mut elementele din fluxul normal.
Atenie: Deplasarea spre dreapta se marcheaz cu proprietatea left, deoarece elementul cu

valoarea sa este ndeprtat de marginea stng a poziiei de baz. n mod analog, proprietatea top
mut elementul n jos.
Poziionarea absolut
117
Elementele cu proprietatea position:absolute; sunt eliminate, respectiv mutate din fluxul normal
i nu influeneaz celelalte elemente. Poziia elementelor este determinat pe baza valorilor
Offset, care pot fi Left, Right, Top i Bottom. Aceste valori se comport aproape la fel ca i n
cazul poziionrii relative, doar c la poziionarea absolut elementul este mutat n raport cu
elementul printe, care trebuie i el poziionat, respectiv trebuie s i se atribuie proprietatea
position. Cel mai simplu este s adugm position:relative elementului printe, dac nu vrem s-l
mutm.
Poziionarea absolut ne permite s definim unde ar trebui s poziionm n mod absolut

elementul n raport cu pagina sau n raport cu elementul printe:
Imaginea 13.2 - Poziionarea absolut
Box 1 este poziionat absolut, proprietile Left i Top l mut la dreapta i n jos, n timp ce Box
2 i 3 se comport ca i cnd Box 1 nici nu exist i i ocup poziia n fluxul normal. Din cauza
noii sale poziii, Box 1 se suprapune peste Box 3 i orice modificare a coninutului lui Box 3 nu
influeneaz poziia celorlalte dou elemente.
O capcan frecvent pentru nceptori const tocmai n folosirea poziionrii absolute pentru
toate elementele. Dei poate prea atrgtor, acest lucru poate crea mari probleme (i le va crea
cu siguran) mai trziu, n timpul activitii.
Acest tip de poziionare trebuie folosit doar uneori, respectiv atunci cnd este necesar, ns cu
mare atenie.
118
Poziionarea fix
Poziionarea fix este un tip special de poziionare absolut. Cnd derulm pagina, elementul fix
nu se mut la fel ca restul elementelor. Acest mod de poziionare nu este suportat de Internet
Explorer 6, precum i de versiunile mai vechi ale acestuia. Totui, acest lucru nu mai este
important, fiindc Internet Explorer 6 aproape c nici nu se mai folosete:
1 #myElement {
2 position:fixed;
3 left:10%;
}
4
Elementul este mutat la dreapta cu 10% din limea total a ferestrei browser-ului i este fixat n
acel loc, astfel nct, atunci cnd derulm pagina, myElement rmne n acelai loc, indiferent de
restul elementelor.
Utilizarea elementelor Block pentru layout
Pentru a crea structura de baz a paginii, folosim elementele Block (de obicei, DIV-urile). Am
menionat c n trecut n acest scop se utilizau tabelele invizibile, ns astzi nu mai sunt
recomandate.
Prin urmare, crend elementele DIV i aranjndu-le n uniti, setm aspectul de baz (layoutul)
al paginii noastre, respectiv al site-ului.
Pentru a ilustra asta, vom analiza exemplul de mai jos:

119
Imaginea 13.3 - Un layout ntlnit frecvent pe site-uri
n imagine, nu este prezentat pagina site-ului, ci un layout frecvent ntlnit n zilele noastre pe
site-uri. Haidei s vedem un blog de design web popular n zilele noastre www.noupe.com i
principalul su layout. Liniile mov au fost adugate pentru a ne ajuta s identificm mai uor
regiunile. n mod normal, aceste linii nu exist pe site.
Imaginea 13.4 - http://www.noupe.com/
n acest exemplu, vedem c este foarte similar cu conceptul nostru din imaginea precedent, dei
din cauza designului acest lucru nu se observ la prima vedere. Dei utilizatorul nici nu este
contient de acest fapt, regiunea principal a site-ului a fost creat astfel nct s putem seta
elementele DIV (sau echivalentele lor din limbajul HTML5).
120
Setarea layoutului
Exist patru reguli sau aspecte pe care trebuie s le respectm atunci cnd setm elementele
Block pentru layout, i anume:
1. Dimensiunile - spaiul ocupat de element i care este influenat;
2. Float - efectul asupra comportamentului Block-ului. Separarea de fluxul normal;
3. Clear - restabilirea fluxului normal;
4. Embedding - elementul se afl fie n interiorul unui alt element, fie la acelai nivel al
ierarhiei, fr s existe nimic ntre.
Important: Toate elementele se refer la fluxul normal (la poziionarea Static i Relative).
Poziionrile Absolute i Fixed sunt diferite din punct de vedere conceptual, iar aceste noiuni nu
se refer la ele.
1. Limea total
Limea total depinde de mai multe proprieti ale elementului, dup cum am explicat deja n
lecia precedent. Dimensiunile totale sunt influenate de lime/nlime, dar i de padding i
border. n afar de aceasta, marginile elementului se afl, din punct de vedere vizual, n afara
elementului, ns afecteaz i spaiul pe care l ocup i pe care l influeneaz.
Dac adunm greit dimensiunile, se vor semnala erori. De exemplu, dac postm un DIV cu o
lime de 1000 px, iar n cadrul lui vrem s punem alte dou DIV-uri, unul lng altul, le putem
atribui o lime de 500 px numai dac valorile pentru margin, padding i border sunt 0. Dac
modificm (mrim) dimensiunile respective, trebuie s reducem limea pentru ca suma s
rmn la 1000 px (sau mai puin de 1000 px).
2. Float
Floating se realizeaz prin proprietatea float, cu valorile left (stnga) i right (dreapta). Cnd
atribuim aceast valoare unui element, acesta iese din fluxul normal pe care l-am menionat mai
devreme i se comport diferit. Pe vertical, este poziionat la fel (ca la fluxul normal - static sau
relativ), n timp ce pe orizontal este poziionat mult spre stnga sau dreapta, ct de departe este
posibil n cadrul Block-ului care l conine. Spre deosebire de box-urile din fluxul normal,
marginile verticale ale unui element floated nu se suprapune niciodat cu marginile elementelor
de deasupra sau dedesubt:
121
Imaginea 13.5 - Afiarea comportamentului elementelor float
n imaginea de mai sus, n partea marcat cu A putem vedea mai multe elemente Block, care se
afl n fluxul normal (nu le-a fost setat float). n imagine, B este un element cu proprietatea float
setat la float:right; poziia lui se schimb imediat spre dreapta la nlimea la care a i fost pus la
nceput. Toate elementele care urmeaz ignor elementul float i i ocup locul. Dac punem
float i pe urmtorul element (cel marcat cu C), el se va muta spre dreapta pn la elementul
floated, ns aceste dou elemente nu se vor suprapune. Celelalte elemente se mut din nou, fr
s fie influenate de cele dou.
Float se aplic foarte simplu, adugnd proprietatea float i valorile left i right la regula CSS
dorit:
1 #sidebar {
2 float:right;
3 width:200px;
}
4
V recomandm ca valoarea float s fie urmat ntotdeauna de limea elementului.
3. Clear
Una dintre caracteristicile (putem spune inconvenabil) proprietii float este c elementul
printe, care conine elementul float, nu-i recunoate nlimea (Height). Prin urmare, nlimea
elementului float nu influeneaz comportamentul (nlimea) elementului printe. Elementul
printe se strduiete s cuprind ntotdeauna toate elementele sale, n afar de cele float. De ce
este important acest lucru? Este important deoarece, dac elementul printe conine doar
elemente floated, nu va avea nlime, respectiv va fi egal cu zero (dac nu este setat manual
prin proprietatea Height). Pe o pagin n care majoritatea elementelor se afl n fluxul normal,
acest lucru poate crea un adevrat haos. De asemenea, elementele care nu sunt floated, dar care
sunt inserate dup elementele floated, pur i simplu nu vor recunoate aceste elemente floated.
Haidei s observm ilustraia de mai jos:
122
Imaginea 13.6 - Afiarea comportamentului elementelor float
La nceput (A), sunt setate dou elemente DIV, X i Y, crora nu li s-a specificat nlimea, aa c
depind de elementele interne. X conine trei elemente Block.
Dac aplicm proprietatea float pe unul dintre cele trei elemente X (B), celelalte dou se vor
plasa lng el i doar nlimea lor (a elementelor care nu sunt float) influeneaz DIV-ul X
(vedem c i se micoreaz nlimea), iar elementul Y se mut n sus.
Dac toate cele trei elemente din cadrul elementului X sunt float:left; (imaginea C), elementul X
i va pierde complet nlimea. Elementele sale sunt n continuare vizibile, ns urmtorul
element Y s-a mutat pn la X. Elementele se suprapun i se creeaz un adevrat haos.
Soluia este simpl i const n adugarea proprietii clear pe elementul care urmeaz imediat
dup elementele floated. n acest caz, este vorba de elementul Y. Proprietatea clear menionat
poate avea valorile left, right sau both. Cu ele marcm tipul de elemente float de deasupra, pe
care vrem s-l rezolvm, respectiv ca elementul nostru s-l recunoasc. n exemplul nostru, dac
toate cele trei elemente din cadrul lui X au float:left; atunci clear:left sau clear:both;
pe elementul Y, soluioneaz problema.
1 #footer {
2 clear:both;
3 }
Poate v punei ntrebarea de ce am folosit clear. Am fcut-o pentru a seta nlimea (Height) pe
elementele din jur. Aceasta ar putea fi o soluie, ns astfel am limita multe aspecte ale propriei
noastre pagini. De obicei, aceste elemente se folosesc pentru elementele de baz ale structurii,
ceea ce nseamn c diferite pagini de pe acelai site (cu elemente identice) pot avea coninuturi
diferite. Printre designeri web circul o vorb: Dac putei s dublai ntregul coninut al
paginii (s avei un text de dou ori mai lung sau dou imagini n loc de una etc.) fr s-i
distrugei aspectul, atunci ai creat un layout bun.
123
Informaii suplimentare despre proprietatea float
Dei conceput cu intenia de a organiza float, proprietatea clear nu reprezint ntotdeauna cea
mai bun soluie. n general, se utilizeaz pentru a aduga cel mai simplu element Block direct
dup elementele floated (de exemplu, tag-ul <br>), cu o nlime de 1 px, vizibilitatea 0 etc.
(deoarece nu trebuie s fie vizibil pe pagin), ns i se i adaug clear:both. Poate aceasta este
cea mai elegant soluie, ns necesit tag-ul suplimentar, care nu are un alt scop sau coninut.
O alt soluie, poate mai bun, care a aprut mai mult sau mai puin ntmpltor, este utilizarea
proprietii overflow, despre care am vorbit mai devreme. De fapt, dac elementul care
nconjoar elementele float conine proprietatea overflow:hidden; , va lua n considerare
nlimile lor i se va seta corect n jurul acestor elemente, ca i cnd nu ar avea float i astfel n-
ar mai fi nevoie de proprietatea clear. Utiliznd aceast soluie, evitm tag-urile suplimentare, iar
elementele care urmeaz nu trebuie s aib rnduri CSS suplimentare. n exemplul nostru de mai
sus, am fi putut s adugm overflow:hidden; pe elementul X i astfel am fi soluionat problema.
4. Embedding
Cnd planificm, trebuie s separm i s planificm clar elementele. Trebuie s definim ce

elemente se vor afla la acelai nivel, unul dup altul, i care se vor afla unul ntr-altul. V
reamintim c toate elementele se afl n elementul root (body), ns atunci pe toate celelalte le
putem pune n cadrul acestor elemente.
Exemplu de layout
Avnd n vedere c am nvat deja ce este float i cum putem insera elementele, haidei acum s
vedem un exemplu general. De exemplu, s zicem c vrem s inserm dou coloane n partea
central a paginii, apoi main div (pentru coninut) i sidebar div (pentru coninutul secundar). n
HTML am fi adugat, pur i simplu, urmtoarele:
1 <!DOCTYPE html>
<html>
2
<head>
3 <meta charset="utf-8" />
4 <title>Float</title>
5 </head>
6 <body>
7
<div id="wrapper">
8
9 <div id="main">
10 </div>
11
12 <div id="sidebar">
13 </div>
124
14
15
16 </div>
17
18 </body>
19 </html>
20
n timp ce n CSS am fi introdus:
1
2 #wrapper {
3 width:960px;
}
4
5 #main {
6 float:left;
7 width:700px;
8 padding:0 20px 0 20px;
9 }
10
#sidebar {
11 float:right;
12 width:200px;
13 padding:0 10px 0 10px;
14 }
15
Dac introducem coninutul n elementele main i sidebar, obinem ceva similar ilustraiei de mai
jos (partea stng a imaginii):
125
Imaginea 13.7 - Float al principalelor elemente
Dac privim cu mai mult atenie partea stng a ilustraiei i codul nostru, vom observa c suma
total a limilor este exact de 960px, ceea ce corespunde limii elementului din jur.
700px(main) + 2 x 20px (main padding) + 200px (sidebar) + 2 x 10px (sidebar padding) =

960px
Dac am fi mrit mcar cu un pixel una dintre aceste valori, am fi obinut ceva asemntor cu
partea dreapt a ilustraiei. Deoarece nu exist suficient spaiu (lime), sidebar ar fi trecut pe
rndul urmtor, respectiv sub seciunea main.
Bineneles, acestea sunt doar dou elemente. Acum, putem aduga un div header nainte de
partea main (n cadrul lui wrapper) i footer dup partea sidebar (nainte de a nchide wrapper
div). Singura diferen const n faptul c acestor dou elemente nu le trebuie float, aadar le
putem lsa s se extind pe ntreaga lime (n mod implicit, pentru elementele block).
Z index
126
Dac elementele sunt inserate cu ajutorul poziionrii relative, absolute sau fixe i dac se
suprapun, elementul care apare mai trziu n codul documentului va fi vizibil deasupra
elementului care a aprut mai devreme n cod, ascunzndu-l astfel ntr-o anumit msur.
Totui, putem influena aceast suprapunere utiliznd valoarea z-index. Aceasta este similar cu
opiunile send to back, bring forward sau cu alte opiuni similare pe care le putem gsi n Word,
Photoshop etc.
Ca valoare introducem orice valoare numeric la libera alegere, iar elementul cu valoarea mai
mare va fi vizibil. Valorile pot fi i negative:
1 .elementuldinFata {
2 z-index:100;
3 }
4
5 .elementuldinSpate {
z-index:-20;
6
}
7
Prin urmare, nu valorile sunt importante, ci relaia dintre ele.
Semantica i noile elemente HTML5
n HTML5, apar noi elemente sematice, care aproape c preiau rolul elemetelor div.
Dac ne axm numai asupra aspectului vizual, toate elementele noi se comport ca ni te div-uri
i nu exist niciun fel de diferen. Dar, pe de alt parte, contribuie la semantica paginii, adic
definesc scopul i menirea prilor paginii. Browser-ele, motoarele de cutare (Google, Bing etc.)
i diferite alte software-uri le pot analiza i trata diferit n funcie de scop.
Cele mai frecvente elemente noi de baz sunt:
Elementul <section> insereaz o parte a paginii, respectiv a documentului. Poate

cuprinde mai multe elemente identice (de exemplu, <article>), care au subiect sau scop
similar. Se poate folosi pentru gruparea altor elemente n uniti. Dintre elementele noi,
unii autori l consider cel mai apropiat de vechiul div.
Elementul <article> se comport ca un cadru pentru orice parte a paginii care se poate
evidenia n raport cu restul coninutului. Este destinat pentru articole, postri pe blog, pe
forumuri i orice alt coninut independent. Se pot ordona unul dup altul sau unul ntr-
altul (de exemplu, comentarii pentru un anumit post care este article - comentariile n
sine pot fi, de asemenea, article). Deseori, la nceput putem face confuzie ntre
<section> i <article>.
127
Elementul <nav> se folosete pentru introducerea i setarea principalelor elemente de

navigare pe pagin (site). nc exist o polemic dac nav trebuie folosit pentru toate
poziiile de pe linkuri din pagin sau doar pentru navigarea principal. O regul general-
acceptat este c nav trebuie folosit pentru Block-uri mai mari de navigare. De exemplu,
dac n footer setm doar linkuri pentru termenii de utilizare, informaii legale i pagina
de start, acestea nu trebuie puse n nav. Dar, dac n acelai footer avem repetate complet
principalele linkuri, principala navigare a site-ului, atunci trebuie folosit nav.
Elementul <aside> are dou scopuri, n funcie de faptul dac se afl n cadrul
elementului <article> sau nu:
o Dac se afl n interiorul elementului <article>, conine informaii legate de

acesta, dar care nu au importan esenial. De exemplu, citate care nso esc textul
etc.
o Dac se afl n afara elementului <article>, se refer la ntreaga pagin. Deseori,

se folosete ca sidebar principal. Aici, se pot gsi reclame, formulare de contact,
linkuri ctre alte pagini recomandate etc.
Elementul <header> se folosete pentru a defini un header individual al unei anumite

pri sau al unui anumit element al paginii (de exemplu: <article> sau <section>) sau,
mult mai frecvent, pentru a defini principalul header al paginii. Dac se afl n cadrul
unei pri a paginii, separ antetul de partea respectiv i, n cadrul su, titlul, respectiv
<hgroup>, dac e necesar etc. n cazul n care se afl direct pe pagin, seteaz headerul
site-ului care conine logoul, motorul de cutare, navigarea etc.
<footer> este asemntor cu headerul, dar are alt scop. n timp ce headerul seteaz
antetul, footerul seteaz partea final a elementului sau a paginii. Dac se afl n
interiorul unei pri a paginii, poate conine numele autorului textului, paginile legate etc.
Dac se afl direct pe pagin, poate s conin diferite elemente care se gsesc, de obicei,
n partea de jos a site-urilor (informaii legale, linkuri ctre harta site-ului i ctre regulile
de utilizare, navigarea repetat etc.).
<figure> are ca principal scop ncadrarea coninutului suplimentar legat de text (partea
paginii). De exemplu, pentru setarea imaginilor, a materialului video, a diagramelor etc.
n cadrul su, se poate aduga i <figcaption> pe lng coninutul n sine, ca descriere.
n ultimul timp, se pune foarte des ntrebarea: Cnd i n ce situaie putem folosi un element
HTML5 sau altul i, n general, dac le putem folosi sau dac ar trebui s le folosim sau ar trebui
s revenim la bine cunoscutul DIV? Toate aceste elemente vi se pot prea confuze acum,
deoarece unele sunt identice (de exemplu: aside i figure), dar fiecare are propriul scop.
n general, i elementele div se folosesc n continuare, nu sunt eliminate din uz. Putem spune c
div-ul se folosete ntotdeauna, excepie fcnd existena unui element determinat cu exactitate
pentru o anumit aplicare (de exemplu, header sau footer, i atunci folosim <header>, respectiv
<footer>).
128
Modul 6 Stilizarea CSS
Culorile pe web
Unitate: 14 din 17 00:12:36
+Rezumat
n aceast lecie, vom nva despre culorile de pe web i particularit ile lor. Vom vedea cum
prin CSS putem defini i controla culoarea n mai multe moduri. Ne vom ocupa i de
terminologia culorilor.
Modurile de definire a culorilor
Valorile culorilor pot fi definite n mai multe moduri. Putem folosi sistemele RGB sau HEX,
precum i denumirea culorilor (n englez). n versiunea 3 de CSS, putem folosi i HSLA, i
RGBA.
RGB
Monitoarele calculatoarelor i ale altor dispozitive, care afieaz site-uri, sunt alctuite din
aceleai ptrele mrunte, aproape invizibile ochiului liber, care se numesc pixeli. Combinnd
milioane de pixeli pe monitor, obinem o imagine. Fiecare pixel are o culoare alctuit din trei
componente, mai exact din rou (Red), verde (Green) i albastru (Blue). Primele litere ale acestor
culori formeaz i acronimul RGB. Dac vrei s aflai mai multe despre sistemele de culori, n
special despre modelul RGB, accesai urmtorul link: http://en.wikipedia.org/wiki/Rgb. Celelalte
sisteme, n special HEX, sunt foarte asemntoare.
129
Imaginea 14.1 - Ilustrarea modelului RGB
Conform celor sus-menionate, practic fiecare culoare poate fi reprezentat printr-o combinaie
de rou, verde i albastru. i alte instrumente, care nu sunt legate n mod obligatoriu de web, ci
de mass-media digital n general, afieaz culorile n acest sistem. n urmtoarea imagine, este
prezentat instrumentul Color Picker din aplicaia Adobe Photoshop CC. Putei observa trei
cmpuri pentru RGB (marcate cu o linie roie punctat):
130
Imaginea 14.2 - Fereastra Color Picker din Photoshop CC
n aceast imagine, a fost aleas culoarea roie. Valorile ei n sistemul RGB sunt (255,0,0).
Pentru a putea s afim orice culoare pe internet, scriem valorile componentelor sale. Valorile
ncep de la 0 (nicio culoare) pn la 255 (culoare saturat la maxim). n exemplul culorii rou,
componenta roie este setat la maxim, n timp ce verde i albastru sunt la minim (nu exist). De
aceea, marcajul culorii rou este (255,0,0). Marcajul culorii verde este (0,255,0), deoarece
componenta verde este la maxim.
Culoarea alb este marcat cu (255,255,255) i atunci toate cele trei componente sunt la maxim,
n timp ce negru este (0,0,0), deoarece culorile sunt dezactivate. Toate combinaiile ntre aceste
componente i valorile lor cuprinse ntre 0-255 (256 de niveluri ale fiecrei componente) creeaz
restul culorilor. Combinnd aceste trei componente ntr-un raport variabil, afim fiecare culoare
pe ecran.
Dac acest lucru vi se pare complicat, nu trebuie s v facei probleme. Putei gsi cu u urin
valoarea culorilor RGB dac deschidei Photoshop sau un alt program de grafic similar (am
vzut un exemplu mai sus) sau putei cuta pe Google culorile rgb, rgb web colors sau alte
cuvinte-cheie asemntoare i vei obine multe pagini cu culorile listate. Sau, invers, dac
131
obinei o culoare RGB, dar nu tii care este, pur i simplu copiai-o n Google. De asemenea, n
ataamentul acestei uniti exist un document cu un tabel n care sunt afiate mai multe culori cu
valorile lor RGB i HEX. n plus, putei folosi i diferite instrumente online, cum ar fi unul foarte
interesant: http://paletton.com/
HEX
Sistemul hexazecimal de marcare a culorilor utilizeaz semne hexazecimale cu ase cifre. n

esen, este foarte asemntor cu sistemul RGB, ns componentele (rou, verde i albastru) sunt
reprezentate altfel. De fapt, n sistemul RGB, fiecare component este cuprins ntre 0 i 255, n
timp ce n sistemul HEX aceasta este de la 00 la FF. S ne reamintim de sistemul hexazecimal de
la matematic, unde cifrele nu sunt cuprinse numai ntre 0 - 9, ci includ i cifre, i litere:
1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. De exemplu, s comparm cteva numere zecimale i
hexazecimale:
Decimal 10 11 12 13 14 15 16 17
Hex A B C D E F 10 11
Tabelul 14.1
Este interesant c numerele care se scriu la fel n sistemul DEC i HEX, de exemplu 10 i 11, nu
sunt aceleai numere.
Deoarece fiecare component se scrie cu dou caractere HEX, culoarea plin (alctuit din trei
componente) se scrie cu ajutorul a ase caractere hex precedate de semnul #.
De exemplu, n sistemul HEX culoarea roie este #FF0000. Aceasta se datoreaz faptului c, la
fel ca i n sistemul RGB, rou este setat la maxim, iar celelalte dou componente sunt
dezactivate. Portocaliul este, de exemplu, #FF9900. Aici, roul este din nou la maxim (FF),
verdele este la un anumit nivel (99), n timp ce albastrul este dezactivat (00).
Imaginea 14.3 - Culoarea rou HEX

132
Ca i la sistemul RGB, nu trebuie s inem minte marcajele culorilor i s le calculm manual.

Putem gsi semne n diferite tabele, n Photoshop (n imaginea de sus a lui Color Picker, zona
este marcat cu linie albastr punctat) i aa mai departe.
O alt observaie n ceea ce privete sistemul HEX este c se poate ntmpla ca, n loc de
#FF9900, s ntlnii o culoare marcat cu #F90. Aceasta nu este o greeal, ci un mod mai scurt
de a scrie culorile HEX. Acest mod se poate aplica numai cu condiia ca ambele caractere s fie
la fel n fiecare component, dar independent de celelalte dou componente. n acest exemplu,
situaia este corect, deoarece fiecare component este alctuit din aceleai caractere # FF 99
00 i astfel obinem #F90. ntotdeauna putem folosi numele complet cu ase caractere.
Numele culorilor
Browser-ele recunosc 140 de culori denumite. Pentru rou, putem scrie simplu red, pentru
albastru, blue sau altele mai puin cunoscute: Chocolate, DeepPink etc. Acest sistem este ns
destul de ineficient i, n general, se evit. Toate culorile disponibile se pot gsi la urmtoarea
adres: http://www.w3schools.com/cssref/css_colornames.asp.
HSL
Acest mod de a scrie culorile este o noutate n CSS3, dar nc nu are o larg rspndire, deoarece
browser-ele mai vechi nu-l recunosc (Internet Explorer a nceput s suport HSL abia ncepnd
cu versiunea 9).
i acest sistem este alctuit din trei componente, dar acestea sunt diferite fa de variantele RGB
i HEX. n sistemul HSL, acestea sunt: Hue (nuan), Saturation (saturaie) i Lightness
(luminozitate).
Nuana este determinat de unghiul din paleta de culori i are valori cuprinse ntre 0 i
360 de grade.
Saturaia are valori cuprinse ntre 0% i 100%. 100% este saturaia complet, n timp ce
0% este o nuan de gri.
Luminozitatea reprezint procentul de alb sau negru (lumin) din culoare. Valoarea este
cuprins ntre 0% i 100%. 50% reprezint o luminozitate normal, n timp ce 0% este
negru, iar 100% este alb.
Dup cum am menionat deja, sistemul HSL de scriere a culorilor nu se folosete frecvent i nu a
devenit popular n practic.
Alpha
133
n CSS3, putem folosi HSLA, dar i sistemul extins RGB, denumit RGBA.
Observm c la ambele sisteme am adugat litera A, adic prescurtarea de la Alpha, care se

traduce prin transparen, dei nu acesta este cel mai adecvat termen. Ceea ce ne intereseaz este
faptul c, utiliznd acest al patrulea parametru, putem aduga transparen culorii. Parametrul
Alpha menionat este acelai i pentru RGBA, i pentru HSLA.
Valoarea Alpha se determin pe o scar de la 0 la 1. De exemplu, 0.3 reprezint 30% vizibilitate

(adic o transparen de 70%), n timp ce 0.75 reprezint o vizibilitate de 75% (adic o
transparen de 25%).
Deoarece aceasta este i noutatea pe care o aduce CSS3, trebuie folosit cu atenie i cu un
anumit scop.
Aplicarea culorilor
Pn acum, am vzut ce sisteme exist. Acum, vom vedea cum le putem aplica. Exist dou
aplicaii mai importante ale culorilor pe web: culoarea textului i culoarea de fundal. Pe lng
asta, mai putem aplica culoare marginilor (borders), celulelor i altor pri ale tabelului, putem
pune umbre pe elemente (n CSS3) i aa mai departe.
Culoarea textului
Culoarea textului se definete prin stabilirea proprietii color a elementului nconjurtor prin
regula CSS, n timp ce valoarea este doar culoarea nregistrat ntr-unul din sistemele mai vechi.
De exemplu, dac inserm urmtoarele:
1p {
2 color:#0000FF; /* culoare albastra */
3}
ntregul text din paragraf (dac nu este indicat altfel) va deveni albastru. Dei am fi putut
presupune c proprietatea color se refer la culoarea ntregului element sau la un alt aspect, nu
este cazul. Proprietatea color se refer doar la culoarea textului.
Culoarea n sine se poate defini cu ajutorul oricrui sistem menionat mai devreme. S vedem
acest exemplu:
1 h1 {
2 color:rgb(175,50,175); /* o culoare mov */
3 }
134
4
5
h2 {
6
color:#0000FF; /* culoare albastra */
7
}
8
9
10
h3 {
11
color:Yellow; /* culoare galbena */
12
}
13
14
h4 {
15 color:hsl(20,100%,50%); /* culoare portocalie */
16 }
17
Fiecare dintre aceste reguli CSS pentru titluri folosete un alt sistem pentru a indica culori. Se
pot gsi chiar i mai multe sisteme diferite pe aceeai proprietate, de exemplu:
1 p {
2 color:rgb(255,0,0);
3 color:blue;
4 color:#00FF00;
5 }
Totui, o descriere scris astfel nu va avea niciun sens, deoarece se aplic ntotdeauna ultima
proprietate. n acest caz, primele dou sunt ignorate.
n ceea ce privete valoarea Alpha, dac vrem o putem aduga sistemelor RGB i HSL, iar codul
poate arta astfel:
1 div {
2 color: rgba(255,0,255,0.5);
3 }
4
div {
5
135
6 color: hsla(80,50%,60%,0.8);
7 }
Observai c am adugat doar a patra component ca valoare ntre 0 i 1.
Culoarea de fundal
Culoarea de fundal a unui element se definete aproape la fel ca i culoarea textului. Ceea ce
difer este, bineneles, proprietatea, care pentru culoarea de fundal este background-color (sau,
prescurtat, background - vezi detalii n continuare). Valoarea n sine se seteaz la fel, deoarece
este vorba de o culoare:
1 body {
2 background-color:#FEFEFE;
3 }
Cu acest exemplu, am setat regula CSS pentru elementul body (ntreaga pagin) i am definit un
gri foarte deschis drept culoare de fundal pentru ntreaga pagin (body).
Cnd utilizm background-color i cnd doar background?
n CSS, exist proprietile background-color i background-image. Ambele se pot folosi pe

acelai element; prima definete culoarea de fundal, iar a doua o imagine de fundal. Prima dat
apare culoarea de fundal, iar apoi peste ea, imaginea. Niciuna dintre proprieti nu este
obligatorie, aadar putem posta una, niciuna sau ambele.
Dar, pe scurt, putem posta doar proprietatea background i astfel definim culoarea de fundal
peste ea. Vom aborda setarea imaginii de fundal ntr-o lecie despre imagini i atunci vom discuta
mai mult despre aceast proprietate.
Tipografia
Unitate: 15 din 17 00:24:58
+Rezumat
n aceast lecie, ne vom ocupa de tipografia pe care o aplicm n documentele HTML.
Bazele tipografiei
Tipografia este tehnica i arta prezentrii textului ntr-un mod inteligibil i vizibil.
Tipografia a aprut odat cu primele cuvinte scrise, dar de-a lungul timpului s-a modificat i a
evoluat. n ultimii ani, s-a ajuns la tipografia web, de care ne vom ocupa n aceast lecie.
136
Pentru cei care doresc s afle mai multe despre tipografia web clasic, le recomandm
urmtoarea adres: http://webtypography.net/, precum i acest articol interesant din revista
A List Apart": http://www.alistapart.com/articles/on-web-typography/.
La fel ca n cazul celorlalte elemente de pe pagin, pagina HTML seteaz coninutul, iar regulile
CSS influeneaz toate aspectele tipografiei, ceea ce poate avea un efect semnificativ asupra
paginii. Dac textul este scris corect, este lizibil i vizibil, totul va fi n regul. Pe de alt parte,
un text ilizibil va descuraja cu siguran vizitatorii. Nu uitai, chiar dac toate celelalte elemente
sunt excelente, respectiv designul sau imaginile, c vizitatorul nu a venit pe site pentru ele, ci
pentru coninut (text, eventual imagini etc.). Tipografia este deosebit de important pentru, n
special, site-urile web moderne, care au depit perioada elementelor sclipitoare, a animaiilor
agresive etc. i sunt acum deschise la noi posibiliti, inaccesibile nainte.
Fonturile (familiile de fonturi)
Este logic s ncepem prin a alege fontul pe care l vom folosi. Fonturile se mpart, de obicei, n
cteva categorii de baz:
Serif Aceste fonturi au anumite detalii la capetele liniilor. Detaliile se numesc serife, de
unde i numele acestui grup de fonturi. n tipografia clasic, fonturile cu serif sunt
considerate mai lizibile n comparaie cu alte fonturi, n paragrafe i texte. Se utilizeaz i
termenul de Roman. Cele mai frecvent ntlnite fonturi cu serife de pe web sunt Times
New Roman, Garamond i Times etc.
Sans-Serif Cuvntul sans provine din limba francez i nseamn fr. Evident,
aceste fonturi nu au serife. Aceste fonturi sunt caracterizate de linii drepte, curate i
solide, fr prea multe detalii. Au un aspect mai curat i mai modern. Cele mai frecvent
ntlnite fonturi Sans-Serif de pe web sunt Arial, Tahoma, Verdana, Helvetica etc.
Monospace Fiecare caracter din aceste fonturi ocup acelai spaiu pe orizontal i are
aceeai lime. Au fost utilizate prima dat mpreun cu apariia mainilor de scris, cnd,
din cauza limitrilor tehnologice, astfel de fonturi erau necesare. Mai trziu, au fost
utilizate pe primele calculatoare i terminale i se folosesc nc n programare. Cel mai
comun font monospace de pe web este Courier New (sau Courier).
137
Imaginea 15.1 - Cele mai des ntlnite categorii de fonturi
Pe lng categoriile menionate, exist multe altele, cum ar fi fonturile Script (care imit scrisul
de mn), precum i subcategorii ale fonturilor deja menionate, precum fonturile Slab-
Serif (caracterizate de serife dreptunghiulare). Noi ne vom opri asupra categoriilor menionate
mai devreme, deoarece sunt cele mai frecvent ntlnite pe web.
Not:
n vorbire, folosim adesea cuvntul font n contexte greite. Fontul este un termen care se
refer la stilul i dimensiunea precis a unei familii de fonturi. De exemplu, Verdana 11 pt
bold este un font, n timp ce Verdana n sine este o familie de fonturi (font family). Totui, n
continuarea textului vom folosi termenul font, deoarece este general-acceptat.
Terminologie
Pentru a nelege mai bine despre ce este vorba, vom trece n revist c iva dintre termenii de
baz, preluai din tipografia clasific:
Linia de baz (baseline) este o linie imaginar, pe care sunt aezate literele dintr-un text.
Linia median (median) este o linie imaginar, care determin nlimea literelor mici, a
minusculelor.
nlimea fontului (x-height) este spaiul dintre linia de baz i median. n mod
tradiional, depinde de litera mic x din alfabetul latin.
Ascendena (Ascender) este acea parte a literei, care se ridic deasupra medianei.
138
Descendena (Descender) este acea parte a literei, care coboar sub linia de baz.
Imaginea 15.2 - Detaliile de baz ale tipografiei
Lizibilitatea depinde de alegerea fontului. Este important ca literele, adic anumite caractere, s
fie lizibile i separate vizual. Toate acestea sunt aspecte care depind de font i de caracteristicile
sale. De aceea, avem opiunea de a alege corect familia de fonturi i de a ordona logic pagina,
ceea ce confer textului i fluxului su vizibilitate i o nelegere uoar.
Lungimea rndului influeneaz, de asemenea, vizibilitatea, iar opinia general este c un

singur rnd de text ar trebui s aib ntre 47 i 75 de caractere, dei aceasta nu este o regul i
exist excepii. Unele site-uri i portaluri, care sunt alctuite n principal din text, au o lungime a
rndurilor de 100 de caractere, ceea ce este acceptabil. n cazul n care textul este mpr it pe
coloane, ar trebui s se aleag un numr mai mic de caractere. Dac se folosete alinierea justify,
rndurile mai lungi se comport mai bine n browser-e.
nlimea rndului sau Leading (Line height) marcheaz spaiul dintre dou rnduri de baz ale
textului. Valoarea implicit n browser-ele web este de 1.2. Se recomand un minimum de 1.2 em
sau mai mare. Exemplu: dac dimensiunea fontului este de 10 px, o valoare de 1.4 em pentru
nlimea rndului ne d 14 px.
Tracking (letter spacing) este spaiul dintre literele cuvintelor din text. Poate avea i o valoare
negativ. Ar trebui s acordai atenie anumitor perechi de litere, precum ft, rn, vv, deoarece pot
prea unite i creeaz confuzie, fcnd textul ilizibil.
Not:
n tipografie, se folosete i termenul kerning, care, de asemenea, definete spaiul dintre
caracterele individuale din text. Deseori, se confund tracking i kerning, dei nu reprezint
acelai lucru.
Tracking este spaiul ntre caractere (litere), dar la nivelul ntregului text (al paragrafului,
propoziiei), n timp ce kerning este spaiul ntre dou caractere (litere) concrete n text.
Word spacing este spaiul dintre cuvintele din text:

139
Imaginea 15.3 - Detaliile de baz ale tipografiei
Alegerea fontului
Dei poate prea ciudat, pe web nu putem folosi orice font. n alte medii, de exemplu cnd crem
un text n Word sau cnd realizm un poster n Adobe Illustrator, avem la dispoziie toate
fonturile care exist. n ceea ce privete paginile web, situaia este diferit, deoarece fontul
depinde de calculatorul utilizatorului. Mai exact, nu ncorporm fontul n pagin, ci doar
informaia cu privire la ce font am utilizat.
De exemplu, dac introducem textul i specificm prin CSS s se foloseasc fontul Verdana,
browser-ul utilizatorului va primi textul i informaia despre font, odat cu celelalte informaii i
stiluri. Atunci, browser-ul afieaz textul, dar utiliznd fontul ncrcat din calculatorul
utilizatorului. Dac utilizatorul nu are instalat acest font (n exemplul nostru, Verdana), textul va
fi afiat cu fontul implicit, care la sistemele Windows este Times New Roman. Binen eles,
acesta nu este rezultatul dorit i reprezint o limitare. n plus, utilizatorii folosesc sisteme
diverse, precum Windows, Mac, Linux, Android, iOS, Symbian etc., care au instalate fonturi
diferite. De exemplu, dac textului de pe pagin i-am fi aplicat fontul Helvetica, browser-ele de
pe sistemele Mac l-ar fi reprezentat n mod normal (deoarece acesta este unul dintre fonturile
Mac implicite), n timp ce n Windows sau Linux ar fi aprut o problem pentru toi cei care nu
i-au instalat singuri Helvetica.
Deci, ce este de fcut dac intervine o astfel de problem? Avem cteva fonturi comune pentru
majoritatea sistemelor, pe care le putem folosi fr probleme, dei nu sunt complet identice pe
calculatoarele cu Windows i Mac, aadar trebuie s le definim de dou ori/dual, dup cum vom
vedea mai trziu.
Fonturile sigure sunt (pe Windows/Mac): Arial/Helvetica, Times New Roman/Times, Tahoma
(Verdana)/Geneva, Courier New/Courier, Georgia, Comic Sans MS. Folosindu-le pe acestea,
putei fi siguri c textul va fi afiat cu fontul ales.
Numrul fonturilor este restrns, lucru care poate fi frustrant, dar, dac analizai site-urile de pe
web, vei vedea c peste 90% dintre ele sunt concepute utiliznd unul dintre aceste fonturi
standard. nainte, anumii autori foloseau tehnici specifice care permiteau utilizarea altor fonturi,
140
cum ar fi sIFR sau Cufn. Totui, utilizarea lor nu este recomandat, deoarece se bazeaz pe
JavaScript, Flash i alte limbaje, ceea ce ncetinete ncrcarea. Putem spune c aceste tehnici au
fost rudimentare, dar au pus bazele pentru ce a urmat.
Recent, odat cu apariia opiunii @font-face, lucrurile au nceput s se schimbe i acum, practic,
putem folosi orice font pe paginile web (mai multe despre aceasta la sfritul leciei). Aceast
opiune se folosete foarte mult de ceva timp, dar din cauza lipsei unui standard (fiecare browser
are propriile reguli) i a suportului n browser-ele mai vechi (Internet Explorer), trebuie folosit
cu precauie.
Valorile absolute i relative ale fontului
n tipografia web, putem folosi valori relative sau absolute, pentru a defini dimensiunea
caracterelor sau a ntregului text. Toate aceste uniti se folosesc pentru tipografie, dar unele se
pot aplica i altor elemente, precum marginile, dimensiunile limii sau nlimii etc.
Valorile absolute sunt determinate cu exactitate i nu depind de alte elemente sau valori.
Valorile relative depind de valoarea motenit sau de valoarea implicit (n absena celei
precedente), dup cum putei vedea n exemple.
Unele dintre unitile disponibile sunt:
Uniti absolute:
o in inch (2.54 mm);
o pt point, punct tipografic (1 point este 1/72 inchi);
o pc pica (1 pica este 12 puncte);
o cm centimetru;
o mm milimetru;
o px pixel (monocromatic, punct indivizibil de pe ecran/monitor).
Uniti relative:
o em ems;
o % - procent;
o ex x-height.
141
Unitile absolute preluate din presa scris, precum in, pt, pc, cm i mm, ar trebui evitate
complet pe web, cu excepia cazului n care pregtim o regul CSS special pentru tiprire.
Cu ajutorul pixelilor (px), determinm dimensiunea exact i absolut. Dac setm valoarea
dimensiunii la 12 px, aceasta va fi ntotdeauna 12 px. Dimensiunea real depinde ns de
rezoluia monitorului etc. Alturi de valoarea em, pixelul este poate cea mai frecvent utilizat
unitate.
Unitatea procentual em a obinut aceast denumire deoarece n trecut, n zilele imprimrii

analoage, depindea de majuscula M n font, deoarece aceasta crea forma dreptunghiular i era
identic pentru toate fonturile de aceeai dimensiune. Astzi, n fonturile digitale moderne,
valoarea em este valoarea procentual a fontului utilizat, cu alte cuvinte, dimensiunea se
motenete de la elementul printe. Practic, aceasta nseamn s nmulim dimensiunea rezultat
cu valoarea em.
Cel mai simplu este s explicm printr-un exemplu. n mod implicit, browser-ele moderne
atribuie dimensiunea de 16 px unui text normal n elementul <body!ww! (pe ntreaga pagin).
Dac setm dimensiunea la 1 em, dimensiunea ar fi 16 px. Dac setm dimensiunea la 2 em,
aceasta ar fi de 16px*2em=32px. Haidei s analizm nc un exemplu. Valoarea implicit este
de 16 px, dup cum am spus. Vom seta un div i textului su i vom atribui dimensiunea de 3 em.
n cadrul su, vom scrie nc un div cu dimensiunea de 0,5 em. Vom
obine 16px*3em*0.5em=24px. Dup cum putem concluziona, valoarea em depinde n mod
direct de elementul parent, de elementul de lng el.
Imaginea 15.4 - Raportul dintre dimensiuni
Unitatea Ex este relativ i depinde de nlimea caracterului x n fontul selectat; se comport la

fel ca em, dar ar trebui evitat.
Manipularea tipografiei prin CSS
Alegerea familiei de fonturi
Alegerea fontului pentru afiarea textului ntr-un element se face prin setarea proprietii font-
family, urmat de valoarea referitoare la unul sau mai multe fonturi (familii). S vedem urmtorul
exemplu:
142
1 body {
2 font-family:Georgia;
3 }
n codul de mai sus, am definit ca ntreaga pagin (body element) s fie afiat cu fontul Georgia.
Dar, dac nu suntem siguri c fontul menionat este instalat pe calculatorul utilizatorului, putem
aduga mai multe valori, separate prin virgul, pentru a ajuta browser-ul; acesta va ncerca prima
dat s afieze textul cu fontul menionat, iar dac nu reuete, va ncerca s fac asta cu al doilea
font etc. Haidei s vedem urmtorul exemplu:
1 h1 {
2 font-family:Arial, Helvetica, sans-serif;
3}
Dup cum putem vedea din exemplul de mai sus, browser-ul va ncerca s afi eze textul cu
fontul Arial, iar dac nu l gsete pe calculator, va ncerca cu Helvetica. Dac nici acest font nu
este accesibil, va alege orice font sans-serif, deoarece am introdus denumirea generic (exist i
serif).
Dac numele fontului este alctuit din mai multe cuvinte, scriem valoarea ntre ghilimele:
1 body {
2 font-family: Times New Roman, Times, Georgia, serif;
3}
Alegerea dimensiunii textului (font-size)
Proprietatea font-size ne permite s alegem dimensiunea textului, despre care am mai vorbit. V
recomandm s folosii valorile px, em sau %.
1 body {
2 font-family: Arial, Helvetica, sans-serif;
3 font-size: 12px;
}
4
5
h1 {
6
font-size: 200%;
7
}
8
143
9
10 h2 {
11 font-size: 1.3em;
12 }
n mod implicit, textul de pe paginile web are dimensiunea de 16 px (cu excep ia titlurilor - tag-
urile h). Majoritatea autorilor opteaz pentru una dintre aceste variante. Putem seta fontul
principal la 12 px, dar atunci trebuie s mrim titlurile n mod proporional. Sau putem lsa textul
principal la 16 px, ceea ce poate prea prea mare la prima vedere, dar, dac ne obinuim astfel,
revenim cu greu la valori mai mici.
Imaginea 15.5 - Exemplu de dimensiuni de fonturi posibile
Greutatea fontului (font-weight)
Cu ajutorul proprietii font-weight, stabilim dac fontul va fi afiat formatat cu bold sau nu.
Valorile disponibile sunt bold i normal.
1 .boldText {
2 font-weight:bold;
3 }
Poate v ntrebai de ce avem nevoie de valoarea normal. Putem seta valoarea bold unui element
care are n cadrul su un alt element. Acest al doilea element va moteni proprietatea bold, apoi
144
putem aduga font-weight:normal. n plus, titlurile (tag-urile h) au, n mod implicit, valoarea
bold. Poate vrem s fie normale.
Stilul fontului (font-style)
Dac vrem s adugm proprietatea italic unui font, folosim proprietatea font-style. Poate avea
valorile italic, oblique sau normal. Italic reprezint versiunea italic ncorporat n font, n timp
ce oblique este doar o versiune puin nclinat a fontului normal. Totui, practic nu sunt deosebiri
n ceea ce privete dimensiunea fontului. Situaia cu valoarea normal este aceeai ca i la font-
weight menionat mai devreme.
1 .citat {
2 font-style:italic;
3 }
Dac ai folosit sau folosii Microsoft Word, atunci probabil c v-ai obinuit s privii bold i
italic ca elemente conexe, dar n tipografia web acestea sunt complet independente unul de altul.
Majuscule i minuscule (text-transform)
Dac vrem s setm majusculele i minusculele n afiarea noastr, putem folosi text-transform i
una dintre cele trei valori ale sale: uppercase, lowercase i capitalize. Uppercase face toate
literele majuscule, lowercase, invers, n timp ce capitalize face fiecare liter iniial a cuvntului
majuscul.
1 h1 {
2 text-transform: uppercase;
3 }
4
5 h2 {
6 text-transform: lowercase;
7 }
8
9 .potpis {
text-transform: capitalize;
10
}
11
145
Trebuie s menionm c n documentul HTML textul rmne neschimbat, schimbarea aprnd

doar n previzualizarea pentru utilizator. Aceast opiune este util, de exemplu, atunci cnd nu
tii sigur ce text va furniza baza de date, dar vrei s fii siguri cu privire la previzualizare.
Text-decoration
Proprietatea text-decoration se folosete pentru a aduga o linie sub text (valoarea underline),
deasupra textului (valoarea overline), prin text (valoarea line-through) sau pentru a face textul s
clipeasc (valoarea blink). Toate valorile sunt utile, cu excepia celei din urm, pe care v
recomandm s o evitai complet.
1 h1 {
2 text-decoration: underline;
3 }
Acest exemplu pune o linie sub titlu.
Aceast proprietate se utilizeaz des la stilizarea linkurilor. De fapt, linkurile au deja, n mod
implicit, o linie sub text, iar dac vrem, putem s o nlturm cu aceast opiune. Exemplu:
1 a, a:link {
2 color: #e31b23;
3 text-decoration:none;
}
4
5
a:visited
6
{
7
color: #e31b23;
8
text-decoration:none;
9
}
10
11
a:hover
12 {
13 color: #555555;
14 text-decoration:underline;
15 }
146
16
Efectul este urmtorul: linkurile normale i vizitate deseori nu vor fi subliniate, iar linia apare
doar atunci cnd inem mouse-ul peste link (starea hover). Aici, selectorii au pseudo-clase,
despre care vom discuta n detaliu mai trziu.
Leading (line-height)
Am menionat nlimea rndurilor n partea introductiv a acestei lecii. Pe scurt, dac mrim
proprietatea line-height, crete i spaiul dintre rnduri i invers:
1 p {
2 line-height:1.4em;
3 }
n acest exemplu, valoarea este dat n uniti em, care sunt i recomandate, deoarece depinde de
dimensiunea textului i nu este fix ca atunci cnd folosim pixeli.
Text-align
Alinierea pe orizontal a textului poate fi setat cu ajutorul acestei proprieti. Valorile

disponibile pentru text-align sunt left, center, right i justify. Cu toii cunoatem aceste opiuni
din Word i din alte instrumente asemntoare. Left i right aliniaz textul spre stnga, respectiv
spre dreapta. Center centreaz textul, n timp ce justify l aliniaz de-a lungul marginilor stng i
dreapt, influennd n acelai timp i spaierea. Exemplu:
1 #footer {
2 text-align: center;
3 }
Aceast proprietate nu influeneaz doar textul, ci i toate elementele inline.
Vertical-align
Aceast proprietate poate fi confuz i neleas greit. Nu este destinat alinierii pe vertical a
elementelor block, ci pentru alinierea reciproc a elementelor inline pe un singur rnd, la fel ca n
cazul imaginilor i atributului lor HTML valign (vezi lecia 7):
1 .textSus {
2 vertical-align: text-top;
147
3 }
4
5 .textBaseline {
6 vertical-align: baseline;
7 }
Dac am avea o imagine i un text, browser-ul ar afia urmtoarele:
Imaginea 15.6 - Exemple de dou valori vertical-align
Valorile disponibile sunt baseline, sub, super, top, text-top, middle, bottom, text-bottom.
Text-indent
Aceast proprietate se folosete pentru a introduce textul pe orizontal. n general, se seteaz n

unitile px sau em:
1 .citat {
2 font-style:italic;
3 text-ident:40px;
4 }
Interesant este c valoarea poate fi negativ. Dac, de exemplu, setm o valoare de -9999px,
textul va disprea din browser, deoarece s-a mutat cu 9999 pixeli n stnga.
Tracking (letter-spacing)
Aceast proprietate definete spaiul dintre literele individuale ale cuvintelor din text.
Recomandarea este s folosim valoarea em. Creterea i reducerea acesteia afecteaz lizibilitatea.
1 p {
2 letter-spacing:0.4em;
3 }
148
Spaiul dintre cuvinte (word-spacing)
Aceast proprietate este identic cu cea precedent, cu excepia faptului c seteaz spaiul dintre
cuvinte:
1 p {
2 letter-spacing:0.4em;
3 word-spacing:0.3em;
4 }
Text-shadow
Dup cum putem concluziona i din denumirea sa, proprietatea text-shadow seteaz umbra pe
care textul o arunc pe elementul aflat sub el. De exemplu, n cod inserm urmtoarele:
1 text-shadow: 2px 1px 3px #000000;

n proprietate, sunt necesare mai multe valori. n primul rnd, introducem poziia orizontal (n
exemplu, aceasta este de 2px), apoi cea vertical (n exemplu, 1px), estomparea (3px) i, la
sfrit, adugm culoarea.
Font face
n ultimul timp, odat cu folosirea funcionalitii @font-face a lui CSS3, putem ncorpora un
anumit font n paginile noastre. Este important s pregtim fiierele de fonturi ntr-un anumit
mod (n mai multe formate diferite) i s le iniializm corect prin CSS.
Totui, avnd n vedere c sintaxa este relativ complicat, au fost create diferite instrumente care
s ne ajute n acest sens. De exemplu, site-ul http://www.fontsquirrel.com/ poate pregti fiierele
i chiar s creeze codul CSS pentru noi. Tot ceea ce trebuie s facem este s-l ncorporm.
Serviciul Google fonts este i mai uor de utilizat. Este suficient s copiem un rnd de cod care
este generat pentru noi i n continuare putem folosi fontul dorit n mod regulat. Mai multe
detalii referitoare la ncorporarea fonturilor gsii n cursul Noiuni avansate de HTML i CSS".
Imaginile i CSS
Unitate: 16 din 17 00:15:26
+Rezumat
149
ntr-una din leciile precedente, n care am abordat doar limbajul HTML, am vzut cum putem
aduga imagini pe paginile noastre web. n aceast lecie, vom nv a tehnicile care ne ajut s
folosim regulile CSS pentru a influena aceste imagini (tag-urile img).
Dimensiunile imaginilor
Cu regulile CSS, putem influena limea i nlimea imaginilor, la fel ca i n cazul altor
elemente. Setarea dimensiunilor exacte, originale prin CSS este util, deoarece, n timp ce
ncrcm paginile, se va face imediat suficient spaiu pentru imagine, chiar dac este necesar mai
mult timp de ncrcare.
Dup cum am spus deja n lecia 7, este interzis s schimbai dimensiunea unei imagini prin CSS
sau HTML. Dac avei nevoie de o imagine de 300x200px, modificai imaginea n Photoshop
sau ntr-un instrument similar i abia apoi introducei-o n pagin. Nu o introducei niciodat la
dimensiunea de 3000x2000px, ca s o micorai apoi la 300x200px n CSS.
V recomandm s folosii mai multe dimensiuni de imagini pe ntregul site. De exemplu, seta i
o dimensiune pentru imaginile produselor, alt dimensiune pentru imaginile angajailor etc.
1 img.product {
2 width:250px;
3 heigh:100px;
4 }
n acest exemplu, toate imaginile (tag-urile img) cu valoarea CLASS product vor avea
dimensiunile de 250x100px. Trebuie doar s ne asigurm c, ntr-adevr, toate imaginile au
250x100px.
Acest exemplu poate fi extins mai trziu prin adugarea unei variante mai mari a imaginilor
produselor i legnd de ele versiuni mai mici. Este important s avem cte dou exemple ale
aceleiai imagini (una mai mic i alta mai mare).
n consecin, ntotdeauna definii mai multe dimensiuni i creai cteva clase pentru ele, care vor
aprea pe tot site-ul. Bineneles, asta n cazul n care nu a fost specificat altfel.
Alinierea imaginilor
Cnd introducem o imagine n pagin, aceasta se comport ca orice alt element inline. Dac am
fi postat-o nainte sau dup tag-ul paragraph, imaginea s-ar fi gsit deasupra, respectiv sub
paragraf, iar n caz c imaginea (tag-ul img) ar fi fost postat n cadrul tag-ului paragraf, aceasta
s-ar fi postat ca i caracter al textului, ca n exemplul urmtor:
150
Imaginea 16.1 - Poziia implicit a imaginii setate la nceputul textului
1<p>
2<img src=productX.png alt=X width=250 height=100 class=product>
3 Lorem ipsum dolor sit amet...
4</p>
Totui, cu CSS o putem influena, precum i relaia ei cu celelalte elemente.
Float stnga/dreapta
n loc s aplicm asupra imaginilor atributul align menionat mai devreme, putem utiliza
proprietatea float pentru a aranja imaginile pe pagin. Unul dintre moduri este s adugm clasei
(menionate mai devreme) float:left sau right; sau putem crea o clas nou, de exemplu:
1 .left {
2 float:left;
3 }
i s o adugm la nevoie. De exemplu, n HTML:
<img src=productX.png alt=X width=250 height=100 class=product

1left>
151
n acest tag img, vedem dou clase. Una este product, care va seta toi parametrii imaginii, n
timp ce clasa left va seta float stnga.
Centrarea
Dac vrem s centrm imaginea, putem face asta n dou moduri. Unul const n aplicarea
proprietii text-align pe elementul de lng, n cazul n care imaginea se afl pe rndul textului.
n acest caz, avnd n vedere c elementul este inline, se va comporta ca o liter a textului i va fi
centrat.
Al doilea mod const, dac deja am definit limea, n setarea marginilor stng i dreapt la
valoarea auto, ns n acest caz trebuie s o transformm n block. Deci, CSS ar arta astfel:
1.imgCent {
2 display:block;
3 margin-left:auto;
4 margin-right:auto;
5}<span style="font-size: 14px; text-align: justify;"> </span>

Poate vi se pare complicat, dar, dac elementului block i se confer o lime, setarea marginilor
stng i dreapt la valoarea auto va fora elementul s se pozi ioneze n mijlocul elementului
printe. Aceast tehnic se poate folosi i pentru alte elemente, nu doar pentru imagini.
Imaginile de fundal
Practic, fiecare element de pe pagin poate avea fundal. Fundalul poate fi o culoare, o imagine
sau o combinaie a celor dou. Imaginile din fundal se deosebesc de imaginile introduse n mod
normal. n HTML, acestea nu apar deloc, ci sunt legate de un anumit element prin CSS. De
exemplu:
152
Imaginea 16.2 - Imagine introdus normal prin tag-ul img (stnga) i imagine de fundal
(dreapta)
Partea HTML a paginii afieaz dou imagini. Cea din stnga a fost adugat prin intermediul
unui tag img normal, n timp ce cea din dreapta a fost adugat ca fundal DIV. La prima vedere,
nu exist nicio deosebire. Totui, n exemplul din partea stng am creat un DIV i am adugat o
imagine n cadrul su. ntregul cod arat astfel:
1<div>
2 <img src="images/image.jpg" width="300" height="200" alt="image">
3</div>
DIV-ul nu are nici lime, nici nlime, dar primete aceste valori de la imagine, adic se extinde
pentru a include imaginea.
Pe de alt parte, n cazul imaginii de fundal, n exemplul din dreapta, imaginea nu este inserat
ca un element, ci ca fundal al elementului DIV. Propriul DIV este n continuare gol i n cadrul
su putem insera text sau un alt coninut. n acest caz, DIV-ul se adapteaz imaginii din fundal.
Atributele sale nu influeneaz deloc DIV-ul.
n exemplul din stnga, imaginea este propriul coninut, n timp ce n cel din dreapta este doar ca
fundal.
n exemplul nostru, n imaginea din dreapta este inserat urmtorul cod:
1 <div class="backImage">
2
3 </div>
153
Dar trebuie s adugm i CSS:
1 .backImage {
2 background:url(images/image.jpg) left top no-repeat;
3 width:300px;
4 height:200px;
5}
Observm c n codul HTML DIV-ul este gol i nu are niciun fel de coninut, n timp ce adugm
imaginea prin CSS (de detalii ne vom ocupa n continuare). Pe lng aceasta, trebuie s
introducem limea i nlimea, deoarece, n caz contrar, dimensiunile vor depinde de coninutul
DIV-ului; adic, n acest exemplu, dac am elimina declaraiile pentru lime/nlime, imaginea
nu s-ar vedea deloc (deoarece elementul DIV este gol i nu are dimensiuni).
n exemplul de mai sus, am introdus nite detalii noi, fr s le explicm. Haidei acum s vedem
ce proprieti CSS influeneaz imaginile de fundal i cum sunt adugate.
background-image
Aceast proprietate este cea mai important pentru imaginile de fundal, deoarece cu ajutorul
valorii sale apelm fiierul imaginii. Deci imaginea din fundal nu se ncarc prin HTML, ci prin
regula CSS.
1body {
2 background-image: url("images/back.png");
3}<span style="font-size: 14px; text-align: justify;"> </span>

(Valoarea proprietii background-image este setat astfel nct s putem scrie URL-uri i calea
relativ sau absolut pn la imaginea dintre paranteze i semne de citare.)
Dac adugm doar aceast proprietate, n mod implicit, imaginea se va repeta la infinit pe axele
x i y. Acest lucru va fi vizibil, n cazul n care imaginea este mai mic dect elementele pe care
este setat:
154
Imaginea 16.3 - Imaginea de fundal adugat pe elementul body
background-repeat
Imaginea din fundal se poate repeta n mai multe moduri. Valoarea implicit const n repetarea
imaginii la nesfrit pe ambele axe (ca n exemplul de mai sus). Dac setm valoarea repeat-x,
respectiv repeat-y, imaginea se va repeta doar pe axa x, respectiv axa y. La final, dac o setm la
no-repeat, imaginea nu se va mai repeta i va fi afiat doar o singur dat:
1 body {
3 background-repeat: repeat-x;
4}
Acest cod va seta imaginea de fundal i o va repeta pe orizontal (axa x). S vedem aceast
variant i celelalte variante n browser:
155
Imaginea 16.4 - Variante posibile de repetare a imaginii de fundal (pe lng cea de baz)
background-attachment
Dac vrem, putem fixa imaginea de fundal ntr-o poziie fix (ataat de browser), n timp ce
celelalte elemente se pot derula. n acest context, folosim proprietatea background-attachment.
Poate avea valorile fixed i scroll (care este implicit).
1 body {
3 background-attachment:scroll;
4}
background-position
n cazul n care am setat ca imaginea s nu se repete, i putem stabili poziia dup elementul care
o conine, respectiv imaginea este postat de-a lungul marginii stngi de sus. Dac vrem s o
mutm de acolo, folosim aceast proprietate.
Background-position este alctuit din dou valori. Prima reprezint poziia orizontal, iar a doua
pe cea vertical. Le scriem separate prin virgul.
Pot fi procente, pixeli sau descrieri. Haidei s vedem urmtorul exemplu:
1 body {
background-image: url("images/back.png");
3
background-repeat: no-repeat;
4
156
5 background-position: 50% 0;
6}
Acest cod va seta imaginea de fundal, astfel nct s fie poziionat n mijloc pe orizontal (50%)
i n partea de sus a elementului (0).
n loc de procente, putem folosi pixeli (px) i atunci imaginea se va afla exact la aceast distan
de marginea stng de sus. Pe lng asta, putem folosi i descrieri, care sunt afiate n imaginea
de mai jos:
Imaginea 16.5 - Poziiile imaginii de fundal
background-color
157
n lecia 14, n care am vorbit despre culori, am menionat i proprietatea background-color.

Aceast proprietate ne permite s adugm o culoare de fundal unui anumit element. Dac
adugm i culoarea, i imaginea, mai nti vom vedea culoarea care va completa fundalul
elementului, iar apoi n faa ei, imaginea. Nu este obligatoriu s folosim ambele proprieti, acest
lucru rmnnd la latitudinea noastr.
S vedem urmtorul cod:
1 body {
3 background-repeat:no-repeat;
4 background-position:left top;
5 background-color:#3CC;
6}
Afiarea acestui cod n browser va fi urmtoarea:
Imaginea 16.6 - Afiarea n browser partea body conine i imaginea, i culoarea de fundal
Dac am seta ca imaginea s se repete pe ambele axe, culoarea de fundal nici nu s-ar vedea. Pe de alt parte,
uneori este bine s lsm culoarea de fundal transparent.
158
Scrierea prescurtat i background
S privim cu atenie exemplul de mai devreme:
1 body {
4 background-position:left top;
5 background-color:#3CC;
6 background-attachment:scroll;
}
7
Am setat imaginea i culoarea de fundal i deja avem cteva rnduri. Tot codul poate fi scris i
mai pe scurt, n felul urmtor:
1body {
2 background: #3CC url("images/back.png") no-repeat scroll left top;
3}
Deci, din exemplu se vede c putem scrie toate proprietile background mpreun. Trebuie doar
s setm proprietatea background (fr sufix) i apoi s introducem valoarea n aceast ordine:
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
separat prin virgul. Dac vreun detaliu nu este necesar, pur i simplu l lsm deoparte.
Depinde doar de dvs. cum vei scrie. i varianta mai lung, i cea mai scurt sunt corecte.
Fundalurile CSS3
159
Momentan, dei fundalurile nu sunt suportate de majoritatea browser-elor, CSS3 permite

opiunea de a avea un element cu mai multe fundaluri. Le scriem n cadrul proprietii
background (versiunea scurt) i le separm prin virgul. Exemplu:
1 div {
2 background:
3 url(example-1.jpg) top left no-repeat,
4 url(example-2.jpg) bottom left no-repeat,
5 url(example-3.jpg) centre top repeat-x;
6}
Aici, codul este formatat puin altfel, dar v reamintim c noile rnduri nu fac nicio diferen.
Dac vrem, putem s introducem modul mai lung de scriere (n special, background-image,
background-position, background-repeat i altele). n acest caz, din nou le separm prin virgul
i le scriem pentru fiecare imagine. Privii aceasta concret pe un exemplu:
1 body {
2 background-image: url(first.png), url(second.png);
3 background-position: center bottom, left top;
4 background-repeat: no-repeat, no-repeat;
5}
Background-size
O problem care aprea deseori era i imposibilitatea de scalare a imaginilor n fundal.

Respectiv, putem muta background-ul, ns nu putem schimba dimensiunea. n CSS3, o nou
proprietate este background-size, care ne ajut s facem scalarea imaginilor:
1 .box {
2 background-image:url(pic.png);
3 background-size:20px 100px;
5 }
n exemplul de mai sus, imaginea din fundal va fi de 20x100px, dei poate imaginea original are
dimensiuni diferite.
160
Ca i la imaginile din HTML/CSS, atenie atunci cnd schimbai dimensiunea i facei aceasta
doar cnd este necesar, deoarece se va ncrca din nou o imagine complet, mare i se poate
ajunge la degradarea calitii.
Stilizarea listelor, a tabelelor i a formularelor

Unitate: 17 din 17 00:11:35
+Rezumat
n aceast lecie, ne vom ocupa de stilizarea CSS a unor elemente specifice, precum listele,
tabelele i formularele. La final, vom vedea i ce sunt pseudoclasele.
Stilizarea listelor
n ceea ce privete stilizarea listelor, avem dou posibilit i: lista i pstreaz propriile funcii de
listare sau i pierde caracteristicile originale. Acest lucru se ntmpl atunci cnd, de exemplu,
folosim o list ca baz pentru crearea unui meniu. Pentru moment, vom rmne la domeniul
listelor care listeaz.
list-style-type
Utilizm aceast proprietate asupra elementelor ul i ol, pentru a stiliza punctele (bullets) gsite
n faa elementului. Acestea sunt diferite pentru listele ordonate i pentru cele neordonate.
Pentru listele neordonate, avem opiunile:
disc;
o circle;
square.
n timp ce pentru listele ordonate, avem urmtoarele:
decimal 1 2 3;
decimal-leading-zero 01 02 03;
lower-alpha a b c;
upper-alpha A B C;
lower-roman i. ii. Iii;
upper-roman I II III.
161
Codul CSS este destul de simplu:
1 ol {
2 list-style-type: decimal;
3 }
Totui, o astfel de descriere ar influena toate listele neordonate de pe site. Este mai bine s
definim o dat elementele ul i ol ale listei, iar mai trziu s le schimbm dup necesitate,
folosind clasa sau valorile ID:
1 Ol.listX {
2 list-style-type: decimal;
3 }
list-style-image
n locul elementelor standard, putem folosi imagini ca bullets. Deci, setm proprietatea list-style-
image, a crei valoare este calea pn la imagine, la fel ca i fundalul elementului:
1 ul {
2 list-style-image: url("images/star.png");
3}
n ceea ce privete listele, este important de tiut c acestea au margini i padding n mod
implicit i c toate setrile poziiilor, n special n momentul aplicrii acestei proprieti, se pot
face cu margini i/sau cu valorile padding.
list-style-position
Aceast proprietate stabilete dac bullets se afl n afara elementelor (n mod implicit) sau n
cadrul lor. Prin urmare, valorile disponibile sunt outside i inside:
1 ul.first {
2 list-style-position:outside;
3 }
4
ul.second {
5
list-style-position:inside;
6
162
7 }
n browser, aceste dou liste ar arta ca n imaginea urmtoare:
Imaginea 17.1 - Lista neordonat cu valoarea list-style-position

la outside (stnga) i inside (dreapta)
list-style
Ca i n cazul altor proprieti, i aici exist o versiune prescurtat. Putem scrie tipul i poziia
listei mpreun cu ajutorul proprietii list-style:
1 ul {
2 list-style: inside upper-roman;
3 }
Stilizarea tabelelor
n ceea ce privete tabelele i stilizarea, n general se stilizeaz tag-urile td, respectiv celulele.
Tag-urilor td le putem aduga valorile CLASS sau le putem inti cu regulile CSS prin intermediul
tipului lor (td), dar acest lucru nu este recomandat.
Pe prile tabelului, se pot aplica diferite proprieti, precum proprietile din modelul CSS box
(width, height, padding, margin, border), dar i tipografice, precum font-family, letter-spacing i
altele.
163
Iat un exemplu cu mai multe detalii. n seciunea HTML, avem:
1
<tr>
2
<th>name</th>
3
<th>surname</th>
4
<th class="record">ID</th>
5
</tr>
6
<tr class="even">
7 <td>Tricia</td>
8 <td>McMillan</td>
9 <td class="record">332</td>
10 </tr>
11 <tr>
12 <td>Arthur</td>
<td>Dent</td>
13
<td class="record">1234</td>
14
</tr>
15
<tr class="even">
16
<td>Ford</td>
17
<td>Prefect</td>
18
<td class="record">9876</td>
19
</tr>
20
n CSS, avem:
1 body {
2 font-family:Georgia, "Times New Roman", Times, serif;
3 }
4
th, td {
5
padding: 7px 10px 10px 10px;
6
}
7
164
8
9
th {
10
text-transform: uppercase;
11
letter-spacing: 0.2em;
12
font-size: 90%;
13 border-bottom: 2px solid #111111;
14 border-top: 1px solid #999;
15 text-align: left;
16 }
17
18 tr.even {
19 background-color: #6FC;
20 }
21
tr:hover {
22
background-color: #fff;
23
}
24
25
.record {
26
text-align: right;
27
}
28
Iar n browser se afieaz urmtoarele:
Imaginea 17.2 - Un tabel stilizat

165
Dup cum putem vedea din acest exemplu, am combinat diferite reguli CSS i am adugat
anumite atribute CLASS unor elemente diferite, pentru a le inti cu regulile CSS.
Dac o lum de la nceput, vedem c alegerea fontului este definit pe ntreaga pagin (body).
Apoi, am setat spaii (padding) pe celule. Am definit aspectul titlurilor i, la final, am adugat o
zebr (rndurile even i odd) i am aliniat ultima coloan.
Stilizarea formularelor
Stilizarea formularelor este foarte asemntoare cu stilizarea tabelelor, dar poate fi mai
complicat. n primul rnd, din cauza faptului c majoritatea controalelor folosesc obiecte input,
aadar nu putem folosi selectori generali. S lum aceast parte a formularului:
1 <input type="text" id="email">

2 <input type="text" id="twitter">
3 <input type="text" id="web">
Dac o stilizm cu aceste reguli CSS:
1 input {
2 width:300px;
3 color: #006;
background-color: #D6E6FE;
4
border: 1px solid #06C;
5
padding: 2px 45px 2px 2px;
6
background-repeat: no-repeat;
7
background-position: 95% center;
8
display: block;
9
margin-bottom: 6px;
10 }
11
12 input#email {
13 background-image: url("images/email.png");
14 }
15
input#twitter {
166
16
17 background-image: url("images/twitter.png");
18 }
19
20 input#web {
21 background-image: url("images/web.png");
22 }
23
vom obine rezultatul urmtor:
Imaginea 17.3 - Formular stilizat (cmpuri input)
Este important de remarcat c am folosit o singur descriere pentru toate input-urile, dar am
adugat o descriere separat pentru detaliile care se deosebesc. Problema acestui exemplu este c
prima descriere a influenat toate tag-urile input, inclusiv butonul submit, radio i opiunile
checkbox etc. O soluie poate fi adugarea aceleiai valori CLASS tuturor cmpurilor textuale i
corectarea primei descrieri. Exist i o a doua variant - selectorului i putem aduga un tip de
cmp. De exemplu:
1 input[type=text] {}
Type poate fi i altceva. Trebuie s corespund atributului type al tag-ului input. Trebuie doar s
fim mai ateni cu browser-ele mai vechi, deoarece nu toate suport acest mod de selectare a
elementelor.
Pseudoclasele
Pe lng modul tradiional de selectare a elementelor, n anumite situaii putem selecta, inti,
strile lor cu ajutorul pseudoclaselor. Pe acestea le setm scriind semnul dou puncte : dup
selector sau dup o anumit parte a selectorului, iar apoi adugnd cuvntul-cheie.
De exemplu, hyperlinkurile pot avea starea link, hover, visited sau active la un anumit moment.
Link este starea normal a linkului, hover este starea care se activeaz cnd inem mouse-ul
deasupra linkului, visited este starea linkurilor vizitate anterior, n timp ce starea active se
instaureaz cnd dm clic pe link. De exemplu:
167
1
a,
2
a:link {
3
color: #cc0000;
4
text-decoration:none;
5 }
6
7 a:visited {
8 color: #990000;
9 text-decoration:none;
10 }
11
12 a:hover {
color: #3333cc;
13
text-decoration:underline;
14
}
15
16
a:focus {
17
outline: thin dotted;
18
}
19
n acest exemplu, vedem c prima regul CSS a fost setat pentru toate linkurile (a selector) i
pentru linkurile n stare normal (a:link). Am definit culoarea textului i am nlturat underline
(linia de sub link). Poate v ntrebai de ce am scris doi selectori. Nu este suficient s scriem doar
a:link? n principiu este suficient, dar pot aprea probleme dac cineva nu adaug atributul href
corect n tag. n acest caz, starea :link nu va funciona.
n continuare, vedem selectorul a:visited n a doua descriere, care definete linkurile vizitate,
marcndu-le printr-o culoare puin mai nchis. Starea a:hover schimb culoarea linkurilor n
albastru, pentru ca utilizatorul s primeasc feedback c se afl deasupra unui link. Putem aduga
i starea a:active, pe care nu am folosit-o aici.
Folosind strile speciale, practic prin CSS putem s tratm un element n diferite moduri i s
distanm descrierile.
n majoritatea cazurilor, practic ntotdeauna, pseudoclasele se folosesc pentru linkuri.

168
Border-radius
Cea mai des menionat proprietate CSS3 este border-radius. O utilizm pentru a defini curbura
unghiului pentru marginea setat. S privim codul:
1 .box {
2 border:1px solid #333;
3 border-radius:10px;
4 }
n acest fel, pe un element cu clasa box am inserat o margine gri simpl (border) cu grosimea de
1 pixel, cu colurile rotunjite la un unghi de 10 pixeli.
n acest exemplu, se poate vedea foarte bine cum vechea specificaie CSS border colaboreaz cu
cea nou, border-radius.
Pe lng curbura egal, putem defini i valori speciale pentru toate cele patru unghiuri.
Introducem patru valori pentru unghiurile din stnga-sus, dreapta-sus, dreapta-jos, stnga-jos:
1 border-radius:10px 0 20px 0;
Un cod introdus astfel va rotunji unghiul din stnga-sus i pe cel din dreapta-jos:
169
Imaginea 17.4 - Exemple de aplicaii border-radius afiate n browser
Box-shadow
Aceast proprietate definete umbra pe care un anumit element o arunc sub el. Solicit mai
muli parametri. n cod putem scrie, de exemplu:
1 .box {
2 box-shadow: 10px 20px 5px 0px #000000;
3}
Acest exemplu pune o umbr pe element - o umbr mutat cu 10 px n partea dreapt fa de
element, cu 20 px n partea de jos a elementulu, cu valoarea blur (estompare) de 5 px, valoarea
spread (care extinde umbra) de 0 px i, la final, culoarea umbrei n sine. n acest exemplu, am
folosit hex, dar putem utiliza i RGBA, de exemplu.
Deci, proprietatea box-shadow necesit urmtoarele valori:
1 box-shadow: hor-position vert-position blur spread color;
Dac vrem ca o umbr s cad n interiorul elementului, putem introduce i cuvntul-cheie inset:
Imaginea 17.5 - Exemplu de drop shadow (umbr lsat) afiat n browser

Introducere În HTML Şi CSS

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Introducere În HTML Şi CSS

Încărcat de

Drepturi de autor:

Formate disponibile

1

LINK Academy eLearning

Imaginea 1.2 - Logoul limbajului HTML5

Cteva noiuni de baz

Ce este WWW (World Wide Web)?

Imaginea 1.3 - Logourile celor mai populare browser-e din prezent.

Cum funcioneaz www?

Odat ce browser-ul primete informaia despre adresa IP a site-ului de la serverul DNS, o

Imaginea 1.4 - Accesarea unui site

Ce se afl n spatele unui site?

Imaginea 1.5 Site-ul http://www.adobe.com/ reprezentarea codului HTML (n stnga) i

Putei ncerca i singuri s vizualizai pagini-surs (HTML) pe un site. n majoritatea browser-

Site-urile sunt alctuite doar din limbaje HTML i CSS?

n imaginea urmtoare, putem vedea un formular de introducere a unui comentariu:

Structura paginilor HTML

Imaginea 2.1 - Text scris n programul Microsoft Word

Imaginea 2.3 - Pagin HTML (incomplet) prezentarea codului

Imaginea 2.4 - Pagin HTML (incomplet) reprezentarea codului i seciunile marcate

<body> ... </body>

<h1> ... </h1>

Tag-urile h1 de nceput i de final ncadreaz titlul primului nivel (Heading1).

<p> ... </p>

Un paragraf de text se afl ntre tag-urile p (p de la paragraph/paragraf).

<h2> ... </h2>

Elementele (tag-urile) sunt alctuite din 3 pri:

tag-ul HTML de nceput;

tag-ul HTML de final;

coninutul dintre ele (unele tag-uri nu au niciun coninut).

Imaginea 2.5 - Tag-uri HTML de nceput i final

A. Tag-ul HTML de nceput;

Imaginea 2.6 - Tag-ul h1

V reamintim c ntregul rnd este un singur element (sau tag).

Reguli de baz pentru scrierea limbajului HTML

Cnd scriem tag-uri, trebuie s respectm dou reguli de baz:

Exemplul este unul corect:

Imaginea 2.7 - Elementele p i strong plasate corect

n timp ce urmtorul exemplu nu este corect:

Imaginea 2.8 - Elementele p i strong plasate greit

Majoritatea elementelor se scriu aa cum am menionat, dar exist i a a-numitele tag-uri cu

Observm tag-ul p de nceput i de final, care formeaz elementul p i conine un paragraf de

Aici, la tag-urile cu autonchidere, am menionat HTML i xHTML i diferenele de scriere. n

Atributele tag-urilor HTML

Imaginea 2.10 - Atributul class de deasupra elementului p

Numele atributului este etichetat cu A, n timp ce valoarea atributului cu B.

HTML5 permite scrierea numelor atributelor cu majuscule (uppercase), precum i omiterea

Crearea primei pagini HTML i tag-urile de baz

Tag-urile de baz ale paginii HTML

Imaginea 3.1 - Tag-ul HTML

Imaginea 3.2 -Tag-ul head

Imaginea 3.3 - Tag-ul body

respectiv tag-ul html conine elementele head i body:

Imaginea 3.4 - Trei tag-uri de baz ale paginilor HTML

Prima noastr pagin HTML

Dup ce ai pornit editorul de text, introducei urmtorul cod:

l putei copia direct de aici sau l putei tasta singuri.

Salvai pagina undeva pe calculator, introducei numele, dar asigurai-v c nu o salva i ca

n caz c lucrai pe calculatoare Mac i n TextWrangler, fereastra de dialog va arta astfel:

Imaginea 3.6 Salvarea paginii noastre - TextWrangler (Mac)

Imaginea 3.7 Afiarea paginii noastre n browser-ul Chrome

S privim exemplele unor site-uri populare precum Wikipedia (wikipedia.org) i Amazon

Principalele tag-uri menionate sunt marcate n imaginile de mai jos cu rou:

Imaginea 3.8 - Exemplu de cod a site-ului www.wikipedia.org

Imaginea 3.9 - Exemplu de cod pentru site-ul www.wikipedia.org

Variantele limbajului HTML