Tutorial Iniciante de HTML: Parágrafos

22 02 2008

Trecho de código HTML 

Agora que você já conhece a estrutura básica de um documento HTML, você pode mexer um pouco com o conteúdo. Volte pro seu editor de texto e adicione a linha seguinte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Minha primeira página web</title>
  </head>

  <body>
    Essa é minha primeira página web.
    Que excitante.
  </body>
</html>

Olhe para o documento no seu navegador.

Você deve ter esperado que o documento aparecesse como você digitou, em duas linhas, mas ao invés disso você vai ver alguma coisa como:

Essa é minha primeira página web. Que excitante.

Isso acontece porque navegadores web não fazem noção de que linha o seu código está. Ele também não tem noção da quantidade de espaços (você conseguiria o mesmo resultado se digitasse “Essa é minha primeira página web. Que excitante.”).

Se você quer que o texto apareça em muitas linhas, você tem que dizer isso explicitamente.

Edite suas duas linhas de código para que elas fiquem assim:

<p>Essa é minha primeira página web.</p>
<p>Que excitante.</p>

A tag p quer dizer parágrafo.

Olhe o resultado disso. As duas linhas agora aparecem em duas linhas.

Pense no HTML como se fosse um livro – com parágrafos aonde for apropriado.

Ênfase

Você pode enfatizar texto num parágrafo usando em (ênfase) e strong (ênfase forte). São dois jeitos de fazer praticamente a mesma coisa, e geralmente os navegadores mostram em em itálico e strong em negrito.

<p>Sim, foi <em>isso</em> que eu disse. É <strong>tão</strong> excitante.</p>

Quebras de linha

A tag de quebra de linha também pode ser usada para separar linhas como isso:

Essa é minha primeira página web.<br />Que excitante.

No entanto, esse método geralmente é usado em excesso. Ele não deve ser utilizado se dois blocos de texto devem estar separados um do outro (porque se é isso que você quer fazer você provavelmente quer a tag p).

Note que, como não há nenhum conteúdo envolvido pela tag de quebra de linha, não há tag de fechamento. Ela se fecha com uma “/” depois do “br”.

Páginas Relacionadas

Referência

BlogBlogs Tags: , ,

Esse material é uma adaptação do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Anúncios

Ações

Information

9 responses

13 05 2008
amanda

Qual a diferença entre quebrar a linha, usando o e criar uma nova linha, um parágrafo: … ???

visualmente falando, seria apenas o espaçamento entre as linhas, ou parágrafos?

=D

13 05 2008
amanda

ops ^^” *… quebrar a linha, usando o

=º²² sorry…

14 05 2008
Elomar França

Olá, Amanda

Entre essas duas, não existe muita diferença visual. A diferença entre os dois está no sentido que elas dão ao conteúdo. <br/> não tem muito significado, por isso deve ser evitada – ela é meio inútil. A tag <p> quer dizer que o conteúdo é um parágrafo, e deve ser usada sempre que o texto for um novo parágrafo.

Espero ter esclarecido isso.

Qualquer coisa, só perguntar.

10 06 2008
Álvaro

Olá, Elomar

Eu queria saber se tem como mudar de parágrafo, sem deixar uma linha em branco entre ele e o anterior(usando a tag ‘p’).

10 06 2008
Elomar França

Olá, Álvaro

Você pode retirar esse espaçamento usando CSS.

Se você ainda não viu os módulos de CSS, não se preocupe em entender esse código agora. Depois de CSS você volta pra cá e vai saber o que ele está fazendo. ;D

p { margin: 0; }

4 07 2008
18 08 2008
Wellington

Boa tarde Elomar.

Uma coisa que não consegui fazer é com que os acentos apareçam, no lugar dos acentos esta aparecendo caracteres especiais.

Obrigado.

18 08 2008
Elomar França

Olá, Wellington

Provavelmente foi algum problema na hora de salvar os arquivos. Lembre-se de salvar os arquivos como “UTF-8”. Como fazer isso vai depender do editor que você está usando. Mais sobre isso nessa página: https://codando.wordpress.com/2008/02/16/tutorial-de-html-iniciante-comecando/

De nada!

Qualquer coisa, é só chamar.

29 08 2013
artochess

Olá estou um pouco para exemplificar como estou passando neste momento , aprendendo um pouco sobre este tema “html”.

Vamos ao que interessa, vejo em um campo em outro mundo mas, afinco em aprender sobre isto.

TALVEZ resolvi entender ou conhecer que venho falado agora.
Pra eu mudar um pouco a página que venho junto com wordpress.com preciso aprender isto mesmo, ou melhor, Bê a Bâ.

Enfim já estou usufruindo o teu TUTORIAL e talvez por enquanto não venho procurará uma outra fonte de ensino.

Neste intervalo teu pra perceber o tal ensino e não deixando de esquecer o teu nível que vem fazendo.

Me desculpe em deixar escrever aqui e ao mesmo tempo em deixado esta oportunidade fluir

Atenciosamente

ArtoChess

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: