画像を掲載するにはimg要素を使います。img要素の書式は次の通りです。
<img src="画像URI" alt="代替テキスト">
img要素ではsrc属性とalt属性は必須の属性となっており必ず指定する必要があります。
「zoo.html」の中で画像を表示させます。画像ファイルは「img」フォルダーに格納した「lion.png」及び「penguin.png」を使います。
<h1>動物園にて</h1>
<p> 2008年12月。師走の寒い中でしたが動物園へ行って来ました。 </p> <h2>ライオン</h2> <p> <img src="../img/lion.png" alt="ライオンの昼寝"> </p> <p>
今日は雌ライオンが一匹外に出ていて、ちょうどガラスの目の 前でウトウトしています。おかげで顔の形などはっきりと見る ことができました。 </p> <h2>ペンギン</h2> <p> <img src="../img/penguin.png" alt="ペンギンの整列"> </p> <p> もともと寒い所に住んでいるペンギンは冬の季節であっても比 較的元気な様子。それでも日暮れが近づいてくると寒かったの でしょうか。日差しがあたる場所へペンギン達が整列して太陽 の方を眺めていました。 </p>
img要素に対してリンクを設定する場合は次のように記述します。
<a href="リンク先を表すURI"><img src="画像ファイル"></a>
リンクの設定の項で作成した「お出かけ日記」の動物園へのリンクの下にライオン画像を挿入しリンクを設定します。title属性を追加すると、マウスを乗せた時ツールチップを表示させることができます。
<h1>お出かけ日記</h1>
<p>
外出した時の記録を残して行きます。
</p>
<p>
<a href="zoo.html">2008年12月 動物園</a>
</p>
<p>
<a href="zoo.html"><img src="../img/lion.png" alt="ライオン" title="動物園へ"></a>
</p>
<p>
<a href="diary/park.html">2008年10月 公園</a>
</p>
必須の属性ではありませんがimg要素には画像の幅と高さを指定するwidth属性とheight属性が用意されています。
幅及び高さはピクセル単位、又はパーセントでサイズを指定します。ピクセルで指定する場合は単位は不用です。
<img src="画像URI" alt="代替テキスト" width="幅" height="高さ">
（1）幅及び高さを省略すると、画像が持つサイズそのままで表示されます。
（2）幅及び高さを指定すると、本来の幅と高さの比率に関係無く画像の幅と高さは指定した値に変更されます。
（3）幅か高さのどちらかだけを任意の値で指定した場合、指定された幅又は高さは指定した値となり、指定されなかった幅又は高さは幅と高さの比率が変わらないように自動的に調整されます。
画像と文字列の縦方向の位置関係を指定するには、スタイルシートのvertical-alignプロパティを使います。
<img src="画像URI" alt="代替テキスト" style="vertical-align:属性" >
top:上端揃え、middle:中央揃え、bottom:下端揃え、指定を省略すると「baseline」をしたことのなります。
下記をファイル名「map_tateiti.html」として「text」フォルダーに保存します。
<h1>ライオン</h1>
<p>
今日は雌ライオン<img src="../img/lion.png" alt="ライオン" >
が一匹外に出ていて、ちょうどガラスの目の前でウトウトしています。
</p>
<p>
今日は雌ライオン<img src="../img/lion.png" alt="ライオン" style="vertical-align:bottom;">
が一匹外に出ていて、ちょうどガラスの目の前でウトウトしています。
</p>
<p>
今日は雌ライオン<img src="../img/lion.png" alt="ライオン" style="vertical-align:top;">
が一匹外に出ていて、ちょうどガラスの目の前でウトウトしています。
</p>
<p>
今日は雌ライオン<img src="../img/lion.png" alt="ライオン" style="vertical-align:middle;">
が一匹外に出ていて、ちょうどガラスの目の前でウトウトしています。
</p>
前項のように、画像と同じ行には文字列は1行しか表示されません。画像の右または左に、画像の高さの分だけ文字列の行を表示するには、スタイルシートの「float」プロパティ-で回り込ませる位置を指定します。
<img src="画像URI" alt="代替テキスト" style="float:回り込みの位置;">
回り込みの設定を行った場合、画像の高さを超える位置まで回りこみは続いて行きます。文書の途中で回りこみを辞めて画像の次の行から続けて文字列を表示させたい場合にはbr要素にスタイルシートの「clear」プロパティを使って回り込みの解除を指定します。
<br style="clear:both;">
<h1>ライオン</h1>
<p>
ライオンを見に来ました。
</p>
<p>
<img src="img/lion.png" alt="ライオン" style="float:left;">
</p>
<p>
今日は雌ライオンが一匹外に出ていて、ちょうどガラスの目の
前でウトウトしています。おかげで顔の形などはっきりと見る
ことができました。
</p>
<p style="clear:both;">
暖かい日差しの中でのんびりと昼寝している姿は百獣の王と呼
ばれるライオンのイメージとは程遠く、まるで縁側でうたた寝
している猫のようです。
</p>