I collegamenti ipertestuali

   Elementi fondamentali

Abbiamo visto come inserire testo e immagini all'interno di un documento web e più avanti vedremo come dar loro una diversa impostazione grafica, come sitemarli meglio mediante le tabelle e gli elenchi.

Adesso finalmente esaminiamo la vera essenza del web, ciò che ne costituisce la struttura portante e che ha determinato il grande successo di Internet: il collegamento ipertestuale. È chiamato anche link e la sua funzione è di rimandare ad un'altra sezione della pagina stessa, oppure ad un'altra pagina presente sullo stesso sito o su un sito esterno. Esso permette inoltre di scaricare o eseguire programmi, immagini, file audio e video, presenti sul sito o su altri server, e tante altre cose.
L'uso del collegamento ipertestuale consente inoltre una lettura non sequenziale del documento, secondo la volontà del visitatore, che può saltare facilmente da un documento all'altro o da una sezione all'altra.

Il tag utilizzato per introdurre un collegamento ipertestuale è <A>, che perà scritto così non ha alcun effetto e necessita di alcuni attributi. Gli attributi possibili sono 6 e servono a definire la sorgente e la destinazione del collegamento, e il modo in cui questo collegamento viene espletato. Gli attributi sono: HREF, NAME, TITLE, TARGET, REL e REV.

L'attributo che permette di creare un collegamento ipertestuale verso un'altra sezione o un altro documento è HREF, che definisce appunto il collegamento ipertestuale (Hipertext Reference), ma vediamo prima un altro attributo, in modo che poi potremo spiegare l'attributo HREF con maggior completezza.

L'attributo NAME="..." permette di inserire un segnalibro all'interno di una pagina, in modo da potercisi riferire tramite un collegamento situato in un'altra sezione della pagina o in un'altra pagina. È come mettere una bandieruola all'interno della pagina ed utilizzarla come riferimento per la navigazione. Usare un segnalibro all'interno di un collegamento ipertestuale vuol dire recarsi non all'inizio del documento da ad un punto preciso della pagina, esattamente lì dove è posizionato il segnalibro.
La sintassi corretta del tag in questo caso è: <A NAME="nome">[testo opzionale]</A>.
Siccome questo tag serve escluzivamente per porre un segnalibro all'interno del documento il testo può anche non essere scritto. Il testo "nome" invece è obbligatorio e deve essere univoco all'interno del documento altrimenti il computer dovrebbe scegliere tra due quantità uguali. I segnalibri vengono molto utilizzati per creare glossari, FAQ (Frequently Asked Questions) ed elenchi in genere.

Veniamo adesso all'attributo che costituisce il collegamento ipertestuale vero e proprio, e che permette di collegare un documento ad un'altro.
L'attributo di cui stiamo parlando è HREF e la sua sintassi corretta è <A HREF="indirizzo">[Testo HTML]</A>.
La dicitura "testo html specifica un testo o anche un qualsiasi contenuto di tipo html che indica l'ipertesto all'interno della pagina; può essere un testo, una immagine o un qualunque altro elemento html. Nel caso sia un testo questo viene evidenziato con una sottolineatura e in colore azzurro (ma ciò si può anche modificare) mentre nel caso sia una immagine questa viene in genere evidenziata con un bordo colorato (che si può anche togliere).
La dicitura "indirizzo" indica l'indirizzo assoluto o relativo di un qualsiasi documento o file.

Si parla di indirizzo assoluto se esso è nella forma "http://canoro.altervista.org/guide/html/html.html", perché viene specificato l'indirizzo del server web su cui è posto il documento.
L'indirizzo è invece relativo se si considera a partrire dalla posizione attuale del documento, ad esempio "../sport/schede.html". Se il documento sta nella cartella corrente (quella in cui sta la pagina che stiamo visualizzando) allora si può scrivere solo il nome del file, ad esempio "html-09.html".

Infine ci si può riferire ad un particolare punto di una pagina web, e non solo all'inizio del documento. Ciò si può fare mediante i segnalibri introdotti appena sopra. Il nome del segnalibro si indica alla fine dell'indirizzo, preceduto dal simbolo #, ad esempio, se avessimo messo un segnalibro alla fine di questa pagina e lo avessimo chiamato "fondo" si può fare un collegamento ad esso scrivendo "#fondo" come indirizzo. Mediante i segnalibri vale la stessa distinzione tra indirizzi relativi e assoluti; ad esempio le tre scritte qui sotto sono equivalenti:
<A HREF="http://canoro.altervista.org/guide/html/html-10.html#fondo">Clicca</A>   (indirizzo assoluto)
<A HREF="html-10.html#fondo">Clicca</A>  (indirizzo relativo)
<A HREF="#fondo">Clicca</A>  (indirizzo relativo)
e producono questo effetto:
CLICCA QUI     e ti ritroverai in fondo a questa pagina...
Naturalmente in fondo alla pagina avremo messo il segnalibro: <A NAME="fondo"></A>.

Infine si può usare un collegamento ipertestuale per mostrare una immagine, oppure per ascoltare o scaricare una sequenza audio/video oppure per scaricare qualunque file.
Ecco alcuni esempi; nel primo descriviamo come legare una immagine ad un collegamento ipertestuale (si clicca e si vede l'immagine), nel secondo si consente all'utente di scaricare un piccolo file.
1º esempio: Questa riga di comando produce l'effetto di visualizzare una immaginina e di legare ad essa un collegamento ipertestuale per visualizzare la stessa immagine ingrandita; per far aprire l'immagine in un'altra finestra abbiamo utilizzato l'attributo TARGET che sarà spiegato nel prossimo capitolo, senza quell'attributo l'immagine sarebbe stata visualizzata in questa pagina, ma sarebbe sparita la guida...
<A HREF="napoli.jpg"><IMG SRC="mini-napoli.jpg"></A>

2º esempio: Questa riga di comando produce l'effetto di visualizzare alcune parole a cui è associato un link che porta ad un file eseguibile, un gioco di Battaglia Navale per PC. All'utente basterà fare click e, a meno che non ci siano impostazioni di protezione contro i file eseguibili da parte del suo browser, potrà scaricare immediatamente il file sul proprio pc o avviarlo direttamente. Il collegamento si adatta a qualunque tipo di file, eseguibile, compresso, immagine, testo, etc... Cliccate per scaricare il file e, ovviamente, potrete anche giocarci.
<A HREF="battle.exe">Clicca qui</A> per scaricare il gioco....(210 kB)
CLICCA QUI per scaricare il gioco....(210 kB)
Quando si mettono collegamenti per scaricare file di grandi dimensioni è sempre una buona usanza segnalare all'utente la dimensione dei file.

Nel prossimo capitolo descriveremo l'uso degli altri attributi del tag <A>.