Untitled Document

11ºANO » Desenvolvimento de páginas WEB estáticas » A TAG IMG

A TAG <IMG>

É usada para inserir imagens.

Atributos da tag <IMG> :

SRC (source)
Src é o atributo mais importante da tag IMG.

O atributo src é responsável em informar onde está a imagem. Essa informação é dada por meio da uma URL.

Exemplo:
<IMG SRC="computador.jpg" />

Width e Height
Um dos principais atributos da tag IMG também são width e height.
Estes atributos controlam a largura (width) e a altura (height) com que a imagem será representada no documento.
Se estes atributos forem omitidos, os browsers automaticamente usarão o tamanho original da imagem.

Exemplo:
<P ALIGN="center">Imagem Original (300x300)<BR />
<IMG SRC="computador.jpg" WIDTH="300" HEIGHT="300" /></P>
<P ALIGN="center">Imagem Original (150x300)<BR />
<IMG SRC="computador.jpg" WIDTH="300" HEIGHT="300" /></P>
<P ALIGN="center">Imagem Original (300x150)<BR />
<IMG SRC="computador.jpg" WIDTH="300" HEIGHT="300" /></P>

Alt
O atributo alt é obrigatório pela definição do HTML/XHTML.
Este atributo define um texto para ser visualizado no lugar da imagem.
Ou seja, caso a imagem não carregue, será apenas apresentado o texto.

Exemplo:
<IMG SRC="computador.jpg" ALT="Computador Pessoal" />

Align
Controla o alinhamento da imagem em relação ao texto.

Os valores possíveis são:

bottom: faz a parte de baixo da imagem ser alinhada verticalmente na linha base em que se encontra. Este é o valor padrão de todas as imagens.
middle: faz a parte central da imagem ser alinhada verticalmente na linha base em que se encontra.
top: faz a parte de cima da imagem ser alinhada verticalmente na parte de cima da linha do texto em que se encontra.
left: faz com que a imagem se fixe a esquerda, possibilitando o texto a ficar a direita.
right: faz com que a imagem se fixe a direita, possibilitando o texto a ficar a esquerda.

Hspace e Vspace
Ao utilizarmos os alinhamentos left e right do atributo align o texto irá ficar junto a imagem, muitas vezes proporcionando um aspecto não muito amigável. Hspace e Vspace servirão para definir um espaço entre o texto e a imagem.

Hspace define o espaçamento horizontal e Vspace define o espaçamento vertical.

Usemap
Imagens também podem ser mapeadas. Ou seja, podem ter trechos definidos para executar alguma coisa, como por exemplo, um link ou script. O atributo usemap deve conter o nome da tag MAP que define a área a ser mapeada.

Exemplo:
<IMG SRC="computador.jpg" USEMAP="#Map" />
<MAP NAME="Map"></MAP>

Links em Imagens
Também é possível usar imagens em links, porém há um detalhe a ser levado em conta.

Quando uma imagem for definida como hyperlink uma borda aparecerá ao redor dela. Para controlar a aparição dessa borda (ou, simplesmente, sumir com ela), podemos utilizar o atributo border.

Se definirmos o atributo border como 0, nenhuma borda irá aparecer.

Abaixo está um exemplo de como podemos definir um link para um site fictício usando uma imagem.

Exemplo:
<A HREF="http://www.lojafalsadepcs.com.br/">
<IMG SRC="computador.jpg" WIDTH="300" HEIGHT="300" ALT="Loja de Computadores" BORDER="0" /></A>

Exemplo 1:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemplo da TAG IMG</title>
</head>
<body>
<table align="center" border="1" bordercolor="#FF0000">
<tr><td align="center""><img src="imagens/flor1.gif" width="50%" height="50%"/></td></tr>
</table>
</body>
</html>

Exemplo 2:

<body>
<table width="414" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" style="color:#FFFFFF">
<tr>
<td cwidth="414" height="282" valign="top" bgcolor="#FF0000" style=" padding-left:20px; padding-top:20px">Roses are red.<br>
Violets are blue.<br>
Sugar is sweet.<br>
And so are you.<img src="imagens/flor1.gif" width="169" height="244" hspace="20" vspace="20" align="right"></td>
</tr>
</table>
</body>
</html>

Exemplo 3:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IMG ATRIBUTO MAP</title>
</head>

<body>