Il link è un elemento testuale html con la possibilità di cliccarci sopra per accedere ad un’altra pagina; questo tipo di elemento si chiama anche collegamento ipertestuale (da cui prende il nome l’HTML: Hyper Text Markup Language).

Questo elemento ha un suo tag particolare che si chiama “a”

<a …..>home</a>

il solo tag “a” non basta per potersi collegare ad una pagina perché occorre specificare a quale pagina ci si deve collegare; questo si ottiene scrivendo la proprietà “href” all’interno del tag:

<a href=”../index.html”>home</a>

poi posso decidere se la pagina a cui mi collego si apre nella stessa finestra del browser o all’interno di una nuova finestra. Questa possibilità si specifica con un’altra proprietà da assegnare al tag “a” che si chiama “target” (self= stessa finestra; blank= nuova finestra)

<a href=”../index.html” target=”_blank”>home</a>

un’altra proprietà utile per l’indicizzazione del sito e anche all’accessibilità è la proprietà “title” sempre del tag “a”; questa proprietà descrive il link sul quale stiamo per cliccare: questa cosa è molto utile per gli ipovedenti perchè possono vedere in anticipo l’argomento della pagina.

<a href=”../index.html” target=”_blank” title=”vai alla home”>home</a>

1) Aspetto dei link in HTML (procedura obsoleta).

Con l’HTML i link assumono un loro aspetto predefinito con le seguenti caratteristiche:

link nello stato normale: blu

link visitato: violetto

Queste proprietà possono essere cambiate in html aggiungendo delle proprietà al tag “body” che ne descrivono il colore; tuttavia questa possibilità è completamente da scartare per via delle specifiche w3c sull’accessibilità del sito (il w3c dice che quando il tag “body” presenta delle proprietà il sito perde l’accessibilità, qualsiasi esse siano).

N.B.: con DW si possono modificare alcuni paramentri attraverso il comando “proprietà di pagina”; questo comando scrive proprietà nel tag body se nelle preferenze di DW non c’è impostato “usa css invece dei tag html”. Al contrario vengono scritte regole css dentro il tag head, situazione che non ci viene comoda se utilizziamo i fogli stile esterni: è meglio non utilizzare questo comando in nessun caso. Possiamo invece creare una regola per il tag body dove specificare quello che ci serve (non nel caso dei link che in css, vedremo dopo, vengono fatte regole particolari).

1) Aspetto dei link in CSS (procedura corretta).

In linguaggio css i link hanno 4 stati differenti: normale, visitato, rollover, attivo; per ognuno di questi va creata una regola che formatterà il tag “a” con l’aggiunta di una pseudo-classe per identificare appunto lo stato del link (link, visited, hover, active).

a:link

a:visited

a:hover

a:active

Se voglio dare aspetti differenti ai link devo creare delle classi ed associarle ai link che devono risultare diversi: queste si creano come le altre regole per i link aggiungendo al tag a il nome della classe che creiamo (esempio: a:link diventa a.nomeclasse:link); occorre creare anche le pseudoclassi con visited, hover e active.