|
■ホームページ基礎知識
1章； HTML入門
2章； HTMLの基本
3章； リンクについて
4章； 文章の整形
5章； ファイル転送
6章； 画像について
■基礎知識 「中級編」
■基礎知識 「上級編」
■HTML リファレンス
・基本構成編
・リンク編
・フォント編
・テキスト編
・画像編
・リスト編
・テーブル編
・フレーム編
・フォーム編
・拡張タグ編
・カラー編
■アクセスアップの方法
・評価の高いサイト
・SEOのメリット
・SEO関連語句解説
■相互リンクについて
お勧めレンタルサーバー
■お勧め独自ドメインプラン
違うURLサイト複数製作可
□相互リンクでSEO!
□やきぶたサーチSEO
□アクセスアップ無料情報
□ホームページ作成講座
□アクセスアップSEO
□格安レンタルサーバー
Ｌ 無料レンタルサーバー
□チャ−シューメンズ倶楽部
□SEOのつもりがスパム？
■ホームページ作成
★FC2 無料ホームページ
★ホームページ テンプレート 1
★ホームページ テンプレート 2
|
■ 入力フォームの基本構成
<FORM ACTION="url|mailto:..@.." METHOD="GET|POST">
<FORM ACTION="url|mailto:..@.." METHOD="GET|POST" TARGET="aaa">
<INPUT>
<SELECT>
<OPTION>
<TEXTAREA>
</FORM>
- 【説明】
-
Web上でのアンケートや掲示板に使用する入力フォームを作成します。<FORM></FORM>の中で<INPUT> <SELECT> <OPTION> <TEXTAREA> などの入力タグを記述します。
ACTIONで入力されたデータを処理するプログラムのURLを指定します。通常はCGIプログラムを指定します。しかし mailto を使用すればCGIプログラムを使用せずメールでデータを受け取ることができます。その場合メールで送られてきた文字はそのままでは読むことができないので CripDecorder(フリーウェア) などのソフトが必要です。｢窓の杜｣などからダウンロードすることができます。
METHODでデータを送る方法を指定します。GETを指定してデータを環境変数 QUERY_STRING を使用するか、POSTを指定してNCSAhttpdに付属する QUERY を使用します。
TARGETでCGIの結果を別のウィンドーや別のフレームに表示させることもできます。
- 【使用例】
- <FORM ACTION="/cgi-bin/query" METHOD="GET">
- 【使用例】
- <FORM ACTION="MAILTO:w3tf@sipeb.aoyama.ac.jp" METHOD="POST">
■ クリッカブルボタン
<INPUT TYPE="SUBMIT" NAME="" VALUE="">
<INPUT TYPE="RESET" NAME="" VALUE="">
<INPUT TYPE="BUTTON" NAME="" VALUE="">
- 【説明】
- クリック可能なボタンを作成します。
SUBMITでデータを送るための登録ボタンを作成します。このボタンはフォームを使用するのに必ず必要です。
RESETでフォームに入力されたデータをリセットします。
BUTTONはSUBMITやRESETとは違うボタンで、主にJavaScriptを併用して使用します。
NAMEでデータを送るときの変数名(タイトル)を指定します。SUBMITボタンが複数必要なとき使用します。
VALUEでデータを送るときの変数値を指定します。
- 【使用例１】
<FORM ACTION="/cgi-bin/query" METHOD="GET">
<INPUT TYPE="SUBMIT" VALUE="送信">
<INPUT TYPE="RESET" VALUE="リセット">
</FORM>
- 【表示１】
-
- 【使用例２】
<FORM ACTION="/cgi-bin/query" METHOD="GET">
<INPUT TYPE="SUBMIT" NAME="部署" VALUE="営業部">
<INPUT TYPE="SUBMIT" NAME="部署" VALUE="経理部">
<INPUT TYPE="SUBMIT" NAME="部署" VALUE="企画部">
</FORM>
- 【表示２】
-
■ 文字入力フィールド
<INPUT TYPE="TEXT" NAME="" VALUE="">
<INPUT TYPE="TEXT" NAME="" VALUE="" SIZE="n" MAXLENGTH="n">
<INPUT TYPE="PASSWORD" NAME="" VALUE="">
<INPUT TYPE="PASSWORD" NAME="" VALUE="" SIZE="n" MAXLENGTH="n">
- 【説明】
-
文字をユーザーが直接入力するフィールドを作成します。
TEXTで文字入力フィールドを作成します。ユーザーが入力したままの文字が表示されます。
PASSWORDを指定するとユーザーが入力した文字は｢＊＊＊＊｣で表示されます。
NAMEでデータを送るときの変数名(タイトル)を指定します。必ず記述する必要があります。
VALUEで文字入力フィールドにあらかじめ表示される初期値を指定します。
SIZEで入力フィールドの横幅をピクセル数で指定します。
MAXLENGTHで最大入力文字数を指定します。何も指定しなければ無制限となります。
下の使用例の部分に文字を入力してみてください。
- 【使用例１】
<FORM ACTION="/cgi-bin/query" METHOD="GET">
<INPUT TYPE="TEXT" NAME="部署" SIZE="30"><BR>
<INPUT TYPE="SUBMIT" VALUE="送信">
<INPUT TYPE="RESET" VALUE="リセット">
</FORM>
- 【表示１】
-
- 【使用例２】
<FORM ACTION="/cgi-bin/query" METHOD="GET">
<INPUT TYPE="PASSWORD" SIZE="30"><BR>
<INPUT TYPE="SUBMIT" VALUE="送信">
<INPUT TYPE="RESET" VALUE="リセット">
</FORM>
- 【表示２】
-
■ ラジオボタン･チェックボックス
<INPUT TYPE="RADIO" NAME="xxx" VALUE="aaa">
<INPUT TYPE="RADIO" NAME="xxx" VALUE="aaa" CHECKED>
<INPUT TYPE="CHECKBOX" NAME="xxx" VALUE="aaa">
<INPUT TYPE="CHECKBOX" NAME="xxx" VALUE="aaa" CHECKED>
- 【説明】
- 複数個あるボタンのうち単数回答を求めるラジオボタンと、複数回答可能なチェックボタンを作成します。
NAMEでデータを送るときの変数名(タイトル)を指定します。必ず記述する必要があります。
VALUEで変数値を指定します。ラジオボタン･チェックボタンは通常複数使用するのでVALUEを指定してください。ここでの指定は自分さえ分かればいいです。
CHECKEDで最初からボタンをチェックした状態にします。
- 【使用例１】
<FORM ACTION="/cgi-bin/query" METHOD="GET">
<INPUT TYPE="RADIO" NAME="Post" VALUE="営" CHECKED>営業部
<INPUT TYPE="RADIO" NAME="Post" VALUE="経">経理部
<INPUT TYPE="RADIO" NAME="Post" VALUE="企">企画部
<INPUT TYPE="RADIO" NAME="Post" VALUE="人">人事部
<INPUT TYPE="RADIO" NAME="Post" VALUE="販">販売課
<INPUT TYPE="RADIO" NAME="Post" VALUE="庶">庶務課
</FORM>
- 【表示１】
-
- 【使用例２】
<FORM ACTION="/cgi-bin/query" METHOD="GET">
<INPUT TYPE="CHECKBOX" NAME="Post" VALUE="営" CHECKED>営業部
<INPUT TYPE="CHECKBOX" NAME="Post" VALUE="経">経理部
<INPUT TYPE="CHECKBOX" NAME="Post" VALUE="企">企画部
<INPUT TYPE="CHECKBOX" NAME="Post" VALUE="人">人事部
<INPUT TYPE="CHECKBOX" NAME="Post" VALUE="販">販売課
<INPUT TYPE="CHECKBOX" NAME="Post" VALUE="庶">庶務課
</FORM>
- 【表示２】
-
■ 画像ボタン
<INPUT TYPE="IMAGE" VALUE="bbb" SRC="ccc">
<INPUT TYPE="IMAGE" NAME="aaa" VALUE="bbb" SRC="ccc">
- 【説明】
-
画像をクリックしたときその座標を得るためのフィールドを作ります。これは TYPE="SUBMIT" の動作を兼ねているので登録ボタンを作成する必要はありません。
NAMEは必須ではありませんが、指定しないと送られてくるデータでは｢X=46｣｢Y=49｣のようになりますが、たとえば｢NAME="sipeb"｣と指定すると｢sipeb.X=95｣｢sipeb.Y=67｣となります。
SRCで画像ファイルを指定します。もちろん必須です。
- 【使用例】
<FORM ACTION="/cgi-bin/query" METHOD="GET">
<INPUT TYPE="IMAGE" NAME="post" SRC="../image/post.gif" BORDER="0">部署をクリッ
クしてください。
</FORM>
- 【表示】
-
 部署をクリックしてください。
■ 隠しフィールド
<INPUT TYPE="HIDDEN" NAME="aaa" VALUE="bbb">
- 【説明】
-
本来、フォームを使用すると入力したデータがブラウザに表示されますが、HIDDENを使用するとブラウザに表示されません。
NAMEでデータの変数名を指定します。必須です。またVALUEでデータの変数値を指定します。
- 【使用例】
<FORM ACTION="/cgi-bin/query" METHOD="GET">
<INPUT TYPE="HIDDEN" NAME="HIDDEN" VALUE="HIDDEN">
<INPUT TYPE="SUBMIT" VALUE="送信">
<INPUT TYPE="RESET" VALUE="リセット">
</FORM>
- 【表示】
-
■ 選択メニュー
<SELECT NAME="aaa">
<SELECT NAME="aaa" SIZE="N">
<SELECT NAME="aaa" SIZE="n"MULTIPLE>
<OPTION VALUE="bbb" SELECTED>
<OPTION VALUE="bbb" ></SELECT>
- 【説明】
-
選択メニューを作成します。ユーザーに一つ、または複数選択してもらうためのフィールドを作成します。
NAMEでデータを送るときの変数名を指定します。
SIZEでメニューウィンドーの行数を指定します。指定しないとプルダウン形式となります。
MULTIPLEを使用すると複数選択が可能になります。ただしSIZEを指定したときに限ります。
OPTIONでユーザーに選択データを表示します。
VALUEでデータの変数値を指定します。
SELECTEDで任意の選択肢をあらかじめ選ばれた状態にします。
- 【使用例１】
<FORM ACTION="/cgi-bin/query" METHOD="GET">
<SELECT NAME="部署">
<OPTION VALUE="営">営業部
<OPTION VALUE="経">経理部
<OPTION VALUE="企">企画部
<OPTION VALUE="人">人事部
<OPTION VALUE="販">販売課
<OPTION VALUE="庶">庶務課</SELECT><BR>
<INPUT TYPE="SUBMIT" VALUE="送信">
<INPUT TYPE="RESET" VALUE="リセット">
</FORM>
- 【表示１】
-
- 【使用例２】
<FORM ACTION="/cgi-bin/query" METHOD="GET">
<SELECT NAME="部署" SIZE="2">
<OPTION VALUE="営">営業部
<OPTION VALUE="経">経理部
<OPTION VALUE="企">企画部
<OPTION VALUE="人">人事部
<OPTION VALUE="販">販売課
<OPTION VALUE="庶">庶務課</SELECT><BR>
<INPUT TYPE="SUBMIT" VALUE="送信">
<INPUT TYPE="RESET" VALUE="リセット">
</FORM>
- 【表示２】
-
- 【使用例３】
<FORM ACTION="/cgi-bin/query" METHOD="GET">
<SELECT NAME="部署" SIZE="4" MULTIPLE>
<OPTION VALUE="営">営業部
<OPTION VALUE="経">経理部
<OPTION VALUE="企">企画部
<OPTION VALUE="人">人事部
<OPTION VALUE="販">販売課
<OPTION VALUE="庶">庶務課</SELECT><BR>
<INPUT TYPE="SUBMIT" VALUE="送信">
<INPUT TYPE="RESET" VALUE="リセット">
</FORM>
- 【表示３】
-
■ 複数行にまたがる入力フィールド
<TEXTAREA COLS="n" ROWS="n" NAME="aaa">
</TEXTAREA>
- 【説明】
-
複数行にまたがる入力フィールドを作成します。
あらかじめ<TEXTAREA></TEXTAREA>の間に文字を書けばフィールドないにあらかじめ文字を表示させておくことができます。
NAMEで変数名の指定をします。
COLSで1行あたりの文字数(横幅)を、ROWSでフィールドの行数(高さ)を指定します。
- 【使用例１】
<FORM ACTION="/cgi-bin/query" METHOD="GET">
<TEXTAREA NAME="text" COLS="50" ROWS="6">
</TEXTAREA><BR>
<INPUT TYPE="SUBMIT" VALUE="送信">
<INPUT TYPE="RESET" VALUE="リセット">
</FORM>
- 【表示１】
-
- 【使用例２】
<FORM ACTION="/cgi-bin/query" METHOD="GET">
<TEXTAREA NAME="text" COLS="50" ROWS="6">ご意見・ご感想をどうぞ
</TEXTAREA><BR>
<INPUT TYPE="SUBMIT" VALUE="送信">
<INPUT TYPE="RESET" VALUE="リセット">
</FORM>
- 【表示２】
-
■ サンプル
【使用例】
<FORM ACTION="mailto:motiya298@hotmail.com" METHOD="POST">
<P>お名前(ハンドルネーム)；
<INPUT TYPE="TEXT" NAME="name" SIZE="15">
</P>
<P>e-mailアドレス(省略可)</P>
<INPUT TYPE="TEXT" NAME="e-mail" SIZE="45">
</P>
<P>ホームページアドレス(省略可)；
<INPUT TYPE="TEXT" NAME="HP" SIZE="60">
</P>
<P>ご職業(省略不可)</P>
<INPUT TYPE="RADIO" NAME="job" VALUE="自営業" CHECKED>自営業
<INPUT TYPE="RADIO" NAME="job" VALUE="大学生">大学生
<INPUT TYPE="RADIO" NAME="job" VALUE="その他学生">その他学生
<INPUT TYPE="RADIO" NAME="job" VALUE="会社員">会社員
<INPUT TYPE="RADIO" NAME="job" VALUE="主婦">主婦
<INPUT TYPE="RADIO" NAME="job" VALUE="その他">その他
<P>HTMLレファレンスで役に立ったもの(省略不可)</P>
<INPUT TYPE="CHECKBOX" NAME="GOOD" VALUE="基本構成編">基本構成編
<INPUT TYPE="CHECKBOX" NAME="GOOD" VALUE="リンク編">リンク編
<INPUT TYPE="CHECKBOX" NAME="GOOD" VALUE="フォント編">フォント編
<INPUT TYPE="CHECKBOX" NAME="GOOD" VALUE="テキスト編">テキスト編
<INPUT TYPE="CHECKBOX" NAME="GOOD" VALUE="画像編">画像編
<INPUT TYPE="CHECKBOX" NAME="GOOD" VALUE="リスト編">リスト編
<INPUT TYPE="CHECKBOX" NAME="GOOD" VALUE="テーブル編">テーブル編
<INPUT TYPE="CHECKBOX" NAME="GOOD" VALUE="フレーム編">フレーム編
<INPUT TYPE="CHECKBOX" NAME="GOOD" VALUE="フォーム編">フォーム編
<INPUT TYPE="CHECKBOX" NAME="GOOD" VALUE="拡張タグ編">拡張タグ編
<INPUT TYPE="CHECKBOX" NAME="GOOD" VALUE="カラー編">カラー編
<P>ホームページの作成経験</P>
<SELECT NAME="作成経験">
<OPTION VALUE="0month" SELECTED>これから作る予定
<OPTION VALUE="1month">1ヶ月以内
<OPTION VALUE="3months">3ヶ月以内
<OPTION VALUE="6months">6ヶ月以内
<OPTION VALUE="12months">1年以内
<OPTION VALUE="more than 1year">1年以上
</SELECT>
<P>ホームページ作成講座全体に対するご意見・ご感想をお書きください。</P>
<TEXTAREA COLS="50" ROWS="6" NAME="comments">
</TEXTAREA>
<BR><BR>
<INPUT TYPE="SUBMIT" VALUE="送信">
<INPUT TYPE="RESET" VALUE="リセット">
</FORM>
【表示】
|