佐賀大学農学部 応用生物科学科 情報基礎演習 テキスト 科目ホームページ
ホームページ作成法２
リンク
WWWの最大の特徴は、どんどん他のページとのリンクを作れるということでしょう。
たとえば、このようなリンク集がすぐに作れます。
上のリンク集のソースは
<![CDATA[
<UL>
<LI><A HREF="http://genome.ag.saga-u.ac.jp/">和田研究室ホームページ</A>
<OL><LI><A HREF="http://genome.ag.saga-u.ac.jp/textbook/textbook8.html">情報基礎演習Iホームページ</A>
<LI><A HREF="http://genome.ag.saga-u.ac.jp/annnai.html">2年生向け分野案内</A>
<LI><A HREF="http://genome.ag.saga-u.ac.jp/member.html">メンバー紹介</A>
</OL>
</UL>
]]>
HREF=""の""の中に書かれているのがWebページの番地(URL)です。
リンクの文字列は通常は青字のアンダーラインで表示されますが、
画像をクリックするようなリンクもできます。
リンク画像ということをはっきりさせるためにボーダーラインを太く(borde=2)しています。
フォーム
Webではクライアント側の情報をサーバーに送ることもできます。
ただし、これはクライアント側の情報漏洩やサーバーハックの危険がありますので、
セキュリティーに十分注意したコーディングが必要です。
クライアントから情報を入力する時にはフォームを利用します。
フォームには、処理方法や利用するCGIプログラムなどを記述する<form>タグ、
入力方法を規定する<input>タグ、選択メニューを作る<select>タグ、
複数行の入力エリアを作る<textarea>タグがあります。
それでは次のプログラムをメモ帳で作成して、form1.htmlとして保存してください。
なお、mailto:のあとの???には自分のメールで使っている学籍番号を入れてください。
<![CDATA[
<HTML lang=ja>
<HEAD>
<TITLE>フォーム例１</TITLE>
</HEAD>
<BODY>
<H2>フォーム例１</H2>
<form method=GET action="textbook8.html">
<td><input type=submit value="情報基礎演習I"></td>
</form>
<H2>フォーム例２</H2>
<form method=GET action="http://www.google.com/search">
<table bgcolor=white>
<tr><td>
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_40wht.gif" border=0 alt="Google" align="absmiddle"></a>
<input type=text name=q size=31 maxlength=255 value="">
<input type=hidden name=hl value="ja">
<input type=submit name=btnG value="Google 検索">
</td></tr>
</table>
</form>
<H2>フォーム例３</H2>
<form method=POST action="mailto:???@edu.cc.saga-u.ac.jp">
貴方の名前
<input name=name value="Guest"><br>
電子メール
<input name=email size=30><br>
性 別
<input type=radio name=sex value=man>男
<input type=radio name=sex value=female>女
<input type=radio name=sex value=xx checked>不明<br>
年 齢
<select name=age>
<option value=10>20未満
<option value=20>20代
<option value=30>30代
<option value=40>40以上
</select><br>
感 想<br>
<textarea name=res rows=3 cols=54></textarea><br>
<input type=reset value=" リセット ">
<input type=submit value="メール送信">
</form>
</BODY>
</HTML>
]]>
フォーム例１ではactionにファイルを指定しています。
type=submit でボタンを表示し、そのボタンが押されるとtextbook8.htmlを表示します。
フォーム例２はGoogoleの検索フォームです。
actionにはGoogoleの検索ソフトのURLが指定されています。
input type=text のタグで検索語を入力するフォームを指定し、
input type=submit で検索を開始するボタンを指定しています。
input type=hidden は隠し文字列を指定しています。
この場合は、検索時に日本語を標準とするように、jaという文字列を、
actionで指定されたプログラムに教えています。
フォーム例３はよくあるメールでのアンケートフォームです。
action="mailto:ywada@cc.saga-u.ac.jp"でメールソフトの起動と宛先を指定します。
input type=radioはラジオボタンを指定します。
input type=resetは入力したデータを全てリセット（空）にします。
実際に自分宛のメールアドレスにして、アンケートフォームに答えて、メールを送信してみましょう。
届いたメールにPOSTDATA.ATTという添付ファイルがありますので、メモ帳で中身をみてみましょう。
<![CDATA[
name=%98a%93c%8DN%95F&email=aaa@cc.saga-u.ac.jp&sex=man&age=40&res=%91%E5%8F%E4%95v%81H
]]>
このように全角文字を入力した部分は全て%??という感じで変換されています。
これを元の漢字に戻すには変換プログラムが必要です。
参考ページ
佐賀大学 農学部 応用生物科学科 動物資源開発学分野 和田研究室
ywada@cc.saga-u.ac.jp