⟡⟡Coolest Moment --- HP Guide for Beginners (タグ解説(「head」＆メールフォーム))⟡⟡

"tags (P.3)"

"HEAD & Form TAG"
"BODY & IMAGE TAG"
"Text TAG"

〔"HEAD＆META TAG", "FORM TAG" etc.〕

<!DOCTYPE HTML xxx>
(xxx：HTMLファイルの"バージョン")

HTMLファイルが、W3Cによって決められた規格のどの"バージョン"で書かれているかを示すもので、HTMLファイルの先頭(<HTML>～</HTML>より前)に記述します。

(一般的には、
"フレーム指定ファイル"：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

それ以外のHTMLファイルは、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
で記述しておけば、まず無難でしょう)

(直接ブラウザーには表示されないけど大事な)"HTMLファイル情報"(＆ここでは解説しませんがスタイルシートやJava Scriptも)を記述する時、<HTML>と<BODY>の間に書くタグ。

(<HEAD>～</HEAD>内部に、<TITLE>タグ、<META>タグなどを記述)

(<HTML>
<HEAD>
xxx
xxx
xxx
</HEAD>
<BODY>～

(xxx：任意のタグ(<META>～</META>
および<TITLE>～</TITLE>)

(ex)：<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type"
content="text/html; charset=x-sjis">
<META NAME="keywords" CONTENT="素材,無料,
ホームページ,HP">
<META NAME="description"
CONTENT="coolな素材を提供">
<TITLE>Miki's Material Room</TITLE>
</HEAD>
<BODY>～)

のように書きます)

(タグを記述する順番に特に決まりはないのですが、
<META HTTP-EQUIV="Content-Type" content="text/html; charset=xxx">より先に<TITLE>を記述すると、一部のブラウザー(IE4/Win95など)で文字コードセットを正しく指定してるのにもかかわらず文字化けが起こることがあるので、
<META HTTP-EQUIV="Content-Type" content="text/html; charset=xxx">は先に記述して下さい)

ブラウザーのウインドウのタイトルバーと"ブックマーク"(IEは"お気に入り")にタイトルを表示するタグ。
(詳しい解説は "tags 1"のこちらをご覧下さい)

<META NAME="keywords" CONTENT="xxx">
(xxx：任意のテキスト)

ロボット型サーチエンジンの検索時にHitさせるためのキーワードを記述します。

(複数書く場合は、半角カンマ( , )で区切って下さい。

(半角英数字と全角英数字(例："HP"と"ＨＰ"、"2000"と"２０００")、大文字小文字はロボット型サーチエンジン側で同じものと見なすので、どちらか一方(半角英数字の方がいいでしょう)だけ記述して下さい)

また、最初の方のキーワード(7つ位？)しか検索しないサーチエンジンもあるようなので、重要なキーワードは先に書いた方がいいでしょう)

<META NAME="description" CONTENT="xxx">
(xxx：任意のテキスト)

ロボット型サーチエンジンの検索時に表示させるためのHPのコメント文を記述します。

("keywords", "description"とも文字数の決まりとかはないのですが、代表的なロボット型サーチエンジンのinfoseek Japanが、"keywords=1000バイト以内"(全角で500文字以内)、"description=160バイト以内"(全角で80文字以内)でないと登録を受け付けないので、それを目安に記述するといいでしょう。
また、同じく infoseek Japanは、登録したいURLが"フレーム指定ファイル"の場合、"description"と<TITLE>内のどちらにも日本語テキストを全く使用していない場合、登録を受け付けてくれません(2000年10月現在))

ロボット型サーチエンジンに、このタグを記述したページのみリンクを許可し、そこからリンクしているページは登録させないようにします。
("index.html"など、ロボット型サーチエンジンに登録したいファイルに記述して下さい)

(すべてのロボット型サーチエンジンに有効なわけではありません。
また、ロボット型サーチエンジンに<META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW">を設定したいページからのリンク先URLがすでに登録されていて、且つ公開したくない場合は、<META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW">を記述した上で、該当リンク先URLを登録されているロボット型サーチエンジンに削除してもらって下さい)

ロボット型サーチエンジンに、このタグを記述したページを含め、そこからリンクしている全てのページを登録させないようにします。

(登録されたくないHTMLファイル(HTMLソースを生成するファイル(CGIプログラムなど)も含む)に記述して下さい)

(すべてのロボット型サーチエンジンに有効なわけではありません。
また、すでにロボット型サーチエンジンに登録されているファイルに記述しても無効なので、その場合は、<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">を記述した上で、該当URLを登録されているロボット型サーチエンジンに削除してもらって下さい)

("文字コードセット")
<META HTTP-EQUIV="Content-Type" content="text/html;
charset=xxx">
(xxx：文字コード名)

ブラウザー上での文字化けを防ぐために記述します。
("メモ帳"で作成したHTMLファイルの場合、xxx=x-sjisでOKです)
(正式には shift-jis ですが、一部のブラウザーで文字化けすることがあります))

("CLIENT PULL")
<META HTTP-EQUIV="Refresh" CONTENT="s; URL=file name">
(s：別のページにジャンプするまでの秒数、
file name: ジャンプ先のファイル名)

指定時間後に別のページへ自動的にジャンプします。
(URLを変更した際に新しいURL(のページ)に誘導するためによく使用されますが、将来もっと高速回線が普及すれば、スライドショーとしての使用が主流になるかもしれません)

(Note:
このタグに対応していないブラウザーの場合、リンクボタンがないとどこにもジャンプできなくなってしまうので、必ずリンクボタンも併用して書いて下さい)

ex) sample ("CLIENT PULL"以外のタグは省略しています)

(青緑色っぽい画面になったらウインドウが切り替わらなくなるので、右上の「home→」をクリックして下さい)
(Note: このタグに対応していないブラウザーを使用している時は、
クリックしないで下さい)

pc_1.html: <META HTTP-EQUIV="Refresh" CONTENT="7; URL=pc_2.html">
↓
pc_2.html: <META HTTP-EQUIV="Refresh" CONTENT="7; URL=pc_3.html">
↓
pc_3.html: <META HTTP-EQUIV="Refresh" CONTENT="7; URL=pc_line1.html">
↓
pc_line1.html

(("FORM"))

HPへの訪問者がアンケートや検索エンジンなどの書き込み欄に必要事項を入力して送信することで、リアルタイムに作者にデータを送ることができる仕組みがフォームです。

フォームには、CGIを使用するもの(CGI可のサーバーに設置するか、またはプロバイダなどからレンタル)とブラウザーのメール機能を使用するものがあります。

(CGI不可のサーバーの場合、レンタルかメール機能利用のフォームを設置するしかありませんが、レンタルの場合設定やレイアウトの制約がある場合が多く、メール機能利用の場合、訪問者の環境によってはメーラーが起動したり送信できないことがあるのと、送信されてきたデータを"解読"するためのソフト
(Windows用→ ClipDecorder for Windows FormReader　(いずれもXPで動作するかどうかは未確認)
Mac用→ ClipDecoder
が別途必要になることがあります)

(当サイトでは、 PMCJ の "Web Mail [E]" を使用しています→ (メールフォームページ)

<FORM ACTION="xxx" METHOD="post">～</FORM>
(xxx: CGI使用＝ URL；
ブラウザー付属メール機能使用＝ mailto:e-mail address＊ )

アンケートなどの入力フォームを記述する時、<BODY>～</BODY>内の任意の場所に書くタグ。
(<FORM>～</FORM>内部に、<input>タグ各種、<select>タグなどを記述)

(＊：<FORM ACTION="xxx"
METHOD="mailto:e-mail address? subject=xxx">～</A>
(xxx:：任意の名前)
のように記述すると、Subjectを付けることができます。
(Subjectは半角英数字で記述して下さい))

<input type="text" name="xxx">
(xxx：任意のテキスト)

一行の入力ボックスを表示します。
('name="xxx"'は、プログラムがデータを受信した時に区別するために付けるもので、ブラウザーの画面には表示されません)

<input type="text" name="xxx" value="x">
(x：任意のテキスト('http://'など))

あらかじめ、入力ボックスの中に特定のテキスト(初期値)が表示されるようにします。

<input type="text" name="xxx" size="n">
(n：数値(整数))

入力ボックスの長さを指定します。
(n＝1で半角英数字一字分)

<input type="text" name="xxx" maxlength="n">
(n：数値(整数))

入力ボックスの最大入力可能文字数を指定します(n＝1で半角英数字一字分)
(一部のブラウザーではうまく動作しないこともあります)

<input type="password" name="xxx">
(xxx：任意のテキスト)

パスワード入力の際、入力ボックスに伏せ字(***)が表示されるようにします。

<TEXTAREA NAME="xxx" ROWS="n1" COLS="n2">
～</TEXTAREA>
(xxx：任意のテキスト、n1：行数(2以上の整数)、n2：数値(整数)、
～：任意のテキスト(省略可))

複数行の入力ボックスを表示します。
(n1＝1で一行分、n2＝1で半角英数字一字分)

<input type="submit" name="xxx">
(xxx：任意のテキスト(送信ボタンの名前としてブラウザーに表示))

送信ボタンを表示させます。

<input type="reset" name="xxx">
(xxx：任意のテキスト(リセットボタンの名前としてブラウザーに表示))

リセットボタンを表示させます(省略可)

<input type="image" src="file name" name="xxx">
(file name：任意の画像ファイル名(jpg, gifなど)、
xxx：任意のテキスト)

特定の画像を送信ボタンとして表示させます。
('BORDER'(ネットスケープのみ有効)・'WIDTH'・'HEIGHT'など、<IMG SRC>タグとほぼ同じオプションが使用できます)
(一部のブラウザーでは表示または送信されない可能性があります)

<input type="radio" name="xxx" value="x">
(xxx, x：任意のテキスト)

複数のラジオボタンを表示させます(一つだけしか選択できません)
(同じグループ内の'name'は同一にして下さい)

あらかじめ初期値として特定のラジオボタンが選択されている状態にします。

<input type="checkbox" name="xxx" value="x">
(x：任意のテキスト)

複数のラジオボタンを表示させます(複数選択可)
(同じグループ内の'name'は同一にして下さい)

あらかじめ初期値として特定のチェックボックスが選択されている状態にします。
(複数選択可)

あらかじめ初期値として特定のメニューが選択されている状態にします。
('SELECTED'がない場合は、最初の'OPTION'が表示されます)

(xxx, x：任意のテキスト)
プルダウンメニューを表示します('OPTION'はいくつでも可)

(n：数値(2以上の整数))
"スクロール式メニュー"を表示します(n=1で一行分)

"Ctrlキー"を押しながら選択すると、複数選択できるようになります。
("SIZE"を指定しないで"MULTIPLE"だけ指定すると、メニューがプルダウン形式にならずにすべて表示されます)

ex) sample 2

(ソースはブラウザーの"ソース表示"でご覧下さい。
また、実際にはあり得ないメールアドレスを指定しているので、ボタンをクリックしても送信はできません)