📢 Nuovo Corso Laravel API disponibile!

Esercizi Immagini HTML

Ecco degli esercizi semplici con soluzione per praticare le basi sull’utilizzo delle immagini in HTML utilizzando il tag <img>.

Esercizio 1

Inserisci un'immagine incorporata nella pagina HTML.
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<img src="immagine.jpg" alt="Descrizione dell'immagine" />
</body>
</html>

Esercizio 2

Specifica la larghezza di un'immagine utilizzando l'attributo width.
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<img src="immagine.jpg" alt="Descrizione dell'immagine" width="300" />
</body>
</html>

Esercizio 3

Specifica l'altezza di un'immagine utilizzando l'attributo height.
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<img src="immagine.jpg" alt="Descrizione dell'immagine" height="200" />
</body>
</html>

Esercizio 4

Aggiungi un testo alternativo a un'immagine utilizzando l'attributo alt.
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<img src="immagine.jpg" alt="Logo del sito web" />
</body>
</html>

Esercizio 5

Inserisci un'immagine come link cliccabile che reindirizza a un'altra pagina
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<a href="pagina.html">
<img src="immagine.jpg" alt="Descrizione dell'immagine" />
</a>
</body>
</html>

Esercizio 6

Aggiungi un attributo title a un'immagine per fornire una descrizione aggiuntiva quando l'utente passa il mouse sopra di essa.
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<img
src="immagine.jpg"
alt="Descrizione dell'immagine"
title="Clicca per ingrandire" />
</body>
</html>

Esercizio 7

Aggiungi un bordo a un'immagine utilizzando l'attributo border.
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<img src="immagine.jpg" alt="Descrizione dell'immagine" border="1" />
</body>
</html>

Esercizio 8

Allinea un'immagine a sinistra utilizzando l'attributo align.
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<img src="immagine.jpg" alt="Descrizione dell'immagine" align="left" />
</body>
</html>

Esercizio 9

Allinea un'immagine a destra utilizzando l'attributo align.
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<img src="immagine.jpg" alt="Descrizione dell'immagine" align="right" />
</body>
</html>

Esercizio 10

Specifica sia la larghezza che l'altezza di un'immagine utilizzando gli attributi width e height.
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<img
src="immagine.jpg"
alt="Descrizione dell'immagine"
width="300"
height="200" />
</body>
</html>