Computer IIE

今日の授業では、イメージ（画像）ファイルや複数のHTMLファイルを扱います。この節では、イメージ編集ソフトGIMPの最低限の使い方と、SafariとJeditのウィンドウを複数開く方法について説明します。

目次	索引
3.1 ホームページ作成の準備（2） 3.1.1 GIMPの使い方 3.1.2 複数のホームページ 3.2 HTML構造 3.2.1 タイトル 3.2.2 HTMLドキュメント 3.3 コメントとインデント 3.3.1 コメント 3.3.2 インデント 3.4 イメージ 3.4.1 イメージ・ファイル 3.4.2 イメージの埋め込み 3.4.3 代替テキストとイメージの大きさ 3.5 リンク 3.5.1 リンクとアンカー 3.5.2 ドキュメントへのリンク 3.5.3 イメージとリンク 3.6 演習3 3.7 レポート課題	alt属性 aタグ bodyタグ GIF GIMP headタグ height属性 href属性 htmlタグ HTMLドキュメント imgタグ JPEG PNG src属性 titleタグ width属性アンカーインデントコメント始点アンカー終点アンカー属性タイトルハイパーテキストヘッダ本文

GIMP とは、GNU Image Manipulation Program, つまりGNUのイメージ編集ソフトです。ここでGNU（グニュー）とは、フリーソフト開発プロジェクトの名前です。

GIMPには本格的なイメージ編集機能がそろっていますが、ここでは簡単な線画を描くことにします。興味のある人は、GIMPの参考書を読んでみてください。

一度作成したイメージ・ファイルをもう一度編集することもできます。ファイルを開くには、"The GIMP"ウィンドウのメニューを"File"→"Open"とクリックしますと"Load Image"ウィンドウが開きますので、左の欄でディレクトリ名を、右の欄でファイル名をダブルクリックします。ファイルに保存するには、イメージ・ウィンドウの上で右クリックしてメニューを開き、"File"→"Save"とクリックします。

3.1.2 複数のホームページ

例えば、3つのホームページを同時に作成する場合、Safariのウィンドウが3つと、Jeditのウィンドウが3つ開けると便利です。しかし、DockのSafariアイコンもJeditアイコンも、一つしか起動できないようになっています。

Safariのウィンドウを増やすには、DockのSafariアイコンをクリックし、メニュー・バーを「ファイル」→「新規ウィンドウ」とクリックします。 Jeditのウィンドウを増やすには、DockのJeditアイコンをクリックし、メニュー・バーを「ファイル」→「新規」とクリックします。

3.2 HTML構造

3.2.1 タイトル

ホームページでは、ブラウザ・ウィンドウのタイトルバーに文字列が追加できます。この文字列を、ホームページの タイトル （ title ）とよびます。タイトルは、ホームページの内容を表わすことに使います。ブックマークなどでも使われますので、簡素で内容のよく分かるタイトルが望ましいです。なお、規格の上ではタイトルは必ず書かなくてはいけません。

ブラウザは、 <title> 〜 </title> に囲まれた部分をタイトルと見なします。

<title>Greeting</title>
<p>Good afternoon!</p>

<title> 〜 </title> の中は単純な文字列に限ります。タグは入れないでください。

3.2.2 HTMLドキュメント

これまでは、テキスト・エディタ（Jedit）を使って文字やタグを並べて書けば、ブラウザ（Safari）が規則に従ってホームページを表示するというように理解していたと思います。本当は、文字やタグを並べて書くことは、データを作成することなのです。ブラウザは、このデータを処理してホームページを表示しているのです。これからは、データであることを強調するために、 HTMLドキュメント （ HTML document ）という言葉を使います。

HTMLドキュメントは2つの要素から構成されます。前半は ヘッダ （ document head ）とよばれる部分、後半は本文（ document body ）とよばれる部分です。ヘッダの主な内容はタイトルです。タイトル以外にも、種々の設定情報が追加されることがあります。それら以外の全ての要素は本文に含まれます。

ブラウザは、 <html> 〜 </html> に囲まれた部分をHTMLドキュメントと見なします。 <head> 〜 </head> に囲まれた部分をヘッダと見なします。 <body> 〜 </body> に囲まれた部分を本文と見なします。

<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>

3.3 コメントとインデント

3.3.1 コメント

ホームページを作っていると、書きかけの文章やちょっとしたメモなど、表示してほしくはないけれどファイルには残しておきたい部分ができたりします。ブラウザは、  までを コメント （ comment ）（注釈）と見なします。コメントは表示されません。したがって、表示してほしくない部分は、  で囲めばよいのです。

<h2>はじめに</h2>
<!-- ここは最後に書く。 -->
<h2>JavaScriptの基本</h2>
<!--
この節では、
まず、
-->

<h2>はじめに</h2>
<!-- ここは最後に書く。 -->
<h2>JavaScriptの基本</h2>
<!--
この節では、
まず、
-->

<!--
<h2>はじめに</h2>
<!-- ここは最後に書く。 -->
<h2>JavaScriptの基本</h2>
<!--
この節では、
まず、
-->
-->

と書きましても、「JavaScriptの基本」が表示されてしまいます。これは、1行目から始まったコメントが、9行目の --> ではなく、3行目の --> で終わりと見なされたからです。

3.3.2 インデント

タグをたくさん使うようになりますと、開始タグと終了タグの対応が分かりにくくなってきます。終了タグを忘れて思わぬ表示になったりしないためにも、タグで囲まれている範囲が一目で分かるようにしたいものです。

多くのプログラミング言語では、 インデント （ indent ）（字下げ）を用いてプログラムの構造を見やすくしています。この方法はHTMLにも通用します。プログラムのようにインデントをすると、開始タグと終了タグの対応が分かりやすくなります。

インデントの規則は、ホームページの作者が自分で分かりやすいように決めることです。この授業での例を参考にして、自分なりの規則を作ってください。

3.4 イメージ

以前、ホームページの基本はテキスト（文章）だと説明しました。では、イメージ（画像）は単なる飾りかといいますと、そうではありません。

などの目的で用いられたイメージは、ホームページの中で重要な役割を果たします。

3.4.1 イメージ・ファイル

イメージが埋め込まれたホームページを作るには、イメージ・ファイルを用意する必要があります。イメージ・ファイルを自分で作るには、

などの方法があります。他人の作成したイメージ・ファイルを利用するには、

イメージ・ファイルが用意できましたら、次にその形式を確認します。イメージ・ファイルには、イメージの特徴に応じた数々の形式があります。しかし、ホームページに埋め込めるのは、次の表の通り、そのわずかです。

形式	主な用途	拡張子
GIF	色の少ないイメージ	.gif
JPEG	色の多いイメージ	.jpeg, .jpg
PNG	GIFの代替	.png

GIMPなど、大抵のイメージ編集ソフトには、イメージ形式の変換機能があります。必要に応じてこの機能を利用してください。

最後に、イメージ・ファイルをHTMLファイルからアクセスできるところに置きます。 HTMLファイルとイメージ・ファイルを同じディレクトリに置くのが簡単ですので、今日の授業ではそのようにします。

Safariでは、ホームページのイメージの部分でControlを押しながらクリックし、「画像を別名で保存」を選択しますと、イメージ・ファイルがコピーできます。しかし、それを自分のホームページに埋め込むのはトラブルのもとです。自由に使ってもよいと明記されている場合を除き、他人のイメージ・ファイルは利用しないほうがよいでしょう。

本や雑誌などは著作権法などで明確に保護されています。雑誌に載っている写真をスキャナで取り込んで自分のホームページに埋め込む、などということはしないでください。

GIFは、ホームページ作成に最もよく使われているイメージ形式です。しかしながら、特許に関わる問題があり、誰でも自由にGIFファイルが作れる状況はなくなると予想されます。これからイメージ・ファイルを作成するときは、JPEGかPNGを用いるとよいでしょう。

3.4.2 イメージの埋め込み

イメージ・ファイルが用意できましたら、次にHTMLドキュメントを書きます。

イメージを埋め込むためのタグは <img> です（IMaGe）。このタグに終了タグはありません。ただし、単に <img> と書いても何も起りません。イメージ・ファイルのファイル名が filename のときは、

<img src="filename">

ここで、タグの書式がこれまでと異なることに注意してください。タグが < tag att =" value "> という形になっています。この att は属性（ attribute ）とよばれるもの（の名前）です。 HTMLでは、属性を用いてタグにより詳しい情報を与えます。このタグの形は、 att 属性の値を value にするという意味です。

<img> タグの場合は、 src属性で、イメージ・ファイルの場所（SouRCe）を指定します。 HTMLファイルとイメージ・ファイルが同じディレクトリにある場合、この属性の値はイメージ・ファイルのファイル名です。

ブラウザは、 <img> タグの書かれた位置に、指定されたイメージ・ファイルのイメージを表示します。なお、どんなに大きくても、ブラウザはイメージを文字のように取り扱います。

<p>
ファイルを記号<img src="file-icon.png">で表し、
リンクを記号<img src="link-arrow.png">で表しますと、
相互リンクとは図のような構造のことです。
<br>
<img src="mutual-link.png">
<br>
これは、英語版と日本語版を結び付けるときなどに使われます。
</p>

ファイルを記号

で表し、リンクを記号

で表しますと、相互リンクとは図のような構造のことです。
A mutual link

これは、英語版と日本語版を結び付けるときなどに使われます。

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

3.4.3 代替テキストとイメージの大きさ

<img> タグでは、 src 属性があればイメージを埋め込むことができました。この他に、なるべく指定したほうがよい属性があります。

alt属性は、イメージが表示できない（あるいは表示しない設定になっている）ブラウザで、イメージの代わり（ALTernate）に表示するテキストを指定します。この属性の値は、イメージが何であるかを示す簡単な説明文にしてください。このテキストにタグなどは入れられません。規格の上では、 alt 属性は必ず書かなくてはいけません。

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

<p>
ファイルを記号<img src="file-icon.png" alt="A file icon"
                   width="32" height="32">で表し、
リンクを記号<img src="link-arrow.png" alt="A link arrow"
                 width="50" height="20">で表しますと、
相互リンクとは図のような構造のことです。
<br>
<img src="mutual-link.png" alt="A mutual link"
     width="200" height="100">
<br>
これは、英語版と日本語版を結び付けるときなどに使われます。
</p>

3.5 リンク

3.5.1 リンクとアンカー

コンピュータが現れる以前、ドキュメント（テキスト）というものは、1ページ目から順番に構成するしかありませんでした。それが現代では、コンピュータを用いることによって、数多くのドキュメント同士をリンクという構造で網の目のように結び付けることが可能になりました。この、リンクで構成されるドキュメントの構造を、 ハイパーテキスト （ hypertext ）とよびます。今のハイパーテキストは、コンピュータ・ネットワークを経由して、異なるコンピュータのドキュメント同士も結び付けているということを意識してください。

HTMLでリンクを作成するには、アンカーというものを指定します。 アンカー （ anchor ）とは、リンクの始点と終点をまとめて意味する用語です。ここでは、リンクの始点を 始点アンカー （ source anchor ）、リンクの終点を 終点アンカー （ destination anchor ）とよぶことにします。

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

3.5.2 ドキュメントへのリンク

はじめに、テキストからドキュメントへのリンクを作成します。

まず、始点アンカーとなるテキストを、 <a> 〜 </a> で囲みます。そして、このタグに href属性を指定します（Hyper REFerence）。この属性の値は、終点アンカーとなる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>

3.5.3 イメージとリンク

上の例では、テキストからドキュメントへリンクを張りました。 HTMLでは、イメージをアンカーにすることができます。つまり、次の4種類のリンクが作成できます。

イメージを始点アンカーにするには、 <img> タグを <a> 〜 </a> で囲み、 href 属性を指定します。始点アンカーであるイメージは、ボーダーに色が付くなど目立つように表示されます。（ボーダーに色が付かないブラウザもあります。）

イメージを終点アンカーにするには、 href 属性の値をイメージ・ファイルのファイル名にします。ユーザが始点アンカーをクリックするなどして選択しますと、ブラウザはそのイメージのみを表示します。

<p>
<a href="mutual-link.png">イメージに飛ぶ。</a>
右はアイコンのつもり。
<a href="mutual-link.png">
  <img src="file-icon.png" alt="A file icon"
       width="32" height="32">
</a>
</p>

<a href="...">
  <img ...>
</a>

としますと、イメージの右下に短いアンダーラインが付くことがあります。このアンダーラインを取り除くには、

<a href="...">
  <img ...></a>

3.6 演習3

自分の日常生活を紹介するホームページを作成してください。以下の例を参考にして、日常生活の3つのシーンを考え、図のようにすべて相互にリンクを張ってください。作成するHTMLファイルは3つです。それぞれのHTMLドキュメントでは、リンクの指定以外は、簡単な文章を書くだけで十分です。ただし、すべてのページに例のイメージ（のコピー）を用いてください。余力のある人は、GIMPを利用して、イメージを自作してください。

朝食の時間です

コンビニのサンドイッチを食べます。
昼食の時間へ
夕食の時間へ

3.7 レポート課題

今日の演習3に従ってホームページを作成し、そのURLをkonishi@twcu.ac.jpあてにメールで報告してください。メールには、学生番号、氏名、科目名、授業の日付け（4/23）を明記してください。

コンピュータIIE（HTML入門）第3回