Html-formatting
提供：Dev Guides
HTML-フォーマット
ワードプロセッサを使用する場合、テキストを太字、斜体、または下線付きにする機能に精通している必要があります。これらは、HTMLおよびXHTMLでテキストを表示する方法を示すために使用できる10のオプションのうちの3つにすぎません。
太字
*<b> ... </b>* 要素内に表示されるものはすべて、以下に示すように太字で表示されます-例
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>これは、次の結果を生成します-
イタリック体
*<i> ... </i>* 要素内に表示されるものはすべて、以下に示すように斜体で表示されます-例
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>
</html>これは、次の結果を生成します-
下線付きテキスト
*<u> ... </u>* 要素内に表示されるものはすべて、以下に示すように下線付きで表示されます-例
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>
</html>これは、次の結果を生成します-
ストライクテキスト
*<strike> ... </strike>* 要素内に表示されるものはすべて、下に示すようにテキストを通る細い線である取り消し線付きで表示されます-例
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>これは、次の結果を生成します-
等幅フォント
*<tt> ... </tt>* 要素のコンテンツは、等幅フォントで書き込まれます。 ほとんどのフォントは、さまざまな文字の幅が異なるため（たとえば、文字 'm'は文字 'i'より広い）、可変幅フォントとして知られています。 ただし、等幅フォントでは、各文字の幅は同じです。例
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>これは、次の結果を生成します-
上付きテキスト
*<sup> ... </sup>* 要素の内容は上付き文字で書かれています。使用されるフォントサイズは、周囲の文字と同じサイズですが、他の文字の上に文字の高さの半分で表示されます。例
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>これは、次の結果を生成します-
下付き文字
*<sub> ... </sub>* 要素の内容は下付き文字で書かれています。使用されるフォントサイズは周囲の文字と同じですが、他の文字の下に文字の高さの半分で表示されます。例
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>これは、次の結果を生成します-
挿入されたテキスト
*<ins> ... </ins>* 要素内に表示されるものはすべて、挿入されたテキストとして表示されます。例
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>これは、次の結果を生成します-
削除されたテキスト
*<del> ... </del>* 要素内に表示されるものはすべて、削除されたテキストとして表示されます。例
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>これは、次の結果を生成します-
大きなテキスト
*<big> ... </big>* 要素のコンテンツは、以下に示すように、それを囲むテキストの残りの部分よりも1フォントサイズ大きく表示されます-例
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>これは、次の結果を生成します-
小さいテキスト
*<small> ... </small>* 要素のコンテンツは、以下に示すように、それを囲むテキストの残りの部分よりも1フォントサイズ小さく表示されます-例
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>これは、次の結果を生成します-
コンテンツのグループ化
*<div>* および *<span>* 要素を使用すると、複数の要素をグループ化して、ページのセクションまたはサブセクションを作成できます。たとえば、ページ上のすべての脚注を<div>要素内のページに配置して、その<div>要素内のすべての要素が脚注に関連していることを示すことができます。 次に、スタイルをこの<div>要素にアタッチして、スタイルルールの特別なセットを使用して表示されるようにします。
例
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id = "menu" align = "middle" >
<a href = "/index">HOME</a> |
<a href = "/about/contact_us">CONTACT</a> |
<a href = "/about/index">ABOUT</a>
</div>
<div id = "content" align = "left" bgcolor = "white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>これは、次の結果を生成します-
一方、<span>要素は、インライン要素のみをグループ化するために使用できます。 したがって、グループ化する文または段落の一部がある場合、次のように<span>要素を使用できます。
例
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style = "color:green">span tag</span>
and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>
</html>これは、次の結果を生成します-
これらのタグは、CSSで一般的に使用され、ページのセクションにスタイルを添付できます。
