Criando uma Saída de Amostra com a Tag HTML - Tutorial Completo

Introdução

HTML é a base de todo website, e é essencial ter um bom entendimento dos diferentes elementos disponíveis para criar páginas web. Um desses elementos é a tag <samp> que focaremos neste laboratório. A tag <samp> é usada para exibir uma amostra ou saída de um código de computador.

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 uma Página HTML Básica

Crie um novo arquivo chamado index.html.

Neste passo, criaremos uma página HTML básica e configuraremos a estrutura necessária para a tag <samp>.

<!DOCTYPE html>
<html>
    <head>
        <title>Criando uma Saída de Amostra com a tag HTML</title>
    </head>
    <body>
        <h1>Usando a tag <samp></h1>
    </body>
</html>

No código acima, adicionamos a estrutura básica de uma página HTML. Também adicionamos uma tag <h1> que conterá o título da página.

Adicionando o Elemento `<samp>`

Neste passo, adicionaremos a tag <samp> à página para criar uma saída de amostra de um programa de computador.

<!DOCTYPE html>
<html>
    <head>
        <title>Criando uma Saída de Amostra com a tag HTML</title>
    </head>
    <body>
        <h1>Usando a tag <samp></h1>
        <p>Aqui está um exemplo de uso da tag <samp>:</p>
        <samp>Sample Text</samp>
    </body>
</html>

No código acima, adicionamos uma tag de parágrafo que explica o propósito da tag <samp>. Em seguida, a tag <samp> é adicionada com o texto de amostra, "Sample Text", dentro dela.

Usando CSS para Estilizar o Elemento `<samp>`

CSS pode ser usado para modificar o estilo da tag <samp>. Neste passo, faremos algumas alterações básicas na tag <samp>.

<!DOCTYPE html>
<html>
    <head>
        <title>Criando uma Saída de Amostra com a tag HTML</title>
        <style>
            samp {
                background-color: #f1f1f1;
                padding: 1em;
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <h1>Usando a tag <samp></h1>
        <p>Aqui está um exemplo de uso da tag <samp>:</p>
        <samp>Sample Text</samp>
    </body>
</html>

No código acima, adicionamos uma tag de estilo à página. Dentro da tag de estilo, definimos as propriedades de cor de fundo, preenchimento (padding) e raio da borda (border-radius) para a tag <samp>.

Adicionando a Saída de Código

Neste passo, mostraremos como usar a tag <samp> para exibir a saída de um código de computador.

<!doctype html>
<html>
  <head>
    <title>Criando uma Saída de Amostra com a tag HTML</title>
    <style>
      samp {
        background-color: #f1f1f1;
        padding: 1em;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>Saída de um Código de Computador:</h1>
    <samp>
      <code> print("Hello World"); </code>
    </samp>
  </body>
</html>

No código acima, adicionamos um bloco de código dentro da tag <samp> para mostrar a saída do código de computador.

Resumo

Neste laboratório, aprendemos sobre a tag HTML <samp>, que é usada para criar saídas de amostra de código de computador em páginas web. Também vimos como ela pode ser estilizada usando CSS e como usá-la com o bloco de código.

Saída de Amostra HTML