Il sito per imparare gratuitamente a fare pagine Web

I Links in HTML














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



Andrea Bianchi © www.web-link.it  Primi Passi in HTML 4.01 - Ver. 2.7.0 - Settembre 2011
 

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 internet: i links o ancore, cioè quelle scritte interattive che se cliccate col mouse danno modo di generare un'azione: spostarsi all'interno della stessa pagina, da una pagina all'altra, o come spesso accade da un sito all'altro. Sono queste Ancore, che chiameremo anche links ipertestuali, ad aver decretato il successo del web.

Come al solito aprite il vostro editor e richiamate la pagina creata precedentemente. Posizionate il cursore del mouse nel punto esatto in cui dovrà essere inserito un link. Questo il TAG da adoperare:

<a> </a>

A come Ancora... così da solo però, senza attributi, è praticamente inutilizzabile. Vediamolo combinato con l'attributo più importante: href

La sigla HREF nasce dalle iniziali della frase inglese hypertext reference, indica che ciò che si trova fra le ancore di apertura e chiusura diventerà un collegamento ipertestuale, ovvero sarà richiamata un'altra pagina o un punto preciso della stessa pagina, dipende soltanto da cosa è stato specificato nell'attributo stesso.

Vediamo un esempio pratico, supponiamo che nella vostra pagina web vogliate inserire un link al mio sito: www.Web-Link.it

Sarà sufficiente specificarlo in questo modo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
  </head>
  <body>
<a href="http://www.web-link.it">Web-Link</a>
  </body>
</html>

Notate la sintassi del comando, la parola Web-Link sarà l'unica cosa che si vedrà sulla pagina, si trova fra i due tags ancora, di cui il primo <a> ha l'attributo href che indica quale URL valido richiamare nel momento in cui verrà fatto clic sulla scritta, l'ultimo </a> è la chiusura che determina la fine del link e delimita la frase o anche l'immagine grafica da usare come riferimento cliccabile. Attenzione a non dimenticare di chiudere un link perchè da quel punto in avanti tutto il resto della pagina web sarebbe un enorme link!

Potete sostituire la scritta Web-Link con una qualsiasi altra parola o frase, oppure adoperare delle immagini usando quanto imparato nella lezione precedente, il risultato sarebbe comunque lo stesso: tutto ciò che si trova 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 inserito dopo HREF. Da notare che per i links ad altri siti si fa precedere il www da un http:// necessario per indicare che quanto stiamo richiamando non si trova all'interno del nostro sito ma esternamente nella rete.

Se al posto dell'indirizzo web (URL) http://... avessi inserito semplicemente il nome di un'altra mia pagina, per esempio pagina2.htm avrei dato vita ad un sito vero e proprio formato da due pagine: questa che state leggendo e la pagina2.htm richiamata dal link. Sulla pagina2 poi dovrei inserire un link a questa pagina1 per dare modo al visitatore di fare avanti e indietro comodamente senza usare i tasti del browser.

Fate attenzione, se io introducessi una immagine al posto della scritta darei vita ad un processo 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 ne eredita eventuali proprietà dell'elemento stesso che lo incorpora.

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
  </head>
  <body>
<a href="http://www.web-link.it"><img src="weblink.gif" width="128" height="64" border="0" alt="weblink"></a>
  </body>
</html>

Nel caso in cui si decidesse di usare una immagine grafica al posto del testo, questa mostrerebbe un bordo perimetrale colorato senza l'attributo border uguale a 0 dello stesso colore scelto per i colori dei links. Se non si vogliono vedere bordi colorati si deve usare l'attributo border="0" all'interno del tag <img con border uguale a 0 come nell'esempio riportato sopra.

Oltre agli indirizzi (URL) validi, come quello dell'esempio: <a href="http://...">, l'attributo href accetta anche altri valori quali :

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

Che servono rispettivamente per:

<a href="ftp://...">
Collegamento ad un sito in modalità FTP.

<a href="mailto: nome@server">
Indirizzo di posta elettronica per la spedizione di una e-mail all'indirizzo specificato, facendo uso del proprio programma di posta elettronica.

<a href="news:...">
Collegamento ad un gruppo di discussione (newsgroup Usenet).

<a href="nomefile.zip">
Scaricamento (download) di un file in formato compresso.

<a href="nomepagina.html">
Collegamento ad altra pagina all'interno della stessa cartella.

Ci sarebbero anche altre possibili forme di links quali: gopher, nntp, telnet, wais, newsrc; ma visto il loro raro utilizzo ritengo che possano servire soltanto per creare confusione e magari non soltanto ad un principiante.

Considerate sempre che la pagina così richiamata dal vostro link andrà a sostituire la pagina richiamante, quella in cui c'è il link. Se non è questo quello che volete che accada è possibile aggiungere l'attributo target che specifica dove aprire questa pagina, o meglio su quale finestra del browser di navigazione dovrà essere aperta.

target="nome della finestra"

Dove nome della finestra è lo stesso nome assegnato con name in caso di frames, li vedremo più avanti, o la parola riservata _blank che apre una nuova finestra (o una nuova scheda) del browser, lasciando di fatto anche la pagina che ha generato il richiamo.

<a href="http://www.web-link.it" target="_blank">Web-Link</a>

Una nuova finestra sarà aperta in modo da mantenere anche la vostra, quella dalla quale è stato possibile fare clic sul link, per cui ci saranno due finestre (o due schede nei browser più recenti).

A questo punto conoscete quanto basta per creare un sito, si ho detto proprio sito e non più pagina web. Con l'inserimento del tag a href che vi consente di richiamare altre pagine date vita ad un vero e proprio sito: il vostro.

Sono ancora molte le cose da sapere per fare dei buoni siti ma già con questa terza lezione potrete cominciare a fare qualcosa di concreto, dalla prossima torneremo sulla struttura, sul testo e sulle immagini, aggiungendo alcuni particolari e precisazioni molto importanti.

Con questa lezione siete in grado di introdurre testi, immagini e links.
Nella prossima lezione , dedicata alla cosmesi del testo e ad alcuni caratteri "speciali", imparerete a tornare a capo, a lasciare più spazi fra una parola e l'altra e molto ancora, tutte cose 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.



Andrea Bianchi