HTML 3. I link (collegamenti) L URL. Il tag <A> LINK (àncora) Come collegare documenti

Transcript

1 HTML 3 LINK (àncora) Come collegare documenti I link (collegamenti) Semplicemente "cliccando" su una parola, un disegno, un'immagine, si può accedere ad un'altra pagina Web Questo effetto si ottiene con la cosiddetta àncora. Un'ancora non è altro che un riferimento all'indirizzo di una pagina WWW Per creare un ancora si usa il tag: <A HREF="URL">... </A> HREF sta per Hypertext Reference Tecnologie di Sviluppo per il WEB 2 L URL Relativa img/pippo.gif../img/pippo.gif Assoluta Può fare riferimento ad una parte del documento Il tag <A> Tutto ciò che si trova fra <A> e </A> diventa "cliccabile" Il browser automaticamente provvederà ad evidenziare le ancore, contornando le immagini e con sottolineature e/o colori diversi per il testo Se col cursore si passa sopra un'ancora, esso diventerà una manina, a sottolineare il fatto che quello è un collegamento Tecnologie di Sviluppo per il WEB 3 Tecnologie di Sviluppo per il WEB 4

2 Importante Come link si può far riferimento direttamente ad una directory il server restituisce il file index.html o altri file di default per cui è stato settato Se un URL fa riferimento ad una directory conviene terminare l URL con / altrimenti il client eseguirà due richieste HTTP una per l altra per <BODY> Se clicchi <A HREF= alla homepage di VIRGILIO. </BODY> Tecnologie di Sviluppo per il WEB 5 Tecnologie di Sviluppo per il WEB 6 Accesso a documenti locali <A HREF= path_del_documento > link </A> Si vuole creare un link a doc.html che si trova nella stessa directory del documento corrente <A HREF= doc.html > clicca qui </A> Si vuole creare un link a doc2.html che si trova nella directory test/final <A HREF= test/final/doc2.html > clicca qui </A> Segnalibro 1(named anchor) Serve a creare un collegamento a parti specifiche di un documento Con l attributo ID, si crea un segnalibro al punto in cui il link deve fare riferimento <A ID= NomeUnico > TestoAncora</A> NomeUnico deve essere un nome unico all interno del documento TestoAncora è opzionale </A> è opzionale Tecnologie di Sviluppo per il WEB 7 Tecnologie di Sviluppo per il WEB 8

3 Segnalibro 2 Per creare un link ad un segnalibro nello stesso documento si usa: Vai alla <A HREF= #fine_doc > fine </A> del documento Si può far riferimento a sezioni specifiche di documenti differenti: Vai alla <A HREF= cap1.html#fine_doc > fine </A> del capitolo 1 Tecnologie di Sviluppo per il WEB 9 di segnalibri <BODY> Info su <A HREF= #Arg1 > Argomento 1</A>. <BR> Info su <A HREF= #Arg2 > Argomento 2</A>. <BR> Info su <A HREF= #Arg3 > Argomento 3</A>. <BR> <HR> [ altro...] <A ID= Arg1 ><H2> Argomento 1</H2></A> Testo relativo all argomento 1. [ altro...] <A ID= Arg2 ><H2> Argomento 2</H2></A> Testo relativo all argomento 2. [ altro...] <A ID= Arg3 ><H2> Argomento 3</H2></A> Testo relativo all argomento 3. </BODY> Tecnologie di Sviluppo per il WEB 10 Link a documenti non HTML Le ancore possono anche collegare immagini, suoni, animazioni, <A HREF= immagine.gif"> <A HREF= suono.wav"> <A HREF= video.mov"> A seguito del click su un riferimento del genere, il browser caricherà il file e lo manderà in esecuzione Link ed immagini Un immagine può essere un link, basta inserire il tag IMG all interno di A <A HREF="home.html"> <IMG SRC= house.gif"></a> <A HREF="home.html"> <IMG SRC= house.gif BORDER=0></A> Tecnologie di Sviluppo per il WEB 11 Tecnologie di Sviluppo per il WEB 12

4 Spedire con un link Si può creare un'ancora che permette di inviare una . Si usa: <A HREF="mailto:indirizzo_ "> link </A> Con il click su link si attiva il vostro programma di gestione della posta predefinito con cui comporre ed inviare l Attributi di <A> TARGET= nome Serve per indicare in quale finestra (frame) dovrà essere caricato l'oggetto collegato a quell'ancora E.g., TARGET= _BLANK carica il documento in una nuova finestra TITLE= nome Titolo del documento a cui l ancora fa riferimento Usato con mailto fornisce l oggetto (subject) della Tecnologie di Sviluppo per il WEB 13 Tecnologie di Sviluppo per il WEB 14 Attributo ACCESSKEY di <A> Invece attivare un link con la pressione di un tasto del mouse, è possibile attivarlo con la pressione combinata del tasto ALT e di un carattere specificato dall attributo ACCESSKEY Il carattere indicato da ACCESSKEY dovrebbe comparire nel link, in tal caso il browser potrebbe mostrare (IE e N non lo fanno) il carattere in maniera differente Per caricare la pagina specificata dal link Netscape ALT+carattere Internet Explorer ALT+carattere e poi premere invio Attributo TABINDEX di <A> Il valore dell attributo è un intero maggiore di zero Serve a specificare la sequenza in cui il browser passerà il focus 1 ai link attraverso il tasto tab I browser evidenziano il link che ha il focus con un rettangolo tratteggiato 1 Elemento attivo in un dato momento Tecnologie di Sviluppo per il WEB 15 Tecnologie di Sviluppo per il WEB 16

5 <a href="home1.html" accesskey="e" tabindex=3> Esami</a><BR> <a href="home2.html" accesskey="r" tabindex=1> Risultati</a><BR> <a href="home3.html" accesskey="o" tabindex=2> Orali</a> Il tag <BASE> Serve per indicare la base di partenza per i collegamenti nel documento Utilizzato per fornire un riferimento e risolvere l indirizzamento relativo Deve essere specificato nella sezione HEAD Tecnologie di Sviluppo per il WEB 17 Tecnologie di Sviluppo per il WEB 18 Se nel documento c è il seguente comando <BASE HREF= > Allora, il seguente collegamento <A HREF= indice.html > Indice </A> fa riferimento al documento: Mappe (link+immagine) Una mappa è un immagine divisa in regioni chiamate zone-calde (hotzone) Una hotzone è una regione cliccabile associata ad un link Le mappe offrono un modo alternativo per aggiungere link ad una pagina web Esistono mappe lato server e mappe lato client Tecnologie di Sviluppo per il WEB 19 Tecnologie di Sviluppo per il WEB 20

6 Mappe lato client Per realizzare mappe lato client è necessario indicare la mappa da usare specificandola con l attributo USEMAP del tag IMG Usare i tag MAP ed AREA per indicare le hotzone (possono comparire in qualsiasi parte del documento HTML) <img border=0 src="mappa.gif" width="200" height="200" usemap="#menumap"> <map name="menumap"> <area shape="rect" coords="2,2,90,90 " href="no.html"> <area shape="rect" coords="100,2,190,90" href="ne.html"> <area shape="rect" coords="2,100,90,190" href="so.html"> <area shape="rect" coords="100,100,190,190" href="se.html"> </map> Tecnologie di Sviluppo per il WEB 21 Tecnologie di Sviluppo per il WEB 22 Risultato USEMAP Il suo valore è l URL di un segmento MAP in un documento HTML che contiene le coordinate della mappa ed i relativi link Vale lo stesso discorso fatto per i segnalibri Il segmento MAP avrà un nome a cui si farà riferimento tramite USEMAP con #nome esempio Tecnologie di Sviluppo per il WEB 23 Tecnologie di Sviluppo per il WEB 24

7 Importante Bisogna sempre dare la dimensione dell immagine associata ad una mappa nel tag IMG In questo modo la mappa avrà sempre la stessa grandezza a prescindere dalla dimensione del browser Le coordinate rappresentanti le varie regioni individueranno sempre delle porzioni della mappa Come individuare le coordinate Nella barra di stato del browser sono indicate le coordinate dove si trova il cursore relativamente alla mappa <a href= rr > <img border=0 src="mappa.gif" width="200" height="200" ISMAP> </a> Tecnologie di Sviluppo per il WEB 25 Tecnologie di Sviluppo per il WEB 26 Il tag MAP Identifica le hotzone di una mappa Contiene una serie di tag AREA che servono per dividere l immagine collegata al tag MAP in regioni sensibili (link) I suoi attributi sono: CLASS, DIR, ID, LANG, NAME, STYLE, TITLE NAME serve a collegare la mappa all immagine (USEMAP=#nome) Tecnologie di Sviluppo per il WEB 27 Tecnologie di Sviluppo per il WEB 28

8 Attributi di AREA SHAPE Individua la forma che deve avere la regione sensibile al mouse (hotzone) Valori: CIRCLE (CIRC), POLYGON (POLY) e RECTANGLE (RECT) COORDS Definisce le coordinate di una hotzone Il modo di indicare le coordinate dipende dal tipo di forma assunta dalla hotzone SHAPE e COORDS 1 CIRC COORDS= x, y, r (x,y) centro del cerchio r raggio del cerchio RECT COORDS = x 1, y 1, x 2, y 2 (x 1, y 1 ) il vertice in alto a sinistra (x 2, y 2 ) il vertice in basso a destra Tecnologie di Sviluppo per il WEB 29 Tecnologie di Sviluppo per il WEB 30 SHAPE e COORDS 2 POLY COORDS = x 1, y 1, x 2, y 2, x 3, y 3 (x 1, y 1 ) primo vertice del poligono (x 2, y 2 ) secondo vertice del poligono (x 3, y 3 ) terzo vertice del poligono. Sono necessari almeno tre vertici Il poligono è chiuso automaticamente (non è necessario ripetere il primo vertice) Coordinate di un immagine (0,0) (70,0) x (0,120) (70,120) y Tecnologie di Sviluppo per il WEB 31 Tecnologie di Sviluppo per il WEB 32

9 Ulteriori attributi di AREA HREF Riferimento ad una risorsa Stesse regole del tag A NOHREF Definisce una hotzone per cui non è eseguita un azione anche se l utente la seleziona Nel tag AREA può essere presente uno solo dei due attributi precedenti TARGET, TITLE, ACCESSKEY, TABINDEX Significato come per il tag A Nota Si possono definire delle regioni che si sovrappongono Il primo tag AREA all interno di MAP ha la priorità Il browser ignora le coordinate che si estendono oltre i limiti dell immagine Tecnologie di Sviluppo per il WEB 33 Tecnologie di Sviluppo per il WEB 34