html p27, Disporre le immagini in un contesto

« Older   Newer »
  Share  
HFG
view post Posted on 1/7/2009, 11:44




Se inserita in un testo, normalmente una immagine è inserita nel testo. Così:

Esempio di immagine nel testo

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


HTML.it èil primo sito italianosul web publishing, con centinaia di esempi e guide esplicative


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


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


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:




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



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.

 
Top
0 replies since 1/7/2009, 11:44   27 views
  Share