PROGRAMMIAMO
HTML - Immagini
Immagini <img>

 

Descrizione identifica un file immagine che il browser visualizzerà al posto dell'elemento
Tipo elemento vuoto inline
Attributi src, alt, height, width

Il tag <img> permette di inserire immagini nei documenti HTML. Questo tag non introduce un'interruzione di riga (elemento inline). Inserendo quindi il tag in una riga di testo, l'immagine sarà visualizzata insieme al testo.

ATTENZIONE: essendo un elemento inline, il tag <img> deve sempre essere racchiuso all'interno di un elemento di blocco (come <p> o <div>) e non deve mai essere scritto direttamente nel body.

Attributo src

L'attributo src (source) specifica l'indirizzo dell'immagine da visualizzare e deve essere indicato obbligatoriamente. Come nel caso dell'attributo href del tag <a>, è possibile indicare un indirizzo relativo o assoluto per l'immagine. Per esempio in

<img src="foto.jpg">

il file contenente l'immagine (foto.jpg) si trova nella cartella corrente.

ATTENZIONE: anche l'indirizzo dell'immagine fornito in src può essere assoluto o relativo, come già abbiamo visto parlando del tag <a>. In particolare, se l'immagine si trova sul server che ospita il sito e nella stessa cartella della pagina html, è sufficiente scrivere il nome del file senza indicare nessun percorso. Se invece l'immagine si trova in rete (su un altro sito), dovremmo fornire come indirizzo l'intera url dell'immagine, per esempio:

<img src="www.programmiamo.altervista/digitale/immagini/foto.jpg">

 

Allineare un'immagine

Per centrare un'immagine in una pagina, occorre creare un paragrafo (o un elemento div) centrato ed inserire l'immagine all'interno del paragrafo (o del div). Ecco un esempio di centratura di un'immagine con un paragrafo (vedremo più avanti nel dettaglio l'uso degli stili per questo e per altri scopi):

<p style="text-align: center"><img src="../../immagini/problema.gif"></p>

il cui risultato è il seguente:

Se il metodo precedente non funziona, un'altra soluzione è la seguente:

<div><img style = "display: block; margin: 0 auto;" src="../../immagini/problema.gif"></div>

 

Attributo alt

L'attributo alt (alternate o alternativo) è facoltativo anche se molto raccomandato. Questo attributo contiene un testo che viene visualizzato quando l'utente posiziona il puntatore del mouse sull'immagine o al posto dell'immagine se questa non è disponibile o quando il browser non carica le immagini. La stringa di descrizione può contenere fino a 1024 caratteri.

<img src="../../immagini/problema.gif" alt="Punto interrogativo">

L'attributo 'alt' è un ottimo sistema per fornire le informazioni agli utenti che non possono vedere le immagini. Una buona descrizione dell'immagine aiuta a intuire cosa contiene/rappresenta l'immagine a chi non ha la possibilità di vederle (es. persone con problemi di vista).

ATTENZIONE: l'uso dell'attributo alt per le immagini è obbligatorio a partire da HTML 4.0

 

Attributi height e width

Gli attributi height e width permettono di specificare la dimensione che l'immagine dovrà occupare all'interno della pagina. In questo modo si accelera la visualizzazione del documento in quanto il browser non deve attendere di scaricare il file immagine prima di iniziare a visualizzare il documento. L'altezza ('height') e la larghezza ('width') devono essere espresse in pixel. Per esempio:

<img src="../../immagini/problema.gif" width="38" height="54" alt="Punto interrogativo">

Variando i valori degli attributi 'height' e 'width' è anche possibile creare una miniatura o ridimensionare un'immagine. Si noti però che in questo modo si riducono le dimensioni dell'immagine visualizzata, non quelle del file che la contiene: se si vuole ricavare una piccola immagine da una grande, conviene perciò ridimensionare il file con un programma di grafica.

  

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it