HTML
UNITA' 5 IMMAGINI
Indice| Indietro | Avanti
Competenze: Inserire immagini in una pagina web.
Inserire un'immagine come sfondo
Contenuti: Il tag img e i suoi attributi principali.
La proprietà di stile background-image
Il tag img (come image)
Come sapete, la pagina web è composta da una sezione head (=testa) e una
sezione body (corpo).
Finora abbiamo immesso solo del testo nell'oggetto body. Ora impariamo
ad immettere anche delle immagini.
L'mmagine deve essere un file di tipo grafico, come un file .gif (adatto a disegni) o
.jpg (adatto a foto).
Per inserire un'immagine nella pagina web devi usare il tag
IMG insieme all'attributo src (= sorgente) che mostra al
browser il percorso per arrivare al file sorgente.
Guarda gli esempi seguenti:
| codice | output |
| <img src="notes.gif" /> |
 |
Se si scrive solo il nome del file (notes.gif), il browser cercherà il file
sorgente nella stessa cartella in cui si trova la pagina web |
| <img src="image/snoopy.gif" /> |
 |
Il browser cerca il file sorgente (snoopy.gif) in una cartella chiamata "image"
che si trova nella stessa cartella della pagina web. |
| <img src="../image/ola.gif" /> |
 |
I due puntini .. dicono che il file sorgente (ola.gif) è in una cartella superiore.
(Le cartelle hanno una struttura ad albero). |
| <img src="http://gifanimate.html.it/ga_img/gif-animate/Cartoni/Cartoni330.gif" /> |
 |
Il file sorgente si trova nel web. |
Gli attributi width and height (larghezza e altezza)
Per velocizzare il caricamento dell'immagine all'apertura della pagina web,
si possono aggiungere le dimensioni in pixel dell'immagine (con clik destro
sull'immagine si vedono le dimensioni nelle proprietà del file).
| <img src="notes.gif" width="55" height="50" /> |
Il browser preparerà un rettangolo di 55 per 50 pixel per inserire l'immagine.
Se avete cominciato ad usare HTML-kit per editare le vostre pagine web (ve lo consiglio!),
questo software provvede automaticamente a calcolare larghezza ed altezza dell'imagine! |
L'attributo Alt
Questo attributo è altamente consigliabile per una migliore usabilità della vostra pagina:
esso fa apparire un testo alternativo (una piccola descrizione) quando
il mouse passa sopra l'imagine. I software per i non vedenti leggono il testo alternativo
dell'immagine.
| <img src="compl3_webbino.gif" alt="HAPPY BIRTHDAY!!" /> |
 |
sorvolate l'immagine con il mouse senza cliccare: comparirà il testo alternativo |
Volete un'immagine come sfondo?
Se volete che la pagina web abbia una immagine come sfondo, la cosa migliore è
agggiungere allo stile del body la proprietà background-image
nel modo seguente:
<style>
body {background-image : url (image/reticpiccolo.gif);}
</style>
Il valore di background-image è l'indirizzo
o url dell'immagine. Se il browser non trova l'immagine all'indirizzo indicato,
utilizza come sfondo il colore di background-color.
Il file reticpiccolo.gif è questo qui:
E' un file di piccole dimensioni (rispetto allo schermo), ma viene
automaticamente ripetuto per ricoprire l'intera pagina.
Attenzione a scegliere come sfondo un'immagine non chiassosa e che permetta di
leggere agevolmente il testo che scriverete sopra!!
Non volete ripetere l'immagine di sfondo?
Aggiungete la proprietà di stile: background-repeat:no-repeat;
Esercizio: Aggiungi qualche immagine alla tua pagina web!
Da questo momento in poi chiameremo sito locale la cartella del tuo computer
dove conservi il file index.htm e sito remoto l'area di lavoro del sito
in cui hai diritto di accesso.
Ricordati che la struttura del sito locale e del sito remoto devono essere
identiche, per cui, se crei una cartella nel sito locale, ne dovrai ricreare
un'altra identica nel sito remoto
- Crea nel tuo computer (sito locale) una cartella (per esempio image) per depositare immagini.
- Vai in Internet e salva qualche immagine che ti piace nella cartella creata.
Se vuoi, puoi salvare le immagini che si trovano in questa pagina, facendo click destro
sopra l'immagine scelta e scegliendo poi salva immagine con nome.
- Inserisci le immagini scelte nel codice del file "index.htm" con l'apposito tag img
src = image/nomefile
- Se lo desideri, metti uno sfondo-immagine, con la proprietà di stile background-image.
- Salva il file modificato (nel sito locale)
- Carica il nuovo file index.htm nella tua area di lavoro (sito remoto).
- Crea anche nel sito remoto (comando Make folder) una cartella image.
- Apri la cartella image e carica tutte le immagini che hai utilizzato.
- Guarda il tuo nuovo sito.
- Scrivi un messaggio nel forum "Immagini" per avvertire che la tua pagina è pronta!