1. DOCTYPE si Structura de Baza

1

Fundatia pe care se construieste orice pagina web

Fiecare document HTML incepe cu o declaratie DOCTYPE si contine trei elemente esentiale: <html>, <head> si <body>.

<!DOCTYPE html> — este prima linie din orice pagina web. Nu este un tag HTML propriu-zis, ci o instructiune care spune browser-ului: "Acest document foloseste HTML5, cea mai noua versiune."

Analogy

🏠 Analogie din viata reala

Gandeste-te la o casa. Inainte de a construi, ai nevoie de un plan (DOCTYPE) care spune ce tip de constructie faci. Apoi casa are o structura (<html>) formata din doua parti: acoperisul (<head>) — care protejeaza si contine lucruri invizibile din exterior (izolatie, cabluri) — si camerele (<body>) — unde locuiesti si unde se vede totul.

Visual Tree Diagram

Structura unui Document HTML

<!DOCTYPE html> ← Declaratie: "Folosesc HTML5"

<html lang="ro"> ← Elementul radacina (contine tot)

<head> ← Informatii invizibile

<title> Titlul din tab-ul browser-ului

<body> ← Continutul vizibil

<h1>, <p>, etc. Ce vede utilizatorul

Code example

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pagina Mea</title>
</head>
<body>
    <!-- Continutul paginii vine aici -->
</body>
</html>

Info boxes

ℹ️

Ce face fiecare element?

<html lang="ro"> — Containerul principal. Atributul lang="ro" spune browser-ului ca pagina este in romana.
<head> — Contine informatii invizibile: titlul din tab, setul de caractere, legaturi catre stiluri.
<body> — Contine tot ce vede utilizatorul pe pagina: texte, imagini, linkuri.

💡

Sfat important

<meta charset="UTF-8"> permite afisarea corecta a caracterelor speciale si a diacriticelor romanesti (a, i, s, t). Fara el, literele cu diacritice pot aparea ca simboluri ciudate!

2

2. Sectiunea — Creierul Paginii

2

Informatii importante pe care browser-ul le citeste, dar utilizatorul nu le vede

Sectiunea <head> contine metadate — informatii despre pagina, nu continutul paginii in sine. Cele mai importante elemente sunt:

<title> — Textul care apare in tab-ul browser-ului si in rezultatele Google.

<meta> — Tag-uri care furnizeaza informatii suplimentare: setul de caractere, descrierea paginii, compatibilitatea cu mobilul.

Analogy

📱 Analogie: Profilul de pe Instagram

Gandeste-te la profilul tau de Instagram. <title> este ca numele de utilizator — apare in bara de sus si cand cineva te cauta. <meta> sunt ca setarile contului: limba, confidentialitatea, descrierea — informatii pe care aplicatia le foloseste, dar nu le afiseaza direct in feed.

Tags table

Elemente comune din <head>

Element	Ce face	Exemplu
`<title>`	Titlul din tab-ul browser-ului	`<title>Pagina Mea</title>`
`<meta charset>`	Setul de caractere (pentru diacritice)	`<meta charset="UTF-8">`
`<meta viewport>`	Compatibilitate cu ecranele mobile	`<meta name="viewport" ...>`
`<meta description>`	Descrierea paginii (pentru Google)	`<meta name="description" content="...">`

⚠️

Atentie!

Tag-ul <title> este obligatoriu in orice pagina HTML. Fara el, tab-ul browser-ului va arata doar calea fisierului, ceea ce arata neprofesional. In plus, motoarele de cautare (Google) folosesc <title> ca titlu al rezultatului.

<head>
    <!-- Setul de caractere - MEREU primul! -->
    <meta charset="UTF-8">

    <!-- Compatibilitate cu telefonul -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Titlul din tab -->
    <title>Portofoliul lui Andrei | Clasa a VIII-a</title>

    <!-- Descriere pentru Google -->
    <meta name="description" content="Portofoliul meu online cu proiecte de scoala">
</head>

3

3. Titluri

-

si Paragrafe

3

Elementele care dau structura si claritate continutului vizibil

In HTML exista 6 niveluri de titluri, de la <h1> (cel mai important) la <h6> (cel mai putin important). Tag-ul <p> defineste un paragraf de text.

Analogy

📖 Analogie: Cuprinsul unei carti

Gandeste-te la cuprinsul unei carti. Titlul cartii este <h1> (apare o singura data). Capitolele sunt <h2>. Sub-capitolele sunt <h3>. Iar textul propriu-zis din carte este <p>. Nu ai pune un subtitlu inaintea titlului principal — la fel si in HTML, respecti ierarhia.

Headings visual demo

Cum arata cele 6 niveluri de titluri

<h1> Titlu Principal ← cel mai mare (1 per pagina)

<h2> Capitol ← sectiuni principale

<h3> Sub-capitol ← sub-sectiuni

<h4> Sectiune mica ← detalii

<h5> Detaliu ← rar folosit

<h6> Sub-detaliu ← cel mai mic

❌

Greseala frecventa

Nu folosi titlurile doar pentru a face textul mai mare! Titlurile au un rol semantic — ele spun browser-ului si motoarelor de cautare care sunt sectiunile importante. Daca vrei text mare fara a fi titlu, foloseste CSS (stiluri), nu <h1>.

💡

Regula de aur

Foloseste un singur <h1> pe pagina (titlul principal). Apoi poti avea mai multe <h2>, sub fiecare <h2> poti avea <h3>, si asa mai departe. Nu sari niveluri — nu trece de la <h1> direct la <h4>!

Code example: headings and paragraphs

<body>
    <h1>Portofoliul Meu Online</h1>
    <p>Bine ai venit pe pagina mea personala!</p>

    <h2>Despre Mine</h2>
    <p>Ma numesc Andrei si sunt elev in clasa a VIII-a.</p>
    <p>Imi place informatica si sportul.</p>

    <h2>Proiectele Mele</h2>
    <h3>Proiect la TIC</h3>
    <p>Am creat un grafic in Excel despre temperatura.</p>
    <h3>Proiect Personal</h3>
    <p>Am invatat sa fac o pagina web de la zero!</p>
</body>

ℹ️

Tag-ul <p> — Paragraful

Browser-ul adauga automat spatiu inainte si dupa fiecare paragraf <p>. Daca scrii text fara <p>, textul va fi lipit intr-un singur bloc. Fiecare idee sau propozitie noua ar trebui sa fie in propriul paragraf.

4

4. Imbricare (Nesting) si Indentare

4

Regulile care fac codul tau curat, organizat si corect

Imbricarea (nesting) inseamna sa pui tag-uri in interiorul altor tag-uri, respectand o ierarhie corecta. Indentarea inseamna sa adaugi spatii la inceputul liniei pentru a face codul mai usor de citit.

Analogy

🎒 Analogie: Papusi Matrioska

Imbricarea in HTML functioneaza ca papusile rusesti Matrioska: o papusa mare contine una mai mica, care contine una si mai mica. In HTML, <html> contine <body>, care contine <h1>. Important: trebuie sa inchizi papusile in ordinea inversa — intai pe cea mica, apoi pe cea mare. Nu poti inchide papusa mare inainte de a o inchide pe cea mica!

Nesting visualization

Vizualizarea Imbricarii

<html> Nivel 0 — radacina

<head> Nivel 1 — in interiorul html

<title> Pagina Mea </title> Nivel 2

</head>

<body> Nivel 1 — in interiorul html

<h1> Titlu </h1> Nivel 2

<p> Paragraf </p> Nivel 2

</body>

</html>

Good vs Bad nesting

✅ Imbricare CORECTA

<html>
  <body>
    <h1>Titlu</h1>
    <p>Text.</p>
  </body>
</html>

Tag-urile se inchid in ordine inversa: ultimul deschis = primul inchis.

❌ Imbricare GRESITA

<html>
<body>
<h1>Titlu
<p>Text.</h1>
</p>
</html>
</body>

Tag-urile se incaleca (h1 se inchide dupa p) si ordinea de inchidere e gresita!

⚠️

Regula de Aur a Imbricarii

Tag-urile se inchid in ordine inversa deschiderii. Gandeste-te asa: primul deschis = ultimul inchis. Ca la un rucsac: primul obiect pus este ultimul scos.

💡

De ce conteaza indentarea?

Indentarea (spatiile de la inceputul liniei) nu afecteaza cum arata pagina in browser. Dar face codul mult mai usor de citit pentru tine si alti programatori. Foloseste 2 sau 4 spatii (sau un Tab) pentru fiecare nivel de imbricare. Imagineza-ti ca scrii un text fara paragrafe si alineate — ar fi imposibil de citit!

5

5. Exemplu Complet: Pagina "Portofoliul Meu"

🎯

Exemplu Complet: Pagina "Portofoliul Meu"

Iata o pagina HTML completa care foloseste toate conceptele invatate. Observa structura, imbricarea si indentarea:

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portofoliul lui Andrei</title>
    <meta name="description" content="Portofoliul meu online - proiecte si hobby-uri">
</head>
<body>
    <h1>Portofoliul lui Andrei</h1>
    <p>Bine ai venit! Aceasta este pagina mea personala.</p>

    <h2>Despre Mine</h2>
    <p>Ma numesc Andrei, am 14 ani si sunt elev in clasa a VIII-a
    la Colegiul National din Bucuresti.</p>
    <p>Sunt pasionat de tehnologie si sport.</p>

    <h2>Hobby-urile Mele</h2>

    <h3>Fotbal</h3>
    <p>Joc fotbal de 5 ani. Pozitia mea preferata este atacant.</p>

    <h3>Programare</h3>
    <p>Am inceput sa invat HTML si CSS. Visul meu este sa creez
    un joc video!</p>

    <h2>Proiecte de Scoala</h2>
    <p>Anul acesta am realizat mai multe proiecte interesante.</p>

    <h3>Grafice in Excel</h3>
    <p>Am creat grafice despre clima din Romania folosind date reale.</p>

    <h3>Prima Pagina Web</h3>
    <p>Aceasta pagina este primul meu proiect web!</p>
</body>
</html>

Step-by-step trace

🔍

Analiza pas cu pas a exemplului

Linia 1: <!DOCTYPE html> — spune browser-ului ca e HTML5
Linia 2: <html lang="ro"> — incepe documentul, limba romana
Liniile 3-7: <head> — metadate: charset, viewport, titlu, descriere
Liniile 8-30: <body> — continutul vizibil cu ierarhie: h1 > h2 > h3 > p
Ultima linie: </html> — inchide documentul

Observa cum h3 (Fotbal, Programare) este sub h2 (Hobby-urile Mele), iar textul explicativ este in tag-uri p. Fiecare nivel este indentat cu 4 spatii.

Structura unui Document HTML

Obiectivul lectiei

Dupa aceasta lectie vei putea:

Incearca singur!

✍️ Incearca Singur!

💡 Indicii (daca te blochezi):

1. DOCTYPE si Structura de Baza

2. Sectiunea — Creierul Paginii

3. Titluri

-

si Paragrafe

4. Imbricare (Nesting) si Indentare

5. Exemplu Complet: Pagina "Portofoliul Meu"

Exemplu Complet: Pagina "Portofoliul Meu"

Exercitii practice

Exercitiul 1 (Nivel minim) - 1. Pagina Web a Clasei Tale

Exercitiul 2 (Nivel standard) - 2. Corecteaza Pagina Gresita

Exercitiul 3 (Nivel performanta) - 3. Compara si Explica

Ce ai invatat astazi