Creating a Sample Output with the HTML Tag

Introduction

HTML is the foundation of every website, and it's essential to have a good understanding of the different elements available to create web pages. One such element is the <samp> tag that we'll be focusing on in this lab. The <samp> tag is used to display a sample or output of a computer code.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

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/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70827{{"`HTML Sample Output`"}} html/head_elems -.-> lab-70827{{"`HTML Sample Output`"}} html/text_head -.-> lab-70827{{"`HTML Sample Output`"}} html/para_br -.-> lab-70827{{"`HTML Sample Output`"}} html/inter_elems -.-> lab-70827{{"`HTML Sample Output`"}} end

Creating a Basic HTML Page

Create a new file called index.html.

In this step, we'll create a basic HTML page and set up the structure required for the <samp> tag.

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

In the above code, we have added the basic structure of an HTML page. We have also added an <h1> tag that will contain the title of the page.

Adding The `Element`

In this step, we'll add the <samp> tag to the page to create a sample output of a computer program.

<!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>

In the above code, we've added a paragraph tag that explains the purpose of the <samp> tag. Then, the <samp> tag is added with the sample text, "Sample Text," inside of it.

Using CSS to Style the `Element`

CSS can be used to modify the style of the <samp> tag. In this step, we'll make some basic changes to the <samp>tag.

<!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>

In the above code, we've added a style tag to the page. Inside the style tag, we've defined the background color, padding, and border-radius properties for the <samp> tag.

Adding The Code Output

In this step, we'll show how to use the <samp> tag to display the output of computer code.

<!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>

In the above code, we've added a code block inside the <samp> tag to show the output of computer code.

Summary

In this lab, we've learned about the HTML <samp> tag that's used to create sample outputs of computer code in web pages. We've also seen how it can be styled using CSS and how to use it with the code block.

HTML Sample Output