Il sito per imparare gratuitamente a fare pagine Web

Guida XHTML con Style

Questa guida è stampabile in modo agevole dalla versione off-line scaricabile dal menù laterale: Download.zip



Andrea Bianchi © www.web-link.it  Guida XHTML con Style - Ver. 1.5.1  

I Links o le Ancore

Dopo aver visto come inserire testo ed immagini, non resta che affrontare l'argomento che dà vita alla 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 inserito un 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, dipenderà soltanto da quello che verrà specificato nell'attributo stesso.

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

Sarà sufficiente specificarlo in questo modo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title> Titolo della mia pagina Web</title>
<link rel="stylesheet" type="text/css" href="foglio.css" />
</head>
<body>
<p>Questa è la mia prima pagina web in xhtml</p>
<img src="webl-ink.gif" />
<a href="http://www.web-link.it"> clicca qui </a>
</body>
</html>

Notate la sintassi del comando, la frase clicca qui sarà la sola cosa che si vedrà 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 e racchiude la frase divenuta link (collegamento ipertestuale), guai a dimenticare il tag di chiusura, se accadesse tutto il resto della pagina, da quel punto in avanti, diventerebbe un enorme 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, questa con il link e l'altra richiamata dal link stesso.

<a href="pagina2.html"> vai alla pagina due </a>

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 e di conseguenza i suoi effetti, trovandosi all'interno di un altro elemento eredita eventuali proprietà ed attributi dell'elemento stesso che lo incorpora. Da qui la modularità del linguaggio

<a href="pagina2.html"><img src="web-link.gif" alt="Logo grafico di web-link" title="Logo di web-link" width="165" height="120" /></a>

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

Logo grafico di web-link

Trattandosi di un link il suo bordo viene applicato anche alle immagini, potrebbe essere decisamente antiestetico ma è una caratteristica dei links e come tale cambia di colore a seconda che il link sia già stato visitato oppure no. E' possibile sopprimerlo inserendo all'immagine stessa l'attributo border="0" visto in precedenza.

<a href="pagina2.html"><img src="web-link.gif" alt="Logo grafico di web-link" width="165" height="120" border="0" /></a>
descrizione immagine

Continua con i links...

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



Andrea Bianchi