⚠ Nota de conformitate programa — Conform OMECI 5099/2009, HTML/CSS apare la cls. IX filiera tehnologica, cap. 5 (pagini HTML: editor, text, imagini, hiperlegaturi) si la cls. XII (instrumente si structura site web). Programa cls. XI tehnologic acopera: Date si informatii, Organizarea si prelucrarea datelor, Functii predefinite, Instrumente software. Aceasta lectie este inclusa pentru completitudine pedagogica si coerenta modulului, dar continutul sau corespunde programei de cls. IX/XII.
Invatare Atomica

Pagina web: structura HTML si stilizare CSS de baza

Progres lectie:
0%
🎯

Obiectivul lectiei

Vei intelege cum este construita o pagina web: care este structura obligatorie a unui document HTML, cum se adauga titluri, paragrafe, imagini si legaturi, si cum se schimba aspectul vizual al paginii cu CSS de baza.

Dupa aceasta lectie vei putea:

  • Sa descrii rolul HTML si al CSS intr-o pagina web
  • Sa identifici elementele obligatorii ale unui document HTML: <!DOCTYPE html>, <html>, <head>, <body>
  • Sa folosesti taguri pentru titluri h1–h6 si paragrafe p
  • Sa inserezi o imagine cu <img> si sa explici atributele src si alt
  • Sa creezi o legatura (hyperlink) cu <a href>
  • Sa aplici stiluri CSS de baza: culoare text, marime font, culoare fundal

Incearca singur!

Provocare (profil Tehnologic):

Esti tehnician la o firma de instalatii termice. Seful tau vrea sa puna online o pagina de prezentare cu: numele firmei, un paragraf de descriere, o fotografie a echipei si un link catre formularul de contact.

Inainte sa incepi sa scrii cod, raspunde in scris: Ce informatii trebuie sa apara? In ce ordine le-ai aseza? Ce culori ar da o imagine profesionala firmei?

💡 Ai nevoie de un indiciu?

O pagina de prezentare tipica a unei firme tehnice contine: antet cu logo si nume (titlu mare), sectiune despre firma (paragraf scurt), imagine reprezentativa si contact (link sau numar de telefon).

Exact aceste elemente le vei invata sa le codezi in HTML in aceasta lectie!

1

1. Ce este HTML si de ce avem nevoie de el

HTML (HyperText Markup Language) este limbajul standard pentru crearea paginilor web. Nu este un limbaj de programare, ci un limbaj de marcare: folosesti etichete (taguri) pentru a spune browserului ce este fiecare bucata de continut — titlu, paragraf, imagine, legatura. Orice pagina web pe care o deschizi intr-un browser este construita, la nivel de baza, cu HTML.
Analogie cu documentatia tehnica (profil Tehnologic):

Intr-o fisa tehnica de produs, continutul este structurat: titlul produsului este scris mare si bold, specificatiile sunt intr-un tabel, fotografiile apar in sectiunea dedicata, iar nota de subsol are font mai mic. HTML face acelasi lucru pentru o pagina web: anunta browserul ce este fiecare element, iar browserul il afiseaza corespunzator.

Cele trei straturi ale unei pagini web:

  • HTML — structura si continut (ce exista pe pagina)
  • CSS — aspect vizual (culori, fonturi, dimensiuni)
  • JavaScript — comportament interactiv (butoane, animatii, calcule)

In aceasta lectie ne concentram pe HTML si introducere CSS.

2

2. Structura obligatorie a unui document HTML

Orice document HTML valid incepe cu aceeasi structura de baza. Browserul se asteapta sa gaseasca aceste elemente pentru a afisa pagina corect.
HTML — structura de baza
<!-- 1. Declaratia DOCTYPE: spune browserului ca e HTML5 --> <!DOCTYPE html> <html lang="ro"> <head> <meta charset="UTF-8"> <title>Instalatii Termice Profesionale</title> </head> <!-- BODY: tot ce vede utilizatorul pe ecran --> <body> <!-- Continutul paginii vine aici --> </body> </html>
Ce face fiecare element:
  • <!DOCTYPE html> — anunta browserul ca documentul urmeaza standardul HTML5 (nu este un tag propriu-zis)
  • <html lang="ro"> — elementul radacina care cuprinde tot documentul; lang ajuta motoarele de cautare si cititoarele de ecran
  • <meta charset="UTF-8"> — specifica setul de caractere; UTF-8 suporta diacritice romanesti si caractere din orice limba
  • <title> — textul afisat in tabul browserului si in rezultatele Google
  • <body> — tot ce scrii in interiorul lui apare pe ecranul utilizatorului

Regula tagurilor HTML: fiecare tag de deschidere <tag> are un corespondent de inchidere </tag>. Exceptie: tagurile void (fara continut) nu au inchidere — de exemplu <meta>, <img>, <br>.

3

3. Titluri h1–h6 si paragrafe p

Textul unei pagini web se organizeaza cu doua tipuri principale de elemente: titluri (headings) si paragrafe. Titlurile creeaza o ierarhie logica — la fel cum un deviz tehnic sau o oferta de servicii are un titlu principal, capitole si subcapitole.
HTML — titluri si paragrafe
<body> <!-- h1: titlul principal (o singura data pe pagina) --> <h1>Instalatii Termice Profesionale SRL</h1> <h2>Despre noi</h2> <p>Suntem specializati in proiectarea si montarea instalatiilor de incalzire si sanitare pentru cladiri rezidentiale si industriale. Cu o experienta de peste 15 ani, garantam calitate si punctualitate.</p> <h2>Servicii oferite</h2> <!-- h3: subsectiune in cadrul unui h2 --> <h3>Montaj centrale termice</h3> <p>Montam centrale murale si de pardoseala, cu sau fara boiler.</p> <h3>Reparatii urgente</h3> <p>Interventie in maximum 2 ore in municipiu si localitati limitrofe.</p> </body>
Reguli practice pentru titluri:
  • <h1> se foloseste o singura data pe pagina — titlul principal; motoarele de cautare ii acorda cel mai mare scor SEO
  • <h2> pentru sectiuni principale, <h3> pentru subsectiuni — nu sari niveluri (de la h1 direct la h4)
  • <p> este blocul de text de baza; browserul adauga automat spatiu inainte si dupa fiecare paragraf
  • Nu folosi titluri doar pentru a mari textul — foloseste CSS pentru dimensiune; tagurile h1–h6 au semnificatie structurala
4

4. Inserarea imaginilor cu <img>

Tagul <img> insereaza o imagine in pagina. Este un tag void (nu are continut si nu are tag de inchidere). Atributele obligatorii sunt src (sursa fisierului) si alt (descrierea textuala a imaginii).
HTML — inserare imagine
<!-- Imagine din acelasi folder cu pagina HTML --> <img src="echipa-instalatii.jpg" alt="Echipa de tehnicieni in fata santierului" width="600" > <!-- Imagine dintr-un subfolder --> <img src="imagini/centrala-termica.jpg" alt="Centrala termica murala instalata de firma noastra" width="400" >
Atributele tagului img:
  • src (source = sursa) — calea catre fisierul imagine: relativa (fata de pagina HTML) sau absoluta (URL complet cu https://)
  • alt (alternative text) — descriere textuala; afisat daca imaginea nu se incarca; citit de cititoarele de ecran; indexat de motoarele de cautare
  • width / height — dimensiunile in pixeli; daca specifici doar latimea, inaltimea se calculeaza automat pastrand proportiile originale

Formate recomandate pentru web: JPEG/JPG pentru fotografii (compresie buna, fisiere mici); PNG pentru imagini cu transparenta sau cu text; WebP pentru compresie moderna (suportat de toate browserele actuale). Nu folosi BMP sau TIFF pe pagini web — fisierele sunt prea mari si incarca pagina lent.

5

5. Legaturi (hyperlink-uri) cu <a>

Tagul <a> (anchor = ancora) creaza o legatura catre alta pagina, alt site sau o sectiune din aceeasi pagina. Atributul href specifica destinatia, iar textul dintre taguri este textul vizibil al legaturii.
HTML — tipuri de legaturi
<!-- Legatura externa, deschisa in tab nou --> <a href="https://www.anpm.ro" target="_blank"> Agentia Nationala pentru Protectia Mediului </a> <!-- Legatura interna (alta pagina din acelasi site) --> <a href="contact.html">Formular de contact</a> <!-- Ancora in aceeasi pagina --> <a href="#servicii">Vezi serviciile noastre</a> <!-- Tinta ancorei: id pe elementul la care se sare --> <h2 id="servicii">Servicii oferite</h2> <!-- Link email: deschide clientul de email --> <a href="mailto:contact@instalatii-pro.ro">Trimite-ne un email</a> <!-- Link telefon: apel direct de pe dispozitive mobile --> <a href="tel:+40721000000">0721 000 000</a>
Atribute importante ale tagului a:
  • href — destinatia legaturii (obligatoriu); tipuri: URL complet (https://), cale relativa (contact.html), ancora (#id), mailto:, tel:
  • target="_blank" — deschide destinatia intr-un tab nou; util pentru link-uri externe
  • Textul dintre <a> si </a> este textul vizibil, afisat de browser de obicei subliniat si intr-o culoare distincta
6

6. Stilizare CSS de baza: culori, fonturi, fundal

CSS (Cascading Style Sheets = Foi de stiluri in cascada) controleaza aspectul vizual al paginii HTML. Fara CSS, o pagina afiseaza text negru pe fond alb, fara formatare. Regulile CSS urmeaza sintaxa selector { proprietate: valoare; }: selectorul indica elementul, proprietatea ce aspect se schimba, valoarea — cum anume. Un bloc <style> in <head> aplica regulile intregii pagini.
HTML + CSS — pagina firma tehnica stilizata
<!DOCTYPE html> <html lang="ro"> <head> <meta charset="UTF-8"> <title>Instalatii Termice Pro</title> <style> body { background-color: #f5f5f5; /* fundal gri deschis */ color: #333333; /* text gri inchis */ font-family: Arial, sans-serif; max-width: 900px; margin: 0 auto; /* centreaza pagina pe orizontala */ padding: 20px; } h1 { color: #c0392b; /* rosu tehnic */ font-size: 2rem; } h2 { color: #2c3e50; /* albastru-antracit */ border-left: 4px solid #2c3e50; padding-left: 10px; } p { line-height: 1.7; /* spatiere intre randuri */ } img { max-width: 100%; /* imaginea nu depaseste containerul */ border-radius: 8px; } a { color: #2980b9; /* albastru pentru link-uri */ } </style> </head> <body> <h1>Instalatii Termice Pro SRL</h1> <h2>Despre noi</h2> <p>Servicii complete de instalatii sanitare si de incalzire.</p> <img src="echipa.jpg" alt="Echipa tehnica" width="600"> <p><a href="contact.html">Contacteaza-ne</a></p> </body> </html>
Proprietati CSS de baza frecvent folosite:
  • color — culoarea textului (ex: #333333, red, rgb(0, 0, 255))
  • background-color — culoarea de fundal a unui element
  • font-family — tipul de font (ex: Arial, sans-serif; al doilea font e de rezerva)
  • font-size — marimea textului (ex: 1.2rem = de 1,2 ori marimea standard; 18px = 18 pixeli)
  • font-weight — grosimea textului (bold sau numeric: 400 = normal, 700 = bold)
  • line-height — distanta intre randuri (ex: 1.7 = 170% din marimea fontului)
  • margin / padding — spatiu in afara, respectiv in interiorul marginii unui element

Culorile in CSS se pot scrie in trei moduri echivalente:

  • Cod hexazecimal: #c0392b (R=c0, G=39, B=2b in baza 16; valori 00–ff per canal)
  • Functie RGB: rgb(192, 57, 43) (valori 0–255 pentru Rosu, Verde, Albastru)
  • Cuvant cheie: red, blue, gray (CSS recunoaste peste 140 de culori cu nume in engleza)
7

7. Pagina completa — exemplu integrat pentru o firma tehnica

Reunim toate elementele invatate intr-un singur document complet. Acesta este tiparul minim al oricarei pagini web de prezentare — valabil pentru o firma de instalatii, un atelier de tamplarie, un service auto sau orice alta afacere din sectorul tehnic sau al serviciilor.
Exemplu complet — firma ThermoTech SRL
<!DOCTYPE html> <html lang="ro"> <head> <meta charset="UTF-8"> <title>ThermoTech SRL</title> <style> body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; color: #222; } h1 { color: #b22222; } h2 { color: #1a3a5c; border-left: 4px solid #1a3a5c; padding-left: 10px; } img { max-width: 100%; border-radius: 6px; } a { color: #1a6eb5; } .contact { background: #eef4fb; padding: 15px; border-radius: 8px; } </style> </head> <body> <h1>ThermoTech SRL</h1> <h2>Cine suntem</h2> <p>Firma specializata in proiectarea, montarea si intretinerea instalatiilor termice si sanitare. Autorizati ISCIR si ANPM pentru toate tipurile de lucrari.</p> <img src="imagini/echipa.jpg" alt="Echipa ThermoTech la lucru" width="700"> <h2 id="servicii">Servicii</h2> <p>Montaj centrale termice, instalatii sanitare, reparatii urgente, revizie anuala. Interventie rapida in toata zona metropolitana.</p> <p><a href="#servicii">Detalii servicii</a></p> <div class="contact"> <h2>Contact</h2> <p>Telefon: <a href="tel:+40721000000">0721 000 000</a></p> <p>Email: <a href="mailto:office@thermotech.ro">office@thermotech.ro</a></p> <p><a href="formular-contact.html">Formular de cerere oferta</a></p> </div> </body> </html>

Ce observam in exemplul complet:

  • Un singur <h1> — numele firmei, cel mai important element al paginii
  • Mai multe <h2> — sectiuni logice: Cine suntem, Servicii, Contact
  • O imagine cu atributele src, alt si width
  • Legaturi de tip tel: (apel direct de pe mobil) si mailto: (deschide clientul de email)
  • Un <div class="contact"> care grupeaza elementele de contact si le stilizeaza impreuna cu o singura regula CSS
  • Ancora id="servicii" pe un <h2> permite navigare intra-pagina cu href="#servicii"

Exercitii practice

Exercitiul 1 (Nivel minim) — Identifica structura

Deschide orice pagina web (de exemplu, site-ul unui producator de scule sau materiale de constructie) si, cu butonul drept al mouse-ului, alege Vizualizare sursa pagina. Identifica in codul HTML afisat: declaratia <!DOCTYPE>, elementele <head> si <body>, cel putin un titlu, un paragraf, o imagine si un hyperlink. Noteaza ce ai gasit si ce atribute are fiecare element.

Vezi rezolvarea

Rezolvare model (exemplu pe o pagina reala de producator scule/materiale):

  1. <!DOCTYPE html> — apare pe prima linie a sursei, anunta ca pagina e HTML5.
  2. <head> — contine <meta charset="UTF-8"> si <title> cu numele firmei (vizibil in tabul browserului).
  3. <body> — cuprinde tot ce vezi pe ecran: meniu, text, imagini.
  4. Titlu: un <h1> cu numele firmei sau al produsului principal.
  5. Paragraf: un <p> cu descrierea unui produs sau serviciu.
  6. Imagine: un <img src="..." alt="..."> cu poza produsului; atributul alt descrie imaginea.
  7. Hyperlink: un <a href="..."> catre alta pagina a site-ului (ex: catalog, contact).

Rezultatul asteptat: notite cu aceste 6 elemente si atributele lor, gasite efectiv in sursa paginii alese.

Exercitiul 2 (Nivel standard) — Pagina de prezentare

Creeaza un fisier firma_mea.html si scrie o pagina HTML completa pentru o firma fictiva din domeniul tehnic sau al serviciilor (ex: service auto, atelier de tamplarie, firma de curatenie industriala). Pagina trebuie sa contina: structura de baza corecta, un <h1> cu numele firmei, minimum doua sectiuni cu <h2>, paragrafe descriptive, o imagine, un link extern cu target="_blank" si un link mailto:. Adauga un bloc <style> in <head> cu: culoare fundal, culoare titlu si tip de font.

Vezi rezolvarea

Rezolvare model — firma_mea.html (service auto):

<!DOCTYPE html> <html lang="ro"> <head> <meta charset="UTF-8"> <title>Service Auto Rapid</title> <style> body{background:#eef2f5;color:#222;font-family:Arial,sans-serif;max-width:700px;margin:0 auto;padding:20px} h1{color:#c0392b} </style> </head> <body> <h1>Service Auto Rapid</h1> <h2>Despre noi</h2> <p>Reparatii auto rapide si de incredere, cu piese originale.</p> <h2>Servicii</h2> <p>Diagnoza computerizata, schimb ulei, reparatii frana.</p> <img src="atelier.jpg" alt="Atelierul service auto" width="400"> <a href="https://www.rar.ro" target="_blank">RAR</a> <a href="mailto:contact@serviceauto.ro">Scrie-ne</a> </body> </html>

Contine toate cerintele: structura de baza, h1, doua h2, paragrafe, imagine, link extern cu target="_blank", link mailto, si un bloc style cu fundal, culoare titlu si font.

Exercitiul 3 (Nivel performanta) — Catalog de produse

Extinde pagina de la exercitiul 2 cu o sectiune Catalog produse/servicii cu minimum 3 elemente. Fiecare element trebuie sa aiba: un <h3> cu numele produsului sau serviciului, un paragraf de descriere, pretul sau termenul de executie si un link Solicita oferta catre o pagina fictiva oferta.html. Stilizeaza sectiunea de catalog cu un fundal diferit de restul paginii, folosind un <div> cu clasa CSS dedicata. Verifica in browser (dublu-clic pe fisierul HTML) ca pagina se afiseaza corect.

Vezi rezolvarea

Nu scriem codul complet — extinde singur pagina de la exercitiul 2. Schita:

  1. Adauga o sectiune noua: <h2>Catalog produse/servicii</h2>.
  2. Pentru fiecare din cele minimum 3 elemente: un <h3> cu numele, un <p> cu descrierea, pretul sau termenul (poate fi tot intr-un <p>), si <a href="oferta.html">Solicita oferta</a>.
  3. Grupeaza fiecare element intr-un <div class="produs">...</div> ca sa il poti stiliza separat.
  4. In <style>, adauga o regula .produs{background:...} cu un fundal diferit de restul paginii.
  5. Capcana: fisierul oferta.html nu exista inca — linkul va da eroare la clic pana il creezi, dar exercitiul cere doar legatura, nu pagina propriu-zisa.

Criterii de evaluare: minimum 3 elemente complete, div-uri stilizate distinct de restul paginii, link functional catre oferta.html, verificare vizuala in browser (dublu-clic pe fisier).

Ce ai invatat astazi

  • HTML = limbaj de marcare pentru structura paginilor web; CSS = stilizare vizuala
  • Structura obligatorie: <!DOCTYPE html>, <html>, <head> + <body>
  • Titluri: 6 niveluri h1–h6; h1 se foloseste o singura data pe pagina
  • Paragrafe: <p>; browserul adauga spatiu automat inainte si dupa
  • Imagini: <img src="..." alt="..." width="..."> — tag void, fara tag de inchidere; alt este obligatoriu
  • Legaturi: <a href="...">; tipuri: externa, interna, ancora (#id), mailto:, tel:
  • CSS: color, background-color, font-family, font-size, line-height; definit in bloc style din head
  • Culori CSS: cod hex (#rrggbb), functie rgb(r,g,b) sau cuvant cheie (red, blue)

Vrei mai mult?

Provocare: Deschide fisierul firma_mea.html de la exercitiul 2 (sau creeaza-l acum) si adauga o lista de servicii cu <ul> si <li> - un tag pe care lectia nu l-a folosit. Adauga apoi in <style> regula ul { list-style: none; padding-left: 0; } si verifica in browser ca lista arata ca un meniu curat, fara buline.

De ce? O regula CSS scrisa pentru un tag, de tipul h2 { color: ... }, se aplica automat TUTUROR titlurilor h2 din pagina, dar o regula legata de o clasa (.contact) afecteaza DOAR elementul care are acea clasa. De ce crezi ca browserul trateaza diferit un selector de tag fata de un selector de clasa? Ce s-ar intampla daca ai avea trei div-uri si vrei sa stilizezi doar unul dintre ele?

Mai departe: Apasa F12 in orice browser si deschide Inspecteaza elementul pe un site real de firma (service auto, cofetarie, cabinet). Vei recunoaste exact structura din aceasta lectie: DOCTYPE, head, body, h1-h2, img, a. Orice meserias care vrea clienti online (instalator, tamplar, cofetar) are nevoie de o pagina minima construita exact asa inainte sa se gandeasca la ceva mai complex.

Finalul modulului

Ai parcurs toate lectiile din modulul Imagini & Pagini Web. Acum stii sa recunosti tipurile de imagini digitale si sa construiesti o pagina web cu structura HTML si stilizare CSS de baza.

Inapoi la modul →