আমরা এখন দেখব কিভাবে ওয়েব পেইজে হাইপারলিঙ্ক করতে হয় । হাইপারলিঙ্ক (hyperlink) হলো ওয়েবের একটি রিসোর্সের ঠিকানা । হাইপারলিঙ্ক (hyperlink) বা লিঙ্ক এর মার্ধ্যমে পেইজ, ইমেজ, ভিডিও, সাউন্ড, অডিও নির্দেশ করা হয় । একটি ওয়েব পেইজ থেকে অন্য ওয়াব পেইজে যাওয়ার জন্য html লিঙ্ক বা হাইপারলিঙ্ক (hyperlink) ব্যাবহার করা হয় ।
html লিঙ্কের সিনটেক্স হলো :
<a href="url">Link text</a>
html লিঙ্ক তিন প্রকার :-
1.Internal Link : পেজের বিভিন্ন ট্যাগের মধ্যো লিংক তৈরি করা হয় ।
2.Local Link : একটি পেজের সাথে অন্য পেজের লিংক তৈরি করা হয় ।
3.Global Link : ওয়েবসাইটের বাইরে অন্য কোন সাইটের সাথে লিংক তৈরি করা হয় ।
এখন আমরা এই তিন লিংকের উদাহরণ দেখব ।
1.Internal Hyperlink
উদাহরণ কোর্ড :-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Internal Hyperlink</title>
<style>
a {
text-decoration:none;
}
</style>
</head>
<body>
<center>
<h2> Internal Hyperlink Test</h2>
<a href="#name"><name></a>
<a href="#password"><password></a>
<a href="#number"><number></a>
<a href="#class"><class></a>
<a href="#email"><email></a>
<a href="#url"><url></a>
<a href="#address"><address></a>
<br>
<br>
<br>
<input type="text" name="text" id="name" placeholder="Name">
<br>
<br>
<input type="password" name="password" id="password" placeholder="password">
<br>
<br>
<input type="number" name="number" id="number" placeholder="number">
<br>
<br>
<input type="text" name="class" id="class" placeholder="class">
<br>
<br>
<input type="email" name="email" id="email" placeholder="email">
<br>
<br>
<input type="url" name="url" id="url" placeholder="url">
<br>
<br>
<input type="text" name="address" id="address" placeholder="address">
</center>
</body>
</html>
কোর্ড বিশ্লেষণ :-
<name> <password> <number> <class> <email> <url> <address>
এখানে আমরা যে লেখার উপর ক্লিক করব , আমরা সাথে সাথে নিচে সেই লেখার input ফিল্ডে redirect করব ।
যদি name এ ক্লিক করি তাহলে name ফিল্ডে redirect করব । এটা হল ইন্টারনাল লিঙ্ক ।
2.Local Hyperlink
উদাহরণ কোর্ড :-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Local hyperlink</title>
<style>
a {
text-decoration:none;
}
</style>
</head>
<body>
<center>
<h2> Local Hyperlink Test</h2>
<br>
<br>
Line url example
<br>
<br>
<a href="login.html">Log in</a>
<br>
<br>
Button url example
<br>
<br>
<button>
<a href="login.html">Log in</a>
</button>
</center>
</body>
</html>
কোর্ড বিশ্লেষণ :-
<a href="login.html">Log in</a> এখানে আমরা যে ফাইল দিব log in বা log in বাটনে ক্লিক করলে সেই ফাইলে redirecte করব । উদাহরণ হিসেবে আমি login.html দিয়েছি । মনে রাখতে হবে যে ফাইল দিব সেটা যেন একই ফোল্ডারে থাকে, অর্থাৎ এটি এবং যে ফাইল দিব সেই ফাইল ।
3.Global Hyperlink
উদাহরণ কোর্ড :-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Global hyperlink</title>
<style>
a {
text-decoration:none;
}
</style>
</head>
<body>
<center>
<h2> Global Hyperlink Test</h2>
<br>
<br>
Line url example
<br>
<br>
<a href="https://bong71.blogspot.com/">Teaching Bangla bong71</a>
<br>
<br>
Button url example
<br>
<br>
<button>
<a href="https://bong71.blogspot.com/">Teaching Bangla bong71</a>
</button>
</center>
</body>
</html>
কোর্ড বিশ্লেষণ :-
global hyperlink এ যে url দিব সেটিতে redirecte হবে । আমি এখানে আমার website এর লিংক দিয়েছি, চাইলে তোমরাও দিতে পার ।