Alinhamento do texto


Então, se desejássemos introduzir um texto alinhado à esquerda escreveríamos:

“<p align=”left”>Texto alinhado à esquerda</p>”

O resultado seria:

Texto alinhado à esquerda

Para uma justificação ao centro:

“<p align=”center”>Texto alinhado ao centro</p>”

Que seria:

Texto alinhado ao centro

Para justificar à direita:

“<p align=”right”>Texto alinhado à direita</p>”

Cujo efeito seria:

Texto alinhado à direita

Como se vê, em cada caso o atributo align toma determinados valores que são escritos entre aspas. Em algumas ocasiões necessitamos especificar alguns atributos para o funcionamento correto da etiqueta. Em outros casos, o próprio navegador toma um valor definido por padrão. Para o caso de align, o valor padrão é left.

Nota: Os atributos têm seus valores indicados entre aspas (“), mas se não os indicamos entre aspas, também funcionará na maioria dos casos. Entretanto, é aconselhável que ponhamos sempre as aspas para acostumarmos a utilizá-las, por dar homogeneidade aos nossos códigos e para evitar erros futuros em sistemas mais meticulosos.

O atributo align não é exclusivo da etiqueta <p>. Outras etiquetas muitos comuns, que veremos mais adiante, entre as quais se introduzem texto ou imagens, costumam fazer uso deste atributo de forma habitual.

Imaginemos um texto relativamente longo onde todos os parágrafos estão alinhados à esquerda (por exemplo). Uma forma de simplificar nosso código e de evitar introduzir continuamente o atributo align sobre cada uma de nossas etiquetas é utilizando a etiqueta <div>.

Esta etiqueta por si só não serve para nada. Tem que estar acompanhada do atributo align e o que nos permite é alinhar qualquer elemento (parágrafo ou imagem) da maneira que nós desejarmos.

Assim, o código:

“<p align=”left”>paragrafo1</p>
<p align=”left”>parágrafo2</p>
<p align=”left”>paragrafo3</p>”

É equivalente a:

“<div align=”left”>
<p>paragrafo1</p>
<p>paragrafo2</p>
<p>paragrafo3</p>
</div>”

Como vimos, a etiqueta <div> marca divisões nas quais definimos um mesmo tipo de alinhado.

Exemplo prático:

Para praticar um pouco o que acabamos de ver, vamos propor um exercício que se pode resolver no seu computador. Simplesmente queremos construir uma página que tenha, por esta ordem:

2 parágrafos centralizados
3 parágrafos à direita
Um salto triplo de linha
1 parágrafo alinhado à esquerda

Não vamos escrever nesta ocasião o código fonte do exercício. Podemos vê-lo em funcionamento em nosso navegador e na janela podemos obter o código fonte selecionando no menu Exibir a opção Código fonte.