HTML -এ হাইপারলিঙ্ক, HTML লিঙ্ক, Text লিঙ্ক, ওয়েবসাইটে লিঙ্ক, ইমেজ লিঙ্ক, ই-মেইলের সাথে লিঙ্ক করা
HTML -এ হাইপারলিঙ্ক, HTML লিঙ্ক, Text লিঙ্ক, ওয়েবসাইটে লিঙ্ক, ইমেজ লিঙ্ক, ই-মেইলের সাথে লিঙ্ক করা
হাইপারলিঙ্ক (Hyperlink)
ওয়েব পেইজ ডিজাইনের একটি গুরুত্বপূর্ণ বিষয় হলো লিঙ্ক। ওয়েবসাইটের এক পেইজের সাথে অন্য পেইজের সংযুক্ত করাকে হাইপারলিঙ্ক বলে। এক পেইজ থেকে অন্য পেইজে গমন করার জন্য হাইপারলিঙ্ক ব্যবহার করা হয়। হাইপারলিঙ্ক হলো ওয়েবের একটি রিসোর্সের রেফারেন্স (ঠিকানা)। পেইজ, ইমেজ, সাউন্ড, মুভি ইত্যাদি রিসোর্সকে হাইপারলিঙ্ক দিয়ে নির্দেশ করা যায়। হাইপারলিঙ্ক নির্দেশ দেওয়ার জন্য যে সফটওয়্যার ব্যবহার করা হয় তাকে হাইপারলিঙ্ক সিস্টেম বলে।
একটি ওয়েবসাইটে অনেকগুলো ওয়েব পেইজ থাকতে পারে। একটি ওয়েব পেইজ হতে অন্য আরেকটি ওয়েব পেইজে যাওয়ার জন্য HTML লিঙ্ক ব্যবহার করা হয়। Thumbnails দ্বারা ছোট সাইজের ইমেজ যা বড় ভালো মানের ইমেজের সাথে লিঙ্ক করে। এ লিঙ্কের মাধ্যমে ছবির মান রক্ষা করা যায়। কোনো ডকুমেন্টের অভ্যন্তরে হাইপারলিঙ্কের গন্তব্যকে নির্ধারণ করার জন্য অ্যাঙ্কর ব্যবহৃত হয়। হাইপারলিঙ্ক ও অ্যাঙ্কর উভয়ই নির্ধারণ করতে HTML অ্যাঙ্কর এলিমেন্ট <a> ব্যবহৃত হয়।
<a> ট্যাগ ব্যবহার করে লিঙ্ক তৈরি করা হয়। <a> ট্যাগের closing ট্যাগ হলো </a>। লিঙ্কে ক্লিক করলে কোথায় যাবে তা নির্দিষ্ট করার জন্য href (hyperlink reference) অ্যাট্রিবিউট ব্যবহার করা হয়।
HTML লিঙ্ক :
HTML লিঙ্কের সিনটেক্স হলো : <a href = “url”> link text </a>
এখানে, url এর স্থলে ওয়েব পেইজের পূর্ণ ঠিকানা দিতে হবে।
সাধারণত তিন ধরনের লিঙ্ক তৈরি করা যায়। যথা
১. ইন্টারনাল হাইপারলিঙ্ক : একই সার্ভারে অবস্থিত একটি ওয়েবসাইটের এক পেইজের সাথে অন্য পেইজের লিঙ্ক তৈরি করাকে ইন্টারনাল হাইপারলিঙ্ক বলে। একই পেইজের মধ্যে লিঙ্ক তৈরি করা যায়। যেমন,
<a href = “# goodname”> goodname </a>
২. লোকাল হাইপারলিঙ্ক : একটি ওয়েবসাইটের এক পেইজের সাথে অন্য পেইজের লিঙ্ক তৈরি করাকে লোকাল হাইপারলিঙ্ক বলে। একই ওয়েবসাইটের মধ্যে অন্য কোনো পেইজে লিঙ্ক তৈরি করা যায়। যেমন,
<a href = “ICT.html”> ICT </a>
৩. গ্লোবাল হাইপারলিঙ্ক : একটি ওয়েবসাইটের কোথায়ও ক্লিক করে অন্য একটি ওয়েবসাইটে যাওয়ার পদ্ধতিকে গ্লোবাল হাইপারলিঙ্ক বলে। ওয়েবসাইটের বাইরে অন্য কোন সাইটের সাথে লিঙ্ক দেওয়া হয়। যেমন,
<a href = https://www.dhakaeducationboard.gov.bd> Visit Dhaka Education Board </a>
href অ্যাট্রিবিউট লিঙ্কের ঠিকানা নির্ধারণ করে। <a> এলিমেন্টটি একটি লিঙ্ক নির্ধারণ করে।
উক্ত প্রোগ্রামটি Notepad এ লিখে Test-05.html নামে সংরক্ষণ করা হলো-
এখন Test-05.html ফাইলে ডাবল ক্লিক করলে Google Chrome প্রোগ্রামে নিচের আউটপুট পাওয়া যাবে।
HTML Text লিঙ্ক করা : নিচের প্রোগ্রামটি Notepad এ লিখে Test-06.html নামে সংরক্ষণ করা হলো :
<a> HSC ICT BOOK </a>
এখন Test-06.html ফাইলে ডাবল ক্লিক করলে
Google Chrome প্রোগ্রামে পাশের আউটপুট পাওয়া যাবে।
HTML টেক্সট ওয়েবসাইটে লিঙ্ক করা : প্রোগ্রামটি Notepad এ লিখে Test.html নামে সংরক্ষণ করা হলো :
<a href = https://www.dhakaeducationboard.gov.bd/target = “ _blank”>
Dhaka Board Home </a> <br />
<a href = https://www.lecturepublications.com/ target = “ _blank”>
Lecture Home </a> <br />
<a href = https://www.mpsc.edu.bd/ target = “ _blank”>
MPSC Home </a>
আউটপুট :
HTML টেক্সট টার্গেটে লিঙ্ক করা : প্রোগ্রামটি Notepad এ লিখে Test.html নামে সংরক্ষণ করা হলো :
<p> <a href = “Test_style_lastpage.html”>
This text </a> is a link to a page on this website. </p>
<a href = https ://www.google.com/>
This text </a> is a link to a page on the world wide web.
আউটপুট :
ওয়েব পেইজে ইমেজ ব্যবহার করে লিঙ্ক করা : প্রোগ্রামটি Notepad এ লিখে Test.html নামে সংরক্ষণ করা হলো-
<html>
<body>
<p>
Image as a link: <a href=”https://www.prokashdas.com”>
<img src=”PKD.jpg” width=”100″ height=”100″> </a>
</p>
</body>
</html>
আউটপুট :
ই-মেইলের সাথে লিঙ্ক করা : ই-মেইল লিঙ্কের ক্ষেত্রে mailto: প্রোটোকলের সাথে অ্যাঙ্কর লিঙ্ক এবং ই-মেইল ঠিকানা লিখতে হয়। ই-মেইলের সাথে লিঙ্ক করার কোড হলো-
<a href =”mailto: email address”> send email </a>
অর্থাৎ <a href =”mailto: prokashkumar08@yahoo.com”> send email </a>
আউটপুট :
হোম পেইজের সাথে একাধিক ওয়েব পেইজ লিঙ্ক করা : একটি হোম পেইজের সাথে তিনটি ওয়েব পেইজ লিঙ্ক করে দেখানো হলো। প্রথমে আলাদা আলাদাভাবে তিনটি ওয়েব পেইজ তৈরি করে Page-1.html, Page-2.html ও Page-3.html নামে সংরক্ষণ করা হলো।
প্রথম ওয়েব পেইজ Page-1.html তৈরির কোড : <font size =”10″> First Page </font>
দ্বিতীয় ওয়েব পেইজ Page-2.html তৈরির কোড : <font size=”10″> Second Page </font>
তৃতীয় ওয়েব পেইজ Page-3.html তৈরির কোড : <font size=”10″> Third Page </font>
এখন হোম পেইজের জন্য Home Page.html তৈরির কোড :
<html>
<body>
<p> Home Page : </p>
<a href = “page-1.html”> First Page </a> </p>
<a href = “page-2.html”> Second Page </a> </p>
<a href = “page-3.html”> Third Page </a> </p>
</body>
</html>
এবার First Page এ ক্লিক করলে First Page ওপেন হবে। এভাবে Second Page এ ক্লিক করলে Second Page ওপেন হবে। তদ্রুপ Third Page এ ক্লিক করলে Third Page ওপেন হবে।
আউটপুট :
