今日の授業では、イメージ（画像）ファイルや複数のHTMLファイルを扱います。 この節では、イメージ編集ソフトGIMPの最低限の使い方と、SafariとJeditのウィンドウを複数開く方法について説明します。
GIMP とは、GNU Image Manipulation Program, つまりGNUのイメージ編集ソフトです。 ここでGNU（グニュー）とは、フリーソフト開発プロジェクトの名前です。
GIMPには本格的なイメージ編集機能がそろっていますが、ここでは簡単な線画を描くことにします。 興味のある人は、GIMPの参考書を読んでみてください。
一度作成したイメージ・ファイルをもう一度編集することもできます。 ファイルを開くには、"The GIMP"ウィンドウのメニューを"File"→"Open"とクリックしますと"Load Image"ウィンドウが開きますので、左の欄でフォルダ名を、右の欄でファイル名をダブルクリックします。 ファイルに保存するには、イメージ・ウィンドウの上で右クリックしてメニューを開き、"File"→"Save"とクリックします。
例えば、3つのホームページを同時に作成する場合、Safariのウィンドウが3つと、Jeditのウィンドウが3つ開けると便利です。 しかし、DockのSafariアイコンもJeditアイコンも、一つしか起動できないようになっています。
Safariのウィンドウを増やすには、DockのSafariアイコンをクリックし、メニュー・バーを「ファイル」→「新規ウィンドウ」とクリックします。 Jeditのウィンドウを増やすには、DockのJeditアイコンをクリックし、メニュー・バーを「ファイル」→「新規」とクリックします。
ホームページでは、ブラウザ・ウィンドウのタイトルバーに文字列が追加できます。 この文字列を、ホームページの タイトル （ title ）とよびます。 タイトルは、ホームページの内容を表わすことに使います。 ブックマークなどでも使われますので、簡素で内容のよく分かるタイトルが望ましいです。 なお、規格の上ではタイトルは必ず書かなくてはいけません。
ブラウザは、
<title>
〜
</title>
に囲まれた部分をタイトルと見なします。
<title>Greeting</title> <p>Good afternoon!</p>
<title>
〜
</title>
の中は単純な文字列に限ります。
タグは入れないでください。
これまでは、テキスト・エディタ（Jedit）を使って文字やタグを並べて書けば、ブラウザ（Safari）が規則に従ってホームページを表示するというように理解していたと思います。 本当は、文字やタグを並べて書くことは、データを作成することなのです。 ブラウザは、このデータを処理してホームページを表示しているのです。 これからは、データであることを強調するために、 HTMLドキュメント （ HTML document ）という言葉を使います。
HTMLドキュメントは2つの要素から構成されます。 前半は ヘッダ （ document head ）とよばれる部分、後半は 本文 （ document body ）とよばれる部分です。 ヘッダの主な内容はタイトルです。 タイトル以外にも、種々の設定情報が追加されることがあります。 それら以外の全ての要素は本文に含まれます。
ブラウザは、
<html>
〜
</html>
に囲まれた部分をHTMLドキュメントと見なします。
<head>
〜
</head>
に囲まれた部分をヘッダと見なします。
<body>
〜
</body>
に囲まれた部分を本文と見なします。
以上の話をまとめますと、HTMLドキュメントは
<html> <head> <title>title</title> other information... </head> <body> document body... </body> </html>
という雛形をもつことになります。
規格の上では、
<html>
,
<head>
, および
<body>
は開始タグも終了タグも省略できます。
きちんとしたHTMLドキュメントを作成したければ、タグは省略しないほうがよいでしょう。
<html> <head> <title>Greeting</title> </head> <body> <p>Good afternoon!</p> </body> </html>
ホームページを作っていると、書きかけの文章やちょっとしたメモなど、表示してほしくはないけれどファイルには残しておきたい部分ができたりします。
ブラウザは、
<!--
からそれ以降の最初の
-->
までを
コメント
（
comment
）（注釈）と見なします。
コメントは表示されません。
したがって、表示してほしくない部分は、
<!--
〜
-->
で囲めばよいのです。
<h2>はじめに</h2> <!-- ここは最後に書く。 --> <h2>JavaScriptの基本</h2> <!-- この節では、 まず、 -->
広い範囲をコメントにするには注意が必要です。
<h2>はじめに</h2> <!-- ここは最後に書く。 --> <h2>JavaScriptの基本</h2> <!-- この節では、 まず、 -->
この全体をコメントにするつもりで、
<!-- <h2>はじめに</h2> <!-- ここは最後に書く。 --> <h2>JavaScriptの基本</h2> <!-- この節では、 まず、 --> -->
と書きましても、「JavaScriptの基本」が表示されてしまいます。
これは、1行目から始まったコメントが、9行目の
-->
ではなく、3行目の
-->
で終わりと見なされたからです。
タグをたくさん使うようになりますと、開始タグと終了タグの対応が分かりにくくなってきます。 終了タグを忘れて思わぬ表示になったりしないためにも、タグで囲まれている範囲が一目で分かるようにしたいものです。
多くのプログラミング言語では、 インデント （ indent ）（字下げ）を用いてプログラムの構造を見やすくしています。 この方法はHTMLにも通用します。 プログラムのようにインデントをすると、開始タグと終了タグの対応が分かりやすくなります。
インデントの規則は、ホームページの作者が自分で分かりやすいように決めることです。 この授業での例を参考にして、自分なりの規則を作ってください。
以前、ホームページの基本はテキスト（文章）だと説明しました。 では、イメージ（画像）は単なる飾りかといいますと、そうではありません。
などの目的で用いられたイメージは、ホームページの中で重要な役割を果たします。
イメージが埋め込まれたホームページを作るには、イメージ・ファイルを用意する必要があります。 イメージ・ファイルを自分で作るには、
などの方法があります。 他人の作成したイメージ・ファイルを利用するには、
などしてください。
イメージ・ファイルが用意できましたら、次にその形式を確認します。 イメージ・ファイルには、イメージの特徴に応じた数々の形式があります。 しかし、ホームページに埋め込めるのは、次の表の通り、そのわずかです。
GIMPなど、大抵のイメージ編集ソフトには、イメージ形式の変換機能があります。 必要に応じてこの機能を利用してください。
最後に、イメージ・ファイルをHTMLファイルからアクセスできるところに置きます。 HTMLファイルとイメージ・ファイルを同じフォルダに置くのが簡単ですので、今日の授業ではそのようにします。
Safariでは、ホームページのイメージの部分でcontrolキーを押しながらクリックし、「画像を新規ウインドウで開く」を選択し、「ファイル」→「別名で保存」とクリックしますと、イメージ・ファイルがコピーできます。 しかし、それを自分のホームページに埋め込むのはトラブルのもとです。 自由に使ってもよいと明記されている場合を除き、他人のイメージ・ファイルは利用しないほうがよいでしょう。
本や雑誌などは著作権法などで明確に保護されています。 雑誌に載っている写真をスキャナで取り込んで自分のホームページに埋め込む、などということはしないでください。
GIFは、ホームページ作成に最もよく使われているイメージ形式です。 しかしながら、特許に関わる問題があり、誰でも自由にGIFファイルが作れる状況はなくなると予想されます。 これからイメージ・ファイルを作成するときは、JPEGかPNGを用いるとよいでしょう。
イメージ・ファイルが用意できましたら、次にHTMLドキュメントを書きます。
イメージを埋め込むためのタグは
<img>
です（IMaGe）。
このタグに終了タグはありません。
ただし、単に
<img>
と書いても何も起りません。
イメージ・ファイルのファイル名が
filename
のときは、
<img src="filename">
と書きます。
ここで、タグの書式がこれまでと異なることに注意してください。
タグが
<
tag att
="
value
">
という形になっています。
この
att
は
属性
（
attribute
）とよばれるもの（の名前）です。
HTMLでは、属性を用いてタグにより詳しい情報を与えます。
このタグの形は、
att
属性の値を
value
にするという意味です。
<img>
タグの場合は、
src属性
で、イメージ・ファイルの場所（SouRCe）を指定します。
HTMLファイルとイメージ・ファイルが同じフォルダにある場合、この属性の値はイメージ・ファイルのファイル名です。
ブラウザは、
<img>
タグの書かれた位置に、指定されたイメージ・ファイルのイメージを表示します。
なお、どんなに大きくても、ブラウザはイメージを文字のように取り扱います。
<p> 次の地図を見てください。 <br> <img src="inokashira.png"> <br> 井の頭公園へ行くには、 <img src="circle1.png">吉祥寺駅で下車します。 </p>
吉祥寺駅で下車します。
一般にイメージ・ファイルの転送はネットワークに負担をかけます。 イメージが大きければ大きいほど、色の数が多ければ多いほど、ネットワークを混雑させることになります。 本当にそのイメージがそのホームページに必要なのか、イメージが大きすぎないか、色の数が多すぎないか、ホームページの公開の前によく考えてください。
<img>
タグでは、
src
属性があればイメージを埋め込むことができました。
この他に、なるべく指定したほうがよい属性があります。
alt属性
は、イメージが表示できない（あるいは表示しない設定になっている）ブラウザで、イメージの代わり（ALTernate）に表示するテキストを指定します。
この属性の値は、イメージが何であるかを示す簡単な説明文にしてください。
このテキストにタグなどは入れられません。
規格の上では、
alt
属性は必ず書かなくてはいけません。
width属性
と
height属性
は、それぞれイメージの幅と高さのピクセル（画素）数を指定します。
これらの属性が指定されていますと、ブラウザはイメージの配置をすぐに決められますので、能率よくホームページが表示できます。
<p>
次の地図を見てください。
<br>
<img src="inokashira.png" alt="井の頭公園の地図"
width="160" height="120">
<br>
井の頭公園へ行くには、
<img src="circle1.png" alt="(1)"
width="16" height="16">吉祥寺駅で下車します。
</p>
コンピュータが現れる以前、ドキュメント（テキスト）というものは、1ページ目から順番に構成するしかありませんでした。 それが現代では、コンピュータを用いることによって、数多くのドキュメント同士をリンクという構造で網の目のように結び付けることが可能になりました。 この、リンクで構成されるドキュメントの構造を、 ハイパーテキスト （ hypertext ）とよびます。 今のハイパーテキストは、コンピュータ・ネットワークを経由して、異なるコンピュータのドキュメント同士も結び付けているということを意識してください。
リンクの構造には色々なものが考えられます。 例えば、リンクに「次の内容」という役割を与えますと、直線的なドキュメントが構成できます。 この構造は、長い文章を分割したときなどに使われます。
リンクに「詳しい内容」という役割を与えますと、枝分かれするドキュメントが構成できます。 この構造は、目次から本文へ進むときや、文章から用語解説へ進むときなどに使われます。
リンクに「表現の変更」という役割を与えますと、双方向のドキュメントが構成できます。 この構造は、英語版と日本語版を対応させるときなどに使われます。
HTMLでリンクを作成するには、アンカーというものを指定します。 アンカー （ anchor ）とは、リンクの始点と終点をまとめて意味する用語です。 ここでは、リンクの始点を 始点アンカー （ source anchor ）、リンクの終点を 終点アンカー （ destination anchor ）とよぶことにします。
ブラウザは、
<a>
〜
</a>
に囲まれた部分をアンカー（Anchor）と見なします。
ただし、単に
<a>
〜
</a>
で囲んでも何も起りません。
始点と終点を指定して、はじめてリンクになるのです。
はじめに、テキストからドキュメントへのリンクを作成します。
まず、始点アンカーとなるテキストを、
<a>
〜
</a>
で囲みます。
そして、このタグに
href属性
を指定します（Hyper REFerence）。
この属性の値は、終点アンカーとなるHTMLドキュメントのファイル名です。
ブラウザは、始点アンカーであるテキストを、色を変えたり下線を引いたりして、目立つように表示します。 ユーザがその部分をマウスでクリックするなどして選択しますと、ブラウザは終点アンカーであるドキュメントを表示します。
<p> 東京都下の公園 </p> <ul> <li><a href="inokashira-park.html">井の頭公園</a></li> <li><a href="koganei-park.html">小金井公園</a></li> <li><a href="jindai-park.html">神代植物公園</a></li> </ul>
上の例では、テキストからドキュメントへリンクを張りました。 HTMLでは、イメージをアンカーにすることができます。 つまり、次の4種類のリンクが作成できます。
イメージを始点アンカーにするには、
<img>
タグを
<a>
〜
</a>
で囲み、
href
属性を指定します。
始点アンカーであるイメージは、ボーダーに色が付くなど目立つように表示されます。
（ブラウザによっては、ボーダーに色は付きません。）
イメージを終点アンカーにするには、
href
属性の値をイメージ・ファイルのファイル名にします。
ユーザが始点アンカーをクリックするなどして選択しますと、ブラウザはそのイメージのみを表示します。
<p>
<a href="inokashira-park.jpg">公園の風景はこちら。</a>
次の公園は…
<a href="koganei-park.html">
<img src="next.png" alt="NEXTボタン"
width="32" height="32">
</a>
</p>
自分の好きな場所を紹介するホームページを作成してください。 まず、以下の例を参考にして場所を3か所考え、HTMLファイルを3つ用意します。 そして、図のようにすべて相互にリンクを張ってください。 また、以下のイメージ・ファイルをコピーし、それをすべてのページに埋め込んでください。 それぞれのページでは、リンクとイメージ以外は、簡単な文章を書くだけで十分です。 余力のある人は、GIMPなどでイメージを自作し、それを埋め込んでください。
吉祥寺では、おいしいものを食べます。
渋谷では、友だちと遊びます。
新宿では、たくさん買い物をします。
今日の演習3の答案（ホームページのURL）をメールで提出してください。 メールの差出人は学内のアドレス（b04a001@twcu.ac.jpなど）とし、メールの宛先はkonishi@twcu.ac.jpとします。 メールの本文には、学生番号、氏名、科目名、授業日（10月12日）を明記してください。