Links e 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 mouse danno modo di saltare da una pagina all'altra o 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, qualunque esso sia, 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, questo il TAG da adoperare:

<A> </A>

A come ancora... così da solo senza altri attributi è praticamente inutilizzabile, ma vediamolo combinato con l'attributo: HREF per esempio.

HREF significa 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, quello specificato nell'attributo stesso.

Vediamo un esempio pratico, supponiamo che nella pagina web ci sia un link ad un sito: www.mio-sito.it (uno sito a caso tanto per cambiare )
Sarà sufficiente specificarlo in questo modo:

<html>
<head>
</head>
<body>

<A HREF="http://www.mio-sito.it">Mio-Sito</A>

</body>
</html>

Notate la sintassi del comando, la parola miosito è 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 viene fatto clic sulla scritta, l'ultimo </A>  è la chiusura che delimita la frase diventata link, da non dimenticare mai per evitare che tutto il resto della pagina da quel punto in avanti diventi un link!

Potrei sostituire la scritta MioSito con una qualsiasi altra parola o frase, oppure adoperare delle immagini, 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.Mio-Sito.it perché è quello l'indirizzo specificato dopo HREF.

Se al posto dell'indirizzo web  URL avessi inserito il nome di un'altra mia pagina (pagina2.htm) avrei dato vita ad un sito vero e proprio formato da due pagine web.  

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 eredita  eventuali attributi dell'elemento che lo incorpora.

<html>
<head>
</head>
<body>

<A HREF="http://www.Mio-Sito.it">
<img src="mypic.gif" width="64" height="128" border="0" alt="mypic"></A>

</body>
</html>

Fra le virgolette dell'attributo HREF oltre agli indirizzi URL validi come quello dell'esempio <A HREF="http://...">, è possibile specificare anche :

<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 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 questo non soltanto ad un principiante.

Considerate che la pagina richiamata dal link andrà a sostituire la pagina richiamante, se non è questo l'effetto desiderato, è possibile aggiungere un attributo che specifica dove aprire questa pagina, o meglio su quale finestra del browser di navigazione dovrà essere aperta. Vediamo come:

target="nome della finestra"

Se avete un sito strutturato con frames, cioè i diversi riquadri all'interno di una finestra principale, potete specificare il nome del riquadro nel quale vedere il risultato del link, oppure fare in modo che si possa aprire una nuova del browser adoperando la parola riservata: _blank. che significa appunto questo. 

Vediamo un esempio completo:

<html>
<head>
</head>
<body>

<A HREF="http://www.mio-sito.it" target="_blank">
Mio-Sito</A>

</body>
</html>

Una nuova finestra sarà aperta in modo da mantenere anche la vostra, quella dalla quale è stato possibile fare il clic sul link, per cui ci saranno due finestre del browser aperte una con la vostra pagina e l'altra con la pagina associata al link.

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 buoni  siti, ma già con questa terza lezione potete cominciare a fare qualcosa, 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.

Con questa lezione siete in grado di introdurre testi, immagini e links.
Nella prossima lezione , dedicata alla cosmesi del testo e a quei caratteri "speciali", vedremo alcuni accorgimenti per la sintassi e la manipolazione di questo.

 
Lezione Precedente   Lezione Successiva