HTMLレベルUP技集

HTMLリファレンス_________

HTMLレベルUP技集

フォーム

ホームページ上にフォームを挿入することにより、よりインタラクティブなWebページを作成することができます。これは主にメール送信などをHTMLから行うときなどに使用されます。
フォームタグは、まず<form>と</form>の間で一つのフォームの処理をします。
<form method="POST" action="～.cgi">が基本型です。
methodでPOSTかGETかを指定します。
GETの場合はCGIがアドレスとして送られます。
action="～"で、フォームを処理するCGIを指定します。
method="POST" action="mailto:vaio@vaio.vip.co.jp"とすればメールとして送信することが可能です。但し内容がエンコードされて送られますので、受け取った後にデコードする必要が有ります。またJavaScriptのイベントハンドラ（リンクやボタンをクリックするような動作）と組み合わせて、様々な処理を行うことが可能です。

例：メールフォーム

・上記のHTMLタグ

<form action="mailto:vaio@vaio.***.co.jp" method="POST" enctype="text/plain" onSubmit="return send_check()">
■必要事項ご記入の上、送信ボタンを押してください。<br>
会社名：<input type="text" name="COMPANY" size="26"><br>
部署名：<input type="text" name="POSTNAME"><br>
お名前：<input type="text" name="NAME"><br>
E-mail ：<input type="text" name="E-mail" size="35"><br><br>
お問合わせ事項：<br><textarea rows="5" cols="45" name="message"></textarea><br><br>
<input type="submit" value="送　信">　　<input type="reset" value="クリア">
</form>

例：閉じるボタン

・上記のHTMLタグ

JavaScript

JavaScriptとはHTMLファイルに書き込んで、ホームページにアクセスされた際に実行するプログラムのことで、ホームページの表現力を高めることができます。<script type="text/javascript">から</script>の間にJavaScriptのプログラムを書きます。
また、JavaScriptに対応していないブラウザのためにでプログラムを囲むことにより、プログラム自体がブラウザに表示されないようにします。また<noscript></noscript>タグの中にスクリプト言語をサポートしていないブラウザのために、代替テキストを記述しておくとよいでしょう。

JavaScriptのソースが10～20行程度ならいいのですが、多数行に渡る場合には外部にスクリプトファイルを作成して、それを呼び出すようにしましょう。方法は、までを記述したファイルをメモ帳等で別途作成して拡張子「.js」という名前で保存し、<script src="xxx.js">タグで呼び出します。

あらかじめ「xxx.js」というファイルを作成して同一ディレクトリに置いた場合の呼び出しは

JavaApplet

同じようにJavaAppletによって、より一層ホームページの表現力を高めることができます。Javaは米Sun Microsystem社がインターネット上で使うことを想定して開発したオブジェクト指向プログラム言語のことで、プラットホームに依存しないのが特徴です。

で組み込みます。ブラウザで表示した場合、灰色の四角形ができます。これが、アプレットの領域になります。PARAMタグで各種パラメータを指定します。パラメータには、

STRING・・・テキスト
FSIZE ・・・フォントサイズ
TEXT_X ・・・テキストの位置のx座標
（左上が起点、右に向かって正方向）
TEXT_Y ・・・テキストの位置のY座標
（左上が起点、下に向かって正方向。省略すると中央に配置）
BGIMAGER・・・背景の画像ファイル名
（gifまたはjpeg）
BGCOLOR ・・・背景の色
（16進数）

などがあります。

一定時間が経つと指定ページへジャンプ

ホームページの引越しをしたときなどに引越し元から引越し先へ自動的にジャンプさせたいときには以下のようにMETAタグを指定します。

content=で自動ジャンプまでの待ち時間を秒数指定し、URL=でジャンプ先を指定します。
base target=はターゲットフレームを指定し、

同じフレーム内で表示・・・_self
ページ全体表示・・・_top
新しいウインドウで表示・・・_blank
親フレームで表示・・・_parent

となります。

検索エンジンへの対応

検索エンジンとは、インターネット上の情報を、キーワードやURLで検索できるサービスのことです。この検索エンジンにはディレクトリ型とロボット型とがあり、ディレクトリ型検索エンジンは各自が自分でホームページ紹介文を作成して登録します。ロボット型検索エンジンについては、下記の方法で登録します（正確には巡回ロボットに拾ってもらう）。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta name="Keywords" content="ホームページ作成,パソコン用語集">
<meta name="description" content="初心者向けの簡単なインターネット設定方法やホームページの作成方法を簡単解説しています．">
<title>Welcome to vaio's HomePage</title>
</head>
・
・
・
</html>

上記のように<meta>タグを使用し、<meta name="Keywords" content="キーワード1,キーワード2">というふうにカンマ区切りでキーワードを記入しておきます。もちろん複数記入も可能です。また<meta name="description" content="紹介文">でより具体的な掲載が可能となります。

逆にロボット型検索エンジンに登録したくない（されたくない）ときには、<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">というMETAタグを<head>と</head>の中に入れておきます。目次となるページだけを登録したい場合には、目次ページはNOFOLLOWのみ、目次以外のページはNOINDEX, NOFOLLOWと指定するのがよいでしょう。
また、確実にロボットによる取得を拒否するにはrobots.txtという設定ファイルを設置します。大半の検索エンジンは、RobotExclusionというプロトコルに従って動作していますので、Webサイトにアクセスする際、まずサイトの最上位ディレクトリでrobots.txtという名前のファイルを探します。従って、例えば、http://www5.plala.or.jp/vaio0630/以下はロボットに収集されないように設定したいという場合には、次のような内容のファイルを http://www5.plala.or.jp/robots.txt というURLでアクセスされる場所に置くことになります。

User-agent： *
Disallow： /vaio0630/

User-agent欄はロボットの名前を指定しますので、全てのロボットを排除したい場合は*（アスタリスク）指定します。もちろんDisallowではディレクトリを指定することもできますが、複数のディレクトリをまとめて指定することはできません。

例（複数のディレクトリ指定）：

Disallow： /vaio0630/cgi-bin/ /vaio0630/vaio/ ←×

Disallow： /vaio0630/cgi-bin/
Disallow： /vaio0630/vaio/ ←○

エスケープ

HTMLを作成していて、日本語がなぜだか文字化けしてしまうという場合、その文字の前に\（または、バックスラッシュ＼）を付けると解決できる場合があります。これはPerlで予約された記号（$、"、'等）や、JavaScriptでテロップを流すときに文字化けしてしまう場合にも使えます。

METAタグ

METAタグはHEADタグ要素ではサポートされない付加的情報の記載をします。文字コードの指定やテキストの作者、テキストのキーワードなどに使われています。
METAタグは幾つ入れても構いませんが、使用しなくても特に問題はありません。

幾つか例を挙げます。

文字コードを指定するときに使われます。
文字コードがSJIS(シフトJIS、通常WindowsシリーズやMacintoshで使われる日本語)の場合は上記のように書きます。これを入れることにより文字化けがなくなります。

スタイルシートを使用する際にはこのMATAタグを記入しておいたほうが良いでしょう。

同じくJavaScriptを使用する際にはこのMATAタグを記入しておいたほうが良いでしょう。

contentの属性値に、製作者が誰であるかを指定します。

contentの属性値に、著作権を指定します。

これは検索エンジン(サーチエンジン)の検索したときのキーワードとして使用されます。カンマ区切りで複数記入できます。

上記同様ですが、こちらは検索エンジンのホームページ内容紹介として使用されます。

これも検索エンジン（ロボット）に対しての対応に使われます。上記だとインデックスファイルはもとよりリンクページも検索させない設定になります。

テキストを（ホームページを）何のソフト（エディタ等）で作成したものかを示します。

これをサポートしているブラウザは、ページをリロード（ロードし直す）します。リロードするまでの時間（秒）も指定できます。

・METAタグのついての詳細はMETAタグリファレンスを参照下さい。

正しいHTML、CSSの使い方をしているかどうかを検証

最後は正しいHTML、CSSの使い方をしているかどうかを検証します。検証にはW3CのHTML、CSS検証サービスを利用します。

・W3C CSS 検証サービス
http://jigsaw.w3.org/css-validator/validator-uri.html

・W3C HTML 検証サービス
http://validator.w3.org/

入力フォームに検証したい文書(HTML文書、もしくはCSS文書)のURIを入力すると結果が表示されます。解析結果を元に正しい文章に修正します。

TOPページ(Alt+B)