HTML: Immagini

Finora si è imparato come è organizzato un documento Html (intestazione e corpo), cosa sono i tags e quali sono i mezzi per gestire un testo. L'Html, però, fornisce un altro potente strumento: la gestione delle immagini. Spesso è importante avere la possibilità di poter inserire delle immagini nel testo sia per illustrare l'argomento trattato, sia per migliorare la grafica della propria pagina web. Tale strumento è gestito dal tag <IMG> il quale, con l'ausilio del comando SRC, permette l'inserimento di un'immagine all'interno di un documento Html, prelevando il file .GIF o .JPEG da un percorso, sia esso nella rete o semplicemente riferito all'Hd (si capisce facilmente che non è possibile inserire un percorso dell'Hd se si vuole inserire la pagina in rete).

In ausilio del tag principale subentrano dei comandi che permettono di gestire la rappresentazione dell'immagine.

Questi due comandi danno la possibilità di decidere e quindi, cambiare, rispettivamente la larghezza e l'altezza dell'immagine in oggetto. Come al solito, queste dimensioni sono esprimibili sia in pixel che in percentuale.

Con questo comando si ha la possibilità di decidere lo spessore del bordo dell'immagine. Il valore è espresso in pixel ed è di default uguale a zero (nessun bordo).

I comandi sopra descritti sono strettamente riferiti alla raffigurazione dell'immagine. Potrebbe, tuttavia, sorgere il problema di amalgamare l'immagine con il testo o con altre immagini. A questo scopo subentrano questi altri comandi che permettono di decidere a quale distanza (in pixel) deve essere disposta l'immagine rispetto agli altri elementi della pagina. HSPACE fornisce la distanza orizzontale, mentre VSPACE quella verticale ed insieme coprono così tutti e quattro i lati dell'immagine in oggetto.

esempio: <IMG SRC="immagine.gif" BORDER="0" WIDTH="510" HEIGHT="97" HSPACE="120" VSPACE="100">

Molto spesso capita di dover inserire un'immagine all'interno di un testo e, in una situazione del genere, alcune volte può capitare di voler contornare con il testo tale immagine. A questo scopo entra in gioco il comando ALIGN.

Comando	Funzione
ALIGN="top"	allinea la prima riga di testo con la parte alta dell'immagine.
ALIGN="bottom"	allinea la prima riga di testo con la parte bassa dell'immagine.
ALIGN="middle"	allinea la prima riga di testo con la parte centrale dell'immagine.
ALIGN="left"	allinea la prima riga di testo con la parte destra dell'immagine.
ALIGN="right"	allinea la prima riga di testo con la parte sinistra dell'immagine.

esempio: <IMG SRC="immagine.gif" BORDER="0" WIDTH="510" HEIGHT="97" ALIGN="top">

Quest'ultimo comando è, forse a torto, il meno sfruttato. ALT, infatti, attribuisce ad una immagine una parola o frase ed è molto utile nel caso in cui si abbia a che fare con un browser non grafico, oppure si sia nella situazione di non riuscire a visualizzare delle immagini.

esempio: <IMG SRC="immagine.gif" ALT="Texture di prova" BORDER="0" WIDTH="510" HEIGHT="97" HSPACE="120" VSPACE="100">

Per quanto riguarda un browser non grafico, ALT permettere di far visualizzare al browser la parola associata nella posizione in cui si trova l'immagine.

Se si è nella situazione di non poter riuscire a visualizzare un'immagine, con il comando ALT si visualizza un quadrato (o rettangolo) vuoto all'interno del quale, in alternativa, vi si trova la parola associata a tale immagine:

Un'ultima caratteristica di ALT è quella di visualizzare la parola associata nel momento in cui ci si trova con il mouse al di sopra dell'immagine:

Come è stato già detto, il percorso dell'immagine può essere sia relativo ad un indirizzo internet che ad un semplice percorso interno all'Hd. Quando si fornisce all'immagine un indirizzo internet, questa può essere visualizzata solo in linea, altrimenti è necessario che sia rimasta in cache. Tale percorso è così descritto:

esempio: <IMG SRC="http://members.it.tripod.de/roby_kirk/immagine.gif" BORDER="0" WIDTH="510" HEIGHT="97">

Se, invece, il percorso è interno all'Hd, all'atto di inserire la pagina all'interno di un sito web, l'immagine non potrà essere visualizzata dal browser e bisognerà cambiare il percorso con l'indirizzo internet nel quale si trova l'immagine. L'utilità di inserire un percorso sull'HD si ha nel momento della costruzione fuori linea della pagina (per verifica della stessa) o, più semplicemente, quando si voglia costruire una pagina web non destinata al pubblico della rete. In questo caso il percorso sarà:

esempio: <IMG SRC="file:///C:/WINDOWS/Desktop/prova/immagine.gif" BORDER="0" WIDTH="510" HEIGHT="97">

Come si nota facilmente, nel percorso definito da "file", c'è una "/" in più rispetto a quello definito da "http".