 |
→ |  |
|
 |
 |
||
 |
|||
 |
|||
表は、マス目（セル）の内容を <td> ～ </td> または <th> ～ </th> ではさみ、それらの１行分を <tr> ～ </tr> ではさんで、全体を <table> ～ </table> ではさんで作ります。<th> ～ </th> は表の見出し欄に使います。
３行４列の表（うち１行と１列は見出し）を書くには、次のように記述します。
<table> <tr> <th></th> <th>第１列</th> <th>第２列</th> <th>第３列</th> </tr> <tr> <th>第１行</th> <td>第１行第１列</td> <td>第１行第２列</td> <td>第１行第３列</td> </tr> <tr> <th>第２行</th> <td>第２行第１列</td> <td>第２行第２列</td> <td>第２行第３列</td> </tr> </table> |
これは下のような表になります。
| 第１列 | 第２列 | 第３列 | |
|---|---|---|---|
| 第１行 | 第１行第１列 | 第１行第２列 | 第１行第３列 |
| 第２行 | 第２行第１列 | 第２行第２列 | 第２行第３列 |
マス目の間に罫線を引くには、 <table border> ～ </table> とします。
| 第１列 | 第２列 | 第３列 | |
|---|---|---|---|
| 第１行 | 第１行第１列 | 第１行第２列 | 第１行第３列 |
| 第２行 | 第２行第１列 | 第２行第２列 | 第２行第３列 |
- 表全体の幅と高さ
- 表全体の幅や高さは、<table> タグにそれぞれ width=、height= 属性を付けて指定します。 数値（ピクセル数）で指定した場合は固定幅になります。 % をつけると Web ブラウザのウィンドウのサイズからの割合になります。
<table width="512" height="100%"> ～ </table> - 表の外枠の太さ
- 表の外枠の太さは、<table> タグに border= 属性をつけて指定します。
<table border="10"> ～ </table> - 罫線の太さ
- 罫線の太さは、<table> タグに cellspacing= 属性をつけて指定します。
<table border cellspacing="10"> ～ </table> - 罫線とデータとの間隔
- 罫線とマス目内のデータとの間隔は、<table> タグに cellpadding= 属性をつけて指定します。
<table border cellpadding="10"> ～ </table> - マス目の幅と高さ
- マス目の幅や高さは、<td> または <th> タグにそれぞれ width=、height= 属性を付けて指定します。 数値（ピクセル数）で指定した場合は固定幅になります。 % をつけると Web ブラウザの表全体のサイズからの割合になります。
<td width="20%" height="30"> ～ </td> - マス目の背景色
- マス目の背景色は、<td> または <th> タグに bgcolor= 属性を付けて指定します。
<td bgcolor="#ff0000"> ここは赤色のマス目 </td> - マス目内のデータの水平位置
- データをマス目のどの部分のそろえるかは、 <td> または <th> タグに align= 属性を付けて指定します。 align= には "left", "center", "right" が指定できます。
<td align="center"> ここは中央揃え </td> - マス目内のデータの垂直位置
- データをマス目のどの高さに表示するかは、 <td> または <th> タグに valign= 属性を付けて指定します。 valign= には "bottom", "middle", "top" が指定できます。
<td valign="top"> ここはマス目の上端 </td> - 複数行にわたるマス目
- 複数行にわたるマス目を作るには、 <td> または <th> タグに rowspan= 属性を使用します。
<td rowspan="2"> ここは２行にわたるマス目 </td> - 複数列にわたるマス目
- 複数列にわたるマス目を作るには、 <td> または <th> タグに colspan= 属性を使用します。
<td colspan="2"> ここは２列にわたるマス目 </td> - 表のキャプション
- 表のキャプションは、 <caption> ～ </caption> タグを使ってつけます。 キャプションの位置は align= 属性で指定します。
<table width="512" height="100%">
<caption>表のキャプション（説明）</caption>
...
</table><table width="512" height="100%">
<caption align="bottom">このキャプションは表の下</caption>
...
</table>
ホットスポットとして画像を使用したとき、 通常では画像全体で一つの URL にリンクします。 これを、画像上のクリックした位置によって異なる URL にリンクするようにしたものを、クリッカブルマップと呼びます。
クリッカブルマップの実現方法には、 サーバーサイドとクライアントサイドという２つの方法があります。 サーバーサイドは Web サーバ側でクリッカブルマップを実現する方法で、以前から用いられていますが実現方法にいくつかのバリエーションがあります。
クライアントサイドは Web ブラウザ側で実現する方法で、これにも２つの方法があります。その一つは、表を使う方法です。下の左のような画像を、右のように要素ごとに分解します。 この作業は Photoshop などでできます。
|
→ | |
|
|
|
||
|
|||
|
|||
これを、<table border="0" cellspacing="0" cellpadding="0"> で罫線の太さを 0 にして表のマス目の中に置けば、１枚の画像のように見えます。
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2"><a href="http://www.wakayama-u.ac.jp/"> <img src="map1.gif" border="0"></a></td> </tr> <tr><td rowspan="3"><img src="map5.gif"></td> <td><a href="http://www.edu.wakayama-u.ac.jp/"> <img src="map2.gif" border="0"></a></td> </tr> <tr> <td><a href="http://www.eco.wakayama-u.ac.jp/"> <img src="map3.gif" border="0"></a></td> </tr> <tr> <td><a href="http://www.sys.wakayama-u.ac.jp/"> <img src="map4.gif" border="0"></a></td> </tr> </table> |
そして、この一つ一つの画像をホットスポットにすれば、 クリッカブルマップが出来上がります。 その際、<img src="..." border="0"> として、 画像をホットスポットにしたときに現れる枠を消しておきます。
|
|
|
|
|
|
|
|
クライアントサイドでクリッカブルマップを作るもうひとつの方法は、 <map name="マップ名"> タグを使う方法です。ただし、こちらの方法は古い Web ブラウザでは表示できません。
<map name="organization"> <area shape="rect" coords="34,155,244,189" href="http://www.sys.wakayama-u.ac.jp/"> <area shape="rect" coords="34,115,244,149" href="http://www.eco.wakayama-u.ac.jp/"> <area shape="rect" coords="34,75,244,109" href="http://www.edu.wakayama-u.ac.jp/"> <area shape="rect" coords="9,14,224,59" href="http://www.wakayama-u.ac.jp/"> </map> <img src="map.gif" usemap="#organization"> |
複数の GIF ファイルをもとに、 パラパラ漫画のような簡単なアニメーションを作ることができます。
 movie1.gif |
 movie2.gif |
 movie3.gif |
 movie4.gif |
|---|
上の４つの GIF ファイルをもとにアニメーション GIF ファイルを作成すると、下のようになります。
このような図は Adobe ImageRady などで作成できます。
SSI (Server Side Include) という機能を使えば、Web ページ中にコマンドの出力を埋め込むことができます。この機能を使って第７回の課題で作成した counter.sh の出力を Web ページに埋め込めば、簡単なアクセスカウンタが実現できます。
| 注意 |
|---|
|
SSI は間違った使い方をするとサーバにトラブルを起こしたり、大きなセキュリティホールを作る場合があります。 |
counter.sh を public_html の下にコピーしてください。
% cp counter.sh ~/public_html[Enter] |
次に、public_html に下のような HTML ファイルを作成してください。 ファイル名は counter.shtml とでもしてください。 以前に作成した Web ページに組み込んでも構いません。 その場合は拡張子を .shtml に変更してください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>counter test</title> </head> <body> あなたは <!--#exec cmd="./counter.sh"--> 番目の訪問者です。 </body> </html> |
こうすると、このページにアクセスするたびに counter.sh が実行されて、その出力が <!--...--> の部分と置き換わります。counter.sh の出力が 1234 なら、この部分は次のようになります。
あなたは 1234 番目の訪問者です。 |
参考までに、別のファイル（下の例では file.txt）を埋め込むときには次のようにします。
あなたは <!--#include file="file.txt"--> 番目の訪問者です。 |
| 注意 |
|---|
|
counter.sh はカウントデータ (count.dat) の更新時にファイルをロックしていないので、複数の人が同時にアクセスしたときなどにカウントが狂ってしまいます。ほとんど実用にはなりませんので、注意してください。 |
グラフィカルなカウンタを作るためには、Perl で GD （日本語訳はここ）というモジュールを使ったりすると便利なのですが、ここでは counter.sh の出力を工夫してみます。まず、次のような数字の画像を public_html 内に用意したとします。
 |
 |
 |
 |
 |
| 0.png | 1.png | 2.png | 3.png | 4.png |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| 5.png | 6.png | 7.png | 8.png | 9.png |
このとき、HTML で次のように表現すれば、 という表示が得られます。
<img src="1.png"><img src="2.png"><img src="3.png"><img src="4.png"> |
つまり、counter.sh の 1234 といった出力を上記のように変換すれば、グラフィカルなカウンタが実現できます。このような文字列の置き換えを行うには、sed というコマンドを使うと便利です。
% echo 1234 | sed 's/\(.\)/<img src="\1.png">/g'[Enter] <img src="1.png"><img src="2.png"><img src="3.png"><img src="4.png"> |
したがって、上の sed コマンド（太字部分）を counter.sh で数値を出力している部分に組み込めば（パイプするわけですね）、グラフィカルなアクセスカウンタが実現できます。
自分の Web ページを見てくれた人からメールをもらいたいときは、 自分のメールアドレスを Web ページに明記しておきましょう。 これは、メールをもらうだけでなく、 そのページの責任の所在（文責）を明らかにするという点でも、 意味のあることです。
<a href="mailto:メールアドレス"> ～ </a> というように、 ホットスポットのリンク先に Web ページの URL ではなく "mailto:自分のメールアドレス" を指定すると、 そのホットスポットをクリックしたときに Web ブラウザのメール機能を呼び出すようにできます。
<a href="mailto:tokoi@sys.wakayama-u.ac.jp"> <img src="mail.gif" align="middle" border="0"> <font size="+2">メール下さい</font></a> |
これは下のようになります。この絵か文字をクリックしてみてください。
 メール下さい |
以下のページをつくり、 自分の index.html からリンクせよ。
課題ができたら、メールで tokoi@sys.wakayama-u.ac.jp まで知らせてください。私が確認したら返事を書きますので、それ以降は自由に変更していただいて結構です。時間割へのリンクなんかははずしておいてください。