payment by upi: sinhamit@icici or payment by bank account name: amit kumar sinha, account number: 2646728782 IFSC code: KKBK0005660 SWIFT: KKBKINBB

Please support if you like my work by payment through upi: sinhamit@icici or payment by bank

account name: Amit Kumar Sinha,
account number: 2646728782
IFSC code: KKBK0005660
SWIFT: KKBKINBB


HTML Elements   in Category: एचटीएमएल   by amit

🕙 Posted on 2023-04-07 at 18:31:30


महत्वपूर्ण HTML टैग/तत्व

    आपने <head> </head> एलिमेंट के अंदर कई तरह के HTML टैग्स और एलिमेंट्स का इस्तेमाल देखा होगा। अब, हमें <body> </body> एलिमेंट के अंदर उपयोग किए जाने वाले विभिन्न HTML एलिमेंट्स पर ध्यान देना चाहिए । <body> </body> तत्व के अंदर कोड और सामग्री (texts) ब्राउज़र पर प्रदर्शित करने के लिए उपयोग किए जाते हैं। इन HTML एलिमेंट्स, टैग्स और जावास्क्रिप्ट कोड का उपयोग CSS स्टाइल रूल्स के साथ किया जाता है, जो उन कोड और उनके अंदर के सामग्री को सुंदर और अच्छा बनाते हैं।

HTML कंटेनर: बॉक्स (ब्लॉक-स्तर) तत्व

    इन HTML तत्वों का उपयोग बॉक्स के रूप में, कई तरह के HTML तत्वों को शामिल करने के लिए, किया जाता है। बॉक्स प्रकार HTML तत्वों को उनके पृष्ठभूमि-रंगों को छोड़कर, ब्राउज़रों में प्रदर्शित नहीं किया जा सकता है। इन एचटीएमएल तत्वों के अंदर सामग्री (पाठ सहित) सीएसएस और जावास्क्रिप्ट कोड के साथ या उनके बिना प्रदर्शित की जाती है।

    ये तत्व हैं: <body></body> , <div></div> , <section></section> , <article></article> , <aside></aside> , <nav></nav> , <main></main> , <header></header> , <footer></footer> , <blockquote></blockquote> , आदि।

    इनमें से कई HTML तत्वों को सिमेंटिक तत्वों के रूप में भी जाना जाता है, जो आपकी वेबसाइट/वेब-पेज के अनुकूलन के लिए खोज इंजनों की सहायता करते हैं। आपको <main></main> और <h1></h1> HTML तत्वों का उपयोग केवल एक बार करना चाहिए क्योंकि सर्च इंजन और स्क्रीन रीडर (शारीरिक रूप से विकलांग लोगों के लिए) आपके WEB-PAGE को ऑप्टिमाइज़ करेंगे। बॉक्स तत्वों का एक सरल उदाहरण नीचे दिखाया गया है:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
name="viewport" content="width=device-width, initial-scale=1" />
    <title>R.I.B.H.U. Academy</title>
    <!-- आप नीचे देख सकते हैं कि और विशेषताएँ जोड़ी जा सकती हैं। -->
    <link rel="stylesheet" media="screen" type="text/css" href="./css/mystyle.css" />
    <style>

        /* === EMBEDDED CSS STYLES === */
        h2 { color: green; }
    </style>
  </head>
<body>
BODY तत्व के अंदर सामग्री (पाठ, चित्र, वीडियो, ऑडियो, ग्राफिक्स / वैक्टर, आदि) वेब-ब्राउज़र में निम्न में से किसी बॉक्स के साथ या उसके बिना भी दिखाई देंगे, जब तक कि HTML टिप्पणी टैग के अंदर रखे नहीं जाते। <h2> </h2> एक HTML तत्व है, जिसकी व्याख्या नीचे की गई है। यह एक बॉक्स / कंटेनर प्रकार का तत्व नहीं है, जिसमें अन्य ब्लॉक-स्तरीय HTML तत्व रखे जा सकते हैं।
<div>
<header>
<section>
<h1>Top Heading: Branding</h1>
</section>
<nav>
<ul><li>Menu 1</li><li>Menu 2</li><li>Menu 3</li></ul>
</nav>
</header>
<main>
<article>
<section>
<h2>Heading 1</h2><p>Paragraph ...</p>
</section>
</article>
</main>
<article>
<section>
<h2>Heading 2</h2><p>Paragraph ...</p>
</section>
<section>
<h2>Heading 3</h2><p>Paragraph ...</p>
</section>
</article>
<aside>
<section>
<h3>Sidebar</h3>
</section>
</aside>
<footer>
<section>
<h3>Foot Notes</h3>
</section>
</footer>
</div>
इन बक्सों को एक दूसरे के अंदर नेस्ट किया जा सकता है, और ये जटिल हो सकते हैं। CSS और JavaScript कोड की मदद से आप इन बॉक्स को एक दूसरे पर ओवरलैप, मूव, रोटेट, स्केल कर सकते हैं।
    <script type="text/javascript">
        // javascript codes ...
    </script>
</body>
</html>

HTML शीर्षक तत्व

    छह प्रकार के HTML शीर्षक तत्व हैं, जो ब्लॉक-स्तरीय तत्व हैं, और केवल उच्च-स्तरीय (बॉक्स या कंटेनर प्रकार) HTML तत्वों के अंदर ही उपयोग किए जा सकते हैं, जैसा कि उपरोक्त उदाहरण में दिखाया गया है।

<h1>R.I.B.H.U. Academy</h1>

<h2>R.I.B.H.U. Academy</h2>

<h3>R.I.B.H.U. Academy</h3>

<h4>R.I.B.H.U. Academy</h4>

<h5>R.I.B.H.U. Academy</h5>
<h6>R.I.B.H.U. Academy</h6>

अन्य ब्लॉक स्तरीय तत्व हैं:

<p> </p> PARAGRAPH TAG: इनका उपयोग अक्सर <body> </body> तत्व के अंदर कुछ पाठ लिखने के लिए किया जाता है। <p> </p> एलिमेंट को केवल बॉक्स-टाइप एलिमेंट्स के अंदर नेस्ट किया जा सकता है, जैसा कि ऊपर बताया गया है।

<pre> </pre> पूर्व-स्वरूपित TAG: इस तत्व का उपयोग पुराने दिनों में किया जाता था जब मोबाइल फोन नहीं थे। अब, जैसा कि आप इस WEB-PAGE में उपयोग किए गए <pre> </pre> ELEMENT को देखते हैं, बूटस्ट्रैप फ्रेमवर्क एक क्षैतिज स्क्रॉल-बार बनाता है, और सामान्य तौर पर, आपको बहुत लंबी लाइन दिखाई देगी। <pre> </pre> एलिमेंट को केवल बॉक्स-टाइप एलिमेंट्स के अंदर नेस्ट किया जा सकता है, जैसा कि ऊपर बताया गया है।
<div> </div> DIV टैग्स: इन्हें अक्सर <body> </body> तत्व के अंदर कंटेनर के रूप में उपयोग किया जाता है, कई तत्वों, यहां तक ​​कि <div> </div> टैग को संलग्न करने के लिए। जैसा कि ऊपर बताया गया है, इन तत्वों को केवल बॉक्स-प्रकार तत्वों के अंदर नेस्ट किया जा सकता है।

Leave a Comment: