Web Design

নতুন Web Design যারা শিখতেছেন!! তাদের জন্য HTML File Path নিয়ে পরিপূর্ণ আলোচনা (বিস্তারিত ভাবে জানুন)

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

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

আমি উপরে যে সমস্যা টার কথা বললাম এটা প্রায় সকল নতুন Programmer এবং Web Designer দের একটা খুবই কমন সমস্যা। আপনিও যদি Programming এর জগতে, বিশেষ করে ওয়েব ডিজাইনের জগতে নতুন হয়ে থাকেন। তাহলে তো আমার মনে হয় আপনিও এমন সমস্যায় নিশ্চয়ই পড়েছেন।

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

HTML ফাইলে প্রায় বেশির ভাগ সময়ই বিভিন্ন ধরনের ফাইল বাইরে থেকে কল করে প্রদর্শন করার প্রয়োজন পরে। যেমন- Image, Stylesheet, JavaScript ইত্যাদি আমরা প্রায়ই আমাদের index ফাইল অথবা যে কোন html ফাইলের মধ্যে কল করে থাকি। যেটাকে আমরা অনেকে Linked বলে জানি। তো যাই হোক আমি ঠিক এটাই বুঝাতে চাচ্ছি।

Example: একটা Picture বা Image কল করানোর জন্য বা অন্য কোথাও কার কোনো ফাইল যেকোনো Html ফাইলে সো করানোর জন্য আমরা নিচের এই কোড টা ব্যবহার করে থাকি:

[code][/code]

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

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

1. Absolute File Paths

2. Relative File Paths

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

Example: [code]https://sitename.com/wp-content/uploads/2017/03/camera-icon.png” alt=”Camera Icon”>[/code]

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

অপরপক্ষে,

Relative File Path: এটা হচ্ছে সরাসরি কোনো ফাইলের Absolute পাথকে কল না করে, সেই ফাইলকে আপনার নিজের সার্ভারেই ওই HTML ফাইলের আশেপাশে রেখে সেখান থেকে কল করা। মানে নিজের Server এই আপলোড করে Just যেখানে আপলোড করছেন সেখান থেকে লিংক টা নিয়ে বা URL টা নিয়ে src এর পরের অংশে বসিয়ে দিলেই আপনি সেই ফাইল বা Image টা কে সো করাতে পারবেন।

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

[code][/code]

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

তো এই ভাবেই মুলত আপনারা Html ফাইলে যেকোনে পিকচার বা ছবি সো করাতে পারবেন। খুব সোজা একটা কাজ এবং খুবই ছোট্ট। বাট এটা কিন্তু একটা মারাত্মক ভুল। আপনি যেহেতু Programming এ এসেছেন সেহুতো নিশ্চয়ই জানেন যে কোডিং এ যদি একটা অক্ষর ও ভুল হয় তাহলে পুরো কোডটি অচল হয়ে যাবে। মানে সেই কোড আর কাজ করবে না।

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

Leave a Reply

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