Collegamenti ipertestuali. Argomenti trattati: - Premessa: Cosa sono e perchè sono l'essenza del Web. - : Come realizzare e personalizzare i vari tipi di link a pagine o risorse. - Il collegamento ipertestuale interno: Come realizzare link allo stesso documento. - Gli attributi LINK, ALINK e VLINK: Come utilizzare nuovi colori per definire i link della pagina web. Premessa Da più di vent'anni si sente parlare di ipertesti e di come questi reggano il Web. Un ipertesto è, come visto nelle precedenti lezioni, un modo di formattare caratteri che compongono un documento in forma non sequenziale. Per comprendere questa caratteristica si pensi ad un libro cartaceo che si struttura in indice, capitoli e glossario. La struttura sequenziale prevede che si legga l'indice, per poi passare ai capitoli (dal primo all'ultimo) e terminare con il glossario dei termini. Il lettore, in questo caso, ha un percorso di lettura che lo porta necessariamente a leggere il primo capitolo per giungere all'ultimo, in modo da comprendere la natura delle informazioni che vi sono trascritte. Con gli ipertesti questa struttura sequenziale cessa di esistere grazie ai collegamenti ipertestuali (link) che permettono di seguire un percorso informativo senza seguire necessariamente un ordine sequenziale. La peculiarità di saltare da un punto all'altro del documento è tipica del WWW, dove spesso seguendo un documento si passa da un sito all'altro senza soluzione di continuità. Il funzionamento di base degli ipertesti è in massima parte dovuto agli hyperlink o collegamenti, di cui il tag specifico <A> (la A sta per Anchor) è la base per la loro realizzazione.
Esso è subito seguito dall'indispensabile attributo HREF= il cui valore è l indirizzo della risorsa da collegare. <A HREF="URL della risorsa"> HREF sta per Hypertext Reference e contiene l'url (percorso e nome del file) della pagina, del sito o di qualsiasi elemento vogliamo collegare alla nostra pagina. La sintassi con cui si può progettare un link è la seguente: <A HREF="http://www.miosito.it/">Visita il mio sito</a> per collegamenti a siti in Rete; oppure <A HREF="percorso/miapagina.htm">Vai alla mia pagina</a> per collegamenti interni al nostro lavoro; oppure <A HREF="percorso/elemento.zip">Scarica il mio elemento sul tuo PC</A> per collegamenti a risorse diverse dalle pagine web, sia interne che esterne; o anche <A HREF="mailto:mionome.miocognome@mioprovider.it">Mandami una e-mail</a> per collegamenti a protocolli di posta elettronica (di solito si apre il vostro gestore locale di posta elettronica, Outlook o altro); e, per ultimo <A HREF="ftp://ftp.miosito.it">Accedi al mio spazio di Amministrazione</A> per collegamenti diretti al protocollo di comunicazione per il trasferimento dei files; Come potete notare nel codice sopra citato vi sono diversi esempi che riguardano i link verso altre pagine, siti oppure oggetti; ognuno di essi è caratterizzato dal fatto di avere o meno un metodo di comunicazione diverso denominato protocollo di comunicazione. Dagli esempi potete vedere che per collegarsi ad un sito bisogna anteporre all'url il protocollo http:// mentre per i collegamenti alla posta elettronica il protocollo è mailto: il quale attiverà la procedura per la spedizione di un messaggio attraverso il nostro PC; per spostarci tra le singole pagine del sito o per scaricare gli elementi non vi è alcun bisogno di protocolli ma di percorsi (<a href="nomecartella/nomefile.estensione). L'ultimo collegamento è dedicato al protocollo FTP (File Transfer Protocol, protocollo per il trasferimento dei file), utilizzato per il trasferimento di file attraverso la Rete che è poi il metodo principale utilizzato per pubblicare un sito nel web. I testi "Visita il mio sito", "Vai alla mia pagina", "Scarica il mio elemento sul tuo PC", "Mandami una e-mail" oppure "Acccedi al mio spazio web" verranno visualizzati in carattere blue e sottolineato in modo da evidenziare il fatto che essi rappresentano un collegamento ipertestuale. Naturalmente cliccando su di essi col puntatore del mouse si raggiungono gli URL www.miosito.it, la pagina miapagina.htm, l'oggetto elemento.zip oppure si attiva la procedura automatca per spedire un messaggio per posta elettronica.
La procedura FTP invece attiverà una nuova risorsa di rete in cui si chiede di inserire il nome utente e la password di accesso allo spazio web presente. E' possibile sostituire il testo che funge da collegamento ipertestuale con un'immagine, e l'effetto dinamico rimarrà identico. Infine, il tag <A> ha bisogno di un tag di chiusura che ne delimiti il funzionamento agli elementi contenuti tra l'apertura e, appunto, la sua chiusura </A>. Attributo TARGET TARGET è un attributo implementato per esigenze legate principalmente alla gestione di un sito suddiviso in frame, argomento che tratteremo nelle prossime lezioni. In un sito così progettato, infatti, questo attributo indica in quale frame debba essere visualizzato il documento. Per adesso tratteremo questo attributo per un uso quale il caricamento in un'altra finestra del browser dell'elemento indicato nell'attributo HREF, attraverso la seguente sintassi: <A HREF="http://www.miosito.it" TARGET="_new">Visita il mio sito</a> Il valore _new indica al browser di caricare la pagina relativa al sito www.miosito.it in una nuova finestra. Se invece avessimo voluto che la pagina www.miosito.it fosse caricata nella stessa finestra, sostituendo la precedente con una nuova pagina, avremmo inserito il valore _self. Il lancio di nuove finestre da link con _new può essere molto utile nel caso in cui si rimandi a risorse esterne e non si voglia perdere il visitatore, che in questo modo terrà sempre aperta la risorsa iniziale da cui è partito. Attributo TITLE Come per il tag IMG anche nei collegamenti ipertestuali è possibile definire un testo di commento, che ne indichi una sommaria descrizione, attraverso l'attributo TITLE, il quale si attiva quando il mouse si ferma sul link: <A HREF="http://www.miosito.it" TITLE="Il mio sito personale sul Web"> Visita il mio sito</a>
Attributo HREFLANG Con "hreflang" si indica la lingua con cui è scritto il documento: si tratta di un attributo che migliora l accessibilità del sito, oltre ad essere potenzialmente utile per i motori di ricerca (l attributo può essere utilizzato ad esempio per specificare la presenza di una sezione del proprio sito in lingua inglese): <a href=http://www.miosito.it/eng/" hreflang="eng" title="english Version"> <img src="images/english_flag.jpg"></a> In questo caso, come molto utilizzato in Rete, abbiamo usato l'immagine di una bandiera inglese per evidenziare il fatto che nel nostro sito vi sono contenuti in questa lingua. Il collegamento ipertestuale con argomento Finora abbiamo analizzato collegamenti ipertestuali verso risorse esterne o altre pagine di uno stesso sito, ma è possibile realizzare collegamenti ipertestuali verso punti specifici dello stesso documento. Questi tipo di ancoraggio viene utilizzato quando l'argomento trattato è particolarmente lungo e la suddivisione in più pagine comporterebbe un dispendio in ambito di risorse e tempi. La dichiarazione per utilizzare tale tipo di collegamento è: <A HREF= "nome_pagina.htm#argomento">nome dell'argomento</a>. In altri termini se con i link visti finora viene collegato un documento ad un'altro o ad un altra risorsa, con questo tag viene creato un collegamento ipertestuale alla stessa pagina in cui è inserito il link, in un punto specifico della stessa. Basta semplicemente inserire nella destinazione (stessa pagina), nel punto in cui vogliamo collegarci, il tag <A NAME="argomento"> all'inizio dell'argomento. Esso è utilizzato per pagine web lunghe e complesse che richiedano un sommario in testa alla pagina per un rapido spostamento tra gli argomenti trattati e trovare velocemente quello da cercare tra le informazioni inserite. Un esempio servirà a chiarire la metodologia di applicazione: <html><head><title>pagina con link ad argomenti interni</title></head> <body> <font face= Arial size=4>benvenuti nella pagina dell'argomento.</font> <br><font size=3>sotto sono riportati i temi trattati<p> <a href="#argomento1">vai all'argomento 1</a><br> <a href="#argomento2">vai all'argomento 2</a><br>
... <a href="#argomenton">vai all'argomento N</a></font><p> <hr> // eventuale linea di separazione tra menu ed argomenti. <a name="argomento1"> Testo dell'argomento1... <a name="argomento2">testo dell'argomento 2...... </body> </html> Gli attributi LINK, ALINK e VLINK Occupano un importante ruolo nelle pagine web gli attributi LINK, ALINK e VLINK. Essi sono attributi del tag BODY, esattamente come i già trattati BGCOLOR e BACKGROUND, ed il loro utilizzo ci permette di personalizzare il colore dei collegamenti ipertestuali presenti nalla pagina. <BODY LINK="red"> L'attributo LINK definisce il colore della porzione di testo definito come collegamento ipertestuale. Nel succitato esempio tutti i collegamenti ipertestuali presenti nella pagina non saranno più visualizzati in blu, colore di default se LINK non fosse definito, ma rossi (red). Tale valore può essere espresso anche in valore RGB come già trattato in precedenza con il citato attributo BGCOLOR. Quando si clicca su un collegamento ipertestuale lo stesso diviene attivo e, se utilizziamo l'attributo TARGET="_new", è possibile vedere che lo stesso assume un colore diverso da quello impostato dall'attributo LINK (o dal blue di default). Con l'attributo ALINK, Active LINK, definiamo il colore di un link attivo. Esso è particolarmente utile se nel nostro sito utilizziamo i frame (altamente sconsigliati da qualche anno da parte del Consorzio) per permettere di tenere in visualizzazione statica i link di un sito. <BODY LINK="red" ALINK="yellow"> A questo punto quando una pagina, collegata da un link, è stata visitata, lo stesso link assume un ulteriore diverso colore, specie se come detto utilizziamo i frame per la visualizzazione dei link, da quello impostato negli attributi LINK e ALINK. Questo colore può anch'esso, grazie all'attributo VLINK (Visited LINK) essere modificato agendo come segue: <BODY LINK="red" ALINK="yellow" VLINK="green"> Il comportamento di questi attributi funziona pienamente con Internet Explorer mentre il solo attributo ALINK sembra avere qualche problema con altri browser.