|
★ HTML文書 （文書構造）
よく目にする一般的な文書は、「見出し（大文字にして強調）、本文、表組」や「特記事項」などの要所要所を段落して、文章の読みやすさや区切りがわかるようにしていると思います。
HTML文書は、テキスト内容を「見出し要素」「段落要素」「リスト要素」「リンク要素（ハイパーリンク）」などの「要素」とする考え方を基に、それぞれの要素をタグで囲む（マークアップにより書き表す）文書構造になっています。
例えばテキストの前後を段落し、テキスト本文を中央に配置したい
▼
未知の苦HTML解道
▼
テキストの前後を段落にするときは、テキストを<P>〜</P>タグで挟みます。
<P>〜</P>タグで挟んたテキストの位置指定は、P要素の中に、ALIGN属性と、その値を指定します。
P要素におけるALIGN属性の既定値は、「左揃え（ALIGN="left"）」のため、そのままでよければ記述不要。
既定値以外の値は、センタリング指定が、ALIGN="center"、右揃え指定は、ALIGN="right"と記述します。
要素名と属性の間に半角スペース必須
| |←←←←←←←←
要 素
→→→→→→→→| |
| ↓要素名 P |
↓要素内容 | |
| <P ALIGN="center">未知の苦HTML解道</P> |
| |←←属 性→→| | | |
| |←値→| | | |
但し、テキストの位置指定をする場合、ALIGN属性とその値の記述は、HTML定義「HTML4.01 Transitional」では、非推奨属性のため、スタイルシートの設定を推奨しています。
▼
次に「文章全体」の一例です。
リンク２００％フリー
どのページにリンクを貼っても構わんとデス。どんどん貼って頂戴。
"リンクを貼ったよ"と連絡を貰った暁には、管理人の目に、一滴のナミダ。
泣いて？喜ぶでありんス！！
■サイト名・・・未知の苦HTML解道
■リンク先URL・・・http://www14.plala.or.jp/hrm/
■管理人・・・Yah!
■紹介コメント
- 収集したHTML定義（ルール）の備忘録＝セルフリファレンス
- HTMLリファレンス、フリーWEB素材を基に実践体験リポート
■バナー・・・勝手に持ってっテー（笑）
▼
上記の作例を要素別に検証してみます。
下記の作表は、上記と対比する箇所を、赤枠で囲んでいます。
見出し
見出し要素<H1〜H6>から、作例は<H3>〜</H3>
テキスト・・・テキスト・・・テキスト・・・<BR> 改行要素
テキスト・・・テキスト・・・テキスト・・・<BR> 改行要素
テキスト・・テキスト・・テキスト・・
■テキスト間空行 段落要素のPタグ
■テキスト間空行 段落要素のPタグ
■テキスト間空行 段落要素のPタグ
■テキスト間空行 段落要素のPタグ
<OL> 番号付きリストの開始タグ リスト要素
<LI> 1. 〜</LI> リスト項目
<LI> 2. 〜</LI> リスト項目
</OL> 番号付きリストの終了タグ リスト要素
■テキスト間空行 段落要素のPタグ
▼
リスト項目<LI>〜</LI>タグは、番号付きリスト要素<OL>〜</OL>タグで包括しています。
<LI>〜</LI>タグ内のリスト項目は、自動で連番になります。
LIタグは、終了タグ </LI> 省略可。
以上をふまえ、下記は、文章作例"リンク２００％フリー"のソースですが、
枠線とテキスト間余白の設定記述を省略した簡易ソースです。
▼
<H3 ALIGN="center">リンク２００％フリー</H3>
どのページにリンクを貼っても構わんとデス。どんどん貼って頂戴。<BR>
"リンクを貼ったよ"と連絡を貰った暁には、管理人の目に、一滴のナミダ。<BR>
泣いて？喜ぶでありんス！！
<P>■サイト名・・・未知の苦HTML解道</P>
<P>■リンク先URL・・・http://www14.plala.or.jp/hrm/ </P>
<P>■管理人・・・Yah!</P>
<P>■紹介コメント</P>
<OL>
<LI>収集したHTML定義（ルール）の備忘録＝セルフリファレンス </LI>
<LI>HTMLリファレンス、フリーWEB素材を基に実践体験リポート </LI>
</OL>
<P>■バナー・・・勝手に持ってっテー（笑）</P>
|
