এইচটিএমএল লিঙ্ক

এইচটিএমএল লিঙ্ক প্রায় সমস্ত ওয়েব পেজেই পাওয়া যায়। লিঙ্কগুলি ব্যবহারকারীদের এক ওয়েব পেজ থেকে অন্য ওয়েব পেজে যেতে ব্যবহার করে।

এইচটিএমএল লিঙ্ক  – হাইপারলিঙ্কস

এইচটিএমএল লিঙ্কগুলি হাইপার লিঙ্ক অর্থাৎ এক ওয়েব সাইট থেকে অন্য ওয়েব সাইটে কিংবা এক পেজ থেকে অন্য পেজে যেতে সাহায্য করে ।

আপনি একটি লিঙ্কে ক্লিক অন্য একটি ওয়েব ডকুমেন্টে চলে যেতে পারেন ।

আপনি যখন কোনও লিঙ্কের উপরে মাউসট পয়েন্টার টি নিয়ে যাবেন, তখন মাউসের তীরটি একটি ছোট হাতে পরিণত হবে।

একটি লিংক এর ভেতরে শুধু টেক্সট ই থাকবে এমন না । লিংক এর ভেতরে ইমেজ কিংবা অন্য এইচটিএমএল এলিমেন্ট ও থাকতে পারে ।

HTML Link এর গঠন

এইচটিএমএল <a> ট্যাগ একটি হাইপারলিংক সংজ্ঞায়িত করে। এটির  গঠন নিচের মতো :

<a href="url">link text</a>

<a> এলিমেন্ট এর সবচেয়ে গুরুত্বপুর্ণ এট্রিবিউট হচ্ছে href এট্রিবিউট  যা বলে দেয় লিংক টিতে ক্লিক করলে সেটি আপনাকে কোথায় নিয়ে যাবে ।

উপরের কোড ব্লক এর link text টি হল সেই টেক্সট যেটি আপনি ওয়েব পেজে দেখতে পাবেন ।

আর url হলো href attribute এর ভেলু লিংক টিতে ক্লিক করলে আপনি কোথায় যাবেন সেটি এখানে থাকে ।

নিচের উদাহরণ টি দেখুন । এটির শুধু Visit Kivabe.com আপনি ওয়েব পেজে দেখতে পাবেন এবং এটিতে ক্লিক করতে পারবেন

<a href="https://kivabe.com">Visit Kivabe.com</a>

নিজে চেষ্ঠা করুন

ডিফল্ট ভাবে একটি লিংক সব ওয়েব ব্রাউজার এ নিচের বৈশিষ্ট গুলো নিয়ে প্রদর্শিত হবে

• যে লিংক টি ভিজিট করা হয়নি সেটার নিচে আন্ডার লাইন থাকবে এবং রং হবে নীল
• যে লিংক টি ভিজিট করা হয়েছে সেটার নিচে আন্ডার লাইন থাকবে এবং রং হবে পারপাল
• যে লিংক টি একটিভ, অর্থাৎ আপনি ক্লিক করেছেন কিংবা ধরে আছেন,  সেটার নিচে আন্ডার লাইন থাকবে এবং রং হবে লাল

লিংক গুলোর অন্য চেহারা পেতে CSS ব্যবহার করা হয়

এইচটিএমএল লিঙ্ক এর target এট্রিবিউট

ডিফল্ড ভাবে থাকে লিংক গুলোতে ক্লিক করলে সেটি এই ওয়েব পেজ সরিয়ে নতুন পেজটি সেখানেই ওপেন করে । আর এই বৈশিষ্ট টি বদল করা যায় target attribute দিয়ে ।

target এট্রিবিউট টি বলে দেয় ওয়েব পেজ বা লিংক করা ডকুমেন্ট গুলো কোথায় খুলবে

target এট্রিবিউট টি নিচের চারটি ভেলু নিতে পারে

• _self – এটি ডিফল্ড, একই ট্যাব/উইন্ডোতে  document ওপেন করে যখন লিংক টিতে ক্লিক করা হয়
• _blank – নতুন ট্যাব বা উইন্ডোডে ডকুমেন্ট ওপেন করে
• _parent – parent frame এ ডকুমেন্ট ওপেন করে
• _top – ডকুমেন্ট কে উইন্ডোর ফুল বডিতে ওপেন করে

এদের মধ্যে _self তো ডিফল্ট ভাবেই কাজ করে আর সবচেয়ে বেশি ব্যবহার হয় _blank.

target=”_blank” ব্যবহার করে ডকুমেন্ট নতুন ট্যাবে ওপেন করার একটি উদাহরন

<a target="_blank" href="https://kivabe.com">নতুন ট্যাবে ওপেন হবে</a>

নিচের লিংকটিতে ক্লিক করুন

নতুন ট্যাবে ওপেন হবে

অ্যাবসুলুট ইউআরএল এবং রিলেভেন্ট ইউআরএল

উপরের দুটি উদাহরন ই absolute URL ( পুরো ওয়েব ঠিকানা  ) ব্যবহার করা হয়েছে href এট্রিবিউট এ

আর একই ওয়েব সাইটের ভেতরের পেজ গুলো সাধারনত relative URL ( http:// বা https:// বা https://www ছাড়া ) ব্যবহার করে করা হয় ।

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="kivabe-logo-img.jpg">HTML Images</a></p>
<p><a href="/codes/html/html-intro/">CSS Tutorial</a></p>

নিজে চেষ্টা করুন

ইমেজ দিয়ে লিংক করা

কোনও লিঙ্ক হিসাবে কোনও চিত্র ব্যবহার করতে, <a> ট্যাগের মধ্যে <img> ট্যাগটি রাখুন

<a href="https://kivabe.com">
  <img src="/logo_round.png" alt="kivabe.com logo">
</a>

নিজে চেষ্টা করুন

Email Address লিংক করা

ইমেইল এড্রেস এ ক্লিক করলে সরাসরি ইমেইল ক্লায়েন্ট এ ইমেইল এড্রেস টি ইমেইল ক্লায়েন্টে ওপেন করে mailto: ব্যবহার করা হয় href এট্রিবিউট এর ভেতরে ।

<a href="mailto:email@demosite.com">
  মেইল পাঠান email@demosite.com এ
</a>

নিজে চেষ্টা করুন

ফোন নাম্বার লিংক করা

ফোন নাম্বার এ ক্লিক করলে কলা ডায়ালার ওপেন করে tel: ব্যবহার করা হয় href এট্রিবিউট এর ভেতরে ।

<a href="tel:010000000000">
  আমাদের কল করুন ০১৭xxxxxxxx
</a>

নিজে চেষ্টা করুন

বাটনে এইচটিএমএল লিঙ্ক

কোনও লিঙ্ক হিসাবে এইচটিএমএল বাটন ব্যবহার করতে আপনাকে কিছু জাভাস্ক্রিপ্ট কোড যুক্ত করতে হবে।

JavaScript আপনাকে নির্দিষ্ট ইভেন্টগুলিতে কী ঘটে তা নির্দিষ্ট করার অনুমতি দেয়, যেমন একটি Buttone এ ক্লিকের জন্য:

<button onclick="document.location=https://kivabe.com/namaz/'"> নামাজের সময় দেখুন</button>

নিজে চেষ্টা করুন

onclick এটি জাভাস্ক্রিপ্ট ইভেন্ট হেন্ডেলার, জাভাস্ক্রিপ অধ্যায় এ আরো জানবো

Link Titles

title attribute ব্যবহার করে লিংক এর টাইটেল দেখানো যায় ।

<a href="https://kivabe.com">
   <img title="Click to go to kivabe.com" src="/logo_round.png" alt="kivabe.com logo">
</a>

নিজে চেষ্টা করুন

title attribute ব্যবহার করা লিংক এর উপর মাউস নিয়ে গেলে নিচের মতো করে দেখায় ।

অধ্যায় সারাংশ

• <a> element এর ব্যবহার করে লিংক করা
• href attribute এর ব্যবহার করে ডকুমেন্ট ঠিক করা
•  target attributeএর ব্যবহার করে লিংক করা ডকুমেন্ট কোথায় ওপেন হবে সেটি ঠিক করা
• লিংক এর মধ্যে ইমেজ নেয়া <img> element (inside <a>)
• mailto: এর ব্যবহার করে লিংক এর মাধ্যমে ইমেইল ক্লায়েন্ট ওপেন করা
• tel: এর ব্যবহার করে লিংক এর মাধ্যমে Calling ক্লায়েন্ট ওপেন করা
• বাটন লিংক করা