logo

5° puntata

I collegamenti ipertestuali
Saltare ad un segnalibro
 
Ritorna all'indice
 



     Tutti sanno che Tarzan è in grado di saltare da un albero all'altro della foresta, evitando così di dover scendere a terra per poi risalire.

Un ipertesto è una foresta che ci permette di saltare da un punto all'altro delle sue pagine, offrendoci alberi e liane ai quali aggrapparci. E come lo spazio a quattro dimensioni (utilizzato dagli eroi della serie Star Trek per saltare da un punto all'altro dello spazio tridimensionale) è detto iperspazio, così un testo che possiede una specie di terza dimensione sulla quale ci spostiamo in modo non sequenziale viene definito ipertesto.

Iniziamo a vedere come HTML ci dà la possibilità di "saltare" da una pagina all'altra.

 fumetto

 

I collegamenti ipertestuali

Il tag che permette di inserire nella nostra pagina Web un collegamento ipertestuale (detto link) è A (abbreviazione di anchor, àncora), che a seconda dell'attributo specificato viene identificato come un punto di partenza o un punto di arrivo.
Se vogliamo utilizzare un testo come punto di partenza per il nostro salto, dobbiamo racchiuderlo tra i tag <a> e </a>, specificando con l'attributo HREF (abbreviazione di hypertext reference, riferimento ipertestuale) dove vogliamo arrivare.
Il valore di questo attributo è il nome di un file che il browser caricherà nella sua finestra quando l'utente selezionerà il testo evidenziato con il tasto sinistro del mouse. Se viene indicato solo il nome del file questo viene cercato nella stessa directory del file corrente; può essere anche specificato il percorso per trovare qualsiasi file presente nel sistema locale (un server al quale siamo collegati o il nostro computer) e questo percorso può essere di due tipi:

E' inoltre possibile creare un collegamento ad una pagina presente in un altro sito (come nei cosiddetti motori di ricerca), indicando come valore di HREF un indirizzo URL (che non ha nulla a che vedere con il terrificante urlo di Tarzan...)

Che cosa sono gli indirizzi URL

Un indirizzo URL (Uniform Resource Locator, localizzatore di risorse universali) è un'istruzione che specifica la localizzazione di un oggetto che vogliamo richiamare nel Web, come le pagine Web o altri tipi di file.
Per esempio l'indirizzo URL  http://www.sito.com/Argomento/indice.htm, che permette al browser di caricare quella pagina specifica da Internet, è composto da tre informazioni:

  • il protocollo, ovvero il modo con il quale si accede al sistema (in questo caso http, acronimo che significa protocollo per trasferimento di ipertesti);
  • il nome dell'host, ovvero il nome del sistema connesso ad internet (www.sito.com);
  • la directory, ovvero la posizione (cioè la cartella Argomento) e il nome del file (indice.htm) così come si trovano all'interno del server al quale ci colleghiamo.

Il testo di partenza di un collegamento ipertestuale è evidenziato dal browser che lo sottolinea e lo colora in azzurro. E' per questo che se si vuole evidenziare del testo si sconsiglia di usare la sottolineatura, dato che ci potrà essere qualcuno che si chiederà: "perché quel dannato link non funziona?".
Inoltre, come vedremo parlando di immagini, è possibile anche utilizzare un'immagine come punto di partenza del nostro collegamento ipertestuale.

Vediamo ora qualche esempio di collegamenti ipertestuali (con a fianco un breve commento):

<a href="pippo.htm">Vai a Pippo</a>

 carica il file pippo.htm che si trova nella cartella corrente

<a href="Disney/pippo.htm">Vai a Pippo</a>

 carica il file pippo.htm che si trova nella cartella interna Disney

<a href="../indice.htm">Vai all'indice</a>

 carica il file indice.htm che si trova nella cartella immediatamente superiore

<a href="../HannaBarbera/antenati.htm">Vai agli Antenati</a>

 carica il file antenati.htm tornando indietro di un livello ed entrando nella cartella HannaBarbera

<a href="C:/Html/Esempi/Disney/nonnapapera.htm">Vai a Nonna Papera</a>

 carica il file nonnapapera.htm utilizzando un percorso assoluto

<a href="www.topolino.com">Vai a Topolino</a>

 carica la pagina iniziale del sito www.topolino.com

<a href="www.topolino.com/minnie.htm">Vai a Minnie</a>

 carica la pagina minnie.htm che si trova nella cartella principale del sito www.topolino.com

Quando si effettua un collegamento ipertestuale la nuova pagina viene caricata nella finestra corrente ricoprendo quello che si stava visualizzando; è possibile aprire il nuovo documento in un'altra finestra utilizzando l'attributo TARGET seguito dal nome della finestra che vogliamo aprire (e se utilizziamo "_blank" ne viene sempre creata una nuova). Vediamo qualche esempio:

<a href="pippo.htm" target="_blank">Vai a Pippo</a>

 apre il file pippo.htm in una finestra nuova.

<a href="pluto.htm" target="cani">Vai a Pluto</a>

 apre il file pluto.htm in una finestra chiamata cani; se questa è aperta e contiene un altro documento, quest'ultimo viene sostituito.

Se invece vogliamo variare il colore dei collegamenti esistono tre attributi di BODY che permettono di farlo:

Volendo dare ai collegamenti il colore nero, che diventi giallo quando sono attivi e ciano quando sono già stati visitati, dovremmo scrivere il seguente codice:
<body link="#000000" alink="#FFFF00" vlink="#00FFFF">

 

Saltare ad un segnalibro

Nei casi che abbiamo visto il punto di arrivo del nostro salto è l'inizio della pagina richiamata; HTML permette di specificare punti di arrivo (detti segnalibri o etichette) posti in una posizione qualunque della pagina corrente o di un'altra pagina. Il segnalibro è quindi una porzione del documento HTML racchiusa tra i tag <a> e </a>, con l'unica condizione che ne venga specificato il nome con l'attributo NAME.
Scelto il punto di partenza, per spiccare il salto al punto desiderato basta inserire come valore dell'attributo HREF il carattere # seguito dal nome del segnalibro (se il segnalibro si trova in una pagina diversa da quella corrente occorre indicare l'indirizzo del file):

<a name="Paperino">Paolino Paperino</a>

 crea il segnalibro Paperino

<a href="#Paperino">Vai a Paperino</a>

 si posiziona sul segnalibro Paperino nella pagina corrente

<a href="paperone.htm#dollari">Vai ai ai dollari di Paperone</a>

 si posiziona sul segnalibro dollari del file paperone.htm

Con il seguente codice è possibile saltare all'inizio della pagina: <a href="#top">Vai all'inizio pagina</a>

 

Ecco un esempio di pagina con link e segnalibri, potete stampare il codice HTML e osservare cosa accade ogni volta che selezionate un link.

Quando si inseriscono dei collegamenti ipertestuali è bene stare attenti a non disorientare coloro che stanno navigando con una miriade di collegamenti, facendo capire sempre in quale sezione ci si trova e come ritornare rapidamente alla home page. Ricordatevi anche che è preferibile utilizzare percorsi relativi, che continuano a funzionare anche se la cartella in cui si trova il file corrente viene spostata e rinominata.

Completata la sezione dedicata all'HTML di base, dalla prossima puntata inizieremo ad abbellire le nostre pagine parlando di immagini.


Ritorna ad inizio pagina testo e grafica di Francesco Battistelli Ritorna all'indice