Incorporare immagini
World Wide Web è un sistema di pubblicazione multimediale. Questo significa che è possibile inserire in un documento informazioni non testuali, anche se il grado di integrazione di queste informazioni varia in base al loro tipo. Ad esempio, i browser Web possono gestire direttamente solo alcuni formati di file grafici, come il formato GIF o il formato JPEG.
Il marcatore che svolge la funzione di inclusione di una immagine all'interno di un testo ha la seguente sintassi:
<img src="file-grafico"> (es.: < img src="mouse.gif">)
Questo elemento non ha bisogno di un marcatore di chiusura poiché non marca una zona
di testo, ma segnala solo la posizione in cui inserire una immagine. Il valore
dell'attributo src può essere o il pathname del file grafico, se questo è
presente nello stesso computer del file HTML, o la URL corrispondente a un file grafico
contenuto in un qualsiasi host di Internet
(es.: <img
src="http://www.fauser.edu/immagini/mouse.gif">).
Normalmente tutti i file che compongono una pagina Web risiedono nel disco rigido della medesima macchina. Il pathname del file grafico va espresso in relazione alla collocazione del file HTML. Se, ad esempio, entrambi sono collocati nella stessa directory, basterà specificare come valore di src solo il nome del file, in questo modo: < img src="mouse.gif"> (è consigliabile, specialmente per i meno esperti, fare in questo modo le prime volte). Altrimenti si dovranno specificare anche i nomi delle directory (cartelle nel mondo Macintosh) in modo relativo a quella in cui si trova il file HTML, separati dalla barra (/). In questo modo potremo realizzare siti Web più ordinati, nei quali ad es. le immagini siano conservate in directory separate.
Facciamo qualche esempio pratico per chiarirci le idee. Immaginiamo che il file HTML sul quale stiamo lavorando (prova.htm) si trovi nella directory 'testi' e l'immagine da inserire (mouse.gif) in una directory 'immagini' contenuta all'interno di 'testi', come dalla figura seguente:
Figura 1 In una struttura come questa, la sintassi del comando <img> contenuto in prova.htm è <img src="immagini/mouse.gif">
Il path in tal caso sarà 'immagini/mouse.gif'. Ovvero abbiamo indicato al browser di "entrare" nella directory "immagini" e di cercare lì il file grafico.
Immaginiamo ora una situazione diversa. Le directory 'testi' e 'immagini' sono allo stesso livello gerarchico (cioè 'immagini' non è più contenuta all'interno di 'testi'). Come dalla figura seguente:
Figura 2 In una struttura come questa, la sintassi del comando <img> contenuto in prova.htm è <img src="../immagini/mouse.gif">
Questa volta il path — partendo da 'prova.htm' — sarà '../immagini/mouse.gif'. Ovvero abbiamo prima indicato al browser di uscire dalla directory 'testi' (con '../') e poi gli abbiamo detto di 'entrare' nella directory 'immagini'.
Ovviamente, nel caso in cui la struttura fosse più ramificata, è sufficiente da un
lato fornire le ulteriori sub-directory
(es.: <img
src="immagini/oggetti/pc/mouse.gif">),
Figura n. 3
Figura n. 4È anche possibile fornire dei pathname assoluti, iniziando il percorso dalla directory di root. In tal caso, il path dell'esempio riportato in figura 1 si scriverebbe <img src="/testi/immagini/mouse.gif">, e quello dell'esempio riportato in figura 2 <img src="/immagini/mouse.gif">. Come avrete notato, ciò che ha reso assoluti i path è stato il carattere '/' inserito all'inizio.
Di solito è meglio evitare i path assoluti, sia perché legano le nostre pagine HTML in modo rigido al computer che le ospita, sia perché ci costringono a ricrearne la struttura all'interno del nostro PC.
Per il nostro file 'prova.htm' adottiamo l'indirizzamento più semplice, collochiamo l'immagine 'mouse.gif' nella stessa directory di 'prova.htm' e aggiungiamo perciò la seguente riga:
Gli attributi di <img><img src="mouse.gif">
Il tag <img> dispone di svariati attributi. Vediamo i principali:
L'attributo 'align' influenza la disposizione dell'immagine rispetto al testo che la precede e la segue oppure influenza l'allineamento dell'immagine con il testo. Ad esempio 'align="left"' fa sì che l'immagine si collochi alla sinistra del testo. Le figure che seguono aiuteranno a capire meglio la funzione dell'attributo:
 il mio mouse!
|
<img src="mouse1.gif" align=top> il mio mouse!
|
|
il mio mouse!
|
<img src="mouse1.gif" align=middle> il mio mouse!
|
|
il mio mouse!
|
<img src="mouse1.gif" align=bottom; il mio mouse!
|
|
il mio mouse!
|
<img src="mouse1.gif" align=left> il mio mouse!
|
il mio mouse!
<img src=mouse.gif alt="gif" align=right>
il mio mouse!
|
il mio
mouse! |
<img src="mouse1.gif" align=left>il mio
|
Da notare che se si vuole centrare una immagine nello schermo, non si deve ricorrere all'attributo 'align', ma si deve inserirla in un capoverso centrato (es.: <p align="center"><img src="mouse.gif"></p>) oppure in una sezione centrata (es.: <div align="center"><img src="mouse.gif"></div>) o ancora più semplicemente (<center><img src="mouse.gif"></center>) .
Gli attributi 'width' ed 'height' servono ad indicare le dimensioni in pixel dell'immagine. Sono molto utili perché consentono ai browser di ridurre drasticamente il tempo che trascorre tra la visualizzazione di tutte le immagini contenute nel documento (che tipicamente richiedono più tempo) e la visualizzazione del testo. Occorre quindi cercare di indicare sempre le dimensioni delle immagini; molti programmi per la creazione di pagine HTML, quali Front Page o Netscape Composer, sono fortunatamente in grado di calcolare ed inserire automaticamente queste cifre per conto nostro.
Se agli attributi width ed height vengono forniti valori 'errati', ad esempio si scrive
che una immagine larga 200 pixel è invece larga 400, il browser allarga l'immagine fino
al valore indicato, come 'stirandola'.
Non è necessariamente un errore: ad esempio, un
metodo per ottenere delle righe colorate nello schermo consiste nell'inserire una immagine
di 1 pixel per lato, del colore desiderato, e stirarla alla larghezza opportuna.
A 'width' ed 'height' possono essere forniti anche valori percentuali. Ricollegandoci con l'esempio precedente: <img src="quadratino.gif" width="50%" height="5"> fa sì che l'immagine 'quadratino.gif' (un minuscolo quadrato rosso di appena 1 pixel per lato) si allarghi fino al 50% dello schermo, diventando, in sostanza, una riga rossa.
L'attributo 'alt' ha lo scopo di inserire una descrizione dell'immagine. Tale descrizione viene visualizzata dai browser intanto che l'immagine viene prelevata; si sostituisce alle immagini se il browser ne ha disabilitato il prelievo automatico e, infine, appare sullo schermo ogni qualvolta il puntatore del mouse si porta sull'immagine. L'attributo è molto utile anche ai browser non grafici, come quelli per MS-DOS, o quelli utilizzati dai non vedenti.
Quando una immagine è associata a un altro documento (è cioè diventata ipertestuale, vedremo in seguito come si fa) appare circondata da una cornice. L'attributo 'border' ne determina lo spessore in pixel. È possibile fare in modo che tale cornice non venga visualizzata: basta assegnare il valore zero all'attributo 'border' (es.: <img src="mouse.gif" border="0">).
Questo attributo è particolarmente utile con le immagini di grandi dimensioni, che possono richiedere molti secondi o addirittura minuti per essere prelevate. Con 'lowsrc' possiamo far sì che il browser, mentre preleva l'immagine principale, ne visualizzi un'altra, con il medesimo soggetto, ma molto più veloce da scaricare (perché magari ne è stato ridotto il numero di colori).
Abbiamo visto che con 'align' possiamo spostare l'immagine a sinistra e a destra del testo, abbiamo anche visto però che il testo è immediatamente adiacente all'immagine, in modo antiestetico. Con 'hspace' e 'vspace' possiamo determinare la distanza in pixel tra l'immagine il testo. La distanza in senso orizzontale è determinata da 'hspace' (horizontal space), quella in senso verticale da 'vspace' (vertical space). Es.: <img src="mouse.gif" align="left" hspace="10" vspace="5">.
|
il mio mouse! |
<img src=URL align=left hspace=20 vspace=30>
il mio mouse!
|