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 con Style - Ver. 1.3.6

 

I Links o le Ancore

Dopo aver visto come inserire testo e immagini, non resta che affrontare l'argomento che ha decretato il successo della rete internet: i links o ancore, cioè quelle scritte di solito di colore diverso che se cliccate col cursore del mouse generano un'azione come: spostarsi all'interno della stessa pagina, da una pagina all'altra, o da un intero sito all'altro.

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 il link. Questo sotto 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, o anche un'immagine, dipenderà soltanto da cosa è stato specificato all'interno del tag stesso.

Vediamo un esempio pratico, supponiamo che nella vostra pagina web vogliate inserire un link al 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"> Guide per pagine web</a>
  </body>
</html>

Notate la sintassi del comando, la frase "guide per pagine web" 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 il link con </a> perchè da quel punto in avanti tutto il resto della pagina sarebbe un enorme link!

Potete sostituire la scritta guide per pagine web 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 su altro URL della rete Internet.

Se al posto dell'indirizzo web (URL) http://... viene inserito il nome di un'altra pagina, per esempio pagina2.htm diamo vita ad un vero e proprio sito formato da due pagine: questa che state creando e l'altra, la pagina2.htm richiamata dal link. Sulla pagina2 poi bisognerà inserire un link a questa pagina1 per dare modo al visitatore di potersi muovere facendo avanti e indietro comodamente grazie ai links e senza usare i tasti "pagina indietro" e "pagina avanti" del browser.

  Fate attenzione, introducendo una immagine grafica al posto della scritta testuale "guide per pagine web" si crea un processo chiamato nidificazione degli elementi (tags), cioè elementi html posti all'interno di altri elementi html, e dal momento che ogni elemento ha i propri attributi e relativi effetti, un elemento, in questo caso una immagine, che si trova all'interno di un altro elemento, in questo caso un link, ne eredita tutte le eventuali proprietà e di conseguenza i comportamenti, ecco perchè facendo click sull'immagine posta all'interno dell'elemento ancora questa attiva un link.

<!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="32" height="30" 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 che hanno i links (essendo al suo interno ne eredita le proprietà). Se non si vogliono vedere bordi colorati si deve usare uno dei metodi visti in precedenza per impostare border al valore "0" il risultato per la stessa immagine usata come link è questo: con border uguale a 0

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 forse 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, è possibile aggiungere l'attributo target che specifica dove aprire la pagina richiamata, o meglio, su quale finestra o scheda del browser di navigazione dovrà essere aperta.

target="nome_riservato"

Dove nome_riservato può essere un nome assegnato ad un iframe, ad un frame, o la parola riservata _blank che apre su 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). Non abusatene o presto il monitor del vostro visitatore sarà pieno di pagine aperte.

A questo punto conoscete quanto basta per creare un sito, 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 web: il vostro.

Sono ancora molte le cose da sapere per fare dei buoni siti ma già con questa 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 altro 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