HTML link-uri

în acest tutorial vă va învăța cum să creați link-uri către alte pagini în HTML.

crearea de linkuri în HTML

o legătură sau un hyperlink este o conexiune de la o resursă web la alta. Link-urile permit utilizatorilor să se deplaseze fără probleme de la o pagină la alta, pe orice server oriunde în lume.

o legătură are două capete, numite ancore. Linkul începe de la ancora sursă și indică ancora de destinație, care poate fi orice resursă web, de exemplu, o imagine, un clip audio sau video, un fișier PDF, un document HTML sau un element din documentul în sine și așa mai departe.

în mod implicit, linkurile vor apărea după cum urmează în majoritatea browserelor:

• un link nevizitat este subliniat și albastru.
• un link vizitat este subliniat și violet.
• o legătură activă este subliniată și roșie.

cu toate acestea, puteți suprascrie acest lucru folosind CSS. Aflați mai multe despre legăturile de styling.

sintaxa linkului HTML

linkurile sunt specificate în HTML folosind eticheta <a>.

un link sau un hyperlink ar putea fi un cuvânt, un grup de cuvinte sau o imagine.

orice dintre eticheta de deschidere <a> și eticheta de închidere </a> devine partea linkului pe care utilizatorul îl vede și face clic într-un browser. Iată câteva exemple de link-uri:

<a href="https://www.google.com/">Google Search</a><a href="https://www.tutorialrepublic.com/">Tutorial Republic</a><a href="images/kites.jpg"> <img src="kites-thumb.jpg" alt="kites"></a>

atributul href specifică ținta legăturii. Valoarea sa poate fi o adresă URL absolută sau relativă.

un URL absolut este URL-ul care include fiecare parte a formatului URL, cum ar fi protocolul, numele gazdei și calea documentului, de exemplu, https://www.google.com/, https://www.example.com/form.php etc. În timp ce adresele URL relative sunt căi relative de pagină, de exemplu, contact.html, images/smiley.png și așa mai departe. O adresă URL relativă nu include niciodată prefixul http:// sau https://.

setarea țintelor pentru linkuri

atributul target indică browserului unde să deschidă documentul legat. Există patru ținte definite și fiecare nume țintă începe cu un caracter de subliniere (_ :

• _blank — deschide documentul legat într-o fereastră sau filă nouă.
• _parent — deschide documentul legat în fereastra părinte.
• _self — deschide documentul legat în aceeași fereastră sau filă ca documentul sursă. Aceasta este valoarea implicită, prin urmare nu este necesar să specificați în mod explicit această valoare.
• _top — deschide documentul legat în fereastra completă a browserului.

încercați următorul exemplu pentru a înțelege cum funcționează practic ținta linkului:

<a href="/about-us.php" target="_top">About Us</a><a href="https://www.google.com/" target="_blank">Google</a><a href="images/sky.jpg" target="_parent"> <img src="sky-thumb.jpg" alt="Cloudy Sky"></a>

crearea ancorelor pentru marcaje

de asemenea, puteți crea ancore pentru marcaje pentru a permite utilizatorilor să treacă la o anumită secțiune a unei pagini web. Marcajele sunt utile mai ales dacă aveți o pagină web foarte lungă.

crearea marcajelor este un proces în doi pași: mai întâi adăugați atributul id pe elementul în care doriți să săriți, apoi utilizați valoarea atributului id precedată de semnul hash (#) ca valoare a atributului href al etichetei <a>, așa cum se arată în exemplul următor:

<a href="#sectionA">Jump to Section A</a><h2>Section A</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

crearea linkurilor de descărcare

de asemenea, puteți crea linkul de descărcare a fișierului exact în același mod ca plasarea linkurilor text. Doar indicați adresa URL de destinație către fișierul pe care doriți să fie disponibil pentru descărcare.

în exemplul următor am creat linkurile de descărcare pentru fișierele ZIP, PDF și JPG.

<a href="downloads/test.zip">Download Zip file</a><a href="downloads/masters.pdf">Download PDF file</a><a href="downloads/sample.jpg">Download Image file</a>