Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » Html » Le immagini in Html: Tag IMG

Tag IMG

di GDesign, 10 Maggio 2002

Versione StampabileDownload in pdf


Per inserire un'immagine in una pagina HTML basta inserire il tag: <IMG SRC="nome immagine">; questo tag non ha bisogno di chiusura. Affinché l'immagine venga visualizzata nella pagina web bisogna specificarne il nome, l'estensione e l'eventuale percorso. Usando il tag in questo modo l'immagine appare allineata alla base della riga di testo corrispondente, senza spazi aggiuntivi e mantiene le sue dimensioni assolute. Adesso vedremo gli attributi del tag <IMG> che ci permettono di personalizzare l'impaginazione dell'immagine. Possiamo definire le dimensioni di visualizzazione di un'immagine specificando gli attributi WIDTH (larghezza in pixel) e HEIGHT (altezza in pixel). Ad esempio:

<IMG SRC="image.jpg" WIDTH="100" HEIGHT="50">

Quando si specificano le dimensioni di un'immagine è necessario conoscerne le dimensioni effettive per mantenere inalterato il rapporto larghezza/altezza evitando così di deformare l'immagine. Anche se si vuole visualizzare l'immagine a grandezza naturale è sempre preferibile specificare i valori di WIDTH e HEIGHT perché così il browser ha maggiori informazioni per collocare l'immagine ed il caricamento della pagina risulta molto più rapido.

Oltre alle dimensioni di visualizzazione possiamo definire anche l'allineamento dell'immagine rispetto al testo circostante mediante l'attributo ALIGN. Esempio:

<IMG SRG="image.jpg" ALIGN="bottom">

I valori di ALIGN ammessi sono:
Bottom: il lato inferiore dell'immagine appare allineato alla base della riga di testo (valore predefinito);
Middle: il punto mediano dell'altezza dell'immagine si allinea alla base della riga di testo; il testo si spezza e prosegue sotto l'immagine;
Left: l'immagine si posiziona sul lato sinistro della pagina e il testo scorre intorno a lei sul lato destro;
Right: l'immagine si posiziona sul lato destro della pagina e il testo scorre intorno a lei sul lato sinistro.

Nel caso in cui si voglia allontanare l'immagine dal testo si può aumentare lo spazio vuoto che circonda l'immagine attraverso gli attributi VSPACE (spazio verticale, in pixel) e HSPACE (spazio orizzontale, in pixel). Ad esempio scrivendo:

<IMG SRC="image.jpg" VSPACE="10" HSPACE="20">

oltre ad inserire nella pagina web image.jpg si specifica che sopra e sotto l'immagine devono rimanere 10 pixel vuoti, e a destra e sinistra dell'immagine devono rimanere 20 pixel vuoti.

Si può anche aggiungere un bordo intorno all'immagine tramite l'attributo BORDER che deve essere espresso in pixel secondo la sintassi:

<IMG SRC="image.jpg" BORDER="5">

Un attributo fondamentale del tag <IMG> è ALT (testo alternativo). Grazie a tale attributo si può definire una didascalia associata all'immagine. La sintassi corretta è:

<IMG SRC="nome immagine" ALT="breve descrizione testuale">

Questa didascalia associata all'immagine appare durante il caricamento della pagina o quando si passa con il mouse sopra l'immagine. I vantaggi principali dell'usare l'attributo ALT sono:
i visitatori possono capire prima del caricamento completo il contenuto delle immagini;
i browser speciali per non-vendenti sono in grado di interpretare correttamente la pagina;
diversi motori di ricerca tengono conto del valore dell'attributo ALT delle immagini di una pagina per catalogarla con precisione.

Ad ogni immagine si può associare un collegamento ipertestuale includendo il tag <IMG> all'interno della coppia di tag <A HREF> e </A> secondo la sintassi:

<A HREF="index.html"><IMG SRC="index.gif"></A>

Associare un collegamento ipertestuale ad un'immagine è molto utile quando si vuole creare ad esempio un menù grafico di navigazione per un sito web. Creando immagini ad hoc come icone o pulsanti il visitatore né intuirà la funzione a colpo d'occhio.

Però quando un'immagine è cliccabile, appare generalmente circondata da un bordo di colore blu che risulta anti-estetico. In questo caso basta indicare all'interno del tag <IMG> l'attributo BORDER="0" per fare in modo che il bordo resti invisibile.

^Top

Dai un voto a questo articolo:   HITS: 148500 | VOTI: 104 | MEDIA VOTI: 7.1    

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 5