Immagini in HTML

Sintassi delle Immagini in HTML

Il tag HTML <img> viene utilizzato per incorporare un’immagine in una pagina web.

Le immagini non sono tecnicamente inserite in una pagina web; esse sono collegate alle pagine web. Il tag <img> crea uno spazio di contenimento per l’immagine referenziata.

Il tag <img> è vuoto, contiene solo attributi e non ha un tag di chiusura.

Il tag <img> ha due attributi obbligatori:

src - Specifica il percorso dell’immagine
alt - Specifica un testo alternativo per l’immagine

<img src="url" alt="testoalternativo" />

L’attributo src

L’attributo src obbligatorio specifica il percorso (URL) dell’immagine.

Quando una pagina web viene caricata, è il browser, in quel momento, che ottiene l’immagine da un server web e la inserisce nella pagina. Pertanto, assicurati che l’immagine rimanga effettivamente nello stesso posto in relazione alla pagina web, altrimenti i visitatori visualizzeranno un’icona di collegamento rotto. L’icona del collegamento rotto e il testo alternativo vengono mostrati se il browser non riesce a trovare l’immagine.

<img src="immagine.jpg" alt="Immagine a caso" />

L’attributo alt

L’attributo alt obbligatorio fornisce un testo alternativo per un’immagine, nel caso in cui l’utente per qualche motivo non possa visualizzarla. La causa può essere una connessione lenta, un errore nell’attributo src o se l’utente utilizza uno screen reader.

Il valore dell’attributo alt dovrebbe descrivere l’immagine:

<img src="immagine.jpg" alt="Immagine a caso" />

Se un browser non riesce a trovare un’immagine, verrà visualizzato il valore dell’attributo alt:

<img src="immagine_non_trovata.png" alt="Immagine a caso" />

Dimensione dell’Immagine - Larghezza e Altezza

Puoi utilizzare l’attributo style per specificare la larghezza e l’altezza di un’immagine.

<img
  src="immagine.jpg"
  alt="Immagine a caso"
  style="width:500px;height:600px;" />

In alternativa, puoi utilizzare gli attributi width e height:

<img src="immagine.jpg" alt="Immagine a caso" width="500" height="600" />

Gli attributi width e height definiscono sempre la larghezza e l’altezza dell’immagine in pixel.

Immagini in un’altra Cartella

Se hai le tue immagini in una sottocartella, devi includere il nome della cartella nell’attributo src:

<img
  src="/immagini/immagine.png"
  alt="Logo Codegrind"
  style="width:128px;height:128px;" />

Immagini su un Altro Server/Sito Web

Alcuni siti web puntano a un’immagine su un altro server. Per puntare a un’immagine su un altro server, devi specificare un URL assoluto (completo) nell’attributo src:

<img src="https://www.codegrind.it/immagini/immagine.jpg" alt="Codegrind.it" />

Le immagini esterne potrebbero essere soggette a copyright. Se non ottenete il permesso per usarle, potreste violare le leggi sul copyright. Inoltre, non avete il controllo sulle immagini esterne; possono essere rimosse o cambiate improvvisamente.

Immagine come Link

Per utilizzare un’immagine come link, inserisci il tag <img> all’interno del tag <a>:

<a href="default.asp">
  <img
    src="smiley.gif"
    alt="Tutorial HTML"
    style="width:42px;height:42px;" /> </a
></a>