📢 Nuovo Corso Tailwind Completo disponibile!

Esercizi Immagini HTML

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

⚠ Hai trovato errori su questa pagina? Vuoi suggerire idee o contribuire? Visita la pagina contatti

Tracce

🍰 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>