প্রফেশনাল HTML নেভিগেশন বার বানান: সহজ ধাপে ধাপে টিউটোরিয়াল

HTML-এ নেভিগেশন বার তৈরি করা শিখা আপনাকে ওয়েবসাইট বিল্ডিং এবং ডেভেলপমেন্টে পা রেখে দেবে। ইন্টারনেট ৪.৬৬ বিলিয়ন সক্রিয় ইন্টারনেট ইউজার বিশ্বব্যাপী নিয়ে ব্যক্তিগত এবং পেশাদার খবরের ভিত্তি হয়ে উঠছে, তাই যুব উদ্যোক্তা হিসেবে HTML এবং এর ফাংশন বুঝা অপরিহার্য।

২০২১ 기준 HTML বিশ্বব্যাপী লিডিং কোডিং ভাষাগুলোর একটি, ৫৬% প্রোগ্রামার বলেছেন তারা HTML ব্যবহার করে। HTML-এ নেভিগেশন বার তৈরি করার এই সহজ এবং সংক্ষিপ্ত ধাপগুলো ফলো করে আপনি একটি সিম্পল নেভিগেশন বার, কালার স্কিম এবং ব্যাকগ্রাউন্ড তৈরি করতে পারবেন।

HTML-এ একটি নেভিগেশন বার বা navbar হলো একটি ইউজার ইন্টারফেস সেকশন, সাধারণত ওয়েবসাইটের উপরে, যা ইউজারদের ইনফরমেশন এক্সপ্লোর এবং অ্যাক্সেস করতে দেয়। নেভিগেশন বার একটি ড্রপডাউন মেনু বা একটি কollapse navbar হিসেবে আসে যাতে ক্লাস নাম থাকে। নেভিগেশন ফিচারওয়ালা একটি অ্যাপ্লিকেশন HTML এবং CSS কেও প্রোগ্রামিং ভাষা হিসেবে ব্যবহার করতে পারে অ্যাপ্লিকেশনের এলিমেন্ট কোড করার জন্য।

HTML-এ নেভিগেশন বারের ব্যবহার

• সংগঠন। আপনার ওয়েবসাইটের জন্য একটি নেভিগেশন মেনু থাকা নিশ্চিত করে যে ড্রপডাউন মেনুর লিস্ট আইটেমগুলো কোঅর্ডিনেটেড এবং লজিক্যালি ফরমুলেটেড। সংগঠিত নেভিগেশন লিংক ওয়েবসাইট ভিজিটরদের দৃষ্টিতে আকর্ষণীয়।
• সহজ ব্যবহার। একটি আনঅর্ডার্ড লিস্টের লিংক নেভিগেট করা অসুবিধাজনক এবং আপনার ওয়েবসাইট থেকে ট্রাফিক বelleenতে পারে। ভালোভাবে সংগঠিত এবং ব্যবহার করা সহজ নেভিগেশন বার ওয়েবসাইট ভিজিট করার মানুষের জন্য সুবিধাজনক অভিজ্ঞতা প্রদান করে।
• অ্যাক্সেসিবিলিটি। সুন্দর নেভিগেশন বার ইনফরমেশনে সহজ অ্যাক্সেস দেয় যা একটি স্ট্রিমলাইনড ইউজার এক্সপেরিয়েন্সের অনুমতি দেয়।

নেভিগেশন বার তৈরি করা: ধাপে ধাপে

1. একটি টেক্সট এডিটর খুলুন
2. <nav> ট্যাগ তৈরি করুন
3. <ul> ট্যাগ ডিফাইন করুন
4. <style> ট্যাগ ডিফাইন করুন
5. ডিজাইন পরিবর্তন করুন
6. ট্যাগগুলো বন্ধ করুন

নেভিগেশন বার তৈরি করার ধাপ: গভীরভাবে

আপনি HTML ব্যবহার করে একটি ফাংশনাল এবং অ্যাক্সেসিবল নেভিগেশন বার তৈরি করতে পারেন।

নিচে একটি রেসপন্সিভ নেভিগেশন বার তৈরি করার জন্য আপনাকে যেসব ধাপ ফলো করতে হবে সেগুলো দেওয়া হলো। আপনার প্রয়োজনীয় CSS টেমপ্লেট সম্পর্কে শিখে এবং একটি ব্লক এলিমেন্ট উদাহরণ ফলো করে আপনি একটি নেভিগেশন মেনু তৈরি করতে পারবেন যা আপনাকে একটি নেভিগেশন বার বিল্ড করতে সাহায্য করবে।

১. একটি টেক্সট এডিটর খুলুন

একটি নতুন টেক্সট এডিটর খুলুন বা আপনার প্রি-এক্সিস্টিং CSS ফাইল একটি অ্যাপ ফোল্ডারে খুলুন। নিচের ব্লক-লেভেল এলিমেন্ট সেটগুলো ইনসার্ট করুন, কারণ এগুলো আপনার বেসিক নেভিগেশন বারের গ্রাউন্ডওয়ার্ক হবে। এই ইনলাইন এলিমেন্টগুলো আপনার নেভিগেশন বারের ফাউন্ডেশন এবং এর ফাংশন্যালিটি নিশ্চিত করবে।

1. <!Doctype Html>
2. <Html>
3. <Head>
4. <Title>
5. Make a Navigation Bar
6. </Title>
7. </Head>
8. <Body>
9. </Body>
10. </Html>

২. একটি <nav> ট্যাগ তৈরি করুন

আপনার CSS ফাইলের <body> ট্যাগের ভিতরে একটি <nav> ট্যাগ ইনসার্ট করুন। <nav> ট্যাগটি वो কম্পোনেন্ট যা কম্পিউটারকে ইন্ডিকেট করবে যে আপনি একটি নেভিগেশন বার বানাচ্ছেন।

1. <Body>
2. <nav>
3. </nav>
4. </Body>
5. </Html>

৩. <ul> ট্যাগ ডিফাইন করুন

<ul> ট্যাগ আপনার নেভিগেশন বারে ইনপুট দিবেন এমন সকল অপশন কালেক্ট ও অর্ডার করে। এই অপশনগুলো অ্যাসোলিউট বা রিলেটিভ পাথের মাধ্যমে তাদের ডেজিগনেটেড পেজে নিয়ে যায়। <a> পাথ হলো একটি href অ্যাট্রিবিউটে আঙ্কর ট্যাগের ফরম যা আপনাকে CSS প্রপার্টির মধ্যে নেভিগেশন লিংক ইনসার্ট করতে দেয়।

1. <Body>
2. <nav>
3. <ul>
4. <li>
5. <a href="#"> Home </a>
6. </li>
7. <li>
8. <a href="#"> Blog </a>
9. </li>
10. <li>
11. <a href="#"> About </a>
12. </li>
13. <li> <a href="#"> Contact </a>
14. </li>
15. </ul>
16. </nav>
17. </Body>
18. </Html>

আপনি যদি <ul> ট্যাগ রান করেন তবে এটি অটোমেটিক্যালি আপনাকে একটি ভার্টিক্যাল নেভিগেশন বার দেখাবে। এই নেভিগেশন লিংকের ল্যান্ডিং পেজগুলো <li> ট্যাগের মাধ্যমে কোডেড।

৪. <style> ট্যাগ ডিফাইন করুন

<style> ট্যাগ আপনার নেভিগেশন বারে কাস্টম স্টাইল সেট করে। CSS স্টাইল রুল আপনার নেভিগেশন বারের মৌলিক ডিজাইন প্রিন্সিপল দেয় যা আপনি চান, যেমন স্ক্রিন সাইজ, ইন্টারঅ্যাক্টিভ স্টাইল এবং মেনুর জন্য ব্যাকগ্রাউন্ড স্টাইল।

1. <Head>
2. <Title>
3. Make a Navigation Bar
4. </Title>
5. <style type=text/css>
6. </style>
7. </Head>

৫. ডিজাইন পরিবর্তন করুন

এই অংশে আপনি অ্যাঙ্কর ডিসপ্লে অফ কালার কোড এবং ব্যাকগ্রাউন্ড-কালার প্রপার্টিতে পরিবর্তন করবেন। আপনি নেভবারগুলোর এলাইনমেন্ট পরিবর্তন করতে পারেন এবং সেগুলো যেখানে চান সেখানে পজিশন করতে পারেন। কালার স্পেসিংও একটি অ্যাডিশনাল ক্লাস ট্যাগ যা আপনি এডিট করতে পারেন।

1. <style type=text/css>
2. body
3. {
4. height: 125vh;
5. margin-top: 80px;
6. padding: 30px;
7. background-size: cover;
8. font-family: sans-serif;
9. }
10. header {
11. background-color: blue;
12. position: fixed;
13. left: 0;
14. right: 0;
15. top: 5px;
16. height: 30px;
17. display: flex;
18. align-items: center;
19. box-shadow: 0 0 25px 0 black;
20. }
21. header * {
22. display: inline;
23. }
24. header li {
25. margin: 20px;
26. }
27. header li a {
28. color: white;
29. text-decoration: none;
30. }
31. </style>

৬. ট্যাগগুলো বন্ধ করুন

নিচে আপনার নেভিগেশন বার কীভাবে দেখতে পারে তার একটি স্যাম্পল কোড দেওয়া হলো। একটি সিম্পল নেভিগেশন বার নেভিগেট করা এবং বুঝতে সহজ হবে।

1. <!Doctype Html>
2. <Html>
3. <Head>
4. <Title>
5. Make a Navigation Bar
6. </Title>
7. <style type=text/css>
8. body
9. {
10. height: 125vh;
11. margin-top: 80px;
12. padding: 30px;
13. background-size: cover;
14. font-family: sans-serif;
15. }
16. header {
17. background-color: blue;
18. position: fixed;
19. left: 0;
20. right: 0;
21. top: 5px;
22. height: 30px;
23. display: flex;
24. align-items: center;
25. box-shadow: 0 0 25px 0 black;
26. }
27. header * {
28. display: inline;
29. }
30. header li {
31. margin: 20px;
32. }
33. header li a {
34. color: white;
35. text-decoration: none;
36. }
37. </style>
38. </Head>
39. <Body>
40. <header>
41. <nav>
42. <ul>
43. <li>
44. <a href="#"> Home </a>
45. </li>
46. <li>
47. <a href="#"> Blog</a>
48. </li>
49. <li>
50. <a href="#"> About </a>
51. </li>
52. <li> <a href="#"> Contact </a>
53. </li>
54. </ul>
55. </nav>
56. </header>
57. </Body>
58. </Html>

HTML সম্পর্কে আরও কীভাবে শিখবেন

• অনলাইন কোর্স ট্রাই করুন। অনলাইন HTML কোর্স, ক্লাস এবং ট্রেনিং রয়েছে যা আপনি অটেন্ড করতে পারেন আপনার HTML-এ প্রফিশিয়েন্ট হওয়ার যাত্রায় সাহায্য পেতে। একটি বেগিনার ওয়েব ডেভেলপমেন্ট কোর্স আপনাকে HTML এবং এর দিকগুলো সম্পর্কে আরও শিখতে সাহায্য করতে পারে।
• হ্যান্ডস-অন অভিজ্ঞতা অর্জন করুন। প্রজেক্ট ট্রাই করে এবং ওয়েবসাইট বিল্ড করে HTML-এ আপনার জ্ঞান টেস্ট করুন এবং দক্ষতা চামচামান করুন। প্রজেক্ট ট্রাই করে এবং ওয়েবসাইট বিল্ড করে আপনি একটি HTML পোর্টফোলিও বিল্ড করতে পারেন যা আপনি ভবিষ্যতে ক্লায়েন্ট বা এমপ্লোয়ারকে দেখাতে পারেন।
• একটি কোডিং বুটক্যাম্পে এনরোল করুন। একটি টপ কোডিং বুটক্যাম্পে যোগ দেওয়া HTML এবং এর ব্যবহার সম্পর্কে আরও শিখার চমৎকার উপায়। একটি বুটক্যাম্প আপনাকে দ্রুত এবং দক্ষতার সাথে HTML-এ প্রফিশিয়েন্ট হতে প্র্যাকটিক্যাল ইন-ডিমांड স্কিল শেখাতে পারে।

HTML-এ নেভিগেশন বার তৈরি করার FAQ

কি HTML শিখা উপকারী?

কি HTML শিখা কঠিন?

হ্যাঁ, HTML শিখা কঠিন হতে পারে, বিশেষ করে আপনার যদি টেক বা কোডিং অভিজ্ঞতা না থাকে। যাইহোক, কোডিং বুটক্যাম্প কমপ্লিট বেগিনারদের জন্য প্রোগ্রাম অফার করে। আপনি যদি একটি টেক-স্যাভি إندিভিজুয়াল হন যিনি কম্পিউটার কীভাবে কাজ করে সেটা বুঝেন, তবে আপনি HTML এবং এর লজিক সহজে বুঝতে পারেন।

HTML কী?

Hypertext Markup Language (HTML) একটি অনলাইন ভাষা যা ওয়েবসাইট বিল্ডিং বা সিম্পল অ্যাপ্লিকেশনে ব্যবহৃত হয়। এটি वो ভাষা যা ওয়েবসাইটে কাঠামো এবং ফর্ম প্রদান করে। এটি বেসিক কোডিং ফাউন্ডেশন বिछায় এবং অন্যান্য ভাষাকে আরও কমপ্লেক্স ফিচার যোগ করতে দেয়।

কেন আমাদের নেভিগেশন বার দরকার?

নেভিগেশন বার ইউজারদের দ্রুত ওয়েবসাইটের বিভিন্ন সেকশন ভিজিট করতে দেয়। যদি একটি ওয়েবসাইটে নেভিগেশন বার না থাকে, তবে ইউজাররা সাইটের নির্দিষ্ট সেকশন লোকেট করতে কঠিন পাবেন এবং পূর্বের পেজে ফিরে যেতে বারবার ব্যাক বাটন চাপতে হবে। একটি খারাপ নেভিগেশন বার বা নেভিগেশন বার নেই থাকলে ট্রাফিক সাইট থেকে দূরে চলে যাবে।