Lezione n° 8 - collegamenti ipertestuali -

I documenti HTML sono anche chiamati "ipertesti", perchè possono essere consultati in modo dinamico, cioè possiamo passare da un punto ad un altro del documento, o possiamo richiamare documenti e/o pagine esterne al documento stesso, per far ciò dobbiamo utilizzare un "hiperlink", il tag che identifica un iperlink è il tag <a> dove "a" sta per "anchor" cioè ancora. Il tag <a> necessita del relativo tag di chiusura </a> e di alcuni attributi. Il più importante degli attributi di un iperlink è senza dubbio l'attributo "href" che ci consente di richiamare l'oggetto o la pagina web da aprire.

<a href="pagina da richiamare">parola cliccabile</a>

Con gli iperlink è possibile realizzare 3 tipi di collegamenti:

1) collegamenti a risorse interne
2) collegamenti a risorse esterne
3) collegamenti a e-mail

collegamenti a risorse interne

Si hanno quando da una pagina del nostro sito si vuole richiamare un'altra pagina sempre interna al nostro sito, è il caso classico del menù che si trova nella Home page del nostro sito , dal quale è possibile ad esempio cliccando sul link chiamato "prodotti" richiamare la pagina web dei prodotti.

<a href="prodotti.html">PRODOTTI</a>

collegamenti a risorse esterne

Con questo tipo di collegamento è possibile richiamare una pagina esterna al nostro sito, ad esempio cliccando sul link di un motore di ricerca dal nostro sito viene aperta una finestra del browser che visualizzerà il motore di ricerca richiamato.

<a href="http://www.google.it">GOOGLE</a>

collegamenti a e-mail

In questo tipo di collegamenti è possibile creare un collegamento ad un programma di posta elettronica, ad esempio il programma predefinito dal computer, ed è inoltre possibile far si che alcuni campi come ad esempio il campo "oggetto" e il campo "destinatario" vengano compilati in automatico.

<a href="mailto:user@host.it">SCRIVIMI</a>

volendo definire ad esempio il campo oggetto avremo:

<a href="mailto:user@host.it ? subject=informazioni">SCRIVIMI</a>

in questi tipi di collegamenti è anche possibile sostituire la parola cliccabile(quindi il link) con una immagine, che diventerebbe automaticamente cliccabile e quindi un link.

<a href="http://www.google.it"><img src="logo.gif"></a>

l'immagine "logo.gif" essendo divenuto un link avrà un bordino di colore blu attorno, inoltre passandoci sopra con il mouse quest'ultimo cambia il suo aspetto divenendo la classica manina che indica la possibilità di cliccare sull'immagine.
Un altro degli attributi importanti del tag <a> è l'attributo "TARGET" che serve a definire la destinazione di visualizzazione del nostro collegamento. Per far aprire il collegamento in una finestra nuova l'attributo assumerà il valora "_new" oppure "_blank"

<a href="http://www.google.it" target="_new">GOOGLE</a>

Grazie alle "ancore" è possibile realizzare un ulteriore tipo di collegamento ovvero il collegamento interno al documento stesso, cioè, supponiamo di avere per esempio un documento di testo di svariate pagine all'interno della nostra pagina web, e che una volta arrivati all'ultima pagina del documento dobbiamo tornare all'inizio di esso, anzicchè dover scorrere di nuovo tutto il documento all'indietro fino ad arrivare all'inizio, possiamo mettere alla fine dell'ultima pagina un link con scritto ad esempio "torna ad inizio documento" che ci condurra automaticamente una volta cliccatoci sù all'inizio del documento, ma per far ciò dobbiamo mettere appena sopra o appena sotto l'intestazione del documento un "ancora".

l'attributo da utilizzare per il tag <a> si chiama "name" e deve essere seguito dal nome di riferimento che verrà sostituito da un nome identificativo della posizione, tale nome a sua volta deve essere preceduto dal simbolo del cancelletto "#"

<a name="primo">primo rigo del documento</a>

<a href="#primo">vai all'inizio</a>

In tal modo cliccando sul link "vai all'inizio" viene richiamata l'ancora di nome "primo" che si trova posizionata nel primo rigo del nostro documento, di conseguenza il link ci riporta ad inizio documento.