STEP7: 画像を挿入してみよう！

画像を挿入してみます。

<p>
<img src="./nextindexb.jpg" alt="NEXTindex">
ウェブページ作成支援系コンテンツ
</p>

上の例では「ココに、同じフォルダの中の画像ファイル nextindex.jpg を挿入しろ」と命令しています。

【表示例】

src 属性

src="./nextindexb.jpg" が、挿入する画像データの場所を指定しています。ここでは、この HTML ファイルがあるフォルダと同じフォルダ（ディレクトリ）の中にある画像ファイル nextindexb.jpg が指定されています。このような指定を「相対 URL」と呼びます；

相対URLについては、リンクの章で説明しました。簡単に説明します。

image.png と云う画像ファイルがあったとします。画像ファイルと挿入する HTML ファイルの相対的な位置関係によって、 src 属性の値が変わります。

• 或る HTML ファイルに対して、この画像ファイルが同じディレクトリにある場合： src="./image.png".
• 一つ上のディレクトリにある場合： src="../image.png".
• 二つ上のディレクトリにある場合： src="../../image.png".
• 同じディレクトリ内のディレクトリ img にある場合： src="./img/image.png".

【ディレクトリ構造の概念図】
[GPAR]--image.png               …二つ上のディレクトリ
  |--[PARE]--image.png          …一つ上のディレクトリ
       |--[HERE]--|inde.html
            |      |image.png   …同じディレクトリ
            |--[img]--image.png

難しい言葉でいえば、自分と同じディレクトリ（フォルダ）のことをカレントディレクトリと呼び、相対 URL では "./" で表します。カレントディレクトリに存在するファイル hoge.txt は、相対 URL ./hoge.txt で表します。同じディレクトリにある画像ファイル pic.jpg ならば、 src="./pic.jpg" で参照します。

ファイル名やディレクトリ名は半角英数字のみ、スペースは不可、大文字・小文字は区別します。詳しいルールは命名法を参照ください。

alt 属性

alt="NEXTindex" は、画像が表示されない場合に、代わりに表示するテキストを指定しています。ここでは、画像が表示されない場合には、 "NEXTindex" と云うテキストが代わりに表示されます。

画像が表示されない場合には、代替テキストも表示したくない場合には、空の alt 属性 alt="" を与えます。装飾用のボーダー画像などの場合に使う必要があるでしょう。

画像をリンクアンカーにする

リンク対象（リンクアンカー）を画像にして、リンクを目立たせる（バナーを貼る）ことが良くあります。アイ・キャッチとして優秀な手段と言えるかもしれません。英単語の "banner" の意味を調べてみると良いでしょう。

<p>
<a href="http://www.nextindex.net/"><img src="./nextindexb.jpg"
    alt="NEXTindex"></a>
</p>

ブラウザによっては、画像の周囲にボーダーが表示されます。これを非表示に指定するためには、 border 属性を与えます；

<p>
<a href="http://www.nextindex.net/"><img src="nextindexb.jpg"
    alt="NEXTindex" border="0"></a>
</p>

但し、ボーダー属性は廃止予定の非推奨属性ですから、出来るだけ CSS を利用したほうが良いでしょう。

<p>
<a href="http://www.nextindex.net/"><img src="./nextindexb.jpg"
    alt="NEXTindex" style="border:none"></a>
</p>

previous (P)   next(N)   contents (C)

FC2>		モビット