HTML

Html
Așa cum se poate vedea în imaginea 3.1, titlurile diferitelor niveluri sunt afișate folosind diferite
dimensiuni ale fontului și formatarea. De asemenea, atunci când sunt afişate, browserul adaugă câte
o linie goală înainte și după titluri.
Titlurile dintr-un document HTML sunt plasate după o ierarhie a titlurilor. Astfel,<h1> se foloseşte
pentru titlurile principale, <h2> pentru subtitluri și așa mai departe. Această ierarhie trebuie să fie
respectată, astfel încât nu este corect să se folosească, de exemplu, titlul <h4> imediat după
titlul <h1>.
Ierarhia titlurilor se aplică separat pe diferite regiuni ale documentului HTML, desigur, dacă
documentul HTML este format din mai multe regiuni. Astfel că este posibil a avea mai multe
titluri <h1> în cadrul unui document, care s-ar referi la diferite secțiuni ale documentului. Despre
diferitele secțiuni ale documentului HTML vom discuta mai multe într-una din lecțiile următoare.
n documentele HTML, paragrafele se creează setând textul între tagul de deschidere <p> şi tagul de

închidere </p>
Element Descriere Exemplu Efect

<b> text îngroșat <b>Lorem ipsum</b> Lorem ipsum
<strong> text foarte <strong>Lorem ipsum</strong> Lorem ipsum
important
<i> text italic <i>Lorem ipsum</i> Lorem ipsum
<em> text evidențiat <em>Lorem ipsum</em> Lorem ipsum
<mark> text marcat <mark>Lorem ipsum</mark> Lorem ipsum
<small> text mărunt <p>Normal <small>Small</small></p> NormalSmall
<del> text șters <del>Lorem ipsum</del> Lorem ipsum
<ins> text introdus <ins>Lorem ipsum</ins> Lorem ipsum
<sub> subscript <p>This is <sub>subscripted</sub>text.</p> This issubscriptestext.
<sup> superscript <p>This This
is <sup>superscripted</sup>text.</p> is superscriptedtext.
Totuşi, dacă este nevoie a se influența independent, acolo unde va exista o ruptură în rândul textului,
acest lucru este posibil să se realizeze utilizând tag-ul <br>.
Elementul <br> nu are conținutul său și este unul dintre elementele cu autoînchidere, din moment
ce nu are un tag de închidere. Un exemplu de utilizare a acestuia este următorul:
<p>Excepteur sint occaecat,<br>cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum</p>
Hr
<Hr> este elementul care permite ruperea tematică a textului. Totuşi, acest element este numit după
conceptul horizontal rule, care este o linie ce poate fi folosită pentru a fi separate două secțiuni ale
textului. Majoritatea browserelor tocmai aşa și randează acest element, care, pe lângă efectul său
vizual, are şi un sens semantic care permite separarea tematică a textului.
La fel ca şi elementul <br>, <hr>, nu are conţinut şi este un tag cu autoînchidere.
Un exemplu de utilizare a elementului <hr>.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip
ex ea commodo consequat.</p>
<hr>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim
id est laborum.</p>
Codul prezentat produce efectul ca în imaginea 3.4.
Dacă vreodată, totuşi, apare necesitatea de salvare a mai multor blancuri, cât și a tranziţiilor în rândul
nou, fără utilizarea elementului <br>, se poate utiliza elementul <pre>. Conținutul complet în
interiorul elementului <pre> reţine toate blancurile şi tranziţiile în rândul nou. Utilizarea acestuia este
ilustrată în exemplul:
<pre>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
</pre>
De data aceasta, efectul codului prezentat este ca în imaginea 3.6.
Imaginea 3.6 – Un paragraf cu blancurile salvate şi tranziţiile în rând nou
Listele
Limbajul HTML permite crearea listelor. Listele sunt utilizate pentru structurarea conținutului textului.
HTML recunoaște trei tipuri de liste:
 Listele Ordered (ordonate) – elementele se marchează cu un anumit tip de elemente

obișnuite, de obicei cu numere, cifre romane, litere ale alfabetului etc.
 Listele Unordered (neordonate) – spre deosebire de listele ordonate, nu se potențează

importanţa ordinii elementelor, iar elementele sunt marcate folosind diferite simboluri, cum
ar fi pătratul, cercul, linia etc.
 Listele Definition (definiţionale) – permit crearea definiției fiecărui element din listă
Listele Ordered (ordonate)
Lista ordonată începe cu tagul de deschidere <ol> şi se termină cu tagul de închidere </ol>.

Fiecare element începe cu tagul <li> şi se termină cu tagul </li>. Astfel, o listă ordonată poate
arăta ca cea din exemplul următor:
 code
 source
1. <ol>
2.
3. <li>nigredo</li>
4.
5. <li>albedo</li>
6.
7. <li>citrinitas</li>
8.
9. <li>rubedo</li>
10.
11. </ol>
12.
Aşa cum s-a menționat deja, o listă ordonată începe cu tagul de deschidere <ol>. Cu alte cuvinte,
tagurile <ol> şi </ol> servesc ca un înveliș pentru elementele pe care le va avea lista. În exemplu,
se poate vedea că unele elemente individuale sunt create folosind tagurile <li> şi </li>.
Listele Unordered (neordonate)
Listele neordonate sunt create foarte asemănător cu listele ordonate descrise anterior. Singura

diferență constă în utilizarea tagurilor care se folosesc ca un container pentru elementele listei. La
listele neordonate sunt tagurile <ul> şi </ul>. Astfel, o listă neordonată poate arăta aşa:
 code
 source
1. <ul>
2.
3. <li>nigredo</li>
4.
5. <li>albedo</li>
6.
8.
9. <li>rubedo</li>
10.
11. </ul>
12.
Lista neordonată care se obţine astfel este prezentată în imaginea 3.12.
Imaginea 3.12 – Lista neordonată
Din imaginea 3.12 se poate vedea că elementele listei neordonate sunt enumerate
folosind bulleturi (puncte).
Lista imbricată
Lista completă poate apărea ca un element al unei alte liste. Într-o astfel de situație, se poate spune
că o listă se află în altă listă, procedură care se numește imbricarea listei.
Un exemplu al listei neordonate imbricate este următorul:
 code
 source
1. <ul>
2.
3. <li>nigredo
4.
5. <ul>
6.
7. <li>primo</li>
8.
9. <li>secundo</li>
10.
11. </ul>
12.
13. </li>
14.
15. <li>albedo</li>
16.
18.
19. <li>rubedo</li>
20.
21. </ul>
22.
În exemplu, conținutul primului element al listei, pe lângă textul nigredo, este codul pentru crearea
listei neordonate complete. De aceea, codul prezentat va avea un efect ca în imaginea 3.13.
Imaginea 3.13 – Liste îmbricate
Analizând imaginea 3.13, lucrurile devin foarte clare. Elementele listei îmbricate devin elementele
celui de al doilea nivel al listei principale. În felul acesta se poate realiza imbricarea elementelor listei
în mai multe niveluri.
Imbricarea se poate realiza şi cu listele ordonate. Un exemplu este următorul:
 code
 source
1. <ol>
2.
3. <li>nigredo
4.
5. <ol>
6.
7. <li>primo</li>
8.
9. <li>secundo</li>
10.
11. </ol>
12.
13. </li>
14.
15. <li>albedo</li>
16.
18.
19. <li>rubedo</li>
20.
21. </ol>
22.
Efectul este ca în imaginea 3.14.

Imaginea 3.14 – Liste imbricate
De asemenea, este permisă imbricarea reciprocă între listele ordonate şi cele neordonate.
Listele Definition (de definiţii)
Listele de definiții sunt utilizate ceva mai rar decât listele ordonate și cele neordonate. Ele pot fi utile
în situațiile în care este necesar să se asigure o descriere a elementelor. Astfel, listele de definiții sunt
create sub forma unor perechi de elemente și definiții. Un exemplu de liste de definiții este
următorul:
 code
 source
1. <dl>
2.
3. <dt>nigredo</dt>
4.
5. <dd>a blackening or melanosis</dd>
6.
7. <dt>albedo</dt>
8.
9. <dd>a whitening or leucosis</dd>
10.
11. <dt>citrinitas</dt>
12.
13. <dd>a yellowing or xanthosis</dd>
14.
15. <dt>rubedo</dt>
16.
17. <dd>a reddening, purpling, or iosis</dd>
18.
19. </dl>
20.
Analizând codul, se poate concluziona că elementele și definițiile listei de definiții sunt încadrate
de tagurile <dl> şi </dl>. Denumirile elementelor sunt identificate prin tagurile <dt> şi definițiile lor
cu tagurile <dd>. Codul prezentat va produce efectul ca în imaginea 3.15.
Tabelele
Datele de tip text uneori este mult mai convenabil să fie prezentate în tabele. Rezultatele sportive,
rapoartele financiare, orarele sunt doar câteva dintre exemplele în care utilizarea tabelului poate fi
mai mult decât utilă. Astfel, tabelele sunt utilizate pentru structurarea datelor textuale.
Fiecare tabel este format din celule aranjate în rânduri. Tagul de bază pentru crearea unui
tabel HTML este <table>, în timp ce tagurile pentru crearea celulelor și a rândurilor sunt td şi
respectiv tr. Astfel, pentru crearea celulei se foloseşte tagul td – table data, iar pentru a crea un rând
al tabelului tagul tr – table row.
Structura descrisă a tabelului HTML este prezentată în imaginea 3.16.
Imaginea 3.16 – Structura tabelului HTML
În imaginea 3.16 se poate vedea structura unui tabel HTML. Fiecare celulă se formează utilizând
elementul <td>. Mai multe elemente <td> sunt grupate între ele într-un singur rând, folosind
elementul <tr>. La sfârșitul mai multor rânduri, se construieşte un tabel, grupându-se în cadrul
elementelor <table>. Cum arată totul tradus într-un cod HTML se poate vedea în exemplul următor:
 code
 source
1. <table>
2.
3. <tr>
4.
5. <td>1</td>
6.
7. <td>2</td>
8.
9. <td>3</td>
10.
11. <td>4</td>
12.
13. </tr>
14.
15. <tr>
16.
17. <td>5</td>
18.
19. <td>6</td>
20.
21. <td>7</td>
22.
23. <td>8</td>
24.
25. </tr>
26.
27. <tr>
28.
29. <td>9</td>
30.
31. <td>10</td>
32.
33. <td>11</td>
34.
35. <td>12</td>
36.
37. </tr>
38.
39. </table>
40.
Codul HTML prezentat coincide cu tabelul prezentat în imaginea 3.16. Ca şi conţinut definit al
celulelor sunt numerele, pe baza cărora se poate concluziona în ce ordine sunt
aranjate celulele tabelului HTML. Tabelul creat are trei rânduri cu câte patru celule. Efectul pe care îl
produce codul este prezentat în imaginea 3.17.
Imaginea 3.17 – Tabelul HTML după parsare
Stilizarea tabelelor HTML se realizează folosind CSS, iar singurele două atribute ale
tagului <table> pe care-l permite HTML5 sunt border şi sortable. Atributul border specifică dacă
tabelul va avea un cadru, în timp ce atributul sortable spune dacă tabelul va avea posibilitatea de
sortare. Având aceste lucruri în vedere, dacă este necesar să se obțină un tabel cu cadre, este
suficient să se scrie următoarele:
 code
 source
1. <table border="1">
2.
3. <tr>
4.
5. <td>1</td>
6.
7. <td>2</td>
8.
9. <td>3</td>
10.
11. <td>4</td>
12.
13. </tr>
14.
15. <tr>
16.
17. <td>5</td>
18.
19. <td>6</td>
20.
21. <td>7</td>
22.
23. <td>8</td>
24.
25. </tr>
26.
27. <tr>
28.
29. <td>9</td>
30.
31. <td>10</td>
32.
33. <td>11</td>
34.
35. <td>12</td>
36.
37. </tr>
38.
39. </table>
40.
De data aceasta, efectul codului prezentat va fi ca în imaginea 3.18.
Imaginea 3.18 – Tabelul HTML cu cadre
Celule-antet
Tabelele HTML pot avea şi celule-antet. Acestea sunt celulele care definesc rândurile și coloanele.
Sunt create folosind tagul cu semnul th – table heading. Următorul exemplu ilustrează utilizarea lor.
 code
 source
2.
3. <tr>
4.
5. <th>*</th>
6.
7. <th>monday</th>
8.
9. <th>tuesday</th>
10.
11. <th>wednesday</th>
12.
13. <th>thursday</th>
14.
15. <th>friday</th>
16.
17. </tr>
18.
19. <tr>
20.
21. <th>morning</th>
22.
23. <td> </td>

24.
25. <td> </td>
26.
27. <td> </td>

28.
29. <td> </td>
30.
31. <td> </td>
32.
33. </tr>
34.
35. <tr>
36.
37. <th>evening</th>
38.
39. <td> </td>

40.
41. <td> </td>
42.
43. <td> </td>

44.
45. <td> </td>
46.
47. <td> </td>

48.
49. </tr>
50.
51. </table>
52.
Codul prezentat produce un efect ca în imaginea 3.19.
Imaginea 3.19 – Tabelul HTML cu rândul heading

Unirea celulelor
Diverse programe de procesare a textului și a tabelelor (Word, Excel, Spreadsheet...) permit unirea
mai multor celule succesive pe verticală sau pe orizontală. Această funcționalitate o are şi limbajul
HTML, folosind două atribute: colspan şi rowspan.
Când este nevoie să se unească celulele pe orizontală, se foloseşte atributul colspan. Următorul

exemplu ilustrează utilizarea atributului colspan.

 code
 source
2.
3. <tr>
4.
5. <td>1</td>
6.
7. <td>2</td>
8.
9. <td>3</td>
10.
11. </tr>
12.
13. <tr>
14.
15. <td colspan="2">4</td>

16.
17. <td>6</td>
18.
19. </tr>
20.
21. </table>
22.

Atributul colspan este folosit în a patra celulă sau în prima celulă din al doilea rând. Valoarea
atributului colspan este numărul 2, ce indică faptul că acesta va realiza unirea a două celule. Efectul
va fi ca în imaginea 3.20.
Imaginea 3.20 – Tabelul HTML în cadrul căruia sunt unite două celule pe orizontală
Din imaginea 3.20 se poate vedea că, de data aceasta a patra celulă ocupă spaţiul celor două celule,
adică că s-a făcut unirea a două celule consecutive - a patra și a cincea.
Atunci când celulele trebuie să se unească pe verticală, se va folosi atributul rowspan. Următorul

exemplu ilustrează utilizarea acestui atribut.
 code
 source
2.
3. <tr>
4.
5. <td rowspan="2">1</td>
6.
7. <td>2</td>
8.
9. <td>3</td>
10.
11. </tr>
12.
13. <tr>
14.
15. <td>5</td>
16.
17. <td>6</td>
18.
19. </tr>
20.
21. </table>
22.
Atributul rowspan este setat pe prima celulă. Valoarea lui este setată pe numărul doi, ceea ce
înseamnă că se va realiza unirea a două celule pe verticală. Astfel, efectul codului prezentat va fi ca în
imaginea 3.21.
Imaginea 3.21 – Tabelul HTML în cadrul căruia sunt unite două celule pe verticală
Zonele tabelului
Tabelele HTML pot avea şi zonele lor, în care se poate restricţiona utilizarea în continuare
a conținutului. Astfel, este posibil să se definească antetul, body și partea de jos a tabelului, folosind
tagurile <thead>, <tbody> şi <tfoot>. Exemplul următor ilustrează tabelul HTML cu zonele definite.
 code
 source
1. <table>
2.
3. <thead>
4.
5. <tr>
6.
7. <td>header cell</td>
8.
9. </tr>
10.
11. <tr>
12.
13. <td>header cell</td>
14.
15. </tr>
16.
17. </thead>
18.
19. <tfoot>
20.
21. <tr>
22.
23. <td>footer cell</td>

24.
25. </tr>
26.
27. <tr>
28.
29. <td>footer cell</td>

30.
31. </tr>
32.
33. </tfoot>
34.
35. <tbody>
36.
37. <tr>
38.
39. <td>body cell</td>

40.
41. </tr>
42.
43. <tr>
44.
45. <td>body cell</td>
46.
47. </tr>
48.
49. </tbody>
50.
51. </table>
52.
Cu codul prezentat sunt definite trei zone din cadrul tabelului HTML: header, footer şi
body. Browserele tratează, în general, conținutul tuturor părților în același mod, astfel încât definirea
diferitelor zone a tabelului poate avea efect abia în combinație cu stilizarea CSS, atunci când
diferitele zone ale tabelului se stilizează în moduri diferite. De asemenea, atunci când se imprimă un
document HTML, majoritatea browserelor repetă secțiunea head şi footer a fiecărei pagini pentru o
mai bună examinare. Atunci când se folosesc zonele menționate ale tabelelor HTML,
browserele permit și glisarea conținutului, respectiv partea body, indiferent de părţile head şi footer.
Este interesant de observat că diferite zone ale tabelelor HTML sunt prezentate în următoarea
ordine: <thead>,<tfoot>,<tbody>. Aceasta este ordinea corectă pentru definirea acestor zone, chiar
dacă pe pagină nu apar în această ordine. Astfel, întotdeauna trebuie să apară <thead> în faţa
părţilor <tfoot> şi <tbody>, iar <tfoot> în faţa <tbody>, după secţiunea <thead>.
Imaginea 3.15 – Lista de definiții
Utilizarea frecventă a listei de definiții este de a crea pagini FAQ, având în vedere că

acestea se potrivesc perfect în formă de întrebări și răspunsuri.
Imaginea 3.11 – Lista ordonată
Linkurile sau hyperlinkurile (engl. hyperlinks) permit conectarea și trecerea de pe o pagină pe alta, cât

și conectarea fișierelor, adreselor de e-mail etc. Hyperlinkurile sunt, pe lângă taguri, baza limbajului
HTML.
În limbajul HTML, linkurile se definesc folosind tagul <a>, ca în exemplul următor:
 code
 source
1. <a href="http://www.google.com/">Click to visit Google</a>
2.
Cele două informații de bază care sunt definite în exemplul prezentat al linkului sunt adresa URL la
care indică linkul şi textul linkului. Linkul URL este definit ca valoare a atributului href, în timp ce
textul linkului, cel care este vizibil pe pagină, este definit între tagul de deschidere și tagul de
închidere <a> al elementului. În exemplu, acel text este Click to visit Google.
Structura linkului creat se poate prezenta cu imaginea 4.2.

Imaginea 4.2 – Structura link a elementului
În imaginea 4.2 sunt prezentate cu culoarea roşie părțile care se referă la tagurile HTML pentru
crearea unui link. Cu culoarea verde este marcat atributul href, a cărui valoare URL definește adresa
linkului. Cu culoarea albastră este prezentat URL-ul, în timp ce cu culoarea neagră este marcat textul
linkului, care este vizibil pe ultima pagină.
Un link astfel creat pe pagină, va avea aspectul ca în imaginea 4.3.
Linkurile cu adresele linkurilor relative și absolute

de URL
Linkurile pot indica adrese URL absolute sau relative. În exemplul primului link, a fost folosită adresa
URL absolută. Atunci când se utilizează adresa URL absolută în cadrul linkurilor, lucrurile sunt destul
de clare, deoarece linkul indică întotdeauna aceași, mai exact o anumită pagină, respectiv resursă.
Linkul HTML poate să conțină ca valoare a atributului href adresa URL relativă. Acest lucru este
ilustrat în exemplul următor:
 code
 source
1. <a href="contact-us.html">Contact info</a>
2.
De data aceasta, ca valoare a atributului href este specificată adresa URL relativă. Când linkul indică
adresa URL relativă, lucrurile sunt mult mai complexe. Aşa cum îi spune și numele, această adresă
este relativă pe o altă locație. La linkurile HTML, aceasta este locația documentului HTML în sine, care
conține un astfel de link. Astfel, URL-ul relativ din exemplu se va referi la folderul în care se află
fișierul HTML cu un astfel de link, cu alte cuvinte, va fi căutată pagina cu numele contact-us.html în
același folder în care se află şi documentul care conține linkul.
Adresele URL relative din interiorul linkurilor sunt utilizate în general pentru conectarea între paginile
unui site, respectiv aplicații. Atunci, este nevoie să se acorde o atenție deosebită despre locația
linkului cu adresa relativă, deoarece acest lucru va determina în mod direct la care resursă se va referi
URL-ul relativ.
Pentru ca utilizarea adresei relative în linkuri să fie înțeleasă corespunzător, va fi creat un exemplu.
Structura fișierelor unui site poate să arate ca în imaginea 4.4.
Imaginea 4.4 – Structura fişier a unui site
Imaginea 4.4 ilustrează structura fișierelor site-ului HTMLcompany. Folderul rădăcină a site-ului are
numele HTMLcompany şi conține direct două foldere (about-us şi services) și un
fișier index.html. Fişierul index.html în cadrul folderului rădăcină reprezintă pagina de început a site-
ului.
Exemplul 1: root –> john.doe.html

Dacă este necesar să se plaseze linkul pe pagina de început care va duce la pagina john-
doe.html, este suficient să se scrie următorul cod:
 code
 source
1. <a href="about-us/our-team/john-doe.html">John Doe</a>
2.
Linkul creat conține adresa relativă. Adresa este relativă folderului rădăcină a site-ului, astfel încât
începe cu numele folderului about-us. Având în vedere că este vorba de o adresă relativă, browserul
știe că folderul about-us ar trebui să caute în cadrul acelui folder HTMLcompany.
Exemplul 2: john.doe.html –> root
Cum ar arăta linkul în situația inversă: atunci când paginii john-doe.html trebuie să i se configureze
un link care duce la pagina principală a site-ului? Un astfel de link ar fi următorul:
 code
 source
1. <a href="../../index.html">link</a>
2.
Deoarece fișierul john-doe.html se află în interiorul unuia dintre subfoldere, este necesar într-un fel
să se execute legarea la pagina care se află în structura fișierului deasupra. Acest lucru se realizează
folosind două puncte, ce are ca efect întoarcerea la folderul anterior în structura fișier. Când se spune
anterior, se referă la folderul dinaintea celui în care există un fișier cu un astfel de link. În exemplul
prezentat, două puncte au fost utilizate de două ori, din moment ce fișierul john-doe.html se află la
două niveluri sub rădăcina folderului.
Exemplul 3: john.doe.html –> services/index.html
Cum ar arăta linkul pe pagina john-doe.html care ar duce la pagina index.html, dar de data aceasta în

interiorul folderului services? Această situație este ceva mai complicată decât celelalte două
anterioare, pentru că mai întâi este necesar să se iasă din ambele foldere în care se află
documentul john-doe.html și apoi se deschide folderul services şi în cadrul lui trebuie găsit
documentul index.html. Atunci când s-a spus tot, se traduce în cod HTML şi se obține linkul următor:
 code
 source
1. <a href="../../services/index.html">link</a>
2.
Adresa relativă începe prin specificarea dublă a două puncte prin care se efectuează poziționarea pe
folderul rădăcină al site-ului/aplicației. Din folderul rădăcină, se deschide folderul services, unde se
găsește fișierul index.html.
Adresa absolută VS relativă

Din toată povestea despre adresele relative și absolute în interiorul linkurilor, putem concluziona
câteva lucruri. Atunci când se creează aplicaţia folosind HTML, este recomandat ca întotdeauna să se
utilizeze adresele relative în interiorul linkurilor. O astfel de abordare simplifică foarte mult procesul
de publicare a aplicației și facilitează dezvoltarea. Având în vedere că dezvoltarea și producția sunt
realizate în general la diferite calculatoare, utilizarea adreselor absolute ar complica semnificativ
publicarea aplicaţiilor pe un server de producție (dacă este vorba de o aplicație web). Să vedem acest
lucru pe un exemplu. Aplicația se dezvoltă în următorul domeniu:
 code
 source
1. dev.mysite.com
2.
În timpul dezvoltării pe pagina HTML se setează linkul în forma următoare:
 code
 source
1. <a href="http://dev.mysite.com/services/index.html">link</a>
2.
În exemplul dat se poate constata folosirea adresei absolute în cadrul linkului. În producție, aplicația
web se mută în domeniul:
www.mysite.com
Adresa absolută specificată în interiorul linkului nu mai funcționează, deoarece acum numele hostului
este diferit. Astfel, în cadrul unui site pot exista sute de linkuri și dacă în cadrul fiecăruia este definită
o adresă absolută, aceasta atrage după sine o intervenție serioasă. Toate acestea pot fi prevenite prin
simpla folosire a adreselor relative şi în acest caz linkul ar avea aspectul următor (desigur, în funcție
de poziția documentului HTML care conține linkul):
 code
 source
1. <a href="services/index.html">link</a>
2.
Target Atribut a tagului <a>
Tagul <a> poate avea atributul opţional target, care defineşte în ce mod se activează linkul.
Atributul target poate avea una din valorile prezentate în tabelul 4.1.
Tabelul 4.1 – Valorile atributului target
Două valori cel mai frecvent utilizate ale atributului target sunt: _blank şi _self, prin care se poate
influenţa dacă pagina conectată se va deschide într-o filă separată. Exemple de utilizare a atributului
target sunt următoarele:
 code
 source
1. <a href="second.html" target="_blank">link</a>
2.
3. <a href="http://www.mysite.com/" target="_self">link</a>

4.
În exemplul primului link, pagina conectată va fi deschisă într-o fereastră nouă sau în filă, iar în
exemplul celui de al doilea link, în cadrul paginii/filei pe care este deja încărcată pagina care conține
linkul.
Imaginea ca un link
Toate linkurile din cursul lecțiilor de până acum au fost strict textuale. Când se spune aşa ceva, se
consideră că, pentru activarea linkului, trebuie să se dea un clic pe textul care are funcția linkului. Este
o practică frecventă pe site-urile de astăzi ca linkurile să apar în diferite forme şi cu siguranță una
dintre cele mai comune forme este imaginea.
Pentru a se face o imagine link, tot ce trebuie să se facă este ca o astfel de imagine să se plaseze în
cadrul elementului <a>, ca în exemplul următor:
 code
 source
1. <a href="default.asp"> <img src="link.png" alt="link-logo"></a>
2.
Linkurile e-mail
Linkul poate fi creat astfel încât să fie referit unei adrese de e-mail. Astfel de linkuri, în loc să deschidă
o pagină, lansează programul implicit de e-mail. Dacă este, de exemplu, Microsoft Outlook, linkul va
lansa clientul de mail menționat, va deschide un dialog pentru o adresă nouă de mail şi în
câmpul address va introduce adresa care este determinată prin link.
Un link care se referă la adresa de mail ar putea arăta aşa:
 code
 source
1. <a href="mailto:office@example.com">email link</a>
2.
În exemplul prezentat, se poate observa utilizarea cuvântului cheie mailto, care determină linkul,

ca un link care se referă la adresa de e-mail.
Folosind linkul care se referă la e-mail, este posibil să se definească şi titlul (subject) şi conţinutul
(body) mesajului din mail. Acest lucru se realizează în felul următor:

 code
 source
1. <a href="mailto:office@example.com?subject=Title&body=Message">email link</a>
2.
De data aceasta, după adresa de e-mail, este definită şi secțiunea query string, cu perechile de chei și
valori. Astfel, cheia subject are valoarea Title, şi cheia body valoarea Message. În acest fel, atunci
când se deschide clientul de mail, vor fi completate și câmpurile care sunt definite în continuare în
cadrul query string.
Named anchor
Linkurile se pot folosi şi pentru a conduce utilizatorul la o parte din documentul HTML curent. În
acest scop, sunt setate named anchor care facilitează găsirea unor detalii în cadrul paginilor HTML
lungi.
Primul pas în permiterea conectării în cadrul documentului curent este crearea unei ancore/anchor.
Ancora poate fi orice element HTML cu id-ul setat al atributului, ca în exemplul următor:
 code
 source
1. <h2 id="subheading-1">Subheading 1</h2>
2.
În exemplul de mai sus a fost creat un titlu folosind tagul <h2>, pe care a fost definită valoarea
atributului id. Pentru ca linkul să se refere la o ancoră astfel creată, este suficient să se scrie
următoarele:
 code
 source
1. <a href="#subheading-1">Go to Subheading 1</a>
2.
Ce sunt formularele HTML?
Formularele reprezintă instrumente excelente pentru colectarea informaţiilor de la vizitatorii unui site.

Formularele permit utilizatorilor să trimită comentarii şi întrebări, să solicite informaţii, să se înscrie
pentru a primi newslettere, să completeze aplicaţii online sau să introducă informaţii care înlesnesc
cumpărarea unui produs.
Termenul de formular era utilizat pentru documente tipărite care conţineau câmpuri (spaţii goale)
pentru introducerea datelor. HTML a preluat acest concept şi l-a adaptat formularelor ca să
funcționeze în mod digital.
Cel mai cunoscut formular de pe web este cel de pe pagina de start a motorului de căutare Google
(imaginea 5.1):
Imaginea 5.1 – Formularul HTML pe site-ul Google
Formularul din imaginea 5.1 este cunoscut tuturor și funcționează foarte simplu.
Cu ajutorul acestui formular introducem cuvintele dorite în câmpul de căutare și apoi, folosind
butonul submit care este marcat în imagine ca Google Search, sunt transmise pentru prelucrarea
ulterioară.
Cum funcţionează formularele HTML?

Formularul HTML în sine nu are nicio funcţionalitate, ci reprezintă doar un tip de şablon pentru
colectarea informaţiilor. Când utilizatorul completează un formular al unui document HTML, datele
colectate sunt transmise unui script care va procesa datele transmise. Un astfel de procedeu este
ilustrat în imaginea 5.2:
Imaginea 5.2 – Transmiterea datelor unui formular pentru procesare
În imaginea 5.2 sunt prezentate două documente. Documentul contact.html este un document

HTML care conţine un formular HTML. Utilizatorul îşi introduce datele în acest formular, după care
acestea sunt transmise documentului contact_send.aspx, care conţine un script pentru procesarea
datelor colectate.
Cum se creează formularele HTML?

Formularul HTML se creează folosind elementul form. Elementul form se construieşte folosind tagul
de deschidere <form> şi tagul de închidere </form> ca în exemplul următor:
<form></form>
Elementul form poate conţine atribute care determină modul de funcționare a acestuia. Atributele

elementului formular sunt prezentate în tabelul 5.1.
Atributul Valoarea Descrierea

action URL definește locația la care trebuie să fie trimise datele formularului
autocomplete definește dacă formular va avea funcționalitatea autocompletă, după care
On/off browserul completează automat valorile câmpului pe baza datelor
introduse anterior de utilizator; valoarea implicită este on
enctype application/x-www-
definește modul în care vor fi codificate datele atunci când sunt trimise
form-urlencoded
serverului; această opțiune are efect doar
multipart/form-data
dacă este utilizată pentru trimitere metoda POST
text/plain
method get definește metoda HTTP care se va folosi pentru trimiterea datelor
post formularului
name Text definește numele formularului
novalidate Novalidate definește ca datele formularului să nu fie valide cu ocazia trimiterii
target _blank definește unde se vor prezenta datele care se obţin ca răspuns după
_self trimiterea formularului
_parent
_top
Tabelul 5.1 – Atributele elementului form
Atributele ale căror valori sunt definite cel mai des în timpul dezvoltării unei aplicații web
sunt action şi method.
Atributul action specifică cui vor fi trimise datele formularului. În general, aceasta este adresa până la
fișierul de pe scriptul de server scris în unele limbaje de server. Dacă se omite această dată, browserul
va presupune că prelucrarea formularului utilizează aceeași pagină pe care se află formularul.
Atributul method definește modul în care vor fi transmise datele și poate avea două valori:
 GET – datele formularului sunt trimise serverului printr-un URL. Informaţiile transmise în acest
mod sunt transparente şi supuse atacurilor din partea hackerilor. Deoarece un URL poate
avea cel mult 8192 de caractere, această metodă nu este adecvată pentru formulare mai
lungi. De asemenea, putem ajunge la transliteraţie sau transcripţie, iar unele caractere se pot
modifica sau pierde pe parcurs.
 POST – datele se împachetează în cadrul cererii HTTP. Datele nu sunt codificate şi de aceea

(deşi sunt mai sigure decât în cazul metodei GET) sunt supuse atacurilor din partea hackerilor.
Aşadar, dacă colectăm informaţii personale, precum nume de utilizator, parole sau numere
de card de credit, trebuie să asigurăm o conexiune mai sigură până la un server de încredere.
Luând în considerare atributele descrise pe care le poate avea elementul form, putem scrie următorul
cod HTML:
<form action="script.aspx" method="post" name="demo_form" id="demo_form"

enctype="multipart/form-data" target="_blank">
</form>
În exemplu este creat formularul care transmite datele la script, care se află în interiorul
fișierului script.aspx. Ca metodă de expediere se utilizează metoda HTTP POST, numele și id-ul
formularului sunt demo_form, iar rezultatul care poate fi obținut de la server la cererea trimisă acestui
formular va fi prezentat în pagina nouă.
Elementele formularului HTML

Tagurile form prezentate sunt doar containere pentru elementele care pot fi găsite în cadrul
formularului HTML. Astfel, elementul form poate cuprinde unul sau mai multe dintre următoarele
elemente:
 <input>
 <textarea>
 <button>
 <select>
 <fieldset>
 <label>
Aceste elemente sunt responsabile pentru colectarea și transmiterea datelor. Toate vor fi prezentate
în continuarea acestei lecții.
Elementul <input>
Elementul input este cel mai important element al formularului. Poate apărea în mai multe variante
diferite, în funcție de valoarea atributului lui type. Diferite variante ale elementului input sunt
prezentate în tabelul 5.2.
Atribut Descriere
text element pentru introducerea textului
password element pentru introducerea parolei
radio element pentru selectarea unei opţiuni din mai multe opţiuni oferite
submit element pentru transmiterea datelor formularului
checkbox control care poate avea două poziţii: on şi off
color control pentru selectarea culorii (color picker)
datetime-local control pentru selectarea datei şi a orei
email element pentru introducerea adresei de mail
file buton ce activează fereastra pentru selectarea fişierului
hidden element ascuns
month element pentru selectarea lunii şi a anului
number element pentru introducerea doar a numerelor
range element slider pentru selectarea valorilor numerice
search element pentru introducerea textului pentru căutare
tel element pentru introducerea numărului de telefon
time control pentru introducerea timpului
url element pentru introducerea adresei URL
week element pentru introducerea săptămânii şi a anului
Notă
Cu culoarea portocalie sunt marcate atributele care au apărut în limbajul HTML5.

Elementul input este creat folosind tagul cu autoînchidere, deoarece nu poate avea niciun continut,
ci numai atribute. În continuare vor fi prezentate unele dintre cele mai importante variante de
elemente input HTML.
Input (text)
Elementul input pentru introducerea unui text simplu este creat prin setarea valorii atributului type
pe text, ca în exemplul următor:
 code
 source
1. <input type="text" name="color" >
2.
Pe lângă atributul type, în exemplu este indicată şi valoarea pentru atributul name. Aceasta este o
dată foarte importantă pentru scriptul care va procesa datele acestui formular, deoarece datele vor fi
identificate pe baza valorii name a atributului.
În combinație cu elementele formularului pentru introducerea textului, adesea se foloseşte şi

elementul label, al cărui rol este acela de a identifica câmpul de introducere și asigură o informație
mai apropiată despre un astfel de câmp. Combinația dintre label și controlul input este prezentată în
exemplul următor:
 code
 source
1. <label for="color">Color: </label>
2.
3. <input type="text" name="color" id="color">

4.
Imaginea 5.3 – Elementele label şi input pe pagină
Este important de observat că elementul label are atributul for, cu care se leagă de un anumit

element input. Valoarea atributului for, a elementului label, trebuie să coincidă cu valoarea
atributului id a elementului input la care se referă elementul label.
Elementul input cunoaşte atributul cu numele placeholder, cu care se poate defini un text scurt,

care va descrie valoarea care se aşteaptă a fi introdusă într-un control de text. Următorul exemplu
ilustrează utilizarea acestui atribut:
 code
 source
1. <label for="color">Color: </label>
2.
3. <input type="text" name="color" id="color" placeholder="enter color...">

4.
De data aceasta, codul prezentat va avea un efect ca în imaginea 5.4.
Imaginea 5.4 – Elementul input cu valoarea placeholder
Input (password)
Când este nevoie să se asigure utilizatorului introducerea parolei, se utilizează elementul input a
cărui valoare type a atributului password este ca în exemplul următor:
 code
 source
1. <input type="password" name="pass" id="pass">
2.
Imaginea 5.5 – Controlul input pentru introducerea parolei
Din imaginea 5.5 se poate vedea că nu există text lângă control, deoarece nu este creat tagul label.
Totuşi, textul se poate adăuga simplu, prin setarea tagului label cu atributul for="pass".
Din imaginea 5.5 se mai poate vedea şi că acest tip de element input ascunde caracterele care se
introduc, dar nu garantează de la sine securitate în trimiterea datelor.
Input (Radio)
HTML permite şi crearea unui control Radio Button, ca un element input cu o valoare radio a

atributului type. Folosind controlul Radio Button, utilizatorul nu introduce niciun fel de valori, ci
selectează una dintre cele oferite anterior. Acesta este controlul care se utilizează cel mai des în
combinație cu elementul label, iar codul HTML care ilustrează crearea Radio Button este următorul:
 code
 source
1. <input name="country" type="radio" id="Serbia" value="Serbia"

checked="checked">
2.
3. <label for="Serbia">Serbia</label>
4.
5.
6.
7. <br />
8.
9.
10.
11. <input name="country" type="radio" id="Romania" value="Romania">
12.
13. <label for="Romania">Romania</label>
14.
15.
16.
17. <br />
18.
19.
20.
21. <input name="country" type="radio" id="Ukraine" value="Ukraine">
22.
23. <label for="Ukraine">Ukraine</label>

24.
Codul prezentat va produce un efect ca în imaginea 5.6.
Imaginea 5.6 – Grupul de controale input de tip radio
Pentru a crea fiecare element, adică o posibilă alegere, se foloseşte un element input separat, de
tip radio. Pentru ca browserul să ştie că mai multe taguri input diferite creează un grup, este
necesar să se seteze valori identice ale atributului name.
În exemplu este valoarea county a atributului name și în felul acesta este posibil să se selecteze
numai o singură țară din cele trei oferite.În caz contrar, adică dacă valorile atributului name nu sunt
identice, fiecare Radio Button s-ar comporta ca o entitate separată şi nu ar fi atins efectul dorit.
În exemplu, pentru fiecare element input este definită și valoarea atributului value. Acesta este un
atribut cu ajutoul căruia se defineşte valoarea care va fi transmisă spre procesare.
Pentru identificarea controlului Radio Button pe pagină, se utilizează elementele label, în același
mod în care sunt folosite și elementele input text. Valoarea atributului for a elementului label se
potrivește cu valoarea atributului id corespunzătoare controlului Radio Button.
Dacă este nevoie ca un Radio Button să fie bifat atunci când se încarcă pagina, se foloseşte
atributul boolean checked. De exemplu, dacă este nevoie ca după încărcarea paginii, Radio Button
bifat să fie cel care indică țara cu numele Romania, este suficient să se facă următoarele:
 code
 source
1. <input name="country" type="radio" id="Romania" value="Romania" checked>
2.
Input (checkbox)
În paragraful anterior a fost prezentat elementul HTML pentru crearea unui control radio şi tehnici
cu care se realizează crearea unui grup de astfel de controale, din care se poate alege doar unul.
HTML are şi un element care permite crearea controlului checkbox. Acesta este controlul care poate
avea două stări: on/off, respectiv true/false sau bifat/nebifat. Spre deosebire de controlul radio,
checkbox, se utilizează în general singur, când trebuie să se obţină de la utilizator un simplu da/nu
ca răspuns la întrebare.
Următorul exemplu ilustrează crearea controlului checkbox folosind elementul input:
 code
 source
1. <input type="checkbox" name="question" value="Like" id="question">
2.
3. <label for="question">I like HTML</label>

4.
Codul prezentat va produce un rezultat ca în imaginea 5.7.
Imaginea 5.7 – Elementul input de tip checkbox
În exemplul anterior, pe lângă elementul input checkbox, este definit şi un element label, care

afișează textul pentru utilizator. Elementele Label şi input checkbox sunt interconectate cu
valori identice pentru atributele id şi for. În acest fel, este suficient să dăm clic pe suprafața
elementului label (pe text label) şi acesta va fi transmis elementului checkbox.
Elementul input checkbox are atributul value, care definește valoarea care va fi transmisă

împreună cu formularul, în cazul în care checkbox este bifat.
La fel ca și elementul input radio, şi elementul checkbox poate apărea pe pagină în starea

iniţială bifat, folosind atributul checked. Codul de mai jos ilustrează acest lucru:
<input type="checkbox" name="question" value="Like" id="question" checked>
Input (submit)
Elementul input poate apărea într-o altă variantă. Acesta este un format care permite crearea
controlului pentru transmiterea datelor formularului. Aşa ceva se realizează prin setarea valorii
atributului type la submit, la fel ca în exemplul următor:
 code
 source
1. <input type="submit" value="Submit">
2.
Atributul value definește textul care va fi afișat în interiorul butonului de pe pagină. Astfel, efectul

pe care-l produce codul menţionat este în imagine.
Imaginea 5.8 – Elementul input de tip submit
Input (hidden)
Unul dintre elementele input este şi cel care nu are o reprezentare vizuală a sa pe pagină și se obține
prin setarea tipului elementului inpput la hidden. Adesea este numit şi câmp ascuns. Deşi ideea unui
câmp ascuns în formular poate părea contradictorie, un astfel de control este posibil şi se utilizează
chiar foarte des. Câmpul ascuns, după cum îi spune şi numele, nu este vizibil utilizatorului, însă se
poate utiliza pentru salvarea temporară a unor date. Când spunem că nu este vizibil, spunem că nu
este afişat pe pagină. Câmpul de tip hidden este desigur vizibil în codul paginii şi ce este mai
important, valoarea câmpului hidden se transmite formularului ca și valoare a oricărui alt câmp.
Următorul exemplu ilustrează crearea unui câmp ascuns:
 code
 source
1. <input type="hidden" name="hiddenField" id="hiddenField" value="x">
2.
Câmpul ascuns se foloseşte, de obicei, pentru a scrie anumite date în el în timpul încărcării paginii și
pentru a le trimite apoi scriptului la procesare. De exemplu, imaginaţi-vă un formular pentru sugestii
şi comentarii de pe un site care vinde produse. Dacă utilizatorul este logat atunci când formularul
este deschis, site-ul îi poate scrie ID-ul din baza de date în câmpul ascuns. Această dată nu are nicio
importanţă pentru utilizator, deci, folosirea câmpului hidden pentru astfel de valori este o alegere
ideală. În felul acesta, atunci când utilizatorul introduce datele şi le trimite formularului, este trimis și
ID-ul lui.
Input (number)
HTML5 aduce destule elemente input noi, printre care este şi elementul input de tip number. Acest
element permite introducerea valorii numerice folosind controlul care deține tastele Up şi
Down pentru selectarea valorii numerice (imaginea 5.9). Următorul cod ilustrează modul în care se
creează elementul input number:
 code
 source
1. <input type="number" name="quantity" min="1" max="5">
2.
Pe lângă atributele standard, care au fost deja analizate în curs, controlul input de

tip number cunoaște şi două atribute caracteristice: min şi max. Cu ele se defineşte intervalul de
valori care pot fi selectate folosind acest control. Acest lucru se poate observa şi în imaginea 5.9, care
ilustrează efectul pe care codul prezentat îl are pe pagină.
Imaginea 5.9 – Elementul input de tip number
După cum s-a spus deja, elementul input de tip number se randează pe pagină ca un control la care
valoarea se alege folosind tastele Up şi Down de pe partea dreaptă a elementului.
Input (color)
Un alt element input, care reprezintă o noutate în limbajul HTML5, este elementul input de

tip color. El permite selectarea culorii utilizând picker color integrat al sistemului de operare.
Următorul cod ilustrează crearea acestui element:
<input type="color" name="favcolor">
Acest element se randează pe pagină ca în imaginea 5.10.
Imaginea 5.10 – Elementul input de tip color
Cu un clic pe buton, se obţine fereastra pentru selectarea culorii ca în imaginea 5.11.
Imaginea 5.11 – Color picker care se prezintă prin activarea elementului input color
Input (range)
HTML5 aduce şi controlul care permite selectarea valorii numerice într-un interval definit, care se
randează cel mai adesea pe stație ca un slider control. Un astfel de control se creează folosind
elementul input de tip range, ca în exemplul următor:
 code
 source
1. <input type="range" name="points" min="0" max="10">
2.
Efectul pe care codul prezentat îl produce este ca în imaginea 5.12.
Imaginea 5.12 – Elementul input de tip range
Notă
Toate controalele input HTML5 prezentate până acum își manifestă puterea reală în combinație cu logica care
se poate defini folosind limbajul JavaScript. Acest lucru va fi subiectul unuia dintre modulele următoare.

Elementul <textarea>
Pentru a se permite utilizatorului introducerea unui text cu mai multe rânduri, se utilizează
elementul textarea. Spre deosebire de elementul input text, textarea nu se creează folosind
tagul cu autoînchidere, acest lucru necesită un tag de deschidere și un tag de închidere între care
este posibil să se introducă textul care se va prezenta în control atunci când se încarcă pagina. Dacă
un astfel de text nu este șters de utilizator, va fi trimis împreună cu datele.
Un exemplu de creare a elementului textarea este următorul:
 code
 source
1. <textarea name="description" id="description">Lorem ipsum dolor sit

amet.</textarea>
2.
Efectul pe care îl produce codul prezentat este ca în imaginea 5.13.
Imaginea 5.13 – Elementul textarea

Elementul <button>
Mai devreme în această lecție a fost prezentat elementul pentru crearea controlului pentru
transmiterea datelor către formular. Desigur, este vorba de elementul input de tip submit. HTML
specifică un alt element în scopuri similare. Este elementul buton.
Elementul button este folosit pentru a crea un buton lateral. Cu toate acestea, spre deosebire de
input a elementului submit, elementul button nu este creat folosind tagul auto-etanșare, adică are
propriul început și sfârșit. Acest lucru permite ca elementul să accepte conținutul unei forme arbitrare
și astfel să creeze butoane de control folosind diferite elemente. Tocmai aşa ceva ilustrează
următorul exemplu:
 code
 source
1. <button type="button">
2.
3. <img src="images/button.gif" alt="button" width="10" height="10">

4.
5. Finish
6.
7. </button>
8.
Exemplul prezintă un element button care conține o imagine și text. Pe elementul button este
definită şi valoarea atributului type. Ca valoare este setat textul button, ceea ce face acest element un
buton obișnuit, fără niciun scop special. În plus față de această valoare, pot fi utilizate și valorile
submit și reset, care permit crearea de butoane cu scopuri speciale. Tipul submit definește faptul că
este vorba de un buton care va activa transmiterea formularului, iar tipul reset că este vorba de un
buton care va reseta datele formularului la valori iniţiale.
Elementul <select>
Ceva mai devreme a fost prezentat elementul care permite utilizatorului să selecteze una din
opțiunile oferite. Acesta a fost elementul input de tip radio. HTML cunoaște încă un element cu
același scop, dar într-o formă ceva mai diferită. Este vorba de elementul select.
Elementul select permite crearea controlului derulant în documentul HTML. Elementul Select se

creează folosind tagurile <select> şi </select>, în timp ce elementele care vor fi oferite utilizatorului
sunt create folosind tagurile <option> şi </option>.
Următorul exemplu ilustrează crearea controlului derulant.
 code
 source
1. <select name="country" id="country">
2.
3. <option value="Serbia">Serbia</option>
4.
5. <option value="Romania" selected="selected">Romania</option>
6.
7. <option value="Ukraine">Ukraine</option>
8.
9. </select>
10.
Imaginea 5.14 – Elementul select
Aşa cum s-a menționat deja, fiecare element option din interiorul elementului select reprezintă o

valoare pe care utilizatorul o poate alege. Fiecare element option poate să conțină şi
atributul value, care definește valoarea elementului care va fi transmis spre procesare.
La fel ca şi la input-ul elementului radio, şi la elementul option se poate selecta elementul
care va fi selectat atunci când se încarcă pagina. Acest lucru se realizează folosind
atributul selected. Atributul selected este un atribut boolean.
Notă
Odată cu specificarea boolean a atributului selected și ceva mai devreme a atributului checked, se poate
observa o anumită diferență. Atunci când este definit atributul checked în paragraful despre controlul radio
input, acest lucru este făcut prin specificarea directă a valorilor sale. Pe de altă parte, odată cu specificarea
atributului selected, sunt definite şi numele și valoarea sa. Despre ce este vorba?
De fapt, ambele abordări sunt corecte. În primul caz este aplicată tehnica care se numește minimizarea
atributului, care este permisă numai în varianta limbajului HTML, dar nu și în varianta xHTML. Astfel,
următoarele două linii sunt total analoage:
<option value="Romania" selected="selected">Romania </option>
şi
<option value="Romania" selected>Romania</option>

Elementul select permite şi selectarea mai multor valori folosind atributul multiple (boolean

atribut). Următorul exemplu ilustrează acest lucru:
 code
 source
1. <select name="country" id="country" multiple="multiple">
2.
3. <option value="Serbia">Serbia</option>
4.
5. <option value="Romania" selected="selected">Romania</option>
6.
7. <option value="Ukraine">Ukraine</option>
8.
9. </select>
10.
Efectul produs de codul prezentat este ilustrat în imaginea 5.15.

Imaginea 5.15 – Elementul select cu atributul multiple
În imaginea 5.15 se poate vedea că elementul select cu atributul multiple are un aspect mai

diferit pe pagină, care corespunde mai mult la control list. Desigur, motivul este de a permite
utilizatorului să selecteze mai multe elemente. Selectarea mai multor elemente se realizează cu
ajutorul tastei Control pe PC și Command pe computerele Mac.
Un alt element HTML care poate fi folosit în cadrul elementului select este optgroup. Acesta

permite gruparea elementelor înrudite în cadrul controlului derulant. Un exemplu de utilizare a
acestui element este următorul:
 code
 source
1. <select>
2.
3. <optgroup label="Europe">
4.
5. <option value="romania">Romania</option>
6.
7. <option value="serbia">Serbia</option>
8.
9. <option value="ukraine">Ukraine</option>
10.
11. </optgroup>
12.
13. <optgroup label="Asia">
14.
15. <option value="chine">China</option>

16.
17. <option value="india">India</option>
18.
19. </optgroup>
20.
21. </select>
22.
Codul prezentat produce efectul ca în imaginea 5.16
Imaginea 5.16 – Elementul Select cu două grupe create folosind elementul optgroup
Tagul <optgroup> permite definirea a două atribute. Cu atributul label se specifică numele grupei

care va fi prezentat în lista derulantă, în timp ce atributul disabled (atribut boolean) defineşte dacă
selectarea elementului grupului va fi dezactivată.
Eliminaţi elementul care nu este un tag input:
textarea
text
password
radio button
Gruparea datelor formularului

Elementele înrudite ale formularului HTML se pot grupa folosind elementul fieldset. Astfel
grupate, elementele vor fi clar separate şi pe pagină. Următorul exemplu ilustrează acest lucru:
 code
 source
1. <form action="script.php" method="post" name="demo_form">
2.
3. <fieldset>
4.
5. <legend>Personal info</legend>
6.
7. <label for="name">First name:</label><br>

8.
9. <input type="text" name="name" id="name"><br>
10.
11.
12.
13. <label for="surname">Last name:</label><br>
14.
15. <input type="text" name="surname" id="surname"><br>

16.
17. </fieldset>
18.
19.
20.
21. <fieldset>
22.
23. <legend>Contact</legend>
24.
25. <label for="email">Email:</label><br>
26.
27. <input type="text" name="email" id="email"><br>

28.
29.
30.
31. <label for="phone">Phone:</label><br>

32.
33. <input type="text" name="phone" id="phone">
34.
35. </fieldset>
36.
37. </form>
38.
În exemplu, este creat formularul cu două zone fieldset. Fiecare element fieldset, ca un

subelement, are elementul legend, în cadrul căruia se defineşte titlul grupului. Exemplul prezentat
va produce pe pagină un rezultat, ca în imaginea 5.17.
Imaginea 5.17 – Aspectul formularului cu zonele definite folosind elementul fieldset
Elementul fieldset creează clar grupuri separate a controlului care se află în cadrul formularului.

Grupurile controalelor sunt separate clar pe pagină în cadrul browserului, prin adăugarea unui cadru.
Astfel, numele grupului se definește cu elementul legend.
În lecțiile anterioare au fost prezentate cele mai importante elemente HTML, care reprezintă blocuri
constitutive ale unui limbaj complet. Fiecare document HTML, pe lângă elementele care au o
reprezentare vizuală pe pagină, trebuie să aibă şi propriul lui antet, cu elementele care, în general, nu
sunt vizibile pe pagină, dar joacă un rol important în funcționarea ei. Așadar, această lecție va fi
dedicată antetului documentului HTML și elementelor care pot fi găsite aici.
Elementul rădăcină a fiecărui document HTML este elementul html. Începe cu tagul de
deschidere <html> şi întotdeauna se termină cu tagul de închidere </html>. Unele dintre cele mai
importante caracteristici ale elementului html sunt următoarele:
 îi spune browserului că este vorba de un document HTML
 prezintă elementul rădăcină a documentului HTML
 cuprinde toate celelalte elemente pe pagină
Elementul html permite definirea a două atribute, prezentate în tabelul 6.1.
Atributul Valoarea Descrierea atributului

manifest URL Defineşte adresa cache a manifest-ului
xmlns http://www.w3.org/1999/xhtml Defineşte spaţiul de nume XML
Atributul manifest este prezentat în versiunea limbajului HTML 5 şi se utilizează pentru a defini

adresa pe care se află fişierul cache manifest. HTML5 permite paginii web să se încarce în cache și
astfel o pune la dispoziție chiar și atunci când nu există o conexiune la internet. În felul acesta
se permite navigarea offline, accelerează încărcarea pe pagină și reduce încărcarea serverului.
Atributul xmlns specifică câmpul XML al numelui documentului şi este necesar să se precizeze

valoarea lui atunci când se utilizează versiunea limbajului xHTML, în timp ce în versiunea HTML
5 definirea ei nu este necesară. Elementul Html cu tagul xmlns definit arată astfel:
 code
 source
1. <html xmlns="http://www.w3.org/1999/xhtml">
2.
Elementul html este părinte pentru doi succesori direcţi. Acestea sunt elementele:
 head
 body

Elementul body conține corpul documentului, iar elementul head reprezintă antetul documentului și
este subiectul acestei lecții. Structura de bază a elementelor documentului HTML este prezentată în
imaginea 6.1.
Imaginea 6.1 – Structura de bază a elementului HTML
Elementul <head>
Elementul head începe cu tagul <head> şi se termină cu tagul </head>. Acesta este elementul
rădăcină pentru toate datele antetului unui document HTML. Elementul <head> este elementul
părinte pentru următoarele elemente HTML:
 <title>
 <style>
 <base>
 <link>
 <meta>
 <script>
 <noscript>
Notă
În limbajul HTML 5, elementul <head> nu este necesar să fie definit pentru ca pagina să fie validă, dar în
acest caz elementul <title> trebuie definit, având în vedere că este necesar ca fiecare document HTML să
aibă un nume.

Structura de bază a antetului documentului HTML este prezentată în imaginea 6.2.
Imagina 6.2 – Structura de bază a antetului documentului HTML
Elementul <title>
Elementul title este un element obligatoriu al fiecărui document HTML. De obicei, este definit în

cadrul secțiunii head, iar dacă secţiunea head nu este specificată, elementul title se defineşte ca un
succesor direct al elementului html.
Elementul title defineşte numele documentului HTML care se utilizează în câteva situaţii diferite, în

timp ce prezintă numele paginii în:
 fereastra browserului
 favorite
 rezultatele de căutare a site-urilor
Un document poate avea doar un element title.
Elementul <style>
Elementul style este folosit pentru a defini stilizarea CSS pentru documentul HTML curent. Stilizarea

determină modul în care vor fi randate elementele HTML în browser. CSS este termenul căruia îi va fi
dedicată o bună parte a acestui curs, mai precis întregul modul Stilizarea documentului HTML.
Într-un document HTML este posibil să fie un număr mai mare de elemente style.
Elementul style poate avea atributele prezentate în tabelul:

media media_query defineşte dispozitive pentru care se aplică stilizarea
scoped scoped defineşte ca stilizarea să se aplice doar pe elementul părinte şi succesorii lui
type text/css defineşte tipul conţinutului tagului
Tabelul 6.2 – Atributele elementului style
Atributul media permite să se definească mediile, respectiv dispozitivele pentru care se aplică

stilizarea. Dacă stilizarea trebuie, de exemplu, să se aplice numai pe mobil şi nu şi pe dispozitivele
desktop, este posibil să se realizeze aşa ceva folosind atributul media.
Sintaxa elementului style cu atributul media definit este următoarea:
 code
 source
1. <style media="value"><br><br>
2.
Ca valoare a atributului media, este posibil să se specifice diferite valori implicite, dar şi dimensiunile
dispozitivului de afișare, pentru care se va aplica stilizarea.
Notă
Mai multe despre media query vom vorbi în modulul despre stilizarea documentului HTML.
Atributul scoped este prezentat în versiunea limbajului HTML 5. Permite ca stilizarea definită în

cadrul elementului style să se aplice numai pe elementul în care există o astfel de stilizare și pe
succesorii lui.
Notă
Atributul scoped este sprijinit în prezent doar în browserul Firefox.
Atributul type definește tipul de conținut al atributului style. Valoarea lui este text/css, ceea ce indică
faptul că conținutul este scris în limbajul CSS. Elementul style cu atributul type arată astfel:
<style type="text/css">
În limbajul HTML5 nu este necesar să se specifice valoarea acestui atribut, deoarece valoarea lui
implicită este text/css.
Elementul <base>
Elementul base definește adresa de bază pentru toate adresele relative din cadrul documentului

HTML. Este permis a se defini o singură adresă de bază la nivelul unei singure pagini, iar aceasta
trebuie să fie definită în interiorul elementului head. Aspectul secțiunii head, cu o adresă de bază
definită, poate fi următorul:
 code
 source
1. <html>
2.
3. <head>
4.
5. <base href="http://www.it-akademija.com/" target="_blank">
6.
7. <title></title>
8.
9. </head>
10.
11. <body>
12.
13. <img src="images/logo.png">
14.
15. <a href="onlineservis">IT Academy On-Line Service</a>
16.
17. </body>
18.
19. </html>
20.

În cadrul părţii body a paginii din exemplu se află o imagine care este plasată în document, folosind
elementul img și un link creat folosind elementul a. Toate acestea sunt elementele pe care le vom
analiza în detaliu în continuarea cursului. Aici sunt doar pentru a arăta utilizarea adresei de bază.
Chiar dacă nici calea către imagine, nici adresa linkului nu sunt absolute, imaginea se afișează fără
probleme și linkul funcționează datorită utilizării adresei de bază. Astfel, efectul codului prezentat
este ca în imaginea 6.3.
Imaginea 6.3 – Pagina cu linkul care duce la adresa URL care se formează folosind adresa de bază
Elementul base este necesar să aibă valoarea definită pentru unul din cele două
atribute: href sau target.
Cu atributul href se defineşte adresa URL care va prezenta adresa de bază.

Atributul target poate avea câteva versiuni diferite, care definesc modul în care va fi deschis linkul.
Valoarea_blank indică faptul că linkul va fi deschis într-o fereastră sau filă nouă. Valoarea _self, care
este, de altfel, implicită indică că linkul va fi deschis în cadrul aceleiași file. În exemplu, ca şi valoare a
atributului target a fost setat _blank, datorită faptului că linkul este deschis într-o filă separată a
browserului, ceea ce se poate vedea în imaginea 6.3.
Elementul <link>
Elementul link definește legătura cu un document extern sau cu o resursă. Cel mai frecvent se

foloseşte pentru activarea fișierului extern cu stilizarea. Elementul link se poate găsi doar în cadrul
secțiunii head, dar poate apărea de un număr arbitrar de ori.
Aspectul secţiunii head cu elementul link definit poate fi ca în exemplul de mai jos:
 code
 source
1. <head>
2.
3. <link rel="stylesheet" type="text/css" href="theme.css">

4.
5. </head>
6.
Atributul rel al elementului link este un atribut obligatoriu, care defineşte relaţia

între documentul curent şi cel legat. Atunci când se leagă fişierul cu stilizarea, valoarea atributului rel
este stylesheet.
Atributul type defineşte tipul documentului legat. În exemplu, tipul documentului legat este text/css,

ceea ce înseamnă că acesta conţine un cod CSS.
Atributul href defineşte locaţia unde se află documentul legat.
Elementul <meta>
Elementul meta se utilizează pentru definirea metadatelor despre documentul HTML. Metadatele nu

sunt prezentate pe pagină, dar se parsează de către browser, motoarele de căutare şi alte servicii
web.
Meta-elementul se foloseşte cel mai adesea pentru definirea:
 descrierii paginii
 cuvintelor-cheie
 autorului documentului
 momentului când a fost ultima dată modificată pagina
Următorul cod ilustrează folosirea metaelementelor:
 code
 source
1. <head>
2.
3. <meta charset="UTF-8"><meta name="description" content="Free Web

tutorials"><meta name="keywords" content="HTML,CSS,XML,JavaScript"><meta
name="author" content="Hege Refsnes">
4.
5. </head>
6.
Meta-elementul se scrie întodeauna în cadrul secţiunii head, de un număr arbitrar de ori. În varianta
limbajului HTML 5, meta-elementul nu are tag de închidere.
Pe meta element se pot defini câteva atribute, prezentate în tabelul 6.3.

character_set Defineşte codificarea documentului HTML
charset
Defineşte ca stilizarea să se aplice doar pe elementul părinte şi toţi descendenţii

text
content lui
content-type Permite definirea informaţiilor care vor fi plasate în cadrul antetului HTTP

http- default-style
equiv refresh
application- Defineşte numele metadatei

name
author
name description
generator
keywords
Tabelul 6.3 – Atributele meta-elementului

Cu atributul charset se setează tipul de codificare, determinând modul în care va
citi browserul pagina și modul în care se vor afișa anumite caractere. Se recomandă a se utiliza
întotdeauna encoding utf-8, în special pentru documentele HTML care conțin părţi de text în limba
română. Utilizând encoding UTF-8, se asigură o afișare adecvată a unor litere specifice, cum ar fi ş, ţ,
ă și așa mai departe. De asemenea, encoding UTF-8 este sprijinit de aproape toate limbajele active și
recunoscute la nivel mondial.
Restul de metadate ale meta-elementului sunt specificate numai ca perechi de chei și valori. Cheile

sunt definite cu atributul name, în timp ce valorile se definesc cu atributul content.
Atributul name permite definirea metadatelor pentru câteva categorii predefinite, care pot fi văzute
în tabelul 6.3.
Perechile de chei și valori pot fi definite şi folosind atributul http-equiv pentru definirea cheilor, iar
atributul content, pentru definirea valorilor. Atributul http-equiv permite înscrierea valorilor în antetul
mesajului HTTP.
Cu ce element este definit numele documentului HTML?
Link
meta
title
html
Elementul <script>
Elementul script se foloseşte pentru definirea scriptului pe pagina client. Poate conţine codul

direct sau să facă referire la un fișier extern cu scriptul client.
Notă
O mare parte a acestui curs, în lecţiile următoare, va fi dedicată limbajului pentru crearea scripturilor client –
JavaScript.

Un exemplu de element script care conţine direct codul de client este următorul:
 code
 source
1. <script>
2.
3. document.getElementById("demo").innerHTML = "Hello from JavaScript!";

4.
5. </script>
6.
Elementul script poate conţine şi atributele prezentate în tabelul 6.4.
Atributu Valoarea Descrierea atributului

l
async async defineşte ca scriptul extern să se execute asincron
charset charset defineşte codificarea scriptului extern
defer defer defineşte ca scriptul extern să se execute atunci când se termină parsarea completă a
paginii
src URL defineşte URL pe care se află scriptul extern
type media_typ defineşte tipul de script

e
Tabelul 6.4 – Atributele elementului script
Elementul <noscript>
Elementul noscript este utilizat pentru a defini conținutul alternativ care urmează să fie afișat
utilizatorilor în a căror browsere este dezactivată sau nu este acceptată executarea scriptului. Acest
element poate fi definit în cadrul secțiunii head sau body. Exemplu de utilizare a
elementului noscript:

 code
 source
1. document.getElementById("demo").innerHTML = "Hello JavaScript!";
2.
3. </script>
4.
5.
6.
7. <noscript>Your browser does not support JavaScript!</noscript>

8.
Multimedia în documentele HTML
Unitate: 7 din 30
Documentele HTML moderne nu se pot imagina fără componente multimedia. Conceptul de

multimedia se referă la tot ceea ce se poate vedea și auzi pe pagină şi nu este un text simplu. Astfel,
acest termen include fotografia, sunetul, videourile și animația. Această lecție va fi dedicată acestor
concepte.
Imaginile
Imaginile reprezintă o parte indispensabilă a documentelor HTML şi în special a site-urilor
moderne. Prin conceptul de imagine sunt subînţelese fotografiile, graficele, diagramele, iconiţele, și,
în general, toate acele fișiere care reprezintă unele formate de imagine. Înainte de a fi prezentate
tehnicile de setare a lor în documente HTML, este necesar să ne ocupăm de termenii generali legați
de imaginile în format digital.
Formate de imagine
În cadrul documentelor HTML în general sunt folosite imagini, într-unul din cele trei formate:
 JPG
 GIF
 PNG
Imaginea 7.1 – Formatele imaginilor care se folosesc cel mai frecvent în documentele HTML
JPG format (Joint Photographic Experts Group) sunt fişierele care folosesc extensia .jpg sau .jpeg.
Acest format nu susține transparența (engl.Transparency) şi nici animația, dar este excelent pentru
comprimarea fotografiilor. Astfel, fotografiile se pot optimiza foarte eficient prin reducerea
dimensiunii fişierului. Totuşi, este important de înțeles că dimensiunea fişierului este invers
proporțională cu calitatea lui, deci în timpul compresiei trebuie să se găsească un raport
corespunzător între consumul de memorie și calitate.
GIF (Graphic Interchange Format) este formatul de afișare a imaginilor, care este limitat la 256 de
culori. Aceste imagini sunt excelente pentru desene tehnice, pentru thumbnail, imagini mici şi iconiţe.
Formatul GIF permite crearea imaginilor cu un număr redus de culori (2, 4, 16 etc.), așa că putem
salva mult din dimensiune în momentul în care creăm fișierele. Formatul GIF susține transparența (cu
multe restricții) și animația, ceea ce înseamnă că putem crea imagini cu efect de mişcare etc. În fazele
inițiale ale dezvoltării animației pe Internet, animațiile GIF se utilizau frecvent, în timp ce astăzi sunt
tot mai puține nevoi în acest sens,datorită abordărilor mai moderne în crearea animației. Astfel, GIF
se foloseşte tot mai puţin.
PNG (Portable Network Graphic) este cel mai nou format suportat de către toate browserele web
actuale și combină funcţionalitățile formatelor GIF și JPEG. Acest format raster pentru imagini
foloseşte comprimarea fără pierderi. Utilizează RGB și sistemul de culori în toate tonurile. Există două
tipuri de formate:
 PNG-8, care conține informații de 8-biți despre culori (asemănător cu GIF);
 PNG-24, care conține informații de 24-biţi despre culori (combină cele mai bune aspecte ale
formatelor GIF și JPG).
PNG-8 nu susține animația, dar susține transparența mai bine decât GIF, în timp ce PNG-24 susține
transparența şi o calitate a imaginii mai bună decât JPG. Totuşi, fişierele PNG sunt mult mai mari, iar
browserele mai vechi nu se descurcă prea bine cu ele (de exemplu, Internet Explorer 6 nu susține
transparenţa PNG).
În final, să rezumăm toate cele trei tipuri de formate menţionate. Performanţele de bază ale
formatelor menționate sunt prezentate în tabelul 7.1.
Formatul Performanţe
JPG pentru fotografie şi imagini cu multe detalii
compresia lossy
16-biţi color
nu suportă transparenţa, nici animaţia
GIF pentru iconiţe şi imagini thumbnail
compresia lossless
maxim 256 de culori
transparenţa şi animaţia
PNG pentru logouri, grafică web şi imagini care necesită
transparenţă
8 sau 24 de biţi
compresia lossless
transparenţa şi animaţia
Tabelul 7.1 – Performanţele formatului pentru prezentarea imaginii
Formatul care permite crearea imaginilor animate este:
Gif
Jpg
Png
Rezoluţia şi dimensiunea imaginii
Imaginile digitale ca și orice alt conținut sunt afișate pe monitoarele calculatoarelor și alte dispozitive
digitale folosind puncte mici numite pixeli. Fiecare imagine este, de asemenea, compusă din
numeroşi pixeli. Numărul acestor pixeli per inch se numeşte rezoluția imaginii sau Pixels Per
Inch – PPI. Rezoluția standard pentru monitoarele de astăzi este de la 70 la 130 PPI, în timp ce la
unele dispozitive mobile, acest număr depășește şi 500.
Pe lângă rezoluție, atunci când lucrăm cu imagini trebuie să avem grijă şi de dimensiunile lor, adică
de lățimea (engl. width) și înălțimea (engl. height) imaginilor.
La imaginile digitale, dimensiunile sunt exprimate în general in pixeli, astfel, putem spune că
dimensiunea unei imagini este de 600x400 pixeli. Cât spațiu pe ecran va ocupa această imagine până
la sfârșit depinde în exclusivitate de rezoluţia acestor display-uri (PPI). La display-urile cu o rezoluție
mai mare, aceeași imagine va fi mai mică și viceversa.
Adăugarea imaginilor în documentul HTML
Documentele HTML nu au posibilitatea să conțină direct imagini, ci imaginile se leagă doar în

interiorul documentelor HTML. Cu alte cuvinte, în document se stabilește o referință la imaginea care
ar trebui să fie introdusă în document, pe o anumită poziție. Toate imaginile sunt fișiere separate în
structura fișierului aplicației care se dezvoltă sau pe un fișier extern al serverului.
Pentru a adăuga imagini pe un document HTML, folosim elementul img. Acest element este
construit folosind tagul cu autoînchidere, deoarece nu poate accepta conţinut, ci doar atribute.
Elementul img este definit de două atribute obligatorii:
 src – indică locaţia pe care se află imaginea
 alt – defineşte textul care va fi afișat vizitatorului site-ului dacă, indiferent de motiv, imaginea
nu se afișează; acest text este utilizat şi de cititorii-mașină ai paginii HTML pentru a înțelege
mai bine conținutul imaginii
Când se iau în considerare toate lucrurile menționate până acum despre elementul img, codul pentru
setarea unei imagini într-un document HTML poate fi următorul:
 code
 source
1. <img src="image.jpg" alt="Alt text">
2.
Codul prezentat se poate descompune şi pe unităţi, la fel ca în imagine:
Imaginea 7.2 – Structura elementului img

Pe lângă cele două atribute obligatorii menţionate, care trebuie să fie definite pe fiecare element
img, acest element permite definirea altor atribute opționale. Aceste atribute sunt următoarele:
 crossorigin – permite utilizarea imaginior de pe alte site-uri în cadrul elementului canvas.
 height – defineşte înălţimea imaginii
 width – defineşte lăţimea imaginii
 ismap – defineşte imaginea, ca o parte a hărţii server; în felul acesta este permis să se dea
clic pe diferite regiuni ale imaginii, iar coordonatele clicului sunt trimise ca valori query string;
se poate folosi doar atunci când elementul img este descendentul unui element
 longdesc – defineşte URL pe care se află o descriere detaliată a imaginii
 usemap – defineşte imaginea ca o hartă client cu regiuni diferite pe care este posibil a se da

clic
Limbajul HTML5 permite definirea înălțimii și a lățimii imaginii, folosind atributele height şi width,

dar şi stilizarea CSS. Ambele abordări sunt valabile și cu siguranță se recomandă a se utiliza CSS.
În lista atributelor opționale menţionate, se pot vedea și cele care permit crearea hărților de imagini.
Acest lucru este posibil să se realizeze pe pagina client, dar și pe pagina de server. Atributul ismap
permite crearea hărților de imagini utilizând serverul, astfel că atunci când se dă clic pe imagine,
coordonatele pe care se află cursorul mouse-ului în momentul clicului sunt transmise serverului
prin query string. Următorul exemplu ilustrează aşa ceva:
 code
 source
1. <a href="map.html">
2.
3. <img src="link.png" alt="link" ismap>

4.
5. </a>
6.
Imaginea trebuie plasată în interiorul elementului, așa cum se vede în exemplu. Cu un clic pe
imagine, pe adresa linkului sunt transmise coordonatele mouse-ului. Acest lucru este ilustrat în
imaginea 7.3.
Imaginea 7.3 – Trimiterea coordonatelor cursorului mouse-ului la server, atunci când se dă clic pe
imagine
Pentru a crea hărţi de imagine, se poate utiliza şi atributul usemap. Acest atribut permite crearea
hărţilor de imagine pe client. Această abordare este foarte populară, având în vedere faptul că
utilizatorul poate vedea imediat ce efect a produs clicul pe o anumită parte a imaginii.
Următorul exemplu prezintă crearea hărţii de imagine:
 code
 source
1. <img src="planets.png" alt="Milky-Way" usemap="#planetmap"

style="width:145px;height:125px;">
2.
3.
4.
5. <map name="planetmap">
6.
7. <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">

8.
9. <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
10.
11. <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">

12.
13. </map>
14.
Atunci când se definește harta imaginii pe client, în cadrul imaginii, sunt definite suprafeţele pe care
se va putea da clic. Suprafețele sunt definite în cadrul hărţii, respectiv în interiorul elementului map,
în timp ce fiecare suprafaţă este reprezentată de elementul area. Există patru tipuri de câmpuri care
pot fi create: rectangle, circle, polygon şi default. Pentru fiecare formă sunt definite
coordonatele care determină poziția și dimensiunea ei, dar şi adresa care va fi deschisă atunci când
se dă clic pe un astfel de câmp. Harta care se creează utilizând elementul map trebuie să fie atribuită
imaginii şi astfel va deveni harta imaginii; acest lucru se poate realiza cu atributul usemap.
Exemplul prezentat produce un efect ca în imaginea 7.4 (cu condiţia ca imaginea cu numele
planets.png să existe în folderul rădăcină):
Imaginea 7.4 – Harta imaginii
Sunetul
Limbajul HTML5 împinge considerabil limitele, atunci când este vorba de lucrul cu multimedia.
Această afirmație este în special valabilă, atunci când este vorba de lucrul cu sunetul. Înainte de
HTML5, nu exista standardul pentru redarea fișierelor audio în cadrul documentelor HTML şi singura
modalitate de a face aşa ceva era utilizarea adaosurilor (plug-in), ca de exemplu Flash.
HTML5 suportă reproducerea a trei formate audio:
 Mp3 (MPEG-2 Audio Layer III) – cel mai popular format pentru prezentarea fișierelor audio de
pe internet; se aplică compresia cu pierdere a calităţii, dar cu un raport bun între
dimensiunea și calitatea fișierului; protejat prin brevet; suportat de toate browserele
 Wav (Waveform Audio File Format) – format dezvoltat de către compania IBM şi Microsoft;

suportat de OS Windows, Macintosh şi Linux.
 Ogg – format dezvoltat de către fondaţia Xiph.Org Foundation; format gratuit şi deschis

Pentru adăugarea sunetului unui document HTML se utilizează elementul audio. Următorul exemplu
ilustrează utilizarea acestui element:
 code
 source
1. <audio controls>
2.
3. <source src="link-song.ogg" type="audio/ogg">

4.
5. <source src="link-song.mp3" type="audio/mpeg">
6.
7. Your browser does not support the audio element.

8.
9. </audio>
10.
HTML prezentat pe pagină produce un efect ca în imaginea 7.5.
Imaginea 7.5 – Controlul HTML pentru reproducţia sunetului
În imaginea 7.5, se poate observa că parserul (în cazul acesta, browser-ul) a renderat elementul audio
ca player cu controalele pentru redare. Controalele sunt aici, deoarece pe elementul audio este setat
atributul boolean controls. Altfel, controalele nu ar fi fost vizibile.
La fel ca atunci când se lucrează cu imaginile, fișierele audio nu pot fi instalate direct în documentul
HTML, ci în cadrul lui doar se leagă. Acest lucru se realizează prin utilizarea elementului source. În
exemplu sunt definite două astfel de elemente, iar browserul va reda primul fișier al cărui format îl
sprijină.
Dacă se întâmplă ca browserul să nu poată reda sunetul în cadrul documentului HTML, utilizatorului
îi va fi afișat textul care este definit între tagurile<audio> şi </audio>. În exemplul nostru apare
textul Your browser does not support the audio element.
Atunci când se leagă fișierul audio, se specifică şi tipul său, folosind atributul type. Ca valoare a
acestui atribut, se setează tipul MIME, iar formatele audio pe care elementul audio le suportă și
tipurile lor MIME care le aparţin sunt prezentate în tabelul 7.2.
Formatul fişierului audio tipul MIME

MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav
Tabelul 7.2 – Tipurile MIME ale formatului audio
Elementul audio, pe lângă atributul controls, trebuie să conţină încă câteva atribute. Toate

acestea sunt prezentate în tabelul 7.3.
Atributul Valoarea Descrierea

autoplay autoplay defineşte faptul că sunetul va fi redat automat imediat când este încărcat
controls controls defineşte că controalele audio vor fi vizibile
loop loop defineşte că întodeauna va începe redarea audio
muted muted defineşte că volumul sunetului va fi setat la zero
preload auto defineşte în ce mod va fi descărcat audio când pagina îşi încheie încărcarea
metadata
none
src URL defineşte URL-ul pe care se află fişierul audio
Tabelul 7.3 – Atributele elementului audio
Atributele autoplay, controls, loop şi muted sunt atribute ce tip boolean.
Din tabelul 7.3 se poate observa, de asemenea, că elementul audio poate conține şi atributul src,
evitându-se astfel obligația de a defini unele elemente individuale source. În acest fel, exemplul
prezentat se poate modifica:
 code
 source
1. <audio controls src="link-song.ogg">
2.
3. Your browser does not support the audio element.

4.
5. </audio>
6.
Video
La fel ca în cazul cu redarea fișierelor audio, înainte de apariția limbajului HTML5 nu a existat niciun
standard pentru redarea fișierelor video în cadrul documentelor HTML. Limbajul HTML5 introduce
elementul video care permite acest lucru.
În cadrul documentului HTML, este posibil să se redea fișierele video în trei formate diferite:
 MP4 (MPEG-4 Part 14) – formatul container dezvoltat de Moving Pictures Expert Group; se
bazează pe QuickTime. Este suportat de toate browserele și recomandat de către site-ul
YouTube
 WebM – format dezvoltat de către compania Mozilla, Opera, Adobe şi Google; sponsorizat în
prezent de către compania Google
 Ogg – format dezvoltat de către Xiph.Org Foundation; format gratuit şi deschis
Aşa cum s-a menționat deja, redarea fișierelor video în cadrul documentului HTML se poate realiza
prin utilizarea elementului video. Următorul exemplu ilustrează utilizarea acestui element:
 code
 source
1. <video width="400" controls><br> <source src="link-video.mp4"

type="video/mp4">
2.
3. <source src=" link-video.ogg" type="video/ogg">

4.
5. Your browser does not support HTML5 video.
6.
7. </video>
8.
Folosirea elementului video este foarte similară cu utilizarea elementului pentru redarea fișierelor

audio. Cu atributul controls se activează afișarea controlului de redare. Fișierul video în document
se leagă folosind elementul source. Odată cu definirea locației unde se află fișierul video, se
definește denumirea tipului MIME. Acele denumiri sunt prezentate în tabelul 7.4.

Formatul fişierului video tipul MIME

MP4 video/mp4
WebM video/webm
Ogg video/ogg
Tabelul 7.4 – Tipurile MIME ale formatului video
Tagul video poate conține toate acele atribute pe care le cunoaște și tagul audio. Atributul
caracteristic pentru elementul video este atributul poster, cu care se poate defini URL-ul unde se
află imaginea care va fi afișată în timp ce se încarcă conținutul video și atâta timp cât acesta nu
pornește.
Grafica 2D
Unitate: 8 din 30
Limbajul HTML permite crearea ușoară a părţilor textuale ale documentului, cum ar fi antetele,
paragrafele, tabelele și altele asemenea. Totuşi, adesea apare necesitatea ca un document HTML să
conțină grafică 2D. Până la apariția limbajului HTML5, pentru afișarea graficii 2D, în general s-au
folosit imagini sau tehnologia numită Flash, care a permis ca paginile HTML să definească elementele
interactive atât de necesare, pe care limbajul HTML la acel moment nu le suporta inițial. Odată cu
apariția limbajului HTML5, lucrurile s-au schimbat drastic şi suportul pentru grafica 2D este integrat
în partea centrală a limbajului.
Pentru afişarea graficii 2D în cadrul documentului HMTL, HTML5 are două tehnologii:
 SVG
 Canvas
SVG
SVG este un acronim pentru termenul Scalable Vector Graphics, care este în esență un limbaj
descriptiv, bazat pe XML, care se utilizează pentru crearea graficii 2D. Elementul HTML care se
utilizează pentru a desena grafica SVG este svg. Acest element poate fi experimentat ca un container
pentru diferite elemente grafice care pot fi desenate pe pagină, astfel încât se poate face o paralelă
între elementele html şi svg. În același mod în care elementul html prezintă containerul pentru
toate acele unităţi textuale ale paginii, elementul svg este un container pentru elementele graficii
2D. Următorul exemplu ilustrează modul în care se poate desena un dreptunghi, folosind SVG.
 code
 source
1. <svg version="1.1"
2.
3. baseProfile="full"
4.
5. width="300" height="200"
6.
7. xmlns="http://www.w3.org/2000/svg">
8.
9.
10.
11. <rect x="10" y="10" width="200" height="100" fill="#4D4D4D" stroke="#4F95FF"

stroke-width="3" />
12.
13.
14.
15. </svg>
16.
Deoarece SVG este un limbaj XML derivat, în cadrul tagului svg se specifică spațiul de nume XML,
folosind atributul xmlns sau versiunea şi profilul limbajului care se utilizează. Pe lângă informațiile
menţionate, elementul svg definește şi înălțimea și lățimea spațiului, respectiv atributele width
şi height în care va fi prezentată grafica 2D.
Limbajul SVG în sine definește numeroase elemente pentru desenarea diferitelor forme grafice. În
exemplu este folosit elementul rect, cu care se desenează dreptunghiul. Este definit că dreptunghiul
va avea lățimea de 200 și înălțimea de 100 de pixeli, definind atributele width şi height. Semnificația
și efectul celorlalte atribute sunt următoarele:
 x – x coordonata punctului din stânga sus
 y – y coordonata punctului din stânga sus
 stroke-width – grosimea liniei de încadrare

 fill – culoarea de umplere
 stroke – culoarea cadrului
Prin combinarea tuturor elementelor menţionate, pe pagina HTML se obţine dreptunghiul ca în

imaginea 8.1.
Imaginea 8.1 – Dreptunghiul creat folosind SVG
Așa cum se poate vedea în exemplu, pentru desenarea formelor se creează elementul în interiorul
containerului svg. În exemplu a fost un dreptunghi, iar SVG cunoaște încă câteva forme de bază, care
au tagurile lor proprii pentru creare. Astfel, SVG cunoaște următoarele forme de bază:
 dreptunghi (rect)
 cerc (circle)
 elipsă (ellipse)
 linie (line)
 polilinie (polyline)
 poligon (polygon)
 cale (path)
În paranteze sunt menţionate numele elementelor care se folosesc pentru desenarea unor forme
adecvate.
Sistemul de coordonate SVG
Toate formele sunt desenate în interiorul granițelor, respectiv în cadrul sistemului de coordonate al
elementului SVG. Sistemul de coordonate are două axe, iar o formă SVG într-un astfel de sistem este
prezentată în imaginea 8.2.
Imaginea 8.2 – Sistemul de coordonate creat folosind SVG
În imaginea 8.2 este prezentat dreptunghiul în interiorul sistemului de coordonate SVG. Pe

dreptunghi este marcat punctul din stânga sus și sunt prezentate coordonatele sale. Coordonatele
punctelor vor fi utilizate pe scară largă în continuarea lecției, unde vor fi prezentate formele de bază
ale limbajului SVG.
Dreptunghiul (rect)
Elementul rect se foloseşte pentru desenarea dreptunghiului. Acest element cunoaşte 6 atribute
diferite, cu care se controlează poziția, mărimea și forma dreptunghiului. Aceste atribute sunt
Tabelul 8.1 – Atributele rect în format SVG
Luând în considerare toate atributele, următorul exemplu ilustrează crearea a două dreptunghiuri:
 code
 source
1. <rect x="15" y="15" width="100" height="60"/>
2.
3. <rect x="130" y="15" rx="10" ry="10" width="100" height="60"/>

4.
Imaginea 8.3 – Dreptunghiurile create folosind rect în format SVG
Cercul (circle)
Elementul circle se utilizează pentru desenarea cercului. Acest element defineşte 3 atribute,
Tabelul 8.2 – Atributele circle în format SVG
Următorul exemplu ilustrează codul pentru desenarea cercului:
 code
 source
1. <circle cx="45" cy="45" r="45"/>
2.
Imaginea 8.4 – Cercul creat folosind circle în format SVG
Elipsa (ellipse)
Elipsa este o forma geometrică care la bază este un cerc căruia i se pot seta independent razele x și y.
Elementul pentru desenarea unei elipse este ellipse și acesta permite specificarea atributelor
Tabelul 8.3 – Atributele ellipse în format SVG
Următorul exemplu ilustrează crearea elipsei:
 code
 source
1. <ellipse cx="50" cy="30" rx="50" ry="30" />
2.
Imaginea 8.5 – Elipsa creată folosind ellipse în format SVG
Pentru desenarea cercului folosind SVG se utilizează elementul:
Elementul circle se utilizează pentru desenarea cercului.
ellipse
circle
rect
square
Linia (line)
Pentru crearea liniei drepte se utilizează elementul line. Linia se definește cu un punct de început și
de sfârșit și, prin urmare, deține şi atributele acestui element (tabelul 8.4).
Tabelul 8.4 – Atributele line în format SVG
Exemplul care ilustrează crearea unei linii este următorul:
 code
 source
1. <line x1="10" y1="10" x2="200" y2="10" stroke-width="3" stroke="#FF7F7F"/>
2.
Imaginea 8.6 – Linia creată folosind line în format SVG
În codul pentru crearea liniei este definită grosimea ei, folosind atributul stroke-width şi culoarea,
utilizând atributul stroke.
Linia întreruptă (polyline)
Liniile întrerupte sunt grupuri de linii drepte interconectate. Sunt definite de un şir de coordonate ale
punctelor care construiesc o astfel de linie. Pentru a crea aceste linii este utilizat
elementul polyline, care definește doar un atribut pentru a cărui valoare sunt setate coordonatele
tuturor punctelor liniei.
Atributul Descriere
points un şir de puncte separate prin virgulă,
care sunt definite prin coordonatele x și y
Tabelul 8.5 – Atributul polyline în format SVG
Următorul exemplu ilustrează crearea unei linii întrerupte:
 code
 source
1. <polyline points="30 55,60 25,100 65,140 20,185 70,230 15,280 75, 340 10, 400
85, 460 5" stroke-width="3" stroke="#FF7F7F" fill="none"/>
2.
Liniile întrerupte unite cu liniile drepte construiesc forma geometrică cu umplere, astfel încât este
necesar să se seteze fill unei astfel de forme la none, pentru a se vedea doar linia. Codul prezentat
produce linia ca în imaginea 8.7.
Imaginea 8.7 – Linia întreruptă creată folosind polyline în format SVG
Poligonul (polygon)
Poligoanele sunt formele care sunt compuse din linii drepte, interconectate. Ca și la polilinii, sunt
definite de un set de puncte ale anumitor coordonate x și y, dar punctul de început și sfârşit sunt
conectate automat și astfel este creată o formă închisă. Poligoanele sunt desenate cu ajutorul unui
element polygon, iar setul de puncte este definit în cadrul atributului points.
Atributu Descrierea
l
points şir de puncte despărţite de virgulă care sunt
definite de coordonatele x şi y
Tabelul 8.6 – Atributul polygon în format SVG
Următorul exemplu ilustrează codul pentru crearea unui poligon:
 code
 source
1. <polygon points="20 65,60 5,100 65" stroke-width="2" stroke="#4F95FF"

fill="#4D4D4D"/>
2.
Folosind atributul points, sunt definite coordonatele a trei puncte. Primul și ultimul punct vor fi unite
automat, deoarece este vorba de o formă polygon. Prin unirea primul și ultimului punct, se obține
forma care poate fi colorată. Acest lucru se face folosind atributul fill, iar culoarea este definită în
formă hexadecimală.
Imaginea 8.8 – Triunghiul creat folosind forma polygon în format SVG
Calea (path)
Calea este forma cea mai generală și cea mai puternică a sistemului SVG. Cu ajutorul ei, este posibil
să se deseneze aproape toate formele, de la dreptunghi, cercuri și elipse, până la liniile întrerupte și
poligoane. Însă, nu se sfârşeşte aici enumerarea, căci folosind căile pot fi desenate şi curba Bezier,
curbe pătratice și altele asemenea.
Calea se desenează folosind elementul path, care cunoaşte doar un atribut, prezentat prin tabelul 8.7.
Atributu Descrierea
l
d şir de puncte despărţite de virgulă, care
sunt definite de coordonatele x şi y
Tabelul 8.7 – Atributul path în format SVG
Valoarea atributului d este compusă dintr-un şir de comenzi şi parametri. Comanda începe cu o
majusculă a alfabetului, după care urmează coordonatele x și y. Următorul exemplu ilustrează codul
pentru crearea unei curbe Bezier:
 code
 source
1. <path d="M10 10 C 20 20, 40 20, 50 10" stroke="#4F95FF" fill="transparent"/>
2.
Codul prezentat produce un efect ca în imagine:
Imaginea 8.9 – Curba Bezier creată folosind path în format SVG
Comenzile și coordonate pentru crearea unor forme mai complexe folosind elementul path vor fi
foarte rar scrise manual. Orice program serios pentru lucrul cu grafica vectorială are opțiunea de
a exporta formele vectoriale create în format SVG.
Canvas
O altă modalitate de a crea grafica 2D în interiorul documentului HMTL este folosirea elementului
Canvas. Spre deosebire de limbajul SVG, elementul Canvas se utilizează pentru desenarea
programabilă a graficii cu ajutorul JavaScript-ului. Conținutul elementului Canvas randează pixel
după pixel, iar în momentul în care grafica este desenată în interiorul elementului Canvas, pentru
browser, nu mai reprezintă nimic altceva, decât un set de pixeli. Când este nevoie să se facă
modificări ale graficii în interiorul Canvas, întreaga scenă se desenează din nou. Astfel, elementul
Canvas este cel mai des folosit pentru a crea grafica animată.
Canvas este creat folosind elementul <canvas>. Aşa cum elementul svg este utilizat pentru diverse
forme pe care le cunoaște limbajul SVG, aşa şi elementul Canvas este un container pentru grafica
care se desenează folosind JavaScript.
Următorul exemplu ilustrează crearea elementului Canvas:
 code
 source
1. <canvas id="myCanvas" width="200" height="100"></canvas>
2.
Având în vedere că limbajul JavaScript este subiectul următoarelor module în această lecție, nu vom
acorda prea multă atenție desenării graficii, folosind Canvas. De aceea, următorul exemplu, care
prezintă desenul unui cerc în interiorul Canvas, este doar cu caracter informativ.
 code
 source
1. <body>
2.
3.
4.
5. <canvas id="myCanvas" width="200" height="100""> </canvas>
6.
7.
8.
9. <script>
10.
11.
12.
13. var c = document.getElementById("myCanvas");
14.
15. var ctx = c.getContext("2d");

16.
17. ctx.beginPath();
18.
19. ctx.arc(95,50,40,0,2*Math.PI);
20.
21. ctx.stroke();
22.
23.
24.
25. </script>
26.
27.
28.
29. </body>
30.
Codul prezentat produce un efect ca în imagine:
Gruparea elementelor
Unitate: 9 din 30
Pe parcursul cursului până acum, au fost prezentate diferitele elemente pe care le poate conține un
document HTML. Pagina HTML este cel mai adesea formată din diferite regiuni, care sunt create prin
gruparea mai multor elemente HTML. Astfel, pagina HTML poate apărea în diferite forme, atunci
când este vorba de aranjamentul conținutului. Unul dintre layout-uri care este, cel mai frecvent
folosit pe site-urile web de astăzi este prezentat în imaginea 9.1.
Imaginea 9.1 – Unul din cele mai frecvente modalităţi de aranjare a componentelor unei pagini HTML
a site-ului
În imaginea 9.1 se pot vedea diferite regiuni ale unei pagini HTML. În partea de sus a paginii se
află header, care conține, de obicei logoul și meniul de navigare. Partea centrală a zonei este
împărțită în două părți: content şi sidebar. În Content se află conținutul principal al paginii, în timp ce
în cadrul sidebar se poate găsi un conținut suplimentar sau o navigare suplimentară. Partea de jos a
paginii este rezervată pentru footer, care poate conţine informații copyright și altele
asemenea. Structura prezentată a paginii HTML este doar una din numeroasele aranjamente posibile
ale elementelor pe pagină. Astfel, elementele pot fi grupate în diferite moduri, din care unele sunt
prezentate în imaginea 9.2.
Imaginea 9.2 – Moduri diferite de aranjare a elementelor pe pagina HTML
Pentru aranjarea şi gruparea elementelor HTML sunt folosite diferite elemente HTML. Subiectul
acestei lecții vor fi tocmai elementele HTML, care permit crearea diferitelor zone ale documentului
HTML.
Elementul <div> element

Unul dintre cel mai frecvent utilizate elemente care sunt folosite pentru aranjare, este desigur,
elementul div. Este creat folosind tagul de deschidere <div> şi cel de închidere </div>. Următorul
exemplu ilustrează utilizarea acestui element.
 code
 source
1. <div>
2.
3. <h3>This is a heading</h3>
4.
5. <p>This is a paragraph.</p>
6.
7. </div>
8.
Elementul div cel mai adesea se foloseşte în combinație cu CSS pentru stilizarea grupurilor de
elemente şi pentru a influenţa plasarea lor pe pagină. Pentru a se utiliza elementele div în crearea
structurii de bază a paginii cu trei zone, se pot scrie următoarele:
 code
 source
1. <body>
2.
3.
4.
5. <div id="header">
6.
7. <h1>Site main heading</h1>

8.
9. </div>
10.
11.
12.
13. <div id="nav">
14.
15. Home<br>
16.
17. About Us<br>
18.
19. Contact
20.
21. </div>
22.
23.
24.
25. <div id="section">
26.
27. <h1>Home</h1>
28.
29. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget dolor
eget libero aliquam hendrerit. Aliquam hendrerit condimentum blandit. Maecenas
facilisis arcu vitae sem eleifend, eu volutpat libero rutrum. Morbi rhoncus mauris
eget laoreet placerat. Fusce vel ex sit amet justo blandit rutrum.</p>
30.
31. <p>Integer ultricies, sem eget volutpat commodo, massa justo iaculis sem, sit
amet tempor dui lorem tristique elit. Phasellus nec ornare augue, quis scelerisque
diam. Curabitur accumsan, lectus quis accumsan dictum, ligula sem fringilla enim, a
rhoncus justo urna eu odio.</p>
32.
33. </div>
34.
35.
36.
37. <div id="footer">
38.
39. Copyright © Link Group

40.
41. </div>
42.
43.
44.
45. </body>
46.
În codul prezentat, elementele div sunt folosite pentru crearea a patru secțiuni ale paginii. Prima
secțiune prezintă header, a doua navigarea, a treia conținutul principal și a patra footer. În browser,
codul prezentat produce rezultatul ca în imaginea 9.3.
Imaginea 9.3 – Afişarea paginii HTML în browser cu zone definite
Având în vedere că zonele sunt create folosind elementele div de fapt, invizibile, în imaginea 9.3 ele
sunt marcate cu culoarea albastră pentru a se vedea marginile lor. Aşa cum se poate vedea din
imaginea 9.3, browserele adaugă întodeauna câte o linie goală înainte și după elementul div.
HTML5 layout
Oamenilor le este foarte ușor să observe conţinutul vizual, să distingă diferenţa dintre diferite
conținuturi de pe pagină. Totuşi, aşa ceva nu se poate spune şi pentru mașini. Browserul, de exemplu,
nu poate distinge care este funcția unui anumit div. Dacă el a fost conceput ca un container pentru
conținutul antetului sau poate ca un container pentru conținutul footer-ului sau al sidebar-ului?
Versiunea limbajului HTML5, pe lângă elementul div de bază pentru aranjamentul elementelor de pe

pagină, introduce şi câteva elemente diferite ale containerului cu un înțeles semantic specific. Se
spune semantic, deoarece toate elementele menționate se comportă funcțional identic
cu elementul div descris mai înainte. Totuşi, elementele semantice ajută cititoarele de tip mașină ale
paginii să înțeleagă mai bine conținutul documentului HTML. Astfel, HTML5 introduce elemente noi
elementul HTML5 Descriere

<article> articol independent în cadrul documentului
<aside> conţinut pe lângă conţinutul principal – sidebar
<figure> conţinut care conţine ilustraţii, imagine sau diagramă
<figcaption> Titlu pentru elementul figure
<footer> Defineşte partea de jos (subsolul) a paginii sau unele din secţiunile ei
<header> Antetul paginii sau unele dintre secţiunile lui
<mark> Text marcat, evidenţiat
<nav> Container pentru linkuri de navigare
<progress> Indicator de finalizare a lucrului
<section> Secţiunea documentului
Tabelul 9.1 – Elemente semantice pentru crearea regiunilor în cadrul documentului HTML
Elementele enumerate în tabelul 9.1 descompun conţinutul unui document HTML5 în unităţi de

conţinut semnificative, astfel că structura unui document HTML poate fi ilustrată prin imaginea 9.4.
Imaginea 9.4 – Zonele documentului HTML create, folosind elementele semantice HTML5
Având în vedere că acum, diferitele elemente sunt utilizate pentru diferite secțiuni ale unei pagini
web, parsere de coduri HTML pot determina mai precis care este rolul diferitelor segmente ale
paginii web. Atunci când browserul întâlnește elementul header cu ocazia parsării paginii, el știe că
conținutul lui a fost conceput ca un conținut vizual al antetului documentului.
Pentru a se face pagina cu un aranjament identic și cu gruparea elementelor, ca în exemplul

precedent, când a fost utilizat elementul div, se poate scrie următorul markup:
 code
 source
1. <body>
2.
3.
4.
5. <header>
6.

8.
9. </header>
10.
11.
12.
13. <nav>
14.
15. Home<br>
16.
17. About Us<br>
18.
19. Contact
20.
21. </nav>
22.
23.
24.
25. <section>
26.
27. <h1>Home</h1>
28.
30.
31. <p>Integer ultricies, sem eget volutpat commodo, massa justo iaculis sem, sit
amet tempor dui lorem tristique elit. Phasellus nec ornare augue, quis scelerisque
diam. Curabitur accumsan, lectus quis accumsan dictum, ligula sem fringilla enim, a
rhoncus justo urna eu odio.</p>
32.
33. </section>
34.
35.
36.
37. <footer>
38.

40.
41. </footer>
42.
43.
44.
45. </body>
46.
În exemplu, în loc de elementul div sunt folosite elementele HTML5 cu o semnificație semantică
specială. În continuarea lecției, vor fi procesate separat diferite elemente HTML5 pentru
crearea layout-ului.
Elementele <header> şi <footer>

Majoritatea paginilor unui site au un conţinut identic, la început și la sfârșit. Astfel,
elementele header şi footer permit definirea conținutului care se va găsi în partea de sus și de jos a
paginii web. Este important de înțeles că aceste elemente nu-şi plasează automat conținutul în
partea de sus și cea de jos a paginii, ci doar marchează semantic zonele. Pentru a influența poziția
acestor secțiuni pe pagină, este necesar a se utiliza CSS, ce va fi subiectul modulului următor.
Codul pentru crearea antetului unei pagini web poate arăta aşa:
 code
 source
1. <header>
2.
3. <h1>Some fictional company Website</h1>

4.
5. </header>
6.
În cadrul elementului header, în general se pune logoul sau bannerul, iar în unele cazuri, se poate

pune aici şi meniul de navigare. Elementul header nu este limitat doar la utilizarea începutului paginii,
ci oferă modul semantic pentru declararea antetului oricărui câmp al documentului HTML. Astfel,
elementul header se poate utiliza pentru crearea antetului în interiorul elementului section
sau article, așa cum s-a procedat în imaginea 9.4. Utilizarea mai multor elemente header este
ilustrată în exemplul următor:
 code
 source
1. <body>
2.
3. <header>
4.
6.
7. </header>
8.
9. <article>
10.
11. <header>
12.
13. <h1>Our first new Article</h1>
14.
15. </header>
16.
17. </article>
18.
19. </body>
20.
La fel este şi cu elementul footer, astfel că nici el nu trebuie folosit exclusiv pentru crearea

secțiunii footer pe pagina web, ci şi pentru crearea footer a secțiunilor individuale.
Elementele header şi footer pot avea un conținut arbitrar.
Elementul <nav>
Pentru gruparea linkurilor de navigare, HTML5 are elementul semantic nav. În cadrul acestui element
pot fi găsite linkurile pentru a naviga pe site, dar și linkurile care conduc către alte site-uri. Meniul de
navigare se află în general în cadrul antetului web, deși aceasta nu este o regulă. Meniul de navigare
se poate găsi şi în cadrul sidebar-ului web al paginii. O pagină web conține adesea mai multe meniuri
de navigare, dintre care unul este meniul principal de navigare, iar restul sunt secundare. Următorul
exemplu ilustrează un meniu de navigare, care este creat folosind elementul de navigare nav, în
cadrul secțiunii header:
 code
 source
1. <body>
2.
3. <header>
4.
6.
7. <nav>
8.
9. <a href="Home.html">Document Structure</a>
10.
11. <a href="Blog.html">Writing Code</a>

12.
13. <a href="About.html">Styles</a>
14.
15. </nav>
16.
17. </header>
18.
19. </body>
20.
Elementele <article> şi <section>

Elementul article permite crearea unei secțiuni cu conținut, total independente. Această secțiune
trebuie să fie complet inteligibilă şi atunci când este scoasă din contextul paginii în care se află.
Astfel, se poate spune că elementul article este utilizat pentru gruparea conținutului afiliat, care este
inteligibil şi ca o parte total independentă. Un articol pe blog sau o ştire sunt candidații ideali pentru
conținutul elementului article.
Pe de altă parte, elementul section se foloseşte pentru gruparea unui conținut sau diferitor

funcționalităţi într-o singură unitate. Astfel, elementul section poate conține mai multe
elemente article diferite, dar se poate folosi și pentru divizarea conținutului elementului article pe
mai multe secțiuni.
Atunci când se utilizează secțiunea pentru gruparea mai multor elemente article diferite, codul

paginii poate fi următorul:
 code
 source
1. <section id="main">
2.
3. <article>
4.
5. 
6.
7. </article>
8.
9.
10.
11. <article>
12.
13. 
14.
15. </article>
16.
17.
18.
19. <article>
20.
21. 
22.
23. </article>
24.
25. </section>
26.
Elementul section se poate utiliza şi pentru separarea conţinutului unui element article în mai
multe secţiuni diferite. Codul care ilustrează aşa ceva este următorul:
 code
 source
1. <article>
2.
3. <section id="introduction">
4.
5. </section>
6.
7.
8.
9. <section id="content">
10.
11. </section>
12.
13.
14.
15. <section id="summary">

16.
17. </section>
18.
19. </article>
20.
Astfel, elementele section şi article sunt strâns legate, dar cu un sens semnatic total diferit.

Elementul article se foloseşte întodeauna pentru gruparea conţinutului afiliat, care, ca şi grup,
prezintă o unitate completă. Secțiunea reprezintă grupul de conținut care nu trebuie să aibă
semnificație ca o unitate, astfel că pentru elementul section se poate spune că are o utilizare foarte
generalizată și seamănă cel mai mult cu elementul div. Diferitele relaţii în care se pot afla
elementele article şi section sunt prezentate în imaginea 9.5.

Imaginea 9.5 – Diferitele relaţii în care se pot afla elementele section şi article
Elementul care se foloseşte pentru crearea antetului paginii este:
Acest element nu trebuie amestecat cu antetul documentului complet HTML, care se obţine cu elementul . Conţinutul elementului head nu este
vizibil pe pagină, în timp ce conţinutul elementului header este.
<header>
<footer>
<article>
<section>
Elementul <aside>
Elementul aside definește conținutul care nu aparţine conținutului principal al paginii, dar este
poziționat pe partea stângă sau dreaptă a conținutului principal al documentului. Totuşi, ca și
celelalte elemente semantice pentru crearea unui layout, nici aside nu este poziționat automat pe
una din paginile conținutului principal, ci servește numai pentru a marca conținutul care se va afla
aici folosind stilizarea CSS. Candidaţii ideali care pot folosi acest element sunt sidebar, notele,
anunțurile și altele asemenea.
Un exemplu de creare a elementului aside este următorul:

 code
 source
1. <section>
2.
3. <h1>Section 1</h1>
4.
5. <p>Some details about section 1</p>
6.
7. <aside>Did you know that 7/10 is 70%</aside>

8.
9. </section>
10.
Elementele <figure> şi <figcaption>

De multe ori poate apărea necesitatea de a pune un grafic într-un document HTML o ilustrație,
diagrame, un bloc de cod sau imagine și un astfel de element să fie cu referire, adică să fie menționat
în text. HTML5 are două elemente care fac posibilă realizarea acestor cerinţe. Acestea sunt
elementele figure şi figcaption. Astfel, un element article poate conține pe lângă text și o ilustrație
care ar fi creată ca în exemplul:
 code
 source
1. <article>
2.
3. …
4.
5. <figure>
6.
7. <img src="orange.jpg"/>
8.
9. <figcaption>Fig 1: A really juicy orange.</figcaption>

10.
11. </figure>
12.
13. …
14.
15. </article>
16.
Aşa cum se poate vedea în exemplu, imaginea este plasată în interiorul elementului figure. Sub
imagine este adăugat elementul figcaption, care definește numărul de ordine al imaginilor din
document și numele acesteia.
Elementul figcaption poate fi setat ca primul sau ultimul descendent al elementului figure.
Elementul <progress>
Deși nu se utilizează direct pentru a crea aranjamentul componentelor pe pagină, un alt element
HTML5 semantic este şi elementul progress.
Pentru a i se prezenta utilizatorului progresul executării unei lucrări, se poate utiliza elementul
menționat progress. Acest element poate fi utilizat în două forme diferite: determinat sau
nedeterminat.
Atunci când se cunoaște dinainte cantitatea de muncă care trebuie să fie făcută, putem vorbi despre
un anumit element progress, care este capabil să afișeze exact progresul lucrărilor. Un astfel de
element progress poate fi utilizat în situațiile când se efectuează upload-ul sau download-
ul fișierului, deoarece dimensiunea fișierului este cunoscută dinainte și în orice moment se poate şti
cantitatea de date care este transferată în rețea. Pentru a se crea elementul progress în care sunt clar
definite valoarea inițială și cea finală, se poate scrie următorul cod:
 code
 source
1. <p>We need 1000 dollars to get started. So far we have collected:</p>
2.
3. <span>0</span>
4.
5. <progress value="50" max="1000"></progress>

6.
7. <span>1000</span>
8.
În exemplul prezentat este definit elementul progress cu două atribute: value şi max.

Atributul value definește valoarea curentă pe care elementul progress o afişează, în timp ce atributul
max definește valoarea finală a barei progress. Cu cât valoarea atributului value creşte, cu
atât suprafața barei progress se umple tot mai mult cu culoarea verde. Valoarea atributului value în
general se actualizează dinamic, utilizând JavaScript, temă ce va fi obiectul lecțiilor care urmează.
Imaginea 9.6 – Afişarea unui element progress determinat
În situațiile în care nu este cunoscută durata unei munci, elementul progress poate fi utilizat într-o
formă nedeterminată. Acest lucru se realizează prin simpla îndepărtare a atributului value. Un
exemplu al unui astfel de element progress este următorul:
 code
 source
1. <p>Request is being processed. Please wait.</p>
2.
3. <progress max="5"></progress>
4.
Imaginea 9.7 – Afişarea unui element progress nedeterminat
Notă
Diferite browsere, respectiv compilatoare randează în moduri diferite elementul progress.

Crearea layout-ului folosind elementul table
Uneori, pentru aranjarea elementelor documentelor HTML s-a folosit elementul table, astfel că şi
astăzi se pot întâlni unele site-uri care folosesc o astfel de abordare. Totuşi, este important de
menţionat că elementul table este responsabil cu prezentarea datelor în tabele, şi nicicum un
element pentru crearearea layout-ului. Astfel că putem spune că elementul table este adesea utilizat
în mod abuziv în scopul aranjării elementelor HTML pe pagină. Pentru a realiza exemplul de la
începutul acestei lecții, folosind greşit elementul table, putem scrie următoarele:
 code
 source
1. <table>
2.
3. <tr>
4.
5. <td>
6.

8.
9. </td>
10.
11. </tr>
12.
13. <tr>
14.
15. <td>
16.
17. Home<br>
18.
19. About Us<br>

20.
21. Contact
22.
23. </td>
24.
25. </tr>
26.
27. <tr>
28.
29. <td>
30.
31. <h1>Home</h1>
32.
34.
35. <p>Integer ultricies, sem eget volutpat commodo, massa justo iaculis sem,
sit amet tempor dui lorem tristique elit. Phasellus nec ornare augue, quis
scelerisque diam. Curabitur accumsan, lectus quis accumsan dictum, ligula sem
fringilla enim, a rhoncus justo urna eu odio.</p>
36.
37. </td>
38.
39. </tr>
40.
41. <tr>
42.
43. <td>
44.
46.
47. </td>
48.
49. </tr>
50.
51. </table>
52.

HTML

Î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

HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Html

n documentele HTML, paragrafele se creează setând textul între tagul de deschidere <p> şi tagul de

Element Descriere Exemplu Efect

La fel ca şi elementul <br>, <hr>, nu are conţinut şi este un tag cu autoînchidere.

Un exemplu de utilizare a elementului <hr>.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

Codul prezentat produce efectul ca în imaginea 3.4.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

De data aceasta, efectul codului prezentat este ca în imaginea 3.6.

Imaginea 3.6 – Un paragraf cu blancurile salvate şi tranziţiile în rând nou

 Listele Ordered (ordonate) – elementele se marchează cu un anumit tip de elemente

 Listele Unordered (neordonate) – spre deosebire de listele ordonate, nu se potențează

 Listele Definition (definiţionale) – permit crearea definiției fiecărui element din listă

Lista ordonată începe cu tagul de deschidere <ol> şi se termină cu tagul de închidere </ol>.

Codul prezentat produce efectul ca în imaginea 3.11.

Listele neordonate sunt create foarte asemănător cu listele ordonate descrise anterior. Singura

Lista neordonată care se obţine astfel este prezentată în imaginea 3.12.

Imaginea 3.12 – Lista neordonată

Un exemplu al listei neordonate imbricate este următorul:

Imaginea 3.13 – Liste îmbricate

Imbricarea se poate realiza şi cu listele ordonate. Un exemplu este următorul:

Efectul este ca în imaginea 3.14.

Listele Definition (de definiţii)

5. <dd>a blackening or melanosis</dd>

9. <dd>a whitening or leucosis</dd>

13. <dd>a yellowing or xanthosis</dd>

17. <dd>a reddening, purpling, or iosis</dd>

Imaginea 3.16 – Structura tabelului HTML

Imaginea 3.17 – Tabelul HTML după parsare

De data aceasta, efectul codului prezentat va fi ca în imaginea 3.18.

Imaginea 3.18 – Tabelul HTML cu cadre

23. <td> </td>

25. <td> </td>

27. <td> </td>

29. <td> </td>

39. <td> </td>

41. <td> </td>

43. <td> </td>

45. <td> </td>

47. <td> </td>

Codul prezentat produce un efect ca în imaginea 3.19.

Imaginea 3.19 – Tabelul HTML cu rândul heading

Când este nevoie să se unească celulele pe orizontală, se foloseşte atributul colspan. Următorul

15. <td colspan="2">4</td>

Atunci când celulele trebuie să se unească pe verticală, se va folosi atributul rowspan. Următorul

13. <td>header cell</td>

23. <td>footer cell</td>

29. <td>footer cell</td>

39. <td>body cell</td>

45. <td>body cell</td>

Imaginea 3.15 – Lista de definiții

Utilizarea frecventă a listei de definiții este de a crea pagini FAQ, având în vedere că

Imaginea 3.11 – Lista ordonată

Linkurile sau hyperlinkurile (engl. hyperlinks) permit conectarea și trecerea de pe o pagină pe alta, cât

În limbajul HTML, linkurile se definesc folosind tagul <a>, ca în exemplul următor:

1. <a href="http://www.google.com/">Click to visit Google</a>

Structura linkului creat se poate prezenta cu imaginea 4.2.

Un link astfel creat pe pagină, va avea aspectul ca în imaginea 4.3.

Linkurile cu adresele linkurilor relative și absolute

1. <a href="contact-us.html">Contact info</a>

Exemplul 1: root –> john.doe.html

1. <a href="about-us/our-team/john-doe.html">John Doe</a>