HTML का मतलब हाइपरटेक्स्ट मार्कअप लैंग्वेज है। यह वेब पेज बनाने के लिए इस्तेमाल की जाने वाली एक विशेष भाषा है। जब आप किसी वेबसाइट पर जाते हैं, तो कंप्यूटर आपको शब्द, चित्र और लिंक दिखाने के लिए HTML पढ़ता है। HTML को वेबसाइट के निर्माण खंड के रूप में सोचें। जैसे आप घर या कार बनाने के लिए लेगो के टुकड़ों का इस्तेमाल करते हैं, वैसे ही हम वेब पेज बनाने के लिए HTML टैग का इस्तेमाल करते हैं।
HTML वह कोड है जो कंप्यूटर को बताता है कि वेब पेज पर टेक्स्ट, इमेज, वीडियो और लिंक कैसे प्रदर्शित करें। यह आपके लिए चित्र बना रहे किसी मित्र को निर्देश देने जैसा है। HTML, वेब पेज के किसी भाग के आरंभ और अंत को चिह्नित करने के लिए कोण कोष्ठकों के अंदर शब्दों का उपयोग करता है, जिन्हें टैग कहा जाता है।
आपके द्वारा देखी जाने वाली प्रत्येक वेबसाइट किसी न किसी रूप में HTML का उपयोग करती है। HTML के बिना, आपके देखने के लिए कोई वेब पेज नहीं होगा। HTML सामग्री को व्यवस्थित करने में मदद करता है और कंप्यूटर को पेज को कैसे प्रदर्शित करना है, यह बताता है। वेब डेवलपमेंट में सीखी जाने वाली सबसे पहली चीज़ यही है क्योंकि यह इंटरनेट को काम करने में सक्षम बनाती है!
एक HTML दस्तावेज़ की एक विशेष संरचना होती है। इसकी शुरुआत <code><!DOCTYPE html></code> नामक एक घोषणा से होती है जो कंप्यूटर को बताती है कि पृष्ठ HTML का उपयोग करता है। फिर दस्तावेज़ को दो मुख्य भागों में विभाजित किया जाता है: शीर्ष और मुख्य भाग।
एक बहुत ही सरल HTML दस्तावेज़ इस तरह दिखता है:
<कोड><!DOCTYPE html>
<html>
<शीर्ष>
<title>मेरा पहला वेब पेज</title>
</head>
<शरीर>
<p>नमस्ते दुनिया!</p>
</body>
</html> </कोड>
इस उदाहरण में, <head> अनुभाग पृष्ठ का शीर्षक देता है, और <body> अनुभाग वह स्थान है जहाँ आप स्क्रीन पर दिखाई देने वाली सामग्री डालते हैं।
HTML वेब पेज के विभिन्न भागों को चिह्नित करने के लिए टैग का उपयोग करता है। टैग कोणीय कोष्ठकों के अंदर लिखा एक शब्द होता है। उदाहरण के लिए, <code><p></code> कंप्यूटर को बताता है कि आगे जो लिखा है वह एक पैराग्राफ है। जब आप पैराग्राफ समाप्त करते हैं, तो आप अंत को इंगित करने के लिए समापन टैग, <code></p></code>, का उपयोग करते हैं।
HTML में एक एलिमेंट में एक ओपनिंग टैग, कुछ कंटेंट और एक क्लोजिंग टैग होता है। उदाहरण के लिए:
<code><p>यह एक पैराग्राफ है.</p></code>
प्रत्येक टैग वेब ब्राउज़र को निर्देश देता है कि सामग्री को कैसे प्रदर्शित किया जाए।
HTML में कई टैग होते हैं। इनमें से कुछ सबसे आम हैं:
विशेषताएँ किसी HTML तत्व के बारे में अतिरिक्त जानकारी प्रदान करती हैं। इन्हें टैग के कोणीय कोष्ठकों के अंदर प्रारंभिक टैग में जोड़ा जाता है। सबसे आम विशेषताएँ src और alt हैं जिनका उपयोग इमेज टैग के साथ किया जाता है।
उदाहरण के लिए, एक छवि जोड़ने के लिए, आप लिख सकते हैं:
<code><img src="picture.jpg" alt="एक अच्छी तस्वीर"></code>
यहां, src ब्राउज़र को बताता है कि छवि फ़ाइल कहां है, और यदि छवि प्रदर्शित नहीं हो पाती है तो alt उसका विवरण प्रदान करता है।
HTML दस्तावेज़ दो भागों में विभाजित है:
लिंक आपको एक पेज से दूसरे पेज पर जाने की सुविधा देते हैं। HTML में, हम <a> टैग का इस्तेमाल करके लिंक बनाते हैं। टैग के अंदर मौजूद href विशेषता ब्राउज़र को लिंक का गंतव्य बताती है।
उदाहरण के लिए:
<code><a href="https://www.example.com">Example.com पर जाएँ</a></code>
जब आप इस लिंक पर क्लिक करेंगे तो आपके ब्राउज़र में example.com वेबसाइट खुलेगी।
चित्र वेब पेज को आकर्षक और रोचक बनाते हैं। चित्र जोड़ने के लिए, आप <img> टैग का उपयोग करते हैं। याद रखें, <img> टैग का कोई समापन टैग नहीं होता है।
आप चित्र कैसे जोड़ सकते हैं:
<code><img src="sunflower.jpg" alt="एक चमकदार सूरजमुखी"></code>
यह कोड ब्राउज़र को सूरजमुखी की एक छवि प्रदर्शित करने के लिए कहता है। src विशेषता छवि के स्थान को इंगित करती है, और alt विशेषता छवि का विवरण प्रदान करती है।
सूचियाँ जानकारी को एक सुव्यवस्थित प्रारूप में व्यवस्थित करती हैं। HTML में दो मुख्य प्रकार की सूचियाँ होती हैं:
यहाँ एक अव्यवस्थित सूची का उदाहरण दिया गया है:
<कोड><उल>
<li>एप्पल</li>
<li>केला</li>
<li>चेरी</li>
</ul> </code>
और यहाँ एक क्रमबद्ध सूची का उदाहरण दिया गया है:
<कोड><ol>
<li>पहला</li>
<li>दूसरा</li>
<li>तीसरा</li>
</ol> </code>
तालिकाएँ पंक्तियों और स्तंभों में जानकारी प्रदर्शित करने में मदद करती हैं। ये तब उपयोगी होती हैं जब आपको डेटा की तुलना करनी हो या ग्रिड में आइटम सूचीबद्ध करने हों।
यहां HTML तालिका का एक सरल उदाहरण दिया गया है:
<कोड><टेबल बॉर्डर="1">
<tr>
<th>नाम</th>
<th>उम्र</th>
</tr>
<tr>
<td>ऐलिस</td>
<td>10</td>
</tr>
</तालिका> </कोड>
इस तालिका में, <tr> तालिका पंक्ति को परिभाषित करता है, <th> का उपयोग तालिका शीर्षलेख (बोल्ड टेक्स्ट) के लिए किया जाता है, और <td> का उपयोग तालिका डेटा (कोशिकाओं) के लिए किया जाता है।
HTML आपको ध्वनि और वीडियो जैसे मल्टीमीडिया जोड़ने की सुविधा भी देता है। <audio> टैग के साथ, आप ध्वनि फ़ाइलें शामिल कर सकते हैं। <video> टैग के साथ, आप अपने वेब पेज में वीडियो प्लेयर एम्बेड कर सकते हैं।
वीडियो एम्बेड कोड का एक उदाहरण यहां दिया गया है:
<कोड><वीडियो चौड़ाई="320" ऊंचाई="240" नियंत्रण>
<स्रोत src="movie.mp4" type="video/mp4">
</वीडियो> </कोड>
यह कोड एक वीडियो प्लेयर बनाता है जिसमें प्ले, पॉज़ या वॉल्यूम बदलने के लिए बटन होते हैं। कंट्रोल्स विशेषता ब्राउज़र को ये बटन दिखाने के लिए कहती है।
इंटरनेट पर हर वेबसाइट HTML से बनी होती है। कल्पना कीजिए कि आप अपने स्कूल की वेबसाइट, किसी मज़ेदार गेम की साइट देख रहे हैं, या कोई ऑनलाइन कहानी पढ़ रहे हैं। HTML पर्दे के पीछे से टेक्स्ट, चित्रों और अन्य सामग्री को इस तरह व्यवस्थित करने का काम करता है कि आप उन्हें स्पष्ट रूप से देख सकें।
उदाहरण के लिए, जब आप अपने पसंदीदा कार्टून चरित्र का चित्र ऑनलाइन देखते हैं या किसी मनोरंजक विषय के बारे में अधिक पढ़ने के लिए लिंक पर क्लिक करते हैं, तो HTML उस कार्य को संभव बनाने के लिए मौजूद होता है।
आइए एक आसान प्रोजेक्ट पर नज़र डालते हैं। मान लीजिए आप अपने पसंदीदा जानवर, जैसे बिल्ली, के बारे में एक छोटा सा वेब पेज बनाना चाहते हैं। आप इसमें एक शीर्षक, बिल्लियों के बारे में एक पैराग्राफ, एक तस्वीर, और यहाँ तक कि बिल्लियों से जुड़ी मज़ेदार जानकारियों वाली किसी वेबसाइट का लिंक भी शामिल कर सकते हैं।
आपका HTML कोड कुछ इस तरह दिख सकता है:
<कोड><!DOCTYPE html>
<html>
<शीर्ष>
<title>मेरा पसंदीदा जानवर</title>
</head>
<शरीर>
<h1>बिल्लियों के बारे में सब कुछ</h1>
<p>बिल्लियाँ चंचल और कोमल होती हैं। उन्हें सोना और म्याऊँ-म्याऊँ करना बहुत पसंद है। बहुत से लोग बिल्लियों को पालतू जानवर के रूप में रखना पसंद करते हैं।</p>
<img src="cat.jpg" alt="एक प्यारी बिल्ली">
<a href="https://www.catfacts.com">बिल्लियों के बारे में और जानें</a>
</body>
</html> </कोड>
यह प्रोजेक्ट शीर्षकों, पैराग्राफ़ों, छवियों और लिंक्स का उपयोग करता है। यह दिखाता है कि HTML का उपयोग करके कई भागों वाला एक संपूर्ण वेब पेज कैसे बनाया जाता है।
जबकि HTML वेब पेज की संरचना का निर्माण करता है, ऐसे अन्य उपकरण भी हैं जो वेबसाइटों को रोचक तरीके से प्रदर्शित और संचालित करते हैं।
भले ही आज हम HTML के बारे में सीख रहे हैं, लेकिन CSS और JavaScript के बारे में जानने से हमें यह समझने में मदद मिलती है कि वेबसाइट कैसे बनाई जाती है।
HTML को एक्सप्लोर करते समय, आपको कई अन्य टैग मिलेंगे। यहाँ कुछ और टैग दिए गए हैं:
ये टैग आपको इस बात पर अधिक नियंत्रण देते हैं कि आपकी सामग्री वेब पेज पर कैसे दिखाई देगी।
HTML अपनी शुरुआत से अब तक काफ़ी बदल चुका है। समय के साथ इसमें कई नए टैग और फ़ीचर जोड़े गए हैं। HTML का हर नया संस्करण जटिल और सुंदर वेबसाइट बनाना आसान बनाता है। आज, HTML, CSS और JavaScript के साथ मिलकर आधुनिक वेबसाइटें बनाता है जो इस्तेमाल करने में मज़ेदार और देखने में शानदार होती हैं।
इस विकास का अर्थ है कि HTML सीखना आसान है और सरल वेब पेजों से लेकर जटिल वेब अनुप्रयोगों तक सब कुछ बनाने के लिए पर्याप्त शक्तिशाली है।
HTML सीखना मज़ेदार तो है, लेकिन इंटरनेट पर सुरक्षित रहना हमेशा ज़रूरी है। जब आप वेबसाइट देखते हैं या ऑनलाइन सामग्री देखते हैं, तो किसी भी चीज़ के बारे में अनिश्चित होने पर हमेशा किसी वयस्क से मदद लेना न भूलें। आपकी सुरक्षा सबसे पहले आती है, और HTML सीखना हमेशा एक मज़ेदार और सुरक्षित अनुभव होना चाहिए।
आइये आज आपने जो कुछ महत्वपूर्ण शब्द सीखे हैं उन पर नजर डालें:
HTML का इस्तेमाल कई वास्तविक दुनिया में किया जाता है। यहाँ कुछ उदाहरण दिए गए हैं:
ये उदाहरण दर्शाते हैं कि HTML दैनिक जीवन के कई हिस्सों में एक बहुत ही उपयोगी उपकरण है।
आज हमने सीखा कि HTML , हाइपरटेक्स्ट मार्कअप लैंग्वेज का संक्षिप्त रूप है। यह वेब पेज बनाने के लिए इस्तेमाल की जाने वाली मूल भाषा है। याद रखने योग्य मुख्य बिंदु इस प्रकार हैं:
HTML इंटरनेट पर दिखाई देने वाली हर वेबसाइट की नींव है। टैग और एट्रिब्यूट जैसे सरल बिल्डिंग ब्लॉक्स की मदद से, आप मज़ेदार और इंटरैक्टिव पेज बना सकते हैं। जैसे-जैसे आप सीखते जाएँगे, आप देखेंगे कि HTML कैसे वेब पेजों को जीवंत बनाने में मदद करता है, जिससे इंटरनेट एक उपयोगी और रोमांचक जगह बन जाता है।
