💻
⌨️
🖱️
🖥️
💾
← डैशबोर्ड पर वापस जाएँ
Font Size:

1. परिचय

हम जो भी वेब पेज इंटरनेट पर देखते हैं, वे किसी न किसी भाषा में लिखे होते हैं। वेब पेज बनाने की सबसे बुनियादी भाषा HTML (HyperText Markup Language) है। HTML एक मार्कअप भाषा है, अर्थात इसमें टेक्स्ट को विशेष चिह्नों (टैग) के माध्यम से 'चिह्नित' करके उसका स्वरूप तय किया जाता है। HTML में लिखी फ़ाइल को ब्राउज़र (जैसे Chrome, Firefox) खोलकर वेब पेज के रूप में प्रदर्शित करता है। HTML का पूर्ण रूप है HyperText Markup Language। इसका विकास टिम बर्नर्स-ली ने किया। HTML सीखना वेब डिज़ाइनिंग की पहली सीढ़ी है। इस अध्याय में हम HTML की संरचना, टैग, तत्व, एट्रिब्यूट, शीर्षक, अनुच्छेद, सूचियाँ, लिंक और चित्रों से संबंधित टैग का अध्ययन करेंगे।

2. HTML की मूल संरचना (Basic Structure)

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

<html>
<head>
<title>मेरा पहला पेज</title>
</head>
<body>
<h1>नमस्ते दुनिया</h1>
<p>यह मेरा पहला वेब पेज है।</p>
</body>
</html>
  1. html टैग: बताता है कि दस्तावेज़ HTML में है।
  2. head टैग: पेज की जानकारी (मेटा डेटा) जैसे शीर्षक, यहाँ आता है।
  3. title टैग: ब्राउज़र के टैब में दिखने वाला शीर्षक।
  4. body टैग: पेज की वास्तविक सामग्री यहाँ लिखी जाती है।
  5. h1 टैग: मुख्य शीर्षक (Heading)।
  6. p टैग: अनुच्छेद (Paragraph)।

3. टैग और तत्व (Tags and Elements)

HTML में टैग (Tag) कोण कोष्ठक (<>) के अंदर लिखा जाने वाला नाम है, जैसे p, h1, body। टैग दो प्रकार के होते हैं:

  1. समापन टैग वाले (Paired/Container Tags): जिनके आरंभिक और समापन दोनों टैग होते हैं। जैसे p और /p, h1 और /h1, body और /body।
  2. बिना समापन वाले (Empty Tags): जिनमें केवल आरंभिक टैग होता है, जैसे br (लाइन ब्रेक), hr (क्षैतिज रेखा), img (चित्र)।

तत्व (Element): आरंभिक टैग, सामग्री और समापन टैग का संपूर्ण संयोजन तत्व कहलाता है। जैसे pयह पाठ है/p।

एट्रिब्यूट (Attribute): टैग के बारे में अतिरिक्त जानकारी देने वाले गुण। जैसे img टैग में src="photo.jpg" और alt="फोटो"।

4. शीर्षक (Headings)

HTML में छह स्तर के शीर्षक होते हैं, h1 से h6 तक:

उदाहरण: h1मुख्य शीर्षक/h1, h2उपशीर्षक/h2।

5. अनुच्छेद और टेक्स्ट फॉर्मेटिंग (Paragraph and Text Formatting)

  1. p: अनुच्छेद बनाने के लिए, जैसे pयह एक अनुच्छेद है。/p
  2. br: लाइन ब्रेक (नई पंक्ति) के लिए।
  3. hr: क्षैतिज रेखा खींचने के लिए।
  4. b: मोटा (बोल्ड) टेक्स्ट।
  5. i: तिरछा (इटैलिक) टेक्स्ट।
  6. u: रेखांकित (अंडरलाइन) टेक्स्ट।
  7. strong: महत्वपूर्ण टेक्स्ट (मोटा)।
  8. em: जोर देने के लिए (तिरछा)।

6. सूचियाँ (Lists)

HTML में दो प्रकार की सूचियाँ बनाई जा सकती हैं:

  1. क्रमबद्ध सूची (Ordered List): ol टैग से, जिसमें आइटम क्रम संख्या (1, 2, 3) में आते हैं। प्रत्येक आइटम li टैग में होता है।
  2. अक्रमबद्ध सूची (Unordered List): ul टैग से, जिसमें आइटम बुलेट (•) में आते हैं।

उदाहरण:

<ul>
<li>सेब</li>
<li>आम</li>
</ul>
<ol>
<li>पहला</li>
<li>दूसरा</li>
</ol>
  1. हाइपरलिंक (Hyperlink): किसी अन्य पेज पर जाने के लिए a (anchor) टैग का उपयोग होता है। href एट्रिब्यूट में लिंक का पता लिखा जाता है। html <a href="https://www.google.com">गूगल पर जाएँ</a>
  2. चित्र (Image): चित्र जोड़ने के लिए img टैग। src एट्रिब्यूट में चित्र का पता और alt में वैकल्पिक टेक्स्ट लिखा जाता है। html <img src="photo.jpg" alt="मेरी फोटो">

हाइपरलिंक ही 'HT' (HyperText) का कारण है, जो HTML को सामान्य टेक्स्ट से अलग बनाता है।

8. HTML फ़ाइल बनाना और चलाना (Creating and Running HTML)

  1. नोटपैड या किसी टेक्स्ट एडिटर में HTML कोड लिखें।
  2. फ़ाइल को .html या .htm एक्सटेंशन से सहेजें, जैसे mypage.html।
  3. फ़ाइल को वेब ब्राउज़र में खोलें, और वेब पेज प्रदर्शित हो जाएगा।

9. एट्रिब्यूट (Attributes)

एट्रिब्यूट टैग के बारे में अतिरिक्त जानकारी देने वाले गुण होते हैं। एट्रिब्यूट हमेशा आरंभिक टैग में लिखे जाते हैं, नाम="मान" के रूप में। प्रमुख एट्रिब्यूट निम्नलिखित हैं:

  1. href: a टैग में लिंक का पता देता है, जैसे a href="https://www.google.com"।
  2. src: img टैग में चित्र का पता देता है, जैसे img src="photo.jpg"।
  3. alt: img टैग में चित्र न दिखने पर दिखने वाला वैकल्पिक टेक्स्ट।
  4. width और height: img या table की चौड़ाई और ऊँचाई निर्धारित करते हैं।
  5. style: रंग, पृष्ठभूमि जैसे इनलाइन स्टाइल देने के लिए।
  6. title: किसी तत्व पर माउस रखने पर टूलटिप संदेश दिखाने के लिए।

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

10. HTML के उपयोग (Uses of HTML)

HTML का उपयोग वेब पेज की संरचना बनाने के लिए होता है। इसका प्रयोग निम्नलिखित कार्यों में किया जाता है:

  1. वेबसाइट के होम पेज और अन्य पृष्ठों का निर्माण।
  2. ऑनलाइन फ़ॉर्म और प्रश्नावली बनाना।
  3. समाचार पोर्टल, ब्लॉग और ई-पुस्तकें प्रकाशित करना।
  4. शिक्षा में ऑनलाइन पाठ्य सामग्री बनाना।
  5. ईमेल के HTML संस्करण भेजना।

हालाँकि HTML केवल संरचना प्रदान करता है; उसे आकर्षक बनाने के लिए CSS (Cascading Style Sheets) और गतिशील बनाने के लिए जावास्क्रिप्ट का उपयोग किया जाता है। ये तीनों मिलकर आधुनिक वेब विकास की नींव हैं। HTML सीखना वेब डिज़ाइनिंग में कैरियर बनाने का पहला कदम है।

त्वरित पुनरावृत्ति तालिकाएँ

तालिका 1: HTML के प्रमुख टैग

टैग कार्य
html HTML दस्तावेज़ की शुरुआत
head पेज की जानकारी
title ब्राउज़र टैब का शीर्षक
body पेज की सामग्री
h1-h6 शीर्षक (h1 सबसे बड़ा)
p अनुच्छेद
br लाइन ब्रेक

तालिका 2: फॉर्मेटिंग टैग

टैग कार्य
b बोल्ड
i इटैलिक
u अंडरलाइन
strong महत्वपूर्ण (मोटा)
em जोर (तिरछा)
hr क्षैतिज रेखा

तालिका 3: सूचियाँ और लिंक

टैग कार्य
ul अक्रमबद्ध सूची
ol क्रमबद्ध सूची
li सूची का आइटम
a हाइपरलिंक
img चित्र

माइंड मैप

graph TD A["HTML"] --> B["संरचना: html, head, body"] A --> C["टैग: समापन वाले, बिना समापन वाले"] A --> D["शीर्षक: h1 से h6"] A --> E["टेक्स्ट: p, b, i, u, br"] A --> F["सूचियाँ: ul, ol, li"] A --> G["लिंक/चित्र: a, img"] B --> H["title: ब्राउज़र टैब का शीर्षक"] G --> I["href, src, alt एट्रिब्यूट"] C --> J["समापन: p/p, बिना समापन: br, img"]

महत्वपूर्ण आरेख (SVG)

HTML दस्तावेज़ की संरचना html (HTML दस्तावेज़) head (पेज की जानकारी) title (ब्राउज़र टैब का शीर्षक) body (पेज की सामग्री) h1 (शीर्षक) p (अनुच्छेद) img (चित्र) a (लिंक) स्वर्ण नियम: सामग्री हमेशा body टैग के अंदर लिखी जाती है
HTML टैग के प्रकार HTML टैग समापन वाले टैग आरंभिक + समापन दोनों जैसे: p /p, h1 /h1 body /body बिना समापन वाले केवल आरंभिक टैग जैसे: br, hr, img समापन टैग नहीं स्वर्ण नियम: img और br टैग बिना समापन वाले (empty) टैग हैं

सामान्य गलतियाँ

  1. समापन टैग भूल जाना: p जैसे समापन टैग वाले टैगों में /p लिखना आवश्यक है, न भूलें।
  2. h1 से h6 का क्रम गलत करना: h1 सबसे बड़ा और h6 सबसे छोटा शीर्षक है; क्रम को उल्टा नहीं लिखना चाहिए।
  3. title को body में लिखना: title टैग head के अंदर लिखा जाता है, body में नहीं।
  4. img टैग में src न लिखना: चित्र के लिए src एट्रिब्यूट आवश्यक है, बिना उसके चित्र नहीं दिखेगा।
  5. ul और ol में भ्रम: ul अक्रमबद्ध (बुलेट) और ol क्रमबद्ध (1, 2, 3) सूची है।
  6. a टैग में href भूल जाना: हाइपरलिंक के लिए href एट्रिब्यूट में पता लिखना आवश्यक है।
  7. फ़ाइल को बिना .html एक्सटेंशन सहेजना: HTML फ़ाइल को .html या .htm एक्सटेंशन से ही सहेजना चाहिए।

परीक्षा युक्तियाँ

  1. HTML का पूर्ण रूप (HyperText Markup Language) और उसके विकासकर्ता (टिम बर्नर्स-ली) याद रखें।
  2. HTML की मूल संरचना (html, head, title, body) के क्रम को चित्र सहित लिखना सीखें।
  3. समापन वाले और बिना समापन वाले टैगों के उदाहरण अलग-अलग याद रखें।
  4. h1 से h6 तक शीर्षकों का क्रम और उनका आकार याद रखें।
  5. a, img, ul, ol, li टैग के सिंटैक्स (लिखने का तरीका) का अभ्यास करें।
  6. एट्रिब्यूट (href, src, alt) का सही उपयोग उदाहरण सहित लिखें।
  7. HTML फ़ाइल बनाने और ब्राउज़र में चलाने की प्रक्रिया को चरणबद्ध रूप से लिखें।

निष्कर्ष

HTML वेब पेज निर्माण की मूल भाषा है, जो टेक्स्ट को टैगों के माध्यम से चिह्नित करके वेब पेज का स्वरूप निर्धारित करती है। html, head, title और body की संरचना हर HTML दस्तावेज़ की नींव है। शीर्षक (h1-h6), अनुच्छेद (p), फॉर्मेटिंग (b, i, u), सूचियाँ (ul, ol), हाइपरलिंक (a) और चित्र (img) वेब पेज के मुख्य निर्माण खंड हैं। एट्रिब्यूट्स (href, src, alt) टैगों को अधिक प्रभावी बनाते हैं। इस अध्याय का ज्ञान आगे चलकर CSS और जावास्क्रिप्ट सीखने की नींव तैयार करता है। अगले अध्यायों में हम पायथन प्रोग्रामिंग भाषा का अध्ययन करेंगे, जो कंप्यूटर विज्ञान की सबसे महत्वपूर्ण भाषाओं में से एक है।