एचटीएमएल का परिचय

HTML हाइपरटेक्स्ट मार्कअप लैंग्वेज के लिए है, और इस भाषा का उपयोग करने वाले दस्तावेज़ वेब पेज बनाते हैं। प्रत्येक वेबसाइट इसका उपयोग करती है, इसलिए यह समझना महत्वपूर्ण है कि यह कैसे काम करता है।

इस ट्यूटोरियल लेख में, आप HTML के बारे में जानने के लिए आवश्यक सभी चीजें सीखेंगे।

<!DOCTYPE> घोषणा क्या है?

<!DOCTYPE> घोषणा प्रत्येक HTML फ़ाइल में कोड की पहली पंक्ति है। यह वेब ब्राउज़र को बताता है कि HTML का कौन सा संस्करण एक विशिष्ट फ़ाइल के भीतर है।

HTML का प्रत्येक संस्करण अद्वितीय है और इसके नियमों का अपना सेट है। एचटीएमएल 5 भाषा का नवीनतम संस्करण है। यह डेवलपर्स के लिए अनुशंसित संस्करण है, साथ ही घोषित करने के लिए सबसे सरल संस्करण है। HTML 5 दस्तावेज़ घोषित करने के लिए, बस HTML तत्व को <!DOCTYPE> घोषणा में जोड़ें।

आप नीचे एक उदाहरण देख सकते हैं:

 <!DOCTYPE html>

<हेड> टैग क्या है?

प्रत्येक HTML दस्तावेज़ में, <!DOCTYPE> घोषणा के बाद <html> टैग होता है। यह टैग दस्तावेज़ की जड़ की पहचान करता है, और यह <head> और <body> टैग को संलग्न करता है।

<हेड> टैग पहला खंड है, और इसमें <शीर्षक> और <मेटा> टैग शामिल हैं। हालाँकि, कुछ उदाहरणों में जब डेवलपर आंतरिक CSS का उपयोग करना चुनता है, तो <style> टैग को <head> टैग के भीतर भी रखा जाता है।

HTML दस्तावेज़ में केवल एक <शीर्षक> टैग होता है। <शीर्षक> टैग में एक वेब पेज का शीर्षक होता है, और यह जानकारी वेब ब्राउज़र के टैब क्षेत्र में दिखाई देती है।

आप नीचे एक शीर्षक टैग उदाहरण देख सकते हैं:

 <title>An Introduction to HTML</title>

ऊपर <शीर्षक> टैग वाली एक HTML फ़ाइल ब्राउज़र के टैब क्षेत्र में "HTML का एक परिचय" के रूप में दिखाई देगी।

<मेटा> टैग एक वेब पेज पर सामग्री का वर्णन करता है और आम तौर पर एक नाम और एक सामग्री विशेषता होती है। तीन अधिक लोकप्रिय प्रकार के <मेटा> टैग विवरण, कीवर्ड और व्यूपोर्ट हैं।

नीचे एक विवरण <मेटा> टैग उदाहरण है:

 <mete name="description" content="This is a simple page, which demonstrates the basics of HTML">

विवरण <मेटा> टैग सामग्री विशेषता में आपके वेब पेज का विवरण होता है। यह वह डेटा है जो एक खोज इंजन परिणाम में प्रदर्शित होता है, जो एक संभावित आगंतुक को बताता है कि किसी वेबसाइट पर क्या उम्मीद की जाए।

नीचे एक कीवर्ड <मेटा> टैग उदाहरण है:

 <meta name="keywords" content="HTML, web development, etc">

कीवर्ड <मेटा> टैग में ऐसे शब्द या वाक्यांश होते हैं जो आपकी वेबसाइट के लिए प्रासंगिक होते हैं। कीवर्ड सामग्री विशेषता को असाइन किया गया प्रत्येक नया शब्द या वाक्यांश अल्पविराम द्वारा अलग किया जाता है, जैसा कि आप ऊपर दिए गए उदाहरण में देख सकते हैं।

नीचे एक व्यूपोर्ट <मेटा> टैग उदाहरण है:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

<बॉडी> टैग क्या है?

<body> टैग <html> रूट टैग के भीतर दूसरा मुख्य भाग है। <body> टैग में वेब पेज पर प्रदर्शित होने वाला प्रत्येक तत्व होता है।

<body> टैग वाले तत्वों को इनलाइन या ब्लॉक तत्वों के रूप में वर्गीकृत किया जाता है। यदि आप एक पूर्ण HTML अनिवार्य चीट शीट देखना चाहते हैं, तो हमने एक को एक साथ रखा है ताकि आप सब कुछ आसानी से समझ सकें।

ब्लॉक तत्व क्या हैं?

ब्लॉक तत्व हमेशा एक नई लाइन पर शुरू होते हैं, और वे उस लाइन की पूरी चौड़ाई पर कब्जा कर लेते हैं जिस पर वे हैं।

आपके द्वारा उपयोग किए जाने वाले कुछ ब्लॉक तत्वों में शामिल हैं:

  • शीर्षक टैग
  • <p> टैग
  • <div> टैग
  • <ol> टैग
  • <ul> टैग
  • <li> टैग

वेबसाइट पर टेक्स्ट को एक सुसंगत, सुपाच्य प्रारूप में विभाजित करने के लिए ब्लॉक तत्वों का उपयोग किया जाता है।

शीर्षक टैग क्या हैं?

शीर्षक टैग छह प्रकार के होते हैं: <h1> , <h2> , <h3> , <h4> , <h5> , और <h6><h1> टैग सबसे बड़ा शीर्षक उत्पन्न करता है, <h6> सबसे छोटा शीर्षक उत्पन्न करता है, और अन्य सभी शीर्षक दोनों के बीच की स्थिति में आते हैं (इसकी संख्या मान के आधार पर)।

शीर्षक टैग का उपयोग वेब पेज पर शीर्षकों पर किया जाता है। एक विशिष्ट शीर्षक टैग का उपयोग वेबपेज पर शीर्षक की स्थिति पर निर्भर करता है। उदाहरण के लिए, <h1> टैग का उपयोग वेब पेज पर पहले शीर्षक पर किया जाता है, और वेब पेज केवल एक h1 तत्व का उपयोग करता है (हालांकि इसमें कई h2, h3 और h4 तत्व हो सकते हैं)।

आप नीचे क्रिया में <h1> टैग का एक उदाहरण देख सकते हैं:

 <h1> Learning the Basics of HTML </h1>

<p> टैग क्या है?

<p> एक अन्य ब्लॉक तत्व है जिसका उपयोग वेब पेज के मुख्य भाग में किया जाता है, और यह पैराग्राफ बनाता है। नीचे इस टैग का उपयोग किए जाने का एक उदाहरण दिया गया है:

 <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquid a cupiditate
inventore, reiciendis earum illum mollitia dignissimos officia,culpa cumque dolorem
quidem atque maiores, ad tempora quia. Repudiandae, delectus!
</p>

<div> टैग क्या है?

<div> टैग एक डिवीजन का प्रतिनिधित्व करता है। इसका उपयोग स्टाइलिंग या कार्यात्मक उद्देश्यों के लिए अन्य HTML तत्वों के समूहों के लिए कंटेनर बनाने के लिए किया जाता है।

उदाहरण के लिए, यदि आप ग्रिड के साथ काम कर रहे हैं, तो आपको सभी ग्रिड तत्वों को एक कंटेनर में रखना होगा। कंटेनर बनाने के लिए आपको <div> टैग का उपयोग करना होगा।

संबंधित: सीएसएस ग्रिड के साथ द्वि-आयामी वेबसाइट बनाने का तरीका जानें

<ol> और <ul> टैग क्या हैं?

HTML में सूचियां बनाने के लिए <ol> और <ul> टैग का उपयोग किया जाता है। <ol> टैग आदेशित सूचियां बनाता है, जबकि <ul> टैग अनियंत्रित सूचियां बनाता है। हालांकि, दोनों टैग <li> टैग का उपयोग करते हैं, जो सूची आइटम बनाता है।

<ol> टैग का उपयोग करना

एक आदेशित सूची डिफ़ॉल्ट रूप से संख्याओं का उपयोग करती है। हालांकि, <ol> टैग में एक प्रकार की विशेषता होती है जिसका उपयोग आप उस तत्व को स्पष्ट रूप से बताने के लिए कर सकते हैं जिसका उपयोग आप अपनी सूची को ऑर्डर करने के लिए करना चाहते हैं। आप अपर या लोअर केस रोमन अंकों, अपर या लोअर केस अक्षरों, या संख्याओं के साथ एक सूची ऑर्डर कर सकते हैं।

आप नीचे एक उदाहरण देख सकते हैं:

 <ol type="a">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

उपरोक्त कोड लोअर केस अक्षरों का उपयोग करके एक आदेशित सूची बनाता है।

<ul> टैग का उपयोग करना

<ul> टैग में एक प्रकार की विशेषता भी होती है, जो कई मानों में से एक लेती है: डिस्क, सर्कल, या वर्ग। हालांकि, डिस्क एक अनियंत्रित सूची में एक नई सूची आइटम का डिफ़ॉल्ट संकेतक है।

कोड के रूप में एक अनियंत्रित सूची क्या चाहती है, इसका एक उदाहरण नीचे दिया गया है:

 <ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

इनलाइन तत्व क्या हैं?

एक इनलाइन तत्व एक नई लाइन पर शुरू नहीं होता है। यह अगली उपलब्ध स्थिति से शुरू होता है, जो एक नई लाइन पर हो भी सकता है और नहीं भी, और यह केवल उतनी ही चौड़ाई का उपयोग करता है जितनी आवश्यक है। आपके द्वारा उपयोग किए जाने वाले कुछ इनलाइन तत्वों में शामिल हैं:

  • <span> टैग
  • <a> टैग
  • <img> टैग
  • <लेबल> टैग
  • <बटन> टैग

हम इनमें से प्रत्येक के बारे में नीचे और अधिक गहराई से चर्चा करेंगे।

<span> टैग क्या है?

<span> टैग का उपयोग इनलाइन स्टाइलिंग उद्देश्यों के लिए किया जाता है। उदाहरण के लिए, यदि आप किसी अनुच्छेद के भीतर किसी विशिष्ट शब्द या वाक्यांश की शैली को बदलना चाहते हैं, तो आप <span> टैग का उपयोग कर सकते हैं।

नीचे इस टैग का एक उदाहरण दिया गया है:

 <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquid a cupiditate
inventore, reiciendis earum illum <span id="important">dignissimos officia</span> ,culpa cumque dolorem
quidem atque maiores, ad tempora quia. Repudiandae, delectus!
</p>

ऊपर दिए गए उदाहरण में <span> टैग का उपयोग करने से यह सुनिश्चित होता है कि <span> टैग के दो शब्दों में अब एक अनूठी शैली हो सकती है।

<a> टैग क्या है?

किसी वेबपेज पर लिंक बनाने के लिए <a> टैग का उपयोग किया जाता है। <a> टैग एक डेवलपर को एक ही वेबसाइट (आंतरिक लिंक) पर एक अलग वेबसाइट (बाहरी लिंक) या एक अलग वेब पेज से लिंक करने की अनुमति देता है। <a> टैग में दो महत्वपूर्ण विशेषताएं हैं- href और लक्ष्य।

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

कार्रवाई में <a> टैग के उदाहरण के लिए नीचे देखें:

 <a href="http://google.com" target="_blank">Click this link to Google</a>

प्रोग्रामर के लिए HTML सीखना आवश्यक है

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

इस गाइड को पढ़ने के बाद, आपके पास वेबसाइटों को बेहतर तरीके से फ़ॉर्मेट करना शुरू करने के लिए आवश्यक सब कुछ होना चाहिए।