Laboratorio di Tecnologie Web HTML: Hyperlink Dott. Stefano Burigat

Transcript

1 Laboratorio di Tecnologie Web HTML: Hyperlink Dott. Stefano Burigat

2 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 (

3 <h1>html5</h1> <p>l'html5 è un <a href=" aggio di markup</a> per la strutturazione delle pagine web...</p> 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,

4 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

5 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

6 glossario.html. <h1>html5</h1> <p>l'html5 è un <a href=" aggio di markup</a> per la strutturazione delle pagine web...</p> <aside> <p><a href="glossario.html">vai al glossario</a></p> </aside> 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.

7 <h1>html5</h1> <p>l'html5 è un <a href=" 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> Il seguente esempio mostra un hyperlink dalla pagina index.html alla pagina esempio1.html nella cartella java, passando per la cartella esempi. <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> Per poter creare degli hyperlink a pagine presenti in un

8 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. <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> 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ù

9 sequenze../ per poter risalire di più livelli. <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> <aside> <a href="../../index.html">torna alla home</a> </aside> 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.

10 <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> 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>

11 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>,, <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 #.

12 <nav> <ul> <li><a href="#intro">introduzione al linguaggio</a></li> <li><a href="#storia">storia</a></li> </ul> </nav> <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> 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

13 l'identificatore (preceduto dal simbolo #) in coda all'url (relativo o assoluto) della pagina nella quale è contenuto il frammento destinazione. <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> 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.

14 <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> 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).

15 <h1>java</h1> <p>java è un linguaggio di programmazione orientato agli oggetti.</p> <footer> <address><a <footer> 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 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).

16 <h1>java</h1> <p>java è un linguaggio di programmazione orientato agli oggetti.</p> <footer> <address> <a via mail</a> <br/> <a href="tel: ">contattaci via telefono</a> </address> <footer> 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,

17 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. <h1>java</h1> <p>java è un linguaggio di programmazione orientato agli oggetti.</p> <a href="tree.png">struttura del sito</a> 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 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

18 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. <meta http-equiv="refresh" content="10; URL=glossario2.html" /> Redirect <h1>la pagina che cerchi è stata spostata</h1> <p>aggiorna i bookmark. La nuova pagina si trova all'indirizzo <a href="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>