Un site web este o colecție de pagini web. Și aceste pagini trebuie să fie legate sau conectate de ceva. Și pentru a face acest lucru, trebuie să folosim o etichetă furnizată de HTML: a etichetă.

Această etichetă definește un hyperlink, care este utilizat pentru a lega de la o pagină la alta. Iar cel mai important atribut al a elementul este href atribut, care indică destinația linkului.

În acest ghid, vă voi arăta cum să creați hyperlinkuri HTML folosind href atribut pe a etichetă.

  • Ce este un link?
  • Cum se creează legături interne
  • Navigați la pagini de la același nivel
  • Răsfoiți la paginile aflate în alt folder
  • Răsfoiți de la o pagină situată într-un folder la rădăcină
  • Cum se creează linkuri externe
  • Cum se creează legături de ancorare
  • Navigați pe aceeași pagină
  • Navigați pe altă pagină
  • Concluzie

Un link este un text pe care se poate face clic, care vă permite să navigați de la o pagină la alta sau către o altă parte a aceleiași pagini.

În dezvoltarea web, există mai multe modalități de a crea link-uri, dar cea mai comună este folosirea a etichetă și href atribut. Acesta este ultimul loc în care specificăm adresa de destinație a linkului.

a eticheta ne ajută să creăm trei tipuri principale de linkuri: un link intern, un link extern și un link ancoră. Acestea fiind spuse, acum ne putem scufunda în cum să creăm un link intern în secțiunea următoare.

Când vine vorba de construirea unui site web, este logic să aveți o conexiune între pagini. Și atâta timp cât aceste linkuri ne permit să navigăm de la pagina A la pagina B, se numește link intern (deoarece se află întotdeauna în același nume de domeniu sau pe același site web). Deci, un link intern este un link care permite navigarea către o altă pagină de pe un site web.

Acum, având în vedere că dosarul nostru este structurat după cum urmează:

├── folder1
|  └── page2.html
├── page1.html
├── index.html

Aici avem trei cazuri de utilizare și, pentru fiecare, vom crea un exemplu.

Navigați la pagini de la același nivel

  • index.html
<a href="https://www.freecodecamp.org/news/how-to-make-html-hyperlinks-using-the-href-attribute-on-tags/page1.html">Browse to Page 1</a>

După cum puteți vedea, pagina page1.html este la același nivel, deci calea href atributul este doar numele paginii.

Răsfoiți la paginile situate într-un alt folder

  • page1.html
<a href="https://www.freecodecamp.org/news/how-to-make-html-hyperlinks-using-the-href-attribute-on-tags/./folder1/page2.html">Browse to Page 2</a>

Aici avem un caz de utilizare diferit, deoarece pagina pe care dorim să o vizităm nu se află acum la același nivel. Și pentru a putea naviga la acea pagină, ar trebui să specificăm calea completă a fișierului, inclusiv folderul.

Grozav! Să ne scufundăm acum în ultimul caz de utilizare.

Răsfoiți de la o pagină situată într-un folder la rădăcină

  • page2.html
<a href="https://www.freecodecamp.org/news/how-to-make-html-hyperlinks-using-the-href-attribute-on-tags/index.html">Browse to the Home Page</a>

Acum, aici pentru a naviga la index.html pagina, ar trebui mai întâi să urcăm un nivel înainte de a putea naviga la acea pagină.

Acum am acoperit legăturile interne, așa că haideți să trecem mai departe și să vă prezentăm cum să navigați către legături externe.

Este întotdeauna util să aveți posibilitatea de a naviga și către site-uri web externe.

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

După cum puteți vedea aici, pentru a naviga la Google, trebuie să îi specificăm adresa URL către href atribut.

Legăturile externe și interne sunt folosite pentru a naviga de la pagina A la pagina B. Cu toate acestea, uneori dorim să rămânem pe aceeași pagină și să navigăm la o anumită parte. Și pentru a face acest lucru, trebuie să folosim ceva numit ancoră, să ne scufundăm în secțiunea următoare.

O legătură de ancorare este puțin mai specifică: ne permite să navigăm de la punctul A la punctul B rămânând în aceeași pagină. Poate fi folosit și pentru a accesa o parte din altă pagină.

<a href="https://www.freecodecamp.org/news/how-to-make-html-hyperlinks-using-the-href-attribute-on-tags/#about">Go to the anchor</a>
<h1 id="about"></h1>

Comparativ cu celelalte, acesta este puțin diferit. Într-adevăr este, dar funcționează în același mod.

Aici, în loc de un link de pagină, avem o referință la un element. Când facem clic pe link, acesta va căuta un element cu același nume fără hashtag (about). Dacă găsește acel ID, navighează la acea parte.

<a href="https://www.freecodecamp.org/news/how-to-make-html-hyperlinks-using-the-href-attribute-on-tags/page1.html#about">Go to the anchor</a>

Acesta este cam același cu exemplul anterior, cu excepția faptului că trebuie să definim pagina în care dorim să răsfoim și să adăugăm ancora la ea.

Concluzie

href este cel mai important atribut al a etichetă. Ne permite să navigăm între pagini sau doar o anumită parte a unei pagini. Sperăm că acest ghid vă va ajuta să construiți un site web cu numeroase linkuri.

Mulțumesc pentru lectură.

Simțiți-vă liber să ajungeți la mine!

STARE DE NERVOZITATE BLOG BULETIN INFORMATIV GITHUB LINKEDIN CODEPEN DEV

Fotografie de JJ Ying pe Unsplash