Colorare o inserire immagini nello sfondo
Volendo dare un colore di sfondo all'intero documento, scriveremo:
<BODY background='#FFFF00'> <--------- notazione esadecimale
</BODY>
oppure:
<BODY background='yellow'> <--------- parola chiave
</BODY>
ottenendo una pagina di colore giallo;
Possiamo anche sostituire background con una notazione abbreviata bgcolor.
Prima di passare alle immagini
vi ricordo che i formati supportati dall'HTML sono il "JPEG" o
"JPG" (Joint Photographic Express Group), il GIF (Graphic
Interchange Format) e infine ilPNG (Portable Network Graphic).
"JPEG"
Questo tipo di file è un formato grafico compresso che permette di gestire fino a 16,7 milioni di colori.
La caratteristica di questo tipo di formato grafico è quella di poter decidere il grado di compressione,
con la conseguente perdita di informazioni. Il Jpeg è utilizzato per lo più per fotografie cioè per quelle
immagini che necessitano di un maggior numero di dettagli.
"GIF"
Per quanto riguarda il formato Gif, esso è utilizzato per quelle immagini
di dimensioni ridotte o con un numero di colori basso visto che riesce a gestire fino a 256 colori.
"PNG"
Il PNG è l'ultimo arrivato su Internet. Il suo difetto è dovuto al fatto che
ancora non tutti i browser possono leggerlo, praticamente quelli più vecchi. Un problema questo ormai
quasi superato del tutto. Il miglioramento rispetto al formato JPEG è quello di gestire si 16,7 milioni
di colori ma con una compressione inferiore.
Abbiamo visto a sommi capi, le principali differenze tra i diversi formati usati su Internet.
Ora ci occuperemo di come fare a introdurre l'immagine nel nostro codice HTML.
Per inserire immagini di sfondo usiamo lo stesso metodo visto per lo sfondo colorato, scriveremo:
<BODY background='smile.gif'>
</BODY>
E' anche possibile scrivere solo background: smile.gif;
Per visualizzare la vostra immagine di sfondo la dovrete salvare nella stessa cartella in cui salvate il
vostro documento .html.
Oppure se avete una cartella image dovrete dare il PATH(percorso) completo per il recupero dell immagine.
<BODY background='image/smile.gif'>
</BODY>
Oppure se volete inserire un immagine non come sfondo ma solo come immagine definendo larghezza e altezza.
Il tag che ci permette di fare ciò
è <IMG>.
La sintassi corretta per implementare un'immagine è:<IMG SRC="file.jpg">.
Avrete certamente notato che al tag segue "SRC" che serve, per l'appunto a specificare il nome del file
immagine che il browser deve andare a richiamere.
Come per gli altri tag, o forse sarebbe più giusto dire tags, anche questo supporta degli attributi.
|
<img src="file.jpg" width="300">
|
L'attributo in questione serve ad impostare la larghezza dell'immagine nel caso in cui si necessitasse
di un reimpostamento delle misure espresse ovviamente in pixel.
|
|
<img src="file.jpg" height="300">
|
La differenza con "width" è che questo attributo gestisce l'altezza.
Come nel caso di "width" le misure sono espresse in pixel.
|
|
<img src="file.jpg" border="2">
|
Se vogliamo determinare, ridurre o aumentare il bordo di un'immagine, dobbiamo inserire questo attributo.
Ciò tornerà utile quando un immagine è un collegamento ipertestuale o link.
|
|
<img src="file.jpg" alt="Descrizione">
|
Infine vediamo "alt". Può capitare che qualcuno disabiliti la visualizzazione
delle immagin dal proprio browser mentre naviga in Internet per aumentare la velocità.
In questo caso, però, questa persona si perderebbe le eventuali informazioni che voi rendete
disponibili tramite le vostre immagini. Certamente questo attributo non colma questa lacuna,
ma fa si che l'utente possa avere un'idea di ciò che non sta visualizzando.
Infatti aggiungendolo come nell'esempio, al passaggio del mouse sopra la vostra immagine non
visualizzata (ma funziona anche se l'immagine è visualizzata) dopo qualche istante apparirà il
testo della descrizione.
|
