目次
ホームページの画面に写真や絵などがあしらわれているものがあります
このように画像を貼りつけるにはボディー部のなかの画像を表示したい部分に次のような文を、
<img src="ht3-1.jpg" width="196" height="147">
のように記述します。この文の意味を説明します。
画像はイメージ(image)です。そこで<img とするわけです。
「画像のデータの元の記録」をソースレコードといいます。そこで src="画像データ名" とします。
ここでは、画像ファイルが ht3-1.jpg という名前で保存されているものを表示することを意味します。
widthとheightは、幅と高さを指定することを意味します。単位はピクセルです。
上の画像の width="250" height="147" とした画像と width="100" height="147" とした画像を下に示します。
このようにワイドになったりスリムになった画像を表示することができます。
情報センターのホームページに著作権フリーの画像データがあります。それを利用して画像の表示をしてみてください。
ちなみに上の例では
<html>
<head>
<title>HTML画像の配置</title>
</head>
と記述しています。
<p></p>は、この間にはさまれた文章や画像が終了したら改行することを意味します
なお、画像を多用したり大きな画像を用いたページは大量のデータを転送することになるので、表示に時間がかかり回線を占有しますので皆の迷惑となります。注意しましょう。
雑誌の写真やタレントの写真、他のホームページで使用されている画像には著作権があります。無断で自分のホームページに掲載すると損害賠償の請求を受けることがあります。
ホームページに乗せる画像は３０万画素もあれば十分です。デジカメなどで撮影したデータをＪＰＥＧ形式やＢＭＰ形式で保存し利用してください
なお、フリーの素材を情報教育センターが提供しています。またhttp://www.tema.co.jp/ttg/ttg.htmlのように、使用条件をまもればフリーで使用できる素材を提供しているところもあります。画像データを持っていない人は、これらのサイトからダウンロードして練習してください。
この章の最初に表示してある写真の右横の部分は空白となっています。しかし、ここに説明を表示したいときもあります。
上に説明を入れる
上の例では、align="top" というアトリビュートを <img に付加しています。実際には次のように記述しています。
<p><img src="ht3-1.jpg" width="120" height="85" align="top">上に説明を入れる</p>
中央に表示するときは align="middle"、下に表示するときは align="bottom" とします。
下の例のように写真の左側に文章を回りこみ表示したいときもあります。
説明文をいれます。説明文をいれます。
説明文をいれます。説明文をいれます。
説明文をいれます。説明文をいれます。
説明文をいれます。説明文をいれます。
このようなときは、align="left" とします。align="right" とすれば写真の右に表示されます。
上の例では写真のすぐ横から文字が表示されていますが、多少空白を空けたいときもあります。次の例は写真の横に10ピクセルの空白を空けています
説明文をいれます。説明文をいれます。
説明文をいれます。説明文をいれます。
説明文をいれます。説明文をいれます。
説明文をいれます。説明文をいれます。
このように横に空白を空けるには、hspace="10" のように記述します。前の節で写真が2枚連続して表示されていましたが、この間を空けるのも同じように hspace の指定をすればよい。上の例では実際には次のように記述しています。
<p><img src="ht3-1.jpg" width="120" height="85" align="left" hspace="10" >説明文をいれます</p>
【練習】
アトリビュートをいろいろ変えて確認をしなさい
次の写真をポイントしてください。何かメッセージが表示されるはずです。
このような処理をするには、ＡＬＴアトリビュートを使用します。この例では
<img src="ht3-1.jpg" width="72" height="51" alt="クマ夫婦とウサギさんです。よろしくお願いします">
のように記述しています。もともとＡＬＴは、画像表示能力のないブラウザ（閲覧ソフト）のために、画像が表示されないときにかわりに表示するメッセージを記述するために用意されたアトリビュートです。しかし、いまでは例のように画像をポイントしたらメッセージを表示するようになっています。
ＡＬＴ＝”表示する文字列” が記述方法です。表示する文字列をダブルクォテーションで囲みます
動画を作成するには、ビデオカメラや動画撮影機能のついたデジタルカメラを用います。このとき保存するデータ形式に注意を払う必要があります。一般にブラウザで動画を表示するプラグイン（プログラム）は、アップル社のQuickTimeが使用されています。ところが画像データの保存には、MPG（エムぺグ）形式やAVI形式が用いられています。MPG形式は動画データを少ないメモリー容量で保存できるように工夫されたものですが、QuickTimeビューアでは見ることができません。AVI形式はQuickTimeビューアで見ることができますがデータサイズが非常に大きくネットワークで使用するべきものではありません。（自分は時間がかかってもいいと思うかも知れませんが、ネットワークは皆が共有して使用しています。大量のデータが流れると他人のデータ転送も妨害することになります）
皆さんの所有するシステムではMOVファイルが作れないときは、センターのマルチメディアルームにソフトがそろっているので、そこで変換してください。
映像や音声データは、データ量が大きいので、説明文にデータサイズやおおよそのデータ伝送時間を表示するのが親切です。実際の書き方は次のリンクで述べる方法と同じですので詳細はそちらを参考にしてください。
<a href="動画のファイル名.mov">表示する文字列</a>
のように記述します。次の「文字列をクリックして・・」は次のように記述しています
<a href="shuttle_vr.mov">スペースシャトルのVirtual Reality Archive(NASA)(1.67MB)</a>は、・・
また画像をクリックして動画を表示させるには
<a href="動画ファイル名.mov"><img src="画像ファイル名"></a>
とすればよいことになります。次の「画像をクリックして・・」は次のように記述しています。
<a href="sn1987.mov" target="new"><img src="9808w.jpg" width=437 height=313 align=top alt="超新星１９８７Ａの爆発を解説するＮＡＳＡのアニメーションのデータ" hspace="10">2.57MB:10分</a>
スペースシャトルのVirtual Reality Archive(NASA)(1.67MB)は、スペースシャトルの画像を利用者がマウスでポイントすることにより自由に回転させ、いろいろな角度から見ることができるものです。
下の画像をクリックすると超新星の爆発のシミュレーションが見れます
超新星１９８７Ａの爆発を解説するＮＡＳＡのアニメーションのデータの所在は、http://oposite.stsci.edu/pubinfo/pr/1998/08/content/sn1987.mov です。
音声ファイルは、WINDOWSのアプリケーションであるサウンド・レコーダを利用して作成できます。ここで作成されるファイル形式はWAV形式です。javaではａｕ形式のファイルしか認識できませんし、ブラウザも標準的にはＡＵファイル処理となっています。そこで音声ファイル変換ソフトが作られています。例えばhttp://www.vector.co.jp/soft/win95/art/se099460.html?gにはフリーのＷＡＶファイルからＡＵファイルへの変換ソフトがあり、ダウンロードすることができます。このほかにもいろいろあるかもしれません。基本的には動画の処理と同じです。ファイル名がＡＵかＷＡＶなど音声ファイルとなっていることです。
<a href="***.au>voice(size)</a>
2.57MB:10分