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

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

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 - 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: Telecomanda cu butoane

Gandeste-te la un link ca la un buton de pe telecomanda. Scrie ceva pe el (textul vizibil) si cand apesi pe el, te duce undeva (adresa din href). "Apesi pe butonul Acasa si te duce la canalul principal."

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://? De ce nu functioneaza cum te-ai astepta?
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

Tag-ul - ancora (anchor)

4 tipuri de linkuri pe care le vei folosi

target="_blank" vs target="_self"

Cum "gaseste" browserul paginile tale

Pagina completa cu navigare

Vreau sa creez meniuri si navigare pe site!

Obiectivul lectiei

Dupa aceasta lectie vei putea:

Incearca singur!

Construieste o pagina cu meniu!

Lista neordonata:
si

Lista ordonata:
si

Lista in lista = sub-categorii

Exercitii practice

Exercitiul 1 (Nivel minim) - Analiza codului HTML

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

Exercitiul 3 (Nivel performanta) - Proiecteaza un meniu

Ce ai invatat astazi

Urmatoarea lectie

Obiectivul lectiei

Dupa aceasta lectie vei putea:

Incearca singur!

Construieste o pagina cu meniu!

Lista neordonata: si

Lista ordonata: si

Lista in lista = sub-categorii

Tag-ul - ancora (anchor)

4 tipuri de linkuri pe care le vei folosi

target="_blank" vs target="_self"

Cum "gaseste" browserul paginile tale

Pagina completa cu navigare

Exercitii practice

Exercitiul 1 (Nivel minim) - Analiza codului HTML

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

Exercitiul 3 (Nivel performanta) - Proiecteaza un meniu

Ce ai invatat astazi

Urmatoarea lectie

Lista neordonata:
si

Lista ordonata:
si