În lucru: lecțiile se refac de la capăt. Lecțiile noi ale clasei: lecțiile noi ale clasei a VII-a →
Invatare Atomica

Pagina principala

Progres lectie:
0%
🎯

Obiectivul lectiei

Cream index.html - prima pagina pe care o vad vizitatorii. Include Hero section si sectiunea "Despre mine".

Dupa aceasta lectie vei putea:

  • Sa explici ce este hero section
  • Sa utilizezi tag-urile semantice in structura paginii
  • Sa aplici 💡 sfaturi pentru continut

Incearca singur!

🎯 INCEARCA

Creeaza structura de baza!

Provocarea ta (10 minute):

1. Creeaza un folder nou pe desktop numit "site-personal"

2. Deschide Notepad sau Visual Studio Code

3. Scrie structura HTML de baza (DOCTYPE, html, head, body)

4. Salveaza fisierul ca "index.html" in folderul creat

5. Deschide fisierul in browser (dublu-click)

💡 Nu-ti amintesti structura HTML? Click aici

Structura de baza:

<!-- Asa incepe orice pagina HTML --> <!DOCTYPE html> <html lang="ro"> <head> <title>Titlul paginii</title> </head> <body> Continutul aici... </body> </html>
1

Ce este Hero Section?

Ce este Hero Section?
Hero section este prima sectiune mare pe care o vede vizitatorul - un titlu de impact, o descriere scurta si poate un buton. E ca si coperta unei carti - trebuie sa atraga atentia!
De ce conteaza? Ai doar 3 secunde sa captezi atentia cuiva. Hero section-ul face prima impresie!
2

Exemplu complet: index.html cu hero section

Exemplu complet: index.html
Tag-urile semantice dau structura clara paginii. Iata cum arata index.html cu hero section si sectiunea "Despre mine":

<header> - Antetul vizibil al paginii (titlu, logo, meniu), pus in <body>. Nu il confunda cu <head>, care contine informatii nevazute despre pagina (title, meta)
<main> - Continutul principal al paginii
<section> - O sectiune tematica
<footer> - Subsolul paginii (copyright, linkuri)

De ce le folosim? Ajuta browserele si motoarele de cautare (Google) sa inteleaga structura paginii tale!
index.html
<!DOCTYPE html> <html lang="ro"> <head> <meta charset="UTF-8"> <title>Site-ul meu personal</title> </head> <body> <!-- MENIU de navigare --> <nav> <a href="index.html">Acasa</a> | <a href="despre.html">Despre mine</a> | <a href="proiecte.html">Proiecte</a> | <a href="contact.html">Contact</a> </nav> <main> <!-- HERO SECTION - prima impresie! --> <section> <h1>Buna! Ma numesc [Numele tau]</h1> <p>Sunt elev in clasa a 7-a si imi place informatica.</p> <a href="despre.html">Afla mai multe despre mine &rarr;</a> </section> <!-- SECTIUNEA "Despre mine" - pe scurt --> <section> <h2>Despre mine</h2> <p>Hobby-urile mele: [scrie hobby-urile tale].</p> <p>Ce imi place la informatica: [scrie ce iti place].</p> </section> </main> <footer> <p>&copy; 2026 [Numele tau]</p> </footer> </body> </html>
3

💡 Sfaturi pentru continut

💡 Sfaturi pentru continut
  • Fii autentic - Scrie despre tine, nu copia
  • Tine-l scurt - Nimeni nu citeste texte lungi online
  • Foloseste paragrafe - Un bloc mare de text sperie cititorii
  • Evita informatii personale sensibile - Nu pune adresa, numarul de telefon, fotografia ta, adresa de email personala sau profiluri de retele sociale pe un site public

Exercitii practice

Exercitiul 1 (Nivel minim) - Proiect web: Pagina principala

Creeaza o pagina web pentru Pagina principala

Cerinte obligatorii:

⭐ Bonus (pentru nota maxima):

  • Adauga interactivitate JavaScript simpla
Vezi rezolvarea

Creezi index.html cu structura semantica din lectie: <header> cu <nav>, <main> cu doua <section> (hero + "Despre mine") si <footer>.

  1. In <head> pui <meta charset="UTF-8">, <title> si linkul catre CSS extern <link rel="stylesheet" href="css/style.css"> (fisierul style.css se construieste in detaliu in lectia 4).
  2. Pentru "design responsive de baza" adaugi <meta name="viewport" content="width=device-width, initial-scale=1.0"> in head (explicat pe larg in lectia 6) - fara el, pagina apare "stransa" pe telefon.
  3. In hero (primul <section>) pui <h1> cu pseudonimul tau si un <p> de prezentare, exact ca in exemplul din lectie.
  4. Bonus JS: JavaScript nu a fost predat in acest modul, deci e optional - un buton simplu cu onclick="alert('Bun venit!')" e suficient pentru bonus, fara sa fie cerinta obligatorie.

Exercitiul 2 (Nivel standard) - Construieste hero section

Pornind de la exemplul din atom-2, personalizeaza index.html cu datele tale:

  1. Inlocuieste [Numele tau] cu un pseudonim (nu numele real) si scrie o fraza de prezentare in hero section.
  2. Completeaza sectiunea "Despre mine" cu cel putin 2 hobby-uri si un lucru care iti place la informatica.
  3. Verifica in browser: se vede hero section-ul si sectiunea "Despre mine"?

Raspunde numerotat: 1. ... 2. ... 3. ...

Vezi rezolvarea
  1. Inlocuiesti [Numele tau] din titlu cu un pseudonim si pastrezi fraza de prezentare din exemplul lectiei: <h1>Buna! Ma numesc CodMaster7</h1>, <p>Sunt elev in clasa a 7-a si imi place informatica.</p> - raman in primul <section> din <main>, sectiunea hero.
  2. In al doilea <section> ("Despre mine") completezi cele doua paragrafe din exemplu cu date reale (nu numele tau adevarat): <p>Hobby-urile mele: fotbal si desen digital.</p> si <p>Ce imi place la informatica: sa creez site-uri si jocuri simple.</p> - minim 2 hobby-uri, cum cere cerinta.
  3. Deschizi index.html cu dublu-click in browser si verifici: se vede sus titlul mare din hero cu pseudonimul tau si fraza de prezentare, iar mai jos sectiunea "Despre mine" cu hobby-urile si raspunsul despre informatica.

Exercitiul 3 (Nivel performanta) - Compunere

Cerinta: Explica in scris cum ai construit pagina principala (index.html): ce tag-uri semantice ai folosit, cum ai structurat hero section-ul si ce informatii personale ai evitat sa pui (si de ce).

Indicii:

  • Numeste cel putin 3 tag-uri semantice si rolul fiecaruia
  • Descrie ce contine hero section-ul tau
  • Explica regulile de siguranta pentru date personale pe un site public

Cuvinte cheie de folosit: hero section, header, main, section, footer, semantic, index.html, date personale

Vezi rezolvarea

Nu iti dau compunerea gata scrisa - trebuie sa arati tu ce ai inteles. Schita de urmat:

  1. Tag-uri semantice (minim 3): alege dintre <header> (meniu/antet), <main> (continutul principal), <section> (hero si "Despre mine"), <footer> (subsol) - spune pe scurt rolul fiecaruia, cum a fost explicat in lectie.
  2. Structura hero section-ului: descrie ce ai pus tu in <h1> si <p> si de ce (ai 3 secunde sa captezi atentia vizitatorului).
  3. Date personale evitate: numeste explicit ce NU ai pus - nume real, fotografie reala, adresa, telefon, email personal, profiluri de retele sociale - si explica de ce (site public, vizibil oricui pe internet).

Se evalueaza: foloseste toate cuvintele cheie cerute, explici (nu doar enumeri) fiecare tag ales, si legi siguranta datelor de un motiv real, nu doar "asa scrie in lectie".

Ce ai invatat astazi

  • Ai invatat ce este hero section
  • Acum stii sa folosesti tag-urile semantice in structura paginii
  • Ai descoperit 💡 sfaturi pentru continut si reguli de siguranta online

Vrei mai mult?

Provocare: Deschide un site real (ex: site-ul scolii tale sau o pagina de stiri), apasa click-dreapta -> Inspecteaza (sau Ctrl+U pentru codul sursa). Cauta tagurile header, main, section si footer si numara de cate ori apare fiecare. Compara rezultatul cu propriul tau index.html.

De ce? De ce Google si cititoarele de ecran (folosite de persoane nevazatoare) "inteleg" mai bine o pagina construita cu section decat una facuta doar din div, desi in browser arata identic?

In lumea reala: Regulile de accesibilitate web (WCAG) cer taguri semantice tocmai ca un utilizator cu cititor de ecran sa poata sari direct la sectiunea dorita apasand o singura tasta, in loc sa asculte toata pagina de la inceput pana la capat.

Urmatoarea lectie

Continua cu lectia urmatoare pentru a aprofunda cunostintele.

Continua →