Sunteți pe pagina 1din 20

Capitolul al II-lea.

LIMBAJUL HTML

2.1. Introducere
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 numite marcaje sau etichete (tags). Fiecare element este format dintr-un marcaj de
deschidere (de început) și un marcaj de închidere (de final). Marcajele sunt încadrate între paranteze
unghiulare astfel: <marcaj> Conținut </marcaj> ,

iar unele marcaje pot avea și atribute asociate:


<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. Doar anumite atribute funcționează în anumite marcaje
HTML.
Există și marcaje HTML care nu au conținut, iar pentru acestea se recomandă închiderea astfel
<marcaj /> . De asemenea este recomandat ca marcajele HTML să fie scrise cu litere mici.

Elementele HTML pot fi încorporate (nested) în alte elemente HTML.


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:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Titlu pagină</title>
6 </head>
7
8 <body>
9 <header>Conținut zona de antet</header>
10 <nav>Conținut zona de navigare (meniuri)</nav>
11 <main>Conținut zona principală</main>
12 <footer>Conținut zona de subsol</footer>
13 </body>
14 </html>

Prima linie de cod <!DOCTYPE html> are rol de a indica browser-ului că are de a face cu un
document HTML. Între marcajele html care descriu documentul HTML se includ elementele head și
body . În interiorul marcajului 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ă
Capitolul al II-lea. LIMBAJUL HTML
înaintea celorlalte în elementul head1. Alte elemente meta vor fi prezentate în modulele următoare.
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.
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.
Toată informația din pagina web vizibilă în browser este inclusă între marcajele body . Aici găsim mai
multe elemente cu rol în organizarea conținutului site-ului nostru: header, nav, main, section,
article, aside, footer.

header Zonă antet: siglă, nume site, casetă căutare

nav Zonă meniu principal

Zonă meniu Zonă conținut principal Conținut general


secundar specific pentru site:
la conținut - socializare
- reclamă
- categorii
body

main

Conținut secundar 1 Conținut secundar 2 Conținut secundar 3

footer Zonă subsol: meniu terțiar, copyright

Figură 1. Structura generală a unei pagini web

1
http://openmya.hacker.jp/hasegawa/security/utf7cs.html
Capitolul al II-lea. LIMBAJUL HTML
Pe lângă toate aceste elemente de structură a paginii web se pot include și comentarii foarte utile
în descrierea codului din pagina noastră:
<!-- Comentariu în pagină -->

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 am văzut în exemplul de mai sus.
Fiecare element reprezintă ceva pentru browser, ajutându-l să înțeleagă toate lucrurile de pe
pagină.
Vom lua în continuare un exemplu de pagină web pe care o vom realiza pas cu pas. Î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 mai multe containere și formatat folosind 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. Împărțirea conținutului paginii web în zone (containere)


Mai jos sunt prezentate câteva din cele mai importante 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
Capitolul al II-lea. LIMBAJUL HTML
<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> Element container cu uz general
<h1> … <h6> Titluri de secțiuni (h1 este cel mai important … h6 cel mai puțin important)
<p>, <br> Paragraf / sfârșit de linie (rând)
<ul>, <ol> Listă neordonată, listă ordonată
<li> Element al unei liste
<img> Inserează o imagine
<a> Creează o legătură (link)

2.2. Elemente HTML

2.2.1. 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 o zonă de navigare (meniuri).

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

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

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

2.2.5. Zona de subsol


După închiderea zonei principale de conținut se adaugă zona de subsol (din partea de jos) a paginii
web marcată prin elementul <footer> . În această zonă putem include un meniu terțiar, informații
de copyright etc.
Capitolul al II-lea. LIMBAJUL HTML
În exemplul de mai jos se poate observa împărțirea conținutului din pagină <body> în containere
potrivite utilizând elemente HTML:

1 <body>
2 <header> </header>
3 <nav> </nav>
4 <main>
5 <section> </section>
6 <section> </section>
7 <section> </section>
8 </main>
9 <footer> </footer>
10 </body>

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

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

1 <header>
2 <h1>Bine ați venit în România</h1>
3 </header>

2.2.8. Paragrafe
Textul din pagină este împărțit în paragrafe, asemenea cu textul dintr-un document. Paragrafele
sunt separate între ele printr-un spațiu. Î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 /> .

1 <p>Țara noastră România.</p>


2 <!-- sau -->
3 <p>Țara noastră
4 România.</p> <!-- afișează paragraful pe un rând -->
5
6 <p>Țara noastră <br /> România.</p> <!-- afișează paragraful pe
7 două rânduri -->
Capitolul al II-lea. LIMBAJUL HTML

2.2.9. 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ă:

1 <ol>
2 <li>
3 Stațiuni de la Marea Neagră
4 </li>
5 <li>
6 Delta Dunării
7 </li>
8 </ol>

1. Stațiuni de la Marea Neagră


2. Delta Dunării

Figură 3. Listă ordonată


Exemplu de listă neordonată:

1 <ul>
2 <li>
3 Stațiuni de la Marea Neagră
4 </li>
5 <li>
6 Delta Dunării
7 </li>
8 </ul>

 Stațiuni de la Marea Neagră


 Delta Dunării

Figură 4. Listă neordonată


Atributul type sau proprietatea CSS list-style-type sunt utilizate pentru a defini tipul
elementului de listă. O listă neordonată poate avea următoarele tipuri: disc, circle, square, none. O
listă ordonată poate avea următoarele tipuri: 1, A, a, I, i, none.
Dacă doriți să începeți contorizarea listei de la un număr specificat, se poate utiliza atributul start .
Capitolul al II-lea. LIMBAJUL HTML

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

1 <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 css:

<img src="imagini/romania.png" alt="Romania turistica" style="width:200px;


1
height:200px;" />

Utilizați proprietatea CSS float pentru a poziționa imaginea spre dreapta sau spre stânga unui text:

1 <img src="imagini/romania.png" alt="Romania turistica" style=" float:left;


2 width:200px; height:200px;" />
3 <img src="imagini/romania.png" alt="Romania turistica" style=" float:right;
4 width:200px; height:200px;" />

Eticheta <map> definește o imagine-hartă. O imagine-hartă este o imagine cu zone care pot fi
apelate pentru a accesa alte pagini web.
Î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
referindu-se 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ă.

1 <picture>
2 <source media="(min-width: 650px)" srcset="romania_mare.jpg">
3 <source media="(min-width: 465px)" srcset="romania_medie.jpg">
4 <img src="romania_mica.jpg" alt="romania" style="width:auto;">
5 </picture>
Capitolul al II-lea. LIMBAJUL HTML

2.2.11. Legături (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 link</a>
Dacă nu se dorește redirecționarea utilizatorului atunci se folosește simbolul # ca valoare pentru
atributul href .

1 <ul>
2 <li>
3 <a href="#">Stațiuni de la Marea Neagră</a>
4 </li>
5 <li>
6 <a href="http://www.delta-dunarii.ro/">Delta Dunării</a>
7 </li>
8 </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.
Î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ă.
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:

1 <a href="http://www.delta-dunarii.ro/" target="_blank">Delta Dunării</a>

Este destul de obișnuit să se folosească imagini pentru realizarea link-urilor:

1 <a href="delta-dunarii.html">
2 <img src="imagini/delta-dunarii.png" alt="Delta Dunării">
Capitolul al II-lea. LIMBAJUL HTML

3 </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 foarte lungi. Primul pas constă în crearea bookmark-
ului cu ajutorul atributului id : <h2 id="delta-dunarii">Delta Dunării</h2> , apoi se adaugă
un link către bookmark din aceeași pagină <a href="#delta-dunarii">Delta Dunării</a> , sau
se poate accesa din altă pagină <a href="la-mare.html#delta-dunarii">Delta Dunării</a> .

2.2.12. Stiluri
b, strong, i, em, u

2.2.13. Tabele
<table><tr><td>
< thead >,< tbody >,< tfoot >
Pentru un design mai atractiv in cazul tabelelor trebuie sa folosesti tag-urile de mai jos:
< thead >
Acest tag se foloseste pentru a grupa una sau mai multe linii ale tabelului în antetul acestuia.
< tbody >
Tagul < tbody > se foloseste pentru a marca grupuri de linii ale tabelului care conţin datele propriu
zise. Într-un tabel pot exista mai multe zone.
< tfoot >
Acest tag se foloseste pentru a grupa una sau mai multe linii ale tabelului în subsolul acestuia.

2.2.14. Alte marcaje


1. < blockquote >
Acesta este folosit cand vrem sa atragem atentia, cand vrem sa scoatem un text in evidenta.
2. < cite >
Elementul < cite > este folosit impreuna cu < blockquoate > si se foloseste in cazul unui citat.
3.< dl >
Este folosit in cazul listelor de definitii, dar destul de rar intalnit.
Daca in cazul < ul > sau < ol > foloseam eticheta < li >, aici vom folosi < dt > si < dd >. < dt > definește
fiecare element și < dd > descrie elementul de mai sus.
4.& # 39 ;(și alte caractere ASCII)
Cand folosim HTML ne lovit si de codul ASCII, si atunci trebuie să inseram un simbol. Acest lucru
asigură afișarea simbolului corect pentru utilizatorului.

2.2.15. Formulare
Capitolul al II-lea. LIMBAJUL HTML
5.< optgroups >
Cu entitatea < optgroup > exista posibilitatea de a crea categorii pentru fiecare element din listă.
6.< fieldset > și < legend >
Tagul < fieldset > ajuta la gruparea elementelor intr-un dreptungi, iar cu ajutorul tagului < legend >
se poate adauga un titlu.
7.< label >
Acest tag se utilizează pentru a determina eticheta elementui de intrare. Este intalnit in cazul
campurilor de tip text.

2.2.16. Video, audio si alte elemente html5


Video, audio si alte elemente html5
Capitolul al II-lea. LIMBAJUL HTML

2.3. Pagina web HTML


Pagina web folosită ca exemplu scrisă utilizând cod HTML:
1<!DOCTYPE html>
2<html lang="ro-RO">
3
4 <head>
5 <meta charset="utf-8">
6 <title>Romania turistica</title>
7 </head>
8
9 <body>
10 <header>
11 <h1>Bine ați venit în România</h1>
12 <img src="imagini/romania.png" alt="Romania turistica">
13 </header>
14
15 <div class="main">
16
17 <section>
18 <img src="imagini/mare.png" alt="Imagine de la mare.">
19 <div>
20 <h2>La mare</h2>
21 <ul>
22 <li>
23 <a href="#">Stațiuni de la Marea Neagră</a>
24 </li>
25 <li>
26 <a href="#">Delta Dunării</a>
27 </li>
28 </ul>
29 </div>
30 </section>
31
32 <section>
33 <img src="imagini/munte.png" alt="Imagine de la munte.">
34 <div>
35 <h2>La munte</h2>
36 <ul>
37 <li>
38 <a href="#">Stațiuni montane</a>
39 </li>
40 <li>
41 <a href="#">Agroturism</a>
42 </li>
43 </ul>
44 </div>
45 </section>
Capitolul al II-lea. LIMBAJUL HTML
46
47 <section>
48 <img src="imagini/sovata.png" alt="Imagine din stațiuni.">
49 <div>
50 <h2>Stațiuni balneare</h2>
51 <ul>
52 <li>
53 <a href="#">Afecțiuni tratate</a>
54 </li>
55 <li>
56 <a href="#">Harta stațiunilor balneare</a>
57 </li>
58 </ul>
59 </div>
60 </section>
61
62 </main>
63
64 <footer>
65 <p>Țara noastră România.</p>
66 </footer>
67 </body>
68
69</html>
Capitolul al II-lea. LIMBAJUL HTML

Figură 5. Pagina web văzută în browser – doar conținutul HTM


Capitolul al II-lea. LIMBAJUL HTML

2.4. 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).
Capitolul al II-lea. LIMBAJUL HTML

Î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>
Capitolul al II-lea. LIMBAJUL HTML

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 <p>Ce cald este la mare. Hai să mâncăm o 28 <p>Ce cald este la mare. Hai să mâncăm o
înghețată!</p> înghețată!</p>
30 </div> 30 </article>
31 31
32 <div class="articol"> 32 <article>
33 <p class="data">25.12.2018</p> 33 <time datetime="2018-12-25" pubdate>25.2.2018</time>
34 <h2> 34 <h2>
35 <a href="#" title="link către articol">La munte</a> 35 <a href="#" title="link către articol">La munte</a>
36 </h2> 36 </h2>
37 <p>Ce frig este la munte. Hai să bem un vin fiert!</p> 37 <p>Ce frig este la munte. Hai să bem un vin
38 </div> 38 fiert!</p>
<article>
39 <div id="subsol"> 39 <footer>
40 <p>&copy; 2018 <a href="#">INFOGATES</a></p> 40 <p>&copy; 2018 <a href="#">INFOGATES</a></p>
41 </div> 41 </footer>
42 42
43 </body> 43 </body>
44 </html> 44 </html>
Capitolul al II-lea. LIMBAJUL HTML

2.5. Aplicații practice


Aplicație 1. Realizați utilizând limbajul HTML pagina web de mai jos.
Capitolul al II-lea. LIMBAJUL HTML

Aplicație 2. Creați un site web respectând structura de mai jos. Pe fiecare pagină să apară logo-ul
cu link către pagina principală, un titlu de secțiune (heading) cu numele paginii și un sistem de
legături între paginile site-ului astfel încât să se ajungă din orice pagină la oricare altă pagină a site-
ului.

Aplicatie2

index.html proiecte.html Proiecte

pr1.html pr2.html

Exemplu de pagină a site-ului:


Capitolul al II-lea. LIMBAJUL HTML

Aplicație 3.

S-ar putea să vă placă și