Up next in 10
Id & Classes in HTML _ Sigma Web Development Course - Tutorial #9
144 views
Mar 11, 2024
Welcome to Tutorial #9 of the Sigma Web Development Course! In this session, we explore the concepts of IDs and classes in HTML, essential tools for styling and organizing web content. Understanding how to effectively use IDs and classes enables developers to apply styles, scripts, and other attributes to specific elements, enhancing the visual and functional aspects of a webpage. This tutorial provides practical examples and clear explanations, guiding participants through the process of assigning IDs and classes to HTML elements. Whether you're a newcomer eager to expand your HTML proficiency or a seasoned developer looking to refine your coding practices, this session offers valuable insights into leveraging IDs and classes for efficient and modular web development. Join us as we delve into the world of HTML styling and organization, unlocking new possibilities for creating dynamic and visually appealing websites.
View Video Transcript
0:00
इस वीडियो में मैं आप लोगों को बताऊंगा ID and Classes क्या होती है��
0:03
ID and Classes का concept बहुत जादा confused किये जाने वाले concepts में से एक ह��
0:07
In fact जब मैं HTML सीख रहा था अपने early days में तो बहुत confused होता था ID and Classes मे��
0:12
ID मतलब होता है unique identifier यानि कि अगर आपने एक element को एक ID दे द��
0:16
तो आप दूसरे element को वो ID ideally नहीं देंगे लेकिन class का मतलब होता ह��
0:20
कि एक तरह की property अगर आप multiple elements को देना चाते हैं तो आप उसको multiple class दे देंग��
0:25
for example red नाम की class आप एक div को भी दे सकते हैं और एक form को भी दे सकते है��
0:29
उसी प्रकार से आप लोग bg red नाम की class एक article tag को भी दे सकते हैं और एक header tag को भी दे सकते है��
0:35
इस वीडियो को like जरूर कर देना क्योंकि हम चलेंगे अब computer screen मे��
0:39
और इन चीज़ों को बहुत ही closely देखने वाले हैं Let's roll the intro
0:43
Alright guys तो मैं आगे हूँ वाप��
0:54
और अगर आप लोगों ने sigma web development course को access नहीं किया तो वही playlist को access करो, यहाँ click करके bookmark और यहाँ click करके save कर��
1:01
और source code भी GitHub पर upload हो रहा है लगतार अब मैं यहाँ पर आओगा जल्दी से folder में और video number 9 का एक जल्दी से folder बना लूग��
1:08
तो मैं यहाँ पर video 9 का folder बना लेता हूँ, यहाँ पर मैं लिखूँगा video 9
1:12
और वीडियो नाइन का फोल्डर बनाने के बाद मैं shift right click करके open with code करूँग��
1:17
और यहाँ पर आप देख सकते हो कि यह BS code में खुल गया है अभी यहाँ पर index.html लिखूँगा, exclamation mark लगाकर enter मारूँग��
1:24
और उसी के साथ साथ अब आप लोगों में बताऊंगा कि ID and classes क्या होती ह��
1:28
आप लोगों के पस आधार कार्ड होगा है कि नहीं है तो आपके पस कोई ना कोई ID तो होग��
1:32
अब comment में यह मत लिखना कि नहीं है मेरे पस ID जब भी आप किसी जगह पर जाते होぜ तो आपको आईडी दिखानी पड़ती ह��
1:38
इन सम अब दा केसेज अपनी आइडेंटिटी को प्रूव करने के लिए कि यार मैं ये हू��
1:42
अब आप लोगों ने आईडी और क्लासेस के बारे में अगर एस्टिवल में समझने ह��
1:46
तो ID तो वही है जो कि आपकी पहचान है ठीक है क्या है वो आपकी पहचान ह��
1:51
तो यहाँ पर एक कहानी को सुनो ठीक है यह है John ठीक है और यह है Harry ठीक ह��
1:56
यह दोनों बहुत अच्छे दोस्त हैं बहुत ही अच्छे दोस्ते हैं, बस ये अपना lunch जो है वो share नहीं करते हैं
2:02
और बाकी ये दोस्ते हैं बहुत अच्छे, ठीक है, खाने के मामले में एक तो ये नहीं है, और ये बाकी सब मामलों में दोस्ते हैं, ठीक है
2:09
आज आप देख सकते हो यह जो जॉन है और है यह दोनों को अपने-अपने आधार कार्ड की आईडी है तो यह है मेरा आधा��
2:16
नंबर और जॉन का आधार नंबर कुछ इस तरह से देखता है ठीक है तो यह जॉन का आधार नंबर और यह मेरा आधार नंबर same
3:09
56, 85, और 63, तो आप समझ जाओ कि तानिया की बात हो रही है
3:13
तो uniquely identify करता है, यह आधार number, तानिया को, हैरी को
3:18
शुरूती को, और जॉन को, तो यह क्या है, यह है इनका आधार number
3:23
यहाँ कि यह है इनकी ID, यह आधार number अब किसी और को नहीं मिलेगा, लो यार मानने में जाता है और शुरूति मान लो है क्लास नाइन्थ में और तानिया भी क्लास नाइन्थ में ठीक है त��
3:47
दोनों क्लास नाइन्थ में ठीक है तानिया भी क्लास नाइन्थ में है और शुरूति भी क्लास नाइन्थ में तो शुरूति की क्लास क्य��
3:54
नाइन थे तायार की लाइन हो सकती है वह क्लास में अकेली तो ना पड़ेगी शुरूती को या फिर कोई अगले अगल��
3:59
रोड़े ना पड़ेगा टेंट लास्में और बच्चे भी होते हैं क्लास में तो क्लास का मतलब यह हुआ कि एक क्ला��
4:05
में हैरी और जॉन है तो क्लास क्या एक इंसान की मल्टिपल हो सकती है एक इंसान की तो मल्टिपल हो सकती ह��
4:11
क्लास प्रशिक्ष मान लो है डिक्लास टेंथ में है और यह एक ट्यूशन में जाता है जहां पर यह क्लास टे��
4:17
में है मालों स्ट्रीशन में भी क्लासेज होती है तो एक से ज्यादा क्लास हो सकती है तो क्लास टेंथ है इसकी औ��
4:23
एक क्लास टेन है और उसे के साथ साथ मालों हैरी डेट कलर की टीशर्ट पहनता है तो इसकी क्लास रेड भी है ठीक ह��
4:29
तो class का मतलब पढ़ने वाली class नहीं हो रहा है, class का मतलब कि इसको इस class में classify कर दिया गया है
4:34
ऐसा समाझ लो, अब आजाओ यहाँ पर, यह John Harry Shruti को छोड़ो अभी, ठीक है, इसको delete कर दो ना
4:39
अब zoom out करके delete कर देता हूँ, कि इसका कोई मतलब नहीं है भी यहां पर अब आज ओर इंडिक्स टोटेस्टी अमोग समझो इस बात को मान लो मैंने यहां पर एक डि��
4:46
बनाया ठीक है और मैंने इसका क्लास दे दिया रेड ठीक है और मैंने एक स्पैन बनाया और इसको भी मैंने क्लास दे दिय��
4:52
रेड ठीक है जो मैंने क्लासेस दिए हूं मैं अलग-अलग एलिमेंट को दे सकता हूं यह सेम क्लास हां दे सकत��
4:57
हूं लेकिन अगर मैं चाहता हूं आईडी डालना किसी भी एक एलिमेंट में मान लो मैंने आईडी डाल दी इसकी फर्स्��
5:01
तो यह आप मैं किसी और इलमेंट को नहीं जाता क्योंकि इसका अधार कार्ड इस वाले एलमेंट का अगर वह दूसर��
5:08
डिवी हुआ ना तब भी नहीं डाल सकता तब भी मुझे आईडी कुछ और डालनी पड़ेगी ठीक है सेकंड डाल दी मैंन��
5:14
लिखता हूं यहां पर मैं सेकंड लिखता हूं यहां पर मैं फर्स्ट लिख दूंगा ठीक है तो यह आईडी और क्लास प��
5:20
ID uniquely identify element class element multiple classes
5:34
और एक ही class को multiple element में भी लगा सकते हैं समझ देओ जैसे कि इसको मैंने अगर red glass द��
5:39
मैं इसको bg yellow class भी दे सकता हूँ ठीक है bg yellow एक class यह दे सकता हूँ और class अगर ह��
5:45
किसी element को multiple देते हैं तो हम space लगा कर देते हैं जैसे कि अगर मैं चाहता हूँ क��
5:49
इस element में multiple classes डाली जाएं तो मैं क्या करूँगा एक तो मैं यहाँ पर red लिख दूँग��
5:55
फिर space लगा के bg yellow लिख दूँगा तो इस तरह से मैं multiple classes दे सकता हू��
5:59
same element को क्या मैं same element को multiple id दे सकता हूँ क्या किसी के दो आधार card सुने है कभी आपन��
6:04
बाई कोई बनवाले इदर उदर से मुझे नहीं पता भाई लेकिन नहीं होते हैं आधार का अधार नंबर एक इंसान का एक होता है और आधार नंबर अलग-अलग इंसान के सेम नहीं हो सकते ठीक है एक इंसान के पास मल्टिपल नहीं हो सकते अलग-अलग इंसान के पास सेम नहीं हो सकते लेकिन जो क्लास है यानि कि अगर मैं कहूं कि ��
6:36
बनाना क्लास में या फिर वह है ग्रेफ्स क्लास में ठीक है मैंगो क्लास में तो एक क्लास में क्लासिफाइ��
6:42
कर सकते हैं और एक ही क्लास को अलग-अलग एलिमेंट्स को दे सकते हैं तो आप यह चीज आपको समझ में आगे अ��
6:47
यहां पर थोड़ी सी सीसेस लिखूंगा और यह मत कहना कि भाई सीसेस पढ़ा रहे नहीं हो लिख रहे हो अभी सीसेस मे��
6:51
मैं क्या लिख रहा हूं यह आप लोग मतलब बिल्कुल ऐसा समझ लो मैं कुछ एलियन लैंगॉज लिख रहा हूं ठीक ह��
6:55
style.css के अंदर लेकिन मैं एक point make करने की कोशिश कर रहा हू��
7:00
मैं यहाँ पर click करूँगा और यहाँ पर अबी इसका जो preview है वो कुछ इस तरह से दिख रहा ह��
7:03
first और second मैं आपको बस एक चीज दिखाऊँगा मैं एक तो class है वो css में कैसे target करते है��
7:09
dot red मतलब red class और hash first div मतलब hash मतलब id होता है dot मतलब class होता ह��
7:15
अगर मैं कहूँ कि जो first div है उसका background color कर दो red
7:21
तो first div का background color red करने से इसका background color red हो जाएगा यह selector होते हैं css मे��
7:27
और अभी मैं आपको बिलकुल भी नहीं करना चाहता और मैं ऐसे तरह से कमेंट कर सकता हूं सीएसस में ठीक है लेकिन यह सब चीज आगे पड़ेंग��
7:34
हम लोग अब डॉट रेड करके मैं क्या करूंगा यहां पर लिख दूंगा बैकग्राउंड कलर रेड और उसी के साथ सा��
7:39
दॉट बीजी एलो में मैं क्या करूँगा दॉट बीजी एलो जो होगा मेर��
7:43
दॉट जरूर लगाना है मुझे दॉट मतलब class इसका मतलब class bglo
7:46
और मैं background color को yellow कर दूँगा sorry इसको मैं color red करूँग��
7:50
background color red नहीं करूँगा dot red मतलब color इसका red हो जाए तो देखो इसका color red हो गया और background color yellow हो गय��
7:56
तो इस तरह से आप लोग इस्तेमाल कर सकते हो ID and classes को CSS के अंद��
8:01
I hope कि आप लोग को इस चीज़ समझ में आ गई होगी अब एक चीज़ यहाँ पर note करने वाली बहुत important यह ह��
8:05
ID and classes attributes element ID attribute class attribute ID classes elements elements attributes ID
8:47
और यह आईडी अब मैं एंटर मारूंगा तो यह सीधे मुझे यहां पर लेकर आएगा ऐसी डीएट में तो आप देखो अगर मै��
8:52
इसको इनकॉग्निटो में भी डालूं ना तो मुझे स्क्रॉल करके उस पर्टिकुलर आईडी को दिखा देगा देगा इससे स्क्रॉ��
8:58
सब्सक्राइब करना चाहता है तो लिंक भी आपको बहुत कम लोग आपको बताएंगे कि भाई लिंक भी जनरेट कर सकत��
9:10
आप किसी भी लिंक के आगे हैं टैक करके आईडी लिख दोगेips तो वह लिंग जब खोलोगे तो आपको वही आईडी फोक��
9:15
देखा जैसे कि इस केस में दे रहा है मुझे आप देख सकते हो कि मैं जैसे ही एंटर मार रहा हूं तो शायद मैंन��
9:21
गलत कर दी यहां पर बट यू गॉट द पॉइंट या यू गॉट द पॉइंट यह 29.29 और मैं इसको एंटर मारूंगा तो अब देख��
9:27
munition नीचे आ गए मैं इनको टाप खोलूं या इसको रिलोड करो अगर तो आप देखो मैं नीचे आ गए तो मैं इसको ऊप��
9:32
स्क्रॉल भी कर दो ना और इसके बाद मैं नई टाप खोलूं और इसको ऐसे करो देखो मुझे स्क्रॉल करके उसी पेज प��
9:39
आ रहा है जिस पेज पर यह वाली ID है तो I hope कि आप लोग को ID और classes समझ में आ गए होंग��
9:43
इस वीडियो के माध्यम से ID मतलब जैसे आधार कार्ड होता है class का मतलब कि एक इंसान की property
9:47
जैसे उसे red पसंद है या फिर वो कौन सी class में है एक element को multiple classes दी जा सकती ह��
9:53
एलिमेंट रेड कलर का भी हो सकता है उसका बैकराउंड येलो हो सकता है और दूसरा एलिमेंट भी उसका कलर रेड और बैकराउंड येलो हो सकता है तो रेड क्लास भ��
9:59
multiple elements पे लगाई जा सकती है रेड क्लास को आप चाहो तो से फेक एलिमेंट पर लगा लो और एक एलिमेंट में आप रेड क्लास भी लगा सकते हो बीजी एलो क्लास भी लगा सकते हो तो आपक��
10:07
कि आप लोग समझ गए यार स्वापित इस वीडियो में इतना है गैस यार मैं कैप्शन पढ़ रहा था और मुझे हजी आग��
10:12
captions पढ़कर तो मैंने इसमें बोला था गाउं की समीज में नाम करें और यार इस चीज को सुनके मैं पांच दद बार हस��
10:17
बहुत तेश चेस मैंने बोला था access करें name your village land in my name so इसी बात पे playlist को access करन��
10:24
github को भी access करना वीडियो को like जरूर बढ़करार रखना comment section में hashtag sigma batch op
10:30
लिख देना thank you so much guys for watching this video and I will see you next time
#Photo & Video Sharing
#Skins
# Themes & Wallpapers