Anchors HTML5 – Quando name diventa id

25 ottobre 2016 , In: *Brevi., Siti internet
0
Anchor HTML5

Le ancore: utilissime soprattutto in lunghi testi, in cui si vuole agevolare l’utente.
O quando si vuole linkare ad una parte specifica del testo.

Un tempo la forma delle anchors era:
<a href=”#anchorname”>bottone</a> per il bottone cliccabile
<h1 name=”anchorname”>destinazione</h1> per il punto del testo in cui si voleva far arrivare l’utente.

 

Anchors HTML5 : ora si usa l’attributo id

Oggi, con HTML5, le ancore si creano, molto semplicemente così:
<a href=”#anchorname”>bottone</a> per il bottone cliccabile
<h1 id=”anchorname”>destinazione</h1> per il punto del testo in cui si voleva far arrivare l’utente.

Se il bottone deve portare da una pagina ad un punto specifico di un’altra pagina, sarà così formato: a href=”http://www.sito.it#anchorname”>bottone</a>

 

Un esempio dell’applicazione delle anchors HTML5

Creo un bottone, che cliccando mi porta alle Fonti, al termine dell’articolo.
Per farlo andrò ad aggiungere l’attributo id alla parola Fonti. Lo trasformo in <span id=”ancora1″>Fonti</span>.
Poi creo un bottone, che chiamerò bottone1. Sarà così formattato: <a href=”#ancora1″>bottone1</a>
Eccolo: bottone1

Secondo test. Creo un altro bottone. Il mio obiettivo è che questo bottone mi porti in un punto specifico di un’altra pagina.
Vado nell’altra pagina e aggiungo l’attributo ancora, dove voglio portare l’utente. Come ho fatto sopra con la parola Fonti.
Poi creo un bottone, che chiamerò bottone2. Sarà così formattato: <a href=”http://visibilab.com/software/cancellare-cookie-dal-browser-firefox-chrome-explorer-safari-e-tanto-altro#ancora2″>bottone2</a>
Eccolo: bottone2

 

Quando clicco su un ancora la pagina va troppo in alto

Capita che serva creare un margine o un padding, in modo che il punto richiamato sia all’interno dello schermo e non – ad esempio – coperto dal menu in alto.

Per formattare coi css un ancora, evitando che la pagina scrolli troppo, basta usare i css.
In linea potremmo scrivere style=”padding-top: 100px; margin-top: -100px;” nell’elemento di destinazione.
Quindi, nell’esempio fatto sopra per il bottone1, risulterà così: <span id=”ancora1″ style=”padding-top: 100px; margin-top: -100px;”>Fonti</span>.

 


 

Fonti:

Immagine di woodrow walden

Informazioni sull’anchor: qui.

 

There are no comments yet. Be the first to comment.

Scrivi qualcosa a riguardo