Il tag <a> viene usato nel linguaggio HTML per inserire nel proprio sito dei collegamenti ipertestuali, cioè link che rimandano ad altre sezioni della stessa pagina, ad altre pagine del sito o anche ad altri siti web.
Come altri elementi principali, anche quello per creare dei link ha un tag di apertura e uno di chiusura. Bisogna, inoltre, specificare che si cliccando sulla parola al suo interno si rimanda l’utente altrove.
I link appaiono in modo diverso a seconda del loro tipo: se l’utente non ha ancora cliccato su quel link, la parola interessata sarà sottolineata e colorata di blu altrimenti sarà colorata di viola per fare capire all’utente che ha già visitato quella pagina.
Come si usa il tag <a> nei file HTML
Il codice da inserire per aggiungere un collegamento ipertestuale nel file HTML è inserire il tag <a> come mostrato sotto:
<a href="https://www.infodit.it">Visita Infodit</a>
L’attributo href è molto importante perché serve a fare sapere al browser dove vogliamo rimandare la persona che ci sta leggendo. Un altro attributo è target che serve ad aprire la nuova pagina in un’altra finestra del browser in modo che quella dove si trova il nostro sito rimanga disponibile per l’utente. Per fare questo dobbiamo assegnargli il valore _blank.
<a href="https://tourvirtuali.altervista.org" target="_blank">Visita Tour Virtuali</a>
Invece di url di siti web, si possono inserire anche gli indirizzi di foto, video e audio e permettere all’utente di scaricarli. In questo caso, al posto di target si usa l’attributo download.
<a href="/foto/foto2.jpg" download> <img src="/foto/foto2.jpg> </a>
E’ possibile stabilire un nome diverso per l’utente che scarica quel file: basta inserirlo come valore all’attributo, per esempio scrivendo:
<a href="/foto/foto2.jpg" download="Rosa"> <img src="/foto/foto2.jpg> </a>
E’ anche possibile modificare il modo in cui le parole che contengono un collegamento appaiono attribuendogli uno stile CSS. E’ possibile fare in modo che le parole appaiono in grassetto e senza sottolineatura disattivando le decorazioni al testo e modificando i caratteri.
a:link {
text-decoration: none;
font-weight: bold;
}
Si usano selettori diversi a seconda di cosa vogliamo visualizzare:
- a:link è il selettore generico e vale per tutti i link
- a:visited applica le proprietà indicate alle parole che contengono link già visti dall’utente
- Le proprietà scritte all’interno del selettore a:hover vengono mostrate soltanto quando il puntatore del mouse passa sopra la parola che contiene il link.
Altri esempi su come personalizzare i link sono mostrati a questa pagina.
