Il Manuale di HTML di Gabriele Gigliotti

Lezione 6: i link

I link più precisamente hyperlink, in italiano collegamenti ipertestuali sono la quintessenza del Web. Un link altro non è che del testo o un'immagine, posto all'interno di un documento che funziona come puntatore ad altre risorse. In questa lezione imparerai come creare un link che punti:

ad un'altra pagina dello stesso sito;
ad un altro sito;
ad un diverso punto della stessa pagina;
ad un indirizzo di posta elettronica

Per creare un collegamento si ricorre alla coppia di tag <A> e </A>.
Il tag di apertura deve necessariamente avere l'attributo href="percorso/nomedocumento" qualora si inserisca tra doppi apici solo il nome del documento il browser assumerà che esso si trova nella stessa directory della pagina corrente.
Per cui posso scrivere: <A href="altrapagina.htm">collegamento ad un'altra pagina nella stessa directory</A>
Questa coppia di tag viene letta dal browser dando luogo a questo risultato:
collegamento ad un'altra pagina nella stessa directory
Qualora il documento cui punta il link si trova in una diversa directory, questa dovrà essere specificata.
<A href="esempi/altrapagina.htm">collegamento ad un'altra pagina di una diversa directory</A>
collegamento ad un'altra pagina di una diversa directory

In questo caso, il documento a cui punta il collegamento si trova nella directory esempi, il nome di tale directory va specificato prima del nome della pagina e va seguito dalla barra inversa.
Se il link punta ad una pagina di un altro sito è necessario inserire l'indirizzo completo del sito in questione, ad esempio se voglio creare un link che punti al sito del'A.GE.DI. (Associazione Genitori Disabili) scriverò:
<A href="http://www.agedi.it">A.GE.DI.</A>
ed il browser produrra questo risultato:

A.GE.DI.

Non solo il testo ma anche un'immagine può diventare un collegamento ad un'altra risorsa. In questo caso sarà necessario inserire il tag <IMG> tra la coppia di tag <A> e </A>, mi spiego meglio con un esempio.
Prendiamo in considerazione questa immagine

essa rappresenta il logo della Disabled People's International.
Per far diventare questa immagine un link al sito dell'A.GE.DI. procediamo come segue:
<A href="http://www.agedi.it"><IMG src="agedi.gif" width="136" height="142" alt="Associazione Genitori Disabili"></A>
Il risultato prodotto da questi tag è il seguente:

in genere le immagini che rappresentano un collegamento ad un'altra risorsa sono circondate da un bordo blu, il quale potrebbe anche non piacere, proprio per questo motivo è possibile implementare l'attributo border attribuendogli valore 0 cosi da eliminare il bordo in questione. Sulla base di quanto appena detto modifichiamo la serie di tag precedentemente illustrati:
<A href="http://www.agedi.it"><IMG src="agedi.gif" width="136" height="142" alt="Associazione Genitori Disabili" border=0></A>
Il browser leggerà l'informazione aggiuntiva fornita dall'attributo border fornendo questo risultato:

In questo caso sparirà il bordo che prima circondava l'immagine, se invece se si vuole aumentarne lo spessore, sarà sufficente indicare per l'attributo border un valore più grande di 1.
Come anticipato i link possono puntare anche a punti diversi della stessa pagina. Prima di creare un collegamento ad un punto preciso della pagina bisogna marcare questo punto. Per far ciò si ricorre sempre alla coppia di tag <A> e </A>. Tuttavia questa volta l'attributo che supporta il tag di apertura è name="nome_dell'ancora". Una volta creata l'ancora si crea un collegamento a quest'ancora e il gioco e fatto.
Per spiegarmi meglio mi aiuto con un esempio riprendendo il listato che ho impiegato nella lezione 3.
Esempio 6.1

<HTML>
<HEAD>
<TITLE>racconto</TITLE>
</HEAD>
<BODY>
<H1 align=center>

Ospiti e letti
</H1>

La casa in cui vivo con la mia famiglia è
piccola ma
accogliente, che sia piccola è un dato di fatto, che sia accogliente invece lo hanno decretato in massa i miei parenti. 
Questo fine settimana, ad esempio, arrivano alcuni cugini di non so quale grado a farci visita.

L'arrivo di questi ospiti segna inevitabilmente l'inizio di spossanti giochi di potere all'interno della famiglia, doppi e tripli giochi sono del tutto naturali. 
L'obiettivo ultimo è quello di accaparrarsi un letto decente per la notte.

A causa delle mie pessime doti diplomatiche e di una cronica incapacità di negoziare alcunchè spesso sono proprio io ad aggiudicarmi il peggiore letto della casa...
  ...(continua)

</BODY>
</HTML>

Supponiamo che in fondo a questo documento voglia inserire un link che punti in testa al documento stesso, creando un effetto analogo a quello usato in ogni lezione di questo manuale al cui termine è posto un link che consente di raggiungere la testa del documento senza che sia necessario far scorrere la barra verso l'alto.
Procederò come segue, innanzi tutto marco il punto che si vuole raggiungere, che in questo caso è il punto più alto della pagina e cioè il titolo per cui subito prima del tag <H1 align=center> scriverò:
<A name="tornasu"></A>
Inoltre in fondo al listato inserisco il link che punti al punto marcato operando nel modo seguente:
<A href="#tornasu">torna su</A>
Così ho creato un collegamento al punto che ho marcato in testa al documento.

Ricapitolando ecco l'intero listato:

<HTML>
<HEAD>
<TITLE>racconto</TITLE>
</HEAD>
<BODY>
<A name="tornasu"></A> <H1 align=center>

Ospiti e letti
</H1>

La casa in cui vivo con la mia famiglia è
piccola ma
accogliente, che sia piccola è un dato di fatto, che sia accogliente invece lo hanno decretato in massa i miei parenti. 
Questo fine settimana, ad esempio, arrivano alcuni cugini di non so quale grado a farci visita.

L'arrivo di questi ospiti segna inevitabilmente l'inizio di spossanti giochi di potere all'interno della famiglia, doppi e tripli giochi sono del tutto naturali. 
L'obiettivo ultimo è quello di accaparrarsi un letto decente per la notte.

A causa delle mie pessime doti diplomatiche e di una cronica incapacità di negoziare alcunchè spesso sono proprio io ad aggiudicarmi il peggiore letto della casa...
  ...(continua)

<A href="#tornasu">ritorna all'inizio della pagina</A>

</BODY>
</HTML>

Per vedere quale risultato produce questo listato hai due possibilità

puoi ricopiarlo in un documento di testo salvandolo con estensione .htm
puoi schiacciare il bottone che vedi qui sotto, si aprirà un'altra finestra nella quale potrai osservare il risultato che il browser produce alla lettura del listato.

Ogni ancora deve avere un nome univoco se così non fosse il tuo browser potrebbe arrabbiarsi e reagire in malo modo!
Puoi anche voler creare un link che punti ad un determinato punto di un'altra pagina. Anche in questo caso devi marcare la destinazione del tuo collegamento, a questo punto dovrai solo preoccuparti di aggiungere nel link oltre al nome dell'ancora, anche il nome della pagina in cui esso si trova.
Il procedimento è analogo a quello precedente.
Ad ogni modo, vediamo qual'è il modo corretto di procedere. Se volessi creare un link da questa lezione ad un punto specifico della lezione 2, ad esempio all'inizio del listato 2.3, dovrò agire come segue:

nel documento HTML della lezione 2, immediatamente prima di listato 2.3 inserisco l'ancora:
<A name="listato"></A>
in un qualunque punto di questa pagina creo il link a quel punto specifico della lezione 2 operando come segue:
<A href="lezio2.htm#listato">vai al listato 2.3</A>
Quest'ultima linea produce il seguente risultato
vai al listato 2.3

Un link può puntare anche ad un indirizzo di posta elettronica, la sintassi in questo caso è leggermente diversa ed è la seguente:
<A href="mailto:gabriele.gigliotti@lamezianet.it">e-mail</A>
dinanzi ad un'istruzione del genere il browser creerà un link nella solita maniera:
e-mail
Questa volta se si clicca sul link questo non porterà da nessuna parte, ma se il mailer, ossia programma per la gestione della posta elettronica è stato correttamente configurato, si aprirà la mascherina che consente di spedire un messaggio e-mail.
C'è un attributo del tag <A> al quale non abbiamo fatto riferimento, si tratta dell'attributo target, apprenderai come utilizzarlo nella sezione relativa ai frames poichè il suo buon uso permette di ottenere una corretta gestione di quest'ultimi.

lezione 5

indice

lezione 7

Nella lezione tre imparerai a formattare il testo, vedrai come modificare il font, la sua dimensione il suo colore ecc.