Considerate che la pagina richiamata da un 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, fra i vari parametri è possibile inserire la parola riservata _blank che significa apri il link in una nuova finestra o nuova scheda del browser in modo da mantenere anche la finestra o la scheda dalla quale è stato fatto click, ne consegue che ci saranno due finestre o due schede del browser aperte: una con la nostra pagina e l’altra con la pagina richiamata dal link.
Questo metodo non piace a molti, ovvio usiamo il buon senso, se ho un sito con 10 pagine non posso aprire 10 nuove finestre del browser, ma se ho un link esterno, nel senso che richiama un sito diverso dal mio, potrei volere che il visitatore li abbia entrambi, il mio dal quale è partito il link e quello che è stato richiamato dal mio link. XHTML nella sua più ristretta dichiarazione strict non accetta il target per problemi legati anche all’accessibilità.
Se invece avete un sito strutturato con frames, cioè diversi riquadri all’interno di una finestra principale, diventa utilissimo perchè permette di specificare nel target il nome del riquadro nel quale vedere il risultato del link nel caso in cui non si volesse aprirlo nello stesso frame dove si trovava il link.
Vediamo un esempio:
Facendo clik sull’immagine grafica si richiamerà la pagina2.html ma aprendo una nuova finestra o una nuova scheda 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
Oltre a richiamare una nuova pagina è possibile richiamare un punto preciso presente in quella stessa pagina, per farlo si adopera l’attributo id (in html era il solo name) entrambi servono per creare una specie di etichetta, questa viene poi 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 click 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 e questo perché non c’è nulla da visualizzare trattandosi non di un link richiamante ma di una etichetta richiamata che serve solo al meccanismo di spostamento. Questa 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 appena creata:
Ho messo l’etichetta qui a fondo pagina, abbiamo detto che non si vede per cui proviamo il link e vediamo cosa succede:
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 ed in alcuni casi sono privi della sottolineatura tipica dei links, si tratta di una personalizzazione ad opera dei CSS.
Possiamo definire il colore, il font, lo sfondo, le dimensioni e molto altro ancora specificando questi parametri nello stesso foglio di style sul quale andremo ad inserire questo codice:
a:visited{ text-decoration: none; color: #009900; }
a:hover{ Color: #3366ff; text-decoration: none; }
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 al link prima del click, 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 CSSrelativa alla voce i links.
Non resta che concludere questa lezione dedicata ai links elencando alcune delle altre funzioni che un link può richiamare. Oltre ad un indirizzo web preceduto da http:// l’attributo href può 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: [email protected]”>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 a principianti e non.
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 potete scrivere sul forum di supporto, gratuito e aperto a tutti.