intro | lezioni | articoli | dizionario | download | e-mail |
I documenti HTML, se ben realizzati, hanno l'indubbio pregio di presentarci informazioni (aggiornabili a bassi costi) in modo chiaro e accessibile. Uno dei suoi punti di forza sta nella possibilità di impiegare la grafica. È proprio di immagini che ci occuperemo nelle prossime righe e più precisamente apprenderai come implementarle in un documento HTML
Il tag che imparerai ad usare è <IMG>. Iniziamo col dire che questo tag non richiede un corrispondente tag di chiusura, inoltre necessita di un attributo che comunichi al browser dove si trova l'immagine che si vuole visualizzare.
<IMG src="percorso/nome_immagine">
il percorso si può omettere qualora l'immagine si trovi nella stessa directory in cui è stato collocato il documento HTML.
Tutti gli altri attributi del tag <IMG> sono opzionali.
Gli attributi width e height determinano rispettivamente l'ampiezza e l'altezza dell'immagine. Il browser è in grado di visualizzare correttamente l'immagine anche senza questi parametri...
...tuttavia il tuo browser ti sarà certamente grato di questo aiuto perchè così facendo non sarà costretto a desumere da solo tali valori e potrà dedicarsi a scaricare gli altri elementi di cui è composto il documento, riducendo i tempi di attesa che, si sa, in rete sono, già di per se, abbastanza lunghi.
Molti utenti Internet disabilitano la visualizzazione delle immagini per muoversi più rapidamente tra le pagine web. Per queste persone le informazioni che potresti fornire attraverso un immagine andranno perse. C'è poco da fare...
...ma quantomeno puoi far capire queste persone cosa si stanno perdendo!
A questo scopo puoi inserire l'attributo alt="descrizione".
Al posto di descrizione si inseriscono alcune parole che descrivano cosa sia ritratto nell'immagine. In questo modo dai un'alternativa a chi non è in grado o non vuole visualizzare elementi grafici di non perdere alcuna informazione (o di informarlo su cosa sta perdendo).
L'attributo border=numero è utlizzato quando l'immagine è un collegamento ipertestuale.
In questo caso essa è circondata da un bordo (in genere blu) proprio per segnalare che l'immagine in questione è un link. Più alto è il numero che si specifica maggiore sarà lo spessore del bordo.
Su questo attributo è presente un esempio nella lezione 6 che è dedicata ai link.
L'ultimo attributo che prendiamo in considerazione è quello che determina l'allineamento dell'immagine rispetto alla riga di testo in cui dovrà essere inserita.
l'attributo è align="allineamento" dove al posto di allineamento si nserisce uno dei 5 valori possibili.
- left: l'immagine si trova a sinistra, il testo scorre a destra:
- right: l'immagine si trova a destra, il testo scorre a sinistra;
- top: bordo superiore dell'immagine allineato al bordo superiore del testo
- middle: il testo si trova in corrispondenza della metà del valore height
(più difficile da spiegare che da implementare :-) - bottom: bordo inferiore dell'immagine allineato al bordo inferiore del testo;
I formati di immagini più impiegati in rete sono gif e jpg, questi due
formati sono supportati da tutti i browser in uso, invece formati diversi, che comunque
potrebbero affermarsi in un prossimo futuro, al momento creano non pochi problemi.
Il formato GIF supporta fino a 256 colori per cui è più adatto per la creazione di
logo, disegni e qualsiasi altra cosa contenga solo testo ma non dispone di un numero
sufficiente di colori per riprodurre in modo apprezabile la maggior parte delle
fotografie.
I file JPEG possono contenere fino a 16.700.000 colori e sono più adatte per le
fotografie, mentre non si prestano bene ai testi e ai disegni.
Decidendo di inserire della grafica in un documento HTML hai due possibilità
- crei le immagini da te utilizzando un programma di grafica più o meno complesso;
- utilizzi elementi grafici creati da altri.
Se hai optato per questa seconda scelta ti suggerisco di non prelevare immagini da altri siti senza chiedere precedentemente il consenso a chi il sito lo ha realizzato. Ad ogni modo per toglierti ogni tentazione ti segnalo un paio di siti che offrono una marea di immagini da prelevare gratuitamente senza limitazioni (o quasi).
|
|
