🔗

Linkuri si Navigare

Dupa aceasta lectie vei sti sa conectezi pagini intre ele si sa creezi o navigare completa!

🧪 INCEARCA 2 minute - experimenteaza!

Deschide editorul si creeaza un link catre Google.

🚀 Deschide OneCompiler HTML

🎯 Provocare (2 min):

In <body>, adauga:
<a href="https://google.com">Cauta pe Google</a>
Apasa "Run" si testeaza link-ul!

📚 INVATA Conecteaza-ti paginile

Tag-ul <a> - Ancora

a href - Link de baza

Tag-ul <a> (ancora) creeaza link-uri. Atributul href contine destinatia.

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

💡 href = Hypertext REFerence (referinta hypertext)

target="_blank" - Tab nou

Adauga target="_blank" pentru a deschide link-ul intr-un tab nou.

<!-- Se deschide in acelasi tab -->
<a href="https://google.com">Google</a>

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

Tipuri de Link-uri

Link-uri externe (URL complet)

Pentru site-uri externe, folosesti URL-ul complet cu https://

<a href="https://youtube.com">YouTube</a>
<a href="https://wikipedia.org">Wikipedia</a>

Link-uri relative (acelasi site)

Pentru pagini din acelasi site, folosesti doar numele fisierului.

<!-- Catre o alta pagina din acelasi folder -->
<a href="contact.html">Contact</a>

<!-- Catre un folder -->
<a href="pagini/despre.html">Despre noi</a>

Link-uri interne (#) - Ancorare

Foloseste # pentru a sari la o sectiune din aceeasi pagina.

<!-- Link care sare la sectiune -->
<a href="#contact">Salt la Contact</a>

<!-- ... mai jos in pagina ... -->

<h2 id="contact">Sectiunea Contact</h2>

💡 Elementul destinatie trebuie sa aiba id-ul corespunzator!

Link de email

Foloseste mailto: pentru a deschide aplicatia de email.

<a href="mailto:email@exemplu.com">Trimite email</a>

✅ VERIFICA Raspunde corect la 3 din 4

1. Ce atribut contine adresa link-ului?

src

href

link

2. Cum deschizi un link intr-un tab nou?

href="_new"

open="new"

target="_blank"

3. Ce inseamna href="#contact"?

Sare la elementul cu id="contact" in aceeasi pagina

Deschide pagina contact.html

Trimite un email

4. Care e un link relativ corect?

href="https://site.com/pagina.html"

href="pagina.html"

href="www.pagina.html"

⭐

Felicitari!

Ai terminat Lectia 3! Acum stii sa conectezi paginile intre ele.

Ce ai invatat: a href, target="_blank", linkuri interne (#), linkuri relative

Continua cu Lectia 4 →