Invatare Atomica

Pagina de portofoliu online

Progres lectie:
0%
🎯

Obiectivul lectiei

Vei construi o pagina web completa de portofoliu artistic — cu o galerie de imagini organizata in grid, titlu si descriere pentru fiecare lucrare, o sectiune "Despre artist" si o sectiune de contact cu link mailto. Totul cu HTML si CSS pur, fara baze de date sau backend — o pagina statica gata de publicat online.

Dupa aceasta lectie vei putea:

  • Sa folosesti etichetele <figure> si <figcaption> pentru imagini cu descriere
  • Sa creezi o galerie de imagini cu CSS Grid (grid-template-columns, gap)
  • Sa structurezi o pagina cu sectiuni semantice: header, main, section, footer
  • Sa scrii o sectiune "Despre artist" cu fotografie si paragraf bio
  • Sa adaugi un link de contact mailto: si unul catre retele sociale
  • Sa faci galeria responsive cu auto-fill si minmax in CSS Grid

Incearca singur!

Provocare:

Imagineaza-ti ca esti elev la Liceul de Arte si vrei sa-ti arati lucrarile online — poate pentru un concurs, pentru un profesor sau pentru parintii unui coleg care vrea sa cumpere o pictura. Ai 6 lucrari fotografiate si vrei ca fiecare sa apara cu titlul si tehnica folosita. Cum ai organiza pagina si ce informatii ai pune langa fiecare imagine? Scrie ideea ta mai jos.

💡 Ai nevoie de un indiciu?

Gandeste-te la un vernisaj fizic: fiecare tablou are o eticheta alatura cu titlul, artistul si tehnica. Pe web, eticheta aceea se face cu <figcaption> si se lipeste de imagine cu <figure>.

Cat despre asezarea mai multor tablouri in randuri si coloane — exact asta face CSS Grid: imparte spatiul paginii intr-un caroiaj si plaseaza fiecare lucrare intr-o celula.

1

1. Imaginea cu descriere: figure si figcaption

In HTML5, perechea <figure> + <figcaption> este modul corect de a asocia o imagine cu descrierea ei. figure este containerul semantic (spune "acesta este un element ilustrativ"), iar figcaption este legenda — titlul sau descrierea lucrarii. 
<!-- O lucrare in galerie: imagine + titlu + tehnica -->
<figure class="lucrare">
  <img
    src="imagini/peisaj-acril.jpg"
    alt="Peisaj de toamna pictat in acril pe panza, 50x70 cm"
  >
  <figcaption>
    <strong>Toamna la munte</strong><br>
    Acril pe panza, 50×70 cm, 2025
  </figcaption>
</figure>
De ce figure si figcaption si nu div si p?

Semantic: browserul, cititoarele de ecran (accesibilitate) si Google stiu ca figcaption descrie exact img-ul din acel figure. O galerie cu figure este indexata mai bine in cautari de imagini si e mai accesibila pentru persoane cu deficiente de vedere.

Practic: codul e mai scurt si clar — dai o singura clasa CSS (.lucrare) pe figure si stilizezi tot containerul cu un singur selector.

Atributul alt al imaginii ramane obligatoriu chiar si cand exista figcaption: alt este citit cand imaginea nu se incarca sau de cititoarele de ecran, figcaption este textul vizibil pe pagina pentru toti utilizatorii. Nu se exclud — se completeaza.
2

2. CSS Grid pentru galeria de imagini

CSS Grid este sistemul de asezare in pagina cu randuri si coloane. Pentru o galerie de imagini este ideal: definesti "grila" pe containerul parinte si fiecare figure copil se plaseaza automat intr-o celula a grilei.
HTML — containerul galeriei
<section class="galerie">
  <h2>Lucrarile mele</h2>

  <div class="grid-galerie">

    <figure class="lucrare">
      <img src="imagini/lucrare1.jpg"
           alt="Portret in carbune, 30x40 cm">
      <figcaption>
        <strong>Portret I</strong><br>Carbune pe hartie, 30×40 cm
      </figcaption>
    </figure>

    <figure class="lucrare">
      <img src="imagini/lucrare2.jpg"
           alt="Natura statica in acuarela, 25x35 cm">
      <figcaption>
        <strong>Natura statica</strong><br>Acuarela, 25×35 cm
      </figcaption>
    </figure>

    <!-- ... alte figure-uri pentru restul lucrarilor ... -->

  </div>
</section>
CSS — regulile Grid pentru .grid-galerie
/* Containerul grilei */
.grid-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  /* auto-fill = cate coloane incap; minmax(240px,1fr) = minim 240px, maxim 1 fractie */
  gap: 24px;         /* spatiu intre celulele grilei (rand si coloana) */
  margin-top: 1.5rem;
}

/* Fiecare celula (figure) */
.lucrare {
  margin: 0;             /* elimina margin-ul implicit al lui figure */
  text-align: center;
}

.lucrare img {
  width: 100%;          /* imaginea umple toata latimea celulei */
  height: 200px;        /* inaltime fixa — toate la fel, ca la o expozitie */
  object-fit: cover;   /* decupeaza fara distorsiune, nu intinde imaginea */
  display: block;
}

.lucrare figcaption {
  font-size: 0.9rem;
  color: #555;
  padding: 8px 4px;
}
Cum arata in browser:

Pe un ecran lat (laptop): 3-4 coloane de imagini, fiecare la 240-300px latime, cu titlul lucrarii dedesubt. Pe tableta: 2 coloane. Pe telefon: 1 coloana. Totul se intampla automat prin auto-fill si minmax, fara niciun cod JavaScript si fara media queries suplimentare.

3

3. Structura paginii cu sectiuni semantice

O pagina de portofoliu bine scrisa foloseste etichete semantice — etichete care spun browserului si motoarelor de cautare ce rol are fiecare zona, nu doar cum arata. Iata structura completa recomandata: 
<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portofoliu Ana Ionescu — Arte Vizuale</title>
  <link rel="stylesheet" href="stil.css">
</head>
<body>

  <!-- 1. Antet: numele artistului si subtitlul -->
  <header class="site-header">
    <h1>Ana Ionescu</h1>
    <p class="subtitlu">Arte vizuale · Pictura · Desen</p>
  </header>

  <!-- 2. Continut principal (unic pe pagina) -->
  <main>

    <!-- 2a. Sectiunea galerie -->
    <section class="galerie">
      <h2>Lucrarile mele</h2>
      <div class="grid-galerie">
        <!-- figure-uri cu imagini, vezi Atomul 1 si 2 -->
      </div>
    </section>

    <!-- 2b. Sectiunea Despre artist -->
    <section class="despre">
      <h2>Despre artist</h2>
      <!-- continut: foto + bio, vezi Atomul 4 -->
    </section>

    <!-- 2c. Sectiunea contact -->
    <section class="contact">
      <h2>Contact</h2>
      <!-- mailto + retele sociale, vezi Atomul 5 -->
    </section>

  </main>

  <!-- 3. Subsol -->
  <footer>
    <p>© 2025 Ana Ionescu. Toate drepturile rezervate.</p>
  </footer>

</body>
</html>
Rezumatul rolurilor:
  • <header> — antetul paginii: contine de obicei h1 si subtitlu
  • <main> — continutul principal, unic pe pagina; sarit de cititoarele de ecran la navigare
  • <section> — o zona tematica distincta (galerie, despre, contact); poate aparea de mai multe ori
  • <footer> — subsolul paginii: copyright, link-uri secundare
4

4. Sectiunea "Despre artist" cu Flexbox

Sectiunea "Despre artist" contine de obicei o fotografie de profil si un paragraf de prezentare asezate alaturate — fotografia la stanga, textul la dreapta. Aceasta asezare orizontala se face cu CSS Flexbox pe containerul lor comun.
HTML — sectiunea Despre artist
<section class="despre">
  <h2>Despre artist</h2>

  <div class="despre-continut">

    <img
      src="imagini/foto-profil.jpg"
      alt="Fotografia artistei Ana Ionescu"
      class="foto-profil"
    >

    <div class="bio">
      <h3>Ana Ionescu</h3>
      <p>
        Sunt eleva in clasa a XI-a la Liceul de Arte, sectia Arte Vizuale.
        Lucrez cu acrilice, carbune si acuarela. Ma inspira natura si portretul uman.
      </p>
      <p>
        Am participat la expozitia scolara "Primavara Artelor" in 2024 si 2025.
        Tehnica mea preferata este portretul in carbune pe hartie Canson.
      </p>
    </div>

  </div>
</section>
CSS — Flexbox pentru asezarea foto + bio
.despre-continut {
  display: flex;            /* copiii se aseaza orizontal */
  gap: 32px;              /* spatiu intre fotografie si text */
  align-items: flex-start; /* aliniaza in sus, nu centrat vertical */
  flex-wrap: wrap;         /* pe telefon: trec pe rand nou, nu se inghesuie */
}

.foto-profil {
  width: 180px;
  height: 180px;
  object-fit: cover;      /* decupeaza patrat, fara distorsiune */
  border-radius: 50%;     /* face fotografia rotunda */
  flex-shrink: 0;         /* nu permite micsorarea fotografiei */
}

.bio {
  flex: 1;                /* preia tot spatiul ramas dupa fotografie */
}

.bio h3 {
  margin-top: 0;
  font-size: 1.3rem;
}
Diferenta dintre Grid si Flexbox:

CSS Grid — pentru asezari bidimensionale (randuri SI coloane simultan): galeria de imagini unde vrei celule egale pe mai multe randuri.

CSS Flexbox — pentru asezari unidimensionale (un rand SAU o coloana): foto + text alaturate, sau o bara de navigare cu butoane.

Pe o pagina reala le vei folosi pe ambele — Grid pentru grila galeriei, Flexbox pentru asezarea foto-bio.

5

5. Sectiunea de contact cu mailto si retele sociale

Pe o pagina statica (fara server, fara baze de date), cel mai simplu mod de contact este link-ul mailto: — cand vizitatorul da click, i se deschide aplicatia de email cu adresa ta pre-completata. Poti adauga si link-uri catre profilurile de Instagram, Behance sau alte retele sociale.
HTML — sectiunea Contact completa
<section class="contact">
  <h2>Contact</h2>

  <p>
    Esti interesat de una dintre lucrarile mele sau vrei sa colaboram?
    Scrie-mi un mesaj!
  </p>

  <ul class="contact-lista">

    <!-- Link email: deschide aplicatia de email -->
    <li>
      <a href="mailto:ana.ionescu@arte.ro">
        ana.ionescu@arte.ro
      </a>
    </li>

    <!-- Link retea sociala: se deschide in tab nou -->
    <li>
      <a
        href="https://instagram.com/ana.arte.vizuale"
        target="_blank"
        rel="noopener noreferrer"
      >
        Instagram: @ana.arte.vizuale
      </a>
    </li>

    <!-- Portofoliu pe Behance (optional) -->
    <li>
      <a
        href="https://behance.net/ana-ionescu"
        target="_blank"
        rel="noopener noreferrer"
      >
        Profil Behance
      </a>
    </li>

  </ul>
</section>
De ce rel="noopener noreferrer" la link-urile externe?

Cand deschizi un link extern cu target="_blank", pagina noua poate — tehnic — accesa fereastra ta originala prin JavaScript. Atributul rel="noopener noreferrer" blocheaza acest acces si nu transmite adresa paginii tale catre site-ul destinatie. Este o buna practica de securitate si confidentialitate, recomandata pentru toate link-urile externe care se deschid in tab nou.

CSS — stilizarea listei de contact
.contact-lista {
  list-style: none;     /* elimina punctele de lista */
  padding: 0;
  margin-top: 1rem;
}

.contact-lista li {
  margin-bottom: 0.75rem;
}

.contact-lista a {
  color: #5c4b3a;           /* maro calduros — asociat cu arta pe hartie */
  font-size: 1.05rem;
  text-decoration: none;
}

.contact-lista a:hover {
  text-decoration: underline;
}
6

6. Pagina completa — cod final integrat

Iata cum arata fisierul portofoliu.html complet, cu toate sectiunile integrate. Codul este valid HTML5 si produce o pagina functionala fara niciun fisier server sau baza de date — o pagina statica pe care o poti pune pe GitHub Pages sau Netlify.
portofoliu.html — versiunea finala
<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ana Ionescu — Portofoliu Arte Vizuale</title>
  <link rel="stylesheet" href="stil.css">
</head>
<body>

  <header class="site-header">
    <h1>Ana Ionescu</h1>
    <p class="subtitlu">Arte vizuale · Pictura · Desen</p>
  </header>

  <main>

    <section class="galerie">
      <h2>Lucrarile mele</h2>
      <div class="grid-galerie">

        <figure class="lucrare">
          <img src="imagini/lucrare1.jpg"
               alt="Portret in carbune, 30x40 cm, 2025">
          <figcaption><strong>Portret I</strong><br>
            Carbune pe hartie, 30×40 cm</figcaption>
        </figure>

        <figure class="lucrare">
          <img src="imagini/lucrare2.jpg"
               alt="Natura statica in acuarela, 25x35 cm, 2025">
          <figcaption><strong>Natura statica</strong><br>
            Acuarela, 25×35 cm</figcaption>
        </figure>

        <figure class="lucrare">
          <img src="imagini/lucrare3.jpg"
               alt="Peisaj urban in acril, 40x60 cm, 2024">
          <figcaption><strong>Oras de seara</strong><br>
            Acril pe panza, 40×60 cm</figcaption>
        </figure>

      </div>
    </section>

    <section class="despre">
      <h2>Despre artist</h2>
      <div class="despre-continut">
        <img src="imagini/foto-profil.jpg"
             alt="Fotografia artistei Ana Ionescu"
             class="foto-profil">
        <div class="bio">
          <h3>Ana Ionescu</h3>
          <p>Eleva in clasa a XI-a Arte Vizuale. Lucrez cu acrilice,
          carbune si acuarela. Ma inspira natura si portretul uman.</p>
          <p>Participanta la "Primavara Artelor" 2024 si 2025.</p>
        </div>
      </div>
    </section>

    <section class="contact">
      <h2>Contact</h2>
      <p>Interesat de o lucrare? Trimite-mi un mesaj.</p>
      <ul class="contact-lista">
        <li><a href="mailto:ana.ionescu@arte.ro">
          ana.ionescu@arte.ro</a></li>
        <li><a href="https://instagram.com/ana.arte.vizuale"
               target="_blank" rel="noopener noreferrer">
          Instagram: @ana.arte.vizuale</a></li>
      </ul>
    </section>

  </main>

  <footer>
    <p>© 2025 Ana Ionescu. Toate drepturile rezervate.</p>
  </footer>

</body>
</html>
Recapitulare — ce face fiecare parte:
  • figure + figcaption — fiecare lucrare cu titlul si tehnica, semantic si accesibil
  • CSS Grid (auto-fill + minmax) — galerie responsive fara JavaScript si fara media queries
  • Flexbox (despre-continut) — fotografie + bio alaturate; pe telefon trec pe rand nou automat
  • mailto: — contact simplu, direct, fara server
  • rel="noopener noreferrer" — securitate pentru link-urile externe in tab nou

Exercitii practice

Exercitiul 1 (Nivel minim) - Galerie de 4 lucrari

Creeaza un fisier HTML cu o galerie de 4 lucrari fictive folosind <figure> si <figcaption>. Pentru fiecare lucrare: o eticheta <img> cu src si alt completate, si un <figcaption> cu titlul si tehnica. Poti folosi imagini de placeholder (ex: https://placehold.co/400x300). Verifica ca structura HTML este corecta: fiecare img are atribut alt, fiecare figure are un figcaption.

Exercitiul 2 (Nivel standard) - Pagina completa cu Grid si Flexbox

Construieste pagina completa de portofoliu: (a) sectiune galerie cu div.grid-galerie stilizat cu CSS Grid (repeat(auto-fill, minmax(220px, 1fr)) si gap: 20px), cu cel putin 3 lucrari; (b) sectiune "Despre artist" cu fotografie si paragraf de bio asezate cu Flexbox; (c) sectiune "Contact" cu un link mailto: si unul catre Instagram care se deschide in tab nou cu rel="noopener noreferrer". Creeaza si fisierul stil.css cu regulile necesare.

Exercitiul 3 (Nivel performanta) - Pagina rafinata cu tema personala

Pornind de la pagina din Exercitiul 2: (a) alege o paleta cromatica de 3 culori inspirata din tehnica ta preferata si aplica-o consistent (background, headings, link-uri); (b) adauga un <header> cu <h1> si subtitlu si un <footer> cu copyright; (c) fa toate imaginile responsive cu object-fit: cover si inaltime fixa pe celulele grilei; (d) testeaza pagina in browser la latimi diferite si descrie in 3-4 propozitii cum se comporta galeria la ecran mic versus ecran mare.

Ce ai invatat astazi

  • figure + figcaption = modul semantic de a asocia o imagine cu titlul si descrierea ei
  • CSS Grid cu repeat(auto-fill, minmax(240px,1fr)) face galeria responsive automat, fara JavaScript
  • gap inlocuieste margin-urile individuale intre celulele grilei — mai simplu si mai precis
  • Structura semantica: header (antet), main (continut principal unic), section (zone tematice), footer (subsol)
  • Flexbox pe .despre-continut = fotografie + bio alaturate; flex-wrap:wrap = responsiv pe telefon
  • object-fit: cover = imaginea umple celula fara distorsiune, decupand ce depaseste
  • mailto:adresa@email.com = link de contact simplu, deschide aplicatia de email a vizitatorului
  • rel="noopener noreferrer" = securitate obligatorie la link-uri externe cu target="_blank"

Ai terminat modulul!

Ai construit de la zero o pagina web de portofoliu artistic completa — cu galerie responsiva, bio si contact. Urmatorul pas: publica pagina online pe GitHub Pages sau Netlify si trimite link-ul profesorului!

Inapoi la modul →