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:

codiceoutput
<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" /> snoopy (1K) 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" /> ola (16K) 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" /> 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!!" /> 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:

reticpiccolo (16K)
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

  1. Crea nel tuo computer (sito locale) una cartella (per esempio image) per depositare immagini.
  2. 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.
  3. Inserisci le immagini scelte nel codice del file "index.htm" con l'apposito tag img src = image/nomefile
  4. Se lo desideri, metti uno sfondo-immagine, con la proprietÓ di stile background-image.
  5. Salva il file modificato (nel sito locale)
  6. Carica il nuovo file index.htm nella tua area di lavoro (sito remoto).
  7. Crea anche nel sito remoto (comando Make folder) una cartella image.
  8. Apri la cartella image e carica tutte le immagini che hai utilizzato.
  9. Guarda il tuo nuovo sito.
  10. Scrivi un messaggio nel forum "Immagini" per avvertire che la tua pagina Ŕ pronta!


Ludovica Battista

Indice| Indietro | Avanti