Finora abbiamo visto come inserire e formattare il testo all’interno
delle nostre pagine Web. Naturalmente possiamo inserire anche delle immagini:
diagrammi e grafici, fotografie, e in genere immagini create con un programma
di elaborazione grafica (come The GIMP, Photoshop
o Paint Shop Pro).
I formati ammessi nel Web sono sostanzialmente tre:
- GIF
(Graphic Interchange Format). Le GIF sono immagini con non
più di 256 colori (dunque con colori piatti e senza sfumature), come
grafici o icone
- JPG:
è l’acronimo del gruppo di ricerca che ha ideato questo formato
(il Joint Photographic Experts Group), idoneo per le immagini
di qualità fotografica
- PNG
(Portable Network Graphic). Il PNG è un tipo di immagine
introdotto abbastanza di recente, elaborato dal W3C
per risolvere i problemi di copyright del formato GIF (che è appunto
proprietario); tuttavia oggi il PNG è letto oramai da tutti i browser
e offre alcune caratteristiche che gli altri formati non hanno (come il supporto
al canale
alfa, caratteristica questa non ancora perfettamente supportata da ogni
browser).
Non provate dunque a inserire un file “.psd” (è il formato
nativo di Photoshop) all’interno della vostra pagina HTML: con grande probabilità
il browser non vi caricherà il file che vorreste includere (dovete infatti
prima convertire il file in uno dei formati sopra-indicati).
Inoltre è importante ricordare che il codice HTML fornisce delle indicazioni
al browser su come visualizzare il testo e le immagini - ed eventualmente i
video e i suoni - all’interno della pagina: il testo (come abbiamo visto)
è scritto direttamente nel file HTML, le immagini invece sono caricate
insieme alla pagina. Attenzione dunque a non inserire immagini troppo pesanti
(ricordatevi di ottimizzare sempre i file); bisogna evitare inoltre di sovraccaricare
la pagina con troppe immagini. Allo stato attuale dell’arte infatti la
maggior parte degli utenti (e non soltanto quelli italiani) naviga ancora con
un modem analogico da 56 Kbs: inserire troppe immagini significa dunque creare
pagine lente da caricare. Per ottenere un sito web dalla grafica accattivante,
spesso è sufficiente giocare con i colori dello sfondo e delle scritte.
La sintassi per inserire un’immagine è:
<img src="miaImmagine.gif">
dove:
- img significa image, cioè immagine
- src significa source, cioè origine
Il tag è un tag “vuoto”, che non ha la necessità di
essere chiuso.
Ecco ad esempio come inserire il logo di HTML.it in una pagina dallo sfondo
blu (si presuppone che il logo si trovi nella stessa cartella del file HTML):
<img src="logo.gif"> |
 |
Resta valido il discorso sui
percorsi relativi ed assoluti. Avremo ad esempio:
<img src="../img/logo.gif">
<img src=" http://www.html.it/img/logo.gif ">
Dal momento che il browser normalmente non sa quali siano le dimensioni dell’immagine,
finché questa non sia caricata completamente, è un’ottima
abitudine quella di indicare già nel codice la larghezza (width)
e l’altezza (height) dell’immagine: in questo modo
si evita di vedere la pagina costruirsi man mano che viene caricata, poiché
stiamo dando al browser un’idea dell’ingombro. Ad esempio:
<img src="logo.gif" width="224" height="69">
L’attributo alt è utile per specificare il testo
alternativo (alternative text), fintanto che l’immagine
non viene caricata o nel caso in cui non lo sia affatto:
<img src="logo.gif"
alt="HTML.it"
width="224" height="69">
|
 |
L’attributo alt è di estrema utilità per
rendere il
sito accessibile a tutti gli utenti: i disabili che non sono in grado di
vedere nitidamente le immagini sullo schermo potrebbero avere delle difficoltà,
nel caso in cui l’attributo alt non sia specificato. Gli ipo-vedenti e
i non-vedenti sono infatti in grado di comprendere il contenuto delle immagini
grazie a dei software appositi (gli screen reader) che “leggono”
lo schermo tramite un programma di sintesi vocale. Non specificare il testo
alternativo significa rendere impossibile la navigazione.
Nel caso in cui la spiegazione dell’immagine sia particolarmente lunga,
è possibile espandere la descrizione sintetica - fornita tramite l’attributo
"alt" - grazie ad un altro attributo: si tratta di longdesc
(long description), che permette di specificare un file con
una spiegazione estesa dell’immagine. Ecco la sintassi:
<img src="logo.gif" alt="HTML.it" longdesc=“descrizione.html“
width="224" height="69">
Nell’esempio allegato è possibile visualizzare il codice di una pagina con
la descrizione estesa dell’immagine. Nel caso in cui si utilizzi questo attributo è anche buona norma utilizzare un link esplicito alla pagina della descrizione.
longdesc dovrebbe essere utilizzato soprattutto nel caso in cui
si usino delle immagini mappate (argomento che analizzeremo in seguito), in modo
da fornirne una spiegazione esauriente in ogni contesto.
In realtà l'attributo alt non serve, come molti credono,
a visualizzare un etichetta esplicativa dell’immagine nel caso in cui
il cursore del mouse si soffermi sopra essa: questo semmai è un effetto
collaterale che si verifica con Internet Explorer. L’attributo corretto
per far visualizzare un testo che commenti l’immagine è infatti
title:
<img src="logo.gif"
title="HTML.it"
alt="HTML.it"
width="224" height="69">
|
 |
È inoltre possibile specificare la grandezza (in pixel) del bordo attorno
all’immagine:
<img src="logo.gif"
border="3"
width="224" height="69">
|
 |
Si noti che i link lasciano sempre di default un bordo di un pixel attorno all’immagine (il colore sarà quello espresso nel body dall’attributo link, oppure quello default – quindi blu – se non specificato altrimenti):
<a href="http://www.html.it" target="_blank"> <img src="logo.gif"
width="224" height="69"> </a>
|
 |
Dunque, nel caso dei link se non si desidera avere i bordi, sarà necessario
impostarli a “0”:
<a href="http://www.html.it" target="_blank"> <img src="logo.gif" border="0"
width="224" height="69"> </a>
|
 |