Até agora só se falou em texto, deixando de lado o grande atrativo da Web que são os gráficos e imagens.
A utilização das imagens deverá obedecer a determinados critérios, não devendo jamais exceder em tamanho para que as páginas não fiquem pesadas demais.
Os formatos de imagem para a Web são o .gif, .jpg e mais recentemente .png, que não é muito utilizado até porque alguns browsers não o suportam. Todos eles com compactação de pixels. Quanto menor a imagem, melhor. Como PNG não é muito utilizado, vamos falar de GIF e JPG; existem diversas diferenças entre estes dois tipos de arquivos, porém uma regra básica é: para fotos, use JPG e imagens com poucas cores, utilize GIF.
Para inserir uma imagem, a tag é <IMG SRC=> não exigindo uma tag para finalizar. Certifique-se sempre de que a imagem esteja no mesmo diretório do documento HTML, ou se não estiver, discreva o diretório corretamente. Exemplo:
<IMG SRC="imagem.gif">, no mesmo diretório;
<IMG SRC="imagens/imagem.gif">, em diretório diferente;
Você também pode utilizar uma imagem em um outro computador, tendo que inserir neste caso, a URL completa de onde está a imagem. Observe que não é muito aconselhável usar imagens assim, pois há o perigo da imagem ser removida e sua página ficar com um defeito. Exemplo:
<IMG SRC="http://www.geocities.com/Paris/3467/vanessa.jpg">
Atributos de imagens
ALT=Texto descreve a imagem através de um texto, caso o usuário tenha instruído seu browser para não exibir imagens ou até para quem usa browsers textuais, como o Lynx. Nas versões atuais do Netscape e Explorer, ao passar o mouse sobre uma imagem com o atributo ALT, será exibido o texto, o que é muito útil.
ALIGN=LEFT - faz a imagem "flutuar"à esquerda do texto
ALIGN=RIGHT - faz a imagem flutuar à direita do texto
ALIGN=TOP - alinha a parte inferior do texto com a parte superior da imagem
ALIGN=MIDDLE - alinha a parte inferior do texto com a parte média da imagem
ALIGN=BOTTOM - alinha a parte inferior do texto com a parte inferior da imagem
WIDTH=n - determina a largura da imagem
HEIGHT=n - determina a altura da imagem
BORDER=n - insere uma borda em torno da imagem
VSPACE=n - insere espaço acima e abaixo da imagem
HSPACE=n - insere espaço à esquerda e à direita da imagem
ISMAP - indica que a imagem é um mapa clicável.
Mapas clicáveis não serão vistos aqui. Na bibliografia há referências a este recurso. Um dos softwares utilizado para a criação de mapas é o Map This 1.3.
Exemplo: <IMG SRC="bibct.jpg" ALT="Prédio da biblioteca" ALIGN=right WIDTH=320 HEIGHT=200 BORDER=0>
Clique aqui para ver os exemplos de atributos de imagem.
Utilização das imagens
A utilização correta das imagens confere um visual mais agradável e comunica sua função de maneira quase instantânea. A substituição de marcadores nas listas por ícones e imagens de linhas nas linhas horizontais <HR> costumam ser uma alternativa elegante de comunicação por meio de gráficos.
Você também pode usar imagens de caixas postais para indicar seu e-mail, botões gráficos com um ponto de interrogação para enviar para uma página de ajuda..., enfim aqui a criatividade é que conta. Na Web a máxima "uma imagem vale por mil palavras" também é válida.
Você poderá fazer download de ícones e linhas em diversos endereços da Web. Experimente começar pelo Yahoo.
Tenha sempre em mente que a harmonia das cores é fundamental para a estética da página. Evite misturar cores em excesso.
Resolução da imagem
Um efeito interessante é o da imagem de baixa resolução. Crie uma imagem de boa qualidade e outra inferior e coloque as duas na mesma tag IMG. A imagem de baixa resolução carregará primeiro enquanto o browser carrega o arquivo principal. Exemplo:
<IMG SRC="alta_resolucao.jpg" LOWSRC="baixa_resolucao.jpg">. Experimente colocar o arquivo de alta resolução em cores e o de baixa em tons de cinza. O efeito fica bem atrativo, porém só é suportado pelo Netscape.
Clique aqui para ver o exemplo.
Gifs transparentes, animados e entrelaçados
O GIF89a é o formato que permite o recurso transparente, entrelaçamento e animação. Destes recursos, o JPG só incorpora o entrelaçamento. Programas como o Paint Shop, LView Pro e Photoshop permitem salvar arquivos com estes recursos. Qualquer um deles confere mais elegância às páginas.
Considere a possibilidade de criar textos em gráficos para a utilização em botões de navegação. Este procedimento lhe permitirá usar recursos avançados dos softwares gráficos no seu texto e um visual arrasador na sua página.
Utilize imagens como plano de fundo das páginas. Use imagens pequenaas para que fiquem leves e não esqueça de harmonizar a cor da imagem com o texto. Imagens claras requerem textos escuros e vice-versa.
A criação de GIFs animados requer a criação de vários frames que serão intercalados um após o outro dando a impressão de movimento. Para criar GIFs animados, utilize o GIF Construction Set ou o Animation Shop. Há diversos softwares para criação na Web e o uso de um ou outro depende do gosto de cada um. Além das animações, você pode criar efeitos de painéis luminosos piscantes ou de um show de slides, caso sejam acrescentadas imagens diferentes ao GIF animado. Neste caso tome o cuidado de que as imagens tenham o mesmo tamanho.
