Link-uri
Stefanescu Mihai 3 years ago HTMLO 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:
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>