HTML ফাইল পাথ সিস্টেম: প্রোজেক্ট ফোল্ডার 
প্রজেক্ট তৈরি করার সময় সঠিক ফাইল পাথ সিস্টেম রাখা খুবই গুরুত্বপূর্ণ। এটি শুধু প্রজেক্টকে সুন্দর দেখায় না, বরং সহজে পরিচালনা করতেও সাহায্য করে। নিচে আমরা ধাপে ধাপে কয়েকটি ফাইল পাথ সিস্টেমের উদাহরণ দেখবো।
১ প্রথম স্টেজ 
প্রোজেক্ট ফোল্ডারের নাম: web-design
এখানে দুটি ফাইল
web-design
ফোল্ডারে রাখা হয়েছে।
স্ট্রাকচার:
web-design/
├── index.html
└── logo.jpg
বুঝুন:
index.html
হলো মেইন ফাইল।logo.jpg
হলো ইমেজ ফাইলের নাম।- এই ইমেজ ফাইলকে html ফাইলের সাথে লিংক করার জন্য
src
অ্যাট্রিবিউটের ভ্যালুতে সরাসরি ইমেজের নাম এক্সটেনশন সহ লিখে দিলেই হয়ে যাবে।<img src="logo.jpg">
২। ইমেজগুলোকে আলাদা ফোল্ডারে রাখা হলে 

একটি বড় প্রোজেক্টে অনেক অনেক ইমেজ প্রয়োজন হয়। সেক্ষেত্রে সব ইমেজগুলো যদি একটি আলাদা ফোল্ডারের মধ্যে রাখা যায় তাহলে ইমেজগুলো আর যেখানে সেখানে ছড়ানো ছেটানো থাকেনা।
স্ট্রাকচার:
web-design/
├── index.html
└── images/
├── logo.jpg
├── slider.jpg
└── banner.jpg
বুঝুন:
- ইমেজগুলো এখন
images
ফোল্ডারে রাখা আছে আর index.html ফাইল তার পাশাপাশি অবস্থান করছে। - তাই প্রথমে
images
ফোল্ডারের মধ্যে যেতে হবেimages/
। তারপরে যে ইমেজটি প্রয়োজন, সেই ইমেজের নাম এক্সটেনশন সহ লিখে দিতে হবে। তাহলেই হয়ে যাবে। যেমনঃ<img src="images/logo.jpg"> <img src="images/slider.jpg"> <img src="images/banner.jpg">
৩। বহুল ব্যবহৃত ফাইল পাথ সিস্টেম 

CSS, JavaScript এবং image গুলোকে assets নামের আলাদা একটি ফোল্ডারে রাখা হয়েছে।
স্ট্রাকচার:
web-design/
├── index.html
└── assets/
├── css/
│ ├── style.css
│ └── responsive.css
├── images/
│ ├── logo.jpg
│ ├── slider.jpg
│ └── banner.jpg
└── js/
├── main.js
└── script.js
বুঝুন:
- index.html ফাইল এই assets ফোল্ডারের পাশেই অবস্থান করছে।
- তাই ইমেজকে লিংক করার জন্য প্রথমে assets ফোল্ডারে যেতে হবে। তারপরে images ফোল্ডারে যেতে হবে। তারপরে যে ইমেজটি প্রয়োজন সেই ইমেজটির নাম এক্সটেনশন সহ সিলেক্ট করে দিতে হবে। CSS এবং JavaScript ফাইলের ক্ষেত্রেও একই রকম হবে।
HTML:
<img src="assets/images/logo.jpg">
<img src="assets/images/slider.jpg">
<img src="assets/images/banner.jpg">
CSS ফাইলে ব্যাকগ্রাউন্ড ইমেজ সেট করার জন্য পাথ যেভাবে লিখবেন 

ইমেজ কিভাবে সেট করতে হয় তা আমরা দেখলাম। এবার ব্যাকগ্রাউন্ড ইমেজ কিভাবে সেট করতে হয় সেটি দেখবো। ব্যাকগ্রাউন্ড ইমেজ CSS এর মাধ্যমে অ্যাড করতে হয়। সেটি ইনলাইন CSS এর মাধ্যমে হতে পারে অথবা এক্সটারনাল CSS এর মাধ্যমে হতে পারে। চলুন আমরা ফোল্ডার স্ট্রাকচার দেখে আসি।
স্ট্রাকচার:
web-design/
├── index.html
└── assets/
├── css/
│ ├── style.css
│ └── responsive.css
├── images/
│ ├── logo.jpg
│ ├── slider.jpg
│ └── banner.jpg
└── js/
├── main.js
└── script.js
এক্ষেত্রে, css
ফোল্ডার থেকে images
ফোল্ডারে থাকা ইমেজগুলোতে অ্যাক্সেস করার জন্য প্রথমে style.css
ফাইলকে css
ফোল্ডার থেকে বের করতে হবে ../
এটি ইউজ করে। style.css
ফাইলটি images
ফোল্ডারের পাশাপাশি অবস্থান করবে। ফলে images
ফোল্ডারের ভেতর থেকে banner.jpg
ইমেজকে অ্যাক্সেস করা যাবে ../images/banner.jpg
লেখার মাধ্যমে।
CSS কোড উদাহরণ:
ধরা যাক, আপনি style.css
ফাইলে একটি ডিভের ব্যাকগ্রাউন্ড ইমেজ হিসেবে banner.jpg
ব্যবহার করতে চান।
CSS কোড:
background-image: url('../images/banner.jpg');
ব্যাখ্যাঃ
../
: এটি CSS ফোল্ডার থেকেstyle.css
ফাইলকেassets
ফোল্ডারে চলে আসতে সাহায্য করে।images/
: assets ফোল্ডার থেকেimages
ফোল্ডারে প্রবেশ করা হয়।banner.jpg
: নির্দিষ্ট ইমেজ ফাইল সিলেক্ট করা হয়।
সম্পূর্ণ CSS কোড:
body {
background-image: url('../images/banner.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
এখন আপনি আপনার প্রজেক্টে সুন্দর একটি ব্যাকগ্রাউন্ড ইমেজ যুক্ত করতে পারেন এবং এর সৌন্দর্য উপভোগ করুন!