HTML: Lezione 13 Le immagini

Lez 13 Le immagini

Per inserire un immagine, dobbiamo usare il tag <img>

Scriveremo:

<img src = “indirizzoimmagine.jpg”>, se vogliamo usare un link ad un immagine in posizione relativa.

<img src=”http://www.immagine.jpg”>, se vogliamo usare un link ad un immagine in posizione assoluta.

Notiamo che questo tag non ha bisogno di chiusura.

Le immagini che possiamo inserire in una pagina web, sono essenzialmente di tre tipi:

jpg, png o gif.

Aggiungendo gli attributi width e height, possiamo modificare altezza o larghezza delle immagini.

<img src= “miaimmagine.png width”= “100” height =”250”>.

Attenzione: gli attributi altezza e larghezza modificano le dimensioni dell'immagine, ma non il suo peso, quindi se abbiamo foto molto pesanti, il browser ci metterà un po' a caricarle. È bene, quindi, ridimensionare le foto più grandi, prima di utilizzarle. Molti programmini, come Fotosizer, permettono di farlo.

L'attributo alt, indica al browser il testo alternativo, da mostrare se, per qualsiasi motivo, non si riesce a caricare l'immagine.

<img src= “miaimmagine.gif” alt=”immagine personale”>

Se la descrizione dell'immagine è molto lunga, possiamo utilizzare l'attributo longdesc, al posto di alt.

Per far sì che, passando col mouse sull'immagine compaia un testo di spiegazione, possiamo usare l'attributo title:

<img src= “miaimmagine.jpg” title= “questa è l'immagine”>

Possiamo aggiungere dei bordi all'immagini o toglierli, impostando il valore border a 0 (è il caso, ad esempio, di un'immagine che si trasforma in link, che in automatico diventa bordata di blu:

<img src= “miaimmagine.gif” border=”1”>

Per aggiungere spazio sopra e sotto l'immagine, possiamo usare il tag Vspace, e per aggiungerlo a destra e sinistra Hspace.

<img src = “immagineconbordi.jpg” Vspace= “40” Hspace = “20”>.

Con questi attributi, non è possibile dare spazi diversi a destra e a sinistra dell'immagine.

Possiamo inserire l'immagine all'interno di un contesto e allinearla con l'attributo align:

• Align= “default” allinea l'immagine usando gli attributi di default del browser.

• Align= “left” allinea l'immagine al margine sinistro.

• Align= “right” allinea l'immagine al margine destro.
• Align= “top” allinea l'immagine alla parte superiore nella parte sinistra.

• Align= “middle” allinea l'immagine al centro con il testo intorno.

• Align= “bottom” allinea ll'immagine alla parte inferiore con il testo intorno.

• Align= “center” allinea l'immagine al centro

Per avere un'idea di come si dispone il testo intorno all'immagine puoi visitare il sito http://www.pagetutor.com/align/index.html