Un site web este format din mai multe informații care există în secțiuni diferite și pe pagini diferite din cadrul acestuia.

Unele informații referitoare la site-ul web pot fi găsite și pe paginile care se află pe un alt site web.

Toate aceste secțiuni și pagini sunt legate împreună în HTML folosind href atribut.

În acest articol, vom analiza termenul Hyperlink. Apoi vom afla despre diferitele moduri de a crea hyperlinkuri, ce href face și cum să utilizați în mod corespunzător href atribut pentru legarea secțiunilor și a paginilor.

În HTML, există diverse forme de legături. În imagini, există src atributul de a „lega” sursa unei imagini.

Pentru foi de stil, există link etichetați cu href atributul de a „lega” sursa unei foi de stil.

Pentru etichetele de ancorare, există href atribuiți să „legați” secțiunea sau pagina de referință. Link-urile de ancorare se mai numesc și hyperlinkuri.

Când un utilizator urmărește un hyperlink, se spune că navighează. Hiperlinkurile sunt elemente care fac referire la un alt document, astfel încât atunci când un utilizator face clic pe acel element, acestea sunt direcționate către noul document.

După cum sa menționat mai sus, este posibil să doriți să legați pagini (pe site sau extern) sau secțiuni dintr-un site web.

În acest articol, voi evidenția trei moduri de a crea hyperlinkuri. Aceste câteva modalități sunt importante de cunoscut deoarece determină valorile href atribut.

Bine, să ne uităm acum la aceste trei moduri diferite.

1. Conectarea secțiunilor unei pagini

S-ar putea să utilizați această metodă, de exemplu, atunci când creați o pagină cu un cuprins așa cum vedeți în imaginea de mai jos:

[…image]

În acest caz, este posibil să nu doriți ca cititorii dvs. să fie nevoiți să derulați în jos până la ultima secțiune. Ar fi frumos dacă ar putea face clic pe el în cuprins și browserul le-ar duce acolo direct.

Acest tip de legătură apare în același document și duce cititorul la secțiuni diferite. Vom învăța cum să creăm un hyperlink pentru acest caz de utilizare când vom afla despre href atribut.

2. Conectarea la o altă pagină din cadrul unui site web

Pe site-ul dvs., este posibil să aveți o pagină de pornire, despre pagină, pagină de servicii și alte tipuri de pagini. Această metodă îi ajută pe utilizatori să navigheze de la o pagină la alta.

3. Conectarea la pagini externe

Uneori, site-ul dvs. web poate să nu conțină anumite informații, iar un alt site web le poate conține. În astfel de cazuri, vă recomandăm să faceți referire la celălalt site web.

Pentru a face acest lucru, ați crea un hyperlink extern care navighează utilizatorul către celălalt site web.

Acestea sunt cele trei modalități majore de conectare a paginilor. Să vedem acum cum href atributul vă poate ajuta să le activați.

href atribut

href este un atribut folosit pentru a face referire la un alt document. Poate fi găsit pe link etichete și anchor Etichete.

href atributul este utilizat pe etichetele de ancorare (a) pentru a crea hyperlinkuri pe site-uri web. Valoarea atributului conține adresa URL către care indică hyperlinkul. Se folosește așa:

<a href="URL">Hyperlink</a>

Cu toate acestea, valorile URL pot fi diferite în funcție de ceea ce indicați. Pentru cele trei moduri în care ne-am uitat mai devreme, să vedem cum href poate fi utilizat.

1. Cum se folosește href pentru a lega secțiuni dintr-un document

În acest caz, valoarea va fi id a elementului care pornește secțiunea. Asta înseamnă că vom avea așa ceva:

<a href="#second-section">Go to second section</a>
<!--
  Some stuffs here
 -->
<section id="second-section">
	<h2>Second section</h2>
</section>

Când se face clic pe hyperlinkul „Mergi la a doua secțiune”, browserul derulează în jos până la secțiunea asociată id. De asemenea, URL-ul din bara URL a browserului se modifică.

De exemplu, dacă adresa URL anterioară a fost mywebsite.com, noua adresă URL va fi mywebsite.com#second-option.

2. Cum se folosește href pentru a lega pagini dintr-un site web

A folosi href în acest fel, trebuie să înțelegeți ce sunt adresele URL relative și adresele URL absolute.

Adresele URL relative sunt adrese URL scurte care indică un document de pe același site web. Mai degrabă, de unde ești, cum ajungi în acest alt loc de pe același site web?

Acest lucru este în contrast cu adresele URL absolute. Pentru acestea, nu vă preocupă locul în care vă aflați în prezent – furnizați detaliile complete pentru a ajunge într-un alt loc așa cum ați început de la început.

Pentru navigațiile între paginile care trăiesc pe un site web, puteți utiliza oricare dintre aceste adrese URL, dar adresele URL relative sunt utilizate în mod obișnuit.

Spuneți că sunteți pe pagina principală și doriți să faceți referire la pagina despre. Iată cum să utilizați href atribut de a face asta:

<a href="https://www.freecodecamp.org/about" >About page</a>

Din pagina de pornire (să zicem mywebsite.com), linkul de mai sus va naviga la mywebsite.com/about.

Există ceva demn de remarcat la slash (/) înainte de link. / îi spune browserului să adauge linkul către rădăcina site-ului (care este domeniul). Deci rădăcina este mywebsite.com iar linkul este atașat astfel: mywebsite.com/about.

Dacă linia oblică era absentă (<a href="https://www.freecodecamp.org/news/html-link-code-how-to-insert-a-link-to-a-website-with-href-3/about">), browserul ar înlocui calea curentă cu /about.

De exemplu, dacă am fi în prezent mywebsite.com/projects/generatorși am avut următoarele link-uri:

<a href="https://www.freecodecamp.org/news/html-link-code-how-to-insert-a-link-to-a-website-with-href-3/about">About 1</a>
<a href="https://www.freecodecamp.org/about">About 2</a>

„Aproximativ 1” ar naviga la mywebsite.com/projects/about (înlocuind calea curentă /generator) și „Despre 2” ar naviga la mywebsite.com/about

3. Cum se folosește href pentru a face link către pagini de pe alt site web

Întrucât se află pe un alt site web, nu putem folosi URL-uri relative. Pentru aceasta, trebuie să specificăm sursa absolută a documentului la care facem referire.

De exemplu, să spunem că suntem mywebsite.com, și vrem să facem referire google.com, așa am face-o cu href:

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

Dacă am fi scris doar google.com, browserul îl va trata ca pe o pagină dintr-un site web, adăugându-l astfel mywebsite.com.

Concluzie

În acest articol, am văzut cum href atributul ne permite să creăm diferite tipuri de linkuri. Aceste diverse linkuri arată diferitele moduri în care documentele / paginile pot fi referite în cadrul unui site web.