HTML Basic in Hindi

HTML की Basic जानकारी

HTML (HyperText Markup Language) का मुख्य उद्देश्य वेब पेज की संरचना तैयार करना है। यह वेब डेवेलपमेंट की पहली और सबसे महत्वपूर्ण भाषा है। इस चैप्टर में हम HTML के बुनियादी तत्वों और उनके उपयोग को विस्तार से समझेंगे।

HTML Document का आधार

HTML डॉक्यूमेंट बनाने के लिए हमें टैग्स और एलिमेंट्स का उपयोग करना होता है। एक साधारण HTML पेज के लिए निम्नलिखित संरचना जरूरी है।

HTML का Basic Structure

HTML पेज बनाने के लिए आपको एक निश्चित संरचना का पालन करना होता है। नीचे एक बेसिक HTML डॉक्यूमेंट का उदाहरण दिया गया है:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>यह मेरी पहली वेबसाइट है</h1>
    <p>HTML सीखना मजेदार और सरल है।</p>
  </body>
</html>

कोड का विवरण

<!DOCTYPE html>: यह HTML डॉक्यूमेंट के संस्करण को परिभाषित करता है।
<html>: यह रूट एलिमेंट है, जिसमें पूरा HTML डॉक्यूमेंट लिखा जाता है।
<head>: इस हिस्से में मेटा जानकारी, टाइटल, और स्टाइलशीट जैसी चीज़ें होती हैं।
<title>: यह पेज का टाइटल सेट करता है, जो ब्राउज़र टैब में दिखाई देता है।
<body>: इसमें वह सभी सामग्री होती है, जो ब्राउज़र में प्रदर्शित की जाती है।

HTML Elements और Tags

HTML में सभी संरचनाएं एलिमेंट्स और टैग्स के जरिए बनाई जाती हैं।

Tag: HTML का मुख्य घटक होता है, जो ब्राउज़र को बताता है कि क्या करना है। उदाहरण: <p>, <h1>, <a>।
Element: टैग के अंदर का कंटेंट, जो ब्राउज़र में दिखता है। उदाहरण:

<p>यह एक पैराग्राफ है।</p>

HTML Tags के प्रकार

Opening Tag और Closing Tag: अधिकांश HTML टैग्स एक ओपनिंग और क्लोज़िंग के साथ आते हैं।
उदाहरण: <h1>हेडिंग</h1>
Self-Closing Tag: कुछ टैग्स ऐसे होते हैं, जिन्हें बंद करने की जरूरत नहीं होती।
उदाहरण: <img src="image.jpg" alt="Image">

HTML में Common Tags

नीचे HTML के कुछ सामान्य टैग्स और उनके उपयोग दिए गए हैं:

Heading Tags:
HTML में हेडिंग्स बनाने के लिए <h1> से <h6> तक के टैग्स का उपयोग किया जाता है। <h1>यह H1 हेडिंग है</h1> <h2>यह H2 हेडिंग है</h2>
Paragraph Tag:
पैराग्राफ बनाने के लिए <p> टैग का उपयोग किया जाता है। <p>यह एक साधारण पैराग्राफ है।</p>
Link Tag:
वेब पेज पर लिंक जोड़ने के लिए <a> टैग का उपयोग किया जाता है। <a href="https://example.com">यह एक लिंक है</a>
Image Tag:
इमेज जोड़ने के लिए <img> टैग का उपयोग किया जाता है। <img src="image.jpg" alt="My Image">
List Tags:
HTML में लिस्ट बनाने के लिए दो प्रकार के टैग होते हैं:
- Ordered List (<ol>): <ol> <li>पहला आइटम</li> <li>दूसरा आइटम</li> </ol>
- Unordered List (<ul>): <ul> <li>पहला आइटम</li> <li>दूसरा आइटम</li> </ul>
Comment Tag:
HTML कोड में कमेंट जोड़ने के लिए  का उपयोग किया जाता है। जैसे

HTML Attributes

HTML Attributes टैग्स के अतिरिक्त गुणों को परिभाषित करते हैं। उदाहरण के लिए:

<a href="https://example.com" target="_blank">लिंक</a>

Attributes का विवरण:

href: लिंक का URL सेट करता है।
target: लिंक को नई विंडो या टैब में खोलता है।

HTML में Spaces और Line Breaks

HTML में अतिरिक्त स्पेस और लाइन ब्रेक के लिए खास टैग्स का उपयोग होता है:

Non-breaking Space ( ) यह    स्पेस   डालता   है।
Line Break (<br>) यह <br> लाइन ब्रेक देता है।

HTML Case Sensitivity

HTML टैग्स case-insensitive होते हैं। इसका मतलब है कि <h1> और <H1> दोनों का व्यवहार समान होता है। लेकिन अच्छी प्रैक्टिस के लिए टैग्स को lowercase में लिखना चाहिए।

HTML Validation

HTML को सही तरीके से लिखने के लिए HTML वेलिडेटर्स का उपयोग करें। यह सुनिश्चित करता है कि आपका कोड सही है और सभी ब्राउज़र्स पर सही से काम करेगा।

निष्कर्ष

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