🔗

Liste si Linkuri

Dupa aceasta lectie, vei sti sa creezi liste ordonate si neordonate, precum si hyperlink-uri catre alte pagini!

🎯 INCEARCA

Fara instructiuni - vezi cat poti singur!

Provocarea ta (5 minute):

1. In fisierul tau HTML, adauga o lista cu 3 materii preferate

2. Adauga o lista numerotata cu pasii pentru a face ceai

3. Adauga un link catre Google.com

4. Salveaza si testeaza in browser - functioneaza linkul?

💡 Ai nevoie de indicii? Click aici

Lista cu buline: <ul> si <li>

Lista numerotata: <ol> si <li>

Link: <a href="url">text</a>

📚 INVATA

Liste si Hyperlink-uri in HTML

Liste neordonate (cu buline) - <ul>

UL = Unordered List (lista neordonata)

LI = List Item (element din lista)

Cod HTML

<ul>
    <li>Mere</li>
    <li>Pere</li>
    <li>Banane</li>
</ul>
                            

Rezultat

Mere
Pere
Banane

Liste ordonate (numerotate) - <ol>

OL = Ordered List (lista ordonata - cu numere)

Cod HTML

<ol>
    <li>Fierbe apa</li>
    <li>Pune pliculetul</li>
    <li>Asteapta 3 minute</li>
    <li>Savureaza!</li>
</ol>
                            

Rezultat

Fierbe apa
Pune pliculetul
Asteapta 3 minute
Savureaza!

Hyperlink-uri (Linkuri) - <a>

A = Anchor (ancora - pentru link)

href = Hypertext Reference (adresa URL)

Sintaxa

<a href="https://google.com">Click aici pentru Google</a>
                    

Exemple

<!-- Link extern -->
<a href="https://youtube.com">YouTube</a>

<!-- Link in tab nou -->
<a href="https://google.com"
   target="_blank">Google (tab nou)</a>

<!-- Link intern (alta pagina) -->
<a href="despre.html">Despre noi</a>

<!-- Link email -->
<a href="mailto:test@email.com">
  Trimite email</a>
                            

Rezultat

💡 Atributul target="_blank"

Cand adaugi target="_blank" la un link, pagina se deschide intr-un tab nou in browser. Foarte util pentru linkuri externe - utilizatorul nu paraseste site-ul tau!

🎯 Exemplu complet: Pagina cu liste si linkuri

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <title>Site-uri utile</title>
</head>
<body>
    <h1>Site-uri pentru invatare</h1>

    <h2>Materiile mele preferate:</h2>
    <ul>
        <li>Informatica</li>
        <li>Matematica</li>
        <li>Engleza</li>
    </ul>

    <h2>Linkuri utile:</h2>
    <ol>
        <li><a href="https://scratch.mit.edu" target="_blank">Scratch</a></li>
        <li><a href="https://code.org" target="_blank">Code.org</a></li>
        <li><a href="https://w3schools.com" target="_blank">W3Schools</a></li>
    </ol>
</body>
</html>
                    

⚠ Greseli frecvente

Uiti http:// sau https:// - linkul nu functioneaza!

❌ href="google.com"

✅ href="https://google.com"

Uiti <li> in lista:

❌ <ul>Mere Pere</ul>

✅ <ul><li>Mere</li><li>Pere</li></ul>

✅ VERIFICA

Hai sa vedem ce ai retinut!

1. Ce tag creeaza o lista cu buline (neordonata)?

<ol>

<ul>

<list>

2. Ce tag se foloseste pentru fiecare element din lista?

<item>

<li>

<le>

3. Ce atribut contine adresa URL la un link?

href

src

link

4. Cum faci ca un link sa se deschida in tab nou?

new="tab"

target="_blank"

open="new"

🎉

Felicitari!

Ai terminat Lectia 3: Liste si Linkuri

+50 XP

Acum stii sa creezi liste si sa adaugi linkuri catre alte pagini!

Continua la Lectia 4 →