HTML Tutorial for Beginners | Complete HTML with Notes & Code

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

वो है एक लैपटॉप और साथ के साथ बहुत सारा एक्साइटमेंट जो भी चीज आपको पसंद आए जो भी चीज मैंने बोली हो वीडियो के अंदर उसको मुझे नीचे कमेंट करके बताना और अगर ऐसी कोई चीज है जो आपको लगता है कि मुझे आगे की वीडियोस में एडिशनल कवर करनी चाहिए उसके बारे में आप मुझे नीचे बता सकते हैं साथ के साथ मुझे हेल्प मिलेगी कौन सा सेक्शन ज्यादा कवर हो रहा है अगर आप टाइम स्टंप्स नीचे डाल रहे होंगे जैसे-जैसे आप लेवल्स में आगे बढ़ रहे हैं तो तो शुरू करते हैं यार अपने नए एचटीएमएल

कोर्स को [संगीत] अब कुछ कुछ चीजें अच्छी हैं जैसे आप स्टाइल एंड फॉर्मेटिंग वगैरह कर सकते हैं इसमें इमेजेस एंड मीडिया है जैसे आप जैसे ही 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थ पर भी टिक करेंगे तो भी वो टिक हो जाएगा लेकिन जब तक लेबल एजिस्ट नहीं करते थे जैसे अगर मैं इसको कर लूं कॉपी और कंट्रोल जीी तो इस केस में हमारे पास एक भी लेबल जो थे वो नहीं था अब इस कोड को अगर मैं सेव करूं तो अब मैं यहां क्लिक कर रही हूं तो कुछ हो नहीं रहा मतलब बटन जो है काम नहीं कर रहे तो लेबल का फायदा ये होता है कि जब भी हमारे पास सेम नाम होता है मतलब नेम हमने सेम रख दिया है दोनों अपने

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

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

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

करने का मतलब आप समझ सकते हैं कि बच्चों को एक ग्रुप असाइन कर दिया कि आपका ग्रुप वन है और इन बच्चों का ग्रुप टू है अब ग्रुप वन के अंदर हो सकता है पांच बच्चे हो अब इन पांच बच्चों को कैसे हम डिफरेंशिएबल इनको हम दे देंगे एक आईडी इसकी आईडी वन है इसकी आईडी टू है थ्री है फोर है और फाइव है और दूसरे ग्रुप के बच्चों की आईडी क्या है दूसरे ग्रुप में मान लीजिए चार बच्चे हैं और इनकी भी अपनी एक आईडी है 1 2 3 4 तो अगर एक साथ ये

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

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

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

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

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

में से जितने चेक बॉक्स टिक हुए हैं सबकी इंडिविजुअल आईडी क्या है तो आप इस तरीके की फंक्शनैलिटी बना सकते हैं कि जो भी चेक बॉक्स टिक हो उसके ऊपर एक ग्रीन कलर आ जाए या उसके ऊपर एक ब्लू कलर आ जाए उस तरीके की चीजें हम कर सकते हैं जब हम सीएसएस और जावास्क्रिप्ट दोनों सीख लेंगे तो वहां आईडी काम आ रही होगी अभी इतना यूजफुल नहीं है फिर भी दे देते हैं इसको 10 ही देते हैं और इस चेक बॉक्स को नाम देंगे हम मैथ सिमिलर तरीके से और चेक बॉक्सेस बना लेते हैं

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

की जगह आ जाएगी नीचे हम अपनी क्लास सिलेक्ट कर सकते हैं फाइनली यहां पे चेक बॉक्सेस आ अपने फेवरेट सब्जेक्ट्स हमें सिलेक्ट करने हैं तो हम सिलेक्ट कर लेंगे मैथ केमिस्ट्री मे बी फिजिक्स या अगर आपको मजा आ रहा है अभी एचटीएमएल सीखते हुए तो उसमें कंप्यूटर साइंस भी टिक कर लो तो इस तरीके से हम सबको भी टिक कर सकते हैं तो जब भी मल्टीपल ऑप्शंस को सेलेक्ट कराना हो तब हम यूज़ करते हैं इस्तेमाल करते हैं अपने चेक बॉक्सेस का नेक्स्ट बात करते हैं टेक्स्ट एरिया की कभी-कभी हम चाहते हैं कि हम जो

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

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

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

लिए हम रोज एंड कॉलम्स डिा कर सकते हैं तो इसमें रोज हम लिख देते हैं इज इक्वल टू 5 तो क्या होगा फाइव रोज के बराबर यह हमें स्पेस दे देगा तो इसमें हम लिखते जा सकते हैं मतलब कुछ भी लिख सकते हैं फाइव रोज तक हमारे पास स्पेस आ जाएगी इनफैक्ट हम कॉलम्स भी बढ़ा सकते हैं जितने मर्जी चाहे तो इस तरीके से बड़ा जो फीडबैक फॉर्म है वो हमें मिल जाएगा तो ऐसे हम डिफाइन करते हैं अपने टेक्स्ट एरिया को अब नेक्स्ट बात करते हैं सेलेक्ट की अब कुछ-कुछ फॉर्म्स में हमारे पास ड्रॉप

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

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

हमें चाहिए तो इस तरीके से हम सिलेक्ट कर सकते हैं अपने ड्रॉप डाउन की हेल्प से भी अब इस फॉर्म को फॉर्मेट करके क्या करेंगे थोड़ा सा और सुंदर बना लेंगे जैसे इस फॉर्म में स्पेसिंग थोड़ी सी हमारी खराब है स्पेसिंग ठीक करने के लिए सबसे पहले तो यूजर नेम और पासवर्ड के बीच की ये जो एक्स्ट्रा लाइंस है इनको हम हटा देंगे तो यूजर नेम यहां आ गया पासवर्ड यहां आ गया फॉर्म का एक टाइटल भी दे देते हैं तो ऊपर हेडिंग दे देते हैं फॉर्म से पहले रजिस्ट्रेशन फॉर्म इनफैक्ट हां h1 जो है

थोड़ी सी मेन हो जाएगी तो ए4 तक ट्राई करते हैं तो ये रजिस्ट्रेशन फॉर्म हमारे लिए आ गया उसमें यूजर नेम लिख सकते हैं पासवर्ड लिख सकते हैं अब अब सिलेक्ट योर क्लास के बाद जो हमने लाइंस डाली हैं उनको ना डालें तो अपनी क्लास हम यहां से सेलेक्ट कर सकते हैं फिर सेलेक्ट कर सकते हैं अपने फेवरेट सब्जेक्ट्स को फाइनली फिर कर सकते हैं सिलेक्ट अपनी सिटी तो यहां सिटी के ऊपर लिख देंगे सिलेक्ट योर सिटी एंड फीडबैक में हम इस चीज को कर देते हैं तो पूरा का पूरा फॉर्म जो है हमारे लिए

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

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

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

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

दे देगा इसको कर लेते हैं कॉपी एंड वापस से अपने एचटीएमएल कोड में आते हैं इस फॉर्म को अभी के लिए क्या करते हैं अभी के लिए इसको कर देते हैं कॉमन डाउट हम क्या करेंगे अपने पेज पर वो पूरा का पूरा आई फ्रेम वाला जो भी टैग के अंदर सारी इंफॉर्मेशन थी उसको कॉपी कर लेते हैं इसके अंदर अभी इंपॉर्टेंट चीज ये है कि हमने आई फ्रेम लिखा हुआ है विड्थ हाइट यहां पे डिफाइन की हुई है सोर्स के अंदर हमने लिखा है अपना पूरा का पूरा लिंक व्हिच इज एक youtube4 करके अगर सेव

करें इसको तो क्या होगा हमारे वेब पेज के ऊपर हमारा जो पूरा वीडियो है वोह दिखने लग जाएगा अब यहां वीडियो की जगह आप इस वीडियो को रन भी कर सकते हैं पूरा का पूरा youtube's चलानी है इनफैक्ट किसी और वेबसाइट साइट को डिस्प्ले कराना है तो वो आप यहां पर करा सकते हैं अब कुछ-कुछ ऐसी वेबसाइट होती हैं जो ये अलाउ नहीं करती जैसे अगर आप एक आई फ्रेम क्रिएट करने की कोशिश करें जिसमें आप सोर्स डाल रहे हैं google.com का google.com का तो इसको अगर सेव करें तो ये वाली चीज काम नहीं करेगी

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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