Le immagini

LE IMMAGINI

Uno dei punti di forza delle pagine accessibili tramite World Wide Web è la possibilità di inserire delle immagini all'interno di documenti HTML. Tale opzione rende l'informazione più accattivante agli occhi dell'utente, ma oltre a questo fornisce un altro importantissimo mezzo di comunicazione al programmatore HTML. In molti casi, infatti, una semplice immagine è in grado di dare un contributo informativo molto superiore ad una intera pagina scritta.
Bisogna però ricordare che una immagine, per quanto piccola possa essere, porta ad un incremento delle dimensioni del documento, per cui l'utente che vuole consultare un testo arricchito con immagini dovrà attendere un lasso maggiore di tempo per ricevere il documento completo: è buona norma quindi inserire con oculatezza le immagini all'interno dei documenti HTML per non obbligare l'utente ad inutili attese.

L'HTML prevede un comando apposito per inserire un'immagine: IMG. Questo è un comando aperto, quindi non necessita di alcun tag di chiusura.
IMG prevede l'inserimento di alcuni parametri:

SRC per indicare l'immagine da inserire. È chiaramente di fondamentale importanza e deve essere seguito dal nome del file contenente l'immagine. Il nome deve contenere anche il path assoluto o relativo in grado di identificare in modo univoco il file.
BORDER per indicare la dimensione dell'eventuale bordo che si vuole visualizzare intorno all'immagine. Viene visualizzato solo nel caso in cui l'immagine serva come collegamento ipertestuale.
ALIGN per indicare l'allineamento dell'immagine rispetto al testo: si potrebbe volere un allineamento a sinistra (LEFT) oppure a destra (RIGHT); oppure desiderare il testo centrato verticalmente rispetto all'immagine (CENTER).Esistono anche le opzioni (TOP) e (BOTTOM) che consentono di porre il testo alllineato con il lato superiore o inferiore dell'immagine.
WIDTH permette di specificare una larghezza predefinita per l'immagine, con un valore dato in pixel.
HEIGHT permette di specificare una altezza predefinita (vedi sopra).
HSPACE permette di inserire dello spazio tra l'immagine ed il testo lateralmente.
VSPACE permette di inserire dello spazio tra l'immagine ed il testo sopra e sotto l'immagine.
ALT permette di visualizzare un testo al posto dell'immagine se questa per varie ragioni risulta non visualizzabile, ad esempio se viene usato un browser di tipo testuale.
ISMAP indica che l'immagine visualizzata è una mappa di coordinate: clickandoci sopra il computer rileva le coordinate del mouse ed è in grado di inviarle al server che può elaborarle per individuare, ad esempio, una nuova pagina da inviare.
USEMAP indica ancora una mappa di coordinate, realizzata però usando esclusivamente le proprietà del linguaggio HTML.

Vediamo dunque un esempio di questo comando:
<IMG SRC="images/wav.gif" ALIGN="LEFT">
inserisce un'immagine allineata a sinistra come in questo caso.
Come potete notare sono stati usati i due parametri SRC=... per specificare l'immagine sorgente e ALIGN=... per indicare l'allineamento desiderato. Il comando inoltre non ha richiesto chiusura.
Un'importante considerazione riguarda il formato in cui deve essere salvata l'immagine: anche se molti altri formati vengono supportati con le nuove versioni dei browser, quelli universalmente riconosciuti sono il GIF ed il JPEG. Entrambi garantiscono un'alta fedeltà nella riproduzione insieme ad un buon fattore di compressione. Vi consigliamo di utilizzare immagini in uno di questi due formati.

Come secondo esempio si può visualizzare nuovamente la stessa immagine con gli attributi:
<IMG SRC="images/wav.gif" WIDTH=100 HEIGHT=100>

Qui c'è un'immagine di prova

che portano l'immagine ad assumere dimensioni prefissate (100x100 pixel). L'utilizzo dei parametri WIDTH ed HEIGHT comporta naturalmente una riscalatura dell'immagine originaria, indipendentemente dalla sua effettiva risoluzione.
Se non volete nessun bordo potete inserire BORDER=0.

Se non viene specificato altrimenti tramite il desiderato allineamento, l'immagine viene inserita nel testo esattamente nel punto in cui appare il comando IMG, disponendo il testo ai suoi lati.
Nel caso in cui il file dell'immagine non sia disponibile o ci sia un errore nel listato HTML, il browser può cercare di avvertire che c'è un'immagine non riconosciuta visualizzando il seguente simbolo:

Naturalmente per visualizzare le immagini è necessario usare un browser grafico. Se questo non è il caso ed il vostro browser è di tipo testuale, allora conviene inserire il parametro ALT: quando il browser testuale incontra l'istruzione per l'immagine la salta cercando direttamente l'ALT e visualizzando il testo ivi contenuto.
Nel nostro caso, ad esempio, potremmo inserire:
<IMG SRC="images/wav.gif" ALT="File audio">
per permettere, anche a chi non dispone di un editor grafico, di avere informazioni su tutti gli elementi della pagina.

Le immagini possono naturalmente essere inserite all'interno di comandi <A HREF="..."> per utilizzarle come pulsanti di collegamento od icone. Il browser, se non altrimenti specificato, mette automaticamente un bordo intorno all'immagine per indicare che è un link. Se non lo volete usate il parametro BORDER=0 dentro IMG come:

	Corsi On-Line