Curso de html para Cegos. Aula 4 - Imagens - Formato gif.
<IMG SRC="imagem.gif">
Dentro da etiqueta podemos aninhar outros atributos (comandos), tal como
ALT:
<IMG SRC="imagem.gif" ALT="descrição">
Com o atributo ALT introduzimos uma descrição (uma palavra ou uma breve frase)
indicativa da imagem. Este atributo, 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 SRC="zzzzz.gif" ALIGN=MIDDLE alt="descrição">descrição alinhada no
meio
<IMG SRC="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 SRC="brasil_1.gif" alt="Voltar para a página principal.></A>
A imagem fica 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="Teste2 - 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="alfinete.gif"><IMG SRC="sorri.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: www.geocities.com/aulas_html/sorri.gif. Dessa forma o download seria
feito. (Faça o teste!).
Exemplo prático
<HTML>
<HEAD>
<TITLE>xxx - Minha primeira página.</TITLE>
</HEAD>
<BODY>
<H1><CENTER> Primeira página </CENTER></H1>
<p>
Esta é minha primeira página. Como a linguagem HTML não
é difícil, estou disposto a fazer coisas mais interessantes.
<p>
<hr>
<P>
<A HREF="aula2.htm">
<IMG SRC="sorri.gif" alt="Minhas Páginas Favoritas.></A>
<P>
<A HREF="mailto:[email protected]">
<IMG SRC="email.gif" border="0">Entre em Contato.</A>
<P>
<A HREF="index.htm">
<IMG SRC="bolaazul.gif" border="0">
Voltar para a Página Principal.</A>
</BODY>
</HTML>
Gravamos nosso exemplo no diretório criado no primeiro capítulo, com o nome de
aula4.htm.
|