HTML

HTML (HyperText Markup Language) este un limbaj utilizat pentru crearea paginilor web ce
pot fi afisate intr-un browser (sau navigator).

HTML este folosit pentru prezentarea unui continut (text, imagine) intr-o pagina web,
furnizeaza mijloacele prin care continutul unui document poate fi structurat si adnotat cu
diverse tipuri de metadate si indicatii de redare si afisare. Aceste indicatiile pot varia de la
decoratiuni minore ale textului, cum ar fi culoarea sau sublinierea unui cuvant ori
introducerea unei imagini, pana la adaugarea de elemente sofisticate, tabele, harti de imagini,
formulare si cod CSS sau scripturi JavaScript.
Metadatele pot include informatii despre titlul si autorul documentului, informatii structurale
despre cum este impartit documentul in diferite segmente, paragrafe, liste, titluri etc. si
informatii esentiale care permit ca documentul sa poata fi legat de alte documente pentru a
forma astfel hiperlink-uri.
HTML este un format text proiectat pentru a putea fi citit si editat utilizand un editor de text
simplu, editarea si intelegerea paginilor in acest fel necesita cunostinte de HTML, pe care le
puteti obtine studiind lectiile din acest curs.
Exista si editoare grafice, de tip WYSIWYG (What You See Is What You Get - "ceea ce vezi
este ceea ce obtii"), cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft
FrontPage, care permit ca paginile web sa fie tratate asemanator cu documetele Word si
genereaza ele cod HTML pentru continutul paginii, dar aceste programe genereaza un cod
HTML care este de multe ori prea incarcat si de proasta calitate.
HTML este de asemenea utilizat in e-mail. Majoritatea aplicatiilor de e-mail folosesc un
editor HTML incorporat pentru compunerea e-mail-urilor si un motor de prezentare a e-mailurilor de acest tip.
Acest curs prezinta elementele de baza ale limbajului HTML si modul de lucru cu acesta, va
ajuta sa invatati cum sa creati pagini web folosind aceasta tehnologie.
Tot ce aveti nevoie este un editor de texte simplu, cum ar fi Notepad, si un navigator, de
exemplu Mozilla Firefox, care este gratuit.
Pentru a invata cat mai bine elementele prezentate in aceste lectii, exersati personal fiecare
exemplu prezentat si creati si altele pornind de la acestea.
Retineti ca acest curs reprezinta o baza si un punct de pornire pentru invatarea HTML, ne
fiind prezentate aici toate proprietatile si elementele HTML. Pentru o cunoastere mai
amanuntita a acestora, vizitati site-ul W3C HTML.
Principalele elemente HTML

1. Ce este HTML? (Hypertext Markup Language)
- Este un set de coduri logice care constituie apariia unui document web si a informatiilor pe
care le deine. Codurile sunt scrise intre "<" (paranteza deschisa) si ">" (paranteza
inchisa), cu toate ca nu sunt chiar paranteze, aa se numesc si arata aa: < >.
Exemplu:
<BODY> sau <FONT>
- Cele mai multe elemente (numite si tag-uri) au un element (tag) de deschidere si un element
de nchidere distins prin "/" in interiorul parantezei deschise "<".
Exemplu:
<FONT> ... </FONT>
- Primul cuvnt care apare nuntru "<" se numete element sau eticheta HTML si spune
browser-ului sa fac ceva, precum <FONT>
- Cuvintele care urmeaza dup element in interiorul "< >"se numesc atribute care descriu
proprietile elementului. Cum ar fi : culoarea, mrimea, etc.
- Atributele sunt separate prin spatiu si urmate de semnul egal "=", dupa care sunt scrise, intre
ghilimele (" ") valorile atributelor.
- Astfel, o eticheta HTML poate contine elementul de identificare, atribute si valori.
- In urmatorul exemplu elementul este FONT atributul COLOR si valoarea BLUE:
<FONT COLOR="BLUE">Acest text va fi albastru</FONT>
2. Structura documentului HTML

- Un document (fisier) HTML este alcatuit din mai multe elemente si atributele lor.
- La nceput un element HTML cuprinde (nconjoar ) datele documentului. Acest element
conine doua sub-elemente principale: HEAD si BODY. In HEAD se poate adauga titlul
paginii web si alte elemente numite metatag-uri, precum si scripturi JavaScript si stil-uri CSS.
In BODY se adauga continutul documentului care va fi afisat in pagina web.
Exemplu:
<html>
<head>
<title>Titlu Documentului</title>
</head>
<body>
Continutul paginii
</body>
</html>
Structura generala a unui document HTML
<HTML>
<HEAD> Acesta are si el mai multe sub-elemente:
<TITLE> Aici se scrie titlul documentului, cat mai sugestiv, si se ncheie cu </TITLE>
<BASE> Poate fi folosit pentru a nregistra locaia documentului in forma URL.
(Necesar daca documentul nu este accesat in locaia lui originala). Se ncheie cu </BASE>
<LINK> Indica o relaie dintre document si alte obiecte de pe WEB. Se ncheie cu
</LINK>
<META> Aici sunt scrise informaii cum ar fi tastatura (limbaj) folosita, descrierea si
cuvinte cheie care pot fi gsite de motoarele de cutare. Se ncheie cu </META>
<SCRIPT> Conine oricare din JavaScript sau VB Script. Se ncheie cu </SCRIPT>
<STYLE> Conine informaii privind stilul, grafica informaiilor care vor aprea pe
pagina. Se ncheie cu </STYLE>
Aici se ncheie elementele adaugate in HEAD
</HEAD>
<BODY> Etichetele HTML si continutul documentului care va fi afisat in pagina web sunt
incluse in acest element. Aici pot fi puse si elemente cum ar fi: <SCRIPT> </SCRIPT>
Se ncheie cu
</BODY>
</HTML>
Crearea si editarea paginii HTML

Sunt mai multe programe cu care se pot crea pagini web, chiar fara a cunoaste limbjul
HTML, cum sunt Microsoft FrontPage sau Macromedia Dreamweaver.
Editoarele de text sunt programele de baza, si cele mai folosite, pentru editarea paginii web.
Avantajul folosirii lor este simplitatea, pentru creare paginii web sunt necesare cteva din
codurile invizibile ale limbajului HTML, astfel se creaza documente rapid si usor, in plus
ocupa foarte putin spatiu si resurse de memorie, acestea insa necesita cunoasterea limbajului
HTML.
Dintre editoarele de text cunoscute cel mai folosit este NotePad, care este folosit si pentru
acest curs, dar poate fi utilizat orice editor de text. Pentru ncepatori si pentru usurinta cu care
se lucreaza, eu recomand folosirea aplicatie NotePad sau Notepad++, dar cei avansati pot
folosi si altele cum ar fi Dreamweaver.
1. Crearea bazei de nceput a unui document

Cum ati vazut in Lectia 1, sunt elemente sigure, generale, care sunt necesare pentru crearea
unui document HTML.
Pentru nceput deschideti aplicatia NotePad si scrieti structura de baza a unei pagini web.
Aceasta este:
<html>
<head>
<title> Titlul </title>
</head>
<body>
Continut
</body>
</html>
Acum pagina dv. are HEAD si BODY in interiorul bazei <HTML>.
In interiorul elementului HEAD are elementul TITLE, pe care ar trebui sa-l completati cu un
text reprezentativ ca titlu al documentului dv.; si in BODY un text "Continut".
Ceea ce scrieti la TITLE va apare in linia cea mai de sus a browseru-lui (deasupra
meniurilor). La TITLE puteti pune orice text, dar este bine sa scrieti ceva care sa descrie cat
mai bine obiectul si continutul paginii deoarece este ceea ce cauta si indexeaza multe
portaluri de cautare de pe internet, si indicat, sa nu depaseasca 70 caractere.
Ceea ce adaugati intre tag-urile <body> </body> reprezinta continutul paginii, care va fi
afisat in browser.
Mai jos gasiti un exemplu cum ar putea fi completat tag-ul TITLE si un mic continut in
pagina:
<html>
<head>
<title>MarPlo.net - Cursuri, Jocuri si Anime</title>

</head>
<body>
<h1>Pagina HTML</h1>
Lectii, exemple si explicatii.
</body>
</html>
- <h1> </h1> este o eticheta HTML pentru afisare de text mare (ca un titlu) in pagina.
- Ca sa vedeti rezultatul, copiati acest cod intr-o pagina noua deschisa cu Notepad si apoi
salvati fisierul cu extensia .html. Daca nu stiti deja, pt. a-l salva alegeti la "Save as type" - All
Files, apoi la "File name" ii scrieti numele si extensia (ex.: "pagina.html"). Dupa ce a fost
salvat fisierul, deschideti-l cu un browser (trebuie sa mearga cu dublu-click pe el).
2. Setarea proprietarilor documentului

- Proprietatile documentului pot fi controlate de atributele elementului BODY, de exemplu
cum ar fi culorile pentru fondul paginii, pentru text si diferite faze ale link-urilor.
Culorile sunt setate folosind culorile de baza: rosu, verde si albastru; expresia folosita RGB
(Red, Green, Blue), acestea sunt reprezentate ca valori hexadecimale si sunt scrise intre
ghilimele (" "), la inceput trebuie adaugat caracterul '#'. Fiecare 2 unitati ale codului
reprezinta una din culorile RGB.
De exemplu: #00aa11 reprezinta o culoare care nu are Rosu (00), are Verde (aa) si Albastru
mai putin (11).
Elementul BODY
- Acestui element ii puteti adauga informatii care sa defineasca culoarea sau imaginea
din fondul paginii, textul si culoarea link-urilor.
- Daca elementul BODY nu este completat cu alte atribute atunci browser-ul va

prezenta culorile standard, de obicei fondul este alb.
- Pentru a seta culoare fondului paginii adaugati in eticheta <BODY> atributul

BGCOLOR.
- Urmatorul exemplu va prezenta un document a carui fond este de culoare albastra:

<body bgcolor="#0000ff"></body>
Culoarea textului
o - Atributul TEXT controleaza culoarea textului normal din document.
o - Acesta va afecta tot textul din document care nu este colorat de alte
elemente, cum ar fi link-ul.
o - Culoarea standard pentru text este Negru.
o - Iata un exemplu in care culoarea fondului va fi albastru si culoarea textului

va fi rosu, atributul TEXT va fi adaugat astfel:
<body bgcolor="#0000ff" text="#ff0000"></body>
Link-uri (LINK, VLINK si ALINK)

o - Aceste atribute controleaza culoarea link-ului in diferite stari
1. LINK - culoarea initiala a link-ului. Standard este albastru
2. VLINK - culoarea unui link vizitat. Standard este purpuriu.
3. ALINK - culoarea link-ului in momentul activarii. Standard este rosu.
o - Modul de setare al acestor atribute este urmatorul:
<body bgcolor="#ffffff" text="#ff0000" link="#0000ff" vlink="#ff00ff"
alink="#ffff00"></body>
Rezultatul va fi o pagina cu fondul alb, textul rosu, link-urile albastre, linkurile vizitate vor avea culoarea roz iar culoarea link-urilor in momentul
activarii va fi galben.
Folosirea unei imagini ca fond pentru pagina (background)

o - Elementul body ofera posibilitatea nlocuiri fondului paginii cu o imagine
(Background image). Daca imaginea este mai mica dect dimensiunile paginii
atunci imaginea va fi multiplicata pana va acoperi ntreg cadru documentului.
Este indicat ca imaginea sa fie in format *.gif sau *.jpg. Folosirea unei imagini
va da un aspect placut documentului. Pentru a vedea cum arata un document al
carui fond este o imagine click aici.
o - Un exemplu de cod HTML cu imagine pentru background este urmatorul:
<body background="imagine.gif" bgcolor="#ffffff"></body>
In acest exemplu fondul pagini va fi dat de imaginea fisierului "imagine.gif" si
de asemenea am setat BGCOLOR astfel incat in timpul procesului de
ncarcare a imaginii culoarea fondului va fi alba.
Dupa ce a-ti creat baza de nceput a unui document si a-ti setat proprietatile, trebuie sa salvati
fisierul. Salvarea trebuie facuta intr-un format pe care browser-ul l poate recunoaste.
Extensia standard pentru un fisier care reprezinta o pagina web este ".htm" sau ".html". De
obicei folosesc (".html").
- Pentru a salva documentul ca sa arate ca o pagina web, in NotePad alegeti din meniul File
comanda Save si salvati fisierul cu orice nume doriti dar cu extensia html (sau "htm") - (La
File name: scrieti si numele si extensia ".html", exemplu: index.html). Daca nu scrieti
extensia, NotePad va salva documentul in format "txt".
- Pentru a vedea documentul ca o pagina web, duceti-va in directorul in care a-ti salvat
fisierul si deschideti-l pur si simplu (cu Enter sau dublu-click la mouse), acesta va fi deschis
automat de browser-ul pe care-l folositi (Mozilla Firefox, Internet Explorer, Opera). Sau
deschide-ti browser-ul si din comanda Open deschideti documentul pe care l-ati salvat.
- Pentru a continua munca, a face modificari paginii sau pentru a adauga altceva in
documentul HTML, deschideti documentul cu NotePad. Una din metode este sa deschideti
aplicatia NotePad si din meniul File alegeti Open apoi gasiti fisierul pe care vreti sa-l
modificati si dati clic pe butonul Open. Dupa ce terminati modificarile salvati, astfel daca
redeschideti documentul ca o pagina web acesta va fi deschis cu noul format.
Titluri, Paragrafe, Un nou rnd, Linie

orizontala
1. Titluri <Hx> ... </Hx>
- Pentru titluri din continutul documentului HTML este indicat folosirea etichetelor
<Hx>, (headings) unde 'x' este un numar intre 1 si 6.
- In cadrul elementului BODY, elementele Headings sunt folosite ca titluri sau pentru
o mai buna impartire a continutului paginii.
- Mrimea textului nconjurat de elementul Heading variaz de la foarte mare, in

<H1> pana la foarte mic in <H6>.
Mai jos puteti vedea exemplu:

Cod HTML
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Cum apare in pagina
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
2. Paragraf <p> ... </p>
- Paragrafele permit sa adaugi text in document astfel incat lungimea de afisare a

textului va fi ajustata de marimea deschiderii browser-ului si fiecare paragraf va
incepe un nou rnd.
- Distanta dintre doua paragrafe succesive este mare deoarece browser-ul le afiseaza
cu un rnd gol intre ele.

Cod HTML
<html>
<head>
</head>
<body>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<p>Paragraf 4</p>
</body>
</html>
Cum apare in pagina
Paragraf 1
Paragraf 2
Paragraf 3
Paragraf 4
3. Un nou rand <br>
- Tag-ul <br> permite sa decizi unde textul va incepe un nou rnd, astfel se forteaza
nceperea unui nou rnd.
- <br> este un Element Gol dar poate sa conin atribut. <br> nu are si nu cere element
de nchidere, nu se foloseste </br>

Cod HTML
Cum apare in pagina
<html>
<head>
</head>
<body>
Paragraf 1
<h1>Heading 1</h1>
Linie 2
<p>Paragraf 1<br>
Linie 3
Linie 2<br>
...
Linie 3<br>
... </p>
Paragraf 2
<p>Paragraf 2</p>
</body>
</html>
- Elementul <br> folosete un singur atribut CLEAR care poate avea valoarea LEFT,
RIGHT sau ALL, si sunt folosite daca este o imagine pe pagina. Atributul CLEAR foreaz o
linie in jos. Daca o imagine este aezata in partea stanga a paginii, valoarea LEFT va muta
cursorul jos la prima linie din marginea tanga.
Heading 1
4. Linie orizontala <hr>
- Acest element afiseaza o linie orizontala in document
- Acest element nu folosete element de nchidere [</hr>]
- Elementul <hr> foloseste urmatoarele atribute:

o - SIZE = latimea liniei, in pixeli (standard este 2)
o - WIDTH = lungii liniei, in pixeli sau procente din lungimea afisarii paginii
(standard 100%)
o - NOSHADE = afiseaza linia fara a avea un aspect 3D
o - ALIGN = aliniaza linia (Left, Center, Right), adica Stanga, Centru sau
Dreapta paginii ( Standard centru)
o - COLOR = seteaza culoarea liniei

Cod HTML
<html>
<head>
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraf 1<br>
Linie 2<br>
Linie 3<br>
... </p>
<hr>
<hr color="#1111fe" size="4" width="50%">
<p>Paragraf 2</p>
</body>
</html>
Cum apare in pagina
Heading 1
Paragraf 1
Linie 2
Linie 3
...
Paragraf 2
Formatul textului
HTML contine mai multe elemente, tag-uri si atribute, pentru afisarea textului in mai multe
formate cu aspecte grafice diferite.
1. Tag-ul <FONT> ... </FONT>

Cu acest element, <FONT>, puteti modifica aspectul textului, cum sunt tipul fontului folosit,
marimea si culoarea textului.
- Marimea textului poate fi modificata cu elementul FONT si atributul SIZE.

Atributul SIZE poate lua valorile numerice de la 1 la 7 si pe langa acestea poate
folosi, ca valoare relativa, semnele "+" sau "-". Textul normal (daca nu este specificat
acest atribut) are valoarea 3.
Exemplu :
<font size="+2">Doua
mrimi mai mare</font>
- Tipul fontului poate fi modificat cu elementul FONT si atributul FACE.
Exemplu :
<font face="Arial Black">Acesta este tipul de font Arial Black</font>
- Culoarea textului poate fi modificata cu elementul FONT si atributul COLOR.
Exemplu :
<font color="#00dd00">Acest text are culoarea verde</font>
2. Bold, Italic, Underline si alte elemente

Elemente des folosite pentru formatul textului sunt:
- Bold (ingrosat) <b> ... </b>
- Italic (inclinat) <i> ... </i>
- Underline (subliniat) <u> ... </u>
Exemple:
<b> Bold </b>
<i> Italic </i>
<u> Underline </u>
Alte elemente folosite pentru formatul textului sunt:
- <pre> Performated </pre> - Textul incadrat de elementul PRE este prezentat intrun singur font, oricare ar fi atributul FACE. Spatiile mai lungi si liniile necesare sunt
prezentate aa cum sunt scrise in NotePad, ne mai fiind nevoie de alte elemente
adiionale, cum ar fi <br> pentru o noua linie si pentru mai mult
spaiu intre cuvinte.
- <em> Accentuare (Emphasis) </em> - Browser-ul de obicei arata aces element ca

italic
- <strong> Strong </strong> - Browser-ul de obicei arata aces element ca bold
- <tt> Teletype </tt> - Ca si PRE, browser-ul prezinta acesta intr-un singur tip de
font, indiferent de fontul ales cu atributul FACE, in interiorul elementului FONT
- <cite> Citatie </cite> - Reprezinta o citatie din document.
Mai jos puteti vedea cteva exemple de coduri si modul lor de afisare in browser.
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<p><font size="+1">O singura marire</font>- normal <font size="-1">O singura micsorare</font><br>
<b>Bold</b>- <i> Italic </i> - <u> Subliniat </u> <font color="#ff0000"> Colorat </font><br>
<em>Accentut</em> - <strong> Strong </strong> <tt>Tele type</tt><br>
<cite> Citatie </cite></p>
</body>
</html>
- In browser va fi afisat asa:
O singura marire- normal - O singura micsorare
Bold- Italic - Subliniat - Colorat
Accentut - Strong - Tele type
Citatie
3. Alinierea
Cteva elemente pot avea atributul (ALIGN) pentru aliniere, cum ar fi Titlurile <Hx> ,
Paragraful <p></p> si Linia orizontala <hr> . Cele trei valori ale atributului ALIGN sunt:
LEFT, RIGHT si CENTER.
Aliniamentul celor mai multe elemente se face cu ajutorul altor elemente:
- <div align="valoare"> ... </div> Poate conine cele mai multe elemente. Tot ce este
poziionat cu elementul DIV poate fi aliniat oriunde-n pagina, indiferent daca in acel
loc se afla si alt ceva (Imagine, Text, ).
- <center> ... </center> Va centra elementele
4. Alte etichete HTML pentru formatul textului
- <strike> Text taiat </strike>
- <big> Prezinta textul intr-un font mare </big>
- <small> Prezinta textul intr-un font mic </small>
- <sub> Afisaza textul in pozitia subscript </sub>
- <sup> Aseaza textul in pozitia superscript </sup>
In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum sunt afisate de
browser.
<html>
<head>
</head>
<body>
<p>
<strike> Text taiat </strike><br>
<big> Prezinta textul intr-un font mare </big><br>
<small> Prezinta textul intr-un font mic </small><br>
<sub> Aseaza textul in pozitia subscript </sub> normal
<sup> Aseaza textul in pozitia superscript </sup><br>
</p>
</body>
</html>
Text taiat
Prezinta textul intr-un font mare

Prezinta textul intr-un font mic
Aseaza textul in pozitia subscript
normal Aseaza textul in pozitia superscript
- Urmatoarele elemente pentru format sunt folosite mai rar si sunt pentru documente cu
aplicatii tehnice
- <dfn> Defineste exemplu de termen inchis </dfn>
- <code> Folosit pentru extragerea unui cod de program </code>
- <samp> Folosit pentru simple productii de programe, scripturi , etc. </samp>
- <kbd> Folosit pentru text care va fi scris de utilizator </kbd>
- <var> Folosit pentru variabile sau argumente de comenzi </var>
browser.
<html>
<head>
</head>
<body>
<p>
<dfn> Definite exemplu de termen inchis </dfn><br>
<code> Folosit pentru extragerea unui cod de program </code><br>
<samp> Folosit pentru simple productii de programe, scripturi , etc. </samp><br>
<kbd> Folosit pentru text care va fi scris de utilizator </kbd><br>
<var> Folosit pentru variabile sau argumente de comenzi </var><br>
</p>
</body>
</html>
Definite exemplu de termen inchis
Folosit pentru extragerea unui cod de program
Folosit pentru simple productii de programe, scripturi , etc.

Folosit pentru text care va fi scris de utilizator
Folosit pentru variabile sau argumente de comenzi

- Alte elemente pentru formatul textului:
- <q> ... </q> - Folosit pentru citate scurte.
- <blockquote> ... </blockquote> - Folosit pentru incadrarea de citate mai lungi,

creaza spatiu pentru text. Pentru a crea mai mult spatiu puteti adauga de mai multe ori
acest element.
- <address> ... </address> - Cu acest element se specifica informatii cum ar fi

autorul documentului si detalii pentru contact.
browser.
<html>
<head>
</head>
<body>
<p>
<q>Daca vrei si crezi, orice este posibil.</q>
<blockquote>
Bucuriile neimpartasite pot aduce tristete iar suferinta impartasita poate sa aduca bucurie.
<br>
Aceasta este prima zi din restul vietii tale.
</blockquote>
<center>
<address>180 Attwell Dr. Suite 130 <br> Toronto, ON <br> M9W 6A9</address>
</center>
</p>
</body>
</html>
Daca vrei si crezi, orice este posibil.

Bucuriile neimpartasite pot aduce tristete iar suferinta impartasita poate sa aduca bucurie.
Aceasta este prima zi din restul vietii tale.
180 Attwell Dr. Suite 130
Toronto, ON
M9W 6A9
Marcatori si numerotare
HTML contine cateva tag-uri utile pentru asezarea continutului in pagina. Prin acestea textul
este mai usor de citit si evidentiat.
1. Elementele pentru marcatori si numerotare

Un element des folosit in formarea listelor (neordonate) este <ul>.
- <ul> este elementul de nceput si dupa scrierea listei se incheie cu </ul>.
- Majoritatea elementelor pentru marcatori si numerotare sunt compuse din unu sau
mai multe elemente <li> ... </li> (list element). Fara atributul "type" specificat in
"<ul>" acestea prezint un marcaj ca un bullet.
Mai jos puteti vedea exemplu.

<html>
<head>
</head>
<body>
<ul>
<li>List item 1 ...</li>
</ul>
</body>
</html>
- In pagina web apare asa:
List item 1 ...
List item 2 ...
List item 3 ...
- Sunt 3 tipuri de marcaje: disc, circle (cerc) si square (patrat)
- Tipul de marcaj care se doreste folosit se introduce prin atributul type in eticheta <ul>
- Exemplu:
<html>
<head>
</head>
<body>
<ul type="square">
</ul>
</body>
</html>
List item 1 ...
List item 2 ...
List item 3 ...
Un alt element folosit pentru formarea listelor (ordonate) este <ol>.
- <ol> ... </ol> este un element de numerotare. Elementele din lista sunt numerotate
automat.
- Impreuna cu <ol> se foloseste <li> ... </li>
Iata un exemplu:
<html>
<head>
</head>
<body>
<ol>
</ol>
</body>
</html>
1. List item 1 ...
2. List item 2 ...
3. List item 3 ...

Sunt mai multe tipuri de numerotare care pot fi folosite. Acestea sunt controlate de atributul
"type care este adaugat in elementul <ol>, le puteti vetea mai jos:
- type="1" - stil: 1, 2, 3, ...
- type="a" - stil: a, b, c, ...
- type="i" - stil: i, ii, iii, ...
- type="I" - stil: I, II, III, ...
De asemenea se poate specifica numarul de inceput al numerotarii printr-o valoare data

atributului start.
Exemplu:
<html>
<head>
</head>
<body>
<ol type="a">
</ol>
- Alta lista:
<ol type="I" start="3">
</ol>
</body>
</html>
a. List item 1 ...
b. List item 2 ...
c. List item 3 ...
- Alta lista:
III.
List item 1 ...
IV.
List item 2 ...
V.
List item 3 ...
2. Alte elemente pentru asezarea textului in pagina

Alte elemente pentru asezarea textului sunt: tag-ul <dl>, care cuprinde in el elementele <dt>
si <dd>
- <dl> ... </dl> este folosit (impreuna cu "dt" si "dd") pentru definirea si incadrarea
unei liste de definitii.
- <dt> ... </dt> Defineste elementul din lista. Fiecare tip de astfel de element trebuie
precedad de unul sau mai multe elemente <dd> ... </dd>, folosite pentru descrierea
elementului definit.
Aceste elemente ajuta pentru a da un aspect ordonat si placut textului si a putea face o
separare mai buna a continutului.
In urmatorul exemplu puteti vedea cum se folosesc aceste elemente :
<html>
<head>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd> - Hyper Text Markup Language</dd>
<dd> - Limbaj pentru pagini web</dd>
<dt>Dog</dt>
<dd>dog = caine</dd>
<dd>animal de casa</dd>
</dl>
</body>
</html>
HTML
- Hyper Text Markup Language
- Limbaj pentru pagini web
Dog
dog = caine
animal de casa
Pentru o eficienta mai buna se pot combina elementele de marcaj si numerotare, introducand
elementele <ul> si <ol> imbricate (unele in celelalte) impreuna cu elementele <li>
Exemplu:
<html>
<head>
</head>
<body>
<ul type="square">
<li> List item 1 ... </li>
<li> List item 2 ...
<ol type="a" start="3">
<li> Alt List item ... </li>

<li> Alt List item ... </li>
</ol></li>
<li> List item 5 ... </li>
</ul>
</body>
</html>
- Observati ca tot ce contine "<ol> ... </ol>" este adaugat in cadrul unui "<li> </li>"
List item 1 ...
List item 2 ...

c. Alt List item ...
d. Alt List item ...
List item 5 ...
Adaugare Imagini
HTML contine si elemente pentru adaugarea de imagini in pagina web.
1. Formatul imaginilor care pot fi folosite

Cele mai folosite formate pentru imaginile adaugate intr-o pagina HTML sun GIF si JPEG
(JPG ; JPE), avantajul acestora este ca imaginile care au aceste extensii au o marime mica (in
bytes), avand maximum 256 de culori.
Alte tipuri de formate (folosite mai rar) sunt:
PNG, BMP, TIFF, PCX
2. Adaugarea unei imagini intr-o pagina web

Pentru a introduce o imagine intr-un format HTML se folosete elementul <img> ... </img>
mpreuna cu urmatoarele atribute :
- src - Valoarea acestui atribut determina locatia fisierului care contine imaginea.
- alt - La acest atribut se scrie textul care va aparea daca imaginea nu e afisata (de
unele browsere) sau cand utilizatorul va pozitiona, in browser, mouse-ul peste
imagine.
- align - Acest atribut permite asezarea imagini in locuri diferite pe pagina. Pot fi
folosite urmatoarele optiuni:
o Bottom , Middle , Top , Left , Right , TextTop , ABSMiddle , Baseline ,

ABSBottom
- width - Valoarea acestui atribut reprezinta lungimea imaginii, in pixeli. Daca nu

este scris imaginea va fi prezentata cu lungimea originala.
- height - Valoarea acestui atribut reprezinta inaltimea (latimea) imaginii, in pixeli.

Daca nu este scris imaginea va fi prezentata cu inaltimea originala.
- border - Prin adaugarea acestui atribut imaginea va aparea nconjurata de un

chenar, valoarea acestui atribut reprezinta grosimea chenarului, in pixeli.
- hspace - Acest atribut este pentru spatiu orizontal pe ambele parti ale imaginii,
specificat in pixeli. De exemplu o valoare de 5 va pune un spatiu invizibil, de 5 pixel,
in prtile orizontale ale imaginii.
- vspace - Acest atribut este pentru spatiu vertical pe ambele parti ale imaginii,
specificat in pixeli. De exemplu o valoare de 5 va pune un spatiu invizibil, de 5 pixel,
in prtile verticale ale imaginii.
In exemplu de mai jos puteti vedea modul de introducere a unei imagini pe o pagina web si
cum pot fi folosite atributele :
<html>
<head>
</head>
<body>
<img src="imagine.jpg" alt="puteti adauga orice text" align="top" width="100"
height="120" border="4" hspace="10" vspace="7"></img>
</body>
</html>
Crearea de link-uri
Link-urile (links) sunt elemente HTML cu ajutorul carora putem deschide alte pagini, sari de
la un document la altul sau la alt site. Sunt foarte importante in crearea de pagini web.
Forma generala pentru crearea unui link este urmatoarea:
<a href="url" title="Titlu link">Nume</a>
- a este elementul specific pentru crearea link-urilor

- href este atributul care marcheaza indicarea adresei link-ului
- url este adresa link-ului (a paginii care va fi deschisa). De exemplu (http://www.marplo.net)
- title este atributul prin care se da un titlu link-ului (un text ascuns, care apare numai cand
este pozitionat mouse-ul deasupra link-ului)
- Titlu link este textul ascuns care apare cand este pozitionat mouse-ul deasupra link-ului
- Nume este textul care va aparea in browser si pe care trebuie dat click cu mouse-ul. In loc
de acest text se poate folosi si o imagine, astfel "Nume" va fi inlocuit cu <img

src="nume_imagine.extensie">
Cand documentul este alcatuit din mai multe cadre se foloseste si atributul target, vezi Lectia
10
Culoarea link-urilor poate fi schimbata de urmtoarele atribute, care trebuie scrise in
interiorul elementului <BODY>
link="#0000ff - reprezinta culoarea link-ului in browser.
vlink="#00ffff - reprezinta culoarea link-ului cnd pagina respectiva a fost / este

vizitata.
alink="#ff0000 - reprezinta culoarea link-ului cnd acesta este activat.
Exemplu:
<body bgcolor="#00ffff" link="#000000" vlink="#ff0000" alink="#00ff00">
Link-urile sunt de doua feluri:

1. Link-uri externe - (sunt cele mai utilizate), care sunt si ele de doua feluri:
a) Link-uri externe ctre pagini ale aceluiasi site. Pentru acestea URL-ul poate sa nu
includa si domeniul site-ului, cum ar fi "http://www.nume.com", ci se poate folosi doar cale
in directoare, numele si extensia documentului la care se face saltul.
De exemplu:
- daca documentul tinta se afla in acelasi director cu fisierul in care se scrie link-ul,
codul va fi scris asa:
o <a href="nume_fisier.extensie" title="Titlu link">Nume</a>
- daca documentul tinta se afla intr-un director anterior celui in care se afla fisierul in
care se scrie link-ul, codul va fi scris asa:
o <a href="../nume_fisier.extensie" title="Titlu link">Nume</a>
- daca documentul tinta se afla intr-un director din cel care se afla fisierul in care se
scrie link-ul, codul va fi scris asa:
o <a href="director/nume_fisier.extensie" title="Titlu link">Nume</a>
b) Link-uri externe ctre alte site-uri. Aici, adresa URL din link trebuie sa contina si
domeniul (numele site-ului) paginii tinta, codul HTML se va scrie, de exemplu, asa:
<a href="http://nume_site/pagina" title="Titlu link">Nume</a>
2. Link-uri interne - sunt link-uri ctre alte texte din aceeasi pagina. Se folosesc cnd pagina
respectiva este lunga si e nevoie sa se sara spre anumite texte din pagina.
- Pentru creare de link-uri interne trebuie urmati urmatorii pasi:
1. Se scrie urmatorul cod la textul tinta, care marcheaza locatia unde se va face saltul
si se afla in aceeasi pagina cu linkul
o <a name="cuvant">Textul tinta</a>
- atributul "name" indica tinta pentru link, e un fel de semn care indica
locatia.
- "cuvant" poate fi orice cuvnt, trebuie sa fie unic pentru fiecare link.
- "Textul tinta" este textul unde se face saltul.
2. In locul unde vrem sa fie link-ul (acolo unde o sa dam click pentru a face saltul
ctre textul ales), se scrie urmatorul cod:
o <a href="#cuvant">Nume</a>
o - aici "cuvant" este acelasi text scris la pasul 1.
Link-urile interne si externe pot fi combinate. Astfel putem face saltul ctre un anumit text
aflat intr-o alta pagina. In pagina respectiva se scrie codul de la pasul 1, la textul ales pentru
tinta link-ului, iar in pagina in care va fi link-ul se scrie:
<a href="adresa_pagina#cuvant">Nume</a>
Harti de imagini
Hartile de imagini sunt parti din aceeasi imagine care este "impartita" in mai multe zone, apoi
in functie de zona pe care se executa click, browserul poate afisea o alta pagina.
De exemplu, pe un site dedicat turismului am putea avea pe pagina principala o imagine care
reprezinta harta tarii (in care definim zonele dupa conturul judetelor); in cazul unui click pe
zona Brasov se incarca o pagina care descrie diverse obiective turistice din judetul Brasov, iar
un click pe o alta zona de judet ar duce la alta pagina care descrie obiectivele turistice din
acel judet.
O harta de imagini ar putea fi folosita si pentru navigarea in cadrul unui site: daca avem mai
multe butoane de navigare grupate, se poate folosi o imagine care reprezinta toate acele
butoane - mai multe imagini se incarca mai incet decat o imagine cu dimensiunea egala cu
suma celorlalte (in kb) deoarece comunicarea cu serverul (cand se cere imaginea) se face o
singura data.
Pana aici am prezentat numai avantaje; dezavantajul major este ca un vizitator care are
browserul setat sa nu incarce imagini pentru a naviga mai repede nu va vedea imaginea si nu
va intelege mai nimic (putem totusi folosi marcajul "alt" de specificare a textului alternativ
pentru imagini). Totusi acest lucru este foarte rar.
Crearea hartii de imagini

Pentru formarea unei harti de imagini, se adauga in interiorul tag-ului "<img>" atributul
"usemap" a carui valoare reprezinta numele hartii, apoi se incepe formarea hartii prin
elementul:
<map name="nume_harta"> </map>
- unde pt. "nume_harta" a atributului "name" se foloseste acelasi cuvant adaugat la

"usemap"
- in cadrul acestuia se adauga elemente
<area atribute>
- acestea definesc zonele hartii imaginii si forma acestora (prin valorile atributelor),
- numarul de elemente "AREA" reprezinta numarul de suprafete (cu link-uri specifice) in care
este "impartita" imaginea.
In urmatorul exemplu puteti vedea forma generala a creari unei "harti de imagini" (cu 2
cadre), URL poate fi orice adresa de site sau pagina a site-ului curent:
<img src="poza.jpg" usemap="#map1">

<map name="map1">
<area shape="rect" coords="9, 120, 56, 149" href="url">
<area shape="rect" coords="100, 200, 156, 249" href="url">
</map>
In tabelul de mai jos puteti vedea atributele care se folosesc si descrierea acestora:
Instructiune
Atribute
-
usemap="nume_harta
specifica harta de imagine la client
"
lowscr = "url"
<map atribute
>
< / map >
marcaj de includere a imaginilor

specifica faptul ca este o harta de imagine pe
server (se foloseste mai rar; de obicei folosim
harti de imagine la client)
ismap
<img atribute >
Descriere
name = "nume_harta"
imaginea de rezolutie scazuta care se incarca

prima (doar pentru Netscape)
specifica regiunile unei harti de imagine la client
numele hartii de imagine (corespunzator
atributului USEMAP al marcajului <IMG>)
shape = "forma"
defineste o regiune a unei harti de imagine

forma regiunii: rect sau rectangle (dreptunghi),
circle sau circ (cerc), point (punct), poly sau
polygon (poligon)
coordonatele unei regiuni (in pixeli); se calculeaza

in functie de coltul din stanga sus al imaginii (care
are coordonatele (0, 0), adica x = 0, y = 0); variaza
in functie de SHAPE = forma regiunii:
- pentru rect (dreptunghi) se dau coordonatele
celor 4 colturi sau a celor din stg. sus si dr. jos ale
coords = "coordonate" regiunii
- pentru circ (cerc) se dau coordonatele centrului
<area atribute >
cercului si raza
- pentru point (punct) se dau coordonatele
punctului
- pentru poly (poligon) se dau coordonatele
colturilor poligonului
href = "=url="
URL - ul asociat regiunii specificate din cadrul

imaginii; in cazul unui clic pe acea regiune se
incarca pagina specificata prin URL
alt = "text"
textul asociat regiunii specificate din cadrul

imaginii; apare plasand mouse-ul deasupra
regiunii respective sau celor cu browserul setat sa
nu incarce imagini
Iata un exemplu practic, avem imaginea de mai jos.

In aceasta imagine avem trei zone distincte: dreptunghi, cerc si romb (poligon); pe care, prin
codurile HTML de creare a hartii de imagini, le-am definit sa fie tratate ca zone diferite,
separate, si cand dam click pe ele, fiecare deschide cate o pagina diferita (sugerata de numele
din zona respectiva).
- Observati ca mouse-ul isi schimba forma numai cand este deasupra zonelor care au fost
definite ca sa fie suprafete a hartii de imagini. Aceasta definire nu este facuta prin desen, ci
prin coordonatele folosite in atributul "coords", coordonate care au fost alese pentru a se
potrivi cu desenul. Reperul cel mai important este lungimea in pixeli din coltul stanga-sus
pana in punctele care formeaza zona dorita.
Codul HTML pentru acest exemplu este urmatorul (studiati cu atentie atributele folosite si
coordonatele scrise; revizuiti si tabelul de mai sus):
<div align="center">
<img src="image_map.gif" alt="Harta de imagini" border="0" width="300" height="300"
usemap="#map1">
<map name="map1">
<area
href="dir/contact.php" alt="Date de contact" title="Date de contact"
shape="rect" coords="6,116,97,184">
<area
href="curs.html" alt="Curs HTML" title="Curs HTML"
shape="circle" coords="251,143,47">
<area
href="../index.html" alt="Pagina principala" title="Pagina principala"
shape="poly" coords="150,217, 190,257, 150,297,110,257">
</map>
</div>
Lucru cu tabele
Tabelele sunt elemente foarte utile pentru asezarea si prezentarea continutului intr-o pagina
web.
1. Crearea de tabele
Pentru a crea tabele in paginile web se foloseste elementul <table> ... </table> , acesta
incadreaza alte patru sub-elemente, care alcatuiesc structura tabelului.
- Linia (randul) Tabelului <tr> ... </tr>
- Titlul Tabelului <th> ... </th>
- Coloanele tabelului (datele) <td> ... </td>
- Sub-titlu tabelului <caption> ... </caption>
Linia tabelului de obicei contine elementul pentru titlurile tabelului si elementul pentru
coloanele tabelului.
In cadrul elementelor pentru titluri si coloanele tabelului se pot adauga si alte elemente
HTML, cum ar fi cele pentru formatul textului, paragrafe, link-uri sau imagini
Mai jos puteti vedea un exemplu de cod HTML pentru crearea unui tabel:
<table border="1">
<tr>
<th>titlu 1</th>
<th>titlu 2</th>
</tr>
<tr>
<td>linia 2- coloana 1</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
titlu 1
titlu 2
linia 2- coloana 1
linia 2- coloana 2
linia 3- coloana 1
linia 3- coloana 2
linia 4- coloana 1
linia 4- coloana 2
2. Atributele Tabelului
- bgcolor = defineste culoarea tabelului
- width = specifica lungimea tabelului (In pixeli sau procente din lungimea paginii)
- border = grosimea liniei (in pixeli) ce defineste tabelul si nconjoara fiecare celula
- cellspacing = spatiu dintre celule (in pixeli)
- cellpadding = spatiu dintre linia celulei si continutul acesteia (in pixeli)
- align = controleaz poziionarea tabelului in pagina, cu urmtoarele atribute : left,

right, sau center
- background = controleaza culoarea de fond a tabelului, care poate fi si o imagine
- bordercolor = culoarea liniei din jurul tabelului
- bordercolorlight = culoarea luminoasa folosita de doua linii din cele patru care
nconjoara tabelul
- bordercolordark = culoarea ntunecata folosita de doua linii din cele patru care
nconjoara tabelul
Sub-titlu tabelului
- Sub-titlu tabelului "caption" permite specificarea unei linii de text care va aparea
deasupra sau sub tabel, acest lucru este definit de atributul "align" care poate lua valorile: top
(deasupra) bottom (jos)
Exemplu:
<table border="1" cellpadding="2">
<caption align="bottom">acesta este textul</caption>
<tr>
<th>titlu 1</th>
<th>titlu 2</th>
</tr>
<tr>
</tr>
</table>
titlu 1
linia 2- coloana 1
titlu 2
linia 2- coloana 2
acesta este textul
3. Atributele specifice elementelor pentru titlu si coloane
- colspan = specifica cat de multe coloane ale tabelului aceasta celula va inlocui
- rowspan = specifica cat de multe randuri ale tabelului aceasta celula va inlocui
- align = alinierea datelor celulei pe orizontala (left, right sau center)
- valign = alinierea datelor celulei pe verticala (top, middle sau bottom)
- background = controleaza culoarea de fond a celulei, care poate fi si o imagine
- bgcolor = defineste culoarea celulei (dar nu imagine)
- width = specifica lungimea celulei (In pixeli sau procente din lungimea paginii)
- height = specifica inaltimea celulei (In pixeli sau procente din inaltimea paginii)
in urmatorul exemplu puteti vedea rezultatul folosirii atributelor: "colspan" "rowspan" si

"bgcolor"
<table border="1" cellpadding="2">

<caption align="bottom">acesta este textul</caption>
<tr>
<th>titlu 1</th>
<th>titlu 2</th>
</tr>
<tr>
<td colspan="2">linia 2- coloana 1</td>
</tr>
<tr>
<td rowspan="2">linia 3- coloana 1</td>
</tr>
<tr>
<td bgcolor="#adadff">linia 4- coloana 2 - colorat</td>
</tr>
</table>
titlu 1
titlu 2
linia 2- coloana 1
linia 3- coloana 1
linia 3- coloana 2
linia 4- coloana 2 - colorat
acesta este textul
Exersati singuri si alte exemple de tabele, cu mai multe randuri si coloane.
Utilizarea cadrelor
Cadrele, sau frame-uri, sunt folosite pentru impartirea ferestrei browser-ului astfel incat sa fie
afisate mai multe pagini in aceeasi fereastra de browser.
Un frame (cadru) este o parte din suprafata ferestrei browserului.
Fiecare frame prezinta n interior un document propriu (in general un document HTML). De
exemplu puteti creea doua cadre intr-o fereastra, in primul cadru puteti incarca un document
HTML (ex. doc1.htm) iar in al doilea cadru un alt document HTML, de la alta adresa (ex.
doc2.htm)
Dupa cum puteti vedea in imaginea de mai jos.
Pentru crearea de frame-uri se pot folosi urmatoarele etichete HTML:
<frameset> si <frame> sau <iframe>
1. Configurarea cadrelor
Pentru inceput se adauga un element <FRAMESET> ... </FRAMESET> in interiorul
documentului HTML, n sectiunea HEAD.
<FRAMESET> determina cat din spaiul ferestrei este atribuit fiecrui cadru, folosind
atributele ROWS sau COLS care impart ecranul in Linii sau Coloane.
Acesta va conine elemente <FRAME>, cate unul pentru fiecare divizare a ferestrei din
browser.
ROWS
Determina numarul de linii si marimea cadrelor care vor fi asezate in linie, ncepnd
de sus.
Pot fi folosite urmatoarele valori:

o - pixeli absoluti ; ex : "360,120"
- procente din inaltimea ecranului ; ex : "75%,25%"
- valori proportionale, folosind (*). Acesta putnd fi combinat cu procente sau
pixeli. Ex : "120,*" sau "30%,*"
COLS
Determina numarul de coloane si marimea cadrelor care vor fi asezate pe coloane,

ncepnd din stanga.
Pot fi folosite urmatoarele valori:

o - pixeli absoluti ; ex : "380,120"
- procente din lungimea ecranului ; ex : "33%,77%"
- valori proportionale, folosind (*). Acesta putnd fi combinat cu procente sau
pixeli. Ex : "120,*" sau "30%,*"
Alte atribute ale elementului <FRAMESET>
FRAMEBORDER - Stabileste afisarea sau nu a unei borduri in jurul cadrelor.

Posibile valori: 0, 1 sau YES, NO.
FRAMESPACING - Acest atribut este specificat in pixeli. Daca FRAMEBORDER

este 0 atunci si acesta trebuie sa aiba valoarea 0
BORDER - Marginea cadrelor. Valori posibile: 0 sau 1
BORDERCOLOR - Acest atribut permite sa alegi culoarea bordurii.
Elementul <FRAME>
Acest element defineste un singur cadru , este scris in interiorul elementului

<FRAMESET>
Pentru fiecare cadru trebuie scris cate un element <FRAME>
Acesta are urmatoarele atribute:

o SRC - Aici trebuie scrisa adresa si numele paginii folosite pentru cadru
o NAME - Aici trebuie scris numele de identificare al cadrului.
o MARGINWIDTH - Atribut optional, valoare in pixeli. Determina spatiul
orizontal dintre continutul cadrului si marginea acestuia
o MARGINHEIGHT - Atribut optional, valoare in pixeli. Determina spatiul
vertical dintre continutul cadrului si marginea acestuia.
o SCROLLING - Afiseaza un Scroll Bar in cadru. Valori posibile: YES
(permite afisarea Scroll Bar-ului), NO (nu va fi prezentat nici un Scroll Bar) si
AUTO (browser-ul va decide daca este nevoie de Scroll Bar. Aceasta valoare
este cea mai indicata)
o NORESIZE - Optional, impiedica utilizatorul sa modifice marimea cadrului,
prin selectarea marginii acestuia si mutarea in stnga sau dreapta ori sus sau
jos.
Mai jos puteti vedea cum poate fi creata o pagina HTML care sa contina doua cadre, cel din
stnga ocupnd 23% din spatiul paginii iar cel din dreapta 77%
<HTML>
<HEAD>
<TITLE> TITLU PAGINII </TITLE>
</HEAD>
<FRAMESET COLS="23%,77%">
<FRAME SRC="doc1.htm" NAME="left" SROLLING="NO">
<FRAME SRC="doc2.htm" NAME="right" SROLLING="YES">
</FRAMESET>
<BODY>
</BODY>
</HTML>
De asemenea se poate crea un design de cadre cu o combinatie de linii si coloane.
In acest caz, un al doilea element "<FRAMESET>" va fi scris in locul elementului

"<FRAME>" care descrie a doua linie. Al doilea element <FRAMESET> va divide spatiul
ramas in doua coloane. Pentru aceasta, al doilea element "<FRAMESET>" trebuie urmat de
inca doua elemente "<FRAME>"
- Pentru o mai buna intelegere puteti studia exemplu de mai jos, care creaza o pagina ce
contine trei cadre:
<HTML>
<HEAD>
<TITLE> TITLU PAGINII </TITLE>
</HEAD>
<FRAMESET COLS="120,*">
<FRAME SRC="baner.htm">
<FRAMESET COLS="120,*">
<FRAME SRC="Meniu.htm" NAME="meniu">
<FRAME SRC="Continut.htm" NAME="date">
</FRAMESET>
</FRAMESET>
<BODY>
</BODY>
</HTML>
2. Atributul target
Cand sunt create link-uri care sunt folosite pentru a deschide pagini in cadre, este nevoie de
specificarea unui atribut in eticheta de link "<a>" numit target, acesta spune browser-ului in
ce cadru sa deschida pagina.
Atributul target foloseste ca valoare textul din atributul NAME al elementului FRAME in
care se va deschide noua pagina.
De exemplu, daca avem un link in Meniu.htm care vrem sa deschid pagina Doc3.htm in
spaiul in care se afla celalat cadru, de exemplu Continut.htm; codul HTML pentru link va
arata astfel in Meniu.htm:
<a href="Doc3.htm" target="numele cadrului Continut.htm"> Numele link-ului

</a>
- daca nu se specifica atributul TARGET , pagina se va deschide in cadrul curent

- atributul TARGET trebuie sa aiba acelasi nume specificat in codul HTML, ca si atributul
NAME din FRAME-ul in care se doreste afisarea paginii.
Special Target:
Sunt 4 nume speciale de TARGET, care nu pot fi asociate cu atributul NAME. Fiecare
are o functie speciala.
target="_top"
o - acesta va ncarca link-ul in toata fereastra browser-ului, disparnd astfel
cadrele.
target="_blank"
o - acesta va ncarca link-ul intr-o noua fereastra de browser, astfel ramanand
deschisa si vechea fereastra.
target="_self"
o - acesta va ncarca link-ul in aceeasi fereastra de unde a fost actionat.
target="_parent"
o - cadrul "_parent" este cadrul anterior de la care a fost deschis noul cadru, daca
acesta nu exista atunci link-ul se va deschide in actuala fereastra de browser.
3. Adaugarea cadrelor iframe

Pentru crearea unui cadru cu "<iframe>" puteti folosi, ca exemplu, urmatoarea sintaxa
(aceasta se adauca in sectiunea BODY, in locul unde doriti sa apara frame-ul):
<iframe src="url_pagina" width="600" height="200" align="center"

scrolling="yes" frameborder="0" name="nume_frame"> </iframe>
- Unde "iframe" este elementul principal care indica adaugarea unui frame in pagina.
- "url_pagina" e adresa paginii care va fi incarcata in iframe, "width" si "height" reprezinta
lungimea respectiv inaltimea cadrului (exprimata in procente sau pixeli), "scrolling"
reprezinta permisiunea de derulare a paginii din cadru (yes sau no), "frameborder" specifica
daca va fi sau nu afisata o margine (bordura) pentru cadru (1=da, 0=nu), iar "nume_frame"
este numele cadrului (necesar pentru atributul "TARGET" in link-uri sau cand frame-ul este
folosit de JavaScript).
Crearea formularelor
De cele mai multe ori formularele HTML sunt create pentru a fi folosite impreuna cu alte
programe si scripturi web, cum sunt PHP, JavaScript si altele.
1. Tag-ul FORM
Pentru a crea un formular in HTTML se folosete elementul <form> ... </form>, in cadrul
acestuia se vor adauga celelalte elemente specifice.
Elementul <form> ... </form> nu contine atribute pentru format, foloseste insa urmatoarele
atribute:
action - aici se scrie adresa URL a unui script de pe server (de obicei PHP sau CGI),
program care trebuie sa accepte datele din FORM , le proceseaza si trimite napoi
raspunsul la browser.
method - aici putem scrie get , sau post. Aceste valori specifica ce metoda HTTP va
fi folosita pentru a trimite continutul formularului la server.
enctye - determina mecanismul folosit pentru a codifica continutul transmis din

formular.
name - Este numele formularului, folosit de scripturi VB (Visula Basic) sau JavaSript.
target - Este tinta cadrului (frame) unde pagina va fi vizualizata, dupa transmiterea
datelor din form.
2. Elementele de formular
In continuare sunt prezentate restul elementelor de formular care sunt folosite pentru a crea
diferite campuri, casete, butoane in pagina web, necesare pentru a aduna datele care vor fi
trimise la aplicatie pe server.
Cele mai multe se creaza prin atributul type al elementului <input> ... </input>
Proprietatile elementului <input> ... </input>
type - tipul de FORM folosit (caseta text, buton si altele ...)
name - numele elementului respectiv de formular, folosit de scripturile la care sunt

trimise datele
value - datele (valoarea) asociate acelui element de formular si care sunt trimise,
impreuna cu numele, catre scripturi (PHP, CGI, JavaScript)
size - specifica numarul de caractere care dau lungimea zonei de text
maxlength - numarul maxim de caractere acceptate
checked - specifica daca un buton sau alta forma va fi initial selectata (bifata).
readonly - folosit pentru campuri de tip text, impedica modificarea valorii (textului)
din acel camp
disabled - impedica folosirea campului care are aceasta proprietate. Va fi vizibil dar
nu va putea fi folosit, datele acestuia nu vor fi trimise din formular la vreun script.
Casete de text
- este folosit pentru a crea in pagina un camp pentru text (cu o singura linie).
- Codul este <input type="text"></input>
In browser va apare:
- Acest element foloseste urmatoarele atribute:

o type - text
o name - numele casutei de text, folosit de scriptul la care sunt trimise datele
o value - va reprezenta propriul context ca valoare aleasa. Un sir de text care
apare in casuta de text
o size - specifica numarul de caractere care dau lungimea casutei de text (default
20)
o maxlength - numarul maxim de caractere acceptate sa fie adaugate de
utilizator
Camp textarea
- "textarea" este un element ce creaza un camp in pagina, in care utilizatorul poate

adauga mai multe linii de text.
- Codul este <textarea></textarea>


o name - numele campului de text, folosit de scriptul la care sunt trimise datele
o rows - numarul de linii a zonei de text
o cols - numarul de coloane a zonei de text
o wrap - standard este OFF. Dar poate avea valorile : "VIRTUAL" sau
"PHYSICAL", astfel ca textul wraps in browser sa fie prezentat exact cum
este scris de utilizator.
Casete pentru parole
- "password" este folosit pentru a permite adaugarea de parole. Caracterele adaugate

in aceasta caseta nu sunt afisate cu valoarea lor reala, pentru a nu se vedea parola
scrisa.
- Codul este <input type="password"></input>


o type - password
o name - numele casutei pentru parole, folosit de scriptul la care sunt trimise
datele
o value - de obicei nu este adaugat. Daca este scris, va reprezenta parola default
din acea caseta.
o size - specifica numarul de caractere care dau lungimea casutei pt. adaugarea
parolei (default 20)
o maxlength - numarul maxim de caractere acceptate sa fie adaugate de
utilizator
Casete de formular ascunse
- "hidden" este folosit pentru a adauga in formular date care sa nu fie vizibile in
browser si care sunt trimise la scripturi impreuna cu celelalte date din formular.
- Codul este <input type="hidden"></input>

o type - hidden
o name - numele casutei ascunse, folosit de scriptul la care sunt trimise datele
o value - valoarea care se doreste sa fie transmisa prin acea caseta ascunsa.
Check box
- este folosit pentru adaugarea mai multor optiuni pe care utilizatorul le poate alege
(oricate din ele) prin bifarea lor
- Codul este <input type="checkbox"></input>


o type - checkbox
o name - numele casutei checkbox, folosit de scriptul la care sunt trimise datele
o value - valoarea casetei checkbox respective, care poate fi selectata (bifata)
o checked - daca este adaugat acest atribut, caseta checkbox respectiva este
selectata (bifata).
Radio button
- este folosit pentru adaugarea mai multor optiuni dintre care utilizatorul poate alege
una singura
- Codul este <input type="radio"></input>


o type - radio
o name - numele casutei radio, folosit de scriptul la care sunt trimise datele
o value - valoarea casetei radio respective, care poate fi selectata (bifata)
o checked - daca este adaugat acest atribut, caseta radio respectiva este selectata
(bifata).
Casete pentru upload
- "file upload" este folosit pentru a permite utilizatorului sa incarce alte documente pe
serverul web. Aceasta caseta este insotita de un buton "Browse" prin care se alege
documentul care va fi transferat pe server. (upload-ul se face tot prin intermediul unui
script (PHP, CGI)
- Codul este <input type="file"></input>


o type - file
o name - numele casutei upload, folosit de scriptul la care sunt trimise datele
o size - specifica numarul de caractere care dau lungimea casutei upload.
Buton simplu
- acesta este folosit cu JavaScript sau VBScript pentru a efectua o actiune cnd este
apasat
- Codul este <input type="button" value="Buton"></input>


o type - button
o name - numele butonului, necesar pentru a fi folosit de script
o value - textul care apare pe buton.
Buton Submit
- acest element face ca prin apasarea lui browser-ul sa trimita numele si valoarea
tuturor celorlalte elemente din formular la scriptul de pe server
- Codul este <input type="submit" value="Trimite"></input>


o type - submit
o name - numele butonului, poate fi folosit de scriptul la care se trimit datele

Imagine pentru buton Submit
- permite aplicarea unei imagine in locul butonului Submit standard
- Codul este <input type="image" src="locatie_imagine"></input>

o type - image
o name - numele butonului, poate fi folosit de scriptul la care se trimit datele
o src - locatia imaginii folosite.
Buton Reset
- permite utilizatorului sa stearga toate datele pe care le-a scris in celelalte elemente
din formular
- Codul este <input type="reset" value="Sterge"></input>


o type - reset
Elemente select
- pentru acest element se foloseste tag-ul "<select></select>", care formeaza o lista,

un meniu, cu date ce pot fi selectate.
- Atributete elementului "<select>" sunt:

o name - numele acestui element, necesar pentru a fi folosit de scriptul la care
sunt trimise datele
o size - seteaza inaltimea elementului Select, care reprezinta si numarul de

optiuni din lista care vor fi vizibile initial
o multiple - prezenta acestui atribut specifica faptul ca utilizatorul poate selecta
mai multe optiuni.
- "<select></select>" este folosit impreuna cu elemente "<option> </option>" care

reprezinta lista elementelor ce sunt adaugate si afisate in lista de selectare.
- <option> </option> foloseste doua atribute:

o selected - cand acesta este adaugat, optiunea respectiva este selectata cnd
pagina web este initial incarcat. Cand sunt adaugate mai multe optiuni, este
indicat folosirea acestui atribut doar cu una singura.
o value - specifica valoarea variabilei numita in optiunea respectiva (necesara
pt. scriptul care va primi datele).
- sunt doua tipuri de elemente Select, unde diferenta o face folosirea atributului SIZE
- Cele doua tipuri de elemente Select sunt:
1. Drop Down List (Lista de derulare)

o - Codul este:
<select name="select">
<option>Optiune 1</option>
</select>
o - unde "name" este atributul care defineste numele acestui tag SELECT, iar
"<option>" impreuna cu "Optiune 1" (si 2) reprezinta elementele din lista de
selectare.
2. List Box
- Codul este:
<select name="select" size="4">
</select>
- unde "name" este atributul care defineste numele acestui tag SELECT, atributul
"size" determina inaltimea elementului select care determina si numarul de optiuni
vizibile initial, iar "<option>" impreuna cu "Optiune 1" (si 2) reprezinta elementele
din lista de selectare.
- Toate aceste elemente trebuie incadrate in tag-ul "<form> ... </form>"!
Elemente speciale meta, embed, marquee,

object
Codul HTML contine si anumite elemente speciale, unele folosite pentru optimizarea paginii
in vederea unei cat mai bune indexari in motoarele de cautare sau altele pentru adaugarea de
aplicatii audio si video ori alte elemente in pagina.
1. Elemente pentru optimizarea indexarii paginii

Aceste elemente de optimizare se adauga in sectiunea HEAD a documentului HTML.
Cel mai important este tag-ul <title></title>
Alte elemente importante pentru motoarele de cautare sunt cele META, (numite si "meta taguri), acestea au 2 atribute: name (care determina tipul meta tag-ului) si content (care
determina continutul meta tag-ului).
In continuare sunt prezentate exemple de meta tag-uri care sunt indicate sa fie adaugate in
fiecare pagina HTML:
<meta content="text/html; charset=UTF-8" http-equiv=Content-Type>
- indica browserului ca este un fisier HTML
- charset stabileste tipul de caractere (in general se foloseste ISO-8859-1 sau UTF-8),
dar exista si altele.
<meta name="description" content="O fraza care descrie pe scurt continutul paginii">
- in cazul unei cautari dupa cuvinte-cheie, motorul de cautare ne da o lista de pagini;

pentru fiecare pagina (site) din lista apare titlul ei (dat cu marcajul TITLE) urmat de o
fraza (cea de la name="description" content="o fraza care descrie ..."); daca nu avem
in marcajul META acea fraza, motorul va indexa dupa prima fraza din pagina; tot ea
va fi data la o eventuala cautare.
- textul adaugat cu acest tag pentru descriere are prioritate inaintea frazelor din
continut. (folositi maxim 40, 50 caractere).
<meta name="keywords" content="lista, de cuvinte, separate, prin, virgula">
- motoarele de cautare tin cont de cuvintele din meta "keywords" in momentul

indexarii site-ului pentru atunci cand sunt afisate rezultate de cautari. (folositi maxim
15-20 cuvinte).
<meta name="author" content="numele dvs., e-mail, etc">
- acesta nu este neaparat necesar, dar nu strica sa-l folositi. Arata autorul
documentului.
Recomandare: Cuvintele din tag-ul <title> ... </title> este bine sa se regaseasca si in meta
tag-urile "keywords", "description" cat si in titlurile din continutul paginii.
Un alt meta tag care este cateodata necesar, dar nu are legatura cu motoarele de cautare, este
"Refresh", acesta are urmatoarea forma:
<meta http-equiv="Refresh" content="4;url=http://www.nume_site/pagina">
- acesta determina browser-ul sa incarce o noua pagina, cea care este adaugata la urlul din acest tag (aici http://www.nume_site/pagina), dupa un anumit numar de secunde
(aici 4). Practic, face un redirect.
2. Adaugarea de sunet la o pagina HTML

Pentru a adauga sunet intr-o pagina web, puteti folosi elementele <embed> sau <bgsound>:
1. <bgsound></bgsound> - introduce un background (fundal) audio in pagina, are
urmatoarele atribute:
src - Defineste locatia fisierului audio folosit (midi .au sau wav)
loop - defineste de cate ori se va repeta sunetul
delay - defineste timpul dintre repetari
title - Textul care va descrie sunetul.
Exemplu:
<bgsound src="sunet.midi" loop="3" title="titlul melodiei" derlay="5">
2. <embed></embed> - afiseaza o consola pentru sunet, are urmatoarele atribute:
src - Defineste locatia fisierului audio folosit (midi .au sau wav)
controls - ofera posibilitatea alegerii mai multor controale care includ: console,
console mici, butoane de play si altele
autostart - cand este TRUE sunetul incepe in timp ce sunetul este descarcat de
browser
hidden - cand este TRUE va ascunde controalele, standard este FALSE
loop - defineste de cate ori se va repeta sunetul
volume - seteaza volumul sunetului (sonorul)
height - inaltimea in pixeli a consolei
width - lungimea in pixeli a consolei.
Exemplu:
<embed src="sunet.midi" width="145"height="60" autostart="truie" volume"100"
controls="console" hidden="false">
- Tag-ul "<embed>" poate fi folosit si pentru afisarea de imagini video, care au extensiile
".movs", ".mpeg" sau ".avi", recomandat este ".movs". Se adauga similar ca si sunetul, la
"src" scriti calea catre fisierul video. Diferenta e ca nu trebuie folosit atributul "hidden" iar
pentru "width" si "height" dimensiunile nu trebuie sa fie mai mici decat dimensiunile in care
este salvat fisierul video.
- Totusi, afisarea de imagini video necesita mai mult timp deoarece fisierele video au
dimensiuni destul de mari.
-- "<embed>" se foloseste si pentru adaugarea de imagini flash (cu extensia ".swf"), pentru
aceasta este incadrat in alt element, <object> </object>
-- Iata un exemplu de cod prin care puteti adauga imagini flash in pagina web:
<object width="580" height="400">
<param name="movie" value="fisier.swf">
<embed src="fisier.swf" width="580" height="400">
</embed>
</object>
Unde "width" si "height" sunt dimensiunile cadrului in care este afisata imaginea flash, iar la
atributele "value" si "src" se scrie calea catre fisierul ".swf" (trebuie scrisa aceeasi cale la
ambele atribute).
- Afisarea in pagina a elementelor cu EMBED necesita folosirea unui plug-in, care de cele
mai multe ori, daca acesta nu este deja instalat, este ceruta automat incarcarea lui de catre
browser.
3. Elemente de animatie text

HTML are un tag special, <marquee> </marquee>, prin care puteti crea un efect de miscare
a unui text (sau imagine) care este incadrat de a cest element.
Are urmatoarele atribute:
loop - defineste de cate ori se va misca textul
height - inaltimea in pixeli a zonei in care se misca textul
width - lungimea in pixeli a zonei in care se misca textul
bgcolor - culoarea zonei in care se misca textul
direction - directia de miscare (left, right, up, down) - (stanga, dreapta, sus, jos)
behavior - defineste cum se va misca textul (scroll, slide, alternate)
scrolldelay - seteaza numarul, in milisecunde, intre refreshuri de miscare.
Exemplu de miscare pe orizontala

<marquee behavior="alternate" bgcolor="#00ffff" direction="right">Marquee
text</marquee>
In pagina va arata asa:
Iata un alt exemplu unde miscarea se face pe verticala:

<marquee behavior="alternate" bgcolor="#00ffff" direction="up" width="100"
height="100">Marquee text</marquee>
In pagina va arata asa:
- In loc de text poate fi folosit si o imagine, inlocuind textul (aici "Marquee text") cu tagul
"<img> pentru imagine.
4. Includerea unei pagini HTML externe

In afara de modalitatea cu folosirea tag-ului <iframe> pentru afisarea in pagina web HTML a
continutului din alta pagina HTML
Ex.: <iframe src="url_pagina.html" width="600" height="200" align="center"
scrolling="yes"> </iframe>
- exista si o alta solutie, data de tag-ul <object> folosit cu atributele "data" si "type".
Urmatorul cod HTML este sintaxa generala de afisare intr-o pagina web a continutului
HTML aflat in alta pagina externa:
<object data="adresa_pagina_externa" type ="text/html" width="600" height="400">

</object>
- Avantajul utilizarii uneia din aceste 2 metode, pentru cei care fac site-uri doar cu HTML,
este faptul ca acelasi continut HTML poate fi inclus in mai multe pagini din site, fiind scris o
singura data. De exemplu, in cazul unui Meniu ce trebuie afisat in toate paginile site-ului;
codul acestuia poate fi scris intr-un fisier special ("meniu.html") apoi, cu una din formulele de
mai sus (tag-ul "<iframe>" sau "<object>") se adauga in fiecare fisier al paginilor, iar la o
eventuala modificare a meniului se va face doar in codul acestuia din "meniu.html".
Stiluri CSS in HTML
Cu HTML 4.0 au aparut specificatiile pentru modele de stiluri, cunoscute ca Modele de

Stiluri in Cascada (Cascading Style Sheets - CSS). Acestea ajuta la afisarea grafica si
incadrarea continutului in pagina.
Pana la acea data, forma, culoarea si marimea textului puteau fi date cu instructiunea "font" si
cu atributele sale: "face", "color", "size".
Modelele de stiluri pot fi aplicate aproape oricarei etichete HTML, folosind proprietati si
valori specifice codului CSS, unele din ele sunt prezentate in tabelul de jos al paginii.
Modelele de stiluri pot fi aplicate in mai multe moduri:
1. Intern - direct in eticheta HTML
- Pentru adaugarea unui STYLE intern la un element se foloseste atributul

style urmat de proprietati si valori, folosind urmatoarea sintaxa:
o
<element style="proprietate:valoare;
proprietate:valoare;"></element>
- Exemplu:
<h4 style="color:#ff1111;">Exemplu h4</h4>
In pagina va apare
Exemplu h4
2. In antetul (header-ul) fisierului
- In acest caz se adauga in sectiunea HEAD a documentului HTML

urmatoarea sintaxa <style type="text/css"> ... </style>. Aceasta
spune browser-ului ca sunt adaugate elemente de stil CSS.
- Aceasta metoda este utila cand se doreste folosirea acelorasi stiluri

pentru mai multe elemente din pagina astfel sunt scrise o singura data si
nu la fiecare element.
- Proprietatile si valorile de sti CSS se introdul in acest element STYLE,

dupa cum puteti vedea in exemplul urmator:
<html>
<head>
<title>titlu</title>
<style type="text/css">
<!-h2 {color:blue; text-decoration:underline;}
-->
</style>
</head>
<body>
</body>
</html>
- Conform acestui cod, toate textele "h2" din pagina vor avea culoarea
albastra si vor fi subliniate.
- Se foloseste (optional) "" pentru browserele care nu recunosc

elementul "<style>" si astfel il ignora.
3. Extern
- Aici proprietatile si valorile pentru diverse stiluri sunt specificate intr-un

fisier extern special, de obicei cu extensia "css" (pe care il putem construi
cu un editor de simplu texte gen Notepad).
- Avantajul folosirii fisierelor externe CSS este faptul ca aceleasi coduri de

stil pot fi folosite de mai multe pagini din site, chiar tot site-ul, fiind scrise
o singura data. In plus ajuta la micsorarea ca marime (in bytes) a
documentului HTML care astfel se incarca mai repede.
- In fisierul extern CSS se scriu direct elementele cu proprietatile si valorile

dorite, NU se mai adauga eticheta "style".
Exemplu de model pentru creare unui fisier ".css" :
Se scrie intr-o pagina noua, deschisa cu NotePad, urmatoarele, si se

salveaza fisierul cu extensia ".css"
a:link {
color:#0000ff;
text-decoration:none;
font-weight:normal;
font-size:15px;
font-family: Arial;
}
a:visited {
color:#008080;
font-weight:normal;
font-size: 15px;
font-family: Arial;
}
a:active {
color:#b54090;
text-decoration:underline;
}
a:hover {
color:#b54090;
text-decoration:underline;
font-weight:normal;
font-size: 15px;
font-family: Arial;
}
p{
font-weight: normal;
font-size: 11pt;
line-height: 12pt;
text-indent: 20px;
font-family: Arial;
}
Pentru a adauga acest stil CSS intr-o pagina web, adaugati in sectiunea
HEAD a documentului HTML care va folosi acel fisier cu stiluri, (intre
<head> ... </head>) urmatoarea comanda:
o
<link href="fisier.css" rel="stylesheet" type="text/css">
- unde la "href" se scrie calea si numele fisierului css folosit.
Se poate face chiar ca un anumit stil sa poata fi aplicat numai unei singure
etichete HTML, iar altul sa poata fi aplicat mai multor etichete HTML de tipuri
diferite. Pentru aceasta se foloseste atributul id sau class in interiorul etichetelor
HTML la care vrem sa aplicam un anumit stil.
Diferenta dintre id si class este faptul ca se poate folosi acelasi atribut "class"
pentru mai multe elemente HTML, pe cand acelasi "id" se foloseste numai pentru
un singur element HTML.
Exemplu pentru "class"
<html>
<head>
<title>Titlul</title>
<!-.cuvant {
color:#1111fe;
dext-decoration:underline;
}
-->
</style>
</head>
<body>
<h2 class="cuvant">Text ...</h2>
<h3 class="cuvant">Alt text ... </h3>
</body>
</html>
- In exemplu de sus, stilul creat poate fi folosit doar de elementele unde vom
adauga comanda class="cuvant", celelalte elemente nefiind afectate.
Important: selectorul (aici "cuvant") in STYLE trebuie sa inceapa

cu punct (.)
Exemplu pentru "id"

<html>
<head>
<!-#idh {
color:#fe1111;
dext-decoration:overline;
text-align:center;
}
-->
</style>
</head>
<body>
<h2 id="idh">Text ...</h2>
<h2>Alt text ... </h2>
</body>
</html>
- In acest exemplu, stilul creat pentru "idh" va fi folosit doar pentru primul
element "h2" care contine 'id="idh"'
Important: Pentru stilurile definite de ID, selectorul (aici "idh")

trebuie sa inceapa cu #.
Incercati singuri aceste exemple pentru a vedea rezultatul.

In tabelul de mai jos sunt cateva atribute (sau proprietati) care pot fi modificate
cu STYLE
Atribut
Descriere
Valori
backgroun
imagini sau culori de fundal
d
URL-ul (imaginii) sau culori date

prin nume sau valoare RGB
Color
nume sau valoare RGB
culoarea textului
font-family tipul fontului
Numele fontului sau al familiei de

fonturi
font-size
dimensiunea fontului
data in puncte(pt), inch(in),

centimetri(cm), pixeli(px)
font-style
text cursiv
normal, italic
grosimea fontului
extra-light, light, demi-light,

medium, demi-bold, bold, extrabold
fontweight

distanta dintre liniile de baza ale
line-height
centimetri(cm), pixeli(px),
randurilor
procent(%)
margin-left
distanta fata de marginea din

stanga a paginii

marginright
distanta fata de marginea din

dreapta a paginii

distanta fata de textul precedent

margin-top sau fata de marginea de sus a
paginii
text-align
alinierea textului
left(stanga), center(centru),
right(dreapta), justify
textevidentierea textului
decoration
none(nimic), underline(subliniat),
italic(cursiv), line-through(taiat)
text-indent
distanta primului rand fata de

marginea din stanga

borderstyle
tipul chenarului
none, groove, dotted, dashed,

solid, double, ridge, inset, outset
borderwidth
grosimea chenarului

bordercolor
culoarea chenarului
nume sau valoare RGB
72 pt=1 inch = 25,4 mm;

un font de dimensiunea 13pt inseamna ca sunt 13 puncte intre partea
superioara a literei N sau h si partea inferioara a literei y sau j
- Pentru aplicarea unui stil css asupra unei portiuni dintr-un text, se foloseste
eticheta <span> </span>, ca in exemplu urmator:
O fraza <span class="cls"> cu orice text</span> si caractere.
- in acest exemplu se pot aplica elemente de stil css clasei (.cls) care vor afecta
doar portiunea de text inclusa intre tag-ul "<span>".
DIV si SPAN
Tag-urile <div></div> si <span></span> nu au efecte importante daca sunt folosite singure.

- Tag-ul DIV creaza sectiuni de blocuri in pagina, al caror forma si grafica de continut pot fi
manipulate pentru fiecare separat. Are doar un singur atribut HTML, align (pt. aliniere pe
orizontala) care poate avea urmatoarele valori: left (stanga), right (dreapta), center (centru),
justify (distanta textului fata de margini egala).
- Tag-ul SPAN creaza posibilitatea modificarii separate a unei portiunii dintr-un context,
putand fi folosit si ca o "classa" cu CSS. Singur nu are nici un efect vizual poropriu si nu
foloseste nici un atribut HTML special.
Chiar daca folosite singure, DIV si SPAN nu au nici un efect major, in combinatie cu CSS pot
crea aspecte grafice importante. Pentru aceasta, ambele pot folosi atributul style (cu
proprietati CSS) ori atributele id sau class ca identificator pentru stiluri CSS.
1. Tag-ul DIV
Tag-ul <div></div> este unul din cele mai folosite elemente HTML, aceasta deoarece in
combinatie cu proprietati CSS poate crea efecte grafice deosebite, iar in interiorul lui pot fi
incluse oricare elemente HTML: tabele, formulare, marcatori, linii sau alte DIV-uri. Cadrul in
care acestea sunt adaugate poate avea propriul fundal (background), lungime, inaltime si
margini cu diferite linii.
Iata un exemplu in care avem 2 div-uri, unul contine un formular iar celalalt o lista
"<ul></ul>", fiecare DIV cu proria culoare de fundal, dimensiuni stabilite si margini diferite.
<div style="width:250px; background:#aaee88; border:1px solid blue;">
<form action="" method="post">
Nume: <input type="text"></input><br>
E-mail:<input type="text"></input><br>
<input type="submit" value="Trimite"></input>
</form>
</div>
Alt DIV
<div style="width:180px; background:#88aafe; border:5px outset #888888;">
<ul>
<li>Linie 1</li>
<li>Linie 2</li>
<li>Linie 3</li>
</ul>
</div>
- In atributul "style" sunt specificate proprietatile CSS care stabilesc aspectul
grafic al fiecarui DIV (lungime in pixeli, fundal si bordura).
Acest cod va afisa intr-o pagina web urmatorul rezultat:
Nume:
E-mail:
Alt DIV
Linie 1
Linie 2
Linie 3
Un alt aspect important este si faptul ca putem pozitiona continutul din interiorul
tag-ului <div> </div> oriunde in pagina, folosind proprietati CSS precum:
position - care poate lua valorile: static, relative, fixed sau absolute
(pt. mai multe detalii vezi Pozitionare CSS).
margin - care stabileste distanta dintre marginea cadrului sectiunii

(blocul) DIV si elementele din jurul lui (pt. mai multe detalii vezi Margini si
chenare CSS).
Iata un exemplu in care, prin folosirea mai multor DIV-uri pozitionate suprapus,
putem afisa in pagina un titlu cu aspect grafic deosebit. Codul este urmatorul:
<div style="position:relative; font-size:21px;">
<div style="position:absolute; margin-top:-1; margin-left:-2; color:white;">Titlu
- Exemplu</div>
<div style="position:absolute; margin-top:1; margin-left:2; color:black;">Titlu Exemplu</div>
<div style="position:absolute; margin-top:0; margin-left:0; color:silver;">Titlu Exemplu</div>
</div>
In acest exemplu avem un prim DIV cu atributul "style" in care avem o
proprietate de pozitionare relativa (pt. a pozitiona toate celelalte elemente pe
care el le incadreaza dupa contextul scris anterior) si o alta proprietate pentru
marimea textului. In interiorul acestui DIV avem alte 3 div-uri, pozitionate absolut
si care incadreaza fiecare cate un text identic. Prin pozitionarea absoluta div-urile
se suprapun, la o distanta stabilita de proprietatile "margin-top" si "margin-left",
iar prin culoare diferita (cu proprietatea "color") data textului din fiecare "div" va
apare in pagina web urmatorul rezultat:
- Pentru a folosi tag-urile DIV eficient si cu rezultate deosebite este

necesar sa cunoasteti proprietatile CSS de baza (pentru fonturi,
pozitionare, margini, borduri, background) pe care le puteti invata la
Cursul CSS din acest site.
2. Tag-ul SPAN
Cu tag-ul <span></span> puteti adauga stiluri grafice unei anumite portiuni dintr-un context.
Pentru aceasta trebuie folosit impreuna cu proprietati CSS care pot fi adaugate printr-un
atribut "style" in interiorul etichetei "<span>" (sau in foi de stil).
Pentru a intelege mai bine, iata un exemplu in care se scoate in evidenta anumite cuvinte
dintr-un text. Pentru aceasta incadram cuvintele respective intr-un tag SPAN caruia ii
adaugam proprietatile dorite, ca in exemplul urmator.
Aceasta este o lectie din <span style="background:#88fe88; fontweight:bold;">Cursul HTML</span> de pe MarPlo.net.
- Am adaugat portiunea din context (aici textul "Curs HTML") intr-un tag SPAN
pentru a-i putea aplica proprietatile grafice dorite si care nu afecteaza restul
continutului.
- Astfel, prin proprietatile adaugate in "style" (background:#88fe88; si fontweight:bold;), in pagina web va fi afisat textul in felul urmator:
Aceasta este o lectie din Cursul HTML de pe MarPlo.net.
Tag-ul SPAN poate fi folosit si ca o classa pentru CSS. Astfel, proprietatile
adaugate elementului "span" intr-o foaie de stil vor fi transferate tuturor
elementelor din pagina care sunt incadrate in tag-uri "<span></span>".
Iata un exemplu
<html>
<head>
span {
border:2px solid red;
padding:1px;
color:#1111fe;
}
</style>
</head>
<body>
<h4>Exemplu de <span>text cu eticheta SPAN</span> in interiorul
frazei.</h4>
<ul>
<li>Linia 1</li>
<li><span> Linie 2, in span </span></li>
<li>Linia 3</li>
<li><span> Linie 4, in span </span></li>
<li>Linia 5</li>
</ul>
</body>
</html>
- Observati cum a fost adaugat elementul "span" in tag-ul "<style> </style>" din
sectiunea HEAD a codului HTML. Acest element face referire la toate tag-urile
"<span></span>" din document si le transmite aceleasi proprietati.
- Acest cod va afisa intr-o pagina web urmatorul rezultat:
Exemplu de text cu eticheta SPAN in interiorul frazei.
Linia 1
Linie 2, in span
Linia 3
Linie 4, in span
Linia 5
3. Diferenta dintre DIV si SPAN
- Diferenta dintre DIV si SPAN este faptul ca DIV incadreaza o sectiune din document sub
forma unui bloc iar SPAN incadreaza o portiune din context sub forma de linii.
Iata un exemplu din care se poate intelege mai bine, atribuim aceeasi proprietate grafica
(bordura rosie) unui tag DIV si unui tag SPAN.'
<div style="border:1px solid #fe1111;">
Fraza pe mai multe linii, <br>
continua cu linia a doua, <br>
se termina cu linia a treia.
</div>
<br>
- Acum cu SPAN:<br><br>
<span style="border:1px solid #fe1111;">
Fraza pe mai multe linii, <br>
continua cu linia a doua, <br>
</span>
- In pagina web va apare
Fraza pe mai multe linii,

continua cu linia a doua,
- Acum cu SPAN:
Fraza pe mai multe linii,
continua cu linia a doua,
- Observati diferenta, modul in care este afisata bordura. Pentru DIV aceasta
incadreaza exteriorul sectiunii (blocul) div-ului, iar pentru SPAN bordura este
afisata pe fiecare linie.
- De aceea este indicata folosirea tag-ului "<span></span>" pentru continut din
interiorul unei linii.
- Cand aveti mai multe elemente <div></div> si <span></span> in pagina, este indicat
folosirea atributului "id" sau "class". Acestora le acordati proprietati CSS o singura data in
sectiunea HEAD sau intr-un fisier CSS extern. Este mai eficient decat sa scrieti in fiecare
"<div>" si "<span>" cate un atribut "style".
Pentru mai multe detalii despre "ID" si "CLASS" folosite cu CSS, puteti studia prima lectie
de la Cursul CSS, Scriere cod CSS.
Tutorial HTML5
Noile caracteristici adaugate in HTML5 sunt bazate pe HTML, CSS, DOM, si JavaScript; si
reduc necesitatea plugin-urilor externe (precum Flash).
Despre sintaxa HTML5
Sintaxa HTML5 este compatibila cu HTML4 si XHTML.

- Puteti inchide elementele ce au un singur tag (META, BR, HR, INPUT, IMG) cu slash, <tag
/>, precum in XHTML; sau puteti sa le lasati fara sa le adaugati slash, <tag>.
- Puteti folosi litere mici, sau /si litere mari, pentru numele tag-urilor si atribute.
Astfel, toate variantele urmatoare sunt valide HTML5:
<meta charset="utf-8">
Sau, inchis cu slash:
<meta charset="utf-8" />
<img src="image.jpg" alt="Text oarecare">
Sau:
<img src="image.jpg" alt="Text oarecare" />
Sau, cu litere mari:
<IMG src="image.jpg" ALT="Text oarecare">
<br>
Sau:
<BR>
Sau:
<br />
- In HTML5 puteti alege sa specificati sau nu atributul type in elementele

<script>, and <style>, acesta a devenit optional:
<script type="text/javascript"><!-// Cod JavaScript
--></script>
Sau:
<script><!-// Cod JavaScript
--></script>
/* Cod CSS */
</style>
Sau:
<style>
/* Cod CSS */
</style>
Toate aceste variante sunt valide in HTML5, dar, ca o buna practica, este
indicat sa folositi sintaxa XHTML; adica sa folositi litere mici, sa adaugati slash-ul
de inchidere, si sa specificati atributul "type" in tag-urile <script>, si <style>.
Structura HTML5
Doctype in HTML5 e mai simplu:
<!doctype html>
Tag-ul Meta charset e mai simplu:

<meta charset="utf-8">
Div-urile sunt acum folosite petru stil si design, nu mai sunt necesare pentru
structura; HTML5 include mai multe elemente noi pentru structurare, care ajuta
la definirea si organizarea diferitelor parti in document.
Acestea sunt principalele elemente de structura care sunt folosite mai des in
HTML5:
<header> - e folosit pentru a defini titluri (si sub-titluri), sau meniu de

navigare in site. Poate fi adaugat direct in BODY, sau in <article>, ori
<section>.
- De obicei in acest element se adauga tag-uri H1, H2, Hx, sau <nav> cu
principalele link-uri.
<footer> - reprezinta subsolul paginii sau a unui <section>, ori

<article>; poate contine informatii despre autor, copyright, etc.
<section> - representa o sectiune distincta a documentului sau aplicatiei.

Se foloseste pentru a grupa logic structura documentului.
Poate contine header, articles, meniu de navigare si footer.
<nav> - in acest tag se adauga meniul de navigare in paginile site-ului.

Acest element ar trebui folosit doar pentru link-uri grupate intr-un meniu.
Daca aveti un <footer> cu link-uri de navigare in site, nu mai e necesar sa
le adaugati si in <nav>, deoarece <footer> e suficient.
<article> - se foloseste pentru a defini un element independent in pagina

(sau in <section>), si poate contine articole de stiri, postari de blog,
comentarii, sau alt continut cu text si imagini.
<aside> - poate fi folosit ca sa defineasca o zona laterala, sau alt continut

care e considerat intr-un fel separat de continutul din jurul lui. Un exemplu
ar fi, banner sau publicitate.
<hgroup> - se foloseste pentru a grupa un set de doua sau mai multe

elemente H1, H2, H3, ..., cand avem de exemplu un titlu si subtitluri
HTML5 vine si cu alte elemente interesante, precum <video> si <audio>, plus
alte tag-uri si atribute noi si modificate, dar acest tutorial este o descriere scurta
care prezinta principalele elemente de baza, ca sa intelegeti noua structura in
HTML5, si sa treceti rapid de la HTML4 sau XHTML la HTML5.
Toate principalele browsere (Safari, Chrome, Firefox, Opera, Internet Explorer)
continua sa adauge noile caracteristici HTML5 in ultimile lor versiuni, dar multi
utilizatori inca folosesc versiuni de browser web ce nu recunosc noile elemente
HTML5, precum IE7, IE8. In acest caz exista o solutie JavaScript, un script extern,
html5.js (gazduit de un proiect Google) care face browser-ul IE sa recunoasca
noua structura din HTML5.
Este recomandat sa includeti acest script in sectiunea HEAD a documentului
HTML5, folosind acest cod:

Si urmatorul cod CSS, care face ca tag-urile specificate sa fie afisate ca elemente
de tip bloc:
<style>header, footer, section, aside, nav, article {display: block;}</style>
Iata o structura comuna a unei pagin cu HTML5, ce contine un header in partea
de sus a paginii (cu u meniu in el), o sectiune in partea stanga (cu un meniu de
navigare "aside" pt. banner), o alta sectiune (cu Header, 2 articole si footer), si
un footer in subsolul paginii (click pe imagine):
Puteti folosi tag-urile pentru structurare cu atributele "id" si "class", precum si

<div>, <span>, <p>, si alte tag-uri HTML pentru design si organizare /aranjare
continut in documentul HTML.
Mai jos sunt codurile HTML5 si CSS pentru a crea o pagina web bazata pe
structura din imaginea de mai sus:
Document HTML5
<!doctype html>
<html>
<head>
<title>Web Development Cursuri si Tutoriale</title>
<meta name="description" content="Examplu document in HTML5, template,
cursuri si tutoriale" />
<meta name="keywords" content="html5, tutoriale html5, cursuri" />

<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header id="page_header">
<h1>Web Development Cursuri si Tutoriale</h1>
<nav>
<ul>
<li><a href="http://www.marplo.net/" title="Home">Home</a></li>
<li><a href="http://www.coursesweb.net/" title="Cursuri Web">Cursuri
Web</a></li>
<li><a href="http://www.marplo.net/forum/">Forum</a></li>
<li><a href="../../coment/contact.php" title="Contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="posts">
<header id="posts_header">
<h2>Tutoriale HTML5</h2>
</header>
<article class="post">
<header>
<h3>Invata rapid HTML5</h3>
</header>
<div class="ctext">
Invata despre noile caracteristici din HTML5.<br />
Tag-uri noi, si elemente pentru structura.
</div>
<aside class="post_baner">Aici poate fi un banner</aside>
<p>
Noile caracteristici din <b>HTML5</b> sunt bazate pe HTML, CSS, DOM, si
JavaScript; si reduc necesitatea plugin-urilor externe (precum
Flash).<br />
Multe alte noi caracteristici HTML5 sunt centrate pe crearea unei mai
bune platforme pentru aplicatiile web, <a
href="http://www.marplonet.net/html/tutorial-html5.html" title="Tutorial
HTML5">Cititi mai mult</a> ...
</p>
</article>
<article class="post">
<header>
<h3>Elemente si attribute noi pentru formular in HTML5</h3>
</header>
<div class="ctext">
Formularele HTML sunt folosite in general ca sa transfere date adaugate
de utilizator la un script de pe server sau JavaScript, ca sa fie procesate
de un limbaj de programare.
</div>
<p>
HTML5 adauga mai multe tipuri de casute input noi, pentru formular
(datetime, datetime-local, date, month, week, time, number, range, email,
url, search, and color), <a href="http://www.marplonet.net/html/html5formular-input-atribute.html" title="Elemente de formular noi">Cititi mai
mult</a> ...
</p>
</article>
<footer id="post_footer">
<p>Mai multe lectii si tutoriale HTML: <a
href="http://www.marplo.net/html/" title="Curs HTML">Curs HTML</a>.</p>
</footer>
</section>
<section id="sidebar">
<nav>
<ul>
<li><a href="http://www.marplo.net/html/" title="Curs HTML">Curs
HTML</a></li>
<li><a href="http://www.marplo.net/curs_css/" title="Curs CSS">Curs
CSS</a></li>
<li><a href="http://www.marplo.net/javascript/"
title="JavaScript">JavaScript</a></li>
<li><a href="http://www.marplo.net/php-mysql/" title="PHP-MySQL">PHPMySQL</a></li>
<li><a href="http://www.marplo.net/flash/" title="Flash-ActionScript
3">Flash-ActionScript 3</a></li>
<li><a href="http://www.marplo.net/jocuri/" title="Jocuri Flash">Jocuri
Flash</a></li>
</ul>
</nav>
<aside class="sidebar_baner">Banner in sidebar</aside>
</section>
<footer id="page_footer">
<p>De la: <a href="http://www.marplo.net/" title="Cursuri gratuite,
Jocuri, Anime">www.marplo.net</a></p>
</footer>
</body>
</html>
Cod CSS, in fisierul style.css

body {
width: 99%;
margin: 2px auto;
font-family: Arial, "MS Trebuchet", sans-serif;
text-align: center;
}
header, footer, section, aside, nav, article { display: block; }
header#page_header {
width: 100%;
margin: 4px auto;
border: 2px solid blue;
}
header#page_header nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#page_header nav ul li {
display:inline;
margin: 0 20px 0 0;
padding: 1px;
}
section#posts {
float: right;
width: 79%;
background-color: #f1f2fe;
border: 1px solid yellow;
}
section#posts header#posts_header {
background-color: #abcdef;
border: 1px solid green;
}
article.post {
margin:10px;
background-color: yellow;
text-align: left;
}
article.post aside {
float: right;
margin-top: -58px;
width: 250px;
height: 120px;
background-color: #fefefe;
}
article.post p { clear: right;}
section#sidebar {
float: left;
width: 18%;
background-color: #d7d8fe;
border: 1px solid green;
padding:5px;
}
section#sidebar nav ul {
margin: 3px auto;
text-align: left;
padding: 0 0 0 15;
}
section#sidebar aside {
width: 160px;
height: 250px;
margin: 10px auto;
background-color: #fefefe;
}
footer#page_footer {
clear: both;
width: 100%;
margin: 4px auto;
}
Aceste reguli CSS sunt salvate intr-un fisier extern, denumit "style.css", si este
inclus in pagina HTML cu urmatorul cod adaugat in sectiunea HEAD.
<link rel="stylesheet" type="text/css" href="style.css" />
Pentru a crea pagini web cu HTML5, ar trebui sa cunoasteti si CSS.
- Click pe Examplu structura HTML5, ca sa vedeti cum apare pagina web creata
cu exemplu prezentat mai sus.
HTML5 - Tag-uri Noi
HTML5 video tag
HTML5 embed tag
Tag-ul canvas
HTML5 figure tag
HTML5 hgroup tag
HTML5 mark tag
Tag-ul progress
Tag-ul ruby
Tag-ul WBR
Dupa mai multi ani de experienta cu HTML 4 si XHTML, HTML5 a venit cu tag-uri noi
pentru o mai buna structra a documentului si a formularelor, pentru desen si continut
multimedia.
Multe din noile elemente HTML5 nu sunt inca suportate de principalele navigatoare web, dar
treptat acestea implementeaza noile caracteristici din HTML5.
In acest tutorial sunt prezentate cateva din noile tag-uri HTML5 suportate in principalele
navigatoare web, cu o scurta descriere si exemple de cod.
HTML5 audio tag

Tag-ul <audio> se foloseste pt. a adauga sunet, muzica in pagina web.
Poate folosi aceste atribute:
autoplay (autoplay="autoplay") - Sunetul, muzica va incepe automat.
controls (controls="controls") - Controalele audio (play / pauza, etc.) vor fi afisate.
loop (loop="loop") - Muzica va incepe din nou dupa ce se termina.
preload (preload="auto|metadata|none") - Specifica daca si cum va fi incarcat fisierul

audio cand pagina se incarca. Atributul "preload" este ignorat daca se adauga
"autoplay".
("auto" - incarca tot fisierul audio cand pagina se incarca; "metadata" - incarca numai
metadata cand pagina se incarca; "none" - browser-ul nu ar trebui sa incarce fisierul
audio cand se incarca pagina).
src (src="url") - Adresa URL a fisierului audio.
Elementul <audio> foloseste tag-ul <source> ca sa specifice sursa fisierului audio si fisiere
alternative pentru diferentele dintre navigatoarele web, bazate pe tipul de codec recunoscut.
IE9 si Safari folosesc fisiere MP3; Firefox, Chrome si Opera folosesc tipul OGG (sau OGV).
- Exemplu:
<audio controls="controls">
<source src="audio_file.ogg" type="audio/ogg" />
<source src="audio_file.mp3" type="audio/mp3" />
Browser-ul dv. nu recunoste tag-ul audio, dar puteti <a
href="audio_file.mp3">Descarca fisierul</a>.
</audio>
- Textul dintre <audio> si </audio> va fi afisat in navigatoarele web care nu recunosc tag-ul
audio. In exemplu de mai sus, daca browser-ul nu recunoste tag-ul <audio>, va fi afisat in
acel loc un link de download.
Rezultat:
Browser-ul dv. nu recunoste tag-ul audio, dar puteti .
HTML5 video tag

Tag-ul <video> este un element multimedia folosit pt. a adauga in pagina web video clipuri si
alt continut video.
Tag-ul HTML5 <video> poate folosi aceste atribute:
autoplay (autoplay="autoplay") - Filmul /videoclip-ul va incepe automat.
controls (controls="controls") - Butoanele de control (play / pauza, etc.) vor fi afisate.
height (height="pixeli") - Inaltimea player-ului, in pixeli.
width (width="pixeli") - Lungimea player-ului, in pixeli.
muted (muted="muted") - Sunetul din film va fi pe mut, nu e redat.
poster (poster="URL") - Specifica o imagine care sa fie afisata in timp ce filmul se

incarca, sau pana cand e apasat butonul play. Daca acest atribut nu e adaugat, va fi
afisat primul cadru din film.
loop (loop="loop") - Filmul va porni de la inceput dupa ce se termina.
preload (preload="auto|metadata|none") - Specifica daca si cum va fi incarcat filmul

cand pagina se incarca. Atributul "preload" este ignorat daca se adauga "autoplay".
("auto" - incarca tot fisierul video cand pagina se incarca; "metadata" - incarca numai
metadata cand pagina se incarca; "none" - browser-ul nu ar trebui sa incarce filmul
cand se incarca pagina).
src (src="url") - Adresa URL a fisierului video.
Elementul <video> foloseste tag-ul <source> ca sa specifice sursa fisierului video si fisiere
alternative pentru diferentele dintre navigatoarele web, bazate pe tipul de codec recunoscut.
IE9 si Safari folosesc fisiere MP4; Firefox, Chrome si Opera folosesc tipul OGG (sau OGV)
- Exemplu:
<video controls="controls"width="200" height="150">
<source src="video/video_file.mp4" type="video/mp4" />
<source src="video/video_file.ogg" type="video/ogg" />
Browser-ul dv. nu recunoste tag-ul video, dar puteti <a
href="video/video_file.mp4">Descarca filmul</a>.
</video>
- Textul dintre <video> si </video> va fi afisat in navigatoarele web care nu recunosc tag-ul
video. In exemplu de mai sus, daca browser-ul nu recunoste tag-ul <video>, va fi afisat in
acel loc un link de download.
Rezultat:
HTML5 embed tag

Tag-ul <embed> se foloseste pentru a adauga in pagina aplicatii cu continut interactiv, cum
sunt prezentarile flash SWF, plug-inuri, sau fisiere cu imagini.
Poate sa foloseasca aceste atribute:
height (height="pixeli") - Inaltimea cadrului in care e afisat continutul, in pixeli.
width (width="pixeli") - Lungimea cadrului in care e afisat continutul, in pixeli.
type (type="MIME_type") - Tipul MIME al continutului.
src (src="url") - Adresa URL a fisierului.
Exemplu:
<embed src="flash_game.swf" width="150" height="150" />
Tag-ul canvas
Elementul <canvas> poate fi utilizat ca sa adauge in pagina desene grafice folosind script-uri
(de obicei JavaScript), sau compozitii foto si animatii simple.
Atribute:
height (height="pixeli") - Lungimea cadrului canvas, in pixeli.
width (width="pixeli") - Inaltimea cadrului canvas, in pixeli.
- Exemplu (creaza un patrat albastru):

<canvas id="cvs1" width="88" height="88">
Acest text e afisat daca browser-ul nu recunoste elementul HTML5 Canvas.
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('cvs1');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#0102fe';
ctx.fillRect(0,0,80,80);
</script>
- Textul dintre <canvas> si </canvas> va fi afisat daca navigatorul web nu recunoaste canvas.
Rezultat:
HTML5 figure tag

Tag-ul <figure> se foloseste pentru a adauga in pagina un grup de elemente care au un
contint de sine statator, cum ar fi diagrame, poze, cod, etc. Continutul din elementul <figure>
e atasat la derularea paginii, dar pozitia lui este independenta. Dace e sters nu ar trebui sa
afecteze cursul paginii.
Tag-ul <figure> poate sa contina elementul <figcaption> ca sa adauge o scurta descriere la
ceea ce e adaugat in <figure> .
- Exemplu:
<figure>
<img src="html_course.jpg" alt="Curs HTML" width="200" height="100" />
<figcaption>Curs HTML: www.marplo.net/html/</figcaption>
</figure>
Rezultat:
Curs HTML: www.marplo.net/html/
HTML5 hgroup tag

Tag-ul <hgroup> se foloseste pentru a grupa mai multe tag-uri H1 - H6.
- Exemplu:
<hgroup>
<h2>Bine ai venit pe www,narplo.net</h2>
<h3>Cursuri gratuite, Jocuri, Anime</h3>
</hgroup>
<p>Restul continutului...</p>
HTML5 mark tag

Tag-ul <mark> defineste un text marcat, se foloseste cand doriti sa scoateti in evidenta parti
din text,
- Exemplu:
<p>Cursuri gratuite si tutoriale: <mark>www.marplo.net</mark> pt. Web
Development.</p>
Rezultat:
Cursuri gratuite si tutoriale: www.marplo.net pt. Web Development.
Tag-ul progress
Elementul <progress> adauga in pagina o bara de progres. De obicei e folosit impreuna cu

script-uri JavaScript.
Poate folosi aceste atribute:
max (max="nr") - Specifica totalul de unitati din bara de progres.
value (value="nr") - Specifica numarul de unitati completate din bara de progres.
- Exemplu:
<progress value="33" max="100"></progress>
Rezultat:
Tag-ul ruby
Elementul <ruby> specifica o adnotare rubin. Adnotarile Ruby sunt folosite in scrierile din
Asia de Est, pentru a arata pronuntia caracterelor est-asiatice.
Acest tag se foloseste impreuna cu tag-urile <rt> si <rp>.
- <rt> - defineste o explicatie sau pronuntia caracterelor dintr-o adnotare rubin.
- <rp> - defineste ce sa afiseze daca navigatorul web nu recunoaste elementul <ruby>.
Exemplu:
<ruby>
<rt><rp>(</rp> <rp>)</rp></rt>
</ruby>
Tag-ul WBR
Elementul <wbr> (Word Break Opportunity) specifica unde in text ar putea fi adaugat rand
nou, indica: "Browser-ul poate adauga aici un rand nou daca e necesar". Daca browser-ul nu
considera ca trebuie adaugat un nou rand, nu afecteaza cu nimic.
De exemplu, se poate folosi <wbr> ca sa adauge oportunitatea de rand nou la un cuvant prea
lung, sau ca sa evitati adaugarea de catre browser a unui rand nou intr-un loc nepotrivit.
Exemplu:
<p>Pentru a crea Pagini<wbr>Web profesionale, un Web<wbr>Master ar trebui
sa stie HTML si CSS.</p>
HTML5 - Elemente si atribute noi in formular
Noile caracteristici adaugate in HTML5 nu sunt complet recunoscute de principalele

browsere. Navigatoarele web cu cel mai bun suport pentru noile elemente din HTML5 sunt:
Opera, Chrome si Mozill Firefox.
Noile tipuri de casete input in HTML5
HTML5 adauga mai multe tipuri de casute input pentru formular (datetime,
datetime-local, date, month, week, time, number, range, email, url, search, si
color), care sunt prezentate mai jos:
type="date" - Creaza o caseta de control pentru specificarea datei (an, luna,
zi), precum un calendar. Valoarea initiala (adaugata in atributul "value") trebuie

sa fie furnizata in format data ISO.
<input type="date" name="set_date" value="2011-10-15" />
type="datetime" - Creaza o caseta input pentru data si ora, care poate fi

adaugat in format ISO date/time, si e trimisa ca fiind in fusul orar UTC.
<input type="datetime" name="dt" value="2011-06-14T01:26:32:00Z" />
type="datetime-local" - Creaza o caseta input pentru data si ora, care poate

fi adaugat in format ISO date/time, la fel ca "datetime", dar presupunand ca
timpul este cel din fusul orar local.
<input type="datetime-local" name="dtl" value="2011-06-14T01:26:32:00">
type="month" - Creaza o caseta input in care se poate specifica anul si luna.

<input type="month" value="2012-09" name="mnt" />
type="week" - o caseta input pentru anul si numarul unei anumite saptamani

din an (AN-Wnr , nr e numarul saptamanii).
<input type="week" name="weeks" value="2011-W34" />
type="time" - creaza o casuta de formular pentru ora (ora, minute, secunde).

<input type="time" name="currenttime" value="18:12:00" />
type="tel" - o caseta input pentru numar de telefon.

<input type="tel" name="hometel" value="123-888-2012" />
123-888-20
type="url" - e folosit pentru campuri de formular care trebuie sa contina doar

adresa URL. Valoarea din acest input e automat validata cand datele din formular
sunt trimise (daca nu are un format URL valid, returneaza un mesaj de eroare).
<input type="url" name="site" size="25" value="http://www.marplo.net" />
http://w w w .marplo.net
type="number" - creaza casete de formular care sa contina doar numere. Se

poate restrictiona numerele acceptate, cu atributele "min", "max" si "step".
<input type="number" name="points" min="5" max="80" />
type="range" - Creeaza o zona cu un cursor de control care indica o valoare

dintr-o serie de numere. Numerele acceptate incep de la valoarea specificata in
atributul "min" (0 default), pana la numarul specificat in atributul "max" (100
default).
<input type="range" name="val" min="1" max="10" />
type="email" - e folosit pentru campuri de formular care trebuie sa contina

doar adresa de e-mail. Valoarea din acest input e automat validata cand datele
din formular sunt trimise.
<input type="email" name="email" />
type="search" - Creaza un camp de text special folosit pentru cautare (de

ex. cautare in site, cu un script).
<input type="search" name="srch" size="25" value="Cautare" />
Cautare
type="color" - Creaza un camp de formular special pentru selectarea unei

culori.
<input type="color" name="get_color" />
Atribute noi pentru <form> adaugate in HTML5
autocomplete="on | of" - Permite browser-ului sa completeze automat

datele in formular (on), sau de fiecare data utilizatorul trebuie sa introduca
el insusi datele (off).
- Functioneaza cu <form>, si urmatoarele tipuri <input>: text, search, url,
tel, email, password, date-pickers, range, color.
<form action="script.php" method="post" autocomplete="on" id="idf">

Name:<input type="text" name="fname" />
<input type="submit" value="Send" />
</form>
novalidate - (novalidate="novalidate" in XHTML) - Seteaza ca formularul,

sau campul input unde e adaugat, sa nu valideze automat datele cand
sunt trimise.
- Se poate adauga in <form> si in urmatoarele casete <input>: text,
search, url, tel, email, password, date-pickers, range, color.
<form action="script.php" id="idf" novalidate="novalidate">

E-mail: <input type="email" name="email" />
<input type="submit" value="Send"/>
</form>
Atribute noi pentru input

autofocus - (autofocus="autofocus" in XHTML) - specifica faptul ca un camp
de formular sa primeasca automat focus cand pagina e afisata. Functioneaza in
toate casetele <input>.
Name: <input type="text" name="name1"
autofocus="autofocus" />
form="form_id" - Asociaza campul input cu formularul care are id="form_id".

Cu aceasta metoda, caseta de text nu trebuie adaugata special intr-un element
form. Functioneaza in toate tipurile <input>.
<form action="script.php" method="post" id="idf">
Name:<input type="text" name="fname" />
<input type="submit" value="Send" />
</form>
E-mail: <input type="email" name="email" form="idf" />
formaction="url" - Rescrie valoarea atributului "action" din <form>,

trimitand datele la adresa specificata la "url".
formenctype="content_type" - Rescrie valoarea atributului "enctype" din
<form>.
formmethod="get | post | put | delete" - Rescrie valoarea atributului
"method" din <form>. Valorile "put" si "delete" sunt noi in HTML5.
formnovalidate - (formnovalidate="formnovalidate" in XHTML) - Rescrie
valoarea atributului "novalidate" din <form>.
formtarget="target" - Rescrie valoarea atributului "target" din formular.
- Aceste atribute de recriere sunt folosite doar in buton submit (type "submit"
sau "image").
<form action="script.php" method="post" id="idf">
E-mail: <input type="email" name="email" /><br />
<input type="submit" value="Trimite" /><br />
<input type="submit" formaction="script_2.php" value="Trimite la script_2"
/><br />
<input type="submit" formnovalidate="formnovalidate" value="Trimite fara
validare" />
</form>
height="pixels" - Specifica inaltimea butonului imagine, cand type="image".

width="pixels" - Specifica lungimea butonului imagine, cand type="image".
- Aceste atribute sunt folosite doar in butoane cu type="image":
<input type="image" src="img_submit.gif" width="80" height="23" />
list="id_datalist" - Indica faptul ca exista o list predefinita de optiuni pentru

utilizator, care sunt furnizate de un element datalist. Valoarea atributului list
("id_datalist") este ID-ul adaugat in <datalist>.

- Poate fi utilizat cu urmatoarele tipuri de <input>: text, search, url, tel, email,
datepickers, number, range, color.
Website: <input type="url" list="sites" name="link" />
<datalist id="sites">
<option label="CoursesWeb" value="http://www.coursesweb.net" />
<option label="MarPlo" value="http://www.marplo.net" />
<option label="W3Schools" value="http://www.w3schools.com" />
</datalist>
max="number" - specifica valoarea maxima pentru numere, aceasta trebuie

sa fie mai mare (sau egala) decat valoarea adaugata in atributul "min".
min="number" - specifica o valoarea minima pentru numere.
step="any/number" - specifica intervalul de numere care poate fi folosit
(daca step="3", numerele acceptate sunt: -3,0,3,6, etc).
- Atributele "min", "max", si "step" pot fi utilizate in urmatoarele casete
<input> types: date-pickers, number, range.
Urmatorul cod defineste o caseta care accepta numere de la 1 la 10, cu step 3
(numere ce pot fi adaugate: 3, 6 sau 9):
<input type="number" name="num" min="1" max="10" step="3" />
multiple - (multiple="multiple" in XHTML) - Indica faptul ca utilizatorul poate

specifica mai mult de o valoare.
- Poate fi utilizat in urmatoarele casete <input>: email, file.
<input type="file" name="img" multiple="multiple" />
pattern="regexp" - specifica o expresie regulata folosita la validarea datelor

din caseta input. Puteti adauga un atribut "title" care sa indice pe scurt formatul
datelor ce trebuie adaugate.
- Poate fi utilizat in urmatoarele casete <input>: text, search, url, tel, email,
password.
Codul urmator defineste un camp text in care pot fi adaugate maxim 5 caractere
(doar litere si numere):
<input type="text" name="pass" pattern="[A-z0-9]{5}" title="Cinci
caractere, litere si numere" />
placeholder="text" - Furnizeaza un mic indiciu, sau exemplu care sa ajute

utilizatorul sa adauge datele corecte (pentru o descriere mai lunga, se foloseste
atributul "title").
Indiciul e afisat in caseta input cand e goala, si dispare cand cursorul e in acel
camp.
- Poate fi utilizat in urmatoarele casete <input>: text, search, url, tel, email,
password.
<input type="search" name="src"
placeholder="Search MarPlo" />
required - (required="required" in XHTML) - indica faptul ca respectivul camp
input trebuie sa fie completat inainte de a trimite datele.

- Poate fi adaugat in urmatoarele casete <input>: text, search, url, tel, email,
password, date-pickers, number, checkbox, radio, file.
<input type="text" name="name1" required="required" />
Alte elemente de formular adaugate in HTML5

<datalist> ... </datalist> tag
Elementul datalist trebuie sa contina un "id" si tag-uri <option> ... </option>.
Creaza un meniu cu optiuni (adaugate in elementul "option"), oferind o functie
de "auto-completare" in timp ce utilizatorul tasteaza in caseta input care are un
atribut "list" ce face referire la "id-ul" din datalist.
Tag-ul <option> trebuie sa contina atributul "value".
Exemplu:
Website: <input type="url" list="sites" name="link" />
<datalist id="sites">
<option label="CoursesWeb" value="http://www.coursesweb.net" />
<option label="MarPlo" value="http://www.marplo.net" />
<option label="W3Schools" value="http://www.w3schools.com" />
</datalist>
<keygen /> tag

Elementul keygen e folosit pentru a genera doua chei (una privata, si cealalta
publica) care ofera un mod mai sigur de autentificare a utilizatorului.
Cheia privata este salvata pe calculatorul client, iar cheia publica e trimisa la
server.
Suportul navigatoarelor web pentru acest element nu e inca destul de bun
pentru a fi utilizat ca un standard de securitate.
Exemplu:
<form action="script.php" id="idf" method="post">
Utilizator: <input type="text" name="user" />
Encriptare: <keygen name="security" />
<input type="submit" value="Submit" />
</form>
<output> </output> tag

E folosit pentru a afisa rezultatul unei operatiuni de calcul, cel mai probabil
rezultatul returnat de un script.
Total: <output name="total" onformchange="calc()">0</output>
- Aici, "calc()" poate fi o functie dintr-un script JavaScript.

Tutorial HTM5 canvas
Desenare cu HTML5
Adaugare transparenta
Desenare linii
Desenare arce si cercuri
Canvas - Text
Canvas - Umbre
Canvas - Gradient
Adaugare imagini
<canvas> este unul din cele mai interesante elemente introduse in HTML5.
Tag-ul <canvas> este destul de simplu, defineste lungimea, inaltimea si un ID unic. Dar se
folosesc o serie de instructiuni JavaScript (denumite generic APIs) pentru a desena obiecte in
canvas.
Exemplu de mai jos arata structura de baza pentru implementare canvas intr-o pagina web:
<!doctype html>
<html>
<head>
<title>Titlu paginii</title>
<script type="text/javascript">
function draw() {
// preia intr-un obiect tag-ul <canvas>
var canvas = document.getElementById("id_canvas");
// daca browser-ul recunoaste canvas
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// Aplica instructiuni JavaScript (API canvas) pt. desenare
}
}
// apeleaza functia draw() imediat ce pagina s-a incarcat
window.onload = draw;
</script>
</head>
<body>
<canvas id="id_canvas" width="200" height="200"></canvas>
</body>
</html>
- Atributele width si height specifica dimensiunile zonei CANVAS in pagina web.

- Important este ID-ul (aici "id_canvas"), acesta se foloseste in JavaScript ca sa
fie preluat tag-ul <canvas> intr-un obiect (cu document.getElementById('ID')),
apoi se aplica functii si proprietati specifice pentru a crea desene care sunt
afisate in tag-ul CANVAS.
- Metoda getContext('2d') trebuie aplicata la elementul Canvas ca sa se obtina
un obiect la care se aplica instructiuni API pentru crearea continutului din
<canvas>.
<canvas> este un element de tip bloc, poate fi adaugat in oricare alt tag de tip bloc, precum
<p>, <div>, sau in elementele noi de structura introduse in HTML5: <section>, <article>.
Desenare cu HTML5, canvas si JavaScript
Instructiunile JavaScript permit dezvoltatorilor de pagini web sa deseneze diferite
forme, linii, sa aplice culori, transparenta si gradient, sa adauge text si imagini in
Canvas; chiar sa creeze animatie.
- Exemplu urmator deseneaza un patrat albastru.
<!doctype html>
<html>
<head>
<title>Canvas patrat albastru</title>
<script type="text/javascript"><!-function draw() {
var canvas = document.getElementById('cav1');
ctx.fillStyle = '#0101fe';
ctx.fillRect (50, 60, 100, 100);
}
}
window.onload = draw;
// acceseaza functia draw() cand pagina s-a
incarcat
--></script>
</head>
<body>
<canvas width="200" height="200" id="cav1"></canvas>
</body>
</html>
Rezultat:
- Sintaxa:
ctx.fillStyle = "Culoare" - reprezinta culoarea din interiorul formei. Se

poate folosi orice metoda de definire a culorii utilizata in CSS (blue,
#0000ff, #00f, sau rgb(0,0,255) ).
- Daca nu se specifica o culoare, va fi aplicat negru.
ctx.fillRect(X-stanga, Y-sus, lungime, inaltime) - Deseneaza

patrulaterul in canvas, folosind cloarea din "fillStyle".
Puteti crea desene mult mai complexe, combinand cercuri, linii, patrulatere,
gradient, transparenta.
- Deoarece multi utilizatori inca folosesc browser care nu recunoaste elementul
CANVAS, puteti adauga un text cu un mesaj de eroare pt. no-canvas, intr-un tag
ascuns (cu style="display:none;"), iar cu JavaScript faceti acest tag vizibil in
cazul cand browser-ul nu recunoaste elementul canvas.
- Daca adaugati codul JavaScript dupa tag-ul <canvas>, nu mai e necesar
window.onload, doar apelati simplu functia cu API-uri pt. canvas. Veti vedea in
exemplele urmatoare.
Adaugare transparenta
Ca sa adaugati transparenta, definiti culoarea folosind formula: rgba(Red,
Green, Blue, Alpha). "Alpha" e o valoare intre 0 si 1 care reprezinta
transparenta.
In urmatorul exemplu adaugam un dreptunghi cu Alpha 0.5. In acest caz definim
culoarea din "fillStyle" pentru dreptunghi folosind rgba() pentru a specifica
valoarea de transparenta ( rgba(220, 223, 0, 0.5) ).
De aseemenea, va fi adaugat un mesaj pt. no-canvas, iar codul JavaScript e scris
sub tag-ul <canvas> (pt. a nu mai folosi window.onload).
<!doctype html>
<html>
<head>
<title>Canvas transparenta</title>
</head>
<body>
<p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas
ca sa vedeti aceasta zona.</p>
ctx.fillRect (50, 60, 100, 100);
ctx.fillStyle = "rgba(220,223,0, 0.5);";
ctx.fillRect (90, 105, 100, 80);
}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
draw();
// apeleaza functia draw()
--></script>
</body>
</html>
Rezultat:
Desenare linii
Ca sa desenati linii se foloseste functia lineTo().
lineTo(x, y)
Aceasta metoda traseaza o linie de la punctul curent pana la coordonatele (x, y).
Pentru a seta sau muta punctul curent de inceput, se foloseste metoda moveTo().
moveTo(x, y)
- Aceasta metoda creaza, sau muta, punctul de inceput al desenarii, la

coordonatele specificate.
Ca sa definiti culoarea liniei, se foloseste:
ctx.strokeStyle = "culoare";
Pentru grosimea liniei (in pixeli), se foloseste:
ctx.lineWidth = valoare;
Urmatorul exemplu creaza trei linii.
// definesste culoarea si grosimea liniei
ctx.strokeStyle = '#01da01';
ctx.lineWidth = 3;
// creaza prima linie
ctx.moveTo(10, 10);
ctx.lineTo(100, 80);
// seteaza punctul de inceput

// defineste linia
// creaza a doua linie

ctx.moveTo(10, 10);
// seteaza punctul de inceput

// defineste linia
// the third line

ctx.moveTo(10, 150);
ctx.stroke();
}
else {
// muta punctul de inceput
// adauga liniile

}
draw();
// apeleaza functia
--></script>
Dupa ce a fost definita culoarea liniei (cu strokeStyle), si grosimea (cu lineWidth),
am folosit metoda moveTo() pentru a seta punctul de inceput, apoi cu
lineTo(100, 80) se creaza o linie de la acel punct curent pana la punctul dat de
coordonatele (100, 80).
Acum, ultimul punct devine punctul curent de inceput, pentru a-l muta, se
foloseste iar meoda moveTo().
Codul de mai sus va afisa aceste trei linii (intr-un browser Canvas-compatibil):
Desenare arce si cercuri

Pentru a desena arce de cerc si cercuri, se foloseste functia arc().
arc(x, y, raza, startUnghi, endUnghi, anticlockwise)
- Aceasta metoda deseneaza un arc de cerc intre startUnghi si endUnghi, in sens

invers orelor de ceas daca argumentul anticlockwise e setat true, daca e false
deseneaza in sensul orelor de ceas.
Ca sa desenati un crc, setati: startUnghi=0, endUnghi=Math.pi*2
Dupa ce ati definit arc-ul de cerc (sau cercul) cu metoda arc(), aplicati:
ctx.stroke(); - ca sa desenati linia de margine.
ctx.fill(); - ca sa adaugati culoarea de umplere.
Urmatorul cod deseneaza o fata zambitoare.
ctx.arc(75,75,50,0,Math.PI*2,true);
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false);
ctx.moveTo(65,65);
// Fata
// Gura
// Ochiul stang
ctx.moveTo(95,65);
ctx.stroke();
// Ochiul drept
}
else {
}
}
draw();
// apeleaza functia
--></script>
Desenul incepe cu desenarea fetei, apoi se muta punctul de inceput pentru

desenare gura, si traseaza alt arc de cerc, si tot asa pentru fiecare ochi. Functia
moveTo() se ocupa de mutarea coordonatelor.
Rezultat:
Canvas - Text
Sunt doua metode pentru adaugare text in canvas:
fillText(text, x, y) - adauga textul la pozitia specificata, avand culoarea

din fillStyle.
strokeText(text, x, y) - adauga textul la pozitia specificata, dar fara

culoare de umplere, doar cu linia de margine a literelor, avand culoarea
din strokeStyle.
Pentru text se pot folosi urmatoarele proprietati la obiectul context:
ctx.font = valoare - Specifica fontul textului, la fel ca proprietatea fontfamily din CSS.
ctx.textAlign = valoare - Specifica alinierea pe orizontala a textului,

valori: "start", "end", "left", "right", "center" (default e "start").
ctx.textBaseline = valoare - Specifica alinierea pe verticala a textului,

valori: "top", "hanging", "middle", "alphabetic", "ideographic", "bottom"
(default e "alphabetic").
Exemplu:
// creaza text cu o culoare de umplere
ctx.fillStyle = '#00f';
ctx.font = 'italic 30px sans-serif';
ctx.textBaseline = 'top';
ctx.fillText('Hy everyone', 2, 5);
// creaza text afisat doar cu linia de margine a literelor
ctx.font = 'bold 30px sans-serif';
ctx.strokeText('Hy everyone', 2, 50);
}
else {
}
}
draw();
// apeleaza functia
--></script>
Rezultat:
Canvas - Umbre
Instrctiunile JavaScript pentru umbre contin proprietati care se aplica la obiectul
context:
ctx.shadowColor = valoare - Seteaza culoarea umbrei.
ctx.shadowBlur = valoare - Seteaza "blur" la umbra, in pixels. Cu cat

valoarea e mai mica, umbra e mai ascutita.
ctx.shadowOffsetX = valoare - Specifica distanta X, in pixeli.
ctx.shadowOffsetY = valoare - Specifica distanta Y, in pixeli.
Urmatorul cod deseneaza o sfera albastra, cu o umbra verde avand transparenta

0.5:

// seteaza proprietatile umbrei
ctx.shadowOffsetX = 8;
ctx.shadowOffsetY = 8;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(0, 200, 1, 0.5)';
// defineste si adauga un cerc
ctx.fill();
}
else {
}
}
draw();
// apeleaza functia
--></script>
Rezultat:
Canvas - Gradient
Pentru a crea culoare gradient in Canvas, se aplica un obiect CanvasGradient la
proprietatile fillStyle sau /si strokeStyle.
Se pot crea doua tipuri de obiect CanvasGradient, utilizand una din urmatoarele
metode:
gradient = context.createLinearGradient(x0, y0, x1, y1) Returneaza un obiect CanvasGradient ce reprezinta un gradient liniar, care
incepe de la punctul (x0, y0) si se termina la punctul (x1, y1).
gradient = context.createRadialGradient(x0, y0, r0, x1, y1, r1) Returneaza un obiect CanvasGradient ce reprezinta un gradient radial, ca
un con cu cercul mic dat de (x0, y0, re), iar cercul mare definit de (x1, y1,
r1).
Dupa ce ati creat obiectul pentru gradient, puteti adauga culori in gradient, cu
metoda addColorStop() aplicata acestui obiect. Urmatoarele doua coduri arata

cum puteti crea si folosi gradient.
1) Exempu cu createLinearGradient():
// creaza un obbiect CanvasGradient liniar
// furnizand sursa si coordonatele de inceput si sfarsit (x0, y0, x1,
y1)
var gradient = ctx.createLinearGradient(0, 0, 150, 0);
// Se adauga culori in gradient, primul argument specifica pozitia

culorii
// - se folosesc valori cuprinse intre 0 (gradient start) si 1
(gradient end)
// Al doilea argument specifica culoarea, in orice format folosit si in
CSS
gradient.addColorStop(0,
'#f00');
// rosu
gradient.addColorStop(0.4, '#ff0');
// galben
gradient.addColorStop(0.8, '#0f0');
// verde
'#00f');
// albastru
// Aplica gradientul la proprietatea fillStyle, si deseneaza un
dreptunghi
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 200, 125);
}
else {
}
}
draw();
--></script>
Rezultat:
2) Exemplu cu createRadialGradient():
<script type="text/javascript"></script>
Rezultat:
Adaugare imagini
Pentru a adauga o imagine in <canvas>, se foloseste metoda drawImage(). E o
functie complexa, care foloseste trei, cinci, sau noua argumente.
Iata sintaxa cu cinci argumente:
drawImage(img_element, dx, dy, dw, dh)
- Primul argument, img_element reprezinta o referinta la imagine (obiectul

JavaScript cu ea), "dx" si "dy" specifica coordonatele de destinatie in contextul
canvas, "dw" si "dh" specifca lungimea si inaltimea imaginii afisate in Canvas (in
caz ca doriti sa o redimensionati).
- Varianta cu noua argumente se foloseste cand doriti sa adaugati o portiune
decupata din imagine. Contine inca patru argumente care definesc suprafata
decupata (x0, y0, x1, y1).
In urmatorul exemplu adaugam aceasta imagine:

<canvas> (redimensionand-o), si un text langa ea.
intr-un
<canvas width="260" height="200" id="cav1"></canvas><br />

<img src="html_course.jpg" alt="HTML course" width="152" height="160"
id="img1" />
// obtine un obiect cu imaginea, o adauga in context canvas (cu
dimensiuni specificate)
var img_elm = document.getElementById('img1');
ctx.drawImage(img_elm, 0, 0, 95, 100);
// adauga un text fara culoare de umplere
ctx.font = 'bold 25px sans-serif';
ctx.textBaseline = 'top';
ctx.strokeText('HTML Course', 98, 38);
}
else {
}
}
draw();
--></script>
Rezultat:
Elementul <canvas> poate fi si interactiv, sa raspunda la actiunile

utilizatorului, efectuate cu mouse-ul sau tastatura.
- In urmatorul exemplu se folosesc evenimentele: "onmouseover", "onmouseout",
si "onclick" pentru a schimba culoarea unui dreptunghi in <canvas>.
<canvas width="121" height="81" id="cav1" onmouseover="draw('#fefe01');"

onmouseout="draw('#01de02');"
onclick="draw('#fe0708');" style="cursor:pointer;"></canvas>
<script type="text/javascript"><!-function draw(clr) {
// deseneaza un dreptunghi, cu o culoare preluata din parametru "clr"
ctx.fillStyle = clr;
ctx.fillRect (0, 0, 120, 80);
}
else {
}
}
draw('#0102fe');
--></script>
// apeleaza functia
Proprietatea "fillStyle" foloseste o culoare preluata din parametru "clr", astfel,

cand functia e apelata cu o culoare diferita la argument, afiseaza un dreptunghi
cu alta culoare.
Ca sa vedeti efectul, pozitionati mouse-ul deasupra dreptunghiului si apasati
click pe el.
Caractere speciale - Entitati HTML

In tabelul din aceasta pagina este o lista cu mai multe caractere speciale (simboluri,
diacritice si caractere specifice altor limbi straine) si codurile lor specifice HTML si ISO.
Aceste caractere pot fi adaugate si afisate corespunzator in orice pagina web, putand fi
introduse cu aceste coduri cunosute si cu denumirea de Entitati HTML.
De exemplu:
- ca sa afisati in pagina simbolul (copyright) se adauga codul © (sau codul ISO
©)
- ca sa afisati in pagina simbolul (jumatate) se adauga codul ½ (sau codul ISO
½)
- pentru caracterul < (mai mic), ca browser-ul sa nu-l confunde cu inceputul de tag, se
poate folosi codul <
Nume
Sintaxa
Nume ISO Latin1
Descriere
Aacute
&Aacute
&#193
A ascutit ()
aacute
á
á
a ascutit ()
Acirc
Â
Â
A circumflex ()
acirc
â
â
a circumflex ()
acute
´
´
accent grav ()
AElig
Æ
Æ
ligatura AE ()
aelig
æ
æ
ligatura ae ()
Agrave
À
À
A grav ()
agrave
à
à
a grav ()
amp
&
&
ampersand (&)
Aring
Å
Å
A cu inel ()
aring
å
å
a cu inel ()
Atilde
Ã
Ã
A tilda ()
atilde
ã
ã
a tilda ()
Auml
Ä
Ä
A umlaut ()
auml
ä
ä
a umlaut ()
brvbar
¦
¦
bara intrerupta ()
Ccedil
Ç
Ç
C sedila ()
ccedil
ç
ç
c sedila ()
cent
¢
¢
cent ()
copy
©
©
copyright ()
curren
¤
¤
valuta generala ()
deg
°
°
grad ()
div
&div;
÷
÷
impartire ()
Eacute
É
É
E ascutit ()
eacute
é
é
e ascutit ()
Ecirc
Ê
Ê
E circumflex ()
ecirc
ê
ê
e circumflex ()
Egrave
È
È
E grav ()
egrave
è
è
e grav ()
emdash
&emdash;
nedefinit
em dash (&emdash)
emsp
&emsp;
nedefinit
em spatiu ()
endash
&endash;
nedefinit
en dash (&endash;)
ensp
&ensp;
nedefinit
en spatiu ()
ETH
Ð
Ð
Eth nordic ()
eth
ð
ð
eth nordic ()
Euml
Ë
Ë
E umlaut ()
euml
ë
ë
e umlaut ()
frac12
½
½
jumatate ()
frac14
¼
¼
sfert ()
frac34
¾
¾
trei sferturi ()
gt
>
nedefinit
mai mare dect (>)
Iacute
Í
Í
I ascutit ()
iacute
í
í
i ascutit ()
Icirc
Î
Î
I circumflex ()
icirc
î
î
i circumflex ()
iexcl
¡
¡
exclamatie inversata ()
Igrave
Ì
Ì
I grav ()
igrave
ì
ì
i grav ()
iquest
¿
¿
intrebare inversata ()
Iuml
Ï
Ï
I umlaut ()
iuml
ï
ï
i umlaut ()
laquo
«
«
paranteza unghiular dubl stng

()
lt
<
<
mai mic dect (<)
macr
¯
¯
macron ( )
micro
µ
µ
micro ()
middot
·
·
punct la mijloc ()
nbsp

spatiu nonbreaking
not
¬
¬
negatie ()
Ntilde
Ñ
Ñ
N tilda ()
ntilde
ñ
ñ
n tilda ()
Oacute
Ó
Ó
O ascutit ()
oacute
ó
ó
o ascutit ()
Ocirc
Ô
Ô
O circumflex ()
ocirc
ô
ô
o circumflex ()
Ograve
Ò
Ò
O grav ()
ograve
ò
ò
o grav ()
ordf
ª
ª
ordinal feminin ()
ordm
º
º
ordinal masculin ()
Oslash
Ø
Ø
O tiat ()
oslash
ø
ø
o tiat ()
Otilde
Õ
Õ
O tilda ()
otilde
õ
õ
o tilda ()
Ouml
Ö
Ö
O umlaut ()
ouml
ö
ö
o umlaut ()
para
¶
¶
paragraf ()
plusmn
±
±
plus minus ()
pound
£
£
lira sterlina ()
quot
"
"
ghilimele (")
raquo
»
»
paranteza unghiular dubl dreapta

()
reg
®
®
marca inregistrata ()
sect
§
§
semn sectiune ()
shy

soft hyphen ()
sup1
¹
¹
1 superior ()
sup2
²
²
2 superior ()
sup3
³
³
3 superior ()
szlig
ß
ß
sharp s ()
THORN
Þ
Þ
Thorn nordic ()
thorn
þ
þ
thorn nordic ()
times
×
×
inmultire ()
trade
™
nedefinit
trademark ()
Uacute
Ú
Ú
U ascutit ()
uacute
ú
ú
u ascutit ()
Ucirc
Û
Û
U circumflex ()
ucirc
û
û
u circumflex ()
Ugrave
Ù
Ù
U grav ()
ugrave
ù
ù
u grav ()
uml
¨
¨
umlaut ()
Uuml
Ü
Ü
U umlaut ()
uuml
¨
ü
u umlaut ()
Yacute
Ý
Ý
Y ascutit ()
yacute
ý
ý
y ascutit ()
yen
¥
¥
yen ()
yuml
ÿ
ÿ
y umlaut ()
Introducere
Crearea paginilor HTML este un lucru relativ simplu, invatarea etichetelor HTML si crearea
unor imagini ducand la realizarea de pagini web de o complexitate medie. Odata cu
dezvoltarea internetului, site-urile au devenit din ce in ce mai complexe, cu un numar mai
mare de pagini, cerintele privind grafica si elementele din pagina au devenit mai pretentioase
si astfel proiectarea paginilor web a devenit o sarcina ceva mai dificila.
O problema importanta cand avem un site cu multe pagini este atunci cand dorim sa facem
anumite schimbari in elementele pagini: fondul, grafica sau fontul textelor din pagini.
Prin utilizarea CSS (Cascading Style Sheets), in traducere "foi de stil in cascada", acest lucru
nu mai este o problema, realizandu-se relativ usor, prin schimbarea sau adaugarea unor
elemente in codul CSS, ne fiind nevoi sa lucram la fiecare pagina sau la fiecare element din
pagina.
CSS se ocupa in general cu aspectul si controlul grafic al elementelor din pagina, cum ar fi:
textul, imaginile, fondul, culorile si asezarea acestora in cadrul ferestrei paginii.
CSS foloseste stiluri, acestea inglobeaza, sub un anumit nume, atribute de formatare care se
aplica asupra unui element individual din pagina, asupra unui grup de elemente sau la nivelul
intregului document.
CSS functioneaza cu HTML, insa nu este HTML. El extinde functionalitatile HTML,
permitand redefinirea etichetelor HTML existente.
Prin utilizarea CSS aspectul documentului pe ansamblu, sau a unui element individual din
interiorul sau, poate fi controlat mult mai usor. Stilurile pot fi aplicate asupra unui element, a
unui document sau chiar asupra unui intreg site web.
Un dezavantaj ar fi ca unele navigatoare nu sunt compatibile CSS, astfel ca documentele
HTML sunt afisate ca si cum CSS n-ar exista, dar cele mai cunoscute si utilizate browsere,
cum ar fi: Mozilla Firefox, Internet Explorer, Opera, si altele, sunt compatibile CSS.
Acest curs prezinta elementele de baza CSS si modul de lucru cu "foile de stil", va invata
cum sa adaugati si sa folositi CSS in paginile dv. web.
Tot ce aveti nevoie este un editor de texte simplu, cum ar fi Notepad, si un navigator, de
exemplu Mozilla Firefox, care este gratuit
Pentru a invata cat mai bine elementele prezentate in aceste lectii, exersati personal fiecare
exemplu si proprietate explicata.
Retineti ca acest curs reprezinta un punct de plecare, ne fiind prezentate aici toate
proprietatile si elementele CSS. Pentru o cunoastere mai amanuntita a acestora, vizitati site-ul
www.w3.org, la sectiunile despre CSS.
Scrierea codului CSS

Codurile CSS pot fi scrise in interiorul paginii sau intr-un fisier extern cu extensia".css".
Codul CSS, ca forma generala, este alcatuit din: obiectul care va fi formatat. proprietatile
acestuia si valoarea (sau atributele) fiecarei proprietati.
Cand este adaugat in documentul HTML, trebuie scris in cadrul unui tag <style> in sectiunea
HEAD a documentului HTML, dupa cum se vede in formula generala de cmai jos;
<html>
<head>
obiect_css {
proprietate:valoare;
alta_proprietate:valoare;
}
</style>
</head>
<body>
... Continut ...
</body>
</html>
- Observati sintaxa codului CSS. Perechile proprietate:valoare se scriu intre acoladele
obiectului CSS pe care-l definesc, intre "proprietate" si "valoare" trebuie sa fie un caracter
doua-puncte (:) iar la sfarsitul perechii se adauga un caracter punct-si-virgula (;)
- Cand este adaugat intr-un fisier extern ".css", codul CSS se scrie la fel, dar nu se mai adauga
tag-ul <style>.
1. Obiectele (regulile) CSS

Exista trei tipuri principale de obiecte CSS: selector, clasa si identificator.
- Selectorul HTML
Selectorul HTML se foloseste pentru a redefini modul de afisare a continutului etichetei
HTML.
Un selector HTML reprezinta partea etichetei HTML care indica navigatorului tipul de
eticheta.
Iata un exemplu:
h1 { font-family:"Arial"; font-size:15px; }
- Aici selectorul este "h1".
Definirea unui selector HTML folosind CSS are ca rezultat redefinirea etichetei HTML.
Selectorul si eticheta desi par identice, totusi nu sunt.
- Clasa
Clasa este un obiect care poate fi aplicat oricarei etichete HTML.
O clasa trebuie creata in interiorul etichetei HTML inainte de a fi definita intr-un cod CSS.
Crearea clasei in interiorul etichetei se face simplu, prin specificarea cuvantului class si
numele clasei, ca in exemplu de mai jos:
<h1 class="nume_clasa"> Text </h1>
- "nume_clasa", poate fi orice nume dorim.

- Apoi in interiorul codului CSS, clasa trebuie definita prin adaugarea unui caracter punct (.)
inaintea numelui clasei, ca in exemplu urmator:
.nume_clasa { font-family:"Arial"; font-size:15px; }
Numele aceleasi clase poate fi atribuit mai multor etichete HTML din aceeasi pagina, si toate
vor prelua acelasi stil css.
- Identificator
Obiectele de tip identificator (ID) sunt asemanatoare cu clasele. Pot fi aplicate oricarei
etichete HTML, dar spre deosebire de clase, numele unui identificator trebuie atribuit numai
unei singure etichete HTML dintr-o pagina, pentru alta eticheta se adauga un ID cu nume
diferit.
Ca si clasa, identificatoru trebuie intai creat in interiorul etichetei HTML. Modul de creare
este simplu, prin specificarea cuvantului id si numele clasei, ca in exemplu de mai jos:
<h1 id="nume_id"> Text </h1>
- "nume_id", poate fi orice nume dorim.

In interiorul codului CSS, identificatorul este definit prin adaugarea unui caracter diez (#)
inaintea numelui, ca in exemplu urmator:
#nume_id { font-family:"Arial"; font-size:15px; }
In urmatoarea lectie va fi explicat mai amanuntit modul de definire si rolul acestor obiecte
CSS .
2. Componentele unui obiect CSS

Obiectele CSS, indiferent de tipul lor, au in componenta urmatoarele elemente:
Selectorii - identifica un obiect; pot fi selectori de etichete HTML, clase sau

identificatori.
Proprietatile - identifica o proprietate a obiectului; se refera in special la aspect.
Valorile - sunt atributele unei proprietati; pot fi cuvinte cheie, valori numerice sau
procentuale, tipul valorii depinzand de proprietate.
Sintaxa generala a unei reguli CSS este urmatoarea:
selector {proprietate: valoare; }
Proprietatile si valorile constituie definitia regulii (obiectului) CSS. Acestea se regasesc sub
forma de perechi,despartite de caracterul doua puncte :, fiecare pereche se termina cu un
caracter punct si virgula ";".
Etichetele HTML nu sunt sensibile la diferenta intre majuscule si litere mici. Dar odata cu
aparitia limbajului XHTML, acesta face distinctie intre majuscule si minuscule, astfel ca toate
etichetele si toti selectorii trebuie scrisi cu litere mici.
Crearea Foilor de Stil

1. Etichete HTML si stiluri CSS
CSS ofera posibilitatea de a schimba aspectul fiecarei etichete in parte, prin stabilirea unui
anume stil in interiorul ei, cu atributul "style". Acest lucru este util mai ales pentru a anula
alte stiluri ale elementului respectiv sau de a da elemente grafice de stil doar etichetei
respective.
Sintaxa pentru definirea stilurilor in interiorul unei etichete HTML este urmatoarea:
<eticheta style="proprietate:valoare;"> text ... </eticheta>
CSS permite si definirea unor reguli de stil generale intr-o pagina web. Acest set de reguli
trebuie scris in sectiunea de antet (head) a documentului, in cadrul tag-ului <style>.
Sintaxa pentru definirea CSS intr-un document HTML, in interiorul etichetei <head>
</head>, este urmatoarea:
selector_1 {proprietate1:valoare1; proprietate2:valoare2; ... }
...
selector_n {proprietate1:valoare1; proprietate2:valoare2; ... }
</style>
- Definirea tuturor stilurilor intr-o locatie comuna usureaza modificarea mai rapida a unei
pagini.
Iata un exemplu practic de cod css:
h1 { font-family:Arial; font-size:15px; font-weight:bold; color:#1111ff; }
p {font-family:Arial; font-size:12px; color:blue; }
</style>
Foile de stil pot fi utilizate nu doar la nivel de pagina web, ci si la nivel de intreg site. Astfel,
trebuie creata o foaie de stil externa intr-un fisier separat, de preferat cu extensia ".css", care
poate fi inclus in pagina HTML prin doua procedee: legatura sau import.
Crearea unei foaie de stil externe se face scriind codul CSS intr-un fisier text cu ajutorul unui
editor de texte simplu (de exemplu Notepad in Windows), sau specializat in acest sens
(precum Notepad++). In fisierul extern creat se adauga reguli CSS, fara insa ca aceste reguli
sa fie incadrate in etichete STYLE.
Dupa ce a fost creata foaia de stil externa, aceasta poate fi folosita de un document HTML
utilizand urmatoarea sintaxa, in interiorul tag-ului <head> </head>:
<link rel="stylesheet" href="nume_fisier.css" type="text/css">
- Eticheta LINK apare in antetul documentului (sectiunea head), iar atributele folosite
transmit navigatorului tipul de legatura ("rel" legatura cu o foaie de stil, "type" - tipul
codului din fisier) si locatia inspre fisierul ce contine codul CSS ("href" calea si numele
complet al fisierului, inclusiv extensia).
O alta modalitate de utilizare a foilor de stil externe intr-un document HTML o reprezinta
importul acestora folosind comanda @import.
Sintaxa pentru importul unei foi de stil externe este urmatoarea:
@import url(nume_fisier.css);
</style>
Pentru a importa un fisier CSS extern se foloseste in cadrul sectiunii HEAD a documentului
HTML eticheta STYLE. In cadrul acestei etichete este adaugata instructiunea "@import" de
mai sus, unde "nume_fisier.css" reprezinta calea si numele fisierului ce contine regulile CSS
definite.
Alaturi de instructiunea "@import", in cadrul etichetei STYLE, pot fi adaugate definiti si
selectori suplimentari.
Legatura la un fisier CSS extern sau importul acestuia intr-un document HTML are acelasi
efect ca si cum stilurile incluse ar fi fost definire direct in eticheta STYLE din sectiunea
HEAD a documentului HTML.
2. Definirea selectorilor
- Selectorii HTML pot fi definiti prin adaugarea unui numar de definitii compatibilie cu
eticheta HTML la care se refera, avand urmatoarea forma generala:
selector_HTML { proprietate1:valoare1; proprietate2:valoare2; ... }
Dupa redefinirea etichetei HTML, stilurile etichetelor respective din documentul HTML vor
fi modificate automat. Prin redefinirea unei etichete, proprietatile prestabilite existente nu
sunt anulate, ci se adauga altele noi.
Utilizarea selectorilor de tip clasa ofera posibilitatea configurarii unor stiluri care se pot
aplica doar acelor elemente care sunt etichetate cu clasa respectiva. Sintaxa generala de
definire a unei clase CSS este:
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }
Exista cazul in care o clasa este asociata unui selector HTML, ceea ce inseamna ca acea clasa
poate fi folosita doar cu eticheta HTML respectiva. Pentru a defini o clasa care sa afecteze in
mod direct un anume selector HTML, se foloseste urmatoarea sintaxa:
selector_HTML .nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }
Selectoarele de clasa sunt acceptate de toate navigatoarele. Numele unei clase e recomandat
sa fie diferit de cuvantele rezervate JavaScript.
- Asemanator cu selectorii de clasa se definesc si identificatorii (id-ul). Acestia sunt folositi
pentru crearea de stiluri care pot fi atribuite unei singure etichete HTML dintr-o pagina.
Sintaxa generala de definire a unui identificator este:
#identificator { proprietate1:valoare1; proprietate2:valoare2; ... }
Identificatorii permit definirea unui element sub forma unui obiect, fiind folositi doar o
singura data in cadrul unei pagini web pentru identificarea tag-ului respectiv, astfel poate fi
manipulat si cu ajutorul functiilor JavaScript.
Numele unui identificator e recomandat sa fie diferit de cuvantele rezervate JavaScript.
3. Crearea etichetelor HTML personalizate

Majoritatea etichetelor HTML au unele proprietati prestabilite. Acestea fie raman asa cum
sunt, fie pot fi redefinite. Exista insa cazuri in care se doreste crearea unor etichete
personalizate, pornind de la zero. In acest caz se folosesc etichetele <span> si <div>.
Eticheta <span> nu are proprietati mostenite. Ea reprezinta doar o locatie vida care creaza o
eticheta in linie.
Pentru a configura o eticheta in linie trebuie definita o clasa sau identificator care sa poata fi
aplicat apoi unei etichete <span>. Iata un exemplu cu, forma generala, in care selectori sunt
precedati de eticheta <span> :
...
<span class="nume_clasa"> ... </span>
...
<span id="span1"> ... </span>
...
<span class="clasa_span"> ... </span>
...
Acum iata cum pot fi definiti acestia in interiorul unei foi de stil:
#span1 { proprietate1:valoare1; proprietate2:valoare2; ... }
span .clasa_span { proprietate1:valoare1; proprietate2:valoare2; ... }
In momentul in care se doreste configurarea unui bloc separat de restul continutului unui
document HTML, solutia este eticheta <div>. Aceasta creaza o zona proprie in pagina, cu
linie noua atat deasupra sa cat si dedesubtul sau.
Pentru crearea etichetelor DIV se procedeaza la fel ca si in cazul etichetelor in linie SPAN,
prin definirea mai intai a unei etichete de tip clasa sau identificator, urmata apoi de aplicarea
ei asupra unei etichete <div>.
Iata forma generala de aplicare a unei etichete <div> intr-o pagina HTML :
...
<div class="nume_clasa"> ... </div>
...
<div id="div1"> ... </div>
...
Definirea acestor etichete <div> intr-un cod CSS se face astfel:
div { proprietate1:valoare1; proprietate2:valoare2; ... }
#div1 { proprietate1:valoare1; proprietate2:valoare2; ... }
Regulile CSS pentru definirea etichetelor <span> sau <div>, pot fi plasate la fel ca si celelalte
tipuri de selectoare, in sectiunea "head" a documentului in interiorul etichetei "style", sau
intr-un fisier extern carev ulterior este legat sau importat in documentul HTML.
Mai multe lucruri despre DIV si SPAN puteti invata de aici -> DIV si SPAN.
4. Definirea de reguli similare

Daca mai multi selectori folosesc aceleasi definitii css, acestia pot avea aceeasi lista de
elemente, fiind scrisi separat prin virgule. Sintaxa generala pentru definirea unei liste cu mai
multi selectori este urmatoarea:
selector1, selector2, ... { proprietate1:valoare1; proprietate2:valoare2; ... }
Impreuna cu selectorii pot fi de asemenea definiti identificatorii si clasele. Dezavantajul ar fi

ca in momentul in care este modificata o valoare a unei proprietati incluse in definitie,
valoarea respectiva se va modifica in toate etichetele reprezentate de acesti selectori.
5. Definirea etichetelor in context (imbricate)
Cand o eticheta este inconjurata de alte etichete (aflandu-se astfel una in interiorul alteia),
spunem ca aceste etichete sunt imbricate. Eticheta exterioara se numeste, in acest caz,
eticheta parinte, iar cea inferioara se numeste copil. Se pot crea reguli care revin numai
etichetelor copil, sintaxa generala a unei astfel de reguli fiind:
selector1 selector2 ... { proprietate1:valoare1; proprietate2:valoare2; ... }
- Unde "selector1" este selectorul parinte iar "selector2" este selectorul copil.
Lista de selectori imbricati poate fi mai mare de doi, ultimul selector din lista este cel care
primeste toate stilurile incluse in regula si in plus le mosteneste si pe cele ale parintilor.
Ca si selectorii singuri, selectorii imbricati pot include in lista clase, identificatori sau
selectori HTML.
Toate etichetele HTML, cu exceptia etichetei BODY, au cel putin o eticheta parinte care le
inconjoara. De cele mai multe ori stilurile etichetelor din interior preiau stilurile etichetelor
parinte (exista insa cazuri in care proprietatile nu sunt mostenite de etichetele imbricate).
Acest mecanism se numeste mostenirea stilurilor.
Prin redefinirea unui selector, eticheta nu-si pierde proprietatile prestabilite, doar in cazul in
care acestea sunt modificate. Astfel proprietatile mostenite pot fi anulate prin redefinirea
acestora in lista de definitii a etichetei imbricate.
6. Cresterea prioritatii unei definitii

Valoarea !important adaugata unei definitii atribuie maximum de prioritate in determinarea
ordinii unei executii.
Valoarea !important trebuie plasata inaintea caracterului ;, ca in exempul urmator:
selector { proprietate1:valoare1; proprietate2:valoare2 !important; ... }
7. Determinarea ordinii executiei

Deoarece exista mai multe moduri de a aplica stilurile, pot apare situatii in care unei etichete
sa-i fie aplicate mai multe stiluri. Foile de stil din doua sau mai multe surse, folosite simultan,
pot cauza contradictii. De aceea exista cateva reguli care determina ordinea executiei (numita
si cascada), acestea sunt:
1. Regulile CSS scrise in interiorul paginii HTML, in cadrul etichetei "style" din
sectiunea "head" au o prioritate mai mare decat cele scrise intr-un fisier extern, iar
regulile scrise in interiorul etichetelor au o prioritate mai mare decat cele din cadrul
etichetei "style" din sectiunea "head".
2. Existenta atributului !important confera prioritate maxima la afisare definitiei in
care este utilizat.
3. Sursa regulilor exista numeroase navigatoare care permit utilizatorului sa-si
defineasca propriile foi de stil. Totusi, foile de stil ale autorului le anuleaza pe cele ale
vizitatorului daca acestea din urma nu au valoarea "!important".
4. Specificitate cu cat o regula dispune de mai multi selectori HTML, de clasa si de
identificator, cu atat prioritatea ei creste. ID-urile au valoarea 100, clasele au valoarea
10, iar selectorii HTML au valoarea 1.
5. Momentul aparitiei cu cat un stil apare mai tarziu, cu atat importanta lui este
mai mare. Astfel, definitiile unei etichete copil au prioritatea mai mare si anuleaza
toate stilurile precedente cu care intra in conflict.
8. Adaugarea comentariilor la CSS

Este bine ca uneori sa fie adaugate comentarii in codul CSS, mai ales in cazul fisierelor
externe. Comentariile ajuta la intelegerea codului, facandu-se astfel cunoscut, pentru mai
tarziu, rolu anumitor elemente din codul CSS.
Comentariile nu au nici un efect si pot fi plasate in jurul regulilor, fiind utile si in cazul
navigatoarelor care nu suporta CSS.
Pentru a adauga comentarii in regulile de stil avem la dispozitie doua modalitati:
In cazul in care comentariul se intinde pe un singur rand este suficienta folosirea

perechii de caractere // urmata de comentariu.
In cazul in care comentariul contine mai multe linie, trebuie plasat intre /* care
deschide zona de comentariu si */ care indica sfarsitul comentariului.
In cazul folosirii comentariilor cu // se pot adauga oricate slash-uri, minimul fiind de doua.
Iata un exemplu in care puteti vedea cum pot fi adaugate comentariile:
/* Comentariu,
pe mai
multe linii */
// Comentariu pe o singura linie
#div1 { proprietate1:valoare1; proprietate2:valoare2; ... }
Configurarea fonturilor
Alegerea potrivita a fonturilor si folosirea acestora in cadrul paginilor web este importanta,
poate atrage critici si comentarii din partea vizitatorilor, mai ales daca formatarea clasica prin
scris normal, aldin sau cursiv nu este folosita corespunzator. CSS include facilitati de control
asupra aspectului fonturilor, prin posibilitatea de a stabili familia de fonturi, atributele
ingrosat si inclinat, dimensiunea literelor precum si spatiul dintre linii.
Exista cinci familii de fonturi de baza:
serif au un ornament (serif) plasat la terminatia literei, care ii ofera o distinctie

speciala. Sunt folosite pentru tiparire, chiar daca textele sunt mai mari sau mai mici.
Nu sunt indicate pentru afisarea textelor pe ecran.
sans serif sunt fonturi care nu folosesc serife, fiind indicate pentru continut text
general.
monospace fonturile monospatiate pot avea serife, ele se deosebesc prin faptul ca
fiecare litera ocupa aceeasi cantitate de spatiu. Sunt cele mai indicate pentru textele
care trebuie citite cu exactitate, ca de exemplu liniile de program.
cursive imita scrisul de mana, intr-o maniera stilizata. Sunt indicate in scopuri
decorative, nefiind recomandate pentru scrierea unor texte mai lungi.
fantasy nu se incadreaza in nici una dintre categoriile de mai sus, fiind fonturi care
au un caracter predominant ornamental (reprezentand ilustratii sau pictograme).
1. Stabilirea fontului
Fontul folosit pentru afisarea unui text poate fi stabilit prin proprietatea "font".
Pentru definirea fontului in cadrul unei reguli, trebuie specificata, dupa selectorul din cadrul
foii de stil, proprietatea font-family urmata de numele fontului sau a fonturilor (despartite
prin virgula). Este bine ca numele fonturilor sa fie incadrate intre ghilimele simple sau duble,
mai ales daca numele acestora contine spatii.
Forma generala fiind urmatoarea:
selector { font-family:"nume_font1", "nume_font2", ..., nume_generic }
- Dupa ultima virgula se pot folosi urmatoarele nume generice de fonturi: "serif", "sans-serif",
"cursive", "monospace" sau "fantasy". Includerea unei asemenea valori este optionala, insa
recomandata.
Iata un exemplu practic:
h1 { font-family:"Arial", "Helvetica", sans-serif }
Cand este specificata o lista de fonturi, navigatorul incearca sa foloseasca primul font din
lista, daca nu este gasit parcurge lista pana in momentul in care intalneste un font instalat.
Daca nu exista fonturi echivalente, textul va fi afisat cu fontul prestabilit de browser. Daca
este specificat un nume generic, textul va fi afisat cu un font apartinand aceluiasi stil, in cazul
in care fonturile specificate in lista nu sunt disponibile.
Exista posibilitatea folosirii unei palete largi de fonturi in crearea paginilor web, nu doar a
celor din lista limitata a fonturilor compatibile cu navigatoarele. Solutia consta in inglobarea
fontului in cadrul paginii si trimiterea lui in mod automat in calculatorul vizitatorului, adica,
descarcarea si folosirea lui automata.
Pentru a ingloba un font intr-o pagina si a-l descarca, se foloseste intructiunea @font-face.
Aceasta trebuie sa includa proprietatea font-family, urmata de numele fontului si apoi trebuie
indicata locatia pe server de unde poate fi descarcat fontul respectiv.
Codul CSS este urmatorul:
@font-face { font-family:nume_font src: url(locatie_font); }
Nu poate fi ales orice font pentru a fi descarcat, acesta trebuie sa respecte un anume format.
Totusi, problema este ca nu exista un format valabil pentru toate navigatoarele, de exemplu
Internet Explorer foloseste fonturi in format "eof" (obtinute cu ajutorul unui program numit
WEFT), iar Mozilla foloseste un format "otf".
2. Stabilirea dimensiunii fontului

Cu ajutorul CSS se poate stabili dimensiunea fontului folosind valori absolute (exprimate in
diferite unitati de masura: pixeli, centimetri), procentuale, sau chiar relative.
Pentru a defini dimensiunea fontului in cadrul unei reguli trebuie specificata proprietatea
font-size urmata de o valoare a dimensiunii care poate lua una din urmatoarele tipuri de
valori:
- unitate de masura - exprimata in pixeli, puncte, inci sau centimetri
- expresie absoluta - xx-small, x-small, small, medium, large, x-large si xx-large
- expresiile smaller sau larger, ca raport cu elementul parinte
- procent - un numar exprimat in procente (cu %), care indica marimea textului in
raport cu dimensiunea elementului parinte
Iata forma generala a codului CSS pentru stabilirea dimensiunii fontului:
selector { font-size:valoare }
Este bine ca pentru foile de stil care formateaza iesirea la imprimanta sa se foloseasca ca
unitati de masura punctele, cm sau mm.
Pixelii reprezinta, probabil, cea mai des utilizata unitate de masura pentru stabilirea
dimensiunii fontului. Pixelii nu reprezinta o masura foarte sigura, dar, de obicei, pentru
afisarea pe ecran, constituie o masura mai sigura decat dimensiunea in puncte.
Iata un exemplu practic exprimat in pixeli:
h1 { font-size:15px; }
3. Text inclinat
Atributul "font-style" permite scrierea textelor inclinate in doua moduri: "cursiv" si "oblic".
Notiunile pot fi confundate, insa cursivul se refera la versiunea unui font a carui caractere au
o inclinare spre dreapta, iar oblicul este un font inclinat fortat spre dreapta.
Pentru a crea caractere cursive in cadrul unei reguli trebuie precizata proprietatea font-style,
astfel:
selector { font-style:valoare }
Unde "valoare" poate fi unul din urmatoarele cuvinte: normal, italic sau oblique
Iata un exemplu:
h1 { font-style:italic; }
Valoarea normal se poate folosi pentru a sterge formatarea cu caractere inclinate atunci cand
aceasta este mostenita.
4. Grosimea fontului
Ingrosarea este una dintre metodele utilizate des pentru scoaterea in evidenta a unui text. CSS
confera mai multa flexibilitate in utilizarea textului ingrosat decat elementul HTML <b>, prin
posibilitatea introducerii unei valori proprietatii font-weight, dupa cum urmeaza:
bold scrie fontul folosind caractere ingrosate
bolder - mareste grosimea fontului relativ la grosimea curenta
lighter micsoreaza grosimea fontului fata de grosimea curenta
- o valoare cuprinsa intre 100 si 900 (multiplu de 100) reprezinta valoarea

ingrosarii, bazata pe versiunile alternative disponibile ale fontului
normal elimina formatarea cu caractere aldine (ingrosate)
In cazul folosiri valorii cuprinse intre 100 si 900, 400 reprezinta valoarea corespunzatoare
textului normal, iar 700 valoarea ingrosarii pentru stilul aldin. Majoritatea fonturilor nu
dispun de noua ponderi, astfel ca daca este specificata o valoare care nu este disponibila, va fi
folosita o alta pondere.
Forma generala pentru stabilirea grosimii fontului este urmatoarea:
selector { font-weight:valoare }
Iata un exemplu practic:

h1 { font- weight:bold; }
5. Majuscule mici
Majusculele mici sunt folosite de obicei in cadrul titlurilor, ele fiind obtinute prin convertirea
literelor mici in majuscule cu o dimensiune mai mica decat majusculelor normale. Astfel se
obtin cuvinte in care toate literele sunt scrise cu majuscule insa prima litera este mai inalta
decat celelalte.
Stabilirea unei reguli pentru majuscule mici se realizeaza prin utilizarea proprietatii fontvariant cu valoarea small-caps. Prin folosirea valorii normal, vor fi anulate celelalte valori
mostenite ale proprietatii font-variant.
Forma generala este urmatoarea:
selector { font-variant:valoare }
Iata cum formatam un text dintr-o eticheta "h1" cu valoarea "small-caps":

h1 { font-variant:small-caps; }
6. Valori multiple pentru font

Deseori este util sa fie precizate toate elementele fontului intr-o singura definitie.
Pentru a se realiza acest lucru este folosita proprietatea "font" urmata de valorile pentru
celelalte proprietati, separate prin spatiu.
Sintaxa generala este urmatoarea:
selector { font:val_font-family val_font-style val_font-variant val_font-weight

val_font-size val_height }
Daca o anumita valoare din lista este omisa, navigatorul va folosi valoarea prestabilita.
Iata si un exemplu practic de folosire a mai multor valori in aceeasi definitie:
h1 { font:"Arial",sans-serif italic small-caps bold 14pt; }
Configurarea textului
Textele alcatuiesc o buna parte din paginile web. Metodele de afisare a textelor prin controlul
nu numai a fontului, dimensiunii si culorilor, ci si prin alte elemente, pot imbunatati aspectul
pagini si pot atrage atentia asupra anumitor elemente din text.
1. Spatiul intre litere

Spatierea se refera la cantitatea de spatiu dintre literele unui cuvant. Se poate aduaga sau
reduce spatiul dintre litere folosind proprietatea letter-spacing, urmata de o valoare
exprimata intr-o anumita unitate de masura, ce poate lua si valori negative.
selector { letter-spacing:valoare }
Daca valoarea proprietatii este normal sau 0 atunci spatierea va fi fixata la valorile implicite
(fara modificari suplimentare).
Daca se utilizeaza o valoare exprimata in em atunci dimensiunea rezultata va fi calculata in
raport cu cea a elementului parinte.
Exemplu:
h1 { letter-spacing:1,5em; }
- Puteti folosi si pixeli (px)
2. Spatiul dintre cuvinte

CSS da posibilitatea modificarii spatiului intre cuvinte atat prin marire, cat si prin micsorare.
Spatiul dintre cuvinte poate fi modificat folosind proprietatea word-spacing, urmata de o
valoare exprimata intr-o anumita unitate, fiind de obicei stabilita in pixeli.
Pentru anularea spatierii intre cuvinte, valoarea proprietatii trebuie sa fie: normal.
selector { word-spacing:valoare }
O valoare pozitiva semnifica un plus de spatiu adaugat la valoarea implicita, iar o valoare
negativa reduce acest spatiu. Daca valoarea este egala cu 0 atunci spatiul dintre cuvinte este
fixat la valoarea prestabilita, neproducand de fapt nici un efect, fiind similar cu valoarea
normal.
Iata un exemplu in care marim spatiul intre cuvintele din eticheta "h2" cu 8 pixeli:
h2 { word-spacing:8px; }
3. Spatiul intre linii

Inaltimea randurilor se refera la spatiul dintre liniile paragrafului.
Modificarea spatiului intre linii poate avea ca efect o mai buna si usoara citire a textului in
cazul in care aceasta este mai mare (creaza o regiune cu spatiu intre liniile de text). Alteori,
daca inaltimea este mai mica (folosita la randurile de titlu), poate conferi un aspect mai stilat.
Pentru a modifiica inaltimea randurilor se foloseste proprietatea line-height, urmata de o
valoare care poate fi exprimata in trei moduri:
- un numar care inseamna multiplicarea dimensiunii fontului cu numarul respectiv

pentru a obtine valoarea spatierii;
- o valoare de tip absolut, exprimata in pixeli, puncte sau orice alta unitate de masura
folosita in CSS, care indiferent de dimensiunea stabilita a fontului, inaltimea liniei va
avea o valoare exacta;
- un procent, care stabileste inaltimea liniei ca fiind egala cu un anumit procent din
dimensiunea fontului folosit pentru scrierea textului.
Sintaxa generala pentru modificarea spatiului intre linii este:
selector { line-height:valoare }
Iata un exemplu in care marim inaltimea liniei cu 50% din dimensiunea fontului:
h1 { line-height:150%; }
Inaltimea liniei poate de asemenea fi definita si in cadrul proprietatii "font-size", prin
introducerea caracterului "/" urmat de valoarea pentru inaltimea randului, imediat dupa
dimensiunea fontului.
Exemplu: h1 { font-size:12px/28px; }
4. Marimea (tipul) literelor

Exista cazuri in care se doreste afisarea textului cu un anume tip de litere. Folosind CSS, se
poate specifica explicit ca textul sa apara cu majuscule initiale, majuscule, minuscule,
combinat sau asa cum a fost el scris.
Cu ajutorul proprietatii text-transform se poate controla marimea literelor din text, indiferent
de modul cum a fost el scris initial.
Pentru a schimba tipul literelor dintr-un text, proprietatea text-transform va fi urmata de o
valoare care poate fi:
capitalize pentru ca primul caracter din fiecare cuvant sa fie scris cu majuscula;
uppercase pentru ca toate caracterele sa fie scrise cu majuscule;
lowercase - pentru ca toate caracterele sa fie scrise cu litere mici;
none pentru ca textul sa fie afisat asa cum este.
Sintaxa generala este:
selector { text-transform:valoare }
Iata un exemplu in care toate literele vor fi afisate cu majuscule:

h1 { text-transform:uppercase; }
Proprietatea "text-transform" este utila atunci cand textele sunt create in mod dinamic (de
exemplu, in cazul in care ele provin dintr-o baza de date sau form HTML).
5. Alinierea textului
Un text poate fi aliniat de la marginea din stanga, din dreapta, centrat sau la ambele margini
(stanga-dreapta).
Proprietatea text-align ofera posibilitatea controlului asupra alinierii textului.
Definirea alinierii se face specificand dupa proprietatea text-align una din valorile: left,
right, centersau justify.
Forma generala este:
selector { text-align:valoare }
Proprietatea poate fi aplicata numai elementelor la nivel de bloc (DIV, UL, Hx, p), valoarea
sa implicita fiind in majoritatea cazurilor stabilita la valoarea "left".
Iata un exemplu in care textul din eticheta "h2" este aliniat "stanga-dreapta":
h2 { text-align:justify; }
- In cazul in care alinierea textului este "stanga-dreapta", spatierea cuvintelor si a literelor se
schimba pentru a se obtine linii de aceeasi lungime.
6. Alinierea pe verticala a textului

Cu ajutorul proprietatii vertical-align se poate preciza pozitia unor elemente (in linie) in
raport cu textul din jurul lor. Asta inseamna ca proprietatea poate fi folosita doar cu etichete
in linie care nu determina un salt la linie noua, de obicei utilizandu-se cu eticheta "span".
Sintaxa pentru utilizarea proprietatii vertical-align este:
selector { vertical-align:valoare }
Pentru definirea alinierii pe verticala a textului se foloseste una din urmatoarele optiuni:
super pentru scrierea textului in stil exponent, deasupra liniei de baza;
sub - pentru scrierea textului in stil indice, sub linia de baza;
baseline pentru scrierea textului pe linia de baza;
- una din valorile: "top", "middle", "bottom", "text-top", "text-bottom" pentru a

alinia textul relativ la alinierea parintelui acestuia;
- valoare procentuala care ridica sau coboara linia de baza a elementului

proportional cu dimensiunea fontului elementului parinte.
Iata un exemplu in care textul din eticheta <span> va aparea ca exponent fata de textul din
stanga-dreapta lui:
span { vertical-align:super; }
7. Formarea paragrafelor
Cu ajutorul proprietatii text-indent se poate stabili ce spatiu suplimentar este inserat la
inceputul primei linii de text dintr-un paragraf. Pentru aceasta, proprietatea text-indent este
urmata de o valoare exprimata intr-o unitate de masura (pixeli sau em) sau in procente
(proportional cu latimea paragrafului).
selector { text-indent:valoare }
Valorile pozitive determina o indentare tipica (spre dreapta), in timp ce valorile negative
determina o indentare inspre argine, fiind necesar sau marirea umplerii (padding) sau marirea
marginilor.
Iata un exemplu de cod CSS in care va fi determinat un spatiu de 20 pixeli la inceputul
paragrafului din eticheta <p>:
p { text-indent:20px; }
Daca se utilizeaza o valoare exprimata in unitati "em", atunci rezultatul va fi relativ la
dimensiunea fontului elementului asupra caruia se aplica. Pentru eliminarea decalarii se
utilizeaza valoarea 0.
8. Aplicarea elementelor decorative

CSS permite ornarea textului prin scoaterea lui in evidenta in patru moduri: subliniere,
supraliniere, taierea textului cu o linie sau crearea de texte care clipesc.
Aplicarea de elemente ornamentale unui text se realizeaza prin proprietatea text-decoration,
urmata de una din valorile:
underline pentru a sublinia textul
overline pentru a trasa o linie deasupra textului
line-through pentru a taia textul cu o linie
blink pentru a face textul sa apara si dispara intermitent
Forma generala este :
selector { text-decoration:valoare }
Pentru a elimina decoratiile se foloseste valoarea "none". Prin folosirea acestei valori se
elimina si sublinierile link-urilor, chiar daca navigatorul are prestabilit sa le arate subliniat.
Iata un exemplu de cod in urma caruia link-urile nu vor mai fi afisate subliniat:
a:link { text-decoration:none; }
Elementul decorativ "blink" a prezentat probleme, fiind de curand eliminat de unele
navigatoarelor.
9. Spatiile albe
Intreruperile de linie si spatiile albe dintr-un document HTML sunt tratate ca un singur spatiu
sau sunt ignorate, daca nu este utilizata eticheta <pre>.
CSS permite afisarea acestor spatii, precum si a intreruperilor textului, utilizand proprietatea
white-space, urmata de valoarea "pre".

selector { white-space:valoare }
In locul cuvantului "valoare" poate fi adaugat: "pre", "nowrap" sau "normal"

Utilizarea valorii "nowrap" impiedica trecerea la linia urmatoare.
Valoarea "normal" permite navigatorului sa decida asupra modului de tratare a spatiilor. De
obicei, acestea vor fi transformate intr-un singur spatiu.
Iata un exemplu in urma caruia spatiile albe si trecerea la linia noua vor fi afisate asa cum au
fost scrise:
p { white-space:pre; }
Spre deosebire de eticheta <pre> care schimba fontul cu unul monospatiat, valoarea "pre" a
proprietatii white-space nu are nici un efect asupra fontului elementului la care se aplica.
Configurari pentru culori si fundal

Daca HTML permitea configurarea unor culori si elemente grafice de fundal doar pentru
anumite elemente, CSS permite definirea culorii si a fundalului pentru orice element din
pagina web.
1. Configurarea fundalului
Se poate schimba fundalul (background) intregii pagini, sau pentru un anumit element din
pagina, fie el de tip DIV, paragraf, imagine, tabel sau formular.
a) Culoarea fundalului
Pentru a schimba culoarea fundalului se utilizeaza proprietatea background-color, urmata de
o valoare care reprezinta numele culorii sau valoarea RGB, exprimata in cod hexa.
selector {background-color:valoare }
Daca se foloseste valoarea "transparent" navigatorul va afisa culoarea prestabilita sau cea a
elementului parinte.
Pentru schimbarea fundalului intregii pagini se aplica aceasta proprietate selectorului "body".
Iata un exemplu in care culoarea de fundal a paginii este schimbata in albastru:
body { background-color:#0000ff; }
b) Imaginea de fundal
Puteti utiliza pentru fundal si o imagine, pentru aceasta se foloseste proprietatea
background-image, urmata de adresa URL a locatiei imaginii.
selector { background-image:url('adresa_URL'); }
Unde "adresa_URL" este calea si numele imaginii care va fi folosita

Daca in locul adresei URL se foloseste valoarea "none", navigatorul nu va folosi nici o
imagine.
Iata un exemplu in care pentru fundalul paginii este folosita o imagine:
body { background-image:url('cale/imagine.gif'); }
c) Repetarea imaginii de fundal
Pe langa posibilitatea afisarii unui element grafic ca fundal, CSS ofera si un mod de repetare
a acestuia.
Pentru a repeta imaginea de fundal se foloseste proprietatea background-repeat, urmata de o
valoare care poate avea una din urmatoarele optiuni:
repeat pentru a repeta imaginea pe toata suprafata elementului respectiv;
repeat-x pentru a repeta imaginea numai pe orizontala;
repeat-y pentru a repeta imaginea numai pe verticala;
no-repeat pentru a afisa imaginea o singura data, fara repetare.
selector { background-repeat:valoare }
Iata un exemplu de cod in care imaginea folosita pentru fundalul paginii se va repeta pe
verticala pe toata inaltimea documentului:
body { background-repeat:repeat-y; }
d) Controlul imaginii de fundal
CSS poate defini modul de tratare a fundalului la derularea paginii, pentru aceasta se
foloseste proprietatea background-attachment cu optiunea "fixed", pentru a lipi imaginea
de fundal de fereastra navigatorului sau optiunea "scroll", pentru a permite derularea imaginii
de fundal alaturi de elementul corespunzator atunci cand vizitatorul deruleaza pagina.
selector { background-attachment:valoare }
Iata un exemplu practic aplicat imaginii folosita pentru fundalul paginii:

body { background-attachment:scroll; }
e) Pozitia imaginii de fundal
Pentru a pozitiona imaginii de fundal in functie de coltul din stanga-sus al elementului se
utilizeaza proprietatea background-position urmata de doua valori (coordonate x si y)
separate prin spatiu, 'x' pentru pozitia orizontala si 'y' pentru cea verticala.
Forma generala a acestei proprietati este:
selector { background-position:valoare }
Coordonatele x si y pot fi exprimate ca valori absolute sau ca procente. Se pot folosi si

cuvintele cheie: "left", "center" sau "right" pentru coordonata x; respectiv "top", "center"
sau "bottom" pentru coordonata y.
Iata un exemplu in care imaginea de fundal a paginii este pozitionata la 10 pixeli (x si y)
relativ la coltul din stanga-sus:
body { background-position:10px 10px; }
f) Stabilirea simultana a proprietatilor fundalului
Toate proprietatile fundalului pot fi configurate cu ajutorul proprietatii background. Se poate
stabili simultan printr-o lista de valori proprietatile fundalului, enumerate in orice ordine si
separate prin spatiu.
Cand se utilizeaza proprietatea background, nu este necesar sa fie specificate toate
proprietatile, cele nespecificate fiind stabilite la valoare lor implicita.
selector {background:val_bg-color val_bg-img val_bg-repet val_bg-attach

val_bg-position }
Valoarea implicita a proprietatii background-color este "transparent".

Valoarea implicita a proprietatii background-image este "none".
Valoarea implicita a proprietatii background-attachment este "scroll".
Valoarea implicita a proprietatii background-position este "top left".
Iata si un exemplu in care sunt aplicate mai multe proprietati pentru background, in aceeasi
definitie:
div { background:#e8e8fe url('imagine.jpg') 50% repeat }
- DIV-ul va avea culoarea de fndal "#e8e8fe", cu o imagine pozitionata la jumatatea distantei
X, Y si care se repeta.
2. Stabilirea culorii din prim-plan

Proprietatea color poate schimba culoare oricarui element, fie el text, linie orizontala sau
element de tip formular.
Sintaxa generala pentru utilizarea acestei proprietati este:
selector { color:valoare }
Valoarea culorii poate fi:
numele culorii - una din cele 16 culori predefinite (red, green, blue, white, silver, ...)
valoare in hexa - sub forma #rrggbb
valoare RGB - sub forma rgb(r, g, b), unde r, g, b pot fi reprezentate prin numere
intregi cuprinse intre 0 si 255 sau procente de rosu, verde si albastru cu valori intre
0% si 100%.
Iata un exemplu de cod CSS in care culoarea textului din eticheta "h3" este definita verde:
h3 { color:green; }
Controale pentru chenare si afisarea

elementelor
Indiferent daca o eticheta este de sine statatoare sau imbricata in alte etichete, aceasta poate fi
tratata ca un element distinct pe ecran si poate fi controlata prin intermediul CSS.
Orice element creat intr-o foaie de stil este prezentat in propriul lui cadru.
Notiunea de element se refera la componentele unui document HTML, configurate prin
intermediul etichetelor HTML.
Caseta (cadrul elementului) dispune de numeroase proprietati, intre care se numara:
marginile, chenarul, completarea (umplerea, cunoscuta ca "padding"), latimea si inaltimea,
care pot fi modificate cu ajutorul CSS.
Elementele HTML au patru laturi (sus, dreapta, jos si stanga) la care se pot aplica
proprietatile CSS specifice, restul proprietatilor CSS (font, text, culoare, fundal) se aplica in
continutului casetei. Continutul poate include texte, liste, formulare sau imagini.
1. Latimea si inaltimea unui element

Latimea si inaltimea elementelor pot fi specificate cu ajutorul proprietatilor width si height.
In mod prestabilit acestea sunt determinate automat de catre navigator, fiind egale cu
necesarul afisarii intregului continut. Pentru definirea latimii si inaltimii se folosesc
urmatoarele tipuri de valori:
- o valoare de tip numeric, de obicei in pixeli;
- un procent, care stabileste o valoare proportionala in functie de cea a elementului

parinte;
- valoarea auto, care foloseste latimea si inaltimea calculata de navigator, si care

reprezinta cantitatea de spatiu maxim pe care o poate ocupa elementul pentru afisarea
intregului continut.
Sintaxa generala pentru configurarea latimii si inaltimii este:
selector { width:valoare; height:valoare }
Iata un exemplu in care elementul cu id="un_id" va avea latimea de 300 pixeli si inaltimea de
500 pixeli:
#un_id { width:300px; height:500px; }
2. Marginile unui element

Proprietatea margin permite stabilirea distantei dintre un element si alte elemente alaturate,
prin specificarea unei valor pentru marginea din fiecare latura (sus, dreapta, jos, stanga).
Daca specificati cele 4 valori in aceeasi definitie, acestea reprezinta marginile elementului in
urmatoarea ordine: sus, dreapta, jos, stanga.
Daca specificati doar o valoare, aceasta va fi aplicata tuturor marginilor.
In cazu in care specificati doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa
valorile marginilor opuse.
Sintaxa generala pentru configurarea marginilor unui selector este:
selector { margin:valoare/valori; }
Tipul de valoare folosit poate avea urmatoarele optiuni:
- o valoare de tip lungime (numerica) care poate fi si negativa;
- o valoare procentuala (procent) creaza o margine proportionala cu latimea

elementului parinte;
- valoarea auto lasa controlul marginilor la decizia navigatorului.
Iata un exemplu in care etichetele DIV vor avea distanta pentru marginea de sus 10 pixeli,
dreapta 5 pixeli, jos 8 pixeli si in stanga 15 pixeli:
div { margin:10px 5px 8px 15px; }
Exista posibilitatea de a stabili valoarea marginii doar pentru o singura latura, fara a tine cont
de celelalte margini. Pentru aceasta sunt folosite proprietatile margin-top, margin-bottom,
margin-left si margin-right cu aceleasi valori ca si in cazul proprietatii margin, dupa cum
puteti vedea mai jos.
selector { margin-top:valoare; }
selector { margin-bottom:valoare; }
selector { margin-left:valoare; }
selector { margin-right:valoare; }
3. Chenarul unui element

Proprietatea border permite stabilirea simultana a atributelor chenarului pentru toate cele
patru laturi ale casetei. Aceasta foloseste 3 valori distincte, pentru a configura latimea
(grosimea), stilul si culoarea liniei bordurii.
Sintaxa generala pentru definirea chenarului este:
selector { border:val_grosime val_stil val_culoare; }
Unde
- prima valoare (val_grosime) reprezinta grosimea chenarului si poate fi una din

urmatoarele tipuri:
o - o valoare de tip lungime (valoarea 0 determina anularea afisarii chenarului);

- un cuvant cheie (thin, medium, thick) care caracterizeaza o dimensiune
relativa.
- a doua valoare (val_stil) reprezinta numele stilului atribuit chenarului (valoarea

"none" anuleaza afisarea chenarului);
- ultima valoare (val_culoare) reprezinta culoarea, exprimata in cod hexa sau valoare
RGB.
Iata un exemplu in care div-urile vor avea o bordura groasa de 1 pixel, solid si culoare
albastra:
div { border:1px solid blue; }
- Pot fi folosite si proprietati separate pentru fiecare: "border-width", "border-style" si
"border-color"; prezentate in continuare.
Un atribut care poate fi folosit in configurarea chenarului este border-width, acesta
furnizeaza o metoda rapida pentru stabilirea latimii celor patru laturi din jurul unei casete.
selector { border-width:valoare; }
Daca specificati toate cele patru valori, ele sunt aplicate in ordinea: sus, dreapta, jos, stanga.
Daca specificati doar o valoare, ea va fi aplicata tuturor marginilor.
Daca folositi doua sau trei valori, valorile care lipsesc sunt copiate din valorile marginilor
opuse lor in caseta.
Aspectul bordurii poate fi stabilit prin atributul border-style; stilul este aplicat celor patru
margini si este definit astfel:
selector { border-style:valoare; }
Pentru specificarea valorii, pot fi folosite urmatoarele tipuri:
Ultimele patru valori sunt reprezentate tridimensional, iar in cazul in care ele nu sunt
acceptate de catre navigator, in locul lor se va folosi valoarea cu linie plina.

Un alt atribut care poate fi utilizat in configurarea chenarului este border-color, acesta
stabileste culoarea pentru toate cele patru laturi ale chenarului si foloseste pentru valoarea ei
un singur cuvant cheie exprimat in cod hexa, valoare RGB sau numele culorii.
selector { border-color:valoare; }
Puteti stabili culoarea fiecarei margini si separat, folosind proprietatile:
border-top-color, border-right-color, border-bottom-color si border-left-color
Fiecare latura a chenarului poate avea valori configurate in mod separat (prin care se stabilesc
stilul si culoarea fiecarei borduri din jurul elementului) dupa cum este prezentat mai jos:
selector { border-top:grosime stil culoare; }

selector { border-bottom:grosime stil culoare; }
selector { border-left:grosime stil culoare; }
selector { border-right:grosime stil culoare; }
4. Adaugarea spatiului in interior, in jurul elementului

Proprietatea padding adauga o cantitate de spatiu suplimentar in jurul continutului
elementului, in interiorul chenarului, intre bordura si continut.
Forma generala pentru utilizarea acestei proprietati este:
selector { padding: valoare/valori; }
Valoarea pentru completarea spatiului poate fi una din urmatoarele:
- o valoare de tip lungime
- o valoare procentuala creaza umplerea in raport cu latimea elementului parinte.
Cand specificati toate cele patru valori, ele sunt aplicate in ordinea: sus, dreapta, jos, stanga.
Daca specificati doar o valoare, aceasta va fi aplicata tuturor celor patru directii.
Daca specificati doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa valorile
laturilor opuse.
Iata un exemplu in care etichetele DIV vor avea distanta padding: sus 4 pixeli, dreapta 2
pixeli, jos 3 pixeli si in stanga 2 pixeli:
div { padding:4px 2px 3px 2px; }
Fiecare latura a chenarului poate avea proprietatea padding configurata separat:
selector { padding-top:valoare; }
selector { padding-bottom:valoare; }
selector { padding-left:valoare; }
selector { pading-right:valoare; }
5. Elemente float
CSS ofera posibilitatea de a "infasura" anumite elemente in jurul altora. Acest lucru se face
prin intermediul proprietatii float, care determina o mutare fortata a elementului in directia
data de valoarea mentionata, lasand loc liber in spatiul opus directiei, care va fi ocupat de
urmatorul element din codul HTML.
Sintaxa generala pentru utilizarea acestei proprietati este:
selector { float:valoare; }
Unde "vaoare" poate fi" left, right si none

Valoarea "none" permite elementului sa fie plasat acolo unde este posibil, iar celelalte valori
forteaza plasarea elementului in stanga sau in dreapta ecranului, textul din exteriorul etichetei
HTML respective va fi plasat in partea opusa, in jurul elementului.
Iata un exemplu in care elementul cu id="un_id" va fi fortat sa fie pozitionat in dreapta
celorlaltor elemente:
#un_id { float:right; }
6. Anularea plasarii unui element in spatiul eliberat de "float"

Asemanator cu actiunea etichetei HTML <br>, care trece pe un nou rand elementele ce o
preced, este si proprietatea clear.
Cu ajutorul acesteia se poate anula ocuparea unui spatiu care a fost lasat liber de un element
care utilizeaza proprietatea "float".
Sintaxa generala pentru utilizarea proprietati clear:
selector { clear:valoare; }
Unde "valoare" specifica latura in jurul careia este interzisa infasurarea textului si poate lua
valoarea: left, right sau both. Se poate folosi si valoarea "none", ceea ce are ca efect anularea
altor atribute ale proprietatii clear.
De exemplu, daca aveti un DIV pozitionat fortat in dreapta, un paragraful care urmeaza dupa
el va fi afisat in stanga DIV-ului respectiv. Pentru a anula acest lucru, ca paragraful sa fie
afisat sub DIV, se foloseste proprietatea "clear", precum in exemplul urmator:
#un_div { float:right; }
p { clear:both; }
7. Afisarea si ascunderea elementelor

Proprietatea display poate stabili daca un element va fi de tip block, incluzand linii noi
deasupra si dedesubtul sau, daca este inclus in linie, daca este tratat sub forma de lista sau
daca elementul este afisat sau nu.
Sintaxa generala pentru aceasta proprietate este:
selector { display:valoare; }
Unde "valoare" poate fi una din urmatoarele optiuni:
list-item plaseaza in prima linie a textului un indicator pentru articole de tip lista,
dar si un salt deasupra si dedesubtul articolului;
block defineste eticheta ca fiind de tip bloc si plaseaza un salt la linie noua deasupra
si dedesubtul ei;
inline defineste eticheta ca o eticheta in linie si elimina caracterele de salt la linie

noua;
none determina ascunderea elementului si neafisarea lui de catre navigator; codul

acestuia este incarcat insa continutul sau nu e afisat in pagina.
Iata un exemplu in care elementele <li> sunt asezate in linie, iar un element cu id="un_id" va
fi ascuns in pagina:
li { display:inline; }
#un_id { display:none; }
Proprietatea display nu trebuie confundata cu visibility. Spre deosebire de visibility care nu
afiseaza elementul dar lasa liber spatiu pentru element, sintaxa display: none elimina
complet elementul din pagina.
Controale de pozitionare
Pozitionarea elementelor folosind CSS este mai precisa decat prin intermediul obiectelor
grafice HTML sau a tabelelor, afisarea facandu-se mult mai rapid.
Prin intermediul CSS este permisa pozitionarea exacta sau relativa a elementelor intr-o
fereastra sau in raport cu alte elemente.
Fereastra navigatorului este suprafata in care sunt afisate toate elementele. Ea poate fi
redimensionata sau pozitionata pe ecran, sau poate fi divizata in alte ferestre prin intermediul
cadrelor.
Toatele elementele amplasate in fereastra sunt pozitionate relativ la coltul din stanga-sus.
1. Stabilirea modului de pozitionare

Prin utilizarea proprietatii position se poate specifica pozitia elementului in pagina web.
Un element poate avea una din urmatoarele valori de pozitionare: static, relative, absolut si
fixed.
Tipul de pozitie indica navigatorului cum sa trateze amplasarea unui element intr-o fereastra.
a) Pozitionarea statica
Valoarea initiala, prestabilita, a pozitionarii elementelor in fereastra este "static".
Cand nu este specificata o pozitionare "relativa", "absoluta" sau "fixa"; elementele sunt
dispuse unul dupa altul in interiorul documentului.
Sintaxa pentru specificarea pozitionarii static este:
selector { position:static }
- Un element static nu poate fi repozitionat in mod explicit.

b) Pozitionarea relativa
Un element cu pozitionare "relativa" este amplasat la locul sau in cadrul ferestrei sau a
elementului parinte, in sensul ca el apare dupa toate elementele dinaintea sa, respectiv
inaintea tuturor elementelor amplasate dupa el.
Sintaxa pentru specificarea pozitionarii relative este:
selector { position:relative }
- Elementele pozitionate relativ pot fi mutate din locatia lor folosind proprietatile "top" si
"left" sau "bottom" si "right".
c) Pozitionarea absoluta
Pozitionarea absoluta are ca efect crearea unui element neafectat de restul documentului,
plasarea lui in fereastra fiind facuta intr-o locatie precisa, definita prin intermediul
coordonatelor x si y, indiferent de pozitiile altor elemente.
Sintaxa pentru specificarea pozitionarii absolute este:
selector { position:absolute }
- Originea (punctul de coordonate 0,0) este coltul din stanga-sus al ferestrei sau al obiectului
in care este inclus elementul pozitionat absolut.
d) Pozitionarea fixa
Pozitionarea fixa a unui element este aproximativ la fel cu cea absoluta, cu diferenta ca la
derularea paginii elementul fixat ramane pe pozitia lui initiala, fara a se derula.
Sintaxa pentru specificarea pozitionarii fixed este:
selector { position:fixed }
2. Pozitionarea in raport cu latura de sus, respectiv stanga

Dupa stabilirea tipului de pozitionare, se poate determina distanta intre punctul de origine si
laturile de sus si din stanga ale elementului sau parinte, folosind proprietatile top si left
selector { top:valoare; left:valoare; }
- Unde "valoare" poate fi:
- o valoare de tip numeric, care defineste distanta dintre laturile ferestrei sau a
elementului parinte si laturile elementului;
- o valoare procentuala, care semnifica deplasarea fata de laturile ferestrei sau a

elementului parinte;
- valoarea auto, care permite navigatorului sa calculeze el insusi valoarea.
Pot fi utilizate proprietatile top si left sau bottom si right, de asemenea pot lua si valori
negative.
In cazul in care este vorba despre elemente imbricate, acestea vor fi deplasate solidar cu
elementul parinte daca acesta are position:relative.
Iata un exemplu in care o eticheta <h1> este pozitionata la o distanta de 10 pixeli fata de
marginile sus si stanga ale unui DIV in interiu caruia se afla:
div { position:relative; }
h1 { top:10px; left:10px; }
</style>
<div>
<h1>Text...</h1>
</div>
3. Pozitionarea in raport cu latura de jos, respectiv dreapta

In unele cazuri este necesara pozitionarea in raport cu laturile de jos, respectiv dreapta. In
acest caz originea va fi coltul din dreapta-jos al ferestrei sau al elementului parinte.
Definirea marginilor fata de latura de jos, respectiv din dreapta se face cu ajutorul
proprietatilor bottom si right; ele pot lua aceleasi valori ca si "left" si "top", de asemenea pot
fi combinate cu acestea.
selector { bottom:valoare; right:valoare; }
In cazul in care pentru acelasi element sunt stabilite atat marginile "top / left" cat si "bottom /
right", rezultatul afisat depinde de navigator, dar in mod prestabilit se folosesc pozitiile top si
left.
4. Pozitionarea in spatiul 3D
Elementele pot primi o a treia dimensiune, si anume asezarea lor in stiva, unele in raport cu
altele.
Amplasarea se face in mod automat, incepand cu valoarea 0 si continuand prin incrementare
cu o unitate, in ordinea aparitiei lor in documentul HTML si relativ la elementele parinte.
Pentru pozitionarea elementelor in stiva unele peste altele se foloseste proprietatea z-index.
Valoarea acestei proprietati fiind relatia tridimensionala a elementului in raport cu alte
elemente din fereastra.
Sintaxa generala pentru proprietatea z-index este:
selector { z-index:valoare; }
Unde "valoare" este un numar intreg, pozitiv, 0 sau negativ.

In cazul in care continutul elementelor se suprapune, elementul cu numarul de ordine mai
mare apare deasupra elementului cu numar mai mic.
Utilizarea unei valori negative determina amplasarea elementului dedesubtul parintelui sau cu
atatea niveluri cu cate indica indexul z.
5. Includerea unui element absolut intr-un element relativ

Un element poate fi pozitionat exact in cadrul unei ferestre, sau el poate fi inclus intr-un
element cu pozitionare relativa.
In cazul includerii unui element pozitionat absolut intr-un element pozitionat relativ,
elementul absolut este pozitionat folosind ca origine coltul din stanga-sus al elementului
relativ.
Iata un exemplu de cod HTML in care o eticheta <div> (cu class="absolut") este inclusa
(imbricata) in alta eticheta <div> (cu class="relativ"):
<div class=relativ>
...
<div class=absolut> ... </div>
...
</div>
Pentru a face o pozitionare absoluta a elementului inclus (care are class="absolut") in
elementul parinte (care are class="relativ"), caruia ii definim o pozitionare relativa; scriem in
foaia de stil urmatorul cod:
.relativ {position:relative; top:30px; left:50px; }
.absolut {position:absolute; top:15px; left:0px; }
6. Includerea unui element relativ intr-un element absolut

Cand un element pozitionat absolut este inclus intr-un element pozitionat relativ, primul
foloseste ca origine coltul din stanga-sus al parintelui.
In cazul in care un element pozitionat relativ este plasat in interiorul unui element pozitionat
absolut, acesta se va deplasa o data cu elementul absolut.
Iata un exemplu de cod HTML in care o eticheta <div> (cu class="relativ") este inclusa
(imbricata) in alta eticheta <div> (cu class="absolut"):
<div class=absolut>
...
<div class=relativ> ... </div>
...
</div>
Pentru a face o pozitionare relativa a elementului inclus (care are class="relativ") in
elementul parinte (care are class="absolut"), caruia ii definim o pozitionare absoluta;
adaugam in foaia de stil urmatorul cod:
.absolut {position:absolute; top:20px; left:25px; }
.relativ {position:relative; top:10px; left:5px; }
Configurari pentru vizibilitate si mouse
CSS ofera posibilitatea de a afisa sau ascunde unele elemente sau parti ale unor elemente.
1. Stabilirea vizibilitatii unui element

Proprietatea visibility poate controla faptul ca un element sa fie vizibil sau nu. Chiar daca
elementul este invizibil, el va ocupa un spatiu liber in pagina, acolo unde ar fi trebuit sa fie
afisat.
Sintaxa pentru folosirea acestei proprietati este urmatoarea:
selector { visibility:valoare }
Unde "valoare" poate fi:
hidden ascunde elementul de la afisarea pe ecran;
visible afiseaza elementul;
inherit vizibilitatea elementului este mostenita de la elementul parinte.
Iata un exemplu in urma caruia textul din interiorul etichetei <h1> va fi invizibil:
h1 { visibility:hidden; }
Pentru a ascunde complet afisarea unui element in pagina, se poate utiliza formula
display:none;
2. Stabilirea suprafetei vizibile a unui element

Definirea suprafetei vizibile a unui element stabileste portiunea din elementul respectiv care
este vizibila in fereastra navigatorului. Restul continutului acelui element nu dispare, ci este
invizibil pentru vizitator.
Pentru a defini forma regiunii vizibile se foloseste proprietatea clip cu valoarea rect (definita
prin patru valori separate prin spatii si incadrate de paranteze rotunde)
selector {clip:rect(val1 val2 val3 val4); }
- Valorile construesc un patrulater, definesc distanta dintre coltul din stanga-sus al

elementului si laturile de sus, dreapta, jos si stanga ale regiunii vizibile.
Iata un exemplu de cod CSS in care suprafata vizibila a unui element cu id="viz" va fi cea
incadrata de valorile atributului rect:
#viz { clip: rect(25 300 125 100); }
Daca se foloseste valoarea "auto", navigatorul calculeaza dimensiunea regiunii vizibile la
100%. Regiunile de vizibilitate pot avea doar forma dreptunghiulara.
3. Definirea pozitiei depasirii

Uneori elementele nu sunt in totalitate continute in casetele lor, caseta nefiind suficient de
mare, astfel ca o parte a continutului nu este afisata sau depaseste marginea stabilita.
Proprietatea overflow permite tratarea continutului in exces, controland astfel modul de

afisare sau nu al acesuia.
Forma generala a proprietatii overflow este:
selector { overflow:valoare; }
- Unde "valoare" stabileste unde va fi plasata depasirea, folosind una din valorile:
visible extinde caseta elementului astfel incat sa incapa tot continutul sau, ignorand
delimitarea suprafetei vizibile. Este optiunea prestabilita.
hidden ascunde continutul care nu incape in caseta elementului, si impiedica

aparitia barei de derulare.
scroll adauga intotdeauna bare de derulare elementului, pentru ca sa se poata accesa

tot continutul elementului.
auto barele de derulare apar doar atunci cand este necesar.
Iata un exemplu in care toate elementele cu class="extradim" vor avea bare de scroll:
.extradim { overflow:scroll; }
Pentru definirea proprietatii "overflow" doar pentru una din directii: orizontala sau verticala;
adica bara de derulare sa fie disponibila sau nu doar pentru una din aceste directii, se poate
folosi o alta varianta a acestei proprietati, si anume:
overflow-x:valoare - pentru orizontala
overflow-y:valoare - pentru verticala
- Unde "valoare" poate fi una din valorile prezentate mai sus.
4. Aspectul indicatorului de mouse

In mod normal, aspectul indicatorului de mouse este determinat de browser. Navigatorul
modifica indicatorul de mouse in functie de continutul deasupra caruia se afla acesta.
Uneori este dorita anularea sau completarea preferintelor navigatorului si configurarea unor
aspecte personalizate.
Proprietatea cursor ajuta la stabilirea aspectului unui indicator de mouse.
Sintaxa este urmatoarea:
selector { cursor:valoare; }
Unde "valoare" poate avea urmatoarele nume pentru indicatoarele de mouse:
- Daca se foloseste valorea "auto", navigatorul decide asupra tipului de indicator folosit.
Pseudo-clase
Pseudo-clasele permit adaugarea de stiluri CSS doar la anumite elemente ale aceluiasi
selector, id sau clasa.
De exemplu, cand definiti un stil pentru un anumit tag HTML sau pentru o clasa, continutul
din toate aceleasi tag-uri sau aceeasi clasa vor avea acel stil, iar daca doriti sa definiti un stil
diferit pentru primul (sau ultimul) din acele tag-uri ori pentru primul continut definit de
aceeasi clasa, puteti realiza asta folosind pseudo-clasele. De asemenea, acestea pot modifica
stilul grafic al elementelor cand mouse-ul actioneaza asupra lor.
Pentru a functiona in Internet Explorer 7+ este necesar declararea <!DOCTYPE>, care se
adauga la inceputul documentului HTML, mai multe detalii (in engleza) gasiti Aici.
Sintaxa pentru utilizarea pseudo-clasei este urmatoarea:
element:pseudo-clasa { proprietate:valoare; }
- unde "element" este un selector, id sau clasa, iar "pseudo-clasa" este una din expresiile
urmatoare:
active - Adauga un stil unui element cand acesta este activat (actionat prin click pe
el)
first-child - Adauga un stil unui element care este primul din acel tip de elemente
focus - Folosit pentru input-urile de formulare, le adauga un stil cand acestea sunt
active (dupa click si cursorul de text in ele)
hover - Adauga un stil unui element cand mouse-ul se afla deasupra lui
lang(cuvant) - Adauga un stil unui element care are atributul lang="cuvant" (nu e
suportat de Safari si IE mai mic de 8)
last-child - Adauga un stil unui element care este ultimul din acel tip de elemente
link - Adauga un stil unui link nevizitat
visited - Adauga un stil unui link vizitat
Ca sa intelegeti mai bine cum functioneaza si ce fac pseudo-clasele, studiati exemplele care
sunt prezentate in continuare.
1. Pseudo-clase cu selector
Selectoarele fac referire la tag-urile HTML pe care le denumesc (de ex.: p pentru <p>, li
pentru <li>, div pentru <div>, etc.).
In exemplul urmator este folosit "first-child" pentru paragraf:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-clase - Ex. 1</title>
p:first-child {
color:blue;
}
</style>
</head>
<body>
<p>Un text din primul paragraf</p>
<p>Continut din al doilea paragraf</p>
<p>Textul din al treilea paragraf</p>
</body>
</html>
- Rezultatul va fi urmatorul, primul paragraf va avea textul albastru.
Un text din primul paragraf
Continut din al doilea paragraf
Textul din al treilea paragraf
Iata si un exemplu cu "hover" pentru <li>
<html>
<head>
li:hover {
background-color:#88fe88;
}
</style>
</head>
<body>
<ul>
<li>Text list 1 ...</li>
</ul>
</body>
</html>
- Cand pozitionati mouse-ul deasupra fiecarui LI, acesta va avea background verde, testati
mai jos
Text list 1 ...
Text list 2 ...
Text list 3 ...
2. Pseudo-clase si clase
Trebuie stiut ca pseudo-clasele nu sunt acelasi lucru ca si clasele, acestea fiind cele care fac
referire la valoarea atributului "class" si in CSS se adauga dupa un caracter punct (.).
Iata un exemplu in care sunt folosite pseudo-clasele "lang(cuvant)" (pt. IE incepand cu
versiunea 8) sl "last-child" la o clasa ".test'
<html>
<head>
.test:last-child {
}
.test:lang(da) {
color:blue;
}
</style>
</head>
<body>
<ul>
<li class="test">Text in list cu class 1 ...</li>

<li class="test" lang="da">Text in list cu class 2 ...</li>
<li class="test">Text in list cu class 3 ...</li>
</ul>
</body>
</html>
- Observati ca stilul definit pentru ".test:last-child" va fi aplicat doar ultimului element care
are clasa "test", iar "lang(da)" se aplica numai elementului care pe langa class="test" are si
lang="da".
- Rezultatul este acesta:
Text in list cu class 1 ...
Iata un alt exemplu in care sunt combinate o clasa (test), un selector (tag <i>) si "first-child":
<html>
<head>
.test i:first-child {
font-weight:bold
}
</style>
</head>
<body>
<p class="test"><i>Paragraf</i> cu mai multe tag-uri I: <i>text oblic</i>, alt test
<i>oblic</i></p>
<p class="test">Alt paragraf: <i>sir inclinat si bold</i>, alt sir <i>italic</i></p>
</body>
</html>
- Stilul CSS va fi aplicat primelor tag-uri <i> din fiecare clasa ".test", dupa cu puteti vedea
mai jos
Paragraf cu mai multe tag-uri I: text oblic, alt test oblic
Alt paragraf: sir inclinat si bold, alt sir italic
- Daca doriti ca stilul sa fie aplicat tuturor etichetelor <i> din prima clasa, scrieti:
.clasa:first-child i
- Daca vreti sa fie aplicat numai primului <i> din prima clasa, scrieti: .clasa:first-child
i:first-child
3. Pseudo-clase cu id-uri si elemente de formular
In CSS, id-urile fac referire la valoarea atributului ID si se scriu dupa caracterul #.

Iata un exemplu in care este folosita pseudo-clasa "hover" impreuna cu un ID, iar "focus"
impreuna cu o clasa (focus nu functioneaza pe versiuni de IE mai mici de 8)
<html>
<head>
#unid:hover {
background-color:#dadafe;
}
.test:focus {
background-color:#ededfe;
}
</style>
</head>
<body>
<form action="" method="post">
<input type="text" class="test" /><br />
<textarea cols="20" rows="5" class="test"></textarea><br />
<input type="button" value="Buton" id="unid" />
</form>
</body>
</html>
- Stilul CSS definit in acest exemplu face ca atunci cand mouse-ul se afla deasupra butonului
(care are id="unid") acesta sa isi schimbe culoarea de fundal, iar cand se da click pe zonele de
text din formular (care au class="test"), la fel se modifica culoarea background.
- Rezultatul este urmatorul formular.
Pseudo-elemente
Pseudo-elementele permit adaugarea de stiluri CSS anumitor parti din continutul unui
element HTML.
De exemplu, cand definiti un stil pentru un anumit tag HTML (sau pentru o clasa), tot
continutul incadrat de acel tag va avea acelasi stil, iar daca vreti sa adaugati un stil CSS
diferit primei litere sau primului rand dintr-un paragraf, se folosesc pseudo-elemente.
Sintaxa pentru utilizarea pseudo-elementelor este urmatoarea:
obiect_css:pseudo-element { proprietate:valoare; }
- unde "obiect_css" este un selector, id sau clasa, iar "pseudo-element" este una din expresiile
urmatoare:
after - Adauga continut dupa un element HTML (nu e suportat de

versiuni IE mai mici de 8)
before - Adauga continut inaintea unui element HTML (nu e suportat de

versiuni IE mai mici de 8)
first-letter - Adauga un stil css primului caracter dintr-un text
first-line - Adauga un stil primei linii dintr-un text
Ca sa intelegeti mai bine cum functioneaza si ce fac pseudo-elementele, iata

cateva exemple cu fiecare in parte.
1. after
Pentru a adauga un anumit continut (text, imagine, sunet .wav) prin CSS, se foloseste
proprietatea content si valoarea ce reprezinta continutul respectiv: text se adauga intre
ghilimele, iar imagine sau sunet .wav se adauga folosind ca valoare url(adresa_fisier)
In urmatorul exemplu va fi adaugat un continut text dupa fiecare element <h4>.
<html>
<head>
<title>Pseudo-elemente - Ex. 1</title>
h4:after {
content:"MarPlo";
color:blue;
}
</style>
</head>
<body>
<h4>Continutul din primul tag H4 ... </h4>
<h4>Un alt text din alt element H4</h4>
</body>
</html>
- Rezultatul va fi cel de jos.
- Observati cum este adaugat cuvantul "MarPlo", imediat dupa ultimul caracter al
fiecarui element <h4>, ca si cum ar face parte din textul initial, dar putand avea
stil propriu.
Continutul din primul tag H4 ... MarPlo
Un alt text din alt element H4MarPlo
- In loc de selector puteti folosi si ID sau clasa.
2. before
Before este similar cu "after", continutul se adauga la fel, dar la inceputul elementului.
Pentru o mai mare difersitate, puteti combina pseudo-clasele cu pseudo-elemente folosind
sintaxa:
obiect_css:pseudo-clasa:pseudo-element { proprietate:valoare; }
- Pseudo-clasele sunt explicate in lectia anterioara.

Ca sa vedeti efectul, iata un exemplu aplicat cu "before" acelorasi tag-uri H4 din exemplul
precedent.
<html>
<head>
h4:first-child:before {
content:"MarPlo- ";
color:blue;
}
</style>
</head>
<body>
<h4>Continutul din primul tag H4 ... </h4>
<h4>Un alt text din alt element H4</h4>
</body>
</html>
- De data aceasta continutul "MarPlo- " este adaugat imediat in fata si doar
primului element <h4> (precizat prin 'first-child'), dupa cum puteti vedea mai
jos:
MarPlo- Continutul din primul tag H4 ...
Un alt text din alt element H4
- Daca vreti sa adaugati in loc de continut text o imagine, de exemplu .gif, scrieti
codul CSS astfel: h4:first-child:before { content:url(imagine.gif); }
3. first-letter
First-letter aplica un stil CSS doar primului caracter dintr-un text.

In urmatorul exemplu este aplicat un stil CSS primului caracter din continutul fiecarui
element definit printr-o clasa "test".
<html>
<head>
.test:first-letter {
font-size:25px;
color:red;
}
</style>
</head>
<body>
<p class="test">Textul din paragraf ...</p>
<div class="test">Alt continut int-un tag DIV, dar cu aceeasi clasa.</div>
</body>
</html>
- Dupa cum puteti vedea in rezultatul de mai jos, prima litera din continutul
fiecarui tag ce are class="test" este de culoare rosie si marime 25px.
Textul din paragraf ...

Alt continut int-un tag DIV, dar cu aceeasi clasa.
4. first-line
First-line aplica un stil CSS doar primei linii din continutul elementului HTML.
Studiati exemplul urmator:
<html>
<head>
.test:first-line {
font-weight:bold;
color:blue;
}
</style>
</head>
<body>
<p class="test">Paragraf cu mai multe linii<br />
A doua linie ...<br />
Alta linie din acelasi paragraf.</p>
<div class="test">Continut pe doua linii intr-un tag DIV<br />
A doua linie din DIV.</div>
</body>
</html>
- Rezultatul este urmatorul, comform codului CSS, prima linie din fiecare element
cu class="test" are textul albastru si ingrosat.
Paragraf cu mai multe linii

A doua linie ...
Alta linie din acelasi paragraf.
Continut pe doua linii intr-un tag DIV

A doua linie din DIV.
Creare Meniu Dublu cu CSS
Meniu Orizontal-Vertical
In acest tutorial puteti invata cum sa creati Meniu Dublu cu CSS (orizontal si vertical).
Meniu dublu inseamna ca lista meniului contine inca un Meniu cu alte link-uri (denumit si
Sub-Meniu).
In general, Meniurile sunt create folosind tag-urile <ul> (sau <ol>) si <li> tags.
- Presupunand ca deja stiti CSS si HTML, aplicati /adaptati codurile prezentate mai jos,
personalizandu-le si cu alte elemente CSS, dupa cum doriti sa creati designul (colturi
rotunjite, imagini pt. fundal, etc.).
Meniu Vertical Dublu

Meniul vertical este de obicei adaugat in marginile laterale ale paginii.
Iata un exemplu simplu (mutati cursorul mouse-ului pe el):
Pagina personala
+ Tutorialle CSS
+ Tutoriale HTML
Contact
- Codul HTML si CSS de mai jos creaza acest meniu (Proprietatile CSS trebuie adaugate in
zona <head>, sau intr-un fisier ".css"):
<style><!-#menuv {
width:200px;
border:1px solid blue;
background-color:#daedfe;
padding:2px;
}
/* Proprietati pentru primul nivel din meniul vertical */

#menuv li {
margin:1px 0;
background-color:#f0f1fe;
padding:1px;
list-style-type:none;
font-weight:600;
text-align:left;
}
#menuv li a {
display:block;
margin:0;
font-weight:normal;
}
#menuv li a:hover {
background-color:#fefefe;
font-style:oblique;
}
/* Proprietati pentru nivelul doi din meniul vertical */
#menuv li:hover ul {
display:block;
}
#menuv li ul {
display:none;
position:relative;
margin:-1px 0 -2px 0;
padding:1px 0;
}
#menuv li ul li {
margin:2px 0 0 20px;
background-color:#edfeed;
padding:1px 0;
border:1px dotted yellow;
}
--></style>
<ul id="menuv">
<li><a href="/" title="Pagina personala">Pagina personala</a></li>
<li> + Tutorialle CSS
<ul>
<li><a href="http://www.marplo.net/curs_css/css3-background-proprietatinoi.html" title="CSS3 - Background proprietati">CSS3 - Background
proprietati</a></li>
<li><a href="http://www.marplo.net/curs_css/css3-opacity.html"
title="CSS3 opacity">CSS3 opacity</a></li>
</ul>
</li>
<li> + Tutoriale HTML
<ul>
<li><a href="http://www.marplo.net/html/tutorial-html5.html"
title="Tutorial HTML5">Tutorial HTML5</a></li>
<li><a href="http://www.marplo.net/html/html5-canvas.html" title="HTML5
canvas">HTML5 canvas</a></li>
<li><a href="http://www.marplo.net/html/html5-taguri-noi.html"
title="HTML5 tag-uri noi">HTML5 tag-uri noi</a></li>
</ul>
</li>
<li><a href="http://www.marplo.net/coment/contact.php"
title="Contact">Contact</a></li>
</ul>
- "Smecheria" la acest Meniu este acest cod (ceea ce face a doua lista UL vizibila cand
mouse-ul e deasupra listei LI parinte):
display:block;
}
O alta varianta de meniu vertical dublu:

Pagina personala
+ Tutorialle CSS
+ Tutoriale HTML
Contact
- Codul CSS si HTML pt. acest meniu:
<style><!-#menuv {
position:relative;
width:160px;
padding:2px;
}
/* Proprietati pentru primul nivel din meniul vertical */

#menuv li {
margin:1px 0;
padding:1px;
font-weight:600;
text-align:left;
}
#menuv li a, #menuv li span {
display:block;
margin:0;
font-weight:normal;
}
#menuv li a:hover {
font-style:oblique;
}
/* Proprietati pentru nivelul doi din meniul vertical */
display:block;
}
#menuv li ul {
display:none;
position:absolute;
z-index:9998;
width:100%;
left:151px;
margin:-20px auto 0 auto;
border:1px dashed blue;
padding:1px;
}
#menuv li ul li {
margin:1px;
padding:1px 0 1px 2px;
}
--></style>
<ul id="menuv">
<li><span> + Tutorialle CSS</span>
<ul>
</ul>
</li>
<li><span> + Tutoriale HTML</span>
<ul>
</ul>
</li>
</ul>
- Sub-meniul (#menuv li ul) trebuie sa aibe urmatoarele proprietati CSS, ca sa-l ascunda si sa
nu afecteze celelalte liste cand e descoperit (proprietatea z-index:9998; il face sa fie afisat
peste celelalte liste).
display:none;
position:absolute;
z-index:9998;
- In codul CSS al acestui Meniu este important ca selectorul #menu sa aibe definita
proprietatea "position" (relative, absolute). Aceasta e necesar ca sa functioneze z-index:9998;
(in #menuv li ul) in Internet Explorer.
Meniu Orizontal-Vertical
Meniul orizontal-vertical este un meniu cu lista afisata pe o linie orizontala, iar fiecare lista
poate sa contina un alt meniu cu liste verticale, care este initial ascuns, si afisat cand mouseul e pe textul /imaginea din lista orizontala.
- Demonstratie (mutati cursorul mouse-ului peste Menu):
Pagina personala
Tutorialle CSS
Tutoriale HTML
Contact
- Codul sursa:
<style><!-#menuv {
position:relative;
padding:2px;
}
/* Proprietati pentru lista orizontala */
#menuv li {
float:left;
margin:1px 8px;
padding:1px 2px;
font-weight:600;
text-align:left;
text-decoration:nderline;
}
/* Proprietati pentru listele verticale */
display:block;
}
#menuv li ul {
display:none;
position:absolute;
margin:1px auto 1px -8px;
border:1px dashed blue;
padding:1px;
}
#menuv li ul li {
position:relative;
clear:both;
width:99%;
margin:1px 0;
border:none;
padding:1px;
}
/* Link-uri in sub-menu */
#menuv ul li a {
display:block;
margin:0;
font-weight:normal;
padding:1px;
}
#menuv ul li a:hover {
font-style:oblique;
}
--></style>
<ul id="menuv">
<li>Tutorialle CSS
<ul>

</ul>
</li>
<li>Tutoriale HTML
<ul>
</ul>
</li>
</ul>
In codul CSS al acestui Meniu sunt importante urmatoarele proprietati:

- #menuv li trebuie sa contina aceasta proprietate ca sa aseze listele pe linie orizontala:
float:left;
- Sub-meniul (#menuv li ul) trebuie sa aibe aceste proprietati CSS, ca sa-l ascunda si sa nu
afecteze celelalte liste cand e afisat.
display:none;
position:absolute;
- Listele din sub-meniu (#menuv li ul li) trebuie sa aibe aceste proprietati CSS, care anleaza
efectul lui: float:left; mostenit de la lista LI parinte, si sa aibe o lungime corespunzatoare:
position:relative;
clear:both;
width:99%;
Butoane pentru link-uri folosind o singura

imagine si CSS
O singura imagine pt meniu cu mai multe link-uri
Fiecare imagine care trebuie incarcata in pagina necesita o cerere de la browser catre server si
asteptarea raspunsului, astfel, daca aveti un meniu cu 5 link-uri cu imagine, pentru a face ca
pagina sa se incarce mai repede, e bine sa folositi un singur fisier cu imagini /butoane , nu 15
fisiere (5 * 3).
Acest tutorial arata cum se poate utiliza o singura imagine si CSS pentru toate cele trei stari
ale unui buton /link: normal, hover (mouse-ul deasupra), si active (cand se apasa clic). De
asemenea, cum se poate folosi o singura imagine pentru mai multe link-uri intr-un meniu.
Este simplu, ideea este ca desenele butonului pt cele 3 stari sa fie simetric asezate in imagine,
vertical: top, center, bottom (sus, centru, jos); sau orizontal: left, center, right (stanga, centru,
dreapta). Este indicat ca inaltimea imaginii (sau lungimea, in functie de cum sunt pozitionate
butoanele in imagine) sa se imparta exact la 3.
Apoi, in CSS setati proprietatile width si height ale link-ului cu aceeasi valoare ca lungimea
si inaltimea butonului desenat in imagine.
Daca butoanele pt starile link-ului (normal, hover, active) sunt desenate vertical, precum
acestea:
Setati proprietatea CSS background-position cu aceste perechi de valori: 0, 0; 0, 50%; si 0,

100% (sau: top, center, bottom); pt fiecare conditie (normal, hover, active). Folosind valori in
procente, ofera un control mai bun al pozitionarii.
- Iata un exemplu (lungimea imaginii exte 125 pixeli, inaltimea 120 pixeli; cu butoanele
desenate vertical. Inaltimea butonului /link-ului este 40px):
<!doctype html>
<html lang="en">
<head>
<title>Exemplu link /buton folosind o singura imagine si CSS</title>
<style type="text/css"><!-#addnew {
width: 125px;
height: 40px;
display: block;
background: url('button_img1.gif');
background-position: 0 0;
background-repeat: no-repeat;
border: none;
text-indent: -9999px;
/* Sa nu se afiseze textul din link */
}
/* Cand cursorul de mouse e deasupra butonului */
#addnew:hover {
background-position: 0 50%;
}
/* Cand butonul /link-ul e apasat */
#addnew:active {
}
//-->
</style>
</head>
<body>
<a href="http://www.coursesweb.net/" title="Web Programming Courses"
id="addnew">CoursesWeb.net</a>
</body>
</html>
Rezultat (pozitionati cursorul de mouse pe buton, apoi tineti apasat clic ca sa vedeti starea
"active"):
CoursesWeb.net
Daca butoanele pt starile link-ului (normal, hover, active) sunt desenate orizontal, precum
acestea:
- Setati proprietatea CSS background-position cu aceste perechi de valori: 0, 0; 50% 0; si

100% 0 (sau: left, center, right); pt fiecare conditie (normal, hover, active).
- Iata un exemplu cu butoanele desenate orizontal:
<!doctype html>
<html lang="en">
<head>
<title>Exemplu link /buton folosind o singura imagine si CSS</title>
<style type="text/css"><!-#addnew {
width: 125px;
height: 40px;
display: block;
background: url('button_img2.gif');
}
/* Cand cursorul de mouse e deasupra butonului */
#addnew:hover {
background-position: 50% 0;
}
/* Cand butonul /link-ul e apasat */
#addnew:active {
}
//-->
</style>
</head>
<body>
<a href="http://www.marplo.net/" title="Cursuri Jocuri Anime"
id="addnew">MarPlo.net</a>
</body>
</html>
Rezultat:
MarPlo.net
O singura imagine pt meniu cu mai multe link-uri

In mod similar se poate folosi o singura imagine cu butoane pt un meniu cu mai multe linkuri. Trucul este sa desenati butoanele simetric, apoi definiti proprietatea CSS backgroundposition in functie de pozitia butoanelor in imagine, folosind procente ce reprezinta distanta
fata de coltul stanga-sus, perechea de valori: stanga, sus (poate fi necesar sa testati mai multe
valori pana obtineti afisarea cea mai buna a fiecarui buton).
- Iata un exemplu, Meniu cu 4 link-uri folosind aceasta imagine:
<style type="text/css"><!-/* Seteaza imaginea pt butoanele din link-uri si proprietatile comune in

#menu */
#menu a {
width: 125px;
height: 40px;
display: block;
background: url('buttons.gif');
}
/* Butonul din imagine pt Primul link */
#menu #addnew {
}
/* Primul link hover */
#menu #addnew:hover {
}
/* Primul link cand e apasat */
#menu #addnew:active {
}
/* Butonul din imagine pt al Doilea link */
#menu #delete {
}
/* al Doilea link hover */
#menu #delete:hover {
background-position: 48% 32%;
}
/* al Doilea link cand e apasat */
#menu #delete:active {
}
/* Butonul din imagine pt al Treilea link */
#menu #accept {
}
/* al Treilea link hover */
#menu #accept:hover {
}
/* al Treilea link cand e apasat */
#menu #accept:active {
}
/* Butonul din imagine pt al patrulea link */
#menu #cancel {
}
/* al patrulea link hover */
#menu #cancel:hover {
}
/* al patrulea link cand e apasat */
#menu #cancel:active {
}
//-->
</style>
<nav id="menu">
<a href="#" title="Add New" id="addnew">Add New</a>
<a href="#" title="Delete" id="delete">Delete</a>
<a href="#" title="Accept" id="accept">Accept</a>
<a href="#" title="Cancel" id="cancel">Cancel</a>
</nav>
Rezultat (pozitionati cursorul de mouse pe buton, apoi tineti apasat clic ca sa vedeti starea
"active"):
Add New Delete Accept Cancel
CSS3 - Background proprietati noi
Culoare Gradient
background-origin
background-clip
CSS3 Imagini multiple de fundal
CSS3 contine trei proprietati noi pt. background: background-size, background-origin, si

background-clip, de asemenea, puteti adauga mai multe imagini pentru fundalul unui
element, si chiar sa folositi culori gradient, cu linear-gradient.
background-size
Proprietatea background-size permite determinarea marimii imaginii de background. Astfel,
puteti folosi aceeasi imagine in mai multe elemente cu dimensiuni diferite.
- Valori (puteti specifica dimensiunile in pixeli (px) sau in procente (%)):
auto - e valoarea predefinita (default). Redimensioneaza laturile imaginii astfel incat

se mentine aspectul imaginii, daca ambele valori sunt auto, imaginea apare la
dimensiunile ei.
procente - Redimensioneaza lungimea si inaltimea pozei pt. background, in procente

relative la elementul parinte (nu la imagine). Prima valoare reprezinta lungimea, a
doua inaltimea.
Daca se specifica numai o valoare, cealalta e setata "auto".
pixeli - Redimensioneaza lungimea si inaltimea la marimile specificate.

Daca se specifica numai o valoare, cealalta e setata "auto".
cover - Poza pt. background e marita (sau micsorata) astfel incat sa acopere toata
suprafata de fundal.
contain - Poza pt. background e marita (sau micsorata) astfel incat sa fie cuprinsa in
zona de continut.
Proprietatea background-size e recunoscuta in IE9+, Firefox 4+, Opera, Chrome, si Safari 5+.
- Exemplu:
<style type="text/css"><!-#id1 {
width:200px;
height:100px;
background:url('css3.jpg');
background-size:100px 60px;
background-repeat:no-repeat;
}
#id2 {
width:300px;
height:120px;
border:1px solid #01da02;
background-size:contain;
}
#id3 {
width:300px;
height:120px;
border:1px solid silver;
background-size:cover;
}
--></style>
<div id="id1">Curs CSS gratuit - dimensiuni in pixeli</div>
<div id="id2">www.coursesweb.net - valoare contain</div>
<div id="id3">www.marplo.net - valoare cover</div>
Rezultat:
Curs CSS gratuit - dimensiuni in pixeli
www.coursesweb.net - valoare contain

www.marplo.net - valoare cover
Culoare Gradient
Proprietatea background poate primi o valoare speciala care defineste o culoare gradient.
Sintaxa pentru codul ce defineste gradient-ul difera de la un browser la altul, de aceea trebuie
specificata pentru fiecare din navigatoarele web majore, dupa cum se vede in exemplul
urmator.
width:300px;
height:120px;
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#dafeda',
endColorstr='#0308fe');
/* IE 7, 8 */
background-image: -ms-linear-gradient(top left, #01fe02, #0102fe);
/*
IE10 */
background: -moz-linear-gradient(top left, #1f1, #fff, #11f);
/*
Mozilla Firefox */
/* Safari, Chrome */
background-image: -webkit-gradient(linear, left top, right bottom, colorstop(0, #0f1), color-stop(0.5, #fff), color-stop(1, #01f));
background-image: -o-linear-gradient(top left, #01fe02, #0102fe);
/* Opera 11.1+ */
background: linear-gradient(top left, #1f1, #fff, #11f);
/* W3C
Markup */
}
--></style>
<div id="id1">Curs gratuit CSS<br />
www.marplo.net</div>
Rezultat:
Curs gratuit CSS
www.marplo.net
Directia culori gradient si distanta pe care culorile o iau poate fi controlata.
Daca doriti ca directia gradient-ului sa inceapa de sus, folositi doar top, in loc de "top left";
pentru stanga adaugati doar left. Ca sa setati distanta culorii in gradient, adaugati o valoare de
tip procent dupa culoare (sau o valoare intre 0 si 1 pt. browsere Webkit).
- Exemplu:
width:300px;
height:120px;
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#dafeda',
endColorstr='#0308fe');
/* IE 7, 8 */
background-image: -ms-linear-gradient(top, #01fe02 0%, #0102fe

99%);
/* IE10 */
background: -moz-linear-gradient(top, #1f1 0%, #fff 65%, #11f 99%);
/* Mozilla Firefox */
/* Safari, Chrome */
background-image: -webkit-gradient(linear, left top, left bottom, colorstop(0, #0f1), color-stop(0.6, #fff), color-stop(1, #01f));
background-image: -o-linear-gradient(top, #01fe02 0%, #0102fe 99%);
/* Opera 11.1+ */
background: linear-gradient(top, #1f1 0%, #fff 65%, #11f 99%);
/*
W3C Markup */
}
--></style>
background-origin
Proprietatea background-origin specifica zona de pozitionare a imaginii in background. Poate
lua trei valori diferite:
padding-box - pozitia e relativa la coltul din stanga-sus unde incepe padding.
border-box - pozitia e relativa la coltul din stanga-sus a bordurii.
content-box - imaginea pt. background e pozitionata de la coltul stanga-sus unde

incepe continutul.
background-origin e recunoscut in IE9+, Firefox 4+, Opera, Chrome, si Safari 5+.

- Exemplu:
width:350px;
height:120px;
padding:20px;
background-color:#bcfede;
background-origin:content-box;
}
#id2 {
width:350px;
height:120px;
padding:20px;
background-color:#bcfede;
background-origin:border-box;
}
--></style>
<div id="id1">Pozitioneaza imaginea in background incepand de la
continut</div>
<div id="id2">Pozitionare relativa la bordura</div>
Rezultat:
Pozitioneaza imaginea in background incepand de la continut

Pozitionare relativa la bordura
background-clip
Proprietatea background-clip specifica zona de colorare a fundalului, e folosita pentru a
determina daca background-ul se extinde sau nu pana in margini.
Primeste una din aceste trei valori:
border-box - culoarea de fundal se extinde pana in margini.
padding-box - culoarea de fundal e fixata la padding.
content-box - culoarea de fundal e fixata la zona continutului.
background-clip e recunoscut in IE9+, Firefox 4+, Opera, si Chrome.

Exemplu:
width:350px;
height:120px;
padding:20px;
background-color:#cdfeda;
background-clip:padding-box;
-webkit-background-clip:padding-box;
}
#id2 {
width:350px;
height:120px;
padding:20px;
background-color:#cdfeda;
background-clip:content-box;
-webkit-background-clip:content-box;
}
--></style>
/* Safari */
/* Safari */
<div id="id1">background-clip cu padding-box</div>

<div id="id2">background-clip cu content-box</div>
Rezultat:
background-clip cu padding-box
background-clip cu content-box
CSS3 Imagini multiple de fundal

CSS3 permite aplicarea mai multor imagini de background la un element.
Aceasta caracteristica e suportata in Firefox 3.6+, IE 9, Safari, si WebKit.
Imaginile multiple pentru background se adauga in proprietatea background-image separate
prin virgula (imaginea specificata mai la inceput apare mai in fata).
Valorile din celelalte proprietati legate de poze pt. fundal se adauga in ordinea si numarul
imaginilor din background-image, sau doar o singura valoare pentru toate.
- Exemplu:
width:400px;
height:150px;
background-image: url('html_course.jpg'), url('css3.jpg');
background-repeat: no-repeat, repeat-x;
background-position: center top, center bottom;
}
--></style>
<div id="id1">Imagini multiple de background</div>
Rezultat:
Imagini multiple de background
CSS3 - Border proprietati noi
Adaugare umbre la chenare
CSS3 Imagine pentru bordura
CSS3 contine caracteristici noi care permit crearea de colturi rotunjite, umbre la chenare si
folosirea unei imagini pentru aspectul bordurii.
CSS3 Colturi rotunjite

Proprietatea border-radius permite crearea cu usurinta a colturilor rotunjite in designul
elementelor, fara a fi nevoie de imagini sau mai multe tag-uri <div>.
Internet Explorer suporta border-radius incepand cu IE9, dar puteti folosi libraria de functii
JavaScript DD_roundies ca sa afisati colturi rotunjite in navigatoare web care nu recunosc
aceasta proprietate CSS; vedeti tutorialul Colturi rotunjite in Internet Explorer.
Exemplu:
width:300px;
height:120px;
border-radius:28px;
}
--></style>
<div id="id1"> Curs CSS - www.marplo.net</div>
Rezultat:
Curs CSS - www.marplo.net
Colturile rotunjite pot fi create si independent, folosind cele patru proprietati individuale:
border-top-left-radius, border-top-right-radius, border-bottom-right-radius, si border-bottomleft-radius.
Exemplu:
width:300px;
height:120px;
background-color:#bbfeda;
border-top-left-radius:20px;
border-bottom-right-radius:38px;
}
--></style>
<div id="id1"> Curs CSS - www.marplo.net</div>
Rezultat:
Curs CSS - www.marplo.net
Adaugare umbre la chenare

Proprietatea box-shadow se foloseste pentru a adauga umbre la chenare. Este recunoscuta in
IE9+, Firefox 4, Chrome, si Opera.
box-shadow are urmatoarea sintaxa:
elm { box-shadow: X_offset Y_offset blur marime culoare inset; }
- elm - este elementul HTML la care se aplica aceasta proprietate.

- X_offset - este pozitia /distanta umbrei pe latura orizontala. Sunt permise si valori negative.
- Y_offset - este pozitia /distanta umbrei pe latura verticala. Sunt permise si valori negative.
- blur - defineste distanta "blur" (optionala, 0 sau nespecificata inseamna fara "blur").
- marime - marimea umbrei (optionala).
- culoare - culoarea umbrei (optionala, negru daca nu e specificata).
- inset - schimba umbra din exterior sa apara in interior.
Primele doua valori trebuie adaugate, restul sunt optionale. Daca "blur" sau marime nu sunt
specificate, se considera 0.
Exemplu:
width:300px;
height:120px;
background-color:#bbfeda;
box-shadow: 11px 11px 5px #7878da;
-webkit-box-shadow: 11px 11px 5px #7878da;
}
--></style>
/* Safari si Chrome */
<div id="id1"> CSS3 box-shadow, www.coursesweb.net/css/</div>
Rezultat:
CSS3 Imagine pentru bordura
Cu proprietatea border-image se poate folosi o imagine pentru aspectul bordurii.

Aceasta se obtine prin impartirea zonei bordurii in noua segmente, reprezentand cele patru
colturi, cele patru laturi si centrul (dupa cum se vede in imaginea de mai jos). Se foloseste un
singur fisier cu imaginea, impartit similar in cele noua segmente care vor reprezenta colturile,
laturile si centrul.
box-shadow are urmatoarea sintaxa:
elm { border-image: url_img slice width outset repeat; }
- url_img - adresa si numele imaginii folosita pt. bordura.

- slice - specifica distanta pentru zona din imagine folosita in cele patru margini.
- width - lungimea bordurii cu imaginea.
- outset - specifica distanta fata de marginea chenarului, de unde incepe bordura cu imagine.
- repeat - specifica daca partea de imagine trebuie repetata, rotunjita ca incadrare, sau intinsa
(poate avea aceste valori: stretch, repeat, round).
border-image nu e recunoscut in Internet Explorer.
Firefox foloseste proprietatea -moz-border-image.
Safari si Chrome suporta -webkit-border-image.
Pentru a afisa cum trebuie border-image, trebuie sa specificati si proprietatea border-width.
In exemplul urmator se foloseste aceasta imagine:
width:200px;
height:120px;
border-width:12px;
-moz-border-image:url('border_image.png') 30 30 round;
/* Firefox */
-webkit-border-image:url('border_image.png') 30 30 round; /* Safari and
Chrome */
border-image:url('border_image.png') 30 30 round;
}
#id2 {
width:200px;
height:120px;
border-width:15px;
-moz-border-image:url('border_image.png') 30 30 stretch;
/* Firefox */
-webkit-border-image:url('border_image.png') 30 30 stretch; /* Safari and
Chrome */
border-image:url('border_image.png') 30 30 stretch;
}
--></style>
<div id="id1"> CSS3 border-image, with round</div><br />
<div id="id2"> CSS3 border-image, with stretch</div>
Rezultat:
CSS3 - text-shadow, word-wrap, textoverflow

CSS3 introduce noi proprietati pentru efecte de text, dar multe dintre ele nu sunt inca
recunoscute de principalele navigatoare web. In aceasta lectie sunt prezentate cele care sunt
mai bine acceptate: text-shadow, word-wrap, and text-overflow.
CSS3 text-shadow
Proprietatea text-shadow introdusa in CSS3 permite adaugarea unui efect de umbra care sa
fie aplicat la textul dintr-un element HTML. Umbra apare in jurul literelor.
Sintaxa:
text-shadow: offset_X offset_Y blur culoare;
- offset_X - specifica pozitia umbrei pe orizontala. Sunt permise si valori negative.

- offset_Y - specifica pozitia umbrei pe verticala. Sunt permise si valori negative.
- blur - defineste distanta pentru valoarea "blur" (optional).
- culoare - defineste culoarea umbrei (optional). Daca nu e specificata, se foloseste negru.
text-shadow e recunoscut in principalele browsere, cu exceptia Internet Explore. Dar
incepand cu versiunea 8 a Internet Explorer puteti folosi o proprietate filter pentru a crea
efecte de umbra pt. text si in IE.
Sintaxa:
filter:progid:DXImageTransform.Microsoft.Shadow(color=val, direction=val,
strength=val);
- color - specifica culoarea umbrei.

- direction - poate avea una din aceste valori numerice: 0=top, 45=top right, 90=right,
135=bottom right, 180=bottom, 225=bottom left, 315=top left.
- strength - reprezinta cantitatea de "blur".
Exemplu:
<style type="text/css"><!-h2 {
/* pt. IE8+ */
filter:progid:DXImageTransform.Microsoft.Shadow(color=#a0a1fe,
direction=135, strength=5);
text-shadow: 2px 3px 3px #a0a1fe;
}
--></style>
<h2>Text cu text-shadow</h2>
Rezultat:
Text cu text-shadow
Se pot adauga mai multe umbre la acelasi text, prin adaugarea mai multor liste de umbre in
proprietatea text-shadow, separate prin virgula.
Urmatorul cod amesteca o culoare verde cu una albastra ca sa creeze un efect de umbra cu
aceste culori:
<style type="text/css"><!-h2 {
/* pt. IE8+ */
filter:progid:DXImageTransform.Microsoft.Shadow(color=#a0a0fe,
direction=135, strength=5);
text-shadow: -1px -1px 1px rgba(110,235,155,0.2), 2px 3px
rgba(0,0,181,0.2);
}
--></style>
<h2>Text cu doua culori pt. text-shadow</h2>
- Observati ca s-a folosit formula rgba(Rosu, Verde, Albastru, Alpha) la definirea culorii,
adaugand si transparenta (Alpha) in acelasi timp.
Rezultat:
Text cu doua culori pt. text-shadow

CSS3 word-wrap
Cu word-wrap puteti determina browser-ul sa rupa cuvintele lungi, cand acestea depasesc
lungimea elementului, trecand pe un rand nou.
Sintaxa:
word-wrap: valoare;
"valoare" poate fi:

- normal - Nu rupe cuvintele intregi (valoarea prestabilita).
- break-word - Permite ruperea cuvintelor intregi. Cuvintele sunt rupte la nivel de caracter,
nu in silabe.
Exemplu:
width:100px;
word-wrap:break-word;
}
--></style>
<div id="id1">Curs CSS gratuit - word-wrap un_cuvant_mai_lung.</div>
Rezultat:
Curs CSS gratuit - word-wrap un_cuvant_mai_lung.
CSS3 text-overflow
Cu proprietatea text-overflow puteti determina ce sa se intample cu textul, cand acesta
depaseste lungimea elementului.
text-overflow este suportat in majoritatea navigatoarelor web, in afara de Firefox.
Sintaxa:
text-overflow: valoare;
"valoare" poate fi:

- clip - taie textul (valoarea prestabilita).
- ellipsis - afiseaza trei-puncte ("") in locul textului taiat.
In general, proprietatea text-overflow se foloseste impreuna cu white-space:nowrap; si
overflow:hidden;.
Exemplu:
width:230px;
white-space:nowrap;
overflow:hidden;
/* "overflow" valoarea trebuie sa fie diferita de
"visible" */
text-overflow:ellipsis;
}
#id2 {
width:230px;
border:1px solid green;
white-space:nowrap;
overflow:hidden;
text-overflow:clip;
}
--></style>
<div id="id1">CSS Tutorial - un text lung pe o singura linie, alte
cuvinte.</div>
<div id="id2">Site web www.marplo.net - alt text lung intr-un singur
rand.</div>
Rezultat:
CSS Tutorial - un text lung pe o singura linie, alte cuvinte.
Site web www.marplo.net - alt text lung intr-un
CSS3 opacity
Proprietatea opacity seteaza nivelul de opacitate al unui element HTML, opacity permite
modificarea transparentei elementului.
IE8 si versiuni anterioare folosesc o varianta alternativa, proprietatea filter.
- Sintaxa:
filter: alpha(opacity=X);
opacity: X;
/* pt. IE */
- X - reprezinta o valoare intre 0 (complet transparent) si 1.0 (fara transparenta).

1) Exemplu, un <div> cu o transparenta CSS de 40%:
<style type="text/css"><!-#dv {
background-color:blue;
width:200px;
height:100px;
filter:alpha(opacity=40);
opacity:0.4;
}
--></style>
/* pt. IE */
<div id="dv">Un continut oarecare ...</div>
Rezultat:
Un continut oarecare ...
2) Exemplu, seteaza opacitate 50% la o imagine:
<style type="text/css"><!-#im {
opacity:0.5;
}
--></style>
/* pt. IE */
<img src="html_course.jpg" alt="Curs HTML si CSS" width="155" height="160"

id="im" />
Rezultat:
3) Exemplu, efect imagine transparenta 50%, iar la mouseover 100%:

<style type="text/css"><!-#im2 {
opacity:0.5;
}
#im2:hover {
opacity:1;
}
--></style>
/* pt. IE */
/* pt. IE */
<img src="html_course.jpg" alt="Curs HTML si CSS" width="155" height="160"

id="im2" />
Rezultat (pozitionati mouse-ul peste imaginea de mai jos):
4) Continut intr-un DIV care la mouseover este acoperit cu un alt <div> transparent (DIV-ul
transparent trebuie sa fie gol, adaugat in primul, si setat cu: position:absolute;):
<style type="text/css"><!-#trans {
display:none;
position:absolute;
top:2%;
left:2%;
width:96%;
height:95%;
/* pt. IE */
opacity:0.5;
}
#cnt {
position:relative;
background:#e7e8fe;
width:300px;
height:200px;
padding:20px;
}
#cnt:hover #trans { display:block; }
--></style>
<div id="cnt">
<div id="trans"></div>
Plasati mouse-ul peste aceasta caseta pentru a vedea efectul de opacitate.
<img src="css3.jpg" alt="CSS3 opacity" width="160" height="98" />
</div>
Rezultat:
Plasati mouse-ul peste aceasta caseta pentru a vedea efectul de opacitate.
CSS3 transformari 2D
CSS rotate()
Metoda scale()
CSS skew()
Cu proprietatea CSS transform se poate modifica forma, marimea si pozitia elementelor

HTML.
Se pot transforma elementele HTML in plan 2D sau 3D.
- Sintaxa:
transform: metoda(valori);
- Acest tutorial prezinta metodele de transformare in plan 2D: translate(), rotate(),

scale(), skew() .
Internet Explorer 9 foloseste: -ms-transform .
Firefox foloseste: -moz-transform .
Chrome si Safari folosesc: -webkit-transform .
Opera foloseste: -o-transform .
Metoda translate()
Metoda translate() muta elementul de la pozitia initiala, in functie de parametri dati pentru
pozitionare de la Stanga (axa-X) si de Sus (axa-Y) .
- Sintaxa:
transform: translate(X, Y);
Exemplu. Cand utilizatorul plaseaza cursorul mouse-ului pe un anumit Div, ii muta pozitia cu
20 pixeli de la stanga si 15 pixeli din partea de sus.
#idv {
width:90px;
height:90px;
background:#b0b1fe;
font-size:17px;
}
#idv:hover {
transform: translate(20px, 15px);
-ms-transform: translate(20px, 15px); /* IE 9 */
-webkit-transform: translate(20px, 15px); /* Safari si Chrome */
-o-transform: translate(20px, 15px); /* Opera */
-moz-transform: translate(20px, 15px); /* Firefox */
}
</style>
<div id="idv">Pozitionati mouse-ul aici.</div>
Demo:
Pozitionati mouse-ul aici.
CSS rotate()
Metoda rotate() roteste elementul HTML, in sensul orelor de ceas daca valoarea e pozitiva, in
sens invers orelor de ceas daca valoarea e negativa.
- Sintaxa:
transform: rotate(grade);
Exemplu. Roteste element cu 60 grade in sensul orelor de ceas.

#idv2 {
width:90px;
height:90px;
background:#b0b1fe;
font-size:17px;
}
#idv2:hover {
transform: rotate(60deg);
-ms-transform: rotate(60deg); /* IE 9 */
-webkit-transform: rotate(60deg); /* Safari si Chrome */
-o-transform: rotate(60deg); /* Opera */
-moz-transform: rotate(60deg); /* Firefox */
}
</style>
<div id="idv2">Pozitionati mouse-ul aici.</div>
Demo:
Metoda scale()
Metoda scale() mareste sau micsoreaza marimea elementului HTML (inclusiv continutul din
el), in functie de parametri pentru Lungime (axa-X) si Inaltime (axa-Y).
- Sintaxa:
transform: scale(Lungime, Inaltime);
- Valorile pentru Lungime si Inaltime sunt in procente. De exemplu, 1.5 inseamna 150% din
marimea originala.
Exemplu. Transforma lungimea sa fie de 2 ori marimea originala, si inaltimea 1.5 ori
inaltimea originala.
#idv3 {
width:90px;
height:90px;
background:#b0b1fe;
font-size:17px;
}
#idv3:hover {
transform: scale(2, 1.5);
-ms-transform: scale(2, 1.5); /* IE 9 */
-webkit-transform: scale(2, 1.5); /* Safari si Chrome */
-o-transform: scale(2, 1.5); /* Opera */
-moz-transform: scale(2, 1.5); /* Firefox */
}
</style>
<div id="idv3">Pozitionati mouse-ul aici.</div>
Demo:
CSS skew()
Metoda skew() distorsioneaza elementul HTML pe orizontala (axa-X) si verticala (axa-Y),
incluzand si continutul din el.
- Sintaxa:
transform: skew(Xdeg, Ydeg);
Exemplu. Distorsioneaza elementul 20 grade pe lungime (axa-X) si 25 grade pe verticala

(axa-Y).
#idv4 {
width:160px;
height:90px;
background:#abcdfe;
font-size:18px;
transform: skew(20deg, 25deg);
-ms-transform: skew(20deg, 25deg); /* IE 9 */
-webkit-transform: skew(20deg, 25deg); /* Safari si Chrome */
-o-transform: skew(20deg, 25deg); /* Opera */
-moz-transform: skew(20deg, 25deg); /* Firefox */
}
</style>
<div id="idv4">www.coursesweb.net</div>
Demo:
www.coursesweb.net
Cele 4 metode de transformare pot fi utilizate si intr-o singura definitie transform, separate
prin spatiu.
- Sintaxa:
transform: translate(X, Y) rotate(grade) scale(Lungime, Inaltime)
skew(Xdeg, Ydeg);
- Puteti adauga doar acele metode pe care doriti sa le folositi in transformare.

Exemplu, muta elementul cu 50 pixeli de la stanga si 25 pixeli din partea de sus, il roteste cu
20 grade in sens invers orelor de ceas, transforma lungimea de 2 ori cea originala si inaltimea
1.5 ori, distorsioneaza elementul cu 15 grade pe orizontala si 20 grade pe verticala.
#idv5 {
width:90px;
height:90px;
background:#00da01;
font-size:17px;
transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg,
20deg);
-ms-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5)
skew(15deg, 20deg); /* IE 9 */
-webkit-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5)

skew(15deg, 20deg); /* Safari si Chrome */
-o-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5)
skew(15deg, 20deg); /* Opera */
-moz-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5)
skew(15deg, 20deg); /* Firefox */
}
</style>
<div id="idv5">Continut oarecare...</div>
Demo:
Continut oarecare...
CSS3 transition
CSS3 transition poate fi utilizat pentru a anima proprietatile CSS, adaugand un efect de
animatie cand se modifica proprietatile CSS ale unui element HTML, schimband gradual de
la un stil la altut.
CSS3 transition are 4 componente:
transition-property - Specifica numele proprietatii (sau proprietatilor) la care

transition trebuie aplicat (precum: width, color, font-size, etc.).
CSS3 transition poate fi utilizat cu proprietatile prezentate aici: Proprietati CSS ce
pot fi animate
transition-duration - Specifica durata tranzitiei (animatiei), in sesunde (s),

milisecunde (ms), (implicit 0).
transition-timing-function - Defineste tipul vitezei efectului in timpul transformarii:

ease (implicit), linear, ease-in, ease-out, ease-in-out
transition-delay - Defineste timpul de asteptare pana cand incepe efectul "transition"

(implicit 0)
Pentru a folosi CSS3 transition, trebuie specificate aceste doua lucruri:

1. Proprietatea CSS la care se aplica efectul ( transition-property ).
2. Durata efectului ( transition-duration ).
- Ultimele doua componente ( transition-timing-function si transition-delay ) sunt optionale.
- Internet Explorer recunoaste "CSS3 transition" incepand cu IE 10.
Exemplu. Cand mouse-ul e deasupra unui anumit Div, se schimba gradual lungimea.
#iddv {
width:80px;
height:80px;
background:#b8b9fe;
font-size:17px;
transition-property: width;
transition-duration: 1.4s;
/* Firefox 4 */
-moz-transition-property: width;
-moz-transition-duration: 1.4s;
-webkit-transition-property: width;
-webkit-transition-duration: 1.4s;
/* Opera */
-o-transition-property: background-color, color;
-o-transition-duration: 1.4s;
}
#iddv:hover {
width:200px;
}
</style>
<div id="iddv">Pozitionati mouse-ul pe acest patrat.</div>
Demo (Cand cursorul mouse-ului iese din zona elementului, revine gradual la stilul initial):
Pozitionati mouse-ul pe acest patrat.
Proprietatea transition prescurtata

Se pot adauga toate cele 4 componente intr-o singura proprietate transition.
Sintaxa:
transition: transition-property transition-duration transition-timingfunction transition-delay;
Exemplu: Schimba gradual "font-size" (in 0.4 secunde, cu viteza "ease-out") cand mouse-ul e
deasupra unui element cu class="clse".
.clse {
width:150px;
font-size:13px;
transition: font-size 0.4s ease-out;
-moz-transition: font-size 0.4s ease-out; /* Firefox 4 */
-webkit-transition: font-size 0.4s ease-out; /* Safari si Chrome */
-o-transition: font-size 0.4s ease-out; /* Opera */
}
.clse:hover {
font-size: 16px;
}
</style>
<ul>
<li class="clse"><a href="http://www.marplo.net/curs_css/" title="Curs CSS
gratuit">Curs CSS gratuit</a></li>
<li class="clse"><a href="http://www.marplo.net/html/" title="Curs
HTML">Curs HTML</a></li>
<li class="clse"><a href="http://www.coursesweb.net/" title="Cursuri
Programare Web">Cursuri Programare Web</a></li>
</ul>
Demo {plasati cursorul deasupra fiecarui link}:
Curs CSS gratuit
Curs HTML
Cursuri Programare Web
Se pot adauga mai multe proprietati pt efect "transition" intr-o singura definitie, separate
prin virgula.
Exemplu. Adaugare efect la: background, opacity si transform:
.dv1 {
width:115px;
height:100px;
position:relative;
font-size:17px;
text-align:center;
padding-top:18px;
}
.clsdv {
width:120px;
height:100px;
position:absolute;
top:0;
left:0;
background:#b8b9fe;
transition: background 1.3s, opacity 1.8s, transform 1.4s;
-moz-transition: background 1.3s, opacity 1.8s, -moz-transform 1.4s; /*
Firefox 4 */
-webkit-transition: background 1.3s, opacity 1.8s, -webkit-transform 1.4s;
-o-transition: background 1.3s, opacity 1.8s, -o-transform 1.4s; /*
Opera */
}
.clsdv:hover {
background: #00da01;
/* pt IE */
opacity:0.5;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari si Chrome */
-o-transform:rotate(180deg); /* Opera */
}
</style>
Puneti mouse-ul deasupra acestui dreptunghi.
<div class="dv1">
<div class="clsdv"></div>
Text oarecare, ascuns
</div>
Demo:
Puneti mouse-ul deasupra acestui dreptunghi.
Text oarecare, ascuns
Proprietati CSS ce pot fi animate
Lista cu proprietati CSS care pot fi utilizate in transition:

- Proprietati pt text: color, font-size, font-weight, letter-spacing, line-height, text-indent,
text-shadow, vertical-align, word-spacing.
- Proprietati pt elemente tip bloc: background, background-color, background-image,
background-position, border-left-color etc., border-spacing, border-left-width etc., clip, crop,
height, min-height, max-height, margin-left etc., opacity, outline-width, outline-offset,
outline-color, padding-left etc., width, min-width, max-width.
- Proprietati de pozitionare: bottom, top, left, right, grid-, visibility, z-index, zoom .
Stiluri si Coduri CSS /CSS3

Coduri CSS / CSS3 utile creatorilor de pagini web pentru a crea diferite forme si stiluri la
elemente HTML, pt designul paginii.
1. Forma Trapez
2. Forma de Romb cu CSS
3. Triunghiuri
4. Cerc si Oval
5. Poligoane (Paralelogram, Pentagon, Hexagon, Octogon)
6. Forme Stea (cu 5, 6, 8 si 12 varfuri)
7. Butoane
8. Diamant
9. Ecran TV
10. Clepsidra
11. Ou cu CSS
12. Yin-Yang
13. Inima cu CSS
14. Alte forme complexe cu DIV si CSS (Prezentare Mesaj, Infinit, Insigna Panglica,
Blazon, Vapor)
15.
Forma Trapez cu CSS
16. Forma trapez cu un tag DIV si proprietati CSS. Forma de trapez e creaata folosind
bordurile.
Cod:
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
#trapezoid {
height: 0;
width: 120px;
border-bottom: 80px solid #05ed08;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
padding: 0 8px 0 0;
}
</style>
<div id="trapezoid"><br/>Curs CSS:<br/>
www.MarPlo.net</div>
30. Rezultat:
31.
Curs CSS:
www.MarPlo.net
32.
33.Trapez dreptunghic
34. Cod:
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
#rtrapezoid {
height: 0;
width: 120px;
border-left: 15px solid #05ed08;
padding-right: 20px;
}
</style>
<div id="rtrapezoid"><br/>Curs CSS:<br/>
www.CoursesWeb.net</div>
48. Rezultat:
49.
Curs CSS:
www.CoursesWeb.net
50.
Forma Romb cu CSS
51. Forma de romb cu un tag DIV si proprietati CSS. Forma de romb e creaata folosind
bordurile.
Cod:
52. <style type="text/css">
53. #rhombus {
54.
position: relative;
55.
top: -60px;
56.
width: 0;
57.
height: 0;
58.
border: 60px solid transparent;
59.
60. }
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
/* Zona de jos */
#rhombus:after {
position: absolute;
left: -60px;
top: 75px;
width: 0;
height: 0;
border-top: 75px solid #05ed08;
content: '';
}
/* Continut in romb */
#rhombus div {
position: relative;
margin: 63px auto 0 -41px;
font-weight: bold;
z-index: 888;
}
</style>
<div id="rhombus"><div>MarPlo</div></div>
84. Rezultat:
85. MarPlo
86.
Triunghiuri cu CSS
87. Triunghi in jos

Triunghi stanga
Triunghi stanga-sus Triunghi dreapta-sus
Triunghi jos-dreapta
Triunghi dreapta
Triunghi jos-stanga
Mai multe triunghiuri cu CSS, create doar cu un tag DIV si cateva proprietati CSS.
88.Triunghi in sus
89. Cod:
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
#triangleup {
width: 0;
height: 0;
border-bottom: 100px solid blue;
}
</style>
<div id="triangleup"><br/><br/><br/>>Sus</div>
101.
102.
Rezultat:
Sus
103.
104.
105.
106.
107.
108.
109.
Triunghi in jos
Cod:
#triangledown {
width: 0;
height: 0;
110.
111.
112.
113.
114.
115.
116.
117.

border-top: 100px solid blue;
}
/* Continut in triunghi */
#triangledown div{ margin:-85px 0 0 -20px; }
</style>
<div id="triangledown"><div>JOS</div></div>
118.
119.
Rezultat:
JOS
120.
Triunghi stanga
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
Cod:
#triangleleft {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 100px solid blue;
}
#triangleleft div{ margin:-10px 0 0 25px; }
</style>
<div id="triangleleft"><div>Stanga</div></div>
135.
136.
Rezultat:
Stanga
137.
Triunghi dreapta
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
Cod:
#triangleright {
width: 0;
height: 0;
border-left: 100px solid blue;
}
#triangleright div{ margin:-10px 0 0 -85px; }
</style>
<div id="triangleright"><div>Dreapta</div></div>
152.
153.
Rezultat:
Dreapta
154.
Triunghi stanga-sus
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
Cod:
#triangletopleft {
width: 0;
height: 0;
}
</style>
<div id="triangletopleft">...</div>
Rezultat:
...
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
Triunghi dreapta-sus
Cod:
#triangletopright {
width: 0;
height: 0;
}
</style>
<div id="triangletopright">...</div>
181.
182.
183.
Rezultat:
...
184.
Triunghi jos-stanga
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
Cod:
#trianglebottomleft {
width: 0;
height: 0;
}
</style>
<div id="trianglebottomleft">...</div>
196.
197.
Rezultat:
...
198.
Triunghi jos-dreapta
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
Cod:
#trianglebottomright {
width: 0;
height: 0;
}
</style>
<div id="trianglebottomright">...</div>
Rezultat:
...
212. Cerc si Oval cu CSS

213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
Cerc si Oval create cu un singur tag HTML (DIV) si cateva proprietati CSS.
Cerc
#circle {
width: 180px;
height: 180px;
background: #abcdef;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
padding:15px;
224. }
225. </style>
226.
227. <div id="circle"><br/><br/>Cursuri online:<br/>MarPlo.net</div>
228.
229.
Rezultat:
Cursuri online:
MarPlo.net
230.
Forma Ovala
231.
- Raza trebuie sa fie jumatate din lungime si inaltime, la care se adauga
valoarea padding-ului (in acest exemplu: (240 / 2) + 15 = 135, si (120 / 2) + 15 = 75).
233. #oval {
234. width: 240px;
235. height: 120px;
236. background: #89f899;
237. -moz-border-radius: 135px / 75px;
238. -webkit-border-radius: 135px / 75px;
239. border-radius: 135px / 75px;padding:15px;
240. }
241. </style>
242.
243. <div id="oval"><br/>Cursuri Programare
Web:<br/>http://CoursesWeb.net</div>
244.
Rezultat:
245.
Cursuri Programare Web:
http://CoursesWeb.net
246. Poligoane cu CSS

247.
Pentagon
Hexagon
Octogon
Cateva forme de poligoane, create doar cu un singur tag DIV si proprietati CSS.
248.
Paralelogram
249.
- Continutul din paralelogram e distorsionat in functie de forma
paralelogramului.
Cod:
251. #parallelogram{
252. margin:5px 0 5px 20px;
253. width: 150px;
254. height: 100px;
255. -webkit-transform: skew(20deg);
256. -moz-transform: skew(20deg);
257. -o-transform: skew(20deg);
258. background: #abcdef;
259. }
260. </style>
261.
262. <div id="parallelogram">Cursuri Jocuri
Anime<br/>www.MarPlo.net</div>
263.
Rezultat:
264.
Cursuri Jocuri Anime
www.MarPlo.net
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
Pentagon
Cod:
#pentagon {
margin:70px 0 5px 20px;
position: relative;
width: 110px;
border-width: 100px 36px 0;
border-style: solid;
border-color: #abefcd transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -170px;
left: -36px;
border-width: 0 90px 70px;
border-color: transparent transparent #abefcd;
}
/* Content in pentagon */
#pentagon div{
position:absolute;
top:-50px;
}
</style>
<div id="pentagon"><div>MarPlo.net</div></div>
296.
297.
Rezultat:
MarPlo.net
298.
Hexagon
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
318.
319.
320.
321.
Cod:
#hexagon {
width: 100px;
height: 55px;
background: #cdabef;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-bottom: 25px solid #cdabef;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px; left: 0;
322.
323.
324.
325.
326.
327.
328.
329.
330.
width: 0;
height: 0;
border-top: 25px solid #cdabef;
}
</style>
<div id="hexagon">MarPlo.net</div>
331.
332.
333.
Rezultat:
334.
Octogon
335.
MarPlo.net
Cod:
336.
337.
338.
339.
340.
341.
342.
343.
344.
345.
346.
347.
348.
349.
350.
351.
352.
353.
354.
355.
356.
357.
358.
359.
360.
361.
362.
363.
364.
365.
366.
367.
#octagon {
width: 100px;
height: 100px;
background: #a0e8a1;
position: relative;
}
#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid #a0e8a1;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid #a0e8a1;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
</style>
<div id="octagon"></div>
368. Forme Stea cu CSS

369.
Stea 6 varfuri
Stea 8 varfuri
Stea 12 varfuri
Forme Stea, 5, 6, 8 si 12 varfuri, create doar cu un tag DIV si proprietati CSS.
370.
Stea 5 varfuri
371.
Cod:

373. /* http://css-tricks.com/examples/ShapesOfCSS/ */
374. #star5 {
375.
376.
377.
378.
379.
380.
381.
382.
383.
384.
385.
386.
387.
388.
389.
390.
391.
392.
393.
394.
395.
396.
397.
398.
399.
400.
401.
402.
403.
404.
405.
406.
407.
408.
409.
410.
411.
412.
413.
414.
415.
416.
417.
418.
419.
420.
421.
margin: 50px 0;
position: relative;
display: block;
width: 0px;
height: 0px;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star5:before {
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content:"";
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star5:after {
position: absolute;
display: block;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
-o-transform: rotate(-70deg); content:"";
}
</style>
<div id="star5"></div>
422.
Rezultat:
423.
Stea 6 varfuri
424.
425.
426.
427.
428.
429.
430.
431.
432.
433.
434.
Cod:
#star6 {
width: 0;
height: 0;
position: relative;
}
#star6:after {
435.
436.
437.
438.
439.
440.
441.
442.
443.
444.
445.
446.
447.
width: 0;
height: 0;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
</style>
448.
Rezultat:
449.
Stea 8 varfuri
450.
451.
452.
453.
454.
455.
456.
457.
458.
459.
460.
461.
462.
463.
464.
465.
466.
467.
468.
469.
470.
471.
472.
473.
474.
475.
476.
Cod:
#star8 {
background: blue; width: 80px;
height: 80px;
position: relative;
-o-transform: rotate(20eg);
}
#star8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: blue;
}
</style>
477.
478.
Rezultat:
479.
Stea 12 varfuri
480.
481.
482.
483.
484.
485.
486.
487.
488.
489.
490.
491.
492.
493.
Cod:
#star12 {
background: blue;
width: 80px;
height: 80px;
position: relative;
}
#star12:before, #star12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
494.
495.
496.
497.
498.
499.
500.
501.
502.
503.
504.
505.
506.
507.
508.
509.
510.
511.
width: 80px;
background: blue;
}
#star12:before {
}
#star12:after {
}
</style>
512.
513.
Rezultat:
514. Butoane cu CSS

515.
Buton Pulse
Buton Rotunjit Stanga
Buton Inima-Sageata
Buton 3D-Umbra
Buton Rotunjit Dreapta
Butoane cu CSS, create numai cu proprietati CSS / CSS3, fara a folosi fisier cu
imagine.
516.
517.
518.
519.
520.
521.
522.
523.
524.
525.
526.
527.
528.
529.
530.
531.
532.
533.
534.
535.
536.
537.
538.
539.
540.
541.
542.
543.
544.
545.
Buton Simplu
.buttons {
display: inline-block;
background-color: #ddd;
border: 1px solid #444;
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
padding: 6px 10px;
font-weight: bold;
}
.buttons:link, .buttons:visited, .buttons:hover, .buttons:active {
text-decoration: none;
color: #00f;
}
.buttons:hover {
background-color:
background-image:
background-image:
background-image:
background-image:
color: yellow;
#BBB;
-webkit-linear-gradient(top, #DDD, #AAA);
-moz-linear-gradient(top, #DDD, #AAA);
-o-linear-gradient(top, #DDD, #AAA);
linear-gradient(top, #DDD, #AAA);
546. }
547.
548. .buttons:active { background: #CCC; }
549. </style>
550.
551. <a href="http://www.coursesweb.net" title="Cursuri Programare Web
Development" class="buttons">www.CoursesWeb.net</a>
552. <a href="http://www.marplo.net/curs_css/" title="Curs CSS"
class="buttons">Curs CSS</a>
553.
554.
555.
556.
557.
558.
559.
560.
561.
562.
563.
564.
565.
566.
567.
568.
569.
570.
571.
572.
573.
574.
575.
576.
577.
578.
579.
580.
581.
582.
583.
584.
585.
586.
587.
588.
589.
590.
591.
592.
593.
594.
595.
596.
597.
598.
599.
600.
601.
602.
603.
Rezultat:
www.CoursesWeb.net Curs CSS
Buton Pulse
.buttons {
border-radius: 8px;
padding: 6px 10px;
font-weight: bold;
}
.buttons:link, .buttons:visited, .buttons:hover, .buttons:active {
text-decoration: none;
color: #00f;
-webkit-animation: "pulse" 1s ease-in-out 0 infinite alternate;
-moz-animation: "pulse" 1s ease-in-out 0 infinite alternate;
animation: "pulse" 1s ease-in-out 0 infinite alternate;
box-shadow: 0px 0px 4px #00ACE6;
}
@-webkit-keyframes pulse {
0% { box-shadow: 0px 0px 4px #00ACE6; }
}
@-moz-keyframes pulse {
}
@keyframes pulse {
}
.buttons:hover {
background-color: #BBB;
background-image: -webkit-linear-gradient(top, #DDD, #AAA);
background-image: -moz-linear-gradient(top, #DDD, #AAA);
background-image: -o-linear-gradient(top, #DDD, #AAA);
background-image: linear-gradient(top, #DDD, #AAA);
'box-shadow: 0px 0px 4px #0001E6;'
604. color: yellow;

605. }
606.
607. .buttons:active { background: #CCC; }
608. </style>
609.
611. <a href="http://www.marplo.net/ajax/" title="Curs Ajax"
class="buttons">Curs Ajax</a>
612.
613.
Rezultat:
www.CoursesWeb.net Curs Ajax
614.
Buton 3D-Umbra

616. /* http://www.marplo.net/curs_css/ */
617. .buttons {
618. -moz-text-blink: none;
619. -moz-text-decoration-color: -moz-use-text-color;
620. -moz-text-decoration-line: none;
621. -moz-text-decoration-style: solid;
622. background-color: #FEFEFE;
623. border-bottom-left-radius: 8px;
624. border-bottom-right-radius: 8px;
625. border-top-left-radius: 8px;
626. border-top-right-radius: 8px;
627. box-shadow: 2px 3px 4px #6789DA inset;
628. color: red;
629. margin-bottom: 1px;
630. margin-left: 5px;
631. margin-right: 5px;
632. margin-top: 1px;
633. padding-bottom: 2px;
634. padding-left: 8px;
635. padding-right: 8px;
636. padding-top: 2px;
637. }
638. .buttons:hover {
639. -moz-text-blink: none;
640. -moz-text-decoration-color: -moz-use-text-color;
641. -moz-text-decoration-line: underline;
642. -moz-text-decoration-style: solid;
643. background-attachment: scroll;
644. background-clip: border-box;
645. background-color: yellow;
646. background-image: none;
647. background-origin: padding-box;
648. background-position: 0 0;
649. background-repeat: repeat;
650. background-size: auto auto;
651. box-shadow: 2px 3px 4px #A0A0DA;
652. color: #0408FE;
653. }
654. </style>
655.
658.
659.
Rezultat:
www.CoursesWeb.net Curs CSS
660.
Buton Rotunjit Stanga

662. .buttons {
663. display: inline-block;
664. background-color: #ddd;
665. border: 1px solid #444;
666. background-image: -webkit-linear-gradient(top, #eee, #ccc);
667. background-image: -moz-linear-gradient(top, #eee, #ccc);
668. background-image: -o-linear-gradient(top, #eee, #ccc);
669. background-image: linear-gradient(top, #eee, #ccc);
670. border-radius: 10px;
671. -moz-border-radius: 10px;
672. -webkit-border-radius: 10px;
673. -khtml-border-radius: 10px;
674. padding: 6px 10px;
675. font-weight: bold;
676. }
677.
678. .buttons:link, .buttons:visited, .buttons:hover, .buttons:active {
679. background-color: #007EBD;
680. background-image: -webkit-linear-gradient(top, #00A0F0, #007EBD);
681. background-image: -moz-linear-gradient(top, #00A0F0, #007EBD);
682. background-image: -o-linear-gradient(top, #00A0F0, #007EBD);
683. background-image: linear-gradient(top, #00A0F0, #007EBD);
684. border-color: #0000CC;
685. color: #FFF;
686. border-top-right-radius: 0;
687. border-bottom-right-radius: 0;
688. margin-right: 0;
689. border-right-width: 0;
690. }
691.
693. background-color: #08aded;
694. background-image: -webkit-linear-gradient(top, #00A0F0, #08aded);
695. background-image: -moz-linear-gradient(top, #00A0F0, #08aded);
696. background-image: -o-linear-gradient(top, #00A0F0, #08aded);
697. background-image: linear-gradient(top, #00A0F0, #08aded);
698. text-decoration: none;
699. color: #ff1;
700. }
701.
702. .buttons:active { background: #007EBD; }
703. </style>
704.
705. <a href="http://www.marplo.net/html/" title="Curs HTML"
class="buttons">Curs HTML</a>
707.
708.
709.
710.
711.
712.
713.
714.
715.
716.
717.
Rezultat:
Curs HTML Curs CSS
Buton Rotunjit Dreapta

.buttons {
718. background-image: linear-gradient(top, #eee, #ccc);

719. border-radius: 10px;
720. -moz-border-radius: 10px;
721. -webkit-border-radius: 10px;
722. -khtml-border-radius: 10px;
723. padding: 6px 10px;
724. font-weight: bold;
725. }
726.
728. background-color: #8cc99e;
729. background-image: -webkit-linear-gradient(top, #66CC33, #8cc99e);
730. background-image: -moz-linear-gradient(top, #66CC33, #8cc99e);
731. background-image: -o-linear-gradient(top, #66CC33, #8cc99e);
732. background-image: linear-gradient(top, #66CC33, #8cc99e);
734. color: #FFF;
735. border-top-left-radius: 0;
736. border-bottom-left-radius: 0;
737. margin-left: 0;
738. border-left-width: 0;
739. }
740.
742. background-color: #08A009;
743. background-image: -webkit-linear-gradient(top, #66CC33, #08A009);
744. background-image: -moz-linear-gradient(top, #66CC33, #08A009);
745. background-image: -o-linear-gradient(top, #66CC33, #08A009);
746. background-image: linear-gradient(top, #66CC33, #08A009);
748. color: #ff1;
749. }
750.
751. .buttons:active { background: #08A009; }
752. </style>
753.
754. <a href="http://www.marplo.net/html/" title="Curs HTML"
class="buttons">Curs HTML</a>
756.
757.
758.
759.
760.
761.
762.
763.
764.
765.
766.
767.
768.
769.
770.
771.
772.
773.
774.
775.
Rezultat:
Curs HTML Curs CSS
Buton Inima-Sageata
.buttons {
border-radius: 10px;
padding: 6px 10px;
font-weight: bold;
}

777. background-color: #007EBD;
778. background-image: -webkit-linear-gradient(top, #00A0F0, #007EBD);
779. background-image: -moz-linear-gradient(top, #00A0F0, #007EBD);
780. background-image: -o-linear-gradient(top, #00A0F0, #007EBD);
781. background-image: linear-gradient(top, #00A0F0, #007EBD);
783. color: #FFF;
784. border-top-right-radius: 0;
785. border-bottom-right-radius: 0;
786. margin-right: 0;
787. border-right-width: 0;
788. }
789.
791. background-color: #08aded;
792. background-image: -webkit-linear-gradient(top, #00A0F0, #08aded);
793. background-image: -moz-linear-gradient(top, #00A0F0, #08aded);
794. background-image: -o-linear-gradient(top, #00A0F0, #08aded);
795. background-image: linear-gradient(top, #00A0F0, #08aded);
797. color: #ff1;
798. }
799.
800. .buttons:active { background: #5CB82E; }
801.
802. .buttons:after {
803. content: "\2192";
804. margin-left: 5px;
805. }
806.
807. .buttons:before {
808. content: "\2665";
809. margin-right: 5px;
810. }
811. </style>
812.
813. <a href="http://www.marplo.net/" title="Cursuri Jocuri Anime"
class="buttons">www.MarPlo.net</a>
814. <a href="http://www.coursesweb.net/javascript/" title="JavaScript
Courses" class="buttons">JavaScript Course</a>
815.
816.
Rezultat:
www.MarPlo.net JavaScript Course
Diamant cu CSS
Doua forme tip diamant, create simplu cu un tag DIV si cateva proprietati CSS.
Cod:
#diamond {
width: 0;
height: 0;
position: relative;
top: -50px;
}
#diamond:after {
content: "";
position: absolute;
left: -50px;
top: 20px;
width: 0;
height: 0;
}
</style>
<div id="diamond"></div>
Rezultat:
Diamant 2
Cod:
#diamond {
border-color: transparent transparent #0809fe transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 10px 0;
}
#diamond:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-color: #0809fe transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
</style>
<div id="diamond"></div>
Rezultat:
Ecran TV cu CSS
Forma ecran TV creat doar cu un tag DIV si cateva proprietati CSS.
Cod:
#tvscreen {
position: relative;
width: 200px;
height: 150px;
margin: 20px 10px;
background: #0809fe;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
#tvscreen:before {
content: "";
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
</style>
<div id="tvscreen">MarPlo.net</div>
Rezultat:
MarPlo.net
Forma tip Clepsidra cu CSS

Forma tip Clepsidra creat cu un tag DIV si cateva proprietati CSS.
Cod:
#clepsydra {
height: 0;
width: 120px;
border-radius: 25%;
-moz-border-radius: 25%;
-webkit-border-radius: 25%;
-khtml-border-radius: 25%;
}
</style>
<div id="clepsydra">Cursuri Online:<br/>marplo.net</div>
Rezultat:
Forma de Ou cu CSS
Forma de Ou creat cu un tag DIV si cateva proprietati CSS (fara fisier cu imagine).
Cod:
/* http://css-tricks.com/examples/ShapesOfCSS/ */
#egg {
display:block;
width: 180px;
height: 240px;
background-color: #09fb09;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
/* Continut in egg */
#eggsp div {
position:absolute;
padding:89px 2px 2px 9px;
}
</style>
<div id="egg"><div>Cursuri Online<br/>www.marplo.net</div></div></div>
Rezultat:
Yin-Yang cu CSS
Cerc Yin-Yang creat cu un tag DIV si proprietati CSS (fara fisier cu imagine).
Cod:
#yinyang {
width: 100px; height: 50px;
background: #fff;
border-color: #000;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yinyang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #fff;
border-radius: 100%;
width: 14px;
height: 14px;
}
#yinyang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #000;
border: 18px solid #fff;
border-radius:100%;
width: 14px;
height: 14px;
}
</style>
<div id="yinyang"></div>
Rezultat:
Forma Inima cu CSS
Forma de Inima creata cu un tag DIV si proprietati CSS (fara fisier cu imagine).
Cod:
#heartsp {
position: relative;
width: 100px;
height: 90px;
}
#heartsp:before, #heartsp:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heartsp:after {
left: 0;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
</style>
<div id="heartsp"></div>
Alte forme complexe cu DIV si CSS

Prezentare Mesaj
Insigna Panglica
Vapor
Infinit
Blazon
Cateva forme complexe create doar cu un singur DIV si proprietati CSS, fara a folosi
fisier cu imagine.
Forma 1
Cod:
/* http://www.marplo.net/curs_css/ */
#shp1 {
height: 0;
width: 170px;
background: #b1b0fb;
position: relative;
border-bottom: 110px solid #08fb09;
padding:0 3px;
}
#shp1:before {
content: "";
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-bottom: 28px solid #b1b0fb;
position: absolute;
bottom: 0;
left: -14px;
}
#shp1:after {
content: "";
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-bottom: 28px solid #b1b0fb;
position: absolute;
bottom: 0;
right: -14px;
}
</style>
<div id="shp1"><br/>Cursuri Online:<br/>http://www.marplo.net/</div>
Rezultat:
Cursuri Online:
http://www.marplo.net
Prezentare Mesaj
Cod:
/* http://css-tricks.com/examples/ShapesOfCSS/ */
#talkbubble {
margin: 10px 25px;
width: 200px;
height: 89px;
background: #05fb08;
position: relative;
-webkit-border-radius:
14px; border-radius: 14px;
padding: 2px 5px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 28px;
width: 0;
height: 0;
border-right: 26px solid #05fb08;
}
</style>
<div id="talkbubble"><br/>Cursuri Online:<br/>http://www.marplo.net/</div>
Rezultat:
Cursuri Online:
http://www.marplo.net
Insigna Panglica
Cod:
#badgeribbon {
position: relative;
background: #08fb09;
height: 100px;
width: 100px;
border-radius: 50px;
padding: 2px;
text-align: center;
}
#badgeribbon:before, #badgeribbon:after {
content: "";
position: absolute;
margin-top: 8px;
border-bottom: 70px solid #01fb02;
top: 70px; left: -5px;
}
#badgeribbon:after {
left: auto;
right: -5px;
}
</style>
<div id="badgeribbon"><br/>MarPlo</div>
Rezultat:
MarPlo
Infinit
Cod:
#infinity {
position: relative;
width: 212px;
height: 100px;
}
#infinity:before, #infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
}
</style>
<div id="infinity"></div>
Rezultat:
Blazon
Cod:
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin: 6px auto;
height: 60px;
width: 200px;
}
#chevron:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: #efabcd;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
#chevron:after {
content: "";
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: #efabcd;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
</style>
<div id="chevron"></div>
Rezultat:
CSS polygon
Vapor
Cod:
#ship {
margin:30px 0 5px 20px;
position: relative;
width: 200px;
border-width: 50px 28px 0;
border-color: #ccddef transparent;
font-weight: bold;
}
#ship:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -15px;
border-width: 0 45px 35px;
border-color: transparent transparent #bbcdef;
}
/* Content */
#ship div{
position:absolute;
top:-30px;
}
</style>
<div id="ship"><div>www.CoursesWeb.net</div></div>
Demo:
Introducere
(PHP - Hypertext Preprocessor)
Limbajul PHP a fost creat in anul 1994 de catre Rasmus Lerdorf, care incerca sa-si
personalizeze propria pagina Web; din acest motiv limbajul a fost numit initial PHP adica:
Personal Home Page (pagina de baza personala). Ulterior limbajul a fost perfectionat,
utilitatea si caracteristicile sale s-au dezvoltat treptat, ajungand sa aiba semnificatia Hypertext
Preprprocesor (PHP). Preprocesarea consta in aceea ca datele sunt interpretate(preprocesate)
de catre serverul Web inainte ca acesta sa genereze cod HTML.
PHP este una dintre cele mai interesante tehnologii pentru site-uri si programare web, imbina
caracteristici dintre cele mai complexe cu simplitatea n utilizare. PHP a devenit un
instrument de frunte pentru dezvoltarea aplicatiilor Web. Spre deosebire de alte instrumente
pentru aplicatii Web, cum este Perl, PHP este un limbaj de programare comod pentru
ncepatori, chiar si pentru cei care nu au mai desfasurat activitati de programare.
Daca sunteti un cunoscator al limbajului HTML, dar nu aveti experienta n materie de
programare, va puteti pune ntrebarea: care sunt functionalitatile suplimentare pe care le
poate asigura cunoasterea limbajului PHP? Ca si alte limbaje de scripting pentru Web, PHP
va permite sa furnizati un continut Web dinamic, adica un continut Web care se modifica
automat de la o zi la alta sau chiar de la un minut la altul. Continutul Web este un element
important n sustinerea traficului unui sit Web; de regula, vizitatorii nu vor mai reveni la o
pagina Web care contine aceleasi informatii ca si cele prezentate la ultima vizita. Pe de alta
parte, siturile Web frecvent actualizate pot atrage cantitati enorme de trafic.
Mai mult, spre deosebire de limbajele de scripting, precum JavaScript, PHP ruleaza pe
serverul Web, nu n navigatorulul Web. n consecinta, PHP poate obtine accesul la fisiere,
baze de date si alte resurse inaccesibile programului JavaScript. Acestea constituie bogate
surse de continut dinamic, care atrag vizitatorii. In plus, putem folosi limbajul PHP pentru a
generera cod Java Script.
Secventele de cod PHP pot fi incluse intr-un fisier HTML; ulterior serverul Web va identifica
aceasta secventa de cod , va procesa acesta secventa de cod generand cod HTML iar la final
va inlocui secventa de cod PHP cu codul HTML.
Printre caracteristicile cele mai importante ale imbajului enumeram:
- simplicitate : acest limbaj este simplu de folosit, fiind accesibil si ne-programatorilor.
Datorita acestui fapt el a devenit cel mai popular limbaj de script pentru generarea de pagini
HTML dinamice.
- usor de folosit : limbajul are o sintaxa asemanatoare limbajului C, care este foarte
popular in randul programatorilor. De aceea programatorii care au cunostine de C sau Perl
vor face foarte rapid trecerea spre PHP. Pe de alta parte anumite aspecte cum ar fi: declararea
si folosirea variabilelor este mult simplificata in PHP, spre deosebire de C++ sau alte limbaje
de nivel inalt.
- eficienta : specificatiile limbajului includ folositea tehnicilor de POO (Programare

orientata pe obiecte) iar acest lucru contribuie la marirea productivitatii: un programator PHP
poate folosi module scrise de un alt programator fara sa fie nevoit sa cunoasca detalii
specifice de implementare a codului.
- cross-platform : exista implementari ale limbajului pe mai multe sisteme de operare,
cele mai populare fiind cele de pe sistemele Linux si Windows. In acest caz daca scriem cod
PHP care ruleaza pe un sistem Linux, ulterior vom putea folosi acest cod pe un server care
ruleaza Windows si viceversa.
- gratis : PHP reprezinta un program Open Source, oricine poate folosi acest limbaj fara
a fi nevoit sa plateasca ceva. De asemenea utilizatorii au access la sursele PHP (scrise in
limbajul C). Site-ul oficial al limbajului PHP se afla la : www.php.net , datorita popularitatii
acestui limbaj exista numeroase site-uri Web care prezinta informatii despre PHP, exemple de
cod, forum de discutii , etc.
Acest curs de initiere in PHP si MySQL este menit a prezenta elemente introductive de
programare si dezvoltare a paginilor web folosind PHP. Este important sa retineti ca nu
reprezinta decat un punct de plecare cu lectii si tutoriale php introductive. Dezvoltarea Web
este o activitate solicitanta, iar viitorul dezvoltator Web trebuie sa dispuna de multe abilitati,
printre care si pe aceea de programator. Dezvoltatorii Web ncepatori vor gasi n aceast curs
un prim pas util si amical n activitatea de programare n PHP.
Scrierea scripturilor PHP elementare
Invatati sa creati un script PHP cu cele mai simple instructiuni PHP
Invatati sa documentati si sa executati un script PHP
Un script PHP poate fi foarte simplu sau foarte complex. Totusi, scrierea chiar si a unui script
PHP complex este relativ simpla, necesitand doar un editor de texte obisnuit. In aceasta lectie
veti invata modul de creare si de executare a programelor PHP, veti invata sa creati scripturi
PHP simple, care afiseaza in navigatorul web un text simplu. De asemenea, veti invata sa va
documentati scripturile, astfel incat dumneavoastra si alte persoane sa puteti intelege rapid
scopul si structura acestora.
Mai intai trebuie sa instalati un server web (Apache) si modulul pt. limbajul PHP, acestea
sunt gratuite, le puteti gasi pe net si instala pe fiecare, dar pentru incepatori e recomandat un
program care le are deja configurate (si cu MySQL), precum WampServer, sau sa incarcati
scriptul pe un server web unde este instalat PHP.

Daca nu aveti deja instalat PHP, descarcati de aici -> WampServer, dezarhivati si instalati
programul. (cand este pornit, veti observa o iconita specifica in colltul cu ceasul).
Fisierele .php in care veti scrie scripturile trebuie sa le salvati in directorul www din "wamp",
apoi, ca sa le testati scrieti in browser adresa http://localhost/fisier.php
1. Scrierea scripturilor PHP
Pentru a crea scripturi PHP, majoritatea programatorilor PHP folosesc un editor de texte
obisnuit. Puteti folosi orice editor de texte doriti. Sub Microsoft Windows puteti utiliza
programul Windows Notepad. Daca preferati, puteti folosi editoare specializate, gen
Notepad++. Totusi, trebuie sa tineti cont sa fie un editor de text ce salveaza fisierele cu
format text obisnuit simplu.
Daca folositi UNIX sau Linux, puteti crea scripturi PHP folosind un program precum "vi",
"emacs" sau "pico".
Programul in sine nu conteaza, atata vreme cat poate crea fisiere text ASCII.
Nota : - Unele editoare de texte, precum "Notepad++" sau "vi", asigura un suport special
pentru scrierea programelor PHP. De exemplu, au o caracteristica de colorare a elementelor
de sintaxa ce determina scrierea diferitelor elemente ale codului PHP in culori diferite.
Procedeul de colorare a elementelor de sintaxa faciliteaza depistarea erorilor din programele
proprii.
2. Scrierea scheletului programelor PHP
Fiecare program PHP include doua linii speciale, care indica serverului PHP ca textul cuprins
intre cele doua linii este alcatuit din instructiuni PHP. Practic, aceste linii pot fi asimilate
copertelor unei carti, care pastreaza unitatea programului dumneavoastra PHP. Intre aceste
doua linii vor fi scrise instructiunile PHP. Pentru a incepe sa scrieti un program PHP,
deschideti editorul dumneavoastra de texte si introduceti urmatoarele doua linii :
<?php
?>
- Acesta este un cod de inceput si nu afiseaza nimic.
Apoi, salvati scriptul dumneavoastra sub forma de fisier text, in directorul "www" din
"wamp", cu un nume care respecta urmatoarele reguli:
Este recomandat ca numele fisierului sa fie alcatuit numai din caractere

minuscule, cifre si liniute. Utilizarea de spatii, majuscule si alte caractere
ar putea crea probleme pe sisteme de operare diferite.
Extensia numelui fisierelor trebuie sa fie .php.
Asigurati-va ca ati ales un nume semnificativ, care sa descrie functia

scriptului dumneavoastra, astfel incat sa-l puteti identifica rapid dupa
saptamani sau chiar luni de la crearea acestuia. Veti descoperi ca liniutele

sunt utile pentru separarea cuvintelor care alcatuiesc numele fisierului,
marind astfel lizibilitatea acestuia. De exemplu, un fisier care contine un
script PHP ce va permite sa vizualizati salariile angajatilor poate primi
numele "saarii-angajati.php". Chiar si la mult timp dupa crearea fisierului
respectiv, nu veti avea probleme in a determina scopul acestuia.
3. Afisarea datelor de iesire intr-un browser Web
Programele PHP executa trei categorii de operatii elementare:
Obtin date de la un utilizator.
Executa prelucrari ale datelor, respectiv obtine accesul la datele stocate in

fisiere si baze de date si le manipuleaza.
Afiseaza date astfel incat un utilizator sa le poata vizualiza.
Primele doua operatii sunt oarecum mai dificil de realizat decat cea de-a treia. Totusi, afisarea
datelor astfel incat acestea sa fie vizibile utilizatorului este o operatie foarte simpla. Asa cum
paragrafele unui text scris sunt compuse din propozitii, programele PHP sunt alcatuite din
instructiuni. Regulile care controleaza formarea propozitiilor se numesc sintaxa. Acelasi
termen este folosit si pentru a desemna regulile care guverneaza formarea instructiunilor PHP.
Iata un exemplu pentru crearea instructiunii PHP care trimite date de iesire la un browser
Web, astfel incat acestea sa fie vizibile pentru un utilizator:
<?php
echo "scrieti aici un text oarecare";
?>
Observati ca instructiunea incepe cu un cavant "echo" si se incheie cu un caracter punct si

virgula (;).
Constructia echo trimite datele de iesire care vor fi afisate de browser.
Ghilimelele duble se folosesc pentru delimitarea unei expresii de tip text, in cazul nostru
"scrieti aici un text oarecare" (se pot folosi si ghilimele simple).
In locul propozitiei "scrieti aici un text oarecare" puteti plasa aproape orice text, cu exceptia
altor ghilimele. Totusi, pentru moment, trebuie sa includeti numai litere, cifre, spatii si semne
de punctuatie folosite in alfabetul latin, precum virgula, caracterul punct si virgula, punctul,
semnul de intrebare si semnul exclamarii. De asemenea, puteti include caracterele < >,
folosite pentru delimitarea etichetelor HTML, respectiv caracterul /, folosit pentru a indica
membrul de inchidere al unei perechi de etichete HTML.
De exemplu, iata o instructiune PHP care are drept date de iesire un fragment dintr-un vers
din Scrisoarea a III-a de Eminescu:
<?php
echo "<h2> Iata vine-un sol de pace</h2>";
?>
- Ca sa vedeti rezultatul, salvati fisierul cu acest cod in directorul www din

"wamp", de exemplu cu denumirea teste.php si apelati in browser adresa
http://localhost/teste.php (programul WampServer trebuie sa fie pornit).
Perechea de etichete H2 determina formatarea datelor de iesire ca titlu HTML de nivel 2.

Scripturile PHP pot fi incluse si in fisiere cu cod HTML, ca in urmatorul exemplu (dar salvate
cu extensia ".php"):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test PHP</title>
</head>
<body>
<?php
echo "<h4> Exemplu de script PHP inclus in HTML</h4>" ;
?>
</body>
</html>
In browser va aparea :
Exemplu de script PHP inclus in HTML
Pot fi incluse si scripturi mai complicate ce contin zeci sau chiar sute de linii, atata timp cat
acestea sunt incluse intre cele doua linii specifice limbajului PHP:
<?php
?>
4. Documentarea unui script PHP
In afara de a furniza nume descriptive fisierelor ce contin scripturile dumneavoastra PHP, e

necesar sa includeti in interiorul fiecarui script atat comentarii care sa permita unui cititor sa
determine cu usurinta utilitatea scriptului, cat si alte informatii referitoare la script. De
exemplu, puteti include un comentariu care precizeaza numele autorului scriptului si ce face
acesta.
Iata un model sintactic pentru comentariile PHP:
// Scrieti aici comentariul dumneavoastra (pe o singura linie)
Dupa cum se poate vedea, un comentariu incepe cu doua caractere slash, urmate de un spatiu.
n continuare, linia contine comentariul dumneavoastra, care poate include orice caractere
doriti, inclusiv caractere speciale.
Iata un exemplu simplu de script PHP care include comentarii:
<?php
// Script de la MarPlo.net
// Acest script afiseaza un mesaj vizibil pentru utilizator.
echo "Acesta este un script foarte simplu.";

?>
Nota: Fiecare linie a comentariului trebuie sa inceapa cu doua caractere slash //. Totusi, puteti
crea un comentariu din mai multe linii si in alte moduri. Iata un exemplu:
/*
Acesta este un comentariu pe mai multe linii.
Poate fi alcatuit dintr-un numar oricat de mare de linii.
*/
Pentru a adauga un comentariu alcatuit din mai multe linii, scrieti la inceput caracterele /*, iar
la sfarsit trebuie sa se incheie cu caracterele */. Intre cele doua perechi de caractere, puteti
scrie orice text doriti, folosind oricate linii doriti.
5. Executarea unui script PHP
Dupa ce ati creat un script PHP, veti dori sa-l executati.

Sa luam un alt exemplu, ce contine cod HTML si comentarii:
Deschideti editorul dumneavoastra de texte si introduceti urmatoarele linii :
<html>
<head>
<title>Test PHP</title>
</head>
<body>
<?php
// Script test
// Acest script afiseaza un mesaj vizibil pentru utilizator.
echo "Primul meu script PHP.";
?>
</body>
</html>
Salvati fisierul cu numele test-script.php

Daca ati instalat un server de PHP pe calculatorul dumneavoastra, salvati fisierul in directorul
www al serverului.
Deschideti browserul si scrieti adresa URL http://localhost/test-script.php
Daca nu aveti instalat un server de PHP pe calculator, incarcati (prin FTP) fisierul testscript.php pe un server pe web unde este instalat PHP.
Dupa ce v-ati incarcat fisierul cu scriptul, sunteti pregatit pentru a obtine accesul la acesta.
Deschideti browserul Web si apelati adresa URL asociata scriptului dumneavoastra. Adresa
URL trebuie sa fie alcatuita din adresa URL identificata de administratorul serverului unde ati
incarcat scriptul, urmata de un slash (/), urmata de numele fisierului care contine scriptul
dumneavoastra. Daca adresa URL se incheie deja cu un caracter slash, nu trebuie sa mai
inserati inca un asemenea caracter inainte de numele scriptului dumneavoastra.
De exemplu, daca domeniul serverului unde ati incarcat scriptul e http://www.marplo.net/
ca adresa URL a catalogului care contine scripturile dumneavoastra PHP, puteti obtine
accesul la scriptul dumneavoastra prin intermediul adresei URL http://www.marplo.net/testscript.php
Daca ati tastat corect adresa URL a scriptului dumneavoastra, iar scriptul respectiv nu contine
erori, veti vedea datele de iesire ale scriptului dumneavoastra. Felicitari! Ati devenit
programator PHP!
In browser va aparea:
Primul meu script PHP.
Tipuri de siruri si variabile
nvatati tipul variabilelor in PHP
nvatati sa folositi ghilimele si caractere escape pentru a specifica valori de tip sir
speciale
Numere si siruri, tipul variabilelor

Programele de calculator manipuleaza datele, care reprezinta informatii. Programele PHP
folosesc doua categorii principale de date: numere si siruri. Numerele sunt compuse mai ales
din cifre, n timp ce un sir poate contine orice caracter, inclusiv cifre, litere si simboluri
speciale.
Decizia privind modul de stocare a datelor este importanta, n mod caracteristic, datele se
stocheaza sub forma de numere atunci cnd se doreste executarea unor operatii matematice
asupra datelor, deoarece numerele sunt stocate ntr-un mod care permite efectuarea de
calcule. Pe de alta parte, sirurile sunt stocate folosind o modalitate care faciliteaza ntelegerea
lor de catre operatorul uman. Datele trebuie stocate sub forma de siruri daca formatul
acestora nu este numeric sau daca doriti ca operatorul uman sa fie capabil de a introduce sau
de a vizualiza datele. Practic, puteti asimila numerele cu un mod de stocare a datelor n
interiorul calculatorului. Sirurile se pot asimila unui mod de stocare a datelor n afara
calculatorului.
Aceste doua mari categorii de date: numere si siruri, formeaza opt tipuri principale de
variabile :
- Boolean
- Integer
- Float
- String
- Array
- Object
- Resource
- Null
In mod normal tipul variabilelor nu este specificat explicit; acesta va fi evaluat de catre
interpretorul PHP la momentul run-time (in momentul executarii scriptului).
1. Tipul boolean
Variabilelele de tipul boolean pot lua doar doua valori : FALSE sau TRUE
Variabilele de alt tip decat boolean pot fi convertite la tipul boolean prin operatorul cast
(bool) sau (boolean), plasate inaintea valorilor, desi in general nu e nevoie de aceasta
converrire, valoarea fiind automat recunoscuta de PHP.
. Tipul integer
PHP foloseste doua categorii de numere: ntregi (tipul integer) si duble, cu virgula (tipul
float)
Variabilele integer reprezinta numerele intregi, ele pot fi specificate in format zecimal,
hexazecimal sau octal.
Numerele ntregi reprezinta numerele fara parte fractionara folosite la numarare, plus zero si
numerele negative. Cu alte cuvinte, n PHP termenul de ntreg are aceeasi semnificatie ca si
n matematica. De exemplu, numarul 100 poate fi reprezentat n PHP sub forma de ntreg.
Scrierea numerelor PHP este simpla. Un ntreg PHP se obtine prin scrierea cifrelor care i
alcatuiesc valoarea. Daca valoarea este negativa, scrieti un semn minus imediat la stnga
numarului. Evitati sa scrieti spatii sau virgule ca parte a unui ntreg PHP.
Iata cteva exemple de numere PHP ntregi :
215678 - Numar in reprezentare zecimala
0x1A8; - Numar in reprezentare hexazecimala (reprezinta: 1*16*16 + 10*16 + 8
= 424 (in zecimal))
067
- Reprezinta: 6*8 + 7 = 55 (in zecimal)
Valorile minime, respectiv maxime pe care le poate lua o variabila de tip integer depind de
sistemul de operare pe care ruleaza modulul PHP. De exemplu pentru un sistem Windows
valoarea unui integer se memoreaza pe 32 de biti: 31 bit pentru numar si un bit pentru semn.
In acest caz valorile unui intreg se afla in intervalul :-231 repectiv: 231. Daca incercam sa
folosim un integer cu valori care ies din acest inteval vor avea de-a face cu un fenomen de
depasire : integer overflow. In acest caz interpretorul PHP converteste acesta valoare intr-o
valoare de tip float (care are un interval mai extins de valori).
In PHP simpla impartire a doua valori intregi va produce ca rezultat o variabila de tip float.
Pentru a obtine doar partea intreaga acestui rezultat putem folosi operatorul cast (int) in fata
rezultatului.
Ex.: echo (int)8.7; (va returna 8)
Pentru a rotunji rezultatul la intregul cel mai apropiat de valoarea reala se poate folosi functia
round(), unde intre paranteze se adauga valoarea.
Ex.: echo round(8.7); (va returna 9)
3. Tipul float
Reprezinta variabile de tip real [numerele cu virgula], (n lb. engleza se foloseste punctul
zecimal n loc de virgula). De exemplu 2.5
In general, numerele duble (tipul float) sunt stocate folosindu-se formatul standard IEEE-64,
care furnizeaza 64 de biti. Acest format va permite sa stocati valori care pot merge pna la 1,8
x 10 la puterea 308 sub forma de numere duble si furnizeaza aproximativ 14 cifre dupa
punctul zecimal (sau cifre semnificative) de precizie.
Iata cteva exemple de numere duble (tipul float)
123.4567
- Numar de tip float
1.2e3;
- Reprezinta: 1.2 * 103
4. Tipul string
Reprezinta o insiruire de caractere, fiecare caracter este memorat pe 1 byte; setul de caractere
este limitat la 256 valori distincte. Dimensiunea sirurilor poate fi oricat de mare in PHP, nu
exista specificatii care sa limiteze numarul maxim de caractere dintr-un sir.
Spre deosebire de ntregi si de numere float, care contin cifre, sirurile pot contine orice
caracter. Ca atare, sirurile sunt utile pentru stocarea datelor care nu pot fi calculate, precum
nume, fraze si adrese.
In PHP, un sir poate fi declarat in mai multe feluri:
1) Un mod simplu de a declara un sir este prin delimitarea cu ghilimele simple (' ')
Daca dorim ca sirul sa contina caracterul ' va trebui sa inseram inaintea lui caracterul
escape \. Daca dorim ca sirul sa contina caracterul \ va trebui sa dublam acest caracter. Acest
comportament este exemplificat in exemplul urmator:
<?php
$var1 = 'Acesta este un sir de test';
echo 'Curs \'PHP\'';
echo '<br />Vrei sa stergi C:\\*.* ?';

echo '<br />Variabila var1=$var1';
echo "<br />Variabila var1=$var1";
?>
Curs 'PHP'
Vrei sa stergi C:\*.* ?
Variabila var1=$var1
Variabila var1=Acesta este un sir de test
Observati diferenta dintre ultimile doua linii!
In penultima linie, unde s-a folosit gilimele simple pentru delimitarea sirului, variabila $var1
nu este expandata adica nu este afisat valoarea variabilei var1=Acesta este un sir de test ci
exact textul scris (numele ei). Pentru a realiza afisarea valorii variabilei si nu numele acesteia,
se folosesc ghilimelele duble, precum in ultima linie a exemplului de mai sus.
2) O alta metoda pentru a specifica un sir n PHP este prin folosirea ghiimelelor duble
(" ").
Daca intr-un sir delimitat prin ghilimele duble vrem ca acesta sa afiseze numele unei
variabile, nu valoarea acesteia, adaugam un caracter backslash (\) inaintea numelui variabiei.
Exemplu; echo "Numele variabilei este \$var";
Acest cod va afisa Numele variabilei este $var, oricare ar fi valoarea variabilei "$var".
Caracterele care alcatuiesc sirul sunt incluse ntre ghilimele duble (" ");
De exemplu, sirul reprezentnd numele fizicianului care a formulat teoria relativitatii este
"Albert Einstein". Asa cum s-a explicat, un sir poate contine date numerice; de exemplu,
"3.14159".
Daca se doreste adaugarea de ghilimele duble intr-un sir delimitat de ghilimele duble, se
adauga caracterul \ in fata acestora.
Exemplu; echo "Numele programului este \"PHP\".";
Prin delimitarea cu ghilimele duble PHP faciliteaza includerea n siruri a unor caractere
speciale, precum caracterele de salt la linie noua sau retur de car, prin furnizarea de secvente
escape care reprezinta caractere speciale.
Iata secventele escape folosite n PHP:
\n - salt la linie noua
\r - retur de car (rand nou)
\t - caracter de tabulare pe orizontala
\\ - backslash
\$ - simbolul dolarului
\" - ghilimele duble
Ca exemplu, iata un sir care include un retur de car, urmat de un salt la linie noua: "Salut,
lume!\r\n".
Retineti ca fiecare secventa escape ncepe cu un backslash (\). Pentru a include un backslash
ntr-un sir, trebuie sa folositi doua caractere backslash.
Pe langa imbricarea variabilelor in cadrul sirurilor delimitate prin ghilimele duble, PHP pune
la dispozitie operatorul de concatenare a sirurilor: . (punct) . Acest operator adauga un sir la
sfarsitul altui sir. De exemplu:
<?php
$nume = 'Popescu';
$prenume='Costel';
echo 'Numele de familie este '.$nume. 'iar prenumele este '.$prenume;
?>
Numele de familie este Popescu iar prenumele este Costel
In anumite situatii este necesar sa accesam unul dintre caracterele unui sir. Pentru aceasta
putem folosi parantezele{} ca in exemplul de mai jos:
<?php
$var1 = 'Acesta este un sir de test';
echo $var1{0}; // Afisaza A (primul caracter din sir)
echo $var1{2}; // Afisaza e (al treilea caracter din sir)
?>
Rezultatul afisat va fi
Ae
3) Sintaxa heredoc este o alta modalitate de a delimita siruri
In acest caz delimitatorul este ("<<<"); acesta trebuie urmat de un identificator unic, dupa
care urmeaza sirul de caractere, iar secventa se incheie din nou cu identificatorul mentionat.
Identificatorul de incheiere trebuie sa se afle in prima coloana a liniei, acesta poate contine
caractere alfanumerice dar neaparat trebuie sa inceapa cu o litera, nu cu o cifra sau alt semn.
Veti intelege mai bine studiind exemplu de mai jos:
<?php
$var1 = <<< EOT
Exemplu de sir care foloseste delimitatorul heredoc.
EOT;
echo $var1;
?>
Rezultatul afisat va fi:

Exemplu de sir care foloseste delimitatorul heredoc.
5. Tipul array
Reprezinta un vector de valori (care creaza o matrice, vezi Lectia 9 despre matrice), fiecare
element al matricei are asociat o cheie. Aceasta cheie va fi folosita ulterior la identificarea
unui element specific at matricei. In PHP tipul array se mai numeste si tip map ordonat,
deoarece elemente vectorului sunt ordonate dupa campul cheie.
Variabilele de tip array si lucrul cu acestea vor fi prezentate mai detaliat in lectiile urmatoare.
Iata un exemplu simplu de variabile array:
<?php
$fructe[0] = 'mere';
$fructe[1] = 'caise';
$fructe[2] = 'piersici';
?>
6. Tipul object
Reprezinta de fapt instanta unei clase declarate in PHP. O clasa este o structura care contine
variabile membru si functii membru.
Variabilele de tip object si lucrul cu acestea vor fi prezentate detaliat in lectiile urmatoare.
7. Tipul resource
Este un tip special de variabila care pastreaza o legatura spre resurse externe. Exemple de
resurse externe: manipulatori pentru deschidere de fisiere, conectare la baze de date,
compresia fisierelor, resurse COM, etc...
8. Tipul NULL
Reprezinta varibilele care nu au inca atribuita o valoare.

O variabila se considera a avea valoarea Null daca:
- este setata explicit prin atribuirea valorii NULL
- nu a fost asignata inca o valoare acestei variabile
- variabila a fost stearsa prin functia unset();
Putem afla tipul unei variabile folosind functia gettype() care returneaza un string (sir)
continand tipul variabilei cercetate.
Observati si studiati exemplul de mai jos
<?php
$var1 = TRUE;
$var2 = 100;
$var3 = 23.88;
$var4 = "Nume";
$var[5] = "fructe";
echo gettype($var1);
echo '<br />'.gettype($var2);
echo '<br />'.gettype($var[5]);
?>
boolean
integer
double
string
string
NULL
Observati ca utima linie afisata este NULL, asta deoarece $var6 nu are nici o valoare
determinata
Variabile si operatori PHP
Intelegeti diferenta dintre valori si variabile
Invatati modul de utilizare a operatorilor pentru combinarea valorilor n expresii
Invatati modul de utilizare a functiilor pentru executarea operatiilor elementare
1. Valori si variabile
Daca se asociaza o valoare cu un nume, ca si in algebra, este posibila modificarea acelei
valorii prin referire la numele respectiv. O valoare cu nume se numeste variabila, deoarece.
In limbajul PHP variabilele sunt reprezentate prin semnul $ urmat de numele variabilei.
Numele variabilei este case sensitive, adica conteaza daca numele este scris cu litere mari sau
mici. Intotdeuna numele variabilelor trebuie sa inceapa cu o litera sau o liniuta de subliniere
(_) si poate fi urmat de litere sau cifre.
Iata cateva exemple de nume de variabila:
$var
$Numar
$_elemente
Pentru a asocia o valoare unei variabile, veti scrie cu un semn egal, asa:
$temperatura = 33.5;
Semnul egal este urmat de valoarea care urmeaza a fi atribuita variabilei, in acest exemplu,
valoarea este data de valoarea literala dubla (float) 33.5. Caracterul punct si virgula (;)
marcheaza sfarsitul instructiunii.
De asemenea, puteti atribui valoarea unei variabile catre o alta variabila, prin scrierea unei
instructiuni de atribuire astfel:
$castigator = $nume;
In acest caz, valoarea variabilei $nume devine valoarea variabilei $castigator. Acest procedeu
se numeste. Astfel o modificare facuta asupra lui $nume se va propaga automat si asupra
variabilei $castigator.
Iata exemplul de mai sus asa cum va aparea intr-un script PHP simplu :
<?php
$nume = "Cosmin";
$castigator = $nume;
echo $castigator;
?>
Cosmin
Exista si un alt tip de atribuire valoare de la o variabila la alta, denumita atribuire prin
referinta (folosind si caracterul "&"), aceasta de fapt leaga cele doua variabile, vedeti
tutorialul: Atribuire valoare prin referinta .
Forma valorii unei variabile se numeste tipul variabilei. Tipul unei variabile se poate modifica
daca atribuiti variabilei o valoare de un tip diferit fata de cel al valorii curente a variabilei.
De exemplu, instructiunea de atribuire
$x = 3;
Atribue variabilei $x tipul integer.
Daca instructiunea de atribuire
$x = 3.5;
va fi executata ulterior, variabila $x devine de tip float.
Desi instructiunile de atribuire din limbajul PHP si ecuatiile matematice folosesc ambele
semnul egal, cele doua notiuni sunt foarte diferite, deoarece atribuirea nu este acelasi lucru cu
egalitatea. Atribuirea este o operatie care inlocuieste o valoare cu o alta. Pe de alta parte,
egalitatea este o relatie intre doua valori. Cand doua valori sunt egale, acestea raman egale
pentru totdeauna. Totusi, puteti atribui o valoare unei variabile si ulterior puteti atribui
aceleiasi variabile o alta valoare. Cu alte cuvinte, egalitatea este permanenta; atribuirea nu
este.
Variabilele declarate mai sus sunt definite de utilizator. In PHP exista si alte variabile numite
"variabile predefinite" care rezida in nucleul PHP, sunt alocate automat de catre modulul PHP,
si sunt accesibile in program.
In continuare enumeram citeva dintre aceste "Variabile Superglobale" (accesibile din toate
scripturile PHP):
$GLOBALS contine referinte la variabilele globale disponibile in scriptul curent.
$_SERVER variabile definite de server sau relative la contextul in care se executa

scriptul curent
$_GET variabile furnizate scriptului prin adresa URL
$_POST variabile furnizate scriptului prin metoda HTTP POST (in general prin
formulare)
$_COOKIE variabile furnizate scriptului prin HTTP cookie
$_FILES furnizeaza scriptului fisierele uploadate
$_SESSION variabile care sunt inregistrate in sesiunea scriptului
2. Operatori
Pentru a va ajuta sa efectuati calcule si prelucrari ale datelor, PHP include o diversitate de
operatori si functii utile. Cand combinati valorile literale si variabilele cu operatori si functii,
construiti ceea ce este cunoscut sub numele de expresii.
Operatorii sunt simboluri specifice care realizeaza o actiune specifica in cadrul unei expresii.
Operatorii actioneaza asupra variabilelor prezente in expresie. De exemplu in cadrul
expresiilor matematice vom folosi operatori aritmetici.
$a + $b
Adunare : a+b
$a - $b
Scadere : a-b
$a * $b
Inmultire: a*b
$a / $b
Impartire: a/b
$a%$a
Moule :restul impartirii lui a la b
$a +=$b
Echivalent cu: $a = $a + $b
$a -=$b
Echivalent cu: $a = $a - $b
$a *=$b
Echivalent cu: $a = $a * $b
$a /=$b
Echivalent cu: $a = $a / $b
$a++
Incrementare ; Ecivalent cu $a = $a +1
$a--
Decrementare; Echivalent cu $a = $a -1
O proprietate interesanta a operatorului de impartire este aceea ca returneaza o valoare

intreaga daca ambii sai operanzi sunt intregi si rezultatul este un intreg; in caz contrar,
returneaza o valoare cu virgula (de tip float). Astfel, instructiunea de atribuire
$x = 10/3;
atribuie valorii $x valoarea cu virgula 3.3333333333333, chiar daca operanzii operatorului de
impartire sunt ambii intregi.
Similar operatorului de impartire, operatorul modulo executa o impartire; cu toate acestea,
operatorul modulo returneaza restul, nu catul impartirii. De exemplu, prin impartirea lui 10 la
3 se obtine catul 3 si restul 1. Deci, instructiunea de atribuire
$x = 10%3;
atribuie variabilei $x valoarea 1.
Operatorii de incrementare $a++ si decrementare $a-- au un efect diferit daca sunt scrisi ++$a
respectiv --$a
In primul caz, daca avem de exemplu
$x= $a++;
i-se atribue lui $x valoarea variabilei $a dupa care se efectueaza operatia de incrementare ($a
= $a + 1)
Dar daca avem
$x = ++$a=
se efectueaza operatia de incrementare ($a = $a + 1) dupa care i-se atribue lui $x noua
valoarea a lui $a
Ca in matematica, PHP evalueaza operatorii de inmultire si de impartire anterior operatorilor

de adunare, respectiv scadere. Aceasta caracteristica se numeste precedenta.
Datorita precedentei, instructiunea
$x=1+2*3;
atribuie variabilei $x valoarea 7, chiar daca operatorul de adunare apare inaintea celui de
inmultire. Se respecta regulile din matematica. Daca doriti sa controlati precedenta unei
expresii, puteti folosi paranteze. De exemplu, instructiunea
$x=(1+2)*3;
atribuie variabilei $x valoarea 9, deoarece partea inclusa intre paranteze a expresiei este
evaluata prima, asa cum se procedeaza in algebra.
In afara de acesti operatori numerici, PHP include un operator de concatenare a sirurilor (.),
denumit uneori operator de unire, deoarece functia sa consta in unirea sirurilor.
Sa observam urmatorul exemplu:
<?php
$var1 = 'Ionescu';
echo 'Numele candidatului este '.$var1;
$var2 = 'Candidat: ';
$var2 .= $var1;
echo "<br />$var2";

?>
Rezutatul afisat va fi:
Numele candidatului este Ionescu
Candidat: Ionescu
In exemplul de mai sus se observa folosirea operatorului de concatenare . (punct)
Acest operator adauga la sfarsitul sirului curent noul sir furnizat ca parametru.
Expresia $a .= 'Sir de test' este echivalenta cu : $a = $a . 'Sir de test'.
3. Functii
In afara de operatori, PHP include functii care executa operatii utile. Iata unele exemple de
functii:
abs(x) - Returneaza valoarea absoluta a lui 'x'
ceil(x) - Returneaza valoarea 'x', rotunjita la intregul imediat superior
floor(x) - Returneaza valoarea 'x', rotunjita la intregul imediat inferior
max(x,y,...) - Returneaza valoarea maxima a unui set de valori
min(x,y,...) - Returneaza valoarea minima a unui set de valori
pow(x,n) - Returneaza numarul 'x', ridicat la puterea specificata 'n'
strftime(f) - Returneaza data curenta, formatata conform continutului parametrului 'f'
sqrt(x) - Returneaza radacina patrata a lui 'x'
- In afara de acestea, PHP include multe alte functii. Consultati site-ul www.php.net.
Majoritatea functiilor necesita una sau mai multe valori de intrare, cunoscute sub numele de
argumente. De exemplu, functia "sqrt" necesita un argument (aici este 'x') care specifica
valoarea a carei radacina patrata trebuie calculata.
Unele functii, precum min() si max(), preiau un numar nedefinit de argumente. Alte functii nu
necesita nici un fel de argumente. Pentru a putea folosi o functie in mod corespunzator,
trebuie sa cunoasteti:
Numele functiei
Actiunea functiei si valoarea returnata de aceasta, daca exista
Numarul argumentelor preluate de functie
Semnificatia fiecarui argument
Iata un exemplu simplu care foloseste o functie pentru calculul lungimii laturilor unui patrat,
daca este cunoscuta aria patratului:
$latura=sqrt($arie);
Retineti modul in care argumentul functiei este inclus intre paranteze, precum si modul in
care functia si argumentul sau sunt folosite intr-un mod asemanator cu o valoare literala sau o
variabila.
Iata un exemplu care prezinta modul de utilizare a functiei "max", care preia mai multe
argumente:
$punctaj_maxim=max($punctaj1, $punctaj2, $punctaj3);
Rezultatul dat variabilei "$punctaj maxim" va fi determinat de functia "max", aceasta

determinand valoarea cea mai mare a argumentelor din paranteza.
Observati ca fiecare argument este separat de vecinul sau printr-o virgula.
Utilizare formulare HTML cu PHP, $_GET

si $_POST
Invatati sa trimiteti date prin formulare HTML
Invatati sa preluati date trimise prin GET si POST
1. Proiectarea unui formular

Principalele sarcini n proiectarea unui formular HTML le constituie alegerea controalelor
HTML care vor fi incluse n formular, selectarea amplasamentului controalelor si alegerea
numelui acestora.
Studiati lectia HTML despre Formulare, aceasta explica modul de realizare a fiecarui obiect
dintr-un formular HTML si va va ajuta sa invatati rolul acestor elemente HTMLL.
2. Crearea unui formular

Un formular HTML trebuie sa contina un buton de expediere, submit, pe care utilizatorul
executa clic pentru a trimite datele din formular la scriptul PHP.
Formularele se creaza folosind etichete specifice incadrate in tag-ul <form> </form> ca in
exemplul de mai jos:
<form action="script.php" method="post">
Nume:<input type="text" name="nume" />
<br /><input type="submit" name="submit" value="Trmite formular" />
</form>
In browser se va vedea:
Nume:
Fiecare element al formularului trebuie introdus intre etichetele <form> si </form>.

Atributul "action" indica fisierul cu scriptul care va primi datele de la formular si reprezinta
una dintre cele mai importante precizari.
Fiecare element, camp dintr-un formular trebuie sa aibe un nume distinct, dat prin atributul
"name"; acest nume este folosit de scriptul PHP la care sunt trimise datele, astfel, scriptul
PHP recunoaste datele din campul respectiv folosind numele acestuia.
3. Utilizarea metodelor GET si POST

Atributul "method" poate avea doua valori : GET si POST. Diferenta intre metodele GET si
POST consta in modul in care informatia din formular este transmisa scriptului care o
prelucreaza.
- Metoda GET trimite toate informatiile adunate ca parte a adresei URL; aceste informatii
sunt vizibile pentru utilizator.
- Metoda POST transmite informatia intr-o maniera invizibila pentru utilizator si poate
transmite o cantitate mai mare de date decat GET.
Folosind exemplul de formular de mai sus, metoda GET va transmite serverului o adresa
URL ca cea de mai jos:
http://www.marplo.net/script.php?nume=Popescu
iar in cazul folosirii metodei POST, in URL va aparea doar:
http://www.marplo.net/script.php
Metoda GET permite transmiterea unui volum limitat de informatii catre server; de asemenea
nu este recomandata folosirea acestei metode in cazul in care dorim sa transmitem date
personale(de exemplu parolele introduse intr-un formular pot fi vizualizate de oricine in
browserul de Web).
4. Receptionarea datelor de la un formular HTML

In general datele din formular sunt preluate de scriptul PHP prin urmatoarea formula:
$_POST['nume'] - daca este folosit method="post"
$_GET['nume'] - daca este folosit method="get"
- unde "nume este valoarea atributului name al elementului din formularul HTML.
Sa luam un exemplu practic de formular HTML care trimite date (prin method="post") la un
script PHP unde acestea vor putea fi vizualizate.
Salvam scriptul de mai jos intr-un fisier pe care-l numim "test-form.php"
<?php
$nume = $_POST['nume'];
$email = $_POST['email'];
$parola = $_POST['parola'];
echo "Nume = $nume";
echo "<br />E-mail = $email";
echo "<br />Parola = $parola";
?>
Scriem urmatorul cod HTML intr-un alt fisier "form.html", pe care-l salvam in acelasi
director cu scriptul PHP de mai sus.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ro" lang="ro">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title> Test-Form </title>
</head>
<body>
<form action="test-form.php" method="POST">
Nume:<input type="text" name="nume" />
<br />Email:<input type="text" name="email" />
<br />Parola:<input type="password" name="parola" />
<br /><input type="submit" name="submit" value="Trmite datele" />
</form>
</body>
</html>
Nume:
Email:
Parola:
Completam datele din formular, de exemplu: la Nume : Popescu, la Email : plomar@uv.ro si
Parola : parola_mea
Dupa ce am competat datele, apasam clic pe butonul "Trimite datele", acestea vor fi trimise la
scriptul PHP "test-form.php", care le va prelucra si va afisa urmatorul rezultat:
Nume = Popescu
E-mail = plomar@uv.ro
Parola = parola_mea
Sa intelegem exemplu de mai sus.
Folosind formularul de mai sus, atributul NAME din fiecare eticheta INPUT atribuie fiecarei
casete cu text un nume, astfel scriptul PHP va putea recunoaste datele scrise in casete. In
scriptul "test-form".php" vom accesa variabilele:
$nume va primi informatia introdusa in campul Nume
$email va primi informatia introdusa in campul Email
$parola va primi informatia introdusa in campul Parola
Deoarece cunoastem metoda prin care trimitem datele catre scriptul PHP, "POST", am folosit
variabila PHP globala _POST pentru a prelua datele din formular:
$_POST['nume']
$_POST['email']
$_POST['parola']
Constructia echo trimite datele de iesire care vor fi afisate de browser

Variabile PHP globale: _GET si _POST reprezinta de fapt variabile de tip array, fiecare
element se poate accesa prin cheia sa; in cazul nostru cheia fiecarui element este data de
atributul : NAME al casetelor din formular
5. Trimiterea de date unui script prin adresa URL

In afara de a expedia unui script datele printr-un formular, puteti expedia date cu ajutorul
adresei URL a paginii. Pentru aceasta, atasati la sfarsitul adresei URL un semn al ntrebarii
(?) si apoi includeti o serie de perechi "nume-valoare" (separate prin &), ca in exemplu
urmator:
http://www.marplo.net/fisier.php?nume1=valoare1&nume2=valoare2
Exemplul include numai doua perechi "nume-valoare"; cu toate acestea, puteti include oricte
asemenea perechi doriti (separate prin caracterul &), in functie de limita impusa de browser.
Pentru a prelua si folosi datele dintr-o astfel de adresa URL, folositi in interiorul scriptului
PHP expresia "$_GET['nume'], ca in exemplu urmator"
$var1 = $_GET['nume1']
$var2 = $_GET['nume2']
Unde "nume1" si "nume2" sunt numele variabilelor din adresa URL, iar "$var1" si "$var2"
sunt variabilele care vor fi folosite in scriptul PHP (din "fisier.php") si a caror valori vor fi
"valoare1" respectiv "valoare2" continute in adresa URL.
Daca doriti sa trimiteti unui script, prin intermediul adresei sale URL, caractere speciale
precum un semn al intrebarii, un semn egal sau un ampersand, se poate crea confuzie.
Pentru a functiona corect, un sir trebuie sa fie codificat URL. Pentru a codifica URL un sir,
caracterele speciale se nlocuiesc cu echivalentele lor hexazecimale, precedate de un simbol
procent (%). Pentru alte detalii, consultati lectia despre Utilizarea caracterelor speciale,
subtitlul 4 ( Conversia adreselor URL).
De exemplu, forma codificata URL a sirului "la multi ani!" este %22la multi ani%21%22.
Adresa URL rezultanta se numeste "sir de interogare" si nu poate contine spatii. Daca doriti
sa trimiteti un spatiu ca parte a unui sir de interogare, trimiteti n locul spatiului un semn plus
(+). Iata un exemplu de sir de interogare care codifica numele autorului acestui site:
http://www.marplo.net/script.php?autor=Mar+Plo
Unele dintre cele mai comune caractere speciale si echivalentele lor codificate URL sunt
prezentate n tabelul de mai jos:
Caracter special
Echivalentul codificat URL
.
*%2e
>
%3e
^
%5e
~
%7e
+
%2b
,
%2c
/
%2f
:
%3a
;
%3b
%3c
=
%3d
>
%3e
[
%5b
\
%5c
]
%5d
_
%5f
{
%7b
|
%7c
}
%7dc
tab
%09
spatiu
%20
!
%21
%22
#
%23
$
%24
%
%25
&
%26
`
%27
(
%28
)
%29
@
%40
`
%60
Variabile de mediu si erori
In aceasta lectie invatati sa obtineti accesul la valorile variabilelor de mediu.
Invatati despre depanarea si tratarea erorilor.
1. Obtinerea si utilizarea datelor de la o variabila de mediu

Variabilele de mediu sunt folosite pentru stocarea optiunilor si a parametrilor care
personalizeaza mediul de aplicatie. Aplicatiile pot obtine accesul la valorile variabilelor de
mediu si in functie de acestea si pot ajusta comportamentul.
De exemplu, calea de cautare a programelor MS-DOS este stocata ntr-o variabila de mediu
denumita PATH. In general, comenzile sistemelor de operare sunt folosite pentru a configura
variabilele de mediu si pentru a stabili valorile acestora. Cu toate acestea, unele aplicatii
manipuleaza valorile variabilelor de mediu.
Att serverul Web Apache, ct si serverul de aplicatie PHP folosesc variabile de mediu pentru
a prezenta informatii de stare. Unele dintre cele mai importante variabile de mediu folosite de
Apache si PHP sunt rezumate n tabelul de mai jos. Numeroase servere Web, altele dect
Apache, furnizeaza o parte din aceste variabile de mediu sau chiar pe toate.
Multe dintre aceste variabile reflecta caracteristicile cererii HTTP care a solicitat executia
PHP. Puteti vizualiza toate variabilele de mediu disponibile pentru programele PHP prin
invocarea functiei phpinfo() si vizualizarea datelor de iesire generate de aceasta.
Vizualizarea datelor unei variabile de mediu se poate face folosind variabila $_SERVER si o
cheie (intre paranteze patrate) ce repreinta numele variabilei de mediu.
De exemplu, pt. afisarea domeniului serverului unde ruleaza scriptul

echo $_SERVER['SERVER_NAME'];
Variabila de mediu
Descriere
CONTENT_LENGTH
- Lungimea, n octeti, a corpului cererii.
CONTENT_TYPE
- Tipul MIME al datelor din corpul cererii.
DOCUMENT_ROOT
- Calea care constituie radacina arborelui catalogului cu

documente al serverului Web.
GATEWAY_INTERFACE
- Returneaza ersiunea protocolului CGI (Common

Gateway Interface) folosit de serverul Web.
HTTP_ACCEPT
- Continutul antetului HTTP Accept.
HTTP_ACCEPT_CHARSET
- Continutul antetului HTTP Accept-Charset:, care

specifica seturile de caractere ntelese de client.
HTTP_ACCEPT_ENCODING
- Continutul antetului HTTP Accept-Encoding:, care

specifica tipurile de continuturi ntelese de client.
HTTP_ACCEPT_LANGUAGE
- Continutul antetului HTTP Accept-Language:, care

specifica limbajele preferate de client.
HTTP_CONNECTION
- Continutul antetului HTTP Connection:, care indica

optiunile solicitate de client.
HTTP_HOST
- Continutul antetului HTTP Host:, care indica numele de

gazda, folosit de client la prezentarea cererii.
HTTP_REFERER
- Adresa URL a paginii Web care a trimis clientul la

pagina curenta.
HTTP_USER_AGENT
- Continutul antetului HTTP user-Agent, care indica tipul

si versiunea browser-ului folosit.
PATH
- Calea de executie asociata cu mediul serverului.
QUERY_STRING
- Sirul de interogare, daca exista, prin care a fost accesata

pagina.
REMOTE_ADDR
- Adresa IP a clientului (vizitatorului).
REMOTE_HOST
- Numele de gazda al clientului.
REMOTE_PORT
- Adresa portului clientului de unde a pornit cererea.
REQUEST_METHOD
- Metoda de cerere HTTP folosita; de exemplu, GET,

POST, PUT sau HEAD.
REQUEST_URI
- URI folosit pentru accesul la pagina curenta. URI este

alcatuit dintr-un URL si un sir optional de interogare.
SCRIPT_FILENAME
- Numele de cale absolut al scriptului curent.
SCRIPT_NAME
- Adresa URL a scriptului curent.
SERVER_ADMIN
- Adresa de e-mail a administratorului serverului Web.
SERVER_HOST
- Numele de gazda asociat serverului Web care

prelucreaza cererea.
SERVER_PORT
- Portul folosit de serverul Web pentru comunicatii.
SERVER_PROTOCOL
- Numele si versiunea protocolului prin intermediul caruia

s-a executat cererea.
SERVER_SIGNATURE
- Sirul care identifica versiunea serverului Web si numele

de gazda folosit pentru prelucrarea cererii.
SERVER_SOFTWARE
- Sirul care identifica programul server Web si versiunea

acestuia.
- O lista completa a acestor variabile de mediu o gasiti la pagina oficiala $_SERVER

Puteti obtine accesul la variabila de mediu folosind variabila $_SERVER care este de fapt un
Array in care cheile elementelor sunt numele variabilelor de mediu
De exemplu, urmatoarea instructiune echo trimite browserului adresa IP a clientului
(vizitatorului):
<?php
$ip = $_SERVER['REMOTE_ADDR'];
echo "Adresa dv. IP este $ip";
?>
Afisarea sau nu a acestor variabile globale depinde de permisiunile facute la configurarea
serverului PHP si de datele transmise.
2. Depanarea unui script
Uneori, n locul datelor de iesire ale scriptului dumneavoastra, puteti vedea unul din
urmatoarele:
Textul scriptului, n loc de datele de iesire ale acestuia
O caseta de dialog, prin care sunteti ntrebat daca doriti sa descarcati fisierul care
contine scriptul
Un mesaj n care se spune ca scriptul nu exista
Un mesaj n care se spune ca browserul dumneavoastra Web nu are permisiunea de a

obtine accesul la script
Un mesaj n care se spune ca scriptul dumneavoastra contine o eroare
La vizualizarea rezultatelor unui script PHP se pot produce numeroase erori, chiar daca
scriptul n sine este corect.
- Daca vedeti textul scriptului dumneavoastra sau o caseta de dialog prin care sunteti ntrebat
daca doriti sa descarcati fisierul care contine scriptul, este posibil ca extensia fisierului script
sa fie incorecta sau ca serverul PHP sa nu functioneze. Desi fisierele script PHP trebuie sa
aiba, n general, extensia .php, este posibil (dar mai rar) ca un administrator de sistem sa
configureze un server PHP astfel nct acesta sa impuna o alta extensie de fisier. Astfel, daca
scriptul dumneavoastra esueaza din unul dintre aceste doua motive, luati legatura cu
administratorul dumneavoastra de sistem.
- Daca vedeti un mesaj n care se spune ca scriptul nu exista, este posibil ca dumneavoastra sa
fi tastat incorect adresa URL. Verificati daca ati tastat corect adresa URL identificata de
administratorul dumneavoastra de sistem, precum si daca ati atasat corect la aceasta numele
fisierului care contine scriptul, folosind un slash numai daca adresa URL identificata de
administratorul dumneavoastra de sistem nu se ncheie cu acest caracter.
- Daca vedeti un mesaj n care se arata ca browserul dumneavoastra Web nu are permisiunea
de a obtine accesul la script, poate ca este necesar sa modificati permisiunile fisierului script.
Pentru a afla cum trebuie procedat, consultati-va cu administratorul de sistem.
- Daca vedeti un mesaj n care se spune ca scriptul dumneavoastra contine o eroare, verificati
daca nu a aparut vreuna din urmatoarele probleme:
O eroare de tastare, cum ar fi scrierea gresita a cuvntului echo
O eroare de punctuatie, cum ar fi paranteze, ghilimele sau punct si virgula, lipsa sau
inserate gresit
Neincluderea sau includerea eronata a liniilor de delimitare a scriptului, n speta <?

php si ?>
Un marcaj de comentariu ( / / ) care lipseste sau care a fost introdus gresit
De exemplu, iata un script care contine un tip de eroare frecvent ntlnit. Puteti identifica
eroarea?
<?php
// Acest script contine o eroare de sintaxa
echo "Salut, World Wide Web!;

?>
Din script lipseste caracterul ghilimele duble de nchidere, care trebuie sa delimiteze expresia
de tip text. Daca ncercati sa executati acest script, puteti vedea doar o pagina goala sau o
eroare similara celei prezentate n continuare.
Parse error. Parse error in /home/bmccarty/public_html/php/module-01/syntax-error.php On
line 7
Mesajul de eroare ncearca sa va indice sursa erorii, indicnd numarul liniei la care s-a produs
eroarea. Totusi, remarcati ca mesajul va ndruma spre linia 7 a unui script care contine numai
4 linii. Din moment ce ghilimelele duble de nchidere lipsesc, serverul PHP cauta dincolo de
sfrsitul scriptului pentru a gasi ghilimelele duble respective. Ca atare, serverul PHP este
oarecum derutat cu privire la sursa erorii.
Morala este aceea ca nu puteti conta n totalitate pe serverul PHP pentru a determina locatia
erorii; folositi numarul de linie furnizat de server numai ca ndrumar pentru a depista locatia
probabila a erorii.
3. Tratarea erorilor
Modulul PHP poate fi configurat astfel incat sa afiseze erorile intilnite in codul PHP. Acest
lucru poate fi foarte util in cazul depanarii programelor. Pentru a activa afisarea erorilor
exista doua metode:
- modificarea parametrului display_errors din fisierul de configurare "php.ini"
- folosirea functiei ini_set(display_errors);
In cazul primei metode trebuie sa avem drepturi de administrator pentru a modifica fisierul
php.ini. Nu se recomanda setarea parametrului display_errors la valoarea 1(TRUE) in cazul
site-urilor de productie; mesajele de eroare afisate nu sint folositoare utilizatorului. Pe de alta
parte aceasta ar contribui la marirea riscului unui atac.
A doua metoda consta in folositrea functiei ini_set, care permite unui script sa redefineasca
temporar un parametru din fisierul de configurare php.ini.
Consideram un exemplu de cod in care intentionat incercam sa citim variabile care nu exista:
<?php
ini_set('display_errors',1);
echo "Valoarea transmisa este ".$var;
?>
In exemplul de mai sus daca variabila cu nume: "var" nu exista PHP va afisa un mesaj de
eroare de genul:
Notice: Undefined variable: var
Putem determina tipurile de erori pe care le semnaleaza PHP folosind functia:
error_reporting(). Aceasta preia o constanta care specifica nivelul la care se afiseaza erorile.
error_reporting(E_ALL) - semnaleaza toate tipurile de erori
error_reporting(E_ALL & ~E_NOTICE) - semnaleaza toate erorile in afara de

anunturi
error_reporting(0) - dezactiveaza acesta caracteristica.
Exemplu:
<?php
ini_set('display_errors',1);
error_reporting(E_ALL & ~E_NOTICE);
echo "Valoarea transmisa este ".$_GET['orase'];
?>
- Testati acest exemplu pentru a vedea rezultatul.
Constante si tipuri de variabile
nvatati sa definiti si sa utilizati constantele
nvatati sa folositi variabilele dinamice
nvatati sa convertiti valorile dintr-un tip n altul
n aceasta lectie vom discuta despre constante si variabile dinamice. Puteti scrie programe
PHP utile si complexe fara a utiliza constante sau variabile dinamice. Daca utilizarea
constantelor poate facilita citirea programelor dumneavoastra, variabilele dinamice au un
efect contrar. Din acest motiv, n general se recomanda evitarea variabilelor dinamice, mai
ales de catre programatorii PHP ncepatori. Totusi, va puteri afla n situatia de a lucra la un
program PHP scris de o persoana care foloseste aceste variabile; prin urmare, trebuie sa aveti
cunostinte despre variabilele dinamice, indiferent daca le folositi sau nu n propriile
dumneavoastra programe.
1. Utilizarea constantelor
O constanta este pur si simplu o valoare care este... constanta, cu alte cuvinte o valoare care
nu se modifica, n acest sens, constantele sunt opusele variabilelor, deoarece valoarea unei
variabile se poate modifica pe durata executiei unui program.
Pentru a defini o constanta, folositi functia define().
Sa consideram urmatorul exemplu:
define("PI", 3.14159);
- Aceasta instructiune defineste constanta "PI", atribuindu-i valoarea 3.14159. Dupa ce a fost
definita, o constanta se poate folosi n cadrul unei expresii.
De exemplu, puteti calcula aria unui cerc dupa cum urmeaza:
$arie = PI * $raza * $raza;
- Observati ca referintele la o constanta nu folosesc simbolul dolarului. Astfel, o constanta

poate fi cu usurinta deosebita de o variabila. Multi programatori scriu numele constantelor
folosind numai majuscule, ceea ce le face si mai simplu de identificat.
O functie conexa, defined(), poate determina daca o anumita constanta a fost definita.
De exemplu, cu ajutorul urmatoarei instructiuni PHP puteri determina daca fost definita
constanta Pi:
echo defined("PI");
- Retineti ca numele care va fi testat este delimitat prin ghilimele duble.

Functia defined() returneaza valoarea 1 (unu) daca respectiva constanta a fost specificata; n
caz contrar, returneaza zero
In acest exemplu, instructiunea echo va afisa valoarea 1.
Pe lnga sporirea lizibilitatii programelor, constantele pot facilita modificarea acestora.
Sa presupunem ca ati scris un program care contine multe calcule ce folosesc valoarea
3,14159, iar ulterior ati descoperit ca trebuia sa folositi valoarea mai exacta
3,1415926535898. Descoperirea si modificarea fiecarei aparitii a valorii originale poate fi o
activitate mare consumatoare de timp. Dar, daca ati definit o constanta pentru reprezentarea
valorii, numarul 3,14159 va aparea o singura data n program si va fi necesara doar o singura
modificare a constantei.
Valoarea "pi" este folosita extrem de frecvent n unele calcule. Pentru comoditate, PHP
furnizeaza o functionalitate mai indicata dect definirea unei constante cu valoarea pi, functia
pi() returneaza valoarea respectiva, cu 14 cifre semnificative (3.1415926535898).
Astfe, puteti calcula aria unui cerc folosind urmatoarea expresie:
$arie= pi() * $raza * $raza;
2. Lucrul cu variabile dinamice

Daca o constanta poate spori lizibilitatea si simplitatea modificarii programelor, variabilele
dinamice ngreuneaza ntelegerea si posibilitatea de a opera schimbari n program.
Iata un exemplu simplu de variabila dinamica, denumita "$$film" :
<?php
$oameni_buni = 12;
$film = "oameni_buni";
echo $$film;
?>
O variabila dinamica este denumita folosind doua simboluri ale dolarului ($$) si este asociata
cu o variabila obisnuita care are un nume similar si include un singur simbol al dolarului.
In exemplul de mai sus, variabila dinamica $$film este asociata cu variabila obisnuita, dar cu
aceasi nume, $film.
Valoarea unei variabile obisnuite da numele (fara un simbol al dolarului) unei a doua
variabile ordinare, n exemplu nostru, a doua variabila obisnuita este $oameni_buni.

Valoarea acestei a doua variabile obisnuite este valoarea variabilei dinamice: n exemplu,
aceasta este valoarea 12. Deci valoarea variabiei dinamice $$film, si care va fi afisata de
functia "echo" este 12.
O variabila dinamica nu contine, practic, propria sa valoare. n schimb, contine
amplasamentul unde se poate gasi valoarea; cu alte cuvinte, numele unei alte variabile.
Daca variabilele dinamice vi se par derutante, asa e, variabilele dinamice sunt derutante. Sunt
rar folosite, uneori este posibila reducerea dimensiunilor unui program folosind una sau mai
multe variabile dinamice.
3. Lucrul cu tipuri de variabile

In lectia 2 ati invatat despre tipul variabilelor: Boolean, Integer, Float, String, Array,
Object, Resource, Null.
. O consecinta a caracterului dinamic al tipurilor de variabile din limbajului PHP este aceea
ca nu trebuie sa specificati tipul variabilelor. PHP determina tipul variabilei n functie de tipul
ultimei valori atribuite variabilei. Cu toate acestea, caracterul dinamic al tipurilor nu va
scuteste de problemele legate de tipuri. Trebuie sa cunoasteti tipurile acceptate si ceea ce se
ntmpla cnd n cadrul expresiilor se folosesc doua sau mai multe tipuri.
Sa luam n considerare urmatorul script PHP scurt:
$x = 1;
$y = 2.5;
$z = $x+$y;
echo $z;
- Instructiunea de atribuire care stocheaza o valoare n variabila $z este interesanta, deoarece

expresia din membrul drept include un operand Integer (ntreg) si un operand de tip float. Ce
valoare va aparea la iesire? Raspunsul corect este 3.5, o valoare de tip float.
Cnd o expresie aritmetica foloseste mai multe tipuri de variabile, PHP executa conversia
automata a tipului. Daca unul dintre operanzi este de tip float, PHP trateaza ceilalti operanzi
ca si cum ar fi de tip float, executa calculele si returneaza rezultatul ca valoare de tip float.
Este important sa ntelegeti faptul ca prin conversia de tip nu se modifica tipurile variabilelor
unei expresii; acestia sunt pur si simplu tratati ca si cum ar fi fost de un alt tip.
In cadrul exemplului, variabila $x ramne de tip nteger, chiar daca PHP o trateaza ca o
valoare de tip float pentru a executa calculele.
Sirurile (variabilele de tip string) pot fi de asemenea supuse unei conversii de tip. Sa
examinam urmatorul exemplu:
$x = 1;
$y = $x+ "inca 1";
echo $y
- Aici cuvntul "inca" din sirul text este ignorat.

Valoarea afisata este 2, adica suma dintre valoarea variabilei $x si valoarea numerica a sirului
text, care este 1. Valoarea numerica si tipurile unui sir sunt determinate prin respectarea
urmatoarelor reguli:
1. Daca sirul ncepe cu o valoare numerica, valoarea sirului este data de valoarea
numerica respectiva; n caz contrar, valoarea sirului este zero.
2. Daca un punct zecimal sau un exponent (e sau E), este asociat cu valoarea
numerica, tipul variabilei rezultante este float; n caz contrar, tipul valorii rezultante
este un ntreg.
4. Conversia manuala a tipului variabilelor

Daca preferati, puteti prelua controlul conversiei tipului variabilei sau puteti modifica tipul
unei variabile. Pentru a prelua controlul conversiei de tip, puteti converti fortat un operand de
la un tip la altul, proces cunoscut sub numele de "conversie fortata de tip" sau pur si simplu
conversie fortata.
n continuare, este dat un exemplu unei astfel de conversie de tip, unde puteti vedea modul de
efectuare a acesteia:
$x = 1;
$y = 2.5;
$z = $x + (int)$y;
echo $z
Conversia fortata de tip, si anume (int), determina tratarea variabilei $y ca pe un ntreg

(integer), iar valoarea acesteia devine 2, n loc de 2.5, care este valoarea reala a variabilei $y.
Astfel valoarea lui $z care va fi afisata de expresia "echo" este 3.
Tabelul urmator indica si alte conversii fortate de tip care se pot folosi si expresiile care
trebuesc utiizate:
Conversie fortata
Rezultat
(int), (integer)
- Conversie fortata la ntreg
(real), (double),
- Conversie fortata la dublu
(float)
(string)
- Conversie fortata la sir
- Conversie fortata la tablou
(array)
(matrice)
(object)
- Conversie fortata la obiect
O alta modalitate de a trata o variabila ca si cum ar fi de un tip specificat este folosirea unor
functii specifice.
Ca exemplu de utilizare a uneia dintre functiile respective, luati n considerare si studiati
urmatorul exemplu:
<?php
$x = 1.5;
$y = intval($x);
echo $x;
echo "<br />$y";
?>
1.5
1
Valoarea 1.5 este afisata ca valoare a variabilei $x, iar valoarea l este afisata ca valoare a
variabilei $y.
Tabelul urmator prezinta si alte functii foosite pentru a trata o variabila ca si cum ar fi de alt
tip.
Functie
Operatie
doubleval(),
- Trateaza argumentul ca fiind de tip
floatval()
dublu.
intval()
ntreg.
strval()
string
Nici conversia normala si nici cea fortata nu modifica tipul unei variabile. Ambele
mecanisme determina tratarea variabilelor doar in expresia respectiva ca si cum ar fi de un alt
tip.
Totusi, modificarea tipului unei variabile este posibila prin utilizarea functiei settype().
Acest procedeu este ilustrat n urmatorul exemplu:
$x = 1.5;
settype($x,"integer");
echo $x; // Va afisa valoarea 1
- Tipul variabilei $x va fi schimbat in "integer", astfel valoarea afisata a variabilei $x este 1,

deoarece fractia zecimala se pierde atunci cnd functia settype() converteste valoarea float la
o valoare ntreaga.
Valorile posibile pentru al doilea argument al functiei settype(), si anume argumentul care
specifica tipul dorit, sunt:
"integer"
"double"
"string"
"array"
"object"
Sa ne amintim din lectia 2 ca exista o functie conexa, gettype(), care returneaza un sir care
indica tipul variabilei specificate. Scriptul urmator afiseaza "integer", care indica tipul
variabilei $x:
$x = 1;
echo gettype($x);
Functii pentru variabile si valori

In aceasta pagina sunt functii PHP utile in lucru cu variabile si tipurile lor de valori.
1. empty($var)
- Returneaza TRUE daca variabila "$var" e considerata goala sau cu valoare vida, altfel,
FALSE. Functia "empty()" va returna TRUE, daca $var are una din urmatoarele valori: 0, "",
"0", NULL, FALSE, array().
<?php
$var = '0';
if (empty($var)) {
echo '$var are valoare nula sau zero';
}
?>
2. floatval($var)
- Returneaza valoarea float (numar cu zecimale) a lui "$var", care poate fi numar, ecuatie sau
sir. Similara este si functia "doubleval()".
<?php
$var = '123.456';
echo floatval($var);
?>
// 123.456
3. get_defined_vars()
- Returneaza un array multidimensional ce contine o lista cu toate variabilele definite.
<?php
$arr = get_defined_vars();
print_r($arr["_POST"]);
// Returneaza toate variabilele $_POST
?>
4. get_resource_type(resursa)
- Returneaza un sir cu tipul resursei din parametru.

<?php
$c = mysql_connect();
echo get_resource_type($c);
// mysql link
$fp = fopen("marplo.net", "w");

echo get_resource_type($fp);
// file
?>
5. gettype($var)
- Returneaza tipul variabilei "$var". Un sir cu unul din urmatoarele tipuri: boolean, integer,
double, string, array, object, resource, NULL, unknown type.
<?php
$var1 = 8;
// integer
$var2 = "8";
// string
$var3 = array(8=>'http://www.marplo.net');
// array
$var4 = true;
?>
// boolean
6. intval($var)
- Transforma valoarea variabile "$var" in numar natural.
<?php
$var1 = 8.9;
echo intval($var1);
// 8
$var2 = "08";
echo intval($var2);
// 8
$var3 = -7.8;
echo intval($var3);
?>
// -7
7. is_array($var)
- Returneaza TRUE daca "$var" e o matrice (Array), in caz contrar, FALSE.
<?php
$lectii = array('http://www.marplo.net', 'php', 'html', 'css');
if (is_array($lectii)) {
echo '$lectii e o matrice';
}
?>
8. is_bool($var)
- Returneaza TRUE daca "$var" e de tip "boolean", in caz contrar, FALSE.
<?php
$var = true;
if (is_bool($var)) {
echo '$var e de tip boolean';
}
?>
9. is_float($var)
- Returneaza TRUE daca "$var" e un numar cu virgula (cu zecimale), in caz contrar, FALSE.
Acelasi rezultat il dau si functiile "is_double()" si "is_real()".
<?php
$nr = 78.9;
if (is_float($nr)) {
echo '$nr e un numar cu zecimale';
}
?>
10. is_int($var)
- Returneaza TRUE daca "$var" e un numar natural (fara zecimale), in caz contrar, FALSE.
Acelasi rezultat il dau si functiile "is_integer()" si "is_long()".
<?php
$nr = 78;
if (is_int($nr)) {
echo '$nr e un numar natural';
}
?>
11. is_null($var)
- Returneaza TRUE daca "$var" are valoarea nula, in caz contrar, FALSE.
<?php
$var = null;
if (is_null($var)) {
echo '$var are valoarea NULL';
}
?>
12. is_numeric($var)
- Returneaza TRUE daca "$var" e un numar (cu sau fara zecimale), in caz contrar, FALSE.
<?php
$nr = 078.9;
if (is_numeric($nr)) {
echo '$nr e un numar';
}
?>
13. is_object($var)
- Returneaza TRUE daca "$var" e o variabila de tip obiect, in caz contrar, FALSE.
<?php
// Se creaza o functie de lucru
function get_vars($obj) {
// Daca variabila $obj e un obiect, returneaza tipul de valori din ea
if (is_object($obj)) {
return var_dump($obj->get_vars);
}
else {
return '$obj nu e de tip obiect';
}
}
// Defineste o clasa si-i adaga un eveniment cu apel la functie
$obj = new stdClass();
$obj->get_vars = array('cursuri', 'tutoriale', 'jocuri')
// Afiseaza rezultatul apelarii functiei cu $obj
echo get_vars($obj);
// array(3) { [0]=> string(7) "cursuri" [1]=> string(9) "tutoriale"
[2]=> string(6) "jocuri" }
?>
14. is_string($var)
- Returneaza TRUE daca "$var" e un sir, in caz contrar, FALSE.
<?php
$var = 'sir test';
if (is_string($var)) {
echo '$var e un sir';
}
?>
15. isset($var)
- Returneaza TRUE daca "$var" e setata (exista in domeniul de lucru, indiferent de valoarea
ei), in caz contrar, FALSE.
<?php
$v = '';
if (isset($v)) {
echo 'Variabila exista';
}
?>
16. print_r(array)
- Afiseaza un sir care prezinta cheile si elementele dintr-o matrice (array). Daca parametru
"array" e un sir sau numar, va afisa valoarea lui.
<?php
$aray = array('site'=>'www.marplo.net', 'php'=>'tutoriale');
print_r($aray);
// Array ( [site] => www.marplo.net [php] => tutoriale )
$var = 'Un sir oarecare';
print_r($var);
// Un sir oarecare
?>
17. serialize($var)
- Stocheaza valoarea /valorile variabilei "$var" intr-un sir. Variabila din parametru poate fi si
de tip Array sau Object. Aceasta functie este utila mai ales pentru stocarea ori transmiterea
datelor unei matrice sau obiect, mentinandu-le structura.
- In cazul obiectelor, se face "serialize" la instanta obiectului (vezi exemplul urmator, de la
"unserialize()"), si sunt salvate in sir variabilele si valorile lor dar nu si metodele (functiile),
ci doar numele lor.
<?php
$aray = array('site'=>'www.marplo.net', 'php'=>'tutoriale');
// Transforma si adauga elementele /valorile variabilei $aray intr-un sir specific
$sir_var = serialize($aray);
echo $sir_var;
// a:2:{s:4:"site";s:14:"www.marplo.net";s:3:"php";s:9:"tutoriale";}
// Creaza o variabila cu sirul serialized identic de mai sus
$sir_serialized = 'a:2:{s:4:"site";s:14:"www.marplo.net";s:3:"php";s:9:"tutoriale";}';
// Transforma acest sir in tipul initial de variabila
$get_var = unserialize($sir_serialized);
print_r($get_var);
// Array ( [site] => www.marplo.net [php] => tutoriale )
?>
18. unserialize(sir)
- Creaza (Retransforma) la forma initiala structura unei variabile care a fost transformata in
sir cu "serialize()". Vezi si exemplul de mai sus.
<?php
// Se creaza o clasa simpla
class test {
public $nr = 8;
// O metoda (functie) a clasei (afiseaza valoarea lui $nr)
public function show_nr() {
echo $this->nr;
}
}
// Creaza instanta la aceasta clasa
$use_class = new test;
// Stocheaza clasa (instanta ei), cu serialize, intr-un sir
$sir_class = serialize($use_class);
echo $sir_class;
// O:4:"test":1:{s:2:"nr";i:8;}
// Recreaza instanta la clasa stocata cu serialize in $sir_class
$get_class = unserialize($sir_class);
// Apeleaza metoda clasei, cu instanta stocata acum in $get_class
$get_class->show_nr();
// 8
?>
19. settype($var, 'tip')
- Seteaza tipul variabile "$var" in "tip", acesta poate fi unul din urmatoarele siruri: "boolean",
"integer", "double", "string", "array", "object", "NULL". Returneaza TRUE in caz de succes,
altfel, FALSE.
<?php
$var = 7.8;
echo gettype($var);
// double
// Modifica tipul variabilei, in "string"

settype($var, 'string');
echo gettype($var);
// string
?>
20. strval($var)
- Preia intr-un sir valoarea variabilei "$var".
<?php
$var = 7*8;
echo strval($var);
?>
// 56 (sir)
21. unset($var)
- Distruge variabila "$var".
<?php
$aray = array('key'=>'test', 'php'=>'functii');
print_r($aray);
// Array ( [key] => test [php] => functii )
// Distruge un element din matrice
unset($aray['key']);
print_r($aray);
// Array ( [php] => functii )
?>
22. var_dump($var)
- Afiseaza informatii detaliate despre variabila din parametru, cum ar fi: tipul ei, numarul de
elemente si valoarea (valorile) din ea.
<?php
var_dump($aray);
// array(2) { ["key"]=> string(4) "test" ["php"]=> string(7)
"functii" }
$sir = 'Sir test';
var_dump($sir);
?>
// string(8) "Sir test"
23. var_export($var, true)

- Parametrul "true" e optional, cand acesta este adaugat, functia returneaza un sir cu structura
variabilei "$var", care poate fi exportat sub forma de sir in alta variabila. Daca parametrul
"true" nu e adaugat, afiseaza direct structura completa a lui "$var". E similara cu
"var_dump()", diferenta fiind ca "var_export()" returneaza structura variabilei asa cum e
scrisa, valida cod PHP.
<?php
$get_var = var_export($aray, true); // Exporta structura lui $aray, ca sir, in alta variabila
echo $get_var;
// array ( 'key' => 'test', 'php' => 'functii', )
$sir = 'Sir test';
var_export($sir);
?>
// 'Sir test'
Instructiuni conditionale if() else
Invatati sa definiti si sa folositi valorile de tip adevarat/fals
Invatati sa ntelegeti si sa scrieti instructiunile if si else
1. Utilizarea valorilor de tip adevarat / fals

Majoritatea programelor utile nu se comporta n exact acelasi mod la fiecare rulare a acestora,
n schimb, programele iau decizii, executnd uneori o operatie si alteori alta, n functie de
circumstante.
Programele PHP iau decizii prin evaluarea unor expresii conditionale si executa instructiuni
bazate pe rezultatele acestor evaluari. Expresiile conditionale sunt asimilate ca avnd una din
doua valori: TRUE (adevarat) sau FALSE (fals). Uneori, expresiile conditionale se mai
numesc si expresii booleene, n onoarea matematicianului care le-a studiat, George Boole.
Constanta TRUE are valoarea l, iar FALSE are valoarea 0.
O modalitate utila de a forma o expresie conditionala consta n utilizarea operatorilor logici
pentru compararea a doua valori numerice. Sa luam urmatorul exemplu:
$a < 1;
Aceasta expresie conditionala foloseste operatorul <, care are, n esenta, aceeasi semnificatie
ca n algebra. Expresia are valoarea TRUE daca si numai daca valoarea variabilei $a este mai
mica dect 1; n toate celelalte cazuri, are valoarea FALSE.
Puteti forma expresii conditionale complexe prin unirea a doua expresii conditionale cu
ajutorul unui operator logic. De exemplu, expresia urmatoare este adevarata daca ambele
expresii conditionale care o compun sunt adevarate:
$a < 1 AND $b < 1
Cu alte cuvinte, expresia este adevarata daca att variabila $a, ct si variabila $b au valori mai
mici dect 1.
PHP furnizeaza un set de asemenea operatori relationali, prezentati pe scurt n tabelul de mai
jos.
Puteti folosi operatorii logici pentru compararea sirurilor; cu toate acestea, un sir care apare
ntr-o expresie conditionala este convertit la o valoare numerica nainte de evaluarea
expresiei. Deseori, se ajunge la rezultate neasteptate, n general, valorile sirurilor trebuie sa
fie comparate folosind o functie de comparare a sirurilor; aceste functii vor fi explicate n
lectiile urmatoare.
Operator
$a < $b
$a > $b
$a >= $b
$a <= $b
$a = $b
$a == $b
$a != $b
Operatori logici
Descriere
- TRUE daca valoarea lui $a este mai mica dect valoarea lui $b.
- TRUE daca valoarea lui $a este mai mare dect valoarea lui $b.
- TRUE daca valoarea lui $a este mai mare sau egala cu valoarea lui $b
- TRUE daca valoarea lui $a este mai mica sau egala cu valoarea lui $b
- TRUE daca valoarea lui $a este egala cu valoarea lui $b.
- TRUE daca $a si $b sunt identice; cu alte cuvinte, daca $a si $b au
acelasi tip si aceeasi valoare
- TRUE daca valoarea lui $a este diferita de valoarea lui $b
- TRUE daca $a si $b nu sunt identice; cu alte cuvinte, daca $a si $b nu

sunt de acelasi tip si aceeasi valoare
$x AND $y - TRUE daca att $x, ct si $y sunt adevarate
$x && $y - TRUE daca att $x, ct si $y sunt adevarate.
$x OR $y - TRUE daca minimum una din expresiile $x sau $y este adevarata.
$x || $y - TRUE daca minimum una din expresiile $x sau $y este adevarata.
$x XOR $y - TRUE daca numai una din expresiile $x sau $y este adevarata.
!$x
- TRUE daca $x este FALSE
NOT $x - TRUE daca $x este FALSE
$a !== $b
Retineti ca puteti prefixa o expresie conditionala cu operatorul !, care inverseaza valoarea

"TRUE" sau "FALSE" a operandului sau.
Observati ca PHP foloseste doi operatori logici care executa aceeasi operatie (AND si &&)
respectiv (OR si ||).
Cu toate acestea, operatorii difera din punctul de vedere al precedentei - caracteristica care
determina ordinea n care sunt executate operatiile n timpul evaluarii expresiilor. Operatorii
&& si || au o precedenta relativ ridicata, n timp ce operatorii AND si OR au o precedenta
relativ redusa. Este la fel ca in aritmetica unde, intr-o ecuatie ca aceasta: a + b * c se executa
intai inmultirea si apoi adunarea, chiar daca ordinea lor este alta (daca nu sunt folosite
paranteze). La fel si in PHP, se pot folosi paranteze rotunde pentru a controla ordinea
executarii operatiilor.
Pentru comoditate, puteti forma expresii conditionale fara un operator logic. De exemplu,
daca $a este o variabila numerica, puteti folosi expresia $a ca expresie conditionala. Expresia
este considerata ca avnd valoarea FALSE daca valoarea variabilei $a este zero, respectiv
valoarea TRUE daca valoarea variabilei respective este diferita de zero.
Daca folositi un sir ca expresie conditionala, expresia are valoarea FALSE daca sirul este vid
sau daca are valoarea speciala "\0", care simbolizeaza un octet cu valoarea zero.
Similar, utilizarea unei valori nedefinite ca expresie conditionala determina obtinerea valorii
FALSE. Daca folositi un tablou sau un obiect ca expresie conditionala, aceasta are valoarea
FALSE daca tabloul sau obiectul sunt vide (fara vreo valoare); n caz contrar, expresia are
valoarea TRUE.
2. Scrierea instructiunilor "if"

Expresiile conditionale sunt esentiale pentru scrierea instructiunilor conditionale, prin care se
iau decizii.
Una dintre cele mai simple si folosite instructiuni conditionale este instructiunea : if.
If(conditie) {
Instructiune(1);
Instructiune(2);
..................
}
- Dupa cum se observa dupa if urmeaza o pereche de paranteze rotunde in interiorul carora se
plaseaza conditia, adica o expresie logica a carei rezultat poate fi TRUE sau FALSE. Daca si
numai daca rezultatul expresiei logice (conditia) este TRUE se vor executa instuctiunile :
Instructiune(1), apoi Instructiune(2), etc...
Se observa ca acest set de instructiune se plaseaza intre acolade. Doar intr-un singur caz
aceste acolade nu sunt necesare si anume: in cazul in care este scrisa doar o singura
instructiune.
Daca rezultatul expresiei logice dintre paranteze rotunde este FALSE , setul de instructiuni
dintre acolade nu se va executa, controlul programului va trece mai departe.
Iata inca un exemplu, practic:
<?php
$numar = 12;
if ($numar > 10) {
echo "Acesta este un numar mai mare decat 10";
}
?>
- Atunci cnd este executat scriptul, instructiunea if evalueaza expresia conditionala $numar
> 10, care este adevarata (TRUE) numai daca valoarea variabilei $numar este mai mare dect
10. Daca valoarea variabilei $numar este mai mare decat 10, se va executa instructiunea echo,
in caz contrar programul va trece mai departe.
In general, limbajul PHP ignora spatiile albe. In mod conventional, o instructiune asociata
unei instructiuni "if" este scrisa decalat n raport cu aceasta. Acest procedeu este recomandat
deoarece prin utilizarea sa este facilitata citirea programului.
Utilizarea instructiunii "else"

Sa presupunem ca doriti sa executati o instructiune atunci cnd o conditie este TRUE si o alta
instructiune cnd conditia este FALSE. Instructiunea else va permite sa procedati astfel, dupa
cum urmeaza:
If(conditie) {
Instructiune(1);
Instructiune(2);
..................
}
else {
Instructiune(3);
Instructiune(4);
..................
}
In acest din urma caz daca expresia logica din paranteze: conditie este adevarata se vor
executa instructiunile: Instructiune(1); Instructiune(2); , iar daca valoarea expresiei logice :
conditie are valoarea FALSE se vor executa instructiunile: Instructiune(3); Instructiune(4);
Instructiunea asociata unei instructiuni if sau else poate fi ea nsasi o instructiune if. O
asemenea instructiune if se numeste "instructiune if imbricata".
Iata un exemplu de instructiune if imbricata:
<?php
$numar = 88;
if ($numar > 10) {
if ($numar > 100) {
echo "Acesta este un numar mai mare decat 100";
}
else {
echo "Acesta este un numar mai mic decat 100, dar mai mare decat 10";
}
else {
echo "Acesta este un numar mic";
}
?>
Exemplul afiseaza mesajul "Acesta este un numar mai mare decat 100" daca valoarea
variabilei $numar depaseste 100; n caz contrar, daca valoarea variabilei $numar este mai
mare dect 10 si mai mica decat 100, se afiseaza mesajul "Acesta este un numar mai mic
decat 100, dar mai mare decat 10". Daca valoarea variabilei $numar este mai mica sau egala
cu 10, exemplul afiseaza mesajul "Acesta este un numar mic".
Instructiunile if imbricate pot deveni extrem de dificil de nteles daca numarul de instructiuni
si nivelul de imbricare nu sunt relativ reduse. Deci trebuie sa le folositi cu economie.
O instructiune corelata att cu instructiunea if, ct si cu instructiunea else, este instructiunea
elseif. Cnd este folosita corect, poate fi mai simplu de nteles dect o instructiune if
imbricata, logic echivalenta cu aceasta.
Iata un exemplu de instrutiune else if():
<?php
$numar = 88;
if ($numar > 100 ) {
echo "Acesta este un
}
elseif ($numar > 10) {
}
elseif ($numar > 1) {
}
else {
}
?>
numar mai mare decat 100";

numar mai mic decat 100, dar mai mare decat 10";
numar mic";
numar foarte mic";
Exemplul extinde functionalitatea exemplului anterior, afisnd mesajul "Acesta este un numar
foarte mic" pentru valori ale variabilei $numar mai mici sau egale cu 1.
ntr-un caz general, cu o instructiune if si cu o instructiune else poate fi asociat un numar
mult mai mare de instructiuni elseif. PHP evalueaza expresiile conditionale n mod succesiv,
pornind de la expresia conditionala asociata instructiunii "if". PHP executa instructiunea
asociata primei expresii conditionale care are valoarea TRUE; daca nici o expresie
conditionala nu are valoarea TRUE, PHP executa instructiunea asociata cu instructiunea else.
Este permisa omiterea instructiunii else, caz n care nu este executata nici o instructiune daca
nici una din expresiile conditionale nu are valoarea TRUE.
Instructiuni conditionale switch
Invatati sa ntelegeti si sa scrieti instructiunea switch si instructiunile conexe acesteia:

break, default.
Scrierea instructiunilor switch, break si default
In cazul in care vrem sa comparam valoarea unei singure variabile cu o succesiune de valori,
in locul instructiunii "if" putem folosi instructiunea switch:
De exemplu, sa presupunem ca valoarea variabilei $numar este l, 2 sau 3, reprezentnd
respectiv dimensiunile "mica", "medie" si "mare". Iata un mic script care afiseaza
dimensiunile asociate valorilor variabilei $numar, folosind functia switch alaturi de break si
default care vor fi explicate mai jos:
<?php
switch($numar) {
case(1):
echo "mic";
break;
case(2):
echo "mediu";
break;
case(3):
echo "mare";
break;
default:
echo "Acesta nu este un cod valabil";
}
?>
- Actiunea unei instructiuni switch este determinata de valoarea unei expresii ntregi, nu de
valoarea unei expresii conditionale. Numele variabilei este dat ntre parantezele care urmeaza
dupa cuvntul cheie switch. Acoladele delimiteaza o serie de instructiuni case si o
instructiune default optionala, fiecare dintre instructiunile cuprinse ntre acolade putnd avea
instructiuni asociate.
Cnd este executata, instructiunea switch ncearca sa stabileasca o identitate ntre valoarea
variabilei sale si valoarea asociata unei instructiuni case. Se vor executa instructiunile
asociate primei instructiuni "case" pentru care identitatea respectiva este valabila.
Daca valoarea variabilei din instructiunea switch nu corespunde nici uneia din valorile
asociate instructiunilor case, se vor executa instructiunile asociate instructiunii default, daca
exista o asemenea instructiune (ne este obligatorie).
Un procedeu de programare indicat consta n aceea ca fiecare instructiune case din cadrul
unei instructiuni switch sa se ncheie cu o instructiune break.
; Instructiunea break determina ncheierea executiei instructiunii switch, sare peste "caseurile" ramase si se executa codurile care mai sunt (daca exista) dupa "switch". n absenta
instructiunii "break", executia trece la urmatoarea instructiune "case" sau "default", fapt
nedorit n majoritatea cazurilor.
Nu este necesar sa folositi numere ntregi consecutive n instructiunile case ale unei
instructiuni switch. Daca preferati, puteti folosi numere ntregi non-consecutive, numere cu
virgula sau siruri. Valoarea de la "case" se poate adauga si fara paranteze, separata prin spatiu.
- Exemplu:
<?php
$site = 'marplo';
switch($site) {
case 1:
echo 'php.net';
break;
case 'coursesweb':
echo 'http://coursesweb.net';
break;
case 'marplo':
echo 'www.marplo.net';
break;
default: echo 'google.com';
}
?>
2. Operatorul ? :
Operatorul conditional ?:, denumit uneori "operator ternar" sau "operator ntrebare-doua
puncte", constituie o alta modalitate de a scrie decizii n PHP.
Acest operator formeaza o expresie care se poate folosi n multe contexte PHP. Iata sintaxa de
utilizare a acestuia:
expresie-conditionala ? valoare-TRUE : valoare-FALSE
Observati cum semnul ntrebarii este separat de caracterul doua puncte prin valoarea valoareTRUE.
Operatorul conditional si evalueaza expresia conditionala. Daca expresia este evaluata la
valoarea TRUE, operatorul conditional returneaza valoarea valoare-TRUE; n caz contrar,
returneaza valoarea valoare-FALSE.
De exemplu, sa luam n considerare urmatoarea instructiune de atribuire, care foloseste un
operator conditional:
$a = ($b > $c) ? 10
: 20;
Aceasta instructiune de atribuire compara valorile variabilelor $b si $c. Daca valoarea

variabilei $b este mai mare dect aceea a variabilei $c (adica TRUE), atunci variabilei $a i
este atribuita valoarea 10; n caz contrar, variabilei respective i este atribuita valoarea 20.
Instructiuni repetitive for() si while()
Invatati sa ntelegeti si sa scrieti instructiunile while(), do while si for()
Scrierea instructiunilor "for"

Instructiunea for() este o instructiune bucla sau o instructiune iterativa; cu alte cuvinte, o
instructiune care executa n mod repetat instructiunile asociate.
Sintaxa generala a instructiunii for este urmatoarea:
for(expresie1; conditie; expresie2) {
Instructiune(1);
Instructiune(2);
Instructiune(3);
.............
}
expresie1 se executa o singura data si anume la inceputul instructiunii; conditie este o
expresie logica ; instructiunea for() se executa atita timp cat valoarea expresiei : conditie are
valoarea TRUE.
De fiecare data dupa executia instructiunilor dintre acolade se executa : expresie2.

Iata un exemplu practic de utilizare a unei instructiuni "for":
<?php
$suma = 0;
for ($n=1; $n<=3; $n++) {
$suma += $n;
echo "<br /> Suma intregilor de la 1 la $n este $suma.";
}
?>
Suma intregilor de la 1 la 1 este 1
n exemplu se calculeaza suma ntregilor cuprinsi ntre l si 3. Pentru aceasta, mai nti se
initializeaza variabila $suma la valoarea 0. Apoi se executa o instructiune for() care
incrementeaza n mod repetat valoarea variabilei $suma.
Pentru a vedea cum functioneaza mecanismul acestei instructiuni, sa examinam
componentele instructiunilor for().
Instructiunea "for" include trei expresii, care apar ntre paranteze; fiecare expresie este
separata de vecina sa printr-un caracter punct si virgula(;).
Prima expresie este expresia de initializare. Aceasta se executa atunci cnd PHP
ajunge la instructiunea for(). In exemplu, expresia de initializare atribuie valoarea
variabilei $n, ($n=1) variabila denumita "variabila de ciclare" sau "index".
A doua expresie este expresia de test. Aceasta este o expresie conditionala care indica
daca se executa sau nu corpul instructiunii, n general, face referire la variabila de
ciclare. In cadrul exemplului, expresia de test compara valoarea variabilei $n cu
valoarea 3 ($n <= 3).
Expresia de test este evaluata pentru prima data imediat dupa evaluarea expresiei de
initializare.
Cea de-a treia expresie este expresia pas. n general, aceasta modifica una sau mai
multe variabile la care se face referire n expresia test. n cadrul exemplului, expresia
pas incrementeaza valoarea variabilei $n ($n++).
Dupa care se trece la corpul instructiunii for(), aici, instructiunea $suma += $n si echo "Suma
intregilor de la 1 la $n este $suma."; reprezinta corpul instructiunii for.
Dupa executarea corpului functiei se verifica din nou expresia de test (conditie) dintre
paranteze, daca rezultatul este TRUE se trece mai departe la expresia "pas" (a treia din
paranteze) si mai departe la corpul functiei for(). Dupa aia din nou la expresia de test dintre
paranteze..., pana cand rezultatul este FALSE (in exemplu nostru, $n>3).
Instructiunea for() este utila pentru numarare si executarea n mod repetat a unor actiuni.
Scrierea instructiuni while
O instructiune while() sau do while are o singura conditie. Fara o expresie de initializare sau
o expresie pas; opereaza similar ca o instructiune "for()". n consecinta, urmatoarele doua
instructiuni sunt echivalente:
for ( ; $i<= 3; ) { $suma += $i; }
while ($i <= 3) { $suma ++ $i; }
Instructiunea while() executa un set de instructiuni atita timp cit valoarea expresiei "conditie"
este adevarata:
Forma generala a instructiuni while() este urmatoarea :
while(conditie) {
Instructiune(1);
Instructiune(2);
Instructiune(3);
.............
}
Setul de instructiuni Instructiune(1), Instructiune(2), etc... se vor executa atita timp cit
valoarea expresiei logice "conditie" are valoarea TRUE.
Sa studiem un exemplu practic:
<?php
$n = 0;
$suma = 0;
while ($n <= 3) {
$suma = $suma +$n;
$n++;
}
echo "Suma este $suma";
?>
In scriptul de mai sus avem la inceput (in afara lui "while") $n = 0 si $suma = 0, se verifica
conditia din paranteza a functiei while() ($n<=3), cum aceasta este TRUE (deoarece la
aceasta etapa $n = 0), se trece la executarea corpului functiei unde : $suma = $suma + $n si
$n++ (adica $n = $n + 1), astfel acum $n va fi egal cu 1, se verifica din nou conditia din
paranteze, care este TRUE ($n fiind acum egal cu 1), se executa iar corpul functiei..., si tot
asa se executa aceasta "bucla" pana cand la verificarea conditiei din paranteze rezultatul este
FALSE, in acest moment se incheie executia functiei while() si se trece mai departe la
urmatoarea functie (in cazul nostru: echo "Suma este $suma";, unde dupa executia functiei
while() $suma a devenit egala cu 6).
In browser va aparea urmatorul rezultat:
Suma este 6
Scrierea instructiuni do while

Diferenta dintre instructiunea while() si instructiunea do while este urmatoarea: daca la
instructiunea while() se verifica intai conditia si numai daca rezultatul este TRUE se trece la
executarea corpului functiei, in cazul functiei do while intai se executa corpul functiei si dupa
aceea se verifica conditia. De la do while corpul functiei va fi executat cel putin o singura
data, indiferent de rezultatul conditiei.
Forma generala a instructiuni do while este urmatoarea :
do {
Instructiune(1);
Instructiune(2);
Instructiune(3);
.............
} while(conditie);
Iata exemplul prezentat la functia while(), de data aceasta folosind functia do while :
<?php
$n = 0;
$suma = 0;
do {
$suma = $suma +$n;
$n++;
} while ($n <= 3);
echo "Suma este $suma";
?>
Rezultatul va fi acelasi: "Suma exte 6".
n general, este bine sa fiti prudent si sa folositi instructiunea while(), care evalueaza o
conditie de test nainte, de executarea corpului acesteia. Astfel, se evita executarea eronata a
corpului buclei.
Utilizare matrice - Array
nvatati modul de utilizare a matricelor pentru stocarea mai multor valori
nvatati cum sa accesati datele unei matrice (tablou)
Parcurgerea unui Array secvential
1. Utilizarea matricelor
Deseori este convenabila stocarea mai multor valori ntr-o variabila. O asemenea variabila se
numeste matrice (Array sau "tablou"), iar valorile individuale se numesc elementele
matricei. Aici, "matrice", "Array" sau "tablou" reprezinta acelasi lucru (in varianta engleza:
Array), fapt pentru care vom folosi orcare dintre aceste denumiri.
Fiecare element al unei matrici are doua elemente importante: cheia si valoarea elementului.
Matricele pot fi create folosind doua medode principale:
1 - utilizand direct instructiunile de atribuire
2 - folosind sintaxa array() despre care am vorbit in Lectia 2 despre tipul variabilelor.
1. Crearea de matrice folosind functia de atribuire
Pentru a crea o matrice, atribuiti unui element al matricei o valoare si o cheie. De exemplu,
urmatoarea instructiunea de atribuire:
$clasa[1] = "geometrie";
creeaza un tablou denumit "$clasa" si un element cu valoarea "geometrie" identificat prin

cheia "1".
Pentru a stoca n matrice o a doua valoare, puteti folosi urmatoarea instructiune de atribuire:
$clasa[2] = "algebra";
Pentru a obtine acces la un element al matricei, specificati numele matricei si valoarea cheii.
De exemplu, instructiunea de atribuire
$clasa_mate = $clasa[1];
Atribuie valoarea "geometrie" variabilei $clasa_mate.

Cheile folosite pentru identificarea elementelor unei matrice nu trebuie sa fie obligatoriu
numere consecutive; nici macar nu trebuie sa fie numere. De exemplu, iata instructiuni de
atribuire care creeaza o matrice ce stocheaza preferinte n materie de fructe:
$preferinte[Nelu] = "cirese";
$preferinte[Radu] = "mere";
$preferinte[Gabi] = "pere";
2. Crearea de matrice folosind sintaxa array()

Dincolo de utilizarea instructiunilor de atribuire, cealalta modalitate principala de creare a
unui tablou PHP consta n utilizarea functiei array(). Iata un exemplu simplu, care creeaza un
tablou avnd drept chei valori ntregi consecutive:
$limbaje = array("Perl", "PHP", "Python");
Deoarece valoarea cheilor nu a fost specificata, acestea vor fi automat trecute de program ca
numere intregi consecutive, incepand de la "0" (prima cheie va avea valoarea '0', a doua cheie
va avea valoarea '1', ...)
Aceasta instructiune creeaza o matrice care contine urmatoarele asocieri:
0 => Perl
1 => PHP
2 => Python
Daca doriti sa asociati unei valori o anumita cheie, puteti folosi operatorul =>, astfel:
$limbaje = array(10=>"Perl", "PHP", "Python");
Aceasta instructiune creeaza urmatoarea matrice:
10 => Perl
11 => PHP
12 => Python
Ca si n cazul utilizarii unei instructiuni de atribuire pentru crearea unei matrice valorile
cheilor nu trebuie sa fie consecutive si nici macar ntregi:
$limbaje = array("PHP"=>"Ridicat", "Python"=>"Mediu",

"Perl"=>"Redus");
Aceasta instructiune creeaza urmatoarea matrice:
PHP => Ridicat

Python => Mediu
Perl => Redus
2. Matrici multi-dimensionale
Este posibil ca un element al matricei sa fie de asemenea o matrice. In acest caz avem de-a
face cu o matrice multi-dimensionala.
Sa luam un exemplu practic :
<?php
$multiDimArray[firstLine] = array(1=>10, 2=>20, "a"=>"alpha");
$multiDimArray["nextLine"] = array(1=>20, 2=>40, "b"=>"beta");
echo "<br />".$multiDimArray["firstLine"][1];
echo "<br />".$multiDimArray["nextLine"][1];
echo "<br />".$multiDimArray["firstLine"]["a"];
echo "<br />".$multiDimArray["nextLine"]["b"];
?>
Sau putem scrie acelasi script si astfel (rezultatul e acelasi) :
<?php
$multiDimArray = array("firstLine"=>array(1=>10, 2=>20, "a"=>"alpha"),
"nextLine"=>array(1=>20, 2=>40, "b"=>"beta"));
echo "<br />".$multiDimArray["nextLine"][1];
echo "<br />".$multiDimArray["firstLine"]["a"];
echo "<br />".$multiDimArray["nextLine"]["b"];
?>
Rezultatul afisat va fi urmatorul :
10
20
20
alpha
beta
In exemplul de mai sus am declarat un array cu 2 linii si 3 coloane. Prima linie este
identificata de array-ul cu numele "fisrtLine", iar ce-a de-a doua linie este identificata de
"nextLine".
Observati de asemenea foloasirea in functia "echo" a operatorului de concatenare "."
impreuna cu "<br />" (care este un element din XHTML), pentru ca la afisarea in browser
fiecare rezultat al functiei "echo" sa fie trecut pe o linie noua. In caz contrar rezultatele ar fi
fost pe aceeasi linie : 10 20 20 alfa beta
3. Accesul la datele dintr-un array

Cnd ati stocat date ntr-un tablou, puteti obtine acces la valoarea unui element al tabloului
sau i puteti modifica valoarea prin intermediul cheii asociate elementului.
De exemplu, sa presupunem ca folositi urmatoarele instructiuni pentru a crea un tablou:
$x = array(1=>10, 2=>100, 3=>1000);
Puteti obtine acces la valoarea asociata cheii 2 prin intermediul unei instructiuni ca aceasta:
$y = 3*$x[2];
Similar, puteti modifica valoarea asociata cheii 3 prin intermediul unei instructiunu ca
aceasta:
$x[3] = 101;
4. Parcurgere Array numeric

Un Array ale carui chei sunt valori ntregi consecutive se numeste "Array numeric" (sau
secvential).
n general, valoarea cea mai mica a unei chei dintr-un tablou numeric este zero; totusi, puteti
crea array numeric incepand cu valoarea 1 sau orice alta valoare ntreaga ca valoare minima a
cheii.
n cazul n care cunoasteti valoarea minima a cheii unui tablou secvential, puteti parcurge
tabloul folosind o bucla for. Pentru aceasta, initializati variabila de bucla la valoarea cea mai
redusa a cheii. Folositi functia count() pentru a forma expresia de test (conditia) a buclei.
Functia count() returneaza numarul elementelor dintr-un tablou.
Iata un exemplu simplu
<?php
$limbaje = array(0=>"Perl", 1=>"PHP", 2 =>"Python");
$limita = count($limbaje);
for ($i = 0; $i < $limita; $i++) {
echo "<br />$i => $limbaje[$i]";

}
?>
Prima variabila $imbaje creeaza tabloul.
Cea de-a doua variabila $limita foloseste instructiunea count() pentru a obtine numarul
elementelor din tablou.
Instructiunea for foloseste variabila bucla $i pentru a parcurge iterativ (element cu element)
tabloul; corpul instructiunii include o instructiune echo care afiseaza cheia si valoarea
fiecarui element din tablou.
Datele de iesire vor fi astfel:
0 => Perl
1 => PHP
2 => Python
Sa ne concentram asupra problemei de a determina daca un tablou contine o anumita valoare.
Iata un exemplu:
<?php
$cauta = PHP; // se cauta in tabloul $limbaje valoarea $cauta
for ($i = 0; $i < $limita; $i++) {
echo "<br />Determinarea unei identitati cu $limbaje[$i]";
if ($cauta == $limbaje[$i]) {
echo "<br />$cauta este un limbaj excelent.";
}
}
?>
Prima variabila $imbaje creeaza tabloul n care se va cauta.
Cea de-a doua instructiune atribuie valoarea "PHP" variabilei $cauta; (n exemplu, se cauta
n tablou valoarea stocata n variabila $cauta).
Dupa comentariu (care incepe cu //), urmatoarea instructiune obtine numarul elementelor din
tablou si stocheaza aceasta valoare n variabila $limita.
Instructiunea for functioneaza ca mai nainte; de data aceasta nsa, corpul sau contine alte
instructiuni si se executa o alta operatie. O instructiune echo afiseaza valoarea fiecarui
element al tabloului pe masura ce parcurgerea tabloului avanseaza. Instructiunea if testeaza
fiecare element si afiseaza un mesaj daca valoarea elementului este una si aceeasi cu valoarea
variabilei $cauta.
Iata rezultatul rularii exemplului:
Determinarea unei identitati cu Perl
Determinarea unei identitati cu PHP
PHP este un limbaj excelent.
Determinarea unei identitati cu Python
Incepand cu versiunea PHP 5.4 a fost introdus un nou mod de a defini variabile array,
folosind o sintaxa scurta.
Ex.:
$arr = [];
// array gol, in loc de array();
$arr = [1, 2, 3, 4];
// array numeric
$arr = ['eng'=>'courseweb.net', 'ro'=>'marplo.net', 'num'=>8];

array asociativ
//
- Array-ul creat cu aceasta sintaxa poate fi accesat, modificat si parcurs ca orice array.
Instructiunea break
Observati ca parcurgerea continua chiar si dupa gasirea valorii cautate.
Cnd se cauta ntr-un tablou, executia cautarii poate fi oprita dupa gasirea elementului dorit;
continuarea parcurgerii in Array nu face dect sa iroseasca resursele calculatorului, fara a
afecta rezultatele operatiei.
Pentru a opri executia unei parcurgeri, puteti folosi instructiunea break, care determina
ncheierea imediata a buclei care o contine.
Iata cum se poate revizui exemplul anterior, astfel nct sa includa o instructiune break:
<?php
$cauta = PHP; // se cauta in tabloul $limbaje valoarea $cauta
for ($i = 0; $i < $limita; $i++) {
echo "<br />Determinarea unei identitati cu $limbaje[$i]";
if ($cauta == $limbaje[$i]) {
echo "<br />$cauta este un limbaj excelent.";
break;
}
}
?>
Acum, dupa stabilirea unei identitati, instructiunea break provoaca sistarea buclei for.
Iata datele de iesire rezultate, care acum omit examinarea inutila a elementului tabloului
asociat cu limbajul "Python":
Determinarea unei identitati cu Perl
Determinarea unei identitati cu PHP
PHP este un limbaj excelent.
Instructiunea continue
O instructiune corelata cu instructiunea break este continue.
Instructiunea continue opreste secventa curenta a buclei, determinnd evaluarea imediata a
expresiilor de incrementare si de test.
Ca un exemplu, sa presupunem ca doriti sa cautati n tabloul $limbaje pentru a determina
numarul limbajelor care au nume scurte, adica nume alcatuite din maximum 4 caractere. Iata
un exemplu care executa aceasta prelucrare a datelor:
<?php
$scurt = 0;
for ($i = 0; $i < $limita; $i++) {
$n = strlen($limbaje[$i]);
echo "<br />$limbaje[$i] are $n caractere lungime";
if ($n > 4) continue;
$scurt++;
}
echo "<br />Au fost gasite $scurt limbaje cu nume scurte.";
?>
O instructiune de atribuire stabileste valoarea initiala a variabilei $scurt la zero, folosita
pentru a numara numele scurte gasite.
Instructiunea for se aseamana celor folosite anterior. Corpul acestei instructiuni difera,
desigur, de cele folosite anterior. Valoarea variabilei $n este stabilita ca fiind egala cu
numarul caracterelor care compun numele limbajului, folosind functia strlen(), care
calculeaza lungimea unui sir.
Daca instructiunea if stabileste ca elementul curent al tabloului face referire la un limbaj cu
nume lung, se executa instructiunea continue.
Instructiunea continue determina trecerea parcurgerii la urmatorul element din tablou, fara a
mai executa expresia "$scurt++"; daca nu au mai ramas elemente n tablou, bucla for si
ncheie executia.
La finalizarea parcurgerii, o instructiune echo afiseaza numarul numelor scurte de limbaje
gasite n tablou. Iata rezultatul:
Perl are 4 caractere lungime
PHP are 3 caractere lungime
Python are 6 caractere lungime
Au fost gasite 2 limbaje cu nume scurte.
Functii pentru Array

Aici gasiti cateva din cele mai utile functii PHP pentru Array (matrice).
1. array_change_key_case(array, case)
- Transforma cheile din primul parametru (array) in majuscule sau litere mici, dupa cum e
specificat la "case" (CASE_UPPER sau CASE_LOWER). Default e CASE_LOWER. Daca
"array" nu e o matrice, returneaza FALSE.
<?php
$aray = array("FirSt"=>1, "SecOnd"=>8);
print_r(array_change_key_case($aray, CASE_UPPER));
// Va afisa:
?>
Array ( [FIRST] => 1 [SECOND] => 8 )
2. array_chunk(array, nr)
- Imparte "array" intr-un numar de sub-matrici, precizat la "nr", indexate de la 0. Daca "array"
nu are elemente, returneaza NULL.
<?php
$aray = array('a', 'b', 'c', 'd', 'e');
print_r(array_chunk($aray, 2));
// Va afisa:
Array ( [0]=>Array ( [0]=>a [1]=>b ) [1]=>Array ( [0]=>c [1]=>d )
[2]=>Array ( [0]=>e ) )
?>
3. array_combine(array_k, array_v)
- Creaza un array folosind valorile din "array_k" pentru chei, iar elementele din "array_v"
pentru valorile lor. Numarul de elementele din cele 2 matrici trebuie sa fie egal, in caz contrar
returneaza FALSE.
<?php
$a = array('a', 'b', 'c');
$b = array('x', 'y', 'z');
$c = array_combine($a, $b);
print_r($c);
// Va afisa:
?>
Array ( [a] => x [b] => y [c] => z )
4. array_count_values(array)
- Returneaza o matrice cu numarul de repetari a fiecarui element din "array".
<?php
$aray = array('a', 8, 'a', 'b', 'a', 8, 'c');
$re = array_count_values($aray);
print_r($re);
// Return:
?>
Array ( [a] => 3 [8] => 2 [b] => 1 [c] => 1 )
5. array_diff(array1, array2)
- Returneaza o matrice cu elementele din "array1" care nu se gasesc in "array2".
<?php
$aray1 = array("a"=>"green", "blue", "red");
$aray2 = array("b"=>"green", "yellow", "red");
$re = array_diff($aray1, $aray2);
print_r($re);
// Va afisa:
?>
Array ( [1] => blue )
6. array_flip(array)
- Schimba valorile si cheile intre ele. Din valorile care se repeta o pastreaza pe ultima.
<?php
$aray = array("a"=>1, "b"=>2, "c"=>2);
$re = array_flip($aray);
print_r($re);
// Va afisa:
?>
Array ( [1] => a [2] => c )
7. array_intersect(array1, array2, ...)

- Returneaza o matrice cu toate valorile din "array1" care se gasesc in toati ceilalti "array"
dati ca parametri.
<?php
$aray1 = array("a"=>1, "b"=>'a', "c"=>'d', 'e');
$aray2 = array(8, 'a', 'd');
$aray3 = array(1, 'a', 'c', 'd');
$re = array_intersect($aray1, $aray2, $aray3);
print_r($re);
// Return:
?>
Array ( [b] => a [c] => d )
8. array_key_exists(cheie, array)
- Returneaza TRUE daca "cheie" este o cheie (index) in matricea "array", in caz contrar
returneaza FALSE.
<?php
$aray = array("a"=>1, "b"=>'a', "mp"=>'d');
if (array_key_exists('mp', $aray)) {
echo 'Cheia exista';
}
?>
9. array_keys(array, val)
- Returneaza o matrice cu toate cheile din "array". Parametrul "val" e optional, daca e
specificat, va returna doar cheile cu valoarea "val".
<?php
$aray = array("a"=>1, "b"=>'c', 'd', "mp"=>'d');
$re = array_keys($aray);
print_r($re);
// Va afisa:
?>
Array ( [0] => a [1] => b [2] => 0 [3] => mp )
10. array_map("functie", array)

- Aplica functia pentru fiecare element din "array"
<?php
function f_test($val) {
return $val+2;
}
$aray = array("a"=>1, "b"=>'c', 2);
$aray = array_map("f_test", $aray);
print_r($aray);
// Return:
?>
Array ( [a] => 3 [b] => 2 [0] => 4 )
11. array_merge($array1, $array2, ...)

- Uneste mai multe array in unul singur. Daca au cheie de tip sir identice, va fi pastrata
valoarea ultimei chei.
<?php
$aray1 = array("a"=>1, 3, 4);
$aray2 = array("a"=>2, 8);
$re = array_merge($aray1, $aray2);
print_r($re);
// Va afisa:
Array ( [a] => 2 [0] => 3 [1] => 4 [2] => 8 )
?>
12. array_pop(array)
- Elimina ultimul element din "array", care va fi transferat ca valoarea returnata de
"array_pop()". Daca parametru nu e matrice sau e gol, returneaza NULL.
<?php
$aray = array("a"=>1, 3, 4);
$re = array_pop($aray);
// $aray va avea acum:
echo $re;
?>
array("a"=>1, 3);
// 4
13. array_product(array)
- Returneaza produsul elementelor din "array"

<?php
$aray = array(1, 2, 3, 4);
echo array_product($aray);
?>
// 24
14. array_rand(aray, nr)

- Preia aleator un "nr" de chei din "array", respectand ordinea lor. Daca "nr" e 1, va returna o
cheie aleasa aleator. Altfel, returneaza o matrice cu acele chei preluate aleator.
<?php
$aray = array('x'=>'tutorial', 'y'=>8, 'z'=>'php', 'curs');
$ar_keys = array_rand($aray, 3);
// Preia aleator 3 chei, si le aranjaza succesiv in $ar_keys
// Parcurge matricea cu cheile alese si afiseaza valoare corespunzatoare fiecareia
for($i=0; $i<count($ar_keys); $i++) {
$key = $ar_keys[$i];
echo $aray[$key]. ' - ';
}
// Return:
?>
tutorial - 8 - php -
15. array_reverse(array)
- Returneaza "array" cu ordinea elementelor inversata.
<?php
$aray = array(1, 2, 3, 'a', 'b'=>'c');
$re = array_reverse($aray);
print_r($re);
// Return:
Array ( [b] => c [0] => a [1] => 3 [2] => 2 [3] => 1 )
?>
16. array_search("val", array)
- Returneaza cheia din "array" care are valoarea "val", sau FALSE daca nu exista. Cautarea e
"case-sensitive"
<?php
$aray = array(1, 2, 3, 'a', 'b'=>'c');
$re = array_search('c', $aray);
echo $re;
?>
17. array_shift(array)
- Elimina primul element din "array", care va fi transferat ca valoarea returnata de

"array_shift()". Cheile vor fi renumerotate de la 0. Daca parametru nu e matrice sau e gol,
returneaza NULL.
<?php
$aray = array("a"=>1, 3, 4);
$re = array_shift($aray);
// $aray va avea acum:
echo $re;
?>
array(3, 4);
// 1
18. array_slice(array, start, nr)

- Returneaza un "nr" din elementele lui "array', incepand de la elementul numarul "start"
(primul e 0), cate elemente arata "nr". Daca "nr" nu e specificat, va fi considerat pana la
ultimul.
<?php
$aray = array("a"=>1, 3, 4, 5, 6, 7);
$re = array_slice($aray, 2, 3);
// $re va avea:
array(4, 5, 6)
$re = array_slice($aray, 3);
// $re va avea:
array(5, 6, 7
?>
19. array_sum(array)
- Returneaza suma elementelor din "array"
<?php
$aray = array(1, 2, 3, 4);
echo array_sum($aray);
?>
// 10
20. array_unique(array)
- Returneaza matricea "array" fara valorile duplicate, acestea fiind luate o singura data.
<?php
$aray = array(1, 2, 1, 4, 3, 4);
$aray = array_unique($aray);
?>
// $aray va avea:
array(1, 2, 4, 3)
21. array_values(array)
- Returneaza o matrice cu toate valorile din "array", ordonate numeric de la 0.
<?php
$aray = array("a"=>1, "b"=>'c', 'd', "mp"=>'d');
$re = array_values($aray);
print_r($re);
// Va afisa:
?>
Array ( [0] => 1 [1] => c [2] => d [3] => d )
22. arsort(array)
- Sorteaza un "array" cu valorile ordonate in ordine inversa alfabetic, pastrand corelatia dintre
chei si valori. In caz de succes returneaza TRUE, altfel, FALSE.
<?php
$aray = array('c', "b"=>'xy', 'pm', "mp"=>'de');
arsort($aray);
// $aray va deveni:
?>
array("b"=>'xy', 'pm', "mp"=>'de', 'c')
23. asort(array)
- Sorteaza un "array" cu valorile ordonate in ordine alfabetica, pastrand corelatia dintre chei si
valori. In caz de succes returneaza TRUE, altfel, FALSE.
<?php
arsort($aray);
// $aray va deveni:
?>
array('c', "mp"=>'de', 'pm', "b"=>'xy')
24. count(array)
- Returneaza numarul de elemente din "array"
<?php
echo count($aray);
// 4
?>
25. current(array);
- Returneaza valoarea elementului curent din "array", daca nu are elemente returneaza
FALSE. Fiecare matrice are un pointer intern, care prima data e setat la primul element.
<?php
$aray = array('php', "free"=>'tutorial', 'mysql', "mp"=>'curs');
echo current($aray);
// php
?>
26. end(array);
- Muta pointerul din "array" la ultimul element si returneaza valoarea lui, daca nu are
elemente returneaza FALSE.
<?php
echo end($aray);
// curs
?>
27. implode("separator", array);
- Transforma "array" in sir (string), adaugand valorile intr-un sir, separate de ceea ce e
specificat la "separator".
<?php
$aray = array('www', 'marplo', 'net');
$sir = implode('.', $aray);
echo $sir;
?>
// www.marplo.net
28. in_array("val", array)

- Verifica daca o matrice contine o anumita valoare. Returneaza TRUE daca vreunul din
elementele din "array" are valoarea "val", in caz contrar FALSE.
<?php
if (in_array('tutorial', $aray)) {
// Se executa ce se vrea
}
?>
29. key(array)
- Returneaza cheia elementului curent la care se afla pointerul
<?php
end($aray);
// Muta pointerul la ultimul element
echo key($aray);
// mp
?>
30. krsort(array)
- Sorteaza un "array" dupa chei ordonate in ordine inversa alfabetic, pastrand corelatia dintre
chei si valori. In caz de succes returneaza TRUE, altfel, FALSE.
<?php
$aray = array('li'=>'php', "free"=>'tutorial', 'mysql', "mp"=>'curs');
krsort($aray);
// $aray va deveni:
?>
array("mp"=>'curs', 'li'=>'php', "free"=>'tutorial', 'mysql')
31. ksort(array)
- Sorteaza un "array" dupa chei ordonate in ordine alfabetica, pastrand corelatia dintre chei si
valori. In caz de succes returneaza TRUE, altfel, FALSE.
<?php
$aray = array('li'=>'php', "free"=>'tutorial', 'mysql', "mp"=>'curs');
ksort($aray);
// $aray va deveni:
?>
array('mysql', "free"=>'tutorial', 'li'=>'php', "mp"=>'curs')
32. natcasesort(array)
- Sorteaza un "array" in ordine alfabetica a valorilor, case-insensitive, folosind ordinea
naturala a numerelor. In caz de succes returneaza TRUE, altfel, FALSE.
<?php
$aray = array('li'=>'Php', "free"=>'tutorial', 'MySQL', "mp"=>'curs');
natcasesort($aray);
// $aray va deveni:
?>
array("mp"=>'curs', 'MySQL', 'li'=>'Php', "free"=>'tutorial')
33. next(array);
- Avanseaza pointerul din "array" inainte cu un element si returneaza valoarea, daca nu are
<?php
echo next($aray);
// tutorial
?>
34. prev(array);
- Muta pointerul din "array" inapoi cu un element si returneaza valoarea, daca nu are
<?php
end($aray);
// Duce pointerul la ultimul element
echo prev($aray);
// mysql
?>
35. reset(array);
- Readuce pointerul din "array" la primul element si returneaza valoarea lui, daca nu are
<?php
next($aray);
// Avanseaza pointerul cu un element
echo reset($aray);
// php
?>
36. rsort(array)
- Sorteaza un "array" in ordine inversa alfabetic a valorilor (literele mici inaintea celor mari),
stergand cheile initiale, devenind un Array asociativ cu chei de la 0. In caz de succes
returneaza TRUE, altfel, FALSE.
<?php
$aray = array('li'=>'Php', "free"=>'tutoriale', 'MySQL', "mp"=>'curs');
rsort($aray);
// $aray va deveni:
?>
array('tutoriale', 'curs', 'Php', 'MySQL')
37. sort(array)
- Sorteaza un "array" in ordine alfabetica a valorilor (literele mari inaintea celor mici),
stergand cheile initiale, devenind un Array asociativ cu chei de la 0. In caz de succes
returneaza TRUE, altfel, FALSE.
<?php
rsort($aray);
// $aray va deveni:
?>
array('MySQL', 'Php', 'curs', 'tutoriale')
38. shuffle(array)
- Amesteca aleator elementele din "array". Sterge cheile initiale, devenind un Array asociativ
cu chei de la 0. In caz de succes returneaza TRUE, altfel, FALSE.
<?php
shuffle($aray);
// $aray va avea elementele amestecate aleator
?>
Utilizare Array (matrice) - (2)

Part. 2 Creare tabel HTML cu date din Array
Parcurgerea unui Array asociativ
Lucrul cu functii lista
Sortarea matricelor
Transformarea matricelor in siruri si a sirurilor in matrice (array)
1. Parcurgerea unui Array asociativ

In lectia precedenta a fost prezentata modalitatea de citire a elementelor din matrice
secventiala - adica matrice ale caror chei sunt numere intregi consecutive.
Tablourile de date pot avea si elemente ale caror chei pot fi numere aleatoare sau chiar
cuvinte, aceste matrici se numesc "matrici asociative" (non-secventiale).
Pentru citirea datelor dintr-un Array asociativ se poate folosi instructiunea foreach care
simplifica parcurgerile de acest gen.
Instructiunea foreach are urmatoarea forma generala:
foreach (tablou as $cheie => $valoare) {corp}
- Instructiunea parcurge n mod iterativ (element cu element) tabloul denumit "tablou",

stabilind valori adecvate pentru valorile variabilelor "$cheie" si "$valoare" aferente fiecarui
element al tabloului.
Iata un exemplu simplu:
<?php
$limbaje = array(10=>"Perl", 20=>"PHP", 21=>"Python");
foreach ($limbaje as $index => $limbaj) { // parcurge iterativ tabloul
echo "<br />$index =>$limbaj";
}
?>
- Remarcati ca instructiunea echo face pur si simplu referire la valorile variabilelor $index si
$limbaj, carora li se atribuie n mod automat valorile cheii, respectiv elementului curent.
10 =>Perl
20 =>PHP
21 =>Python
Cateodata este nevoie sa parcurgem datele unui tablou multi-dimensional.
Pentru a parcurge matricea, folositi instructiuni foreach imbricate:
Pentru a invata modul de parcurgere a unui Array multi-dimensional, sa studiem urmatorul
exemplu:
<?php
$date = array("PHP"=>array("simplu", "popular"), "Python"=>array("simplu", "nepopular"),
"Pearl"=>array("dificil", "popular"));
foreach ($date as $limbaj => $valoare) {
foreach($valoare as $cheie =>$caracteristica) {
echo "<br />$limbaj : $caracteristica";
}
}
?>
- Instructiunea foreach exterioara obtine cate un Array asociat cu fiecare limbaj; a doua
instructiune foreach, interioara, parcurge fiecare Array obtinut de prima instructiune foreach.
Iata rezultatul:
PHP : simplu
PHP : popular
Python : simplu
Python : nepopular
Pearl : dificil
Pearl : popular
2. Lucrul cu functii lista

n afara de modalitatile de parcurgere a matricelor, PHP ofera numeroase functii care va
permit traversarea tablourilor, deplasndu-va nainte sau napoi prin elementele acestuia.
Prima dintre aceste functii este current(), care returneaza valoarea curenta a tabloului.
Functia current() foloseste un pointer intern de tablou, pe care PHP l creeaza pentru fiecare
tablou. (Cnd creati un tablou, pointerul intern de tablou este configurat astfel nct sa faca
referire la primul element al tabloului).
Functiile next() si prev() modifica pointerul intern al tabloului si se pot folosi alaturi de
functia current() pentru a parcurge un tablou.
Functia next(), asa cum i arata si numele, modifica pointerul intern al tabloului astfel nct
acesta sa faca referire la urmatorul element, n timp ce functia prev() modifica pointerul
intern al tabloului astfel nct acesta sa faca referire la elementul anterior.
Iata un exemplu care prezinta modul de operare al functiilor mentionate:
<?php
$curent = current($limbaje);
echo "<br />functia current() a returnat $curent";
$urmator = next($limbaje);
echo "<br />functia next() a returnat $urmator";
echo "<br />functia next() a returnat $urmator";
$anterior = prev($limbaje);
echo "<br />functia prev() a returnat $anterior";
?>
Iata datele de iesire ale exemplului:
functia current() a returnat Perl
functia next() a returnat PHP
functia next() a returnat Python
functia prev() a returnat PHP
Observati modul n care sunt utilizate functiile prev() si next() pentru deplasarea napoi,
respectiv nainte, n interiorul tabloului.
3. Functia key()
Functia key() este corelata cu functia current(). Daca functia current() returneaza valoarea
asociata elementului curent, functia key() returneaza cheia asociata elementului curent.
Iata un exemplu care ilustreaza modul de operare al acestei functii:
<?php
$curent = current($limbaje);
$cheie = key($limbaje);
echo "<br />functia current() a returnat $curent";
echo "<br />functia key() a returnat $cheie";
?>
functia key() a returnat 10
4. Functia each()
O alta functie utila n parcurgerea tablourilor este each().
Functia each() returneaza perechea "cheie-valoare" care se afla la pozitia curenta din tabloul
specificat. Perechea "cheie-valoare" este returnata sub forma unui Array asociativ cu patru
elemente, dupa cum urmeaza:
Cheie
Valoare
- Componenta cheie a perechii cheie-valoare curenta
- Componenta valoare a perechii cheie-valoare curenta
key - Componenta cheie a perechii cheie-valoare curenta

value - Componenta valoare a perechii cheie-valoare curenta
- Observati ca puteti folosi valoarea cheie "0" sau "key" pentru a obtine accesul la
componenta cheie a perechii "cheie-valoare"; similar, puteti folosi valoarea cheie "1" sau
"value" pentru a obtine accesul la componenta valoare a perechii "cheie-valoare".
Pentru a intelege mai bine cum se foloseste functia each(), studiati exemplul urmator:
<?php
$fiecare = each($limbaje);
$zero = $fiecare[0];
$unu = $fiecare[1];
$cheie = $fiecare['key];
$valoare = $fiecare['value];
echo "<br />zero=$zero";
echo "<br />unu=$unu";
echo "<br />cheie=$cheie";
echo "<br />valoare=$valoare";
?>
zero=10
unu=Perl
cheie=10
valoare=Perl
5. Functia list()
O alta functie utila n lucrul cu tablouri este functia list(), aceasta va permite sa atribuiti
valori la numeroase variabile n cadrul unei instructiuni.
Functia list() este deseori folosita cu functia each(), deoarece functia list() faciliteaza accesul
separat la cheia si la valoarea returnate de functia each().
Forma generala de utilizare a functiei list() este urmatoarea:
list($var1, $var2, .., $varn) = valoare_tablou;
Fiecare dintre variabilele specificate, de la $var1 la $varn, primeste o valoare din tabloul
"valoare_tablou".
ntr-un fel, functia list() este opusa functiei array(), deoarece functia list() mparte un tablou
ntr-o serie de valori scalare, n timp ce functia array() construieste un tablou dintr-o serie de
valori scalare.
Iata un exemplu care ilustreaza modul de utilizare a functiei list():
<?php
list($cheie, $valoare) = each($limbaje);
echo "<br />cheie = $cheie, valoare = $valoare";
echo "<br />urmator = $urmator";
?>
cheie = 10, valoare = Perl
urmator = Python
PHP contine peste 40 de functii pentru lucrul cu tablourile. De exemplu, functia
array_search() faciliteaza cautarea ntr-un tablou.
Pentru informatii despre aceasta functie si despre alte functii utilizate n lucrul cu tablouri,
vizitati site-ul www.php.net.
6. Sortarea tablourilor
Sortarea reprezinta o alta operatie frecvent aplicata tablourilor. PHP furnizeaza o suita de
functii care faciliteaza sortarea unui tablou.
De exemplu, un tablou poate fi creat dupa cum urmeaza:
Apoi, doriti sa sortati tabloul n ordine alfabetica, in functie de numele limbajului de
programare.
Pentru aceasta, pur si simplu invocati functia sort():
sort($limbaje);
Dupa sortare, continutul tabloului apare in ordinea cum se poate vedea mai jos:
0 => PHP
1 => Perl
2 => Python
Observati ca secventa de sortare sau secventa de aranjare (cum este numita uneori) este
sensibila la diferenta ntre majuscule si minuscule. Deoarece litera "H" mare este sortata
inaintea literei "e" mic, PHP apare nainte de Python n datele de iesire sortate.
Iata un exemplu practic de folosire a functiei sort() :
<?php
$arr = array(0=>'Popescu', 1=>'Avram', 5=>'Cristian',3=>'Dan');
sort($arr);
foreach($arr as $key=>$nume) {
echo "<br />Cheie=$key Valoare=$nume";
}
?>
Rezultatul afisat este urmatorul :
Cheie=0 Valoare=Avram
Cheie=1 Valoare=Cristian
Cheie=2 Valoare=Dan
Cheie=3 Valoare=Popescu
- Se observa ca instructiunea sort($arr) sorteaza matricea $arr dupa campul valoare (oridine
alfabetica).
- Observam de asemenea ca valorile campului cheie a fost alterata, fara sa conteze valoarea
sau ordinea cheilor.
Daca dorim sa sortam in ordine inversa alfabetic, folosim functia rsort()
Iata acelasi exemplu, da cu functia rsort()
<?php
$arr = array(0=>'Popescu', 1=>'Avram', 5=>'Cristian',3=>'Dan');
rsort($arr);
foreach($arr as $key=>$nume) {
echo "<br />Cheie=$key Valoare=$nume";
}
?>
Acum rezultatul afisat este urmatorul :
Cheie=0 Valoare=Popescu
Cheie=1 Valoare=Dan
Cheie=2 Valoare=Cristian
Cheie=3 Valoare=Avram
- Se observa ca si in acest caz au fost alterate valorile initiale ale cheilor.
Pentru a sorta matricea "$arr" pastrand corelarea initiala dintre valori si cheile
corespunzatoare se folosesc functiile asort(), respectiv arsort(). Incercati-le singuri.
In afara de acestea mai sunt si alte functii utile pentru sortarea tablourilor.
Iata un tabel care prezinta functiile folositoare pentru sortarea unui tablou, impreuna cu
rezultatul aplicarii fiecarei functii.
Vom lua ca model pentru exemplificare urmatoarea matrice:
Functie
sort()
Operatia efectuata
- Sortarea unui tablou n functie de valoare, in ordine alfabetica, fara sa se tina
cont de cheile initiale
- Sortarea unui tablou n functie de valoare, in ordine alfabetica, pastrand

asort()
corelarea initiala dintre valori si cheile corespunzatoare
rsort
- Sortarea unui tablou n functie de valoare, in ordine invers alfabetica, fara sa

se tina cont de cheile initiale
Rezultat
0 => PHP
1 => Perl
2 => Python
20 => PHP
10 => Perl
21 => Python
0 => Python
1 => Perl
2 => PHP
21 => Python
- Sortarea unui tablou n functie de valoare, in ordine invers alfabetica, pastrand
arsort
10 => Perl
corelarea initiala dintre valori si cheile corespunzatoare
20 => PHP
ksort - Sortarea unui tablou n functie de cheie, in ordine ascendenta
10 => Perl
20 => PHP
21 => Python
krsort - Sortarea unui tablou n functie de cheie, in ordine descendenta
21 => Python
20 => PHP
10 => Perl
O modalitate de a executa o cautare fara sensibilitate la diferenta ntre majuscule si minuscule

ar fi utilizarea functiei natcasesort(), care sorteaza un tablou folosind o ordine care nu este
sensibila la diferenta ntre majuscule si minuscule.
O alta modalitate consta n a utiliza functia usort() sau una dintre functiile sale conexe, n
speta uksort() si uasort().
Functia usort() sorteaza valorile din tablou si returneaza un tablou secvential; functia
uksort() sorteaza cheile tabloului, iar functia uasort() sorteaza un tablou asociativ.
De exemplu, urmatoarele instructiuni creeaza un tablou si l sorteaza ntr-o maniera
insensibila la diferenta ntre majuscule si minuscule:
$limbaje = array("Perl", "PHP", "Python");

usort($limbaje, "strcmpcase");
foreach($limbaje as $key=>$nume) {
echo "<br />$key => $nume";
}
Functia strcmpcase() este o functie din biblioteca PHP care compara doua siruri fara a tine
cont de majuscule sau minuscule. Functia returneaza o valoare negativa daca primul sir este
mai mic dect al doilea, zero daca sirurile sunt identice, respectiv o valoare pozitiva daca
primul sir este mai mare dect al doilea.
Rezultatul va fi :
0 => Perl
1 => PHP
2 => Python
Pentru mai multe informatii despre functia usort() si despre functiile sale conexe, examinati
site-ul www.php.net
Transformarea sirurilor in matrice si invers

PHP pune la dispozitia utilizatorilor functii pentru conversia intre siruri si matrice. Acestea
pot fi utile in situatii in care valoarea matricelor trebuie memorate in baza de date.
Pentru a transforma un sir intr-o matrice folosim functia explode(). Sintaxa aceste functii
este:
$matrice = explode(" ", $sir);
- In loc de spatiul dintre (" "), ca indiciu de separare, poate fi scris orice caracter; dupa cum
se doreste impartirea sirului.
Iata un exemplu:
<?php
$sir = "Popescu Avram Cristian Dan";
$matrice = explode(" ",$sir);
foreach($matrice as $key=>$nume) {
echo "<br />Cheie = $key Valoare = $nume";
}
?>
Acest cod va produce urmatorul rezultat:
Cheie = 0 Valoare = Popescu
Cheie = 1 Valoare = Avram
Cheie = 2 Valoare = Cristian
Cheie = 3 Valoare = Dan
Pentru a transforma o matrice intr-un sir, folosim functia implode(). Sintaxa aceste functii
este:
$sir = implode(" ", $matrice);
- In loc de spatiul dintre (" "), ca semn de separare a elementelor in sir, poate fi scris orice
caracter; dupa cum se doreste crearea sirului.
In continuare, pentru exemplificare, folosind exemplul de mai sus, sortam matricea
"$matrice" alfabetic si apoi transferam matricea intr-un alt sir , de aceasta data sortat
(Observati folosirea caracterelor ( \" ) in expresia echo, pentru ca la iesire rezultatul sa
contina ghilimele):
<?php
$matrice = array("Popescu", "Avram", "Cristian", "Dan");
sort($matrice);
$sir = implode(" - ",$matrice);
echo "<br />Sirul rezultat : \"$sir\"";
?>
Acest cod va produce urmatorul rezultat:
Sirul rezultat : "Avram - Cristian - Dan - Popescu"
Creare tabel HTML din Array
Acest tutorial explica cum pot fi create corect tabele HTML cu date stocate intr-un Array sau
care in general sunt parcurse cu instructiuni WHILE, FOR sau FOREACH.
O problema des intalnita in acest caz este afisearea incorecta a randurilor, coloanelor tabelului
sau chiar generarea de mai multe tabele in loc de unul singur cu mai multe randuri.
De cele mai multe ori cauza e ca inceputul (si inchiderea) tabelului HTML sunt in bucla
WHILE sau FOR, iar cand se repeta executia din bucla se creaza iar codul pt. inceputul
tabelului.
Solutia: Scrierea codului de inceput (si sfarsit) de tabel in afara buclei FOR sau WHILE.
In urmatoarele exemple este explicat modul general de creare a unui tabel HTML cu mai
multe coloane, folosind WHILE, FOR si FOREACH.
1. Crearea tabelului cu datele dintr-o matrice secventiala simpla
- Explicatiile necesare sunt in documentatia din cod (Observati cum se lucreaza cu un indice
pentru generarea de randuri noi in functie de cate coloane trebuie pe fiecare rand.).
Exemplu cu WHILE
<?php
// Matricea cu datele ce vor fi afisate in tabel
$aray = array('val1', 'val2', 'val3', '... val_n');
// Afla numarul de elemente din matrice
$nr_elm = count($aray);
// Variabila in care va fi stocat codul HTML cu tabelul
$tabel_html = '';
// Aici se precizeaza numarul de coloane care sa fie pe fiecare rand
$nr_col = 2;
// Daca matricea are cel putin un element
if ($nr_elm > 0) {
// Se creaza codul pt. inceputul tabelului HTML si al primului rand
$tabel_html = '<table border="1"><tr>';
// Se parcurge matricea cu WHILE
$i = 0;
// Indice pt. rand nou si pt. primul element din Array
while($i < $nr_elm) {
// Se adauga in tabel coloanele
$tabel_html .= '<td>' .$aray[$i]. '</td>';
$i++;
// Se incrementeaza valoarea indicelui
// Daca restul impartirii lui $i la numarul de coloane stabilit e 0

// Adauga un nou rand in tabel
if (($i % $nr_col)==0) { $tabel_html .= '</tr><tr>'; }
}
// Se adauga (dupa terminarea lui WHILE) inchiderea randului si tabelului HTML
$tabel_html .= '</tr></table>';
// Se elimina posibil rand gol adaugat, pt. care nu au mai fost elemente pt.
coloane (<tr></tr>)
$tabel_html = str_replace('<tr></tr>', '', $tabel_html);
}
// Se afiseaza tabelul obtinut
echo $tabel_html;
?>
Exemplu cu FOR
<?php
$aray = array('val1', 'val2', 'val3', '... val_n');
// Afla numarul de elemente din matrice
$nr_elm = count($aray);
$tabel_html = '';
$nr_col = 2;
if ($nr_elm > 0) {
// Se parcurge matricea cu FOR
for($i=0; $i<$nr_elm; $i++) {
$tabel_html .= '<td>' .$aray[$i]. '</td>';
// Daca restul impartirii lui ($i+1) la numarul de coloane stabilit e 0
if ((($i+1) % $nr_col)==0) { $tabel_html .= '</tr><tr>'; }
}
// Se adauga (dupa terminarea lui WHILE) inchiderea randului si tabelului HTML
coloane (<tr></tr>)
}
echo $tabel_html;
?>
- La fel se procedeaza cu WHILE si FOR pentru date ce sunt preluate din alta
sursa (nu doar Array), cum ar fi randuri dintr-un fisier.
Exemplu cu FOREACH
- FOREACH e util pentru parcurgerea matricelor non-secventiale (cheile nu sunt numere

consecutive).
<?php
$aray = array('a'=>'val1', 'b'=>'val2', 3=>'val3', 'z'=>'... val_n');
$tabel_html = '';
$nr_col = 2;
if (count($aray) > 0) {
// Se parcurge matricea cu FOREACH
$i = 0;
// Indice pt. rand nou
foreach($aray as $key => $val) {
$tabel_html .= '<td>' .$val. '</td>';
$i++;
// Se incrementeaza valoarea indicelui
// Daca restul impartirii lui $i la numarul de coloane stabilit e 0

if (($i % $nr_col)==0) { $tabel_html .= '</tr><tr>'; }
}
// Se adauga (dupa terminarea lui FOREACH) inchiderea randului si tabelului
HTML
coloane (<tr></tr>)
}
echo $tabel_html;
?>
- Toate aceste exemple vor afisa urmatorul tabel:
val1
val2
val3
... val_n
2. Crearea tabelului HTML cu date dintr-o baza de date
- In general, cel mai des folosit caz este acela cand sunt selectate mai multe randuri dintr-un
tabel MySQL si se doreste afisarea lor intr-un tabel HTML.
Mai jos este un exemplu general simplu pentru afisarea datelor din MySQL sub forma de
tabel.
Pentru lucrul cu MySQL vedeti lectiile mai avansate, de la nr. 22-27, apoi reveniti la acest
tutorial.
<?php
// Variabila in care va fi stocat codul pt. tabelul HTML
$tabel_html = '';
// Se face conectarea la MySQL si selectarea bazei de date
// Selectarea randurilor din tabelul MySQL
$cerereSQL = "SELECT * FROM `nume_tabel` WHERE `coloana`='$val'";
$rezultat = mysql_query($cerereSQL);
// Daca sunt returnate randuri de tabel
if(mysql_num_rows($rezultat) > 0) {
// Se creaza codul pt. inceputul tabelului HTML
$tabel_html = '<table border="1">';
// Se scrie in bucla WHILE codul HTML pt. adaugarea DOAR a randurilor ce vor fi
in tabel
while($rand = mysql_fetch_array($rezultat)) {
$tabel_html .= '<tr><td>' .$rand['col1']. '</td><td>' .$rand['col2'].
'</td></tr>';
}
// Se adauga (dupa terminarea lui WHILE) inchiderea tabelului HTML
$tabel_html .= '</table>';
}
// Se afiseaza codul tabelului HTML obtinut
echo $tabel_html;
?>
Utilizarea functiilor
nvatati sa apelati functiile
nvatati sa atribuiti unei variabile numele unei functii
nvatati sa ascundeti mesajele de eroare generate n timpul executiei unei functii
nvatati sa folositi date si scripturi aflate n fisierele externe
nvatati sa definiti propria functie
Am folosit pana acum de mai multe ori termenul de functii. In cadrul acestei lectii veti nvata
mai multe despre utilizarea functiilor si despre modul de definire a propriilor dumneavoastra
functii.
Functiile reprezinta secvente de cod care sunt apelate foarte frecvent in cadrul codului PHP.
Folosirea intensiva a functiilor contribuie la o structurare mai buna a codului; ideea este ca o
problema complexa sa o divizam in mai multe sub-probleme, fiecare astfel de subproblema sa
fie executata in cadrul unei functii.
Pe de alta parte folosirea frecventa a functiilor duce la micsorarea cantitatii de cod scris; prin
urmare vom avea un cod care se executa mai eficient.
1. Utilizarea unei functii

Pentru a folosi o functie, scrieti numele functiei, urmat de o pereche de paranteze. De
exemplu, functia rand(), care genereaza un numar ntreg aleator, poate fi apelata astfel:
rand()
Majoritatea functiilor preiau argumente, reprezentnd valori, de intrare care influenteaza

operarea si rezultatul functiei.
Pentru a specifica argumente, acestea se insereaza ntre paranteze; daca specificati mai mult
de un argument, fiecare argument trebuie separat de vecinul sau printr-o virgula.
Argumentul unei functii poate fi o valoare literala, o variabila sau o expresie.
Unele functii PHP au argumente optionale, care pot fi specificate sau omise, n conformitate
cu intentiile dumneavoastra. De exemplu, functia rand() are doua argumente optionale.
Primul argument al functiei indica valoarea ntreaga aleatoare cea mai mica pe care o va
returna functia; al doilea argument indica valoarea cea mai mare. Daca omiteti ambele
argumente, functia returneaza o valoare cuprinsa ntre 0 si cel mai mare rezultat posibil.
Puteti folosi valoarea returnata de o functie ntr-o expresie, astfel valoarea va fi accesibila n
mod repetat fara a se invoca functia de mai multe ori
Iata un exemplu in care functia rand() returneaza o valoare aleatoare cuprinsa intre 1 si 500,
atribuind valoarea unnei variabile "$nr" :
$nr = rand(1, 500);
echo $nr;
Cnd se produce o eroare n timpul executiei unei functii, PHP genereaza mesaje de eroare.
Uneori, asemenea mesaje de eroare sunt nedorite. n acest caz, puteti suprima generarea
mesajelor de eroare prin adaugarea in fata numelui functiei a caracterului @.
De exemplu,, pentru a suprima mesajele de eroare care pot aparea n timpul executiei functiei
"f()", scriem aceasta functie dupa cum urmeaza:
y = @f(x);
Totusi, indicat este sa scrieti scripturi care sa nu genereze erori, ascunderea lor nu rezolva
problema ce cauzeaza eroarea.
O functie utila, recomandata a fi folosita in script-uri este functia isset() si este cel mai des
folosita cu "if()".
isset() preia ca argument de obicei o variabila si arata daca aceasta a fost sau nu setata.
De exemplu: isset($nr)
- Functia returneaza TRUE daca variabila "$nr" are setata o valoare (diferita de NULL), in
caz contrar returneaza FALSE.
Aceasta functie este foarte utila in determinarea caror comenzi sa fie executate in functie daca
o anumita variabila a fost setata sau nu. Previne aparitia unor erori care apar in cazuri de
variabile nule si ajuta si la securitate.
De exemplu, sa presupunem ca avem un cod PHP care vrem sa fie executat numai daca prin
adresa URL o fost transmisa o variabila "id", adica o adresa de forma
http://www.domeniu.site/script.php?id=un_id, folosim functia isset() astfel:
<?php
if (isset($_GET['id'])) {
// Se executa codul dorit
}
?>
- $_GET['id'] preia valoarea lui "id" din URL, iar functia isset() verifica daca aceasta valoare
exista (daca in URL este "id=ceva"). Daca aceasta exista, returneaza TRUE iar functia "if",
avand astfel valoarea TRUE, va executa codul dintre acoladele ei.
Functia isset() este utila si pentru situatii de verificarii a inexistentei unei variabile, prin
adaugarea caracterului (!) in fata ei. Astfel daca o anumita variabila rezulta a nu fi setata, ii
atribuim o valoare sau executam un anume cod special pt. asta.
Exemplu:
if (!isset($_GET['id'] {
die('Pagina apelata este inaccesibila.');

}
2. Utilizarea fisierelor incluse

Functiile PHP va permit sa obtineri accesul la programe PHP scrise anterior, create ntr-un alt
fisier extern.
Pentru aceasta puteti folosi functia require(), care are urmatoarea forma:
require("nume_fisier")
Cnd este ncarcat un script PHP care contine o instructiune require, continutul fisierului
specificat este inserat si executat n script, nlocuind instructiunea require.
De exemplu, sa presupunem ca realizam un site in PHP care este alcatuita din mai multe
pagini, iar fiecare pagina contine in partea de sus acelasi cod HTML. In loc sa scriem de
fiecare data, pentru fiecare pagina, acelasi cod HTML, il scriem o singura data intr-un fisier
separat (de exemplu "antet.php") iar in paginile unde vrem sa fie inclus codul HTML folosim
functia require()
Prin insertia instructiunii la nceputul scriptului din fiecare pagina PHP, ca in exemplu
urmator:
<?php
require("antet.php");
?>
- cu aceasta determinati programul PHP sa includa continutul fisierului "antet.php" ca si cum
continutul respectiv ar face parte din acel script.
Acest procedeu poate simplifica ntretinerea site-ului, deoarece informatiile standard pot fi
tinute ntr-un singur fisier, ceea ce le face usor de localizat si de modificat.
O alta functie, similara instructiunii require este functia include(). Spre deosebire de functia
require() care introduce datele din fisierul extern intocmai cum sunt scrise, functia include()
este o instructiune executabila ce determina evaluarea scriptului PHP din fisierul extern si
codul acestuia este executat ca si cum ar fi aparut n textul scriptului unde este inclus.
Sintaxa functiei include() este urmatoarea:
include("nume_fisier.php");
Functia corelata require_once() asigura faptul ca fisierul specificat este inclus o singura data
ntr-un script dat. n cazul n care creati fisiere externe care si ele folosesc instructiunea
require pentru a include continutul altor fisiere externe, puteti gasi instructiunea
require_once utila.
3. Definirea unei functii

n afara de a utiliza functiile din biblioteca de functii a limbajului PHP, va puteti defini si
folosi propriile functii.
Pentru a defini o functie, in PHP functiile incep intotdeauna cu declaratia: function, ca in
exemplul urmator:
function nume_functie(nume_argument) {
Aici se insereaza corpul functiei
}
Cuvntul cheie "function", "numele_functiei" si "nume_argument" alcatuiesc antetul functiei.

Termenul de corp al functiei se refera la instructiunile incluse ntre acolade care urmeaza
dupa antetul functiei. Instructiunile din corpul functiei sunt executate atunci cnd functia este
apelata.
Numele functiilor nu prezinta sensibilitate la diferenta ntre majuscule si minuscule; ca atare,
"f()" si "F()" reprezinta referiri la aceeasi functie.
Daca doriti sa definiti o functie care nu are argumente, puteti omite "nume_argument"; daca
doriti sa definiti o functie cu mai multe argumente, puteti include argumente suplimentare
dupa "nume_argument", fiecare argument fiind separat de vecinul sau printr-o virgula.
Parantezele si numele argumentelor incluse ntre acestea poarta numele de lista cu
argumente.
Ca exemplu, iata o functie care calculeaza aria unui dreptunghi:
<?php
function arie($lungime, $latime) {
return $lungime * $latime;
}
?>
Lista cu argumente a functiei "arie()" include argumentele $latime si $inaltime. Corpul
functiei este alcatuit dintr-o singura instructiune; cu toate acestea, corpul unei functii poate
contine mai multe instructiuni.
Daca doriti ca o functie sa returneze o valoare, trebuie sa determinati functia sa execute o
instructiune return care furnizeaza valoarea respectiva.
Instructiunea return determina sistarea executarii functiei; nu este necesar ca aceasta sa fie
ultima instructiune fizica din corpul functiei. Daca definiti o functie care nu are nici o
instructiune return (sau pentru date de iesire, precum "echo"), functia va returna valoarea
speciala NULL.
4. Apelarea unei functii definite de utilizator

O functie definita de utilizator poate fi apelata ca orice functie.
De exemplu, iata o instructiune care apeleaza functia "arie()" din exemplul anterior:
<?php
function arie($lungime, $latime) {
return $lungime * $latime;
}
$rezultat = arie(5,3);
echo "Aria exte : $rezultat";
?>
Valorile argumentelor 5 si 3 le nlocuiesc pe acelea ale argumentelor din corpul functiei, care
se comporta ca si cum ar fi fost scrisa astfel:
return 5*3
Rezultatul afisat al acestui script va fi :

Aria exte : 15
5. Terminarea executiei unui script

O instructiune return determina sistarea executiei functiei care o contine. In cazul n care
doriti sa sistati prelucrarea unui ntreg script, puteti invoca functia exit().
Iata un exemplu simplu:
<?php
function stop() {
exit();
}
echo "<br />Unu...";
echo "<br />Doi...";
stop();
echo "<br />Trei...";
?>
Dupa executie, scriptul afiseaza:
Unu...
Doi...
Rezultatul acestui script include cuvintele "Unu" si "Doi", dar nu si cuvntul "Trei". Prin
apelarea functiei "stop()" se executa corpul functiei respective; la invocarea functiei, exit(),
executia scriptului se ncheie.
6. Functii recursive
Este posibil ca o functie din PHP sa se auto-apeleze. O functie care procedeaza astfel se
numeste "functie recursiva". Totusi, daca nu aveti experienta de programare, este recomandat
sa nu scrieti functii recursive. Cu toate acestea, puteti scrie accidental sau intalni o asemenea
functie, deci este util sa stiti unele notiuni referitoare la aceasta.
Studiati scriptul urmator care defineste si invoca o functie recursiva simpla:
<?php
function recursor($nr) {
$nr++;
if ($nr<8) {
return recursor($nr);
}
return $nr;
}
$x = recursor(3);
echo $x;
?>
- Daca rulati acest script, rezultatul afisat va fi 8.
- Variabila "$x" primeste ca valoare functia "recursor()" careia ii transmite ca argument
numarul 3.
- Functia "recursor()" incrementeaza cu o unitate valoarea argumentului, prin "$nr++;" care
devine 4, apoi conditia "if ($nr<8)" verifica daca aceasta variabila din functie e mai mica
decat 8, in caz afirmativ se executa comanda "return recursor($nr);" care sisteaza executia
altui cod din functie si auto-apeleaza iar functia (cu noua valoare a lui "$nr" ca argument)
care iar incrementeaza valoarea lui "$nr" si verifica din nou conditia care iar autoapeleaza
functia, ... si tot asa pana cand "$nr" va avea valoarea 8 si la verificare conditiei "if" aceasta
returneaza FALSE si se trece mai departe la executia comenzii "return $nr;" care va returna 8
ca valoare a variabilei "$x".
Functia "echo" va afisa valoarea lui "$x", adica 8.
7. Definirea argumentelor prestabilite

PHP va permite sa definiti functii cu argumente prestabilite. Daca apelati o functie care are un
argument prestabilit, dar nu furnizati nici o valoare pentru argumentul respectiv, argumentul
ia o valoare prestabilita specificata la inceput.
Iata un exemplu simplu, studiati-l cu atentie:
<?php
function impozit_vanzari($cantitate, $rata = 0.0725) {
return $cantitate * $rata;
}
$cumparaturi = 123.45;
echo "<br />cumparaturi = $cumparaturi";
$impozit1 = impozit_vanzari($cumparaturi, 0.09);
echo "<br />impozit1 = $impozit1";
$cumparaturi = 123.45;
echo "<br /><br />cumparaturi = $cumparaturi";
$impozit2 = impozit_vanzari($cumparaturi);
echo "<br />impozit2 = $impozit2";
?>
Rezultatu afisat va fi:
cumparaturi = 123.45
impozit1 = 11.1105
cumparaturi = 123.45
impozit2 = 8.950125
- Functia impozit_vanzari preia doua argumente: un argument obligatoriu, denumit $cantitate,
si un argument prestabilit, denumit $rata.
Daca apelati functia si furnizati un singur argument, valoarea argumentului respectiv se
considera ca fiind valoarea argumentului $cantitate, iar valoarea 0.0725 se foloseste ca
valoare a argumentului $rata. Astfel, la prima invocare a functiei, pentru "impozit1", $rata are
valoarea 0.09, specificata drept al doilea argument al functiei. Cu toate acestea, la a doua
invocare a functiei, pentru "impozit2", $rata are valoarea 0.0725 deoarece este specificata
valoarea unui singur argument, si astfel "$rata" a preluat valoarea prestabilita initial.
Functii PHP matematice

Aici gasiti functii PHP matematice, in special pentru lucrul cu numere.
1. abs(nr)
- Returneaza valoarea absoluta (cu +) a lui "nr".
<?php
echo abs(-7.8);
echo abs(3);
echo abs(-5);
?>
// 7.8 (double /float)

// 3 (integer)
// 5 (integer)
2. base_convert(nr, baza1, baza2)

- Converteste un numar, "nr", din baza1 in baza2. Rezultatul returnat este un sir cu "nr"
convertit in baza2.
<?php
$nr = 18;
// Afiseaza numarul 18 convertit din baza 10 in baza 2 (cod binar)
echo base_convert($nr, 10, 2);
// 10010
?>
3. bindec('sir_binar')
- Returneaza echivalentul numeric (decimal) al sirului binar din parametrul "sir_binar".
<?php
echo bindec('10010');
echo bindec('1000');
?>
// 18
// 8
4. ceil(nr)
- Returneaza valoarea rotunjita a lui "nr" la urmatorul (mai mare) intreg.
<?php
echo ceil(7.8);
echo ceil(5);
echo ceil(-2.3);
echo ceil(1.2);
?>
// 8
// 5
// -2
// 2
5. cos(radian)
- Returneaza valoarea cosinus a gradelor de cerc specificate la "radian".
<?php
echo cos(30);
// 0.15425144988758
echo cos(90);
?>
// -0.44807361612917
6. decbin(nr)
- Returneaza un sir cu valoarea binara a numarului "nr".
<?php
echo decbin(-5);
echo decbin(88);
?>
// 11111111111111111111111111111011
// 1011000
7. dechex(nr)
- Returneaza un sir cu valoarea hexazecimala a numarului "nr".
<?php
echo decbin(-5);
echo decbin(88);
?>
// fffffffb
// 58
8. decoct(nr)
- Returneaza un sir cu valoarea octala a numarului "nr".
<?php
echo decbin(-5);
echo decbin(88);
?>
// 37777777773
// 130
9. floor(nr)
- Returneaza valoarea rotunjita a lui "nr" la anteriorul (mai mic) intreg.
<?php
echo floor(7.8);
echo floor(5);
echo floor(-2.5);
echo floor(1.2);
?>
// 7
// 5
// -3
// 1
10. fmod(x, y)
- Returneaza valoarea ramasa a lui "x" impartit la "y", care nu mai e multiplu de "y".
<?php
$x = 8.5;
$y = 3;
$r = fmod($x, $y);
?>
// $r va avea valoarea 2.5 (2 * 3 + 2.5 = 8.5)
11. hexdec('hex')
- Returneaza valoarea zecimala a sirului hexazecimal "hex".
<?php
echo hexdec('ee');
echo hexdec('3fe');
?>
// 238
// 1022
12. hypot(c1, c2)

- Returneaza lungimea ipotenozei unui triunghi dreptunghic care are lungimea catetelor "c1"
si "c2".
<?php
echo hypot(3, 4);
?>
// 5
13. is_infinite(val)
- Returneaza TRUE daca valoarea lui "val" este un numar infinit (precum log(0)), altfel,
returneaza FALSE.
<?php
$nr = log(0);
if (is_infinite($nr)) echo 'Nr. infinit';
?>
14. lcg_value()
- Returneaza un numar aleator intre 0 si 1.
<?php
echo lcg_value();
?>
// 0.64820835969476
15. log10(nr)
- Returneaza logaritmul in baza 10 a lui "nr"..
<?php
echo log10(1000);
?>
// 3
16. log(nr, baza)

- Returneaza logaritm de "nr" in baza "baza". Daca al doilea parametru nu e specificat, va
returna logaritmul natural (in baza e).
<?php
echo log(9, 3);
?>
// 2
17. max(nr1, nr2, ...)

- Returneaza cel mai mare numar dintre cele date la parametri.
<?php
echo max(9, 3, 8, 78, 55);
?>
// 78
18. min(nr1, nr2, ...)

- Returneaza cel mai mic numar dintre cele date la parametri.
<?php
echo max(9, 3, 8, 78, 55);
?>
// 3
19. mt_rand(min, max)

- Returneaza un numar aleator cuprins intre numerele "min" si "max". Similara este si functia
rand(), dar "mt_rand()" este de 4 ori mai rapida.
<?php
echo mt_rand(9, 55);
?>
// 47
20. octdec('oct')
- Returneaza valoarea zecimala a sirului octal "oct".
<?php
echo octdec('42');
?>
// 34
21. pi()
- Returneaza valoarea aproximativa a lui PI. La fel ca si constanta M_PI.
<?php
echo pi();
echo M_PI;
?>
// 3.1415926535898
// 3.1415926535898
22. pow(nr, putere)

- Returneaza valoarea obtinuta din "nr" la puterea "putere".
<?php
echo pow(4, 3);
?>
// 64
23. round(nr)
- Returneaza valoarea rotunjita a lui numar la intregul ce mai apropiat.
<?php
echo round(7.8);
echo round(5);
echo round(-2.5);
echo round(1.2);
?>
// 8
// 5
// -3
// 1
24. sin(radian)
- Returneaza valoarea sinus a gradelor de cerc specificate la "radian".
<?php
echo sin(30);
echo sin(90);
?>
// -0.98803162409286
// 0.89399666360056
25. sqrt(nr)
- Returneaza radical din "nr".
<?php
echo sqrt(225);
?>
// 15
26. tan(radian)
- Returneaza valoarea tangenta a gradelor de cerc specificate la "radian".
<?php
echo tan(30);
echo tan(90);
?>
// -6.4053311966463
// -1.9952004122082
27. is_numeric(val)
- Returneaza TRUE daca "val" e o valoare numerica, altfel, FALSE.
<?php
$x = 32/3;
if (is_numeric($x)) echo "E un numar si are valoarea: $x";
valoarea: 10.666666666667
?>
// E un numar si are
Functii pentru lucru cu functii

Aici gasiti functii PHP ce pot fi folosite in lucrul cu functii create /definite in script.
1. call_user_func("func", arg)
- Apeleaza functia "func" dandu-i valoarea argumentului "arg". Returneaza rezultatul functiei
apelate, sau FALSE.
<?php
function func($arg1, $arg2) {
return "$arg1 - $arg2";
}
// Apeleaza func()
echo call_user_func("func", 'MarPlo', 'net');
// MarPlo - net
// Sau o metoda mai avansata, prin crearea si apelarea functiei in acelasi timp (PHP 5.3 +)
echo call_user_func(function($arg) { echo "Tutoriale $arg"; }, 'php');
// Tutoriale php
?>
2. call_user_func_array("func", array_arg)
- Apeleaza o functie ("func") dandu-i valoarea argumentelor dintr-un Array (array_arg).
Returneaza rezultatul functiei apelate, sau FALSE.
<?php
// Functie creata standard
function func1($arg1, $arg2) {
return $arg1 + $arg2;
}
// Functie creata in variabila (PHP 5.3 +)
$func2 = function($arg1, $arg2) {
return $arg1 * $arg2;
};
// Matricea pt. parametri
$aray_p = array(7, 8);
// Apeleaza func1()
echo call_user_func_array("func1", $aray_p);
// Apeleaza $func2
// 15
echo call_user_func_array($func2, $aray_p);

?>
// 56
3. create_function("argumente", "cod_functie")
- Creaza dinamic o functie ce va avea argumentele "argumente" si codul ce-l executa
"cod_functie". Returneaza functia creata (poate fi asociata cu un nume de variabila), sau
FALSE. ("argumente" si "cod_functie" trebuie sa fie siruri)
<?php
$var = create_function('$arg', 'return $arg*2;');
echo $var(8);
// 16
?>
4. func_num_args()
- Returneaza numarul de argumente primite de o functie. Se foloseste in interiorul acelei
functii.
<?php
function test() {
// Preia si afiseaza numarul de argumente primite
$nr_args = func_num_args();
echo "Numar argumente primite: $nr_args";
}
// Apeleaza functia
test(1, 2, 'a');
// Numar argumente primite: 3
?>
5. func_get_arg(nr)
- Returneaza argumentul cu index-ul "nr" din cele primite de o functie (primul argument are
index 0). Se foloseste in interiorul acelei functii. Daca numarul de argumente e mai mic decat
"nr", returneaza FALSE.
<?php
function test() {
// Preia numarul de argumente primite
$nr_args = func_num_args();
// Daca nr. argumente e mai mare sau egal cu 2, afiseaza argumentul cu index 2
if ($nr_args>=2) {
echo 'Argumentul cu indice 2 e: '. func_get_arg(2);
}
}
// Apeleaza functia
test(1, 'php', 'www.marplo.net');
?>
// Argumentul cu indice 2 e: www.marplo.net
6. func_get_args()
- Returneaza o matrice cu argumentele primite de o functie. Se foloseste in interiorul acelei
functii..
<?php
function test() {
// Preia argumentele primite
$array_args = func_get_args();
// Afiseaza structura matricei cu argumentele
print_r($array_args);
}
// Apeleaza functia
test(1, 'tutoriale', 'www.marplo.net');
www.marplo.net )
?>
// Array ( [0] => 1 [1] => tutoriale [2] =>
7. function_exists("function")
- Returneaza TRUE daca functia "function" (numele ei intre ghilimele) exista, altfel,
returneaza FALSE.
8. register_shutdown_function("func", param1, param2, ...)
- Inregisteaza functia "func" sa fie executata la terminarea scriptului (dupa executarea
comenzilor din el), sau dupa apelarea lui "exit()". "param1", "param2" sunt optionali si
reprezinta parametri ce vor fi transferati la "func".
<?php
function end_script() {
echo 'Terminare script';
}
// Inregistreaza sa fie executata functia end() la sfarsit de executie a scriptului
register_shutdown_function("end_script");
// Se executa cod oarecare
echo (2+3).' - ';
// Rezultatul functiei va fi afisat ultimul, desi a fost inregistrata pt. executie inaintea echo-ului
de sus
// Scriptul va returna: 5 - Terminare script
?>
Variabile si referinte in functii
nvatati sa folositi variabile globale, locale si statice
nvatati sa folositi referintele
Variabilele functiilor in PHP sunt de doua tipuri principale:
Variabile globale
Variabile locale
Variabilele globale sunt create n exteriorul functiei, n timp ce variabilele locale sunt create
n interiorul unei functii.
1. Utilizarea variabilelor globale

Asa cum s-a explicat anterior, variabilele globale sunt cele declarate n afara oricarei functii.
Totalitatea locurilor unde este accesibila o variabila se numeste "domeniu de existenta al
variabilei". Variabilele globale nu pot fi accesibile din interiorul corpului unei functii; cu alte
cuvinte, domeniul de existenta al unei variabile globale, nu include corpurile functiilor. Daca
doriti sa obtineti accesul la o variabila globala n cadrul unei functii, puteti extinde domeniul
de existenta al variabilei prin specificarea in functie a numelui variabilei, n cadrul unei
instructiuni GLOBAL.
Instructiunea GLOBAL are urmatoarea forma:
GLOBAL variabila1, variabila2, variabila3;
Iata un exemplu concludent :

<?php
$var1 = 135;
$var2 = 250;
function Suma() {
return $var1 + $var2;
}
echo "Suma este ". Suma();
?>
- Functia "Suma()" foloseste variabilele $var1 si $var2 declarate anterior, dar aceste variabile
nu au domeniu de valabilitate in interiorul functiei. Prin urmare rezultatul functiei este
NULL.
Pentru a rezolva aceasta problema vom declara cele doua variabile ca fiind variabile globale,
ca in exempul urmator:
<?php
$var1 = 135;
$var2 = 250;
function Suma() {
GLOBAL $var1, $var2;
return $var1 + $var2;
}

?>
- In exemplul de mai sus declaratia: "GLOBAL $var1, $var2" face ca variabilele $var1 si
$var2 sa fie recunoscute si in interiorul functiei.
- Puteti scrie si cu litere mici "global", dar e mai usor de recunoscut cu litere mari.
O alta metoda prin care putem solutiona aceasta problema este prin folosirea variabilei PHP
predefinite $GLOBALS, dupa cum puteti vedea in exemplu urmator:
<?php
$var1 = 135;
$var2 = 250;
function Suma() {
return $GLOBALS['var1'] + $GLOBALS['var2'];
}
?>
$GLOBALS este o variabila predefinita, este de fapt un array ; elementele acestei matrice au
cheia egala cu numele variabilelor declarate si valoarea egala cu cea a variabilelor declarate.
$GLOBALS este o variabila superglobala, ea va fi recunoscuta in orice script.
Puteti folosi oricare din cele doua variante prezentate: instrucrtiunea GLOBAL sau variabila
$GLOBALS.
In cele doua exemple prezentate mai sus rezultatul afisat va fi acelasi :
Suma este 385
2. Utilizarea variabilelor locale

Variabilele locale sunt create in interiorul functiei si sunt distruse cand se ncheie apelul la
functia respectiva. n consecinta, variabilele locale sunt disponibile numai pe durata executiei
functiei asociate.
Argumentele functiilor constituie un tip important de variabila locala. Cu toate acestea, puteti
crea o variabila locala prin simpla atribuire a unei valori unei variabile din interiorul unei
functii.
Pentru a ilustra deosebirea dintre variabilele locale si cele globale, iata un script care
defineste o variabila locala denumita "$x" si o variabila globala cu acelasi nume:
<?php
function v_local() {
$x = 5;
echo "<br />In corpul functiei x = $x";
}
$x = 2;
echo "<br />In corpul scriptului x = $x";
v_local();
echo "<br />In corpul scriptului x = $x";
?>
Cand executati acest script, veti primi urmatoarele rezultate:
In corpul scriptului x = 2
In corpul functiei x = 5
In corpul scriptului x = 2
Remarcati diferenta dintre cele doua variabile $x, chiar daca numele variabilelor este acelasi.
Cand este apelata functia v_local(), $x ia valoarea 5, in rest, inainte si dupa, ia valoarea 2.
Domeniul de existenta al variabilei globale $x nu se extinde n interiorul corpului functiei
v_local(), iar domeniul de existenta al variabilei locale $x nu se extinde dincolo de corpul
functiei respective. Cu alte cuvinte, domeniile de existenta ale celor doua variabile sunt
complet distincte.
3. Utilizarea variabilelor statice

Uneori este nevoie ca o variabila locala sa-si pastreze valoarea de la un apel al functie
asociate la altul. Altfel spus, nu doriti ca variabila sa fie distrusa la ncheierea apelului la
functie.
Pentru acest lucru puteti folosi instructiunea STATIC (la fel cu "static").
Forma instructiunii STATIC este similara cu aceea a instructiunii GLOBAL.
STATIC $var1, $var2, $var3;
O variabila afisata ntr-o instructiune STATIC este cunoscuta sub numele de "variabila
statica".
Iata un exemplu care prezinta modul de utilizare a unei variabile statice:
<?php
function v_local() {
$x = $x + 1;
echo "<br /> x = $x";
}
function v_static() {
STATIC $x;
$x = $x + 1;
echo "<br /> x = $x";
}
v_local();
v_local();
v_local();
v_static();
v_static();
v_static();
?>
Daca rulati acest script, veti primi urmatoarele rezultate:
x=1
x=1
x=1
x=1
x=2
x=3
Observati ca variabila locala $x, definita n cadrul functiei v_local(), este creata din nou la
fiecare apelare a functiei, n consecinta, valoarea sa este ntotdeauna afisata ca fiind egala cu
1.
Prin contrast, variabila statica $x, definita n cadrul functiei v_static(), si pastreaza valoarea
de la un apel al functiei la urmatorul; ca atare, valoarea sa creste de fiecare data cnd este
executata functia.
4. Utilizarea referintelor
In mod prestabilit, argumentele transferate unei functii PHP sunt transmise prin valoare, ceea
ce nseamna ca valorile argumentelor sunt copiate si functiile utilizeaza copii ale valorilor
argumentelor lor, nu argumentele n sine. Ca o consecinta, o functie PHP nu poate modifica
valorile argumentelor sale.
Totusi, puteti stabili ca o functie sa aiba posibilitatea de a modifica valoarea unui argument,
specificnd ca argumentul sa fie transferat prin referinta.
Cnd un argument este transferat prin referinta, valoarea sa nu este copiata; functia lucreaza
cu valoarea argumentului si are libertatea de a modifica acea valoare.
Pentru a specifica faptul ca un argument urmeaza a fi transferat prin referinta, inaintea
argumentului va fi adaugat un caracter ampersand (&). Puteti atasa acest caracter la argument
n antetul functiei sau n apelul la functie.
Iata un exemplu care prezinta apelul prin valoare si apelul prin referinta:
<?php
function p_valoare($a) {
$a = 1;
}
function p_referinta(&$a) {
$a = 1;
}
$b = 0;
p_valoare($b);
echo "<br /> \$b = $b";
$b = 0;
p_valoare(&$b);
echo "<br /> \$b = $b";
$b = 0;
p_referinta($b);
echo "<br /> \$b = $b";
?>
Dupa rulati acest script, veti obtine urmatoarele date de iesire:
$b = 0
$b = 1
$b = 1
Retineti ca scriptul contine doua functii, si anume "p_valoare()" si "p_referinta()". Fiecare
functie preia un singur argument, denumit $a. Antetul functiei "p_referinta()" specifica faptul
ca argumentul sau este transferat prin referinta; argumentul functiei "p_valoare()" este
transferat prin valoare.
Primul paragraf al programului invoca functia "p_valoare()", transfernd argumentul prin
valoare. n consecinta, functia lucreaza cu o copie a argumentului sau, iar valoarea variabilei
$b nu se modifica.
Cel de-al doilea paragraf al programului invoca de asemenea functia "p_valoare()"; dar,
foloseste un caracter ampersand (&) pentru a determina transferul prin referinta al valorii
variabilei $b. n consecinta, functia modifica valoarea argumentului sau, care se transforma
din 0 n 1.
Cel de-a treilea paragraf al programului invoca functia "p_referinta()". Antetul functiei
respective foloseste un caracter ampersand (&) pentru a specifica faptul ca valoarea
argumentului sau este transferata prin referinta, n consecinta, functia modifica valoarea
argumentului sau, care se transforma din 0 n l.
Prin utilizarea referintelor se evita suprasarcina de copiere a valorilor argumentelor si implicit
se obtine o viteza mai mare de executie a programului. Cu toate acestea, programele devin
astfel mai dificil de nteles, iar referintele sau apelurile prin referinta pot cauza erori de
program. Cel mai indicat este sa evitati referintele, acolo unde este posibil, si sa definiti
functii care returneaza valori, si nu functii care modifica valorile propriilor argumente.
In versiunile PHP 5+, transmiterea la functiei a unui parametru prin referinta "Call-time passby-reference", p_valoare(&$b), a fost scoasa din uz. Dar poate fi activata din php.ini, daca
aveti acces, prin setarea 'true' la "allow_call_time_pass_reference".
Data si Timpul in PHP

PHP are mai multe functii pentru lucru cu Data zilei si Timpul /Ora. Cele mai utilizate sunt
acestea:
date() - transforma Timestamp (denumit si timpul Unix, numarul de secunde de la 1

Ianuarie 1970) intr-un format de data citet /textual.
time() - Returneaza timpul Unix /Timestamp curent (numarul de secunde de la 1

Ianuarie 1970 pana in prezent).
microtime() Returneaza timpul Unix /timestamp curent in microsecunde.
getdate() - Returneaza un array asociativ ce contine informatii despre data si timp.
- Aceste functii permit sa preiei data si timpul de la server in script-ul PHP; ele depind de
setarile locale ale serverului.
PHP date()
Functia PHP date() e utilizata pt. formatarea Timestamp in data /timp.
- Sintaxa:
date("format", timestamp)
- format - Un sir format din caractere ce reprezinta data returnata. Ex.: "D, d M Y H:i:s"
rezulta => "Mon, 15 Aug 2012 15:42:01 +0000"
- timestamp - numarul de secunde de la 1-01-1970 pana la o anumita data. Este optional,
daca nu e specificat se foloseste Timestamp-ul curent.
Aceasta functie returneaza un sir cu formatul datei, sau False in caz de eroare.
O lista cu mai multe functii si exemple de lucru cu data si timpul la pagina: Functii pentru
Data si Timp.
- Exemplu, preia data curenta, Zi-Luna-An:
$today = date('d-m-Y');
echo $today;
In mod standard, functia date() foloseste timpul zonal al serverului. Ca sa setati un alt timp
zonal, utilizati functia date_default_timezone_set('timezone_identifier'), adaugata inainte de
alte functii pt data si timp.
Parametrul "timezone_identifier" e un sir cu identificatorul zonei de timp (ex.:
'America/New_York' sau 'Europe/Bucharest'). Lista completa de timpuri zonale pt PHP e la
pagina: Lista zone de timp pt PHP.
- Exemplu:
<?php
date_default_timezone_set('Europe/Bucharest');
zonal pt Romania (Bucuresti)
// seteaza timpul
// returneaza ziua curenta din saptamana

echo date('l');
// returneaza data zilei curente (zi-luna-an)
echo '<br />'. date('j-F-Y');
// returneaza Ora:minute:secunde a timpului curent
echo '<br />'. date('H:i:s');
?>
Rezultat:
Sunday
28-October-2012
07:55:18
In acest exemplu nu e specificat un timestamp, astfel, functia date() lucreaza cu timpul actual,
zona Romania /Bucuresti.
Ca sa obtineti timpul Unix /Timestamp-ul curent (numarul de secunde), se utilizeaza functia
time() (ex.: $ts = time(); ).
Alte exemple cu functii pentru Data si Timp

Ca sa lucrati cu Timestamp-ul unei anumite date specifice, utilizati functia mktime().
- Sintaxa:
mktime(ore, minute, secunde, luna, zi, an)
Returneaza timpul Unix corespunzator argumentului.
Se poate utiliza si functia strtotime(). Returneaza timpul Unix a sirului din parametru cu data
textuala in limba engleza.
- Sintaxa:
strtotime("timpul")
- Parametrul "timpul" e un sir /text cu data in limba engleza (ex.: "now", "+1 Day", "15
October 2012", "next Sunday", etc.).
O lista cu formate valabile e la pagina Formate Data si Timp.
Exemplu cu mktime() ai strtotime():

<?php
// preia Timestamp-ul datei October 15, 1976, 20:38:00 (cu mktime)
// returneaza Timestamp-ul si ziua din saptamana a acestei date
$stamp = mktime(20, 38, 0, 10, 15, 1976);
echo 'Timestamp: '. $stamp;
echo '<br /> October 15, 1976 este '. date('l', $stamp);
// Exemplu cu strtotime()
echo '<br /><br />Exemplu cu strtotime():<br />';
echo '<br /> 15 October 1976, 20:38:00 - '. strtotime('15 October 1976,
20:38:00');
// Alte exemple
echo '<br /> 07 July 1996 - '. strtotime('07 July 1996');
echo '<br /> +3 days - '. strtotime('+3 days');
echo '<br /> +1 one week - '. strtotime('+1 week');
echo '<br /> +1 week 2 days 3 hours 30 seconds - '. strtotime('+1 week 2
days 3 hours 30 seconds');
echo '<br /> next Sunday - '. strtotime('next Sunday');
?>
Acest cod va afisa:

Timestamp: 214252680
October 15, 1976 este Friday
Exemplu cu strtotime():
15 October 1976, 20:38:00 - 214252680
07 July 1996 - 836686800
+3 days - 1300950386
+1 one week - 1301292386
+1 week 2 days 3 hours 30 seconds - 1301476016
next Sunday - 1301176800
Ziua 0 dintr-o luna reprezinta ultima zi din luna precedenta.
De exemplu, ziua 0 din Martie 2012 este "29", ultima zi din Februarie 2012:
echo date('d', mktime(0, 0, 0, 03, 0, 2012));
// 29
O alta functie utila pt data si timp e getdate()
- Sintaxa:
getdate(timestamp)
- timestamp - E optional, un numar intreg cu timpul Unix. Daca nu e specificat, foloseste
timestamp-ul curent.
getdate() returneaza un array asociativ cu informatii despre data si timpul din "timestamp",
sau cel curent daca nu e specificat.
- Exemplu:
<?php
$now = getdate();
echo '<pre>';
var_export($now);
echo '</pre>';
?>
Acest cod va afisa un array similar cu acesta:

array (
'seconds' => 48,
'minutes' => 30,
'hours' => 9,
'mday' => 21,
'wday' => 1,
'mon' => 3,
'year' => 2011,
'yday' => 79,
'weekday' => 'Monday',
'month' => 'March',
0 => 1300692648,
)
- Exemplu cu microtime() (returneaza timpul Unix /timestamp curent in microsecunde). E

util, de exemplu in a afla timpul de executie a unui cod PHP.
- Cod:
<?php
$load_time = -microtime(true);
// instructiuni php
$load_time += microtime(true);
echo $load_time. ' seconds';
?>
Lucrul cu siruri (1)
nvatati sa utilizati secvente escape suplimentare pentru a include n siruri caracterele

speciale
nvatati sa utilizati codurile ASCII
nvatati sa creati date de iesire formatate
n Lectia 2 au fost prezentate sirurile, tipul de date PHP care stocheaza texte, n aceasta lectie
veti nvata mai multe despre utilizarea sirurilor.
1. Crearea si afisarea sirurilor

Sa recapitulam notiunile elementare ale sirurilor
Valorile de tip sir sunt secvente de caractere incluse ntre ghilimele duble sau simple
Puteti include un caracter special n cadrul unui sir folosind o secventa escape care
reprezinta caracterul special.
Variabilele pot fi de tip string si li-se poate atribui o valoare de tip sir.
Operatorul de concatenare, punct, ( . ) se poate folosi pentru unirea sirurilor.
PHP poate converti n mod automat o valoare numerica ntr-un sir, respectiv valoarea
unui sir ntr-un numar.
Secventele escape folosite n PHP:
\n - salt la linie noua

\r - retur de car (rand nou)
\t - caracter de tabulare pe orizontala
\\ - backslash
\$ - simbolul dolarului
\" - ghilimele duble
\xxx - caracterul asociat valorii ASCII xxx, exprimata sub forma unui numar in octal
\xnn - caracterul asociat valorii ASCII xxx, exprimata sub forma unui numar n
hexazecimal
2. Secvente escape si cod ASCII

Ultimele doua secvente escape prezentate mai sus folosec un cod ASCII (America Standard
Code for Information Interchange) pentru reprezentarea unui caracter.
Codurile ASCII sunt valori ntregi, care sunt cuprinse ntre 0 si 255; fiecare litera sau simbol
folosit frecvent n limbile vest-europene are asociat un cod ASCII. De exemplu, codul ASCII
asociat literei A este 65, iar codul asociat cifrei l este 49.
Prima secventa escape necunoscuta (\xxx) va permite sa folositi reprezentarea n octal (baza
8) a unui cod ASCII pentru specificarea caracterului corespunzator. De exemplu, valoarea
zecimala 65 (care este codul ASCII al literei A) poate fi reprezentata n octal sub forma 101.
Ca atare, puteti reprezenta litera A folosind secventa escape "\101".
Cea de-a doua secventa escape necunoscuta (\xnn) va permite sa folositi reprezentarea
hexazecimala (n baza 16) a unui cod ASCII pentru specificarea caracterului corespunzator.
De exemplu, valoarea zecimala 65 (care este codul ASCII al literei A) poate fi reprezentat sub
forma hexazecimala 41. Ca atare, puteti reprezenta litera A cu ajutorul secventei escape "\41".
Valoarea unui numar zecimal este suma produselor dintre fiecare cifra care l compune si o
putere a lui 10. De exemplu, numarul zecimal 123 are valoarea l x 10 la puterea 2 + 2 x 10 la
puterea 1 + 3 x 10 la puterea 0 = 1x100 + 2x10 + 3x1.
Puteti determina valoarea unui numar reprezentat folosind o alta baza prin nlocuirea lui 10
cu valoarea bazei respective ntr-o expresie ca aceea prezentata anterior. De exemplu,
valoarea hexazecimala 123 este echivalenta cu valoarea zecimala l x 16 la puterea 2 + 2 x 16
la puterea 1 + 3 x 16 la puterea 0 = l x 156 + 2 x 16 + 3 x l = 291.
Similar, valoarea n octal 123 este echivalenta cu valoarea zecimala 1x8 la puterea 2 + 2x8 la
puterea 1 + 3x8 la puterea 0 = 1x64 + 2x8 + 3xl=83.
Daca vi se pare complicat sa calculam astfel, nu intrati n panica; n continuare veti nvata sa
determinati valoarea n octal sau hexazecimal echivalenta cu orice valoare zecimala, folosind
functii PHP.
3. Utilizarea codurilor ASCII
Numeroase functii PHP sunt deosebit de folositoare la utilizarea codurilor ASCII. Aceste
functii sunt enumerate n tabelul urmator.
Functii folositoare n utilizarea codurilor ASCII
Functie
Descriere
chr(/n) - Returneaza caracterul avnd codul ASCII dat de "n"
- Returneaza valoarea hexazecimala echivalenta cu valoarea
dechex(n)
zecimala data de "n"
- Returneaza valoarea n octal echivalenta cu valoarea zecimala
decoct(n)
data de "n"
- Returneaza valoarea zecimala echivalenta cu valoarea
hexdec(n)
hexazecimala data de "n"
- Returneaza valoarea zecimala echivalenta cu valoarea n octal
octdec(n)
data de "n"
ord(c) - Returneaza codul ASCII echivalent caracterului "c"
Iata un exemplu de utilizare a functiei ord() pentru a determina codul ASCII corespunzator
unui anumit caracter:
<?php
$c = "A";
$n = ord($c);
echo "<br /> Valoarea ASCII a caracterului $c este $n";
?>
Scriptul va afisa urmatorul rezultat:
Valoarea ASCII a caracterului A este 65
Iata un exemplu care afiseaza echivalentele n octal, respectiv hexazecimal al caracterelor
ASCII ale caror coduri sunt cuprinse ntre 33 si 40:
<?php
for ($i=33; $i<40; $i++) {
$c=chr($i);
$octal = decoct($i);
$hex = dechex($i);
echo "<br /> $i (octal $octal, hex $hex): caracter - $c";
}
?>
Scriptul va afisa urmatorul rezultat:
33 (octal 41, hex 21): caracter - !
34 (octal 42, hex 22): caracter - "
35 (octal 43, hex 23): caracter - #
36 (octal 44, hex 24): caracter - $
37 (octal 45, hex 25): caracter - %
38 (octal 46, hex 26): caracter - &
39 (octal 47, hex 27): caracter - '
4. Crearea datelor de iesire formatate

PHP include doua functii utile pentru generarea datelor de iesire formatate, n speta printf()
si sprintf().
Functia printf() afiseaza datele sale de iesire, n timp ce functia sprintf() returneaza datele
sale de iesire sub forma unei valori sir.

n general, fiecare functie preia doua sau mai multe argumente. Primul argument este un sir,
denumit sir de formatate, care specifica formatul datelor de iesire, iar celelalte argumente
specifica valorile care vor constitui datele de iesire.
Iata un exemplu simplu de utilizare a functiei sprintf():
<?php
$num = 8.7;
echo $num;
$num = sprintf("%05.2f", $num);
echo '<br>'. $num;
?>
- Rezultatul afisat va fi:
8.7
08.70
- Cu ajutorul expresiei "%05.2f", sprintf() formateaza numarul din $num astfel incat acesta sa
fie format din 5 caractere dintre care unul punct (.) si 2 zecimale.
Iata si doua exemple de utilizare a functiei printf():
<?php
$n = 8;
printf("Valoarea lui n este: %d", $n);
?>
- Va afisa "Valoarea lui n este: 8".
Al doilea exemplu, putin mai complicat, prezinta modul de utilizare a functiei printf() cu mai
multe argumente pentru datele de iesire:
<?php
$sir = 'Aceasta este lectia %d din cursul %s';
$num = 13;
$tip = 'PHP';
printf($sir, $num, $tip);
?>
- Includerea datelor formatate in sir se face in ordinea adaugarii variabilelor intre parantezele
functiei "sprintf()".
- Va afisa "Aceasta este lectia 13 din cursul PHP".
Sirul de formatare consta dintr-o serie de caractere si directive ordinare. Un caracter ordinar
este orice caracter, n afara caracterului "%". Caracterele ordinare sunt pur si simplu copiate
la iesire.
Directivele reprezinta secvente de caractere care ncep cu simbolul "%"; aceste determina
modul n care va fi formatat argumentul corespunzator.
O directiva simpla, cum este cea din exemplul precedent, poate consta dintr-un caracter "%"
urmat de un specificator de tip, precum "d", care arata ca argumentul trebuie tratat ca numar
zecimal. Cu toate acestea, o directiva mai sofisticata poate include urmatoarele componente,
care trebuie sa apara n ordinea indicata:
Specificator de completare (optional): - Un specificator de completare precizeaza

caracterul care se va folosi pentru a completa rezultatul pna la dimensiunea ceruta a
sirului, n cazul n care caracterul de completare este omis, rezultatul este completat
cu spatii. Specificatorul de completare poate fi un caracter spatiu sau un 0 (zero). Un
specificator de completare de tip spatiu este folosit frecvent cu sirurile, iar un

specificator de completare zero se foloseste mai ales alaturi de numere. Un alt caracter
de completare poate fi specificat prin prefixarea acestuia cu un singur semn al citarii
('). De exemplu, pentru a completa un rezultat cu liniute de subliniere, specificati '_
drept caracter de completare.
Specificator de aliniere (optional): - Un specificator de aliniere indica daca rezultatul

trebuie sa fie aliniat la stnga sau la dreapta. Daca specificatorul de aliniere este omis,
rezultatul va fi aliniat la dreapta; daca se indica o cratima (-) drept specificator de
aliniere, rezultatul va fi aliniat la stnga.
Specificator de latime (optional): - Un specificator de latime este un ntreg care

determina numarul minim de caractere ale rezultatului; sau, daca argumentul este de
tip double, numarul minim de caractere situate la stnga punctului zecimal. Daca
rezultatul contine un numar mai redus de caractere, atunci va contine si caractere de
completare.
Specificator de precizie (optional): - Un specificator de precizie este un punct

zecimal, urmat de un ntreg care determina numarul de cifre dupa punctul zecimal pe
care trebuie sa le contina rezultatul. Specificatorul de precizie nu are nici un efect
pentru alte tipuri dect double (float).
Specificator de tip (obligatoriu): - Specificatorul de tip determina modul de tratare si

afisare a argumentului.
Tabelul urmator prezinta specificatorii de tip disponibili.

Specificatorii de tip PHP folositi la formatarea sirurilor
Specificator de
tip
Descriere
- Trateaza argumentul ca pe un ntreg si l afiseaza ca

valoare binara
- Trateaza argumentul ca pe un ntreg si afiseaza caracterul

cu aceeasi valoare ASCII ca si argumentul
- Trateaza argumentul ca pe un ntreg si l afiseaza ca

valoare zecimala
- Trateaza argumentul ca pe o valoare de tip double si l

afiseaza ca valoare cu virgula mobila
- Trateaza argumentul ca pe un ntreg si l afiseaza ca pe o

valoare scrisa n octal
- Trateaza argumentul ca pe un sir si l afiseaza
- Trateaza argumentul ca pe un ntreg si l afiseaza ca numar

hexazecimal, cu litere scrise cu minuscule
- Trateaza argumentul ca pe un ntreg si l afiseaza ca numar

hexazecimal, cu litere scrise cu majuscule
Daca doriti sa inserati simbolul procentului n datele de iesire ale unui apel la functia printf()
sau sprintf(), inserati doua caractere "%".
Tabelul urmator prezinta rezultatele aplicarii a diferite siruri de formatare valorilor selectate.
Studiati tabelul si verificati daca ati nteles corect modul de operare a specificatorilor din
cadrul fiecarui sir de formatare. Remarcati ca, n cazul omiterii cifrelor zecimale, se produce
automat o rotunjire.
Spatiile au fost nlocuite prin accente circumflexe(^), pentru a facilita determinarea
numarului de spatii si a amplasarii acestora.
Exemple de rezultate ale utilizarii a diferite siruri de formatare
Valoare
Format
Rezultat
100
%d
100
100
%b
1100100
100
%o
144
100
%x
64
100
%f
100.000000
12.345
%^-10f
12.345000^^^^^^^^
12.345
%^10f
^^^^^^^^12 .345000
12.345
%^-10.2f
12.35^^^^^^^^
12.345
%10.2f
^^^^^^^^12.35
test
%^-10s
test^^^^^^
test
%^10s
*^^^^^^test
Daca utilizarea functiilor printf() si sprintf() pentru formatarea numerelor pare cam greoaie,
puteti folosi functia number_format(), care returneaza o valoare de tip sir continnd un
rezultat formatat. Puteti apela functia cu unul, doua sau patru argumente:
number_format(numar)
number_format(numar, zecimale)
number_format(numar, zecimale, punct_zecimal, separator_mii)
- Argumentul "numar" specifica valoarea numerica pe care doriti sa o formatati.

- Argumentul "zecimale" specifica numarul dorit de cifre zecimale.
- Argumentul "punct_zecimal" precizeaza caracterul ce se va folosi drept punct zecimal.
- Argumentul "separator_mii' precizeaza caracterul care se va folosi ca separator al miilor.
n mod prestabilit, rezultatul este formatat fara zecimale, este inserat un punct (.) naintea
cifrelor care compun partea zecimala, respectiv se foloseste o virgula (,) pentru separarea
miilor.
De exemplu, apelul la functia number_format(1.234, 2) returneaza valoarea 1.23
Functia PHP sscanf(), este complementara functiei printf(). Daca functia printf() genereaza
date de iesire formatate, functia sscanf() citeste un sir, l interpreteaza prin referirea la un sir
de formatare si stabileste valorile variabilelor specificate n functie de continutul sirului.
Sa luam n considerare urmatorul exemplu:
<?php
$subiect = "08,25,2008";
$n = sscanf($subiect, "%d,%d,%d", &$luna, &$zi, &$an);
echo "Au fost gasite $n valori";
echo "<br /> luna = $luna";
echo "<br /> zi = $zi";
echo "<br /> an = $an";
?>
Datele de iesire ale acestui script sunt:
Au fost gasite 3 valori
luna = 8
zi = 25
an = 2008
Functii pentru siruri (strings)

Aici gasiti cateva din cele mai utile functii PHP pentru siruri (strings).
1. addslashes("sir")
- Adauga caracterul \ (backslash) inaintea ghilimelelor simple si duble, a lui backslash si
NULL (NULL byte). Ca pretectie, de exemplu cand sirul e adaugat intr-o baza de date.
<?php
$sir = 'Un sir ce contine caractere: " si \ ';
echo addslashes($sir);
?>
// Un sir ce contine caractere: \" si \\
2. bin2hex('sir')
- Returneaza forma hexadecimala a lui 'sir'
<?php
echo bin2hex('M');
?>
// 4d
3. chr(ascii)
- Returneaza caracterul reprezentat de codul ASCII din parametru.
<?php
echo chr(77);
?>
// M
4. chunk_split("sir", nr, 'sep')
- Imparte "sir" in mai multe sub-siruri, avand lungimea de caractere "nr" si separate prin
"sep".
<?php
$sir = 'Sir de test, siruri.';
echo chunk_split($sir, 7, ' | ');
?>
// Sir de | test, s | iruri. |
5. echo 'sir'
- Afiseaza in browser continutul 'sir'.
<?php
echo 'http://www.marplo.net';
?>
// http://www.marplo.net
6. explode('sep', "sir")
- Creaza un Array (matrice) cu partile din "sir" separate prin "sep". Fiecare sub-sir delimitat
de "sep" devine un element in matrice. Este inversul lui "implode()".
<?php
$sir = 'Sir de test, cu subsiruri, separate de, virgula.';
$aray = explode(',', $sir);
print_r($aray);
=> virgula. )
?>
// Array ( [0] => Sir de test [1] => cu subsiruri [2] => separate de [3]
7. html_entity_decode("sir")
- Decodeaza entitatile html din "sir". E opusul lui "htmlentities()"
<?php
$sir = 'Sir de test, cu entitati © <b>html</b>.';
echo html_entity_decode($sir);
?>
// Sir de test, cu entitati <b>html</b>.
8. htmlentities("sir")
- Converteste toate caracterele specifice din sir in entitati HTML.
<?php
$sir = 'Sir de test, cu entitati " & - <b>html</b>.';
$sir = htmlentities($sir);
// $sir va deveni: Sir de test, cu entitati " & <b>html</b>.
?>
9. htmlspecialchars_decode("sir")
- Converteste entitatile HTML, ce pot fi codificate cu "htmlspecialchars()", inapoi la forma de
caracter.
10. htmlspecialchars("sir")
- Converteste doar caracterele ghilimele, & < si > din "sir" in entitati HTML.
11. md5("sir")
- Codifica sirul cu algoritmul MD5, returnand un sir codat cu 32 de caractere.
<?php
$sir = 'www.marplo.net';
echo md5($sir);
?>
// 7760a752458ff3168ff1a2d0ded94082
12. rtrim("sir", 'caracters')

- Sterge din partea dreapta a sirului caracterele specificate la "caracters", care poate fi un
singur caracter sau un sir. Daca al doilea parametru nu e specificat, va sterge spatiile libere
din dreappta.
<?php
$sir = 'abc def gh89 ';
echo rtrim($sir, '89 ');
// abc def gh
echo rtrim($sir);
// abc def gh89
?>
13. sha1("sir")
- Similar cu "md5()", aceasta functie codifica sirul cu algoritmul SHA1 (US Secure Hash
Algorithm 1), returnand un sir codat cu 40 de caractere.
14. str_ireplace("old", "new", "sir")
- Inlocuieste in "sir" caracterele specificate la "old" cu cele de la "new", fara a tine cont de
majuscule sau litere mici. "old" si "new" pot fi si de tip Array.
<?php
$sir = 'Test sir, tutorial php, functii pt. siruri.';
echo str_ireplace('Tutorial', 'curs', $sir);
// Test sir, curs php, functii pt. siruri.
echo str_ireplace(array('siruri', 'sir'), 'string', $sir);

string.
?>
// Test string, tutorial php, functii pt.
14. str_replace("old", "new", "sir")

- Similar cu "str_ireplace()", inlocuieste in "sir" caracterele specificate la "old" cu cele de la
"new", dar este case-sensitive (tine cont de majuscule si litere mici). "old" si "new" pot fi si
de tip Array.
15. str_repeat("sir", nr)
- Returneaza un sir in cara parametrul "sir" e repetat de "nr" ori.
<?php
$sir = '=- ';
echo str_repeat($sir, 8);
?>
// =- =- =- =- =- =- =- =-
16. str_shuffle("sir")
- Amesteca aleator caracterele din "sir".
<?php
$sir = 'Site www.marplo.net/php-mysql';
echo str_shuffle($sir);
?>
// o.t-pwywpqewt/lahspmmSri .eln
17. str_split("sir", nr)

- Transforma "sir" in Array, impartind pentru fiecare element sub-siruri cu lungimea de "nr"
caractere. Daca "nr" nu e specifcat, fiecare caracter din sir va deveni un element in matrice.
<?php
$sir = 'Test sir';
$ar1 = str_split($sir);
// $ar1 va avea valoarea array('T', 'e', 's', 't', ' ', 's', 'i', 'r')
$ar2 = str_split($sir, 3);
// $ar2 va avea valoarea array('Tes', 't s', 'ir')
?>
18. str_word_count("sir")
- Returneaza numarul de cuvinte din sir.
<?php
$sir = 'Toate`s vechi si noi sunt toate';
echo str_word_count($sir);
// 7 (`s e considerat un cuvant separat deoarece apostroful nu
e considerat parte dintr-un cuvant)

echo str_word_count($sir, 0, '`');
// 6 (Asa include si apostroful (`) ca facand parte din
cuvant)
?>
19. strcasecmp("sir1", "sir2")
- Compara cele doua siruri date ca parametri, fara diferenta intre majuscule si litere mici.
Returneaza 0 daca sirurile sunt egale, < 0 daca "sir1" e mai mic decat "sir2" sau > 0 daca
"sir1" e mai mare decat "sir2"
<?php
$sir1 = 'Salut';
$sir2 = 'salut';
if (strcasecmp($sir1, $sir2) == 0) {
echo 'Sirurile sunt egale';
}
?>
20. strcmp("sir1", "sir2")
- Similar cu "strcasecmp()", diferenta fiind ca face o comparatie ce tine cont de majuscule si
litere mici.
21. strcspn("sir", 'car')
- Returneaza lungimea primului segment din "sir" ce nu contine nici un caracter specificat la
'car'
<?php
$sir = 'Salut tuturor, tineri si batrani';
echo strcspn($sir, 'tu');
?>
// 3 ('u' fiind gasit al patrule caracter in $sir)
22. strip_tags("sir")
- Sterge tag-urile HTML si PHP din "sir".
<?php
$sir = 'Exemplu cu <b>taguri</b> <h6>html</h6>';
echo strip_tags($sir);
?>
// Exemplu cu taguri html
23. stripslashes("sir")
- Returneaza "sir" fara caracterele backslashes adaugate. Inversul lui "addslashes()"
<?php
$sir = 'Exemplu cu \" stripslashes() \" \n';
echo stripslashes($sir);
?>
// Exemplu cu " stripslashes() " n
24. stripos("sir", "sub-sir")

- Returneaza pozitia de unde incepe "sub-sir" in "sir" (incepand de la 0), fara diferenta intre
litere mici si majuscule. Daca "sub-sir" nu e gasit, returneaza FALSE.
<?php
echo stripos($sir, 'marplo');
?>
// 4
25. strpos("sir", "sub-sir")

- Returneaza pozitia de unde incepe "sub-sir" in "sir" (incepand de la 0), case-sensitive,
tinand cont de litere mici si majuscule. Daca "sub-sir" nu e gasit, returneaza FALSE.
26. stristr("sir", 'car')
- Returneaza tot sub-sirul din "sir", care incepe de la prima aparitie a lui 'car', fara diferenta
intre majuscule si litere mici. Daca nu e gasit 'car', returneaza FALSE.
<?php
echo stristr($sir, 'mar');
?>
// marplo.net
27. strstr("sir", 'car')

- Returneaza tot sub-sirul din "sir", care incepe de la prima aparitie a lui 'car', case-sensitive
(cu deosebire intre majuscule si litere mici). Daca nu e gasit 'car', returneaza FALSE.
28. strlen("sir")
- Returneaza lungimea lui "sir" (numarul de caractere).
<?php
$sir = 'Tutorial PHP';
echo strlen($sir);
?>
// 12
29. strrchr("sir", "sub-sir")
- Returneaza bucata ramasa din "sir" incepand de la ultimul caracter din "sub-sir" gasit in
"sir". Functia e case-sensitive. Daca "sub-sir" nu se gaseste in "sir", returneaza FALSE.
<?php
$sir = 'Tutorial PHP, curs gratuit';
echo strrchr($sir, 'Hp');
diferit de P)
?>
// HP, curs gratuit (incepe de la H, deoarece 'p' nu e in $sir, fiind
30. strrev("sir")
- Inverseaza sir-ul.
<?php
$sir = 'Tutorial PHP, curs gratuit';
echo strrev($sir);
?>
// tiutarg sruc ,PHP lairotuT
31. strtolower("sir")
- Transforma toate literele din sir in litere mici.
<?php
$sir = 'Tutorial PHP, curs ONLINE gratuit';
echo strtolower($sir);
?>
// tutorial php, curs online gratuit
32. strtoupper("sir")
- Transforma toate literele din sir in majuscule (litere mici).
<?php
$sir = 'Tutorial PHP, curs ONLINE gratuit';
echo strtoupper($sir);
?>
// TUTORIAL PHP, CURS ONLINE GRATUIT
33. substr_count("sir", "sub_sir")

- Returneaza numarul de cate ori "sub_sir" se gaseste in "sir". Functia este case-sensitive.
<?php
$sir = 'Un test functii php, test pentru siruri.';
echo substr_count($sir, 'test');
?>
// 2;
34. substr("sir", start, lungime)

- Returneaza portiunea din "sir" care incepe de la "start", cu lungimea de caractere "lungime".
Daca parametrul "lungime" nu e specificat, se considera pana la sfarsitul sirului.
<?php
$sir = 'Tutoriale, cursuri, scripturi php.';
echo substr($sir, 11, 18);
?>
// cursuri, scripturi
35. trim("sir", 'del')

- Sterge din marginile sirului caracter-ul (caracterele) specificate la "del". Daca al doilea
parametru, "del", nu e adaugat, sterge spatiile libere din marginile sirului.
<?php
$sir = '--Tutoriale php--';
echo trim($sir, '-');
?>
// Tutoriale php
36. ucfirst("sir")
- Transforma primul caracter din "sir" in litera mare.
<?php
$sir = 'abc def';
echo ucfirst($sir);
?>
// Abc def
37. ucwords("sir")
- Transforma primul caracter al fiecarui cuvant din "sir" in litera mare.
<?php
$sir = 'marplo.net, web site';
echo ucwords($sir);
?>
// Marplo.net, Web Site
38. nl2br("sir")
- Inlocuieste caracterele de rand nou (\r\n si \n) cu tagul HTML BR. Functie utila cand sirul e
preluat dintr-un textarea.
<?php
$sir = "Sir test \r\n preluat dintr-un \r\n camp textarea.";
$sir = nl2br($sir);
textarea."
?>
// Acum $sir va fi "Sir test <br /> preluat dintr-un <br /> camp
39. wordwrap("sir", lungime, "sep", true)

- Imparte "sir" la numarul de caractere specificat de "lungime", separand prin "sep" partile
astfel obtinute. Functie utila cand se doreste scurtarea liniilor sau cuvintelor prea lungi. Daca
"true" nu e specificat, va imparti doar randurile, lasand cuvintele neafectate.
<?php
$sir = 'Cuvaaaaaaaaaannnnnnnnnnnntttttttt, cam prea llluuuuuuunnnnnnnnggggggg.';
$sir1 = wordwrap($sir, 20, '<br />');
// Acum $sir1 va fi
'Cuvaaaaaaaaaannnnnnnnnnnntttttttt,<br /> cam prea<br />
llluuuuuuunnnnnnnnggggggg.'
$sir2 = wordwrap($sir, 20, '<br />', true);
// Acum $sir2 va fi
'Cuvaaaaaaaaaannnnnnn<br />nnnnntttttttt, cam <br />prea <br
/>llluuuuuuunnnnnnnnggg<br />gggg.'
?>
Lucrul cu siruri (2)
nvatati sa maniupulati sirurile folosind diferite functii
Invatati sa lucrati cu subsiruri
1. Manipularea sirurilor
PHP contine peste 70 de functii care lucreaza cu siruri. Aceasta sectiune descrie cateva functii
pe care este posibil sa le utilizati frecvent. Aceste functii va permit sa obtineti lungimea unui
sir, sa eliminati dintr-un sir caracterele de tip spatiu alb, sa convertiti caracterele unui sir n
majuscule sau minuscule si altele.
- Functia strlen() returneaza lungimea sirului specificat ca argument al functiei.
Iata un exemplu simplu de utilizare a functiei strlen():
<?php
$s = "Acesta este un sir";
$n = strlen($s);
echo "<br /> Lungimea sirului este: $n";
?>
Scriptul de mai sus va afisa:
Lungimea sirului este: 18
- Numeroase functii PHP va permit sa eliminati caracterele de tip spatiu alb de la una sau
ambele extremitati ale unui sir.
Iata un exemplu; care prezinta modul de operare al acestor functii:
<?php
$s = "
Acesta este un sir
";
$n = strlen($s);

$trim =chop($s);
// Elimina spatiile albe din partea dreapta a sirului
$n = strlen($trim);
$trim = ltrim($s);
// Elimina spatiile albe din partea stanga a sirului
$n = strlen($trim);
$trim = rtrim($s);
// Elimina spatiile albe din partea dreapta a sirului
$n = strlen($trim);
$trim = trim($s);
// Elimina spatiile albe din ambele parti a sirului
$n = strlen($trim);
?>
Urmatorul tabel prezinta Functiile PHP de eliminare a caracterelor din siruri:
Functii PHP de eliminare a caracterelor din siruri
Functie
Descriere
chop(s)
- Returneaza valoarea lui 's', eliminnd spatiile albe de la

extremitatea din dreapta a sirului. Similar cu rtrim()
ltrim(s)

extremitatea din stnga a sirului
rtrim(s)

extremitatea din dreapta a sirului. Similar cu chop()
trim(s)
- Returneaza valoarea lui 's', eliminnd spatiile albe de la ambele

extremitati
- Functia strtoupper() returneaza valoarea argumentului, convertita la majuscule.

- Functia strtolower{) returneaza valoarea argumentului, convertita la minuscule.
- Functia ucfirst{) returneaza valoarea argumentului, cu primul caracter din sir majuscula.
Nici una din functii nu modifica valoarea argumentului, valoarea convertita este cea returnata
ca rezultat al functiei.
Iata un scurt exemplu, care prezinta modul de operare a acestor functii:
<?php
$s = "abcdefg";
$rezultat = strtoupper($s);
$rezultat2 = ucfirst($s);
echo "<br />strtoupper('$s'): $rezultat";
echo "<br />ucfirst('$s'): $rezultat2";

$s = "ABCDE";
$rezultat = strtolower($s);
echo "<br />strtolower('$s'): $rezultat";
?>
strtoupper(abcdefg): ABCDEFG
ucfirst(abcdefg): Abcdefg
strtolower(ABCDE): abcde
2. Compararea sirurilor
PHP furnizeaza patru functii care sunt deosebit de utile pentru compararea sirurilor. Aceste
functii sunt enumerate n tabelul urmator.
Fiecare functie returneaza o valoare al carei semn determina rezultatul comparatiei; nu
trebuie sa ncercati sa interpretati valoarea returnata efectiva.
Functii PHP de comparatie ntre siruri
Functia
Descriere
strcasecmp(s1, s2)
- Executa o comparatie fara sensibilitate la diferenta ntre majuscule si

minuscule. Returneaza o valoare mai mica dect zero daca 's1' este mai
mic dect 's2', o valoare mai mare dect zero daca 's1' este mai mare
dect 's2', respectiv 0 n celelalte cazuri.
strcmp(s1, s2)
- Executa o comparatie cu sensibilitate la diferenta ntre majuscule si

minuscule. Returneaza o valoare mai mica dect zero daca 's1' este mai
- Executa o comparatie fara sensibilitate la diferenta ntre majuscule si

minuscule. La comparatie sunt luate n considerare un numar de 'n'
strncasecmp(s1, s2, n) caractere. Returneaza o valoare mai mica dect zero daca 's1' este mai
strncmp(s1,s2, n)
- Executa o comparatie cu sensibilitate la diferenta ntre majuscule si

minuscule. La comparatie sunt luate n considerare un numar de 'n'
caractere. Returneaza o valoare mai mica dect zero daca 's1' este mai
Iata un scurt exemplu care prezinta modul de utilizare a acestor functii:

<?php
$s1 = "abcd";
$s2 = "ABCE";
$rezultat = strcasecmp($s1, $s2);
echo "<br /> Functia strcasecmp a returnat $rezultat";
$rezultat = strcmp($s1, $s2);
echo "<br /> Functia strcmp a returnat $rezultat";
$rezultat = strncasecmp($s1, $s2, 3);
echo "<br /> Functia strncasecmp returnat $rezultat";

$rezultat = strncmp($s1, $s2, 3);
echo "<br /> Functia strncmp a returnat $rezultat";
?>
Functia strcasecmp a returnat -1
Functia strcmp a returnat 1
Functia strncasecmp returnat 0
Functia strncmp a returnat 1
Datele de iesire va arata ca functia strcasecmp() a identificat sirul "abcd" ca fiind mai mic
dect "ABCE", in schimb, functia strcmp(), la fel ca si functia strncmp(), a identificat sirul
"abcd" ca fiind mai mare dect "ABCE". Aceasta s-a ntmplat deoarece literele minuscule au
n secventa ASCII o pozitie superioara literelor scrise cu majuscule; litera 'A' are valoarea
ASCII 65, iar litera 'a' are valoarea ASCII 97.
De asemenea, datele de iesire arata ca functia strncasecmp() a identificat sirul "s1" ca egal
cu "s2", deoarece au fost luate in considerare numai primele 3 caractere.
3. Descoperirea si extragerea sub-sirurilor

PHP include numeroase functii care gasesc si extrag sub-tiruri, adica parti dintr-un sir. Cele
mai importante functii de acest gen sunt rezumate n tabelul urmator:
Functii PHP de extragere si cautare
Functie
Descriere
strchr(s1,s2)
- Returneaza toate sirurile 's1' de la prima aparitie a sirului 's2' si pna la

sfrsit. Daca 's1' nu este gasit, functia returneaza FALSE. Functia
strstr() executa aceeasi operatie
stristr(s1,s2)

sfrsit. Daca 's1' nu este gasit, functia returneaza FALSE. Sirurile 's1' si
's2' sunt comparate fara a se tine cont daca literele sunt majuscule sau
minuscule
strpos(s1,s2)
- Returneaza pozitia (nr. intreg) a primei aparitii a sirului 's2' n 's1'.Daca

's2' nu este gasit, functia returneaza FALSE
strrchr(s1,s2)
- Returneaza toate sirurile 's1' de la ultima aparitie a sirului 's2' si pna la

sfrsit. Daca 's1' nu este gasit, functia returneaza FALSE. La comparatie
este folosit numai primul caracter al sirului 's2'
strstr(s1,s2)

sfrsit. Daca 's1' nu este gasit, functia returneaza FALSE. Functia
strchr() executa aceeasi operatie
- Returneaza portiunea sirului 's' specificata de indexul ntreg 'start'

substr(s, starf)
respectiv de indexurile 'start' si 'lung'. Prima pozitie a sirului este pozitia
substr(s, start, lung)
0.
Iata un exemplu simplu, care prezinta modalitatile de utilizare a mai multor functii de
extragere si cautare:
<?php
$s = "the cat on the mat near the bat";
$b = "at";
$n = strpos($s, $b);
echo "<br /> strpos(\"$s\", \"$b\"): $n";
$b = "at";
$n = strchr($s, $b);
echo "<br /> strchr(\"$s\", \"$b\"): $n";
$b = "at";
$n = strrchr($s, $b);
echo "<br /> strrchr(\"$s\", \"$b\"): $n";
$rezultat = substr($s, 4, 3);
echo "<br /> substr(\"$s\", 4, 3): $rezultat";
?>
Studiati cu atentie scriptul si tabelul de mai sus pentru a intelege datele de iesire. Iata si
datele de iesire:
strpos("the cat on the mat near the bat", "at"): 5
strchr("the cat on the mat near the bat", "at"): at on the mat near the bat
strrchr("the cat on the mat near the bat", "at"): at
substr("the cat on the mat near the bat", 4, 3): cat
O potentiala dificultate n utilizarea functiei strpos() consta n aceea ca poate fi greu de
sesizat diferenta dintre valoarea returnata 0, care arata ca sub-sirul a fost gasit n pozitia
initiala a sirului, si valoarea returnata FALSE, care arata ca sub-sirul nu a fost gasit.
Iata un scurt exemplu care indica un mod adecvat de testare a valorii returnate de functia
strpos(), astfel nct sa se poata face diferenta ntre cele doua rezultate:
<?php
$poz = strpos($s1, $s2);
if ($poz == FALSE) {
echo "<br /> sub-sirul nu a fost gasit";
}
?>
Procedeul prezentat foloseste operatorul de identitate (==) pentru a determina daca valoarea
returnata este identica - nu doar aritmetic egala - cu valoarea FALSE.
4. nlocuirea unui sub-sir

O operatie frecvent folosita n programare consta n gasirea unui sub-sir si nlocuirea sa cu o
valoare noua. PHP are doua functii deosebit de utile pentru asemenea operatii, si anume
str_replace() si substr_replace().
Mai jos sunt prezentate pe scurt aceste functii.
Remarcati ca functia str_replace() noteaza sub-sirul prin valoarea sa, n timp ce functia
substr_replace() noteaza sub-sirul prin pozitia sa n interiorul sirului subiect.
str_replace(cauta, nlocuire, subiect) - Se cauta n sirul 'subiect' sub-sirul 'cauta';

daca sub-sirul este gasit, returneaza valoarea 'subiect', nlocuindu-se prima aparitie a
sirului 'cauta' cu 'nlocuire'.
substr_replace(subiect, nlocuire, start, lungime) - Returneaza valoarea 'subiect',

nlocuind sub-siruf care ncepe de la 'start' si avnd lungimea 'lungime' cu sirul
'nlocuire'.
Iata un exemplu care prezinta modul de utilizare a acestor functii:

<?php
$subiect = "the cat on the mat near the bat";
echo "<br /> Subiect : $subiect";
$cauta = "cat";
$inlocuire = "DOG";
$rezultat = str_replace($cauta, $inlocuire, $subiect);
echo "<br /> str_replace : $rezultat";
$inlocuire = "CAT";
$rezultat = substr_replace($subiect, $inlocuire, 4, 3);
echo "<br /> substr_replace : $rezultat";
?>
Iata si rezultatul exemplului :
Subiect : the cat on the mat near the bat
str_replace : the DOG on the mat near the bat
substr_replace : the CAT on the mat near the bat
Expresii regulate, regex
Invatati sa scrieti si sa utilizati expresii regulate
Invatati sa verificati sirurile in functie de expresii regulate
1. Scrierea expresiilor regulate (Regex)

Expresiile regulate (regex) sunt un sir de caractere sablon care descriu multimea cuvintelor
posibile care pot fi formate cu acele caractere, respectand anumite reguli. Aceste expresii
regulate folosesc paranteze (rotunde, patrate, acolade) prin care formeaza regulile de formare
a cuvintelor. Utilitatea cea mai frecventa a unei expresii regulate consta n a recunoaste daca
un sir contine sau nu cuvinte sau sub-sir care pot fi formate prin expresia regulata respectiva.
De ex.: expresia m[ai]r poate forma cuvintele: mar si mir
Sa presupunem ca doriti sa specificati un sir care poate include orice vocala. Puteti face
aceasta folosind expresia regulata [aeiou]. Prin includerea valorilor posibile ntre paranteze,
formati o expresie regulata echivalenta cu formularea "alege oricare din aceste valori". Daca
doriti sa permiteti si utilizarea, majusculelor, puteti scrie [aeiouAEIOU].
Sa presupunem ca doriti sa specificati un sir care poate include orice caracter scris cu
minuscule. Puteti scrie: [abcdefghijklmnopqrstuvwxyz]. Sau puteti folosi o forma mai

compacta [a-z], unde prin cratima se ntelege "o serie de caractere consecutive".
Sa presupunem ca doriti sa specificati intr-o expresie regulata sirurile "sat", "mat" si "lat".
Pentru aceasta, aveti nevoie de expresia regulata [sml]at. Semnificatia acestei expresii
regulate este urmatoarea: "alege oricare din literele 's', 'm' si 'l' si scrie dupa litera respectiva
literele 'at'".
Daca un accent circumflex (^) este primul simbol mentionat ntre parantezele drepte, acesta
are ca efect inversarea semnificatiei expresiei regulate plasate ntre paranteze.
De exemplu, expresia regulata [â-z] corespunde oricarui caracter care nu este o litera
mica.
Pentru a specifica faptul ca o expresie regulata se poate repeta, expresia regulat va fi urmata
de o pereche de acolade, care includ limitele superioara si inferioara ale repetitiei.
De exemplu, expresia regulata [aeiou]{1,4} corespunde sirurilor care pot contine intre
1 si 4 vocale.
Pentru a specifica repetarea mai multor parti ale unei expresii regulate, includeti partile
respective ntre paranteze rotunde.
De exemplu, expresia regulata ([sml]at){1 ,2} corespunde unui numar de una sau
doua repetari ale oricaruia dintre sirurile "sat", "mat" sau "lat".
Pentru a simplifica scrierea de reguli intr-o expresie regulata se folosesc anumite caractere
"speciale"
Sa presupunem ca doriti sa reprezentati o nmultire intre doua numere, puteti obtine ceva de
genul [0-9]*[0-9]. Totusi, aceasta expresie regulata nu are semnificatia dorita, deoarece '*'
este un factor de repetitie, nu un caracter dintr-un sir. Pentru a dezactiva semnificatia speciala
a caracterului '*', trebuie sa-l prefixati cu un caracter backslash: [0-9]\*[0-9].
Pentru a specifica faptul ca o expresie regulata corespunde numai unui sub-sir care include
anumite caractere la inceput, prefixati expresia regulata cu un accent circumflex "^". De
exemplu, expresia regulata ^[sml]at corespunde sub-sirurilor "sat", "mat" sau "lat" numai
daca acestea apar la nceputul sirului subiect.
Similar, pentru a arata ca o expresie regulata corespunde numai unui sub-sir care include
anumite caractere la sfarsit, anexati la expresia regulata un simbol al dolarului "$". De
exemplu, expresia regulata [sml]at$ corespunde sirurilor "sat", "mat" sau "lat" numai daca
acestea apar la sfrsitul sirului subiect.
Iata o lista cu mai multe caractere speciale si rolul lor in expresiile regulate:
^ - indica inceputul liniei
$ - indica sfarsitul liniei
. - (punct) orice caracter
[] - un caracter dintre cele din paranezele patrate
[^] - orice caracter, in afara celor din paranezele patrate
\ - scoate din contextul formari expresiei caracterul care urmeaza
+ - caracterul (expresia) anterior acestui semn se poate repeta odata si de cate ori e
posibil (de la 1 la infinit)
* - caracterul (expresia) anterior acestui semn se poate repeta de cate ori e posibil
sau niciodate (de la 0 la infinit)
? - caracterul (expresia) anterior acestui semn se poate repeta ce mult odata
<> - un cuvant intreg
(|) - lista de optiuni SAU
{m, n} - repetarea expresiei de la "m" la "n" ori
Iata cateva exemple de expresii regulate:
(.*) - Reprezinta toate caracterele (prin .) repetate de cate ori e posibil (dat de *)
<salut> - Cuvantul "salut"
(ci|co)tim - Reprezinta "citim" si "cotim"
^The .* hack$ - Sirurile care incep cu "the " si se sfarsesc cu " hack"
^www.[a-z0-9]+.ro$ - Reprezinta sirurile "www.---.ro" unde '---' poate fi orice litera

sau cuvant ce contine litere mici si numere
(^-\+[0-9]*) - Orice numar care incepe cu "-" sau "+"
^([a-zA-Z0-9]+[a-zA-Z0-9._%-]*@([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,4})$ - Expresie
regulata pentru adrese de e-mail
2. Utilizarea expresiilor regulate

PHP include numeroase functii care lucreaza cu expresii regulate. Tabelul urmator descrie
unele din aceste functii.
Functii PHP pentru expresii regulate
Functie
Descriere
ereg
- Executa o identificare cu o expresie regulata (anulata incepand cu

versiunea PHP 5.3)
- nlocuieste un sub-sir care corespunde unei expresii regulate (anulata

ereg_replace incepand cu versiunea PHP 5.3 - in locul ei poate fi folosita
preg_replace)
eregi
- Executa o identificare cu o expresie regulata insensibila la diferenta

ntre majuscule si minuscule (anulata incepand cu versiunea PHP 5.3)
- nlocuieste un sub-sir care corespunde unei expresii regulate insensibile

eregi_replace la diferenta ntre majuscule si minuscule (anulata incepand cu
versiunea PHP 5.3 - in locul ei poate fi folosita preg_replace)
preg_replace
- Cauta in sir caracterele sau sablonul care se potriveste cu expresia

regulata din functie si o inlocuieste cu alte valori date
split
- Divide un sir ntr-un tablou folosind o expresie regulata (anulata

incepand cu versiunea PHP 5.3 - in locul ei poate fi folosita
preg_split)
sql_regcase
- Creaza o expresie regulata, insensibila la diferenta ntre majuscule si

minuscule, dintr-un sir care contine o expresie regulata (anulata
incepand cu versiunea PHP 5.3)
In continuare este dat un exemplu cu functia ereg().

Forma simpla a functiei ereg() preia doua argumente: un sir care contine o expresie regulata
si un sir subiect. Functia returneaza TRUE daca expresia regulata corespunde unui sub-sir al
sirului subiect; n caz contrar, returneaza FALSE.
- Iata un exemplu:
<?php
$model = "[sml]at";
$subiect = "La noi in sat";
$rezultat = ereg($model, $subiect);
if ($rezultat) {
echo 'Model inclus in subiect';
}
?>
- In acest script, variabila $rezultat primeste valoarea TRUE, deoarece sirul 'subiect' contine
sub-sirul "sat", care corespunde expresiei regulate.
Pentru verificare, instructiunea "if" verifica daca "$resultat" este TRUE si in caz afirmativ
executa comanda dintre acolade, "echo" care afiseaza 'Model inclus in subiect'.
- Pentru a verifica daca un sir contine numai litere si numere, puteti folosi direct functia
ctype_alnum()
- Deoarece functiile "ereg" au fost anulate incepand cu versiunea PHP 5.3, este indicat sa nu
le mai folositi, cunoasterea lor e necesara daca le intalniti in scripturi mai vechi. Acestea au
fost inlocuite cu functii "preg_" (Perl-Compatible). Mai multe detalii si exemple despre
aceste functii gasiti in manualul Expresii regulate (compatibile Perl.
Expresiile regulate compatigile Perl se adauga intre caractere "/". De exemplu sablonul ([az0-9]+) se foloseste /([a-z0-9]+)/.
Iata un exemplu cu preg_grep(), aceasta returneaza un array compus din elementele unei
matrice care contin sablonul, expresia regulata cautata. Acest exemplu va returna doar acele
elementele dintr-o matrice care contin in ele sub-sirurile "casa" sau "masa".
<?php
$matrice = array('123casa', 'abc masa', '12-xy', '$asa_0/', '123abc casa');
$filtru = preg_grep("/([cm]asa)/", $matrice);
print_r ($filtru);
// Afiseaza elementele matricei
?>
- Variabila "$matrice" contine un Array cu mai multe elemente cu siruri.
- In variabila $filtru e preluat rezultatul functiei "preg_grep()" a carei prim parametru este un
sablon de expresie regulata (adaugata intre ghilimele duble), iar al doilea este matricea in care
e cautat sablonul.
- Cu functia "print_r()" se va afisa elementele matricei obtinute in variabila "$filtru".
Rezultatul afisat e urmatorul:
Array ( [0]=>123casa [1]=>abc masa [4]=>123abc casa )
- Un ultim exemplu util, folosim functia preg_replace() si o expresie regulata pentru a
elimina caracterelor speciale dintr-un sir
<?php
$sir = 'Sir& ce contine*a <caractere: speciale? /in co@nte>xt';
$sir = preg_replace("/([^ A-Za-z0-9_]+)/", "", $sir);
echo $sir;
?>
In acest exemplu avem un sir (stocat in variabila $sir) ce contine diferite caractere mai putin
uzuale.
Functia "preg_replace", impreuna cu expresia regulata "/(^ A-Za-z0-9_]+)/", pastreaza in $sir
numai literele, cifrele, caracterul '_' si spatiu.
Instructiunea "echo" va afisa urmatorul rezultat:
Sir ce continea caractere speciale in context
Utilizarea variabilelor cookie
nvatati care este modul de functionare a variabilelor cookie
nvatati sa creati, sa obtineti accesul la variabilele cookie si sa le stergeti
nvatati sa specificati optiunile dintr-o variabila cookie
1. Accesul la variabilele cookie

Valorile majoritatii variabilelor dispar atunci cnd scriptul PHP care le contine si ncheie
executia. Spre deosebire de acestea, valorile variabilelor cookie se pot pastra un timp
indefinit. Pentru ca valorile lor sa se poata pastra, browserul utilizatorului stocheaza
variabilele cookie n unitatea de hard-disc a utilizatorului.
Majoritatea navigatoarelor de Web au posibilitatea sa activeze/dezactiveze cookie-urile.
Trebuie sa tineti cont de acest lucru cand doriti sa folositi cookie in scripturile dv., totusi,
comform statisticilor, in jur de 1% dintre utilizatori au optiunea cookie dezactivata.

PHP pune la dispozitia utilizatorilor functii pentru transmiterea cookie-urilor de la server la
browser, si modalitati de citire a cookie-urilor.
Pentru a citi cooki-urile puteti utiliza variabila PHP de tip tablou $_COOKIE sau
$_HTTP_COOKIE_VARS, acestea contin numele si valoarea fiecarei variabile cookie
curenta. Daca doriti sa obtineti acces la acest tablou, puteti folosi un program ca urmatorul:
Foreach($_COOKIE as $nume => $valoare)

echo "<br /> $nume => $valoare";
- $_COOKIE['numeCookie'] este o variabila super-globala, putand fi accesata si in functii

fara a mai specifica "global".
2. Crearea unei variabile cookie

Un lucru important de retinut este faptul ca cookie-urile trebuie sa fie transmise la browser
inaintea oricarei alte informatii.
Pentru a evita problemele, asigurati-va ca un script PHP care stabileste o valoare a unei
variabile cookie este plasat n partea superioara a fisierului, fara caractere de tip spatiu alb
care sa-l preceada. De asemenea, stabiliti valoarea variabilei cookie nainte de a executa o
instructiune 'echo' sau o alta instructiune PHP care trimite browserului date de iesire.
Pentru a crea o variabila cookie, folositi functia setcookie(), care are urmatoarea forma:
setcookie(numeCookie, valoare, expirare)
- Argumentul 'numeCookie' specifica numele variabilei cookie, iar argumentul 'valoare'

specifica valoarea variabilei.
- Valoarea variabilei cookie este automat transmisa "urlencode" si cand este primita e
automat decodata.
- Argumentul 'expirare' indica momentul expirarii variabilei cookie; dupa ora specificata,
variabila cookie nu mai este accesibila.
n general, este convenabil sa se specifice momentul expirarii folosind functia time(), care
returneaza intervalul de timp (exprimat n secunde) scurs de la 1 ianuarie 1970. Puteti adauga
o valoare de tip decalaj (offset), care specifica intervalul de timp pe durata caruia variabila
cookie trebuie sa fie accesibila.
Folosind aceasta functie se pot transmite mai multe cookie-uri succesiv; protocoalele Web
limiteaza insa la maximum 20 numarul cookie-urilor ce pot fi trimise aceluiasi utilizator.
De exemplu, sa luam n considerare urmatoarea instructiune:
setcookie("fruct", "banana", time()+3600);
Aceasta instructiune creeaza o variabila cookie denumita 'fruct', care are valoarea 'banana'.
Variabila cookie va fi disponibila timp de o ora (3600 secunde) de la crearea sa.
Daca preferati, puteti specifica momentul expirarii folosind functia mktime(). Aceasta functie
are urmatoarea forma:
mktime(ore, minute, secunde, luna, zi, an)
De exemplu, urmatoarea instructiune creeaza o variabila cookie care expira la o secunda dupa
miezul noptii primei zile a anului 2009:
Setcookie("fruct", "banana", mktime(0, 0, 1, 1, 1, 2009));
3. Stergerea unei variabile cookie

Deoarece o variabila cookie are o data de expirare, aceasta va fi stearsa automat la un
oarecare interval de timp dupa crearea sa. Totusi, puteti sterge o variabila cookie imediat.
Pentru aceasta, fixati momentul expirarii variabilei cookie la un moment de timp in trecut.
De exemplu, pentru a sterge o variabila cookie denumita 'fruct', puteti folosi urmatoarea
instructiune:
setcookie("fruct", "", time()-3600);
Aceasta instructiune stabileste timpul de expirare cu o ora (3600 de secunde) n urma.

Remarcati ca valoarea variabilei cookie este exprimata sub forma unui sir vid (""); din
moment ce variabila cookie nu va mai fi disponibila, valoarea sa nu mai are importanta.
4. Specificarea accesului la o variabila cookie si alte optiuni

Functia setcookie() poate prelua maximum sase argumente.
Iata formatul complet al functiei setcookie():
setcookie(nume, valoare, expirare, cale, domeniu, secure)
Argumentele 'nume', 'valoare' si 'expirare' au fost descrise n sectiunea precedenta.

- Argumentul 'cale' va permite sa specificati calea URL asociata variabilei cookie. n mod
prestabilit, variabila cookie este disponibila pentru scripturile din catalogul care contine
scriptul n care a fost configurata variabila respectiva, precum si pentrul scripturile din subcataloagele aferente catalogului respectiv. n particular, scripturilor din cataloagele parinte ale
catalogului care contine scriptul nu li se permite accesul prestabilit la variabila cookie.
Pentru a pune variabila cookie la dispozitia scripturilor dintr-un anumit catalog si cataloagele
sale, specificati o valoare a argumentului 'cale'. De exemplu, pentru a pune variabila cookie la
dispozitia ntregului arbore de cataloage, specificati " /" ca valoare a argumentului cale;
pentru a face variabila cookie disponibila n catalogul "/test" si n sub-cataloagele sale,
specificati "/test/" ca valoare a argumentului 'cale'.
- Daca nu este specificat nici un argument 'domeniu', o variabila cookie este disponibila
numai pentru scripturile din domeniul Web care a creat variabila respectiva. Argumentul
'domeniu' va permite sa specificati numele de domeniu asociat unei variabile cookie. n
consecinta, variabila cookie va fi disponibila numai pentru siturile Web din cadrul domeniului
specificat. De exemplu, sa presupunem ca un script din serverul Web
http://www.subdomeniu.domeniu.com creeaza o variabila cookie. n mod prestabilit, variabila
cookie este disponibila numai pentru gazda respectiva. Cu toate acestea, puteti face variabila
cookie disponibila pe ntreg domeniul 'subdomeniu.domeniu.com', specificnd
"subdomeniu.domeniu.com" ca valoare a argumentului 'domeniu'.
- Argumentul 'secure' este o valoare ntreaga, care specifica daca variabila cookie trebuie
trimisa prin intermediul unei conexiuni sigure (HTTPS). Specificati valoarea l pentru a
mpiedica transmiterea variabilei cookie n cazul n care conexiunea nu este sigura; pentru a
permite transmiterea variabilei cookie prin conexiuni HTTP obisnuite, specificati valoarea 0.
Lucrul cu fisiere (1)
Invatati sa obtineti atributele unui fisier
Invatati despre privilegiile unui fisier si utilizarea acestora
Invatati sa deschideti si sa inchideti fisiere
1. Obtinerea atributelor unui fisier

Privilegiile asociate unui fisier sau unui catalog determina operatiile pe care le poate executa
un utilizator cu fisierul sau catalogul respectiv.
Pentru a adauga un fisier intr-un director, folosind PHP, trebuie sa aveti permisiunea de
scriere in acel director, de asemenea, pentru a adauga date intr-un fisier, trebuie sa aveti
permisiunea de scriere in fisierul respectiv.
Aceste permisiuni sunt date (configurate) de administratorul sistemului respectiv.
PHP furnizeaza numeroase functii care va permit sa obtineti informatii care descriu un fisier.
Tabelul urmator rezuma cele mai cunoscute dintre aceste functii.
Functii PHP pentru obtinerea atributelor unui fisier
Functie
Descriere
file_exists()
- Returneaza TRUE daca fisierul specificat exista, respectiv FALSE n caz

contrar
fileatime()
- Returneaza timpul de acces la fisier sub forma de amprenta de timp UNIX.
filectime()
- Returneaza timpul de modificare al i-nodului (structura de date care contine

informatii despre fisiere UNIX - N. T.) sub forma de amprenta de timp
UNIX.
filegroup() - Returneaza identificatorul numeric al grupului care detine fisierul

filemtime()
- Returneaza momentul de timp al modificarii fisierului sub forma de

amprenta de timp UNIX
fileowner() - Returneaza identificatorul numeric de utilizator al fisierului

fileperms() - Returneaza permisiunile fisierului
filesize()
- Returneaza dimensiunea fisierului, n octeti
filetype()
- Returneaza tipul fisierului, n speta "fifo", "char", "dir", "block", "link",

"file" sau "unknown"
is_dir()
- Returneaza TRUE daca directorul specificat exista; n caz contrar,

returneaza FALSE
is_file()
- Returneaza TRUE daca fisierul specificat exista; n caz contrar, returneaza

FALSE
is_readable()
- Returneaza TRUE daca fisierul specificat exista si poate fi citit; n caz

contrar, returneaza FALSE
is_writable()
- Returneaza TRUE daca fisierul specificat exista si se poate scrie n acel

fisier; n caz contrar, returneaza FALSE
Functiile fileowner() si filegroup() returneaza fiecare un identificator numeric; puteti

converti identificatorul numeric ntr-un sir prin invocarea functiei posix_getpwuid() cu un
identificator de utilizator, respectiv a functiei posix_getgrgid() cu un identificat de grup.
Acestea returneaza informatii despre identificatorul precizat.
Iata un exemplu in care puteti vedea, si intelege mai bine, cum sunt folosite functiile
rezentate in tabelul anterior (fisierul 'test.txt' care va fi folosit de functii se afla in acelasi
director cu scriptul php):
<?php
$filename = "test.txt";
$result = file_exists($filename);
echo "<br /> file_exists(): $result";
$result = fileowner($filename);
echo "<br /> fileowner(): $result";
$result = filegroup($filename);
echo "<br /> filegroup(): $result";
$result = filetype($filename);
echo "<br /> filetype(): $result";
$result = filesize($filename);
echo "<br /> filesize(): $result";
$result = fileatime($filename);
$result = date("m/d/Y H:i", $result);
echo "<br /> fileatime(): $result";
$result = filectime($filename);
echo "<br /> filectime(): $result";
$result = filemtime($filename);
echo "<br /> filemtime(): $result";
$result = fileperms($filename);
$result = decoct($result);
echo "<br /> fileperms(): $result";
$result = is_file($filename);
echo "<br /> is_file(): $result";
$result = is_dir($filename);
echo "<br /> is_dir(): $result";

$result = is_readable($filename);
echo "<br /> is_readable(): $result";
$result = is_writable($filename);
echo "<br /> is_writable(): $result";
?>
Datele de iesire ale exemplului sunt urmatoarele
file_exists(): 1
fileowner(): 0
filegroup(): 0
filetype(): file
filesize(): 5
fileatime(): 08/28/2008 00:00
filectime(): 08/28/2008 10:49
filemtime(): 08/28/2008 11:32
fileperms(): 100666
is_file(): 1
is_dir():
is_readable(): 1
is_writable(): 1
- O lista cu mai multe functii utile in lucrul cu fisiere gasiti la pagina -> Functii pentru
fisiere si directoare.
2. Privilegii de fisier
Privilegiile asociate unui fisier (sau director) determina operatiile pe care utilizatorii le pot
efectua cu fisierul (sau directorul) respectiv. =
Privilegiile sunt date sub forma a trei grupuri alcatuite din cte trei caractere fiecare; cu alte
cuvinte, trei triade. Prima triada indica privilegiile acordate posesorului fisierului. Cea de-a
doua triada indica privilegiile acordate membrilor grupului posesor al fisierului. Cea de-a
treia triada indica privilegiile acordate altor utilizatori.
Cele 3 caractere care alcatuiesc un grup sunt reprezentate, in sistemele UNIX, prin
urmatoarele tri litere: 'r', 'w' si 'x'; acestea reprezinta:
r - fisierul poate fi citit

w - se poate scrie n fisier
x - continutul fisierului poate fi executat
Caracterele unei triade apar ntotdeauna n secventa 'rwx'. Daca o anumita litera este nlocuita
de o cratima (-), privilegiul asociat nu este accesibil.
De exemplu, sa examinam privilegiile specificate in urmatorul exemplu:
rwxr-xr--
Aceste caractere au urmatoarea semnificatie:
"rwx", posesorul fisierului poate citi, scrie sau executa fisierul
"r-x", membrii grupului posesor al fisierului pot citi sau executa fisierul, dar nu pot
scrie n fisier
"r--", alti utilizatori pot citi fisierul, dar nu pot scrie n fisier sau executa continutul
fisierului
Privilegiul 'x' este semnificativ numai pentru fisierele care includ un continut executabil, cum
sunt fisierele binare executabile (.exe) sau anumite categorii de scripturi.
Posesorul unui fisier poate modifica privilegiile asociate fisierului emitnd comanda chmod
(aceasta functioneaza in sistemele de operare UNIX).
Aceasta comanda are doua forme. O forma va permite sa specificati privilegiile folosind cifre
scrise n octal; cealalta va permite sa le specificati folosind litere.
Pentru a specifica privilegiile folosind cifre n octal, calculati valoarea numerica a fiecarei
triade. Pentru aceasta, nsumati numerele corespunzatoare fiecarui privilegiu disponibil din
cadrul triadei. Numerele asociate privilegiilor sunt urmatoarele:
r-4
w-2
x-1
De exemplu, privilegiul "rwx" are valoarea 4 + 2 + 1 = 7. Similar, privilegiul "r-x" are

valoarea 4 + l = 5, iar privilegiul "r--" are valoarea 4.
Dupa ce ati calculat valoarea numerica a fiecarei triade, formati un numar din trei cifre scris
n octal, care este alcatuit din valoarea numerica a privilegiilor utilizatorilor, valoarea
numerica a privilegiilor membrilor grupului, si valoarea numerica a privilegiilor altor
utilizatori. Astfel, privilegiile "rwxr-xr--" corespund valorii n octal 754.
3. Modificarea privilegiilor unui fisier

Pentru a modifica privilegiile unui fisier, folositi functia chmod(), care are urmatoarea forma:
chmod(nume_fisier, mod)
Argumentul 'nume_fisier' specifica numele si calea de acces a fisierului ale carui privilegii
urmeaza a fi modificate, iar argumentul 'mod' specifica privilegiile dorite, n general, se
prefera exprimarea privilegiilor sub forma unui numar scris n octal. Pentru aceasta, prefixati
valoarea folosind cifra 0.
De exemplu, puteti atribui unui fisier "text.txt" privilegiile "rwxr-xr--" specificnd pentru
'mod' valoarea 0754, functia "chmod" va fi chmod("text.txt", 0754)
Pentru ca functia chmod() sa se execute cu succes, PHP trebuie sa ruleze sub contul
utilizatorului posesor al fisierului. Functia returneaza TRUE n caz de reusita, respectiv
FALSE n caz contrar.
Pentru a modifica grupul posesor al unui fisier, invocari functia chgrp(), care are forma:
chgrp("nume_fifier", grup)
- Unde "grup" este un nume sau numar care desemneaza grupul respectiv.
Functiile chmod() si chgrp() nu functioneaza sub Microsoft Windows.
4. Deschiderea unui fisier

Inainte de a putea citi sau scrie ntr-un fisier, trebuie sa deschideti fisierul folosind functia
fopen().
fopen("nume_fisier", "mod")
- unde 'nume_fisier' specifica numele si calea spre fisierul care urmeaza a fi deschis, iar 'mod'
indica tipul de acces dorit.
Modurile de deschidere a unui fisier sunt urmatoarele:
r - Permite doar citirea fisierului

r+ - Citire sau scriere de la inceputul fisierului
w - Creaza fisierul daca nu exista si suprascrie datele existente
w+ - Citire sau scriere; la scriere , creeaza fisierul daca nu exista si suprascrie datele
existente
a - Adaugare; Creaza fisierul daca nu exista si adauga datele noi la sfarsitul fisierului
existent
a+ - Citire sau scriere; la scriere, creaza fisierul daca nu exista si adauga datele noi la
sfarsitul fisierului existent
x - Doar scriere; Creaza fisierul daca nu exista si genereaza un averisment daca acesta
exista
x+ - Citire sau scriere; Creaza fisierul daca nu exista si genereaza un averisment daca
acesta exista
b - Deschide fisierul in mod binar
Functia fopen() returneaza FALSE daca PHP nu a reusit sa deschida fisierul, n caz contrar,
returneaza o valoare care contine un ntreg, numit "identificator de fisier", care se foloseste
pentru identificarea unui fisier de catre functiile care executa operatii cu fisiere.
De exemplu, instructiunea urmatoare deschide fisierul 'carte.txt' pentru citire:
$fh = fopen("carte.txt", "r");
Sub Microsoft Windows, fisierele ASCII si fisierele binare sunt tratate n mod diferit. Cnd
deschideti un fisier binar sub Windows, specificati "b" ca al doilea caracter al modului; de
exemplu, "rb" pentru citire, "wb" pentru scriere, "a+b" pentru citire si adaugare. Daca nu
procedati astfel, citirile din fisier si alte operatii se vor ncheia prematur sau vor esua.
5. Verificarea finalizarii unei operatii cu un fisier

Operatiile cu fisiere (inclusiv cele legate de deschiderea, citirea unui fisier si scrierea ntr-un
fisier) pot esua dintr-o varietate de motive. Deci, este important sa verificati daca fiecare
operatie s-a ncheiat cu succes.
Iata o modalitate n care puteti proceda:
<?php
$fh = fopen("carte.txt", "rb");
if (!$fh) {
echo "Nu a fost deschis fisierul carte.txt.";
}
?>
Functia fopen() returneaza FALSE daca nu reuseste sa deschida fisierul. In acest caz, scriptul
executa instructiunea echo care afisaza un mesaj.
O forma alternativa mai simpla foloseste operatorul OR (SAU):
<?php
($fh = fopen("carte.txt", "rb"))
OR die("Nu a fost deschis fisierul carte.txt.");
?>
6. Inchiderea unui fisier

Un fisier deschis consuma resursele sistemului. Cnd un script a terminat de utilizat un fisier,
scriptul trebuie sa nchida fisierul, elibernd aceste resurse.
La sfrsitul unui script, PHP nchide n mod automat fisierele deschise. Totusi, la programare
se recomanda sa nchideti fisierele mai rapid, ori de cte ori este posibil.
Pentru a nchide un fisier, folositi functia fclose():
fclose(identificator_fisier)
- 'identificator_fisier' este identificatorul fisierului, returnat la deschiderea acestuia cu functia

fopen()
Iata un exemplu caracteristic de deschidere, utilizare si nchidere a unui fisier:
<?php
if (!$fh) {
}
// Aici se insereaza instructiunile care folosesc fisierul deschis
fclose($fh);
?>
Functia fclose() returneaza valoarea TRUE daca fisierul a fost nchis cu succes. Testarea
acestei valori este rareori necesara, deoarece nu se mai pot face prea multe dupa ce s-a ratat o
ncercare de a nchide un fisier.
nvatati sa cititi datele dintr-un fisier
nvatati sa afisati continutul unui fisier
nvatati sa scrieti date intr-un fisier
1. Citirea dintr-un fisier
PHP furnizeaza o varietate de functii pentru citirea fisierelor. Una dintre acestea este fread(),
care are urmatoarea forma:
fread(identificator_fisier, lungime)
Argumentul 'identificator_fisier' este valoarea returnata de functia fopen(), iar argumentul
'lungime' specifica numarul maxim de octeti care vor fi cititi. Octetii cititi din fisier sunt
returnati sub forma de valoare de tip sir. Daca operatia de citire ntlneste sfrsitul fisierului,
PHP va returna mai putin de lungime octeti data.
Iata un exemplu de citire si de afisare a unui text dintr-un fisier, folosind functia fopen()
(Fisierul "carte.txt" folosit ca test in exemplele de mai jos trebuie sa se afle in acelasi
director in care este si scriptul php):
<?php
$fh = @fopen("carte.txt", "rb");
if (!$fh) {
}
else {
$s = fread($fh, 256);
echo "<br /> Citeste: $s";
fclose($fh);
}
?>
Exemplul citeste maximum 256 de octeti din fisier daca fisierul a fost deschis.
- Am folosit caracterul @ in fata functiei "fopen()" pentru a impedica afisarea erorilor de la
server in cazul cand fisierul nu poate fi deschis. Este deja functia "if()" care verifica si
afiseaza mesaj in caz de nedeschidere a fisierului.
Pentru a citi un numar mai mare sau mai mic de octeti, modificati valoarea argumentului
lungime al functiei fread().
PHP include o functie conexa, denumita fgetc(), care citeste un octet din fisierul specificat.
Pentru a citi si a afisa ntregul continut al fisierului, puteti folosi functia filesize() pentru a
furniza valoarea argumentului lungime, astfel:
<?php
$nume = "carte.txt";
$fh = @fopen($nume, "rb");
if (!$fh) {
}
else {
$l = filesize($nume);
$s = fread($fh, $l);
fclose($fh);
}
?>
2. Citirea unei linii de text
Se obisnuieste frecvent citirea linie cu linie a unui text dintr-un fisier.

Functia fgets() citeste o linie dintr-un fisier; functia are urmatoarea forma:
fgets(identificator_fisier, lungime)
- Argumentul 'identificator_fisier' este o valoare returnata de functia fopen(); aici, argumentul
'lungime' specifica numarul maxim de octeti dintr-o linie care vor fi cititi, minus o unitate,
pentru a permite includerea caracterului de terminare a liniei (acesta poate fi omis si va citi
toata linia). Octetii cititi din fisier sunt returnati ca valoare de tip sir.
Iata un exemplu care prezinta modul de citire si de afisare a primilor 125 octeti din prima linii
a unui fisier :
<?php
if (!$fh) {
}
else {
$s = fgets($fh, 126);
fclose($fh);
}
?>
- In exemplul de mai sus, daca prima linie din fisierul "carte.txt" are mai mult de 125 de
caractere, va afisa doar primele 125, daca are mai putin de 125 de caractere, va afisa doar
caracterele care sunt incluse in prima linie.
3. Citirea linie cu linie a unui ntreg fisier

n general, dintr-un fisier trebuie citit mai mult dect prima linie a acestuia. Pentru aceasta, un
script trebuie sa dispuna de o modalitate de a determina momentul cnd fisierul a fost citit n
totalitate.
Functia feof() are chiar acest scop, returnnd o valoare care arata daca s-a ajuns sau nu la
sfrsitul fisierului. Functia are urmatoarea forma:
feof(identificator_fisier)
Argumentul 'identificator_fisier' este valoarea returnata de functia fopen().
Functia feof() returneaza TRUE daca fisierul specificat este la sfrsit; n caz contrar,
returneaza FALSE.
Iata cum se poate folosi functia feof() pentru a controla procesul de citire a unui ntreg fisier,
linie cu linie:
<?php
if (!$fh) {
echo "Fisieru carte.txt nu a putut fi deschis";
}
while (!feof($fh)) {
$s = fgets($fh, 256);
echo "<br /> Citeste : $s";
}
fclose($fh);
?>
- Instructiunea "while" asigura faptul ca functia fgets() este apelata n mod repetat, pna la
citirea tuturor liniilor.
O alta modalitate simpla de a citi linie cu linie un ntreg fisier consta n a folosi functia file().
Aceasta functie returneaza un tablou n care fiecare element contine o linie a fisierului
specificat.
Iata un exemplu care foloseste functia file() pentru a citi si pentru a afisa continutul unui
fisier:
<?php
$tablou = file("carte.txt");
foreach ($tablou as $s) {
}
?>
Aceasta metoda nu este adecvata pentru fisiere de foarte mari dimensiuni, deoarece n tablou
este ncarcat ntregul continut al fisierului, ceea ce poate necesita o cantitate de memorie
superioara celei disponibile.
4. Afisarea continutului unui fisier

PHP furnizeaza doua functii care faciliteaza afisarea continutului unui fisier.
- Una dintre functii, fpassthru(), necesita un argument care specifica identificatorul fisierului
care urmeaza sa fie afisat:

fpassthru($fh);
Dupa ce a afisat fisierul, functia l nchide automat.

- Cealalta functie, readfile(), necesita numai numele sau calea fisierului:
readfile("carte.txt");
5. Navigarea printr-un fisier

Fiecare fisier are un pointer asociat care indica pozitia octetului unde se va produce
urmatoarea operatie.
Puteti folosi functia rewind() pentru a readuce pointerul la nceputul fisierului. Functia are
urmatoarea forma ('identificator_fisier' este identificatorul de fisier returnat de functia
fopen()):
rewind(identificator_fisier)
Nu puteti readuce pointerul unui fisier la nceputul propriu-zis al unui fisier daca fisierul a
fost deschis pentru un acces de tip atasare, adica ntr-unul din modurile 'a' sau 'a+'.
Iata un exemplu care prezinta modul de utilizare a functiei rewind() pentru a afisa de doua
ori continutul unui fisier:
<?php
if (!$fh) {
echo "Fisieru carte.txt nu a putut fi deschis";
}
$s = fgets($fh, 256);
}
// Deruleaza la inceputul fisierului si reia redarea acestuia
rewind($fh);
$s = fgets($fh, 256);
echo "<br /> Citeste \$s : $s";
}
fclose($fh);
?>
Daca se produce vreo eroare, functia rewind() returneaza zero.
Desi functia rewind() este utila n caz de nevoie, necesitatea de a readuce un pointer de fisier
la nceputul fisierului nu este chiar att de frecventa.
Functia fseek() furnizeaza o mai mare flexibilitate, permitndu-va sa pozitionari pointerul de
fisier astfel nct sa puteti citi sau scrie n orice punct al fisierului.
Functia are doua forme, cea mai simpla fiind urmatoarea:
fseek(identificator_fisier, offset)
unde 'identificator_fisier' este identificatorul de fisier returnat de functia fopen(), iar 'offset'
este pozitia dorita a pointerului de fisier, specificata n octeti, n raport cu nceputul fisierului.
In caz de reusita, functia fseek() returneaza 0; n caz contrar, returneaza -l .
O forma alternativa a functiei asigura un grad superior de flexibilitate, avand urmatoarea
forma:
fseek(identificator_fisier, offset, baza)
unde 'identificator_fisier' si 'offset' au semnificatiile definite anterior, iar 'baza' ia una ; dintre
urmatoarele valori:
SEEK_SET, care stabileste pozitia pointerului de fisier n raport cu nceputul

fisierului
SEEK_CUR, care stabileste pozitia pointerului de fisier n raport cu valoarea curenta

a pointerului
SEEK_END, care stabileste pozitia pointerului de fisier relativ la sfrsitul fisierului
Valoarea argumentului 'offset' poate fi pozitiva, negativa sau zero.

De exemplu, pentru a pozitiona pointerul cu 1000 de octeti nainte de sfrsitul fisierului,
emiteti urmatorul apel de functie:
fseek($fh, -1000, SEEK_END)
Pentru a obtine valoarea curenta a pointerului de fisier, folositi functia ftell(), care are
urmatoarea forma:
ftell(identificator_fisier)
Functia returneaza valoarea curenta a identificatorului de fisier, respectiv valoarea zero daca
functia esueaza.
6. Scrierea ntr-un fisier

Pentru a scrie intr-un fisier se foloseste functia fwrite(), aceasta are urmatoarea forma:
fwrite(identificator_fisier, date);
- Unde 'identificator_fisier' este identificatorul de fisier returnat de functia fopen(), iar 'date'
este o valoare sir care determina datele care urmeaza a fi scrise.
Daca executia functiei reuseste, returneaza numarul octetilor scrisi; n caz contrar, returneaza
valoarea l.
Iata un exemplu care prezinta modul de scriere a datelor ntr-un fisier:
<?php
$fh = @fopen($nume, "ab");
if (!$fh) {
}
else {
$ok = fwrite($fh, "Acestea sunt datele adaugate \n");
echo "<br /> Rezultatul scris este: $ok";
fclose($fh);
}
?>
Acest script va avea urmatoarele date de iesire:
Rezultatul scris este: 30
- Programul prezentat n exemplul anterior scrie n fisierul "carte.txt" o linie de text.
Deoarece fisierul a fost deschis folosind modul "a", datele sunt atasate la fisier; cu alte
cuvinte, datele sunt scrise la sfarsit, dupa toate datele existente n fisier.
Observati ca a fost scris si un caracter de terminare a liniei ("\n"), astfel nct fisierul sa poata
fi citit linie cu linie la un moment de timp ulterior. Daca lucrati cu un fisier text, n general e
util sa includeti un caracter de terminare a liniei la sfrsitul fiecarei linii scrise n fisier.
Programul din exemplu scrie n fisier o singura linie de text. Totusi, puteti scrie mai multe
linii, daca doriti. Daca apelati functia fwrite() din interiorul unei bucle, aveti posibilitatea de
a scrie mai multe linii. Dupa ce ati scris toate liniile de care aveti nevoie, nchideti fisierul
prin apelarea functiei fclose().
PHP mai furnizeaza si o forma alternativa a functiei fwrite():
fwrite(identificator_fisier, date, lungime);
Aceasta forma include un al treilea argument, si anume "lungime", care va permite sa

specificati numarul maxim de octeti care vor fi scrisi.
Argumentul "lungime" al functiei fwrite() trebuie utilizat atunci cnd se scrie n fisiere binare
sub Microsoft Windows.
Windows prefera secventa de terminare a liniei "\r\n". Atunci cnd scrieti programe PHP
pentru sisteme Windows, este de preferat sa folositi secventa "\r\n" de terminare a liniei.
- PHP dispune de o alta functie pentru scrierea fisierelor, fputs(). Totusi, n afara de nume,
fputs() este similara cu functia fwrite().
Functii pentru fisiere si directoare

Aici gasiti cateva din cele mai utile functii PHP pentru lucru cu sistemul de fisiere si
directoare.
1. basename(adresa, "sufix")
- Returneaza partea cu numele fisierului dintr-o adresa URL. "sufix" e optional, daca e
specificat, functia elimina si pe acesta de la sfarsitul numelui.
<?php
$url = 'http://www.marplo.net/php-mysql/index.php';
$file = basename($url);
// $file e "index.php"
$file = basename($url, ".php");
// $file e "index"
?>
2. chmod(file, mod)
- Modifica prmisunile CHMOD a lui "file" (cale si nume fiser) cu cele specificate la "mod"
(0777, 0644, ...). Daca modificarea reuseste returneaza TRUE, in caz contrar, FALSE.
<?php
chmod("director/fisier.ext", 0755);
?>
3. copy(sursa, destinatie)
- Copie fisierul specifical la "sursa", in locatia "destinatie" (aici poate fi specificata si
denumirea fisierului la dstinatie). Aca fisierul deja exista, va fi inlocuit de cel copiat. Funtctia
returneaza TRUE in caz de reusita sau FALSE.
"> <?php
$file = 'examplu.txt';
$newfile = 'dir/examplu.txt.bak';
if (!copy($file, $newfile)) {
echo "Fisierul$file nu a putut fi copiat \r\n";
}
?>
4. dirname(adresa)
- Returneaza numele directorului din "adresa", fara numele fisierului sau alte extensii.
<?php
$url = 'marplo.net/php-mysql/index.php';
$dir = dirname($url);
echo $dir;
?>
// marplo.net/php-mysql
5. disk_free_space(cale_dir)
- Returneaza spatiul liber al sistemului in directorul specificat la "cale_dir". Returneaza
numarul de bytes liberi sau FALSE daca functia esueaza.
<?php
$dir = '/';
// Directorul radacina
echo disk_free_space($dir);
// 123456789
?>
6. disk_total_space(cale_dir)
- Returneaza spatiul total al sistemului in directorul specificat la "cale_dir". Returneaza
numarul total de bytes sau FALSE daca functia esueaza.
7. fopen("fisier", "mod")
- Deschide un pointer la "fisier", in modul de lucru "mod". "mod" poate fi ("b" e indicat sa
fie adaugat pentru sistemele windows):
r sau rb - pentru citire.
r+ sau r+b - citire si scriere.
w sau wb - creare si scriere fisier de la 0.
w+ sau w+b - citire si scriere fisier de la 0, il creaza daca nu exista.
a sau ab - scriere, adauga datele dupa cele deja existente. Creaza fisierul daca nu
exista.
a+ sau a+b - citire si scriere, adauga datele dupa cele deja existente. Creaza fisierul
daca nu exista
x sau xb - creare si scriere, daca fisierul exista deja, returneaza eroare.
x sau x+b - creare pentru citire si scriere, daca fisierul exista deja, returneaza eroare.
<?php
$file = 'tutoriale.php';
$fo = fopen($file, "a+b");
// Deschide fisierul, in modul de citire si adaugare date
fclose($fo);
// Inchide pointer-ul, elibereaza memoria folosita
?>
8. fclose(file_pointer)
- Inchide deschiderea unui fisier cu "fopen()" (transmisa la "file_pointer"), eliberand
memoria folosita de acea deschidere. Returneaza TRUE daca functia reuseste, in caz contrar,
FALSE.
<?php
$fo = fopen($file, "rb");
// Deschide fisierul, in modul de citire ("rb") si creaza pointer-ul
fisierului
fclose($fo);
?>
9. feof(file_pointer)
- Testeaza sfarsitul unnui fisier cu deschiderea specificata la "file_pointer". Functie utila cand
fisierul e citit linie cu linie. Returneaza TRUE daca pointer-ul e la sfarsitul fisierului, altfel,
returneaza FALSE.
<?php
// Deschide fisierul, in modul de citire ("rb")
// Parcurge fisierul pana ajunge la sfarsit (atunci "feof" e TRUE - adica "!feof" e FALSE)
while(!feof) {
}
fclose($fo);
?>
10. fgets("pointer", lungime")

- Citeste numarul de caractere specificat la "lungime" dintr-un fisier deschis si specificat la
"pointer". Citirea se face din locul unde a ajuns pointer-ul in fisier, daca "lungime" nu e
specificat citirea se va face pana la sfarsitul randului curent (daca lungimea liniei e mai mare
de 8 KB, e indicata specificarea ei).
<?php
$file = 'cursuri.php';
$text = fgets($fo, 250);
// Deschide fisierul, in modul de citire ("rb")

// Citeste 250 caractere din primul rand al fisierului
fclose($fo);
?>
11. file_exists("fisier")
- Returneaza TRUE daca "fisier" exista, altfel, returneaza FALSE.
<?php
if (file_exist('dir/file.ext')) echo 'Fisierul exista';
else echo 'Fisierul nu exista';
?>
12. file_get_contents("fisier")
- Returneaza tot continutul din "fisier" intr-un sir. Daca "fisier" nu poate fi citit, returneaza
FALSE.
13. file_put_contents("fisier", "continut")
- Scrie in "fisier" sirul specificat la "continut". Daca fisierul exista, suprascrie datele
existente, daca nu exista, il creaza. Daca nu poate scrie in "fisier", returneaza FALSE.
<?php
$file = 'cursuri.php';
$context = file_get_contents($file);
// Preia continutul fisierului
$context .= 'Sir nou adaugat dupa cel existent';
file_put_contents($file, $context);
?>
// Adauga continutul din $context in $file
14. file("fisier", flag)

- Preia continutul fisierului intr-un array, fiecare linie din "fisier" va fi un element din
matrice. "flag" e optional, in locul lui se poate adauga: FILE_IGNORE_NEW_LINES (nu
va prelua si caracterele de linie noua), FILE_SKIP_EMPTY_LINES (va sari peste randurile
goale).
<?php
$aray_file = file('tutorials.php');
// Sau
$aray_file = file('tutorials.php', FILE_IGNORE_NEW_LINES |
FILE_SKIP_EMPTY_LINES);
// Afiseaza primul rand
echo $aray_file[0];
?>
15. fileatime("file")
- Returneaza timestamp-ul (timpul UNIX) cand a fost accesat ultima data "file", sau in caz de
nereusita, FALSE.
<?php
$file = 'somefile.txt';
if (file_exists($file)) {
echo "$file a fost accesat in data: " . date("F d Y H:i:s", fileatime($file));
}
// Afiseaza ceva de genul:
?>
somefile.txt a fost accesat in data: April 14 2010 22:16:23
16. filectime("file")
- Returneaza timestamp-ul (timpul UNIX) cand a fost modificat ultima data "file", sau in caz
de nereusita, FALSE. Similara cu aceasta e functia filemtime()
17. fileperms("file")
- Returneaza permisiunile CHMOD ale "file", sau FALSE.
18. filesize("file")
- Returneaza marimea lui "file", in bytes, sau FALSE.
19. flock(file_pointer, flag)
- Blocheaza / deblocheaza accesul de citire sau scriere la un fisier deschis cu "fopen()",
specificat la "file_pointer". Returneaza TRUE, sau daca functia esueaza, FALSE. Modul de
blocare, sau deblocarea, se specifica la "flag", acesta putand fi:
LOCK_SH - blocare acces citire.
LOCK_EX - blocare acces scriere.
LOCK_UN - deblocare
<?php
$fo = fopen("fisier.txt", "r+");
if (flock($fo, LOCK_EX)) {
// blocheaza alt acces la fisier pt scriere
fwrite($fo, "Scrie ceva in el.");
flock($fo, LOCK_UN);
// Elibereaza blocarea
} else {
echo "Nu poate bloca fisierul!";
}
fclose($fo);
?>
20. fseek(file_pointer, pozitie)
- Muta pozitia pointer-ului dintr-un fisier deschis cu "fopen()" la numarul de caractere
specificat de "pozitie" (0 e primul caracter). In caz de succes returneaza 0, altfel, -1.
<?php
$fo = fopen('somefile.txt', 'r+b');
fseek($fo, 199);
// Muta pointerul in fisier la al 200-lea caracter
?>
21. ftell(file_pointer)
- Returneaza pozitia curenta a indicatorului (pointer) dintr-un fisier deschis cu "fopen()"
(specificat la "file_pointer"). In caz de esec returneaza FALSE.
<?php
// Deschide un fisier si citeste cateva caractere
$fo = fopen("dir/file.txt", "rb");
$data = fgets($fo, 12);
// Afiseaza locatia unde e acum pointer-ul in fisier
echo ftell($fo);
// 11
fclose($fo);
?>
22. fwrite(file_pointer, 'sir')
- Scrie intr-un fisier deschis cu "fopen()" (specificat la "file_pointer") continutul din "sir".
<?php
// Daca poate deschide fisierul pt. adaugare date
if ($fo = fopen('tutorial.txt', "a+b")) {
$add = 'Textul ce va fi adaugat';
// Daca nu poate adauga datele, returneaza eroare
// Altfel, confirmare
if (fwrite($fo, $add) === FALSE) echo 'Eroare, textul nu a putut fi adaugat';
else echo 'Datele au fost scrise';
fclose($fo);
}
?>
23. is_dir("nume")
- Returneaza TRUE daca "nume" exista si este un director, altfel returneaza FALSE.
<?php
if (is_dir('php')) echo 'php este un director in cel curent';
?>
24. is_file("nume")
- Returneaza TRUE daca "nume" exista si este un fisier, altfel returneaza FALSE.
<?php
if (is_file('php/tutoriale.php')) echo 'tutoriale.php este un fisier in directorul "php" din cel
curent';
?>
25. is_readable("nume")
- Returneaza TRUE daca "nume" (fisier sau director) exista si poate fi citit, altfel returneaza
FALSE.
<?php
// Daca fisierul poate fi citit, il citeste si afiseaza continutul
if (is_readable('php/tutoriale.php')) readfile('php/tutoriale.php');
?>
26. is_uploaded_file("fisier_up")
- Returneaza TRUE daca "fisier_up" a fost incarcat pe server, prin upload si primit prin
$_POST, altfel returneaza FALSE. Parametrul functiei trebuie sa fie de forma
"$_FILES['userfile']['tmp_name']".
<?php
// Daca fisierul poate fi citit, il citeste si afiseaza continutul
if (is_uploaded_file($_FILES['userfile']['tmp_name'])) echo 'Fisierul a fost incarcat';
else echo 'Fisierul nu a putut fi incarcat';
?>
27. is_writable("nume")
- Returneaza TRUE daca "nume" (fisier sau director) exista si poate sa scrie in el, altfel
returneaza FALSE.
<?php
if (is_writable('php/tutoriale.php')) echo 'tutoriale.php poate fi scris';
?>
28. mkdir("dir", chmod)
- Returneaza TRUE daca a putut crea directorul "dir" cu permisiunile specificate la "chmod",
altfel returneaza FALSE.
<?php
if (mkdir('php')) echo 'Directorul a fost creat';
?>
29. pathinfo("adresa_file")
- Returneaza o matrice cu informatiile: ale "adresa_file".
<?php
$path_parts = pathinfo('/www/htdocs/index.php');
echo $path_parts['dirname'];
echo $path_parts['basename'];
echo $path_parts['extension'];
echo $path_parts['filename'];
?>
// /www/htdocs
// index.php
// php
// index (incepand cu PHP 5.2.0)
30. readfile("fisier")
- Citeste si returneaza la browser (afiseaza) continutul din "fisier". In caz de esec returneaza
FALSE.
31. realpath("cale_adresa")
- Returneaza calea reala in sistem a unei adrese din "cale_adresa", rezolvand referinte ca .. / ./
../.
<?php
echo realpath('./../../etc/passwd');
// /etc/passwd
echo realpath('/windows/system32');
// C:\WINDOWS\System32
echo realpath(__FILE__);
// Va returna calea absoluta pe server a fisierului curent
?>
32. rename("nume", "nume_nou"
- Redenumeste un director sau fisier specificat la "nume", cu "nume_nou". In caz de succes
returneaza TRUE, altfel FALSE.
<?php
rename("dir/file.txt", "dir/my_file.txt");
?>
33. rewind(file_pointer)
- Readuce pozitia pointer-ului dintr-un fisier deschis cu "fopen()" (specificat la "file_pointer")
la inceputul fisierului (0, primul caracter). In caz de succes returneaza TRUE, altfel FALSE.
<?php
// Deschide un fisier si citeste cateva caractere
$fo = fopen("tutorial.txt", "rb");

$data = fgets($fo, 12);
// Afiseaza locatia unde e acum pointer-ul in fisier
echo ftell($fo);
// 11
rewind($fo);
// Readuce pointer-ul la inceput
// Afiseaza iar locatia indicatorului

echo ftell($fo);
// 0
fclose($fo);
?>
34. rmdir("dir")
- Sterge directorul specificat la "dir". Acesta trebuie sa fie gol. In caz de succes returneaza
TRUE, altfel FALSE.
35. tempnam("dir", "prefix")
- Creaza un fisier cu nume unic, avand la inceput in nume sirul specificat la "prefix", in
directorul "dir". Ii acorda CHMOD 0600. Daca directorul specificat nu exista, creaza fisierul
in directorul "temp" al sistemului si returneaza numele fisierului. In caz de nereusita
returneaza FALSE.
36. tmpfile()
- Creaza un fisier temporar, cu nume unic. Returneaza un pointer de fisier, ca si "fopen()", cu
modul de deschidere "w+". In caz de nereusita returneaza FALSE. Cu "fclose()" fisierul
temporar va fi sters.
<?php
$temp = tmpfile();
// Creaza fisierul temporar
fwrite($temp, "Text scris in fisierul temporar creat");
// Scrie ceva in el
rewind($temp);
// Readuce pointerul la inceputul fisierului
echo fread($temp, 1024);
// Citeste si afiseaza primii 1024 bytes
fclose($temp);
// Inchide si sterge fisierul temporar creat
?>
37. unlink("fisier")
- Sterge fisierul specificat. In caz de succes returneaza TRUE, altfel FALSE.
<?php
if (unlink("test.txt")) echo 'Fisierul a fost sters.';
else echo "Stergerea fisierului nu a reusit.";
?>
Invatati sa blocati si sa obtineti accesul exclusiv la un fisier
Invatati sa copiati, sa redenumiti si sa stergeti un fisier
Studiati un script PHP util pentru incarcarea de fisiere in server
1. Obtinerea accesului exclusiv la un fisier

Web-ul ridica o problema speciala pentru dezvoltatorii de programe, deoarece mai multi
utilizatori pot avea acces simultan la un singur script PHP. Uneori, accesul simultan poate
avea ca rezultat date incorecte. Pentru a vedea cum se poate produce aceasta, sa luam n
considerare urmatorul script, care reprezinta un contor pentru numarul de deschideri a unei
pagini.
<?php
$contor = "ctr.txt";
$fh = @fopen($contor, "r+b");
if (!$fh) {
echo "Nu a fost deschis fisierul ctr.txt.";
}
else {
$s = fgets($fh, 7);
$count = (int) $s;
$count = $count + 1;
rewind($fh);
fwrite($fh, $count);
echo "<br /> Nr. vizitari: $count";
fclose($fh);
}
?>
Remarcati functiile pe care le foloseste scriptul pentru a executa operatiile cu fisiere.
Programul deschide fisierul "ctr.txt" pentru citire si scriere, preia datele din acesta, care sunt
un numar intreg, mareste acel numar cu o unitate, intoarce pointerul la inceputul fisierului
"rewind" dupa care rescrie noul numar, afiseaza numarul si inchide fisierul.
Secventa de cod descrisa mai sus poate creea probleme in cazul in care, de exemplu doi
utilizatori diferiti acceseaza acelasi fisier, in acelasi timp, cand contoarul este, de exemplu, la
numarul 100. Amandoi vor incrementa numarul 100 cu o unitate si va rescrie in fisierul
"ctr.txt" 101; in final, contoarul va arata 101, in loc de 102 cum ar fi trebuit (deoarece au fost
2 vizitatori).
Pentru a evita astfel de conflicte PHP pune la dispozitia utilizatorilor o metoda prin care se
poate bloca accesul temporar la un fisier. Pe durata blocarii, un alt utilizator nu va mai putea
scrie/citi din acest fisier. De aceea durata blocarii trebuie sa fie limitata.
Functia care realizeaza blocarea este flock(), care are urmatoarea forma:
flock(identificator_fisier, operatie)
- Unde "identificator_fisier" este identificatorul de fisier returnat de functia fopen().

Argumentul "operatie" este o constanta sau o expresie care poate avea urmatoarele valori:
LOCK_SH - Blocare partajata in scopuri de citire

LOCK_EX - Blocare exclusiva in scopuri de scriere
LOCK_NB - Blocare fara fixare
LOCK_UN - Eliminarea blocarii
Iata cum se foloseste procesul de blocare, vom folosi acelasi exemplu, contoarul de mai sus,
de data aceasta imbunatatit.
<?php
$contor = "ctr.txt";
$fh = @fopen($contor, "r+b");
if (!$fh) {
echo "Nu a fost deschis fisierul ctr.txt.";
}
else {
flock($fh, LOCK_EX);
$s = fgets($fh, 7);
$count = (int) $s;
$count = $count + 1;
rewind($fh);
fwrite($fh, $count);
flock($fh, LOCK_UN);
echo "<br /> Nr. vizitari: $count"
fclose($fh);
}
?>
- De data aceasta scriptul blocheaza fisierul "ctr.txt" pe timpul citirii si scrierii acestuia, astfel
nct accesul simultan sa nu cauzeze o numarare eronata.
Blocare se face imediat dupa ce a fost deschis fisierul, cu "LOCK_EX", si se incheie imediat
dupa rescrierea in fisier, prin deblocare acestuia "LOCK_UN".
2. Copierea unui fisier

O functie care faciliteaza copierea fisierelor, este copy(). Functia copy() are urmatoarea
forma:
copy (sursa, destinatiea)
Unde "sursa" este numele si calea fisierului care urmeaza a fi copiat, iar "destinatie" este
numele sau calea copiei.
Functia returneaza TRUE daca operatia de copiere reuseste; n caz contrar, returneaza
FALSE.
Iata un exemplu n care este prezentat modul de utilizare a functiei copy():
<?php
$ok = copy("test.txt", "test.txt.bak");
if (!$ok) {
echo "Copierea nu a reusit.";
}
?>
Exemplul creeaza o copie a fisierului "test.txt", cu numele "test.txt.bak", in acelasi director.
Functia copy() va suprascrie fisierul destinatie, daca acesta exista.
3. Modificarea numelui unui fisier

Functia care va permite sa modificati numele unui fisier este rename(), aceasta care are
urmatoarea forma:
rename(nume_vechi, nume_nou)
Unde "nume_vechi" este numele si calea originala a fisierului, iar "nume_nou" este numele
dorit.
Functia returneaza TRUE daca operatia de modificare a numelui a reusit; n caz contrar,
returneaza FALSE.
Iata un exemplu de utilizare a functiei rename():
<?php
$ok = rename("test.txt", "teste.dat");
if (!$ok) {
echo "Modificarea numelui nu a reusit.";
}
?>
- Exemplu modifica numele fisierului "test.txt" in "teste.dat".
4. Stergerea unui fisier

Functia care va permite sa stergeti un fisier este unlink(), aceasta care are urmatoarea forma:
unlink(nume_fisier)
Unde "nume_fisier" este numele si calea fisierului care va fi sters.
Functia returneaza TRUE daca operatia de stergere a reusit; n caz contrar, returneaza
FALSE.
Iata un exemplu de utilizare a functiei unlink():
<?php
$ok = unlink("test.txt");
if (!$ok) {
echo "Stergerea fisierului nu a reusit.";
}
?>
- Exemplu sterge fisierului "test.txt".
Retineti ca PHP trebuie sa aiba acces de scriere la catalogul n care se vor executa operatiile
de copiere, redenumire sau stergere; n caz contrar, PHP nu va putea executa aceste operatii.
5. Incarcarea unui fisier in server

Pentru incarcarea unui fisier in server, se folosesc formulare HTML impreuna cu un script
PHP de incarcare care foloseste functia move_uploaded_file() pentru operatia de upload.
Pentru a crea un formular de ncarcare, specificati ENCTYPE="multipart/form-data" n
eticheta FORM si includeti un control de introducere a datelor cu atributul TYPE="FILE".

Iata un exemplu de script PHP si formular HTML care incarca fisierele in server:
<?php
if(isset($_POST['submit'])) {
$uploadpath = "upload/";
// Modifica aici directorul de upload
$uploadpath = $uploadpath . basename( $_FILES['fisier']['name']);
if(move_uploaded_file($_FILES['fisier']['tmp_name'], $uploadpath)) {
echo"Fisier: ". basename( $_FILES['fisier']['name']). " a fost incarcat";
}
else {
echo "Eroare la urcarea fisierului pe server, mai incerca o data!";
}
}
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"
enctype="multipart/form-data">
Alege fisierul:
<input type="file" name="fisier" /> <br />
<input type="submit" name='submit' value="Trimite" />
</form>
- Cnd utilizatorul apasa pe butonul de "Trimite", scriptul PHP preia datele si va incarca
fisierul dorit in server
Utilizarea cataloagelor (Directoare)
Invatati sa obtineti si sa modificati directorul de lucru curent
Invatati sa manipulati caile de acces si privilegiile la un director
Invatati sa cititi continutul unui director, sa-l redenumiti si sa creati noi directoare
Cele mai importante functii pentru utilizarea cataloagelor va permit sa obtineti catalogul de
lucru si sa lucrati cu acesta, sa manipulati cai de acces, sa cititi continutul unui director, sa
vizualizati si sa modificati privilegiile unui director, precum si sa creati si sa stergeti
cataloage.
In acest context, numele "catalog" si "director" reprezinta acelasi lucru.
1. Obtinerea si modificarea directorului de lucru

Functia getcwd() returneaza numele catalogului curent de lucru. Functia nu necesita
argumente si poate fi utilizata astfel:
$cdir = getcwd();
Pentru a schimba catalogul curent de lucru, puteti folosi functia chdir(), care are urmatoarea
forma:
chdir(nume_director)
- Unde "nume_director" este calea sau numele catalogului de lucru dorit.
Functia returneaza TRUE daca operatia reuseste; n caz contrar, returneaza FALSE.
De exemplu, daca in directorul curent se afla alt director "temp", pentru a face din "temp"
catalogul curent de lucru, folositi functia chdir() dupa cum urmeaza:
<?php
$ndir = chdir("temp/");
?>
2. Manipularea cailor de acces

PHP include numeroase functii utile pentru manipularea cailor de acces.
Functia dirname() preia calea de acces la un fisier si returneaza toata calea, mai putin
componenta finala a caii specificate, n cazul n care componenta finala este un fisier, functia
va ajuta sa izolati numele fisierului de restul caii.
De exemplu, daca se da calea "plomar/curs-php/lectii/lectia1.php", functia va returna
"plomar/curs-php/lectii".
Functia are urmatoarea forma:
dirname(cale_fisier)
Functia basename() executa operatia complementara, returnnd numai componenta finala a
caii specificate.
De exemplu, daca este data calea "plomar/curs-php/lectii/lectia1.php", functia "basename()"
va returna "lectia1.php".
basename(cale_fisier)
Daca doriti sa executati mai multe operatii cu o cale, functia pathinfo() va poate fi de folos.
Aceasta functie returneaza un tablou care include patru elemente (al patrule incepand de la
versiunea PHP 5.2.0):
1. dirname - rezultatul invocarii functiei dirname() avnd ca argument calea

respectiva
2. basename - rezultatul invocarii functiei basename() avnd ca argument calea

respectiva
3. extension - extensia fisierului (daca exista) dat de rezultatului functiei basename()
4. filename - numele fisierului dat de rezultatului functiei basename(), dar fara

extensie
Iata un exemplu care prezinta modul de utilizare a functiei pathlnfo() :

<?php
$path_parts = pathinfo('plomar/curs-php/lectii/lectia1.php');
foreach ($path_parts as $num => $val) {
echo "<br /> $num => $val";
}
?>
Datele de iesire ale scriptului de mai sunt urmatoarele :
dirname => plomar/curs-php/lectii
basename => lectia1.php
extension => php

filename => lectia1
Un alt mod in care puteti utiliza si afla valorile returnate de functi pathinfo() este urmatorul:
<?php
$path_parts = pathinfo('plomar/curs-php/lectii/lectia1.php');
echo "<br />". $path_parts['dirname'], "\r\n";
echo "<br />". $path_parts['basename'], "\r\n";
echo "<br />". $path_parts['extension'], "\r\n";
echo "<br />". $path_parts['filename'], "\r\n";
?>
Acest exemplu va returna urmatoarele date de iesire :
plomar/curs-php/lectii
lectia1.php
php
lectia1
3. Vizualizarea si modificarea privilegiilor directoarelor

Pentru a vizualiza privilegiile unui director, puteti folosi aceleasi functii utilizate pentru
vizualizarea privilegiilor fisierelor, prezentate in Lectia 17 in tabelul "Functii PHP pentru
obtinerea atributelor unui fisier". folosind ca argument numele sau calea directorului. Aceste
functii va permit sa vizualizati o varietate de caracteristici ale directoarelor, inclusiv
privilegiile de catalog, care sunt returnate de functia fileperms().
Pentru a modifica privilegiile unui director, folositi functia chmod() care a fost descrisa in
Lectia 17 la sectiunea "Modificarea privilegiilor unui fisier". Utilizati aceasta functie exact
asa cum ati folosi-o pentru a stabili privilegiile de fisier, folosind ca argument un director.
Pentru a putea atribui sau schimba privilegiile unui director sau fisier, modulul PHP instalat
trebuie sa aiba drepturi de modificare a directoarelor /fisierelor specificate.
4. Citirea continutului unui director

PHP furnizeaza trei functii care va permit sa cititi continutul unui catalog, ca si cum catalogul
ar fi un fisier. Aceste functii sunt:
1. opendir() - deschide directorul pentru citire

2. readdir () - citeste o intrare dintr-un catalog
3. closedir() - nchide catalogul, elibernd resursele alocate de functia opendir()
Rezultatul apelarii functiei readdir() este un sir care contine numele urmatorului fisier sau
sub-director din catalogul deschis. Functia returneaza FALSE atunci cnd au fost citite toate
intrarile din catalog.
Iata un exemplu care prezinta modul de utilizare a acestor functii pentru citirea continutului
unui catalog:
<?php
$dc = @opendir("home/plomar/curs-php");
if (!$dc) {
echo "Directorul nu a putut fi deschis";
}
else {
while ($ok = readdir($dc)) {

echo "<br /> $ok";
}
closedir($dc);
}
?>
Datele de iesire ale exemplului pot fi similare cu cele prezentate mai jos :
style
imgs
lectia
scripts
index.php
- Sau puteti folosi functia scandir($dir). Aceasta preia intr-un Array numele tuturor
directoarelor si fisierelor din directorul "$dir". In caz de nereusita returneaza False.
5. Crearea unui director

Pentru a crea un director, utilizati functia mkdir(), care are urmatoarea forma:
mkdir(nume_dir, mod)
- Unde "nume_dir" este calea sau numele directorului care va fi creat, iar "mod" reprezinta
privilegiile care trebuie acordate noului catalog.
In mod normal, prima cifra a argumentului mod trebuie sa fie 0, astfel nct PHP sa-l
perceapa ca pe o valoare scrisa n octal. Revizuiti Lectia 17 , sectiunea "Privilegii de fisier"
Functia returneaza TRUE daca creeaza catalogul; n caz contrar, returneaza FALSE.
De exemplu, pentru a crea un catalog denumit "lucru" si pentru a-i atribui privilegiile "rwxrx--x", utilizati functia mkdir() dupa cum urmeaza:
<?php
$cd = mkdir("lucru", 0751);
if ($cd)
echo "Directorul a fost creat";
else
echo "Directorul nu a putut fi creat";
?>
Pentru a modifica numele unui director, puteti folosi functia rename(), care are urmatoarea
forma:
rename(nume_vechi, nume_nou)
Unde "nume_vechi" este numele si calea originala a directorului, iar "nume_nou" este numele
nou dorit.
Utilizarea de sesiuni PHP
Invatati sa creati sesiuni in PHP
Invatati sa lucrati cu variabile din sesiuni si sa stergeti datele sesiunii
1. Despre sesiuni, crearea unei sesiuni PHP
Sesiunea reprezinta o modalitate prin care PHP retine informatii de la o pagina la alta.
Odata cu initializarea unei sesiuni, utilizatorul poate pastra anumite variabile chiar daca in
continuare viziteaza si alte pagini ale site-ului. In principiu informatia se pastreaza pana la
inchiderea browser-ului, sau pana cand utilizatorul distruge in mod intentionat sesiunea
curenta.
Lucrurile se desfasoara ca in felul urmator: in momentul cand un user s-a logat la site, PHP
atribuie acestuia un identificator unic de sesiune : SID. Acest SID este inglobat intr-un
coockie cu numele PHPSESSID si trimis apoi catre browserul utilizatorului. Daca browserul
nu suporta cookie-uri sau acestea sunt dezactivate, atunci acest SID este adaugat la adresa
URL. In acelasi timp se creeaza pe server un fisier cu numele SID. In continuare daca
utilizatorul doreste sa stocheze anumite informatii, acestea vor fi practic scrise in acest fisier
SID de pe server.
Sesiunile au urmatoarele avantaje:
- Pot fi folosite chiar daca browserul utilizatorului nu suporta cookie-uri sau daca
acestea sunt dezactivate.
- Permit stocarea unui volum mare de informatii, spre deosebire de cookie-uri care
sunt limitate in aceasta privinta.
- Sunt mai sigure in raport cu cookie-urile deoarece informatiile nu sunt transmise in

mod repetat intre client si server.
Initializarea unei sesiuni se face cu functia :
session_start()
Aceasta trebuie sa fie printre primele linii de cod dintr-un script PHP, deoarece apelul acestei
functii trebuie facut inainte de trimiterii catre browser-ul Web a vreunui cod HTML sau chiar
a unui spatiu vid.
Daca folosim stocarea iesirii in buffer, instructiunea session_start() nu trebuie inserata
neaparat la inceputul codului.
Instructiunea session_start() nu este necesare daca in fisierul de configurare "php.ini",
variabila "session.auto_start" are valoarea TRUE.
Pentru a intelege mai bine modul de lucru cu sesiuni si functia session_start(), folosim un
exemplu in care avem o pagina principala "a.php" unde cream o variabila cu numele
"userName", atribuindu-i valoarea "MarPlo", pe care o stocam intr-o sesiune PHP, pagina
contine o legatura catre o alta pagina "b.php", aceasta din urma va folosi functia
session_start() pentru a prelua, prin sesiune, valoarea variabilei "user_name" din pagina
"a.php", astfel putem folosi valoarea acestei variabile intr-un script din pagina "b.php".
Continutul fisierului "a.php" este urmatorul:
<?php
//Fisierul a.php
session_start();
if(!isset($_SESSION['userName']))
$_SESSION['userName'] = "MarPlo";
?>

<html>
<body>
Aceasta este pagina "a.php"
<?php
echo "<br />Variabila de sesiune are valoarea: ". $_SESSION['userName'];
?>
<br />Legatura <a href="b.php">spre pagina b.php</a>
</body>
</html>
Continutul fisierului "b.php" este urmatorul:
<?php
//Fisierul b.php
session_start();
?>
<html>
<head>
<title>Pagina b.php</title>
</head>
<body>
Aceasta este pagina b.php
<?php
echo "<br />Variabila de sesiune are valoarea: ". $_SESSION['userName'];
?>
</body>
</html>
Observati ca atribuirea, respectiv citirea variabilelor se face folosind variabila super-globala :
_SESSION.
Deschizand prima pagina, "a.php", va fi afisat urmatorul rezultat
Aceasta este pagina "a.php"
Variabila de sesiune are valoarea: MarPlo
Legatura spre pagina b.php
Cand apasam click pe link-ul "spre pagina b.php", se va deschide aceasta pagina, afisand
urmatorul continut:
Aceasta este pagina "b.php"
Variabila de sesiune are valoarea: MarPlo
- In acest exemplu se observa ca pagina "b.php" detine informatii despre variabila de sesiune
creata in pagina "a.php".
2. Manipularea variabilelor sesiunii.

In anumite momente ar putea fi util sa aflam identificatorul sesiunii curente. Pentru aceasta
folosim functia session_id(), ca in exemplul urmator:
<?php
echo "<br /> Identificatorul sesiunii curente SID este:". session_id();
//Va afisa un rezultat asemanator cu: "Identificatorul sesiunii curente SID
este:2846240682abf24a09f42664fc03bbf3"
?>
Functia session_id() accepta un parametru. Astfel putem seta un anumit SID pentru sesiunea
curenta. In acest caz trebuie sa apelam functia session_id() inainte de functia :
session_start(), ca in exemplul urmator:
<?php
session_id('123abc');
session_start();
echo "<br /> Identificatorul sesiunii curente SID = ". session_id();
//Va afisa rezultatul: "Identificatorul sesiunii curente SID = 123abc"
?>
Deoarece variabilele de sesiune pot fi citite de alti utilizatori neautorizati, nu este indicat sa
pastram aici informatii esentiale cum sint parolele.
Pentru a creea un minimum de securitate putem codifica aceste informatii, folosind functtile
de codare oferite de PHP:
md5() sau crypt()
- Functia md5(sir_de_caractere) codifica sirul de caractere furnizat ca parametru si

returneaza un sir de 32 charactere hexazecimale. Aceasta functie foloseste algoritmul de
criptare: "RSA Data Security, Inc. MD5 Message-Digest Algorithm".
Iata un exemplu de utilizare al acestei codificari:
<?php
$user = "MarPlo";
$codificat = md5($user);
echo "<br /> user codificat = $codificat";
// Va afisa: "user codificat = 0a460e3d95526f05a0064154ad94a378"
?>
Consideram cazul in care avem o variabila de sesiune "$parola" care pastreaza o parola si
dorim sa codificam si sa transmitem acrasta variabila astfel incat utilizatorii neautorizati sa nu
o poata folosi. Pentru aceasta folosim functia md5(), pentru a o cripta. Mai mult initializam o
variabila globala cu numele "$secret", careia ii atribuim ca valoare un sir de caractere
oarecare. In continuare, inainte de a introduce parola intr-o sesiune PHP, concatenam valorile
"$secret" si "$parola" si criptam rezultatul. Astfel, chiar daca cineva reuseste sa decripteze
variabila de sesiune, este putin probabil sa poata separa sirul "$secret" creat de noi.
Este bine sa pastram acest fisier intr-un director pretejat, cum ar fi cu un nivel mai sus decat
directorul pentru pagini de Web.
Iata cum se prezinta exemplul prezentat mai sus. (consideram o variabila "$passtest" care
verifica daca valoarea acesteia este egala cu parola):
<?php
$secret = 'abcgfd43599oopjhfdxcaqq30pmnvcx';
$parola = 'mypass';
$cod = md5($secret. $parola);
session_start();
$_SESSION['parola'] = $cod;
// Consideram variabila "$passtest" pentru a testa daca valoarea acesteia este egala cu parola
if (md5($secret. $passtest) == $_SESSION['parola'])
echo "Parola acceptata";
else
echo "Parola nu este valida";
?>
Astfel, daca valoarea variabilei "$passtest", care poate fi obtinuta de exemplu dintr-un
formular HTML, este identica cu parola pastrata de noi, va fi afisat mesajul "Parola
acceptata".
3. Stergerea unei sesiuni

Pentru a putea sterge o sesiune este necesar sa incepem scriptul PHP cu instructiunea:
session_start(), ca intotdeauna cand folosim sesiuni.
Pentru a sterge toate variabilele memorate in matricea $_SESSION folosim:
unset($_SESSION);
Pentru a sterge doar o variabila memorata in sesiune folosim :
unset($_SESSION['nume_variabila']);
Datele sesiunii sunt memorate in server in fisiere temporare. Pentru a sterge datele sesiunii
din server folositi:
session_destroy()
Iata un exemplu care ilustreaza aceasta procedura:

<?php
// Initializeaza datele sesiunii
session_start();
// Sterge tabloul $_SESSION
unset($_SESSION);
// Sterge datele de sesiune din server
session_destroy();
echo "<br /> Sesiunea curenta a fost inchisa";
?>
Optiuni pentru utilizarea caracterelor

speciale
Invatati rolul optiunilor "magic_quotes"
Invatati sa convertiti caracterele speciale prin schimbarea semnificatiei acestora

utilizand functii PHP
Invatati sa convertiti caracterele speciale specifice HTML si cele din sirurile folosite
pentru adrese URL
1. Ghilimelele magice
Apar situatii cand dorim sa introducem ghilimele in interiorul unui textintr-o baza de date, dar
SQL nu permite nglobarea unor ghilimele simple n interiorul valorii unui sir. Probleme
similare pot aparea la introducerea unui text ce contine caractere speciale precum: \ + * ? ^
( $ ), si care sunt trimise la un script PHP.
PHP include functii si facilitati pentru rezolvarea acestor situatii.
Fisierul de initializare PHP ("php.ini") contine optiuni de configurare care determina modul
n care PHP controleaza datele provenite de la o sursa externa, cum sunt un formular HTML,
un fisier text sau o baza de date.
Optiunea magic_quotes_gpc specifica modul n care PHP manipuleaza operatiile HTTP:
GET si POST, precum si operatiile dintre PHP si MySQL sau cele cu variabile cookie. Daca
optiunea este activata (ON), PHP prefixeaza automat ghilimelele simple, ghilimelele duble,
caracterele backslash si caracterele nule (caracterele a caror valoare ASCII este 0) care apar
ntr-o variabila HTTP, cu un caracter backslash (\).
Optiunea magic_quotes_runtime specifica modul n care PHP manipuleaza datele de origine
externa. Daca aceasta optiune este activata, PHP ignora automat ghilimelele simple si duble
care apar n datele externe, inclusiv datele din formularele HTML, din fisiere si baze de date.
Daca este activata optiunea magic_quotes_sybase, aceasta modifica efectul optiunilor
magic_quotes_gpc si magic_quotes_runtime, astfel nct un caracter de tip ghilimele
simple sa fie prefixat cu un alt caracter de tip ghilimele simple, nu cu un backslas.
Dar, n general, accesul la aceste comenzi din fisierul "php.ini" il are administratorul de
sistem iar utilizatorii obisnuiti nu trebuie sa aiba posibilitatea de a aduce modificari n fisier.
Astfel, pot fi folosite functii PHP care sa seteze aceste optiuni pe durata scriptului respectiv.
Functiile get_magic_quotes_gpc() si get_magic_quotes_runtime() returneaza fiecare
valoarea optiunii PHP corespunzatoare setate in fisierul "php.ini". Mai mult, puteti folosi
functia set_magic_quotes_runtime() pentru a specifica valoarea optiunii
magic_quotes_runtime pentru restul duratei scriptului PHP curent.
De exemplu, pentru a dezactiva optiunea magic_quotes_runtime, invocati functia
set_magic_quotes_runtime(0);
Alternativ, pentru a activa aceasta optiune intr-un script, folositi functia
set_magic_quotes_runtime(1);
2. Conversia caracterelor speciale si anularea acesteia

PHP poate converti ghilimelele simple si duble dintr-un sir, folosind functia addslashes().
Daca PHP nu este configurat astfel nct sa converteasca aceste caractere din sir n mod
automat, atunci trebuie sa executati manual aceasta modificare. Pur si simplu utilizati functia
addslashes(), transferndu-i ca argument sirul text. Aceasta adauga caracterul backslash "\"
pentru conversia caracterelor de tip ghilimele simple, ghilimele duble, backslash si caractere
nule
Aceasta conversie nu trebuie confundata cu o alta, si anume conversia de tip, care foloseste
caracterul backslash (\).
Conversia mentionata n acest capitol consta din modificarea semnificatiei anumitor
caractere, pentru a preveni o interpretare eronata a acestora de catre programele specializate,
precum MySQL. Din acest motiv, toate conversiile mentionate n acest capitol fac referire la
modificarea semnificatiei unor caractere, nu la conversiile de tip.
De exemplu, pentru a converti continutul sirului "$text" si a plasa rezultatul n variabila
"$modificat", invocati functia dupa cum urmeaza:
$modificat = addslashes($text);
Functia stripslashes() executa operatia complementara de anulare a conversiei, elimina

caracterele backslash inserate.
Pentru a anula conversia sirului "$modificat" si a plasa rezultatul n variabila "$nemodificat",
utilizati functia dupa cum urmeaza:
$nemodificat = stripslashes($modificat)
O alta functi utila pentru conversia caracterelor speciale este quotemeta(), aceasta va insera
un backslash nainte de fiecare aparitie a urmatoarelor caractere: . \ + * ? [ ^ ] ( $ ). Ca si
addslashes(), functia quotemeta() se foloseste in mod similar, prelund ca argument sirul text.
3. Conversia textelor HTML

Cnd lucrati cu texte HTML, conversia executata de functia addslashes() nu este suficienta,
deoarece HTML este sensibil si la alte caractere speciale dect cele convertite de functia
addslashes().
In schimb puteti folosi functia htmlspecialchars().
Aceasta converteste caracterele la care HTML este sensibil. Functie este utila cand se doreste
ca un anumit sir sa nu contina marcaje HTML, ceea ce poate fi important in modul de operare
a unei aplicatii, cum ar fi un tabel HTML.
htmlspecialchars("text" [,stil_ghilimele])
Unde "text" specifica sirul care contine textul ce urmeaza a fi convertit, iar argumentul
optional "stil_ghilimele" specifica modul de conversie a ghilimelelor simple, respectiv duble.
Valorile permise ale optiunii "stil_ghilimele" sunt:
ENT_COMPAT - precizeaza ca trebuie convertite numai ghilimelele duble
ENT_QUOTES - precizeaza ca trebuie convertite ambele tipuri de ghilimele
ENT_NOQUOTES - precizeaza ca nu trebuie convertit nici un tip de ghilimele
De exemplu, pentru a converti toate caracterele HTML speciale, inclusiv ambele tipuri de
ghilimele, din sirul "$texthtml", utilizati functia dupa cum urmeaza:
$conversie = htmlspecialchars($texthtml);
Functia htmlspecialchars() executa urmatoarele conversii:

Caracter
Rezultatul conversiei
& (ampersand)
"(ghilimele duble)
&
" (numait cnd este specificat opiunea ENT_COMPAT sau
ENT_QUOTES)
'(ghilimele simple)
' (numai cnd este specificat opiunea ENT_QUOTES)
< (mai mic dect)
<
> (mai mare dect)
>
O functie PHP conexa, htmlentities(), converteste toate caracterele cu echivalente n entitati

HTML. Este acceptat setul de caractere ISO-8859-1
Si o alta functie utila pentru conversia textelor HTML este functia n12br(). Aceasta insereaza
tag-ul <br /> anterior fiecarui caracter de tip linie noua care se gaseste in argumentul sau.
4. Conversia pentru adresele URL

Cnd doriti sa codificati in PHP date ca parte a unei adrese URL, puteti folosi functia
urlencode().
Aceasta functie nlocuieste fiecare caracter non-alfanumeric (cu exceptia spatiilor) cu un
simbol al procentului (%), urmat de doua cifre hexazecimale care contin valoarea ASCII a
caracterului. Spatiile sunt codificate sub forma de simboluri ale adunarii (+).
O functie conexa, n speta rawurlencode(), executa o conversie similara; cu deosebirea ca
nlocuieste spatiile cu %20, conform RFC 1738, standardul Internet pentru codificarea
adreselor URL.
Functiile urldecode() si rawurldecode() executa operatii complementare. Aceste functii sunt
utile la crearea adreselor URL care includ perechi 'nume-valoare'.
De exemplu, sa presupunem ca avem un script PHP care trebuie sa creeze o pagina HTML ce
contine o hiperlegatura spre adresa URL a unui motor de cautare. Termenul de cautare trebuie
transmis n forma codificata URL, pentru ca serverul Web si browserul sa nu se "impiedice"
de caracterele speciale. Pentru a codifica datele pentru o adresa URL, puteti folosi o metoda
ca in exemplul urmator:
echo <a href="www.sitecautare.com?cuvantcheie='. urlencode($text). '">;
Ca sa intelegeti mai bine aceste moduri de conversie, puteti studia amanuntit exemplul
urmator:
<?php
// Variabila $a contine textul ca va fi convertit
$a = "abc 123 ' <br /> / < & > ( % ) * , $ . # ^ ! [ \ ] { @ } : ; = ?";
$b = addslashes($a);
$c = stripslashes($b);
$d = quotemeta($a);
$e = htmlentities($a);
$f = urlencode($a);
echo '<br /> Conversie addslashes() = '. $b;
echo '<br /> Anulare conversie addslashes() = '. $c;
echo '<br /> Conversie quotemeta($a) = '. $d;
echo '<br /> Conversie caractere HTML = '. $e;
echo '<br /> Conversie pt. adrese URL = '. $f;
?>
Datele de iesire ale exemplului sunt urmatoarele:
Conversie addslashes() = abc 123 \' / < & > ( % ) * , $ . # ^ ! [ \\ ] { @ } : ; = ?
Anulare conversie addslashes() = abc 123 ' / < & > ( % ) * , $ . # ^ ! [ \ ] { @ } : ; = ?
Conversie quotemeta($a) = abc 123 ' / < & > $ % $ \* , \$ \. # \^ ! \[ \\ \] { @ } : ; = \?
Conversie caractere HTML = abc 123 ' <br /> / < & > ( % ) * , $ . # ^ ! [ \ ] { @ } : ; = ?
Conversie pt. adrese URL = abc+123+%27+%3Cbr+%2F%3E+%2F+%3C+%26+%3E+
%28+%25+%29+
%2A+%2C+%24+.+%23+%5E+%21+%5B+%5C+%5D+%7B+%40+%7D+%3A+%3B+
%3D+%3F
Notiuni fundamentale despre bazele de date

si SQL (1)
nvatati modul in care este structurata o baza de date
nvatati modul de proiectare a unei baze de date
nvatati sa creati baze de date MySQL si tabele
nvatati sa stergeti si sa modificati tabele dintr-o baza de date MySQL
Acesta lectie explica bazele de date relationale si modul de utilizare a acestora.

Spre deosebire de fisiere, bazele de date prezinta multe avantaje, inclusiv o mai mare
protectie a integritatii datelor si asigurarea partajarii datelor.
In aceasta lectie va fi prezentat SQL, limbajul standard pentru crearea, accesul si manipularea
bazelor de date relationale. Detaliile (cu precadere sintaxa SQL sunt cele referitoare la
MySQL, cel mai popular limbaj de baze de date folosit cu PHP.
1. Structura unei baze de date relationale

O baza de date relationale stocheaza datele n tabele, iar fiecare tabel stocheaza in coloane
informatii despre un anumit tip de element.
In continuare puteti vedea un tabel caracteristic dintr-o baza de date relationala care prezinta
personalitati istorice ale Americii.
PersoanaID
Nume
AnNastere
001
George Washington
1732
002
John Adams
1735
003
Thomas Jefferson
1743
Primul rnd al tabelului atribuie nume pentru fiecare coloana.
Fiecare rnd al tabelului, altul dect primul rnd, descrie o singura personalitate. De exemplu,
al doilea rnd descrie o personalitati pe nume George Washington.
Fiecare coloana, descrie un anumit atribut al personalitatii De exemplu, a doua coloana
contine numele personalitatilor, iar a treia coloana contine anii n care s-au nascut acestia.
Pentru a se putea face referire, mai usor, la un anumit rnd al tabelului, se obisnuieste ca
fiecare tabel sa contina o coloana care identifica n mod unic fiecare rnd. Aceasta coloana se
numeste "cheia primara" a tabelului. In exemplul prezentat, coloana numita "PersoanaID"
serveste drept cheie primara.
Daca nici o coloana nu contine o valoare unica pentru fiecare rnd, se pot combina valorile
mai multor coloane pentru a crea o "cheie primara compusa".
O baza de date relationala se numeste astfel datorita capacitatii sale de a stabili relatii ntre
date din mai multe tabele.
Urmatorul exemplu prezinta doua tabele si o relatie ntre acestea.
PersoanaID
Nume
AnNastere
Meserie
PersoanaID
001
George Washington
1732
Arhitect
003
002
John Adams
1735
General
001
003
Thomas Jefferson
1743
Filozof
002
Al doilea tabel contine informatii despre meseriile caracteristice ale persoanelor prezentate in
exemplul anterior. Mai precis, tabelul identifica persoana cu o anumita meserie. Numele
meseriei serveste drept cheie primara a tabelului, care mai contine, n afara de aceasta, o
singura coloana.
Coloana respectiva stocheaza atributul "PersoanaID" din primul tabel, al persoanei care
cunoaste meseria descrisa de un anumit rnd. De exemplu, angajatul cu numarul 003 este
arhitect.
Retineti ca "PersoanaID" este att cheia primara a tabelului original, dar si o coloana din noul
tabel. Coloana "PersoanaID" a noului tabel se numeste "cheie externa"; desi nu este cheia
primara a noului tabel, este cheia primara a unui alt tabel.
Aplicatia software care gazduieste o baza de date se numeste "sistem de gestiune a bazelor de
date" (SGBD). Exista multe sisteme de gestiune a bazelor de date, printre cele mai populare
asemenea sisteme se numara: DB2 , Interbase , MySQL , Oracle , Postgresql , SQL Server ,
Sybase .
MySQL este cel mai popular sistem de gestiune a bazelor de date destinat utilizarii cu PHP, n
mare masura deoarece este gratuit. Totusi, prin intermediul PHP este posibil accesul la
aproape orice SGBD modern.
Bazele de date relationale nteleg SQL (Structured Query Language), un limbaj relativ
simplu, folosit pentru solicitarea datelor. In ciuda simplitatii sale, SQL este un limbaj foarte
puternic, care poate obtine accesul la date stocate n mai multe tabele, poate filtra datele
dorite si poate sorta, rezuma si afisa rezultatele.
n general, bazele de date relationale si stocheaza datele ntr-un singur fisier sau catalog.
Aceasta caracteristica de organizare faciliteaza administrarea datelor, deoarece executarea
copiei de siguranta, respectiv restaurarea unui singur fisier sau catalog se realizeaza mai usor.
Sistemele de gestiune a bazelor de date relationale necesita mai multe cicluri de procesor
pentru a satisface o cerere de date dect cele necesare pentru accesul la un fisier normal, dar
ofera protectie sporita a datelor, iar pentru accesul la distanta usureaza traficul deoarece
majoritatea operatiilor sunt efectuate de programul SQL, astfel singurele date transmise in
retea ar fi rezultatul cerut.
2. Proiectarea unei baze de date

Cand creati un tabel intr-o baza de date, este important sa tineti cont de "cheia primara" si sa
va bazati pe aceasta. Coloanele dintr-un tabel trebuie sa se bazeze pe cheia primara n
totalitatea sa.
O alta operatie importanta este specificarea unui tip de date pentru fiecare coloana.
Majoritatea bazelor de date relationale accepta urmatoarele tipuri de date generale:
Caracter
ntreg
Zecimal
Data si ora
Binar
Tabelul urmator rezuma tipurile de date cele mai frecvent utilizate, acceptate de MySQL si de
majoritatea bazelor de date relationale. MySQL accepta multe alte tipuri de date, dar acestea
sunt cele mai folosite.
Principalele tipuri de date din MySQL
Tip de date
BLOB
CHAR(m)
DATE
Descriere
- Date binare arbitrare, cu o lungime maxima de 65535 octeti
- Un sir de caractere de lungime fixa, cu un maxim de m caractere, unde
m este mai mic dect 256. Pentru obtinerea lungimii dorite, se insereaza
spatii finale
- O data n format an-luna-zi; de exemplu 2008-10-15
DECIMAL
DECIMAL(m,d)
- Un numar zecimal, reprezentat sub forma de sir cu "m" cifre, din care
"d" se afla la dreapta punctului zecimal. Daca "m" si "d" sunt omise, n
mod prestabilit se vor utiliza valorile 10 si 0
DOUBLE
DOUBLE (m, d)
- Un numar cu virgula mobila, cu dubla precizie, avnd o latime de

afisare egala cu "m" si un numar de "d" cifre dupa virgula.
FLOAT(m,d)
- Un numar cu virgula mobila, cu simpla precizie, avnd o latime de

afisare egala cu "m" si un numar de "d" cifre dupa virgula
- Un ntreg pe 32 de biti. Daca se specifica atributul UNSIGNED,

INTEGER
domeniul de valori este cuprins ntre 0 si 4294967295; n caz contrar,
INTEGER UNSIGNED
domeniul este cuprins ntre valorile -2147483648 si 2147483647
NUMERIC
NUMERIC (m, d)
- Similar cu DECIMAL
REAL
REAL(m, d)
- Similar cu DOUBLE
- Un ntreg pe 16 biti. Daca se specifica atributul UNSIGNED,

SMALLINT
domeniul de valori este cuprins ntre 0 si 65535; n caz contrar,
SMALLINT UNSIGNED
domeniul este cuprins ntre valorile 32768 si 32767
TIME
TIMESTAMP
TIMESTAMP(m)
- Ora n format ora-minut-secunda; de exemplu, 08-20-00. O valoare de

tip data si ora, n format an-luna-zi ora-minut-secunda; de exemplu,
1976-01-05 00:00:00. Aceasta reprezentare este similara celei returnate
de functiile UNIX. Pt. stocare valoarea este transformata din timpul
curent in UTC si transformata invers la solicitarea datei.
VARCHAR(m)
- Un sir caracter de lungime variabila, cu un maximum de "m" caractere,

unde m este mai mic dect 256 pentru versiuni MySQL anterioare 5.0.3,
iar pt. cele mai noi limita este 65 535 bytes. Spatiile finale au fost
eliminate
Iata cateva indicatii pentru selectarea tipurilor de date:
- Alegeti BLOB ca tip pentru datele pe care nu trebuie sa le manipulati si la care nu

veti obtine acces prin intermediul limbajului SQL.
- Alegeti un tip data sau ora adecvat pentru coloanele care contin date calendaristice
sau ore.
- Alegeti un tip numeric pentru coloanele folosite pentru numere sau n calcule.
o - Pentru cantitati foarte mari sau foarte mici, alegeti DOUBLE ca tip de date.
o - Pentru coloane care contin numere fara parte zecimala de dimensiuni medii,
alegeti SMALLINT sau INTEGER ca tip de date.
o - Pentru alte coloane care contin date numerice, alegeti DECIMAL ca tip de
date.
- Alegeti CHAR sau VARCHAR ca tip pentru celelalte coloane, chiar si pentru cele
care contin cifre, cum ar fi un cod postal.
3. Crearea unei baze de date MySQL si a unui tabel

Dupa atata teorie, sa trecem la lucruri mai practice.
La nceput, o baza de date nu contine tabele. Pentru a crea o baza de date si apoi un tabel ntro baza de date, folositi un sub-limbaj SQL special, cunoscut sub numele de Data Definition
Language (DDL).
Puteti emite comenzi DDL si alte comenzi SQL prin intermediul unui interpretor SQL sau
prin intermediul PHP. Pentru inceput va fi prezentat modul de emitere a comenzilor SQL
folosind un interpretor SQL. In lectiile urmatoare va fi prezentat modul de emitere a

comenzilor SQL utiliznd PHP.
Dupa ce aveti instalat MySQL, deschideti iterpretorul "MySQL Command Line Client"
(asemanator cu, "Command Promt") in care scrieti comenzile SQL (n general, SQL nu este
sensibil la diferenta ntre majuscule si minuscule. Deci, puteti scrie comensile cum preferati,
cu majuscule sau minuscule).
Ca regula, dupa scrierea comenzilor, la sfarsit trebue sa fie caracterul "punct si virgula" (;)
Pentru a crea o baza de date, folositi urmatoarea comanda:
CREATE DATABASE nume_db;
Unde "nume_db" este numele bazei de date care va fi creata.

Inainte de a crea un tabel sau a lucra cu alte comenzi intr-o baza de date, trebuie sa intrati in
baza de date existenta, acest lucru se face folosind comanda:
USE nume_db;
Unde "nume_db" este numele bazei de date. Cu aceeasi comanda "USE nume_db" se
schimba si baza de date in care vrem sa lucram.
Pentru a crea un tabel ntr-o baza de date, emiteti comanda "CREATE TABLE", care are
urmatoarea forma:
CREATE TABLE tabel (coloana tip, coloana tip, );
Unde "tabel" este numele tabelului, "coloana" este numele unei coloane, "tip" este tipul
datelor incluse n coloana, se poate specifica un numar nedefinit de coloane.
De exemplu, comanda urmatoare creeaza un tabel numit "carte", care contine coloanele
"carteid", "titlu" si "pret":
CREATE TABLE carte (carteid CHAR(10), titlu VARCHAR(255), pret decimal(5,2));
- n afara tipului de date, intre paranteze, puteti specifica si alte atribute optionale ale unei
coloane:
NOT NULL - Fiecare rnd trebuie sa contina o valoare a coloanei asociate; valorile
nule nu sunt permise.
DEFAULT valoare - Daca nu este data o valoare a coloanei asociate, se va presupune

valoarea specificata.
AUTO INCREMENT - MySQL va repartiza n mod automat un numar de serie ca

valoare a coloanei asociate.
PRIMARY KEY - Coloana asociata este cheia primara a tabelului care o contine.
Iata un exemplu ceva mai complicat de creare a unui tabel, care foloseste unele din aceste
atribute optionale:
CREATE TABLE carte (carteid CHAR(10) PRIMARY KEY,
titlu VARCHAR(255) NOT NULL,
pret DECIMAL(5,2) DEFAULT 50.00);
4. Stergerea si modificarea unui tabel

Stergerea unui tabel sau a unei coloane este un act irevocabil, datele fiind definitiv sterse.
Pentru a sterge un tabel, scrieti urmatoarea comanda:
DROP TABLE tabel;
Unde "tabel" este numele tabelului care va fi sters.

Dupa crearea unui tabel, l puteti modifica prin emiterea unei comenzi "ALTER TABLE",
care are mai multe forme.
Urmatoarea forma a comenzii va permite sa stergeti o coloana din tabel:
ALTER TABLE tabel DROP coloana;
Unde "tabel" este numele tabelului care va fi modificat, iar "coloana" este numele coloanei
care va fi stearsa.
O alta forma a comenzii va permite sa adaugati o noua coloana n tabel:
ALTER TABLE tabel ADD coloana tip [optiuni];
Unde "tabel" este numele tabelului care va fi modificat, "coloana" este numele coloanei care
va fi adaugata, "tip" este tipul noii coloane, iar "[optiuni]" constituie toate optiunile dorite,
precum PRIMARY KEY.
De exemplu, pentru a adauga coloana "pretnou" la tabelul "carte", scrieti comanda:
ALTER TABLE carte ADD pretnou DECIMAL(5,2) DEFAULT 50.00;
Pentru a vedea toate bazele de date create in MySQL, folositi urmatoarea comanda:
SHOW DATABASES;
Pentru a vedea toate tabelele dintr-o baza de date din MySQL, folositi urmatoarea comanda:
SHOW TABLES;
Pentru a vedea toate coloanele dintr-un tabel, si atributele acestora, folositi urmatoarea
comanda:
SHOW COLUMNS FROM tabel;

si SQL (2)
Invatati sa acordati si sa revocati privilegii de acces intr-o baza de date SQL
Invatati sa accesati datele stocate intr-o baza de date SQL
Invatati sa modificati datele si tabelul dintr-o baza de date
Invatati sa sortati si sa grupati datele de iesire
1. Acordarea si revocarea privilegiilor de acces

Cnd un utilizator ncearca sa obtina acces la o baza de date relationala, aplicatia care
gazdueste baza de date (in cazul nostru MySQL) verifica daca utilizatorul are permisiunea de
a executa operatia. Administratorul de sistem poate folosi comanda MySQL "GRANT"
pentru a autoriza un utilizator sa obtina accesul la un tabel din baza de date. Comanda are
urmatoarea forma:
GRANT ALL ON tabel TO utilizator IDENTIFIED BY parola;
Unde "tabel" este numele tabelului, "utilizator" este numele contului de utilizator, iar "parola"
este parola pe care o va furniza utilizatorul pentru a-si proba identitatea.
Alternativ, administratorul de sistem poate autoriza un utilizator sa obtina acces la orice tabel
dintr-o baza de date specificata, folosind urmatoarea forma a comenzii "GRANT":
GRANT ALL ON baza_de_date.* TO utilizator IDENTIFIED BY parola;
De exemplu, comanda urmatoare autorizeaza pe utilizatorul "Marius" sa obtina acces la toate

tabelele din baza de date numita "testdb", ori de cte ori utilizatorul furnizeaza parola
"mypassword":
GRANT ALL ON testdb.* TO Marius IDENTIFIED BY mypassword;
Comanda "REVOKE" se poate folosi pentru retragerea privilegiilor acordate anterior,
interzicerea accesului.
Comanda are urmatoarele forme:
REVOKE ALL ON tabel FROM utilizator;
REVOKE ALL ON baza_de_date.* FROM utilizator;
De exemplu, pentru a revoca toate privilegiile (din toate bazele de date) utilizatorului
"tip_rau", scrieti comanda:
REVOKE ALL ON *.* FROM tip_rau;
Comanda "GRANT" are si o forma mai complexa pentru a autoriza accesul numai la anumite
coloane specificate. Forma avansata a acestei comenzi este:
GRANT privilegiu (coloane) ON tabel TO utilizator IDENTIFIED BY 'parola;

sau
GRANT privilegiu (coloane) ON baza_de_date.* TO utilizator IDENTIFIED BY
'parola;
- Unde "privilegiu" este privilegiul care urmeaza a fi extins, "coloane" sunt coloanele carora
li se aplica privilegiul, iar "tabel", "baza_de_date", "utilizator" si "parola" au semnificatiile
cunoscute.
Sunt permise si forme similare ale comenzii REVOKE:
REVOKE privilegiu (coloane) ON tabel FROM utilizator;

sau
REVOKE privilegiu (coloane) ON baza_de_date.* FROM utilizator;
ntre privilegiile posibile se numara urmatoarele:
INSERT - care permite adaugarea de date in coloana specificata
SELECT - care permite accesul de citire la rndurile care contin coloana specificata
UPDATE - care permite actualizarea rndurilor care contin coloana specificata
De exemplu, pentru a permite unui utilizator sa obtina accesul la o coloana, fara a o modifica,
puteti folosi o secventa de comenzi similara cu urmatoarea:
REVOKE ALL ON carte FROM Marius;
GRANT
SELECT(carteid, titlu, pret),
INSERT(carteid, titlu, pret),
UPDATE(carteid, titlu, pret)
ON carte TO php IDENTIFIED BY 'mypassword';
REVOKE INSERT(pret) ON carte FROM Marius;
REVOKE UPDATE(pret) ON carte FROM Marius;
- Prima comanda revoca toate privilegiile de la nivelul tabelului; n caz contrar, aceste
privilegii le vor elimina pe cele situate la nivel de coloana.
Pentru a vedea privilegiile acordate unui anumit utilizator, folositi urmatoarea comanda:
SHOW GRANTS FOR nume_utilizator;
Caracteristica privilegiilor furnizata de MySQL este mai sofisticata si furnizeaza mult mai
multe optiuni. Pentru mai multe informatii, consultati manualul SQL de la adresa
www.mysql.com
2. Accesul la datele dintr-o baza de date, interogarile SQL

n afara de Data Definition Language, SQL include Data Manipulation Language (DML).
DML va permite sa formati interogari, care obtin accesul la datele aflate ntr-o baza de date
relationala si raporteaza aceste date. De asemenea, puteti folosi DML pentru a insera,
actualiza si sterge rndurile dintr-un tabel.
Cea mai elementara forma de interogare este comanda "SELECT" simpla.
Cea mai simpla interogare raporteaza toate coloanele din toate rndurile unui tabel.
Interogarea are urmatoarea forma:
SELECT * FROM tabel;
- Unde "tabel" este numele tabelului la care se va obtine accesul.

Aceasta comanda va afisa un tabel cu fiecare rnd pe o linie separata. Datele de iesire includ
numele coloanelor si linii care separa coloanele.
Daca doriti sa selectati numai anumite coloane sau sa raportati coloanele ntr-o anumita
ordine, puteti folosi urmatoarea forma a comenzii "SELECT":
SELECT coloana1, coloana2 FROM tabel;
- Unde "tabel" este numele tabelului, iar "coloana1" si "coloana2" sunt coloanele la care se va
obtine accesul si al caror continut va fi afisat.
Puteti specifica mai multe coloane, separate prin virgula.
Daca vreti sa fie selectate numai acele rnduri care satisfac un anumit criteriu, clauza
"WHERE" va permite sa specificati o conditie; rndurile care nu satisfac conditia nu sunt
raportate.
De exemplu, iata o interogare care raporteaza un singur rnd:
SELECT titlu, pret FROM carte WHERE carteid=1;
Forma conditiilor folosite n sub-limbajul DML al limbajului SQL este similara cu aceea a
conditiilor PHP. Puteti folosi oricare din urmatorii operatori relationali:
<>
Inegalitate
!=
Inegalitate, diferit de
<
Mai mic decat
>
Mai mare decat
<=
Mai mic sau egal cu
=>
Mai mare sau egal cu
Egalitate
Puteti compara valoarea unei coloane cu aceea a altei coloane, respectiv valoarea unei
coloane cu o valoare string. Valorile string SQL (sirurile) trebuie sa fie incluse ntre ghilimele
simple, nu ntre ghilimelele duble.
Cnd unei coloane nu i-a fost repartizata nici o valoare, SQL i atribuie valoarea speciala
NULL. De asemenea, programatorii pot atribui n mod explicit valoarea NULL unei coloane.
Comparatiile obisnuite cu valori NULL, care folosesc operatorii de (in)egalitate, vor returna
un rezultat fals. Totusi, puteti folosi operatorul special "<=>". care compara valorile tinnd
cont de valoarea NULL. Daca folositi acest operator pentru a compara doua valori NULL, se
obtine un rezultat adevarat.
SQL include si numerosi operatori de comparatie non-algebrici:
Operator
Descriere
x BETWEEN y AND z Adevarat, daca valoarea lui x este cuprinsa ntre valorile lui y si z
x LIKE y
x NOT LIKE y
x IN (y1, y2)
Adevarat daca valoarea lui x este echivalenta cu modelul y

Adevarat daca valoarea lui x nu este echivalenta cu modelul y
Adevarat daca valoarea lui x este un membru al listei y1, y2. Lista
poate contine unul, doi sau mai multi membri
x NOT IN (y1, y2)

x IS NULL
Adevarat daca valoarea lui x nu este un membru al listei y1, y2.

Lista poate contine unul, doi sau mai multi membri
Adevarat daca x are valoarea NULL
x IS NOT NULL
Adevarat daca x nu are valoarea NULL
Sub-limbajul folosit pentru specificarea modelelor asociate operatorului "LIKE" este diferit
de cel folosit de PHP. Meta-caracterul "%" corespunde unui numar de zero sau mai multe
caractere, iar meta-caracterul "_" corespunde unui singur caracter.
Modelele, precum sirurile, sunt incluse ntre ghilimele simple.
- De exemplu, modelul '%ar%' corespunde oricarui sir care contine sub-sirul 'ar', inclusiv
siruri precum 'ar', 'arc' si 'un zar'.
Pentru a plasa un caracter "%" sau "_" ntr-un sir test, folositi secventa "\%" sau "\_"; ca n
PHP.
Ca si PHP, sub-limbajul DML din SQL va permite sa formati expresii logice care combina
expresiile relationale. Puteti folosi oricare din urmatorii operatori logici:
AND , && - SI, adevarat daca ambii operanzi sunt adevarati
OR , || - SAU, adevarat daca un operand este adevarat
NOT , ! - NU, adevarat daca operandul este fals
De exemplu, urmatoarea interogare raporteaza rndurile care au pretul de carte mai mare
dect 11 sau al caror titlu include sub-sirul 'Curs':
SELECT titlu, pret FROM carte
WHERE pret>11 OR titlu LIKE %Curs%;
Pentru a compara o valoare cu o expresie regulata n MySQL, folositi urmatoarea forma:
x REGEXP y, unde "x" este valoarea care va fi testata, iar "y" este o expresie regulata,
delimitata prin ghilimele simple.
3. Modificarea datelor dintr-o baza de date

Sub-limbajul SQL, Data Manipulation Language, include comenzi care va permit sa inserati
rnduri noi ntr-un tabel, sa actualizati una sau mai multe coloane ale rndurilor existente,
respectiv sa stergeri rnduri dintr-un tabel.
Pentru a insera un nou rnd ntr-un tabel, folositi comanda "INSERT", care are urmatoarea
forma:
INSERT INTO tabel VALUES (valoare1, valoare2);
- Unde "tabel" este numele tabelului la care se va adauga rndul.

- "valoare1" este valoarea pentru prima coloana din tabel, iar "valoare2" este valoarea celei
de-a doua coloane din tabel. Se pot da mai mult sau mai putin de doua valori; numarul
valorilor date ar trebui sa fie egal cu acela al coloanelor din tabel.
O coloana poate primi si valoarea "NULL", cu exceptia situatiilor cnd definitia coloanei nu
permite.
O forma mai buna (si recomandata) a comenzii INSERT specifica numele coloanelor carora
le sunt atribuite valorile:
INSERT INTO tabel (coloana1, coloana2) VALUES (valoare1, valoare2);
Unde coloana denumita "coloana1" primeste valoarea "valoare1", iar coloana denumita
"coloana2" primeste valoarea "valoare2".
Pot fi specificate mai mult sau mai putin de doua coloane si valori. Numarul coloanelor
specificate trebuie sa fie egal cu numarul valorilor specificate.
Coloanele care nu sunt denumite n comanda "INSERT" si care nu au o valoare prestabilita
(DEFAULT) primesc valoarea NULL, cu exceptia situatiilor cnd valoarea respectiva nu este
permisa (n acest caz, comanda INSERT esueaza).
Daca doriti sa adaugati mai multe randuri intr-un tabel, intr-o singura inserare, puteti folosi
urmatoarea forma a comenzii INSERT:
INSERT INTO tabel (coloana1, coloana2)

VALUES (valoare1, valoare2),
(valoare3, valoare4),
(valoare5, valoare6);
Pentru a modifica valoarea unui rnd sau mai multor rnduri existente ntr-un tabel, folositi o
comanda "UPDATE", care are urmatoarea forma:
UPDATE tabel SET coloana1=valoare1, coloana2=valoare2

WHERE conditie;
- Unde "tabel" este numele tabelului ale carui rnduri urmeaza sa fie modificate, "coloana1"
este numele primei coloane care urmeaza a fi modificata, "valoare1" este valoarea care va fi
repartizata n "coloana1", "coloana2" este numele celei de-a doua coloane care urmeaza a fi
modificata, "valoare2" este valoarea care va fi repartizata n "coloana2", iar "conditie"
identifica rndul sau rndurile care urmeaza a fi actualizate, dupa o anumita conditie.
Poate fi actualizat un numar mai mare sau mai mic de coloane. Daca se doreste ca toate
randurile coloanei sa fie actualizate, clauza "WHERE" poate fi omisa.
De exemplu, comanda urmatoare modifica din coloana "titlu" numele asociat cartii in
"Curs2", in randul unde coloana "pret" are valoarea 5.
UPDATE carte SET titlu=Curs2
WHERE pret=5;
Pentru a sterge un rnd dintr-un tabel, folositi comanda "DELETE", care are urmatoarea
forma:
DELETE FROM tabel WHERE conditie;
Daca se vrea a fi sterse toate rndurile tabelului, clauza WHERE poate fi omisa.
De exemplu, comanda urmatoare sterge rndul din tabelul "carte" asociat titlului "Curs2":
DELETE FROM carte WHERE titlu='Curs2';
4. Sortarea si gruparea
Deseori, este important ca datele sa fie raportate ntr-o anumita secventa. Puteti specifica
ordinea de raportare a rezultatelor interogarii folosind clauza "ORDER BY", care are
urmatoarea forma:
ORDER BY valoare
Daca se vor folosi mai multe cmpuri de sortare, acestea vor fi separate prin virgula.
Daca doriti sa indicati o sortare descendenta, n locul uneia ascendente, specificati "DESC"
dupa valoare.
De exemplu, pentru a ordona toate cartile n functie de pret, de la cel mai mare la cel mai mic,
respectiv dupa titlu pentru un pret egal, puteti folosi urmatoarea interogare:
SELECT pret, titlu FROM carte
ORDER BY pret DESC, titlu;
Pentru a include numai titlurile care au un pret mai mare de 50, adaugati o clauza WHERE la
comanda SELECT:
SELECT pret, titlu FROM carte
WHERE pret>50
ORDER BY pret DESC, titlu;
SQL include functii care va permit sa raportati valori diferite, valori utile, precum un numar
al rndurilor tabelului. Iata cele mai importante functii in acest sens:
Functie
Descriere
count(*)
- Numarul rndurilor din tabel
count(coloana)
- Numarul rndurilor din tabel care contin o valoare

diferita de NULL n coloana specificata
count(distinct coloana)
- Numarul valorilor distincte diferite de NULL care

apar n coloana specificata
avg(coloana)
- Valoarea mijlocie (medie) a coloanei numerice

specificate
min(coloana)
- Valoarea minima din coloana specificata
max(coloana)
- Valoarea maxima din coloana specificata
sum(coloana)
- Suma valorilor din coloana specificata
De exemplu, interogarea urmatoare raporteaza numarul cartilor si pretul mediu al acestora:
SELECT count(*), avg(pret) FROM carte;
- Datele de iesire vor fi afisate pe o singura linie.
Clauza SQL "AS" specifica un nume nou pentru o coloana sau expresie. Numele specificat
este folosit ca titlu n rapoartele SQL. Clauza "AS" este utila n lucrul cu functiile din tabelul
anterior, va ajuta sa identificati mai usor datele de iesire.
De exemplu, interogarea precedenta poate fi rescrisa pentru a include o clauza "AS", astfel:
SELECT count(*) AS Carte_Numar,
avg(pret) AS Pret_Mediu
FROM carte;
O alta clauza utila este "GROUP BY", aceasta are urmatoarea forma:
GROUP BY coloana-sortare
- Unde "coloana-sortare" este numele sau valoarea unei coloane, specificata ntr-o clauza
"ORDER BY", care trebuie sa urmeze dupa clauza "GROUP BY".
De exemplu, avem un tabel "carte" cu 4 coloane (carteid, titlu, anul si pret), interogarea
urmatoare raporteaza numarul cartilor si pretul mediu pentru fiecare an (anul) n parte:
SELECT count(*), avg(pret) FROM carte
GROUP BY anul
ORDER BY anul;
Pentru a include n datele de iesire numai grupurile selectate, specificati clauza "HAVING"
imediat dupa clauza "GROUP BY". Clauza "HAVING" are urmatoarea forma:
HAVING conditie
De exemplu, pentru a include numai cartile al caror atribut "anul" are valoare mai mare dect
1980, srieti urmatoarea interogare:
SELECT count(*), avg(pret) FROM carte
GROUP BY anul
HAVING anul>1980
ORDER BY anul;
Mai jos sunt afisati operatorii matematici folositi in SQL:
+
*
/
|
&
>>
<<
_
Adunare
Scadere
Inmultire
Impartire
SAU, la nivel de bit
SI la nivel de bit
Deplasare la dreapta
Deplasare la stanga
Complement la nivel de bit

si SQL (3)
Invatati principalele expresii si functii folosite in MySQL
Invatati sa preluati datele, prin "unire", din mai multe tabele
Invatati sa executati instructiuni MySQL scrise intr-un fisier extern
1. Expresii si functii
SQL va permite sa formati expresii folosind valori din coloane, valori literale si functii. Ca si
n PHP, puteti controla ordinea de evaluare a expresiilor SQL folosind paranteze pentru a
delimita sub-expresiile care trebuie evaluate mai intai.
Tabelele urmatoare rezuma functiile MySQL frecvent folosite
Functii matematice frecvent folosite n MySQL
Functie
Descriere
abs(x)
- Valoarea absoluta a lui x
atan(x)
- Arc tangenta lui x, unde x este dat n radiani
atan2(y,x)
- Arc tangenta lui y/x, unde semnele ambelor argumente sunt

folosite pentru a determina cadranul cercului trigonometric
ceiling(x)
- Cel mai mic ntreg care nu este mai mic dect x
cos(x)
- Cosinusul lui x, unde x este exprimat n radiani
exp(x)
- Baza logaritmilor naturali (e) ridicata la puterea x
floor(x)
- Cel mai mare ntreg care nu este mai mare dect x
log (x)
- Logaritmul natural al lui x
mod(x,y)
- Restul mpartirii x/y
power(x,y) - x la puterea y
rand(x)
- Valoare aleatoare cu virgula, mai mare sau egala cu zero si mai

mica dect unu
sign(x)
- Valoarea -1, 0 sau 1, dupa cum valoarea lui x este negativa, zero
sau pozitiva
sin(x)
- Sinusul lui x, unde x este dat n radiani
sqrt(x)
- Radacina patrata a lui x
tan(x)
- Tangenta lui x, unde x este dat n radiani

\Functii sir frecvent folosite n MySQL
Functie
Descriere
ascii(s)
- Codul ASCII al octetului celui mai din stnga al sirului s
char(n)
- Caracter al carui cod ASCII este n
concat(s1, s2) - Concatenarea sirurilor s1 si s2; cu alte cuvinte, s2 atasat la s1

lcase(s)
- Sirul s, unde toate majusculele au fost transformate n

minuscule
left(s,n)
- Primii n octeti ai sirului s, de la stnga la dreapta
length(s)
- Numarul octetilor din sirul s
locate(s1, s2)
ltrim(s)
right(s,n)
rpad(s1,n,s2)
- Pozitia primei aparitii a lui s1 n s2, respectiv zero daca s1 nu se

gaseste n s2
- Sirul s, cu eliminarea spatiilor de nceput
- Primii n octeti din sirul s, de la dreapta la stnga
- Sirul s1, completat la dreapta cu sirul s2 pna cnd rezultatul
are lungimea n
rtrim(s)
- Sirul s, cu spatiile finale eliminate
space(n)
- Un sir alcatuit din n spatii
substring(s,m,n)
- Sub-sir al lui s, care ncepe de la pozitia m si care are lungimea

n
trim(s)
- Sub-sir al lui s, cu spatiile initiale si finale eliminate
ucase(s)
- Sirul s, cu toate minusculele convertite n majuscule

Functii MySQL de data si ora frecvent utilizate
Functie
Descriere
dayofmonth(d) - Ziua din luna a datei specificate (1-31)

dayofweek(d)
- Ziua din saptamna a datei specificate (1 =duminica, 2=luni,,

7=smbata)
dayofyear(d) - Ziua din an a datei specificate (1-366)

hour(t)
- Partea orelor din momentul de timp mentionat (0-23)
minute(t)
- Partea minutelor din momentul de timp mentionat (0-59)
month(d)
- Luna datei specificate (1-12)
now()
- Data si ora curenta
second(t)
- Partea secundelor din momentul de timp mentionat (0-59)
week(d)
- Saptamna din an a datei specificate (0-53)
year(d)
- Partea anilor din momentul de timp mentionat (1000-9999)

Functii specifice MySQL
Functie
database()
Descriere
- Returneaza numele bazei de date deschise
get_lock(s,n) - Obtine o blocare a bazei de date

md5(s)
password(s)
- Returneaza o suma de control a sirului s, calculata dupa

algoritmul MD5
- Returneaza sirul s, criptat folosind algoritmul aplicat de MySQL
parolei
release_lock(s) - Anuleaza blocarea unei baze de date

user()
- Returneaza numele utilizatorului curent
version()
- Returneaza numarul versiunii MySQL
2. Uniri
SQL va permite sa obtineti accesul la mai multe tabele ntr-o singura interogare, n general,
aceasta operatie se executa pentru ca datele dintr-un tabel sa poata fi folosite cu date din alt
tabel.
De exemplu, sa presupunem ca baza de date este asemanatoare celei prezentate mai jos, unde
avem doua tabele, primul numit "persoane" iar cel de-al oilea numit "meserii", si o relatie
cheie externa - cheie primara (persoanaid) asociaza cele doua tabelele.
persoanaid
nume
AnNastere
meserie
persoanaid
001
George Washington
1732
Arhitect
003
002
John Adams
1735
General
001
003
Thomas Jefferson
1743
Filozof
002
Sa examinam urmatoarea interogare:
SELECT nume, meserie FROM persoane, meserii
WHERE persoane.persoanaid=meserii.persoanaid;
- Constructiile "persoane.persoanaid" si "meserii.persoanaid" se numesc "nume definite",
prima se refera la coloana "persoanaid" din tabelul "persoane", iar a doua se refera la coloana
"persoanaid" a tabelului "meserii".
- Clauza WHERE asigura o echivalenta ntre valoarea cheii externe din tabelul "meserii" cu
aceea a cheii primare din tabelul "persoane", (n absenta clauzei WHERE, se va stabili o
corespondenta ntre fiecare rnd din tabelul cu meserii si fiecare rnd din tabelul cu persoane;
un asemenea rezultat, numit "produs cartezian", contine n general multe rnduri - majoritatea
nedorite - si ca atare trebuie evitat).
- Rezultatul interogarii de mai sus este un raport care indica numele si meseria asociata
fiecarui angajat prezentat n tabelul "meserii".
O interogare ca aceasta, care combina date din mai multe tabele, se numeste "unire". Sunt
posibile si uniri mai complexe, care implica trei sau mai multe tabele.
Daca un rnd dat din tabelul principal (aici "persoane") nu are nici un rnd asociat n tabelul
cu detalii (aici "meserii"), rndul respectiv din tabelul principal nu va aparea n datele de
iesire ale unei uniri. In cazul acesta, pentru a determina aparitia acestei nregistrari din tabelul
principal, se poate folosi o categorie speciala de unire, cunoscuta sub numele de "unire la
stnga" sau "unire exterioara la stnga". Iata un exemplu:
SELECT nume, meserie FROM persoane
LEFT JOIN meserii
ON persoane.persoanaid=meserii.persoanaid;
Aceasta interogare va afisa toate persoanele, indiferent daca acestea au sau nu asociata o
meserie. Persoanele fara o meserie au specificatia NULL n coloana corespunzatoare
meseriei.
3. Executarea instructiunilor dintr-un fisier extern

Comenzile MySQL pot fi scrise si intr-un fisier extern (editat de exemplu, in Windows, cu
Notepad), acest fisier se numeste "script de shell".
Scriptul din fisierul extern poate fi executat din fereastra de comanda MySQL (MySQL
Command Line Client), utilizand comanda:
SOURCE nume_fisier
Unde "nume_fisier" este calea si numele fisierului in care se afla scriptul de shell.
De exemplu, scriem urmatoarele comenzi intr-un fisier numit "lucru.txt" pe care-l salvam in
directorul "C:/teste".
CREATE DATABASE lucrudb;
USE lucrudb;
GRANT ALL ON lucrudb.* TO php IDENTIFIED BY 'mypass';
CREATE TABLE angajat (
angajatnr SMALLINT PRIMARY KEY,
nume VARCHAR(50),
ore SMALLINT,
departament CHAR(16),
salariu DECIMAL(8,2),
data_angajare DATE);
INSERT INTO angajat (
angajatnr,
nume,
ore,
departament,
salariu,
data_angajare)
VALUES (
1,
'George Washinton',
40,
'Contabilitate',
500.00,
'2007-10-04'),
( 2,
'John Adams',
35,
'Marketing',
1000.00,
'2007-10-11'),
( 3,
'Thomas Jefferson washinton',
20,
'Vanzari',
1300.00,
'2007-07-02');
- Pentru a executa acest script, scriem in fereastra de comanda MySQL: SOURCE
C:/teste/lucru.txt
MySQL va executa comenzile din script ca si cum acestea ar fi scrise direct in linia de
comanda.
Exemplul de mai sus va crea o baza de date noua, numita "lucrudb", va acorda utilizatorului
"php" toate drepturile in utilizarea acestei baze de date, dupa care va crea tabelul "angajat",
cu 6 coloane ("angajatnr", "nume", "ore", "departament", "salariu", "data_angajare") in care
vor fi adaugate trei linii.
PHP MySQL - Introducere si Tipuri de

Date
MySQL este cea mai populara aplicatie open-source de baze de date folosita cu PHP.
O baza de date de obicei contine una sau mai multe tabele, folosita pentru a stoca informatii
pe categori.
Tabelele contin coloane si inregistrari (randuri) cu date.
Mai jos este un exemplu de tabel folosit pentru a stoca informatiile utilizatorului (nume,
email, parola):
id
name
password
email
Marius
faith
name@domain.net
MarPlo
peace
user@domain.com
I_AM
love
address@domain.net
- Aceasta tabela contine trei inregistrari /randuri (unu pentru fiecare persoana/utilizator) si
patru coloane (id, name, password, email)
Reguli de sintaxa MySQL

Fiecare baza de date si fiecare tabela este indentificata printr-un nume. Regulile de baza
MySQL pentru nume de baze de date, tabele, si coloane sunt:
Numele poate avea maxim 64 de caractere.
Poate contine numai litere, numere, si sublinia (indicat fara spatii).
Numele poate incepe cu un numar, dar nu poate contine numai numere.
O tabela nu poate avea doua coloane cu acelasi nume si o baza de date nu poate avea
doua tabele cu acelasi nume.
Numele tabelelor si coloanelor sunt case-sensitive ("Php" e diferit de "php").
Tipuri de date MySQL

Cand se creaza un tabel in MySQL, trebuie definit tipul de date pe care fiecare coloana il va
contine. Exista trei tipuri principale: Text (strings), Numere, Data si Ora; si doua tipuri
secundare: Liste predefinite si Date binare.
Tipul de date dicteaza ce informatie poate fi stocata si cum, acesta influenteaza si
performanta generala a bazei de date.
Tabelul de mai jos listeaza tipurile de date folosite pentru MySQL, cu o scurta descriere si cat
spatiu ocupa.
Tip
Stocare text
Marime
Descriere
Diferenta dintre "Tipurile de date pentru text" consta in numarul

maxim de caractere ce poate fi stocat intr-un camp individual,
modul de tratare a spatiilor, si daca se poate seta o valoare
initiala.
CHAR(lungime)
lungime
bytes
Un camp cu lungime fixa de la 0 la 255 de caractere.

Accepta o valoare initiala.
VARCHAR(lungime)
lungime +
Camp cu lungime variabila de la 0 la 65,535 caractere.
1 or 2
Accepta o valoare initiala.
bytes
TINYTEXT
lungime +
Un sir cu lungime maxima de 255 characters
1 bytes
Tip
Marime
Descriere
TEXT
lungime + Un sir cu o lungime maxima de 65,535 caractere. Nu

2 bytes
poate defini o valoare initiala.
MEDIUMTEXT
lungime +
Un sir cu o lungime maxima de 16,777,215 caractere
3 bytes
LONGTEXT
lungime +
Un sir cu o lungime maxima de 4,294,967,295 caractere
4 bytes
Stocare numere
Aceste tipuri de date reprezinta numere in diferite forme.
TINYINT(lungime)
1 byte
Interval de la 128 la 127. Sau de la 0 la 255 unsigned
SMALLINT(lungime)
2 bytes
Interval de la 32,768 la 32,767. Sau de la 0 la 65,535

unsigned
MEDIUMINT(lungime) 3 bytes
Interval de la 8,388,608 la 8,388,607. Sau de la 0 la

16,777,215 unsigned
INT(lungime)
4 bytes
Interval de la 2,147,483,648 la 2,147,483,647. Daca

coloana este declarata UNSIGNED, intervalul este de la
0 la 4,294,967,295
BIGINT(lungime)
8 bytes
Interval de la 9,223,372,036,854,775,808 la
9,223,372,036,854,775,807. Sau de la 0 la
18,446,744,073,709,551,615 unsigned
FLOAT(lungime,
decimals)
4 bytes
Numar mic cu virgula (cu zecimale). Deoarece PHP va

formata numerele in functie de calcule, se recomanda sa
folosesti FLOAT fara parametri optionali.
DOUBLE(lungime,
decimals)
8 bytes
Numar mare cu zecimale
DECIMAL(lungime,
decimals)
Un tip DOUBLE care permite un numar fix de

lungime +
zecimale. Inainte de MySQL 5.0.3, tipul de date
1 or 2
DECIMAL a fost stocat ca un sir, ca sa nu poata fi
bytes
folosit cu functii SQL, cum ar fi SUM()
Stocare data si timp
MySQL stocheaza data intr-un singur format: YYYY-MM-DD
DATE
3 bytes
O data stocata ca YYYY-MM-DD. Intervalul este de la

1000-01-01 la 9999-12-31
DATETIME
8 bytes
Data si ora, afisat in format YYYY-MM-DD

HH:MM:SS
TIMESTAMP
4 bytes
Un timestamp (de obicei generat automat de calculator).

Poate contine valori ce reprezinta date de la inceputul
lui 1970 pana in Januarie 2038. Coloanele
TIMESTAMP sunt afisate in acelasi format ca si
coloana DATETIME.
TIME
3 bytes
Ora in format HH:MM:SS
Stocare liste predefite
MySQL te lasa sa stochezi doua tipuri de liste predefinite (pot fi

vazute ca echivalente pentru radio butonul si caseta de verificare).
Tip
Marime
Descriere
Acest tip de coloana stocheaza o singura alegere din
lista predefinita, fiecare coloana poate avea una din mai
multe valori posibile
ENUM
1 or 2
bytes
SET
Aceast tip de coloana stocheaza zero sau mai multe

inregistrari din lista predefinita. Ca si ENUM, cu
1, 2, 3, 4, exceptia ca fiecare coloana poate avea mai mult de o
or 8 bytes valoare din mai multe valori posibile, sau mai multe
inregistrari dintr-o lista predefinita. Lista poate contine
cel mult 64 de inregistrari.
Storing binary data
Stocheaza date binare, ca imaginile.
TINYBLOB
Pana la 255 bytes
BLOB
Pana la 64kB
MEDIUMBLOB
Pana la 16MB
LONGBLOB
Pana la 4GB
- Parametri (lungime, decimal) sunt optionali, dar pentru motive de performanta, ar trebui
specificati pentru a restrictiona cata informatie sa fie stocata in oricare din coloane. Bazele de
date sunt de obicei mai rapide cand lucreaza cu coloane care au marimea fixata.
- Foloseste VARCHAR pentru elemente de text scurte si TEXT pentru cele mai lungi.
- Foloseste DECIMAL pentru a stoca valori pt. bani.
- Pentru data si ora, este indicat sa folositi TIMESTAMP daca doriti sa inregistrati in acel
camp un punct fix in timp (de exemplu data cand o inregistrare a fost introdusa in baza de
date). Folositi DATETIME daca data/ora pot fi setate si schimbate arbitrar.
La tipul TIMESTAMP data si ora este setata automat cu timpul curent cand se face INSERT
sau UPDATE, daca nu se specifica o valoare pentru acel camp.
- Nu este o buna idee sa folosesti date binare. Solicita prea mult baza de date, si nu se pot
afisa imagini direct din baza de date.
Aceasta lectie e doar pentru o scurta introducere, si puteti reveni ca sa verificati tipul de date
care doriti sa fie folosit.
In tutorialul urmator puteti invata cum sa va conectati la serverul MySQL cu PHP, sa creati o
baza de date si tabele, utilizand interfata MySQLi (MySQL Improved).
PHP MySQL - utilizare MySQLi

PHP are trei moduri diferite prin care se poate conecta si interactiona cu baza de date MySQL
: extensia MySQL originala (cu functii), MySQL Improved (MySQLi, obiect-orientat), sau
PHP Data Objects (PDO, obiect-orientat).
Ele nu pot fi amestecate in acelasi script. Extensia originala MySQL nu mai este activ
dezvoltata si nu este recomandat pentru proiecte PHP-MySQL noi.
Documentatia PHP descrie MySQLi ca fiind optiunea preferata recomandata de MySQL
pentru proiecte noi.
Conectare la MySQL
Inainte de a putea accesa informatii din baza de date , trebuie creata o conexiune cu serverul
MySQL.
Pentru a va conecta la un server MySQL cu PHP si MySQLi, se creaza o instanta de obiect
mysqli, cu formula new mysqli(), la care se adauga datele de conectare.
- Sintaxa:
$conn = new mysqli($servername, $username, $password, $database, $port);
- $servername - Specifica serverul la care sa se conecteze. Daca adaugati valoarea NULL sau
un sir gol "", serverul va folosi valoarea standard: "localhost".
- $username - Specifica numele de utilizator la baza de date MySQL.
- $password - Specifica parola utilizatorului pentru conectare.
- $database - Optional. Numele bazei de date care contine tabelele.
- $port - Optional. Specifica port-ul prin care se face conectarea la serverul MySQL, standard
este 3306
- Exemplu:
<?php
// conectare la server
$conn = new mysqli('localhost', 'root', 'pass', 'dbname');
// verifica conexiunea
if (mysqli_connect_errno()) {
exit('Connect failed: '. mysqli_connect_error());
}
?>
- Aceast cod face conectarea la baza de date numita "dbname", si stocheaza conexiunea in
instanta de obiect $conn.
Daca exista erori la conexiune, mysqli_connect_errno() returneaza codul de eroare.
Inchiderea unei conexiuni

Conexiunea va fi inchisa automat cand scriptul se termina. Se recomanda totusi sa inchideti
conexiunea mai devreme, cand scriptul nu o mai foloseste. Acest lucru va elibera memoria
folosita de conexiune. Pentru a inchide o conexiune se foloseste metoda close() din clasa
MySQLi.
- Exemplu:
<?php
// conectare la server
$conn = new mysqli('localhost', 'root', 'pass', 'dbname');
}
// ceva cod
$conn->close();
// termina conectarea
// alt cod PHP

?>
Creare baza de date cu MySQLi
Pentru a stoca informatii in MySQL, este nevoie de o baza de date.

Comanda CREATE DATABASE este folosita pentru a crea o baza de date in MySQL.
- Sintaxa:
CREATE DATABASE database_name
Pentru a face un script PHP sa execute instructiunile SQL, mai intai trebuie sa creati o
instanta de obiect mysqli, care va contine conexiunea la server, apoi folositi metoda query()
din clasa MySQLi.
- Sintaxa:
mysqliObj->query($sql_query)
- mysqliObj - este instanta de obiect mysqli, creata cu new mysqli()

- $sql_query - este un sir cu instructiuni SQL.
Aceasta metoda trimite interogarea sau comanda la serverul MySQL, va returna obiectul
rezultat, sau TRUE la succes, FALSE in caz de eroare.
Exemplul urmator creaza o baza de date numita "tests":
<?php
// conectare la serverul MySQL
$conn = new mysqli('localhost', 'root', 'pass');
exit('Conectare nereusita: '. mysqli_connect_error());
}
// interogare sql cu CREATE DATABASE
$sql = "CREATE DATABASE `tests` DEFAULT CHARACTER SET utf8 COLLATE
utf8_general_ci";
// executa interogarea $sql pe server pentru a crea baza de date
if ($conn->query($sql) === TRUE) {
echo 'Baza de date "tests" a fost creata';
}
else {
echo 'Error: '. $conn->error;
}
$conn->close();
?>
- Cand doriti sa creati o noua baza de date, se adauga doar primele trei argumente la obiectul
mysqli (servername, username si password). Dar daca vreti sa folosesti un port specific,
adaugati un sir gol "" pentru argumentul ce reprezinta numele bazei de date :
Exemplu: new mysqli('localhost', 'root', 'pass', '', port)
- Instructiunea suplimentara: DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci
seteaza baza de date sa foloseasca UTF-8 charset pentru codarea caracterelor.
Exemplul de mai sus creaza o baza de date numita "test", afisaza "Baza de date "tests" a fost
creata", sau un mesaj de eroare in caz de esec.
$conn->error (sau poate fi folosit mysqli_error($conn) ) returneaza un sir cu o descriere a
ultimei erori(daca exista).
Comenzile SQL sunt case-insensitive, astfel puteti folosi "CREATE DATABASE" sau "create
database". Dar numele tabelelor si coloanelor sunt case-sensitive.
Creare tabel in MySQL
Dupa ce ati realizat o conexiune la o baza de date, puteti crea tabele in ea. Tabelele sunt
elementele care stocheaza datele in baza de date.
Pentru a crea un tabel in MySQL, se foloseste comanda CREATE TABLE, apoi se apeleaza
metoda query().
- Sintaxa:
CREATE TABLE `table_name`
(
`nume_coloana1` tip_date,
....
)
- tip_date specifica tipul de date pe care o coloana le poate contine. Pentru o lista cu tipurile
de date MySQL, vedeti lectia precedenta: PHP MySQL - Introducere si Tipuri de date.
Dupa "tip_date", se pot specifica si alte atribute optionale pentru fiecare coloana:
NOT NULL - Fiecare rand trebuie sa contina o valoare in acea coloana, valorile null
nu sunt permise.
DEFAULT value - Seteaza o valoare initiala care este adaugata cand nici o alta
valoare nu este transferata
UNSIGNED - Poate fi folosit pentru numere, seteaza sa fie folosite doar numere
pozitive si zero.
AUTO INCREMENT - MySQL va mari automat valoarea din randul urmator cu 1

de fiecare data cand o noua inregistrare este adaugata.
PRIMARY KEY - Este folosit pentru a identifica unic randurile dintr-un tabel.
Coloana cu setarea PRIMARY KEY este de obicei un ID numeric, si in general
folosita cu AUTO_INCREMENT
Fiecare tabel ar trebui sa aiba o coloana primary key. Valoarea ei trebuie sa fie unica pentru
fiecare inregistrare din tabel.
- Exemplu:
<?php
// conectare la serverul MySQL
$conn = new mysqli('localhost', 'root', 'pass', 'tests');
}
// interogare sql pentru CREATE TABLE
$sql = "CREATE TABLE ùsers` (
ìd` INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
`name` VARCHAR(25) NOT NULL,
`pass` VARCHAR(18) NOT NULL,
èmail` VARCHAR(45),
`reg_date` TIMESTAMP
) CHARACTER SET utf8 COLLATE utf8_general_ci";
// Executa interogarea $sql query pe server pentru a crea tabelul

if ($conn->query($sql) === TRUE) {
echo 'Table "users" successfully created';
}
else {
echo 'Error: '. $conn->error;
}
$conn->close();
?>
- Acest cod va crea un tabel numic "users" in baza de date "tests", cu cinci coloane (id ,
name , pass , email si reg_date), seteaza coloana 'id' ca campul primary key.
In imaginea de mai jos puteti vedea descrierea tabelului "users".
In comenzile SQL este recomandat ca numele de tabel si coloane sa fie adaugat intre apostrof
` ` (caracterul de langa butonul cu numerul 1 pe tastatura). Aceasta este sintaxa corecta dar nu
este strict necesara.
PHP MySQL - INSERT INTO
Dupa ce o baza de dat

Limbă

Bine ați venit la Scribd!

HTML

Încărcat de

Informații document

Descriere:

Data încărcării

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?

Descriere:

Drepturi de autor:

Formate disponibile

HTML

Încărcat de

Descriere:

Drepturi de autor:

Formate disponibile

Titluri conexe

HTML (HyperText Markup Language) este un limbaj utilizat pentru crearea paginilor web ce

pot fi afisate intr-un browser (sau navigator).

Principalele elemente HTML

2. Structura documentului HTML

Crearea si editarea paginii HTML

1. Crearea bazei de nceput a unui document

<title>MarPlo.net - Cursuri, Jocuri si Anime</title>

2. Setarea proprietarilor documentului

- Daca elementul BODY nu este completat cu alte atribute atunci browser-ul va

- Pentru a seta culoare fondului paginii adaugati in eticheta <BODY> atributul

- Urmatorul exemplu va prezenta un document a carui fond este de culoare albastra:

o - Iata un exemplu in care culoarea fondului va fi albastru si culoarea textului

Link-uri (LINK, VLINK si ALINK)

Folosirea unei imagini ca fond pentru pagina (background)

Titluri, Paragrafe, Un nou rnd, Linie

- Mrimea textului nconjurat de elementul Heading variaz de la foarte mare, in

Mai jos puteti vedea exemplu:

Cum apare in pagina

2. Paragraf <p> ... </p>

- Paragrafele permit sa adaugi text in document astfel incat lungimea de afisare a

Mai jos puteti vedea exemplu:

Cum apare in pagina

3. Un nou rand <br>

Mai jos puteti vedea exemplu:

Cum apare in pagina

4. Linie orizontala <hr>

- Acest element afiseaza o linie orizontala in document

- Acest element nu folosete element de nchidere [</hr>]

- Elementul <hr> foloseste urmatoarele atribute:

Mai jos puteti vedea exemplu:

Cum apare in pagina

1. Tag-ul <FONT> ... </FONT>

- Marimea textului poate fi modificata cu elementul FONT si atributul SIZE.

mrimi mai mare</font>

- Tipul fontului poate fi modificat cu elementul FONT si atributul FACE.

- Culoarea textului poate fi modificata cu elementul FONT si atributul COLOR.

2. Bold, Italic, Underline si alte elemente

- Bold (ingrosat) <b> ... </b>

- Italic (inclinat) <i> ... </i>

- Underline (subliniat) <u> ... </u>

- <em> Accentuare (Emphasis) </em> - Browser-ul de obicei arata aces element ca

- <strong> Strong </strong> - Browser-ul de obicei arata aces element ca bold

- <cite> Citatie </cite> - Reprezinta o citatie din document.

- <center> ... </center> Va centra elementele

4. Alte etichete HTML pentru formatul textului

- <strike> Text taiat </strike>

- <big> Prezinta textul intr-un font mare </big>

- <small> Prezinta textul intr-un font mic </small>

- <sub> Afisaza textul in pozitia subscript </sub>

- <sup> Aseaza textul in pozitia superscript </sup>

Prezinta textul intr-un font mare

normal Aseaza textul in pozitia superscript

- <dfn> Defineste exemplu de termen inchis </dfn>

- <code> Folosit pentru extragerea unui cod de program </code>

- <samp> Folosit pentru simple productii de programe, scripturi , etc. </samp>

- <kbd> Folosit pentru text care va fi scris de utilizator </kbd>

- <var> Folosit pentru variabile sau argumente de comenzi </var>