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 almeno uno dei due possibili attributi che sono name o href, da solo non servirebbe a nulla. Questo tag necessita del relativo tag di chiusura </a>
Torna su


 

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 un punto preciso della stessa pagina.
Vediamo un esempio:

<a name=“weblink”></a>

Così facendo ho creato un’etichetta col nome weblink

L’etichetta risulterà essere completamente trasparente nella 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 in cui è stata creata o 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.
Torna su


 

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 stesso 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 definite in 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. Quali sono le diverse forme per questo attributo lo abbiamo già visto con l’elemento <body>:

<body link=”#006600″ vlink=”#808080″>
 

Deprecato, per cambiare colore ai links meglio usare una dichiarazione di style, in linea o su foglio esterno:

a:link {color: #006600;}
a:visited {color: #808080;}
con possibilità di eliminare la sottolineatura grazie alla proprietà: text-decoration: none;

Nota:, in aggiunta alle due pseudoclassi: a:link e a:visited ne esistono altre dinamiche e sono: hover, focus, ed active. Molto interessante hover che permette di rendere dinamico il passaggio del mouse passando col cursore sopra ad un link creando di fatto un effetto di animazione, come per esempio il semplice cambio di colore o di font.

a:link { dichiarazione di style }
a:visited { dichiarazione di style }
a:hover { dichiarazione di style }
a:focus { dichiarazione di style }
a:active { dichiarazione di style }
Per evitare conflitti le pseudoclassi dovranno essere inserite nell’ordine sopra riportato. Se infatti venisse dichiarata hover prima 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.

Torna su


 

#

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:

<a href=”#weblink”></a>
Clicca su questa scritta per saltare all’etichetta WebLink definita qualche riga sopra con la descrizione dell’attributo name.

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://www.web-link.it/html/link.htm#weblink“></a>

http:// questo tipo di ancora è senza dubbio la più adoperata e serve per richiamare altre pagine usando l’indirizzo assoluto nel web. E’ sufficiente specificare l’intero percorso. Vediamo un esempio pratico:

<a href=”http://www.ilmioforum.com”>clicca qui</a> per accedere al forum di Web-Link.
clicca qui per accedere al forum di Web-Link.

Torna su


 

mailto:

mailto: questo tipo di ancora serve per richiamare il programma di posta elettronica del visitatore che fa click. Oltre all’indirizzo email è possibile impostare anche il subject ed il corpo della mail che verrà inviata. Questo collegamento non funziona se nel PC di chi fa click non è installato alcun client di posta elettronica. Vediamo qualche esempio pratico:

<a href=”mailto:Tuo_Nome@Server_di_posta.it”></a>
Clicca su questa scritta per inviare una e-mail

Come abbiamo detto è possibile impostare anche il subject, si dovrà aggiungere un punto interrogativo e la parola subject dopo l’indirizzo email. 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 alcune delle 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=”mailto:indirizzo@di_posta.it“> Realizza un collegamento al client di posta elettronica del visitatore.
<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) che avvierà un download.

Ci sono anche altre forme quali newsrc:… gopher://… nntp://… telnet://… wais://…
ma credo siano adoperate molto raramente.
Torna su


 

target

L’attributo target serve per aprire il collegamento su un frame diverso da quello in cui si trova il link. 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 verrebbe 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.
Torna su


Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Di Redazione

La nostra redazione è costantemente impegnata nel ricercare fonti attendibili e produrre contenuti informativi, guide e suggerimenti utili gratuiti per i lettori di questo sito.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *