Incluindo imagens

Agora que você já sabe incluir e formatar os textos de sua página, é possível que você queira dar mais vida à sua página, incluindo imagens e fundos nela.

Você faz as imagens em programas separados, em seu editor gráfico preferido. Ou pode usar imagens de outros sites. Mas os formatos ideais para home pages são GIF e JPG. Você não poderá usar o formato BMP.

A tag para inserir uma imagem em sua página é a seguinte:

<img src="nome do arquivo de imagem que vai aparecer">

Em "imagem que vai aparecer" você coloca o nome da imagem .gif ou .jpg ou o URL onde ela está para ser mostrada. Na verdade, apenas <img src="nome do arquivo de imagem que vai aparecer"> já seria o suficiente, mas com o tempo você vai precisar usar os outros atributos.

- Atributos de Imagem

- Width e Height
São os atributos de largura e altura da imagem (Width: Largura da imagem - Height: Altura da imagem). Se você não incluí-los, não se preocupe. A imagem vai aparecer assim mesmo. Mas definindo os tamanhos da imagem ela carregará mais rápido.

Outra vantagem em usar o Width e Height é que você pode diminuir ou aumentar o tamanho de uma figura como você desejar, porém não recomendamos que você redimensione as imagens com esta opção. Se você quiser ter uma imagem menor, use um editor de imagem pra diminuir o tamanho dela, a imagem ficará mais bonita e também será mais leve para carregar. Se você tem uma página com galeria de imagens e uma "pré-vizualização" delas menores, sempre crie uma imagem menor com o editor de imagens, nunca use a imagem "maior" redimensionada, ela vai demorar muito a carregar e a vizualização não ficará boa.

- Alt
Texto alternativo. A função é apresentar um texto no lugar da imagem, enquanto esta ainda não apareceu.

- Border
Tamanho da borda da imagem. Os navegadores colocam uma borda na figura se este atributo estiver com um valor maior que zero. A vantagem é ocultar a borda que aparece e que indica que há um link em volta das figuras clicáveis. Muitas vezes esta borda faz a imagem ficar feia, quando o valor atribuído é zero. Veja um exemplo de imagem com borda igual a zero:


Agora veja a mesma imagem com uma borda igual a 2:


Uma tag de imagem com os atributos acima combinados ficaria assim:

<img src="nome do arquivo de imagem que vai aparecer alt="texto" border=0 width="largura da imagem" height="altura da imagem">

Um exemplo:
<img src="orbita.gif alt="Aqui aparece o texto alternativo" border=1 width="100" height="50">

O resultado é:


- Dicas e Formato de Arquivos de imagem

- TAMANHO EM Kb:
Evite ao máximo colocar imagens maiores do que 30Kb em sua página pois, quanto mais arquivos tiver e quanto maiores eles forem, mais lenta será a transfência, não é bom ter imagens "pesadas" na página, isso só vai tornar o carregamento mais demorado e os visitantes podem acabar desistindo de esperar. Procure organizar e dividir as imagens em seu site de modo que ele não fique muito pesado, nem sempre agrada aos visitantes ter muitas imagens.

- PROGRAMAS:
É essencial que seja escolhido um bom programa de edição de imagens para que seu site tenha uma boa apresentação gráfica. Entre os mais usados estão o Corel Draw, Adobe Photoshop e Paint Shop Pro.

- O FORMATO GIF:
Formato dominante na Internet, o GIF é um tipo de arquivo gráfico relativamente compacto (quando comparado com o BMP por exemplo) e o GIF pode ser transparente, não transparente ou animado.

Um GIF transparente é aquele onde uma cor pode ser escolhida para ser transformada em transparente quando vista por um navegador e mostrar o que há embaixo. Os programas que são mais usados para criar gifs e permitem que se crie transparências são o Photoshop e o Fireworks.

Os GIFS animados são aqueles que têm movimento. Nada mais são que uma seqüência de GIFS previamente preparados. O criador do GIF animado, usando um programa como o GIF Animator, escolhe as imagens que formarão a seqüência que dará a idéia de movimento.

- O FORMATO JPEG (jpg):
Grandes fotos geralmente são salvas neste formato pois, nestes casos, se consegue reduzir bastante o tamanho em bytes da imagem, sem prejudicar sua qualidade. É aconselhável, antes de mandar um arquivo GIF grande para Web, testar como ficaria se salvo como JPG.

- O FORMATO BMP:
Esses bitmaps, apesar de muito utilizados no Windows, são muito pesados para a Web. Se quiser colocar alguma imagem que estiver neste formato, salve-a antes como GIF ou JPG usando um editor de imagens como o Paint Shop Pro, Photoshop ou FireWorks.Alinhando as imagens

Você pode usar muitos recursos para fazer o alinhamento de textos e imagens em sua página, e dar uma organização e visual diferentes. Para fazer os alinhamentos, você inclui parâmetros do alinhamento dentro da tag de imagem. Assim:

Veja como o texto fica na imagem. Este é um exemplo de alinhamento padrão; você não precisa incluir nenhuma tag.


Agora veja como o texto fica no topo da imagem.

Este é um exemplo de alinhamento de texto no topo da imagem. Para fazer este tipo de alinhamento, a tag de imagem deve ficar assim:

<img src="nome da imagem " align="top">
Repare que só incluímos o align="top" na tag de imagem.


Veja como o texto fica no meio da imagem.

Este é um exemplo de alinhamento no meio da imagem. Para este efeito a tag de imagem deve ficar assim:

<img src="nome da imagem" align="middle">
Repare que só incluímos o align="middle" na tag de imagem.


Veja que agora você tem um efeito onde o texto fica ao redor da imagem, igual ao texto em jornais. Trata-se de um ótimo recurso para quando você deseja colocar um texto ao lado de uma foto que destaque mais o assunto do texto.


A tag para este alinhamento é:
<img src="nome da imagem" align="left">


Veja que agora a imagem está alinhada do lado direito e o texto fica ao redor. É exatamente o oposto do alinhamento à esquerda.


A tag para este alinhamento é:
<img src="nome da imagem" align="right">

- Para se ter uma imagem centralizada:

<CENTER><img src="nome da imagem"></CENTER>

O resultado é: