HTML File Path – নব্য ওয়েব ডিজাইনারদের জন্য গাইড

“বার বার সঠিক কোড লিখার পরেও কোড রান করলে ইমেজটা কেন পাচ্ছে না? কেন জানি স্লাইডারটা মুভ করছে না? দেখে মনে হচ্ছে কোড তো ঠিকই আছে কিন্তু কোড কেন ঠিকভাবে কাজ করছে না, আমার কম্পিউটারে সমস্যা অথবা আমাকে দিয়ে হবে না!”- নতুন প্রোগ্রামার এবং ওয়েব ডিজাইনারদের এই সমস্যা খুবই কমন। আপনিও যদি প্রোগ্রামিং এর জগতে বিশেষ করে ওয়েব ডিজাইনের জগতে নতুন হয়ে থাকেন তাহলে তো এমন সমস্যায় নিশ্চয়ই পড়েছেন।

খুবই ছোট্ট কিন্তু অতীব মারাত্মক রকমের ভুল এটি। এই ধরনের সমস্যা সাধারণত সঠিকভাবে HTML File Path বা Location ব্যবহার না করার কারনে হয়ে থাকে।

আপনি যদি ওয়েব ডিজাইন নতুন নতুন শিখা শুরু করে থাকেন তাহলে এই পোস্টটি শুধুমাত্র আপনার জন্যই! আজকে আমরা শিখব, What is HTML File Path এবং How to use this correctly?

তো চলুন শুরু করা যাক,

HTML ফাইলে প্রায় সময়ই বিভিন্ন ধরনের ফাইল বাইরে থেকে কল করে প্রদর্শন করার প্রয়োজন পরে। যেমন- Image, Stylesheet, JavaScript ইত্যাদি আমরা প্রায়ই আমাদের index ফাইল অথবা যে কোন html ফাইলের মধ্যে কল করে থাকি।

যেমন একটা ছবি বা ইমেজ কল করানোর জন্য আমরা এই কোড ব্যবহার করিঃ

<img src=”your-image.jpg” />

কিন্তু যত ঝামেলা এই জায়গাতেই হয়ে থাকে। “src” এর ভেতরে সঠিকভাবে ইমেজ এর সোর্স লিখতে না পারলে ইমেজ লোড হবে না এটাই তো স্বাভাবিক। তাহলে চলুন দেখি কিভাবে সঠিকভাবে ইমেজ বা যে কোন ফাইল আমরা কিভাবে কল করতে পারি।

সাধারণত কোন src তে ফাইলের পাথ বা লোকেশন ২ ভাবে কল করা হয়:

1. Absolute File Paths
2. Relative File Paths

Absolute File Path হচ্ছে সরাসরি কোন ওয়েবসাইটের কোন ফাইলের সরাসরি পূর্ণাঙ্গ অ্যাড্রেস।

যেমন-  <img src=”https://www.itbari.com/wp-content/uploads/2017/03/camera-icon.png” alt=”Camera Icon”>

এইভাবে কল করা সবচাইতে সহজ এবং শুধু ছবি ই নয়, যে কোন ফাইলে কোন ওয়েব সার্ভারে আপলোড করে আপনি সেই ফাইলের পরিপূর্ণ URL ব্যাবহার করে ওই ফাইলকে যে কোন HTML এর ভেতরে কল করতে পারেন।

অপরপক্ষে,

Relative File Path হচ্ছে এইভাবে সরাসরি কোন ফাইলের Absolute পাথকে কল না করে সেই ফাইলকে আপনার নিজের সার্ভারেই ওই HTML ফাইলের আশেপাশে রেখে সেখান থেকে কল করা।

বিষয়টা হচ্ছে, ধরুন একটি ছবি আপনি চাচ্ছেন আপনার নিজের ওয়েবসাইটেই রাখবেন এবং সেটা HTML ফাইলের সাথেই রাখলেন। এবার সেটাকে কল করার জন্য আপনি নিচের কোড ব্যবহার করতে পারেনঃ

<img src=”picture.jpg”>

এর অর্থ হচ্ছে, ওই picture.jpg নামের ফাইলটি আপনার html ফাইলের সাথেই রয়েছে এবং আপনি সেটাকে সরাসরি কল করছেন।

এই রিলেটিভ ফাইল পাথ আবার বিভিন্ন ভাবে কল করা যায়, নিচের উদাহরণ দেখুন-

[table id=2/]

উপরে আমরা ৪ ভাবে রিলেটিভ পাথ ব্যবহার করে picture.jpg নামের ইমেজকে কল করেছি। এই চার ভাবে সাধারণত নিজস্ব সার্ভার থেকে ফাইল কল করা হয়।

এই সম্পর্কে আরও বিস্তারিত জানতে পারবেন নিচের ভিডিওটি দেখলেঃ

আশা করি নতুন ওয়েব ডিজাইনারদের উপরের ভিডিওটি যথেষ্ট হেল্প করবে। এরপরেও কোথাও বুঝতে না পারলে ফেসবুক গ্রুপে জানাবেন। ধন্যবাদ।