> For the complete documentation index, see [llms.txt](https://learn.ziomark.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.ziomark.xyz/html/parte-4-lelemento-less-than-img-greater-than.md).
# Parte 4: L'Elemento \
Benvenuti alla quarta lezione del nostro corso di HTML! Oggi esploreremo in dettaglio l'elemento ``, 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 `` ?
L'elemento `` è 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 ``; specifica il percorso dell'immagine che desideri mostrare sulla pagina web.
### Esempio di Utilizzo di `src`
```html
```
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`
```html
```
## Altri Attributi Importanti
* **`title`**: Fornisce informazioni aggiuntive sull'immagine quando l'utente passa il mouse sopra l'immagine. Questo testo appare come un tooltip.
```html
```
* **`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.
```html
```
* **`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`.
```html
```
## Esercizio Pratico
Ora che hai imparato a usare l'elemento `` 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 ``.
3. Utilizza gli attributi `src`, `alt`, `title`, `width`, `height`, e `loading` dove appropriato.
Ecco un esempio di come potrebbe apparire il tuo codice:
```html
Galleria Immagini
```
## Anteprima
## Conclusione
Ora hai una comprensione solida di come incorporare e gestire immagini in HTML. L'uso appropriato degli attributi `` non solo arricchisce visivamente il tuo sito web, ma contribuisce anche a renderlo più accessibile e performante.
```
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`
```html
```
## Altri Attributi Importanti
* **`title`**: Fornisce informazioni aggiuntive sull'immagine quando l'utente passa il mouse sopra l'immagine. Questo testo appare come un tooltip.
```html
```
* **`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.
```html
```
* **`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`.
```html
```
## Esercizio Pratico
Ora che hai imparato a usare l'elemento `
```
## Anteprima