2. structura unui document html

Structura unui document HTML

1. Ce este un document HTML?

Un document HTML nu este altceva decât un fişier text care, pe lângă textul propriu-zis ce va apărea în pagină, conţine şi o serie de elemente speciale, denumite etichete, sau marcaje (tags, în limba engleză).

NotăToate celelalte elemente, de tip multimedia, care însoţesc documentul HTML, cum sunt

sunetul, imaginile video, grafica, etc., nu fac parte din structura acestuia. Documentul HTML include referinţe la aceste elemente, prin intermediul unor etichete speciale, care indică browserului modul în care ele vor fi încărcate şi integrate în pagina Web.

Etichetele nu sunt instrucţiuni în sensul cunoscut al noţiunii, ele având doar rolul de a comunica browserului semnificaţia şi modul de afişare 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 rândul lor, atributelor li se pot atribui valori diferite.

Atât etichetele cât şi atributele sunt case-insensitive, ca atare nu va exista nici o diferenţă de acţiune î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 locaţiilor fişierelor ş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ă funcţionare a documentului.

Spre deosebire de limbajele compilate cum ar fi limbajul C, în care programele trec înainte de execuţie prin faza de compilare, etapă în care compilatorul semnalează eventualele greşeli de sintaxă, la documentele HTML nu se întâmplă acest lucru. Documentele HTML sunt interpretate de browser exact aşa cum au fost ele scrise. Prin urmare, orice greşeală de sintaxă se va reflecta direct în aspectul paginii Web, conducând, de cele mai multe ori, la o funcţionare defectuoasă a acesteia.

Dacă la vizualizarea paginii dumneavoastră cu browserul constataţi că anumite secvenţe ale paginii nu au aspectul aşteptat, sau elementele pe care doriţi să le introduceţi nu sunt afişate, reveniţi asupra documentului HTML şi verificaţi încă o dată sintaxa acestor elemente.

HTML lucrează într-o manieră foarte uşor de înţeles. În esenţă trebuie să scrieţi textul şi să precizaţi elementele care doriţi să apară în pagină şi să le includeţi între anumite etichete specifice. De exemplu, dacă dorim să afişăm o propoziţie cu caractere îngroşate (bold), vom

1

marca începutul acesteia folosind eticheta iar pentru marcarea sfârşitului propoziţiei eticheta .

 Acesta este un text scris cu litere aldine

Atenţie! Browserul nu ţine cont de numărul spaţiilor dintre cuvinte, afişarea făcându-se invariabil cu

un singur spaţiu. De asemenea, nu se poate preciza mărimea liniilor de text, acestea fiind de mărimea ferestrei browserului (prin redimensionarea ferestrei se vor rearanja şi liniile de text).

După cum vom vedea mai târziu, se poate preciza totuşi unde să se termine un anumit rând ş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ă sfârşitul blocului

Etichetele specifică formatul în care va fi afişat textul conţinut î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, prezenţa etichetei de închidere (</TAG>) este opţională. 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, sfârşit de linie, linii orizontale şi altele, deci dau indicaţii browserului despre ce element este vorba şi despre cum să afişeze acel element.

Etichetele vide nu au etichetă de închidere.

2. Etichete de structurăOrice document HTML conţine două secţiuni: antetul (head)corpul documentului (body)Structura generală a unui document HTML este următoarea:

<HTML><HEAD>

2

<TITLE> </TITLE></HEAD><BODY></BODY></HTML>

Documentul este delimitat de etichetele <HTML> </HTML> şi este format din cele două părţi:

antet (head) - este delimitat de etichetele <HEAD> </HEAD> şi conţine titlul documentului precum şi alte informaţii privind documentul. În antetul documentului se mai inserează şi anumite secvenţe de program (script-uri), care se execută la încărcarea documentului în browser.

corp (body) - care delimitează conţinutul propriu-zis al documentului şi este inclus între etichetele <BODY> </BODY>

Iată acum şi semnificaţia etichetelor menţionate şi care fac parte din structura oricărui 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 menţionat, precum şi alte informaţii despre

documentul HTML. Aceste elemente, numite metatag-uri sunt deosebit de importante pentru ca pagina să fie cât mai bine cotată de către motoarele de căutare. Ele vor face obiectul unui capitol separat.

Metatag-urile şi antetul în ansamblul său nu sunt vizibile pentru vizitator în pagina Web. Totuşi, la fel ca întreg codul HTML al paginii, antetul poate fi vizualizat selectând din meniul browserului opţiunea View > Source.

<TITLE> </TITLE> Stabileşte titlul documentului HTML. Titlul documentului este deosebit de important deoarece este unul din criteriile folosite de

motoarele de căutare pentru indexarea paginii. Prin urmare, străduiţi-vă să găsiţi un titlu care să descrie cât mai corect şi complet conţinutul paginii dumneavoastră.

Atenţie! Eticheta de mai sus nu stabileşte titlul care apare în cadrul paginii, ci pe acela care apare

obişnuit în bara de titlu a browserului.

<BODY> </BODY>Conţine descrierea textului şi elementelor paginii. În corpul documentului se stabilesc,

deci, aspectul şi conţinutul paginii Web. Elementele conţinute în această secţiune sunt vizibile în pagină.

3

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>

Salvaţi fişierul cu numele primapagina.html. Apoi deschideţi browserul pe care îl folosiţi, selectaţi meniul File > Open > Browse, căutaţi folderul în care aţi salvat fişierul, deschideţi-l.

Dacă doriţi să scrieţi un text pe mai multe linii în pagină, va trebui să folosiţi eticheta (de la line break), care face trecerea pe o linie noua. Eticheta este de tip empty, deci nu are etichetă de închidere. Încercaţi exemplul de mai jos, în care afişarea textului documentului se va face pe două rânduri.

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 obişnuite este în realitate mult mai complexă, este recomandat ca, pe măsură ce procesul de editare avansează, să introduceţi comentarii în text pentru a face această structură cât 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 informaţii, explicaţii la elementele de cod utilizate, etc., fiind deosebit de utile ulterior, mai ales în situaţia î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 comentariupe mai multe randuricare ia sfarsit aici -->

3. Folosirea corectă a etichetelor

Etichetele container se compun, aşa cum am văzut mai devreme, din perechi de etichete: etichetă de deschidere <TAG> şi de închidere </TAG>.

4

La construirea unei pagini Web complexe veţi fi pus adesea în situaţia de a folosi mai multe etichete pentru aceeaşi secvenţă de text.

De pildă, veţi dori să atribuiţi unui text două proprietăţi: litere aldine sau îngroşate (bold) şi text centrat în pagină. Pentru aceasta va trebui să utilizaţi două perechi de etichete, care descriu cele două proprietăţi, î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ă situaţie, principiul de utilizare este: "Last In - First Out" (LIFO). Acest lucru înseamnă că ultima etichetă deschisă trebuie să fie prima care se închide.

Atenţie! Trebuie să fiţi foarte atent la închiderea etichetelor, pentru a nu încălca principiul LIFO. În

caz contrar, secvenţa de cod din pagină nu va funcţiona 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 fişier text care conţine textul care va apărea în pagină şi etichete. Acestea au rolul de a comunica browserului semnificaţia şi modul de afişare al elementelor incluse între ele.

Etichetele sunt însoţite 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

2. structura unui document html

Documents