Invatare Atomica

Vreau sa creez meniuri si navigare pe site!

Progres lectie:
0%
🎯

Obiectivul lectiei

Ai facut o pagina web cu text si titluri. Dar cum faci un meniu care duce la alte pagini? Cum faci o lista de pasi sau ingrediente?

Dupa aceasta lectie vei putea:

  • Sa explici lista neordonata: <ul> si <li>
  • Sa explici lista ordonata: <ol> si <li>
  • Sa descrii lista in lista = sub-categorii
  • Sa aplici tag-ul <a> - ancora (anchor)
  • Sa identifici 4 tipuri de linkuri pe care le vei folosi

Incearca singur!

🎯 INCEARCA

Construieste o pagina cu meniu!

Nu trebuie sa intelegi totul acum. Doar copiaza codul, vezi rezultatul in browser si observa ce face fiecare parte.

Misiunea ta (10 minute):
1
Copiaza codul de mai jos si salveaza-l ca retete.html pe Desktop. Deschide-l in browser (dublu-click pe fisier).
<!DOCTYPE html> <html lang="ro"> <head> <meta charset="UTF-8"> <title>Retetele mele</title> </head> <body> <!-- MENIU (lista neordonata cu linkuri) --> <h1>Cartea mea de retete</h1> <ul> <li><a href="#pizza">Pizza</a></li> <li><a href="#salata">Salata</a></li> <li><a href="https://www.google.com" target="_blank">Cauta retete noi</a></li> </ul> <!-- RETETA PIZZA (cu lista ordonata) --> <h2 id="pizza">Pizza Margherita</h2> <h3>Ingrediente:</h3> <ul> <li>Aluat <ul> <li>500g faina</li> <li>250ml apa</li> <li>1 plic drojdie</li> </ul> </li> <li>Sos de rosii</li> <li>Mozzarella</li> <li>Busuioc</li> </ul> <h3>Pasi de preparare:</h3> <ol> <li>Amesteca faina cu apa si drojdia</li> <li>Lasa aluatul sa creasca 1 ora</li> <li>Intinde aluatul pe tava</li> <li>Pune sosul, apoi mozzarella</li> <li>Coace 15 minute la 220 grade</li> </ol> <!-- RETETA SALATA --> <h2 id="salata">Salata Caesar</h2> <p>O salata simpla si delicioasa!</p> <p><a href="#pizza">Inapoi la Pizza</a></p> </body> </html>
2
In browser, apasa pe "Pizza" din meniu. Ce observi? Pagina sare la sectiunea cu reteta. Acum apasa "Cauta retete noi". Ce se intampla?
3
Observa diferenta: ingredientele au buline (lista neordonata), iar pasii au numere (lista ordonata). De ce crezi ca e asa?
4
Sub ingredientul "Aluat" sunt sub-ingrediente (faina, apa, drojdie). Aceasta e o lista imbricata (lista in lista). Adauga inca un sub-ingredient: <li>sare</li>
5
Adauga un nou link in meniu: <li><a href="mailto:elev@scoala.ro">Trimite email</a></li>. Ce se intampla cand dai click pe el?
🌟 BONUS: Adauga o a treia reteta (de ex. "Clatite") cu propriul id, ingrediente si pasi. Adaug-o si in meniu!
▶ Blocat la pasul 2? Click aici pentru un indiciu

Linkul <a href="#pizza"> foloseste un # (anchor). Cand dai click, browserul cauta un element cu id="pizza" si sare la el.

Linkul <a href="https://www.google.com" target="_blank"> are target="_blank", deci deschide Google intr-un tab nou.

▶ Blocat la pasul 4? Click aici

Cauta in cod lista care incepe dupa <li>Aluat. Vei vedea un <ul> inauntru cu faina, apa si drojdie.

Adauga <li>sare</li> dupa linia cu drojdie, dar inainte de </ul>.

▶ Blocat la pasul 5? Click aici

Linkul mailto: deschide aplicatia de email a calculatorului. Nu deschide o pagina web, ci pregateste un email nou catre adresa specificata.

Daca nu ai o aplicatie de email configurata, s-ar putea sa nu se intample nimic vizibil. E normal!

1

Lista neordonata: <ul> si <li>

Lista neordonata: <ul> si <li>

O lista neordonata (unordered list) afiseaza elemente cu buline (bullet points). Se foloseste cand ordinea nu conteaza: ingrediente, materiale necesare, optiuni de meniu.

<ul> = containerul listei (Unordered List). <li> = fiecare element din lista (List Item).

🛒 Analogie: Lista de cumparaturi

Cand mergi la magazin, scrii: "paine, lapte, oua, branza". Nu conteaza ordinea - le iei pe rand cum le gasesti. Asta e o lista neordonata!

Cod HTML
<ul> <li>Paine</li> <li>Lapte</li> <li>Oua</li> <li>Branza</li> </ul>
2

Lista ordonata: <ol> si <li>

Lista ordonata: <ol> si <li>

O lista ordonata (ordered list) afiseaza elemente cu numere (1, 2, 3...). Se foloseste cand ordinea conteaza: pasi de reteta, instructiuni, clasamente.

<ol> = containerul listei (Ordered List). <li> = fiecare element, la fel ca la lista neordonata.

🍳 Analogie: Reteta de prajitura

Cand faci o prajitura, ordinea conteaza enorm! Nu poti baga la cuptor inainte sa amesteci ingredientele. Pasii sunt numerotati: 1, 2, 3...

Cod HTML
<ol> <li>Incalzeste cuptorul la 180 grade</li> <li>Amesteca faina cu zaharul</li> <li>Adauga ouale si laptele</li> <li>Coace 30 de minute</li> </ol>
3

Lista in lista = sub-categorii

Lista in lista = sub-categorii

Poti pune o lista in interiorul altei liste. Lista interioara trebuie sa fie in interiorul unui <li>, nu dupa </li>.

Aceasta tehnica se foloseste pentru: categorii cu sub-categorii, meniuri cu sub-meniuri, ingrediente cu sub-componente.

Cod HTML - lista imbricata
<ul> <li>Fructe <ul> <li>Mere</li> <li>Pere</li> <li>Banane</li> </ul> </li> <li>Legume <ul> <li>Rosii</li> <li>Castraveti</li> </ul> </li> <li>Lactate</li> </ul>
4

Tag-ul <a> - ancora (anchor)

Tag-ul <a> - ancora (anchor)

Tag-ul <a> creeaza un link (legatura) catre o alta pagina, un alt site, o sectiune din aceeasi pagina, sau chiar o adresa de email.

Atributul obligatoriu este href (Hypertext REFerence) - adica unde duce linkul.

🪧 Analogie: Indicatorul de drum

Gandeste-te la un link ca la un indicator de circulatie de pe marginea soselei. Pe semn scrie o destinatie (textul vizibil — de exemplu "Cluj 120 km") iar sageata arata directia de mers (atributul href — adresa exacta la care ajungi daca "mergi" pe acea cale). Autorul paginii alege ce scrie pe semn SI unde duce sageata — exact cum tu alegi textul linkului si valoarea href. Click = pasesti pe drumul indicat.

5

4 tipuri de linkuri pe care le vei folosi

4 tipuri de linkuri pe care le vei folosi

In functie de unde duce linkul, folosim valori diferite pentru atributul href:

Tip Exemplu href Ce face
Link extern href="https://google.com" Duce la un alt site web (adresa completa)
Link intern href="pagina2.html" Duce la o alta pagina din acelasi site
Ancora (#) href="#sectiune" Sare la o sectiune din aceeasi pagina (catre un id)
Email href="mailto:eu@mail.com" Deschide aplicatia de email cu adresa completata
Exemple complete
<!-- Link extern (alt site) --> <a href="https://www.wikipedia.org">Wikipedia</a> <!-- Link intern (alta pagina din site) --> <a href="contact.html">Pagina de contact</a> <!-- Ancora (sare la o sectiune din pagina) --> <a href="#despre">Mergi la sectiunea Despre</a> ... <h2 id="despre">Despre noi</h2> <!-- Link email --> <a href="mailto:contact@scoala.ro">Scrie-ne un email</a>
6

target="_blank" vs target="_self"

target="_blank" vs target="_self"

Atributul target spune browserului unde sa deschida pagina:

Valoare Ce face Cand il folosesti
_self Deschide in acelasi tab (comportament implicit) Navigare intre paginile propriului site
_blank Deschide intr-un tab nou Linkuri catre alte site-uri (ca sa nu pierzi vizitatorul)
Exemple
<!-- Se deschide in ACELASI tab (implicit) --> <a href="despre.html">Despre noi</a> <!-- Se deschide in TAB NOU --> <a href="https://youtube.com" target="_blank">YouTube</a>
7

Cum "gaseste" browserul paginile tale

Cum "gaseste" browserul paginile tale

Cand scrii href="ceva", browserul trebuie sa stie unde sa caute fisierul. Exista doua moduri:

Tip cale Exemplu Explicatie
Absoluta https://www.google.com/maps Adresa completa, ca un GPS. Functioneaza de oriunde.
Relativa pagini/despre.html Relativa la fisierul curent. "Du-te in folderul pagini, gaseste despre.html"
🗺 Analogie: Cum dai indicatii cuiva

Cale absoluta: "Str. Mihai Eminescu nr. 15, Bucuresti, Romania" - oricine din lume poate gasi locul.

Cale relativa: "Mergi la dreapta, apoi a doua strada la stanga" - functioneaza doar daca esti deja in zona.

8

Pagina completa cu navigare

Pagina completa cu navigare

Acum punem totul impreuna: meniu cu linkuri, liste ordonate, liste imbricate, si diverse tipuri de linkuri. Urmareste fiecare parte!

Pagina completa - salveaz-o si deschide-o!
<!DOCTYPE html> <html lang="ro"> <head> <meta charset="UTF-8"> <title>Scoala Noastra</title> </head> <body> <!-- MENIU DE NAVIGARE --> <h1>Scoala Gimnaziala "Ion Creanga"</h1> <ul> <li><a href="#profesori">Profesori</a></li> <li><a href="#orar">Orar</a></li> <li><a href="#materii">Materii</a></li> <li><a href="mailto:secretariat@scoala.ro">Contact</a></li> </ul> <!-- SECTIUNEA PROFESORI --> <h2 id="profesori">Profesorii nostri</h2> <ul> <li>Prof. Ionescu - Matematica</li> <li>Prof. Popescu - Romana</li> <li>Prof. Vasilescu - TIC</li> </ul> <!-- SECTIUNEA ORAR --> <h2 id="orar">Orarul zilei de Luni</h2> <ol> <li>Matematica (8:00 - 8:50)</li> <li>Romana (9:00 - 9:50)</li> <li>TIC (10:00 - 10:50)</li> <li>Engleza (11:00 - 11:50)</li> </ol> <!-- SECTIUNEA MATERII (cu liste imbricate) --> <h2 id="materii">Materiile noastre</h2> <ul> <li>Stiinte exacte <ul> <li>Matematica</li> <li>Fizica</li> <li>Chimie</li> </ul> </li> <li>Limbi si comunicare <ul> <li>Limba romana</li> <li>Limba engleza</li> </ul> </li> <li>Tehnologie <ul> <li><a href="https://scratch.mit.edu" target="_blank">Scratch</a></li> <li>HTML & CSS</li> </ul> </li> </ul> <p><a href="https://edu.ro" target="_blank">Viziteaza site-ul Ministerului Educatiei</a></p> </body> </html>

Exercitii practice

Exercitiul 1 (Nivel minim) - Analiza codului HTML

Raspunde la urmatoarele intrebari despre liste si linkuri:

  1. Care este diferenta dintre <ul> si <ol>? Da un exemplu din viata reala pentru fiecare (cand ai folosi una si cand cealalta).
  2. Ce se intampla daca scrii <a href="www.google.com">Google</a> fara https://? Browserul interpreteaza www.google.com ca o cale relativa (un fisier sau folder din acelasi site), nu ca o adresa externa. In loc sa deschida Google, va cauta un folder numit www.google.com in acelasi director cu pagina ta. Concluzie: la linkuri externe, scrie intotdeauna adresa completa cu https://.
  3. Explica ce inseamna ../ intr-o cale relativa. Daca esti in fisierul pagini/blog/articol.html si vrei sa ajungi la imagini/foto.jpg (din folderul principal), ce cale relativa scrii?

Raspunde numerotat: 1. ... 2. ... 3. ...

Vezi rezolvarea
  1. ul vs ol: <ul> face o lista neordonata (cu buline), pentru cand ordinea NU conteaza - exemplu: lista de cumparaturi (paine, lapte, oua). <ol> face o lista ordonata (numerotata), pentru cand ordinea conteaza - exemplu: pasii unei retete (1. incalzeste cuptorul, 2. amesteca faina).
  2. href fara https://: browserul citeste www.google.com ca pe o cale relativa, adica un fisier sau folder din acelasi site. Nu deschide Google, ci cauta un folder numit asa langa pagina ta si probabil da eroare. Regula: la linkuri externe scrii intotdeauna adresa completa cu https://.
  3. ../ inseamna "urca un nivel mai sus" din folderul curent. Din pagini/blog/articol.html pana la imagini/foto.jpg (in folderul principal) trebuie sa urci de doua ori (iesi din blog, apoi din pagini): ../../imagini/foto.jpg.

Exercitiul 2 (Nivel standard) - Construieste un site cu 2 pagini

Cerinta: Creeaza doua fisiere HTML in acelasi folder:

  1. index.html - Pagina principala cu:
    • Un titlu <h1>
    • Un meniu (lista neordonata cu 3 linkuri): Acasa (link spre #), Hobby-uri (link spre #hobby), Pagina 2 (link spre pagina2.html)
    • O sectiune <h2 id="hobby"> cu o lista imbricata de hobby-uri (ex: Sporturi > Fotbal, Baschet; Muzica > Chitara)
    • Un link extern catre un site (cu target="_blank")
  2. pagina2.html - O pagina secundara cu un link <a href="index.html">Inapoi la Acasa</a>

Indicii:

  • Amandoua fisierele trebuie sa fie in acelasi folder
  • Foloseste href="pagina2.html" (cale relativa, acelasi folder)
  • Nu uita <!DOCTYPE html> si <meta charset="UTF-8"> in ambele pagini
Vezi rezolvarea

index.html

<!DOCTYPE html><html lang="ro"><head><meta charset="UTF-8"><title>Site-ul meu</title></head><body><h1>Bine ai venit</h1><ul><li><a href="#">Acasa</a></li><li><a href="#hobby">Hobby-uri</a></li><li><a href="pagina2.html">Pagina 2</a></li></ul><h2 id="hobby">Hobby-urile mele</h2><ul><li>Sporturi<ul><li>Fotbal</li><li>Baschet</li></ul></li><li>Muzica<ul><li>Chitara</li></ul></li></ul><a href="https://www.wikipedia.org" target="_blank">Wikipedia</a></body></html>

pagina2.html: acelasi cap (DOCTYPE, head cu meta charset), apoi <body><h1>Pagina 2</h1><a href="index.html">Inapoi la Acasa</a></body>. Ambele fisiere stau in acelasi folder, de aceea linkurile dintre ele nu au foldere in cale.

Exercitiul 3 (Nivel performanta) - Proiecteaza un meniu

Cerinta: Imagineaza-ti ca faci site-ul scolii tale. Scrie pe hartie (sau in caiete) structura HTML a unui meniu de navigare care contine:

  1. 5 elemente in meniu: Acasa, Profesori, Materii, Galerie Foto, Contact
  2. "Acasa" duce la index.html
  3. "Profesori" si "Materii" sunt ancore (#profesori, #materii) - pe aceeasi pagina
  4. "Galerie Foto" duce la galerie/index.html (un folder separat)
  5. "Contact" deschide email-ul catre secretariat@scoala.ro

Indicii:

  • Meniul este o lista neordonata (<ul>) cu linkuri (<a>) in fiecare <li>
  • Foloseste mailto: pentru email
  • Foloseste calea relativa galerie/index.html pentru Galerie Foto

Cuvinte cheie de folosit: <ul>, <li>, <a>, href, target, mailto, cale relativa, ancora, id

Vezi rezolvarea

Schita de rezolvare (fara cod complet - o faci singur pe hartie):

  1. Porneste cu un <ul> care contine 5 elemente <li>, fiecare cu un <a href=...> inauntru.
  2. "Acasa": href="index.html" (link intern, alta pagina).
  3. "Profesori" si "Materii": ancore catre aceeasi pagina, href="#profesori" si href="#materii" - trebuie sa existe undeva pe pagina un id="profesori" si id="materii" pe un titlu.
  4. "Galerie Foto": cale relativa catre un folder separat, href="galerie/index.html".
  5. "Contact": href="mailto:secretariat@scoala.ro".

Capcane: nu uita # la ancore (fara el cauta o pagina, nu o sectiune); nu confunda mailto: cu un link normal; verifica ca id-urile de pe pagina se potrivesc exact cu textul de dupa #.

Criterii de evaluare: 5 linkuri prezente, tipul corect de href pentru fiecare (intern/ancora/relativ-folder/email), structura de lista respectata (<ul><li><a>).

Ce ai invatat astazi

  • Ai invatat lista neordonata: <ul> si <li>
  • Acum stii lista ordonata: <ol> si <li>
  • Ai descoperit lista in lista = sub-categorii
  • Ai explorat tag-ul <a> - ancora (anchor)
  • Ai inteles 4 tipuri de linkuri pe care le vei folosi
  • Ai invatat target="_blank" vs target="_self"
  • Acum stii cum "gaseste" browserul paginile tale
  • Ai descoperit pagina completa cu navigare

Vrei mai mult?

Provocare: Imagineaza-ti un site cu index.html in radacina si un folder produse/ care contine fisierul pantofi.html. Scrie exact ce cale (href) ai pune in index.html ca sa ajungi la pantofi.html, si ce cale ai pune in produse/pantofi.html ca sa te intorci la index.html. Foloseste ce ai invatat despre cai relative si ../.

De ce: linkurile externe se deschid de obicei cu target="_blank" (tab nou), dar linkurile interne (in acelasi site) nu. Ce s-ar intampla cu vizitatorii tai daca ai face exact invers pe toate linkurile?

Unde se foloseste: orice magazin online cu mii de produse organizeaza paginile exact cu acest mecanism - cai relative si linkuri interne grupate pe categorii si subcategorii, la fel cum ai facut tu lista imbricata Fructe cu Mere si Pere in interior.

Urmatoarea lectie

Continua cu lectia urmatoare pentru a aprofunda cunostintele.

Continua →