🔗

Pagini multiple si navigare

Un site adevarat are mai multe pagini conectate printr-un meniu de navigare. Hai sa le cream!

🎯 INCEARCA

Creeaza a doua pagina!

Provocarea ta (10 minute):

1. In folderul "site-personal", creeaza un fisier nou: "despre.html"

2. Copiaza structura de baza din index.html

3. Schimba titlul si continutul

4. In index.html, adauga un link catre despre.html

5. Testeaza: poti naviga intre cele 2 pagini?

💡 Nu stii cum se face un link? Click aici

Un link in HTML se face cu tag-ul <a>:

<a href="despre.html">Despre mine</a>

href = adresa paginii destinatie

📚 INVATA

Cream un site cu mai multe pagini

Structura folderului site-ului

Toate fisierele site-ului trebuie sa fie in acelasi folder pentru a functiona corect link-urile.

📁 site-personal/

📄 index.html (pagina principala)

📄 despre.html (despre mine)

📄 proiecte.html (portofoliu)

📄 contact.html (contact)

🔗 Cum functioneaza link-urile

Toate paginile se leaga una de alta:

↔ ↔ ↔

Meniul de navigare apare pe TOATE paginile!

💻 Meniul de navigare (nav)

Meniu simplu

<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>

Asa va arata in browser:

Acasa Despre mine Proiecte Contact

Exemplu complet: despre.html

Iata cum arata o pagina completa cu meniu de navigare:

despre.html

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <title>Despre mine</title>
</head>
<body>
    <!-- MENIU - la fel pe toate paginile! -->
    <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>
        <h1>Despre mine</h1>

        <h2>Cine sunt?</h2>
        <p>Ma numesc [Numele tau] si sunt elev in clasa a 7-a.</p>

        <h2>Hobby-urile mele</h2>
        <ul>
            <li>Programare</li>
            <li>Jocuri video</li>
            <li>Citit</li>
        </ul>

        <h2>Ce imi place la informatica?</h2>
        <p>Imi place sa creez lucruri noi si sa rezolv probleme.</p>
    </main>

    <footer>
        <p>&copy; 2026 [Numele tau]</p>
    </footer>
</body>
</html>

💡 Sfaturi importante

Meniul identic - Copiaza exact acelasi meniu pe toate paginile
Numele fisierelor - Foloseste litere mici, fara spatii (ex: despre.html, nu Despre Mine.html)
Verifica link-urile - Testeaza fiecare link sa te asiguri ca functioneaza
Inapoi la Acasa - Mereu include link catre index.html

✅ Checklist pentru aceasta lectie

☐ Am creat despre.html
☐ Am creat proiecte.html
☐ Am creat contact.html
☐ Am adaugat meniul de navigare pe toate paginile
☐ Toate link-urile functioneaza

✅ VERIFICA

Hai sa vedem ce ai retinut!

1. Ce tag folosim pentru a crea un link?

<link>

<a>

<href>

2. Ce atribut specifica adresa paginii destinatie?

src

link

href

3. Ce tag folosim pentru meniul de navigare?

<menu>

<nav>

4. Unde trebuie sa apara meniul de navigare?

Doar pe pagina principala

Pe toate paginile site-ului

Doar pe pagina de contact

🎉

Bravo!

Ai terminat Lectia 3: Pagini multiple si navigare

+75 XP

Site-ul tau are acum mai multe pagini conectate! Acum hai sa-l facem frumos cu CSS.

Continua la Lectia 4 →