5.1.とりあえずXHTMLでページ作成

CSSを学ぶ前に今まで学んだことの復習も兼ねてWebページを作成してみましょう。まずはいつものようにおまじないから。今回は文字コードはEUC-JPで作成します。Shift_JIS等他の文字コードを使う場合はサンプル中のEUC-JPの部分を他に変えてください

<?xml version="1.0" encoding="EUC-JP"?>
<!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=EUC-JP" />
<title>サンプルサイト</title>
</head>
<body>
</body>
</html>

一ヶ所見慣れないタグが書いてありますね。これも文字コードを指定するものです。

次にサイトタイトルを書きます。

<?xml version="1.0" encoding="EUC-JP"?>
<!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=EUC-JP" />
<title>サンプルサイト</title>
</head>
<body>
<h1>サンプルサイト</h1>
</body>
</html>

次はサイトナビゲーション部分を作成します。今回はトップページのみ作成するので、リンク先はとりあえず同じページにしておきます。

<?xml version="1.0" encoding="EUC-JP"?>
<!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=EUC-JP" />
<title>サンプルサイト</title>
</head>
<body>
<h1>サンプルサイト</h1>
<ul>
<li><a href="sample5_1.html">自己紹介</a></li>
<li><a href="sample5_1.html">日記</a></li>
<li><a href="sample5_1.html">リンク集</a></li>
</ul>
</body>
</html>

続いてコンテンツ部分を作成します。今回は日記でも書いておくことにします。日付部分は見出しなのでh2要素に、本文はp要素にします。ちなみにhn要素は1から数字の順番通りに使うことが原則です。今回の場合はサイトタイトルにh1要素を使ったので、日記の見出しはh2要素になるわけです。

<?xml version="1.0" encoding="EUC-JP"?>
<!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=EUC-JP" />
<title>サンプルサイト</title>
</head>
<body>
<h1>サンプルサイト</h1>
<ul>
<li><a href="sample5_1.html">自己紹介</a></li>
<li><a href="sample5_1.html">日記</a></li>
<li><a href="sample5_1.html">リンク集</a></li>
</ul>
<h2>2005年9月2日</h2>
<p>日記を書こうと思ってもネタがないとどうにもならない訳です。只今、ネタがなくて非常に困っております。サンプルなのであまり変なことを書く訳にもいかないし。Yahooのニュースの文章でもコピペしようかと思いましたが、それじゃ日記になりませんよね。</p>
<p>ってことで仕方なくネタがないことをネタにしてしまいました。</p>
</body>
</html>

こんな感じでサンプルサイトは完成です。とりあえずsample5_1.htmlの名前で保存してブラウザで表示してみましょう。サンプルは以下にリンクしておきます。

サンプル5.1：sample5_1.html