Ids & Classes in HTML Free web designing Course Tutorials #10
IDs and Classes in HTML
यहां, हम HTML में आईडी और कक्षाओं के बारे में जानने जा रहे हैं। आईडी एक पहचानकर्ता है जो पूरे HTML दस्तावेज़ में अद्वितीय होना चाहिए। इसका उपयोग लिंकिंग, स्क्रिप्टिंग या स्टाइलिंग के दौरान एक तत्व को खोजने के लिए किया जाता है। जबकि, कक्षाएं CSS और JavaScript को विशिष्ट तत्वों का चयन करने और उन तक पहुंचने की अनुमति देती हैं। आइए हम tut10.html के रूप में एक नई फ़ाइल बनाते हैं और मूल HTML टेम्पलेट प्राप्त करने के लिए तत्काल बॉयलरप्लेट जोड़ते हैं। वेबसाइट का शीर्षक देने के लिए HTML में Ids और Classes के रूप में <title> टैग को नाम दें।
यहाँ, मैं मूल मूल उदाहरण के साथ समझाने की कोशिश करूँगा। जब एक नया बच्चा पैदा होता है, तो हम उसे एक नाम या उसकी पहचान देने का आग्रह करते हैं, जिसके द्वारा उसे आगे जाना जाएगा। या यदि आपके पास कोई पालतू जानवर है, तो आपने उसे कॉल करने के लिए कुछ नाम दिया होगा। उसी तरह, आईडी अपनी पहचान के लिए किसी विशेष तत्व को एक नाम देने का उल्लेख करता है। यह बस एक तत्व को एक पहचान देने को संदर्भित करता है। हम जानते हैं, परिवार के किसी भी दो सदस्यों को कोई भी नाम नहीं दिया जा सकता है। उसी तरह, एक वेबसाइट पर केवल एक तत्व को एक आईडी दी जा सकती है। इसलिए, नीचे दिए गए उदाहरण में, आईडी मेनबॉक्स किसी अन्य तत्व को नहीं दिया जा सकता है।
<div id= “mainBox” class= “redBG”>
अब सवाल उठता है कि HTML में ID की क्या आवश्यकता है? उत्तर है, जावास्क्रिप्ट या सीएसएस का उपयोग करते समय, हम एक पूर्ण तत्व को लक्षित कर सकते हैं और उसमें आवश्यक परिवर्तन कर सकते हैं। उसी तरह, हम पूर्ण तत्व को पकड़ सकते हैं और सीएसएस के माध्यम से सीमा या चौड़ाई या कई और चीजों को बदल सकते हैं।
आइए अब समझते हैं कि एक उदाहरण के साथ कौन सी कक्षाएं हैं। मान लें कि मेरे HTML में 100 तत्व हैं और मैं सभी 100 तत्वों को लाल पृष्ठभूमि देना चाहता हूं। ऐसा करने के लिए, हमारे पास दो विकल्प हैं। या तो हमें प्रत्येक तत्व का चयन करना होगा और उसे एक लाल पृष्ठभूमि असाइन करना होगा या हम एक वर्ग redBG बना सकते हैं और उसे एक लाल पृष्ठभूमि असाइन कर सकते हैं। फिर हम इस वर्ग को उन तत्वों को दे सकते हैं जिनमें हम एक लाल पृष्ठभूमि रंग चाहते हैं। भ्रम से बचने के लिए, मैं यह मान रहा हूं कि वर्ग redBG पहले से ही परिभाषित है।
यहां ध्यान देने वाली बात यह है कि हम किसी विशेष तत्व को केवल एक आईडी दे सकते हैं, लेकिन कक्षाओं के मामले में ऐसा नहीं है। एक तत्व अपने आप में एक से अधिक वर्ग हो सकता है। हम एक तत्व में जितने अधिक वर्ग जोड़ते हैं, उतनी ही अधिक संपत्ति इसमें जुड़ती जाएगी।
वर्गों को एक डॉट ‘'द्वारा दर्शाया जाता है और आईडी को हैश। #' द्वारा निरूपित किया जाता है। उदाहरण के लिए, किसी तत्व में redBG वर्ग प्राप्त करने के लिए हम बस उस तत्व नाम को .redBG के बाद लिख सकते हैं। नीचे दी गई तस्वीर सब कुछ दिखाती है, आप अब तक सीख चुके हैं-
ये वर्ग और आईडी के बीच प्रमुख अंतर हैं। आप दिए गए संदर्भों की मदद ले सकते हैं और उनके बारे में अधिक समझने के लिए अधिक अभ्यास कर सकते हैं। हालांकि, हम सीएसएस और जावा स्क्रिप्ट में उनके बारे में अधिक विस्तार से जानेंगे।
Code:-
<!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>Ids and classes in HTML</title>
</head>
<body>
<h3>Ids and classes tutorial</h3>
<div id="mainBox" class="redBg blackBorder">
this is mainbox
</div>
<span class="redBg"></span>
<!-- Select and press ctrl + / to comment -->
<!-- Emmet -->
<!-- . is for class and # is for id -->
<span class="redBg"></span>
<span id="mainSpan"></span>
<div class="redBg blackBorder anotherClass"></div>
<!-- Emmet takes div tag as default -->
<div class="blackBackground"></div>
<!-- Creating multiple elements using Emmet -->
<!-- span.myClass.myClass2.myClass3*4 + <Tab> to print 4 similar elements using Emmet -->
<span class="myClass myClass2 myClass3">First</span>
<span class="myClass myClass2 myClass3">Second</span>
<span class="myClass myClass2 myClass3">Third</span>
<span class="myClass myClass2 myClass3">Fourth</span>
</body>
</html>
