Le immagini

In linee generali inserire immagini non è un problema. Ma inserirle nel punto giusto e, soprattutto, fare in modo che esse non interferiscano con il testo è una cosa di primaria importanza.

La sintassi che regola l'immissione di una immagine in un documento è anch'essa molto semplice e regolata, fondamentalmente, da pochi parametri.


Esempio di img con allineamento predefinito

Esempio di img con allineamento centrato

Esempio di img con allineamento in alto

La sintassi usata per tutte e tre le immagini è sostanzialmente sempre la stessa, cambia solo l'allineamento:

<img src="smile.gif" width=40 height=40 align=xxxx>

Vediamo di capirci qualcosa:

IMG è il nome del tag che indica al browser che intendiamo inserire in quel punto una immagine;

SRC è l'unico parametro indispensabile, indica infatti il percorso della pic da visualizzare;

WIDTH ed HEIGHT, sono rispettivamente la larghezza e l'altezza in pixel dell'immagine, facilmente deducibili da qualsiasi programma di grafica, nonchè da qualunque browser;

ALIGN definisce l'allineamento, ed al posto di XXXX va inserito top se la si vuole allineare in alto e middle se la si vuole allineare centrata (ovviamente rispetto al testo). Sostituire le XXXX con bottom per allinearla in basso è superfluo in quanto quello in basso è l'allineamento predefinito pertanto e possibile omettere il suddetto tag.

Può capitare che durante la visualizzazione di un'immagine avvenga qualcosa di spiacevole che ne blocchi il caricamento, oppure che le vostre pagine possano essere non viste da qualcuno che, per essere più veloce, ha settato il proprio browser in modo che non carichi le immagini, o, ancora, che le vostre immagini vengano caricate lentamente date le dimensioni "esagerate" (rispettate i visitatori!).

Rendendosi conto di quanto frequenti possono essere i casi sopra elencati è conveniente utilizzare un altro attributo dell'immagine: il comando ALT mediante il quale è possibile dare una breve definizione di quello che raffigurerà l'immagine dopo il caricamento. Guardate, ad esempio, cosa accade a questa immagine (volutamente inesistente):

img inesistente!

La sintassi per aggiungere un "testo ALTernativo" alle immagini è la seguente:

<img src="prrrr!.gif" alt="img inesistente!">

Le immagini possono essere usate anche come "collegamenti" in luogo del semplice testo, già visto nel paragrafo links. Nell'uso delle immagini come riferimenti è molto importante, specie quando si fa uso di gif trasparenti, aggiungere agli attributi il comando border=0 come segue:

<img src="smile.gif" width=40 height=40 border=0>

Per evitare l'orribile bordino colorato che apparirebbe in caso contrario come in questo esempio:




<< i links le liste >>
CorsoHTML
di Francesco Ricca