Se inserita in un testo, normalmente un’immagine va a capo. Così:
<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 publishing
|
|
Abbiamo tuttavia la possibilità di allineare l’immagine e il testo
come preferiamo, utilizzando l’attributo align. Vediamo
di seguito come vengono visualizzati align=”left”
e align=”right”:
<p>
<img src="logo.gif"
width="224" height="69"
border="1"
align="left">
HTML.it è
il primo sito italiano
sul web publishing,
con centinaia
di esempi e
guide esplicative
</p>
|
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
|
|
<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>
|
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 HTML.it è il primo sito italiano sul web publishing
|
|
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). Ecco
l'esempio. |
middle |
allinea la prima riga di testo sulla sinistra al centro dell'immagine.
Ecco l'esempio. |
top |
allinea la prima riga di testo sulla sinistra nel lato superiore dell'immagine.
Ecco l'esempio |
|
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.