href অ্যাট্রিবিউট
href অ্যাট্রিবিউট HTML-এ সবচেয়ে গুরুত্বপূর্ণ অ্যাট্রিবিউটের একটি।
href ব্যবহৃত হয় URL স্পেসিফাই করতে:
- হাইপারলিংক (যাকে সাধারণত "লিংক" বলা হয়)।
- বা এক্সটার্নাল রিসোর্স ইম্পোর্ট করতে, যেমন স্টাইলস ও স্ক্রিপ্টস।
href-এর সবচেয়ে সাধারণ ইউজ কেস: অ্যাঙ্কর এলিমেন্ট <a>-এ ইন্টারনাল বা এক্সটার্নাল লিংক (URL) যোগ করা:
<a href="link-path">Click</a>ইন্টারনাল লিংক with href
আমরা একটি লিংক তৈরি করব যা ক্লিক করলে ইউজারকে ফ্রন্ট পেজে নিয়ে যাবে। এটিকে বলব Home।
প্রথমে, অ্যাঙ্কর এলিমেন্ট ডিফাইন করুন:
<a>Home</a>এখন <a> এলিমেন্টকে হাইপারলিংক बनाने href অ্যাট্রিবিউট যোগ করুন:
<a href>Home</a>এবং এটিকে "/" ভ্যালু অ্যাসাইন করুন:
<a href="/">Home</a>ব্রাউজারে কীভাবে রেন্ডার হয়:
Home
ভালোভাবে বুঝতে অ্যাঙ্কর এলিমেন্ট উদাহরণটি ভাঙিয়ে দেখি:
<a>হলো ওপেনিং অ্যাঙ্কর ট্যাগ</a>হলো ক্লোজিং অ্যাঙ্কর ট্যাগHomeহলো কন্টেন্ট (ব্রাউজারে দৃশ্যমান একমাত্র অংশ)hrefহলো অ্যাট্রিবিউট নাম=হলো অ্যাসাইনমেন্ট অপারেটর"/"হলো অ্যাট্রিবিউট ভ্যালু
এই ওয়েবসাইটে, এই সেম অ্যাঙ্কর এলিমেন্ট হেডারের টপ লেফ্ট কোণে TechStacker লোগোকে র্যাপ করেছে (ক্লিক করলে ফ্রন্ট পেজে যাবে)।
আপনি প্রায়শই এই কোড উদাহরণ ওয়েবসাইটের নেভিগেশন বার <nav>...</nav>-এ দেখবেন।
মান লেন, আপনার ওয়েবসাইটে মোট ৩টি পেজ আছে: Home, About, Contact, এবং আপনি এদের জন্য ইন্টারনাল লিংক তৈরি করতে চান।
প্রথমে, প্রতিটি পেজের HTML ডকুমেন্ট নাম দিন:
- Home হবেঃ
index.html - About হবেঃ
about.html - Contact হবেঃ
contact.html
তারপর প্রতিটি ডকুমেন্টের জন্য রিলেটিভ পেজ রাউট (URL) ডিফাইন করুন:
<a href="/">Home</a> <a href="/about">About</a> <a href="/contact">Contact</a>এখন প্রতিটি অ্যাঙ্কর এলিমেন্টকে <nav> এলিমেন্ট দিয়ে র্যাপ করুন:
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>এখন আপনার কাছে একটি নেভিগেশন কম্পোনেন্ট আছে যা আপনি আপনার ওয়েবসাইটের হেডার, ফুটার, বা সাইডবার-এ রাখতে পারেন।
এক্সটার্নাল লিংক with href
আপনি যদি আপনার ওয়েবসাইট ছাড়া অন্য ওয়েবসাইটে লিংক দিতে চান, তবে এক্সটার্নাল লিংক ফরম্যাট ব্যবহার করুন, যেখানে আপসোলিউট পাথ স্পেসিফাই করবেন:
<a href="https://www.youtube.com">Link to YouTube.com</a>এই সুযোগে আমার নিজস্ব YouTube চ্যানেলে লিংক দিচ্ছি:
Link to my YouTube channel (TechStacker).
