Le immagini presenti nei siti internet e ammessi nel Web sono sostanzialmente GIF, JPG e PNG. Non usate quindi altre tipologie di immagini (tipo i file di photoshop psd).

Il codice per inserire una immagine è

img significa image, cioè immagine
src significa search, cioè origine

Sostituisci immagine.jpg con il nome della tua immagine. Attenzione anche all'estensione dell'immagine: jpg, gif...
Il codice appena usato ti permette di far vedere una immagine che sia nella stessa directory/cartella della pagina che la richiama. Se invece l'immagine dovesse trovarsi in un altro percorso, bisogna specficarlo. Mettiamo che la pagina html sia sul desktop e l'immagine che si vuole far vedere sia in una cartella chiamata IMMAGINI.
Il codice sarà così:

Questo perchè il percorso "parte" dalla posizione in cui si è, quindi il computer cercherà sul desktop, una cartella che si chiama IMMAGINE.
Se invece l'immagine si dovesse trovare in internet, si deve andare a specificare tutto il percorso:

Quando carichi le tue pagine e le tue immagini online se fai attenzione a mantenere la stessa gerarchia di cartelle, non avrai problemi!

Per realizzare un sito correttamente, sarà bene utilizzare delle immagini non troppo grandi.
Se noi mettiamo il codice per vedere l'immagine senza specificare la grandezza, l'immagine verrà visualizzata nelle sue dimensioni originali. Se vogliamo che venga visualizzata più piccola o più grande, basterà specificare la larghezza (width) e la altezza (height).

La nostra immagine avrà quindi una largezza di 400 pixel e una altezza di 300 px. Se impostiamo solo uno dei due valori, l'altro si adatterà proporzionalmente.

L'attributo BORDER assegna all'immagine automaticamente un "bordo" nero di un pixel

Possiamo a nostra scelta variare lo spessore del bordo.

Immagine senza bordo 1px


Immagine con bordo 1px


Immagine con bordo 5px



I link di default assegnano un bordo =1 all'immagine quindi se non vogliamo il bordo, impostiamo il valore 0

L'attributo TITLE fornisce una descrizione dell'immagine, utlile per i non vedenti (nel senso che un lettore automatico può leggerlo), se poi ci si sofferma sull'immagine con il mouse con internet explorer, compare una casellina con la descrizione.

Soffermati sull'immagine


Vediamo ora come allineare le immagini:

LEZIONE SUCCESSIVA: POSIZIONARE LE IMMAGINI