এক্সএইচটিএমএল (XHTML) ডকুমেন্টে লিঙ্ক এবং নেভিগেশন তৈরি করা খুবই গুরুত্বপূর্ণ, কারণ এটি ব্যবহারকারীদের ওয়েব পেজের মধ্যে বা বিভিন্ন পেজের মধ্যে সহজে নেভিগেট করতে সাহায্য করে। এক্সএইচটিএমএল ডকুমেন্টে লিঙ্ক এবং নেভিগেশন তৈরির সময় কিছু নির্দিষ্ট নিয়ম মেনে চলতে হয়।
১. লিঙ্ক তৈরি করা
এক্সএইচটিএমএল-এ লিঙ্ক তৈরি করতে <a> (anchor) ট্যাগ ব্যবহার করা হয়। লিঙ্ক তৈরির সময় href (hyperlink reference) অ্যাট্রিবিউট ব্যবহার করতে হয়, যা লিঙ্কের গন্তব্য নির্ধারণ করে।
১.1 বেসিক লিঙ্ক গঠন
<a href="https://www.example.com">Visit Example</a>
এখানে:
<a>: লিঙ্কের ট্যাগ।href="https://www.example.com": লিঙ্কের গন্তব্য (URL)।Visit Example: লিঙ্কের দৃশ্যমান টেক্সট, যা ব্যবহারকারী ক্লিক করতে পারে।
২. লিঙ্কের ধরনের বৈশিষ্ট্য
২.1 নতুন ট্যাব/উইন্ডোতে লিঙ্ক খুলতে
লিঙ্কটি নতুন ট্যাব বা উইন্ডোতে খুলতে হলে, target="_blank" অ্যাট্রিবিউট ব্যবহার করতে হয়।
<a href="https://www.example.com" target="_blank">Visit Example</a>
এটি ব্যবহারকারীর বর্তমান পেজ থেকে আলাদা করে নতুন একটি ব্রাউজার ট্যাব বা উইন্ডো খুলবে।
২.2 ওয়েব পেজের ভিতরে নেভিগেশন
একই ডকুমেন্টের বিভিন্ন অংশে লিঙ্ক করতে হলে, আভ্যন্তরীণ লিঙ্ক ব্যবহার করা হয়। এর জন্য প্রথমে সংশ্লিষ্ট অংশে একটি আইডি (ID) নির্ধারণ করতে হয় এবং তারপর সেই আইডির সাথে লিঙ্ক করা হয়।
<a href="#section1">Go to Section 1</a>
<!-- Later in the document -->
<h2 id="section1">Section 1</h2>
<p>This is Section 1.</p>
এখানে:
<a href="#section1">: এটি "Section 1"-এর দিকে নেভিগেট করবে।id="section1": এটি সেই সেকশনের আইডি, যা লিঙ্কের মাধ্যমে পৌঁছানো যাবে।
৩. নেভিগেশন মেনু তৈরি করা
এক্সএইচটিএমএল ডকুমেন্টে একটি সাধারণ নেভিগেশন মেনু তৈরি করতে একটি unordered list (<ul>) এবং list items (<li>) ব্যবহার করা হয়। প্রতিটি তালিকা আইটেমের মধ্যে লিঙ্ক থাকবে।
৩.1 নেভিগেশন মেনুর উদাহরণ
<nav>
<ul>
<li><a href="home.xhtml">Home</a></li>
<li><a href="about.xhtml">About</a></li>
<li><a href="services.xhtml">Services</a></li>
<li><a href="contact.xhtml">Contact</a></li>
</ul>
</nav>
এখানে:
<nav>: এটি ওয়েব পেজের নেভিগেশন অংশ হিসেবে চিহ্নিত।<ul>: একটি অনুচ্ছেদবিহীন তালিকা।<li>: তালিকার একটি আইটেম।<a>: প্রতিটি লিঙ্ক যা পেজে নেভিগেট করবে।
৪. লিঙ্কে ছবি ব্যবহার
লিঙ্কের মধ্যে ছবি ব্যবহার করাও সম্ভব। এজন্য <img> ট্যাগটি <a> ট্যাগের মধ্যে অন্তর্ভুক্ত করা হয়।
<a href="https://www.example.com">
<img src="logo.jpg" alt="Example Logo" />
</a>
এখানে:
<img src="logo.jpg" alt="Example Logo" />: লিঙ্কের ভিতরে একটি ছবি প্রদর্শন করবে।<a>: ছবিটি ক্লিকযোগ্য হবে এবং এটি নির্দিষ্ট URL-এ নেভিগেট করবে।
৫. লিঙ্কের জন্য স্টাইল এবং ডিজাইন
এক্সএইচটিএমএল-এ লিঙ্কের ডিজাইন এবং স্টাইল কাস্টমাইজ করতে CSS ব্যবহার করা যায়। উদাহরণস্বরূপ:
<head>
<style>
a {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
}
</style>
</head>
এখানে:
a: সমস্ত লিঙ্কের জন্য নীল রঙ এবং আন্ডারলাইন বাদ দেওয়া হয়েছে।a:hover: লিঙ্কের উপর মাউস হোভার করলে লিঙ্কের রঙ লাল হয়ে যাবে।
৬. লিঙ্ক এবং নেভিগেশনের এক্সএইচটিএমএল বৈশিষ্ট্য
৬.1 কেস সেনসিটিভিটি
এক্সএইচটিএমএল ডকুমেন্টে সমস্ত ট্যাগ এবং অ্যাট্রিবিউট কেস সেনসিটিভ থাকে। তাই <a> এবং href অ্যাট্রিবিউটের ছোট হাতের অক্ষর ব্যবহার করতে হবে।
৬.2 ট্যাগ বন্ধন
যেহেতু এক্সএইচটিএমএল একটি XML ভিত্তিক ভাষা, তাই <a> এবং অন্যান্য ট্যাগগুলো অবশ্যই সঠিকভাবে বন্ধ হতে হবে, যেমন:
<a href="https://www.example.com">Visit Example</a>
এক্সএইচটিএমএল ডকুমেন্টে লিঙ্ক এবং নেভিগেশন তৈরি করা একটি গুরুত্বপূর্ণ অংশ। সঠিকভাবে লিঙ্ক তৈরি, নেভিগেশন মেনু তৈরি এবং ছবি বা অন্যান্য উপাদান লিঙ্কে অন্তর্ভুক্ত করা আপনার ওয়েব পেজের ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে। এক্সএইচটিএমএল এর কেস সেনসিটিভিটি এবং ট্যাগ বন্ধন নিশ্চিত করতে হলে আপনাকে স্ট্রিক্টভাবে নিয়ম অনুসরণ করতে হবে।
XHTML ডকুমেন্টে হাইপারলিঙ্ক তৈরি করার জন্য <a> (anchor) ট্যাগ ব্যবহৃত হয়। এটি ব্যবহারকারীদের এক পৃষ্ঠা থেকে অন্য পৃষ্ঠায় বা অন্য ওয়েবসাইটে যাওয়ার জন্য সংযোগ (link) প্রদান করে। এক্সএইচটিএমএল-এ <a> ট্যাগ ব্যবহার করার সময় কিছু নির্দিষ্ট নিয়ম অনুসরণ করতে হয়, যেগুলো HTML থেকে একটু ভিন্ন।
১. ট্যাগের মৌলিক গঠন
<a href="URL" target="_blank">Link Text</a>
এখানে:
href(Hypertext Reference) অ্যাট্রিবিউটটি হাইপারলিঙ্কের গন্তব্য URL নির্দেশ করে। এটি ঐ পৃষ্ঠার ঠিকানা (web address) দেয় যেখানে ব্যবহারকারী ক্লিক করলে পৌঁছাবে।target="_blank"অ্যাট্রিবিউটটি লিঙ্কটি নতুন ট্যাবে খুলবে। এটি ঐচ্ছিক, তবে ওয়েব ডেভেলপমেন্টে প্রায়ই ব্যবহৃত হয়, যাতে মূল পৃষ্ঠাটি খোলা থাকে এবং ব্যবহারকারী নতুন পৃষ্ঠাটি নতুন ট্যাবে দেখতে পারেন।- লিঙ্ক টেক্সটটি হলো সেই অংশ যা ব্যবহারকারী দেখতে পাবে এবং ক্লিক করতে পারবে।
২. ট্যাগের অ্যাট্রিবিউট
২.1 href (Hyperlink Reference)
href অ্যাট্রিবিউটটি লিঙ্কের গন্তব্য বা URL (Uniform Resource Locator) নির্দেশ করে।
<a href="https://www.example.com">Visit Example</a>
এটি ব্যবহারকারীকে "Visit Example" লেখাটিতে ক্লিক করলে https://www.example.com ঠিকানায় নিয়ে যাবে।
২.2 target
target অ্যাট্রিবিউটটি লিঙ্কটি কোথায় খোলা হবে তা নির্ধারণ করে। সাধারণত দুটি মান ব্যবহার করা হয়:
"_self": এটি ডিফল্ট মান, যেখানে লিঙ্কটি একই উইন্ডো বা ট্যাবে খুলবে।"_blank": এটি নতুন ট্যাবে বা উইন্ডোতে লিঙ্কটি খুলবে।
<a href="https://www.example.com" target="_blank">Open in New Tab</a>
২.3 title
title অ্যাট্রিবিউটটি লিঙ্কের উপর মাউস কার্সর রেখে কিছু অতিরিক্ত তথ্য প্রদর্শন করতে ব্যবহার হয়। এটি ইউজারের জন্য হেল্পফুল হতে পারে।
<a href="https://www.example.com" title="Go to Example">Visit Example</a>
এখানে "Go to Example" টেক্সটটি লিঙ্কের উপর মাউস কার্সর রাখলে প্রদর্শিত হবে।
২.4 rel
rel অ্যাট্রিবিউটটি লিঙ্কের সম্পর্ক নির্দেশ করে। এটি নিরাপত্তা এবং SEO (Search Engine Optimization)-এর জন্য গুরুত্বপূর্ণ হতে পারে।
<a href="https://www.example.com" rel="noopener noreferrer" target="_blank">Visit Example</a>
এটি মূলত একটি সুরক্ষিত লিঙ্ক খুলতে ব্যবহৃত হয়, যেখানে নতুন পৃষ্ঠাটি মূল পৃষ্ঠার সাইটের প্রভাব ছাড়াই লোড হয়।
৩. এক্সএইচটিএমএল-এ ট্যাগ ব্যবহার করার নিয়ম
এক্সএইচটিএমএল-এ <a> ট্যাগ ব্যবহার করার সময় কিছু বিশেষ নিয়ম মেনে চলতে হয়:
৩.1 কেস সেনসিটিভিটি
XHTML একটি কেস-সেনসিটিভ ভাষা, তাই <a> ট্যাগ এবং তার অ্যাট্রিবিউটগুলি ছোট হাতের অক্ষরে থাকতে হবে। যেমন:
<a href="https://www.example.com">Visit Example</a>
৩.2 অ্যাট্রিবিউটের মান কোটেশনে থাকতে হবে
XHTML-এ, সব অ্যাট্রিবিউটের মান কোটেশনে রাখতে হবে। যেমন:
<a href="https://www.example.com" target="_blank" title="Go to Example">Visit Example</a>
৩.3 বন্ধ ট্যাগ ব্যবহার
যেহেতু XHTML একটি XML-ভিত্তিক ভাষা, সমস্ত ট্যাগকে সঠিকভাবে বন্ধ করতে হবে। <a> ট্যাগটি অবশ্যই বন্ধ করতে হবে:
<a href="https://www.example.com">Visit Example</a>
৪. বিভিন্ন ধরনের হাইপারলিঙ্ক
৪.1 অভ্যন্তরীণ লিঙ্ক (Internal Link)
একটি অভ্যন্তরীণ লিঙ্ক অন্য পৃষ্ঠায় বা একই পৃষ্ঠার ভেতর ভিন্ন অংশে নিয়ে যায়। এটি সাধারণত ওয়েবসাইটের বিভিন্ন সেকশনে নেভিগেট করতে ব্যবহৃত হয়।
<a href="#section2">Go to Section 2</a>
এটি ব্যবহারকারীকে একই পৃষ্ঠার section2 নামে কোনও স্থান (id) এ নিয়ে যাবে।
৪.2 বাহ্যিক লিঙ্ক (External Link)
একটি বাহ্যিক লিঙ্ক অন্য ওয়েবসাইট বা ওয়েব পৃষ্ঠায় নিয়ে যায়।
<a href="https://www.wikipedia.org" target="_blank">Visit Wikipedia</a>
এটি ব্যবহারকারীকে https://www.wikipedia.org এ নিয়ে যাবে এবং নতুন ট্যাবে খোলবে।
৪.3 ইমেইল লিঙ্ক (Email Link)
একটি ইমেইল লিঙ্ক ব্যবহারকারীকে ইমেইল ক্লায়েন্টে পাঠানোর জন্য একটি নতুন ইমেইল তৈরি করতে সহায়তা করে।
<a href="mailto:someone@example.com">Send Email</a>
এটি ব্যবহারকারীকে ইমেইল প্রোগ্রাম (যেমন Outlook বা Gmail) খুলে দিবে এবং someone@example.com এ একটি নতুন ইমেইল তৈরি করবে।
৫. উদাহরণ
৫.1 একটি সাধারণ বাহ্যিক লিঙ্ক
<a href="https://www.example.com" target="_blank" title="Go to Example Website">Visit Example</a>
এটি "Visit Example" লেখায় ক্লিক করলে নতুন ট্যাবে https://www.example.com ওয়েবসাইটে নিয়ে যাবে এবং ট্যাবের উপর "Go to Example Website" টুলটিপ দেখাবে।
৫.2 অভ্যন্তরীণ লিঙ্ক
<a href="#about">About Us</a>
...
<h2 id="about">About Us</h2>
<p>Information about the company.</p>
এটি "About Us" লিঙ্কে ক্লিক করলে পৃষ্ঠার about সেকশনে নিয়ে যাবে।
এক্সএইচটিএমএল (XHTML) ডকুমেন্টে <a> ট্যাগ ব্যবহার করে আপনি হাইপারলিঙ্ক তৈরি করতে পারেন। এই ট্যাগের মাধ্যমে ওয়েব পেজের মধ্যে বা বাহ্যিক ওয়েবসাইটের মধ্যে নেভিগেট করা যায়। XHTML-এর ক্ষেত্রে, ট্যাগগুলোকে সঠিকভাবে বন্ধ করা, কেস সেনসিটিভিটি এবং অ্যাট্রিবিউটগুলোর মান কোটেশনে রাখা গুরুত্বপূর্ণ।
একটি ওয়েব পেজে ব্যবহারকারীকে সহজে পেজগুলির মধ্যে নেভিগেট করতে সহায়তা করতে একটি কার্যকরী নেভিগেশন মেনু ডিজাইন করা অত্যন্ত গুরুত্বপূর্ণ। XHTML-এ নেভিগেশন মেনু ডিজাইন করতে HTML-এর সাধারণ ট্যাগ ব্যবহার করা হয়, তবে XHTML-এর ক্ষেত্রে কিছু নির্দিষ্ট নিয়ম মেনে চলতে হয়, যেমন প্রতিটি ট্যাগ সঠিকভাবে বন্ধ করা এবং কেস-সেনসিটিভ ট্যাগ ব্যবহার করা। এখানে একটি সাধারণ নেভিগেশন মেনু ডিজাইন করার প্রক্রিয়া তুলে ধরা হলো।
১. মৌলিক নেভিগেশন মেনুর গঠন
একটি সাধারণ নেভিগেশন মেনু সাধারণত একটি unordered list (<ul>) ব্যবহার করে তৈরি করা হয়, যেখানে প্রতিটি মেনু আইটেম একটি list item (<li>) হিসেবে থাকে এবং প্রতিটি আইটেমে একটি anchor tag (<a>) থাকে। এটি XHTML-এ সঠিকভাবে তৈরি করতে, আমাদের কিছু বিশেষ নিয়ম মেনে চলতে হবে, যেমন:
- প্রতিটি ট্যাগকে সঠিকভাবে বন্ধ করতে হবে।
- HTML অ্যাট্রিবিউটগুলোর মান অবশ্যই কোটেশনে থাকতে হবে।
- ট্যাগগুলো কেস-সেনসিটিভ থাকতে হবে।
নিচে একটি মৌলিক নেভিগেশন মেনুর উদাহরণ দেওয়া হলো।
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>My Website</title>
<style type="text/css">
/* মেনু স্টাইল */
ul.nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.nav li {
float: left;
}
ul.nav li a {
display: block;
padding: 14px 16px;
color: white;
text-align: center;
text-decoration: none;
}
ul.nav li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<ul class="nav">
<li><a href="index.xhtml">Home</a></li>
<li><a href="about.xhtml">About</a></li>
<li><a href="services.xhtml">Services</a></li>
<li><a href="contact.xhtml">Contact</a></li>
</ul>
<p>Content of the website goes here.</p>
</body>
</html>
২. উপাদানগুলির ব্যাখ্যা
২.1 <ul> (Unordered List)
এটি একটি unordered list যা নেভিগেশন মেনুর আইটেমগুলোকে রাখে। XHTML-এ এর জন্য <ul> ট্যাগ ব্যবহার করা হয়, এবং এর মধ্যে <li> (list item) ট্যাগগুলি থাকে।
<ul class="nav">
<li><a href="index.xhtml">Home</a></li>
<li><a href="about.xhtml">About</a></li>
<li><a href="services.xhtml">Services</a></li>
<li><a href="contact.xhtml">Contact</a></li>
</ul>
২.2 <li> (List Item)
প্রতিটি মেনু আইটেম একটি list item (<li>) ট্যাগের মধ্যে থাকবে। এটি একটি আইটেমের প্রতিনিধিত্ব করে যা ব্যবহারকারীর ক্লিকের জন্য উপলব্ধ।
<li><a href="index.xhtml">Home</a></li>
২.3 <a> (Anchor Tag)
এটি লিঙ্ক তৈরির জন্য ব্যবহৃত হয়, যা প্রতিটি মেনু আইটেমে যুক্ত থাকে। এই ট্যাগে href অ্যাট্রিবিউটটি লিঙ্কের গন্তব্য নির্ধারণ করে।
<a href="index.xhtml">Home</a>
২.4 CSS স্টাইলিং
এখানে CSS ব্যবহার করা হয়েছে যাতে মেনুটি দেখতে সুন্দর এবং ব্যবহারযোগ্য হয়। যেমন:
ul.navদিয়ে মেনুর তালিকাকে স্টাইল করা হয়েছে, যাতে কোনো বুলেট পয়েন্ট না থাকে।ul.nav li aদিয়ে লিঙ্কগুলোকে স্টাইল করা হয়েছে, যাতে মেনু আইটেমগুলি ব্লক এলিমেন্ট হিসেবে প্রদর্শিত হয়।ul.nav li a:hoverদিয়ে মাউস হোভার করলে মেনু আইটেমের ব্যাকগ্রাউন্ড রঙ পরিবর্তন হয়।
৩. নেভিগেশন মেনুর উন্নত ডিজাইন
একটি উন্নত নেভিগেশন মেনু তৈরি করতে আপনি সিএসএস ব্যবহার করে বিভিন্ন স্টাইলিং ফিচার যুক্ত করতে পারেন, যেমন ড্রপডাউন মেনু, রেসপন্সিভ ডিজাইন, এবং ইন্টারেক্টিভ ইফেক্ট। নিচে একটি উদাহরণ দেওয়া হলো, যেখানে ড্রপডাউন মেনু ব্যবহার করা হয়েছে।
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Advanced Navigation Menu</title>
<style type="text/css">
/* মেনু স্টাইল */
ul.nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.nav li {
float: left;
position: relative;
}
ul.nav li a {
display: block;
padding: 14px 16px;
color: white;
text-align: center;
text-decoration: none;
}
ul.nav li a:hover {
background-color: #111;
}
/* ড্রপডাউন মেনু স্টাইল */
ul.nav li ul {
display: none;
position: absolute;
top: 50px;
left: 0;
background-color: #333;
min-width: 160px;
}
ul.nav li:hover > ul {
display: block;
}
ul.nav li ul li {
float: none;
}
ul.nav li ul li a {
padding: 12px 16px;
}
ul.nav li ul li a:hover {
background-color: #555;
}
</style>
</head>
<body>
<h1>Welcome to My Advanced Website</h1>
<ul class="nav">
<li><a href="index.xhtml">Home</a></li>
<li><a href="about.xhtml">About</a></li>
<li>
<a href="#">Services</a>
<ul>
<li><a href="webdesign.xhtml">Web Design</a></li>
<li><a href="seo.xhtml">SEO Services</a></li>
<li><a href="digitalmarketing.xhtml">Digital Marketing</a></li>
</ul>
</li>
<li><a href="contact.xhtml">Contact</a></li>
</ul>
<p>Content of the website goes here.</p>
</body>
</html>
XHTML-এ নেভিগেশন মেনু ডিজাইন করার জন্য HTML-এর মৌলিক ট্যাগ এবং CSS ব্যবহার করা হয়। আপনি উপরের উদাহরণগুলোর মাধ্যমে একটি সাদাসিধে এবং উন্নত নেভিগেশন মেনু ডিজাইন করতে পারেন। XHTML-এর ক্ষেত্রে, প্রতিটি ট্যাগ সঠিকভাবে বন্ধ করা এবং কেস-সেনসিটিভ হওয়া অত্যন্ত গুরুত্বপূর্ণ। এছাড়াও, CSS-এর মাধ্যমে মেনু আইটেমগুলোর স্টাইলিং করা হয়, যা ইউজার অভিজ্ঞতাকে উন্নত করে।
XHTML ডকুমেন্টে ইমেজ (image) ব্যবহারের জন্য <img> ট্যাগ ব্যবহার করা হয়, যা একটি একক ট্যাগ এবং এটিকে বন্ধন সহ ব্যবহার করা আবশ্যক (যেমন <img />)। XHTML-এ, ছবির লিঙ্ক বা উৎস (source) এবং অন্যান্য অ্যাট্রিবিউটস সঠিকভাবে নির্ধারণ করতে হয়, যাতে ব্রাউজার এবং সার্ভার উভয়ই তা সঠিকভাবে রেন্ডার করতে পারে।
১. <img> ট্যাগের গঠন
ইমেজ যোগ করার জন্য XHTML-এ <img /> ট্যাগ ব্যবহার করা হয়। এই ট্যাগে কিছু মৌলিক অ্যাট্রিবিউট থাকে যা ইমেজের উৎস (source), বর্ণনা (description), আকার (size) ইত্যাদি নির্দেশ করে।
<img src="image.jpg" alt="Sample Image" width="300" height="200" />
২. <img> ট্যাগের প্রধান অ্যাট্রিবিউটস
২.1 src (source)
src অ্যাট্রিবিউটটি ইমেজের উৎস বা লিঙ্ক নির্দেশ করে। এটি ছবি বা গ্রাফিক্সের ফাইলপথ (URL) বা লোকাল ফাইল সিস্টেমে ইমেজের অবস্থান দেখায়।
উদাহরণ:
<img src="images/photo.jpg" alt="Photo" />
২.2 alt (alternative text)
alt অ্যাট্রিবিউটটি ছবির বর্ণনা প্রদান করে যা ছবিটি যদি লোড না হয় বা যদি ব্যবহারকারী ছবিটি দেখতে না পারে, তখন প্রদর্শিত হয়। এটি SEO এবং অ্যাক্সেসিবিলিটির জন্য গুরুত্বপূর্ণ।
উদাহরণ:
<img src="images/logo.png" alt="Company Logo" />
২.3 width এবং height
width এবং height অ্যাট্রিবিউটগুলি ছবির আকার (ব্রাউজারে প্রদর্শিত আকার) নির্ধারণ করে। এগুলি পিক্সেলে (px) প্রদান করতে হয়।
উদাহরণ:
<img src="images/photo.jpg" alt="Sample Photo" width="500" height="300" />
২.4 title
title অ্যাট্রিবিউটটি ছবির উপর মাউস রেখে যাওয়া অবস্থায় একটি টুলটিপ প্রদর্শন করে। এটি ব্যবহারকারীর জন্য অতিরিক্ত তথ্য প্রদান করতে সহায়ক।
উদাহরণ:
<img src="images/pic.jpg" alt="Picture" title="Click to view full image" />
২.5 longdesc (long description)
longdesc অ্যাট্রিবিউটটি ছবির জন্য একটি বিস্তারিত বর্ণনা প্রদান করে। এটি বিশেষ করে ব্যবহারকারীদের জন্য সহায়ক, যারা ছবির কন্টেন্ট বুঝতে সমস্যার সম্মুখীন হন।
উদাহরণ:
<img src="diagram.jpg" alt="Diagram of a circle" longdesc="circle-description.html" />
৩. ইমেজ লিঙ্ক তৈরি করা
XHTML-এ, আপনি ইমেজটিকে একটি লিঙ্কের অংশ হিসেবেও ব্যবহার করতে পারেন, যাতে ব্যবহারকারী ছবির উপর ক্লিক করলে একটি নির্দিষ্ট পেজ বা URL-এ চলে যান। এটি <a> (অ্যাঙ্কর) ট্যাগের সঙ্গে ব্যবহার করা হয়।
উদাহরণ:
<a href="https://www.example.com">
<img src="logo.jpg" alt="Company Logo" />
</a>
এখানে, ছবির উপর ক্লিক করলে ব্যবহারকারী https://www.example.com-এ চলে যাবে।
৪. ইমেজের জন্য কিছু গুরুত্বপূর্ণ নিয়ম
৪.1 XML সঙ্গততার জন্য বন্ধন সহ ট্যাগ
XHTML ডকুমেন্টে সমস্ত ট্যাগ অবশ্যই বন্ধন সহ থাকতে হবে। সুতরাং, <img> ট্যাগটিকে এইভাবে বন্ধ করতে হবে:
<img src="image.jpg" alt="Sample Image" />
৪.2 অ্যাট্রিবিউটস কোটেশন
XHTML-এ সমস্ত অ্যাট্রিবিউটের মান কোটেশনে থাকতে হবে, যেমন:
<img src="photo.jpg" alt="A beautiful landscape" />
৪.3 কেস-সেনসিটিভ ট্যাগ
XHTML একটি কেস-সেনসিটিভ ভাষা, অর্থাৎ আপনি <img> এবং <IMG> এর মধ্যে পার্থক্য বুঝতে হবে। সমস্ত ট্যাগ ছোট হাতের অক্ষরে লেখা উচিত:
<img src="image.jpg" alt="Example" />
৫. উদাহরণ: একটি সম্পূর্ণ XHTML ডকুমেন্টে ইমেজ লিঙ্ক এবং অ্যাট্রিবিউট
এখানে একটি উদাহরণ দেওয়া হলো যেখানে ইমেজ ট্যাগ এবং তার অ্যাট্রিবিউট ব্যবহার করা হয়েছে, এবং ইমেজটিকে একটি লিঙ্ক হিসেবে রূপান্তরিত করা হয়েছে:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Image Link Example</title>
</head>
<body>
<h1>Welcome to Our Website</h1>
<p>Click the image below to visit our homepage:</p>
<a href="https://www.example.com">
<img src="logo.png" alt="Website Logo" width="200" height="100" title="Click here to visit our homepage" />
</a>
</body>
</html>
এখানে:
srcঅ্যাট্রিবিউটে ছবির উৎস বা URL দেয়া হয়েছে।altঅ্যাট্রিবিউটে ছবির বর্ণনা দেওয়া হয়েছে।widthএবংheightঅ্যাট্রিবিউটের মাধ্যমে ছবির আকার নির্ধারণ করা হয়েছে।titleঅ্যাট্রিবিউটটি টুলটিপ হিসেবে প্রদর্শিত হবে যখন ব্যবহারকারী ছবির উপর মাউস রেখে যাবে।<a>ট্যাগ ব্যবহার করে ছবিকে লিঙ্ক হিসেবে রূপান্তরিত করা হয়েছে।
XHTML-এ ইমেজ ব্যবহার করার জন্য <img /> ট্যাগের সঠিক গঠন এবং অ্যাট্রিবিউটস মেনে চলা অত্যন্ত গুরুত্বপূর্ণ। src, alt, width, height, title ইত্যাদি অ্যাট্রিবিউটগুলি সঠিকভাবে ব্যবহারের মাধ্যমে আপনি একটি কার্যকর এবং অ্যাক্সেসিবল ওয়েব পেজ তৈরি করতে পারবেন।
XHTML ডকুমেন্টে ব্রাউজার নেভিগেশন এবং লিঙ্কের জন্য টার্গেট অ্যাট্রিবিউট ব্যবহার করা একটি গুরুত্বপূর্ণ বিষয়। এই টিউটোরিয়ালে আমরা ব্যাখ্যা করব কীভাবে এক্সএইচটিএমএল ডকুমেন্টে ব্রাউজার নেভিগেশন এবং টার্গেট অ্যাট্রিবিউট ব্যবহার করা হয়।
১. ব্রাউজার নেভিগেশন
১.1 লিঙ্ক তৈরি করা
XHTML ডকুমেন্টে, href অ্যাট্রিবিউট সহ <a> ট্যাগ ব্যবহার করে আপনি লিঙ্ক তৈরি করতে পারেন, যা একটি নির্দিষ্ট URL বা পেজে ব্যবহারকারীকে নিয়ে যায়। এটি ওয়েব পেজের মধ্যে নেভিগেশন করতে সহায়তা করে।
<a href="https://www.example.com">Visit Example</a>
এখানে, href="https://www.example.com" লিঙ্কের লক্ষ্য URL নির্দেশ করছে এবং "Visit Example" হলো প্রদর্শিত টেক্সট যা ক্লিক করলে ব্যবহারকারী ওই URL-এ যাবে।
২. টার্গেট অ্যাট্রিবিউট
২.1 টার্গেট অ্যাট্রিবিউট কি?
target অ্যাট্রিবিউটটি লিঙ্কের উদ্দেশ্য বা টার্গেট কনটেইনার নির্ধারণ করে। এটি নির্ধারণ করে যে লিঙ্কটি কীভাবে (একই উইন্ডো, নতুন ট্যাব, বা নতুন উইন্ডো) খোলা হবে।
২.2 টার্গেট অ্যাট্রিবিউটের মান
target অ্যাট্রিবিউটের জন্য কয়েকটি ভিন্ন মান থাকতে পারে, যেগুলি আপনাকে লিঙ্কের আচরণ নিয়ন্ত্রণ করতে সহায়তা করে:
_self: বর্তমান উইন্ডো বা ট্যাবে লিঙ্কটি ওপেন হবে (এটি ডিফল্ট মান)।_blank: লিঙ্কটি একটি নতুন উইন্ডো বা ট্যাবে ওপেন হবে।_parent: যদি পেজটি একটি ফ্রেম বা আইফ্রেমে থাকে, তবে প্যারেন্ট ফ্রেমে লিঙ্কটি ওপেন হবে।_top: সম্পূর্ণ উইন্ডোতে (ফ্রেমসেটের বাইরে) লিঙ্কটি ওপেন হবে।
৩. টার্গেট অ্যাট্রিবিউট সহ লিঙ্ক উদাহরণ
৩.1 একই উইন্ডো/ট্যাবে লিঙ্ক খুলতে _self ব্যবহার করা
<a href="https://www.example.com" target="_self">Visit Example</a>
এটি একই উইন্ডো বা ট্যাবে লিঙ্কটি খুলবে (এটি ডিফল্ট আচরণ, তাই target="_self" ব্যবহারের প্রয়োজন নেই)।
৩.2 নতুন উইন্ডো বা ট্যাবে লিঙ্ক খুলতে _blank ব্যবহার করা
<a href="https://www.example.com" target="_blank">Open Example in New Tab</a>
এটি লিঙ্কটিকে নতুন ট্যাবে বা নতুন উইন্ডোতে খুলবে, যাতে বর্তমান পেজটি অপরিবর্তিত থাকে।
৩.3 প্যারেন্ট ফ্রেমে লিঙ্ক খুলতে _parent ব্যবহার করা
<a href="https://www.example.com" target="_parent">Visit Example</a>
এটি ফ্রেমসেটের বাইরে প্যারেন্ট ফ্রেমে লিঙ্কটি খুলবে, যদি পেজটি একটি ফ্রেম বা আইফ্রেমে থাকে।
৩.4 সম্পূর্ণ উইন্ডোতে লিঙ্ক খুলতে _top ব্যবহার করা
<a href="https://www.example.com" target="_top">Visit Example</a>
এটি সম্পূর্ণ উইন্ডোতে, সমস্ত ফ্রেম বা আইফ্রেমকে উপেক্ষা করে, লিঙ্কটি খুলবে।
৪. XHTML-এ টার্গেট অ্যাট্রিবিউট ব্যবহার করার নিয়ম
XHTML ডকুমেন্টে target অ্যাট্রিবিউট ব্যবহারের সময় কিছু গুরুত্বপূর্ণ নিয়ম মেনে চলতে হবে:
- কেস সেনসিটিভিটি: XHTML এ সব ট্যাগ এবং অ্যাট্রিবিউট কেস সেনসিটিভ (ছোট হাতের অক্ষরে) থাকতে হবে। তাই
target="_blank"এভাবে ব্যবহার করতে হবে, বড় হাতের অক্ষর ব্যবহার করা যাবে না। - ব্লক ট্যাগগুলোর সাথে ব্যবহৃত:
targetঅ্যাট্রিবিউট মূলত<a>,<form>,<base>ইত্যাদি ট্যাগের সাথে ব্যবহার করা হয়।
৫. পূর্ণাঙ্গ উদাহরণ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>XHTML Target Example</title>
</head>
<body>
<h1>XHTML Links with Target Attribute</h1>
<p>Click the links below:</p>
<!-- Same window/tab -->
<a href="https://www.example.com" target="_self">Visit Example in the same window</a><br />
<!-- New window/tab -->
<a href="https://www.example.com" target="_blank">Open Example in a new tab</a><br />
<!-- Parent frame -->
<a href="https://www.example.com" target="_parent">Open in parent frame</a><br />
<!-- Full window -->
<a href="https://www.example.com" target="_top">Open in full window</a>
</body>
</html>
XHTML ডকুমেন্টে ব্রাউজার নেভিগেশন এবং টার্গেট অ্যাট্রিবিউট ব্যবহার করে আপনি লিঙ্কের আচরণ নিয়ন্ত্রণ করতে পারেন, যেমন লিঙ্কটি নতুন ট্যাবে বা একই উইন্ডোতে খোলা হবে। target অ্যাট্রিবিউটটি বিভিন্ন মান গ্রহণ করতে পারে, যেমন _self, _blank, _parent, এবং _top যা লিঙ্কের আচরণ এবং উপস্থাপনকে প্রভাবিত করে। XHTML-এ এই অ্যাট্রিবিউট ব্যবহারের সময় কেস সেনসিটিভিটি এবং সঠিক গঠন মেনে চলা অত্যন্ত গুরুত্বপূর্ণ।
Read more
