Anda di halaman 1dari 6

Linguaggio HTML Immagini

Inserimento di immagini in una pagina HTML


Linserimento di unimmagine avviene con la sintassi:

<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=.

Dimensioni delle immagini


Il tag img consente di specificare la larghezza e laltezza dell immagine, in pixel, mediante gli attributi width e height.

<img src=uri alt=testo alternativo width=w_pixel height=h_pixel>

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.

Cambiare le dimensioni di unimmagine mantenendo le proporzioni


Per mantenere le proporzioni sufficiente applicare la proporzione: larghezza_originale : nuova_larghezza = altezza_originale : nuova_altezza e fissare la nuova larghezza/altezza, ricavando cos la nuova altezza/larghezza: nuova_altezza = (nuova_larghezza * altezza_originale) / larghezza_originale nuova larghezza = (nuova_altezza * larghezza_originale) / altezza_originale Nel caso dellesempio precedente, fissata la nuova_larghezza a 107 pixel si ha: nuova_altezza = 107 * 149 / 198 = 80 (con arrotondamento)

Ridimensionamento, ottimizzazione, conversione e fotoritocco


Le immagini da inserire in una pagina web possono essere preparate in anticipo, cio possibile stabilire preventivamente quali debbano essere le loro dimensioni e, aspetto non meno importante, il loro peso (la dimensione in byte). Immagini troppo pesanti rallenteranno il caricamento della pagina nel browser. Inoltre, occorre verificare che il formato delle immagini rientri tra quelli ammessi, pena limpossibilit di visualizzarle correttamente. I formati consentiti sono GIF, JPG e PNG. Le operazioni che potrebbero essere necessarie sono quindi il ridimensionamento, lottimizzazione (riduzione del peso) e la conversione (da un formato non supportato ad uno ammesso) delle immagini. Ulteriori operazioni possono consistere nel fotoritocco o editing. Esistono strumenti professionali per effettuare lediting di immagini, come Photoshop (a pagamento) o Gimp (gratuito). Essi, per, richiedono un certo sforzo in termini di tempo e impegno per lapprendimento. Fortunatamente sono disponibili numerosi servizi web based che consentono di manipolare le immagini, convertirle e ottimizzarle senza che si debbano possedere particolari conoscenze e abilit tecniche. Nel seguito trovate una selezione di tali tool online, che vi invito a sperimentare. Photoshop Express Editor: http://www.photoshop.com/tools Web Resizer: http://www.webresizer.com/resizer/ Pixlr: http://pixlr.com/ Ipiccy: http://ipiccy.com/ FotoFlexer: http://fotoflexer.com Online Image Optimizer: http://tools.dynamicdrive.com/imageoptimizer/#.UpKhu9KDFTZ Smush.it: http://www.smushit.com/ysmush.it/ ottimizza le immagini rimuovendo i byte 2
Autore: Bocchi Cinzia Ultimo aggiornamento: 15/09/2013

inutili Free Online Images Converter: http://www.pictureresize.org/online-imagesconverter.html

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:

<a href=uri> <img src=uri alt=testo alternativo width=w_pixel height=h_pixel> </a>

Una mappa immagine viene creata, invece, con la sintassi:

<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

Esempio (da http://www.w3schools.com/tags/att_area_type.asp)

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

Tool online per creare mappe immagine


http://www.maschek.hu/imagemap/imgmap

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

type (HTML5) media (HTML5)

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