INSERIRE UN IMMAGINE IN HTML5

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>


Continua a leggere


Giusi Marchese

Giusi Marchese

Sono una tecnica informatica di professione , con la passione per il web e per la scrittura. Amo il cinema , la natura , il fai da te e gli animali. Curo sia l' estetica che i contenuti di Ciò Che So in cui racchiudo tutte le mie passioni. ❤️

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *