Programação
 › Algoritmo  › C/C++  › Java
Web
 › HTML/XHTML  › JavaScript  › PHP
Sistema Operacional
 › Comandos de DOS  › Windows  › Linux  › Mac/BSD
Office
 › Word / Writer  › Excel / Calc
Áreas do Site
 › Download  › Fórum  › Blog
Recomendamos
Computadores e Informática em Lisboa
TI Expert » Programação » Web » HTML/XHTML » Imagem - tag IMG

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)

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.

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>
...
Fonte: w3.org
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

Creative Commons License
Autor: Denys William Xavier
Este artigo está sob Licença Creative Commons.

Faça o download da versão em PDF Indique nosso site Gostou?
Indique nosso site!
Este artigo foi
lido 46112 vezes
Bookmark e Compartilhe

Páginas Relacionadas

Enquete
O Google Chrome OS irá desbancar o Microsoft Windows 7?
» ProgramaçãoAlgorítmo | C/C++ | Java

» WebHTML/XHTML | JavaScript | PHP

» Sistema OperacionalComandos de DOS | Windows | Linux | Mac/BSD

» OfficeWord/Wirter | Excel/Calc

» Áreas do SiteDownloads | Fórum | Blog