授業形式でhtml・ソース・タグを勉強し、ホームページを自作する　画像（写真など）

写真やイラスト、アニメーションGIFなどを表示するには「img」イメージタグを使います。
この「img」タグは独特で、必ず属性に「src」（ソースと読むらしい）がつきます。
また、「開始タグ」だけで「終了タグ」はありません。

<img src="gazou/a02.jpg" width="200" height="150" border="0" alt="ジュース？">
<img src="gazou/a02.jpg">

属性は「src」以外すべて省略しても、作ったサイズで表示されます。

width ウィズ（ワイドでも良い？）: 表示したい横幅（単位：ピクセル）
height ハイト: 表示したい高さ（単位：ピクセル）
border ボーダー: 境界線（画像のふち）････「0」は境界線非表示、それ以外は太さ（単位：ピクセル）
alt オルト: 代替テキスト（画像が表示されないときに表示される文字）

ここで「gazou/」に注目。
html文書と同じところにある（同じ階層にある）画像・写真なら「gazou/」は書きませんが、この写真は「gazou」フォルダーに入れています。
だから、「gazou」フォルダーの中にある「a02.jpg」と指定します。
それが、「gazou/a02.jpg」です。
画像がどこにあるかによって、書き方が変わります。

さらにサイズに注目。
複数の写真を並べて横幅を同じにしたいとき、「width」のみ指定します。
縦長、横長の写真もすべて同じ横幅で表示され、高さは比率で自動的に計算されます。

≪練習≫
保存した「練習１.html」に写真を加えます。
「練習１.html」を右クリックし、「プログラムから開く」→「Notepad」をクリック。
「Notepad」とは「メモ帳」のことです。
「ファイル」→「名前をつけて保存」を選び、「練習２.html」で保存します。

そして「</p>」と「</body>」の間を１行空け、下記のソースを貼り付けます。

<p align="center"><img src="gazou/a02.jpg"></p>

画像は「a01.jpg」から「a10.jpg」で、好きなものを選んでください。

≪完成したイメージ≫

画像が表示されなかったら、どこかが間違っていますので探して訂正しましょう。
気に入った画像が出たら、上書き保存してください。