KULTUROSFERA

Site din trei pagini legate, în VS Code

Lecția-suport: Recapitulare și evaluare

Până acum ai văzut pagini web făcute de alții. Azi construiești un site întreg: trei pagini care se leagă între ele printr-un meniu, exact ca site-urile reale. La finalul laboratorului vei avea pe calculatorul tău un dosar de proiect cu index.html, două pagini secundare și un fișier CSS comun — un site pe care poți da clic dintr-o pagină în alta.

Ce îți trebuie

  • Visual Studio Code, instalat de pe code.visualstudio.com. Dacă e deja pe calculatoarele din laborator, sari peste instalare.
  • Un browser (orice: Chrome, Edge, Firefox).
  • Nu ai nevoie de cont nicăieri. Totul se întâmplă pe calculatorul tău.
  • Timp: 45 de minute — 10 pentru structură, 25 pentru pagini, 10 pentru misiune.

Șantierul: dosarul proiectului

Un site nu e un fișier, e un dosar organizat. Site-urile dezordonate se strică exact când legi paginile între ele, așa că începem cu ordinea.

  1. Creează pe Desktop (sau în dosarul clasei) un dosar numit site-ul-meu. Fără spații și fără diacritice în nume — browserele și linkurile nu le iubesc.
  2. Deschide VS Code → File → Open Folder → alege site-ul-meu.
  3. În panoul din stânga (Explorer), creează cu butonul New File trei fișiere: index.html, despre.html, hobby.html.
  4. Tot din Explorer, creează un dosar css (butonul New Folder), iar în el fișierul style.css.

Structura finală arată așa:

site-ul-meu/
├── index.html
├── despre.html
├── hobby.html
└── css/
    └── style.css

Prima pagină și meniul

  1. Deschide index.html și scrie schema de bază. Truc de VS Code: tastează ! și apasă Tab — schema apare singură. Completeaz-o așa:
<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <title>Acasă — Site-ul meu</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <nav>
        <a href="index.html">Acasă</a>
        <a href="despre.html">Despre mine</a>
        <a href="hobby.html">Hobby</a>
    </nav>
    <h1>Bun venit pe site-ul meu</h1>
    <p>Acesta este primul meu site cu mai multe pagini.</p>
</body>
</html>

Observă două lucruri: linkul către CSS conține și dosarul (css/style.css), iar meniul nav folosește doar numele fișierelor — pentru că toate trei paginile stau în același dosar.

  1. Deschide css/style.css și dă-i site-ului un aer comun:
body {
    font-family: Arial, sans-serif;
    background: #f5f5f5;
    margin: 0;
    padding: 24px;
}

nav {
    background: #1f2937;
    padding: 12px;
}

nav a {
    color: white;
    text-decoration: none;
    margin-right: 16px;
}

h1 {
    color: #1f2937;
}
  1. Rulează pagina: clic dreapta pe index.html în Explorer → Reveal in File Explorer (pe Mac: Reveal in Finder) → dublu-clic pe fișier. Se deschide în browser. Dacă ai extensia Live Server, e și mai simplu: clic dreapta → Open with Live Server.

Leagă toate cele trei pagini

  1. Copiază tot conținutul din index.html în despre.html și în hobby.html. Da, cu copy-paste — meniul trebuie să fie identic pe toate paginile, altfel vizitatorul rămâne blocat.
  2. În despre.html, schimbă doar title (în „Despre mine — Site-ul meu"), h1 și paragraful: scrie 2-3 propoziții despre tine.
  3. În hobby.html, la fel: titlu propriu și un conținut despre un hobby al tău. Adaugă și o listă:
<h2>Ce îmi place</h2>
<ul>
    <li>primul lucru</li>
    <li>al doilea lucru</li>
    <li>al treilea lucru</li>
</ul>
  1. Salvează tot (Ctrl + K, S sau salvezi fiecare fișier cu Ctrl + S) și testează în browser: pornește din index.html și fă turul complet — Acasă → Despre → Hobby → Acasă.

Dacă nu merge

  • Clic pe link și primești „File not found". Numele din href nu e identic cu numele fișierului. Despre.html și despre.html sunt fișiere diferite pe unele sisteme — folosește peste tot litere mici.
  • CSS-ul merge pe index, dar nu pe celelalte pagini. Ai uitat linia link în head la paginile copiate, sau ai copiat pagina înainte să adaugi linia. Deschide fiecare fișier și verifică.
  • Diacriticele apar ca semne ciudate (â€ș). Lipsește meta charset="UTF-8" din head, sau fișierul a fost salvat cu altă codificare. Adaugă linia și salvează din nou.
  • Ai modificat fișierul, dar browserul arată varianta veche. Nu ai salvat (punctul alb de pe tab-ul din VS Code te dă de gol) sau nu ai dat refresh (F5) în browser.
  • Pagina se deschide în VS Code, nu în browser. Dublu-clicul din Explorer-ul VS Code deschide fișierul pentru editare. Ca să-l vezi ca pagină, deschide-l din Windows Explorer/Finder sau cu Live Server.

Misiunea ta

Nivel de bază: site-ul cu trei pagini funcționează complet — meniu identic pe toate, conținut propriu pe fiecare, un singur style.css pentru tot.

Extindere: adaugă în css/style.css o regulă care schimbă culoarea linkului la trecerea mouse-ului: nav a:hover cu altă culoare de text. O singură regulă, efect pe tot site-ul — asta e puterea CSS-ului comun.

Provocare: adaugă o a patra pagină, galerie.html, cu cel puțin două imagini. Pune imaginile într-un dosar nou img din proiect și leagă pagina în meniul tuturor paginilor. Câte fișiere a trebuit să modifici ca să apară noul link peste tot? Reține răspunsul — e exact motivul pentru care există instrumente mai avansate, despre care vorbim la anul.

Ai terminat când:

  • structura de dosare respectă schema din laborator (HTML la rădăcină, CSS în css/);
  • din orice pagină ajungi în oricare alta din meniu;
  • toate paginile arată la fel ca stil, deși fiecare are conținut diferit;
  • ai schimbat o culoare în style.css și schimbarea s-a văzut pe toate paginile după refresh.