4. Interattività

Collegamenti

Un documento HTML può contenere elementi (brani di testo, immagini, ecc.) collegati ad altri documenti di modo che, visualizzando il documento nel browser e cliccando su uno di questi elementi, il documento originario viene sostituito dal documento collegato all'elemento.

Per collegare un file ad un brano di testo si usa la seguente sintassi

<a href="documento.htm">Brano di testo</a>

Un brano di testo così delimitato viene di solito evidenziato dal browser con particolari colori e sottolineature.

Se si vogliono cambiare i valori di default di questi assetti, bisogna specificarli nella sezione style o nel FoglioDiStile.css

<p>Per una spiegazione dell'uso delle tabelle vedere il <a href="html5_3.html">capitolo 3</a></p>

È anche possibile fare in modo che il file collegato e richiamato non venga visualizzato dall'inizio, ma a partire da un suo specifico blocco.
Per far questo è però necessario aver prima marcato, nel file richiamato, il blocco con un opportuno segnale (bookmark).
Questo si ottiene anteponendo, nel file richiamato, al blocco da individuare i marcatori
<a id="NomeMarcatore"></a>

Per visualizzare il file richiamato a partire dal marcatore si scrive:

<a href="documento.htm#Nomemarcatore">Brano di testo</a>

<p>Per una spiegazione dell'uso delle tabelle vedere il <a href="html5_3.html#MarcaTable">capitolo 3: Tabelle</a></p>

Collegamenti ad immagini

Per collegare un file ad una immagine grafica si usa la seguente sintassi

<a href="documento.htm"> < img src="figura.gif" alt="figura" width="150" height="100"> </a>

Un'immagine può essere sezionata in più parti in modo tale da poter attivare collegamenti specifici con queste parti. A questo scopo bisogna costruire una mappa delle regioni in cui si suddivide l'immagine.

La mappa si costruisce con istruzioni di questo tipo:

<map id="nome_mappa">
  <area shape="rect" coords="0,0,100,50"  href="file1.htm" />
  <!--coords: (x,y) sinistra-alto, (x,y) destra-basso-->
  <area shape="rect" coords="100,0,100,50"  href="file2.htm" />
  <area shape="circle" coords="100,100,50"  href="file3.htm" />
  <!--coords: (x,y) del centro e raggio -->
  <!--Eccetera-->
</map>  

Costruita la mappa in base alle dimensioni in pixel dell'immagine si dichiara la figura facendo riferimento all'identificatore della mappa:

  <img src="figura.gif" alt="Figura" width="200" height="100" usemap="#nome_mappa" />

Indirizzi e-mail

Una particolare forma di collegamento è quella che fa riferimento ad un indirizzo di posta elettronica, da scrivere nel seguente modo

<a href="mailto:mario.rossi@dominio.it">Mario Rossi</a>

'Mario Rossi' risulta evidenziato come un normale collegamento, ma cliccando su di esso parte il programma per l'invio della posta elettronica.

<p>Per inviarmi osservazioni: 
<a href="mailto:webmaster@robertobigoni.it">
<big>webmaster</big></a></p>