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.
In questa lezione della nostra guida vedremo come inserire link HTML a risorse interne ed esterne e creare ancore all’interno dello stesso documento.
Cos’è un 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.
Ogni link, in altre parole, è come "un ponte" che collega, in modo diretto, due differenti risorse disponibili sullo stesso o su diversi server web.
Cosa succede quando clicco su un link?
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.
Creare collegamenti ipertestuali: il tag <a>
In HTML i link si creano 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, contrazione di Hypertext REFerence) 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 percorso locale di un file o una cartella (come nell’esempio visto sopra);
- assolute – si specifica l’intero percorso di rete di una risorsa comprensivo di protocollo e hostname, 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). Ovviamente nulla vieta di creare link interni utilizzando percorsi assoluti, viceversa – ovviamente – non è possibile creare link esterni attraverso URL relative.
Di seguito un esempio di link interno con URL relativa e link esterno con URL assoluta:
<a href="/cartela/pagina.html">Link interno</a>
<a href="http://www.sito.ext/pagina.html">Link esterno</a>I link, come vedremo più dettagliatamente in seguito, possono essere applicati a semplici blocchi testo (singole parole o intere frasi) o immagini. Se il link è applicato a del testo questo viene detto anchor text (testo di ancoraggio) la cui importanza è centrale all’interno delle strategie SEO (in quanto contribuisce ad informare non solo l’utente ma anche il motore di ricerca circa il contenuto della risorsa di atterraggio).
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 all’indispensabile 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 (_self), in una nuova finestra (_blank) oppure all’interno di uno specifico frame;
- name – permette di creare link interni alle pagine (o ancore);
- rel – l’attributo 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:
| Browser | Windows | Linux | Mac |
|---|---|---|---|
| IExplorer | [Alt] + accesskey | N/A | [Ctrl] [Alt] + accesskey |
| Chrome | [Alt] + accesskey | [Alt] + accesskey | [Ctrl] [Alt] + accesskey |
| Firefox | [Alt] [Shift] + accesskey | [Alt] [Shift] + accesskey | [Ctrl] [Alt] + accesskey |
| Safari | [Alt] + accesskey | N/A | [Ctrl] [Alt] + accesskey |
Creare un’ancora interna alla pagina
Abbiamo già detto che i collegamenti ipertestuali possono essere classificati in due grandi famiglie: link interni ed esterni. Oltre a questi esiste anche un terzo tipo di link: le ancore.
Un’ancora è un particolare tipo di collegamento ipertestuale che consente all’utente di muoversi velocemente tra diversi punti della stessa pagina. Il suo utilizzo è piuttosto utile negli articoli e, più in generale, in tutte le pagine con tanto testo se si vuole offrire al lettore la possibilità di "saltare" da un argomento ad un altro senza dover scorrere tutto il contenuto.
L’elemento centrale della sintassi delle ancore è l’attributo name per il quale è necessario spendere qualche parola in più. 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. In questo caso assume particolare importanza l’attributo alt dell’immagine in quanto garantisce una corretta accessibilità del documento anche da parte di utenti con disabilità visive oltre ad essere fondamentale da un punto di vista SEO.
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 che semplifica l’invio di messaggi di posta elettronica.
Linkare un numero di telefono
Con l’avvento dell’era mobile un particolare tipo di link che ha riscosso molto successo è quello che consente, con un semplice click, di avviare una chiamata telefonica. Per maggiori informazioni e per una guida dettagliata su come inserire questo particolare tipo di collegamento ipertestuale si faccia riferimento a questa lezione della nostra guida HTML.
