Invatare Atomica

Pagini web: HTML si structura de baza

Progres lectie:
0%
🎯

Obiectivul lectiei

Vei invata cum functioneaza o pagina web: ce inseamna HTML, cum se structureaza un document HTML corect, ce sunt etichetele (tag-urile) si atributele, cum se organizeaza ierarhia elementelor — exact cunostintele de baza de care ai nevoie pentru a crea sau modifica orice pagina web.

Dupa aceasta lectie vei putea:

  • Sa explici ce este HTML si care este rolul sau intr-o pagina web
  • Sa identifici structura obligatorie a unui document HTML: DOCTYPE, html, head, body
  • Sa folosesti corect etichetele de baza: titluri (h1–h6), paragrafe (p), legaturi (a), imagini (img), liste (ul, ol, li)
  • Sa intelegi diferenta dintre etichete block-level si inline
  • Sa adaugi atribute elementelor HTML (href, src, alt, id, class)
  • Sa verifici o pagina HTML intr-un browser si sa interpretezi codul sursa

Incearca singur!

Provocare initiala — inainte sa citesti lectia:

Deschide un editor text simplu (Notepad, Notepad++, VS Code) si scrie urmatoarele linii exact asa:

<!DOCTYPE html>
<html>
<head><title>Prima mea pagina</title></head>
<body>
<h1>Buna ziua, lume!</h1>
<p>Aceasta este prima mea pagina web.</p>
</body>
</html>

Salveaza fisierul cu extensia .html (ex: prima_pagina.html) si deschide-l in browser. Ce vezi? Ce se intampla daca modifici textul din <h1> si salvezi din nou?

💡 Ai nevoie de un indiciu?

La salvare, asigura-te ca selectezi tipul Toate fisierele (*.*) si scrii manual extensia .html la sfarsitul numelui — altfel Notepad va salva ca .txt si browserul nu il va recunoaste ca pagina web.

Dupa ce ai facut o modificare in fisier si ai salvat, apasa F5 in browser pentru a reincarca pagina si a vedea schimbarea.

1

1. Ce este HTML si cum functioneaza

HTML (HyperText Markup Language) este limbajul standard folosit pentru a crea pagini web. Nu este un limbaj de programare — este un limbaj de marcare: foloseste etichete (tag-uri) pentru a descrie structura si continutul unei pagini, iar browserul (Chrome, Firefox, Edge) interpreteaza aceste etichete si afiseaza pagina vizual.
Cum functioneaza triunghiul web
  • HTML — structura si continut: ce este un titlu, un paragraf, o imagine, o legatura.
  • CSS (Cascading Style Sheets) — aspect vizual: culori, fonturi, dimensiuni, layout.
  • JavaScript — comportament interactiv: animatii, validare formulare, actualizare dinamica.

In aceasta lectie te concentrezi pe HTML — fundamentul fara de care CSS si JavaScript nu au unde sa se aplice.

Analogie din stiintele naturii: gandeste-te la o celula. HTML este membrana celulara si nucleul — structura de baza care defineste ce este celula. CSS este pigmentul si forma (cum arata). JavaScript este procesele metabolice (ce face). Fara structura de baza (HTML), nu exista celula.

Versiunea actuala: HTML5 (din 2014, standardizat de W3C si WHATWG) este versiunea moderna folosita azi. Aduce etichete semantice noi (<header>, <nav>, <main>, <footer>, <article>) care descriu mai precis rolul fiecarei zone a paginii.

2

2. Structura obligatorie a unui document HTML

Orice document HTML valid are o structura obligatorie formata din patru elemente de baza: declaratia DOCTYPE, elementul radacina <html>, sectiunea <head> si sectiunea <body>.
Structura minima a unui document HTML5
<!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>
</head>
<body>
    <h1>Continut vizibil</h1>
    <p>Acesta este un paragraf.</p>
</body>
</html>

<!DOCTYPE html>

Nu este o eticheta HTML, ci o declaratie care spune browserului ca documentul foloseste HTML5. Trebuie sa fie primul rand din fisier, inainte de orice altceva.

<html lang="ro">

Elementul radacina care inconjoara tot documentul. Atributul lang indica limba paginii — important pentru cititoarele de ecran si motoarele de cautare.

<head>

Contine metadate despre pagina: codificarea caracterelor (charset), titlul pentru browser/SEO, legaturi catre fisiere CSS si JavaScript. Continutul din <head> nu este vizibil in pagina.

<body>

Contine tot continutul vizibil al paginii: titluri, paragrafe, imagini, legaturi, formulare, tabele. Tot ce vede utilizatorul se afla in <body>.

<meta charset="UTF-8">

Declara codificarea caracterelor. UTF-8 suporta toate caracterele romanesti (a, i, s, t cu diacritice) si practic orice caracter din lume. Fara aceasta linie, diacriticele pot aparea incorect.

<title>

Textul care apare in tab-ul browserului, in bara de titlu si in rezultatele Google. Este diferit de <h1> care este titlul vizibil in pagina.

Eroare frecventa: confuzia dintre <title> (in <head>, invizibil in pagina, apare in tab) si <h1> (in <body>, vizibil pe pagina ca titlu principal). Un document HTML corect le are pe amandoua.

3

3. Etichete de baza: titluri, paragrafe, liste si legaturi

Etichetele (tag-urile) HTML se scriu intre paranteze unghiulare < >. Majoritatea vin in perechi: o eticheta de deschidere <p> si una de inchidere </p>. Etichetele goale (self-closing) nu au eticheta de inchidere: <img>, <br>, <meta>.
Titluri ierarhice: h1 pana la h6
<h1>Titlu principal (cel mai important)</h1>
<h2>Subtitlu de nivel 2</h2>
<h3>Subtitlu de nivel 3</h3>
<h4>Subtitlu de nivel 4</h4>

Regula: nu sari niveluri (ex: nu treci direct de la h1 la h4). Motoarele de cautare si cititoarele de ecran interpreteaza ierarhia titlurilor.

•

Lista neordonata <ul>

<ul>
  <li>Oxigen</li>
  <li>Azot</li>
  <li>Dioxid de carbon</li>
</ul>

Marcatori (buline); ordinea nu conteaza. Exemplu: componente ale aerului.

1.

Lista ordonata <ol>

<ol>
  <li>Incalzeste solutia</li>
  <li>Filtrare</li>
  <li>Evaporare</li>
</ol>

Numerotare automata; ordinea este obligatorie. Exemplu: pasi protocol experimental.

Legaturi (link-uri) si imagini
<!-- Legatura (link) -->
<a href="https://www.wikipedia.org">Viziteaza Wikipedia</a>

<!-- Legatura catre o alta pagina din acelasi site -->
<a href="pagina2.html">Pagina urmatoare</a>

<!-- Imagine -->
<img src="fotosinteza.jpg" alt="Schema fotosintezei" width="400">

Atribut alt obligatoriu la imagini: descrie imaginea pentru utilizatorii cu deficiente vizuale si apare daca imaginea nu se incarca. Lipsa atributului alt este o eroare de accesibilitate.

Block vs. Inline: etichetele block-level (<h1>–<h6>, <p>, <ul>, <ol>, <div>) incep pe un rand nou si ocupa toata latimea. Etichetele inline (<a>, <strong>, <em>, <img>, <span>) raman in fluxul textului, ocupa doar spatiul lor.

4

4. Atribute HTML: href, src, alt, id, class

Atributele ofera informatii suplimentare despre un element HTML. Se scriu in eticheta de deschidere, dupa numele etichetei, in format nume="valoare". Un element poate avea mai multe atribute.

href — adresa legaturii

Folosit la <a> pentru a specifica destinatia link-ului. Poate fi o adresa web completa (https://...), o cale relativa (pagina2.html) sau o ancora (#sectiune).

<a href="https://ro.wikipedia.org">Wikipedia RO</a>

src — sursa fisierului

Folosit la <img> si <script> pentru a specifica calea catre fisierul extern (imagine, script JavaScript).

<img src="imagini/celula.png" alt="Celula animala">

alt — text alternativ

Obligatoriu la <img>. Descrie imaginea pentru cititoarele de ecran si este afisat cand imaginea nu se incarca. O imagine decorativa poate avea alt="" (alt gol).

id — identificator unic

Identifica un singur element din pagina. Valoarea trebuie sa fie unica in intregul document. Folosit pentru ancore (href="#id") si stilizare CSS/JavaScript precisa.

<h2 id="sectiunea-chimie">Chimie</h2>

class — clasa CSS

Permite gruparea mai multor elemente sub un nume comun pentru stilizare CSS. Un element poate avea mai multe clase separate prin spatiu. Acelasi class poate fi folosit pe mai multe elemente.

<p class="important highlight">Text important</p>

lang — limba continutului

Folosit pe <html> pentru a declara limba paginii (lang="ro" pentru romana). Ajuta motoarele de cautare si cititoarele de ecran sa pronunte corect textul.

id vs class: id este unic (un singur element cu acel id pe pagina); class poate fi repetat (multe elemente cu aceeasi clasa). Confundarea lor duce la comportament impredictibil in CSS si JavaScript.

5

5. Vizualizarea si verificarea paginilor HTML in browser

Browserul este instrumentul principal de testare a paginilor HTML. Orice browser modern include instrumente integrate pentru a vizualiza codul sursa, a inspecta elementele si a depista erorile de afisare.
Vizualizarea codului sursa
  • Ctrl+U (sau clic dreapta → Vizualizare sursa pagina) — afiseaza intregul cod HTML al paginii intr-o fereastra noua. Util pentru a invata din paginile altora sau pentru a verifica ce a generat serverul.
  • F12 (Instrumente pentru dezvoltatori / DevTools) — panoul complet: tabul Elements afiseaza ierarhia HTML live (modificabila in browser, fara sa afecteze fisierul original), tabul Console afiseaza erorile JavaScript.
Fluxul de lucru pentru crearea unei pagini HTML
  1. Scrie codul — in editor text (Notepad++, VS Code, Sublime Text)
  2. Salveaza — fisier cu extensia .html, codificare UTF-8
  3. Deschide in browser — dublu-clic pe fisier sau trageaza-l in fereastra browserului
  4. Verifica afisarea — compara cu ce ai asteptat sa apara
  5. Corecteaza in editor — modifica codul daca ceva nu arata corect
  6. Reincarca browserul — F5 pentru a vedea modificarile

Validare HTML online

W3C Markup Validation Service (validator.w3.org) verifica daca documentul tau HTML respecta standardele. Introduce adresa URL sau codul direct si iti arata erorile si avertismentele.

Erori frecvente de depistat

  • Etichete deschise fara eticheta de inchidere
  • Ghilimele lipsa la valoarea atributelor
  • Imagini fara atribut alt
  • Fisiere .html salvate de fapt ca .txt (extensie gresita)

Editoare recomandate cu evidentiere sintaxa: VS Code (gratuit, Microsoft) evidentiaza HTML/CSS/JS cu culori diferite, completeaza automat etichetele si arata erorile in timp real. Notepad++ este o alternativa usoara, la fel gratuita, excelenta pentru inceput.

6

6. Recapitulare — de la text brut la pagina web functionala

Ai parcurs elementele fundamentale ale HTML: structura documentului, etichetele de baza, atributele si modul de testare in browser. Acestea sunt blocurile de constructie ale oricarei pagini web.

✘ Pagina HTML cu probleme

  • Lipseste <!DOCTYPE html>
  • Imagini fara atribut alt
  • Titluri sarite: direct de la h1 la h4
  • id folosit pe mai multe elemente (duplicat)
  • Fisier salvat ca .txt in loc de .html
  • Lipseste <meta charset="UTF-8">: diacritice incorecte

✔ Pagina HTML corecta

  • <!DOCTYPE html> pe primul rand
  • Fiecare <img> are atribut alt descriptiv
  • Ierarhie titluri respectata: h1 → h2 → h3
  • id unic per element; class pentru grupuri
  • Fisier salvat cu extensia .html, codificare UTF-8
  • <meta charset="UTF-8"> in <head>: diacritice corecte

Legatura cu urmatoarele lectii: in Lectia 2 vei invata CSS — cum adaugi culori, fonturi, dimensiuni si layout paginii tale HTML. Structura HTML pe care ai invatat-o azi devine scheletul pe care CSS aplica stilul vizual.

Resursa recomandata: MDN Web Docs (developer.mozilla.org/ro) este referinta oficiala pentru HTML, CSS si JavaScript, disponibila si in limba romana. Orice eticheta sau atribut pe care nu il cunosti il poti cauta acolo cu exemple detaliate.

Exercitii practice

Exercitiul 1 (Nivel minim) — Prima pagina HTML

Creeaza un fisier index.html cu structura HTML5 completa (DOCTYPE, html, head cu charset si title, body). In body adauga: un titlu h1 cu numele tau, un paragraf cu o propozitie despre tine, o lista neordonata cu 3 materii favorite si o imagine (poti folosi orice imagine JPG/PNG salvata in acelasi folder; nu uita atributul alt). Deschide fisierul in browser si verifica afisarea.

Exercitiul 2 (Nivel standard) — Mini-site de stiinte

Creeaza doua fisiere HTML legate intre ele: index.html (pagina principala despre biologie) si chimie.html (pagina despre chimie). Fiecare pagina trebuie sa aiba: structura HTML5 completa, titlu h1, cel putin doua subtitluri h2, un paragraf, o lista ordonata cu 4 elemente, o imagine cu alt descriptiv si o legatura <a> catre cealalta pagina. Navigheaza intre pagini in browser pentru a verifica ca legaturile functioneaza.

Exercitiul 3 (Nivel performanta) — Pagina despre un organism viu

Creeaza o pagina HTML despre un organism ales (animal, planta, microorganism). Cerinte: (1) structura HTML5 valida (verifica pe validator.w3.org); (2) ierarhie titluri corecta h1 → h2 → h3 pentru sectiunile Clasificare, Caracteristici, Habitat, Importanta ecologica; (3) lista cuibarita (nested) pentru clasificarea taxonomica; (4) cel putin 2 imagini cu atribut alt corect; (5) un link extern catre o sursa stiintifica (Wikipedia, Britannica); (6) un link intern catre o ancora (id) dintr-o alta sectiune a aceleiasi pagini; (7) atribute class pe cel putin 3 elemente (pregatire pentru CSS).

Ce ai invatat astazi

  • HTML defineste structura si continutul paginilor web; CSS stilul vizual; JavaScript comportamentul interactiv
  • Structura obligatorie HTML5: <!DOCTYPE html>, <html lang="ro">, <head> (cu charset UTF-8 si title), <body>
  • Etichete de baza: titluri h1–h6, paragrafe p, liste ul/ol/li, legaturi a, imagini img
  • Block-level (h1–h6, p, ul, ol, div) vs. inline (a, strong, em, img, span)
  • Atribute esentiale: href (link), src (imagine), alt (text alternativ), id (unic), class (grup)
  • Testare in browser: Ctrl+U (sursa pagina), F12 (DevTools), F5 (reincarca), validare pe validator.w3.org

Urmatoarea lectie

Continua cu CSS — stilizarea paginilor web: cum adaugi culori, fonturi, dimensiuni si layout paginii HTML pe care ai creat-o azi, folosind selectori, proprietati si valori CSS.

Continua →