(01) フォルダー内にJPEG画像「neko01.jpg」をコピーして入れておきましょう。
(neko01.jpg 192×250)
(02) このJPEG画像ファイルを「近所の公園で…」の前に挿入します。画像挿入個所は<img>タグで指定します。<img>タグはテキストや要素を囲むタグではありませんので、
<img />のように最後に半角スペースと閉じスラッシュを挿入します(このような要素を『空要素』と呼ぶ)。以下のようにWebページのbody内部を変更してください。
<body> <h1>近所の猫</h1> <p><img />近所の公園で撮影した猫です。お昼寝の最中でしたがとってもかわいかったのでつい写真に収めてしまいました。暑い日だったので木の上でお昼寝をしていたようです。</p> <p>この公園には沢山の猫がいます。誰かが餌を与えているんでしょうか？みんな丸々太っています。それにしても気持ちよさそうに寝ていますね。</p> </body>
(03) imgタグは空要素ですが、「src」属性を用いてどの画像ファイルを表示させるかを指定する必要があります。「neko01.jpg」を表示させるので「src=”neko01.jpg”」とimgタグに属性値を追加してください。修正後は更新してブラウジングしてください。
<body> <h1>近所の猫</h1> <p><img src="neko01.jpg" />近所の公園で撮影した猫です。お昼寝の最中でしたがとってもかわいかったのでつい写真に収めてしまいました。暑い日だったので木の上でお昼寝をしていたようです。</p> <p>この公園には沢山の猫がいます。誰かが餌を与えているんでしょうか？みんな丸々太っています。それにしても気持ちよさそうに寝ていますね。</p> </body>
(04) <img>タグを用いた場合、画像のサイズを属性で明記する必要があります。この写真は幅192px、高さ250pxです。幅は「width」、高さは「height」属性で明記します。body内部を以下のように修正してください。
<body> <h1>近所の猫</h1> <p><img src="neko01.jpg" width="192" height="250" />近所の公園で撮影した猫です。お昼寝の最中でしたがとってもかわいかったのでつい写真に収めてしまいました。暑い日だったので木の上でお昼寝をしていたようです。</p> <p>この公園には沢山の猫がいます。誰かが餌を与えているんでしょうか？みんな丸々太っています。それにしても気持ちよさそうに寝ていますね。</p> </body>
(05) また、画像ファイルの内容を「alt」属性を用いて明記する必要があります。今回は「昼寝している猫」としましょう。以下のように修正してください。
<body> <h1>近所の猫</h1> <p><img src="neko01.jpg" width="192" height="250" alt="昼寝している猫" />近所の公園で撮影した猫です。お昼寝の最中でしたがとってもかわいかったのでつい写真に収めてしまいました。暑い日だったので木の上でお昼寝をしていたようです。</p> <p>この公園には沢山の猫がいます。誰かが餌を与えているんでしょうか？みんな丸々太っています。それにしても気持ちよさそうに寝ていますね。</p> </body>
(06) ブラウジング時に何らかの理由で画像ファイルが利用できない場合、以下のようにalt属性で指定した値が代替文字として表示されます。
(07) さて、少し画像を小さめに表示させましょう。widthとheightの属性値を以下のように現状の半分にしてください。更新後はブラウジングして確かめましょう。
<body> <h1>近所の猫</h1> <p><img src="neko01.jpg" width="96" height="125" alt="昼寝している猫" />近所の公園で撮影した猫です。お昼寝の最中でしたがとってもかわいかったのでつい写真に収めてしまいました。暑い日だったので木の上でお昼寝をしていたようです。</p> <p>この公園には沢山の猫がいます。誰かが餌を与えているんでしょうか？みんな丸々太っています。それにしても気持ちよさそうに寝ていますね。</p> </body>
