Invatare Atomica

Ierarhia paginilor si sistemul de legaturi

Cum tii impreuna un sit de mai multe pagini: pagina de start, caile relative si absolute, meniul de navigare si legaturile spre o sectiune anume dintr-o pagina

Progres lectie:
0%
🎯

Obiectivul lectiei

Un sit web nu este o pagina singura, ci mai multe pagini legate intre ele. Vei invata cum se organizeaza aceste pagini intr-o ierarhie cu o pagina de start, ce inseamna o cale relativa fata de o cale absoluta intr-un link, cum se construieste un meniu de navigare identic pe toate paginile si cum trimiti vizitatorul direct la o sectiune dintr-o pagina, folosind ancore. Este exact ce se cere la proba de evaluare a competentelor digitale de la bacalaureat, cand trebuie sa realizezi un sit simplu cu mai multe pagini corect legate intre ele.

Dupa aceasta lectie vei putea:

  • Sa explici ce este pagina de start (index.html) si de ce ocupa un loc special in ierarhia sitului
  • Sa desenezi harta unui sit de 5 pagini si scheletul de fisiere si foldere corespunzator, pe disc
  • Sa scrii corect o cale relativa (in acelasi folder, intr-un subfolder, in folderul parinte)
  • Sa deosebesti o cale relativa de o cale absoluta si sa alegi corect intre ele
  • Sa construiesti un meniu de navigare identic, cu <nav> si <a>, pe toate paginile unui sit
  • Sa creezi o legatura interna cu ancora, catre o sectiune din pagina curenta sau dintr-o alta pagina
  • Sa recunosti si sa repari un link rupt aparut dupa publicarea sitului pe server

Incearca singur!

Provocare — inainte sa citesti:

Ai construit un sit de prezentare pentru un mic atelier de tamplarie, cu 5 pagini: pagina principala, despre atelier, produse, galerie foto si contact. Toate fisierele HTML stau la un loc, pe calculatorul tau, intr-un singur folder. In pagina de produse ai scris un link catre galeria foto asa: <a href="C:\Users\Ion\Desktop\atelier\galerie.html">Galerie</a>. Functioneaza perfect cand deschizi pagina direct de pe calculator. Ce crezi ca se va intampla cu acel link dupa ce incarci situl pe un server de gazduire web, la o adresa de tipul www.atelierultau.ro? Scrie mai jos ce crezi ca se intampla si de ce.

💡 Ai nevoie de un indiciu?

Un traseu de genul C:\Users\Ion\Desktop\... exista doar pe calculatorul tau, cu discul C: si folderul Desktop al utilizatorului Ion. Pe server nu exista niciun disc C: si niciun folder Desktop — situl e mutat cu totul in alt loc. Un link scris asa functioneaza doar local si se rupe garantat dupa publicare.

Lectia de azi arata exact cum se scrie un link care functioneaza si pe calculatorul tau, si dupa publicare, indiferent unde ajunge situl.

1

Pagina de start — radacina ierarhiei unui sit

Un sit web cu mai multe pagini are o ierarhie: o pagina ocupa locul central, numita pagina de start (in engleza home page), iar celelalte pagini sunt legate de ea si intre ele prin linkuri. Pagina de start este cea care se deschide implicit cand cineva scrie doar adresa sitului, fara nume de fisier — de aceea se numeste, prin conventie, index.html. Aproape orice server de gazduire web cauta automat un fisier cu acest nume in folderul principal al sitului.
Harta unui sit de 5 pagini — atelier de tamplarie:

index.html (Acasa) — pagina de start, radacina ierarhiei
  ├── despre.html — Despre atelier
  ├── produse.html — Produse (mobilier din lemn masiv)
  ├── galerie.html — Galerie foto cu lucrari
  └── contact.html — Date de contact si formular

Cele 4 pagini "atarna" de pagina de start prin linkurile din meniul de navigare, si sunt legate si intre ele — de exemplu, din pagina de produse poti ajunge direct la galerie, fara sa treci obligatoriu prin pagina de start.

Atentie — harta de mai sus e LOGICA, nu structura de pe disc:

Desenul cu ├── si └── arata doar cine leaga catre cine (o harta a legaturilor, ca un plan de metrou), nu unde stau fisierele pe calculator. Pe disc, toate cele 5 fisiere HTML stau, de fapt, plat, la acelasi nivel, in acelasi folder — vezi scheletul real de fisiere si foldere in atomul urmator.

De ce nu "acasa.html" sau "principal.html"?

Poti tehnic sa numesti pagina de start oricum, dar atunci vizitatorul trebuie sa scrie numele complet in bara de adrese (ex. www.atelierultau.ro/acasa.html) ca sa ajunga la ea. Cu numele index.html, adresa scurta www.atelierultau.ro functioneaza singura, fara nimic dupa — asta e conventia pe care o respecta aproape toate serverele.

2

Scheletul de fisiere si foldere pe disc

Inainte sa scrii linkurile intre pagini, trebuie sa stabilesti unde stau fisierele pe disc — asta se numeste scheletul de fisiere si foldere al sitului. Practica obisnuita: toate paginile HTML stau la acelasi nivel, in folderul principal (radacina) al sitului, iar resursele (imagini, stiluri CSS, eventual script-uri) stau fiecare in subfolderul lor, cu nume descriptiv.
Scheletul sitului "atelier-lemn" pe disc:

atelier-lemn/
  index.html
  despre.html
  produse.html
  galerie.html
  contact.html
  css/
    stil.css
  imagini/
    logo.png
    produs-masa.jpg
    produs-scaun.jpg

Ce castigi din aceasta organizare:

Un link intre doua pagini care stau la acelasi nivel devine foarte scurt: doar numele fisierului tinta (ex. href="produse.html"). Iar cand vrei sa gasesti toate fotografiile sitului, stii dintr-o privire ca sunt in imagini/, nu risipite printre fisierele HTML.

Doua harti diferite ale aceluiasi sit — nu le incurca:

Harta cu ├── din atomul anterior arata legaturile logice dintre pagini (cine trimite spre cine, in meniu). Scheletul de mai sus arata locul fizic, real, al fisierelor pe disc — si acolo, toate cele 5 fisiere HTML stau plat, unul langa altul, in acelasi folder.

3

Cai relative fata de cai absolute

Orice link (<a href="...">) sau referinta la o resursa (<img src="...">) foloseste o cale — adresa fisierului tinta. Exista doua feluri de cai:
Cale absoluta — adresa completa, cu tot cu protocol (http:// sau https://) si numele domeniului. Functioneaza de oriunde, dar e lunga si depinde de adresa exacta a sitului.
Cale relativa — adresa data fata de pozitia fisierului curent, fara protocol si fara domeniu. E scurta si functioneaza la fel de bine indiferent unde ajunge situl (pe calculatorul tau, pe orice server de gazduire, sub orice nume de domeniu).
Trei situatii de cale relativa, cu exemple reale de cod:

Fisier in acelasi folder (din index.html catre produse.html, aflate amandoua in radacina):
<a href="produse.html">Produse</a>

Fisier intr-un subfolder (din index.html catre o imagine din imagini/):
<img src="imagini/logo.png" alt="Logo atelier">

Fisier in folderul parinte (dintr-o pagina aflata intr-un subfolder, catre pagina de start din radacina — se foloseste ../, adica "un folder mai sus"):
<a href="../index.html">Acasa</a>

Cand apare, de fapt, folderul parinte (../):

Situl atelierului din aceasta lectie nu are nicio pagina HTML intr-un subfolder — de aceea nu ai ../ in niciun link al lui. Dar cand un sit creste, apare des un subfolder cu mai multe pagini de acelasi fel: de exemplu un folder blog/, cu blog/lemn-masiv.html si blog/ingrijire.html. Din blog/lemn-masiv.html, linkul de intoarcere la pagina de start arata asa: <a href="../index.html">Acasa</a> — exact fisierul din exemplul de mai sus, dar acum ai vazut si sub ce fel de sit apare cu adevarat aceasta a treia situatie.

Cand foloseste cale absoluta:

Cale absoluta se foloseste, de regula, cand linkul duce catre alt sit, nu catre o pagina din situl propriu — de exemplu <a href="https://www.instagram.com/atelierultau">Pagina noastra de Instagram</a>. Pentru linkurile dintre paginile propriului sit, calea relativa e alegerea corecta: e mai scurta si nu se strica daca situl isi schimba domeniul sau e mutat pe alt server.

Greseala tipica de recunoscut:

Un link scris cu calea completa de pe discul propriu, de tipul <a href="C:\Users\Ion\Desktop\atelier\galerie.html">, nu e nici cale relativa, nici cale absoluta valida pe web — e o cale de fisier locala, valabila doar pe acel calculator, cu acel utilizator. Dupa publicare pe server, un astfel de link nu duce nicaieri.

4

Meniul de navigare — identic pe toate paginile

Meniul de navigare este blocul de linkuri, de obicei asezat in partea de sus a paginii, prin care vizitatorul trece de la o pagina la alta. Se scrie cu elementul <nav>, o lista <ul>/<li> si linkuri <a>. Cel mai important lucru: acelasi bloc de meniu — aceleasi linkuri, in aceeasi ordine — se copiaza identic pe fiecare pagina a sitului.
Codul complet al meniului, asa cum apare in index.html:

<nav>
  <ul>
    <li><a href="index.html" aria-current="page">Acasa</a></li>
    <li><a href="despre.html">Despre</a></li>
    <li><a href="produse.html">Produse</a></li>
    <li><a href="galerie.html">Galerie</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

In pagina produse.html, acelasi bloc se copiaza identic, doar ca atributul aria-current="page" (care marcheaza, pentru cititoarele de ecran, care este pagina curenta) se muta pe linkul catre "Produse".

Exemplu numeric complet — cate linkuri de meniu are situl in total:

Situl are 5 pagini. Fiecare pagina afiseaza acelasi meniu, cu cate un link catre fiecare din cele 5 pagini (inclusiv catre ea insasi, ca meniul sa ramana identic peste tot).
Calcul: 5 pagini × 5 linkuri pe fiecare pagina = 25 de elemente <a> de meniu, insumate pe intregul sit.
Poti reface singur calculul: daca situl ar avea 8 pagini in loc de 5, cu acelasi meniu complet pe fiecare, ar rezulta 8 × 8 = 64 de linkuri de meniu in total.

5

Legaturi interne cu ancore — spre o sectiune exacta

O ancora este un punct de reper marcat pe orice element, prin atributul id — de exemplu <h2 id="finisaje">. Un link poate tinti direct acel punct, in loc sa duca doar la inceputul paginii, folosind semnul # urmat de valoarea id-ului. Valoarea unui id trebuie sa fie unica in pagina respectiva — nu poate exista de doua ori acelasi id pe aceeasi pagina.
Ancora catre o sectiune din aceeasi pagina:

In produse.html, undeva mai jos in pagina:
<h2 id="finisaje">Finisaje disponibile</h2>

La inceputul aceleiasi pagini, un link scurt care sare direct la acea sectiune:
<a href="#finisaje">Vezi finisajele</a>

Cand ancora e in aceeasi pagina, linkul incepe direct cu #, fara nume de fisier inainte.

Ancora catre o sectiune din alta pagina:

Din index.html, un link care duce direct la sectiunea de finisaje din produse.html:
<a href="produse.html#finisaje">Vezi finisajele disponibile</a>

Aici numele fisierului tinta (produse.html) vine inaintea semnului # — browserul intai deschide acea pagina, apoi sare direct la elementul cu id="finisaje".

Uz frecvent — buton "Inapoi sus" pe o pagina lunga:

Pe pagina de produse, cu multe modele de mobilier, e util un buton la finalul paginii care sare inapoi la inceput:
<div id="sus"></div> — pus chiar la inceputul continutului, apoi la final: <a href="#sus">Inapoi sus</a>.

6

Greseala tipica — linkul care functioneaza local, dar se rupe dupa publicare

Cea mai frecventa capcana la sistemul de legaturi: un link scris usor gresit pare sa functioneze perfect cat timp deschizi paginile direct de pe calculatorul tau, dar da eroare dupa ce situl ajunge pe un server de gazduire web. Trei cauze frecvente:
1. Litere mari/mici diferite (cea mai frecventa):

Windows nu deosebeste Produse.html de produse.html — le trateaza ca acelasi fisier. Multe servere de gazduire web (majoritatea bazate pe Linux) fac aceasta diferenta strict. Un link href="Produse.html" catre un fisier salvat de fapt ca produse.html functioneaza pe calculatorul tau si da eroare dupa publicare.

2. Backslash in loc de slash:

Windows arata caile de fisiere cu \ (backslash), dar sintaxa HTML si adresele web cer intotdeauna / (slash normal) — inclusiv pentru cai relative catre subfoldere: imagini/logo.png, nu imagini\logo.png.

3. Extensia .html uitata sau spatii in numele fisierului:

Un link scris href="produse" (fara .html) sau catre un fisier salvat cu spatii in nume (produse finale.html) cauzeaza probleme similare — cel mai sigur e sa folosesti nume de fisiere fara spatii (cratima sau underscore in loc) si sa scrii intotdeauna extensia completa in link.

Cum recunosti si cum repari:

Semnul ca ceva nu e in regula: click pe link si apare o pagina de eroare ("404 — pagina negasita") sau, pentru o imagine, apare iconita de imagine sparta in loc de fotografie. Reparatia: deschizi folderul sitului si compari, litera cu litera, numele exact al fisierului de pe disc cu ce ai scris in href sau src — inclusiv majuscule/minuscule si extensia. Cel mai sigur test: dupa ce publici situl, dai click pe fiecare link al meniului, pe rand, si verifici ca ajungi unde trebuie.

7

Recapitulare si conexiuni

Un sit cu mai multe pagini functioneaza ca un sistem: pagina de start (index.html) e radacina ierarhiei, scheletul de foldere tine paginile si resursele organizate, caile relative leaga paginile intre ele fara sa depinda de domeniu, meniul de navigare identic ofera un reper stabil pe orice pagina, iar ancorele trimit vizitatorul direct la o sectiune anume.
Rezumat vizual al relatiilor:

Pagina de start (index.html) — radacina ierarhiei sitului
  ↓ legata prin
Cai relative (produse.html, imagini/logo.png, ../index.html)
  ↓ organizate in
Meniu de navigare identic — acelasi pe fiecare pagina
  ↓ completat cu
Ancore — legaturi directe catre o sectiune (#id sau pagina.html#id)

Legatura cu lectiile anterioare si urmatoarea:

In lectia despre elementele de continut ai invatat sa construiesti continutul fiecarei pagini in parte (liste, tabele, imagini, formulare). Azi ai invatat cum se leaga aceste pagini intre ele intr-un sit unitar. In lectia urmatoare vei invata criteriile de calitate ale unui sit inainte de publicare, inclusiv viteza de incarcare — iar un sit cu linkuri corecte, verificate, e primul pas obligatoriu spre acea calitate.

De retinut pentru proba de competente digitale:

index.html = pagina de start, conventia recunoscuta automat de servere.
Cale relativa (fisier.html, folder/fisier.html, ../fisier.html) pentru linkuri catre propriul sit; cale absoluta (https://...) pentru linkuri catre alte situri.
Meniu de navigare — identic, copiat pe fiecare pagina, cu <nav>, <ul>, <li>, <a>.
Ancora — id pe elementul tinta, href="#id" (aceeasi pagina) sau href="pagina.html#id" (alta pagina).
Litere mari/mici, slash vs backslash, extensia .html — verifica-le mereu inainte de publicare.

Exercitii practice

Exercitiul 1 (Nivel minim) — Cale relativa sau cale absoluta?

Situl tau (atelier-lemn) are urmatorul schelet de foldere: index.html, despre.html, produse.html, folderul imagini/ cu fisierul logo.png, si folderul css/ cu fisierul stil.css. Toate paginile HTML stau in radacina sitului. Pentru fiecare din urmatoarele linkuri, scrise in fisierul index.html, spune daca este cale relativa sau cale absoluta, si daca este scris corect din punct de vedere al sintaxei:
(a) <a href="despre.html">Despre</a>
(b) <a href="https://www.facebook.com/atelierultau">Facebook</a>
(c) <img src="imagini/logo.png" alt="Logo">
(d) <a href="C:\atelier\produse.html">Produse</a>
(e) Situl a mai primit un subfolder nou, blog/, cu pagina blog/noutati.html. In acea pagina, ce link relativ scrii ca sa te intorci la pagina de start index.html, aflata in radacina sitului, un nivel mai sus?

Vezi rezolvarea

a) href="despre.html" - cale relativa, scrisa corect (fisier in acelasi folder).

b) href="https://www.facebook.com/..." - cale absoluta (are protocol si domeniu), corecta.

c) src="imagini/logo.png" - cale relativa catre subfolder, corecta.

d) href="C:\atelier\produse.html" - gresit: e o cale de disc Windows, cu backslash si litera de unitate, care nu functioneaza pe web; corect ar fi href="produse.html" (cale relativa, cu slash).

e) Din blog/noutati.html catre radacina, un nivel mai sus: href="../index.html".

Exercitiul 2 (Nivel standard) — Meniu de navigare complet

Un atelier de mic mobilier vrea un sit cu exact aceste 5 pagini, in aceasta ordine in meniu: Acasa (index.html), Despre noi (despre.html), Produse (produse.html), Galerie (galerie.html), Contact (contact.html). Scrie codul HTML complet al meniului de navigare (elementul <nav> cu lista <ul>/<li> si linkurile <a>) asa cum ar trebui sa apara in fisierul galerie.html, marcand corect, cu aria-current="page", care este pagina curenta.

Vezi rezolvarea

Cod complet, asa cum apare in galerie.html:

<nav> <ul> <li><a href="index.html">Acasa</a></li> <li><a href="despre.html">Despre noi</a></li> <li><a href="produse.html">Produse</a></li> <li><a href="galerie.html" aria-current="page">Galerie</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav>

Exercitiul 3 (Nivel performanta) — Schelet, harta si ancora, pentru un sit de 5 pagini

Vrei sa construiesti situl unui mic centru de reciclare si protectia mediului, cu 5 pagini: pagina principala, despre centru, servicii oferite, un ghid de sortare a deseurilor si contact. Pagina "servicii" va contine 3 sectiuni distincte (id-uri: colectare, transport, consultanta), fiecare cu titlul ei <h2>. Cerinte: (1) deseneaza harta celor 5 pagini si scheletul de foldere pe disc (cu subfoldere pentru imagini si stil, dupa modelul din lectie); (2) scrie codul complet al linkului din pagina principala care duce direct la sectiunea "consultanta" din pagina de servicii; (3) calculeaza, ca in exemplul numeric din lectie, cate elemente <a> de meniu ar exista in total pe intregul sit, daca fiecare din cele 5 pagini afiseaza acelasi meniu complet, cu link catre toate cele 5 pagini.

Vezi rezolvarea

Schita: 5 pagini in radacina (index.html, despre.html, servicii.html, sortare.html, contact.html), cu subfoldere imagini/ si css/, dupa modelul din lectie. Legatura din pagina principala direct la sectiunea consultanta: <a href="servicii.html#consultanta">Consultanta</a> (necesita <h2 id="consultanta"> in servicii.html).

Calcul: fiecare din cele 5 pagini afiseaza acelasi meniu complet cu 5 linkuri, deci 5 x 5 = 25 de elemente <a> de meniu in tot situl.

Criterii de evaluare: schelet de foldere corect (HTML in radacina, resurse in subfoldere), id unic pe sectiunea consultanta, calculul 25 justificat prin inmultire pagini x linkuri.

Ce ai invatat astazi

  • Pagina de start (index.html) = radacina ierarhiei unui sit; conventia recunoscuta automat de servere
  • Scheletul de foldere: paginile HTML in radacina, imaginile si stilul CSS in subfoldere descriptive
  • Cale relativa (fisier.html, folder/fisier.html, ../fisier.html) pentru linkuri in propriul sit
  • Cale absoluta (https://domeniu.ro/pagina.html) pentru linkuri catre alte situri
  • Meniul de navigare — identic (aceleasi linkuri, aceeasi ordine) pe fiecare pagina a sitului
  • Ancora: id pe elementul tinta + href="#id" sau href="pagina.html#id"
  • Greseala tipica: majuscule/minuscule, backslash in loc de slash, extensia .html uitata — verifica fiecare link dupa publicare
  • Legaturile corecte intre pagini sunt parte din ce se verifica la proba de competente digitale de la bacalaureat

Vrei mai mult?

Provocare: Alege orice site real pe care il cunosti (poate chiar unul facut de tine sau de un coleg) si testeaza manual, unul cate unul, toate linkurile din meniul de navigare. Noteaza daca fiecare duce exact unde scrie, si daca gasesti vreo litera mare/mica gresita sau un backslash in loc de slash intr-un link.

De ce? De ce un link cu cale relativa (produse.html) functioneaza identic indiferent pe ce domeniu ajunge situl, in timp ce un link cu cale absoluta trebuie rescris daca muti situl pe alt domeniu?

Deschidere: Cand un sit e gazduit temporar pe o adresa de test (de exemplu un subdomeniu Netlify generat automat) si apoi mutat pe domeniul final al firmei, linkurile relative dintre paginile proprii raman valabile fara nicio modificare — doar linkurile absolute catre alte site-uri externe trebuie verificate.

Urmatoarea lectie

Continua cu Criterii de calitate — cum verifici, inainte de publicare, ca situl tau se incarca rapid, ca linkurile functioneaza si ca pagina arata bine pentru orice vizitator.

Continua →