Imagens Gráficas
Autor: Blogger Utilidades | Publicado: 2012-01-10T16:48:00-02:00

Embora no princípio existisse mais variedade de formatos de imagem suportados pelos navegadores,&nbsp;chegou-se à conclusão que apenas dois tipos seriam suficientes. Falamos de GIF's e JPEG's. Tanto um&nbsp;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&nbsp;(compactador de dados, desenvolvido pelo PKWare Inc.). Armazena imagens até 256 cores, com um ou mais&nbsp;quadros, permitindo animações sem código adicional. Os arquivos deste formato é especificado pela&nbsp;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&nbsp;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 &lt;img&gt;.Vários atributos devem ser definidos sobre a origem, colocação e comportamento da imagem. Uma parte&nbsp;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 = &nbsp;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&nbsp;parâmetros: top, middle e bottom que representam respectivamente, alinhamento na parte superior, na&nbsp;parte 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&nbsp;intermediários não conseguem uma boa relação de contraste com o texto, e não há nada pior que uma&nbsp;página ilegível.Para atribuirmos uma imagem ao fundo de uma página, usamos o atributo background na tag &lt;body&gt;.É também interessante acrescentar o atributo bgcolor para definir a cor de fundo do documento, caso&nbsp;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&nbsp;uma seqüência de imagens (gif’s estáticas), que, colocadas em ordem e com um tempo entre as mudanças&nbsp;causam a impressão de animação.Isso pode ser feito facilmente com ferramentas específicas para essa finalidade. Muitas podem ser&nbsp;encontradas na própria Internet, mas uma ferramenta bastante utilizada e conhecida é o GIF Construction&nbsp;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&nbsp;ou você pode usar qualquer outra imagem da Web ou do seu computador. O importante é dar os mesmos nomes&nbsp;à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,&nbsp;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&lt;html&gt;&lt;head&gt;&lt;title&gt;Inserindo Imagens Gráficas com ALT&lt;/title&gt;&lt;/head&gt;&lt;body bgcolor="#ffc800" text="black"&gt;Posicione o mouse em cima da figura&lt;br&gt;&lt;br&gt;Este grilho não tem borda e o texto está alinhado na parte superior da figura&lt;img src="grilo.gif" alt="grilho" align="top"&gt;&lt;br&gt;&lt;br&gt;Este grilho tem borda n=2 e o texto está alinhado na parte central da figura&lt;img src="grilo.gif" alt="grilho" border="2" align="middle"&gt;&lt;br&gt;&lt;br&gt;Este grilho tem borda n=7 e o texto está alinhado na parte inferior da figura&lt;img src="grilo.gif" alt="grilho" border="7" align="bottom"&gt;&lt;br&gt;&lt;br&gt;&lt;img src="grilo.gif" height="80" width="60" alt="grilho" align="center"&gt;Este grilho teve suas dimensões modificadas e o texto foi escrito depois da tag&lt;br&gt;Este grilho teve suas dimensões modificadas e o texto foi escrito antes da tag&lt;img src="grilo.gif" height="80" width="60" alt="grilho" align="center"&gt;&lt;/body&gt;&lt;/html&gt;
2) imagens2.html&lt;html&gt;&lt;head&gt;&lt;title&gt;Inserindo Imagens Gráficas&lt;/title&gt;&lt;/head&gt;&lt;body bgcolor="#ffc800" text="black"&gt;Este grilho não tem borda e o texto está alinhado na parte superior da figura&lt;img src="grilo.gif" alt="grilho" align="top"&gt;&lt;br&gt;&lt;br&gt;Este grilho tem borda n=2 e o texto está alinhado na parte central da figura&lt;img src="grilo.gif" alt="grilho" border="2" align="middle"&gt;&lt;br&gt;&lt;br&gt;Este grilho tem borda n=7 e o texto está alinhado na parte inferior da figura&lt;img src="grilo.gif" alt="grilho" border="7" align="bottom"&gt;&lt;br&gt;&lt;br&gt;&lt;img src="grilo.gif" height="80" width="60" alt="grilho" align="center"&gt;Este grilho teve suas dimensões modificadas e o texto foi escrito depois da tag&lt;br&gt;Este grilho teve suas dimensões modificadas e o texto foi escrito antes da tag&lt;img src="grilo.gif" height="80" width="60" alt="grilho" align="center"&gt;&lt;/body&gt;&lt;/html&gt;
3) imagens3.html&lt;html&gt;&lt;head&gt;&lt;title&gt;Inserindo uma Imagem de Fundo&lt;/title&gt;&lt;/head&gt;&lt;body bgcolor="black" background="fundo1.jpg" text="white"&gt;Este é um exemplo de fundo escuro. Role a barra de rolagem lateral até o final da página.&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/body&gt;&lt;/html&gt;
4) imagens4.html&lt;html&gt;&lt;head&gt;&lt;title&gt;Inserindo uma Imagem de Fundo com BGPROPERTIES&lt;/title&gt;&lt;/head&gt;&lt;body bgcolor="pink" background="fundo2.jpg" text="black" bgproperties="fixed"&gt;Este é um exemplo de fundo claro. Role a barra de rolagem lateral até o final da página&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/body&gt;&lt;/html&gt;
5) imagens5.html&lt;html&gt;&lt;head&gt;&lt;title&gt;Gif Animada&lt;/title&gt;&lt;/head&gt;&lt;body bgcolor="green"&gt;&lt;img src="gif_animada_1.gif"&gt;&lt;br&gt;&lt;br&gt;&lt;img src="gif_animada_2.gif"&gt;
&lt;br&gt;&lt;br&gt;&lt;img src="gif_animada_3.gif"&gt;&lt;/body&gt;&lt;/html&gt;