Guide

Corso HTML – Lezione 7: Le immagini

HTMLLe immagini – a differenza del testo – non sono mai direttamente presenti nel codice HTML di una pagina web . Per inserire un’immagine all’interno di una pagina si ricorre al tag <img>, assegnangdo all’attributo src il pathname del file che contiene l’immagine da incorporare nella pagina ( il nome del file deve sempre essere comprensivo dell’estensione ) :

<img src="./fotografia.jpg"/>

[box type=”info” ]Il tag non necessita del corrispondente tag di chiusura, in quanto il simbolo “/” è già compreso al suo interno.[/box]

E’ importante aggiungere l’attributo alt  a cui assegnare un testo che viene visualizzato dal browser nel caso risulti impossibile caricare l’immagine :

<img src="./fotografia.jpg" alt="testo descrittivo della foto"/>

Il testo alternativo viene letto automaticamente dai browser utilizzati da ipovedenti: questo è uno degli accorgimenti fondamentali per rendere una pagina web accessibile per utenti che necessitano di una diversa presentazione della pagina .
[box type=”info” ]E’ fortemente consigliato utilizzare solamente immagini in formato PNG , GIF o JPG . Inoltre, le immagini devono essere di dimensioni contenute ( infatti file di grandi dimensioni rallentano non poco il caricamento della pagina del browser ) .[/box]

Per specificare le misure di larghezza e lunghezza si utilizzano rispettivamente gli attributo width ed height, assegnando a ciascuno di essi un valore espresso in pixel. Se viene specificato uno solo dei due valori, l’altro sarà impostato automaticamente dal browser rispettando le proporzioni geometriche dell’immagine .

La pagina HTML che segue visualizza una fotografia , ridimensionata a 200 pixel di larghezza , contenuta nel file ” montagna.jpg ” c0llocato nella stessa directory della pagina stessa :

<!doctype html>
   <html>
      <head>
         <title> Pagina con Immagine </title>
      </head>
      <body>
         <img src="montagna.jpg" alt=" Montagna con bosco "width="200"/>
      </body>
   </html>

Un’immagine può anche essere utilizzata come collegamento ipertestuale ( link ) ; è sufficiente a questo scopo inserire il tag <img>  all’interno di un tag <a> :

<a href=" destinazione">
   <img src="immagine" alt="testo"/>
</a>

Altrimenti è possibile fare in modo che aree distinte di una stessa immagine si comportino come link con destinazioni diverse. Per ottenere questo risultato è necessario creare una usemap – ovvero una suddivisione virtuale dell’immagine – inserendo l’attributo usemap all’interno del tag <img> e assegnango a essa un nome preceduto dal simobolo ” # “:

<img src="immagine" usemap="#mappa"/>

Una volta definita , la mappa virtuale deve essere creata utilizzando il tag <map> e assegnando all’attributo name il nome precedentemente scelto :

<img src="./fotografia.jpg" usemap="#mappafotografia"/>
<map name="#mappafotografia">
</map>

All’interno del tag <map> devono essere inseriti i vari tag <area> utilizzati per definire i diversi settori dell’immagine che si intendono associare ai link. Il tag <area> ha quattro attributi :

  • shape : determina se la forma del settore è un rettangolo (“rect”) , oppure un cerchio (“circle”)
  • coords : se shape definisce un rettangolo , imposta le coordinate cartesiane relative ai pixel dell’immagine di due vertici opposti del rettangolo ; se invece definisce un cerchio, imposta le coordinate cartesiane del centro e la lunghezza del raggio espressa in pixel;
  • href : come nel tag <a> definisce la destinazione del collegamento ;
  • alt : come nel tag <img> contiene il testo alternativo relativo all’immagine.

[box type=”info” ]Contrariamente al normale sistema di riferimento cartesiano utilizzato in matematica, l’asse delle ordinate è definito sulla superficie di un’immagine digitale in modo invertito: le coordinate crescono procedendo dall’alto verso il basso.[/box]

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Le guide più interessanti