এইচটিএমএল(<a> কিভাবে হয় তার মূল বিষয়গুলো জানুন ) হাইপারলিঙ্ক উপাদানটি ওয়েবে ইন্টারেক্টিভ লিঙ্কগুলিকে সংজ্ঞায়িত করতে ব্যবহৃত হয়।
HTML এ, <a> ট্যাগ লিঙ্ক/হাইপারলিঙ্ক উপাদান সংজ্ঞায়িত করতে ব্যবহৃত হয়:
<a>Link element</a>লিঙ্ক উপাদানটিকে অ্যাঙ্করও বলা হয় উপাদান।
লিঙ্ক বনাম হাইপারলিঙ্ক:
- একটি লিঙ্ক একটি ঠিকানা যা ইন্টারনেটে একটি অবস্থান নির্দিষ্ট করে৷ ৷
- একটি হাইপারলিঙ্ক একটি লিঙ্কের প্রকার যেটিতে ক্লিক করে আপনি কিছু সক্রিয় করতে পারেন বা কোনো গন্তব্যে যেতে পারেন, যেমন একটি ওয়েবসাইট।
কথোপকথনে, বেশিরভাগ লোক "হাইপারলিঙ্ক" এবং "লিঙ্ক" বিনিময়যোগ্যভাবে বলে।
কীভাবে 'a' উপাদান ব্যবহার করবেন
<a> উপাদানটি বেশ কয়েকটি বৈশিষ্ট্য গ্রহণ করে, যার মধ্যে সবচেয়ে গুরুত্বপূর্ণটি হল href বৈশিষ্ট্য, যা ব্যবহারকারীরা ক্লিক করলে লিঙ্ক (URL) গন্তব্য প্রদান করতে ব্যবহৃত হয়।
এখানে একটি লিঙ্কের একটি উদাহরণ রয়েছে যা আপনাকে টেকস্ট্যাকারের প্রথম পৃষ্ঠায় ক্লিক করার সময় নির্দেশ করে:
<a href="https://techstacker.com">Go to TechStacker’s front page.</a>উপরের লিঙ্কটিতে এই বিল্ডিং ব্লকগুলি রয়েছে:
- ওপেনিং লিংক ট্যাগ
<a> - অ্যাট্রিবিউটের নাম:
href - অ্যাট্রিবিউটের মান:
"https://techstacker.com"(লিঙ্ক URL/গন্তব্য) - লিঙ্ক টেক্সট
Go to TechStacker’s front page.(ব্যবহারকারীর কাছে দৃশ্যমান) - ক্লোজিং লিঙ্ক ট্যাগ
</a>
উপরের লিঙ্কটি বাস্তব জীবনে কেমন দেখায়:
টেকস্ট্যাকারের প্রথম পৃষ্ঠায় যান৷
৷পরম বনাম আপেক্ষিক URL
অ্যাট্রিবিউট মান (লিঙ্ক/ইউআরএল গন্তব্য) হয় একটি পরম হতে পারে অথবা একটি আত্মীয় URL পাথ। আগের উদাহরণটি হল একটি পরম URL:
<a href="https://techstacker.com">Go to TechStacker’s front page.</a>এটি এটি একটি আপেক্ষিক URL যা এই ওয়েবসাইটে একটি নিবন্ধের দিকে নিয়ে যায়:
<a href="/html-tags-vs-html-elements-difference"
>HTML Tags vs. HTML Elements.</a
>এখানে সেই একই নিবন্ধের একটি সম্পূর্ণ URL:
<a href="https://techstacker.com/html-tags-vs-html-elements-difference"
>HTML Tags vs. HTML Elements.</a
>কিভাবে পরম URL লক্ষ্য করুন আপেক্ষিক URL থেকে অনেক বেশি তথ্য আছে:
- এটির একটি প্রোটোকল রয়েছে (
https) - একটি ডোমেন নাম
techstacker.com - একটি স্লাগ
/html-tags-vs-html-elements-difference
আপেক্ষিক URL-এ শুধুমাত্র স্লাগ থাকে৷
৷তাহলে আপনি কখন কোনটি ব্যবহার করবেন?
- আপেক্ষিক URL ব্যবহার করুন যখন আপনি আপনার নিজের ওয়েবসাইটের বিষয়বস্তুর সাথে লিঙ্ক করেন।
- পরম URL ব্যবহার করুন যখন আপনি অন্যান্য ওয়েবসাইটের বিষয়বস্তুর সাথে লিঙ্ক করেন।
একই সার্ভারে থাকা (সংরক্ষিত) বিষয়বস্তু উল্লেখ করার জন্য আপনি শুধুমাত্র আপেক্ষিক URL ব্যবহার করতে পারেন যে আপনার ওয়েবসাইট রয়েছে. অন্যথায়, পরম URL ব্যবহার করুন।
আপনি যদি HTML ট্যাগ এবং HTML উপাদানগুলির মধ্যে পার্থক্য সম্পর্কে বিভ্রান্ত হন, তাহলে আপনি HTML ট্যাগ বনাম HTML উপাদান সম্পর্কে সেই নিবন্ধটি পড়তে চাইতে পারেন।
ঠিক আছে, আরও একটি বৈশিষ্ট্য রয়েছে যা সাধারণত ব্যবহৃত হয় এবং জানা গুরুত্বপূর্ণ, বিশেষ করে যখন এটি SEO এর ক্ষেত্রে আসে।
লক্ষ্য বৈশিষ্ট্য
আরেকটি দরকারী লিঙ্ক উপাদান বৈশিষ্ট্য, হল target অ্যাট্রিবিউট, যা ব্যবহারকারীরা ক্লিক করলে লিঙ্কটি কোথায় খুলতে হবে তা নির্দিষ্ট করে।
আপনি যদি এই লিঙ্কে ক্লিক করেন:
<a href="https://techstacker.com/">Link to front page</a>আপনি এখন যে ব্রাউজার ট্যাব/উইন্ডোতে আছেন সেই একই ব্রাউজারে আপনাকে টেকস্ট্যাকারের প্রথম পৃষ্ঠায় নিয়ে যাওয়া হবে। এর মানে হল যে আপনি যদি অন্য ওয়েবসাইটে লিঙ্ক করেন, ব্যবহারকারীকে আপনার ওয়েবসাইট থেকে দূরে সরিয়ে দেওয়া হবে এবং আপনি যে ওয়েবসাইটে লিঙ্ক করেছেন (যেটি আপনি চান বা নাও চান)।
এটি ঘটে কারণ ডিফল্টরূপে <a> উপাদানগুলির একটি target আছে _self এর মান সহ বৈশিষ্ট্য — যার মানে হল যে ব্যবহারকারী যে উইন্ডোতে আছেন সেই উইন্ডোতে এটি লিঙ্কটি খোলে৷
তাই এই লিঙ্ক উপাদান:
<a href="https://techstacker.com/"></a>কম্পিউটার/ব্রাউজার দ্বারা এইভাবে পড়া হয়:
<a href="https://techstacker.com/" target="_self"></a>যা বিভ্রান্তিকর হতে পারে, কারণ আপনি এটি দেখতে পাচ্ছেন না (কিন্তু এখন আপনি জানেন)।
আপনি যদি একটি নতুন ব্রাউজার ট্যাবে আপনার লিঙ্কগুলি খুলতে চান তবে আপনি ডিফল্ট _self ওভাররাইড করতে পারেন _blank সহ মান মান:
<a href="https://youtube.com" target="_blank" rel="noopener"
>If you click this, the YouTube website opens in a new tab</a
>কোনটি কখন ব্যবহার করবেন?
সহজ উত্তর হল:আপনি যদি ব্যবহারকারীদের আপনার ওয়েবসাইট থেকে দূরে সরাতে না চান, যেমন SEO উদ্দেশ্যে, তারপর target="_blank" ব্যবহার করুন .
অন্যথায়, কিছু করবেন না, এবং আপনার লিঙ্কগুলি একই ব্রাউজার উইন্ডোতে খোলার জন্য ডিফল্ট হবে (_self এর মাধ্যমে মান)।
লিঙ্ক হিসাবে শিরোনাম ব্যবহার করা
শিরোনাম সহ অনেক HTML উপাদান লিঙ্ক হিসাবে ব্যবহার করা যেতে পারে। আসলে এটা খুবই সাধারণ। আপনাকে যা করতে হবে তা হল লিঙ্ক ট্যাগ <a></a> এর ভিতরে একটি লিঙ্কে আপনি যে উপাদানটি তৈরি করতে চান তা মোড়ানো। :
<a href="/html-for-beginners">
<h3>HTML for Beginners</h3>
</a>ছবিগুলিকে লিঙ্ক হিসাবে ব্যবহার করা
লিঙ্ক উপাদানগুলিও লিঙ্কগুলিতে ছবি তৈরি করতে পারে, যেমন থাম্বনেইল বা নিবন্ধ বা পণ্য পৃষ্ঠার জন্য. এটি করার জন্য আপনি আপনার ইমেজ উপাদান <img > মোড়ানো লিঙ্ক এলিমেন্টের ভিতরে <a></a> , এই মত:
<a href="/tags/html">
<img src="../../thumbnails/html.png" />
</a>উপরের উদাহরণটি ব্যবহারকারীকে এই HTML নিবন্ধ বিভাগে নিয়ে যাবে যখন তারা ছবিটিতে ক্লিক করবে।
এটি বাস্তব জীবনে কেমন দেখায় (এটিতে ক্লিক করার চেষ্টা করুন):
