ＨＰは作っているんだけど、ホームページビルダー等のソフトを使ってるので、HTMLがよくわからないよーって方多いですね。HTMLって何？なんて質問もよく聞かれます。HTMLの詳しい解説はいろいろなサイトにあります（たとえばとほほのWWW入門さんなど）。でも、それじゃいきなり難しすぎてよくわからないよーって人向けに、必要最低限のHTMLの解説をしたいと思います。HTMLを知れば、フリーのＣＧＩプログラムのカスタマイズなども難しくありません。ちょっとだけ知ってみませんか？（ちなみにさんちゃんは全部HTMLを手書きでＨＰを作っています。) 
HTMLはホームページを記述するときに使われる言語です。言語というと難しいように思うけど、簡単な決まりを知れば、難しくはないんです。ブラウザ（ＨＰを表示させるソフト。ネットスケープナビゲーターかインターネットエクスプローラーが主に使われるブラウザです。他にもありますよ）でＨＰを表示させ、ソースの表示をやってみてください。 |
ホームページに最低必要なタグは、実はそんなにありません。(^^)
|
文章を整えるタグです。タグで挟まれた間の文章に指定されます。...にはその効果を施したい文章を入れます。
|
| <BR> | 改行 |
| <B>...</B> | 文字を太くする |
| <FONT SIZE="3">...</FONT> | 文字の大きさを変える(１〜７) |
| <FONT COLOR="#0000ff">...</FONT> | 文字の色を変える(#rrbbggか色の名前) |
| <HR> | 横罫線 |
| <CENTER>...</CENTER> | センタリング |
となります。 より多くのタグや、それに関するオプションなどもありますが、それはHTMLの解説のページなどで勉強してくださいね。(^^)
リンクのタグ
前にリンクのタグについて書きました。ＨＰを作るとき、やはり見てくれた人からのメールをもらえるとうれしいね。メールをくださいとあるところをクリックすると、メーラーが立ち上がってメールを書いてもらえるようにしましょう。
<A HREF="mailto:あなたのメールアドレス">...</A>でＯＫです。ＨＰを見てメールをくれたんだなと、受け取ったとき一目見てわかると便利なので、
<A HREF="mailto:あなたのメールアドレス?subject=ＨＰみました">...</A>のようにしておくと、題名が「ＨＰみました」となったメールをもらうことが出来ます。
また、画像にリンクをつけることもできます。リンクのタグの中に画像のタグを入れればＯＫです。このとき画像の回りに枠線が表示されますが、IMGタグの中にBORDER=0と書き加えておくと枠が消えます
<A HREF="..."><IMG SRC="..."></A>ページが長くなるときは同一ページへのリンクもはれます。
<A HREF="#文字列">...</A> リンク元リンク先のページを、違うウィンドウに開きたいときはTARGETのオプションをつけます。
<A NAME="文字列">...</A> リンク先
<A HREF="..." TARGET="_blank">...</A> 新しいウィンドウ
<A HREF="..." TARGET="_top">...</A> フレームを解除して同じウィンドウ内に表示
TARGETを書かなければ、同じウィンドウにリンク先を表示します。
意外と便利なテーブル
テーブルって表です。表なんか使わないよと思うかもしれませんが、これが結構便利！。例えば、「文章に変化を付けるタグ」で、タグを書いたところにはテーブルが使ってあります。テーブルの枠線の太さをゼロにしてあるので、ぱっと見て表に見えてないだけです。よく見かけるリングのナビゲーションバーもテーブルを使っています。もしリングを自分で作りたいと思ったら、自分でナビゲーションバーを作らなくてはいけません。そういうときに知識があると作る手助けになるでしょう。
HTMLでは細かく文章の位置を決めることが難しいです。そういうときにテーブルを使うと解決できるときがあります。
<TABLE BORDER="1"><TR><TD>...</TD></TR></TABLE>ちょっとわかりにくいですね。(^^)。例を挙げます。
<TR>...</TR> 横１行
<TD>...</TD> セル１つ
<TABLE BORDER="1"><TR><TD>あ</TD><TD>い</TD><TD>う</TD></TR>これは下のように表示されます。
<TR><TD>か</TD><TD>き</TD><TD>く</TD></TR></TABLE>
| あ | い | う |
| か | き | く |
もし、BORDERを0にすれば、外枠線なしの表となります。数字が大きくなれば外枠の幅が広がります。また、幅や高さを指定することもできますが、指定しない場合は中に書いてある文章や画像に対応してテーブルの大きさが変わります。
<TABLE BORDER="1" WIDTH=".." HEIGHT="..">数字はブラウザの幅に対するパーセント（例：40%）や、ピクセル数（例：300）で指定できます。
他にもテーブルのオプションとして、BACKGROUND="ファイル名"でテーブルの背景ファイルが、BGCOLOR="色指定"でテーブルの色が、BORDERCOLOR="色指定"で枠の色が指定できます。背景ファイルや背景色はセルごとに指定することもできます（<TD BGCOLOR="#0000ff" のようにすればいいです。）
より見やすくするために、枠線と文章の間のスペースを変えることもできます。(CELLPADDING="整数（デフォルトは１）")
テーブルに関しては様々なオプションがあります。
壁紙をつけよう
壁紙の付け方は、BODYタグに書き加えます。
<BODY BACKGROUND="ファイル名">...</BODY>背景に色を付けるだけでいいなら
<BODY BGCOLOR="色指定">...</BODY>です。
リスト
<UL><LI>あいうえお<LI>かきくけこ<LI>さしすせそ</UL>これは下のようになります。
- あいうえお
- かきくけこ
- さしすせそ
<OL><LI>あいうえお<LI>かきくけこ<LI>さしすせそ</OL>
- あいうえお
- かきくけこ
- さしすせそ
アップロード！
ホームページはこうやって作って、そのファイルをプロバイダのサーバーに置きます（アップロード）。アップロードするときのために、自分のＰＣにサーバーにおくのと同じように構成したディレクトリを作ります。例えば、「homepage」という名前のディレクトリをつくります。そこにホームページのトップページを作ります。これの名前を「index.html」にします。そこからリンクする形で他のページを作っていきます。ＨＰを運営しているとどんどんファイルが増えてくるので、全部一緒のディレクトリに入れていると訳が分からなくなってきます。そこでカテゴリーごとにディレクトリを作って（homepageディレクトリの中に作ります）管理することをおすすめします。画像ファイルも忘れずにアップロードしてくださいね
アップロードのやり方は、大抵プロバイダーのＨＰの解説を説明したページに丁寧に書いてあるので、各自自分のプロバイダのページをみてくださいね。ちなみにファイルをサーバーに転送するツールのことをFTPクライアントと呼びます。（代表的な物にNextFTP(シェアウェア）などがあります。）
最初の設定さえ済めば、クリック１回でホームページが転送（更新）できるようになります。
フレームにしたい
フレームのページでよくあるのが左にメニュー、右に内容というものですね。実はフレームのページは、最初にアクセスしたときに３つのファイルを読んでくることになります。だから結構重くなることを覚えておきましょう。一番最初にアクセスするページ（test3.html）の内容は
<HTML> <HEAD> <TITLE>私のページ</TITLE>とします。<NOFRAME>はフレーム未対応ブラウザをつかっている人のための配慮です
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME SRC="menu.html" NAME="LEFT">
<FRAME SRC="ftop.html" NAME="RIGHT">
<NOFRAME>
<BODY>
フレーム対応ブラウザで見てください
</BODY>
</NOFRAME>
</HTML>
パーセントの数字はどれくらいの割合でブラウザの画面を分割するかです。ピクセル数でも指定できます 。また、<FRAMESET COLS...ではなく、<FRAMESET ROWS...にすると横に分割されます。
そして、左側のメニューのファイル（menu.html）の中身を
<HTML> <HEAD> <TITLE>私のページ</TITLE>とします。TARGETでRIGHTを指定すると、右側のウィンドウにリンク先が表示されます。右側の(ftop.html)にはトップページを作ります
</HEAD>
<BODY>
<A HREF="profile.html" TARGET="RIGHT">プロフィール</A><br>
<A HREF="diary.html" TARGET="RIGHT">日記</A><br>
<A HREF="ftop.html" TARGET="RIGHT">トップ</A> </BODY>
</HTML>
<HTML> <HEAD> <TITLE>私のページ</TITLE>お好きなように作ってください。メニューでリンクしているprofile.htmlとdiary.htmlも適当に作ってくださいね
</HEAD>
<BODY>
トップページだよ。
</BODY>
</HTML>
こうやってできたのが test3.html です。ソースを見て確かめてくださいね
サーチエンジン対策
検索エンジン（ただしロボットサーチのみです）の中には、次のタグを書いておくと、ここに書かれたキーワードや説明を検索結果に反映させてくれるものもあります。METAタグは<HEAD>と</HEAD>の間に書きます。
<META NAME="Keywords" CONTENT="おべんとう,日記">こうしておくと、おべんとうというキーワードで検索したときにヒットしたり、「幼児のお弁当と日記です」という説明を出してくれる検索エンジンもあります。
<META NAME="Description" CONTENT="幼児のお弁当と日記です">
その他
そのほかにも、画像の横に文章を書く方法や、テキストの書体を変える方法などいろいろあります。でも最低限これだけ知っていると、そこそこなホームページが作れちゃうんです！私も使うタグはこれまでに書いたものが主です。大体のところがわかってくると、解説書やリファレンスを見てもわかるようになってくると思います。
つづく（予定 ^_^;)