Proiect de Sinteza: Site Multi-Pagini

1

Planul si structura proiectului

Inainte sa scriem prima linie de cod, planificam ce vom construi. Un site simplu cu doua pagini are nevoie de:

O pagina de start (index.html) — prezentare generala, cu un titlu mare si un paragraf de introducere
O pagina secundara (despre.html sau contact.html) — informatii suplimentare
Un fisier CSS extern (stil.css) — stilizeaza ambele pagini din acelasi loc

Structura fisierelor pe calculator arata asa:

site-meu/
  |-- index.html       <-- pagina principala (OBLIGATORIU: nume exact "index.html")
  |-- despre.html      <-- a doua pagina
  |-- stil.css         <-- stiluri comune pentru ambele pagini
  |-- imagini/
        |-- logo.png   <-- optional: imaginile site-ului

De ce index.html? Serverele web cauta automat fisierul cu acest nume exact cand cineva acceseaza adresa site-ului. Daca numesti pagina altfel (de exemplu "acasa.html"), serverul nu o va gasi automat.

De ce CSS extern? Daca scriem stiluri intr-un fisier separat (stil.css) si il referentiem din ambele pagini HTML, orice modificare de culoare sau font se aplica simultan pe tot site-ul — nu trebuie sa modificam fiecare pagina in parte. Acesta este principiul DRY (Don't Repeat Yourself — Nu te repeta).

Pentru aceasta lectie vom construi un site simplu cu tema libera: poate fi o prezentare a orasului tau, a unui sport preferat, a unui animal, sau a oricarui subiect te intereseaza. Conteaza structura si tehnica, nu subiectul.

Care este primul pas in construirea unui site multi-pagini?

A Sa creezi folderul proiectului si fisierul index.html

B Sa publici site-ul pe internet

C Sa scrii codul CSS

2

Construim pagina principala (index.html)

Creeaza un fisier nou numit index.html si scrie urmatorul cod de baza. Acesta integreaza tot ce ai invatat in Lectiile 1-4:

<!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 - Acasa</title>
  <link rel="stylesheet" href="stil.css">
</head>
<body>

  <header>
    <h1>Bine ai venit pe site-ul meu!</h1>
    <nav>
      <a href="index.html">Acasa</a>
      <a href="despre.html">Despre</a>
    </nav>
  </header>

  <main>
    <h2>Prezentare</h2>
    <p>Acesta este site-ul meu personal. Aici vei gasi informatii despre mine si interesele mele.</p>

    <h2>Interese</h2>
    <ul>
      <li>Informatica</li>
      <li>Sport</li>
      <li>Muzica</li>
    </ul>
  </main>

  <footer>
    <p>&copy; 2026 Site-ul Meu</p>
  </footer>

</body>
</html>

Observa structura semantica:

<header> — antetul paginii cu titlul si meniul de navigare
<nav> — zona de navigare cu link-uri catre celelalte pagini
<main> — continutul principal al paginii
<footer> — subsolul cu informatii de copyright

Tag-urile semantice (header, nav, main, footer) au doua avantaje importante: (1) fac codul mai usor de inteles pentru orice programator care il citeste, si (2) ajuta motoarele de cautare (Google) sa inteleaga structura site-ului. In Lectia 1 ai invatat structura de baza — acum o aplicam intr-un context real.

Salveaza fisierul si deschide-l in browser. Ar trebui sa vezi un titlu, un meniu cu doua link-uri (Acasa si Despre) si continutul de sub el — fara stiluri deocamdata, dar functional.

Cum legam un fisier CSS extern la o pagina HTML?

A Scriem CSS direct in tag-ul <body>

B Folosim <link rel="stylesheet" href="stil.css"> in sectiunea <head>

C Apasam butonul CSS din browser

3

Construim a doua pagina (despre.html)

Creeaza un al doilea fisier, despre.html, in acelasi folder ca index.html. Acesta trebuie sa aiba aceeasi structura si sa refere acelasi fisier CSS:

<!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 - Despre</title>
  <link rel="stylesheet" href="stil.css">
</head>
<body>

  <header>
    <h1>Bine ai venit pe site-ul meu!</h1>
    <nav>
      <a href="index.html">Acasa</a>
      <a href="despre.html">Despre</a>
    </nav>
  </header>

  <main>
    <h2>Despre Mine</h2>
    <p>Sunt elev in clasa a VIII-a. Imi place informatica si am invatat sa construiesc pagini web!</p>

    <h2>Ce am invatat</h2>
    <ol>
      <li>Structura HTML (DOCTYPE, head, body)</li>
      <li>Texte, titluri si liste</li>
      <li>Imagini si link-uri</li>
      <li>Stilizare cu CSS</li>
      <li>Layout cu Flexbox</li>
    </ol>

    <a href="index.html">Inapoi la pagina principala</a>
  </main>

  <footer>
    <p>&copy; 2026 Site-ul Meu</p>
  </footer>

</body>
</html>

Observa ca:

Link-urile din <nav> folosesc cai relative (fara https://). Scriem href="index.html", nu href="https://...". Caile relative functioneaza atat local (pe calculatorul tau) cat si pe server, pentru ca ele sunt interpretate relativ la locul fisierului curent.
Ambele pagini includ acelasi meniu de navigare. Aceasta este practica standard: vizitatorul poate naviga intre pagini de oriunde se afla pe site.
Ambele pagini refera acelasi fisier CSS (href="stil.css"). Orice schimbare in stil.css va afecta ambele pagini simultan.

Testeaza navigarea: deschide index.html in browser, apasa "Despre" — ar trebui sa se deschida despre.html. Apasa "Acasa" — te intoarce la index.html. Navigarea functioneaza complet local, fara internet!

Cum facem link intre doua pagini ale aceluiasi site?

A Nu se pot lega paginile unui site

B Scriem adresa completa https://...

C Folosim href cu calea relativa: href="despre.html"

4

Adaugam stilizarea CSS (stil.css)

Creeaza fisierul stil.css in acelasi folder. Acesta va stiliza ambele pagini HTML. Scrie urmatorul cod CSS care integreaza conceptele din Lectiile 4 si 5:

/* === RESET DE BAZA === */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* === BODY - fundal si font === */
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333333;
  line-height: 1.6;
}

/* === HEADER === */
header {
  background-color: #2c3e50;
  color: white;
  padding: 1rem 2rem;
}

header h1 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

/* === NAVIGARE (Flexbox) === */
nav {
  display: flex;
  gap: 1rem;
}

nav a {
  color: #ecf0f1;
  text-decoration: none;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
}

nav a:hover {
  background-color: #3498db;
}

/* === CONTINUT PRINCIPAL === */
main {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
}

main h2 {
  color: #2c3e50;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

main p {
  margin-bottom: 1rem;
}

main ul, main ol {
  margin-left: 2rem;
  margin-bottom: 1rem;
}

main li {
  margin-bottom: 0.3rem;
}

/* === LINK-URI IN CONTINUT === */
main a {
  color: #3498db;
}

main a:hover {
  text-decoration: underline;
}

/* === FOOTER === */
footer {
  background-color: #2c3e50;
  color: #bdc3c7;
  text-align: center;
  padding: 1rem;
  margin-top: 3rem;
}

Acest CSS integreaza cunostintele din Lectiile 4 si 5:

Lectia 4 (CSS intro): selectori, culori de fundal si text, fonturi, margini, border-radius
Lectia 5 (Layout): box-sizing: border-box, display: flex, gap, max-width, margin: auto pentru centrare
Lectia 3 (Linkuri): stilizarea link-urilor cu color si :hover

Salveaza fisierul si reincarca index.html in browser. Acum ar trebui sa vezi: un header inchis la culoare cu titlul in alb, un meniu de navigare orizontal, continut centrat cu margini corespunzatoare si un footer in partea de jos.

Ce proprietate CSS face ca elementele <nav> sa fie aranjate pe un rand orizontal?

A display: flex

B color: blue

C margin: auto

5

Verificarea finala inainte de publicare

Inainte sa consideri site-ul gata, parcurge aceasta lista de verificare. Fiecare punct corespunde unui criteriu din rubrica de evaluare a programei (structura, continut, navigare, aspect):

STRUCTURA:
[ ] Folderul proiectului contine: index.html, despre.html, stil.css
[ ] Pagina principala se numeste exact "index.html"
[ ] Ambele pagini HTML au DOCTYPE, <head> cu charset si <title>, si <body>
[ ] Fisierul CSS este extern (nu inline) si e referenciat din ambele pagini

CONTINUT (Lectiile 2 si 3):
[ ] Fiecare pagina are cel putin un titlu h1 sau h2 si un paragraf <p>
[ ] Exista cel putin o lista (ul sau ol) pe una din pagini
[ ] Alt text (atribut alt) la imagini, daca ai adaugat imagini

NAVIGARE (Lectia 3):
[ ] Link-ul "Despre" din index.html deschide corect despre.html
[ ] Link-ul "Acasa" din despre.html se intoarce corect la index.html
[ ] Link-urile folosesc cai relative (fara https://)

ASPECT (Lectiile 4 si 5):
[ ] CSS-ul se aplica pe ambele pagini (culorile si fontul se vad)
[ ] Header-ul si footer-ul arata identic pe ambele pagini
[ ] Meniul de navigare este orizontal (display: flex functioneaza)
[ ] Textul este lizibil (contrast suficient intre text si fundal)

Daca toate punctele sunt bifate, site-ul tau este complet si gata de publicare. In Lectia 6 vei invata exact cum sa il pui pe internet, astfel incat oricine din lume sa il poata vedea.

Sfat profesionist: testeaza site-ul si in modul mobil. Apasa F12 in browser, apoi iconita de telefon din bara de sus a Developer Tools, si verifica ca textul este lizibil si meniul functioneaza pe un ecran mic.

Ce verifici INAINTE de a considera site-ul gata?

A Ca fisierul CSS are exact 100 linii

B Ca site-ul este publicat pe internet

C Ca toate paginile se deschid, link-urile functioneaza si aspectul este corect

Proiect de Sinteza: Site Multi-Pagini

Obiectivul lectiei

Dupa aceasta lectie vei putea:

Planul si structura proiectului

Construim pagina principala (index.html)

Construim a doua pagina (despre.html)

Adaugam stilizarea CSS (stil.css)

Verificarea finala inainte de publicare

Exercitii practice

Exercitiul 1 (Nivel minim) - Proiect ghidat

Exercitiul 2 (Nivel standard) - Site extins

Exercitiul 3 (Nivel performanta) - Compunere

Ce ai realizat astazi

Urmatoarea lectie