Invatare Atomica

Pagina web: structura HTML si stilizare CSS

Progres lectie:
0%
🎯

Obiectivul lectiei

Vei intelege cum este construita o pagina web: vei invata structura de baza a unui document HTML, elementele esentiale (titluri, paragrafe, imagini, legaturi) si cum se aplica stilizarea vizuala prin CSS — cunostinte utile pentru a crea materiale educationale si fise de lucru publicate online.

Dupa aceasta lectie vei putea:

  • Sa explici ce este HTML si ce rol joaca in construirea unei pagini web
  • Sa identifici si sa folosesti tagurile HTML de baza: <h1>-<h6>, <p>, <img>, <a>
  • Sa descrii structura obligatorie a unui document HTML: <!DOCTYPE>, <html>, <head>, <body>
  • Sa aplici stilizare CSS de baza: culoare text, fundal, marime font, aliniere
  • Sa creezi o pagina HTML simpla cu continut educational (titlu, paragraf, imagine, link)

Incearca singur!

Provocare:

Gandeste-te ca vrei sa publici online o fisa de lucru pentru elevi despre o tema la clasa. Aceasta fisa trebuie sa aiba un titlu, doua-trei paragrafe cu explicatii, o imagine ilustrativa si un link catre o resursa suplimentara.

Cum crezi ca browserul (Chrome, Firefox, Edge) "stie" ce este titlul, ce este un paragraf si ce este o imagine? Ce limbaj crezi ca foloseste un site web ca sa organizeze aceste elemente?

💡 Ai nevoie de un indiciu?

Browserul citeste un fisier text scris intr-un limbaj special care foloseste etichete (numite taguri) pentru a marca fiecare element: ce este titlu, ce este paragraf, unde se afla imaginea.

Acest limbaj se numeste HTML (HyperText Markup Language) si este limbajul universal al paginilor web — exact subiectul lectiei de azi!

1

1. Ce este HTML — limbajul paginilor web

HTML (HyperText Markup Language — Limbaj de Marcare a Hipertextului) este limbajul standard folosit pentru a crea pagini web. El nu este un limbaj de programare, ci un limbaj de marcare: defineste structura si continutul paginii prin etichete speciale numite taguri. Browserul citeste fisierul HTML si il transforma intr-o pagina vizuala pe care o vede utilizatorul.
Analogie sigura:

HTML este ca planul tiparit al unei fise de lucru: definesti ce este titlul lectiei, ce sunt enunturile exercitiilor, unde se afla o imagine ilustrativa. Culoarea hartiei, fontul ales si marginile sunt decise separat (de CSS). Planul structural (HTML) si aspectul vizual (CSS) sunt doua lucruri distincte — la fel cum intr-un manual, autorul scrie continutul, iar graficianul stabileste cum arata pagina.

Cum functioneaza in practica:

Un fisier HTML este un simplu fisier text cu extensia .html (de exemplu fisa-lucru.html). Il poti crea in Notepad sau orice editor de text. Cand il deschizi in browser, acesta interpreteaza tagurile si afiseaza pagina formatata. Nu ai nevoie de internet pentru a testa o pagina HTML locala.

2

2. Structura obligatorie a unui document HTML

Orice pagina web corecta are o structura fixa, cu patru componente obligatorii. Ordinea lor este impusa de standardul HTML5: 
<!-- Declaratie tip document: spune browserului ca e HTML5 -->
<!DOCTYPE html>
<html lang="ro">

<!-- HEAD: informatii despre pagina (nu sunt vizibile in pagina) -->
<head>
  <meta charset="UTF-8">
  <title>Fisa de lucru — Clasa a V-a</title>
</head>

<!-- BODY: tot ce este vizibil in pagina -->
<body>
  <h1>Titlul fisei de lucru</h1>
  <p>Primul paragraf cu explicatii.</p>
</body>

</html>
<!DOCTYPE html> — Declaratia tipului de document

Prima linie din orice pagina. Nu este un tag HTML, ci o instructiune pentru browser: ii spune ca documentul respecta standardul HTML5. Fara aceasta declaratie, browserele mai vechi pot interpreta gresit pagina.

<html lang="ro"> — Radacina documentului

Invelisul intregii pagini. Atributul lang="ro" declara limba documentului — util pentru cititoarele de ecran (accesibilitate) si motoarele de cautare.

<head> — Informatii despre pagina

Contine metadate invizibile utilizatorului: codificarea caracterelor (charset="UTF-8" — necesara pentru diacritice romanesti si caractere speciale), titlul filei din bara browserului (<title>) si link-uri catre fisiere CSS.

<body> — Corpul paginii

Tot ce este vizibil in pagina se pune in <body>: titluri, paragrafe, imagini, tabele, legaturi. Este "continutorul" intregului continut afisabil.

3

3. Titluri si paragrafe — structura textului

Cel mai frecvent continut al unei pagini este textul, organizat in titluri si paragrafe. HTML ofera taguri dedicate pentru fiecare nivel de titlu si pentru paragrafe. 
<!-- Titluri: h1 = cel mai important, h6 = cel mai mic -->
<h1>Fisa de lucru: Lectia despre plante</h1>
<h2>1. Partile unei plante</h2>
<h3>1.1 Radacina</h3>

<!-- Paragrafe: fiecare <p> incepe pe rand nou cu spatiu deasupra -->
<p>Radacina fixeaza planta in sol si absoarbe apa si saruri minerale.</p>
<p>Cele mai multe radacini cresc in pamant, dar exista si radacini aeriene.</p>

<!-- Evidentiere in interiorul unui paragraf -->
<p>Termenul <strong>fotosinteza</strong> vine din greaca:
   <em>photos</em> inseamna lumina.</p>
Ierarhia titlurilor h1–h6

Pe o pagina bine structurata exista un singur <h1> (titlul principal), urmat de subcapitole cu <h2>, sectiuni cu <h3> etc. Aceasta ierarhie ajuta atat cititorii, cat si motoarele de cautare sa inteleaga organizarea continutului — exact ca structura capitolelor dintr-un manual.

Paragraful <p> si evidentierile

Fiecare <p> reprezinta un bloc de text separat; browserul adauga automat spatiu inainte si dupa. <strong> marcheaza text important (afisat ingrosate — bold), iar <em> marcheaza text cu accent (afisat inclinat — italic). Ambele au si semnificatie semantica, nu doar vizuala.

Exemplu practic (profil pedagogic):

La elaborarea unei fise de lucru online: <h1> pentru titlul fisei, <h2> pentru fiecare exercitiu (Ex. 1, Ex. 2...), <p> pentru enuntul exercitiului si <strong> pentru cuvintele-cheie pe care vrei sa le subliniezi elevilor. Aceasta structura reproduce exact logica unui document Word bine structurat cu stiluri.

4

4. Imagini si legaturi (hiperlegaturi)

Doua elemente care fac paginile web interactive si vizuale sunt imaginile (inserate cu <img>) si legaturile (marcate cu <a>), care navigheaza catre alte pagini sau resurse externe.
Tagul <img> — inserarea unei imagini
<!-- Imagine din acelasi folder cu fisierul HTML -->
<img src="ciclul-vietii.jpg"
     alt="Schema ciclului vietii unei plante"
     width="400">

<!-- Imagine dintr-un subfolder -->
<img src="imagini/fotosinteza.png"
     alt="Diagrama fotosintezei">

Atribute importante:

  • src — calea catre fisierul imagine (JPG, PNG, GIF, SVG, WebP etc.)
  • alt — text alternativ obligatoriu: descrie imaginea pentru utilizatorii cu deficiente vizuale si pentru cazul in care imaginea nu se incarca
  • width / height — dimensiunile dorite (in pixeli); daca specifici doar latimea, inaltimea se scalaza automat proportional

Important: <img> este un tag vid — nu are tag de inchidere (</img> nu exista si este gresit).

Tagul <a> — crearea unei legaturi
<!-- Legatura catre un site extern -->
<a href="https://www.edu.ro"
   target="_blank">Ministerul Educatiei</a>

<!-- Legatura catre o alta pagina din acelasi proiect -->
<a href="lectia2.html">Mergi la Lectia 2</a>

<!-- Imagine clicabila: click pe imagine = navigare -->
<a href="https://www.edu.ro">
  <img src="logo-edu.png" alt="Logo Minister Educatie">
</a>

Atribute importante:

  • href — destinatia legaturii: URL complet (https://...) sau cale relativa la un fisier local
  • target="_blank" — deschide pagina destinatie intr-o fila noua; recomandat pentru resurse externe, ca sa nu parasesti fisa curenta
Exemplu practic (profil pedagogic):

Pe o fisa de lucru online pentru elevi, adauga imaginea unui experiment: <img src="experiment.jpg" alt="Experiment turnare apa"> si un link catre un videoclip demonstrativ: <a href="https://youtube.com/..." target="_blank">Urmareste experimentul video</a>. Elevii pot accesa resursa fara sa paraseasca fisa de lucru.

5

5. Stilizare CSS de baza

CSS (Cascading Style Sheets — Foi de Stil in Cascada) este limbajul care controleaza aspectul vizual al paginii: culori, fonturi, marimi, spatiere. HTML defineste ce este un element; CSS defineste cum arata. Separarea lor este un principiu fundamental al web-ului modern.
Cum legam CSS-ul de pagina HTML
<head>
  <meta charset="UTF-8">
  <title>Fisa de lucru</title>
  <!-- Fisierul stil.css este in acelasi folder -->
  <link rel="stylesheet" href="stil.css">
</head>

Fisierul stil.css se afla in acelasi folder cu fisa.html. O singura modificare in stil.css actualizeaza aspectul tuturor paginilor care il folosesc — la fel cum modificarea unui stil Word actualizeaza toate titlurile din document.

Sintaxa CSS: selector si proprietati
/* Stilizare aplicata tuturor paragrafelor */
p {
    color: #333333;       /* culoare text: gri inchis */
    font-size: 16px;     /* marime font: 16 pixeli */
    line-height: 1.6;   /* spatiu intre randuri */
}

/* Titlul principal */
h1 {
    color: #1a56db;       /* albastru */
    text-align: center;  /* centrat */
    font-size: 28px;
}

/* Corpul intregii pagini */
body {
    background-color: #f9f9f9;  /* gri foarte deschis */
    font-family: Arial, sans-serif;
    margin: 20px;
}

Structura unei reguli CSS: selector (ce element stilizezi) urmat de acolade in care se afla perechi proprietate: valoare;.

Culori in CSS — trei moduri de scriere
/* 1. Nume de culoare (engleza) — darkgreen = verde inchis fara rosu */
h2 { color: darkgreen; }      /* echivalent: #006400 */

/* 2. Cod hexazecimal #RRGGBB — cel mai folosit in practica */
h2 { color: #006400; }   /* aceeasi culoare ca darkgreen */

/* 3. RGB: valori 0–255 pentru Rosu, Verde, Albastru */
h2 { color: rgb(0, 100, 0); }  /* aceeasi culoare ca darkgreen si #006400 */

Cele trei exemple de mai sus produc exact aceeasi culoare: darkgreen este definit de standardul CSS ca #006400 (R=0, G=100, B=0 — verde pur, fara componenta rosie sau albastra). Codul hexazecimal (#RRGGBB) este cel mai frecvent folosit — il gasesti in Canva, Paint sau orice aplicatie de design cand dai click pe o culoare.

Atentie: culorile cu nume (ex. darkgreen) au valori exacte fixate de standard — darkgreen nu este acelasi cu orice „verde inchis" ales din palete; este intotdeauna #006400.

6

6. Pagina completa — exemplu integrat (fisa de lucru)

Urmatorul exemplu combina toate elementele invatate: structura HTML, titluri, paragrafe, imagine, legatura si CSS de baza. Este o fisa de lucru simpla, gata de publicat online sau trimisa elevilor ca link.
Fisierul fisa-plante.html
<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8">
  <title>Fisa de lucru — Plante</title>
  <link rel="stylesheet" href="stil.css">
</head>
<body>

  <h1>Partile unei plante — Fisa de lucru</h1>
  <p>Citeste cu atentie, apoi raspunde la intrebari.</p>

  <h2>Radacina</h2>
  <p>Radacina <strong>fixeaza planta in sol</strong>
     si absoarbe apa si saruri minerale necesare cresterii.</p>

  <img src="radacina.jpg"
       alt="Schema radacinii unei plante"
       width="350">

  <h2>Resurse suplimentare</h2>
  <p>Afla mai multe despre plante pe
     <a href="https://ro.wikipedia.org/wiki/Plant%C4%83"
        target="_blank">Wikipedia — Planta</a>.
  </p>

</body>
</html>
Fisierul stil.css (acelasi folder)
body {
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  margin: 30px;
  color: #222222;
}
h1 {
  color: #1a56db;
  text-align: center;
}
h2 {
  color: #2e7d32;
  border-bottom: 2px solid #2e7d32;
  padding-bottom: 4px;
}
img {
  display: block;
  margin: 12px 0;
}
a {
  color: #1a56db;
}
Cum testezi pagina fara internet:

Salveaza ambele fisiere (fisa-plante.html si stil.css) in acelasi folder pe calculator. Dublu-click pe fisa-plante.html — se deschide direct in browser ca orice fisier. Dupa fiecare modificare, apasa F5 in browser pentru a reincarca pagina si a vedea schimbarile.

Recapitulare — elementele esentiale ale unei pagini HTML:
  • <!DOCTYPE html> — declara standardul HTML5
  • <html lang="ro">, <head>, <body> — schelet obligatoriu
  • <meta charset="UTF-8"> — suport diacritice romanesti
  • <title> — titlul in bara browserului
  • <h1>–<h6> — ierarhia titlurilor
  • <p> — paragraf; <strong> — bold semantic; <em> — italic semantic
  • <img src="..." alt="..."> — imagine, tag vid, fara inchidere
  • <a href="..."> — legatura; target="_blank" = fila noua
  • CSS extern legat cu <link rel="stylesheet" href="stil.css">

Exercitii practice

Exercitiul 1 (Nivel minim) — Identifica tagurile

Priveste urmatorul fragment HTML si raspunde la intrebarile de mai jos:

<h1>Planse de colorat — Animale</h1>
<p>Descarca si printeaza plansele pentru lectia de azi.</p>
<img src="urs.png" alt="Urs polar" width="300">
<a href="planse.html">Vezi toate plansele</a>

a) Ce va afisa browserul ca titlu principal al paginii?
b) Care este textul alternativ al imaginii si de ce este el important?
c) Tagul <img> are tag de inchidere (</img>)? De ce da sau de ce nu?
d) Ce se intampla cand un utilizator da click pe Vezi toate plansele?

Vezi rezolvarea

a) Titlul principal afisat vizibil pe pagina este cel din <h1>: Planse de colorat — Animale. (Titlul din bara browserului ar veni din <title>, care nu apare in acest fragment.)

b) Textul alternativ este Urs polar (atributul alt). Este important pentru accesibilitate: il citesc cititoarele de ecran pentru utilizatorii cu deficiente de vedere si apare in locul imaginii daca urs.png nu se incarca.

c) Nu. <img> este un tag vid (gol) — nu are continut in interior, deci nu exista tag de inchidere </img>.

d) Browserul navigheaza catre pagina planse.html, aflata in acelasi folder, inlocuind pagina curenta (nu apare target="_blank", deci nu se deschide fila noua).

Exercitiul 2 (Nivel standard) — Creeaza o fisa HTML

Creeaza pe calculator fisierele fisa-animale.html si stil.css in acelasi folder nou. Fisa trebuie sa contina:

  • Structura completa HTML5 (<!DOCTYPE html>, <html lang="ro">, <head> cu charset si <title>, <body>)
  • Titlu <h1>: „Fisa de lucru — Animale domestice"
  • Subtitlu <h2>: „Cainele"
  • Doua paragrafe (<p>) cu informatii, unul continand un cuvant marcat cu <strong>
  • O imagine (<img>) cu atribut alt completat descriptiv
  • Un link (<a>) catre o resursa externa, deschis in fila noua

In stil.css: seteaza font-family la Arial, culoarea h1 la un cod hex la alegere si text-align: center pentru h1.

Testeaza: deschide fisa-animale.html in browser si verifica ca toate elementele apar corect.

Vezi rezolvarea

Fisierul fisa-animale.html:

  1. <!DOCTYPE html>
  2. <html lang="ro">
  3. <head><meta charset="UTF-8"><title>Fisa de lucru — Animale domestice</title><link rel="stylesheet" href="stil.css"></head>
  4. <body><h1>Fisa de lucru — Animale domestice</h1><h2>Cainele</h2>
  5. <p>Cainele este un animal domestic care traieste alaturi de om de mii de ani.</p>
  6. <p>Este considerat <strong>cel mai bun prieten al omului</strong>.</p>
  7. <img src="caine.jpg" alt="Caine de rasa ciobanesc romanesc" width="300">
  8. <a href="https://ro.wikipedia.org/wiki/Caine" target="_blank">Afla mai multe</a></body></html>

In stil.css: body{font-family:Arial;} h1{color:#2c3e50; text-align:center;}

Exercitiul 3 (Nivel performanta) — Plan de lectie digital

Creeaza o pagina HTML completa care sa reprezinte un plan de lectie digital pentru o lectie la alegere (orice disciplina). Cerinte:

  • Structura HTML5 corecta si completa
  • Ierarhie de titluri (cel putin <h1>, <h2>, <h3>) pentru sectiunile: Obiective, Desfasurare, Evaluare
  • Cel putin o imagine ilustrativa cu alt descriptiv
  • Cel putin doua legaturi: una catre o resursa externa, una catre o alta pagina locala
  • Fisier CSS extern care defineste: fontul paginii, culori distincte pentru h1 si h2, spatiere (margin/padding) si culoarea de fundal

Bonus: Adauga o sectiune <h2>Bibliografie</h2> cu o lista de legaturi (<a href>) catre resursele web folosite la pregatirea lectiei. Verifica in browser ca legatura externa se deschide corect intr-o fila noua.

Vezi rezolvarea

Nu-ti dau pagina gata scrisa — schema de lucru:

  1. Alege o lectie (ex: Fotosinteza, clasa a V-a).
  2. Scheletul: <!DOCTYPE html>, <html lang="ro">, <head> cu meta charset, title si link catre CSS extern.
  3. In <body>: un singur <h1> cu titlul lectiei, apoi <h2> pentru Obiective / Desfasurare / Evaluare; sub Desfasurare, <h3> pentru etape.
  4. Sub fiecare <h2>, minim un <p> cu continut real.
  5. O imagine cu alt descriptiv real, nu generic.
  6. Doua legaturi: una externa cu target="_blank", una locala catre alta pagina.
  7. <h2>Bibliografie</h2> cu lista de link-uri folosite.

Capcane: alt uitat, mai multi <h1> pe pagina, CSS scris direct in tag in loc de fisier extern. Se evalueaza: ierarhia corecta de titluri, HTML5 valid, CSS extern functional, continut relevant.

Ce ai invatat astazi

  • HTML = limbaj de marcare; defineste structura paginii (nu este un limbaj de programare)
  • Structura obligatorie: <!DOCTYPE html>, <html>, <head>, <body>
  • <meta charset="UTF-8"> — necesar pentru diacritice romanesti
  • Titluri <h1>–<h6> (ierarhie); paragrafe <p>; evidentieri <strong> / <em>
  • Imagini: <img src="..." alt="..."> — tag vid, fara inchidere; atribut alt obligatoriu
  • Legaturi: <a href="...">text</a>; target="_blank" deschide fila noua
  • CSS = aspect vizual; fisier extern legat cu <link rel="stylesheet" href="stil.css">
  • Proprietati CSS de baza: color, font-size, font-family, background-color, text-align, margin, padding
  • Culori CSS: darkgreen = #006400 = rgb(0, 100, 0) — trei notari pentru aceeasi culoare

Vrei mai mult?

Provocare: Ia fisierul fisa-plante.html din lectie si adauga doua lucruri noi, nepredate direct: o lista <ul> cu 3 elemente <li> (de exemplu pasii unui experiment), si un paragraf cu atributul class="important". In stil.css scrie regula .important { background-color: yellow; } si verifica in browser ca doar acel paragraf se coloreaza.

De ce: De ce browserul afiseaza pagina chiar daca uiti sa inchizi un tag <p>, dar CSS-ul nu aplica nicio regula daca gresesti un singur caracter in numele proprietatii (de exemplu colr in loc de color)? Ce diferenta de comportament exista intre modul in care HTML si CSS trateaza greselile?

Deschidere: Orice pagina reala de pe internet foloseste exact aceasta separare HTML/CSS. Poti verifica singur acum: apasa Ctrl+U (sau F12) in orice browser, pe orice site, si vezi codul HTML si CSS din spatele paginii pe care o citesti in acel moment.

Urmatoarea sectiune

Ai finalizat modulul Pagini Web. Revino la pagina modulului pentru a vedea progresul si a accesa urmatoarea unitate de invatare.

Inapoi la modul →