वेब डेवलपमेंट आज सबसे अधिक मांग वाले कौशलों में से एक है। इसमें उपयोगकर्ता के अनुकूल और आकर्षक वेबसाइटें बनाना शामिल है जिन्हें ब्राउज़र के माध्यम से एक्सेस किया जा सकता है। वेब डेवलपर बनने के लिए पहला कदम HTML को समझना है।

HTML (हाइपर टेक्स्ट मार्कअप लैंग्वेज) किसी भी वेब पेज की रीढ़ है। यह एक वेबपेज की संरचना करने के लिए उपयोग की जाने वाली मानक भाषा है, जो यह निर्धारित करती है कि ब्राउज़र में सामग्री कैसे प्रदर्शित की जाती है। जबकि किसी पृष्ठ का स्वरूप CSS (कैस्केडिंग स्टाइल शीट्स) द्वारा तय किया जाता है और इसकी कार्यक्षमता JS (Javascript), HTML मौलिक कंकाल या संरचना के लिए जिम्मेदार है।

पाठ्यक्रम के इस भाग में गोता लगाने से पहले, प्रसिद्ध और आवर्ती शब्दजाल को समझना महत्वपूर्ण है जिनका उपयोग आपकी यात्रा में किया जाएगा। जैसे-जैसे हम आगे बढ़ेंगे ये आपको अवधारणाओं को समझने में मदद करेंगे (और लेखक के लिए चीजों को समझाना भी आसान बना देंगे ;-))।

शब्दजाल को समझना

1. प्रोग्रामिंग भाषा: एक विशिष्ट सिंटैक्स (प्रोग्रामिंग भाषा का तरीका) में लिखे गए निर्देशों का एक सेट जिसे कंप्यूटर निष्पादित कर सकता है। याद रखें कि कंप्यूटर केवल बाइनरी कोड (या तो 1 या 0) को समझता है, अब, कंप्यूटर को तर्क समझाने के लिए और साथ ही एक ट्रेड-ऑफ खोजने के लिए, हमने (मनुष्यों ने) एक प्रोग्रामिंग भाषा बनाई है, जो कि आसान है हमें कोड करना है और कंप्यूटर को इसे समझना भी है।
2. कंपाइलर: एक उपकरण जो प्रोग्रामिंग भाषा में लिखे गए कोड को मशीन भाषा में अनुवादित करता है जिसे कंप्यूटर समझ सकता है और निष्पादित कर सकता है।
3. सिंटेक्स: नियम जो प्रोग्रामिंग भाषा की संरचना को परिभाषित करते हैं। इसे ऐसे समझें कि शब्दों को अर्थ निकालने के लिए वाक्य में व्यवस्थित किया जाता है।
4. टिप्पणियाँ: कोड के भीतर नोट्स जो बताते हैं कि कोड के कुछ हिस्से क्या करते हैं। टिप्पणियाँ अन्य डेवलपर्स (या आपके भविष्य के स्वयं) को आपके कोड के पीछे के तर्क को समझने में मदद करती हैं।
5. DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल): DOM HTML दस्तावेज़ का एक पेड़ जैसा प्रतिनिधित्व है। आपके HTML का प्रत्येक टैग इस ट्री में एक नोड बन जाता है। उदाहरण के लिए, यदि आपके HTML में एक टैग है जिसके अंदर एक

   (पैराग्राफ) है, तो ब्राउज़र पैराग्राफ नोड के साथ एक बॉडी नोड बनाता है।

6. बच्चे: जैसे-जैसे आप आगे बढ़ेंगे, आपको यह समझ में आ जाएगा। तत्व किसी अन्य तत्व के भीतर निहित होते हैं। उदाहरण के लिए, HTML में, div टैग (
   ) के भीतर एक पैराग्राफ टैग (

   ) को div का बच्चा माना जाएगा।

7. ब्लॉक-स्तरीय तत्व: जैसे-जैसे आप आगे बढ़ेंगे आपको इस शब्दजाल से परिचित कराया जाएगा। यह शब्द आमतौर पर तत्व की विशेषता का वर्णन करता है कि यह पूरी उपलब्ध चौड़ाई लेगा।

---

HTML के साथ सक्रिय होना

HTML का मतलब है हाइपर टेक्स्ट मार्कअप लैंग्वेज

• हाइपर टेक्स्ट: विभिन्न दस्तावेजों को एक साथ जोड़ने के लिए HTML की क्षमता को संदर्भित करता है।

• मार्कअप लैंग्वेज: टेक्स्ट को एनोटेट करने के लिए टैग का उपयोग करता है, यह परिभाषित करता है कि इसे ब्राउज़र में कैसे प्रदर्शित किया जाना चाहिए।

यहां HTML दस्तावेज़ की मूल संरचना है:


  
    
  
  
    
Hello, world!
  

• टैग: HTML में, टैग का उपयोग तत्वों को परिभाषित करने के लिए किया जाता है। टैग कोण कोष्ठक में संलग्न हैं, जैसे या

  ।

• तत्व: एक प्रारंभिक टैग और एक समापन टैग से मिलकर बनता है, जिसमें सामग्री हो सकती है। उदाहरण के लिए,

  हैलो, दुनिया!

  एक अनुच्छेद तत्व है।

---

HTML दस्तावेज़ संरचना

प्रत्येक HTML दस्तावेज़ एक बुनियादी संरचना का अनुसरण करता है:

1. : HTML के दस्तावेज़ प्रकार और संस्करण की घोषणा करता है।
2. : मूल तत्व जो अन्य सभी HTML तत्वों को घेरता है।
3. : इसमें दस्तावेज़ के बारे में मेटा-जानकारी शामिल है, जैसे शीर्षक और स्टाइलशीट के लिंक।
4. शीर्षक>: वेबपेज का शीर्षक सेट करता है, जो ब्राउज़र के शीर्षक बार या टैब में प्रदर्शित होता है।
5. : HTML दस्तावेज़ के बारे में मेटाडेटा प्रदान करता है, जैसे कैरेक्टर सेट, लेखक और व्यूपोर्ट सेटिंग्स। यह एक स्व-समापन टैग है।
6. : HTML तत्वों को स्टाइल करने के लिए CSS कोड एम्बेड करता है।
7. स्क्रिप्ट>: वेबपेज पर इंटरैक्टिविटी जोड़ने के लिए जावास्क्रिप्ट कोड एम्बेड करता है।
8. : वह सामग्री संलग्न करता है जो वेबपेज पर उपयोगकर्ताओं को दिखाई देगी।

---

आमतौर पर प्रयुक्त HTML तत्व

यहां कुछ बुनियादी HTML तत्व हैं जिनका आप अक्सर उपयोग करेंगे:

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

• से
  : शीर्षक,

  उच्चतम स्तर और

  निम्नतम।

• 
  : एक लाइन ब्रेक सम्मिलित करता है (स्वयं-समापन टैग - जिसका अर्थ है कि टैग को बंद करने की कोई आवश्यकता नहीं है)।
• : उपयोगकर्ता इनपुट के लिए HTML फॉर्म बनाने के लिए उपयोग किया जाता है।
• : एक इनपुट फ़ील्ड बनाता है, जो आमतौर पर एक फॉर्म के भीतर उपयोग किया जाता है।
• : एक ड्रॉपडाउन सूची बनाता है।
• लेबल>: एक टेक्स्ट लेबल को एक फॉर्म तत्व के साथ जोड़ता है।
• : एक तालिका को परिभाषित करता है।
• : तालिका में एक पंक्ति को परिभाषित करता है।
• : तालिका पंक्ति में एक सेल को परिभाषित करता है।
• : तालिका पंक्ति में हेडर सेल को परिभाषित करता है।
• : एक अव्यवस्थित (बुलेट वाली) सूची को परिभाषित करता है।
• : एक क्रमबद्ध (क्रमांकित) सूची को परिभाषित करता है।
• : एक सूची आइटम को परिभाषित करता है।

---

अपनी पहली HTML फ़ाइल बनाना

HTML फ़ाइल बनाने के लिए, आप नोटपैड या वीएस कोड जैसे किसी भी टेक्स्ट एडिटर का उपयोग कर सकते हैं। यहाँ एक सरल उदाहरण है:

1. अपना टेक्स्ट एडिटर खोलें और निम्नलिखित कोड टाइप करें:

  


  
Example Number 1
  
Hello, world!

1. फ़ाइल को .html एक्सटेंशन (उदाहरण के लिए, Index.html) के साथ सहेजें
2. अपना पहला HTML वेबपेज क्रियाशील देखने के लिए अपने वेब ब्राउज़र में फ़ाइल खोलें!
3. अपने कोड का निरीक्षण करने के लिए, डेवलपर टूल खोलने और DOM संरचना का पता लगाने के लिए Google Chrome में Ctrl Shift C दबाएं।
4. डेवलपर टूल्स में नेटवर्क टैब पर जाएं और अपने ब्राउज़र टैब को रीफ्रेश करें।

आप पा सकते हैं कि आपने जो नाम इस चित्र में सहेजा है उसमें एक अनुरोध है।


प्रतिक्रिया टैब में, आपको वह कोड मिलेगा जो आपने निम्न चित्र में लिखा है


अब, क्या हुआ कि, एक बार जब आपने HTML के रूप में सहेजी गई फ़ाइल को खोला, तो कंप्यूटर ने फ़ाइल को ब्राउज़र में चलाना शुरू कर दिया। ब्राउज़र कुछ दिखाना चाहता था, इसलिए उसने उस फ़ाइल पर एक अनुरोध कॉल किया जिससे इसे लॉन्च किया गया था। फ़ाइल ने ब्राउज़र को आपका कोड दिया और वह प्रतिक्रिया अनुभाग में पाया गया। चूँकि यह एक html फ़ाइल थी, ब्राउज़र HTML कोड को ऊपर से नीचे तक पढ़ना शुरू कर देता है। इस प्रक्रिया को पार्सिंग के रूप में जाना जाता है। पार्सिंग के दौरान, ब्राउज़र विभिन्न HTML टैग (जैसे ,

, , आदि) का सामना करता है और इन टैग के आधार पर DOM नामक एक संरचना बनाना शुरू करता है। जैसे ही ब्राउज़र DOM बनाता है, यह एक साथ आपकी स्क्रीन पर सामग्री प्रस्तुत करता है।

---

एक तालिका बनाना

आइए HTML में एक सरल तालिका बनाकर एक कदम आगे बढ़ें:

1. उसी HTML फ़ाइल को खोलें और टैग के अंदर निम्नलिखित कोड जोड़ें:

Table Example

Name	Power	Is Kurama Present
Naruto	Rasengan	Yes
Sasuke	Sharingan	No

1. फ़ाइल को सहेजें और प्रदर्शित तालिका देखने के लिए अपने ब्राउज़र को रीफ्रेश करें।

ध्यान दें कि शीर्षक पैराग्राफ टैग द्वारा प्रस्तुत किया जा रहा है। वैकल्पिक रूप से, आप

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

ध्यान दें कि टैग का उपयोग केवल ओपनिंग टैग के तुरंत बाद ही किया जाना चाहिए।

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

---

निष्कर्ष

एचटीएमएल के साथ वेब विकास में अपना पहला कदम पूरा करने पर बधाई! HTML में महारत हासिल करने की कुंजी अभ्यास है। विभिन्न तत्वों के साथ प्रयोग करें, अपने स्वयं के वेबपेज बनाएं, और गलतियाँ करने से न डरें - प्रत्येक त्रुटि सीखने का एक अवसर है।

याद रखें, यह तो बस शुरुआत है। जैसे-जैसे आप इस नींव पर निर्माण करना जारी रखेंगे, आप जल्द ही अधिक जटिल और गतिशील वेबसाइट बनाने में सक्षम होंगे। आइए वेब को एक बेहतर स्थान बनाएं, एक समय में कोड की एक पंक्ति।

यह लेख अनंत कृष्णन द्वारा लिखा गया है, जो आईटी और मैकेनिकल इंजीनियरिंग दोनों में अनुभव वाले पेशेवर हैं। पूर्ण स्टैक विकास में पृष्ठभूमि और मैकेनिकल और इलेक्ट्रिकल सिस्टम के लिए जुनून के साथ, अनंत कृष्णन अब अपनी विशेषज्ञता के क्षेत्र में शुरुआती लोगों की मदद करने के लिए शैक्षिक सामग्री बनाने पर ध्यान केंद्रित कर रहे हैं।