HTML এ অন্যান্য পেজের সাথে সংযোগ স্থাপনের জন্য <a></a> বা এঙ্কর ট্যাগ ব্যবহার করে লিংক তৈরি করা হয়। আর লিংক সবচেয়ে বেশি ব্যবহার করা হয় নেভিগেশনবারে। সাধারণত কোন একটি লিংক এর চারটি অবস্থা থাকে। যথা
- লিংকের সাধারণ অবস্থা (Normal Condition of link)
- লিংকের ভিজিটেড অবস্থা (Visited Condition of link )
- লিংকের হোবার অবস্থা (Hover Condition of link)
- লিংকের সক্রিয় অবস্থা (Active Condition of link)
লিংকের সাধারণ অবস্থা (Normal Condition of link)
কোন একটি লিংক প্রথমবার ব্যবহার না করা পর্যন্ত যেভাবে প্রদর্শিত হয় তাকে ঐ লিংকের সাধারণ অবস্থা বলে। এ অবস্থায় লিংকটি কেমন দেখাবে তার স্টাইল তৈরি করার জন্য স্টাইল শীটে লেখতে হবে a:link {color: #090;} ।
লিংকের ভিজিটেড অবস্থা (Visited Condition of link )
কোন একটি লিংক এক বা একাধিক বার ব্যবহার করা হলে এবং লিংকের উপর মাউস না রাখলে লিংকটি যেভাবে প্রদর্শিত হয় তাকে ঐ লিংকের ভিজিটেড অবস্থা বলে।এ অবস্থায় লিংকটি কেমন দেখাবে তার স্টাইল তৈরি করার জন্য স্টাইল শীটে লেখতে হবে a:visited {color:#303} ।
লিংকের হোবার অবস্থা (Hover Condition of link)
কোন একটি লিংক ব্যবহার করা হোক বা না হোক, লিংকের উপর মাউস রাখলে লিংকটি যেভাবে প্রদর্শিত হয় তাকে ঐ লিংকের হোবার অবস্থা বলে।এ অবস্থায় লিংকটি কেমন দেখাবে তার স্টাইল তৈরি করার জন্য স্টাইল শীটে লেখতে হবে a:hover { background: #639} ।
লিংকের সক্রিয় অবস্থা (Active Condition of link)
যখন লিংকটি সক্রিয় অবস্থায় থাকে, অর্থাৎ মাউস ক্লিক করার মূহর্তে লিংকটি যেভাবে প্রদর্শিত হয় তাকে ঐ লিংকের সক্রিয় অবস্থা বলে।এ অবস্থায় লিংকটি কেমন দেখাবে তার স্টাইল তৈরি করার জন্য স্টাইল শীটে লেখতে হবে a:active {color:#960;}
চারটি অবস্থাতেই লিংকের ব্যগ্রাউন্ড পরিবর্তন করা যায়। এবং নেভিগেশন বারে এই লজিকটিই বেশি ব্যবহৃত হয়। লিংকের ব্যগ্রাউন্ড পরিবর্তন করার জন্য স্টাইল সিটে লেখতে হবে
a:hover{background:#F60; এর অনুরূপ।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
a:link {color:#F00;}
a:visited {color:#303}
a:hover {color: #fff;}
a:active {color:#960;}
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
a:link {color:#F00;}
a:visited {color:#303}
a:hover {color: #fff;}
a:active {color:#960;}
#nav ul li {float:left; list-style:none;}
#nav ul li a {padding:10px; display:block; text-decoration:none;}
#nav ul li a:link{background:#FCC;}
#nav ul li a:hover{background:#F60;}
#nav ul li a:hover { background: #639}
#nav ul li a:active { background:#39F;}
</style>
</head>
<body >
<a href="https://www.tutohost.com"><h1>This is a Link.</h1></a><br>
<div id="nav">
<ul>
<li><a href="https://www.tutohost.com"><h2>HTML</h2></a></li>
<li><a href="https://www.tutohost.com"><h2>CSS </h2></a></li>
<li><a href="https://www.tutohost.com"><h2>PHP</h2></a></li>
<li><a href="https://www.tutohost.com"><h2>Wordpress</h2></a></li>
</ul>
</div></body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
0 comments: