Expozitia sau concertul virtual al clasei

Gandeste-te la un program de concert tiparit: pe prima pagina e lista tuturor interpretilor din seara aceea, cu numarul paginii unde incepe fiecare. Pagina de start a site-ului este exact acest program — un singur loc din care vizitatorul alege pe cine vrea sa "asculte" sau sa "vada" mai departe.

expozitie-clasa-xii/
  index.html — pagina de start, cu lista tuturor elevilor
  style.css — fisierul de stil comun, folosit de toate paginile
  elevi/ — un fisier .html pentru fiecare elev
    maria-popescu.html
    andrei-ionescu.html
  media/ — un subfolder pentru fiecare elev, cu pozele si inregistrarea lui
    maria-popescu/lucrare1.jpg
    maria-popescu/recital.mp3 — inregistrarea audio, in acelasi subfolder

"Maria Popescu" → maria-popescu.html
"Andrei-Stefan Ionescu" → andrei-stefan-ionescu.html
"Ana-Maria Ionescu" → ana-maria-ionescu.html
Fotografiile fiecarui elev merg in propriul subfolder din media/, numit la fel: media/maria-popescu/, cu fisiere numite simplu, in ordine: lucrare1.jpg, lucrare2.jpg, profil.jpg. Daca elevul are o inregistrare, fisierul audio merge in acelasi subfolder, numit la fel de simplu: media/maria-popescu/recital.mp3.

Cand 20-25 de persoane lucreaza in paralel, fiecare la propria pagina, singurul lucru care tine site-ul unitar este conventia respectata de toti. Daca fiecare denumeste fisierele dupa gustul lui (unii cu spatii, unii cu diacritice, unii cu litere mari), pagina de start (index.html) va avea legaturi care functioneaza doar pe calculatorul pe care au fost testate, si se rup la publicare.

Construieste scheletul site-ului: folderele (elevi/, media/), pagina de start index.html cu lista tuturor colegilor si legaturile catre fiecare pagina-scena. Livreaza celorlalti un "sablon" gol de pagina-elev, pe care fiecare il copiaza si il completeaza.

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Expozitia Virtuala - Clasa a XII-a A</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="scena-elev">
        <h1>Expozitia Virtuala - Clasa a XII-a A</h1>
        <p>Alegeti un coleg pentru a vedea pagina lui</p>
    </header>

    <ul class="lista-elevi">
        <li><a href="elevi/maria-popescu.html">Maria Popescu</a></li>
        <li><a href="elevi/andrei-ionescu.html">Andrei Ionescu</a></li>
    </ul>
</body>
</html>

Observati diferenta fata de calea din pagina-elev: aici style.css si elevi/maria-popescu.html se scriu fara ../, pentru ca index.html este chiar in folderul principal — nu trebuie sa "urce" niciun nivel. Fiecare rand nou din <ul> este un elev in plus; rolul de STRUCTURA adauga cate o linie pentru fiecare din cei 20-25 de colegi, pe masura ce paginile lor sunt gata.

Scrie fisierul style.css comun: culorile, fontul, spatierea, aspectul galeriei de imagini. Un singur fisier de stil pentru tot site-ul inseamna ca toate paginile arata unitar, chiar daca fiecare elev pune continut diferit.

Aici lucreaza, de fapt, fiecare elev pentru propria pagina: alege 3-5 fotografii ale lucrarilor, scrie 3-5 randuri de biografie artistica si adauga, daca are, o inregistrare — un fisier audio (.mp3, pus chiar in pagina cu eticheta <audio>) pentru muzicieni, sau o inregistrare video incarcata pe YouTube si incorporata cu <iframe>, pentru celelalte specializari. Respecta conventia de denumire stabilita la Atomul 2.

Aduna toate paginile-elev intr-un singur folder final, verifica pe rand fiecare legatura (nu exista pagini "moarte", care duc la eroare), si urca site-ul complet pe hosting-ul gratuit. Este ultimul rol care lucreaza, pentru ca are nevoie de tot ce au produs ceilalti trei.

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Maria Popescu - Expozitia Virtuala</title>
    <link rel="stylesheet" href="../style.css">
</head>
<body>
    <a href="../index.html" class="inapoi">&larr; Toata clasa</a>

    <header class="scena-elev">
        <h1>Maria Popescu</h1>
        <p>Pian, clasa a XII-a A</p>
    </header>

    <section class="galerie">
        <img src="../media/maria-popescu/lucrare1.jpg" alt="Recital de pian, martie 2026">
        <img src="../media/maria-popescu/lucrare2.jpg" alt="Portret la pian">
    </section>

    <section class="inregistrare">
        <audio controls src="../media/maria-popescu/recital.mp3"></audio>
    </section>

    <section class="biografie">
        <p>Studiez pianul de 8 ani. Am cantat la 3 concerte scolare si
        m-am pregatit anul acesta pentru proba practica de la bacalaureat.</p>
    </section>
</body>
</html>

Observati calea catre stil: ../style.css. Semnul ../ inseamna "un folder mai sus" — pentru ca pagina se afla in elevi/, iar style.css sta un nivel deasupra, in folderul principal al site-ului. Aceeasi logica se aplica la imagini si la inregistrare: ../media/maria-popescu/lucrare1.jpg, ../media/maria-popescu/recital.mp3. Fisierul audio se pune in acelasi subfolder ca fotografiile lui, cu numele simplu, tot conform conventiei de la Atomul 2.

Un elev fara inregistrare audio, dar cu un video (ex. o repetitie filmata, sau un timelapse la o lucrare de pictura), inlocuieste sectiunea .inregistrare astfel:

<section class="inregistrare">
    <iframe
        src="https://www.youtube.com/embed/ID_VIDEO"
        title="Inregistrare video - Maria Popescu"
        allowfullscreen></iframe>
</section>

Pasii, in ordine: (1) incarcati inregistrarea pe YouTube — daca nu vreti sa fie publica pe canalul vostru, alegeti optiunea "Nelistat" la vizibilitate; (2) pe pagina video, apasati Share → Embed si copiati doar partea dintre ghilimele de dupa src=, sau luati direct sirul de dupa v= din adresa youtube.com/watch?v=ID_VIDEO; (3) inlocuiti ID_VIDEO din cod cu acel sir. Observati ca width si height nu mai apar direct pe <iframe> — dimensiunea vine din style.css comun (vezi Atomul 5), iar atributul title este obligatoriu pentru accesibilitate (descrie continutul ferestrei pentru cine foloseste un cititor de ecran).

:root {
    --culoare-principala: #2c1810;
    --culoare-accent: #d4af37;
    --culoare-fundal: #faf7f2;
    --culoare-text: #2c1810;
}

body {
    font-family: Georgia, serif;
    background: var(--culoare-fundal);
    color: var(--culoare-text);
    margin: 0;
    padding: 1rem;
}

.scena-elev h1 {
    color: var(--culoare-principala);
    border-bottom: 3px solid var(--culoare-accent);
    padding-bottom: 0.5rem;
}

.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.galerie img {
    width: 100%;
    border-radius: 8px;
}

.inregistrare audio {
    width: 100%;
}

.inregistrare iframe {
    width: 100%;
    height: 200px;
    border: 0;
}

Fiecare pagina-elev foloseste aceleasi clase (scena-elev, galerie, inregistrare) fara sa le redefineasca — de aceea toate paginile pastreaza aceleasi culori si acelasi aspect de galerie, indiferent cine le-a scris continutul. Observati ca dimensiunea inregistrarii (audio sau video) se stabileste aici, o singura data, cu width: 100% in loc de un atribut width="100%" scris in fiecare pagina — in HTML5, atributul width al unui <iframe> trebuie sa fie un numar de pixeli, nu un procent; procentul se scrie doar in CSS.

Stilul comun fixeaza culorile, fontul si aspectul galeriei. Textul biografiei, numarul si continutul fotografiilor, alegerea unei inregistrari audio sau video raman complet la latitudinea fiecarui elev — CSS-ul comun da unitate vizuala, nu uniformizeaza continutul artistic al nimanui.

1. Deschideti fotografia in GIMP (File → Open).
2. Reduceti dimensiunea: Image → Scale Image, setati latimea la 1200 pixeli (inaltimea se ajusteaza automat) si apasati Scale.
3. Exportati: File → Export As, alegeti numele fisierului cu extensia .jpg (ex. lucrare1.jpg), apasati Export.
4. In fereastra de calitate JPEG, alegeti o valoare de aproximativ 80 (echilibru bun intre claritate si dimensiune) si apasati Export din nou.

In editoare platite (ex. Adobe Photoshop) pasii sunt echivalenti: Image → Image Size pentru redimensionare, apoi File → Export As cu calitate JPEG controlata — acelasi rezultat, alta unealta.

Rolul de publicare aduna folderul final (index.html, style.css, elevi/, media/) si il publica gratuit, fara card bancar:
1. Intra pe app.netlify.com si creeaza cont (cu Google sau email).
2. Apasa "Add new site" → "Deploy manually".
3. Trage intregul folder expozitie-clasa-xii in zona de incarcare.
4. Dupa cateva zeci de secunde primesti un link de forma ceva-random.netlify.app — site-ul e deja live.
5. Din "Domain settings", schimba adresa intr-una cu sens, ex. expozitie-clasa-xii-a.netlify.app.

Structura construieste scheletul (index.html + folderele)
  ↓ in paralel cu
Design care scrie style.css comun
  ↓ in timp ce
Continut — fiecare elev — isi completeaza pagina, respectand conventia de denumire
  ↓ dupa reducerea fotografiilor in GIMP
Publicare verifica toate legaturile si urca site-ul complet pe Netlify

Ati mai construit un site individual la P1: Portofoliu personal — acolo fiecare elev avea propriul site. Aici, acelasi tip de pagina-elev devine o "scena" intr-un site comun, mai mare. In P3: Album absolventi veti relua aceeasi conventie de denumire si aceeasi logica de organizare, de data aceasta pentru un album-amintire al intregii promotii.

Un singur site, o singura pagina de start — nu site-uri separate.
Conventie de denumire: litere mici, fara diacritice, fara spatii, cratima intre cuvinte.
Patru roluri: structura, design, continut, publicare.
Cai relative corecte: ../ inseamna "un folder mai sus".
Fotografii reduse inainte de incarcare (GIMP: Scale Image + Export As, calitate ~80).
Testati toate legaturile local, inainte de publicare pe Netlify.