Ciao a tutti!

Oggi vi illustrerò come inserire le immagini in html.

cropped-Cat-Super-Hero.jpg

Ci sono diversi tipi di formati per le immagini e quelli principali sono:

  1. GIF: formato adatto per i loghi, bottoni, banner, e possono essere anche immagini animate;
  2. JPG: formato ad alta risoluzione e quindi adatto per le foto;
  3. PNG: utilizzato molto nei software di grafica e molto portabile su tutte le piattaforme.

ATTENZIONE: vi consiglio di non utilizzare immagini troppo pesanti in quanto potrebbero rallentare il caricamento della pagina web.


1

 

Il Tag <img> e l’attributo src

Per poter inserire le immagini in una pagina web si deve far uso del tag <img>. Tale tag viene definito “vuoto”, dato che non prevede l’omonimo tag di chiusura.

L’attributo principale da utilizzare è src che definisce la URL dell’immagine che si vuole incorporare nella pagina.

<img src=“https://www.specchiografica.com/wp-content/uploads/2016/08/Coffee-Break.png”>

Diversamente, se volessimo inserire l’immagine che è reperibile direttamente dal nostro pc avremmo la seguente dicitura.

<img src=“immagine.jpg”

 

L’attributo alt

L’attributo alt è molto importante in quanto definisce un testo alternativo che verrà visualizzato ogni qualvolta che l’immagine (per qualsiasi ragione) non verrà visualizzata (perché rimossa o magari non disponibile per un problema di connessione), come mostrato nell’esempio sottostante. 😉


1

 

Altri attributi del tag <img>

Vediamo ora insieme altri possibili attributi del tag <img>.

border   imposta la dimensione (in pixel) dell’eventuale bordo all’immagine (0 = nessun bordo)
width  imposta la larghezza in pixel dell’immagine (facoltativo);
height  imposta l’altezza in pixel dell’immagine (facoltativo);
hspace  imposta la distanza in orizzontale tra l’immagine ed altri elementi;
vspace  imposta la distanza in verticale tra l’immagine ed altri elementi;
align  imposta un’allineamento dell’immagine;

 

Buon divertimento e alla prossima! 😀




Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.