Web Kit

La Guida On-Line all'HTML per l'Internet Publishing tutta in Italiano

Le immagini rivestono altrettanta importanza del testo nel trasmettere un messaggio nell'interezza del suo significato. E' dunque possibile inserirne a volontà nei propri documenti per abbellirli esteticamente o per aumentarne la forza comunicativa. Naturalmente ciò deve essere fatto con discrezione, mantenendo chiaro in testa l'obiettivo da raggiungere: la pagina deve trasmettere informazioni, non solo attirare l'attenzione dell'osservatore.
Un'immagine inserita al punto giusto può essere molto più ricca di significato di tante immagini disordinate. Un ricco testo con una bella immagine può rappresentare una pagina accattivante capace di trasmettere interamente il messaggio del suo autore. Le immagini dunque rivestono un ruolo importante nella creazione di un documento HTML e bisogna imparare ad usarle con maestria.

L'HTML prevede un comando apposito per inserire un'immagine: IMG. Questo è un comando aperto, quindi non è necessario farlo seguire da nessuna tag di chiusura.
IMG prevede vari parametri:

SRC per indicare l'immagine da inserire. E' chiaramente di fondamentale importanza e prevede di essere seguito dal nome del file dell'immagine.
LOWSRC per indicare un'altra immagine da caricare, prima della definitiva.
BORDER per indicare la dimensione dell'eventuale bordo che si vuole visualizzare intorno alla finestra.
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).
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.
WIDTH permette di specificare una larghezza predefinita per l'immagine, con un valore dato in punti.
HEIGHT analogamente al precedente imposta un'altezza predefinita.
VSPACE per indicare uno spazio da lasciare libero sopra e sotto l'immagine.
HSPACE per indicare uno spazio da lasciare libero a destra e a sinistra dell'immagine.
ALT permette di visualizzare un testo al posto dell'immagine se questa non è visualizzabile.
USEMAP per utilizzare, sull'immagine, una mappa locale.

Vediamo dunque un esempio di questo comando:
<IMG SRC="image1.jpg" ALIGN="RIGHT">
inserisce un'immagine allineata a destra 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 questi due formati.

Come secondo esempio si può visualizzare nuovamente la stessa immagine con gli attributi:
<IMG SRC="image1.jpg" BORDER=10 WIDTH=180 HEIGHT=80> Qui c'è un'immagine di prova

che la formattano a dimensioni obbligate di 180x80 punti mostrando un bordo di 10 punti intorno. 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 parametro ISMAP permette di indicare al browser di attivare la modalità di "tracking" del mouse: quando si preme il pulsante vengono rilevate le coordinate ed inviate al server. Questo, dotato di un apposito programmino, è in grado di gestire le coordinate ricevute e di comportarsi di conseguenza. Per usarlo proficuamente è però necessario avere accesso al server, privilegio che è concesso a pochi, oppure programmare delle mappe clickabili in locale da far gestire al browser.

Se prevedete che la vostra pagina sarà visualizzata tramite Netscape Navigator, potete provare ad usare l'ulteriore parametro LOWSRC. Se inserito prima di SRC permette al browser di caricare una piccola immagine nel documento, caricare il resto del testo e quindi caricare l'immagine completa. L'immagine ridotta viene specificata nel LOWSRC e quella completa definitiva come sempre nel SRC.

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="image1.gif" ALT="Immagine numero 1">
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 in tabelle così da formattarne la disposizione a piacimento.
Oppure si possono usare i comandi di allineamento ALIGN="" per raggiungere alcuni effetti particolari. Uno può essere quello di inserire un testo al centro di due immagini, disposte ai lati della finestra. Ciò si può semplicemente ottenere inserendo:
<IMG SRC="image1.jpg" ALIGN="RIGHT" WIDTH="100">
<IMG SRC="image1.jpg" ALIGN="LEFT" WIDTH="100">
<CENTER>TESTO ALLINEATO AL CENTRO DELLE DUE IMMAGINI</CENTER>

TESTO ALLINEATO AL CENTRO DELLE DUE IMMAGINI

I due comandi <IMG SRC=""...> inseriscono le due immagini una allineata a DESTRA e l'altra a SINISTRA. Qunato segue viene posto nello spazio al loro interno ed in questo caso è il testo "testo allineato al centro delle due immagini" ad essere inserito nello spazio lasciato libero tra le due immagini. Il testo viene allineato al CENTRO dello spazio a sua disposizione tramite il comando <CENTER> (se non ci fosse il testo sarebbe allineato sulla SINISTRA, lungo il margine dell'immagine sinistra).
Quando si specifica un comando ALIGN="" all'interno di un tag <IMG ...> tutto ciò che segue il tag <IMG ...> viene posto accanto all'immagine fino al riempimento dello spazio a disposizione. Se non volete che ciò accada dovete usare il tag che cancella l'allineamento specificato nell'<IMG ...>. Nell'esempio appena visto volevamo inserire tra le due immagini SOLO il testo desiderato e lasciare il rimanente spazio vuoto. Abbiamo dovuto inserire i due tag e subito dopo il testo per far si che tutto ciò che segue sia inserito FUORI dello spazio tra le due immagini. Provate a scrivere un codice in cui allineate le due immagini a destra e a sinistra ma non usate il comando per vedere cosa succede.

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:
<A HREF="link.htm">
<IMG SRC="image1.jpg" BORDER=0>
</A>

Indietro all'INDICE GENERALE

WebKit

Tutti i diritti riservati.

Se avete qualsiasi suggerimento o correzione vi preghiamo di contattarci attraverso E-Mail.
I diritti di riproduzione di questa guida appartengono agli autori. Per richiedere permessi di duplicazione parziale di quanto qui contenuto o per ulteriori informazioni non esitate a scriverci.