Link-uri

postat acum 2 ani de Stefanescu Mihai in categorie HTML

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.

<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.

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

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

<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>

 

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!