বিভিন্ন ফোল্ডার থেকে যেভাবে একটি ইমেজকে লিংক করবেন: HTML ফাইল পাথ সিস্টেম

HTML ফাইল পাথ সিস্টেম: প্রোজেক্ট ফোল্ডার :open_file_folder:

প্রজেক্ট তৈরি করার সময় সঠিক ফাইল পাথ সিস্টেম রাখা খুবই গুরুত্বপূর্ণ। এটি শুধু প্রজেক্টকে সুন্দর দেখায় না, বরং সহজে পরিচালনা করতেও সাহায্য করে। নিচে আমরা ধাপে ধাপে কয়েকটি ফাইল পাথ সিস্টেমের উদাহরণ দেখবো। :bulb::art:

১ প্রথম স্টেজ :framed_picture:

প্রোজেক্ট ফোল্ডারের নাম: web-design

:point_right: এখানে দুটি ফাইল web-design ফোল্ডারে রাখা হয়েছে।

স্ট্রাকচার:

web-design/
    ├── index.html
    └── logo.jpg

:point_right: বুঝুন:

  • index.html হলো মেইন ফাইল।
  • logo.jpg হলো ইমেজ ফাইলের নাম।
  • এই ইমেজ ফাইলকে html ফাইলের সাথে লিংক করার জন্য src অ্যাট্রিবিউটের ভ্যালুতে সরাসরি ইমেজের নাম এক্সটেনশন সহ লিখে দিলেই হয়ে যাবে।
    <img src="logo.jpg">
    

২। ইমেজগুলোকে আলাদা ফোল্ডারে রাখা হলে :file_folder::framed_picture:

:point_right: একটি বড় প্রোজেক্টে অনেক অনেক ইমেজ প্রয়োজন হয়। সেক্ষেত্রে সব ইমেজগুলো যদি একটি আলাদা ফোল্ডারের মধ্যে রাখা যায় তাহলে ইমেজগুলো আর যেখানে সেখানে ছড়ানো ছেটানো থাকেনা।

স্ট্রাকচার:

web-design/
    ├── index.html
    └── images/
        ├── logo.jpg
        ├── slider.jpg
        └── banner.jpg

:point_right: বুঝুন:

  • ইমেজগুলো এখন images ফোল্ডারে রাখা আছে আর index.html ফাইল তার পাশাপাশি অবস্থান করছে।
  • তাই প্রথমে images ফোল্ডারের মধ্যে যেতে হবে images/ । তারপরে যে ইমেজটি প্রয়োজন, সেই ইমেজের নাম এক্সটেনশন সহ লিখে দিতে হবে। তাহলেই হয়ে যাবে। যেমনঃ
    <img src="images/logo.jpg">
    <img src="images/slider.jpg">
    <img src="images/banner.jpg">
    

৩। বহুল ব্যবহৃত ফাইল পাথ সিস্টেম :hammer_and_wrench::dart:

:point_right: 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

:point_right: বুঝুন:

  • 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 ফাইলে ব্যাকগ্রাউন্ড ইমেজ সেট করার জন্য পাথ যেভাবে লিখবেন :art::sparkles:

ইমেজ কিভাবে সেট করতে হয় তা আমরা দেখলাম। এবার ব্যাকগ্রাউন্ড ইমেজ কিভাবে সেট করতে হয় সেটি দেখবো। ব্যাকগ্রাউন্ড ইমেজ 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');

ব্যাখ্যাঃ

  1. ../ : এটি CSS ফোল্ডার থেকে style.css ফাইলকে assets ফোল্ডারে চলে আসতে সাহায্য করে।
  2. images/ : assets ফোল্ডার থেকে images ফোল্ডারে প্রবেশ করা হয়।
  3. banner.jpg : নির্দিষ্ট ইমেজ ফাইল সিলেক্ট করা হয়।

সম্পূর্ণ CSS কোড:

body {
    background-image: url('../images/banner.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

এখন আপনি আপনার প্রজেক্টে সুন্দর একটি ব্যাকগ্রাউন্ড ইমেজ যুক্ত করতে পারেন এবং এর সৌন্দর্য উপভোগ করুন! :rocket:

5 Likes

এটা নিয়ে ভিডিও হলে আমাওর মত নতুনরা আরো ক্লিয়ার হতে পারতাম।

2 Likes

নেক্সট ক্লাশগুলোর জন্য এটা খুব কাজে আসবে… বুঝতে পারছি :heart::heart::heart:

ঠিকমত বুঝতে না পারলে খুবই সমস্যায় পড়তে হয় এ বিষয় নিয়ে।