Limbajul HTML

Capitolul al II-lea.
LIMBAJUL HTML
Capitolul
LIMBAJUL HTML
II
Cuprins
2.1. Noțiuni introductive ................................................................................................................22
2.2. Elemente de bază HTML..........................................................................................................26
Zona de antet..................................................................................................................................26
Zona de navigare ............................................................................................................................26
Zona de conținut.............................................................................................................................26
Secțiuni ...........................................................................................................................................26
Zona de subsol ................................................................................................................................26
Zone cu uz general ..........................................................................................................................26
Headings (titluri de secțiuni) ..........................................................................................................27
Paragrafe.........................................................................................................................................27
Liste .................................................................................................................................................28
2.3. Imagini .....................................................................................................................................29
2.4. Link-uri .....................................................................................................................................31
2.5. Exemple practice .....................................................................................................................33
Exemplul 1. Elemente de bază HTML (România turistică - fișierul HTML) .....................................33
Exemplul 2. Link-uri (Energia regenerabilă) ...................................................................................36
2.6. Elemente de formatare a textului ...........................................................................................38
2.7. Elemente de citare ..................................................................................................................39
2.8. Tabele ......................................................................................................................................40
2.9. Formulare ................................................................................................................................41
2.10. Elemente de grafică în html5 ..............................................................................................46
2.11. Elemente multimedia în html5 ............................................................................................46
2.12. Aplicații practice ..................................................................................................................48
2.13. HTML4 sau HTML5? .............................................................................................................51
21
Capitolul al II-lea. LIMBAJUL HTML
2.1. Noțiuni introductive

Așa cum am menționat în capitolul anterior, HTML (Hyper Text Markup Language) este un limbaj
de marcare a conținutului unui document web (pagină web) astfel încât un browser să-l înțeleagă și
să-l afișeze. Întreg conținutul unei pagini web este descris cu ajutorul elementelor acestui limbaj,
elemente formate din marcaje sau etichete (tags) și conținut de tip text sau media. Fiecare element
conține un marcaj de deschidere (de început) și un marcaj de închidere (de final). Marcajele sunt
încadrate între paranteze unghiulare astfel:
element HTML
conținut
<marcaj> Bine ați venit în România! </marcaj>
marcaj de marcaj de
deschidere închidere
Marcajele pot avea asociate atribute: <marcaj atribut="valoare"> Conținut </marcaj>.

Atribute sunt elemente care se adaugă la marcajele HTML și oferă informații suplimentare despre
acestea, sau le indică cum să funcționeze. Atributele sunt specifice anumitor marcaje HTML.
Există și marcaje HTML care nu au conținut, iar pentru acestea închiderea se poate marca astfel:
<marcaj />. De asemenea este recomandat ca marcajele HTML să fie scrise cu litere mici.
Atunci când un element este conținut de un alt element, acesta este considerat copilul acelui
element. Putem spune că elementul copil este încorporat (nested) în interiorul elementului părinte.
Prima pagină creată pentru un site web va purta obligatoriu numele index și va avea extensia .html.
Aceasta este pagina de pornire (home page) care este încărcată în mod automat de orice browser.
Mai jos avem structura generală unei pagini web folosind limbajul HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titlu pagină</title>
</head>
<body>
<header>Conținut zona de antet</header>
<nav>Conținut zona de navigare (meniuri)</nav>
<main>Conținut zona principală</main>
<footer>Conținut zona de subsol</footer>
</body>
</html>
Prima linie de cod <!DOCTYPE html> are rol de a indica browser-ului că are de a face cu un
document HTML5. Între marcajele html care descriu documentul HTML se includ elementele head
și body.
22
Cam toată informația care se găsește în elementul head nu apare efectiv în pagina web, dar această
informație are rol de a stabili anumite caracteristici paginii și ajută motoarele de căutare cu
informații despre site-ul nostru. În interiorul elementului head găsim elementele meta printre care
ce-l mai cunoscut este <meta charset="utf-8"> utilizat pentru stabilirea setului de caractere
utilizat în pagina web, în cazul nostru UTF-8 care recunoaște și diacriticele românești. Chiar dacă nu
folosiți în pagina web caractere „ciudate” codarea de caracter trebuie declarată obligatoriu
deoarece nespecificarea acestei codări poate duce la vulnerabilități de securitate, mai mult, această
linie trebuie să apară înaintea celorlalte în elementul head1.
Tot în zona head găsim și elementul title ce reprezintă titlul paginii web, titlu ce va fi afișat pe bara
de titlu sau pe un tab al browser-ului.
Figură 2.1. Elementul title
Asemenea marcajului title, marcajele meta sunt plasate în zona antetului paginii (head). Meta
datele sunt utilizate în principal de către motoarele de căutare și sunt informații despre informațiile
din pagina web. Există o serie de meta-câmpuri diferite, dar acestea sunt unele dintre cele mai
frecvent utilizate:
• viewport - un marcaj ce asigură vizibilitatea corectă a paginii web pe mai multe dispozitive.
• description - o descriere scurtă a site-ului.
• keywords - câteva cuvinte cheie reprezentative paginii web.
• author - autorul paginii web.
Exemplu de utilizare a elementelor meta:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Un site despre România">
<meta name="keywords" content="România, țară, frumoasă">
<meta name="author" content="român">
Marcajul meta viewport trebuie să aibă întotdeauna ca și conținut "width=device-width,

initial-scale=1.0" ca să fim siguri că pagina web se va afișa corect atât pe dispozitivele mobile
cât și pe cele tip desktop.
1
http://openmya.hacker.jp/hasegawa/security/utf7cs.html 23
Toată informația vizibilă în browser din pagina web (conținutul paginii web) este inclusă între
marcajele body. Aici putem găsi mai multe elemente semantice (cu sens și pentru programator și
pentru browser) cu rol în organizarea conținutului site-ului: header, nav, main, section, article,
aside, footer, figure, figcaption.
De asemenea, pentru organizarea conținutului, se pot folosi și elemente non-semantice cum ar fi:
div și span. Acestea nu oferă nici un indiciu asupra conținutului.
Pe lângă toate aceste elemente de structură a paginii web se pot include și comentarii foarte utile
în descrierea codului din pagina web: 
Tot conținutul paginii web va trebui să fie plasat în interiorul unei zone (container HTML) potrivite.
Aceste containere sunt organizate cu elemente HTML, așa cum se poate vedea în exemplul de mai
jos. Fiecare element reprezintă ceva pentru browser, ajutându-l să înțeleagă toate componentele
din pagină.
Antet: siglă, nume site, casetă căutare

header
<header></header>
nav Meniu <nav></nav>
Conținut principal Bara laterală

<main> meniu secundar,
conținut general
website, reclamă
body <aside>
main,
aside,
section, </main> </aside>
article
Conținut secundar Conținut secundar Conținut secundar

<section> <section> <section>
</section> </section> </section>
footer Subsol: meniu terțiar, copyright <footer></footer>
Figură 2.2. Structura generală a unei pagini web
24
Mai jos sunt prezentate câteva din cele mai utilizate elemente HTML:
<html> Element container pentru întreg codul HTML

<head> Informații despre site-ului web
<title> Titlul site-ului web (afișat pe bara de titlu a browser-ului)
<body> Element container pentru conținutul din pagină
<header> Element container pentru zona de antet a paginii web
<nav> Element container pentru meniuri. Acesta poate fi inclus și în containerul header
<main> Element container pentru conținutul principal
<section> Element container pentru împărțirea conținutului în secțiuni
<aside> Element container pentru o zonă laterală de conținut alături de containerul main
<footer> Element container pentru zona de subsol a paginii
<div>,<span> Elemente non-semantice pentru organizarea conținutului
<h1> … <h6> Titluri de secțiuni (h1 este cel mai important … h6 cel mai puțin important)
<hr> Linie orizontală cu rol în separarea conținutului
<p> Paragraf
<br> Sfârșit de linie (rând)
<ol> Listă ordonată (cu numărători)
<ul> Listă neordonată (cu marcatori)
<li> Element al unei liste (ordonate sau neordonate)
<img> Inserează o imagine
<a> Creează o legătură (link)
<strong> Definește un text ca fiind important, dar poate fi folosit și pentru a-l îngroșa <b>
<em> Accentuează un text, dar poate fi utilizat și pentru scrierea înclinată <i>
<blockquote> Utilizat la citarea textului. Alte elemente de citare sunt și <q>, <abbr>, <cite>
<table> Definește un tabel
<tr> Definește rândul unui table
<td>, <th> Definește o celulă a unui tabel, simplă sau de tip antet
<form> Creează un formular
25
2.2. Elemente de bază HTML

Zona de antet
Elementul <header> reprezintă zona de antet (din partea de sus) a oricărei pagini web și conține de
regulă numele site-ului, logo și eventual o zonă de navigare (meniuri).
Zona de navigare
Pentru a putea parcurge paginile unui site web și conținutul acestuia avem nevoie de o modalitate
de deplasare prin site. Pentru asta se utilizează elementul <nav>. Această zonă de navigare numită
și zonă de meniuri poate fi inclusă în containerul antet sau poate reprezenta o zonă de sine
stătătoare în pagină.
Zona de conținut
Secțiunea principală a site-ului nostru include cea mai mare parte a informațiilor. Vom include tot
conținutul util în elementul <main>.
Secțiuni
Conținutul unei pagini web poate fi organizat și împărțit în mai multe secțiuni. O secțiune este o
componentă independentă a unui site web care conține informații și are, de asemenea, propriul său
element <section>.
Zona de subsol
După închiderea zonei principale de conținut se adaugă zona de subsol a paginii web marcată prin
elementul <footer>. În această zonă putem include un meniu terțiar, informații de copyright etc.
În exemplul de mai jos se poate observa împărțirea conținutului din pagină <body> în containere
potrivite utilizând elemente HTML:
<body>
<header> </header>
<nav> </nav>
<main>
<section> </section>
</main>
<footer> </footer>
</body>
Zone cu uz general
Pe lângă zonele cu rol specific descrise mai sus, putem utiliza pentru organizarea conținutului și
elementele <div> și <span>.
26
Headings (titluri de secțiuni)

Pentru a organiza conținutul din pagină se folosesc elementele de tip heading (titlu de secțiune).
Există șase astfel de elemente, de la h1 care este cel mai important titlu până la h6 este cel mai puțin
important titlu. În HTML pentru elementele de tip heading se folosesc următoarele marcaje: <h1>,
<h2>, <h3>, <h4>, <h5> și <h6>.
În exemplu nostru titlul „Bine ați venit în România” reprezintă numele site-ului și are importanța cea
mai mare, din acest motiv se încadrează între marcajele elementului <h1>.
<header>
<h1>Bine ați venit în România!</h1>
</header>
Figură 2.3.
Paragrafe
Textul din pagina web este împărțit în paragrafe, asemenea cu textul dintr-un document.
Paragrafele <p> sunt separate între ele printr-un spațiu predefinit. În limbajul HTML nu contează
dacă scriem textul paragrafului pe unul sau mai multe rânduri, el va fi afișat continuu în browser.
Pentru a împărți textul unui paragraf pe mai multe rânduri se folosește marcajul <br>.
<p>Țara noastră România.</p>
<p>Țara noastră
România.</p> 
<p>Țara noastră<br>România.</p> 
Figură 2.4. Paragrafe
27
Liste
În HTML există două tipuri de liste: ordonate (cu numerotare) și neordonate (cu marcatori). Listele
ordonate sunt definite de elementul <ol>, iar cele neordonate de <ul>. Elementele unei liste,
indiferent că este ordonată sau neordonată, sunt descrise cu ajutorul elementului <li>.
Exemplu de listă ordonată:
<ol>
<li>Stațiuni de la Marea Neagră</li>
<li>Delta Dunării</li>
</ol>
1. Stațiuni de la Marea Neagră

2. Delta Dunării
Figură 2.5. Listă ordonată

Exemplu de listă neordonată:
<ul>
<li>Stațiuni de la Marea Neagră</li>
<li>Delta Dunării</li>
</ul>
• Stațiuni de la Marea Neagră

• Delta Dunării
Figură 2.6. Listă neordonată

Atributul type (sau proprietatea CSS list-style-type) sunt utilizate pentru a defini tipul
elementului de listă. O listă ordonată poate avea următoarele valori pentru atributul type: 1
(decimal), A (upper-alpha), a (lower-alpha), I (upper-roman), i (lower-roman), iar o listă neordonată:
disc, circle, square. Dacă nu se dorește afișarea marcatorilor se folosește valoarea none.
Dacă doriți să începeți contorizarea listei de la un număr specificat, se poate utiliza atributul start.
<ol style="list-style-type: upper-roman" start="3">
III. Stațiuni de la Marea Neagră

IV. Delta Dunării
Figură 2.7. Listă ordonată cu atribute
28
2.3. Imagini
Imaginile pot îmbunătăți designul și aspectul unei pagini web. Pentru a include o imagine într-o
pagină web aceasta trebuie adusă și inclusă în folderul site-ului, recomandat într-un subfolder
dedicat.
Imaginile sunt adăugate cu ajutorul elementului <img>. În interiorul acestui marcaj trebuie
specificat obligatoriu, folosind atribute, locația imaginii src și un text alternativ alt (cu rol în
descrierea imaginii pentru cazul în care imaginea nu se poate încărca în pagină sau pentru motoarele
de căutare), astfel:
<img src="imagini/romania.png" alt="Romania turistica">
De remarcat că elementul <img> este un marcaj singular, adică marcajul de deschidere este în
același timp și marcaj de închidere.
Alte două atribute importante pentru elementul <img> sunt width (lățime) și height (înălțime) care
au rolul de a specifica dimensiunea imaginii, dimensiune măsurată în pixeli. Se recomandă totuși
specificarea lățimii și înălțimii unei imagini cu ajutorul atributului style pentru a prevenii
modificarea dimensiunilor din fișierul css:
<img src="imagini/romania.png" alt="Romania turistica"
style="width:350px; height:250px;">
Utilizați proprietatea CSS float pentru a poziționa imaginea spre dreapta sau spre stânga unui text:
<p><img src="imagini/munte.png" alt="Romania la munte" style=" float:left;
width:100px; height:100px;"> Despre România turistică la munte</p><br>
<p><img src="imagini/mare.png" alt="Romania la mare" style=" float:right;
width:100px; height:100px;"> Despre România turistică la mare</p>
Figură 2.8. Alinierea imaginilor la stânga sau la dreapta paragrafelor
29
În HTML5 s-a introdus elementul <picture> pentru a adăuga o mai mare flexibilitate atunci când
se specifică resursele imaginii. Elementul <picture> conține un număr de elemente sursă, fiecare
făcând referire la diferite surse de imagini. În acest fel, browser-ul poate alege imaginea care se
potrivește cel mai bine vizualizării și / sau dispozitivului curent. Fiecare element <source> are
atribute care descriu momentul în care respectiva imagine se potrivește cel mai bine. Browser-ul va
utiliza primul element <source> cu valori de atribute potrivite și va ignora toate elementele
<source> care urmează.
<picture>
<source media="(min-width: 650px)" srcset="romania_mare.jpg">
<source media="(min-width: 465px)" srcset="romania_medie.jpg">
<img src="romania_mica.jpg" alt="romania" style="width:auto;">
</picture>
Marcajul <map> definește o imagine-hartă. O imagine-hartă este o imagine cu zone care pot fi
apelate pentru a accesa alte pagini web.
DE COMPLETAT
30
2.4. Link-uri
Link-urile sunt elemente din pagina web (text, imagini) care, prin acționarea cu un click de maus, ne
fac legătura către alte elemente din pagină, către alte pagini din site, sau către site-uri externe.
Pentru marcarea unui link se utilizează elementul ancoră <a>. Marcajul de deschidere al link-ului
conține obligatoriu atributul href care include adresa URL a pagini/site-ului web către care dorim
să facem redirecționarea utilizatorului: <a href="URL">text sau imagine link</a>.
Dacă nu se dorește redirecționarea utilizatorului atunci se folosește simbolul # ca valoare pentru
atributul href.
<ul>
<li>
<a href="#">Stațiuni de la Marea Neagră</a>
</li>
<li>
<a href="https://www.info-delta.ro/">Delta Dunării</a>
</li>
</ul>
Notă: Fără un slash „/” la sfârșitul adresei web, multe servere vor adăuga în mod automat un slash
la finalul adresei și apoi vor crea o nouă solicitare, ceea ce duce la un timp suplimentar de încărcare.
În exemplul de mai sus s-a utilizat un URL absolut (adresa web întreagă). Un link local (către o altă
pagină/resursă a site-ului) este specificat cu un URL relativ:
<a href="delta-dunarii.html">Delta Dunării</a> , dacă pagina țintă este în același folder cu
pagina curentă sau,
<a href="../delta-dunarii.html">Delta Dunării</a> , dacă pagina țintă este cu un folder
mai sus decât pagina curentă sau,
<a href="la-mare/delta-dunarii.html">Delta Dunării</a>, dacă pagina țintă este într-un
subfolder față de pagina curentă.
31
index.html
<a href="delta-dunarii.html">Delta Dunării</a>

<a href="la-mare/delta-dunarii.html">Delta Dunării</a>
Website delta-dunarii.html
la-mare delta-dunarii.html
<a href="../index.html">Acasă</a>
<a href="../delta-dunarii.html">Delta Dunării</a>
Figură 2.9. Link-uri locale (URL relativ)

Atributul target specifică unde se va deschide pagina țintă. Acest atribut poate avea una din
următoarele valori:
• _blank – Deschide pagina țintă într-un nou tab
• _self - Deschide pagina țintă în aceeași fereastră/tab (opțiunea implicită)
• _parent - Deschide pagina țintă în frame-ul părinte
În exemplul de mai jos pagina țintă va fi deschisă într-un nou tab al browser-ului:
<a href="https://www.info-delta.ro/" target="_blank">Delta Dunării</a>
Este posibil și să se folosească imagini pentru realizarea link-urilor:
<a href="delta-dunarii.html">
<img src="imagini/delta-dunarii.png" alt="Delta Dunării">
</a>
Semnele (bookmark) HTML sunt utilizate pentru a permite utilizatorilor să sară la anumite părți ale
unei pagini Web. Acestea sunt utile în paginile de tip Landing page, foarte lungi.
Primul pas constă în crearea unui element bookmark cu ajutorul atributului id:
<h2 id="delta-dunarii">Delta Dunării</h2> ,
apoi se adaugă un link către elementul bookmark din aceeași pagină

<a href="#delta-dunarii">Delta Dunării</a> ,
sau se poate accesa un element bookmark din altă pagină

<a href="la-mare.html#delta-dunarii">Delta Dunării</a> .
32
2.5. Exemple practice

Exemplul 1. Elemente de bază HTML (România turistică - fișierul HTML)
Vom lua un exemplu de pagină web pe care o vom realiza pas cu pas pe baza cunoștințelor
acumulate până acum. În imaginea de mai jos avem forma finală a paginii web pentru a vedea unde
trebuie să ajungem, conținutul fiind împărțit în elemente HTML și formatat utilizând CSS.
Romania turistica
heading
header
imagine
imagine
secțiune
div
body heading
section (titlu de secțiune)
listă cu două
elemente și link-uri
main
section
section
footer
Figură 2.10. Împărțirea conținutului paginii web în zone (containere)

Pagina web folosită ca exemplu scrisă utilizând cod HTML:
<!DOCTYPE html>
<html lang="ro_RO">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Un site despre România" />
<meta name="keywords" content="România, țară, frumoasă" />
<meta name="author" content="profu" />
<title>Romania turistică</title>
</head>
33
<body>
<header>
<h1>Bine ați venit în România!</h1>
<img src="imagini/romania.png" alt="Romania turistica"
style="width:350px; height:250px;" />
</header>
<main>
<section>
<img src="imagini/mare.png" alt="Imagine de la mare" />
<div>
<h2>La mare</h2>
<ul>
<li><a href="#">Stațiuni de la Marea Neagră</a></li>
<li><a href="https://www.info-delta.ro/">Delta Dunării</a></li>
</ul>
</div>
</section>
<section>
<img src="imagini/munte.png" alt="Imagine de la munte" />
<div>
<h2>La munte</h2>
<ul>
<li><a href="#">Stațiuni montane</a></li>
<li><a href="#">Agroturism</a></li>
</ul>
</div>
</section>
<section>
<img src="imagini/sovata.png" alt="Imagine din stațiuni" />
<div>
<h2>Stațiuni balneare</h2>
<ul>
<li><a href="#">Afecțiuni tratate</a></li>
<li><a href="#">Harta stațiunilor balneare</a></li>
</ul>
</div>
</section>
</main>
<footer>

<p>Țara noastră România.</p>
</footer>
</body>
</html>
34
Figură 2.11. Pagina web văzută în browser – doar conținutul HTML
35
Exemplul 2. Link-uri (Energia regenerabilă)

Creați un site web respectând structura de mai jos. Pe fiecare pagină să apară o siglă cu link către
pagina principală, un titlu de secțiune (heading) cu numele paginii și un sistem de link-uri între
paginile site-ului astfel încât să se poată ajunge din orice pagină a site-ului la oricare altă pagină.
Energia_regenerabila
index.html resurse.html Resurse
energia_eoliana.html energia_solara.html hidroenergia.html
Exemplu de pagină a site-ului:
36
Codul HTML al paginilor
37
2.6. Elemente de formatare a textului

Elementele de formatare au fost concepute pentru a afișa tipuri speciale de text:
• <b> - text îngroșat (aldin)
• <strong> - text important
• <i> - text înclinat (cursiv)
• <em> - text accentuat
• <mark> - text evidențiat (marcat)
• <small> - text mai mic
• <del> - text șters (tăiat cu o linie)
• <ins> - text inserat (subliniat)
• <sub> - text indiciat
• <sup> - text exponent
<p>- text <b>îngroșat (aldin)</b></p>
<p>- text <strong>important</strong></p>
<p>- text <i>înclinat (cursiv)</i></p>
<p>- text <em>accentuat</em></p>
<p>- text <mark>evidenţiat (marcat)</mark></p>
<p>- text <small>mai mic</small></p>
<p>- text <del>șters (tăiat cu o linie)</del></p>
<p>- text <ins>inserat (subliniat)</ins></p>
<p>- text <sub>indiciat</sub></p>
<p>- text <sup>exponent</sup></p>
Figură 2.12. Formatări speciale ale textului
38
2.7. Elemente de citare

Elementul <blockquote> definește o secțiune de text ce este citată dintr-o altă sursă. De obicei
browser-ele indentează textul citat.
Elementul <q> definește un citat scurt, marcat de ghilimele.
Elementul <abbr> definește o abreviere sau un acronim. Menționarea abrevierilor este utilă pentru
browsere, pentru sistemele de traducere, dar și pentru motoarele de căutare.
Elementul <cite> definește numele unei opere. Aceste elemente sunt marcate ca un text cursiv.
<p>Acesta este un citat din site-ul Wikipedia:</p>
<blockquote cite="https://ro.wikipedia.org/wiki/Romania"><b>România</b> este un
stat situat in sud-estul Europei Centrale, pe cursul inferior al Dunării, la
nord de peninsula Balcanică și la ţărmul nord-vestic al Mării Negre. Pe
teritoriul ei este situată aproape toată suprafaţa Deltei Dunării și partea
sudică și centrală a Munţilor Carpaţi.</blockquote>
<p>Numele de <q>România</q> provine de la <q>român</q>, cuvânt derivat din
latinescul <em>romanus</em> care semnifică <em>cetățean al Romei</em>.</p>
<p>Din 2004 România este membru <abbr title="Organizația Tratatului
Atlanticului de Nord">NATO</abbr>, iar din 2007 a devenit membră a Uniunii
Europene.</p>
<p>Nicolae Grigorescu - <cite>Car cu boi</cite> (1899) - Galeria Națională,
București</p>
Figură 2.13. Elemente de citare
39
2.8. Tabele
În HTML un tabel este definit utilizând marcajul <table>. Fiecare rând din tabel este definit cu
marcajul <tr>, iar antetul tabelului este definit cu marcajul <th>. Implicit, antetul tabelului este
aldin (îngroșat) și centrat. Celula unui tabel este definită cu marcajul <td>.
Elementele <td> sunt containerele de date dintr-un tabel și pot conține tot tipul de informații: text,
imagini, alte tabele etc.
<table style="width:100%">
<tr>
<th>Nume</th>
<th>Prenume</th>
<th>Varsta</th>
</tr>
<tr>
<td>Popescu</td>
<td>Mihai</td>
<td>19</td>
</tr>
<tr>
<td>Constantin</td>
<td>Elena</td>
<td>25</td>
</tr>
</table>
Dacă se dorește o identificare mai clară a celor trei zone ale unui tabel: antet, conținut, subsol, se
pot utiliza următoarele marcaje: thead, tbody, tfoot.
40
2.9. Formulare
Elementul HTML <form>
Elementul HTML <form> este utilizat pentru a crea un formular HTML în care utilizatorul poate
introduce date.
<form>

</form>
Elementul <form> reprezintă un container pentru diferite tipuri de elemente de intrare, cum ar fi:
câmpuri de text, casete de selectare, butoane de opțiuni (radio), butoane de trimitere (submit) etc.
Elementul <input>
Elementul HTML <input> este cel mai utilizat element de formular.
Un element <input> poate fi afișat în mai multe moduri, în funcție de atributul type.
Câmpurile de tip <input> au câteva atribute care pot fi folosite în funcție de tipul inputului:
• type - determina tipul câmpului.
• name - atribuie un nume câmpului pentru a putea face referire la el mai târziu; dacă
atributul nume este omis, valoarea câmpului <input> nu va fi trimisă deloc.
• size - Specifică lățimea (în caractere) a unui câmp de intrare, implicit 20 de caractere.
• value - Specifică valoarea implicită pentru un câmp de intrare
• placeholder - specifică un scurt indiciu care descrie valoarea așteptată a unui câmp de
intrare
• checked - specifică faptul că un câmp de intrare ar trebui să fie preselectat atunci când
pagina se încarcă (pentru type="checkbox" sau type="radio")
• readonly - specifică faptul că un câmp de intrare nu poate fi modificat
• disabled - specifică faptul că un câmp de intrare ar trebui să fie dezactivat
• required - specifică faptul că este obligatoriu un câmp de intrare (trebuie completat)
• min - specifică valoarea minimă pentru un câmp de intrare
• max - specifică valoarea maximă pentru un câmp de intrare
• step - specifică pasul de incrementare/decrementare pentru un câmp de intrare
• maxlength - specifică numărul maxim de caractere pentru un câmp de intrare
Elementul <label>
Acest element se utilizează pentru a determina eticheta elementului de intrare. Este întâlnit în cazul
câmpurilor de tip text.
Elementul <label> este util pentru utilizatorii screen-reader, deoarece screen-reader-ul va citi cu
voce tare eticheta atunci când elementul de intrare obține focusul.
41
Elementul <text>
<input type="text"> definește un câmp de introducere a textului pe o singură linie:
<form>
<label for="nume">Nume:</label><br>
<input type="text" id="nume" name="nume"><br>
<label for="prenume">Prenume:</label><br>
<input type="text" id="prenume" name="prenume"><br>
</form>
Valoarea atributului for al etichetei <label> ar trebui să fie identică cu valoarea atributului id al
elementului <input> pentru a le asocia împreună.
Elementul <number>
<input type="number"> definește un câmp de introducere a valorilor de tip numeric.
<form>
<label for="varsta">Vârsta (între 10 și 19):</label><br>
<input type="number" id="varsta" name="varsta" min="10" max="19"><br>
</form>
Butoane de opțiuni (Radio Buttons)

Butoanele Radio sunt foarte populare, utile și ușor de folosit. Acestea permit utilizatorului să aleagă
o singură opțiune din mai multe posibile. Atributele care ar trebui cunoscute sunt următoarele.
• value - specifica ceea ce va fi trimis in cazul in care un utilizator selectează un anume
buton. Doar o singura valoare va fi trimisă.
• name - stabilește cărui set de butoane aparține butonul selectat.
<form>
<input type="radio" id="elev" name="statut" value="elev">
<label for="elev">Elev/Student</label><br>
<input type="radio" id="angajat" name="statut" value="angajat">
<label for="angajat">Angajat</label><br>
<input type="radio" id="antreprenor" name="statut" value="antreprenor">
<label for="antreprenor">Antreprenor</label><br>
<input type="radio" id="somer" name="statut" value="somer">
<label for="somer">Șomer</label><br>
</form>
Butoane comutator (Checkbox)

Cu ajutorul CheckBox-urilor utilizatorul are posibilitatea de a alege unul, doua sau mai multe
variante de răspuns. Atributele name și value se folosesc la fel ca și pentru butoanele radio.
<form>
<input type="checkbox" id="comp1" name="comp1" value="office">
<label for="comp1"> Birotică - Microsoft Office</label><br>
<input type="checkbox" id="comp2" name="comp2" value="webdesign">
<label for="comp2"> Web design - HTML și CSS</label><br>
42
<input type="checkbox" id="comp3" name="comp3" value="c++" checked>
<label for="comp3"> Programare C++</label><br>
<input type="checkbox" id="comp4" name="comp4" value="python">
<label for="comp4"> Programare Python</label><br>
</form>
Butoanele Trimitere (Submit) și Reset

<input type="submit"> definește un buton pentru trimiterea datelor formularului către un
gestionar de formulare.
<input type="reset"> definește un buton pentru golirea datelor formularului.
In general, butonul de "trimitere" ar trebuii sa fie ultimul si sa aibe atributul name definit ca
"Trimite", "Send", "Submit" sau ceva asemanator. Acest nume va fi numele butonului.
Va trebui de asemenea sa specificam o destinatie a datelor introduse in formular la fel ca si modul
de transfer. Aceasta se poate face adaugand urmatoarele atribute formularului:
• method - specifică metoda HTTP care trebuie utilizată la trimiterea datelor formularului.
Poate lua valoare GET (datele formularului pot fi trimise ca variabile URL) sau POST (trimite
formularul cu informatia introdusa fara sa afiseze detalli utilizatorului). Utilizați întotdeauna
POST dacă datele formularului conțin informații sensibile sau personale!
• action - Acesta va fi folosit pentru a specifica URL-ul unde va fi trimisa informatia.
• autocomplete - specifică dacă un formular ar trebui să aibă completarea automată activată
(on) sau dezactivată (off).
• target – specifică unde se afișează răspunsul primit după trimiterea formularului.
<form method="POST" action="ValidareDate.php">
<label for="nume">Numele:</label><br>
<label for="prenume">Prenumele:</label><br>
<input type="text" id="prenume" name="prenume">
<input type="submit" name="Trimite" value="Submit">

<input type="reset">
</form>
sau
<form action="mailto:contact@website.ro" method="POST" name="FormularEmail">
<label for="nume">Numele:</label><br>
<label for="prenume">Prenumele:</label><br>
<input type="text" id="prenume" name="prenume">
<input type="submit" name="Trimite" value="Submit">

<input type="reset">
</form>
43
Elementul <select>
Un alt element al unui formular este lista derulantă "dropdown". Acesta va fi afisat ca si un camp,
care va afisa o lista atunci cand este executat un clik asupra lui.
Atributele care ar trebuii cunoscute sunt urmatoarele:
• size – specifică numărul de opțiuni vizibile dintr-o listă derulantă
• multiple – se utilizează pentru a permite selectarea a mai multor valori
<form>
<label for=" music">Alegeți muzica preferată:</label>
<select id="music" name="music">
<option value="rock" selected>Rock</option>
<option value="jazz">Jazz</option>
<option value="clasica">Clasică</option>
<option value="alternativa">Alternativă</option>
<option value="techno">Techno</option>
<option value="hiphop">Hip Hop</option>
<option value="populara">Populară</option>
</select>
</form>
Elementul < textarea>

Elementul <textarea> definește un câmp de intrare cu mai multe linii (o zonă de text):
<textarea name="comentarii" rows="10" cols="30">
Zonă pentru comentarii.
</textarea>
De asemenea, se poate defini dimensiunea zonei de text folosind CSS:

<textarea name="comentarii" style="width:300px; height:200px;" placeholder="Zonă
pentru comentarii."></textarea>
Elementele < fieldset> și < legend>

Elementul <fieldset> ajuta la gruparea datelor comune dintr-un formular, iar cu ajutorul tagului
<legend> se poate adauga un titlu.
<form>
<fieldset>
<legend>Date personale</legend>
<label for="nume">Nume:</label><br>
<label for="prenume">Prenume:</label><br>
<input type="text" id="prenume" name="prenume"><br>
</fieldset>
</form>
44
Elementul de tip <password>

<input type="password" id="parola" name="parola"> definește un câmp de tip parolă
(caracterele sunt mascate de caractere asterix).
Elementul de tip <color>

<input type="color" id="culoare" name="culoare"> este utilizat pentru câmpurile de intrare
care ar trebui să conțină o culoare.
Elementul de tip <date>

<input type="date" id="data" name="data"> este utilizat pentru câmpurile de intrare care ar
trebui să conțină o dată.
De asemenea, se pot utiliza atributele min și max pentru a adăuga restricții la date:
<label for="data">Introduceți o dată din anul 2000:</label>
<input type="date" id="data" name="data" min="2000-01-01" max="2000-12-31">
Elementul de tip <email>

<input type="email" id="email" name="email"> este utilizat pentru câmpurile de intrare care
ar trebui să conțină o adresă de e-mail.
Elementul de tip <file>

<input type="file" id="fisier" name="fisier"> definește un câmp de selectare a fișierului
și un buton „Browse” pentru încărcarea fișierelor.
Elementul de tip <hidden>

<input type="hidden" id="IDArticol" name=" IDArticol " value="1234"> definește un
câmp de intrare ascuns (nu este vizibil pentru un utilizator).
Elementul de tip <range>

<input type="range"> definește un control pentru introducerea unui număr a cărui valoare
exactă nu este importantă (cum ar fi un control glisant). Intervalul implicit este de la 0 la 100. Cu
toate acestea, puteți seta restricții cu privire la numerele acceptate cu atributele min, max și step:
<form>
<label for="volum">Volum (între 0 și 50):</label><br>
<input type="range" id="volum" name="volum" min="0" max="50"><br>
</form>
45
2.10. Elemente de grafică în html5

Elementul HTML <canvas> este utilizat pentru a desena grafică pe o pagină web. Elementul
<canvas> este doar un container pentru grafică. Trebuie să utilizați JavaScript pentru a desena
efectiv grafica.
<canvas id="PanzaMea" width="200" height="100" style="border:1px solid #000000;">
</canvas>
După crearea zonei de pânză dreptunghiulară, trebuie să adăugați cod JavaScript pentru a face
desenul. Vom face acest lucru în capitolul JavaScript.
Elementul HTML <svg> este un container pentru grafică SVG (Scalable Vector Graphics). SVG
definește grafică vectorială în format XML.
Cerc SVG:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
Dreptunghi SVG:
<rect width="400" height="100" style="fill:rgb(0,0,255); stroke-width:10;
stroke:rgb(0,0,0)" />
</svg>
Dreptunghi cu colțuri rotunjite SVG:

<rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;
stroke:black; stroke-width:5; opacity:0.5" />
</svg>
2.11. Elemente multimedia în html5

Pe web multimedia reprezintă sunet, muzică, videoclipuri, filme și animații.
Elementul <video>
Standardul HTML acceptă numai următoarele formate video MP4, WebM și Ogg.
Pentru a afișa un videoclip în HTML, se utilizează elementul <video>:
<video width="320" height="240" controls>
<source src="film.mp4" type="video/mp4">
<source src="film.webm" type="video/webm">
<source src="film.ogg" type="video/ogg">
Browserul nu suportă elemente video.
</video>
46
Conversia videoclipurilor în diferite formate poate fi dificilă și necesită mult timp. O soluție mai
ușoară este de a permite YouTube să redea videoclipurile din pagina ta web.
<iframe width="420" height="315"

src="https://www.youtube.com/embed/videoID">
</iframe>
Elementul <audio>
Standardul HTML acceptă numai următoarele formate audio MP3, WAV, and Ogg.
Pentru a afișa un format audio în HTML, se utilizează elementul <audio>:
<audio controls>
<source src="melodie.ogg" type="audio/ogg">
<source src="melodie.mp3" type="audio/mpeg">
Browserul nu suportă elemente audio.
</audio>
47
2.12. Aplicații practice

Aplicație 1. Creați, utilizând un editor de cod, structura de bază a unei pagini web.
Pe această structură rezolvați următoarele cerințe:
1. Schimbați titlul paginii web în Delta Dunării .
2. Adăugați în interiorul elementului body un heading <h1> având conținutul Fauna
Rezervației Biosferei Delta Dunării .
3. Sub acesta adăugați trei heading-uri <h2> având conținuturile Fauna piscicolă , Fauna
ornitologică , respectiv Mamifere .
4. Adăugați după heading-ul <h1> de la începutul paginii web o imagine reprezentativă a Deltei
Dunării aliniată la dreapta, prelucrată astfel încât să aibă dimensiunea de 100x100 px.
5. Creați un link pe imaginea inserată anterior către pagina https://romaniasalbatica.ro/
6. Adăugați imediat după imagine un paragraf având următorul conținut: Datorită
condițiilor prielnice create de varietatea mare de habitate terestre și
acvatice, precum și proximitatea câtorva subzone ale regiunii faunistice
palearctice (ex. mediteraneeană, pontică, eur-asiatică), fauna RBDD este
reprezentată de 4.029 de specii (3.477 nevertebrate și 552 vertebrate) .
7. Adăugați după primul heading <h2> două heading-uri <h3> având numele Specii de apă
dulce , respectiv Specii marine și câte un paragraf cu următoarele conținuturi:
Una din principalele bogatii faunistice a Deltei Dunarii este pestele,
reprezentat prin 133 specii din care 31 de specii ce traiesc atat in apele
dulci cat si in cele sarate si aici mentionam morunul, nisetrul, pastruga,
scrumbia de Dunare, cambula.
44 de specii traiesc numai in ape dulci, salaul, carasul, stiuca, linul,
somnul.
58 de specii traiesc numai in apele saline din Marea Neagra si aici
mentionam calcanul, sprotul, hamsia, stavridul.
8. Sub al doilea heading <h2> ce are conținutul Fauna ornitologică , adăugați un paragraf
Cele 341 specii de păsări includ: și o listă neordonată având următoarele elemente:
• cea mai mare parte a populației EU de pelican comun și pelican creț;
• 60% din populația mondială de cormoran mic;
• 50% din populația mondială de gâscă cu gât roșu (pe perioada iernii).
9. Sub al treilea heading <h2> ce are conținutul Mamiferele , adăugați o listă ordonată,
marcată cu litere ce pornește de la litera e) și are următorul conținut:
e. vidra; f. nurca europeană; g. bizamul; h. mistrețul.
10. Încadrați fiecare <h2> și elementele subordonate acestora în câte un element <div> .
11. Creați un tabel cu 2 rânduri și 4 coloane ce vor conține imagini (150x150px) preluate de pe
pagina web: https://romaniasalbatica.ro/ro/rezervatie-biosfera/delta-dunarii.
12. La finalul zonei body adăugați o secțiune <footer> cu următorul conținut încadrat într-un
element <p> și marcați link-ul corespunzător să se deschidă într-un tab nou:
Sursă informație: https://www.ddbra.ro/rezervatia/delta-dunarii/biodiversitate
48
Aplicație 2. Realizați, utilizând elementele limbajului HTML, pagina web de mai jos. Sigla și
informațiile solicitate le găsiți pe site-ul https://colegiul-cantacuzino.ro/. Cele 4 elemente de meniu
trebuie să indice către cele 4 subtitluri de secțiuni h2.
49
Aplicație 3. Realizați un formular …
50
2.13. HTML4 sau HTML5?

Când încep crearea unui site web ce versiune de HTML să aleg? Pot crea site-uri web cu HTML5 chiar
dacă browser-ele mai vechi nu-l suportă? HTML5 nu este un mare tot unitar ci o colecție de
caracteristici individuale. Prin urmare, nu puteți detecta suportul pentru HTML5, deoarece nu are
nici un sens. Însă puteți descoperi suport pentru caracteristici individuale, cum ar fi elementul
canvas, clipurile video sau geo-localizarea. În Anexa 1 găsiți un exemplu de pagină web ce permite
detectarea suportului pentru câteva caracteristici HTML5 pe baza bibliotecii Modernizr (bibliotecă
javascript open source licențiată de MIT).
51
În continuare se prezintă, în paralel, o pagină web scrisă în HTML4 (mai exact în XHTML) și în HTML5.
XHTML HTML5
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 1 <!DOCTYPE html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ro" 2 <html lang="ro-RO">
lang="ro">
3 <head> 3 <head>
4 <meta http-equiv="Content-Type" content="text/html 4 <meta charset="utf-8">
charset=utf-8" />
5 <title> Blogul meu de călătorie </title> 5 <title> Blogul meu de călătorie </title>
6 <link rel="stylesheet" type="text/css" 6 <link rel="stylesheet" type="text/css"
href="stiluri.css" /> href="stiluri.css">
7 </head> 7 </head>
8 <body> 8 <body>
9 <div id="antet"> 9 <header>
10 <h1> Blogul meu de călătorie </h1> 10 <hgroup>
11 <p class="slogan">Să vezi întreaga lume e de vis! </p> 11 <h1> Blogul meu de călătorie </h1>
12 12 <h2> Să vezi întreaga lume e de vis! </h2>
13 13 </hgroup>
14 <div id="meniu"> 14 <nav>

15 <ul> 15 <ul>
16 <li><a href="#">Acasă</a></li> 16 <li><a href="#">Acasă</a></li>
17 <li><a href="#">Blog</a></li> 17 <li><a href="#">Blog</a></li>
18 <li><a href="#">Galerie</a></li> 18 <li><a href="#">Galerie</a></li>
19 <li><a href="#">Despre mine</a></li> 19 <li><a href="#">Despre mine</a></li>
20 </ul> 20 </ul>
21 </div> 21 </nav>
22 </div> 22 </header>
23 <div class="articol"> 23 <article>
24 <p class="data">15.06.2018</p> 24 <time datetime="2018-07-15" pubdate>15.06.2018</time>
25 <h2> 25 <h2>
26 <a href="#" title="link către articol">La mare</a> 26 <a href="#" title="link către articol">La mare</a>
27 </h2> 27 </h2>
28 28
52
<p>Ce cald este la mare. Hai să mâncăm o <p>Ce cald este la mare. Hai să mâncăm o
30 înghețată!</p> 30 înghețată!</p>
31 </div> 31 </article>
32 32
33 <div class="articol"> 33 <article>
34 <p class="data">25.12.2018</p> 34 <time datetime="2018-12-25" pubdate>25.2.2018</time>
35 <h2> 35 <h2>
36 <a href="#" title="link către articol">La munte</a> 36 <a href="#" title="link către articol">La munte</a>
37 </h2> 37 </h2>
38 <p>Ce frig este la munte. Hai să bem un vin fiert!</p> 38 <p>Ce frig este la munte. Hai să bem un vin
</div> fiert!</p>
<article>
39 <div id="subsol"> 39 <footer>

40 <p>© 2019 <a href="#">INFOGATES</a></p> 40 <p>© 2019 <a href="#">INFOGATES</a></p>
41 </div> 41 </footer>
42 42
43 </body> 43 </body>
44 </html> 44 </html>
53

Limbajul 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

Limbajul HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Capitolul al II-lea.

2.1. Noțiuni introductive

<marcaj> Bine ați venit în România! </marcaj>

Marcajele pot avea asociate atribute: <marcaj atribut="valoare"> Conținut </marcaj>.

Figură 2.1. Elementul title

Marcajul meta viewport trebuie să aibă întotdeauna ca și conținut "width=device-width,

Antet: siglă, nume site, casetă căutare

nav Meniu <nav></nav>

Conținut principal Bara laterală

Conținut secundar Conținut secundar Conținut secundar

footer Subsol: meniu terțiar, copyright <footer></footer>

Figură 2.2. Structura generală a unei pagini web

<html> Element container pentru întreg codul HTML

2.2. Elemente de bază HTML

Headings (titluri de secțiuni)

Figură 2.4. Paragrafe

1. Stațiuni de la Marea Neagră

Figură 2.5. Listă ordonată

• Stațiuni de la Marea Neagră

Figură 2.6. Listă neordonată

III. Stațiuni de la Marea Neagră

Figură 2.7. Listă ordonată cu atribute

Figură 2.8. Alinierea imaginilor la stânga sau la dreapta paragrafelor

<a href="delta-dunarii.html">Delta Dunării</a>

Figură 2.9. Link-uri locale (URL relativ)

apoi se adaugă un link către elementul bookmark din aceeași pagină

sau se poate accesa un element bookmark din altă pagină

2.5. Exemple practice

Figură 2.10. Împărțirea conținutului paginii web în zone (containere)

Figură 2.11. Pagina web văzută în browser – doar conținutul HTML

Exemplul 2. Link-uri (Energia regenerabilă)

index.html resurse.html Resurse

energia_eoliana.html energia_solara.html hidroenergia.html

Exemplu de pagină a site-ului:

2.6. Elemente de formatare a textului

<p>- text <b>îngroșat (aldin)</b></p>

<p>- text <strong>important</strong></p>

<p>- text <i>înclinat (cursiv)</i></p>

<p>- text <em>accentuat</em></p>

<p>- text <mark>evidenţiat (marcat)</mark></p>

<p>- text <small>mai mic</small></p>

<p>- text <del>șters (tăiat cu o linie)</del></p>

<p>- text <ins>inserat (subliniat)</ins></p>

<p>- text <sub>indiciat</sub></p>

<p>- text <sup>exponent</sup></p>

Figură 2.12. Formatări speciale ale textului

2.7. Elemente de citare

Figură 2.13. Elemente de citare

Butoane de opțiuni (Radio Buttons)

Butoane comutator (Checkbox)

Butoanele Trimitere (Submit) și Reset

<input type="submit" name="Trimite" value="Submit">

<input type="submit" name="Trimite" value="Submit">

Elementul < textarea>

De asemenea, se poate defini dimensiunea zonei de text folosind CSS:

Elementele < fieldset> și < legend>

Elementul de tip <password>

Elementul de tip <color>

Elementul de tip <date>

Elementul de tip <email>

Elementul de tip <file>

Elementul de tip <hidden>

Elementul de tip <range>