9.tableタグの登場
サイトメーカー「今日は2ページ目を作成しまーす」
ホーム君「はーい！」
サイトメーカー「ついでに新しいタグ。tableタグも教えまーす」
ホーム君「はーい。いや、でもサイトメーカー。一ページ目で自己紹介しちゃったら、さすがに2ページ目はネタ切れだよ？何書くの？」
サイトメーカー「2ページ目は『私の好きな○○ベスト3』がテーマです」
ホーム君「『私の好きな○○ベスト3』？」
サイトメーカー「例えば『私の好きな漫画ベスト3』とか『私の好きなアニメベスト3』とか『私の好きな映画ベスト3』とか『私の好きなテレビ番組ベスト3』とか『私の好きな音楽ベスト3』とか。ね？こういう例をあげるとどれか書けそうでしょ？余裕があれば別にベスト3じゃなくてベスト10でもいいし、一ページだけじゃなくて『私の好きな○○ベスト3』ページを複数作ってもいいし」
ホーム君「おぉ。なるほど」
サイトメーカー「他にも、例えば『私の好きなドラゴンボールのキャラクターベスト3』とかいう風に、ひとつのテーマを深くほりさげるのもいいかもね。というわけで今回の例では『私の好きなジブリアニメベスト3』でいきまーす」
ホーム君「おー！」
サイトメーカー「早速Yahoo!ジオシティーズからログインしてファイルマネージャのページへ行きましょう。」
サイトメーカー「あ。そういえばリンクの説明のときにa1.htmlというファイルを作りましたね。せっかくなんでファイルの削除の方法でも教えておきますか（a1.htmlファイルに何か自分のサイトを作っている人は説明を見るだけでいいです）」
ホーム君「あれ？この説明用の画像（上のファイルマネージャページの参考画像）にboy.gifっていうファイルもあるよ？」
サイトメーカー「おっと。ごめんごめん。このファイルはずーっと後の説明のときに使う予定のファイルです。今の皆さんには必要のないファイルですので無視して構いません。」
サイトメーカー「というわけで、a1.htmlファイルの削除じゃー！a1.htmlファイルの横のチェックボックスをクリックしてチェックマークをいれ、削除ボタンを押すのだー！」
サイトメーカー「そうすると『本当にこのファイルを削除してよろしいですか？』って出るので『ファイルの削除』ボタンを押そう」
サイトメーカー「はい。削除の仕方が分かった所で今回のページを新規作成します。『新規』ボタンを押してください。」
サイトメーカー「ファイル名は今回はbest.htmlにしておきます。別に他の名前でもいいです。内容はこんな感じにでもしておきますか」
<html> <head> <title>私の好きなジブリ映画ベスト3</title> </head> <body> <font size="12">私の好きなジブリ映画ベスト3</font> <br> <table border="2"> <tr> <td>1位・もののけ姫</td> <td>腕が呪われたアシタカが呪いを解くために旅に出て、 <br> もののけ姫である『サン』や犬神のモロ、シシ神、タタラ場の皆に出会って神と人との争いに巻き込まれていく話です。 </td> </tr> </table> <a href="あなたのサイトのアドレス">トップページに戻る</a> </body> </html>
サイトメーカー「あなたのサイトのアドレスには実際のあなたのアドレスを入れましょう（ホーム君の場合はhttp://island.geocities.jp/xhtml7/）。tableタグの説明をしたいので、とりあえずベスト1だけ書いて保存しまーす」
サイトメーカー「いちいちアドレス欄にhttp://island.geocities.jp/xhtml7/best.htmlと入力して確認するのも面倒です。今回はもっと簡単な確認方法。ファイルマネージャのbest.htmlの『表示』というリンクをクリックしてください」
ホーム君「おおっ。best.htmlが表示された！」
サイトメーカー「そうでーす。今回新しくtableタグtrタグtdタグが出てきました」
ホーム君「な、なぜ三つも一気に？」
サイトメーカー「なぜならtrタグとtdタグはtableタグの中でしか使えないからです。tableタグというのは表を作るためのタグです。trタグはその表の横一列を。tdタグは一つ一つのデータを表しまーす」
ホーム君「な、何を言っているのか分からない……」
サイトメーカー「うーん。口で説明するのは難しいなー。イメージで書くとこんな感じなんだけど」
ホーム君「お。ちょっと分かる」
サイトメーカー「というわけでもうひとつ行をつけてみまーす。以下の用に書き換えて保存して表示してみてください」
<html> <head> <title>私の好きなジブリ映画ベスト3</title> </head> <body> <font size="12">私の好きなジブリ映画ベスト3</font> <br> <table border="2" bordercolor="red"> <tr> <td>1位・もののけ姫</td> <td>腕が呪われたアシタカが呪いを解くために旅に出て、 <br> もののけ姫である『サン』や犬神のモロ、シシ神、タタラ場の皆に出会って神と人との争いに巻き込まれていく話です。 </td> </tr> <tr><td>まとめ</td><td>ジブリ映画は最高です。皆さんもぜひ見てみてください。</td></tr> </table> <a href="あなたのサイトのアドレス">トップページに戻る</a> </body> </html>
ホーム君「お。これはもしかしてさっきのtableタグのイメージ図の通り？」
サイトメーカー「その通りでーす。tableタグのborder="線の太さの数字"で線の太さが変えられます。tableタグのbordercolor="色の名前"で線の色を変えられます。先ほどtableタグの例は<table border="2" bordercolor="red">ではなく<table bordercolor="red" border="2">とも書き換えられます。それでは、調子に乗って2位と3位も書きましょう。」
<html> <head> <title>私の好きなジブリ映画ベスト3</title> </head> <body> <font size="12">私の好きなジブリ映画ベスト3</font> <br> <table border="2" bordercolor="red"> <tr> <td>1位・もののけ姫</td> <td>腕が呪われたアシタカが呪いを解くために旅に出て、 <br> もののけ姫である『サン』や犬神のモロ、シシ神、タタラ場の皆に出会って神と人との争いに巻き込まれていく話です。 </td> </tr> <tr> <td>2位・紅の豚</td> <td>「飛べない豚はただの豚だ」。主人公のマルコが格好良すぎる。</td> </tr> <tr> <td>3位・千と千尋の神隠し</td> <td>色々な神様が出ておもしろい。</td> </tr> <tr><td>まとめ</td><td>ジブリ映画は最高です。皆さんもぜひ見てみてください。</td></tr> </table> <a href="あなたのサイトのアドレス">トップページに戻る</a> </body> </html>
ホーム君「よしよし。2ページ目はこんな感じか」
サイトメーカー「おーっと、ちょっと待った。ついでにbgcolor="色の名前"を教えておこう」
ホーム君「bgcolor？」
サイトメーカー「背景のことだよ。bgcolor="色の名前"は、今までに出てきたタグだとbodyタグ、tableタグ、trタグ、tdタグにつけることが出来る」
<html> <head> <title>私の好きなジブリ映画ベスト3</title> </head> <body bgcolor="wheat"> <font size="12">私の好きなジブリ映画ベスト3</font> <br> <table border="2" bordercolor="black"> <tr bgcolor="peachpuff"> <td>1位・もののけ姫</td> <td>腕が呪われたアシタカが呪いを解くために旅に出て、 <br> もののけ姫である『サン』や犬神のモロ、シシ神、タタラ場の皆に出会って神と人との争いに巻き込まれていく話です。 </td> </tr> <tr bgcolor="greenyellow"> <td>2位・紅の豚</td> <td>「飛べない豚はただの豚だ」。主人公のマルコが格好良すぎる。</td> </tr> <tr bgcolor="tan"> <td>3位・千と千尋の神隠し</td> <td>色々な神様が出ておもしろい。</td> </tr> <tr><td bgcolor="black"><font color="white">まとめ</font></td><td>ジブリ映画は最高です。皆さんもぜひ見てみてください。</td></tr> </table> <a href="あなたのサイトのアドレス">トップページに戻る</a> </body> </html>
ホーム君「おおっ！背景の色がぐりぐりと変わりまくっている！」
サイトメーカー「そうです。好きな色の組み合わせを見つけてね」
サイトメーカー「──ホーム君。調子はどうだい？」
ホーム君「背景色とか文字の大きさとかを変えてみたよ」
<html> <head> <title>私の好きなジブリ映画ベスト3</title> </head> <body> <font size="12">私の好きなジブリ映画ベスト3</font> <br> <table border="2" bordercolor="black" bgcolor="navy"> <tr> <td><font size="7"><font color="white">1位・もののけ姫</font></font></td> <td><font color="white">腕が呪われたアシタカが呪いを解くために旅に出て、 <br> もののけ姫である『サン』や犬神のモロ、シシ神、タタラ場の皆に出会って神と人との争いに巻き込まれていく話です。 <br> 呪いと引き換えに強力な力を得たアシタカも確かに格好良いんですが、真の男なら憧れるべきは『オッコトヌシ』！ <br> 「例え我が一族ことごとく滅びようとも人間に思い知らせてやるのだ」 <br> 男には死ぬと分かっていてもやらなければならない時がある。こういう男に私はなりたい。</font> </td> </tr> <tr> <td><font size="6"><font color="white">2位・紅の豚</font></font></td> <td><font color="white">「飛べない豚はただの豚だ」。ブタのくせに主人公のマルコが格好良すぎる。 <br> ブタのくせに女にモテるし。しかも、ブタと対立するやつらもなんだか憎めない魅力的な奴らばかり。 <br> 僕もアドリア海で飛空艇乗りになりたい！</font> </td> </tr> <tr> <td><font size="5"><font color="white">3位・千と千尋の神隠し</font></font></td> <td><font color="white">色々な神様が出ておもしろい。トトロに出てくるマックロクロスケも出る。龍も出る。カエルも出る。 <br> ゆばーばの顔のでかさもすごい。クモのおじさんの手足の数と長さもすごい。巨大な赤ん坊の大きさもすごい。 <br> だが、何より粋なのは、好きな人の為に頑張る千と、その千の姿を見て言ったクモ男の一言「愛だよ、愛」</font> </td> </tr> <tr bgcolor="white"><td>まとめ</font></td><td>ジブリ映画は最高です。皆さんもぜひ見てみてください。</td></tr> </table> <a href="あなたのサイトのアドレス">トップページに戻る</a> </body> </html>
サイトメーカー「うん。2ページ目はこんな感じでいいと思う。1ページめからリンクを貼っておこう。ファイルマネージャのindex.htmlの横のチェックボックスをクリックしてチェックマークをつけて編集ボタンをおそう」
サイトメーカー「ファイルの一番最後に<a href="あなたのさいとのアドレスbest.html">私の好きなジブリ映画ベスト3 </a>とつけたそう。あなたのサイトのアドレスの部分には実際の自分のサイトのアドレスを入れよう（ホーム君の場合はhttp://island.geocities.jp/xhtml7/best.htmlのようになる）」
<html> <head> <title>自己紹介サイト</title> </head> <body> <font size="12"><font color="red">自己紹介サイト</font></font> <br> どうもどうも。こんにちは。大分県の<font size="8"><font color="grean">東</font></font>がつく名前の小学校の<font size="9">4年生</font>です。 <br> 皆からは<font color="blue">タッキー</font>と呼ばれています。 <br> 9月生まれの乙女座です<font size="10">（男なのに）</font>。 <br> <font color="blue">血液型</font>はワガママで有名な<font size="9"><font color="maroon">B型</font></font>ですが、実際の私は皆さんもご存知の通りすごく<font color="oliverab">やさしい</font>性格（？）です。 <br> 今年の夏休みはおばあちゃん家にいきました。おじいちゃんと一緒に<font size="10"><font color="silver">魚釣り</font></font>にもいきました。 <br> 虫取りでは、<font size="14">でっかい<font color="sienna">アリ</font>をみつけました</font>。今まで見た中で一番<font size="14">でかい<font color="sienna">アリ</font></font>だったので、すこしびっくりしました（笑）。 <br> 海にも行きました。実は私はまだ浮き輪が無いと<font size="9"><font color="yellow">泳げません</font></font>。いつ泳げるようになるのでしょうか？ <br> 砂浜でめちゃくちゃ小さな<font color="purple">貝殻</font>も少し拾いました。ただ、砂浜超<font size="8">熱かった！</font> <br> 夏休みももうすぐ終わりです！泣きそうです！宿題まだ終わってません！<font size="13"><font color="hotpink">助けて！</font></font> <br> <a href="あなたのさいとのアドレスbest.html">私の好きなジブリ映画ベスト3</a> </body> </html>
サイトメーカー「リンクがちゃんと出来ているか確認したら今回は終了。次回、三つ目のページを作れば宿題は完成っていうわけだ」
ホーム君「やったー！意外と早く宿題が終わったぞ！」
サイトメーカー「そうそう。その後はコピーして提出すれば完了っていうわけ。ホーム君の家はプリンタはあるの？」
ホーム君「無いよ？」
サイトメーカー「……友達にでも借りなさい。次回は3ページ目の作成と特殊文字の説明です！」