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">link ad un'altra pagina</A>
Questa coppia di tag fornisce questo risultato:
link ad un'altra pagina
Quando il documento cui punta il link si trova in una diversa directory, questa dovrà essere specificata.
<A href="example/mostra.htm">link ad un'altra pagina di una diversa directory</A>
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 mio sito scriverò:
<A href="http://www.ciaburro.it">Programmare in ...</A>
ed otterrò questo risultato:
Programmare in ...
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.
Per far diventare una immagine un link al mio sito scriverò:
<A href="http://www.ciaburro.it"><IMG src="figura.gif"></A>
ottenendo:
le immagini che rappresentano un collegamento ad un'altra risorsa,in genere, sono circondate da un bordo blu,
che potrebbe non piacere, allora è possibile implementare l'attributo border
attribuendogli valore 0 cosi da eliminare il bordo in questione.
Vediamo come fare:
<A href="http://www.ciaburro.it"><IMG src="figura.gif" border=0></A>
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( ad esempio 2,3,4,5..).
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.
Vediamo un esempio:
<HTML>
<HEAD>
<TITLE>esempio</TITLE>
</HEAD>
<BODY>
<H1 align=center>
<FONT face="comic sans ms" color="#003333">
Mi presento
</FONT></H1>
<P>
<FONT face="comic sans ms" color="#FF9933"> Sono un ragazzo di Caserta,una città
<FONT size=-1>piccola</FONT> ma
<FONT size=+1>accogliente</FONT>, che sia piccola è un dato di fatto, che sia accogliente invece è una mia opinione.<BR>
Il fine settimana, spesso andiamo a Napoli per trovare più cose da fare.</FONT></P>
<P>
<FONT face="comic sans ms" color="#CC9933"> Il capoluogo della regione si trova ad un itro di schioppo.<BR>
Ed è quindi naturale per noi andarci spesso.</FONT></P>
<P>
<FONT face="comic sans ms" color="#FF9933"> Ma in generale la mia città mi sta bene.
<BR>
...(continua)</P>
</BODY>
</HTML>
Supponiamo che in fondo a questo documento voglia inserire un link che punti in testa al documento stesso,
così come accade per questo tutorial.
Procedero 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>
Cosi ho creato un collegamento al punto che ho marcato in testa al documento.
Quindi l'esempio si modifica in questo modo:
<HTML>
<HEAD>
<TITLE>esempio</TITLE>
</HEAD>
<BODY>
<A name="tornasu"></A>
<H1 align=center>
<FONT face="comic sans ms" color="#003333">
Mi presento
</FONT></H1>
<P>
<FONT face="comic sans ms" color="#FF9933"> Sono un ragazzo di Caserta,una città
<FONT size=-1>piccola</FONT> ma
<FONT size=+1>accogliente</FONT>, che sia piccola è un dato di fatto, che sia accogliente invece è una mia opinione.<BR>
Il fine settimana, spesso andiamo a Napoli per trovare più cose da fare.</FONT></P><P>
<FONT face="comic sans ms" color="#CC9933"> Il capoluogo della regione si trova ad un itro di schioppo.<BR>
Ed è quindi naturale per noi andarci spesso.</FONT></P><P>
<FONT face="comic sans ms" color="#FF9933"> Ma in generale la mia città mi sta bene.
<BR> ...(continua)</P><P><A href="#tornasu">ritorna all'inizio della pagina</A> </BODY>
</HTML> Puoi ricopiarlo in un documento di testo salvandolo con estensione .htm Ogni ancora deve avere un nome univoco. 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.Un link può puntare anche ad un indirizzo di posta elettronica, la sintassi in questo caso è leggermente diversa ed è la seguente:
<A href="mailto:giucia@freemail.it">e-mail</A>
un'istruzione del genere 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. Un attributo del tag <A> importante, è l'attributo target, permette di indirizzare l'output su porzioni diverse del video. Ad esempio l'attributo target="_blank" permette di convogliare il link su una nuova finestra.
|
Collegamento a: un documento |
<A HREF="URL"></A> | ||
| un riferimento | <A HREF="URL#***"></A> | (in un altro documento) | |
| <A HREF="#***"></A> | (nello stesso documento) | ||
| una finestra | <A HREF="URL" TARGET="***"></A> | ||
| mouse click | <A HREF="URL" ONCLICK="***"></A> | (Javascript) | |
| mouse selezione | <A HREF="URL" ONMOUSEOVER="***"></A> | (Javascript) | |
| mouse deselezione | <A HREF="URL" ONMOUSEOUT="***"></A> | (Javascript) | |
| indirizzo email | <A HREF="mailto:@"></A> | ||
| con oggetto del messaggio | <A HREF="mailto:@?SUBJECT=***"></A> | §¿(utilizzare il carattere ?) | |
| Definizione del riferimento | <A NAME="***"></A> |
|