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

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

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

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

<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 के साथ जोड़ा जा सकता है. ऊपर दिए गए उदाहरण में, आपको एक iframe में Wikipedia यूआरएल दिखता है, जिसका शीर्षक "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> एलिमेंट, सेल बनाता है और उसमें ज़रूरी कॉन्टेंट जोड़ता है.

नतीजा

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