Links o Ancore Una pagina senza Links (ancore) non sarebbe una pagina web. La vera forza delle pagine web è proprio quella di agganciare ed essere a sua volta agganciate alle altre pagine rendendo tutta la rete un unico grande documento. Quando cliccate sopra un link azionate un meccanismo, di fatto interagite con la pagina web. Questo meccanismo potrebbe essere semplicemente un cambio pagina o l'inizio dello scaricamento di un file o l'apertura del vostro programma di posta elettronica preferito per inviare mail. Tutte queste azioni sono gestite dal tag ancora <A> di sicuro uno dei tags più importanti di HTML
<A>...</A>
L'elemento <A> necessita di uno dei due attributi possibili, e cioè NAME o HREF, da solo infatti non servirebbe a nulla. Vediamo questi due attributi:
NAME
L'attributo NAME serve per creare una specie di etichetta, questa viene collocata nel punto esatto in cui è stata creata, sarà poi possibile richiamarla con l'elemento <A> seguito dall'attributo HREF. In questo modo anziché richiamare una pagina richiameremo quel punto preciso dove si trova l'etichetta.
Complicato?
Con NAME si crea un punto nel documento e con HREF="#nome assegnato al name" si raggiunge quel punto, praticamente un collegamento ipertestuale normalissimo con la sola differenza che anziché richiamare una nuova pagina se ne richiama anche o un punto preciso della stessa.
Vediamo un esempio:
|
<a name="weblink"></a> Così facendo ho creato un'etichetta col nome weblink
|
L'etichetta risulterà essere completamente trasparente alla pagina web, cioè non si vedrà nulla a video. Fatto questo non resta che richiamarla da qualsiasi altra parte del documento o da qualsiasi altra pagina web. Il link cliccato sposterà la visualizzazione nel punto preciso dove è stata creata e collocata l'etichetta. Poco più avanti, spiegando le varie possibilità di HREF, sarà possibile avere una dimostrazione pratica di come funziona l'etichetta WebLink appena creata.
HREF
L'attributo HREF (Hypertext REFerence) all'interno dell'elemento <A> trasforma in un collegamento ipertestuale il testo o l'immagine che segue fino alla chiusura dell'elemento con </A>.
Generalmente il testo o la cornice dell'immagine diventa di colore blu sottolineato salvo diverse impostazioni volute all'interno dell'elemento <body> o di un CSS. Questo per meglio evidenziare che si tratta di un collegamento, il cursore del mouse una volta posizionato sopra la scritta (o l'immagine usata) si trasformerà in una piccola mano col dito indice teso pronto a premere il link. Vediamo quali sono le diverse forme per questo attributo:
Deprecato, per cambiare colore ai links meglio usare una dichiarazione di style, in linea o su foglio esterno:
a:link {color: #0000cc;}
a:visited {color: #009900;}
con possibilità di eliminare la sottolineatura grazie alla proprietà: text-decoration: none;
|
Nota:, in aggiunta alle due pseudoclassi: link e visited ne esistono altre dinamiche quali: hover focus ed active. Molto interessante hover che permette di rendere dinamico il passaggio del mouse sopra ad un link creando un effetto di animazione, come per esempio un semplice cambio di colore.
a:link { ~ }
a:visited { ~ }
a:hover { ~ }
a:focus { ~ }
a:active { ~ }
Per evitare conflitti le pseudoclassi dovranno essere inserite nell'ordine sopra riportato. Se infatti venisse dichiarata prima hover di visited quando si passa col cursore del mouse su un link già visitato questo non farebbe alcun cambiamento legato ad hover avendo prevalenza la pseudoclasse visited.
|
Questo simbolo # (pound o cancelletto) seguito dal nome che è stato assegnato con l'attributo NAME permette di saltare nel punto esatto in cui l'etichetta è stata posizionata, si veda la spiegazione di NAME un paio di righe sopra. Vediamo un esempio pratico:
Si possono richiamare punti precisi presenti su altre pagine web, facendo precedere al nome dell'etichetta creata con name, il nome della pagina o l'intero percorso: <a href="http://web-link.it/html/link.htm#weblink"></a>
http:// questo tipo di ancora è senza dubbio la più adoperata e serve per richiamare altre pagine. E' sufficiente specificare l'intero percorso. Vediamo un esempio pratico:
mailto: questo tipo di ancora serve per ricevere un msg nella propria casella postale, oltre all'indirizzo è possibile impostare anche il subject della mail ed il corpo della mial stessa, infatti questo collegamento richiama il programma client di posta elettronica adoperato dal navigatore. Vediamo qualche esempio pratico:
E' possibile impostare anche il subject, si dovrà aggiungere un punto interrogativo e la parola subject dopo l'indirizzo. Questo un esempio:
|
<a href="mailto:Tuo_Nome@Server_di_posta.it?subject=La tua guida HTML"></a>
Per inviare una mail con soggetto: la tua guida HTML |
Infine è possibile impostare anche il corpo del messaggio, aggiungendo &body= quindi il corpo del messaggio. Questo un esempio:
|
<a href="mailto:Tuo_Nome@Server_di_posta.it?subject=La tua guida HTML&body=corpo della e-mail"></a>
Per inviarmi una mail con soggetto: la tua guida HTML e al suo interno parte del messaggio preconfezionato con la frase: tutto quello che vi pare dalla guida html |
Queste le altre forme che sono ammesse dall'attributo HREF:
<a href="nome_pagina.html">Realizza un collegamento ad una pagina che si trova nella stessa cartella
<a href="http://www.nome_server.it/nome_pagina.html">
Realizza un collegamento ad una pagina che si trova in un server web
<a href="ftp://nome_del_server.it">
Realizza un collegamento di tipo FTP
<a href="gopher://nome_del_server.com">
Realizza un collegamento ad un server gopher
<a href="mailto:indirizzo@di_posta.it">
Realizza un collegamento al client di posta elettronica (per farsi scrivere dal proprio sito una e-mail)
<a href="news:...">
Realizza un collegamento a NewsGroup Usenet
<a href="nome_file.zip">
Realizza un collegamento ad un file da scaricare in formato compresso (zip o rar) che avvierà un download
Ci sono anche altre forme quali newsrc:... nntp://... telnet://... wais://... ma credo siano adoperate molto raramente.
TARGET
L'attributo TARGET serve per aprire il collegamento su un frame diverso da quello in cui si trova. Ovviamente questo attributo è adoperato solo in caso di un sito strutturato in frames, è utile specialmente per chi avendo un menu laterale voglia fare in modo che i links richiamati dal menu siano visualizzati sulla pagina principale. Per fare questo si dovrà specificarne il nome, quello che è stato assegnato al frame. Ipotizziamo di avere con nome home il frame principale , volendo fare in modo che il link venga aperto su quel frame questa la sintassi:
|
<a href="http://www.web-link.it" target="home"></a>
|
Nel caso in cui non esistesse un frame con nome home verrà aperta una nuova finestra del browser.
Le altre possibili destinazioni sono:
| _blank: | Apri il collegamento su una nuova finestra. |
| _self: | Apri il collegamento sulla finestra che ha generato il collegamento |
| _parent: | Apri il collegamento sul frame di origine o su quello corrente |
| _top: | Apri il collegamento al livello superiore |
Andrea Bianchi
Potete fare domande e discutere l'argomento sul Forum
|
Home ·
XHTML con Style ·
Primi Passi ·
Guida HTML ·
Guida CSS ·
Guida PHP ·
F.A.Q. ·
Scripting ·
Applets ·
Grafica Web ·
Forum ·
Comunicazioni 
per stampare questa pagina
Home Page ·
Aggiungi ai preferiti ·
Segnala il sito ai tuoi amici ·
