come aggiungere link all’interno della stessa pagina in html (anchor)

Pubblicato da progettandopc il

Creare link all’interno della stessa pagina può essere utile o addirittura indispensabile quando abbiamo articoli molto lunghi e vogliamo creare un indice o un pulsante che rimanda ad inizio pagina.

Prima di tutto dobbiamo “dare un nome” al punto della pagina che vogliamo linkare utilizzando il seguente codice:

<a name="nome">testo da linkare</a>

Per inserire il link che conduce a tale posizione dobbiamo utilizzare il seguente codice:

<a href="#nome">testo del link</a>

Dopo # va inserito lo stesso nome che abbiamo assegnato precedentemente al testo da linkare.

esempio:

Supponiamo di avere una pagina in html con la classifica dei migliori film thriller, drammatici e comici. Si vuole creare un indice ad inizio pagina dove il visitatore può essere rimandato direttamente ai migliori film thriller, drammatici o comici.

La pagina mostrata nella figura precedente ha il seguente codice html:

Per creare l’indice dobbiamo assegnare un ancora ai film thriller, drammatici e comici. Pertanto utilizziamo il seguente codice:

<a name="thriller"><h4>migliori film thriller</h4></a>

In questo specifico caso andrò ad aprire il tag <a> prima di <h4> e lo chiuderò dopo la chiusura del tag </h4>come mostra l’esempio mostrato in figura:

Ripetiamo questa operazione per tutti i parametri che vogliamo includere nel nostro indice:

1) includiamo i film drammatici:

<a name="drammatici"<h4>migliori film drammatici</h4></a>

2) includiamo i film comici:

<a name="comici"><h4> migliori film comici</h4></a>

Ora abbiamo assegnato un nome ad ogni elemento che vogliamo includere nel nostro indice.

REALIZZAZIONE DELL’INDICE

Per realizzare l’indice utilizziamo il seguente codice:

<a href="#nome">testo del link</a>

dove al posto di nome dobbiamo inserire il nome (dopo #) che abbiamo assegnato precedentemente all’ancora pertanto avremo il seguente risultato:

Link che rimanda ai migliori film thriller:

<a href="#thriller"> migliori film thriller</a>

Link che rimanda ai migliori film drammatici:

<a href="#drammatici"> migliori film drammatici</a>

Link che rimanda ai migliori film comici:

<a href="#comici">migliori film comici</a>

Unendo i 3 codici sopraindicati si avrà questo risultato:

Anchor e wordpress

Per utilizzare un Anchor con wordpress è possibile creare un blocco “html personalizzato”. Per farlo premere sul pulsante “+” e scegliere la voce “html personalizzato”.

All’interno del blocco “html personalizzato” utilizzare i codici forniti in questo articolo.