Curs Web Development
Curs HTML
Curs CSS
Curs Javascript
Curs PHP
Curs Phyton
Curs SQL
Curs SEO

Metode de creare a link-urilor

Ce este un link?

Link-urile (sau legaturile) reprezinta una dintre cele mai interesante inovații pe care web-ul le are de oferit. Ei bine, au existat încă de la începutul web-ului si ne permit să conectăm documentele noastre la orice alt document (sau altă resursă), putem să le legăm la anumite părți ale documentelor și putem face aplicațiile disponibile la o simplă adresă web. Aproape orice conținut web poate fi convertit într-un link, astfel încât, un simplu clic va face ca browser-ul web să incarce o altă adresă web (URL).

In acest capitol ne vom concentra pe crearea de link-uri. Fara link-uri nu exista WWW, lucru care denota importanta deosebita a link-urilor.

Din fericire, link-urile sunt foarte usor de creat si acest lucru se face cu ajutorul etichetei a(anchor).

Apare uneori o confuzie, legata de elementul link, in sensul in care, cel putin la prima vedere acest element pare cel mai potrivit pentru a crea un link.

Nu este deloc asa. Elementul link este utilizat pentru a solicita o resursa externa, necesara bunei functionari a unui site, ca in exemplul de mai jos:

<link href="foaie-de-stil.css" rel="stylesheet">

De fapt crearea unui link se face cu ajutorul elementului a in interiorul caruia se afla textul care va fi transformat intr-un link, ca in exemplul de mai jos:

<a>Acest text este acum un link!</a>

Pentru a deveni functional un link trebuie sa aiba o serie de atribute. Cel mai important atribut, care indica browserului, ce pagina sa deschida, dupa ce utilizatorul a facut clic pe link, este atributul href.

Un lucru amuzant este acela ca, sunt multi autori, care lucreaza de ani de zile si nu stiu ca numele acestui atribut vine de la "Hypertext Reference"(text cu referinta).

O adresă URL poate directiona către fișiere HTML, fișiere text, imagini, documente text, fișiere video și audio și orice altceva care poate fi transmis pe web. Dacă browserul web nu știe să afișeze sau să gestioneze fișierul, vă va întreba dacă doriți să deschideți fișierul (caz în care obligația de a deschide sau de a gestiona fișierul, este trecută către o aplicație nativă adecvată, de pe dispozitivul utilizat) sau descărcați fișierul (pentru mai târziu.)

Mai jos puteti vedea un exemplu de link, impreuna cu mai multe atribute:

<a href="https://www.example.com" title="Exemplu de link"  target="_blank" rel="next">Exemplu de link</a>

Sa vedem citeva din cele mai utilizate atribute:

Atributul target

Acest atribut este utilizat pentru a preciza unde va fi afisat documentul referit.

Atributul rel

Acest atribut descrie relatia dintre obiectul tinta cu obiectul de legatura. De exemplu, un link ce are atributul rel cu valoarea next, indica faptul ca acest link este o parte a unei serii de link-uri si ca vom fi redirectionati catre urmatorul link din serie.

Atributul title

Este un atribut global, ce ofera informatii suplimentare despre link. Titlul este afisat ca un "tooltip", atunci cind mouse-ul este deasupra link-ului.

Link-uri vs hyperlink-uri

Deși ambele arată la fel, există o linie subțire care separă cei doi termeni.

Un link nu este altceva decât un lanț care conectează intre ele, paginile de pe site-uri și fără link-uri nu există niciun site web. Să luăm de exemplu „https://google.com”. Când introduceți aceasta adresa în bara de adrese, veti ajunge pe site-ul web al Google. O legătură nu este altceva decât, o adresă web sau o adresă URL a unei pagini web care vă permite să vă conectați la diferite servere. Link-urile sunt utilizate pentru a conecta o pagină la alta, iar comportamentul si aspectul unei legături poate fi specificat folosind diverse atribute, dar si limbajul CSS. Aspectul unei legături se poate transforma într-o mână (o pictograma GUI), pentru a semnala că este o legătură.

Un hyperlink este un link care te duce de la un domeniu la altul prin referințe numite texte ancoră. Daca pe site-ul meu as crea un link, catre Google (cu textul ancora "Viziteaza Google"), acesta ar deveni un hyperlink. Web-ul este format dintr-un număr infinit de pagini pline cu toate tipurile de conținut și informații, iar hyperlink-ul este un instrument care leagă acele pagini între ele.

Link-urile pot fi împărțite în legături interne și externe. O legătură internă conectează două pagini din același site (pagini aflate pe acelasi domeniu), în timp ce o legătură externă este utilizată pentru a conecta două pagini web care aparțin de două site-uri web diferite.

Mai simplu spus, hyperlink-urile sunt utilizate pentru a naviga între paginile web pe aceleași site-uri sau diferite site-uri, în timp ce link-urile sunt doar adrese web.

Tipuri de link-uri

Exista două tipuri principale, link-uri relative şi link-uri absolute.

Link-uri relative

Link-urile relative sunt folosite pentru a crea legături în interiorul aceluiaşi website. Valoarea atributului href va conţine doar numele paginii, sau directorul şi numele paginii. Spre exemplu, dacă ai un site cu 3 pagini în acelaşi director (la acelasi nivel), să zicem acasa.html, servicii.html si contact.html, poţi crea de pe pagina "Acasa" spre "Contact" un link relativ de forma:

<a href="contact.html">Contact</a>

La fel de bine se poate folosi şi un link absolut, dar nu este recomandat.

Link-uri absolute

Link-urile absolute contin mai multe informatii si sunt legături ce conţin calea completă catre pagina de destinaţie, inclusiv protocolul (Hypertext Transfer Protocol) http sau https :

<a href="https://google.com" target="_blank">Viziteaza Google</a>

Atributul target="" cu valoarea _blank are rolul de a deschide link-ul intr-o pagina noua.

Identificatori de fragmente

Un identificator de fragment, este un șir scurt de caractere (string) care se referă la o resursă, care este subordonată unei alte resurse primare.

In principiu, identificatorii de fragmente se utilizeaza pentru a crea legaturi intre diferite sectiuni ale aceleiasi pagini.

În mod normal, atunci când adăugați un identificator de fragment la ancoră, veți scrie cod HTML care mapează secțiunea paginii folosind atributul, cum ar fi href="# Identificator-1" la elementul HTML cu id-ul corect, id="Identificator-1".

Link-uri de e-mail

Este posibil să creați link-uri sau butoane care, deschid un program de gestionare e-mail. Aceasta se face folosind elementul <a> și valoarea mailto, pentru atributul href.

În forma sa de bază și cea mai frecvent utilizată, un link mailto: indică adresa de e-mail a destinatarului.
De exemplu: Trimite un mail la nicaieri@gmail.com

<a href="mailto:nicaieri@gmail.com">Trimite un mail</a>

De fapt, adresa de e-mail este chiar opțională. Dacă utilizati doar „mailto:”, o nouă fereastră va fi deschisă de clientul de mail al utilizatorului, care nu are încă o adresă de destinație specificată: Trimite un mail, la ce adresa doresti

<a href="mailto:">Trimite un mail, la ce adresa doresti</a>

🧠 Quiz - HTML: Crearea link-urilor

Top