-= Curso HTML - Imagens - Formato gif =-
Marco Antonio de Queiroz.


A etiqueta que nos serve para incluir imagens nas nossas páginas Web é muito
similar aos links à outras páginas que vimos na aula anterior. A única
diferença é que, no lugar de indicar ao navegador o nome e a localização de um
documento de texto HTML para que o carregue, se indica o nome e a localização
de um arquivo que contenha uma imagem.

A estrutura da etiqueta é:

<IMG SRC="imagem.gif">

Dentro da etiqueta podemos aninhar outros comandos, tal como ALT

<IMG SRC="imagem.gif" ALT="descrição">

Com o comando ALT introduzimos uma descrição (uma palavra ou uma breve frase)
indicativa da imagem. Este comando, em princípio, se pode omitir. Se não
pudermos ver a imagem, por algum motivo, podemos ter uma idéia pela descrição.
Porém, não é só porisso. Há casos que se utiliza a imagem para fazer link para
outra página. Para nós, cegos, esse atributo é fundamental para que
possamos saber o objetivo daquela imagem. É também código internacional
de acessibilidade.


Assim como podemos carregar uma página fora da nossa conta de ftp (deveremos saber
URL completa), podemos carregar, de modo similar, uma imagem bastando indicar
na etiqueta a URL completa da imagem. Não é muito aconselhável, pois poderá
deixar a carga de nossa página muito lenta.

As imagens devem estar guardadas num arquivo especial chamado GIF (existe
outro formato, que veremos mais adiante). O formato GIF armazena imagens com o
máximo de 256 cores, em forma comprimida. Existem vários programas gráficos
(como o Corew Drow) que nos permitem gravar as imagens neste formato, além
de cumprir muitas outras tarefas de manipulação das mesmas.

Um aspecto importante a considerar, é o tamanho das imagens, pois uma imagem
muito grande demora muito tempo para ser carregada na página. Muitas vezes, as
pessoas que acessam nossa página não têm paciência para esperar e desistem de
acessá-la.

Existem várias possibilidades de se colocar a imagem com seu respectivo texto.
Podemos colocar acima, meio e abaixo. Para isso é utilizada a etiqueta ALIGN,
da seguinte maneira:

<IMG SRC="zzzzz.gif" ALIGN=TOP alt="descrição">descrição alinhada acima.

<IMG SCR="zzzzz.gif" ALIGN=MIDDLE alt="descrição">descrição alinhada no
meio

<IMG SCR="zzzzz.gif" ALIGN=BOTTON ALT="descrição">descrição alinhada
abaixo.


Outra possibilidade muito interessante é de utilizar imagem como link para
outra página. Para estes casos, geralmente, se utilizam imagens pequenas
(ícones).

 Como exemplo vamos utilizar a imagem (brasil_1.gif) para carregarmos o
exemplo prático de uma volta a página principal.

              <A HREF="index.htm">
<IMG SCR="brasil_1.gif" alt="Voltar para a página principal.></A>

Clicando sobre a imagem comprovamos como efetivamente o link funciona.
A imagem está rodeada de um retângulo da mesma cor dos links. Se não
desejamos que apareça o retângulo, temos que incluir dentro da etiqueta da
imagem o atributo BORDER=0, assim:

<A HREF="index.htm">
<IMG SRC="Brasil_1.gif" BORDER="0" ALT="Voltar para a página principal.></A>


Clicando também sobre esta imagem, observamos que o resultado é o mesmo do
caso anterior, só que está sem o retângulo colorido. Isto pode ser mais
estético, porém algum usuário corre o risco de não perceber que esta imagem é um
link.

Também podemos utilizar uma imagem para fazer link para outra imagem.

Suponhamos que queremos carregar a imagem (alfinete.gif), através de um link,
com imagem (sorri.gif):

               <A HREF="imagem1.gif"><IMG SCR="imagem2.gif"></A>


Por último, outra possibilidade é de utilizar um texto para fazer link para
uma imagem.

Suponhamos que queremos carregar a imagem (sorri.gif) por meio do texto
"Sorriso bonito":

                   <A HREF="sorri.gif"> Sorriso bonito</A>


Podemos capturar as imagens que aparecem no browser, podendo ser gravados no
nosso disco rígido. Geralmente, consegue-se isso, teclando com o botão da
direita sobre a imagem, abrindo um menu que tem esta opção.
Para quem não utiliza mouse, basta descobrir o nome da imagem eteclar o
endereço da página principal + /nome_da_imagem.gif. Em nosso último caso
seria: endereco.pagina.com.br/sorri.gif. Dessa forma o download seria
feito.
                                Exemplo prático

<HTML>
<HEAD>
<TITLE>xxx - Minha primeira página.</TITLE>
</HEAD>

<BODY>

<H1><CENTER> Primeira página </CENTER></H1>
<p>
Esta &eacute; minha primeira p&aacute;gina. Como a linguagem HTML não
&eacute; dif&iacute;cil, estou disposto a fazer coisas mais interessantes.
<p>
<hr>
<P>
<A HREF="aula2.htm">
<IMG SCR="sorri.gif" alt="Minhas P&aacute;ginas Favoritas.></A>

<P>
<A HREF="mailto:xxxx@provedor.com.br">
<IMG SCR="email.gif" border="0">Entre em Contato.</A>

<P>
<A HREF="index.htm">
<IMG SCR="bolaazul.gif" border="0">
Voltar para a P&aacute;gina Principal.</A>

</BODY>
</HTML>

Gravamos nosso exemplo no diretório criado no primeiro capítulo, com o nome de
aula4.htm