I link

Nel precedente incontro sono state realizzate delle semplici pagine Web statiche. Una pagina Web statica non contiene collegamenti ipertestuali (link) all'interno del documento o con altri documenti, né immagini o altri elementi che consentano ai lettori di interagire con il contenuto della pagina.

In questo incontro intendiamo descrivere le tecniche per creare documenti HTML che consentano di avere un controllo sulle modalità di consultazione delle pagine. Il lettore non dovrà limitarsi a far scorrere su e giù le pagine per leggerne il contenuto ma soprattutto dovrà essere in grado di passare agevolmente da una pagina all'altra di un documento HTML: per fare tutto questo bisogna inserire dei link nel file HTML. I link sono perciò elementi fondamentali nella stesura di un documento HTML perché trasformano un semplice documento di testo in documenti ipertestuali.

In particolare si parlerà:

• del tag <A> e dei suoi principali attributi,
• dei link con zone della medesima pagina,
• di come sia possibile definire dei link verso altre pagine presenti sul disco locale,
• dei link con altre pagine nel Web espressi tramite indirizzi URL,
• degli indirizzi URL, delle diverse parti che li compongono e del tipo di indirizzi che è possibile usare.

Seguiranno infine i metodi per gestire modalità più efficaci nella presentazione dei dati ossia

• le liste e
• le tabelle.

Come creare un link destinazione: l'attributo NAME

Il tag <A>, chiamato anche tag àncora o tag aggancio, è un tag contenitore e serve come base per tutti i link che saranno creati. Ha vari attributi: due di questi sono particolarmente importanti: NAME e HREF.

Ci sono varie forme per far riferimento alla relazione fra il documento che contiene il link e il documento puntato dal link. Noi utilizzeremo i seguenti termini, peraltro del tutto naturali:

• origine (o source), quando intendiamo identificare l'origine del collegamento e
• destinazione (oppure target ma spesso anche segnalibro), se si vuole intendere la destinazione del collegamento.

Specificare la destinazione di un link. Per consentire al lettore di passare da una zona all'altra all'interno dello stesso documento o per raggiungere uno specifico punto di un altro documento, serve uno strumento che specifichi la destinazione di un link. La prima forma del tag <A> permette appunto di risolvere questo problema:

• l'attributo NAME del tag <A> serve a indicare che il tag fungerà da destinazione di un link.

In sostanza la sintassi che definisce una destinazione in un file HTML è sintetizzata dalla figura seguente:

Fig. 1: Sintassi per definire una destinazione.

Come si vede l'attributo NAME permette di definire una etichetta o parola chiave, nel nostro esempio canto2, che servirà al browser per risolvere il collegamento quando viene selezionato il link che fa riferimento a questa etichetta; il browser si posizionerà quindi sul punto indicato dall'etichetta.

Proviamo a metter in pratica tutto ciò aprendo il file canti12.html. Per far ciò, entrati in HomeSite, è sufficiente selezionare File/Open e individuare la cartella che contiene il relativo file (già predisposto). Ora, anziché immettere direttamente il testo del comando, sfruttiamo le possibilità che ci vengono offerte dall'editor. Pertanto

• portatici a circa metà del file in corrispondenza dell'inizio del secondo canto,
• evidenziare con il mouse il relativo titolo cioè Canto II;
• Individuato sulla barra degli strumenti il pulsante Anchor (è all'interno di Common), selezionarlo.
• Appare la finestra che ci permette di editare i diversi attributi del tag <A>. Nella cella corrispondente all'attributo Name immettiamo canto2 e, infine,
• terminiamo l'operazione premendo il tasto OK.

L'editor inserisce automaticamente i necessari tag di apertura e chiusura attorno al testo selezionato nonché la corretta etichetta. Se ora andiamo a vedere come il browser visualizzerà tutto ciò (clic su Browse) ci accorgiamo subito che nulla è cambiato: il testo Canto II appare come aspettato e cioè come un'intestazione di livello 1 e nulla più.
Difatti il testo che si trova all'interno di un tag con l'attributo NAME, vale a dire una destinazione, è sempre visualizzato sullo schermo secondo il formato che è controllato dal tag contenitore che lo racchiude: nel nostro esempio il tag contenitore è <H1>. Le marcature delle destinazioni sono pertanto invisibili non avendo alcun effetto sulla visualizzazione.

Nota importante. Per creare link che funzionino correttamente va mantenuta la corretta sequenza dei tag. Con riferimento al precedente esempio, è facile commettere l'errore di chiudere il tag dell'intestazione prima di chiudere quello della destinazione, ottenendo in questo modo il codice errato seguente

<H1><a name="canto2">Canto II</H1></a>

Viceversa si può ottenere anche

<a name="canto2"><H1>Canto II</a></H1>

Nella prima eventualità il tag intestazione <H1> viene chiuso prima del tag <A> mentre succede l'opposto nel secondo esempio. In tali situazioni alcuni browser, ritenendo che l'autore abbia commesso un errore, addirittura ignorano completamente il tag di destinazione rendendo impossibile raggiungere da un link origine, la destinazione (fatto che in un ipertesto è particolarmente fastidioso). Ci si deve pertanto ricordare di chiudere sempre i tag contenitori nello stesso ordine in cui vengono creati; in altri termini, i tag interni vanno chiusi prima di quelli esterni.

Creare un link di origine: l'attributo HREF

L'altra forma del tag <A> è quella che definisce l'origine del collegamento. In effetti, esistono tre tipi di link d'origine:

• i link all'interno dello stesso documento,
• i link fra documenti di uno stesso sistema e
• i link fra documenti di sistemi diversi.

In questa sezione trattiamo il primo tipo in quanto è anche il più immediato, lasciando agli sviluppi successivi la trattazione degli altri due. I link del primo tipo permettono quindi di trasferire il controllo a qualche altra parte o zona del documento (o pagina) corrente.

L'attributo HREF. Ogni tag origine contiene l'attributo HREF, abbreviazione di Hypertext REFerence cioè riferimento ipertestuale. Questo attributo identifica il puntatore o percorso che conduce alla destinazione. La destinazione, come vedremo più avanti, dev'essere un indirizzo URL ma, nel nostro esempio, questa assume una forma semplifice ed ovvia: in sostanza

• il formato per un link che punta ad una destinazione compresa nel medesimo file è costituito dall'etichetta specificata nell'attributo NAME del tag destinazione, preceduto dal simbolo # (la ragione del simbolo # sarà chiara in seguito).

Per definire quindi un link con l'inizio del secondo canto nel file canto12.html si può procedere in tal modo:

• evidenziare il termine canto II che appare all'inizio del file subito dopo Prosegui al.
• Fare clic sul pulsante che rappresenta un'àncora compreso nella barra degli strumenti, sezione Common:
• viene aperta la finestra degli attributi del tag <A>: in corrispondenza dell'attributo HREF, nella prima riga, immettiamo la destinazione #canto2.
• Terminiamo l'operazione con un clic sul tasto OK.

L'editor inserisce la corretta coppia di tag <A> con il nome della destinazione racchiuso fra una coppia di virgolette doppie e preceduto dal simbolo #. La sintassi che emerge da questo esempio è interpretata dalla figura sottostante (fig. 2)

Fig. 2: Sintassi per definire un'origine entro il medesimo documento.

Per vedere se il link funziona a dovere basta ora passare all'anteprima (clic su Browse) e fare un semplice clic sul termine sottolineato: si dovrebbe in tal modo passare direttamente alla sezione della pagina che contiene il secondo canto dantesco. Volendo ritornare al punto di partenza possiamo sfruttare il tasto di ritorno alla videata precedente e presente in alto a sinistra della finestra di visualizzazione: è rappresentato da una piccola freccia rivolta a sinistra .

Il testo compreso tra la fine del tag iniziale <A> e l'inizio del tag finale </A> è quello che indicherà al lettore che esiste un collegamento ipertestuale. Questo si differenzia dal testo normale anche per il colore e, spesso, anche per la sottolineatura. Inoltre, quando si posiziona il puntatore del mouse su un link, il puntatore stesso (che di solito è una freccia) assume la forma di una mano con l'indice puntato. Questo cambiamento di forma del puntatore è un'altra indicazione che il testo sottostante è un link.
Si noti che, dopo aver utilizzato per una prima volta il collegamento, che il testo stesso ha cambiato di colore, generalmente dal blu al violetto: quest'altro fatto mette in evidenza che il link è già stato visitato. Ricordando gli attributi già accennati del tag <BODY>, comprendiamo come sia possibile modificare tutti questi colori agendo opportunamente sulle numerose opzioni di questo tag.

Infine, poiché molti sistemi operativi di computer trattano in modo diverso i caratteri minuscoli da quelli maiuscoli, converrà porre attenzione a come si scrivono gli indirizzi: in particolare questi vanno scritti esattamente come sono stati specificati nel tag destinazione. Per esempio, in questi sistemi operativi la destinazione "canto2" è diversa da "Canto2" pertanto se si è utilizzato un tag destinazione con l'attributo NAME="Canto2", si dovrà avere anche un tag di origine con l'attributo HREF="#Canto2". Un'altra buona pratica di scrittura per tali etichette è quella che evita di utilizzare più termini separati da spazi: se possibile, si utilizzino nomi composti da un solo termine.

Link fra documenti dello stesso sistema

I documenti molto lunghi possono causare dei problemi ai lettori. Innanzitutto, un documento lungo richiede più tempo per essere caricato (tanto più se lo si pubblica nel Web). In secondo luogo, è meglio scindere un documento complesso in una serie di piccoli documenti, in modo che il lettore possa spostarsi agevolmente fra di essi e ritornare alla pagina principale da uno qualsiasi degli altri documenti. Anziché presentare un unico documento complesso che fornisca informazioni su, diciamo, 10 argomenti, è preferibile creare 10 documenti più piccoli, ciascuno dei quali tratta un argomento specifico, e un documento principale (index) che funziona da menu per gli altri. Oltre a essere più facili da consultare per chi deve leggerli, i documenti più piccoli sono anche più semplici da mantenere per gli stessi autori.

In questo esercizio intendiamo sviluppare un esempio che attiva un link tra due pagine HTML locali, ovvero situate entrambe sul medesimo disco fisso e nella medesima cartella (directory). Innanzitutto si deve disporre di due pagine: nel nostro caso il file della prima (canti12.html) è già aperto (se no, caricatelo): la seconda pagina, contenente i canti III e IV dell'Inferno, è memorizzata nel file canti34.html che si trova nella medesima cartella del precedente.

In canti12.html portiamo il cursore sulla riga corrispondente a Prosegui al canto III.

• Evidenziato canto III,
• facciamo un clic sul pulsante relativo al tag <A> cioè quello individuato dall'icona che rappresenta un'àncora. Poiché intendiamo puntare ad un file distinto contenuto in una cartella, nella finestra di dialogo che è stata aperta,
• facciamo un altro clic sull'icona gialla di cartella aperta: appare una nuova finestra che ci permette di selezionare la cartella e il file voluto: nel nostro caso
• selezioniamo il file canti34.html e quindi clic su Open.
• Come possiamo notare è stato aggiunto il nome del file nella casella corrispondente all'attributo HREF.
• Un ultimo clic su OK ci riporta all'editor.

Un'analisi del testo immesso con la procedura appena conclusa mette in evidenza che in luogo del nome della destinazione è stato inserito nient'altro che il nome del file di destinazione. La sintassi è pertanto ancora la seguente:

Fig. 3: Sintassi per definire un link ad un documento nella medesima cartella.

l'attributo HREF punta adesso ad un file separato. Notate che l'indirizzo non inizia più con il simbolo # e questo per indicare al browser che il collegamento è fatto con un altro file, non con un'altra zona del documento corrente. La prova del funzionamento del link in modalità Browse mette in evidenza che il browser richiama il file di destinazione e lo visualizza partendo dall'inizio. Il link inoltre appare ancora sottolineato e non si distingue dal link immesso precedentemente: dal punto di vista del browser un link è un link, senza alcuna distinzione rispetto al tipo di destinazione. Ciò non toglie che nella finestra del browser, generalmente nella riga di stato (sul margine in basso a sinistra della finestra attiva), appaia il testo completo della destinazione: con un po' d'esperienza potremo quindi individuare le diverse destinazioni puntate dal link.

Nel caso che il file canti34.html, anziché nella cartella corrente, fosse presente in una cartella di livello inferiore dal nome, per esempio, Inferno, si sarebbe ottenuta un'origine del tipo

<A HREF="Inferno/canti34.html>canto III</A>

che suggerisce come dev'essere specificato il percorso di un file: le diverse cartelle sono separate dalla barra /, anziché come usuale nei sistemi che utilizzano Windows 95/98, dalla barra inversa (\).

Come ulteriore esercizio, descriviamo la procedura per inserire un secondo link, questa volta al canto IV dell'Inferno dantesco. Innanzitutto va definita la destinazione: pertanto va aperto il file canti34.html con le tecniche usuali di apertura di un file (File/Open...). L'editor mostra che vi sono due file aperti aggiungendo una linguetta nella parte inferiore della finestra: si potrà passare dall'uno all'altro con un semplice clic su questa linguetta oppure sul tasto presente nell'angolo superiore sinistro della finestra dell'editor.

Fatta scorrere la barra verticale troviamo l'inizio del canto quarto e in corrispondenza al titolo Canto IV con la tecnica vista sopra, inseriamo una destinazione di nome, ovviamente, canto4 (pulsante seguito dall'immissione di canto4 nella cella dell'attributo NAME).

Passiamo nel file canti12.html cliccando sulla linguetta (inferiore) che lo identifica. Qui dobbiamo inserire l'origine: la procedura è del tutto analoga a quella già vista con l'unica differenza che ora dobbiamo dire al browser da dove iniziare la visualizzazione. Allora

• evidenziare canto IV presente all'inizio del file.
• clic sul pulsante àncora ,
• clic sull'icona gialla di apertura delle cartelle,
• selezionare il file canti34.html e clic su Open.
• Ritornati nella finestra Anchor fare due clic sulla cella che contiene il nome del file in modo da trovarsi con il cursore posizionato alla fine del nome non evidenziato.
• Aggiungere ora la destinazione entro al file dove vogliamo che il browser ci posizioni, ossia immettere #canto4.
• Infine, clic su OK.

Ancora una volta l'analisi del testo inserito automaticamente dall'editor ci fa capire la corretta sintassi:

Fig. 4: Link ad una destinazione in un documento diverso della medesima cartella.

In corrispondenza dell'attributo HREF, dopo il nome della pagina che il browser deve caricare, va specificato con il segno # seguito dal nome dell'etichetta, la destinazione da raggiungere entro tale pagina (file): in tal modo si chiede al browser di caricare la pagina canti34.html che si trova nella cartella corrente e quindi di far scorrere il contenuto del documento fino a trovare l'etichetta canto4 fino a portare il testo selezionato in cima allo schermo.

Se ora proviamo il link appena definito scopriamo che...non funziona! Ci siamo dimenticati di salvare le modifiche apportate alla pagina canti34.html: solo dopo tale operazione l'anteprima del nostro editor potrà correttamente funzionare. Fatto clic sulla linguetta di canti34.html per renderlo attivo, salviamo il file con File/Save o un clic sull'icona della barra degli strumenti che mostra un floppy. Ora ritornati in canti12.html attiviamo l'anteprima e constatiamo il corretto funzionamento del collegamento.