Full Basic Html code

1. एचटीएमएल क्या है? (What is HTML?)

एचटीएमएल (HTML) का पूरा नाम HyperText Markup Language है। यह वेब पेजों और वेब एप्लीकेशन की संरचना (structure) बनाने के लिए इस्तेमाल की जाने वाली मानक मार्कअप भाषा है।

यह ब्राउज़र को बताता है कि वेब पेज पर सामग्री (जैसे टेक्स्ट, इमेज, लिंक) को कैसे प्रदर्शित किया जाए। यह वेब डेवलपमेंट का मूलभूत आधार है।

2. एचटीएमएल की मूल बातें (HTML Basics)

एचटीएमएल की मूल बातें समझने के लिए, आपको कुछ प्रमुख अवधारणाओं को जानना होगा:

  • तत्व (Elements): एचटीएमएल पेज तत्वों से बने होते हैं। एक तत्व आमतौर पर एक स्टार्ट टैग <tagname>, सामग्री (content), और एक एंड टैग </tagname> से मिलकर बनता है। उदाहरण: <p>यह एक पैराग्राफ है।</p>
  • टैग (Tags): टैग कोण कोष्ठक < > में संलग्न कीवर्ड होते हैं जो ब्राउज़र को बताते हैं कि सामग्री को कैसे प्रारूपित या प्रदर्शित किया जाए। अधिकांश टैग जोड़े में आते हैं (स्टार्ट और एंड टैग), लेकिन कुछ खाली टैग (empty tags) होते हैं जैसे <img> या <br>।
  • विशेषताएँ (Attributes): विशेषताएँ तत्वों के बारे में अतिरिक्त जानकारी प्रदान करती हैं और हमेशा स्टार्ट टैग के भीतर निर्दिष्ट की जाती हैं। वे आमतौर पर नाम/मान जोड़े (name/value pairs) में आते हैं जैसे name="value"। उदाहरण: <img src="image.jpg" alt="विवरण"> में src और alt विशेषताएँ हैं।

3. एचटीएमएल टैग क्या हैं? (What are HTML Tags?)

एचटीएमएल टैग्स विशेष कीवर्ड होते हैं जो एंगल ब्रैकेट्स < > से घिरे होते हैं। ये ब्राउज़र को निर्देश देते हैं कि वेब पेज पर सामग्री को कैसे प्रस्तुत करना है।

कुछ सामान्य टैग्स:

  • <h1> से <h6>: हेडिंग्स (शीर्षक) के लिए।
  • <p>: पैराग्राफ के लिए।
  • <a>: लिंक्स (हाइपरलिंक्स) के लिए।
  • <img>: इमेज (छवि) प्रदर्शित करने के लिए।
  • <ul>, <ol>, <li>: लिस्ट (सूची) बनाने के लिए।
  • <div>: पेज के सेक्शन (खंड) को परिभाषित करने के लिए (एक ब्लॉक-लेवल कंटेनर)।
  • <span>: टेक्स्ट के छोटे हिस्से को स्टाइल करने के लिए (एक इनलाइन कंटेनर)।
  • <table>, <tr>, <th>, <td>: टेबल (तालिका) बनाने के लिए।
  • <form>, <input>, <button>: फॉर्म बनाने के लिए।

4. एचटीएमएल डॉक्यूमेंट की संरचना (HTML Document Structure)

एक सामान्य एचटीएमएल डॉक्यूमेंट की एक मानक संरचना होती है (यह संरचना पूरी फ़ाइल के लिए होती है, ब्लॉगर पोस्ट के अंदर केवल <body> का कंटेंट जाता है):

<!DOCTYPE html>

<html lang="hi">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>पेज का शीर्षक</title>

</head>

<body>

    <!-- पेज की मुख्य सामग्री यहाँ आती है -->

    <h1>मुख्य शीर्षक</h1>

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

</body>

</html>

ब्लॉगर पोस्ट में, आप आमतौर पर केवल <body> के अंदर आने वाली सामग्री (जैसे <h1>, <p> आदि) डालते हैं।

5. एचटीएमएल में हेडिंग कैसे बनाएं? (Creating Headings)

एचटीएमएल में छह स्तर की हेडिंग्स होती हैं, <h1> से <h6> तक। <h1> सबसे महत्वपूर्ण हेडिंग होती है।

उदाहरण:

यह एक H1 हेडिंग है

यह एक H2 हेडिंग है

यह एक H3 हेडिंग है

यह एक H4 हेडिंग है

यह एक H5 हेडिंग है
यह एक H6 हेडिंग है
<h1>यह एक H1 हेडिंग है</h1>

<h2>यह एक H2 हेडिंग है</h2>

<h3>यह एक H3 हेडिंग है</h3>

<h4>यह एक H4 हेडिंग है</h4>

<h5>यह एक H5 हेडिंग है</h5>

<h6>यह एक H6 हेडिंग है</h6>

6. पैराग्राफ कैसे बनाएं? (Creating Paragraphs)

टेक्स्ट के ब्लॉक बनाने के लिए <p> टैग का उपयोग किया जाता है।

उदाहरण:

यह पहला पैराग्राफ है। इसमें कुछ टेक्स्ट है जो विषय के बारे में बताता है।

यह दूसरा पैराग्राफ है। एचटीएमएल में टेक्स्ट को व्यवस्थित करने के लिए पैराग्राफ महत्वपूर्ण हैं।

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

<p>यह दूसरा पैराग्राफ है।</p>

7. लिंक्स कैसे बनाएं? (Creating Links)

लिंक्स बनाने के लिए <a> टैग का उपयोग किया जाता है। href विशेषता लिंक का URL बताती है।

उदाहरण:

अधिक जानकारी के लिए, Google पर जाएं।

एचटीएमएल फॉर्म्स सेक्शन पर जाएं (इसी पेज पर लिंक)

<!-- बाहरी वेबसाइट का लिंक (नए टैब में खुलेगा) -->

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Google पर जाएं</a>

<!-- उसी पेज के किसी सेक्शन का लिंक -->

<a href="#section-10">एचटीएमएल फॉर्म्स सेक्शन पर जाएं</a>

<!-- ध्यान दें: लक्ष्य सेक्शन में id="section-10" होना चाहिए -->

target="_blank" लिंक को नए टैब में खोलता है। rel="noopener noreferrer" सुरक्षा के लिए अच्छा अभ्यास है।

8. इमेज कैसे जोड़ें? (Adding Images)

इमेज प्रदर्शित करने के लिए <img> टैग का उपयोग होता है। src इमेज का स्रोत और alt वैकल्पिक टेक्स्ट बताता है।

उदाहरण:

सैंपल इमेज का प्लेसहोल्डर 
<img src="https://placehold.co/600x300/e2e8f0/4a5568?text=Sample+Image"

     alt="सैंपल इमेज का प्लेसहोल्डर"

     width="600"

     height="300"

>

width और height जोड़ना अच्छा है, लेकिन सुनिश्चित करें कि CSS या थीम इसे मोबाइल पर सही ढंग से स्केल करे (जैसे max-width: 100%; height: auto;)। ऊपर दी गई स्टाइलिंग में यह शामिल है।

9. लिस्ट कैसे बनाएं? (Creating Lists)

अनऑर्डर्ड लिस्ट (<ul> - बुलेट पॉइंट्स) और ऑर्डर्ड लिस्ट (<ol> - नंबर) बनाने के लिए <li> (लिस्ट आइटम) का उपयोग करें।

अनऑर्डर्ड लिस्ट (Unordered List):

  • आइटम 1
  • आइटम 2
  • आइटम 3
<ul>

    <li>आइटम 1</li>

    <li>आइटम 2</li>

    <li>आइटम 3</li>

</ul>

ऑर्डर्ड लिस्ट (Ordered List):

  1. पहला कदम
  2. दूसरा कदम
  3. तीसरा कदम
<ol>

    <li>पहला कदम</li>

    <li>दूसरा कदम</li>

    <li>तीसरा कदम</li>

</ol>

10. एचटीएमएल फॉर्म क्या है? (What is an HTML Form?)

एचटीएमएल फॉर्म (<form>) का उपयोग उपयोगकर्ता से इनपुट एकत्र करने के लिए किया जाता है। ब्लॉगर में सीधे फॉर्म सबमिशन थोड़ा जटिल हो सकता है और इसके लिए बाहरी सेवाओं या Google Apps Script की आवश्यकता हो सकती है। यह उदाहरण केवल संरचना दिखाता है।

11. फॉर्म में इनपुट फील्ड कैसे जोड़ें? (Adding Input Fields)

इनपुट फील्ड के लिए <input> टैग का उपयोग होता है। type विशेषता फील्ड का प्रकार निर्धारित करती है (जैसे text, email, checkbox, radio)। <textarea> मल्टी-लाइन टेक्स्ट के लिए है। <label> एक्सेसिबिलिटी के लिए महत्वपूर्ण है।

उदाहरण फॉर्म (केवल प्रदर्शन के लिए):

<!-- महत्वपूर्ण: ब्लॉगर में action="#" काम नहीं करेगा। सबमिशन के लिए बाहरी सेवा चाहिए। -->

<form action="#" method="post" onsubmit="return false;">

    <div>

        <label for="guide-name">नाम:</label>

        <input type="text" id="guide-name" name="user_name">

    </div>

    <div>

        <label for="guide-email">ईमेल:</label>

        <input type="email" id="guide-email" name="user_email">

    </div>

     <div>

        <label for="guide-message">संदेश:</label>

        <textarea id="guide-message" name="user_message" rows="4"></textarea>

    </div>

    <div>

        <button type="submit">फॉर्म जमा करें (डेमो)</button>

    </div>

</form>

12. फॉर्म में बटन कैसे जोड़ें? (Adding Buttons)

फॉर्म में बटन के लिए <button> या <input type="submit"> का उपयोग करें। type="submit" फॉर्म जमा करता है, type="reset" फ़ील्ड रीसेट करता है, और type="button" सामान्य बटन होता है (आमतौर पर जावास्क्रिप्ट के साथ)।

उदाहरण:


<button type="submit">सबमिट (Button)</button>

<button type="reset">रीसेट</button>

<button type="button" onclick="alert('सामान्य बटन दबाया गया!')">सामान्य बटन</button>

<input type="submit" value="सबमिट (Input)">

13. एचटीएमएल टेबल कैसे बनाएं? (Creating HTML Tables)

सारणीबद्ध डेटा के लिए टेबल (<table>) का उपयोग करें। इसमें पंक्तियों (<tr>) और सेलों (<th> हेडर के लिए, <td> डेटा के लिए) का उपयोग होता है।

14. टेबल में रो और कॉलम कैसे जोड़ें? (Adding Rows and Columns)

प्रत्येक <tr> एक नई पंक्ति बनाता है। उसके अंदर <th> या <td> जोड़कर कॉलम (सेल) बनाएं।

उदाहरण:

कर्मचारी डेटा
आईडी नाम पद
101 रमेश कुमार मैनेजर
102 प्रिया शर्मा डेवलपर
103 अमित सिंह डिजाइनर
कुल कर्मचारी: 3 
<table>

    <caption>कर्मचारी डेटा</caption>

    <thead>

        <tr> <!-- हेडर पंक्ति -->

            <th>आईडी</th>

            <th>नाम</th>

            <th>पद</th>

        </tr>

    </thead>

    <tbody>

        <tr> <!-- डेटा पंक्ति 1 -->

            <td>101</td>

            <td>रमेश कुमार</td>

            <td>मैनेजर</td>

        </tr>

        <tr> <!-- डेटा पंक्ति 2 -->

            <td>102</td>

            <td>प्रिया शर्मा</td>

            <td>डेवलपर</td>

        </tr>

         <tr> <!-- डेटा पंक्ति 3 -->

            <td>103</td>

            <td>अमित सिंह</td>

            <td>डिजाइनर</td>

        </tr>

    </tbody>

     <tfoot>

        <tr>

             <!-- colspan="3" मतलब यह सेल 3 कॉलम तक फैला है -->

            <td colspan="3">कुल कर्मचारी: 3</td>

        </tr>

    </tfoot>

</table>

colspan सेल को कई कॉलमों में फैलाता है, rowspan कई पंक्तियों में।

15. एचटीएमएल और सीएसएस के बीच क्या अंतर है? (HTML vs CSS)

  • एचटीएमएल (HTML): पेज की संरचना और सामग्री (क्या है?)
  • सीएसएस (CSS): पेज की स्टाइलिंग और प्रस्तुति (कैसा दिखता है?)

HTML कंकाल है, CSS त्वचा और कपड़े।

16. एचटीएमएल तत्वों को सीएसएस के साथ स्टाइल कैसे करें? (Styling with CSS)

ब्लॉगर में स्टाइलिंग के तरीके:

  1. इनलाइन स्टाइल्स: <p style="color: blue;">...</p> (सीधे टैग पर)।
  2. आंतरिक स्टाइल शीट (इसी कोड में): <style> ... </style> टैग का उपयोग (जैसा कि इस गाइड की शुरुआत में किया गया है)। यह ब्लॉगर पोस्ट के लिए उपयोगी है, बस सुनिश्चित करें कि स्टाइल बहुत व्यापक न हों।
  3. ब्लॉगर थीम CSS: ब्लॉगर के थीम एडिटर (Theme > Customize > Advanced > Add CSS) में CSS जोड़ना (पूरी साइट पर लागू होता है)।
  4. बाहरी स्टाइल शीट: ब्लॉगर में बाहरी CSS फ़ाइल लिंक करना संभव है, लेकिन यह थोड़ा उन्नत है।

इस गाइड में हमने स्कोप्ड आंतरिक स्टाइल शीट का उपयोग किया है।

17. एचटीएमएल और जावास्क्रिप्ट के बीच क्या संबंध है? (HTML and JavaScript Relationship)

जावास्क्रिप्ट (JS) पेज को इंटरैक्टिव बनाता है और उसका व्यवहार नियंत्रित करता है।

JS के कार्य:

  • HTML कंटेंट/स्टाइल बदलना
  • उपयोगकर्ता क्रियाओं (क्लिक, इनपुट) पर प्रतिक्रिया देना
  • फॉर्म मान्य करना
  • एनिमेशन बनाना

HTML संरचना है, CSS दिखावट है, और JS व्यवहार है।

class="text-2xl text-blue-600">18. जावास्क्रिप्ट के साथ एचटीएमएल तत्वों को कैसे मैनिपुलेट करें? (Manipulating HTML with JavaScript)

जावास्क्रिप्ट DOM (Document Object Model) का उपयोग करके HTML तत्वों को चुनता है और बदलता है।

तरीके:

  • document.getElementById('id')
  • document.querySelector('selector')
  • element.innerHTML / element.textContent (कंटेंट बदलना)
  • element.style.property (स्टाइल बदलना)
  • element.setAttribute() (विशेषता बदलना)
  • element.addEventListener() (इवेंट जोड़ना)

उदाहरण:

यह मूल टेक्स्ट है।

<p id="guideDemoText">यह मूल टेक्स्ट है।</p>

<button onclick="guideChangeText()">टेक्स्ट बदलें (JS)</button>

<script>

function guideChangeText() {

  var paragraph = document.getElementById('guideDemoText');

  if (paragraph) { // सुनिश्चित करें कि तत्व मौजूद है

      paragraph.textContent = 'टेक्स्ट जावास्क्रिप्ट द्वारा बदल दिया गया है!';

      paragraph.style.color = 'purple';

      paragraph.style.fontWeight = 'bold';

   }

}

</script>

जावास्क्रिप्ट कोड को <script> टैग में या ब्लॉगर पोस्ट के अंत में रखना सबसे अच्छा है।

19. एचटीएमएल वेलिडेशन क्या है? (HTML Validation)

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

20. एचटीएमएल एक्सेसिबिलिटी क्या है? (HTML Accessibility - a11y)

यह सुनिश्चित करना कि वेबसाइट सभी के लिए प्रयोग करने योग्य हो, खासकर विकलांग उपयोगकर्ताओं के लिए।

मुख्य बातें:

  • सिमेंटिक HTML (अर्थपूर्ण टैग्स जैसे <nav>, <article>) का उपयोग।
  • इमेज के लिए वर्णनात्मक alt टेक्स्ट।
  • फॉर्म के लिए <label> का सही उपयोग।
  • टेबल हेडर (<th>) का उपयोग।
  • कीबोर्ड से नेविगेशन संभव हो।
  • पर्याप्त कलर कंट्रास्ट (CSS)।

21. एचटीएमएल से जुड़े सुरक्षा मुद्दे (HTML Security Issues)

HTML सीधे तौर पर असुरक्षित नहीं है, लेकिन इसका उपयोग अन्य तकनीकों के साथ सुरक्षा जोखिम पैदा कर सकता है:

  • क्रॉस-साइट स्क्रिप्टिंग (XSS): जब हमलावर आपकी साइट पर दुर्भावनापूर्ण स्क्रिप्ट इंजेक्ट करते हैं। बचाव: उपयोगकर्ता इनपुट को हमेशा सैनिटाइज़/एस्केप करें।
  • क्लिकजैकिंग: उपयोगकर्ता को अनजाने में कुछ क्लिक करने के लिए धोखा देना। बचाव: X-Frame-Options हेडर का उपयोग करें (थीम स्तर पर)।
  • फॉर्म सुरक्षा: असुरक्षित फॉर्म डेटा चोरी या CSRF का कारण बन सकते हैं। बचाव: HTTPS, CSRF टोकन, सर्वर-साइड सत्यापन।

सुरक्षा के लिए हमेशा सर्वोत्तम प्रथाओं का पालन करें।

टिप्पणियाँ

एक टिप्पणी भेजें

इस ब्लॉग से लोकप्रिय पोस्ट

JavaScript basic to advance guide

जावास्क्रिप्ट सीखें: शुरुआती से लेकर एडवांस तक एक सम्पूर्ण गाइड जावास्क्रिप्ट (JavaScript) वेब डेवलपमेंट की दुनिया में एक बहुत ही शक्तिशाली और लोकप्रिय भाषा है। यह सिर्फ वेब पेजों को इंटरैक्टिव बनाने तक ही सीमित नहीं है, बल्कि सर्वर-साइड प्रोग्रामिंग, मोबाइल ऐप डेवलपमेंट और यहां तक कि गेम डेवलपमेंट में भी इसका उपयोग किया जाता है। यदि आप वेब डेवलपमेंट सीखना चाहते हैं या प्रोग्रामिंग में रुचि रखते हैं, तो जावास्क्रिप्ट एक बेहतरीन शुरुआत है। इस पोस्ट में, हम जावास्क्रिप्ट के बुनियादी सिद्धांतों से लेकर कुछ एडवांस अवधारणाओं तक को विस्तार से जानेंगे, उदाहरणों के साथ। 1. जावास्क्रिप्ट क्या है और इसका उपयोग क्यों किया जाता है? जावास्क्रिप्ट एक हल्के वजन वाली, इंटरप्रेटेड या जस्ट-इन-टाइम कंपाइल की गई प्रोग्रामिंग भाषा है जिसमें फर्स्ट-क्लास फंक्शन्स होते हैं। इसे मूल रूप से वेब पेजों को 'जीवित' बनाने के लिए डिज़ाइन किया गया था। उपयोग: वेब डेवलपमेंट (क्लाइंट-साइड): वेब ब्राउज़र में चलती है, HTML और CSS के साथ मिलकर वेब पे...
और पढ़ें

Tool Room Lath Machine: A Complete Guide

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

html Post Creator introduction

🚀 HTML पोस्ट क्रिएटर: अब ब्लॉग पोस्ट बनाना हुआ आसान! क्या आप ब्लॉगिंग शुरू करना चाहते हैं, लेकिन HTML कोड के बारे में जानकर घबराते हैं? या फिर आप एक अनुभवी ब्लॉगर हैं जो अपने काम को और तेज़ करना चाहते हैं? तो आपके लिए HTML पोस्ट क्रिएटर एकदम सही समाधान है। यह एक अद्भुत AI-आधारित टूल है जो आपको बिना किसी तकनीकी ज्ञान के मिनटों में शानदार और आकर्षक ब्लॉग पोस्ट बनाने में मदद करता है। HTML पोस्ट क्रिएटर सिर्फ एक साधारण एडिटर नहीं है। यह एक स्मार्ट असिस्टेंट है जो आपके काम को आसान और क्रिएटिव बनाता है। ✨ यह कैसे काम करता है? इस टूल का इस्तेमाल करना बहुत आसान है। आपको बस अपनी पोस्ट के लिए सामग्री (कंटेंट) और डिज़ाइन के बारे में सोचना है, और बाकी का काम हमारा AI संभाल लेगा। 🎯 1. अपनी पोस्ट को आकर्षक टाइटल दें आप अपनी पोस्ट के लिए मैन्युअल रूप से टाइटल लिख सकते हैं या हमारे AI-सुझाव का उपयोग कर सकते हैं। बस अपने विषय को दर्ज करें, और AI आपको कई रचनात्मक और आकर्षक टाइटल सुझाएगा। साथ ही, आप अपनी पसंद के अनुसार टाइटल का रंग भी चुन स...
और पढ़ें