| 目次 | 索引 |
|---|---|
今日の授業では、画像（イメージ）ファイルや複数のHTMLファイルを扱います。 この節では、イメージ編集ソフトGIMPの最低限の使い方と、NetscapeとXEmacsのウィンドウを複数開く方法について説明します。
GIMP とは、GNU Image Manipulation Program, つまりGNUのイメージ編集ソフトです。 ここでGNU（グニュー）とは、フリーソフト開発プロジェクトの名前です。 実は、テキストエディタXEmacsもGNUのソフトの一つです。
GIMPには本格的なイメージ編集機能がそろっていますが、ここでは簡単な線画を描くことにします。 興味のある人は、GIMPの参考書を読んでみてください。
gimp &
と入力します。
一度作成した画像ファイルをもう一度編集することもできます。 ファイルを開くには、"The GIMP"ウィンドウのメニューを"File"→"Open"とクリックしますと"Load Image"ウィンドウが開きますので、左の欄でディレクトリ名を、右の欄でファイル名をダブルクリックします。 ファイルに保存するには、画像ウィンドウの上で右クリックしてメニューを開き、"File"→"Save"とクリックします。
例えば、3つのホームページを同時に作成する場合、Netscapeのウィンドウが3つと、XEmacsのウィンドウが3つ開けると便利です。 しかし、フロントパネルの"N"アイコンも牛（ヌー）アイコンも、一つしか起動できないようになっています。
Netscapeのウィンドウを増やすには、メニューを「ファイル」→「新規作成」→「Navigatorウィンドウ」とクリックします。 増やしたウィンドウを閉じるには、メニューを「ファイル」→「閉じる」とクリックします。 すべてのウィンドウを閉じるには、メニューを「ファイル」→「終了」とクリックします。
XEmacsのウィンドウを増やすには、メニューを「ファイル」→「新規フレーム」とクリックします。 増やしたウィンドウを閉じるには、メニューを「ファイル」→「フレーム削除」とクリックします。 すべてのウィンドウを閉じるには、メニューを「ファイル」→「XEmacs終了」とクリックします。
以前、ホームページの基本は文章（テキスト）だと説明しました。 では、画像（イメージ）は単なる飾りかといいますと、そうではありません。
などの目的で用いられた画像は、ホームページの中で重要な役割を果たします。
画像が埋め込まれたホームページを作るには、画像ファイルを用意する必要があります。 画像ファイルを自分で作るには、
などの方法があります。 他人の作成した画像ファイルを利用するには、
などしてください。
画像ファイルが用意できましたら、次にその形式を確認します。 画像ファイルには、画像の特徴に応じた数々の形式があります。 しかし、ホームページに埋め込めるのは、次の表の通り、そのわずかです。
GIMPなど、大抵のイメージ編集ソフトには、画像形式の変換機能があります。 必要に応じてこの機能を利用してください。
最後に、画像ファイルをHTMLファイルからアクセスできるところに置きます。 HTMLファイルと画像ファイルを同じディレクトリに置くのが簡単ですので、今日の授業ではそのようにします。
Netscapeでは、ホームページの画像の部分で右クリックし、「画像を名前を付けて保存」をクリックしますと、画像ファイルがコピーできます。 しかし、それを自分のホームページに埋め込むのはトラブルのもとです。 自由に使ってもよいと明記されている場合を除き、他人の画像ファイルは利用しないほうがよいでしょう。
本や雑誌などは著作権法などで明確に保護されています。 雑誌に載っている写真をスキャナで取り込んで自分のホームページに埋め込む、などということはしないでください。
GIFは、ホームページ作成に最もよく使われている画像形式です。 しかしながら、特許に関わる問題があり、誰でも自由にGIFファイルが作れる状況はなくなると予想されます。 これから画像ファイルを作成するときは、JPEGかPNGを用いるとよいでしょう。
画像ファイルが用意できましたら、次にHTMLドキュメントを書きます。
画像を埋め込むためのタグは
<img>
です。
このタグに終了タグはありません。
画像ファイルの場所は
src属性
で指定します。
HTMLファイルと画像ファイルが同じディレクトリにある場合、この属性の値は画像ファイルのファイル名です。
ブラウザは、
<img>
タグの書かれた位置に、指定された画像ファイルの画像を表示します。
なお、どんなに大きくても、ブラウザは画像をインライン要素として（文字のように）取り扱います。
<p> リンクを記号<img src="link-arrow.gif">で表しますと、 リンクの構造は図のようになります。 </p> <div style="text-align: center"> <img src="link-image.gif"> </div> <p> 次に、ディレクトリを用意します。 </p>
で表しますと、リンクの構造は図のようになります。
一般に画像ファイルの転送はネットワークに負担をかけます。 画像が大きければ大きいほど、色の数が多ければ多いほど、ネットワークを混雑させることになります。 本当にその画像がそのホームページに必要なのか、画像が大きすぎないか、色の数が多すぎないか、ホームページの公開の前によく考えてください。
<img>
タグでは、
src
属性があれば画像を埋め込むことができました。
この他に、なるべく指定したほうがよい属性があります。
alt属性
は、テキストブラウザや、画像を表示しない設定でのブラウザで、画像の代わりに表示するテキストを指定します。
この属性の値は、画像が何であるかを示す簡単な説明文にしてください。
このテキストにタグなどは入れられません。
規格の上では、
alt
属性は必ず書かなくてはいけません。
width属性
と
height属性
は、それぞれ画像の幅と高さのピクセル（画素）数を指定します。
もしこれらの属性が指定されていますと、ブラウザはあらかじめその大きさの範囲を画像用に確保できます。
他のテキストなどを表示した後で、画像ファイルを読み込み、その範囲に画像を埋め込みます。
指定されていませんと、画像の大きさが分かりませんので、ブラウザは仮の範囲を確保します。
他のテキストなどを表示した後で、画像ファイルを読み込み、この時点で画像の大きさが分かりますので、一度表示した他のテキストなどを消して、すべてを表示し直すことになります。
<p>
リンクを記号<img src="link-arrow.gif" alt="A link arrow"
width="50" height="20">で表しますと、
リンクの構造は図のようになります。
</p>
<div style="text-align: center">
<img src="link-image.gif" alt="A link image"
width="200" height="300">
</div>
<p>
次に、ディレクトリを用意します。
</p>
上の例では大きな画像を中央に揃えました。
text-align
プロパティで左に揃えますと右側が大きくあきますし、右に揃えますと左側が大きくあきます。
floatプロパティ
を用いますと、このあいている範囲にテキストを流し込むことができます。
以下の要領で、
<img>
タグに指定してください。
<img src="link-image.gif" alt="A link image"
width="200" height="300"
style="float: left">
<p>
リンクを記号<img src="link-arrow.gif" alt="A link arrow"
width="50" height="20">で表しますと、
リンクの構造は図のようになります。
</p>
<p>
次に、ディレクトリを用意します。
</p>
で表しますと、リンクの構造は図のようになります。
テキストの流し込みを解除するには、
clearプロパティ
を用います。
以下の要領で、
<br>
タグに指定してください。
| プロパティと値 | 画像の位置 |
|---|---|
clear: left |
左側 |
clear: right |
右側 |
clear: none |
解除しない |
<img src="link-image.gif" alt="A link image"
width="200" height="300"
style="float: left">
<p>
リンクを記号<img src="link-arrow.gif" alt="A link arrow"
width="50" height="20">で表しますと、
リンクの構造は図のようになります。
<br style="clear: left">
</p>
<p>
次に、ディレクトリを用意します。
</p>
で表しますと、リンクの構造は図のようになります。
ホームページでは、背景に画像を表示することもできます。 背景画像 （壁紙）では、画像が指定された範囲にタイル状に並べて表示されます。
background-imageプロパティ
を用いますと、背景画像が指定できます。
このプロパティの値は、
url(
filename
)
という形式です。
ここで、
filename
は画像ファイルのファイル名です。
<html>
<head>
<title>Image test</title>
<style type="text/css">
<!--
body {background-image: url(triangle.gif)}
-->
</style>
</head>
<body>
<p>
Good morning!<br>
Good morning!<br>
Good morning!
</p>
</body>
</html>
背景画像が目立ちすぎますと、その上の文字が読みにくくなります。 背景画像はあまり目立たないものを使ってください。
<html>
<head>
<title>Image test</title>
<style type="text/css">
<!--
body {background-image: url(zigzag.gif)}
-->
</style>
</head>
<body>
<p>
Good morning!<br>
Good morning!<br>
Good morning!
</p>
</body>
</html>
コンピュータが現れる以前、ドキュメント（テキスト）というものは、1ページ目から順番に構成するしかありませんでした。 それが現代では、コンピュータを用いることによって、数多くのドキュメント同士をリンクという構造で網の目のように結び付けることが可能になりました。 この、リンクで構成されるドキュメントの構造を、 ハイパーテキスト （ hypertext ）とよびます。 今のハイパーテキストは、コンピュータ・ネットワークを経由して、異なるコンピュータのドキュメント同士も結び付けているということを意識してください。
HTMLでリンクを作成するには、アンカーというものを指定します。 アンカー （ anchor ）とは、リンクの始点と終点をまとめて意味する用語です。 ここでは、リンクの始点を 始点アンカー （ source anchor ）、リンクの終点を 終点アンカー （ destination anchor ）とよぶことにします。
ブラウザは、
<a>
〜
</a>
に囲まれた部分をアンカーと見なします。
ただし、単に
<a>
〜
</a>
で囲んでも何も起りません。
始点と終点を指定して、はじめてリンクになるのです。
はじめに、テキストからドキュメントへのリンクを作成します。
まず、始点アンカーとなるテキストを、
<a>
〜
</a>
で囲みます。
そして、このタグに
href属性
を指定します。
この属性の値は、終点アンカーとなるHTMLドキュメントのファイル名です。
ブラウザは、始点アンカーであるテキストを、色を変えたり下線を引いたりして、目立つように表示します。 ユーザがその部分をマウスでクリックするなどして選択しますと、ブラウザは終点アンカーであるドキュメントを表示します。
<p> 今まで作成したホームページは次の通りです。 </p> <ul> <li><a href="ex2.html">演習2</a></li> <li><a href="ex3.html">演習3</a></li> <li><a href="ex4.html">演習4</a></li> </ul>
上の例では、テキストからドキュメントへリンクを張りました。 HTMLでは、画像をアンカーにすることができます。 つまり、次の4種類のリンクが作成できます。
画像を始点アンカーにするには、
<img>
タグを
<a>
〜
</a>
で囲み、
href
属性を指定します。
始点アンカーである画像は、ボーダーに色が付くなど目立つように表示されます。
画像を終点アンカーにするには、
href
属性の値を画像ファイルのファイル名にします。
ユーザが始点アンカーをクリックするなどして選択しますと、ブラウザはその画像のみを表示します。
<p>
<a href="link-image.gif">画像に飛ぶ。</a>
右はアイコンのつもり。
<a href="link-image.gif">
<img src="link-arrow.gif" alt="A link arrow"
width="50" height="20">
</a>
</p>
画像を始点アンカーにするとき、
<a href="..."> <img ...> </a>
としますと、画像の右下に短いアンダーラインが付くことがあります。 このアンダーラインを取り除くには、
<a href="..."> <img ...></a>
としてください。
特に設定をしない限り、グラフィカルブラウザは始点アンカーのテキストをアンダーライン付きで青く表示します。 ただし、対応する終点アンカーに最近訪れていれば、青ではなく紫です。 始点アンカーが画像なら、青か紫のボーダーが付きます。
スタイルシートを用いますと、青や紫という表示規則が変更できます。 ただし、「（最近）訪れていない終点アンカーへの始点アンカー」と「そうでない始点アンカー」を区別するために、普通のクラスではなく、疑似クラスというものを使います。
疑似クラス （ pseudo-class ）とは、タグの種類の細分ではなく、ブラウザから見た状態の分類です。 最近訪れたなどの状態を意味するクラスというわけです。
:link疑似クラス
は、最近訪れていない終点アンカーへの始点アンカーを意味します。
:visited疑似クラス
は、最近訪れた終点アンカーへの始点アンカーを意味します。
ともに、
<a>
タグに対してのみ使われます。
スタイルシートでは、
a:link
または
a:visited
というセレクタになります。
例えば、始点アンカーからアンダーラインを消し、訪れていなければ黄色、訪れていれば白という規則にする場合、スタイルシートは
a:link {color: yellow; text-decoration: none}
a:visited {color: white; text-decoration: none}
となります。
<html>
<head>
<title>Exercises</title>
<style type="text/css">
<!--
a:link {color: yellow; text-decoration: none}
a:visited {color: white; text-decoration: none}
-->
</style>
</head>
<body>
<p>
今まで作成したホームページは次の通りです。
</p>
<ul>
<li><a href="ex2.html">演習2</a></li>
<li><a href="ex3.html">演習3</a></li>
<li><a href="ex4.html">演習4</a></li>
</ul>
</body>
</html>
画像を始点アンカーにしてボーダーを消す場合、スタイルシートを
a:link {color: yellow; border-style: none}
a:visited {color: white; border-style: none}
などと書きます。
ただし、Netscape 4.xではこの方法でボーダーは消えません。
規格の上では勧められませんが、例えば
<img>
タグの
border
属性の値を0にしてください。
リンクの構造を利用して、世界一周をするホームページを作成してください。 以下の例を参考にして、世界の4つの都市、国、地域を考え、その地理的な位置関係を反映するようにリンクを張ってください。 作成するHTMLファイルは4つになります。 それぞれのHTMLドキュメントでは、リンクの指定以外は、簡単なテスト文を書くだけで十分です。 ただし、少なくとも1つのHTMLドキュメントの少なくとも1か所に画像（または背景画像）を用いてください。
今日の演習7に従ってホームページを作成し、そのファイル名をkonishi@twcu.ac.jpあてにメールで報告してください。 メールには、学生番号、氏名、科目名、授業の日付け（5/30）を明記してください。