|
参照を記号
で表しますと、このインスタンスは次のようになります。
|
| 目次 | 索引 |
|---|---|
以前、ホームページの基本は文章（テキスト）だと説明しました。 では、画像（イメージ）は単なる飾りかといいますと、そうではありません。 次のような目的で用いられた画像は、ホームページの中で重要な役割を果たします。
画像が埋め込まれたホームページを作るには、画像ファイルを用意する必要があります。 画像ファイルを自分で作るには、
などの方法があります。
なお、インターネットでは、他人の作成した画像ファイルが簡単に入手できます。 しかし、それを自分のホームページに埋め込むのはトラブルのもとです。 自由に使ってもよいと明記されている場合を除き、他人の画像ファイルは利用しないほうがよいでしょう。 また、本や雑誌などは著作権法で明確に保護されています。 雑誌に載っている写真をスキャナで取り込んで自分のホームページに埋め込む、などということはしないでください。
さて、画像ファイルが用意できましたら、次にその形式を確認します。 画像ファイルには、画像の特徴に応じた数々の形式があります。 しかし、ホームページに埋め込めるのは、次の表の通り、そのわずかです。
xpaintなど、大抵の画像処理ソフトには、画像形式の変換機能があります。 必要に応じてこの機能を利用してください。
なお、学内のxpaintは画像ファイルをGIFに変換できません。 GIFは、ホームページ作成に最もよく使われている画像形式です。 しかしながら、特許に関わる問題があり、誰でも自由にGIFファイルが作れるわけではなくなりそうです。 これから画像ファイルを作成するときは、JPEGかPNGを用いるとよいでしょう。
最後に、画像ファイルをHTMLファイルからアクセスできるところに置きます。 これらのファイルを同じディレクトリに置くのが簡単ですので、今日の授業ではそのようにします。
画像ファイルが用意できましたら、次にHTMLドキュメントを書きます。
画像を埋め込むためのタグは
<img>
です。
このタグに終了タグはありません。
画像ファイルの場所は
src属性
で指定します。
HTMLファイルと画像ファイルが同じディレクトリにある場合、この属性の値は画像ファイルのファイル名です。
これでブラウザは、
<img>
タグの書かれた位置に、指定された画像ファイルの画像を表示します。
なお、どんなに大きくても、ブラウザは画像を文字の一種として取り扱います。
<p> 参照を記号<img src="ref-arrow.gif">で表しますと、 このインスタンスは次のようになります。 </p> <div style="text-align: center"> <img src="ref-image.gif"> </div>
一般に画像ファイルの転送はネットワークに負担をかけます。 画像が大きければ大きいほど、色の数が多ければ多いほど、ネットワークを混雑させることになります。 本当にその画像がそのホームページに必要なのか、画像が大きすぎないか、色の数が多すぎないか、ホームページの公開の前によく考えてください。
<img>
タグでは、
src
属性があれば画像を埋め込むことができました。
この他に、なるべく指定したほうがよい属性があります。
alt属性
は、画像が表示できないブラウザや、画像を表示しない設定にしてあるブラウザで、画像の代わりに表示するテキストを指定します。
この属性の値は、画像が何であるかを示す簡単な説明文にしてください。
このテキストにタグなどは入れられません。
規格の上では、
alt
属性は必ず書かなくてはいけません。
width属性
と
height属性
は、それぞれ画像の幅と高さのピクセル（画素）数を指定します。
もしこれらの属性が指定されていますと、ブラウザはあらかじめその大きさの範囲を画像用に確保できます。
他のテキストなどを表示した後で、画像ファイルを読み込み、その範囲に画像を埋め込みます。
指定されていませんと、画像の大きさが分かりませんので、ブラウザは仮の範囲を確保します。
他のテキストなどを表示した後で、画像ファイルを読み込み、この時点で画像の大きさが分かりますので、一度表示した他のテキストなどを消して、すべてを表示し直すことになります。
<p>
参照を記号<img src="ref-arrow.gif" alt="reference arrow"
width="40" height="20">で表しますと、
このインスタンスは次のようになります。
</p>
<div style="text-align: center">
<img src="ref-image.gif" alt="reference image"
width="300" height="100">
</div>
ホームページでは、背景に画像を表示することもできます。 背景画像 （壁紙）では、画像が指定された範囲にタイル状に並べて表示されます。
背景画像の指定は、スタイルシートや
style
属性の値に書きます。
具体的には、
background-imageプロパティ
を用います。
このプロパティの値は、
url(
filename
)
という形式です。
ここで、
filename
は画像ファイルのファイル名です。
<title>Image test</title>
<style>
<!--
body {background-image: url(triangle.gif)}
-->
</style>
<body>
<p>
Good morning!<br>
Good morning!<br>
Good morning!
</p>
</body>
Good morning!
Good morning!
背景画像が目立ちすぎますと、その上の文字が読みにくくなります。 背景画像はあまり目立たないものを使ってください。
<title>Image test</title>
<style>
<!--
body {background-image: url(zigzag.gif)}
-->
</style>
<body>
<p>
Good morning!<br>
Good morning!<br>
Good morning!
</p>
</body>
Good morning!
Good morning!
WWW上には、実に多くのホームページが世界中に散在しています。 そしてそれらは、リンクとよばれる方法で結び付けられています。 ユーザは、マウスでクリックするなどしてリンクをたどり、やがて必要な情報にたどり着くわけです。 この結び付け方を、ここではリンク構造とよびます。
リンクを作成するには、アンカーというものを指定します。
アンカー
（
anchor
）とは、リンクの始点と終点をまとめて意味する用語です。
ブラウザは、
<a>
〜
</a>
に囲まれた部分をアンカーと見なします。
ただし、単に
<a>
〜
</a>
で囲んでも何も起りません。
始点と終点を指定して、はじめてリンクになるのです。
今日の授業では、同じディレクトリの中でリンクを作成します。
リンクの始点となるアンカーを作成するには、
href属性
を用います。
この属性の値は、リンクの終点となるHTMLファイルのファイル名です。
ブラウザは、リンクの始点となる部分を、色を変えたり下線を引いたりして、目立つように表示します。
ユーザがその部分をマウスでクリックするなどして選択すると、ブラウザはリンクの終点に指定されたファイルを表示します。
<p> 過去3年間の資料は以下を参照してください。 </p> <ul> <li><a href="dat2000.html">2000年度</a></li> <li><a href="dat1999.html">1999年度</a></li> <li><a href="dat1998.html">1998年度</a></li> </ul>
・ 2000年度・ 1999年度・ 1998年度
以下の例と同様な（またはより複雑な）リンク構造を考え、その構造に従ってHTMLファイルを作成してください。 作成するHTMLファイルは複数になります。 それぞれのHTMLファイルでは、リンクの指定以外は、簡単なテスト文を書くだけで十分です。 ただし、少なくとも一つHTMLファイルの少なくとも一か所に画像（または背景画像）を用いてください。
やっと 冬 が過ぎたけど、新入生の世話が面倒くさい。 早く 夏 が来ないかな。
やっと 春 が過ぎたけど、毎日暑くてたまらない。 早く 秋 が来ないかな。
やっと 夏 が過ぎたけど、学園祭の準備で忙しい。 早く 冬 が来ないかな。
やっと 秋 が過ぎたけど、毎日寒くて耐えられない。 早く 春 が来ないかな。
今日の演習6に従ってホームページを作成し、そのファイル名をkonishi@twcu.ac.jpあてにメールで報告してください。 メールには、学生番号、氏名、科目名、授業の日付けを明記してください。