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

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=”http://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 ফাইলের সাথেই রয়েছে এবং আপনি সেটাকে সরাসরি কল করছেন।

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

SourceDescription
<img src="picture.jpg">"picture.jpg" HTML ফাইলের সাথেই একই ফোল্ডারে আছে
<img src="images/picture.jpg">"picture.jpg" HTML ফাইলের সাথেই images নামের ফোল্ডারের ভেতরে রয়েছে
<img src="/images/picture.jpg"> "picture.jpg" পুরো প্রোজেক্টের রুট ফোল্ডারের ভেতরে images নামের ফোল্ডারের ভেতরে রয়েছে
<img src="../picture.jpg">"picture.jpg" HTML যেখানে আছে সেখান থেকে এক স্টেপ উপরে বা পেছনে রয়েছে

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

 

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

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

The following two tabs change content below.

আব্দুল কাদের (এডমিন)

নিজের সম্পর্কে বলার তেমন কিছুই নেই, খুব সাধারন একটি ছেলে। লিখাপড়া করছি কম্পিউটার সাইন্স এন্ড ইঞ্জিনিয়ারিং ডিপার্টমেন্টে। ছোটবেলা থেকেই টেকনোলোজির প্রতি ভীষণ আগ্রহ ছিল। তাই শেষপর্যন্ত টেককেই বেছে নিয়েছি পথ চলার সঙ্গী হিসেবে। কাজ করি ওয়েব ডেভেলপিং এবং ডিজিটাল মার্কেটিং নিয়ে। ভালবাসি আইটি সংক্রান্ত নতুন কিছু শিখতে। আমার শেখা তখনই স্বার্থক যখন সেটা আমি আরেকজনের মাঝে ছড়িয়ে দিতে পারব। আর এই জন্যই প্রতিষ্ঠা করেছি আইটি বাড়ি। ইনশাআল্লাহ আমাদের স্বপ্নের লাল সবুজের ডিজিটাল বাংলাদেশ হবেই হবে।

Check Also

সম্পূর্ণ ফ্রীতেই তৈরি করে নিন আপনার জীবনের প্রথম ওয়েবসাইট! ওয়েব ডিজাইনে আগ্রহীদের পথচলা শুরু হোক আজ থেকেই। ভিডিও চেইন টিউন [পর্ব-৪]

গত পর্বে আমরা দেখেছি কিভাবে আপনি আপনার ওয়েবসাইটে ওয়ার্ডপ্রেস ইন্সটল করতে পারেন। আজকের পর্বে আমরা …

3 comments

  1. Mohammed Lokman Hossain

    I wanna be a web designer, required your kind cooperation.

  2. itbari is one of the best website to learn webdesigning.

Leave a Reply

Your email address will not be published. Required fields are marked *