Link-uri

O pagina web poate contine mai multe link-uri ce te duc la alte pagini sau chiar la anumite sectiuni din alte pagini. Acestea sunt cunoscute ca si hyperlink-uri.

Hyperlink-urile le permit vizitatorilor sa navigheze intre paginile website-ului doar dand click pe anumite cuvinte, fraze sau imagini.

Un link poate fi creat in HTML cu ajutorul tag-ului <a>. Acesta se numeste anchor tag si tot ce este pus intre <a>si </a> face parte din link.

1	`<a href="adresa URL">Text Link</a>`

Atributul Target

Putem folosi un atribut numit target ce ne ajuta sa specificam locatia de deschidere a link-ului.

Optiune	Descriere
_blank	Se deschide intr-un tab nou
_self	Se dechide in tab-ul curent
_parent	Se dechide in tab-ul parinte
_top	Se dechide intr-o fereastra
targetframe	Se deschide intr-un anumit frame

<!DOCTYPE html>
<html>
<head>
<title>Exmple Hyperlink</title>
<base href="http://invata-programare.ro/">
</head>
<body>
<p>Mai jos este lista de link-uri</p>
<a href="/toate-lectiile-html" target="_blank">Link _blank</a> |
<a href="/toate-lectiile-html" target="_self">Link _self</a> |
<a href="/toate-lectiile-html" target="_parent">Link _parent</a> |
<a href="/toate-lectiile-html" target="_top">Link _top</a>
</body>
</html>

Exemplul de mai sus va avea urmatorul efect:

Mai jos este lista de link-uri

Link _blank | Link _self | Link _parent | Link _top

Base

Cand link-urile tale HTML leaga acelasi site nu este necesar sa scrieti fiecare URL-ul complet pentru fiecare link. Puteti scapa de acest URL complet folosind tag-ul <base> in headerul documentului vostru HTML. Acest tag da o cale completa tuturor link-urilor.

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="http://www.invata-programare.ro/">
</head>
<body>
<p>Link:</p>
<a href="/toate-lectiile-html" target="_blank">Tutorial HTML</a>
</body>
</html>

Link catre o anumita sectiune a paginii

Puteti face un link catre o anumita sectiune a unei pagini web folosind atributul name.

Prima data facem un link de forma aceasta intr-o zona a paginii in care doriti sa ajungeti.

1	`<h1>Tutorial link-uri HTML <a name="top"></a> </h1>`

Apoi faceti un link care sa se termine in #numele_dat_in_name:

1	`<a href="/learn-html/link-uri-2#top">Mergi sus</a>`

Rezultat:

Mergi sus

Setare Culoare Link

Chiar daca va recomand sa setati culorile link-urilor din CSS (Lectie CSS despre Link-uri) am sa va invat sa faceti asta si din HTML.

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="http://invata-programare.ro/">
</head>
<body alink="#54A250" link="#040404" vlink="#F40633">
<p>Linkuri</p>
<a href="/toate-lectiile-html" target="_blank" >Cursuri HTML</a>
</body>
</html>