INSERIRE IMMAGINI IN UNA PAGINA WEB

6729663639

Inserire immagini e' molto importante in quanto serve ad arricchire la pagina stessa oltre che integrare il testo. Un uso molto intelligente e' quello di inserire un'immagine in modo da attirare l'attenzione del navigatore su un punto specifico della nostra pagina particolarmente importante, ecco un esempio:

Si consiglia di utilizzare Internet Explorer 4.0 o versioni successive per navigare in questo sito. Il sito e' ottimizzato per una risoluzione di 800x600. Il materiale presente in questo sito e' coperto da diritti d'autore se ne vieta percio' la copia su altri siti o la diffusione mediante ogni mezzo di comunicazione esistente.

I Formati grafici che si possono inserire in una pagina web sono di tre tipi:

1) Formato GIF.

2) Formato JPG.

3) Formato PNG.

Il formato GIF supporta le animazioni e la trasparenza ma non molti colori mentre il formato JPG permette moltissimi colori ma non supporta ne' le animazioni ne' la trasparenza. Il formato PNG e' un formato che incorpora in se stesso le caratteristiche dei formati GIF e JPG ed e' stato introdotto successivamente con lo scopo di prendere il posto degli altri due formati, ma per il momento e' usato ancora molto poco. Per ulteriori informazioni su questi due formati vi rimando alla lezione specifica presente in questo corso.

Il tag <IMG>

Per inserire un'immagine si utilizza il tag <IMG> secondo questa sintassi di base:

<IMG SRC="ImmagineDaInserire">

supponiamo di avere una GIF chiamata Cartolina.gif, il codice HTML da usare sara':

<IMG SRC="Cartolina.gif">

Teniamo presente che le immagini che inseriamo nelle pagine web dovrebbero stare sempre nella stessa cartella dove risiede la pagina stessa che le mostra, e che dovranno essere pubblicate sul nostro spazio web insieme alla pagina.

Gli Attributi del Tag <IMG>

Grazie ad una serie di attributi che il tag possiede possiamo variare alcune caratteristiche dell' immagine e aggiungere alcuni elementi molto utili ecco la sintassi completa del tag:

<IMG SRC="Immagine" BORDER="SpessoreBordo" WIDTH="Larghezza" HEIGHT="Lunghezza" ALIGN="Allineamento" ALT="FraseAlternativa" LOWSRC="ImmaginePreCaricata">

L' attributo BORDER permette di specificare un Bordo attorno all' immagine di uno spessore espresso in pixel:

<IMG SRC="Cartolina.gif" BORDER="1">

<IMG SRC="Cartolina.gif" BORDER="5">

<IMG SRC="Cartolina.gif" BORDER="10">

Gli attributi WIDTH ed HEIGHT permettono rispettivamente di variare le dimensioni di base dell' immagine in Larghezza e Lunghezza modicandone anche le proporzioni (i valori possono essere espressi anche in percentuale):

<IMG SRC="Cartolina.gif" WIDTH="50" HEIGHT="35">

<IMG SRC="Cartolina.gif" WIDTH="200" HEIGHT="140">

<IMG SRC="Cartolina.gif" WIDTH="100" HEIGHT="100">

L' attributo ALIGN puo' assumere i seguenti valori: Left, Right, Top, Middle, Bottom, TextTop, AbsBottom, AbsMiddle, Baseline e serve per modificare la disposizione del testo rispetto all'immagine o l' immagine rispetto al testo in vari modi:

Left: L'immagine si dispone a sinistra rispetto al testo, che si incornicera' attorno all' immagine.

Right: L' immagine si dispone a destra rispetto al che, che si incornicera' attorno all' immagine.

AbsBottom: l' immagine si dispone in modo che il testo stia alla base dell' immagine.

AbsMiddle: Il testo si dispone in modo che l' immagine stia al centro, ma non c'e' incorniciamento.

TextTop: il testo stara' sulla parte alta dell' immagine e non c'e' incorniciamento.

Bottom, Baseline: l'immagine si dispone in modo che il testo si incornici partendo dalla sua base.

Middle: l' immagine si dispone in modo che il testo stia al centro.

Top: l' immagine si dispone in modo che il testo stia in alto.

Spesso puo' accadere che durante il caricamento della pagina web e delle relative immagini che abbiamo inserito, per vari motivi non vengano caricate e quindi visualizzate. L' attributo ALT permette di impostare un commento che prendera' il posto dell' immagine. L' attributo e' utile anche se l' immagine viene caricata correttamente in quanto il commento verra' visualizzato andando sopra l' immagine con la freccia del mouse:

<IMG SRC="Cartolina. gif" ALT="Una Cartolina per Te!">

<IMG SRC="Cartolina.gif" ALT="Una Cartolina per Te!">

Come possiamo notare, nel primo esempio per un errore (voluto) del WebMaster l' immagine non e' stata caricata e al suo posto c'e' il commento impostato nell' attributo ALT, nel secondo esempio invece l' immagine viene visualizzata ma il commento viene visualizzato se si va sopra l' immagine con la freccia del mouse.

L' ultimo attributo LOWSRC permette di impostare un' immagine che verra' caricata e mostrata prima dell' immagine specificata nell' attributo SRC finche' essa non sara' completamente caricata. Supponiamo di avere una fotografia a colori che richieda molto tempo per essere caricata, potremo crearne una versione "Alleggerita" di pochi KB (ad esempio in bianco e nero) e impostarla nell' attributo LOWSRC, in questo modo l' utente vedra' quasi subito la foto in bianco e nero facendosi subito un' idea della foto stessa per vederla poco dopo prendere tutti i colori.

CLICCA QUI PER VEDERE UN ESEMPIO