Argomenti
L'HTML offre molti dei convenzionali idiomi di pubblicazione per documenti rich text (RTF) e documenti strutturati, ma quello che lo separa dalla maggior parte degli altri linguaggi di marcatura sono le sue caratteristiche per documenti ipertestuali ed interattivi. Questa sezione introduce il collegamento (link) (o hyperlink, o web link), il costrutto ipertestuale di base. Un collegamento è una connessione da una risorsa Web ad un'altra. Sebbene sia un concetto semplice, il collegamento è stato una delle forze primarie che hanno portato al successo il Web.
Un collegamento ha due estremità -- chiamate riferimenti (anchor) -- e una direzione. Il collegamento inizia dal riferimento "sorgente" e punta al riferimento "destinazione", che può essere qualsiasi risorsa del Web (ad es., un'immagine, un videoclip, un frammento di suono, 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 del Web. Questo comportamento si ottiene comunemente e implicitamente selezionando il collegamento (ad es., cliccando con il mouse, per mezzo (di input) della tastiera, ecc.).
Il seguente estratto HTML contiene due collegamenti, uno il cui riferimento di destinazione è un documento HTML chiamato "chapter2.html" e l'altro il cui riferimento di destinazione è un'immagine GIF nel file "forest.gif":
<BODY> ...testo... <P>Si troverà molto di più in <A href="chapter2.html">chapter two</A>. Si veda anche questa <A href="../images/forest.gif">mappa della foresta incantata.</A> </BODY>
Attivando questi collegamenti (cliccando con il mouse, per mezzo di input della tastiera, comandi vocali, ecc.), gli utenti possono visitare queste risorse. Si noti che l'attributo href in ciascun riferimento sorgente specifica l'indirizzo del riferimento di destinazione con un URI.
Il riferimento di destinazione di un collegamento può essere un elemento interno ad un documento HTML. Al riferimento di destinazione deve essere assegnato un nome (anchor name) e qualsiasi URI sia indirizzato a questo riferimento deve includerne il nome come suo identificatore di frammento.
I riferimenti di destinazione nei documenti HTML possono essere specificati dall'elemento A (assegnandogli il nome con l'attributo name), o da qualsiasi altro elemento (assegnandogli il nome con l'attributo id).
Così, per esempio, un autore può creare un sommario le cui voci mettano in collegamento con gli elementi di intestazione H2, H3, ecc., nello stesso documento. Usando l'elemento A per creare riferimenti di destinazione, scriveremo:
<H1>Sommario</H1> <P><A href="#sezione1">Introduzione</A><BR> <A href="#sezione2">Background</A><BR> <A href="#sezione2.1">Note personali</A><BR> ...il resto del sommario... ...il corpo del documento... <H2><A name="sezione1">Introduzione</A></H2> ...sezione 1... <H2><A name="sezione2">Background</A></H2> ...sezione 2... <H3><A name="sezione2.1">Note personali</A></H3> ...sezione 2.1...
Si può ottenere lo stesso effetto trasformando gli stessi elementi di intestazione in riferimenti:
<H1>Sommario</H1> <P><A href="#sezione1">Introduzione</A><BR> <A href="#sezione2">Background</A><BR> <A href="#sezione2.1">Note personale</A><BR> ...il resto del sommario... ...il corpo del documento... <H2 id="sezione1">Introduzione</H2> ...sezione 1... <H2 id="sezione2">Background</H2> ...sezione 2... <H3 id="sezione2.1">Note personali</H3> ...sezione 2.1...
Di gran lunga il più comune uso di un collegamento è recuperare un'altra risorsa del Web, come illustrato dai precedenti esempi. Tuttavia, gli autori possono inserire collegamenti nei loro documenti che esprimano altre relazioni tra risorse piuttosto che semplicemente "attivare questo collegamento per visitare quella risorsa correlata". I collegamenti che esprimono altri tipi di relazioni hanno uno o più tipi di collegamento specificati nel loro riferimento sorgente.
I ruoli di un collegamento definito dagli elementi A oppure LINK sono specificati tramite gli attributi rel e rev.
Per esempio, i collegamenti definiti con l'elemento LINK possono descrivere la posizione di un documento all'interno di una serie di documenti. Nel seguente estratto, 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 collegamento del primo collegamento è "prev" e quello del secondo è "next" (due dei numerosi tipi di collegamento riconosciuti). I collegamenti specificati da LINK non sono resi nei sommari del documento, sebbene l'interprete possa renderli in altri modi (ad es., come strumenti di navigazione).
Anche se non vengono utilizzati per la navigazione, questi collegamenti possono essere interpretati in modi interessanti. Per esempio, un interprete che stampa una serie di documenti HTML come un singolo documento può utilizzare queste informazioni sui collegamenti come base per formare documenti lineari coerenti. Ulteriori informazioni vengono date qui di seguito sull'uso di collegamenti a beneficio dei motori di ricerca.
Sebbene parecchi elementi e attributi HTML creino collegamenti con altre risorse (ad es., l'elemento IMG, l'elemento FORM, ecc.), questo capitolo tratta di collegamenti e riferimenti creati con gli elementi LINK e A. L'elemento LINK può comparire solamente all'inizio (head) di un documento. L'elemento A può comparire solamente all'interno (body) del documento.
Quando l'attributo href dell'elemento A viene impostato, l'elemento definisce un riferimento sorgente per un collegamento che può essere attivato dall'utente per recuperare una risorsa Web. Il riferimento sorgente è la locazione dell'istanza A e il riferimento di destinazione è la risorsa Web.
La risorsa recuperata può essere gestita dall'interprete in diversi modi: aprendo un nuovo documento HTML nella stessa finestra dell'interprete, aprendo un nuovo documento HTML in una finestra diversa, avviando un nuovo programma per gestire la risorsa, ecc. Dal momento che l'elemento A ha del contenuto (testo, immagini, ecc.), gli interpreti possono rendere questo contenuto in modo tale da indicare la presenza di un collegamento (ad es., sottolineando il contenuto).
Quando gli attributi name o id dell'elemento A sono impostati, l'elemento definisce un riferimento che può essere la destinazione di altri collegamenti.
Gli autori possono impostare gli attributi name e href simultaneamente nella stessa istanza di A.
L'elemento LINK definisce una relazione tra il documento corrente e un'altra risorsa. Sebbene LINK non abbia contenuto, la relazione che definisce può essere visualizzata da alcuni interpreti.
L'attributo title può essere impostato sia per A che per LINK per aggiungere informazioni sulla natura di un collegamento. Queste informazioni possono essere pronunciate da un interprete, visualizzate come descrizioni rapide (tool tip), possono causare un cambiamento nell'immagine del cursore, ecc.
Così, noi possiamo arricchire un esempio precedente fornendo un titolo per ogni collegamento:
<BODY>
...testo...
<P>Si troverà molto di più in <A href="capitolo2.html"
title="Si vada al capitolo due">capitolo due</A>.
<A href="./capitolo2.html"
title="Recupera il capitolo due.">capitolo due</A>.
Vedere anche questa <A href="../images/forest.gif"
title="Immagine GIF della foresta incantata">mappa della foresta incantata.</A>
</BODY>
Dal momento che i collegamenti possono puntare a documenti codificati con differenti codifiche dei caratteri, gli elementi A e LINK supportano l'attributo charset. Questo attributo permette agli autori di avvisare gli interpreti sulla codifica dei dati all'altra estremità del collegamento.
L'attributo hreflang fornisce informazioni agli interpreti sulla lingua della risorsa all'estremità di un collegamento, proprio come l'attributo lang fornisce informazioni riguardo la lingua del contenuto di un elemento o dei valori di un attributo.
Forniti di queste nuove conoscenze, gli interpreti dovrebbero essere in grado di evitare di presentare "immondizia" all'utente. Al contrario, essi possono localizzare le risorse necessarie per la corretta visualizzazione del documento o, se non possono localizzare le risorse, dovrebbero almeno avvertire l'utente che il documento non potrà essere letto e spiegarne il motivo.
<!ELEMENT A - - (%inline;)* -(A) -- riferimento --> <!ATTLIST A %attrs; -- %coreattrs, %i18n, %events -- charset %Charset; #IMPLIED -- codifica caratteri della risorsa collegata -- type %ContentType; #IMPLIED -- tipo di contenuto di riferimento -- name CDATA #IMPLIED -- estremità del collegamento con nome assegnato -- href %URI; #IMPLIED -- URI per la risorsa collegata -- hreflang %LanguageCode; #IMPLIED -- codice della lingua -- rel %LinkTypes; #IMPLIED -- tipi di collegamento successivo -- rev %LinkTypes; #IMPLIED -- tipi di collegamento precedente -- accesskey %Character; #IMPLIED -- carattere del tasto di scelta rapida -- shape %Shape; rect -- per uso con mappe sensibili lato client -- coords %Coords; #IMPLIED -- per uso con mappe sensibili lato client -- tabindex NUMBER #IMPLIED -- posizione nell'ordine di tabulazione (TAB) -- onfocus %Script; #IMPLIED -- l'elemento ha ricevuto il focus -- onblur %Script; #IMPLIED -- l'elemento ha perso il focus -- >
Tag iniziale: richiesto, Tag finale: richiesto
Definizioni degli attributi
Attributi definiti altrove
Ogni elemento A definisce un riferimento
Gli autori possono anche creare un elemento A che non specifichi alcun riferimento, cioè, che non specifichi href, name, o id. I valori per questi attributi possono essere impostati in un momento successivo per mezzo di script.
Nell'esempio che segue, l'elemento A definisce un collegamento. Il riferimento sorgente è il testo "W3C Web site" e il riferimento di destinazione è "http://www.w3.org/":
Per maggiori informazioni riguardo W3C, consultare il <A href="http://www.w3.org/">W3C Web site</A>.
Questo collegamento designa la home page del World Wide Web Consortium. Quando un utente attiva questo collegamento in un interprete, l'interprete recupererà la risorsa, in questo caso, un documento HTML.
Gli interpreti generalmente rendono i collegamenti in modo tale da farli sembrare ovvi agli utenti (per mezzo della sottolineatura, della visualizzazione con colori invertiti, ecc.). L'esatta resa dipende dall'interprete. La visualizzazione può variare a seconda che l'utente abbia già visitato il collegamento o no. Una possibile resa visiva del precedente collegamento potrebbe essere:
Per maggiori informazioni riguardo W3C, consultare il W3C Web site.
~~~~~~~~~~~~
Per comunicare esplicitamente all'interprete quale sia la codifica dei caratteri della pagina di destinazione, impostare l'attributo charset:
Per maggiori informazioni riguardo W3C, consultare il <A href="http://www.w3.org/" charset="ISO-8859-1">W3C Web site</A>
Supponiamo di definire un riferimento chiamato "riferimento-uno" nel file chiamato "uno.html".
...testo prima del riferimento... <A name="riferimento-uno">Questa è la locazione del riferimento uno.</A> ...testo dopo il riferimento...
Questo crea un riferimento intorno al testo "Questa è la locazione del riferimento uno." Di solito, i contenuti dell'elemento A non sono resi in nessun modo speciale quando A definisce solo un riferimento.
Dopo aver definito un riferimento, possiamo collegarci ad esso dal documento stesso o da un altro. Gli URI che designano i riferimenti contengono un carattere "#" seguito dal nome del riferimento (l'identificatore di frammento). Ecco alcuni esempi di tali URI:
Così, un collegamento definito nel file "due.html" nella stessa directory di "uno.html" rinvierebbe al riferimento come segue:
...testo prima del collegamento... Per maggiori informazioni, consultare <A href="./uno.html#riferimento-uno"> riferimento uno</A>. ...testo dopo il collegamento...
L'elemento A nel seguente esempio specifica un collegamento (con href) e crea allo stesso tempo un riferimento assegnandogli un nome (con name):
Io sono appena ritornato dalle vacanze! Ecco una <A name="riferimento-due" href="http://www.somecompany.com/People/Ian/vacation/family.png"> foto della mia famiglia al lago.</A>.
Questo esempio contiene un collegamento a un diverso tipo di risorsa Web (un'immagine PNG). L'attivazione del collegamento dovrebbe far sì che la risorsa immagine venga recuperata dal Web (ed eventualmente visualizzata se il sistema è stato configurato per farlo).
Nota. Gli interpreti dovrebbero essere in grado di individuare riferimenti costituiti da elementi A vuoti, ma alcuni non ci riescono. Per esempio, alcuni interpreti possono non trovare il "riferimento-vuoto" nel seguente frammento HTML:
<A name="riferimento-vuoto"></A> <EM>... testo HTML ...</EM> <A href="#riferimento-vuoto">Collegamento al riferimento vuoto</A>
Il nome di un riferimento è il valore dell'attributo name o dell'attributo id quando vengono utilizzati nel contesto dei riferimenti. I nomi dei riferimenti devono osservare le seguenti regole:
Così, il seguente esempio è corretto in relazione alla corrispondenza di stringhe e deve essere considerata una corrispondenza dagli interpreti:
<P><A href="#xxx">...</A> ...seguito del documento... <P><A name="xxx">...</A>
ESEMPIO ILLEGALE:
Il seguente esempio è illegale rispetto all'unicità dal momento che i due nomi sono gli stessi tranne che per il maiuscolo/minuscolo:
<P><A name="xxx">...</A> <P><A name="XXX">...</A>
Sebbene il seguente estratto sia legale come HTML, il comportamento dell'interprete non è definito; alcuni interpreti possono (non correttamente) considerare questa una corrispondenza e altri no.
<P><A href="#xxx">...</A> ...seguito del documento... <P><A name="XXX">...</A>
I nomi dei riferimenti dovrebbero essere limitati ai caratteri ASCII. Si consulti l'appendice per maggiori informazioni riguardo ai caratteri non-ASCII nei valori URI degli attributi.
Collegamenti e riferimenti definiti dall'elemento A non devono essere annidati; un elemento A non deve contenere nessun altro elemento A.
Dal momento che la DTD definisce l'elemento LINK come vuoto, nemmeno gli elementi LINK possono essere annidati.
L'attributo id può essere utilizzato per creare un riferimento al tag iniziale di qualsiasi elemento (incluso l'elemento A).
Questo esempio illustra l'uso dell'attributo id per posizionare un riferimento in un elemento H2. Il riferimento viene collegato per mezzo dell'elemento A.
Si può leggere di più riguardo a questo argomento in <A href="#sezione2">Sezione Due</A>.
...più avanti nel documento
<H2 id="sezione2">Sezione Due</H2>
...più avanti nel documento
<P>Si faccia riferimento alla summenzionata
<A href="#sezione2">Sezione Due</A> per maggiori dettagli.
L'esempio seguente dà il nome ad un riferimento di destinazione con l'attributo id:
Sono appena ritornato dalle vacanze! Ecco una <A id="riferimento-due">foto della mia famiglia al lago.</A>.
Gli attributi id e name condividono lo stesso spazio per il nome. Questo significa che non possono entrambi definire un riferimento con lo stesso nome nello stesso documento.
ESEMPIO ILLEGALE:
Il seguente estratto è illegale in HTML dal momento che questi attributi dichiarano lo stesso nome due volte nello stesso documento.
<A href="#a1">...</A> ... <H1 id="a1"> ...pagine e pagine... <A name="a1"></A>
A causa della sua specifica nella DTD HTML, l'attributo name può contenere riferimenti a caratteri. Così il valore Dürst è un valido valore dell'attributo name, come lo è Dürst. L'attributo id, d'altra parte, non può contenere riferimenti a caratteri.
Utilizzare id o name? Gli autori dovrebbero considerare i seguenti aspetti quando decidono se usare id o name per il nome di un riferimento:
Un riferimento a una risorsa non disponibile o non identificabile è un errore. Sebbene possa variare il modo in cui gli interpreti gestiscono tale errore, noi raccomandiamo il seguente comportamento:
<!ELEMENT LINK - O EMPTY -- un collegamento indipendente dai media --> <!ATTLIST LINK %attrs; -- %coreattrs, %i18n, %events -- charset %Charset; #IMPLIED -- codifica caratteri della risorsa collegata -- href %URI; #IMPLIED -- URI per la risorsa collegata -- hreflang %LanguageCode; #IMPLIED -- codice della lingua -- type %ContentType; #IMPLIED -- tipo di contenuto di riferimento -- rel %LinkTypes; #IMPLIED -- tipi di collegamento successivo -- rev %LinkTypes; #IMPLIED -- tipi di collegamento precedente -- media %MediaDesc; #IMPLIED -- per la visualizzazione su questi media -- >
Tag iniziale: richiesto, Tag finale: proibito
Attributi definiti altrove
Questo elemento definisce un collegamento. A differenza di A, può comparire soltanto nella sezione HEAD di un documento, anche se può apparire un qualsiasi numero di volte. Sebbene LINK non abbia contenuto, esso veicola informazioni di relazione che possono essere rese dagli interpreti in una varietà di modi (ad es., una barra degli strumenti con un menù a tendina per i collegamenti).
Questo esempio illustra come diverse definizioni LINK possano comparire 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", and "Prev" sono spiegati nella sezione relativa ai tipi di collegamento.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <HTML> <HEAD> <TITLE>Capitolo 2</TITLE> <LINK rel="Index" href="../index.html"> <LINK rel="Next" href="Capitolo3.html"> <LINK rel="Prev" href="Capitolo1.html"> </HEAD> ...il resto del documento...
Gli attributi rel e rev giocano ruoli complementari -- l'attributo rel specifica un collegamento successivo e l'attributo rev specifica un collegamento precedente.
Si considerino due documenti A and 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 a un documento, l'attributo type specifica la lingua del foglio di stile e l'attributo media specifica il medium o i media della visualizzazione voluta. Gli interpreti possono risparmiare tempo recuperando dalla rete solo quei fogli di stile che si applicano al dispositivo corrente.
I tipi di media vengono ulteriormente discussi nella sezione sui fogli di stile.
Gli autori possono usare l'elemento LINK per fornire ai motori di ricerca una varietà di informazioni, inclusi:
Gli esempi qui di seguito illustrano come le informazioni sulla lingua, i tipi di media, e i tipi di collegamento possano essere combinati per migliorare la gestione dei documenti da parte dei motori di ricerca.
Nel seguente esempio, utilizziamo l'attributo hreflang per dire ai motori di ricerca dove trovare versioni in olandese, portoghese, e arabo di un documento. Si noti l'uso degli attributi dir e charset per il manuale in arabo, e l'uso dell'attributo lang per indicare che il valore dell'attributo title per l'elemento LINK che designa il manuale francese è in francese.
<HEAD>
<TITLE>Il manuale in inglese</TITLE>
<LINK title="Il manuale in olandese"
type="text/html"
rel="alternate"
hreflang="nl"
href="http://someplace.com/manual/dutch.html">
<LINK title="Il manuale in portoghese"
type="text/html"
rel="alternate"
hreflang="pt"
href="http://someplace.com/manual/portuguese.html">
<LINK title="Il manuale in arabo"
dir="rtl"
type="text/html"
rel="alternate"
charset="ISO-8859-6"
hreflang="ar"
href="http://someplace.com/manual/arabic.html">
<LINK lang="fr" title="La documentation en Français"
type="text/html"
rel="alternate"
hreflang="fr"
href="http://someplace.com/manual/french.html">
</HEAD>
Nel seguente esempio, diciamo ai motori di ricerca dove trovare la versione stampata di un manuale.
<HEAD>
<TITLE>Reference manual</TITLE>
<LINK media="print" title="Il manuale in postscript"
type="application/postscript"
rel="alternate"
href="http://someplace.com/manual/postscript.ps">
</HEAD>
Nel seguente esempio, diciamo ai motori di ricerca dove trovare la prima pagina di una raccolta di documenti.
<HEAD>
<TITLE>Reference manual -- Page 5</TITLE>
<LINK rel="Start" title="La prima pagina del manuale"
type="text/html"
href="http://someplace.com/manual/start.html">
</HEAD>
Ulteriori informazioni vengono date nelle note in appendice su 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 agisce come URI di base -- >
Tag iniziale: richiesto, Tag finale: proibito
Definizioni degli attributi
Attributi definiti altrove
In HTML, collegamenti e riferimenti a immagini esterne, applet, programmi di elaborazione dei moduli, fogli di stile, ecc. sono sempre specificati da un URI. URI relativi sono risolti in accordo ad un URI di base, che può provenire da una varietà di fonti. L'elemento BASE permette agli autori di specificare esplicitamente un URI di base del documento.
Quando è presente, l'elemento BASE deve comparire nella sezione HEAD di un documento HTML, prima di un qualsiasi elemento che faccia riferimento a una fonte esterna. Le informazioni sul percorso specificate dall'elemento BASE influenzano gli URI solo nel documento in cui compare l'elemento.
Per esempio, data la seguente dichiarazione BASE e dichiarazione A:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <HTML> <HEAD> <TITLE>I nostri prodotti</TITLE> <BASE href="http://www.aviary.com/products/intro.html"> </HEAD> <BODY> <P>Avete visto le nostre <A href="../cages/birds.gif">gabbie per uccelli</A>? </BODY> </HTML>
l'URI relativo "../cages/birds.gif" si risolverà in:
http://www.aviary.com/cages/birds.gif
Gli interpreti devono calcolare gli URI di base per risolvere URI relativi in accordo a [RFC1808], sezione 3. Quanto segue descrive come [RFC1808] si applichi specificamente all'HTML.
Gli interpreti devono calcolare l'URI di base conformemente alle seguenti precedenze (in ordine decrescente di priorità):
Inoltre, 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 maggiori informazioni riguardo ad aspetti degli URI specifici ad essi.
Gli elementi di collegamento specificati dalle intestazioni HTTP sono gestiti esattamente come elementi LINK che compaiono esplicitamente in un documento.