Immagini e loro formato

Il World Wide Web si differenzia dall'antecedente Internet, oltre che della possibilità di navigare con il solo uso del mouse, per la possibilità di presentare documenti multimediali. Le immagini hanno dato colore e vivacità ad Internet, e volendo fare un paragone storico, simo passati dal medioevo (rappresentato dalla grigia finestra terminale tipo DOS) a l'era spaziale con eplosione di colori, effetti grafici e suoni. Le immagini sono uno di questi elementi multimediali, ma come esistono molti modi di presentare un testo (arial, courier, helvetica, etc.), esistono parecchi formati di immagini (tiff, bmp, jpeg, gif, etc.). Tutti questi formati possono essere visualizzati nelle pagine web, ma per comprensibili motivi di velocità, è preferibile che le immagini siano tanto più piccole, in termini di dimensioni di file, possibile. I principali formati utilizzati sono i file di immagini con estensione: .gif, .jpg, .png. Questi formati raggiungono un giusto compromesso tra qualità e dimensione. Una notazione a parte merita il formato gif, con il quale è possibile creare immagini animate.

Includere un'immagine in una documento web

Il tag HTML per includere un'immagine in una pagina web è <img src="image.gif">. Come è possibile notare oltre al tag identificativo dell'immagine "img" è presente l'attributo src indispensabile per specificare sia il nome del file immagine da visualizzare, che l'indirizzo dove lo stesso è memorizzato. Infatti, cosa ancora non detta, un sito web è composto, per convenienza, da molte cartelle che contengono gli elementi occorrenti al sito stesso, a discrezione del programmatore, divisi per materia, tipo di file o altro (es. immagini, suoni, guide, banner, etc.). Il tag "img", come pochi altri, non necessita del corrispettivo tag di chiusura.

Dimensioni e bordi

L'immagine inserita nella pagina con il tag così come specificato precedentemente verrà visualizzata nelle dimensioni con le quali è stata salvata nel file, ma per esigenze di layout alle volte è necessario ridurle, questo è possibile per mezzo dell'attributo "width=". Con l'attributo width= è possibile specificare la larghezza, in pixel, con la quale visualizzare l'immagine, automaticamente e proporzionalmente, si ruduce anche l'altezza dell'immagine stessa per preservarne le proporzioni (per esigenze particolari è possibile specificare anche l'altezza, height=). Come avrai notato ho parlato solo di riduzione delle dimensioni, infatti è sconsigliabile, salvo piccolissime variazioni, aumentare le dimensioni delle immagini per evitare lo sgradevole effetto di sgranamento della stessa. Quando è possibile, è consigliabile effettuare il dimensionamento dell'immagine al momento del suo salvataggio in modo da rendere superfluo l'uso del relativo attributo. Altro attributo utilizzabile con le immagini è quello che permette l'esclusione o l'inserimento di un bordo o cornice. Con l'attributo border= si specifica la dimensione del bordo che circonda l'immagine o la sua esclusione assegnandogli il valore zero.

Allineamento immagine - testo

Alle volte ti troverai nella necessità di dover allineare del testo all'immagine. A questo proposito ci viene in aiuto l'attributo align= specificato all'interno del tag "img". Premesso che per default viene assegnato all'attributo align= il valore bottom (parte inferiore), che posiziona il testo in basso all'angolo dell'ipotetica scatola che contiene l'immagine, con il valore middle (parte mediana) il testo viene allineato al centro della stessa ipotetica scatola, mentre con il valore "top" (parte superiore), sarà visualizzato nell'angolo superiore. Da notare che l'allineamento stabilito con l'attributo align agirà per una sola linea del testo, tutto il resto andrà nella linea immediatamente successiva a quella dell'immagine.

Attributo "Alt"

L'ultimo attributo del tag "img" che esaminiamo è alt=. Con questo attributo possiamo far visualizzare un messaggio che apparirà quando il puntatore del mouse sarà sull'immagine. Il messaggio può avere lo scopo di una informazione aggiuntiva data al visitatore della nostra pagina riguardo l'immagine, o può essere una nota di richiamo per il programmatore. C'è da aggiungere che in caso, per un qualsiasi motivo, l'immagine non dovesse apparire, al suo posto apparirà il messaggio specificato come valore all'attributo alt.

Esempio di utilizzo del tag "img" con gli attributi che abbiamo visto:

<img src="./Images/immagine.gif" border="2" width="100" alt="Immagine" align="middle">
Questo testo apparirà centrato verticalmente all'immagine.

darà il risultato che vedete sotto.

Questo testo apparirà centrato verticalmente all'immagine.