হাইপারলিঙ্ক তৈরি করা (<a> ট্যাগ)

XHTML ডকুমেন্টে হাইপারলিঙ্ক তৈরি করার জন্য <a> (anchor) ট্যাগ ব্যবহৃত হয়। এটি ব্যবহারকারীদের এক পৃষ্ঠা থেকে অন্য পৃষ্ঠায় বা অন্য ওয়েবসাইটে যাওয়ার জন্য সংযোগ (link) প্রদান করে। এক্সএইচটিএমএল-এ <a> ট্যাগ ব্যবহার করার সময় কিছু নির্দিষ্ট নিয়ম অনুসরণ করতে হয়, যেগুলো HTML থেকে একটু ভিন্ন।

১. ট্যাগের মৌলিক গঠন

<a href="URL" target="_blank">Link Text</a>

এখানে:

• href (Hypertext Reference) অ্যাট্রিবিউটটি হাইপারলিঙ্কের গন্তব্য URL নির্দেশ করে। এটি ঐ পৃষ্ঠার ঠিকানা (web address) দেয় যেখানে ব্যবহারকারী ক্লিক করলে পৌঁছাবে।
• target="_blank" অ্যাট্রিবিউটটি লিঙ্কটি নতুন ট্যাবে খুলবে। এটি ঐচ্ছিক, তবে ওয়েব ডেভেলপমেন্টে প্রায়ই ব্যবহৃত হয়, যাতে মূল পৃষ্ঠাটি খোলা থাকে এবং ব্যবহারকারী নতুন পৃষ্ঠাটি নতুন ট্যাবে দেখতে পারেন।
• লিঙ্ক টেক্সটটি হলো সেই অংশ যা ব্যবহারকারী দেখতে পাবে এবং ক্লিক করতে পারবে।

২. ট্যাগের অ্যাট্রিবিউট

২.1 href (Hyperlink Reference)

href অ্যাট্রিবিউটটি লিঙ্কের গন্তব্য বা URL (Uniform Resource Locator) নির্দেশ করে।

<a href="https://www.example.com">Visit Example</a>

এটি ব্যবহারকারীকে "Visit Example" লেখাটিতে ক্লিক করলে https://www.example.com ঠিকানায় নিয়ে যাবে।

২.2 target

target অ্যাট্রিবিউটটি লিঙ্কটি কোথায় খোলা হবে তা নির্ধারণ করে। সাধারণত দুটি মান ব্যবহার করা হয়:

• "_self": এটি ডিফল্ট মান, যেখানে লিঙ্কটি একই উইন্ডো বা ট্যাবে খুলবে।
• "_blank": এটি নতুন ট্যাবে বা উইন্ডোতে লিঙ্কটি খুলবে।

<a href="https://www.example.com" target="_blank">Open in New Tab</a>

২.3 title

title অ্যাট্রিবিউটটি লিঙ্কের উপর মাউস কার্সর রেখে কিছু অতিরিক্ত তথ্য প্রদর্শন করতে ব্যবহার হয়। এটি ইউজারের জন্য হেল্পফুল হতে পারে।

<a href="https://www.example.com" title="Go to Example">Visit Example</a>

এখানে "Go to Example" টেক্সটটি লিঙ্কের উপর মাউস কার্সর রাখলে প্রদর্শিত হবে।

২.4 rel

rel অ্যাট্রিবিউটটি লিঙ্কের সম্পর্ক নির্দেশ করে। এটি নিরাপত্তা এবং SEO (Search Engine Optimization)-এর জন্য গুরুত্বপূর্ণ হতে পারে।

<a href="https://www.example.com" rel="noopener noreferrer" target="_blank">Visit Example</a>

এটি মূলত একটি সুরক্ষিত লিঙ্ক খুলতে ব্যবহৃত হয়, যেখানে নতুন পৃষ্ঠাটি মূল পৃষ্ঠার সাইটের প্রভাব ছাড়াই লোড হয়।

৩. এক্সএইচটিএমএল-এ ট্যাগ ব্যবহার করার নিয়ম

এক্সএইচটিএমএল-এ <a> ট্যাগ ব্যবহার করার সময় কিছু বিশেষ নিয়ম মেনে চলতে হয়:

৩.1 কেস সেনসিটিভিটি

XHTML একটি কেস-সেনসিটিভ ভাষা, তাই <a> ট্যাগ এবং তার অ্যাট্রিবিউটগুলি ছোট হাতের অক্ষরে থাকতে হবে। যেমন:

<a href="https://www.example.com">Visit Example</a>

৩.2 অ্যাট্রিবিউটের মান কোটেশনে থাকতে হবে

XHTML-এ, সব অ্যাট্রিবিউটের মান কোটেশনে রাখতে হবে। যেমন:

<a href="https://www.example.com" target="_blank" title="Go to Example">Visit Example</a>

৩.3 বন্ধ ট্যাগ ব্যবহার

যেহেতু XHTML একটি XML-ভিত্তিক ভাষা, সমস্ত ট্যাগকে সঠিকভাবে বন্ধ করতে হবে। <a> ট্যাগটি অবশ্যই বন্ধ করতে হবে:

<a href="https://www.example.com">Visit Example</a>

৪. বিভিন্ন ধরনের হাইপারলিঙ্ক

৪.1 অভ্যন্তরীণ লিঙ্ক (Internal Link)

একটি অভ্যন্তরীণ লিঙ্ক অন্য পৃষ্ঠায় বা একই পৃষ্ঠার ভেতর ভিন্ন অংশে নিয়ে যায়। এটি সাধারণত ওয়েবসাইটের বিভিন্ন সেকশনে নেভিগেট করতে ব্যবহৃত হয়।

<a href="#section2">Go to Section 2</a>

এটি ব্যবহারকারীকে একই পৃষ্ঠার section2 নামে কোনও স্থান (id) এ নিয়ে যাবে।

৪.2 বাহ্যিক লিঙ্ক (External Link)

একটি বাহ্যিক লিঙ্ক অন্য ওয়েবসাইট বা ওয়েব পৃষ্ঠায় নিয়ে যায়।

<a href="https://www.wikipedia.org" target="_blank">Visit Wikipedia</a>

এটি ব্যবহারকারীকে https://www.wikipedia.org এ নিয়ে যাবে এবং নতুন ট্যাবে খোলবে।

৪.3 ইমেইল লিঙ্ক (Email Link)

একটি ইমেইল লিঙ্ক ব্যবহারকারীকে ইমেইল ক্লায়েন্টে পাঠানোর জন্য একটি নতুন ইমেইল তৈরি করতে সহায়তা করে।

<a href="mailto:someone@example.com">Send Email</a>

এটি ব্যবহারকারীকে ইমেইল প্রোগ্রাম (যেমন Outlook বা Gmail) খুলে দিবে এবং someone@example.com এ একটি নতুন ইমেইল তৈরি করবে।

৫. উদাহরণ

৫.1 একটি সাধারণ বাহ্যিক লিঙ্ক

<a href="https://www.example.com" target="_blank" title="Go to Example Website">Visit Example</a>

এটি "Visit Example" লেখায় ক্লিক করলে নতুন ট্যাবে https://www.example.com ওয়েবসাইটে নিয়ে যাবে এবং ট্যাবের উপর "Go to Example Website" টুলটিপ দেখাবে।

৫.2 অভ্যন্তরীণ লিঙ্ক

<a href="#about">About Us</a>

...

<h2 id="about">About Us</h2>
<p>Information about the company.</p>

এটি "About Us" লিঙ্কে ক্লিক করলে পৃষ্ঠার about সেকশনে নিয়ে যাবে।

এক্সএইচটিএমএল (XHTML) ডকুমেন্টে <a> ট্যাগ ব্যবহার করে আপনি হাইপারলিঙ্ক তৈরি করতে পারেন। এই ট্যাগের মাধ্যমে ওয়েব পেজের মধ্যে বা বাহ্যিক ওয়েবসাইটের মধ্যে নেভিগেট করা যায়। XHTML-এর ক্ষেত্রে, ট্যাগগুলোকে সঠিকভাবে বন্ধ করা, কেস সেনসিটিভিটি এবং অ্যাট্রিবিউটগুলোর মান কোটেশনে রাখা গুরুত্বপূর্ণ।