Proiectarea Paginilor WEB COMPLET

PROIECTAREA PAGINILOR WEB

Limbajul HTML
CUPRINS
CUPRINS ................................................................................................................................................25
Noțiuni generale ....................................................................................................................................26
Limbajul HTML .......................................................................................................................................27
Culori .................................................................................................................................................27
Stiluri pentru blocuri de text ...............................................................................................................28
Configurarea fonturilor.......................................................................................................................28
Familia fontului ..............................................................................................................................28
Marimea fontului ...........................................................................................................................29
Blocuri de text ....................................................................................................................................29
Blocuri de titlu....................................................................................................................................29
Trasarea liniilor ..................................................................................................................................30
Liste ...................................................................................................................................................30
Liste ordonate ................................................................................................................................31
Lista de definitii ..............................................................................................................................31
Definirea culorilor pentru un tabel .....................................................................................................33
Pagina cu legaturi ...............................................................................................................................34
Formulare ..........................................................................................................................................35
Interactivitatea paginilor web.........................................................................................................35
Radiobutoane ....................................................................................................................................38
Casete de valitare sau Checkbox .........................................................................................................38
Casete de fisiere.................................................................................................................................39
Liste de selecție..................................................................................................................................39
Câmpuri de editare multilinie .............................................................................................................40
Cadre .................................................................................................................................................42
Stiluri dedicate ...............................................................................................................................43
Clase de stiluri ....................................................................................................................................44
Stiluri identificate ...........................................................................................................................45
25
Noțiuni generale
Există mai multe metode de acces la informația stocată pe un calculator prin intermediul
rețelei internet.
FTP = file transfer protocol, folosit in general pentru transferul de fișiere.
E-Mail = serviciul de poștă electonică
NEWS = serviciul de știri
WWW = world wide web
www utilizeaza tehnologia client-server, care constă din urmatoarele :
1 calculator, numit client, formuleaza o cerere. Cererea este expediată unui server.
Cererea parcurge un mediu până la server. Serverul analizează cererea, o execută, formulează
răspunsul și îl trimite înapoi clientului. Răspunsul parcurge mediul de transmitere către client.
Clientul receptionează răspunsul.
Pentru a comunica între ele, două calculatoare folosesc un sistem de reguli ce formează
un protocol. Serviciul www utilizează ca protocol de comunicare între client și server http://
(hypertext transfer protocol).
Hypertext reprezintă un text îmbogățit ce conține text obișnuit, precum și etichete
pentru formatarea textului și incapsularea altor tipuri de informatii, ca legaturi catre alte resurse,
sunete, imagini s.a.m.d.
Hypertextul este salvat in fisiere cu extensia .html
Limbajul care descrie hypertextul este asadar HTML (HYPERTEXT MARKUP
LANGUAGE).
Un calculator din reteaua internet poate fi identificat in mod unic prin intermediul unui
nume, sau adresa. Informatia care circula intre calculatoarele interconectate este incapsulata in
pachete.
Pachetele contin adresa expeditorului și adresa destinatarului, informația propriuzisă,
precum și numele aplicației de pe server care va primi cererea spre rezolvare.
Rețeaua internet dispune de mijloace de dirijare a pachetelor astfel încât acestea să
ajungă la destinaîie. Unul dintre mecanismele de dirijare se numeste IP (internet protocol).
Paginile web, adică paginile obținute prin vizualizarea pe calculatorul client, formează un
site web.
Prima pagină a unui site web mai este cunoscută și sub numele de HomePage. Prima
pagină trebuie să descrie informațiile conținute pe site, să prezinte o hartă a site-ului și în
principiu să fie placută ca aspect.
Numim Browser web aplicația de pe calculatorul client în care vizualizăm site-ul.
Numim server web o aplicație care rulează continuu pe un calculator central și care
este capabilă să răspundă în permanență cererilor clientului.
Un utilizator al serviciului www poate solicita vizualizarea prin intermediul browserului
a unei pagini web ce poate fi localizată pe un calculator aflat oriunde în lume. Aceasta se
face prin adresa URL atașată (Uniform Resource Locator).
URL identifică metoda de lucru, numele calculatorului, numele paginii și eventualii
parametri necesari vizualizării paginii.
Pentru scrierea unei pagini statice avem nevoie de un editor de texte, care poate fie
Notepad, EditPlus, WordPad etc. și de un browser web care să vizualizeze paginile (Internet
Explorer, Mozilla, Opera etc.).
26
Limbajul HTML
Exemplu.html
<html>
<head>
<title>
Exemplu o
</title>
</head>
<body>
Salut
</body>
</html>
Un fisier .html este format dintr-o succesiune de marcaje. Marcajele cuprind blocuri.
Există marcaj pentru începutul blocului, respectiv pentru sfârșitul blocului.
Marcajul de sfârșit începe cu caracterul /
Cel mai cuprinzator marcaj este <html>, compus din două blocuri. Primul identificat de
marcajul <head> și cel de-al doilea de <body>.
Marcajul <head> include informații generale despre pagina curentă. In cazul exemplului
nostru, pagina va avea un titlu introdus de marcajul <title>.
Acest titlu va fi vizualizat pe prima linie a ferestrei browserului. Toate informatiile
cuprinse în blocul <body> vor fi vizualizate în browser.
Obs.: Marcajele de bloc pot contine și atribute, care sunt date sub forma perechilor nume
= valoare , atributele fiind separate prin spatiu.
Intr-un fisier .html caracterele obișnuite folosite în editarea unui text nu sunt
neapărat recunoscute. Astfel, caracterul enter nu are nici un fel de semnificație pentru browserul
web.
<body>
Prima linie
A doua linie
A treia linie
<body>
Rezultatul va fi :
Prima linie A doua linie A treia linie
Pentru a separa liniile trebuie folosit marcatorul <br> (break)
<body>
Prima linie <br> A doua linie<br> A treia linie
<body>
Culori
In html o culoare poate fi precizată in doua feluri: printr-un nume asociat culorii (html
pune la dispozitie 16 nume de culori, intre care "aqua", "black", "blue", "grey", "lime",
"maroon", "navy", olive, purple, red, silver, white, yellow), fie printr-o succesiune de 6 caractere
precedate de semnul diez.
Pe ecranul unui calculator culorile sunt obținute prin combinarea a 3 culori de baza :
RGB.
Cantitatea de culoare din fiecare poate avea valori cuprinse intre 00 și FF. Se obțin
27
astfel câteva milioane de culori. Spre exemplu, #5C73F1 reprezintă o culoare validă.
#00FF00 = verde
Atributul care dă culoarea de fond a întregii pagini web este atributul <bgcolor> =
background color.
<body bgcolor = "red"> Prima linie <br>
A doua linie<br> A treia linie
<body>
Culoarea textului poate fi setată folosind atributul text=, valoarea acestui atribut fiind
o culoare validă
(exemplu text="#536189").
Stiluri pentru blocuri de text

Caractere îngroșate (aldine). Dacă dorim să scriem un text cu caractere aldine, atunci îl
vom cuprinde între etichetele <b>...</b>.
Dacă dorim ca un text sa fie scris cu caractere mărite, îl vom cuprinde intre etichetele
<big>...</big>, iar cu caractere micșorate, intre etichetele <small>...</small>.
Pentru caracterele cursive /italice, <i>....</i>
Pentru a insera secvențe de text aliniate ca indice, vom folosi etichetele <sub>...</sub>,
iar pentru alinierea ca exponent <sup>...</sup> (subscript / superscript).
Exemplu:
F(y) = (x1 + x2)2 – y3
F <sub>(y)</sub> = (x<sub>1</sub> + x<sub>2</sub>)<sup>2</sup> - y<sup>3</sup>
Daca dorim ca un text să fie scris cu caractere subliniate atunci va fi cuprins între
etichetele <u>...</u>.
Daca dorim ca un text sa fie scris cu caractere sectionate, va fi cuprins intre etichetele
<strike>...</strike>.
Configurarea fonturilor
Un font este caracterizat de următoarele atribute: culoare, familia fontului, marimea
fontului sau grosimea fontului.
Toate acestea pot fi stabilite prin atribute ale etichetei font. Textul pe care dorim să-l
supunem schimbării fontului va fi cuprins intre aceste etichete.
Culoarea este dată de atributul color.
Familia fontului
Exista 5 familii generice de fonturi, care sunt de regulă disponibile pe toate
calculatoarele. Acestea sunt :
Serif
Sans serif
Cursive
Monospace
Fantasy
Alte fonturi specifice pot fi utilizate doar dacă sunt instalate pe calculatorul client.
Spre exemplu :
Times
Helvetica
Arial și Courrier
Western
Atributul care stabileste familia fontului este "face".
Observatie :
Valoarea atributului "face" este recomandat a fi o listă de familii de stiluri în care pe
28
ultima poziție se află o familie generică.

Marimea fontului
Este data de atribtul size, cu valori intre 1 și 7, unde 1 este cel mai mic font iar 7 cel mai
mare.
Size="1"
In plus, putem folosi pentru size valori de genul "+1", "+2", ... determinând creșterea
dimensiunii fontului cu o unitate, 2 s.a.m.d. față de dimensiunea actuală, până la cel mult
valoarea 7, sau valori de genul "-1" etc., determinand scăderea dimensiunii fontului cu o unitate,
două s.a.m.d., până la cel puțin valoarea 1.
Grosimea, dată de atributul weight, avand valori: 100, 200 ... 900, unde 100 este cel mai
subțire, iar 900 cel mai gros font.
Exemplu:
<html>
<head>
<title> Exemplu 1
</title>
</head>
<body>
<font color="red"> Aceasta linie este scrisa cu rosu
</font><br>
<font face="Times Roman, sans serif"> Linie scrisa cu
Times Roman </font><br>
<font size="4"> Linie scrisa cu marimea 4 </font><br>
<font weight="400"> Linie scrisa cu grosimea 400
</font><br>
</body>
</html>
Blocuri de text
Modalitatea cea mai e ficientă de delimitare și de formatare a unui bloc de text este
folosirea delimitatorului <div> .... </div> (division).
Div are multiple atribute, intre care atributul align determina alinierea textului din cadrul
blocului.
Valorile posibile pentru align sunt :
Align="left"
Align="right"
Align="center"
Obs.:
Blocul div permite existenta altor blocuri div in interiorul său.
Blocul <p>...</p> ; paragraf ; și acesta permite atributul align cu aceleasi 3 valori, dar
spre deosebire de div, toate browserele introduc un spatiu înainte și după blocul paragrafului.
Blocuri de titlu
Intr-un text sunt necesare titluri de capitole, subcapitole, paragrafe s.a.m.d.
Acestea pot fi introduse cu ajutorul urmatoarelor etichete : <h1>, <h2>, <h3>, ... <h6> ;
(header).
29
<h1>......</h1>
și aceste blocuri acceptă align, <h1> permite scrierea cu caracterele cele mai mari și
cele mai groase, iar <h6> cu cele mai mici și mai subțiri.
Trasarea liniilor
Html permite trasarea liniilor orizontale cu ajutorul etichetei <hr> (horizontal row) care
are intre atribute align pentru aliniere, widht care permite alegerea lungimii liniei cu valori
posibile numere întregi reprezentând lungimea absolută a liniei dată în pixeli sau numere
întregi în intervalul 1-100 urmate de semnul % reprezentând lungimea în procente relativ la
dimensiunea blocului în care se află linia.
Alt atribut este size reprezentând grosimea liniei, cu valori numere întregi. Dacă lipsește,
size="2", adică 2 pixeli.
Atributul noshade care atunci când este prezent definește o linie fără umbră.
Blocul <center>......</center>, care determină centrarea tuturor elementelor cuprinse în
interiorul său.
<h2> sucesiune de linii
centrate </h2>
<center>
<hr width="10%"> <hr
width="40%">
<hr width="70%"> <hr
width="100%">
<hr width="70%"> <hr width="40%">
<hr width="10%">
</body>
</html>
Liste
HTML permite inserarea într-o pagina web a listelor, pune la dispoziție liste
neordonate, sunt introduse între delimitatorii
<ul>
...............
</ul> (unordered list).
Un element în cadrul unei liste este introdus prin eticheta <li> ; list item.
Ambele etichete ul și li au atributul type ce defineste simbolul de inceput al listei.
Valoarea lui type poate fi:
Circle – reprezentand un cerc gol
Disk – reprezentand un cerc plin (valoare predefinita)
Square – reprezentand un patrat
Exemplu:
<html>
<head>
<title>Exemplul 3
Type="Circle"
<h2> Lista neordonata </h2>
<ul> Pentru a cunoaste internetul trebuie sa studiati
<li> HTML
30
<li> CSS
<li> PHP
</ul>
</body>
</html>
Liste ordonate
Sunt cuprinse in interiorul etichetelor

<ol>
...
</ol> Ordered list
și in acest caz un element al listei este introdus prin eticheta li.
Tipul marcajului ce insoteste intrarile in lista este precizat de atributul type, care poate
avea valorile:
Type="A"; lista este data in ordine alfabetica cu majuscule
Type="a"; lista este data in ordine alfabetica cu litere mici
Type="I"; lista este data in ordinea sistemului de numeratie
roman
Type="i"; lista este data in ordinea sistemului de numeratie
roman, cu litere mici
Type="1"; valoare predefinita, ordinea sistemului de
numeratie arab.
<h2> Lista ordonata </h2>
<ol type="I"> Pentru a realiza o pagina web trebuie :
<li> creat un fisier in limbajul HTML
<li> salvat fisierul cu extensia .html
<li> incarcat fisierul in browser
</ol>
</body>
</html>
Lista de definitii
O lista de definitii este introdusa intr-un document .html prin eticheta

<dl>
...
</dl> Definition list
Un termen al listei este initiat de eticheta <dt>; definition term; iar definitia unui termen
este initiata de eticheta <dd> ; definition description.
Definitia unui termen incepe intotdeauna pe o linie noua.
31
Exemplu :
<html>
<head>
<title> Exemplu 5
</title>
</head>
<body>
<h2> Lista de definitii </h2>
<dl> dictionar de termeni internet
<dt> Browser
<dd> aplicatie ce ruleaza pe calculatorul client
<dt> Server
<dd> aplicatie ce ruleaza continuu pe calculatorul central
</dl>
</body></html>
O structura foarte importanta pentru o aplicatie web este structura tabelara.
Tabelele ne permit sa cream o retea dretpunghiulara de domenii, fiecare domeniu avand
proprietatile de culoare pentru font și text, aliniere s.a.m.d.
Un tabel este introdus intr-o pagina web prin intermediul etichetei
<table>
...
</table>
Tabelul este format din linii, o linie fiind introdusa prin eticheta
<tr> ; table row
Iar in cadrul unei linii avem mai multe elemente ce contin date, cunoscute sub numele de
celule
<td> ; table data
In mod prestabilit, un tabel nu are chenar. Pentru a adauga un chenar unui tabel folosim
atributul border atasat etichetei table.
Atributul border are valori numere intregi pozitive, inclusiv 0, reprezentand grosimea in
pixeli a liniei ce deseneaza chenarul.
Border="2"
32
Exemplu :
<html>
<head>
<title> Exemplu 6
</title>
</head>
<body>
<h2> Tabel cu chenar </h2>
<table border="5">
<tr><td>celula 11 <td> celula 12 <td> celula 13
<tr><td>celula 21 <td> celula 22 <td> celula 23
</table>
</body>
</html>
Eticheta table are la randul sau atributul align, cu valorile left, right și center,
determinand alinierea la stanga, la dreapta și centrat a tabelului in pagina.
Align="left"
Definirea culorilor pentru un tabel

HTML permite definirea culorilor de font la nivelul intregului tabel prin eticheta
bgcolor atasata etichetei
table la nivelul liniei prin acelasi atribut prin eticheta tr dar la nivelul coloanei atasat
etichetei td.
Importanta cea mai mare o are culoarea celulei, apoi a liniei și apoi a intregului tabel.
Exemplu:
<html>
<head>
<title> Exemplu 7
</title>
</head>
<body>
<h2> Tabel colorat</h2>
<table border="3" bgcolor="yellow">
<tr><td>galben <td bgcolor="green"> verde
<tr bgcolor="red"> <td>rosu <td bgcolor="blue"> albastru
</table>
</body>
</html>
Fisierul imagine trebuie sa fie situat in acelasi folder cu fisierul .htm
33
Exemplu8.htm :
<html>
<head>
<title> Exemplu 8
</title>
</head>
<body>
<h1> Inserarea unei imagini
intr-o pagina web</h1>
<img src ="imagine.jpg" border="5">
</body>
</html>
Cum sa facem o imagine care sa se raspandeasca pe tot fundalul paginii:
Exemplu9.htm:
<html>
<head>
<title> Exemplu 9
</title>
</head>
<body background ="imagine.jpg">
<h1> Pagina cu imagine de fond </h1>
</body>
</html>
Pagina cu legaturi
Intr-o pagina web putem introduce legaturi catre alte pagini sau resurse din internet.
Legaturile se fac prin intermediul etichetei <a> (anchor) ... </a>.
Aceasta eticheta are atributul href, care va introduce pagina ce inlocuieste pagina curenta.
Pagina1.htm :
<html>
<head>
<title> Pagina 1
</title>
</head>
<body >
<h1> Prima pagina </h1>
<a href ="pagina2.html"> legatura catre pagina 2 </a>
</body>
</html>
34
Pagina2.htm :
<html>
<head>
<title> Pagina 2
</title>
</head>
<body >
<h1> Prima pagina </h1>
<a href ="pagina1.html"> legatura catre pagina 1 </a>
</body>
</html>
Pagina3.htm :
<html>
<head>
<title> Pagina 3
</title>
</head>
<body >
<h1> Pagina 3 </h1>
<a href ="http://www.studiieconomice.com" target="blank"> Cursuri, referate </a>
</body>
</html>
Formulare
Interactivitatea paginilor web
Interactivitatea unei pagini web reprezinta posibilitatea ca un client sau utilizator sa
comunice cu un server astfel incat sa obtina informatia de care are nevoie.
Limbajul html fiind o forma particulara de realizare a hipertextului, ofera
posibilitatea navigarii intre diverse surse de informatii aflate in internet prin intermediul
legaturilor.
Pe langa legaturi, HTML pune la dispozitie formularele.
Un formular reprezinta un ansamblu de zone active alcatuit din butoane de apasat,
casete de selectie, campuri de editare s.a.m.d.
O sesiune de lucru cu o pagina web ce cuprinde un formular are urmatorii pasi :
1. utilizatorul completeaza formularul și il expediaza unui server
2. o aplicatie dedicata de pe server analizeaza formularul completat și stocheaza
eventual date in baza de date
3. serverul expediaza un raspuns utilizatorului
Un formular este inclus intr-o pagina web in interiorul blocului :
<form>
</form>
Obs: actiunea cea mai simpla pe care o putem face cu un formular este trimiterea unui
e-mail cu datele formularului. Pentru aceasta avem nevoie de un server de e-mail.
35
Obs: într-o pagina web putem avea oricate formulare, dar acestea nu pot fi incluse unul in
altul. Elementul <form> are doua atribute esentiale:
1. atributul action, care precizeaza ce se va intampla cu datele formularului in momentul
in care acestea ajung la destinație. De regulă, valoarea atributului action este un URL ce
conține adresa unei aplicații de pe server ce prelucrează formularul.
Aplicatia de pe server poate fi scrisa PHP, Java, C#, Perl s.a.
Cea mai simplă prelucrare este transmiterea unui e-mail, caz în care valoarea lui action
este :
action = "mailto:student@yahoo.com"
2. Al doilea atribut este method, care precizeaza metoda utilizata de browser pentru
expedierea datelor formularului.
Cele mai frecvente valori sunt :
method = "get" – care este și valoarea implicita. In acest caz, datele din formular sunt
adaugate la adresa
URL precizata de atributul action.
La adresa URL se va adauga un ? și apoi perechi de forma : nume=valoare &, perechile
fiind separate prin atributul &.
Ex. www.yahoo.com/index.php? user=ion&pass=123
A doua valoare pentru method este "post". In acest caz datele sunt expediate separat.
Daca in cazul lui "get" puteam trimite maxim 1 KB de date, in cazul lui "post" putem trimite
cantitati mari de date, de ordinul MB.
Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. Pentru a
preciza tipul elementului, <input> foloseste atributul type.
Daca dorim ca într-un formular să introducem un câmp de editare, atributul type va primi
valoarea :
type="text"
Alte atribute esentiale ale lui <input> sunt :
Name, care dă nume elementului formularului, îl regasim in URL, și value, care va da
valoarea elementului formularului, pe care îl putem regăsi deasemenea în URL.
Un buton de expediere al unui formular se introduce tot prin <input>, dar în acest
caz type va avea valoarea : type="submit".
Dacă nu se precizează valoarea elementului, pe buton va fi scris "Submit Query".
Valoarea precizată de utilizator va fi inscrisă ca etichetă a formularului.
36
Exemplu:
<html>
<head>
<title> Exemplu 10
</title>
</head>
<body>
<h1> Formular cu camp de editare și buton de expediere</h1>
<form action="mailto:student@yahoo.com" method="post">
Numele : <input type="text" name ="Numele" value = "Numele și prenumele"><br>
<input type="submit" value="expediaza">
</form>
</body>
</html>
Rezultatul va fi un email pe care il vom primi : Numele = Ion Popescu
In plus, daca valoarea atributului type este type="text", <input> mai admite și
urmatoarele atribute : Atributul size, specifica latimea campului de editare, daca textul introdus
in campul de editare depaseste lungimea campului, atunci se va produce o defilare a acestuia
spre stanga.
Atributul maxlenght, care specifica numarul maxim de caractere care pot fi introduse
intr-un element text. Caracterele introduse peste numarul maxim vor fi ignorate.
In cazul in care intr-un formular introducem un element in care atributul type are
valoarea reset, type="reset", in pagina se va insera un buton care prin apasare determina
modificarea elementelor formularului la valorile predefinite.
Intr-un formular putem introduce de asemenea elemente de tip parola : In acest caz,
atributul type va avea valoarea : type="password"
Intr-un camp de tip parola, caracterele tiparite nu vor fi afisate in valoarea lor reala, ci
prin asteriscuri (*).
Exemplu:
<html>
<head>
<title> Exemplu 11
</title>
</head>
<body>
<h1> Formular cu
camp parola și buton de
resetare</h1>
Numele : <input type="text" name ="Numele" value = "Numele"><br> Prenumele : <input
type="text" name ="Prenumele" value = "Prenumele"><br> Parola : <input type="password" name
="Parola"><br>
<input type="reset" value = "Sterge"><br>
<input type="submit" value="expediaza">
</form>
37
</body>
</html>
Radiobutoane
Butoanele radio permit alegerea la un moment dat alegerea unei singure variante
dintre mai multe posibile. Un element input ce defineste un radiobuton are atributul
type="radio".
Obs:
Pentru a obține efectul de radiobuton, adică doar o valoare selectată dintr-o listă de valori,
toate elementele listei vor aparține aceleiași familii, adică vor avea același nume.
In plus, în acest caz, elementul input poate avea atributul checked, determinând
selectarea predefinită a unui radiobuton.
Exemplu:
<html>
<head>
<title>
Exemplu 12</title>
</head>
<body>
<h1> Formular cu radio butoane</h1>
<form action="mailto:student@yahoo.com"
method="post"> Alegeti sexul: <br>
Barbatesc <input type="radio" name ="sex" value = "b"> Femeiesc <input type="radio" name
="sex" value = "f"><br>
<input type="submit"> </form>
</body>
</html>
Casete de valitare sau Checkbox

O caseta de validare permite selectarea sau deselectarea unei optiuni.
Pentru a introduce un element ce contine o caseta de validare, atributul type trebuie sa
aiba valoarea :
type = "checkbox"
și in acest caz avem atributul checked, care atunci cand este prezent permite selectarea
predefinita a unei optiuni. In acest caz putem avea selectat predefinit mai multe optiuni dintr-o
familie.
Exemplu:
<html>
<head>
<title> Exemplu 13
</title>
</head>
<body>
<h1> Formular cu casete de validare</h1>
<form action="mailto:student@yahoo.com" method="post"> Alegeti meniul: <br>
38
Pizza <input type="checkbox" name ="pizza" value = "o portie"> Nectar <input type="checkbox"
name ="nectar" value = "un pahar"> Cafea <input type="checkbox" name ="cafea" value = "o
ceasca"><br>
<input type="submit">
</form>
</body>
</html>
Casete de fisiere
Pentru a introduce un element care sa contina posibilitatea selectarii unui fisier care apoi
este transmis formularului pentru ca apoi sa fie expediat impreuna cu acesat, vom folosi un
element input in care atributul type="file".
Pentru acest tip de element, atributul name permite atasarea unui nume, value va avea ca
valoare adresa URL a fisierului ce urmeaza a fi incarcat impreuna cu formularul, value putand fi
tastat intr-o caseta text sau ales dintr-o fereastra de selectie prin apasarea butonului browse.
Un al treilea atribut este enctype, care precizeaza metoda utilizata la criptarea fisierului
de expediat. Valoarea acestui atribut trebuie sa fie obligatoriu "multipart/form-data".
Liste de selecție
O lista de selectie permite utilizatorului sa aleaga unul sau mai multe elemente dintr-o
lista finita. O lista de selectie se introduce in formular prin intermediul etichetei :
<select>
</select>
Lista de selectie are urmatoarele atribute : Name, care atasaza listei un nume.
Size, care precizeaza printr-un intreg pozitiv cate elemente din lista vor fi vizibile la
un moment dat pe ecran, celelalte elemente devenind vizibile prin actionarea unor bare de
derulare.
Elementele listei sunt incluse in lista prin atributul <option>. Acesta contine value,
care primeste ca valoare un text, respectiv selected, fara alte valori, ce permite selectarea
predefinita a unui element al listei.
39
Exemplu:
<html>
<head>
<title> Exemplu 14
</title>
</head>
<body>
<h1> Formular cu lista de selectie</h1>
<form action="mailto:student@yahoo.com" method="post"> Universitatea absolvita : <br>
<select name="universitate" size="3">
<option value="B"> Universitatea din
Bucuresti
<option value="CJ"> Universitatea din Cluj
<option value="TM"> Universitatea din
Timisoara
<option value="IS"> Universitatea din Iasi
</select><br>
<input type="submit">
</form>
</body>
</html>
Câmpuri de editare multilinie

Un camp de editare multilinie este introdus in formular prin intermediul etichetei
<textarea>. Pentru a particulariza un camp de editare multilinie se folosesc urmatoarele atribute :
- cols, specifica numarul de caractere afisate intr-o linie
- rows, specifica numarul de linii afisate simultan
- wrap, care permite definirea comportamentului campului fata de sfarsitul de linie.
Acest atribut poate primi urmatoarele valori : "off" insemnand ca cuvintele sunt intrerupte la
marginea dreapta a editorului numai atunci cand doreste utilizatorul, caracterul de sfarsit de
linie este inclus in textul transmis serverului odata cu formularul ; "hard", intreruperea
cuvintelor se produce la marginea dreapta a formularului, caracterul de sfarsit de linie este
inclus in textul transmis serverului odata cu formularul ; "soft", in acest caz se produce
intreruperea cuvintelor la marginea dreapta a editorului, iar caracterul de sfarsit de linie nu se
include in textul transmis serverului odata cu formularul
Exemplu:
<html>
<head>
<title> Exemplu 15
</title>
</head>
<body>
<h1> Formular complex</h1>
<center><table bgcolor="yellow">
40

<caption align="top">MENIU</caption>
<tr align ="left"><th>Numele :<td><input type="text" name="numele">
<tr align ="left"><th>Prenumele :<td><input type="text" name="prenumele">
<tr align ="left"><th>Telefonul :<td><input type="text" name="Telefonul">
<tr align ="left"><th>Alegeti pizza :<td><input type="checkbox" name="ciuperci">cu ciuperci
<input type="checkbox" name="mexicana">mexicana <input type="checkbox"
name="europeana">europeana
<tr align ="left"><th>Alegeti sucul :<td><input type="checkbox" name="fanta">fanta <input
type="checkbox" name="nectar">nectar
<tr align ="left"><th>Alegeti plata :
<td><ul style="background-color:lightblue;">
<li><input type="radio" name="plata">cash
<li><input type="radio" name="plata">card
<tr align ="left"><th>Comentarii : <td>
<textarea name="comentarii" rols="30" rows="5" wrap="off">Inserati aici parerile</textarea>
<tr align ="left" valign="top"><td><input type="reset" value="sterge"><td><input type="submit"
value="expediaza">
</form></table></center>
</body>
</html>
41
Cadre
Pana in acest moment, in fereastra browserului era incarcat un singur document HTML.
Cadrele ne permit sa definim in fereastra browserului subferestre in care sa fie incarcate
documente HTML diferite.
Cadrele sunt definite in fisiere HTML speciale in care blocul <body> este inlocuit de
blocul :
<frameset>
</frameset>
In interiorul acestui bloc fiecare cadru este introdus prin eticheta <frame>
Un element esential al etichetei <frame> este src, ce primeste ca valoare adresa URL
a documentului
HTML ce va fi incarcat in acel frame.
Definirea cadrelor se face din aproape in aproape prin impartirea ferestrelor și a

subferestrelor in linii și coloane.
Impartirea unei ferestre intr-un numar de subferestre de tip coloana se face cu atributul
cols. Impartirea unei ferestre intr-un numar de subferestre de tip linie se face cu atributul rows.
Valoarea acestor atribute este o lista de elemente pentru fiecare subfereastra cate un
element, separate prin virgula, ce descriu modul in care se face impartirea.
Elementele listei pot fi :
- un numar intreg, urmat de unitatea de masura
- un numar intreg, urmat de semnul procent %
- numarul in intervalul 1-100, respectiv n* determinand impartirea ferestrei in n
subferestre de dimensiune egală.
Exemplu:
<html>
<head>
<title> Exemplu 16
42
</title>
</head>
<frameset cols="20%,*">
<frame src="p1.html">
<frameset rows = „*,*”>
</frameset>
</frameset>
</frameset>
</html>
Fișierele p1.html, p2.html și p3.html au fost create anterior și salvate în directorul
curent al aplicației. Ele vor fi introduse in cadrul al caror atribute sunt. Pagina va fi impartita
astfel:
Initial in doua coloane, prima coloana ocupand 20% din spatiu in care incarcam fisierul
p1.html, cea de a doua coloana ocupa intreg spatiul ramas, la randul sau constituind un frameset
care va fi impartit pe linii in doua zone de dimensiune egala.
Putem stabili culori pentru chenarul unui cadru, utlilizand pentru aceasta atributul
bordercolor.
Atributul poate fi atasat tuturor cadrelor prin eticheta frameset sau unui singur cadru prin
eticheta frame.
De asemenea putem stabili dimensiunea cadrelor prin eticheta border.
Toate cadrele au aceeasi dimensiune. De aceea border se aplica numai etichetei
frameset.
Implicit valoarea lui border este 5, adica 5 pixeli. Daca valoarea ar fi 0, atunci am
obtine un cadru fara chenar.
In mod prestabilit, chenarul unui cadru este vizibil și are un aspect tridimensional.
Afisarea chenarului poate fi dezactivata daca utilizam atributul frameborder cu valoarea ="no".
Atributul poate fi folosit atat pentru frameset cat și pentru frame.
Frame poate avea și atributul scrolling, utilizat pentru a adauga unui cadru bare de
defilare. Valorile posibile ale lui scrolling sunt :
="yes". Barele de defilare sunt adaugate intotdeauna.
="no". Barele de defilare nu sunt adaugate vreodata
="auto". Adaugate doar atunci cand este nevoie.
Stiluri
Stilurile pun la dispozitia autorilor de site-uri posibilitati de personalizare a paginilor web.
Un stil reprezinta un mod de a scrie un bloc de text, adica posibilitati de setare a
fontului, a marimii, a culorii, alinierii, distantei fata de margine și asa mai departe.
Vom utiliza pentru definirea stilului sintaxa CSS (cascading style sheet).
Sintaxa CSS este sintaxa predefinita de utilizare a stilurilor, dar este bine sa informam
browserul asupra sintaxei folosite printr-o metainformatie :
<meta http-equiv = "content-style-type" Content="text/css">, metainformatie ce va fi
plasata in blocul <head>.
Definirea stilului presupune doua etape :
- Definirea propriuzisa a sa
- Specificarea domeniului in care se va utiliza acest stil.
Stiluri dedicate
Se aplica numai blocurilor pentru care au fost definite.
Inserarea unui stil se face intr-un bloc <style> ... </style>, iar blocurile definite se numesc
43
reguli.
O regula este formata dintr-un selector și o descriere.
Selectorul specifica domeniul de utilizare a stilului iar descrierea defineste stilul utilizat.
Descrierea stilului este facuta intre acolade.
Stilul este definit prin intermediul perechilor atribut:valoare și sunt separate prin ;.
Presupunem ca dorim ca intr-o pagina web toate titlurile de marime 1 sa fie de culoare
rosie și centrate.
Exemplu:
<html>
<head>
<style>
<title> Exemplu 17
</title>
h1{text-align:center ; color:red;}
</style>
</head><body>
<h1>acest header este rosu și centrat </h1>
<h2>header cu stil predefinit </h2>
</html>
Daca dorim ca un selector sa fie aplicate la mai multe stiluri vom preciza separate
prin virgula lista acestora.
Clase de stiluri
Permit definirea unui stil general și folosirea lui oriunde este necesar.
Definirea clasei de stiluri se face tot in blocul style iar apelul clasei de stiluri folosit se
face prin intermediul atributului class, atribut de este disponibil tuturor elementelor HTML.
Exemplu:
<html>
<head>
<style>
<title> Exemplu 18
</title>
all.rc{text-align:center; color:red;}
</style>
</head><body>
<h1>acesta este un header cu stil predefinit </h1>
<h1 class=rc>Acesta este un header cu stil definit intr-o clasa</ h1>
</html>
Obs:
All se refera la faptul ca stilul poate fi utilizat de orice element HTML.
Putem restrictiona acest lucru prin specificarea numelui elementului (ex. h1.rc inseamna
ca stilul se aplica doar elementelor h1).
44
Stiluri identificate
Toate elementele unui document admit atributul id. Acesta are rolul de a identifica
in mod unic un element in cadrul unui document. Atributul id poate identifica stilul utilizat de
un anumit element.
Un stil identificat definit in blocul style va avea primul caracter #.
Exemplu:
<html>
<head>
<style>
<title> Exemplu 19
</title>
#ROSU{text-
align:center ; color:red;}
</style>
</head><body>
<h1>acesta este un header cu stil predefinit </h1>
<h1 id=ROSU>Acesta este un header cu stil definit intr-o clasa</ h1>
</html>
Pentru a exprima valoarea unui atribut se pot utiliza diferite unitati de masura. Cele mai
raspandite sunt :
- Pt, puncte tipografice
- Px, pixeli
- In, inch
- Mm
- Cm
Relatia intre aceste unitati de masura este urmatoarea :
1 inch = 72 pt = 2,54 cm
Marimea unui font este stabilita prin atributul font-size și poate fi exprimata in 4 moduri:
- Prin valoarea absolut: font-size= xx-small, x-small, small, medium, large, x-large,xx-
large;
- Prin marimi relative: larger, smaller;
- Un număr întreg urmat de unitatea de masură;
- Un număr întreg în intervalul 0-100 urmat de semnul %, reprezentand procentul din
dimensiunea curenta pentru care aplicam fontul.
Grosimea fontului este exprimată prin atributul font-weight.
Poate avea urmatoarele valori : normal, bold, bolder, lighter.
Stilul fontului : font-style= normal, italic, oblique
Variantele fontului sunt date prin intermediul atributului font-variant= normal, small-
caps.
Avem un atribut unic, font, prin intermediul caruia pot fi stabilite simultan toate
valorile posibile ale fontului.
Ordinea este font-style, font-variant, font-weight, font-size, font-family.
45
Exemplu:
<html>
<head>
<style>
<title> Exemplu 20
</title>
p {font:italic bolder 20pt "times new roman", serif;}
h2 {font:bold 20px "new century schoolbook",serif;}
</style>
</head><body>
<p>paragraf scris cu stil definit prin atributul font </p>
<h2>bloc header cu stil definit </h2>
</html>
Obs:
Pentru fiecare dintre cele doua stiluri definite, la atributul font-family am folosit o listă
de valori, deoarece este posibil ca pe calculatorul client să nu avem instalate toate fonturile.
Fontul al cărui nume este format din mai multe cuvinte a fost scris între perechi de
ghilimele.
Configurarea blocurilor de text. Un bloc de text este format din :
- Continut;
- Distanta dintre continut și chenar;
- Chenar;
- Margini.
Toate aceste atribute au valori cuprinse in intervalul 0-100 urmate de semnul % sau
valori intregi urmate de unitatea de masura.
Sintaxa css pune la dispozitie un atribut unic border, ce cuprinde toate valorile separate
prin spatiu.
46
Bibliografie
http://www.w3schools.com/
47

CUPRINS
1. Principii de proiectare ..................................................................................................................... 3
2. Limbajul HTML ................................................................................................................................ 4
2.1. Scurt istoric SGML şi HTML ...................................................................................................... 5
2.2. Structura unei pagini web ........................................................................................................ 6
2.3. Blocuri preformatate ............................................................................................................... 8
2.4. Culoarea de fond ........................................................................................................................ 10
2.5. Atributele textului ...................................................................................................................... 10
2.6. Atributele unui bloc-text ............................................................................................................ 11
2.7. Atributele fonturilor ................................................................................................................... 12
2.8. Stiluri fizice pentru blocuri-text .................................................................................................. 13
2.9. Stiluri logice pentru blocuri-text ................................................................................................. 14
2.10. Etichete dedicate blocurilor speciale ........................................................................................ 15
2.10.1. Bloc de adresă ................................................................................................................... 15
2.10.2. Bloc-text cu deplasare spre dreapta (indention)................................................................. 16
2.10.3 Blocuri paragraf .................................................................................................................. 16
2.10.4. Blocuri de titlu ................................................................................................................... 17
2.10.5 Blocuri <nobr> .................................................................................................................... 18
2.10.6 Blocuri <div>....................................................................................................................... 18
2.11. Linii orizontale .......................................................................................................................... 20
2.12. Introducerea imaginilor în pagina web ..................................................................................... 21
2.13. Legături între paginile web ....................................................................................................... 23
2.14. Liste, tabele, cadre, formulare .................................................................................................. 28
2. 14. 1 Liste de termeni ................................................................................................................ 28
2.14.2 Tabele ................................................................................................................................ 30
2.14.3 Cadre .................................................................................................................................. 34
2.14.4 Formulare ........................................................................................................................... 34
2.15. STILURI HTML ........................................................................................................................... 37
1
Bibliografie ........................................................................................................................................... 39
APLICAŢIE ............................................................................................................................................. 40
2
1. Principii de proiectare
Principalele funcţii ale unui site sunt de informare, comunicare, poate avea ca scop simpla
prezentare de produse sau servicii dar trebuie neapărat să convingă.
Structura și aspectul grafic al site-ului trebuie să îndeplinească câteva caracteristici specifice de
bază.
În vederea proiectării unui site de calitate este necesară parcurgerea următoarele
etape:
1. Etapa de identificare clară a obiectivului ce trebuie atins prin publicarea site-ului și
particularităţile publicului căruia i se adresează (domeniu de business, vârstă, educaţie, interese, alte
aspecte psihologice);
2. Etapa a doua de culegere de informaţii referitoare la subiectul site-ului
În această etapă se adună toate informaţiile necesare construirii site-ului. Toate informațiile
sunt într-o formă inițială brută, neprelucrate. Ca orientare trebuie să aveți câteva site-uri model care se
apropie de obiectivul ales pentru propriul site;
3. Etapa de selectare a informaţiilor relevante
Din multitudinea de informații acumulate, se selectează cele relevante astfel încât să se
adapteze volumul de informaţii la obiectivul urmărit;
4. Etapa de proiectare a structurii site-ului
Se oganizează pe categorii toate informaţiile disponibile selectate anterior, se stabilește
numărul de pagini, conţinutul acestora, relaţiile dintre pagini.
5. Etapa de proiectare a aspectul grafic al site-ului
Este foarte important ca toate paginile site-ului să aibă un aspect grafic comun, unitar. Dacă
fiecare pagină arată complet altfel, aspectul general va fi neprofesional.
Aspectul grafic al unei pagini Web este determinat de:
 text (fontul folosit, dimensiunea caracterelor, stiluri, culori),
 fundalul paginii (imagine sau culoare),
 imaginile folosite,
 secvenţele audio sau video.
Țineți cont aici de regula de aur a imaginii site-ului Dvs. “Ce este peste 3 este prea mult!”
Aici mă refer la mai mult de trei fonturi pe pagină, mai mult de trei culori de text etc.
6. Etapa de implementare a site-ului
 Descrirea codul necesar pentru realizarea paginilor în modul în care a fost proiectat.
 Descrierea documentelor externe de definire a stilurilor.
 Verificarea cu atenţie a corectitudinea lexicale și gramaticală a textelor.
 Asocierea un titlu semnificativ fiecărei pagini, datarea și/sau semnarea paginii;
7. Etapa de testare a site-ului
 Verificarea funcţionalității tuturor paginilor.
 Verificarea fiecărui link, fiecare imagine, fiecare element multimedia.
 Vizualizarea paginii pe diferite dispozitive inteligente (Desktop, Laptop, Notebook,
iPhone, Tabletă, etc.), cu diferite browser-e (Opera, Google Chrome, Internet Explorer, etc) folosind
monitoare cu diferite rezoluţii.
8. Etapa de publicare a site-ului
3
După ce s-a finalizat cu succes faza de testare, dacă avem deja cumpărat un nume pe un
domeniu (de ex .ro, .edu, .com etc) putem alege un server (gratuit sau contra cost) pentru a publica
pagina.
9. Etapa de promovare a site-ului
Pentru ca site-ul să fie vizitat, nu este suficient să-l publicăm, trebuie să îi facem cunoscută
prezenţa.
Un prim pas este înscrierea site-ului la principalele motoare de căutare (exemplu: Google
AdWords, Yahoo, Excite, AltaVista), deoarece sunt primele locuri către care se îndreaptă cineva care
caută informaţii pe Internet.
O altă tehnică de a atrage vizitatori sunt listele de corespondenţă. Se vor crea liste de vizitatori
cărora le trimitem prin e-mail informări despre site și despre actualizările acestuia.
Dacă urmărim atragerea unei audienţe internaţionale pentru site-ul, este bine să apelăm la
servicii speciale de promovare a site-urilor.
Proiectarea unui site nu este un proces secvenţial. Toatele etapele prezentate anterior vor fi cu
siguranță parcurse de mai multe ori. Pe parcursul proiectului se vor evalua și reevalua fiecare din
acțiunile desfașurate în cadrul fiecărei etape, cu siguranţă se va reveni la un anumit pas, pentru a rafina
o idee, pentru a îmbunătăți anumite elemente, până când site-ul proiectat va corespunde cerinţelor
obiectivului stabilit iniţial.
Pentru crearea unei pagini Web, se foloseşte limbajul HTML. Limbajul HTML oferă
posibilitatea de a publica pe Web documente ce conţin texte, liste, tabele, imagini, secvenţe audio şi
video, legături.
2. Limbajul HTML
Unul din primele elemente fundamentale ale WWW (World Wide Web) este HTML
(HyperText Markup Language), care descrie formatul primar în care documentele sunt distribuite și
văzute pe Web. Multe din trăsăturile lui, cum ar fi independenţa faţă de platforma, structurarea
formatării și legăturile hipertext, fac din el un foarte bun format pentru documentele Internet şi
Web.
Limbajul HTML a fost creat în 1990 de către Tim Berners-Lee și Daniel Connoly.
Primele din specificaţiile de bază ale Web-ului au fost HTML, HTTP (HyperText Transfer
Protocol) şi URI (Uniform Resource Identifier) cu subclasa URL (Uniform Resource Locator).
URI constă în trei elemente:
 schema de accesare a resursei (mai precis, protocolul de comunicaţie folosit: HTTP,
FTP etc);
 numele serverului care găzduieşte acea resursă;
 numele resursei, inclusiv calea de acces către ea (path).
Inițial HTML a fost gândit ca o posibilitate pentru fizicienii care utilizează computere diferite
și schimbă între ei informaţii utilizând Internetul șă poata avea acces rapid și facil la informații. Erau
prin urmare necesare câteva trăsături:
 independenţa de platformă;
 posibilităţi de utilizare și vizualizare corectă de hypertext
 structurarea clară a documentelor.
Independenta de platformă însemna că un document poate fi afişat în mod asemănător de
dispositive inteligente diferite (deci cu fonturi, grafică și culori diferite), lucru vital pentru o audienţă
atât de variată.
În hipertext orice cuvânt, frază, imagine sau alt element al documentului văzut de un utilizator
(client) poate face referinţă la un alt document, ceea ce uşurează mult navigarea între documente
multiple sau chiar în interiorul unui aceluiaşi document, între paragrafe. Structurarea riguroasă a
documentelor permite convertirea acestora dintr-un format în altul precum şi interogarea unor baze de
date formate din aceste documente.
În proiectarea paginilor şi site-urilor web trebuie să se aibă în vedere trei elemente:
4
 structura documentelor;
 prezentarea acestora;
 asigurarea interactivităţii.
În acest mod, este mai uşor de întreţinut şi de îmbunătăţit orice resursă web.
2.1. Scurt istoric SGML şi HTML

Tim Berners-Lee a utilizat ca model SGML (Standard Generalized Markup Language), un
standard internaţional în plină dezvoltare. SGML avea avantajul unei structurări avansate şi al
independenţei de platformă dar proiectarea lui a avut în vedere mai mult structura semantică a
documentului decât modul de formatare. Flexibil, SGML putea fi descris ca o specificare pentru
descrierea altor formate. Utilizatorii puteau defini noi formate (DTD - Document Type Definitions)
care puteau fi înţelese de orice produs soft SGML pur şi simplu prin citirea mai întâi a definiţiilor
noilor formate. HTML este pur și simplu un DTD, deci o aplicaţie SGML.
In primii ani de evoluţie HTML a crescut lent, în principal pentru că îi lipseau posibilităţile de
a descrie publicaţii electronice profesionale. Limbajul permitea controlul asupra aspectului
caracterelor dar nu permitea inserarea graficii. In 1993, NCSA a îmbogăţit limbajul pentru a permite
inserarea graficii și au construit primul navigator grafic, Mosaic. Au urmat apoi contribuţii ad-hoc
ale diverselor firme care au adus diferite modificări limbajului HTML (adăugiri și nu îmbogăţiri
pentru că unele elemente nu erau în conformitate cu principiile generale ale SGML) astfel încât,
prin 1994 limbajul părea scăpat de sub control. Urmarea a fost ca la prima conferinţă WWW din
Geneva (Elveţia) s-a constituit un grup (HTML Working Group) a cărui primă misiune a fost
formalizarea HTML într-un DTD al SGML, lucru care s-a concretizat în HTML Level 2 (sau HTML
2.0; Nivelul 1, deci HTML 1.0, a fost proiectat de Tim Berners-Lee). Importanţa acţiunii acestui grup
constă în faptul că, odată standardizat, limbajul poate fi extins într-un mod mai controlat la alte nivele.
Standardul oficial HTML este dat de W3C (World Wide Web Consortium), afiliat la IETF
(Internet Engineering Task Force). W3C a enunţat mai multe versiuni ale specificaţiei HTML, printre
care şi HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 şi HTML 4.01.
În acelaşi timp, autorii de programe de navigare pe WWW (browser), cum ar fi Netscape și
Microsoft, au dezvoltat adesea propriile "extensii" HTML în afara procesului standard şi le-au
încorporat în browserele lor. În unele cazuri, cum ar fi Netscape Navigator, aceste extensii au
devenit standarde de facto adoptate de autorii de browsere.
HTML 2.0, elaborat in iunie 1994, este standardul pe care ar trebui să-l suporte toate
browserele curente, inclusiv cele în mod text. HTML 2.0 reflectă concepţia originală a HTML ca un
limbaj de marcare, independent de obiectele existente, pentru aşezarea lor în pagină, în loc de a
specifica exact cum ar trebui să arate acestea astfel că toţi vizitatorii vor vedea paginile web corect.
Specificatia HTML 3.0, Enunţată în 1995, a încercat să dezvolte HTML 2.0 prin adăugarea
unor facilităţi precum tabelele și un mai mare control asupra textului din jurul imaginilor. Deşi
unele din noutăţile HTML 3.0 erau deja folosite de autorii de browsere, multe nu erau încă. În unele
cazuri, elemente asemănătoare implementate de autorii de browsere au devenit mai răspândite decât
cele "oficiale". Specificaţia HTML 3.0 acum a expirat, deci nu mai este un standard oficial.
In mai 1996, W3C a scos pe piaţă specificatia HTML 3.2, proiectată să reflecte și să
standardizeze practicile acceptate la scară largă. Deci, HTML 3.2 include elemente HTML 3.0 ce erau
adoptate de autorii de browsere ca Netscape și Microsoft plus extensii HTML răspândite.
In bilanţul asupra HTML, W3C recomanda ca furnizorii de informaţii din WWW să utilizeze
specificaţia HTML 3.2. Versiunile curente ale majorităţii browserelor ar trebui să suporte toate, sau
aproape toate aceste elemente.
5
De asemenea există extensii Netscape și Microsoft care nu fac parte din specificaţia HTML
3.2, fie pentru că sunt mai puţin utilizate, fie că au fost omologate după apariţia HTML 3.2.
Pentru că navigatorul Netscape a fost printre primele browsere care suporta anumite elemente
HTML 3.0, iar Netscape deţine în jur de 70% din piaţa de browsere, mulţi au crezut eronat că toate
extensiile Netscape (incluzând noi elemente ca și o serie de facilităţi, precum „ferestrele”) fac parte
din HTML 3.0 sau HTML 3.2.
La momentul apariţiei acestui tutorial, HTML 4.0 este larg utilizat şi au fost deja publicate
specificaţiile HTML 4.01.
Documentele HTML sunt documente în format ASCII și prin urmare pot fi create cu orice
editor de texte. Au fost însă dezvoltate editoare specializate dar navigatoarele afişează acelaşi
document oarecum diferit, în funcţie de platforma pe care rulează. Au fost de asemenea dezvoltate
convertoare care permit formatarea HTML a documentelor generate (și formatate) cu alte editoare.
Evident conversiile nu pot păstra decât parţial formatările anterioare deoarece limbajul HTML este
încă incomplet.
Internaţionalizarea HTML a devenit posibilă prin standardul ISO 10646 dat de W3C, care
include toate caracterele, printabile și de control, admise în documentele web precum şi modalităţile de
formatare a textelor.
2.2. Structura unei pagini web

O pagină web conţine diverse elemente sau blocuri, marcate cu etichete de început și de final
(start tag, end tag). Între etichete (tags) este inclus corpul elementului. Pe baza acestor etichete,
browser-ul realizează diverse acţiuni, fie de afişare, fie de salt la altă pagină web etc. Elementele au
diverse atribute care sunt declarate în cadrul unor etichete.
Etichetele sunt delimitate cu paranteze unghiulare între care este scris numele elementului. În
plus, în eticheta de final acesta este precedat de caracterul ”slash”:
<numele elementului>corpul elementului</numele elementului>
Unele blocuri prezintă etichetele de sfârşit de bloc, în timp ce pentru alte blocuri acest
delimitator este opţional sau chiar interzis.
Orice document HTML este marcat cu etichetele <html>și </html>,opţionale.
O etichetă poate fi scrisă atât cu litere mici, cât şi cu litere mari, adică:
<HTML> = <HtmL> = <html>.
Între cele două marcaje <html>și </html>vom introduce două secţiuni:

 secţiunea de antet cu etichetele <head> ... </head>
 corpul documentului cu etichetele <body> ... </body>.
Blocul <body>...</body> cuprinde conţinutul propriu-zis al paginii HTML, care va fi afişat în
fereastra browser-ului.
Caracterele "SPACE" și "CR/LF" ce apar între etichete sunt ignorate de către browser.
Deci cel mai simplu document HTML ar fi:
<html>
<head>
</head>
<body>
</body>
</html>
6
Titlul unei pagini web se declară în antet, fiind marcat în mod obligatoriu de perechea de
etichete: <title>…</title>.
Fără marcajele < sau >, interpretorul HTML va afişa ca simplu text orice şir de caractere.
Exemplu:
<html>
<head>
<title> Prima pagina WEB</title>
</head>
<body>
Bine aţi venit în pagina mea web!
</body>
</html>
Conţinutul blocului <title>...</title>va apărea în bara de titlu a ferestrei browser-

Dacă acest bloc lipseşte dintr-o pagină HTML, atunci în bara de titlu a ferestrei browser-ului va
apărea numele fişierului.
7
Dacă introducem mai multe linii într-o pagină, browser-ul le va afişa continuu într-un singur
rând, întrucât caracterele "CR/LF" nu sunt recunoscute de browser. Trecerea pe o linie nouă se face la
comanda explicită "line break" (întrerupere de linie), care trebuie să apară în pagina HTML.
Această comandă este declarată prin eticheta unică <br>.
Folosind aceleaşi operaţii ca mai sus, vizualizaţi noua pagina! Veţi vedea textul ce apare în
fereastra navigatorului. În plus, pagina va avea un titlu nou, cel introdus de programator.
Exemplu:
<html>
<head>
<title> Titlul paginii web </title>
</head>
<body>
Bine aţi venit în <br> pagina mea web!
</body>
</html>
Un document HTML valid trebuie să conţină o declaraţie a versiunii de limbaj HTML
utilizată. Aceasta precede antetul și specifică versiunea utilizată (strict, transitional, frameset etc.), cu
sau fără elemente depreciate, și limba în care este editat documentul:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Prin această declaraţie se pot include diverse seturi de entităţi HTML care vor putea fi
recunoscute de browser:
• "strict.dtd"
• "loose.dtd"
• "frameset.dtd"
• "HTMLlat1.ent"
• "HTMLsymbol.ent"
• "HTMLspecial.ent"
Informaţii despre autorul paginii web sau drepturi de copyright pot fi incluse în elementul
meta-data cu eticheta unică <meta>:
<META name="Autor" content="Numele autorului sau adresa URI
a unui site web" lang="ro">
Orice comentariu este inclus în documentul web și interpretat ca atare sub forma:
<-- comentariu -->
2.3. Blocuri preformatate

Pentru ca browser-ul să interpreteze corect caracterele " SPACE", "TAB" și "CR/LF" care
apar în cadrul unui text, acesta trebuie declarat ca fiind preformatat prin marcarea sa cu etichetele
<pre>...</pre>.
Exemplu:
<html>
<head>
8
<title>bloc preformatat </title>
</head>
<body><pre>
Prima linie
A doua linie
A treia linie
</pre></body>
</html>
Într-un fişier HTML, caracterele "<" și ">" au o semnificaţie specială pentru browser. Ele
încadrează comenzile şi atributele de afişare a elementelor într-o pagină. Dacă dorim ca un fragment
de text să conţină astfel de caractere, acesta t rebuie încadrat de una dintre perechile de etichete:
• <xmp>...</xmp>( 80 de caractere pe rând );
• <listing>...</listing> ( 120 de caractere pe rând ).
Aceste marcaje interpretează corect caracterele " spaţiu ", " eticheta " și "CR/LF ". Textul
fişat în pagină este monospaţiat.
Exemplu:
<html>
<head>
<title> </title>
</head>
<body>
Un fişier html standard arată astfel:
<xmp><html>
<head>
<title> </title>
</head>
<body>
O pagina Web ...
</body>
</html> </xmp> </body>
</html>
Un fişier html standard arată

astfel:
<html>
<head>
<title> </title>
</head>
9
<body>
O pagina Web ...
</body>
</html>
2.4. Culoarea de fond

O culoare poate fi precizată în două moduri:
• Printr-un nume de culoare.
Sunt disponibile cel puţin 16 nume de culori: aqua, black, fuchsia, gray, green lime,
maroon, navy, olive, purple, red, silver, teal, white, yellow.
• Prin construcţia " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifre
hexazecimale și pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot defini
astfel 65.536 de culori.
Cele 16 culori sunt redate în tabelul 1 de mai jos.
Tabel 1. Culori de bază
Culoarea fondului paginii web se
black = "#000000" green = "#008000" stabileşte cu atributul bgcolor în eticheta
silver = "#C0C0C0" lime = "#00FF00" <body>, de exemplu:
gray = "#808080" olive = "#808000"
<body bgcolor = culoare>
white = "#FFFFFF" yellow = "#FFFF00"
maroon = "#800000" navy = "#000080" Următorul exemplu realizează o pagină cu
red = "#FF0000" blue = "#0000FF" fondul de culoare albastră.
purple = "#800080" teal = "#008080"
fuchsia = "#FF00FF" aqua = "#00FFFF" <html>
<head>
<title>culoare de fond </title>
</head>
<body bgcolor=blue>
O pagina web pe fond BLUE!
</body>
</html>
2.5. Atributele textului

Culoarea textului se stabileşte prin intermediul atributului text în eticheta <body> conform
sintaxei <body text=culoare>.
În următorul exemplu, textul este scris folosind culoarea galbenă.
<html>
<head><title>culoare textului
</title></head>
<body text=greem>
Un text de culoare verde.
</body>
</html>
Pentru obţinerea unor efecte
10
speciale, culorile de bază pot fi combinate.

O etichetă poate să includă mai multe atribute. De exemplu, o etichetă cu două atribute arată
<eticheta atribut1=valoare1 atribut2=valoare2>
Atributele sunt declarate într-o singură etichetă:
<html>
<head>
<title>atribute multiple </title>
</head>
<body bgcolor=blue text=yellow> </body>
</html>
2.6. Atributele unui bloc-

text
Blocul-text afişat este caracterizat
local de următoarele atribute declarate în
eticheta singulară <basefont>:
• mărime (size)
• culoare (color)
• stil (style).
unde:
<basefont size = numar color = culoare style = font>
• număr - poate lua valorile 1, 2, 3, 4, 5, 6 sau 7; (1 pentru fontul cel mai mic și 7
pentru fontul cel mai mare);
• culoare - este precizată prin nume sau printr-o combinaţie RGB;
• font - poate fi un font generic ("serif", "san serif", "cursive", "monospace", "fantasy")
sau un font specific instalat pe calculatorului clientului, ca "Times New Roman", "Helvetica" sau
"Arial". Se acceptă ca valoare și o listă de fonturi separate prin virgulă, de exemplu: "Times New
Roman, serif, monospace".
Domeniul de valabilitate al caracteristicelor precizate de această etichetă se întinde din locul în
care apare eticheta pană la sfârşitul paginii sau până la următoarea etichetă <basefont>. Daca
aceste atribute lipsesc, atunci textul din pagina Web are atribute prestabilite sau atribute precizate de
browserul utilizat.
Atributele prestabilite sunt:
size = 3, color = black, style = "Times New Roman".
Poziţionarea conţinutului paginii Web faţă de marginile ferestrei browserului se poate face cu
ajutorul a două atribute ale etichetei <body>:
• leftmargin (stabileşte distanţa dintre marginea stângă a ferestrei browserului și
marginea stângă a conţinutului paginii);
• topmargin ( stabileşte distanta dintre marginea de sus a ferestrei browserului și
marginea de sus a conţinutului paginii).
Exemplu:
<html>
<head>
<title>Configurarea textului și stabilirea
marginii </title>
</head>
11
<body leftmargin="100" topmargin="50">
Textul are atribute implicite. <br><basefont style="Arial" color="blue" size="6">
Textul este scris cu fontul "Arial", culoare albastra şi marime 6. </body>
</html>
2.7. Atributele fonturilor

Dacă se doreşte formatarea la nivel de font în interiorul unui text sau bloc-text, se pot utiliza
atributele specifice fonturilor:
• culoare: stabilită prin atributul color, precizată ca nume sau valoare #rrggbb.
• tipul sau stilul: stabilit prin atributul face, generic sau specific.
• mărimea: definită prin atributul size, în mod absolut, prin valori numerice de la 1 la
7, sau relativ la mărimea anterioară a fontului (+1, +2 etc. pentru a mări sau micşora dimensiunea
fontului cu 1, 2 etc. faţă de valoarea curentă).
• mărimea în puncte tipografice: stabilită prin atributul point-size, cu valori
numere naturale strict pozitivecare exprimă mărimea fontului în puncte tipografice (Acest atribut
funcţionează numai cu browserele Netscape).
• grosime: definită prin atributul weight, cu valorile posibile 100, 200, 300, 400,
500, 600, 700, 800 și 900 (100 pentru fontul cel mai subţire și 900 pentru cel mai gros).
Toate aceste atribute se declară în etichetele <font> … </font>, care delimitează fragmentele
de text personalizate. Pot fi introduse mai multe fonturi separate prin virgulă. In acest caz browserul
va utiliza primul font pe care îl cunoaşte.
Exemplu:
<html>
<head>
<title> Culoarea şi familia fontului</title>
</head>
< body>
Această linie este scrisa cu caractere normale.
<br> <font color="red">Aceasta linie este
roşie.</font>
<br>Aici<font color="green">fiecare</font>
<font color="blue">cuvant</font>
<font color="yellow">are</font>
<font color="cyan">alta</font>
<font color="#3478fa">culoare.</font>
<font face="monospace">Linie scrisa cu caractere monospatiate.</font>
<br> <font face="arial">Linie scrisa cu caractere arial.</font>
</body>
</html>
Exemplu:
12
<html>
<head>
<title> Marimea fontului</title>
</head>
<body>
Aceasta linie este scrisa cu
caractere normale.
<font size="5">Fonturi de marime
5.</font>
<basefont size="4">Fonturi de
marime 4.</font>
<font size="-3">Fonturi de marime
1.</font>
<font size="+2">Fonturi de marime
6.</font>
<font point-size="30">Fonturi de
marime 30 pt (numai cu Netcape Communicator).</font>
</body>
</html>
2.8. Stiluri fizice pentru blocuri-text

Pentru ca un bloc de text sa apară în pagină evidenţiat (cu caractere aldine), trebuie inclus
între delimitatorii <b>...</b>("bold").
Pentru ca un text să fie scris cu caractere mai mari cu o unitate decât cele curente, acesta
trebuie inclus într-un bloc delimitat de etichetele <big>...</big>.
Pentru ca un text sa fie scris cu caractere mai mici cu o unitate decât cele curente acesta
trebuie inclus într-un bloc delimitat de etichetele <small>...</small>.
Pentru ca un text sa fie scris cu caractere cursive acesta trebuie înclus într-un bloc delimitat de
etichetele <i>...</i>("italic").
Pentru a insera secvenţe de text aliniate ca indice (subscript) sau ca exponent (superscript),
aceste fragmente trebuie delimitate de etichetele <sub>...</sub>, respectiv <sup>...</sup>.
Pentru a insera un bloc de caractere subliniate se utilizează etichetele <u>...</u> ("underline").
Pentru a insera un bloc de caractere „tăiate” se utilizează etichetele <strike>...</strike> sau
<s>...</s>.
În exemplul următor se utilizează
toate etichetele menţionate anterior.
<html>
<head>
<title>Stiluri pentru blocuri de text
</title>
</head>
<body>
<b>Text scris cu caractere
îngrosate.</b>
<br> <big>Text cu caractere mărite cu o
13
unitate <big>mai mare<big> și mai mare<big> și mai mare.</big></big></big></big><br>
<small>Textul este scris cu caractere micşorate cu o unitate <small>mai mic.</small></small><br>
<i>Text scris cu caractere italice.</i>
<br> In această linie <sup>sus</sup> este superscript iar <sub>jos</sub> este subscript.<br>
<strike>Această linie este în întregime secţionată de o linie orizontală.</strike> <br> În aceasta linie
următorul cuvânt este <u>subliniat</u>, iar cuvântul <s>strike</s> sectionat.
</body>
</html>
Obs:
1. Aceste etichete pot fi imbricate (intercalate) pentru definirea atributelor multiple.
2. Un fragment de text poate fi scris cu caractere aldine și cursive în acelaşi timp.
3. Pentru un fragment de text se pot folosi simultan stilurile subliniat, exponent, mărit şi
cursiv.
Exemplu:
<html>
<head>
<title>Imbricarea etichetelor </title>
</head>
<body> Aceasta linie este formata din text
normal.<br> Normal <b>îngrosat <i>
ingrosat și italic </i> îngrosat </b>.
<br> Normal <u>subliniat, <b> subliniat și
îngrosat, <big>subliniat, ingrosat și marit.
<br>
<i>Subliniat, îngrosat ,marit și italic.</i>
</big></b></u>
</body>
</html>
2.9. Stiluri logice pentru blocuri-text

Cele opt stiluri de scriere a caracterelor unui bloc-text nu iau în considerare semnificaţia
informaţiei conţinute în aceste blocuri.
În continuare sunt prezentate stilurile logice utilizate la formatarea blocurilor-text în
concordanţă cu semnificaţia lor în cadrul paginii web.
Pentru a pune în evidenţă, prin stilul cursiv, anumite fragmente de text se utilizează etichetele:
• <cite>...</cite>( "cite" = citat);
• <em>...</em>("emphasize" = a evidenţia).
În locul lor se poate utiliza etichetele echivalente <i>...</i> sau <q>...</q> ("inline
quotation") care permit inserarea în text a citatelor care vor fi afişate de către browser cu caractere
cursive.
Următoarele etichete au efecte similare. Ele permit scrierea fragmentului de text cu caractere
monospaţiate (de tipul celor folosite de o maşina de scris ):
• <code>...</code>( " code " = cod sau sursa);
• <kbd>...</kbd>(" keyboard " = tastatură);
• <tt>...</tt>(" teletype " = teleprinter).
14
Eticheta de tip bloc <blink>...</blink> delimitează fragmente de text clipitoare. Această

etichetă funcţionează numai în browserul Netscape Navigator.
Exemplu:
<html>
<head>
<title>Blocuri de
caractere monospaţiate
şi clipitoare </title>
</head>
<body>
Aceasta linie este
formată cu text
normal.<br>
Codul funcţiei f(x,y) este:
<code>Function f(x,y)
{return x+y;}</code><br>
Tastaţi următoarea
comandă DOS:
<kbd>copy c:\windows\*
c:\temp<kbd><br>
<tt>Aşa se tipăreste la
imprimata.</tt><br>
Acest cuvânt are aparitie intermitenta <blink>Blink.</blink>
</body>
</html>
2.10. Etichete dedicate blocurilor speciale
2.10.1. Bloc de adresă

Dacă într-o pagină web trebuie inclusă o adresă , atunci putem utiliza facilităţile oferite de
eticheta dedicată: <address>...</address>, care va scrie cursiv blocul-text de adresă.
Exemplu:
<html>
<head>
<title> Adresa</title>
</head>
<body>
Adresa instituţiei noastre este
:<address> Universitatea
Petrosani<br>
Str. Universitatii nr 20 <br>
Petrosani, Hunedoara, Romania </address>
</body>
15
</html>
2.10.2. Bloc-text cu deplasare spre dreapta (indention)

Pentru ca un bloc de text sa fie indentat (marginea din stânga a textului să fie deplasată la
dreapta la o anumită distanţă faţă de marginea paginii), acesta trebuie inclus între etichetele
<blockquote>...</blockquote>.
Exemplu:
<html>
<head>
<title> Indentarea unui bloc</title>
</head>
<body>
Textul ce urmeaza este
indentat:<blockquote> Hypertext reprezintă
un text îmbogățit ce conține text obișnuit,
precum și etichete pentru formatarea textului
și incapsularea altor tipuri de informatii, ca
legaturi catre alte resurse, sunete, imagini
s.a.m.d. </blockquote>
</body>
</html>
2.10.3 Blocuri paragraf

Eticheta-paragraf <p>determină:
• inserarea unui spaţiu suplimentar înainte de blocul paragraf;
• inserarea unui spaţiu suplimentar după blocul paragraf, dacă se foloseşte
delimitatorul </p>(acesta fiind opţional);
• alinierea textului cu ajutorul atributului align, având valorile posibile "left",
"center" sau "right".
Exemplu:
<html>
<head>
<title> Blocuri paragraf</title>
</head>
<body>
Prima linie
<p> Linie generata de un paragraf (in mod implicit paragraful este aliniat la stânga).
<p align="right"> Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. <br> Paragraf aliniat la
dreapta. Paragraf aliniat la dreapta. <br> Paragraf aliniat la dreapta. Paragraf aliniat la
dreapta. <br>
<p align="center"> Paragraf aliniat în centru. Paragraf aliniat în centru. <br> Paragraf aliniat în
centru. Paragraf aliniat în centru. <br> Paragraf aliniat în centru. Paragraf aliniat în centru.
16
</body>
</html>
Vizualizare:
2.10.4. Blocuri de titlu

Într-un text, titlurile de capitole pot fi introduse cu ajutorul etichetelor de antet (headers):
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
Toate aceste etichete se referă la un bloc de text și trebuie însoţite de o etichetă de încheiere
similară.
Aceste etichete acceptă atributul align pentru alinierea titlului blocului de text la stânga (în mod
prestabilit ), în centru și la dreapta.
<h1> permite scrierea unui titlu cu caractere mai mari și aldine, pe când <h6> foloseşte
caracterele cele mai mici.
Exemplu:
<html>
<head>
<title> Blocuri de titlu</title>
</head>
<body>
<h1 align="center"> Titlu de mărime 1 aliniat în centru </h1>
<h2 align="right"> Titlu de mărime 2 aliniat la dreapta. </h2>
<h4> Titlu de mărime 4 aliniat la stânga (implicit) </h4>
</body>
</html>
Vizualizare:
17
2.10.5 Blocuri <nobr>
Blocul de text cuprins intre etichetele <nobr>...</nobr>va fi afişat pe o singură linie.
Exemplu:
<html>
<head>
<title> Blocul <nobr></title>
</head>
<body>
<nobr> O singura linie. O singura linie. O singura linie. O singura linie. O singura linie.
</nobr>
</body>
</html>
Vizualizare:
2.10.6 Blocuri <div>

Modalitatea cea mai eficientă de delimitare și de formatare pe subblocuri a unui bloc de text
este folosirea delimitatorilor de divizare <div>...</div>.
Un atribut foarte util pentru stabilirea caracteristicilor unui bloc de divizare este cel de
aliniere align(alignment ).
Valorile posibile ale acestui parametru sunt:
18
• " left " ( aliniere la stanga );

• " center " ( aliniere centrala );
• " right " ( aliniere la dreapta ).
Un bloc <div>...</div> poate include mai multe subblocuri. In acest caz, alinierea
precizată de atributul align al blocului are efect asupra tuturor subblocurilor incluse în blocul
<div>.
Un bloc <div>...</div> admite atributul nowrap care interzice întreruperea rândului de către
browser.
Exemplu:
<html>
<title> Aliniere pe orizontală <div></title>
<body>
Aceasta linie este o linie normală. Următoarele paragrafe sunt aliniate la dreapta.
<div align="right">
O singură linie. O singură linie. O singură linie. O singură linie.<br>
O singură linie. O singură linie. O singură linie. O singură linie.<br>
</div>
<div align="center">
Paragraf aliniat în centru. Paragraf aliniat în centru.<br>
Paragraf aliniat în centru. Paragraf aliniat în centru.<br>
</div>
</body></html>
Vizualizare:
19
2.11. Linii orizontale
Într-o pagină Web pot fi inserate linii orizontale folosind eticheta <hr> și următoarele
atribute:
• align permite alinierea liniei orizontale. Valorile posibile sunt "left" ,"center", "right";
• widthpermite alegerea lungimii liniei;
• sizestabileşte grosimea liniei;
• noshade,când este prezent, defineşte o linie fără umbră;
• colorpermite definirea culorii liniei.
Exemplu:
<html>
<head>
<title> Linii orizontale</title>
</head>
<body>
<h1 align="center"> Tipuri de linii orizontale </h1>Linie implicită alinierea stânga,
lăţime 100%, grosime 2 cu umbră.
<hr> Linie aliniată în centru , de lăţime 50%, grosime 5 pixeli , fără umbră.
<hr align="center" width="50%" size="5" noshade>Linie aliniata la dreapta, de lăţime 150 de
pixeli, grosime 12 pixeli.
<hr align="right" width=150 size=12 >
</body>
</html>
Vizualizare:
Exemplu:
<html>
<head>
<title> Linii orizontale</title>
20
</head>
<body>
<center> <hr width=10%> <hr width=40%> <hr width=70%> <hr width=100%> <hr
width=70%> <hr width=40%> <hr width=10%> </center>
</body>
</html>
Vizualizare:
2.12. Introducerea imaginilor în pagina web

Imaginile sunt stocate în fişiere cu diverse formate. Formatele acceptat de browsere pentru
fişierele imagine sunt:
• GIF (Graphics Interchange Format) cu extensia .gif;
• JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;
• XPM (X PixMap) cu extensia .xmp;
• XBM (X BitMap) cu extensia .xbm;
• BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);
• TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;
Cele mai răspândite formate sunt GIF(8 biţi de culoare, 256 culori posibile) şi JPEG (24 biţi
pentru o culoare, 16777216 de culori posibile).
Adresa URL a unei imagini se exprimă în funcţie de directorul care conţine documentul
HTML care face referire la acea imagine.
Pentru a insera o imagine într-o pagină web, se utilizează eticheta de început <img>
("image"=imagine) sau mai general <object> (obiect) cu diferite atribute:
• src("source"=sursă) dat de adresa URI a imaginii sau obiectului care se inserează;
• alt, o scurtă descriere a obiectului care apare la trecerea mouse- ului pe deasupra
imaginii;
• title, ca atribut inclus în eticheta imaginii, apare ca titlul
imaginii echivalent descrierii produse de atributul alt.
• longdesc, adresa URI a documentului care conţine o descriere
detaliată a obiectului;
• name,numele obiectului care poate fi folosit în documente de tip script pentru a-l
apela;
• height, înălţimea imaginii;
• width, lăţimea obiectului.
În afara acestora se pot declara atribute de aliniere align, de spaţiere verticală vspace sau
orizontală hspace,de definire a unui chenar border.
21
Alinierea unei imagini se poate face prin intermediul atributului align care poate lua
următoarele valori:
• " left " - aliniere la stânga; celelalte componente sunt dispuse pe în partea dreaptă;
• " right " - aliniere la dreapta; celelalte componente sunt dispuse în partea stângă;
• " top " - aliniere deasupra; partea de sus a imaginii se aliniază cu partea de sus a
textului ce precede imaginea;
• " middle " - aliniere la mijloc; mijlocul imaginii se aliniază cu linia de baza a textului
ce precede imaginea.
• " bottom " - aliniere la bază; partea de jos a imaginii se aliniază cu linia de baza a
textului.
Atributele hspace și vspace precizează distanţa în pixeli pe orizontală, respectiv pe verticală,
dintre imagine și restul elementelor din pagină.
În versiunile mai noi de HTML, sunt admise diferite „comportări” ale obiectelor (imagine,
applet, formulare etc) în funcţie de anumite „evenimente” produse (onMouseOver, onKezPress etc).
Dacă imaginea se află în acelaşi director cu fişierul HTML care face referire la imagine,
atunci adresa URL a imaginii este formată numai din numele imaginii, inclusiv extensia.
Obs:
1. O imagine poate fi utilizată pentru a stabili fondul unei pagini Web. In acest scop se
foloseşte atributul background al etichetei <BODY>, având ca valoare adresa URL a imaginii.
Imaginea se multiplică pe orizontală şi pe verticală până umple întregul ecran.
2. O legătură (link) introduce în pagina Web o zona activă. Efectuând click cu butonul mouse-
ului pe aceasta zona în browser se va încărca o alta pagină. În mod prestabilit imaginea utilizată
pe post de zonă activă este înconjurată de un chenar având culoarea unei legături. Dacă stabilim
pentru atributul borderal etichetei valoarea0 acest chenar dispare.
3. Imaginile pot fi utilizate pentru a obţine efecte deosebite într-o pagină web (linii orizontale
formate cu ajutorul imaginilor , simboluri speciale pentru elementele unei liste neordonate sau
elemente de animaţie etc).
Exemplu:
<html>
<head></head>
<BODY>
<P>Astazi a nins la Petrosani. Iata o fotografie a Universitatii din Petrosani, iarna.
<CENTER> <IMG src="iarna_la_univ.bmp" alt="Iarna la universitate"> </CENTER>
</BODY>
</html>
Vizualizare:
Astazi a nins la Petrosani. Iata o fotografie a Universitatii din Petrosani, iarna.
22
2.13. Legături între paginile web

Link-urile către diverse pagini web, reprezentate prin blocuri-text de culori diferite, sunt
considerate active deoarece sunt sensibile la comanda mouse-ului (click-stânga) care determină
trecerea la o altă pagină specificată prin:
¾ numele fişierului care se găseşte în acelaşi director cu pagina iniţială:
exemplu: fisier.html
¾ adresa relativă a fişierului dacă acesta este stocat pe acelaşi disc local:
exemplu: ../../fisier.html
¾ adresa URL a unui site web:
exemplu: http://www.netscape.com
Pentru un link se foloseşte eticheta cu semnificaţia de referinţă HTML:
<href>, împreună cu perechea de etichete ancoră: <a> … </a> care delimitează
blocul-text activ:
<a href=”adresa”> text-activ </a>
¾ ancora altui paragraf din aceeaşi pagină web, precizată printr-un nume sau un
identificator (id) ataşabil oricărui tip de eticheta HTML:
<a href=”#numele-ancorei”> text-activ </a>
…
<a name=”numele-ancorei”> Text ancorat
<a href=”#identificator”> text-activ </a>
…
<eticheta id=”identificator”> text oarecare </eticheta>
Într-o pagină foarte lungă pot exista puncte de reper către care se definesc legături. O ancoră se
defineşte prin eticheta <a>. Pentru a defini ancora se utilizează atributul name care primeşte ca
valoare un nume atribuit ancorei (de exemplu "a1"). Pentru a insera o legătura către "a1" definită
în aceeaşi pagină se utilizează eticheta <a> având atributul href de valoare "#a1". Pentru a introduce
o legătură către o ancoră definita în alt document web aflat în acelaşi director, atributul hrefprimeşte o
valoare de forma "nume_fisier.html#nume_ancora".
Exemplu:
<html>
<head>
<title>
23
Ancore
</title>
</head>
<body>
<h3>
Ancore definite in acelasi document și in alt document
</h3>
<a href="#ancora1">
Link catre ancora 1
</a>
<br>
<a href="../../fisier.html#anc">
Link catre o ancora din alt document
</a>
<br>1<br>2<br>3<br>4<br>5
<br>6<br>7<br>8<br>9<br>10
<br>11<br>12<br> 13<br>14<br>15
<br>16<br> 17<br>18<br>19<br>20
<br> 21<br>22<br>23<br>24<br>25
<br>26<br>27<br>28<br>29<br>30
<br>
<a name="ancora1">textul marcat cu ancora 1</body>
</html>
Vizualizare:
Ancore definite in acelasi document și in alt document

Link catre ancora 1
Link catre o ancora din alt document
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
24
17
18
19
20
21
22
23
24
25
26
27
28
29
30
textul marcat cu ancora 1
Ancorele pot fi definite prin atributul „identificator” id. Atributul id este un atribut
universal, adică poate fi ataşat oricărui element sau obiect al unei pagini Web. Acest atribut va
înlocui complet atributul name, care putea fi ataşat numai anumitor elemente.
Atributul id primeşte ca valoare un nume (de exemplu "id1") care identifică în mod unic un
element.
Atributul idpoate fi utilizat pe post de ancoră într-o pagină Web conform sintaxei:
<eticheta id = "id1"> ... </eticheta>
Exemplu:
<a href = "#id1" >Link catre elementul "id1" </a>
Exemplu:
<html>
<head><title>Ancore</title></head>
<body>
<H1>Cuprins</H1>
<P><A href="#a1">Introducere</A><BR>
<A href="#a2">Generalitati</A><BR>
<A href="#a2.1">Paragraful 2.1</A><pre>
...
...
...
...
...
...
...
...
...
...</pre>
<H2><A name="a1">Introducere</A></H2>
25
...
...
...
...
...
...</pre>
<H2><A name="a2"> Generalitati </A></H2>
...sectiunea 2...<pre>
...
...
...
...
...
...
...
...
...
...
...</pre>
... sectiunea 1... <pre>
...
...
...
<H3><A name="a2.1"> Paragraful 2.1</A></H3>
...sectiunea 2.1...
<pre>
...
...
...
...
...
...</pre></body></html>
Acelaşi efect se obţine prin folosirea identificatorilor direct în etichetele de header.
Exemplu:
<html>
<head><title>Ancore</title></head>
<body>
<H1>Cuprins</H1>
<P><A href="#a1">Introducere</A><BR>
26
<A href="#a2">Generalitati</A><BR>
<A href="#a2.1">Paragraful 2.1</A><pre>
...
...
...
...
...
...
...
...</pre>
<H2 id=a1">Introducere</A></H2>
...
...
...
...
...
...
...
...
...
...</pre>
<H2 id="a2"> Generalitati </A></H2>
...
...
...
...
...
...
...
...
...
...
...</pre>
<H3 id=”a2.1"> Paragraful 2.1</A></H3>
...sectiunea 2.1...
<pre>
...
...
...
...
...
...</pre></body></html>
Culoarea textului care specifică un link poate fi precizată în funcţie de starea acestuia, prin
3 atribute ale etichetei <body> :
o link nevizitat: link
o link vizitat: vlink o link activ: alink.
Tot ca linkuri apar şi adresele de poştă-electronică care permit lansarea în execuție a
serviciului de e-mail direct din pagina web:
<a href=mailto:destinatar@yahoo.com title=”adresa de e-mail”>.
E-mail:destinatar@yahoo.com </a>
27
Atributul title al etichetei <a> comandă apariţia unei mici ferestre în pagina Web când
indicatorul mouse-ului se află pe o legătură, fereastră în care este afişată valoarea acestui atribut
pentru a furniza informaţii suplimentare despre semnificaţia acelei legături.
Elementul „ancoră” permite realizarea legăturilor între paginile web și fişiere audio sau
video, cu diferite formate (AU, AIFF/AIFC, WAVE, MPEG, MIDI sau Quick Time, AVI), cu
extensiile corespunzătoare (.au, .aiff, .aif, .wav, .mpeg, .mp3, .midi, .mid, .mov, .avi). Calea spre
fişierul respectiv poate fi omisă atunci când acesta se află în acelaşi director cu pagina propriu-zisă sau
poate fi specificată în formă relativă la nodul rădăcină din sistemul de fişiere sau în format
absolut.
2.14. Liste, tabele, cadre, formulare

Paginile web pot include o serie de elemente complexe (liste, tabele, cadre, formulare,
script-uri Java etc), cu diverşi parametri de formatare.
2. 14. 1 Liste de termeni

În paginile web se pot introduce liste ordonate sau neordonate folosind următoarele elemente
HTML:
<dl> lista de definitii "definition list"
<dt> termen definit "definition term"
<dd> definitie "definition description"
</dl>
<ul> lista neordonata "unordered list"
<li> termen din lista “list item”
</ul>
<ol> lista ordonata "ordered list"
<li> termen din lista “list item”
</ol>
Listele ordonate pot folosi diverse stiluri pentru ordonarea elementelor, specificate prin
atributul
Type(Tabel 1).
Eticheta <ol> poate avea atributul start care stabileşte valoarea iniţială a secvenţei de ordonare
în cazul în care nu se porneşte de la valoarea prestabilită (1, I, i, a, A) . Valoarea acestui atribut trebuie
să fie un număr întreg pozitiv.
Tabel 1. Stiluri de ordonare a listelor în HTML Type.Stil de numerotare
1 cifre arabe 1, 2, 3, ... Elementele din listele neordonate
a litere mici a, b, c, ... pot fi marcate cu diverse elemente grafice
A majuscule A, B, C, ... (cerc, disc sau pătrat) specificate de
i cifre romane mici i, ii, iii, ... asemenea prin intermediul atributului Type
(Tabel 2):
I cifre romane scrise cu majuscule I, II, III …
Tabel 2. Elemente grafice de marcare
Se pot utiliza și alte imagini ca elemente grafice de marcare a
Type Element grafic elementelor dintr-o listă neordonată prin precizarea sursei imaginii
disc disc • dorite înaintea fiecărui element din listă: <img src="…">.
Listele ordonate sau neordonate pot fi imbricate pentru crearea
circle cerc o unor liste complexe, pe mai multe nivele, ca în exemplul următor:
square pătrat
Exemplu:
<html>
<head>
28
<title>liste imbricate</title>
</head>
<body><h1 align=center>O lista ordonata de liste ordonate și neordonate</h1><hr>
<ol>Un sistem informatic include:
<li>Elemente hardware:
<ol>
<li> placa de baza
<li> procesor/cooler
<li> memorie RAM
<li> harddisk
<li> placă video
<li> placă de retea
<li> periferice
</ol>
<li>Sistem de operare:
<ul>
<li> DOS
<li> Linux
<li> Unix
<li> Windows
</ul>
<li>Programe de aplicatii:
<ul type="disc">
<img src="1.gif"> CorelDraw <br>
<img src="1.gif"> Excel <br>
<img src="1.gif"> Matlab <br>
<img src="1.gif"> Word <br>
</ul>
</ol>
</body>
</html>
Vizualizare:
29
O listă de meniuri este un bloc delimitat de etichete corespondente <menu>...</menu>. Fiecare
element al listei este iniţiat de eticheta <li> (list item). Cele mai multe browsere afişează lista de
meniuri ca pe o listă neordonată.
O listă de directoare este un bloc delimitat de etichete corespondente <dir>...</dir>
("directory"). Fiecare element al listei este iniţiat de eticheta <li>. Cele mai multe browsere afişează
lista de directoare de asemenea ca pe o listă neordonată.
2.14.2 Tabele
Tabelele sunt create cu etichetele <table> ... </table>, prin marcarea liniilor tabelului cu
eticheta <tr> (table row), şi divizarea lor în coloane cu elementul <td>.
Exemplu:
<table>
<tr> <td> Linia 1, Coloana 1 <td> Linia 1, Coloana 2
</table>
Dimensiunile unui tabel - lăţimea și înălţimea - pot fi stabilite exact prin intermediul a două
atribute ale etichetei <table>:widthşi height.
Valorile acestor atribute pot fi:
• numere întregi pozitive reprezentând lăţimea, respectiv înălţimea, tabelului,
exprimate în pixeli.
• numere întregi cu valori cuprinse între 1 şi 100, urmate de semnul %, reprezentând
procente din lăţimea şi înălţimea totală a paginii web.
Mai multe detalii pentru un tabel se specifică prin intermediul altor elemente HTML, ca în
30
următorul exemplu în care se creează un tabel cu un grup de 5 coloane și 3 linii, având diferite
lăţimi precizate prin elementul <COLGROUP>:
Exemplu:
<html>
<TABLE border="1">
<THEAD>
<TR center> ... header ...
</THEAD>
<TBODY>
<COLGROUP span="2", width="50">
<TR><TD> 1,1 <td> 1,2 <td> 1,3 <td> 1,4 <td> 1,5
<TR><TD> 2,1 <td> 2,2 <td> 2,3 <td> 2,4 <td> 2,5
<TR><TD> 3,1 <td> 3,2 <td> 3,3 <td> 3,4 <td> 3,5
</TBODY>
</TABLE>
</html>
Dacă se doreşte formatarea diferită a coloanelor din tabel, se foloseşte elementul <COL>
care permite impunerea lăţimii fiecărei coloane în mod absolut, ca număr de pixeli, sau relativ,
procentual sau cu ponderi, ca în următoarele exemple:
<html>
<TABLE border="1">
<COLGROUP>
<COL width="30">
<COLGROUP>
<COL width="20">
<COL width="0*">
<COL width="2*">
<COLGROUP align="center">
31
<COL width="1*">
<COL width="3*" align="char" char=",">
<TR> <TD> 1,1 <td> 1,2 <td> 1,3 <td> 1,4 <td> 1,5 <td> 1,6
<TR> <TD> 2,1 <td> 2,2 <td> 2,3 <td> 2,4 <td> 2,5 <td> 2,6
<TR> <TD> 3,1 <td> 3,2 <td> 3,3 <td> 3,4 <td> 3,5 <td> 3,6
</TABLE>
sau
<html>
<TABLE border="2">
<COLGROUP align="left">
<COL width="30%">
<COL width="10%">
<COL width="20%">
<COL width="10%">
<COL width="10%" >
<COL width="20%" align="char" char=",">
<TR> <TD> 1,1 <td> 1,2 <td> 1,3 <td> 1,4 <td> 1,5 <td> 1,6
<TR> <TD> 2,1 <td> 2,2 <td> 2,3 <td> 2,4 <td> 2,5 <td> 2,6
<TR> <TD> 3,1 <td> 3,2 <td> 3,3 <td> 3,4 <td> 3,5 <td> 3,6
</TABLE>
0* semnifică alocarea unui spaţiu minim coloanei respective.
Orice valoare numerică pozitivă urmată de un asterisc reprezintă o pondere din suma
tuturor valorilor astfel marcate. În exemplul de mai sus apar trei valori nenule marcate cu un asterisc
(1*, 2*, 3*) cu suma 6 ceea ce înseamnă că lăţimile acelor coloane corespund la 1/6, 1/3 și 1/2 din
spaţiul alocat acestora.
Se observă modalitatea de aliniere a textului din coloanele tabelului prin atributul de
aliniere align cu valorile posibile left,right sau center.
Dacă se omite să se specifice lăţimea unei singure coloane, browserul va afişa tabelul cu
dimensiuni relative la lăţimea ecranului.
Titlul tabelului se specifică prin elementul <CAPTION>, care poate avea atributul de
32
aliniere align care să precizeze poziţia titlului faţă de tabel și care poate lua una dintre valorile:
• " bottom" (sub tabel);
• " top" (deasupra tabelului);
• " left" (în stânga tabelului);
• " right" (în dreapta tabelului).
Pentru a specifica denumirea fiecărei coloane se utilizează etichete de tip cap de tabel
<TH> …
</TH>(tabel header). Conţinutul celulelor astfel definite este scris cu caractere aldine și centrat.
Exemplu:
<center>
<TABLE border="1" summary="Examen la disciplina 'Retele de calculatoare'">
<CAPTION align=”center”>
<b> Note obtinute la examenul „Rețele de calculatoare”</b> </CAPTION>
<COLGROUP align="left" span="2" width="150">
<COL width="20%">
<TR>
<TH>Nume</TH>
<TH>Prenume</TH>
<TH>Nota</TH>
<TR>
<TD>Anton</TD>
<TD>Ioanan</TD>
<TD>10</TD>
<TR>
<TD>Barbu</TD>
<TD>Georgiana</TD>
<TD>9</TD>
<TR>
<TD>Costea</TD>
<TD>Mircea</TD>
<TD>8</TD>
</TABLE>
33
Unele celule din tabel pot fi reunite, fie pe orizontală (colspan), fie pe verticală (rowspan),
având grijă să nu se producă suprapuneri nedorite între celule. De asemenea, se pot impune diferite
spaţieri între celule dar şi între marginea tabelului și cele ale celulelor:
<center>
<TABLE border="1" cellspacing="20" cellpadding="20%">
<CAPTION> <b> Tabel cu celule reunite </b>
<TR><TD>1 <TD>2 <TD>3
<TR><TD colspan="2"> 4 <TD> 6
<TR><TD>7 <TD>8 <TD>9
<TR><TD rowspan="2">10 <TD>11 <TD>12
<TR><TD> 14 <TD> 15
<TR><TD> 16 <TD> 17<TD> 18
</TABLE>
Gruparea liniilor din tabel se face cu ajutorul elementului <TBODY>, cu eticheta de final
</TBODY> opţională:
<html>
<TABLE border="2" rules="groups">
<TBODY>
<TR><TD> 1,1 <td> 1,2 <td> 1,3 <td> 1,4 <td> 1,5
<TR><TD> 2,1 <td> 2,2 <td> 2,3 <td> 2,4 <td> 2,5
<TBODY>
<TR><TD> 3,1 <td> 3,2 <td> 3,3 <td> 3,4 <td> 3,5
</TABLE>
Culoarea de fond a unui tabel respectiv a unei celule din tabel se stabileşte prin atributul
bgcolor care poate fi introdus în orice etichetă din tabel: <TABLE>, <TR>, <TD> (în ordinea
crescătoare a priorităţii).
2.14.3 Cadre
Pentru gruparea elementelor în cadre și crearea acestora în paginile web, se înlocuiesc
etichetele <body> ... </body>cu <frameset> ... </frameset>.
Descrierea structurii cadrelor se face fie prin precizarea numărului de pixeli alocat, fie prin
modul de dispunere a acestora ca linii (rows) sau coloane (cols), cu alocarea spaţiului în mod egal
(*) sau diferenţiat (%):
<frameset cols=”*,*,*”>
În interiorul setului se specifică sursele cadrelor:
<frame src=”c1.html”> cadrul 1
2.14.4 Formulare
Formularele sunt utilizate în documentele HTML pentru transmiterea unor informaţii de la
utilizator la serverul web, în diverse aplicaţii de comerţ electronic, învăţământ la distanţă etc.
34
Pentru crearea acestora se folosesc etichetele: <FORM > … </FORM> și diferite elemente
de control:
• butoane (submit, push, reset), declarate prin elementele BUTTONsau INPUT.
• căsuţe de validare (check box) sau butoane „radio” care acţionează ca elemente de
comutare
(on/off), create prin elementul INPUT.
• căsuţe de introducere a textelor (text box), create fie prin elementul INPUT, fie prin
TEXTAREA.
• meniuri, create cu elementele SELECT, OPTGROUP, OPTION.
• elemente de selecare a unor fişiere (file select) care se vor transmite serverului
odată cu formularul respectiv. Sunt create tot cu ajutorul elementului INPUT.
• controlere ascunse, utile pentru comunicaţia client/server, create prin elementul INPUT.
• obiecte de control, create cu elementul OBJECT.
Câmpurile dintr-un formular sunt etichetate şi asociate unor variabile, de diferite tipuri.
Se pot folosi diverse imagini ca butoane pentru selectarea unor opţiuni și efectuarea unor
acţiuni, cu comportamente dictate de diferite evenimente (onmouseon, onmouseover, onmouseup,
onmousedck, onmouseout, onkeypress etc) descrise prin diverse scripturi.
Utilizatorul completează formularul electronic prin înscrierea de texte în căsuţele
corespunzătoare, selectarea opţiunilor dorite prin acţionarea unor butoane sau alegerea lor din listele
de căutare sau de valori impuse, urmănd ca la final să transmită datele pentru procesare unui server
(Web, de poştă electronică etc) specificat prin URI, aceasta reprezentând acţiunea de trimitere a
formularului (submit).
Elementele de control sunt descrise prin atributele name şi value prin care se specifică numele,
respectiv valoare lor iniţială şi implicită pe care o iau în cazul resetării formularului. Dintre atributele
elementului FORMse remarcă:
• action URI
• method cu valorile getsau post
• enctype pentru trimiterea formularului prin poşta electronică, se foloseşte
o tehnică de criptare "application/x-www-form-urlencoded" sau "multipart/form-data”
• name sau id.
Elementul INPUT are următoarele atribute:
• type cu valorile posibile text, password, checkbox, radio, submit, reset, file, hidden,
image, button
• name
• value - opţional pentru controler radio sau checkbox
• size -specificat ca număr de pixeli sau de caractere.
• maxlength
• checked - numai pentru controler radio sau checkbox
• src -specifică fişierul sursă al unui element.
Exemplu:
<FORM action="http://www.etc.tuiasi.ro" method="post">

<P><pre>
<LABEL for="nume">Numele: </LABEL>
<INPUT type="text" id="nume"><BR>
<LABEL for="prenume">Prenumele: </LABEL>
<INPUT type="text" id="prenume"><BR>
<LABEL for="email">e-mail: </LABEL>
<INPUT type="text" id="email"><BR> Varsta: <br>
35
<INPUT type="radio" name="varsta" value="1"> sub 25 de ani <BR>
<INPUT type="radio" name="varsta" value="2"> 25 – 35 <BR>
<INPUT type="radio" name="varsta" value="3"> 36 – 45 <BR>
<INPUT type="radio" name="varsta" value="4"> peste 45 de ani <BR>
<INPUT type="submit" value="Send"> <INPUT type="Reset">
</pre></P>
</FORM>
Vizualizare:
În multe formulare se utilizează meniuri speciale (jump menu)sau liste de căutare, care permit
selectarea unui element dintr-o listă dată, ceea ce elimină riscurile introducerii unor date eronate, cu
greşeli de scriere.
Exemplu:
Sediul firmei se afla in localitatea:

<select>
<option>ARAD</option>
<option>BRASOV</option>
<option>BUCURESTI</option>
<option>CLUJ</option>
<option>CONSTANTA</option>
<option>IASI</option>
36
<option>TIMISOARA</option>
</select>
Vizualizare:
2.15. STILURI HTML
Stilul unui document HTML poate fi specificat fie direct în interiorul acestuia, fie într-un
fişier extern scris într-un anumit limbaj de programare (de exemplu, CSS – Cascading Style Sheet).
Stilul este marcat ca element HTML cu etichetele <STYLE> … </STYLE>, care are mai
multe atribute:
type = specifică limbajul folosit pentru definirea stilului (de exemplu "text/css").
media = specifică mediul căruia i se adresează acel stil (valoare implicită: "screen", alte
valori: "aural" , "print", "projection", sau valori multiple separate prin virgule.)
title= specifică numele unui stil.
Se pot utiliza mai multe stiluri pentru aceeaşi pagină web, în funcţie de mediul de prezentare:
ecran (screen), imprimantă (print), proiector (projection) sau oral (aural).
Exemplu:
<HEAD>
<STYLE type="text/css" media="projection"> H1 { color: darkblue}
</STYLE>
<STYLE type="text/css" media="print"> H1 { text-align: center }
</STYLE>
<STYLE type="text/css" media="aural">
A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
</STYLE>
</HEAD>
Stilurile definite în fişiere externe pot fi utilizate în mai multe documente HTML ceea ce le
face deosebit de atractive pentru creatorii de pagini web.
Un stil astfel creat este apelat prin elementul HTML link cu atributele href, type, rel și
37
title.
Atributul href ia ca valoare adresa URI a fişierului extern în care este definit stilul
HTML respectiv.
Ca și în cazul stilurilor definite intern, atributul typeia ca valoare numele limbajului utilizat.
Pentru a crea un stil persistent, atributul rel ia valoarea "stylesheet" iar atributul title nu este
definit.
Pentru a crea un stil preferat, atributul relia valoarea "stylesheet"iar cu atributul titlese specifică
numele acestuia.
Pentru a crea un stil alternativ, atributul rel ia valoarea "alternate stylesheet" iar numele
stilului apare ca valoare a atributului title.
Aplicarea stilului dorit pe un paragraf dat se face prin setarea atributului class al
elementului
<P>.
Exemplu:
<HTML>
<HEAD>
<LINK href="special.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="special" align="center">Acesta este stilul dorit.
</BODY>
</HTML>
unde fişierul special.css conţine numai câteva comenzi CSS:
P.special { color : blue; border: solid blue; margin-left: 450px;
margin-right: 450px;
}
Într-o pagină web, se pot utiliza atât stiluri definite intern, cât și stiluri definite în alte fişiere
externe. Scopul lor este de a crea site-uri web personalizate și atractive.
38
BIBLIOGRAFIE
[1] http://www.w3schools.com/
[2]
39
APLICAŢIE
Creaţi un site web personalizat în care să includeţi cât mai multe dintre elementele specifice
paginilor web, aşa cum au fost prezentate anterior în lucrare.
40
LABORATOR NR.1
1.1. EXPLICAREA NOŢIUNILOR DE LINIAR MEDIA ŞI HYPERMEDIA
1.2. DEFINIREA HTML
1.3. ELEMENTELE DE BAZĂ ALE STRUCTURII DOCUMENTULUI
1.1. EXPLICAREA NOŢIUNILOR DE LINIAR MEDIA ŞI HYPERMEDIA
Noţiunea de liniar media descrie un obiect media care are un început, o evoluţie şi un
sfârşit bine determinat. Exemple de liniar media sunt: filmele, casetele audio şi video.
Internetul este organizat diferit. Noţiunea de hypermedia reprezintă posibilitatea
alegerii, adică utilizatorii aleg ce-i interesează. Un exemplu bun în acest sens este un CD
audio, de pe care se alege spre ascultare piesa cu numarul 7 şi este imediat ascultată, în
contrast cu cu o casetă unde pemtru a asculta piesa cu numărul 5, trebuie parcursă caseta
pentru a ne poziţiona la începutul piesei, spre a o asculta.
Aplicat asupra textului acest concept ne face să obţinem hypertext, unde executând
click pe o legătură suntem imediat mutaţi în altă locaţie în cadrul aceleiaşi pagini sau într-o
pagină diferită. Când sunt legate mai multe astfel de pagini de pe calculatoare diferite din
lume, se obţine un fel de plasă de paianjen cunoscută sub numele de World Wide Web.
Sistemul este cât se poate de util deoarece paginile de internet sunt create utilizând
acelaşi format. Formatul sau limbajul se numeşte HTML – Hypertext Markup Language şi
reprezintă un subset al unui standard internaţional pentru documente electronice numit SGML
– Standard Generalized Markup Language.
1.2. DEFINIREA HTML

HTML – reprezintă un set de instrucţiuni logice – instrucţiuni de marcare (markup)
care se scriu între caracterere < si > (numite si croșete) şi care descriu forma unui document
şi formatul conţinutului acestuia.
Exemplu: <B> Acest text va fi scris îngroşat </B>
După cum se observă codul este trecut între croşete “<” “>”. Aceste croşete sau
paranteze se numesc tag-uri. HTML-ul este insensibil la litere mici sau mari.
Există un tag de deschidere şi unul de închidere. Tagul de închidere conţine simbolul
„/” în interiorul croşetelor ”</>” .
Primul cuvânt sau caracter care apare în interiorul croşelor se numeşte element.
Elementul este de fapt o comandă care îi spune browserului să facă un anumit lucru. De
exemplu <FONT>. Cuvintele conţinute între croşeta închisă a tagului de deschidere şi cea
deschisă a tagului de închidere se numesc atribute.
Atributele pot să apară şi la dreapta unui element separat de acesta prin caracterul
spaţiu şi sunt urmate de caracterul egal. Valoarea succede semnul egal şi este trecută între
ghilimele.
De exemplu:
<FONT COLOR = “BLUE”></FONT>
Element Valoare
Atribut
Cele mai multe elemente au mai multe atribute ca în exemplul următor
<FONT COLOR = “BLUE” SIZE=”3”></FONT>
1.3. ELEMENTELE DE BAZĂ ALE STRUCTURII DOCUMENTULUI

Orice document HTML începe cu notaţia <html> şi se termină cu notaţia </html>.
Aceste notaţii se numesc în literatură de specialitate "TAG-uri". Prin convenţie, toate
informaţiile HTML încep cu o paranteză unghiulară deschisă "<" şi se termină cu o paranteză
unghiulară închisă ">".
Tag-urile între aceste paranteze transmit comenzi către browser pentru a afişa pagina
într-un anumit mod. Unele blocuri prezintă delimitator de sfârşit de bloc, în timp ce pentru
alte blocuri acest delimitator este optional sau chiar interzis.
Intre cele două marcaje <html> şi </html> vom introduce două secţiuni:
-sectiunea de antet <head>...</head>
şi
- corpul documentului <body>...</body>. Blocul <body>...</body> cuprinde
conţinutul propriu-zis al paginii HTML, adică ceea ce va fi afişat în ferastra browser-ului. O
etichetă poate fi scrisa atât cu litere mici, cât şi cu litere mari.
Adică <HTML> = <HtmL> = <html>. Caracterele "spaţiu" şi "CR/LF" ce apar intre etichete
sunt ignorate de către browser.
Deci un prim document HTML ar fi ceva de genul asta:
<html>
<head>
....
</head>
<body>
....
</body>
</html>
Aşa arată primul document HTML. Copiaţi-l folosind Copy/Paste într-un fişier nou şi
salvaţi-l ca PRIM.HTM sau PRIM.HTML. Apoi porniţi un browser de internet ( de exemolu
Mozilla Firefox sau Internet Explorer), daţi CTRL-O şi introduceţi calea spre fişier. Daţi OK
şi ... nimic. Să nu disperăm ... vom adăuga primele elemente la pagina noastră. În primul
rând, titlul unei pagini se obţine inserând în secţiunea <head>...</head> următoarea linie:
<title>Aceasta este prima mea pagina de Web</title>
În plus, în secţiunea <body>...</body> putem scrie texte cât dorim. Dacă nu întâlnim
nici un marcaj < sau > atunci interpretorul HTML le va lua ca texte simple şi le va afişa pe
ecran. Să vedem o nouă versiune a paginii noastre:
<html>
<head>
</head>
<body>
Bine ati venit în pagina mea de Web!
</body>
</html>
Conţinutul blocului <title>...</title> va apărea în bara de titlu a ferestrei browser-ului.
Dacă acest bloc lipseşte dintr-o pagina HTML, atunci în bara de titlu a ferstrei browser-ului
va apare numele fişierului.
Dacă introducem mai multe linii într-o pagina browser-ul le va afişa într-un singur
rând, intrucat caracterele " CR/LF " sunt ignorate de browser. Trecerea pe o linie nouă se face
la o comanda explicită, care trebuie să apară în pagina html. Această comandă este marcajul
<br> ( de la " line break " - întrerupere de linie ).
Folosind aceleaşi operaţii ca mai sus, vizualizaţi noua pagina! Veţi vedea textul ce
apare în fereastra navigatorului. În plus, pagina dvs. va avea un titlu nou, cel introdus de dvs.
<html>
<head>
<title> titlul paginii</title>
</head>
<body>
Bine ati venit! <br> în pagina mea de Web!
</body>
</html>
LABORATOR NR. 2
2.1. ETICHETE DE MARCARE
2.2. PARAGRAFE
2.3. LISTE
2.4. TEXT PREFORMATAT
2.5. CITATE EXTINSE
2.6. ADRESE
2.7. DELIMITATOARE DE LINII / ADRESE POŞTALE
2.8. RIGLE ORIZONTALE
2.1. ETICHETE DE MARCARE
HTML
Acest element indică programului tău de explorare faptul că fişierul conţine informaţii
codate în limbaj HTML. Extensiile html sau htm indică, de asemenea, acest lucru, şi trebuie
utilizate.
HEAD
Elementul de antet („head") identifică prima parte a documentului tău codificat
HTML, care conţine numele. Acest nume este afişat în partea de sus a ferestrei programului
de explorare.
TITLE
Elementul „title" conţine numele documentului tău şi identifică conţinutul său într-un
context global. Acesta este afişat în antetul paginii, şi de asemenea, în lista de semne de carte
(„bookmarks"), aşa încât alege ceva relevant, unic şi relativ scurt.
BODY
A doua şi cea mai mare parte a documentului tău HTML este corpul propriu-zis, care
conţine textui documentului, afişat în zona de text a ferestrei programului de explorare.
Etichetele explicate în continuare se utilizează în corpul documentului HTML.
Titluri
HTML are şase niveluri de titluri, numerotate de la 1 la 6, nivelul 1 fiind cel mai
proeminent. Titlurile sunt afişate pe ecran în fonturi mai mari şi/sau mai îngroşate decât
textul obişnuit. Primul titlu ar oricărui document va fi etichetat cu <H1>.
Sintaxa unui element de titlu este:
<Hy>Textul titlului </Hy>
unde y este un număr între 1 şi 6, indicând nivelul titlului.
Observaţie: Nu treceţi peste un nivel de titlu în documentele pe care le scrieţi. De
exemplu, să nu începeţi cu titlul de nivel unu (<Hl>) şi apoi să treceţi direct la nivelul 3
(<H3>).
2.2. PARAGRAFE
Spre deosebire de majoritatea editoarelor de texte, returul de car (Enter) nu este
important. Aşadar, HTML nu ţine cont de cât de lung este un rând din textul tău şi, în plus,
mai multe spaţii vor fi transformate (la afişare) într-unul singur. Un program de explorare nu
va interpreta trecerea la un nou rând din cadrul textului tău, decât dacă apare marcajul <p>.
Astfel, de pildă, textul primului paragraf din documentul minimal descris mai înainte
este echivalent cu următorul:
<P>Bine ai venit în lumea HTML! Acesta este primul paragraf. Chiar daca este asa de
scurt, este totuşi un paragraf! </P>
Aşadar, trebuie să indici paragrafele cu elemente <p>. Un program de explorare ignoră
orice aliniere sau grup de spaţii în cadrul textului sursă. Fără elementele <p>, întregul document
devine un singur paragraf. (Excepţie face textul marcat ca fiind preformatat, care va fi explicat
mai târziu.)
Astfel, următorul exemplu, va produce acelaşi efect ca şi cel minimal, prezentat anterior.
<html>
<head>
<TITLE>Un exemplu HTML simplu</TITLE>
</head>
<body>
<H1>HTML este uşor de invatat </Hl>
<P>Bine ai venit în lumea HTML! Acesta
este primul paragraf. Chiar daca e asa de
scurt, este totuşi un paragraf!</P>
<P>Iar acesta este cel de al doilea paragraf.
</P>
</body>
</html>
Pentru păstrarea lizibilităţii într-un fişier HTML, pune titlurile pe linii separate, foloseşte
linii goale pentru a identifica începutul unei noi secţiuni şi foloseşte paragrafe separate cu linii
goale, în completarea etichetelor <p>. Acestea te vor ajuta la editarea documentului, chiar dacă
programul de explorare le va ignora.
De notat că eticheta de final </p> poate fi omisă. Aceasta deoarece programul de
explorare înţelege că întâlnirea unei noi etichete <p> marchează şi finalul paragrafului
precedent.
Utilizând atributul align între <p> şi </p> poţi alinia după dorinţă conţinutul
respectivului paragraf, iată un exemplu, în care textul apare aliniat pe centru:
<P ALIGN=CENTER> Acesta este un paragraf centrat. </P>
Efectul va fi:
Acesta este un paragraf centrat.
2.3. LISTE
HTML acceptă liste numerotate, nenumerotate şi de definiţie. Poţi avea şi liste imbricate
una în alta, dar foloseşte-le raţional, deoarece mai multe liste imbricate pot fi greu de urmărit.
2.3.1. Liste nenumerotate

Pentru a crea o listă cu marcatori, procedează astfel:
1. începe cu o etichetă <ul> („unnumbered list");
2. introdu elementele listei precedate de eticheta <li> („list item" - nu e nevoie de marcaj
final </li>);
3. încheie lista cu eticheta <ul>.
lată un exemplu simplu cu trei elemente în listă:
<UL>
<LI> mere
<LI> pere
<LI> portocale
</UL>
Rezultatul este următorul:
♦ mere
♦ pere
♦ portocale
Un element al listei poate conţine mai multe paragrafe, pe care le vei marca cu <P>.
2.3.2. Liste numerotate

O listă numerotată (numită şi listă ordonată) este identică cu o listă nenumerotată, doar
că în loc de marcajul <UL> se foloseşte <OL> („ordered list"). Elementele sunt marcate tot cu
eticheta <LI>. Următorul cod HTML:
<OL>
<LI> mere
<LI> pere
<LI> portocale
</OL>
produce următorul rezultat formatat:
mere
pere
portocale
2.3.3. Liste de definiţie

O listă de definiţie (marcată prin <dl>) constă, de obicei, din alternarea unui termen de
definit (marcat cu <dt>) şi o definire a definiţiei (<dd>). în general, programele de navigare
formatează definiţiile pe un rând nou.
lată un exemplu:
<DL>
<DT> HTML
<DD> HTML, Limbajul de marcare hipertext, este folosit pentru descrierea
documentelor
din World Wide Web.
<DT> WEB
<DD> WEB este acronimul pentru World Wide Web,
</DL>
Rezultatul va fi:
HTML
HTML, Limbajul de marcare hipertext, este folosit pentru descrierea documentelor
din World Wide Web.
WEB
WEB este acronimul pentru World Wide Web,
Elementele <dt> şi <dd> pot conţine mai multe paragrafe (foloseşte eticheta <p> în
acest scop), liste sau alte informaţii.
2.3.4. Liste imbricate
Listele pot fi cuprinse una într-alta ca, de exemplu:
<UL>
<LI> Fructe de vară
<UL>
<LI> căpşuni
<LI> vişine
<LI> cireşe
</UL>
<LI> Fructe de toamna
<UL>
<LI> mere
<LI> struguri
</UL>
</UL>
Codul de mai sus va avea rezultatul:

• Fructe de vară
♦ căpşuni
♦ vişine
♦ cireşe
• Fructe de toamna
♦ mere
♦ struguri
2.4. Text preformatat

Poţi folosi eticheta <pre> pentru a genera text afişat într-un font de grosime fixă.
Această etichetă va marca şi spaţiile, trecerile la rând nou, taburile semnificative. Textele
preformatate pot fi folosite în listinguri de programe, dar si pentru alte lucruri.
De exemplu, următoarele linii:
<PRE>
casa
masa
coli copii .. </PRE>
vor fi afişate astfel:
casa
masa
coli copii ..
Marcajul <pre> poate fi folosit cu un atribut opţional (width), prin care se precizează
numărul maxim de caractere de pe o linie, width indică programului tău de navigare să aleagă
un font şi o un mod de aliniere a textului adecvate.
În secţiunile <pre> pot fi folosite hiperlegături.
Reţine că, deoarece simbolurile <, > şi & au semnificaţii speciale în HTML, va trebui să
foloseşti secvenţele escape corespunzătoare (&lt, &gt şi respectiv &) pentru a introduce
aceste caractere.
2.5. CITATELE EXTINSE
Pentru a include citate interminabile - într-un bloc separat de pe ecran - foloseşte
eticheta <blockquote>. Multe navigatoare schimbă marginea unui bloc de citat pentru a-l separa
de textul înconjurător.
2.6. Adrese
Eticheta <address> este, în general, utilizată pentru a specifica autorul unui document, o
modalitate de a-l contacta (de exemplu, o adresă e-mail). Este, de obicei, ultima linie dintr-un
document.
Exemplu:
<ADDRESS>
Istoria Universitatii din Petrosani, xyz@upet.ro, martie 1999.
</ADDRESS>
Rezultatul este:
Istoria Istoria Universitatii din Petrosani, xyz@upet.ro, martie 1998.
Marcajul <address> nu este utilizat pentru adrese poştale.
2.7. DELIMITATOARE DE LINII / ADRESE POŞTALE

Marcajul <br> („forced break line") forţează terminarea unei linii, despărţirea ei de alta,
fără nici un spaţiu între ele.
Exemplu de utilizare pentru delimitatoare de linie si o adresă poştală:
UNIVERSITATEA DIN PETROSANI<BR> Str. INSTITUTULUI, nr. 20
332006 PETROSANI<BR> tel. 0254-542.580
Ieşirea va fi:
UNIVERSITATEA DIN PETROSANI
Str. INSTITUTULUI, nr. 20
332006 PETROSANI
tel. 0254-542.580
2.8. RIGLE ORIZONTALE

Eticheta <hr> („horizontal rule") produce apariţia unei rigle (linii) orizontale în fereastra
navigatorului. O astfel de linie e necesară pentru a separa diferite secţiuni din documentul tău.
De exemplu, mulţi adaugă o astfel de linie la sfârşitul textului lor şi înainte de informaţiile
<address>.
Poţi stabili grosimea liniei, precum şi lungimea ei (procentul din lăţimea ferestrei
programului de navigare).
Exemplul următor:
<HR SIZE=2 WIDTH=„50%">
va afişa linia:
LABORATOR NR. 3
3.1. FORMATAREA CARACTERELOR
3.2. LEGĂTURI
3.3. IMAGINI
3.1. FORMATAREA CARACTERELOR
Limbajul HTML are două tipuri de stiluri pentru cuvinte individuale sau propoziţii:
logic şi fizic. Stilurile logice marchează textul în concordanţă cu semnificaţiile lor, pe când
stilurile fizice indică înfăţişarea specifică unei secţiuni.
De exemplu, dacă vrem să scriem un cuvânt cu caractere cursive (italic), putem fie să
marcăm respectivul cuvânt ca o definiţie (la majoritatea programelor de explorare), fie să
folosim o etichetă care să specifice exact acest lucru.
3.1.1. Stilurile logice în comparaţie cu stilurile fizice
Îţi pui întrebarea, probabil - dacă ambele tipuri de stiluri produc aceleaşi efecte, de ce
există amândouă? Ei bine, stilurile logice depind, totuşi de modul de configurare a
programelor de navigare. De pildă, de obicei, caracterele dintr-o definiţie se afişează înclinat,
dar această regulă poate fi schimbată de un utilizator, iar dacă vrei ca, totuşi, cuvintele să fie
afişate înclinat în orice program de navigare, indiferent de configurarea curentă a
utilizatorului, atunci va trebui să foloseşti un stil fizic, care să precizeze efectiv acest lucru (de
exemplu, <I>).
Totuşi, se recomandă folosirea stilurilor logice, deoarece acestea au avantajul
consecvenţei şi al flexibilităţii documentelor HTML.
În orice caz, dacă vei opta pentru folosirea stilurilor logice, mergi cu ele până la
sfârşitul documentelor, iar dacă vei alege stilurile fizice, fă la fel.
3.1.2. Stilurile logice

<DFN>
Se foloseşte pentru un cuvânt ce urmează a fi definit. De obicei se afişează cu
caractere italice. (Exemplu: Internet Explorer este un program de explorare Web).
<EM>
Se foloseşte pentru accentuări. De obicei se afişează cu caractere italice. (Accesul
copiilor în aceasta pagina Web este interzis!)
<CITE>
Indicat a fi folosit pentru nume de cărţi, filme etc. De obicei se afişează cu caractere
italice (învăţaţi limbajul FRONT Page în 12 lecţii.)
<CODE>
Această etichetă este destinată textelor de programe pentru calculator. Se afişează într-
un font cu grosime fixă (Fişierul <stdio. h>.)
<KBD>
Această etichetă este utilizată pentru intrările de la tastatură şi, de obicei, se afişează
cu un font de grosime fixă (Daţi comanda passwd pentru a va schimba parola.)
<SAMP>
Se foloseşte pentru o secvenţă de caractere. Se afişează sub forma unui font cu
grosime fixă (Segmentation fault: Core dumped.)
<STRONG>
Marchează citate importante. De obicei, cuvintele se afişează îngroşat (bold).
(NOTĂ: Verificati-vă cutia poştală!)
<VAR>
Atunci când se foloseşte o variabilă (un nume generic), ce ulterior trebuie înlocuită cu
o informaţie concretă, (cd nume_director creează un subdirector.)
3.1.3. Stiluri fizice

<B> text cu caractere aldin (bold)
< I > text cu caractere cursive (italic)
<TT> text ca la maşina de scris (de exemplu fonturi cu grosime fixă)
Secvenţe escape
Aceste secvenţe au un dublu rol. Pe de o parte de a permite utilizarea caracterelor
speciale, cum ar fi parantezele unghiulare, iar pe de altă parte pentru a afişa caracterele ASCII
extinse (cu diacritice).
Astfel, parantezele unghiulare (<, >) sunt folosite în etichete HTML, iar caracterul &
(„ampersand") se foloseşte pentru marcarea chiar a secvenţelor escape. De aceea, acestea nu
vor apărea în text aşa cum sunt. Ghilimelele pot fi scrise prin dublarea apostrofului sau prin
folosirea secvenţei escape &quot.
Pentru a folosi unul din cele trei caractere într-un document, va trebui să scrii în locul
lui secvenţa escape corespunzătoare: < pentru < , > pentru > , & pentru &
Există şi secvenţe escape pentru unele caractere cu accente (semne diacritice), cum ar
fi:
” ş ” = ş , ” ţ ” = ţ , ” ă ” = ă , ” â ” = â , ” î ” = î,
Spre deosebire de restul limbajului HTML, secvenţele escape fac diferenţa între
caracterele minuscule şi cele majuscule. De exemplu, nu poţi folosi &LT; - în loc de &lt.
3.2. Legături
Marea putere a limbajului HTML vine de la capacitatea sa de a lega texte şi/sau

imagini de un alt document. Un navigator evidenţiază legăturile către un alt hipertext (numite
pe scurt hiperlegături sau chiar legături) din dreptul unui text sau al unei imagini.
Singura etichetă referitoare la legături este <A>, care vine de la „ancoră". Pentru a
include o ancoră în documentul tău, procedează astfel:
1. începe ancora cu <a (pune un spaţiu după a)
2. specifică documentul către care faci legătura, introducând parametrul
HREF=„nume_fisier", urmat de o paranteză unghiulară închisă (>);
3. introdu textul care va servi drept legătură hipertext în documentul curent;
4. introdu eticheta de sfârşit de ancoră: </a> (nici un spaţiu nu e necesar înainte
de sfârşitul acesteia).
Exemplu de referinţă hipertext într-un fişier numit România .html:
<A HREF=„Petrosani.html"> Petrosani </A>
Această intrare din document va face să fie afişat textul „Petrosani", executând clic pe
el vei fi trimis la fişierul HTML cu numele Petrosani.html, din acelaşi director ca şi fişierul
curent (România.html).
3.2.1. Căile relative în comparaţie cu căile absolute
Poţi face legături către documente din alt director, prin specificarea unei căi relative.
De exemplu, dacă vrei o legătură către fişierul Hunedoara.html, aflat în subdirectorul
Transilvania, va trebui să scrii:
<A HREF=„Transilvania/Hunedoara.html">Judetul Hunedoara</A>
Ai avut de-a face cu o legătură relativă, deoarece ai specificat calea către fişierul
referit, relativ la locaţia fişierului curent.
De asemenea, poţi folosi numele căii complete (URL-ul complet) a fişierului referit,
dar legăturile relative sunt mult mai eficiente în accesarea unui server.
Numele de căi folosesc sintaxa standard din sistemul de operare Unix. Aici, sintaxa
pentru directorul părinte este "..", iar despărţirea între numele de subdirectoare se face cu
simbolul slash (/). Se poate folosi şi simbolul back-slash (\).
Dacă te afli în fişierul Hunedoara.html şi vrei să faci o referinţă la fişierul
România.html, legătura ta va trebui să arate cam aşa:
<A HREF="../România.html">Romania</A>
În general, e bine să utilizezi legăturile relative, deoarece:
1. E mai uşor să muţi un grup de documente într-o altă locaţie (căile relative se vor
păstra).
2. Conexiunea la server e mai eficientă.
3. Ai mai puţin de scris...
Uneori, însă, legăturile absolute trebuie neapărat utilizate - de exemplu, atunci când nu
ai o referinţă directă către un anumit document, cum ar fi o adresă oarecare de pe alt server
din Internet (un URL).
Astfel, de exemplu, pentru a face o referire la serverul de căutare Yahoo, va trebui ca
în documentul tău să ai o legătură de genul:
<A HREF=„http://www.yahoo.com"> Serverul Yahoo </A>
3.2.2. Legături către anumite secţiuni
Ancorele pot fi folosite şi pentru a trimite cititorul către o anumită secţiune dintr-un
document (fie că acesta e documentul curent, sau altul), în altă parte decât la începutul
documentului (aşa cum se face în mod prestabilit). Acest gen de ancoră se numeşte adesea
ancoră cu nume, deoarece pentru a crea legături, trebuie să inserezi în documente anumite
nume HTML.
Să presupunem că vrei să faci o legătură din documentul Romania.html către o
secţiune aparte (referitoare la relieful ţării), din alt document (Date.html).
Pentru aceasta, în documentul Romania.html va trebui să faci o trimitere de genul
următor:
<a href=„Date.html#RELIEF„>Relieful Romaniei</a>.
Caracterul diez (#) din cadrul legăturii indică programului de navigare faptul că
trimiterea se face către o secţiune numită relief din cadrul fişierului Date.html. Aceasta
înseamnă că, după ce execuţi clic pe textul legăturii, programul de navigare va încărca pagina
Date.html, poziţionându-se la începutul secţiunii (marcate în vreun fel) cu numele relief.
De aceea, în fişierul Date.html va trebui să ai o ancoră cu nume (în acest exemplu,
relief), înainte de începutul acelei secţiunii referite.
<H2><A NAME=„RELIEF">Relieful țării</A></H2>
Acum totul e gata şi fii atent ca nu cumva să faci trimiteri către anumite secţiuni
dintr-un document, care nu sunt denumite.
Pentru a face o legătură către o secţiune din cadrul documentului curent, tehnica
folosită este aceeaşi, doar că se omite numele fişierului.
De exemplu:
<A HREF=„#RELIEF">Relieful tarii</A>
este o legătură care se poate face în fişierul Date .html.
Folosind tehnica ancorelor cu nume în cadrul unui singur document HTML, poţi crea:
o tablă de materii a unui astfel de document, cu trimiteri la diferitele secţiuni ale |
documentului.
Mailto
Poţi să vii în sprijinul unui cititor al paginii Web, care vrea să trimită un mesaj e-mail
către o anumită adresă, prin folosirea atributului mailto în cadrul unei legături.
Formatul său este:
<A HREF=„mailto: nume_adresa@host">Name</A>
De exemplu, introdu:
<A HREF=„mailto:ssm®yahoo.com">Autorul documentului</A> pentru a-mi putea
trimite o scrisoare.
Scrisoarea este trimisă, dacă se execută un clic pe textul „Autorul documentului", în
urma căruia se va deschide o fereastră de trimis e-mail.
3.3. IMAGINI
Mai multe programe de explorare Web pot afişa imagini lângă text („inline"), care
sunt în format JPEG, GIF sau XBitmap (xbm), Portable Network Graphic (png).
Fiecare imagine consumă timp pentru a putea fi decodificată şi afişată pe ecran, fapt ce
încetineşte mult procesul de afişare a documentului. Trebuie să ai grijă ce şi câte imagini
inserezi într-un document.
Pentru a include o imagine „inline", introdu:
<IMG SRC=nume_imagine>
unde nume_imagine este URL-ul fişierului imagine.
Sintaxa pentru astfel de adrese URL este identică cu cea utilizată pentru alte ancore
href. Dacă imaginea este un fişier GIF, atunci nume_imagine trebuie să aibă extensia .gif, iar
dacă este un fişier JPEG, va avea una dintre extensiile . jpg sau . jpeg.
3.3.1. Atributele de mărime a imaginii
Va trebui să incluzi două atribute în etichetele <img> pentru a indica programului
navigator care este mărimea imaginii ce va fi preluată alături de text. Aceste atribute se
numesc height şi width şi permit programului de navigare să stabilească spaţiul adecvat (în
pixeli) pentru imagini.
(Mărimea în pixeli poate fi aflată din programul de procesare a imaginii, de exemplu
PaintShop Pro sau Adobe Photoshop.)
Exemplu de utilizare a acestor atribute:
<IMG SRC=persoana.gif HEIGHT=100 WIDTH=65>
3.3.2. Alinierea imaginilor
Există diferite opţiuni pentru afişarea imaginilor. Ele pot fi aranjate separat de text, la
stânga sau la dreapta textului, sau chiar pe centru. încearcă mai multe posibilităţi pentru a
vedea care este forma cea mai potrivită şi mai estetică a paginii tale.
În mod prestabilit, partea de jos a unei imagini este aliniată cu textul care urmează.
Poţi alinia imaginile cu partea superioară, sau cu centrul paragrafului, folosind atributele de
aliniere: align=top sau align=center.
De exemplu:
<IMG SRC=„Imagine.gif" ALIGN=CENTER>
3.3.3. Imagini fără text
Pentru a afişa o imagine fără un text asociat (de exemplu, sigla organizaţiei sau a
firmei tale) plaseaz-o într-un paragraf separat şi foloseşte atributul align pentru a centra
imaginea sau a o aşeza în partea din dreapta a ferestrei, ca în exemplul următor:
<p ALIGN=CENTER>
<IMG SRC = „sigla.gif*>
</p>
3.3.4. Texte alternative pentru imagini
Limbajul HTML dispune de un mecansim prin care se poate spune cititorului ce
imagini îi lipsesc din pagină, înlocuind imaginea ce ar trebui să fie afişată cu un text
explicativ.
Atributul alt permite afişarea unui text în locul unei imagini, ca în exemplul următor:
<IMG SRC=„SageataSus.gif" ALT=„Sus">
unde SageataSus.gif este o imagine ce indică în sus.
Dacă dispui de un program de navigare ce are posibilitatea de vizualizare a imaginilor,
vei obţine imaginea săgeţii (imediat după textul alternativ), iar în celelalte cazuri vei vedea
doar textul „Sus". E recomandabil să incluzi texte alternative pentru toate imaginile din
documentul tău text (sau măcar pentru cele mari), ca un semn de respect faţă de cititorii tăi.
3.3.5. Grafica fundalului

Noile versiuni de exploratoare Web pot încărca o imagine şi o pot utiliza ca decor de
fundal, când afişează o pagină. Unora le plac imaginile de fundal, altora nu. în general, dacă
optezi pentru încorporarea unei imagini de fundal, asigură-te că documentul poate fi citit
rapid.
Imaginile de fundal pot fi texte sau imagini ale unui obiect. Uneori poţi opta pentru
crearea doar a unei mici părţi din imagine. Utilizând o proprietate numită „tilling", un
navigator va putea să ia imaginea şi să o multiplice de-a lungul şi de-a latul ferestrei de
navigare. Această acţiune se face automat când foloseşti eticheta de fundal descrisă mai jos.
Marcajul prin care incluzi o imagine de fundal este cuprins în instrucţiunea <body> ca
un atribut:
<BODY BACKGROUND=„nume_fisier.gif">
3.3.6. Culoare de fundal

În mod prestabilit, programele de navigare afişează textul în negru pe un fundal gri -
elemente care pot fi schimbate. Unii proiectanţi de pagini Web selectează o culoare de fundal
şi una pentru text. înainte de a face aşa ceva e bine să previzualizezi schimbările, pentru a te
asigura că paginile tale pot fi citite. (De exemplu, mulţi consideră greu de citit un text scris cu
roşu pe un fond negru).
Poţi schimba culoarea textului, a legăturilor (care în mod prestabilit este albastru), a
legăturilor vizitate (în mod prestabilit violet) şi a legăturilor active, folosind atribute ale
etichetei <body>. De pildă, introducând:
<BODY BGCOLOR=„#000000" TEXT=//#FFFFFF" LINK=„ #9690CC">
vei crea o fereastră cu fundalul negru (bgcolor), textul alb, şi hiperlegăturile argintii
(link).
Codificarea culorilor se face cu ajutorul a şase cifre hexazecimale, precedate de
simbolul diez (#). Codul conţine un grup de trei numere în hexazecimal (între 00 = 0 şi ff =
255), reprezentând cantitatea de roşu, verde şi albastru conţinute de fiecare culoare. Prin
combinarea acestor culori primare (fundamentale) în televiziune, se poate obţine orice nuanţă.
De exemplu, #000000 este negru, #ff0000 este roşu, iar #ffffff este alb.
3.3.7. Imagini, sunete şi animaţii externe

Poate că vrei să ai o imagine care să se deschidă într-un document separat, când un
utilizator activează o legătură formată dintr-un cuvânt sau o variantă „inline" în miniatură a
imaginii respective. O astfel de imagine se numeşte imagine externă şi mecanismul poate fi
folosit pentru a nu încetini procesul de încărcare a paginii Web prin inserarea unor imagini
prea mari lângă text („inline").
Pentru a include o referinţă la o imagine externă, introdu:
<A HREF=„ImagineMare.gif">ancora de legatura</A>
Sau poţi folosi o imagine mai mică pentru legătura către copia sa mai mare:
<A HREF=„ImagineMare.gif"> <IMG SRC=„ImagineMica.gif"></A>
Cititorul paginii Web va vedea imaginea mică şi executând clic pe ea, va deschide
copia mare.
Aceeaşi sintaxă o vei folosi şi dacă vrei să faci referiri la animaţii sau sunete externe.
De exemplu,
<A HREF=„film.mov">Un video-clip</A>
specifică o legătură către un fişier de animaţie de tip QuickTime.
LABORATOR NR. 4
4.1. TABELE
Inainte ca tehnica etichetelor HTML pentru tabele să fi fost pusă la punct, autorii de
pagini web prezentau informaţia sub formă tabelară. Utilizând marcajele <PRE>, numărând
spaţiile şi previzualizându-şi rezultatul. Lucrul era dificil, ceea ce a impus apariţia etichetelor de
tabelare.
Tabelele sunt foarte folositoare în prezentarea unor informaţii sub formă tabelară, dar
unii autori creativi şi inventivi, folosesc tabelele şi pentru pagini Web obişnuite.
Un tabel are un cap de tabel – antet, unde se explică ce conţin coloanele/rândurile,
rânduri pentru informaţii şi celule pentru fiecare element. În tabelul următor de exemplu prima
coloană conţine informaţii de cap de tabel, fiecare rând explică o etichetă de tabel HTML, iar
fiecare celulă conţine o pereche de etichete sau explică funcţionarea lor.
Elemente de tabel
Element Descriere
<TABLE>… Defineşte un tabel HTML. Dacă atributul BORDER este prezent browserul
</TABLE> va afişa tabelul cu o margine
Defineşte titlul tabelului. Poziţia prestabilită a titlului este în mijlocul părţii
<CAPTION>… de sus a lui. Atributul ALIGN=BOTTOM poate fi folosit pentru
</CAPTION> poziţionarea titlului sub tabel. Orice tip de etichetă de marcare poate fi
folosită în cadrul secţiunii de titlu, CAPTION.
Indică un rând în cadrul tabelului. Poţi defini atributele prestabilite pentru
întregul rând:
<TR>…</TR>
 Alinierea orizontală: ALIGN (LEFT,CENTER, RIGHT)
 Şi/sau verticală: VALIGN (TOP,MIDLLE, BOTTOM)
Defineşte o celulă cap de tabel. În mod prestabilit, textul din această celulă
<TH>…</TH> este îngroşat şi centrat. Celulele din capul de tabel pot conţine alte atribute
pentru determinarea caracteristicilor celulei şi/sau conţinutul ei.
Defineşte o celulă obişnuită a tabelului pentru date. În mod prestabilit,
textul din această celulă este aliniat la stânga şi centrat pe verticală. Celulele
<TD>…</TD>
pot conţine alte atribute pentru determinarea caracteristicilor celulei şi/sau
conţinutul ei.
Atributele de tabel pot fi:
Atribut Descriere
ALIGN (LEFT,CENTER, RIGHT) Alinierea orizontală a celulei
VALIGN (TOP,MIDLLE, BOTTOM) Alinierea verticală a celulei
COLSPAN=n Numărul n de coloane pe care le acoperă o
celulă.
ROWSPAN=n Numărul n de rânduri pe care le acoperă o
celulă.
NOWRAP Precizează ca fals atributul de împachetare
”wrapping” al celulei
Folosind atributele COLSPAN şi ROWSPA poţi controla înălţimea coloanelor şi a
liniilor. De exemplu, marcajul <TH COLSPAN=2> crează un cap de tabel cu o lăţime de două
coloane. Cu ajutorul atributelor ROWSPAN şi COLSPAN se pot crea tabele complexe.
Formatul gemeral al unui tabel
Formatul general al unui tabel arată astfel:
<TABLE>
Începutul definiţiei tabelului
<CAPTION> conţinutul titlului </CAPTION>
Definitia titlului
<TR>
Inceputul definitiei primului rand
<TH> continutul celulei </TH>
Prima celula din randul 1 – capul de tabel
…………………….
<TH> continutul celulei </TH>
Ultima celula din randul 1 – capul de tabel
</TR>
Sfirsitul definitiei primului rand
<TR>
Inceputul definitiei celui de al doilea rand
<TD> continutul celulei </TD>
Prima celula din randul 2
…………………….
Ultima celula din randul 2
……………….
</TR>
Sfirsitul definitiei celui de al doilea rand
……………….
<TR>
Inceputul definitiei ultimului rand
Prima celula din ultimul rand
…………………….
Ultima celula din ultimul rand
……………….
</TR>
Sfirsitul definitiei ultimului rand
</TABLE>
Sfirsitul definitiei tabelului
Marcajele <TABLE> şi </ TABLE > trebuie să cuprindă în interiorul lor întreaga
definiţie a tabelului. Primul element din cadrul tabelului este titlul CAPTION care este optional.
Apoi, poţi avea oricâte rânduri definite prin etichetele <TR> şi </TR>. În cadrul unui rand poţi
avea oricâte celule definite prin etichetele <TD>….</TD> sau <TH> si </TH>. Fiecare rând al
tabelului este formatat independent de rândul anterior sau cel urmator.
LABORATORUL NR. 5
5.1. CONSTRUIREA UNUI SITE WEB
Programatorii de pagini web, cu experienţă consideră că scrierea manuală a codului

sursă este un merit, o virtute. Această idee este uşor exagerată pentru cei care încearcă prima
dată realizarea unei pagini web. De aceea cei mai puţin experimentaţi folosesc tot felul de
programe gen Front Page, Dreamweaver şi altele asemeni lui, pentru a genera automat codul
sursă al paginilor.
Dintre avantajele utilizarii programului Front Page amintim:
 permite vizualizarea imediată a rezultatelor;
 viteză mare de lucru – când se scrie manual codul unei pagini, această operaţie
ocupă o cantittate mare de timp, indicată fiind utilizarea unui soft profesional;
 ajutor vizual – Front Page oferă diagrame care ne permit să gestionăm aspectele
abstracte ale site-ului ca de exemplu ierarhia şi navigarea printre paginile site-ului.
Fereastra principală a aplicaţiei Front Page

La lansarea aplicaţiei Front Page 2003, se deschide fereastra din figura 1.
Meniuri
Shortcut-uri
Panou de
activitaţi
Zona de
lucru a
aplicaţiei
Fig. 5.1 - Fereastra principala a aplicaţiei Microsoft FrontPage 2003

Meniurile – conţin liste de comenzi.
Barele de scurtături – shortcut-uri – sunt afişate implicit barele Standard şi
Formating care conţin cele mai des utilizate comenzi. Afişarea respectiv ascunderea acestor
bare de pictograme se face selectând din meniul View comanda Toolbars şi apoi bara de
pictograme dorită.
Zona de lucru a aplicaţiei – reprezintă acea parte ferestrei principale în care se
desfăşoară operaţiile de editare.
În partea stângă jos a ferestrei se
găsesc 4 butoane, prezentate în figura 5.2
Figura 5.2 – Butoanele care permit vizualizarea paginii proiectate în diferite formate
Cele 4 butoane sunt utilizate penru:
 Design – afişează fereastra de editare a aplicaţiei
 Split – afişează fereastra aplicaţiei împărţită pe orizontală în două zone: partea
de sus va afişa codul HTML, iar partea de jos fereastra de proiectare Design
 Code – afişează codul HTML, corespunzător paginii proiectate
 Preview – ne prezintă cum va araăta pagina noastra când va fi deschisă prin
intermediul unui browser de internet.
5.2. CREAREA UNUI SITE NOU

Se pot crea pagini web, fără nici o legătură cu alte pagini sau site-uri, dar softuri precum
FrontPage au fost create tocmai pentru a gestiona site-uri întregi. Primul lucru pe care-l facem
în FrontPage este construirea unui site.
1. Pentru aceasta se lanseaza aplicaţia.
2. Selectăm File → New . Panoul de activităţi afişat în dreapta, ne permite să alegem
tipul noului site sau al noii pagini.
3. În cadrul panoului New task, în zona New Web Site, putem alege MoreWeb Site
Template, comandă ce va afişa o fereastră cu o serie de tipuri predefinite de site-uri.
4. Dacă executăm un clic pe opţiunea Empty Web Site, FrontPage va vrea să ştie unde
salvează acest site. Implicit, locaţia de salvare este My Web Sites folder, din My Documents,
corespunzătoare utilizatorului cu care s-a realizat pornirea sistemului de operare.
5. La sfârşitul căii propuse de FrontPage, după ultimul caracter backslash „\” se poate
schimba numele propus de aplicaţia FrontPage în orice nume dorim.
5.3. ADĂUGAREA DE PAGINI WEB
Un site este nul şi

neavenit dacă nu conţine măcar
2,3,...10 pagini. Se poate
gestiona crearea acestor pagini
în mai multe feluri. Unii
programatori lucrează outside
în – adică întâi crează structura
site-ului şi apoi umplu paginile
cu informaţii, iat alţii lucrează
inside out – adică crează site-ul
pagină cu pagină şi apoi fac
legăturile între pagini.
Haideţi să creăm o
pagina web în stilul clasic, în
modul design view.
Se poate crea pagina
folosind una dintre metodele: se
poate da un click pe pictograma
New Page în bara de butoane,
se poate folosi combinaţia de
taste Ctrl+N sau se poate selecta
din meniul File comanda New. Fig. 5.3. - Panoul Layout Tables and Cells
File→New şi apoi se selectează
New Page din panoul de activităţi afişat în partea dreaptă. În timp ce creăm pagina se poate
deschide automat panoul Layout Tables and Cells prezentat în figura 5.3
5.4. ADĂUGAREA DE CONŢINUT PE PAGINĂ
Indiferent de ce va conţine pagina sau site-ul un lucru este clar. Acel ceva trebuie
adăugat în pagină. FrontPage-ul permite adăgarea de texte, hyperlink-uri, imagini sunete, etc.
Adăugarea textelor
Chiar şi o pagină alcătuită în mare parte din imagini, conţine ceva text. Următorii paşi
trebuie respectaţi la introducerea unui text:
1. Se dă clic pe pagina în partea de sus a cesteia pentru a se scrie titlul paginii.
2. Se dă click pe caseta drop-down din bara de butoane de formatare şi se alege
stilul titlului.
3. În bara de butoane de formatare se da click pe butonul de centrare.
4. Se trece apoi la introducerea textului din pagina. După scrierea unui rând se
apasă Enter şi se trece la rândul următor.
5. Dupa ce textul este scris se trece la formatarea acestuia.
Adăugarea hyperlink-urilor
Hyperlink-urile realizează legăturile între pagini. Se pot adăuga hyperlink-uri care fac
legatura cu alte zone din aceeaşi pagină, cu alte pagini sau site-uri sau cu o adresă de e-mail.
Pentru a crea un hyperlink se procedează astfel:
Se selectează un cuvânt sau un rând.
Se execută click dreapta pe selecţie sau se selectează din meniul Insert comanda
Hyperlink, Insert →Hyperlink, sau se foloseşte combinaţia Ctrl+K.
Ca efect se deschide fereastra din figura 5.4.
Fig. 5.4 – Fereastra pentru crearea hyperlink-urilor
Adăugarea de imagini
Pentru inserarea imaginilor se procedează astfel:

Din meniul Insert se alege comanda Picture, iar din submeniul deschis se alege una
dintre comenzile: Clip Art, From File, From Scanner, etc.
5.5. SALVAREA PAGINII WEB
Pentru salvarea paginii folosim una dintre metodele: se poate da un click pe pictograma
Save în bara de butoane, se poate folosi combinaţia de taste Ctrl+S sau se poate selecta din
meniul File comanda Save.
Se deschide fereastra din figura 5.5.
Fig. 5.5 – Fereastra de salvare a paginii web

LABORATORUL NR. 6
6.1. CADRE
În continuare vom învăţa cum putem să împărţim fereastra browser-ului în mai multe
secţiuni, fiecare secţiune conţinând câte un document HTML. Aceste secţiuni se numesc
cadre (frames). Prin urmare, asemenea tabelelor, cadrele oferă posibilitatea de a structura în
pagină informaţii diverse, dar oferă şi avantaje suplimentare, prin faptul că în cadre se pot
vizualiza documente HTML diferite. Cadrele (frames) sunt secţiuni ce oferă posibilitatea de
a vizualiza simultan în fereastra browser-ului mai multe pagini Web.
Bazele organizării cadrelor
 Fiecare pagină afişată într-un cadru se specifică utilizând marcajul <FRAME>

ce este inserat în marcajul <FRAMESET>.
 Prin intermediul parametrilor ROWS sau COLS al marcajului <FRAMESET>
se defineşte spaţiul din cadrul ferestrei browser-u\ui, alocat fiecărei pagini Web în parte.
 Definirea spatului alocat fiecărei pagini Web se poate face în pixeli sau în
procente, procentul se referă la cât la sută din fereastra browser-v\xx\ este alocată fiecărei
pagini Web în parte.
6.2. CADRE ORIZONTALE
1. împărţirea ferestrei browser-ului în două secţiuni orizontale:

a) indicând volumul de spaţiu alocat fiecărui cadru prin numărul de pixeli:
<HTML>
<FRAMESET ROWS="nr,*">
<FRAME SRC="nume_cadrul_l.extensie_cadrul_1">
<FRAME SRC=" nume_cadrul_2.extensie_cadrul_2">
</FRAMESET>
</HTML>
 primul cadru ocupă un număr de nr pixeli din înălţimea ferestrei browser-ului;
 al doilea cadru ocupă diferenţa de pixeli din totalul de pixeli ai înălţimii
ferestrei browser-ului şi numărul de pixeli ocupat de primul cadrul, această diferenţă este
specificată prin caracterul *.
Exemplu:
Iată o pagină foarte simpă cu cadre, care separă ecranul în două secţiuni, prima având
o înălţime de 80 de pixeli, iar a doua ocupând restul fererestrei:
<HTML>
<FRAMESET ROWS="80,*">
<FRAME SRC="unu.html">
<FRAME SRC="doi.html">
</FRAMESET>
</HTML>
b) Indicând volumul de spaţiu alocat fiecărui cadru prin procente:
<HTML>
<FRAMESET ROWS="nr%,*">
<FRAME SRC"nume_cadrul_l. extensie_cadrul_1 ">
<FRAME SRC=" nume_cadrul_2. extensie_cadrul_2">
</FRAMESET>
</HTML>
 primul cadru ocupă nr% din înălţimea ferestrei browser-ului;
 al doilea cadru ocupă diferenţa de procent din 100% din înălţimea ferestrei
browser-ului şi procentul ocupat de primul cadrul, această diferentţă este specificată prin
caracterul *.
Exemplu:
Pagina de mai jos separă ecranul în două secţiuni, prima ocupând 30% din înăţimea
ferestrei browser-ului, iar a doua ocupând diferenţa rămasă din fererestră:
<HTML>
<FRAMESET ROWS="30%,*">
<FRAME SRC="doi.htroT>
</FRAMESET>
</HTML>
2. împărţirea ferestrei browser-ului în trei secţiuni orizontale:
a) Indicând volumul de spaţiu alocat fiecărui cadru prin numărul de pixeli:
<HTML>
<FRAMESET ROWS="nrl, nr2, *">
<FRAME SRC="nume_cadrul_l. Extensie_cadrul_1">
<FRAME SRC=" nume_cadrul_2.extensie_cadrul_2">
<FRAME SRC="nume_cadrul_3. extensie_cadrul_3 ">
</FRAMESET>
</HTML>
 primul cadru ocupă un număr de nrl pixeli din înălţimea ferestrei browser-ului;
 al doilea cadru ocupă un număr de nr2 pixeli din înălţimea ferestrei browser-
ului;
 al treilea cadru ocupă diferenţa de pixeli din totalul de pixeli ai înălţimii
ferestrei browser-ului şi suma de pixeli (nrl+nr2) ocupată de primul şi al
doilea cadru, această diferenţă este specificată prin caracterul *.
Exemplu:
<HTML>
<FRAMESET ROWS="80,50,*">
<FRAME SRC="trei.html">
</FRAMESET>
</HTML>
Ecranul este separat în trei secţiuni, prima având o înălţime de 80 de pixeli, a doua o
înălţime de 50 de pixeli, iar a treia ocupând restul din înălţimea fererestrei:
b) Indicând volumul de spaţiu alocat fiecărui cadru prin procente:
<HTML>
<FRAMESET ROWS="nrl%, nr2%, *">
<FRAME SRC="nume_cadrul_l. extensie_cadrul_1 ">
<FRAME SRC="nume_cadrul_2. extensie_cadrul_2">
<FRAME SRC="nume_cadrul_3. extensie_cadrul_3">
</FRAMESET>
</HFML>
 primul cadru ocupă nrl% din înălţimea ferestrei browser-ului,
 al doilea cadru ocupă nr2% din înălţimea ferestrei browser-ului,
 al treilea cadru ocupă diferenţa de procent din 100% al înălţimii ferestrei
browser-ului şi suma de procentelor (nrl+nr2) ocupată de primul şi al doilea, această diferenţă
este specificată prin caracterul *.
Exemplu:
<HTML>
</FRAMESET>
</HTML>
Ecranul este separat în trei secţiuni, prima ocupând 30% din înălţimea ferestrei
browser-ului, a doua ocupă 10%, iar a treia ocupând diferenţa râmasă din înălţimea
fererestrei.
6.3. CADRE VERTICALE

1. împărţirea ferestrei browser-ului în două secţiuni verticale:
a. Indicând volumul de spaţiu alocat fiecărui cadru prin numărul de pixeli:
<HTML>
<FRAMESET COLS="nr,*">
<FRAME SRC="nume_cadrul_l.extensie_cadrul_1 ">
<FRAME SRC="nume_cadrul_2.extensie_cadrul_2">
</FRAMESET>
</HTML>
 primul cadru ocupă un număr de nr pixeli din lăţimea ferestrei browser-ului;
 al doilea cadru ocupă diferenţa de pixeli din lăţimea totală de pixeli ai ferestrei
browser-ului şi numărul de pixeli ocupat de primul cadrul, această diferentţă este specificată
prin caracterul *.
Exemplu:
Iată o pagină cu cadre, care separă ecranul în două secţiuni, prima având o lăţime de
80 de pixeli, iar a doua ocupând restul din lăţimea fererestrei:
<HTML>
<FRAMESET COLS="80,*">
<FRAME SRC="doi.htmr>
</FRAMESET>
</HTML>
b. Indicând volumul de spaţiu alocat fiecărui cadru prin procente:
<HTML>
<FRAMESET COLS="nr%,*">
</FRAMESET>
</HTML>
 primul cadru ocupă nr% din lăţimea ferestrei browser-ului;
 al doilea cadru ocupă diferenţa de procent din 100% al lăţimii ferestrei
browser-ului şi procentul ocupat de primul cadrul, această diferentţă este specificată prin
caracterul*.
Exemplu:
Pagina de mai jos separă ecranul în două secţiuni, prima ocupând 30% din lăţimea
ferestrei browser-ului, iar a doua ocupând diferenţa rămasă din lăţimea ferestrei:
<HTML>
<FRAMESET COLS="30%,*">
</FRAMESET>
</HTML>
2. împărţirea ferestrei browser-ului în trei secţiuni orizontale:
a. Indicând volumul de spaţiu alocat fiecărui cadru prin numărul de pixeli:
<HTML>
<FRAMESET COLS="nrl, nr2, *">
<FRAME SRC="nume_cadrul_2.extensie_cadrul 2">
<FRAME SRC="nume_cadrul_3.extensie_cadrul_3”>
</FRAMESET>
</HTML>
 primul cadru ocupă un număr de nr pixeli din lăţimea ferestrei browser-ului;
 al doilea cadru ocupă un număr de nr2 pixeli din lăţimea ferestrei browser-ului;
 al treilea cadru ocupă diferenţa de pixeli din totalul de pixeli ai lăţimii ferestrei
browser-ului şi suma de pixeli (nrl+nr2) ocupată de primul şi al doilea cadru, această diferenţă
este specificată prin caracterul *.
Exemplu:
<HTML>
<FRAMESET COLS="80,50,*">
</FRAMESET>
</HTML>
Ecranul este separat în trei secţiuni, prima având o lăţime de 80 de pixeli, a doua o
lăţime de 50 de pixeli, iar a treia ocupând restul lăţimii fererestrei:
b. Indicând volumul de spaţiu alocat fiecărui cadru prin procente:
<HTML>
<FRAMESET COLS="nrl%,nr2%,*">
<FRAME SRC="nume_cadrul_l. extensie_cadrul_1">
</FRAMESET>
</HTML>
 primul cadru ocupă nr1% din lăţimea ferestrei browser-ului,
 al doilea cadru ocupă nr2% din lăţimea ferestrei browser-ului;
 al treilea cadru ocupă diferenţa de procent din 100% lăţimii ferestrei browser-
ului şi suma de procente (nrl+nrl) ocupată de primul şi al doilea, această diferenţă este
specificată prin caracterul *.
Exemplu:
<HTML>
<FRAME SRC=,,unu.html">
</FRAMESET>
</HTML>
Ecranul este separat în trei secţiuni, prima ocupând 30% din lăţimea ferestrei browser-
ului, a doua ocupă 10%, iar a treia ocupând diferenţa rămasă din lăţimea fererestră.
6.4. CADRE ÎN CADRE

1. Putem afişa în aceeaşi fereastră a browser-ului simultan atât cadre orizontale cât şi
cadre verticale.
Exemplu:
<HTML>
<FRAMESET ROWS="30%,70%">
</FRAMESET>
<FRAMESET ROWS="33%,33%,*">
<FRAME SRC="rosu.html">
<FRAME SRC="galben.html">
<FRAME SRC="verde.html">
</FRAMESET>
</FRAMESET>
</HTML>
În exemplul de mai sus fereastra browser-ului este împărţită în două cadre verticale,
unul ocupând 80% din lăţimea ferestrei, iar celălalt lăţimea rămasă: <FRAMESET
COLS="80%,*">
La rândul lor cele două cadre sunt împărţite în alte cadre.
 Primul în două cadre orizontale: unul dintre acestea afişând documentul
unu.html pe 30% din înălţimea disponibilă şi al doilea afişând documentul
doi.html pe cele 70 de procente:
<FRAMESET ROWS ="30%,70%">
</FRAMESET>
 Al doilea conţine trei cadre spaţiate egal, fiecare având 33% din spaţiu pe
verticală:
<FRAMESET ROWS="33%,33%,*">
<FRAME SRC="rosu.html">
<FRAME SRC="galben.html">
<FRAME SRC="verde.html">
</FRAMESET>
2. Unui cadru i se poate asocia un nume prin intermediul parametrului NAME al
marcajului <FRAME>. <FRAME SRC="nume_cadru.extensie_cadru"
NAME=nume_cadru>
Numele dat unui cadru poate fi atribuit ca valoare parametrului TARGET al
marcajului <A>..</A> (marcaj de creare a unui link) atunci când este vizată afişarea paginii
Web, către care face referire link-ul, în cadrul ce poartă numele respectiv.
<A HREF="nume_pagină_Web.extensie" TARGET=nume_cadru>
Exemplu:
Documentul PRIMA.html
<HTML>
<FRAME SRC="ROSU.html">
<FRAME SRC="NEGRU.htmT>
<FRAME SRC="ALB.html" NAME=REFER>
</FRAMESET>
</FRAMESET>
</HTML>
Documentul ROSU.html:
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="RED" TEXT="#FFFFFF">
<A HREF^'VERDE.html'" TARGET=REFER>Referire către pagina Web verde </A>
<A HREF="ALBASTRU.html" TARGET=REFER> Referire către pagina Web
albastră</A>
</BODY>
</HTML>
Documentul ALB.html:
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="WHITE" TEXT="#00000">
<H1><CENTER>PAGINAALBA</CENTER></H1>
</BOBY>
</HTML>
Documentul NEGRU.html:
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="BLACK" TEXT="#00000">
<H 1 ><CENTER>PAGIN A NEAGRA</CENTER></H 1 >
</BOBY>
</HTML>
Documentul VERDE.html:
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="GREEN " TEXT="#00000">
<H 1 ><CENTER>P AGIN A AVERDE</CENTER></H 1 >
</BOBY>
</HTML>
Documentul ALBASTRU.html:
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="BLUE" TEXT="#00000">
<H 1 ><CENTER>PAGINA ALB ASTRA</CENTER></H 1 >
</BOBY>
<HTML>
LABORATOR NR. 7
7.1. FORMULARE
Formularele sunt una dintre cele mai populare metode interactive de comunicare din
World Wide Web (WWW). Puteţi crea formulare furnizând un anumit număr de câmpuri în
care un utilizator poate introduce informaţii sau poate alege o opţiune dintr-o listă de opţiuni.
Formularele HTML vă oferă posibilitatea de a aduna informaţii sau impresii de la cei care vă
vizitează pagina Web. Pentru a putea prelucra datele dintr-un formular, aveţi nevoie însă de
un script. Veţi vedea în partea a doua a cărţii cum se poate realiza aceasta.
Acestea au trei componente principale: <TEXTAREA>, <SELECT> şi <INPUT>.
 <TEXTAREA> - defineşte un câmp în care utilizatorul poate introduce un text
pe mai multe linii;
 <SELECT> - oferă utilizatorului posibilitatea de a alege dintr-o listă de
opţiuni;
 <INPUT> - defineşte toate celelalte metode de introducere a datelor (text pe o
singură linie, butoane radio, butoane de trimitere sau de anulare a datelor.
Formularele HTML sunt delimitate de marcajul <FORM>, care se specifică prin
<FORM ACTION=url METHOD=metoda> şi de marcajul de terminare </FORM>.
 ACTION specifică URL-ul (adresa) la care vor fi trimise informaţiile din
formular. Dacă acesta nu se specifică, vor fi trimise la acelaşi URL de unde provine şi pagina
Web.
 METHOD specifică cum vor fi trimise informaţiile. Cea mai folosită metodă
este POST, care trimite toate informaţiile din formular separat faţă de URL. Cealaltă opţiune
pentru METHOD este GET, care ataşează informaţiile din formular la sfârşitul URL-ului.
Vom prezenta în continuare, fiecare componentă pe larg:
 <TEXTAREA>
Cu aceasta componentă puteţi defini o zonă în care se poate introduce un text, pe mai
multe linii. Atributele pentru aceasta sunt:
 NAME - defineşte numele câmpului;
 ROWS - stabileşte numărul de linii din câmp;
 COLS - stabileşte numărul de coloane din câmp.
Exemplu:
<HTML>
<FORM>
<TEXTAREA NAME="Comentariu" ROWS=5 COLS=40>
</TEXTAREA>
</FORM>
</HTML>
 <SELECT>
Această componentă permite utilizatorului să aleagă dintr-o listă de opţiuni. Se poate
specifica câte opţiuni să fie afişate în acelaşi timp. Atributele pentru aceasta sunt:
 NAME - defineşte numele câmpului;
 SIZE - stabileşte câte opţiuni sunt afişate în acelaşi timp;
 MULTIPLE - permite selectarea mai multor opţiuni în acelaşi timp.
Opţiunile sunt delimitate de marcajele <SELECT> şi </SELECT> şi sunt listate în
cadrul etichetei <OPTION>. Valorile pentru aceasta eticheta sunt:
 VALUE - reprezintă valoare ce este atribuită opţiunii şi care este apoi trimisă .
către script;
 SELECTED - stabileşte o opţiune ca fiind implicită.
Exemplu:
<HTML>
Alegeţi o opţiune din lista
<FORM>
<SELECT NAME="Optiuni">
<OPTION SELECTED VALUE="Optiunel">Optiune1
<OPTIONVALUE="Optiune2">Optiune2
<OPTION VALUE=**Optiune3 ">Optiune3
</SELECT>
</FORM>
</HTML>
 <INPUT>
Spre deosebire de <TEXTAREA> şi <SELECT>, <INPUT> este un câmp pentru o
singură opţiune ce permite colectarea de informaţii, incluzând câmpuri simple de text,
butoane radio, căsuţe de bifare şi butoane de trimitere sau de anulare a informaţiilor din
formulare. Atributele pentru acesta sunt:
 NAME - defineşte numele câmpului. Acesta este obligatoriu pentru toate
tipurile cu excepţia butoanelor de trimitere şi anulare;
 SIZE - dimensiunea câmpului specificată în număr de caractere pentru text;
 MAXLENGTH - specifică numărul maxim de caractere ce pot fi citite pentru
un câmp de text;
 VALUE - defineşte pentru un câmp de text, textul implicit ce va fi afişat.
Pentru un buton radio sau o căsuţă de bifare specifică opţiunea implicită ce va fi selectată.
Pentru butoanele de trimitere sau anulare a informaţiilor din formular, specifică textul ce va fi
afişat în interiorul butonului;
 CHECKED - activează un buton radio sau o căsuţă de bifare;
 TYPE - defineşte tipul câmpului de intrare.
Exemplu pentru câmp simplu de text:
<HTML>
<FORM>
Introduceţi numele:
<INPUT TYPE="text" NAME="Nume" SIZE="15"
MAXLENGTH="12">
</FORM>
Exemplu pentru căsuţa de bifare:

<HTML>
<FORM>
<INPUT TYPE="checkbox" NAME="checkboxl" VALUE="Optiunel">
Opţiune 1
<INPUT TYPE="checkbox" NAME="checkbox2" VALUE="Optiune2"
CHECKED> Opţiune 2
</FORM>
</HTML>
Exemplu pentru butoane radio:

<HTML>
întrebarea 1
<FORM>
<INPUT TYPE="radio" NAME="choice CHECKED " VALUE="Optiunel">Da
<INPUT TYPE="radio" NAME="choice" VALUE="Optiune2">Nu
</FORM>
</HTML>
Exemplu pentru butoane de trimitere şi anulare:

<HTML>
<FORM>
Numele: <INPUT TYPE="text" NAME="Nume" SIZE="15"
MAXLENGTH=50">
<br><br>
<INPUT TYPE="Submit:' VALUE="Trimite">
<INPUT TYPE="Reset" VALUE="Anuleaza">
</FORM>
</HTML>
CUPRINS
1 INSTALAREA ŞI CONFIGURAREA SERVERULUI APACHE, PHP ŞI MYSQL PE FREEBSD

4
1.1 Obiective .............................................................................................................................. 4
1.2 Instalarea si configurarea MySQL ......................................................................................... 4
1.2.1 Instalarea MySQL Server 5 din colecția de porturi FreeBSD ................................................ 4
1.2.2 Instalarea phpMyAdmin – (nu merge fără PHP) .................................................................... 5
1.3. Instalarea şi configurarea Apache22...................................................................................... 5
1.4. Instalarea şi configurarea PHP ............................................................................................... 6
1.5. Verificarea instalării Apache, PHP şi MySQL , verificarea/modificarea fişierelor de configurare
7
1.5.1 Verificarea serverului Web Apache ...................................................................................... 7
1.5.2 Verificarea funcționării PHP ................................................................................................. 8
1.5.3 Verificarea funcționării phpMyAdmin................................................................................... 8
1.6 ..Instalarea şi configurarea unui server FTP ........................................................................... 9
2 Instalarea şi configurarea serverului Apache, PHP şi MySQL pe sistemul de operare Windows ......11
2.1 Obiective..............................................................................................................................11
2.2. Instalarea şi configurarea EasyPHP-2.0b1 .............................................................................11
2.3. Instalarea aplicației PhpMyAdmin ........................................................................................12
2.4. PHP Designer 2005 ...............................................................................................................12
2.4.1 Prima pagină HTML .............................................................................................................12
2.4.2 Prima pagină PHP ................................................................................................................14
3 Primii paşi în HTML ...........................................................................................................................15
3.1. Obiective ..................................................................................................................................15
3.2.Introducere ...............................................................................................................................15
3.3. Elemente constructive .........................................................................................................16
3.3.1 Blocuri preformatate...........................................................................................................16
3.3.2 Culoarea de fond.................................................................................................................16
3.3.3 Culoarea textului.................................................................................................................17
3.3.4 Stiluri pentru blocurile de text.............................................................................................18
3.3.5 Stiluri fizice şi logice ............................................................................................................18
4 Principalele structuri în HTML ...........................................................................................................20
4.1. Obiective ..................................................................................................................................20
4.2. Recapitulare .............................................................................................................................20
4.3. Legături – link-uri .................................................................................................................20
4.3.1 Ancore ................................................................................................................................21
4.4. Liste .....................................................................................................................................21
4.4.1 Liste neordonate .................................................................................................................21
4.4.2 Liste ordonate .....................................................................................................................22
4.5. Tabele ..................................................................................................................................22
4.5.1 Alinierea tabelului ...............................................................................................................23
4.5.2 Definirea culorilor de fond pentru un tabel .........................................................................23
4.5.3 Dimensionarea celulei unui tabel ........................................................................................23
4.5.4 Dimensionarea unui tabel ...................................................................................................24
4.5.5 Titlul unui tabel ...................................................................................................................24
4.5.6 Cap de tabel ........................................................................................................................24
4.5.7 Celule vide ale unui tabel ....................................................................................................24
4.5.8 Atributul " nowrap " ............................................................................................................24
4.5.9 Subblocurile unui tabel .......................................................................................................24
5 Primii paşi în PHP .........................................................................................................................26
5.1. Obiective..............................................................................................................................26
5.2. Introducere ..........................................................................................................................26
5.2.1 Sintaxa ................................................................................................................................26
5.2.2 Aplicații de început .......................................................................................................26
5.3. Variabile si tipuri de date în PHP ..........................................................................................27
5.3.1 Lucrul cu variabile si tipuri de date ......................................................................................28
5.3.2 Variabile dinamice...............................................................................................................29
5.4. Cod PHP în cod HTML ...............................................................................................................29
6 Construirea unui site în PHP .........................................................................................................31
6.1 Obiective..............................................................................................................................31
6.2 Introducere ..........................................................................................................................31
6.3 Elementele componente ......................................................................................................31
6.3.1 index ...................................................................................................................................31
6.3.3 body ...................................................................................................................................34
6.3.4 Meniurile orizontal şi vertical ..............................................................................................35
6.3.5 Conținut ..............................................................................................................................36
6.3.6 Module ...............................................................................................................................37
6.3.7 Footer, modulul data şi ora .................................................................................................38
6.4 Mod de lucru .......................................................................................................................40
7 Stiluri css şi chestionar în PHP ......................................................................................................41
7.1 Obiective..............................................................................................................................41
7.2 Utilizarea fişierelor css externe.............................................................................................41
8 Formular de prelucrare a datelor din baza de date MySQL ............................................................47
8.1 Obiective..............................................................................................................................47
8.2 Realizarea bazei de date.......................................................................................................47
8.3 Fisă de lucru .........................................................................................................................51
9 Sistem de înregistrare, autentificare şi protecție...........................................................................52
9.1 Obiective..............................................................................................................................52
9.2 Realizarea bazei de date.......................................................................................................52
9.3 Scriptul de înregistrare .........................................................................................................52
9.3.1 Explicarea scriptului ............................................................................................................56
9.3.2 Exemplu de script de atac ...................................................................................................56
9.3.4 Exemple de creare funcții: ...................................................................................................57
9.4 Scriptul de autentificare .......................................................................................................58
9.6 Scriptul profil.php ................................................................................................................59
9.7 Scriptul iesire.php ................................................................................................................64
10 Realizarea unui formular de contact ...............................................................................................65
10.1 Obiective.................................................................................................................................65
10.2 Mod de lucru: .........................................................................................................................65
10.2.1 Funcția date(); ...................................................................................................................66
10.2.2 Functia mail(); ...................................................................................................................67
11 Sistem de căutare în baza de date ..................................................................................................68
11.1 Obiective.................................................................................................................................68
11.2 Mod de lucru: .........................................................................................................................68
11.2.1 Fişierul adauga.php ...........................................................................................................68
11.2.2 Fişierul cauta.php ..............................................................................................................70
12 Sistem de blocare acces al unui utilizator aspra site-ului, sistem de contorizare a click-urilor pe un
link ......................................................................................................................................................74
12.1 Obiective.................................................................................................................................74
12.2 Partea I – blocare accces .........................................................................................................74
12.2.1 Mod de lucru: ....................................................................................................................74
Bibliografie ..........................................................................................................................................78
1 INSTALAREA ŞI CONFIGURAREA SERVERULUI APACHE, PHP ŞI MYSQL
PE FREEBSD
1.1 Obiective
• Instalarea şi configurarea serverului Apache;
• Instalarea şi configurarea PHP;
• Instalarea şi configurarea serverului MySQL şi a aplicației PhpMyAdmin
Pentru a instala pachetele corespunzătoare pe sistemul FreeBSD sunt necesare îndeplinirea
câtorva condiții:
• logarea ca root;
• verificarea conexiunii la Internet, pentru a putea descărca pachetele în timpul instalării.
1.2 Instalarea si configurarea MySQL

MySQL este un sistem de gestiune a bazelor de date relațional, produs de compania suedeză
MySQL AB şi distribuit sub Licența Publică Generală GNU. Este cel mai popular SGBD open-source la
ora actuală, fiind o componentă cheie a stivei LAMP (Linux, Apache, MySQL, PHP).
Deşi este folosit foarte des împreună cu limbajul de programare PHP, cu MySQL se pot construi
aplicații în orice limbaj major. Există multe scheme API disponibile pentru MySQL ce permit scrierea
aplicațiilor în numeroase limbaje de programare pentru accesarea bazelor de date MySQL, cum are fi:
C, C++, C#, Borland Delphi, Java, Perl, PHP, Python, FreeBasic, etc., fiecare dintre acestea folosind un
tip spefic API. O interfață de tip ODBC denumită MyODBC permite altor limbaje de programare ce
folosesc această interfață, să interacționeze cu bazele de date MySQL cum ar fi ASP sau Visual
Basic.
În sprijinul acestor limbaje de programare, unele companii produc componente de tip COM/COM+
sau .NET (pentru Windows) prin intermediul cărora respectivele limbaje să poată folosi acest SGBD
mult mai uşor decât prin intermediul sistemului ODBC. Aceste componente pot fi gratuite (ca de
exemplu MyVBQL) sau comerciale.
Licența GNU GPL nu permite încorporarea MySQL în softuri comerciale; cei care doresc să facă
acest lucru pot achiziționa, contra cost, o licență comercială de la compania producătoare, MySQL AB.
MySQL este componentă integrată a platformelor LAMP sau WAMP (Linux/Windows-Apache-
MySQL-PHP/Perl/Python). Popularitatea sa ca aplicație web este strâns legată de cea a PHP-ului care
este adesea combinat cu MySQL şi denumit Duo-ul Dinamic. În multe cărți de specialitate este precizat
faptul ca MySQL este mult mai uşor de învățat şi folosit decât multe din aplicațiile de gestiune a bazelor
de date, ca exemplu comanda de ieşire fiind una simplă şi evidentă: „exit” sau „quit”.
Pentru a administra bazele de date MySQL se poate folosi modul linie de comandă sau, prin
descărcare de pe internet, o interfață grafică: MySQL Administrator şi MySQL Query Browser. Un
alt instrument de management al acestor baze de date este aplicația gratuită, scrisă în PHP,
phpMyAdmin.
MySQL poate fi rulat pe multe dintre platformele software existente: AIX, FreeBSD, GNU/Linux,
MacOS X, NetBSD, Solaris, SunOS, Windows 9x/NT/2000/XP/Vista.
1.2.1 Instalarea MySQL Server 5 din colecția de porturi FreeBSD

1. Login în sistemul FreeBSD ca root, sau su - root pentru a intra în mediul super- user.
2. Introduceți următoarele comenzi în modul CLI (command line interface) al FreeBSD (Aşteptați
până când fiecare comandă îşi termină execuția înainte de a tasta comanda următoare):
cd /usr/ports/databases/mysql50-server make install clean
mysql_install_db
chown -R mysql /var/db/mysql/
chgrp -R mysql /var/db/mysql/
/usr/local/bin/mysqld_safe -user=mysql &
Notă: Dacă primiti răspunsul "Command not found error", folosiți comanda rehash pentru a
împrospăta variabilele sistemului de operare.
3. Instalarea porturilor va pune un fişier script mysql-server.sh în locația
/usr/local/etc/rc.d care are capabilitatea de a porni serverul MySQL. Pentru a determina serverul
MySQL să pornească automat la fiecare bootare a FreeBSD trebuie adăugat, în fişierul /etc/ rc.conf
următoarea linie de script:
mysql_enable=”YES”
4. În mod implicit, superutilizatorul MySQL este root, care nu are setată nici o parolă (parolă blank).
Aşadar este importantă atribuirea unei parole contului de administrator, lucru care se face cu
următoarele comenzi:
mysqladmin -u root password newpassword
Înlocuiți newpassword cu parola dorită (parola) – este
obligatorie
5. Opțional, se poate copia fie my-huge.cnf, my-large.cnf, my-medim.cnf, my- small.cnf sau my-
innodb-heavy-4G.cnf (în funcție de modul de utilizare al serverului MySQL) ca my.cnf în directorul
/var/db/mysql, care va permite modificarea configurărilor serverului prin editarea acestui fişier.
6. Instalarea lui MySQL 5.0 a luat sfârşit.
7. Chiar dacă nu este neapărat nevoie, pentru o mai mare siguranță, dați restart
(reboot).
1.2.2 Instalarea phpMyAdmin – (nu merge fără PHP)

În modul linie de comandă, logat ca root, se dau următoarele comenzi. Se aşteaptă terminarea
execuției comenzii curente, pentru a o da pe următoarea.
cd /usr/ports/databases/phpmyadmin make
make install
ln -s /usr/local/www/phpMyAdmin
/usr/local/www/apache22/data/phpMyAdmin (crează un link în directorul
data al localhost-ului)
cd /usr/local/www/data/phpMyAdmin
cp config.sample.inc.php config.inc.php
Se editează fişierul config.inc.php, următoarele linii astfel:
$cfg['blowfish_secret'] = 'parola'
...
$cfg['Servers'][$i]['auth_type'] = 'cookie'; //Authentication method
(config, http or cookie based)?
$cfg['Servers'][$i]['controluser'] = 'root';
$cfg['Servers'][$i]['controlpass'] = 'parola';
...
$cfg['ShowChgPassword'] = FALSE; // simple users or not
1.3. Instalarea şi configurarea Apache22

Un server HTTP este un daemon care acceptă conexiuni conforme protocolului HTTP,
răspunzând cererilor recepționate de la clienți. Protocolul HTTP (HyperText Transfer Protocol) este un
protocol de tip cerere-răspuns, bazat pe TCP/IP, destinat transferurilor informațiilor multimedia.
Serverul cel mai utilizat pe sistemele de operare UNIX este Apache.
Versiunea 2.2 are implementat un nou modul API de autentificare care permite o flexibilitate mai
mare. De asemenea şi module pentru cache si proxy.
1. Instalarea Apache HTTP Server 2.20 folosind colecția de porturi FreeBSD:
cd /usr/ports/www/apache22 make install clean
2. scriptul pentru serverul Apache http, script apache22.sh este localizat în
/usr/local/etc/rc.d pentru a oferi serviciu de pornire şi oprire a serverului Apache HTTP. Pentru a
activa serverul web Apache a pornească automat la bootarea sistemului, se adaugă următoarea linie
de comandă în /etc/ rc.conf: apache22_enable =”YES”
3. Pentru a porni serverul web Apache HTTP imediat, se foloseşte una din comenzile:
/usr/local/sbin/apachectl start sau
/usr/local/etc/rc.d/apache22.sh start
4. Instalarea a luat sfârşit, se recomandată restartarea sistemului.
1.4. Instalarea şi configurarea PHP

PHP este un limbaj de programare destinat în primul rând Internetului, aducând dinamică unei
pagini de web. Este unul din cele mai importante limbaje de programare web open-source şi server-side.
Numele PHP provine din limba engleză şi este un acronim recursiv : Php: Hypertext Preprocessor.
Folosirea PHP poate fi văzută ca o alternativă gratuită la utilizarea unor limbaje comerciale cum sunt
ASP de la Microsoft, ColdFusion de la Macromedia, sau chiar JSP de la Sun Microsystems.
Popularitatea de care se bucură acest limbaj de programare se datorează următoarelor
caracteristici :
• Familiaritatea: sintaxa limbajului este foarte uşoară combinând sintaxele unora din cele mai
populare limbaje Perl sau C;
• Simplitatea: sintaxa limbajului este destul de liberă. Nu este nevoie de includere de biblioteci
sau de directive de compilare, codul PHP inclus într-un document executându-se între marcajele
speciale;
• Eficiența: PHP-ul se foloseşte de mecanisme de alocare a resurselor, foarte necesare unui
mediu multiuser, aşa cum este Web-ul;
• Securitatea: PHP-ul pune la dispoziția programatorului un set flexibil şi eficient de măsuri de
siguranță;
• Flexibilitatea: fiind apărut din necesitatea dezvoltării Web-ului, PHP a fost modularizat
pentru a ține pasul cu dezvoltarea diferitelor tehnologii. Nefiind legat de un anumit server web,
PHP-ul a fost integrat pentru numeroasele servere web existente: Apache, IIS, Zeus, server, etc.;
• Gratuitatea: este probabil cea mai importantă caracteristică a PHP-ului.
Dezvoltarea PHP-ului sub licența open-source a determinat adaptarea rapidă
PHP-ului la nevoile Web-ului, eficientizarea şi securizarea codului.
Sub sistemul de operare FreeBSD s-a optat pentru instalarea pachetului PHP5 din colecția de
porturi (/usr/ports/lang/php5).
1. instalarea se face cu ajutorul următoarelor comenzi în modul CLI al FreeBSD, se aşteaptă până la
terminarea execuției unei comenzi pentru a o scrie pe următoarea:
cd /usr/ports/lang/php5 make install clean
2. Dacă sunteți
întrebați, selectați “use
Apache 2.x instead”.
La execuția comenzii
make install, este
prezentată fereastra de
configurare a opțiunilor
de compilare pentru PHP.
Fig.1. Configurare
PHP5 - faza de compilare
3. Instalarea PHP5
extensions şi a modulelor
ce permit suportul pentru
Apache se face cu
comenzile:
cd
/usr/ports/lang/php5-
extensions
make config
4. La opțiunile pentur php5-extension, selectați toate extensiile PHP şi modulele care le-ați putea
folosi cu serverul Apache şi cu bazele de date MySQL.
5. Se continuă instalarea lui php5-extensions cu următoarele comenzi:
make install clean
6. Dacă apare vreun mesaj prin care vi se cere să selectați unele opțiuni de configurare, le puteți
accepta pe cele implicite prin apăsarea tastei Enter. Unele module vă pot întreba pentru acțiuni care
includ php5-gd, php5-mbstring şi php5-sqlite.
7. Editați fişierul de configurare Apache pentru a permite serverului Apache să încarce module
PHP când sunt inițializate:
1. Căutați fişierul de configurare Apache în /usr/local/etc/apache2/
2. Deschideți fişierul de configurare httpd.conf
3. Căutați după liniile LoadModule lines, iar după ultima linie LoadModule, dar în aceeaşi secțiune
adăugați următoarele două linii: AddType application/x-httpd-php .php
AddType application/x-httpd-php-source .phps
8. Opțional, copiați fişierul /usr/local/etc/php.ini-recommended sau
/usr/local/etc/php.ini-dist în /usr/local/etc/php.ini (în acelaşi director), ceea ce vă va permite să
schimbați setările implicite ale PHP.
9. Porniți serverul Apache HTTP folosind comanda apachectl start (sau restatați
Apache HTTP web server prin utilizarea comenzii apachectl restart). Apachectl este plasată în
/usr/local/sbin, dacă vă apare mesajul Command not found problem, încercați să schimbați directorul
către acea locație, sau restartați sistemul.
10. Instalarea PHP5 a luat sfârşit.
Astfel, un server web a fost setat pe sistemul FreeBSD cu Apache, MySQL şi PHP. Directorul
în care serverul web îşi va ține documentele (acolo unde trebuie plasate fişierele HTML şi PHP este
/usr/local/www/apache22/data/ şi aveți nevoie de client SecureFTP (SFTP) cum ar fi WinSCP pentru a
upload-a fişierele în siguranță pe serverul web.
1.5. Verificarea instalării Apache, PHP şi MySQL,

verificarea/modificarea fişierelor de configurare
1.5.1 Verificarea serverului Web Apache

Pentru a testa funcționarea serverului web, se deschide navigatorul web şi la adresă se tastează:
localhost. Ar trebui să apară o pagină cu următorul mesaj: It Works!
Dacă nu merge, verificați fişierul de configurare al serverului Apache, httpd.conf aflat în
/usr/local/etc/apache2/
Liniile de script cele mai importante sunt:
#
# Listen: Allows you to bind Apache to specific IP addresses and/or
# ports, instead of the default. See also the <VirtualHost>
# directive.
#
# Change this to Listen on specific IP addresses as shown below to
# prevent Apache from glomming onto all bound IP addresses.
#
#Listen 12.34.56.78:80
Listen 127.0.0.1:80
Listen 192.168.1.4:80 #adresa IP a serverului local – poate fi alta LoadModule php5_module
libexec/apache22/libphp5.so
User www
Group www
</IfModule>
ServerAdmin admin@localhost.com
ServerName www.localhost.com:80
DocumentRoot "/usr/local/www/apache22/data"
...
<IfModule dir_module>
DirectoryIndex index.html index.php
</IfModule>
...
Alias /phpmyadmin/ "/usr/local/www/phpMyAdmin/"
<Directory "/usr/local/www/phpMyAdmin/"> Options none
AllowOverride Limit
Order Deny,Allow
# Deny from all
Allow from all
</Directory>
1.5.2 Verificarea funcționării PHP

În directorul rădăcină al serverului Apache, care este
/usr/local/www/apache22/data/, se creează un fişier cu extensia .php, numit phpinfo.php, şi care
conține următorul script:
<?php
phpinfo( );
?>
Se deschide un browser web, şi la adresă se tastează: localhost/phpinfo.php, iar în fereastră ne vor
apărea informații despre PHP, şi anume:
1.5.3 Verificarea funcționării phpMyAdmin

Se deschide browserul de web şi se tastează:
localhost/phpmyadmin/, şi ar trebui să apară fereastra
principală, care arată aşa:
Dacă nu funcționează, verificați fişierele de
configurare, prezentate la procedura de instalare
phpmyadmin, mysql şi apache.
Atenție: dacă pentru baza de date MySQL nu se
setează o parolă de root, aplicația phpMyAdmin va da
un mesaj de eroare. De asemenea, trebuie setate parole
pentru
$cfg['blowfish_secret'] = 'parola'
şi pentru
$cfg['Servers'][$i]['controluser'] = 'root';
$cfg['Servers'][$i]['controlpass'] = 'parola';
1.6 . Instalarea şi configurarea unui server FTP
Drept server ftp, am optat pentru pachetul pure-ftpd (http://www.pureftpd.org/), fiind o
implementare stabilă, conformă cu standardele, bine securizată. Această distribuție a fost aleasă
deoarece oferă un foarte bun suport pentru utilizatori virtuali, având posibilitatea folosirii chiar şi a
bazelor de date (MySQL, PostgreSQL).
Pachetul se poate instala fie din colecția de porturi (/usr/ports/ftp/pure-ftpd) sau cu ajutorul
utilitarului pkg_add .
Instalare pure-
ftpd cu pkg_add.
În ambele cazuri,
după instalare,
trebuie editat manual
fişierul de
configurare al
serviciului, activat
să pornească
automat odată cu
pornirea sistemului
de operare şi lansat
în execuție.
Fişierul de
configurare, pure-
ftpd.conf, trebuie
amplasat în
directorul
/usr/local/etc .
Important de menționat este faptul că serverul a fost configurat să nu permită accesul anonim,
utilizatorul fiind blocat în directorul său (chroot), evidența utilizatorilor fiind păstrată în sistemul nativ
de baze de date, puredb.
Pentru a se putea crea utilizatori virtuali, în sistemul de operare trebuie creat un cont de utilizator,
care să nu aibă posibilitate de login şi director home. Acest utilizator real este necesar deoarece, după
autentificarea prin protocolul ftp, utilizatorul virtual va fi impersonalizat (va primi identitatea) acestui
utilizator real.
În liniile de mai jos este prezentată secvența de comenzi pentru crearea utilizatorului de sistem şi a
unui utilizator virtual.
ns1# adduser
Username: ftp
Full name: FTP Virtual user
Uid (Leave empty for default): Login group [ftp]:
Login group is ftp. Invite ftp into other groups? []: Login class [default]:
Shell (sh csh tcsh nologin) [sh]: nologin
Home directory [/home/ftp]: /dev/null
Use password-based authentication? [yes]: no Lock out the account after creation? [no]: Username
: ftp
Password : <disabled>
Full Name : FTP Virtual user
Uid : 1005
Class : Groups : ftp
Home : /dev/null
Shell : /usr/sbin/nologin
Locked : no
OK? (yes/no): yes
adduser: INFO: Successfully added (ftp) to the user database. Add another user? (yes/no): no
Goodbye!
ns1# pure-pw useradd admin -u ftp -g ftp -d /usr/local/ftp
Password:
Enter it again:
ns1# pure-pw mkdb
ns1# cd /usr/local/etc/rc.d/
ns1# ./pure-ftpd forcestart
Starting pureftpd.
Running: /usr/local/sbin/pure-ftpd -A -c50 -B -C8 -D -E -fftp -H
-I15 -lpuredb:/usr/local/etc/pureftpd.pdb -L2000:8 -m4 -s -U133:022 - u100 -k99 –Z
ns1# mkdir /usr/local/ftp
ns1# chown -R ftp:ftp /usr/local/ftp/
În liniile de mai sus se remarcă necesitatea creării unui director pentru utilizatorul virtual, în cazul
de față /usr/local/ftp.
2 Instalarea şi configurarea serverului Apache, PHP şi MySQL
pe sistemul de operare Windows
2.1 Obiective
• Instalarea şi configurarea serverului Apache;
• Instalarea şi configurarea PHP;
• Instalarea şi configurarea serverului MySQL şi a aplicației PhpMyAdmin;
• Instalarea editorului PHPDesign 2005;
• Testarea funcționării aplicațiilor instalate.
Pe sistemul de operare Windows există mai multe aplicații folosite ca servere Web, unul dintre ele
fiind încorporat chiar în sistemul de operare Windows (2000, 2003 şi chiar XP), şi anume Internet
Information Service (ISS) care se poate adăuga după instalarea sistemului de operare din Add or
Remove Windows Components.
Pentru această lucrare s-a ales combinația WAMP (Windows, Apache, MySQL, PHP), care poate fi
implementată fie instalând fiecare componentă în parte şi modificându-le ulterior fişierele de
configurare, fie, soluția adoptată, utilizarea unei aplicații software care le înglobează pe toate trei. Aici
putem alege între EasyPHP şi/sau XAMPP. Pentru lucrare am ales EasyPHP , care este un program
Open Source, şi poate fi descărcat liber de pe internet de la adresa:
http://www.easyphp.org/telechargements.php3.
2.2. Instalarea şi configurarea EasyPHP-2.0b1

Paşii de instalare sunt:
1. Se dă dublu click pe fişierul , şi astfel se porneşte instalarea aplicațiilor;
2. se lege limba de instalare – implicit English - OK
3. Se dă Next, se acceptă condițiile de licență, Next,
Next , se alege locul de instalare al aplicațiilor – implicit
este în C:\Program Files\EasyPHP 2.0b1, şi lăsăm aşa, Next,
… până la Finish.
Pachetul este instalat în C:\Program Files\EasyPHP 2.0b1\
iar directorul unde sunt ținute şi de unde se accesează paginile
şi scripturile PHP este www.
Versiunile programelor aflate în EasyPHP sunt:
• Apache Version Apache/2.2.3 (Win32)
• PHP/5.2.0
• MySQL
ATENȚIE: Dacă fişierele HTML pot fi deschise cu un navigator Web oriunde s-ar afla ele,
scripturile PHP trebuie apelate scriind adresa http://localhost.numefişier.php deoarece scriptul PHP este
interpretat de serverul Web (Apache) şi rezultatul interpretării este trimis bowserului, acesta neştiind să
interpreteze PHP aşa cum o face cu HTML. De asemenea, scripturile php trebuie amplasate în directorul
C:\Program Files\EasyPHP 2.0b1\www, mai sus menționat.
Verificarea instalării corecte a serverului Apache: Se deschide browserul de Internet şi se tastează
localhost. Dacă instalarea este
corectă trebuie să fie afişate una
din următoarele:
1. dacă avem un fişier
index.html sau index.php sau
index.htm va fi afişat acesta;
2. dacă nu, de va afişa conținutul folderului:
C:\Program Files\EasyPHP 2.0b1\www, aşa cum se
vede în figura de mai jos.
2.3. Instalarea aplicației

PhpMyAdmin
Pentru a administra baza de date MySQL vom
folosi aplicația phpMyAdmin, care poate fi descărcată de
aici: http://www.phpmyadmin.net/home_page/index.php.
Aceasta este o colecție de scripturi php care ajută la
gestionarea bazei de date prin intermediul unei interfețe
Web. Arhiva descărcată de mai sus va fi dezarhivată în
directorul C:\Program Files\EasyPHP
2.0b1\www\phpMyAdmin. Pentru a lansa în execuție aplicația de administrare a bazei de date se
deschide navigatorul web iar în url se tastează: http://localhost/phpmyadmin/ apărând fereastra de
autentificare :
În mod implicit, parola pentru root este nesetată (vidă), iar la apăsarea butonului
Execută se încarcă pagina următoare:
Deoarece existența contului root fără parolă de acces este periculoasă pentru integritatea bazei de
date, va trebui să-i setăm o parolă de acces. Vom face aceasta apăsând pe legătura "Drepturi de acces"
sau "Privileges" dacă interfața este în engleză. Se va încărca pagina cu drepturi de acces asupra
MySQL, şi în dreptul lui root apăsăm pe butonul ce indică modificarea:
Apoi după ce s-a încărcat următoarea
pagină, găsiți unde apare ”Schimbare
parola” şi bifați ”Parola”, apoi tastați
parola dvs. şi în prima, şi în a-II-a
căsuță, după care apăsați pe butonul „Executa”. După setarea parolei de root, mai apare un cont de
utilizator "Oricare", fără parole şi cu privilegii reduse.
2.4. PHP Designer 2005

Paginile web, fie ele html sau php se pot scrie în orice editor de text, de exemplu notepad. Dar
pentru scrierea uşoară, rapidă şi fără erori a unor pagini mari există diverse aplicații (editoare php,
html). Dintre acestea amintesc doar PHPEdit şi PHP Designer 2005. Dintre acestea îl vom folosi pe
ultimul, care este Free, cu toate că este mai puțin complex. Instalarea se face simplu, ca orice aplicație
sub Windows.
Cu ajutorul acestui editor PHP vom crea prima pagină html şi prima pagină php.
2.4.1 Prima pagină HTML

Se deschide aplicația PHPDesign 2005, se alege un document nou te tip html şi se introduce
scriptul de mai jos:
script html: Explicații:

<html > - început document html
<head> - început antet,
<title>Document Nou</title> - titlul documentului
</head> - sfârşit antet document
<body> - începutul corpului documentului (paginii web)
Prima pagina web in HTML!! - conținutul paginii
</body> - sfârşitul corpului documentului (paginii web)
</html> - sfârşitul documentului html.
Se salvează documentul creat cu numele index.html în directorul: C:\Program Files\EasyPHP
2.0b1\www
Rezultat: în navigatoul web, la adresă scriem următoarele: localhost şi ar trebui să vedem
următoarea pagină:
2.4.2 Prima pagină PHP
Se deschide un nou fişier în PHPDesign 2005, şi de data aceasta se alege opțiunea php. În noua
fereastră se introduce scriptul de mai jos:
Script php: Explicații

<?php - început document php
phpinfo(); - funcția phpinfo, care întoarce informații despre serverul PHP
?> - sfârşit document php
Rezultat:
Salvăm fițierul sub numele info.php în directorul mai sus menționat, iar la adresa
browserului web introducem: localhost/info.php . În pagina web ar trebui să apară informații despre
serverul PHP, Apache şi MySQL instalate pe sistem.
Dacă nu apare nimic, înseamnă că serverul php nu este instalat corect sau fişierul nu este salvat în
directorul: C:\Program Files\EasyPHP 2.0b1\www
3 Primii paşi în HTML
3.1. Obiective
• Introducere în elementele de bază ale limbajului HTML;
• Realizarea unor scripturi HTML, şi modificarea acestora pentru a vedea diferențele;
3.2.Introducere
Orice
document
HTML începe
cu notația
<html> şi se
termină cu
notația
</html>.
Aceste notații
se numesc în
literatura de
specialitate
"TAG-uri".
Prin convenție,
toate
informațiile
HTML încep
cu o paranteză
unghiulară
deschisa "<" şi
se termină cu o
paranteză
unghiulară închisă ">".
Tag-urile dintre aceste paranteze transmit comenzi către browser pentru a afişa pagina într-un
anumit mod. Unele blocuri prezintă delimitator de sfârşit de bloc, în timp ce pentru alte blocuri acest
delimitator este opțional sau chiar interzis.
Între cele două marcaje <html> şi </html> vom introduce două secțiuni:
• secțiunea de antet <head>...</head> şi
• corpul documentului <body>...</body>. Blocul <body>...</body> cuprinde conținutul
propriu-zis al paginii HTML, adică ceea ce va fi afişat în fereastra browser-ului.
O etichetă poate fi scrisă atât cu litere mici, cât şi cu litere mari. Adică <HTML> = <HtmL> =
<html>. Caracterele "spațiu" şi "CR/LF" (Enter) ce apar între etichete sunt ignorate de către browser.
Deci un prim document HTML ar putea fi:
<html>
<head> </head>
<body>
</body>
</html>
Aşa arată primul document HTML. Copiați-l folosind Copy/Paste într-un fişier nou şi salvați-l ca
test3.htm sau test3.html. Apoi porniți Mozilla Firefox sau Internet Explorer, dați CTRL-O şi
introduceți calea spre fişier. Dați OK şi ... nimic. – Normal, între tagurile <body> nu este scris nimic.
Să adăugăm primele elemente la pagina noastră. În primul rând, titlul unei pagini se obține inserând
în secțiunea <head>...</head> a următoarei linii:
În plus, în secțiunea <body>...</body> se pot scrie oricate linii de text. Dacă nu întâlnim nici un
marcaj < sau > atunci interpretorul HTML le va lua ca texte simple şi le va afişa pe ecran.
Noua versiune a paginii este:
<html>
<head>
</head>
<body>
Bine ati venit in pagina mea de Web!
</body>
</html>
Conținutul blocului <title>...</title> va apărea în bara de titlu a ferestrei browser-ului. Dacă acest
bloc lipseşte într-o pagină HTML, atunci în bara de titlu a ferestrei browser-ului va apărea numele
fişierului.
Dacă introducem mai multe linii într-o pagină browser-ul va afişa într-un singur rând, întrucât
caracterele "Enter - CR/LF " sunt ignorate de browser. Trecerea pe o linie nouă se face la o comandă
explicită, care trebuie să apară în pagina html. Această comanda este marcajul <br> ( de la " line break
" - întrerupere de linie ).
Folosind aceleaşi operații ca mai sus, vizualizați noua pagina! Veți vedea textul ce apare în fereastra
navigatorului. În plus, pagina dvs. va avea un titlu nou, cel introdus de dvs.
<html>
<head>
<title> titlul paginii</title>
</head>
<body>
Bine ati venit in <br> pagina mea de Web!
</body>
</html>
3.3. Elemente constructive
3.3.1 Blocuri preformatate

Pentru ca browser-ul să interpreteze corect caracterele "spațiu", "tab" şi "CR/LF" ce apar în cadrul
unui text, acest text trebuie inclus într-un bloc <pre>...</pre>.
<html>
<head>
<title>bloc preformatat </title>
</head>
<body><pre>
Prima linie
A doua linie
A treia linie
</pre></body>
</html>
3.3.2 Culoarea de fond

O culoare poate fi precizată în două moduri:
• Printr-un nume de culoare. Sunt disponibile cel puțin 16 nume de culori: aqua, black,
fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white si yellow.
• Prin construcția "#rrggbb" unde r (red), g (green), sau b (blue) sunt cifre hexazecimale şi pot
lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot defini astfel 65536 de
culori.
Culoarea unei pagini se precizează prin intermediul unui atribut al etichetei <body>.
Culoarea fondului paginii Web se stabileşte cu atributul bgcolor al etichetei <body>, de
exemplu: <body bgcolor = culoare>.
Următorul exemplu realizează o pagină cu fondul de culoare gri.
<html>
<head>
<title>culoare de fond </title>
</head>
<body bgcolor=gray>
O pagina Web cu fondul GRI!
</body>
</html>
3.3.3 Culoarea textului

Acest lucru se face prin intermediul atributului text al etichetei <body> după sintaxa <body
text=culoare>. În următorul exemplu textul are culoarea roşie.
<html>
<head>
<title>culoare textului </title>
</head>
<body text=red>
Un text de culoare rosie.
</body>
</html>
O etichetă poate avea mai multe atribute. De exemplu, o etichetă cu trei atribute arată astfel:
<eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 = valoare3>. Următorul exemplu prezintă o
pagină cu fondul de culoare albastră şi textul de culoare galbenă.
<html>
<head>
<title>atribute multiple </title>
</head>
<body bgcolor=blue text=yellow>
Fond de culoare albastra si text de culoare galbena.
</body>
</html>
Textul afişat este caracterizat de următoarele atribute: Mărime (size), Culoare (color), Font (style).
Acestea sunt atribute ale etichetei <basefont>. Este o etichetă singulară (fără delimitator de sfârşit de
bloc).
<basefont size = numar color = culoare face = font>
unde:
• număr - poate fi 1, 2, 3, 4, 5, 6 sau 7; (1 pentru fontul cel mai mic şi 7 pentru fontul cel
mai mare);
• culoare - este o culoare precizată prin nume sau printr-o construcție RGB;
• font – face: poate fi un font generic ca "serif", "san serif", "cursive", "monospace", "fantasy"
sau un font specific instalat pe calculatorului clientului, ca "Times New Roman", "Helvetica" sau
"Arial". Se acceptă ca valoare şi o listă de fonturi separate prin virgulă, de exemplu: "Times New
Roman, serif, monospace ".
Domeniul de valabilitate al caracteristicelor precizate de această etichetă se întinde de la locul în
care apare eticheta până la sfârşitul paginii sau până la următoarea etichetă <basefont>.
Dacă acest atribut lipseşte atunci textul din pagina Web are atribute prestabilite sau atribute
precizate de browserul utilizat.
Atributele prestabilite sunt: size = 3, color = black, şi style = " Times New Roman".
Poziționarea conținutului paginii Web față de marginile ferestrei browserului se poate face cu
ajutorul a două atribute ale etichetei <body>:
• leftmargin (stabileşte distanța dintre marginea stângă a ferestrei browserului şi marginea
stângă a conținutului paginii);
• topmargin (stabileşte distanța dintre marginea de sus a ferestrei browserului şi marginea de
sus a conținutului paginii);
<html>
<head>
<title>Configurarea textului si stabilirea marginii </title>
</head>
<body leftmargin="100" topmargin="50">
Textul are atribute implicite.
<br>
<basefont face="Arial" color="blue" size="6">
Textul este scris cu fontul "Arial", culoare albastru si marime 6.
</body>
</html>
3.3.4 Stiluri pentru blocurile de text

Pentru ca un bloc de text să apară în pagină evidențiat (cu caractere aldine), trebuie inclus între
delimitatorii <b>...</b> (b - bold).
Pentru ca un text să fie scris cu caractere mai mari cu o unitate decât cele curente acesta trebuie
inclus într-un bloc delimitat de etichetele <big>...</big>.
Pentru ca un text să fie scris cu caractere mai mici cu o unitate decât cele curente acesta trebuie
inclus într-un bloc delimitat de etichetele <small>...</small>.
Pentru ca un text să fie scris cu caractere cursive, acesta trebuie inclus într-un bloc delimitat de
etichetele <i>...</i> (i -italic).
Pentru a insera secvențe de text aliniate ca indice (sub-script) sau ca exponent (super-script), aceste
fragmente trebuie delimitate de etichetele <sub>...</sub>, respectiv <sup>...</sup>.
Pentru a insera un bloc de caractere subliniate se utilizează etichetele <u>...</u> (u - underline).
Pentru a insera un bloc de caractere tăiate se utilizează etichetele <strike>...</strike> sau
<s>...</s>.
În exemplul următor vom utiliza toate etichetele menționate anterior.
<html>
<head>
<title>Stiluri pentru blocuri de text </title>
</head>
<body>
<b>Text scris cu caractere ingrosate.</b>
<br> <big>Text cu caractere marite cu o unitate <big>mai mare<big> si mai mare<big> si mai
mare.</big></big></big></big><br>
<small>Textul este scris cu caractere micsorate cu o unitate
<small>mai mic.</small></small><br>
<i>Text scris cu caractere italice.</i>
<br> In aceasta linie <sup>sus</sup> este superscript iar
<sub>jos</sub> este subscirpt.<br>
<strike>Aceasta linie este in intregime sectionata de o linie orizontala.</strike> <br>
In aceasta linie urmatorul cuvant este <u>subliniat</u>, iar cuvantul
<s>strike</s> sectoinat.
</body>
</html>
3.3.5 Stiluri fizice şi logice

Am prezentat deja 8 stiluri de scriere a caracterelor unui bloc de text, numite şi stiluri fizice întrucât
nu s-a acordat nici o atenție semnificației informației conținute de aceste blocuri.
În continuare sunt prezentate stilurile utilizate la formatarea unui bloc. Aceste stiluri țin cont de
semnificația pe care o are blocul în cadrul paginii Web.
Pentru a pune în evidență (prin silul cursiv) fragmente de text se utilizează
etichetele:
• <cite>...</cite> ("cite" înseamnă citat);
• <em>...</em> (em vine de la "emphasize" = a evidenția). În locul lor se poate utiliza eticheta
echivalenta <i>...</i>.
Următoarele etichete au efecte similare. Ele permit scrierea fragmentului de text cu caractere
monospațiate (de tipul celor folosite de o maşină de scris):
• <code>...</code> ("code" înseamnă cod sau sursă);
• <kbd>...</kbd> (kbd - keyboard = tastatură);
• <tt>...</tt> (tt - teletype = teleprinter).
<html>
<head>
Eticheta de tip bloc <blink>...</blink> delimitează fragmente de text clipitoare.
<title>Blocuri de caractere monospatiate si clipitoare </title>
</head>
<body>
Aceasta linie este formata din text normal.<br>
Codul functiei f(x,y) este: <code>Function f(x,y) {return x+y;}</code><br>
Tastati urmatoarea comanda comanda DOS:
<kbd> copy c:\windows\* c:\temp<kbd><br>
<tt>Asa scrie un teleprinter</tt><br>
Acest cuvant clipeste <blink>Blink</blink>
</body>
</html>
Exemplul următor ilustrează că etichetele pot fi imbricate.
• un fragment de text poate fi scris cu aldine şi cursive în acelaşi timp;
• pentru un fragment de text se pot folosi simultan stilurile subliniat, exponent, mărit şi
cursiv.
• Blocul <q>...</q> permite inserarea in-line a citatelor. Aceste citate sunt afişate de către
browser cu caractere cursive. "q" vine de la "in-line quotation" (citate inserate in-line); Şi blocurile " q
" pot fi imbricate.
<html>
<head>
<title>Imbricarea etichetelor </title>
</head>
<body> Aceasta linie este formata din text normal.<br>
Normal <b>ingrosat <i> ingrosat si italic </i> ingrosat </b>.
<br> Normal <u>subliniat <b> subliniat si ingrosat <big>subliniat, ingrosat si marit.<br>
<i>Subliniat, ingrosat ,marit si italic.</i> </big></b></u>
</body>
</html>
4 Principalele structuri în HTML
4.1. Obiective
• dobândirea cunoştințelor despre legături, liste, tabele în html;
4.2. Recapitulare
Orice document HTML începe cu notația <html> şi se termină cu notația </html>. Aceste caractere
se numesc în literatura de specialitate "TAG-uri". Prin convenție, toate informațiile HTML încep cu o
paranteză unghiulară deschisa "<" şi se termină cu o paranteză unghiulară închisă ">".
Tag-urile dintre aceste paranteze transmit comenzi către browser pentru a afişa pagina într-un
anumit mod. Unele blocuri prezintă delimitator de sfârşit de bloc, în timp ce pentru alte blocuri acest
delimitator este opțional sau chiar interzis.
Între cele două marcaje <html> şi </html> vom introduce două secțiuni:
• secțiunea de antet <head>...</head> şi
• corpul documentului <body>...</body>. Blocul <body>...</body> cuprinde conținutul
propriu-zis al paginii HTML, adică ceea ce va fi afişat în fereastra browser-ului.
O etichetă poate fi scrisă atât cu litere mici, cât şi cu litere mari. Adică <HTML> = <HtmL> =
<html>. Caracterele "spațiu" şi "CR/LF" (Enter) ce apar între etichete sunt ignorate de către browser.
Fişier de lucru:
Se va crea un director Lucrare4, în care va crea fişierul de lucru lucrare4.html, în care vor scrie,
următoarele:
<html >
<head>
<title>Document Nou</title>
</head>
<body>
<h1>Lucrarea de laborator nr 4 <br> lectii de html</h1>
<h2>Crearea legaturilor in html</h2>
</body>
</html
4.3. Legături – link-uri

Pentru această secțiune, se va mai crea în acelaşi director, două fişiere html, numite pagina1.html şi
pagina2.html, în care vor introduce următoarele scripturi:
<html >
<head>
<title>Pagina 1</title>
</head>
<body>
<font color=red><h3>Lucrarea de laborator nr 4 <br> pagina 1</h3></font>
</body>
</html>
şi
<html >
<head>
<title>Pagina 2</title>
</head>
<body>
<font color=blue><h3>Lucrarea de laborator nr 4 <br> pagina 2</h3></font>
</body>
</html>
O legătură către o pagină aflată în acelaşi director se formează cu ajutorul etichetei <a> (de la
"anchor"=ancora). Pentru a preciza pagina indicată de legătură se utilizează un atribut al etichetei
<a> numit href, care ia valoare numele fişierului HTML aflat în acelaşi director. Zona activă care
devine sensibilă la apăsarea butonului stâng al mouse-ului este formată din textul cuprins între etichetele
<a>...</a>. Prezența etichetei de sfârşit </a> este obligatorie.
În pagina principală, de lucru, lucrare4.html se scriu în continuare legăturile către pagina 1 şi
către pagina2:
Legatura catre pagina1: <a href="pagina1.html"> apasa aici </a><br> Legatura catre
pagina2: <a href="pagina2.html"> apasa aici </a><br>
Dacă vrem să creăm o legătură către o pagină de pe disc, în loc de "pagina1.html" vom scrie calea
către fişierul respectiv.
Pentru a crea o legătură către un iste extern, vom scrie adresa site-ului, de ex:
<a href="http://www.yahoo.com"><b> Catre site-ul YAHOO</b> </a><br>
4.3.1 Ancore
Într-o pagină foarte lungă pot exista puncte de reper către care se definesc legături.
O ancoră se defineşte de asemenea prin eticheta <a>. Pentru a defini ancora se utilizează atributul
name care primeşte ca valoare un nume atribuit ancorei (de exemplu "leg1").
Pentru a insera o legătura către "leg1" definită în aceeaşi pagină se utilizează eticheta <a>
având atributul href de valoare "#leg1".
Pentru a introduce o legătură către o ancoră definita în alt document (alta pagină) aflat în acelaşi
director, atributul href primeşte o valoare de forma "nume_fisier.html#nume_ancora".
Vom defini o ancoră în top-ul paginii şi una la sfârşitul paginii astfel: În topul paginii, după tag-ul
<body> se scrie: <a name="top">top
În josul paginii: înainte de </body> se scrie: <a name="jos">jos
Pentru apelarea ancorelor, scriem în continure, de unde am rămas data trecută:
<h3>Ancore definite in acelasi document </h3>
<a href="#jos">
Link catre sfarsit pagina</a>
<br> 1<br>2<br>3<br>4<br> 5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>

13<br>14<br>15<br>16<br> 17<br>18<br>19<br>20<br> 21<br>22<br>23<br>
24<br>
Catre top pagina
<a href="#top"> Link catre top </h3>
4.4. Liste
4.4.1 Liste neordonate
O listă neordonată este un bloc de text delimitat de etichetele corespondente <ul>...</ul> (" ul
" vine de la " unordered list " = lista neordonata). Fiecare element al listei este inițiat de eticheta <li>
(list item).
Lista va fi indentată față de restul paginii Web şi fiecare element al listei începe pe un rând nou.
În fişierul pagina1.html se introduc următoarele scripturi, înainte de tagul </body>:
<h1 align="center">O lista neordonata</h1><hr> Glosar de termeni de World Wide Web
<ul>Culori uzuale disponibile prin nume
<li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ul>
Tag-urile <ul> şi <li> pot avea un atribut type care stabileşte caracterul afişat în fața fiecărui
element al listei. Valorile posibile al acestui atribut sunt:
o "circle" (cerc)
• "disc" (disc plin) (valoarea prestabilita);
"square" (patrat)
Listele neordonate pot fi imbricate pe mai multe niveluri: exemplu: în continuare se introduc
rândurile:
<h1 align="center">O lista neordonata de liste neordonate</h1><hr> Glosar de termeni de World Wide Web
<ul>Elemente si atribute a unei pagini HTML
<li>Frameset <ul>Atribute: <li>cols <li>rows <li>border </ul>
<li>Frame <ul>Atribute: <li>src <li>name <li>scrolling </ul>
</ul>
4.4.2 Liste ordonate

O listă ordonată de elemente este un bloc de text delimitat de etichetele corespondente <ol>...</ol>
("ol" vine de la "ordered list" = listă ordonată). Fiecare element al listei este inițiat de eticheta <li> (list
item).
Lista va fi indentată față de restul paginii Web şi fiecare element al listei începe pe un rând nou.
<h1
align="center">O lista ordonata</h1><hr>
<ol>Culori uzuale disponibile prin nume
<li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple
<li>Aqua
</ol>
Tag-urile <ol> şi <li> pot avea un atribut type care stabileşte tipul de caractere utilizate pentru
ordonarea listei. Valorile posibile sunt:
• " A " pentru ordonare de tipul A , B , C , D etc. ( litere mari );
• " a " pentru ordonare de tipul a , b , c , d etc. ( litere mici );
• " I " pentru ordonare de tipul I , II , III , IV etc. ( cifre romane mari );
• " i " pentru ordonare de tipul i , ii , iii , iv etc. ( cifre romane mici );
• " 1 " pentru ordonare de tipul 1 , 2 , 3 , 4 etc. ( cifre arabe - opțiune prestabilită);
Listele ordonate pot fi imbricate între ele sau cu liste neordonate, ca în exemplul următor.
<html>
<head><title>listex_8</title></head>
<body><h1 align="center">O lista ordonata de liste ordonate si neordonate</h1><hr>
<ol>Un sistem informatic include:
<li>Hardware:
<ol>
<li>placa de baza
<li>procesor
<li>memorie
<li>harddisk
</ol>
<li>Software:
<ul>
<li>Linux
<li>Windows
<li>OS/2
<li>Unix
</ul>
<li>Software de aplicatie:
<ul type="disc">
<li>VisualC++
<li>Java
<li>SQL
<li>CorelDraw
</ul>
</ol>
</body>
</html>
4.5. Tabele
Tabelele ne permit să creăm o rețea dreptunghiulară de domenii, fiecare domeniu având propriile
opțiuni pentru culoarea fondului, culoarea textului, alinierea textului etc. Pentru a insera un tabel se
folosesc etichetele corespondente <table>...</table>. Un tabel este format din rânduri. Pentru a
insera un rând într-un tabel se folosesc etichetele <tr>...</tr> (de la " table row "= rând de tabel).
Folosirea etichetei de sfârşit </tr> este opțională.
Un rând este format din mai multe celule ce conțin date. O celulă de date se introduce cu eticheta
<td>..</td>.
Toate exemplele de tabele vor fi scrise în fişierul pagina2.html.
În mod implicit, un tabel nu are chenar. Pentru a adăuga un chenar unui tabel, se utilizează un
atribut al etichetei <tabel> numit border.
Acest atribut poate primi ca valoare orice număr întreg ( inclusiv 0 ) şi reprezintă
grosimea în pixeli a chenarului tabelului.
Dacă atributul border nu este urmată de o valoare atunci tabelul va avea o grosime
prestabilita egală cu 1 pixel, o valoare egală cu 0 a grosimii semnifică absența chenarului.
Când atributul border are o valoare nenulă chenarul unui tabel are un aspect tridimensional.
Exemplu: tabel cu trei rânduri şi patru coloane:
<table border="3">
<tr> <td>celula 11</td> <td>celula 12</td><td>celula 13</td></tr>
</table>
4.5.1 Alinierea tabelului

Pentru a alinia un tabel într-o pagina Web se utilizează atributul align al etichetei <table>, cu
următoarele valori posibile: "left" (valoarea prestabilită), "center" şi "right".
Alinierea este importantă pentru textul ce înconjoară tabelul. Astfel :
• dacă tabelul este aliniat stânga (<table align="left">), atunci textul care urmează după
punctul de inserare al tabelului va fi dispus în partea dreapta a tabelului.
• dacă tabelul este aliniat dreapta (<table align="right">), atunci textul care urmează
după punctul de inserare al tabelului va fi dispus în partea stângă a tabelului.
• dacă tabelul este aliniat pe centru (<table align="center">), atunci textul care urmează
după punctul de inserare al tabelului va fi afişat pe toată lățimea paginii, imediat sub tabel.
Pentru a modifica alinierea tabelului nostru, se adaugă align="center" după tagul <table şi
înainte de border"3", aşa ca mai jos:
<table align="center" border="3">
4.5.2 Definirea culorilor de fond pentru un tabel

Culoarea de fond se stabileşte cu ajutorul atributului bgcolor, care poate fi ataşat întregului tabel
prin eticheta <table>, unei linii prin eticheta <tr> sau unei celule de date prin eticheta <td>.
Valorile pe care le poate primi bgcolor sunt cele cunoscute pentru o culoare. Dacă în tabel sunt
definite mai multe atribute bgcolor, atunci prioritatea este următoarea: <td>, <tr>, <table> ( cu
prioritate cea mai mică ).
Exemplificare cod:
• fond galben pentru tot tabelul:
<table align="center" border="3" bgcolor="yellow">
• fond verde pentru un rândul 1:
<tr bgcolor="green"> <td>celula 11</td> <td>celula 12</td><td>celula
13</td></tr>
• fond roşu pentru celula 11 şi celula 23:
… <td bgcolor="red">celula 11</td> …
… <td bgcolor="red">celula 22</td> …
4.5.3 Dimensionarea celulei unui tabel

Distanța dintre două celule vecine se defineşte cu ajutorul atributului cellspacing al etichetei
<table>. Valorile acestui atribut pot fi numere întregi pozitive, inclusiv 0, şi reprezintă distanța în pixeli
dintre două celule vecine. Valoarea prestabilită a atributului cellspacing este 2.
Distanța dintre marginea unei celule şi conținutul ei poate fi definită cu ajutorul atributului
cellpadding al etichetei <table>.Valorile acestui atribut pot fi numere întregi pozitive, şi reprezintă
distanța în pixeli dintre celule şi conținutul ei. Valoarea prestabilita a atributului cellpadding este 1.
Exemplificare:
• pentru a seta distanța dintre două celule vecine, se adaugă la <table …> :
cellspacing="0", şi setăm distanța dintre celule la zero;
• pentru a seta distanța dintre marginea celulei şi textul din ea la 20 pixeli, vom adăuga:
cellpadding="20".
<table cellspacing="0" cellpadding="20" …
4.5.4 Dimensionarea unui tabel

Dimensiunile unui tabel - lățimea şi înălțimea - pot fi stabilite exact prin intermediul a doua atribute,
width şi height, ale etichetei <table>. Valorile acestor atribute pot fi:
• numere întregi pozitive, reprezentând lățimea respectiv înălțimea în pixeli a tabelului;
• numere întregi între 1 şi 100, urmate de semnul %, reprezentând fracțiunea din lățimea şi
înălțimea totală a paginii.
Exemplu: <table width="200" height="50%" …>, tabel cu lățimea 200 pixeli şi înălțimea 50%
din înălțimea paginii web.
4.5.5 Titlul unui tabel

Unui tabel i se poate ataşa un titlu cu ajutorul etichetei <caption> ( de la "table caption" = titlu
tabel). Această etichetă trebuie plasată în interiorul etichetelor
<table>...</table>, dar nu în interiorul etichetelor <tr> sau <td>. Titlul unui tabel poate fi aliniat cu
ajutorul atributului align al etichetei <caption> care poate lua una dintre valorile:
• " bottom " ( sub tabel );
• " top " ( deasupra tabelului );
• " left " ( la stanga tabelului );
• " right " ( la dreapta tabelului ).
Exemplu: <table …><caption align="top">Titlu tabel lucrare4
4.5.6 Cap de tabel

Un tabel poate avea celule cu semnificația de cap de tabel. Aceste celule sunt introduse de eticheta
<th> (de la "tabel header" = cap de tabel) în loc de <td>.
Toate atribute care pot fi ataşate etichetei <td> pot fi de asemenea ataşate etichetei <th>. Conținutul
celulelor definite cu <th> este scris cu caractere aldine şi centrat.
<tr><th>capcol1</th><th>capcol2</th><th>capcol3</th>
4.5.7 Celule vide ale unui tabel

Dacă un tabel are celule vide, atunci aceste celule vor apărea în tabel fără un chenar de delimitare. În
scopul de a afişa un chenar pentru celule vide se utilizează următoarele trucuri:
• după <td> se pune ;
• după <td> se pune <br>.
Caracterul (no break space) este de fapt caracterul spațiu. Un spațiu introdus prin
intermediul acestui caracter nu va fi ignorat de browser.
4.5.8 Atributul " nowrap "

Atributul nowrap aparține elementelor <td> şi <th>; el interzice întreruperea unei linii de text.
Astfel, în tabel pot apărea coloane cu o lățime oricât de mare.
4.5.9 Subblocurile unui tabel

În specificațiile HTML 4.0, conținutul unui tabel poate fi împărțit în subblocuri prin elementele:
• <thead><tr><td>...</thead> ( un singur rând );
• <tfoot><tr><td>...</tfoot> ( un singur rând );
• <tbody><tr><td>...</tbody> ( oricâte rânduri );
Într-un tabel există un singur subbloc de tipul <thead> şi un singur subbloc de tipul <tfoot>, dar pot
exista mai multe subblocuri de tip <tbody>.
5 Primii paşi în PHP
5.1. Obiective
• Introducere în elementele de bază ale limbajului PHP;
• Realizarea unor scripturi PHP, şi modificarea acestora pentru a vedea diferențele;
5.2. Introducere
PHP este un limbaj dinamic, ceea ce înseamnă că PHP comunică cu utilizatorul, el efectuează
dinamic operații, iar conținutul paginii se schimbă în real-time, în funcție de preferințe. De exemplu în
HTML nu putem modifica conținutul unei pagini decât dacă o înlocuim cu una nouă (cu conținut
nou). În PHP lucrurile stau mai simplu, printr- un script putem introduce ştiri pe pagina noastră sau
putem modifica titlul paginii, sau putem construi formulare dinamice pe care utilizatorii să le
folosească. Totuşi acest lucru nu înseamnă că ne debarasam de limbajul HTML, nicidecum. Cei care au
cunoştințe HTML vor înțelege şi învăța mai uşor PHP.
5.2.1 Sintaxa
La fel ca şi în limbajul HTML, atunci când deschidem un tag, el trebuie automat închis, pentru a nu
genera erori (ex. <table> şi </table>), şi în PHP, cu ajutorul tagurilor <?php şi respectiv ?> vom putea
delimita codul PHP de codul HTML. Este foarte important de ştiut, pentru lejeritate se pot folosi mai
simplu tagurile <? şi respectiv ?>, cu toate acestea metodele prin care putem delimita tagurile PHP sunt
mai multe, spre exemplu:
<script language="php">
echo "Acesta este un text";
</script>
sau
<% echo "Acesta este un text"; %> atunci când este activată opțiunea asp_tags din php.ini.
<?php
………
Este recomandată utilizarea primelor taguri descrise anterior, adică:
cod php aici
………
?>
Ca în orice limbaj de programare/scripting, în PHP există posibilitatea adăugării de comentarii sau
note în codul sursă. Acestea nu sunt luate în considerare de către compilator. Iată câteva exemple de
comentarii acceptate în PHP:
/* Comentariu in stil C */
// Comentariu in stil C++
# Comentariu in stil Bourne shell
Notă: Pentru începători nu este recomandată folosirea comentariilor de tip shell.

O declarație în PHP se încheie tot timpul cu punct şi virgulă (;).
Neterminarea unei declarații cu punct şi virgulă va duce la eroare de tip ‘parse error’. Exemplu
de cod care foloseşte un comentariu şi o declarație:
<?php
//mai jos va voi saluta echo("Salut!");
?>
Prima linie este comentariu şi este ignorată de PHP, a doua linie reprezintă o declarație care se
încheie bineînțeles cu ;.
5.2.2 Aplicații de început

Exemplul 1:
Vom testa configurația PHP cu ajutorul funcției phpinfo(), scriind următorul script într-un fişier
nou php, cu ajutorul lui PHPDesign2005:
<?php phpinfo();
?>
Se salvează codul ca info.php şi se ruleaza-l în browser. Se vor obține o mulțime de informații
despre configurația PHP, tipul serverului, etc.
funcția phpinfo() are variabilele deja declarate în motorul PHP şi de aceea nu este necesar decât
să o declarăm o singură dată.
Exemplul 2:
Scriem un exemplu PHP în stil clasic, prin care salutăm utilizatorii. Iată codul:
<?php
echo(“Salutare la toti cititorii”);
?>
Se salvează sub numele salut.php şi rulează în browser (ex. http://localhost/salut.php). Pe ecran
apare afişat textul ‘Salutare la toti cititorii’. Acest lucru a fost posibil datorita functiei echo() cu ajutorul
căreia de acum înainte vom afişa text pe ecran.
Notă: pe lângă funcția echo() mai există şi print() care poate fi folosită în acelaşi mod.
Observație: echo() nu este totuşi o funcție, ea reprezintă un constructor de limbaj dar pentru
uşurința exprimării o vom numi funcție. O dovadă bună în sensul că nu este funcție este aceea că nu
suntem nevoiți sa folosim paranteze. Sintaxa echo “Salutare la toti cititorii”; este de asemenea acceptată.
Să scriem mai multe exemple cu funcția echo(), pentru că va fi folosită foarte
des, şi să vedem ce se poate face cu ea:
<?php echo(“Salut”); echo(“Numele meu este”);
echo(“Popescu Ion”);
?>
Salvează codul de mai sus ca numelemeu.php şi rulează-l în

browser. Veți observa că în ciuda faptului că am scris textul pe
mai multe linii, el va fi afişat în browser pe o singura linie. Fapt
care evident nu ne convine, aşa ca vom apela la tagul
<br> din HTML:
<?php echo(“Salut<br>”);
echo(“Numele meu este<br>”); echo(“Popescu Ion”);

?>
Acum textul va apare pe 3 linii separate.
Pentru coderii avansați care doresc să aibă totul clar şi afişat
corect în conformitate cu toate standardele vor opta pentru următorul cod:
<?php echo(“Salut<br>\n”); echo(“Numele meu este<br>\n”); echo(“Popescu Ion”);
?>
Caracterul \n este un caracter de tip escape. Diferența se poate observa când ne uităm în codul sursă
HTML generat. \n înseamnă newline, adică indică faptul că urmează linie nouă. Totuşi acesta nu este
singurul caracter de tip escape, iată lista completă:
Tabel caractere escape
Caracter escape Descriere
\a alarma
\cx control-x (x poate fi orice caracter)
\e escape
\f formfeed
\n newline (linie noua)
\r carriage return
\t tab
\xhh caracter cu codul hexa hh
\ddd caracter cu codul octal ddd
5.3. Variabile si tipuri de date în PHP

În PHP toate variabilele încep cu semnul de dolar ($). După semnul $ se poate introduce un şir de
caractere care poate apărea în diferite combinații:
$variabila
$variabila123
$prima_variabila
$_VARIABILA
Acestor variabile le pot fi asignate orice valori, fie că este vorba de un şir de caractere, numere,
propoziții, fraze, etc.
În funcție de rolul pe care îl au într-un script, variabilele pot fi de două feluri: variabile globale
şi variabile locale (ex. cele declarate în câmpul unei funcții).
5.3.1 Lucrul cu variabile si tipuri de date

În codul de mai jos veți regăsi perfect conceptul de variabilă:
<?php
$salut=”Salutare natiune”;
echo($salut);
?>
Conținutul variabilei $salut este pasat funcție echo care va afişa conținutul acesteia, deci va
rezulta textul ’Salutare natiune’.
Următorul cod demonstrează conceptul de variabilă încapsulată. În cazul de mai jos este vorba
despre o variabilă încapsulată într-un text:
<?php
$nume = ”Popescu Ion”;
echo(”Numele meu este $nume”);
//folosim functia echo() pentru a afisa textul
?>
Rulați în browser scriptul de mai sus şi veți vedea că el afişează textul ’Numele meu este Popescu
Ion’.
Probabil v-ați dat seama până acum de ce se lucrează cu variabile. Pentru că ne fac viața de
programator mai uşoară, unei variabile îi putem asigna orice valoare, orice text oricât ar fi el de mare, şi
pe care îl putem manipula doar prin apelarea unei simple variabile asignate.
<?php
$numarul1 = 25;
$numarul2 = 20;
$numarul1 + $numarul2 = $rezultat;
echo($rezultat);
?>
În codul de mai sus am declarat două variabile $numarul1 şi $numarul2, cărora le-am dat
valorile 25, respectiv 20. Mai jos am efectuat operația simplă de adunare, al cărei rezultat este conținut
de variabila $rezultat. Pentru a afişa această valoare ne folosim de funcția echo(). Rezultatul este clar,
pe ecran va fi afişat, numărul
45 (20+25=45).
Pe lângă operația de adunare (+) se mai pot efectua opera următoarele operații matematice: (-)
scădere, (*) înmulțire, (/) împărțire, (%) modul.
Tipurile de date în PHP sunt următoarele:
• array-uri;
• numere de tip float sau double;
• integer;
• object;
• string
Aceste noțiuni ar trebui să vă fie cunoscute de la programarea în C++. În continuare vom discuta
despre tipurile string şi integer.
Un string este format dintr-o plajă de caractere. Acesta poate să fie un cuvânt, o linie, sau poate un
întreg articol. Un integer este un număr întreg care ia valori între (-32768 şi 32767).
Pentru a determina ce tip de dată este o anumită variabila, putem folosi funcția
gettype(). Iată un exemplu:
<?php
$variabila_mea=”Salut, sunt o variabila”;
$tip=gettype($variabila_mea);
echo(”Aceasta este o variabila de tip $tip”);
?>
Mai sus am creat o variabilă numită $variabila_mea căreia i-am dat valoarea
”Salut, sunt o variabila”. Apoi prin funcția gettype() am chemat această variabilă pentru a afla ce fel
de tip este ea. Mai jos am utilizat echo() pentru a afişa tipul variabilei. Pe ecran se va afişa, ’Aceasta
variabila este de tip string’.
Faceți un test si pentru $variabila_mea=6
5.3.2 Variabile dinamice

De multe ori este util să folosiți variabile dinamice. O variabilă normală se declară aşa:
$variabila = ”salutare” ;
Acum să zicem că vrem o variabilă care să aibă numele valorii lui $variabila,
deci scriem:
$$variabila = ”lume”;
Cu alte cuvinte, mai sus am creat o variabila cu numele $salutare şi i-am dat valoarea ’lume’. Ne
putem juca cu variabile dinamice la infinit, dar atunci când s-a ajuns la un nivel mare deja se
crează confuzii iar dacă cineva ar dori să citească, pentru a îmbunătăți, codul scris de tine, atunci nu ar
mai înțelege nimic.
Există o sintaxă specială care se foloseşte pentru variabilele complexe, şi anume, încadrarea între
acolade {}:
echo "Salutare ${$variabila}"; // rezulta: Salutare lume
Atunci când folosim array-uri, o sintaxă ca $$variabila[1] este incorectă pentru că PHP nu ar ştii
cărui nivel să aplice indexul, de aceea se foloseşte expresia:
{$variabila[1]} sau ${$variabila}[1].
5.4. Cod PHP în cod HTML

<html>
<head>
<title> <?php echo $titlu; ?> </title>
</head>... </html>
Codul de mai sus ilustrează foarte bine colaborarea dintre PHP şi HTML. Codul PHP poate fi
asimilat cu uşurință de tagurile HTML atât timp cât el se află între delimitările <?php respectiv ?>.
De asemenea se pot introduce mai multe declarații între tagurile html, în diferite moduri:
<html> ......... <body>
<?php
echo (”Salut”);
echo (”Ce mai faci?”);
?>
</body> ......... </html>
sau
<?php for($i=0, $i<50, $i++) { ?>

<br />
<?php } ?>
Fişierele de tip PHP pot include cod html, fie că face parte din ele, fie că este scris separat.
Priviți următorul cod:
<?php
$titlu = ”Pagina mea de web”;
include(”index.inc”);
?>
Iar codul lui index.inc este următorul:
<html><head><title><?php echo $titlu; ?></titlu></head></html>
Exemplele de mai sus sunt concludente, însă trebuie specificat că folosirea fişierelor de tip .inc nu
este recunoscuta de Apache şi nu este parsata ca php, aşa că informații senzitive se pot vedea prin
intermediul browserului, de aceea trebuie să apelam la setările httpd.conf şi să adăugăm următoarele
linii:
<Files ~ "\.inc$"> Order allow,deny Deny from all
</Files>
În acest fel am blocat accesul din exteriorul serverului la fişierele cu extensia

.inc. Aceasta este o practică foarte bună (care poate fi executată şi prin intermediul unui
1
.htaccess în caz ca nu avem acces la httpd.conf, cum se întâmplă de obicei pe serverele virtuale).
Totuşi nu este o practică bună şi nu se recomandă folosirea fişierelor cu extensii
.inc ci mai degrabă cu extensia .php. Chiar şi aşa problemele nu se termină, deoarece acestea
trebuie protejate împotriva accesului direct.
Iată ce metode de protecție se pot folosi:

• plasarea tuturor fişierelor cu informație sensibilă într-un director sau mai multe directoare
care urmează să fie protejate prin .htaccess . Aici ne referim la fişierele care nu sunt accesate direct de
user în pagină, ci la cele care se introduc de obicei cu funcțiile include(), include_once(), require(),
require_once().
• plasarea tuturor fişierelor cu informații sensibile într-un director sau directoare diferite de
cel din rădăcina web (httpdocs, www, etc), în acest fel ele nu pot fi accesate prin browser în nici un
fel. Această metodă nu este aplicabilă pentru servere virtuale sau într-un enviroment tip server de
hosting din cauza restricțiilor sau din cauză că PHP poate fi setat în safe_mode.
1 Un fişier .htaccess este un simplu fişier text ce conține comenzi, denumite directive Apache.
Aceste directive se aplică şi afectează fişierele din directorul în care se află fişierul .htaccess precum şi
subdirectoarelor acelui director.
6 Construirea unui site în PHP
6.1 Obiective
• Structura şi elemente de bază pentru construirea unui site dinamic în PHP, cu sau fără
conectare la o bază de date.
6.2 Introducere
În continuare se prezintă o modalitate de cum se poate construi un site cu ajutorul
limbajului PHP. Exemplul prezentat nu este un standard, este doar o modalitate de a vedea cum se poate
construi un site şi cum se preiau sau trimite variabilele prin intermediul site-ului. Puteți, pe baza acestui
exemplu, să vă construiți propriul site, în forma preferată de dvs. şi adaptând modelul acesta la
necesitățile voastre. În exemplul prezentat, s-a preferat existența unei singure pagini, anume index.php,
în care să fie incluse conținutul şi meniul, în funcție de ce link accesează vizitatorul.
Puteți vedea acest model într-un fel modular, fiecare script fiind de fapt un modul care
execută anumite operații specifice. Astfel, în pagina index.php se includ mai multe module
(scripturi) care luate separat, fiecare fac anumite lucruri, dar puse împreună, formează pagina de web
generată dinamic.
Partea de sus a paginii (head)
Partea cu meniul orizontal generat dinamic (partea de body)
partea în care se afişează conținutul paginilor, şi alte informații

meniul lateral
aici se pot pune alte informații generate dinamic
partea de încheiere a paginii (footer)
După cum se poate vedea mai sus, am despărțit fiecare parte a unei pagini în bucăți, fiecare bucată
este colorată diferit pentru o mai bună vizualizare. Puteți introduce în fiecare bucată câte un script php
care să genereze respectiva bucată dinamic. Astfel, în cazul unei modificări, va fi mult mai uşor să
modificați doar scriptul care se ocupă de o anumită parte a paginii, pe când dacă tot site-ul ar fi fost
făcut static în HTML, la un site cu 100÷200 de pagini chiar şi cea mai mică modificare ar fi însemnat un
chin.
Am numit fiecare script care se ocupă de o anumită parte a site-ului astfel:

• head.php - conține partea dintre tagurile HTML <head> şi </head>
• body.php - conține partea dintre tagurile HTML <body> şi conținutul paginii
• footer.php - conține partea de jos a paginii
6.3 Elementele componente

6.3.1 index
index.php - în care se setează nivelul de raportare al erorilor (dacă nu doriți ca vizitatorii să vadă
eventualele erori raportate de către php, puteți stabili nivelul 0). Apoi, se verifică dacă există fişierul
head.php şi body.php şi se încarcă sau se opreşte cu un mesaj de eroare.
Scriptul acestui fişier este:
<?php
/***************************
modulul index.php
creat de Birkoff pentru www.tutoriale.far-php.ro
Data: 16-07-2006
Versiune modul: 1.0
**************************/
// se seteaza nivelul de raportare al erorilor din php error_reporting(E_ALL);
// se include modulul de head

if (file_exists("head.php"))
{
include_once("head.php");
}
else
{
die('<br>Eroare: Nu se gaseste fisierul head.php');
}
// se include modulul de body
if (file_exists("body.php"))
{
include_once("body.php");
}
else
{
die('<br>Eroare: Nu se gaseste fisierul body.php');
}
// se inchid tagurile html
echo '</body>
</html>';
?>
6.3.2 head
head.php - în acest fişier se afişează codul html pentru începutul paginii, şi dacă
există, se încarcă şi fişierele cu cod CSS şi JavaScript folosite în pagină.
<?php
/***************************
modulul head.php
Data: 16-07-2006
Versiune modul: 1.0
**************************/
// se trimite la browser codul html
echo '<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1" />';
// se verifica ce pagina se cere si se afiseaza titlul paginii

/* scurte explicatii pentru cod
- daca este setata variabila pagina care se trimite prin intermediul
link-urilor prin GET, atunci se preia valoarea acelei variabile si se cauta daca corespunde cu una din
valorile scrise in switch, si daca corespunde afiseaza titlul corespunzator, daca nu corespunde cu nici o
valoare, atunci afiseaza valoarea default
- daca nu este setata variabila pagina (cazul cand se acceseaza prima
data pagina)atunci se seteaza valoarea titlului ca "Pagina principala"
*/
if(isset($_GET['pagina']))
{
$titlu = $_GET['pagina'];
}
else
{
$titlu = 'Pagina principala';
}
switch ($titlu)
{
case 'a':
$titlu = 'Pagina A';
break;
case 'b':
$titlu = 'Pagina B';
break;
default:
$titlu = 'Alte pagini';
}
// se trimite la browser titlul paginii

echo '<title>'.$titlu.'</title>';
//se include partea de CSS si cea de JavaScript daca exista if (file_exists("css.php"))

{
include_once("css.php");
}
if (file_exists("js.php"))
{
include_once("js.php");
}
// se inchide tagul html pentru head
echo '</head>';
?>
css.php - acest fişier conține codul CSS folosit pentru formatarea şi afişarea paginii HTML.
<?php
/***************************
modulul css.php
Data: 16-07-2006
Versiune modul: 1.0
**************************/
// se seteaza variabila care contine codul css
$valoare_css = '<style type="text/css">

</style>';
// se trimite la browser codul css echo $valoare_css;
?>
js.php - dacă se foloseşte cod JavaScript în pagini, este de preferat să se salveze codul în acest
fişier, pentru a putea avea acces rapid la el în cazul în care doriți să faceți modificări.
6.3.3 body
body.php - conține codul HTML existent între tagurile <body> şi </body> Dacă există, se încarcă
şi fişierele care conțin meniul orizontal şi/sau vertical, precum şi fişierul care afişează conținutul
paginii cerute. Pe lângă acestea, dacă doriți să băgați alte scripturi în pagini, se include şi fişierul
module.php
<?php
// se trimite la browser codul html pentru body echo '<body>

<table width="100%" border="0" cellspacing="3" cellpadding="0">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="3"
cellpadding="0">
<tr>
<td width="25%" height="60"><span class="style1">Prima
pagină + LOGO </span></td>
<td bgcolor="#996666">Aici puteţi pune un banner de
reclamă, sau o poză </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top">';
// daca exista meniu orizontal atunci se include

if (file_exists("meniu_orizontal.php"))
{
/* nu se foloseste include_once deoarece poate doriti sa mai
afisati meniul si in alt loc pe pagina*/
include("meniu_orizontal.php");
}
// se continua prelucrarea paginii

echo '
</td>
</tr>
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="3"
cellpadding="0">
<tr>
<td width="20%" valign="top">';
// daca exista meniu vertical atunci se include

if (file_exists("meniu_vertical.php"))
{
include("meniu_vertical.php");
}
echo '</td>
<td valign="top">';
// se include partea care prelucreaza continutul paginii

if (file_exists("continut.php"))
{
include("continut.php");
}
else
{
die('EROARE: Nu exista fisierul continut.php');
}
echo '</td>
<td width="20%" valign="top">';
// daca exista module aditionale se includ

if (file_exists("module.php"))
{
include_once("module.php");
}
echo '</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#9999FF">';
// daca exista footer se include
if (file_exists("footer.php"))
{
include_once("footer.php");
}
echo '</td>
</tr>
</table>';
?>
6.3.4 Meniurile orizontal şi vertical

meniu_orizontal.php - conține codul HTML pentru meniul orizontal.
<table width="100%" border="0" cellpadding="0" cellspacing="3" bgcolor="#9999FF">
<tr>
<td align="center" valign="top"><a
href="index.php">HOME</a></td>
<td align="center" valign="top"><a href="index.php?pagina=a">PAGINA A </a></td>
<td align="center" valign="top"><a href="index.php?pagina=b">PAGINA B </a></td>
<td align="center" valign="top"><a href="index.php?pagina=contact">CONTACT</a></td>
</tr>
</table>
meniu_vertical.php - conține codul HTML pentru meniul vertical

<table width="100%" border="0" cellspacing="3" cellpadding="0">
<tr>
<td align="center" valign="top">MENIU</td>
</tr>
<tr>
<td align="center" valign="top"><a
href="index.php?pagina=a">PAGINA A </a></td>
</tr>
<tr>
<td align="center" valign="top"><a href="index.php?pagina=b">PAGINA B </a></td>
</tr>
<tr>
<td align="center" valign="top"><a href="index.php?pagina=contact">CONTACT</a></td>
</tr>
<tr>
<td align="center" valign="top"><a href="index.php?pagina=blabla">Pagina inexistenta </a></td>
</tr>
<tr>
<td align="center" valign="top"><a href="index.php?pagina=">Pagina eronata </a></td>
</tr>
</table>
6.3.5 Conținut
continut.php - afişează conținutul paginilor, în funcție de linkul cerut. Dacă se cer pagini externe,
se verifică dacă acea pagină există şi se încarcă pentru afişare.
<?php
/***************************
modulul continut.php
Data: 16-07-2006
Versiune modul: 1.0
**************************/
// se verifica daca se cere o pagina
if (isset($_GET['pagina']))
{
// daca se cere o pagina se verifica daca variabila nu este goala if(!empty($_GET['pagina']))
{
$pagina = $_GET['pagina'];
}
// daca este goala se ia pagina principala else
{
$pagina = 'index';
}
}
/* daca nu se cere nici o pagina înseamnă ca trebuie afişata pagina
principala */
else
{
$pagina = 'index';
}
// in continuare se prelucreaza pagina pentru afisare

switch ($pagina)
{
case 'a':
$afisare = '<br>A fost ceruta pagina A. <br>Aceasta este
pagina A.';
break;
case 'b':
$afisare = '<br>A fost ceruta pagina B. <br>Aceasta este
pagina B.';
break;
case 'contact':
if (file_exists("contact.php"))
{
include_once("contact.php");
$afisare = '';
}
else
contact.php';
break;
{
$afisare = '<br>Eroare: Nu se gaseste fisierul
}
case 'index':
$afisare = 'Aceasta este pagina principala';
break;
default:
$afisare = '<br>Eroare: A fost ceruta pagina cu numele
<b>'.$pagina.'</b> dar nu exista pe server.';
}
// se afiseaza codul html pentru continut

echo $afisare;
?>
contact.php - poate fi o pagina externă, cu conținut HTML sau PHP, precum şi formulare de
contact.
<p>Aceasta este pagina de contact. Este o pagină; separată; şi se găseşte în fişierul
<em>contact.php</em></p>
<p>Se pot folosii fişiere separate în php pentru diferite pagini, precum şi formulare şi alte scripturi.
</p>
6.3.6 Module
module.php - este un fişier care atunci când este accesat, verifică ce fişiere există în
directorul MODULE şi le încarcă pe fiecare.
<?php
/***************************
modulul module.php
Data: 16-07-2006
Versiune modul: 1.0
**************************/
// se verifica ce module sunt in directorul de module
if (!$director = opendir("module"))
{
echo("Eroare: Nu exista directorul cu module");
}
else
{
$citire = readdir($director);
while ($citire)
{
if ($citire != '.')
{
if ($citire != '..')
{
$fisier[] = $citire;
}
}
}
closedir($director);
}
// se incarca fiecare modul existent in director
foreach ($fisier as $valoare)
{
if (file_exists("module/".$valoare))
{
include_once("module/".$valoare);
}
else
}
?>
{
echo "<br>module/".$valoare;
}
6.3.7 Footer, modulul data şi ora

data_ora.php - este un fişier extern, care afişează câteva informații despre vizitator.
<?php
/***************************
modulul data_ora.php
Data: 16-07-2006
Versiune modul: 1.0
**************************/
// se preiau data si ora serverului
$data = date("d-m-Y", time());
$ora = date("H:i:s", time());
// se preia ip-ul vizitatorului
$ip = $_SERVER['REMOTE_ADDR'];
// se preia semnatura browserului
$browser = $_SERVER['HTTP_USER_AGENT'];
$info = '<br>'.$data.'<br>Ora: '.$ora.'<br>IP: '.$ip.'<br>Semnatura browser:

<br>'.$browser;
// se afiseaza informatiile
echo '<table width="100%" border="0" cellspacing="3" cellpadding="0">
<tr>
<td align="center" valign="top"><strong>Modulul data_ora
</strong></td>
</tr>
<tr>
<td align="center" valign="top">'.$info.'</td>
</tr>
</table>';
?>
footer.php - este fişierul care afişează în josul paginii numele curent al paginii.
<?php
/***************************
modulul module.php
Data: 16-07-2006
Versiune modul: 1.0
**************************/
// se verifica ce module sunt in directorul de module
if (!$director = opendir("module"))
{
echo("Eroare: Nu exista directorul cu module");
}
else
{
while ($citire)
{
if ($citire != '.')
{
if ($citire != '..')
{
$fisier[] = $citire;
}
}
}
closedir($director);
}
// se incarca fiecare modul existent in director
foreach ($fisier as $valoare)
{
if (file_exists("module/".$valoare))
{
include_once("module/".$valoare);
}
else
}
?>
{
echo "<br>module/".$valoare;
}
6.4 Mod de lucru

În directorul C:\Program Files\EasyPHP
2.0b1\www\ se creează un subdirector, de exemplu
Lab5-nume_student, în care se crează toate fişierele
enumerate mai sus, mai puțin data_ora.php, care va
fi plasat în directorul module (aşa cum se vede în
figura de mai jos).
Rezultatul final, trebuie să arate aşa:

7 Stiluri css şi chestionar în PHP
7.1 Obiective
• Dobândirea cunoştințelor necesare utilizării stilurilor din fişiere css externe;
• Realizarea unui formular în php
7.2 Utilizarea fişierelor css externe

Stilurile definite în interiorul unui bloc <style>...</style> pot fi transferate într- un fişier extern
existând astfel posibilitatea asocierii lor mai multor fişiere HTML.
Pentru a utiliza un stil definit într-un fişier extern se procedează astfel:
1. se crează un fişier care să conțină numai descrierea stilurilor şi se salvează cu extensia ".css".
Conținutul acestui fişier coincide cu conținutul unui bloc
<style>...</style>, fără ca aceşti delimitatori să fie incluşi.
2. în fişierul HTML care utilizează stilurile definite în fişierul creat anterior, se include în
blocul <head>...</head> o etichetă <link>, având trei atribute:
• atributul "rel" cu valoarea "stylesheet";
• atributul "type" cu valoarea "text/css".
• atributul "hr e f " având ca valoare adresa URL a fişierului creat la punctul 1;
Stilurile definite din fişierul CSS extern se activează ca şi cum ar fi stiluri definite în fişierul
HTML curent într-un bloc <style>...</style>.
Modul de lucru: se creează un director nou în C:\Program Files\EasyPHP

2.0b1\www, de exemplu Ex_CSS, în care se creează două fişiere, unul index.html şi unul
stil.css.
Iată un fişier HTML cu un CSS extern:
Fişierul HTML:
<html>
<head>
<LINK REL= "stylesheet" TYPE= "text/css" HREF= "stil.css">
<title>Pagina de text stilizat</title>
</head>
<body>
<H2>Acesta este text formatat ca Header 1</H2>
<p>Acesta este un paragraf</p>
<H3>Acesta este text formatat ca Header 2, urmat de un tabel</H3>
<table width="500" border="1">

<tr>
<th align="left">Nume</th>
<th align="left">Prenume</th>
<th align="left">Telefon</th>
<th align="left">E-mail</th>
</tr>
<tr>
<td width="25%">Popescu</td>
<td width="25%">Valentin</td>
<td width="25%">4433978</td>
<td width="25%">popescu@yahoo.com</td>
</tr>
<tr>
<td width="25%">Ionescu</td>
<td width="25%">Mihai</td>
<td width="25%">5599786</td>
<td width="25%">ionescu@yahoo.com</td>
</tr>
</table>
<br>
<h3>Acesta este un text formatat ca Header 3, urmat de 2 liste:</h3>
<ol>
<li>Date personale student;</li>
<li>Calificari student;</li>
<li>Program zilnic:</li>
</ol>
<ul>
<li>Program dimineata</li>
<li>Pauza de masa</li>
<li>Program dupamiaza</li>
</ul>
<br>
urmeaza un text Header1, de marime 80:
<H1>Sfarsit</H1>
</body>
</html>
Fişierul stil.css conține:

H2,H3,h3 {
color:#483d8b;
font-family: "lucida calligraphy", "arial";
}
H1 {
color:#01faf1;
font-family: "comic sans ms", "tahoma";
font-size:80;
}
p, table, li
{
font-family: "lucida calligraphy", "arial";
margin-left: 10pt;
}
body
{
background-color:#fffaf0;
}
li,p,th,td
{
font-size: 80%;
}
table {border-style:outset}
li {list-style: square;)
7.3 Crearea chestionarelor în php
De multe ori este nevoie pe un stie de un chestionar prin care vizitatorii să poată vota sau prin care
să îşi poată exprima punctul de vedere. De aceea în continuare se prezintă un chestionar pe care cred că
şi voi vreți să îl aveți pe paginile voastre.
El este compus din 2 fişiere: chestionarul în format html şi modulul de prelucrare şi trimitere a
datelor din chestionar (un script php). Puteți să adăugați sau să ştergeți întrebări, să puneți alte butoane
(specifice html - text field, check box, radio button, etc) şi să îl modificați aşa cum doriți.
Explicații:
În modulul chestionar.php aveți grijă să introduceți datele şi check box-urile doar în form altfel pot
apărea probleme la afişarea sau trimiterea datelor. Tot în chestionar, dacă mai adăugați întrebări trebuie
să specificați numele butonului ca fiind
8-9-10 sau alt nume (vezi <input name = "1" type = "checkbox" id = "1" value="da">). În
situația de față eu le-am numerotat şi la valoarea am pus "da" (adică dacă e bifată apare ca "da"). Dacă
aveți şi un text field (cum este la <textarea name="8" id="8"> scrie aici ce vrei să găseşti sau poți să
întrebi pe forum. </textarea>) trebuie să îi puneți şi lui un nume (în cazul de față numele este "8").
După completarea şi trimiterea chestionarului către server, se accesează fişierul prelucrare_chest.php
care verifică datele introduse şi dacă sunt corecte le afişează şi le trimite pe e-mail la adresa specificată.
Puteți să introduceți datele din chestionar şi într-o bază de date sau într-un fişier text, adăugând doar
câteva linii de cod.
Mod de lucru: Fiecare student va crea un director propriu (de ex: chestionar_inițiale-student) în
C:\Program Files\EasyPHP 2.0b1\www, în care se vor scrie cele trei fişiere listate mai jos: index.php,
chestionar.php şi prelucrare_chestionar.php.
<html>
index.php
<head>
<title>Formular – Chestionar</title>
</head>
<body>
<table width="100%" border="1">
<tr>
<td width="30%" valign="top">
<?php
include ("chestionar.php");
?>
</td>
<td><div align="center"> Completați chestionarul alăturat, şi după
verificare, apăsați TRIMITE. Dacă nu sunțeți siguri, apăsați ANULARE
</div></td>
</tr>
</table>
</body>
</html>
chestionar.html
<style type="text/css">

color: #FFFFFF;
font-weight: bold;
</style>
<!-
Chestionar varianta 1
Creat la data de 08-01-2004
Copyright Alex - http://www.tutoriale.far-php.ro
->
<table width="100%" border="1" cellpadding="0" cellspacing="0"
bordercolor="#000099">
<tr>
<td valign="top" bgcolor="#9999cc"><div align="center"
class="style1 style1">Ce doriti sa gasiti<br>
in acest site? </div></td>
</tr>
<tr>
<td valign="top"><form action="prelucrare_chest.php"
method="post" name="chestionar" id="chestionar">
<input name="1" type="checkbox" id="1" value="da"> Scripturi php freeware.<br>
<input name="2" type="checkbox" id="2" value="da"> Mai multe articole despre php.<br>
<input name="3" type="checkbox" id="3" value="da"> Mai multe detalii despre comenzi.<br>
<input name="4" type="checkbox" id="4" value="da">
Mai multe despre MySQL.<br>
<input name="5" type="checkbox" id="5" value="da"> Mai multe despre baze de date.<br>
<input name="6" type="checkbox" id="6" value="da"> Mai multe despre baze de date in format
txt.<br>
<input name="7" type="checkbox" id="7" value="da"> Altceva - si anume:<br>
<textarea name="8" id="8">scrie aici ce vrei sa gasesti sau poti sa intrebi pe forum.</textarea>
<br><br>
<div align="left"><input type="reset" value="sterge"> <input type="submit" value="expedieaza">
</div>
</form></td>
</tr>
</table>
<html>
<head>
prelucrare_chestionar.php
<title>Untitled Document</title>
/* Modul Prelucrare chestionar varianta 1 Creat la data de 08-01-2004
Copyright Alex - http://www.tutoriale.far-php.ro */
</head>
<body>
<?php
// Scripturi php freeware

$a=$_POST[1];
if ($a == "") {
$a = "nu";
}
// Mai multe articole despre php
$b=$_POST[2];
if ($b == "") {
$b = "nu";
}
// Mai multe detalii despre comenzi
$c=$_POST[3];
if ($c == "") {
$c = "nu";
}
// Mai multe despre MySQL
$d=$_POST[4];
if ($d == "") {
$d = "nu";
}
// Mai multe despre baze de date
$e=$_POST[5];
if ($e == "") {
$e = "nu";
}
// Mai multe despre baze de date in format txt
$f=$_POST[6];
if ($f == "") {
$f = "nu";
}
// Altceva - si anume:
$g=$_POST[7];
if ($g == "") {
$g = "nu";
}
// comentarii
$h=$_POST[8];
// in cazul in care campul 8 este gol sau scrie mesajul pus initial atunci seteaza variabila ca "nu"
// altfel ea ramane asa cum este cu textul trimis de
utilizator
if (($h == "") or ($h == "scrie aici ce vrei sa gasesti

sau poti sa intrebi pe forum.")) {
$h = "nu";
}
// date utile
$browser = $_SERVER["HTTP_USER_AGENT"];
$timp = time ();
$ip = getenv ( "REMOTE_ADDR" );
$ip_name = gethostbyaddr ( $ip );
// diferenta de timp - in cazul in care ora de pe server nu e corect setata
$hourdiff = "0";
$timeadjust = ($hourdiff * 60 * 60);
// cu - $timeadjust daca e in scadere sau cu +
$timeadjust daca trebuie sa creasca
$servdate = date("d-m-Y - H:m:s",time() -
$timeadjust);
// echo $servdate;
$headers = "MIME-Version: 1.0\r\nContent-type:

text/html; charset=iso-8859-2\r\n";
$continut = "\n
Ip $ip a completat chestionarul.\n
voastra.
Campurile completate sunt:\n\n
$a - Scripturi php freeware.\n
$b - Mai multe articole despre php.\n
$c - Mai multe detalii despre comenzi.\n
$d - Mai multe despre MySQL.\n
$e - Mai multe despre baze de date.\n
$f - Mai multe despre baze de date in format txt.\n
$g - Altceva - si anume:\n
$h - Comentarii.\n\n
Mesajul a fost trimis la data de $servdate \n Browser: $browser , host: $ip_name , ip: $ip \n ";
// ATENTIE!!! schimbati adresa de email cu adresa
mail("antonpan2003@yahoo.com", "Mesaj de pe site",
"$continut", "$headers");
// afisare informatii
echo "<br><br>";
echo "Chestionarul completat de dvs. a fost trimis cu informatiile de mai jos:<br><br>
$a - Scripturi php freeware.<br>\n
$b - Mai multe articole despre php.<br>\n
$c - Mai multe detalii despre comenzi.<br>\n
$d - Mai multe despre MySQL.<br>\n
$e - Mai multe despre baze de date.<br>\n
$f - Mai multe despre baze de date in format
txt.<br>\n
</body>
</html
$g - Altceva - si anume:<br>\n
$h - Comentarii.<br><br>\n\n
Mesajul a fost trimis la data de $servdate <br>\n Browser: $browser , host: $ip_name , ip: $ip
<br>\n ";
echo "<br><br>";
echo "Va multumesc pentru informatii";
?>
8 Formular de prelucrare a datelor din baza de date MySQL
8.1 Obiective
• Realizarea unei baze de date MySQL;
• Realizarea unui formular în php de introducere, prelucrare şi vizualizare a datelor din baza de
date mai sus creată.
8.2 Realizarea bazei de date

Se verifică dacă aplicația EasyPHP este pornită (serverul Apache şi MySQL).
Se intră în phpMyAdmin (se deschide un browser internet şi la adresă se tastează
localhost/phpmyadmin/).
Se creează baza de date cu numele "formular" şi apoi tabela "intrari", cu 6
coloane, şi care are structura următoare:
Câmp Tip Nul Extra

ID int(11) nu auto_incremen
Nume char(60) nu
Prenume char(60) nu
Vârsta char(10) nu
e-mail char(10 nu
Observații char(25 nu
În directorul rădăcină al serverului Apache (EasyPHP), care este C:\Program Files\EasyPHP

2.0b1\www, se creează un folder cu numele formular.
Cu ajutorul aplicației PHP Designer 2005 se creează un fişier cu numele config.php care va fi salvat
în directorul mai sus creat, şi care va conține datele de configurare la baza de date:
<?php session_start(); set_time_limit(0); error_reporting(E_ALL);
// Informatii baza de date
$AdresaBazaDate = "localhost";
$UtilizatorBazaDate = "root";
$ParolaBazaDate = "";
$NumeBazaDate = "formular";
$conexiune =
mysql_connect($AdresaBazaDate,$UtilizatorBazaDate,$ParolaBazaDate)
or die("Nu ma pot conecta la MySQL!"); mysql_select_db($NumeBazaDate,$conexiune)
ordine("Nu gasesc baza de date!");
function addentities($data){
if(trim($data) != ''){
$data = htmlentities($data, ENT_QUOTES);
return str_replace('\\', '\', $data);
} else return $data;
} // End addentities() --------------
?>
În continuare, se creează fişierul index.php, în care se introduce următorul script:<?php
require_once('config.php'); if(!isset($_SESSION['nume'])) $_SESSION['nume'] = '';
if(!isset($_SESSION['prenume'])) $_SESSION['prenume'] = ''; if(!isset($_SESSION['varsta']))
$_SESSION['varsta'] = ''; if(!isset($_SESSION['e-mail'])) $_SESSION['e-mail'] = '';
if(!isset($_SESSION['observatii'])) $_SESSION['observatii'] = ''; echo '<table width="310" border="0"
cellpadding="0" cellspacing="0">
<form name="formular" action="validare.php" method="post">
<tr>
<td height="36" colspan="3" valign="top"><h2>Formular</h2>Comentariul nu trebuie sa
fie mai lung de 255 caractere.</td>
<td width="1"></td>
</tr>
<tr>
<td width="80" height="19" valign="top"> </td>
<td width="15" rowspan="10" valign="top"> </td>
<td width="214" valign="top"> </td>
<td></td>
</tr>
<tr>
<td height="22" align="right" valign="top">Nume:</td>
<td valign="top">
<input type="text" name="nume" value="'.$_SESSION['nume'].'"> </td>
<td></td>
</tr>
<tr>
<td height="7"></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="22" align="right" valign="top">Prenume:</td>
<td valign="top"><input type="text" name="prenume"
value="'.$_SESSION['prenume'].'"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td height="22" align="right" valign="top">Varsta:</td>
<td valign="top"><input type="text" size="3" maxLength="3"
name="varsta"
value="'.$_SESSION['varsta'].'"> ani</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td height="22" align="right" valign="top">Email:</td>
<td valign="top"><input type="text" name="e-mail" value="'.$_SESSION['e-mail'].'"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td height="19" align="right" valign="top">Observatii:</td>
<td rowspan="2" valign="top"><textarea name="observatii" cols="30"
rows="5" value="'.$_SESSION['observatii'].'">'.$_SESSION['observatii'].'</texta rea></td>
<td></td>
</tr>
<tr>
<td colspan="2" rowspan="3"
valign="top"> </td>
</tr>
<tr>
<td height="17" valign="top">
</td>
<td></td>
</tr>
<tr>
<td height="24"
valign="top"><input name="Trimite"
type="submit"
id="Trimite"
value="Trimite">
<input name="Reseteaza" type="reset"
id="Reseteaza" value="Reseteaza"> </td>
<td></td>
</tr>
</form>
</table>';
?>
Interpretarea codului php:

if(!isset($_SESSION['nume'])) $_SESSION['nume'] = '';
- dacă nu este setată sesiunea nume, o setăm ca fiind goală.
Această operație se face pentru a evita afişarea unei erori php care ne va spune cum că sesiunea
nume nu există, ceea ce este adevărat.
Analizând HTML-ul observăm câmpurile cărora le-am atribuit numele
corespunzătoare, şi anume:
…
<td
height="22" align="right" valign="top">Nume:</td>
<td valign="top">
<input type="text" name="nume"
</td>
…
value="">
Acum că am realizat formularul, trebuie să îi prelucrăm datele prin $_POST şi să verificăm
conținutul acestora, apoi să îl introducem în baza de date.
Se realizează un fişier cu numele validare.php şi introducem codul de mai jos, apoi testăm în
browser, se introduc date în formular şi se apasă butonul “Trimite”.
<?php
require_once('config.php');
$_SESSION['nume'] = $_POST['nume'];
$_SESSION['prenume'] = $_POST['prenume'];
$_SESSION['varsta'] = $_POST['varsta'];
$_SESSION['e-mail'] = $_POST['e-mail'];
$_SESSION['observatii'] = $_POST['observatii'];
echo 'Nume: '.$_SESSION['nume'].'<br> Prenume: '.$_SESSION['prenume'].'<br> Varsta:
'.$_SESSION['varsta'].'<br> Email: '.$_SESSION['e-mail'].'<br>
Comentariu: '.$_SESSION['observatii'].'<br><br>
Daca datele sunt corecte, apasati <a href="prelucrare.php">aici</a>
pentru a le valida
<br> si a le introduce in baza de date.';
?>
Ca noutate, observați că s-a folosit $_SESSION. Scopul unei sesiuni este de a reține o informație
care să se mențină de la o pagină la alta.
Pentru a seta o sesiune şi a o menține de la o pagină la alta, este nevoie de a o declara cu ajutorul
unei funcții, şi anume: session_start(); Această funcție se pune la început de PAGINA, prima linie din
script.
Pentru a distruge sesiunile, ne putem folosi de o funcție care va şterge toate sesiunile existente, şi
anume session_destory(); sau de declararea sesiunilor ca fiind nule: $_SESSION[‘nume_sesiune’] =
‘’;
Întorcându-ne la formularul nostru de înregistrare, ați văzut că valoarea câmpurilor este o sesiune.
Vom seta câte o sesiune pentru fiecare câmp, astfel încât să păstrăm datele scrise de el, iar dacă
utilizatorul completează greşit câmpurile şi este redirecționat la pagina cu formularul, datele introduse
de el vor apărea din nou în formular, astfel încât el va putea să corecteze doar câmpurile în care a greşit.
După ce am realizat cele două fişiere, realizați încă unul cu numele

prelucrare.php, introduceți codul de mai jos şi testați din nou în browser.
<?php require_once('config.php');
if(($_SESSION['nume'] == "") || ($_SESSION['prenume'] == "") || ($_SESSION['varsta'] ==
"") || (!is_numeric($_SESSION['varsta'])) || ($_SESSION['e-mail'] == "") ||
($_SESSION['observatii'] == "") || (strlen($_SESSION[' observatii ']) >
255) )
{
echo 'Nu ai introdus date in formular sau cele introduse nu sunt corecte. <br>
Apasa <a href="index.php">aici</a> pentru a te intoarce la pagina anterioara.';
} else {
echo 'Va multumim. <br>
Datele au fost introduse cu succes in baza de date. <br>
Pentru vizualizare apasati <a href="vizualizare.php">aici</a>.';
$cerereSQL = "INSERT INTO ìntrari` (`nume`, `prenume`, `varsta`, è-
mail`,òbservatii`)
VALUES ('".$_SESSION['nume']."', '".$_SESSION['prenume']."',
'".$_SESSION['varsta']."', '".$_SESSION['e-mail']."',
'".$_SESSION['observatii']."');";
mysql_query($cerereSQL);
$_SESSION['nume'] = '';
$_SESSION['prenume'] = '';
$_SESSION['varsta'] = '';
$_SESSION['e-mail'] = '';
$_SESSION['observatii'] = '';
}
?>
După ce ați testat în browser şi ați trecut toți paşii din formular, accesați phpMyAdmin şi vizualizați
datele introduse în baza de date.
Explicații din scriptul prelucrare.php:

• Prima linie, require_once('config.php'); include fişierul config.php în care sunt variabilele
cu datele de conectare la baza de date.
În continuare avem condițiile if şi else.
• În condiția if, verificăm dacă s-au introdus date în formular, dacă valoarea câmpului vârsta
este numerică, dacă valoarea câmpului comentariu este mai mare de 255 caractere.
o Construcția if este deschisă şi închisa de parantezele rotunde ( ), iar în interiorul acestora sunt
conditiile:
($_SESSION['nume'] == "") = Dacă valoarea câmpului nume este goală…
...
(!is_numeric($_SESSION['varsta'])) = Dacă valoarea câmpului vârsta nu este numerică...
(!is_numeric).
...
(strlen($_SESSION['comentariu']) > 255) = Dacă valoarea câmpului comentariu este mai mare
de 255 caractere… (strlen = numar de caractere în sir-ul dat).
Semunul || înseamnă OR (sau logic)
• În condiția else, afişă textul, cum că datele au fost introduse în baza de date, şi efectuăm
inserarea.
În continuare se va realiza un script prin care afişăm în browser datele introduse în baza de date.
Astfel, se realizează un fişier vizualizare.php în care se introduce scriptul de mai jos:
<?php
$cerereSQL = 'SELECT * FROM intrari';
$rezultat = mysql_query($cerereSQL); while($rand = mysql_fetch_array($rezultat)) { echo
'<b>Nume:</b> '.$rand['nume'].' <br>
<b>Prenume:</b> '.$rand['prenume'].'
<br>
<b>Varsta:</b> '.$rand['varsta'].' ani
<br>
<b>Email:</b> '.$rand['e-mail'].' <br>
<b>Observatii:</b> '.$rand['observatii'].'
<br><br>';
}
?>
Acest fişier va fi accesat astfel:
http://localhost/formular/vizualizare.php
Se vor introduce mai multe înregistrări
în baza de date, apelând de fiecare dată
http://localhost/formular/index.php, şi
apoi se accesează http://localhost/formular/vizualizare.php pentru a vedea rezultatele
8.3 Fisă de lucru

Să se creeze o bază de date ce conține următoarele câmpuri: nume (tipul text), vârsta (tipul
text), oraş (tipul text), ocupație (tipul text), codul numeric personal (tipul text).
Cerințe:
Realizați baza de date, verificați câmpurile (să fie obligatorii, câmpurile nume şi oraş trebuie să
conțina numai litere, câmpul cod numeric personal să conțină numai cifre şi să nu poată fie introduse
mai mult de 13 caractere), introduceți în baza de date informațiile prelucrate prin formular şi afişați-le in
ordinea:
nume | oraş | ocupație | vârsta | cod numeric personal.
9 Sistem de înregistrare, autentificare şi protecție
9.1 Obiective
• Realizarea unei baze de date MySQL, care se va numi autentificare;
• Realizarea unui formular în php de înregistrare şi introducere a datelor în baza de date ,
după validarea acestora;
• Realizarea unei pagini de autentificare;
• Restricționarea unei pagini pentru utilizatorii neautentificați;
• Realizarea unui panou de control în care utilizatorii înregistrați să-şi poată schimba datele
personale şi parola.
9.2 Realizarea bazei de date

Se verifică dacă aplicația EasyPHP este pornită (serverul Apache şi MySQL).
Se intră în phpMyAdmin (se deschide un browser internet şi la adresă se tastează
localhost/phpmyadmin/).
Se creează baza de date cu numele "autentificare" şi apoi tabela "utilizatori",
cu 7 coloane, şi care are structura următoare:
Câmp Tip Nul Extra Cerințe
ID int(11) nu auto_incremen
utilizator char(60) nu
parola char(60) nu parola1 =
nume char(30) nu Numai litere
prenume char(30) nu Numai litere
varsta char(3) nu Numai cifre
localitate char(30)
În directorul rădăcină al serverului Apache (EasyPHP), care este C:\Program
Files\EasyPHP 2.0b1\www, se creează un folder cu numele autentificare.
În acest director vor trebui create 7 scripturi php, şi anume:
• config.php – aici se găsesc datele de autentificare la baza de date – este identic cu cel de la
laboratorul 7, dar trebuie modificate datele de identificare ale bazei de date – numele acesteie.
• index.php – pagina principală cu legături către scripturile de înregistrare şi autentificare
useri.
• inregistrare.php – script pentru înregistrare de noi utilizatori.
• autentificare.php – script pentru autentificare utilizatori.
• pagina.php – pagina accesibilă numai utilizatorilor autentificați.
• profil.php – pagina pentru modificare date personale.
• iesire.php – pagina pentru ieşire din sistem.
9.3 Scriptul de înregistrare

După ce s-au modificat datele din config.php,
se creează fişierul inregistrare.php care va conține
următorul script:
<?php
if(!isset($_GET['actiune']))
$_GET['actiune'] = '';
if(!isset($_SESSION['user']))
$_SESSION['user'] = '';
if(!isset($_SESSION['parola1'])) $_SESSION['parola1'] = '';
if(!isset($_SESSION['parola2'])) $_SESSION['parola2'] = ''; if(!isset($_SESSION['nume']))
$_SESSION['nume'] = ''; if(!isset($_SESSION['prenume'])) $_SESSION['prenume'] = '';
if(!isset($_SESSION['varsta'])) $_SESSION['varsta'] = ''; if(!isset($_SESSION['localitate']))
$_SESSION['localitate'] = '';
switch($_GET['actiune'])
{
case '':
echo '<table width="309" border="0" cellpadding="0" cellspacing="0">
<form name="formular" action="inregistrare.php?actiune=validare" method="post">
<tr>
<td height="36" colspan="4" valign="top"><h1>Formular inregistrare
</h1></td>
</tr>
<tr>
<td width="15" rowspan="5" valign="top"></td>
</tr>
<tr>
<td height="22" align="right" valign="top">Utilizator:</td>
<td colspan="2" valign="top">
<input type="text" name="user" value="'.$_SESSION['user'].'">
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td height="22" align="right" valign="top">Parola:</td>
<td colspan="2" valign="top"><input type="password" name="parola1"
value="'.$_SESSION['parola1'].'"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td height="38" align="right" valign="top">Reintroduceti<br> Parola:</td>
<td> </td>
<td align="middle" valign="middle"><input type="password" name="parola2"
value="'.$_SESSION['parola2'].'"></td>
<td> </td>
</tr>
<tr>
<td valign="top"></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="19" align="right">Nume:</td>
<td> </td>
<td colspan="2" valign="top"><input type="text" name="nume"
value="'.$_SESSION['nume'].'"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td height="22" align="right">Prenume:</td>
<td colspan="2" valign="top"><input type="text" name="prenume"
value="'.$_SESSION['prenume'].'"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2" valign="top"><input type="text" size="3" maxLength="3" name="varsta"
value="'.$_SESSION['varsta'].'">
ani</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td height="22" align="right" valign="top">Localitate:</td>
<td colspan="2" valign="top"><input type="text" name="localitate"
value="'.$_SESSION['localitate'].'"></td>
</tr>
<tr>
<td height="19"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" valign="top"><input name="Trimite" type="submit" id="Trimite"
value="Trimite">
<input name="Reseteaza" type="reset" id="Reseteaza" value="Reseteaza"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</form>
</table>';
break;
case 'validare':
$_SESSION['user'] = $_POST['user'];
$_SESSION['parola1'] = $_POST['parola1'];
$_SESSION['parola2'] = $_POST['parola2'];
$_SESSION['nume'] = $_POST['nume'];
$_SESSION['prenume'] = $_POST['prenume'];
$_SESSION['varsta'] = $_POST['varsta'];
$_SESSION['localitate'] = $_POST['localitate'];
if(($_SESSION['user'] == '') || ($_SESSION['parola1'] == '') || ($_SESSION['parola2'] !=

$_SESSION['parola1']) || ($_SESSION['nume']
== '') || ($_SESSION['prenume'] == '') || ($_SESSION['varsta'] == '')
|| (!is_numeric($_SESSION['varsta'])) || (strlen($_SESSION['varsta'])
< 2) || ($_SESSION['localitate'] == ''))
{
echo 'Nu ai introdus date in formular sau cele introduse nu sunt corecte. <br>
Apasa <a href="inregistrare.php">aici</a> pentru a te intoarce la pagina anterioara.';
}
else
{
echo 'Va multumim. <br>
Datele au fost introduse cu succes in baza de date. <br> Pentru a va autentifica apasati <a
href="autentificare.php">aici</a>.';
$cerereSQL = "INSERT INTO ùtilizatori` (ùtilizator`, `parola`,

`nume`, `prenume`, `varsta`, `localitate`)
VALUES ('".addentities($_SESSION['user'])."',
'".md5($_SESSION['parola1'])."', '".addentities($_SESSION['nume'])."',
'".addentities($_SESSION['prenume'])."',
'".addentities($_SESSION['varsta'])."',
'".addentities($_SESSION['localitate'])."')";
$_SESSION['user'] = '';
$_SESSION['parola1'] = '';
}
break;
}
?>
9.3.1 Explicarea scriptului

inregistrare.php
Ca o a II-a linie din script, observăm linia if(!isset($_GET['actiune']))
$_GET['actiune'] = ''; Această linie, dacă nu găseşte $_GET[‘actiune’] ca fiind setată, o va seta.
La fel şi restul:
if(!isset($_SESSION['user'])) $_SESSION['user'] = ''; if(!isset($_SESSION['parola1']))
$_SESSION['parola1'] = ''; if(!isset($_SESSION['parola2'])) $_SESSION['parola2'] = '';
if(!isset($_SESSION['nume'])) $_SESSION['nume'] = ''; if(!isset($_SESSION['prenume']))
$_SESSION['prenume'] = ''; if(!isset($_SESSION['varsta'])) $_SESSION['varsta'] = '';
if(!isset($_SESSION['localitate'])) $_SESSION['localitate'] = '';
Observăm construcția if, care are ca şi condiție negativă (!) o funcție isset (se foloseşte numai
pentru a verifica dacă o variabilă există, returnează adevărat atunci când o găseşte şi fals atunci când nu
o găseşte). Prin urmare, cu această construcție if.. verificăm dacă $_GET[‘actiune’] este setat, dacă nu, o
setăm noi.
În continuare, uitându-ne peste script, observăm construcția switch. Am folosit aceasta pentru a
implementa mai multe acțiuni într-o singură pagină.
După cum vedem, primul case este null, ceea ce înseamnă că se execută scriptul pentru pagina
curenta .php.
Avem un formular în care sunt 7 câmpuri: utilizator, parola, reintroducerea parolei, nume, prenume,
vârsta şi localitate.
Daca va uitați atenți, o să observați că în valoarea câmpurilor avem declarate nişte sesiuni:
<input type="text" name="user" value="'.$_SESSION['user'].'">
Sesiunile au fost explicate în laboratorul anterior.
Vom seta câte o sesiune pentru fiecare câmp, astfel încât să păstrăm datele scrise de el, iar dacă
utilizatorul completează greşit câmpurile şi este redirecționat la pagina cu formularul, datele introduse
de el vor apărea din nou în formular, astfel încât el va putea să corecteze doar câmpurile în care a greşit.
Ca acțiune a formularului este setat inregistrare.php?actiune=validare
Acest case îl găsiți la linia 119.
După cum vedeți, avem declarate sesiunile de care ne vom folosi în valoarea câmpurilor din
formular, şi anume:
Valoarea acestei sesiuni user, este valoarea POST cu numele user, şi tot aşa.
În următoarele linii de cod avem structura if şi else cu condițiile necesare, iar dacă condițiile nu
sunt adevărate, ne rezultă eroarea, dacă sunt acceptate, rezultă mesajul de mulțumire şi inserarea în
baza de date, apoi setarea sesiunilor folosite ca fiind nule.
După acest case cu numele 'validare', vom închide structura switch, respectiv scriptul php.
Observăm ca la introducerea în baza de date am complicat procedeul. Motivul este pentru a ne
proteja de procedeul numit SQL INJECTION.
Aceasta operațiune se foloseşte pentru a introduce vulnerabilități în comanda care trimite
datele la baza de date (comanda query) şi cu ajutorul acestora, se poate păcăli cu uşurință baza de
date.
Pentru a proteja datele care se introduc prin formular, ne-am folosit de o funcție,
şi anume: addentities();
9.3.2 Exemplu de script de atac

SELECT * FROM `tabela` WHERE camp = 'orice' OR 'x'='x';
Observați că utilizatorul poate păcăli comanda SQL, introducând ca VALOARE a câmpului: orice'
OR 'x'='x, astfel încât comanda SQL se va “modifica”. Funcția addlentities(); va transforma
caracterele speciale din html în coduri.
Exemplu: din codul html <html> ne va rezulta <html> sau dacă
utilizatorul introduce ‘ sau “ în câmpul innput, acestea se vor transforma în: ' sau
" . . .
Protecția cu această funcție se face pentru ca atunci când citim din baza de date un cod html, să nu
fie interpretat de către browser ci, doar să fie afişat.
Aplicație experimentală:
Puneți intr-un fişier test.php codul: echo"<html>" şi apoi puneți şi
echo"<html&gt"; testați şi observaşi rezultatul.
Următoarea noutate din comanda noastră SQL este funcția md5();

Aceasta funcție am folosit-o pentru a coda parola noastră şi astfel a o introduce în baza de date,
neputând fi decodată de către nimeni.
md5 este o funcție PHP care codează o parolă în mod teoretic ireversibil:
<?php
$parola = 'parola';
echo md5($parola);
?>
Puneți acest cod într-un fişier md5.php apoi testați şi veți observa următorul rezultat:
8287458823facb8ff918dbfabcd22ccb
9.3.3 Funcții în PHP
O funcție este folosită pentru a separa codul care realizează un singur task bine definit. Acest lucru
face codul mai lizibil şi ne permite să îl reutilizăm de fiecare dată când trebuie să efectuăm acelaşi task.
Argumentele unei funcții trebuie separate prin virgulă, şi, implicit, acestea sunt transmise prin
valoare. Pentru ca funcția să returneze un rezultat se foloseşte construcția return care primeşte ca
parametru o expresie care reprezintă valoarea funcției. În momentul în care este întâlnită construcția
return, execuția funcției se încheie.
În PHP sunt foarte multe funcții predefinite, însă puteți să vă concepeți şi propriile funcții.
Apelul unei funcții se face: nume_functie();
Majoritatea funcțiilor necesită unul sau mai mulți parametrii – informații oferite funcției atunci când
este apelată şi care influențează rezultatul execuției funcției –
Apelul unei funcții cu parametru se realizează astfel:
nume_functie($parametru);
Dacă încercați să apelați o funcție care nu există, veți primi un mesaj de eroare.
9.3.4 Exemple de creare funcții:

<?php
function functie_nume($nume) {
$prenume = 'Vasile';
return $nume.' '.$prenume;
}
echo functie_nume('Popescu');
?>
număr.
<?php
În exemplul următor se calculează cu ajutorul unei funcții PHP, pătratul unui
function patrat($n) {
return $n * $n;
}
echo '4^2 = <b> '.patrat(4).' </b>';
?>
Observați că am atribuit valoarea 4 funcției noastre cu numele patrat, iar rezultatul apelării acesteia
este calculul din interiorul funcției: return $n * $n; adică returnează 4 x 4, care ne dă 16.
9.4 Scriptul de autentificare
La fel ca si la scriptul de înregistrare, observăm setarea $_GET[‘actiune’] ca fiind nulă, apoi
deschiderea structurii switch.
În case null avem formularul de autentificare ce cuprinde 2 câmpuri: utilizator și
parolă.
În case validare, avem sesiunea user cu valoarea postului user urmată de construcția if şi else cu
condițiile aferente.
Fişierul autentificare.php conține:
<?php
if(!isset($_GET['actiune'])) $_GET['actiune'] = '';
{
case '':
echo '<form action="autentificare.php?actiune=validare" method="post"> Utilizator: <input
type="text" name="user" value=""><br>
Parola: <input type="password" name="parola" value=""><br>
<input type="submit" name="Login" value="Login">
</form>';
break;
case 'validare':
if(($_POST['user'] == '') || ($_POST['parola'] == ''))

{
echo 'Completeaza casutele. <Br>
Apasati <a href="autentificare.php">aici</a> pentru a va intoarce la pagina precedenta.';
}
else
{
$cerereSQL = "SELECT * FROM ùtilizatori` WHERE utilizator='".htmlentities($_POST['user'])."'
AND parola='".md5($_POST['parola'])."'";
$rezultat = mysql_query($cerereSQL);
if(mysql_num_rows($rezultat) == 1)
{
while($rand = mysql_fetch_array($rezultat))
{
$_SESSION['logat'] = 'Da';
echo '<META HTTP-EQUIV=Refresh CONTENT="0; URL=pagina.php">';
}
}
else
{
echo 'Date incorecte. <Br>
Apasati <a href="autentificare.php">aici</a> pentru a va intoarce la pagina precedenta.';
}
}
break;
}
?>
În aceasta construcție else, avem selectarea din baza de date unde câmpul utilizator este egal cu
POST user, iar parola este egală cu criptarea parolei pentru POST parola.
Dacă numărul de rânduri rezultate este 1, atunci setăm o sesiune cu numele logat şi valoarea Da,
apoi redirecționăm - cu ajutorul etichetei HTML meta refresh – către pagina utilizatorului.
Dacă numărul de rânduri rezultate nu este 1, atunci afişăm un mesaj de eroare.
În cazul în care rezultatele au fost găsite în baza de date, autentificarea s-a efectuat cu succes şi vom
fi redirecționați în pagina.php
9.5 Scriptul pagina utilizator – pagina.php
<?php
if(!isset($_SESSION['logat'])) $_SESSION['logat'] = 'Nu';

if($_SESSION['logat'] != 'Da')
{
echo 'Pentru a accesa aceasta pagina, trebuie sa va autentificati.
<br>
Pentru a va autentifica, apasati <a href = "autentificare.php">
aici</a><br>
Pentru a va inregistra, apasati <a href = "inregistrare.php">
aici</a>';
}
else
{
echo 'Bine ai venit, <b><i>'.$_SESSION['user'].'</b></i>!<br><br>
<a href="profil.php">Schimba date personale</a><br><br>
<a href="iesire.php">Iesire</a>';
}
?>
Observam ca avem o construcție if şi else.

Dacă sesiunea cu numele logat nu are valoarea Da executăm o buclă de cod, dacă sesiunea
logat are valoarea Da, executăm pagina pentru utilizator.
Să ne reamintim că această sesiune $_SESSION[‘logat’] == ‘Da’; a fost setată
atunci când autentificarea s-a realizat cu succes.
Accesați
http://localhost/autentificare/pagina.php, fără să vă
autentificați, şi veți observa mesajul de eroare, apoi
autentificați-vă şi veți observa pagina utilizatorului.
Din această pagină, vă puteți schimba datele
personale precum şi parola, iar apoi puteți să ieşiți
din sistem folosind linkul “ieşire”.
9.6 Scriptul profil.php

<?php
if(!isset($_GET['actiune'])) $_GET['actiune'] = '';

if(!isset($_SESSION['logat'])) $_SESSION['logat'] = 'Nu';
if($_SESSION['logat'] != 'Da')
{
echo 'Pentru a accesa aceasta pagina, trebuie sa va autentificati.
<br>
Pentru a va autentifica, apasati <a href="autentificare.php">
aici</a><br>
Pentru a va inregistra, apasati <a href="inregistrare.php">
aici</a>';
}
else
{
{
case '':
echo '<h1>Profilul dumneavoastra</h1>
Apasati <a href="profil.php?actiune=date_personale">aici</a>
pentru a schimba datele personale.<br>
Apasati <a href="profil.php?actiune=parola">aici</a> pentru a schimba parola
dumneavoastra.<br><br>
<a href="pagina.php">Intoarceti`va la pagina
principala.</a>';
break;
case 'date_personale':
$cerereSQL = 'SELECT * FROM ùtilizatori` WHERE
utilizator="'.$_SESSION['u ser'].'"';
$rezultat =
while($rand =
mysql_fetch_array($rezulta t))
{
echo '<table width="347"
border="0" cellpadding="0" cellspacing="0">
<form name="formular" action="profil.php?actiune=validare" method="post">
<tr>
<td height="50" colspan="4" valign="top"><h1>Modifica date
personale</h1></td>
</tr>
<tr>
<td width="80" height="19"> </td>
<td width="15"> </td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td height="22" align="right" valign="top">Nume:</td>
<td valign="top"><input type="text" name="nume" value="'.$rand['nume'].'"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td height="22" align="right" valign="top">Prenume:</td>
<td valign="top"><input type="text" name="prenume" value="'.$rand['prenume'].'"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td valign="top"><input type="text" size="3" maxLength="3"
name="varsta" value="'.$rand['varsta'].'">
ani</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td height="22" align="right" valign="top">Localitate:</td>
<td valign="top"><input type="text" name="localitate" value="'.$rand['localitate'].'"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td valign="top"><input name="Trimite" type="submit" id="Trimite" value="Modifica date">
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
</tr>
</form>
</table>';
}
break;
case 'parola':
echo '<table width="309" border="0" cellpadding="0" cellspacing="0">

<form name="formular" action="profil.php?actiune=validare" method="post">
<tr>
<td height="36" colspan="4" valign="top"><h1>Modifica parola</h1></td>
</tr>
<tr>
<td width="15" rowspan="5" valign="top"></td>
</tr>
<tr>
<td height="22" align="right" valign="top">Parola:</td>
<td colspan="2" valign="top">
<input type="password" name="parola1" value=""> </td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td height="22" align="right" valign="top">Reintroduceti parola:</td>
<td colspan="2" valign="middle"><input type="password" name="parola2" value=""></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2" valign="top"><input name="Trimite" type="submit"
id="Trimite" value="Modifica parola">
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</form>
</table>';
break;
case 'validare':
if(!isset($_POST['parola1'])) $_SESSION['parola1'] = '';
else $_SESSION['parola1'] = $_POST['parola1'];
if(!isset($_POST['parola2'])) $_SESSION['parola2'] = '';

else $_SESSION['parola2'] = $_POST['parola2'];
if(!isset($_POST['nume'])) $_SESSION['nume'] = '';
else $_SESSION['nume'] = $_POST['nume'];
if(!isset($_POST['prenume'])) $_SESSION['prenume'] = '';

else $_SESSION['prenume'] = $_POST['prenume'];
if(!isset($_POST['varsta'])) $_SESSION['varsta'] = '';

else $_SESSION['varsta'] = $_POST['varsta'];
if(!isset($_POST['localitate'])) $_SESSION['localitate'] = '';

else $_SESSION['localitate'] = $_POST['localitate'];
if(($_POST['Trimite'] == 'Modifica date') && ($_SESSION['nume'] == ''

|| $_SESSION['prenume'] == '' || $_SESSION['varsta'] == '' ||
!is_numeric($_SESSION['varsta']) || strlen($_SESSION['varsta'] < 2) ||
$_SESSION['localitate'] == ''))
{
echo 'Completeaza campurile.<br>
Apasa <a href="profil.php?actiune=date_personale">aici</a>
pentru a te intoarce.';
}
elseif(($_POST['Trimite'] == 'Modifica date') && ($_SESSION['nume'] !=
'' || $_SESSION['prenume'] != '' || $_SESSION['varsta'] != '' ||
is_numeric($_SESSION['varsta']) || strlen($_SESSION['varsta'] >= 2) ||
$_SESSION['localitate'] != ''))
{
echo 'Datele au fost modificate. <br>
Apasa <a href="pagina.php">aici</a> pentru a te intoarce la pagina principala.';
$cerereSQL = "UPDATE ùtilizatori` SET nume='".addentities($_SESSION['nume'])."',
prenume='".addentities($_SESSION['prenume'])."', varsta='".addentities($_SESSION['varsta'])."',
localitate='".addentities($_SESSION['localitate'])."' WHERE utilizator='".$_SESSION['user']."'";
}
elseif(($_POST['Trimite'] == 'Modifica parola') && ($_SESSION['parola1'] == '' ||
$_SESSION['parola1'] !=
$_SESSION['parola2']))
{
echo 'Completeaza campurile.<br>
Apasa <a href="profil.php?actiune=parola">aici</a> pentru a te intoarce.';
}
elseif(($_POST['Trimite'] == 'Modifica parola') && ($_SESSION['parola1'] != '' ||
$_SESSION['parola1'] ==
$_SESSION['parola2']))
{
echo 'Parola a fost modificata. <br>
Apasa <a href="pagina.php">aici</a> pentru a te intoarce la pagina principala.';
$cerereSQL = "UPDATE ùtilizatori` SET parola='".md5($_SESSION['parola1'])."' WHERE
utilizator='".$_SESSION['user']."'"; mysql_query($cerereSQL);
}
break;
}
}
?>
case.
Şi în acest script, la fel ca şi în celelalte, ne-am folosit de construcția switch şi
În case null, avem legăturile către următoarele case unde vom avea formularele de prelucrare a
datelor existente utilizatorului autentificat.
În case ‘date_personale’: selectăm tot din baza de date unde utilizator este egal cu utilizatorul
autentificat. Dacă conexiunea returnează rezultate, executăm formularul de prelucrare a datelor, iar în
câmpul value al fiecărui input vom seta ca valoare câmpul din baza de date aferent acelui input.
Exemplu:
<input type="text" name="nume" value="'.$rand['nume'].'">
Observați că acest case, precum şi cel de modificare parolă, se foloseşte de aceeaşi acțiune,
respectiv: profil.php?actiune=validare
Da, este posibil deoarece am setat 2 valori diferite pentru cele 2 formulare:
• pentru formularul cu date am setat ca valoare: “Modifica date” iar pentru cel cu parola am
setat “Modifica parola”, apoi, în funcție de ce buton era apăsat, am realizat condițiile if.
9.7 Scriptul iesire.php

Acest script conține funcțiile ce golesc şi distrug sesiunile.
<?php session_start(); session_destroy(); session_unset();

echo 'Ati iesit din sistem. <br>
Pentru a va intoarce la pagina principala, apasati
<a href="index.php">aici</a>';
?>
10 Realizarea unui formular de contact
10.1 Obiective
• Realizarea unei pagini php care să conțină un formular de contact pentru trimis date prin e-
mail;
• Realizarea unei pagini php de prelucrare şi trimitere a mesajului.
Formularul trebuie să aibă cinci câmpuri (care sunt obligatorii), şi anume:

• e-mail;
• nume – doar litere;
• prenume – doar litere;
• subiect;
• mesaj.
10.2 Mod de lucru:

În directorul www al serverului Apache se creează directorul contact în care se salvează fişierul
index.php creat cu PHPDesing2005, şi care va conține următorul script:
<html>
<head>
<title>Formular de contact</title>
</head>
<body>
<form action="trimite.php" method="post">
E-Mail: <input type="text" name="email" value=""> <br> Nume: <input type="text" name="nume"
value=""> <br> Prenume: <input type="text" name="prenume" value=""> <br> Subiect: <input
type="text" name="subiect" value=""> <br>
Mesaj: <textarea name="mesaj" cols="60" rows="6"></textarea>
<br><br>
<input type="submit" name="Trimite" value="Trimite">
<input type="reset" name="Reseteaza" value="Reseteaza">
</form>
</body>
</html>
Se salvează şi se vizualizează în browser accesand http://localhost/contact/index.php.
<?php
Se crează un fişier numele trimite.php în care se introduce codul de mai jos:
if(($_POST['email'] == '') || ($_POST['nume'] == '') || (is_numeric($_POST['nume'])) ||
($_POST['prenume'] == '') || (is_numeric($_POST['prenume'])) || ($_POST['subiect'] == '')
|| ($_POST['mesaj'] == ''))
{
echo 'Completati campurile corect <br>
Apasati <a href="index.php">aici</a> pentru a va intoarce la
pagina principala.';
}
else
{
$catre = 'adresaemail@yahoo.com';
$data_trimitere = date('d-m-Y H:i:s');
$subiect = $_POST['subiect'];
$mesaj = '
<html>
<head>
<title>Formular de Contact</title>
</head>
<body>
<p><tt>Data trimitere: '.$data_trimitere.' </tt></p>
<table>
<tr>
<td><tt> Nume: '.$_POST['nume'].' </tt></td>
</tr>
<tr>
<td><tt> Prenume: '.$_POST['prenume'].' </tt></td>
</tr>
<tr>
<td><tt> E-Mail: <a href="mailto:'.$_POST['email'].'"> '.$_POST ['email'].'</a> </tt></td>
</tr>
<tr>
<td><tt> Mesaj: <br><br> '.$_POST['mesaj'].' </tt></td>
</tr>
</table>
</body>
</html>';
$headere = "MIME-Version: 1.0\r\n";
$headere .= "Content-type: text/html; charset=iso-88591\r\n"; headere .= "From:
".$_POST['nume']." ".$_POST['prenume']."<".$_POST['email'].">\r\n";
mail($catre, $subiect, $mesaj, $headere);
echo 'Mesajul a fost trimis';
}
?>
Modificați adresa de email din variabila $catre ='adresaemail@yahoo.com';
cu email-ul dvs.
Pentru a face acest script să trimita mail, este aveti nevoie de un server SMTP, un server de E-
Mail.
Vă recomand serverul QK care poate fi descărcat de la adresa http://www.qksoft.com/ După ce ați
instalat serverul şi l-ati pornit, ar trebui să vă apară în bara de start de lânga ceas.
Testați scriptul şi verificați email-ul dvs pentru a vedea dacă ați primit mesajul. (În caz că nu apare
în Inbox, uitați-vă în Bulk).
Observați că în scriptul trimite.php ne-am folosit de condițiile if şi else (condiții pe care deja le
ştiam) însă am folosit şi 2 noi functii, şi anume:
date(); şi mail();
10.2.1 Funcția date();

Această funcție returnează un string ce
conține data. Acestei funcții i se pot atribui
parametrii, parametrii ce semnifică formatul de
afişare a datei.
Această funcție returnează datele în
engleză, pentru a returna în română, trebuie să
vă faceți propria funcție.
Exemple de folosire a funcției date();
Realizați un fişier cu numele data.php şi
introduceți codul de mai jos:
<?php
$data = date("d.m.Y");
echo 'Data curenta este: '.$data.'';
?>
Salvați şi vizualizați în browser http://localhost/contact/data.php.
Şi aşa mai departe, vă puteți “juca” cu funcția date şi parametrii ei pentru a obține rezultatele
dorite:
<?php
$data = date("d.m.Y");
$ora = date("H:i:s");
echo 'Data curenta este: '.$data.' si ora '.$ora.'';
?>
10.2.2 Functia mail();

După cum vedeți în scriptul trimite.php, ne-am folosit de această funcție PHP
pentru a trimite datele culese din formular în email-ul nostru.
Un simplu exemplu de folosire ar fi următorul:
<?php
mail("adresamail@yahoo.com", "Subiectul meu", "Line 1\nLine 2\nLine
3");
?>
Pentru ca trimiterea mail-ului să se facă mai rapid şi mai uşor şi să fie mai uşor de interpretat de
către serverul de email şi client, trebuie să îi definim parametrii pentru headere.
<?php
mail("adresamail@yahoo.com", "Subiectul", "Mesajul", "From: adresamail@gmail.com\r\n" .
"Reply-To: adresamail@hotmail.com\r\n"."X-Mailer: PHP/"
. phpversion());
?>
Acum, analizând exemplul nostru de trimitere email din scriptul trimite.php, observăm că de fapt
nu este aşa greu precum pare, ci chiar este foarte uşor:
După cum vedeți, am declarat nişte variabile:
$catre = 'adresamail@yahoo.com'; // adresa de email unde primim informațiile
$data_trimitere = date('d-m-Y H:i:s'); // data la care mesajul a fost trimis
$subiect = $_POST['subiect']; // subiectul (pe care l-a completat utilizatorul în form)
Apoi avem variabila $mesaj ce conține ca valoare un cod HTML cu datele trimise prin formular şi
variabila $data_trimitere.
Şi, ca ultimă alcătuire, avem headerele şi funcția mail ce conține variabilele
setate mai sus.
mail($catre, $subiect, $mesaj, $headere);
11 Sistem de căutare în baza de date
11.1 Obiective
• Realizarea unei baze de date mysql cu următoarele câmpuri: ID, titlu, adresa, descriere,
vizite; anume:
Tabela bazei de date trebuie să aibă cinci câmpuri (care sunt obligatorii), şi
• id - int(11), not-null, auto_increment ;
• titlu – varchar(255), not-null, cu minim 2 caractere, cel mult 255;
• adresa – varchar(255), not-null, cu minim 2 caractere, cel mult 255;
• descriere – varchar(255), not-null, cu minim 2 caractere, cel mult 255;;
• vizite – bigint(10), not-null, default = 0.
11.2 Mod de lucru:

În primul rând, vom crea baza de date cautare care va avea tabela intrari cu 5
cele coloane şi cu proprietățile acestora, prezentate mai sus.
Vom crea apoi, în directorul rădăcină al serverului C:\Program Files\EasyPHP
2.0b1\www directorul numit cautare.
În acesta vom crea fişierul config.php în care introducem codul de mai jos
(identic cu celelalte fişiere config.php utilizate în laboratoarele anterioare):

$NumeBazaDate = "cautare";
$conexiune = mysql_connect($AdresaBazaDate,$UtilizatorBazaDate,$ParolaBazaDate) or die("Nu

ma pot conecta la MySQL!");
mysql_select_db($NumeBazaDate, $conexiune) or die("Nu gasesc baza de date!");
} // End addentities() --------------
?>
În continuare se realizează fişierul index.php în care se introduce codul de mai jos, şi se
vizualizează în browser.
<?php
echo '<a href="adauga.php">Adauga site</a> | <a href="cauta.php">Cauta site</a>';
?>
11.2.1 Fişierul adauga.php

Pagina index.php va avea două legături către paginile adauga.php
şi cauta.php. În continuare vom realiza pagina adauga.php în care introducem codul de mai jos:
<?php
require_once 'config.php';
if(!isset($_GET['pag'])) $_GET['pag'] = ''; if(!isset($_SESSION['titlu'])) $_SESSION['titlu'] = '';

if(!isset($_SESSION['adresa'])) $_SESSION['adresa'] = ''; if(!isset($_SESSION['descriere']))
$_SESSION['descriere'] = '';
switch($_GET['pag'])
{
case '':
echo '<form name="adauga" action="adauga.php?pag=verifica" method="post">
Titlu: <br> <input type="text" name="titlu" value="'.$_SESSION['titlu'].'"><br><br>
Adresa: <br> <input type="text" name="adresa" value="'.$_SESSION['adresa'].'"><br><br>
Descriere: <br> <textarea name="descriere" rows="6" cols="45"
value="'.$_SESSION['descriere'].'">'.$_SESSION['descriere'].'</texta rea><br><br>
<input type="submit" name="Adauga" value="Adauga">
</form>';
break;
case 'verifica':
$_SESSION['titlu'] = $_POST['titlu'];
$_SESSION['adresa'] = $_POST['adresa'];
$_SESSION['descriere'] = $_POST['descriere'];
if(($_SESSION['titlu'] == '') || (strlen($_SESSION['titlu']) < 2) || (strlen($_SESSION['titlu']) > 255)

|| ($_SESSION['adresa'] == '') || (strlen($_SESSION['adresa']) < 2) || (strlen($_SESSION['adresa']) >
255) || ($_SESSION['descriere'] == '') ||
(strlen($_SESSION['descriere']) < 2) || (strlen($_SESSION['descriere']) > 255))
{
echo 'Completeaza corect campurile. <br>
Vezi daca: ai completat campurile, daca ai scris mai mult de 2 caractere
si mai putin de 255<br><br>
Apasa <a href="adauga.php">aici</a> pentru a te intoarce.';
} else
{
$cerereSQL = "INSERT INTO ìntrari` (`titlu`, àdresa`,
`descriere`)
VALUES ('".addentities($_SESSION['titlu'])."',
'".addentities($_SESSION['adresa'])."',
'".addentities($_SESSION['descriere'])."');";
$_SESSION['titlu'] = '';
$_SESSION['adresa'] = '';
$_SESSION['descriere'] = '';
echo 'Am introdus datele in baza de date. <br>

Apasa <a href="index.php">aici</a> pentru a te intoarce la pagina principala.';
}
break;
}
?>
Formularul prin care vom adăuga date în baza de date.
Privind codul putem deduce:
• instrucțiunea switch şi case este folosită pentru a delimita paginile;
• instrucțiunea if şi else pentru a condiționa rezultatele.
În case-ul default, case ' ':, avem formularul cu câmpurile: titlu, adresa, descriere iar ca
valoare a acestora avem setate sesiunile corespunzătoare lor.
În case-ul 'verifică', observăm setarea sesiunilor cu date trimise de utilizator prin metoda
$_POST, instrucțiunea if, în care avem condițiile, apoi instrucțiunea else ce va executa introducerea în
baza de date, golirea sesiunilor folosite şi afişarea unui text în pagină.
Ca protecție a introducerii datelor, s-a folosit funcția addentities(). Introduceți câteva adrese în baza
de date, pentru a testa căutarea.
11.2.2 Fişierul cauta.php

Scriptul pentru pagina cauta.php :
<?php
if(!isset($_GET['pag'])) $_GET['pag'] = '';

switch($_GET['pag']) {
case '':
echo '<form name="cauta" action="cauta.php?pag=cauta" method="post"> Titlu: <input type="text"
name="cauta" value=""> <input
type="submit" name="Cauta" value="Cauta"> <br>
<a href="cauta.php?pag=cautare-avansata">Cautare avansata</a>
</form>';
break;
case 'cauta':
if($_POST['cauta'] == '') {
echo 'Introdu un cuvant pentru a cauta in baza de date. <br> Apasa <a href="cauta.php">aici</a>
} elseif(strlen($_POST['cauta']) < 3) {
echo 'Cuvantul trebuie sa contina cel putin 3 caractere. <br>
Apasa <a href="cauta.php">aici</a> pentru a te intoarce.';
} else {
$cerereSQL = 'SELECT * FROM ìntrari` WHERE `titlu` LIKE
"%'.addentities($_POST['cauta']).'%"';
if(mysql_num_rows($rezultat) > 0) {
while($rand = mysql_fetch_array($rezultat)) {
echo '<a href="'.$rand['adresa'].'">'.$rand['titlu'].'</a> -
'.$rand['adresa'].'<br> <i>'.$rand['descriere'].'</i> <br><br>';
}
} else {
echo 'Nu au fost gasite rezultate pentru cautarea: <font
color="red"><b><i>'.addentities($_POST['cauta']).'</i></b></font> <br>
Apasati <a href="cauta.php">aici</a> pentru a va intoarce';
}
break;
case 'cautare-avansata':
echo '<form name="cauta" action="cauta.php?pag=cautare-avansata2" method="post">

Cauta: <input type="text" name="cauta" value=""> <br><br>
in <input type="checkbox" name="in1" value="titlu" id="titlu">
<label for="titlu">Titlu</label> |
<input type="checkbox" name="in2" value="adresa" id="adresa"> <label
for="adresa">Adresa</label> |
<input type="checkbox" name="in3" value="descriere" id="descriere"> <label
for="descriere">Descriere</label> <br><br>
<input type="submit" name="Cauta" value="Cauta"> <br>
</form>';
break;
case 'cautare-avansata2':
if(!isset($_POST['in1'])) $_POST['in1'] = ''; if(!isset($_POST['in2'])) $_POST['in2'] = '';

if(!isset($_POST['in3'])) $_POST['in3'] = '';
if($_POST['cauta'] == '') {
echo 'Introdu un cuvant pentru a cauta in baza de date. <br> Apasa <a href="cauta.php">aici</a>
} elseif(strlen($_POST['cauta']) < 3) {
echo 'Cuvantul trebuie sa contina cel putin 3 caractere. <br> Apasa <a href="cauta.php">aici</a>
} else {
if(($_POST['in1'] != 'titlu') && ($_POST['in2'] != 'adresa') && ($_POST['in3'] != 'descriere')) {

$in = '';
} elseif(($_POST['in1'] == 'titlu') && ($_POST['in2'] != 'adresa') &&
($_POST['in3'] != 'descriere')) {
$in = 'titlu';
} elseif(($_POST['in1'] != 'titlu') && ($_POST['in2'] == 'adresa') &&
$cerereSQL = 'SELECT * FROM ìntrari` WHERE àdresa` LIKE
$in = 'adresa';
} elseif(($_POST['in1'] != 'titlu') && ($_POST['in2'] != 'adresa') &&
($_POST['in3'] == 'descriere')) {
$cerereSQL = 'SELECT * FROM ìntrari` WHERE `descriere` LIKE
$in = 'descriere';
} elseif(($_POST['in1'] == 'titlu') && ($_POST['in2'] == 'adresa') &&
"%'.addentities($_POST['cauta']).'%" AND àdresa` LIKE "%'.addentities($_POST['cauta']).'%"';
$in = 'titlu, adresa';
} elseif(($_POST['in1'] != 'titlu') && ($_POST['in2'] == 'adresa') && ($_POST['in3'] ==
'descriere')) {
$cerereSQL = 'SELECT * FROM ìntrari` WHERE àdresa` LIKE
"%'.addentities($_POST['cauta']).'%" AND `descriere` LIKE "%'.addentities($_POST['cauta']).'%"';
$in = 'adresa, descriere';
} elseif(($_POST['in1'] == 'titlu') && ($_POST['in2'] == 'adresa') && ($_POST['in3'] ==
'descriere')) {
"%'.addentities($_POST['cauta']).'%" AND àdresa` LIKE "%'.addentities($_POST['cauta']).'%" AND
`descriere` LIKE "%'.addentities($_POST['cauta']).'%"';
$in = 'titlu, adresa, descriere';
}
if(mysql_num_rows($rezultat) > 0) {
<font
echo 'Cautati in: <font color="red">'.$in.'</font> dupa:
color="red"><b>'.addentities($_POST['cauta']).'</b></font><br><br>';
echo '<a href="'.$rand['adresa'].'">'.$rand['titlu'].'</a> -
'.$rand['adresa'].'<br> <i>'.$rand['descriere'].'</i> <br><br>';
}
} else {
echo 'Nu au fost gasite rezultate pentru cautarea: <font
color="red"><b><i>'.addentities($_POST['cauta']).'</i></b></font> in
<font color="red">'.$in.'</font><br>
Apasati <a href="cauta.php?pag=cautare-
avansata">aici</a> pentru a va intoarce';
}
}
break;
}
?>
comandă SQL:

Această comandă SQL, selectează tot din baza de date unde câmpul titlul conține cuvântul trimis
prin formular $_POST['cauta'].
Aceasta este o căutare simplă în baza de date, după titlu, însă se poate realiza şi o căutare mai
avansată după titlu, adresă sau descirere.
Analizând case-ul 'cautare avansata':, observă, scriptul pentru căutare avansată:
if(($_POST['in1'] != 'titlu') && ($_POST['in2'] != 'adresa') &&
($_POST['in3'] != 'descriere'))
{
$in = '';
}
Această parte de cod se interpretează astfel:
Dacă valoarea post in1 nu este egală cu titlu, şi valoarea post in2 nu este egală
cu adresa, şi valoarea post in3 nu este egală cu descriere:
{
creează o variabilă cerereSQL care să caute doar în titlu după textul dat, creează o variabilă cu
numele "in" cu valoare nulă,
}
adică, dacă nu se selectează nici o opțiune, căutarea se va efectua ca cea anterioară, adică doar
după câmpul titlu.
elseif(($_POST['in1'] == 'titlu') && ($_POST['in2'] != 'adresa') && ($_POST['in3'] != 'descriere'))

{
$in = 'titlu';
}
Dacă valoarea post in1 este egală cu titlu (adică dacă opțiunea titlu a fost selectată), şi dacă valorile
post-ului 2 şi 3 nu sunt selectate
{
creează o variabila cerereSQL care să caute în titlu după textul dat creează o variabilă cu numele
“in” cu valoarea titlu
}
…………
….
elseif(($_POST['in1'] == 'titlu') && ($_POST['in2'] == 'adresa') && ($_POST['in3'] != 'descriere'))
{
"%'.addentities($_POST['cauta']).'%" AND àdresa` LIKE "%'.addentities($_POST['cauta']).'%"';
$in = 'titlu, adresa';
}
Dacă valoarea post in1 este egală cu titlu (adică dacă opțiunea titlu a fost selectată), şi dacă valoarea
post-ului in2 este egală cu adresa (adică dacă şi opțiunea adresa a fost bifată), şi dacă valoarea post-ului
in3 nu este descriere
{
creează o variabilă cerereSQL care să caute în titlu şi adresa după textul dat creează o variabilă cu
numele “in” cu valoarea titlu, adresa
}
…………
….
Efectuați un test în browser, în funcție de adresele introduse de dumneavoastră
în formular, bifați opțiunile pe rând şi testați.
12 Sistem de blocare acces al unui utilizator aspra site-ului, sistem de
contorizare a click-urilor pe un link
12.1 Obiective
• Realizarea a două pagini în php, index şi admin cu următoarea structură:
• admin.php:
o utilizator sau adresa IP (tip text, not null, între 2 şi 255 caractere) ;
o motiv (tip text, not null, între 2 şi 255 caractere);
• realizarea unei pagini php în care să se contorizeze clck-urile efectuate pe un link din
pagină.
12.2 Partea I – blocare accces

Baza de date pe care o vom folosi în această lucrare a fost folosită şi în lucrarea nr. 8 (mysql-2), însa
va trebui să mai creăm un tabel. Intrăm în phpMyAdmin, selectam baza de date cu numele
autentificare, apoi creăm o nouă tabelă cu numele acces_interzis cu 3 coloane si anume:
• id - int(11), not-null, auto_increment ;
• interzis – char(60), not-null;
• motiv – char(255), not-null;
12.2.1 Mod de lucru:

În primul rând, vom crea în baza de date autentificare tabelul acces_interzis cu 3 cele coloane şi
cu proprietățile acestora, prezentate mai sus.
Vom crea apoi, în directorul rădăcină al serverului C:\Program Files\EasyPHP 2.0b1\www
directorul numit interzicere.
În acesta vom crea fişierul config.php în care introducem codul de mai jos (identic cu
celelalte fişiere config.php utilizate în laboratoarele anterioare):

$NumeBazaDate = "autentificare";
$conexiune = mysql_connect ($AdresaBazaDate, $UtilizatorBazaDate,

$ParolaBazaDate) or die("Nu ma pot conecta la MySQL!");
mysql_select_db($NumeBazaDate, $conexiune) or die("Nu gasesc baza de date!");
} // End addentities() --------------
?>
În continuare se realizează fişierul index.php în care se introduce codul de mai jos, şi se

vizualizează în browser.
<?php
$_SESSION['utilizator'] = 'student';
$adresa_ip = $_SERVER['REMOTE_ADDR'];
$cerereSQL = 'SELECT * FROM àcces_interzis` WHERE
interzis="'.$_SESSION['utilizator'].'" OR interzis="'.$adresa_ip.'"';
if(mysql_num_rows($rezultat) > 0)
{
$motiv = $rand['motiv'];
}
}
if(isset($motiv)) {
echo 'Acces interzis asupra paginii, motivul: <i>'.$motiv.'</i>';
} else {
echo 'Continutul paginii.<br>
Apasa <a href="admin.php">aici</a> pentru a
interzice acces-ul asupra paginii.';
}
?>
Observați faptul că la începutul paginii avem setată sesiunea cu utilizatorul logat (acum am definit-o
manual, normal această sesiune o setați atunci când utilizatorul se autentifică, pagina index.php fiind
una din paginile protejate, prin urmare vom avea sesiunea cu numele utilizatorului).
Adresa IP a utilizatorului o luăm cu ajutorul variabilei globale $_SERVER, REMOTE_ADDR.
După ce am obținut utilizatorul sau adresa ip a acestuia, avem comanda SQL care selectează tot
din tabela acces_interzis unde interzis este utilizator ori interzis este adresa ip.
Dacă returnează rezultate, setăm variabila $motiv, cu valoarea rândului motiv din baza de date,
apoi realizăm o construcție if cu condiția: dacă este setată variabila motiv, înseamnă că au fost găsite
rezultate, înseamnă că utilizatorul apare în baza de date ca fiind blocat, prin urmare afişăm un mesaj
de eroare.
Dacă nu, afişăm conținutul paginii web.
Creați o pagină cu numele admin.php, introduceți codul de mai jos, apoi testați în browser.
<?php

switch($_GET['pag']) {
case '':
echo '<form name="adauga" action="admin.php?pag=verifica" method="post">
Utilizator sau Adresa IP <br> <input type="text" name="interzis"><br><br>
Motiv <br> <input type="text" name="motiv"><br><br>
<input type="submit" name="Adauga" value="Adauga">
</form>';
break;
case 'verifica':
if(($_POST['interzis'] == '') || (strlen($_POST['interzis']) < 2) || (strlen($_POST['interzis']) > 255) ||
($_POST['motiv'] == '') || (strlen($_POST['motiv']) < 2) || (strlen($_POST['motiv']) > 255))
{
echo 'Completeaza corect campurile. <br>
Vezi daca: ai completat campurile, daca ai scris mai mult de
2 caractere si mai putin de 255<br><br>
Apasa <a href="admin.php">aici</a> pentru a te intoarce.';
} else {
$cerereSQL = "INSERT INTO àcces_interzis` (ìnterzis`, `motiv`) VALUES

('".addentities($_POST['interzis'])."',
'".addentities($_POST['motiv'])."');";
echo 'Am introdus datele in baza de date. <br>

Apasa <a href="index.php">aici</a> pentru a te intoarce la
pagina principala.';
}
break;
}
?>
Observați faptul că în case default, case '':, avem formularul de

blocare utilizator sau IP şi o căsuță cu motivul care va apare atunci când un utilizator blocat accesează
adresa.
A II-a parte, cea cu validarea şi înserarea în baza de date, vă este cunoscută.
Introduceți, spre exemplu, adresa dvs locală:
127.0.0.1 şi un motiv apoi testați în browser accesând
pagina principal index.php.
Descoperiți modalitatea de a înlătura adresa mai sus introdusă, pentru a da acces utilizatorului la
pagina index.php.
12.3 Partea a II-a – contorizare click-uri
Avem nevoie de o bază de date. În acest scop o vom folosi pe aceea care a fost utilizată în lucrarea
cu scripturile de căutare. Vom utiliza celula vizite din baza de date cautare, tabela intrari.
În directorul rădăcină al serverului web (Apache) vom crea directorul contorizare, în care vom
copia fişierul config.php din directorul contorizare (este acelaşi, deoarece ne conectăm la aceeaşi bază
de date).
Realizăm o pagină cu numele index.php, în care introducem scriptul de mai jos:
<?php

switch($_GET['pag'])
{
case '':
$cerereSQL = 'SELECT * FROM ìntrari`';
{
echo '<a href="index.php?pag=
redirectionare&id='.$rand['id'].'">'.$rand['titlu'].'</a> -
'.$rand['adresa'].' <font color="blue" size="2">(vizualizari:
'.$rand['vizite'].')</font> <br> <i>'.$rand['descriere'].'</i>
<br><br>';
}
break;
case 'redirectionare':
if(!is_numeric($_GET['id'])) {
echo 'ID nu este numeric, ce incerci sa faci?';
} else {
$cerereSQL = 'SELECT * FROM ìntrari` WHERE id="'.$_GET['id'].'"';
{
header("Location: ".$rand['adresa']."");
$cerereSQL = 'UPDATE ìntrari` SET vizite="'.($rand
['vizite']+1).'" WHERE id="'.$rand['id'].'"';
}
}
break;
}
?>
Observați că în primul case avem selectarea şi afişarea în pagină a tuturor adreselor introduse din
proiectul căutare; mai observați şi transferarea prin:
<a href="index.php?pag=redirectionare&id='.$rand['id'].'">
a id-ului corespundator fiecărei intrări.
În al II-lea case avem verificarea dacă valoarea trimisă prin $_GET este numerică. Dacă nu este
numerică, afişăm un mesaj de eroare, iar dacă este, selectăm tot din baza de date unde id-ul este id-ul
trimis prin get.
Redirecționăm utilizatorul către pagina selectata prin metoda header Location.
header("Location: ".$rand['adresa']."");
Apoi updatam vizitele cu +1, unde id-ul este id-ul trimis prin $_GET.
Accesați din nou pagina principală index.php şi observați rezultatele:
OBS: php este un limbaj case sensitive, dacă unul din câmpurile din baza de date are numele
scris cu litere mari (de exemplu ID), atunci scriptul index-php de mai sus trebuie corectat (să fie scris
ID şi nu id).
Tehnologii Internet
Bibliografie
1. http://www.bsdguides.org/guides/freebsd/
2. http://www.cssplaza.com/tutoriale-css/
3. http://www.dplus.ro/resurse.php#ghid
4. http://www.drogoreanu.ro/tutorials/index.php
5. http://www.freebsd.org/
6. http://freebsd.ournet.md/docs/system/index.phtml
7. http://www.geocities.com/WallStreet/Floor/7071/jstutor.htm
8. http://www.infodamina.ro/jscript/index.html
9. http://www.itzone.ro/tutoriale.php?categorie_id=9
10. http://jalobean.itim-cj.ro/Cursuri/www.my-sql.go.ro/instalare.htm#mysqll
11. http://www.linux-magazin.ro/
12. http://www.mcli.dist.maricopa.edu/tut/lessons.html
13. http://www.mydigitallife.info/2006/04/13/installing-web-server-in-freebsd-60- with-apache-22-
mysql-50-and-php-5-part-4/
14. www.oriceon.com/tutoriale
15. http://www.supremeweb.org/fusion/news.php
16. http://www.rofug.ro/
17. http://www.tutoriale.far-php.ro/
18. http://www.worklance.com/htmltutorial/
19. The PHP begginers tutorial - Leendert Brouwer, PHP Pocket Reference editia 2
– O’Reilly, Manual PHP (ro) HTML And XHTML The Definitive Guide editia
5 – O’Reilly;
20. Inițiere în PHP & MySQL, Valentin Ivaşcu, 06.2005

Proiectarea Paginilor WEB COMPLET

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Proiectarea Paginilor WEB COMPLET

Încărcat de

Drepturi de autor:

Formate disponibile

PROIECTAREA PAGINILOR WEB

PROIECTAREA PAGINILOR WEB

Stiluri pentru blocuri de text

ultima poziție se află o familie generică.

Sunt cuprinse in interiorul etichetelor

O lista de definitii este introdusa intr-un document .html prin eticheta

Definirea culorilor pentru un tabel

Casete de valitare sau Checkbox

Câmpuri de editare multilinie

<form action="mailto:student@yahoo.com" method="post">

Definirea cadrelor se face din aproape in aproape prin impartirea ferestrelor și a

PROIECTAREA PAGINILOR WEB

1. Principii de proiectare ..................................................................................................................... 3

2. Limbajul HTML ................................................................................................................................ 4

2.1. Scurt istoric SGML şi HTML ...................................................................................................... 5

2.2. Structura unei pagini web ........................................................................................................ 6

2.3. Blocuri preformatate ............................................................................................................... 8

2.4. Culoarea de fond ........................................................................................................................ 10

2.5. Atributele textului ...................................................................................................................... 10

2.6. Atributele unui bloc-text ............................................................................................................ 11

2.7. Atributele fonturilor ................................................................................................................... 12

2.8. Stiluri fizice pentru blocuri-text .................................................................................................. 13

2.9. Stiluri logice pentru blocuri-text ................................................................................................. 14

2.10. Etichete dedicate blocurilor speciale ........................................................................................ 15

2.10.1. Bloc de adresă ................................................................................................................... 15

2.10.2. Bloc-text cu deplasare spre dreapta (indention)................................................................. 16

2.10.3 Blocuri paragraf .................................................................................................................. 16

2.10.4. Blocuri de titlu ................................................................................................................... 17

2.10.5 Blocuri <nobr> .................................................................................................................... 18

2.10.6 Blocuri <div>....................................................................................................................... 18

2.11. Linii orizontale .......................................................................................................................... 20

2.12. Introducerea imaginilor în pagina web ..................................................................................... 21

2.13. Legături între paginile web ....................................................................................................... 23

2.14. Liste, tabele, cadre, formulare .................................................................................................. 28

2. 14. 1 Liste de termeni ................................................................................................................ 28

2.14.2 Tabele ................................................................................................................................ 30

2.14.3 Cadre .................................................................................................................................. 34

2.14.4 Formulare ........................................................................................................................... 34

2.15. STILURI HTML ........................................................................................................................... 37

2.1. Scurt istoric SGML şi HTML

2.2. Structura unei pagini web

Între cele două marcaje <html>și </html>vom introduce două secţiuni:

<title> Prima pagina WEB</title>

Bine aţi venit în pagina mea web!

Conţinutul blocului <title>...</title>va apărea în bara de titlu a ferestrei browser-

<title> Titlul paginii web </title>

Bine aţi venit în <br> pagina mea web!

2.3. Blocuri preformatate

<title>bloc preformatat </title>

Un fişier html standard arată

2.4. Culoarea de fond

2.5. Atributele textului

speciale, culorile de bază pot fi combinate.

2.6. Atributele unui bloc-

2.7. Atributele fonturilor

2.8. Stiluri fizice pentru blocuri-text

2.9. Stiluri logice pentru blocuri-text

Eticheta de tip bloc <blink>...</blink> delimitează fragmente de text clipitoare. Această

2.10. Etichete dedicate blocurilor speciale

2.10.1. Bloc de adresă

2.10.2. Bloc-text cu deplasare spre dreapta (indention)

2.10.3 Blocuri paragraf

2.10.4. Blocuri de titlu