   |
I link servono essenzialmente per collegare tra loro più documenti. Ne esistono di tre categorie: interni, locali e globali: i primi servono per collegare due parti della stessa pagina, mentre i secondi due pagine diverse dello stesso sito ed i terzi due pagine appartenenti a diversi siti. I link vengono inseriti con il Tag Ancora:
| <A HREF="percorso">...</A> |
Il percorso può essere scritto sia in maniera assoluta ( es.: http://www.sito.it/pagina.html ) e sia in maniera relativa (vedi qui per quest'ultimi).
Come abbiamo detto servono per puntare a due zone differenti della stessa pagina; come esempio, basti pensare al link Torna sù infondo a tale pagina.
| <A NAME="bordo superiore" HREF="#bordo inferiore">Giù</A> <A NAME="bordo inferiore" HREF="#bordo superiore">Sù</A> |
che viene visualizzato così:
Su |
Quindi l'attributo NAME serve per dare un nome al link ( e quindi alla zona della pagina ), a cui dovrà puntare poi il secondo link. Notare poi, come nell'HREF il percorso inizi con # e che sia rappresentato dal NAME dell'altro link. Questo è un altro semplice esempio.
E' possibile poi effettuare la stessa cosa usando dei pulsanti o delle immagini:
| |
Ecco il codice di questo esempio. Notare come l'inserimento di link-immagine consenta anche di inserire un commento al link con l'attributo ALT.
I link locali vengono scritti sempre usando il Tag Ancora e valgono gli stessi attributi dei precedenti; il file puntato dal link può essere sia una pagina web dello stesso sito oppure un file di estensioni diverse da quelle del web, come un file pdf:
| <A HREF="http://www.webstyling.it/index.php "> Homepage </A> |
| <A HREF="../info.pdf "> apri info.pdf </A> |
il secondo esempio viene visualizzato così: Apri info.pdf.
E' chiaro quindi, che con il Tag Ancora posso aprire sia pagine internet e sia altri documenti di altro formato.
Un altro esempio potrebbe essere quello del link per mandare una email al webmaster: mandami un'email
Questo è il codice:
| <A HREF="mailto:mioip@host.it" TARGET="void" > mandami un'email </A> |
E' anche possibile visualizzare un link con un'immagine, con il vantaggio di poter scrivere anche un messaggio con l'attributo ALT:
 |
I link esterni puntano a pagine esterne al nostro sito. Un esempio è: clicca qui per andare su Google. Il codice è :
| <A HREF="http://www.google.it" target="void"> Google </A> |
L'attributo HREF serve quindi per stabilire l'indirizzo della pagina a cui punta il link.
L'attributo TARGET = "valore", invece, serve per stabilire dove deve essere visualizzata la pagina da aprire. Il TARGET può assumere essenzialmente due valori: la visualizzazione di default è nella stessa pagina, mentre per far aprire la pagina in un'altra finestra si deve usare l'attributo TARGET con valore = " VOID " o = " _BLANK ":
| <A HREF="pagina.html">...</A> |
| <A HREF="pagina.html" TARGET="_blank">...</A> |
Per cambiare la dimensione o il colore del link bisogna usare l'attributo STYLE o il Tag FONT:
| <A HREF=" http://www.google.it " target=" void "> <FONT SIZE="5" COLOR="blue"> Google </FONT> </A> |
| <A HREF=" http://www.google.it " target=" void " STYLE=" color:blue "> Google </A> |
come valore del color nell'attributo STYLE, è usato talvolta un codice di colore scritto come % di rosso, green, blue ( rgb ); ad esempio " color:rgb( 0,255,0 ) " sarebbe blu. Per cambiare il font conviene usare una classe css; rimando alla guida CSS per ulteriori esempi.
Si possono scegliere i colori assunti dal link normalmente (attributo LINK), onmouse over (attributo VLINK) e una volta visitato (attributo ALINK). Quindi per cambiare i colori dei link, si può scrivere:
| <BODY LINK="blue" VLINK="red" ALINK="white"> |
che stabilisce rispettivamente i colori del link non visitato, visitato e quando ci si passa sopra con il mouse.