डिवेल टैग एचटीएमएल के लेआउट को ब्लॉक करें

अभी भी कुछ दस साल पहले सबसे पहलेअक्सर तथाकथित टेबल लेआउट का उपयोग किया जाता है इस तथ्य को ध्यान में रखते हुए कि कुछ ब्राउज़रों के मानकों को एक-दूसरे से काफी भिन्नता थी, हमें एक ऐसे समाधान की तलाश करना था जो सभी एप्लिकेशन में इंटरनेट दस्तावेज़ को सही तरीके से प्रदर्शित करने की अनुमति दे सके। लेकिन समय बीत गया, मानकों का विकास हुआ, और एक कठोर और अनम्य टैब्यूलर को एक अच्छी तरह से समायोजित और उत्तरदायी ब्लॉक लेआउट द्वारा बदल दिया गया। इस तकनीक के सबसे आगे में <div> तत्वों का उपयोग करने का सिद्धांत है एचटीएमएल-दस्तावेजों को अलग-अलग ब्लॉकों के आधार पर बनाया जाना शुरू किया गया था, जो टेबल लेआउट के विपरीत, एक दूसरे से स्वतंत्र हो सकता है।

उद्भव

वेब पृष्ठों को जटिल बनाना और एक कंप्यूटर विकसित करनातकनीक ने इस तथ्य को प्रेरित किया है कि वेब दस्तावेज़ को दो भागों में विभाजित किया गया था - एक कंकाल (एचटीएमएल-कोड) और डिज़ाइन (स्टाइल शीट)। इसके लिए धन्यवाद, हमने वेब के एक अभूतपूर्व विकास को हासिल करने में कामयाब रहे, जिसके परिणामस्वरूप हम अब सबसे आधुनिक साइटों पर देख सकते हैं। विकास प्रक्रिया में सुधार के अलावा <div> एचटीएमएल प्रत्येक व्यक्ति के तत्व के लिए परिभाषित करने की अनुमति देता है इसके डिजाइन नियम इसने वेब पेज के कोड की पठनीयता में सुधार करने और दस्तावेज़ के लोड समय को कम करने में मदद की। अब खोज इंजन साइट पर उपलब्ध जानकारी को बहुत तेज़ और बेहतर प्रसंस्करण कर रहे हैं।

मानक और सत्यापन

HTML में <div> टैग सख्त में उपयोग किया जाता हैडब्लू 3 सी (वर्ल्ड वाइड वेब कंसोर्टियम) मानकों का अनुपालन पृष्ठ कोड एक विशेष उपकरण द्वारा चेक किया गया है - सत्यापनकर्ता, जो पर्सिट (स्कैन और खोज) पृष्ठ पर हर संभव त्रुटि है। एक वैध पृष्ठ का अर्थ है कि सभी टैग सही तरीके से उपयोग किए गए हैं और मानकों की आवश्यकताओं को पूरी तरह से पूरा करते हैं।

टैग <div> आप ब्लॉकों को बनाने या उन्हें पसंद करते हैंअभी भी कहा जाता है, कंटेनर इस मामले में, व्यक्तिगत तत्वों को एक दूसरे में नेस्ट किया जा सकता है, आवश्यक संरचनाओं और जटिलताओं के ढांचे तैयार कर सकते हैं। किसी वर्ग या पहचानकर्ता द्वारा किसी एस्कॉर्ट के बिना एक <div> टैग का उपयोग लगभग कभी नहीं हुआ है यह तत्व की "बेदर्दता" के कारण है। यदि वह एक वर्ग निर्दिष्ट नहीं करता है, तो अंत में सभी कंटेनरों के समान विन्यास होंगे।

वास्तव में सही बनाने के लिएदस्तावेज़, आपको <div> class = "some_name" टैग की निम्न संरचना का उपयोग करना चाहिए स्टाइल शीट में क्लास के नाम का जिक्र करते हुए, आप दस्तावेज़ में एक अलग-अलग ब्लॉकों की स्थिति, आकार, सीसा और अन्य पैरामीटर निर्धारित कर सकते हैं।

कक्षाओं और पहचानकर्ताओं का उपयोग करना

<Div> एचटीएमएल ब्लॉक के रूप में परिभाषित किया जा सकता हैआईडी, और कक्षा पहले और दूसरे के बीच का अंतर यह है कि आईडी का उपयोग केवल दस्तावेज़ पृष्ठ पर ही किया जाता है। यही है, इसका उपयोग अनन्य तत्वों को परिभाषित करने के लिए किया जाता है जो पृष्ठ कोड में कहीं और दोहराया नहीं जाता है। वर्ग विशेषता आपको कई तत्वों के लिए एक ही शैली नियम लागू करने की अनुमति देती है। यह दृष्टिकोण बहुत ही कोड के विकास और समर्थन को सरल करता है। इसके अतिरिक्त, एक ऑब्जेक्ट में एक ही समय में कई कक्षाएं हो सकती हैं। सही मान्यता के लिए, वे केवल रिक्त स्थान से अलग होते हैं।

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

<Div> टैग HTML गुण

जैसा कि ऊपर उल्लेख किया गया है, यह टैग नहीं बदलता हैपृष्ठ के एक टुकड़े के डिजाइन, और शैली पत्रक के माध्यम से बाद के डिजाइन के साथ एक अर्थ संरचना बनाने के लिए प्रयोग किया जाता है। इस तत्व के लिए एक बंद टैग का उपयोग अनिवार्य है।

इस तथ्य के बावजूद कि कई आधुनिक ब्राउज़र इस त्रुटि की पहचान करने में सक्षम होंगे, कुछ मामलों में, एक अटैरड टैग दस्तावेज़ संरचना को अलग करने और सही ढंग से प्रदर्शित नहीं करने के कारण हो सकता है।

चूंकि यह तत्व ब्लॉक है, फिरइसमें समाहित सामग्री एक नई लाइन से शुरू होगी इस व्यवहार को बदलने के लिए, आपको प्रदर्शन संपत्ति के साथ ब्लॉक के डिस्प्ले पैरामीटर को बदलना होगा। नेस्टेड तत्वों के समूह के अलावा, <div> टैग आपको उस सामग्री के स्थान को उस प्रारूप में स्वरूपित करने देता है ऐसा करने के लिए, आप संरेखित विशेषता का उपयोग करते हैं, जो आपको बाएं, दायां या मूल तत्व के केंद्र पर पाठ या छवि रखने की अनुमति देता है।

स्थिति ब्लॉकों

स्थिति विशेषता का उपयोग आप चयनित तत्व की स्थिति निर्धारण पद्धति बदलने के लिए अनुमति देता है। इसलिए, स्थिति के तीन प्रकार हैं:

• स्थिर (स्थिर) - डिफ़ॉल्ट रूप से उपयोग किया जाता है इस मामले में, तत्व HTML कोड में स्थिति के अनुसार स्थित है।
• सापेक्ष (रिश्तेदार)। इस स्थिति में, ऑब्जेक्ट का स्थान उसी स्थिति में होता है जैसे स्थिर स्थिति के मामले में, लेकिन यह संपत्ति आपको बच्चों के लिए स्थिति बदलने की अनुमति देती है।
• निरपेक्ष (पूर्ण) इसकी स्थिति रिश्तेदार स्थिति के साथ तत्व के सापेक्ष गणना की जाती है।

अन्य विशेषताओं

प्रारंभिक बिंदु के सापेक्ष स्थिति बदलने के लिएशीर्ष और बाएं विशेषताएँ उपयोग की जाती हैं मान या तो सकारात्मक या नकारात्मक हो सकते हैं ब्लॉक तत्व की चौड़ाई और ऊंचाई क्रमशः चौड़ाई और ऊंचाई विशेषताओं द्वारा निर्दिष्ट की गई है। यदि वे स्टाइल शीट्स में निर्दिष्ट नहीं किए गए थे, ब्लॉक मूल तत्व की पूरी चौड़ाई पर कब्जा करेगा। यदि ब्लॉक सामग्री "माता पिता" की सभी चौड़ाई में फिट नहीं है, तो तत्व का व्यवहार अतिप्रवाह विशेषता से निर्धारित होता है।

हम आशा करते हैं कि इस आलेख ने एचटीएमएल में <div> के प्रश्न को समझने में सहायता की है