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.

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.

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.

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

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 →