www.sitopreferito.it

Corso di HTML
Introduzione
Convenzioni
Struttura di base
Scrivere in HTML
Formattazione
Paragrafatura
Immagini
Collegamenti
Liste
Colori e Sfondo
Tabelle
Multimedia
Forms
Imagemap
Frames
Appendice A
Appendice B
Appendice C

HOME

CHAT

WEBCAM

SERVIZI

SPECIALI

CURIOSITA'

BELLEZZE

FORUM

METEO

RUBRICHE

1000LINKS

ANNUNCI GRATUITI

Il portale
della Tua zona

7. Inserimento di immagini

Generalità

Le immagini consentono di dare un impronta personale e molto accattivante del messaggio trasmesso al destinatario. In un documento HTML possono esserne inserite in quantità in maniera semplice ed agevole.

Comando <IMG>

Il comando che consente di inserire una immagine è

<IMG> che, a differenza della maggior parte dei comandi, non richiede il tag di chiusura. Sarà sufficiente scrivere

<IMG SRC="pippo.gif"> per visualizzare l'immagine di nome "pippo.gif".

Quando si parla di "immagini" si intende un formato di file che rappresenta un disegno, una foto ecc.. I classici file d'immagini conosciuti sono, ad esempio il .BMP di Windows, il .GIF, il JPG.

E' opportuno sapere che i browser, di norma, leggono senza problemi i file tipo .JPG e i .GIF. Per quanto riguarda gli altri tipi (ne potete vedere un elenco a questo link), servono degli add-on al browser che non tutti hanno e quindi, è conveniente inserire nei documenti HTML solamente immagini di tipo .GIF o .JPG per l'in

Parametri di <IMG>

I parametri del comando IMG sono i seguenti, e vanno inseriti tutti dopo il tag, prima della parentesi > di chiusura:

  • SRC="nome_file_grafico"
    Indica il nome ed il percorso dell'immagine da visualizzare.
  • LOWSRC="nome_file_grafico_a_bassa_risoluzione"
     Indica un file grafico di piccole dimensioni, da caricare prima dell'immagine con SRC. E' utilizzato quando l'immagine da visualizzare è  molto grande e si vuol dare un'idea, all'utente, di ciò che vedrà,  così da lasciargli la scelta di attendere i tempi di caricamento oppure andare altrove.
  • BORDER="x"
    Indica la dimensione in pixel dell'eventuale bordo da visualizzare intorno all'immagine. Se non è specificato "x" l'immagine non avrà bordo.
  • ALIGN="where"
    Allinea l'immagine rispetto al testo visualizzato. Con LEFT, sia allineeràa   sinistra, con RIGHT a destra e con CENTER al centro. Ci sono comunque  altre possibilità di allineamento.
  • ISMAP
    indica che l'immagine visualizzata è una mappa di coordinate: clickandoci  sopra il computer rileva le coordinate del mouse ed è in grado di inviarle al server che può elaborarle per individuare, ad esempio,  una nuova pagina da inviare.
  • WIDTH="xxx"
     Specifica una larghezza predefinita in pixel dell'immagine.
  • HEIGHT="xxx"
     Come per il precedente, ma relativamente all'altezza
  • VSPACE="xx"
     Indica uno spazio da lasciare libero sopra e sotto l'immagine.
  • HSPACE="xx"
     Indica uno spazio da lasciare libero a destra e a sinistra dell'immagine.
  • ALT="nome_alternativo"
     Nome visualizzato nel caso in cui il browser non mostra le immagini o sono state disabilitate.Dovrebbe essere ugualmente esplicativo dell'immagine  che sarebbe stata visualizzata.
  • USEMAP
     per utilizzare, sull'immagine, una mappa locale.

Esempi

Vediamo come un semplice comando consente di inserire un'immagine allineata con il testo inserito con l'istruzione

<IMG SRC="citta.jpg" ALIGN="RIGHT">
 

 

 

 

Come secondo esempio si può visualizzare nuovamente la stessa immagine con gli attributi:

<IMG SRC="citta.jpg" BORDER="10" WIDTH="180" HEIGHT="80">Qui c'è un'immagine di prova

che la formattano a dimensioni obbligate di 180x80 punti mostrando un bordo di 10 punti intorno. L'utilizzo dei parametri WIDTH ed HEIGHT comporta naturalmente una riscalatura dell'immagine originaria, indipendentemente dalla sua effettiva risoluzione. Se non volete nessun bordo potete inserire

BORDER="0". Se non viene specificato altrimenti tramite il desiderato allineamento, l'immagine viene inserita nel testo esattamente nel punto in cui appare il comando IMG, disponendo il testo ai suoi lati. Nel caso in cui il file dell'immagine non sia disponibile o ci sia un errore nel listato HTML, il browser può cercare di avvertire che c'è un'immagine non riconosciuta visualizzando:

 

Il parametro ISMAP comunica al browser di controllare le coordinate del mouse quando posizionato sull'immagine associata e di attivare dei differenti link a seconda della posizione. Difatti, sul server, o sul disco locale, deve essere presente un apposito "programma" che interpreta la posizione del mouse e chiama automaticamente i link impostati.

la Questo, dotato di un apposito programmino, è in grado di gestire le coordinate   Naturalmente per visualizzare le immagini è necessario usare un browser grafico. Se questo non è il caso ed il vostro browser è di tipo testuale, allora conviene inserire il parametro ALT: quando il browser testuale incontra l'istruzione per l'immagine la salta cercando direttamente l'ALT e visualizzando il testo ivi contenuto.   Nel nostro caso, ad esempio, potremmo inserire: <IMG SRC="citta.jpg" ALT="Immagine immagine di una città"> per permettere, anche a chi non dispone di un browser grafico, di avere informazioni su tutti gli elementi della pagina.  L'allineamento delle immagini è molto versatile per creare effetti particolari.

Ad esempio, con le seguenti istruzioni, si può visualizzare un testo all'interno di due immagini, semplicemente allineando un'immagine a destra ed una a sinistra:

<HTML>

    <HEAD>

    </HEAD>

    <BODY>

 <IMG SRC="citta.jpg" ALIGN="RIGHT" height="50" WIDTH="100">

<IMG SRC="citta.jpg" ALIGN="LEFT" height="50" WIDTH="100">

<CENTER>TESTO ALLINEATO AL CENTRO DELLE DUE IMMAGINI </CENTER>

   </BODY>

</HTML>

 

TESTO ALLINEATO AL CENTRO DELLE DUE IMMAGINI

I due comandi <IMG SRC=""...> inseriscono le due immagini una allineata a DESTRA e l'altra a SINISTRA. Quanto segue viene posto nello spazio al loro interno ed in questo caso è il testo "testo allineato al centro delle due immagini" ad essere inserito nello spazio lasciato libero tra le due immagini. Il testo viene allineato al CENTRO dello spazio a sua disposizione tramite il comando <CENTER> (se non ci fosse il testo sarebbe allineato sulla SINISTRA, lungo il margine dell'immagine sinistra).   Quando si specifica un comando ALIGN="" all'interno di un tag <IMG ...> tutto ciò che segue il tag <IMG ...> viene posto accanto all'immagine fino al riempimento dello spazio a disposizione. Se non volete che ciò accada dovete usare il tag <BR CLEAR="..."> che cancella l'allineamento specificato nell'<IMG ...>.

 

PRIVACY POLICY | NOTE LEGALI

Home | Chat | Bellezze | Forum | Webcam | Meteo | Servizi | Rubriche | Speciali | 1000Links | Curiosità | Annunci Gratuiti

 

Per informazioni o suggerimenti sulla realizzazione del sito scrivere a webmaster@sitopreferito.it
Copyright (c)2002-2004 Tecno Idee srl
Per la pubblicità su questo sito:
info@sitopreferito.it

 

I loghi, le immagini e i marchi riportati nel sito e nelle vetrine sono di proprietà dei rispettivi proprietari
E' vietata la riproduzione totale o parziale del sito