Lectia 3: Liste si Linkuri in HTML

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

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>

In browser, apasa pe "Pizza" din meniu. Ce observi? Pagina sare la sectiunea cu reteta. Acum apasa "Cauta retete noi". Ce se intampla?

Observa diferenta: ingredientele au buline (lista neordonata), iar pasii au numere (lista ordonata). De ce crezi ca e asa?

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>

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!

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>

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>

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>

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.

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>

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>

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.

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:

Care este diferenta dintre <ul> si <ol>? Da un exemplu din viata reala pentru fiecare (cand ai folosi una si cand cealalta).
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://.
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. ...

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

Cerinta: Creeaza doua fisiere HTML in acelasi folder:

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

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:

5 elemente in meniu: Acasa, Profesori, Materii, Galerie Foto, Contact
"Acasa" duce la index.html
"Profesori" si "Materii" sunt ancore (#profesori, #materii) - pe aceeasi pagina
"Galerie Foto" duce la galerie/index.html (un folder separat)
"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

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

Vreau sa creez meniuri si navigare pe site!

Obiectivul lectiei

Dupa aceasta lectie vei putea: