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

এইচটিএমএল লিংক টিউটোরিয়াল

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

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

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

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

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

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

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

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

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

গ্লোবাল- href="http://www.ypdesigner.tk/"

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

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

<a href="http://www.poblemx.tk" target="_blank" >All Pc Problem Solutions </a>

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

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

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

Target এট্রিবিউট দ্বারা বোঝায়, হয় পেজ খুলতে হবে পৃথক window তে অথবা লিংক খুলতে হবে একই browser window তে ।

target="_blank"

নতুন browser window তে page খোলা ।

“_self"

current window তে page Load নেয়া।

“_parent"

Loads new page into a frame that is superior to where the link lies

“_top"

সব frames cancel করে, current browser window নতুন page Load নেয়া।

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

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

<a href= "mailto:abc@mail.com" >Email Example</a>

এই লিংকের উপর মাউস নিয়ে যান, নিচে স্টাটাসবারে 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>

এখানে ক্লিক করলে আপনার ইয়াহু মেইল খুলবে এবং 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>