Immagini

Le immagini svolgono un ruolo fondamentale nell'aumentare l'attrattiva visiva e nel trasmettere informazioni sulle pagine web. In HTML, le immagini vengono inserite utilizzando il tag <img>.

Inserimento delle immagini

Il tag <img> viene utilizzato per inserire immagini in un documento HTML. A differenza della maggior parte dei tag HTML, il tag <img> non ha un tag di chiusura ed è auto-chiudente.
Esempio:

<img src="image.jpg" alt="Description of the image">

Nell'esempio sopra:

• Il tag <img> viene utilizzato per inserire un'immagine;
• L'attributo src specifica la fonte (URL) del file immagine;
• L'attributo alt fornisce un testo alternativo per l'immagine. Questo testo viene visualizzato se l'immagine non può essere caricata o per motivi di accessibilità.

Prima di esaminare un esempio reale, è importante comprendere gli attributi essenziali del tag img e come influenzano il suo contenuto.

Attributi delle immagini

1. src: Specifica la sorgente (URL) del file immagine. Questo attributo è obbligatorio affinché il tag <img> visualizzi l'immagine;
2. alt: Fornisce un testo alternativo per l'immagine. Il testo specificato nell'attributo alt viene visualizzato se l'immagine non può essere caricata o per motivi di accessibilità. È fondamentale per gli utenti che utilizzano lettori di schermo o in situazioni in cui l'immagine non può essere visualizzata;
3. width: Specifica la larghezza dell'immagine in pixel o come percentuale del contenitore genitore;
4. height: Specifica l'altezza dell'immagine in pixel o come percentuale del contenitore genitore;
5. title: Fornisce informazioni aggiuntive sull'immagine. Spesso viene visualizzato come tooltip quando l'utente passa il mouse sopra l'immagine.
   Esempio:

Nell'esempio sopra:

• Il tag <img> inserisce un'immagine in una pagina web;
• L'attributo src specifica l'URL di origine del file immagine;
• L'attributo alt imposta il testo alternativo per l'immagine;
• L'attributo width imposta la larghezza dell'immagine;
• L'attributo height imposta l'altezza dell'immagine;
• L'attributo title fornisce ulteriori informazioni sull'immagine.

Tutorial video