Sunteți pe pagina 1din 545

2015 Calculatoare si Automatizare

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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-mail-urilor 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++ sau
Gedit, si un navigator de web, recomandabil Mozilla Firefox.
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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>site-ul-tau.net - Cursuri, Jocuri si Filme</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).

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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, link-urile 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 ati creat baza de nceput a unui document si ati 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 ati
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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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 Cum apare in pagina


<html>
<head>
<title>Titlu documentului</title>
</head>
<body> Heading 1
<h1>Heading 1</h1>
<h2>Heading 2</h2>
Heading 2
<h3>Heading 3</h3> Heading 3
Heading 4
<h4>Heading 4</h4> Heading 5
<h5>Heading 5</h5> Heading 6

<h6>Heading 6</h6>
</body>
</html>

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.

Mai jos puteti vedea exemplu:


Cod HTML Cum apare in pagina
<html>
<head> Paragraf 1
<title>Titlu documentului</title>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


</head>
<body>
Paragraf 2
<p>Paragraf 1</p>
<p>Paragraf 2</p>
Paragraf 3
<p>Paragraf 3</p>
<p>Paragraf 4</p>
Paragraf 4
</body>
</html>

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>

Mai jos puteti vedea exemplu:


Cod HTML Cum apare in pagina
<html>
<head>
<title>Titlu documentului</title>
</head>
Heading 1
<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.

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%)

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Mai jos puteti vedea exemplu:


Cod HTML Cum apare in pagina
<html>
<head>
<title>Titlu documentului</title> Heading 1
</head>
<body> Paragraf 1
<h1>Heading 1</h1> Linie 2
<p>Paragraf 1<br> Linie 3
Linie 2<br> ...
Linie 3<br>
... </p>
<hr>
<hr color="#1111fe" size="4" width="50%">
<p>Paragraf 2</p> Paragraf 2
</body>
</html>

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 :

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<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 intr-un 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 &nbsp; &nbsp; 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>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<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>
<title>Titlu documentului</title>
</head>
<body>
<p>
<strike> Text taiat </strike><br>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<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>
- In browser va fi afisat asa:
Text taiat
Prezinta textul intr-un font mare
Prezinta textul intr-un font mic
Aseaza textul in pozitia superscript
Aseaza textul in pozitia subscript normal

- 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>

In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum
sunt afisate de browser.
<html>
<head>
<title>Titlu documentului</title>
</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>
- In browser va fi afisat asa:
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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- 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.

In continuare puteti vedea un exemplu cu aceste coduri de mai sus si felul cum
sunt afisate de browser.
<html>
<head>
<title>Titlu documentului</title>
</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>
- In browser va fi afisat asa:
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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>
<title>titlu documentului</title>
</head>
<body>
<ul>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</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>
<title>titlu documentului</title>
</head>
<body>
<ul type="square">
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ul>
</body>
</html>
- In pagina web apare asa:

List item 1 ...

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>
<title>titlu documentului</title>
</head>
<body>
<ol>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>
</body>
</html>
- In pagina web apare asa:

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>
<title>titlu documentului</title>
</head>
<body>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<ol type="a">
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>
- Alta lista:
<ol type="I" start="3">
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>
</body>
</html>
- In pagina web apare asa:

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>
<title>titlu documentului</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd> - Hyper Text Markup Language</dd>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<dd> - Limbaj pentru pagini web</dd>
<dt>Dog</dt>
<dd>dog = caine</dd>
<dd>animal de casa</dd>
</dl>
</body>
</html>
- In pagina web apare asa:
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>
<title>titlu documentului</title>
</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>"
- In pagina web apare asa:

List item 1 ...

List item 2 ...

c. Alt List item ...

d. Alt List item ...

List item 5 ...

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca
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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>
<title>titlu documentului</title>
</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.site-ul-tau.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">

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>

o - atributul "name" indica tinta pentru link, e un fel de semn care


indica locatia.

o - "cuvant" poate fi orice cuvnt, trebuie sa fie unic pentru fiecare


link.

o - "Textul tinta" este textul unde se face saltul.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca
In tabelul de mai jos puteti vedea atributele care se folosesc si descrierea
acestora:
Instructiune Atribute Descriere
- marcaj de includere a imaginilor
specifica faptul ca este o harta de imagine
ismap pe server (se foloseste mai rar; de obicei
<img folosim harti de imagine la client)
atribute > usemap="nume_ha
specifica harta de imagine la client
rta"
imaginea de rezolutie scazuta care se
lowscr = "url"
incarca prima (doar pentru Netscape)
specifica regiunile unei harti de imagine la
<map -
client
atribute >
< / map > name = numele hartii de imagine (corespunzator
"nume_harta" atributului USEMAP al marcajului <IMG>)
- defineste o regiune a unei harti de imagine
forma regiunii: rect sau rectangle
shape = "forma" (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
coords = coordonatele celor 4 colturi sau a celor din
"coordonate" stg. sus si dr. jos ale regiunii
<area - pentru circ (cerc) se dau coordonatele
atribute > centrului cercului si raza
- pentru point (punct) se dau coordonatele
punctului
- pentru poly (poligon) se dau coordonatele
colturilor poligonului
URL - ul asociat regiunii specificate din
cadrul imaginii; in cazul unui clic pe acea
href = "=url="
regiune se incarca pagina specificata prin
URL
textul asociat regiunii specificate din cadrul
imaginii; apare plasand mouse-ul deasupra
alt = "text"
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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>
<td>linia 2- coloana 2</td>
</tr>
<tr>
<td>linia 3- coloana 1</td>
<td>linia 3- coloana 2</td>
</tr>
<tr>
<td>linia 4- coloana 1</td>
<td>linia 4- coloana 2</td>
</tr>
</table>
- In pagina web apare asa:
titlu 1 titlu 2
linia 2- linia 2-
coloana 1 coloana 2
linia 3- linia 3-

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


coloana 1 coloana 2
linia 4- linia 4-
coloana 1 coloana 2

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>
<td>linia 2- coloana 1</td>
<td>linia 2- coloana 2</td>
</tr>
</table>
- In pagina web apare asa:
titlu 1 titlu 2

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


linia 2- linia 2-
coloana 1 coloana 2
acesta este textul

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>
<td>linia 3- coloana 2</td>
</tr>
<tr>
<td bgcolor="#adadff">linia 4- coloana 2 - colorat</td>
</tr>
</table>
- In pagina web apare asa:
titlu 1 titlu 2
linia 2- coloana 1
linia 3- linia 3- coloana 2
coloana 1 linia 4- coloana 2 -

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


colorat
acesta este textul

Exersati singuri si alte exemple de tabele, cu mai multe randuri si coloane.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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%,*"

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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)

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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).

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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)

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


In browser va aparea:

- Acest element foloseste urmatoarele atribute:

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>

In browser va apare:

- Acest element foloseste urmatoarele atribute:

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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- "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>

- Acest element foloseste urmatoarele atribute:

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>

In browser va apare:

- Acest element foloseste urmatoarele atribute:

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>

In browser va apare:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- Acest element foloseste urmatoarele atribute:

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>

In browser va apare:

- Acest element foloseste urmatoarele atribute:

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>

In browser va apare:

- Acest element foloseste urmatoarele atribute:

o type - button

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>

In browser va apare:

- Acest element foloseste urmatoarele atribute:

o type - submit

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


datele

o value - textul care apare pe buton.

Imagine pentru buton Submit

- permite aplicarea unei imagine in locul butonului Submit standard

- Codul este <input type="image" src="locatie_imagine"></input>

- Acest element foloseste urmatoarele atribute:

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>

In browser va apare:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- Acest element foloseste urmatoarele atribute:

o type - reset

o value - textul care apare pe buton.

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>
<option>Optiune 2</option>
</select>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.

In browser va apare:

2. List Box

- Codul este:
<select name="select" size="4">
<option>Optiune 1</option>
<option>Optiune 2</option>
</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.

In browser va apare:

- 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 tag-uri), 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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<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 url-ul 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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


".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>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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;
text-decoration:none;
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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>
<style type="text/css">
<!--
.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>
<title>Titlul</title>
<style type="text/css">
<!--
#idh {
color:#fe1111;
dext-decoration:overline;
text-align:center;
}
-->
</style>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


</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 URL-ul (imaginii) sau culori date


imagini sau culori de fundal
d prin nume sau valoare RGB

Color culoarea textului nume sau valoare RGB

Numele fontului sau al familiei de


font-family tipul fontului
fonturi

data in puncte(pt), inch(in),


font-size dimensiunea fontului
centimetri(cm), pixeli(px)

font-style text cursiv normal, italic

extra-light, light, demi-light,


font-
grosimea fontului medium, demi-bold, bold, extra-
weight
bold

data in puncte(pt), inch(in),


distanta dintre liniile de baza ale
line-height centimetri(cm), pixeli(px),
randurilor
procent(%)

distanta fata de marginea din data in puncte(pt), inch(in),


margin-left
stanga a paginii centimetri(cm), pixeli(px)

margin- distanta fata de marginea din data in puncte(pt), inch(in),


right dreapta a paginii centimetri(cm), pixeli(px)

distanta fata de textul precedent


data in puncte(pt), inch(in),
margin-top sau fata de marginea de sus a
centimetri(cm), pixeli(px)
paginii

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


left(stanga), center(centru),
text-align alinierea textului
right(dreapta), justify

text- none(nimic), underline(subliniat),


evidentierea textului
decoration italic(cursiv), line-through(taiat)

distanta primului rand fata de data in puncte(pt), inch(in),


text-indent
marginea din stanga centimetri(cm), pixeli(px)

border- none, groove, dotted, dashed,


tipul chenarului
style solid, double, ridge, inset, outset

border- data in puncte(pt), inch(in),


grosimea chenarului
width centimetri(cm), pixeli(px)

border-
culoarea chenarului nume sau valoare RGB
color

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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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).

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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; font-weight:bold;">Cursul


HTML</span> de pe site-ul-tau.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 font-
weight:bold;), in pagina web va fi afisat textul in felul urmator:

Aceasta este o lectie din Cursul HTML de pe site-ul-tau.net.

Tag-ul SPAN poate fi folosit si ca o classa pentru CSS. Astfel, proprietatile adaugate

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>
<title>Titlul</title>
<style type="text/css">
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.'

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<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>
se termina cu linia a treia.
</span>

- In pagina web va apare

Fraza pe mai multe linii,


continua cu linia a doua,
se termina cu linia a treia.

- Acum cu SPAN:

Fraza pe mai multe linii,


continua cu linia a doua,
se termina cu linia a treia.

- 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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>
<style type="text/css">
/* 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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<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:
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><!
[endif]-->

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):

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>
<meta charset="utf-8" />
<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" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><!
[endif]-->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<header id="page_header">
<h1>Web Development Cursuri si Tutoriale</h1>
<nav>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<ul>
<li><a href="http://www.site-ul-tau.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.site-ul-tau.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.site-ul-taunet.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.site-ul-taunet.net/html/html5-formular-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.site-ul-tau.net/html/" title="Curs
HTML">Curs HTML</a>.</p>
</footer>
</section>

<section id="sidebar">
<nav>
<ul>
<li><a href="http://www.site-ul-tau.net/html/" title="Curs HTML">Curs HTML</a></li>
<li><a href="http://www.site-ul-tau.net/curs_css/" title="Curs CSS">Curs CSS</a></li>
<li><a href="http://www.site-ul-tau.net/javascript/" title="JavaScript">JavaScript</a></li>
<li><a href="http://www.site-ul-tau.net/php-mysql/" title="PHP-MySQL">PHP-
MySQL</a></li>
<li><a href="http://www.site-ul-tau.net/flash/" title="Flash-ActionScript 3">Flash-ActionScript
3</a></li>
<li><a href="http://www.site-ul-tau.net/jocuri/" title="Jocuri Flash">Jocuri Flash</a></li>
</ul>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


</nav>
<aside class="sidebar_baner">Banner in sidebar</aside>
</section>

<footer id="page_footer">
<p>De la: <a href="http://www.site-ul-tau.net/" title="Cursuri gratuite, Jocuri,
Filme">www.site-ul-tau.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;

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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;
border: 2px solid blue;
}

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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.site-ul-tau.net/html/</figcaption>
</figure>
Rezultat:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


Curs HTML: www.site-ul-tau.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,site-ul-tau.net</h2>
<h3>Cursuri gratuite, Jocuri, Filme</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.site-ul-tau.net</mark> pt. Web
Development.</p>
Rezultat:

Cursuri gratuite si tutoriale: www.site-ul-tau.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>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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" />

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<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.site-ul-tau.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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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 />

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<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="site-ul-tau" value="http://www.site-ul-tau.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").

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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 site-ul-tau" />

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="site-ul-tau" value="http://www.site-ul-tau.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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>
<meta charset="utf-8" />
<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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- 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>
<meta charset="utf-8" />
<title>Canvas patrat albastru</title>
<script type="text/javascript"><!--
function draw() {
var canvas = document.getElementById('cav1');

if (canvas.getContext) {
var ctx = canvas.getContext('2d');
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".

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>
<meta charset="utf-8" />
<title>Canvas transparenta</title>
</head>
<body>
<canvas width="200" height="200" id="cav1"></canvas>
<p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti
aceasta zona.</p>
<script type="text/javascript"><!--
function draw() {
var canvas = document.getElementById('cav1');

if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0101fe';
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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.

<canvas width="200" height="200" id="cav1"></canvas>


<p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti
aceasta zona.</p>
<script type="text/javascript"><!--
function draw() {
var canvas = document.getElementById('cav1');

if (canvas.getContext) {
var ctx = canvas.getContext('2d');

// definesste culoarea si grosimea liniei


ctx.strokeStyle = '#01da01';
ctx.lineWidth = 3;

// creaza prima linie


ctx.moveTo(10, 10); // seteaza punctul de inceput
ctx.lineTo(100, 80); // defineste linia

// creaza a doua linie


ctx.moveTo(10, 10); // seteaza punctul de inceput
ctx.lineTo(120, 120); // defineste linia

// the third line


ctx.moveTo(10, 150); // muta punctul de inceput
ctx.lineTo(140, 150);

ctx.stroke(); // adauga liniile


}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.

<canvas width="200" height="200" id="cav1"></canvas>


<p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti
aceasta zona.</p>
<script type="text/javascript"><!--
function draw() {
var canvas = document.getElementById('cav1');

if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.arc(75,75,50,0,Math.PI*2,true); // Fata
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Gura
ctx.moveTo(65,65);
ctx.arc(60,65,4,0,Math.PI*2,true); // Ochiul stang
ctx.moveTo(95,65);
ctx.arc(90,65,4,0,Math.PI*2,true); // Ochiul drept
ctx.stroke();
}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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 font-family


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:
<canvas width="200" height="200" id="cav1"></canvas>
<p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti
aceasta zona.</p>
<script type="text/javascript"><!--
function draw() {
var canvas = document.getElementById('cav1');

if (canvas.getContext) {
var ctx = canvas.getContext('2d');

// creaza text cu o culoare de umplere


ctx.fillStyle = '#00f';

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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 {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}

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:
<canvas width="200" height="200" id="cav1"></canvas>
<p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti
aceasta zona.</p>
<script type="text/javascript"><!--
function draw() {
var canvas = document.getElementById('cav1');

if (canvas.getContext) {
var ctx = canvas.getContext('2d');

// 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.fillStyle = '#0000fe';
ctx.arc(75,75,50,0,Math.PI*2,true);

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


ctx.fill();
}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}

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():
<canvas width="200" height="200" id="cav1"></canvas>
<p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti
aceasta zona.</p>
<script type="text/javascript"><!--
function draw() {
var canvas = document.getElementById('cav1');

if (canvas.getContext) {
var ctx = canvas.getContext('2d');

// 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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


gradient.addColorStop(0.4, '#ff0'); // galben
gradient.addColorStop(0.8, '#0f0'); // verde
gradient.addColorStop(1, '#00f'); // albastru

// Aplica gradientul la proprietatea fillStyle, si deseneaza un dreptunghi


ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 200, 125);
}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}

draw();
--></script>
Rezultat:

2) Exemplu cu createRadialGradient():

<canvas width="200" height="200" id="cav1"></canvas>


<p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti
aceasta zona.</p>
<script type="text/javascript"><!--
function draw() {
var canvas = document.getElementById('cav1');

if (canvas.getContext) {
var ctx = canvas.getContext('2d');

// creaza un obiect CanvasGradient radial


// furnizeaza sursa, coordonatele de inceput, sfarsit si razele cercurilor (x0, y0, r0, x1, y1, r1)
var gradient = ctx.createRadialGradient(70, 80, 10, 78, 75, 45);

// Adauga culori la gradientul radial, la fel ca la cel liniar


gradient.addColorStop(0, '#0f0');
gradient.addColorStop(0.5, '#fff');
gradient.addColorStop(1, '#00f');

// Aplica gradientul la proprietatea fillStyle, si deseneaza un cerc


ctx.fillStyle = gradient;
ctx.arc(75,75,50,0,Math.PI*2,true);
ctx.fill();
}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}

draw();
--></script>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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: intr-un


<canvas> (redimensionand-o), si un text langa ea.

<canvas width="260" height="200" id="cav1"></canvas><br />


<p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti
aceasta zona.</p>
<img src="html_course.jpg" alt="HTML course" width="152" height="160" id="img1" />
<script type="text/javascript"><!--
function draw() {
var canvas = document.getElementById('cav1');

if (canvas.getContext) {
var ctx = canvas.getContext('2d');

// 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);
}

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}

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>
<p id="no_cav" style="display:none;">Folositi un browser compatibil-Canvas ca sa vedeti
aceasta zona.</p>
<script type="text/javascript"><!--
function draw(clr) {
var canvas = document.getElementById('cav1');

if (canvas.getContext) {
var ctx = canvas.getContext('2d');

// deseneaza un dreptunghi, cu o culoare preluata din parametru "clr"


ctx.fillStyle = clr;
ctx.fillRect (0, 0, 120, 80);
}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}

draw('#0102fe'); // apeleaza functia


--></script>
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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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 &copy; (sau
codul ISO &#169;)
- ca sa afisati in pagina simbolul (jumatate) se adauga codul &frac12; (sau
codul ISO &#189;)
- pentru caracterul < (mai mic), ca browser-ul sa nu-l confunde cu inceputul
de tag, se poate folosi codul &lt;

Nume ISO
Nume Sintaxa Descriere
Latin-1
Aacute &Aacute &#193 A ascutit ()
aacute &aacute; &#225; a ascutit ()
Acirc &Acirc; &#194; A circumflex ()
acirc &acirc; &#226; a circumflex ()
acute &acute; &#180; accent grav ()
AElig &AElig; &#198; ligatura AE ()
aelig &aelig; &#230; ligatura ae ()
Agrave &Agrave; &#192; A grav ()
agrave &agrave; &#224; a grav ()
amp &amp; &#38; ampersand (&)
Aring &Aring; &#197; A cu inel ()
aring &aring; &#229; a cu inel ()
Atilde &Atilde; &#195; A tilda ()
atilde &atilde; &#227; a tilda ()
Auml &Auml; &#196; A umlaut ()
auml &auml; &#228; a umlaut ()
brvbar &brvbar; &#166; bara intrerupta ()
Ccedil &Ccedil; &#199; C sedila ()
ccedil &ccedil; &#231; c sedila ()
cent &cent; &#162; cent ()
copy &copy; &#169; copyright ()
curren &curren; &#164; valuta generala ()

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


deg &deg; &#176; grad ()
&div;
div &#247; impartire ()
&divide;
Eacute &Eacute; &#201; E ascutit ()
eacute &eacute; &#233; e ascutit ()
Ecirc &Ecirc; &#202; E circumflex ()
ecirc &ecirc; &#234; e circumflex ()
Egrave &Egrave; &#200; E grav ()
egrave &egrave; &#232; 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; &#208; Eth nordic ()
eth &eth; &#240; eth nordic ()
Euml &Euml; &#203; E umlaut ()
euml &euml; &#235; e umlaut ()
frac12 &frac12; &#189; jumatate ()
frac14 &frac14; &#188; sfert ()
frac34 &frac34; &#190; trei sferturi ()
gt &gt; nedefinit mai mare dect (>)
Iacute &Iacute; &#205; I ascutit ()
iacute &iacute; &#237; i ascutit ()
Icirc &Icirc; &#206; I circumflex ()
icirc &icirc; &#238; i circumflex ()
iexcl &iexcl; &#161; exclamatie inversata ()
Igrave &Igrave; &#204; I grav ()
igrave &igrave; &#236; i grav ()
iquest &iquest; &#191; intrebare inversata ()
Iuml &Iuml; &#207; I umlaut ()
iuml &iuml; &#239; i umlaut ()
laquo &laquo; &#171; paranteza unghiular dubl

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


stng ()
lt &lt; &#60; mai mic dect (<)
macr &macr; &#175; macron ( )
micro &micro; &#181; micro ()
middot &middot; &#183; punct la mijloc ()
nbsp &nbsp; &#160; spatiu nonbreaking
not &not; &#172; negatie ()
Ntilde &Ntilde; &#209; N tilda ()
ntilde &ntilde; &#241; n tilda ()
Oacute &Oacute; &#211; O ascutit ()
oacute &oacute; &#243; o ascutit ()
Ocirc &Ocirc; &#212; O circumflex ()
ocirc &ocirc; &#244; o circumflex ()
Ograve &Ograve; &#210; O grav ()
ograve &ograve; &#242; o grav ()
ordf &ordf; &#170; ordinal feminin ()
ordm &ordm; &#186; ordinal masculin ()
Oslash &Oslash; &#216; O tiat ()
oslash &oslash; &#248; o tiat ()
Otilde &Otilde; &#213; O tilda ()
otilde &otilde; &#245; o tilda ()
Ouml &Ouml; &#214; O umlaut ()
ouml &ouml; &#246; o umlaut ()
para &para; &#182; paragraf ()
plusmn &plusmn; &#177; plus minus ()
pound &pound; &#163; lira sterlina ()
quot &quot; &#34; ghilimele (")
paranteza unghiular dubl
raquo &raquo; &#187;
dreapta ()
reg &reg; &#174; marca inregistrata ()
sect &sect; &#167; semn sectiune ()
shy &shy; &#173; soft hyphen ()

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


sup1 &sup1; &#185; 1 superior ()
sup2 &sup2; &#178; 2 superior ()
sup3 &sup3; &#179; 3 superior ()
szlig &szlig; &#223; sharp s ()
THORN &THORN; &#222; Thorn nordic ()
thorn &thorn; &#254; thorn nordic ()
times &times; &#215; inmultire ()
trade &trade; nedefinit trademark ()
Uacute &Uacute; &#218; U ascutit ()
uacute &uacute; &#250; u ascutit ()
Ucirc &Ucirc; &#219; U circumflex ()
ucirc &ucirc; &#251; u circumflex ()
Ugrave &Ugrave; &#217; U grav ()
ugrave &ugrave; &#249; u grav ()
uml &uml; &#168; umlaut ()
Uuml &Uuml; &#220; U umlaut ()
uuml &uml; &#252; u umlaut ()
Yacute &Yacute; &#221; Y ascutit ()
yacute &yacute; &#253; y ascutit ()
yen &yen; &#165; yen ()
yuml &yuml; &#255; 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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>
<title>Titlul</title>

<style type="text/css">
obiect_css {
proprietate:valoare;

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:

<style type="text/css">
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:
<style type="text/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:

<style type="text/css">
@import url(nume_fisier.css);
</style>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }
#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; ... }
.nume_clasa { 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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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 */
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }

// 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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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 font-variant cu valoarea small-caps. Prin folosirea valorii normal,

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.
Sintaxa generala este urmatoarea:

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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.
Sintaxa generala este urmatoarea:

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; }

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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).
Sintaxa generala este:

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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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".
Forma generala este:

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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.
Sintaxa generala este:

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.
Sintaxa generala este:

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;

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


no-repeat pentru a afisa imaginea o singura data, fara repetare.

Forma generala este:

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.
Sintaxa generala este:

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.
Sintaxa generala este:

selector {background:val_bg-color val_bg-img val_bg-repet


val_bg-attach val_bg-position }

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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; }

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.
Sintaxa generala este:

selector { border-width:valoare; }

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.
Sintaxa generala este:

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; }

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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"

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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
Forma generala este:

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:
<style type="text/css">
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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.
Forma generala este:

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; }

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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;

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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)
Forma generala este:

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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>
<style type="text/css">
p:first-child {
color:blue;
}
</style>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


</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>


<!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. 2</title>
<style type="text/css">
li:hover {
background-color:#88fe88;
}
</style>
</head>
<body>
<ul>
<li>Text list 1 ...</li>
<li>Text list 2 ...</li>
<li>Text list 3 ...</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'

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<!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. 3</title>
<style type="text/css">
.test:last-child {
background-color:#88fe88;
}

.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 ...

Text in list cu class 2 ...

Text in list cu class 3 ...

Iata un alt exemplu in care sunt combinate o clasa (test), un selector (tag <i>)
si "first-child":
<!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. 4</title>
<style type="text/css">
.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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<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)

<!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. 5</title>
<style type="text/css">
#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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-elemente - Ex. 1</title>
<style type="text/css">
h4:after {
content:"site-ul-tau";
color:blue;
}
</style>
</head>
<body>
<h4>Continutul din primul tag H4 ... </h4>
<h4>Un alt text din alt element H4</h4>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


</body>
</html>

- Rezultatul va fi cel de jos.


- Observati cum este adaugat cuvantul "site-ul-tau", 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 ... site-ul-tau

Un alt text din alt element H4site-ul-tau


- 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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-elemente - Ex. 2</title>
<style type="text/css">
h4:first-child:before {
content:"site-ul-tau- ";
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 "site-ul-tau- " este adaugat imediat in fata si doar primului
element <h4> (precizat prin 'first-child'), dupa cum puteti vedea mai jos:

site-ul-tau- 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); }

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-elemente - Ex. 3</title>
<style type="text/css">
.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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-elemente - Ex. 4</title>
<style type="text/css">
.test:first-line {
font-weight:bold;
color:blue;
}
</style>
</head>
<body>
<p class="test">Paragraf cu mai multe linii<br />

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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;

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


}

/* 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;
text-decoration:none;
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.site-ul-tau.net/curs_css/css3-background-proprietati-noi.html"
title="CSS3 - Background proprietati">CSS3 - Background proprietati</a></li>
<li><a href="http://www.site-ul-tau.net/curs_css/css3-opacity.html" title="CSS3
opacity">CSS3 opacity</a></li>
</ul>
</li>
<li> + Tutoriale HTML
<ul>
<li><a href="http://www.site-ul-tau.net/html/tutorial-html5.html" title="Tutorial
HTML5">Tutorial HTML5</a></li>
<li><a href="http://www.site-ul-tau.net/html/html5-canvas.html" title="HTML5
canvas">HTML5 canvas</a></li>
<li><a href="http://www.site-ul-tau.net/html/html5-taguri-noi.html" title="HTML5 tag-uri
noi">HTML5 tag-uri noi</a></li>
</ul>
</li>
<li><a href="http://www.site-ul-tau.net/coment/contact.php"
title="Contact">Contact</a></li>
</ul>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- "Smecheria" la acest Meniu este acest cod (ceea ce face a doua lista UL
vizibila cand mouse-ul e deasupra listei LI parinte):
#menuv li:hover ul {
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;
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, #menuv li span {
display:block;
margin:0;
font-weight:normal;
}
#menuv li a:hover {
background-color:#fefefe;
text-decoration:none;
font-style:oblique;
}

/* Proprietati pentru nivelul doi din meniul vertical */


#menuv li:hover ul {
display:block;
}
#menuv li ul {
display:none;
position:absolute;
z-index:9998;
width:100%;
left:151px;
margin:-20px auto 0 auto;
background-color:#daedfe;
border:1px dashed blue;

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


padding:1px;
}
#menuv li ul li {
margin:1px;
background-color:#edfeed;
padding:1px 0 1px 2px;
}
--></style>

<ul id="menuv">
<li><a href="/" title="Pagina personala">Pagina personala</a></li>
<li><span> + Tutorialle CSS</span>
<ul>
<li><a href="http://www.site-ul-tau.net/curs_css/css3-background-proprietati-noi.html"
title="CSS3 - Background proprietati">CSS3 - Background proprietati</a></li>
<li><a href="http://www.site-ul-tau.net/curs_css/css3-opacity.html" title="CSS3
opacity">CSS3 opacity</a></li>
</ul>
</li>
<li><span> + Tutoriale HTML</span>
<ul>
<li><a href="http://www.site-ul-tau.net/html/tutorial-html5.html" title="Tutorial
HTML5">Tutorial HTML5</a></li>
<li><a href="http://www.site-ul-tau.net/html/html5-canvas.html" title="HTML5
canvas">HTML5 canvas</a></li>
<li><a href="http://www.site-ul-tau.net/html/html5-taguri-noi.html" title="HTML5 tag-uri
noi">HTML5 tag-uri noi</a></li>
</ul>
</li>
<li><a href="http://www.site-ul-tau.net/coment/contact.php"
title="Contact">Contact</a></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 mouse-ul e pe textul /imaginea din lista orizontala.
- Demonstratie (mutati cursorul mouse-ului peste Menu):

Pagina personala

Tutorialle CSS

Tutoriale HTML

Contact

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- Codul sursa:
<style><!--
#menuv {
position:relative;
padding:2px;
}

/* Proprietati pentru lista orizontala */


#menuv li {
float:left;
margin:1px 8px;
border:1px solid blue;
background-color:#daedfe;
padding:1px 2px;
list-style-type:none;
font-weight:600;
text-align:left;
text-decoration:nderline;
}

/* Proprietati pentru listele verticale */


#menuv li:hover ul {
display:block;
}
#menuv li ul {
display:none;
position:absolute;
margin:1px auto 1px -8px;
background-color:#f0f1fe;
border:1px dashed blue;
padding:1px;
}
#menuv li ul li {
position:relative;
clear:both;
width:99%;
margin:1px 0;
border:none;
background-color:#edfeed;
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 {
background-color:#fefefe;
text-decoration:none;
font-style:oblique;
}
--></style>

<ul id="menuv">
<li><a href="/" title="Pagina personala">Pagina personala</a></li>
<li>Tutorialle CSS
<ul>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<li><a href="http://www.site-ul-tau.net/curs_css/css3-background-proprietati-noi.html"
title="CSS3 - Background proprietati">CSS3 - Background proprietati</a></li>
<li><a href="http://www.site-ul-tau.net/curs_css/css3-opacity.html" title="CSS3
opacity">CSS3 opacity</a></li>
</ul>
</li>
<li>Tutoriale HTML
<ul>
<li><a href="http://www.site-ul-tau.net/html/tutorial-html5.html" title="Tutorial
HTML5">Tutorial HTML5</a></li>
<li><a href="http://www.site-ul-tau.net/html/html5-canvas.html" title="HTML5
canvas">HTML5 canvas</a></li>
<li><a href="http://www.site-ul-tau.net/html/html5-taguri-noi.html" title="HTML5 tag-uri
noi">HTML5 tag-uri noi</a></li>
</ul>
</li>
<li><a href="http://www.site-ul-tau.net/coment/contact.php"
title="Contact">Contact</a></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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>
<meta charset="utf-8" />
<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 {
background-position: 0 100%;
}
//-->
</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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>
<meta charset="utf-8" />
<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');
background-position: 0 0;
background-repeat: no-repeat;
text-indent: -9999px; /* Sa nu se afiseze textul din link */
}

/* Cand cursorul de mouse e deasupra butonului */


#addnew:hover {
background-position: 50% 0;
}

/* Cand butonul /link-ul e apasat */


#addnew:active {
background-position: 100% 0;
}
//-->
</style>
</head>
<body>

<a href="http://www.site-ul-tau.net/" title="Cursuri Jocuri Filme" id="addnew">site-ul-


tau.net</a>

</body>
</html>
Rezultat:
site-ul-tau.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 link-uri. Trucul este sa desenati butoanele simetric, apoi definiti
proprietatea CSS background-position 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).

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- 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');
background-repeat: no-repeat;
text-indent: -9999px; /* Sa nu se afiseze textul din link */
}

/* Butonul din imagine pt Primul link */


#menu #addnew {
background-position: 0 0;
}
/* Primul link hover */
#menu #addnew:hover {
background-position: 48% 0;
}
/* Primul link cand e apasat */
#menu #addnew:active {
background-position: 100% 0;
}

/* Butonul din imagine pt al Doilea link */


#menu #delete {
background-position: 0 32%;
}
/* al Doilea link hover */
#menu #delete:hover {
background-position: 48% 32%;
}
/* al Doilea link cand e apasat */
#menu #delete:active {
background-position: 100% 32%;
}

/* Butonul din imagine pt al Treilea link */


#menu #accept {
background-position: 0 66%;
}
/* al Treilea link hover */
#menu #accept:hover {
background-position: 48% 66%;
}
/* al Treilea link cand e apasat */
#menu #accept:active {
background-position: 100% 66%;
}

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


/* Butonul din imagine pt al patrulea link */
#menu #cancel {
background-position: 0 99%;
}
/* al patrulea link hover */
#menu #cancel:hover {
background-position: 48% 99%;
}
/* al patrulea link cand e apasat */
#menu #cancel:active {
background-position: 100% 99%;
}
//-->
</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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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;
border:1px solid blue;
background:url('css3.jpg');
background-size:100px 60px;
background-repeat:no-repeat;
}
#id2 {
width:300px;
height:120px;
border:1px solid #01da02;
background:url('css3.jpg');
background-size:contain;
background-repeat:no-repeat;
}
#id3 {
width:300px;
height:120px;
border:1px solid silver;
background:url('css3.jpg');
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.site-ul-tau.net - valoare cover</div>
Rezultat:

Curs CSS gratuit - dimensiuni in pixeli

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


www.coursesweb.net - valoare contain
www.site-ul-tau.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.
<style type="text/css"><!--
#id1 {
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, color-stop(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.site-ul-tau.net</div>
Rezultat:
Curs gratuit CSS
www.site-ul-tau.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:
<style type="text/css"><!--
#id1 {
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, color-stop(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 */
}

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


--></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:
<style type="text/css"><!--
#id1 {
width:350px;
height:120px;
padding:20px;
border:3px solid blue;
background:url('css3.jpg');
background-repeat:no-repeat;
background-color:#bcfede;
background-origin:content-box;
}
#id2 {
width:350px;
height:120px;
padding:20px;
border:3px solid blue;
background:url('css3.jpg');
background-repeat:no-repeat;
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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:
<style type="text/css"><!--
#id1 {
width:350px;
height:120px;
padding:20px;
border:2px solid blue;
background-color:#cdfeda;
background-clip:padding-box;
-webkit-background-clip:padding-box; /* Safari */
}
#id2 {
width:350px;
height:120px;
padding:20px;
border:2px solid blue;
background-color:#cdfeda;
background-clip:content-box;
-webkit-background-clip:content-box; /* Safari */
}
--></style>

<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:
<style type="text/css"><!--
#id1 {
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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:
<style type="text/css"><!--
#id1 {
width:300px;
height:120px;
border:2px solid blue;
border-radius:28px;
}
--></style>

<div id="id1"> Curs CSS - www.site-ul-tau.net</div>


Rezultat:
Curs CSS - www.site-ul-tau.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-bottom-left-radius.
Exemplu:
<style type="text/css"><!--
#id1 {
width:300px;
height:120px;
background-color:#bbfeda;
border:2px solid blue;
border-top-left-radius:20px;
border-bottom-right-radius:38px;
}
--></style>

<div id="id1"> Curs CSS - www.site-ul-tau.net</div>


Rezultat:
Curs CSS - www.site-ul-tau.net

Adaugare umbre la chenare

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:
<style type="text/css"><!--
#id1 {
width:300px;
height:120px;
background-color:#bbfeda;
box-shadow: 11px 11px 5px #7878da;
-webkit-box-shadow: 11px 11px 5px #7878da; /* Safari si Chrome */
}
--></style>

<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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:


<style type="text/css"><!--
#id1 {
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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


CSS3 - text-shadow, word-wrap,
text-overflow
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".

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:
<style type="text/css"><!--
#id1 {
width:100px;
border:1px solid blue;
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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:
<style type="text/css"><!--
#id1 {
width:230px;
border:1px solid blue;
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.site-ul-tau.net - alt text lung intr-un singur rand.</div>
Rezultat:
CSS Tutorial - un text lung pe o singura linie, alte cuvinte.
Site web www.site-ul-tau.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); /* pt. IE */
opacity: X;
- 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;

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


filter:alpha(opacity=40); /* pt. IE */
opacity:0.4;
}
--></style>

<div id="dv">Un continut oarecare ...</div>


Rezultat:
Un continut oarecare ...

2) Exemplu, seteaza opacitate 50% la o imagine:


<style type="text/css"><!--
#im {
filter:alpha(opacity=50); /* pt. IE */
opacity:0.5;
}
--></style>

<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 {
filter:alpha(opacity=50); /* pt. IE */
opacity:0.5;
}
#im2:hover {
filter:alpha(opacity=100); /* pt. IE */
opacity:1;
}
--></style>

<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 {

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


display:none;
position:absolute;
top:2%;
left:2%;
width:96%;
height:95%;
background-color:#07fe08;
filter:alpha(opacity=50); /* pt. IE */
opacity:0.5;
}
#cnt {
position:relative;
background:#e7e8fe;
width:300px;
height:200px;
border:1px solid blue;
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 .

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.
<style type="text/css">
#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.
<style type="text/css">
#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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


Pozitionati mouse-ul aici.

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.
<style type="text/css">
#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:

Pozitionati mouse-ul aici.

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).
<style type="text/css">
#idv4 {
width:160px;
height:90px;
background:#abcdfe;
font-size:18px;
transform: skew(20deg, 25deg);

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


-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.
<style type="text/css">
#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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.
<style type="text/css">
#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;
/* Safari si Chrome */
-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-timing-function transition-delay;

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


Exemplu: Schimba gradual "font-size" (in 0.4 secunde, cu viteza "ease-out")
cand mouse-ul e deasupra unui element cu class="clse".
<style type="text/css">
.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.site-ul-tau.net/curs_css/" title="Curs CSS gratuit">Curs
CSS gratuit</a></li>
<li class="clse"><a href="http://www.site-ul-tau.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:
<style type="text/css">
.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; /* Safari si Chrome */
-o-transition: background 1.3s, opacity 1.8s, -o-transform 1.4s; /* Opera */
}

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


.clsdv:hover {
background: #00da01;
filter:alpha(opacity=50); /* 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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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. <style type="text/css">
18. #trapezoid {
19. height: 0;
20. width: 120px;
21. border-bottom: 80px solid #05ed08;
22. border-left: 45px solid transparent;
23. border-right: 45px solid transparent;
24. padding: 0 8px 0 0;
25. }
26. </style>
27.
28. <div id="trapezoid"><br/>Curs CSS:<br/>
29. www.site-ul-tau.net</div>
30. Rezultat:
31.
Curs CSS:
www.site-ul-tau.net
32.

33. Trapez dreptunghic

34. Cod:
35. <style type="text/css">
36. #rtrapezoid {
37. height: 0;
38. width: 120px;
39. border-bottom: 100px solid #05ed08;
40. border-left: 15px solid #05ed08;
41. border-right: 45px solid transparent;

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


42. padding-right: 20px;
43. }
44. </style>
45.
46. <div id="rtrapezoid"><br/>Curs CSS:<br/>
47. 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. border-bottom: 75px solid #05ed08;
60. }
61.
62. /* Zona de jos */
63. #rhombus:after {
64. position: absolute;
65. left: -60px;
66. top: 75px;
67. width: 0;
68. height: 0;
69. border: 60px solid transparent;
70. border-top: 75px solid #05ed08;
71. content: '';
72. }
73.
74. /* Continut in romb */
75. #rhombus div {
76. position: relative;
77. margin: 63px auto 0 -41px;
78. font-weight: bold;
79. z-index: 888;
80. }
81. </style>
82.
83. <div id="rhombus"><div>site-ul-tau</div></div>
84. Rezultat:
85. site-ul-tau

86. Triunghiuri cu CSS


87. Triunghi in jos Triunghi stanga Triunghi dreapta
Triunghi stanga-sus Triunghi dreapta-sus Triunghi jos-stanga
Triunghi jos-dreapta

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


Mai multe triunghiuri cu CSS, create doar cu un tag DIV si cateva
proprietati CSS.

88. Triunghi in sus

89. Cod:
90. <style type="text/css">
91. #triangleup {
92. width: 0;
93. height: 0;
94. border-left: 50px solid transparent;
95. border-right: 50px solid transparent;
96. border-bottom: 100px solid blue;
97. }
98. </style>
99.
100. <div id="triangleup"><br/><br/><br/>>Sus</div>
101. Rezultat:
102.

Sus

103. Triunghi in jos

104. Cod:
105. <style type="text/css">
106. #triangledown {
107. width: 0;
108. height: 0;
109. border-left: 50px solid transparent;
110. border-right: 50px solid transparent;
111. border-top: 100px solid blue;
112. }
113. /* Continut in triunghi */
114. #triangledown div{ margin:-85px 0 0 -20px; }
115. </style>
116.
117. <div id="triangledown"><div>JOS</div></div>
118. Rezultat:
119. JOS

120. Triunghi stanga

121. Cod:
122. <style type="text/css">
123. #triangleleft {
124. width: 0;
125. height: 0;
126. border-top: 50px solid transparent;
127. border-bottom: 50px solid transparent;
128. border-right: 100px solid blue;
129. }
130. /* Continut in triunghi */
131. #triangleleft div{ margin:-10px 0 0 25px; }
132. </style>
133.
134. <div id="triangleleft"><div>Stanga</div></div>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


135. Rezultat:
136. Stanga

137. Triunghi dreapta

138. Cod:
139. <style type="text/css">
140. #triangleright {
141. width: 0;
142. height: 0;
143. border-top: 50px solid transparent;
144. border-bottom: 50px solid transparent;
145. border-left: 100px solid blue;
146. }
147. /* Continut in triunghi */
148. #triangleright div{ margin:-10px 0 0 -85px; }
149. </style>
150.
151. <div id="triangleright"><div>Dreapta</div></div>
152. Rezultat:
153. Dreapta

154. Triunghi stanga-sus

155. Cod:
156. <style type="text/css">
157. #triangletopleft {
158. width: 0;
159. height: 0;
160. border-top: 100px solid blue;
161. border-right: 50px solid transparent;
162. }
163. </style>
164.
165. <div id="triangletopleft">...</div>
166. Rezultat:
167. ...
168.

169. Triunghi dreapta-sus

170. Cod:
171. <style type="text/css">
172. #triangletopright {
173. width: 0;
174. height: 0;
175. border-top: 100px solid blue;
176. border-left: 50px solid transparent;
177. }
178. </style>
179.
180. <div id="triangletopright">...</div>
181. Rezultat:
182. ...
183.

184. Triunghi jos-stanga

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


185. Cod:
186. <style type="text/css">
187. #trianglebottomleft {
188. width: 0;
189. height: 0;
190. border-bottom: 100px solid blue;
191. border-right: 50px solid transparent;
192. }
193. </style>
194.
195. <div id="trianglebottomleft">...</div>
196. Rezultat:
197. ...

198. Triunghi jos-dreapta

199. Cod:
200. <style type="text/css">
201. #trianglebottomright {
202. width: 0;
203. height: 0;
204. border-bottom: 100px solid blue;
205. border-left: 50px solid transparent;
206. }
207. </style>
208.
209. <div id="trianglebottomright">...</div>
210. Rezultat:
211. ...

212. Cerc si Oval cu CSS


213. Cerc si Oval create cu un singur tag HTML (DIV) si cateva
proprietati CSS.

214. Cerc
215. <style type="text/css">
216. #circle {
217. width: 180px;
218. height: 180px;
219. background: #abcdef;
220. -moz-border-radius: 50%;
221. -webkit-border-radius: 50%;
222. border-radius: 50%;
223. padding:15px;
224. }
225. </style>
226.
227. <div id="circle"><br/><br/>Cursuri online:<br/>site-ul-tau.net</div>
228. Rezultat:
229.

Cursuri online:
site-ul-tau.net

230. Forma Ovala

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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).
232. <style type="text/css">
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:
250. <style type="text/css">
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 Filme<br/>www.site-ul-tau.net</div>
263. Rezultat:
264. Cursuri Jocuri Filme
www.site-ul-tau.net

265. Pentagon

266. Cod:
267. <style type="text/css">
268. #pentagon {

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


269. margin:70px 0 5px 20px;
270. position: relative;
271. width: 110px;
272. border-width: 100px 36px 0;
273. border-style: solid;
274. border-color: #abefcd transparent;
275. }
276. #pentagon:before {
277. content: "";
278. position: absolute;
279. height: 0;
280. width: 0;
281. top: -170px;
282. left: -36px;
283. border-width: 0 90px 70px;
284. border-style: solid;
285. border-color: transparent transparent #abefcd;
286. }
287.
288. /* Content in pentagon */
289. #pentagon div{
290. position:absolute;
291. top:-50px;
292. }
293. </style>
294.
295. <div id="pentagon"><div>site-ul-tau.net</div></div>
296. Rezultat:
297. site-ul-tau.net

298. Hexagon

299. Cod:
300. <style type="text/css">
301. #hexagon {
302. width: 100px;
303. height: 55px;
304. background: #cdabef;
305. position: relative;
306. }
307. #hexagon:before {
308. content: "";
309. position: absolute;
310. top: -25px;
311. left: 0;
312. width: 0;
313. height: 0;
314. border-left: 50px solid transparent;
315. border-right: 50px solid transparent;
316. border-bottom: 25px solid #cdabef;
317. }
318. #hexagon:after {
319. content: "";
320. position: absolute;
321. bottom: -25px; left: 0;
322. width: 0;
323. height: 0;
324. border-left: 50px solid transparent;
325. border-right: 50px solid transparent;
326. border-top: 25px solid #cdabef;
327. }
328. </style>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


329.
330. <div id="hexagon">site-ul-tau.net</div>
331. Rezultat:
332.
333. site-ul-tau.net

334. Octogon

335. Cod:
336. <style type="text/css">
337. #octagon {
338. width: 100px;
339. height: 100px;
340. background: #a0e8a1;
341. position: relative;
342. }
343. #octagon:before {
344. content: "";
345. position: absolute;
346. top: 0;
347. left: 0;
348. border-bottom: 29px solid #a0e8a1;
349. border-left: 29px solid #eee;
350. border-right: 29px solid #eee;
351. width: 42px;
352. height: 0;
353. }
354. #octagon:after {
355. content: "";
356. position: absolute;
357. bottom: 0;
358. left: 0;
359. border-top: 29px solid #a0e8a1;
360. border-left: 29px solid #eee;
361. border-right: 29px solid #eee;
362. width: 42px;
363. height: 0;
364. }
365. </style>
366.
367. <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:
372. <style type="text/css">
373. /* http://css-tricks.com/examples/ShapesOfCSS/ */
374. #star5 {
375. margin: 50px 0;

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


376. position: relative;
377. display: block;
378. width: 0px;
379. height: 0px;
380. border-right: 100px solid transparent;
381. border-bottom: 70px solid #05ed08;
382. border-left: 100px solid transparent;
383. -moz-transform: rotate(35deg);
384. -webkit-transform: rotate(35deg);
385. -ms-transform: rotate(35deg);
386. -o-transform: rotate(35deg);
387. }
388. #star5:before {
389. border-bottom: 80px solid #05ed08;
390. border-left: 30px solid transparent;
391. border-right: 30px solid transparent;
392. position: absolute;
393. height: 0;
394. width: 0;
395. top: -45px;
396. left: -65px;
397. display: block;
398. content:"";
399. -webkit-transform: rotate(-35deg);
400. -moz-transform: rotate(-35deg);
401. -ms-transform: rotate(-35deg);
402. -o-transform: rotate(-35deg);
403. }
404. #star5:after {
405. position: absolute;
406. display: block;
407. top: 3px;
408. left: -105px;
409. width: 0px;
410. height: 0px;
411. border-right: 100px solid transparent;
412. border-bottom: 70px solid #05ed08;
413. border-left: 100px solid transparent;
414. -webkit-transform: rotate(-70deg);
415. -moz-transform: rotate(-70deg);
416. -ms-transform: rotate(-70deg);
417. -o-transform: rotate(-70deg); content:"";
418. }
419. </style>
420.
421. <div id="star5"></div>
422. Rezultat:

423. Stea 6 varfuri

424. Cod:
425. <style type="text/css">
426. #star6 {
427. width: 0;
428. height: 0;
429. border-left: 50px solid transparent;
430. border-right: 50px solid transparent;
431. border-bottom: 100px solid #05ed08;
432. position: relative;
433. }
434. #star6:after {
435. width: 0;

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


436. height: 0;
437. border-left: 50px solid transparent;
438. border-right: 50px solid transparent;
439. border-top: 100px solid #05ed08;
440. position: absolute;
441. content: "";
442. top: 30px;
443. left: -50px;
444. }
445. </style>
446.
447. <div id="star6"></div>
448. Rezultat:

449. Stea 8 varfuri

450. Cod:
451. <style type="text/css">
452. #star8 {
453. background: blue; width: 80px;
454. height: 80px;
455. position: relative;
456. -webkit-transform: rotate(20deg);
457. -moz-transform: rotate(20deg);
458. -ms-transform: rotate(20deg);
459. -o-transform: rotate(20eg);
460. }
461. #star8:before {
462. content: "";
463. position: absolute;
464. top: 0;
465. left: 0;
466. height: 80px;
467. width: 80px;
468. background: blue;
469. -webkit-transform: rotate(135deg);
470. -moz-transform: rotate(135deg);
471. -ms-transform: rotate(135deg);
472. -o-transform: rotate(135deg);
473. }
474. </style>
475.
476. <div id="star8"></div>
477. Rezultat:
478.

479. Stea 12 varfuri

480. Cod:
481. <style type="text/css">
482. #star12 {
483. background: blue;
484. width: 80px;
485. height: 80px;
486. position: relative;
487. }
488. #star12:before, #star12:after {
489. content: "";
490. position: absolute;
491. top: 0;
492. left: 0;

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


493. height: 80px;
494. width: 80px;
495. background: blue;
496. }
497. #star12:before {
498. -webkit-transform: rotate(30deg);
499. -moz-transform: rotate(30deg);
500. -ms-transform: rotate(30deg);
501. -o-transform: rotate(30deg);
502. }
503. #star12:after {
504. -webkit-transform: rotate(60deg);
505. -moz-transform: rotate(60deg);
506. -ms-transform: rotate(60deg);
507. -o-transform: rotate(60deg);
508. }
509. </style>
510.
511. <div id="star12"></div>

512. Rezultat:

513.

514. Butoane cu CSS


515. Buton Pulse Buton 3D-Umbra
Buton Rotunjit Stanga Buton Rotunjit Dreapta
Buton Inima-Sageata

Butoane cu CSS, create numai cu proprietati CSS / CSS3, fara a folosi


fisier cu imagine.

516. Buton Simplu


517. <style type="text/css">
518. .buttons {
519. display: inline-block;
520. background-color: #ddd;
521. border: 1px solid #444;
522. background-image: -webkit-linear-gradient(top, #eee, #ccc);
523. background-image: -moz-linear-gradient(top, #eee, #ccc);
524. background-image: -o-linear-gradient(top, #eee, #ccc);
525. background-image: linear-gradient(top, #eee, #ccc);
526. border-radius: 8px;
527. -moz-border-radius: 8px;
528. -webkit-border-radius: 8px;
529. -khtml-border-radius: 8px;
530. padding: 6px 10px;
531. font-weight: bold;
532. }
533.
534. .buttons:link, .buttons:visited, .buttons:hover, .buttons:active {
535. text-decoration: none;
536. color: #00f;
537. }
538.
539. .buttons:hover {
540. background-color: #BBB;

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


541. background-image: -webkit-linear-gradient(top, #DDD, #AAA);
542. background-image: -moz-linear-gradient(top, #DDD, #AAA);
543. background-image: -o-linear-gradient(top, #DDD, #AAA);
544. background-image: linear-gradient(top, #DDD, #AAA);
545. color: yellow;
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.site-ul-tau.net/curs_css/" title="Curs CSS" class="buttons">Curs
CSS</a>
553. Rezultat:
554. www.CoursesWeb.net Curs CSS

555. Buton Pulse


556. <style type="text/css">
557. .buttons {
558. display: inline-block;
559. background-color: #ddd;
560. border: 1px solid #444;
561. background-image: -webkit-linear-gradient(top, #eee, #ccc);
562. background-image: -moz-linear-gradient(top, #eee, #ccc);
563. background-image: -o-linear-gradient(top, #eee, #ccc);
564. background-image: linear-gradient(top, #eee, #ccc);
565. border-radius: 8px;
566. -moz-border-radius: 8px;
567. -webkit-border-radius: 8px;
568. -khtml-border-radius: 8px;
569. padding: 6px 10px;
570. font-weight: bold;
571. }
572.
573. .buttons:link, .buttons:visited, .buttons:hover, .buttons:active {
574. text-decoration: none;
575. color: #00f;
576. -webkit-animation: "pulse" 1s ease-in-out 0 infinite alternate;
577. -moz-animation: "pulse" 1s ease-in-out 0 infinite alternate;
578. animation: "pulse" 1s ease-in-out 0 infinite alternate;
579. box-shadow: 0px 0px 4px #00ACE6;
580. }
581.
582. @-webkit-keyframes pulse {
583. 0% { box-shadow: 0px 0px 4px #00ACE6; }
584. 100% { box-shadow: 0px 0px 12px #00ACE6; }
585. }
586.
587. @-moz-keyframes pulse {
588. 0% { box-shadow: 0px 0px 4px #00ACE6; }
589. 100% { box-shadow: 0px 0px 12px #00ACE6; }
590. }
591.
592. @keyframes pulse {
593. 0% { box-shadow: 0px 0px 4px #00ACE6; }
594. 100% { box-shadow: 0px 0px 12px #00ACE6; }
595. }
596.
597. .buttons:hover {
598. background-color: #BBB;

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


599. background-image: -webkit-linear-gradient(top, #DDD, #AAA);
600. background-image: -moz-linear-gradient(top, #DDD, #AAA);
601. background-image: -o-linear-gradient(top, #DDD, #AAA);
602. background-image: linear-gradient(top, #DDD, #AAA);
603. 'box-shadow: 0px 0px 4px #0001E6;'
604. color: yellow;
605. }
606.
607. .buttons:active { background: #CCC; }
608. </style>
609.
610. <a href="http://www.coursesweb.net" title="Cursuri Programare Web Development"
class="buttons">www.CoursesWeb.net</a>
611. <a href="http://www.site-ul-tau.net/ajax/" title="Curs Ajax" class="buttons">Curs
Ajax</a>
612. Rezultat:
613. www.CoursesWeb.net Curs Ajax

614. Buton 3D-Umbra


615. <style type="text/css">
616. /* http://www.site-ul-tau.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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


656. <a href="http://www.coursesweb.net" title="Cursuri Programare Web Development"
class="buttons">www.CoursesWeb.net</a>
657. <a href="http://www.site-ul-tau.net/curs_css/" title="Curs CSS" class="buttons">Curs
CSS</a>
658. Rezultat:
659. www.CoursesWeb.net Curs CSS

660. Buton Rotunjit Stanga


661. <style type="text/css">
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.
692. .buttons:hover {
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.site-ul-tau.net/html/" title="Curs HTML" class="buttons">Curs
HTML</a>
706. <a href="http://www.site-ul-tau.net/curs_css/" title="Curs CSS" class="buttons">Curs
CSS</a>
707. Rezultat:
708. Curs HTML Curs CSS

709. Buton Rotunjit Dreapta

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


710. <style type="text/css">
711. .buttons {
712. display: inline-block;
713. background-color: #ddd;
714. border: 1px solid #444;
715. background-image: -webkit-linear-gradient(top, #eee, #ccc);
716. background-image: -moz-linear-gradient(top, #eee, #ccc);
717. background-image: -o-linear-gradient(top, #eee, #ccc);
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.
727. .buttons:link, .buttons:visited, .buttons:hover, .buttons:active {
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);
733. border-color: #0000CC;
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.
741. .buttons:hover {
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);
747. text-decoration: none;
748. color: #ff1;
749. }
750.
751. .buttons:active { background: #08A009; }
752. </style>
753.
754. <a href="http://www.site-ul-tau.net/html/" title="Curs HTML" class="buttons">Curs
HTML</a>
755. <a href="http://www.site-ul-tau.net/curs_css/" title="Curs CSS" class="buttons">Curs
CSS</a>
756. Rezultat:
757. Curs HTML Curs CSS

758. Buton Inima-Sageata


759. <style type="text/css">
760. .buttons {
761. display: inline-block;
762. background-color: #ddd;
763. border: 1px solid #444;
764. background-image: -webkit-linear-gradient(top, #eee, #ccc);
765. background-image: -moz-linear-gradient(top, #eee, #ccc);
766. background-image: -o-linear-gradient(top, #eee, #ccc);
767. background-image: linear-gradient(top, #eee, #ccc);

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


768. border-radius: 10px;
769. -moz-border-radius: 10px;
770. -webkit-border-radius: 10px;
771. -khtml-border-radius: 10px;
772. padding: 6px 10px;
773. font-weight: bold;
774. }
775.
776. .buttons:link, .buttons:visited, .buttons:hover, .buttons:active {
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);
782. border-color: #0000CC;
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.
790. .buttons:hover {
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);
796. text-decoration: none;
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.site-ul-tau.net/" title="Cursuri Jocuri Filme"
class="buttons">www.site-ul-tau.net</a>
814. <a href="http://www.coursesweb.net/javascript/" title="JavaScript Courses"
class="buttons">JavaScript Course</a>
815. Rezultat:
816. www.site-ul-tau.net JavaScript Course

Diamant cu CSS
Doua forme tip diamant, create simplu cu un tag DIV si cateva proprietati
CSS.
Cod:
<style type="text/css">
#diamond {

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 20px solid #05ed08;
position: relative;
top: -50px;
}
#diamond:after {
content: "";
position: absolute;
left: -50px;
top: 20px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid #05ed08;
}
</style>

<div id="diamond"></div>
Rezultat:

Diamant 2

Cod:
<style type="text/css">
#diamond {
border-style: solid;
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-style: solid;
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:
<style type="text/css">
#tvscreen {
position: relative;
width: 200px;
height: 150px;

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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">site-ul-tau.net</div>
Rezultat:
site-ul-tau.net

Forma tip Clepsidra cu CSS


Forma tip Clepsidra creat cu un tag DIV si cateva proprietati CSS.
Cod:
<style type="text/css">
#clepsydra {
height: 0;
width: 120px;
border-bottom: 120px solid #05ed08;
border-top: 120px solid #05ed08;
border-left: 65px solid transparent;
border-right: 65px solid transparent;
border-radius: 25%;
-moz-border-radius: 25%;
-webkit-border-radius: 25%;
-khtml-border-radius: 25%;
}
</style>

<div id="clepsydra">Cursuri Online:<br/>site-ul-tau.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:
<style type="text/css">
/* http://css-tricks.com/examples/ShapesOfCSS/ */
#egg {
display:block;
width: 180px;
height: 240px;
background-color: #09fb09;

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


-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.site-ul-tau.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:
<style type="text/css">
#yinyang {
width: 100px; height: 50px;
background: #fff;
border-color: #000;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yinyang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #fff;
border: 18px solid #000;
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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


Forma de Inima creata cu un tag DIV si proprietati CSS (fara fisier cu imagine).
Cod:
<style type="text/css">
#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;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
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: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-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 Infinit
Insigna Panglica Blazon
Vapor

Cateva forme complexe create doar cu un singur DIV si proprietati CSS,


fara a folosi fisier cu imagine.

Forma 1

Cod:
<style type="text/css">

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


/* http://www.site-ul-tau.net/curs_css/ */
#shp1 {
height: 0;
width: 170px;
background: #b1b0fb;
position: relative;
border-bottom: 110px solid #08fb09;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
padding:0 3px;
}

#shp1:before {
content: "";
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-bottom: 28px solid #b1b0fb;
border-left: 14px solid transparent;
position: absolute;
bottom: 0;
left: -14px;
}

#shp1:after {
content: "";
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-bottom: 28px solid #b1b0fb;
border-right: 14px solid transparent;
position: absolute;
bottom: 0;
right: -14px;
}
</style>

<div id="shp1"><br/>Cursuri Online:<br/>http://www.site-ul-tau.net/</div>


Rezultat:

Cursuri Online:
http://www.site-ul-tau.net

Prezentare Mesaj

Cod:
<style type="text/css">
/* http://css-tricks.com/examples/ShapesOfCSS/ */
#talkbubble {
margin: 10px 25px;
width: 200px;
height: 89px;
background: #05fb08;
position: relative;
-moz-border-radius: 14px;
-webkit-border-radius:
14px; border-radius: 14px;
padding: 2px 5px;
}

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 28px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 26px solid #05fb08;
border-bottom: 13px solid transparent;
}
</style>

<div id="talkbubble"><br/>Cursuri Online:<br/>http://www.site-ul-tau.net/</div>


Rezultat:

Cursuri Online:
http://www.site-ul-tau.net

Insigna Panglica

Cod:
<style type="text/css">
#badgeribbon {
position: relative;
background: #08fb09;
height: 100px;
width: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
padding: 2px;
text-align: center;
}
#badgeribbon:before, #badgeribbon:after {
content: "";
position: absolute;
margin-top: 8px;
border-bottom: 70px solid #01fb02;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
top: 70px; left: -5px;
-webkit-transform: rotate(-140deg);
-moz-transform: rotate(-140deg);
-ms-transform: rotate(-140deg);
-o-transform: rotate(-140deg);
}
#badgeribbon:after {
left: auto;
right: -5px;
-webkit-transform: rotate(140deg);
-moz-transform: rotate(140deg);
-ms-transform: rotate(140deg);
-o-transform: rotate(140deg);
}
</style>

<div id="badgeribbon"><br/>site-ul-tau</div>
Rezultat:

site-ul-tau

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


Infinit

Cod:
<style type="text/css">
#infinity {
position: relative;
width: 212px;
height: 100px;
}
#infinity:before, #infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid blue;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>

<div id="infinity"></div>
Rezultat:

Blazon

Cod:
<style type="text/css">
#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%;

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:
<style type="text/css">
#ship {
margin:30px 0 5px 20px;
position: relative;
width: 200px;
border-width: 50px 28px 0;
border-style: solid;
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-style: solid;
border-color: transparent transparent #bbcdef;
}

/* Content */
#ship div{
position:absolute;
top:-30px;
}
</style>

<div id="ship"><div>www.CoursesWeb.net</div></div>
Demo:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- 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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


</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 site-ul-tau.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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<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
test-script.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.site-ul-tau.net/ ca adresa URL a catalogului care contine
scripturile dumneavoastra PHP, puteti obtine accesul la scriptul dumneavoastra
prin intermediul adresei URL http://www.site-ul-tau.net/test-script.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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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";
?>

In browser va aparea:

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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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;
?>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


In browser va aparea:

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';

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


$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($var3);
echo '<br />'.gettype($var4);
echo '<br />'.gettype($var[5]);
echo '<br />'.gettype($var6);
?>

In browser va aparea:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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 :

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<?php
$nume = "Cosmin";
$castigator = $nume;
echo $castigator;
?>
Rezultatul afisat va fi:
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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


$_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)

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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'

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.site-ul-tau.net/script.php?nume=Popescu

iar in cazul folosirii metodei POST, in URL va aparea doar:

http://www.site-ul-tau.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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" />

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<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>
In browser va aparea:

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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.site-ul-tau.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.site-ul-tau.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 Echivalentul codificat
special URL
. *%2e
> %3e
^ %5e
~ %7e
+ %2b
, %2c
/ %2f
: %3a
; %3b

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


%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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.
- Calea care constituie radacina arborelui
DOCUMENT_ROOT
catalogului cu documente al serverului Web.
- Returneaza ersiunea protocolului CGI
GATEWAY_INTERFACE (Common Gateway Interface) folosit de
serverul Web.
HTTP_ACCEPT - Continutul antetului HTTP Accept.
- Continutul antetului HTTP Accept-Charset:,
HTTP_ACCEPT_CHARSET care specifica seturile de caractere ntelese de
client.
- Continutul antetului HTTP Accept-Encoding:,
HTTP_ACCEPT_ENCODIN
care specifica tipurile de continuturi ntelese
G
de client.
HTTP_ACCEPT_LANGUA - Continutul antetului HTTP Accept-Language:,
GE care specifica limbajele preferate de client.
- Continutul antetului HTTP Connection:, care
HTTP_CONNECTION
indica optiunile solicitate de client.
- Continutul antetului HTTP Host:, care indica
HTTP_HOST numele de gazda, folosit de client la
prezentarea cererii.
- Adresa URL a paginii Web care a trimis
HTTP_REFERER
clientul la pagina curenta.
- Continutul antetului HTTP user-Agent, care
HTTP_USER_AGENT
indica tipul si versiunea browser-ului folosit.
- Calea de executie asociata cu mediul
PATH
serverului.
- Sirul de interogare, daca exista, prin care a
QUERY_STRING
fost accesata pagina.
REMOTE_ADDR - Adresa IP a clientului (vizitatorului).
REMOTE_HOST - Numele de gazda al clientului.
- Adresa portului clientului de unde a pornit
REMOTE_PORT
cererea.
- Metoda de cerere HTTP folosita; de exemplu,
REQUEST_METHOD
GET, POST, PUT sau HEAD.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- URI folosit pentru accesul la pagina curenta.
REQUEST_URI 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.
- Adresa de e-mail a administratorului
SERVER_ADMIN
serverului Web.
- Numele de gazda asociat serverului Web
SERVER_HOST
care prelucreaza cererea.
- Portul folosit de serverul Web pentru
SERVER_PORT
comunicatii.
- Numele si versiunea protocolului prin
SERVER_PROTOCOL
intermediul caruia s-a executat cererea.
- Sirul care identifica versiunea serverului Web
SERVER_SIGNATURE si numele de gazda folosit pentru prelucrarea
cererii.
- Sirul care identifica programul server Web si
SERVER_SOFTWARE
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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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);

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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
Rezultat
fortata
(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;

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


echo "<br />$y";
?>
Rezultatul afisat va fi:
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
floatval() tip dublu.
- Trateaza argumentul ca fiind de
intval()
tip ntreg.
- Trateaza argumentul ca fiind de
strval()
tip 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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


$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("site-ul-tau.net", "w");

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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;
echo gettype($var1); // integer

$var2 = "8";
echo gettype($var2); // string

$var3 = array(8=>'http://www.site-ul-tau.net');
echo gettype($var3); // array

$var4 = true;
echo gettype($var4); // 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.site-ul-tau.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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<?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';
}
?>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<?php
$aray = array('site'=>'www.site-ul-tau.net', 'php'=>'tutoriale');
print_r($aray); // Array ( [site] => www.site-ul-tau.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.site-ul-tau.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.site-ul-
tau.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.site-ul-
tau.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.site-ul-tau.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;
}
}

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


// 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)

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- Afiseaza informatii detaliate despre variabila din parametru, cum ar fi: tipul ei,
numarul de elemente si valoarea (valorile) din ea.

<?php
$aray = array('key'=>'test', 'php'=>'functii');
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
$aray = array('key'=>'test', 'php'=>'functii');
$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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


$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.

Operatori logici
Operator Descriere
- TRUE daca valoarea lui $a este mai mica dect
$a < $b
valoarea lui $b.
- TRUE daca valoarea lui $a este mai mare dect
$a > $b
valoarea lui $b.
- TRUE daca valoarea lui $a este mai mare sau egala cu
$a >= $b
valoarea lui $b
- TRUE daca valoarea lui $a este mai mica sau egala cu
$a <= $b
valoarea lui $b
- TRUE daca valoarea lui $a este egala cu valoarea lui
$a = $b
$b.
- TRUE daca $a si $b sunt identice; cu alte cuvinte, daca
$a == $b
$a si $b au acelasi tip si aceeasi valoare
- TRUE daca valoarea lui $a este diferita de valoarea lui
$a != $b
$b
$a !== - TRUE daca $a si $b nu sunt identice; cu alte cuvinte,
$b daca $a si $b nu sunt de acelasi tip si aceeasi valoare
$x AND
- TRUE daca att $x, ct si $y sunt adevarate
$y
$x && $y - TRUE daca att $x, ct si $y sunt adevarate.
- TRUE daca minimum una din expresiile $x sau $y este
$x OR $y
adevarata.
- TRUE daca minimum una din expresiile $x sau $y este
$x || $y
adevarata.
$x XOR - TRUE daca numai una din expresiile $x sau $y este
$y adevarata.
!$x - TRUE daca $x este FALSE
NOT $x - TRUE daca $x este FALSE

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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";

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


}
?>
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 numar mai mare decat 100";
}
elseif ($numar > 10) {
echo "Acesta este un numar mai mic decat 100, dar mai mare decat 10";
}
elseif ($numar > 1) {
echo "Acesta este un numar mic";
}
else {
echo "Acesta este un 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,

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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 "case-urile" 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 = 'site-ul-tau';
switch($site) {
case 1:
echo 'php.net';
break;
case 'coursesweb':
echo 'http://coursesweb.net';
break;
case 'site-ul-tau':

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


echo 'www.site-ul-tau.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 valoare-TRUE.
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 :

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.";
}
?>
Rezultatul afisat va fi:
Suma intregilor de la 1 la 1 este 1
Suma intregilor de la 1 la 2 este 3
Suma intregilor de la 1 la 3 este 6
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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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 :

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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");

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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"][2];
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["firstLine"][1];


echo "<br />".$multiDimArray["nextLine"][1];
echo "<br />".$multiDimArray["firstLine"][2];
echo "<br />".$multiDimArray["firstLine"]["a"];
echo "<br />".$multiDimArray["nextLine"]["b"];
?>

Rezultatul afisat va fi urmatorul :

10
20

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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]";

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


}
?>
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
$limbaje = array(0=>"Perl", 1=>"PHP", 2 =>"Python");
$cauta = PHP; // se cauta in tabloul $limbaje valoarea $cauta
$limita = count($limbaje);
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'=>'site-ul-tau.net', 'num'=>8]; // array asociativ

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- 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
$limbaje = array(0=>"Perl", 1=>"PHP", 2 =>"Python");
$cauta = PHP; // se cauta in tabloul $limbaje valoarea $cauta
$limita = count($limbaje);
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
$limbaje = array(0=>"Perl", 1=>"PHP", 2 =>"Python");
$scurt = 0;
$limita = count($limbaje);
for ($i = 0; $i < $limita; $i++) {

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


$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));

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


// 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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<?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)

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- 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: array("a"=>1, 3);

echo $re; // 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)

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- 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; b
?>

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: array(3, 4);

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


echo $re; // 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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<?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
$aray = array('c', "b"=>'xy', 'pm', "mp"=>'de');
arsort($aray);

// $aray va deveni: array('c', "mp"=>'de', 'pm', "b"=>'xy')


?>

24. count(array)

- Returneaza numarul de elemente din "array"

<?php
$aray = array('c', "b"=>'xy', 'pm', "mp"=>'de');
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
$aray = array('php', "free"=>'tutorial', 'mysql', "mp"=>'curs');
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".

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<?php
$aray = array('www', 'site-ul-tau', 'net');
$sir = implode('.', $aray);

echo $sir; // www.site-ul-tau.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
$aray = array('php', "free"=>'tutorial', 'mysql', "mp"=>'curs');
if (in_array('tutorial', $aray)) {
// Se executa ce se vrea
}
?>

29. key(array)

- Returneaza cheia elementului curent la care se afla pointerul

<?php
$aray = array('php', "free"=>'tutorial', 'mysql', "mp"=>'curs');
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',

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


"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 elemente returneaza FALSE.

<?php
$aray = array('php', "free"=>'tutorial', 'mysql', "mp"=>'curs');
echo next($aray); // tutorial
?>

34. prev(array);

- Muta pointerul din "array" inapoi cu un element si returneaza valoarea, daca


nu are elemente returneaza FALSE.

<?php
$aray = array('php', "free"=>'tutorial', 'mysql', "mp"=>'curs');
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 elemente returneaza FALSE.

<?php
$aray = array('php', "free"=>'tutorial', 'mysql', "mp"=>'curs');
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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<?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
$aray = array('li'=>'Php', "free"=>'tutoriale', 'MySQL', "mp"=>'curs');
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
$aray = array('li'=>'Php', "free"=>'tutoriale', 'MySQL', "mp"=>'curs');
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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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
$limbaje = array(10=>"Perl", 20=>"PHP", 21=>"Python");
$curent = current($limbaje);
echo "<br />functia current() a returnat $curent";
$urmator = next($limbaje);
echo "<br />functia next() a returnat $urmator";
$urmator = next($limbaje);
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
$limbaje = array(10=>"Perl", 20=>"PHP", 21=>"Python");
$curent = current($limbaje);
$cheie = key($limbaje);

echo "<br />functia current() a returnat $curent";


echo "<br />functia key() a returnat $cheie";
?>
Iata datele de iesire ale exemplului:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:

Chei
Valoare
e
- Componenta cheie a perechii cheie-valoare
0
curenta
- Componenta valoare a perechii cheie-
1
valoare curenta
- Componenta cheie a perechii cheie-valoare
key
curenta
valu - Componenta valoare a perechii cheie-
e 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
$limbaje = array(10=>"Perl", 20=>"PHP", 21=>"Python");
$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";
?>
Iata datele de iesire ale exemplului:
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().

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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
$limbaje = array(10=>"Perl", 20=>"PHP", 21=>"Python");
list($cheie, $valoare) = each($limbaje);
echo "<br />cheie = $cheie, valoare = $valoare";
$urmator = next($limbaje);
echo "<br />urmator = $urmator";
?>
Iata datele de iesire ale exemplului:
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:
$limbaje = array(10=>"Perl", 20=>"PHP", 21=>"Python");
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) {

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:

$limbaje = array(10=>"Perl", 20=>"PHP", 21=>"Python");

Funct
Operatia efectuata Rezultat
ie
0 => PHP
- Sortarea unui tablou n functie de valoare, in ordine 1 => Perl
sort()
alfabetica, fara sa se tina cont de cheile initiale 2 =>
Python
20 =>
PHP
- Sortarea unui tablou n functie de valoare, in ordine
asort 10 =>
alfabetica, pastrand corelarea initiala dintre valori si cheile
() Perl
corespunzatoare
21 =>
Python

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


0 =>
- Sortarea unui tablou n functie de valoare, in ordine invers Python
rsort
alfabetica, fara sa se tina cont de cheile initiale 1 => Perl
2 => PHP
21 =>
Python
- Sortarea unui tablou n functie de valoare, in ordine invers
arsor 10 =>
alfabetica, pastrand corelarea initiala dintre valori si cheile
t Perl
corespunzatoare
20 =>
PHP
10 =>
Perl
20 =>
ksort - Sortarea unui tablou n functie de cheie, in ordine ascendenta
PHP
21 =>
Python
21 =>
Python
krsor - Sortarea unui tablou n functie de cheie, in ordine 20 =>
t descendenta 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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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
// 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 FOR


for($i=0; $i<$nr_elm; $i++) {
// Se adauga in tabel coloanele
$tabel_html .= '<td>' .$aray[$i]. '</td>';

// Daca restul impartirii lui ($i+1) la numarul de coloane stabilit e 0


// Adauga un nou rand in tabel
if ((($i+1) % $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);

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


}

// Se afiseaza tabelul obtinut


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
// Matricea cu datele ce vor fi afisate in tabel
$aray = array('a'=>'val1', 'b'=>'val2', 3=>'val3', 'z'=>'... val_n');

// 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 (count($aray) > 0) {
// Se creaza codul pt. inceputul tabelului HTML si al primului rand
$tabel_html = '<table border="1"><tr>';

// Se parcurge matricea cu FOREACH

$i = 0; // Indice pt. rand nou


foreach($aray as $key => $val) {
// Se adauga in tabel coloanele
$tabel_html .= '<td>' .$val. '</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 FOREACH) 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);
}

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


// Se afiseaza tabelul obtinut
echo $tabel_html;
?>

- Toate aceste exemple vor afisa urmatorul tabel:

val
val2
1

val ...
3 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;
?>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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);

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<?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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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".

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<?php
echo abs(-7.8); // 7.8 (double /float)
echo abs(3); // 3 (integer)
echo abs(-5); // 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'); // 18
echo bindec('1000'); // 8
?>

4. ceil(nr)

- Returneaza valoarea rotunjita a lui "nr" la urmatorul (mai mare) intreg.

<?php
echo ceil(7.8); // 8
echo ceil(5); // 5
echo ceil(-2.3); // -2
echo ceil(1.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); // 11111111111111111111111111111011

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


echo decbin(88); // 1011000
?>

7. dechex(nr)

- Returneaza un sir cu valoarea hexazecimala a numarului "nr".

<?php
echo decbin(-5); // fffffffb
echo decbin(88); // 58
?>

8. decoct(nr)

- Returneaza un sir cu valoarea octala a numarului "nr".

<?php
echo decbin(-5); // 37777777773
echo decbin(88); // 130
?>

9. floor(nr)

- Returneaza valoarea rotunjita a lui "nr" la anteriorul (mai mic) intreg.

<?php
echo floor(7.8); // 7
echo floor(5); // 5
echo floor(-2.5); // -3
echo floor(1.2); // 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'); // 238
echo hexdec('3fe'); // 1022
?>

12. hypot(c1, c2)

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- 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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<?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(); // 3.1415926535898
echo M_PI; // 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); // 8
echo round(5); // 5
echo round(-2.5); // -3
echo round(1.2); // 1
?>

24. sin(radian)

- Returneaza valoarea sinus a gradelor de cerc specificate la "radian".

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<?php
echo sin(30); // -0.98803162409286
echo sin(90); // 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); // -6.4053311966463
echo tan(90); // -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"; // E un numar si
are valoarea: 10.666666666667
?>

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", 'site-ul-tau', 'net'); // site-ul-tau - net

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


// 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); // 15

// Apeleaza $func2
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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


$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.site-ul-tau.net'); // Argumentul cu indice 2 e:
www.site-ul-tau.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.site-ul-tau.net'); // Array ( [0] => 1 [1] =>
tutoriale [2] => www.site-ul-tau.net )
?>

7. function_exists("function")

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- 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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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;
}
echo "Suma este ". Suma();
?>
- 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'];
}
echo "Suma este ". Suma();
?>
$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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<?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;
}

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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 pass-by-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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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'); // seteaza timpul zonal pt Romania
(Bucuresti)

// 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');

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


?>
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():

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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';


?>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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
- Returneaza caracterul avnd codul ASCII dat de
chr(/n)
"n"
dechex(n - Returneaza valoarea hexazecimala echivalenta cu
) valoarea zecimala data de "n"
decoct(n - Returneaza valoarea n octal echivalenta cu
) valoarea zecimala data de "n"
hexdec(n - Returneaza valoarea zecimala echivalenta cu
) valoarea hexazecimala data de "n"
octdec(n - Returneaza valoarea zecimala echivalenta cu
) valoarea n octal data de "n"
- Returneaza codul ASCII echivalent caracterului
ord(c)
"c"
Iata un exemplu de utilizare a functiei ord() pentru a determina codul ASCII
corespunzator unui anumit caracter:
<?php
$c = "A";
$n = ord($c);

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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;

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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
Specificato
Descriere
r de tip
- Trateaza argumentul ca pe un ntreg si l
b
afiseaza ca valoare binara
- Trateaza argumentul ca pe un ntreg si
c afiseaza caracterul cu aceeasi valoare ASCII ca
si argumentul
- Trateaza argumentul ca pe un ntreg si l
d
afiseaza ca valoare zecimala
- Trateaza argumentul ca pe o valoare de tip
f double si l afiseaza ca valoare cu virgula
mobila
- Trateaza argumentul ca pe un ntreg si l
o
afiseaza ca pe o valoare scrisa n octal
s - Trateaza argumentul ca pe un sir si l afiseaza
- Trateaza argumentul ca pe un ntreg si l
x afiseaza ca numar hexazecimal, cu litere scrise
cu minuscule
- Trateaza argumentul ca pe un ntreg si l
X 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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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).

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.site-ul-tau.net'; // http://www.site-ul-tau.net
?>

6. explode('sep', "sir")

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- 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); // Array ( [0] => Sir de test [1] => cu subsiruri [2] =>
separate de [3] => virgula. )
?>

7. html_entity_decode("sir")

- Decodeaza entitatile html din "sir". E opusul lui "htmlentities()"

<?php
$sir = 'Sir de test, cu entitati &copy; &lt;b&gt;html&lt;/b&gt;.';

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 &quot;
&amp; - &lt;b&gt;html&lt;/b&gt;.
?>

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.site-ul-tau.net';

echo md5($sir); // 7760a752458ff3168ff1a2d0ded94082


?>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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); // Test string, tutorial
php, functii pt. string.
?>

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")

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- Amesteca aleator caracterele din "sir".

<?php
$sir = 'Site www.site-ul-tau.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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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
$sir = 'www.site-ul-tau.net';

echo stripos($sir, 'site-ul-tau'); // 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')

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- 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
$sir = 'www.site-ul-tau.net';

echo stristr($sir, 'mar'); // site-ul-tau.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'); // HP, curs gratuit (incepe de la H, deoarece 'p' nu


e in $sir, fiind diferit de P)
?>

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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<?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")

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- 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 = 'site-ul-tau.net, web site';

echo ucwords($sir); // site-ul-tau.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); // Acum $sir va fi "Sir test <br /> preluat dintr-un <br
/> camp textarea."
?>

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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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);
echo "<br /> Lungimea sirului este: $n";

$trim =chop($s); // Elimina spatiile albe din partea dreapta a sirului


$n = strlen($trim);
echo "<br /> Lungimea sirului este: $n";

$trim = ltrim($s); // Elimina spatiile albe din partea stanga a sirului


$n = strlen($trim);
echo "<br /> Lungimea sirului este: $n";

$trim = rtrim($s); // Elimina spatiile albe din partea dreapta a sirului


$n = strlen($trim);
echo "<br /> Lungimea sirului este: $n";

$trim = trim($s); // Elimina spatiile albe din ambele parti a sirului


$n = strlen($trim);
echo "<br /> Lungimea sirului este: $n";
?>
Scriptul de mai sus va afisa:
Lungimea sirului este: 36
Lungimea sirului este: 27
Lungimea sirului este: 27
Lungimea sirului este: 27
Lungimea sirului este: 18

Urmatorul tabel prezinta Functiile PHP de eliminare a caracterelor din siruri:


Functii PHP de eliminare a caracterelor din siruri

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


Functi
Descriere
e
- Returneaza valoarea lui 's', eliminnd spatiile albe
chop(
de la extremitatea din dreapta a sirului. Similar cu
s)
rtrim()
ltrim( - Returneaza valoarea lui 's', eliminnd spatiile albe
s) de la extremitatea din stnga a sirului
- Returneaza valoarea lui 's', eliminnd spatiile albe
rtrim(
de la extremitatea din dreapta a sirului. Similar cu
s)
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";
?>
Scriptul de mai sus va afisa:
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, - Executa o comparatie fara sensibilitate la diferenta
s2) 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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


dect 's2', respectiv 0 n celelalte cazuri.
- Executa o comparatie cu sensibilitate la diferenta ntre
majuscule si minuscule. Returneaza o valoare mai mica
strcmp(s1, s2) 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.
- Executa o comparatie fara sensibilitate la diferenta
ntre majuscule si minuscule. La comparatie sunt luate
strncasecmp(s1, n considerare un numar de 'n' caractere. Returneaza o
s2, n) 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.
- Executa o comparatie cu sensibilitate la diferenta ntre
majuscule si minuscule. La comparatie sunt luate n
strncmp(s1,s2, considerare un numar de 'n' caractere. Returneaza o
n) 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.
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";
?>
Scriptul de mai sus va afisa:
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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


Functii PHP de extragere si cautare
Functie Descriere
- Returneaza toate sirurile 's1' de la prima aparitie a
sirului 's2' si pna la sfrsit. Daca 's1' nu este gasit,
strchr(s1,s2)
functia returneaza FALSE. Functia strstr() executa
aceeasi operatie
- Returneaza toate sirurile 's1' de la prima aparitie a
sirului 's2' si pna la sfrsit. Daca 's1' nu este gasit,
stristr(s1,s2) functia returneaza FALSE. Sirurile 's1' si 's2' sunt
comparate fara a se tine cont daca literele sunt majuscule
sau minuscule
- Returneaza pozitia (nr. intreg) a primei aparitii a sirului
strpos(s1,s2) 's2' n 's1'.Daca 's2' nu este gasit, functia returneaza
FALSE
- Returneaza toate sirurile 's1' de la ultima aparitie a
sirului 's2' si pna la sfrsit. Daca 's1' nu este gasit,
strrchr(s1,s2)
functia returneaza FALSE. La comparatie este folosit
numai primul caracter al sirului 's2'
- Returneaza toate sirurile 's1' de la prima aparitie a
sirului 's2' si pna la sfrsit. Daca 's1' nu este gasit,
strstr(s1,s2)
functia returneaza FALSE. Functia strchr() executa
aceeasi operatie
substr(s, starf) - Returneaza portiunea sirului 's' specificata de indexul
substr(s, start, ntreg 'start' respectiv de indexurile 'start' si 'lung'. Prima
lung) pozitie a sirului este pozitia 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";

$s = "the cat on the mat near the bat";


$b = "at";
$n = strchr($s, $b);
echo "<br /> strchr(\"$s\", \"$b\"): $n";

$s = "the cat on the mat near the bat";


$b = "at";
$n = strrchr($s, $b);
echo "<br /> strrchr(\"$s\", \"$b\"): $n";

$s = "the cat on the mat near the bat";


$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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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);

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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 [^a-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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


{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
- Executa o identificare cu o expresie regulata (anulata
ereg
incepand cu versiunea PHP 5.3)
- nlocuieste un sub-sir care corespunde unei expresii
ereg_repla
regulate (anulata incepand cu versiunea PHP 5.3 - in
ce
locul ei poate fi folosita preg_replace)
- Executa o identificare cu o expresie regulata insensibila
eregi la diferenta ntre majuscule si minuscule (anulata
incepand cu versiunea PHP 5.3)
- nlocuieste un sub-sir care corespunde unei expresii
eregi_repla regulate insensibile la diferenta ntre majuscule si
ce minuscule (anulata incepand cu versiunea PHP 5.3 -
in locul ei poate fi folosita preg_replace)
- Cauta in sir caracterele sau sablonul care se potriveste
preg_repla
cu expresia regulata din functie si o inlocuieste cu alte
ce
valori date
split - Divide un sir ntr-un tablou folosind o expresie regulata
(anulata incepand cu versiunea PHP 5.3 - in locul ei

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


poate fi folosita preg_split)
- Creaza o expresie regulata, insensibila la diferenta ntre
sql_regcas majuscule si minuscule, dintr-un sir care contine o
e 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 ([a-z0-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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- 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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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);

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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 sub-cataloagele 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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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
- Returneaza timpul de acces la fisier sub forma de amprenta
fileatime()
de timp UNIX.
- Returneaza timpul de modificare al i-nodului (structura de
filectime() 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
- Returneaza tipul fisierului, n speta "fifo", "char", "dir",
filetype()
"block", "link", "file" sau "unknown"
- Returneaza TRUE daca directorul specificat exista; n caz
is_dir()
contrar, returneaza FALSE
- Returneaza TRUE daca fisierul specificat exista; n caz
is_file()
contrar, returneaza FALSE
is_readabl - Returneaza TRUE daca fisierul specificat exista si poate fi
e() citit; n caz contrar, returneaza FALSE
is_writabl - Returneaza TRUE daca fisierul specificat exista si se poate
e() 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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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);
$result = date("m/d/Y H:i", $result);
echo "<br /> filectime(): $result";

$result = filemtime($filename);
$result = date("m/d/Y H:i", $result);
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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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
$fh = fopen("carte.txt", "rb");
if (!$fh) {
echo "Nu a fost deschis fisierul carte.txt.";
}
// 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.

Lucrul cu fisiere (2)


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) {
echo "Nu a fost deschis fisierul carte.txt.";

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


}
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) {
echo "Nu a fost deschis fisierul carte.txt.";
}
else {
$l = filesize($nume);
$s = fread($fh, $l);
echo "<br /> Citeste: $s";
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
$nume = "carte.txt";
$fh = @fopen($nume, "rb");
if (!$fh) {
echo "Nu a fost deschis fisierul carte.txt.";

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


}
else {
$s = fgets($fh, 126);
echo "<br /> Citeste: $s";
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
$nume = "carte.txt";
$fh = @fopen($nume, "rb");
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) {
echo "<br /> Citeste : $s";
}
?>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:

$fh = fopen("carte.txt", "rb");


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
$nume = "carte.txt";
$fh = @fopen($nume, "rb");
if (!$fh) {
echo "Fisieru carte.txt nu a putut fi deschis";
}
while (!feof($fh)) {
$s = fgets($fh, 256);
echo "<br /> Citeste : $s";
}
// Deruleaza la inceputul fisierului si reia redarea acestuia
rewind($fh);
while (!feof($fh)) {
$s = fgets($fh, 256);
echo "<br /> Citeste \$s : $s";
}
fclose($fh);
?>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<?php
$nume = "carte.txt";
$fh = @fopen($nume, "ab");
if (!$fh) {
echo "Nu a fost deschis fisierul carte.txt.";
}
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")

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- 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.site-ul-tau.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 = 'site-ul-tau.net/php-mysql/index.php';
$dir = dirname($url);

echo $dir; // site-ul-tau.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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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
$file = 'tutoriale.php';
$fo = fopen($file, "rb"); // Deschide fisierul, in modul de citire ("rb") si creaza
pointer-ul fisierului
fclose($fo); // Inchide pointer-ul, elibereaza memoria folosita
?>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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
$file = 'tutoriale.php';
$fo = fopen($file, "rb"); // 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); // Inchide pointer-ul, elibereaza memoria folosita


?>

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';
$fo = fopen($file, "rb"); // Deschide fisierul, in modul de citire ("rb")
$text = fgets($fo, 250); // 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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<?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")

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- 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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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")

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- 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']; // /www/htdocs


echo $path_parts['basename']; // index.php
echo $path_parts['extension']; // php
echo $path_parts['filename']; // 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 .. / ./ ../.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<?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()

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


- 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.";
?>

Lucrul cu fisiere (3)


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);

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


}
?>
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.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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():

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<?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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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".
Functia are urmatoarea forma:
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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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 "rwxr-x--x", utilizati functia mkdir() dupa cum urmeaza:

<?php
$cd = mkdir("lucru", 0751);

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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 "site-ul-tau", 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'] = "site-ul-tau";
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<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();
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<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>

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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: site-ul-tau
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: site-ul-tau
- 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 = "site-ul-tau";
$codificat = md5($user);
echo "<br /> user codificat = $codificat";

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


// 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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


<?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()

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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.
Functia are urmatoarea forma:

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) &amp;
"(ghilimele &quot; (numait cnd este specificat opiunea
duble) ENT_COMPAT sau ENT_QUOTES)
'(ghilimele &#39; (numai cnd este specificat opiunea
simple) ENT_QUOTES)
< (mai mic
&lt;
dect)
> (mai mare
&gt;
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().

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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 Descriere
- Date binare arbitrare, cu o lungime maxima de 65535
BLOB
octeti
- Un sir de caractere de lungime fixa, cu un maxim de m
CHAR(m) caractere, unde m este mai mic dect 256. Pentru
obtinerea lungimii dorite, se insereaza spatii finale
DATE - O data n format an-luna-zi; de exemplu 2008-10-15
- Un numar zecimal, reprezentat sub forma de sir cu "m"
DECIMAL cifre, din care "d" se afla la dreapta punctului zecimal.
DECIMAL(m,d) Daca "m" si "d" sunt omise, n mod prestabilit se vor
utiliza valorile 10 si 0
- Un numar cu virgula mobila, cu dubla precizie, avnd o
DOUBLE
latime de afisare egala cu "m" si un numar de "d" cifre
DOUBLE (m, d)
dupa virgula.
- Un numar cu virgula mobila, cu simpla precizie, avnd o
FLOAT(m,d) latime de afisare egala cu "m" si un numar de "d" cifre
dupa virgula
- Un ntreg pe 32 de biti. Daca se specifica atributul
INTEGER
UNSIGNED, domeniul de valori este cuprins ntre 0 si
INTEGER
4294967295; n caz contrar, domeniul este cuprins ntre
UNSIGNED
valorile -2147483648 si 2147483647
NUMERIC
- Similar cu DECIMAL
NUMERIC (m, d)
REAL
- Similar cu DOUBLE
REAL(m, d)
- Un ntreg pe 16 biti. Daca se specifica atributul
SMALLINT
UNSIGNED, domeniul de valori este cuprins ntre 0 si
SMALLINT
65535; n caz contrar, domeniul este cuprins ntre valorile
UNSIGNED
32768 si 32767
- Ora n format ora-minut-secunda; de exemplu, 08-20-
00. O valoare de tip data si ora, n format an-luna-zi ora-
TIME minut-secunda; de exemplu, 1976-01-05 00:00:00.
TIMESTAMP Aceasta reprezentare este similara celei returnate de
TIMESTAMP(m) 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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


"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 ntr-o 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,

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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;

Notiuni fundamentale despre


bazele de date 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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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:

= Egalitate

<> Inegalitate

!= Inegalitate, diferit de

< Mai mic decat

> Mai mare decat

<= Mai mic sau egal cu

=> Mai mare sau egal cu

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 Adevarat, daca valoarea lui x este cuprinsa ntre
AND z valorile lui y si z
Adevarat daca valoarea lui x este echivalenta cu
x LIKE y
modelul y
Adevarat daca valoarea lui x nu este echivalenta cu
x NOT LIKE y
modelul y
Adevarat daca valoarea lui x este un membru al listei
x IN (y1, y2) y1, y2. Lista poate contine unul, doi sau mai multi
membri
Adevarat daca valoarea lui x nu este un membru al
x NOT IN (y1, y2) listei y1, y2. Lista poate contine unul, doi sau mai
multi membri
x IS NULL Adevarat daca x are valoarea NULL
x IS NOT NULL Adevarat daca x nu are valoarea NULL

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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);

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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
- Numarul rndurilor din tabel care contin
count(coloana) o valoare diferita de NULL n coloana
specificata
count(distinct - Numarul valorilor distincte diferite de
coloana) NULL care apar n coloana specificata
- Valoarea mijlocie (medie) a coloanei
avg(coloana)
numerice specificate
min(coloana) - Valoarea minima din coloana specificata
- Valoarea maxima din coloana
max(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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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

Notiuni fundamentale despre


bazele de date 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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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
)
- Valoare aleatoare cu virgula, mai mare sau egala cu
rand(x)
zero si mai mica dect unu
- Valoarea -1, 0 sau 1, dupa cum valoarea lui x este
sign(x)
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
- Codul ASCII al octetului celui mai din stnga al
ascii(s)
sirului s
char(n) - Caracter al carui cod ASCII este n
concat(s1, - Concatenarea sirurilor s1 si s2; cu alte cuvinte, s2
s2) atasat la s1
- Sirul s, unde toate majusculele au fost
lcase(s)
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, - Pozitia primei aparitii a lui s1 n s2, respectiv zero
s2) daca s1 nu se gaseste n s2
ltrim(s) - Sirul s, cu eliminarea spatiilor de nceput
right(s,n) - Primii n octeti din sirul s, de la dreapta la stnga
rpad(s1,n,s - Sirul s1, completat la dreapta cu sirul s2 pna
2) cnd rezultatul are lungimea n
rtrim(s) - Sirul s, cu spatiile finale eliminate
space(n) - Un sir alcatuit din n spatii
substring(s, - Sub-sir al lui s, care ncepe de la pozitia m si care
m,n) are lungimea n
trim(s) - Sub-sir al lui s, cu spatiile initiale si finale eliminate
- Sirul s, cu toate minusculele convertite n
ucase(s)
majuscule

Functii MySQL de data si ora frecvent utilizate


Functie Descriere

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


dayofmont
- Ziua din luna a datei specificate (1-31)
h(d)
dayofweek( - Ziua din saptamna a datei specificate (1
d) =duminica, 2=luni,, 7=smbata)
dayofyear(
- Ziua din an a datei specificate (1-366)
d)
- Partea orelor din momentul de timp mentionat (0-
hour(t)
23)
- Partea minutelor din momentul de timp mentionat
minute(t)
(0-59)
month(d) - Luna datei specificate (1-12)
now() - Data si ora curenta
- Partea secundelor din momentul de timp mentionat
second(t)
(0-59)
week(d) - Saptamna din an a datei specificate (0-53)
- Partea anilor din momentul de timp mentionat
year(d)
(1000-9999)

Functii specifice MySQL


Functie Descriere
database() - Returneaza numele bazei de date deschise
get_lock(s,
- Obtine o blocare a bazei de date
n)
- Returneaza o suma de control a sirului s, calculata
md5(s)
dupa algoritmul MD5
password(s - Returneaza sirul s, criptat folosind algoritmul
) aplicat de MySQL parolei
release_loc
- Anuleaza blocarea unei baze de date
k(s)
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:

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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),

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


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


1 Marius faith name@domain.net

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


site-ul-
2 peace user@domain.com
tau
3 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.

Marim
Tip Descriere
e
Diferenta dintre "Tipurile de date pentru text" consta
in numarul maxim de caractere ce poate fi stocat intr-
Stocare text
un camp individual, modul de tratare a spatiilor, si
daca se poate seta o valoare initiala.
lungime Un camp cu lungime fixa de la 0 la 255 de
CHAR(lungime)
bytes caractere. Accepta o valoare initiala.
lungime
Camp cu lungime variabila de la 0 la 65,535
VARCHAR(lungime) + 1 or 2
caractere. Accepta o valoare initiala.
bytes
lungime
TINYTEXT +1 Un sir cu lungime maxima de 255 characters
bytes
TEXT lungime Un sir cu o lungime maxima de 65,535
+2 caractere. Nu poate defini o valoare initiala.

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


Marim
Tip Descriere
e
bytes
lungime
Un sir cu o lungime maxima de 16,777,215
MEDIUMTEXT +3
caractere
bytes
lungime
Un sir cu o lungime maxima de
LONGTEXT +4
4,294,967,295 caractere
bytes
Aceste tipuri de date reprezinta numere in diferite
Stocare numere
forme.
Interval de la 128 la 127. Sau de la 0 la 255
TINYINT(lungime) 1 byte
unsigned
Interval de la 32,768 la 32,767. Sau de la 0
SMALLINT(lungime) 2 bytes
la 65,535 unsigned
MEDIUMINT(lungim Interval de la 8,388,608 la 8,388,607. Sau
3 bytes
e) de la 0 la 16,777,215 unsigned
Interval de la 2,147,483,648 la
2,147,483,647. Daca coloana este declarata
INT(lungime) 4 bytes
UNSIGNED, intervalul este de la 0 la
4,294,967,295
Interval de la 9,223,372,036,854,775,808 la
BIGINT(lungime) 8 bytes 9,223,372,036,854,775,807. Sau de la 0 la
18,446,744,073,709,551,615 unsigned
Numar mic cu virgula (cu zecimale).
FLOAT(lungime, Deoarece PHP va formata numerele in
4 bytes
decimals) functie de calcule, se recomanda sa folosesti
FLOAT fara parametri optionali.
DOUBLE(lungime,
8 bytes Numar mare cu zecimale
decimals)
Un tip DOUBLE care permite un numar fix de
lungime zecimale. Inainte de MySQL 5.0.3, tipul de
DECIMAL(lungime,
+ 1 or 2 date DECIMAL a fost stocat ca un sir, ca sa
decimals)
bytes nu poata fi folosit cu functii SQL, cum ar fi
SUM()
Stocare data si MySQL stocheaza data intr-un singur format: YYYY-
timp MM-DD
O data stocata ca YYYY-MM-DD. Intervalul
DATE 3 bytes
este de la 1000-01-01 la 9999-12-31
Data si ora, afisat in format YYYY-MM-DD
DATETIME 8 bytes
HH:MM:SS
Un timestamp (de obicei generat automat de
calculator). Poate contine valori ce reprezinta
TIMESTAMP 4 bytes 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

Copyright 2015, Departamentul de Informatica, Universitatea Tehnica din Cluj-Napoca


Marim
Tip Descriere
e
MySQL te lasa sa stochezi doua tipuri de liste
Stocare liste
predefinite (pot fi vazute ca echivalente pentru radio
predefite
butonul si caseta de verificare).