🏠

Pagina principala

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

🎯 INCEARCA

Creeaza structura de baza!

Provocarea ta (10 minute):

1. Creaza 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>

📚 INVATA

Construim pagina principala pas cu pas

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!

💻 Codul complet pentru index.html

index.html

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Site-ul meu personal</title>
</head>
<body>
    <!-- HERO SECTION -->
    <header>
        <h1>Bun venit pe site-ul meu!</h1>
        <p>Salut! Sunt [Numele tau] si aceasta este pagina mea personala.</p>
    </header>

    <!-- DESPRE MINE -->
    <main>
        <section>
            <h2>Despre mine</h2>
            <p>Sunt elev in clasa a 7-a si imi place foarte mult informatica.</p>
            <p>Hobby-urile mele sunt: [hobby 1], [hobby 2], [hobby 3].</p>
        </section>
    </main>

    <!-- FOOTER -->
    <footer>
        <p>&copy; 2026 [Numele tau]. Toate drepturile rezervate.</p>
    </footer>
</body>
</html>

Explicatia tag-urilor semantice

<header> - Antetul paginii (titlu, logo, meniu)

<main> - Continutul principal al paginii

<section> - O sectiune tematica

<footer> - Subsolul paginii (copyright, linkuri)

De ce le folosim? Ajuta browsere si motoarele de cautare (Google) sa inteleaga structura paginii tale!

👀 Cum va arata in browser

Bun venit pe site-ul meu!

Salut! Sunt Andrei si aceasta este pagina mea personala.

Despre mine

Sunt elev in clasa a 7-a si imi place foarte mult informatica.

Hobby-urile mele sunt: gaming, programare, fotbal.

💡 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 sau numarul de telefon

📋 Pasi de urmat

Copiaza codul de mai sus
Sau scrie-l manual pentru a invata mai bine
Inlocuieste textul generic
Pune numele tau, hobby-urile tale reale
Salveaza ca index.html
Important: extensia trebuie sa fie .html, nu .txt
Testeaza in browser
Dublu-click pe fisier sau trage-l in browser

✅ VERIFICA

Hai sa vedem ce ai retinut!

1. Ce este "Hero section"?

Sectiunea cu supereroi

Prima sectiune mare care capteaza atentia vizitatorului

Footer-ul paginii

2. Ce tag folosim pentru continutul principal al paginii?

<div>

<main>

<body>

3. De ce folosim tag-uri semantice precum <header>, <main>, <footer>?

Doar pentru ca arata mai bine in cod

Ajuta browserele si Google sa inteleaga structura paginii

Nu exista niciun motiv special

4. Ce extensie trebuie sa aiba fisierul paginii web?

.txt

.doc

.html

🎉

Fantastic!

Ai terminat Lectia 2: Pagina principala

+75 XP

Prima ta pagina web este gata! Acum hai sa adaugam mai multe pagini.

Continua la Lectia 3 →