Illustrare
un file HTML
aggiungendo delle immagini non è più difficile che farlo con un
documento di Word.
Basta posizionarsi nel punto dove si vuole
collocare la figura, cliccare sull'icona Image della barra degli
strumenti, aprire la finestra di scelta dei file cliccando
sull'iconcina gialla della cartella e selezionare il file
corrispondente all'immagine che si desidera inserire.
L'unica
differenza rispetto ad un desk top publisher
tradizionale è
che dopo aver selezionato il file ci verrà chiesto se vogliamo
introdurre un testo alternativo (alternative text),
da
visualizzare nel caso in cui l'immagine non fosse disponibile o fosse
disabilitata la visualizzazione dell'immagine.
Il testo
alternativo aveva importanza negli anni '90 quando i modem usati per
accedere ad Internet erano lenti. Poiché scaricare una pagina Web
piena di figure poteva richiedere diversi minuti, gli utenti
disabilitavano lo scaricamento automatico delle immagini (i browser
consentono di farlo tutt'oggi) e navigavano in modalità
testuale.
Quando capitavano su di un sito che ritenevano
potesse essere interessante scaricavano manualmente le figure
una ad una.
Il posizionamento delle immagini all'interno dei file
HTML è generalmente un po' più complesso che con i DTP. Supponendo
di utilizzare KompoZer, si clicca
sull'immgine
visualizzata nella modalità Preview per aprire il popup
menu e si selezionerà Image Properties.
La finestra di
dialogo prevede quattro linguette: Location, Dimensions, Appearence e
Links.
La
prima (Location)
consente di scegliere l'immagine e il testo alternativo e di
cambiarli eventualmente.
L'opzione Dimension conente di modificare
la grandezza dell'immagine visualizzata specificandone le
dimensioni,. In alternativa si può ridimensionare l'immagine con il
mouse tirandola per gli angoli.
La linguetta Appearence consente
di controllare il posizionamento della finestra all'interno della
pagina sia per quanto concerne la sua collocazione che l'ampiezza dei
bordi (Solid Border). Impostando un ampiezza dei bordi diversa da
zero attorno ala finestra appariranno dei bordi neri.
Per
cambiare il colore occorre cliccare sullo strumento di selezione dl
colore di foreground (quadratini
sovrapposti a destra
della casella di selezione del font) e selezionare il colore
desiderato (ad esempio nell'immagine qui sopra si è scelto il
giallo).
Ma come i lettori avranno immaginato la linguetta più
interessante è l'ultima, quella dei Links che
consente di
associare un collegamento ipertestuale all'immagine in modo tale che
se si clicca sulla stessa il browser salta al rimando
indicato.
Una procedura alternativa per associare un link ad una
immagine consiste nel selezionare la figura cliccandoci sopra in
modalità Preview, e quindi cliccare sull'icona Link
della
barra degli strumenti, procedendo poi come di consueto.
Dal punto di vista del programmatore per introdurre un'immagine (priva di link) basta introdurre un singolo TAG <img>
<img style="width: 200px; height: 200px;" alt="testo_alternativo" src="immagine_selezionata.jpg">
Gli argomenti width e height specificano le dimensioni dell'immagine (se è più grane o più piccola sarà riscalata). L'argomento alt consente di introdurre il testo alternativo e l'argomento src di specificare la URL o l'indirizzo corrispondente al file in cui l'immagine è memorizzata.
Volendo associare un link all'immagine basterà includere il TAG <img>, di cui sopra, in una normale coppia di TAG <a> </a>
<a href="riferimento.html"><img ... alt="Link al file riferimento.html" src="immagine_selezionata.jpg"></a>
In maniera analoga dall'interno di una pagina HTML si può fare riferimento a file multimediali di vaio tipo, basta ricorrere alla consueta coppia di TAG <a></a>, ad esempio:
<a
href="bip.wav">Bip</a>
Bip
<a href="video.mp4">Video</a>
Video
A differenza di quanto accade con le immagini, l'esecuzione dei file multimediali potrebbe richiedere la presenza di un programma esterni (player) o addizionali (plugin).
Sapendo che vi sono svariati formati di immagini: BMP, GIF,
JPG,
PCX, PNG, TIF, TGA, ci si potrebbe chiedere se alcuni sono più
adatti di altri per illustrare una pagina Web e
perché?
Prima
di tutto occorre precisare che per formato di immagine si
intende il modo in cui è rappresentata la stessa all'interno del
file e non la "grandezza" della stessa, ovvero lo
spazio occupato dalla figura nella pagina HTML.
Poiché le
immagini richiedono tipicamente molto spazio di memoria , come i file
audio e i filmati del resto, difficilmente si archivieranno
le
immagini nel loro formato originale ma sempre in formato compresso
per risparmiare spazio.
Per quanto concerne i formati compressi bisogna distinguere fra compressione reversibile e compressione irreversibile.
La compressione reversibile genera una rappresentazione dell'immagine più piccola di quella originale, che può essere usata per compattare i file quando debbono essere archiviati o trasmessi ma consente sempre di ricostruire perfettamente l'immagine originale riespandendo il file.
Te tecniche di compressione irreversibile consentono di comprimere notevolmente di più rispetto alle precedenti ma ad un prezzo: non garantiscono la perfetta ricostruzione dell'immagine originale.
Ad esempio l'immagine sottostante è stata compressa con un algoritmo irreversibile.
Le immagini in formato BMP sono tipicamente non compresse per
cui
occupano molto spazio. Non sono generalmente l'ideale per le
applicazioni considerate.
Il formato TIF può essere sia non
compresso che compresso. Quest'ultimo, in particolare, è l'ideale
per la rappresentazione di immagini in bianco e nero o in scala di
grigi, per cui si adopera tipicamente per questo scopo quando è
richiesta una compressione reversibile.
La caratteristica
peculiare del formato GIF per quanto concerne la costruzione di siti
Web è la possibilità di creare delle
immagini
animate.
Il formato JPG che si basa su di uno schema di
compressione irreversibile consente di ottenere delle
rappresentazioni fortemente compresse per cui è il formato
d'elezione quando si tratta di scaricare delle Immagini da
Internet.
Il formato PNG si presta ad un impiego analogo a quello
del JPG . A differenza del precedente è completamente libero da
brevetti per cui viene preferito dai fautori dell'Open Source.
Terminiamo la lezione
ricordando che le
procedure sopra illustrate non esauriscono i possibili impieghi delle
immagini nelle pagine HTML,c'è infatti anche la possibilità
di
ricorrere alle cosiddette client-side image maps
associando
ad aree di una fotografia o di un disegno delle azioni, tipicamente dei
rimandi (link),
creando dei quadri
sinottici.
Tali tecniche saranno oggetto di successive lezioni.