Invatare Atomica

Structura unei pagini HTML

Declaratia de tip, elementul radacina, capul si corpul paginii, titluri, paragrafe si atribute — scheletul oricarei pagini web valide

Progres lectie:
0%
🎯

Obiectivul lectiei

In lectia trecuta ai vazut cu ce instrumente se scrie o pagina web. Acum inveti de ce anume e alcatuit un fisier HTML, in ce ordine, si de ce fiecare bucata conteaza. Un fisier HTML scris fara aceasta structura poate arata gresit in browser, poate afisa diacriticele stricate sau poate deruta un motor de cautare — exact genul de greseli pe care le poti evita stiind regulile de mai jos. Aceleasi reguli stau si la baza cerintelor practice de la proba de evaluare a competentelor digitale de la bacalaureat, unde ti se poate cere sa scrii sau sa corectezi o pagina HTML simpla.

Dupa aceasta lectie vei putea:

  • Sa scrii corect declaratia de tip <!DOCTYPE html> si sa explici la ce foloseste
  • Sa identifici elementul radacina <html> si rolul atributului lang
  • Sa completezi corect zona de antet <head>, cu codificarea caracterelor si titlul paginii
  • Sa structurezi corpul paginii <body> folosind titluri pe niveluri (h1-h6) si paragrafe
  • Sa recunosti si sa scrii corect atribute HTML (sintaxa nume="valoare")
  • Sa deosebesti un site static de unul dinamic si sa dai exemple concrete pentru fiecare
  • Sa scrii de la zero un document HTML complet si valid

Incearca singur!

Provocare — inainte sa citesti:

Lucrezi la un atelier de tamplarie si vrei o pagina simpla cu numele atelierului si serviciile oferite. Deschizi Notepad si scrii doar atat: numele atelierului pe primul rand, doua randuri goale, apoi un paragraf despre servicii, pe mai multe randuri, cu spatii puse ca sa arate frumos. Salvezi fisierul ca index.html si il deschizi in browser. Tot textul apare lipit intr-un singur rand continuu, fara spatiile si randurile goale pe care le-ai pus tu, iar in tab-ul browserului scrie doar "index.html" in loc de numele atelierului. Ce lipseste din fisierul tau si de ce arata asa?

💡 Ai nevoie de un indiciu?

Un fisier HTML nu e doar text liber — are o structura obligatorie de "cutii" imbricate, fiecare cu un rol precis: una spune browserului ce regului sa foloseasca, una tine informatii despre pagina (inclusiv titlul din tab), iar restul textului trebuie impartit in bucati (paragrafe, titluri) ca sa fie afisat asa cum vrei tu.

Raspunsul complet, cu exemple, e mai jos.

1

Declaratia de tip — <!DOCTYPE html>

Orice fisier HTML incepe, pe primul rand, cu declaratia de tip (doctype): <!DOCTYPE html>. Nu este un element HTML obisnuit — nu are eticheta de inchidere si nu afiseaza nimic pe pagina. Rolul ei este sa spuna browserului: "acest fisier respecta regulile actuale HTML5, foloseste-le pe acelea ca sa afisezi pagina". Fara aceasta declaratie, unele browsere pot trece intr-un mod vechi de afisare ("quirks mode" — mod compatibilitate cu pagini foarte vechi din anii '90), in care unele reguli de aranjare in pagina se aplica altfel decat te astepti.
Sintaxa exacta — de retinut caracter cu caracter:
<!DOCTYPE html>

Intreaga declaratie de tip este insensibila la majuscule — <!DOCTYPE html> si <!doctype HTML> inseamna acelasi lucru pentru browser. Regula care chiar conteaza: nu se adauga alte cuvinte in declaratie, asa cum cereau versiunile vechi de HTML (HTML 4, XHTML), cu un rand de declaratie mult mai lung, cu adrese catre documente de specificatie; HTML5 a simplificat totul la acest singur rand, scris mereu <!DOCTYPE html> (indiferent de majuscule/minuscule folosite).

✗ Greseala tipica
Uitarea declaratiei de tip sau scrierea ei gresita (ex. <DOCTYPE HTML> fara semnul de exclamare) nu blocheaza afisarea paginii — browserul tot deschide fisierul, dar poate trece in modul compatibilitate, iar odata ce adaugi reguli de aspect (CSS), unele dimensiuni si aliniamente pot iesi diferit fata de ce ai proiectat. Recunosti problema cand pagina "arata ciudat" fara motiv aparent; solutia e sa verifici mereu ca primul rand din fisier este exact <!DOCTYPE html>.
2

Elementul radacina — <html>

Imediat dupa declaratia de tip urmeaza elementul <html>, numit elementul radacina (root): toate celelalte elemente ale paginii — inclusiv zona de antet si corpul paginii, pe care le vezi mai jos — sunt scrise in interiorul lui, intre eticheta de deschidere <html> si cea de inchidere </html>. Este singurul element care sta direct langa DOCTYPE si contine absolut tot restul fisierului.
Scheletul de baza, cu elementul radacina:
<!DOCTYPE html>
<html lang="ro">

</html>

Atributul lang se scrie in eticheta de deschidere a lui <html>, cu un cod scurt de limba: lang="ro" pentru romana, lang="en" pentru engleza, lang="fr" pentru franceza. Se refera la limba principala a intregii pagini.

3

Zona de antet — <head>

In interiorul lui <html>, prima "cutie" este <head> — zona de antet. Nu contine text vizibil pe pagina (cu o singura exceptie, titlul din tab); contine informatii despre pagina, pe care browserul, motoarele de cautare si alte programe le citesc inainte de a afisa continutul propriu-zis. In aceasta lectie retii doua elemente obligatorii ale antetului.
Codificarea caracterelor — <meta charset="UTF-8">

Un calculator nu stocheaza literele ca litere, ci ca numere; codificarea (encoding) este regula dupa care fiecare numar se transforma inapoi in litera corecta pe ecran. UTF-8 este codificarea universala, folosita azi pe aproape toate site-urile, pentru ca acopera si literele romanesti cu diacritice si alte alfabete. Declaratia trebuie pusa cat mai devreme in <head>, ca prim element, ca sa fie citita inainte de restul textului.

Titlul paginii — <title>

<title> contine textul care apare in tab-ul browserului, in rezultatele motoarelor de cautare si in lista de pagini favorite (bookmarks). Fiecare pagina are exact un singur <title>, scris in <head>, cu text scurt si descriptiv — nu apare nicaieri in corpul vizibil al paginii.

Zona de antet completa, cu ambele elemente:
<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <title>Atelier Tamplarie Ionescu</title>
</head>

</html>
✗ Greseala tipica
Cand meta charset lipseste sau e pus prea tarziu in <head> (dupa alt continut), browserul poate deja sa fi inceput sa interpreteze textul cu o codificare gresita pana ajunge la declaratie. Recunosti problema cand literele cu diacritice apar stricate pe pagina, desi in fisierul sursa sunt scrise corect. Solutia: <meta charset="UTF-8"> ca prim rand din <head>, mereu.
4

Corpul paginii — <body> si titlurile pe niveluri

Dupa </head> urmeaza <body> — corpul paginii, singura zona cu continut vizibil in fereastra browserului: tot textul, titlurile, imaginile, listele si restul elementelor pe care le vei invata in lectiile urmatoare. Exista un singur <body> pe pagina, plasat dupa </head>, in interiorul lui <html>.
Titlurile pe niveluri — h1 pana la h6:

HTML ofera sase niveluri de titlu: <h1> (cel mai important) pana la <h6> (cel mai putin important). Nu sunt doar "litere mari sau mici" — formeaza o ierarhie logica, la fel ca un cuprins de carte: <h1> = titlul principal al paginii, folosit o singura data; <h2> = sectiunile mari ale paginii; <h3> = subsectiuni ale unui <h2>, si tot asa. Marimea literelor pe ecran e doar o consecinta vizuala implicita a browserului — ierarhia logica e cea care conteaza, si pe ea se bazeaza si cititoarele de ecran cand "navigheaza din titlu in titlu".

Exemplu — corpul paginii pentru atelierul de tamplarie:
<body>
    <h1>Atelier Tamplarie Ionescu</h1>
    <h2>Despre noi</h2>
    <h2>Servicii</h2>
</body>
✗ Greseala tipica
Alegerea unui nivel de titlu doar dupa cat de "mare" vrei sa arate textul (ex. folosesti h3 peste tot pentru ca h1 ti se pare "prea mare") strica ierarhia logica a paginii. Marimea se regleaza corect mai tarziu, cu reguli de aspect (CSS) — nivelul de titlu trebuie ales dupa locul lui in structura, nu dupa marimea dorita.
5

Paragrafele — <p> si atributele HTML

Paragraful, <p>, este elementul de baza pentru text obisnuit: fiecare bucata de text separata logic (o idee, o descriere) se pune intr-un <p> propriu. Browserul adauga automat un spatiu vizual inainte si dupa fiecare paragraf, ca sa se vada clar unde incepe si unde se termina.
De ce spatiile si randurile goale din cod nu se vad pe pagina:

HTML trateaza orice grup de spatii, tab-uri sau treceri de rand consecutive din fisierul sursa ca un singur spatiu la afisare — indiferent cate ai pus tu. De aceea, textul scris fara <p>, chiar aranjat frumos pe randuri in editor, apare pe pagina ca un singur bloc continuu. Solutia este sa imparti explicit textul in paragrafe cu <p>...</p>, nu prin spatii sau randuri goale.

<p>Executam mobilier la comanda din lemn masiv.</p>
<p>Lucram cu stejar, fag si brad, in functie de proiect.</p>

Acesta este raspunsul la provocarea de la inceputul lectiei: textul tau aparea lipit pentru ca nu era impartit in <p>, iar titlul din tab lipsea pentru ca fisierul nu avea <title> in <head>.

Atributele HTML — informatii suplimentare pe un element

Un atribut este o informatie in plus, atasata unui element, scrisa in eticheta de deschidere, dupa numele elementului, in forma nume="valoare". Ai vazut deja doua atribute in aceasta lectie: lang="ro" pe <html> si charset="UTF-8" pe <meta>. Un element poate avea mai multe atribute deodata, separate prin spatiu, in orice ordine.

Exemplu numeric complet — cate atribute are un element?

Element de pornit: <img src="banc-lucru.jpg" alt="Banc de lucru din atelier" width="400"> (acest element il vei folosi in detaliu in lectia urmatoare, despre imagini).

Numaram fiecare pereche nume="valoare" din interiorul etichetei:

1. src="banc-lucru.jpg" — al 1-lea atribut
2. alt="Banc de lucru din atelier" — al 2-lea atribut
3. width="400" — al 3-lea atribut
Rezultat: 3 atribute.

Daca acelasi element ar mai avea si height="300", rezultatul ar deveni 4 atribute — regula e simpla: numeri fiecare pereche nume="valoare" scrisa in eticheta de deschidere.

6

Site static fata de site dinamic

Site static: fiecare vizitator primeste exact acelasi fisier HTML, asa cum a fost salvat pe server. Continutul se schimba doar cand cineva deschide fisierul intr-un editor, il modifica si il re-incarca pe server — pana atunci, pagina ramane identica pentru toata lumea, de fiecare data. Site dinamic: pagina este construita sau modificata chiar in momentul in care e ceruta, pe baza unor date care se pot schimba — o baza de date, ora curenta, ce a cautat vizitatorul, ce a completat intr-un formular. Doi vizitatori pot vedea continut diferit la aceeasi adresa, sau acelasi vizitator poate vedea alt continut a doua zi, fara ca nimeni sa fi editat manual vreun fisier HTML.
Exemplu din domeniul silviculturii:

Static: o pagina de prezentare a unei pepiniere, cu numele speciilor de puieti disponibile scrise direct in text. Cand apare o specie noua, cineva deschide fisierul HTML, adauga un paragraf nou si il incarca din nou pe server — pana atunci, pagina arata la fel pentru oricine o viziteaza.

Dinamic: un catalog online in care numarul de puieti disponibili si pretul sunt citite dintr-o baza de date la fiecare vizita si afisate automat actualizate — daca stocul scade dupa o comanda, urmatorul vizitator vede deja noul numar, fara interventie manuala asupra fisierului HTML.

✗ Greseala tipica
Nu orice interactivitate inseamna automat "site dinamic". O pagina cu un buton care ascunde sau arata un paragraf, folosind cod care ruleaza deja in browserul vizitatorului, poate ramane, in fond, acelasi fisier HTML static trimis tuturor — doar ca reactioneaza vizual la clic. Ce face un site cu adevarat dinamic e faptul ca datele afisate provin dintr-o sursa care se schimba (baza de date, sistem de comenzi) si sunt citite din nou la fiecare cerere.
7

Recapitulare — documentul HTML complet

Toate piesele din aceasta lectie se aduna intr-un singur document valid, in aceasta ordine obligatorie: declaratia de tip, elementul radacina cu limba paginii, zona de antet cu codificare si titlu, apoi corpul paginii cu titluri si paragrafe.
Documentul complet, pentru atelierul de tamplarie:
<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <title>Atelier Tamplarie Ionescu</title>
</head>
<body>
    <h1>Atelier Tamplarie Ionescu</h1>

    <h2>Despre noi</h2>
    <p>Executam mobilier la comanda din lemn masiv, din anul 2015.</p>

    <h2>Servicii</h2>
    <p>Lucram cu stejar, fag si brad, in functie de proiectul clientului.</p>
</body>
</html>

Rand cu rand: <!DOCTYPE html> — regula de afisare; <html lang="ro"> — radacina, in romana; <head> — antet cu codificare si titlu de tab; <body> — tot ce se vede: un titlu principal (h1), doua sectiuni (h2), fiecare cu paragraful ei (p).

Legatura cu proba de competente digitale (bacalaureat):

La aceasta proba ti se pot cere sarcini de tipul "creeaza o pagina web cu un titlu si doua paragrafe" sau "gaseste si corecteaza greseala dintr-un cod HTML dat". Verificarea de baza e mereu aceeasi: fisierul incepe cu declaratia de tip, are <html> cu limba potrivita, <head> cu <meta charset> si <title>, apoi <body> cu continutul cerut, structurat cu titlurile si paragrafele potrivite.

Conexiune cu urmatoarea lectie:

Ai scheletul unei pagini valide. In lectia urmatoare adaugi continut mai bogat inauntrul lui <body>: liste, tabele, imagini cu text alternativ, sunet, video si campuri de formular.

Exercitii practice

Exercitiul 1 (Nivel minim) — Ce lipseste din acest fisier?

Ti se da urmatorul fisier HTML: <html><head></head><body><h1>Atelier Tamplarie Ionescu</h1><p>Executam mobilier la comanda din lemn masiv.</p></body></html>. Enumera cel putin 3 lucruri care lipsesc, comparat cu structura corecta invatata in lectie, si rescrie fisierul complet, corectat.

Vezi rezolvarea

Lipsesc cel putin trei lucruri fata de structura corecta: declaratia de tip <!DOCTYPE html>, atributul lang pe elementul radacina (<html lang="ro">) si continutul zonei de antet, cu <meta charset="UTF-8"> si <title> (in exercitiu, head este gol).

Fisierul corectat:

<!DOCTYPE html> <html lang="ro"> <head> <meta charset="UTF-8"> <title>Atelier Tamplarie Ionescu</title> </head> <body> <h1>Atelier Tamplarie Ionescu</h1> <p>Executam mobilier la comanda din lemn masiv.</p> </body> </html>

Exercitiul 2 (Nivel standard) — Pagina firmei EcoSilv

Scrie codul HTML complet si valid pentru o pagina cu urmatoarele cerinte: titlul afisat in tab-ul browserului este EcoSilv - Reamenajari Verzi; corpul paginii contine un titlu principal (h1) cu textul EcoSilv - Reamenajari Verzi, apoi o sectiune (h2) Despre noi urmata de un paragraf cu textul Ne ocupam de reimpadurire si reamenajarea spatiilor verzi din judetul Neamt din anul 2018., apoi o a doua sectiune (h2) Servicii urmata de un paragraf cu textul Oferim consultanta, plantare de puieti si intretinere a spatiilor verzi. Pagina trebuie sa aiba declaratia de tip, elementul radacina cu limba corecta si zona de antet completa.

Vezi rezolvarea

Cod HTML complet:

<!DOCTYPE html> <html lang="ro"> <head> <meta charset="UTF-8"> <title>EcoSilv - Reamenajari Verzi</title> </head> <body> <h1>EcoSilv - Reamenajari Verzi</h1> <h2>Despre noi</h2> <p>Ne ocupam de reimpadurire si reamenajarea spatiilor verzi din judetul Neamt din anul 2018.</p> <h2>Servicii</h2> <p>Oferim consultanta, plantare de puieti si intretinere a spatiilor verzi.</p> </body> </html>

Exercitiul 3 (Nivel performanta) — Pepiniera de puieti forestieri

O pepiniera de puieti forestieri iti cere o pagina cu urmatoarea ierarhie de titluri: h1 cu numele pepinierei (ales de tine), doua sectiuni h2 — Specii disponibile si Contact — iar in interiorul sectiunii Specii disponibile, inca doua subsectiuni h3 — Foioase si Rasinoase, fiecare cu un paragraf scurt de continut inventat de tine. a) Scrie codul HTML complet si valid pentru acest schelet, respectand ordinea corecta a titlurilor. b) Proprietarul vrea ca numarul de puieti disponibili in stoc sa se actualizeze automat de fiecare data cand cineva cumpara online, fara ca cineva sa editeze manual fisierul HTML. Este aceasta o cerinta pentru un site static sau pentru unul dinamic? Argumenteaza in 2-3 propozitii, folosind definitiile din aceasta lectie.

Vezi rezolvarea

Schita: ordinea corecta e <h1> (numele pepinierei, o singura data), apoi <h2>Specii disponibile</h2> cu doua subsectiuni <h3>Foioase</h3> si <h3>Rasinoase</h3> (fiecare cu <p> propriu), apoi <h2>Contact</h2>. Capcana tipica: sarirea de la h1 direct la h3, sau plasarea celor doua h3 in afara sectiunii Specii disponibile.

b) Este o cerinta de site dinamic: stocul trebuie citit dintr-o sursa care se schimba (o baza de date de comenzi) chiar in momentul cererii paginii, nu scris fix in fisierul HTML - la un site static, numarul ar ramane acelasi pana cand cineva il modifica manual.

Criterii de evaluare: ierarhie fara niveluri sarite, cele doua h3 in interiorul lui Specii disponibile, argumentare corecta static/dinamic legata de actualizare automata.

Ce ai invatat astazi

  • Declaratia de tip <!DOCTYPE html> — primul rand, obligatoriu, spune browserului sa foloseasca regulile HTML5
  • Elementul radacina <html lang="ro"> — contine tot fisierul; atributul lang indica limba paginii
  • Zona de antet <head> — <meta charset="UTF-8"> (codificare corecta a literelor) si <title> (textul din tab)
  • Corpul paginii <body> — tot continutul vizibil; titluri h1-h6 in ordine ierarhica, fara sarituri de nivel
  • Paragrafele <p> — obligatorii pentru text, pentru ca HTML comprima spatiile si randurile goale din cod
  • Atributele HTML — sintaxa nume="valoare", scrise in eticheta de deschidere, mai multe pe acelasi element
  • Site static = acelasi fisier HTML pentru toti, editat manual; site dinamic = continut construit din date care se schimba, la fiecare cerere

Vrei mai mult?

Provocare: Scrie in Notepad un paragraf de text lung, cu spatii multiple intre cuvinte si cateva randuri goale, dar NU il pune in interiorul unui tag <p> — scrie-l direct in <body>. Deschide fisierul in browser si observa exact cum apare textul. Apoi adauga <br> intre randuri si vezi ce se schimba.

De ce? De ce au nevoie browserele de un "mod special" (quirks mode) pentru paginile vechi, in loc sa foloseasca mereu regulile HTML5 actuale pentru orice pagina?

Deschidere: Site-urile mici de firma, ca cele pe care le vei construi in urmatoarele lectii, sunt de obicei site-uri statice, gazduite gratuit pe platforme precum Netlify sau GitHub Pages — fara baza de date, fara server care "construieste" pagina la fiecare vizitator.

Urmatoarea lectie

Continua cu Elemente de continut — liste, tabele, imagini cu text alternativ, harti de imagini, sunet si video, butoane si campuri de formular, cadre si de ce nu se mai folosesc.

Continua →