Download imagem

Alinhamento de imagens com HTML
Explica a maneira de alinhar a imagem dentro da página: centralizá-la, colocá-la à direita, à esquerda, etc.
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 <p> 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>
Ficaria assim:
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>
Ficaria assim:
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>
Ficaria assim:
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...