Dominando a Formatação de Código HTML

Introdução

No desenvolvimento web, por vezes necessitamos exibir conteúdo relacionado à programação ou à computação nas nossas páginas web. Quando queremos mostrar termos específicos, como o nome de uma função ou de uma variável, podemos usar a tag <code> para envolvê-los. Esta tag altera a família de fontes do texto envolvido para uma fonte monoespaçada, como courier.

Nota: 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, pode atualizar o separador 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.

Adicione a Tag de Código

Primeiramente, crie um ficheiro index.html no seu sistema local e abra-o usando um editor de código da sua preferência.

Em seguida, vamos adicionar a tag <code> ao seu ficheiro HTML. A sintaxe para esta tag é direta. Ela possui uma tag de abertura e uma tag de fechamento envolvendo o texto que deseja exibir.

<body>
  <!-- Adicionar a tag code -->
  <p>Este é um exemplo de uso da tag <code>code</code> em HTML.</p>
</body>

No bloco de código acima, envolvemos o termo code dentro da tag <code>. Isso faz com que o texto envolvido apareça numa fonte monoespaçada.

Adicione a Tag Pre para exibir código em múltiplas linhas

Se precisar exibir código de programação em múltiplas linhas, use a tag <pre> com a tag <code>. Vamos ver como isso funciona adicionando o seguinte código ao seu ficheiro index.html.

<body>
  <!-- Usando a tag pre com a tag code -->
  <pre>
      <code>
         function multiply(a, b) {
            return a * b;
         }
         // Chamar a função
         multiply(2, 3);
      </code>
   </pre>
</body>

Neste bloco de código, usamos a tag <pre> para indicar que queremos exibir o código em formato de bloco. Dentro da tag <pre>, adicionamos a tag <code> para indicar que estamos envolvendo código de programação.

Use os atributos globais e atributos de evento

Você pode usar os atributos globais e atributos de evento com a tag <code>.

<body>
  <!-- Usando atributos globais com a tag code -->
  <p>
    <code class="highlight" style="color: red" title="This is a title"
      >Some code</code
    >
  </p>
</body>

No bloco de código acima, usamos os atributos class, style e title com a tag <code>.

Adicione Estilo CSS Padrão

Se você não especificar nenhum estilo para a tag <code>, ela usará as configurações CSS padrão. A maioria dos navegadores usa monospace como a font-family padrão para a tag <code>.

<body>
  <!-- Estilo CSS padrão para a tag de código HTML -->
  <p>
    <code>Default CSS style</code>
  </p>
</body>

Resumo

A tag <code> é usada para incluir conteúdo relacionado à programação ou à computação. Ao usar esta tag, você pode exibir o texto incluído em uma fonte monoespaçada como courier. Você também pode usar a tag <pre> com a tag <code> para exibir código de programação em várias linhas. A tag <code> suporta atributos globais e atributos de evento. Se você não especificar nenhum estilo para a tag <code>, ela usará as configurações CSS padrão com monospace como a font-family padrão.

Código de Computador HTML