５．画像を表示する
画像ファイル数が多くなった場合の管理を容易にするためにホームフォルダ内に
３個のフォルダ【pet】【hana】【colct】を作成します。
各々のフォルダに下表の画像を保存します。



フォルダ画像１画像２画像３画像４


petpet1.jpg
pet1s.jpg		pet2.jpg
pet2s.jpg		pet3.jpg
pet3s.jpg		pet4.jpg
pet4s.jpg


hanahana1.jpg
hana1s.jpg		hana2.jpg
hana2s.jpg		hana3.jpg
hana3s.jpg		hana4.jpg
hana4s.jpg


colctcolct1.jpg
colct1s.jpg		colct2.jpg
colct2s.jpg		colct3.jpg
colct3s.jpg		colct4.jpg
colct4s.jpg



同一セルにある画像は同じ画像で上は大きい画像、下は縮小画像です
縮小画像のサイズは統一し横240pixel、縦180pixelとします。


次の青文字部を参考に【index.htm】を書き換えてください。

上書き保存後【index.htm】ファイルのアイコンをダブルクリックし結果を確認し
てください。完成サンプル


<html lang="ja">
<head>
<title>趣味の部屋</title>
<style type="text/css">
<!--
@import url(qqq.css);
body{font-size:22pt;color:navy;background-color:lavender}
table{background-color:mintcream;width:750px}
td{font-size:18pt}
-->
</style>
</head>
<body>
<div align="center">
<span class="red">趣味の部屋</span><br><br>
<table>
<tr><td colspan="3"><br>
　　　私の趣味の部屋をご訪問いただきありがとうございます。<br>
　　　どうぞごゆっくりご覧ください。<br><br><hr><br>
</td></tr><tr align="center"><td>
可愛らしいペット<br><img src="pet/pet1s.jpg">
</td><td>
好きな花<br><img src="hana/hana1s.jpg">
</td><td>
コレクション<br><img src="colct/colct1s.jpg">
</td></tr>
</table>
</div>
</body>
</html>


解説
１．<tr align="center">
　　trタグのalign属性でその行の各セル内の文字・画像の配置を設定する。
　　align属性の値がleftの場合：左揃え
　　align属性の値がcenterの場合：中央揃え
　　align属性の値がrightの場合：右揃え

２．<img src="pet/pet1s.jpg">
　　imgタグのsrc属性の値（url）のアドレスの画像ファイルを表示する。　urlの解説参照
　　この場合、index.htm が保存されているホームフォルダにある【pet】フォルダに保存した
　　画像【pet1s.jpg】を表示するため、保存場所の pet とファイル名 pet1s.jpg を / で
　　連結して src="pet/pet1s.jpg" と記述する。

タグ解説参照　　<tr>タグ align="center"　　<img>タグ　　urlの解説参照