Esercizi Immagini HTML

Codegrind Team•Jul 16 2023

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>