Imagens
As imagens são elementos extremamente comuns nos documentos web atualmente. Elas fazem parte dos mais variados tipos de páginas e podem ser usadas tanto para decorar como para compor a informação de maneira a torná-la mais compreensível. É difícil navegarmos na Internet e entrarmos em uma página que não tenha pelo menos uma imagem.
É importante notar que as imagens podem ter diversas aplicações nos documentos web, é possível usá-las como decoração para uma página, como plano de fundo, como explicação para alguma coisa (como usada nos livros), como ligação para outras páginas (hyperlinks), etc.
Os designers fazem muitas coisas com as imagens, principalmente gráficos vetoriais, para criar interfaces mais agradáveis no uso de páginas, paralelamente ao uso de CSS. O resultado traz páginas muito bonitas, mas que algumas vezes ficam bem pesadas para um computador lento ou uma internet de velocidade mais baixa. Cabe a você fazer o julgamento de equilibrar o documento e trazer uma experiência agradável ao usuário, tanto no ponto de vista de qualidade visual quanto em performance.
Como vimos anteriormente, o navegador interpreta as imagens a partir da leitura da tag "<img />". Essa tag tem vários atributos e trataremos de alguns deles a seguir. Vamos supor que você queira inserir uma imagem que está no mesmo caminho do seu documento.
<img src="imagem.jpg" />
Essa tag deve ser suficiente para fazer com que a imagem apareça em seu navegador. Você pode também querer pegar uma imagem que está na Internet, usando uma URL para encontrá-la.
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Flag_of_Brazil.svg/60px-Flag_of_Brazil.svg.png" />
Dessa maneira, você estará usando uma imagem encontrada na Internet, por exemplo.
O uso de caminho absoluto no computador local já foi descrito anteriormente e serve da mesma maneira para inserir uma imagem isolada no documento web.
O atributo "alt" serve para dar um nome alternativo (descrição) às imagens nas webpages.
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Flag_of_Brazil.svg/60px-Flag_of_Brazil.svg.png" alt="bandeira do brasil" />
Ao parar com o mouse em cima da imagem, você poderá notar que o texto mostrado será o que você colocou em "alt". Esse recurso também facilita muito a navegação para uma pessoa que estiver usando navegação em modo texto, uma vez que o nome da imagem que aparecerá na tela será o que estiver no valor do atributo "alt". O uso desse atributo é considerado uma boa prática e deve ser feito sempre que possível.
As imagens também podem ser usadas como plano de fundo para dar uma aparência mais sofisticada à sua página.
<body background="imagem_de_fundo.jpg">
Nesse exemplo em específico, não utilizamos a tag "<img />" pois o navegador já entenderá que ao usar o atributo "background" da tag "<body>" chamaremos uma imagem para ser utilizada como plano de fundo.
Outro recurso que provavelmente será muito utilizado é o alinhamento das imagens com relação ao texto. Você pode basicamente colocá-la acima, no meio ou abaixo do texto.
Seguem alguns exemplos:
<p>
Uma imagem
<img src="imagem.gif" align="bottom" />
no texto
</p>
Uma imagem
<img src="imagem.gif" align="bottom" />
no texto
</p>
<p>
Uma imagem
<img src="imagem.gif" align="middle" />
no texto
</p>
<p>
Uma imagem
<img src="imagem.gif" align="top" />
no texto
</p>
<p>
Uma imagem
<img src="imagem.gif" />
no meio do texto
</p>
<p>
<img src="imagem.gif" />
Uma imagem antes do texto
</p>
<p>
Uma imagem depois do texto
<img src="imagem.gif" />
</p>
As linhas acima mostram diversas maneiras de se diagramar a imagem juntamente com o texto. Outra maneira de colocar as imagens na direita ou esquerda do seu texto pode ser da seguinte forma:
<p>
<img src ="imagem.gif" align ="left"> Um parágrafo com uma imagem. O atributo 'align' está configurado para 'left' (esquerda). A imagem ficará à esquerda do texto;
</p>
<img src ="imagem.gif" align ="left"> Um parágrafo com uma imagem. O atributo 'align' está configurado para 'left' (esquerda). A imagem ficará à esquerda do texto;
</p>
<p>
<img src ="imagem.gif" align ="right"> Um parágrafo com uma imagem. O atributo 'align' está configurado para 'right' (direita). A imagem ficará à direita do texto;
</p>
Outros atributos que serão usados com bastante freqüência são os responsáveis por redimensionar as imagens. Você precisará de dois deles, um para altura (height) e outro para largura (width). Veja abaixo como utilizá-los.
<p>
<img src="imagem.gif"
width="20" height="20">
</p>
<img src="imagem.gif"
width="20" height="20">
</p>
<p>
<img src="imagem.gif"
width="45" height="45">
</p>
<p>
<img src="imagem.gif"
width="70" height="70">
</p>
Mudar o valor dos atributos aumenta ou diminui a imagem conforme o que for indicado.
