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

 

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

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

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

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 *

woocommerce bangla video course

সময়ের হট টপিক- “ই-কমার্স ওয়েবসাইট” তৈরির ভিডিও কোর্স- eCom Guru

বর্তমানে সময়ের ওয়েব ডিজাইন ইন্ডাস্ট্রির হট টপিক হচ্ছে ই-কমার্স। অনলাইনে ব্যবসা করার জন্য অনেকেই এখন ই কমার্স পদ্ধতিকে বেছে নিয়েছে। ছোট ছোট ব্যবসায়ী থেকে বড়

Read More »

১০ মিনিটে 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 »
Need Help?