Legături

Legăturile, care sunt reprezentate de elementul <a></a>, joacă un rol important - asigură navigarea între documente separate. Acest element are următoarele atribute:

href: definește adresa legăturii
hreflang: indică limba documentului către care duce această legătură
media: definește dispozitivul pentru care este destinată legătura
rel: definește relația între documentul actual și resursa către care duce legătura
target: definește cum documentul legat trebuie să se deschidă
type: indică tipul MIME al resursei legate

Cel mai important atribut este href:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Legături</title>
   </head>
   <body>
       <a href="content.html">Manual de HTML5</a>
   </body>
</html>

Și obținem:

Aici, pentru legătură se utilizează calea relativă content.html. Adică, în aceeași folder cu acest document trebuie să se afle fișierul content.html, către care se va face navigarea la apăsarea pe legătură.

De asemenea, putem utiliza căi absolute cu indicarea completă a adresei:

<a href="http:/fdc.com/web/html5/">Manual de HTML5</a>

Navigație în interiorul documentului

Și de asemenea putem seta legături interne, care vor naviga către anumite blocuri în interiorul elementelor:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Legături interne</title>
   </head>
   <body>
       <a href="#paragraph1">Paragraf 1</a> |<a href="#paragraph2">Paragraf 2</a> | <ahref="#paragraph3">Paragraf 3</a>
       <h2 id="paragraph1">Paragraf 1</h2>
       <p>Conținutul paragrafului 1</p>
       <h2 id="paragraph2">Paragraf 2</h2>
       <p>Conținutul paragrafului 2</p>
       <h2 id="paragraph3">Paragraf 3</h2>
       <p>Conținutul paragrafului 3</p>
   </body>
</html>

Pentru a defini o legătură internă, se utilizează semnul diez (#), după care urmează id-ul elementului către care se dorește navigarea. În acest caz, navigarea va fi către titlurile h2.

Atributul target

Implicit, resursele către care duc legăturile se deschid în aceeași fereastră sau tab. Cu ajutorul atributului target, acest comportament poate fi redefinit. Atributul target poate lua următoarele valori:

_blank: deschiderea documentului HTML într-o fereastră nouă sau tab de browser
_self: deschiderea documentului HTML în același frame (sau fereastră)
_parent: deschiderea documentului în frame-ul părinte, dacă legătura este plasată într-un frame intern
_top: deschiderea documentului HTML pe întreg ecranul browserului
framename: deschiderea documentului HTML într-un frame numit framename (În acest caz, framename este doar un exemplu, numele frame-ului poate fi oricare)

De exemplu, deschiderea documentului legat într-o fereastră nouă:

<a href="http://fdc.com/web/html5/" target="_blank">Manual de HTML5</a

Valoarea _blank indică browserului că resursa trebuie deschisă într-un tab nou.

Stilizarea legăturilor

Implicit, o legătură are deja o anumită culoare (una dintre nuanțele de albastru), și de asemenea, are subliniere. La apăsare, ea devine activă și capătă o culoare roșie, iar după navigarea pe legătură, aceasta poate să se coloreze într-o altă culoare (de obicei, în mov). Această stilizare este setată de multe browsere implicit, dar noi putem să o redefinim. De exemplu:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Legături</title>
       <style>
           a:link    {color:blue; text-decoration:none}
           a:visited {color:pink; text-decoration:none}
           a:hover   {color:red; text-decoration:underline}
           a:active  {color:yellow; text-decoration:underline}
       </style>
   </head>
   <body>
       <a href="index.html">Manual de HTML5</a>
   </body>
</html>

Aici sunt definite stiluri pentru legături în diferite stări. a:link se aplică pentru legăturile în starea normală, când nu sunt apăsate și nu este plasat cursorul peste ele.

a:visited indică starea unei legături după ce a fost accesată.
a:hover indică starea unei legături când cursorul este plasat peste ea.
a:active indică o legătură în momentul apăsării.

Stilul color stabilește culoarea legăturii. Stilul text-decoration stabilește sublinierea: dacă valoarea este underline, atunci legătura este subliniată, dacă este none, atunci sublinierea lipsește.

Legătură-imagine

Plasând în interiorul elementului <a> un element <img>, putem face o legătură-imagine:

<a href="index.html">
   <img src="cover.png" alt="Tutorial HTML">
</a>