Il tag img
Il tag <img> permette di inserire un’immagine all’interno di una pagina HTML. L’immagine non viene incorporata direttamente nel documento: il browser riceve invece l’indicazione della risorsa da caricare.
La sintassi fondamentale è:
<img src="foto.jpg" alt="Descrizione della foto">
Il tag <img> è un elemento vuoto: non contiene altri elementi e non richiede un tag di chiusura.
<img src="foto.jpg" alt="Paesaggio"></img>
In HTML il tag di chiusura </img> non deve essere utilizzato.
Gli attributi src e alt
Gli attributi fondamentali del tag img sono src e alt.
Gli attributi fondamentali del tag img sono src e alt.
| Attributo | Funzione | Esempio |
|---|---|---|
| src | Indica il percorso della risorsa grafica che il browser deve caricare. | src="img/logo.png" |
| alt | Fornisce un testo alternativo appropriato al significato dell’immagine. | alt="Logo aziendale" |
| width | Indica la larghezza dell’immagine. | width="400" |
| height | Indica l’altezza dell’immagine. | height="250" |
<img
src="img/paesaggio.jpg"
alt="Paesaggio di montagna"
width="400"
height="250"
>
L’attributo alt è importante per l’accessibilità. Il testo alternativo deve comunicare la funzione o il contenuto significativo dell’immagine nel contesto della pagina.
Se un’immagine è puramente decorativa, può essere appropriato utilizzare un attributo alt vuoto:
<img src="img/decorazione.png" alt="">
Come viene risolto il percorso
Per visualizzare un’immagine, il browser deve sapere dove si trova il file. Il valore dell’attributo src rappresenta il percorso utilizzato per raggiungere la risorsa.
Per visualizzare un’immagine, il browser deve sapere dove si trova il file. Il valore dell’attributo src rappresenta il percorso utilizzato per raggiungere la risorsa.
Nei percorsi relativi bisogna partire dalla posizione del file HTML corrente e chiedersi: quale percorso devo seguire da questo documento per raggiungere l’immagine?
Per questo motivo lo stesso file immagine può richiedere valori di src differenti a seconda della posizione del documento HTML.
Schema dei percorsi
Lo schema seguente riassume i casi principali che verranno analizzati.
Lo schema seguente riassume i casi principali che verranno analizzati.
Per ogni esempio individua prima index.html, poi individua foto.jpg e infine costruisci il percorso necessario per spostarti dal documento HTML fino all’immagine.
Caso 1: HTML e immagine nella stessa cartella
Consideriamo questa struttura:
Consideriamo questa struttura:
sito/
├── index.html
└── foto.jpg
Il documento HTML e l’immagine si trovano nella stessa directory. È quindi sufficiente specificare il nome del file.
<img src="foto.jpg" alt="Paesaggio">
Dal punto di vista di index.html, foto.jpg è immediatamente disponibile nella directory corrente.
Caso 2: immagine in una sottocartella
Consideriamo ora:
Consideriamo ora:
sito/
├── index.html
└── img/
└── foto.jpg
Per raggiungere l’immagine bisogna entrare nella directory img.
<img src="img/foto.jpg" alt="Paesaggio">
La barra / separa i diversi livelli del percorso.
img/foto.jpg significa: dalla cartella corrente entra nella directory img e cerca il file foto.jpg.
Caso 3: risalire alla cartella superiore
Consideriamo questa struttura:
Consideriamo questa struttura:
sito/
├── foto.jpg
└── pagine/
└── index.html
Questa volta index.html si trova dentro pagine, mentre foto.jpg si trova nella directory superiore.
La sequenza .. significa directory padre, cioè risali di un livello.
<img src="../foto.jpg" alt="Paesaggio">
Il percorso ../foto.jpg può essere letto così:
- parti dalla directory pagine;
- con .. risali alla directory sito;
- cerca foto.jpg.
Caso 4: HTML e immagine in sottocartelle diverse
Consideriamo:
Consideriamo:
sito/
├── pagine/
│ └── index.html
└── immagini/
└── foto.jpg
Il documento e l’immagine si trovano in due directory differenti che hanno la stessa directory padre.
Bisogna prima risalire da pagine a sito e successivamente entrare in immagini.
<img src="../immagini/foto.jpg" alt="Paesaggio">
.. → risali da pagine a sito
immagini/ → entra nella cartella immagini
foto.jpg → seleziona il file
Caso 5: risalire più livelli
È possibile utilizzare più volte .. quando bisogna risalire diversi livelli.
È possibile utilizzare più volte .. quando bisogna risalire diversi livelli.
sito/
├── foto.jpg
└── sezione/
└── pagine/
└── index.html
Per raggiungere foto.jpg da index.html bisogna risalire due livelli.
<img src="../../foto.jpg" alt="Paesaggio">
| Parte del percorso | Operazione |
|---|---|
| primo ../ | Da pagine a sezione |
| secondo ../ | Da sezione a sito |
| foto.jpg | Individua l’immagine |
Percorso dalla root del sito
Un percorso che inizia con / viene interpretato, in un normale contesto web, a partire dalla root del sito.
Un percorso che inizia con / viene interpretato, in un normale contesto web, a partire dalla root del sito.
<img src="/img/foto.jpg" alt="Paesaggio">
Se il sito contiene:
root-del-sito/
├── img/
│ └── foto.jpg
├── index.html
└── pagine/
└── prodotti/
└── prodotto.html
Sia index.html sia prodotto.html possono fare riferimento alla stessa risorsa con:
<img src="/img/foto.jpg" alt="Paesaggio">
img/foto.jpg e /img/foto.jpg non hanno lo stesso significato. Il primo è relativo alla posizione del documento corrente; il secondo parte dalla root del sito web.
Aprendo direttamente un file HTML dal file system locale, un percorso che inizia con / può inoltre comportarsi diversamente rispetto a quando la pagina è servita da un server web.
URL assoluto
L’attributo src può contenere anche un URL completo che identifica una risorsa disponibile su un altro host.
L’attributo src può contenere anche un URL completo che identifica una risorsa disponibile su un altro host.
<img
src="https://cdn.example.com/images/logo.png"
alt="Logo"
>
In questo caso il browser non cerca l’immagine nelle directory del sito corrente. Effettua una richiesta verso l’indirizzo specificato nell’URL.
Confronto dei percorsi
| Situazione | src | Significato |
|---|---|---|
| Stessa cartella | foto.jpg |
Cerca nella directory del documento HTML. |
| Sottocartella | img/foto.jpg |
Entra nella directory img. |
| Cartella superiore | ../foto.jpg |
Risale di un livello. |
| Cartella parallela | ../immagini/foto.jpg |
Risale e poi entra in immagini. |
| Due livelli superiori | ../../foto.jpg |
Risale di due livelli. |
| Root del sito | /img/foto.jpg |
Parte dalla root del sito web. |
| Risorsa remota | https://example.com/foto.jpg |
Utilizza un URL completo. |
LABORATORIO
Verificare i percorsi
L’attività consiste nel costruire una piccola struttura di directory e verificare nel browser come cambia src in base alla posizione della pagina HTML.
L’attività consiste nel costruire una piccola struttura di directory e verificare nel browser come cambia src in base alla posizione della pagina HTML.
È possibile utilizzare qualunque editor di codice, per esempio Visual Studio Code, Notepad++ o un editor equivalente, insieme a un browser moderno.
Passo 1 - Preparare la struttura
Creare la seguente struttura:
sito/
├── index.html
├── immagini/
│ ├── mare.jpg
│ └── montagna.jpg
└── pagine/
└── galleria.html
Passo 2 - Immagine in una sottocartella
Aprire index.html e inserire:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Galleria fotografica</title>
</head>
<body>
<h1>Galleria fotografica</h1>
<img
src="immagini/mare.jpg"
alt="Paesaggio marino"
width="500"
>
</body>
</html>
Aprendo index.html, l’immagine mare.jpg deve essere visualizzata. Il browser parte dalla directory sito, entra in immagini e trova mare.jpg.
Passo 3 - Immagine da una pagina in un’altra cartella
Aprire pagine/galleria.html e inserire:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Galleria</title>
</head>
<body>
<h1>Montagna</h1>
<img
src="../immagini/montagna.jpg"
alt="Paesaggio di montagna"
width="500"
>
</body>
</html>
Il percorso può essere interpretato in tre passaggi:
- .. risale da pagine a sito;
- immagini entra nella directory delle immagini;
- montagna.jpg identifica il file.
Passo 4 - Provocare intenzionalmente un errore
Modificare temporaneamente il percorso:
<img src="immagini/montagna.jpg" alt="Paesaggio di montagna">
Se questo codice si trova in pagine/galleria.html, il browser interpreta il percorso a partire dalla directory pagine e cerca quindi una directory pagine/immagini, che nella struttura proposta non esiste.
Ripristinare quindi:
<img src="../immagini/montagna.jpg" alt="Paesaggio di montagna">
Troubleshooting
Controllare nell’ordine:
- che il file immagine esista realmente;
- che il nome del file sia corretto;
- che l’estensione sia corretta, per esempio .jpg, .jpeg, .png o .webp;
- che il percorso sia costruito partendo dalla posizione del documento HTML;
- che il numero di ../ sia corretto;
- che non siano state confuse directory e nomi di file;
- che maiuscole e minuscole corrispondano esattamente quando il server distingue tra i due casi.
Non è corretto creare una pagina web dipendente da un percorso locale come:
<img src="C:\Users\Studente\Desktop\foto.jpg" alt="Foto">
Quel percorso appartiene al computer su cui è stato creato il file e non rappresenta la struttura pubblica del sito web.
Quando un’immagine non appare, evita di modificare il percorso casualmente. Individua prima la posizione del documento HTML, poi quella dell’immagine e ricostruisci lo spostamento necessario tra le directory.
Sfida pratica
Considera questa struttura:
Considera questa struttura:
portfolio/
├── index.html
├── assets/
│ └── images/
│ ├── logo.png
│ └── profilo.jpg
└── pagine/
├── chi-sono.html
└── progetti/
└── progetto1.html
Determinare il valore corretto di src nei seguenti casi:
- index.html deve visualizzare logo.png;
- chi-sono.html deve visualizzare profilo.jpg;
- progetto1.html deve visualizzare logo.png.
Disegna il percorso sulla struttura delle directory. Per ogni caso parti dal file HTML interessato e conta quanti livelli devi risalire prima di entrare in assets/images.
1. Da index.html:
<img src="assets/images/logo.png" alt="Logo">
2. Da pagine/chi-sono.html:
<img src="../assets/images/profilo.jpg" alt="Profilo">
3. Da pagine/progetti/progetto1.html:
<img src="../../assets/images/logo.png" alt="Logo">
Verifica rapida
- A cosa serve l’attributo src?
- Qual è la funzione dell’attributo alt?
- Cosa significa ../ in un percorso relativo?
- Qual è la differenza tra img/foto.jpg e /img/foto.jpg?
- Da quale posizione viene calcolato un percorso relativo?
- Perché un percorso come C:\Users\...\foto.jpg non è adatto a una pagina web pubblicata?
Per approfondire è utile consultare la documentazione HTML relativa all’elemento <img>, agli URL e alle regole di risoluzione dei percorsi relativi.