画像を使う


今度はHTMLファイル上に画像を表示してみます。
画像を表示するには<img>タグを使います。
このタグには終了タグ</img>は必要ありません。

まず<img>と記述し、imgの後ろに半角スペースをあけ、src=""と記述します。
これらは全て半角で記述するので注意してください。

<img src="">

次に、""の間に画像のファイル名を記述します。
もちろん、画像をあらかじめ用意しておく必要があります。

<img src="awa.png">

　　↓




ファイル名は拡張子まで入れる必要があります。
また、インターネット上では半角の英語か数字のファイル名しか使えません。

それから、大文字と小文字は区別されるので注意してください。
例えば、000.jpgと000.Jpgは別のファイルとして扱われます。
a.jpgとA.jpgでも同様です。


次に、画像を別のフォルダに入れた場合は、
そのフォルダの名前を記述し、/で区切ってからファイル名を入力します。

例えば、画像をimageというフォルダに入れる場合には、
<img src="image/awa.png">となります。

これに関する詳しい説明は、次の相対パスと絶対パスで解説します。


では、今度は画像にボーダーラインを表示します。
これは、border="--"という属性を入れるだけです。
数値を大きくすれば、それだけ太くなります。

<img src="image/awa.png" border="1">

　　↓




なお、ハイパーリンクを重ねるときは、
自動的にボーダーラインが表示されてしまうので、
border="0"と記述することでボーダーラインを消すことができます。

ハイパーリンクについては、リンクのところで解説します。


では今度は、画像に説明をつけます。
alt=""属性を使うと、マウスカーソルを重ねたときに
""の間に記述した説明が表示されるようになります。

また、画像の表示に失敗したときに、
どのような画像なのかという説明としても表示されます。

<img src="image/awa.png" alt="あわあわ">

　　↓




ではさらに、表示される大きさを変更します。
width=""とheight=""という属性を使います。

width=""では横幅、height=""では縦の長さを指定します。
また、単位はピクセルです。

ちなみに、100ピクセルでこのくらいの長さです（ 縦は20ピクセル ）。
　


<img src="image/awa.png" width="77" height="77">

　　↓




画像が大きく表示されたり小さく表示されたりしていても、
画像の容量は変わりません。

容量を小さくするつもりで画像の表示サイズを小さくしても、
まったく意味がないので注意してください。



次は　相対パスと絶対パス　です。

メニューに戻ります。