Corso di HTML

Inserimento delle immagini

 

Cosa sarebbe il web senza le immagini? Non riesco proprio ad immaginarlo, forse assomiglierebbe molto ad un negozio senza gli articoli esposti, ma solo con le etichette e le descizioni... che brutto!

Fortunatamente poco dopo la nascita del WWW, NCSA Mosaic ha provveduto ad 'inventare' il tag <IMG> che ha dato nuova linfa vitale ai siti web.

La sintassi di questo ultra-usato tag è:

<IMG src="URL" alt="Descrizione" align="Allineamento" width=pixel height=pixel border=pixel hspace=pixel vspace=pixel >

Si noti che il tag non necessita del tag di chiusura.

 

L'attributo src è obbligatorio e serve per indicare il percorso ( URL ) dell'immagine da caricare ; i tipi di immagini standard sono: gif, jpg e png. Utilizzare altri formati può provocare errori di compatibilità tra i vari browser; ad esempio alcuni supportano il formato bmp, mentre altri no.

L'attributo alt è opzionale, ma consigliato ed indica il testo che compare quando si passa con il mouse sull'immagine e quando l'immagine sta per essere caricata. Inoltre è l'unica informazione che compare con i browser testuali oppure quando si è disattivato il caricamento automatico delle immagini.

L'attributo align indica l'allineamento del testo con l'immagine, i valori standard sono: top, middle, bottom, left e right.

Con top si allinea il testo della riga corrente con il bordo superiore dell'immagine, con middle si allinea il testo al centro dell'immagine, mentre con bottom lo si allinea con il bordo inferiore. Usando l'attributo left si allinea l'immagine al bordo sinistra e si fa scorrere il testo sul suo bordo sinistro; viceversa per right.

Gli attributi width ed height consentono di specificare le dimensioni dell'immagine. Da questa operazione scaturiscono due conseguenze principali:

  1. L'immagine può essere ingrandita, rimpicciolita o distorta; le considerazioni sulla qualità dell'immagine risultante e sui tempi di caricamento sono dipendenti dal formato dell'immagine originale.
  2. É possibile definire prima del caricamento lo spazio che l'immagine occuperà nella pagina finale. Ciò evita che la disposizione e la posizione del testo varino in seguito al caricamento di ogni immagine. Di default, infatti, viene caricato prima tutto il testo della pagina e successivamente immagini, file audio...

L'attributo border consente di definire lo spessore del bordo che compare quando l'immagine è utilizzata in un collegamento ipertestuale. Per nascondere il bordo si può utilizzare come spessore il valore 0.

Gli attributi hspace e vspace permettono invece di definire uno spazio vuoto attorno al perimetro dell'immagine. Di default è utilizzato uno spazio sufficiente a non far adiacere il testo e l'immagine.

Vediamo adesso una 'feature' molto carina delle immagini: le mappe.

Le mappe consentono di associare a delle regioni dell'immagine dei link; si pensi ad alcuni siti di produttori hardware che consentono di andare a pagine diverse scegliendo il paese grazie al click del mouse su una immagine mappata raffigurante la Terra.

I tipi di mappe si distinguono a seconda che siano implementate dal lato del server o del client ( il nostro browser ).

In questo articolo non tratteremo le mappe dal lato server, ma vi dico comunque che queste si distinguono in mappe di tipo CERN ed NCSA. Queste richiedono un file separato ( sul server ) per la definizione della mappa e richiedono anche che il server abbia un apposito script CGI che garantisca l'elaborazione sull'input dell'utente.

Per utilizzare le mappe dal lato client si utilizzano l'attributo usemap di <IMG> e i tag <MAP> ed <AREA>.

La sintassi per l'utilizzo delle mappe è la seguente:

<IMG src="URL" usemap="#NomeMappa">

L'attributo src indica il percorso dell'immagine, mentre #NomeMappa indica il nome della mappa, se questa non si trova nel file corrente bisogna anteporle il percorso del file che la contiene ( tipo le ancore al documento corrente ).

La sintassi di MAP e AREA è la seguente:

<MAP name=NomeMappa>

<AREA shape=" rect | circle | poly " coords="Coordinate" HREF="URL">

<AREA ...>

...

</MAP>

L'attributo name di MAP consente di definire un nome univoco per la mappa, questo non deve essere in conflitto con altri nomi di mappe o di ancore nello stesso file.

L'attributo shape di AREA consente di definire la forma di cui si vogliono dare le coordinate tramite l'altro attributo coords. La loro implementazione manuale è talmente ostica che non viene quasi mai utilizzata, si preferisce infatti affidarsi a programmi dedicati per fare ciò come: MapEdit, MapThis!, Live Image...

 

Torna all'indice Generale del corso di Corso di HTML di Software Planet