HTMLの学習パート4:HTMLでタイトル(見出し)を作成する方法
今回はその方法を説明しますHTMLで見出しを作成します。 HTMLドキュメントを作成する場合は、ドキュメントに見出しを追加することをお勧めします。見出しは、HTMLドキュメントのタイトルまたはサブタイトルになるフレーズまたは単語のコレクションです。
タイトルを付けることは確かに非常に必要ですHTML文書内の談話または記事の概要を提供します。見出しは、タイトルバーにHTMLドキュメントのタイトルとして表示されるタイトル(HTMLドキュメントのタイトル)ではなく、ドキュメントのコンテンツに談話またはテキストのタイトルとして表示されます。
HTMLは、さまざまなサイズの6レベルの見出しを提供します。見出しタグの使用はタグから始まります <Hx> タグで終わる </ Hx> どこに x 1から6までの見出しレベル番号です。xの値が大きいほど、見出しのサイズは小さくなります。ただし、xの値が小さいほど、タイトルの重要度は高くなります。つまり、h1はh6よりも重要な位置にあります。
まあ、見出しでは、付随する属性は 位置合わせ これにより、見出しをフラット、左、または中央に表示できます。以下は属性値の表です 位置合わせ 見出し:
価値 | 機能 |
左 | 見出しを左に揃えるには |
そうだね | 見出しを右に揃えるには |
センター | 見出しを中央に揃えるには |
詳細については、見出しを使用するためのコードを次に示します。
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Headings Di HTML</title>
</head>
<body>
<h1 align="left"> Heading 1</h1>
<h2 align="left"> Heading 2</h2>
<h3 align="left"> Heading 3</h3>
<h4 align="left"> Heading 4</h4>
<h5 align="left"> Heading 5</h5>
<h6 align="left"> Heading 6</h6>
</body>
</html>
上記のHTMLコードを実行すると、結果は以下の画像のようになります。
上の画像は、各見出しレベルのサイズの1〜6の違いを明確に示しています。次に、覚えておくべきことは、属性の使用です。 揃える 見出しはCSSの使用に置き換えられているため、HTML5ではサポートされていません。以下は、通常ブラウザによって表示されるCSSのh1からh6までのデフォルト値です。
H1 | H2 | H3 |
表示:ブロック; font-size:2em; margin-top:0.67em; margin-bottom:0.67em; margin-left:0; margin-right:0; font-weight:太字; |
表示:ブロック; font-size:1.5em; margin-top:0.83em; margin-bottom:0.83em; margin-left:0; margin-right:0; font-weight:太字; |
表示:ブロック; font-size:1.17em; margin-top:1em; margin-bottom:1em; margin-left:0; margin-right:0; font-weight:太字; |
H4 | H5 | H6 |
表示:ブロック; font-size:1em; margin-top:1.33em; margin-bottom:1.33em; margin-left:0; margin-right:0; font-weight:太字; |
表示:ブロック; font-size:.83em; margin-top:1.67em; margin-bottom:1.67em; margin-left:0; margin-right:0; font-weight:太字; |
表示:ブロック; font-size:.67em; margin-top:2.33em; margin-bottom:2.33em; margin-left:0; margin-right:0; font-weight:太字; |
水平分割線(タグ<hr>)
次は、<hr>タグの使用です。 <hr>タグを使用して、HTMLドキュメントに水平分割線を作成できます。 <hr>タグは、デフォルトでブラウザウィンドウに沿って線を作成します。 <hr>タグには、次のようないくつかの属性もあります。
属性 | 機能 |
揃える | フラット、中間、右のいずれの場合も、線形ライン |
サイズ | 線の太さをピクセル値に設定します |
ノーシェード | 3Dシャドウなしの線を表示します |
色 | 線に色を付ける |
幅 | ピクセルまたはパーセント値で線幅を設定します |
以下は、<hr>タグの使用例です。
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Garis Pemisah Horizontal Di HTML</title>
</head>
<body>
<h1 align="left"> Heading 1</h1>
<hr color="green" width="20%" size=3 align="left" >
<h4 align="left"> Heading 4</h4>
</body>
</html>
ブラウザに表示すると、結果は以下のようになります。
<hr>タグの幅設定では、pxまたはパーセント(%)を使用します。上記の例では、パーセント(%)を使用しています。つまり、幅はブラウザーウィンドウの幅の20%です。したがって、100%にすると、<hr>タグはブラウザウィンドウと同じ幅になります。
次に、<hr>タグの属性は上記の機能はCSSの使用に置き換えられているため、HTML5ではサポートされていません。また、HTML 4.01では<hr>タグは水平線として定義されていますが、HTML5では、談話のトピックの変更、ストーリーラインの変更などのテーマ別の区切りとして定義されています。
あなたが会うかもしれない次の記事でHTML5でサポートされていないHTMLタグがいくつかあります。それでも、これらのタグの機能を理解できるように説明します。次に、HTMLで段落を作成する方法について学習します。