ওয়েব সাইটকে ব্যাবহার
উপযোগী করে গড়ে তোলার জন্য link ব্যাবহার করা খুব প্রয়োজন। anchor tag দিয়ে লিংক তৈরি করা হয়। আপনি আপনার ওয়েব পেজ এর
কোন text এর উপর লিংক দিয়ে দিতে পারেন।সেই text এর উপর click করলে অন্য পেজ বা সাইটে
নিয়ে যাবে। শুধু text নয় একটা e-mail address এর উপর এমন কি ছবির উপরও লিংক দিয়ে দেয়া যায়।
HTML Link –Syntax :
এইচটিএমএল লিংক <a> এবং </a>
এর মাঝে লেখা হয়।
<a
href=”url”> text </a>
href দিয়ে বোঝানো হয় ইউজার click করে কোথায় যাবে।
উদাহরণঃ
<a href="http://www.bdtutorialweb.blogspot.com">বাংলা ওয়েব ডিজাইন
টিউটোরিয়াল</a>
href( Hypertext
reference) ৩ ধরনের হতে পারে। যেমন- Internal
,Local, Global
ইন্টারনালঃএকই পেজের মাঝে
লিংক তৈরি হবে।
লোকালঃ আপনার ওয়েব সাইট এর
ভিতরে কোন একটি পেজের সাথে লিংক তৈরি হবে।
গ্লোবালঃ আপনার ওয়েব সাইটের
বাহিরে অন্য ওয়েব সাইটের লিংক তৈরি হবে।
এইচটিএমএল TEXT লিংকঃ <a> দিয়ে লিংক শুরু হবে href দিয়ে নির্ধারণ করে দিবেন
কোন ধরনের লিংক আপনি দিতে চান। href attribute কে ওপেনিং ট্যাগ এর মাঝে রাখতে হবে। এবং opening আর closing tag এর যদি কোন লেখা লিখে দেন , সেটা পরে ওয়েব পেজে
লিংক হিসাবে দেখাবে।
<a href="http://www.bdtutorialweb.blogspot.com">HTML
Tutorial</a>
এখানে HTML Tutorial লেখাটি ওয়েব পেজে লিংক হিসাবে দেখাবে।
এইচটিএমএল ইমেইল লিংকঃ
<a
href=”mailto:xyz@mail.com">Email Link
Example</a>
ছবি লিঙ্কঃ
আপনি চাইলে একটা ছবির উপরও
লিংক দিতে পারবেন।
<a
href="http://www.bdtutorialweb.blogspot.com
">
<img
src="link.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
এইচটিএমএল লিংক target:
Target attribute দিয়ে লিংকটি কিভাবে খুলবে সেটা নির্ধারণ করা হয়।
“_blank” দিলে নতুন উইন্ডোতে আপনার লিংকটা খুলবে।
“_self” দিলে যে পেজে লিংক আছে ঐ
পেজ এর মধ্যেই লিংকটি লোড হবে।
<a
href="http://www.bdtutorialweb.blogspot.com
" target="_blank">
HTML Tutorial</a>
এভাবে লিখে লিঙ্কে click করে দেখেন আপনার ব্রাউজারে
নতুন একটা tab এ লিংকটা খুলবে।
এইচটিএমএল লিংক কালারঃ
সিএসএস ব্যাবহার করে লিংকের
কালার পরিবর্তন করা যায়।
<!DOCTYPE
html>
<html>
<head>
<style>
a:link {
color:#000000;
background-color:transparent;
text-decoration:none;
}
a:visited {
color:#000000;
background-color:transparent;
text-decoration:none;
}
a:hover {
color:#ff0000;
background-color:transparent;
text-decoration:underline;
}
a:active {
color:#ff0000;
background-color:transparent;
text-decoration:underline;
}
</style>
</head>
<body>
<p>You can
change the default colors of links</p>
<a
href="html_images.html" target="_blank">HTML
Images</a>
</body>
</html>
উপরে head section এর ভিতরে <style> ব্যাবহার করে সিএসএস কোড
লেখা হয়েছে। এখানে
a:link {
color:#000000;
background-color:transparent;
text-decoration:none;
} এই কোড ব্যাবহার করে
লিংকের কালার নির্ধারণ করা হয়েছে।
a:visited {
color:#000000;
background-color:transparent;
text-decoration:none;
} এটা দিয়ে বোঝানো হয়েছে
লিংকটা visited কালার কেমন হবে সেটা।
a:hover {
color:#ff0000;
background-color:transparent;
text-decoration:underline;
} লিংকের উপর mouse নিয়ে গেলে কেমন কালার হবে
সেটা নির্ধারণ করার জন্য এই কোড ব্যাবহার করা হয়েছে।
a:active {
color:#ff0000;
background-color:transparent;
text-decoration:underline;
} লিংকের উপর click করার পরে তার active কালার বোঝানো হয়েছে।
নোটপ্যাড open করে উপরের code টুকু লিখে
file মেনু থেকে Save as এ ক্লিক করে File name: anything.html
, Save as type : All files, দিয়ে save করে html ফাইলটি browser দিয়ে open করলে দেখতে পারেন।
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন