Como alinhar imagens e textos com o atributo align

Nas últimas aulas de nosso curso de HTML, aprendemos sobre como inserir imagens em um site com a tag img e como definir altura e largura de uma figura com os atributos height e width.
Porém, só mostramos imagens.

Agora vamos introduzir um conceito importante sobre o uso de imagens e textos juntos, o de alinhamento, através do atributo align.

Alinhando, dividindo e organizado o conteúdo de seu site em HTML

Pois bem, se está lendo este tutorial de nossa apostila de HTML, já deve entender bastante coisa sobre a criação de sites. Certamente já passou pela seção de textos e sabe formatar e editar bem seu conteúdo textual, e agora com esta seção, já é capaz de inserir imagens em seus websites.

Então, entre em um site de algum grande portal de notícias. Sério, entre o Terra.
Vê texto? Vê imagens? É um website, ué. Saberia fazer igual? Parece complicado não?
Não é possível, em breve você poderá fazer parecido, mas temos muito chão (leia-se: muita coisa pra estudar :) antes.

Note como cada notícia está em um bloco separado. Há textos ao lado das imagens, na direita.
Há textos na esquerda e a imagem na direita, bem como em cima ou embaixo.

Há blocos maiores, outros menores, alguns com vídeos. Mas todos alinhados, como se fossem peças que se encaixam perfeitamente, como um quebra-cabeças. E à cada instante, os webmasters mudam as notícias e coisas escritas, e tudo se encaixa novamente.

Não tenha dúvida, boa parte disso usa coisa que aprendemos e iremos aprender aqui no HTML Progressivo, como HTML e CSS. Por isso, é bem comum praticar bastante a criação de textos ao lado de imagens, testar, tentar ver onde fica melhor. Enfim, se aprende a criar sites somente criando sites, estudando e tentando mesmo.

Neste tutorial vamos iniciar nossos estudos que envolvem o uso tanto te texto como de mídia (no caso, imagens). O que vai ser ensinado aqui é o que foi ensinado e usado por muito tempo.
Ainda usam, mas como estamos sempre falando, as coisas vem mudando.

Os alinhamentos e ordem das coisas hoje em dia são feitos através do CSS, mas é muito importante, muito mesmo, entender essas coisas no HTML, tentar fazer na unha para entender realmente como funciona um site. Não tenha pressa, em breve aprenderemos CSS!

O atributo align da tag < img >

A palavra align é inglesa, e como se pode adivinhar, significa alinhar.
E sua sintaxe vai precisar de uma informação: do local que você quer linhas.
Usamos o atributo align da seguinte maneira:
<img src="ENDEREÇO_DA_IMAGEM" align="LOCAL_DE_ALINHAMENTO">

Se quiser alinhar sua imagem na esquerda, use a palavra left.
Caso queira que a imagem se alinhe na direita, use right.
Para alinhar no meio, o local é middle.
Já para alinhar em cima, no topo, utilize a palavra top.
E por fim, para alinhar embaixo, use bottom.

Ou seja, sem segredos e sem novidades, sabendo inglês, nem precisa decorar a maioria dos atributos.
Se não souber inglês, está aprendendo agora pelo HTML Progressivo :)

Exemplo - Alinhando uma imagem na esquerda

Vamos usar nossa imagem do logo do PHP, de nome "PHP-logo.png", que está na pasta "imagens":

Como alinhar imagens em HTML

Vamos escrever algum texto no lado direito da imagem.
Para isso, primeiro criamos nosso parágrafo, para delimitar uma região no site: <p> </p>

Agora vamos colocar a tag img para colocar essa figura no parágrafo e alinhar na esquerda (left), bem delimitar um tamanho de 150x150 para a figura:
<p> <img src="imagens/PHP-logo.png" width="150" height="150" align="left">
</p>

Pronto. Criamos um parágrafo, colocamos uma figura, definimos seu tamanho e alinhamos ela na esquerda. Agora basta escrever neste parágrafo que o texto ficará na direita da figura.
Vamos escrever:
<p> <img src="imagens/PHP-logo.png" width="150" height="150" align="left">
No momento estou aprendendo a linguagem HTML pelo curso HTML Progressivo.<br />
Mas em breve eu pretendo aprender várias linguagens, como PHP. <br />
Ao lado, podemos ver o logotipo do PHP.<br />
</p>

Veja como fica o resultado:

Bacana, não? Está começando a parecer um site de verdade.
Devagar, aos poucos, estamos chegando lá...



Mais sobre o atributo align

Embora tenhamos usado para alinhar imagens em textos, é possível usar o atributo align para vários outros elementos do HTML.

Na verdade, a grande maioria dos atributos dos HTML podem ser usados em várias outras situações, com vários tipos outros tipos de tags.
Um exemplo disso é o atributo align que serve simplesmente para alinhar.

E o que podemos alinhar?
Imagens, obviamente.
Mas podemos alinhar parágrafos, por exemplo.
Também é possível usar o align com heading tags (H1, H2 etc) e até mesmo listas!

Por exemplo, para produzir o seguinte efeito:

Estou na direita!

Estou na esquerda!

Estou no meio, e ninguém me tira!

  • Nós também
  • estamos
  • no meio!


Usamos o seguinte código em nossa tag body:

<h1 align="right"> Estou na direita! </h1>
<p align="left"> Estou na esquerda! </p>
<h2 align="middle"> Estou no meio, e ninguém me tira! </h2>

<ul align="middle">
   <li>Nós também</li>
   <li>estamos</li>
   <li>no meio!</li>
</ul>

Bem simples, e sem segredo!

Exercício resolvido de HTML

Crie um site completo, com title, meta tags, charset que exiba três imagens de linguagens de programação a seguir:
Apostila de HTML para download
Curso de CSS grátis
Curso de HTML online grátis

Essas imagens devem ser exibidas com tamanho 150x150, devem estar alinhas na esquerda e na direita de cada imagem deve ter uma breve descrição da imagem.
Use heading tags para exibir o nome de cada linguagem em cima da imagem.
Desafio: ao lado da imagem HTML5, crie uma lista que diga 4 utilidades do HTML!

Ou seja, o resultado que desejamos é o da seguinte imagem:
Curso de CSS grátis online

Tente fazer! Vamos mostrar o código desse programa agora, mas tenha em mente que só irá aprender se realmente tentar! Do contrário, nunca será um bom Webmaster.

Código HTML:

<html>
   <head>
      <title>As linguagens mais importantes para web</title>
      <meta name="description" content="Saiba quais as principais linguagens para desenvolvimento Web: HTML, JavaScript e PHP">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   </head>

   <body>
      <h1> Linguagens importantes para o desenvolvimento web</h1>

      <h2> HTML </h2>
      <p><img src="imagens/HTML.png" align="left" height="150" width="150">
      O HTML é uma linguagem de marcação, que serve de base para a criação de sites. <br>
      Com o HTML, é possível a criação, exibição, formatação e editação de elementos de uma página de internet, como: 
      <ul>
	   <li>Textos</li>
           <li>Imagens</li>
	   <li>Formulários</li>
	   <li>Tabelas</li>
      </ul></p>

      <h2> JavaScript </h2>
      <p><img src="imagens/JavaScript.png" align="left" height="150" width="150"><br>
      A linguagem de programação JavaScript é usada para rodar scripts através dos navegadores.<br>
      Com o JavaScript, algumas aplicações podem ser rodadas sem a necessidade de haver trocar de informações com o servidor.<br>
      Assim, um documento poderia ser alterado através destes scripts que interagem diretamente com o usuário.<br>
      Iremos aprender JavaScript logo após estudar HTML.</p>
      
      <br>
      
      <h2> PHP </h2>
      <p><img src="imagens/PHP-logo.png" align="left" height="150" width="150">
      <br>A linguagem de programação PHP é do tipo interpretada e é, atualmente, uma das mais usadas no mundo.<br>
      O PHP é vastamente usado para criar aplicações e sistemas, do lado do servidor.<br>
      Usa-se muito o PHP para criar páginas com conteúdo de uma maneira dinâmica, além de ser possível acessar<br>
      e interagir com servidores e banco de dados.</p>

   </body>
</html>

Exercício proposto de HTML

Crie um site completo, como o do exemplo passado.
Mas ao invés de falar sobre as linguagens Web, mostre imagens e descrição das suas 3 bandas favoritas. Mostre o nome da banda com tags de cabeçalho (H1, H2...) bem como uma breve descrição delas ao lado da imagem.

8 comentários:

Anônimo disse...

Olá, por favor me tire 2 duvidas.
A primeira é: fico no html4 ou vou direto pro html5? Eu parei de estudar esta apostila pois estava com uma duvida,e fui para o html5, só que estou com duvida se fico no 4 ou vou no 5.
A duvida antig e que é a segunda é que quando vou colocar uma lista alinhado a imagem, os pontos ficam na imagem e não no lado.

mordekai moki disse...

obg ajudou mt mesmo

mordekai moki disse...

obg ajudou mt mesmo

mordekai moki disse...

obg ajudou mt mesmo

Anônimo disse...

Muito obrigada. Me ajudou muito! Valeu mesmo!!

Anônimo disse...

obrigado.

Bill Boldrin disse...

Bom dia!

Estou tentando criar um índice no meu blog do Wordpress, com imagens lado a lado em miniaturas.

Cada imagem dessa tem um link que direciona para outra página.

Gostaria de fazer quatro colunas, ou seja, quatro imagens uma ao lado da outra e depois ir descendo nas linhas.

Deu pra entender o que eu preciso? rsrs

Como fazer isso utilizando html??

Abraços!

Anônimo disse...

Não foi possível usar o atributo align diretamente com as listas ul. Tive que colocar o align em uma tag div antes da tag ul para a lista ficar no meio da página. Mas o outro problema é que as "bullets" não ficaram totalmente alinhadas no meio da página.