Link-uri

HTML | Stefanescu Mihai | 2020-10-11

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>

Articolul precedent

Articolul urmator

Imi place ce faci aici

Daca iti place ce fac aici imi poti cumpara o cafea

Stefanescu Mihai
Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.

Get in touch

Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum.

Posteaza un comentariu

Comentarii

Inca nu au fost postate comentarii, fii primul care posteaza un comentariu!

🔖 Bookmarks ⊞

✨ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌪️ Discord ⊞