ကၽြန္ေတာ္တို႔ရဲ႕ website မွာ image ေတြဘယ္လိုထည့္သြင္းမလဲဆိုတာ ေလ႔လာၾကပါမယ္။

<html>
<head>
<title>Image</title>
</head>
<body>
<h3>Our Image</h3>

<img src="photo.jpg" />

</body>
</html>

ဒီ example ေလးကိုေလ့လာလိုက္ရင္ image ဘယ္လိုထည့္လဲဆိုတာသိႏုိင္ပါတယ္။ အဲဒီ image ဟာ ကၽြန္ေတာ္တို႔ html file နဲ႔ folder တစ္ခုထဲရဲ႕ေအာက္မွာရွိရပါမယ္။

ကၽြန္ေတာ္တို႔ image ေတြကို images ဆိုတဲ႔ folder တစ္ခုရဲ႕ေအာက္မွာ စုစည္းထားၿပီးေခၚသံုးခ်င္တယ္ ဆိုရင္ေတာ႔ ဒီလိုေရးႏုိင္ပါတယ္။

<html>
<head>
<title>Image</title>
</head>
<body>
<h3>Our Image</h3>

<img src="images/photo.jpg" />

</body>
</html>

ကၽြန္ေတာ္တို႔ရဲ႕ image ကိုလိုခ်င္တဲ့ width နဲ႔ height ကိုသတ္မွတ္ေပးႏုိင္ပါတယ္။

<html>
<head>
<title>Image</title>
</head>
<body>
<h3>Our Image</h3>

<img src="images/photo.jpg" width="450" height="300" alt="This is my photo" />
</body>
</html>

ဒီ example မွာ alt=”This is my photo”  ဆိုတဲ့ attribute ကေတာ႔ ပံုမရွိတာတို႔ နာမည္မွားတာတို႔လို error တစ္ခုခုေၾကာင့္ ပံုမတက္တဲ့အခါ ေပၚမဲ့စာသားျဖစ္ပါတယ္။
ကၽြန္ေတာ္တို႔ရဲ႕ ပံုဟာ ကၽြန္ေတာ္တို႔သတ္မွတ္ေပးထားတဲ့ width နဲ႔ heighit အတိုင္းေပၚပါလိမ့္မယ္။

ကၽြန္ေတာ္တို႔ပံုေလးကို ေဘာင္ေလးကြပ္ၾကည့္ၾကပါမယ္။

<html>
<head>
<title>Image</title>
</head>
<body>
<h3>Our Image</h3>

<img src="mandalay.jpg" border="5" />

</body>
</html>

ကၽြန္ေတာ္တို႔ image ကို စာပိုဒ္ေတြနဲေရာေႏွာ ေဖၚျပတဲ့အခါ စာပိုဒ္ရဲ႕ ဘယ္ေနရာမွာ image ကို ေနရာခ်မလဲဆိုတာကို align ဆိုတဲ့ attribute ကို သံုးၿပီးစီစဥ္ေဆာင္ရႊက္လို႔ရပါတယ္။

<html>
<head>
<title>Image</title>
</head>
<body>
<h3>Our Image</h3>

<img src="photo.jpg" align="left"/>
This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test.
</body>
</html>

ဒီ example ေလးက align ဆိုတဲ့ attribute မွာ အျခား value ေတြအေနနဲ႔ right, top, bottom, middle စတာေတြရွိပါတယ္။ value ေနရာမွာေျပာင္းၿပီးထည့္ၾကည့္ႏုိင္ပါတယ္။

ကၽြန္ေတာ္တို႔ image နဲ႔ စာပိုဒ္ေတြရဲ႕ၾကားမွာရွိတဲ့ space ကို အေျပာင္းအလဲျပဳလုပ္ႏုိင္ပါတယ္။

<html>
<head>
<title>Image</title>
</head>
<body>
<h3>Our Image</h3>

<img src="photo.jpg" align="left" hspace="25" vspace="25"/>
This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test.
</body>
</html>

ဒီ example ေလးမွာ hspace attribute က image ရဲ႕ ေဒါင္လိုက္အေနအထားအတိုင္း image ရဲ႕ ဘယ္ဘက္မွာေရာညာဘက္မွာပါ space ျခားေပးပါတယ္။ vspace ကေတာ႔ ေပၚနဲ႔ ေအာက္ေပါ႔ နားလည္မယ္ထင္ပါတယ္။
ေနာက္ၿပီး အျခား site မွာရွိေနတဲ့ image ေတြကိုလည္း ကၽြန္ေတာ္တို႔ site ကိုေခၚထည့္လို့ရပါတယ္။ scr=”http://www.example.com/photo.jpg” ဆိုၿပီး source မွာ url ထည့္ေပးလိုက္႐ုံပါဘဲ။ image ရဲ႔ url ကိုေတာ႔ အဲဒီ image ေပၚမွာ Right Click ေထာက္ၿပီး Copy Image Location ဆိုယူၿပီး Paste လုပ္လိုက္႐ုံပါဘဲ။

About wailynnoo

wailynn oo has written 57 post in this Website..

I am a blogger.