前回は、HTMLにCSSを追加するところまで行いました。(02はじめてのホームページ)
今回は、画像を設置してみます。
今回使うHTMLコードの確認
前回同様、03のフォルダを作成して、そのフォルダにindex.htmlを作成しておきましょう。フォルダの作成、ファイルの作成は02はじめてのホームページを参照ください。
それでは、下記のコードをコピー、もしくは模写してHTMLファイルを作成しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>エコロジー＆環境問題 </title>
</head>
<body>
<h1>ECOLOGY 【エコロジーへの取り組み】</h1>
<p>エコロジーや環境問題への関心は、年々高くなっています。Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。</p>
<p>また、紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。</p>
<p><small>Copyright (C) Computer Technology Groups. All rights reserved</small></p>
</body>
</html>index.htmlファイル（基本のマークアップファイル）が作成できたら、そのHTML内に画像が表示するように追加していきます。画像はimg要素を使います。
ホームページはネットの回線を使うことから、index.htmlの中に画像を埋め込む方法ではなく、画像は別ファイルでフォルダに設置し、リンク呼び出しをします。そのためimg要素には、src属性というファイルを読み込む属性を入力し、イコールの右側にファイルを指定します。そのファイルは、「green.jpg」のように拡張子をつけて記述します。
<p><img src=”ファイル名”></p>
画像はインライン要素ですので、今回の動画はp要素の中に書いています。
HTMLファイルから見て下の階層のフォルダに画像が置いてある場合は、<img src=”フォルダ名/ファイル名”> となります。
下記のコードを追加します。
<p>
<img src="img.jpeg" alt="エコロジー 森林">
</p>画像は下記の画像の上で右クリック＞名前をつけてファイルを保存しましょう。ファイル名は「img.jpg」とします。ファイルは、ホームページ練習の03のフォルダに設置しておきます。
アクセシビリティでは推奨となっているalt 属性
また 動画では、アクセシビリティでは推奨となっているalt 属性は、画像の説明文の入力する部分です。
画像の説明文を代替テキストと呼びます。
<p><img src="ファイル名" alt="画像の説明文"></p>alt属性に、極力画像に、代替テキストを入力するように心がけましょう。
alt属性の効果・メリット
alt属性に画像の代替テキストを入力することで、検索エンジンに画像の説明文を伝えることができます。
またユーザーに優しいホームページの観点から、alt属性に入力される代替テキストは、画像の読み上げソフト「スクリーンリーダー」に利用されたり、ネットワーク回線が低速な場合、表示される文字列として補助機能となります。そのため推奨属性になっています。
続きは、動画を確認しながら進めてみましょう。
