Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
<img src=uri alt=testo alternativo> dove uri un url o il pathname di un file. Lattributo alt non obbligatorio ma consigliato poich fornisce un testo alternativo nel caso il browser non possa visualizzare limmagine. Inoltre lattributo alt consente alle persone ipovedenti di ottenere una descrizi one testuale dellimmagine che pu essere utilizzata dai browser vocali o dagli screen reader. Se limmagine solo una decorazione si usa alt=.
Gli attributi width e height non sono obbligatori ma consigliati. Infatti, se non vengono specificati, il layout della pagina pu modificarsi durante il caricamento delle immagini perch il browser non in grado di determinare lo spazio che esse occuperanno. Gli attributi width e height consentono anche di modificare le dimensioni originali di unimmagine. Tuttavia occorre fare attenzione a specificare lunghezze tali da mantenere le proporzioni inalterate.
198 x 149
107 x 80
Fig. 1 Immagine ridimensionata
198 x 80
1
Autore: Bocchi Cinzia Ultimo aggiornamento: 15/09/2013
La figura 1 mostra la stessa immagine con le dimensioni originali, con le dimensioni variate proporzionalmente e con le dimensioni variate senza mantenere le proporzioni.
Le mappe immagine
Le mappe immagine sono immagini sulle quali vengono delimitate delle aree cliccabili. Un esempio visibile allurl http://www.dronet.org/mappa/mappaitalia.html# . Bisogna fare attenzione a non confondere unimmagine cliccabile con una mappa immagine. Unimmagine cliccabile si pu ottenere con il codice:
<img usemap="#mapname"> dove mapname il nome (name) o lid della mappa. Lattributo usemap associa la mappa allimmagine. La descrizione della mappa avviene con la sintassi:
<map name="mapname"> <area .........> <area .........> <area .........> </map> La mappa pu essere suddivisa in un numero qualsiasi di aree e ciascuna area pu specificare gli attributi seguenti: Attributo
shape
Descrizione
Specifica la forma dellarea. Pu assumere i valori: - default, lintera regione, - rect, un rettangolo, - circle, un cerchio, - poly, un poligono. Specifica: - le coordinate dei vertici left, top, right, bottom del rettangolo, - le coordinate del centro del cerchio e il raggio, - le coordinate dei vertici del poligono.
coords
3
Autore: Bocchi Cinzia Ultimo aggiornamento: 15/09/2013
Nel caso del poligono la coppia di coordinate iniziali e finali dovrebbero coincidere. nel caso non fosse cos, il browser aggiunger la coppia mancante. href alt download (HTML5) Specifica la risorsa collegata mediante link. Il testo alternativo per larea. Specifica lURI della risorsa da scaricare quando si clicca sullarea della mappa. Utilizzabile solo se presente lattributo href, Supportato solo da Firefox e Chrome. Specifica come aprire la risorsa indirizzata da href. Se il suo valore _blank oppure _new, la risorsa viene aperta in unaltra finestra o scheda.
target
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="/images/sun.gif" type="image/gif"> </map>
4
Autore: Bocchi Cinzia Ultimo aggiornamento: 15/09/2013
Per utilizzare il tool indicato occorre scegliere limmagine e cliccare su accept. Limmagine verr visualizzata nel box sottostante. Successivamente bisogna disegnare con il mouse le aree sullimmagine. Attenzione! Ogni volta che disegnate unarea ricordatevi di fare clic per disattivare la funzione di disegno. Diversamente, la vostra area si sposter. La figura successiva mostra limmagine con due aree rettangolari.
Come si pu osservare, le coordinate vengono calcolate automaticamente. Al termine si pu copiare il codice generato dal tool (sotto limmagine) e inserirlo nella pagina HTML. Lelenco Output consente di scegliere quale codice generare: solo codice HTML (Standard imagemap), codice HTML/CSS (CSS imagemap), codice per wiki (Wiki imagemap).
Altri attributi
Lelemento <area> ammette altri attributi che non influiscono sullaspetto nella pagina ma che consentono di esprimere propriet semantiche utilizzabili da agenti software, come i motori di ricerca. Attributo
hreflang (HTML5)
Descrizione
Specifica il linguaggio del documento collegato. Il valore dellattributo hreflang una stringa di 2 caratteri che rappresenta il linguaggio, come it per italiano e en per inglese. Un elenco completo di tali codici reperibile allurl http://www.w3schools.com/tags/ref_language_codes.asp Specifica la relazione tra il documento corrente e quello collegato. Valori possibili sono: alternate: versione alternativa del documento corrente author: autore del documento bookmark: url permanente usato per il bookmarking (preferiti)
rel
5
Autore: Bocchi Cinzia Ultimo aggiornamento: 15/09/2013
help: documento di aiuto license: informazioni di copyright sul documento corrente next: il documento successivo in una selezione (per esempio, i capitoli di un libro o i post di un blog) nofollow: collegamento disapprovato perch non garantito dallautore del documento corrente noreferrer: collegamento che non fa trapelare alcuna informazione sul referrer, cio su chi ha seguito il link prefetch: il documento di destinazione deve essere inserito nella cache del browser prev: il documento precedente in una selezione search: collegamento ad uno strumento per la ricerca nel documento corrente tag: un tag (parola chiave) per il documento corrente Specifica il tipo MIME del documento correlato. Per unn elenco completo di tipi MIME si veda http://www.iana.org/assignments/media-types. Specifica per quale dispositivo o media ottimizzato il documento collegato. I valori assegnati a tale attributo sono stringhe che indicano il tipo di device e altre propriet del device stesso. E possibile utilizzare gli operatori booleani and, not e or (rappresentato con una virgola). I dispositivi specificabili sono: all: tutti i dispositivi aural: sintetizzatore vocale braille: dispositivo braille (per i non vedenti) handheld: palmari projection: proiettori print: stampa screen: schermo del computer tty: telescriventi tv: televisori Per le propriet specificabili di ogni device si veda http://www.w3schools.com/tags/att_a_media.asp
Quest'opera distribuita con Licenza Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 3.0 Italia.
6
Autore: Bocchi Cinzia Ultimo aggiornamento: 15/09/2013