HTMLからホームページの作り方まで

HTMLからホームページの作り方まで

このコーナーではホームページに全く触れたことのない人が自分のホームページを作成出来るようになることが目的です。これから随時更新して行きたいと思います。

１．自分のホームページのアドレスを取得する。

まず自分のホームページのアドレスがないと意味ないです。そのためにはまずプロバイダーと契約しましょう。そうすると電話回線を用いてインターネットや電子メールなどが出来るようになります。そして貴方のホームページのアドレスをプロバイダーに電子メールで送って聞いてみましょう。そうすると貴方のホームページのアドレスをメールで教えてもらえるはずです。

２．ＨＴＭＬ文書を書く。

ＨＴＭＬ文書とはHyperText Markup Languegeのことで文書内に‘タグ’（←‘<>’の中に文字を書いて文書命令を出すもの）と呼ばれるものを文書内に書いていって作る文書のことです。このＨＴＭＬ文書を作るのはメモ帳で行ないます。

３．タグについて。

タグ（←<>）の中に何を書いていくかはまず具体的な例を出して説明します。まずメモ帳を開いて次の４行を入力して下さい。

<HTML>

<TITLE>テスト文書</TITLE>

<BODY TEXT="blue">

<BODY BGCOLOR="yellow">

これはテストです。</BODY>

</HTML>

そしてこのメモ帳を‘test.html’という名前で保存して下さい。そして保存したこのファイルを見ると黄色の背景のところに青色の文字で‘これはテストです。’と書いてあるはずです。こんな感じ

基本的に‘<>’と‘</>’に文字をはさんで作っていくのがHTML文書です。

それではタグにはどんな種類のものがあるのか見てみましょう。

<HTML>タグ・・・文書の最初と最後に書くものです。

<HEAD>タグ・・・<TITLE>タグ等をはさみます。

<TITLE>タグ・・・ホームページのタイトルになります。

<BODY>タグ・・・ホームページに表示させたい部分をこれではさみます。

<BR>タグ・・・改行します。

<P>タグ・・・段落を作ります。

<STRONG>・・・文字を太くします。

<FONT>タグ・・・<FONT COLOR>タグは文字の色を変えれます。<FONT COLOR="yellow">のように使います。<FONT SIZE>は文字の大きさを変えれます。<FONT SIZE="3">のように使います。数字は１から７までです。

<CENTER>タグ・・・文字等を中心に寄せます。

これだけあれば普通のページが作れます。次は‘表’の作り方や‘画像の挿入’などについてやって行きたいと思います。

４．表の作り方

表(TABLE)を作るとホームページの外観がかわります。早速、表の例を紹介します。

２行３列の表(TABLE)

１行１列	１行２列	１行３列
２行１列	２行２列	２行３列

この表を作るには次のような作業をします。

<tr>タグの個数が‘行数’を決定します。そして <td>タグの個数で‘列数’を決定します。これを応用して好きな表(TABLE)を作って下さい。

５．リンクの張り方

１ページだけのホームページなんてさみしいと思います。だからここでは‘リンクの張り方’について説明致します。そのためには最低２ページのファイルを用意しなければなりません。そしてリンクしたいページに次のタグを入れてみましょう。

<a href="ninkikekka.html">ホームページ人気投票結果へ</a">

そうするとこの場合、‘ホームページ人気投票結果へ’という部分をクリックすると‘ninkikekka.html’というファイルを表示することになります。リンクを張る時の注意点としては‘勝手に他人のホームページにリンクを張らない’という事です。訴えられる場合があるそうです。でも私のホームページへのリンクはメールで‘リンクを張りたいよ！’と言って頂ければ自由に張ってもらって結構ですよ。

６．画像の挿入の仕方

やっぱり画像が全くないと寂しいホームページになってしまいます。画像を挿入したいところに次のタグを入れてみて下さい。

<img src="kaori51.jpg">

ここで‘kaori51.jpg’というのはファイルの名前です。他にも‘.gif’の拡張子を持つものも画像として挿入する事が出来ます。拡張子が‘.jpg’か‘.gif’のファイルをあらかじめ用意しておいて下さいね。それと画像は他人のページから勝手に取らないようにしましょう。取るのだったら‘取っても良いよ。’と許可のあるページから取るようにしましょう。もしくは自分で作りましょう。

７．フォームの作り方

‘フォーム’とは何だろう？とお思いの人もいらっしゃると思います。‘フォーム’とは<form>～</form>タグで囲まれた部分の事でこれを使うとメールソフトを使ってフォームを送信する事が出来ます。<form>～</form>タグの中にも色んな決まり事があるのでまずはそちらの方を紹介して行きましょう。

【入力ボックス】

ボタンStep 7で説明したボタン以外に，文字や数値などを入力できるフォームがあるので，ここではそれらについて説明します．

文字入力ボックス（1行）
文字入力ボックスを作成するタグは，．
<FORM> <INPUT NAME="Input" SIZE=30 MAXLENGTH=15 VALUE="文字入力ボックス"> </FORM>

とします．NAMEオプションは入力欄の名前，SIZEオプションは入力ボックスの表示幅，MAXLENGTHオプションは入力できる最大文字数，VALUEオプションは入力欄に前もって表示するテキストです．

文字入力ボックス（複数行）
複数行の文字入力ボックスを作成するには，
<FORM> <TEXTAREA NAME="Input" ROWS=3 COLS=40>文字入力ボックス（複数行）</TEXTAREA> </FORM>
文字入力ボックス（複数行）
とします．NAMEオプションは入力欄の名前，ROWSオプションは縦幅を表す行数，COLSは横幅を表す半角文字数を設定します．

パスワード入力ボックス
パスワード入力ボックスを作成するタグは，
<FORM> <INPUT TYPE=PASSWORD NAME="Pass" SIZE=8 MAXLENGTH=8> </FORM>

とします．TYPEオプションはパスワード入力欄に設定するためのものです，SIZEオプションは入力ボックスの表示幅，MAXLENGTHオプションは入力できる最大文字数です．

ラジオボックスとチェックボックス
項目にチェックを入れる時に便利です。
<FORM>
1<INPUT TYPE=radio NAME="radio" >
2<INPUT TYPE=radio NAME="radio" >
3<INPUT TYPE=radio NAME="radio" >
</FORM>
1 2 3
ここでの注意点としてはNAMEを同じにする。ということです。NAMEはフォームの送信の時に大切ですのでちゃんと名前をつけましょう。

多数選択をしてもらう時はチェックボックスを使います。
<FORM>
1<INPUT TYPE=checkbox NAME="checkbox1" >
2<INPUT TYPE=checkbox NAME="checkbox2" >
3<INPUT TYPE=checkbox NAME="checkbox3" >
</FORM>
1 2 3
チェックボックスの場合はNAMEを異なるものにしましょう。

【リスト】

幾つかの選択肢があるような場合，リストボックスなどを使用することがあります．ここではそのリストについて簡単に説明します．
リストボックス
リストボックスを作成するには，
<FORM>
<SELECT NAME="LBox" SIZE=3>
<OPTION>選択肢1
<OPTION>選択肢2
<OPTION>選択肢3
<OPTION>選択肢4
<OPTION>選択肢5
</SELECT>
</FORM>

とします．NAMEオプションはリストボックスの名前，SIZEオプションは表示行数．

ドロップダウンリスト
ドロップダウンリストを作成するには，
<FORM>
<SELECT NAME="DList" SIZE=1>
<OPTION>選択肢1
<OPTION>選択肢2
<OPTION>選択肢3
<OPTION>選択肢4
<OPTION>選択肢5
</SELECT>
</FORM>

とします．NAMEオプションはドロップダウンリストの名前，またドロップダウンリストの場合SIZEオプションは1に設定します．２以上の値を設定した場合は通常のリストボックスになってしまいます．

【フォーム送信】

これらのフォームをまとめてメールを用いて送信する事が出来ます。説明の時はいちいち一つずつ‘<form>’～‘</form>’タグを付けていますけどこれは最初と最後にだけ書いて下さい。

‘<form>’のかわりに‘<form action="mailto:kouchan1@d1.dion.ne.jp" method="post">’とするとメール形式でフォームの内容を送る事が出来ます。mailto:の後には自分のメールアドレスを記述して下さい。送信ボタンを作るには、

<input type="submit" value="送信します">とすると

というボタンが作成されます。これを押すとメール形式でフォーム内の内容を送信する事が出来ます。

このシステムは掲示板やアンケートなどに利用する事が出来ます。以上をまとめますとこんな感じになります。

<form action="mailto:kouchan1@d1.dion.ne.jp" method="post"><br>
<INPUT NAME="Input" SIZE=30 MAXLENGTH=15 VALUE="文字入力ボックス"><br>
<TEXTAREA NAME="Input" ROWS=3 COLS=40>文字入力ボックス（複数行）<br>
</TEXTAREA><br><br>

<INPUT TYPE=PASSWORD NAME="Pass" SIZE=8 MAXLENGTH=8>
1<INPUT TYPE=radio NAME="radio" > 2<INPUT TYPE=radio NAME="radio" > 3<INPUT TYPE=radio NAME="radio" ><br>
1<INPUT TYPE=checkbox NAME="checkbox1" > 2<INPUT TYPE=checkbox NAME="checkbox2" > 3<INPUT TYPE=checkbox NAME="checkbox3" ><br>
<SELECT NAME="LBox" SIZE=3><br>
<OPTION>選択肢1<br>
<OPTION>選択肢2<br>
<OPTION>選択肢3<br>
<OPTION>選択肢4<br>
<OPTION>選択肢5<br>
</SELECT><br><br>

<SELECT NAME="DList" SIZE=1><br>
<OPTION>選択肢1<br>
<OPTION>選択肢2<br>
<OPTION>選択肢3<br>
<OPTION>選択肢4<br>
<OPTION>選択肢5<br>
</SELECT>

<br><br> </form>

<br><br> <input type="submit" value="送信します">

文字入力ボックス（複数行）

1 2 3
1 2 3

といった感じです。それぞれの配置は自分で好きなように設定して下さい。

しかし‘form’によって転送されてきたメールは文字化けを起こしているのでそれを直すソフトが必要です。それは次のホームページで無料配布されています。

http://www.st.rim.or.jp/~kenmae

です。

８．ファイル転送の仕方

いよいよファイルをプロバイダー（←以後：‘サーバー’という）に転送します。せっかくファイルを作っても転送しなければホームページを公開することが出来ません。ではファイル転送は一体どうすれば出来るのかをご紹介したいと思います。

①ファイル転送ソフトを入手する

これがないと話になりません。私が使っているのは‘FTP Explorer’という転送ソフトです。このソフトは次のホームページで無料配布されています。

http://www.forest.impress.co.jp/

です。

②ファイル転送ソフトの設定をする

ファイルを転送する場所を設定します。これは貴方の入っているサーバーに聞けば分かります。

これでファイルを無事転送出来れば貴方のアドレスにアクセスすると貴方の作ったホームページを見る事が出来ます。ただしここで注意することは表紙のページのファイル名は‘index.html’にしなければなりません。でないとページが表示されないおそれがあります。

９．ページの更新について

ホームページをただ作っただけでは最初のうちはみなさん見に来てくれると思いますが更新されていないとそのうち見に来る人が減ってきます。だから最低でも１週間に１度ぐらいは何かしらの更新をした方がいいと思います。特に掲示板はこまめに更新しないとあまり意味がないです。そして他のホームページを見ていていいところがあったらソースを見て参考にしてみましょう。そして楽しいホームページを作って行ってください。

今後の掲載予定

ひとまず‘HTML文書’はこれで終了致します。今度からは‘STYLE SHEET’や‘JAVA’などを紹介して行こうかと思っています。

ホームへ戻る