3.4 さまざまなHTMLタグ

WWW/WWWサーバによる情報公開 - 基礎編/さまざまなHTMLタグ

3.4.3 リンクを指定するタグ

ここでは，WWWの特徴の一つである，他の情報へのリンクを記述するためのタグの機能を説明します．

文章や画像などを<a>タグと</a>タグで囲むことで，それらの文章や画像に他の情報へのリンクを設定できます．href属性にはリンク先の情報のURLを指定します．リンク先の情報には，Webページ以外に，画像ファイルや圧縮ファイルなども指定可能です．ブラウザで表示できない形式の情報が設定されているリンクがクリックされた場合，ブラウザはダウンロード用のダイアログを表示し，`OK'ボタンがクリックされることで，設定された情報のダウンロードが開始されます．

<a href="リンク先の情報のURL">リンクに設定する文章や画像など</a>

**図 3.13:** `<a>`タグのサンプル

3.4.4 画像ファイルを貼りつけるタグ

HTMLではGIFやJPEG，PNG形式などの画像ファイルをページに貼りつけられます．また，ただ貼りつけるだけではなく，位置の指定や文章の回り込みの指定なども行えます．

画像の貼りつけ - `<img>`タグ

画像の貼りつけには<img>タグを使用します．src属性には貼りつける画像ファイルの場所をURLで指定します．alt属性には画像が表示される前，または画像が表示されないWWWブラウザを使っている場合などに，代わりに表示される文字を指定します．alt属性がないと，画像が表示されない場合に情報が欠落することになるので，必ず指定してください．

<img src="画像ファイルのURL" alt="画像の説明">

width属性，height属性

width属性で画像の横幅，height属性で縦幅を指定します．表示の際に画像が指定したサイズに拡大，縮小されます．両属性とも，ピクセル，WWWブラウザのウィンドウのサイズに対する割合(%)のどちらでも指定できます．

<img src="画像ファイルのURL" alt="画像の説明" width="横幅" height="縦幅">

図3.14に<img>タグを用いた例を示します．

<p>
<img src="lounge.jpg" width="200" alt="カモ池からみたラウンジ"><br>
sfc生には、ラウンジが好きって人もいますよね。学食でもごはんは食べられるけど、いつも
休憩はラウンジ派って人、けっこういます。カモ池もすぐそば…
</p>
<p>
<img src="omicron.jpg" width="15
ここはオミクロン棟の前です。インテンシブの休憩の時間や、お昼どきになると多くの学生が
通ります。敷かれている石と石との間がけっこう空いているので…
</p>

↓

Webページ上で表示するGIFファイルは，Unisys社が許可したアプリケーションで作成されたものでなければなりません．GIFファイルを使用する際には，作成に用いたアプリケーションがライセンスを受けているかどうか確認してください．

3.4.5 表組みを行うタグ

HTMLでは次のタグを<table>タグと</table>タグの間で使うことで表組みを作成します．

<tr>タグ
行を区切るタグ．
<td>タグ
列を区切るタグ．
<th>タグ
基本的には<td>タグと同じだが，このタグで囲まれた部分は表の中の見出しになります．
<caption>タグ
表の名前をつけるのに用います．

表の作成

表を作成する手順を次に示します．

1.: <table>タグと</table>タグで囲む．
2.: <caption>タグで表に名前をつける．
3.: <tr>タグで行を区切る．
4.: <td>タグや<th>タグで列を区切る．

<table>
<caption>表の名前</caption>
<tr><th>見出し1</th><th>見出し2</th></tr>
<tr><td>項目1</td><td>項目2</td></tr>
</table>

`<table>`タグで指定する属性

border属性
border属性では，テーブルの外枠の線の太さを数値で指定する．

<table border="数値">
</table>

width属性
表全体のサイズを指定します．サイズの値はピクセルまたはWWWブラウザのウィンドウサイズに対する割合(%)で指定します．

<table width="幅">
</table>

`<td>`タグで指定する属性

rowspan属性，colspan属性
<td>タグで，縦と横にまたがったセルを作成できます．縦方向に長いセルを作るにはrowspan属性を，横方向に長いセルを作るにはcolspan属性を指定します．両属性ともまたがったセルの数を数値で指定します．この2つの属性を組み合わせることで複雑な表組みを行えます．

<td rowspan="縦方向の長さ" colspan="横方向の長さ">

図3.15に<table>タグを用いた例を示します．

<table border="10">
<caption>表の練習</caption>
<tr><th>名前</th><th>特徴</th><th>足の数</th></tr>
<tr><td>いぬ</td><td>よくなつく</td><td rowspan="2">4</td></tr>
<tr><td>うし</td><td>大きい</td></tr>
<tr><td>つる</td><td>空を飛べる</td><td rowspan="2">3</td></tr>
<tr><td>ぺんぎん</td><td>空は飛べない</td></tr>
<tr><td>げじげじ</td><td colspan="2">なぞ</td>/tr>
</table>

↓

W3C

W3C(World Wide Web Consortium)は，WWWの可能性を最大限に引き出すことを目的に1994年に設立された国際組織です．WWWで利用される技術の標準化や，新技術を応用したサンプルアプリケーションの開発などに取り組んでいます．SFCは，マサチューセッツ工科大学計算機科学研究所やフランス国立情報処理自動化研究所とともにW3Cに機関として参加しています．

HTMLの仕様はW3Cから``勧告''という形で発表されます．W3Cは，一般ユーザも最新の仕様(HTML4.0)に準拠した文書を作成するよう求めています．仕様に関する情報は，http://www.w3.orgから入手できます．

3.4.6 フレーム機能

``フレーム機能''とは，ブラウザの画面をいくつかに区切って，それぞれの領域に別々のHTMLファイルを表示させる機能のことです．画面を分割することで表示する情報量が増え，ページをスクロールする手間が省けますが，1つのファイル毎のスペースが減少する上，同時に複数のファイル読み込むため通常より表示に時間がかかるという欠点があります．また，フレームを表示できないブラウザもあるので，注意してください．

ページの文書型の宣言

WWW上の情報については，文書がどのような構造で記述されているのかを指定しなければいけません．フレーム機能を利用するには <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frame set//EN"> としてHTML4.0 Framsetの規格に従って記述されていることを宣言する必要があります．

フレームの作成

まず，フレームを表示させるためのHTMLファイルを作成します．フレームを表示するには，フレーム構成の情報を<frameset>タグと</frameset>タグで囲みます．フレームを表示できないWWWブラウザでは，<noframes>タグで囲まれた内容が表示されます．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<html>
<head>
<title>フレームのタイトル</title>
</head>
<frameset>
<frame>
<noframes>
フレーム未対応のWWWブラウザのために記述しておく部分
</noframes>
</frameset>
</html>

フレームの配置を指定するには，<frameset>タグを用います．

<frameset cols="割合1,割合2,..." rows="割合1,割合2,...">
</frameset>

cols属性
横方向の分割をカンマで区切って指定します．幅の値は，ピクセルかWWWブラウザのウィンドウのサイズに対する割合(%)で指定します．また，残りすべてを指定するには`*'を使用します．
rows属性
縦方向の分割をコンマで区切って指定します．高さの値の指定はcols属性と同じです．
一つの<frameset>タグの中にrows属性と cols属性を記述すると，両方が反映された格子状のフレームができます．また，<frameset>タグを複数配置することにより，画面を細かく分割できるようになります．

フレームの設定を行う - `<frame>`タグ

各フレームの名前やリンク先の情報を指定するには，<frame>タグを利用します．

<frame name="フレーム名" src="URL" scrolling="キーワード">

name属性
フレームの名前を指定します．
src属性
フレームに表示するHTMLファイルのURLを指定します．
scrolling属性
スクロールバーの振る舞いを指定します．スクロールバーを表示させるには`yes'，非表示にするには`no',フレームの大きさに文章が収まらなかった時に自動的に表示するには`auto'を指定します．なお通常は`auto'に設定されています．

フレームに対応していないときに表示する - `<noframes>`タグ

フレームを表示できないWWWブラウザに対して情報を表示するには， <noframes>タグを利用します．

<noframes>
</noframes>

フレーム間のリンク

フレーム内にあるリンクをクリックすると，通常は同じフレーム内にリンク先の文書が表示されます．<a>タグのtarget属性を利用すると，リンク先の文書を任意のフレームや新しいウィンドウに表示できます．

<a href="リンク先のページ" target="リンク先を表示する場所">

target属性には次のような値が指定できます．

フレーム名
<frame>タグのname属性で設定したフレーム名を指定すると，リンク先の文書をそのフレーム内に表示します．
_top
現在のフレームを破棄しリンク先の文書を表示します．
_parent
その位置のフレームを管理するframesetのみを破棄します．
_self
リンクがあるフレーム内にリンク先の文書を表示します．
_blank
新しいウィンドウにリンク先の文書を表示します．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
 "http://www.w3.org/TR/html4/frameset.dtd">

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-2022-jp">
<title>
Frame test Page
</title>   
</head>
<frameset rows="120,*,15
<frame src="head.html" name="head" scrolling="no">
<frame src="body.html" name="body" scrolling="no">
<frameset cols="40
<frame src="menu.html" name="menu">
<frame src="comment.html" name="coment">
</frameset>
<noframes>
<p>
このページは「フレーム機能」を使用しています．
フレーム機能の使えるWWWブラウザでみましょう．
</p>
</noframes>
</frameset>
</html>

<frame>タグを使った結果

3.4.7 その他のタグ

区切り線の表示 - `<hr>`タグ

<hr>タグを使うと，ページの中に区切り線を入れられます．

<hr>

図3.18に<hr>タグを用いた例を示します．

**図 3.18:** `<hr>`タグのサンプル
区切り線をひいてみます。 <hr> という事で線が入りました。 ↓

整形済みテキスト - `<pre>`タグ

すでに整形されている文章をそのまま表示する場合は<pre>タグで囲みます．文章の改行やインデント，スペースなどがそのまま反映されます．

<pre>整形されたテキスト</pre>

図3.19に<pre>タグを用いた例を示します．


<pre>
 　　　　　　　||↑
 ←原宿　表参道||外苑前
 　　　　　　　||
 　￣￣￣￣￣￣  ￣￣￣
 　＿＿＿＿＿＿  ＿＿＿
　　　慶応銀行*||青
　　　　　　　 ||山
　　　　　渋谷 ||通
　　　　　　↓ ||り
</pre>

↓

3.4.1 文書の構造に関するタグ

見出し - `<h>`タグ

段落 - `<p>`タグ

改行 - `<br>`タグ

HTML3.2とHTML4.0

引用 - `<blockquote>`タグ

アドレス- `<address>`タグ

強調 - `<strong>`タグ

3.4.2 箇条書きをするタグ

記号による箇条書き - `<ul>`タグ

番号による箇条書き - `<ol>`タグ

説明付き箇条書き - `<dl>`タグ