HTML: inserimento di un'immagine

Come inserire un'immagine

Per inserimento di un'immagine in una pagina HTML si utilizza il TAG <IMG>.

L'attributo che identificherà la sorgete dell'immagine è SRC (source), dove andrà inserito l'URL (indirizzo) dell' immagine, che può essere relativo o assoluto (HTML: LINK). Questo TAG non ha chiusura </IMG> in quanto non contiene contenuti, lo chiudiamo utilizzando lo slash / prima della chiusura della parentesi angolare >. Per adattare un 'immagine per un documento internet puoi seguire il Corso di Photoshop.

<img src="immagine.gif" />

Attributi del TAG IMG

Il TAG IMG possiede degli attributi che servono per svolgere diverse funzioni:

<img src="images/logo-webgab.pngf" alt="testo alternativo" />

testo alternativo

l'attributo ALT serve per visualizzare un messaggio, normalmente il nome o la descrizione dell' immagine, apparendo prima che questa si carichi oppure è sarà utile per chi naviga con browser testuali che non utilizzano la visualizzazione delle immagini.

 

<img src="images/logo-webgab.png" alt="testo alternativo" width="310" height="96"  />

testo alternativo

gli attributi WIDTH e HEIGHT settano rispettivamente la larghezza e l'altezza di un'immagine, possono essere omessi anche se è consigliato utilizzarli, in quanto permettono al browser web di caricarla più velocemente.

 

<img src="images/logo-webgab.png" alt="testo alternativo longdesc="descrizione molto lunga dell' immagine"" width="310" height="96"  />

LONGDESC è un TAG che viene utilizzato per scrivere in forma più lunga la descrizione di un'immagine, è buona abitudine linkarlo ad una pagina dove questa descrizione viene esplicitata maggiormente, come nel caso delle mappe d'immagine.

 

<img src="images/logo-webgab.png" alt="testo" border="3" />

testo

BORDER serve per inserire il bordo ad un'immagine in pixel. Viene settato border=0 quando non si vuole far comparire il bordo, come nel caso di un' immagine linkata, che per default prenderà il colore blu come per i link standard.

 

<a href="images/logo-webgab.png" target="_blank">
   <img src="images/logo-webgab.png" alt="testo alternativo"  width="310" height="96" border="0"  />
</a>

testo

Quando vogliamo linkare un'immagine basta racchiudere il TAG IMG all' interno del TAG A e assegnare all' indirizzo HREF l'indirizzo URL al quale deve far riferimento il link.

 

Allineamento di un' immagine ad un testo

Quando usiamo un' immagine all'interno di una pagina web possiamo inserirla in un testo, cercando di posizionarla con i seguenti attributi:

<img src="images/logo-webgab.png" alt="testo" width="310" height="96" align="left"  />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a elit enim, quis molestie 
velit. Quisque interdum, ante a ullamcorper venenatis, nulla lectus gravida erat, at 
tempus purus quam in arcu.

testoLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a elit enim, quis molestie velit. Quisque interdum, ante a ullamcorper venenatis, nulla lectus gravida erat, at tempus purus quam in arcu.

 

l'attributo ALIGN ci permette di inserire un'immagine:

  • RIGHT a destra del testo;
  • LEFT a sinistra del testo;
  • BOTTOM allineando l'immagine alla prima riga di testo sulla sinistra nella parte bassa, così come accade 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.

Gli attributi VSPACE (vertical space) e HSPACE (orizontal space) permettono al testo di distanziarsi orizzontalmente e verticalmente dall' immagine:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a elit enim, quis molestie 
velit. <img src="images/logo-webgab.png" alt="testo" width="310" height="96" align="left" vspace="20" hspace="20"  />
Quisque interdum, ante a ullamcorper venenatis, nulla lectus gravida erat, at 
tempus purus quam in arcu. Quisque interdum, ante a ullamcorper venenatis, nulla lectus gravida erat, at 
tempus purus quam in arcu. Quisque interdum, ante a ullamcorper venenatis, nulla lectus gravida erat, at 
tempus purus quam in arcu. Quisque interdum, ante a ullamcorper venenatis, nulla lectus gravida erat, at 
tempus purus quam in arcu.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a elit enim, quis molestie velit. testoQuisque interdum, ante a ullamcorper venenatis, nulla lectus gravida erat, at tempus purus quam in arcu. Quisque interdum, ante a ullamcorper venenatis, nulla lectus gravida erat, at tempus purus quam in arcu. Quisque interdum, ante a ullamcorper venenatis, nulla lectus gravida erat, at tempus purus quam in arcu. Quisque interdum, ante a ullamcorper venenatis, nulla lectus gravida erat, at tempus purus quam in arcu. Quisque interdum, ante a ullamcorper venenatis, nulla lectus gravida erat, at tempus purus quam in arcu. Quisque interdum, ante a ullamcorper venenatis, nulla lectus gravida erat, at tempus purus quam in arcu.