Login: Senha: Registrar-se - Esqueci minha senha
.: Menu
Home
Artigos
Sign. dos Sonhos
Papel de Parede
Ilusões de Ótica
.: Bancos
Emoticons e Gifs
Ícones
Logos
.: Serviços
Mural de Recados
Usuários Online
Bloco de Notas
Formmail
Meu IP
.: Geradores
Gerador de Senhas
Barra de Rolagem
Recomende
Pop-up
Inverter Link
.: Canais
Apostilas
Arte/Cultura
Blog
Busca
Celular
Downloads
E-mail Grátis
Emoticons
Esportes
Filmes
Flogs
Fontes
GTA Mods
Host Grátis
Humor
Infantil
Informática
Jogos
Jogos Online
Linux
Músicas
Notícias
Offline
Redirecionadores
Sites Parceiros
Webdesigners
Webmasters
.: Na Faixa
Sobre
Contato
Recomende-nos
Termos de uso

Alinhamento de imagens com HTML

Enviado em 02/03/2007 - 06:51
Fonte: A A A A

Veja mais informações no site www.criarweb.com

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

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.

Fonte: www.criarweb.com

Enviado por: brunohcs

Esse artigo foi visualizado 7335 vezes

Compartilhe este artigo
facebook del.icio.us rec6 digg
Recomende este artigo a um amigo


Voltar
>> Comentários
 
Related Posts Plugin for WordPress, Blogger...
Comentar
Buscar Artigos:
.: Mods de GTA
GTA SA, VC, IV
SA - Carros
IV - Carros
Mods
GTA IV
SA - Mods Cleo
.: Saúde
Calculadora de IMC
Peso Ideal
Artigos de Saúde
.: Jogos Online
Ação
Aventura
Cassino
Classicos
Colorir
Corrida
Educativos
Esporte
Estrategia
Infantil
Luta
Meninas
Nave
Tiro
Outros
Adulto
Top Jogos
.: Parceiros
Mural de Recados Grátis
Papel de Parede
Show Moto
Web Visual
.: Nossos Números
Artigos: 930
Categorias: 50
Comentarios: 1863
Usuarios: 26631
Blocos de Nota: 87
Canais: 169

website monitoring service
eXTReMe Tracker
Na Faixa.net - Todos os direitos reservados. 12/2003 - 03/2024
Leia nossos Termos de Uso - Política de Privacidade
Desenvolvido por Web Visual
Crie seu Site - Papel de Parede Grátis - Show Moto - Mural de Recados Grátis - Dicas10