A maioria da imagens que você encontra na Web são GIF ou JPG: - gif: pode ser animado ou não, permite fundos transparentes, qualidade razoável, utilizada mais para imagens tipo desenho ou mapa (traços ou vetores). - jpg: não pode ser animado, nem pode ter fundo transparente, pode ter ótima qualidade e ser leve, utilizado mais para fotos.
A tag <img > não possui tag de encerramento, mas possui vários atributos, sendo o principal o atributo: "src" que especifica o local onde a imagem está localizada.
<img [nome="" da="" figura]“="" src="”[caminho]" / >
Lembra-se da nossa organização? Quando a minha página HTML está na raiz, ou seja, foi salva dentro da nossa pasta "htmlmeublog" e minha imagem está na pasta figuras, este é o caminho que devo indicar para que o HTML localize minha imagem.
<img src="”figuras/figura.jpg”" />
Caso minha imagem esteja na mesma pasta que a minha página HTML, o caminho indicado é este:
<img src="”figura.jpg”">
Dica: Uma dica muito importante é com relação ao tamanho das imagens.
Nunca use imagens muito grandes (altura e largura). No geral isto significa que o peso em kbytes também é grande.
Imagens para internet devem ter resolução de 72 dpi e ter no máximo 20kb de tamanho. Imagens de fundo as vezes ultrapassam esta marca, mas evite estourar os 50kb.
- Mais atributos das imagens – width e height - largura e altura da imagem.
Cuidado para dão tirar a imagem da proporção!
se você pretende trabalhar com pixels:
<img src=”figura.jpg” width=”30” height=”10”>
se você pretende trabalhar com porcentagem:
<img src=”figura.jpg” width=”50%” height=”50%”>
- Para criar um espaçamento ao redor da imagem, use o atributo "vspace" (vertical) e "hspace" (horizontal).
<img src=”figura.jpg” vspace=”10” hspace="30">
Isso produz um espaçamento superior e inferior de 10 pixels e um espaçamento lateral (tanto à direita quanto à esquerda) de 30 pixels.
- Também dá para alinhar a posição da imagem com relação ao que vem depois dela, que pode ser um texto ou outra imagem.
<img src=”figura.jpg” align=”center”>
<img src=”figura.jpg” align=”left”> imagem do lado esquerdo e texto do lado direito. <br>
Dica: lembre-se que uma figura é como uma letra dentro de uma linha. Se
você quer que a figura apareça no meio da página, você deve colocá-la
num parágrafo e alinhar o parágrafo ao centro. Assim:
<p align="center"> <img src=”figura.jpg” align=”center”> Texto ao lado da figura </p>
- Bordas em uma imagem:
<img src=”figura.jpg” align=”center” border=”0”>
Um caso especial de utilização de imagens é associado ao atributo "background". Neste caso, você não trabalha com a tag "src" e sim com o atributo "background". Sendo assim, este atributo deve estar dentro de uma tag, que pode ser:
<body> - para colocar uma imagem no fundo da página
<td> - para colocar uma imagem no fundo de uma célula de tabela
<tr> - para colocar uma imagem no fundo de uma linha de tabela
<table> - para colocar uma imagem no fundo de uma tabela
background=”[caminho] [nome da figura]“
(lembre-se das regras com relação ao caminho da figura)
<body background=”figuras/figura.jpg“>
