Link-uri

postat acum 3 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!
Comentariu postate de Garaj Nicu la data de 06.07.2018
Poți folosi orice html redactor
Comentariu postate de Free Slots la data de 05.11.2018
Agree with the above comment.