Parte 4: L'Elemento <img>

Ecco una lezione completa sulla gestione degli attributi dell'elemento <img> in HTML, perfetta per imparare ad integrare immagini in modo corretto nelle nostre pagine HTML

Benvenuti alla quarta lezione del nostro corso di HTML! Oggi esploreremo in dettaglio l'elemento <img>, utilizzato per incorporare immagini in una pagina web. Scopriremo come funziona l'attributo src e altri attributi importanti che migliorano la funzionalità e l'accessibilità delle immagini.

Cos'è il tag <img> ?

L'elemento <img> è un tag self-closing in HTML, il che significa che non ha una tag di chiusura. È utilizzato per inserire immagini nel documento HTML, rendendo le pagine più visive e coinvolgenti.

Attributo src

L'attributo src (source) è l'attributo più importante di <img>; specifica il percorso dell'immagine che desideri mostrare sulla pagina web.

Esempio di Utilizzo di src

<img src="immagine.jpg" alt="Descrizione dell'immagine">

In questo esempio, immagine.jpg è il file dell'immagine che verrà mostrato sulla pagina. Il percorso può essere relativo (come mostrato sopra) o assoluto (incluso un URL completo).

Attributo alt

L'attributo alt (alternative text) fornisce una descrizione testuale dell'immagine, che è cruciale per l'accessibilità. Aiuta le persone che non possono vedere le immagini a comprendere di cosa tratta l'immagine, ed è anche visualizzato nel caso l'immagine non possa essere caricata.

Esempio di alt

<img src="logo.png" alt="Logo dell'azienda XYZ">

Altri Attributi Importanti

  • title: Fornisce informazioni aggiuntive sull'immagine quando l'utente passa il mouse sopra l'immagine. Questo testo appare come un tooltip.

    <img src="cane.jpg" alt="Un cane marrone che corre nel parco" title="Cane che corre">

  • width e height: Specificano la larghezza e l'altezza dell'immagine in pixel. Questo può aiutare a migliorare il layout della pagina permettendo al browser di riservare lo spazio per l'immagine prima del suo caricamento completo.

    <img src="montagna.jpg" alt="Vista di una montagna al tramonto" width="500" height="300">

  • loading: Questo attributo permette di controllare il caricamento pigro (lazy loading) delle immagini, che è utile per le pagine con molte immagini. Valori: auto, lazy, eager.

    <img src="panorama.jpg" alt="Panorama della città" loading="lazy">

Esercizio Pratico

Ora che hai imparato a usare l'elemento <img> e i suoi attributi, prova a creare una piccola galleria di immagini sulla tua pagina web:

  1. Crea un file HTML.

  2. Inserisci almeno tre immagini diverse utilizzando il tag <img>.

  3. Utilizza gli attributi src, alt, title, width, height, e loading dove appropriato.

Ecco un esempio di come potrebbe apparire il tuo codice:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Galleria Immagini</title>
</head>
<body>
    <img src="natura1.jpg" alt="Foresta nebbiosa al mattino" title="Foresta Nebbiosa" width="300" height="200" loading="lazy">
    <img src="natura2.jpg" alt="Lago tra le montagne" title="Lago Montano" width="300" height="200" loading="lazy">
    <img src="natura3.jpg" alt="Deserto sotto il cielo stellato" title

="Cielo Stellato nel Deserto" width="300" height="200" loading="lazy">
</body>
</html>

Anteprima

Conclusione

Ora hai una comprensione solida di come incorporare e gestire immagini in HTML. L'uso appropriato degli attributi <img> non solo arricchisce visivamente il tuo sito web, ma contribuisce anche a renderlo più accessibile e performante.

PreviousParte 3: Attributi di <a>NextCSS

Last updated