Programação
 › Algoritmo  › C/C++  › Java
Web
 › HTML/XHTML  › JavaScript  › PHP
Sistema Operacional
 › Comandos de DOS  › Windows  › Linux  › Mac/BSD
Office
 › Word / Writer  › Excel / Calc
Áreas do Site
 › Download  › Fórum  › Blog
Recomendamos
Computadores e Informática em Lisboa
TI Expert » Programação » Web » HTML/XHTML » Criação de parágrafos - tag P

Editando o primeiro documento

Para criarmos nosso primeiro documento html, iremos iniciar do modo mais básico, que é inserir um simples texto.

Qualquer texto ou outro elemento html que será exibido no browser deve ser colocado dentro da tag BODY. Veja um pequeno exemplo:

<HTML>
  <HEAD>
    <TITLE>Exemplo</TITLE>
  </HEAD>
  <BODY>
    Minha primeira página HTML
  </BODY>
</HTML>

Isso é o suficiente para mostrar uma página com a barra título da janela escrita Exemplo e no documento escrito Minha primeira página HTML.

Mas, agora, vamos ao primeiro porém ao editarmos páginas ou documentos HTML. Se por acaso quiséssemos fazer um documento com duas linhas separadas usando o método acima, jamais conseguiríamos. Isso ocorre porque o código HTML não reconhece espaços em branco. Portanto, não importa o espaço que deixarmos entre uma palava e outra ou entre uma linha e outra, pois o máximo que irá acontecer será uma palavra ficar separada da outra. Veja o exemplo:

<HTML>
  <HEAD>
    <TITLE>Exemplo</TITLE>
  </HEAD>
  <BODY>
    Linha
    HTML.
    Outra
    linha
    HTML.
  </BODY>
</HTML>

Seria exibido no browser da seguinte maneira:

Exemplo de como será exibido o código html de várias linhas no browser

Então, se quisermos criar várias linhas, uma separada da outra, devemos criar parágrafos.

Criação de Parágrafos

A criação de parágrafos é definida pela tag P. Cada tag P deve conter abertura e fechamento para indicar onde termina o parágrafo.

Então para modificar a visualização acima faríamos:

<HTML>
  <HEAD>
    <TITLE>Exemplo com parágrafo</TITLE>
  </HEAD>
  <BODY>
    <P>Linha HTML.</P>
    <P>Outra linha HTML.</P>
  </BODY>
</HTML>
Exemplo de dois parágrafos

Modificar o alinhamento

O alinhamento do parágrafo é definido pela propriedade align que pode receber quatro valores diferentes:

valor efeito
left alinhar à esquerda
right alinhar à direita
center alinhar ao centro
justify justificar

Então, para criar um parágrafo alinhado diferentemente do outro faríamos.

<P ALIGN="left">Parágrafo à esquerda</P>
<P ALIGN="right">Parágrafo à direita</P>
<P ALIGN="center">Parágrafo ao centro</P>
<P ALIGN="justify">Parágrafo justificado</P>

Quebra de linha

A quebra de linha é usada apenas para mudar um determinado ponto do parágrafo de linha. Isso acarreta uma diferença na visualização.

Se prestarmos atenção, há um grande espaço deixado entre uma linha e outra do parágrafo, porque são dois parágrafos diferentes. Mas se quisermos criar um parágrafo com duas linhas, obrigatoriamente, usaremos a quebra de linha que é identificado pela tag BR.

Existe duas formas de usar a tag BR, se estivermos utilizando um código XHTML seremos obrigados a enclausurar a tag (fechá-la dentro dela mesma), mas não o fazemos se estivermos utilizando HTML. Em tese seria:

HTML -> <BR>
XHTML -> <BR />

Então, para finalizar, vejamos o código:

<HTML>
  <HEAD>
    <TITLE>Quebra de linha</TITLE>
  </HEAD>
  <BODY>
    <P>TI Expert <BR> www.tiexpert.net</P>
  </BODY>
</HTML>

Visualmente, conseguiríamos esta forma:

Exemplo de um único parágrafo com quebra de linha

Vale ressaltar que as recomendações para o novo HTML versão 5 diz que a tag P, preferencialmente, não deve ser usada para trechos de texto mais significativos. Por exemplo, se usarmos no rodapé da página um endereço de e-mail, ao invés de escrevermos esse endereço na tag P, deveríamos escrevê-lo dentro da tag ADDRESS própria para endereços

Fonte: w3.org
Características - tag P (texto - parágrafo)
uso HTML 4.01 <P> ... </P>
XHTML <P> ... </P>
HTML 5 <P> ... </P>
Formatação Padrão fonte Serif, 16px
cor #000000 (preto)
alinhamento esquerdo
margem superior 16px
margem inferior 16px
visualização bloco
Atributos Aceitos align, title, lang, id, class e style
Eventos Possíveis onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
Fonte: w3.org
Características - tag BR (texto - quebra de linha)
uso HTML 4.01 <BR>
XHTML <BR />
HTML 5 <BR>
Formatação Padrão visualização inline
Atributos Aceitos id, class, title, style, clear
Eventos Possíveis nenhum

Creative Commons License
Autor: Denys William Xavier
Este artigo está sob Licença Creative Commons.

Faça o download da versão em PDF Indique nosso site Gostou?
Indique nosso site!
Este artigo foi
lido 20319 vezes
Bookmark e Compartilhe

Páginas Relacionadas

Enquete
O Google Chrome OS irá desbancar o Microsoft Windows 7?
» ProgramaçãoAlgorítmo | C/C++ | Java

» WebHTML/XHTML | JavaScript | PHP

» Sistema OperacionalComandos de DOS | Windows | Linux | Mac/BSD

» OfficeWord/Wirter | Excel/Calc

» Áreas do SiteDownloads | Fórum | Blog