- Trabalhando com Imagens
- Inserindo uma imagem de fundo
BACKGROUND: Configura uma imagem (GIF,JPG,entre outras extensões) usada para preencher o fundo da tela
Exemplo
<body background="URL.Extensão">
Caso a imagem estiver localizada em uma pasta
<body background="nomedapasta/imagem.jpg">
Veja o código como fica:
</head> <body background="NOMEDAIMAGEN.gif"> Este texto se lê bem porque tem uma imagem de fundo </body> </html> |
Veja no navegador como fica:
- Inserindo uma imagem
<IMG SRC=URL_imagen>
URL é o endereço do arquivo, pode ser referenciada uma imagen na internet como google imagen só copiar a URL da imagen e colar depois de SRC=
Exemplo:
Veja o codigo como fica:
<html> <head> <title>Trabalhando com imagens</title> </head> <body bgcolor="silver"> <table width="1000" height="139" border="0" align="center" cellspacing="0"> <tr bgcolor="black"> <td height="81" colspan="3"> <div align="center"><img src="imagen.jpg" width="468" heigth="80"> </div></td></tr></table></body></html> |
Veja no navegador como fica
- Atributos básicos
Exemplo:
<IMG SRC="URL_imagen" ALT="Descrição_da_Imagem">
WIDTH e HEIGHT - São atributos de dimensão da imagem, em pixel. grande parte dos editores HTML coloca automaticamente valores destes atributos, quando indicamos a inserção de uma imagem.
Exemplo:
<IMG SRC="imagen" ALT="Descrição" WIDTH="Largura" HEIGHT="ALTURA">
Veja o código como fica.
<html> <head> <title> Trabalhando com imagens</title> </head> <body bgcolor=silver > <table width="1000" height="139" border="0" align="center" cellpacing="0"> <tr bgcolor="#333333"> <td height="81" colspan="3"><center><img src="logo.jpg" alt="logo.jpg" width="500" height="139"> </center></td></tr> </div> </table> </body> </html> |
Veja no navegador como fica:
Caso a imagem não carregue repare que existe uma descrição
Umas das vantagens de se usar esses atributos é que o browser pode montar mais rapidamente as paginas, por saber de entemão o espaço que devbera ser reservado a elas.
Border - quando uma frase é marcada como âncora de um link, ela se apresenta sublinhada; quando uma imagem faz as vezes de ancora, ganha borda que indica sua condição. Poren, por questoes de apresentasçãoi, nem sempre interessa termos essa borda ao redor da imagen, assim como o atributo BORDER podemos controlar esse detalhe.
Exemplo:
<IMG SRC="imagem.jpg" ALT="descrição BORDER="4">
Veja o codigo como fica:
<html> <head> <title> Trabalhando com imagens</title> </head> <body bgcolor=silver > <table width="1000" height="139" border="0" align="center" cellpacing="0"> <tr bgcolor="#333333"> <td height="81" colspan="3"><center><img src="IMAGEN.jpg" width="500" height="139" alt="logo" border="25"> </center></td></tr> </div> </table> </body> </html> |
Veja no navegador como fica:
- ALIGN = Determina o alinhamento da figura em relação ao textp.
- <IMG SRC="imagem.jpg" ALT="descrição" ALIGN="Alinhamento">
- ALIGN = TOP Alinha o texto da imagen, embora com linha compridas, o resultado nao seja muito bom.
- ALIGN = MIDDLE Alinha o texto proximo com o meio da imagen, embora com linhas compridas,o resultado nao seja muito bom.
- ALIGN = BOTTOM Alinha o texto proximo com a parte de baixo da imagen (padrão)
- ALIGN=LEFT alinha a imagem á esquerda, e tudo o que houver ao redor (texto,outras imagens) a partir do topo da imagem.
- ALIGN = RIGHT Alinha imagem á direitta, e tudo o que houver ao redor (texto,outras imagens) á partir do topo da imagem
Veja o código como fica:
<html> <head> <title> Trabalhando com imagens</title> </head> <body bgcolor=silver > <table bordercolor="red" width="1000" height="139" border="0" align="center"> <tr bgcolor="#333333"> <td height="81" align="left" colspan="3"> <img src="IMAGEM.jpg" width="500" height="139" alt="logo" align="right"> </td></tr> </div> </table> </body> </html> |
Veja no navegador como fica:
Agora veja a direita (RIGHT)
Veja o codigo:
<html> <head> <title> Trabalhando com imagens</title> </head> <body bgcolor=silver > <table bordercolor="red" width="1000" height="139" border="0" align="center"> <tr bgcolor="#333333"> <td height="81" colspan="3"><img src="58.jpg" width="500" height="139" alt="logo" align="right"> <font color="white" face="Comic Sans MS"> <p><h3>Chama-se genericamente Informática ao conjunto das Ciências da Informação, estando incluídas neste grupo: a teoria da informação, o processo de cálculo, a análise numérica e os métodos teóricos da representação dos conhecimentos e de modelação dos problemas. Habitualmente usa-se o termo Informática para referir especificamente o processo<br> de tratamento automático da informação por meio de máquinas eletrônicas chamadas computadores.</p></h3> </td></tr> </div> </table> </body> </html> |
Veja no navegador como fica:
Agora veja a esquerda (LEFT)
Veja o código como fica:
<html> <head> <title> Trabalhando com imagens</title> </head> <body bgcolor=silver > <table bordercolor="red" width="1000" height="150" border="0" align="center"> <tr bgcolor="#333333"> <td height="70" colspan="3"><img src="58.jpg" width="500" height="250" alt="logo" align="left"> <font color="white" face="Comic Sans MS"> <p><h3>Chama-se genericamente Informática ao conjunto das Ciências da Informação, estando incluídas neste grupo: a teoria da informação, o processo de cálculo, a análise numérica e os métodos teóricos da representação dos conhecimentos e de modelação dos problemas. Habitualmente usa-se o termo Informática para referir especificamente o processo de tratamento automático da informação por meio de máquinas eletrônicas chamadas computadores.</p></h3> </td></tr> </div> </table> </body> </html> |
Agora veja no navegador:
Agora veja o texto abaixo da imagem (BOTTOM)
Veja o código:
<html> <head> <title> Trabalhando com imagens</title> </head> <body bgcolor=silver > <table bordercolor="red" width="1000" height="150" border="0" align="center"> <tr bgcolor="#333333"> <td height="70" colspan="3"><img src="58.jpg" width="500" height="250" alt="logo" align="bottom"> <hr size="1" color="white"> <font color="white" face="Comic Sans MS"> <h4>Chama-se genericamente Informática ao conjunto das Ciências da Informação, estando incluídas neste grupo: a teoria da informação, o processo de cálculo, a análise numérica e os métodos teóricos da representação dos conhecimentos e de modelação dos problemas. Habitualmente usa-se o termo Informática para referir especificamente o processo de tratamento automático da informação por meio de máquinas eletrônicas chamadas computadores. </td></tr> </div> </table> </body> </html> |
Veja no navegador o resultado:
- Quando usar GIF e quando usar JPEG
Para alguns tipos de imagens o formato GIF é superior em qualidade de imagem, tamanho de arquivo e ou ambos. O que precisamos saber é para que tipo de imagens devemos aplicar JPEG
De maneira geral JPEG é melhor aplicado a imagens com variação de cor, fotografias, digitalizadas, por exemplo - coloridas ou com no minimo 16 níveis em tons de cinza. Quanto mais complexa a imagem, melhor o resultado JPEG
GIF é melhor para imagens com cores lisas (bordas, áreas com cores "puras") realizando, nesses casos , uma compreensão muito melhor do que JPEG faria. Nestes casos, JPEG produz imagens desfocadas. Por isso, imagens em preto-e-branco puros (sem tons de cinza) não devem ser processadas em JPEG.
