In HTML, se inserita in un testo, normalmente una immagine è allineata con il testo. Così come si vede nel seguente esempio di immagine all’interno di un testo.

<p>HTML.it è il primo sito italiano sul web publishing <img src=”logo.gif” width=”224″ height=”69″ border=”0″> con centinaia di esempi e guide esplicative </p>

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 figura 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

Abbiamo tuttavia la possibilità di allineare l’mmagine e il testo come preferiamo, utilizzando l’attributo align. Vediamo di seguito come vengono visualizzati align=”left” e align=”right”:

Esempio di immagine allineata a sinistra

<p><img src=”logo.gif” width=”224″height=”69″border=”1″align=”left”> HTML.it èil primo sito italianosul web publishing, con centinaia di esempi e guide esplicative</p>

figura 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

Esempio con immagine allineata a destra

<p> <img src=”logo.gif” width=”224″ height=”69″ border=”1″ align=”right”> HTML.it è il primo sito italiano sul web publishing, con centinaia di esempi e guide esplicative </p>

figura HTML.it è il primo sito italiano sul web publishing, con centinaiadi 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 HTML.it è il primo sito italiano sul web publishing

Centrare le immagini: HTML <img align middle

Altri valori possibili sono:

Valore di align
Visualizzazione
bottom allinea la prima riga di testo sulla sinistra nella parte bassa dell’immagine (è così di default).
middle allinea la prima riga di testo sulla sinistra al centro dell’immagine.
top allinea la prima riga di testo sulla sinistra nel lato superiore dell’immagine.

 

Da notare che, mentre align=”left” e align=”right”, sono utili per spostare l’immagine a sinistra o a destra, gli altri valori servono piuttosto per disporre le posizioni verticali di testo e immagini.

Infine con hspace (horizontal space, cioè “spazio orizzontale”) e vspace (vertical space, cioè “spazio veritcale”) possiamo impostare lo spazio (in pixel) che deve essere lasciata tra l’immagine e cioè che la circonda.

Nel caso di hspace impostiamo uno spazio orizzontale da ambo i lati, come in questo caso:

<img src=”logo.gif” width=”224″ height=”69″ hspace=”20″>

figura

Nel caso di vspace lo spazio è verticale, ma sempre da ambo i lati:

<img src=”logo.gif” width=”224″ height=”69″ vspace=”20″>

cioè:

figura

Un attributo importante – di cui non vedrete nessun effetto “pratico” di formattazione, ma che vi servirà ad esempio per creare un effetto di “scambio immagine” grazie a JavaScript – è quello che permette di specificare il nome dell’immagine:

<img src=”miaImmagine.gif” name=”logo”>

Approfondimenti

Ovviamente sarebbe meglio impostare lo spessore e il colore dei bordi, gli spazi e la disposizione del testo attorno alle immagini attraverso i fogli di stile.
32 / 58

Le mappe di immagine