Dominando o Texto Pré-Formatado em HTML: Guia Completo

Introdução

Em HTML, a tag <pre> é usada para exibir texto pré-formatado. Ele aparece exatamente na página web como está presente em um arquivo HTML. Os espaços em branco usados dentro desta tag são exibidos como foram escritos. O texto escrito entre as tags <pre> é exibido em uma fonte de largura fixa. É recomendado usar a tag <pre> em caso de formatação incomum ou se você deseja escrever um trecho de código de computador.

Neste laboratório, você aprenderá como usar a tag <pre> para exibir texto pré-formatado 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.

Criando o arquivo HTML

Crie um arquivo index.html em um editor de texto de sua escolha e adicione o seguinte código HTML básico.

<!doctype html>
<html>
  <head>
    <title>Usando a Tag HTML Pre</title>
  </head>
  <body>
    <h1>Usando a Tag HTML Pre</h1>
  </body>
</html>

Adicionando conteúdo à página web

Adicione o seguinte código entre as tags <body> para criar um bloco de texto pré-formatado usando a tag <pre>.

<pre>
This text
will be
displayed
in a
fixed-width font
</pre>

Usando o atributo cols

Adicione o seguinte código entre as tags <pre> para definir o número preferido de caracteres que uma linha deve ter no bloco de texto pré-formatado usando o atributo cols.

<pre cols="20">
This text will be
displayed in a
fixed-width font
</pre>

Usando o atributo width

Adicione o seguinte código entre as tags <pre> para definir o número preferido de caracteres que uma linha deve ter no bloco de texto pré-formatado usando o atributo width.

<pre width="20">
This text will be
displayed in a
fixed-width font
</pre>

Usando o atributo wrap

Adicione o seguinte código entre as tags <pre> para indicar que o texto deve quebrar para a próxima linha usando o atributo wrap.

<pre wrap="hard">
This text will wrap to the
next line in the
preformatted text block
</pre>

Adicionando código de computador à página web

Adicione o seguinte código entre as tags <pre> para exibir um trecho de código de computador no bloco de texto pré-formatado.

<pre>
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Using the HTML Pre Tag&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Using the HTML Pre Tag&lt;/h1&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

Estilizando o bloco de texto pré-formatado

Adicione o seguinte código CSS entre as tags <head> para estilizar o bloco de texto pré-formatado.

<style>
  pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0;
    border: 1px solid black;
    padding: 10px;
  }
</style>

Salve as alterações feitas no arquivo index.html e abra-o em um navegador web para visualizar os resultados.

Resumo

Parabéns, você concluiu com sucesso o laboratório e aprendeu como usar a tag <pre> para exibir texto pré-formatado em uma página web. Você aprendeu como definir o número preferido de caracteres que uma linha deve ter no bloco de texto pré-formatado usando os atributos cols e width, e como indicar que o texto deve quebrar para a próxima linha usando o atributo wrap. Você também aprendeu como adicionar um trecho de código de computador ao bloco de texto pré-formatado e como estilizar o bloco de texto pré-formatado usando CSS.