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を使ったレイアウト～

コメントor補足情報orご指摘あればをお願いします。

（件名or本文内でキーワード検索できます）



  • << 前のページ
  • 次のページ >>
ページトップへ