Windowsのパソコン１台。Windows 95以降なら何でも良い。Macでも出来るだろうが、私は知らない。
色々なホームページを見ると、字の大きさや色が変わっていたり、クリックすると他のページへ飛んで行ったり、綺麗に表を組んであったりする。コンピューターが気を利かせて勝手にレイアウトしてくれたりするはずはないから、これらを実現するためには、一つ一つの指定をしなければならないのである。これを実現するための言語（といっても、プログラミング言語のように判断文やらループやらがあるわけではない）がHTMLである。HTMLとは何の略だろうとか、余計なことはこの際考えない。これから述べるようなものがHTMLであるということでいいではないか。
<html><head><title>ホームページを作ろう</title></head><body>
これが、このページを表示させるために必要な情報の全てである。メモ帳を開いて、最初からこれを打って行けば、ホームページなんかすぐに出来てしまうのである。しかし、そのためには、このHTMLなるものの仕組みを簡単に知っておく必要がある。
<html><head><title>（このページの題名を入れる）</title></head><body>
これを打ち込んだら、好きな場所に好きな名前で、但し、拡張子に.htmlを付けて保存してみよう。ファイル(F)→名前をつけて保存(A)で、例えばtest.htmlというファイル名で保存するのである。保存したら、そのファイルを開いてみよう。単にクリックしたりして開くと、元のメモ帳ではなく、インターネットエクスプローラーが立ち上がって、ホームページのように表示されるはずである。ただし、単に文章を入れただけだと、字は一色で大きさも一定、改行もされずにごちゃごちゃと出てくるだけである。レイアウトについては後述するが、とにかく、この方法で自分が発信したい文字情報をホームページ用の形式に出来ることはお解かり戴けたことであろう。ここで挙げたタグについては、そのまま丸暗記なり、常にコピペなりして戴ければよろしい。
以下のようにタグを使うことにより実現される。
１）改行するには
用意するもの
使用するソフトは、もともと入っているメモ帳（Notepad）とインターネットエクスプローラーだけである。
１．HTMLの基本
何でもいいから、インターネットのホームページを開き、上の表示(V)というところをクリックして、更にソース(C)をクリックしてみよう。そうすると、メモ帳が立ち上がり、ホームページの中身が表示される。例えば、このページのソースを表示させると、以下のようになる。
<center><font size="4">ホームページを作ろう</font></center>
<br><br>
なんだか、最近やたらと凝ったページが多くて、・・・・・
まず、このHTMLのコマンド（のようなもの）は、全てタグと呼ばれる。このタグは半角の不等号<>で囲まれている。
では、何も考えずに、ページを一つ作ってみよう。メモ帳を開き、次のように打ってみよう。面倒なら、画面に表示されているものをそのままコピペしても良い。
（表示させたい文章を入れる）
</body></html>
２．簡単なレイアウトとフォントの指定
単に改行しても、改行は無視して連続して表示される。例えば、以下のように打ってみよう。
|
<html><head><title>改行のテストページ</title></head><body> １．化け猫 ２．物の怪 ３．あいうえお </body></html> |
|
これを表示させてみると、上のように「１．化け猫２．物の怪３．あいうえお」と、連続して表示されるだけである。改行させるためには、<br>タグを入れる。また、<hr>タグに変えると、仕切り線が入る。
|
<html><head><title>改行のテストページ</title></head><body> １．化け猫<br> ２．物の怪<hr> ３．あいうえお<br> </body></html> |
|
これで、改行されたり、仕切り線が入ったりして表示されるようになった。行間をあけたいときは、他のタグもあるが、<br>をいくつも打てば、打っただけ改行されるので行間があく。
２）右寄せ、中央寄せ
例えば、「敬具」を右に寄せたり、「記」をセンタリングしたりしたくなることがある。こういうときには、<div align="***">を使用する。***の部分にcenterと入れれば中央に、rightと入れれば右に寄る。leftで左に寄るが、もともと左に寄ってるから、意味がない。寄せたい部分の終わりには、</div>と書くと、それ以降は普通（左寄せ）に戻る。</div>を入れ忘れると、最後まで寄ったままである（笑）。ちなみに、中央寄せは<center>（文章）</center>でも同じである。
|
<html><head><title>右寄せ・中央寄せのテストページ</title></head><body> 拝啓 なんとかかんとか。<br> <div align="right">敬具</div><br><br> <div align="center">記</div><br><br> １．化け猫<br> ２．物の怪<br> ３．うわばみ<br><br> <div align="right">以上</div><br><br> </body></html> |
|
３）フォントの指定
字の大きさと色を任意に変えることが出来る<font>タグを覚えよう。<font size="*" color="#rrggbb">という風に書くが、sizeは1〜7で指定し、colorは赤緑青を各２５６段階で１６進数を用いて指定する。面倒なら、color="red"という風に、英語で色の名前を書いておけば、大抵は表示される。sizeとcolorは順番が変わってもいいし、一方を省略しても構わない。指定が終わったら、やはり</font>と書いておく。
|
<html><head><title>フォントのテストページ</title></head><body> <font size="1" >小さい化け猫</font><br> <font size="7" >ドデカイ化け猫</font><br> <font color="green">緑色の化け猫</font><br> <font size="5" color="#800000">やや大きい茶色の化け猫</font><br> </body></html> |
|
４）強調・下線その他
太字、下線、斜体、取り消し線が簡単に指定できる。
|
<html><head><title>強調他のテストページ</title></head><body> <b>太字の化け猫</b><br> <u>アンダーライン化け猫</u><br> <i>傾いた化け猫</i><br> <s>消された化け猫</s><br> </body></html> |
|
勿論、<font>と併用することも出来る。
|
<html><head><title>ミニリンク集</title></head><body> <a href="http://www.kit.hi-ho.ne.jp/bknk/bakeneko.html">化け猫屋敷(=^^=)</a> 勇気があったら見てみよう。<br><br> <a href="http://www.kit.hi-ho.ne.jp/bknk/bakaneko/">ばけねこのお部屋</a> 秘密のおへやよ♪<br><br> ところで、<a href="http://www.kit.hi-ho.ne.jp/bknk/himitsu.html">ヒミツの部屋</a>はもう見ました？ 未成年者お断りです！<br><br> </body></html> |
|
|
<html><head><title>表のテストページ</title></head><body> <center>うわばみ系物の怪一覧 <table border="1"> <tr><td>ＨＮ</td><td>最大酒量</td><td>隠し技</td></tr> <tr><td>伊那○</td><td>１升以上</td><td>ラム</td></tr> <tr><td>○ーさん</td><td>１升以上</td><td>カリフォルニアワイン</td></tr> <tr><td>○け猫</td><td>７合</td><td>カナディアン（ストレート）</td></tr> </table></center> </body></html> |
|
また、表の中でも<font>などのタグを使うことが出来るし、リンクを張ったり画像を貼り付けたりも出来る。なお、<table border="0">とすると枠が表示されないので、表としてではなく、上下左右を揃えるレイアウトのために利用することが出来る。
これ以外のタグや、ここで紹介したタグの使い方の応用例は、各自別のページや書籍で調べられたい。何れにせよ、気に入ったページがあったら、ソースを見てタグの使い方を真似するのが一番の早道である。
なお、このようにして作成したページを実際にホームページとしてアップロードするためには、ＦＴＰと呼ばれる専用のソフトが必要であるが、これは各自調達されたい（大抵は無料で手に入るはず）。