IMMAGINI
Cosa sarebbe una pagina web senza immagini? Impossibile anche solo pensarlo. Questo elemento è senza alcun dubbio di primaria importanza. I formati supportati dal www sono diversi e variano a seconda del browser adoperato, diciamo che .gif .jpg e .png sono quelli riconosciuti ufficialmente da tutti i browser e non si dovrebbero usare formati diversi da questi.
Queste immagini hanno l'estensione jpeg o jpg. Sono immagini di qualità fotografica (65000 a 16000000 di colori e più). Sono immagini compresse e di solito occupano per la memorizzazione uno spazio inferiore a quello occupato dal PC quando le visualizza.
Esempio :
un
immagine di dimensioni 320x240 pixel con una risoluzione di 16
bit
ogni pixel dell'immagine con 16 byte richiede 2 byte
calcolo : 320x240x16 = 1288800 bit cioè circa 1 MB.
Ma come jpeg compressa, può arrivare ad occupare solo 100 KB.
Essendo compressa è leggera da trasmettere, quando viene visualizzata viene decompressa ed il risultato è l'immagine originale. L'algoritmo di compressione è variabile, più si riduce e meno qualità si avrà nell'immagine decompressa.
Solitamente hanno estensione .gif o .giff. Utilizzano al massimo 256 colori e si basano su una palette (una tavolozza a colori, da cui si scelgono quelli usati). Ovviamente meno colori si utilizzano e più leggera sarà l'immagine. Un'altra caratteristica importante è che si possono animare. La tecnica e semplice e si possono usare anche software free che si trovano in rete. Si possono rendere alcuni colori trasparenti così da poter adattare l'immagine con qualsiasi sfondo.
Nasce dopo il GIF. Non ha limiti nella quantità di colori memorizzati.
Deriva da PNG e rappresenta per questo la GIF animata.
formato grafico privo di compressione. L'immagine è inalterata ma le sue dimensioni possono essere esagerate. Sconsigliato l'uso nelle pagine web e dove bisogna caricare le pagine velocemente.
Formato diffuso, di proprietà adobe, usato per gli scambi scanner-stampanti, dato che sono flessibili all'aggiunta di informazioni.
Formato usato da fotoshop (Adobe), memorizza elementi e layer che compongono l'immagine. Usato da professionisti grafici, ma sconsigliato per le pagine web a causa delle sue dimensioni.
Formato grafico vettoriale, sempre di Adobe, nasce per il web, può contenere animazioni e informazioni interattive. Sfrutta un sistema di compressione che non può essere modificato.
E' il formato vettoriale standard. L'immagine è costruita con formule matematiche, quindi si possono allargare o rimpicciolire a piacimento senza perdere in qualità. Le dimensioni sono ridotte. Indicato per rappresentare forme geometriche o testo.
Consigli : per evitare di rallentare il caricamento delle pagine, bisogna usare immagini di piccole dimensioni. Per esempio si può rendere l'immagine linkabile alla propria immagine più grande. L'obiettivo è rendere le pagine veloci e fornire i dettagli migliori a richiesta.
Il tag per inserire un'immagine è molto semplice:
<img>
L'elemento <img> serve per richiamare una immagine grafica, ma da solo non serve a nulla, necessita di diversi attributi di cui almeno uno obbligatorio: src. Questo tag non necessita del relativo tag di chiusura.
<img
src="percorso/nomeimmagine.jpg">
In
questo modo potremo inserire tutte le immagini che vogliamo. Il
tag <img può essere adoperato anche all'interno
del tag <a href> (ancora o link) e potrà così
essere cliccato come un normale link formato da testo.
Gli
attributi
associabili a questo tag:
align, alt, border, width, height, hspace, src, title, usemap, vspace, width
Si inseriscono lasciando uno spazio vuoto fra la scritta img e la sua chiusura > . Gli attributi possono essere più di uno e specificati uno di seguito all'altro.
align=" " indica l'allineamento, può essere left, right, top, text, top, middle, absmiddle, baseline, bottom, absbottom. Not supported in HTML5. Deprecated in HTML 4.01.
alt=" " indica le parole che appariranno con il passaggio del mouse.
border=" " indica il valore del bordo partendo da 0 (senza bordo). Not supported in HTML5. Deprecated in HTML 4.01.
width=" " indica la larghezza in unità di misura (es. px).
height=" " indica l'altezza in unità di misura (es. px).
vspace=" " indica la distanza in verticale dall'oggetto sopra (anche il bordo.). Not supported in HTML5. Deprecated in HTML 4.01.
hspace=" " indica la distanza in orizzontale dall'oggetto a fianco (anche il bordo). Not supported in HTML5. Deprecated in HTML 4.01.
IMPORTANTE:
Se
un'immagine non viene visualizzata può dipendere da due
motivi:
1-
L'immagine non è stata inserita in memoria.
2-
Il nome dell'immagine non è stato scritto correttamente.
Attenzione alle maiuscole!! .gif non è uguale a .GIF
src
L'attributo src (source)
è indispensabile per l'elemento img, senza questo non
funzionerebbero neppure tutti gli altri. Permette di specificare il
nome dell'immagine completo della sua estensione da visualizzare
quando questa si trovasse nella stessa cartella in cui è
presente la pagina web che la richiama. E' possibile specificare
anche percorsi (path) fatti da cartelle (directory) e/o sottocartelle
(subdirectory) compresi gli URL assoluti richiamanti l'immagine da
altri siti.
<img src="nome_immagine.jpg">
<img src="nome_cartella/nome_immagine.jpg">
<img src="http://www.nome_sito.it/nome_immagine.jpg">
align
L'attributo align permette
di specificare l'allineamento dell'immagine rispetto alla riga di
testo successiva, i valori ammessi
sono: left, right, top, middle, baseline e bottom.
I due valori principali sono left e right e fanno si che l'immagine
diventi di tipo flottante, vediamo come:
<img src="topolino.jpg" align="right"> testo ...........
<img src="topolino.jpg" align="left"> testo ...........
Consiglio: meglio usare una dichiarazione di style, in linea o su foglio esterno creando una classe o un identificatore e richiamare questo dal tag img usando la proprietà float:
img { float: left; }
valori per float sono: left, right, none, inherit.
<img src="tarta.jpg" align="top"> testo ...........
Allinea il testo che segue l'immagine con la parte superiore dell'elemento più alto nella riga.
<img src="tarta.jpg" align="middle"> testo ...........
Allinea la linea di base della riga corrente con la parte centrale dell'immagine.
<img src="tarta.jpg" align="bottom"> testo ...........
Allinea il testo che segue l'immagine con la parte inferiore dell'elemento più basso nella riga di testo.
Il
contorno immagine è stato evidenziato volutamente per meglio
risaltare il tipo di allineamento. L'immagine infatti comprende anche
eventuali zone trasparenti.
Alcuni attributi sembrano gli
stessi di altri, è vero, ma ognuno svolge una funzione
differente. L'importante è farsi un'idea di cosa succede,
ognuno di noi poi adopererà quello che riterrà più
adatto alle proprie esigenze.
Consiglio: meglio usare una dichiarazione di style, in linea o su foglio esterno creando una classe o un identificatore e richiamare questo dal tag img usando la proprietà vertical-align:
img { vertical-align: top; }
valori per vertical-align sono: baseline, middle, top, super, sub, text-top, bottom e text-bottom
alt
L'attributo alt (alternativa
alla grafica), permette di specificare un testo per quei browser non
grafici o nel caso in cui l'immagine non fosse presente da dove viene
richiamata. Si
usa per descrivere l'immagine e non va confuso con title spiegato
sotto anche se il browser IE lo gestisce come title. Il testo
apparirà soltanto nel caso in cui l'immagine non fosse
presente o non venisse caricata, per questo motivo
l'attributo alt diventa
obbligatorio ai fini di una validazione del W3C.
<img src="nome_immagine.jpg" alt="Questa è una tartaruga">
Ho volutamente tolto l'immagine e come potete vedere al suo posto c'è il testo alternativo immesso con l'attributo alt.
title
L'attributo title (titolo),
permette di specificare un testo che descriva l'immagine, il testo è
visibile nel momento in cui si porta il cursore del mouse
sull'immagine. Per certi versi potrebbe sembrare simile ad alt visto
sopra ma la differenza è che viene mostrato sempre e non solo
nel caso in cui mancasse l'immagine.
<img src="topolino.jpg" title="Effetto titolo">
border
L'attributo border permette
di specificare lo spessore del bordo intorno all'immagine. Risulta
utile impostare border="0" quando l'immagine fa parte di un
collegamento (link o ancora) e non si vuole visualizzare quel bordino
azzurro di default tipico delle immagini facenti parte di un link.
<img src="tarta.jpg" border="3">
Consiglio: meglio
usare una dichiarazione di style, in linea o su foglio esterno
creando una classe o un identificatore e richiamare questo dal tag
img usando la proprietà border:
img { border: 3px solid #ff0000; }
Per non avere un bordo sulle immagini link si usa border: none. E' possibile specificare il tipo di bordo, per esempio solid o anche il colore, per esempio #ff0000.
vspace hspace
Gli attributi vspace e hspace vengono adoperati nelle immagini flottanti, cioè quelle immagini allineate con left e right e servono ad impostare rispettivamente degli spazi verticali ed orizzontali (vertical space ed horizontal space) fra il testo e l'immagine stessa, ed anche fra l'immagine e la sua cornice. Un esempio chiarirà sicuramente meglio:
<img src="tarta.jpg" hspace="25">
<img src="tarta.jpg" vspace="25">
<img src="tarta.jpg" hspace="25" vspace="25">
Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno usando la proprietà float insieme a quella padding:
{ float: left; padding: 25px 10px 35px 5px;}
Avendo il pieno controllo sui quattro lati in modo indipendente grazie alla proprietà padding
width height
Gli attributi width e height vengono adoperati per specificare le dimensioni orizzontali e verticali delle immagini; se omessi il browser impiegherà più tempo per calcolare l'area sulla quale disporre eventuale testo in attesa del caricamento dell'immagine. Per questo ed altri motivi conviene impostare sempre questi valori, visto poi che sono noti a priori. Si possono impostare anche valori diversi da quelli reali nel caso in cui si volesse adattare l'immagine a certe dimensioni, comprese eventuali distorsioni.
Cliccando con il tasto sinistro del mouse sull'immagine, si apre una finestra con un elenco di menù, cliccare in proprietà (di solito è l'ultima in fondo) si apre una finestra come quella sotto
che
fornisce le dimensioni originali dell'immagine.
<img src="topolino.jpg" width="177" height="284">
Evitate di usare immagini giganti da rimpicciolire poi facendo uso di width height, questi due attributi devono riportare le misure esatte e non quelle che noi avremo voluto. Se vi servono immagini ridotte o ingrandite, adoperate un programma di grafica. Il valore espresso in percentuale, è riferito al box che lo contiene, in mancanza di box fa riferimento allo schermo. Esempio: width=”100%” height=”100%” ingrandisce l'immagine a tutto schermo.
Consiglio, è preferibile usare questi attributi all'interno dei fogli di style.
{ width: 114px; height: 75px; }
Con i CSS è possibile esprimere le dimensioni anche in em o in percentuale
usemap
L'attributo usemap viene
adoperato per indicare che l'immagine è una mappa d'immagine
lato client. Cosa significa mappa di immagini? E' possibile
suddividere un'immagine in diverse aree tipo una mappa, da qui
appunto il nome. Associare ad ognuna di queste aree la possibilità
di richiamare un link diverso. In pratica la stessa immagine usata
come link è in grado di richiamare più links diversi a
seconda del punto in cui viene cliccata. Se l'argomento usemap inizia
con un simbolo # si assume che la descrizione della mappa si trovi
nello stesso documento in cui si trova il tag img; Risulta possibile
avere la definizione della mappa anche su un file di testo separato,
in questo caso il suo nome deve precedere # come da secondo esempio.
<img
src="tarta.jpg" usemap="#tartaruga">
<img
src="tarta.jpg" usemap="map.htm#mappa">
Nell'esempio
il codice utilizza la mappa descritta come mappa1 in map.htm,
per il file di immagine tarta.jpg
Le aree attive dell'immagine
vengono descritte adoperando i tags <map> e <area>
<map>...</map>
L'elemento map descrive
ciascuna delle aree dell'immagine a cui è stata assegnata una
mappa, ed indica la posizione del documento da scaricare quando viene
attivata l'area definita. Questo tag necessita del relativo tag di
chiusura </map>
<map name="nome">
<area
[shape="forma"] coords="x,y,..."
[href="riferimento"] [nohref] >
</map>
dove:
nome specifica il nome della mappa in modo che <usemap> possa fare riferimento ad essa.
forma fornisce
la forma dell'area specificata es. rect per
rettangolo. Nel caso si omettesse l'attributo shape viene
assunto per default shape="rect",
le altre forme sono circle e poly.
L'attributo coords fornisce
le coordinate della forma utilizzando pixel dell'immagine come unità.
Per un rettangolo le coordinate vengono fornite: - sinistro-alto e
destro-basso -
L'area rettangolare definita comprende l'angolo inferiore destro specificato, se per esempio si volesse specificare l'intera area di una immagine 100 x 100 pixel le coordinate sarebbero:"0,0,99,99" (notare che la coordinata in alto-sinistra è 0,0).
href richiama il link ad esso associato mentre nohref indica che eventuali click fatti in questa zona dell'immagine non richiameranno alcun link.
<area>
l'elemento area specifica
le diverse aree dell'immagine, nel caso in cui due aree si
intersecano quella che appare per prima nella definizione avrà
prevalenza. Questo tag non necessita del relativo tag di chiusura.
Vediamo un esempio completo per riassumere il tutto:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" title="Saturno" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" title="Mercurio" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" title="Venere" href="venus.htm">
</map>
prova a cliccare sui vari pianeti (immagine 145x126)
Consiglio: Non so bene se funzioni con tutti i browser, alcuni infatti supportano solo rect e non circle e poly. Questa spiegazione ha il solo scopo di illustrare il funzionamento di una immagine suddivisa in mappa. Per la sua realizzazione nessuno ricorre ai comandi manuali. Programmi in grado di generare mappe da un'immagine ce ne sono moltissimi. Esistono anche editors HTML in grado di generare automaticamente codice per mappe cliccabili, sarà sufficiente tracciare le aree da cliccare allo stesso modo di come si disegna con un programma di grafica.