さあ、レンタルサーバーの用意が出来たら、さっそく表紙ページを作りましょう。
表紙ページとは、訪問者が一番最初に目にするページです。
表紙ページには、通常２種類があります。
ひとつは、表紙ページの中に各コンテンツの目次を含んだもの。通常このページはｉｎｄｅｘ．ｈｔｍｌ（またはｈｔｍ）というファイル名が付けられます。ジオの場合は必ず表紙ページの拡張子をｈｔｍｌにしなくてはなりません。
もうひとつは、表紙ページは文字通り表紙だけで、おおよそ何を扱ったページかを紹介したり、挨拶の文章を簡単に掲載するにとどめ、目次は別のページにおいておき、表紙ページから目次ページにリンクするような構成のものです。目次ページには、ｍｅｎｕというファイル名がよく使われます。
なお、本来はファイル名は半角で書かねばなりませんが、見やすさを考慮して、ここでは全角文字を使います。また、タグも本来半角で記述するところを、ここでは全角で記述しますので、注意して下さい。
ところで、とらおは表紙ページの中に目次を含めています。その方が内容を訪問者により早くわかってもらえますし、クリックして次のページ（目次ページ）の表示を待つという時間が節約できるからです。一方、表紙ページと目次ページを分割すると、よりイメージ的で美しい表紙ページが出来ます。どちらがいいとは一概に言えません。
拡張子：ファイル名の後、ピリオドを付けて、その次に続く何もじかのアルファベットのこと。ファイルの種類を表す。ｗｅｂページの拡張子はｈｔｍまたはｈｔｍｌ。どちらの拡張子でもブラウザはwebページと判断してモニターに表示してくれるが、ファイル名が同じでも拡張子が違うと別のファイルと判断されるので注意が必要。この他に、画像ファイルの拡張子ｊｐｇやｇｉｆ、音楽の拡張子ｍｉｄｉなどがよく使われる。
タグ：ブラウザにどのように表現するかを指示する記号。例えば、文字サイズをひとつ大きくするには＜ｆｏｎｔ ｓｉｚｅ＝＋１＞と記述する。タグには終了タグがあり、この場合は＜／ｆｏｎｔ＞というふうにスラッシュを付ける。タグの中にタグをなんそうにも入れ子状にすることが出来る。
表紙ページは出来るだけ早くアップしましょう。出来映えなんて気にしない。だって、どうせ表紙ページは何度も作り替えるものですから。技術が向上すれば作り直したくなるものですし、コンテンツが増えれば表紙ページの作り替えに迫られます。とらおも５回以上作り直しています。
だったら多少稚拙でいいから、さっさとアップしてしまえ、というのがとらおの持論です。
自分のＰＣの上でだけ、ああでもないこうでもないと悩むよりも、さっさとアップして、そして自分のwebページをわざわざ回線をつないで見るのです。表紙ページたったひとつでも、実際に回線を通じて自分が作ったページを見るというのは、とても感動します。新人作家が処女作を出版したようなものです。
親しい人がいれば、早速アドレスを教えて批評してもらいましょう。もっとも検索エンジンに登録したりして、不特定多数に見せる必要は、この段階ではありません。
では、表紙ページはどうやって作ればいいのでしょう。
嘘でもいいから、とにかく完成させることです。これで、ホームページ作りのおおよその感覚をつかめます。
中身はきわめて簡単でよろしい。
個人ページの典型的な例をひとつ提示します。ここでは、表紙ページに目次を含めてみました。その方が雰囲気がつかめると思ったからです。
タイトル、あいさつ、カウンター、自己紹介、日記、いくつかのコンテンツ、リンク集、ゲストブック、（チャット）、メールの宛先、著作権者の表示、といったところでしょうか。
模擬ページとして、「カエルちゃんのホームページ」を作ってみました。
自己紹介は、訪問者がそのページに興味を持ったときに、「この作者はどんな人だろう」と考えるのは当然ですので、是非おいておくといいでしょう。紹介の仕方については、色々な人のページを参考にして下さい。参考にした結果、とらおの自己紹介はもっともつまらないもののひとつだなとマジで反省しています。
日記とカエルは関係ないような気がしますが、やはり人気のあるコンテンツのひとつです。メインのコンテンツをしょっちゅう更新できないとしても、日記ならば基本的に毎日更新できるので、常連さんを確保できるかも知れません。毎日書く自信がなければ、「日々雑感」のようなタイトルにして、ごまかすのも手です。とらおの場合、クリエイトミュージアムの「雑記集」がそれに当たります。
チャットはあってもなくてもかまいません。チャットを楽しむには当然話し相手が必要なのですが、全員がチャットを設置すると、みんな自分のチャットで訪問者を待つという事態になり、結局だれも来てくれないと言う理論すら成り立ちます。事実、とらおのチャットは無人のことが多いんです。しかしゲストブック（提示版、伝言板、ＢＢＳなどともいう）は必ず付けましょう。訪問者がその場で書き込めるのはメールを後で出すのと異なり、訪問者の生の声をきく絶好の場ですし、チャットと異なりタイムラグがあってもコミュニケーションが楽しめ、一人のログをみんなで共有できるというメールにないメリットがあります。
著作権については、All Right Reserved, (C) Copyright kaeruchan 1998 というふうに表示します。
さて、コンテンツについては、ここでは「ぼくのうちのカエル（飼育記録）」と「街角カエル（野に山にカエル探して観察記録）」のふたつを用意してみました。
この他におまけとして、「カエルに固執する理由」というタイトルの、まあ蛙を好きになった個人的な理由を説明するコーナーも設けます。
するとこんな具合でしょうか。
と、まあこんな具合に、ここではカエルに注目したページを想定してみました。自分の家で飼っているものと、そうでない野生のものについて、そしてカエルへの思い入れという、本当にささやかにみっつのコンテンツを用意しただけなのですが、その他にごく標準的な個人ページのコンテンツをずらっと並べてみますと、目次だけを見る限り、結構立派な姿になったではありませんか。
確かにこれだけでは、実際にはリンク先の各ページが出来ていないのですから、薄っぺらな表紙ではあります。でも、これからこういうのを作っていくんだと思うと、夢が広がるような気がしませんか？ なんだかやる気が出てくるじゃないですか。
実はボクは、あまり先のことを考えずに、こんな具合に表紙ページを作ってしまいました。そのおかげで、自分で作った表紙ページに触発され、各論のページをアップしていくことが出来たわけですが、一方では、未だに工事中のページが残ってしまっています。（出来ないのなら出来ないで、撤去すればいいのですが）
ですからみなさんも、是非がんばって、表紙ページだけでも急いでアップしましょうよ。まだ、不特定多数に見てもらうことを前提にする必要はありません。だから格好いいページとか、テクニカルなページとか、そんなことは意識しなくていいと思います。とらおは５０００ＨＩＴを越えてもそんなことは意識してませんし。
それでは、ページを創るための簡単なタグ講座をお送りします。
ｈｔｍｌ形式の文章が始まりますよと言う宣言です。通常これが一番最初に来ます。
ヘッド、つまり、頭の部分です。ここに書き込む内容は決まっています。
|
＜ｔiｔｌｅ＞カエルちゃんのホームページ＜/ｔiｔｌｅ＞
|
タイトルタグがあり、その次にテキストでタイトルを書き込みます。そしてタイトル終了タグで閉じます。ここに書かれたタイトルは、ｗｅｂページ左上のところに表示されます。
タイトルを書き終わったら、ヘッド終了タグで、ヘッドが終わったことを示します。
|
＜ｂｏｄｙ ｂｇｃｏｌｏｒ="#d3feee" ｔｅｘｔ="#400040" ｌｉｎｋ="#0080ff" ａｌｉｎｋ="#ff0080" ｖｌｉｎｋ="#0000a0"＞
|
ボディタグで本文が始まることを宣言し、その後に、基本的な設定をします。
ｂｇｃｏｌｏｒで背景の色を、ｔｅｘｔで地の文の文字色を、ｌｉｎｋでリンクを設定した文字の色を、ａｌｉｎｋで現在リンク呼び出し中の文字の色を、ｖｌｉｎｋで既にリンク済みの文字の色を指定します。
色はここでは００００００からｆｆｆｆｆｆまでの数字およびアルファべットで示します。
左から順に二桁ごとに「赤」「緑」「青」の光の三原色で構成され、００ならその色の要素が全くない、ＦＦならいちばん明るい、ということです。０，１，２……８，９，ａ，ｂ……ｅ，ｆの１６進数です。
例えば、いちばん左の二桁「赤」で説明しますと、ｆｆがいちばん明るい赤、ということになります。
では、００００００はどんな色かといいますと、全ての色の要素がないわけですから、黒です。ｆｆｆｆｆｆは全ての色がもっとも明るい状態ですから、白です。
また、背景には、ｂｇｃｏｌｒ（背景色）のかわりに、ｂａｃｋｇｒｏｕｎｄで背景画像を指定することも、両方を指定することもできます。両方を指定しますと、背景画像が読み込まれて表示されるまでの間、背景色が表示されます。
基本となる文字サイズを指定します。文字サイズは１〜７まであり、数字が大きくなるほど文字も大きくなります。これを指定しておけば、今後特に指定がない限りこのサイズの文字になります。
ここまで基本設定をしたら、後は本文になります。
よく使う、本当に代表的なタグを少しだけ紹介します。
改行。このタグのある位置で改行します。このタグがなければ、画面の大きさをブラウザが判断して画面のはしで折り返してくれます。
段落。行間をあけ、段落を作るときに使います。
横罫線。太さや長さ、色なども指定できます。
|
＜ａ ｈｒｅｆ="リンク先アドレス"＞○○のページ＜/ａ＞
|
リンク指定。ダブルクオーテーションマークの間に、リンク先のアドレスを入力。○○のページの部分が画面上に表示され、アンダーライン及び地の文とは違う文字色で（この色はｂｏｄｙタグに「ｌｉｎｋ=」で指定した文字色）表示され、リンクが設定されていることがわかります。その部分をクリックすると、リンク先ページへ飛びます。
|
＜ａ ｈｒｅｆ="ｍａｉｌｔｏ：メールアドレス"＞メール下さい＜/ａ＞
|
このようにリンク指定をしておくと、ここをクリックするとメーラーが自動起動して、しかも宛先が記入済みとなります。メールを送る人にとってはとても便利ですので、是非この設定をしておきましょう。
|
＜ｆｏｎｔ ｃｏｌｏｒ=＃１２３４５６ ｓｉｚｅ=６＞テキスト＜/ｆｏｎｔ＞
|
フォントの色やサイズを変更します。変更部分が終わったら＜/ｆｏｎｔ＞終了タグで閉じます。
例文では、色とサイズを同時に変更していますが、どちらか片方だけでももちろんオッケーです。
本文が終わったら、ボディーの終了タグを書きます。
そして、一番最後に、ｈｔｍｌの終了タグを書いて、おわりです。
[「サーバーに登録してみよう」に戻る] [「構想が練れたら出来たも同然」に進む]
[僕たち初心者ホームページ作成講座目次へ] [とらおランド入場ゲートへ]
メールはこちら