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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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