Lição 6: Imagens Gráficas

Vamos brincar com imagens nessa nossa sexta aula.

Embora no princípio existisse mais variedade de formatos de imagem suportados pelos navegadores, chegou-se à conclusão que apenas dois tipos seriam suficientes. Falamos de GIF's e JPEG's. Tanto um como outro fazem compressão de dados. Isto resulta em taxas de transferência menores.

Graphics Interchange Format (GIF)

Desenvolvido pelo Compuserve, emprega uma técnica de compressão eficiente similar a do PKZIP (compactador de dados, desenvolvido pelo PKWare Inc.). Armazena imagens até 256 cores, com um ou mais quadros, permitindo animações sem código adicional. Os arquivos deste formato é especificado pela extensão .gif.

Joint Photographic Experts Group (JPG ou JPEG)

O JPG ou JPEG utiliza um esquema de compressão altamente eficiente baseado na FFT (Fast Fourier Transform). Neste ponto é superior ao GIF. Armazena imagens estáticas com até 16 milhões de cores.

O elemento Img

A tag utilizada para a inclusão de imagens é o <img>.

Vários atributos devem ser definidos sobre a origem, colocação e comportamento da imagem. Uma parte deles é opcional, com o tempo você descobrirá o que realmente é importante na tag.

Atributos para Img

Src = Este atributo especifica o local onde está a imagem e o seu nome.

Alt = Fornece o texto que aparece no espaço da imagem quando o navegador não pode abrir a imagem.

Border = Define a largura da borda da imagem em n pontos.

Align = Especifica o alinhamento do texto em relação à figura. O atributo align pode receber como parâmetros: top, middle e bottom que representam respectivamente, alinhamento na parte superior, na paFrte central e na parte inferior do texto.

Height = Especifica a altura da imagem.

Width = Especifica a largura da imagem.

Bgproperties = Deixa o fundo do background fixo se utilizado o parâmetro fixed.

Hspace = Especifica o espaço horizontal em branco extra ou as margens ao redor da imagem.

Vspace = Especifica o espaço vertical em branco extra ou as margens ao redor da imagem.

Inserindo uma Imagem de Fundo

Escolha com muito cuidado seus fundos. Se possível, opte pelos muito claros ou muito escuros. Os intermediários não conseguem uma boa relação de contraste com o texto, e não há nada pior que uma página ilegível.

Para atribuirmos uma imagem ao fundo de uma página, usamos o atributo background na tag <body>.

É também interessante acrescentar o atributo bgcolor para definir a cor de fundo do documento, caso algo ocorra com a imagem a ser usada como background.

Gifs Animadas

As gif’s animadas, imagens que se alteram com o tempo nas páginas HTML são figuras montadas a partir de uma seqüência de imagens (gif’s estáticas), que, colocadas em ordem e com um tempo entre as mudanças causam a impressão de animação.

Isso pode ser feito facilmente com ferramentas específicas para essa finalidade. Muitas podem ser encontradas na própria Internet, mas uma ferramenta bastante utilizada e conhecida é o GIF Construction Set, que possui inclusive um assistente (Wizard) de criação de GIF’s animadas.

As imagens utilizadas para fazer os exercícios abaixo, podem ser baixadas aqui ou você pode usar qualquer outra imagem da Web ou do seu computador. O importante é dar os mesmos nomes às imagens para conseguir visualizar a sua página.

Os nomes das imagens utilizadas são: grilo.gif, fundo1.jpg, fundo2.jpg, gif_animada_1.gif, gif_animada_2.gif e gif_animada_3.gif.

Se fizer o download acima, utilize o WinRAR para descompactar. Se não tiver esse descompactador no seu PC, você pode baixá-lo aqui.

Exercícios:

1) imagens1.html

<html>

<head>

<title>Inserindo Imagens Gráficas com ALT</title>

</head>

Posicione o mouse em cima da figura

Este grilho não tem borda e o texto está alinhado na parte superior da figura

Este grilho tem borda n=2 e o texto está alinhado na parte central da figura

Este grilho tem borda n=7 e o texto está alinhado na parte inferior da figura

Este grilho teve suas dimensões modificadas e o texto foi escrito depois da tag

Este grilho teve suas dimensões modificadas e o texto foi escrito antes da tag

</body>

</html>

2) imagens2.html

<html>

<head>

<title>Inserindo Imagens Gráficas</title>

</head>

Este grilho não tem borda e o texto está alinhado na parte superior da figura

Este grilho tem borda n=2 e o texto está alinhado na parte central da figura

Este grilho tem borda n=7 e o texto está alinhado na parte inferior da figura

Este grilho teve suas dimensões modificadas e o texto foi escrito depois da tag

Este grilho teve suas dimensões modificadas e o texto foi escrito antes da tag

</body>

</html>

3) imagens3.html

<html>

<head>

<title>Inserindo uma Imagem de Fundo</title>

</head>

Este é um exemplo de fundo escuro. Role a barra de rolagem lateral até o final da página.

</body>

</html>

4) imagens4.html

<html>

<head>

<title>Inserindo uma Imagem de Fundo com BGPROPERTIES</title>

</head>

Este é um exemplo de fundo claro. Role a barra de rolagem lateral até o final da página

</body>

</html>

5) imagens5.html

<html>

<head>

<title>Gif Animada</title>

</head>

</body>

</html>

Web Utilidades

Categorias

Lição 6: Imagens Gráficas

true comentários:

Postar um comentário

Seguidores

Arquivo do Blog

MEUS OUTROS BLOGS

Quem Sou Eu