Structura HTML

HTML = HyperText Markup Language

HTML (HyperText Markup Language) este limbajul folosit pentru a crea pagini web. Dar atentie: HTML nu este un limbaj de programare ! Este un limbaj de marcare (markup). Diferenta este importanta: un limbaj de programare (precum Python sau JavaScript) poate face calcule si lua decizii, pe cand HTML doar descrie structura unei pagini. Ii spui browserului: "asta e un titlu", "asta e un paragraf", "asta e o imagine" - si el stie cum sa le afiseze.

Gandeste-te la HTML ca la scheletul unui corp uman. Fara schelet, corpul nu ar avea forma. La fel, fara HTML, o pagina web nu ar avea structura. CSS-ul (pe care il vei invata mai tarziu) este ca pielea si hainele - adauga culori, fonturi si aspect vizual. JavaScript este ca muschii si nervii - adauga miscare si interactivitate. Dar totul incepe cu scheletul HTML.

Cuvantul HyperText se refera la textul care contine link-uri catre alte pagini. Inainte de internet, textele erau liniare - le citeai de la inceput la sfarsit. HyperText a schimbat asta: poti sari de la o pagina la alta printr-un simplu click. Cuvantul Markup inseamna "marcare" - adaugi etichete (tag-uri) pentru a marca fiecare element din pagina.

HTML a fost inventat in 1991 de Tim Berners-Lee , un cercetator britanic la CERN (Organizatia Europeana pentru Cercetare Nucleara din Geneva). El a vrut o metoda simpla prin care oamenii de stiinta sa poata partaja documente legate intre ele prin link-uri. Astazi, dupa peste 30 de ani, HTML ramane fundatia fiecarei pagini web din lume - de la Google la YouTube, de la Wikipedia la Instagram.

Versiunea actuala este HTML5 , lansata oficial in 2014. HTML5 a adaugat suport pentru video, audio, desen (canvas), formulare avansate si multe altele. Cand scrii o pagina HTML astazi, folosesti HTML5 implicit - doar trebuie sa adaugi declaratia corecta la inceput, pe care o vei invata in atomul urmator.

Este important sa intelegi ca HTML lucreaza impreuna cu alte doua tehnologii: CSS (pentru aspect vizual) si JavaScript (pentru interactivitate). Impreuna, cele trei formeaza baza oricarui site web modern. In aceasta lectie ne concentram exclusiv pe HTML - fundatia pe care se construieste tot restul. Fara HTML solid, nici CSS-ul si nici JavaScript-ul nu pot functiona corect.

Ce este HTML?

A Un limbaj de programare

B Un limbaj de marcare (markup)

C Un program de desenat

DOCTYPE - declaratia de inceput

Prima linie din orice pagina HTML trebuie sa fie <!DOCTYPE html> . Aceasta declaratie ii spune browserului: "Aceasta pagina foloseste HTML5" (versiunea moderna de HTML). Nu este un tag HTML propriu-zis, ci o instructiune pentru browser.

Gandeste-te la DOCTYPE ca la coperta unei carti. Cand deschizi o carte, vezi pe coperta limba in care e scrisa, editia si formatul. La fel, DOCTYPE ii spune browserului in ce "limba" si "editie" este scrisa pagina, astfel incat sa o interpreteze corect.

Fara DOCTYPE, browserul intra in asa-numitul "quirks mode" (mod de compatibilitate vechi). In acest mod, browserul incearca sa ghiceasca cum sa afiseze pagina, ceea ce poate duce la erori de afisare. De exemplu, dimensiunile elementelor pot fi calculate diferit, fonturile pot arata altfel, si layout-ul se poate strica. Este ca si cum ai incerca sa citesti o carte in romana folosind regulile gramaticii franceze - rezultatul ar fi confuz.

In versiunile mai vechi de HTML, declaratia DOCTYPE era mult mai lunga si greu de memorat. De exemplu, in HTML 4.01 arata asa: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> . HTML5 a simplificat enorm lucrurile: doar <!DOCTYPE html> si gata!

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>...</body>
</html>

Un detaliu important: DOCTYPE nu este case-sensitive (nu conteaza daca scrii cu litere mari sau mici). Poti scrie <!DOCTYPE html> , <!doctype html> sau chiar <!Doctype Html> si toate functioneaza. Totusi, conventia standard este sa scrii <!DOCTYPE html> cu DOCTYPE in litere mari.

Un alt lucru de retinut: DOCTYPE trebuie sa fie chiar prima linie din fisier, fara spatii sau linii goale inainte. Daca pui o linie goala sau un comentariu inaintea lui, unele browsere mai vechi pot intra in quirks mode. In practica moderna acest risc este mic, dar este o buna obisnuinta sa respecti aceasta regula de la inceput.

Poti verifica in ce mod lucreaza browserul apasand tasta F12 pentru a deschide Developer Tools, apoi cautand informatia despre "document mode" sau "rendering mode". Daca vezi "Standards mode" sau "No Quirks Mode", inseamna ca DOCTYPE functioneaza corect si pagina ta este interpretata conform standardelor moderne HTML5.

Ce spune declaratia <!DOCTYPE html>?

A Ca pagina are erori

B Ca pagina foloseste HTML5

C Numele autorului paginii

Tag-uri: deschidere si inchidere

Elementele HTML sunt definite prin tag-uri (etichete). Fiecare element are un tag de deschidere si un tag de inchidere . Tag-ul de deschidere arata ca numele elementului incadrat de paranteze unghiulare: <p> . Tag-ul de inchidere este identic, dar are un slash (/) inainte de nume: </p> .

Gandeste-te la tag-uri ca la ghilimelele unui citat. Cand incepi un citat, deschizi ghilimelele. Cand il termini, inchizi ghilimelele. Daca uiti sa inchizi, nu se stie unde se termina citatul. La fel in HTML: daca uiti tag-ul de inchidere, browserul nu stie unde se termina elementul si poate afisa pagina incorect.

<p>Acesta este un paragraf</p>
 ^                         ^
 |                         |
tag deschidere       tag inchidere (cu /)

<h1>Titlu mare</h1>
<h2>Subtitlu</h2>
<strong>Text bold</strong>

Exista si cateva tag-uri speciale care nu au tag de inchidere . Acestea se numesc tag-uri self-closing (auto-inchise). Cele mai comune sunt: <img> (imagine), <br> (rand nou), <hr> (linie orizontala) si <input> (camp de formular). Aceste tag-uri nu au continut intre ele - de exemplu, o imagine nu are text "in interiorul" ei.

O greseala frecventa este sa confunzi <p/> cu </p> . Slash-ul trebuie sa fie inainte de numele tag-ului, nu dupa. Daca scrii <p/> , browserul nu va intelege ce vrei sa faci. Alta greseala comuna este sa uiti complet tag-ul de inchidere. Browserele moderne sunt "inteligente" si incearca sa repare erorile, dar nu te baza pe asta - scrie intotdeauna codul corect.

Tag-urile pot fi imbricate (nested) - adica poti pune un element in interiorul altuia. De exemplu, poti pune text bold in interiorul unui paragraf: <p>Text normal si <strong>text bold</strong></p> . Regula importanta: tag-urile trebuie inchise in ordinea inversa deschiderii, ca niste cutii una in alta. Nu poti inchide cutia exterioara inainte de cea interioara.

Iata un exemplu de imbricare corecta versus gresita :

<!-- CORECT: inchidere in ordine inversa -->
<p><strong>Text bold</strong></p>

<!-- GRESIT: tag-urile se incaleca -->
<p><strong>Text bold</p></strong>

In exemplul gresit, tag-ul </p> se inchide inainte de </strong> , desi <strong> a fost deschis dupa <p> . Aceasta eroare se numeste "overlapping tags" si poate cauza probleme de afisare. Browserele incearca sa corecteze astfel de erori, dar rezultatul nu este intotdeauna cel dorit.

Cum arata un tag de inchidere corect?

A <p>

B <p/>

C </p>

Sectiunea <head> - creierul paginii

Sectiunea <head> contine informatii despre pagina , nu continut vizibil. Este ca eticheta de pe spatele unui produs: contine informatii importante (ingrediente, producator, data expirarii), dar nu le vezi cand folosesti produsul. La fel, continutul din <head> nu apare pe pagina, dar este esential pentru ca pagina sa functioneze corect.

Cele mai importante elemente din <head> sunt:

<title> - titlul paginii, care apare in tab-ul browserului (nu pe pagina!)
<meta charset="UTF-8"> - spune browserului sa foloseasca setul de caractere UTF-8, care include litere romanesti (a, i, s, t, a)
<meta name="viewport"> - face pagina sa arate bine pe telefoane mobile
<link rel="stylesheet"> - leaga un fisier CSS pentru stilizare

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pagina mea</title>
  <link rel="stylesheet" href="stil.css">
</head>

Un aspect important: ordinea elementelor din <head> conteaza! Tag-ul <meta charset="UTF-8"> trebuie sa fie printre primele, pentru ca browserul sa stie cum sa interpreteze caracterele speciale din restul documentului. Daca il pui la sfarsit, titlul paginii ar putea afisa caractere ciudate in loc de litere romanesti.

Tag-ul <title> are si alte roluri importante pe langa afisarea in tab. Cand salvezi o pagina web ca bookmark (semn de carte), textul din <title> devine numele bookmark-ului. De asemenea, motoarele de cautare precum Google folosesc <title> ca titlu al rezultatului in pagina de cautare. Un titlu clar si descriptiv ajuta atat utilizatorii, cat si motoarele de cautare sa inteleaga despre ce este pagina.

Un sfat pentru titluri bune: pastreaza titlul intre 30 si 60 de caractere . Un titlu prea scurt (de exemplu "Pagina") nu spune nimic util. Un titlu prea lung va fi taiat de Google in rezultatele cautarii. Un titlu ideal descrie clar continutul, de exemplu: "Retete de prajituri simple - Bucataria Mariei".

Ce contine sectiunea <head>?

A Textul vizibil pe pagina

B Informatii invizibile (titlu, setari, link-uri CSS)

C Imaginile si butoanele

Sectiunea <body> - corpul paginii

Tot ce vrei sa apara pe pagina (texte, imagini, butoane, link-uri, videoclipuri) trebuie scris in sectiunea <body> . Daca <head> este creierul paginii (informatii ascunse), <body> este corpul - tot ce vede si cu ce interactioneaza utilizatorul.

In <body> folosesti diverse tag-uri pentru a crea continut. Cele mai folosite sunt:

<h1> pana la <h6> - titluri de diferite dimensiuni (h1 = cel mai mare, h6 = cel mai mic)
<p> - paragraf de text
<img> - imagine
<a> - link (ancora) catre alta pagina
<div> - container generic pentru gruparea elementelor

<body>
  <h1>Bine ai venit!</h1>
  <p>Aceasta este pagina mea.</p>
  <img src="poza.jpg" alt="O poza frumoasa">
  <a href="https://google.com">Cauta pe Google</a>
</body>

O confuzie frecventa: tag-ul <title> din <head> nu apare pe pagina! El apare doar in tab-ul browserului. Daca vrei un titlu vizibil pe pagina, folosesti <h1> in <body> . Multi incepatori pun titlul in <title> si se intreaba de ce nu apare pe pagina - acum stii de ce!

Ordinea elementelor din <body> conteaza: browserul afiseaza elementele in ordinea in care le gaseste in cod. Primul element din <body> apare sus pe pagina, ultimul apare jos. Aceasta ordine se numeste document flow (fluxul documentului) si este conceptul fundamental pentru intelegerea layout-ului paginilor web.

Un sfat practic: scrie intotdeauna un singur <h1> pe pagina (titlul principal) si foloseste <h2> , <h3> etc. pentru subtitluri. Motoarele de cautare precum Google se uita la structura titlurilor pentru a intelege continutul paginii. O pagina cu titluri bine organizate se pozitioneaza mai bine in rezultatele cautarilor.

Tag-ul <div> merita o mentiune speciala. Este un container generic care nu are o semnificatie proprie, dar este extrem de util pentru a grupa elemente impreuna. De exemplu, poti pune un titlu, un paragraf si o imagine intr-un <div> si apoi aplica stiluri CSS pe intregul grup. Gandeste-te la <div> ca la o cutie transparenta in care pui diverse obiecte pentru a le organiza.

HTML5 a introdus si tag-uri semantice care au o semnificatie clara: <header> (antetul paginii), <nav> (meniul de navigare), <main> (continutul principal), <article> (un articol independent), <section> (o sectiune tematica), <footer> (subsolul paginii). Aceste tag-uri functioneaza la fel ca <div> , dar comunica si semnificatia continutului catre browsere, motoare de cautare si screen readere.

Unde scrii continutul vizibil al paginii?

A In <head>

B In <body>

C In <title>

Meta tag-uri esentiale

Tag-urile <meta> ofera informatii suplimentare despre pagina ta. Sunt ca niste "setari de configurare" ascunse. Cele mai importante pentru un incepator sunt doua: charset si viewport .

charset="UTF-8" este absolut esential pentru paginile in limba romana. UTF-8 este un standard de codificare care include toate caracterele din lume: litere romanesti cu diacritice (a, i, s, t, a), litere chinezesti, emoji-uri si multe altele. Fara acest meta tag, browserul ar putea afisa caractere ciudate in loc de diacritice - de exemplu, "Ã®" in loc de "i" sau "Å£" in loc de "t".

viewport este esential pentru telefoane mobile. Tag-ul <meta name="viewport" content="width=device-width, initial-scale=1.0"> ii spune browserului mobil sa foloseasca latimea ecranului dispozitivului si sa nu faca zoom out automat. Fara acest tag, pagina ta ar aparea minuscul pe telefon, ca si cum ai vedea un site de desktop micsorat pe un ecran mic.

<!-- Obligatoriu pentru caractere romanesti -->
<meta charset="UTF-8">

<!-- Obligatoriu pentru telefoane mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Optional dar recomandat -->
<meta name="description" content="Descrierea paginii mele">
<meta name="author" content="Numele tau">

Mai exista si alte meta tag-uri utile. <meta name="description"> ofera o scurta descriere a paginii, pe care Google o afiseaza sub titlu in rezultatele cautarii. <meta name="author"> specifica autorul paginii. Desi nu sunt obligatorii, aceste tag-uri fac pagina ta mai "profesionala" si mai usor de gasit pe internet.

Un aspect interesant: meta tag-urile sunt self-closing - nu au tag de inchidere. Scrii doar <meta charset="UTF-8"> , fara </meta> . Aceasta regula se aplica si altor tag-uri precum <img> , <br> si <hr> . De ce? Pentru ca aceste tag-uri nu au "continut" intre ele - transmit doar informatii prin atributele lor.

Un sfat practic: cand creezi o pagina noua, incepe intotdeauna cu cele doua meta tag-uri obligatorii ( charset si viewport ) inainte de a adauga orice alt continut in <head> . Astfel te asiguri ca pagina va afisa corect caracterele romanesti si se va adapta la ecranele mobile de la bun inceput, evitand surprize neplacute mai tarziu.

Ce face tag-ul <meta charset=UTF-8>?

A Schimba culoarea textului

B Permite afisarea corecta a caracterelor speciale (diacritice)

C Adauga o imagine pe pagina

Atribute HTML

Atributele sunt informatii suplimentare pe care le adaugi tag-urilor pentru a le personaliza comportamentul. Ele se scriu intotdeauna in tag-ul de deschidere , niciodata in cel de inchidere. Formatul este: nume="valoare" .

Gandeste-te la atribute ca la specificatiile unui produs. Un tricou (elementul) are marime, culoare si material (atributele). La fel, un element HTML poate avea diverse atribute care ii modifica comportamentul sau aspectul. De exemplu, o imagine ( <img> ) are atributul src care spune browserului de unde sa incarce poza.

<!-- src = sursa imaginii, alt = text alternativ -->
<img src="poza.jpg" alt="O poza frumoasa">

<!-- href = adresa link-ului -->
<a href="https://google.com">Cauta pe Google</a>

<!-- id = identificator unic, class = clasa CSS -->
<div id="header" class="container">...</div>

<!-- style = stil CSS inline -->
<p style="color: red;">Text rosu</p>

Cele mai importante atribute pe care le vei folosi frecvent sunt: src (sursa pentru imagini), href (adresa pentru link-uri), alt (text alternativ pentru imagini - apare cand imaginea nu se incarca si este citit de screen readere pentru persoanele cu dizabilitati vizuale), id (identificator unic - un singur element poate avea un anumit id), class (clasa CSS - mai multe elemente pot avea aceeasi clasa).

O regula importanta: id trebuie sa fie unic pe pagina. Nu poti avea doua elemente cu acelasi id. Daca ai nevoie sa aplici aceleasi stiluri pe mai multe elemente, foloseste class in loc de id . Gandeste-te la id ca la numarul tau de buletin (unic) si la class ca la uniforma scolara (aceeasi pentru toti elevii din scoala).

Atributul alt la imagini este nu doar o buna practica, ci si o cerinta de accesibilitate . Persoanele cu dizabilitati vizuale folosesc programe numite screen readere care citesc cu voce tare continutul paginii. Cand ajung la o imagine, citesc textul din alt . Fara alt , persoana nu stie ce reprezinta imaginea. De aceea, scrie intotdeauna un text descriptiv in alt .

Valorile atributelor se scriu intotdeauna intre ghilimele duble ( "valoare" ). Tehnic, ghilimelele simple ( 'valoare' ) functioneaza si ele, dar conventia standard in HTML este sa folosesti ghilimele duble. Fii consistent in tot documentul - nu amesteca tipurile de ghilimele.

Unele atribute sunt booleane - nu au nevoie de o valoare, simpla lor prezenta activeaza functionalitatea. De exemplu, <input disabled> dezactiveaza un camp de formular, iar <video autoplay> porneste un videoclip automat. Aceste atribute fie sunt prezente (activate), fie lipsesc (dezactivate) - nu au valori intermediare.

Ce sunt atributele HTML?

A Erori in cod

B Informatii suplimentare adaugate in tag-ul de deschidere

C Tag-uri de inchidere speciale

Conectarea CSS la HTML

HTML defineste structura paginii, dar fara CSS (Cascading Style Sheets), pagina ta va arata foarte simpla - text negru pe fundal alb, fara culori, fara fonturi frumoase, fara layout. CSS-ul se poate include in HTML in trei moduri diferite, fiecare cu avantajele si dezavantajele sale.

Metoda 1: CSS extern (recomandata) - scrii stilurile intr-un fisier separat (de exemplu stil.css ) si il legi de HTML cu tag-ul <link> in sectiunea <head> . Aceasta metoda este cea mai buna pentru ca poti folosi acelasi fisier CSS pe mai multe pagini HTML, iar daca vrei sa schimbi o culoare, o schimbi intr-un singur loc.

Metoda 2: CSS intern - scrii stilurile direct in HTML, intre tag-urile <style> in <head> . Aceasta metoda este utila pentru pagini mici sau pentru stiluri specifice unei singure pagini.

Metoda 3: CSS inline - scrii stilurile direct pe element, folosind atributul style . Aceasta metoda este cea mai putin recomandata, pentru ca face codul greu de intretinut. O folosesti doar pentru modificari rapide sau exceptii.

<!-- Metoda 1: CSS extern (RECOMANDAT) -->
<link rel="stylesheet" href="stil.css">

<!-- Metoda 2: CSS intern -->
<style>
  h1 { color: blue; }
  p { font-size: 16px; }
</style>

<!-- Metoda 3: CSS inline (evita!) -->
<p style="color: red; font-size: 20px;">Text rosu</p>

Analogie utila: CSS extern este ca o uniforma scolara - regulile sunt definite intr-un singur loc si se aplica tuturor. CSS intern este ca o nota lipita pe usa clasei - se aplica doar in acea clasa. CSS inline este ca o eticheta cusuta pe un singur tricou - se aplica doar acelui element. In general, uniforma (CSS extern) este cea mai eficienta metoda.

Un avantaj major al CSS-ului extern este separarea responsabilitatilor (separation of concerns). HTML se ocupa de structura, CSS se ocupa de aspect. Aceasta separare face codul mai usor de intretinut: daca vrei sa schimbi designul site-ului, modifici doar fisierul CSS fara sa atingi HTML-ul. Daca vrei sa schimbi continutul, modifici HTML-ul fara sa atingi CSS-ul.

In proiectele mari, aceasta separare este esentiala. Un site web profesional poate avea zeci de pagini HTML care folosesc toate acelasi fisier CSS. Daca clientul decide sa schimbe culoarea principala a brand-ului, modifici o singura linie in CSS si schimbarea se reflecta instantaneu pe toate paginile.

Un aspect tehnic important: cand browserul incarca o pagina, mai intai descarca HTML-ul, apoi descarca fisierele CSS. Daca fisierul CSS este mare sau serverul este lent, utilizatorul poate vedea pentru o fractiune de secunda pagina fara stiluri (numita FOUC - Flash of Unstyled Content). De aceea, tag-ul <link> trebuie pus in <head> , cat mai devreme posibil, pentru ca browserul sa inceapa descarcarea CSS-ului cat mai repede.

Ce tag folosesti pentru a include un fisier CSS extern?

A <style src=stil.css>

B <link rel=stylesheet href=stil.css>

C <css file=stil.css>

Indentarea si organizarea codului

Indentarea inseamna adaugarea de spatii la inceputul liniilor pentru a arata clar care elemente sunt in interiorul altora. Browserul ignora complet indentarea - pagina arata la fel indiferent daca folosesti indentare sau nu. Dar pentru tine, ca programator, indentarea face diferenta intre cod lizibil si cod imposibil de inteles.

Compara aceste doua variante ale aceluiasi cod:

<!-- GRESIT - fara indentare (greu de citit) -->
<html><head><title>Pagina</title></head><body><h1>Salut</h1><p>Text</p></body></html>

<!-- CORECT - cu indentare (usor de citit) -->
<html>
  <head>
    <title>Pagina</title>
  </head>
  <body>
    <h1>Salut</h1>
    <p>Text</p>
  </body>
</html>

Regula standard este sa folosesti 2 sau 4 spatii pentru fiecare nivel de indentare. Daca un element este in interiorul altuia, il indentezi cu un nivel. De exemplu, <title> este in interiorul <head> , care este in interiorul <html> , deci <title> are doua niveluri de indentare.

Gandeste-te la indentare ca la o scara. Fiecare nivel de imbricare (nesting) este o treapta. Elementul <html> este pe treapta 0 (lipita de marginea stanga). <head> si <body> sunt pe treapta 1 (un nivel de indentare). <title> este pe treapta 2 (doua niveluri). Cand inchizi un element, revii la treapta precedenta.

Un alt element de organizare sunt comentariile . In HTML, comentariile se scriu intre  . Browserul ignora complet comentariile - sunt doar pentru tine si pentru colegii care citesc codul. Foloseste-le pentru a marca sectiunile importante ale paginii. De exemplu:  ,  ,  .

In practica profesionala, programatorii folosesc editoare de cod (code editors) care fac indentarea automat. Cele mai populare sunt Visual Studio Code (VS Code), Sublime Text si Atom . VS Code este gratuit si il recomandam - are evidentierea sintaxei (syntax highlighting) care coloreaza diferit tag-urile, atributele si textul, facand codul si mai usor de citit.

Un alt instrument util este validatorul W3C (validator.w3.org). Acesta este un site gratuit unde poti lipi codul tau HTML si verifica daca are erori. Validatorul iti arata exact pe ce linie se afla eroarea si ce trebuie corectat. Este ca un "corector ortografic" pentru HTML - il poti folosi oricand vrei sa te asiguri ca pagina ta respecta standardele oficiale.

De ce este importanta indentarea codului HTML?

A Browserul nu afiseaza pagina fara indentare

B Face codul mai usor de citit si de inteles

C Schimba culorile textului

Sablonul complet HTML5

Acum ca ai invatat fiecare componenta, iata sablonul complet al unei pagini HTML5. Acest sablon este punctul de plecare pentru orice pagina web pe care o vei crea. Memoreaza-l sau salveaza-l intr-un fisier pe care sa il copiezi de fiecare data cand incepi un proiect nou.

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titlul paginii mele</title>
  <link rel="stylesheet" href="stil.css">
</head>
<body>
  <h1>Bine ai venit!</h1>
  <p>Aceasta este prima mea pagina web.</p>
</body>
</html>

Observa atributul lang="ro" pe tag-ul <html> . Acesta spune browserului si motoarelor de cautare ca pagina este in limba romana . Este important pentru accesibilitate (screen readere stiu in ce limba sa citeasca textul) si pentru SEO (motoarele de cautare stiu cui sa afiseze pagina). Alte valori comune sunt: lang="en" (engleza), lang="fr" (franceza), lang="de" (germana).

Iata ordinea corecta a elementelor, pe care trebuie sa o respecti mereu:

<!DOCTYPE html> - declaratia de tip (prima linie, obligatorie)
<html lang="ro"> - elementul radacina care contine totul
<head> - informatii despre pagina (meta, title, link CSS)
<body> - continutul vizibil al paginii
</html> - inchiderea elementului radacina (ultima linie)

Un truc util: in Visual Studio Code, poti genera acest sablon instant tastind ! (semnul exclamarii) si apasand Tab . Editorul creeaza automat intreaga structura HTML5 completa. Acest tip de scurtatura se numeste Emmet si iti va economisi mult timp in viitor.

Cand salvezi fisierul, foloseste intotdeauna extensia .html (de exemplu: index.html , despre.html , contact.html ). Fisierul principal al oricarui site web se numeste traditional index.html - acesta este fisierul pe care serverul il incarca automat cand cineva acceseaza adresa site-ului fara sa specifice un fisier anume.

Felicitari! Acum cunosti structura fundamentala a oricarei pagini web din lume. De la site-urile celor mai mari companii pana la blogurile personale, toate incep cu aceeasi structura pe care ai invatat-o in aceasta lectie. In lectiile urmatoare vei invata sa adaugi continut bogat (texte formatate, imagini, link-uri) si sa il stilizezi cu CSS.

Un exercitiu util pe care il poti face chiar acum: deschide Notepad (sau orice editor de text), scrie sablonul complet de mai sus, salveaza fisierul cu extensia .html (de exemplu prima_pagina.html ) si deschide-l in browser (dublu-click pe fisier). Vei vedea pagina ta afisata! Modifica textul din <h1> si <p> , salveaza din nou si reincarca pagina in browser (apasa F5) pentru a vedea schimbarile.

Retine aceasta regula de aur: fiecare pagina HTML are exact un <html>, exact un <head> si exact un <body> . Nu poti avea doua sectiuni <body> sau doua sectiuni <head> in acelasi document. Aceasta structura clara si simpla este motivul pentru care HTML a rezistat peste 30 de ani ca fundatie a web-ului mondial.

Pe masura ce vei avansa, vei descoperi ca acest sablon se extinde cu elemente noi, dar nucleul ramane identic. Orice site web pe care il vizitezi zilnic - de la retelele sociale la magazinele online - porneste exact de la aceasta structura fundamentala pe care acum o stapanesti.

Care este structura corecta si completa a unui document HTML5?

A <html><body>continut</body></html>

B <!DOCTYPE html><html><head>...</head><body>...</body></html>

C <head><body>continut</body></head>

Exercitii practice

Exercitiul 1 (Nivel minim) - Analiza structura HTML

Deschide orice site web (de exemplu google.ro, wikipedia.org sau un site preferat) si foloseste functia View Page Source (Click dreapta → View Page Source sau Ctrl+U) pentru a vedea codul HTML. Analizeaza cu atentie structura paginii si raspunde la urmatoarele intrebari:

Gasesti declaratia <!DOCTYPE html> la inceput? Ce versiune de HTML foloseste site-ul?
Ce tag-uri meta gasesti in sectiunea <head>? Listeaza cel putin 3 si explica la ce serveste fiecare.
Cate fisiere CSS externe are pagina? (cauta tag-urile <link rel="stylesheet">)
Ce atribut lang are tag-ul <html>? In ce limba este pagina?

Raspunde numerotat: 1. ... 2. ... 3. ... 4. ...

Sfat: incearca sa compari codul sursa a doua site-uri diferite. Observa ce au in comun si ce difera. Vei vedea ca structura de baza (DOCTYPE, html, head, body) este identica pe toate site-urile!

Exercitiul 2 (Nivel standard) - Mini-proiect: Prima ta pagina HTML

Creeaza o pagina HTML completa despre un subiect care te pasioneaza (un hobby, un sport, un joc, un film preferat). Pagina trebuie sa aiba structura corecta si continut variat.

Cerinte obligatorii:

Declaratia <!DOCTYPE html> pe prima linie
Tag-ul <html lang="ro"> cu atributul de limba
Sectiunea <head> cu: meta charset, meta viewport, title
In <body>: cel putin un titlu <h1> si doua subtitluri <h2>
Cel putin 3 paragrafe <p> cu text propriu (nu copiat!)
Cel putin o imagine <img> cu atributul alt descriptiv
Cel putin un link <a> catre un site extern
Cod indentat corect si comentarii HTML care marcheaza sectiunile

⭐ Bonus (pentru nota maxima):

Adauga un fisier CSS extern care schimba culoarea de fundal si fontul textului
Foloseste toate nivelurile de titlu de la <h1> la <h4>
Adauga o lista neordonata <ul> sau ordonata <ol> cu cel putin 4 elemente
Include tag-urile meta description si meta author in <head>

Salveaza fisierul ca "prima_pagina.html" si deschide-l in browser pentru a verifica ca totul arata corect. Trimite fisierul profesorului prin platforma scolara.

Exercitiul 3 (Nivel performanta) - Compunere

Cerinta: Scrie un text de 8-10 randuri in care explici structura unui document HTML5. Descrie cele doua sectiuni principale (<head> si <body>), rolul fiecareia si ce elemente contine fiecare. Argumenteaza de ce este importanta scrierea corecta a structurii HTML pentru functionarea unei pagini web.

Indicii pentru structurarea raspunsului:

Incepe prin a explica ce este HTML si de ce nu este un limbaj de programare
Descrie rolul declaratiei DOCTYPE si de ce este obligatorie
Explica diferenta dintre <head> (informatii invizibile) si <body> (continut vizibil)
Da exemple concrete de tag-uri care merg in fiecare sectiune
Mentioneaza importanta meta tag-urilor pentru diacritice si dispozitive mobile
Incheie cu importanta indentarii si organizarii codului

Cuvinte cheie de folosit: HTML5, DOCTYPE, head, body, tag, atribut, meta, charset, viewport, indentare, structura

Format: Scrie raspunsul intr-un document (Word sau text), folosind paragrafe coerente. Salveaza si trimite profesorului.

Obiectivul lectiei

Dupa aceasta lectie vei putea: