オンラインテキスト目次Webページの作成目次
目次
Webページに画像を張り込むには、次の画像ファイルのインライン読込みタグを使う：
<img src="画像ファイルのURL" alt="代替文字列" align="位置"> |
.gif であるGIF形式はライセンスの関係ではあまり使われない傾向にある。
.png の（W3Cで標準化された）PNG形式や .jpg であるJPEG形式のものが広く使われる。
Webページで画像を張り込む場合には次の点に注意する。
alt=" 代替テキスト " の利用
<img ..>のオプションalign="位置"は画像位置を制御ずる：
| オプション | 意味 | 補足 |
|---|---|---|
align="left" |
画像を左側に寄せ、右側にテクストを回り込ませる | <br clear="left">を回り込みテキストの最後に置いて回り込みを解除する |
align="right" |
画像を右側に寄せ、左側にテクストを回り込ませる | <br clear="right">を回り込みテキストの最後に置いて回り込みを解除する |
align="top" |
画像の上部と周囲のテキストの上部を揃える | |
align="middle" |
画像の中央と周囲のテキストのベースラインを揃える | |
align="bottom" |
画像の下部と周囲のテキストのベースラインを揃える（デフォルト） |
たとえば、次のようになる：
<img src="image/einstein.gif" alt="[Einstein]" align="left"> この用例は、インライン画像に文字を回り込ませるオプションを指定している。 画像は左寄せに表示されている。<br> 文は画像の右側に回り込んでいる。<br> <br clear="left"> ここから次の文が始まる。 |
|
![[Einstein]](image/einstein.gif)
この用例は、インライン画像に文字を回り込ませるオプションを指定している。
画像は左寄せに表示されている。文は画像の右側に回り込んでいる。 ここから次の文が始まる。 |
無意味な画像の張り込みや無駄に大きな画像の張り込みはすべきではない。 画像や音声ファイルは大きなサイズになりやすい。 大きいサイズのファイルを転送することは、いたずらにネットワークの渋滞を招く結果となる。
「試しに」アクセスしたページが、実はかなり大きなファイルサイズを含んでいたために転送に時間がかかり、見てみたらつまらないページでガッカリしたということをよく経験する。 大きいファイルのダウンロードに時間がかかりそうな時には、アクセスは打ち切られてしまう。
このようなことを防ぐために、ホームページを作成するときには、次の点に注意する。
~/public_html/index.html）には、大きな画像データを張り込んだりしない。
まず、ページを見てもらうことこそが大切である。たとえば、第3項の注意にしたがって次のようなページデザインが考えられる。
<a href="image/myphoto.jpg"> <img src="image/miniphoto.jpg" alt="My Photo" align="middle">私の写真</a>(JPEG 40KB) |
|
|
この例では、ディレクトリimageにある画像ファイルmyphoto.gifにリンクを張っているが、アンカーポイントとしてそのミニチュアの画像ファイルminiphoto.gif自身も使っている。
リンク先のデータサイズとして40KBを提示しているので、利用ははこれ以上のアクセスをするかどうかを判断できる。