ホームページへ| 扉のページへ | 前の章へ | 次の章へ

HTMLの応用

  1. インラインフレーム
  2. クライアントサイドイメージマップ
  3. フォームを作る
  4. その他

インラインフレーム

ウィンドウの特定の場所に,別のホームページを埋め込んで表示させることができます.

書式;
<iframe src="(埋め込むページのURL)"></iframe>

他に設定できる属性は次のようなものがあります.

nameこの属性でフレームに名前を設定でき,ハイパーリンクのtarget属性で指定できます.
widthフレームの幅をピクセル単位で指定
heightフレームの高さをピクセル単位で指定

次の漢字の中で「たんぽぽ」はどれでしょう?


クライアントサイドイメージマップ

一つの画像に幾つかのリンクボタンを設定することができます.

書式;
<img src="image-file-name" usemap="#map-name">
<map name="map-name">
<area {option}>
</map>

<area> 要素のオプション

オプション座標説明
shape"rect"x1,y1(左上),x2,y2(右下)長方形のマップ領域を指定
"circle"x,y(中心),r(半径)円形のマップ領域を指定
"polygon"x1,y1(頂点1),x2,y2(頂点2),...多角形のマップ領域を指定
"default"なし指定領域以外をマップ領域と指定
coords"座標,座標,..."領域の座標をピクセル数で指定
href"url"リンク先の指定
nohrefなしリンクをしない指定
alt"代わりの文字"イメージの代わりの文字

注意:座標は,画像の左上の端が(0,0)となり,右に向かってxの正の方向,下に向かってyの正の方向となります.

書式;
<img src="img-map.gif" usemap="#area-map">
dammy
<map name="area-map">
<area shape="rect" coords="20,10,80,75" href="shikaku.html" alt="四角いマップ">
<area shape="circle" coords="100,135,35" href="maru.html" alt="丸いマップ">
<area shape="polygon" coords="155,30,155,90,180,130,220,80,190,40" href="polygon.html" alt="多角形マップ">
<area shape="default" coords="" nohref alt="領域外マップ">
</map>
クリッカブルマップ 四角いマップ 丸いマップ 多角形マップ 領域外マップ

フォームを作る

フォームとは,ホームページを見てくれた人に,ブラウザ上でアンケートやコメントを書き込んでもらえるホームページ上の部分で,その内容を作者に送ってもらうことができます.
 ただし,この機能を実行するためには,ホームページのサーバー上にCGIプログラムという別の仕組みがサーバーの管理者によって用意されているか,それを自分で作成するかしなければなりません.
 CGIプログラムの作成は,HTMLの範囲を超えるのでここでは説明しませんが,幾つかのCGIプログラムが用意されています.

入力フォームの定義

次のタグの間に各フィールドやボタンを設定していきます.

書式;
dammy
<form {option}>
dammy
dammy
</form>

設定できるオプションは,

オプション説明
action"mailto:mail-address"フォームの転送先の指定;メイルとして送信する
ブラウザのメイル機能を用いるので,それが設定されている必要がある
"script-path/script-name"フォームの転送先の指定;プログラムが実行される
サーバー上のCGIプログラムを使用するので,それが使えることが前提
method"post | get"フォームの受渡方法の指定;
get:一行のデータを送信
post:複数行のデータを送信
enctype"multipart/form-data"フォームの転送時に項目ごとに改行される
ファイルなど大量のデータを送信

入力フィールドとボタンの設定

フォームタグの間に,実際に入力してもらうための入力フィールドを用意します.

書式;
<input type="(種類)" name="(入力データに付ける名前:半角文字列)" {追加オプション}>

入力フィールドの種類と追加可能なオプションは次の通りです.

種類説明追加オプション追加オプションの値説明
text一行のテキスト入力フィールドの作成size数値フィールドの長さ(文字数)
maxlength数値入力可能な最大文字数
password伏せ字となるテキスト入力フィールドの作成value文字予めフィールドに表示され,変更がなければサーバーへ送られる文字
size数値フィールドの長さ(文字数)
mazlength数値入力可能な最大文字数
checkboxチェックボックスの作成value文字列サーバーへ送られる文字列
chckedなし予め選択された状態にする
radioラジオボタンの作成value文字列
サーバーへ送られる文字列
chckedなし予め選択された状態にする
image画像をボタンとし,クリックした座標が送られるsrc"url"画像ファイル名
hidden表示されないフィールドの作成value文字サーバーへ送られる文字
fileファイル名を入力するフィールドの作成
テキストファイルの内容が送られる
size数値フィールドの長さ(文字数)
maxlength数値入力可能な最大文字数
reset入力データのリセットvalue文字ボタンに表示される文字の指定
submit入力データの送信value文字ボタンに表示される文字の指定

それぞれの種類の入力フィールドは,次のようになります.

種類書式例
表示例
text:<input type="text" name="text-box" size="20" maxlength="100">
password:<input type="password" name="passwd-box" value="passwd" size="15" maxlength="100">
checkbox:<input type="checkbox" name="check-box" value="good" checked>good(checked)<BR>
<input type="checkbox" name="check-box" value="bad">bad
good(checked)
bad
radio:<input type="radio" name="radio-button" value="first" checked>first(checked)<BR>
<input type="radio" name="radio-button" value="second">second<BR>
<input type="radio" name="radio-button" value="third">third
first(checked)
second
third
image:<input type="image" name="image-button" src="button-image.gif">
hidden:<input type="hidden" name="hidden-data" value="hidden-value">
file:<input type="file" name="file-name" size="20" maxlength="100">
reset:<input type="reset" value="reset">
submit:<input type="submit" name="alpha" value="submit to alpha">
<input type="submit" name="beta" value="submit to beta">

テキスト入力フィールドの設定

書式;
<form {option}>
<textarea {option}>
(この部分に記述した文字は予め領域内に表示される)
</textarea>
</form>
オプション説明
name半角文字列転送時のフィールドの名前
rows数値領域の行数
cols数値領域の横幅

<FORM>
<textarea name="text-area" rows=5 cols=50>
複数の行に渡る文字の入力
</textarea>
dammy
</FORM>

選択メニューの設定

書式;
<form {option}>
<select {option}>
<option {option}>
<option {option}>
.........
</select>
</form>
コマンドオプション説明
selectname半角文字列転送時のフィールド名
size数値ボックスの長さ
multipleなし複数項目の指定を許可
optionvalue数値 または 半角アルファベット選択肢への数値か英字の割当
selectedなし予め選択された状態になる

<form>
<select name="multi-select" size="5" multiple>
<option selected value="a">項目a
<option value="b">項目b
<option value="c">項目c
<option value="d">項目d
<option value="e">項目e
</select>
</form>

このページの最初へ


その他


特殊なタグ

ページに対する様々な付加的情報の記述に用います.

<HEAD> 〜 </HEAD> の間に置き,HTMLファイルに関する追加情報を記述します.

ドキュメント情報の記述

書式;
<META name="(項目名)" content="(nameの内容)" { lang="(contentの言語)"}>
オプション説明
nameauthorページの制作者
copyrightコピーライト
reply-to連絡先
content-language記述言語
build制作年月日
expires有効期限
keywordページのキーワード
descriptionページの説明文
content文字列上記のそれぞれに対する具体的な内容
langja | en | fr | de | zh ... contentの値の言語

検索エンジンに対する制御

ロボット型の検索エンジンに対する制御法を設定します.

書式;
<META name="robots" content="(制御法)">

制御法については以下のものが指定できます.

contentの値説明
indexページのインデックス化を許可
noindexページのインデックス化を禁止
followリンクを辿ることを許可
nofollowリンクを辿ることを禁止
all全てを許可
none全てを禁止

自動的にファイルを読み込む

このタグを使うときは,HTMLファイルの先頭に置き,<html>や<head>などの構造タグを省略します.

書式;
<META http-equiv="refresh" content="(秒数 ; URI)">
オプション説明
http-equiv"refresh"自動的に別のファイルをロードここをクリック
content"seconds;url=url"ロードするまでの時間(秒)とファイルの場所(これを省略した場合は同じファイルが呼び出される:リロード)

ホームページへ | 扉のページへ | このページの最初に戻る | 前の章へ | 次の章へ