Ce sunt linkurile sau ancorele in HTML?
Link-urile, cunoscute și sub denumirea de "ancore", sunt elemente esențiale în web design, permițând navigarea între diferite pagini web și resurse. Un link poate conecta utilizatorii la alte pagini web, fișiere descărcabile, adrese de e-mail sau chiar la locații specifice în cadrul aceleiași pagini web.
Crearea unui link (ancoră):
În HTML, folosești elementul <a>
pentru a crea un link. Principalul atribut al elementului <a>
este href
, care specifică adresa URL către care trebuie să ducă link-ul.
html
<a href="https://www.example.com">Vizitați Exemplul</a>
În exemplul de mai sus, textul "Vizitați Exemplul" va fi vizibil pentru utilizatori, iar atunci când utilizatorii fac clic pe el, vor fi redirecționați către adresa URL specificată (https://www.example.com
).
Link-uri către resurse interne:
Pentru a crea link-uri către resurse interne, poți folosi adrese URL relative. De exemplu, dacă ai o pagină numită "pagina.html" în același director cu pagina curentă, poți crea un link către ea astfel:
html
<a href="pagina.html">Vizitați Pagina</a>
Ancore interne (Link-uri către secțiuni din aceeași pagină):
Poți utiliza link-uri pentru a naviga către anumite secțiuni din aceeași pagină web. Pentru asta, folosești o combinație de etichetele <a>
și atributul id
pentru a marca secțiunile către care dorești să faci legătura.
html
<a href="#sectiune1">Mergi la Secțiunea 1</a>
<a href="#sectiune2">Mergi la Secțiunea 2</a>
...
<h2 id="sectiune1">Secțiunea 1</h2>
<p>Textul din secțiunea 1.</p>
<h2 id="sectiune2">Secțiunea 2</h2>
<p>Textul din secțiunea 2.</p>
În acest exemplu, link-urile "Mergi la Secțiunea 1" și "Mergi la Secțiunea 2" vor duce utilizatorii către secțiunile corespunzătoare din aceeași pagină.
Link-uri către adrese de e-mail:
Poți crea link-uri pentru a deschide automat aplicația de e-mail cu adresa destinatarului deja completată.
html
<a href="mailto:contact@example.com">Contactați-ne</a>
Stilizarea link-urilor:
Pentru a schimba stilul link-urilor, poți folosi CSS. De exemplu, pentru a face link-urile să fie subliniate la survol, poți folosi:
css
a:hover {
text-decoration: underline;
}
Aceasta a fost o lecție introductivă despre link-uri (ancore) în HTML. Cu link-urile, poți crea o navigație interactivă și să oferi utilizatorilor acces ușor la diferite resurse și informații.