PROGRAMMIAMO
HTML - Link
Link <a>

Descrizione identifica collegamento (link) fra la pagina corrente e altre pagine
Tipo elemento contenitore inline
Attributi href, target

L'elemento <a> (anchor) consente di collegare fra loro diverse pagine html, creando in tal modo una struttura ipertestuale. Il collegamento viene applicato a una porzione di testo, che diviene in tal modo "cliccabile". Per esempio

<a href="http://www.programmiamo.altervista.org/index.html" > Pagina principale </a> di Programmiamo

viene visualizzato dal browser nel seguente modo:

Pagina principale di Programmiamo

Facendo clic col mouse sul testo sottolineato e in colore blu, viene aperta la pagina indicata nell'attributo href.

Il link può essere anche fatto su un'immagine (in questo caso cliccando sull'immagine si viene indirizzati alla pagina). Esempio:

<a href="index.html"><img src="foto.jpg" width="640" height="467" border="0"></a> 

L'attributo border="0" serve per evitare che venga messo un bordo intorno all'immagine linkata.

ATTENZIONE: essendo un elemento inline, il tag <a> deve sempre essere racchiuso all'interno di un elemento di blocco (come <p> o <div>) e non deve mai essere scritto direttamente nel body.

Attributo href

L'attributo href (hypertext reference o riferimento ipertestuale) specifica l'indirizzo della pagina destinazione e deve essere indicato obbligatoriamente. L'indirizzo può essere costituito da un URL, cioè da un indirizzo internet completo, come nel caso considerato prima:

<a href="http://www.programmiamo.altervista.org/index.html" > Pagina principale </a> di Programmiamo

Se però la pagina linkata si trova nella stessa cartella in cui è situata la pagina html che contiene il link, è sufficiente indicare semplicemente il nome del file:

<a href="index.html" > Pagina principale </a> di Programmiamo

Questo modo di fornire l'indirizzo si dice relativo (in contrapposizione al precedente, che viene detto assoluto). In generale è preferibile usare indirizzi relativi. Se la pagina linkata si trova in una cartella diversa rispetto a quella della pagina corrente, si usa il simbolo di .. (doppio punto) per indicare la cartella parent (cioè "genitore") di quella corrente, cioè la cartella che contiene la cartella corrente. Si considerino gli esempi seguenti:

esempio indirizzo relativo nota
href="pagina.html" "pagina.html" si trova nella cartella corrente.
href="schede/pagina.htm" "pagina.html" si trova nella cartella 'schede' che è una sottocartella della cartella corrente.
href="../schede/pagina.html" "pagina.html" si trova nella cartella 'schede' che a sua volta si trova nella cartella di livello superiore (parent) della cartella corrente
href="../../schede/pagina.html" "pagina.html" si trova nella cartella schede, la quale a sua volta si trova "due livelli sopra" alla cartella corrente

 

Attributo target e codice alternativo per HTML 5

L'attributo target permette di specificare in quale finestra la pagina linkata deve essere aperta: di default infatti la pagina viene aperta all'interno del documento stesso, ma è possibile specificare che la pagina sia aperta in una nuova finestra indicando target="_blank":

<a href="index.html" target="_blank"> Pagina principale </a> di Programmiamo

Purtroppo l'uso di questo attributo (utile in molti casi) deprecato in HTML 5 e produce errori di validazione. Per sostituirlo mantenendo la correttezza del codice, occorre usare un semplice codice javascript, come nell'esempio qui sotto:

<a href="index.html" onclick="window.open(this.href); return false;"> Pagina principale </a> di Programmiamo

Per maggiori dettagli sull'uso di onclick vedi la sezione dedicata al linguaggio javascript.

 

Segnalibri

Un segnalibro (in inglese bookmark) un riferimento interno a una pagina sul quale possibile indirizzare un link. Per creare un segnalibro in qualsiasi punto di una pagina, si usa l'attributo id sull'elemento destinazione del segnalibro, come mostra l'esempio seguente:

<p id="favola" >In un Paese lontano lontano, viveva una principessa</p>

L'attributo id è un attributo universale, che cioè può essere applicato a qualsiasi elemento del body di una pagina (es. a un paragrafo, a un header, a una immagine).

Il suo scopo, come si detto, quello di creare un segnalibro, cio un punto di riferimento per un altro link. Se per esempio, in un altro punto della pagina, vogliamo richiamare il segnalibro precedente, dovremo scrivere:

<p>Per leggere la favola della Principessa sul Pisello <a href="#favola">clicca qui</a></p>

Questo link viene visualizzato con la normale sottolineatura e, cliccandoci sopra, si viene indirizzati al punto nella pagina dove abbiamo messo il segnalibro. Si noti il cancelletto # davanti al nome del segnalibro.

L'uso di segnalibri particolarmente utile nel caso di pagine lunghe, contenenti molti argomenti. In questi casi consigliato mettere all'inizio della pagina un menu (per esempio una lista) con una serie di link interni che permettono di "saltare" direttamente ai diversi segnalibri.

Notiamo che possibile linkare un segnalibro anche da un'altra pagina (diversa da quella che lo contiene). In questo caso bisogna premettere il nome (o il percorso) della pagina linkata, come nell'esempio qui sotto:

<p>Per leggere la favola della Principessa sul Pisello
<a href="/favole/principessa.html#favola">clicca qui</a></p>

Vale la pena infine di notare che talvolta si incontrano pagine contenenti riferimenti vuoti, come in questo esempio:

<p><a href="#">Clicca qui</a> per tornare all'inizio della pagina</p>

Cliccando sul link, si viene reindirizzati all'inizio della pagina stessa.

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it