Il tag MAP e i suoi attributi

Транскрипт

1 C.S.F. En.A.I.P. Cuneo Corso: I O.S.P.A. Laboratorio: Elementi di grafica per il web N scheda 5 Titolo Esercitazione / Argomento trattato Il tag IMG e i suoi attributi Il tag MAP e i suoi attributi h previste: 4 data: Obiettivi: Le immagini in HTML. Tipo di attività Attività individuale Cognome e Nome... Considerazioni personali e difficoltà riscontrate nello svolgimento dell esercitazione: Esercitazione effettuata dal al Ore effettive Formatore Alessia Cesana

2 INTRODUZIONE Le immagini Cosa sarebbe una pagina web senza immagini? Impossibile anche solo pensarlo. Questo elemento è senza alcun dubbio di primaria importanza. I formati supportati dal www sono diversi e variano a seconda del browser adoperato, diciamo che.gif.jpg e.png sono quelli riconosciuti ufficialmente da tutti i browser e non si dovrebbero usare formati diversi da questi. <IMG...> L'elemento <IMG> necessita di attributi, di cui almeno uno necessariamente obbligatorio: src. A differenza di molti altri elementi html (tags), questo non ha bisogno di essere concluso dallo stesso elemento preceduto dalla barra retroversa </IMG>. vediamo gli attributi più comuni: src L'attributo src è indispensabile per l'elemento IMG, senza di questo non funzionerebbero neppure tutti gli altri. Permette di specificare il nome dell'immagine da visualizzare quando questa si trovasse nella stessa cartella (dir) in cui è presente la pagina web che la richiama. È possibile specificare anche percorsi (path) fatti da cartelle (directory) e/o sottocartelle (subdirectory) compresi gli URL assoluti richiamanti l'immagine da altri siti. Il tag IMG src può essere adoperato anche all'interno del tag <a href (ancora o link), potrà essere cliccato come un normale link testo. Questa la sintassi: <img src="nome_immagine.jpg"> o anche <img src=" link.it/nome_immagine.jpg"> align L'attributo align permette di specificare l'allineamento dell'immagine rispetto alla riga di testo successiva, i valori ammessi sono: left, right, top, middle, baseline e bottom. I due valori principali left e right fanno si che l'immagine diventi di tipo flottante, vediamo come: align="left" Allinea l'immagine sul bordo sinistro della finestra di visualizzazione del browser, il testo che segue circonda la parte destra dell'immagine. Allineamento di tipo left, il contorno immagine e stato riempito volutamente di colore rosa per meglio risaltare questo tipo di allineamento. L'immagine infatti comprende anche eventuali zone trasparenti.

3 align="right" Allinea l'immagine sul bordo destro della finestra di visualizzazione del browser, il testo che segue circonda la parte sinistra dell'immagine. Allineamento di tipo right il contorno immagine e stato riempito volutamente di colore rosa per meglio risaltare questo tipo di allineamento. L'immagine infatti comprende anche eventuali zone trasparenti. align="top" Allinea il testo che segue l'immagine con la parte superiore dell'elemento più alto nella riga. Allineamento di tipo top, il contorno immagine e stato riempito volutamente di colore rosa per meglio risaltare questo tipo di allineamento. L'immagine infatti comprende anche eventuali zone trasparenti. align="middle" Allinea la linea di base della riga corrente con la parte centrale dell'immagine. Allineamento di tipo middle, il contorno immagine e stato riempito volutamente di colore rosa per meglio risaltare questo tipo di allineamento. L'immagine infatti comprende anche eventuali zone trasparenti. align="bottom" Allinea il testo che segue l'immagine con la parte inferiore dell'elemento più basso nella riga di testo. Allineamento di tipo bottom, il contorno immagine e stato riempito volutamente di colore rosa per meglio risaltare questo tipo di allineamento. L'immagine infatti comprende anche eventuali zone trasparenti. Alcuni attributi sembrano gli stessi di altri, è vero, ma ognuno svolge una funzione differente. L'importante è farsi un'idea di cosa succede, ognuno di noi poi adopererà quello che riterrà più adatto alle proprie esigenze.

4 alt L'attributo alt (alternativa alla grafica), permette di specificare un testo per quei browser non grafici. Viene adoperato per descrivere l'immagine e non va confuso con title spiegato sotto. Il testo apparirà nel caso in cui l'immagine non venisse caricata, per questo motivo l'attributo ALT diventa obbligatorio ai fini di una validazione del W3C. Questo il codice: <img src="tarta.jpg" alt="questa è una tartaruga"> Ho volutamente tolto l'immagine e come potete vedere al suo posto c'è il testo alternativo immesso con l'attributo ALT. title L'attributo Title (titolo), permette di specificare un testo che descriva l'immagine, simile ad alt viene interpretato correttamente a prescindere se l'immagine grafica sia visibile o meno. Questo il codice: <img src="tarta.jpg" title="ciao sono una tartaruga"> Provate a posizionare il cursore del mouse sull'immagine, sarà possibile leggere il testo immesso con l'attributo Title. border L'attributo border permette di specificare lo spessore del bordo intorno all'immagine. Risulta utile impostare border="0" quando l'immagine fa parte di un collegamento (link o ancora) e non si vuole visualizzare quel bordino azzurro di default, tipico delle immagini facenti parte di un link. Questo il codice: <img src="tarta.jpg" border="3"> Si noti lo spessore del bordo dell'immagine che in questo caso è stato impostato come spessore 3.

5 vspace e hspace L'attributo VSPACE così come l'attributo HSPACE vengono adoperati nelle immagini flottanti, cioè quelle immagini allineate con left e right, servono ad impostare rispettivamente degli spazi verticali ed orizzontali (vertical space ed horizontal space) fra il testo e l'immagine stessa, ed anche fra l'immagine e la sua cornice. Un esempio chiarirà sicuramente meglio:

6 width e height L'attributo WIDTH, così come l'attributo HEIGHT, vengono adoperati per specificare le dimensioni orizzontale e verticale dell'immagine; se omessi il browser impiegherà più tempo per calcolare l'area sulla quale disporre eventuale testo, per questo motivo conviene impostare sempre questi valori, visto poi che sono noti. Si possono impostare anche valori diversi da quelli reali nel caso in cui si volesse adattare l'immagine a certe dimensioni, compreso una eventuale distorsione. usemap L'attributo USEMAP viene adoperato per indicare che l'immagine è una mappa d'immagine sul lato client. Cosa significa mappa di immagini? È possibile suddividere un'immagine in diverse aree tipo una mappa, da qui appunto il nome. Associare ad ognuna di queste aree la possibilità di richiamare un link diverso. In pratica la stessa immagine usata come link è in grado di richiamare links diversi a seconda del punto in cui viene cliccata. Se l'argomento USEMAP inizia con un simbolo # si assume che la descrizione della mappa si trovi nello stesso documento in cui si trova il tag IMG; risulta infatti possibile avere la definizione della mappa anche su un file di testo separato. Questo un esempio: <img src="../img/tarta.jpg" usemap="map.htm#mappa1" > Questo codice utilizza la mappa descritta come mappa1 in map.htm, per il file di immagine tarta.jpg Le aree attive dell'immagine vengono descritte adoperando i tags MAP e AREA

7 <MAP>...</MAP> L'elemento MAP descrive ciascuna delle aree dell'immagine a cui è stata assegnata una mappa, e indica la posizione del documento da scaricare quando viene attivata l'area definita. Questo un esempio: <map name="nome"> <area [shape="forma"] coords="x,y,..." [href="riferimento"] [nohref] > </map> dove: nome specifica il nome della mappa in modo che USEMAP possa fare riferimento ad essa. forma fornisce la forma dell'area specificata es. RECT per rettangolo. Nel caso si omettesse l'attributo SHAPE viene assunto SHAPE="RECT" per default, le altre forme sono circle e poly. L'attributo COORDS fornisce le coordinate nella forma utilizzando pixel dell'immagine come unità. Per un rettangolo le coordinate vengono fornite sinistro, alto, destro, basso L'area rettangolare definita comprende l'angolo inferiore destro specificato, se per esempio si volesse specificare l'intera area di una immagine 100 x 100 pixel le coordinate saranno:"0,0,99,99" HREF richiama il link ad esso associato NOHREF indica che eventuali clic in questa zona non richiameranno alcun link. <AREA> L'elemento AREA specifica le diverse aree, nel caso in cui due aree si intersecano quella che appare per prima nella definizione avrà prevalenza. Vediamo un esempio per riassumere il tutto: <map name="tartaruga"> <area shape="circle" coords="57,65,14" href="interno.htm"> <area shape="rect"coords="13,2,99,37" href="guscio.htm"> </map> <img src="../img/tarta.jpg" usemap="#tartaruga"> Provate a cliccare all'interno occhi o sul guscio della tartaruga, per andare rispettivamente ad inizio o alla fine di questa pagina web.

8 Non so bene se funzioni con tutti i browser, alcuni infatti supportano solo RECT e non CIRCLE e POLY. Questa spiegazione ha il solo scopo di chiarire meglio il funzionamento di una immagine suddivisa in mappa. Per la sua realizzazione nessuno ricorre ai comandi manuali, i programmi in grado di generare mappe da un'immagine sono infatti ormai moltissimi. Esistono anche editors HTML in grado di generare automaticamente codice per mappe cliccabili, sarà sufficiente tracciare le aree da cliccare, esattamente come adoperare un programma di grafica. ESERCIZIO 1. Attraverso un motore di ricerca (ad es. Google) recuperate un'immagine del sistema solare. Esempio: 2. Creare una pagina HTML chiamata index.htm avente come sfondo una foto del cielo profondo. 3. L immagine del sistema solare dovrà essere convertita in mappa e, al passaggio del mouse, dovranno comparire i nomi dei pianeti. 4. Nel corpo del testo si dovranno inserire le immagini dei pianeti allineandole al centro, a destra e sinistra (a piacere) e inserendo le relative descrizioni. Prima dell immagine del pianeta dovrà essere riportato il nome dello stesso utilizzando il tag H2 con un colore del font differente dallo standard. 5. Il colore del testo della pagina dovrà essere chiaro (a piacere) in modo da contrastare con lo sfondo scuro del cielo profondo.