HOME PAGE JAVASCRIPT
Botões Cálculos Datas Essenciais Janelas Flutuantes Menus
HTML CSS FLASH PHP ASP GERADORES CORES MISCELANEA Contato  






Parágrafos


Através de um exemplo prático é possível entender bem a noção de parágrafos: copie o codigo a seguir e cole no bloco de notas. Salve o arquivo com extensão .htm (por exemplo pagina.htm) feche-o.



Abra a página.htm, clique com o botão direito do mouse dentro da página, no menu de atalho clique em exibir o código fonte. Digite um novo texto  na linha abaixo do texto já existente conforme exemplificado a seguir e destacado na cor vermelha.

Esta é minha primeira página.
E logo vou torná-la plano de fundo da minha área de trabalho.

Salve o arquivo editado, feche-o e atualize a página.

Observe o resultado. O novo texto, embora digitado como um novo parágrafo dentro do código fonte, não se apresentou de tal forma quando exibida no navegador. Isso ocorreu por falta de comando de parágrafo. Clique com o botão direito dentro da página, no menu de atalho exibido clique em exibir código fonte e acrescente a TAG <br> entre o texto anterior e o texto adicionado conforme exemplificado abaixo e destacado na cor vermelha

Esta é minha primeira página <br>
E logo vou torná-la plano de fundo da minha área de trabalho.

Salve as alterações e atualize a página.

O comando <p></p> indica um novo parágrafo com alinhamento próprio e realiza uma quebra de linha com espaçamento duplo, isto é, deixa uma linha em branco após a TAG de fechamento </p>.
<br> quando empregado entre as tags acima realiza uma quebra de linha simples, isto é, o texto segue imediatamente na linha abaixo da TAG <br>
Os navegadores só entenderão que houve uma quebra de linha através dos comandos acima.  Portanto, quando estiver editando o código fonte da sua página, não adianta  nada pressionar a tecla Enter no final de uma linha.  Para quebra múltiplas de linhas basta acrescentar varias tags <br> consecutivas.

Como já visto, o comando <p></p> define um novo parágrafo e indica ao navegador que o mesmo deverá ser apresentado em uma nova linha. É possível definir o alinhamento de um determinado parágrafo inserindo o atributo ALIGN dentro da tag de abertura <P>.

Os valores possíveis para o atributo ALIGN, são: left, center, right e justify.
<P ALIGN="left">
Define um parágrafo e alinha à esquerda (left)

<P ALIGN="right">
Define um parágrafo e alinha à direita (right).

<P ALIGN="center">
Define um parágrafo e alinha ao centro (center).

<P ALIGN=”justify”>
Define um parágrafo com alinhamento justificado

Obs: a noção de espaçamento em HTML é um pouco diferente, os navegadores só reconhecem um único espaço. Para contornar isto, utiliza-se uma referência especial  &nbsp; (Non-Breaking SPace), que não é uma ‘tag’. Se quiser um espaçamento maior entre as letras de uma palavra deve-se utilizar este recurso inserindo-o tantas vezes quanto necessário para obter o espaçamento desejado.
Exemplo: O texto a seguir digitado no código fonte
E S T A&nbsp;&nbsp;&nbsp; É&nbsp;&nbsp;&nbsp; M I N H A PRIMEIRA PÁGINA., será visualizado no navegador da seguinte forma: E S T A    É    M I N H A PRIMEIRA PÁGINA.


Posicionamento com <DIV>
O comando <div></div> funciona de modo similar ao comando <p></p>. É utilizado para alinhar do mesmo modo vários parágrafos, sem ter que repetir para cada um o mesmo alinhamento, isto é, divide a página em blocos que podem ser alterados de acordo com características comuns.
Atributos:
ALIGN="center", "left" ou "right"
Alinha todo o bloco de acordo com a posição.

STYLE="propriedades"
Altera a apresentação do conteúdo do bloco (cor, fonte, tamanho, sublinhado, estilo, espaçamento) de acordo com uma lista de propriedades de estilo.


Comando <PRE></PRE>
O browser ignora quaisquer endentações ou linhas em branco no texto do código fonte. O HTML se baseia somente nas etiquetas para instruções de codificação de formato, e sem as etiquetas <P> o documento se transforma num grande parágrafo. A exceção é o texto etiquetado como preformatado através do uso do comando <pre> </pre>. Usando-o  no código fonte, todos os espaços e entradas de parágrafo serão respeitados.
Obs: o tag <PRE> muda o tipo de caractere para uma fonte monoespaçada. Uma fonte monoespaçada é aquela na qual todos os caracteres ocupam o mesmo espaço horizontal, ao contrário da fonte proporcional, na qual o "l" ocupa menos espaço do que o "w", por exemplo.

Utilize a propriedade CSS letter-spacing para obter os espaçamentos desejados.


Outro controle sobre o alinhamento dos elementos da página pode ser conseguido através da mudança de margem.  O comando <BLOCKQUOTE> </BLOCKQUOTE> serve para aumentar a margem. O efeito desse comando pode ser acumulado para conseguir margens maiores. 
Exemplos:  <BLOCKQUOTE><BLOCKQUOTE>Texto</BLOCKQUOTE></BLOCKQUOTE>

Texto


Na caixa de Teste on-line abaixo você poderá configurar e testar os comandos acima.

Teste on-line: