Dicas Html - Trabalhando com imagens
Autor: Everton Pinto | Publicado: 2011-03-20T19:43:00-07:00

 A maioria da imagens que você encontra na Web são GIF ou JPG:         -         gif: pode ser animado ou não, permite fundos transparentes,  qualidade razoável, utilizada mais para imagens tipo desenho ou mapa  (traços ou vetores).&nbsp;-         jpg: não pode ser animado, nem pode ter fundo transparente, pode  ter ótima qualidade e ser leve, utilizado mais para fotos.&nbsp;


       A tag &lt;img&gt; não possui tag de encerramento, mas possui vários atributos, sendo o principal o atributo: "src" que especifica o local onde a imagem está localizada.      &lt;img src=”[caminho] [nome da figura]“&gt;
                           &nbsp;Dica: Quer escolher umas imagens bem legais para seu trabalho?
www.corbis.com  - aqui você pode se cadastrar gratuitamente e ver as imagens em tamanho  grande sem a marca d'água da empresa. Olhe no rodapé da página  principal que tem um link para o site em português. 
www.fotosearch.com.br - é um mega banco de imagens que busca por outros bancos, mas você corre o risco de se apaixonar por uma imagem muito cara... 
www.google.com.br - é o google sim, mas direto na aba "imagens". Também tem de tudo, mas sabendo garimpar, tem coisa boa. 
Agora, para "pegar" uma imagem, basta ir com o mouse sobre a  "vítima" clicar com o botão contrário do mouse e escolher a opção  "salvar imagem como...". Então escolha nossa pasta "figuras" e salve a  imagem dentro dela. Mude apenas o nome da imagem e o local, já que,  geralmente, o tipo do arquivo está correto.
Se você escolheu um gif animado para salvar, espere ele completar  um ciclo completo antes de clicar com o botão contrário e escolher a  opção "salvar imagem como...". Caso contrário ele salva apenas a  primeira imagem sem a animação. Verifique também se ao salvar aparece a  opção "gif" na caixa "salvar como tipo".&nbsp;
      Uma dica muito importante é com relação ao tamanho das imagens.  Nunca use imagens muito grandes (altura e largura). No geral isto  significa que o peso em kbytes também é grande. Imagens para internet  devem ter resolução de 72 dpi e ter no máximo 20kb de tamanho. Imagens  de fundo as vezes ultrapassam esta marca, mas evite estourar os 50kb.       Mas se você quiser, pode usar estas figuras:
      ......      Salve as duas primeiras na pasta "aula6" e a última na pasta  "aula6/imagem". Mantenha o nome e o tipo da imagem, assim você  poderá trabalhar com estas mesmas referências nos nossos exercícios.       &nbsp;       - Mais atributos das imagens – width e height - largura e altura da imagem. 
Cuidado para não tirar a imagem da proporção!       se você pretende trabalhar com pixels:
&lt;img src=”figura.jpg” width=”30” height=”10”&gt;        se você pretende trabalhar com porcentagem:
&lt;img src=”figura.jpg” width=”50%” height=”50%”&gt;       &nbsp;       - Para criar um espaçamento ao redor da imagem, use o atributo "vspace" (vertical) e "hspace" (horizontal).       &lt;img src=”figura.jpg” vspace=”10” hspace="30"&gt;
Isso produz um espaçamento superior e inferior de 10 pixels e um  espaçamento lateral (tanto à direita quanto à esquerda) de 30 pixels.      &nbsp;       - Também dá para alinhar a posição da imagem com relação ao que vem depois dela, que pode ser um texto ou outra imagem.        &lt;img src=”figura.jpg” align=”center”&gt;        &lt;img src=”figura.jpg” align=”left”&gt; imagem do lado esquerdo e texto do lado direito. &lt;br&gt;      Dica: lembre-se que uma figura é como uma letra  dentro de uma linha. Se você quer que a figura apareça no meio da  página, você deve colocá-la num parágrafo e alinhar o parágrafo ao  centro. Assim:      &lt;p align="center"&gt; &lt;img src=”figura.jpg”  align=”center”&gt; Texto ao lado da figura &lt;/p&gt;       &nbsp;       - Bordas em uma imagem:       &lt;img src=”figura.jpg” align=”center” border=”3”&gt;       &lt;img src=”figura.jpg” align=”center” border=”0”&gt;       
- Atributo AltO atributo alt é usado para definir um "texto  alternativo" para uma imagem. O valor do atributo alt é um texto  definido pelo autor:&nbsp;

                 &lt;img src="boat.gif" alt="Big Boat"&gt;

O atributo "alt" diz ao leitor o que ele ou ela está  perdendo numa página se o navegador não pode carregar imagens. O  navegador irá então exibir o texto alternativo em vez da imagem. É uma  boa prática incluir o atributo "alt" para cada imagem numa página, para  melhorar a exibição e a utilidade do seu documento para pessoas que têm  navegadores somente de texto.