LIÇÃO 3

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.

GIF - Este padrão é mais conhecido e mais compatível com os navegadores existentes. Recomendado para ícones com menos de 256 cores, cores lisas, puras, preto e branco. Sua qualidade é bem superior ao formato JPG, pois o tamanho do arquivo é maior. As imagens podem ser com fundo transparente.
JPG ou JPEG - Foi o padrão proposto pela norma ISO e é geralmente usado para imagens mais complexas (fotográficas). Permite alta taxa de compressão, por isso gera um arquivo menor, o que implica numa perda de informação e qualidade.

      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.extensã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:

BORDER - Para determinar a moldura da imagem;

WIDTH - Para determinar a largura da imagem;

HEIGHT - Para determinar a altura da imagem;

ALIGN - Para alinhar as imagens de várias formas:

LEFT - alinha a imagem a esquerda do texto;

RIGHT - alinha a imagem a direita do texto;

TOP - alinha o texto com o topo da imagem;

MIDDLE - alinha o texto com o meio da imagem;

BOTTOM - alinha o texto com a parte inferior da imagem.

ALT - Quando a pessoa deixar o rato sobre a imagem aparecerá o que escreveu.

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:

SRC - define o caminho para o arquivo de som;
AUTOSTART - define que ao ser carregado ele já deve ser tocado ou que o visitante deve clicar no play para tocar, TRUE para tocar automaticamente e FALSE para quando o visitante clicar play.
AUTOLOAD - define que o arquivo de som deve ser automaticamente iniciado quando entrar na página, ou o visitante deve clicar play para iniciar o arquivo, TRUE para iniciar automaticamente e FALSE quando o visitante clicar play.
LOOP - define o número de vezes que a música será tocada, TRUE para tocar infinitas vezes.
HIDDEN - define se quer que o controle ficam escondidos ou não, TRUE para deixar invisível e caso queira os controles não precisa colocar FALSE.
WIDHT e HIGHT define o tamanho dos controles.

      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

SCROLL
SLIPE
ALTERNATE

Rola de um lado ao outro da página e até desaparecer.
Rola o letreiro da direita para esquerda e para.
Faz o letreiro saltar de um lado da página para outro.

DIRECTION (somente se o letreiro for SCROLL)

LEFT
RIGHT

Move o letreiro da esquerda para direita.
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.

Atributo	Utilização
BEHAVIOR SCROLL SLIPE ALTERNATE	Rola de um lado ao outro da página e até desaparecer. Rola o letreiro da direita para esquerda e para. Faz o letreiro saltar de um lado da página para outro.
DIRECTION (somente se o letreiro for SCROLL) LEFT RIGHT	Move o letreiro da esquerda para direita. 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>

Imagens

Animações

Som

Vídeo

Letreiros

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