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
Inline Level HTML Elements in Category: एचटीएमएल by amit
🕙 Posted on 2023-04-11 at 18:39:55
इनलाइन स्तर (Inline Level) HTML तत्व:
इनलाइन लेवल HTML तत्वों को, आम तौर पर, BLOCK LEVEL तत्व के अंदर इस्तेमाल होने चाहिए, ताकि टेक्स्ट, इमेज आदि सही तरीके से दिखाए जा सकें। विभिन्न इनलाइन स्तर के एचटीएमएल तत्वों को नीचे समझाया गया है:
<p> पैराग्राफ तत्व </p> एक BLOCK स्तर का HTML तत्व है, और पैराग्राफ तत्व के अंदर सामग्री, टेक्स्ट आदि <br /> (एक तरह का खाली HTML तत्व) <!-- 1 --> के साथ एक लाइन ब्रेक करेंगे। इस प्रकार, आप <br /> को INLINE LEVEL तत्व के रूप में कह सकते हैं।
PARAGRAPH, HEADINGS, DIV और अन्य इनलाइन स्तर तत्वों के अंदर spacebar और Enter कुंजियों के साथ किसी भी रिक्त (खाली) स्थान या लाइन-ब्रेक को वेब-ब्राउज़र द्वारा पहचाना नहीं जाएगा <!-- 2 -->।
<pre> PRE-FORMATTED तत्व </pre> को छोड़कर अन्य सभी HTML तत्व के अंदर खाली (सफ़ेद)-स्पेस बनाने के लिए का उपयोग किया जाता है <!-- 3 -->। आपको आमतौर पर खाली (सफ़ेद)-स्पेस बनाने के लिए और न्यू-लाइन को बनाने के लिए PRE-FORMATTED टैग का उपयोग करना चाहिए।
हालांकि, जब आप किसी CMS (सामग्री प्रबंधन प्रणाली Content Management System, उदाहरण के लिए, वर्डप्रेस, या कस्टम डिज़ाइन CMS) में काम कर रहे हैं, तो आप Enter/ Return और spacebar कुंजियों के साथ लाइन-ब्रेक और रिक्त स्थान सम्मिलित कर सकते हैं, क्योंकि PHP में htmlentities() जैसे फ़ंक्शन या पायथन, आदि में अन्य समान फ़ंक्शन का CMS द्वारा उपयोग किया जाता है।
<hr /> एक क्षैतिज रेखा खींचने के लिए एक ब्लॉक-स्तरीय तत्व है, और इसे केवल BOX प्रकार के HTML तत्वों के अंदर डाला जाना चाहिए ( पिछला पृष्ठ देखें )। <p> पैराग्राफ </p> तत्व, के अंदर <hr /> टैग डालने पर आपका वेब-ब्राउज़र <p> ओपनिंग टैग को </p> के साथ समाप्त/बंद कर देगा।
आप ऊपर और इस लाइन में अलग-अलग फॉन्ट स्टाइल देख सकते हैं, क्योंकि <hr /> (एक तरह का खाली HTML तत्व) <p> Paragraph Element </p> के अंदर डाला गया है। आप अपने माउस को अपने वेब-ब्राउज़र जैसे, Google Chrome, के ऊपर-दाईं ओर ले जाकर, और ⋮ (शीर्ष-दाईं ओर) ⇒ More Tools ⇒ डेवलपर टूल (Developer Tools) पर बाएं माउस बटन से क्लिक करें या Ctrl Shift i कुंजियों को दबाकर भी इसका निरीक्षण कर सकते हैं।
<pre> Pre Formatted Texts </pre> भी BLOCK लेवल का HTML एलिमेंट है।
<span> </span> एक इनलाइन स्तर का HTML तत्व है, जो DIV तत्व की तरह व्यवहार करता है। इसका भी अन्य BOX प्रकार के HTML तत्वों की तरह, कोई दृश्य अस्तित्व नहीं है। यह भी बच्चों (अर्थात इसके अंदर की सामग्री / पाठ) का प्रतिनिधित्व करता है।
पिछले पृष्ठ में , आपने देखा है कि DIV तत्व (एक ब्लॉक स्तर तत्व) का उपयोग इनलाइन HTML तत्व के रूप में भी किया जा सकता है, क्योंकि DIV कुछ भी नहीं है, लेकिन यह भी इसके बच्चों का प्रतिनिधित्व करता है, और निम्नलिखित कोड उसी की व्याख्या करता है:
<!DOCTYPE html><html lang="en">
<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>
<style type="text/css">
/* === EMBEDDED CSS STYLES === */
h1 { color: khaki; }
.heading { color: red; }
#id_head { color: green; }
</style>
</head>
<body>
<h1 style="color: blue;" id="id_head" class="heading">Exercise: Inline Level HTML element</h1>
<!-- 2. रिक्त स्थान --> <p> यह पाठ की एक पंक्ति है जिसमें एकाधिक (रिक्त) श्वेत-स्थान दिखाई नहीं देते हैं। </p>
<!-- 1, 3 --> <p> यह पाठ की कई (रिक्त) सफेद स्थान और (उसके अंदर) एक लाइन-ब्रेक <br /> के साथ एक पंक्ति है। </p>
<!-- <pre> </pre> तत्व को छोड़कर, जैसा कि ऊपर बताया गया है, HTML एलिमेंट के अंदर खाली (सफ़ेद)-स्पेस और लाइन-ब्रेक, और <br /> के द्वारा डाला जाता है। -->
<pre>
This is a pre-formatted
line of text.
</pre>
<!-- सावधान: याद रखें, जब आप किसी टेक्स्ट/कोड संपादक (वीएसकोड संपादक सहित) में काम करते समय इंडेंटेशन जोड़ते हैं, तो <pre> </pre> उन इंडेंटेशन को भी जोड़ देगा और टेक्स्ट/सामग्री अप्रत्याशित रूप से अजीब दिखाई देगी। -->
<div><!-- start: Outer DIV -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis accusantium at blanditiis quasi tempora doloremque distinctio perferendis corporis architecto quo repudiandae aperiam officiis, reiciendis soluta delectus numquam placeat.</p>
<div style="background-color: pink; float: right; width: 300px;"><!-- start: इनर / नेस्टेड DIV - CSS में
float property का उपयोग width property के साथ किया जाना चाहिए, और आप देखेंगे कि उस HTML तत्व के अंदर की सामग्री को बाएँ या दाएँ ले जाया गया है। --><p>At illo temporibus tenetur hic architecto earum quas fugit, quasi enim soluta unde praesentium aut maiores recusandae voluptatum magnam eum, odio modi omnis numquam?</p>
<p>Ratione illum minima, incidunt et adipisci reiciendis voluptatum eum repudiandae impedit, maxime sed qui rerum temporibus animi consectetur quia iusto vero dolorem veritatis consequatur explicabo soluta mollitia eius? Soluta, ad.</p>
</div><!-- end: Nested / Inner DIV -->
<p>Illo quos voluptates, id nam recusandae provident veritatis? Ipsum temporibus similique voluptates excepturi eum? Voluptates necessitatibus quasi voluptatibus.</p>
</div><!-- end: Outer DIV -->
<div><!-- start: 2nd Outer DIV - in this illustration, don't use <p> </p> element, because it is also a BLOCK level element. -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis accusantium at blanditiis quasi tempora doloremque distinctio perferendis corporis architecto quo repudiandae aperiam officiis, reiciendis soluta delectus numquam placeat.
<div style="background-color: yellow; display: inline;"><!-- start: Inner / Nested DIV -->
At illo temporibus tenetur hic architecto earum quas fugit, quasi enim soluta unde praesentium aut maiores recusandae voluptatum magnam eum, odio modi omnis numquam?
<!-- 2. new line --> <!-- Create next line with
Enter or Return key -->Ratione illum minima, incidunt et adipisci reiciendis voluptatum eum repudiandae impedit, maxime sed qui rerum temporibus animi consectetur quia iusto vero dolorem veritatis consequatur explicabo soluta mollitia eius? Soluta, ad.
</div><!-- end: Nested / Inner DIV -->
Illo quos voluptates, id nam recusandae provident veritatis? Ipsum temporibus similique voluptates excepturi eum? Voluptates necessitatibus quasi voluptatibus.
</div><!-- end: 2nd Outer DIV -->
<script type="text/javascript">
// JavaScript codes ...
</script>
</body>
</html>
स्पष्टीकरण:
उपरोक्त उदाहरण में, आप देख सकते हैं कि पहले <p> </p> तत्व, ( <h1></h1> के ठीक बाद) में कई रिक्त (खाली
<pre> </pre> के अंदर अतिरिक्त व्हाइट-स्पेस और (Enter कुंजी के साथ) न्यू-लाइन वाले टेक्स्ट वेब-ब्राउज़र में दिखाए जाते हैं, उतने ही व्हाइट-स्पेस और न्यू-लाइन के साथ जो spacebar और Enter कुंजियों के साथ कीबोर्ड से डाला जाता है।
पहले बाहरी DIV के अंदर नेस्टेड DIV (गुलाबी पृष्ठभूमि वाले) को दाईं ओर ले जाया गया है।
दूसरे बाहरी DIV के अंदर नेस्टेड DIV (YELLOW बैकग्राउंड वाला) इसके बाहर के पिछले और अगले TEXTS (सामग्री) के साथ संलग्न है। ( उदाहरण पृष्ठ में परिणाम देखें।)
REMEMBER: प्रत्येक HTML तत्व, (चाहे ब्लॉक स्तर या इनलाइन स्तर) के अपने स्वयं के डिफ़ॉल्ट गुण होते हैं (अलग-अलग वेब ब्राउजर द्वारा अलग-अलग निर्धारित assign किए जाते हैं)। आप स्वयं भी टेक्स्ट को डिफ़ॉल्ट गुण दे सकते हैं जैसे कि आपके वेब-ब्राउज़र में उनका आकार कितना है, कौन से फ़ॉन्ट-फ़ैमिली को डिफ़ॉल्ट के रूप में प्रदर्शित किया जाना चाहिए, आदि। आप अपने माउस को अपने वेब-ब्राउज़र जैसे, Google Chrome, के ऊपर-दाईं ओर ले जाकर, और ⋮ (शीर्ष-दाईं ओर) ⇒ Settings ⇒ Appearance ⇒ Customize fonts (फोंट अनुकूलित करें) पर बाएं माउस बटन से क्लिक करें ।
आपको इन सेटिंग्स को नहीं बदलना चाहिए, विशेष रूप से फ़ॉन्ट-आकार को Tiny (9) या Huge (72) में, अन्यथा आप प्रत्येक वेबसाइट या वेब-पेज के बहुत छोटे फ़ॉन्ट-आकार या बहुत बड़े फ़ॉन्ट-आकार देखेंगे। यदि आप किसी परिवर्तन से असहज हैं, तो अपने वेब-ब्राउज़र की सभी सेटिंग रीसेट करें।
Leave a Comment:
Amit Sinha March 2nd, 2023 at 9:30 PM
😃 😄 😁 😆 😅 😂 😉 😊 😇 😍 😘 😚 😋 😜 😝 😶 😏 😒 😌 😔 😪 😷 😵 😎 😲 😳 😨 😰 😥 😢 😭 😱 😖 😣 😞 😓 😩 😫 😤
Ribhu March 3rd, 2023 at 9:30 PM
🐵 🐒 🐶 🐩 🐺 🐱 🐯 🐅 🐆 🐴 🐎 🐮 🐂 🐃 🐄 🐷 🐖 🐗 🐽 🐏 🐑 🐐 🐪 🐫 🐘 🐭 🐁 🐀 🐹 🐰 🐇
