Come creare dei link interni a una pagina web.

Come creare dei link interni alle varie pagine web con gli identificatori di frammento e i cancelletti o marcatori di hashtag.

Voi tutti certamente saprete che si possono creare dei collegamenti a una qualsiasi pagina web usando questo tag <a href="URL_LINK">Testo di ancoraggio</a>. Se si inserisce un tale tag in un post sarà visibile solo quello che viene definito testo di ancoraggio o anchor text che sarà cliccabile e che aprirà la pagina di cui è stato inserito l'URL.

Nell'articolo appena scritto sulle forme geometriche create con il CSS ho inserito delle demo posizionate tutte nella stessa URL ma con la pagina che si apre in corrispondenza della forma linkata. Questo ha suscitato l'interesse di un lettore che me lo ha palesato in un commento. Per mostrare il meccanismo forse è opportuno fare un esempio pratico. La pagina in cui sono visibili tutte queste demo ha l'indirizzo http://blog-statico.blogspot.it. Per la demo di una stella a 6 punte ho messo questo link

http://blog-statico.blogspot.it#star-six1

con un cancelletto e una aggiunta all'URL della pagina. Affinché questo collegamento porti proprio nel punto desiderato occorre mettere un selettore nel testo di arrivo

<h3 id="star-six1">Stella a 6 Punte</h3>

In questo modo se si clicca il link la pagina si aprirà esattamente nel punto in cui è presente quel selettore id. Guardando le cose dal punto di vista generico è possibile per esempio suddividere un articolo in più capitoli per poi linkare esattamente i loro inizi. Se si tratta dell'homepage di un blog di Blogger potrebbe venire aggiunta una slash nell'URL in questo modo

http://blog-statico.blogspot.it/#star-six1

ma la slash non deve essere aggiunta quando si tratta di un URL di una pagina di un post o di una etichetta. Nell'esempio precedente ho usato il tag <h3> ma si possono usare anche i tag <p>, <div>, <span> o <li>. Bisogna fare attenzione ad alcune cose

1. Il selettore id deve essere unico
2. Se si linkano parti del testo che stanno alla fine della pagina ovviamente queste non potranno mai essere al top della stessa.

Dopo aver suddiviso il post in sezioni occorre inserire i vari selettori per ciascuna sezione. Poniamo che si siano usati i paragrafi invece dei titoli

<p id="sezione1">Inizio della prima sezione …..  </p>

<p id="sezione2">Inizio della seconda sezione … </p> 

<p id="sezione3">Inizio della terza sezione …      </p>

Per linkare una singola sezione in questa pagina dovremo usare questa sintassi

<a href="URL_DELLA_PAGINA#sezionex">Sezione X</a>

dove ovviamente al posto di sezionex dobbiamo mettere sezione1, sezione2 o sezione3. Si possono mettere questi Segnalibri anche a oggetti generici come potrebbero essere delle immagini anche in presenza di altre classi di stile. Ritornando all'esempio precedente delle forme geometriche il titolo di ciascuna demo segue la regola della classe .titolowidget. Per inserire il selettore id ho quindi usato il codice

<p class='titolowidget' id='star-six1'>STELLA 6 PUNTE</p>

Chi non ha ancora sufficiente esperienza con l'HTML e CSS può scaricare il mio ebook gratuito "Guida all'HTML e al CSS" per avere una conoscenza propedeutica su questi linguaggi di markup.

COME CREARE DEI LINK NELLA PAGINA CORRENTE

Dopo aver visto come linkare un determinato capitolo o oggetto vediamo come sia anche possibile linkare un elemento della pagina corrente. Questo può essere utile nei post molto lunghi per mandare il lettore esattamente nel capitolo linkato. Come sempre gli esempi chiariscono più di mille parole. Ho inserito il titolo precedente con questo codice

<h3 id="linkpagina">COME CREARE DEI LINK NELLA PAGINA CORRENTE</h3>

Se adesso creo un link con questa sintassi

<a href="#linkpagina">Testo di ancoraggio</a>  - link alla sezione

chi ci cliccherà sopra si troverà al top della pagina proprio questa sezione. In sostanza se non si mette l'URL della pagina di destinazione ma si inserisce solo il cancelletto seguito da un determinato id si possono linkare determinati capitoli del post che stiamo editando. Mi scuso con i lettori con più conoscenze informatiche per aver usato una terminologia non corretta. In realtà il cancelletto # dovrebbe chiamarsi marcatore hash mentre il tag successivo identificatore di frammento o Fragment-id. Il cancelletto da solo può essere omesso. Mi risulta che tutti i browser più moderni riescano a indirizzare correttamente questi Link verso punti specifici ma non ho testato e quindi potrebbe non essere così.

COME MONITORARE I CLICK SU UN LINK DI UN FRAMMENTO

Attraverso un servizio come Goo.gl si possono conteggiare i click verso un qualsiasi indirizzo generando un VanityURL. Si può fare lo stesso anche per un URL frammentato visto che si possono creare dei VanityURL specifici per ogni sezione in funzione dei diversi identificatori di frammento.