<img src=は画像を表示するhtmlタグ
ホームページに画像を表示するhtmlタグはこのように記述します。
<img src="http://" alt="" width="" height="" border="0" />
各要素に画像の情報を記述します。
- srcには画像のあるURL
- altに画像の説明文
- widthに横幅
- heightに高さ
- borderには境界線の指定
例えば、当ホームページでは、imageフォルダを作成して、画像ファイルはすべてそちらの方にアップロードしているのですが、そちらにライオン画像(lion.jpg)をアップロードしたとします。
その際のライオン画像のあるURLはこちらになります。
http://www.homepage-tukurikata.com/image/lion.jpg
この場合、ホームページにこのようなhtmlタグを記述すれば、
<img src="http://www.homepage-tukurikata.com/image/lion.jpg" alt="ライオンの画像" width="406" height="296" border="0" />
このように画像が表示されます。
ここで、画像の大きさは指定しなくても表示されるかもしれませんが、ブラウザによっては表示されなかったケースもあったので、個人的にできるだけ指定しておくようにしています。
画像を直接表示してみて、右クリックのプロパティーでたいていは何pxかを調べることができます。
また、border="0"で枠線をゼロにすると表示されなくなりますが、border="0"の代わりにstyle="border: solid 1px #000000;"というふうに指定すると、枠線ありになります。
上の画像に指定するとこのような感じになります。
style="border: solid 1px #000000;"の部分で、枠線を太くしたい際には、2pxとか、青にしたい場合は#0000ffとか、調節することができます。
画像を表示する際には、pタグでくくるケースが多いように思いますが、中央に寄せる場合は、 style="text-align:center;"などをつけとくといいと思います。
例えば、このように記述すると…
<p style="text-align:center;"><img src="http://www.homepage-tukurikata.com/image/gazou-info.bmp" alt="" width="327" height="328" style="border: solid 1px #000000;" /></p>
このようにセンタリングされます。
style="text-align:center;でセンタリング、rightで右寄せ、leftで左寄せです。