Links o Ancore

Pagina precedente...

Considerate che la pagina richiamata dal link andrà a sostituire la pagina sulla quale si trovava il link richiamante, se non è questo l'effetto desiderato, è possibile aggiungere un attributo che specifica dove aprire il link o meglio su quale finestra del browser di navigazione dovrà essere aperto.

Si tratta di target bersaglio, destinazione e fra i vari parametri è possibile inserire la parola riservata _blank che significa apri il link in una nuova finestra del browser in modo da mantenere anche la finestra dalla quale è stato fatto clic, per cui ci saranno due finestre del browser aperte: una con la nostra pagina e l'altra con la pagina richiamata dal link.

Questo metodo non piace a molti, forse perché lo ritengono un ostacolo ai fini di una più facile accessibilità, io credo invece che sia indispensabile in certe situazioni ma ancora una volta si tratta di un mio parere molto personale e come tale discutibile.

Se avete un sito strutturato con frames, cioè diversi riquadri all'interno di una finestra principale, è possibile specificare il nome del riquadro nel quale vedere il risultato del link.

Vediamo un esempio:

Facendo clik sull'immagine grafica si richiamerà la pagina2.html ma aprendo una nuova finestra del browser.

Altri possibili attributi per il tag <a></a> sono:

accesskey="..." Assegna un tasto di attivazione immediata (hotkey) all'elemento

tabindex="..." il valore che definisce in che ordine attivare il presente elemento tra tutti i collegamenti quando si usa il tasto di tabulazione

Volendo richiamare un punto preciso in una pagina che potrebbe anche essere della stessa pagina, si adopera l'attributo id (in html era il solo name) entrambi servono per creare una specie di etichetta, questa viene collocata nel punto esatto da richiamare.

Il tag <a con attributo href questa volta adopera uno strano simbolo # (si chiama pound o cancelletto), seguito dal nome assegnato all'etichetta creata in precedenza, facendo clik su questo link si raggiungerà il punto esatto in cui è stata posizionata l'etichetta creata con id e/o name, sembra complicato ma un esempio chiarirà molto meglio questo semplice meccanismo:

Creiamo una etichetta nel punto preciso da richiamare usando i due attributi id e name:

Non serve inserire nulla fra l'apertura e la chiusura del tag ancora perché non c'è nulla da visualizzare trattandosi di una etichetta che serve solo al meccanismo di spostamento,risulterà essere completamente trasparente alla pagina web il non vedere nulla sarà a tutto vantaggio dell'estetica.

Adesso creiamo il link che richiama il punto preciso in cui si trova l'etichetta creata in precedenza:

Ho messo l'etichetta qui a fondo pagina, proviamo il link appena creato sopra:

vai a fondo pagina

Se il punto da richiamare si trova su una pagina diversa dalla stessa in cui avviene il richiamo è sufficiente inserire il nome della pagina seguito dal nome dell'etichetta:

I più attenti a questo punto si saranno già accorti che i links usati da queste pagine hanno un colore diverso da quello standard e sono privi della sottolineatura, si tratta infatti di una personalizzazione ad opera dei CSS.

Possiamo definire il colore, il font, lo sfondo, le dimensioni e molto altro ancora specificando questi parametri nel nostro foglio di style sul quale andremo ad inserire questo codice:

Vanno messi in questa sequenza: link, visited, hover e si riferiscono rispettivamente ai links ancora da visitare, a quelli visitati, e quando il mouse si trova sopra ad un link visitato o meno. Nell'esempio sopra ci siamo limitati a togliere la sottolineatura text-decoration: none; e ad assegnare un colore diverso e personalizzato per ognuna delle condizioni possibili Color: #3366ff; Non importa la sequenza dei parametri, se prima il colore e poi tex-decoration, si veda a questo proposito la guida sui CSS relativa alla voce i links.

Non resta che concludere questa lezione dedicata ai links elencando le altre funzioni che un link può richiamare, oltre ad un indirizzo web preceduto da http:// l'attributo href può infatti servire per richiamare:

<a href="ftp://...">
<a href="mailto:...">
<a href="nomefile.zip">
<a href="nomepagina.html">

che servono rispettivamente per:

<a href="ftp://...">descrizione</a>
collegamento ad un sito ftp.

<a href="mailto: nome@server.suffisso">descrizione</a>
indirizzo di posta elettronica per la spedizione di e-mail all'indirizzo specificato richiamando il proprio programma di posta elettronica.

<a href="nomefile.zip">descrizione</a>
prelievo, scaricamento (download) di un file in formato compresso zip.

<a href="nomepagina.html">descrizione</a>
collegamento ad altra pagina html contenuta all'interno della stessa cartella.

Ce ne sarebbero altri ancora quali: news, gopher, nntp, telnet, wais, newsrc; ma visto il loro raro utilizzo ritengo che in questa fase possano servire soltanto per creare confusione e questo non soltanto ad un principiante.

A questo punto conoscete tutto ciò che serve per creare un sito, si ho detto sito e non più pagina web, infatti con l'inserimento del tag ancora è possibile passare da una pagina all'altra dando vita ad un vero e proprio sito: il vostro.

Sono ancora molte le cose da sapere per fare un buon sito, ma già con questa lezione potete cominciare a fare qualcosa di concreto, dalla prossima torneremo sulla struttura, sul testo e sulle immagini aggiungendo alcuni particolari e precisazioni che vi serviranno soltanto se nel frattempo avrete cominciato a fare qualcosa di vostro.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti in apposita area XHTML.