はじめに
HTML はすべてのウェブサイトの基礎であり、ウェブページを作成するために利用可能なさまざまな要素をしっかり理解することが不可欠です。そのような要素の 1 つが、この実験で焦点を当てる<samp>タグです。<samp>タグは、コンピュータコードのサンプルまたは出力を表示するために使用されます。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。右下隅の「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>タグの中にコードブロックを追加して、コンピュータコードの出力を表示しています。
まとめ
この実験では、Web ページでコンピュータコードのサンプル出力を作成するために使用される HTML の<samp>タグについて学びました。また、CSS を使ってそれをスタイリッシュにする方法と、コードブロックと一緒に使う方法も見てきました。
