私のホームページへ - 前の授業へ - 次の授業へ

情報処理IIA（HTML入門）第7回

目次
  1. ファイルの種類
  2. 画像
  3. リンク
  4. 演習7
  5. レポート課題

ファイルの種類

ファイルには色々な種類があります。 ホームページ作成に関しては、

が特に重要です。 ブラウザを始めとする多くのアプリケーションは、ファイル名の拡張子を見てファイルの種類を判定します。 ブラウザは、少なくともこの3種類のファイルについては、その内容を適切に表示します。

画像

画像の効果

画像は非常に強力な表現手段です。 地図やグラフ、写真などはとても文字では表現しきれません。 また、アイコンを用いて直感的に物事を表すこともできます。 文字参照を使っても表示できないような特殊な記号も、画像なら必ず表示できます。 画像を背景に用いると効果的なホームページが作れます。

画像の埋め込み

ホームページに画像を埋め込むためには、まずその画像ファイルを用意しなくてはいけません。 xpaint などを使って画像ファイルを作りましょう。 次に、画像ファイルをどこに保存するかを考えます。 ホームページに埋め込むわけですから、~/WWW ディレクトリの中か、より下のディレクトリの中に保存します。 ここでは仮に、~/WWW/info2a ディレクトリの中に、prev10.gif というファイル名で保存したとします。

続いて、HTMLファイルを作成します。 HTMLファイルをどこに保存するかを決めましたら、画像ファイルのパス名を調べます。 具体的には、HTMLファイルが属しているディレクトリをカレントディレクトリとしたときの、画像ファイルの相対パス名です。 例えば、ファイル構成が次のようになっていたとき、 

   ホームディレクトリ(~/)
             |
    +-----+--+--+
    |     |     |
   Mail  WABI  WWW
    :     :     |
   +----------+-+---------------+
   |          |                 |
index.html  info1             info2a
              |                 |
     +--------+-+         +-----+----+
     |          |         |          |
 ren1.html  ren2.html  ex1.html  prev10.gif

ファイル index.html に画像ファイル prev10.gif の画像を埋め込みたいときは、パス名は info2a/prev10.gif となります。 ren1.html にこの画像を埋め込みたいときは、パス名は ../info2a/prev10.gif です。 ex1.html にこの画像を埋め込みたいときは、パス名は単に prev10.gif です。

パス名が分かりましたら、HTMLファイルの中で、画像を埋め込みたいところにタグ<img src="path">を書きます。 ここで、pathは今求めたパス名です。 このタグに終了タグはありません。 これでブラウザは、<img> タグの書かれた位置に、指定された画像ファイルの画像を表示します。 なお、どんなに大きくても、ブラウザは画像を文字の一種として取り扱います。

例
index.html
<p>昨日、アイコン<img src="info2a/prev10.gif">を作った。</p>
昨日、アイコンnext 10を作った。

注意： 画像に限りませんが、ホームページの作成の際には著作権に注意する必要があります。 本や雑誌に載っている絵や図をスキャナーなどで画像ファイルにし、それを自分のホームページに張り付けて公開するのは、出版元に断らない限り法に触れる行為だと思ってください。

注意： 一般に画像ファイルの転送はネットワークに負担をかけます。 画像が大きければ大きいほど、色の数が多ければ多いほど、ネットワークを混雑させることになります。 本当にその画像がそのホームページに必要なのか、画像が大きすぎないか、色の数が多すぎないか、ホームページの公開の前によく考えてください。

代替テキストと画像の大きさ

<img>タグでは、src属性があれば画像を埋め込むことができました。 この他に、ぜひ書いた方がよい属性があります。

alt属性は、画像が表示できないブラウザや、画像を表示しないと設定しているブラウザで、画像の代わりに表示する文字列を指定します。 alt属性の値には、画像が何であるかを示す簡単な説明文を書いてください。 この文字列にタグなどは入れられません。 規格上、alt属性は書かなくてはいけないことになっています。

width属性とheight属性は、それぞれ画像の幅と高さのピクセル（画素）数を指定します。 もしこれらの属性が指定されていますと、ブラウザはあらかじめその大きさの範囲を画像用に確保できます。 他の文字などを表示した後で、画像ファイルを読み込み、その範囲に画像を埋め込みます。 指定されていませんと、画像の大きさが分かりませんので、ブラウザは仮の範囲を確保します。 他の文字などを表示した後で、画像ファイルを読み込み、この時点で画像の大きさが分かりますので、一度表示した他の文字などを消して、すべてを表示し直すことになります。

例
<img src="citymap.gif" alt="city map"
     width="600" height="400">

背景画像

ホームページでは、画像ファイルを背景として表示することもできます。 背景画像（壁紙）は、指定された範囲に、タイル状に並べて表示されます。

背景画像の指定は、style 属性の値に書きます。 具体的には、style="background-image: url(path)" を、<body>, <div> など範囲を示すタグのの開始タグの中に書きます。

例
<body style="backbround-image: url(../images/triangle.gif)">
<p>
The quick brown fox jumps over the lazy dog.
</p>
<div style="background-image: url(../images/twotone.gif)">
The<br> quick<br> brown<br> fox<br>
jumps<br> over<br> the<br> lazy<br> dog.
</div>
</body>
The quick brown fox jumps over the lazy dog.

The
quick
brown
fox
jumps
over
the
lazy
dog.

注意： 背景画像が目立ちすぎますと、その上の文字が読みにくくなります。 あまり目立たない背景画像を使うのが良いのですが、文字に背景色を指定する方法もあります。

例
<body style="backbround-image: url(zigzag.gif)">
<p>
The quick brown fox jumps over the lazy dog.
</p>
<p style="background-color: aqua">
The quick brown fox jumps over the lazy dog.
</p>
</body>
The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

リンク

リンク

WWW上には、HTMLファイル、プレーンテキストファイル、画像ファイルなど、色々な情報が散在しています。 そしてそれらは、リンクとよばれる方法で結び付けられています。 ユーザは、マウスでクリックするなどしてリンクをたどり、やがて必要な情報にたどり着くわけです。 この結び付け方を、ここではリンク構造とよびます。

リンクの作成

リンクを作成するには、アンカーというものを指定します。 アンカー（anchor）とは、リンクの始点と終点をまとめて意味する用語です。 ブラウザは、<a>〜</a>に囲まれた部分をアンカーと見なします。 ただし、単に<a>〜</a>で囲んでも何も起りません。

リンクの始点となるアンカーを作成するには、href属性を用います。 具体的には、リンクの始点となる部分を<a href="path">〜</a>で囲みます。 ここで、path はリンクの終点となるファイルのパス名です。 パス名の求め方は、画像ファイルの時と同様です。 例えば、 

   ホームディレクトリ(~/)
             |
    +-----+--+--+
    |     |     |
   Mail  WABI  WWW
    :     :     |
   +----------+-+---------------+
   |          |                 |
 images   index.html          survey
   |                            |
   |           +----------+-----+----+
   |           |          |          |
wall.gif    data.txt  graph.gif  table.html

リンクの始点がファイル index.html の中で、リンクの終点がファイル table.html のときは、パス名を survey/table.html とします。

ブラウザは、リンクの始点となる部分を、色を変えたり下線を引いたりして、目立つように表示します。 ユーザがその部分をマウスでクリックするなどして選択すると、ブラウザはリンクの終点に指定されたファイルを表示します。

例
index.html
<p>
この世論調査の詳しいデータについては以下の資料を見てください。
</p>
<ul>
  <li><a href="survey/data.txt">データのみ</a>（テキスト）</li>
  <li><a href="survey/table.html">表</a>（HTML形式）</li>
  <li><a href="survey/graph.gif">グラフ</a>（GIF形式）</li>
</ul>
この世論調査の詳しいデータについては以下の資料を見てください。

・データのみ（テキスト）
・表（HTML形式）
・グラフ（GIF形式）

画像とリンク

画像の説明の中で、ブラウザは画像を一種の文字と見なしていると言いました。 画像は、テキストと同様に、リンクの始点に指定できます。 リンクの始点に指定された画像は、色のついた枠で囲まれるなどして、そうでない画像と区別されます。 ユーザは、画像をクリックするなどして、リンクの終点を訪れることになります。

リンクの終点の種類をアイコンで表し、アイコンの画像をリンクの始点にすると、リンク構造が直感的に分かりやすくなるでしょう。 また、画像の縮小版を始点のアンカーにし、詳しく見たかったらクリックしてくださいと案内するのにも使えます。

例
<a href="slide46.html">
<img src="../images/prev10.gif">
</a>
10ページ戻る
<a href="slide66.html">
<img src="../images/next10.gif">
</a>
10ページ進む
prev 10 10ページ戻る next 10 10ページ進む

演習7

以下の例と同様な（またはより複雑な）リンク構造を考え、この構造にしたがってHTMLファイルを作成してください。 作成するHTMLファイルは複数になります。 それぞれのHTMLファイルでは、リンクの指定以外は、簡単なテスト文を書くだけで十分です。 ただし、少なくともひとつのHTMLファイルの少なくとも一か所に画像（または背景画像）を用いてください。 できれば、画像ファイルを置くディレクトリとHTMLファイルを置くディレクトリは別にしてください。

例
future.html
未来の私

私の未来がどうなっているのか見てみましょう。

・2010年の私
・2020年の私
・2030年の私
in2010.html
2010年の私

毎日毎日仕事が忙しい！10年ぐらいしたら少しは楽になるかな…。
「未来の私」へ｜ 10年後へ
in2020.html
2020年の私

仕事が忙しい！10年前は楽だった。10年後はどうなるんだろう？
「未来の私」へ｜ 10年前へ｜ 10年後へ
in2030.html
2030年の私

急に暇になった。退屈。10年前は良かったな…。
「未来の私」へ｜ 10年前へ

レポート課題

今日の演習7にしたがってHTMLファイルを作成し、konishi@twcu.ac.jpあてにメールでそのURL/URIを報告してください。 メールには、学生番号、氏名、科目名、授業の日付けを明記してください。

私のホームページへ - 前の授業へ - 次の授業へ
このページの複製は、東京女子大学学内に限り許可します。 このページへのリンクを許可します。
2000年6月1日更新
製作・著作：小西善二郎<konishi@twcu.ac.jp>