কিভাবে HTML এ একটি হাইপারলিঙ্ক তৈরি করবেন

আপনি যখন একটি ওয়েব পৃষ্ঠা তৈরি করছেন, আপনি অন্য একটি ওয়েব পৃষ্ঠা বা ওয়েবসাইট উল্লেখ করতে চাইতে পারেন। উদাহরণস্বরূপ, আপনি হয়ত একটি ব্লগ তৈরি করছেন এবং একটি নিবন্ধের সাথে লিঙ্ক করতে চান যা আপনি প্রাসঙ্গিক বলে মনে করেন৷

হাইপারলিঙ্ক , বা লিঙ্কগুলি, একটি ওয়েব পৃষ্ঠার সাথে অন্য একটি ওয়েব পৃষ্ঠা সংযোগ করতে এবং ব্যবহারকারীদের একাধিক ওয়েব পৃষ্ঠার মধ্যে দ্রুত সরানোর অনুমতি দিতে ব্যবহৃত হয়৷ হাইপারলিঙ্ক আপনার নিজের সাইটের অন্যান্য পৃষ্ঠাগুলিতে বা বিভিন্ন ওয়েবসাইটের পৃষ্ঠাগুলিতে লিঙ্ক করতে ব্যবহার করা যেতে পারে৷

এই নির্দেশিকায়, আমরা HTML.-এ হাইপারলিঙ্কিংয়ের মূল বিষয়গুলিকে ভেঙে দিতে যাচ্ছি আমরা কীভাবে লিঙ্কগুলির লক্ষ্য নির্ধারণ করতে হয়, কীভাবে বুকমার্কের জন্য অ্যাঙ্কর তৈরি করতে হয় এবং ইমেল ঠিকানা এবং ওয়েব উপাদানগুলির সাথে লিঙ্ক করতে হয় সে সম্পর্কে কথা বলব৷

HTML হাইপারলিঙ্ক

<a href="your_url">This text will go to a URL.</a>

আমাদের ট্যাগগুলির মধ্যে পাঠ্যটি URL এর সাথে লিঙ্ক করবে যা আমরা আমাদের খোলার ট্যাগে উল্লেখ করেছি। আমরা href ব্যবহার করি URL-এর টার্গেট বেছে নিতে অ্যাট্রিবিউট। এটি একটি সম্পূর্ণ URL বা সম্পূর্ণ লিঙ্ক হতে পারে যেমন https://www.careerkarma.com অথবা আমাদের সাইটের কোথাও একটি ইউআরএল আপেক্ষিক।

এখানে একটি লিঙ্কের উদাহরণ রয়েছে যা ক্যারিয়ার কর্মের হোম পেজের ওয়েব ঠিকানায় নির্দেশ করে:

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগদানের পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

<a href="https://www.careerkarma.com">Career Karma</a>

HTML হাইপারলিঙ্ক ট্যাগ প্রকারগুলি

একটি ব্রাউজারে তিন ধরনের লিঙ্ক প্রদর্শিত হতে পারে। এগুলি নিম্নরূপ:

• অভিজিট করা লিঙ্কগুলি৷ , যা নীল রঙে প্রদর্শিত হয়
• ভিজিট করা লিঙ্কগুলি৷ , যা বেগুনি রঙে প্রদর্শিত হয়
• সক্রিয় লিঙ্ক , যা লাল রঙে প্রদর্শিত হয়

কিছু ওয়েবসাইট এই রঙগুলিকে ওভাররাইট করে, যার মানে সেগুলি ভিন্নভাবে দেখা যায়, কিন্তু এগুলি হল প্রধান ধরনের লিঙ্ক যা আপনি HTML এ স্টাইল করতে পারেন .

হাইপারলিঙ্ক HTML:লক্ষ্যগুলি

আপনি কিভাবে একটি লিঙ্ক খোলা হয় পরিবর্তন করতে পারেন. উদাহরণস্বরূপ, বলুন আপনি ব্যবহারকারীর ওয়েব ব্রাউজারে একটি নতুন ট্যাবে একটি লিঙ্ক খুলতে চান। এটি নিশ্চিত করবে যে ব্যবহারকারীরা বর্তমানে যে ওয়েব পৃষ্ঠাটি দেখছেন তাতে তাদের স্থান হারাবেন না৷

সেখানেই targetHTML লিঙ্কটি এট্রিবিউট আসে। লিঙ্ক টার্গেট ব্যবহার করে বৈশিষ্ট্য, আপনি উল্লেখ করতে পারেন যেখানে আপনি লিঙ্ক করেছেন সেই সংস্থানটি ব্রাউজারটি খুলবে।

আপনি চার ধরনের লক্ষ্য ব্যবহার করতে পারেন, যা নিম্নরূপ:

• _self :একই উইন্ডো এবং ট্যাবে ওয়েব রিসোর্স পরিদর্শন করে। এটি HTML-এ ব্যবহৃত ডিফল্ট লক্ষ্য হাইপারলিঙ্ক।
• _পিতা :মূল উইন্ডোতে ওয়েব সংস্থান পরিদর্শন করে৷
৷
• _blank :একটি নতুন উইন্ডো বা ট্যাবে ওয়েব সংস্থান পরিদর্শন করে৷
৷
• _টপ :একটি সম্পূর্ণ ব্রাউজার উইন্ডোতে ওয়েব সংস্থান পরিদর্শন করে৷

এই লিঙ্কগুলির কয়েকটির উদাহরণ এখানে দেওয়া হল:

<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>

হাইপারলিঙ্ক HTML:বুকমার্ক অ্যাঙ্করস

হাইপারলিঙ্ক HTML-এ এছাড়াও একটি HTML এর একটি নির্দিষ্ট অংশ উল্লেখ করতে পারে নথি যদি আপনার একটি দীর্ঘ ওয়েব পৃষ্ঠা থাকে এবং আপনি পাঠ্যের একটি নির্দিষ্ট স্থানে একজন ব্যবহারকারীকে নির্দেশ করতে চান তবে এটি কার্যকর৷

বুকমার্ক অ্যাঙ্কর ব্যবহার শুরু করার আগে, আপনাকে প্রথমে একটি আইডি অ্যাট্রিবিউট সংজ্ঞায়িত করতে হবে যেখানে আপনি ব্যবহারকারীকে যেতে চান। এখানে একটি ওয়েব পৃষ্ঠার শিরোনামে একটি আইডি বৈশিষ্ট্য ঘোষণা করার একটি উদাহরণ রয়েছে:

<h3 id="subtitle3">Subtitle 3</h3>

আমরা HTML শিরোনাম ট্যাগটি id subtitle3 দিয়েছি , যা আমরা তারপর এটি একটি হাইপারলিংক এ উল্লেখ করতে ব্যবহার করতে পারি .

এখানে একটি হাইপারলিংক এর একটি উদাহরণ যে এই শিরোনাম উল্লেখ করে:

<a href="#subtitle3">Go to Subtitle 3</a>

আমাদের href-এ একটি URL উল্লেখ করার পরিবর্তে ট্যাগ, আমরা যে উপাদানটির সাথে লিঙ্ক করতে চাই তার আইডি নির্দিষ্ট করি। আমরা সেই আইডি (#) এর আগে একটি হ্যাশ চিহ্ন যুক্ত করি যাতে ব্রাউজার জানে যে লিঙ্ক করা নথিটি আমাদের ওয়েব পৃষ্ঠায় রয়েছে৷

HTML অ্যাঙ্কর ট্যাগ

একটি HTML অ্যাঙ্কর ট্যাগ ট্যাগকে বোঝায়। এই ট্যাগ একজন ব্যবহারকারীকে অন্য ওয়েব রিসোর্সের সাথে লিঙ্ক করে। "href" অ্যাট্রিবিউটটি সেই রিসোর্সকে সংজ্ঞায়িত করে যেখানে ব্যবহারকারীরা লিঙ্কে ক্লিক করলে তাকে নেওয়া হবে।

HTML অ্যাঙ্কর ট্যাগ উদাহরণ

আপেক্ষিক URL

আপনি যদি একই HTML ডকুমেন্টে কোনো সম্পদের সাথে লিঙ্ক করছেন যেভাবে আপনি বিকাশ করছেন, আপনি একটি আপেক্ষিক URL ব্যবহার করতে পারেন। আপেক্ষিক URLগুলিকে স্থানীয় লিঙ্ক হিসাবেও উল্লেখ করা হয় এবং "https://www.sitename.com" সিনট্যাক্স ব্যবহার করে না৷ পরিবর্তে, আপেক্ষিক URL স্থানীয় সার্ভারে একটি নির্দিষ্ট ওয়েব রিসোর্সের ফাইল পাথ নির্দেশ করে৷

ধরুন আমরা ক্যারিয়ার কারমা ওয়েবসাইটে একটি লিঙ্ক তৈরি করছি যা আমাদের ব্লগে নির্দেশ করা উচিত। একটি পরম URL ব্যবহার করার পরিবর্তে, আমরা একটি স্থানীয় URL ব্যবহার করতে পারি, কারণ আমাদের সাইটটি হল ক্যারিয়ার কর্মের সাইট৷ এই লিঙ্কটি তৈরি করতে আমরা যে কোডটি ব্যবহার করব তা এখানে:

<a href="/blog">Career Karma blog</a>

যখন আমরা ক্যারিয়ার কর্ম ব্লগ লেখাটিতে ক্লিক করি , আমাদের /blog-এ পাঠানো হয়েছে আমাদের সাইটে সম্পদ।

ইমেল ঠিকানা

অ্যাঙ্কর ট্যাগটি একটি ইমেল ঠিকানার সাথে লিঙ্ক করতেও ব্যবহার করা যেতে পারে। যখন একটি ইমেল ঠিকানার একটি লিঙ্ক ক্লিক করা হয়, ব্যবহারকারীর ডিফল্ট ইমেল প্রোগ্রাম খোলা হবে। ব্যবহারকারীকে জিজ্ঞাসা করা হবে যে তারা আপনার নির্দিষ্ট করা ইমেল ঠিকানায় একটি বার্তা পাঠাতে চান কিনা৷

একটি ইমেল ঠিকানার সাথে লিঙ্ক করতে, আমাদের mailto:প্রোটোকল দিয়ে আমাদের লিঙ্কটি শুরু করতে হবে। এখানে HTML এ একটি ইমেল ঠিকানা লিঙ্ক করার একটি উদাহরণ:

<a href="mailto:nothing@google.com">Send an email to us!</a>

যখন আমরা আমাদের লিঙ্কে ক্লিক করি, তখন আমাদের ইমেল প্রোগ্রাম খোলে এবং আমাদেরকে “nothing@google.com” ইমেল করতে বলে।

একটি উপাদানের সাথে লিঙ্ক করুন

অ্যাঙ্কর ট্যাগ একটি ওয়েব পৃষ্ঠার একটি উপাদানের সাথে লিঙ্ক করতে পারে। অ্যাঙ্কর যে উপাদানটির দিকে নির্দেশ করবে তার আইডি উল্লেখ করে আপনি এই লিঙ্কটি তৈরি করতে পারেন। ধরুন আমরা আমাদের ব্যবহারকারীকে Test Heading শিরোনামে নিয়ে যাওয়ার জন্য একটি লিঙ্ক চেয়েছিলাম একটি ওয়েব পেজে আমরা নিম্নলিখিত কোড ব্যবহার করে এই লিঙ্কটি তৈরি করতে পারি:

<a href="#test_heading">Jump to Test Heading</a>

<h2 id="test_heading">Test Heading</h2>

যখন আমরা আমাদের লিঙ্কে ক্লিক করি, তখন আমাদের ওয়েব পৃষ্ঠাটি test_heading আইডি সহ উপাদানটিতে স্ক্রোল করবে। .

উপসংহার

হাইপারলিঙ্ক একটি ওয়েব পেজ বা রিসোর্সকে অন্যের সাথে লিঙ্ক করতে HTML এ ব্যবহার করা যেতে পারে। আপনি হাইপারলিঙ্ক ব্যবহার করতে পারেন আপনার সাইটে বা অন্য কোন ওয়েবসাইটে সংস্থানগুলির সাথে সংযোগ করতে। এই নির্দেশিকায়, আমরা হাইপারলিঙ্ক কিভাবে ব্যবহার করতে হয় তা ভেঙেছি একটি HTML-এ নথি।

এই সমস্ত তথ্য দিয়ে, আপনি হাইপারলিঙ্ক তৈরি করতে প্রস্তুত৷ HTML-এ একজন মাস্টারের মতো!

HTML এ কোডিং সম্পর্কে আরও জানতে, আমাদের HTML গাইড কিভাবে শিখবেন তা পড়ুন।