写真を載せるためのタグを書く

これから述べる <img> タグを利用すると, Web ブラウザでは, それは文章中の 1文字と同じ扱いになります. このことをまず注意しておきます.

まず最初に全体の写真を載せます. 写真や画像の挿入のタグは

<img src="ファイル名" alt="代替文字" width="横の長さ" height="縦の長さ">

となります. 代替文字は, 画像が表示出来ないブラウザ(elinks, w3m など)を使用している人に, 画像の変わりに表示させる文字を書きます. さらに, 目の見えない人が Webにアクセスした時に, 例えば文書読み上げソフトは 代替文字を読むことで, その Web ページの内容がわかるようにするためでもあります. ここでは,「バラの写真」と記述します. 横の長さ, 縦の長さはブラウザに表示させる大きさです. 今回用いるバラの写真は, サイズが大きくないので, この属性指定はしません. この属性指定をすると, ブラウザは指定された大きさで画像を表示しますが, その際に画像の拡大, 縮小が実行され, 画像が歪む事もあります.

以上に注意し, 最後に水平線を書くとすると, 次のようなタグを記述します.

<p class="heading">
<img src="rose.jpeg" alt="バラの写真" >
</p>
<hr>

テキストエディタにもどりファイル「pictures.html」の 見出しの閉じタグ</h1>の下に 上のような内容を入力して下さい. 入力出来たら, 保存して下さい. 次に, Web ブラウザの windowに戻り「再読み込み」 のボタンをクリックして正しく表示出来たか確認して下さい (Mac, Windows の人). iPad + Koder では, 画像が表示されませんので確認は諦めて, 次の操作に進んでください. 正しく表示できなかった人は, 入力文に誤りがないかどうか確認し, 修正してから「保存」「再読み込み」の操作を行って下さい.

タグ<p class="heading"> での class 属性を指定しているのは, この段落の見栄えを他の段落タグとは違えるためにです. class 属性に関する意味付けは, スタイルシートで行います. スタイルシートがまだありませんので, 現時点では表示に反映されません.