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"(>)
Dessa forma, (<)IMG SRC="/icones/newred.gif" ALT="Novo!"(>) é apresentado nos browsers gráficos assim: Novo! e, nos browsers texto, assim: [Novo!]


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"(>)
Uma das vantagens de se usar esses atributos é que o browser pode montar mais rapidamente as páginas, por saber de antemão o espaço que deverá 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 âncora, ganha uma borda que indica sua condição. Por exemplo: folha

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... folha
(<)A HREF="URL">)(<)/A(>)

Se quisermos uma imagem sem borda... folha
(<)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:

Foto antiga do ICMC
Foto original


Foto antiga do ICMC
Foto com borda gerada por HTML


ALIGN
(<)IMG SRC="imagem" ALT="descrição" ALIGN=alinhamento(>)

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

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

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

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

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

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


Para ter duas imagens, uma em cada margem, numa mesma linha, escreva:

(<)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:

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


topicoIntrodução à Linguagem HTML
topicoO documento básico e seus compontentes
topicoFormatação de textos
topicoLigações (uso de links)
topicoInserção de imagens
itemAtributos básicos
itemMoldura






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

tecladoSuponhamos 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
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...

Terrateclado ...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.

tecladoTambém se pode posicionar o texto no ponto em que ambas as margens estão livres. TerraIsso é 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.


Última atualização 09/09/2003