Primi passi con HTML - Lezione 6 - Immagini

10/10/2025, by Ivan

Le immagini sono un elemento molto importante di un sito web: senza di esse, il sito appare grigio e poco attraente. Le immagini vengono utilizzate per l’aspetto grafico del sito, per gallerie fotografiche o semplicemente per decorare le pagine.

Le immagini vengono inserite tramite il tag IMG (nota che non si scrive “image” per intero, ma solo img). Il tag IMG è un tag singolo <img />, cioè non ha un tag di chiusura.

L’attributo principale del tag IMG è src. Funziona come href nei collegamenti: nell’attributo src dobbiamo specificare il percorso dell’immagine. Il percorso può essere relativo o assoluto, proprio come per i link.

Ecco il codice del nostro file index.html:

<html>
  <head>
    <title>Il mio primo documento HTML</title>
  </head>
  <body>  
    <h1>Il mio primo documento HTML</h1>
    <p>
      <a href="files/file.html">Collegamento al secondo documento</a>
    </p>
  </body>
</html>

Creiamo ora una cartella chiamata images accanto a questo file. All’interno di questa cartella copieremo il file dell’immagine. Supponiamo che il nome dell’immagine sia image.jpg. Inseriamo il tag img nel file index.html.

<html>
  <head>
    <title>Il mio primo documento HTML</title>
  </head>
  <body>  
    <h1>Il mio primo documento HTML</h1>
    <p>
      <img />
    </p>
    <p>
      <a href="files/file.html">Collegamento al secondo documento</a>
    </p>
  </body>
</html>

Abbiamo inserito il tag, ora scriviamo il percorso dell’immagine utilizzando un percorso relativo, che inizierà con ./

./

Ora aggiungiamo il nome della cartella che contiene l’immagine:

./images/

E infine scriviamo il nome del file:

./images/image.jpg

Ora inseriamo questo percorso all’interno dell’attributo src.

<html>
  <head>
    <title>Il mio primo documento HTML</title>
  </head>
  <body>  
    <h1>Il mio primo documento HTML</h1>
    <p>
      <img src="./images/image.jpg" />
    </p>
    <p>
      <a href="files/file.html">Collegamento al secondo documento</a>
    </p>
  </body>
</html>

Attualmente l’immagine viene mostrata nelle sue dimensioni originali, ma possiamo definirne le dimensioni usando gli attributi di altezza e larghezza.

L’attributo di larghezza del tag img è width. Quello di altezza è height. Possiamo impostare solo la larghezza, solo l’altezza oppure entrambe. Ad esempio:

<html>
  <head>
    <title>Il mio primo documento HTML</title>
  </head>
  <body>  
    <h1>Il mio primo documento HTML</h1>
    <p>
      <img src="./images/image.jpg" width="200" />
    </p>
    <p>
      <a href="files/file.html">Collegamento al secondo documento</a>
    </p>
  </body>
</html>

Oppure solo l’altezza:

<html>
  <head>
    <title>Il mio primo documento HTML</title>
  </head>
  <body>  
    <h1>Il mio primo documento HTML</h1>
    <p>
      <img src="./images/image.jpg" height="400" />
    </p>
    <p>
      <a href="files/file.html">Collegamento al secondo documento</a>
    </p>
  </body>
</html>

Se imposti sia l’altezza che la larghezza contemporaneamente, assicurati che siano proporzionate alle dimensioni originali dell’immagine. In caso contrario, l’immagine apparirà deformata sulla pagina.

<html>
  <head>
    <title>Il mio primo documento HTML</title>
  </head>
  <body>  
    <h1>Il mio primo documento HTML</h1>
    <p>
      <img src="./images/image.jpg" height="400" width="100" />
    </p>
    <p>
      <a href="files/file.html">Collegamento al secondo documento</a>
    </p>
  </body>
</html>

Extra Block Types (EBT) - Nuova esperienza con Layout Builder❗

❗Extra Paragraph Types (EPT) - Nuova esperienza con Paragraphs

Primi passi con HTML - Lezione 6 - Immagini