HTML/CSS क्लास - पाठ 1 ब्रेकडाउन

पाठ 1: मूल HTML की समीक्षा और उन्नत HTML तत्वों का परिचय

उद्देश्य:

• बुनियादी HTML टैग ताज़ा करें।
• अधिक कार्यात्मक वेबपेज बनाने के लिए मध्यवर्ती स्तर के HTML तत्वों का परिचय दें।

1. HTML संरचना का परिचय

एचटीएमएल टैग का उपयोग करके वेबपेज सामग्री को कैसे व्यवस्थित करता है, इसकी संक्षिप्त व्याख्या के साथ शुरुआत करें। इस बात पर जोर दें कि HTML (हाइपरटेक्स्ट मार्कअप लैंग्वेज) का उपयोग वेब पेजों की संरचना के लिए किया जाता है, जबकि CSS का उपयोग स्टाइलिंग के लिए किया जाता है।

समीक्षा के लिए मुख्य अवधारणाएँ:

• , , : समझाएं कि प्रत्येक HTML दस्तावेज़ की एक परिभाषित संरचना होती है:
  • : मूल तत्व जो संपूर्ण वेबपेज को शामिल करता है।
  • : इसमें शीर्षक, सीएसएस के लिंक, स्क्रिप्ट आदि जैसी मेटा-जानकारी शामिल है।
  • : इसमें सभी दृश्यमान सामग्री शामिल होती है, जैसे पाठ, चित्र और तत्व जिनके साथ उपयोगकर्ता इंटरैक्ट करते हैं।

2. मूल HTML टैग पुनर्कथन

• शीर्षक (

  से

  ):

  समझाएं कि शीर्षक सामग्री को सबसे बड़े (

  ) से सबसे छोटे (

  ) तक, पदानुक्रमित रूप से संरचना करते हैं।

उदाहरण:

    
Main Heading
    
Sub Heading

• पैराग्राफ (

  ):

  पाठ या पैराग्राफ के ब्लॉक को परिभाषित करने के लिए उपयोग किया जाता है।

उदाहरण:

    
This is a paragraph.

• एंकर (Click here
  • छवियां (): छवियों को प्रदर्शित करने के लिए उपयोग किया जाता है। छवि फ़ाइल से लिंक करने के लिए src विशेषता और पहुंच के लिए alt की व्याख्या करें।

  उदाहरण:
  

  3. मध्यवर्ती HTML तत्वों का परिचय

  3.1. फॉर्म (, , )

  • फ़ॉर्म का उपयोग उपयोगकर्ता इनपुट एकत्र करने के लिए किया जाता है।

  • मूल रूप संरचना:

    • :
      फॉर्म तत्वों के लिए एक कंटेनर। इसमें क्रिया (जहाँ प्रपत्र डेटा भेजा जाता है) और विधि (GET/POST) जैसी विशेषताएँ शामिल हो सकती हैं।
    • : इनपुट तत्वों के लिए एक लेबल को परिभाषित करता है और पहुंच में सुधार करता है।
    • : विभिन्न प्रकार के इनपुट फ़ील्ड जैसे टेक्स्ट, पासवर्ड, चेकबॉक्स, रेडियो इत्यादि को परिभाषित करता है।

  टेक्स्ट इनपुट के साथ एक सरल फॉर्म का उदाहरण:
  

  Name: Email:

  3.2. सूचियाँ (

  ,
  ,
  1. )
  • अव्यवस्थित सूचियाँ (
    )
    और आदेशित सूचियाँ (
    )
    डेटा को बुलेट पॉइंट या क्रमांकित सूचियों में व्यवस्थित करने में मदद करती हैं।
  • सूची आइटम (
  • )
  सूची में प्रत्येक आइटम को परिभाषित करें।

  अव्यवस्थित और क्रमबद्ध सूची का उदाहरण:
  

  • Item 1
  • Item 2
  1. Step 1
  2. Step 2

  3.3. तालिकाएँ (, , , )

  • तालिकाएं संरचित डेटा को पंक्तियों और स्तंभों में प्रदर्शित करने की अनुमति देती हैं।

    • : तालिका के लिए कंटेनर।
    • : तालिका में एक पंक्ति को परिभाषित करता है।
    • : तालिका में एक सेल को परिभाषित करता है।
    • : तालिका में हेडर सेल को परिभाषित करता है (वैकल्पिक)।

      एक साधारण तालिका का उदाहरण:
      

      Name	Age
      John	25

      4. कक्षा गतिविधियाँ

      4.1. पुनर्कथन गतिविधि:

      • छात्रों को एक बुनियादी वेबपेज बनाने का कार्य सौंपें जिसमें शामिल हैं:

        • एक शीर्षक (

          )

        • एक अनुच्छेद (

          )

        • एक छवि ()

      उदाहरण:
      

          
      Welcome to My Website
          
      This is my first webpage.
          

      4.2. निर्देशित अभ्यास:

      • एक सरल फॉर्म बनाएं: छात्रों को उपयोगकर्ता इनपुट (नाम और ईमेल) एकत्र करने के लिए एक सरल फॉर्म बनाना सिखाएं।
        • , , और शामिल करें।

      4.3. सूचियाँ और तालिकाएँ:

      • छात्रों को उनकी पसंदीदा चीज़ों की एक अव्यवस्थित सूची (
        ) और डेटा की कुछ पंक्तियों (नाम, उम्र, पसंदीदा रंग) के साथ एक सरल तालिका बनाने का कार्य दें।

      उदाहरण:
      

      • Reading
      • Coding
      • Traveling

      Name	Age
      Alice	30

      5. गृहकार्य

      छात्रों को अपने वेबपेज का विस्तार इस प्रकार करना चाहिए:

      1. फ़ॉर्म तत्व जोड़ना जैसे चेकबॉक्स, रेडियो बटन और एक सबमिट बटन।
      2. अतिरिक्त उपयोगकर्ता जानकारी (जैसे, लिंग, शौक) एकत्र करने के लिए फ़ॉर्म को अनुकूलित करना।

      उदाहरण:
      

      Gender: Male Female

      6. अतिरिक्त सुझाव

      • छात्रों को W3C मार्कअप सत्यापन सेवा जैसे टूल का उपयोग करके अपने HTML को सत्यापित करने के लिए प्रोत्साहित करें।
      • सिमेंटिक HTML के महत्व को समझाएं और एक्सेसिबिलिटी और एसईओ के लिए सही टैग का उपयोग क्यों मायने रखता है।

      सारांश

      • छात्र शीर्षक, पैराग्राफ, चित्र और लिंक जैसे बुनियादी HTML टैग की समीक्षा करेंगे।
      • उन्हें मध्यवर्ती स्तर के HTML तत्वों से परिचित कराया जाएगा: फॉर्म, सूचियां और तालिकाएं।
      • व्यावहारिक अभ्यास और होमवर्क उन्हें अधिक संरचित वेबपेज बनाने में व्यावहारिक अनुभव देगा।