Collegamenti all'interno di una pagina web -

Oggi vedremo come utilizzare i collegamenti all’interno di una pagina web, ovvero quei link che se cliccati rimandano ad una parte della pagina stessa.

I collegamenti interni ad una pagina web sono molto utili quando il documento è molto lungo da leggere e quindi per spostarsi da un punto all’altro della pagina.
Chiameremo questi punti segnalibri.

Tag per realizzare collegamenti all’interno di una pagina web

Il tag utilizzato per creare collegamenti interni è sempre <a>.

Occorre procedere in questo modo:

Creare un segnalibro, ovvero il punto in cui si vuole andare;

creare il link che conduce al segnalibro.

Banner Pubblicitario

Per creare il segnalibro utilizzeremo questo tag:
<a name=”nome_elemento“>…</a>

Il link che rimanderà al segnalibro sarà:
<a href=”#nome_elemento“>…</a>

Quindi per richiamare il segnalibro si utilizza il simbolo # seguito dal nome dell’elemento. Dunque il simbolo # indica al browser che l’ancora va ricercata all’interno della pagina attuale.

Chiaramente i nomi devono essere univoci.

Facciamo un esempio:

<!DOCTYPE html>
<html lang="it">
<head><title>Coding Creativo</title></head>
<body>
<h1>Coding Creativo</h1>
<a name="up"></a>
<ol>
<li><a href="#scratch">Scratch</a>
  <ol>
     <li>Tutorial scratch</li>
     <li>Giochi con scratch
         <ol><li>Giochi per la primaria</li>
             <li>Giochi per la secondaria</li>
         </ol>
     </li>
  </ol>
</li>
<li><a href="#algobuild">Algobuild</a></li>
<li>Linguaggio C</li>
<li>Php</li>
</ol>
<p>Il blog Coding Creativo nasce per condividere articoli sul coding.<br>
Proporre il coding fin dalla scuola primaria oggi è fondamentale.<br>
Penso che attraverso gli esempi e i giochi è possibile imparare a programmare.<br>
</p>
<br><br>
<table border="1">
<thead>
<tr><th colspan="3">Visite al sito</th></tr>
</thead>
<tbody>
<tr><td>pagine</td><td>provenienza maggiore</td>
<td>visitatori giornalieri</td>
</tr>
<tr><td>scratch</td><td>organic search</td><td>1.200</td></tr>
<tr><td>algobuild</td><td>referral</td><td>800</td></tr>
<tr><td>linugaggio C</td><td>social</td><td>600</td>
</tr>
</tbody>
<tfoot>
<tr><td colspan=2>visite totali</td><td>2.600</td></tr>
</tfoot>
</table>
<br><br>
<h2><a name="scratch">Scratch</a></h2>
<p>Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding. 
<br> L'interfaccia grafica è molto intuitiva e semplice da usare.
<br>Sul sito <a href="https://www.codingcreativo.it">Coding Creativo</a> troverete tanti esempi ed esercizi su scratch.</p>
<br>
<p>Alcuni esempi di giochi realizzati con scratch:
<ul>
   <li>Tabellina con scratch;</li>
   <li>Giochino alto - basso con scratch;</li>
   <li>Gioco morra cinese con scratch;</li>
   <li>Morra cinese con scratch.</li>
</ul>
</p>
<h2><a name="algobuild">Algobuild</a></h2>
<p>Algobuild è un programma molto utile per disegnare ed eseguire gli algoritmi.
<br>Con algobuild è possibile utilizzare il diagramma a blocchi.
<br>Sul sito <a href="https://www.codingcreativo.it">Coding Creativo</a> troverete tanti esempi ed esercizi realizzati con algobuild.</p>
<br>
<p>Alcuni esempi:
<ul>
   <li>Numeri primi con algobuild;</li>
   <li>Massimo di tre numeri.</li>
</ul>
</p>
<p><a href="#up">Torna su</a></p>
</body></html>

Se provate questo esempio e cliccate sulla parola dell’elenco Scratch vi porterà alla parte relativa alla descrizione di Scratch, allo stesso modo se cliccate su algobuild.
Se fate clic in basso nella pagina su torna su, il link vi riporterà in alto nella pagina.

Uso dei segnalibri con id

I segnalibri possono essere inseriti anche all’interno di altri tag, utilizzando l’attribuo id.

Banner pubblicitario

Ad esempio: <h1 id=”coding”>Coding creativo</h1>

e il relativo collegamento si realizza con:

<a href=”#coding”>Coding creativo</a>

Collegamento ad un segnalibro di un’altra pagina

Il collegamento ad un segnalibro di un’altra pagina si realizza inserendo sempre il segnalibro nel punto desiderato e poi con un collegamento del tipo:

<a href=”https://www.codingcreativo.it/tabellina.html#tabellina”>tabellina con Scratch</a>

Chiaramente questi sono solo degli esempi, adattate pure gli esercizi alle vostre esigenze

Lezione precedente: tag a href

Lezione successiva: tag strong

Alcuni link utili:

Tag semantici

Form in html

Tag strong ed em

Collegamenti ipertestuali

Inserire immagini in una pagina web

Paragrafi in html

Tabelle in html