पेशेवर HTML नेविगेशन बार बनाएं: एक सरल चरण-दर-चरण ट्यूटोरियल

HTML में नेविगेशन बार बनाना सीखना आपको वेबसाइट निर्माण और डेवलपमेंट में अपने पैर जमाने में मदद करेगा। इंटरनेट दुनिया भर में 4.66 बिलियन सक्रिय इंटरनेट उपयोगकर्ताओं के साथ व्यक्तिगत और व्यावसायिक समाचारों का आधार बनता जा रहा है, इसलिए एक युवा उद्यमी के रूप में HTML और इसके कार्यों को समझना आवश्यक है।

HTML 2021 तक विश्व स्तर पर अग्रणी कोडिंग भाषाओं में से एक है, जिसमें 56% प्रोग्रामर कहते हैं कि वे HTML का उपयोग करते हैं। HTML में नेविगेशन बार बनाने के लिए इन आसान और संक्षिप्त चरणों का पालन करके, आप एक सरल नेविगेशन बार, कलर स्कीम, और बैकग्राउंड बना पाएंगे।

HTML में एक नेविगेशन बार, या नेवबार, एक यूजर इंटरफेस सेक्शन है, आमतौर पर वेबसाइट के शीर्ष पर, जो उपयोगकर्ताओं को जानकारी का पता लगाने और एक्सेस करने की अनुमति देता है। नेविगेशन बार ड्रॉपडाउन मेनू या क्लास नामों के साथ एक पतनशील नेवबार में आता है। नेविगेशन सुविधाओं वाला एप्लिकेशन HTML और CSS को प्रोग्रामिंग भाषा के रूप में एप्लिकेशन के एलिमेंट्स को कोड करने के लिए भी उपयोग कर सकता है।

HTML में नेविगेशन बार के उपयोग

• संगठन। अपनी वेबसाइट के लिए एक नेविगेशन मेनू होने से यह सुनिश्चित होता है कि ड्रॉपडाउन मेनू के लिए सूची आइटम समन्वित और तार्किक रूप से तैयार किए गए हैं। संगठित नेविगेशन लिंक वेबसाइट विजिटर्स के लिए नेत्रहीन आकर्षक हैं।
• उपयोग में आसानी। लिंक की एक अव्यवस्थित सूची को नेविगेट करना असुविधाजनक है और आपकी वेबसाइट से ट्रैफिक को दूर कर सकता है। अच्छी तरह से संगठित नेविगेशन बार जो उपयोग में आसान हैं, आपकी वेबसाइट पर आने वाले लोगों के लिए सुविधाजनक अनुभव प्रदान करते हैं।
• पहुंच। अच्छे दिखने वाले नेविगेशन बार जानकारी तक आसान पहुंच प्रदान करते हैं जो एक सुव्यवस्थित उपयोगकर्ता अनुभव की अनुमति देता है।

नेविगेशन बार बनाना: चरण-दर-चरण

1. टेक्स्ट एडिटर खोलें
2. <nav> टैग बनाएं
3. <ul> टैग परिभाषित करें
4. <style> टैग परिभाषित करें
5. डिज़ाइन बदलें
6. टैग बंद करें

नेविगेशन बार बनाने के चरण: गहराई से

आप HTML का उपयोग करके एक कार्यात्मक और सुलभ नेविगेशन बार बना सकते हैं।

नीचे एक रिस्पॉन्सिव नेविगेशन बार बनाने के लिए आपको जिन चरणों का पालन करना होगा वे दिए गए हैं। आपके द्वारा आवश्यक CSS टेम्प्लेट्स के बारे में सीखकर और ब्लॉक एलिमेंट उदाहरण का पालन करके, आप एक नेविगेशन मेनू बना पाएंगे जो आपको नेविगेशन बार बनाने में मदद करेगा।

1. टेक्स्ट एडिटर खोलें

एक नया टेक्स्ट एडिटर खोलें या किसी ऐप फ़ोल्डर में अपनी पहले से मौजूद CSS फाइल खोलें। ब्लॉक-लेवल एलिमेंट्स के निम्नलिखित सेट डालें, क्योंकि वे आपके बेसिक नेविगेशन बार के लिए आधार होंगे। ये इनलाइन एलिमेंट्स आपके नेविगेशन बार की नींव हैं और इसकी कार्यक्षमता सुनिश्चित करेंगे।

1. <!Doctype Html>
2. <Html>
3. <Head>
4. <Title>
5. नेविगेशन बार बनाएं
6. </Title>
7. </Head>
8. <Body>
9. </Body>
10. </Html>

2. <nav> टैग बनाएं

अपनी CSS फाइल के <body> टैग के अंदर <nav> टैग डालें। <nav> टैग वह कंपोनेंट है जो कंप्यूटर को इंगित करेगा कि आप नेविगेशन बार बना रहे हैं।

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

3. <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> टैग के माध्यम से कोडित हैं।

4. <style> टैग परिभाषित करें

<style> टैग आपके नेविगेशन बार के लिए कस्टम स्टाइल सेट करता है। CSS स्टाइल नियम आपके नेविगेशन बार को उन बुनियादी डिज़ाइन सिद्धांतों को रखने की अनुमति देते हैं जो आप चाहते हैं, जैसे स्क्रीन साइज़, इंटरैक्टिव स्टाइल, और मेनू के लिए बैकग्राउंड स्टाइल।

1. <Head>
2. <Title>
3. नेविगेशन बार बनाएं
4. </Title>
5. <style type=text/css>
6. </style>
7. </Head>

5. डिज़ाइन बदलें

इस भाग में, आप एंकर डिस्प्ले के कलर कोड्स और बैकग्राउंड-कलर प्रॉपर्टी में बदलाव करेंगे। आप नेवबार के भीतर अलाइनमेंट बदल सकते हैं और उन्हें जहां चाहें वहां स्थित कर सकते हैं। कलर स्पेसिंग भी एक अतिरिक्त क्लास टैग है जिसे आप संपादित कर सकते हैं।

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>

6. टैग बंद करें

नीचे एक नमूना कोड है कि आपका नेविगेशन बार कैसा दिख सकता है। एक सरल नेविगेशन बार नेविगेट करना और समझना आसान होगा।

1. <!Doctype Html>
2. <Html>
3. <Head>
4. <Title>
5. नेविगेशन बार बनाएं
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 क्या है?

हाइपरटेक्स्ट मार्कअप लैंग्वेज (HTML) वेबसाइट निर्माण या सरल एप्लिकेशन में उपयोग की जाने वाली एक ऑनलाइन भाषा है। यह वह भाषा है जो वेबसाइट्स को संरचना और रूप प्रदान करती है। यह बुनियादी कोडिंग नींव रखती है और अन्य भाषाओं को अधिक जटिल सुविधाएं जोड़ने की अनुमति देती है।

हमें नेविगेशन बार की आवश्यकता क्यों है?

नेविगेशन बार उपयोगकर्ताओं को वेबसाइट के विभिन्न अनुभागों पर त्वरित रूप से जाने की अनुमति देते हैं। यदि किसी वेबसाइट में नेविगेशन बार नहीं है, तो उपयोगकर्ताओं को साइट के विशेष अनुभागों का पता लगाना मुश्किल होगा और उन्हें पिछले पेजों पर वापस जाने के लिए बार-बार बैक बटन दबाना होगा। एक खराब नेविगेशन बार, या नेविगेशन बार की कमी, साइट से ट्रैफिक को दूर भगा देगी।