Создание примера вывода с использованием HTML-тега

Введение

HTML является основой любого веб-сайта, и необходимо хорошо понимать различные элементы, доступные для создания веб-страниц. Одним из таких элементов является тег <samp>, на котором мы сосредоточимся в этом лабораторном занятии. Тег <samp> используется для отображения примера или вывода компьютерного кода.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Создание базовой HTML-страницы

Создайте новый файл с именем index.html.

В этом шаге мы создадим базовую HTML-страницу и настроим структуру, необходимую для тега <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>

В приведенном выше коде мы добавили базовую структуру HTML-страницы. Мы также добавили тег <h1>, который будет содержать заголовок страницы.

Добавление элемента

В этом шаге мы добавим тег <samp> на страницу, чтобы создать пример вывода компьютерной программы.

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

В приведенном выше коде мы добавили тег параграфа, который объясняет назначение тега <samp>. Затем тег <samp> добавляется с образцовым текстом "Sample Text" внутри него.

Использование CSS для стилизации элемента

CSS можно использовать для изменения стиля тега <samp>. В этом шаге мы внесем некоторые базовые изменения в тег <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>

В приведенном выше коде мы добавили тег стиля на страницу. Внутри тега стиля мы определили свойства цвета фона, внутреннего отступа и радиуса скругления для тега <samp>.

Добавление вывода кода

В этом шаге мы покажем, как использовать тег <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>Output of a Computer Code:</h1>
    <samp>
      <code> print("Hello World"); </code>
    </samp>
  </body>
</html>

В приведенном выше коде мы добавили блок кода внутри тега <samp>, чтобы показать вывод компьютерного кода.

Резюме

В этом практическом занятии мы узнали о HTML-теге <samp>, который используется для создания примерных выводов компьютерного кода на веб-страницах. Мы также увидели, как его можно стилизовать с использованием CSS и как использовать его совместно с блоком кода.

HTML-пример вывода