Cursos 24 Horas - Cursos 100% Online com Certificado

Aprenda Códigos HTML e Ganhe Mais Visitas - Parte 3

11 Comentários Autor : Notícia e blog 08 dezembro 2009

Centralizando imagens e links

Este recurso do html permite que você centralize qualquer código, link, imagem, sem a utilização de CSS facilitando e muito para os mais leigos, veja abaixo como é fácil:

Como exemplo vou utilizar o link que aprendemos a fazer no post anterior veja:
O código do link ficou da seguinte forma:
<a href='http://www.noticiaeblog.com'/>Notícia e blog</a>
O link gerado ficou assim:
Notícia e blog
Agora vamos aplicar a tag "center" para que ele fique no meio ou seja centralizado:
<center><a href='http://www.noticiaeblog.com'/>Notícia e blog</a></center>
O resultado será este abaixo:
Notícia e blog

Outra forma de centralizarmos é utilizando a tag "div" veja:
<div align='center'><a href='http://www.noticiaeblog.com'/>Notícia e blog</a></div>
O resultado é este abaixo ou seja o mesmo resultado da tag "center":

Colocando uma imagem a esquerda ou direita

Para colocarmos uma imagem, código ou link a esquerda ou direita da página também utilizaremos a tag "div" veja:
Para esquerda use: left
Para direita use: right


Veja o exemplo, para esquerda:
<div align='left'><a href='http://www.noticiaeblog.com'/>Notícia e blog</a></div>
O resultado é este abaixo:

Veja o exemplo, para direita:
<div align='right'><a href='http://www.noticiaeblog.com'/>Notícia e blog</a></div>
O resultado é este abaixo:




E aqui termina está pequena serie de tutoriais html em breve mais algumas dicas.

Para ver outras partes deste tutorial os links estão abaixo:
PARTE 1 , PARTE2.

    11 Comentários

    Geriel Barros disse...
    11 de dezembro de 2009 00:52 #

    Imagem lado a lado como posso colocar ? já tentei colocar duas imagens uma do lado da outra mais não consegui =/ , se vc souber eu agradeço ..Abraço ^^

    Notícia e blog disse...
    9 de janeiro de 2010 13:39 #

    @Geriel Barros, basta você colocar os códigos de imagem juntos veja um exemplo:
    <img src="url-da-imagem"/><img src="url-da-imagem"/><img src="url-da-imagem"/><img src="url-da-imagem"/><img src="url-da-imagem"/>

    Várias imagens uma do lado da outra.Fácil né!

    Anônimo disse...
    23 de junho de 2010 15:03 #

    E qual é a tag que preenche as laterais vazias

    Notícia e blog disse...
    23 de junho de 2010 21:24 #

    @Anônimo
    Explique melhor?

    Anônimo disse...
    24 de junho de 2010 19:35 #

    @Notícia e blog

    como deicho minha opagina html em tres partis esquerda centro e direita para postar tudo direitinho sem falhas de alinhamento

    Anônimo disse...
    24 de junho de 2010 19:39 #

    Como coloca em tres partis minha pagina html esquerda centro e direita mas tudo no mesmo alinhamento mas separados pra ficar bem definido? Obrigado

    Notícia e blog disse...
    24 de junho de 2010 19:41 #

    @Anônimo
    Com o uso de CSS é o meio mais fácil de fazer isso

    Anônimo disse...
    25 de junho de 2010 15:48 #

    Certo mas tem uma tag em html que tem que colocar junto "infinity" para que não movimente ela para laterais queria lembra qual a targ html e qual é a css obrigado des de ja

    Anônimo disse...
    25 de junho de 2010 15:53 #

    a tipo a tag hr que coloca uma linha horizontal agorea preciso da tag vertical este sei site é muito bom parabens cara.

    Anônimo disse...
    25 de junho de 2010 15:58 #

    Tipo a tag hr que coloca uma linha horizontal agora preciso da tag vertical este seu blog é muito bom parabens.Descupa os erros ai rsrsrs

    Rita Maria Tinoco disse...
    8 de setembro de 2010 15:58 #

    OBRIGADA POR ESTE TRABALHO GRANDIOSO... NOS ENSINAR, CONSEGUI COLOCAR GIFS LADO A LADO, HÁ MTO DESEJAVA APRENDER. PARABÉNS E SUCESSO PARA TODOS.
    MEU CARINHO,
    RITA MARIA TINOCO DORTAS

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.