| 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.
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
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:
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):
il cui risultato è il seguente:
Se il metodo precedente non funziona, un'altra soluzione è la seguente:
Un altro problema comune è quello di allineare un'immagine a sinistra di un paragrafo come nell'esempio mostrato qui sotto:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere pretium viverra. Aliquam sit amet lobortis lectus, nec sollicitudin neque. Ut tortor turpis, placerat eget velit a, aliquam lacinia metus. Quisque consectetur turpis erat, ac egestas eros tristique sit amet. Aenean interdum nunc vel congue fringilla. Integer porta diam dui, scelerisque rutrum ex molestie vitae. Cras pretium, tellus commodo dictum malesuada, magna magna elementum tortor, blandit egestas tellus mauris eu ante.Phasellus a urna lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin eget nulla mauris. Ut dapibus ullamcorper nisl dictum pharetra. Quisque accumsan convallis pulvinar. Nullam sodales placerat diam sed consequat. Nam leo orci, sodales sed dolor dapibus, tristique ultricies ex. Cras libero ante, ornare et rhoncus a, aliquam commodo ipsum.
Per ottenere il risultato precedente, il codice da usare è questo:
L'attributo alt (alternate o alternativo) in Html 5 è obbligatorio. 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.
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
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:
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
Sito realizzato in base al template offerto da
http://www.graphixmania.it
