Le immagini nelle pagine Web possono essere messe come sfondo, utilizzate come collegamenti, come mappe o come semplice abbellimento.
Prima di tutto bisogna dire che i formati utilizzati per le immagini sono il JPG e il GIF: il primo va bene per la definizione e la compressione, il secondo dà
la possibilità di fare immagini con sfondo trasparente e immagini che si muovono.
Per inserire un'immagine come sfondo bisogna inserire nel marcatore BODY e al posto dell'attributo BGCOLOR, l'attributo BACKGROUND e seguito dall'indirizzo in cui si trova l'immagine:
<BODY BACKGROUND="../imm/foto.jpg">
In questo modo verrà inserita l'immagine foto.jpg della directory imm nello sfondo; nel caso lo schermo sia più grande dell'immagine utilizzata le
immagini vengono poste da sinistra verso destra su righe parallele.
Ora che lo sfondo è sistemato possiamo vedere come si mette un'immagine di abbellimento:
<IMG SRC="../imm/foto.jpg">
Se avete scritto come sopra l'immagine verrà posizionata alla sinistra dello schermo. Ovviamente come per la fotografia di sfondo si può
mettere la directory in cui si trova l'immagine o addirittura il suo indirizzo per intero (URL assoluto).
All'immagine si può anche assegnare un nome, che serve nel caso l'immagine non venisse caricata oppure per far si che quando ci si passa sopra con il puntatore e si sosta per qualche secondo
sull'immagine stessa compaia il titolo dell'immagine da noi impostato. Tutto questo si ottiene con l'attributo ALT:
<IMG SRC="../imm/foto.jpg" ALT="FOTO">
A questo punto possiamo anche dimensionare l'immagine direttamente con l'HTML, aggiungendo alla scritta utilizzata
prima altri attributi quali WIDTH e HEIGHT, che definiscono le dimensioni in pixel che
deve avere l'immagine rispettivamente in larghezza e in altezza:
<IMG SRC="../imm/foto.jpg" ALT="FOTO" WIDTH="100" HEIGHT="50">
Nell'esempio l'immagine avrà un'altezza di 50 pixel e una larghezza di 100 (mettere le misure riduce il tempo di caricamento perchè lo schermo viene impostato e non deve adattarsi a mano a mano che le fotografie vengono caricate).
Ora un altro problema che ci si può porre è l'allineamento centrale o laterale dell'immagine. Il problema si risolve con l'attributo ALIGN accompagnato da LEFT per allineare l'immagine a sinistra,
RIGHT per allineare l'immagine a destra.
<IMG SRC="../imm/foto.jpg" ALT="FOTO" WIDTH="100" HEIGHT="50" ALIGN="RIGHT">
L'immagine verrà posizionata a destra dello schermo. Se invece vogliamo centrarla sullo schermo basterà aggiungere il solito TAG CENTER e il suo
relativo TAG finale per ottenere l'effetto voluto:
<CENTER>
<IMG SRC="../imm/foto.jpg" ALT="FOTO" WIDTH="100" HEIGHT="50">
</CENTER>
In questa maniera l'immagine si disporrà al centro dello schermo. Ulteriore passo avanti è quello di poter
scrivere ai fianchi destro o sinistro, alto o basso dell'immagine. Vediamo come è possibile:
HTML<IMG SRC="../imm/foto.jpg">HOUSE
L'immagine comparirà con a destra la scritta HTML e a sinistra HOUSE; quindi basterà disporre il testo prima o dopo l'immagine
per averla alla sua destra o alla sua sinistra (ho tolto un po' di attributi per rendere più facile la lettura
dei comandi). Per disporre il testo allineato con il bordo alto dell'immagine il comando da usare è il seguente:
<IMG SRC="../imm/foto.jpg" ALIGN="top">HTML HOUSE
Dove TOP stê appunto a significare che la scritta deve essere posta in alto; al posto
di TOP si può inserire MIDDLE e allora la scritta verrê centrata verticalmente con l'immagine,
oppure si potrê utilizzare BOTTOM e la scritta verrê allineata con il bordo basso dell'immagine. Per scrivere sotto l'immagine basta
aggiungere <BR> come da esempio:
<IMG SRC="../imm/foto.jpg"><BR>HTML HOUSE
A questo punto mancano più due attributi per poi passare alla prossima pagina. Gli attributi sono
HSPACE e VSPACE: il primo attributo stê ad indicare lo spazio laterale in pixel che deve essere lasciato tra
l'immagine e lo scritto, il secondo lo spazio verticale:
<IMG SRC="../imm/foto.jpg" ALIGN="top" HSPACE="10">HTML HOUSE
Significa che la scritta HTML HOUSE verrê spostata di 10 pixel rispetto al bordo dell'immagine. Possiamo ora passare alla
prossima pagina dedicata alle immagini.
