Come inserire le immagini nel documento html
Per aggiungere un'immagine in una pagina Html utilizzo il tag <IMG> nella sezione body del documento. E' usato per visualizzare immagini in formato gif, jpg o png nel documento ipertestuale.
<img src=[file-immagine]>
L'indirizzo url del file immagine va indicato nell'attributo SRC. Può essere un indirizzo url assoluto o relativo.
Un esempio pratico
Voglio visualizzare un'immagine digitale nel documento.
Il file della foto si chiama aereo.gif
Quindi scrivo questo codice html:
<html>
<head></head>
<body>
<p>Questa è una foto di un'aereo</p>
<img src=aereo.gif>
</body>
</html>
Salvo il documento html.
Poi lo visualizzo con il browser.
Il browser visualizza l'immagine nella pagina html.
Nota. In questo caso il documento e il file dell'immagine si trovano nella stessa cartella. Quando si trovano in cartelle diverse, bisogna specificare anche il percorso relativo per raggiungere la foto ( es. /foto/aereo.gif ).
L'attributo ALT del tag <IMG> in Html
L'attributo ALT ( alternate ) è un attributo facoltativo del tag IMG.
In quest'attributo si inserisce un testo alternativo tra virgolette ( o apici ) per descrivere il contenuto della foto.
<img src=[file-immagine] alt="testo alternativo">
L'attributo ALT visualizza il testo alternativo, quando il browser non riesce a scaricare il file dell'immagine.
Inoltre, quando l'utente passa il mouse sopra l'immagine, il browser mostra la frase del testo alternativo in una didascalia.
Esempio.
In questo codice Html utilizzo il tag IMG con l'attributo ALT
<html>
<head></head>
<body>
<p>Questa è una foto di un'aereo</p>
<img src="aereo.gif" alt="la foto di un aeroplano militare">
</body>
</html>
Quando passo il mouse sopra la foto, il browser visualizza il contenuto dell'attributo ALT.
Se per qualche ragione non si scarica la foto, il browser visualizza il testo alternativo.
Nota. Il tag IMG funziona anche senza l'attributo ALT. L'attributo ALT è facoltativo. Tuttavia, è molto importante utilizzarlo per diverse ragioni.
A cosa serve l'attributo ALT?
Si utilizza per diverse ragioni:
- Alcuni browser non visualizzano le immagini. Ad esempio, i browser vocali, i browser speciali per ipovedenti, per problemi di collegamento o perché l'utente ha disattivato lo scaricamento automatico delle immagini, ecc. Quindi, l'attributo ALT migliora l'accessibilità del documento.
- Migliora il posizionamento della pagina sui motori di ricerca, perché l'attributo ALT può contenere nel testo alternativo delle parole chiave ( keyword ). Sono comunque lette dai search engine. Per questo motivo, pur essendo un attributo facoltativo del linguaggio html, è molto usato nella SEO.
