Corsi per Webmaster e Web Designer
Corsi on-line

I collegamenti ipertestuali (inserire link)

  • Scrivi un commento
  • Discuti sul forum
  • Formattazione del testo
  • Il link MAILTO: creare un link per spedire un email

Internet è nato ed è diventato grande grazie alla teoria ipertestuale, ovvero alla possibilità offerta agli utenti di poter navigare comodamente tra le pagine di un sito e di raggiungere altri siti con un semplice click su quello che viene definito, appunto, collegamento ipertestuale o link.

Collegare diverse pagine tra loro

In HTML i link si generano col tag a che sta per ancora, inteso come ancoraggio tra più pagine.

La sintassi è semplice:

<a href="pippo.html">Pippo</a>
Si utilizza l'attributo obbligatorio href (riferimento ipertestuale) per specificare la pagina da raggiungere.

Le URL (acronimo di United Resource Locator) che si possono specificare sono di due tipi:

  • relative - si specifica solo il nome del file;
  • assolute - si specifica l'intero percorso, come nell'esempio:
<a href="http://www.sito.ext/pippo.html">Pippo</a>
Attraverso più link si possono creare interi menu di navigazione:
<a href="pippo.html">Pippo</a><br>
<a href="pluto.html">Pluto</a><br>
<a href="paperino.html">Paperino</a><br>
Il tag a ha una serie di interessanti attributi:
  • title - specifica un'etichetta al link;
  • target - permette di aprire il link in una nuova finestra;
  • name - permette di creare link interni alle pagine.
Vediamo un esempio di ognuno.

<!-- Crea un'etichetta -->

<a href="pippo.html" title="Pagina di Pippo">Pippo</a>
<!-- Apre un link in una nuova finestra col valore _blank -->

<a href="pippo.html" target="_blank">Pippo</a>

Creare un'ancora interna alla pagina

Vediamo come creare un link di ancoraggio all'interno della stessa pagina. Questo sistema è utile, ad esempio, per muoversi rapidamente all'interno del medesimo documento raggiungendo specifici punti. Vediamo un esempio:

<html>
<head>
<title>Titolo della pagina...</title>
</head>
<body>

<a name="inizio"></a>

<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>

<a href="#inizio">Vai a inizio pagina</a>

</body>
</html>

Cliccando sul link si raggiungerà il punto della pagina marcato con l'ancora "inizio".

Si testi l'esempio per comprenderne a fondo il funzionamento.

Corsi
  • Corso HTML
    Corso HTML
    Il linguaggio di marcatura per il Web. A partire da 29 €
  • Corso HTML5
    Corso HTML5
    Creare pagine web di ultima generazione sfruttando la potenza di HTML5. A partire da 49 €
  • Corso Web Design
    Corso Web Design
    Disegno di siti Web con HTML, CSS e Dynamic HTML. A partire da 39 €