図3-1　HTMLは情報を埋め込んだり，外部のデータを貼り付けたりするしかけが用意されている
Webページにはスクリプトが埋め込まれていたり，画像などが貼り付けられている。タグを見れば，どのようなことをしているかが理解できる。

[画像のクリックで拡大表示]

図3-2　HTMLファイルにリンク先を埋め込む
リンクにしたいテキストや＜img＞タグを＜a＞と＜/a＞タグで囲んでリンク先を埋め込む。

[画像のクリックで拡大表示]

図3-3　別アプリケーションで再生するコンテンツを貼り付ける
Internet Explorerは＜object＞タグを解釈してActiveXコントロールを起動し，MozillaやFirefoxは＜embed＞タグを解釈してプラグイン・アプリケーションを起動する。そこで，どちらのブラウザでも解釈できるように，＜object＞タグと＜embed＞タグを入れ子にして指定する。

[画像のクリックで拡大表示]

図3-4　入力フォームでWebサーバーにデータを送信する
情報送信用の＜form＞タグを使えば，Webサーバーに情報を送れる。WebサーバーのCGIプログラムを工夫することで，データベースにアクセスして予約するような高度なアプリケーションも作成できる。

[画像のクリックで拡大表示]

図3-5　Webページにスクリプトを埋め込む
＜script＞と＜/script＞タグで囲むやり方と，ほかのタグに埋め込むやり方がある。

[画像のクリックで拡大表示]

　ここまでで，ブラウザが表示するWebページのレイアウトと見栄えの指定方法はわかった。あとは，リンクを埋め込んだり，イメージや動画などを貼り付ける作業だ。

リンクや貼り付けは得意技

　HTMLはもともと，ほかのWebページへのリンクを埋め込んだり，静止画などのデータを貼り付けるためのタグが充実している。このような機能はWebブラウザとともにどんどん進化して，さまざまな種類のデータにリンクを埋め込んだり，ブラウザのウインドウに貼り付けられる（図3-1[拡大表示]）。

　例えば単純に思えるリンク指定（a）も，なかなかバラエティに富んでいる。文字をリンク元（アンカー）にするだけではなく，イメージで作ったボタンをリンク元にしたり，画像の領域を分けてクリックした位置に応じてリンク先を変えたりできる。

　貼り付ける要素も静止画だけではない（b）。Part2で登場した＜iframe＞タグを使えば，静止画の代わりに別のWebページ（HTMLファイル）を貼り付けられる。また動画や音声ファイルなど，ほかのアプリケーションで再生するコンテンツも貼り付けることができる。

　さらにHTMLファイルには，スクリプトを直接書き込むことも可能だ（c）。Webブラウザによって実行できるスクリプト言語の種類は多少異なるが，JavaScript＊JavaScriptなら主要なWebブラウザが解釈して実行できる。

リンクは＜a＞タグで指定

　では，基本となるリンク用の＜a＞タグから見ていこう。＜a＞タグは，HTMLの誕生とともに決められた伝統あるタグだ。

　文字にリンクを埋め込むには，リンク元になる文字を＜a＞と＜/a＞タグで囲む。そして＜a＞タグのhref属性でリンク先のURLを指定する（p.104の図3-2a[拡大表示]）。例えば「＜a href="notice. htm"＞お知らせ＜/a＞」と指定すれば，「お知らせ」の部分にnotice.htmへのリンクが埋め込まれる。Webブラウザでこの部分を表示すると，普通は「お知らせ」の部分だけ文字の色が変わって下線が付く＊下線が付く。そして，そこをクリックすると，リンク先のページに切り替わる。

画像をリンク・ボタンにする

　次は，Webページに画像を貼り付ける方法を確認しておこう。それには＜img＞タグを使う。例えば，「あああ＜img src="abc.jpg" alt="説明"＞いいい」のように記述すれば，「あああ画像いいい」のようにWebブラウザは表示する。つまり，ブラウザは＜img＞タグのsrc属性で指定されたURLから画像データをダウンロードして，＜img＞タグの書かれている部分を画像に置き換えて表示するわけだ。

　この＜img＞タグと，先ほど紹介した＜a＞タグを組み合わせれば，画像をリンク・ボタンのように使える。企業のWebページによくある立体的なリンク・ボタンは，こうしたしくみで実現されている。

　ここでは，簡単な例を紹介しておこう（図3-2b[拡大表示]）。最初に＜img＞タグを使ってイメージを貼り付け，それを＜a＞と＜/a＞タグで囲って，リンクを埋め込む。図3-2bの例では，＜img＞タグのalign属性でウインドウ内の表示位置を左（left）に寄せ，alt属性でボタンの説明として「写真の説明」と記述している。また，width属性とheight属性で，表示する画像の大きさをドット単位で指定している。

　こうして貼り付けた画像にリンクを埋め込むのは，文字にリンクを埋め込むときと同じように＜a＞と＜/a＞タグで囲む。多くのブラウザは，＜a＞タグで囲ったイメージを青線などの枠をつけて表示する。ボタンらしく見せるためには，枠を消す必要がある。それには，＜img＞タグの中で「border="0"」という属性を追加する。

　このように，1個の画像にリンクを割り当てるのは簡単だ。今どきのWebページを見ていると，細長い1本のイメージに複数のボタンがはめ込まれているものをよく見かける。このようなケースは，複数の画像を間隔を空けずに並べているだけである＊並べているだけである。Part2で紹介した＜table＞タグを使って，大きさを固定した枠を枠線なしで用意し，そこに枠なしの画像をぴったりはめ込む。そして画像ごとにリンク先を埋め込んでいるのである。

動画や音声を自動再生する

　最近では，Webページ内に動画が表示されたり，音声が再生されたりすることも珍しくない。

　HTMLでは，貼り付ける要素がどのようなもので，どこからダウンロードしてどのように表示するかをタグで示すことになっている。WebブラウザはHTMLファイルに書かれた貼り付け用のタグを解釈して，ブラウザのウインドウの一部の領域でその要素を再生するわけだ。

　このような要素を取り込むためのタグには，特定の種類の要素に対応したものと，さまざまな種類の要素を指定できる汎用のものがある。

　特定の要素に対応するものの代表が，＜applet＞タグだ。Webブラウザ用のアプリケーションであるJavaアプレット＊Javaアプレットを貼り付けるときに使う。＜applet＞タグでは，

　　＜applet code="hll.class" width="80" height="60"＞ここはJavaアプレット＜/applet＞

というように，JavaアプレットのURLと，ウインドウ内でJavaアプレットを再生する大きさを指定し，アプレットが実行できないときに表示する文字を＜/applet＞タグで囲む。

　このほかにも特定の種類の要素専用のタグはいろいろある。例えば，音声ファイルを埋め込む＜bgsound＞タグ。Internet Explorer用の独自拡張タグである。このタグを使ってMIDIやWAVE＊MIDIやWAVEの音声ファイルをWebページに埋め込んでおけば，Internet ExplorerはWebページを表示したときに，指定された音声ファイルを再生する。

　＜bgsound＞タグを使って，music. wavというWAVEファイルを繰り返し再生させる場合は，HTMLファイルのヘッダー部内に，

　　＜bgsound src="music.wav" loop="infinite"＞

と記述する。src属性でURLを指定し，loop属性で再生回数を無限大に指定している。

ブラウザで扱いが異なる汎用タグ

　一方，汎用の要素を貼り付けるために用意されているのが ，＜object＞タグである。

　本来＜object＞タグが貼り付けられる対象にしているのは，あらゆる要素。ほかのアプリケーションで再生するコンテンツだけでなく，＜img＞タグで貼り付ける画像や，＜iframe＞タグで貼り付けるHTMLファイル，Javaアプレットなど，仕様上は何でも貼り付けられる。

　ただし，Webブラウザの＜object＞タグ対応は理想通りに進んでいない。Internet Explorerの場合，実用的に＜object＞タグで貼り付けられるのは，ActiveXコントロール＊ActiveXコントロールだけ。一方MozillaやFirefoxは，Internet Explorer向けに書かれた＜object＞タグを解釈できない。

　そこで，＜object＞タグの代わりに，プラグイン・アプリケーション＊プラグイン・アプリケーションを使って再生するコンテンツを指定する＜embed＞タグを使うのが一般的になっている。

＜object＞と＜embed＞を入れ子で使う

　Webページに動画を貼り付けるケースを例に説明しよう（図3-3[拡大表示]）。Webブラウザは動画を再生する機能を備えていない。そこでInternet ExplorerはActiveXコントロール，MozillaやFirefoxはプラグイン・アプリケーションで動画データを再生する。

　このような場合，HTMLファイルには，まず＜object＞タグを使ってActiveXコントロールによる再生を指定する。さらに＜object＞と＜/object＞タグの間に，＜embed＞タグを使ってプラグイン・アプリケーションによる再生を指定する。こうすれば，Internet Explorerは＜object＞タグを解釈し，MozillaやFirefoxは＜embed＞タグを解釈する。

　もう少し詳細を確認すると，＜object＞タグでは，ActiveXコントロールの識別子＊識別子，ActiveXコントロールのダウンロード元，ウインドウ内での表示サイズや表示場所などを指定する（(1)）。ここでは，ActiveXコントロールとしてマクロメディアのShockwave＊Shockwaveを使い（a），幅256ドット，高さ192ドットのサイズで表示するように指定している（b）。さらに＜object＞タグの入れ子になった＜param＞タグで，再生するコンテンツ・データのURLを指定している（c）。

　このように指定しておくことでInternet Explorerは，ActiveXコントロールの識別子を見て，自分がそのActiveXコントロールをインストール済みかを調べる。インストール済みであれば，コンテンツを＜param＞タグで指定されたURLからダウンロードし，そのActiveXコントロールを使って再生する。ActiveXコントロールがインストールされていないときは，ActiveXコントロールをダウンロードしたのち，インストールしてからコンテンツを再生する＊再生する。

　MozillaやFirefox用の＜embed＞タグも内容はほぼ同じだ（(2)）。違いは，＜param＞タグを使わずに，コンテンツのURLを直接指定するところと，プラグイン・アプリケーションを指定するためにMIMEタイプ＊MINEタイプを使っているところである。

入力フォームでページを対話型にする

　ブラウザのウインドウ上で入力した情報をWebサーバーに送ってCGIプログラム＊CGIプログラムを起動し，処理結果をWebブラウザに表示させる。検索サイト，ショッピング・サイト，掲示板，Webメールなど，さまざまな場面で利用されている使い方だ。その情報入力に使うのが＜form＞タグである。

　＜form＞タグで指定するのは，入力された情報の送信先と送信方法である。入力する要素は，＜input＞タグなどで指定する。＜form＞タグと＜input＞タグを組み合わせた簡単な例で見てみよう（図3-4[拡大表示]）。

　まず，＜form＞タグでWebブラウザがアクセスするCGIプログラムのURLとアクセス方法＊アクセス方法を指定する（a）。次に，＜form＞と＜/form＞タグの間に，Webブラウザに入力フィールドを表示する＜input＞タグを記述する。

　＜input＞タグでは，必ずtype属性で入力フィールドの種類を指定する。"radio"（一つだけ選択できるラジオ・ボタン，図3-4の(1)[拡大表示]'），"text"（テキスト入力フィールド，(2)'），"submit"（送信ボタン，(3)'）のほかに，"checkbox"（複数選択できるチェック・ボックス），"password"（パスワード入力フィールド）などがある。さらに，送信するデータの名前をname属性で指定し＊name属性で指定，送信する値をvalue属性で指定する＊value属性で指定する。

名前と値が組で送られる

　このように記述したHTMLファイルをWebブラウザが表示し，ユーザーがボタンにチェックを付けたり（1），テキストを入力して（2），送信ボタンをクリックすると（3），HTTPリクエストとして入力情報がWebサーバーに送られる（4）。このときに送られるのは，ボタンではname属性の値とvalue属性の値を「＝」で結んだもの。「namae=papa」といった具合だ。テキスト入力フィールドではname属性の値と実際に入力されたテキスト＊実際に入力されたテキストになる。

　このように送られた値は，WebブラウザがURLで指定したCGIプログラムが処理する（5）。処理結果は，新たなHTMLデータとしてWebブラウザに返信され（6），Webブラウザが表示する（7）。

ブラウザの処理で表示を変える

　HTMLファイルには，Webブラウザに実行させるスクリプトも埋め込める。スクリプトはWebブラウザ側で表示を動的に変える処理をさせるのに使ったりする（図3-5[拡大表示]）。埋め込まれたスクリプトは，そのHTMLデータを受け取ったWebブラウザが実行し，結果をウインドウ表示に反映する。

　HTMLファイルへスクリプトを埋め込む方法は2種類ある。一つは，＜script＞と＜/script＞タグの間にスクリプトを書いておく方法。もう一つは，ほかのタグの中に直接埋め込んでおく方法である。

　図3-5の例では，＜script＞と＜/script＞タグの間に，アクセスした日時を表示するスクリプトを記述している（a）。また，＜a＞タグの中にはクリックすると別のHTMLファイルを新しいウインドウで開くスクリプトを記述している（b）。

別ファイルにして呼び出すことも可能

　図3-5で紹介したのは，いずれも簡単なスクリプトだが，もっと複雑な処理もできる。ただ，複雑な処理をそのままスクリプトとして記述しようとすると長くなってしまうことが多い。

　そこで，HTMLファイル中で同じような処理をするスクリプトを何度も使うときや，複数のHTMLファイルで同じスクリプトを利用するときは，スクリプトを記述したファイルを別に用意しておく。そのファイルには＜script＞や＜/script＞といったタグは記述せず，スクリプトのソースコードだけを書く。例えば，日時情報を表示するスクリプトなら

　　var d = new Date();document.write(d.toLoca…());

◇　　　　◇　　　　◇

　ここまで理解していれば，HTMLは恐れるに足らず。企業が公開している複雑なWebページだって読みこなせる。そして，自分が気に入ったWebページのHTMLソースを参考にして，見栄えのいいオリジナルなWebページが作成できるだろう。