10.特殊文字
サイトメーカー「というわけで今日はいよいよ3ページ目の作成だ！」
ホーム君「うーん。でも1ページ目に自己紹介。2ページ目に私の好きな○○ベスト3とくると、三つめは本当の本当にネタが無いよ？」
サイトメーカー「3ページ目は自由研究ということで、ちょっと勉強めいた事を書きます」
ホーム君「えー！？ここに来て勉強かよー？ぶー！ぶー！」
サイトメーカー「落ち着きなさい。勉強と言ってもhtmlの勉強。つまり、簡単なホームページの作り方の説明ページを作るのです」
ホーム君「ホームページの作り方の説明？」
サイトメーカー「そうです。3つ目のページにこれを載せれば『お、一応自由研究っぽいことしているみたいだな』と先生も納得してくれます」
ホーム君「なるほど！」
サイトメーカー「というわけで、簡単な例がこちらだ！ファイル名はexplan.htmlとでもしていつも通りYahoo!ジオシティーズからログインしてファイルマネージャの『新規』ボタンから作ってくれ」
<html> <head> <title>ホームページの作り方</title> </head> <body> <font size="12">ホームページの作り方</font> <br> ここではホームページの作り方を解説します。 <br> ホームページは<strong>タグ</strong>というものを組み合わせた<strong>html文書</strong>で作ります。 <br> 下に簡単なhtml文書の例を書きます。 <br> <table border="1" bordercolor="black"> <tr><td> <pre> <html> <head> <title>タイトル</title> </head> <body> ここに文書を書きます。 </body> </html> </pre> </td></tr> </table> <br> 上の<html>や<title>などがタグです。 <br> タグを色々と組み合わせる事で自由にホームページが作れます。 <br> タグには例えば以下のようなものがあります。 <br> <table border="1"> <tr> <td>htmlタグ</td><td>html文書を書き始めるときに必ず書くタグ</td> </tr> <tr> <td>headタグ</td><td>目には見えない情報を書く</td> </tr> <tr> <td>bodyタグ</td><td>bodyタグの説明</td> </tr> <tr> <td>titleタグ</td><td>titleタグの説明</td> </tr> <tr> <td>brタグ</td><td>brタグの説明</td> </tr> <tr> <td>font color="色の名前"タグ</td><td>font color="色の名前"タグの説明</td> </tr> <tr> <td>font size="数字"タグ</td><td>font size="数字"タグの説明</td> </tr> </table> <br> <a href="あなたのさいとのアドレス">トップページに戻る</a> <br> <a href="あなたのさいとのアドレスbest.html">私の好きなジブリ映画ベスト3</a> </body> </html>
サイトメーカー「一番下のあなたのサイトのアドレスの部分は、実際のあなたのサイトのアドレスを書いてね（ホーム君の場合はhttp://island.geocities.jp/xhtml7/とhttp://island.geocities.jp/xhtml7/best.htmlです）」
ホーム君「ん？サイトメーカー。タグじゃない、何か変なのが書いてあるよ？書き間違いじゃないの？」
サイトメーカー「< や > のことですね。タグに使う < や > を表示したい時に、bodyタグの中に直接 < みたいにキーボードから書いても、うまく表示されなかったりします。その解決策として< や > と書くことできちんと表示できます。こういうものを特殊文字と言います。特殊文字の例を三つ紹介しておきますね」
| < | < |
| > | > |
| & | & |
ホーム君「< って書くと表示される時に < って表示されて、 > って書くと表示される時に > って表示されて、 & って書くと表示される時に & って表示されるんだね？」
サイトメーカー「そうです。& の文字はShiftキーを押しながら数字の6を押せば出ると思います（パソコンによって異なります）」
ホーム君「他にもいくつか新しいタグが出てきてるね」
サイトメーカー「strongタグは強調するためのタグで、文字を太字に出来ます。preタグで文章をはさめば、brタグ無しで普通にEnterキーで改行が出来ちゃいます」
ホーム君「なるほど……。しかしサイトメーカーよ。僕には最大の不満点があるんだが？」
サイトメーカー「ほー。なんだね？言ってみなさい」
ホーム君「なんでbodyタグ、titleタグ、brタグ、font color="色の名前"タグ、font size="数字"タグの説明が書かれてないんだ？」
サイトメーカー「いや、自分で調べて書いてもらおうと思って」
ホーム君「ぶーぶー！ぶーぶー！」
サイトメーカー「だまれコゾウ！これはオヌシの為でもあるのだぞ！」
ホーム君「え？僕のため？」
サイトメーカー「そう。仮に先生がこのサイトを知っていたら……？」
ホーム君「！！宿題がほぼ丸写しな事がバレてしまう！」
サイトメーカー「しかし！ここに、ホーム君が調べないと書けないことがのっている。つまり、もし先生がこのサイトを知っていてもホーム君がここだけきちんと調べて書いていたら？」
ホーム君「ちゃんと、自分で調べて書いたことになる！！」
サイトメーカー「その通り。それに、それぞれのタグはこのサイトのどこかでちゃんと説明しているものばかりだ。もちろん、余裕があればほかのタグについても書いておくといいだろう」
サイトメーカー「さて、3つ目のページも完成した事だし、1ページめ、2ページめのそれぞれからリンクを貼っておこう。まずは2ページめの『私の好きな○○ベスト3』一番下に『ホームページの作り方』へのリンクを追加しておいた」
<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> <br> <a href="あなたのサイトのアドレスexplan.html">ホームページの作り方</a> </body> </html>
サイトメーカー「そして1ページめの『自己紹介』。下の方に3ページめの『ホームページの作り方』へのリンクと、一応自分のアドレスも書いておこう」
<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> <br> <a href="あなたのさいとのアドレスexplan.html">ホームページの作り方</a> <br> <a href="http://www.garunimo.com/program/html/">参考にしたサイト・ウェブサイトの作り方</a> <br> 私のサイトのアドレス：http://○○ </body> </html>
サイトメーカー「私のサイトのアドレス：http://○○には、実際に自分のサイトのアドレスを書いておいてね」
ホーム君「よし。後はプリントアウトすれば完成だ。いやっほー！宿題終わったぜー！」
ホーム君「ん？サイトメーカー。トップページにいつの間にか<a href="http://www.garunimo.com/program/html/">参考にしたサイト・ウェブサイトの作り方</a>っていうのがまぎれ込んでるけど？」
サイトメーカー「ちっ！ばれたか！」
ホーム君「はい、消しまーす！」
サイトメーカー「な、なんて冷たい地球人だ」
サイトメーカー「でも、このサイトを見ている皆はもちろんリンクしてくれるよね」
サイトメーカー「……あれ？返事がないぞ？もしもーし！」
ホーム君「あぁ。これでサイトメーカーともお別れか……」
サイトメーカー「いや、これから余裕がある人向けに少し補講が……」
ホーム君「長かったような……。短かったような……」
サイトメーカー「補講の後も、夏休み終了後にホームページを作りつづける人向けに……」
ホーム君「さらばホームメーカー！！我が青春とともに！！」
サイトメーカー「お前、今青春まっさかりじゃねぇか！というわけで、次回は補講！補講・画像の使い方！」