I collegamenti ipertestuali

Collegamenti ipertestuali.
Argomenti trattati:
- Premessa:
Cosa sono e perchè sono l'essenza del Web.
- Il collegamento ipertestuale ed i suoi attributi:
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 quasi 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 collegamento ipertestuale ed i suoi attributi
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.
Il linguaggio HTML - prof. Maurizio Gambino | 06 Collegamenti ipertestuali.
<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:[email protected]">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.
Il linguaggio HTML - prof. Maurizio Gambino | 06 Collegamenti ipertestuali.
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>.
Il collegamento ipertestuale ed i suoi attributi: 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.
Il collegamento ipertestuale ed i suoi attributi: 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>
Il collegamento ipertestuale ed i suoi attributi: 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):
Il linguaggio HTML - prof. Maurizio Gambino | 06 Collegamenti ipertestuali.
<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 collegamenti visti finora viene collegato un documento ad un'altro o
ad un oggetto o ad un indirizzo e-mail, con questo tag viene creato un collegamento
ipertestuale alla stessa pagina in cui è inserito il link, in un punto specifico della stessa.
Oppure ad un'altra pagina e sempre ad un punto specifico della stessa.
Basta semplicemente inserire nella destinazione (stessa pagina o pagina esterna), nel
punto in cui vogliamo collegarci, il tag <A NAME="argomento"> all'inizio dell'argomento.
Esso è utilizzato per pagine web lunghe e complesse, nel caso di link interni, che
richiedano un menu in testa alla pagina che consenta un rapido spostamento tra gli
argomenti trattati per trovare velocemente quello da cercare, oppure di link esterni facilitati
nella reperibilità delle informazioni.
Un esempio servirà a chiarire la metodologia di applicazione:
<html><head><title>Pagina con link ad argomenti interni</title></head>
<body>
<h1>Benvenuti nella pagina dell'argomento.</h1>
<br><h2>Sotto sono riportati i temi trattati</h2><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><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>
Il linguaggio HTML - prof. Maurizio Gambino | 06 Collegamenti ipertestuali.
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 non funzionare con Mozilla Firefox.
Il linguaggio HTML - prof. Maurizio Gambino | 06 Collegamenti ipertestuali.