একটি HTML হাইপারলিংক আপনাকে একটি ভিন্ন পেজে নেভিগেট করতে দেয়। একটি <a> ট্যাগ একটি অ্যাঙ্কর নির্ধারণ করে। "href" অ্যাট্রিবিউট নির্দিষ্ট করে যে ব্যবহারকারী লিংকে ক্লিক করলে কোথায় নেওয়া হবে। <a> এবং ক্লোজিং </> ট্যাগের মাঝপথের টেক্সটই অ্যাঙ্কর টেক্স্ট যা ব্যবহারকারীকে দেখানো হয়।
যখন আপনি একটি ওয়েব পেজ বানাচ্ছেন, আপনি অন্য একটি ওয়েব পেজ বা ওয়েবসাইট রেফারেন্স করতে চাইতে পারেন। উদাহরণস্বরূপ, আপনি একটি ব্লগ তৈরি করছেন এবং একটি আর্টিকেলে লিংক দিতে চান যা আপনি মনে করেন প্রাসঙ্গিক।
হাইপারলিংক, বা লিংক, একটি ওয়েব পেজকে অন্যটির সাথে সংযুক্ত করতে এবং ব্যবহারকারীদের একাধিক ওয়েব পেজের মধ্যে দ্রুত যেতে দিতে ব্যবহৃত হয়। হাইপারলিংক আপনার নিজস্ব সাইটের অন্য পেজগুলো বা ভিন্ন ওয়েবসাইটের পেজগুলোর সাথে লিংক করতে ব্যবহার করা যায়।
এই গাইডে, আমরা HTML-এ হাইপারলিংকিং এর মৌলিক বিষয় ভাঙে দেখাব। আমরা লিংকের টার্গেট সেট করা, বুকমার্কের জন্য অ্যাঙ্কর তৈরি করা, এবং ইমেইল অ্যাড্রেস ও ওয়েব এলিমেন্টে লিংকিং সম্পর্কে কথা বলব।
HTML Hyperlink
একটি HTML হাইপারলিংক অন্য একটি ওয়েব রিসোর্সকে নির্দেশ করে। একটি হাইপারলিংক একটি <a> ট্যাগ এবং একটি ক্লোজিং </a> ট্যাগের মধ্যে নির্ধারিত হয়। এই দুটি ট্যাগের মাঝপথের টেক্সট লিংক ক্লিক করলে ব্যবহারকারীকে লিংক করা ওয়েব রিসোর্সে নেয়।
হাইপারলিংক তৈরি করা হয় <a> ট্যাগ ব্যবহার করে। একটি HTML ফাইলে হাইপারলিংকর সিনট্যাক্স:
<a href="your_url">This text will go to a URL.</a>
আমাদের ট্যাগগুলোর মাঝপথের টেক্সট আমাদের ওপেনিং ট্যাগে নির্দিষ্ট URL-এ লিংক করবে। আমরা href অ্যাট্রিবিউট ব্যবহার করে URL-এর টার্গেট বেছে নিই। এটি একটি অ্যাবসোলিউট URL বা অ্যাবসোলিউট লিংক হতে পারে যেন https://www.careerkarma.com অথবা আমাদের সাইটের কही相對 একটি URL।
ক্যারিয়ার করমা হোম পেজের ওয়েব অ্যাড্রেসে নির্দেশ করে একটি লিংক উদাহরণ:
৮১% অংশগ্রহণকারী বলেছেন বুটক্যাম্পে অংশ নেওয়ার পর তাদের টেক জব প্রস্পেক্টস সম্পর্কে অধিক আত্মবিশ্বাসী অনুভব করছেন। আজই একটি বুটক্যাম্পের সাথে ম্যাচ হোন।
গড় বুটক্যাম্প স্নাতক ক্যারিয়ার ট্রানজিশনে ছয় মাস কম ব্যয় করেছেন, বুটক্যাম্প শুরু থেকে প্রথম চাকরি পাওয়া পর্যন্ত।
<a href="https://www.careerkarma.com">Career Karma</a>
HTML হাইপারলিংক ট্যাগের ধরন
ব্রাউজারে তিন ধরনের লিংক দেখায়। সেগুলো নিচে:
- Unvisited links (দেখা হয়নি এমন লিংক), যেগুলো ব্লুতে দেখায়
- Visited links (দেখা হয়েছে এমন লিংক), যেগুলো পার্পলে দেখায়
- Active links (সক্রিয় লিংক), যেগুলো রেডে দেখায়
কিছু ওয়েবসাইট এই রঙগুলো ওভাররাইড করে, তাই সেগুলো ভিন্ন দেখায়, কিন্তু এগুলো HTML-এ আপনি স্টাইল করতে পারেন এমন মূল লিংক টাইপগুলো।
Hyperlink HTML: Targets
আপনি কীভাবে একটি লিংক খুলবে সেটি পরিবর্তন করতে পারেন। উদাহরণস্বরূপ, বলুন আপনি চান একটি লিংক ব্যবহারকারীর ওয়েব ব্রাউজারে একটি নতুন ট্যাবে খুলবে। এটি নিশ্চিত করবে যে ব্যবহারকারী বর্তমানে যে ওয়েব পেজ দেখছেন সেটিতে তাদের জায়গা হারাবেন না।
সেটিই হলো লিংক targetHTML অ্যাট্রিবিউট আসে। লিংক target অ্যাট্রিবিউট ব্যবহার করে, আপনি নির্দিষ্ট করতে পারেন ব্রাউজারকে আপনি যে রিসোর্সে লিংক করেছেন সেটি কোথায় খুলবে।
আপনি চার ধরনের টার্গেট ব্যবহার করতে পারেন, যেগুলো নিচে:
- _self: একই উইন্ডো এবং ট্যাবে ওয়েব রিসোর্স ভিজিট করে। এটি HTML হাইপারলিংকে ব্যবহৃত ডিফল্ট টার্গেট।
- _parent: পেরেন্ট উইন্ডোতে ওয়েব রিসোর্স ভিজিট করে।
- _blank: একটি নতুন উইন্ডো বা ট্যাবে ওয়েব রিসোর্স ভিজিট করে।
- _top: একটি ফুল ব্রাউজার উইন্ডোতে ওয়েব রিসোর্স ভিজিট করে।
এই লিংকগুলোর কিছু উদাহরণ একশনে:
<a href="https://www.careerkarma.com" target="_self">This link will open in this tab.</a> <a href="https://www.careerkarma.com" target="_parent">This link will open a parent window.</a> <a href="https://www.careerkarma.com" target="_blank">This link will open in a new tab.</a> <a href="https://www.careerkarma.com" target="_top">This link will open in a full browser window.</a>
Hyperlink HTML: বুকমার্ক অ্যাঙ্কর
HTML-এ হাইপারলিংক একটি HTML ডকুমেন্টের নির্দিষ্ট অংশকেও রেফারেন্স করতে পারে। এটি উপকারী যদি আপনার একটি লম্বা ওয়েব পেজ থাকে এবং আপনি ব্যবহারকারীকে টেক্সটের একটি নির্দিষ্ট জায়গায় নিয়ে যেতে চান।
বুকমার্ক অ্যাঙ্কর ব্যবহার শুরু করার আগে, আপনাকে প্রথমে সেই এলিমেন্টে একটি ID অ্যাট্রিবিউট ডিফাইন করতে হবে যেখান ব্যবহারকারীকে পাঠাতে চান। একটি ওয়েব পেজের টাইটেলে ID অ্যাট্রিবিউট ঘোষণা করার একটি উদাহরণ:
<h3 id="subtitle3">Subtitle 3</h3>
আমরা HTML হেডিং ট্যাগকে subtitle3 id দিয়েছি, যা আমরা একটি হাইপারলিংক-এ রেফারেন্স করতে পারি।
এই হেডিংকে রেফারেন্স করে একটি হাইপারলিংকর উদাহরণ:
<a href="#subtitle3">Go to Subtitle 3</a>
আমাদের href ট্যাগে URL নির্দিষ্ট করার বদলে, আমরা যে এলিমেন্টে লিংক করতে চাই তার ID নির্দিষ্ট করি। সেই id-এর আগে একটি হ্যাশ সাইন (#) যোগ করি যাতে ব্রাউজার বুঝতে পারে লিংক করা ডকুমেন্ট আমাদের ওয়েব পেজেই আছে।
HTML Anchor Tag
একটি HTML অ্যাঙ্কর ট্যাগ ট্যাগকে রেফার করে। এই ট্যাগ ব্যবহারকারীকে অন্য একটি ওয়েব রিসোর্সে লিংক করে। "href" অ্যাট্রিবিউট সেই রিসোর্সকে নির্ধারণ করে যেখান ব্যবহারকারী লিংক ক্লিক করলে যাবে।
HTML Anchor Tag উদাহরণ
চলুন HTML <a> ট্যাগ ব্যবহারের কিছু উদাহরণ দেখা যাক।
রিলেটিভ URL
আপনি যদি একই HTML ডকুমেন্টে একটি রিসোর্সে লিংক করেন যা আপনি ডেভেলপ করছেন, আপনি একটি রিলেটিভ URL ব্যবহার করতে পারেন। রিলেটিভ URL কে লোকাল লিংকও বলা হয় এবং "https://www.sitename.com" সিনট্যাক্স ব্যবহার করে না। বরং, রিলেটিভ URL লোকাল সার্ভারের একটি নির্দিষ্ট ওয়েব রিসোর্সের ফাইল পাথকে নির্দেশ করে।
মান লেন আমরা ক্যারিয়ার করমা ওয়েবসাইটে একটি লিংক তৈরি করছি যেটি আমাদের ব্লগে নির্দেশ করবে। অ্যাবসোলিউট URL ব্যবহারের বদলে, আমরা একটি লোকাল URL ব্যবহার করতে পারি, কারণ আমাদের সাইটই ক্যারিয়ার করমা সাইট। এই লিংক তৈরি করতে আমরা যে কোডটি ব্যবহার করব:
<a href="/blog">Career Karma blog</a>
যখন আমরা Career Karma blog টেক্সটে ক্লিক করি, আমরা আমাদের সাইটের /blog রিসোর্সে পাঠানো হয়।
ইমেইল অ্যাড্রেস
অ্যাঙ্কর ট্যাগ একটি ইমেইল অ্যাড্রেসেও লিংক করতে পারে। যখন একটি ইমেইল অ্যাড্রেসে লিংক ক্লিক করা হয়, ব্যবহারকারীর ডিফল্ট ইমেইল প্রোগ্রাম খুলবে। ব্যবহারকারীকে জিজ্ঞাসা করা হবে সে আপনি যে ইমেইল অ্যাড্রেস নির্দিষ্ট করেছেন সেটিতে মেসেজ পাঠাতে চান কিনা।
একটি ইমেইল অ্যাড্রেসে লিংক করতে, আমাদের লিংকটি mailto: প্রোটোকল দিয়ে শুরু করতে হবে। HTML-এ ইমেইল অ্যাড্রেসে লিংক করার একটি উদাহরণ:
<a href="mailto:nothing@google.com">Send an email to us!</a>
যখন আমরা আমাদের লিংকে ক্লিক করি, আমাদের ইমেইল প্রোগ্রাম খুলবে এবং আমাদের "nothing@google.com"-এ ইমেইল পাঠাতে বলবে।
একটি এলিমেন্টে লিংক
অ্যাঙ্কর ট্যাগ একটি ওয়েব পেজের একটি এলিমেন্টে লিংক করতে পারে। আপনি এই লিংকটি সেই এলিমেন্টের id নির্দিষ্ট করে তৈরি করতে পারেন যেটি অ্যাঙ্করটি পয়েন্ট করবে। মান লেন আমরা একটি লিংক আমাদের ব্যবহারকারীকে একটি ওয়েব পেজের Test Heading হেডিং-এ নিয়ে যেতে চাই। আমরা নিচের কোড ব্যবহার করে এই লিংকটি তৈরি করতে পারি:
<a href="#test_heading">Jump to Test Heading</a> <h2 id="test_heading">Test Heading</h2>
যখন আমরা আমাদের লিংকে ক্লিক করি, আমাদের ওয়েব পেজ test_heading id বিশিষ্ট এলিমেন্টে স্ক্রোল ডাউন করবে।
উপসংহার
হাইপারলিংক HTML-এ একটি ওয়েব পেজ বা রিসোর্সকে অন্যটির সাথে লিংক করতে ব্যবহার করা যায়। আপনি হাইপারলিংক আপনার সাইটের রিসোর্সগুলো বা যেকোনো অন্য ওয়েবসাইটের সাথে সংযুক্ত করতে ব্যবহার করতে পারেন। এই গাইডে, আমরা একটি HTML ডকুমেন্টে হাইপারলিংক কীভাবে ব্যবহার করবেন সেটি ভাঙে দেখিয়েছি।
এই সব তথ্যের সাথে, আপনি HTML-এ হাইপারলিংক একটি মাস্টারর মতো তৈরি করতে পারবেন!
HTML-এ কোডিং সম্পর্কে আরও জানতে, আমাদের How to Learn HTML গাইড পড়ুন।
