Dominando as Quebras de Linha em HTML

Introdução

Neste laboratório, você aprenderá como usar a tag HTML <br> para criar quebras de linha em uma página web.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Criar um arquivo HTML

Crie um novo arquivo chamado index.html e adicione a estrutura HTML básica.

<!doctype html>
<html>
  <head>
    <title>Quebras de Linha com HTML</title>
  </head>
  <body></body>
</html>

Adicionar texto à página web

Adicione algum texto ao corpo do seu documento HTML.

<body>
  <h1>Bem-vindo à minha página web!</h1>
  <p>
    Este é algum texto na minha página web. Eu quero criar uma quebra de linha
    aqui:
  </p>
  <p>Mas como eu faço isso?</p>
</body>

Usar a tag
para quebras de linha

Para adicionar uma quebra de linha entre os dois parágrafos de texto, adicione a tag <br> após a tag do primeiro parágrafo.

<body>
  <h1>Bem-vindo à minha página web!</h1>
  <p>
    Este é algum texto na minha página web. Eu quero criar uma quebra de linha
    aqui:
  </p>
  <br />
  <p>Mas como eu faço isso?</p>
</body>

Personalizar o espaçamento de quebra de linha com a margem CSS

Para personalizar a quantidade de espaço que uma quebra de linha cria, você pode usar a margem CSS. Adicione o seguinte código CSS ao seu arquivo HTML para criar 30px de espaço acima e abaixo de cada quebra de linha.

<head>
  <title>Quebras de Linha com HTML</title>
  <style>
    br {
      margin-top: 30px;
      margin-bottom: 30px;
    }
  </style>
</head>

Salve seu arquivo index.html e abra-o em um navegador web para ver a quebra de linha que você criou.

Resumo

A tag HTML <br> é uma maneira simples de criar quebras de linha em sua página web. Use-a para adicionar espaço entre parágrafos de texto, ou em qualquer outro lugar onde você precise quebrar uma linha. Personalizar a quantidade de espaço criada por uma quebra de linha é fácil com a margem CSS.

Quebra de Linha HTML