Atributos básicos de imagem

ALT

Indica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no lugar da imagem nos browsers texto, ou quando se desabilita o carregamento de imagens em browsers gráficos. É recomendável que esteja sempre presente.

<IMG SRC="URL_imagem" ALT="descrição_da_imagem">

WIDTH e HEIGHT

Atributos de dimensão da imagem, em pixels. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicamos a inserção de uma imagem.

<IMG SRC="imagem" ALT="descrição" WIDTH="largura" HEIGHT="altura">

BORDER

Quando uma frase é marcada como âncora de um link, ela se apresenta sublinhada; quando uma imagem faz as vezes de âncora, ganha uma borda que indica sua condição. Por exemplo:

Porém, por questões de apresentação, nem sempre interessa termos essa borda ao redor da imagem. Assim, com o atributo BORDER, podemos controlar esse detalhe.

Se quisermos uma borda mais larga...
<A HREF="URL"><IMG SRC="imagem" ALT="descrição" BORDER=4></A>

Se quisermos uma imagem sem borda...
<A HREF="URL"><IMG SRC="imagem" ALT="descrição" BORDER=0></A>

Essa borda pode ser apresentada também em imagens que não são âncora de links. Basta aplicar, por exemplo, a formatação

<IMG SRC="icones/fotoicm.gif" ALT="Foto antiga do ICMC" BORDER=2>

Assim, é possível dar mais destaque a uma imagem, sem ser necessário editá-la:

ALIGN

Existem também atributos de alinhamento, que produzem os seguintes resultados:

ALIGN=TOP Alinha o texto adjacente com o topo da imagem, embora com linhas compridas o resultado não seja muito bom.

ALIGN=MIDDLE Alinha o texto adjacente com o meio da imagem, embora com linhas compridas o resultado não seja muito bom

ALIGN=BOTTOM Alinha o texto adjacente com a parte de baixo da imagem (default)

ALIGN=RIGHT Alinha imagem à direita, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem.

ALIGN=LEFT Alinha imagem à esquerda, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem.

<IMG align=left SRC="imagem.gif" alt="imagem"><IMG align=right SRC="imagem.gif" alt="imagem">...e se pode escrever à vontade entre as imagens!

Isso resulta em:

...e se pode escrever à vontade entre as imagens!

Um detalhe surgido com o alinhamento de imagens foi a necessidade de se liberar o texto desse alinhamento. Ou seja:

Suponhamos um texto mais ou menos curto, que desejamos colocar aqui, com a imagem ilustrativa...

...mas gostaríamos que este trecho já estivesse abaixo da imagem! De acordo com o comprimento da primeira frase, não seria possível usar o alinhamento TOP.

Para conseguir isso, seria necessário incluir diversos <BR> consecutivos, inserindo linhas em branco; mesmo assim, o resultado final poderia ser bem pouco elegante. Surgiu, então, o atributo CLEAR para <BR>.

Com esse atributo, podemos, por exemplo...

...ter um texto posicionado no ponto em que a margem direita fica livre, com <BR CLEAR=RIGHT>
ou no ponto em que a margem esquerda fica livre, com
<BR CLEAR=LEFT>
Dessa maneira, podemos controlar bem a posição relativa dos textos.

Também se pode posicionar o texto no ponto em que ambas as margens estão livres. Isso é conseguido com
<BR CLEAR=ALL>
E, assim, vimos tudo sobre quebras de linha depois de imagens!

ISMAP

Qualquer imagem pode funcionar como uma âncora de link, como vimos no item sobre bordas. ISMAP indica quando uma imagem deve ser tratada como um mapa clicável, isto é, quando cada pixel de uma imagem pode ser considerado uma âncora para algum arquivo específico.

Os mapas serão apresentados com detalhes na seção de assuntos avançados, sob o item Interação.