Primer lesson: हाइपर टेक्स्ट मार्कअप लैंग्वेज

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

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

वेब की नींव

इसके मूल में, इंटरनेट वैश्विक स्तर पर जुड़े कंप्यूटरों का एक विशाल नेटवर्क है। इस नेटवर्क के साथ बातचीत करने का प्राथमिक तरीका वर्ल्ड वाइड वेब (WWW) है, जो इंटरनेट के माध्यम से एक्सेस किए जाने वाले इंटरलिंक्ड हाइपरटेक्स्ट दस्तावेज़ों की एक प्रणाली है। WWW के केंद्र में वेब पेज हैं, जो HTML में लिखे गए दस्तावेज़ हैं। HTML साइटों की मूल संरचना प्रदान करता है, जिसे बाद में CSS और JavaScript जैसी अन्य तकनीकों द्वारा बढ़ाया और संशोधित किया जाता है।

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

HTML दस्तावेज़ को नेस्टेड टैग के एक सेट के अनुसार संरचित किया जाता है, जो कोण कोष्ठक में संलग्न तत्व होते हैं। ये टैग वेब ब्राउज़र को बताते हैं कि सामग्री को कैसे प्रदर्शित किया जाए। सरल HTML दस्तावेज़ संरचना का एक उदाहरण है:

 <!DOCTYPE html>
<एचटीएमएल>
    <शीर्ष>
        <title>पृष्ठ शीर्षक</title>
    </शीर्ष>
    <शरीर>
        <h1>यह एक शीर्षक है</h1>
        <p>यह एक पैराग्राफ है.</p>
    </शरीर>
</html>

यह कोड एक शीर्षक, एक शीर्षलेख और पाठ के एक पैराग्राफ के साथ एक बुनियादी वेबपेज को परिभाषित करता है।

HTML तत्व और टैग

HTML दस्तावेज़ HTML तत्वों से बने होते हैं। प्रत्येक तत्व को एक आरंभ टैग, कुछ सामग्री और एक अंत टैग द्वारा दर्शाया जाता है। किसी तत्व के आरंभ और अंत टैग समान होते हैं, सिवाय इसके कि अंत टैग में तत्व नाम से पहले एक फ़ॉरवर्ड स्लैश शामिल होता है।

उदाहरण के लिए, <code><p></code> टैग पाठ का एक पैराग्राफ संलग्न करता है, और इसकी संरचना इस प्रकार होती है:

 <p>यह एक उदाहरण पैराग्राफ है.</p>

अलग-अलग तत्व अलग-अलग उद्देश्यों की पूर्ति करते हैं। उदाहरण के लिए:

<code><h1>...</h1></code> से <code><h6>...</h6></code> टैग का उपयोग शीर्षकों के लिए किया जाता है।
<code><a></code> टैग एक हाइपरलिंक को परिभाषित करता है।
<code><img></code> टैग दस्तावेज़ में एक छवि एम्बेड करता है।

गुण

HTML तत्वों में ऐसे गुण हो सकते हैं जो तत्वों के बारे में अतिरिक्त जानकारी प्रदान करते हैं। गुण तत्व के आरंभ टैग के भीतर रखे जाते हैं और अक्सर नाम/मूल्य युग्मों में दिए जाते हैं जैसे <code>name="value"</code>.

उदाहरण के लिए, किसी छवि को एम्बेड करने के लिए, हम छवि का URL निर्दिष्ट करने के लिए <code><img></code> टैग का उपयोग <code>src</code> (स्रोत) विशेषता के साथ करते हैं:

 <img src="url to image.jpg" alt="छवि का विवरण">

यदि छवि प्रदर्शित नहीं हो पाती है तो <code>alt</code> विशेषता उसके लिए वैकल्पिक पाठ उपलब्ध कराती है।

लिंक और नेविगेशन

<code><a></code> टैग का उपयोग हाइपरलिंक बनाता है, जो वेब के परस्पर जुड़ाव के लिए आधारभूत है। हाइपरलिंक किसी दूसरे वेब पेज, उसी पेज पर किसी अलग सेक्शन या यहां तक कि किसी डाउनलोड करने योग्य फ़ाइल से भी लिंक हो सकता है। उदाहरण के लिए:

 <a href="https://example.com">Example.com पर जाएँ</a>

इससे <code>https://example.com</code> पर एक लिंक बनता है.

सूचियों

HTML सूचियाँ बनाने के लिए तत्व प्रदान करता है। सूचियों के दो प्राथमिक प्रकार हैं:

अव्यवस्थित सूचियाँ (<code><ul></code>), जहाँ आइटमों का क्रम महत्वपूर्ण नहीं होता। अव्यवस्थित सूची में आइटम बुलेट से चिह्नित होते हैं।
क्रमबद्ध सूचियाँ (<code><ol></code>), जहाँ आइटमों का क्रम मायने रखता है। क्रमबद्ध सूची में आइटम क्रमांकित होते हैं।

सूची में प्रत्येक आइटम <code><li></code> (सूची आइटम) टैग के भीतर संलग्न है।

एचटीएमएल 5

HTML5 मानक का नवीनतम विकास है, जो कई नई सुविधाएँ प्रस्तुत करता है जो मल्टीमीडिया और इंटरैक्टिव दस्तावेज़ों की आधुनिक आवश्यकताओं को दर्शाती हैं। इनमें नए संरचनात्मक तत्व (<code><header></code>, <code><footer></code>, <code><article></code>, <code><section></code>), ग्राफ़िक तत्व (<code><canvas></code> ड्राइंग के लिए, <code><svg></code> स्केलेबल वेक्टर ग्राफ़िक्स के लिए), और मीडिया तत्व (<code><audio></code> और <code><video></code>) शामिल हैं।

अर्थपूर्ण HTML

सिमेंटिक HTML का तात्पर्य वेबपेजों में सूचना के अर्थ या अर्थ को सुदृढ़ करने के लिए HTML मार्कअप के उपयोग से है। केवल यह परिभाषित करने के बजाय कि तत्व कैसे दिखते हैं या व्यवहार करते हैं (यह CSS और JavaScript का काम है), सिमेंटिक HTML संरचना और सामग्री के प्रकार का सटीक वर्णन करता है। उदाहरण के लिए, <code><article></code> टैग इंगित करता है कि अंदर की सामग्री एक लेख है, जबकि <code><nav></code> टैग नेविगेशन मेनू को दर्शाता है।

सिमेंटिक HTML का उपयोग करने से वेब सामग्री की पहुंच और खोज क्षमता में सुधार होता है, जिससे यह अधिक उपयोगी और खोज योग्य हो जाती है।

निष्कर्ष

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

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