Iniciando no HTML: Alinhamento de imagens com HTML


Autor/fonte: CriarWeb.com
E-mail/Url: http://www.criarweb.com/artigos/61.php



Digg del.icio.us

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>

Rode e veja o resultado.

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

Rode e veja o resultado.

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.

Rode e veja o resultado.

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




Enviado por xKuRt em 14/11/2006 às 13:05


Avaliação

Esta publicação ainda não foi avaliada!


Avaliar:


A avaliação de publicações é restrita a membros cadastrados e logados no nosso site.



Comentários

Este artigo ainda não foi comentado ou o(s) comentário(s) que foi(ram) enviado(s) a ele ainda não foi(ram) publicado(s).


Envio de comentário:




  

Sexta, 19 de Setembro de 2014




Leitura recomendada

SQL - Curso Pratico

Top 5 membros

Últimos membros online

  • 1em 19/09 às 22:37
  • nobioem 18/09 às 22:31
  • xKuRtem 18/09 às 19:55

Últimos membros cadastrados



Capa do livro
Sistemas Operacionais


Capa do livro
Análise das Estruturas: Métodos das Forças e Métodos dos Deslocamentos 2ªEd


Capa do livro
Oracle Database 11g SQL





Hostnet

IMD