Immagini

Sintassi XHTML

Immagini

Attributo obbligatorio:
<img src=”pathname  dell’immagine”/>

Pathname può essere relativo o assoluto

Percorsi assoluti

Per lo più quando si fa riferimento a risorse situate in siti estreni.

<img src=http://www.html.it/foto1.jpg/>

Per accedere a documenti situati all’interno del pc

<img src=”C:\documenti\sito\immagini\foto1.jpg”/>

Percorsi relativi

Per le risorse locali.

Nella stessa directory:
<img src=“foto2.jpg” />

Directory diversa:
<img src=“img/foto2.jpg” />

I blank si indicano con %20

Attributi del tag img

Alt(testo alternativo): visualizzato quando il browser non visualizza le immagini. Garantisce l’accessibilità. E obbligatorio!

Title: descrizione testuale o titolo.Visualizzato al passaggio del mouse sull’immagine.

<img src="img/matite.jpg" title="matite" alt="immagine di matite colorate"/>

CSS

Bordi

Proprietà border-style
I valori possono essere : solid, dotted, dashed, double, groove, ridge, inset, outset.

Per vedere le differenze tra bordi:
http://www.html.it/guide/esempi/css/test/stile_bordi.html

Per lo spessore del bordo: border-width
(top, right, bottom, left).

Per il colore border-color

Padding e margin

L’immagine si può anche formattare utilizzando le proprietà  di padding e margin

DIMENSIONI: si possono specificare sia nell’html(attibuti di img) sia tramite css con le proprietà:
width
       height

Immagini di sfondo

Tramite la proprietà background-image si può utilizzare un’immagine come sfondo di un elemento.

body{ background-image:url(image.jpg);}

La proprietà background-repeat specifica se e in che modo un’immagine di sfondo deve essere ripetuta.

Valori possibili:

repeat(default) ripete sia in orizzontale che verticale.
repeat-x solo in orizzontale
repeat-y solo in verticale
no- repeat mostra una sola volta.

La proprietà background-position definisce la posizione (iniziale, nel caso l’immagine sia ripetuta) dell’immagine di sfondo.

Valori possibili:

Top left	Top center	Top right
Center left	Center center	Center right
Bottom left	Bottom center	Bottom right

Esempio:
body { background-image: url(img/balloon.jpg);
background-repeat:repeat-x; }