Curso de html para Cegos.

Aula 4 - Imagens - Formato gif.



-= 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 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.

Aula 4 - Imagens - Formato gif em txt.



Voltar para a Página Principal.

Bengala Legal.


Hosted by www.Geocities.ws

1