Formato de parágrafos em HTML

Como colocar parágrafos e saltos de linha em páginas web. Também vemos os cabeçalhos como parágrafos que servem de título.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 02/5/04
Valorize este artigo:
Nos capítulos anteriores apresentamos a título de exemplo, algumas etiquetas que permitem dar formato ao nosso texto. Neste capítulo veremos com mais detalhe, as etiquetas mais amplamente utilizadas e exemplificaremos algumas delas posteriormente.

Formatar um texto passa por tarefas tão evidentes como definir os parágrafos, justificá-los, introduzir marcadores, numerações, ou pôr em negrito, itálico, etc.

Vimos que para definir os parágrafos utilizamos a etiqueta <p> que introduz um salto e deixa uma linha em branco antes de continuar com o resto do documento.

Podemos também utilizar a etiqueta <br>, da qual não existe seu fechamento correspondente (</br>), para realizar um simples enter, com o que não deixamos uma linha em branco, e sim, somente mudamos de linha.

Nota: Existem outras etiquetas que não têm seu correspondente de fechamento, como <img> para as imagens, que veremos mais adiante. Isto ocorre porque um salto de linha ou uma imagem não começam e acabam mais adiante, simplesmente só têm presença em um lugar pontual.


Podemos comprovar que mudar de linha em nosso documento HTML sem introduzir algumas dessas ou de outras etiquetas não implica em absoluto uma mudança de linha na página visualizada.

Na realidade o navegador introduzirá o texto e não mudará de linha a não ser que esta chegue a seu fim ou se o especifiquemos com a etiqueta correspondente.

Os parágrafos delimitados por etiquetas <p> podem ser facilmente justificados à esquerda, ao centro ou à direita, especificando tal justificação no interior da etiqueta por meio de um atributo align. Um atributo não é mais do que um parâmetro incluído no interior da etiqueta que ajuda a definir o funcionamento da etiqueta de uma forma mais pessoal. Veremos ao longo deste manual uma quantidade de atributos muito úteis para todo tipo de etiquetas.

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.

Cabeçalhos

Existem outras etiquetas para definir parágrafos especiais, formatados como títulos. São os cabeçalhos ou Header em inglês. Como dissemos, são etiquetas que formatam o texto como um título, para o qual atribuem um tamanho maior de letra e colocam o texto em negrito.

Existem vários tipos de cabeçalhos que se diferenciam no tamanho da letra que utilizam. A etiqueta em concreto é a <h1>, para os cabeçalhos maiores, <h2> para os de segundo nível e assim, até <h6> que é o cabeçalho menor.

Os cabeçalhos implicam também uma separação em parágrafos, portanto, tudo o que for escrito dentro de <h1> e </h1> (ou qualquer outro cabeçalho) será colocado em um parágrafo independente.

Podemos ver como se apresentam alguns cabeçalhos a seguir:

<h1>Cabeçalho de nível 1</h1>

Será visto dessa maneira na página:

Cabeçalho de nível 1



Os cabeçalhos, como outras etiquetas de html, suportam o atributo align. Vejamos um exemplo de cabeçalho de nível 2 alinhado ao centro:

<h2 align="center">Cabeçalho de nível 2</h2>

Será visto dessa maneira na página:

Cabeçalho de nível 2



Outro exercício interessante é construir uma página web que contenha todos os cabeçalhos possíveis. Pode-se ver a seguir:

<html>
<head>
<title>Todos os cabeçalhos</title>
</head>

<body>

<h1>Cabeçalho de nível 1</h1>
<h2>Cabeçalho de nível 2</h2>
<h3>Cabeçalho de nível 3</h3>
<h4>Cabeçalho de nível 4</h4>
<h5>Cabeçalho de nível 5</h5>
<h6>Cabeçalho de nível 6</h6>

</body>

</html>


Pode-se ver o exercício em uma página a parte.

Conselho: Não devemos utilizar as etiquetas do cabeçalho para formatar o texto, ou seja, se queremos colocar um tipo de letra maior e em negrito, devemos utilizar as etiquetas que existem para isso (que veremos em seguida). Os cabeçalhos são para colocar títulos em páginas web e é o navegador o responsável de formatar o texto de maneira que pareça um título. Cada navegador então, pode formatar o texto ao seu gosto contanto que pareça um título.





Comentários do artigo
Foram enviados 5 comentários ao artigo
4 comentários não revisados
1 comentário revisado:
Cabeçalho de nivel 2
Por: supertio3
17/3/10
No exemplo Cabeçalho de nivel 2 o atributo align indica "center", mas o exemplo exibe o resultado à esquerda...
Vejamos um exemplo de cabeçalho de nível 2 alinhado ao centro:

<h2 align="center">Cabeçalho de nível 2</h2>

Será visto dessa maneira na página:


Cabeçalho de nível 2

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato