Laboratorio di Tecnologie Web
HTML: Hyperlink
Dott. Stefano Burigat
www.dimi.uniud.it/burigat
Aggiungere hyperlink
L'elemento che rende possibile aggiungere hyperlink a
risorse web è l'elemento inline contenitore <a> (anchor).
Tutto ciò che si trova tra il tag <a> di apertura ed il tag </a>
di chiusura viene automaticamente trasformato dal browser
in un hyperlink (al contrario delle versioni precedenti,
HTML5 non pone limiti al tipo di elementi che si possono
inserire all'interno dell'elemento <a>).
L'attributo “href” (hypertext reference) viene utilizzato per
specificare l'URL della risorsa (tipicamente una pagina
web) che verrà visualizzata quando l'utente cliccherà
sull'hyperlink. In assenza dell'attributo href, i browser
considerano l'elemento <a> come un placeholder per un
hyperlink ma non un hyperlink vero e proprio.
Ci sono principalmente due tipi di hyperlink:
• Gli hyperlink esterni puntano a risorse esterne al sito di
partenza
• Gli hyperlink interni puntano a risorse interne al sito di
partenza
Hyperlink a risorse esterne
Per creare un hyperlink ad una risorsa esterna, in particolare
una pagina web presente su un altro sito, è necessario
specificare l'URL della risorsa in modo assoluto,
includendo il protocollo di comunicazione (http://).
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<article>
<h1>HTML5</h1>
<p>L'HTML5 è un <a
href="http://it.wikipedia.org/wiki/Linguaggio_di_markup">lingu
aggio di markup</a> per la strutturazione delle pagine
web...</p>
</article>
</body>
</html>
Di default, i browser visualizzano gli hyperlink (se costituiti
da testo) di colore blu e sottolineati, visualizzano il simbolo
di una mano quando si passa il puntatore del mouse sopra
un hyperlink, visualizzano gli hyperlink in rosso quando
vengono cliccati e di colore porpora quando sono stati
visitati. E' comunque possibile applicare uno stile diverso
agli hyperlink tramite CSS, anche se è sconsigliabile
modificarne in modo troppo marcato l'aspetto per non
confondere l'utente.
Hyperlink a risorse interne
La maggior parte degli hyperlink che vengono aggiunti alle
pagine web di un sito sono link a risorse interne presenti
sullo stesso server che ospita il sito (principalmente, altre
pagine web del sito). Per specificare tali hyperlink vengono
utilizzati tipicamente URL relativi, che indicano come
raggiungere una certa risorsa a partire dalla pagina web di
partenza in cui viene inserito l'hyperlink (più precisamente,
a partire dalla directory che contiene tale pagina). Gli URL
relativi vengono scritti senza indicazione del protocollo di
comunicazione e sono simili ai path dei file in un file
system tradizionale ma seguono la convenzione Unix di
separare directory e file tramite barra inclinata (forward
slash /). Gli URL relativi sono più corti e flessibili di quelli
assoluti e possono essere testati anche in locale, pur
funzionando senza alcuna modifica una volta che il sito
viene pubblicato online.
NOTA: per evitare errori nella scrittura dei path relativi,
fare attenzione alle seguenti regole:
• non usare il simbolo di backslash \ che viene utilizzato
nei path di Windows
• non utilizzare il nome del drive all'interno dei path (ad
esempio, C:). I link funzionerebbero in locale ma non
su server.
Illustrazione 1: Struttura del sito web di esempio
• non iniziare un path con “file://” (come iniziano i file
html aperti in locale). Di nuovo, i link funzionerebbero
in locale ma non su server.
• non utilizzare spazi o altri caratteri speciali nei nomi
dei file e delle directory, anche se questi sono permessi
nel file system locale.
Si supponga di avere un sito la cui struttura è rappresentata
nell'Illustrazione 1. Come per ogni altro sito web, esiste una
directory radice (indicata nell'illustrazione con il nome
“root” e tipicamente rappresentata negli URL con la barra
inclinata /) che contiene tutte le directory ed i file del sito.
All'interno della directory radice, ci sono due file html
(index.html e glossario.html) e due sottodirectory (esempi e
teoria). All'interno della directory “teoria” ci sono due file
html (html5.html e java.html) mentre all'interno della
directory “esempi” ci sono due sottodirectory (html5 e
java), ciascuna delle quali contiene due file (in entrambi i
casi, chimati esempio1.html ed esempio2.html).
NOTA: di default, il contenuto che viene mostrato quando
si apre un certo sito web senza indicare un file specifico è
quello contenuto nel file index.html (questo comportamento
viene definito a livello di server).
L'URL relativo più semplice è quello che punta ad un altro
file nella stessa directory. In tal caso, è sufficiente inserire il
nome del file di destinazione come valore dell'attributo
“href” dell'hyperlink. L'esempio seguente mostra come
creare un hyperlink dalla pagina index.html alla pagina
glossario.html.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<article>
<h1>HTML5</h1>
<p>L'HTML5 è un <a
href="http://it.wikipedia.org/wiki/Linguaggio_di_markup">lingu
aggio di markup</a> per la strutturazione delle pagine
web...</p>
<aside>
<p><a href="glossario.html">Vai al
glossario</a></p>
</aside>
</article>
</body>
</html>
Per definire un URL verso un file appartenente ad un livello
più basso della gerarchia è necessario indicare quali
directory è necessario passare. Ad esempio, un hyperlink
dalla pagina index.html alla pagina html5.html deve passare
per la directory “teoria” che sta allo stesso livello di
index.html.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<article>
<h1>HTML5</h1>
<p>L'HTML5 è un <a
href="http://it.wikipedia.org/wiki/Linguaggio_di_markup">lingu
aggio di markup</a> per la strutturazione delle pagine
web...</p>
<aside>
<p><a href="teoria/html5.html">Vai alla
documentazione dettagliata su HTML5.</a></p>
</aside>
</article>
</body>
</html>
Il seguente esempio mostra un hyperlink dalla pagina
index.html alla pagina esempio1.html nella cartella java,
passando per la cartella esempi.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<article>
<h1>Java</h1>
<p>Java è un linguaggio di programmazione orientato
agli oggetti.</p>
<aside>
<p><a href="esempi/java/esempio1.html">Esempio di
codice java.</a></p>
</aside>
</article>
</body>
</html>
Per poter creare degli hyperlink a pagine presenti in un
livello superiore, è necessario includere nel path la
sequenza ../ che informa il browser di salire di un livello
nella struttura di directory del sito a partire dalla directory
corrente. L'esempio seguente mostra un hyperlink dalla
pagina html5.html alla pagina index.html.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<article>
<h1>Documentazione su HTML5</h1>
<section>
<h1>Introduzione al linguaggio</h1>
<p>Oltre ad aver introdotto alcuni nuovi elementi
di markup mirati ad arricchire il contenuto semantico dei
documenti HTML, HTML5 ...</p>
</section>
<section>
<h1>Nuovi elementi semantici HTML5</h1>
<p>L'HTML5 ha introdotto un certo numero di nuovi
elementi che servono a suddividere semanticamente una pagina
nelle sue parti costituenti ...</p>
</section>
<aside>
<a href="../index.html">Torna alla home</a>
</aside>
</article>
</body>
</html>
L'esempio seguente mostra come salire di due livelli, dalla
pagina esempio1.html nella directory java alla pagina
index.html. Come si vede, è sufficiente concatenare più
sequenze ../ per poter risalire di più livelli.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<article>
<h1>Esempio di codice Java</h1>
<p>Il codice nel frammento 1 rappresenta un esempio
minimale di classe Java.</p>
<figure>
<pre><code>
class HelloWorld {
public static void main(String[] args) {
System.out.print("Hello world!");
}
}
</code></pre>
<figcaption>Frammento1. Esempio minimale di classe
Java.</figcaption>
</figure>
</article>
<aside>
<a href="../../index.html">Torna alla home</a>
</aside>
</body>
</html>
L'esempio seguente mosta come si possa salire di livello e
poi scendere tramite un unico link, passando in questo caso
dalla pagina java.html nella directory “teoria” alla pagina
esempio1.html nella directory “java”.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<article>
<h1>Documentazione su Java</h1>
<section>
<h1>Introduzione al linguaggio</h1>
<p>Uno dei principi fondamentali del linguaggio
Java è espresso dal motto write once, run anywhere ...</p>
</section>
<section>
<h1>Storia</h1>
<p>Java è stato creato a partire da ricerche
effettuate alla Stanford University agli inizi degli anni
Novanta ...</p>
</section>
<aside>
<a href="../esempi/java/esempio1.html">Guarda un
esempio di codice Java</a>
</aside>
</article>
</body>
</html>
In alternativa a specificare un hyperlink in modo relativo
alla pagina che contiene il link stesso è possibile specificare
gli hyperlink in modo relativo alla radice del sito. Un path
che comincia alla radice di un sito inizia sempre con il
simbolo /. Il link mostrato sopra potrebbe ad esempio essere
sostituito con quello seguente per poter ottenere lo stesso
risultato.
<a href="/esempi/java/esempio1.html">Guarda un esempio di
codice Java</a>
Specificare gli hyperlink in modo relativo alla radice
consente di poter spostare i file che li contengono senza
dover modificare il codice (utile ad esempio quando le
pagine vengono generate dinamicamente) oltre a
semplificare il riutilizzo dei link in documenti diversi.
Dall'altra parte, i link relativi alla radice non funzionano in
locale (in quanto la radice in tal caso è l'unità sulla quale è
presente il file) ma solo quando il sito viene reso
disponibile sul server (nel qual caso la radice è configurata
per essere la directory principale del sito).
Oltre a poter creare link tra pagine diverse di un sito, è
anche possibile creare link che puntano ad una parte
specifica della stessa pagina nella quale il link è inserito (in
gergo tecnico, si parla di link a frammenti di una pagina).
Ciò è utile in particolare per facilitare la navigazione
all'interno di pagine lunghe. Il processo che si deve seguire
è composta da due passi: 1) identificare la destinazione, 2)
creare il link alla destinazione.
Il primo passo consiste nel definire l'attributo “id”
dell'elemento al quale si vuole puntare, specificando un
identificatore univoco. Normalmente, si utilizzano come
destinazione elementi di tipo blocco come <h1>...<h6>,
<div>, <article>, <section>, etc. anche se non ci sono
particolari vincoli a riguardo.
A questo punto è possibile creare il link alla destinazione,
specificando come valore dell'attributo href l'identificatore
della destinazione preceduto dal simbolo #.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<nav>
<ul>
<li><a href="#intro">Introduzione al
linguaggio</a></li>
<li><a href="#storia">Storia</a></li>
</ul>
</nav>
<article>
<h1>Documentazione su Java</h1>
<section id="intro">
<h1>Introduzione al linguaggio</h1>
<p>Uno dei principi fondamentali del linguaggio
Java è espresso dal motto write once, run anywhere ...</p>
</section>
<section id="storia">
<h1>Storia</h1>
<p>Java è stato creato a partire da ricerche
effettuate alla Stanford University agli inizi degli anni
Novanta ...</p>
</section>
<aside>
<a href="/esempi/java/esempio1.html">Guarda un
esempio di codice Java</a>
</aside>
</article>
</body>
</html>
Lo stesso processo utilizzato per creare dei link a frammenti
della stessa pagina si può utilizzare per creare link a
frammenti di altre pagine o di altri siti (in quest'ultimo caso,
è necessario guardare il codice dei siti destinazione per
determinare l'identificatore dei frammenti a cui si vuole
puntare, se esistente). In tali casi, è sufficiente aggiungere
l'identificatore (preceduto dal simbolo #) in coda all'URL
(relativo o assoluto) della pagina nella quale è contenuto il
frammento destinazione.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<article>
<h1>Java</h1>
<p>Java è un linguaggio di programmazione orientato
agli oggetti.</p>
<aside>
<p><a href="teoria/java.html#intro">Introduzione
al linguaggio.</a></p>
<p><a href="esempi/java/esempio1.html">Esempio di
codice java.</a></p>
</aside>
</article>
</body>
</html>
Aprire un link in una nuova finestra
Se è necessario aprire un link senza sovrascrivere la finestra
corrente, è possibile specificare l'attributo “target” con
valore “_blank”. A seconda di come il browser è
configurato, questo può portare alla creazione di una nuova
tab oppure di una nuova finestra vera e propria. In generale,
tale soluzione è sconsigliata e a volte viene bloccata dal
pop-up blocker del browser.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<article>
<h1>Java</h1>
<p>Java è un linguaggio di programmazione orientato
agli oggetti.</p>
<aside>
<p><a href="teoria/java.html#intro">Introduzione
al linguaggio.</a></p>
<p><a href="esempi/java/esempio1.html"
target="_blank">Esempio di codice java.</a></p>
</aside>
</article>
</body>
</html>
Ogni link con target _blank viene aperto in una nuova tab o
finestra. Per evitare tale proliferazione, è possibile
specificare un valore diverso da _blank e utilizzare sempre
tale valore per tutti i link.
Link mail e telefonici
Utilizzando il protocollo “mailto” all'interno di un link, è
possibile fare in modo che si apra un client di posta quando
l'utente clicca sul link. Affinchè ciò avvenga, il browser
deve essere configurato a tale scopo (in caso contrario, non
succede niente).
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<article>
<h1>Java</h1>
<p>Java è un linguaggio di programmazione orientato
agli oggetti.</p>
<footer>
<address><a
href="mailto:[email protected]">Contattaci</a></address>
<footer>
</article>
</body>
</html>
Tenete comunque presente che inserire un indirizzo mail in
una pagina web in questo modo può portare alla sua
estrazione automatica da parte di spam bot, con le
conseguenze negative del caso (provate a vedere il sito
http://hivelogic.com/enkoder/ per una soluzione basata su
JavaScript che cripta l'indirizzo).
E' anche possibile utilizzare il protocollo “tel” per inserire
un numero di telefono in un link. Sui dispositivi mobili,
cliccando su tale link è possibile effettuare direttamente una
telefonata al numero specificato (il comportamento preciso
può variare da piattaforma a piattaforma).
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<article>
<h1>Java</h1>
<p>Java è un linguaggio di programmazione orientato
agli oggetti.</p>
<footer>
<address>
<a href="mailto:[email protected]">Contattaci
via mail</a>
<br/>
<a href="tel:+391234">Contattaci via
telefono</a>
</address>
<footer>
</article>
</body>
</html>
Utilizzo dei link
Il contenuto interno all'elemento <a> è importante per i
motori di ricerca. Bisogna cercare di utilizzare testi
esplicativi (“I nostri prodotti”, “Contattaci”, etc.) piuttosto
che testi generici tipo “clicca qui”.
Evitare di riempire le pagine web di link relativi a
frammenti. Questo tipo di link va utilizzato solo se ce n'è
bisogno, ad esempio se la pagina è molto lunga ed è
suddivisa in sezioni.
La maggior parte dei link che abbiamo visto (e che vengono
specificati nelle pagine web) sono link ad altre pagine o
frammenti di pagina ma è possibile anche creare link a
risorse come immagini (jpeg, gif, png) o altri tipi di file
come i file pdf, documenti office, file mp3, etc. Nel caso
delle immagini, il browser le apre in una finestra separata
senza alcun altro contenuto. Nel caso degli altri tipi di file,
se il browser è dotato di apposito plugin, tale plugin viene
attivato per gestire il file. Altrimenti, all'utente viene data la
possibilità di scaricare il file in locale o di aprire uno
specifico programma sulla sua macchina.
<!DOCTYPE html>
<html>
<head>
<title>
Tecnologie web
</title>
</head>
<body>
<article>
<h1>Java</h1>
<p>Java è un linguaggio di programmazione orientato
agli oggetti.</p>
<a href="tree.png">Struttura del sito</a>
</article>
</body>
</html>
Durante lo sviluppo e la gestione di un sito web, può
capitare che le pagine vengano modificate ed i contenuti
spostati da una pagina ad un'altra. In tal caso, è
fondamentale verificare che tutti i link continuino a
funzionare. Esistono dei tool, come quello messo a
disposizione all'indirizzo http://validator.w3.org/checklink
che permettono di fare una verifica automatica dei link.
Modificare la struttura di un sito o delle sue pagine può
spezzare i link che altri siti esterni hanno creato verso tale
sito e dovrebbe essere evitato. Se non si può evitare, è
possibile gestire il problema utilizzando la redirezione: le
pagine che vengono modificate vengono mantenute ma
svuotate del loro contenuto che viene sostituito con del
codice apposito che indica la modifica e carica
automaticamente la nuova pagina dopo alcuni secondi. Per
ottenere questo comportamento, è necessario utilizzare un
apposito elemento <meta> da inserire all'interno
dell'elemento <head>.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="REFRESH" content="10;
URL=glossario2.html" />
<title>Redirect</title>
</head>
<body>
<h1>La pagina che cerchi è stata spostata</h1>
<p>Aggiorna i bookmark. La nuova pagina si trova
all'indirizzo <a
href="glossario2.html">http://www.mysite.com/glossario2.html</
a>.</p>
<p>Verrai reindirizzato alla nuova pagina in 10 secondi.
Clicca <a href="glossario2.html"> qui</a> per visitare la
nuova pagina immediatamente.</p>
</body>
</html>
