[tags] (P.3)


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

 <HEAD>~</HEAD>
  (直接ブラウザには表示されないけど大事な)"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">
    は先に記述して下さい)


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


 <META NAME="keywords" CONTENT="xxx">
  (xxx: 任意のテキスト)
  ロボット型サーチエンジンの検索時にHitさせるためのキーワードを記述します。
  (複数書く場合は、半角カンマ( , )で区切って下さい。
  (半角英数字と全角英数字(例:"HP"と"HP"、"2000"と"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月現在))

 <META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW">

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

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

 <META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">

  ロボット型サーチエンジンに、このタグを記述したページを含め、そこからリンクしている全てのページを
  登録させないようにします。
  (登録されたくない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"以外のタグは省略しています)

    (青緑色の画面になったら、(立ち上がった)ウインドウを閉じて下さい)
    (Note: このタグに対応していないブラウザを使用している時は、クリックしないで下さい)

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



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

  "フレーム指定ファイル":
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

  それ以外のHTMLファイルは、
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

  のどちらかで記述しておけば、まず無難でしょう)



(("FORM"))

  HPへの訪問者がアンケートや検索エンジンなどの書き込み欄に必要事項を入力して送信することで、
  リアルタイムに作者にデータを送ることができる仕組みがフォームです。
  フォームには、CGIを使用するもの(CGI可のサーバーに設置するか、またはプロバイダなどからレンタル)と
  ブラウザのメール機能を使用するものがあります。
  (CGI不可のサーバーの場合、レンタルかメール機能利用のフォームを設置するしかありませんが、
  レンタルの場合設定やレイアウトの制約がある場合が多く、メール機能利用の場合、訪問者の環境に
  よってはメーラーが起動したり送信できないことがあるのと、送信されてきたデータを"解読"するためのソフト
   (Windows用→ ClipDecorder for Windows FormReader (いずれもXPで動作するかどうかは未確認)
    Mac用   → ClipDecoder
  が別途必要になることがあります)

  (当サイトでは、PMCJの"Web Mail [E]"を使用しています→ (here)
  その他のスクリプトを探したい場合は、こちらのサイトを参考にして下さい)


 <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="radio" name="xxx" value="x" checked="checked">
   あらかじめ初期値として特定のボタンが選択されている状態にします。

  <input type="checkbox" name="xxx" value="x">
   (x: 任意のテキスト)
   複数のボタンを表示させます(複数選択可)

   (同じグループ内の'name'は同一にして下さい)

  <input type="checkbox" name="xxx" value="x" checked="checked">
   あらかじめ初期値として特定のチェックボックスが選択されている状態にします。
   (複数選択可)


  <SELECT NAME="xxx">
  <OPTION>x
  <OPTION>x
     ・
     ・
     ・
  <OPTION>x
  </SELECT>
   (xxx, x: 任意のテキスト)
   プルダウンメニューを表示します('OPTION'はいくつでも可)


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


  <SELECT NAME="xxx" SIZE="n">
  <OPTION>x
  <OPTION>x
     ・
     ・
     ・
  <OPTION>x
  </SELECT>
   (n: 数値(2以上の整数))
   "スクロール式メニュー"を表示します(n=1で一行分)


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



  ex) sample

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



→Home