Imagem

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]“>

Lembra-se da nossa organização? Quando a minha página HTML está na raiz, ou seja, foi salva dentro da nossa pasta "html4blog" e minha imagem está na pasta figuras, este é o caminho que devo indicar para que o HTML localize minha imagem.

<img src=”figuras/figura.jpg”>

Caso minha imagem esteja na mesma pasta que a minha página HTML, o caminho indicado é este:

<img src=”figura.jpg”>

 

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 "html4blog" e a última na pasta "html4blog/figuras". 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 dã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”>

 

Um caso especial de utilização de imagens é associado ao atributo "background". Neste caso, você não trabalha com a tag "src" e sim com o atributo "background". Sendo assim, este atributo deve estar dentro de uma tag, que pode ser:
<body> - para colocar uma imagem no fundo da página
<td> - para colocar uma imagem no fundo de uma célula de tabela
<tr> - para colocar uma imagem no fundo de uma linha de tabela
<table> - para colocar uma imagem no fundo de uma tabela

background=”[caminho] [nome da figura]“

(lembre-se das regras com relação ao caminho da figura)

<body background=”figuras/figura.jpg“>

 

Depois de tantos exemplos, nada como uns exercícios para relaxar!
Você já salvou suas figuras? Lembre-se de salvar uma na pasta "html4blog" e outra na pasta "figuras". Escolha suas preferidas ou use nossos exemplos.

Abra o bloco de notas e comece com as tags básicas de todo html. No início é melhor você digitar ao invés de usar um exemplo pronto para ir se acostumando com as tags mais comuns. Salve seu arquivo com o nome "tag_img.htm".
Crie um parágrafo com a frase: "Minha primeira imagem." seguido de outro parágrafo com a imagem "figura_ceu.jpg" (ou a figura que você escolheu e salvou na pasta html4blog). Salve e visualize no navegador.

<html>
<head>
<!-- Título da Home Page -->
<title>Trabalhando com figuras</title>
</head>
<body>
<p> Minha primeira figura </p>
<p> <img src="figura_ceu.jpg"> </p>
</body>
</html>

Agora fica mais fácil para trabalhar! Este é o modelo de uma imagem na mesma pasta que a página. Tente agora usar a figura que salvou na pasta figuras, no nosso exemplo é a "figura_morango.jpg".

<html>
<head>
<!-- Título da Home Page -->
<title>Trabalhando com figuras</title>
</head>
<body>
<p> Minha primeira figura </p>
<p> <img src="figura_ceu.jpg"> </p>
<p> <img src="figuras/figura_morango.jpg"> </p>
</body>
</html>

Agora é que começa a complicação. Como o texto vai se comportar com relação à imagem? Depende de onde você posiciona ele em relação ao parágrafo e à figura propriamente dita, além dos alinhamentos de ambos!

<html>
<head>
<!-- Título da Home Page -->
<title>Trabalhando com figuras</title>
</head>
<body>
<p> Minha primeira figura </p>
<p> <img src="figura_ceu.jpg"> </p>
<p> <img src="figuras/figura_morango.jpg"> Lave os morangos, retire os cabinhos e coloque de molho por 15 minutos em água com vinagre. Bata as claras em ponto de neve firme. Em uma panela coloque o Karo e o açúcar e leve ao forno para ferver. Adicione a baunilha, retire do fogo e despeje lentamente sobre as claras em neve, batendo sempre até esfriar. Retire da batedeira e leve à geladeira. Na hora de servir, coloque, em taças para sobremesa, uma camada de morango, uma de mistura de clara e assim por diante. </p>
</body>
</html>

Salve e veja o resultado. Volte ao código e faça apenas a seguinte alteração: acrescente o alinhamento à esquerda dentro da tag "img". Não mude mais nada. Salve e veja o resultado.

<img src="figuras/figura_morango.jpg" align="left">

E assim vai! volte aos exemplos da teoria e teste cada uma das opções fazendo todas as combinações que sua imaginação mandar e fique atento aos resultados.

Um exercício muito divertido é brincar com figuras de fundo. Basta alterar a tag "body":

<body background="ladrilho.gif">

fim