Information Literacy: Introduction to HTML 2

ＨＴＭＬ入門その２

今日の演習内容

リンクを張る
画像の扱い
テーブル
<補足>ＨＴＭＬ文書の書式など

ハイパーテキストの一つの特徴として、ハイパーテキスト中の任意の部分に、他のハイパーテキストなどを表示する足掛かり（「リンク」と呼ばれる）を埋め込む機能がある。このリンクの例を見てみる。

リンク集

リンクの例としてリンク集を作ってみる。リンク集は自分の top ページ（通常 public_html の index.html）からリンクし、リンク集から様々なＵＲＬをリンクすることにする。リンク集は index.html とは別のファイルとし public_html ディレクトリーに link.html というファイルを用意する。
まず index.html 中に link.html へのリンクを埋め込む。リンクを作るには <A> と </A> のタグを使用する。Ａは anchor（船のいかり）を意味し、文字レベルのタグである（従って文章中にも埋め込める）。 index.html のどこかに以下のような行を入れる。
```
   <H2><A HREF=link.html>リンク集</A></H2>
```
これで index.html の中にリンクが埋め込まれた。 Netscape で index.html を表示してみると「リンク集」という青色で下線が付いた行が加わったのがわかるはず。 Netscape ではリンクはこのような表示になる（ブラウザが違ったりブラウザの設定が違うと異なった表示になることがある）。
上の記述で <A> タグ中に書かれた「HREF=link.html」というのは、この部分がクリックされたときに、どのファイルがブラウザで表示されるかを指定している。ここにファイル名だけを書くと、今表示しているＨＴＭＬファイル（この場合 index.html）があるのと同じディレクトリー中のファイルであると解釈される。これは今見ているＨＴＭＬファイルからの相対的な場所を参照するので相対ＵＲＬと呼ばれれる（これに対して絶対ＵＲＬがあるがそれは後ほど出て来る）。自分の public_html 中のＨＴＭＬファイルをリンクする場合は、ＨＴＭＬファイルの移動などを考えると、全て相対ＵＲＬで書いておくのが望ましい。

次に link.html を用意する。 public.html ディレクトリーに link.html というファイルを作り、以下のような内容を書き込み保存する。

   <HTML>

   <HEAD>
   <TITLE>My links</TITLE>
   </HEAD>

   <BODY>
   <DIV ALIGN=CENTER>
   <H2>リンク集</H2>
   </DIV>

   <HR>

   <H2>大学関係</H2>
   <UL>
   <LI><A HREF="http://www.osaka-u.ac.jp/">大阪大学</A></LI>
   <LI><A HREF="http://www.sci.osaka-u.ac.jp/index-jp.html">理学部</A></LI>
   <LI><A HREF="http://www.phys.sci.osaka-u.ac.jp/index-jp.html">物理学科</A></LI>
   </UL>

   <H2>趣味</H2>
   </BODY>

   </HTML>

大部分のタグは前回 index.html を書いたときに出てきたタグである。少し違うのは <UL> と </UL> タグではさんだ番号付けしない箇条書の項目（LI タグではさまれている）として、 <A> と </A> タグではさまれたリンクが埋め込まれている点である。
最初の「大阪大学」のリンク先は「HREF="http://www.osaka-u.ac.jp/"」として指定されている。リンク先は２つの「"」（クォーテーションマーク）で囲まれている。 HREF は A タグの属性の一つであるが、一般にタグの属性の値が英数字、「.」（ピリオド）、「-」（ハイフン、マイナス）、「:」（コロン）、「_」（アンダースコア）のみで書けない場合には「"」で囲む必要がある（今の場合「/」が含まれている）。
ここに出てきたリンク先は http: で始まっており絶対ＵＲＬの一例である（「理学部」「物理学科」などのリンク先も同様）。この部分のリンク先は自分の public_html 中には無いので、絶対ＵＲＬで指定する他無い。
ちゃんと link.html が作れたら、Netscape で index.html を表示し、「リンク集」をクリックしてみる。 Netscape は link.html の内容を表示し、「大阪大学」「理学部」「物理学科」の部分が、リンクであることを示す下線付きの青色になっているはず。また「大阪大学」「理学部」「物理学科」をクリックすると指定した web ページが表示されるはず。
もしうまく表示されない場合は以下の点をチェックする。
- <A> タグがちゃんと入っているか。入っていないとリンクが作れない。
- </A> タグは入っているか。入っていないと意図しない部分まで下線付き青色になる。
- HREF の値は正しく入っているか。正しくないと「not found」といったようなページが表示される。
- link.html というファイルが public_html ディレクトリーに作られているか。保存し忘れていたり、違ったディレクトリーに保存した場合は、「not found」といったようなページが表示される。
リンクの仕方と仕組みが分かっただろうか。

その他のリンク

自分の web ページで、どんどんＨＴＭＬファイルを作り、どんどんリンクを張っていくと、ＨＴＭＬファイル間の関係が複雑になり、 web ページを見ている人が、今自分が web ページのどの辺にいるのか分からなくなってしまうこともある。それを避けるためには、ナビゲーション用のリンクを張っておけば良い。その例として link.html の BODY 中の最後に以下のようなタグを追加してみる。
```
   <H2>趣味</H2>

   <HR>

   <A HREF=index.html>ＴＯＰへ戻る</A>
   </BODY>
```
ここでは新たにリンクを１つ付け加えた。リンク先は index.html なので、自分の web ページの最初のＨＴＭＬファイルに移動できる。この例のようにハイパーテキスト間は自由自在にリンクを張ることが可能である。
Web ページを公開するのは、多少とも他の人がこのページを見てくれることを期待している。また出来れば、見た感想や意見を返信してくれると有難い。最も簡単に返信を実現する一つの方法は以下のようなリンクを index.html の最後に付け加えることである。
```
   <HR>

   ご意見ご感想は<A HREF="mailto:sp20nnxx@ecs.cmc.osaka-u.ac.jp">sp20nnxx@ecs.cmc.osaka-u.ac.jp</A>まで
   </BODY>
```
ここで sp20nnxx 部分は自分のアカウント名（ユーザ名）を入れる。このリンクではリンク部分をクリックすると Netscape Messenger が起動し（Netscape の場合）、sp20nnxx@ecs.cmc.osaka-u.ac.jp 宛にメイルを送る準備をしてくれる。クリックした人がメイルの内容を書いて送信すれば感想や意見が届く。
この場合にもリンク先が「@」を含んでいるので「"」で囲む必要がある。 mailto:sp20nnxx@ecs.cmc.osaka-u.ac.jp はＵＲＬの一種ある。
この例に見るように、リンクの示す先はハイパーテキストだけとは限らない（一般にはＵＲＩ）。次の画像の扱いのところでもその例を見ることになる。

画像の扱い

ハイパーテキストでは、テキスト（文字）データと同様に画像データが扱える。そのやりかたを見てみる。

簡単な画像の埋め込み

ハイパーテキスト中への簡単な画像の埋め込みを試みる。 photo.html というファイルを public_html ディレクトリーに作成する。その中に以下のように書き込む。

   <HTML>

   <HEAD>
   <TITLE>My photos</TITLE>
   </HEAD>

   <BODY>
   <DIV ALIGN=CENTER>
   <H2>写真集</H2>
   </DIV>

   <HR>

   <P>
   下の画像をクリックすると大きな画像が表示されます。
   </P>
   <A HREF=duck.jpeg><IMG SRC=duck-s.jpeg ALT="photo of duck"></A>カモ（メス）<BR>
   </BODY>

   </HTML>

イメージをハイパーテキスト中に張り込むタグは <IMG> タグである。ＩＭＧは image（画像）の意味。 IMG タグには終了タグは無いので注意すること。 IMG タグの属性として「SRC=duck-s.jpeg」が与えられている。 SRC は source（元になるもの）の意味で、張り込むべきイメージの在処を示す。ここで SRC の値が duck-s.jpeg となっているが、これは相対ＵＲＬである。 ALT という属性はイメージの表示機能が無いブラウザが使用するための情報で、画像がどうゆうものかの説明が書いてある。
更に <IMG> タグ全体が A タグで囲まれている。 A タグの HREF の値は duck.jpeg となっているので、画像（duck-s.jpeg）がクリックされるとブラウザは別の画像（duck.jpeg）を表示する仕組みになっている。
画像が必要なので duck-s.jpeg と duck.jpeg を public_html ディレクトリーに保存する（リンクを右クリックしてファイルに保存）。
これで用意が出来たはずなので、Netscape で photo.html を見てみる。ファイルとして開いても良いし、以下のＵＲＬで開いても良い。
```
   http://webserver/~sp20nnxx/photo.html
```
ＵＲＬ中の sp20nnxx は自分のアカウント名（ユーザー名）を入れる。テキストと小さな画像（duck-s.jpeg）が表示されたはず。
IMG タグは文字レベルのタグなので文字と同列に表示される。ただし文字の大きさと画像の高さは必ずしも一致しないので、凸凹した感じになる。画像は A タグで囲まれているのでリンクが張られている。画像の周りが青くなっているのはそのためである（文字の場合に下線付き青色文字になるのと同じ）。試しに画像をクリックすると大きな画像（duck.jpeg）が表示される。

画像の入れ方色々

上の例では画像の下端と文字の下端が同じ高さになっているが、この高さは IMG タグの ALIGN 属性で変更できる。 ALIGN の値として TOP, MIDDLE, BOTTOM を試してみると良い。先に書き込んだ画像張り込み部分の行を２行複製し（計３行となる）、３つの異なった ALIGN 属性を指定する。
```
   <A HREF=duck.jpeg><IMG SRC=duck-s.jpeg ALT="photo of duck" ALIGN=TOP></A>カモ（メス）
   <A HREF=duck.jpeg><IMG SRC=duck-s.jpeg ALT="photo of duck" ALIGN=MIDDLE></A>カモ（メス）
   <A HREF=duck.jpeg><IMG SRC=duck-s.jpeg ALT="photo of duck" ALIGN=BOTTOM></A>カモ（メス）<BR>
```
３行目以外は行の最後の <BR> タグを取り除いている点に注意。
- TOP は画像の上端と文字の上端の高さがそろう
- MIDDLE は画像の中央と文字の下端がそろう
- BOTTOM は画像の下端と文字の下端がそろう。 ALIGN 属性を指定しない場合には ALIGN の値は BOTTOM となっていることがわかる。
ALIGN の属性はこれ以外に LEFT と RIGHT がある。上の３行の内の上２行を消し、残った行の IMG タグの ALIGN 属性の値を RIGHT にしてみる。
```
   <A HREF=duck.jpeg><IMG SRC=duck-s.jpeg ALT="photo of duck" ALIGN=RIGHT></A>カモ（メス）<BR>
```
画像は画面の右端に移動したはず。
今度は ALIGN の値を LEFT にしてみる。
```
   <A HREF=duck.jpeg><IMG SRC=duck-s.jpeg ALT="photo of duck" ALIGN=LEFT></A>カモ（メス）<BR>
```
一見すると ALIGN=TOP としたのと同じように見えるが、以下の例を試してみると違いが分かるはず。
```
   <A HREF=duck.jpeg><IMG SRC=duck-s.jpeg ALT="photo of duck" ALIGN=TOP></A>カモ（メス）<BR>
   １行<BR>
   ２行<BR>
   ３行<BR>
   ４行<BR>
   ５行<BR>

   <HR>

   <A HREF=duck.jpeg><IMG SRC=duck-s.jpeg ALT="photo of duck" ALIGN=LEFT></A>カモ（メス）<BR>
   １行<BR>
   ２行<BR>
   ３行<BR>
   ４行<BR>
   ５行<BR>
```
ALIGN の値を LEFT にすると（画像の高さが文字の高さより高い場合）画像の右側の空きスペースが文字で埋められる。 TOP の場合には画像は完全に文字の扱いを受けるので、画像の右側は空白のままで次の文字行が画像の下に来る。この事情は ALIGN の値を RIGHT とした場合も同じである（つまり画像の左側の空白は文字で埋められる）。
写真集ということなのでもう少し画像を入れる。 flower-s.jpeg、 flower.jpeg、 tamamushi-s.jpeg、 tamamushi.jpeg を public_html ディレクトリーに保存し（リンクを右クリックして保存）、 photo.html の画像張り込み部分を以下のように変更する。
```
   <A HREF=duck.jpeg><IMG SRC=duck-s.jpeg ALT="photo of duck" ALIGN=MIDDLE></A>カモ（メス）
   <A HREF=flower.jpeg><IMG SRC=flower-s.jpeg ALT="photo of flower" ALIGN=MIDDLE></A>花（モクレン？）
   <A HREF=tamamushi.jpeg><IMG SRC=tamamushi-s.jpeg ALT="photo of tamamushi" ALIGN=MIDDLE></A>玉虫（玉虫は玉虫）
```
写真集らしくなっただろうか。
このような web ページの作り方は、大きな画像を直接 web ページに張り込むことを避けるためにしばしば用いられる。小さな画像のことを thumbnail （サムネイル、直訳すると親指のつめ）と呼ぶ。 Thumbnail はインデックスの役目をする。いきなり大きな画像を表示するのに比べて、ネットワークの負担を軽くする効果がある。
少し使い方は違うが画像を web ページ背景として使うことも可能である。余り良い例ではないが、下のように BODY タグの BACKGROUD 属性を指定すれば良い。
```
   <BODY BACKGROUND=duck-bright.jpeg>
```
背景用に duck-bright.jpeg を public_html に保存し photo.html を再表示してみる。
通常画像ファイルはブラウザの背景より小さいので、大きな壁に同じ柄のタイルを張るように、画像を縦と横方向に繰り返し張り付ける。
濃過ぎる背景は文字などを見難くするので注意が必要である。
ファイルがかなり増えてきたので、public_html に新しいディレクトリー photo を作り、 photo.html と全ての jpeg ファイルを photo ディレクトリーに移動する。移動後に photo.html の名前を index.html と変更する（この index.html ファイルは photo というディレクトリーにある点に注意）。
最後に public_html ディレクトリーの index.html から photo ディレクトリーにある index.html にリンクを張る。 public_html にある index.html の BODY 部分の最後近くに以下のような行を追加するとリンクが出来る。
```
   <H2><A HREF="photo/index.html">写真集</A></H2>

   <HR>

   ご意見ご感想は<A HREF="mailto:sp20nnxx@ecs.cmc.osaka-u.ac.jp">sp20nnxx@ecs.cmc.osaka-u.ac.jp</A>まで
   </BODY>
```
ここで A タグの HREF の値は photo/index.html となっているが、これも相対ＵＲＬの一種である。以前にも述べたが、ＵＲＬの中にはディレクトリー構造が書き込め、この場合今見ているハイパーテキスト（public_html ディレクトリーにある）から見て photo というディレクトリーの下の index.html というファイルを指し示している。 HREF の値に「/」が含まれているので「"」で囲む必要がある。
Web ページを構築してゆくとどうしても沢山のファイルが出来て来る。このように項目毎にディレクトリーを作成し整理するのは有効な方法である（ただし全て public_html より下のディレクトリー）。

テーブル

ハイパーテキストの中に表を作成するためのタグも用意されているので見てみる。

簡単な表

簡単な表を１つ作ってみよう。 public_html ディレクトリーに新たなファイル table.html を作り、以下のように入力する。

   <HTML>

   <HEAD>
   <TITLE>List of tags</TITLE>
   </HEAD>

   <BODY>
   <DIV ALIGN=CENTER>
   <H2>タグのまとめ</H2>
   </DIV>

   <TABLE>
   <TR>
     <TD>タグの名前</TD><TD>タグの効果</TD>
   </TR>
   <TR>
     <TD>Ａ</TD><TD>リンクを張る</TD>
   </TR>
   <TR>
     <TD>ＢＯＤＹ</TD><TD>ハイパーテキストの表示部分の範囲を示す</TD>
   </TR>
   <TR>
     <TD>ＢＲ</TD><TD>強制的に改行を入れる</TD>
   </TR>
   <TR>
     <TD>ＤＩＶ</TD><TD>任意のブロックを作る</TD>
   </TR>
   </TABLE>

   </BODY>

   </HTML>

ちゃんと入力し table.html を Netscape で表示すれば表が出て来るはず。

新たに出てきたタグは <TABLE> と </TABLE> で、表の始まりと終りを示すタグである。 <TR> と </TR> タグは、表の一行の始まりと終りを示すタグである。ＴＲは table row（表の行）の意味。また <TD> と </TD> は、その一行中の各列の要素を示すタグである。ＴＤは table data cell の意味。 TR および TD のタグは TABLE タグの中でしか出て来ないタグなので、単独で現われることは無い。
上の例では罫線が引かれていないので表になっているのが少し分かり難い。罫線を引くには TABLE タグの属性 BORDER の値を設定すれば良い。
```
   <TABLE BORDER=1>
```
BORDER の値は０以上の整数とすれば良い。数字が大きいほど太い罫線となる。

表全体を中央に持ってきたければ、TABLE 全体を DIV タグで囲んで ALIGN=CENTER の属性を付ければ良い。

   <DIV ALIGN=CENTER>
   <TABLE BORDER=1>
   <TR>
     <TD>タグの名前</TD><TD>タグの効果</TD>
   </TR>
   <TR>
     <TD>Ａ</TD><TD>リンクを張る</TD>
   </TR>
   <TR>
     <TD>ＢＯＤＹ</TD><TD>ハイパーテキストの表示部分の範囲を示す</TD>
   </TR>
   <TR>
     <TD>ＢＲ</TD><TD>強制的に改行を入れる</TD>
   </TR>
   <TR>
     <TD>ＤＩＶ</TD><TD>任意のブロックを作る</TD>
   </TR>
   </TABLE>
   </DIV>

表の列の数は TR タグ中の TD タグの数の最大値を見て自動的に決定される。試しに２列増やしてみる。

   <TR>
     <TD>タグの名前</TD><TD>タグの効果</TD>
     <TD>終了タグ</TD><TD>ブロック/文字 レベル</TD>
   </TR>
   <TR>
     <TD>Ａ</TD><TD>リンクを張る</TD>
     <TD></TD><TD>文字レベル</TD>
   </TR>
   <TR>
     <TD>ＢＯＤＹ</TD><TD>ハイパーテキストの表示部分の範囲を示す</TD>
     <TD></TD><TD>ブロックレベル</TD>
   </TR>
   <TR>
     <TD>ＢＲ</TD><TD>強制的に改行を入れる</TD>
     <TD>無し</TD><TD>ブロックレベル</TD>
   </TR>
   <TR>
     <TD>ＤＩＶ</TD><TD>任意のブロックを作る</TD>
     <TD></TD><TD>ブロックレベル</TD>
   </TR>

ここで見て分かるように、TABLE などのタグ中でも見かけ上の改行は無視される。上の例では、ＨＴＭＬファイルを編集する際に、タグの入れ方が分かりやすいよう、改行と行下げを行なっている。また TD タグの中身は空でも良い（上の例では表の３列目）。

表をレイアウトに使う

TABLE タグは表を作るためのタグであるが、レイアウト枠を作るのに使用されることもある。その例を photo/index.html で見てみよう。 photo/index.html を再度以下のように編集する。
```
   <DIV ALIGN=CENTER>
   <TABLE>
   <TR>
      <TD><A HREF=duck.jpeg><IMG SRC=duck-s.jpeg ALT="photo of duck"></A></TD>
      <TD>カモ（メス）</TD>
      <TD><A HREF=flower.jpeg><IMG SRC=flower-s.jpeg ALT="photo of flower"></A></TD>
      <TD>花（モクレン？）</TD>
   </TR>
   <TR>
      <TD><A HREF=tamamushi.jpeg><IMG SRC=tamamushi-s.jpeg ALT="photo of tamamushi"></A></TD>
      <TD>玉虫（玉虫は玉虫）</TD>
   </TR>
   </TABLE>
   </DIV>
```
元々あった IMG タグの ALIGN 属性は必要無いので消去している。写真と説明の組が２組横に並ぶように４列の表とした。文字の中に埋め込むのに比べ写真などのレイアウトの統一がとりやすくなる。

前回と今回で取り上げたタグはＨＴＭＬで使用できるタグの極く一部分のみである。また使用したタグの属性も極く一部の属性しか設定していない。市販されている解説書などを一度は読むことを勧める。

特に「スタイルシート」に付いては時間が限られているため触れなかった。今回使ったタグの属性の一部は、現在はスタイルシートを用いて設定することが推奨されている。

<補足>ＨＴＭＬ文書の書式など

この授業では出来るだけＨＴＭＬ言語の文法に馴染みやすいよう、最も簡単な書式のＨＴＭＬファイルのみを扱った。簡単化のために省略したことに付いてここで少し触れる。

ＨＴＭＬ文書の正式な書式に付いて

ＨＴＭＬ文書は前回触れたように、HTML, HEAD, BODY などのタグから成る構造を持っていた（ただしこれらのタグは省略も可能）。しかし正式には DOCTYPE 宣言という宣言を最初にしなければならない。 DOCTYPE 宣言の例は以下のようなものである。
```
   <!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN">
```
通常ブラウザはＵＲＬで指定されたファイルの名前の最後が「.html」あるいは「.htm」であるとＨＴＭＬで書かれたハイパーテキストとして処理する。しかし正式には、この DOCTYPE 宣言にて、そのファイルがどういう言語にて書かれているかが判断される。
上の例では、この DOCTYPE 宣言に続く文書がＨＴＭＬ言語を使って書かれており、その中でもバージョンが 4.01 の Transitional というものであることを示す。通常はこの通りの宣言を最初に書くと良い。 Transitional 以外には以下のものがある。
- Strict：指定したバージョンで使用が不適切と考えられるタグやタグの属性が使用出来ない。ＨＴＭＬの文法が最も厳格に適用される。
- Frameset：Transitional の機能に加えて「フレーム」の機能（この授業では触れなかった）を認める。「フレーム」の機能を使うときはこの宣言を使用しなければならない。
上の宣言に書かれていることを全て理解するのはそれほど容易で無く、それを常に書くことを強制するのもはばかられるため、この授業では省略した。なお通常のブラウザは、そのブラウザが製作された時点で最新のＨＴＭＬのバージョンに準拠していると考えられる。またそれより古いバージョンで使われ、最新のバージョンでは無くなったような機能も理解しようとする（当然最新バージョンの規格からは外れることになる）。その意味では Frameset より緩い規格で処理されると思われる。

ＨＴＭＬ文書の文法チェック

ＨＴＭＬ文書の文法については、前回の最初の部分で、ハイパーテキストを出来るだけ文法に気を付けて書き、出来上がったハイパーテキストをブラウザで見たときに、意図したように成っているかでしかチェック出来ないと述べた。これはＨＴＭＬ文書に対しては、コンパイラと呼べるものが無いことと関係している。しかし世の中にはＨＴＭＬ文書の文法チェックの手段が提供されている（ボランティアベースの活動だが）。
Web 経由で出来るものとしては例えば Another HTML-lint がある。この web サイトで「簡易ゲートウェイ」のリンクをたどり、「FILE」のラジオボタンをクリック、「参照」のボタンをクリック、チェックしたいＨＴＭＬファイルを「開く」。後は「チェック」のボタンをクリックする。
採点結果、ＨＴＭＬ言語としての間違いおよび余り良くない点、その解説などが表示される。解説はタグの使い方の勉強にもなるので便利である。エラーは大抵は必ず出る。エラーの深刻度は解説を自分で読んで判断するように。タグの使用法のひどい間違いが無い場合には、多少のエラーが出るのはあまり気にしなくとも良い場合がある。
ＨＴＭＬ文書を使って web ページを作る場合、ＨＴＭＬ文法的に正しい文書かどうかが気になるものである（気にならない人は上の説明は忘れて下さい）。このような文法チェックのサービスが提供されているのは大変有難い。

ＨＴＭＬ入門 その２

ＨＴＭＬ入門その２