I link, letteralmente collegamenti, sono una delle caratteristiche distintive del web e si possono trovare dappertutto.

Come suggerisce il nome, servono per creare collegamenti, o connessioni, tra diverse pagine. Questo ci permette di navigare velocemente e facilmente da una pagina web all'altra.

Si possono trovare diversi tipi di link sul Web.

Ci sono link che portano da un sito web ad un altro. Ci sono link che portano da una pagina di un sito a un'altra pagina dello stesso sito. E ci sono link che portano da una sezione di un sito a un'altra sezione dello stesso sito.

Questo articolo esamina la definizione di hyperlink, o collegamento ipertestuale, e i modi con i quali creare una gamma di diversi link in HTML.

Che cos'è un hyperlink?

Un hyperlink, o collegamento ipertestuale, chiamato anche solo link o collegamento web, contiene un indirizzo per una destinazione e funge da riferimento per dei dati. Un utente può seguire facilmente un link per giungere a destinazione tramite un clic, un tap o passando sopra il link.

Un hyperlink può essere un frammento di testo, un'immagine, un'icona o un grafico che, dopo averci cliccato sopra, conduce a una diversa pagina web o un diverso documento. Può anche condurre a una sezione specifica e a un elemento all'intero della stessa pagina web o documento.

Fondamentalmente, i collegamenti ipertestuali sono puntatori cliccabili verso una risorsa.

Ad esempio, questo collegamento alla pagina iniziale di freeCodeCamp è un collegamento ipertestuale. Quando si clicca sul testo sottolineato, il browser lascia la pagina attuale e ci reindirizza lì.

Ogni risultato di ricerca di Google è un collegamento ipertestuale. Quando si clicca su uno di quelli, si lascia la pagina di ricerca e si arriva al risultato.

Senza collegamenti ipertestuali, si dovrebbe conoscere ogni singolo URL (Uniform Resource Locator, localizzatore uniforme di risorse) di ogni pagina web per poterle visitare.

Hyperlink e HTML

Un collegamento ipertestuale è un elemento di un documento HTML.

Un ipertesto è un testo che contiene collegamenti ipertestuali. Il testo che contiene il collegamento (il riferimento ai dati) viene chiamato testo di ancoraggio.divertiti a programmare

Si utilizzano elementi di ancoraggio per creare hyperlink su altre pagine web. Questi elementi creano collegamenti: un testo o un'immagine cliccabile che, quando cliccati, ci portano in una nuova pagina o in una diversa sezione della stessa pagina.

Le pagine HTML sono formate da collegamenti ipertestuali. I collegamenti sono una caratteristica essenziale e distintiva del World Wide Web, che gli hanno consentito di avere così tanto successo. Hanno permesso l'idea stessa di navigazione.

Ci permettono di collegare un documento a un altro documento su diversi computer e reti.

Inizialmente l'idea è nata dalle bibliografie e dalle note a pié di pagina nei documenti scientifici accademici, ma ciò ha portato alla possibilità di scoprire siti web di altre persone con il passare del tempo.

Gli utenti potevano cliccare per andare sulle pagine web non solo del sito web dell'autore ma anche di altri siti web di altri autori e spostarsi così da una pagina web a un'altra. Qualsiasi cosa può fungere da collegamento per un'altra cosa, rendendo facile navigare i diversi luoghi del Web. E questo ha permesso agli utenti di avere un ampio accesso alle informazioni.

Il World Wide Web è costituito da migliaia di miliardi di collegamenti ipertestuali tra pagine web, creando così qualcosa che richiama alla mente l'idea di una ragnatela molto grande.

Come creare un collegamento in HTML

Si possono creare collegamenti con l'elemento <a> , dove "a" sta per ancoraggio (anchor, in inglese).

Ecco un esempio di un elemento di ancoraggio in HTML:

<a href="https://www.freecodecamp.org/"> freeCodeCamp Home Page </a>

Vediamo da quali parti è formato:

• L'elemento di collegamento ha un tag di apertura <a> e un tag di chiusura </a> .
• Il testo che gli utenti vedono e su cui possono cliccare si trova tra i tag di apertura e chiusura a – in questo caso è freeCodeCamp Home Page. Viene chiamato testo del collegamento e dovrebbe descrivere la destinazione del collegamento.
• All'interno del tag di apertura, <a>, si aggiunge l'attributo href , che è l'abbreviazione di hypertext reference, cioè riferimento ipertestuale. Il valore dell'attributo href specifica l'URL a cui si vogliono portare gli utenti quando il testo del collegamento viene cliccato.
• Non bisogna dimenticarsi del simbolo di uguale = e delle virgolette ""  che devono sempre accompagnare l'attributo href.

I collegamenti ipertestuali hanno un aspetto predefinito diverso da quello del testo semplice. Ciò accade per questioni di fruibilità perché permette agli utenti di sapere che è appunto un collegamento.

Per impostazione predefinita, il testo avrà un colore blu e una sottolineatura. Tuttavia ciò si può cambiare, aggiungendo degli stili CSS.

Su un computer, quando si passa il mouse sopra un link, il puntatore cambia da una freccia a una mano, per indicare che è qualcosa che si può cliccare.

Questo tipo di collegamento ipertestuale nell'esempio qui sopra permette il collegamento ad altri siti. È un collegamento esterno, utilizzato per connettere due pagine di due siti web completamente diversi.

In questo caso, il valore di href è un URL assoluto – cioè un indirizzo web completo di un sito che comprende anche il nome di dominio.

Come collegarsi a una pagina diversa nello stesso sito

I collegamenti interni sono collegamenti che dirigono l'utente a pagine diverse dello stesso sito. Non conducono a siti esterni.

In questi casi, l'attributo href ha un URL relativo.

Ad esempio:

<nav>
    <ul>
        <li><a href="about.html">  Chi sono  </a> </li>
        <li><a href="posts.html">   Post del Blog </a> </li>
        <li><a href="projects.html"> I miei progetti </a>< /li>
        <li><a href="contact.html">  Contattami  </a> </li>
    </ul>
</nav>

Nell'esempio qui sopra, abbiamo creato un menu di navigazione che contiene collegamenti a diverse pagine dello stesso sito. I collegamenti conducono rispettivamente alle pagine "Chi sono", "Post del Blog", "I miei progetti", e "Contattami".

In questo caso, non dobbiamo specificare il nome di dominio e l'URL completo nell'attributo href , perché i percorsi di questi file sono relativi al nostro progetto e alla cartella di lavoro attuale.

In questo caso tutti i file si trovano nella stessa cartella e hanno la stessa struttura gerarchica, quindi è sufficiente scrivere solo il nome dei file.

Come creare un collegamento a una sezione specifica di un sito

E se volessimo un collegamento per saltare a un punto specifico di una pagina?

Magari abbiamo citato un argomento e vogliamo rinviare i lettori a una sezione successiva della pagina nella quale ne parliamo più in dettaglio.

Possiamo creare collegamenti che connettono contenuti nella stessa pagina.

Innanzitutto, dobbiamo andare nella sezione a cui vogliamo che il collegamento porti e dobbiamo aggiungere l'attributo id nell'etichetta di apertura.

Ad esempio potremmo avere un paragrafo a cui vogliamo fare riferimento:

<p id="extra-info"> Le migliori città da visitare </p>

Poi, nel nostro collegamento, aggiungiamo un # in fondo e scriviamo il valore cha abbiamo dato all'attributo id, in questo caso extra-info:

<a href="#extra-info"> Leggi informazioni aggiuntive sulle città da visitare </a>

Come aprire un collegamento in una nuova scheda

Quando un collegamento indirizza a un sito esterno, è una buona regola far sì che si apri in una nuova scheda. Non vogliamo perdere i nostri visitatori.

Per impostazione predefinita, il browser apre i collegamenti nella stessa scheda.

Possiamo cambiare questo collegamento:

<a href= "https://www.freecodecamp.org/"> freeCodeCamp Home Page </a>

In questo:

<a href= "https://www.freecodecamp.org/" target="_blank"> freeCodeCamp Home Page </a>

Possiamo aggiungere l'attributo target al tag di apertura <a>, e assegnargli il valore _blank che apre il collegamento in una nuova scheda.

Come creare collegamenti per inviare email

I collegamenti possono compiere altre azioni, a parte il semplice rimando ad altre pagine o siti web.

Ad esempio, ci sono collegamenti che aprono il programma predefinito di posta elettronica e permettono di inviare un nuovo messaggio di posta a un indirizzo specifico.

<a href="mailto:hellothere@gmail.com">Inviami un'email!</a>

In questo caso, l'attributo href inizia con mailto: e contiene poi l'indirizzo email a cui vogliamo che venga mandato un messaggio.

Il collegamento non appare diverso da qualsiasi altro collegamento di cui abbiamo discusso fin qui. Ma quando viene cliccato, permette di iniziare a scrivere un messaggio di posta aprendo il programma di posta predefinito dell'utente.

Quando questo accade, il campo A è già precompilato con l'indirizzo email al quale si vuole inviare il messaggio.

Conclusione

In questo articolo, abbiamo visto la definizione di un hyperlink, o collegamento ipertestuale, e e il motivo per cui questi collegamenti sono una parte così importante del Web.

Abbiamo anche imparato a creare diveri tipi di collegamenti in HTML.

Grazie per la lettura e buona programmazione!