Programmazione Web » Html » Link interni alla pagina: l'ancoraggio
Link interni alla pagina: l'ancoraggio
Difficoltà:
Scritto da Michele Sassi
Sito Web: http://www.comefaccio.net 
Questo tutorial è stato letto 1092 volte
Realizzare un collegamento interno alla pagina è semplicissimo e porta un notevole vantaggio all'utente...
Rendiamo subito l'idea di cosa sia l' ancoraggio con un esempio... Supponiamo che una nostra pagina web sia divisa in sezioni e che all'utente non interessi leggere tutta la pagina, ma solo l'ultima sezione. Per evitare all'utente il fastidioso (nonchè interminabile) scrolling della pagina per arrivare alla sezione da lui interessata possiamo creare un indice che faccia "schizzare" la pagina al punto interessato!
Per indicare qual è il punto in cui la pagina deve schizzare abbiamo bisogno di un'ancora... il codice per inserirla è questo:
<a name="sezione5"></a>
dove "sezione5" è il nome dell'ancora a cui puntare.
All'inizio della pagina, invece, creeremo l'indice delle sezioni con i relativi collegamenti che puntano alle ancore create in precedenza! Ecco il codice per creare il link:
<a href="#sezione5">Vai alla sezione n. 5 </a>
Cliccando sul link l'utente passerà direttamente alla sezione 5, senza dover leggere, o per lo meno "scrollare", le sezioni da 1 a 4.
Vi porto un esempio del codice html di una pagina realizzata con la tecnica dell' ancoraggio.
<p><a name="top"></a> INIZIO PAGINA</p>
<p><a href="#sezione1">Vai alla sezione n. 1</a><br>
<a href="#sezione2">Vai alla sezione n. 2</a> <br>
<a href="#sezione3">Vai alla sezione n. 3</a> <br>
<a href="#sezione4">Vai alla sezione n. 4</a> <br>
<a href="#sezione5">Vai alla sezione n. 5</a> </p>
<p> </p>
<p><a name="sezione1"></a>SEZIONE N. 1</p>
<p>Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 Testo della sezione n. 1 </p>
<p><a name="sezione2"></a>SEZIONE N. 2 </p>
<p>Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 Testo della sezione n. 2 </p>
<p><a name="sezione3"></a>SEZIONE N. 3</p>
<p>Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 Testo della sezione n. 3 </p>
<p><a name="sezione4"></a>SEZIONE N. 4</p>
<p>Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 Testo della sezione n. 4 </p>
<p><a name="sezione5"></a>SEZIONE N. 5</p>
<p>Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 Testo della sezione n. 5 </p>
<p align="right"><a href="#top">Torna su</a> </p>
Alla prossima.
Aggiungi questo tutorial ai preferiti
