Vimos em seu momento o atributo align que nos permitia alinhar o texto à direita, esquerda ou no centro de nossa página. Dissemos que este atributo não era exclusivo da etiqueta

e sim, que podia ser encontrado em outro tipo de etiquetas.

Sendo assim, <img> é uma dessas etiquetas que aceitam este atributo, mesmo sendo , neste caso, o funcionamento diferente.

Para alinhar uma imagem horizontalmente podemos fazer da mesma forma que o texto, ou seja, utilizando align dentro de uma etiqueta <p> ou <div>. Neste caso, o que incluiremos dentro desta etiqueta será a imagem no lugar do texto:

Este código mostrará a imagem no centro:

<div align="center"><img src="logo.gif"></div>

Entretanto, já dissemos que a etiqueta <img> pode aceitar o atributo align. Neste caso, a utilidade que lhe damos é diferente da anterior.

O fato de utilizar o atributo align dentro da etiqueta <img> nos permite, no caso de dar os valores left ou right, justificar a imagem do lado que desejamos uma vez que recheamos com texto o lado oposto. Dessa forma, incorporamos nossas imagens dentro do texto de uma maneira simples.

Aqui se pode ver o tipo de código a criar para obter tal efeito:

<p>
<img src="imagem.gif" align="right">Texto tão extenso quanto quisermos para que cubra a parte esquerda da imagem. Continuo colocando texto para que se veja o efeito, Bla bla bla bla bla bla bla...
</p>

Texto tão extenso quanto quisermos para que cubra a parte esquerda da imagem. Continuo colocando texto para que se veja o efeito, Bla bla bla bla bla bla bla...

<p>
<img src="imagen.gif" align="left">Texto tão extenso quanto quisermos para que cubra a parte direita da imagem. Continuo colocando texto para que se veja o efeito, Bla bla bla bla bla bla bla...
</p>

Texto tão extenso quanto quisermos para que cubra a parte direita da imagem. Continuo colocando texto para que se veja o efeito, Bla bla bla bla bla bla bla...

Se em algum momento desejarmos preencher esse espaço lateral, podemos passar a uma zona livre introduzindo uma quebra de linha <br> dentro do qual acrescentaríamos um atributo: clear

Sendo então, etiquetas do tipo:

<br clear="left">
Pulará verticalmente até encontrar a lateral esquerdo livre.
<br clear="right">
Pulará verticalmente até encontrar a lateral direita livre.
<br clear="all">
Pulará verticalmente até encontrar ambas laterais livres.

Exemplo de clear:

Texto tão extenso quanto quisermos que cubra a parte esquerda. Isto está debaixo da imagem.

Existe outro tipo de valores que pode adotar o atributo align dentro da etiqueta <img>. Isto é relativo ao alinhamento vertical da imagem.

Supomos que escrevemos uma linha ao lado de nossa imagem. Esta linha pode ficar, por exemplo acima, abaixo ou no meio da imagem. Ainda assim, pode que uma mesma linha tenhamos várias imagens de alturas diferentes que podem ser alinhadas de distintas formas.

Estes valores adicionais são:

Top
Ajusta a imagem à parte mais alta da linha. Isto quer dizer que, se existe uma imagem mais alta, ambas imagens apresentarão a borda superior na mesma altura.

Bottom
Ajusta o baixo da imagem ao texto.

Absbottom
Colocará a borda inferior da imagem ao nível do elemento mais baixo da linha.

Middle
Faz coincidir a base da linha de texto com o meio vertical da imagem.

Absmiddle
Ajusta a imagem ao meio absoluto da linha.

Estas explicações, que podem ser um pouco complicadas, serão mais facilmente assimiladas com um pouco mais de prática.

Falta explicar como introduzir debaixo da imagem um pé de foto ou uma explicação. Para isso, teremos que ver antes de mais nada as tabelas, nos próximos capítulos...