Homepage -> Guida HTML

Inserimento di una immagine in una pagina HTML



Le immagini supportate e più usate sono le gif ( 256 colori ) e le jpg ( con illimitati colori ); mentre le prime si usano in genere per gestire aree trasparenti, titoli e bottoni, le seconde vengono usate maggiormente per immagini complesse.
Abbiamo già visto come le immagini possano essere usate come sfondi usando il Tag BACKGROUND sia per le tabelle e sia per il BODY; ora vediamo come possano essere inserite all'interno di un testo. Il Tag da usare è :

<IMG SRC="img/immagine.gif">

o:


<IMG SRC="http://www.miosito.it/img/immagine.gif">


se l'immagine si trova su un particolare indirizzo internet. Notare come tale Tag non necessita di chiusura in quanto non contiene testo come potrebbe esserlo un TD. L'attributo SRC ( Source ) serve proprio per specificare il percorso del file immagine. Ecco un esempio.


Attributi di una immagine

Altri importanti attributi sono il WIDTH e l'HEIGHT che hanno le ovvie funzioni di fissare la larghezza e l'altezza; in genere i valori di questi due attributi vengono messi in pixel.
Talvolta si necessita di far comparire una scritta o un commento su una piccola finestrella quando si passa con il mouse sull'immagine; questa funzione è attribuita all'attributo ALT="valore". Ecco un esempio: inserendo il seguente codice


<IMG SRC="logo.gif" HEIGHT="60" WIDTH="140" ALT=" Visita il sito www.msn.it ">



l'immagine viene visualizzata così:


Visita il sito www.msn.it

L'attributo BORDER = "n" serve invece per dare uno spessore al bordo dell'immagine; scegliendo un valore ugaule a 0, il bordo non si vede; se ad esempio fissassi un BORDER = "5" otterrei:


Visita il sito www.msn.it


Per allineare l'immagine verticalmente ed orizzontalmente si usano gli attributi VSPACE = "n" e HSPACE = "n"; si impostano quindi gli spazi ( in pixel ) che devono essere lasciati tra l’immagine e cioè che la circonda. Ecco un esempio con l'uso del HSPACE; notare come lo spazio a sinistra e a destra dell'immagine sia lo stesso.
In una tabella, usando HSPACE = " 30 " VSPACE = " 10 " ALIGN = " left ":



HTML.it è il primo sito italiano sul web publishing, con centinaia di esempi e guide esplicative HTML.it è il primo sito italiano sul web publishing HTML.it è il primo sito italiano sul web publishing HTML.it è il primo sito italiano sul web publishing HTML.it è il primo sito italiano sul web publishing HTML.it è il primo sito italiano sul web publishing HTML.it è il primo sito italiano sul web publishing.



Per disporre invece il testo affianco all'immagine si usa l'attributo ALIGN, che ha i seguenti valori:


TOP esempio
TEXTTOP esempio
MIDDLE o CENTER esempio
BOTTOM esempio
LEFT esempio
RIGHT esempio


Per inserire un'immagine all'interno di una cella di una tabella, conviene metterla come sfondo; se poi si volesse affiancare del testo all'immagine, conviene usare una sotto-tabella con due celle in cui vengono inserite l'immagine in una e nell'altra il testo:


O = 0.74
O2- = 1.40

Ecco l'esempio completo ( codice ).