আইটি বাড়ি

স্বনির্ভর বাংলাদেশের স্বপ্নে...

লকডাউনে ফ্রীল্যান্সিং!

ঘরে থেকে অনলাইনে কাজ শুরু করার এখনই সময়...

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://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 নামের ইমেজকে কল করেছি। এই চার ভাবে সাধারণত নিজস্ব সার্ভার থেকে ফাইল কল করা হয়।

 

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

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

ফেসবুকে শেয়ার করুন-

Share on facebook
Share on linkedin
Share on pinterest
Share on reddit

7 Responses

  1. vai apner tutorial gulo asolai kub valo, ekta notun user apner tutorial gulo dekla asolai onek kisu shikbe,

  2. Youtube e কয়েকটি চ্যানেল এ দেখতে পায় খুব সহজেই অনেক দ্রুত কোডিং ছাড়াই প্রফেসনাল ওয়েবসাইট তৈরি করা যায় এটা কি সত্য নাকি বুয়া আর যদি সত্য হয় তাহলে আমাদের ওয়েব ডিজাইন কোর্স করে কোডিং শিখে লাভ কি এটা নিয়ে অনেক কনফিউশন এ আছি,প্লিজ কিছু জানালে ভালো হইতো…

    1. আসলে এই নিয়ে নতুনদের অনেকেই কনফিউশনে থাকে, আপনি এই লিঙ্কে আমাদের বিস্তারিত গাইডলাইন দেখে নিলে সম্পূর্ণভাবে ক্লিয়ার হয়ে যাবেন আশা করছি- https://www.youtube.com/watch?v=zfRxyobyZbM&list=PLwEnpvAjZSfR3GAqaSowp158n2x4SUfMN

Leave a Reply

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

১০ মিনিটে Slider Revolution দিয়ে ওয়েবসাইটে Awesome Slider তৈরি করা শিখুন!

স্লাইডার যে কোন ওয়েবসাইটের জন্য এক অতি গুরুত্বপূর্ণ ইলিমেন্ট। আমাদের ওয়েব গুরু কোর্সে আমরা দেখেছি কিভাবে Raw কোড এডিট করে স্লাইডার তৈরি করা যায়। কিন্তু

Read More »
wordpress-theme-customization-course

ইনশা-আল্লাহ্‌ ২০২০ সালেই তৈরি হবে ৫০০ সফল ওয়েব ডিজাইনার, সুযোগ প্রত্যেকের জন্য!!!

আপনি কি এমন একটি সহজ, বৈধ এবং হালাল ইনকাম মাধ্যম খুজছেন যেটা থেকে মাত্র কয়েক মাসেই অনলাইন থেকে আয় শুরু করা যাবে? সত্যি বলতে অনলাইন

Read More »

আইটি বাড়ি থেকে যারা ডোমেইন হোস্টিং কিনেছেন তারা SSL সার্টিফিকেট অ্যাক্টিভ করবেন যেভাবে

আইটি বাড়ি ইদানিং ডোমেইন হোস্টিং সার্ভিস দেয়া চালু করেছে। ইতিমধ্যে অনেকেই আমাদের সার্ভিস ব্যবহার করছেন। সুখবর হচ্ছে আমাদের সকল হোস্টিং গ্রাহকদের জন্য আমরা SSL সার্টিফিকেট

Read More »
7-ways-to-earn-with-seo

SEO শিখে অনালাইনে উপার্জনের ৭ টি উপায় [কাজ করুন বিড ছাড়া] -এবার বড় কিছুর চেষ্টা করুন

SEO- Search Engine Optimization অনলাইনে সেলস এন্ড মার্কেটিং ডিপার্টমেন্টের অন্যতম বৃহৎ অংশ। সাধারন কথায় বলতে গেলে গুগলে বা অন্যান্য সার্চ ইঞ্জিন গুলোতে অনলাইন ভিত্তিক কোন

Read More »
earn money from internet with seo and web design

ওয়েব ডিজাইন এবং SEO, এ দুটো জানা থাকলে ইন্টারনেট থেকে হাজার উপায়ে আয় করা সম্ভব [গুজব নয়, সত্যি!]

অনলাইনে আয় বলতেই আমরা অনেকে মনে করি গ্রাফিক্স ডিজাইন, অ্যাফিলিয়েট মার্কেটিং, ওয়েব ডিজাইন, অমুক তমুক আরো ব্লা ব্লা ব্লা হাবিজাবি অনেক কিছুই। হ্যা, সত্যি সত্যি-ই

Read More »

আগামী ২০-৩০ বছরে চাকরী যেতে পারে ৬০-৮০% অসৃজনশীল পেশার চাকরিজীবীদের! বিশ্বাস হচ্ছে না? এটা পড়ুন

(নিচের লিখাটি হয়ত সবার বিশ্বাস হবে না, তবে হ্যা, পোস্টটি  বেশ কয়েকটি নামকরা পত্রিকা এবং এক্সাপার্টদের কেস স্টাডির প্রেক্ষিতে করা হয়েছে, পজিটিভ মেন্টালিটি থাকলেই কেবল পোস্টটি

Read More »