La creazione di link ipertestuali tra pagine web è la cosa più importante quando si costruisce un sito web.
Un sito web ha bisogno di link per passare da una pagina all'altra: i link possono portare ad un'altra pagina dello stesso sito (collegamento interno) oppure ad una pagina di un altro sito in Internet (collegamento esterno).
Il tag a (come ancora)
Un'ancora (delimitata dal tag a) è un oggetto del body che collega la pagina attuale ad un'altra pagina, a un'immagine, un suono, un programma ..
| Codice | Output | |
| Questo è un falso <a href="#"> link </a> | Questo è un falso link | L'ancora appare come una parola calda! In questo caso non porta da nessuna parte. |
L'attributo href
Il tag a ha bisogno dell'attributo href.
Al posto del carattere # occorre scrivere l'indirizzo o URL del
documento che si vuole collegare alla parola calda.
I seguenti collegamenti sono esterni a questo sito.
| Codice | Output |
| Questo è il sito: <a href=“http://www.w3schools.com/ "> w3schools</a> |
Questo è il sito w3schools |
| Ho visitato <a href=“http://www.nycvisit.com/home/"> New York</a> |
Ho visitato New York |
Per avere un collegamento interno, si deve prima creare un'altra pagina web nel sito, oltre alla pagina index.htm, per esempio una pagina chiamata pagina2.htm.
Se questa seconda pagina è nella stessa cartella di index.htm, si può creare un link da index.htm a pagina2.htm in questo modo:
| Codice | Output | |
| alla mia <a href=“pagina2.htm">seconda pagina</a> | alla mia seconda pagina | Devi prima creare il file pagina2.htm! |
L'attributo target
A volte può essere utile aprire il nuovo documento in una nuova finestra del browser. In questo modo, la pagina di partenza rimarrà aperta dietro e ricomparirà quando si chiuderà la pagina richiamata con il link. Per aprire una nuova pagina si aggiunge l'attributo target nel tag a.
| Codice | Output |
| Ho visitato <a href=“http://www.ciudad.cl/" target=_blank>Santiago del Cile</a> | Ho visitato Santiago del Cile |
Gli attributi title o alt
E' buona norma per l'usabilità della pagina, aggiungere un testo alternativo che appare quando il mouse sorvola la parola calda. Questo si ottiene con l'attributo title o alt.
| Codice | Output |
| <a href="#" title="spiegazione sul link"">False link</a> | False link |
Vuoi inviare una e-mail dalla tua pagina?
| Codice | Output | |
| Manda una mail a <a href="mailto:john@tin.it" >John</a> |
Manda una mail a John | Non gli scrivere! John non esiste! |
Una immagine ... calda
Per creare un link con una immagine, tutto il tag img deve essere messo dentro il tag a.
| Codice | Output |
| <a href="#"> <img src="image/ola.gif"/></a> |  |
Dai uno stile personale alle tue ancore!
Puoi dare diverse proprietà alle tue ancore: il colore, lo sfondo, la sottolineatura ...
Con il selettore a delle ancore è bene specificare una pseudo-classe
perché il browser possa visualizzare l'ancora in modo diverso se essa è stata già visitata o no,
selezionata o solo sorvolata dal mouse.
| a:link {color:blue; text-decoration: underline; } a:visited {color:maroon;} a:hover, a:active {color:white; background:black;} |
la pseudo-classe a:link indica un'ancora non visitata, la pseudo-classe a: visited indica un'ancora già visitata la pseudo-classe a: active indica un'ancora selezionata, la pseudo-classe a:hover indica un'ancora sorvolata dal mouse. |