HTML: Links e bottoni

Dopo aver visto come deve essere trattato un testo e come si inserisce un'immagine, nasce il problema di capire come si possa passare da una pagina ad un'altra senza dover scrivere l'indirizzo nella barra del browser (anche perchè nella maggior parte dei casi non lo si conosce). Per risolvere questo problema ci viene in soccorso uno strumento indispensabile: il LINK.

Il link associa ad una parola o ad un'immagine un indirizzo web. Quando si incorre in una parola sottolineata (in genere di un altro colore rispetto al resto del testo) sulla quale, posizionandosi con il mouse, l'indicatore a freccia si trasforma in mano, ci si trova davanti ad un link. La stessa cosa accade ad un'immagine alla quale sia stato associato un link (chiamata anche Bottone).

Naturalmente, ciò non significa che se si ha una parola sottolineata di colore diverso dal testo ci si debba per forza trovare davanti ad un link:

Testo di colore bianco: il puntatore non è a forma di mano.
Link di colore bianco: il puntatore è a forma di mano.
Testo di colore verde: il puntatore non è a forma di mano.
Link di colore verde: il puntatore è a forma di mano.
Immagine: il puntatore non è a forma di mano.
Immagine-link: il puntatore è a forma di mano.
Immagine-link con l'aggiunta del comando ALT: il puntatore è a forma di mano.

Facendo un passo indietro, all'atto di inserire il tag <BODY>, si può decidere quale colore associare ad un link; si può sceglire un colore per un link non ancora visitato, uno per quelli già visitati ed un altro che fa cambiare il colore del link nel momento in cui ci si clicca sopra. Tutto questo è possibile grazie a 3 comandi:

esempio: <BODY bgcolor="#000000" text="white" link="green" vlink="yellow">

esempio: <BODY bgcolor="#000000" text="white" link="green" vlink="yellow" alink="blue">

Per inserire un link, si utilizza il tag <A></A> insieme al comando HREF al quale si associa il percorso della nuova pagina che si deve raggiungere; all'interno dei tags di apertura e chisura, si inserisce il nome che verrà visualizzato in forma di link sulla pagina; se volessi, ad esempio, che le parole "Vai alla vuova pagina", rappresentino il link alla pagina "nuova pagina.html" dovrei scrivere:

<A HREF="http://members.it.tripod.de/roby_kirk/nuova pagina.html">Vai alla nuova pagina</A>.

<A HREF="http://members.it.tripod.de/roby_kirk/nuova pagina.html" TARGET="_new">Vai alla nuova pagina</A>.

Se si volessero, poi, sostituire le parole "Vai alla nuova pagina" con un'immagine, basterebbe sostituire queste parole con il tag di lettura immagine nel seguente modo:

<A HREF="http://members.it.tripod.de/roby_kirk/nuova pagina.html"><IMG SRC="http://members.it.tripod.de/roby_kirk/immagine.gif" BORDER="0" WIDTH="510" HEIGHT="97"></A>

<A HREF="http://members.it.tripod.de/roby_kirk/nuova pagina.html" TARGET="_new"><IMG SRC="http://members.it.tripod.de/roby_kirk/immagine.gif" BORDER="0" WIDTH="510" HEIGHT="97"></A>.

Anche in questo caso, il percorso di una pagina può essere relativo ad un indirizzo internet o interno all'Hd.

Questo comando ha la stessa funzione di ALT, visto nel capitolo Immagini. Aggiungendo, infatti, questo comando all'interno del tag <A>, si ha la possibilità di visualizzare un testo nel momento in cui si passa sul link con il puntatore del mouse:

<A HREF="http://members.it.tripod.de/roby_kirk/nuova pagina.html" TITLE="Nuova pagina">Vai alla nuova pagina</A>.

Abbiamo visto come sia possibile raggiungere, grazie ai links, nuove pagine; ma cosa capita quando si ha bisogno di raggiungere un punto preciso della stessa pagina o di un'altra? Il primo passo è sicuramente quello di segnare tale punto attraverso il tag <A NAME="parola"></A>. In pratica, si deve individuare il punto della pagina prescelto, possibilmente attraverso una parola che lo identifichi, e, quindi, inglobare questa parte di pagina all'interno dei tags appena descritti. Se volessimo, ad esempio, arrivare tramite il link "OCEANO" nel punto della pagina in cui si trova questa parola, o più semplicemente dove si parla di oceano, bisognerebbe porre prima della parola interessata (o di inizio argomento) il tag <A NAME="oceano"> e, quindi, alla fine della zona di interesse il tag di chiusura </A>. Questo procedimento deve essere ripetuto per tutte le parole che ci interessa raggiungere velocemente.

Per il secondo passo, cioè il link vero e proprio, bisogna vedere se ci si trova all'interno della stessa pagina o in una pagina differente:

Si nota facilmente che il simbolo "#" rappresenta proprio il "link interno".

Nel capitolo Testo e caratteri, abbiamo parlato del tag <ADDRESS></ADDRESS>; è stato detto che questo tag fornisce un'enfatizzazione del testo dell'indirizzo, ma non serve a raggiungerlo. Per fare questo interviene il concetto di link con l'aggiunta della destinazione URL "MAILTO". Tale link viene scritto nella forma:

Cliccando sulla parola "Scrivimi", si aprirà automaticamente il proprio programma di posta elettronica (ad esempio Outlook Express) con il campo del destinatario già assegnato all'indirizzo "roby_kirk@usa.net"