I Link in Html

I collegamenti ipertestuali

Una delle caratteristiche fondamentali del Web è la possibilità di collegare documenti e risorse differenti.

Un link, chiamato anche collegamento ipertestuale, è un elemento che permette all’utente di passare da una risorsa a un’altra selezionando un testo, un’immagine o un altro contenuto.

Per esempio, dalla pagina principale di un sito possiamo raggiungere una pagina dedicata ai prodotti:

index.html
     |
     | link
     v
prodotti.html

Oppure possiamo raggiungere un sito web esterno:

index.html
     |
     | link
     v
https://www.example.com

Concetto fondamentale

I collegamenti permettono di costruire la navigazione di un sito web. Senza link, le pagine HTML sarebbero documenti separati senza un percorso diretto per passare dall’uno all’altro.

Il tag a

In HTML un collegamento ipertestuale viene creato mediante il tag <a>.

In HTML un collegamento ipertestuale viene creato mediante il tag <a>.

La lettera a deriva dalla parola inglese anchor.

La sintassi fondamentale è:

<a href="destinazione">Testo del link</a>

Esempio:

<a href="contatti.html">Vai ai contatti</a>

Cosa vede l’utente

Nel browser viene visualizzato il testo Vai ai contatti. Se l’utente seleziona il collegamento, il browser tenta di aprire il file contatti.html.

Parte	Significato
<a	Inizio del tag che definisce il collegamento.
href="contatti.html"	Specifica la destinazione del collegamento.
>	Chiude il tag di apertura.
Vai ai contatti	È il contenuto visibile e selezionabile.
</a>	Chiude il collegamento.

L’attributo href

Il tag a identifica il collegamento, mentre l’attributo href specifica dove deve portare il collegamento.

Il tag a identifica il collegamento, mentre l’attributo href specifica dove deve portare il collegamento.

<a href="pagina.html">Apri la pagina</a>

Possiamo leggere questa istruzione nel seguente modo:

<a href="pagina.html">Apri la pagina</a>

a = crea un collegamento;
href = indica la destinazione;
pagina.html = risorsa da raggiungere;
Apri la pagina = testo selezionabile dall’utente.

Il contenuto di href cambia in base alla posizione della risorsa che vogliamo raggiungere.

Collegare due file nella stessa cartella

Il caso più semplice si verifica quando il documento corrente e quello da raggiungere si trovano nella stessa cartella.

Il caso più semplice si verifica quando il documento corrente e quello da raggiungere si trovano nella stessa cartella.

Consideriamo questa struttura:

sito/
├── index.html
├── prodotti.html
└── contatti.html

Da index.html possiamo raggiungere prodotti.html scrivendo:

<a href="prodotti.html">Prodotti</a>

Per raggiungere contatti.html:

<a href="contatti.html">Contatti</a>

Regola

Se il file di partenza e il file di destinazione si trovano nella stessa cartella, è sufficiente indicare in href il nome del file di destinazione.

Collegare un file in una sottocartella

Se il file da raggiungere si trova in una sottocartella, href deve contenere anche il nome della cartella.

Consideriamo:

sito/
├── index.html
└── pagine/
    ├── prodotti.html
    └── contatti.html

Da index.html possiamo raggiungere prodotti.html con:

<a href="pagine/prodotti.html">Prodotti</a>

E contatti.html con:

<a href="pagine/contatti.html">Contatti</a>

Come leggere il percorso

pagine/contatti.html
   |         |
   |         +-- file da raggiungere
   |
   +-- cartella da aprire

Tornare alla cartella superiore

Consideriamo la stessa struttura:

sito/
├── index.html
└── pagine/
    └── contatti.html

Se ci troviamo nel file contatti.html e vogliamo tornare a index.html, dobbiamo prima risalire dalla cartella pagine alla cartella sito.

Per risalire di un livello si utilizza:

../

Il collegamento diventa quindi:

<a href="../index.html">Torna alla Home</a>

Interpretazione

sito/
├── index.html  <----------------+
│                               |
└── pagine/                     |
    └── contatti.html -- ../ ---+

La sequenza ../ significa: risali alla cartella superiore.

Punto di partenza

Un percorso relativo deve essere calcolato partendo dalla posizione del file HTML che contiene il link, non dalla posizione generale del progetto.

Collegamenti verso siti esterni

Il tag a può collegare una pagina anche a una risorsa presente su un altro sito web.

In questo caso si utilizza normalmente un URL assoluto, cioè un indirizzo completo.

<a href="https://www.example.com">Visita il sito</a>

Tipo di collegamento	href	Esempio di utilizzo
File nella stessa cartella	`prodotti.html`	Pagina dello stesso sito.
File in una sottocartella	`pagine/prodotti.html`	Pagina interna organizzata in una directory.
File nella cartella superiore	`../index.html`	Ritorno a una pagina collocata al livello precedente.
Sito esterno	`https://www.example.com`	Risorsa disponibile su un altro sito.

L’attributo target

Per impostazione predefinita, quando viene selezionato un link, la nuova risorsa viene aperta nello stesso contesto di navigazione.

L’attributo target permette di specificare un comportamento differente.

Il valore _blank viene utilizzato per richiedere l’apertura della destinazione in un nuovo contesto di navigazione, normalmente una nuova scheda.

<a href="https://www.example.com" target="_blank">
    Apri il sito
</a>

Per i collegamenti esterni aperti con target="_blank" è possibile specificare anche:

<a href="https://www.example.com"
   target="_blank"
   rel="noopener noreferrer">
    Apri il sito
</a>

Uso di target

Per i collegamenti tra le pagine dello stesso sito è normalmente sufficiente il comportamento predefinito. target="_blank" deve essere utilizzato quando l’apertura in un nuovo contesto è realmente utile.

Creare un semplice menu

I collegamenti vengono spesso utilizzati insieme alle liste HTML per costruire semplici menu di navigazione.

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="prodotti.html">Prodotti</a></li>
    <li><a href="contatti.html">Contatti</a></li>
</ul>

In questa struttura ogni elemento della lista contiene un collegamento:

ul
|
+-- li
|   +-- a -> index.html
|
+-- li
|   +-- a -> prodotti.html
|
+-- li
    +-- a -> contatti.html

Separazione dei ruoli

La lista organizza le voci del menu. Il tag a rende ogni voce un collegamento verso una destinazione.

LABORATORIO

Creare un piccolo sito navigabile

L’obiettivo dell’attività è realizzare un piccolo sito composto da tre pagine e utilizzare il tag a per permettere la navigazione tra i documenti.

Software: editor di testo e browser

L’obiettivo dell’attività è realizzare un piccolo sito composto da tre pagine e utilizzare il tag a per permettere la navigazione tra i documenti.

Passo 1 - Creare la struttura del progetto

Creare una cartella denominata miosito.

All’interno creare i seguenti file:

miosito/
├── index.html
├── prodotti.html
└── contatti.html

Passo 2 - Creare index.html

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
</head>

<body>

    <h1>Il mio sito</h1>

    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="prodotti.html">Prodotti</a></li>
        <li><a href="contatti.html">Contatti</a></li>
    </ul>

    <h2>Benvenuto</h2>

    <p>
        Questa è la pagina principale del sito.
    </p>

</body>

</html>

Verifica

Aprendo index.html nel browser devono essere visualizzati tre collegamenti: Home, Prodotti e Contatti.

Passo 3 - Creare prodotti.html

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prodotti</title>
</head>

<body>

    <h1>Prodotti</h1>

    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="prodotti.html">Prodotti</a></li>
        <li><a href="contatti.html">Contatti</a></li>
    </ul>

    <p>In questa pagina vengono presentati i prodotti.</p>

</body>

</html>

Passo 4 - Creare contatti.html

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contatti</title>
</head>

<body>

    <h1>Contatti</h1>

    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="prodotti.html">Prodotti</a></li>
        <li><a href="contatti.html">Contatti</a></li>
    </ul>

    <p>In questa pagina vengono visualizzate le informazioni di contatto.</p>

</body>

</html>

Passo 5 - Provare la navigazione

Aprire index.html nel browser e verificare tutti i collegamenti.

Risultato atteso

Home deve aprire index.html.
Prodotti deve aprire prodotti.html.
Contatti deve aprire contatti.html.
Da ogni pagina deve essere possibile raggiungere le altre pagine.

Passo 6 - Aggiungere un collegamento esterno

Nella pagina index.html aggiungere un collegamento verso un sito esterno scelto per l’esercitazione.

<p>
    <a href="https://www.example.com"
       target="_blank"
       rel="noopener noreferrer">
        Visita il sito esterno
    </a>
</p>

Salvare il documento, aggiornare il browser e verificare il comportamento del collegamento.

Errori comuni

Problema	Possibile causa	Controllo
Il link non apre la pagina	Nome del file errato	Controllare il valore dell’attributo href.
Il browser segnala che il file non esiste	Percorso relativo errato	Controllare la posizione del documento corrente e della destinazione.
Il collegamento a una sottocartella non funziona	Manca il nome della cartella	Utilizzare una forma come pagine/contatti.html.
Non è possibile tornare alla cartella superiore	Manca ../ nel percorso	Utilizzare ../ per ogni livello da risalire.
Il sito esterno non viene raggiunto	URL incompleto o errato	Controllare l’indirizzo completo, compreso https://.
Il testo successivo diventa parte del link	Manca il tag di chiusura	Controllare la presenza di </a>.

Strategia di controllo

Quando un collegamento locale non funziona, non modificare il percorso casualmente. Individua prima il file che contiene il link, poi individua il file da raggiungere e ricostruisci il percorso tra i due.

Verifica rapida

Domande di controllo

Quale tag HTML viene utilizzato per creare un link?
Che cosa significa il nome a?
A cosa serve l’attributo href?
Come si collega una pagina presente nella stessa cartella?
Come si raggiunge una pagina presente in una sottocartella?
Che cosa significa ../ in un percorso relativo?
Qual è la differenza tra un percorso relativo e un URL assoluto?
A cosa serve target="_blank"?
Quale tag chiude un collegamento HTML?

Sviluppo Web

I Link

Introduzione ai collegamenti ipertestuali HTML mediante il tag a e l’attributo href, con collegamenti tra pagine locali e siti esterni.