Uso e inserimento di immagini

Per inserire un'immagine in un qualunque punto della pagina web si utilizza il seguente Tag: "<img src="nomefile">", il suo utilizzo è alquanto semplice, infatti se utilizziamo il codice:

<img src="fiore.jpg">

otterremo il seguente risultato:

E' possibile inoltre specificare con l'attributo "border" un bordo colorato intorno all'immagine, per esempio:

<img src="fiore.jpg" border="3">

si otterrà:

E' possibile anche specificare, con l'attributo "alt", un'etichetta di testo che verrà visualizzata quando ci soffermeremo con il mouse sopra all'immagine, come nell'esempio sotto riportato:

<img src="fiore.jpg" border="3" alt="questo è un fiore di loto">

Tramite gli attributi "height" e "width" si possono modificare le dimensioni di un'immagine, ma questo e' sconsigliabile in quanto questa perderà di qualità, si consiglia di preparare l'immagine già nelle dimensioni desiderate.

Con il codice:

<img src="fiore.jpg" width="50" height="50">

si ottiene

Con il codice:

<img src="fiore.jpg" width="250" height="250">

si ottiene:

Con il codice:

<img src="fiore.jpg" width="400" height="60">

si ottiene:

Tramite gli attributi "hspace" e "vspace" è possibile specificare una distanza in pixel dagli altri oggetti che si trovano lungo i quattro lati dell'immagine. Per esempio scrivendo il seguente codice:

<div align="center">
<img src="fiore.jpg" width="50" height="50"><br>
<img src="fiore.jpg" width="50" height="50">
<img src="fiore.jpg" width="50" height="50" hspace="10" vspace="5">
<img src="fiore.jpg" width="50" height="50"><br>
<img src="fiore.jpg" width="50" height="50">
</div>

otterremo:

Dove la spaziatura orizzontale, intorno all'immagine al centro, è di 10 pixel, e la spaziatura verticale e' di 5 pixel.

Tramite l'attributo "align" infine e' possibile specificare l'allineamento dell'immagine rispetto ad altre immagini o al testo; vediamo alcuni esempi:

Con il codice:

<p><img src="fiore.jpg" align="top">questo è un testo</p>

otterremo il testo allineato in alto rispetto all'immagine:

questo è un testo

Con il codice:

<p><img src="fiore.jpg" align="middle">questo è un testo</p>

otterremo il testo allineato al centro rispetto all'immagine:

questo è un testo

Con il codice:

<p><img src="fiore.jpg" align="bottom">questo è un testo</p>

otterremo il testo allineato in basso rispetto all'immagine:

questo è un testo

I prossimi due attributi sono molti utili per l'inserimento di immagini all'interno di un testo lungo:

Con il codice:

<p><img src="fiore.jpg" align="left">questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo </p>

otterremo l'immagine inglobata nel testo e allineata a sinistra:

questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo

Con il codice:

<p><img src="fiore.jpg" align="right">questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo </p>

otterremo l'immagine inglobata nel testo e allineata a destra:

questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo questo è un testo lungo