御隠居のホームページ基礎
25. サンプルの作成
ここでは、これまで学習してきたことを基にして簡単なサンプルを作成してみましょう。 とは言っても、何も原稿が無く作成することはできませんから、「4.少し勉強しよう」の節をWebページとして作成してみることにします。
骨組みの作成
先ず最初に、骨格を作成します。ここでは、使用するDTDの種類やファイル名、 ページタイトル、文字エンコーディングなどの仕様を決め、それをマークアップします。
- DTDの種類
- `XHTML 1.0 Strict'を使用することとします。なお、下位互換を考慮し、XML宣言は指定しないものとします。
- ファイル名
- 作成するファイルとしては、HTMLファイルが１つ、画像ファイルが２つですが、HTMLファイルのファイル名を`sample.html'とし、 画像ファイルをそれぞれ`gazou1.jpg'、`gazou2.jpg'としてJPEG形式で用意します。なお、画像は適当なものを流用したものでもかまいません。
- ページタイトル
- ページタイトルは、「HTMLサンプル」とし、同じものをh1要素としても記述することにします。
- 文字エンコーディング
- 文字エンコーディングとしては、`UTF-8'を使用することとします。なお、今は練習なので、その他のmeta要素は記述しないものとします。
- ファイルの配置
- すべてのファイルは同一ディレクトリに配置するものとします。
以上の仕様に従って骨格を作成すると、次のようなコードになるでしょう。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>HTMLサンプル</title>
</head>
<body>
<h1>HTMLサンプル</h1>
</body>
</html>節見出しおよび最初の小節の作成
最初の節および小節部分の要素をデザインします。最初に節見出し「４. 少し勉強しよう」は、h2要素で、 次に小節見出し「タグで囲まれた全体を要素と言う。」の部分は、h3要素で記述することにします。 そして、「<title>とにかく作ろう</title>」の部分には、整形済みテキストとしてpre要素を使用します。 それ以外の部分は、すべて段落として記述します。
また、本文最初の行の要素」と最後の行の「title要素」の用語は強調とし、strong要素を指定することにします。 ただし、見出しに関しては強調を行わないものとします。 これらの条件で、マークアップすると、最初の節および小節は、次のようなコードになります。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>HTMLサンプル</title>
</head>
<body>
<h1>HTMLサンプル</h1>
<h2>４. 少し勉強しよう</h2>
<h3>タグで囲まれた全体を要素と言う。</h3>
<p>タグで囲まれた部分を要素と呼ぶ。例えば、</p>
<pre><title>とにかく作ろう</title></pre>
<p>の<title>は開始タグ、</title>は終了タグ、となり全体をtitle要素と呼ぶ。</p>
</body>
</html>画像の貼付け
次の小節では、画像を貼付ける部分があります。この部分にはimg要素を使用します。 それ以外の部分は、前と同様に考えて、それぞれ段落と整形済みテキストを使用します。
これらの条件で、マークアップすると、次のようなコードになります。 なお、整形済みテキストの部分は、２行で記述していますが実際には１行で記述します。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>HTMLサンプル</title>
</head>
<body>
<h1>HTMLサンプル</h1>
<h2>４. 少し勉強しよう</h2>
<h3>タグで囲まれた全体を要素と言う。</h3>
<p>タグで囲まれた部分を要素と呼ぶ。例えば、</p>
<pre><title>とにかく作ろう</title></pre>
<p>の<title>は開始タグ、</title>は終了タグ、となり全体をtitle要素と呼ぶ。</p>
<h3>要素は入れ子構造（階層構造）になる。</h3>
<p>HTMLファイル「test.html」を見ると、最も大きな要素は開始タグ<html>、
終了タグ</html>で囲まれた<strong>html要素</strong>だ。
そして、その中は<strong>head要素</strong>と<strong>body要素</strong>から構成されている。
さらに、head要素の内容はtitle要素、body要素の内容は<strong>p要素</strong>となっている。</p>
<p><img alt="階層構造図" src="gazou1.jpg" width="407" height="214" /></p>
<p>仮にABCD要素とEFGH要素というものがあったとき、</p>
<pre><code><ABCD>*****<strong><EFGH></strong>*****
<strong></EFGH></strong>*****</ABCD> 正しい</code></pre>
<p>という記述ならば、EFGH要素がABCD要素の入れ子となっているので正しいが、</p>
<pre><code><ABCD>*****<strong><EFGH></strong>*****
</ABCD>*****<strong></EFGH></strong> 誤り</code></pre>
<p>という記述の場合は、EFGH要素がABCD要素の入れ子になっていないので誤った記述となる
このように要素が完全な入れ子になった状態で記述する必要があるが、これを<strong>整形式</strong>と呼ぶ。
つまり、HTMLは整形式で記述しなければならないということだ。</p>
</body>
</html>残りの４つの小節を作成する
「html要素をルート（根）要素と言う。」、「html要素の中にはhead要素とbody要素をそれぞれこの順序で一つ記述しなければならない。」、 「head要素の中にはtitle要素を必ず一つ記述しなければならない。」、 「文法はDTD（Document Type Definition：文書型定義）によって規定されている。」の４つの小節をこれまでと同じ要領で作成します。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>HTMLサンプル</title>
</head>
<body>
<h1>HTMLサンプル</h1>
<h2>４. 少し勉強しよう</h2>
<h3>タグで囲まれた全体を要素と言う。</h3>
<p>タグで囲まれた部分を要素と呼ぶ。例えば、</p>
<pre><title>とにかく作ろう</title></pre>
<p>の<title>は開始タグ、</title>は終了タグ、となり全体をtitle要素と呼ぶ。</p>
<h3>要素は入れ子構造（階層構造）になる。</h3>
<p>HTMLファイル「test.html」を見ると、最も大きな要素は開始タグ<html>、
終了タグ</html>で囲まれた<strong>html要素</strong>だ。
そして、その中は<strong>head要素</strong>と<strong>body要素</strong>から構成されている。
さらに、head要素の内容はtitle要素、body要素の内容は<strong>p要素</strong>となっている。</p>
<p><img alt="階層構造図" src="gazou1.jpg" width="407" height="214" /></p>
<p>仮にABCD要素とEFGH要素というものがあったとき、</p>
<pre><code><ABCD>*****<strong><EFGH></strong>*****
<strong></EFGH></strong>*****</ABCD> 正しい</code></pre>
<p>という記述ならば、EFGH要素がABCD要素の入れ子となっているので正しいが、</p>
<pre><code><ABCD>*****<strong><EFGH></strong>*****
</ABCD>*****<strong></EFGH></strong> 誤り</code></pre>
<p>という記述の場合は、EFGH要素がABCD要素の入れ子になっていないので誤った記述となる
このように要素が完全な入れ子になった状態で記述する必要があるが、これを<strong>整形式</strong>と呼ぶ。
つまり、HTMLは整形式で記述しなければならないということだ。</p>
<h3>html要素をルート（根）要素と言う。</h3>
<p>最も大きな要素であるhtml要素のことを<strong>ルート要素</strong>と呼び、
そのhtml要素のことを<strong>HTML文書（ドキュメント）</strong>とも呼ぶ。</p>
<h3>html要素の中にはhead要素とbody要素をそれぞれこの順序で一つ記述しなければならない。</h3>
<p>各要素には、内側に記述できる要素に制限がある。また、必ず記述する必要がある要素、
必要に応じて省略できる要素もある。これらのルールを、ここでは<strong>文法</strong>と呼ぶことにする。</p>
<h3>head要素の中にはtitle要素を必ず一つ記述しなければならない。</h3>
<p>title要素は文書全体に付ける文書名のようなもので、
ブラウザのウィンドウタイトルとして表示されることが多い。</p>
<h3>文法はDTD（Document Type Definition：文書型定義）によって規定されている。</h3>
<p>文法は、DTDと呼ばれるファイルで規定されている。
このDTDにもいくつかの種類があり、それによってHTMLの種類が異なる。
また、SGMLのルールによって記述されたDTDによるものをHTML、
XMLのルールによって記述されたDTDによるものをXHTMLと呼ぶ。
本ページでは、XHTMLを原則として表現するが、これをHTMLに直すのは非常に簡単である。
整形式で、なおかつ、文法に従って正しく記述されたものを<strong>検証済み文書</strong>
あるいは<strong>妥当な文書</strong>と呼ぶ。</p>
</body>
</html>最後の小節を作成する
最後の小節「HTML、XHTMLそれぞれ３種類のDTDが存在する。」を作成します。 ここでは、これまでの要素以外に定義リスト（dl要素）を指定するので、注意してください。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title>HTMLサンプル</title>
</head>
<body>
<h1>HTMLサンプル</h1>
<h2>４. 少し勉強しよう</h2>
<h3>タグで囲まれた全体を要素と言う。</h3>
<p>タグで囲まれた部分を要素と呼ぶ。例えば、</p>
<pre><title>とにかく作ろう</title></pre>
<p>の<title>は開始タグ、</title>は終了タグ、となり全体をtitle要素と呼ぶ。</p>
<h3>要素は入れ子構造（階層構造）になる。</h3>
<p>HTMLファイル「test.html」を見ると、最も大きな要素は開始タグ<html>、
終了タグ</html>で囲まれた<strong>html要素</strong>だ。
そして、その中は<strong>head要素</strong>と<strong>body要素</strong>から構成されている。
さらに、head要素の内容はtitle要素、body要素の内容は<strong>p要素</strong>となっている。</p>
<p><img alt="階層構造図" src="gazou1.jpg" width="407" height="214" /></p>
<p>仮にABCD要素とEFGH要素というものがあったとき、</p>
<pre><code><ABCD>*****<strong><EFGH></strong>*****
<strong></EFGH></strong>*****</ABCD> 正しい</code></pre>
<p>という記述ならば、EFGH要素がABCD要素の入れ子となっているので正しいが、</p>
<pre><code><ABCD>*****<strong><EFGH></strong>*****
</ABCD>*****<strong></EFGH></strong> 誤り</code></pre>
<p>という記述の場合は、EFGH要素がABCD要素の入れ子になっていないので誤った記述となる
このように要素が完全な入れ子になった状態で記述する必要があるが、これを<strong>整形式</strong>と呼ぶ。
つまり、HTMLは整形式で記述しなければならないということだ。</p>
<h3>html要素をルート（根）要素と言う。</h3>
<p>最も大きな要素であるhtml要素のことを<strong>ルート要素</strong>と呼び、
そのhtml要素のことを<strong>HTML文書（ドキュメント）</strong>とも呼ぶ。</p>
<h3>html要素の中にはhead要素とbody要素をそれぞれこの順序で一つ記述しなければならない。</h3>
<p>各要素には、内側に記述できる要素に制限がある。また、必ず記述する必要がある要素、
必要に応じて省略できる要素もある。これらのルールを、ここでは<strong>文法</strong>と呼ぶことにする。</p>
<h3>head要素の中にはtitle要素を必ず一つ記述しなければならない。</h3>
<p>title要素は文書全体に付ける文書名のようなもので、
ブラウザのウィンドウタイトルとして表示されることが多い。</p>
<h3>文法はDTD（Document Type Definition：文書型定義）によって規定されている。</h3>
<p>文法は、DTDと呼ばれるファイルで規定されている。
このDTDにもいくつかの種類があり、それによってHTMLの種類が異なる。
また、SGMLのルールによって記述されたDTDによるものをHTML、
XMLのルールによって記述されたDTDによるものをXHTMLと呼ぶ。
本ページでは、XHTMLを原則として表現するが、これをHTMLに直すのは非常に簡単である。
整形式で、なおかつ、文法に従って正しく記述されたものを<strong>検証済み文書</strong>
あるいは<strong>妥当な文書</strong>と呼ぶ。</p>
<h3>文法はDTD（Document Type Definition：文書型定義）によって規定されている。</h3>
<p>文法は、DTDと呼ばれるファイルで規定されている。
このDTDにもいくつかの種類があり、それによってHTMLの種類が異なる。
また、SGMLのルールによって記述されたDTDによるものをHTML、
XMLのルールによって記述されたDTDによるものをXHTMLと呼ぶ。
本ページでは、XHTMLを原則として表現するが、これをHTMLに直すのは非常に簡単である。
整形式で、なおかつ、文法に従って正しく記述されたものを<strong>検証済み文書</strong>
あるいは<strong>妥当な文書</strong>と呼ぶ。</p>
<h3>HTML、XHTMLそれぞれ３種類のDTDが存在する。</h3>
<p>HTML、XHTMLそれぞれに「<strong>Strict</strong>」、「<strong>Transitional</strong>」、
「<strong>Frameset</strong>」と呼ばれる３種類のDTDが存在する。</p>
<p><img alt="DTDの関係図" src="gazou2.jpg" width="252" height="252" /></p>
<dl>
<dt>Strict</dt>
<dd>もっとも厳格な文法を規定したもの。非推奨要素を若干含む。</dd>
<dt>Transitional</dt>
<dd>柔軟な文法を規定したもの。非推奨要素を数多く含む。</dd>
<dt>Frameset</dt>
<dd>Transitionalにフレーム関係の要素を付加したもの。</dd>
</dl>
<p>本ページではStrictを中心として記述する。</p>
</body>
</html>