Structura Unui Document HTML

Structura unui document HTML
1. Ce este un document HTML?

Un document HTML nu este altceva dect un fiier text care, pe lng textul propriu-zis
ce va aprea n pagin, conine i o serie de elemente speciale, denumite etichete, sau marcaje
(tags, n limba englez).
Not
Toate celelalte elemente, de tip multimedia, care nsoesc documentul HTML, cum sunt
sunetul, imaginile video, grafica, etc., nu fac parte din structura acestuia. Documentul HTML
include referine la aceste elemente, prin intermediul unor etichete speciale, care indic
browserului modul n care ele vor fi ncrcate i integrate n pagina Web.
Etichetele nu sunt instruciuni n sensul cunoscut al noiunii, ele avnd doar rolul de a
comunica browserului semnificaia i modul de afiare al elementelor incluse, privind aspectul
textului, al fonturilor (tipurilor de caractere) i n general, al tuturor elementelor prezente n
pagin. Etichetele sunt delimitate de perechi de paranteze unghiulare "< >".
Unele etichete permit precizarea anumitor caracteristici ale elementului pe care l introduc
n document prin intermediul unor perechi caracteristic - valoare numite atribute. Exist
atribute specifice doar anumitor elemente i atribute ce sunt utilizate n asociere cu mai multe
etichete. O etichet poate avea unul, nici unul, sau mai multe atribute. La rndul lor, atributelor li
se pot atribui valori diferite.
Att etichetele ct i atributele sunt case-insensitive, ca atare nu va exista nici o diferen
de aciune ntre, s spunem, <head>, <Head>, <HEAD>, sau chiar <HeaD>. Ele sunt
echivalente. Pe de alt parte, valoarea unui atribut poate fi case-sensitive, cum, n principiu, este
cazul locaiilor fiierelor i adreselor URL.
Regulile de folosire a etichetelor, atributelor i valorilor acestora reprezint sintaxa
limbajului HTML. Similar limbajelor de programare, n HTML respectarea sintaxei limbajului
este determinant pentru o bun funcionare a documentului.
Spre deosebire de limbajele compilate cum ar fi limbajul C, n care programele trec nainte
de execuie prin faza de compilare, etap n care compilatorul semnaleaz eventualele greeli de
sintax, la documentele HTML nu se ntmpl acest lucru. Documentele HTML sunt interpretate
de browser exact aa cum au fost ele scrise. Prin urmare, orice greeal de sintax se va reflecta
direct n aspectul paginii Web, conducnd, de cele mai multe ori, la o funcionare defectuoas a
acesteia.
Dac la vizualizarea paginii dumneavoastr cu browserul constatai c anumite secvene ale
paginii nu au aspectul ateptat, sau elementele pe care dorii s le introducei nu sunt afiate,
revenii asupra documentului HTML i verificai nc o dat sintaxa acestor elemente.
HTML lucreaz ntr-o manier foarte uor de neles. n esen trebuie s scriei textul i s
precizai elementele care dorii s apar n pagin i s le includei ntre anumite etichete
specifice. De exemplu, dac dorim s afim o propoziie cu caractere ngroate (bold), vom
1
marca nceputul acesteia folosind eticheta iar pentru marcarea sfritului propoziiei eticheta
.
 Acesta este un text scris cu litere aldine
Atenie!
Browserul nu ine cont de numrul spaiilor dintre cuvinte, afiarea fcndu-se invariabil cu
un singur spaiu. De asemenea, nu se poate preciza mrimea liniilor de text, acestea fiind de
mrimea ferestrei browserului (prin redimensionarea ferestrei se vor rearanja i liniile de text).
Dup cum vom vedea mai trziu, se poate preciza totui unde s se termine un anumit rnd
i cum se poate alinia un text n pagin.
Etichetele HTML sunt de dou tipuri:
etichete container (container tags)
etichete vide (empty tags)
Etichetele container sunt de forma:
<TAG> bloc de text </TAG>
unde:
<TAG> - marcheaz nceputul unui bloc
</TAG> - marcheaz sfritul blocului
Etichetele specific formatul n care va fi afiat textul coninut ntre eticheta de nceput i
cea de final. Majoritatea etichetelor sunt de acest tip. O particularitate a etichetelor container este
c, n cazul unora dintre ele, prezena etichetei de nchidere (</TAG>) este opional. Pe
parcursul capitolelor care vor urma, vom preciza explicit care anume sunt etichetele care au
aceast proprietate.
Etichetele vide au forma:
<TAG>
Acest tip de etichete nu se refer la formatul textelor, ci la introducerea anumitor elemente,
ca de exemplu: paragrafe, sfrit de linie, linii orizontale i altele, deci dau indicaii browserului
despre ce element este vorba i despre cum s afieze acel element.
Etichetele vide nu au etichet de nchidere.
2. Etichete de structur
Orice document HTML conine dou seciuni:
antetul (head)
corpul documentului (body)
Structura general a unui document HTML este urmtoarea:
<HTML>
<HEAD>
2
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Documentul este delimitat de etichetele <HTML> </HTML> i este format din cele dou
pri:
antet (head) - este delimitat de etichetele <HEAD> </HEAD> i conine titlul
documentului precum i alte informaii privind documentul. n antetul documentului se mai
insereaz i anumite secvene de program (script-uri), care se execut la ncrcarea documentului
n browser.
corp (body) - care delimiteaz coninutul propriu-zis al documentului i este inclus ntre
etichetele <BODY> </BODY>
Iat acum i semnificaia etichetelor menionate i care fac parte din structura oricrui
document HTML:
<HTML> </HTML>
ntre aceste etichete este inclus ntregul document HTML. Ele comunic browserului unde
ncepe i unde se termin documentul.
<HEAD> </HEAD>
ntre aceste etichete sunt incluse titlul, deja menionat, precum i alte informaii despre
documentul HTML. Aceste elemente, numite metatag-uri sunt deosebit de importante pentru ca
pagina s fie ct mai bine cotat de ctre motoarele de cutare. Ele vor face obiectul unui capitol
separat.
Metatag-urile i antetul n ansamblul su nu sunt vizibile pentru vizitator n pagina Web.
Totui, la fel ca ntreg codul HTML al paginii, antetul poate fi vizualizat selectnd din meniul
browserului opiunea View > Source.
<TITLE> </TITLE>
Stabilete titlul documentului HTML.
Titlul documentului este deosebit de important deoarece este unul din criteriile folosite de
motoarele de cutare pentru indexarea paginii. Prin urmare, strduii-v s gsii un titlu care s
descrie ct mai corect i complet coninutul paginii dumneavoastr.
Atenie!
Eticheta de mai sus nu stabilete titlul care apare n cadrul paginii, ci pe acela care apare
obinuit n bara de titlu a browserului.
<BODY> </BODY>
Conine descrierea textului i elementelor paginii. n corpul documentului se stabilesc,
deci, aspectul i coninutul paginii Web. Elementele coninute n aceast seciune sunt vizibile n
pagin.
Exemplul 1
<HTML>
<HEAD>
<TITLE>Pagina mea</TITLE>
</HEAD>
<BODY>
Am reusit sa scriu prima mea pagina de Web. Urmatoarea va fi cu mult mai buna.
</BODY>
</HTML>
Salvai fiierul cu numele primapagina.html. Apoi deschidei browserul pe care l folosii,
selectai meniul File > Open > Browse, cutai folderul n care ai salvat fiierul, deschidei-l.
Dac dorii s scriei un text pe mai multe linii n pagin, va trebui s folosii eticheta
 (de la line break), care face trecerea pe o linie noua. Eticheta este de tip empty, deci
nu are etichet de nchidere. ncercai exemplul de mai jos, n care afiarea textului documentului
se va face pe dou rnduri.
Exemplul 2
<HTML>
<HEAD>
<TITLE>Pagina mea</TITLE>
</HEAD>
<BODY>
Am reusit sa scriu prima mea pagina de Web. Urmatoarea va fi cu mult mai buna.
</BODY>
</HTML>
Deoarece structura documentelor HTML obinuite este n realitate mult mai complex, este
recomandat ca, pe msur ce procesul de editare avanseaz, s introducei comentarii n text
pentru a face aceast structur ct mai explicit. Comentariile nu sunt vizibile pentru browser, ele
servesc creatorului paginii pentru a da un grad crescut de lizibilitate documentului HTML.
Comentariile constau n scurte informaii, explicaii la elementele de cod utilizate, etc.,
fiind deosebit de utile ulterior, mai ales n situaia n care se impune depanarea codului.
Comentariile se introduc prin includerea textului ntre etichetele de mai jos.

Iat dou exemple:
<!- - Acesta este un comentariu introdus in pagina Web - ->
<!Acesta este un comentariu
pe mai multe randuri
care ia sfarsit aici -->
3. Folosirea corect a etichetelor
Etichetele container se compun, aa cum am vzut mai devreme, din perechi de etichete:
etichet de deschidere <TAG> i de nchidere </TAG>.
4
La construirea unei pagini Web complexe vei fi pus adesea n situaia de a folosi mai multe
etichete pentru aceeai secven de text.
De pild, vei dori s atribuii unui text dou proprieti: litere aldine sau ngroate (bold) i
text centrat n pagin. Pentru aceasta va trebui s utilizai dou perechi de etichete, care descriu
cele dou proprieti, n mod simultan, metod numit imbricarea etichetelor (nested tags), ca n
exemplul de mai jos:
<CENTER>Text cu aldine si centrat</CENTER>
Este foarte important ca, n cazul folosirii mai multor etichete container mpreun, ele s fie
plasate n mod corect.
n aceast situaie, principiul de utilizare este: "Last In - First Out" (LIFO). Acest lucru
nseamn c ultima etichet deschis trebuie s fie prima care se nchide.
Atenie!
Trebuie s fii foarte atent la nchiderea etichetelor, pentru a nu nclca principiul LIFO. n
caz contrar, secvena de cod din pagin nu va funciona corect.
Iat un exemplu generic de folosire corect a dou etichete:
<TAG1><TAG2>Etichete utilizate corect</TAG2></TAG1>
i un altul de folosire incorect:
<TAG1><TAG2>Etichete utilizate incorect</TAG1></TAG2>
4. Rezumat
Un document HTML este un fiier text care conine textul care va aprea n pagin i
etichete. Acestea au rolul de a comunica browserului semnificaia i modul de afiare al
elementelor incluse ntre ele.
Etichetele sunt nsoite de atribute care sunt perechi caracteristic - valoare i care au rolul
de a stabili diverse caracteristici ale etichetei. Etichetele pot fi de dou tipuri: etichete container
i etichete vide. Etichetele container necesit eticheta de nchidere n timp ce etichetele vide nu
trebuie nchise.
Un document HTML este format din antet i corp. Etichetele de structur ale documentului
sunt:
<HTML> </HTML> care delimiteaz documentul
<HEAD> <HEAD> care delimiteaz antetul
<TITLE> </TITLE> care delimiteaz titlul documentului
<BODY> </BODY> care delimiteaz corpul documentului.
ntr-un document HTML se pot introduce comentarii prin introducerea textului ntre
etichetele 
Imbricarea etichetelor respect regula LIFO: prima etichet deschis este ultima care se
nchide.
5

Structura Unui Document 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

Structura Unui Document HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Structura unui document HTML

1. Ce este un document HTML?

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