ドリル式ホームページの作り方

table内に文章を記述する

ドリル式ホームページの作り方TOP  >>  Lesson6〜tableを使ったレイアウト〜  >>  table内に文章を記述する

table内に文章を記述する

先ほど作ったtable骨格の中に文章を入れて見ましょう。

table以外のタグは全て今まで学んできたタグを使用しております。使用する画像はコチラ→画像ダウンロード

タイトル部分の記述とパンくずリスト

パンくずリストというのは、「TOP>lesson1>lesson1.1」のように今現在見ているページがトップページからどの階層にあるのかを示すリストのことで、ユーザーがサイト内で迷わないようにするナビゲーター的な役割があります。

必ずしもパンくずリストをサイト内におく必要はありませんが、Yahoo様がパンくずリスト振興派ですので、置くにこしたことはありません。

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>ホームページ作成講座</title>
<meta name="description" content="ホームページ作成の方法を初心者さんにもわかるように、簡単に解説している講座です。" />
<meta name="keywords" content="ホームページ,作成,講座" />
<meta name="author" content="wakabagari" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
</head>
<body>
<table border="0" cellspacing="0" width="550">
<tr>
<td colspan="2">
<h1><a href="index.html"><img src="gif/13.gif" alt="ホームページ作成講座" /></a></h1>
<p><a href="index.html">ホーム</a><a href="#">ホームページ作成講座TOP</a></p>
</td>
</tr>
<tr>
<td>メニュー</td>
<td>コンテンツ</td>
</tr>
<tr>
<td colspan="2">アドレス</td>
</tr>
</table>
</body>
</html>

ここまでの作成経過はコチラ→サンプル(ホームページ作成講座)

メニュー部分の記述

メニューは通常、リストを使って作ります。決して<p>を並べて作らないようにしてくださいね(昔の管理人がそうでしたけど何か?)。

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>ホームページ作成講座</title>
<meta name="description" content="ホームページ作成の方法を初心者さんにもわかるように、簡単に解説している講座です。" />
<meta name="keywords" content="ホームページ,作成,講座" />
<meta name="author" content="wakabagari" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
</head>
<body>
<table border="0" cellspacing="0" width="550">
<tr>
<td colspan="2">
<h1><a href="index.html"><img src="gif/13.gif" alt="ホームページ作成講座" /></a></h1>
<p><a href="index.html">ホーム</a><a href="#">ホームページ作成講座TOP</a></p>
</td>
</tr>
<tr>
<td>
<p><img src="gif/20.gif" alt="" /></p>
<ul>
<li><a href="#">Lesson1</a></li>
<li><a href="#">Lesson2</a></li>
<li><a href="#">Lesson3</a></li>
<li><a href="#">Lesson4</a></li>
</ul>
<p><img src="gif/19.gif" alt="" /></p>
</td>
<td>コンテンツ</td>
</tr>
<tr>
<td colspan="2">アドレス</td>
</tr>
</table>
</body>
</html>

コンテンツ部分の記述

コンテンツ部分に、適当な文章を記述していくわけですが、今回はtableタグを学ぶ講座ということで、tableの中にさらにtableを組み込んでみましょう。

tableの中のtableで更新情報を作ってみます。

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>ホームページ作成講座</title>
<meta name="description" content="ホームページ作成の方法を初心者さんにもわかるように、簡単に解説している講座です。" />
<meta name="keywords" content="ホームページ,作成,講座" />
<meta name="author" content="wakabagari" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
</head>
<body>
<table border="0" cellspacing="0" width="550">
<tr>
<td colspan="2">
<h1><a href="index.html"><img src="gif/13.gif" alt="ホームページ作成講座" /></a></h1>
<p><a href="index.html">ホーム</a><a href="#">ホームページ作成講座TOP</a></p>
</td>
</tr>
<tr>
<td>
<p><img src="gif/20.gif" alt="" /></p>
<ul>
<li><a href="#">Lesson1</a></li>
<li><a href="#">Lesson2</a></li>
<li><a href="#">Lesson3</a></li>
<li><a href="#">Lesson4</a></li>
</ul>
<p><img src="gif/19.gif" alt="" /></p>
</td>
<td>
<h2><img src="gif/14.gif" alt="" /></h2>
<table border="0" cellspacing="0">
<tr>
<td>2008/1/1</td>
<td>ホームページ作成講座を開設しました。</td>
</tr>
<tr>
<td>2008/1/2</td>
<td>ホームページ作成講座を閉鎖しました。</td>
</tr>
</table>
<h2><img src="gif/15.gif" alt="" /></h2>
<p>
ホームページを作成するためにはエディタと呼ばれるアプリを起動して、そこにプログラムを記述します。
</p>
<p>
Windowsをお使いの方は標準で付属しているエディタとして、メモ帳とwordpadがありますので、それを使うとよいでしょう。
</p>
<p>
さらに高性能のエディタをお求めの方は、無料ならterapad、有料なら秀丸エディタがお勧めです。
</p>
<h2><img src="gif/16.gif" alt="" /></h2>
<p>
ホームページを作るのに使用する言語はHTMLと呼ばれ、タグと呼ばれる命令を使って、色やフォントの大きさを指定することができます。
</p>
<p>
<img src="jpg/1.jpg" alt="メモ帳に記述" />
</p>
<p>
ホームページ作成に使われるタグは文字の装飾だけに限らず、背景や画像、ページの骨格を指定するものもあります。
</p>
</td>
</tr>
<tr>
<td colspan="2">アドレス</td>
</tr>
</table>
</body>
</html>

アドレス部分の記述

最後にアドレス部分に次のタグを記述します。

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>ホームページ作成講座</title>
<meta name="description" content="ホームページ作成の方法を初心者さんにもわかるように、簡単に解説している講座です。" />
<meta name="keywords" content="ホームページ,作成,講座" />
<meta name="author" content="wakabagari" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
</head>
<body>
<table border="0" cellspacing="0" width="550">
<tr>
<td colspan="2">
<h1><a href="index.html"><img src="gif/13.gif" alt="ホームページ作成講座" /></a></h1>
<p><a href="index.html">ホーム</a><a href="#">ホームページ作成講座TOP</a></p>
</td>
</tr>
<tr>
<td>
<p><img src="gif/20.gif" alt="" /></p>
<ul>
<li><a href="#">Lesson1</a></li>
<li><a href="#">Lesson2</a></li>
<li><a href="#">Lesson3</a></li>
<li><a href="#">Lesson4</a></li>
</ul>
<p><img src="gif/19.gif" alt="" /></p>
</td>
<td>
<h2><img src="gif/14.gif" alt="" /></h2>
<table border="0" cellspacing="0">
<tr>
<td>2008/1/1</td>
<td>ホームページ作成講座を開設しました。</td>
</tr>
<tr>
<td>2008/1/2</td>
<td>ホームページ作成講座を閉鎖しました。</td>
</tr>
</table>
<h2><img src="gif/15.gif" alt="" /></h2>
<p>
ホームページを作成するためにはエディタと呼ばれるアプリを起動して、そこにプログラムを記述します。
</p>
<p>
Windowsをお使いの方は標準で付属しているエディタとして、メモ帳とwordpadがありますので、それを使うとよいでしょう。
</p>
<p>
さらに高性能のエディタをお求めの方は、無料ならterapad、有料なら秀丸エディタがお勧めです。
</p>
<h2><img src="gif/16.gif" alt="" /></h2>
<p>
ホームページを作るのに使用する言語はHTMLと呼ばれ、タグと呼ばれる命令を使って、色やフォントの大きさを指定することができます。
</p>
<p>
<img src="jpg/1.jpg" alt="メモ帳に記述" />
</p>
<p>
ホームページ作成に使われるタグは文字の装飾だけに限らず、背景や画像、ページの骨格を指定するものもあります。
</p>
</td>
</tr>
<tr>
<td colspan="2">
<address>Copyright 2007@nkdesk. all right reserved.</address>
</td>
</tr>
</table>
</body>
</html>

ここまでの作成経過はコチラ→サンプル(ホームページ作成講座)


Lesson6〜tableを使ったレイアウト〜

  1. XHTMLの骨格を記述する
  2. tableタグを覚える
  3. table内に文章を記述する
  4. スタイルシートを適用する
  5. vertical-alignというもの
  6. ブロックレベル要素とインライン要素
  7. リスト(ul)を扱う上での注意点

CGIの設置

  1. 掲示板を設置する
  2. カウンターを設置する
  3. アクセス解析を導入する
  4. アクセスランキングを設置する

ホームページの公開

  1. ドメインを取る
  2. サーバーを選ぶ
  3. ファイルをアップロード(公開)
Copyright(C) ドリル式ホームページの作り方 all right reserved.