Link-uri HTML. Definirea hiperlink-urilor cu eticheta HTML a. Link-uri locale. Culorile Link-urilor în HTML.

Susține Lectii-Virtuale!

Link-uri HTML

Link-urile se găsesc în aproape toate paginile web. Link-urile permit utilizatorilor să facă clic pe drumul lor de la pagină la pagină.

Link-uri HTML - hyperlink-uri

Link-urile HTML sunt hyperlink-uri.
Puteți face click pe un link și să săriți la un alt document.
Când mutați mouse-ul peste un link, săgeata mouse-ului se va transforma într-o mână mică.

Notă: Un link nu trebuie să fie text. Poate fi o imagine sau orice alt element HTML.

Link-uri HTML - Sintaxă

Hiperlink-urile sunt definite cu eticheta HTML <a>:

<a href="url">link text</a>

Exemplu:

<a href="https://www.lectii-virtuale.ro/html/"> Accesați tutorialul nostru HTML </a>

Atributul href specifică adresa de destinație (https://www.lectii-virtuale.ro/html/) a link-ului.
Textul link-ului este partea vizibilă (Vizitați tutorialul nostru HTML).
Făcând click pe link-ul text, vă veți trimite la adresa specificată.

Notă: Fără o tăiere înainte (forward slash) la sfârșitul adreselor de subfolder, puteți genera două solicitări către server. Multe servere vor adăuga automat o tăiere înainte (forward slash) la sfârșitul adresei și apoi vor crea o nouă solicitare.

Link-uri locale

Exemplul de mai sus a utilizat o adresă URL absolută (o adresă web completă).
Un link local (link către același site web) este specificat cu o adresă URL relativă (fără https: // www ....).

Exemplu:

<a href="html_images.asp"> Imagini HTML </a>

HTML Link Colors

În mod implicit, un link va apărea astfel (în toate browserele):

• Un link nevăzut este subliniat și albastru.
• Un link vizitat este subliniat și violet.
• Un link activ este subliniat și roșu.

Puteți modifica culorile implicite, folosind CSS:

Exemplu:

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
Link-urile sunt adesea stilate ca butoane, folosind CSS:

Acesta este un link
Exemplu
<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>