Html 4

Inserire immagini nel documento (elemento IMG)

Cosa imparerai in questa lezione: come inserire immagini all'interno di un documento e usare gli attributi del tag IMG.

Internet, solo negli ultimi 10 anni affermatasi come media di massa, è stato per lunghi anni un sistema di comunicazione ad esclusivo utilizzo di apparati militari prima, e universitari dopo. E' agevole immaginare quanto poco inclini alla grafica ed all'estetica fossero i vecchi navigatori della Rete. Alla fine degli anni Ottanta Internet ha subito una radicale trasformazione che ha portato sulle "autostrade telematiche" un'utenza di massa, con esigenze diverse da quelle militari o accademiche. Con la trasformazione della Rete si è imposta l'esigenza di mettere a disposizione strumenti di navigazione più "user friendly" per esigenze non più meramente di studio e ricerca. Così, nel 1989 nasce il WWW che grazie al primo browser della storia, Mosaic, trasforma il testo bianco su sfondo nero nell'attuale Web, fatto di colori e interattività.

La rivoluzione dell'immagine (criticata da alcuni puristi accademici che videro nell'Internet di massa la fine del sistema di comunicazione) fu anche merito di un tag oggi molto comune <IMG>, cioè l'elemento necessario a richiamare immagini all'interno della pagina.
<IMG>

Prima di trattare nello specifico il tag principale per l'inserimento di immagini negli ipertesti è bene precisare alcuni concetti di HTML. A differenza di molti editor di testo (Ms Word, per esempio) gli ipertesti non vengono "fusi" con le immagini a corredo grafico, ma si limitano a richiamarle da un percorso specifico in locale o su Web. In altre parole esiste una soluzione di continuità molto chiara tra file .htm e immagini (ma anche suoni, applet ecc.). I documenti HTML si limitano a prevedere uno spazio al proprio interno entro il quale vanno inserite le immagini richiamate.

Il tag <IMG> non ha bisogno di chiusura e la sua corretta sintassi è la seguente:

Dove SRC sta per Search ed è il percorso dal quale il browser ricava l'immagine (in questo caso "immagine.gif"). Come detto si tratta di un tag singolo, nel senso che NON va chiuso con un corrispondente </IMG>.
GUARDARE l'esempio: esempioIMG.htm

I browser (Netscape, MsIe, Opera ecc.) riconoscono molti formati grafici, anche se sono due quelli più utilizzati: GIF (Graphics Interchange Format) e JPEG (Joint Photographics Experts Group). Negli ultimi tempi sta diffondendosi su scala mondiale un altro formato: PNG (Portable Network Graphics).

L'elemento <IMG> è corredato da diversi attributi molto utili ai fini del suo utilizzo. Vediamo insieme quali.
ALT

L'utilizzo di commenti testuali alle immagini è una fondamentale regola da osservare nella creazione di siti Web per alcune buone ragioni:
· taluni browser potrebbero essere impostati per non richiamare le immagini;
· i browser testuali per non vedenti non riuscirebbero ad interpretare le immagini senza un commento.
· è possibile evitare didascalie inserendo commenti all'interno dell'immagine stessa. In tutti i casi considerati l'uso di commenti risolve il problema e consente di ottimizzare l'ulitizzo di una pagina Web. La corretta sintassi per i commenti è la seguente:

<IMG SRC="immagine.gif" ALT="Opera di K. Haring">
GUARDARE l'esempio: esempioALT.htm

Per verificare gli effetti passa con il mouse sull'immagine dell'esempio.
WIDTH e HEIGHT

Negli esempi finora indicati non abbiamo specificato le misure dell'immagine che il browser ha provveduto a cercare automaticamente. E' possibile definire altezza e larghezza dell'immagine con gli attributi width ed height:

Dove WIDTH=178 è la dimensione orizzontale (larghezza) dell'immagine espressa in pixel, e HEIGHT=180 la dimensione verticale (altezza).

Con questi attributi è possibile definire dimensioni differenti da quelle effettive dell'immagine. E', comunque, consigliabile inserire immagini di dimensioni naturali soprattutto se in formato GIF, visto che ridimensionando questo formato la qualità decade enormemente.

BORDER

Con l'attributo BORDER è possibile assegnare un bordo all'immagine. I valori sono numerici ed espressi in pixel. Il valore BORDER impostato su 0 ha l'effetto di non visualizzare alcun bordo. Se questo attributo viene omesso il browser non assegna nessun bordo, ma se l'immagine è anche un link viene automaticamente assegnato un BORDER=1. Questa che segue è la giusta sintassi:

<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Opera di K. Haring">
GUARDARE l'esempio: esempioBORDER.htm

HSPACE e VSPACE

Con questi due attributi è possibile stabilire la distanza in pixel dell'immagine dagli oggetti che si trovano ai quattro lati della stessa.
· HSPACE definisce la distanza dai lati destro e sinistro dell'immagine degli oggetti più vicini (testo, immagini, applet ecc.).
· VSPACE definsice la distanza dai lati superiore e inferiore dell'immagine degli oggetti più vicini (testo, immagini, applet ecc.). Questa la corretta sintassi:

Questi attributi risultano utili quando si vuole distanziare l'immagine dagli oggetti più vicini.
ALIGN

L'attributo ALIGN definisce la posizione dell'immagine rispetto al testo posto immediatamente prima o dopo la stessa. Esistono varie opzioni per l'attributo ALIGN:
ALIGN=top: allinea la prima riga di testo sulla sinistra al top dell'immagine.

GUARDARE l'esempio: esempioALIGN.htm

ALIGN=middle: allinea la prima riga di testo sulla sinistra al centro dell'immagine.

ALIGN=bottom: allinea la prima riga di testo sulla sinistra nella parte più bassa dell'immagine.

ALIGN=left: allinea il testo sulla destra dell'immagine partendo dal top.

ALIGN=right: allinea il testo sulla sinistra dell'immagine partendo dal top.