img HTML

Prévia do material em texto

www.tiexpert.net – O ponto de encontro do estudante de TI
Páginas com Imagens
Na medida em que a internet evoluia, mas multimídia ela se tornava. Hoje em dia, é inconcebível a visão de 
uma página da internet que não tenha imagens.
O código HTML/XHTML nos possibilita facilmente inserir imagens em páginas, assim como configurá-las.
Usamos a tag IMG para isso. Essa tag possui vários atributos que serão vistos logo abaixo.
Src
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, como no exemplo abaixo.
...
<IMG SRC="computador.jpg" />
...
Width e Height
Um dos principais atributos da tag IMG também são width e height. Esses atributos controlam a largura 
(width) e a altura (height) que a imagem será representada no documento. Se estes atributos forem omitidos, 
os browsers automaticamente usarão o tamanho original da imagem.
A imagem que está sendo utilizada como exemplo acima tem 300 pixels de largura por 300 pixels de altura.
...
<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>
...
Imagem Original (300x300)
http://www.tiexpert.net/ver.php?page=146 Página 1
www.tiexpert.net – O ponto de encontro do estudante de TI
Imagem com Largura Modificada (150x300)
Imagem com Altura Modificada (300x150)
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, ou o browser que acessar esta 
página for apenas textual (por exemplo o Lynx), haverá uma forma alternativa de visualizar a informação 
daquela imagem. 
Nos dias atuais, o atributo alt tem sido muito empregado em técnicas de SEO (Search Engine Optimization) 
para melhorar a posição de sites em mecanismos de busca como o Cadê do Yahoo e, principalmente, o 
Google. 
...
<IMG SRC="computador.jpg" ALT="Computador Pessoal" />
...
Align
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. 
http://www.tiexpert.net/ver.php?page=146 Página 2
www.tiexpert.net – O ponto de encontro do estudante de TI
Há também outras opções, porém não são aceitas ou definidas pela W3C como absmiddle, absbottom, 
texttop e baseline.
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.
...
<IMG SRC="computador.jpg" USEMAP="#Map" />
<MAP NAME="Map"><!-- Aqui vem as definições da área mapeada --></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 a imagem dos 
exemplos acima.
...
<A HREF="http://www.lojafalsadepcs.com.br/">
 <IMG SRC="computador.jpg" WIDTH="300" HEIGHT="300" ALT="Loja de Computadores" 
BORDER="0" />
</A>
...
Características - tag IMG (objeto - imagem)
uso
HTML 4.01 <IMG SRC="..." ALT="...">
XHTML <IMG SRC="..." ALT="..." />
HTML 5 <IMG SRC="..." ALT="...">
Formatação Padrão visualização inline
Atributos Aceitos id, class, alt, lang, dir, title, style, ismap, usemap, align, width, height, border, hspace, vspace 
Eventos Possíveis onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
Fonte: w3.org
Autor: Denys William Xavier
Este artigo está sob Licença Creative Commons
Para ver uma cópia desta licença, visite http://creativecommons.org/licenses/by-nc-sa/2.5/br/
ou envie uma carta para Creative Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.
http://www.tiexpert.net/ver.php?page=146 Página 3