Invatare Atomica

Evaluare Modul 3: Grafice Excel + Bazele HTML

Progres lectie:
0%
🎯

Obiectivul lectiei

Este momentul sa iti demonstrezi cunostintele! In aceasta evaluare vei combina doua instrumente puternice: vizualizarea datelor cu grafice Excel si structurarea informatiei cu HTML.

Dupa aceasta lectie vei putea:

  • Sa explici tIPuri de grafice Excel si cand le folOSim
  • Sa analizezi elementele unui grafic bine formatat
  • Sa analizezi structura unei pagini HTML
  • Sa aplici cum se completeaza Excel si HTML

Incearca singur!

✍️ Provocarea Ta

Doua sarcini practice care iti testeaza cunostintele din intreg modulul

📊 Partea 1: Creeaza un Grafic Excel

Ai primit urmatoarele date despre notele medii ale clasei tale pe semestrul I. Trebuie sa creezi un grafic potrivit care sa prezinte aceste informatii vizual.

Date de intrare - Medii pe materii
A B
1 Materia Media clasei
2 Matematica 7.50
3 Romana 8.20
4 TIC 9.10
5 Engleza 8.75
6 Geografie 7.90
  1. Deschide Excel Online si introdu datele din tabelul de mai sus in celulele A1:B6
  2. Selecteaza toate datele (A1:B6) si insereaza un grafic de tip Coloana (Column Chart)
  3. Adauga un titlu graficului: "Medii pe materii - Semestrul I"
  4. Formateaza graficul: adauga etichete de date, alege culori distincte, adauga legenda
  5. Analizeaza: care materie are cea mai mare medie? Dar cea mai mica?
🔗 Excel Online 🔗 Google Sheets
🌐 Partea 2: Creeaza o Pagina HTML

Acum creeaza o pagina web simpla care prezinta analiza graficului tau. Pagina trebuie sa contina titlu, un paragraf cu concluzii si o lista cu observatii. 

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <title>Analiza Medii - Clasa a VIII-a</title>
</head>
<body>
    <h1>Analiza Mediilor pe Semestrul I</h1>

    <h2>Concluzii</h2>
    <p>Am analizat mediile clasei pe 5 materii.
       Cea mai mare medie este la TIC (9.10),
       iar cea mai mica la Matematica (7.50).</p>

    <h2>Observatii</h2>
    <ul>
        <li>TIC are cea mai mare medie: 9.10</li>
        <li>Matematica are cea mai mica medie: 7.50</li>
        <li>Media generala este de aproximativ 8.29</li>
        <li>3 din 5 materii au media peste 8.00</li>
    </ul>

    <h2>Tip grafic folosit</h2>
    <p>Am ales un <strong>grafic de tip coloana</strong>
       deoarece comparam valori pe categorii diferite.</p>
</body>
</html>
  1. Deschide OneCompiler HTML Editor (link mai jos) sau Notepad
  2. Copiaza codul de mai sus sau scrie-l de la zero
  3. Personalizeaza continutul: adauga propriile tale observatii
  4. Testeaza pagina in browser: deschide fisierul .html sau apasa "Run" in editor
🔗 OneCompiler HTML 🔗 CodePen
▶ 💡 Indiciu 1: Nu stiu ce tip de grafic sa aleg

Pentru a compara valori intre categorii diferite (materii), cele mai potrivite grafice sunt:

  • Grafic coloana - cel mai frecvent folosit pentru comparatii
  • Grafic bara - similar cu coloana, dar orizontal

NU folosi grafic cerc (pie chart) cand vrei sa compari valori absolute - acesta e bun doar pentru proportii din total.

▶ 💡 Indiciu 2: Tag-urile HTML de baza

Structura minima a unei pagini HTML:

  • <h1> pana la <h6> — titluri (de la cel mai mare la cel mai mic)
  • <p> — paragraf de text
  • <ul> + <li> — lista neordonata (cu buline)
  • <ol> + <li> — lista ordonata (cu numere)
  • <strong> — text bold
▶ 💡 Indiciu 3: Cum formatez graficul in Excel?

Dupa ce inserezi graficul:

  1. Click pe grafic → apare tab-ul "Chart Design"
  2. Click pe "Add Chart Element" → "Chart Title" → scrie titlul
  3. Click pe "Add Chart Element" → "Data Labels" → alege "Outside End"
  4. Click dreapta pe o coloana → "Format Data Series" → schimba culoarea
  5. Legenda apare automat; o poti muta cu drag and drop
⭐ Provocare Bonus

Adauga in pagina HTML un al doilea set de date: notele tale personale pe aceleasi materii. Creeaza un al doilea grafic in Excel care compara mediile clasei cu notele tale si descrie diferentele intr-un paragraf nou pe pagina web. Foloseste tag-ul <em> pentru a evidentia observatiile importante.

1

1. Tipuri de Grafice Excel si Cand le Folosim

1

Excel ofera mai multe tipuri de grafice, fiecare potrivit pentru un scop diferit. Alegerea gresita a tipului de grafic poate face datele confuze sau chiar inselatoare. Gandeste-te la grafic ca la o "traducere vizuala" a datelor — trebuie sa alegi "limba" potrivita.

🎪 Analogie din viata reala

Imagineaza-ti ca vrei sa povestesti cuiva despre vacanta ta. Daca arati o poza de grup, e ca un grafic de tip coloana — compari mai multe lucruri in paralel. Daca arati un traseu pe harta, e ca un grafic de tip linie — vezi evolutia in timp. Daca arati un diagrama a bugetului, e ca un grafic cerc — vezi cat din total a mers pe fiecare categorie. Fiecare "tip de poza" spune o poveste diferita!

Ghid de selectie a tipului de grafic
Tip Grafic Cand il Folosim Exemplu
📊 Coloana Comparare intre categorii Notele la diferite materii
📋 Bara Comparare orizontala (texte lungi) Populatia mai multor orase
📈 Linie Evolutie in timp Temperatura pe parcursul saptamanii
🍰 Cerc (Pie) Proportii din total (100%) Cum imi impart timpul liber

CSS Chart visualization

Exemplu: Grafic Coloana - Medii pe Materii
7.5
Mate
8.2
Romana
9.1
TIC
8.75
Engleza
7.9
Geo
⚠️
Greseala frecventa
Multi elevi folosesc grafic cerc (pie chart) pentru a compara notele. Aceasta este gresit! Graficul cerc arata proportii din 100%. Notele nu sunt parti ale unui tot. Foloseste grafic coloana sau bara pentru comparatii directe.
2

2. Elementele unui Grafic Bine Formatat

2

Un grafic fara formatare este ca un eseu fara titlu si fara paragrafe — tehnic exista, dar nimeni nu il intelege usor. Formatarea transforma datele brute intr-o poveste vizuala clara. Fiecare element (titlu, legenda, etichete) are un rol precis.

🎮 Analogie din gaming

Cand joci un joc, ai nevoie de HUD (heads-up display): bara de viata, scorul, mini-harta. Fara ele, nu intelegi ce se intampla. Un grafic este la fel: titlul = numele misiunii, legenda = explicatia culorilor, etichetele de date = scorul afisat pe ecran, axele = coordonatele pe harta.

Elementele esentiale ale unui grafic
Element Ce face Cum il adaugi
Titlu Spune despre ce este graficul Chart Design → Add Chart Element → Chart Title
Legenda Explica culorile/simbolurile Chart Design → Add Chart Element → Legend
Etichete date Afiseaza valorile exacte Chart Design → Add Chart Element → Data Labels
Titluri axe Numeste axa X si axa Y Chart Design → Add Chart Element → Axis Titles
Culori Diferentiaza categoriile Click dreapta pe serie → Format Data Series → Fill
💡
Sfat Pro
Un grafic bun trebuie sa fie inteles in 5 secunde. Daca cineva trebuie sa studieze graficul mai mult de 5 secunde ca sa inteleaga mesajul principal, inseamna ca ai nevoie de mai multa formatare sau de un tip de grafic diferit.
3

3. Structura unei Pagini HTML

3

HTML (HyperText Markup Language) este limbajul care structureaza continutul unei pagini web. Nu este un limbaj de programare — este un limbaj de marcare (markup). Fiecare element se scrie intre tag-uri: un tag de deschidere si unul de inchidere.

🏫 Analogie din scoala

Gandeste-te la HTML ca la un caiet organizat. Caietul intreg este <html>. Coperta cu numele tau si materia este <head> (informatii despre pagina, nu se vad in continut). Paginile cu lectii sunt <body> (ce vede cititorul). Titlurile lectiilor sunt <h1>, paragrafele de text sunt <p>, iar listele de idei sunt <ul>.

HTML Tree visualization

Structura unei pagini HTML - Arborele documentului
<!DOCTYPE html> -- Declara tipul documentului
<html lang="ro"> -- Radacina documentului
<head> -- Informatii META (invizibile)
<meta charset="UTF-8">
<title>Titlul Paginii</title>
</head>
<body> -- Continutul VIZIBIL
<h1>Titlu principal</h1>
<p>Un paragraf de text.</p>
<ul>
<li>Element lista</li>
</ul>
</body>
</html>
ℹ️
Important de retinut
Fiecare tag de deschidere trebuie sa aiba un tag de inchidere corespunzator: <p> se inchide cu </p>, <h1> se inchide cu </h1>. Exceptii: <meta>, <br>, <img> sunt tag-uri care se inchid singure (self-closing).

Tag reference table

Referinta rapida - Tag-uri HTML de baza
Tag Rol Exemplu
<h1>...<h6> Titluri (1=mare, 6=mic) <h1>Titlu</h1>
<p> Paragraf de text <p>Text aici.</p>
<strong> Text bold (important) <strong>Bold</strong>
<em> Text italic (accentuat) <em>Italic</em>
<ul> + <li> Lista neordonata (buline) <ul><li>Item</li></ul>
<ol> + <li> Lista ordonata (numere) <ol><li>Pas 1</li></ol>
<a href="..."> Link (hyperlink) <a href="url">Click</a>
<img src="..."> Imagine <img src="foto.jpg">
<br> Rand nou (line break) Text<br>Alt rand
4

4. Cum se Completeaza Excel si HTML

4

Excel si HTML nu sunt concurente — sunt partenere. Excel este expertul in procesarea si vizualizarea datelor. HTML este expertul in prezentarea si structurarea informatiei pe web. Impreuna, creezi un proiect complet: analizezi datele in Excel si le prezinti lumii prin HTML.

📱 Analogie din social media

Gandeste-te la un post de Instagram. Excel este ca editorul de fotografii (Lightroom, VSCO) — acolo procesezi si imbunatesti imaginea (datele). HTML este ca platforma Instagram in sine — acolo structurezi postarea (imagine + caption + hashtag-uri). Ai nevoie de ambele: o poza buna procesata SI un post bine structurat. La fel, ai nevoie de un grafic bun din Excel SI o pagina HTML bine structurata.

Step-by-step trace: Complete workflow

🛠️ Flux de lucru complet: De la date la pagina web
1
Colectezi datele — Aduni informatiile (note, temperaturi, voturi) si le introduci in Excel
2
Organizezi in tabel — Pui datele intr-un tabel cu antet clar (coloana A = categorii, coloana B = valori)
3
Creezi graficul — Selectezi datele, inserezi graficul potrivit, il formatezi (titlu, legenda, etichete)
4
Analizezi rezultatul — Ce tendinte vezi? Care valori sunt mai mari/mici? Ce concluzii tragi?
5
Creezi pagina HTML — Scrii structura: <html>, <head>, <body>
6
Adaugi continut — Titluri (<h1>), paragrafe cu analiza (<p>), lista cu observatii (<ul>)
7
Publici rezultatul — Salvezi fisierul .html si il deschizi in browser. Proiectul complet!

Complete working example

💡
Exemplu complet de pagina HTML cu analiza datelor
Mai jos ai un exemplu functional de pagina web care prezinta o analiza completa. Observa cum fiecare tag are un rol specific si cum informatia este structurata logic. 
<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <title>Raport Medii Scolare</title>
</head>
<body>
    <h1>Raport: Mediile Clasei a VIII-a B</h1>

    <h2>Despre acest raport</h2>
    <p>Acest raport prezinta mediile clasei noastre
       pe <strong>5 materii</strong> in semestrul I.
       Datele au fost analizate folosind
       <em>Microsoft Excel</em>.</p>

    <h2>Rezultate cheie</h2>
    <ul>
        <li>TIC are cea mai mare medie:
            <strong>9.10</strong></li>
        <li>Matematica are cea mai mica:
            <strong>7.50</strong></li>
        <li>Media generala: 8.29</li>
    </ul>

    <h2>Recomandari</h2>
    <ol>
        <li>Atentie sporita la Matematica</li>
        <li>Mentinerea nivelului la TIC</li>
        <li>Obiectiv semestrul II: media 8.50+</li>
    </ol>

    <p>Graficul a fost creat in Excel si
       exportat ca imagine.</p>
    <!-- Aici ai putea adauga imaginea graficului -->
    <!-- <img src="grafic_medii.png" alt="Grafic medii"> -->
</body>
</html>
⛔
Greseli frecvente la HTML
1. Uiti sa inchizi un tag: <p>Text fara </p>
2. Inversezi ordinea inchiderii: <p><strong>Text</p></strong> (gresit!) — corect: <p><strong>Text</strong></p>
3. Uiti <!DOCTYPE html> la inceput
4. Pui continut vizibil in <head> in loc de <body>

Exercitii practice

Exercitiul 1 (Nivel minim) - Recapitulare grafice si web

Cerinta: Demonstreaza ce ai invatat in Modulul 3:

  1. Numeste 3 tipuri de grafice pe care le-ai invatat (de exemplu: grafic cu bare, grafic circular, etc.). Pentru fiecare, da un exemplu de situatie in care l-ai folosi.
  2. Scrie structura de baza a unei pagini HTML: ce tag-uri sunt obligatorii si ce rol are fiecare? (html, head, title, body)
  3. Care este diferenta dintre un fisier Excel (.xlsx) si o pagina web (.html)? Numeste 2 asemanari si 3 diferente.

Exercitiul 2 (Nivel standard) - Aplicare practica

Cerinta: Rezolva urmatoarele probleme practice:

  1. Ai urmatoarele date: temperatura medie lunara (Ian=0, Feb=2, Mar=8, Apr=15, Mai=20, Iun=25). Alege tipul de grafic potrivit, justifica alegerea si descrie cum l-ai crea in Excel.
  2. Scrie codul HTML complet pentru o pagina simpla care contine: un titlu h1, un paragraf, o lista cu 3 elemente si un link catre google.com. Verifica sa fie corect.
  3. Un coleg a creat un grafic circular pentru a arata evolutia temperaturii pe 12 luni. Este o alegere buna? Argumenteaza de ce da sau de ce nu, si propune alternativa potrivita.

Exercitiul 3 (Nivel performanta) - Proiect integrat

Cerinta: Creeaza un proiect care combina graficele cu paginile web:

  1. Colecteaza date reale (de exemplu: numarul de elevi din fiecare clasa a scolii). Creeaza 2 tipuri de grafice diferite in Excel. Exporta-le ca imagini si explica ce informatii transmite fiecare grafic.
  2. Creeaza o pagina HTML care prezinta rezultatele: include un titlu, paragraf explicativ, cele 2 imagini cu grafice si o lista cu concluzii. Scrie codul complet.
  3. Scrie o analiza de 10-15 randuri in care compari avantajele prezentarii datelor in tabel vs grafic vs pagina web. In ce situatii profesionale s-ar folosi fiecare metoda?

Ce ai invatat astazi

  • Tipuri de Grafice Excel si Cand le Folosim
  • Elementele unui Grafic Bine Formatat
  • Structura unei Pagini HTML
  • Cum se Completeaza Excel si HTML

Urmatoarea lectie

Continua cu lectia urmatoare pentru a aprofunda cunostintele.

Continua →