I link in HTML con l’attributo href

I link in HTML con l’attributo href

I link inseriti nel codice HTML permettono di spostarsi tra una pagina e l’altra di un sito oppure di spostarsi in altri siti web. Per poterlo fare si usa l’attributo href all’interno del tag di apertura <a>.

<a href="https://www.infodit.it">Pagina iniziale</a>

Quando un link inserito porta un utente ad un’altra pagina dello stesso sito si parla di link interni e viene usato per rimandarlo ad altri articoli correlati all’argomento che si sta leggendo mentre quando l’utente viene rimandato ad altri siti web oppure ai siti social questi vengono chiamati link esterni.

Quando ci si rimanda un utente all’interno del proprio sito non c’è bisogno di scrivere tutto l’indirizzo. Ad esempio, per rimandare all’articolo di questo sito che spiega come si scrive una pagina HTML, non è necessario scrivere nel codice l’intero indirizzo: https://www.infodit.it/come-si-scrive-una-pagina-html/. Piuttosto scriverò:

<a href="/come-si-scrive-una-pagina-html/">spiega</a>

Il browser capisce che l’utente viene mandato all’interno dello stesso sito e cercherà l’articolo all’interno della cartella di Infodit. All’interno del tag di apertura e di chiusura viene scritta la parola da evidenziare e da cliccare per leggere l’articolo che sopra è colorata di blu in grassetto.

Personalizzare il link HTML

In genere, i link vengono visualizzati con una sottolineatura e non in grassetto. Ma è possibile personalizzare i link nel file CSS.

Per farlo, il selettore non è a e neppure href. L’elemento a può avere vari attributi e non soltanto link; può permettere anche di scaricare dei file. Il selettore relativo agli url è a:link.

Per visualizzare il testo che contiene un collegamento ipertestuale, i link, come fatto su questo sito è bastato disattivare le decorazioni del testo e renderlo in grassetto. Il codice da inserire nel file CSS è questo:

a:link {
	text-decoration: none;
	font-weight: bold;
}

E’ possibile cambiare la visualizzazione di un link per mostrare all’utente che quella pagina è stata visitata oppure quando gli si passa sopra con il puntatore del mouse. Nel primo caso il selettore è a:link:visited mentre nel secondo caso il selettore è a:hover. Alcuni siti e motori di ricerca colorano di rosso le pagine già viste da un utente.

In questi casi bisogna aggiungere ogni selettore desiderato nel file CSS e assegnarli il suo stile.

a:link {
	text-decoration: none;
	font-weight: bold;
}
a:visited {
        color: red;
}

Nell’esempio sopra, quando si clicca sul link il testo che contiene il collegamento diventerà di colore rosso ma per il resto rimane invariato, perché eredita le altre proprietà dal selettore di sopra. Se vogliamo dare una sottolineatura ai link visitati dobbiamo specificarlo all’interno del relativo selettore

/ 5
Grazie per aver votato!