1．画像を表示する。
<img src="*">
<img src="*">タグで画像を指定すると、画像を表示することができます。
*には、画像ファイル名を指定。
<html>
<head>
</head>
<body bgcolor="black">
<center>
<img src="sample.gif">
<p>
<img src="sample.jpg">
</center>
</body>
</html>
|
⇒サンプル |
|
2．画像の大きさを設定する
<img src="*" width="◇" height="◆">
<img src="*" width="◇" height="◆">のように、width="◇" height="◆"で画像の幅と高さを指定することができます。
◇や◆には、ピクセル数か％を指定することができますが、ピクセル数は画像の絶対的大きさを、％はウインドウに対しての相対的な大きさを指定することになります。
*には、画像ファイル名を指定。
◇には、横幅のピクセル数or％を指定。
◆には、縦幅のピクセル数or％を指定。
<html>
<head>
</head>
<body>
<img src="sample.gif"><p>
<img src="sample.gif" width="100" height="100"><p>
<img src="sample.gif" width="80" height="30"><p>
<img src="sample.gif" width="25%" height="10%"><p>
<img src="sample.gif" width="15%" height="15%"><p>
</body>
</html>
|
⇒サンプル |
|
3．境界線を引く
<img src="*" border="◇">
<img src="*" border="◇">のタグでは、画像の外枠の設定をすることができます。外枠なんて必要ないと思う方もいるかもしれませんが、画像をリンクボタンに指定した場合、画像には勝手に外枠がついてしまいます。そんなとき、このタグを使って、外枠を表示しないようにするなどの使い方もありますので、覚えておいてください。
*には、画像ファイル名
◇には、外枠の太さ（0は、外枠を表示しない。）
<html>
<head>
</head>
<body>
<img src="sample.gif" border="0"><p>
<img src="sample.gif" border="2"><p>
<img src="sample.gif" border="5"><p>
<img src="sample.gif" border="10"><p>
</body>
</html>
|
⇒サンプル |
|
4．画像の横に１行の文字列をつける
<img src="*" align="◇">
画像の横に、１行の文字列をつける場合、上記のタグを使います。１行以上の文章の場合については、この後に説明しますが、１行だけの文字列の場合は、このタグを使うと良いでしょう。
*には、画像ファイル名を指定。
◇には、top,middle,bottom を指定。
<html>
<head>
</head>
<body>
<img src="sample.gif" align="top">
topだと、この位置に文字が表示。<br>
<img src="sample.gif" align="middle">
middleだと、この位置。<br>
<img src="sample.gif" align="bottom">
bottomだと、この位置。<br>
</body>
</html>
|
⇒サンプル |
|
5．画像の横に文章をつける
<img src="*" align="◇">
画像の横に、１行以上の文章をつける場合、上記のタグを使います。１行の文字列の場合と同じように思えますが、◇にしていするものが、１行の場合とは違います。また、画像の横に収まりきれなかった、文章は、画像のしたに表示されます。
*には、画像ファイル名を指定。
◇には、left,right を指定。
<html>
<head>
</head>
<body>
<img src="sample.gif" align="left">
First rule of fightclub:<br>
you do not talk about fight club<br>
Second rule of fight club:<br>
you do not talk about fight club<br>
Third rule of fight club:<br>
when someone says stop or goes limp,the fight is over<br>
Fourth fule is:<br>
only two guys in a fight club<p>
<img src="sample.gif" align="right">
Fifth rule:<br>
one fight at a time<br>
Sixth rule:<br>
no shirt,no shoes<br>
Seventh rule:<br>
fights go on as long as they have to<br>
Eighth rule:<br>
if this is your first night at fight club,you have to fight<p>
ちょっと、クールな感じ…
</body>
</html>
|
⇒サンプル |
|
6．画像の説明をつける
<img src="*" alt="◇">
<img src="*" alt="◇">タグでalt指定をすることでマウスを画像に近づけると、指定した文章が表示されるようになります。
<html>
<head>
</head>
<body bgcolor="black">
<center>
<img src="sample.gif" alt="ブラットピットです。">
<p>
<img src="sample.jpg" alt="エドワードノ−トン＆ブラットピットです。">
</center>
</body>
</html>
|
⇒サンプル |
|