Inline & Block Elements Free web designing Course Tutorials #9
Inline & Block Elements
अंतिम ट्यूटोरियल में, हमने फॉर्म और इनपुट टैग पर चर्चा की है। यहां, हम यह समझने जा रहे हैं कि इनलाइन और ब्लॉक तत्व क्या हैं। इस ट्यूटोरियल को tut9.html के रूप में एक नई फ़ाइल बनाकर और HTML के मूल बॉयलरप्लेट को जोड़कर शुरू करते हैं। फिर <शीर्षक> टैग में शीर्षक "इनलाइन और ब्लॉक एलिमेंट्स" के रूप में रखें।
इनलाइन तत्व वे तत्व होते हैं जो केवल तत्व को परिभाषित करने वाले टैग द्वारा बंधे हुए स्थान पर कब्जा कर लेते हैं, बजाय तत्व के प्रवाह को तोड़ने के। दूसरी ओर, ब्लॉक-स्तरीय तत्व अपने मूल तत्व के पूरे स्थान को ग्रहण करते हैं। आइए इसे एक उदाहरण से समझते हैं-
यदि हम पैराग्राफ टैग में कोई पाठ इस तरह लिखते हैं-
<p>This is a paragraph</p>
<p>This is also a paragraph</p>
OR
<p>This is a paragraph</p> <p>This is also a paragraph</p>
उपरोक्त दोनों उदाहरणों में, हम आउटपुट को दोनों अलग-अलग लाइनों में देखेंगे, एक ही लाइन में नहीं। हम दोनों ग्रंथों को एक ही पंक्ति में चाहते हैं लेकिन ऐसा नहीं है। क्या आप सोच सकते हैं कि क्यों?
इसका कारण यह है कि पैराग्राफ टैग एक ब्लॉक तत्व है। ब्लॉक एलिमेंट का मतलब है कि यह एक सिंगल लाइन की पूरी चौड़ाई लेगा और किसी अन्य कंटेंट को इसमें फिट नहीं होने देगा। लेकिन, अगर हम <span> टैग के बीच दोनों ग्रंथ लिखते हैं, जैसे-
<span>This is a paragraph</span> <span>This is also a paragraph</span>
तब हम देखते हैं कि दोनों ग्रंथ एक ही पंक्ति में दिखाई देंगे। ऐसा इसलिए है क्योंकि <span> टैग एक इनलाइन तत्व है। यह एक ही पंक्ति में सभी तत्वों को अनुमति देता है।
इसे और समझने के लिए, हम सीमा लागू करके CSS की मदद ले सकते हैं। हालाँकि, आपको सीमा के बारे में चिंता करने की आवश्यकता नहीं है क्योंकि यह सीएसएस का एक हिस्सा है। मैं इसे केवल एक उदाहरण के मामले के लिए उपयोग कर रहा हूं।
<p style= “border: 2px solid, red;”>This is a paragraph</p> <p style= “border: 2ox solid blue;”>This is also a paragraph</p>
<span style= “border: 2px solid red;”>This is a span</span> <span style = “border: 2px solid red;”>This is also a span</span>
लाइव सर्वर में उपरोक्त कोड का परीक्षण करने के बाद, आपको इनलाइन और ब्लॉक तत्वों के बीच मुख्य अंतर पता चल जाएगा।
उपरोक्त उदाहरण दिखाता है कि इनलाइन तत्व केवल पाठ के अपने हिस्से को कैसे लेगा जबकि ब्लॉक तत्व लाइन की पूरी चौड़ाई लेगा। आप इसे सीएसएस के माध्यम से विभिन्न रंगों की सहायता से अधिक समझेंगे। एंकर <a> टैग भी एक इनलाइन तत्व की तरह व्यवहार करता है।
हमारे पाठ को एक पंक्ति में प्रदर्शित करने के दो अलग-अलग विकल्प हैं। पहले एक या तो सीएसएस की मदद से सीमाओं के माध्यम से या इनलाइन तत्वों की मदद से किया जाता है। जैसा कि हम इस ट्यूटोरियल के अंत तक पहुँच चुके हैं, मैं चाहता हूँ कि आप यह पता लगा लें कि क्या ली, ईएम, डिव इनलाइन या ब्लॉक एलिमेंट्स हैं।
इसलिए, मेरा मानना है कि अब तक आप इनलाइन और ब्लॉक तत्वों के बीच के प्रमुख अंतर को समझ गए होंगे। इस संपूर्ण वेब डेवलपमेंट Bootcamp में और चीजें सीखने के लिए पाठ्यक्रम के साथ बने रहें।
Code as described:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Inline and Block elements</title>
</head>
<body>
<strong style="border: 2px solid red;">this is a paragraph</strong> <a style="border: 2px solid blue;">
this is also a paragraph</a>
<span style="border: 2px solid red;">this is a span</span> <span style="border: 2px solid red;">this is also a span</span>
li, em, div, img
</body>
</html>
