Sommario
L'HTML offre molti dei convenzionali stili editoriali per il testo formattato e i documenti strutturati, ma ciò che lo differenzia dalla maggior parte degli altri linguaggi di marcatura sono le sue caratteristiche idonee a produrre documenti ipertestuali e interattivi. Questa sezione introduce il collegamento (o ipercollegamento o collegamento Web), il costrutto ipertestuale di base. Un collegamento è una connessione da una risorsa Web ad un'altra. Benché sia un concetto semplice, il collegamento è stata una delle forze principali che hanno determinato il successo del Web.
Un collegamento ha due estremità -- chiamate àncore -- ed una direzione. Il collegamento parte dall'ancora "sorgente" e punta verso l'ancora "destinazione", che può essere una qualsiasi risorsa Web (es., un'immagine, un brano video, un frammento sonoro, un programma, un documento HTML, un elemento all'interno di un documento HTML, ecc.).
Il comportamento predefinito associato con un collegamento è il recupero di un'altra risorsa Web. Questo comportamento è comunemente ed implicitamente ottenuto selezionando il collegamento (es., tramite un clic, un'immissione da tastiera, ecc.).
Il seguente brano HTML contiene due collegamenti, uno la cui ancora di destinazione è un documento HTML denominato "capitolo2.html" e l'altro la cui ancora di destinazione è un'immagine GIF nel file "foresta.gif":
<BODY> ...del testo... <P>Troverete molto di più nel <A href="capitolo2.html">capitolo due</A>. Date anche uno sguardo alla <A href="../immagini/foresta.gif">mappa della foresta incantata.</A> </BODY>
Attivando questi collegamenti (con un clic del mouse, tramite la tastiera, con comandi vocali, ecc.), gli utenti possono visitare queste risorse. Si noti che l'attributo href in ciascuna ancora sorgente specifica l'indirizzo dell'ancora di destinazione con un URI.
L'ancora di destinazione di un collegamento può essere un elemento all'interno di un documento HTML. All'ancora di destinazione deve essere dato un nome di ancora e ciascun URI che punta a quest'ancora deve includere quel nome come suo identificatore di frammento.
Le ancore di destinazione nei documenti HTML possono essere specificate o per mezzo dell'elemento A (denominandolo con l'attributo name) o per mezzo di un qualsiasi altro elemento (denominandolo con l'attributo id).
Così, ad esempio, un autore potrebbe creare un sommario le cui voci siano collegate agli elementi di intestazione H2, H3, ecc., nello stesso documento. Usando l'elemento A per creare ancore di destinazione, potremmo scrivere:
<H1>Sommario</H1> <P><A href="#sezione1">Introduzione</A><BR> <A href="#sezione2">Informazioni di base</A><BR> <A href="#sezione2.1">Una nota più personale</A><BR> ...il resto del sommario... ...corpo del documento... <H2><A name="sezione1">Introduzione</A></H2> ...sezione 1... <H2><A name="sezione2">Informazioni di base</A></H2> ...sezione 2... <H3><A name="sezione2.1">Una nota più personale</A></H3> ...sezione 2.1...
Possiamo ottenere il medesimo effetto rendendo ancore gli stessi elementi di intestazione:
<H1>Sommario</H1> <P><A href="#sezione1">Introduzione</A><BR> <A href="#sezione2">Informazioni di base</A><BR> <A href="#sezione2.1">Una nota più personale</A><BR> ...il resto del sommario... ...corpo del documento... <H2 id="sezione1">Introduzione</H2> ...sezione 1... <H2 id="sezione2">Informazioni di base</H2> ...section 2... <H3 id="sezione2.1">Una nota più personale</H3> ...sezione 2.1...
L'uso di gran lunga più comune di un collegamento è il recupero di un'altra risorsa Web, come illustrato negli esempi precedenti. Tuttavia gli autori possono inserire nei loro documenti collegamenti che esprimono altre relazioni tra le risorse piuttosto che semplicemente "attivare questo collegamento per visitare la risorsa correlata". I collegamenti che esprimono altri tipi di relazioni hanno uno o più tipi di collegamento specificati nella loro ancora sorgente.
Le funzioni di un collegamento definito da A o da LINK sono specificate per mezzo degli attributi rel e rev.
Ad esempio, i collegamenti definiti per mezzo dell'elemento LINK possono descrivere la posizione di un documento all'interno di una serie di documenti. Nel frammento seguente, i collegamenti all'interno del documento intitolato "Capitolo 5" puntano ai capitoli precedente e successivo:
<HEAD> ...altre informazioni di intestazione... <TITLE>Capitolo 5</TITLE> <LINK rel="prev" href="capitolo4.html"> <LINK rel="next" href="capitolo6.html"> </HEAD>
Il tipo di relazione del primo collegamento è "prev" mentre quello del secondo è "next" (due dei molteplici tipi di collegamento riconosciuti). I collegamenti specificati da LINK non sono riprodotti insieme con il contenuto del documento, benché i programmi utente possano riprodurli in altri modi (es., come strumenti di navigazione).
Anche se non sono usati per la navigazione, questi collegamenti possono essere interpretati in modi interessanti. Ad esempio, un programma utente che stampa una serie di documenti HTML come un singolo documento può usare queste informazioni di collegamento come la base per formare un documento lineare coerente. Ulteriori informazioni sono fornite più sotto relativamente a come usare i collegamenti a beneficio dei motori di ricerca.
Benché numerosi elementi ed attributi HTML creino collegamenti ad altre risorse (ad es. l'elemento IMG, l'elemento FORM, ecc.), questo capitolo discute collegamenti e ancore creati dagli elementi LINK e A. L'elemento LINK può apparire soltanto nella testa del documento. L'elemento A può apparire soltanto nel corpo.
Quando è impostato l'attributo href dell'elemento A, l'elemento definisce un'ancora sorgente per un collegamento che può essere attivato dall'utente per recuperare una risorsa Web. L'ancora sorgente è la locazione dell'istanza di A e l'ancora di destinazione è la risorsa Web.
La risorsa recuperata può essere gestita dal programma utente in più modi: aprendo un nuovo documento HTML nella stessa finestra del programma utente, aprendo un nuovo documento HTML in una finestra differente, facendo partire un nuovo programma in grado di gestire la risorsa, ecc. Poiché l'elemento A ha un contenuto (testo, immagini, ecc.), i programmi utente possono riprodurre questo contenuto in modo tale che indichi la presenza di un collegamento (ad es. sottolineando il contenuto).
Quando sono impostati gli attributi name o id dell'elemento A, l'elemento definisce un'ancora che può essere la destinazione di altri collegamenti.
Gli autori possono impostare simultaneamente gli attributi name e href nella medesima istanza di A.
L'elemento LINK definisce una relazione tra il documento corrente ed un'altra risorsa. Benché LINK non abbia contenuto, la relazione che esso definisce può essere riprodotta da alcuni programmi utente.
L'attributo title può essere impostato sia per A sia per LINK, allo scopo di aggiungere informazioni sulla natura del collegamento. Questa informazione può essere letta ad alta voce da un programma utente, può essere riprodotta come un suggerimento a scomparsa, può causare un cambiamento nell'immagine del cursore, ecc.
Possiamo così accrescere un esempio precedente fornendo un titolo per ciascun collegamento:
<BODY>
...del testo...
<P>Troverete molto di più nel <A href="capitolo2.html"
title="Vai al capitolo due">capitolo due</A>.
<A href="./capitolo2.html"
title="Leggi il capitolo due.">capitolo due</A>.
Dai anche uno sguardo a questa <A href="../immagini/foresta.gif"
title="immagine GIF della foresta incantata">mappa della
foresta incantata.</A>
</BODY>
Poiché i collegamenti possono puntare a documenti codificati con differenti codifiche dei caratteri, gli elementi A e LINK supportano l'attributo charset. Questo attributo consente agli autori di avvertire i programmi utente circa la codifica dei dati all'altra estremità del collegamento.
L'attributo hreflang fornisce ai programmi utente informazioni sulla lingua di una risorsa all'estremità di un collegamento, proprio come l'attributo lang fornisce informazioni sulla lingua del contenuto di un elemento o dei valori di attributi.
Armati di questa conoscenza aggiuntiva, i programmi utente dovrebbero essere in grado di evitare di presentare "spazzatura" all'utente. Al contrario, essi possono o localizzare le risorse necessarie per la corretta presentazione del documento o, se non riescono a localizzare quelle risorse, possono almeno avvisare l'utente che quel documento sarà illeggibile e spiegarne il motivo.
<!ELEMENT A - - (%inline;)* -(A) -- àncora --> <!ATTLIST A %attrs; -- %coreattrs, %i18n, %events -- charset %Charset; #IMPLIED -- codifica dei caratteri di risorse collegate -- type %ContentType; #IMPLIED -- tipo di contenuto esplicativo -- name CDATA #IMPLIED -- estremità denominata di un collegamento -- href %URI; #IMPLIED -- URI di risorsa collegata -- hreflang %LanguageCode; #IMPLIED -- codice di lingua -- rel %LinkTypes; #IMPLIED -- tipi di collegamento in avanti -- rev %LinkTypes; #IMPLIED -- tipi di collegamento all'indietro -- accesskey %Character; #IMPLIED -- tasto per l'accessibilità -- shape %Shape; rect -- per l'uso con mappe immagine dal lato cliente -- coords %Coords; #IMPLIED -- per l'uso con mappe immagine dal lato cliente -- tabindex NUMBER #IMPLIED -- posizione in ordine di tabulazione -- onfocus %Script; #IMPLIED -- l'elemento ha il focus -- onblur %Script; #IMPLIED -- l'elemento ha perso il focus -- >
Marcatore iniziale: obbligatorio, Marcatore finale: obbligatorio
Definizioni di attributo
Attributi definiti altrove
Ciascun elemento A definisce un'àncora.
Gli autori possono anche creare un elemento A che non specifica alcuna ancora, cioè che non specifica href, name o id. Valori per questi attributi possono essere impostati successivamente per mezzo di script.
Nell'esempio che segue, l'elemento A definisce un collegamento. L'ancora sorgente è il testo "sito Internet del W3C" e l'ancora di destinazione è "http://www.w3.org/":
Per maggiori informazioni circa il W3C, si consulti il <A href="http://www.w3.org/">sito Internet del W3C</A>.
Questo collegamento designa la home page del World Wide Web Consortium. Quando un utente attiva questo collegamento in un programma utente, il programma utente recupererà la risorsa, in questo caso un documento HTML.
In genere i programmi utente riproducono i collegamenti in modo tale che essi appaiono ovvi per l'utente (mediante sottolineatura, colori invertiti, ecc.). L'esatta riproduzione dipende dal programma utente. La riproduzione può essere differente a seconda di se l'utente abbia già visitato il collegamento oppure no. Una possibile riproduzione visuale del precedente collegamento potrebbe essere:
Per maggiori informazioni circa il W3C, si consulti il sito Internet del W3C.
~~~~~~~~~~~~~~~~~~~~~
Per comunicare esplicitamente ai programmi utente quale codifica dei caratteri usa la pagina di destinazione, si imposti l'attributo charset:
Per maggiori informazioni circa il W3C, si consulti il <A href="http://www.w3.org/" charset="ISO-8859-1">sito Internet del W3C</A>.
Supponiamo di definire un'ancora denominata "ancora-uno" nel file uno.html".
...testo prima dell'ancora... <A name="ancora-uno">Questa è la locazione dell'ancora uno.</A> ...testo dopo l'ancora...
Questo crea un'ancora intorno al testo "Questa è la locazione dell'ancora uno.". Di solito, i contenuti di A non sono riprodotti in un modo particolare quando A definisce un'ancora soltanto.
Dopo aver definito l'ancora, possiamo effettuare collegamenti verso di essa a partire dallo stesso documento o da un altro. Gli URI che designano ancore contengono un carattere "#" seguito dal nome dell'ancora (l'identificatore di frammento). Ecco alcuni esempi di tali URI:
Pertanto, un collegamento definito nel file "due.html", nella stessa cartella di "uno.html", farebbe riferimento all'ancora nel modo seguente:
...testo prima del collegamento... Per maggiori informazioni, si consulti <A href="./uno.html#ancora-uno"> ancora uno</A>. ...testo dopo il collegamento...
L'elemento A nell'esempio seguente specifica un collegamento (tramite href) e crea simultaneamente un'ancora denominata (tramite name):
Sono appena ritornato dalle vacanze! Ecco una <A name="ancora-due" href="http://www.unaditta.com/Gente/Gianni/vacanze/famiglia.png"> foto della mia famiglia al lago.</A>.
Questo esempio contiene un collegamento ad un differente tipo di risorsa Web (un'immagine PNG). L'attivazione del collegamento dovrebbe produrre il recupero della risorsa immagine dal Web (e presumibilmente la sua visualizzazione, se il sistema è stato configurato per fare ciò).
Nota. I programmi utente dovrebbero essere in grado di trovare ancore create per mezzo di elementi A vuoti, ma alcuni non vi riescono. Per esempio, alcuni programmi utente possono non trovare l'"ancora-vuota" nel seguente frammento di HTML:
<A name="ancora-vuota"></A> <EM>...dell'HTML...</EM> <A href="#ancora-vuota">Collegamento ad ancora vuota</A>
Un nome di ancora è il valore sia dell'attributo name sia dell'attributo id, quando usato nel contesto delle ancore. I nomi di ancora devono osservare le seguenti regole:
Pertanto, il seguente esempio è corretto dal punto di vista della corrispondenza delle stringhe e deve essere considerato come un'uguaglianza dai programmi utente:
<P><A href="#xxx">...</A> ...parte del documento... <P><A name="xxx">...</A>
ESEMPIO ILLEGALE:
Il seguente esempio è illegale rispetto all'unicità perché i due nomi
sono uguali eccetto che per la forma maiuscola o minuscola:
<P><A name="xxx">...</A> <P><A name="XXX">...</A>
Benché il seguente frammento sia HTML legale, il comportamento del programma utente è indefinito; alcuni programmi utente possono considerare (erroneamente) questo come una uguaglianza ed altri, invece, non considerarlo tale.
<P><A href="#xxx">...</A> ...parte del documento... <P><A name="XXX">...</A>
I nomi di ancora dovrebbero essere limitati ai caratteri ASCII. Si consulti l'appendice per maggiori informazioni circa i caratteri non-ASCII nei valori di attributo degli URI.
Collegamenti ed ancore definiti dall'elemento A non devono essere annidati; un elemento A non deve contenere nessun altro elemento A.
Dal momento che la DTD specifica che l'elemento LINK è vuoto, gli elementi LINK non possono essere annidati l'uno nell'altro.
L'attributo id può essere usato per creare un'ancora nel marcatore iniziale di un qualsiasi elemento (incluso l'elemento A).
Questo esempio illustra l'uso dell'attributo id per posizionare un'ancora in un elemento H2. Il collegamento all'ancora è effettuato per mezzo dell'elemento A.
Potete leggere altre notizie su questo tema nella <A href="#sezione2">Sezione due</A>. ...successivamente nel documento <H2 id="sezione2">Sezione due</H2> ...successivamente nel documento <P>Fate riferimento alla <A href="#sezione2">Sezione due</A> più sopra per maggiori dettagli.
L'esempio seguente denomina un'ancora di destinazione tramite l'attributo id:
Sono appena ritornato dalle vacanze! Ecco una <A id="ancora-due">foto della mia famiglia al lago.</A>.
Gli attributi id e name condividono il medesimo spazio-nomi. Questo significa che non possono definire entrambi un'ancora con lo stesso nome nello stesso documento. È consentito usare entrambi gli attributi per specificare un identificatore unico di un elemento per i seguenti elementi: A, APPLET, FORM, FRAME, IFRAME, IMG e MAP. Quando entrambi gli attributi sono usati per un singolo elemento, i loro valori devono essere identici.
ESEMPIO ILLEGALE:
Il seguente frammento di HTML è illegale perché questi attributi
dichiarano lo stesso nome due volte nel medesimo documento.
<A href="#a1">...</A> ... <H1 id="a1"> ...pagine e pagine... <A name="a1"></A>
L'esempio seguente illustra che id e name devono essere identici quando appaiono entrambi nel marcatore iniziale di un elemento:
<P><A name="a1" id="a1" href="#a1">...</A>
In virtù delle sue caratteristiche definite nella DTD HTML, l'attributo name può contenere riferimenti a caratteri. Pertanto il valore Dürst è un valore consentito dell'attributo name, così come Dürst. L'attributo id, al contrario, non può contenere riferimenti a caratteri.
Usare id o name? Gli autori dovrebbero considerare i seguenti aspetti, quando devono decidere se usare id o name per un nome di ancora:
Un riferimento ad una risorsa indisponibile o non identificabile è un errore. Sebbene i programmi utente possono differire nel modo in cui gestiscono un tale errore, si raccomanda il seguente comportamento:
<!ELEMENT LINK - O EMPTY -- un collegamento indipendente dal mezzo --> <!ATTLIST LINK %attrs; -- %coreattrs, %i18n, %events -- charset %Charset; #IMPLIED -- codifica dei caratteri di una risorsa collegata -- href %URI; #IMPLIED -- URI di risorsa collegata -- hreflang %LanguageCode; #IMPLIED -- codice di lingua -- type %ContentType; #IMPLIED -- tipo di contenuto esplicativo -- rel %LinkTypes; #IMPLIED -- tipi di collegamento in avanti -- rev %LinkTypes; #IMPLIED -- tipi di collegamento all'indietro -- media %MediaDesc; #IMPLIED -- per la riproduzione su questi media -- >
Marcatore iniziale: obbligatorio, marcatore finale: proibito
Attributi definiti altrove
Questo elemento definisce un collegamento. A differenza di A, esso può apparire soltanto nella sezione HEAD di un documento, benché possa apparire un qualsiasi numero di volte. Anche se LINK non ha contenuto, esso comunica informazioni di collegamento che possono essere riprodotte dai programmi utente in una varietà di modi (ad es., una barra di navigazione con un menu a tendina di collegamenti).
Questo esempio illustra come molteplici definizioni di LINK possono apparire nella sezione HEAD di un documento. Il documento corrente è "Capitolo2.html". L'attributo rel specifica la relazione del documento collegato con il documento corrente. I valori "Index", "Next" e "Prev" sono spiegati nella sezione sui tipi di collegamento.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Capitolo 2</TITLE> <LINK rel="Index" href="../indice.html"> <LINK rel="Next" href="Capitolo3.html"> <LINK rel="Prev" href="Capitolo1.html"> </HEAD> ...il resto del documento...
Gli attributi rel e rev svolgono funzioni complementari -- l'attributo rel specifica un collegamento in avanti e l'attributo rev specifica un collegamento all'indietro.
Si considerino due documenti A e B.
Documento A: <LINK href="docB" rel="foo">
Ha esattamente lo stesso significato di:
Documento B: <LINK href="docA" rev="foo">
Entrambi gli attributi possono essere specificati simultaneamente.
Quando l'elemento LINK collega un foglio di stile esterno ad un documento, l'attributo type specifica il linguaggio del foglio di stile e l'attributo media specifica il mezzo o i mezzi di riproduzione desiderati. I programmi utente possono risparmiare tempo recuperando dalla rete solo quei fogli di stile che si applicano al dispositivo corrente.
I tipi di media sono ulteriormente discussi nella sezione sui fogli di stile.
Gli autori possono usare l'elemento LINK per fornire una varietà di informazioni ai motori di ricerca, con l'inclusione di:
L'esempio successivo illustra come le informazioni sulla lingua, i tipi di media e i tipi di collegamento possono essere combinati per migliorare la gestione di un documento da parte dei motori di ricerca.
Nell'esempio seguente viene usato l'attributo hreflang per comunicare ai motori di ricerca dove reperire le versioni olandese, portoghese e araba del documento. Si noti l'uso dell'attributo charset per la versione araba del manuale. Si noti anche l'uso dell'attributo lang per indicare che il valore dell'attributo title, per l'elemento LINK che designa il manuale in francese, è espresso in francese.
<HEAD>
<TITLE>Il manuale in italiano</TITLE>
<LINK title="Il manuale in olandese"
type="text/html"
rel="alternate"
hreflang="nl"
href="http://qualcheposto.com/manuali/olandese.html">
<LINK title="Il manuale in portoghese"
type="text/html"
rel="alternate"
hreflang="pt"
href="http://qualcheposto.com/manuali/portoghese.html">
<LINK title="Il manuale in arabo"
type="text/html"
rel="alternate"
charset="ISO-8859-6"
hreflang="ar"
href="http://qualcheposto.com/manuali/arabo.html">
<LINK lang="fr" title="La documentation en Français"
type="text/html"
rel="alternate"
hreflang="fr"
href="http://qualcheposto.com/manuali/francese.html">
</HEAD>
Nell'esempio seguente si comunica ai motori di ricerca dove reperire la versione stampabile di un manuale.
<HEAD>
<TITLE>Manuale di consultazione</TITLE>
<LINK media="print" title="Il manuale in postscript"
type="application/postscript"
rel="alternate"
href="http://qualcheposto.com/manuali/postscript.ps">
</HEAD>
Nell'esempio seguente si dice ai motori di ricerca dove trovare la prima pagina di una raccolta di documenti.
<HEAD>
<TITLE>Manuale di consultazione -- Pagina 5</TITLE>
<LINK rel="Start" title="La prima pagina del manuale"
type="text/html"
href="http://qualcheposto.com/manuali/inizio.html">
</HEAD>
Ulteriori informazioni sono date in appendice nelle note su come aiutare i motori di ricerca ad indicizzare il vostro sito Web.
<!ELEMENT BASE - O EMPTY -- URI di base del documento --> <!ATTLIST BASE href %URI; #REQUIRED -- URI che funge da URI di base -- >
Marcatore iniziale: obbligatorio, marcatore finale: proibito
Definizioni di attributo
Attributi definiti altrove
In HTML collegamenti e riferimenti ad immagini esterne, applet, programmi di elaborazione dei moduli, fogli di stile, ecc. sono sempre specificati da un URI. Gli URI relativi sono risolti conformemente ad un URI di base, che può provenire da una varietà di fonti. L'elemento BASE consente agli autori di specificare esplicitamente l'URI di base di un documento.
Quando presente, l'elemento BASE deve apparire nella sezione HEAD di un documento HTML, prima di qualsiasi altro elemento che faccia riferimento ad una fonte esterna. L'informazione sul percorso specificata dall'elemento BASE influenza soltanto gli URI nel documento in cui appare l'elemento.
Per esempio, date le seguenti dichiarazioni di BASE e di A:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>I nostri prodotti</TITLE> <BASE href="http://www.uccelliera.com/prodotti/intro.html"> </HEAD> <BODY> <P>Avete visto le nostre <A href="../gabbie/uccelli.gif">gabbie per uccelli</A>? </BODY> </HTML>
l'URI relativo "../gabbie/uccelli.gif" sarebbe risolto in:
http://www.uccelliera.com/gabbie/uccelli.gif
I programmi utente devono calcolare l'URI di base per risolvere gli URI relativi in conformità di [RFC1808], sezione 3. Di seguito viene descritto come [RFC1808] si applica specificamente all'HTML.
I programmi utente devono calcolare l'URI di base secondo il seguente ordine di precedenza (dalla priorità più alta alla più bassa):
In aggiunta, gli elementi OBJECT e APPLET definiscono attributi che hanno la precedenza sul valore impostato dall'elemento BASE. Si consultino le definizioni di questi elementi per quanto riguarda questioni relative agli URI specifiche di essi.
Nota. Relativamente a versioni di HTTP che definiscono un'intestazione Link, i programmi utente dovrebbero gestire queste intestazioni esattamente come elementi LINK all'interno del documento. HTTP 1.1, come definito da [RFC2616], non include un campo di intestazione Link (si faccia riferimento alla sezione 19.6.3).