अतिरिक्त एचटीएमएल एलिमेंट

पिछली गतिविधियों में आपने सीखा:

  • एचटीएमएल टैग और एलिमेंट के बारे में बुनियादी बातें.
  • वेब पेज को स्ट्रक्चर करने का तरीका.
  • सिमैंटिक एचटीएमएल और सबसे सही तरीके.

इस लेख में, एचटीएमएल के बारे में अपनी जानकारी को बेहतर बनाया जा रहा है और अतिरिक्त एचटीएमएल एलिमेंट को कवर किया जा सकता है.

टेक्स्ट कॉन्टेंट के एलिमेंट

<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>

इन एलिमेंट से टेक्स्ट कॉन्टेंट बनाया जा सकता है. साथ ही, कॉन्टेंट का स्ट्रक्चर, स्टाइल, और मतलब भी जोड़ा जा सकता है. टेक्स्ट कॉन्टेंट के ऐसे कई हिस्से हैं जिनमें नीचे दिए गए एलिमेंट शामिल हो सकते हैं.

ब्लॉककोट एलिमेंट

<blockquote cite="https://www.goodreads.com/quotes">
    <p>Be the change that you wish to see in the world.</p>
</blockquote>

इस उदाहरण में, <blockquote> एलिमेंट को इस्तेमाल करने का तरीका बताया गया है. इसमें महात्मा गांधी के एक मशहूर विचार को दिखाया गया है. ऐसे कई बेहतरीन कोटेशन हैं जो यादगार कॉन्टेंट और मतलब बताते हैं. अपने कुछ पसंदीदा, प्रेरणा देने वाले लोगों और उनसे जुड़े कोट के बारे में सोचें.

किसी सोर्स से कोटेशन और रेफ़रंस देने वाली जानकारी का इस्तेमाल करते समय, <blockquote> एलिमेंट का इस्तेमाल करें. <blockquote> एलिमेंट, प्रज़ेंटेशन में एक यूनीक इंडेंट और अलाइनमेंट बनाता है. साथ ही, ओपनिंग और क्लोज़ टैग, दोनों का इस्तेमाल करता है. <blockquote> खास तौर पर तब मददगार होता है, जब टेक्स्ट की कई लाइनों को कवर करने वाले लंबे कोटेशन का इस्तेमाल किया जाता है.

<blockquote> एलिमेंट में कई एलिमेंट इस्तेमाल किए जा सकते हैं, जैसे कि हेडर, पैराग्राफ़ या सूची.

<details> एलिमेंट

<details>
   <summary>Details</summary>
   Additional Information
</details>

अक्सर, वेब पेज पर अक्सर पूछे जाने वाले सवालों का एक सेक्शन होता है. साथ ही, इसमें ऐसी अतिरिक्त जानकारी होती है जो उपयोगकर्ता के लिए उपलब्ध होती है. अक्सर पूछे जाने वाले सवालों वाले सेक्शन में प्रॉडक्ट की जानकारी, यात्रा की योजना या किसी भी तरह के सवाल-जवाब वाले सेक्शन होते हैं.

<details> एलिमेंट, ज़्यादा जानकारी देने वाले विजेट का इस्तेमाल करने में मदद करता है. एलिमेंट में पहले से मौजूद टॉगल फ़ंक्शन शामिल है. साथ ही, उपयोगकर्ता टॉगल को खोल और बंद कर सकता है. टॉगल चालू होने पर, ज़्यादा जानकारी वाला कॉन्टेंट बड़ा हो जाता है और उपयोगकर्ता उसे पढ़ सकता है. टॉगल को बंद करने पर, ज़्यादा जानकारी वाला कॉन्टेंट उपयोगकर्ता को नहीं दिखता. <details> विजेट को नाम देने के लिए, <summary> एलिमेंट का इस्तेमाल करें. 

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
     alt="Google logo">
  <figcaption>Google logo</figcaption>
</figure>

यह <figure> एलिमेंट है, जिसका इस्तेमाल किया जा रहा है. यहां आपको दिख रहा है कि <figcaption> एलिमेंट के साथ इस्तेमाल किए जाने वाले <figure> का इस्तेमाल, विज़ुअल अनुभव को बेहतर बनाने के लिए किया जा सकता है.

आपको पूरे वेब में मौजूद इमेज और अन्य मददगार विज़ुअल डेटा हमेशा दिखता है. विज़ुअल एलिमेंट, वेबसाइट पर आने वाले लोगों का ध्यान खींचने और उन्हें शानदार उपयोगकर्ता अनुभव देने में मदद करते हैं. <figure> एलिमेंट की मदद से किसी इमेज, टेबल, चार्ट वगैरह को लेबल किया जा सकता है. यह एलिमेंट, मुख्य कॉन्टेंट के हिसाब से खुद को शामिल करने वाला कॉन्टेंट बनाता है.

<time> एलिमेंट

<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>

<time> एलिमेंट, मतलब और सिमैंटिक, दोनों तरह का मतलब बताता है. इससे, ऑनलाइन अपॉइंटमेंट शेड्यूल करने, ब्लॉग लेख के लिए तारीख और समय पब्लिश करने, और ब्लॉग लेख के लिए तारीख और समय पब्लिश करने जैसी गतिविधियों में बेहतर सुविधाएं मिलती हैं. <time> एलिमेंट का इस्तेमाल करने वाली वेबसाइटों के कुछ उदाहरणों में Google कैलेंडर का इस्तेमाल करना, प्लैटफ़ॉर्म पर लेख को लाइव पब्लिश करना या लाइब्रेरी की वेबसाइट से पुराने ऐतिहासिक संग्रहों को ऑनलाइन पढ़ना शामिल है.

<time> एलिमेंट, समय के बारे में बताता है. यह 24 घंटे या किसी ऐसी तारीख के लिए समय दिखा सकता है जिसमें टाइमज़ोन और जगह के हिसाब से बदलाव किया जा सकता है. इस एलिमेंट के लिए ओपन और क्लोज़ टैग, <time> और </time>, दोनों की ज़रूरत होती है. आप datetime एट्रिब्यूट जोड़ सकते हैं, ताकि तारीखों को मशीन से पढ़ने लायक फ़ॉर्मैट में पढ़ा जा सके.

दस्तावेज़ का मेटाडेटा

<title>Sarah's Favorite Food Recipes</title>

जब भी वेबसाइट का यूआरएल टाइप किया जाता है, तब एक <title> नाम दिखता है. इसे ब्राउज़र के बार या वेब पेज टैब में देखा जा सकता है. यह किसी वेब पेज के लिए आपको दिखने वाला टाइटल का नाम होता है. यह एलिमेंट ज़रूरी है. सर्च इंजन इसका इस्तेमाल, खोज के नतीजों में मिलते-जुलते वेब पेजों की सूची दिखाने के लिए करता है. शीर्षक की लंबाई छोटे और जानकारी देने वाले से लेकर लंबे और ज़्यादा जानकारी देने वाले तक हो सकती है.

स्थिति: आपके पास एक ऐसा वेब पेज है जिसके बारे में आप सोच रहे हैं, लेकिन आपको उस वेबसाइट का यूआरएल याद नहीं है. किसी सर्च इंजन में कीवर्ड टाइप करें. सर्च इंजन उस वेब पेज को ट्रैक करने में मदद करता है जिसे आपको ढूंढना है. साथ ही, खोज के नतीजों में <title> का नाम भी देखा जा सकता है.

एम्बेड किए गए कॉन्टेंट एलिमेंट

टेक्स्ट कॉन्टेंट के अलावा, कई ऐसे अन्य कॉन्टेंट भी होते हैं जिनका इस्तेमाल करना चाहिए.

<iframe> एलिमेंट

<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>

ऑनलाइन खरीदारी करते समय और पैसे चुकाने के विकल्प, जैसे कि PayPal या Apple Pay पर क्लिक करते समय, ये सुविधाएं आम तौर पर <iframe> के साथ वेब पेज पर जुड़ जाती हैं. किसी स्थानीय व्यवसाय को खोजने के लिए ऑनलाइन कोई मैप देखना एक अन्य सामान्य अनुभव है. किसी वेब पेज पर इस तरह के उपयोगकर्ता अनुभव, iframe के साथ जोड़े जा सकते हैं. ऊपर दिए गए उदाहरण में, आपको Wikipedia के यूआरएल को एक iframe में दिखाया गया है. इस iframe का टाइटल "Wikipedia" है.

<iframe> एलिमेंट की मदद से, किसी अन्य सोर्स से कॉन्टेंट शामिल किया जा सकता है और वेब पेज में एक फ़्रेम जोड़ा जा सकता है. इससे एक आयताकार फ़्रेम बनता है और ब्राउज़र में कॉन्टेंट दिखता है. फ़्रेम की मदद से, <iframe> एलिमेंट में विंडो के आकार का लेआउट दिखाया जा सकता है. यह अनुभव को बेहतर बनाने के लिए, अपने वेब पेज पर कॉन्टेंट जोड़ने का एक बेहतरीन तरीका है.

फ़ॉर्म के एलिमेंट

<progress max="100" value="30"> 30% </progress>

लंबा वीडियो देखते समय, लेक्चर देते समय या किसी बहुत बड़े ऐप्लिकेशन में फ़ॉर्म भरते समय, विज़ुअल प्रोग्रेस बार का इस्तेमाल करें. इससे आपकी प्रोग्रेस ट्रैक करने में मदद मिलेगी. इस तरह के मामलों में <progress> एलिमेंट मददगार होता है.

इस एलिमेंट को बैकग्राउंड के रंग वाले विज़ुअल बार के रूप में दिखाया गया है. विज़ुअल बार का साइज़ और बैकग्राउंड रंग अलग-अलग हो सकता है. प्रोग्रेस बार की मदद से, max और value एट्रिब्यूट का इस्तेमाल किया जा सकता है. हालांकि, ऐसा करना ज़रूरी नहीं है. max एट्रिब्यूट फ़्लोटिंग पॉइंट नंबर सेट करता है. साथ ही, value एट्रिब्यूट यह बताता है कि किसी टास्क में कितनी प्रोग्रेस हुई है.

स्क्रिप्ट तैयार करना

<canvas id="canvas"></canvas>

रीयल टाइम में ग्राफ़िक और ऐनिमेशन बनाने के लिए, <canvas> एलिमेंट का इस्तेमाल करें. कैनवस बनाने के लिए, अपने एचटीएमएल वेब पेज में <canvas> एलिमेंट रखें. ग्राफ़िक बनाने और बनाने के लिए, इस एलिमेंट को JavaScript कोड की ज़रूरत होती है.

टेबल के कॉन्टेंट के एलिमेंट

<table>
    <thead>
        <tr>
            <th colspan="2">Grocery List</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Broccoli</td>
            <td>Quantity: 2</td>
        </tr>
    </tbody>
</table>

<table> एलिमेंट

<table> एलिमेंट एक टेबल बनाता है. पंक्तियों और कॉलम के साथ अतिरिक्त एलिमेंट जोड़ने का यह शुरुआती पॉइंट है. टेबल अक्सर वेब पेजों पर दिखती हैं. ये जानकारी व्यवस्थित करने और दिखाने का एक मददगार तरीका हैं. <table> एलिमेंट का इस्तेमाल करने का एक उदाहरण यह है कि आप उपयोगकर्ताओं को टेबल के फ़ॉर्मैट में जानकारी दें. जैसे, स्प्रेडशीट में किस तरह की जानकारी मिल सकती है.

<th> एलिमेंट

<th> एलिमेंट, सेल के ग्रुप का हेडर होता है.

<tr> एलिमेंट

<tr> एलिमेंट, टेबल में सेल की पंक्ति के बारे में बताता है. यहां से, किसी खास सेल का डेटा जोड़ा जा सकता है.

<td> एलिमेंट

<td> एलिमेंट ज़रूरी कॉन्टेंट जोड़ते हुए सेल बनाता है.

नतीजा

इस लेख में, आपको अतिरिक्त एचटीएमएल एलिमेंट के बारे में बताया गया है. साथ ही, कोडिंग करने के अपने कौशल के आधार पर इसे तैयार किया गया है. आपने कॉन्टेंट, इनलाइन टेक्स्ट, एम्बेड किए गए कॉन्टेंट, और टेबल एलिमेंट के बारे में ज़्यादा जाना. अब आपको अतिरिक्त एचटीएमएल एलिमेंट के बारे में जानकारी मिल चुकी है. बढ़िया काम करते रहें!