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?

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.

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.

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

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 →