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>
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:
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.
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>:
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.
#
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://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:
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:
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:
Infine è possibile impostare anche il corpo del messaggio, aggiungendo &body= quindi il corpo del messaggio. Questo un esempio:
Queste alcune delle altre forme che sono ammesse dall’attributo href:
Ci sono anche altre forme quali newsrc:… gopher://… 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 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:
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.
Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.