Dicas Html - Trabalhando com imagens

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).
 

- jpg: não pode ser animado, nem pode ter fundo transparente, pode ter ótima qualidade e ser leve, utilizado mais para fotos. 

A tag <img> 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.

<img src=”[caminho] [nome da figura]“>

 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". 

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.

 

- 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:
<img src=”figura.jpg” width=”30” height=”10”>

se você pretende trabalhar com porcentagem:
<img src=”figura.jpg” width=”50%” height=”50%”>

 

- Para criar um espaçamento ao redor da imagem, use o atributo "vspace" (vertical) e "hspace" (horizontal).

<img src=”figura.jpg” vspace=”10” hspace="30">
Isso produz um espaçamento superior e inferior de 10 pixels e um espaçamento lateral (tanto à direita quanto à esquerda) de 30 pixels.

 

- 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.

<img src=”figura.jpg” align=”center”>

<img src=”figura.jpg” align=”left”> imagem do lado esquerdo e texto do lado direito. <br>

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:

<p align="center"> <img src=”figura.jpg” align=”center”> Texto ao lado da figura </p>

 

- Bordas em uma imagem:

<img src=”figura.jpg” align=”center” border=”3”>

<img src=”figura.jpg” align=”center” border=”0”>

- Atributo Alt

O atributo alt é usado para definir um "texto alternativo" para uma imagem. O valor do atributo alt é um texto definido pelo autor: 

<img src="boat.gif" alt="Big Boat">

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.