画像を配置するにはimg要素を使う
ホームページに画像を配置する際にはimg要素を使います。
img要素は終了タグが必要ない要素ですので注意してください。
それでは早速説明していきましょう。
画像を配置する
ホームページに配置したい画像を、HTMLファイルのあるフォルダに入れます。
次に、ホームページへ表示させるため、bodyタグの内側にimg要素でマークアップします。
画像のファイル名は日本語や全角英数字でも表示させることができますが、HTMLのルール上好ましくありません。
ファイル名は半角英数字で設定するようにしてください。
また、画像の種類には「.jpg」「.gif」「.png」など様々な種類があります。パソコンの設定から拡張子を表示させておくと一目で確認できるので、予め設定しておきましょう。
代替テキストを入力する
何かの原因で画像が表示されない場合や、音声ブラウザを使っている方の為に代替テキストを入力します。
画像の内容についての説明となる様に日本語で入力します。代替テキストはホームページ上に表示されません。
フォルダ分けしてファイルを整理する
さきほど紹介したフォルダには「index.html」「gazou.jpg」の2ファイルのみでしたが、ページや画像が増えてくるとフォルダの中身が煩雑になってしまい、非常にわかりにくいフォルダが出来上がってしまいます。
画像などのファイルは、フォルダの中にさらにフォルダを作成して整理すると非常に見やすく整理することができます。
この時、トップページのHTMLファイル（index.html）はフォルダ分けしないように注意してください。ホームページのルール上、トップページのファイル名はindex.htmlにするように決まっているので、移動・変更してしまうとページが見れなくなってしまいます。
まとめ
・img要素には終了タグが必要ない
・body要素の内側にimg要素でマークアップする
・ファイル名は半角英数字を使う
・拡張子を表示させておくと便利
・代替テキストを入力する
・ファイルが増えたときの為にあらかじめフォルダ分けしておく
