HTML5 offre la possibilità di inserire immagini all’ interno dei nostri documenti grazie al tag <img>.
Questo elemento offre la possibilità di inserire le immagini nei seguenti formati :
- Bitman (.bit)
- Jpeg (.jpeg)
- Jpg (.jpg)
- Png (.png)
- Gif (.gif)
- Svg (.svg)
Sintassi di base
La sintassi di base per inserire un immagine in Html è la seguente :
<img src = “NOME IMMAGINE” alt “DESCRIZIONE IMMAGINE “>
<!doctype
html>
<html
lang=”it”>
<body>
<img
src = “logo.png” alt “logo di ciocheso.com “>
</body>
</html>
UN PO DI TEORIA
- Il tag <img> è vuoto, contiene solo attributi e non ha un tag di chiusura.
- L’attributo src : specifica l’indirizzo dell’immagine
- L’ attributo alt : specifica un testo alternativo da mostrare in caso in cui un browser non dovesse riuscire a mostrarla o in caso di dispositivi screen reader.
Indirizzo delle immagini
Se non specificato, il browser si aspetta di trovare l’immagine nella stessa cartella della pagina web.
- E’ possibile inserire immagini contenute in un altra cartella :
- E’ possibile inserire immagini contenute in un altro server :
Inserire immagini animate
E’ possibile inserire immagini animate , come si inseriscono le immagini statiche :
<!doctype html>
<html lang=”it”>
<body>
<img src = “gattino.gif” alt “un gattino animato “>
</body>
</html>