文字だけのWEBページって少ないですよね？文字だけだとなんだか寂しい気もします。
ほとんどのWEBページでは、写真やイラスト等の画像が挿入されていて、画像が入ることで華やかさやそのサイトのイメージがガラリと変わります。
せっかくWEBページを作るなら画像を入れて見栄えをよくしたいと考えると思います。思いますよね？ね？
わかりました。そんなにおっしゃるのでしたら、今回はHTMLで画像を入れる方法を勉強していきましょう。
HTMLで画像を挿入するにはimgタグを使います。imgタグは終了タグが必要ないので、オプションのみ追加します。オプションで挿入する画像の保存場所やサイズ等を指定します。
<img src="image.jpg" width="200px" height="100px" alt="画像でござる">
ファイル名
srcで画像のファイル名を指定します。編集しているHTMLファイルと同じ階層にあればファイル名を指定するだけでいいですが、別ディレクトリ内に画像ファイルが存在する場合は、画像のファイルパスを指定しなければいけないので注意してください。以下のようなディレクトリ構造の場合srcの内容は、「images/image.jpg」というようになります。
HTML
|–index.html
|–images
|–image.jpg
幅と高さ
widthで画像の幅、heightで画像の高さを指定します。このオプションは入れなければ、保存されている画像そのままのサイズで表示されます。ただ、保存されている画像そのままの大きさで表示したい場合でも、widthとheightを指定した方がブラウザで表示する速度が速くなりますので、入れておいた方がいいです。
代替文字
代替文字はaltオプションで表現します。これは、画像が表示できない時や音声ブラウザ等で使われるオプションになります。altオプションは入れなくてもいいですが、WEBサイトに訪問していただく方のためにも入れておくことをお薦めします。
HTMLで画像を挿入する方法は以上です。これだけで画像を入れることができるので、ぜひチャレンジしてみてください。