I link sono un elemento fondamentale di ogni pagina web, perché permettono di collegare tra loro pagine dello stesso sito oppure di reindirizzare i visitatori verso siti web esterni.
I link, chiamati anche collegamenti ipertestuali, si creano utilizzando il tag <a>. All'interno di questo tag si inserisce il testo (o altri elementi HTML) che sarà visibile nella pagina. Quando l'utente farà click su questo contenuto, verrà aperta la pagina o la risorsa specificata dal link.
<a> Un link base non ancora funzionante </a>
Provando l'esempio, noterai che i link vengono visualizzati in blu e sottolineati per impostazione predefinita. Più avanti vedremo come modificarne l'aspetto con il CSS.
Per rendere un link funzionante è necessario aggiungere l'attributo href="valore" al tag <a>. Al posto di valore si inserisce l'indirizzo della pagina da aprire. Come per l'attributo src, visto nelle lezioni precedenti, se il file da aprire si trova nella stessa cartella del documento HTML è sufficiente indicarne il nome seguito dall'estensione.
<a href="esempio.html"> Un link che porta alla pagina “esempio.html” </a>
Puoi creare collegamenti a pagine presenti nel tuo sito web (o sul tuo computer, se stai lavorando in locale) utilizzando la sintassi:
<a href="/cartella/esempio.html"> Link </a>
Puoi anche aggiungere un collegamento a pagine appartenenti ad altri siti web.
<a href="https://example.com/"> Link 2 </a>
L'attributo target="valore" permette di scegliere come verrà aperta la pagina collegata. I valori più utilizzati sono:
target="_self" è il valore predefinito e apre il collegamento nella stessa scheda del browser. Se desideri questo comportamento, puoi anche omettere completamente l'attributo target.target="_blank" apre il collegamento in una nuova scheda del browser.Esistono anche altri valori, oggi utilizzati molto raramente:
target="_top" apre il collegamento occupando l'intera finestra del browser, uscendo da eventuali frame.target="_parent" apre il collegamento nel frame padre, se presente.target="nome_di_un_frame" apre il collegamento all'interno di un iframe con quel nome (argomento che vedremo nella lezione sugli iframe).<a href="esempio.html" target="_blank"> Un link in una nuova scheda </a>
Nelle lezioni precedenti abbiamo visto il tag <img>. Per trasformare un'immagine in un collegamento, basta inserirla all'interno del tag <a>. In questo modo, cliccando sull'immagine, verrà aperta la pagina specificata nell'attributo href.
<a href="esempio.html">
<img src="foto.jpg">
<!-- Cliccando sull'immagine, andrai a esempio.html -->
</a>
Come visto in precedenza, i link vengono visualizzati, per impostazione predefinita, in blu e sottolineati. Se questo stile non si adatta al sito web, è possibile modificarlo tramite l'attributo style="valore". Alcune delle proprietà CSS più utilizzate sono:
text-decoration:none rimuove la sottolineatura del collegamento. Al posto di none puoi utilizzare anche overline, line-through oppure underline, che rappresenta il valore predefinito. È anche possibile combinarne più di uno, ad esempio underline overline.color:grey cambia il colore del collegamento. Al posto di grey puoi utilizzare qualsiasi altro colore, come red, blue, green, ecc.Questi stili CSS non sono riservati ai link: possono essere applicate anche a molti altri elementi HTML che contengono testo, come abbiamo visto nella lezione sugli stili degli elementi.