1. DOCTYPE si Structura de Baza

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 carte. Inainte de a citi, ai nevoie de o coperta si date de editura (DOCTYPE + <head>) — informatii despre carte (titlul pe coperta, autorul, ISBN), pe care le citesti inainte de continut si nu fac parte din povestea in sine. Apoi vine textul propriu-zis al cartii (<body>) — tot ce citesti: capitole, paragrafe, imagini, tabele. Coperta nu se vede cand esti la pagina 50; la fel, <head> nu apare niciodata in pagina vizibila a browser-ului.

💡

Structura paginii — tehnic vs vizual (programa OMEN 3393/2017)

Programa vorbeste de antet, titlu, corp — acestea sunt cele trei zone vizuale ale unei pagini web finalizate:
Antet (header vizibil) — zona de sus a paginii pe care o vede utilizatorul: logo, meniu. In HTML se poate marca cu <header> sau un <div> la inceput de <body>.
Titlu — titlul principal vizibil pe pagina, de obicei <h1>, si titlul din tab-ul browser-ului, dat de <title> in <head>.
Corp — continutul principal: paragrafe, imagini, tabele — tot ce sta in <body>.

Atentie: Tag-ul HTML <head> NU este "antetul" vizibil al paginii! <head> contine metadate invizibile (charset, viewport, titlul tabului). Antetul vizibil al paginii este creat in <body>, de obicei cu tag-ul <header>.

Visual Tree Diagram

Structura unui Document HTML

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

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

<head> ← Metadate invizibile (NU = antetul vizibil al paginii!)

<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. Sectiunea — Creierul Paginii

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. Titluri

-

si Paragrafe

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. Imbricare (Nesting) si Indentare

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. 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.

6. Imagini in HTML — tag-ul <img>

Cum inserezi o fotografie sau un grafic intr-o pagina web (programa: Editare continut: imagini)

Tag-ul <img> insereaza o imagine in pagina. Spre deosebire de alte tag-uri HTML, <img> este self-closing (se inchide singur — nu are tag de inchidere separat).

Cele doua atribute esentiale sunt:

src (source = sursa) — calea sau URL-ul imaginii
alt (text alternativ) — descriere text afisata cand imaginea nu se incarca; obligatorie pentru accesibilitate

📷 Analogie: Rama foto

Tag-ul <img> este ca o rama foto goala. Atributul src este adresa fotografiei pe care o pui in rama. Atributul alt este eticheta scrisa pe spate a fotografiei — daca fotografia cade jos si rama e goala, eticheta iti spune ce era acolo.

Anatomia tag-ului <img>

<img
 src="poza.jpg"
 alt="Fotografia mea"
 width="300"
>


            ↑               ↑                   ↑            ↑

 tag           fisierul           text pt.       latime

             imaginii           cand nu se   in pixeli

                             incarca

💡

Cale relativa vs URL absolut

Cale relativa — fisierul imagine e langa fisierul HTML:
<img src="poza.jpg"> — in acelasi folder
<img src="imagini/poza.jpg"> — in subfolderul imagini

URL absolut — imaginea e pe internet:
<img src="https://www.example.com/foto.jpg">

<body>
    <h1>Portofoliul Meu</h1>

    <!-- Imagine din acelasi folder -->
    <img src="fotografie.jpg" alt="Fotografia mea" width="300">

    <!-- Imagine din internet (URL complet) -->
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png"
         alt="Exemplu imagine web" width="280">

    <p>Aceasta este pagina mea cu o imagine inclusa.</p>
</body>

❌

Greseala frecventa — uitat atributul alt

<img src="poza.jpg"> — lipseste alt: daca imaginea nu se incarca, utilizatorul nu stie ce ar fi trebuit sa fie acolo. Mereu adauga alt cu o descriere scurta a imaginii!

7. Tabele HTML — <table>, <tr>, <th>, <td>

Cum organizezi date in randuri si coloane intr-o pagina web (programa: Editare continut: tabele)

Un tabel HTML organizeaza informatii in randuri si coloane. Structura unui tabel foloseste patru tag-uri de baza:

<table> — containerul intregului tabel
<tr> (table row) — un rand din tabel
<th> (table header) — celula de antet (bold, centrata automat)
<td> (table data) — celula de date obisnuita

📋 Analogie: Catalog scolar

Un tabel HTML functioneaza exact ca catalogul clasei. <table> este catalogul in sine. <tr> este fiecare rand (un elev sau un cap de tabel). <th> sunt titlurile coloanelor (Nume, Nota Matematica, Nota Romana). <td> sunt celulele cu date (Andrei, 9, 8). Fara aceasta structura, datele ar fi greu de citit.

Structura ierarhica a unui tabel HTML

<table> — containerul tabelului

<tr> — primul rand (antet)

<th>Materie</th> — celula antet (bold)

</tr>

<tr> — al doilea rand (date)

<td>Matematica</td> — celula de date

</tr>

</table>

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <title>Notele Mele</title>
</head>
<body>

    <h1>Notele Mele din Semestrul I</h1>

    <table border="1">
        <!-- Primul rand: antet (titluri coloane) -->
        <tr>
            <th>Materie</th>
            <th>Nota Semestrul I</th>
            <th>Nota Semestrul II</th>
        </tr>
        <!-- Randuri de date -->
        <tr>
            <td>Matematica</td>
            <td>9</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Romana</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>TIC</td>
            <td>10</td>
            <td>10</td>
        </tr>
    </table>

</body>
</html>

ℹ️

Atributul border="1"

border="1" adauga borduri vizibile in jurul celulelor, ca sa poti vedea structura tabelului in browser. In practica moderna, bordurile se controleaza cu CSS, dar pentru exercitii border="1" este cel mai simplu mod de a vizualiza tabelul.

❌

Greseala frecventa — coloane inegale

Fiecare rand <tr> trebuie sa aiba acelasi numar de celule ca si randul de antet. Daca antetul are 3 celule (<th>), fiecare rand de date trebuie sa aiba exact 3 celule (<td>). Altfel tabelul va arata deformat in browser.

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"

6. Imagini in HTML — tag-ul <img>

7. Tabele HTML — <table>, <tr>, <th>, <td>

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

Exercitiul 4 (Nivel standard) - Inserarea unei Imagini

Exercitiul 5 (Nivel standard) - Crearea unui Tabel HTML

Ce ai invatat astazi

Urmatoarea lectie