HTML Links

হাইপারলিঙ্ক এবং ওয়েব লিঙ্ক তৈরি করুন

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

লিংক প্রায় সব ওয়েব পেজ পাওয়া যায়. লিঙ্কগুলি ব্যবহারকারীদের এক পৃষ্ঠা থেকে অন্য পৃষ্ঠায় ক্লিক করতে দেয়।

এইচটিএমএল লিঙ্কগুলি হাইপারলিঙ্ক।

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

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

💡দ্রষ্টব্য:

একটি লিঙ্ক পাঠ্য হতে হবে না. একটি লিঙ্ক একটি ছবি বা অন্য কোন HTML উপাদান হতে পারে!

একটি লিঙ্ক উদাহরণ (এটি চেষ্টা করুন!)

এইচটিএমএল লিংক - সিনট্যাক্স

HTML <a> ট্যাগ একটি হাইপারলিঙ্ককে সংজ্ঞায়িত করে। এটিতে নিম্নলিখিত সিনট্যাক্স রয়েছে:

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

<a> এলিমেন্টের সবচেয়ে গুরুত্বপূর্ণ অ্যাট্রিবিউট হল href অ্যাট্রিবিউট, যা লিঙ্কের গন্তব্য নির্দেশ করে।

লিঙ্ক পাঠ্য পাঠকের কাছে দৃশ্যমান অংশ।

লিঙ্ক টেক্সটে ক্লিক করলে পাঠক নির্দিষ্ট URL-এ পাঠাবে।

উদাহরণ

এই উদাহরণটি দেখায় কিভাবে JassifTeam.com এ একটি লিঙ্ক তৈরি করতে হয়:

<a href="https://www.jassifteam.com/">Visit JassifTeam.com!</a>

ডিফল্টরূপে, সমস্ত ব্রাউজারে লিঙ্কগুলি নিম্নরূপ প্রদর্শিত হয়:

দেখা না করা লিঙ্ক

আন্ডারলাইন করা এবং নীল রঙে

লিঙ্ক পরিদর্শন

আন্ডারলাইন করা এবং বেগুনি

সক্রিয় সংযোগ

আন্ডারলাইন করা এবং লাল রঙে

🎨পরামর্শ:

একটি ভিন্ন চেহারা পেতে লিঙ্ক CSS দিয়ে স্টাইল করা যেতে পারে!

এইচটিএমএল লিঙ্ক - টার্গেট অ্যাট্রিবিউট

ডিফল্টরূপে, লিঙ্ক করা পৃষ্ঠাটি বর্তমান ব্রাউজার উইন্ডোতে প্রদর্শিত হয়। এটি পরিবর্তন করতে, আপনাকে অবশ্যই লিঙ্কটির জন্য অন্য একটি গন্তব্য নির্দিষ্ট করতে হবে৷

টার্গেট অ্যাট্রিবিউট নির্দেশ করে কোথায় লিঙ্ক করা ডকুমেন্ট খুলতে হবে।

লক্ষ্য বৈশিষ্ট্যের নিম্নলিখিত মানগুলির মধ্যে একটি থাকতে পারে:

মান ব্যাখ্যা
_self ডিফল্ট ডকুমেন্টটি একই উইন্ডো/ট্যাবে খোলে যেটিতে ক্লিক করা হয়েছিল
_blank একটি নতুন উইন্ডো বা পপআপে নথিটি খোলে
_parent মূল ফ্রেমে নথিটি খোলে
_top উইন্ডোর পুরো অংশে ডকুমেন্টটি খোলে

উদাহরণ

একটি নতুন ব্রাউজার উইন্ডো বা ট্যাবে লিঙ্ক করা নথি খুলতে target="_blank" ব্যবহার করুন:

<a href="https://www.jassifteam.com/" target="_blank">Visit Jassif Team!</a>

Absolute URLs vs Relative URLs

উপরের দুটি উদাহরণই href অ্যাট্রিবিউটে একটি সম্পূর্ণ URL (একটি সম্পূর্ণ ওয়েব ঠিকানা) ব্যবহার করে।

একটি স্থানীয় লিঙ্ক (একই ওয়েবসাইটের মধ্যে একটি পৃষ্ঠার লিঙ্ক) একটি নির্ভরশীল URL দিয়ে নির্দিষ্ট করা হয়েছে ("https://www" অংশ ছাড়া):

উদাহরণ

<h2>Absolute URLs</h2>
<p><a href="https://www.jassifteam.org/">Jassif Team Foundation</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

Absolute URLs

সম্পূর্ণ ওয়েব ঠিকানা (https://...)

বাহ্যিক ওয়েবসাইটের জন্য ব্যবহার করা হয়

Relative URLs

নির্ভরতা পথ (html_images.asp, /css/default.asp)

একই ওয়েবসাইটের পৃষ্ঠাগুলির জন্য ব্যবহৃত হয়

সম্পূর্ণ URL এবং আপেক্ষিক URL সম্পর্কে আরও

উদাহরণ 1

একটি ওয়েব পৃষ্ঠা লিঙ্ক করতে সম্পূর্ণ URL ব্যবহার করুন:

<a href="https://www.jassifteam.com/html/default.asp">
  HTML tutorial
</a>

উদাহরণ 2

বর্তমান ওয়েবসাইটে html ফোল্ডারে অবস্থিত একটি পৃষ্ঠার লিঙ্ক করুন:

<a href="/html/default.asp">
  HTML tutorial
</a>

উদাহরণ 3

বর্তমান পৃষ্ঠার মতো একই ফোল্ডারে অবস্থিত একটি পৃষ্ঠার লিঙ্ক:

<a href="default.asp">
  HTML tutorial
</a>

আপনি HTML ফাইল পাথ অধ্যায়ে ফাইল পাথ সম্পর্কে আরও জানতে পারেন।

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

<a> উপাদানএকটি সংযোগ সংজ্ঞায়িত করতে ব্যবহার করুন
href বৈশিষ্ট্যসংযোগ ঠিকানা সংজ্ঞায়িত করতে ব্যবহার করুন
লক্ষ্য বৈশিষ্ট্যলিঙ্ক করা নথিটি কোথায় খুলতে হবে তা নির্ধারণ করতে ব্যবহার করুন
<img> উপাদান (ভিতরে (<a>)একটি লিঙ্ক হিসাবে ইমেজ ব্যবহার করতে ব্যবহার করুন
mailto: প্রকল্প href বৈশিষ্ট্যের মধ্যেব্যবহারকারীর ইমেল প্রোগ্রাম খোলে এমন একটি লিঙ্ক তৈরি করতে ব্যবহার করুন

অনুশীলন করুন

একটি HTML হাইপারলিংকের জন্য সঠিক বাক্য গঠন কি?

<a href='/home.htm'>Visit Jassif Team!</a>
✓ ঠিক আছে! হাইপারলিঙ্কের জন্য <a> ট্যাগ ব্যবহার করা হয়
<link href='/home.htm'>Visit Jassif Team!</link>
✗ ভুল! <link> ট্যাগটি বাহ্যিক সংস্থানগুলির সাথে (যেমন CSS) লিঙ্ক করতে ব্যবহৃত হয়।
<alink href='/home.htm'>Visit Jassif Team!</alink>
✗ ভুল! <alink> একটি বৈধ HTML ট্যাগ নয়

HTML লিঙ্ক ট্যাগ

ট্যাগ ব্যাখ্যা
<a> একটি হাইপারলিংক সংজ্ঞায়িত করে

📖দ্রষ্টব্য:

সমস্ত উপলব্ধ HTML ট্যাগের সম্পূর্ণ তালিকার জন্য, আমাদের HTML ট্যাগ রেফারেন্স দেখুন।