Invatare Atomica

Pagina web: structura HTML si CSS de baza

Progres lectie:
0%
🎯

Obiectivul lectiei

Vei intelege cum este construita o pagina web: limbajul HTML da structura (titluri, paragrafe, imagini, link-uri), iar CSS ii adauga aspectul vizual (culori, fonturi, spatieri). La finalul lectiei vei putea citi si scrie cod HTML si CSS de baza pentru propria pagina de portofoliu artistic.

Dupa aceasta lectie vei putea:

  • Sa descrii structura minima a unui fisier HTML (DOCTYPE, html, head, body)
  • Sa folosesti corect etichetele de titlu h1-h3, paragrafe p, imagini img si link-uri a
  • Sa explici diferenta dintre HTML (structura) si CSS (aspect vizual)
  • Sa aplici reguli CSS de baza: culori, fonturi, spatiere (padding, margin)
  • Sa legezi un fisier CSS extern la o pagina HTML prin eticheta link
  • Sa recunosti formate de imagine potrivite pentru web (JPEG, PNG, WebP)

Incearca singur!

Provocare:

Gandeste-te la ultima expozitie de arta pe care ai vazut-o (sau imagineaza-ti una). Exista un panou de titlu, o descriere a artistului, fotografii ale lucrarilor si un numar de telefon de contact. Cum ai organiza aceste informatii pe o pagina web? Scrie ce sectiuni crezi ca ar trebui sa apara si in ce ordine.

💡 Ai nevoie de un indiciu?

Gandeste-te ca pagina web este ca o coala de hartie cu sectiuni: un titlu mare sus, un paragraf de descriere, imagini ale lucrarilor si la final datele de contact.

In HTML, fiecare tip de continut are propria eticheta: <h1> pentru titlul principal, <p> pentru paragrafe de text, <img> pentru imagini, <a> pentru link-uri. Exact ca la un layout de revista!

1

1. Ce este o pagina web si cum este construita

O pagina web este un document digital accesibil printr-un browser (Chrome, Firefox, Edge). Orice pagina are trei straturi distincte:
  • HTML — structura si continutul (scheletul paginii)
  • CSS — aspectul vizual: culori, fonturi, spatieri, asezare in pagina (haina paginii)
  • JavaScript — comportamentul interactiv: animatii, butoane, formulare dinamice
Analogie — portofoliul pe hartie vs. portofoliul web:

Cand pregatesti un portofoliu artistic pe hartie, ai mai intai scheletul: ce lucrari incluzi si in ce ordine (= HTML). Apoi alegi culorile copertei, fontul numelui, spatiile dintre imagini (= CSS). Pagina web functioneaza la fel — intai structura, apoi stilul.

Fisierele HTML se salveaza cu extensia .html si se pot deschide direct in browser, fara nicio instalare suplimentara. Un site web poate contine mai multe fisiere .html legate intre ele prin link-uri.
2

2. Structura minima a unui fisier HTML

Orice fisier HTML corect incepe cu o declaratie de tip document si contine doua sectiuni principale: head (informatii pentru browser, invizibile pentru utilizator) si body (continutul vizibil in pagina).
<!-- Structura minima HTML5 -->
<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="utf-8">
  <title>Portofoliu Ana Ionescu</title>
</head>
<body>
  <!-- Continutul vizibil vine aici -->
</body>
</html>
Ce face fiecare linie:
  • <!DOCTYPE html> — spune browserului ca documentul este HTML5 (standardul modern)
  • <html lang="ro"> — elementul radacina al paginii; lang="ro" indica limba romana
  • <meta charset="utf-8"> — permite afisarea corecta a caracterelor speciale (a, i, s, t cu diacritice)
  • <title> — textul care apare in tab-ul browserului si in rezultatele Google
  • <body> — tot ce scrii intre aceste etichete este vizibil in pagina
Regula importanta: aproape toate etichetele HTML au o eticheta de deschidere (<p>) si una de inchidere (</p>). Exceptii: <meta>, <img>, <br> nu au eticheta de inchidere — se numesc etichete goale (void elements).
3

3. Titluri, paragrafe, imagini si link-uri

Cele mai folosite etichete din body — exact ce ai nevoie pentru un portofoliu artistic:
Titluri: h1 pana la h6
<h1>Ana Ionescu — Portofoliu Arte Vizuale</h1>
<h2>Lucrarile mele</h2>
<h3>Seria Natura 2025</h3>

h1 = titlul principal al paginii (un singur h1 pe pagina este recomandat). h2 si h3 = subtitluri, in ordinea importantei. Browserul afiseaza automat h1 mai mare decat h2 mai mare decat h3 — dar aspectul final se controleaza cu CSS.

Paragrafe: p
<p>Sunt studenta in clasa a XI-a, sectia Arte Vizuale.
Pasiunea mea sunt picturile in acril si carbune.</p>

Eticheta p (paragraph) creeaza un bloc de text cu spatiu automat deasupra si sub el. Apasarea tastei Enter in codul HTML nu creeaza rand nou in pagina — ai nevoie de o eticheta noua <p> sau de eticheta <br> pentru un rand nou simplu.

Imagini: img
<img
  src="imagini/peisaj-acril.jpg"
  alt="Peisaj de toamna pictat in acril, 50x70 cm"
  width="400"
>

src = calea sau adresa imaginii. alt = descrierea imaginii (obligatoriu!). width = latimea in pixeli; inaltimea se calculeaza automat proportional daca nu este specificata separat.

Link-uri: a (anchor)
<a href="contact.html">Contacteaza-ma</a>

<!-- Link catre un site extern — se deschide in tab nou -->
<a href="https://instagram.com/ana.arte"
   target="_blank">Profil Instagram</a>

href = destinatia link-ului (fisier local sau URL extern). target="_blank" deschide link-ul intr-un tab nou al browserului — recomandat pentru link-uri externe, ca utilizatorul sa nu paraseasca site-ul tau.

4

4. CSS: culori, fonturi si spatieri

CSS (Cascading Style Sheets) este limbajul prin care dai aspect vizual elementelor HTML. O regula CSS are trei parti: selectorul (ce element stilizezi), proprietatea (ce aspect schimbi) si valoarea (la ce il schimbi).
Sintaxa unei reguli CSS:
selector {
  proprietate: valoare;
}

/* Exemple concrete: */
h1 {
  color: #2c2c2c;          /* culoarea textului — gri inchis */
  font-size: 2rem;         /* marimea fontului (2x marimea de baza) */
  font-family: Georgia, serif; /* fontul (cu fallback) */
}

p {
  color: #555555;           /* gri mediu pentru paragrafe */
  line-height: 1.6;        /* interliniere — text mai aerisit */
  margin-bottom: 1rem;     /* spatiu sub fiecare paragraf */
}
Culori in CSS — trei moduri de a scrie aceeasi culoare:
color: red;                /* cuvant cheie (148 culori denumite oficial in CSS) */
color: #e63946;           /* hex: # + 6 cifre (RR GG BB in baza 16) */
color: rgb(230, 57, 70);  /* RGB: fiecare canal 0-255 */

Toate trei produc acelasi rosu. Webdesignerii folosesc frecvent hex (#rrggbb) — valorile hex se copiaza direct din Photoshop, GIMP sau orice instrument de selectare culori.

Spatieri: padding si margin
.sectiune-lucrare {
  padding: 16px;   /* spatiu INTERIOR (intre continut si marginea elementului) */
  margin: 24px 0;  /* spatiu EXTERIOR: 24px sus/jos, 0 stanga/dreapta */
}

Regula simpla: padding = spatiu inauntrul elementului; margin = spatiu in afara lui, intre elemente. Gandeste-te la un tablou inramat pe perete: spatiul dintre tablou si rama este padding-ul; distanta de pe perete pana la tabloul vecin este margin-ul.

Cum legam CSS la HTML: in sectiunea <head> a paginii HTML adaugam: 
<link rel="stylesheet" href="stil.css">
Browserul va incarca fisierul stil.css si va aplica toate regulile din el la pagina HTML. Avantaj major: un singur fisier CSS poate fi folosit de toate paginile site-ului — schimbi culoarea o data si se actualizeaza pretutindeni.
5

5. Formate de imagine pentru web

Un portofoliu artistic contine multe imagini — alegerea formatului corect influenteaza viteza de incarcare a paginii si calitatea afisarii.
JPEG / JPG — fotografii si lucrari pictate

Cel mai folosit format pentru fotografii pe web. Foloseste compresie cu pierderi (lossy): reduce dimensiunea fisierului micsorand usor calitatea imaginii intr-un mod greu sesizabil pentru ochi la calitate 80-90%. O fotografie originala de 5 MB poate ajunge la 300-500 KB ca JPEG la calitate 80%, pastrand aspectul excelent. Ideal pentru lucrarile tale pictate, fotografia de profil, fotografii de ansamblu.

PNG — grafice cu transparenta

Foloseste compresie fara pierderi (lossless) — calitatea nu scade deloc, dar fisierele sunt mai mari decat JPEG pentru fotografii. Marele avantaj: suporta transparenta (canal alfa). Ideal pentru logo-ul tau, semnatura digitala sau ilustratii cu fond transparent plasate peste alte elemente ale paginii.

WebP — formatul modern recomandat

Creat de Google, WebP ofera compresie superioara fata de JPEG si PNG la calitate egala sau mai buna. Suporta atat fotografii (cu pierderi) cat si grafice cu transparenta (fara pierderi). Este suportat de toate browserele moderne (Chrome, Firefox, Edge, Safari). Daca editorul tau grafic permite exportul in WebP, este alegerea optima pentru web.

GIF — nu pentru fotografii artistice

Limitat la maxim 256 culori — fotografiile si lucrarile pictate arata degradat. Singurul avantaj: suporta animatii simple (imagini care se schimba in bucla). Nu este recomandat pentru lucrarile de arta din portofoliu.

Concluzie practica: fotografia lucrarii tale — JPEG sau WebP. Logo sau element cu transparenta — PNG. Regula de aur: orice imagine pentru web trebuie sa fie sub 500 KB pentru o incarcare rapida a paginii.
6

6. Pagina HTML completa — exemplu portofoliu

Iata cum arata o pagina de portofoliu minimal cu structura HTML corecta si un fisier CSS atasat. Codul este sintactic valid si produce exact ce descrie comentariile:
Fisierul portofoliu.html
<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="utf-8">
  <title>Portofoliu Ana Ionescu</title>
  <link rel="stylesheet" href="stil.css">
</head>
<body>

  <h1>Ana Ionescu — Arte Vizuale</h1>
  <p>Student la Liceul de Arte. Pictura in acril si desen in carbune.</p>

  <h2>Lucrarile mele</h2>

  <img
    src="imagini/peisaj.jpg"
    alt="Peisaj de toamna in acril, 50x70 cm, 2025"
    width="400"
  >
  <p>Peisaj de toamna — acril pe panza, 50x70 cm</p>

  <h2>Contact</h2>
  <p>
    Scrie-mi la:
    <a href="mailto:ana@email.com">ana@email.com</a>
  </p>

</body>
</html>
Fisierul stil.css (in acelasi folder cu portofoliu.html)
/* Stil de baza pentru portofoliu artistic */
body {
  font-family: Georgia, serif;
  background-color: #fafaf8;  /* alb caldut, nu alb pur */
  color: #2c2c2c;            /* gri inchis — mai bland decat negru pur */
  max-width: 800px;
  margin: 0 auto;            /* centreaza pagina pe ecran */
  padding: 32px 16px;
}

h1 {
  font-size: 2rem;
  letter-spacing: 0.02em;   /* spatiere usoara intre litere */
  margin-bottom: 0.5rem;
}

h2 {
  font-size: 1.4rem;
  margin-top: 2rem;
  border-bottom: 2px solid #ccc; /* linie subtire sub subtitlu */
  padding-bottom: 0.3rem;
}

img {
  max-width: 100%;       /* imaginea nu depaseste latimea containerului */
  display: block;
  margin-top: 1rem;
}

a {
  color: #6d4c41;           /* maro calduros — asociat cu arta */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
Ce produce acest cod in browser:

Pagina afiseaza: un titlu mare cu numele artistului, un paragraf de bio, subtitlul "Lucrarile mele" cu o linie subtire dedesubt, fotografia lucrarii cu descriere sub ea, subtitlul "Contact" si o adresa de email pe care se poate da click. Fundalul este alb caldut, textul este gri inchis, fontul este serif (elegant, clasic, potrivit pentru arta), link-ul este colorat in maro. Pagina este centrata pe ecran la maxim 800px latime.

Exercitii practice

Exercitiul 1 (Nivel minim) - Identifica etichetele

Pornind de la structura HTML minima din Atomul 2, identifica si noteaza: (a) Ce eticheta defineste titlul afisat in tab-ul browserului? (b) Ce eticheta contine tot continutul vizibil al paginii? (c) Unde se pune eticheta <link> pentru fisierul CSS — in head sau in body? Justifica fiecare raspuns in 1-2 propozitii.

Vezi rezolvarea

Raspunsuri (Atomul 2):

  1. (a) Eticheta <title>, aflata in <head>. Textul dintre <title> si </title> apare in tab-ul browserului si in rezultatele Google, nu in pagina propriu-zisa.
  2. (b) Eticheta <body>. Tot ce scrii intre <body> si </body> este vizibil in pagina; <head>, in schimb, contine doar informatii pentru browser, invizibile pentru utilizator.
  3. (c) In <head>, langa <title>. Eticheta <link> leaga fisierul CSS extern inainte ca browserul sa deseneze continutul din <body>, ca stilul sa fie gata de la afisarea initiala a paginii.

Exercitiul 2 (Nivel standard) - Construieste structura portofoliului

Scrie codul HTML complet (cu DOCTYPE, head si body) pentru o pagina de portofoliu care contine: titlul tau de artist (h1), o scurta descriere (p), un subtitlu "Tehnici folosite" (h2), o lista neordonata cu cel putin 3 tehnici artistice (ul + li), o imagine a unei lucrari cu atribut alt descriptiv si un link catre profilul tau de Instagram care se deschide in tab nou. Adauga eticheta link pentru un fisier CSS extern.

Vezi rezolvarea

Cod HTML complet pentru portofoliu.html:

  1. <!DOCTYPE html><html lang="ro"><head><meta charset="utf-8"><title>Portofoliu Maria Popescu</title><link rel="stylesheet" href="stil.css"></head> - antetul: titlul de tab si legatura la CSS extern.
  2. <body><h1>Maria Popescu - Arte Vizuale</h1> - titlul de artist, un singur h1 pe pagina.
  3. <p>Sunt eleva la Liceul de Arte, pasionata de pictura in acril si desen in carbune.</p> - descrierea scurta.
  4. <h2>Tehnici folosite</h2><ul><li>Pictura in acril</li><li>Desen in carbune</li><li>Acuarela</li></ul> - subtitlul si lista neordonata cu 3 tehnici.
  5. <img src="imagini/lucrare1.jpg" alt="Peisaj de toamna in acril, 50x70 cm"> - imaginea unei lucrari, cu alt descriptiv obligatoriu.
  6. <a href="https://instagram.com/maria.arte" target="_blank">Profil Instagram</a></body></html> - link catre Instagram; target="_blank" il deschide intr-un tab nou.

Exercitiul 3 (Nivel performanta) - Stilizare cu tema artistica

Creeaza fisierul stil.css pentru portofoliul de la Exercitiul 2 cu urmatoarele cerinte: (a) font serif pentru h1 si h2, font sans-serif pentru paragrafe; (b) paleta cromatica de maxim 3 culori inspirata din domeniul tau artistic (ex: tonuri de pamant pentru pictura in acril, gri-uri pentru desen in carbune, tonuri reci pentru acuarela); (c) imagini responsive cu max-width: 100%; (d) spatiere corespunzatoare cu padding si margin, astfel incat pagina sa fie aerisita si eleganta. Explica alegerea culorilor tale in 2-3 propozitii.

Vezi rezolvarea

Schita de rezolvare pentru stil.css (structura, nu textul finit):

  1. Fonturi: pe selectorul h1, h2 pui font-family cu o valoare serif (ex. Georgia, serif); pe p pui o valoare sans-serif (ex. Arial, sans-serif). Foloseste intotdeauna un fallback dupa fontul preferat, exact ca in Atomul 4.
  2. Paleta: alege maxim 3 culori in hex (#RRGGBB), coerente cu tehnica ta (ex. tonuri de teracota si ocru pentru acril, gri-uri pentru carbune). Aplica-le pe color (text), pe fundal si eventual pe un accent (ex. culoarea link-urilor).
  3. Imagini responsive: pe selectorul img pui max-width: 100%, ca imaginea sa nu depaseasca niciodata latimea containerului ei.
  4. Spatiere: padding in jurul blocurilor de continut si margin-bottom intre paragrafe/sectiuni (vezi regula pentru p din Atomul 4), ca pagina sa respire.

Capcane: mai mult de 3 culori (paleta devine haotica), font-family fara fallback, uitarea max-width pe img (imaginea rupe pagina pe mobil).

Criterii de evaluare: toate cele 4 cerinte (a-d) prezente si functionale in stil.css, paleta chiar respectata pe elementele relevante (nu doar declarata), justificarea culorilor e specifica tehnicii tale, nu generica.

Ce ai invatat astazi

  • HTML = structura paginii; CSS = aspectul vizual — cele doua limbi se completeaza
  • Structura HTML minima: DOCTYPE → html → head (charset, title, link CSS) → body (continut vizibil)
  • Etichete esentiale: h1-h3 (titluri), p (paragrafe), img cu src si alt (imagini), a cu href (link-uri)
  • Regula CSS: selector { proprietate: valoare; } — selectezi elementul si schimbi ce aspect vrei
  • Culori CSS: cuvant cheie, hex (#rrggbb) sau rgb(r,g,b) — hex se copiaza din orice editor grafic
  • Padding = spatiu interior; Margin = spatiu exterior intre elemente
  • CSS extern se leaga din head cu <link rel="stylesheet" href="fisier.css"> — un fisier pentru tot site-ul
  • Formate imagine web: JPEG (fotografii), PNG (transparenta), WebP (modern, optim); tinta sub 500 KB/imagine

Vrei mai mult?

Provocare: La portofoliul tau din Exercitiul 2/3, adauga pe eticheta body o imagine de fundal cu background-image: url(...) si seteaza background-size: cover si background-attachment: fixed. Observa ce face fiecare proprietate: prima face imaginea sa acopere tot ecranul fara sa se repete, a doua tine fundalul pe loc cand derulezi pagina.

De ce? Fara nicio regula CSS scrisa de tine, browserul deseneaza deja h1 mai mare decat h2 si paragrafele cu spatiu intre ele. De unde vin aceste stiluri implicite si de ce arata usor diferit intre Chrome, Firefox si Edge daca nimeni nu a scris CSS pentru ele?

Deschidere: Din cauza acestor diferente intre browsere, designerii profesionisti nu pornesc niciodata de la zero: aplica un fisier de tip CSS reset sau normalize la inceputul proiectului, care anuleaza stilurile implicite si ii lasa sa construiasca acelasi aspect exact pe orice browser. E primul pas standard inainte de orice CSS propriu, inclusiv la portofoliul din Lectia 2.

Urmatoarea lectie

Continua cu Proiect: Portofoliu Online pentru Artist — construiesti pagina de portofoliu completa cu galerie de imagini, sectiune de descriere si sectiune de contact, gata de publicat online.

Continua →