Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » Html » Struttura: I collegamenti ipertestuali

I collegamenti ipertestuali

di GDesign, 10 Maggio 2002

Versione StampabileDownload in pdf


I collegamenti ipertestuali si creano associando l'indirizzo (percorso/nome file) del nodo di destinazione ad un elemento visualizzato nella pagina corrente che può essere una stringa di testo o un'immagine. Questa associazione è basata sull'utilizzo del tag <A HREF> dove A sta per ancoraggio ed HREF è l'abbreviazione di Hypertext-Refernce (riferimento ipertestuale). Per creare un collegamento verso un'altra pagina dello stesso sito la sintassi :

<A HREF="pagina2.html"> Vai a pagina 2 </A>

Affinché il collegamento funzioni è fondamentale scrivere il nome del file di destinazione correttamente, rispettando maiuscole e minuscole. Nel caso in cui il file di destinazione non si trovi nella stessa directory del file di posizione bisogna specificare anche il percorso completo.

Il tag <A HREF> permette di puntare un collegamento anziché ad una pagina web ad un'immagine. La sintassi :

<A HREF="foto.jpg"> Vai a foto </A>

Anche in questo caso bisogna specificare correttamente il nome dell'immagine e l'eventuale percorso; supponendo che l'immagine si trovi nella cartella images si dovrà scrivere:

<A HREF="images/foto.jpg"> Vai a foto </A>

Se si vuole creare un collegamento ad un file da aprire o da scaricare come ad esempio un filmato o un pacchetto compresso la sintassi è:

<A HREF="file.zip"> Scarica il file in formato zip </A>

dove file.zip è il file che verrà scaricato sul computer di chi naviga.

Per creare un collegamento verso un'altro sito web è sufficiente inserire nel tag <A HREF> l'indirizzo completo del sito in questione:

<A HREF=http://www.gdesign.it> Principi di Web Design by GDC </A>

Quando una pagina è molto lunga e suddivisa in sezioni distinte si possono creare dei collegamenti all'interno della stessa pagina che permettono al lettore di saltare facilmente da un punto all'altro del testo. Per creare i collegamenti interni bisogna innanzitutto definire le destinazioni (ancore) nei vari punti prescelti mediante il tag <A NAME="nome scelto dal webmaster">. Supponiamo di aver definito due destinazioni all'interno della nostra pagina:

<A NAME="sezione1"> Sezione 1 </A>
<A NAME="sezione2"> Sezione 2 </A>

adesso possiamo creare i collegamenti che ci portano alle due destinazioni secondo la sintassi:

<A HREF="#sezione1"> Vai alla sezione 1 </A>
<A HREF="#sezione2"> Vai alla sezione 2 </A>

Si possono anche combinare collegamenti esterni ed interni, cioè definire un collegamento ipertestuale che punta ad un'ancora specifica all'interno di un'altra pagina web.

<A HREF="pagina2.html#sezione1"> Vai alla sezione 1 della pagina 2 </A>

Naturalmente anche in questo caso bisogna aver definito in precedenza l'ancora di destinazione nella pagina2.html.

È consigliabile inserire nelle proprie pagine web un indirizzo di posta elettronica cui i visitatori possano rivolgersi. Allora si può inserire un indirizzo cliccabile, associato cioè alla casella e-mail corrispondente, in modo che l'invio del messaggio sia quasi automatizzato. La sintassi è:

<A HREF="mailto:info@gdesign.it> Scrivimi per informazioni </A>

Fin'ora abbiamo visto collegamenti associati ad un testo, ma i collegamenti possono essere associati anche ad un'immagine. Quindi è possibile avere un'immagine cliccabile che ci porti ad un'altra pagina web, a un sito, ad una sezione e via dicendo. Per associare un collegamento ad un'immagine si usa il tag <IMG SRC> con l'attributo BORDER="0". Ad esempio:

<A HREF="pagina2.html"><IMG SRC="pagina2.gif" BORDER="0"></A>

Se non si specifica l'attributo BORDER="0" l'immagine apparirà contornata da un profilo colorato e ciò è sconsigliabile dal punto di vista estetico.

Quando si clicca su un collegamento in una pagina web, viene caricata la nuova destinazione (immagine, pagina o sito) nella stessa finestra del browser. Seguendo i vari collegamenti ipertestuali, il lettore potrebbe non ricordarsi più il punto di destinazione. Per prevenire questo inconveniente si può fare in modo che la destinazione del collegamento venga visualizzata in una nuova finestra del browser che si sovrappone a quella di partenza. Per ottenere questo risultato basta aggiungere al tag <A HREF> di partenza l'attributo TARGET. Ad esempio:

<A HREF="pagina2.html" TARGET="_blank"> Vai a pagina 2 </A>

Il valore dell'attributo TARGET (nell'esempio:_blank) è un nome convenzionale e può essere inventato di sana pianta senza alcun vincolo. Il suo effetto è di aprire in ogni caso una finestra a sé stante.

^Top

Dai un voto a questo articolo:   HITS: 55227 | VOTI: 42 | MEDIA VOTI: 6.8    

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 5