Documente Academic
Documente Profesional
Documente Cultură
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> ,
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.
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.
main
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
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> .
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.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 /> .
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 <ul>
2 <li>
3 Stațiuni de la Marea Neagră
4 </li>
5 <li>
6 Delta Dunării
7 </li>
8 </ul>
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:
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:
Utilizați proprietatea CSS float pentru a poziționa imaginea spre dreapta sau spre stânga unui text:
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
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="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.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.
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>
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
pr1.html pr2.html
Aplicație 3.