এইচটিএমএল লিংক ও এনটাইটিজ (Link & Entities: Part-5)

একজন দক্ষ ফ্রিল্যান্সার গড়ার লক্ষে দেশে এই প্রথম জাগোরিক নিয়ে এসেছে বাংলা এইচটিএমএল টিউটোরিয়াল আর্টিকেল যার এই পর্বে থাকছে এইচটিএমএল লিংক ও এনটাইটিজ সম্পর্কে বিস্তারিত।

এটি হচ্ছে বাংলা এইচটিএমএল টিউটোরিয়াল Part-5 এরই ধারাবাহিকতায় আমরা HTML এর সম্পূর্ণ সিরিজ শেষ করার চেষ্টা করব।

সকল পর্বের টিউটোরিয়াল এখানে ক্লিক করলে পেয়ে যাবেনঃ এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল লিংক ও এনটাইটিজ (Link & Entities: Part-5)

এইচটিএমএল লিংকঃ এইচটিএমএল লিংক ও এনটাইটিজ

আপনি চাইলে আপনার সাইটের কোন টেক্সটের উপর লিংক তৈরী করে দিতে পারেন যেখানে ক্লিক করলে অন্য পেজ/সাইট আসবে। anchor tag এর সাহায্যে লিংক তৈরী করা হয়। শুধু টেক্সট নয় আপনি চাইলে একটা মেইল এড্রেসের উপর লিংক দিতে পারেন, একটা ছবির উপর লিংক দিতে পারেন, বড় কোন ওয়েব পেজের সুচিপত্র তৈরী করে এর আইটেমগুলিতে লিংক দিতে পারেন (এসব লিংকে ক্লিক করলে পেজেরই ঐ অংশে যাবে যেখান থেকে আইটেমটি শুরু হয়েছে)।

হাইপারটেক্সক্ট রেফারেন্স(href)

href এট্রিবিউট নিদের্শ করে যে ইউজার ক্লিক করে কোথায় যাবে। Hypertext reference হতে পারে Internal, Local, Global ।

ইন্টারনাল: একই পেজের মধ্যে লিংক তৈরী হবে। লোকাল: আপনার web site এর ভিতরে কোন পেজেরে সাথে লিংক তৈরী হবে। গ্লোবাল: আপনার web site এর বাহিরে অন্য web site এর লিংক তৈরী হবে।

ইন্টারনাল- href=”#anchorname”

লোকাল- href=”/jagorik.com/../pics/picturefile.jpg”

গ্লোবাল- href=”https://www.jagorik.com/”

এইচটিএমএল লিংক (টেক্সক্ট) যেভাবে তৈরী করবেন

<a> এবং  </a> tag দ্বারা যথাত্রুমে লিংক শুরু এবং শেষ বোঝায়।  href এট্রিবিউট এর সাহায্যে কোন ধরনের লিংক স্থাপিত হবে তা নির্ধারিত হয়। href এট্রিবিউটকে opening tag এর মধ্যে রাখতে হয়। opening এবং closing tag এর মধ্যে কোন লেখা থাকলে, তা পরে web পেজে লিংক হিসাবে দেখা যাবে।যেমন

প্রদর্শন: গ্লোবাল লিংক

Webcoachbd Home         Google Home              Yahoo Home

 

এইচটিএমএল লিংক টার্গেট (HTML–link Target)

a ট্যাগে target এট্রিবিউট দিয়ে ঠিক করা যায় যে লিংকটি কিভাবে খুলবে যেমন “_blank” দিলে নতুন উইন্ডোতে আবার “_self” দিলে উক্ত পেজেই লিংকটি লোড হবে।

প্রদর্শন

Radio button tutorial

এখানে ক্লিক করুন নতুন একটি উইন্ডোতে (ট্যাবে)  পেজটি খুলবে।

 

এইচটিএমএল ইমেইল লিংক

টেক্সট লিংক উপরে যেভাবে তৈরী করলেন ইমেইল লিংকও সেভাবে করতে হবে শুধু href এট্রিবিউটের ভিতর ইনভার্টেড কমার মধ্যে আগে ওয়েব সাইটের ঠিকানা ছিল আর এবার ইমেইল ঠিকানা দিবেন।যেমন

<a href= “demo@mail.com” >Email Example</a>

প্রদর্শন:

Email Example

এই লিংকের উপর মাউস নিয়ে যান, নিচে স্টাটাসবারে mailto:abc@mail.com লেখা দেখাবে। এখানে ক্লিক করলে আপনার ব্রাউজার abc@mail.com  নামের একটি মেইল ঠিকানায় মেইল পাঠানোর ক্ষেত্র প্রস্তুত করবে।আরও সহজভাবে বলি, ধরুন আপনি মজিলা ফায়ারফক্স ব্রাউজার ব্যবহার করছেন, আপনি যদি Tools>Options>Applications এ গিয়ে mailto এর জায়গায় ড্রপডাউন মেনু থেকে Use Yahoo mail সিলেক্ট করে দেন তাহলে Email Example লিংকে ক্লিক করলে আপনার ইয়াহু মেইল খুলবে এবং To ফিল্ডের জায়গায় abc@mail.com লেখা উঠবে।

আপনি চাইলে ইমেইল লিংকে subject এবং body ঠিক করে দিতে পারেন যেমন

<a href= “mailto: a@b.com?subject=Web Page Email&body=This email is from your website” > 2nd Email Example</a>

প্রদর্শন:

2nd Email Example

এখানে ক্লিক করলে আপনার ইয়াহু মেইল খুলবে এবং To এর জায়গায় a@b.com আর Subject এর জায়গায় Web Page Email ও Body তে This email from your site এগুলি গিয়ে অটোমেটিক বসবে।

 

ইন্টারনাল লিংক

নিচে লিংকগুলিতে ক্লিককরে দেখুন এই পেজেরই বিভিন্ন অংশে এই লিংকগুলি নিয়ে যাবে।এটা হচ্ছে ইন্টারনাল লিংক।পেজ বড় হলে সুচিপত্র তৈরী করে এভাবে লিংক দিতে পারেন।

পেজের উপরে যান

টেক্সট লিংক

“পেজের উপরে যান” এখানে ক্লিক করলে পেজের কোথায় যাবে তা আগেই ঠিক করে রাখতে হবে এভাবে

<h3>হাইপারটেক্সক্ট রেফারেন্স(href)<a name=”top”></a></h3>

পরের লিংকটিও এভাবে করে নিতে হবে (এখানে name=”text”)

শেষে “পেজের উপরে যান” এর উপর লিংক দিয়েছি এভাবে

<a href=”#top”>পেজের উপরে যান</a>

এবং

<a href=”#text”>টেক্সট লিংক</a>

---

আরও পড়ুনঃ বাংলা এইচটিএমএল টিউটোরিয়াল (Introduction: Part-1)

---

এইচটিএমএল এনটাইটিজঃ এইচটিএমএল লিংক ও এনটাইটিজ

এইচটিএমএল এ কিছু বিশেষ ক্যারেক্টার আছে যেগুলি ডকুমেন্টে ব্যবহার করলে সমস্যা হয়। যেমন less than, greater than চিহ্ন ইত্যাদি। কেননা এগুলি ব্রাউজারকে বিশেষ ইঙ্গত দেয় যার ফলে এটা প্রদর্শন করার পরিবর্তে ঐ নির্দেশনা/ইঙ্গিত অনুসারে কাজ করে।এখন যদি এই ধরনের কোন চিহ্ন আপনি ওয়েব পেজে দেখাতে চান তাহলে এইচটিএমএল এনটাইটি ব্যবহার করে দেখাতে পারবেন। এছাড়াও বিভিন্ন চিহ্ন যেমন কপিরাইট, ট্রেডমার্ক ইত্যাদি ওয়েব পেজে দেখানো যায়।

প্রত্যেক এনটাইটি এমপারসেন্ড (&) চিহ্ন দিয়ে শুরু হয় এরপর তার নাম এবং শেষে সেমিকোলন (;) দিয়ে পূর্ন করা হয়।

এনটাইটি নাম দিয়েও  প্রকাশ করা যায় আবার বিকল্প হিসেবে প্রত্যেকটি এনটাইটির একটা নাম্বার আছে সেটা দিয়েও প্রকাশ করতে পারেন। নিচের কিছু নামভিত্তিক এনটাইটি দেয়া হল

কয়েকটি বহুল ব্যবহৃত এনটাইটি:

এগুলির নাম্বার যথাক্রমে

প্রদর্শন

© ® ™ $ < >

 

p ট্যাগে বা যেকোন জায়গায় স্পেস দিতে চাইলে কয়েকটা স্পেস এনটাইটি বসিয়ে দিন হয়ে যাবে। ৪ নম্বরে যেটা আছে।

আমরা এইচটিএমএল এ লেস দেন এবং গ্রেটার দেন চিহ্ন ব্যবহার করে ট্যাগ তৈরী করি। এসব চিহ্ন ওয়েব পেজ এ দেখাতে চাইলে এনটাইটি ব্যবহার করতে হবে।

প্রদর্শন:

Less than – <
Greater than – >
Body tag – <body>

 

উক্ত বিষয় সম্পর্কে কিছু জানার থাকলে কমেন্ট করতে পারেন।
আমাদের সাথে ইউটিউব চ্যানেলে যুক্ত হতে এখানে ক্লিক করুন এবং আমাদের সাথে ফেইজবুক পেইজে যুক্ত হতে এখানে ক্লিক করুন।
গুরুত্বপূর্ণ আপডেট ও তথ্য পেতে আমাদের ওয়েবসাইটে ভিজিট করুন।