Il tag <a>
I link si definiscono tramite il tag <a> seguito dall’attributo href (hypertext reference) che indica l’URL della destinazione del link.
Il contenuto del tag è l’etichetta, cioè la parte visibile all’utente o letta dallo screen reader che fa trasformare il puntatore del mouse in una manina. Di solito è una parola o un breve testo, ma può anche essere un titolo, un paragrafo, un’immagine. Se è un testo è reso di default dal browser come sottolineato in blu.
Un <a> può puntare ad un’altra pagina dello stesso sito, ad un punto specifico della stessa pagina o ad un sito esterno, l’attributo rel specifica il tipo di relazione di partenza e quella di destinazione. L’attributo target invece specifica se la nuova pagina deve aprirsi in una nuova scheda del browser o nella stessa. Di norma i collegamenti alle pagine interne al sito si aprono nella stessa scheda mentre i collegamenti a siti esterni si aprono in una nuova scheda.
Per aprire un link in una nuova tab del browser possiamo usare l'attributo target con valore blank, in questo caso verrà creata una nuova tab e riutilizzata ai click successivi, oppure con valore _blank, in tal caso verrà creata una nuova tab ad ogni click.
Nel caso di un link che porta ad un altro punto della stessa pagina, come ad esempio nell’indice di navigazione di una pagina Wikipedia, la destinazione non è un URL ma l’id dell’elemento a cui si vuol far puntare il link, oppure il valore dell’attributo name dato a quel particolare elemento. Si può anche linkare ad un particolare punto di un’altra pagina, basta indicarne il percorso seguito dall’id dell’elemento che si vuole raggiungere.
E’ buona norma inserire un attributo title per dare una sorta di spiegazione sul link che si sta per cliccare.
E’ anche possibile creare un link che, se premuto dall’utente, apre il client di posta installato nel computer, grazie all’attributo mailto.
E' possibile anche specificare più mittenti, separandoli con una virgola, ed inviare una copia per conoscenza (aggiungendo ?cc= prima dell'indirizzo) o una copia per conoscenza nascosta (aggiungendo ?bcc= ).
Si possono anche indicare un oggetto ed un corpo della mail predefiniti (aggiungendo ?subject= e ?body= dopo l'indirizzo).
Nel caso in cui si utilizzino più opzioni il punto interrogativo ma messo solo davanti alla prima opzione mentre davanti alle successive va messa una & e il tutto va scritto senza spazi.
<p>Per andare alla pagina home di questo sito clicca <a href="https://www.appunti-digitali.it" target="_blank" title="vai alla pagina home">qui</a></p>
<p>Per andare all'immagine del gattino a fondo pagina clicca <a href="#gattino" target="_blank" title="vai alla foto del gattino">qui</a></p>
<p>Per eseguire una ricerca su Google clicca <a href="https://www.google.it/" rel="external" target="_blank" title="vai sulla pagina di Google"><img src="https://www.google.it/images/srpr/logo11w.png" alt="logo Google" width="50"></a></p>
<p>Puoi mandare un'e-mail a <a href="mailto:tizio@gmail.com" title="manda una mail a Tizio">Tizio</a> tramite Outlook o il tuo client di posta elettronica preferito.</p>
<p>Puoi mandare un'e-mail a <a
href="mailto:tizio@gmail.com?cc=caio@gmail.com&bcc= sempronio@gmail.com&subject=Programmi per sabato sera&body=Ci vediamo al solito posto" title="Scrivi a Tizio Caio e Sempronio">Tizio, Caio in copia e Sempronio in copia nascosta</a></p>
<p>Ecco la foto del gattino a cui si ancora il link di inizio pagina <img alt="gattino" id="gattino" src="https://placecats.com/200/300" title="gattino" /></p>
/* no css */
// no js