HTML anchor tag এর মাধ্যমে ওয়েবপেজের বিভিন্ন উপাদানগুলি বা ওয়েবপেজের মধ্যে লিঙ্ক সংযোগ করা যায়। anchor tag হল HTML এর একটি গুরুত্বপূর্ণ ট্যাগ যা ওয়েবপেজের এক অংশ থেকে অন্য অংশে navigation বা link তৈরির জন্য ব্যবহৃত হয়। anchor ট্যাগের মাধ্যমে আপনি এক পেজ থেকে অন্য পেজ , বা একই পেজের ভিতরে নির্দিষ্ট অংশে user কে redirect করতে পারেন।
এই ব্লগে আমরা HTML এর Anchor Tag কীভাবে কাজ করে, এর সিনট্যাক্স, ব্যবহার, এবং কিছু উদাহরণ নিয়ে আলোচনা করব।
Table of Contents
HTML এ Anchor Tag কী ?
HTML এ Anchor Tag হল <a> ট্যাগ, যা সাধারণত link তৈরি করতে ব্যবহৃত হয়। Anchor Tag এর মাধ্যমে আপনি একটি ওয়েবপেজ কে অন্য একটি ওয়েবপেজ এর সাথে লিঙ্ক তৈরি করতে পারেন, একই পেজের একটি নির্দিষ্ট সেকশনে যেতে পারেন, বা এমনকি email লিঙ্কও তৈরি করতে পারেন। Anchor Tag এর সবচেয়ে গুরুত্বপূর্ণ Attribute হল href , যা লিঙ্কটির destination নির্দেশ করে।
syntax
<a href="https://techinbengali.com/">Click Here</a>উপরের উদাহরণে, “Click Here” হল লিঙ্কের টেক্সট, এবং userএটিতে ক্লিক করলে তারা https://techinbengali.com পেজে চলে যাবে।
HTML Anchor Tag এর গুরুত্বপূর্ণ Attributes
href Attribute
href (Hypertext Reference) Attribute হলো Anchor Tag এর সবচেয়ে গুরুত্বপূর্ণ অংশ। এটি সেই URL যেখানে ক্লিক করলে user নির্দিষ্ট destination এ চলে যাবে।
Syntax
<a href="https://www.google.com">Visit Google</a>এই উদাহরণে, ব্যবহারকারী “Visit Google” লিঙ্কটি ক্লিক করলে গুগল এ চলে যাবে।
target Attribute
target Attribute নির্ধারণ করে যে লিঙ্কটি ক্লিক করার পর নতুন ওয়েবপেজটি কোথায় খোলা হবে। সাধারণত, _blank মান ব্যবহার করা হয়, যা লিঙ্কটিকে একটি নতুন ট্যাবে খুলতে সাহায্য করে।
Syntax
<a href="https://www.facebook.com" target="_blank">Open Facebook in a New Tab</a>এখানে লিঙ্কটি ক্লিক করলে facebook.com এটি নতুন ট্যাবে খুলবে।
title Attribute
title Attribute অতিরিক্ত তথ্য দিতে ব্যবহৃত হয়, যা ব্যবহারকারীর মাউস লিঙ্কের উপর গেলে একটি টুলটিপ হিসেবে দেখানো হয়।
Syntax
<a href="https://techinbengali.com/" title="Visit TechInBengali">TechInBengali</a>এখানে, লিঙ্কের উপর হোভার করলে “Visit TechInBengali” টুলটিপ হিসেবে দেখানো হবে।
rel Attribute
title Attribute অতিরিক্ত তথ্য দিতে ব্যবহৃত হয়, যা ব্যবহারকারীর মাউস লিঙ্কের উপর গেলে একটি টুলটিপ হিসেবে দেখানো হয়।
Syntax
<a href="https://techinbengali.com/" title="Visit TechInBengali">TechInBengali</a>এখানে, লিঙ্কের উপর Hover করলে “Visit TechInBengali” টুলটিপ হিসেবে দেখানো হবে।
Anchor Tag এর মাধ্যমে বিভিন্ন ধরণের লিঙ্ক তৈরি করা
External Link
Anchor Tag ব্যবহার করে আপনি একটি ওয়েবপেজ কে অন্য কোনো ওয়েবসাইটের সাথে লিঙ্ক তৈরি করতে পারেন। এটি একটি সাধারণ external লিঙ্ক।
যেমন
<a href="https://www.twitter.com">Visit Twitter</a>Internal Link
Anchor Tag ব্যবহার করে আপনি একই ওয়েবসাইটের অন্য পৃষ্ঠায় লিঙ্ক করতে পারেন।
যেমন
<a href="/about.html">About Us</a>Links to Specific parts of the page
Anchor Tag এর মাধ্যমে একই পৃষ্ঠার নির্দিষ্ট অংশে যাওয়ার জন্য লিঙ্ক তৈরি করা যায়। এর জন্য প্রথমে নির্দিষ্ট অংশটিতে একটি id সেট করতে হয়, এবং তারপর সেই id-তে লিঙ্ক করা হয়।
যেমন
<a href="#section1">Go to Section 1</a>
<h2 id="section1">This is Section 1</h2>Email Link
Anchor Tag ব্যবহার করে ইমেইল পাঠানোর জন্য লিঙ্ক তৈরি করা যায়। এর জন্য mailto: ব্যবহৃত হয়।
যেমন
<a href="mailto:someone@example.com">Send an Email</a>এই লিঙ্কটি ক্লিক করলে ইমেইল ক্লায়েন্ট খুলবে এবং আপনি মেইল পাঠাতে পারবেন।
উপসংহার
HTML Anchor Tag ওয়েবপেজে লিঙ্ক তৈরি করার জন্য ব্যবহৃত হয়। এর মাধ্যমে আপনি external বা internal লিঙ্ক তৈরি করতে পারেন, email লিঙ্ক তৈরি করতে পারেন, বা একই পৃষ্ঠার মধ্যে নেভিগেশন করতে পারেন।
Anchor Tag এর বিভিন্ন Attribute এবং সঠিক সিনট্যাক্স জানলে, আপনি আরও কার্যকর এবং প্রফেশনাল ওয়েবপেজ তৈরি করতে সক্ষম হবেন।
F.A.Q
HTML Anchor Tag কী এবং এটি কীভাবে কাজ করে?
HTML Anchor Tag হলো <a> ট্যাগ, যা একটি লিঙ্ক তৈরি করতে ব্যবহৃত হয়। এটি user দের একটি পেজ থেকে অন্য পেজে স্থানান্তরিত করতে বা একই পেজে নির্দিষ্ট অংশে নিয়ে যেতে সাহায্য করে। Anchor Tag এর সবচেয়ে গুরুত্বপূর্ণ Attribute হলো href, যা লিঙ্কটির destination নির্ধারণ করে।
HTML এ href Attribute এর ব্যবহার কী?
HTML এর href Attribute ব্যবহার করে আমরা লিঙ্কের destination নির্ধারণ করি। এটি একটি URL বা অন্য কোনো ওয়েবপেজ নির্দেশ করে , লিঙ্কটি ক্লিক করলে user সেখানে যাবে। উদাহরণ:
<a href="https://techinbengali.com">Visit TechinBengali</a>।
HTML Anchor Tag এ target Attribute কী কাজ করে?
HTML এর target Attribute নির্ধারণ করে যে লিঙ্কটি ক্লিক করার পর নতুন পৃষ্ঠাটি কোথায় খোলা হবে। উদাহরণস্বরূপ, target="_blank" ব্যবহৃত হলে লিঙ্কটি একটি নতুন ট্যাবে খোলা হবে।
HTML Anchor Tag দিয়ে email লিঙ্ক কীভাবে তৈরি করবেন?
HTML Anchor Tag ব্যবহার করে ইমেইল লিঙ্ক তৈরি করতে mailto: ব্যবহার করা হয়। উদাহরণ: <a href="mailto:someone@example.com">Send an Email</a>। এই লিঙ্কটি ক্লিক করলে আপনার ডিফল্ট ইমেইল ক্লায়েন্ট খুলবে।
HTML এর Anchor Tag এ title Attribute কেন গুরুত্বপূর্ণ?
Anchor Tag এ title Attribute ব্যবহারকারীদের অতিরিক্ত তথ্য প্রদান করে, যা মাউস লিঙ্কের উপর হোভার করলে টুলটিপ হিসেবে প্রদর্শিত হয়। এটি ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং লিঙ্কের উদ্দেশ্য বোঝায়।
<a href="https://techinbengali.com">Visit TechinBengali</a>।
Anchor Tag দিয়ে পৃষ্ঠার নির্দিষ্ট অংশে কীভাবে লিঙ্ক করা যায়?
Anchor Tag এর মাধ্যমে একই পৃষ্ঠার নির্দিষ্ট অংশে লিঙ্ক করতে id ব্যবহার করা হয়। উদাহরণ: <a href="#section1">Go to Section 1</a> এবং <h2 id="section1">This is Section 1</h2>।
HTML এ external লিঙ্ক কীভাবে তৈরি করা যায়?
HTML Anchor Tag ব্যবহার করে external লিঙ্ক তৈরি করতে href এ ওয়েবসাইটের URL দিতে হবে। উদাহরণ: <a href="https://www.google.com">Visit Google</a>।
Anchor Tag ব্যবহার করে একই ওয়েবসাইটের অন্যান্য পেজে লিঙ্ক কীভাবে করা যায়?
Anchor Tag দিয়ে একই ওয়েবসাইটের অন্যান্য পেজে লিঙ্ক করতে আপনাকে শুধুমাত্র সেই পেজের path উল্লেখ করতে হবে। উদাহরণ: <a href=”/about.html”>About Us</a>।
HTML Anchor Tag এর target="_self" এবং target="_blank" এর মধ্যে পার্থক্য কী?
target="_self" ডিফল্ট behavior, এটির মানে লিঙ্কটি একই ট্যাবে খুলবে। অপরপক্ষে, target="_blank" লিঙ্কটি একটি নতুন ট্যাবে খুলবে, যার ফলে বর্তমান পেজটি অক্ষুণ্ণ থাকবে।
