Make your own free website on Tripod.com

 

LIÇÃO 3

Imagens

      Com relação de uso de imagens na Web temos que estas se dividem em duas categorias gerais que são as imagens on-line e as externas. As imagens on-line são apresentadas na página junto com os vínculos e com o texto e são carregadas automaticamente. Já as imagens externas são carregadas somente por pedido (download), através de vínculos.


      Independente de sua categoria, as imagens podem se apresentar em dois formatos: .gif e .jpg.

      O elemento IMG, ou seja, a tag <IMG>, insere as imagens que serão apresentadas junto ao texto. Um atributo SRC, que é o mais importante dessa tag, deve estar presente da seguinte forma:

      Se a imagem estiver na mesma pasta que a sua página então a tag seria assim:

<IMG SRC="nome_imagem.exten
são">

      Se a imagem estiver em uma pasta diferente da que sua página está, então tem que colocar o endereço desta pasta e depois o arquivo que contém a sua imagem. Digamos que sua página está na pasta "pagina" e a imagem (img.gif) que vai colocar está na pasta "imagens" que por sua vez está dentro da pasta "pagina", ou seja, essa imagem está dentro da pasta "\imagens\img.gif". Então a tag seria:
<IMG SRC="imagens\img.gif">

      DICA: Se quiser colocar uma imagem que está em outra página, basta clicar com o botão direito do rato em cima da imagem, seleccionar a opção propriedades, copiar a endereço URL e colocar no atributo SRC.

      Juntamente com a tag <IMG> podemos usar alguns parâmetros como:

Por exemplo:
<IMG ALT="explicação da imagem" BORDER=4 WIDTH=50 HEIGHT=20 ALIGN=Left>

      Uma imagem pode funcionar como vínculo, incluindo-se a tag <IMG> entre as partes de abertura e fechamento de uma tag de vínculo <A>. Assim temos:
<A HREF="arq.html"><IMG SCR="img.gif"></A>

      Para se projectar uma página deve-se procurar um equilíbrio com relação a quantidade de imagens e cores e a necessidade de transmissão de informações. O uso excessivo de imagens, imagens grandes, painéis de fundo tornará a página mais lenta ao ser carregada e o que, em muitos casos, levará os usuários que tiverem uma conexão lenta de rede a desistirem de carregar esta página. Para que isso não aconteça, verifique a necessidade do uso das imagens, mantenha as imagens pequenas reutilize-as sempre que possível.

Animações

      Em relação ao uso de mídias em HTML é necessário a utilização de vínculos correspondente ao caminho URL do arquivo externo que se deseja inserir em sua página. <A REF="arq_ext">Arquivo</A>. Neste contexto entram os arquivos de som e vídeo.

Som

      O primeiro caso, o som, é utilizado para transmitir informações que não sejam na forma de ilustração ou palavras e até mesmo para desejar boas vindas ao usuário que acaba de carregar aquela página. Esses arquivos geralmente possuem extensão .wav e .mid.

      Agora vamos aos comandos:
       <EMBED>
       <BGSOUND>

      Como o comando <EMBED> não é aceite pelo IE 3.0 e alguns outros browsers desconhecidos, você terá que colocar o comando duas vezes, um com o <EMBED> para o Netscape e <BGSOUND> para outros Browsers.
      Esta tag pode conter os seguintes parâmetros:

      Então os comandos da sua página ficariam assim:
      <EMBED SCR="musica.mid" AUTOSTART="true" AUTOLOAD="true" LOOP="true" HIDDEN="true">
      <BGSOUND SCR="musica.mid" AUTOSTART="true" AUTOLOAD="true" LOOP="true" HIDDEN="true">


Vídeo

      Já os arquivos de vídeo fornecem informações que as imagens estáticas não são capazes de transmitir. Suas extensões são geralmente .mpg, .mov, .avi. É interessante utilizar informações sobre o formato e o tamanho do arquivo de mídia externo. A tag <IMG> possui atributos que permitem a execução on-line de arquivos de som e vídeo. O atributo DYNSRC (para IE) inclui arquivos de vídeo: <IMG DYNSRC="arquivo.avi SRC="arquivo.gif ALT="[a arquivo]">.

Letreiros

      Em HTML é possível a criação de letreiros, ou seja, uma linha rolável que se moverá de um lado ao outro da página da Web. Para que este efeito seja possível basta inserir o texto que deseja transformar em letreiro entre as tags de abertura e fechamento <MARQUEE> texto </MARQUEE>. Esta tag possui vários atributos:

 
Atributo Utilização
BEHAVIOR
  1. SCROLL
  2. SLIPE
  3. ALTERNATE
  1. Rola de um lado ao outro da página e até desaparecer.
  2. Rola o letreiro da direita para esquerda e para.
  3. Faz o letreiro saltar de um lado da página para outro.
DIRECTION (somente se o letreiro for SCROLL)
  1. LEFT
  2. RIGHT
  1. Move o letreiro da esquerda para direita.
  2. Move o letreiro da direita para esquerda.
LOOP Define o número de vezes que o letreiro rolará na página.
SCROLLAMOUNT Define o número de pixeis para locação do letreiro.
SCROLLDELAY Define o tempo da animação em milésimos de segundos.
BGCOLOR Define a cor de fundo da caixa que delimita o letreiro.
HEIGHT Define a altura da caixa que delimita o letreiro.
WIDTH Define a largura da caixa que delimita o letreiro.
HSPACE Define o espaço entre as bordas esquerda e direita e o texto.
VSPACE Define o espaço entre as bordas inferior e superior e o texto.
ALIGN
  • TOP
  • MIDDLE
  • BOTTOM
Define o alinhamento do letreiro com relação ao texto.

Exemplo: <MARQUEE ALIGN=middle BEHAVIOR=scroll BGCOLOR=#009900 DIRECTION=left HEIGHT=5% WIDTH=80% HSPACE=1 VSPACE=10 LOOP=infinite SCROLLAMOUNT=2 SCROLLDELAY=20> Texto </MARQUEE>

Introdução| Lição 1| Lição 2| Lição 3| Lição 4| Lição 5| Lição 6| Lição 7| Lição 8| Lição 9