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:

Crea un file HTML.
Inserisci almeno tre immagini diverse utilizzando il tag <img>.
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 1 year ago

Was this helpful?

Cos'è il tag <img> ?

Attributo src

Esempio di Utilizzo di src

Attributo alt

Esempio di alt