コンピュータセミナー
2003.5.30
前回の実習でHTMLファイルの基本構成と代表的なタグについて学習しました．今 回はHTMLの中では最もやっかいな表組みといくつかの特殊な応用について練習し ます．
表は<table></table>により行います．表は英語でtable ですので，そのままです．また，行のことをrow，列のことをcolumnと言います ので，それにちなんだ属性の名前がでてきます．行を制御するタグは <tr></tr>で，個々のセルは <td></td>で記述します．セル独自の属性変更は <td>で行い，行に関するものは<tr>に 加えます．<table>に記述すると表全体に反映します．加えられる属性は背景色や文字色，行揃えなどほとんどのも のが可能になります．
枠線についても細かい指定が可能です．しかし，今は枠線の有無と太さだけ説明 しておきます．また，全体にわたる属性指定の場合に限定しておきます．枠線は <table>タグの属性として border としておく と表示されます．また，border=5 のようにすると，枠線の太 さを指定できます．次に挙げるのは最も基本的な表組みの例です．
<table border> <tr><td>a11</td><td>a12</td><td>a13</td></tr> <tr><td>a21</td><td>a22</td><td>a23</td></tr> <tr><td>a31</td><td>a32</td><td>a33</td></tr> <tr><td>a41</td><td>a42</td><td>a43</td></tr> </table> |
表示結果は自分で確かめてみてください．
表に関連するタグでは終了タグを省略できるものもあります．たとえば， <td>タグは終了タグを省略しても通常の場合は動作しま す．また，特殊な例では，<tr>タグを省略して， </tr>タグの代わりに<tr>タグを利用す ることも可能です．終了タグを省略するとソースが短くなり，編集中に 見やすくなりますが，論理構成をしっかり確認しないと間違いの元にな りますので注意してください．
以下に少し構成の変った表の例を示します．タグの組み方については自分でソー スを表示させて確認してください．
複数の表を組み合わせて視角効果を持たせる
罫線を入れた場合には罫線の太さを変えることにより印象が異なります．擬似的 にボタンのように見せることも可能です．<table border=10></table>のようにすると枠が太くなります が，組み合わせると以下のような例も可能です．
|
この例はNetscapeで見ると立体的に表示されますが，Mozillaの枠線表示では変 哲の無い見栄えです．複数行にわたるデータがある場合
| a11 | b11 | c11 |
| c12 | ||
| b12 | c13 | |
| a21 | b21 | c21 |
複数列にわたるデータがある場合
| a11 | b11 | c11 | ||
| a21 | b21 | b22 | c21 | |
| a31 | b31 | b32 | b33 | c31 |
行単位で文字を中央揃えする場合
| a11 | b11 | c11 | ||
| a21 | b21 | b22 | c21 | a31 | b31 | b32 | b33 | c31 |
特定のセルの背景色を変更する（table属性を指定すると全体の色の指定も可能）
| a11 | b11 | c11 | ||
| a21 | b21 | b22 | c21 | a31 | b31 | b32 | b33 | c31 |
セルの横幅を指定する場合
| a11 | b11 | c11 |
| c12 | ||
| b12 | c13 | |
| a21 | b21 | c21 |
上記のように、複雑な表のタグを自分で組むのは結構面倒な作業になります．最 近はワープロの機能の一つとしてHTML形式に変換して出力することが可能になっ てきました．ただし，ワープロというものはフォントや文字揃えなど様々な整形 機能を有しているので、それが知らない間にタグに反映されてソースが膨大な量 になっていることもあります．次のページのような実に単純な例でも、ソースを 表示させてみると恐ろしい事態になっているのが分かります．自分で作成すると きにも、見る人の立場になってデータ量の少ないページを作成するように心掛け ましょう．そのためには、このように自分でタグを組むのが一番です．
これまで実習してきたページはindex.htmlという名前で保存してきま した．すべてのデータが一つのファイルにあるのでは不便ですし、実際のページ 運用としてはページのデータ量が多くなり過ぎて表示に時間がかかることになっ てしまいます．そこで，内容ごとにページを別に用意して互いにリンクを張って おけばすっきりします．このようなページ間のリンクは「相対パス」による指定 が便利ですし、自分でサーバ上と同じ構成のページをローカルにおいておけば、 修正や編集がローカルで出来るので楽になります．
実際に次の例で試してみましょう．これまで使用していた index.html のどこかに、次のようなリンクを用意します．
<a href="test.html">Go to link test page</a> |
そして，上のリンク先であるtest.htmlというファイルを用意します． 内容は別になんでも構いませんが、次のリンクだけは作成しておきましょう．
<a href="index.html">Go back to Top page</a> |
これで，二つのページ間の行き来がリンクにより簡単にできるようになります． 相対パスによるリンク先指定なので、ディレクトリ構成などを考えてリンクする 必要があります．この授業の目次ページがまさにそういった構成なので、ソース を参照してみてください．
このテキストは最初の本日の作業内容のところの見出し項目をクリックするとそ こに移動するようになっています．このようにページ内の指定した場所に移動す るリンクも可能です．その際は、移動先となる場所 (これをアンカー，錨と言い ます) をまず特定します．そしてその場所に以下のようなタグを置いておきます．
<a name=test_point>Come to this point</a> |
そして，リンクとしては次のようなタグを用意します．
<a href=#test_point>Go to anchor point</a> |
これについては，まさにこのページのソースを表示させるのが一番だと思います． また，自分で試すときには，リンクとアンカーの場所までの長さが画面表示ウィンドウの数倍無いとな かなか移動の実感がわかないでしょう．
これはおまけの項目です．特別な画像も言語も使わないで一見動的なページをつ くることも可能ではあります．次のページを参照してください．
複数のユーザが利用するUNIXシステムでは，自分のファイルが間違って他のユー ザに操作されないように保護モードが設定されています．これを，HTMLページと 組み合わせて理解していくことにしましょう．
教科書が無い場合，もしくは持参している参考書にファイルの属性の記述が無い 場合には，$ jman chmod
により，以下の内容を学習してください．
教科書の8.1.1の操作を試すのは自分のホームディレクトリから始めます．その 次に，public_html ディレクトリに移動してそちらでも試してみましょ う．
自分のホームディレクトリの属性と先ほどと同じように public_html ディレクトリの属性を確認してみましょう．
chmod コマンドを利用してファイルやディレクトリの属性を変更しま すが，教科書にある8進数表示( jman chmod では「数値モー ド」)の方が慣れてくると簡単に思えてくるは ずです．こちらで試してみましょう．解釈は教科書を参考にしてくださ い．
自分の回りの知合いのWWWページを見てみましょう．自分のページを閲覧すると きに入力したURLのログイン名の部分を人のログイン名に変更するだけで可能で す．まず，これを試してみます．続いて，次の操作を実行します．
$ chmod 744 ~
その後で，ブラウザにより自分が作成した index.html ファイルを表 示させてみて下さい．また，先ほど閲覧した知合いのページも見てみましょう． 結果はどうなったでしょうか．
次に，先ほどの操作で変更したホームディレクトリのモードを元に戻します．
$ chmod 755 ~
$ chmod 700 ~/public_html
のようにします．先ほどと同じようにブラウザでページを開いてみましょう．
確認した後は，先ほどと同じで
$ chmod 755 ~/public_html
を実行して元に戻します．
最後にファイルの属性自体を変更してみます．今度は，public_html ディレクトリのモードを変更してみましょう． 例えば，
$ chmod 600 ~/pubic_html/index.html
ではどうでしょうか．こちらももともとはモードが644でしたので，戻すにはそ の値を指定します．
8進数で保護モードを理解するのはなかなか難しいものです．そこで，8進数では なく持ち点形式で考えてみましょう．すなわち，
読み出し権限が4点，書き込み権限が2点，実行権限が1点です．全ての権限を持っ ていれば，合計点は7点です．読み出しと書き込みだけならば6点，読み出しと実 行だけであれば，5点というようになります．これを各ユーザ，すなわち，所有 者，グループ，他人の3桁で表示すると，先ほど実習したような755とか644など となります．自分のホームディレクトリにあるファイルで，人には見られたくな いものであ れば，モードを600に，ディレクトリならば700に指定しておくと安心ですね．
私も，情報科学概論のテストや宿題のスクリプトを自分のホームディレクトリに 置いていますが，モードをちゃんと設定しているので，みなさんには見えないよ うになっています．
AクラスとBクラス 別に小テストを行いますので，アナウンスに注意して下さい．
AクラスとBクラス 別に宿題を出しますので，アナウンスに注意して下さい．