Corsi on-line

I collegamenti ipertestuali (inserire link)

  • CommentiScrivi un commento
  • ForumDiscuti sul forum
  • PrevFormattazione del testo
  • NextIl link MAILTO: creare un link per spedire un email

Internet è nata e si è sviluppata grazie alla ipertestualità, 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.

Attraverso i link, pertanto, è possibile collegare tra loro diversi file disponibili in Rete. All'interno di una pagina HTML, infatti, è possibile linkare qualsiasi tipo di file: è possibile creare collegamenti ipertestuali verso altre pagina HTML, verso immagini, documenti PDF, file eseguibili, archivi ZIP e molo altro ancora.

L'articolo continua dopo la pubblicità

Ogni link, in altre parole, è come "un ponte" che collega, in modo diretto, due differenti risorse disponibili sullo stesso o su diversi server web.

In questa lezione vedremo come inserire link HTML a risorse interne ed esterne e creare ancore all'interno dello stesso documento.

Collegare diverse pagine tra loro: i collegamenti ipertestuali

In HTML i link si generano col tag a che sta per ancora, inteso come ancoraggio tra più pagine. La sintassi per poter creare un link è molto semplice:

<a href="pagina.html">Pagina Web</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 di un file o una cartella (come nell'esempio visto sopra);
  • assolute - si specifica l'intero percorso, come nell'esempio che segue:
<a href="http://www.sito.ext/pagina.html">Pagina Web</a>

I link relativi sono utilizzati normalmente per creare dei collegamenti a diverse pagine del sito (cd. link interni) mentre quelli assoluti sono utilizzati, normalmente, per raggiungere risorse presenti all'interno di altri siti web (cd. link esterni). Esempio:

<a href="/cartela/pagina.html">Link interno</a>
<a href="http://www.sito.ext/pagina.html">Link esterno</a>

Attraverso più link si possono creare interi menu di navigazione per sfogliare le diverse pagine del sito web, ad esempio:

<a href="index.html">Home Page</a><br>
<a href="chi-siamo.html">Chi Siamo</a><br>
<a href="contattaci.html">Contattaci</a><br>

Gli attrbuti del tag <a>

Il tag a, oltre ad href, ha una serie di interessanti attributi. I più importanti sono:

  • title - specifica un'etichetta al link;
  • target - permette di aprire il link nella stessa finestra del browser, in una nuova finestra oppure al'interno di uno specifico frame;
  • name - permette di creare link interni alle pagine (o ancore);
  • rel - permette di specificare il tipo di relazione esistente tra due documenti (quello "che linka" e quello "linkato"); è molto usato per creare link di tipo nofollow (la cui importanza riguarda tematiche SEO non trattate in questa guida).

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>
<!-- Apre un link nofollow -->
<a href="http://www.sito.ext/pagina.html" rel="nofollow">Sito esterno</a>
Ovviamente è possibile anche più attributi insieme:

<a href="http://www.sito.ext/pagina.html" rel="nofollow" target="_blank" title="Sito esterno">Sito esterno</a>

Per quanto riguarda l'attributo name è necessario spendere aualche parola in più... vediamo quindi come creare delle ancore interne ad una pagina HTML.

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".

Il punto di destinazione sarà contrassegnato dall'attributo name al quale verrà assegnato un valore arbitrario, mentre il link attivo avrà la particolarità di avere come valore di href il nome definito in name preceduto da cancelletto.

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

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

Linkare un'immagine (immagini cliccabili)

Negli esempi visti sino ad ora abbiammo applicato i link ad un testo. Una altra forma di link molto frequente riguarda le immagini (si pensi ad esempio ai classici bottoni GIF).

Per creare un'immagine cliccabile è sufficiente applicare il tag <a> "attorno" ad un tag <img> in questo modo:

<!-- Immagine cliccabile -->
<a href="pippo.html">
<img src="/foto/pippo.jpg" alt="Una foto di Pippo">
</a>

Per quanto riguarda le immagini (ed il relativo tag di markup) rimandiamo alla lezione appositamente dedicata. Per il momento sia sufficiente ricordarsi che attraverso il tag <a> è possibile creare, oltre al testo, anche delle immagini linkate.

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 €
Vedi anche...
Altre Guide