Creando una Salida de Muestra con la Etiqueta HTML

Introducción

HTML es la base de cada sitio web, y es esencial tener una buena comprensión de los diferentes elementos disponibles para crear páginas web. Un elemento así es la etiqueta <samp> en la que nos centraremos en este laboratorio. La etiqueta <samp> se utiliza para mostrar una muestra o salida de un código de computadora.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70827{{"Salida de Muestra de HTML"}} html/head_elems -.-> lab-70827{{"Salida de Muestra de HTML"}} html/text_head -.-> lab-70827{{"Salida de Muestra de HTML"}} html/inter_elems -.-> lab-70827{{"Salida de Muestra de HTML"}} end

Creando una página HTML básica

Crea un nuevo archivo llamado index.html.

En este paso, crearemos una página HTML básica y configuraremos la estructura necesaria para la etiqueta <samp>.

<!DOCTYPE html>
<html>
    <head>
        <title>Creating a Sample Output with the HTML tag</title>
    </head>
    <body>
        <h1>Using the <samp> Tag</h1>
    </body>
</html>

En el código anterior, hemos agregado la estructura básica de una página HTML. También hemos agregado una etiqueta <h1> que contendrá el título de la página.

Agregando el elemento

En este paso, agregaremos la etiqueta <samp> a la página para crear una muestra de salida de un programa de computadora.

<!DOCTYPE html>
<html>
    <head>
        <title>Creating a Sample Output with the HTML tag</title>
    </head>
    <body>
        <h1>Using the <samp> Tag</h1>
        <p>Here is an example of using the <samp> tag:</p>
        <samp>Sample Text</samp>
    </body>
</html>

En el código anterior, hemos agregado una etiqueta de párrafo que explica el propósito de la etiqueta <samp>. Luego, se agrega la etiqueta <samp> con el texto de muestra, "Sample Text", dentro de ella.

Usando CSS para dar estilo al elemento

CSS se puede utilizar para modificar el estilo de la etiqueta <samp>. En este paso, haremos algunos cambios básicos a la etiqueta <samp>.

<!DOCTYPE html>
<html>
    <head>
        <title>Creating a Sample Output with the HTML tag</title>
        <style>
            samp {
                background-color: #f1f1f1;
                padding: 1em;
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <h1>Using the <samp> Tag</h1>
        <p>Here is an example of using the <samp> tag:</p>
        <samp>Sample Text</samp>
    </body>
</html>

En el código anterior, hemos agregado una etiqueta de estilo a la página. Dentro de la etiqueta de estilo, hemos definido las propiedades de color de fondo, relleno y radio de borde para la etiqueta <samp>.

Agregando la salida del código

En este paso, mostraremos cómo usar la etiqueta <samp> para mostrar la salida de un código de computadora.

<!doctype html>
<html>
  <head>
    <title>Creating a Sample Output with the HTML tag</title>
    <style>
      samp {
        background-color: #f1f1f1;
        padding: 1em;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>Output of a Computer Code:</h1>
    <samp>
      <code> print("Hello World"); </code>
    </samp>
  </body>
</html>

En el código anterior, hemos agregado un bloque de código dentro de la etiqueta <samp> para mostrar la salida de un código de computadora.

Resumen

En este laboratorio, hemos aprendido sobre la etiqueta HTML <samp> que se utiliza para crear salidas de muestra de código de computadora en páginas web. También hemos visto cómo se puede dar estilo a través de CSS y cómo se puede utilizar con el bloque de código.