HTML बेसिक्स से प्रोफेशनल तक: पूरी वेब डेवलपमेंट गाइड

हाय एवरीवन मैं हूं आपकी श्रद्धा दीदी एंड वेलकम टू अपना कॉलेज आज की वीडियो में हम पढ़ने वाले हैं एचटीएमएल को जिसमें लेवल

वन से लेकर यानी बेसिक लेवल से लेकर एडवांस लेवल प्रो लेवल तक हम पूरे एटीएमएल को पढ़ रहे होंगे तो अगर आप वो स्टूडेंट

हैं जिनको बिल्कुल भी कोडिंग प्रोग्रामिंग डेवलपमेंट नहीं आती है तो इस वीडियो के अंदर आप वो चीजें सीख जाएंगे कोड कैसे

करना होता है वीडियो को हमने चार लेवल्स में डिवाइड किया और चारों लेवल को कंप्लीट करने के

बाद आप एक प्रो प्रोग्रामर बन जाएंगे चीजों की जरूरत है वो है एक लैपटॉप और साथ के साथ बहुत सारा एक्साइटमेंट जो भी चीज

आपको पसंद आए जो भी चीज मैंने बोली हो वीडियो के अंदर उसको मुझे नीचे कमेंट करके बताना और अगर ऐसी कोई चीज है जो आपको लगता

है कि मुझे आगे की वीडियोस में एडिशनल कवर करनी चाहिए उसके बारे में आप मुझे नीचे बता सकते हैं साथ के साथ मुझे हेल्प

मिलेगी कौन सा सेक्शन ज्यादा कवर हो रहा है अगर आप टाइम स्टंप्स नीचे डाल रहे होंगे जैसे-जैसे आप लेवल्स में आगे बढ़

रहे हैं तो तो शुरू करते हैं यार अपने नए एचटीएमएल कोर्स को [संगीत]

अब कुछ कुछ चीजें अच्छी हैं जैसे आप स्टाइल एंड फॉर्मेटिंग वगैरह कर सकते हैं इसमें

इमेजेस एंड मीडिया है जैसे आप जैसे ही html5 पे एक बेसिक फॉर्म है उसको फिल कर सकते हैं उसको डाउनलोड कर सकते हैं एंड यू

कैन यूज इट कंपलीटली फ्रीली ऑन योर सिस्टम दूसरा एक टेक्स्ट एडिटर है अल्ट्रा एडिट के नाम से जिसमें प्रोफेशनल लोगों के लिए

काफी सारे फीचर्स अवेलेबल हैं सो इफ यू आर अ प्रोफेशनल डेवलपर जो सोच रहा है कि एचटीएमएल की तरफ वो जा रहे हैं आप

फ्रीलांसिंग वगैरह करते हैं आप वेब डेवलपमेंट में अपनी एक प्रोफेशनल जर्नी की शुरुआत कर रहे हैं यू आर ऑलरेडी डूइंग अ

जॉब तो दिस इज अ पेड सॉफ्टवेयर जिसमें जाकर आप इसके फीचर्स जो हैं चेक आउट कर सकते हैं इसके अंदर आपके पास कोड

हाइलाइटिंग जैसे कुछ चीजें आ जाएंगी कोड टेंपलेट्स आपको दिख जाएंगे सीएसएस कलर स्वप ंग आ जाएगी इंटीग्रेट कर सकते हैं

इसको आप अपने एसएसए के साथ एफटीपी इंटीग्रेशन भी पॉसिबल है एसएफटीपी इंटीग्रेशन भी पॉसिबल है तो वो टूल्स एंड

टेक्नोलॉजीज जो आपके प्रोफेशनल डेवलपमेंट एक्सपीरियंस को और ज्यादा बेटर कर देंगी वो सारी फंक्शनैलिटीज इसमें आपको मिल

जाएंगी एंड इन फैक्ट इवन इफ यू आर यूजिंग इट फॉर अ पर्सनल प्रोजेक्ट यू कैन जस्ट ट्राई आउट द 30 डे ट्रायल पीरियड उसको आप

एक बार ट्राई कर लो एंड उसके बाद इफ यू लाइक इट तो आप किसी फ्रीलांसिंग प्रोजेक्ट या किसी पेड इंटर्नशिप वगैरह के लिए आप

इसको यूज कर सकते हैं तो ये दो टेक्स्ट एडिटर्स हो गए एटीएमएल करने वाले हैं विजुअल स्टूडियो

कोड यानी वीएस कोड का अब जब भी हमें एक प्रोग्राम एक कोड लिखना होता है तो हमें कोड एडिटर की जरूरत पड़ती है तो

html4 नाम के कोड एडिटर का इस्तेमाल करेंगे कोड एडिटर्स को हम इमेजिन कर सकते हैं कि वो एक नोटबुक की तरह है जैसे

नोटबुक के अंदर हम डिफरेंट डिफरेंट चीजें लिखा करते हैं वैसे ही जब भी हमें कोड लिखना होता है तो उसके लिए कोड एडिटर का

हम इस्तेमाल कर लेते हैं जिसके साथ काफी सारे रिसोर्सेस काफी सारी चीजें हैं यूज़फुल चीजें जो हमें मिल जाती हैं अब

एटीएमएल पढ़ा होगा तो आप देख रहे होंगे कि नोटपैड में भी लिख सकते हैं यानी आपके कंप्यूटर सिस्टम में जो नोटपैड की फाइल्स

बनती हैं ड t एकटी से फाइल बनती हैं उनकी जगह आप ड सिस्टम्स बनाने हैं तो वो आपके लिए बनाना

पहले से ही आसान हो जाएगा क्योंकि पहले से ही सबसे जो सीमलेस प्रोसेस वाली चीज होती है ना सबसे एफिशिएंसी वाली चीज उनको हम

यूज करवा देंगे अब वीएस कोड माइक्रोसॉफ्ट की तरफ से फ्रीली अवेलेबल है तो इसको कोई भी जाकर इस्तेमाल कर सकता है तो सबसे पहले

इसको डाउनलोड करने के लिए हम सर्च करेंगे इंटरनेट पर डाउनलोड वीएस कोड तो यह फर्स्ट जो लिंक आएगा इस पर हमें

चले जाना है यहां पर साइट भी मैं बता देती हूं कोड विज स्टू क डनलोड अब इसमें काफी सारे ऑप्शन आ गए हैं अब आप विज मशीन पर

हैं windows7 8 10 11 पर तो यहां पे आप अपने सिस्टम के हिसाब से कि 64 बिट सिस्टम है तो कौन सा डाउनलोड करना है 32 बिट है

तो कौन सा डाउनलोड करना है मोस्टली लोगों का जो है 64 बिट सिस्टम होता है तो इसको आप यहां पे क्लिक करके डाउनलोड कर सकते

हैं अगर आप लिए आएंगे हमें क्या करना है इन सारे के सारे चेक बॉक्सेस को टिक कर देना है जैसे

ही टिक करेंगे हमारा विजुअल स्टूडियो कोड पूरी तरह इंस्टॉल हो जाएगा और इसको अब हम फर्स्ट टाइम खोल सकते हैं तो अगर वेबसाइट

के फ्रंट एंड की बात करें तो उसके तीन पार्ट्स होते हैं सबसे पहले उसमें होता है हमारे लिए

एचटीएमएस एस फिर जेएस चाहिए जैसे इस वेबसाइट के अंदर एटीएमएल विजुअल स्टूडियो कोड ऊपर लिखा

होना चाहिए उसके नीचे यह सारी चीजें लिखी होनी चाहिए उसके नीचे ये सारे आइकंस हमें दिखाने हैं और फिर डाउनलोड के लिए हमें

बटंस दिखाने हैं अब हो सकता है आप अपनी जब वेबसाइट डिजाइन करें तो उसके अंदर लेआउट कुछ और हो जैसे अगर हम किसी और वेबसाइट को

देखें जैसे google.com पर अगर हम जाते हैं तो यहां पर सर्च बार आना चाहिए यहां पर ये दो बटंस आने चाहिए नीचे हमारे पास

लैंग्वेजेस आनी चाहिए ऊपर ये सारी की सारी चीजें एटीएमएल ने बताई है कि ये कहां-कहां होनी चाहिए तो एटीएमएल

क्या करता है एक तरीके से एक स्ट्रक्चर या लेआउट दे देता है एक घर को इमेजिन करिए घर के अंदर कौन सा कमरा कहां पर होगा और एक

कमरे के अंदर क्या-क्या चीजें होंगी यह सारा का सारा जो पार्ट है वो एचटीएमएल संभालता है उसके बाद सेकंड कंपोनेंट आ

जाता है फ्रंट एंड का सीएसएस सीएसएस क्या करता है उस घर के अंदर दीवारों का कलर क्या होगा बटन का शेप क्या होगा साइज क्या

होगा बटन का क्या कलर होगा या फिर फ्लोर पे हमने कार बिछाया नहीं बिछाया वो सारी चीजें कंट्रोल करता है यानी स्टाइल वाली

सीएसएस का मतलब होता है कैस्केडिंग स्टाइल शीट्स यह वो कोड का पार्ट होता है जो

डिफाइन करता है कि आपका जो वेब पेज है उसका स्टाइल क्या होना चाहिए जैसे वीएस कोड वाली साइट पर अगर जाएं तो यहां पर ये

सारे का सारा जो टेक्स्ट लिखा है इसका फॉन्ट क्या होने वाला है इसका फॉन्ट साइज क्या होने वाला है ये सारी चीजें जो है ना

सीएसएस कंट्रोल करेगा और तीसरा कंपोनेंट आ जाता है हमारा जावास्क्रिप्ट जावास्क्रिप्ट क्या करता है फंक्शनैलिटी

डिफाइन करता है जैसे आपने घर बना लिया स्ट्रक्चर बना लिया उसके अंदर कमरे आ गए उसके अंदर स्विचेबल है उसके अंदर फैन है

फिर आपने यह भी डाल दिया कि उनका कलर क्या होगा अब फैन का जब आप बटन दबाए तो एक्चुअली हमारा पंखा जो है चलना चाहिए

हमारी लाइट जो है ऑन ऑफ होनी चाहिए ये सारी जो फंक्शनैलिटी है जो अंदर का लॉजिक है वो कौन लेकर आता है वो लेकर आता है एक

वेबसाइट के अंदर जावास्क्रिप्ट तो इस बटन पर क्लिक करने के बाद मेरे लिए कुछ चीजें डाउनलोड हो रही होंगी यह मेरे लिए डिफाइन

करेगा मेरा जावास्क्रिप्ट तो html4 पार्ट्स में डिवाइड किया है जिनको हम लेवल्स कहेंगे पार्ट्स की जगह लेवल वन

लेवल टू लेवल थ्री एंड लेवल प्रो लेवल प्रो करने के बाद आप ऑलमोस्ट मतलब 100 से भी ऊपर परसेंटेज वाली वो सारी चीजें एक

बार देख रहे होंगे सीख रहे होंगे जो किसी भी वेबसाइट को बनाने के लिए जितनी एचटीएमएल आपको आनी चाहिए अब सबसे पहले बात

करते हैं अपने लेवल वन की जिसके अंदर हम डिस्कस करने वाले हैं अबाउट द बेसिक ऑफ html5 मार्कअप लैंग्वेज यानी एक ऐसी

लैंग्वेज है जो किसी भी वेबसाइट का जो है मार्कअप बताती है स्ट्रक्चर बताती है लेआउट बताती है

नीचे आनी चाहिए वो सब डिफाइन कर रहे हैं तो आप एटीएमएल का इस्तेमाल कर रहे होंगे जैसे अगर हम इस वेबसाइट की बात करें तो

इसको राइट क्लिक करके अपनी स्क्रीन पर या तो आप व्यू पेज सोर्स करें व्यू पेज सोर्स करके क्या होगा इस पूरी की पूरी वेबसाइट

पे जो एटीएमएल का कोड है तो एक्चुअल में जो वेब पेजेस होते हैं वेबसाइट्स होते हैं वो मैं

दिखने में तो बहुत सुंदर से लगते हैं पर उनके जो पीछे का कोड है ना वो कोड एक्चुअली उस सुंदरता में कन्वर्ट हो रहा

होता है और वह कोड कुछ ऐसा दिखता है और कुछ ऐसा ही कोड हम इस पूरी वीडियो के अंदर लिखने वाले हैं अब अगर आपको किसी भी

वेबसाइट का इंटरनल कोड देखना हो तो उसके लिए सिंपली क्या करना है राइट क्लिक करना है और व्यू पेज सोर्स पे जाना है तो ये

google.com का पूरा का पूरा जो एचटीएमएल कोड है वो आपके लिए खुलकर आ जाएगा अब जब आप इस कोड को कॉपी करेंगे तो आप सोच सकते

हैं कि हां इस कोड को कॉपी करके तो मैं पूरी वेबसाइट रीक्रिएट कर लेता हूं पर लॉजिकली ऐसा नहीं होता है कुछ पार्ट्स आप

कॉपी कर सकते हैं रीक्रिएट कर सकते हैं पर कंपलीटली किसी वेबसाइट को इस तरीके से कॉपी नहीं कर सकते क्योंकि सिर्फ फ्रंट

एंड नहीं होता वेबसाइट्स में बैक एंड भी होता है पर वो सारी चीजें एक्स्ट्रा हैं अभी के लिए हमें समझना है व्यू पेज सोर्स

करके हम किसी भी वेब पेज का जो है एचटीएमएल कोड देख सकते हैं तो राइट क्लिक करके हम इंस्पेक्ट

करके इस कोड को और थोड़े से क्लीन फॉर्मेट में देख सकते हैं प्लस ये जो एरो बटन ऊपर स्क्रीन पर आता है उससे हम देख सकते हैं

कि कितना पार्ट कौन से हमारे हिस्से को दिया गया है जैसे ये जो इमेज है इसको ये वेबसाइट का इतना डब्बा लेती है यह जो

डाउनलोड वाला बटन है ये इतना पार्ट लेता है ये बड़े वाला बटन इतना पार्ट लेता है इसके अलावा ये विंडोज वाला जो इमेज है

इसका जो पार्ट है वो इतना है अब ये एक बॉक्स क्यों है यहां पे बॉक्स क्यों हमें बना हुआ दिख रहा है इसके बारे में भी

पढ़ेंगे कि ये कौन सा एलिमेंट होता है एचटीएमएल का ये वाला जो बटन है ये एरो बटन इतना सा पार्ट ले रहा है डाउनलोड वाला बटन

उसके बाद जो पूरा का पूरा बड़े वाला बटन है उसके अंदर हमारे दो-तीन आप लेवल्स देख रहे होंगे कि बाहर वाला लेवल क्या है उसके

अंदर एक और लेवल का मैं डब्बा दिख रहा है उसके अंदर एक और डब्बा दिख रहा है तो ये सारी स्ट्रक्चरिंग होती है एटीएमएल में तो

html5 कर सकते हैं जैसे हमारा जो यह वेबसाइट का पेज है ये हमारे iphoneox.com दिख रहा होगा अगर हमारे पास

ip-tracker.org भी कोई अच्छी सी सुंदर सी वेबसाइट दिखे जिसके बारे में आप क्यूरियस हो रहे हो यह

बनी कैसे है इसका कोड कैसा है तो आप पेज सोर्स पर जा सकते हैं और आप उसको इंस्पेक्ट कर सकते हैं अब बात करें

html5 होता है जिसको टैग की हेल्प से आप डिफरेंट डिफरेंट तरीके के आइटम्स जो है वो क्रिएट कर सकते हैं

क्योंकि अलग-अलग तरीके के टैग्स एजिस्ट करते हैं अब सबसे पहले क्या करेंगे अपनी फर्स्ट फाइल क्रिएट करेंगे

दे देंगे हो सकता है अगर आपके में डायरेक्टली रन ना करें तो आपको बंद करके दोबारा से

रीस्टार्ट करना पड़े वीएस कोड को बट दैट इज कंप्लीट फाइन अब यहां फाइल वाले ऑप्शन में जाएंगे एंड अपने लिए एक फोल्डर हमने

बना ही लिया था एचटीएमएल ट्यूटोरियल जिसको हमने खोला हुआ है एक नई फाइल बनाएंगे इस नई फाइल को हम नाम देंगे index.htm और ये

index.htm हमारे लिए खुलकर आ गई है अब ये जो फाइल है हम ऑलरेडी डिस्कस कर चुके हैं कि आप नोटपैड के ऊपर भी बना सकते हैं पर

यहां पर अभी मैं दिखाऊंगी कि क्या-क्या हमें फंक्शनैलिटीज मिल जाती हैं जिसकी जैसे वीएस कोड या किसी और टेक्स्ट एडिटर

पर करना बहुत ज्यादा हेल्पफुल होता है एज कंपेयर्ड टू अ नोटपैड अब जब भी हम html5 फाइल्स को हम txt.gz

साइट बनती है जो भी एक सॉफ्टवेयर बनता है उसके अंदर सिर्फ फ्रंट एंड नहीं होता मतलब सिर्फ

html.erb साइट सर्च करना चाहे google.com तो यह google.com का होम पेज है जो हमारे लिए खुल रहा है उसके बाद हम

यहां पर कुछ भी जो सर्च कर सकते हैं व हम सर्च कर लेंगे और चले जाएंगे किसी और सब पेज पर पर यह है इसका होम पेज अब होम पेज

कैसे डिटेक्ट करता है जब भी सर्वर जो है हमारे ब्राउजर पर रेंडर कर रहा होता है पेज को वो डिटेक्ट करता है होम पेज को

इंडेक्स नाम से यानी जब भी आप अपनी डिफरेंट डिफरेंट एक तो html5 होगी नहीं कोई आप बड़ा सा वेबसाइट बनाएंगे उसके अंदर

बहुत सारी html5 होंगी तो सर्वर देखेगा कि इक्सड html5 आपके पास है और फिर उस फाइल को बाय

डिफॉल्ट वो आपका होम पेज बना देता है अगर आपने index.htm नाम की फाइल जो है अपनी वेबसाइट के अंदर नहीं क्रिएट की तो आपको

सर्वर को अलग से जाके बताना पड़ेगा कि ये वाली दूसरी जो फाइल है ये मेरा होम पेज होने वाली है लेकिन बाय डिफॉल्ट ये मतलब

बहुत अच्छा प्रोग्रामर्स का जो है तरीका है प्रोग्रामर्स की टेक्नीक है कि हम हमेशा index.htm के साथ शुरुआत करते हैं

उसको अपने होम पेज की तरह ट्रीट करते हुए उसके अंदर अपनी सारी इंपॉर्टेंट चीजें या मेजर चीजें जो है वो लिख रहे होते हैं अब

अपने टाइप कर देंगे और जैसे ही आप एक्सक्लेमेशन टाइप करेंगे ना वीएस कोड के अंदर ये दो

आपके लिए फीचर्स आएंगे इसमें से सबसे पहला एक्सक्लेमेशन कुछ यहां पे सेटिंग्स वाला आपका टूल आपको दिखाई दे रहा है उसके बाद

एट एब्रिवेशन जैसा कुछ लिखा हुआ है अब एट एब्रिवेशन क्या है एमिट क्या है एमिट एक टूल किट है और ये टूल किट बाय डिफॉल्ट

वीएस कोड के अंदर आती है ये टूल किट क्या करती है आपको बहुत सारे हेल्पफुल टूल्स दे देती है जैसे अगर जैसे ही मैंने इस ये

एक्सक्लेमेशन मार्क पर क्लिक किया वैसे ही मेरे लिए एक पूरा का पूरा एचटीएमएल का सैंपल कोड जो है वो खुल गया इस कोड को हम

बॉयलर प्लेट कोड कहते हैं यानी इतना कोड तो आपको बाय डिफॉल्ट चाहिए ही होता है ऑलमोस्ट सब केसेस में जब भी आप एक

एचटीएमएल फाइल को लिखने चलते हैं ये कोड दिखने में पहली बार में डरावना सा लग रहा होगा पर यह डरावना नहीं है इस कोड को पूरी

तरह हम एनालाइज करेंगे इसकी अटमी वगैरह सब कुछ हम छान मारेंगे बस समझने वाली चीज सबसे पहले यह है कि वीएस कोड ने आपके लिए

आसान कर दिया कि आपको पूरा कोड खुद से ना याद करना है ना देखना है ना लिखना है हमें सिंपली जाना है इस ऑप्शन पर और एमिट पर

हमें क्लिक करके पूरा का पूरा हमें बॉयलर प्लेट कोड मिल रहा होगा अब यह जो फंक्शनैलिटी है ये नोटपैड पर अगर आप कोड

लिख रहे होते तो आपको नहीं मिल रही होती तो काफी सारी और इंपॉर्टेंट चीजें जो हैं हम सीखेंगे धीरे-धीरे अब एक और सवाल आपके

दिमाग में आया होगा कि हमने एक एक्सटेंशन इंस्टॉल की थी लाइट सर्वर उसको हमने क्यों इंस्टॉल किया जैसे ही हम इस एटीएमएल को

खोलेंगे ना हम इधर नीचे जाकर गो लाइव में जा सकते हैं और हमारे लिए क्या होगा हमारा पूरा एचटीएमएल पेज हमारे लिए खुल जाएगा अब

अभी के लिए हमने एचटीएमएल में कुछ नहीं लिखा इसलिए हमारा पेज हमें खाली लग रहा है अगर मान लीजिए मैं यहां पे सैंपल के तौर

पर कुछ भी लिख दूं अभी के लिए ध्यान नहीं देना है कि ये क्या मैंने लिखा हुआ है इसका क्या मतलब है सिर्फ देखना

है हेलो वर्ल्ड इसको कर लेती हूं सेव और जैसे ही मैं वापस गई मेरे लिए हेलो वर्ल्ड मेरी स्क्रीन पर प्रिंट होकर आ गया हेलो

वर्ल्ड बाय डिफॉल्ट वो स्टेटमेंट होती है जो कोई भी आप नई प्रोग्रामिंग लैंग्वेज कुछ भी सीख रहे होते हैं तो कोडिंग के

अंदर आपको लिखनी पड़ती है एटलीस्ट मैं तो लिखना ज्यादा पसंद करती हूं तो हेलो वर्ल्ड मेरी स्क्रीन पर आ गया मुझे कुछ

रिफ्रेश या कुछ और नहीं करना पड़ा तो लाइव सर्वर वो एक्सटेंशन है जिसकी मदद से बार-बार आपको सेव करके रिफ्रेश या दोबारा

से ओपन नहीं करना पड़ेगा अपना वेब पेज आप डायरेक्टली यहां पर कोड लिखेंगे सेव करेंगे वापस से अपने वेब पेज पर जाएंगे जो

खुला है और आपके लिए सारा का सारा एचटीएमएल का जो आउटपुट है वो डिस्प्ले होकर हमें दिख जाएगा अब ऊपर आप नोटिस कर

रहे होंगे कि यह जो है सर्वर हमारा खुल गया है और एक index.htm नाम की फाइल जो है खुली है अब फॉर एग्जांपल मैं इस फाइल का

जो है नाम चेंज कर दूं इसको हम कर लेते हैं रिनेम और इस फाइल को कुछ और नाम दे देते हैं इसको नाम दे देते हैं हम इंडेक्स

टू बैग्स क्या होते हैं एटीएमएल के अंदर एक कंटेनर होता है कंटेनर यानी जैसे हमारी

किचन के अंदर कुछ डब्बे रखे होते हैं जिसके अंदर कुछ-कुछ मसाले होते हैं कहीं चीनी रखी होती है कहीं नमक रखा होता है तो

वो डब्बे हमारे कंटेनर्स होते हैं जिसके अंदर कुछ कंटेंट होता है यानी कुछ सामान होता है वैसे ही जब भी हमें वेब पेज के

ऊपर अपनी वेबसाइट के ऊपर कुछ सामान डालना होता है फिर चाहे वो एक बटन हो गया फिर चाहे वो एक पैराग्राफ हो गया हो कोई

हेडिंग हो गई हो तो उसको हम एक कंटेनर के अंदर डालते हैं और इस कंटेनर को हम कहते हैं एटीएमएल टैग तो

तरीके का सिस्टम रहता है इसको समझने के लिए हम एक पैराग्राफ टैग का एग्जांपल लेंगे जब भी हमें एक वेबसाइट के ऊपर कोई

पैराग्राफ दिखाना होता है तो हम इस तरीके की कोई स्टेटमेंट लिख रहे होते हैं इसमें यह जो फर्स्ट इनिशियल चीज लिखी है यानी ये

एंगुलर ब्रैकेट्स और इसके अंदर जो है p इसका मतलब होता है पैराग्राफ टैग का ओपनिंग टैग इसको कहते हैं ओपनिंग टैग और

इसको कहते हैं क्लोजिंग टैग क्लोजिंग टैग के अंदर आपको ये स्लैश दिख रहा होगा एंगुलर ब्रैकेट्स के बीच में और उसके बाद

अपने टैग का नाम इस टैग के अंदर जो हम लेटर लिख रहे हैं वह पी है यहां पर भी पी है यह है ओपनिंग टैग यह है हमारा क्लोजिंग

टैग अब इन दोनों टैग्स के अंदर हम कंटेंट लिखेंगे यानी एक्चुअल पैराग्राफ लिखेंगे पैराग्राफ के अंदर हम कोई भी लाइंस लिख

सकते हैं जैसे दिस इज़ अ पैराग्राफ या फिर हेलो वर्ल्ड आई एम अ लर्निंग एटीएमएल टुडे इस तरीके का कुछ कंटेंट होता है और जब हम

इस पूरी की पूरी चीज को कंसीडर करते हैं यानी ओपनिंग टैग कंटेंट और क्लोजिंग टैग इस पूरे के पूरे मटेरियल को हम एक

अब एक और चीज आपने नोटिस की होगी कि जैसे ही मैंने यह एंगुलर ब्रैकेट p और क्लोजिंग ब्रैकेट टाइप किया तो मेरे

लिए ऑटोमेटिक जो है ओपनिंग टैग के साथ मेरा क्लोजिंग टैग भी आ गया तो इस तरीके की भी फंक्शनालिस कोड जैसे टेक्स्ट

एडिटर्स जो होते हैं हमें एडिशनल देते हैं इसीलिए उनको यूज़ करना ज्यादा इंपॉर्टेंट रहता है तो बार-बार हमें क्लोजिंग टैग्स

लिखने नहीं पड़ते तो एटीएमएल टैग को हमने समझा कि एक कंटेनर होता है जिसके अंदर हम कुछ मटेरियल डाल रहे होते हैं यानी वेब

पेज के ऊपर जो भी कुछ हमें डलवाना है उसको एक टैग के अंदर लिख दें अब अपने बेसिक html4 यूज़ कर रहे हो जो भी ब्राउजर आप

यूज़ कर रहे हैं ब्राउज़र क्या करता है आपके से मेरे कम ने क्या किया इस पूरे के पूरे

html-pdf बताता है कि जो हम डॉक्यूमेंट लिख रहे हैं इसका टाइप क्या है इसका टाइप है

जब हम इस तरीके से लिखते हैं तो इसका मतलब है हम html5 का इस्तेमाल कर रहे हैं तो वर्जन नंबर फाइव जो है हम इस्तेमाल कर रहे

हैं इस डॉक्यूमेंट को लिखने के लिए उसके बाद सेकंड चीज हम देख रहे होते हैं हमारे लिए एक

एटीएमएल टैग आता है इसमें भी हम देखेंगे कि एटीएमएल का ओपनिंग और एटीएमएल टैग आया है ये टैग हमें बताता है कि दिस इज द रूट

ऑफ एन एटीएमएल डॉक्यूमेंट जैसे अब उसके अंदर आप पैराग्राफ डाल दें कहीं बटन डाल दें कहीं आप कोई हेडिंग डाल दें

वो सारे सब एलिमेंट्स हैं यानी बड़ा जो हमारा पूरा का पूरा वेब पेज होता है वो खुद में एक एलिमेंट होता है उसके अंदर एक

टैग होता है उसके अंदर बहुत सारा कंटेंट होता है कंटेंट किस तरीके से होता है एचटीएमएल टैग के अंदर खुद के बहुत सारे

टैग्स होते हैं वो सारा एचटीएमएल पेज का कंटेंट है तो एटीएमएल को हम रूट एलिमेंट कहते हैं क्योंकि यह सबसे बड़ा एलिमेंट है

और सबसे शुरुआती एलिमेंट है उसके बाद टैग और एक बॉडी टैग अब हेड क्या करता है हेड वो चीजें बताता है हमारे एचटीएमएल

डॉक्यूमेंट के लिए जो हमें वेब पेज पर डिस्प्ले नहीं करनी जो बस हमारे कोड को पता होनी चाहिए और बॉडी टैग बताता है वो

चीजें जो एक्चुअली हमारे पेज पर डिस्प्ले होती हैं जैसे हेड के अंदर हमारे पास कुछ मेटा इंफॉर्मेशन होती है मेटा इंफॉर्मेशन

यानी डेटा अबाउट डेटा वो इंफॉर्मेशन जो यूजफुल है पर हमें अपने पेज के ऊपर उसको डिस्प्ले नहीं कराना जैसे हमने यहां पे

नेम व्यू पोर्ट लिखा हुआ है कंटेंट विड डिवा स्ट ली हुई है यह व्यू पोर्ट वाली जो चीज है यह बेसिकली बताती है कि आपकी जो

वेबसाइट है वो रिस्पांसिस होनी चाहिए यानी अलग-अलग डिवाइसेज जिनकी हमने बात की थी अभी आपकी जो वेबसाइट है वो i एयर पर भी

अच्छी दिखे आपकी जो वेबसाइट है वो हमारे पिक्ल 5 पर भी अच्छी दिखे हमारी जो वेबसाइट है वो हमारे

पे भी अच्छी दिखें और बड़ी स्क्रीन पे भी जैसे आजकल लोग जो है बहुत ज्यादा अपने फस पे वेबसाइट्स खोलते हैं तो आजकल फोन के

हिसाब से वेबसाइट काफी ज्यादा डिजाइन होती है लैपटॉप के हिसाब से डिजाइन होती है तो उस तरीके से आपको देखना पड़ता है कि आप

अलग-अलग डिवाइसेटी डिजाइन कर रहे हैं इस चीज को हम रेस्पॉन्सिव कहते हैं कि हमारी वेबसाइट

रिस्पांसिस कितनी है कितना अच्छा रिस्पांस देती है जैसे ही हम स्क्रीन का साइज चेंज कर देते हैं एस्पेक्ट रेशो चेंज कर देते

हैं ये जो यहां पे आपको 412 दिखाई दे रहा होगा 914 दिखाई दे रहा होगा यह है एस्पेक्ट रेशो यानी दिखाता है कि हमारा

स्क्रीन का साइज कितना होने वाला है तो यहां पर यह जो व्यू पोर्ट वाली स्टेटमेंट है यह वाली स्टेटमेंट ये बेसिकली हमारे

एचटीएमएल पेज को रिस्पांसिस होना है यह बता रही है तो ये सारी जो इंफॉर्मेशन है ये सारी काम की इंफॉर्मेशन है पर ये हमारे

वेब पेज पर डिस्प्ले नहीं होंगी तो हेड के अंदर वो सारा पार्ट आता है जो वेब पेज पर डिस्प्ले नहीं होगा यहां पे हम अपने

एचटीएमएल डॉक्यूमेंट को एक टाइटल दे सकते हैं जैसे इसको हम टाइटल दे सकते हैं माय फर्स्ट पेज

तो यहां पे हम बात करें तो ये टाइटल भी खुद में एक टैग है जिसके अंदर टाइटल जो है हम लिखते हैं उसके बाद आ जाती है हमारी

बॉडी हम मोस्टली इस वीडियो के अंदर बॉडी के अंदर के सारे के सारे टैग्स को डिस्कस कर रहे होंगे बॉडी टैग के अंदर वो सारी

चीजें आती हैं जो डाटा को रेंडर कराने में हेल्प करती है ब्राउजर के ऊपर यानी क्या-क्या डाटा मुझे वेब पेज पे दिखाना है

वो सारा बॉडी के अंदर लिख रहे होते हैं जैसे हमने यहां पर पैराग्राफ टैग बनाया उसके अंदर हमने लिख दिया दिस इज अ

पैराग्राफ और वो सारा का सारा जो चीज है हमारे वेब पेज पर एक्चुअली जाकर हम हमारे लिए डिस्प्ले हुआ तो जो चीज हमें डिस्प्ले

करानी है वेब पेज के ऊपर उसको लिख देंगे अपने बॉडी टैग के अंदर तो ये कुछ फॉर्मेट रहता है किसी भी बेसिक एचटीएमएल पेज को

लिखने का जब भी हम शुरुआत करेंगे ये सारी चीजें हमें लिखनी चाहिए अब इनमें से कुछ-कुछ ऐसी चीजें हैं जिनको आप हटा देंगे

तो भी आपका कोड चल जाएगा पर वो एक ऑप्टिमम कोड नहीं होगा उस तरीके से कोड लिखना कहीं भी एडवाइजेबल नहीं होता अगर आपको

प्रोफेशनली अच्छा करना है या बहुत अच्छे प्रोजेक्ट्स बनाने हैं जिनको रेजूम के अंदर आप डालने वाले हैं और रिक्रूटर चेक

कर सकता है कोड को तो फिर उस हिसाब से आपको प्रॉपर्ली अपना कोड लिखना खना चाहिए तो ये सारी चीजें मेंशन करनी है अपने कोड

के अंदर और इन सारी चीजों का मतलब जो है एक तो एचटीएमएल की फायदा यह होता है कि किसी भी टैग का नाम देखकर आपको याद आ जाता

है कि हां ये इस चीज का टैग था तो इतनी ज्यादा चीजें हमें याद नहीं करनी पड़ती प्लस ये सारे के सारे नोट्स नीचे आपको

डिस्क्रिप्शन बॉक्स में मिल जाएंगे तो फिर कुछ ऐसे याद एज सच करने की जरूरत नहीं है प्रैक्टिस के साथ-साथ चीजें जो हैं अपने

दिमाग में ऑटोमेटिक बैठती जाएंगी कुछ भी कहीं भी प्रॉब्लम आती है अगर एटीएमएल को सीखने में तो ऑनलाइन बहुत सारे रिसोर्सेस

अवेलेबल हैं और नोट्स तो आप कभी भी खोल कर देख सकते हैं रिवीजन के लिए अब विजुअल स्टूडियो कोड का एक और छोटा सा फायदा होता

है कि किसी भी चीज के बारे में मतलब इस डॉक्यूमेंट में कुछ भी लिखा है उसके बारे में आपको और जानकारी चाहिए तो आप सिंपली

क्या कर सकते हैं वहां पर जाकर आप क्लिक करेंगे ना तो एमडीएन का एक लिंक आ जाएगा एमडीएन रेफरेंस आ जाएगी एमडीएन क्या है

मजला की तरफ से एक डेवलपर्स गाइड है पूरा का पूरा उसमें डॉक्यूमेंटेशन है एटीएमएल का सीएसएस का बाकी चीजों का तो यहां पे

जैसे हमने हेड पर क्लिक किया तो द डॉक्यूमेंट मेटा डाटा हेडर एलिमेंट ये सारी की सारी एक्स्ट्रा इंफॉर्मेशन आ

जिससे हम क्या कर सकते हैं और खुद से आगे बढ़ के चीजें सीख सकते हैं जैसे इसने बता दिया कि कौन-कौन से ब्राउजर्स में हेड जो

है हम लिख सकते हैं कौन-कौन से वर्जंस के लिए लिखा जा सकता है ब्राउजर कंपैटिबिलिटी बता दी तो उसके यूसेजेस एग्जांपल्स काफी

सारी चीजें आपको एडीन पे मिल जाएगी तो साथ-साथ मैं एडवाइस करूंगी कि आप एक बार ट्यूटोरियल खत्म कर लेते हैं उसके बाद जब

खुद से प्रोजेक्ट करने जाते हैं ना तो साथ-साथ थोड़ी-थोड़ी चीजें हमें एक्सप्लोर जरूर करनी है नेक्स्ट हम बात करते हैं कुछ

क्विक पॉइंट्स की इसमें सबसे पहला पॉइंट है कि इज पेरेंट ऑफ हेड एंड बॉडी टैग अब यहां पे

हमने एक हेड टैग देखा और एक बॉडी टैग देखा ये बॉडी वाला पार्ट है ऊपर हेड वाला पार्ट है हेड और बॉडी इन दोनों जो टैग्स हैं

उनका पेरेंट जो टैग होता है वो हमारा एचटीएमएल टैग होता है तो बाय डिफॉल्ट हेड और बॉडी जो टैग हैं वो हमारे एचटीएमएल टैग

के चिल्ड्रन हो जाते हैं और एक दूसरे के सिबलिंग हो जाते हैं आई होप ये अंडरस्टैंडिंग थोड़ी सी क्लियर होगी ये बस

बताने के लिए है इसका कोडिंग पर कोई फर्क हमारा पढ़ने नहीं वाला मोस्ट ऑफ द विद कंटेंट इन बिटवीन मोस्ट ऑफ जो हमारे

एचटीएमएल के डॉक्यूमेंट होते हैं जैसे हम पैराग्राफ की भी बात कर ले तो उसके अंदर हमारे पास कुछ कंटेंट होता है और एक

ओपनिंग टैग होता है एक क्लोजिंग टैग होता है ऐसे भी टैग्स एजिस्ट करते हैं जिसमें ओपनिंग क्लोजिंग अलग-अलग नहीं होता सिर्फ

एक सिंगल चीज आपको लिखनी पड़ती है जैसे नेक्स्ट लाइन के लिए हम एक बीआर टैग का इस्तेमाल कर रहे होते हैं और यह पूरा का

पूरा बीआर जो है ब्रेक लाइन टैग ये इतना ही लिखा जाता है इसके अंदर ना ओपनिंग होती है ना क्लोजिंग होती है बस इतना ही होता

है नेक्स्ट है सम टैग्स हैव नो कंटेंट इन बिटवीन जैसे हमारा बर टैग हो गया वी कैन यूज़ इंस्पेक्ट एलिमेंट या व्यू पेज सोर्स

टू एडिट html4 तो क्या हुआ वो सारा का सारा कोड जो हमने अपनी फाइल में लिखा हुआ था वोह सारा

यहां पर लिख कर आ गया यह वाला जो पार्ट है इसको अभी के लिए इग्नोर करना है क्योंकि यह सारा पार्ट यह नीचे आप जो स्क्रिप्ट

टैग के साथ पार्ट देख रहे होंगे यह सारा हमारे लाइव सर्वर ने हमारे लिए क्रिएट किया है तो इसको नहीं देखना अभी देखना है

सिर्फ अपने इतने एचटीएमएल वाले पार्ट को तो इसको हमने फाइल के अंदर लिखा था और यही सेम कोड हमारे लिए व्यू पेज सोर्स से खुल

गया तो इसमें हम कुछ चेंजेज चाहे तो यहां पर तो नहीं कर सकते लेकिन हम क्या कर सकते हैं इस पेज को कर सकते हैं इंस्पेक्ट

इंस्पेक्ट करने के बाद इसका रेशो जो है चेंज कर लेते हैं यह पूरा पार्ट हमारे लिए खुल गया है अब कोड के अंदर हम चाहे तो

एडिशनल चीजें ऐड कर सकते हैं जैसे यहां पर ऊपर हम एक और पैराग्राफ डाल सकते हैं न्यू पैरा

ग्राफ और इसमें भी हम अगर इसको कर ले सेव तो ये न्यू पैराग्राफ यहां पे आ गया तो इस तरीके से हम ब्राउजर पे जाके एक्चुअली

अपना पूरा का पूरा एचटीएमएल जो लेआउट है कंटेंट है उसको चेंज कर सकते हैं जो यहां पर चेंजेज नहीं लेकर आएगा मतलब एक्चुअल

कोड में चेंज नहीं होगा पर हमारे ब्राउजर पे हो जाएगा जैसे google.in एक्डी पडी करके कुछ इमेज है पर

यहां पे यह जो तो जैसे ही अपना कॉलेज सर्च लिखा तो यहां पे

google3 एमए पेज के अंदर आप कुछ भी जाकर चेंज कर सकते हैं पर इसमें आप सवाल उठाएंगे कि दीदी फिर तो इंटरनेट चलेगा

कैसे मतलब इंटरनेट पे कोई भी किसी की भी वेबसाइट पर जाकर कुछ भी चेंज कर सकता है तो ऐसा नहीं होता वेबसाइट के अंदर सिर्फ

एचटीएमएल नहीं होता और भी सारे कंपोनेंट्स होते हैं और ये जो आपने चेंज किया होगा ये नोटिस किया होगा ये हमने सिर्फ ब्राउजर पे

किया है हम अपने ओरिजिनल कोड में जाएं तो वहां पर ऐसा कुछ ऐड नहीं होता वैसे ही सिर्फ मेरे कंप्यूटर पर वोह कैसा दिख रहा

है उसको मैं चेंज कर पा रही हूं तो इस तरीके की जो चीजें हैं उनसे आप फन कर सकते हैं मतलब काफी सारा अब नेक्स्ट चीज की बात

करते हैं कॉमेंट्स इन एचटीएमएल एटीएमएल के अंदर हम कॉमेंट्स कैसे लिखते हैं सबसे पहले बात करते हैं कॉमेंट्स क्या होते हैं

जब भी हमें कोड के अंदर कुछ ऐसा पार्ट लिखना होता है जो हम नहीं चाहते कि हमारे कोड का पार्ट बने जैसे इंग्लिश में हमें

कोई लाइन लिखनी है कि दिस इज माय फर्स्ट कोड एंड आई एम वेरी नर्वस वाइल राइटिंग इट ऐसा सा हमें कुछ लिखना है कि अ ये जो है

हम एक बॉडी टैग डिफाइन कर रहे हैं तो दिस इज अ बॉडी टैग इस तरीके की चीज हम अगर लिखेंगे तो ये जो है ये इसको सेव करने के

बाद हम अपने पेज पर जाते हैं तो ये दिस इज अ बॉडी टैग हमारे लिए हमारी स्क्रीन पर आ गया है पर हम नहीं चाहते थे कि ये हमारी

स्क्रीन पर आए हम चाहते थे बस हमारे कोड में अगर कोई और बंदा हमारा कोड पढ़ रहा है मेरा कोई दोस्त पढ़ रहा है या कोई और

प्रोजेक्ट का पार्टनर पढ़ रहा है तो सिर्फ उसको ही ये पार्ट दिखाई दे तो ऐसी सिचुएशन में हमें कॉमेंट्स की जरूरत पड़ती है

कॉमेंट्स हमारी फाइल का वो पार्ट होते हैं जो कोड नहीं होता पर इंग्लिश होता है मतलब अगर आपका टेक्स्ट एडिटर जो है हिंदी में

कॉमेंट्स अलाव कर रहा है तो आप हिंदी में भी कॉमेंट्स लिख सकते हैं पर कॉमेंट्स की मेन बात होती है एक ऐसा हिस्सा होता है

हमारी फाइल का जो कोड में नहीं आता ये नॉर्मल हिंदी में हम इसको लाते हैं और इसको लिखने का फॉर्मेट रहता है कि आप

लिखेंगे एक एंगुलर ब्रैकेट उसके बाद हमारा एक्सक्लेमेशन मार्क एंड हाइफ हाइफ और बाद में लिखेंगे हाइफ हाइफ एंड

क्लोजिंग एंगुलर ब्रैकेट तो इसके अंदर आप जो भी पार्ट लिख देंगे ये सारा जो ग्रीन से आ रहा है यह सारा का सारा एक कॉमेंट है

यानी यह वाला पार्ट अब अगर हम इसको सेव कर दें तो अब हमारी वेबसाइट के ऊपर अब हमारे वेब पेज के ऊपर यह सारा पार्ट हमें नहीं

दिखेगा तो इस तरीके का कुछ फॉर्मेट रहता है हमारे कॉमेंट्स को हमारे कोड में लिखने का जैसे ऊपर अगर हम लिखना चाहे दिस इज माय

फर्स्ट एटीएमएल कोड इसको कर लेते हैं सेव और इसको हमने रिफ्रेश किया तो वो लाइन हमारे लिए डिस्प्ले नहीं हुई क्योंकि वो

ब्राउजर के लिए नहीं थी वो लाइन सिर्फ उन डेवलपर्स के लिए जो हमारा कोड पढ़ रहे हैं या इनफैक्ट हमारे लिए कभी-कभी प्रोजेक्ट्स

के अंदर या कंपनीज के अंदर जाकर आप बहुत सारा कोड लिख लेते हैं उस कोड में ना चीजें कन्फ्यूजिंग हो जाती है कि यार यह

वाला पार्ट किस लिए था यह वाला पार्ट किस लिए था यह वाला एलिमेंट कहां पर है वो वाली चीजें और कोई और भी आपका कोड पर आकर

सेम कोड पर आप काम करें तो कंफ्यूजन से बचने के लिए हम बहुत बार कॉमेंट्स लिखते हैं ताकि फायदा हो हमें पढ़ने में कोड को

तो कॉमेंट्स हमारे कोड का वो पार्ट होते हैं जो पार्स नहीं होता पार्स यानी हमारा ब्राउजर उसको रेंडर नहीं करता नेक्स्ट बात

करेंगे कि एचटीएमएल इ इ नॉट केस सेंसिटिव यानी कुछ-कुछ प्रोग्रामिंग लैंग्वेजेस होती हैं जैसे आप सी का एग्जांपल ले लें

c+ प का ले ले पाइथन का ले लें जावा का ले लें ये सारी जो प्रोग्रामिंग लैंग्वेजेस है ना ये के सेंसिटिव है इसके अंदर कैपिटल

ए और स्मल ए अलग-अलग माना जाता है पर एचटीएमएल के अंदर कैपिटल ए और स्मल ए सेम होता है जैसे अगर हमने ये टैग लिखा हुआ है

हेड इसके अंदर हम इसको कैपिटल एच ई ए डी भी कर दें तो भी हमारे कोड में कोई एरर नहीं आएगा अगर हम यहां पर पैराग्राफ लिखना

चाहे और हम इसको लिख दें कैपिटल p तो ये भी एक वैलिड टैग है और स्मल p वाला टैग और कैपिटल p वाला टैग दोनों की वैल्यू जो है

बिल्कुल सेम मानी जाएगी तो अपने टैग्स को अगर हम कैपिटल में लिखते हैं तो कोई डिफरेंस नहीं आता हमारे कोड पर क्योंकि

ब्राउजर के ऊपर ही एडिट कैसे कर सकते हैं अपने इंस्पेक्ट को खोलकर हमने यह सीख लिया पेज सोर्स से हमें पूरा का पूरा

html.erb नाम हम देंगे पोर्टफोलियो पोर्टफोलियो के अंदर सबसे पहले index.htm नाम की एक बेसिक फाइल हमें क्रिएट करनी है

उसके अंदर बॉयलर प्लेट कोड हमें लेके आना है उसके बाद उसमें बस हेलो वर्ल्ड हमें प्रिंट करना है या सिर्फ पोर्टफोलियो

प्रिंट करना है अभी के लिए कुछ एक्स्ट्रा चीजें नहीं करनी इतना पार्ट हमें कर लेना है अपने प्रोजेक्ट वन के लिए आई होप कि आप

यहां पर वीडियो को पॉज करेंगे और यह वाला पार्ट खुद से करके देखेंगे कोई भी इशू आता है तो दोबारा से हल्का सा पीछे रिवाइंड कर

लेना है उस वाले पार्ट को हल्का सा और देख लेना है नोट्स को और थोड़ा सा रेफर कर लेना है और कोई भी प्रॉब्लम आए तो आप नीचे

कमेंट कर सकते हैं और मुझे कमेंट करके जरूर बताना है कि आपने यह वाला जो पार्ट वन है प्रोजेक्ट का वो कंप्लीट किया है या

नहीं किया अब सेकंड हम बढ़ते हैं अपने लेवल टू की तरफ लेवल टू के अंदर हम डिस्कवर करने वाले हैं और ज्यादा डिटेल

में टैग्स के बारे में और सबसे पहले जो हम बेसिक्स ऑफ एचटीएमएल टैग्स में पढ़ेंगे वो है हमारे एचटीएमएल एट्रियो एचटीएमएल के

अंदर टैग्स के साथ-साथ एट्रिया कोई प्रॉपर्टी एसोसिएटेड होती है जैसे एट्रिक्स आर यूज्ड टू ऐड मोर

इंफॉर्मेशन टू द टैग अब जैसे पैराग्राफ टैग को हमने देख लिया ये ओपनिंग टैग है ये क्लोजिंग टैग है इन्होंने हमें यह तो बता

दिया कि हम पैराग्राफ लिखने वाले हैं पर मान लीजिए हमें और एक्स्ट्रा इंफॉर्मेशन डालनी है जैसे इस पैराग्राफ में जो हम

चीजें लिखने वाले हैं उसका फॉन्ट साइज क्या होने वाला है भाई हमारे टेक्स्ट का कलर क्या होने वाला है रेड होने वाला है

या ब्लू होने वाला है वैसे तो ये चीजें हमें सीएसएस से डिफाइन करनी चाहिए पर इनको हम एचटीएमएल की सहायता से भी डिफाइन कर

देते हैं लद यहां नहीं कर रहे होंगे जैसे फॉर एग्जांपल हमने एचटीएमएल टैग से बता दिया कि हम एचटीएमएल का डॉक्यूमेंट लिखने

वाले हैं और ये हमारा रूट एलिमेंट होगा पर इसमें हमने एक एट्रिल डाला लैंग इ इ e इस एट्रिल का मतलब है लैंग्वेज जिसमें हम यह

कोड लिखने वाले हैं वह है न यानी इंग्लिश अब यहां पर यह जो पार्ट है इसको हम कहते हैं एट्रबीक

है और इसके अंदर हमने ये एट्रिल लिखा है एट्रियो का नाम क्या है एटिबल है लैंग एट्रिल यानी लैंग्वेज एट्रियो तो लैंग्वेज

जिसका हम इस्तेमाल कर रहे हैं वो है इंग्लिश इसी तरह तरीके से और भी बहुत सारे एटिबल हम डिफरेंट डिफरेंट टैग्स के साथ

यूज़ कर सकते हैं अब ये जो एट्रिल है इसमें लेफ्ट साइड में एट्रिल का नाम होता है और राइट साइड में हम उसकी वैल्यू लिखते

हैं जैसे लैंग्वेज हमारे पास स्पैनिश भी हो सकती थी हिंदी भी हो सकती थी पर यहां पर इंग्लिश है और ये जो एट्रिल की वैल्यू

है इसको हम सिंगल कोट्स में भी लिख सकते हैं वो भी कंप्लीट वैलिड है और डबल कोट्स में भी लिख सकते हैं वो भी कंप्लीट वैलिड

है बट क्योंकि बाय डिफॉल्ट डबल कोट्स में लिखी जाती है स्ट्रिंग काफी सारी लैंग्वेजेस के अंदर तो हम अपने ट्यूटोरियल

में डबल कोट्स को फॉलो कर रहे होंगे बाकी आपका मन है सिंगल कोर्स में लिखने का वो ज्यादा कंफर्टेबल लगता है

python2 टैग की बात करेंगे यह है हमारा हेडिंग टैग जब भी हमें किसी डॉक्यूमेंट के अंदर कोई हेडिंग देनी होती है तो हम

हेडिंग टैग का इस्तेमाल करते हैं html2text h1 का साइज जो है बड़ा होता है फिर उससे छोटा h2 होता है उससे छोटा h3

होता है और ये इंपॉर्टेंस दिखाता है इनका साइज जिसका साइज सबसे बड़ा होता है वो सबसे ज्यादा इंपॉर्टेंट हेडिंग्स के लिए

यूज होना चाहिए जैसे h1 को हम सबसे ज्यादा इंपॉर्टेंट चीजें लिखने के लिए यूज करेंगे h6 को हम सबसे कम इंपॉर्टेंट चीजें लिखने

के लिए यूज करेंगे जैसे इसका एग्जांपल एक बार देख लेते हैं अपने कोड के अंदर इस पैराग्राफ को तो करते हैं दे कॉमेंट आउट

तो ये मैंने एक क्लिक से कैसे कमेंट आउट किया आपको प्रेस करना है कंट्रोल और स्लैश तो कंट्रोल स्लैश एक बार प्रेस करते हैं

तो जितना भी पार्ट सिलेक्टेड होता है वह सारा कमेंट आउट हो जाता है उसके बाद हम लिखने वाले हैं अपने टैग्स को तो सबसे

पहले h1 टैग को लिखते हैं हेडिंग वन फिर लिखेंगे अपना h2 टैग सिमिलर वे में अपना h3 टैग

लिखेंगे इसको कर लेंगे सेव एंड अब देखते हैं एक बार तो यह रहा हमारा कोड जिसमें हेडिंग वन जो है सबसे बड़ी है उसके बाद

हेडिंग टू है उसके बाद हेडिंग थ्री है एंड इस तरीके से कमकम इंपॉर्टेंस होती जा रही है हेडिंग्स की अब एक गलती जो काफी सारे

स्टूडेंट्स यहां पे करते हैं कि जब भी उन्हें बड़ा टेक्स्ट चाहिए होता है तो क्या करेंगे हेडिंग वन या हेडिंग टू का

इस्तेमाल कर लेंगे जब भी छोटा टेक्स्ट चाहिए होता है साइज में छोटा तो हेडिंग सिक्स या हेडिंग फाइव का इस्तेमाल कर

लेंगे ऐसा हमें नहीं करना चाहिए क्योंकि हम साइज डिफाइन कर सकते हैं हम फॉन्ट साइज बता सकते हैं अपने टेक्स्ट का पर हेडिंग्स

को इंपॉर्टेंस दिखाने के लिए हमें यूज करना चाहिए कभी भी साइज के लिए यूज नहीं करना चाहिए इसका फर्क एक्चुअली एसईओ पर

पड़ता है जब भी हम वेबसाइट्स को बना रहे होते हैं होते हैं तो उसके अंदर रैंक जो होती है कौन से वेब पेजेस

जो ज्यादा इंपॉर्टेंट है उसको बड़ी वाली हेडिंग दे जो कम इंपॉर्टेंट है उसको छोटे वाली हेडिंग दे तो साइज के लिए फॉन्ट साइज

करके एक प्रॉपर्टी होती है सीएसएस के अंदर जिसको यूज़ करते हैं टेक्स्ट का साइज डिफाइन करने के लिए नेक्स्ट बात करते हैं

पैराग्राफ टैग की अब पैराग्राफ टैग का काम होता है टू ऐड पैराग्राफ्स इन html5 पैराग्राफ हमारे लिए प्रिंट हो गया

अब ये जो वेबसाइट है अभी ट 100% पे है तो सारा का सारा टेक्स्ट इस तरीके से जगह भर नहीं लेता हमने थोड़ा ज़ूम इन करके दिखाया

हुआ है इनका अगर मैं एक्चुअल साइज दिखाऊं तो एक्चुअल साइज कुछ ऐसा है मतलब एक वेब पेज पर हेडिंग वन इतनी बड़ी दिखेगी

पैराग्राफ इतना बड़ा दिखेगा और हेडिंग सिक्स जो है इतनी छोटी दिखेगी तो ये सारी चीजें हमें ध्यान में रखनी है इनके कुछ

फिक्स साइजेस होते हैं फिक्स साइजेस जो हैं यहां पे जाके हम डॉक्यूमेंटेशन पढ़ सकते हैं एमडीएन वाली उसमें हमें पता चल

जाएगा किस हिसाब से रेशो रहता है वेब पेज के साइज के अब एक छोटी सी चीज की बात करेंगे यहां पर जैसे से पैराग्राफ के अंदर

मान लीजिए मैंने कोई बड़ा सा पैराग्राफ लिखा उसमें काफी सारी जो है हमने लाइंस ऐड कर दी हैं हमारे लिए क्या हुआ ये

हॉरिजॉन्टल स्क्रोल जो आ गया पर ये हमें नहीं चाहिए तो हम क्या करेंगे इस लाइन को पूरी को कर लेंगे सिलेक्ट उसके बाद अपनी

सेटिंग्स में जाएंगे सेटिंग्स में जाकर कमांड पैलेट ओपन करेंगे और उसमें टॉगल वर्ड रैप करके आएगा अगर नहीं आ रहा है तो

फिर आप इसको सर्च भी कर सकते हैं टॉगल वर्ड ड्रैप इस पर क्लिक करेंगे तो ये सारी की सारी जो चीजें हैं ना वो इस तरीके से आ

जाएंगी कि हॉरिजॉन्टल स्क्रोल हमारे लिए हट जाएगा और एक ही पेज में हमें सारी चीजें दिख जाएंगी ऐसे साइड साइड करके नहीं

देखना पड़ेगा एंड आप नोटिस करेंगे ये पूरी जो लाइन नंबर 20 है ये तीन लाइंस में स्प्लिट हो गई है और 21 यहां से शुरू हो

रही है तो इस तरीके से आप टॉगल वर्ड रप कर सकते हैं और सेम लाइन जो है डिफरेंट लाइंस में आपकी डिवाइड हो जाएगी रीडेबिलिटी बढ़

जाएगी यहां से फाइल को भी क्लोज कर देते हैं ताकि अच्छे से हम कोड को देख पाए अब नेक्स्ट टैग जिसकी बात करेंगे वो है हमारा

एंकर टैग एंकर टैग का काम होता है टू ऐड लिंक्स टू पेजेस एंकर टैग को लिखते हैं ए की हेल्प से पहले हम ए लिखते हैं उसके बाद

एचआरएफ होता है एचआरएफ यानी हमारा लिंक हमने किसी भी वेबसाइट का लिंक दे दिया अब लिंक की जगह हमारे पास डिस्प्ले क्या होगा

और फिर क्लोजिंग टैग इसको करके देख लेंगे तो बेटर समझ में आएगा कभी-कभी हमारे कुछ वेब पेजेस होते हैं जिस पर कुछ लिंक होता

है यानी दूसरी वेबसाइट की तरफ वो लिंक कर रहा होता है तो उनको हम क्रिएट करते हैं एंकर टैग की हेल्प से जैसे हम लिखेंगे ए

एच आरई यहां पर क्या करेंगे google.com का हम लिंक पेस्ट कर देते हैं

पेज खुल जाएगा तो अगर आपको अपनी वेबसाइट से किसी और वेबसाइट पर जाना है या अपने ही किसी और वेब पेज पर जाना है और उसका आप

लिंक देना चाहते हैं यूजर को तो आप सिंपली एंकर टैग का इस्तेमाल कर सकते हैं जैसे यहां पर अगर हम देना चाहे तो ए

एचआरएफ इज इक्वल टू अपने विजुअल स्टूडियो कोड का हम लिंक जो है दे देते हैं डाउनलोड करने के

लिए डाउनलोड वीएस कोड तो इसको कर लेते हैं सेव अब अपने मेन पेज पर जाएंगे तो यहां पर हमारे लिए क्या

होगा यह दिया क्योंकि दोनों के बीच में बीआर टैग लग गया था तो डाउनलोड वीएस कोड पर जैसे ही

क्लिक करेंगे तो हमारे लिए वीएस कोड वाली पूरी वेबसाइट खुल जाएगी तो कुछ इस तरीके से हम अपने एटीएमएल पेज के अंदर और

डिफरेंट पेजेस के साथ लिंक करवा सकते हैं यूजिंग एंकर टैग अब यह तो हमने देखा कि कैसे दूसरी वेब पेजेस पर जा सकते हैं हम

खुद की वेबसाइट के भी दूसरे वेब पेज पर जा सकते हैं जैसे अभी अपने एटीएमएल ट्यूटोरियल्स वाले फोल्डर के अंदर एक और

फाइल क्रिएट कर लेते हैं जिसको नाम देते हैं लोड इस फाइल में भी बॉयलर प्लेट कोड लिखते हैं

क्लिक करेंगे एट पे तो यह कोड आ गया है और इस फाइल का काम है टू प्रिंट हेलो यहां पर बॉडी के अंदर एक हेडिंग वन

दे देते हैं उसमें लिखते हैं हेलो कर लेते हैं सेव अब इंडेक्स फाइल के अंदर क्या करेंगे यहां एक बीर टैग लगा देते हैं एक

और एंकर टैग बनाते हैं जिसमें एच आरई इ इक्वल टू लिखेंगे हम स्ल हेलोड

एटीए गो टू हेलो इसको कर लेते हैं सेव एंड अब इसको रन करते हैं तो यहां पे एक अलग ऑप्शन आ गया गो टू हेलो जैसे ही गो टू

हेलो पर क्लिक करेंगे तो हम हेलो पे पहुंच गए मतलब लोड html5 हो गया है यहां से हम बैक जाकर

इक्सड होते हैं हमारी वेबसाइट जो है लिंक होती है डिफरेंट डिफरेंट पेजेस जो हैं लिंक

होते हैं कि इस बटन को क्लिक करने के बाद अगला पेज लिंक होगा उसको क्लिक करने के बाद अगला पेज लिंक होगा तो इस तरीके के जो

बेसिक लिंक्स हैं वो हम html.com या visualstudio.com उनको हम कहते हैं एब्सलूट लिंक एब्सलूट लिंक यानी

किसी दूसरी वेबसाइट का लिंक पर जब हम खुद ही की वेबसाइट का यानी खुद ही का हमने दूसरा वेब पेज लिया h html.erb

देते हैं मूव तो अब यहां पे यह जो रिलेटिव लिंक है index.htm के अंदर इसको हमें चेंज करना पड़ेगा इसको हमें करना पड़ेगा हेलो

फोल्डर स् h.h. ही नहीं करता तो एक तरीके से जब भी हम लिंक डाल रहे हैं रिलेटिव पाथ या रिलेटिव

लिंक डाल रहे हैं इसलिए इसको रिलेटिव लिंक कहते हैं और दूसरे वाले लिंक को कहते हैं एब्सलूट लिंक अब नेक्स्ट टैग जिसकी बात

करेंगे वो है हमारा इमेज टैग हमारे पेजेस के ऊपर कभी-कभी हम काफी सारी सुंदर इमेजेस दिखा सकते हैं जैसे

google's का लोगो ऊपर दिखा दिया ये सारी इमेजेस हैं जो यहां पर आ गई हैं तो हम भी अपने वेब पेज के ऊपर सुंदर सी

इमेजेस जो हैं वो ला सकते हैं और उनको लाते हैं हम इमेज टैग की हेल्प से इमेज टैग का काम होता है टू ऐड इमेजेस टू योर

पेज तो इसमें हम लिखते हैं एंगुलर ब्रैकेट आईएमजी फॉर इमेज फिर लिखते हैं सोर्स एसआरसी ये सोर्स एट्रिल बताता है कि इमेज

का लिंक क्या होने वाला है इसमें भी हम रिलेटिव यूआरएल दे सकते हैं या एब्सलूट यूआरएल दे सकते हैं मतलब अगर हमें इंटरनेट

पर पड़ी हुई कोई इमेज डिस्प्ले करानी है या हमारी तो उसका आप लिंक यहां पर दे सकते हैं नहीं

तो आप अपने फोल्डर के अंदर भी कोई इमेज डाउनलोड करके दे सकते हैं तो उसका यहां पे लिंक आ जाएगा फिर ऑल्ट नाम की कोई चीज भी

हम यहां पे लिखते हैं तो एक बार क्या करते हैं एक सैंपल इमेज को डिस्प्ले करा कर देखते हैं जैसे हम सर्च कर लेते हैं फॉर अ

नोटबुक नोटबुक के लिए सर्च करेंगे इमेजेस के अंदर जाएंगे और यह कोई नोटबुक की रैंडम फोटो हमारे पास आई है अब

इस इमेज का एड्रेस हम कॉपी कर लेते हैं कॉपी इमेज एड्रेस यहां पे क्रिएट करेंगे एक इमेज टैग आईएमजी एसआरसी इ इक्वल टू यह

हमने डाल दिया अपनी इमेज का एड्रेस और इसको कर देंगे क्लोज तो इसको कर लेते हैं सेव यह हमारी इमेज का एड्रेस आ गया है डॉट

जपजी फॉर्मेट में है जे पेग में अब पेज के ऊपर क्या हुआ ऊपर सारा का सारा कंटेंट है और नीचे हमें एक इमेज डिस्प्ले करानी थी

नोटबुक की तो हमारे लिए नोटबुक डिस्प्ले होकर आ गई है अब ये जो इमेज है मान लीजिए किसी दिन इंटरनेट जो है बिल्कुल नहीं चल

रहा और इस इमेज को हम लोड ही नहीं कर पा रहे या हमारे लिए गलती से इस इमेज का नाम जो है वो गलत टाइप हो गया ये amazon.com

पर नहीं है ये हम चाहते हैं यूजर को पता चले कि उस इमेज में एक्चुअली था क्या कुछ ऐसा तो नहीं था

इंपॉर्टेंट जो वो मिस आउट कर रहे हैं या उसको एटलीस्ट इतना हो कि यार इसमें कुछ इंपॉर्टेंट नहीं था तो कोई बात नहीं लोड

नहीं हो रहा तो तो वहां पे हम यूज़ करते हैं ऑल्ट टैग का ऑल्ट क्या करता है हमारी इमेज के लिए एक अल्टरनेटिव नाम हमें दे

देता है जैसे ऑल्ट में हम डाल देंगे नोटबुक इसको कर लेते हैं सेव अब जब इमेज लोड नहीं होगी तो यहां पता चल जाएगा कि वो

इमेज एक नोटबुक की इमेज थी और अगर किसी केस में हम यहां पर सही इमेज का जो है लिंक डाल ते हैं जैसे हम डाल रहे हैं

के अंदर हमने ऐड कर लिया है अब index.htm पे जाएंगे और यहां पर सोर्स में हम एब्सलूट यूआरएल एब्सलूट लिंक हटा देंगे और

अब रिलेटिव यूआरएल डालेंगे यानी लिखेंगे स्लैश हमारी जो इमेज का नाम है इस इमेज का नाम एक बार चेंज कर लेते हैं इसको रिनेम

करके कर देते हैं इमेज तो index.htm के अंदर यहां पर लिखेंगे इमेज ड जपक इसको कर लेते हैं सेव और अब हम जब रिफ्रेश करेंगे

तो वो सेम इमेज हमारे लिए प्रिंट हो रही है यानी उस इमेज को हम फोल्डर के अंदर डाल के भी एक्सेस कर सकते हैं यूजिंग रिलेटिव

यूआरएल और इंटरनेट से भी एक्सेस कर सकते हैं यूजिंग एब्सलूट यूआरएल एक चीज हम नोटिस करेंगे कि हमारा टेक्स्ट तो पूरे

वेब पेज पर छोटा-छोटा सा है पर हमारी इमेज जो है नोटबुक की इमेज वो भी वो इतनी बड़ी सी हमें दिखाई दे रही है तो इस केस में हम

इस नोटबुक को ना रिसाइट कर सकते हैं अपनी इमेज को रिसाइट कर सकते हैं उसके लिए कौन सा एट्रिल यूज़ करेंगे उसके लिए यूज़ कर

सकते हैं हम हाइट एट्रिल जैसे अगर इसकी हाइट को हमें सेट करना हो तो मान लीजिए उसको हमने 100 एक बार सेट करके देख लेते

हैं तो इस तरीके से उसकी हाइट जो है कम हो गई अब इसमें हाइट और विड्थ दो एटिबल होते हैं हम इसकी विड्थ को भी बड़ा और छोटा कर

सकते हैं पर एडवाइजेबल यह होता है कि एक बार में हम एक ही एट्रिल करें जैसे हाइट को सेट करें तो सिर्फ हाइट को सेट करें

विड्थ को सेट कर रहे तो सिर्फ विड्थ को सेट करें वरना दोनों को एक साथ सेट करते हैं ना तो हमारा एस्पेक्ट रेशो फोटो का

बिगड़ जाता है जैसे अगर हम यहां पर विड्थ को भी सेट कर दें एज मान लीजिए इसको 50 सेट कर दे तो नोटबुक अब यहां पे हल्की सी

जो है अजीब दिख रही है इसका डायम खराब हो गए हैं तो इस तरीके के डायमेंशन तब खराब होते हैं जब आप जबरदस्ती हाइट भी सेट करने

की कोशिश करते हैं जबरदस्ती विड्थ भी सेट करने की कोशिश करते हैं तो इसीलिए बेस्ट केसेस में एडवाइजेबल होता है कि दोनों में

से एक ही हम सेट करें और स्पेसिफिकली हाइट और विड्थ जो है ना ये ऐसी चीजें हैं जो सीएसएस के साथ बदलनी चाहिए यानी जो भी

हमारे कलर होते हैं चीजों के या जो भी उनका साइज होता है वो सब एडवाइजेबल होता है कि आप सीएसएस की मदद से करें एचटीएमएल

में एटिबल एजिस्ट करते हैं पर हमेशा सीएसएस की तरफ जाना चाहिए तो इसलिए यहां पर हम हाइट विड्थ सेट नहीं कर रहे होंगे

उतना ही हम रहने देंगे पर यहां पे हमने एग्जांपल देख लिया कि सीएसएस कितना मैजिकली चीजों को ट्रांसफॉर्म कर देता है

मतलब आपको साइज अगर चेंज करना है या कितना ब्यूटीफाई आप करना चाहते हैं अपनी वेबसाइट को अपने वेब पेज को वो सारा का सारा काम

आपको सीएसएस करके देती है नेक्स्ट टैग जिसकी हम बात कर रहे होंगे वो है हमारा बीर टैग बीआर टैग को ऑलरेडी यूज़ कर चुके

हैं और इसका काम होता है टू ऐड नेक्स्ट लाइन या लाइन ब्रेक टू योर पेज अब बीआर टैग को हमने यहां पे इस्तेमाल कर लिया था

तो जो जो अलग-अलग एलिमेंट्स होते हैं उनको नेक्स्ट लाइन नेक्स्ट लाइन में लाने के लिए हमें बीआर टैग का इस्तेमाल करना होता

है अब ये जो बीआर टैग होता है ना ये एक एमटी टैग होता है मतलब इसके अंदर कोई भी एडिशनल एटिबल नहीं आते कोई भी एडिशनल

कंटेंट नहीं आता ये खुद में अलग एक खाली सा टैग है जिसको आप जहां भी लिख देंगे ये आपके लिए नेक्स्ट लाइन में कंटेंट ले आएगा

नेक्स्ट बात करते हैं बोल्ड इटैलिक एंड अंडरलाइन टैग्स की अब हमने कंटेंट तो बहुत सारा लिख लिया पैराग्राफ में लिख लिया

हेडिंग में लिख लिया कहीं पर इमेज के अंदर लिख लिया पर उस कंटेंट को हमें कभी-कभी थोड़ा हाईलाइट करना पड़ता है जैसे

googlegroups.com के अंदर या फिर अ माइक्रोसॉफ्ट वर्ड के अंदर हम क्या करते हैं टेक्स्ट को पैराग्राफ के अंदर कुछ

पार्ट बोल्ड में दिखाते हैं जो इंपॉर्टेंट होता है कुछ को अंडरलाइन कर लेते हैं कुछ को इटैलिक में दिखाते हैं वैसे ही हमारे

पास टैग्स होते हैं html5 इन योर पेज बोल्ड के लिए हम बी टैग का इस्तेमाल करते हैं उसके बीच में जो भी

लिख देंगे वो बोल्ड हो जाएगा जैसे हम यहां पर लिखने वाले हैं b एंड नीचे लिख देंगे बोल्ड तो इसको कर लेते हैं सेव और एक बार

नीचे जाकर देखते हैं तो यह क्या हुआ हमारा जो टेक्स्ट है यह बोल्ड होकर आया है यहां पर एक लाइन ब्रेक ऐड कर देते हैं तो ये

बोल्ड टेक्स्ट हमारे लिए आ गया है अब सिमिलरली अगर हमें इटैलिक करना है तो उसके लिए आई टैग का यूज करते हैं यहां पे जो भी

चीज हम लिखेंगे वो हमारे लिए इटैलिक में आएगी और अंडरलाइन करना है तो उसके लिए य टैग का इस्तेमाल करना है अंडरलाइन उसको कर

लेते हैं सेव सबको हम नेक्स्ट लाइन में लाने के लिए बीर टैग का इस्तेमाल कर लेते हैं और इनफैक्ट बाद में भी हमें कुछ खाली

लाइंस चाहिए होंगी तो चार पांच लिख के रखते हैं तो ये क्या हुआ बोल्ड के लिए बोल्ड में प्रिंट हुआ इटैलिक में प्रिंट

हो गया और कोई भी टेक्स्ट को हम अंडरलाइन कर सकते हैं अब सिंस हम टैग्स के अंदर भी टैग लिख सकते हैं जैसे अगर हम कोई

पैराग्राफ लिखना चाहते हैं मान लीजिए हमें यह वाला जो पैराग्राफ है वह लिखना है और इसके अंदर हम चाहते हैं कि पहला जो सैंपल

पैराग्राफ है वह हमारे लिए अंडरलाइंड होकर आए तो उसके बीच में हम लिख देंगे य और उसके बीच में अपने सैंपल पैराग्राफ को डाल

देंगे तो यह पैराग्राफ टैग था इसके अंदर हमने अपना अंडरलाइन टैग डाल दिया और उसके बाद ल दिया बाकी सारा कंटेंट इसको सेव कर

लेते हैं और देखते हैं तो यह सारा का सारा पैराग्राफ हमारे लिए प्रिंट हो गया पर उसमें जो शुरुआत वाला सैंपल पैराग्राफ है

उसमें अंडरलाइन होकर आया है तो एक सेम पैराग्राफ के अंदर आप डिफरेंट डिफरेंट वर्ड्स को कहीं अंडरलाइन कर सकते हैं कहीं

इटैलिक कर सकते हैं कहीं बोल्ड कर सकते हैं नेक्स्ट टैग जिसकी बात करेंगे वो है बिग एंड स्मॉल टैग्स यह बिग टेक्स्ट या

स्मॉल टेक्स्ट के लिए यूज होते हैं जैसे अगर हम यहां पर लिखें बिग दिस टैग शोज बिग

टेक्स्ट और फिर लिखें स्मॉल दिस टैग शोज स्मॉल टेक्स्ट और इसको कर लेते हैं सेव एंड रन तो यह जो है हमारा

शुरुआत वाला जो टेक्स्ट है बिग की हेल्प से बहुत बड़ा सा टेक्स्ट प्रिंट होगा मतलब फंट साइज इसका बड़ा है और स्मॉल वाला साइज

में स्मॉल प्रिंट होगा तो बड़े टेक्स्ट के लिए बिग टैग यूज कर सकते हैं छोटे टेक्स्ट के लिए हम स्मॉल टैग यूज कर सकते हैं

नेक्स्ट हमारा आता है एचआर टैग एचआर होता है हॉरिजॉन्टल रूलर अब ये काम का क्या करता है हॉरिजॉन्टल रूलर का काम करता है

मतलब इट इज यूज टू सेपरेट कंटेंट जब भी हमें कंटेंट को हॉरिजॉन्टल सेपरेट करना होता है उसके बीच में स्पेस लानी होती है

तो हम हॉरिजॉन्टल टैग का यूज करते हैं जैसे यहां पर बिग टेक्स्ट और स्मॉल टेक्स्ट के बीच में हमें थोड़ी स्पेस

चाहिए तो हम क्या बीच में डाल देंगे एआर को एआर को हमने डाला इसको कर लिया सेव तो ये दिस टैग शोज बिग टेक्स्ट ऊपर आ गया और

दिस टैग शोज स्मॉल टेक्स्ट नीचे आ गया और बीच में एक स्पेस आ गया और स्पेस के साथ आई एक लाइन तो हॉरिजॉन्टल रूलर रूलर क्या

होता है स्केल होता है इंग्लिश के अंदर रूलर का मतलब स्केल होता है जो जब भी आपको टेक्स्ट के बीच में डिफरेंट डिफरेंट

सेक्शंस के बीच में एक लाइन चाहिए जो डिवाइड कर रही है डिफरेंट सेक्शंस को तो आप वहां पर रूलर का इस्तेमाल कर सकते हैं

जैसे एचआर टैग को हम अगर अपने अलग-अलग सेक्शंस के अंदर डाल दें हमने एक एच आर जो है यहां पर डाल दिया है एक एचआर को हम

यहां पर डाल देते हैं एक को डाल देते हैं इस इमेज के बाद एंड एक को डाल देते हैं इन लिंक्स के बाद एआर इसको कर लेते हैं सेव

तो हमारा जो पूरा वेब पेज है वह अलग-अलग पार्ट्स में डिवाइड हो गया है ऊपर सारा हमारा हेडिंग से रिलेटेड और एंकर से

रिलेटेड कंटेंट है बीच में हमारी इमेज आ गई है फिर हमारे बोल्ड इटैलिक अंडरलाइन आ गए हैं फिर हमारा पैराग्राफ आ गया है फिर

बिग टेक्स्ट आ गया और फिर स्मॉल टेक्स्ट आ गया है तो जब पेज में डिफरेंट डिफरेंट कंटेंट है उसको अलग-अलग सेक्शंस में

डिवाइड करना है तो यूज़ करना है एचआर टैग का नेक्स्ट बात करते हैं सब स्क्रिप्ट और सुपरस्क्रिप्ट टैग की कभी-कभी हमारे वेब

पेज पर हो सकता है कि हम केमिस्ट्री से रिलेटेड कोई रिसोर्सेस का पेज बना रहे हैं उसमें हमें फॉर्मूले लिखने हैं तो

केमिस्ट्री से रिलेटेड फॉर्मूले कुछ ऐसे लगते हैं h2o या मान लीजिए हमें कुछ और लिखना है c6 h12 o6 ऐसा कुछ लिखना है हमें

co2 लिखना है हमें o3 लिखना है तो इस तरीके में हमें ये जो थ्री है ये जो टू है ये जो सिक्स है इनको हम कहते हैं

सब्सक्रिप्ट सब्सक्रिप्ट यानी वो वाला पार्ट वो वाला टेक्स्ट जो नॉर्मल टेक्स्ट के हल्का सा नीचे आता है उसको लिखने के

लिए हम यूज करते सब अपने सब टैग का तो सब टैग को कैसे लिखते हैं मान लीजिए हमें h2o लिखना है तो सब टैग को हम कुछ ऐसे लिख रहे

होंगे पहले एक लाइन दे देते हैं फिर लिखते हैं पहले पैराग्राफ के अंदर नॉर्मल लिखेंगे अपना एच उसके बाद लिखेंगे सब में

लिखेंगे टू और फिर नॉर्मली लिखेंगे ओ इसको सेव करके अगर दिखाएं तो कुछ ऐसा दिखेगा h फिर ये जो टू है ये सब्सक्रिप्ट बन गया है

और o हमारा नॉर्मल साइज का है तो इस तरीके से हम केमिकल फ फर्मूला दिखा सकते हैं अब जहां

सबस्क्रीन लीजिए आपको मैथ के कोई फॉर्मूले लिखने हैं जैसे a टू द पावर n + b तो इसमें जो टू द पावर n है ये सुपरस्क्रिप्ट

है यानी छोटा सा टेक्स्ट है और नॉर्मल टेक्स्ट के ऊपर आता है या थ्री का जब स्क्वायर निकालते हैं तो उसकी वैल्यू नाइन

होनी चाहिए तो इसमें जो टू है ये हमारा सुपर स्क्रिप्ट है इसको लिखने के लिए हम सुपर टैग का इस्तेमाल करते हैं तो सुपर

टैग को लिखने के लिए सब सबसे पहले पैराग्राफ क्रिएट करते हैं फिर लिखते हैं थ्री अब इसमें लिखेंगे

एय अंदर डाल देंगे टू इ इक्व ट 9 तो सिर्फ सुपरस्क्रिप्ट में क्या आ जाएगा सिर्फ टू जाएगा हमारे

सुपरस्क्रिप्ट में इसको सेव कर लेते हैं तो ये 3 का स्क्वा = 9 इस तरीके का मैथमेटिकल फार्मूला भी हमारे लिए प्रिंट

हो गया नेक्स्ट बात करते हैं प्री टैग की प्री टैग क्या करता है इट इज यूज्ड टू डिस्प्ले टेक्स्ट एज इट इज विदाउट इग्नोर

स्पेसेस एंड नेक्स्ट लाइन आप नोटिस करेंगे अगर किसी भी पैराग्राफ के अंदर अब यहां पर हो सकता है हम एक नॉर्मल सा कोई पैराग्राफ

बनाएं जैसे हमने एक पैराग्राफ बनाया है इसके अंदर हम काफी सारी चीजें लिख सकते हैं यह आप एल ओ आर एम लिखेंगे तो एमेट एक

और आ जाएगा जिससे आप कोई भी सैंपल टेक्स्ट जो है वो डिस्प्ले करा सकते हैं अब यहां पेय जो सैंपल टेक्स्ट है ये सारा का सारा

डिफरेंट डिफरेंट लाइंस में है पर जब हम इसको सेव करके देखेंगे तो यह सैंपल टेक्स सिम सिंगल लाइन में हमारे लिए डिस्प्ले

होगा ऐसा क्यों क्योंकि ना आपकी स्पेसेस को काउंट करता है ना आपकी नेक्स्ट लाइन को काउंट करता है आप यह लोरम

और यह इप्सम के बीच में चाहे आप हजार स्पेसेस दे दें मतलब इतनी सारी हमने स्पेस देके इसको सेव किया

तो आप नोटिस करेंगे सेव करने के बाद जब फॉर्मेट हो रहा है ऑटो फॉर्मेट तो वो स्पेस हट जा रही है एंड इनफैक्ट आप ऑटो

फॉर्मेट नहीं भी करेंगे और फिर भी आप अपनी वेबसाइट पे जाएंगे तो वो स्पेसेस को काउंट ही नहीं करेगा ऐसे केसेस में अगर हमारे

पास ऐसी सिचुएशन आती है जिसमें हमें स्पेसेस को नेक्स्ट लाइन को काउंट कराना होता है तो उस केस में क्या करते हैं इस

पी टैग को बस प्री टैग बना देना है प्री अब यह जो स्पेस है यह ऑटोमेटिक फॉर्मेट से हट नहीं जाएगी अब आप डिस्प्ले कराएंगे तो

यहां पे यह स्पेस ऑटोमेटिक आपके लिए आएगी तो जब भी आपको खुद की लिखी हुई स्पेसेस चाहिए खुद की लिखी हुई नेक्स्ट लाइन चाहिए

तो हम वहां पर यूज़ करते हैं प्री टैग का अब यहां तक बात करते-करते सारे हमारे जो बेसिक या मोस्ट इंपॉर्टेंट एचटीएमएस मैं

जिनको कहूं जो बहुत ज्यादा फ्रीक्वेंसी बेसिकली कवर कर लिए है अब हम बढ़ते हैं अपने प्रोजेक्ट के सेकंड पार्ट की तरफ

जहां हम अपने प्रोजेक्ट्स में और ज्यादा इंप्रूवमेंट्स करेंगे अपने पोर्टफोलियो में इंप्रूवमेंट्स करेंगे तो यहां पे

मैंने कुछ टास्क डाला है इस टास्क को आप कंप्लीट कर सकते हैं साथ के साथ अपनी भी इमेजिनेशन लगा सकते हैं कि क्या-क्या

चीजें हम एडिशनल ऐड कर सकते हैं जैसे सबसे पहले तो हमें तीन पेजेस क्रिएट करने हैं हमने ऑलरेडी एक index.htm क्रिएट किया था

अपने पोर्टफोलियो में अब हमें अपने एजुकेशन के लिए अलग से पेज बनाना है एक्सपीरियंस के लिए अलग से पेज बनाना है

और प्रोजेक्ट्स के लिए अलग से पेज बनाना है और इन सारे पेजेस का जो लिंक है वो हमारे होम पेज पर होना चाहिए तो ये

फंक्शनालिस में हम एक्स्ट्रा ऐड करने वाले हैं कि होम पेज से आप किसी भी बटन पर क्लिक करके अपनी एजुकेशन भी देख पाए आपका

एक्सपीरियंस भी देख पाए कोई भी आकर और आपके प्रोजेक्ट्स भी देख पाए हो सकता है आप कोई और रिलेवेंट इंफॉर्मेशन जो है

दिखाना चाह रहे हो जैसे आपने कोई अचीवमेंट्स जो है ली हैं या आपकी हॉबीज आप बताना चाह रहे हैं तो उसके लिए भी आप

एडिशनल पेजेस बना सकते हैं तो आई होप कि ये चीज आप कर रहे होंगे एंकर टैग का हमें इस्तेमाल करना है उन पेजेस के अंदर

इंफॉर्मेशन भी डालनी है तो हेड हेडिंग्स का यूज करना है प्रॉपर हेडिंग्स अपने स्मॉल टेक्स्ट बिग टेक्स्ट का हम यूज कर

सकते हैं पैराग्राफ का यूज कर सकते हैं सुपरस्क्रिप्ट सब स्क्रिप्ट बना सकते हैं जब आप परसेंटेज दिखा रहे होंगे या सीजीपीए

बता रहे होंगे तो उसमें उन चीजों का इस्तेमाल हो सकता है तो आई होप कि आप यहां पे वीडियो को पॉज करेंगे प्रोजेक्ट का

सेकंड पार्ट कंप्लीट करेंगे ताकि मेमोरी के अंदर जो भी टैग्स हमने इंपॉर्टेंट डिस्कस किए हैं अभी वो सारे के सारे बैठ

जाए जब भी डाउट आए अपने आप नोट्स कभी भी खोल सकते हैं उसके अंदर चीजें रेफरेंस कर सकते हैं एंड इसके बाद बढ़ेंगे हम अपने

लेवल थ्री की अब हम शुरुआत करने वाले हैं अपने लेवल थ्री की और यहां तक हमने काफी सारे जो इंपॉर्टेंट टैग्स हैं वो कवर कर

लिए हैं चैप्टर थ्री के अंदर अपने लेवल थ्री के अंदर हम डिस्कस करेंगे लेआउटस एचटीएमएल के अंदर क्या होते हैं अब

कभी-कभी ऐसा होता है कि हमें ऐसे टैग्स यूज करने पड़ते हैं जिसका इफेक्ट हमें अपने वेब पेज के ऊपर तो दिखाई नहीं देता

पर इंटरनली हमारा वेब पेज कैसे काम कर रहा है मतलब एसईओ रैंकिंग्स में हमारा वेब पेज ऊपर जा रहा है या नीचे जा रहा है उस पर वो

चीजें काफी हैवी इंपैक्ट डाल सकती हैं इसमें सबसे पहले बात करेंगे पेज लेआउट टेक्निक्स की जिनमें से सबसे पहली टेक्नीक

है यूजिंग सिमटिक टैग्स अब html5 टैग्स और एक होते हैं हमारे नॉन सिमटिक टैग्स सिमटिक टैग्स वो होते हैं

जिनको देख के उनका मतलब समझ में आ जाए जैसे एटीएमएल मतलब हमारे पेज का एक हेडर होता

है उसको हेडर बनाते हैं या फिर जो पेज का फुटर होता है मतलब फुटर के अंदर ही सारी फुटर वाली चीजें लिखी जा रही होती हैं तो

इनके नाम से ही पता चलता है कि इन टैग्स के अंदर एक्चुअली होने क्या वाला है दूसरे होते हैं हमारे नॉन सिमटिक टैग्स जिनको

देख के क्लियर नहीं होता कि उनका एक्चुअली मतलब क्या है जैसे आगे जाके हम पढ़ेंगे कि डिव नाम का या स्पैन नाम का कोई टैग होता

है तो उसमें हम क्या-क्या चीजें कर रहे होंगे अब यहां डिव या स्पैन से हमें क्लियर नहीं हो रहा कि डिव या स्पैन के

अंदर हम एक्चुअली पढ़ने क्या वाले हैं तो ये आ जाते है नॉन सिमटिक की कैटेगरी में सिमटिक के अंदर हेडर फुटर हमें पता है कि

कोई वेबसाइट का हेडर होगा तो उसकी ऊपर जो डिटेल्स होती है वेब पेज पे वो हम लिखने वाले हैं कुटर में नीचे वाली चीजें तो इस

तरीके से कैटेगरी डिवाइडेड होती हैं तो हमारी वेबसाइट के अंदर सिमटिक टैग्स को यूज़ करने के दो-तीन फायदे होते हैं सबसे

पहला फायदा तो ये होता है कि हमारा जो कोड है वो और ज्यादा रीडेबल बनता है और ज्यादा स्ट्रक्चर्ड तरीके से हम अपना पूरी की

पूरी एचटीएमएल की फाइल के अंदर जितनी भी हमें लाइनें लिखनी है वो लिख पाते हैं दूसरा ये होता है किसी भी वेब पेज को अगर

हमने बेसिक प्योर वनला एटीएमएल से बनाया तो उस वो रैंकिंग्स में फायदा होता है यानी जितना आप सिमटिक टैग्स को यूज करेंगे

उतना बेटर रहेगा उतना एसईओ आपका ज्यादा इंप्रूव्ड होगा और तीसरा यह होता है कि गुड यूजर एक्सपीरियंस होता है यूजर

एक्सपीरियंस किस तरीके से होता है कभी-कभी ना अ कुछ विजुअल अ या ऑडियो बेस्ड हमारे यूजर्स होते हैं उसके साथ-साथ जब आप सही

लेआउट का इस्तेमाल करते हैं तो यूजर एक्सपीरियंस भी बढ़ जाता है इसीलिए हमें यूज़ करना चाहिए राइट टैग्स को राइट चीजों

के लिए सही टैग्स को सही काम के लिए यूज़ करना चाहिए ऐसा नहीं है कि हम कोई पैराग्राफ टैग या कोई हेडिंग टैग बना दें

और उसके अंदर हम अपनी हेडिंग डाल रहे हैं और उसको हम कह रहे हैं यह हमारी वेबसाइट का हेडर है या h6 का हमने बना दिया

पैराग्राफ का कुछ बना दिया और बोल दिया यह हमारी वेबसाइट का फुटर है ऐसा नहीं करना हमें हेडर मेन फुटर इन तीन टैग्स का

इस्तेमाल करना है ये तीनों सिमटिक टैग्स है और इन तीनों को अभी हम डिटेल में डिस्कस करेंगे तो सबसे पहले डिस्कस करते

हैं अपने हेडर टैग को तो किसी भी वेबसाइट के हेडर को बनाने के लिए हमारे पास अगर कोई नॉर्मल हमारा एचटीएमएल पेज है तो बॉडी

के अंदर क्या करेंगे हेड के बाद स्पेस दे देते हैं बॉडी के अंदर जाकर सबसे पहले क्या करेंगे अपना हेड बनाएंगे हेडर के

अंदर हम काफी सारी चीजें लिख सकते हैं जैसे यहां पर अपना कोई मेन्यू दे सकते हैं जैसे पोर्टफोलियो का आपने पेज बनाया होगा

तो हेडर के ऊपर आपने ऑप्शंस दिए होंगे कि आप यहां पे या तो एक्सपीरियंस रखना चाह रहे हैं या फिर रखना चाह रहे हैं अपने

प्रोजेक्ट्स को या इसे हम एजुकेशन कर देते हैं अब इसको सेव कर लेते हैं एक बार रन कर लेते हैं लाइव सर्वर को तो ये एजुकेशन आ

गया यह प्रोजेक्ट्स आ गए अब आप इस पूरे वेब पेज को अगर हम इंस्पेक्ट करने निकले तो जब आप एलिमेंट को इंस्पेक्ट करेंगे

देखेंगे कि ये एजुकेशन वाला हमारा पार्ट है ये प्रोजेक्ट्स वाला पार्ट है और ये दोनों को दोनों कंबाइंड होके हमारे हेडर

के अंदर आ रहे हैं मतलब इसको एक्सपेंड कर सकते हैं हमारे हेडर के अंदर ये दोनों चीजें आ रही हैं तो इंस्पेक्ट करते हैं

हमें तो नहीं दिखता विजुअली हमें नहीं दिख पाता एज अ यूजर की वेबसाइट बिल्ड कैसे हुई है लेकिन जब

का जैसे हमने हेडर बनाया अब हम चाहते हैं ये दोनों जो चीजें हैं वो सेम लाइन पर आ जाए तो क्या करते हैं अभी इसको पैराग्राफ

की फॉर्म में लिख देते हैं इसको पैराग्राफ टैग बना देते हैं पी एंड प और इनको डाल देते हैं प्री के अंदर ताकि हम जो है

थोड़ी सी यहां पे स्पेस दे पाए हम कुछ नहीं कर रहे हम यहां पर थोड़ी सी बेसिक फॉर्मेटिंग कर रहे हैं फॉर्मेटिंग का यह

मतलब है कि हम यहां थोड़ी सी स्पेस देंगे और यहां डाल देंगे अपने प्रोजेक्ट्स को इसको कर लिया सेव और हमारा पेज अब कुछ ऐसा

दिखेगा जिसमें ऊपर हेडर है वहां एजुकेशन भी है वहां प्रोजेक्ट्स भी है तो आप इस पर भी क्लिक करके जा सकते हैं इस पे भी क्लिक

करके जा सकते हैं इंडिविजुअल पेजेस के अंदर नेक्स्ट हम बना सकते हैं यहां पे अपना एक फुटर तो वेबसाइट का बीच वाला जो

पार्ट है वो तो मेन के अंदर आता है मतलब मेन कंटेंट जो भी होने वाला है और यहां पे फुटर के अंदर हम एडिशनल जो अपनी

इंफॉर्मेशन देते हैं यूजुअली फुटर के अंदर दिया जाता है h3 का इस्तेमाल कर लेते हैं कांटेक्ट मी एट h @ ac.com इसको कर लेते

हैं सेव तो अब ये जो है हमारा हेडर पार्ट है यह हमारा फुटर पार्ट इसको थोड़ा सा और छोटा कर लेते हैं h5 पर हम आ जाते हैं तो

यह हेडर है यह फुटर है और बीच में जो चीजें हैं वह सारा हमारा मेन कंटेंट होने वाला है तो इस तरीके से हमारे वेबसाइट का

जो लेआउट है वो डिजाइन होगा अगर मेन की बात करें तो मेन टैग के अंदर हम तीन मेजर टैग्स को डिस्कस करे होंगे जिसमें से सबसे

पहला है हमारा सेक्शन टैग सेक्शन टैग क्या करता है इट इज यूज्ड फॉर अ सेक्शन ऑन योर पेज यानी हमारे पेज को अगर हमें सेक्शंस

में डिवाइड करना है कि यहां पर हम अपने एक्सपीरियंस लिखने वाले हैं यहां पर हम अपनी एजुकेशन लिखने वाले हैं यहां पर हम

अपना प्रोजेक्ट लिखने वाले हैं तो उस सेक्शंस को बनाने के लिए हम सेक्शन टैग का इस्तेमाल करते हैं जैसे ऊपर हेडर के अंदर

हम यहां लिख देते हैं माय पोर्टफोलियो यह तो बन जाएगा हमारी मेजर हेडिंग आपको ओबवियसली अपना जो पोर्टफोलियो

है वो इससे बेटर बनाना है जैसा हम बना रहे हैं यहां सिर्फ एग्जांपल के लिए मैं काफी सारे आपको टैग दिखा रही हूं किस किस तरीके

से इस्तेमाल करना है सेम पेज के ऊपर मेरी तरह आपको इंफॉर्मेशन नहीं डालनी है और सुंदर उसको बनाने की कोशिश करनी है तो मेन

के अंदर क्या करना है मेन के अंदर हम सबसे पहले बनाएंगे सेक्शन इस सेक्शन के अंदर हम लिखेंगे अपनी एजुकेशन के बारे में एजुकेशन

में हम लिख सकते हैं एनएसआईटी सीओई लिख दिया उसके बाद अपने स्कूल का नाम लिख सकते हैं

स्कूल का नाम हमने लिख दिया इस तरीके से बेसिक चीजें लिख सकते हैं तो यह हमारा पहला सेक्शन हो गया उसके बाद हम अपने

एक्सपीरियंस का सेक्शन लिखने जाए एक्सपीरियंस के सेक्शन में हम कुछ-कुछ चीजें लिख सकते हैं

एक्सपीरियंस यहां पे हम चीजें लिख सकते हैं कुछ-कुछ चीजें हमने लिख दी हैं तो यह हमने एक और सेक्शन बना लिया तो ये पहला

सेक्शन हो गया है हमारा और यह हो गया हमारा दूसरा सेक्शन अब जब इसको हम पेज के ऊपर देखेंगे तो हमें तो नॉर्मल सिंपल लाइन

की तरह ही लगेगा कि हम पैराग्राफ के अंदर भी लिख सकते थे पर एक्चुअल चीजें जो हैं हमें तब पता चलेगी जब हम इस पेज को करेंगे

इंस्पेक्ट इंस्पेक्ट करके हमें पता चलेगा कि ये जो पूरा की पूरी चीज है ये एक सिंगल सेक्शन के अंदर आई है ये एक सिंगल सेक्शन

है ये एक सिंगल सेक्शन है तो इस तरीके से अपने कोड को डिवाइड करना जरूरी है ताकि सिमटिक पता चल रहा हो कि इस पेज के अंदर

कौन सा पार्ट किस चीज को रिप्रेजेंट करता है नेक्स्ट टैग जिसकी हम बात करेंगे वो है आर्टिकल अब पेज के ऊपर हम काफी सारे

आर्टिकल्स जो हैं उनको ख सकते हैं जैसे अगर हमें कुछ लिखना है अपने बारे में मान लीजिए मेन के अंदर हम कुछ लिखना चाह रहे

हैं आर्टिकल की फॉर्म में माय एक्सपीरियंस या माय स्टोरी अगर हम बताना चाह रहे हैं तो माय स्टोरी करके अपने

पोर्टफोलियो के ऊपर बता सकते हैं जिसमें हम कहां से बिलोंग करते हैं या टेक में हमारा इंटरेस्ट क्यों है क्यों हम कोडिंग

सीख रहे हैं क्या हमारे गोल्स हैं क्या हम चेंज करना चाहते हैं क्या हम जो रेवोल्यूशन है वो लाना चाहते हैं जिस भी

फील्ड में हमारा इंटरेस्ट है उस इंटरेस्ट की तरफ तो वो सारी चीजें यहां पे लिख सकते हैं तो ये आर्टिकल टैग के अंदर आ जाएगा और

तीसरा टैग जिसकी हम बात करेंगे वो है हमारा अाइड टैग अब ये जो असाइट टैग का काम होता है असाइट टैग का काम होता है फॉर

कंटेंट असाइट मेन कंटेंट अब हमारी कई-कई वेबसाइट होती हैं जिनके ऊपर एड्स दिख रही होती है जिनके ऊपर एडिशनल इंफॉर्मेशन दिख

रही होती है जो एक्चुअली हमारे काम की नहीं है मतलब हमारे कंटेंट के काम की नहीं है पर हमें दिखानी पड़ रही है जैसे कई लोग

वेबसाइट्स बनाते हैं उस पर google's चला रहे होते हैं अब जैसे ऐड तरीके का कंटेंट होता है ये सारा हमारे मेन कंटेंट का

पार्ट नहीं है जैसे आपने कोई वेबसाइट देखी उसके अंदर कुछ-कुछ ऐड्स हमारे पास चल रही होंगी पर मेन कंटेंट उसके अंदर कुछ और ही

चल रहा है तो आप नहीं चाहती कि google's वाला कंटेंट है आप चाहते हैं google3 के अंदर कि कौन सा पार्ट आपके मेन

कंटेंट का पार्ट नहीं है उसके लिए हम यूज करते हैं अपना अाइड टैग तो अगर हमें कोई ऐड चलानी है मान लीजिए हमें मेन सेक्शन

में एंड में कोई ऐड चलानी है तो हम लिखेंगे असाइट और इसके अंदर हम डाल देंगे दिस इज

एन ऐड तो ये जो दिस इज एन ऐड वाला पार्ट है ये हमारा असाइट टैग के अंदर आ गया इसको

हमारे एसईओ जो है वो डिटेक्ट नहीं करेगा उससे फर्क नहीं पड़ रहा होगा तो इस तरीके के कुछ-कुछ चीजें हम इंप्लीमेंट कर सकते

हैं लॉजिकली जब भी हम किसी भी वेब पेज को बिल्ड कर रहे हैं नेक्स्ट चीज जिसकी बात करेंगे वो है हमारा एंकर टैग अब एंकर टैग

में हमने बात की थी कि हम ए लिखते हैं उसके बाद अपना लिंक लिखते हैं वो रिलेटिव हो सकता है एब्सलूट हो सकता है तो हम किसी

भी लिंक की तरफ रीडायरेक्ट कर सकते हैं अपने यूजर को पर एंकर टैग के अंदर एक और एट्रबीक तो हम लिंक पर क्लिक करते थे तो

सेम पेज खुलता था अब न्यू टैब में हमारी चीजें खुल रही होंगी जैसे फॉर एग्जांपल अगर हम यहां पर जाना चाह रहे हैं हमने एक

एंकर टैग बनाया एच आरएफ इ इक्वल टू यहां पर हम ले लेते हैं google.com का एग्जांपल अब अगर हम इसको नॉर्मली सेव करें और

google.com खुल जाएगा लेकिन अगर हम यहां पर लिख दें एक और एट्रिल

टू मेन इसको सेव करके अगर अब रन करें तो google.com खुल रहा है और यह वाला टैब हमारा इंटैक्ट है तो जब भी लिंक को

नेक्स्ट टैब में खुलवाना हो तो उसके लिए हम यूज कर टारगेट मेन का इसके अलावा हम अपनी पिक्चर्स को क्लिके बल बना सकते हैं

कैसे क्लिकब्रिक्स इसका हम क्या करेंगे बस लिंक कॉपी कर लेंगे यहां googlegroups.com

हाइट भी हम दे देते हैं हाइट इज इक्वल टू 500 और थोड़ा सा इसको छोटा करते हैं 100 तक लेकर जाते

हैं तो ये जो इमेज है अब अगर इसको क्लिक करें तो हमारे लिए google.com खुल जाएगा क्योंकि ये इमेज

क्लिकब्रिक्स को क्लिकब्रिक्स इमेज को क्लिके बल बनाना चाहे हम इस्तेमाल कर सकते हैं अपने एंकर

टैग का अब इमेज टैग के अंदर हम कुछ-कुछ चीजें कर सकते हैं जैसे हमने अभी अपनी हाइट सेट की या हम विड्थ को भी सेट कर

सकते हैं जैसे हमने लिंक डाला तो यहां पर हमारी जो इमेज थी उसमें हमने हाइट को सेट कर दिया सिमिलर तरीके से

हम अपनी विड्थ को भी सेट कर सकते थे विड्थ को सेट करते तो कुछ इस तरीके की हमारी इमेज होती बिना सेट किए अगर इसको हम 50 कर

दें तो ये और छोटी हो जाएगी विड्थ वाइज एंड विड्थ को सेट करेंगे तो हाइट अपने आप उसी

एस्पेक्ट रेशो को मेंटेन करने के लिए सेट हो जाएगी अगर सिर्फ हाइट को सेट कर रहे हैं तो विड्थ भी अपने आप चेंज हो जाएगी

एस्पेक्ट रेशो को मेंटेन करने के लिए नेक्स्ट बात करने वाले हैं हम अपने डिव टैग की अब दो टैग्स मेजर टैग्स की हम यहां

पे बात करेंगे सेक्शन में डिव और स्पैन ये दोनों जो है एचटीएमएल के काफी इंपॉर्टेंट टैग्स हैं जिनका बहुत बार यूज होता है डिव

की अगर बात करें तो डिव एक कंटेनर है फॉर अदर एचटीएमएल एलिमेंट्स यानी डिव का अपना कोई स्पेशल काम नहीं है जैसे पी पैराग्राफ

टैग का काम होता था कि इसके अंदर पैराग्राफ्स लिखे जाते हैं हेडर टैग का काम होता था इसके अंदर हमारी वेब पेज का

हेडर आता है फुटर का काम होता था वेब पेज का फुटर आता है डिव का अपना कोई स्पेसिफिक काम नहीं है इसीलिए इस टैग को नॉन सिमटिक

भी कहते हैं डिव का मेजर काम होता है दूसरे टैग्स को खुद के अंदर कंटेन करना जैसे अगर हम अपनी वेब पेज पर मान लीजिए

मेन के अंदर क्या करते हैं एक डिव टैग बनाते हैं यहां पर हमने बनाया डिव तो इसका कुछ काम नहीं है मतलब ये कुछ चेंज

लेकर नहीं आएगा यह बस एक डिव की तरह खड़ा रहेगा वहां पे अब यह एक ब्लॉक एलिमेंट होता है तो अब अगर हम इसको इंस्पेक्ट करें

अपने पेज को तो यहां पर कोड के अंदर जाकर हमें दिख रहा है लेफ्ट साइड में कि डिव है पर एक्चुअली डिव की हाइट बाय डिफॉल्ट रो

सेट हुई है ये यहां पे 1037 * यहां पर डिव के ऊपर जाएं अगर तो 1037 * 0 दिखा रहा है तो यहां पे रो जो है वो हमारे डिव की हाइट

है बाय डिफॉल्ट डिव की हाइट जीरो सेट होती है जब उसके अंदर कोई एलिमेंट नहीं होता लेकिन अगर उसके अंदर हम डाल दें एक

पैराग्राफ डाल देते हैं हेलो वर्ल्ड लिखकर तो हेलो वर्ल्ड लिखकर यह पैराग्राफ जैसे ही हमने डिव के

अंदर डाला तो अब अगर डिव पर स्क्रोल करें तो यह आ गया है डिव यहां

पर अब डिव जो होता है वो एक ब्लॉक एलिमेंट होता है यानी वो हमारी स्क्रीन पर फुल विड्थ लेता है ब्लॉक एलिमेंट्स वो होते

हैं जो चाहे उनको जगह कितनी भी चाहिए हो पर वो पूरी की पूरी विड्थ यानी पूरी स्क्रीन घेर कर खड़े हो जाते हैं जैसे

यहां पर पैराग्राफ के अंदर मुझे सिर्फ हेलो वर्ल्ड लिखना था तो अगर मुझे सिर्फ हेलो वर्ल्ड जितनी जगह चाहिए होती यानी

मुझे बस इतनी जगह मिलती इतनी सी जगह तो भी मेरा हेलो वर्ल्ड फिट हो जाता लेकिन इसने क्या किया इसने

पूरी विड्थ को ले लिया कैसे पता चला हमें पूरी विड्थ को ले लिया इंस्पेक्ट के अंदर जाएंगे और यहां जाएंगे इस एलिमेंट पर तो

दिख रहा है कि ये येलो लाइन जो है ये पूरी विड्थ पर है तो इसने पू विड्थ को ले लिया जो भी ब्लॉक एलिमेंट्स होते हैं एचटीएमएल

के अंदर वो पूरी विड्थ को ले लेते हैं और दूसरे टाइप के एलिमेंट्स होते हैं हमारे इनलाइन एलिमेंट्स इनलाइन एलिमेंट्स

क्या करते हैं जितनी उनको जगह चाहिए होती है बस उतनी जगह लेते हैं बहुत किफायत के साथ काम कर रहे होते हैं तो ब्लॉक

एलिमेंट्स और इनलाइन एलिमेंट्स को काफी सोच समझ के हमें इस्तेमाल करना होता है अब डिव का यहां पर कोई स्पेशल केस हमने देखा

नहीं पर डिव का इस्तेमाल काफी जगह हो सकता है जैसे मान लीजिए आपने एक लिखा हेलो वर्ल्ड

उसके अंदर आपने एक और पैराग्राफ के अंदर मान लीजिए लिख दिया नमस्ते एक और पैराग्राफ के अंदर आपने लिख

दिया हाई अब सेम चीज आप क्या कर सकते हैं यह वाला जो हमारा डिव है यह वाला पहला डिव

इसके अंदर हम ग्रीटिंग्स लिखेंगे और इसके अंदर हम लिखेंगे चीजें जो हम बाय करते हुए लिखते

हैं तो इसके अंदर लिखेंगे अपने गुड बाय यहां पर लिखेंगे गुड बाय एक में लिख देते हैं चाओ इसको कर देते हैं सेव तो हमने एक

डिव बनाया मतलब ये एक डिव को हम डब्बे की तरह इमेजिन कर सकते हैं एक डब्बा है जिसके अंदर नमस्ते हेलो वर्ल्ड हाय लिखा है एक

डब्बा है जिसके अंदर बाय बाय गुड बाय और चाव लिखा है इसको सेव करके अगर देखें तो हमारी स्क्रीन पर तो कुछ ऐसी चीजें दिख

रही है जैसे हेलो वर्ल्ड नमस्ते हाय आ गया यह बाय गुड बाय चाव आ गया पर यहां पर अगर हम इसको इंस्पेक्ट करें तो हम देख पाएंगे

कि यह जो तीनों एलिमेंट्स है एक बार के लिए अपने बाकी एलिमेंट्स को हटा देते हैं तो ये तीनों एलिमेंट्स सेम

डिव के अंदर आ रहे हैं और ये तीनों जो एलिमेंट्स हैं वो हमारे सेम डिव के अंदर आ रहे हैं अब इफेक्ट देखने के लिए हम क्या

करेंगे इन डिब्स का कर देंगे कलर चेंज जैसे अपने मेन के अंदर जाएंगे डिव के अंदर जाएंगे और यहां

पर ऐड कर देंगे कलर एज रेड यहां पे इस डिव के स्टाइल में जाएंगे और यहां ऐड कर देंगे

बैकग्राउंड कलर इ इक्वल टू रेड तो ये क्या हुआ इसने सिर्फ एक जो हमारा डिव था उसको बैकग्राउंड कलर रेड दे दिया जिसके अंदर

हमारी सारी की सारी ग्रीटिंग्स जो है वो लिखी हुई थी और जो सेकंड डिव था उसको हम दे देते हैं बैकग्राउंड कलर

एस इसको हम दे देते हैं बैकग्राउंड कलर अपना ब्लू तो यहां पर यह वाला जो डिव है वो रेड

से ढक गया है यह वाला डिव हमारा ब्लू से ढक गया है पर फॉन्ट अभी दिखाई नहीं दे रहा क्योंकि फॉन्ट हमने एक्चुअली चेंज कर दिया

था टू रेड इसको हम वापस से ब्लैक कर देते हैं ये एक्चुअली यहां पे मैंने सीएसएस में चेंजेज किए हैं अब ये सारे के जो सारे

चेंजेज है ये आपको समझने की जरूरत नहीं है मैं सिर्फ लेआउट आपको समझा रही हूं कैसे चीजें काम कर रही है सीएसएस को हम बाद में

पढ़ रहे होंगे पहले एटीएमएल को समझ लेते हैं सिर्फ अंडरस्टैंडिंग के लिए अभी मैंने कलर चेंज करके दिखाए इस पूरे डिव को हमने

रेड कर दिया इस पूरे डिव को एक साथ हमने ब्लू कर दिया तो डिव का असली फायदा तब होता है जब हमें काफी सारे कलेक्टिव

एलिमेंट्स के साथ ना एक साथ चेंजेज करने पड़ते हैं तो उस टाइम पर आप डिव के अंदर इकट्ठा करिए एलिमेंट्स को तो आप डब्बे के

अंदर उनको साइड बाय साइड अरेंज करना चाहते हैं एक के बाद एक अरेंज करना चाहते हैं वो फिर आपके ऊपर आ जाता है तो एक साथ जब

अरेंजमेंट करनी हो काफी सारे एलिमेंट्स की तो वहां पर हम इस्तेमाल कर सकते हैं ने डिप का ये कुछ लिस्ट ऑफ ब्लॉक एलिमेंट्स

हैं मतलब वो एलिमेंट्स जो पूरी की पूरी विड्थ को घेर लेते हैं जैसे हमारा जो फुटर होता है वो पूरी विड्थ को घेर लेगा अगर हम

एनालाइज भी करें इसमें इंस्पेक्ट कर लेते हैं एक बार जैसे इंस्पेक्ट करके हम देखें फुटर के अंदर पूरा का पूरा जो एरिया है वो

हाईलाइट हो रहा है तो ये पूरी विड्थ पर जा रहा है इनफैक्ट हेडर भी जो है हमारा पूरी विड्थ लेता है हमारा डिव भी पूरी विट लेता

है आर्टिकल भी पूरी विट लेता है इस तरीके से काफी सारे एलिमेंट्स होते हैं अब बात करते हैं स्पैन टैग की स्पैन टैग इज आल्सो

कंटेनर लाइक डिव बट इट इज यूज्ड फॉर अदर एचटीएमएल एलिमेंट्स वो एचटीएमएल एलिमेंट्स जिसके अंदर हम उतनी ही जगह लेना चाहते हैं

जितनी की हमें जरूरत है उसमें हम यूज करते हैं स्पैन का जैसे इस सेम ग्रीटिंग को अगर मैं स्पैन की हेल्प से प्रिंट

करवाऊं स्पैन एंड स्पैन तो अब एनालाइज करूं बाय डिफॉल्ट मेरा जो पैराग्राफ

है वहां से अगर हटाकर मुझे प्रिंट करना है सिर्फ बाय इसको कर लिया

सेव अब अगर इसको एनालाइज करें तो ये जो बाय है इसमें आप देखेंगे ब्लू पार्ट जो हाईलाइट हो रहा है वो सिर्फ बाय वाला

पार्ट है यानी इसमें उतनी ही जगह घेरी जा रही है जितनी जगह जरूरी है उस एलिमेंट को स्पेसिंग के लिए तो स्पैन जो एलिमेंट होता

है वो हमारा इनलाइन एलिमेंट होता है मतलब इट टेक्स इट्स विड्थ एज पर साइज जितना साइज है उतनी ही जगह वो

घेरे इसके अंदर भी अगर हम स्पैन का कलर अब चेंज करना चाहे तो मेन के अंदर जाएंगे स्पैन यहां से कर लेंगे

बैकग्राउंड कलर इज इक्वल टू पिंक तो ये यहां पे पिंक कलर में हाईलाइट हमें दिख जाएगा कि यह हमारा एक स्पैन

एलिमेंट है अब स्पैन एक इनलाइन एलिमेंट होता है और यहां पे बहुत सारे ये इनलाइन एलिमेंट्स की हमने आपको लिस्ट दे दी है

इसमें से देखें तो हमारा जो एंकर ड होता है वो भी एक इनलाइन एलिमेंट होता है जो हमारा बीआर टैग होता है वो भी एक इनलाइन

एलिमेंट होता है हमारा इमेज एक इनलाइन एलिमेंट होता है जिसको इटैलिक में आप लिखते हैं जिसको आप बोल्ड में लिखते हैं

या हमारे जो सब स्क्रिप्ट सुपरस्क्रिप्ट होते हैं ये सारे हमारे इनलाइन टैग्स होते हैं तो ये टैग्स उतनी जगह घिरते हैं जितनी

इनको जरूरत है तो ये सारे हमने काफी सारे जो टैग्स हैं उनको रिविजिट किया लेआउट कैसे प्रॉपर्ली बनाना है अपनी वेबसाइट का

डिव के अंदर चीजों को डालना है हेडर में डालना है मेन में डालना है फुटर में डालना है उस तरीके से अपनी वेबसाइट को हमें

अच्छे से डिजाइन करना है अब इसमें प्रोजेक्ट वन के अंदर एक और टास्क आप लोगों के लिए ऐड हो गया है कि हमें सबसे

पहले तो होम पेज पर अपनी एक इमेज लगानी है अपनी एक इमेज लगानी है उस पर हो सकता है आप इस इमेज को

क्लिकब्रिक्स हैं या आपकी गिट हब या या आपने मेन सेक्शन में डिवाइड करना है

डिफरेंट डिफरेंट सेक्शंस में और उससे हमारी जो वेबसाइट है वो और ज्यादा इंप्रूव हो रही होगी यहां तक हमने खत्म कर लिया

अपना लेवल थ्री और नेक्स्ट हम बात करेंगे शुरुआत करेंगे अपने लेवल फोर की जो है आल्सो लेवल प्रो अब हम आ ग हैं अपने फाइनल

लेवल यानी अपने प्रो लेवल पर और इस चैप्टर के अंदर इस लेवल के अंदर हम पढ़ने वाले हैं अबाउट लिस्ट अबाउट फॉर्म्स एंड अबाउट

टेबल्स अब कभी-कभी ऐसी सिचुएशन आती है जब हमें कोई लिस्ट ऑफ चीजें अपने पेज पर डिस्प्ले करनी पड़ती है जैसे अगर हमने कोई

पोर्टफोलियो के अंदर एजुकेशन का पेज बनाया है तो उसमें हमें हमें 10थ के मार्क्स अपने 12थ के मार्क्स अपने कॉलेज के

मार्क्स अगर मास्टर्स कि है तो वो सारी इंफॉर्मेशन हम चाहते हैं अगर लिस्ट की फॉर्म में डिस्प्ले कराना या फिर अगर हमने

तीन-चार प्रोजेक्ट्स बनाए तो उनको हम लिस्ट की फॉर्म में डिस्प्ले कराना चाहते हैं तो एचटीएमएल के अंदर लिस्ट की फॉर्म

में चीजें डिस्प्ले कराने के लिए भी हमारे पास कुछ टैग्स होते हैं तो लिस्ट जो होती है सबसे पहले वो अन

ऑर्डर्स की लिस्ट एचटीएमएल के अंदर होती है अन ऑर्डर्स का म मतलब है कि सिर्फ बुलेट पॉइंट्स की फॉर्म में हमारा जो डाटा

है वो हमारे पास प्रिंट होकर आ रहा होगा और ऑर्डर्स हमने 1 2 3 4 कोई ऑर्डर दे दिया कोई सीक्वेंस दे दिया जिसकी फॉर्म

में वो डिस्प्ले हो रहे हैं इसमें हमारे रोमन न्यूमेरल्स भी हो सकते हैं 1 2 3 एंड फोर या फिर हमारे पास ए बी सडी हम इस

तरीके से भी डिस्प्ले करा सकते हैं तो ये होती है हमारी ऑर्डर्स एंड ये है हमारी अन ऑर्ड लिस्ट अब सबसे पहले बात करेंगे

एक टैग बनाना पड़ता है जिसमें हम लिखते हैं यूल यूल स्टैंड्स फॉर अन ऑर्डर्स अब अन ऑर्डर्स को बनाने के लिए हमने टैग

इस्तेमाल कर लिया उसके अंदर लिस्ट का हर एक आइटम को हम डिस्प्ले कराते हैं एआई की हेल्प से यहां पे एआई स्टैंड करता है फॉर

लिस्ट आइटम तो इस तरीके से एक लिस्ट बनाते हैं अपने मेन के अंदर हम कंटेंट लिख रहे होंगे यहां पर बनाएंगे यूल से एक अनडेड

लिस्ट जिसके अंदर लिस्ट का पहला आइटम आ जाएगा एल हम एक फ्रूट्स की लिस्ट यहां पे बनाने वाले हैं दूसरा आइटम मान लीजिए

हमारे पास है मैंगो तीसरा आइटम हमारे पास आ गया है लीची तो इसको कर लेते हैं सेव तो जब भी

हम लिस्ट बनाएंगे वो हमारे पास कुछ ऐसी बनकर आएगी जिसमें बुलेट पॉइंट्स की हेल्प से हमारे पास आइटम्स जो हैं वो डिस्प्ले

हो रहे हैं अब स्पेशल चीज यह है कि लिस्ट के अंदर कुछ-कुछ एटिबल होते हैं जिनकी मदद से हम इन बुलेट पॉइंट्स को चेंज कर सकते

हैं जैसे यहां पर जो बुलेट पॉइंट्स हमारे लिए प्रिंट हुए हैं वो थोड़े से सर्कुलर हैं अगर हम चाहते हैं कि हम डिस्क शेप के

उनको बनाना चाहते हैं तो वो चेंज करने के लिए हम अपने सीएसएस के अंदर चाहे तो इन बुलेट्स को हम स्क्वायर शेप में कर सकते

हैं या फिर इनको हम ट्रायंगल शेप में कर सकते हैं डिस्क शेप में कर सकते हैं तो यहां यूल के अंदर जाके आप एमडीएन

रेफरेंसेस के अंदर जाएंगे तो वहां पे जाके सारी इंफॉर्मेशन हमें मिल रही होगी अब इस लिस्ट के अंदर हम सबलिस्ट भी बना सकते हैं

जैसे अगर मुझे कलर जो है एप्पल का कलर है रेड और सीजन में हम लिख सकते हैं विंटर्स सेम चीज हम

कर सकते हैं मैंगो के लिए तो मैंगो के लिए कलर में हम लिख देंगे येलो एंड सीजन में हम लिख देंगे तो यहां क्या हुआ एक लिस्ट

बनी और उसके अंदर कलर रेड और सीजन विंटर्स करके एक सब लिस्ट आ गई है मैंगो के अंदर भी दो जो बुलेट पॉइंट्स है वो सब लिस्ट के

आ गए हैं तो लिस्ट के अंदर एक और दूसरी लिस्ट क्रिएट करना भी पॉसिबल है अब नेक्स्ट बात करते हैं अपनी ऑर्ड लिस्ट की

ऑर्ड लिस्ट के अंदर जो हमारे आइटम्स जिनको भी हम प्लेस करते हैं वो सारे नंबर्स के साथ आते हैं जैसे हमारे पास आएगा वन एप्पल

या टू मैंगो इसको कैसे लिखना है सिंपली सेम लिस्ट के लिए यानी इस लिस्ट को हम कर लेते

हैं कॉपी और इसको कर देते हैं कॉमेंट आउट इसको कर दिया पेस्ट और सिर्फ आइटम्स को सेम रखना है तो इसको अगर सेव

करें तो ये वन आ गया फॉर एप्पल टू आ गया फॉर मैंगो थ्री आ गया फॉर लीची तो 1 2 3 हमारे पास नंबरिंग हो ग है पर अंदर वाली

लिस्ट आप देखें तो उसमें बुलेट पॉइंट्स है क्योंकि अंदर वाली लिस्ट में अभी भी यूल है हमारे पास उसको भी अगर ऑर्ड बनाना है

तो उसमें भी चीजें जो हैं वो हम लिख लेते हैं ओ इसको भी कर लेते हैं सेव तो बाहर भी वन आ गया है अंदर भी वन आ गया है अब इस

लिस्ट के जो नंबर्स है इनको भी हम चेंज कर सकते हैं ए बी सीडी लिख सकते हैं रोमन न्यूमेरल्स कर सकते हैं उसके बारे में भी

पढ़ सकते हैं एमडीएन रेफरेंसेस में जाके नेक्स्ट हम बात करने वाले हैं टेबल्स की अब बहुत बार ऐसा होता है कि रियल लाइफ

टेबल हमें कुछ अपने वेबसाइट पर डिस्प्ले करनी पड़ सकती है हो सकता है कि आपकी जो वेबसाइट्स है वो कॉलेजेस के बारे में

इंफॉर्मेशन दे रही है या जेई मेंस की हमने काफी सारी वेबसाइट देखी होंगी जिसमें लास्ट ईयर का जेई मेंस का स्कोर होता है

या और साथ के साथ कितना परसेंटाइल कट ऑफ आने वाला है या कितने मार्क्स पे कितनी रैंक आने वाली है तो वो टेबल फॉर्मेट में

वैसी इंफॉर्मेशन अच्छी लगती है या स्टूडेंट्स की लिस्ट है जिसमें स्टूडेंट्स के रोल नंबर लिखें और नाम लिखें वैसे

इंफॉर्मेशन टेबल फॉर्मेट में बहुत सुंदर लगती है तो वैसे ही रियल लाइफ टेबल्स को जब हम अपने वेबसाइट पर अपने वेब पेज पर

डिस्प्ले कराना चाहते हैं तो वहां हम यूज करते हैं एचटीएमएल टेबल्स का एटीएमएल टेबल्स में हम मेजर्ली तीन चीजों की बात

करेंगे पहला टैग इनमें से है टीआर यानी टेबल रो टैग इसकी हेल्प से हम हर एक टेबल के अंदर रो जो है वह क्रिएट करते हैं

दूसरा है हमारा टेबल डाटा टैग जिसके अंदर टेबल का जो हम डाटा डालना चाहते हैं उसको हम डाल रहे होते हैं और तीसरा होता है

हमारा टेबल हेडर टैग जिसके अंदर हम टेबल का जो हेडर होता है मतलब मेन ऊपर वाले कॉलम्स का नाम कि इसके अंदर रोल नंबर लिखे

जाएंगे या इसके अंदर नेम लिखा जाएगा इसके अंदर फोन नंबर लिखा जाएगा वो वाली हेडर वाली जो सबसे ऊपर वाली रो हम बनाते हैं

उसको भी क्रिएट कर सकते हैं अब एचटीएमएल की सबसे खास बात यह है कि इसमें आपको इतने सारे टैग्स ना याद करने की जरूरत नहीं है

आप जितना इनको प्रैक्टिस करेंगे ना खुद से चीजें बिल्ड करेंगे मोस्टली आपको खुद से याद हो जाएंगे एंड साथ के साथ जब भी जरूरत

पड़े आप सिंपली google2 एन रेफरेंसेस चेक कर सकते हैं बहुत बहुत सारे रिसोर्सेस ऑनलाइन अवेलेबल हैं तो बिल्कुल टेंशन नहीं

लेनी अभी कि हम इतने सारे टैग्स पढ़ रहे हैं इतने सारे याद कैसे रहेंगे वो वाला प्रेशर बिल्कुल नहीं लेना है सिर्फ सिंपली

समझते जाना है बहुत लेट बैक होके बहुत इजी गोइंग तरीके से सिर्फ सिंपली समझना है इनमें से सबसे पहला है हमारा टेबल रो अब

इन तीनों टैग्स को हम यूज किस तरीके से करते हैं इनको कुछ इस तरीके से हम यूज कर रहे होते हैं जैसे अगर राइट में हमें जो

ये टेबल दिख रही है ऐसी हमें टेबल बनानी हूं जिसमें हमारा हेडर जो है वो है नेम और रोल नंबर और उसके अंदर डाटा हमने स्टोर

करा दिया अपना नाम और अपना रोल होल नंबर तो उसको क्रिएट हम करेंगे टेबल टैग की मदद से अभी एक सिमटिक टैग है क्योंकि टेबल से

हमें समझ आ रहा है कि हम एक टेबल क्रिएट करने वाले हैं इसके अंदर सबसे पहली जो रो है मतलब यह वाली जो रो है इतना हिस्सा

इसको हम क्रिएट कर रहे हैं अपने इस टीआर टैग की मदद से ये जो टीआर टैग है इसकी मदद से ये वाली रो क्रिएट हो रही है और ये जो

टीआर टैग है इसकी मदद से दूसरे वाली टेबल रो क्रिएट हो रही है पहले वाली रो में हमने हेडर डिफाइन किया आप ध्यान से

देखेंगे तो तो हेडर में हमारे पास नेम आ गया है रोल नंबर आ गया दूसरे वाली रो में हमने डिफाइन किया है अपने डाटा को यहां पर

भी टीडी होना चाहिए तो यहां पर डेटा को हमने डिफाइन किया तो उसकी वजह से हमारे पास हमारा डाटा जो है टेबल के अंदर प्रिंट

हो गया है इस फॉर्मेट में अपनी टेबल को क्रिएट करके देखते हैं हमारी जो लिस्ट है इसको कर लेते हैं कॉमेंट आउट और अब फाइनली

एक टेबल बनाते हैं टेबल हमने बनाई इसके अंदर सबसे पहले बनाएंगे अपनी टेबल रो जिसके अंदर सबसे पहले डिफाइन करेंगे अपने

हेडर्स तो हम स्टोर करने वाले हैं सबसे पहले तो नेम उसके बाद हम स्टोर करने वाले हैं दूसरा टेबल हेडर व्हिच इज हमारा रोल

नंबर अब सेम जो हमने टेबल रो बनाई है इसकी जगह हम क्या करेंगे बनाएंगे एक और टेबल रो जिसके अंदर डाटा स्टोर होगा यानी टेबल

डाटा सबसे पहले नेम आया था तो नेम के नीचे हम लिखना चाहते हैं अपना नाम एंड उसके बाद हमारे पास आया था हमारा रोल नंबर तो उसके

नीचे भी लिख देंगे अपना रोल नंबर इसको कर लेते हैं सेव यहां पर हल्का सा इसको स्पेस दे देते हैं यह है टेबल अब यह जो लेफ्ट

साइड में लाइने हैं हो सकता है आपके टेक्स्ट एडिटर में ना आ रही हो तो उसके लिए आप एक्सटेंशन में जाके एक प्रीटियर

नाम का एक एक्सटेंशन होता है इसको आप कर सकते हैं इंस्टॉल तो यहां पर मैंने इसको इंस्टॉल कर रखा है तो ऑटोमेटिक मेरे लिए

जो लाइंस है वह हाईलाइट हो रही हैं तो आपको भी अगर वैसी ही सिमिलर हाइलाइटिंग चाहिए तो आप इसको इंस्टॉल कर सकते हैं तो

यहां पे टेबल रो है उसके अंदर हमने हेडर क्रिएट कर लिया उसके अंदर हमने टेबल डाटा डाल दिया इसको सेव करके रन करते हैं तो

हमारे लिए एक टेबल आ गई है अब टेबल की लाइनें यहां पर नहीं दिख रही होंगी पर ये जो फॉर्मेट है नेम रोल नंबर का अब जो हेडर

है वो बोल्ड में हाइलाइटेड है और नीचे का डाटा हमारे पास सिंपली लिखा हुआ आ रहा है सिमिलर तरीके से हम और ज्यादा रोज ऐड कर

सकते हैं अपनी टेबल के अंदर और ज्यादा डाटा के साथ मान लीजिए हमें एक और डाटा ऐड करना है जिसके अंदर एक और डिफरेंट नाम हम

रख रहे होंगे जिसके अंदर एक और नाम हम तो इस तरीके से टेबल के अंदर काफी सारी इंफॉर्मेशन आ गई है और ऊपर आ गए हैं हमारे

नाम इन द हेडर फॉर्मेट अब इसमें साथ के साथ हम काफी सारे जो चेंजेज हैं वो इस टेबल के अंदर कर सकते हैं अब इस टेबल के

अंदर हम और भी काफी सारे चेंजेज जो हैं वो कर सकते हैं इनमें से सबसे पहला है टेबल के अंदर एक कैप्शन ऐड कर देना कैप्शन क्या

होता है जैसे हमारी फोटो के नीचे हम कैप्शन लिखते हैं जिसमें हम डिस्क्राइब कर रहे होते हैं फोटो के अंदर क्या चल रहा है

वैसे ही टेबल के अंदर क्या चल रहा है वो उसका कैप्शन बता देता है तो कैप्शन के अंदर हम डाल रहे होंगे स्टूडेंट डाटा की

स्टूडेंट डाटा के बारे में टेबल है मान लीजिए आप लोगों के ब्लड ग्रुप स्टोर कर रहे हैं तो आप लिख सकते हैं दिस इज अ

मेडिकल इंफॉर्मेशन टेबल या जिस भी तरीके का आप डाटा स्टोर कर रहे हैं बस उसकी इंफॉर्मेशन तो उसके लिए हमें सिंपली ऊपर

एक कैप्शन टैग को इस्तेमाल करना पड़ता है टेबल के अंदर हम लिख देंगे कैप्शन और इसके अंदर कैप्शन हम लिख रहे होंगे स्टूडेंट

डाटा इसको सेव कर लें अगर तो इस तरीके से हमारी टेबल का कैप्शन हमारे लिए आ गया है अब टेबल कैप्शन के अलावा हमारे पास दो और

सेक्शंस होते हैं दो और टैग्स होते हैं जिनको हम टेबल में यूज़ कर सकते हैं इनमें से सबसे पहला होता है हमारा टेबल हेड और

दूसरा होता है हमारा टेबल बॉडी अब टेबल हेड का काम होता है टेबल के हेड को यानी मेन जो हेडलाइंस है हेडर है उसको रैप अप

कर लेना और टेबल बॉडी का काम होता है हमारे टेबल के अंदर जो भी डाटा है उसको रैप अप कर लेना अगर इनका हमें इस्तेमाल

करना हो यह भी वैसे लेआउट के लिए यूज होते हैं तो इसके लिए हम यहां पर लिख देंगे टी हेड और टी हेड के अंदर आ रहा होगा हमारा

हेडर तक का पार्ट मतलब फर्स्ट रो जो हमने ऐड की थी एंड उसके बाद शुरू हो जाती है हमारी टी बॉडी टी बॉडी के अंदर आ रहा होगा

सारा का सारा हमारा डाटा जो हमने टी हेड की हेल्प से डिफाइन किया है इसको कर लेते हैं सेव तो यहां पे विजिबली कोई चेंजेज

नहीं दिख रहे पर अगर आप इंस्पेक्ट करेंगे तो आपको चेंजेज दिखेंगे जैसे पता चलेगा कि ये जो इंडिविजुअल है ये हमारे डेटा है ये

हमारी पूरी की पूरी टेबल है अगर राइट में जाएं और एक सेक्शन पे स्क्रोल करना चाहे जैसे टेबल के अंदर जाकर अगर हमें सिर्फ

टेबल बॉडी देखनी है तो इतना पार्ट हाईलाइट हो जाएगा अगर सिर्फ टेबल हेड देखना है तो टेबल हेड में हमारा टेबल हेड यहां से

स्टार्ट हो रहा है और उसके अंदर सारी की सारी चीजें हैं अंट्स एक और और एट्रिल होता है टेबल के

अंदर जो कभी-कभी काफी काम आता है वो है कॉल स्पैन का यानी कॉलम कितने बाकी कॉलम्स तक स्पैन कर रहा है जैसे अगर हम चाहते हैं

कि इन दोनों कॉलम्स का नाम यहां पर अभी हमने इस कॉलम को नाम दिया है नेम इसको नाम दिया है रूल नंबर पर हम इन दोनों कॉलम्स

का नाम बस इंफॉर्मेशन रखना चाहते हैं तो हम क्या करेंगे हम यहां पर एक तो तरीका होता कि हम एक हेडर ही हटा दे मतलब रोल

नंबर वाला हमने हेडर ही हटा दिया और अब एक सिंपल हमने हेडर लगाया है जिसको हमने नाम दे दिया है इंफॉर्मेशन इसको अगर हम करते

हैं तो इंफॉर्मेशन जो है हमारे सिर्फ फर्स्ट कॉलम के ऊपर आता है लेकिन हम चाहते हैं ये इंफॉर्मेशन वाली जो वैल्यू है वो

दो कॉलम्स के बिल्कुल सेंटर में आए दोनों कॉलम्स की जगह को ले तो उस टाइम पर हम इस्तेमाल करते हैं कॉल स्पैन का कॉल स्पैन

क्या करेगा हमारे लिए इसमें हम डिफाइन कर देते हैं कितने कॉलम्स की जगह ये हेडर हमारा लेने वाला है तो इसमें हम लिख देते

हैं टू तो इस तरीके से अब ये जो इंफॉर्मेशन है वो दोनों कॉलम्स के ऊपर आ गया है सेंटर में आ गया दोनों कॉलम्स की

उसने जगह ले ली है तो जब भी हमें ऐसा कोई दो-तीन कॉलम्स को मर्ज करना हो इट्स बेसिकली एक्सेल शीट के अंदर कभी-कभी हम

सेल्स को मर्ज कर देते हैं ना कि दो-तीन सेल्स पे सेम इंफॉर्मेशन सेम कॉलम का नाम हम दे पाएं उसी तरीके से टेबल में जब मर्ज

करना होता है एचटीएमएल में तो हम कॉल स्पैन का इस्तेमाल करते हैं नेक्स्ट बात करते हैं फॉर्म्स इन

एचटीएमएल है जब भी हम facebook's चट पर जाते हैं कहीं भी जाते हैं तो शुरुआत में हमें क्या करना पड़ता

है साइन अप करना पड़ता है या कभी भी लॉग इन करना पड़ता है तो हमें एक फॉर्म दिखाई देता है जिस फॉर्म में हमें या तो यूजर

नेम ऐड करना पड़ता है अपना पासवर्ड ऐड करना पड़ता है शुरुआत में हमें नाम फुल नेम फोन नंबर बाकी सारी चीजें ऐड करनी

पड़ती है जीमल आईडी डालनी पड़ती है तो इस तरीके के जो फॉर्म्स है ये सारे के सारे फॉर्म्स एटीएमएल में क्रिएट होते हैं तो

फॉर्म्स को एचटीएमएल में क्रिएट करने के लिए हमें यूज करना पड़ता है अपने फॉर्म टैग का तो फॉर्म्स आर यूज्ड टू कलेक्ट

डाटा फ्रॉम द यूजर इसमें हमारे एग्जांपल आ जाते हैं हमारे साइनअप फॉर्म्स होते हैं लॉग इन फॉर्म्स होते हैं कुछ वेबसाइट्स पे

आप देखेंगे हेल्प रिक्वेस्ट का फॉर्म होता है या फिर कांटेक्ट का फॉर्म होता है जिसमें आप अपनी आईडी छोड़ सकते हैं कि

मुझे कोई कांटेक्ट कर लो मुझे आपका ये सामान खरीदना है इस तरीके की चीजें अब फॉर्म का यूज किया जाता है फॉर्म टैग के

लिए अब फॉर्म टैग का इस्तेमाल किया जाता है फॉर्म को क्रिएट करने के लिए तो ऊपर डालते हैं हम अपना ओपनिंग टैग फॉर्म नीचे

डालते हैं क्लोजिंग टैग और बीच में आता है फॉर्म का बाकी सारा का सारा फॉर्म कंटेंट तो हम सबसे पहले डिफाइन कर रहे होंगे एक

फॉर्म के लिए उसका एक्शन एक्शन क्या होता है कि फॉर्म में जितना भी डाटा आना है वो फाइनली किसके पास जाएगा इसके के लिए

यूजुअली हमारे पास एक फ्रंट एंड होता है यानी एक जावास्क्रिप्ट फाइल जो या तो उसको प्रोसेस करेगी या वो फॉर्म का डाटा किसी

बैक एंड फाइल के पास जा सकता है अब यहां पे मैंने पीएचपी का एग्जांपल लिया है मतलब बैक एंड फाइल के पास वो फॉर्म का डाटा जा

रहा है ये फाइल का हमने नाम दे दिया अभी के लिए एक्शन हमारे लिए इतना रिलेवेंट नहीं है बेसिकली हम बस फॉर्म डिजाइन करना

सीख रहे हैं उसका डाटा कहां जा रहा है उस डटा के साथ बाद में क्या होता है ये वाला पार्ट हमारे कंसर्न का अभी नहीं है तो

सबसे पहले एक फॉर्म को बनाकर देख लेते हैं इस ऊपर वाले पूरे पार्ट को हम करने वाले हैं कॉमेंट आउट क्रिएट करते हैं अपना एक

फॉर्म अब फॉर्म के अंदर हमें कोई एक्शन डालना पड़ेगा एक्शन में अभी के लिए डाल देते हैं कि कोई हमारी एशन ड पीएपी नाम की

एक फाइल होगी बैक एंड में जो इस फॉर्म के डाटा को प्रोसेस कर रही होगी कि आपने लॉग इन किया है तो सारी इंफॉर्मेशन आपने डाली

है क्या साइन अप कर रहे हैं कि आपको लॉग इन करना है तो सारा आपने यूजर नेम और पासवर्ड सही डाला है क्या कि अगर आप साइन

अप कर रहे हैं तो फिर सारी इंफॉर्मेशन आपके भर के दी है प्रॉपर्ली भर के दी है फोन नंबर में ऐसा तो नहीं है ए बी सी डी

डाल दिया है तो इस तरीके की सारी जो चीजें होती हैं एक्शन वाली फाइल में चेक हो रही होती है अभी के लिए वो काम करना हमारा

कंसर्न नहीं है हमें बनाना है सिंपल फॉर्म को तो फॉर्म को हम इस तरीके से कुछ डिफाइन करते हैं अब फॉर्म के अंदर हम डिफरेंट

डिफरेंट एलिमेंट्स का जो है इस्तेमाल करते हैं कभी-कभी ऐसे भी फॉर्म होते हैं जिसके अंदर हमें कुछ अपनी ईमेल आईडी टाइप करनी

होती है कभी-कभी कोई ऑप्शन हमें सिलेक्ट करना होता है अगर आपने google's चलाए हो अभी ऑनलाइन सेमेस्टर्स के टाइम पे कोई

ऑप्शन हमें टिक करने होते हैं या फिर कोई बटन को हमें क्लिक करना होता है तो काफी सारी चीजें होती हैं इनमें से सबसे पहले

बात करते हैं पहले फॉर्म एलिमेंट की जिसका नाम है इनपुट इनपुट को कुछ हम इस तरीके से लिखते हैं इनपुट टैग इसको कहा जाता है

जिसके अंदर टाइप हमारा होगा टेक्स्ट यानी कुछ टेक्स्ट ये इनपुट लेगा और प्लेस होल्डर यानी इसके अंदर पहले से क्या लिखा

होगा इसको लिख कर देखेंगे तो बेटर समझ में आएगा बना लेते हैं एक इनपुट इनपुट के अंदर टाइप हम दे देते हैं टेक्स्ट टेक्स्ट हमने

टाइप दिया प्लेस होल्डर लिख लिया टाइप समथिंग यर तो इस तरीके का इनपुट टैग हमने बना

लिया है अब यहां पर हमारे लिए क्या हुआ एक इनपुट बॉक्स आ गया है जिसके अंदर ऑलरेडी लिखा हुआ है टाइप समथिंग हियर तो जो भी

प्लेस होल्डर के अंदर वैल्यू होती है प्लेस होल्डर का इंग्लिश में मतलब होता है कि यहां पे कोई ऐसी चीज है जो आप कुछ नहीं

लिखेंगे तो वो चीज लिखी होगी जैसे इस टाइप समथिंग यर के अंदर मैं अपना नाम लिख दूं तो पीछे वाला जो बैकग्राउंड टेक्स्ट है वो

चला जाएगा तो जब भी हमें बैकग्राउंड में कुछ टेक्स्ट चाहिए उसको प्लेस होल्डर के अंदर डाल देंगे और किस तरीके का हमें

इनपुट लेना है इनपुट लेना है हमें टेक्स्ट टाइप का तो टेक्स्ट टाइप का जब भी इनपुट लेते हैं तो यहां पे हमारे पास हम कोई भी

टेक्स्ट जो है अपना लिख पाते हैं श्रद्धा 1 2 3 4 5 6 इस तरीके से मान लीजिए हम एक और इनपुट बना लेते हैं तो फॉर्म के अंदर

एक तो इनपुट बना लेते हैं अपने यूजर नेम का कि अपना यूजर नेम एंटर कर दो एक इनपुट बनाते हैं अपना पासवर्ड का कि यहां पे

हमें एंटर करना है पासवर्ड और इसमें टाइप क्या है इसमें टाइप भी ना पासवर्ड दे देते हैं कर लेते हैं सेव अब यहां पे यूजर नेम

के अंदर तो हम एंटर कर रहे हैं अपना यूजर नेम अब पासवर्ड के अंदर क्या एंटर करें पासवर्ड के अंदर जो भी हम एंटर करेंगे वो

देखिए डॉट्स की फॉर्म में डिस्प्ले हो रहा है और हम देख ही नहीं पाएंगे कि वह पासवर्ड में हम क्या चीज एंटर कर रहे हैं

तो इस तरीके से जब भी इनपुट में पासवर्ड लेना होता है हम टाइप उसका पासवर्ड डिफाइन कर सकते हैं टेक्स्ट डिफाइन करेंगे तो वो

दिखेगा पासवर्ड डिफाइन करेंगे तो कीज तो प्रेस होंगी पर एक्चुअली वो बुलेट पॉइंट्स की फॉर्म में आएगा तो दिखेगा नहीं किसी और

को कि क्या चीज स्क्रीन पर टाइप हो रही है अब ये हमने इनपुट के दो टाइप्स देख लिए टेक्स्ट और पासवर्ड नेक्स्ट बात करते हैं

लेबल्स की लेबल क्या काम करते हैं हमारे फॉर्म के अंदर लेबल के दो यूजेस होते हैं मतलब किसी भी इनपुट के ऊपर हम एक लेबल

असाइन कर देते हैं लेबल का मतलब होता है बेसिकली एक टैग असाइन करना कि हम इस चीज को एक कोई स्पेशल नाम दे रहे हैं या जैसे

स्टूडेंट को रोल नंबर दे देते हैं वैसे ही हम किसी इनपुट एलिमेंट को एक लेबल दे देते हैं अब लेबल के दो फायदे होते हैं जिनमें

से सबसे पहला फायदा होता है कि जो भी हमारे स्क्रीन रीडर यूजर्स होते हैं मतलब हो सकता है हमारी वेबसाइट को यूज करने

वाले कुछ लोग जो हैं विजुअली पेयर्ड हो उनकी आईसाइट खराब है या वो देख नहीं पा रहे हैं तो कुछ डिवाइसेज में ये फीचर होता

है कि डिवाइस जो है ऑटोमेटिक डिटेक्ट करता है कि क्या-क्या एलिमेंट स्क्रीन पर हैं और वो उस हिसाब से बोलता है ये फीचर आफ के

अंदर बहुत ज्यादा है कि वेबसाइट पर जो जो चीजें लिखी हैं वो बताई जाती हैं तो लेबल्स यहां पर हेल्प करते हैं कि उन

स्क्रीन रीडर यूजर्स के लिए हमारे पास पहले से ही उनको बोलकर बता दिया जाता है कि यहां पर एक चेक बॉक्स है या यहां पर एक

बटन है या यहां पर एक फील्ड है इनपुट फील्ड है जिसके अंदर आपको अपना यूजर नेम टाइप करना है या यहां पर एक फील्ड है

इनपुट फील्ड जिसके अंदर आपको अपना पासवर्ड टाइप करना है तो वहां पर लेबल्स जो हैं काफी ज्यादा हेल्प करते हैं एक और जगह

लेबल्स हमें काफी हेल्प करते हैं वो होते हैं हमारे रेडियो बटंस रेडियो बटंस यानी वो बटन जिनमें आप चॉइस में एक ही सिलेक्ट

कर सकते हैं उस तरीके के बटंस को हम यूजुअली रेडियो बटंस कहते हैं रेडियो बटन को कैसे डिफाइन करते हैं जैसे हम एक और

इनपुट का टाइप यहां पर ले लेते हैं और टाइप में हम लिख देंगे रेडियो अब यहां पर हमें प्लेस होल्डर लिखने की जरूरत नहीं है

यहां पर हम दो एट्रियो डिफाइन करेंगे इनमें से सबसे पहला एट्रिल है कि क्लास 11थ और दूसरा एट्रियो है नेम और

यहां पर हम लिख देंगे क्लास 11थ सेम तरीके से हम एक और रेडियो बटन बना सकते हैं ये रेडियो बटन क्या होगा ये रिप्रेजेंट करेगा

क्लास 12थ को इसके अंदर लिखेंगे क्लास 12थ इसके अंदर आप नोटिस करेंगे हमने नाम जो है दोनों को सेम दिया है अब सेम नाम का फायदा

क्या होगा वह मैं थोड़ी देर में बताऊंगी अभी के लिए बस बना रहे हैं वैल्यू अलग-अलग है यानी इनके नाम अलग-अलग हैं और अब दो

हमारे पास बटंस आ गए हैं क्लास 12थ नहीं तो क्लास 11थ क्लास 12थ नहीं तो क्लास 11थ रेडियो बटंस की स्पेशलिटी होती है एक बार

में आप उनमें से एक ही क्लिक कर सकते हैं मतलब मल्टीपल ऑप्शंस के लिए नहीं होते जैसे आपके जेई मेंस के टेस्ट होते हैं तो

उसमें मल्टीपल ऑप्शंस अगर नहीं हो तो उसके अंदर एक ही ऑप्शन चारों में से चूज कर सकते हैं तो वैसे केसेस के लिए रेडियो

बटंस हमारे होते हैं अब इनमें से कोई एक ही हम चूज कर सकते हैं अब बैक एंड पे मैं थोड़ा सा हल्का सा बताऊं एक्स्ट्रा

इंफॉर्मेशन के लिए कि क्या होता है जिस भी रेडियो बटन को आप चूज करेंगे मतलब अगर आप 11थ को चूज करते हैं तो क्या होगा बैक एंड

को इंफॉर्मेशन मिलेगी कि आपने क्लास में चूज किया है 11थ को तो ये वैल्यू उसके पास जाएगी ये जो हमने प्रिंट करवाया ये नहीं

जाता हमेशा वैल्यू जाती है तो वैल्यू के अंदर अगर आप लिखेंगे क्लास 10थ और आपने प्रिंट करवाया क्लास 11थ तो यहां तो क्लास

11थ का बच्चा क्लास 11थ पे टिक करेगा लेकिन हमारे जो बैक एंड के पास इंफॉर्मेशन जाएगी वो क्लास 10थ की जाएगी इसीलिए हमेशा

जो है वैल्यू और जो हम प्रिंट करवा रहे हैं यूजर को वो सिंक में होना चाहिए क्योंकि यूजर को ये वैल्यू नहीं दिखती और

बैक एंड को ये वाला हमारा जो प्रिंट करवा रहे हैं यूजर को ये वाली वैल्यू नहीं दिखती

तो इन दो चीजों का ध्यान रखना है तो रेडियो बटंस के अंदर सिमिलर चीज जो है वही कर सकते हैं अब इन दोनों रेडियो बटंस को

हम एक लेबल के अंदर डाल सकते हैं लेबल में लिख देंगे यहां पे फॉर आईडी यहां अब एक आईडी भी बना सकते हैं आईडी इज लाइक वही

सेम चीज कि एक स्टूडेंट को आपने रोल नंबर दे दिया कि हां इसका रोल नंबर 1664 है अब हम यहां पर दो सिमिलर रेडियो बटंस बना

सकते हैं एक क्लास 11थ का दूसरा भी क्लास 11थ का बना सकते हैं पर अगर हम उनको अलग-अलग आईडी दे दें तो वो रेडियो बटंस

अलग-अलग हो जाएंगे तो आईडी देने के लिए इसको दे देते हैं मान लीजिए आईडी वन या इसकी आईडी हम 101 भी रख सकते हैं एंड इसकी

आईडी हम रख सकते हैं 102 तो यहां पे फॉर 101 यह हमने यहां लिख दिया यहां पे भी हम अपना लेबल बना सकते

हैं यह लेबल है किसके लिए फॉर आईडी 102 तो इस लेबल के अंदर हम डाल देंगे अपने सेकंड वाले इनपुट को तो ये फॉर्म के अंदर दो

हमारे लेबल्स आ गए एक हो गया 101 एक हो गया 102 अब लेबल का फायदा यह हुआ कि आप अगर क्लास 11थ पर भी क्लिक करेंगे तो भी

वो टिक हो जाएगा क्लास 12थ पर भी टिक करेंगे तो भी वो टिक हो जाएगा लेकिन जब तक लेबल एजिस्ट नहीं करते थे जैसे अगर मैं

इसको कर लूं कॉपी और कंट्रोल जीी तो इस केस में हमारे पास एक भी लेबल जो थे वो नहीं था अब इस कोड को अगर मैं सेव करूं तो

अब मैं यहां क्लिक कर रही हूं तो कुछ हो नहीं रहा मतलब बटन जो है काम नहीं कर रहे तो लेबल का फायदा ये होता है कि जब भी

हमारे पास सेम नाम होता है मतलब नेम हमने सेम रख दिया है दोनों अपने इनपुट का रेडियो बटंस का तो हमारे पास ये

फंक्शनैलिटी आ आ जाती है कि टेक्स्ट पर भी हम क्लिक करें ना मतलब इसको सेव करके टेक्स्ट पे भी क्लिक करें तो भी रेडियो