Skip to content
Codegrind

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>