Disporre le immagini in un contesto
Se inserita in un testo, normalmente una immagine è allineata con il testo. Così:
Esempio di immagine nel 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 |
con centinaia di esempi e guide esplicative HTML.it è il primo sito italiano sul web publishing HTML.it è il primo sito italiano sul web publishingAbbiamo 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>
|
|
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>
|
|
Altri valori possibili sono:
|
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″>
Nel caso di vspace lo spazio è verticale, ma sempre da ambo i lati:
<img src=”logo.gif” width=”224″ height=”69″ vspace=”20″>
cioè:
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.
