I Links o le Ancore

Dopo aver visto come inserire testo e immagini, non resta che affrontare l'argomento che da vita alla grande rete: i links o ancore, cioè quelle scritte interattive che se cliccate col cursore del mouse danno modo di richiamare punti precisi di una pagina o passare da una pagina all'altra e come spesso succede da un intero sito all'altro. Sono proprio queste Ancore o Links ipertestuali che hanno decretato il successo del web.

Aprite il vostro editor e richiamate la pagina che avevate creato, quella della lezione precedente per capirci. Posizionate il cursore nel punto esatto in cui dovrà essere inserita un'ancora, (link) questo il tag o elemento, da adoperare:

<a> </a>

a come ancora... così da solo, senza altri attributi è praticamente inutilizzabile, ma vediamolo combinato con l'attributo: href che è quello maggiormente adoperato.

href significa hypertext reference, indica che ciò che si trova fra le ancore di apertura e di chiusura sarà un collegamento ipertestuale, ovvero permetterà di richiamare un'altra pagina, una immagine o un punto preciso della stessa pagina, quello che sarà specificato nell'attributo stesso.

Vediamo un esempio pratico, supponiamo che nella pagina web si voglia avere un link al sito: www.Web-Link.it

Sarà sufficiente specificarlo in questo modo:

Notate la sintassi del comando, la frase clicca qui sarà la sola cosa che si vede sulla pagina, si trova fra i due tags ancora, dove il primo <a> fa uso di attributi, in questo caso di href che indica quale indirizzo URL valido richiamare nel momento in cui sarà fatto clic sulla scritta, segue la sua chiusura </a>  che delimita la frase divenuta link (collegamento ipertestuale), guai a dimenticarlo, se accadesse tutto il resto della pagina, da quel punto in avanti, diventerebbe un link!

Possiamo sostituire la scritta clicca qui con una qualsiasi altra parola o frase, oppure adoperare delle immagini grafiche, il risultato sarebbe comunque lo stesso, tutto ciò che si trovasse fra i due tags ancora, se cliccato, porterebbe all'apertura del link specificato, in questo caso il sito www.Web-Link.it perché è quello l'indirizzo web specificato dopo href.

Se al posto dell'indirizzo web  http://... avessi inserito il nome di un'altra pagina contenuta in questa stessa cartella (pagina2.html per esempio) avrei dato vita ad un sito interattivo vero e proprio formato da due pagine web.

Attenzione, se introducessimo una immagine grafica al posto della scritta si darebbe vita ad un meccanismo chiamato nidificazione degli elementi (tags), cioè si possono inserire elementi html all'interno di altri elementi html, questo perché ogni elemento ha i suoi attributi ed i suoi effetti e trovandosi all'interno di un altro elemento eredita eventuali proprietà ed attributi dell'elemento che lo incorpora. Da qui la modularità del linguaggio

In questo caso l'immagine grafica adoperata come esempio nella pagina precedente ha ereditato le sue proprietà diventando di fatto un link e se cliccata porterà alla pagina 2.

Il suo bordo adesso potrebbe essere decisamente antiestetico ma è una caratteristica dei links, cambia di colore a seconda che il link sia già stato visitato oppure no. E' possibile sopprimerlo inserendo all'immagine l'attributo border="0" visto in precedenza.

Continua con i links...