Transcript for:
HTML सीखा जाए: शुरुआती से विशेषज्ञ तक

हाइ विवर्ण मैं हूँ आपकी शरदा दीदी एंड वेलकम टू अपना कॉलेज आज की वीडियो में हम पढ़ने वाले हैं HTML को जिसमें level 1 से लेकर यानि basic level से लेकर advanced level, pro level तक हम पूरे HTML को पढ़ रहे होंगे तो अगर आप वो student है जिनको बिलकुल भी coding, programming, development नहीं आती है तो इस वीडियो के अंदर आप वो चीज़ें सीख जाएंगे code कैसे करना होता है, HTML की web development में importance क्या होती है, HTML को actually use कैसे करते हैं साथ के साथ इस वीडियो को हमने चार लेवल में डिवाइड किया और चारो लेवल को कंप्लीट करने के बाद आप एक प्रो प्रोग्रामर बन जाएंगे HTML में, साथ के साथ इस वीडियो के अंदर हमने दो major project ideas आपको दिये हैं, उनको कैसे build करना है, वो भी आपको सिखाया है आप कभी भी अपनी रिविजियन के लिए यूज कर सकते हैं अब इस वीडियो को देखने के लिए हमें दो बेसिक चीजों की जरूरत है वह एक लैपटॉप और साथ के साथ बहुत सारा एक्साइटमेंट जो भी चीज आपको पसंद आए जो भी चीज कि अब एश्टीएमल के लिए बहुत सारे टेक्स्ट एडिटर्स एक्सिस्ट करते हैं इसके अंदर दो तीन तरीके के टेक्स्ट एडिटर्स होते हैं एक वह जो हम अपने सिस्टम पर चला सकते हैं कुछ हमारे पेड होते हैं कुछ नहीं होते तो यहां 100% free है you can just go to the website आप वहाँ से download कर सकते हैं इसके अंदर कुछ-कुछ चीज़ें अच्छी हैं जैसे आप style and formatting वगेरा कर सकते हैं इसमें images and media है जैसे आप जैसे HTML का code save करेंगे उसको आप preview करके देख सकते हैं कुछ plugins या कुछ third party integrations वगेरा मिल जाएंगी अपने HTML के code को और और इसके अंदर आप editing वगैरा भी कर सकते हैं अब इसमें सिर्फ HTML नहीं है आप normal इसको text वगैरा लिखने के लिए भी use कर सकते हैं तो simply website पर जाना है वहाँ पर एक basic form है उसको fill कर सकते हैं उसको download कर सकते हैं and you can use it completely freely on your system दूसरा एक text editor है ultra edit के नाम से जिसमें professional लोगों के लिए काफी सारी features available हैं so if you are a professional developer जो सोच रहा है कि HTML की तरफ वो जा रहे हैं आप freelancing वगैरा करते हैं आप web development में अपनी professional journey की शुरुवात कर रहे हैं यूर आलरेडी डूइंग जॉब तो दिस इस पेट सॉफ्टवेयर जिसमें जाकर आप इसके फीचर्स जो है चेक आउट कर सकते हैं इसके अंदर आपके पास कोड हाइलाइटिंग जैसे कुछ चीजें आ जाएंगे कोड टेंपलेट्स आपको दिख जाएंगे सी एस एस कलर स्वापिंग आ जाएगी इंटिग्रेट कर सकते हैं इसको आप अपने एसेसे तो वो tools and technologies जो आपके professional development experience को और जादा better कर देंगी वो सारी functionalities इसमें आपको मिल जाएंगी and in fact even if you are using it for a personal project you can just try out the 30 day trial period उसको आप एक बार try कर लो and उसके बाद if you like it तो आप किसी freelancing project या किसी paid internship वगेरा के लिए आप इसको use कर सकते हैं तो ये दो text editors होगे HTML के लिए लेकिन अपनी video के लिए हम इस्तमाल करने वाले हैं visual studio code यानि VS code का एक प्रोग्राम एक कोड लिखना होता है तो हमें कोड एडिटर की जरूरत पड़ती है तो HTML का कोड लिखने के लिए हम विजुअल स्टूडियो यानि VS Code नाम के कोड एडिटर का इस्तेमाल करेंगे कोड एडिटर को हम इमाज़न कर सकते हैं कि वह एक नोटबुक की तरह है जिसे नोटबुक के अंदर हम डिफरेंट डिफरेंट चीजें लिखा करते हैं वैसे ही जब भी हमें कोड लिखना होता है तो उसके लिए कोड एडिटर का ह अब HTML का code वैसे तो आपने school में अगर कभी HTML पढ़ा होगा तो आप देख रहे होंगे कि notepad में भी लिख सकते हैं, यानि आपके computer system में जो notepad की files बनती हैं,.txt से file बनती हैं, उनकी जगह आप.html वाली files बनाकर भी HTML लिख सकते हैं, पर code editor जो है हमें काफी सारी external functionality देगा, सा projects करने है, जिन projects को हमें इस video में discuss कर रहे होंगे, या फिर आपको खुद का अपना कुछ build करना है, आगे जाके एक website build करनी है, और जादा software systems बनाने है, तो वो आपके लिए बनाना पहले से ही असान हो जाएगा, क्योंकि पहले से ही सबसे जो seamless process वाली चीज होती है, ना सबसे efficiency वाली चीज, उनको हम use करवा देंगे, अब VS Code Microsoft की तरफ से freely available है, तो इसको कोई भी जाकर इस्तेमाल कर सकता है, तो सबसे पहले इसको download करने के लिए हम search करेंगे internet पर download, VS कोड तो यह फर्स्ट जो लिंक आएगा इस पर हमें चले जाना है यहां पर साइट भी मैं बता देती हूं कोड डॉट विजुअ form slash download, अब इसमें काफी सारे option आ गए हैं, अब आप Windows machine पर हैं, Windows 7, 8, 10, 11 पर, तो यहाँ पर आप अपने system के हिस्साब से, कि 64 bit system है तो कौन सा download करना है, 32 bit है तो कौन सा download करना है, mostly लोगों का 64 bit system होता है, तो इसको आप यहाँ पर click करके download कर सकते हैं, अगर आप Linux पर हैं, तो उ अब जब भी आप Windows के लिए डाउनलोड करेंगे तो बीच में काफी सारे ना चेक बॉक्सेज हमारे लिए आएंगे, हमें क्या करना है इन सारे के सारे चेक बॉक्सेज को टिक कर देना है, जैसे ही टिक करेंगे हमारा Visual Studio Code पूरी तरह इंस्टॉल हो जाएगा और इसको अब हम कहां पर होना चाहिए या हमें कोई paragraph लिखना है अपने page के उपर तो वो कहां पर placed होना चाहिए जैसे इस website के अंदर HTML ने बताया है कि download visual studio code उपर लिखा होना चाहिए उसके नीचे ये सारी चीजे लिखी हो नीचे उसके नीचे ये सारे icons हमें दिखाने हैं और फिर download के लिए हमें buttons दिखाने हैं अब हो सकता है आप अपनी जब website design करें तो उसके अंदर layout कुछ और हो जैसे अगर हम किसी और website को देखें जैसे google.com पर अगर हम जाते हैं तो यहाँ पर search bar आना चाहिए, यहाँ पर यह दो buttons आनी चाहिए, नीचे हमारे पास languages आनी चाहिए, उपर Google का यह image आना चाहिए, यह सारी की सारी चीज़े HTML ने बताई हैं कि यह कहां कहां होनी चाहिए, तो HTML क्या करता है, एक तरीके से एक structure या layout दे रहता है, एक घर को imagine करि� CSS क्या करते हैं उस घर के अंदर दिवारों का color क्या होगा button का shape क्या होगा size क्या होगा button का color होगा या फिर floor पे हमने carpet बिचाया है नहीं बिचाया है वो सारी चीज़ें control करते हैं यानि style वाली CSS का मतलब होता है cascading style sheets ये वो कोड का पार्ट होता है जो डिफाइन करता है कि आपका जो वेब पेज है उसका स्टाइल क्या होना चाहिए जैसे वेस कोड वाली साइट पर अगर जाएं तो यहां पर यह सारे का सारे जो टेक्स्ट लिखा इसका फॉर्ट क्या होने वाला है इसका फिर आपने ये भी डाल दिया कि उनका color क्या होगा, अब fan का जब आप button दबाएंगे, तो actually हमारा पंखा चलना चाहिए, हमारी light जो है on, off होनी चाहिए, ये सारी जो functionality है, जो अंदर का logic है, वो कौन लेकर आता है, वो लेकर आता है एक website के अंदर javascript, तो इस button पर define करेगा मेरा javascript, तो HTML structure बताता है, CSS style बताता है, और javascript हमारे लिए logic बनाता है, इस वीडियो को हमने 4 पार्ट्स में डिवाइड किया है जिनको हम levels कहेंगे पार्ट्स की जगह level 1, level 2, level 3 and level pro level pro करने के बाद आप almost मतलब 100 से भी उपर percentage वाली वो सारी चीज़ें एक बार देख रहे होंगे सीख रहे होंगे जो किसी भी website को बनाने के लिए जितनी HTML आपको आनी चाहिए अब सबसे पहले बात करते हैं अपनी level 1 की जिसके अंदर हम discuss करने वाले हैं about the basics of HTML ऐसी कुछ चीज़ें जो सारे web developers को पता होती हैं वो आप आपको भी पता होनी चाहिए जब भी हम HTML की बात करते हैं इसमें से सबसे पहले बात कर लेते हैं कि HTML स्टैंड्स फॉर हाइपर टेक्स्ट मार्कअप लैंग्वेज यानि एक ऐसी लैंग्वेज है जो किसी भी वेबसाइट का जो है मार्कअप बताती है स्ट्रक्चर बताती है लेव बताती है एसटीमल इस द कोड द यूज टू स्ट्रक्चर वेब पेज अगर हम इस website की बात करें, तो इसको right click करके अपनी screen पर, या तो आप view page source करें, view page source करके क्या होगा, इस पूरी की पूरी website पे, जो HTML का code लिखा हुआ है, वो सारा का सारा हमारे पास आ जाएगा, ये सारा का सारा जो code है न, इस website का HTML का code है, तो actual में जो web pages होते हैं, websites होते हैं, वह कोड एक्चुली उस सुन्दर्ता में कंवर्ट हो रहा होता है और वह कोड कुछ ऐसा दिखता है और कुछ ऐसा ही कोड हम इस पूरी वीडियो के अंदर लिखने वाले हैं अब अगर आपको किसी भी वेबसाइट का इंटरनल कोड देखना हो तो उसके लिए सिंपली क्या क कुछ parts आप copy कर सकते हैं, recreate कर सकते हैं पर completely किसी website को इस तरीके से copy नहीं कर सकते क्योंकि सिर्फ frontend नहीं होता, websites में backend भी होता है, पर वो सारी चीज़ें extra हैं, अभी के लिए हमें समझना है, view page source करके, हम किसी भी web page का, जो है HTML code देख सकते हैं, तो right click करके हम inspect करके, इस code को और थोड़े से clean format में देख सकते हैं, plus, यह जो arrow button उपर screen पर आता है, कितना part, कौन से हमारे हिस्से को दिया गया है, जैसे, यह जो image है, इसको, यह website का, इतना डबा लेती है यह जो डाउनलोड वाला बटन है यह इतना पार्ट लेता है यह बड़े वाला बटन इतना पार्ट लेता है इसके अलावा यह विंडोज वाला जो इमेज है इसका जो पार्ट है वह इतना है अब यह एक बॉक्स क्यों है यहां एक बॉक्स क्यों हमें बना हुआ दिख रहा है इसके बारे मे यह वाला जो बटन है यह arrow button इतना सा पार्ट ले रहा है download वाला बटन उसके बाद जो पूरा को पूरा बड़े वाला बटन है उसके अंदर हमारे दो तीन आप levels देख रहे होंगे कि बाहर वाला level क्या है उसके अंदर एक और level का हमें डबा देख रहे है उसके अंदर एक और हमारा जो ये website का page है ये हमारे iPhone 12 Pro पर कैसा दिखेगा कुछ ऐसा दिखेगा हम वो भी देख सकते हैं अगर मान लीजे हमारे पास है Galaxy Fold तो उस पर कैसा दिखेगा उस पर ये page कुछ ऐसा दिख रहा होगा अगर हमारे पास iPad Air है तो उस पर ये page कुछ ऐसा दिख रहा होगा तो different different जब भी आपको देखना हो कि different different devices पर कैसा दिखेंगे तो उपर जाकर dimensions में जाना है यहां से device, फिर dimensions और उसके बाद आपके कुछ by default devices आ रहे होंगे उनको देखकर आप check कर सकते हैं जब भी कोई अच्छी से सुन्दर सी website दिखें तो आप page source पर जा सकते हैं और आप उसको inspect कर सकते हैं अब बात करें HTML की तो the component used to design the structure of websites are called HTML tags यह जो हमारी website के उपर पूरा का पूरा एक डब्बा design हो रहा है, एक icon हो रहा है, एक image हो रही है, एक button हो रहा है, यह सारी की सारी चीज़ें HTML tags की मदद से बनाई जाती हैं, HTML के अंदर एक component होता है, जिसको HTML tag कहते हैं, tag की help से आप different different तरीके के items जो हैं, वो create कर सकते हैं, क्यो तो उसके लिए हम अपने downloaded visual studio code पर जाना चाहते हैं, अब मेरा visual studio थोड़ी कुछ चीजों से भरा हुआ है, हो सकता है आपके पास इतनी सारी चीजें ना हो, क्योंकि मेरा already downloaded पड़ा था, हमें क्या करना है, इसमें open करना है अपना एक folder, हम एक नया folder create करने वाले हैं, उसको नाम दे देंगे HTML tutorial, इसको create कर लेते हैं, अब सबसे पहले अपने VS Code को खोलने के बाद इसमें हमें एक extension install करनी है, यहां extensions वाला यह button है, इसके उपर हम जा सकते हैं, और extension हमें install करनी है live server, तो हम क्या करेंगे, live server पर जाएंगे, इस वाले live server पर जाना है, जिस पे I think around 19.6 million जो downloads हैं अभी है, इसको कर लेंगे install, इसको कर आपको बंद करके दुबारा से रीस्टार्ट करना पड़े वीएस कोड को बट डाट इस कंप्लीटली फाइन अब यहां फाइल वाले ऑप्शन में जाएंगे एंड अपने लिए एक फोल्डर हमने बनाई लिया था एस्टीएमल ट्यूटोरियल जिसको मैं खोला हुआ और ये index.html हमारे लिए खुल कर आ गई है, अब ये जो file हम already discuss कर चुके हैं, कि आप notepad के उपर भी बना सकते हैं, पर यहाँ पर अभी मैं दिखाऊंगी कि क्या क्या हमें functionalities मिल जाती हैं, जिसकी वज़े से VS Code या किसी और text editor पर करना बहुत जादा helpful होता है as compared to a notepad, अब ज पर usually जो most popular है, वो.html है, क्योंकि वो updated जो version है extensions का, जिसे text files को हम.txt से create करते हैं, python की files को.py से करते हैं, वैसे यहाँ पर HTML files को.html से हमें खतम करके save करना होता है, अब जो भी एक website बनती है, जो भी एक software बनता है, उसके अंदर सिर्फ frontend नहीं होता, तो index.html, नाम इस फाइल का रखने के पीछे लॉजिक है कि हमारा जो back end होता है उसको शुरुआत में एक home page चाहिए होता है जब भी आप किसी website को खोलते हैं उस website का सबसे पहले एक home page खुलता है जैसे for example अगर हम एक website सर्च करना चाहें google.com तो ये google.com का home page है जो हमारे लिए खुल रहा है उसके बाद हम यहाँ पर कुछ भी जो सर्च कर सकते हैं वो हम search कर लेंगे और चले जाएंगे किसी और sub page पर, पर ये है इसका home page, अब home page कैसे detect करता है, जब भी server जो है हमारे browser पर render कर रहा होता है page को, वो detect करता है home page को index नाम से, यानि जब भी आप अपनी different different एक तो HTML फाइल होगी नहीं, कोई आप बड़ा सा website बनाएंगे, उसके अंदर बहुत सारी HTML फाइल होगी, तो server देखेगा कि index.html नाम की कौन सी HTML फाइल आपके पास है, और फिर उस, फाइल को by default वो आपका home page बना देता है अगर आपने index.html नाम की फाइल जो है अपनी website के अंदर नहीं create की तो आपको server को अलग से जाकर बताना पड़ेगा कि ये वाली दूसरी जो फाइल है ये मेरा home page होनी वाली है लेकिन by default ये मतलब बहुत अच्छा programmers का जो है तरीका है programmers की technique है कि हम हमेशा index.html के साथ शुरुवात करते हैं उसको अपने home page की तरह treat करते हुए उसके अंदर अपनी सारी important चीज़ें या major चीज़ें जो है वो लिख रहे होते हैं अब अपने HTML पेज को देखें, तो इसके अंदर हम एक बार exclamation टाइप कर देंगे, और जैसे आप exclamation टाइप करेंगे, ना VSCode के अंदर ये दो आपके लिए features आएंगे, इसमें से सबसे पहला exclamation, कुछ यहाँ पे settings वाला आपका tool आपको दिखाई दे रहा है, उसके बाद emit abbreviation और ये toolkit by default VS code के अंदर आती है, ये toolkit क्या करती है, आपको बहुत सारे helpful tools दे देती है, जैसे, अगर जैसे ही मैंने इस exclamation mark पर click किया, वैसे ही मेरे लिए एक पूरा का पूरा HTML का sample code जो है, वो खुल गया, इस code को हम boilerplate code कहते हैं, यानि इतना code तो आपको by default चहिए ही होता है, almost स ये code दिखने में पहली बार में डरावना सा लग रहा होगा पर ये डरावना नहीं है इस code को पूरी तरह हम आनलाइस करेंगे इसके anatomy वगेरा सब कुछ हम छान मारेंगे बस समझने वाली चीज सबसे पहले ये है कि VS code ने आपके लिए असान कर दिया है कि आपको पूरा code खुद से न याद करना है न देखना है न लिखना है हमें simply जाना है इस option पर और emit पर हमें click करके पूरा का पूरा हमें boilerplate code मिल रहा होगा अब यह जो functionality है यह notepad पर अगर आप code लिख रहे होते तो आपको नहीं मिल रही होती तो काफी सारी और important चीज़ें जो है हम सीखेंगे धीरे धीरे अब एक और सवाल आपके दिमाग में आया होगा कि हमने एक extension install की थी live server page हमारे लिख खुल जाएगा, अब अभी के लिए हमने HTML में कुछ नहीं लिखा, इसलिए हमारा page हमें खाली लग रहा है, अगर मान लीजिए मैं यहाँ पे sample के तौर पर कुछ भी लिख दू, अभी के लिए ध्यान नहीं देना है कि यह क्या मैंने लिखा हुआ है, इसका क्या हेलो वर्ल्ड बाई डिफॉल्ड वो स्टेटमेंट होते हैं जो कोई भी आप नई प्रोग्रामिंग लांगवेज कुछ भी सीख रहे होते हैं तो कोडिंग के अंदर आपको लिखनी पड़ती है अटलीस मैं तो लिखना जादा पसंद करती हूँ तो हेलो वर्ल्ड मेरी स्क् अब ऊपर आप notice कर रहे होंगे कि ये जो है server हमारा खुल गया है और index.html नाम की file जो है खुली है, अब for example मैं इस file का जो है नाम change कर दू, इसको हम कर लेते हैं rename और इस file को कुछ और नाम दे देते हैं, इसको नाम दे देते हैं हम index2.html, अब इसको save करते हैं, तो क्या इसने display किया cannot get index.html यानि by default ये server जो है index.html को डून रहा है इसलिए हमेशा ध्यान रखें कि जब अपनी first file as a home page create करें तो उसको नाम दे index.html अब ये जो बड़ा सा code हमें दिख रहा है इसके बारे में tension ना लेते हुए सबसे बहले बात करते हैं कि HTML tags क्या होते हैं HTML के अंदर एक container होता है container यानि जैसे हमारी kitchen के अंदर कुछ डब्बे रखे होते हैं जिसके अंदर कुछ-कुछ मसाले होते हैं, कहीं चीनी रखी होती है, कहीं नमक रखा होता है तो वो डब्बे हमारे containers होते हैं, जिसके अंदर कुछ content होता है, यानि कुछ समान होता है वैसे ही, जब भी हमें web page के ऊपर, अपनी website के ऊपर कुछ समान डालना होता है फिर चाहे वो एक button हो गया, फिर चाहे वो एक paragraph हो गया, और कोई heading हो गयी हो तो उसको हमें container के अंदर डालते हैं, और इस container को हम कहते हैं HTML tag तो HTML tag is a container for some content या फिर other HTML tags यानि एक HTML tag के अंदर, एक container के अंदर आप दूसरा container भी डाल सकते हैं जैसे मम्मी कभी कभी करती है ना कि kitchen में जगे बचाने के लिए क्या करते हैं बड़े डब्बे के अंदर कोई छोटा डबा डाल देते हैं कुछ इसी तरह programming के अंदर होता है HTML में एक बड़ा container बड़ा HTML tag लेते हैं इसको समझने के लिए हमें पैराग्राफ टाग का एग्जांपल लेंगे जब भी हमें एक वेबसाइट के ऊपर कोई पैराग्राफ दिखाना होता है तो हम इस तरीके की कोई स्टेटमेंट लिख रहे initial चीज लिखी है यानि ये angular brackets और इसके अंदर जो है p, इसका मतलब होता है paragraph tag का opening tag, इसको कहते है opening tag और इसको कहते है closing tag, closing tag के अंदर आपको ये slash दिखरा होगा angular brackets के बीच में और उसके बाद अपने tag का नाम, इस tag के अंदर जो हम letter लिख रहे हैं वो p है, यहाँ पर भी p है, paragraph के अंदर हम कोई भी lines लिख सकते हैं, जैसे this is a paragraph, या फिर hello world, I am learning HTML today, इस तरीके का कुछ content होता है, और जब हम इस पूरे की पूरी चीज को consider करते हैं, यानि opening tag, content और closing tag, इस पूरे के पूरे material को हम एक HTML element कहते हैं, तो HTML के अंदर element क्या होता है, tags और उनके बीच का content, जैसे अगर हम अपने code में analyze करें, लिखते हैं same ये statement, इस इस पर ग्राफ तो हमारे लिख या हुआ यह हमारा ओपनिंग टैग हो गया यह हमारा क्लोजिंग टैग हो गया और बीच में हमने कुछ कांटेंट लिख दिया है इसको कर लेते हैं सेव और इसको देख लेते हैं स्क्रीन पर तो दिस इज पाराग्राफ हमारे लिखा आ गया है अब एक और चीज आपने नोटिस की होगी कि जैसे ही मैंने यह एंग्यूलर ब्राकेट और closing bracket टाइप किया तो मेरे लिए automatically जो है opening tag के साथ मेरा closing tag भी आ गया, तो इस तरीके की भी functionality, VS code जैसे text editors जो होते हैं हमें additional देते हैं, इसलिए उनको use करना जादा important रहता है, तो बार-बार हमें closing tags लिखने नहीं पड़ते हैं, तो HTML tag को हमने समझा कि एक container होता है जिसके अंद type HTML, इस statement का क्या मतलब है, इस statement का मतलब है कि हम अपने browser को बता रहे हैं, कौन से browser को, यहाँ पर हम chrome का इस्तमाल कर सकते हैं, हो सकता है आप brave यूज़ कर रहे हूँ, या फिर firefox यूज़ कर रहे हूँ, या फिर safari यूज़ कर रहे हूँ, जो भी browser आप यूज़ कर रहे हैं, browser क इस web page में convert कर दिया, अब यह इतना सुन्दर नहीं लग रहा देखने में, पर धीरे धीरे सुन्दर हो जाएगा, इसमें हमने छोटी सी line जो है वो दिखाई हुई है, तो browser का काम होता है, अपने HTML code को render कराना हमारे web page की form में, तो doc type HTML बताता है, कि जो हम document लिख रहे हैं, इसका जब हम इस तरीके से लिखते हैं, तो इसका मतलब है हम HTML 5 का इस्तेमाल कर र���े हैं, तो version number 5 जो है हम इस्तेमाल कर रहे हैं इस document को लिखने के लिए, उसके बाद second चीज हम देख रहे होते हैं, हमारे लिए HTML का opening और HTML का closing tag आता है, इसमें भी हम देखेंगे कि HTML का opening और HTML का closing tag आया HTML element होता है और वो सबसे बड़ा element होता है अब उसके अंदर आप paragraph डाल दें कहीं button डाल दें, कहीं आप कोई heading डाल दें, वो सारे सब elements हैं यानि बड़ा जो हमारा पूरा को पूरा web page होता है, वो खुद में एक element होता है, उसके अंदर एक tag होता है उसके अंदर बहुत सारा content होता है content किस तरीके से होता है, HTML tag के अंदर खुद के बहुत सारे tags होते हैं वो सारा HTML page का content है तो HTML को हम root element कहते हैं क्योंकि ये सबसे बड़ा element है और सबसे शुरुवाती element है उसके बाद HTML के अंदर देखेंगे हमारे पास आता है head tag और एक body tag, अब head क्या करता है, head वो चीज़ें बताता है हमारे HTML document के लिए, जो हमें web page पर display नहीं करनी, जो बस हमारे code को पता होनी चाहिए, और body tag बताता है वो चीज़ें जो actually हमारे page पर display होती है, जैसे head के अंदर हमा पर हमें अपने पेज के ऊपर उसको display नहीं कराना, जिसे हमने यहाँ पे name viewport लिगा हुआ है, content device with लिए हुई है, यह viewport वाली जो चीज है, यह basically बताती है कि आपकी जो website है, वो responsive होनी चाहिए, यानि अलग-अलग devices जिनकी हमने बात की थी अभी, आपकी जो website है, वो iPad Air पर भी हमारी जो वेबसाइट है वह हमारे सांसिंग गैलेक्सी पर भी अच्छी दिखे मतलब कहीं पर पिक्सल फटवट ना रहे हो कहीं पर कॉमपोनेंट जो है वह बहुत बड़ा ना हो रहा हूं वैसी चीजें ना हो रही हूं इसलिए उस तरीके से हमें वेबसाइट को डिजाइ विशेष के लिए अच्छे से वेबसाइट डिजाइन कर रहे हैं इस चीज को हम रिस्पॉन्सिवनेस कहते हैं कि हमारी वेबसाइट रिस्पॉन्सिव कितनी है कितना अच्छा रिस्पॉन्स देती है जैसे ही हम स्क्रीन का साइज चेंज कर देते हैं आस्पेक्ट रेशो चेंज कर देते हैं यह जो यहां पर आपको 412 दिखाई दे रहा होगा 914 दिखाई दे रहा है यह आस्पेक्ट रेशो यूपोर्ट वाली स्टेटमेंट है ये वाली स्टेटमेंट ये बेसिकली हमारे HTML पेज को रिस्पॉन्सिव होना है ये बता रही है तो ये सारी जो इंफर्मेशन है ये सारी काम की इंफर्मेशन है पर ये हमारे वेब पेज पर डिस्प्ले नहीं होगी तो हेड के अंदर वो उसके बाद आ जाती है हमारी body हम mostly इस video के अंदर body के अंदर के सारे tags को discuss कर रहे होंगे body tag के अंदर वो सारी चीज़ें आती हैं जो data को render कराने में help करती हैं browser के उपर यानि क्या क्या data मुझे web page पर दिखाना है वो सारा body के अंदर लिख रहे होते हैं जिसे हमने यहाँ पर paragraph tag बनाया उसके अंदर हमने लिख दिया this is a paragraph और वो सारा का सारा जो चीज़ है हमारे web page पर actually जाकर हमारे लिए display हुआ तो जो चीज़ हमें display करानी है web page के उपर उसको लिख देंगे अपने body tag के अंदर तो यह कुछ फॉरमाट रहता है किसी भी बेसिक HTML पेज को लिखने का जब भी हम शुरुआत करेंगे यह सारी चीजें हमें लिखनी चाहिए अब इन में से कुछ-कुछ ऐसी चीजें जिनको आप हटा देंगे तो भी आपका कोड चल जाएगा पर वह एक ऑप्टिम और इन सारी चीजों का मतलब जो है एक तो HTML की फाइदा यह होता है कि किसी भी टैक का नाम देखकर आपको याद आ जाता है कि हां यह इस चीज का टैक था तो इतनी जादा चीजें हमें याद नहीं करनी पड़ती प्लस यह सारे के सारे नोट्स नीचे आपको डिस्क्रिप्� अब Visual Studio Code का एक और चुटा सा वाइदा होता है कि किसी भी चीज के बारे में, मतलब इस document में कुछ भी लिखा है, उसके बारे में आपको और जानकारी चाहिए, तो आप simply क्या कर सकते हैं, वहाँ पर जाकर आप click करेंगे तो MDN का एक link आजाएगा, MDN reference आजाएगी, MDN क्या है, हम क्या कर सकते हैं और खुद से आगे बढ़कर चीजें सीख सकते हैं जैसे इसने बता दिया कि कौन-कौन से ब्राउजर में हेड जो है हम लिख सकते हैं कौन-कौन से वर्जिन्स के लिए लिखा जा सकते हैं ब्राउजर कमपैटेबिलिटी बता दी तो साथ-साथ मैं एडवाइस करूँगी कि आप एक बार टुटोरियल खतम कर लेते हैं parent of head and body tag अब यहाँ पे हमने एक head tag देखा और एक body tag देखा यह body वाला part है उपर head वाला part है head और body इन दोनों जो tags हैं उनका parent जो tag होता है वो हमारा HTML tag होता है तो by default head और body जो tag हैं वो हमारे HTML tag के children हो जाते हैं और एक दूसरे के sibling हो जाते हैं I hope यह है इसका coding पर कोई फरक हमारा है Most of the HTML elements have opening and closing tags with content in between. Most of the HTML documents, like paragraph, have content and opening and closing tags. There are also tags in which opening and closing are not different, you just have to write a single thing. For example, for next line, we are using a BR tag, and this entire BR, break line tag, this... इतना ही लिखा जाता है इसके अंदर ना opening होती है ना closing होती है बस इतना ही होता है next है some tags have no content in between जैसे हमारा BR tag हो गया we can use inspect element here view page source to edit HTML इसको हम करके देख लेते हैं जैसे हमारा यह HTML था अब हमारे लिए यह browser पर page render हो गया इसमें हम सबसे पहले करेंगे view page source तो क्या हुआ वो सारा का सारा code यह वाला जो part है इसको अभी के लिए ignore करना है क्योंकि यह सारा part यह नीचे आप जो script tag के साथ part देख रहे होंगे यह सारा हमारे live server ने हमारे लिए create किया है तो इसको नहीं देखना अभी देखना है सिर्फ अपने इतने HTML वाले part को तो इसको हमने file के अंदर लिखा था और यही same code हमारे लिए view page source से खुल गया तो इसमें हम कुछ changes चाहें तो यहाँ पर तो नहीं कर सकते लेकिन हम क्या कर सकते हैं इस page को कर सकते हैं inspect करने के बाद इसका रेशो जो है चेंज कर लेते हैं यह पूरा पार्ट हमारे लिए खुल गया है अब इस कोड के अंदर हम चाहें तो एडिशनल चीजें आड़ कर सकते हैं जैसे यहां पर ऊपर हम एक और पैरेग्राफ डाल सकते हैं न्यू पैरेग्राफ और इसमें भी हम अगर इसको कर लें से तो यह न्यू पैरेग्राफ यहां पर आ गया तो इस तरीके से हम ब्राउजर पर जाकर एक्ट्रीली अपना करते हैं जो यहां पर चेंज नहीं लेकर आएगा मतलब अक्शन कोड में चेंज नहीं होगा पर हमारे ब्राउजर पर हो जाएगा जैसे गूगल का नाम मान लीजिए हमें आज गूगल का नाम पसंद नहीं आ रहा है गूगल का नाम चेंज करके हम कुछ और करना चाहते हैं और यह वाला जो गूगल है यह तो खुद में एक इमेज है आप यहां पर स्क्रोल करेंगे तो आपको देगा यहां पर इमेज डॉट आईएन एक्स डीपीडी करके कुछ इमेज है पर यहां पर यह जो गूगल सर्च लिखा है इसको अगर आप तो यहाँ पे जाएंगे value के अंदर, Google search की जगे हम लिखने वाले हैं, अपना college search, तो जैसे अपना college search लिखा, तो यहाँ पे Google की जगे, अपना college search आ गया है, तो एक HTML page के अंदर, आप कुछ भी जाकर change कर सकते हैं, और इसमें आप सवाल उठाएंगे, दीदी फिर तो internet चलेगा कैसे, मतलब internet पे कोई भी, website के अंदर सिर्फ HTML नहीं होता और भी सारे components होते हैं और यह जो आपने change किया होगा यह notice किया होगा यह हमने सिर्फ browser पे किया है हम अपने original code में जाएं तो वहाँ पर ऐसा कुछ add नहीं होता वैसे ही Google के अंदर हमने कोई change नहीं कर दिया है बस मेरे अलग से सिर्फ मेरे computer पे वो कैसा दिख रहा है तो इस तरीके की जो चीज़े हैं उनसे आप fun कर सकते हैं मतलब काफी सारा अब next चीज़ की बात करते हैं comments in HTML HTML के अंदर हम comments कैसे लिखने हैं सबसे पहले बात करते हैं comments क्या होते हैं जब भी हमें code के अंदर कुछ ऐसा part लिखना होता है जो हम नहीं चाहते कि हमारे code का part बने जिसे English में हमें कोई line लिखनी है कि this is my first code and I am very nervous while writing it ऐसा सा हमें कुछ लिखना है कि ये जो है हम एक body tag define कर रहे हैं तो this is a body tag इस तरीके की चीज हम अगर लिखेंगे तो ये जो है ये इसको save करने के बाद हम अपने page पर जाते हैं तो यह दिस एज़ बॉडी टाग हमारे लिए हमारी स्क्रीन पर आ गया है पर हम नहीं चाहते थे कि हमारी स्क्रीन पर हम चाहते थे बस हमारे कोड में अगर कोई और बंदा हमारा कोड पढ़ रहा है मेरा कोई दोस्त पढ़ रहा है या कोई तो कोड में नहीं आता, यह normal हिंदी में हम इसको लाते हैं, और इसको लिखने का format रहता है, कि आप लिखेंगे, एक angular bracket, उसके बाद हमारा exclamation mark, and hyphen hyphen, और बाद में लिखेंगे hyphen hyphen, and closing angular bracket, तो इसके अंदर आप जो भी part लिख देंगे, यह सारा जो green से आ रहा है, यह सारा का सारा एक comment है, यहनी यह वाला part, अब अगर हम इसको save कर दे, तो अब हमारी website के उपर, अब हमारे web page के उपर, तो इस तरीके का कुछ format रहता है, हमारे comments को हमारे code में लिखने का, जैसे उपर अगर हम लिखना चाहें, this is my first HTML code, इसको कर लेते हैं save, और इसको हमने refresh किया, तो वो line हमारे लिए display नहीं हुई, क्योंकि वो browser के लिए नहीं थी, वो lines सिर्फ उन developers के लिए हैं, जो हमारा code पढ़ रहे हैं, या in fact हमारे लिए हैं, कभी-कभी projects के अंदर, या companies के अंदर जाकर, आप बहुत सारा code लिख लेते हैं, उस code में चीज़े confusing हो जाते हैं, कि यह वाला part किसले था, यह वाला element कहाँ पर है, same code पर आप काम करें, तो confusion से बचने के लिए, तो comments हमारे code का वो part होते हैं, parse या नहीं हमारा browser उसको render नहीं करता, नेक्स्ट बात करेंगे कि HTML is not case sensitive, यानि कुछ-कुछ programming languages होती हैं, जैसे आप C का example ले लें, C++ का ले लें, Python का ले लें, Java का ले लें, ये सारी programming languages हैं, ये case sensitive है, इसके अंदर capital A और small a अलग-अलग माना जाता है, पर HTML के अंदर capital A और small a same होता है, जैसे अगर हमने ये tag लिखा ह पाराग्राफ लिखना चाहें और हम इसको लिख दें capital P तो यह भी एक वालिट टाग है और small p वाला टाग और capital P वाला टाग दोनों की value जो है बिलकुल same मानी जाएगी तो अपने tags को अगर हम capital में लिखते हैं तो कोई difference नहीं आता हमारे code पर क्योंकि HTML is not case sensitive अब हमने क्या कर लिया है बहुत सारा HTML के साथ basic basic चीज़ें सीख लिये हैं एक tag क्या होता है उसको समझ लिया है basic paragraph tag कैसे लिखते हैं उसको समझ लिया है अपने code को HTML code को actually run करके कैसे देखना है, browser के उपर, किसी और का code या अपना ही code, analyze कैसे करना है, browser के उपर ही, edit कैसे कर सकते हैं, अपने inspect को खोल कर, हमने यह सीख लिया है, page source है, हमने पूरा का पूरा HTML code दिखे जाता है, किसी भी website को, जिसको जाकर हम अपने लिए personalized भी कर सकते हैं, तो बहु बेसिक से अपने project की शुरुआत करनी है, यह project होने वाला है, एक portfolio project, इसके अंदर हम क्या करेंगे, सबसे पहले अपनी एक index.html वाली file हम create करेंगे, सबसे पहले तो आपको एक folder बनाना है, folder का नाम हम देंगे portfolio, portfolio के अंदर सबसे पहले index.html नाम की एक basic file हमें create करनी है, उसके कुछ एक्स्ट्रा चीजें नहीं करनी, इतना पार्ट हमें कर लेना है अपने प्रोजेक्ट वन के लिए, I hope कि आप यहाँ पर वीडियो को पॉस करेंगे, और यह वाला पार्ट खुद से करके देखेंगे कोई भी इशू आता है, अब सेकिन्ड हम बढ़ते हैं अपने लेवल 2 की तरफ, level 2 के अंदर हम discover करने वाले हैं और जादा detail में tags के बारे में और सबसे पहले जो हम basics of HTML tags में पढ़ेंगे वो है हमारे HTML attributes HTML के अंदर tags के साथ साथ attributes होते हैं attributes यानि कोई property associated होती है जिसे attributes are used to add more information to the tag अब जैसे paragraph tag को हमने देख लिया यह opening tag है यह closing tag है इन्होंने हमें यह तो बता दिया कि हम paragraph लिखने वाले हैं पर मान लीजिए हमें और extra information डाल लिये हैं जैसे इस paragraph में जो हम चीजें लिखने वाले हैं उसका font size क्या होने वाला है भाई हमारे text का color क्या होने वाला है red होने वाले है blue होने कि हम HTML का document लिखने वाले हैं और यह हमारे root element होगा पर इसमें हमने एक attribute डाला lang is equal to en इस attribute का मतलब है language जिसमें हम यह code लिखने वाले हैं वो है en यानि English अब यहाँ पर यह जो part है इसको हम कहते हैं attribute तो यह पूरा का पूरा हमारा HTML tag है और इसके अंदर हमने यह attribute लिखा है attribute का नाम क्या attribute है lang attribute यानि language attribute तो language जिसका हम इस्तेमाल कर रहे हैं वो है English, इसी तरीके से और भी बहुत सारे attributes हम different different tags के साथ use कर सकते हैं, अब यह जो attribute है, इसमें left side में attribute का नाम होता है, और right side में हम उसकी value लिखते हैं, जिसे language हमारे पास Spanish भी हो सकती थी, Hindi भी हो सकती थी, पर यहाँ पर English है, और यह जो attribute की value है, इसको हम single quotes में भी लिख सकते हैं, वो भी completely valid है, और double quotes में भी लिख सकते हैं, वो भी completely valid है, but क्योंकि by default double quotes में लिखी जाती हैं, string काफी सारी languages के अंदर, तो हम अपने tutorial में double quotes को follow कर रहे होंगे, बाकि आपका मन है single quotes में लिखने का, वो जादा comfortable लगता है, python जैसे background से आप आ रहे हैं, तो please feel free to do that, next एक बहुत important tag की बात करेंगे, यह हमारा heading tag, HTML के अंदर, अब HTML is used to display headings in HTML, अब heading tag is used to display headings in HTML अब हमारे पास 6 heading tags होते हैं h1, h2, h3, h4, h5 and h6 ये सारे के सारे tags ना size में अलगल होते हैं h1 का size जो है बड़ा होता है फिर उससे चोटा h2 होता है, उससे चोटा h3 होता है और ये importance दिखाता है इनका size जिसका size सबसे बड़ा होता है वो सबसे ज़ादा important headings के लिए use होना चाहिए जैसे h1 को हम सबसे ज़ादा important चीज़ें लिखने के लिए use करेंगे h6 को हम सबसे कम important चीज़ें लिखने के लिए use करेंगे जैसे इसका example एक बार देख लेते हैं अपनी code के अंदर इस paragraph को तो करते हैं तो comment out तो ये मैंने एक click से कैसे comment out किया आपको press करना है control और slash तो control slash एक बार press करते हैं तो जितना भी part selected होता है वो सारा comment out हो जाता है उसके बाद h1 tag को लिखते हैं heading 1 फिर लिखेंगे अपना h2 tag similar way में अपना h3 tag लिखेंगे इसको कर लेंगे save and up देखते हैं एक बार है तो यह हमारा कोड जिसमें हेडिंग वन जो है सबसे बड़ी है उसके बाद हेडिंग टू है उसके बाद हेडिंग थ्री है और इस तरीके से कम-कम इंपोर्टेंस होती जा रही है हेडिंग्स की अब एक गलती जो काफी सारे स्टूडेंस यहां इस्तेमाल कर लेंगे ऐसा हमें नहीं करना चाहिए क्योंकि हम साइज डिफाइन कर सकते हैं हम फॉर्ट साइज importance दिखाने के लिए हमें use करना चाहिए कभी भी size के लिए use नहीं करना चाहिए इसका फरक actually SEO पर पड़ता है जब भी हम websites को बना रहे होते हैं तो उसके अंदर rank जो होती है कौन से web pages google जो उपर दिखाएगा कौन से नीचे दिखाएगा उसमें वो search करता है कि ये जो website है ये जो web page है इसकी main heading क्या है इसका topic क्या है तो अगर हम सिर्फ size के लिए जो main topic नहीं है कि बस बड़ा उसको display कराना है इसलिए बस उपर डाल दिया और वो main topic Google को लगेगा कि आपका main topic यह है, तो वो ranking आपकी affect करा सकता है, तो वो नहीं करना, headings को use करना है, हमेशा importance दिखाने के लिए, जो जादे important है, उसको बड़ी वाली heading दे, जो कम important है, उसको छोटे वाली heading दे, तो font size करके एक property होती है, CSS के अंदर, text का size define करने के लिए, next बात करते हैं, paragraph tag की, अब paragraph tag का काम होता है, to add paragraphs in HTML, जैसे हमने already एक paragraph tag लिखा हुआ था, पी और इसके अंदर सैंपल पारेग्राफ कर लेते हैं सेव एंड एक सैंपल पारेग्राफ हमारे लिए प्रिंट हो गया अब यह जो वेबसाइट अभी टू हंड्रेड परसेंट पर है तो सारा का सारा टेक्स्ट तरीके से जगह भर नहीं लेता हमने थोड़ा जूम फिक्स साइजेस जो हैं यहाँ पर जाकर हम documentation बढ़ सकते हैं MDN वाली उसमें हमें पता चल जाएगा किस हिसाब से ratio रहता है web page के size के, अब एक छोटी सी चीज की बात करेंगे यहाँ पर जैसे paragraph के अंदर, मान लीजिए मैंने कोई बड़ा सा paragraph लिखा, उसमें काफी सारी जो है कि कमांड पैलेट ओपन करेंगे और उसमें टॉगल वर्ड राप करके आएगा अगर नहीं आ रहा है तो फिर आप इसको सर्च भी कर सकते हैं टॉगल वर्ड राप इस पर क्लिक करेंगे तो यह सारी की सारी जो चीजें ना वह इस तरीके से आ जाएंगे तो और इस पेज में हमें सारी चीजें दिख जाएंगे ऐसे साइड करके नहीं देखना पड़ेगा नोटिस करेंगे पूरी जो लाइन नंबर 20 है यह तीन लाइन में स्पिलिट हो गई है और 21 यहां से शुरू हो रही है अ तो इस तरीके से आप toggle word wrap कर सकते हैं, और same line जो है different lines में आपकी divide हो जाएगी, readability बढ़ जाएगी, यहां से file को भी close कर देते हैं, ताकि अच्छे से हम code को देख पाएं, अब next tag जिसकी बात करेंगे, वो है हमारा anchor tag, anchor tag का काम होता है to add links to pages, anchor tag को लिखते हैं a की help से, पहले हम a लिखते हैं, उसके बाद hrfe होता है, hrfe यानि हमारा link, हमने किसी भी website का link दे दिया, अब, लिंक की जगह हमारे पास display क्या होगा और फिर closing tag इसको करके देख लेंगे तो better समझ में आएगा कभी कभी हमारे कुछ web pages होते हैं जिस पर कुछ link होता है यानि दूसरी website की तरफ वो link कर रहा होता है तो उनको हम create करते हैं anchor tag की help से जैसे हम लिखेंगे a href यहाँ पे क्या करें है गूगल इसको कर लेंगे से यह हमारा एंटर टाइप है यह हमने लिंक लिखा है एच आर यह इज इक्वल टू लिंक करके एच आर यह हमारा एट्रीब्यूट है और इस एट्रीब्यूट की वैल्यू में हमने गूगल का लिंक डाल दिया है बाहर हमने तो अगर आपको अपनी website से किसी और website पर जाना है या अपने ही किसी और web page पर जाना है और उसको आप link देना चाहते हैं user को तो आप simply anchor tag का इस्तेमाल कर सकते हैं जैसे यहाँ पर अगर हम देना चाहें तो a href is equal to अपने visual studio code का हम link जो है दे देते हैं download करने के लिए डाउनलोड वीएस कोड इसको कर लेते हैं सेव अब अपने मेन पेज पर जाएंगे तो यहां पर हमारे लिए क्या होगा यह गूगल आया है और यह डाउनलोड वीएस कोड आया है अब यह है तो दोनों अलग-अलग अभी सेम लाइन में दिख इन दोनों के बीच में एक BR tag लगा देते हैं, BR tag का काम होता है एक next line लेकर आ जाना, तो BR tag को हम कुछ इस तरीके से लिखते हैं, जहां भी आप उसको ला देंगे, वहां से वो next line में text को भेज देगा, जैसे यहां इसने क्या किया, Google एक line में था, अब download VS code को next line में भेज दिया using anchor tag अब ये तो हमने देखा कि कैसे दूसरी web pages पर जा सकते हैं हम खुद की website के भी दूसरे web page पर जा सकते हैं जैसे अभी अपने HTML tutorials वाले folder के अंदर एक और file create कर लेते हैं जिसको नाम देते हैं hello.html इस file में भी boilerplate code लिखते हैं क्लिक करेंगे emmet पे तो ये code आ गया है और इस file का काम है to print hello यहाँ पे body के अंदर एक heading 1 दे देते हैं, उसमें लिखते हैं hello, कर लेते हैं save, अब index file के अंदर क्या करेंगे, यहाँ एक br tag लगा देते हैं, एक और anchor tag बनाते हैं, जिसमें href is equal to लिखेंगे हम slash hello.html, go to hello इसको कर लेते हैं save and अब इसको run करते हैं तो यहाँ पे एक अलग option आ गया go to hello जैसे go to hello पर click करेंगे तो हम hello पे बहुँच गए मतलब hello.html हमारा page हमारे लिए खुल जाएगा उपर आप देखेंगे तो हमारा जो URL है वो भी change हो गया वहाँ पे hello.html अब print हो गया है यहाँ से हम back जाकर index.html पर आ सकते हैं सकते हैं तो एक वेबसाइट के अंदर जब हम एक जगह से दूसरी जगह जा रहे होते हैं फिर तीसरी जगह जा रहे होते हैं तो कुछ ऐसे ही जा रहे होते हैं हमारी वेबसाइट जो है लिंक होती है डिफरेंट डिफरेंट पेजेस जो है लिंक होते हैं कि इस बटन को क्लि absolute link यानि किसी दूसरी website का link पर जब हम खुद ही की website का यानि खुदी का हमने दूसरा web page लिया hello.html same website के अंदर और फिर हमने उसका link डाल दिया slash के साथ तो फिर उसको हम कहते है relative link यानि हम अपने relative बात कर रहे हैं हमने slash इसलिए hello और ये index दोनों same folder के अंदर है अगर ये किसी और folder के hello.html tutorials के अंदर हमने एक और folder बनाया इसको हम नाम देते है hello folder, और हमने अपनी HTML, hello.html को hello folder के अंदर डाल दिया, तो इसको कर देते है move, तो अब यहाँ पे यह जो relative link है index.html के अंदर, इसको हमें change करना पड़ेगा, इसको हमें करना पड़ेगा hello folder slash hello.html, अब save करके इसको run करेंगे, तब हमारे लिए खुलेगा hello पर directly अगर यहाँ पर folder का नाम हम हटा दें, तो इस बार हमारे लिए चीज़ें जो हैं, वो काम नहीं कर रही होंगी, क्योंकि जैसे इस पर click किया, तो hello.html same folder के अंदर exist ही नहीं करता, तो एक तरीके से जब भी हम link डाल रहे हैं, relative path या relative link डाल रहे हैं, इसलिए इसको relative link कहते हैं, और दूसरे वाले link को कहते हैं absolute link, अब next tag जिसकी बात करेंगे, वो है हमारा image tag, हमारे pages के उपर कभी-कभी हम काफी सारी सुन्दर images दिखा सकते हैं, जैसे Google ने क्या किया, Google ने अपना जो icon है, अपना जो logo है उसकी image ये Google उपर ही दिखा दिया, Visual Studio Code ने क्या किया, ये Windows का logo उपर दिखा दिया, ये Linux का दिखा दिया, ये Mac का दिखा दिया, ये सारी की सारी images हैं जो यहाँ पर आ गई हैं, तो हम भी अपने web page के उपर सुन्दर सी images जो हैं वो ला सकते हैं, और उनको लाते हैं हम image tag की help से, image tag का काम होता है to add images to your page, तो इसमें हम लिखते हैं angular bracket img for image, फिर लिखते हैं source src, यह source attribute बताता है कि image का link क्या होने वाला है, इसमें भी हम relative URL दे सकते हैं या absolute URL दे सकते हैं, मतलब अगर हमें internet पर पड़ी हुई image display करानी है, हमारी google drive के folder में कोई image है, तो उसका आप link यहाँ पर दे सकते हैं, नहीं तो आप अपने folder के अंदर भी कोई image download करके दे सकते हैं, तो notebook के लिए search करेंगे, images के अंदर जाएंगे, और ये कोई notebook की random photo हमारे पास आई है, अब इस image का address हम copy कर लेते हैं, copy image address, यहाँ पे create करेंगे एक image tag, img src is equal to, कि यह हमने डाल दिया अपनी इमेज का एड्रेस और इसको कर देंगे क्लोस तो इसको कर लेते हैं से यह हमारी इमेज का एड्रेस आ गया है डॉट जेपीजी फॉरमाट में है जेपेग में अब पेज के ऊपर क्या हुआ ऊपर सारा का सारा पंटेंट नीचे हमें इमेज डिस्प्ले करानी थी नोटबुक की तो हम अब ये जो image है, मान लीजिए किसी दिन internet जो है बिलकुल नहीं चल रहा है और इस image को हम load ही नहीं कर पा रहे हैं, यह हमारे लिए गलती से इस image का नाम जो है वो गलत type हो गया, यह amazon.com पर नहीं है, यह flipkart पर है मान लो, कि हमने amazon की जगे गलती से link के अंदर flipkart डाल दिया है, यूजर जब भी आए उसका इंटरनेट थोड़ा सा डाउन हो सारी इमेज लोड नहीं हो पारी है या हमारा सर्वर खराब है थोड़ा सा कुछ इशू आ गया है और हमारी इमेज लोड नहीं हो पारी है या उसको एट लीस्ट इतना हो कि यार इसमें कुछ इंपोर्टेंट नहीं था तो कोई बात नहीं लोड नहीं हो रहा तो तो वहां पर हम यूज करते हैं ऑल्ट टाग का ऑल्ट क्या करता है हमारी इमेज के लिए एक ऑल्टरनेटिव नाम हमें दे द इसको कर लेते हैं save, अब जब image load नहीं होगी तो यहाँ पता चल जाएगा कि वो image एक notebook की image थी, और अगर किसी case में हम यहाँ पर सही image का जो है link डालते हैं, जिसे हम डाल रहे हैं Amazon का ही link, अब जब इसको save करेंगे तो वो notebook print हो जाएगी, तो जिस cases में हमारी image load नहीं हो पाए� अपने desktop पे ऊपर save कर लिया है, अब इस image को हम add करना चाहते हैं अपने folder के अंदर, तो यहाँ पर इस image को उठाते हैं, और इसको अपने HTML tutorials नाम के folder के अंदर हमने add कर लिया है, अब index.html पे जाएंगे, और यहाँ पर source में हम absolute URL, absolute link हटा देंगे, और अब relative URL डालेंगे, यानि तो index.html के अंदर यहाँ पर लिखेंगे image.jpg, इसको कर लेते हैं save, और अब हम जब refresh करेंगे, तो वो same image हमारे लिए print हो रही है, यानि उस image को हम folder के अंदर डाल के भी access कर सकते हैं using relative URL, और internet से भी access कर सकते हैं using absolute URL, एक चीज़ हम notice करेंगे कि हमारा text तो पूरे web page पर, चोटा-चोटा से है पर हमारी इमेज जो है नोटबुक की इमेज वह भी वह इतनी बड़ी सी हमें दिखाई दे रही है तो इस केस में हम इस नोटबुक को ना री साइज कर सकते हैं अपनी इमेज को री साइज कर सकते हैं उसके लिए कौन सा आइट्रिब्यूट तो हमने हंड्रेड एक बार सेट करके देख लेते हैं तो इस तरीके से उसकी हाइट जो है कम हो गई अब इसमें अड्वाइजेबल यह होता है कि एक बार में हमें एक ही आट्रिब्यूट को सेट करें जैसे हाइट को सेट करें तो सिर्फ हाइट को सेट करें विट को सेट करें तो से विट को सेट करें वरना दोनों को एक साथ सेट करते हैं तो हमारा आस्पेक्ट रेशो नोटों का बिगड़ जाता है जैसे अगर हम यहां पर विट को भी सेट कर दें आज मान लीजिए इसको 50 सेट कर दे डाइमेंशन खराब हो गया है तो इस तरीके के डाइमेंशन तब खराब होते हैं जब आप जबरदस्ती हाइट भी सेट करने की कोशिश करते हैं जबरदस्ती विट भी सेट करने की कोशिश करते हैं तो इसलिए बेस्ट केसेस में एडवाइजबल होता है दोनों में से एक ही हम सेट करें और स्पेसिफिकली हाइट और विट जो है ना यह सी चीजें जो सीएसेस के साथ हमेशा CSS की तरफ जाना चाहिए तो इसलिए यहाँ पर हम height width set नहीं कर रहे होंगे उतना ही हम रहने देंगे पर यहाँ पर हमने example देख लिया कि CSS कितना magically चीजों को transform कर देता है मतलब आपको size अगर change करना है या कितना beautify आप करना चाहते हैं अपनी website को अपने web page को वो सारा का सारा काम आपको CSS करके देती है हमारा BR tag BR tag को already next line या line break to your page अब बी आईटाइड को हमने यहां पर इस्तेमाल कर लिया था तो जो अलग-अलग एलेमेंट्स होते हैं उनको नेक्स्ट लाइन नेक्स्ट लाइन में लाने के लिए हमें बीआईटाइड का इस्तेमाल करना होता है अब यह जो बीआईटाइड होता है ना कई पर image के अंदर लिख लिया, पर उस content को हमें कभी-कभी थोड़ा highlight करना बटता है, जैसे Google Docs के अंदर, या फिर Microsoft Word के अंदर, हम क्या करते हैं, text को paragraph के अंदर कुछ part bold में दिखाते हैं, जो important होता है, कुछ co-underline कर लेते हैं, वैसे ही हमारे पास tags होते हैं HTML में, वो सारी formatting करने के लिए, तो it is used to highlight text in your page, bold के लिए हम b tag का इस्तेमाल करते हैं, और नीचे लिख देंगे bold तो इसको कर लेते हैं save और एक बार नीचे जाकर देखते हैं तो ये क्या हुआ हमारा जो text है ये bold होकर आया है यहाँ पर एक line break add कर देते हैं तो ये bold text हमारे लिए आ गया है अब similarly अगर हमें italic करना है तो उसके लिए i tag का use करते हैं यहाँ पर जो भी चीज हम लिखेंगे वो और in fact बाद में भी हमें कुछ खाली lines चाहिए होंगी, तो 4-5 लिखके रखते हैं, तो यह क्या हुआ, bold के लिए bold में print हुआ, italic में print हो गया, और कोई भी text को हम underline कर सकते हैं, अब since हम tags के अंदर भी tag लिख सकते हैं, जैसे अगर हम कोई paragraph लिखना चाहते हैं, मालिजे हमें यह वाला जो paragraph है, कि पहला जो sample paragraph है, वो हमारे लिए underlined होकर आई, और उसके बीच में अपने sample paragraph को, डाल देंगे तो यह paragraph tag था इसके अंदर हमने अपना underline tag डाल दिया और उसके बाद डाल दिया बाकी सारा content इसको save कर लेते हैं और देखते हैं तो यह सारा का सारा paragraph हमारे लिए print हो गया पर उसमें जो शुरुवात वाला sample paragraph है उसमें underline होकर आया है तो एक same paragraph के अंदर आप different different words को कहीं underline कर सकते हैं कहीं italic कर सकते हैं कहीं bold कर सकते हैं next tag जिसकी बात करेंगे वो है big and small tags यह big text या small text के लिए use होते हैं जैसे अगर हम यहाँ पर लिखें big, this tag shows big text, और फिर लिखें small, this tag shows small text, और इसको कर लेते है save and run, तो यह जो है हमारा शुरुवात वाला जो text है big की help से बहुत बड़ा सा text print होगा, मतलब font size इसका बड़ा है, और small वाला size में small print होगा, तो बड़े text के लिए big, tag use कर सकते हैं, छोटे text के लिए small tag use कर सकते हैं, next हमारा आता है HR tag, HR होता है horizontal ruler, अब यह काम का क्या करता है, horizontal ruler का काम करता है, मतलब it is used to separate content, जब भी हमें content को horizontally separate करना होता है, उसके बीच में space लानी होते हैं, तो हम horizontal tag का use करते हैं, जैसे यहाँ पर big text और small text के बीच में डाल देंगे HR को, HR को हमने डाला, इसको कर लिया save, तो ये this tag shows big text उपर आ गया, और this tag shows small text नीचे आ गया, और बीच में एक space आ गया, और space के साथ आई एक line, तो horizontal ruler, ruler क्या होता है, scale होता है, English के अंदर ruler का मतलब scale होता है, जो जब भी आपको text के बीच में, different different sections के बीच में एक line चाहिए, जो divide कर हमने एक HR जो है यहां पे डाल दिया है, एक HR को हम यहां पे डाल देते हैं, एक को डाल देते हैं इस image के बाद, and एक को डाल देते हैं इन links के बाद, HR, इसको कर लेते हैं save, तो हमारा जो पूरा web page है, वो अलग अलग parts में divide हो गया है, उपर सारा हमारा heading से related और anchor से related content है, फिर हमारे bold, italic, underline आ गये, फिर हमारा paragraph आ गया, फिर big text आ गया, फिर small text आ गया, तो जब page में different content है, उसको अलग-लग sections में divide करना है, तो use करना है HR tag का, next बात करते हैं, subscript और superscript tag की, कभी-कभी हमारी webpage पर हो सकता है, कि हम chemistry से related कोई resources का page बना रहे हैं, हमें CO2 लिखना है, हमें O3 लिखना है, तो इस तरीके में हमें ये जो 3 है, ये जो 2 है, ये जो 6 है, इनको हम कहते हैं सबस्क्रिप्ट, सबस्क्रिप्ट यानि वो वाला पार्ट, वो वाला टेक्स्ट, जो नॉर्मल टेक्स्ट के हलका सा नीचे आता है, उसको लिखने के लिए हम यूज़ करते हैं सब, अपने सब टाग का, पहले एक line दे देते हैं, फिर लिखते हैं, पहले paragraph के अंदर normal लिखेंगे अपना h, उसके बाद लिखेंगे sub, मैं लिखेंगे 2 और फिर normally लिखेंगे O, इसको save करके अगर दिखाएं तो एक उच्छ��� दिखेगा, H, फिर यह जो 2 है यह subscript बन गया है और O हमारा normal size का है, तो इस तरीके से हम chemical formula दिखा सकते हैं, अब जहां subscript आता है वहाँ superscript भी आता है, superscript यानि यह text जो था वो नीचे लिखा था, पर मान लीज़े आपको math के कोई formula लिखने हैं, जैसे A to the power N plus B, तो इसमें जो to the power N है, यह सूपर स्क्रिप्ट है यानि छोटा सा टेक्स्ट है और नॉर्मल टेक्स्ट के ऊपर आता है या थ्री का जब स्क्वेयर निकालते हैं तो उसकी वैल्यू नाइन होनी चाहिए तो इसमें जो टू है यह हमारा सूपर स्क्रिप्ट है इसको लिखने के लिए हम सूपर टाग 2 जाएगा हमारे super script में, इसको save कर लेते हैं, तो यह 3 का square is equal to 9, इस तरीके का mathematical formula भी हमारे लिए print हो गया, next बात करते हैं pre tag की, pre tag क्या करता है, it is used to display text as it is without ignoring spaces and next line, आप notice करेंगे अगर किसी भी paragraph के अंदर, अब यहाँ पर हो सकता है, हम एक normal सा कोई paragraph बनाएं, जैसे हमने एक paragraph यह आप लो आरम लिखेंगे तो एमेट एक और आ जाएगा जिससे आप कोई भी साम्पल टेक्स जो है वो डिस्प्ले करा सकते हैं अब यहां पर जो साम्पल टेक्स तरह यह सारा का सारा डिफरेंट डिफरेंट लाइन्स में है पर जब हम इसको सेव करके देखेंगे तो यह चाहे आप हजार spaces दे दे, मतलब इतनी सारी हमने space दे के इसको save किया, तो आप notice करेंगे save करने के बाद जब format हो रहे है, auto format, तो वो space हट जा रही है, and in fact आप auto format नहीं भी करेंगे, और फिर भी आप अपनी website पे जाएंगे, तो वो spaces को count ही नहीं करेगा, ऐसे cases में अगर हमारी अब यह जो space है यह automatically format से हट नहीं जाएगी, अब आप display कराएंगे तो यहाँ पर यह space automatically आपके लिए आएगी, तो जब भी आपको खुद की लिखी हुई spaces चाहिए, खुद की लिखी हुई next line चाहिए, तो हम यहाँ पर use करते हैं pre tag का, अब यहाँ तक बात करते करते सारे हमा अब हम बढ़ते हैं अपने project के second part की तरफ जहां हम अपने projects में और ज़्यादा improvements करेंगे, अपने portfolio में improvements करेंगे, तो यहाँ पे मैंने कुछ task डाला है, इस task को आप complete कर सकते हैं, साथ के साथ अपनी भी imagination लगा सकते हैं कि क्या-क्या चीजे हम additionally add कर सकते हैं, जिससे सबसे पहल और इन सारे pages का जो link है वो हमारे home page पर होना चाहिए, तो ये functionality अपने portfolio में हम extra add करने वाले, कि home page से आप किसी भी button पर click करके अपनी education भी देख पाए, आपका experience भी देख पाए, कोई भी आकर और आपके projects भी देख पाए, हो सकता है आप कोई और relevant information जो है दिखाना चाह रहे हो जैसे आपने कोई achievements जो है ली है या आपकी hobbies आप बताना चाहें तो उसके लिए भी आप additional pages बना सकते हैं, तो I hope कि यह चीज आप कर रहे होंगे anchor tag का इस्तेमाल करना है, उन pages के अंदर information भी डाल लिये हैं, तो headings का use करना ह तो आप यहां पर वीडियो को पॉज करेंगे प्रोजेक्ट का सेकंड पार्ट कंप्लीट करेंगे ताकि मेमोरी के अंदर जो भी टैग्स हमने इंपोर्टेंट डिस्कॉस किए हैं अभी वह सारे के सारे बैठ जाए जब भी डाउट आए अपने आप नोट्स कभी अब कभी-कभी ऐसा होता है कि हमें ऐसे tags यूज़ करने पड़ते हैं जिसका effect हमें अपने web page के ऊपर तो दिखाई नहीं देता, पर internally हमारा web page कैसे काम कर रहा है, मतलब SEO, rankings में हमारा web page ऊपर जा रहा है या नीचे जा रहा है, उस पर वो चीज़ें काफी heavy impact डाल सकती हैं.

tags, semantic tags वो होते हैं जिनको देखके ही उनका मतलब समझ में आ जाए, जैसे HTML एक टाग होता है हेडर मतलब हमारे पेज का एक हेडर होता है उसको हेडर बनाते हैं या फिर जो पेज का फुटर होता है वो अतलब फुटर के अंदर ही सारी फुटर वाली चीजें लिखी जा रही होती है तो इनके नाम से ही पता चलता है कि इन टाग के अंदर अक्शली होन अब यहाँ div या span से हमें clear नहीं हो रहा कि div या span के अंदर हमें actually पढ़ने के आवाले हैं, तो यह आ जाते है non-semantic के category में, semantic के अंदर header, footer हमें पता है कि कोई website का header होगा, तो उसकी उपर जो details होती हैं, web page पे home लिखने वाले, footer में नीचे वाली चीज़ें, तो इस तरीके से चटचट तरीके से हम अपना पूरी की पूरी HTML की फाइल के अंदर जितनी भी हमें लाइने लिखनी है वह लिख पाते हैं दूसरा यह होता है किसी भी वेब पेज को अगर हमने बेसिक प्यूर विनिला एसटीएमल से बनाया है तो उस वह रैंकिंग और तीसरा यह होता है कि गुड यूजर एक्सपीरियंस होता है यूजर एक्सपीरियंस किस तरीके से होता है कभी-कभी ना कुछ विजुअल या उसके साथ साथ जब आप सही layout का इस्तेमाल करते हैं तो user experience भी बढ़ जाता है इसलिए हमें use करना चाहिए right tags को right चीज़ों के लिए सही tags को सही काम के लिए use करना चाहिए ऐसा नहीं है कि हम कोई paragraph tag या कोई heading tag बना दें और उसके अंदर हम अपनी heading डाल रहे हैं और उसको हम कह रहे हैं ये हमारी website का header है या h6 का हमने बना दिया है paragraph का कुछ बना दिया और बोल दिया ये हमारी website का footer है ऐसा नहीं करना हमें header main footer इन तीन टैग्स का इस्तेमाल करना यह तीनों सेमिंटिक टैग्स है और इन तीनों को अभी हम डिटेल में डिस्क्रेस करेंगे तो सबसे पहले डिस्क्रेस करते हैं अपने हेडर टैग को तो किसी भी वेबसाइट के हेडर को बनाने के लिए हमारे पास अगर कि आप नॉर्मल हमारा एसटीएमल पेज तो बॉडी के अंदर क्या करेंगे हेड के बाद स्पेस दे देते हैं बॉडी के जैसे portfolio का आपने page बनाया होगा, तो header के उपर आपने options दिये होंगे, कि आप यहाँ पे या तो experiences रखना चाहे हैं, या फिर रखना चाहे हैं अपने projects को, या इसे हम education कर देते हैं, अब इसको save कर लेते हैं, एक बार run कर लेते हैं, live server को, तो यह education आ गया, यह projects आ गये, अब आ� element को inspect करेंगे, देखेंगे कि ये education वाला हमारा part है, ये projects वाला part है, और ये दोनों को दोनों combined होके, हमारे header के अंदर आ रहे हैं, मतलब इसको expand कर सकते हैं, हमारे header के अंदर ये दोनों चीज़ें आ रहे हैं, तो inspect करते हैं, as a user की website build कैसे हुई है, लेकिन जब Google आपके code को तो वो उसको clearly दिखता है, अब हम चाहते हैं ये दोनों जो चीजें हैं वो same line पे आ जाएं तो क्या करते हैं अब इसको paragraph की form में लिख देते हैं, इसको paragraph tag बना देते हैं, p and p और इनको डाल देते हैं pre के अंदर ताकि हम जो है थोड़ी सी यहाँ पे space दे पाएं, हम कुछ नहीं कर रहे हैं हम यहाँ पे और हमारा page अब कुछ ऐसा दिखेगा जिसमें उपर header है वहाँ education भी है वहाँ projects भी है तो आप इसमें भी click करके जा सकते हैं इसमें भी click करके जा सकते हैं individual pages के अंदर next हम बना सकते हैं यहाँ पे अपना एक footer तो website का बीच वाला जो part है वो तो main के अंदर आता है मतलब main content जो भी होने वाला है और यहाँ पे footer के अंदर हम additional जो अपनी information देते हैं usually footer के अंदर दिया जाता है h3 का इस्तेमाल कर लेते हैं contact me at hello at the rate एसी डॉट कॉम इसको कर लेते हैं सेफ तो अब यह जो है हमारा हेडर पार्ट है यह हमारा फूटर पार्ट इसको थोड़ा सा और छोटा कर लेते हैं एच फाइव पर हम आ जाते हैं तो यह हेडर है यह फूटर है और बीच में जो चीजें मेन की बात करें तो मेन टाइप के अंदर हम तीन मेजर टाइप्स को डिस्कुस करेंगे जिसमें सबसे पहला है हमारा सेक्शन टाइप Section Tag क्या करता है? It is used for a section on your page. यानि हमारे page को अगर हमें sections में divide करना है, कि यहाँ पर हम अपने experiences लिखने वाले हैं, यहाँ पर हम अपनी education लिखने वाले हैं, यहाँ पर हम अपना project लिखने वाले हैं. तो उस sections को बनाने के लिए हम section tag का इस्तमाल करते हैं. जैसे उपर header के अंदर हम यहां लिख देते हैं myportfolio, यह तो बन जाएगा हमारी major heading.

आपको अब्बियसली अपना जो पोर्टफोलियो है वो इससे बेटर बनाना है जो इससा हम बना रहे हैं, यहां सिर्फ एग्जाम्पल के लिए मैं काफी सारे आपको टाग्स दिखा रही हूँ किसके तरीके से इस्तमाल करना है, सेम पेज के उपर, मेरी तरह आपको इंफर् इस पूर्व का नाम हमने लिख दिया इस तरीके से बेसिक चीज लिख सकते हैं तो यह हमारा पहला सेक्शन हो गया उसके से इसका सेक्शन लिखने जाएं एक्सपीरियंस के सेक्शन में हम कुछ चीज लिख सकते हैं एक्सपीरिय यहां पर हम चीजें लिख सकते हैं कुछ-कुछ चीजें हमने लिख दी हैं तो यह हमने एक और सेक्शन मना लिया तो यह पहला सेक्शन हो गया हमारा और यह हो गया हमारा दूसरा सेक्शन अब जब इसको हम पेज के ऊपर देखेंगे तो हमें तो नॉर्मल तो हम इस पेज को करेंगे इंस्पेक्ट इंस्पेक्ट करके में पता चलेगा कि यह जो पूरा का पूरी चीज है एक सिंगल सेक्शन यह एक single section है यह एक single section है तो इस तरीके से अपने code को divide करना ज़रूरी है ताकि semantically पता चल रहा हूँ कि इस page के अंदर कौन सा part किस चीज को represent करता है next tag जिसकी हम बात करेंगे वो है article अब page के उपर हम काफी सारे articles जो हैं उनको लिख सकते हैं जैसे अगर हमें कुछ लिखना है अपने बारे में मान लीजे main के अंदर हम कुछ लिखना चाहें article की form में my experiences या my story अगर हम बताना चाहें तो my story करके अपने portfolio के उपर बता सकते हैं जिसमें हम कहां से belong करते हैं या tech में हमारा interest क्यों है क्यों हम coding सीख रहे हैं क्या हमारे goals हैं क्या हम change करना चाहते हैं क्या हम जो revolution है वो लाना चाहते हैं जिस भी field में हमारा interest है उस interest की तरफ तो वो सारी का काम होता है, aside tag का काम होता है for content aside main content, अब हमारी कई-कई website होते हैं, जिनके उपर ads दिख रही होती हैं, जिनके उपर additional information दिख रही होती है, जो actually हमारे काम की नहीं है, मतलब हमारे content के काम की नहीं है, पर हमें दिखानी पड़ रही है, जैसे कई लोग websites बनाते हैं, उस पर google ads चला रहे होते हैं, अब जैसे ad, तरीके का content होता है ये सारा हमारे main content का part नहीं है जैसे आपने कोई website देखी उसके अंदर कुछ-कुछ ads हमारे पास चल रही होंगी पर main content उसके अंदर कुछ और ही चल रहा है तो आप नहीं चाहते कि Google आपकी website को इस तरीके से read करें कि उसके अंदर ये ads वाला content है आप चाहते हैं Google सिर्फ आपके main content को जो है वो read कर रहा हो तो इस तरीके से आपको बताना पड़ता है HTML के अंदर कि कौन सा part आपके main content का part नहीं है उसके लिए हम use करते हैं अपना aside tag तो अगर हमें कोई आड चलानी है, मान लीजिए हमें मेंड सेक्शन में एंड में कोई आड चलानी है, तो हम लिखेंगे aside, और इसके अंदर हम डाल देंगे this is an ad, तो यह जो this is an ad वाला पार्ट है, यह हमारा aside टाग के अंदर आ गया, इसको हमारे SEO जो है वो detect नहीं करेगा, अब anchor tag में हमने बात की थी कि हम a लिखते हैं उसके बाद अपना link लिखते हैं वो relative हो सकता है absolute हो सकता है तो हम किसी भी link की तरफ redirect कर सकते हैं अपने user को पर anchor tag के अंदर एक और attribute होता है जिसको नाम देते हैं हम target target लिखने के बाद अगर आप slash main डालने उसकी value में तो क्या होता है अभी तक तो हम link पर click करते थे तो same page खुलता था अब new tab में for example अगर हम यहां हमने एक anchor tag बनाया है href is equal to यहाँ पे हम ले लेते हैं google.com का example अब अगर हम इसको normally save करें और google पर click करें तो हमारे लिए same page के अंदर same tab के अंदर हमारा google.com खुल जाएगा लेकिन अगर हम यहाँ पर लिख दें एक और attribute target is equal to main इसको save करके अगर अब run करें तो Google पर क्लिक करेंगे तो next टाब के अंदर Google.com खुल रहा है और ये वाला टाब हमारा intact है तो जब भी link को next टाब में खुलवाना हो तो उसके लिए हम use करते हैं target main का इसके अलावा हम अपनी pictures को clickable बना सकते हैं कैसे clickable बनाना है हम जो भी अपना text इस्तमाल करते हैं जिसके उ डाउनलोड कर लेते हैं, images में जाकर, या in fact इसका हम क्या करेंगे, बस link copy कर लेंगे, यहां Google की जगह हम डाल देंगे, एक image tag img src is equal to, और इसकी जगह लिख देंगे, alt is equal to Google, को कर लेते हैं सेव एंड अब अगर हम अपने मेन पेज पर जाएं तो यहां पर ध्यान से देखें तो एक गूगल की बड़ी सी फोटो आ गई है इसको अगर टेंपरेली हमें एडजस्ट करना हो तो इसकी हाइट भी हम दे देते हैं हाइट इस इक्वल टू 500 और थोड़ा सा तो यह जो image है अब अगर इसको click करें तो हमारे लिए google.com खुल जाएगा क्योंकि यह image clickable आ गई है जैसे यहां click किया तो google.com खुल रहा है सीधा image पर जाने के लिए तो इस तरीके से चाहे हम अपने text को clickable बनाना चाहे चाहे image को clickable बनाना चाहे हम इस्तेमाल कर सकते हैं अपन है तो यहां पर हमारी जो इमेश थी उसमें हमने हाइट को सेट कर दिया सिमिलर तरीके से हम अपनी विड्ड को भी सेट कर सकते थे विड्ड को सेट करते तो कुछ इस तरीके की हमारी इमेज होती बिना सेट कि अगर इसको हम फिफटी कर दें तो यह और छोटी हो जाएगी विड्ड वाइस एंड विड्ड को सेट करेंगे तो हाइट अपने आप उसी अगर सिर्फ height को set करने हैं तो width भी अपने आप change हो जाएगी aspect ratio को maintain करने के लिए next बात करने वाले हम अपने div tag की अब दो tags major tags की हम यहाँ पर बात करेंगे section में div और span यह दोनों जो है HTML के काफ़े important tags हैं जो इनका बहुत बार use होता है div की अगर बात करें तो div एक container है for other HTML elements यानि div का अपना कोई special काम नहीं है जैसे p paragraph tag का काम होता था कि इसके अंदर paragraphs लिखे जाते हैं हेडर टाग का काम होता था, इसके अंदर हमारी वेब पेज का हेडर आता है, फूटर का काम होता था, वेब पेज का फूटर आता है, डिव का अपना कोई specific काम नह��ं है, इसलिए इस टाग को non-semantic भी कहते हैं, डिव का major काम होता है, दूसरे tags को खुद के अंदर contain करना, जैसे, अगर हम अपनी web page पर मान लीजिए, main के अंदर क्या करते हैं, एक div tag बनाते हैं, यहाँ पे हमने बनाया div, तो इसका कुछ काम नहीं है मतलब यह कुछ change लेकर नहीं आएगा यह बस एक div की तरह खड़ा रहेगा वहाँ पे अब यह एक block element होता है तो अब अगर हम इसको inspect करें अपने page को तो यहाँ पर code के अंदर जाकर हमें दिख रहा है left side में कि div है पर actually div की height by default 0 set हुई है यह यहाँ पर 1037 into यहाँ पर div के उपर जाएं अगर तो 1037 into 0 दिखा रहा है तो यहाँ पर 0 जो है वो हमारे div की height है, by default div की height 0 set होती है, जब उसके अंदर कोई element नहीं होता, लेकिन अगर उसके अंदर हम डाल दें, एक paragraph डाल देते हैं, hello world लिखकर, तो hello world लिखकर ये paragraph जैसे ही हमने div के अंदर डाला, तो अगर अगर div पर scroll करें, तो ये आ गया है div, यहाँ पर, अब div जो होता है, वो एक block element होता है, यानि वो हमारी screen पर, फुल विट लेते हैं, ब्लॉक एलिमेंट्स वो होते हैं, जो चाहे उनको जगे कितनी भी चाहिए हो, पर वो पूरी भी पूरी विट, यानि पूरी स्क्रीन घेर कर खर रहे हो जाते हैं, जैसे यहाँ पर पैरिग्राफ के अंदर मुझे सिर्फ हेलो वर्ल्ड लिखना था, और यहां जाएंगे इस एलेमेंट पर तो दिख रहा है कि यह येलो लाइन जो है यह पूरी विट्थ पर है तो इसने पूरी विट्थ को ले गया जो भी ब्लॉक एलेमेंट्स होते हैं HTML के अंदर वो पूरी विट्थ को ले लेते हैं और दूसरे टाइप के एलेमेंट्स होत पर डिव का इस्तेमाल काफी जगे हो सकता है, जैसे मान लीजिए आपने एक लिखा hello word, उसके अंदर आपने एक और paragraph के अंदर मान लीजिए लिख दिया, नमस्ते, एक और paragraph के अंदर आपने लिख दिया, hi, अब same चीज़ आप क्या कर सकते हैं, ये वाला जो हमारा डिव है, है तो इसके अंदर लिखेंगे अपने गुडबाई यहां पर लिखेंगे गुडबाई एक में लिख देते हैं शाव इसको कर देते हैं से तो हमने एक डिव बनाया मतलब यह डिव को हम डब्बी की तरह में आजन कर सकते हैं एक डब्बा जिसके अंदर पर यहाँ पर अगर हम इसको inspect करें तो हम देख पाएंगे कि ये जो तीनो elements हैं एक बार के लिए अपने बाकी elements को हटा देते हैं तो ये तीनो elements same div के अंदर आ रहे हैं और ये तीनो जो elements हैं वो हमारे same div के अंदर आ रहे हैं अब effect देखने के लिए हम क्या करेंगे इन div का कर देंगे color change जैसे अपने main के अंदर जाएंगे div के अंदर जाएंगे और यहाँ पर add कर देंगे color as red यहाँ पर इस div के style में जाएंगे और यहाँ add कर देंगे background color इस एक्वल टू रेड तो यह क्या हुआ इसने सिर्फ एक जो हमारा डिव था उसको बैकग्राउंड कलर रेड दे दिया है जिसके अंदर हमारी सारी की सारी ग्रीटिंग्स जो है वह लिखी हुई थी और जो सेकंड था उसको हम दे देते हैं बैकग्राउंड कलर एस इसको हम दे देते हैं बैकग्राउंड कलर अपना ब कि यह वाला जो डिव है वह रेड से डब्बी है यह वाला डिव हमारा ब्लू से डब्बी है पर फांट अभी दिखाई नहीं दे रहा क्योंकि फांट हमने अक्शन चेंज कर दिया था टू रेड इसको वापस से ब्लैक कर देते हैं यह सिर्फ understanding के लिए मैंने color change करके दिखाएं, इस पूरे div को हमने red कर दिया, इस पूरे div को एक साथ हमने blue कर दिया, तो div का असली फायदा तब होता है, जब हमें काफी सारे collective elements के साथ एक साथ changes करने पड़ते हैं, तो उस time पर आप div के अंदर इखटा करिये elements को, तो आप डब्ब block elements हैं, मतलब वो elements जो पूरी की पूरी width को घेर लेते हैं, जैसे हमारा जो footer होता है, वो पूरी width को घेर लेगा, अगर हम analyze भी करें इसमें, inspect कर लेते हैं एक बार, जैसे inspect करके हम देखे, फूटर के अंदर पूरा का पूरा जो area है, वो highlight हो रहा है, in fact, header भी जो है, अब बात करते हैं span tag की, span tag is also a container like div but it is used for other HTML elements, वो HTML elements जिसके अंदर हम उतनी जगे लेना चाते हैं जितनी की हमें जरूरत है उसमें हम use करते हैं span का, जैसे इस same greeting को अगर मैं span की help से print करवा हूँ, span and span, तो अब analyze करूँ, by default मेरा जो paragraph है, वहां से अगर हटा कर मुझे print करना है सिर्फ buy को कर लिया save अब अगर इसको analyze करें तो यह जो buy है इसमें आप देखेंगे blue part जो highlight हो रहे है वो सिर्फ buy वाला part है यानि इसमें उतनी ही जगे घेरी जा रही है जितनी जगे ज़रूरी है उस element को spacing के लिए तो span जो element होता है वो हमारा inline element होता है मतलब it takes its width as per size जितना size है उतनी ही जगे वो घेरेगा इसके अंदर भी अगर हम span का color अब change करना चाहें तो main के अंदर जाएंगे span यहां से कर लेंगे background color is equal to pink तो यहाँ पर pink color में highlighted हमें दिख जाएगा कि यह हमारा एक span element है, अब span एक inline element होता है और यहाँ पर बहुत सारे यह inline elements की हमने आपको list दे दी है, इसमें से देखें तो हमारा जो anchor tag होता है, वो भी एक inline element होता है, जो हमारा br tag होता है, वो भी एक inline element होता है, हमारा image एक inline element ह bold में लिखते हैं या हमारे जो सबस्क्रिप्ट, सूपर स्क्रिप्ट होते हैं ये सारे हमारे inline tags होते हैं तो ये tags उतनी जगें गेरते हैं जितनी इनको जरूरत हैं तो ये सारे हमने काफी सारे जो tags हैं उनको revisit किया layout कैसे properly बनाना है उस तरीके से अपनी website को हमें अच्छे से design करना है अब इसमें project 1 के अंदर एक और task सबसे पहले तो home page पर अपनी एक image लगानी है अपनी एक image लगानी है उस पर हो सकता है आप इस image को clickable बनाने, clickable किस तरीके से, उस link पर click करते ही या तो आपकी Instagram profile खुल जाती है या फिर आपकी Facebook profile खुल जाती है, उस तरीके से design कर सकते हैं, या आपकी GitHub या LinkedIn profile खुल जाती है, इनके links आपको add करने portfolio में, साथ के साथ improve your project layout, य यहां तक हमने ख़दम कर लिया अपना level 3 और next हम बात करेंगे शुरुवात करेंगे अपने level 4 की जो है also level pro अब हम आगे हैं अपने final level यानि अपने pro level पर और इस chapter के अंदर इस level के अंदर हम पढ़ने वाले हैं about list, about forms and about tables अब कभी-कभी ऐसी situation आती है जब हमें कोई list of चीजें अपने page पर display करनी पड़ती है जैसे अगर हमने कोई portfolio के अंदर education का page बनाया है तो उसमें हमें हमने 10th के marks, 12th के marks, college के marks, अगर masters के हैं, तो वो सारी information हम चाहते हैं, अगर list की form में display कराना, या फिर अगर हमने 3-4 projects बनाएं, तो उनको हम list की form में display कराना चाहते हैं, तो HTML के अंदर list की form में चीज़ें display कराने के लिए भी हमारे पास कुछ tags होते हैं, तो list जो होती हैं सबसे पहले, वो unordered और ordered, दो type की list HTML के अंदर होती है, unordered list का मतलब है कि सिर्फ bullet points की form में हमारा जो data है, print होकर आ रहा होगा और ordered यानि जिसे हमने 1, 2, 3, 4 कोई order दे दिया, कोई sequence दे दिया जिसकी form में वो display हो रहे हैं, इसमें हमारे Roman numerals भी हो सकते हैं, 1, 2, 3 and 4 या फिर हमारे पास A, B, C, D हम इस तरीके से भी display करा सकते हैं, तो यह होती है हमारी ordered list और यह है हमारी unordered list, अब सबसे जिसमें हम लिखते हैं UL, UL stands for Unordered List, अब Unordered List को बनाने के लिए हमने Tag इस्तमाल कर लिया, उसके अंदर List का हर एक item को हम display कराते हैं, LI की help से, यहाँ पर LI stands करता है for List Item, तो इस तरीके से एक list बनाते हैं, अपनी main के अंदर हम content लिख रहे होंगे, यहाँ पर बनाएंगे, UL से दूसरा आइटम मान लीजिए हमारे पास है मैंगो तीसरा आइटम हमारे पास आ गया है लीची तो इसको कर लेते हैं सेव तो जब भी हम लिस्ट बनाएंगे वो हमारे पास कुछ ऐसी बन कर आएगी जिसमें बुलिट पॉइंट्स की हेल्प से हमारे पास आइटम्स जो हैं अगर हम चाहते हैं कि हम disk shape के उनको बनाना चाहते हैं तो वो change करने के लिए हम अपने CSS के अंदर चाहें तो इन bullets को हम square shape में कर सकते हैं या फिर इनको हम triangle shape में कर सकते हैं, disk shape में कर सकते हैं, तो यहाँ UL के अंदर जाके आप MDN references के अंदर जाएंगे तो वहाँ पे जाके सारी यूजिंग अनदर अनॉर्डर ल���स्ट जिसके अंदर सबसे पहला आइटम हम लिखेंगे कि कलर जो है आपल का कलर है रेड और सीजन में हम लिख सकते हैं विंटर्स सेम चीज हम कर सकते हैं मैंगो के लिए तो मैंगो के लिए कलर में हम लिख देंगे येलो आंड सीजन में हम तो यहाँ क्या हुआ एक लिस्ट बनी और उसके अंदर कलर रेड और सीजन विंटर्स करके एक सब लिस्ट आ गई है मैंगो के अंदर भी दो जो बुलेट पॉइंट्स है वो सब लिस्ट के आ गए है तो लिस्ट के अंदर एक और दूसरी लिस्ट क्रिएट करना भी पॉसिबल है जिसे हमारे पास आएगा वन आपल या टू मांगो इसको कैसे लिखना है? यानि इस list को हम कर लेते हैं copy और इसको कर देते है comment out इसको कर दिया paste और सिर्फ unordered में ul की जगे ol कर देना है तो यह ordered list बन जाएगी और list items को same रखना है तो इसको अगर save करें तो यह 1 आ गया for apple, 2 आ गया for mango, 3 आ गया for leachy तो यह 1, 2, 3 हमारे पास list में अभी भी ul है हमारे पास उसको भी अगर ordered बनाना है तो लिख लेते हैं ओ इसको भी कर लेते हैं से तो बाहर भी वन आ गया है अंदर भी वन आ गया है अब इस लिस्ट के जो नंबर्स हैं इनको भी हम चेंज कर सकते हैं एबी सीडी लिख सकते हैं रोमन न्यूमिरल्स कर सकते हैं उसके बारे में भी पढ़ सकते हैं MDN रिफेरेंसेस हो सकता है कि आपकी जो websites है वो colleges के बारे में information दे रही है, या J.E. Mains की हमने काफी सारी website देखी होंगी, जिसमें last year का J.E. Mains का score होता है, या और साथ के साथ कितना percentile cutoff आने वाला है, या कितने marks पे कितनी rank आने वाली है, तो वो table format में वैसी information अच्छी लगती है, या students की list है, जिसमें students के role number लिखें और नाम लिखें, वैसी information table format में बहुत सुन्दर लगती है, जाती है तो वैसे रियल लाइफ टेबल्स को जब हम अपने वेबसाइट पर अपने वेब पेज पर डिस्प्ले कराना चाहते हैं तो वहां हम यूज करते हैं एसटीएमल टेबल्स का एसटीएमल टेबल्स में हम मेजरली तीन चीजों की बात करेंगे पहला टैग इन में एक है टी आर यानि टेबल रो टैग इसकी हेल्प से हम हर एक टेबल के अंदर रो जो है वह क्रिएट करते हैं दूसरा हमारा टेबल डेटा टैग जिसके अंदर टेबल का जो हम डेटा डालना चाहते हैं उसको हम डाल रहे होते हैं और तीसरा होता है हमारा जिसके अंदर हम table का जो header होता है मतलब main उपर वाले columns का नाम की इसके अंदर role number लिखे जाएंगे या इसके अंदर name लिखा जाएगा इसके अंदर phone number लिखा जाएगा वो वाली header वाली जो सबसे उपर वाली room बनाते हैं उसको भी create कर सकते हैं और साथ के साथ जब भी ज़रूरत पड़े आप simply google कर सकते हैं या MDN references चेक कर सकते हैं बहुत सारे resources online available हैं तो बिलकुल tension नहीं लेनी, अभी कि हम इतने सारे tags पढ़ रहे हैं, इतने सारे याद कैसे रहेंगे, वो वाला pressure बिलकुल नहीं लेना है, सिफ simply समझते जाने, बहुत laid back होके, बहुत easy going तरीके से, सिफ simply समझना है, इन में से सबसे पहला है हमारा table row, अब इन तीनो tags को हम use किस तरीके से करते हैं, इनको कुछ इस तरीके से हम use कर रहे होते हैं, जैसे अगर right में हमें जो एक table दिख रही है, जिसमें हमारा header जो है, वो है name और roll number, अपना name और अपना roll number, उसको create हम करेंगे table tag की मदद से, अभी एक semantic tag है, क्योंकि table से हमें समझ आ रहा है, कि हम एक table create करने वाले हैं, इसके अंदर सबसे पहली जो row है, मतलब ये वाली जो row है, इतना हिस्सा, इसको हम create कर रहे हैं, अपने इस tr tag की मदद से, ये जो tr tag है, इसकी मदद से ये वाली row create हो रहे हैं, और ये जो tr tag है, इसकी मदद से दूसरे वाली table row create हो रही है, पहले वाली row में हमने header define किया, तो header में हमारे पास name आ गया है, role number आ गया है, दूसरे वाली row में हमने define किया है, अपने data को, यहाँ पर भी td होना चाहिए, तो यहाँ पर data को हमने define किया है, तो उसकी वज़े से हमारे पास हमारा data जो है table के अंदर print हो गया है, इस format में अपनी table को create करके देखते हैं, हमारी ज नेम उसके बाद हम स्टोर करने वाले हैं दूसरा टेबल हेडर विच इस हमारा रोल नंबर अब सेम जो हमने टेबल रो बनाई है इसकी जगह हम क्या करेंगे बनाएंगे एक और टेबल रो जिसके अंदर डाटा स्टोर होगा यानी टेबल डाटा सबसे पहले नेम यहां पर हल्का सा इसको space दे देते हैं यह है table अब यह जो left side में line है हो सकता है आपकी text editor में ना आ रही हूँ तो उसके लिए आप extension में जाके एक prettier नाम का extension होता है इसको आप कर सकते हैं install तो यहां पर मैंने इसको install कर रखे है तो automatically मेरे लिए जो lines है वो highlight हो रही है तो आपको तो आप इसको install कर सकते हैं, तो यहाँ पर table row है, उसके अंदर हमने header create कर लिया, उसके अंदर हमने table data डाल दिया, इसको save करके run करते हैं, तो हमारे लिए एक table आ गई है, अब table की line यहाँ पर नहीं दिख रही होंगी, पर यह जो format है, name, role number का, अब जो header है, वो bold में highlighted है, और नी जिसके अंदर एक और different नाम हम रख रहे होंगे जिसके अंदर एक और नाम हम तो इस तरीके से table के अंदर काफी सारी information आ गई हैं और ऊपर आ गए हैं हमारे नाम in the header format अब इसमें साथ के साथ हम काफी सारे जो changes हैं वो इस table के अंदर कर सकते हैं अब इस table के अंदर हम और भी का caption क्या होता है, जैसे हमारी photo के नीचे हम caption लिखते हैं, जिसमें हम describe कर रहे होते हैं, photo के अंदर क्या चल रहा है, वैसे ही table के अंदर क्या चल रहा है, वो उसका caption बदा देता है, तो caption के अंदर हम डाल रहे होंगे student data की, student data के बारे में table है, मान लीजिए आप लोगों के blood group store कर रहे हैं, तो आप लिख सकते हैं, this is a medical information table, या जिसमी तरीके का आप data store कर रहे हैं, बस उसकी information, तो उसके लिए हमें simply उपर एक caption tag को इस्तमाल करना पड़ता है, table के अंदर, हम ल टूडेंट डेटा इसको सेव कर लें अगर इस तरीके से हमारी टेबल का कैप्शन हमारे लिए आ गया है अब टेबल कैप्शन के अलावा हमारे पास दो और सेक्शन होते हैं दो टाइप्स होते हैं जिनको टेबल में यूज कर सकते हैं इनमें से सबसे पहला होता है हमारा टेबल हेड और दूसरा होता है हमारा टेबल बॉडी अब टेबल हेड का काम होता है टेबल के हेड को यानि में जो हेडलाइन है हेडर है उसको राप अप कर लेना और टेबल बॉडी का काम होता है हमारी table के अंदर जो भी data है उसको wrap up कर लेना अगर इनका हमें इस्तेमाल करना हो ये भी वैसे layout के लिए use होते हैं तो इसके लिए हम यहाँ पर लिख देंगे t head और t head के अंदर आ रहा होगा हमारा header तक का part मतलब first row जो हमने add की थी t body टी बॉडी के अंदर आ रहा होगा सारा का सारा हमारा data जो हमने t head की help से define किया है इसको कर लेते हैं save तो यहाँ पर visibly कोई changes नहीं दिख रहे पर अगर आप inspect रिपेक्ट करेंगे तो आपको चेंजेस दिखेंगे जैसे पता चलेगा कि यह जो इंडिविजुअल है यह हमारे डेटा है यह हमारी पूरी की पूरी टेबल है अगर राइट में जाएं और एक सेक्शन पर स्क्रोल करना चाहिए जैसे टेबल के अंदर जाकर हेड में हमारा टेबल हेड यहां से स्टार्ट हो रहा है और उसके अंदर सारी की सारी चीजें हैं अंटिल आर हेडर नेक्स्ट एक और अट्रिब्यूट होता है टेबल के अंदर जो कभी-कभी काफी काम आता है, वो है call span का, यानि column कितने बाकी columns तक span कर रहा है, जैसे अगर हम चाहते हैं कि इन दोनों columns का नाम, यहाँ पर अभी हमने इस column को नाम दिया है name, इसको नाम दिया है rule number, पर हम इन द एक simple हमने header लगाया है जिसको हमने नाम दे दिया है information इसको अगर हम करते हैं तो information जो है हमारे सिर्फ first column के उपर आता है लेकिन हम चाहते हैं यह information वाली जो value है वो दो columns के बिलकुल center में आये दोनो columns की जगे को ले तो उस time पर हम इस्तमाल करते हैं call span का call span क्या करेगा हमारे लि तो इस तरीके से अब यह जो information है वो दोनों columns के ऊपर आ गया है, center में आ गया है, दोनों columns की उसने जगे ले लिया है, तो जब भी हमें ऐसा कोई दो तिन columns को merge करना हो, it's basically excel sheet के अंदर कभी-कभी हम cells को merge कर देते हैं ना, कि दो तिन cells पे same information, same column का नाम हम दे पाएं, उसी तरीक सबसे important topic मुझे लगता है जब में हम Facebook जैसे platform पर जाते हैं Instagram पर जाते हैं, Snapchat पर जाते हैं कहीं भी जाते हैं तो शुरुवात में हमें क्या करना पड़ता है sign up करना पड़ता है या कभी भी login करना पड़ता है तो हमें एक form दिखाई देता है जिस form में हमें या तो username आड़ करना पड़ता है शुरुवात में हमें नाम, full name, phone number Gmail ID डालनी पड़ती है तो इस तरीकी के जो forms है ये सारी के सारे forms HTML में create होते हैं तो forms को HTML में create करने के लिए हमें use करना पड़ता है अपने form tag का, तो forms are used to collect data from the user, इसमें हमारे example आ जाते हैं, हमारे sign up forms होते हैं, login forms होते हैं, कुछ website पे आप देखेंगे help request का form होता है, या फिर contact का form होता है, जिसमें आप अपनी ID छोड़ सकते हैं, अब form का use किया जाता है, form tag के लिए, आप फॉर्म टाइप का इस्तेमाल किया जाता है फॉर्म को क्रिएट करने के लिए तो ऊपर डालते हैं हम अपना ओपन टैग और बीच में आता है फॉर्म का सबकी सारा का सारा फॉर्म कॉंटेंट तो हम सबसे पहले डिफाइन करेंगे एक फॉर्म के लिए उसका एक्शन एक्शन क्या होता है कि फॉर्म में जितना भी डेटा आना है वो फाइनली किसके पास जाएगा इसके लिए यूजुरली ह अभी के लिए action हमारे लिए इतना relevant नहीं है, basically हम बस form design करना सीख रहे हैं, उसका data कहा जा रहा है, उस data के साथ बाद में क्या होता है, ये वाला part हमारे concern का अभी नहीं है, तो सबसे पहले एक form को बना कर देख लेते हैं, इस उपर वाले पूरे part को हम करने वाले हैं, comment out, create करते हैं अपना एक form, कि कोई हमारी action.php नाम की एक file होगी, back end में, जो इस form के data को process कर रही होगी कि आपने login किया है तो सारी information आपने डाली है क्या sign up कर रहे हैं कि आपको login करना है तो सारा आपने username और password सही डाला है क्या कि अगर आप sign up कर रहे हैं तो फिर सारी information आपके भर के दी है प्रॉपरली भर के दी है फोन नंबर में ऐसा तुनिया ABCD डा अब form के अंदर हम different different elements का जो है इस्तेमाल करते हैं, कभी कभी ऐसे भी form होते हैं, जिसके अंदर हमें कुछ अपनी email id टाइप करनी होती है, कभी कभी कोई option हमें select करना होते हैं, अगर आपने google forms चलाए हो अभी online semester के time पे, कोई option हमें tick करने होते हैं, या फिर कोई button को हमें click करना होते हैं, input को कुछ हम इस तरीके से लिखते हैं, tag इसको कहा जाता है जिसके अंदर type हमारा होगा text यानि कुछ text ये input लेगा और placeholder यानि इसके अंदर पहले से क्या लिखा होगा इसको लिख कर देखेंगे तो better समझ में आएगा बना लेते हैं एक input input के अंदर type हम दे देते हैं text text हमने type दिया placeholder लिख लिया type something here तो इस तरीके क अब यहाँ पर हमारे लिए क्या हुआ एक input box आ गया है जिसके अंदर already लिखा हुआ है type something here तो जो भी placeholder के अंदर value होती है placeholder का English में मतलब होता है कि यहाँ पर कोई ऐसी चीज है जो आप कुछ नहीं लिखेंगे तो वो चीज लिखी होगी जैसे इस type something here के अंदर मैं अपना तो यहाँ पे हमारे पास हम कोई भी text जो है अपना लिख पाते हैं शरधा 1, 2, 3, 4, 5, 6 इस तरीके से, मान लीजे हम एक और input बना लेते हैं, तो form के अंदर एक तो input बना लेते हैं अपने username का, कि अपना username एंटर कर दो, एक input बनाते हैं अपना password का, कि यहाँ पे हमें एंटर कर अब password के अंदर क्या enter करें, password के अंदर जो भी हम enter करेंगे, वो देखें, dots की form में display हो रहा है, और हम देखी नहीं पाएंगे कि वो password में हम क्या चीज़ enter कर रहे हैं, तो इस तरीके से जब भी input में password लेना होता है, हम type उसका password define कर सकते हैं, text define करेंगे तो वो दिखेगा, password define करेंगे, तो keys तो press होंगी, पर actually वो bullet points की form में आएगा, अब ये हमने input के दो types देख ली हैं, text और password, नेक्स्ट बात करते हैं labels की, label क्या काम करते हैं, हमारे form के अंदर label के दो uses होते हैं, मतलब किसी भी input के उपर हम एक label assign कर देते हैं, label का मतलब होता है basically एक tag assign करना, कि हम इस चीज को एक कोई special नाम दे रहे हैं, या जिसे student को role number दे देते हैं, वैसे ही हम किसी input element को एक label दे देते अब label के दो फाइदे होते हैं जिनमें से सबसे पहला फाइदा होता है कि जो भी हमारे screen reader users होते हैं मतलब हो सकता है हमारी website को use करने वाले कुछ लोग जो है visually impaired हो उनकी eyesight खराब है या वो देख नहीं पा रहे हैं तो कुछ devices में ये feature होता है कि device जो है automatically detect करता है कि क्या क्या elements screen पर हैं और वो उस हिसाब से बोलता है ये feature iPhone के अंदर बहुत जादा है कि website पर जो जो चीज़े लिखी हैं वो बताई जाती हैं तो labels यहाँ पर help करते हैं कि उन screen reader users के लिए हमारे पास पहले से ही उनको बोल कर बता दिया जाता है जाता है कि यहाँ पर एक check box है या यहाँ पर एक button है या यहाँ पर एक field है input field है जिसके अंदर आपको अपना username type करना है या यहाँ पर एक field है input field जिसके अंदर आपको अपना password type करना है तो वहाँ पर labels जो है काफी जादा help करते हैं एक और जगह labels हमें काफी help करते हैं वह होते हैं हमारे radio buttons radio buttons यानि वो buttons जिनमें आप choice में एक ही select कर सकते हैं उस तरीके के buttons को हम usually radio buttons कहते हैं radio button को कैसे define करते हैं जैसे हम एक और input का type यहाँ पर ले लेने हैं, और type में हम लिख देंगे radio, अब यहाँ पर हमें placeholder लिखने की ज़रूरत नहीं है, यहाँ पर हम दो attributes define करेंगे, इन में से सबसे पहला attribute है कि class 11th, और दूसरा attribute है name, और यहाँ पर हम लिख देंगे class 11th, सेम तरीके से हम एक और radio button बना सकते हैं, यह radio button क्या होगा, यह represent करेगा class 12th को, इसके अंदर लिखेंगे class 12th, इसके अंदर आप notice करेंगे हमने नाम जो है दोनों को same दिया है अब same नाम का फाइदा क्या होगा वो मैं थोड़ी देर में बताऊंगी अभी के लिए बस बना रहे हैं value अलग अलग है यानि इनके नाम अलग अलग है और अब दो हमारे पास buttons आ गए हैं class 12 नहीं तो class 11 class 12 नहीं तो class 11 radio buttons की speciality होती है एक बार में आप उन मेंसे एक ही click कर सकते हैं मतलब multiple options के लिए नहीं होते हैं जैसे आपके JEE mains के test होते हैं तो उसमें multiple options अगर नहीं हो तो वैसे cases के लिए radio buttons हमारे होते हैं अब इन में से कोई एक ही हम चूज कर सकते हैं, अब back end पे मैं थोड़ा सा हलका सा बताओं, extra information के लिए की क्या होता है, जिस भी radio button को आप चूज करेंगे, मतलब अगर आप 11th को चूज करते हैं, तो क्या होगा, back end को information मिलेगी की आपने class में चूज किया है 11th को, तो ये value उसक लेकिन हमारे जो back-end के पास information जाएगी वो class 10th की जाएगी इसलिए हमेशा जो है value और जो हम print करवा रहे हैं user को वो sink में होना चाहिए क्योंकि user को ये value नहीं दिखती और back-end को ये वाला हमारे जो print करवा रहे हैं user को ये वाली value नहीं दिखती तो इन दो चीज़ों का ध्यान रखना है तो radio buttons के अंदर similar चीज़ जो है वही कर सकते हैं अब इन दोनो radio buttons को हम एक label के अंदर डाल सकते हैं label में लिखते हैं यहाँ पे for id यहाँ अब एक ID भी बना सकते हैं, ID is like वही same चीज कि एक student को आपने role number दे दिया, कि हाँ इसका role number 1664 है, अब हम यहाँ पर दो similar radio buttons बना सकते हैं, एक class 11th का, दूसरा भी class 11th का बना सकते हैं, पर अगर हम उनको अलग-अलग IDs दे दे, तो वो radio buttons अलग-अलग हो जाएंगे, तो ID देने क यहां पे भी हम अपना label बना सकते हैं यह label है किसके लिए for id 102 तो इस label के अंदर हम डाल देंगे अपने second वाले input को तो यह form के अंदर दो हमारी labels आ गए एक हो गया 101 एक हो गया 102 अब label का फाइदा यह हुआ कि आप अगर class 11 पर भी click करेंगे तो भी वो tick हो जाएगा class 12 पर भी tick करेंगे तो भी वो tick हो जाएगा लेकिन जब तक label exist नहीं करते थे जैसे अगर मैं इसको कर लूँ copy और control z तो इस case में हमारे पास एक भी label जो था है वो नहीं था अब इस code को अगर मैं save करूँ तो अब मैं यहां click कर रही हूँ तो कुछ हो नहीं रहा मतलब button जो है काम नहीं कर रहे तो label का फायदा यह होता है कि जब भी हमारे पास same नाम होता है मतलब name हमने same रख दिया है दोनों अपने input का radio buttons का तो हमारे पास यह functionality आ जाती है कि text पर भी हम click करें ना मतलब इसको save करके text पर भी click करें तो भी radio button tick हो जाता है यह उन cases में उन users के लिए फायदे मंद होता है जिनकी शायद आई साइड थोड़ी सी कमजोर है, जैसे स्क्रीन बहुत छोटी है, उस पर टेक्स जो है बहुत छोटा दिख रहा है, तो उस केस में हम करसर लेकर जाते हैं, ज़रूरी नहीं है, हम यहीं पर टिक कर रहे हो, हम यहां करें तो भी क्लिक हो जाए, उन केसेस में तो form हमारा कुछ ऐसा दिख रहा होगा, जिसमें हमारे पास पहले username होगा, फिर password होगा, फिर हम अपनी class जो है वो choose कर सकते हैं, in fact यहाँ पर दो नेक्स्ट लाइन ले आते हैं, same for this, तो अपना username, password and फिर हमारी class, तो कुछ इस तरीके से हम अपने form को बना सकते हैं, next हम बात करने वाले हैं class and id की, अब हमने बात किया कि id क्या होती है, अब एक बार बात कर लेते हैं कि एक element के लिए attribute class का क्या मतलब है, अब हम किसी भी element को एक साथ एक class assign कर सकते हैं और एक id assign कर सकते हैं, क्लास को assign करने का मतलब आप समझ सकते हैं कि बच्चों को एक group assign कर दिया, कि आपका group 1 है और इन बच्चों का group 2 है, अब group 1 के अंदर हो सकता है 5 बच्चे हो, अब इन 5 बच्चों को कैसे हम differentiate करेंगे, इनको हम दे देंगे एक ID, इसकी ID 1 है, इसकी ID 2 है, 3 है, 4 है और 5 है, और दूसरे group के बच्चों की ID क्या है, दूसरे group में मान लीजे 4 बच्चे हैं, और इनकी भी अपनी एक ID है 1, 2, 3, 4, तो अगर एक साथ, ये बच्चों की जगे, अगर मान लीजिए हमने buttons डिफाइन किये, और हम चाहते हैं सारे buttons का color जो हो green हो, तो individually हम इन सारे buttons को green color देने की ज़रूरत नहीं है, हम क्या कर सकते हैं, इस पूरे group को green color assign कर सकते हैं, या इस पूरे group 2 को blue color assign कर सकते हैं, तो इसको आप हमारे schools में houses होत कि यह हमारा पूरा एक house का color हो सकता है, यह हमारे house के members हो सकते हैं, और इस तरीके से जब information group के elements के लिए करनी है, तो वहाँ पे group का नाम, यानि class का नाम दे देते हैं, और जब individual को हमें देखना है कि भाई, कि इसी particular बच्चे के लिए मुझे ID card जो है उनका check करना है, तो हम बस इस div के अंदर अपनी एक id है id1 और ये class है इसकी group1, दूसरा div है इसकी id है id2, class है इसका group1, यानि यहाँ पर क्या case हो रहा है, ये एक पूरा का पूरा div है, जिसका नाम हमने दे दिया है id1, और ये दूसरा div है जिसको नाम हमने दे दिया है id2, अब ये जो दोनों divs हैं, ये next बात करते हैं check boxes की हो सकता है कभी-कभी हमें ऐसे option देने हो जिसमें आप multiple चीज़ें जो है select कर सकते हैं वहाँ पे radio buttons काम नहीं आएंगे तो वहाँ इस्तेमाल कर रहे होंगे हम check box का check box को कैसे लिखते हैं वो भी देख लेते हैं check boxes के अंदर भी हम labels जो हैं subject select करने है पांच में से कोई उसको subject select करने है तो यहां हम लिख लेंगे label for सबसे पहले math के लिए label बना लेते हैं input यहां पर जो type है वो type बन रहा होगा हमारा check box, check box के अंदर value क्या देंगे, value इसमें दे देते हैं math, और इसमें name हम दे देंगे subject, और ID हम इसको दे सकते हैं, ID कब काम आईगी, ID back end के काम आईगी, अभी हमारे काम नहीं आई, back end के काम कैसे आईगी, back end detect कर पाएगा, कि 5 में से उसके उपर एक green color आ जाए या उसके उपर एक blue color आ जाए उस तरीके की चीज़े हम कर सकते हैं जब हम CSS और JavaScript दोनों सीख लेंगे तो वहाँ ID काम आ रही होगी अभी इतना useful नहीं है फिर भी दे देते हैं इसको 101 ही देते हैं और इस check box को नाम देंगे हम math similar तरीके से और check boxes बना लेते हैं चार subject का बना लेते हैं physics phy और subject में हम लिख देते हैं physics इसको ID different देनी पड़ेगी तो इसको 3 दे देते हैं 4 दे देते हैं तो चेक बॉक्सेज हमारे कुछ इस तरीके से डिस्प्ले होंगे जिनमें से हम multiple को जो है select कर सकते हैं अब इसकी formatting के लिए थोड़ा सा next line दे देते हैं हर किसी को similar formatting के लिए उपर भी एक बार add कर देते हैं कि सिलेक्ट यॉर क्लास तो हमारा फॉर्म कुछ ऐसा दिखेगा जिसके अंदर ऊपर हमारे पास यूजर नेम और पासवर्ड भरने की जगह में सिलेक्ट करने है तो हम सिलेक्ट कर लेंगे मैथ केमिस्ट्री मेबी फिजिक्स या अगर आपको मजा रहा है अभी फेवरेट सिलेक्ट करना तो अब हम यूज करते हैं इस्तेमाल करते हैं अपने चेक बॉक्स का नेक्स्ट बात करते हैं text area की, कभी-कभी हम चाहते हैं कि हम जो है कुछ text जो है उसको user से input ले ले, मतलब हम उसे कुछ area दे दें जिसमें वो सिर्फ कुछ चीज़ें हमारे बारे में कुछ line ने लिख पाएं, जैसे इसका example होता है कि कुछ-कुछ companies जो हैं अपनी websites के उपर feedback का text area और इसके अंदर सबसे पहले नाम इसको दे देते हैं नाम हम देने वाले हैं इसको feedback इसकी ID भी दे सकते हैं ID इसको 101 दे देते हैं और इसमें हम placeholder डाल सकते हैं यह जो text area यह बहुत similar है input में type is equal to text के but इसका थोड़ा सा अलग use है तो हमें वही है proper labels proper जो tags हैं उनका इस्तेमाल करना चाहिए placeholder में डाल देंगे please give your valuable फीडबैक हिर तो वाल्यूबल फीडबैक जो है हम टेक्स्ट एरिया में लिख लेंगे और यहां पर डाल देंगे फीडबैक यहां पर भी कुछ लाइन ब्रेक्स डाल देते हैं तो यह हमारा फॉर्म आ गए जिसमें एंड में हम फीडबैक दे पा रहे हैं आए मतलब ऑलरेडी उसमें कुछ-कुछ पहले से लिखा होगा इसको हम हटा सकते हैं तो यहां हमारे पास हमारा पेसोलडर आ गया अभी हम लिख सकते हैं दिस वाज़ नाइस फॉर्म थैंक यू वेरी अ much for this info अब हम चाहते हैं यह थोड़ा सा बड़ा हो जाए तो इसमें हम height या width वगेरा भी डाल सकते हैं तो इसकी height हम लिख देते हैं तो अब यह थोड़ा सा बड़ा हमें होकर दिखाई दे तो उसके लिए हम rows and columns define कर देते हैं तो इसमें rows हम लिख देते हैं is equal to 5 तो क्या होगा 5 rows के बराबर यह हमें space दे देगा तो इसमें हम लिखते जा सकते हैं मतलब कुछ भी लिख सकते हैं 5 rows तक हमारे पास space आ जाएगी in fact हम columns भी बढ़ा सकते हैं जितने मरदी चाहें तो इस तरीके से बड़ा जो feedback form है वो हमें मिल जाएगा तो ऐसे हम define करते हैं अपने text area को अब next बात करते हैं select की अब कुछ-कुछ forms में हमारे पास drop down आता है जैसे अगर हमें कोई city select करनी है या हमारी state कौन सी है वो हमें select करना है तो वहाँ हम drop downs का usually इस्तमाल करते हैं तो drop downs को दिखाने के लिए form में हम select को use करते हैं तो select tag के अंदर हम उसका कुछ name दे सकते हैं उसकी कोई ID दे सकते हैं और उसके अंदर दे सकते हैं different different options for our drop down इसको भी लिख कर देखते हैं यहाँ feedback से पहले इसको लिख कर देखेंगे सबसे पहले लिखेंगे select name is equal to city तो इसके अंदर सबसे पहला जो हम option देने वाले हैं उसमें value हमारे Delhi तो इसके अंदर लिख देंगे Delhi अब similar और जादा हम options दे सकते हैं यहां पर हम दे सकते हैं बैंगलोर यहां दे सकते हैं हम पूने तो सारे के सारे ऑप्शंस जो है हमारे लिए आ जाएंगे तो यह जो फीडबैक तो यह नोटिस करेंगे तो फॉर्म के अंदर यह वाला ड्रॉपडाउन आ गया है जिसमें हम अभी भी ऑप्शन जो है सिलेक्ट कर सकते हैं अपनी मर्जी से जो भी सिटी हमें चाहिए तो इस तरीके से हम स्पेसिंग ठीक करने के लिए सबसे पहले तो यूजर नेम और पासवर्ड के बीच की जो एक्स्ट्रा लाइन्स है इनको हम हटा देंगे तो यूजर नेम यहां आ गया पासवर्ड यहां आ गया फॉर्म का एक टाइटल भी दे देते हैं तो उपर हेडिंग दे देते हैं फ� उनको ना डालें तो अपनी class हम यहां से select कर सकते हैं, फिर select कर सकते हैं अपने favorite subjects को, finally फिर कर सकते हैं select अपनी city, तो यहां city के उपर लिख देंगे, select your city, and feedback में हम इस चीज को कर देते हैं, तो पूरा का पूरा form जो है हमारे लिए design हो कर आ गया है, जिसमें उपर काफी सारी च और इसको भी हम value देंगे of submit तो यहाँ क्या हुआ हमारे लिए एक submit button आ गया तो submit button से क्या होगा हमारा form submit हो जाएगा मतलब उसमें information हम add कर पाएंगे और information को हम submit कर पाएंगे अपने form को पूरा हमने भर लिया और उसको अब कर देंगे submit तो इसको भी next line में ले आते हैं इस button को कि action.php को यह get नहीं कर पा रहा है मतलब action.php हमारे लिए exist नहीं करती है अभी पर logically ये होगा जब हमारी पूरी website setup हो जाती है कि ये form से सारा का सारा data लिया जाएगा और वो action.php को या action.js को या जो भी हम file use कर रहे हैं अपने back-end के लिए या front-end के लिए जिस भी file में data भीच रहे हैं उस file को completely ये data transfer हो जाएगा और फिर उस file में जो जो चीज़ें हैं इस data पर इस तरीके से पूरा का पूरा form हमने design कर लिया है next बात करते हैं एक और important tag की जिसका नाम है iframe tag का काम होता है कि एक website के अंदर मान लीजिए हमें दूसरी website दिखानी होता है वो कैसे दिखाएंगे उसके लिए इस्तमाल करते हैं iframe tag का to show websites inside website iframe tag कुछ anchor tag की तरह होता है जिसके अंदर हमारे पास source attribute होता है जिसमें हम कोई link डालते हैं जैसे अगर मैं randomly अभी youtube पर जाओं जिसके अंदर मैं search करूँ for java तो जो first video आ रही है इस पर हम कर लेते हैं click और इसको share कर देते हैं share करने के बाद क्या करेंगे यहाँ पर एक embed का option आएगा इस embed के option पर हम जाएंगे और ये right में क्या करेगा हमारे लिए कुछ कुछ code हमें HTML का जो iframe का code है वो दे देगा इसको कर लेते हैं copy और वापस से अपने HTML code में आते हैं इस form को अभी के लिए क्या करते हैं अभी के लिए इसको कर देते हैं comment out हम क्या करेंगे अपने page पर वो पूरा का पूरा आई फ्रेम वाला जो भी टाग के अंदर सारी information थी उसको copy कर लेते हैं, इसके अंदर अभी important चीज यह है कि हमने आई फ्रेम लिखा हुआ है, width height यहाँ पर define की हुई है, source के अंदर हमने लिखा है अपना पूरा का पूरा link, which is एक YouTube video का link, control करके अगर save करे कि पूरा YouTube का जो प्लेयर है वह हमारे अपनी वेबसाइट के ऊपर आ जाएगा तो एक तरीके से अगर आपको अपनी वेबसाइट के ऊपर YouTube वीडियो चलानी है कोई और वीडियो चलानी है इन फैक्ट किसी और वेबसाइट को डिस्प्ले कराना एक आई फ्रेम क्रिएट करने की कोशिश करें जिसमें आप सोर्स डाल रहे हैं google.com का google.com का तो इसको सेव करें तो यह वाली चीज काम नहीं करेगी यहां लिखा आ गया रिफ्यूस टू कनेक्ट इस कुछ-कुछ साइट्स होती हैं जो प्रोटेक्ट करती है खुद को कि आप हमारी वेब पेज को या हमारी वेबसाइट को अपनी वेबसाइट के ऊपर नहीं दिखा सकते हैं। इससे क्या हो सकता है कि लोग गूगल डॉट कॉम का जो सर्च बार है उसको अपनी वेबसाइट के ऊपर दिखा सकते हैं उस पे लोग आकर गूगल डॉट कॉम की जगे आपकी वेबसाइट पर लांड कर सकते हैं और फिर वहाँ पे वो सर्च कर सकते हैं। पर अगर हम कुछ और करना चाहे मान लीजिए हम MDN की ही website जो है उसको हम दिखाना जा रहे हैं तो यहां पे हम बस link को कर देंगे replace और आएंगे अपने page पर तो यहां MDN भी allow नहीं करता पर जैसे Wikipedia का हम example लें तो यह Wikipedia पूरा का पूरा हमारी website के उपर खुल गया है यहां पे height and यह विट जो है थोड़ी सी चोटी पढ़ रही है तो इसको next line में ले आते हैं और गया करते हैं इसके लिए भी height and width set कर दे दें same तो क्या हुआ यह पूरा Wikipedia आप देखेंगे functional है और यह पूरा यहाँ पे आप search करना चाहे कि मान लीजिए हमें HTML के बारे में search करना है तो सारी की अब जो professional level websites होती हैं वो usually mostly prevent कर रही होती हैं इस चीज को, but since Wikipedia is freely available, सारा resources जो है freely available है, तो उन्होंने इतना कुछ कर नहीं रखा, and उनको फरक भी नहीं बढ़ता अगर आप उनका data चुरा लें तो, तो इस तरीके से हम use करते हैं अपने iframe tag का, which I think like this is my favorite tag iframe, मुझे यह काफी cool लगता है personally, next हम बात कर रहे होंगे video tag की, photos को हमने relative URL से भी दिखाए, absolute URL से भी दिखाए, वैसे ही हम वीडियो को भी दिखा सकते हैं अपनी वेबसाइट के उपर, और उसके लिए जो हम यूज करते हैं टैग, उसको कहते हैं वीडियो टैग, वीडियो टैग के अंदर सिंपली लिखेंगे SRC, जिसके अंदर अपनी वीडियो का हम लिंक डाल देंगे, ये तो एक relative link ह वीडियो करके तो अपने i frame को हम कर लेते हैं comment out और नीचे लिखते हैं video tag को तो वीडियो को use करने के लिए यहां लिखेंगे video यहां लिख सकते हैं my video अब यहां कोई src हमें डालना पड़ेगा तो उसके लिए सबसे पहले तो अपनी files के अंदर एक video को add कर लेते हैं एक screen recording को डॉट एमोवी इसका एक्सटेंशन है इसको कर लेते हैं सेव और अब जाकर अगर हम देखेंगे तो हमारे लिए बड़ी से वीडियो खुल गई है अब इसमें भी हम विट एंड हाइट एक बार सेट कर लेते हैं ताकि सही फ्रेम में चीजें आ रही हूं सेव प्ले नहीं कर पाए इस एस क्रीन रिकॉर्डिंग वीडियो तो इसको प्ले करने के लिए हमें यहां कुछ-कुछ हम आट्रिब्यूट का जिनमें से सबसे पहला attribute है हमारा controls, अब वीडियो के सारे controls दिखाने के लिए हमें यहाँ पर tag के अंदर लिखना पड़ता है controls, तो क्या होगा, अब हम इस वीडियो को play कर पा रहे हैं, इस वीडियो में हम sound जो है उसको on off कर पा रहे हैं, कम जादा कर पाएंगे, इसको full screen कर सक भी दिखता है तो इस तरीके से हम अपनी वीडियो को भी डिफरेंट तरीके से कंट्रोल कर सकते हैं साथ में और भी काफी सारे ओप्शन होते हैं जैसे लूप आप कर दें अगर कंट्रोल्स के साथ कंट्रोल्स हमने कर दिया लूपस हमने कर दिया तो एक बार आप इस वीडियो को पूरा देख लेंगे तो उसके बाद क्या होगा ये वीडियो आटोमाटिकली दुबारा से शुरू हो जाएगी यानि लूप में अगर आपको वीडियो चलानी है तो वो आप कर सकते हैं या ल� पर auto play usually नहीं करना होता है क्योंकि जैसे website पर जाता है, एक तो आपके user के पास अगर बहुत कम data है, वो बहुत कम bandwidth के साथ है, बहुत खराब internet की situation में है, तो situation में बहुत सारा internet उनका खर्च हो सकता है, अगर आपकी video auto play होती है, दूसरी situation यह है कि कुछ users को annoying लगता है, उनका user experience sound को ऑफ करके करिए जैसे काफी सारी ads होती है उनमें auto play होता है पर sound off होती है तो that is a good way to auto play इसके अलावा हमारे पास height और width के भी attributes होते हैं कि हम size set कर सकते हैं कितने size में हमारी video जो है हमें दिख रही होगी तो ये काफी सारे attributes हमने discuss किये जिससे हम video को अपनी को control कर सकते हैं अब इसके साथ ही हमने html के चारो levels को complete कर लिया है और अब अगर हम शुरुवात से html पढ़ रही थे तो हम pro level तक तक पढ़ चुके हैं मतलब एसटीएमल के अंदर इंपोर्टेंट जरूरी क्रूशल चीजें जितनी थी वह हमने सारी देख लिए अगर आप एसटीएमल का कोई कोड लिखने जाएंगे तो आगे-पीछे करके आपको इतनी ही चीजें हैं जो पता होनी चाहिए जो यानि हमने form design करना सीखा है तो हम क्या करेंगे अपने portfolio के अंदर एक contact me के लिए form बनाएंगे जिसमें लोग जो है अपनी email id हमें छोड़ सकते हैं उसमें अपना नाम छोड़ सकते हैं क्या उनके query है क्या वो कोई recruiter है या कोई help मांग रहा है हमारे college का junior उस तरीकी information डाल सकते ह कि आपको एक website बनानी है resources के लिए for college students, जिसमें सबसे पहले तो website का एक sign up form हम design कर रहे होंगे, उसके अलावा हम links add कर सकते हैं, iframe add कर सकते हैं, coding videos का, तो coding videos के हम चीज़ें जो हैं add कर दें, आप अपना college channel को refer कर सकते हैं, उनकी कुछ video आप डाल देंगे, और, उससे पहले एक sign up होगा फिर बच्चे जो हैं जाकर different different coding videos को देख सकते हैं साथ के साथ एक table बनानी है home page पर जिसमें क्या होगा different different topics जो आपकी website cover कर रही है students के लिए उनको आप दिखा रहे होंगे अपने home page के उपर तो ये थोड़ा सा resource library type आप एक project बना सकते हैं इसको अपने mini project की तरह add कर सकते हैं इसमें actually अगर आप CSS, JavaScript या backend सीख लेते हैं तो ये पूरा आपका full on एक major project बन जाता है जो resume में लिखने के लिए अच्छा है कि आपको basic concept सारे के सारे आते हैं अब HTML सीख लिया है हमने काफी अच्छे तरीके से pro level तक तो इसके बाद next step यह होता है कि हम CSS सीखते हैं यानि cascading style sheets और उसके बाद हम सीखते हैं javascript को and then finally back in अब अगर आप चाहते हैं कि HTML के बाद हम एक CSS का one shot लेकर आएं आज के लिए इतना ही मिलता है next video में तब तक आप नीचे notes refer कर सकते हैं आपको ये video कैसी लगी उसके बारे में आप नीचे मुझे comment करके बता सकते हैं आज अब आपको अभी या future में revision के लिए कभी कुछ भी कोई resources चाहिए तो नीचे description box में आपको notes और code दोनों दिये होंगे