Atributos básicos
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">
<IMG SRC="/icones/newred.gif" ALT="Novo!"> é apresentado nos browsers gráficos 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">
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:BORDER, podemos controlar esse detalhe.
Se quisermos uma borda maior...
<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>
ALIGN
<IMG SRC="imagem" ALT="descrição" ALIGN=alinhamento>
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.
Outros alinhamentos procuram posicionar as imagens com maior precisão com relação ao texto circundante:
TOPTEXT, ABSMIDDLE e ABSBOTTOM.
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:
...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.
Introdução à linguagem HTML
Inserção de imagens
Atributos básicos