Corsi on-line

I collegamenti ipertestuali (inserire link)

  • CommentiScrivi un commento
  • ForumDiscuti sul forum
  • PrevStilizzare il testo in HTML: grassetto, corsivo, sottolineato, ecc.
  • 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 pagine HTML, verso immagini, documenti PDF, file eseguibili, archivi ZIP e molto 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.

Link e Browser

Abbiamo detto che attraverso i link è possibile collegare una pagina HTML ad un qualsiasi file. A questo punto bisogna chiedersi come reagirà il nostro browser a seguito del click sul link.

La reazione del nostro software di navigazione, in realtà, sarà differente a seconda del tipo di file linkato. Se ad essere collegata è un'altra pagina HTML o un'immagine di un formato ottimizzato per il web (PNG, JPG o GIF) allora il browser aprirà la risorsa. Qualora invece si tratti di un file ZIP, di un EXE o di un altro tipo di file non direttamente gestibile dal browser (ad es. un file DOC, CSV, MDB, MOV, ecc.), allora il nostro browser si limiterà ad effettuarne il download. A seconda delle impostazioni settate all'interno del browser è possibile che, una volta scaricato il file, il sistema operativo tenti di aprirlo automaticamente chiamando in causa l'applicazione più adatta a gestire quella particolare tipologia di file.

Un caso a parte è quello dei file PDF: normalmente i browser moderni implementano un plugin per aprirli direttamente e mostrarne il contenuto direttamente all'interno della finestra di navigazione.

Collegare diverse risorse 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 URL 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);
  • hreflang - permette di specificare la lingua del documento collegato (ha una certa rilevanza dal punto di vista dell'accessibilità);
  • accesskey - consente di definire delle scorciatoie da tastiera attraverso le quali raggiungere velocemente il documemnto collegato.

Vediamo qualche esempio che chiarisca meglio l'utilizzo degli attributi tipici dei link HTML:

<!-- 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>
<!-- Specifico la lingua del documento di destinazione -->
<a href="http://www.sito.ext/english.html" hreflang="eng">Documento in inglese</a>
<!-- Specifico una scorciatoia da tastiera -->
<a href="/index.html" accesskey="h">Home-Page</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>

L'attributo accesskey

Specificando l'attributo accesskey all'interno di un link viene attivata una scorciatoia da tastiera. Di seguito una tabella riepilogativa delle combinazioni per i vari browser e sistemi operativi:

BrowserWindowsLinuxMac
IExplorer[Alt] + accesskeyN/A[Ctrl] [Alt] + accesskey
Chrome[Alt] + accesskey[Alt] + accesskey[Ctrl] [Alt] + accesskey
Firefox[Alt] [Shift] + accesskey[Alt] [Shift] + accesskey[Ctrl] [Alt] + accesskey
Safari[Alt] + accesskeyN/A[Ctrl] [Alt] + accesskey

Creare un'ancora interna alla pagina

Per quanto riguarda l'attributo name è necessario spendere aualche parola in più... 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.

Linkare un indirizzo e-mail

Attraverso il meccanismo dei Link HTML è anche possibile collegare direttamente una pagina web ad un indirizzo e-mail. Nella prossima lezione vedremo, dettagliatamente, come gestire questa particolare tipologia di link.

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 39 €
  • Corso Web Design
    Corso Web Design
    Disegno di siti Web con HTML, CSS e Dynamic HTML. A partire da 29 €
Vedi anche...
Altre Guide