এইচটিএমএল লিংক টিউটোরিয়াল (HTML Link Tutorial in Bangla)

 

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

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

href এট্রিবিউট নিদের্শ করে যে ইউজার ক্লিক করে কোথায় যাবে।

Hypertext reference হতে পারে Internal, Local, Global ।

ইন্টারনাল: একই পেজের মধ্যে লিংক তৈরী হবে।

লোকাল: আপনার web site এর ভিতরে কোন পেজেরে সাথে লিংক তৈরী হবে।

গ্লোবাল: আপনার web site এর বাহিরে অন্য web site এর লিংক তৈরী হবে।

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

লোকাল- href="/codestrickz/../pics/picturefile.jpg"

গ্লোবাল- href="http://www.tizag.com/"

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

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

1.<a href="http://www.codestrickz.xyz/" target="_blank" >codestrickz Home</a>

2.<a href="http://www.google.com/" target="_blank" >Google Home</a>

3. 

4.<a href="http://www.yahoo.com/" target="_blank" >Yahoo Home</a>

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

codestrickz Home         Google Home              Yahoo Home

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

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

1.<a href="http://www.codestrickz.xyz/html-tutorials/html-radio-check" target="_blank">Radio button tutorial</a>

প্রদর্শন

Radio button tutorial

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

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

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

<a href= "mailto:abc@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>