# HTML Tutorial for Beginners | Complete HTML with Notes & Code

https://www.youtube.com/watch?v=HcOc7P5BMi4
Translation: en

[00:00] हाय एवरीवन मैं हूं आपकी श्रद्धा दीदी एंड वेलकम टू अपना कॉलेज
  Hi everyone, I am your Shraddha Didi and welcome to Apna College.

[00:03] आज की वीडियो में हम पढ़ने वाले हैं एचटीएमएल को जिसमें लेवल वन से लेकर यानी बेसिक लेवल से लेकर एडवांस लेवल प्रो लेवल तक हम पूरे एटीएमएल को पढ़ रहे होंगे
  In today's video, we are going to study HTML, in which from level one, that is, from the basic level to the advanced level, pro level, we will be studying the entire HTML.

[00:10] तो अगर आप वो स्टूडेंट हैं जिनको बिल्कुल भी कोडिंग प्रोग्रामिंग डेवलपमेंट नहीं आती है तो इस वीडियो के अंदर आप वो चीजें सीख जाएंगे कोड कैसे करना होता है
  So if you are those students who do not know coding, programming, development at all, then within this video you will learn those things, how to code.

[00:30] वीडियो को हमने चार लेवल्स में डिवाइड किया और चारों लेवल को कंप्लीट करने के बाद आप एक प्रो प्रोग्रामर बन जाएंगे
  We have divided the video into four levels, and after completing all four levels, you will become a pro programmer.

[01:00] चीजों की जरूरत है वो है एक लैपटॉप और साथ
  What is needed is a laptop and along with it

[01:02] के साथ बहुत सारा एक्साइटमेंट जो भी चीज
  a lot of excitement, whatever you like, whatever I have said

[01:05] आपको पसंद आए जो भी चीज मैंने बोली हो वीडियो के अंदर उसको मुझे नीचे कमेंट करके
  in the video, tell me that in the comments below

[01:07] बताना और अगर ऐसी कोई चीज है जो आपको लगता
  and if there is anything that you think

[01:08] है कि मुझे आगे की वीडियोस में एडिशनल कवर
  I should additionally cover in future videos

[01:10] करनी चाहिए उसके बारे में आप मुझे नीचे
  you can tell me below about it

[01:12] बता सकते हैं साथ के साथ मुझे हेल्प
  Along with that, I will get help

[01:14] मिलेगी कौन सा सेक्शन ज्यादा कवर हो रहा
  which section is being covered more

[01:16] है अगर आप टाइम स्टंप्स नीचे डाल रहे
  if you are putting timestamps below

[01:18] होंगे जैसे-जैसे आप लेवल्स में आगे बढ़
  as you are moving forward in the levels

[01:20] रहे हैं तो तो शुरू करते हैं यार अपने नए
  then let's start our new

[01:21] एचटीएमएल कोर्स को
  HTML course

[01:28] [संगीत]
  [Music]

[01:37] अब
  Now

[01:59] कुछ कुछ चीजें अच्छी हैं जैसे आप स्टाइल
  Some things are good, like you style

[02:01] एंड फॉर्मेटिंग वगैरह कर सकते हैं इसमें
  And you can do formatting etc. in it.

[02:03] इमेजेस एंड मीडिया है जैसे आप जैसे ही
  There are images and media, like as soon as you

[02:23] html5 पे एक बेसिक फॉर्म है उसको फिल कर सकते हैं
  On HTML5, there is a basic form that you can fill.

[02:26] उसको डाउनलोड कर सकते हैं एंड यू कैन यूज इट कंपलीटली फ्रीली ऑन योर सिस्टम
  You can download it and you can use it completely freely on your system.

[02:30] दूसरा एक टेक्स्ट एडिटर है अल्ट्रा एडिट के नाम से
  Another is a text editor called UltraEdit.

[02:32] जिसमें प्रोफेशनल लोगों के लिए काफी सारे फीचर्स अवेलेबल हैं
  In which many features are available for professional people.

[02:34] सो इफ यू आर अ प्रोफेशनल डेवलपर जो सोच रहा है कि
  So if you are a professional developer who is thinking that

[02:37] एचटीएमएल की तरफ वो जा रहे हैं आप फ्रीलांसिंग वगैरह करते हैं
  They are going towards HTML, you do freelancing etc.

[02:40] आप वेब डेवलपमेंट में अपनी एक प्रोफेशनल जर्नी की शुरुआत कर रहे हैं
  You are starting your professional journey in web development.

[02:43] यू आर ऑलरेडी डूइंग अ जॉब तो दिस इज अ पेड सॉफ्टवेयर जिसमें जाकर आप इसके फीचर्स जो हैं चेक आउट कर सकते हैं
  You are already doing a job, so this is a paid software in which you can check out its features.

[02:49] इसके अंदर आपके पास कोड हाइलाइटिंग जैसे कुछ चीजें आ जाएंगी
  Inside this, you will get some things like code highlighting.

[02:51] कोड टेंपलेट्स आपको दिख जाएंगे सीएसएस कलर स्वप ंग आ जाएगी
  You will see code templates, CSS color swapping will come.

[02:55] इंटीग्रेट कर सकते हैं इसको आप अपने एसएसए के साथ
  You can integrate this with your SSA.

[02:58] एफटीपी इंटीग्रेशन भी पॉसिबल है एसएफटीपी
  FTP integration is also possible, SFTP.

[03:02] इंटीग्रेशन भी पॉसिबल है तो वो टूल्स एंड टेक्नोलॉजीज जो आपके प्रोफेशनल डेवलपमेंट एक्सपीरियंस को और ज्यादा बेटर कर देंगी वो सारी फंक्शनैलिटीज इसमें आपको मिल जाएंगी एंड इन फैक्ट इवन इफ यू आर यूजिंग इट फॉर अ पर्सनल प्रोजेक्ट यू कैन जस्ट ट्राई आउट द 30 डे ट्रायल पीरियड उसको आप एक बार ट्राई कर लो एंड उसके बाद इफ यू लाइक इट तो आप किसी फ्रीलांसिंग प्रोजेक्ट या किसी पेड इंटर्नशिप वगैरह के लिए आप इसको यूज कर सकते हैं तो ये दो टेक्स्ट एडिटर्स हो गए एटीएमएल करने वाले हैं विजुअल स्टूडियो कोड यानी वीएस कोड का अब जब भी हमें एक प्रोग्राम एक कोड लिखना होता है तो हमें कोड एडिटर की जरूरत पड़ती है तो html4 नाम के कोड एडिटर का इस्तेमाल करेंगे कोड एडिटर्स को हम इमेजिन कर सकते हैं कि वो एक नोटबुक की तरह है जैसे नोटबुक के अंदर हम डिफरेंट डिफरेंट चीजें लिखा करते हैं वैसे ही जब भी हमें कोड लिखना होता है तो उसके लिए कोड एडिटर का हम इस्तेमाल कर लेते हैं जिसके साथ काफी सारे रिसोर्सेस काफी सारी चीजें हैं यूज़फुल चीजें जो हमें मिल जाती हैं अब एटीएमएल पढ़ा होगा तो आप देख रहे होंगे कि नोटपैड में भी लिख सकते हैं यानी आपके
  Integration is also possible, so those tools and technologies that will make your professional development experience even better, all those functionalities will be available to you in this. And in fact, even if you are using it for a personal project, you can just try out the 30-day trial period. Try it once, and after that, if you like it, you can use it for a freelancing project or a paid internship, etc. So these are two text editors for doing HTML, Visual Studio Code, i.e., VS Code. Now, whenever we need to write a program, a code, we need a code editor. So we will use a code editor called html4. We can imagine code editors to be like a notebook, just as we write different things inside a notebook, similarly, whenever we need to write code, we use a code editor for it, with which we get many resources, many useful things. Now, if you have studied HTML, you must be seeing that you can write it in Notepad as well, meaning your

[04:03] कंप्यूटर सिस्टम में जो नोटपैड की फाइल्स बनती हैं ड t एकटी से फाइल बनती हैं उनकी जगह आप ड सिस्टम्स बनाने हैं तो वो आपके लिए बनाना पहले से ही आसान हो जाएगा क्योंकि पहले से ही सबसे जो सीमलेस प्रोसेस वाली चीज होती है ना सबसे एफिशिएंसी वाली चीज उनको हम यूज करवा देंगे अब वीएस कोड माइक्रोसॉफ्ट की तरफ से फ्रीली अवेलेबल है तो इसको कोई भी जाकर इस्तेमाल कर सकता है तो सबसे पहले इसको डाउनलोड करने के लिए हम सर्च करेंगे इंटरनेट पर डाउनलोड वीएस कोड तो यह फर्स्ट जो लिंक आएगा इस पर हमें चले जाना है यहां पर साइट भी मैं बता देती हूं कोड विज स्टू क डनलोड अब इसमें काफी सारे ऑप्शन आ गए हैं अब आप विज मशीन पर

[05:04] हैं windows7 8 10 11 पर तो यहां पे आप
  You are on Windows 7, 8, 10, 11, so here you

[05:08] अपने सिस्टम के हिसाब से कि 64 बिट सिस्टम
  according to your system, if it's a 64-bit system

[05:11] है तो कौन सा डाउनलोड करना है 32 बिट है
  then which one to download, if it's 32-bit

[05:13] तो कौन सा डाउनलोड करना है मोस्टली लोगों
  then which one to download, mostly people's

[05:15] का जो है 64 बिट सिस्टम होता है तो इसको
  system is 64-bit, so this

[05:17] आप यहां पे क्लिक करके डाउनलोड कर सकते
  you can download by clicking here

[05:19] हैं अगर आप
  if you

[05:29] लिए आएंगे हमें क्या करना है इन सारे के
  will come, what we need to do is tick all these

[05:31] सारे चेक बॉक्सेस को टिक कर देना है जैसे
  checkboxes, as soon as we tick

[05:34] ही टिक करेंगे हमारा विजुअल स्टूडियो कोड
  our Visual Studio Code will be

[05:35] पूरी तरह इंस्टॉल हो जाएगा और इसको अब हम
  fully installed, and we can now

[05:38] फर्स्ट टाइम खोल सकते हैं तो अगर वेबसाइट
  open it for the first time, so if we talk about the website's

[05:40] के फ्रंट एंड की बात करें तो उसके तीन
  front end, it has three

[05:42] पार्ट्स होते हैं सबसे पहले उसमें होता है
  parts, first of all, there is

[05:44] हमारे लिए
  for us

[05:45] एचटीएमएस एस फिर जेएस
  HTML, then JS

[05:59] चाहिए जैसे इस वेबसाइट के अंदर
  is needed, like inside this website

[06:02] एटीएमएल विजुअल स्टूडियो कोड ऊपर लिखा
  HTML, Visual Studio Code is written above

[06:05] होना चाहिए उसके नीचे यह सारी चीजें लिखी होनी चाहिए
  It should be, all these things should be written below it.

[06:08] उसके नीचे ये सारे आइकंस हमें दिखाने हैं और फिर डाउनलोड के लिए हमें बटंस दिखाने हैं
  Below that, we have to show all these icons, and then we have to show buttons for download.

[06:10] अब हो सकता है आप अपनी जब वेबसाइट डिजाइन करें तो उसके अंदर लेआउट कुछ और हो
  Now it's possible that when you design your website, the layout inside it might be different.

[06:15] जैसे अगर हम किसी और वेबसाइट को देखें जैसे google.com पर अगर हम जाते हैं
  For example, if we look at another website, like if we go to google.com,

[06:19] तो यहां पर सर्च बार आना चाहिए यहां पर ये दो बटंस आने चाहिए नीचे हमारे पास लैंग्वेजेस आनी चाहिए
  then the search bar should appear here, these two buttons should appear here, and below that, we should have languages.

[06:26] ऊपर ये सारी की सारी चीजें एटीएमएल ने बताई है कि ये कहां-कहां होनी चाहिए
  Above, all these things have been told by HTML where they should be.

[06:29] तो एटीएमएल क्या करता है एक तरीके से एक स्ट्रक्चर या लेआउट दे देता है
  So what HTML does is, in a way, it provides a structure or layout.

[06:34] एक घर को इमेजिन करिए घर के अंदर कौन सा कमरा कहां पर होगा और एक कमरे के अंदर क्या-क्या चीजें होंगी
  Imagine a house, which room will be where inside the house, and what things will be inside a room.

[06:42] यह सारा का सारा जो पार्ट है वो एचटीएमएल संभालता है
  HTML handles all of this part.

[06:46] उसके बाद सेकंड कंपोनेंट आ जाता है फ्रंट एंड का सीएसएस
  After that comes the second component of the front end, CSS.

[06:48] सीएसएस क्या करता है उस घर के अंदर दीवारों का कलर क्या होगा बटन का शेप क्या होगा साइज क्या होगा बटन का क्या कलर होगा
  What does CSS do? What will be the color of the walls inside that house, what will be the shape of the button, what will be the size, what will be the color of the button?

[06:56] या फिर फ्लोर पे हमने कार बिछाया नहीं बिछाया वो सारी चीजें कंट्रोल करता है
  Or whether we have laid a carpet on the floor or not, it controls all those things.

[07:01] यानी स्टाइल वाली सीएसएस का मतलब होता है कैस्केडिंग
  Meaning, style-related CSS means cascading.

[07:07] स्टाइल शीट्स यह वो कोड का पार्ट होता है जो डिफाइन करता है कि आपका जो वेब पेज है उसका स्टाइल क्या होना चाहिए जैसे वीएस कोड वाली साइट पर अगर जाएं तो यहां पर ये सारे का सारा जो टेक्स्ट लिखा है इसका फॉन्ट क्या होने वाला है इसका फॉन्ट साइज क्या होने वाला है ये सारी चीजें जो है ना सीएसएस कंट्रोल करेगा और तीसरा कंपोनेंट आ जाता है हमारा जावास्क्रिप्ट
  Style sheets, this is the part of the code that defines what the style of your web page should be. For example, if you go to the VS Code site, then here, the font of all this text written here, what its font size will be, all these things will be controlled by CSS. And the third component that comes is our JavaScript.

[07:28] जावास्क्रिप्ट क्या करता है फंक्शनैलिटी डिफाइन करता है जैसे आपने घर बना लिया स्ट्रक्चर बना लिया उसके अंदर कमरे आ गए उसके अंदर स्विचेबल है उसके अंदर फैन है फिर आपने यह भी डाल दिया कि उनका कलर क्या होगा अब फैन का जब आप बटन दबाए तो एक्चुअली हमारा पंखा जो है चलना चाहिए हमारी लाइट जो है ऑन ऑफ होनी चाहिए ये सारी जो फंक्शनैलिटी है जो अंदर का लॉजिक है वो कौन लेकर आता है वो लेकर आता है एक वेबसाइट के अंदर जावास्क्रिप्ट
  What does JavaScript do? It defines functionality. For example, you have built a house, made a structure, rooms have come inside it, there is a switchable there, there is a fan. Then you have also put in what their color will be. Now, when you press the button for the fan, actually our fan should start running, our light should turn on/off. All this functionality, the logic inside, who brings it? JavaScript brings it within a website.

[07:50] तो इस बटन पर क्लिक करने के बाद मेरे लिए कुछ चीजें डाउनलोड हो रही होंगी यह मेरे लिए डिफाइन करेगा मेरा जावास्क्रिप्ट
  So, after clicking this button, some things will be downloading for me. My JavaScript will define this for me.

[08:05] html4 पार्ट्स में डिवाइड किया है जिनको
  HTML is divided into 4 parts, which

[08:07] हम लेवल्स कहेंगे पार्ट्स की जगह लेवल वन
  We will call them levels instead of parts, Level One.

[08:10] लेवल टू लेवल थ्री एंड लेवल प्रो लेवल
  Level Two, Level Three, and Level Pro, Level.

[08:12] प्रो करने के बाद आप ऑलमोस्ट मतलब 100 से भी ऊपर परसेंटेज वाली वो सारी चीजें एक बार देख रहे होंगे सीख रहे होंगे जो किसी भी वेबसाइट को बनाने के लिए जितनी एचटीएमएल आपको आनी चाहिए
  After doing Pro, you will almost be looking at and learning all those things with over 100 percent, whatever HTML you need to know to build any website.

[08:22] अब सबसे पहले बात करते हैं अपने लेवल वन की जिसके अंदर हम डिस्कस करने वाले हैं अबाउट द बेसिक ऑफ html5 मार्कअप लैंग्वेज
  Now, let's first talk about our Level One, within which we are going to discuss about the basics of HTML5 markup language.

[08:40] यानी एक ऐसी लैंग्वेज है जो किसी भी वेबसाइट का जो है मार्कअप बताती है स्ट्रक्चर बताती है लेआउट बताती है
  Meaning, it is a language that tells the markup, structure, and layout of any website.

[08:59] नीचे आनी चाहिए वो सब डिफाइन कर रहे हैं तो आप एटीएमएल का इस्तेमाल कर रहे होंगे जैसे अगर हम इस वेबसाइट की बात करें तो इसको राइट क्लिक करके अपनी स्क्रीन पर या
  Whatever should come below, we are defining all that, so you will be using HTML. For example, if we talk about this website, then by right-clicking it on your screen or

[09:08] तो आप व्यू पेज सोर्स करें व्यू पेज सोर्स करके क्या होगा इस पूरी की पूरी वेबसाइट पे जो एटीएमएल का कोड है तो एक्चुअल में जो वेब पेजेस होते हैं वेबसाइट्स होते हैं वो मैं दिखने में तो बहुत सुंदर से लगते हैं पर उनके जो पीछे का कोड है ना वो कोड एक्चुली उस सुंदरता में कन्वर्ट हो रहा होता है और वह कोड कुछ ऐसा दिखता है और कुछ ऐसा ही कोड हम इस पूरी वीडियो के अंदर लिखने वाले हैं।
  So you view page source. What will happen by viewing the page source? In this entire website, the HTML code, so actually the web pages, the websites, they look very beautiful, but their back-end code, that code is actually converting into that beauty, and that code looks something like this, and we are going to write some such code inside this entire video. Now if you want to see the internal code of any website, then for that you simply have to right-click and go to view page source. So this entire HTML code of google.com will open up for you. Now when you copy this code, you might think that yes, by copying this code, I can recreate the entire website, but logically it doesn't happen like that. Some parts you can copy, you can recreate, but you cannot completely copy a website in this way because it's not just the front end, websites also have a back end, but all those things are extra. For now, we need to understand, by viewing the page source, we can get the...

[09:37] अब अगर आपको किसी भी वेबसाइट का इंटरनल कोड देखना हो तो उसके लिए सिंपली क्या करना है राइट क्लिक करना है और व्यू पेज सोर्स पे जाना है।
  Now if you want to see the internal code of any website, then for that you simply have to right-click and go to view page source.

[09:43] तो ये google.com का पूरा का पूरा जो एचटीएमएल कोड है वो आपके लिए खुलकर आ जाएगा।
  So this entire HTML code of google.com will open up for you.

[09:48] अब जब आप इस कोड को कॉपी करेंगे तो आप सोच सकते हैं कि हां इस कोड को कॉपी करके तो मैं पूरी वेबसाइट रीक्रिएट कर लेता हूं पर लॉजिकली ऐसा नहीं होता है।
  Now when you copy this code, you might think that yes, by copying this code, I can recreate the entire website, but logically it doesn't happen like that.

[09:54] कुछ पार्ट्स आप कॉपी कर सकते हैं रीक्रिएट कर सकते हैं पर कंपलीटली किसी वेबसाइट को इस तरीके से कॉपी नहीं कर सकते क्योंकि सिर्फ फ्रंट एंड नहीं होता वेबसाइट्स में बैक एंड भी होता है पर वो सारी चीजें एक्स्ट्रा हैं अभी के लिए हमें समझना है व्यू पेज सोर्स करके हम किसी भी वेब पेज का जो है
  Some parts you can copy, you can recreate, but you cannot completely copy a website in this way because it's not just the front end, websites also have a back end, but all those things are extra. For now, we need to understand, by viewing the page source, we can get the...

[10:09] एचटीएमएल कोड देख सकते हैं तो राइट क्लिक
  If you can see the HTML code, then right-click

[10:14] करके हम इंस्पेक्ट करके इस कोड को और थोड़े से क्लीन फॉर्मेट में देख सकते हैं
  By inspecting, we can see this code in a slightly cleaner format.

[10:17] प्लस ये जो एरो बटन ऊपर स्क्रीन पर आता है उससे हम देख सकते हैं
  Plus, with the arrow button that appears on the screen above, we can see

[10:22] कि कितना पार्ट कौन से हमारे हिस्से को दिया गया है
  how much part has been allocated to which of our sections.

[10:24] जैसे ये जो इमेज है इसको ये वेबसाइट का इतना डब्बा लेती है
  For example, this image, the website takes up this much space for it.

[10:31] यह जो डाउनलोड वाला बटन है ये इतना पार्ट लेता है
  This download button takes up this much space.

[10:33] ये बड़े वाला बटन इतना पार्ट लेता है
  This larger button takes up this much space.

[10:36] इसके अलावा ये विंडोज वाला जो इमेज है इसका जो पार्ट है वो इतना है
  Besides this, the part for this Windows image is this much.

[10:40] अब ये एक बॉक्स क्यों है यहां पे बॉक्स क्यों हमें बना हुआ दिख रहा है
  Now, why is this a box? Why do we see a box made here?

[10:44] इसके बारे में भी पढ़ेंगे कि ये कौन सा एलिमेंट होता है एचटीएमएल का
  We will also read about this, what element of HTML this is.

[10:46] ये वाला जो बटन है ये एरो बटन इतना सा पार्ट ले रहा है
  This button here, this arrow button is taking up this much space.

[10:49] डाउनलोड वाला बटन उसके बाद जो पूरा का पूरा बड़े वाला बटन है
  The download button, after that, the entire larger button,

[10:53] उसके अंदर हमारे दो-तीन आप लेवल्स देख रहे होंगे कि बाहर वाला लेवल क्या है
  inside it, you might be seeing two or three levels: what is the outer level,

[10:57] उसके अंदर एक और लेवल का मैं डब्बा दिख रहा है
  inside that, I can see another level's box.

[10:59] उसके अंदर एक और डब्बा दिख रहा है
  Inside that, another box is visible.

[11:01] तो ये सारी स्ट्रक्चरिंग होती है एटीएमएल में तो
  So, this is all the structuring in HTML.

[11:14] html5 कर सकते हैं जैसे हमारा जो यह वेबसाइट का पेज है ये हमारे iphoneox.com
  We can do HTML5, like this page of our website, this is our iphoneox.com.

[11:29] दिख रहा होगा अगर हमारे पास ip-tracker.org
  You must be seeing it. If we have ip-tracker.org.

[11:59] भी कोई अच्छी सी सुंदर सी वेबसाइट दिखे जिसके बारे में आप क्यूरियस हो रहे हो यह बनी कैसे है इसका कोड कैसा है तो आप पेज सोर्स पर जा सकते हैं और आप उसको इंस्पेक्ट कर सकते हैं
  If you see any good, beautiful website about which you are curious, how it is made, what its code is like, then you can go to the page source and inspect it.

[12:06] अब बात करें
  Now let's talk.

[12:26] html5 होता है जिसको टैग की हेल्प से आप डिफरेंट डिफरेंट तरीके के आइटम्स जो है वो क्रिएट कर सकते हैं।
  HTML5 is something that with the help of tags you can create different different types of items.

[12:33] क्योंकि अलग-अलग तरीके के टैग्स एजिस्ट करते हैं।
  Because different types of tags exist.

[12:35] अब सबसे पहले क्या करेंगे अपनी फर्स्ट फाइल क्रिएट करेंगे।
  Now first what we will do is create our first file.

[12:59] दे देंगे।
  Will give.

[13:29] हो सकता है अगर आपके में डायरेक्टली रन ना करें तो आपको बंद करके दोबारा से रीस्टार्ट करना पड़े वीएस कोड को बट दैट इज कंप्लीट फाइन
  It is possible that if it does not run directly in yours, you may have to close and restart VS Code, but that is completely fine.

[13:35] अब यहां फाइल वाले ऑप्शन में जाएंगे एंड अपने लिए एक फोल्डर हमने बना ही लिया था एचटीएमएल ट्यूटोरियल जिसको हमने खोला हुआ है
  Now we will go to the file option here and we had already created a folder for ourselves, HTML tutorial, which we have opened.

[13:41] एक नई फाइल बनाएंगे इस नई फाइल को हम नाम देंगे index.htm और ये index.htm हमारे लिए खुलकर आ गई है
  We will create a new file. We will name this new file index.htm and this index.htm has opened up for us.

[13:48] अब ये जो फाइल है हम ऑलरेडी डिस्कस कर चुके हैं कि आप नोटपैड के ऊपर भी बना सकते हैं
  Now this file, we have already discussed that you can also create it on Notepad.

[13:51] पर यहां पर अभी मैं दिखाऊंगी कि क्या-क्या हमें फंक्शनैलिटीज मिल जाती हैं जिसकी जैसे वीएस कोड या किसी और टेक्स्ट एडिटर पर करना बहुत ज्यादा हेल्पफुल होता है एज कंपेयर्ड टू अ नोटपैड
  But here I will show what functionalities we get, which makes it very helpful to do on VS Code or any other text editor compared to Notepad.

[14:03] अब जब भी हम html5 फाइल्स को हम txt.gz
  Now whenever we [deal with] HTML5 files, we [deal with] txt.gz

[14:29] साइट बनती है जो भी एक सॉफ्टवेयर बनता है।
  A site is built, whatever software is built.

[14:31] उसके अंदर सिर्फ फ्रंट एंड नहीं होता मतलब।
  Inside it, it's not just the front end, meaning.

[14:33] सिर्फ html.erb।
  Just html.erb.

[14:49] साइट सर्च करना चाहे google.com तो यह google.com का होम पेज है।
  If you want to search for a site, google.com, then this is google.com's home page.

[14:55] जो हमारे लिए खुल रहा है उसके बाद हम यहां पर कुछ भी जो सर्च कर सकते हैं।
  Which is opening for us, after that we can search anything here.

[14:57] व हम सर्च कर लेंगे और चले जाएंगे किसी और सब पेज पर।
  We will search for it and go to some other sub-page.

[15:01] पर यह है इसका होम पेज।
  But this is its home page.

[15:04] अब होम पेज कैसे डिटेक्ट करता है जब भी सर्वर जो है हमारे ब्राउजर पर रेंडर कर रहा होता है पेज को।
  Now, how does it detect the home page? Whenever the server is rendering the page on our browser.

[15:07] वो डिटेक्ट करता है होम पेज को इंडेक्स नाम से।
  It detects the home page by the name index.

[15:09] यानी जब भी आप अपनी डिफरेंट डिफरेंट एक तो html5 होगी नहीं।
  Meaning, whenever you have different, different, one is html5, it won't be.

[15:11] कोई आप बड़ा सा वेबसाइट बनाएंगे उसके अंदर बहुत सारी html5 होंगी।
  If you build a large website, there will be many html5s inside it.

[15:12] तो सर्वर देखेगा कि इक्सड html5 आपके पास है।
  So the server will see that you have index html5.

[15:15] और फिर उस फाइल को बाय डिफॉल्ट वो आपका होम पेज बना देता है अगर।
  And then by default, it makes that file your home page if.

[15:30] आपने index.htm नाम की फाइल जो है अपनी वेबसाइट के अंदर नहीं क्रिएट की तो आपको सर्वर को अलग से जाके बताना पड़ेगा कि ये वाली दूसरी जो फाइल है ये मेरा होम पेज होने वाली है लेकिन बाय डिफॉल्ट ये मतलब बहुत अच्छा प्रोग्रामर्स का जो है तरीका है प्रोग्रामर्स की टेक्नीक है कि हम हमेशा index.htm के साथ शुरुआत करते हैं उसको अपने होम पेज की तरह ट्रीट करते हुए उसके अंदर अपनी सारी इंपॉर्टेंट चीजें या मेजर चीजें जो है वो लिख रहे होते हैं अब अपने टाइप कर देंगे और जैसे ही आप एक्सक्लेमेशन टाइप करेंगे ना वीएस कोड के अंदर ये दो आपके लिए फीचर्स आएंगे इसमें से सबसे पहला एक्सक्लेमेशन कुछ यहां पे सेटिंग्स वाला आपका टूल आपको दिखाई दे रहा है उसके बाद एट एब्रिवेशन जैसा कुछ लिखा हुआ है अब एट एब्रिवेशन क्या है एमिट क्या है एमिट एक टूल किट है और ये टूल किट बाय डिफॉल्ट वीएस कोड के अंदर आती है ये टूल किट क्या करती है आपको बहुत सारे हेल्पफुल टूल्स देती है जैसे अगर जैसे ही मैंने इस ये एक्सक्लेमेशन मार्क पर क्लिक किया वैसे ही मेरे लिए एक पूरा का पूरा एचटीएमएल का
  If you haven't created the file named index.htm inside your website, then you will have to separately tell the server that this other file is going to be my homepage, but by default, it's a very good programmer's way, a programmer's technique, that we always start with index.htm, treating it as our homepage, and write all our important or major things inside it. Now you will type, and as soon as you type the exclamation mark in VS Code, these two features will appear for you. Among these, the very first exclamation mark, this settings tool is visible to you here. After that, it says something like 'at abbreviation'. Now, what is 'at abbreviation'? What is Emmet? Emmet is a toolkit, and this toolkit comes by default with VS Code. What does this toolkit do? It gives you many helpful tools. For example, as soon as I clicked on this exclamation mark, a complete HTML for me...

[16:31] सैंपल कोड जो है वो खुल गया इस कोड को हम बॉयलर प्लेट कोड कहते हैं।
  The sample code has opened. We call this code boilerplate code.

[16:36] यानी इतना कोड तो आपको बाय डिफॉल्ट चाहिए ही होता है ऑलमोस्ट सब केसेस में जब भी आप एक एचटीएमएल फाइल को लिखने चलते हैं।
  Meaning, you need this much code by default in almost all cases when you start writing an HTML file.

[16:43] ये कोड दिखने में पहली बार में डरावना सा लग रहा होगा पर यह डरावना नहीं है।
  This code might look a bit scary at first glance, but it is not scary.

[16:47] इस कोड को पूरी तरह हम एनालाइज करेंगे इसकी अटमी वगैरह सब कुछ हम छान मारेंगे।
  We will analyze this code completely. We will scrutinize its anatomy and everything else.

[16:52] बस समझने वाली चीज सबसे पहले यह है कि वीएस कोड ने आपके लिए आसान कर दिया कि आपको पूरा कोड खुद से ना याद करना है ना देखना है ना लिखना है।
  The main thing to understand first is that VS Code has made it easy for you, so you don't have to remember, look at, or write the entire code yourself.

[17:00] हमें सिंपली जाना है इस ऑप्शन पर और एमिट पर हमें क्लिक करके पूरा का पूरा हमें बॉयलर प्लेट कोड मिल रहा होगा।
  We simply have to go to this option and click on Emmet, and we will get the entire boilerplate code.

[17:07] अब यह जो फंक्शनैलिटी है ये नोटपैड पर अगर आप कोड लिख रहे होते तो आपको नहीं मिल रही होती।
  Now, this functionality, if you were writing code on Notepad, you would not get it.

[17:11] तो काफी सारी और इंपॉर्टेंट चीजें जो हैं हम सीखेंगे धीरे-धीरे।
  So, we will learn many more important things gradually.

[17:13] अब एक और सवाल आपके दिमाग में आया होगा कि हमने एक एक्सटेंशन इंस्टॉल की थी लाइट सर्वर उसको हमने क्यों इंस्टॉल किया।
  Now, another question might have come to your mind: why did we install an extension called Live Server?

[17:20] जैसे ही हम इस एटीएमएल को खोलेंगे ना हम इधर नीचे जाकर गो लाइव में जा सकते हैं और हमारे लिए क्या होगा हमारा पूरा एचटीएमएल पेज हमारे लिए खुल जाएगा।
  As soon as we open this HTML, we can go down here to Go Live, and what will happen is our entire HTML page will open for us.

[17:31] अभी के लिए हमने एचटीएमएल में कुछ नहीं
  For now, we haven't done anything in HTML.

[17:32] लिखा इसलिए हमारा पेज हमें खाली लग रहा है।
  So it's written, our page appears empty to us.

[17:35] अगर मान लीजिए मैं यहां पे सैंपल के तौर पर कुछ भी लिख दूं अभी के लिए ध्यान नहीं देना है कि ये क्या मैंने लिखा हुआ है।
  Suppose I write anything here as a sample for now, don't pay attention to what I have written.

[17:39] इसका क्या मतलब है सिर्फ देखना है हेलो वर्ल्ड।
  What does it mean, just look, Hello World.

[17:43] इसको कर लेती हूं सेव और जैसे ही मैं वापस गई मेरे लिए हेलो वर्ल्ड मेरी स्क्रीन पर प्रिंट होकर आ गया।
  I'll save this, and as soon as I went back, Hello World was printed on my screen.

[17:49] हेलो वर्ल्ड बाय डिफॉल्ट वो स्टेटमेंट होती है जो कोई भी आप नई प्रोग्रामिंग लैंग्वेज कुछ भी सीख रहे होते हैं तो कोडिंग के अंदर आपको लिखनी पड़ती है।
  Hello World is by default that statement which you have to write inside coding when you are learning any new programming language or anything.

[17:56] एटलीस्ट मैं तो लिखना ज्यादा पसंद करती हूं तो हेलो वर्ल्ड मेरी स्क्रीन पर आ गया मुझे कुछ रिफ्रेश या कुछ और नहीं करना पड़ा।
  At least I prefer to write it, so Hello World appeared on my screen, I didn't have to refresh or do anything else.

[18:02] तो लाइव सर्वर वो एक्सटेंशन है जिसकी मदद से बार-बार आपको सेव करके रिफ्रेश या दोबारा से ओपन नहीं करना पड़ेगा अपना वेब पेज।
  So Live Server is that extension with the help of which you won't have to repeatedly save, refresh, or reopen your web page.

[18:09] आप डायरेक्टली यहां पर कोड लिखेंगे सेव करेंगे वापस से अपने वेब पेज पर जाएंगे जो खुला है और आपके लिए सारा का सारा एचटीएमएल का जो आउटपुट है वो डिस्प्ले होकर हमें दिख जाएगा।
  You will directly write code here, save it, go back to your web page which is open, and all the HTML output will be displayed for you.

[18:19] अब ऊपर आप नोटिस कर रहे होंगे कि यह जो है सर्वर हमारा खुल गया है और एक index.htm नाम की फाइल जो है खुली है।
  Now you must be noticing above that this server has opened for us and a file named index.htm is open.

[18:27] अब फॉर एग्जांपल मैं इस फाइल का जो है नाम चेंज कर दूं इसको हम कर लेते हैं रिनेम और इस फाइल को कुछ और नाम दे।
  Now, for example, I change the name of this file, we rename it and give this file some other name.

[18:34] देते हैं इसको नाम दे देते हैं हम इंडेक्स
  We give it a name, we give it the index

[18:36] टू
  Two

[18:58] बैग्स क्या होते हैं एटीएमएल के अंदर एक कंटेनर होता है
  What are bags? Inside HTML there is a container.

[19:01] कंटेनर यानी जैसे हमारी किचन के अंदर कुछ डब्बे रखे होते हैं
  A container, meaning like we have some boxes kept inside our kitchen

[19:04] जिसके अंदर कुछ-कुछ मसाले होते हैं कहीं चीनी रखी होती है कहीं नमक रखा होता है
  Inside which there are some spices, somewhere sugar is kept, somewhere salt is kept.

[19:08] तो वो डब्बे हमारे कंटेनर्स होते हैं जिसके अंदर कुछ कंटेंट होता है यानी कुछ सामान होता है
  So those boxes are our containers, inside which there is some content, meaning some material.

[19:13] वैसे ही जब भी हमें वेब पेज के ऊपर अपनी वेबसाइट के ऊपर कुछ सामान डालना होता है
  Similarly, whenever we have to put some material on a web page, on our website,

[19:18] फिर चाहे वो एक बटन हो गया फिर चाहे वो एक पैराग्राफ हो गया हो कोई हेडिंग हो गई हो
  whether it is a button, or a paragraph, or a heading,

[19:22] तो उसको हम एक कंटेनर के अंदर डालते हैं
  then we put it inside a container.

[19:24] और इस कंटेनर को हम कहते हैं एटीएमएल टैग तो
  And this container we call an HTML tag.

[19:58] तरीके का सिस्टम रहता है इसको समझने के लिए हम एक पैराग्राफ टैग का एग्जांपल लेंगे।
  There is a system of this kind, to understand it we will take an example of a paragraph tag.

[20:02] जब भी हमें एक वेबसाइट के ऊपर कोई पैराग्राफ दिखाना होता है तो हम इस तरीके की कोई स्टेटमेंट लिख रहे होते हैं।
  Whenever we have to show a paragraph on a website, we write a statement of this kind.

[20:09] इसमें यह जो फर्स्ट इनिशियल चीज लिखी है यानी ये एंगुलर ब्रैकेट्स और इसके अंदर जो है p इसका मतलब होता है पैराग्राफ टैग का ओपनिंग टैग।
  In this, this first initial thing written, meaning these angular brackets and inside them 'p', it means the opening tag of a paragraph tag.

[20:18] इसको कहते हैं ओपनिंग टैग और इसको कहते हैं क्लोजिंग टैग।
  This is called the opening tag and this is called the closing tag.

[20:24] क्लोजिंग टैग के अंदर आपको ये स्लैश दिख रहा होगा एंगुलर ब्रैकेट्स के बीच में और उसके बाद अपने टैग का नाम।
  Inside the closing tag, you will see this slash between the angular brackets and then the name of your tag.

[20:31] इस टैग के अंदर जो हम लेटर लिख रहे हैं वह पी है यहां पर भी पी है यह है ओपनिंग टैग यह है हमारा क्लोजिंग टैग।
  The letter we are writing inside this tag is 'p', here too it is 'p', this is the opening tag, this is our closing tag.

[20:36] अब इन दोनों टैग्स के अंदर हम कंटेंट लिखेंगे यानी एक्चुअल पैराग्राफ लिखेंगे।
  Now, inside these two tags, we will write the content, meaning we will write the actual paragraph.

[20:40] पैराग्राफ के अंदर हम कोई भी लाइंस लिख सकते हैं जैसे दिस इज़ अ पैराग्राफ या फिर हेलो वर्ल्ड आई एम अ लर्निंग एटीएमएल टुडे।
  Inside the paragraph, we can write any lines, like 'This is a paragraph' or 'Hello world, I am learning HTML today'.

[20:48] इस तरीके का कुछ कंटेंट होता है और जब हम इस पूरी की पूरी चीज को कंसीडर करते हैं यानी ओपनिंग टैग कंटेंट और क्लोजिंग टैग।
  There is some content of this kind, and when we consider this entire thing, meaning the opening tag, content, and closing tag.

[20:56] इस पूरे के पूरे मटेरियल को हम एक
  This entire material, we call it a

[21:29] अब एक और चीज आपने नोटिस की

[21:32] होगी कि जैसे ही मैंने यह एंगुलर ब्रैकेट

[21:35] p और क्लोजिंग ब्रैकेट टाइप किया तो मेरे

[21:38] लिए ऑटोमेटिक जो है ओपनिंग टैग के साथ

[21:41] मेरा क्लोजिंग टैग भी आ गया तो इस तरीके

[21:43] की भी फंक्शनालिस कोड जैसे टेक्स्ट

[21:45] एडिटर्स जो होते हैं हमें एडिशनल देते हैं

[21:47] इसीलिए उनको यूज़ करना ज्यादा इंपॉर्टेंट

[21:49] रहता है तो बार-बार हमें क्लोजिंग टैग्स

[21:50] लिखने नहीं पड़ते तो एटीएमएल टैग को हमने

[21:53] समझा कि एक कंटेनर होता है जिसके अंदर हम

[21:55] कुछ मटेरियल डाल रहे होते हैं यानी वेब

[21:57] पेज के ऊपर जो भी कुछ हमें डलवाना है उसको

[21:59] एक टैग के अंदर लिख दें अब अपने बेसिक

[22:19] html4 यूज़ कर रहे हो जो भी ब्राउजर आप

[22:21] यूज़ कर रहे हैं ब्राउज़र क्या करता है

[22:23] आपके

[22:28] से मेरे कम ने क्या किया इस पूरे के पूरे

[22:46] html-pdf बताता है कि जो हम डॉक्यूमेंट

[22:49] लिख रहे हैं इसका टाइप क्या है इसका टाइप

[22:51] है

[22:59] जब हम इस तरीके से लिखते हैं तो इसका मतलब

[23:01] है हम html5 का इस्तेमाल कर रहे हैं तो

[23:04] वर्जन नंबर फाइव जो है हम इस्तेमाल कर रहे

[23:06] हैं इस डॉक्यूमेंट को लिखने के लिए उसके

[23:07] बाद सेकंड चीज हम देख रहे होते हैं हमारे

[23:09] लिए एक

[23:11] एटीएमएल टैग आता है इसमें भी हम देखेंगे

[23:14] कि एटीएमएल का ओपनिंग और एटीएमएल टैग आया

[23:17] है ये टैग हमें बताता है कि दिस इज द रूट

[23:20] ऑफ एन एटीएमएल डॉक्यूमेंट जैसे

[23:28] अब उसके अंदर आप पैराग्राफ डाल दें कहीं

[23:31] बटन डाल दें कहीं आप कोई हेडिंग डाल दें

[23:33] वो सारे सब एलिमेंट्स हैं यानी बड़ा जो

[23:36] हमारा पूरा का पूरा वेब पेज होता है वो

[23:37] खुद में एक एलिमेंट होता है उसके अंदर एक

[23:39] टैग होता है उसके अंदर बहुत सारा कंटेंट

[23:41] होता है कंटेंट किस तरीके से होता है

[23:43] एचटीएमएल टैग के अंदर खुद के बहुत सारे

[23:45] टैग्स होते हैं वो सारा एचटीएमएल पेज का

[23:47] कंटेंट है तो एटीएमएल को हम रूट एलिमेंट

[23:51] कहते हैं क्योंकि यह सबसे बड़ा एलिमेंट है

[23:53] और सबसे शुरुआती एलिमेंट है उसके बाद

[23:58] टैग और एक बॉडी टैग अब हेड क्या करता है

[24:02] हेड वो चीजें बताता है हमारे एचटीएमएल

[24:04] डॉक्यूमेंट के लिए जो हमें वेब पेज पर

[24:06] डिस्प्ले नहीं करनी जो बस हमारे कोड को

[24:08] पता होनी चाहिए और बॉडी टैग बताता है वो

[24:11] चीजें जो एक्चुअली हमारे पेज पर डिस्प्ले

[24:13] होती हैं जैसे हेड के अंदर हमारे पास कुछ

[24:15] मेटा इंफॉर्मेशन होती है मेटा इंफॉर्मेशन

[24:17] यानी डेटा अबाउट डेटा वो इंफॉर्मेशन जो

[24:21] यूजफुल है पर हमें अपने पेज के ऊपर उसको

[24:23] डिस्प्ले नहीं कराना जैसे हमने यहां पे

[24:25] नेम व्यू पोर्ट लिखा हुआ है कंटेंट विड

[24:28] डिवा स्ट ली हुई है यह व्यू पोर्ट वाली जो

[24:30] चीज है यह बेसिकली बताती है कि आपकी जो

[24:33] वेबसाइट है वो रिस्पांसिस होनी चाहिए यानी

[24:35] अलग-अलग डिवाइसेज जिनकी हमने बात की थी

[24:37] अभी आपकी जो वेबसाइट है वो i एयर पर भी

[24:40] अच्छी दिखे आपकी जो वेबसाइट है वो हमारे

[24:42] पिक्ल 5 पर भी अच्छी दिखे हमारी जो

[24:46] वेबसाइट है वो हमारे

[24:58] पे भी अच्छी दिखें और बड़ी स्क्रीन पे भी

[25:00] जैसे आजकल लोग जो है बहुत ज्यादा अपने फस

[25:02] पे वेबसाइट्स खोलते हैं तो आजकल फोन के

[25:04] हिसाब से वेबसाइट काफी ज्यादा डिजाइन होती

[25:06] है लैपटॉप के हिसाब से डिजाइन होती है तो

[25:08] उस तरीके से आपको देखना पड़ता है कि आप

[25:10] अलग-अलग

[25:11] डिवाइसेटी डिजाइन कर रहे हैं इस चीज को हम

[25:14] रेस्पॉन्सिव कहते हैं कि हमारी वेबसाइट

[25:16] रिस्पांसिस कितनी है कितना अच्छा रिस्पांस

[25:18] देती है जैसे ही हम स्क्रीन का साइज चेंज

[25:21] कर देते हैं एस्पेक्ट रेशो चेंज कर देते

[25:23] हैं ये जो यहां पे आपको 412 दिखाई दे रहा

[25:26] होगा 914 दिखाई दे रहा होगा यह है

[25:28] एस्पेक्ट रेशो यानी दिखाता है कि हमारा

[25:30] स्क्रीन का साइज कितना होने वाला है तो

[25:33] यहां पर यह जो व्यू पोर्ट वाली स्टेटमेंट

[25:35] है यह वाली स्टेटमेंट ये बेसिकली हमारे

[25:37] एचटीएमएल पेज को रिस्पांसिस होना है यह

[25:39] बता रही है तो ये सारी जो इंफॉर्मेशन है

[25:41] ये सारी काम की इंफॉर्मेशन है पर ये हमारे

[25:43] वेब पेज पर डिस्प्ले नहीं होंगी तो हेड के

[25:45] अंदर वो सारा पार्ट आता है जो वेब पेज पर

[25:47] डिस्प्ले नहीं होगा यहां पे हम अपने

[25:48] एचटीएमएल डॉक्यूमेंट को एक टाइटल दे सकते

[25:50] हैं जैसे इसको हम टाइटल दे सकते हैं माय

[25:55] फर्स्ट पेज

[25:58] तो यहां पे हम बात करें तो ये टाइटल भी

[26:00] खुद में एक टैग है जिसके अंदर टाइटल जो है

[26:03] हम लिखते हैं उसके बाद आ जाती है हमारी

[26:05] बॉडी हम मोस्टली इस वीडियो के अंदर बॉडी

[26:08] के अंदर के सारे के सारे टैग्स को डिस्कस

[26:10] कर रहे होंगे बॉडी टैग के अंदर वो सारी

[26:12] चीजें आती हैं जो डाटा को रेंडर कराने में

[26:15] हेल्प करती है ब्राउजर के ऊपर यानी

[26:17] क्या-क्या डाटा मुझे वेब पेज पे दिखाना है

[26:18] वो सारा बॉडी के अंदर लिख रहे होते हैं

[26:20] जैसे हमने यहां पर पैराग्राफ टैग बनाया

[26:22] उसके अंदर हमने लिख दिया दिस इज अ

[26:23] पैराग्राफ और वो सारा का सारा जो चीज है

[26:26] हमारे वेब पेज पर एक्चुअली जाकर हम हमारे

[26:28] लिए डिस्प्ले हुआ तो जो चीज हमें डिस्प्ले

[26:30] करानी है वेब पेज के ऊपर उसको लिख देंगे

[26:32] अपने बॉडी टैग के अंदर तो ये कुछ फॉर्मेट

[26:35] रहता है किसी भी बेसिक एचटीएमएल पेज को

[26:37] लिखने का जब भी हम शुरुआत करेंगे ये सारी

[26:39] चीजें हमें लिखनी चाहिए अब इनमें से

[26:41] कुछ-कुछ ऐसी चीजें हैं जिनको आप हटा देंगे

[26:43] तो भी आपका कोड चल जाएगा पर वो एक ऑप्टिमम

[26:45] कोड नहीं होगा उस तरीके से कोड लिखना कहीं

[26:47] भी एडवाइजेबल नहीं होता अगर आपको

[26:49] प्रोफेशनली अच्छा करना है या बहुत अच्छे

[26:51] प्रोजेक्ट्स बनाने हैं जिनको रेजूम के

[26:52] अंदर आप डालने वाले हैं और रिक्रूटर चेक

[26:54] कर सकता है कोड को तो फिर उस हिसाब से

[26:56] आपको प्रॉपर्ली अपना कोड लिखना खना चाहिए

[26:58] तो ये सारी चीजें मेंशन करनी है अपने कोड

[27:00] के अंदर और इन सारी चीजों का मतलब जो है

[27:03] एक तो एचटीएमएल की फायदा यह होता है कि

[27:05] किसी भी टैग का नाम देखकर आपको याद आ जाता

[27:07] है कि हां ये इस चीज का टैग था तो इतनी

[27:09] ज्यादा चीजें हमें याद नहीं करनी पड़ती

[27:11] प्लस ये सारे के सारे नोट्स नीचे आपको

[27:13] डिस्क्रिप्शन बॉक्स में मिल जाएंगे तो फिर

[27:15] कुछ ऐसे याद एज सच करने की जरूरत नहीं है

[27:17] प्रैक्टिस के साथ-साथ चीजें जो हैं अपने

[27:19] दिमाग में ऑटोमेटिक बैठती जाएंगी कुछ भी

[27:22] कहीं भी प्रॉब्लम आती है अगर एटीएमएल को

[27:24] सीखने में तो ऑनलाइन बहुत सारे रिसोर्सेस

[27:26] अवेलेबल हैं और नोट्स तो आप कभी भी खोल कर

[27:29] देख सकते हैं रिवीजन के लिए अब विजुअल

[27:31] स्टूडियो कोड का एक और छोटा सा फायदा होता

[27:33] है कि किसी भी चीज के बारे में मतलब इस

[27:35] डॉक्यूमेंट में कुछ भी लिखा है उसके बारे

[27:36] में आपको और जानकारी चाहिए तो आप सिंपली

[27:39] क्या कर सकते हैं वहां पर जाकर आप क्लिक

[27:41] करेंगे ना तो एमडीएन का एक लिंक आ जाएगा

[27:42] एमडीएन रेफरेंस आ जाएगी एमडीएन क्या है

[27:45] मजला की तरफ से एक डेवलपर्स गाइड है पूरा

[27:48] का पूरा उसमें डॉक्यूमेंटेशन है एटीएमएल

[27:50] का सीएसएस का बाकी चीजों का तो यहां पे

[27:52] जैसे हमने हेड पर क्लिक किया तो द

[27:54] डॉक्यूमेंट मेटा डाटा हेडर एलिमेंट ये

[27:56] सारी की सारी एक्स्ट्रा इंफॉर्मेशन आ

[27:58] जिससे हम क्या कर सकते हैं और खुद से आगे

[28:01] बढ़ के चीजें सीख सकते हैं जैसे इसने बता

[28:03] दिया कि कौन-कौन से ब्राउजर्स में हेड जो

[28:05] है हम लिख सकते हैं कौन-कौन से वर्जंस के

[28:07] लिए लिखा जा सकता है ब्राउजर कंपैटिबिलिटी

[28:09] बता दी तो उसके यूसेजेस एग्जांपल्स काफी

[28:12] सारी चीजें आपको एडीन पे मिल जाएगी तो

[28:14] साथ-साथ मैं एडवाइस करूंगी कि आप एक बार

[28:17] ट्यूटोरियल खत्म कर लेते हैं उसके बाद जब

[28:19] खुद से प्रोजेक्ट करने जाते हैं ना तो

[28:20] साथ-साथ थोड़ी-थोड़ी चीजें हमें एक्सप्लोर

[28:22] जरूर करनी है नेक्स्ट हम बात करते हैं कुछ

[28:24] क्विक पॉइंट्स की इसमें सबसे पहला पॉइंट

[28:27] है कि

[28:28] इज पेरेंट ऑफ हेड एंड बॉडी टैग अब यहां पे

[28:30] हमने एक हेड टैग देखा और एक बॉडी टैग देखा

[28:33] ये बॉडी वाला पार्ट है ऊपर हेड वाला पार्ट

[28:35] है हेड और बॉडी इन दोनों जो टैग्स हैं

[28:38] उनका पेरेंट जो टैग होता है वो हमारा

[28:40] एचटीएमएल टैग होता है तो बाय डिफॉल्ट हेड

[28:43] और बॉडी जो टैग हैं वो हमारे एचटीएमएल टैग

[28:45] के चिल्ड्रन हो जाते हैं और एक दूसरे के

[28:48] सिबलिंग हो जाते हैं आई होप ये

[28:49] अंडरस्टैंडिंग थोड़ी सी क्लियर होगी ये बस

[28:51] बताने के लिए है इसका कोडिंग पर कोई फर्क

[28:53] हमारा पढ़ने नहीं वाला मोस्ट ऑफ द

[28:58] विद कंटेंट इन बिटवीन मोस्ट ऑफ जो हमारे

[29:00] एचटीएमएल के डॉक्यूमेंट होते हैं जैसे हम

[29:02] पैराग्राफ की भी बात कर ले तो उसके अंदर

[29:05] हमारे पास कुछ कंटेंट होता है और एक

[29:07] ओपनिंग टैग होता है एक क्लोजिंग टैग होता

[29:09] है ऐसे भी टैग्स एजिस्ट करते हैं जिसमें

[29:11] ओपनिंग क्लोजिंग अलग-अलग नहीं होता सिर्फ

[29:13] एक सिंगल चीज आपको लिखनी पड़ती है जैसे

[29:16] नेक्स्ट लाइन के लिए हम एक बीआर टैग का

[29:18] इस्तेमाल कर रहे होते हैं और यह पूरा का

[29:20] पूरा बीआर जो है ब्रेक लाइन टैग ये इतना

[29:23] ही लिखा जाता है इसके अंदर ना ओपनिंग होती

[29:25] है ना क्लोजिंग होती है बस इतना ही होता

[29:27] है नेक्स्ट है सम टैग्स हैव नो कंटेंट इन

[29:30] बिटवीन जैसे हमारा बर टैग हो गया वी कैन

[29:32] यूज़ इंस्पेक्ट एलिमेंट या व्यू पेज सोर्स

[29:34] टू एडिट

[29:45] html4 तो क्या हुआ वो सारा का सारा कोड जो

[29:48] हमने अपनी फाइल में लिखा हुआ था वोह सारा

[29:50] यहां पर लिख कर आ गया यह वाला जो पार्ट है

[29:52] इसको अभी के लिए इग्नोर करना है क्योंकि

[29:54] यह सारा पार्ट यह नीचे आप जो स्क्रिप्ट

[29:57] टैग के साथ पार्ट देख रहे होंगे यह सारा

[29:59] हमारे लाइव सर्वर ने हमारे लिए क्रिएट

[30:01] किया है तो इसको नहीं देखना अभी देखना है

[30:03] सिर्फ अपने इतने एचटीएमएल वाले पार्ट को

[30:06] तो इसको हमने फाइल के अंदर लिखा था और यही

[30:09] सेम कोड हमारे लिए व्यू पेज सोर्स से खुल

[30:11] गया तो इसमें हम कुछ चेंजेज चाहे तो यहां

[30:14] पर तो नहीं कर सकते लेकिन हम क्या कर सकते

[30:17] हैं इस पेज को कर सकते हैं इंस्पेक्ट

[30:20] इंस्पेक्ट करने के बाद इसका रेशो जो है

[30:23] चेंज कर लेते हैं यह पूरा पार्ट हमारे लिए

[30:26] खुल गया है अब कोड के अंदर हम चाहे तो

[30:29] एडिशनल चीजें ऐड कर सकते हैं जैसे यहां पर

[30:31] ऊपर हम एक और पैराग्राफ डाल सकते हैं न्यू

[30:37] पैरा

[30:39] ग्राफ और इसमें भी हम अगर इसको कर ले सेव

[30:43] तो ये न्यू पैराग्राफ यहां पे आ गया तो इस

[30:46] तरीके से हम ब्राउजर पे जाके एक्चुअली

[30:48] अपना पूरा का पूरा एचटीएमएल जो लेआउट है

[30:50] कंटेंट है उसको चेंज कर सकते हैं जो यहां

[30:53] पर चेंजेज नहीं लेकर आएगा मतलब एक्चुअल

[30:55] कोड में चेंज नहीं होगा पर हमारे ब्राउजर

[30:57] पे हो जाएगा जैसे

[31:11] google.in एक्डी पडी करके कुछ इमेज है पर

[31:15] यहां पे यह जो

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

[31:30] पे

[31:32] google3 एमए पेज के अंदर आप कुछ भी जाकर

[31:35] चेंज कर सकते हैं पर इसमें आप सवाल

[31:37] उठाएंगे कि दीदी फिर तो इंटरनेट चलेगा

[31:39] कैसे मतलब इंटरनेट पे कोई भी किसी की भी

[31:41] वेबसाइट पर जाकर कुछ भी चेंज कर सकता है

[31:43] तो ऐसा नहीं होता वेबसाइट के अंदर सिर्फ

[31:45] एचटीएमएल नहीं होता और भी सारे कंपोनेंट्स

[31:46] होते हैं और ये जो आपने चेंज किया होगा ये

[31:48] नोटिस किया होगा ये हमने सिर्फ ब्राउजर पे

[31:50] किया है हम अपने ओरिजिनल कोड में जाएं तो

[31:52] वहां पर ऐसा कुछ ऐड नहीं होता वैसे ही

[31:58] सिर्फ मेरे कंप्यूटर पर वोह कैसा दिख रहा

[32:00] है उसको मैं चेंज कर पा रही हूं तो इस

[32:02] तरीके की जो चीजें हैं उनसे आप फन कर सकते

[32:04] हैं मतलब काफी सारा अब नेक्स्ट चीज की बात

[32:07] करते हैं कॉमेंट्स इन एचटीएमएल एटीएमएल के

[32:09] अंदर हम कॉमेंट्स कैसे लिखते हैं सबसे

[32:11] पहले बात करते हैं कॉमेंट्स क्या होते हैं

[32:12] जब भी हमें कोड के अंदर कुछ ऐसा पार्ट

[32:14] लिखना होता है जो हम नहीं चाहते कि हमारे

[32:16] कोड का पार्ट बने जैसे इंग्लिश में हमें

[32:18] कोई लाइन लिखनी है कि दिस इज माय फर्स्ट

[32:20] कोड एंड आई एम वेरी नर्वस वाइल राइटिंग इट

[32:22] ऐसा सा हमें कुछ लिखना है कि अ ये जो है

[32:25] हम एक बॉडी टैग डिफाइन कर रहे हैं तो दिस

[32:28] इज अ बॉडी टैग इस तरीके की चीज हम अगर

[32:31] लिखेंगे तो ये जो है ये इसको सेव करने के

[32:35] बाद हम अपने पेज पर जाते हैं तो ये दिस इज

[32:39] अ बॉडी टैग हमारे लिए हमारी स्क्रीन पर आ

[32:41] गया है पर हम नहीं चाहते थे कि ये हमारी

[32:43] स्क्रीन पर आए हम चाहते थे बस हमारे कोड

[32:45] में अगर कोई और बंदा हमारा कोड पढ़ रहा है

[32:47] मेरा कोई दोस्त पढ़ रहा है या कोई और

[32:49] प्रोजेक्ट का पार्टनर पढ़ रहा है तो सिर्फ

[32:51] उसको ही ये पार्ट दिखाई दे तो ऐसी सिचुएशन

[32:53] में हमें कॉमेंट्स की जरूरत पड़ती है

[32:55] कॉमेंट्स हमारी फाइल का वो पार्ट होते हैं

[32:57] जो कोड नहीं होता पर इंग्लिश होता है मतलब

[32:59] अगर आपका टेक्स्ट एडिटर जो है हिंदी में

[33:01] कॉमेंट्स अलाव कर रहा है तो आप हिंदी में

[33:03] भी कॉमेंट्स लिख सकते हैं पर कॉमेंट्स की

[33:05] मेन बात होती है एक ऐसा हिस्सा होता है

[33:06] हमारी फाइल का जो कोड में नहीं आता ये

[33:09] नॉर्मल हिंदी में हम इसको लाते हैं और

[33:11] इसको लिखने का फॉर्मेट रहता है कि आप

[33:12] लिखेंगे एक एंगुलर ब्रैकेट उसके बाद हमारा

[33:16] एक्सक्लेमेशन मार्क एंड हाइफ

[33:19] हाइफ और बाद में लिखेंगे हाइफ हाइफ एंड

[33:22] क्लोजिंग एंगुलर ब्रैकेट तो इसके अंदर आप

[33:25] जो भी पार्ट लिख देंगे ये सारा जो ग्रीन

[33:27] से आ रहा है यह सारा का सारा एक कॉमेंट है

[33:29] यानी यह वाला पार्ट अब अगर हम इसको सेव कर

[33:31] दें तो अब हमारी वेबसाइट के ऊपर अब हमारे

[33:34] वेब पेज के ऊपर यह सारा पार्ट हमें नहीं

[33:36] दिखेगा तो इस तरीके का कुछ फॉर्मेट रहता

[33:39] है हमारे कॉमेंट्स को हमारे कोड में लिखने

[33:41] का जैसे ऊपर अगर हम लिखना चाहे दिस इज माय

[33:46] फर्स्ट एटीएमएल कोड इसको कर लेते हैं सेव

[33:51] और इसको हमने रिफ्रेश किया तो वो लाइन

[33:53] हमारे लिए डिस्प्ले नहीं हुई क्योंकि वो

[33:54] ब्राउजर के लिए नहीं थी वो लाइन सिर्फ उन

[33:56] डेवलपर्स के लिए जो हमारा कोड पढ़ रहे हैं

[33:58] या इनफैक्ट हमारे लिए कभी-कभी प्रोजेक्ट्स

[34:01] के अंदर या कंपनीज के अंदर जाकर आप बहुत

[34:03] सारा कोड लिख लेते हैं उस कोड में ना

[34:04] चीजें कन्फ्यूजिंग हो जाती है कि यार यह

[34:06] वाला पार्ट किस लिए था यह वाला पार्ट किस

[34:08] लिए था यह वाला एलिमेंट कहां पर है वो

[34:09] वाली चीजें और कोई और भी आपका कोड पर आकर

[34:12] सेम कोड पर आप काम करें तो कंफ्यूजन से

[34:14] बचने के लिए हम बहुत बार कॉमेंट्स लिखते

[34:16] हैं ताकि फायदा हो हमें पढ़ने में कोड को

[34:18] तो कॉमेंट्स हमारे कोड का वो पार्ट होते

[34:20] हैं जो पार्स नहीं होता पार्स यानी हमारा

[34:23] ब्राउजर उसको रेंडर नहीं करता नेक्स्ट बात

[34:26] करेंगे कि एचटीएमएल इ इ नॉट केस सेंसिटिव

[34:29] यानी कुछ-कुछ प्रोग्रामिंग लैंग्वेजेस

[34:30] होती हैं जैसे आप सी का एग्जांपल ले लें

[34:32] c+ प का ले ले पाइथन का ले लें जावा का ले

[34:35] लें ये सारी जो प्रोग्रामिंग लैंग्वेजेस

[34:37] है ना ये के सेंसिटिव है इसके अंदर कैपिटल

[34:39] ए और स्मल ए अलग-अलग माना जाता है पर

[34:41] एचटीएमएल के अंदर कैपिटल ए और स्मल ए सेम

[34:44] होता है जैसे अगर हमने ये टैग लिखा हुआ है

[34:46] हेड इसके अंदर हम इसको कैपिटल एच ई ए डी

[34:50] भी कर दें तो भी हमारे कोड में कोई एरर

[34:52] नहीं आएगा अगर हम यहां पर पैराग्राफ लिखना

[34:55] चाहे और हम इसको लिख दें कैपिटल p तो ये

[34:58] भी एक वैलिड टैग है और स्मल p वाला टैग और

[35:02] कैपिटल p वाला टैग दोनों की वैल्यू जो है

[35:04] बिल्कुल सेम मानी जाएगी तो अपने टैग्स को

[35:06] अगर हम कैपिटल में लिखते हैं तो कोई

[35:08] डिफरेंस नहीं आता हमारे कोड पर क्योंकि

[35:27] ब्राउजर के ऊपर ही एडिट कैसे कर सकते हैं

[35:30] अपने इंस्पेक्ट को खोलकर हमने यह सीख लिया

[35:33] पेज सोर्स से हमें पूरा का पूरा

[35:56] html.erb नाम हम देंगे पोर्टफोलियो

[35:59] पोर्टफोलियो के अंदर सबसे पहले index.htm

[36:01] नाम की एक बेसिक फाइल हमें क्रिएट करनी है

[36:04] उसके अंदर बॉयलर प्लेट कोड हमें लेके आना

[36:06] है उसके बाद उसमें बस हेलो वर्ल्ड हमें

[36:08] प्रिंट करना है या सिर्फ पोर्टफोलियो

[36:10] प्रिंट करना है अभी के लिए कुछ एक्स्ट्रा

[36:12] चीजें नहीं करनी इतना पार्ट हमें कर लेना

[36:14] है अपने प्रोजेक्ट वन के लिए आई होप कि आप

[36:16] यहां पर वीडियो को पॉज करेंगे और यह वाला

[36:18] पार्ट खुद से करके देखेंगे कोई भी इशू आता

[36:20] है तो दोबारा से हल्का सा पीछे रिवाइंड कर

[36:23] लेना है उस वाले पार्ट को हल्का सा और देख

[36:25] लेना है नोट्स को और थोड़ा सा रेफर कर

[36:26] लेना है और कोई भी प्रॉब्लम आए तो आप नीचे

[36:28] कमेंट कर सकते हैं और मुझे कमेंट करके

[36:31] जरूर बताना है कि आपने यह वाला जो पार्ट

[36:33] वन है प्रोजेक्ट का वो कंप्लीट किया है या

[36:35] नहीं किया अब सेकंड हम बढ़ते हैं अपने

[36:37] लेवल टू की तरफ लेवल टू के अंदर हम

[36:39] डिस्कवर करने वाले हैं और ज्यादा डिटेल

[36:42] में टैग्स के बारे में और सबसे पहले जो हम

[36:45] बेसिक्स ऑफ एचटीएमएल टैग्स में पढ़ेंगे वो

[36:47] है हमारे एचटीएमएल एट्रियो एचटीएमएल के

[36:50] अंदर टैग्स के साथ-साथ

[36:52] एट्रिया कोई प्रॉपर्टी एसोसिएटेड होती है

[36:55] जैसे एट्रिक्स आर यूज्ड टू ऐड मोर

[36:56] इंफॉर्मेशन टू द टैग अब जैसे पैराग्राफ

[36:59] टैग को हमने देख लिया ये ओपनिंग टैग है ये

[37:02] क्लोजिंग टैग है इन्होंने हमें यह तो बता

[37:04] दिया कि हम पैराग्राफ लिखने वाले हैं पर

[37:05] मान लीजिए हमें और एक्स्ट्रा इंफॉर्मेशन

[37:07] डालनी है जैसे इस पैराग्राफ में जो हम

[37:09] चीजें लिखने वाले हैं उसका फॉन्ट साइज

[37:11] क्या होने वाला है भाई हमारे टेक्स्ट का

[37:13] कलर क्या होने वाला है रेड होने वाला है

[37:14] या ब्लू होने वाला है वैसे तो ये चीजें

[37:16] हमें सीएसएस से डिफाइन करनी चाहिए पर इनको

[37:18] हम एचटीएमएल की सहायता से भी डिफाइन कर

[37:20] देते हैं लद यहां नहीं कर रहे होंगे जैसे

[37:22] फॉर एग्जांपल हमने एचटीएमएल टैग से बता

[37:24] दिया कि हम एचटीएमएल का डॉक्यूमेंट लिखने

[37:26] वाले हैं और ये हमारा रूट एलिमेंट होगा पर

[37:28] इसमें हमने एक एट्रिल डाला लैंग इ इ e इस

[37:34] एट्रिल का मतलब है लैंग्वेज जिसमें हम यह

[37:37] कोड लिखने वाले हैं वह है न यानी इंग्लिश

[37:40] अब यहां पर यह जो पार्ट है इसको हम कहते

[37:43] हैं एट्रबीक

[37:46] है और इसके अंदर हमने ये एट्रिल लिखा है

[37:49] एट्रियो का नाम क्या है एटिबल है लैंग

[37:51] एट्रिल यानी लैंग्वेज एट्रियो तो लैंग्वेज

[37:55] जिसका हम इस्तेमाल कर रहे हैं वो है

[37:56] इंग्लिश इसी तरह तरीके से और भी बहुत सारे

[37:58] एटिबल हम डिफरेंट डिफरेंट टैग्स के साथ

[38:00] यूज़ कर सकते हैं अब ये जो एट्रिल है

[38:02] इसमें लेफ्ट साइड में एट्रिल का नाम होता

[38:05] है और राइट साइड में हम उसकी वैल्यू लिखते

[38:07] हैं जैसे लैंग्वेज हमारे पास स्पैनिश भी

[38:09] हो सकती थी हिंदी भी हो सकती थी पर यहां

[38:11] पर इंग्लिश है और ये जो एट्रिल की वैल्यू

[38:13] है इसको हम सिंगल कोट्स में भी लिख सकते

[38:15] हैं वो भी कंप्लीट वैलिड है और डबल कोट्स

[38:17] में भी लिख सकते हैं वो भी कंप्लीट वैलिड

[38:19] है बट क्योंकि बाय डिफॉल्ट डबल कोट्स में

[38:21] लिखी जाती है स्ट्रिंग काफी सारी

[38:22] लैंग्वेजेस के अंदर तो हम अपने ट्यूटोरियल

[38:24] में डबल कोट्स को फॉलो कर रहे होंगे बाकी

[38:26] आपका मन है सिंगल कोर्स में लिखने का वो

[38:28] ज्यादा कंफर्टेबल लगता है

[38:33] python2 टैग की बात करेंगे यह है हमारा

[38:36] हेडिंग टैग जब भी हमें किसी डॉक्यूमेंट के

[38:38] अंदर कोई हेडिंग देनी होती है तो हम

[38:40] हेडिंग टैग का इस्तेमाल करते हैं

[38:56] html2text h1 का साइज जो है बड़ा होता है

[38:58] फिर उससे छोटा h2 होता है उससे छोटा h3

[39:01] होता है और ये इंपॉर्टेंस दिखाता है इनका

[39:04] साइज जिसका साइज सबसे बड़ा होता है वो

[39:06] सबसे ज्यादा इंपॉर्टेंट हेडिंग्स के लिए

[39:08] यूज होना चाहिए जैसे h1 को हम सबसे ज्यादा

[39:11] इंपॉर्टेंट चीजें लिखने के लिए यूज करेंगे

[39:13] h6 को हम सबसे कम इंपॉर्टेंट चीजें लिखने

[39:16] के लिए यूज करेंगे जैसे इसका एग्जांपल एक

[39:19] बार देख लेते हैं अपने कोड के अंदर इस

[39:22] पैराग्राफ को तो करते हैं दे कॉमेंट आउट

[39:24] तो ये मैंने एक क्लिक से कैसे कमेंट आउट

[39:27] किया आपको प्रेस करना है कंट्रोल और स्लैश

[39:30] तो कंट्रोल स्लैश एक बार प्रेस करते हैं

[39:32] तो जितना भी पार्ट सिलेक्टेड होता है वह

[39:34] सारा कमेंट आउट हो जाता है उसके बाद हम

[39:35] लिखने वाले हैं अपने टैग्स को तो सबसे

[39:37] पहले h1 टैग को लिखते हैं हेडिंग वन फिर

[39:41] लिखेंगे अपना h2 टैग सिमिलर वे में अपना

[39:44] h3 टैग

[39:46] लिखेंगे इसको कर लेंगे सेव एंड अब देखते

[39:49] हैं एक बार तो यह रहा हमारा कोड जिसमें

[39:52] हेडिंग वन जो है सबसे बड़ी है उसके बाद

[39:54] हेडिंग टू है उसके बाद हेडिंग थ्री है एंड

[39:56] इस तरीके से कमकम इंपॉर्टेंस होती जा रही

[39:58] है हेडिंग्स की अब एक गलती जो काफी सारे

[40:01] स्टूडेंट्स यहां पे करते हैं कि जब भी

[40:03] उन्हें बड़ा टेक्स्ट चाहिए होता है तो

[40:04] क्या करेंगे हेडिंग वन या हेडिंग टू का

[40:06] इस्तेमाल कर लेंगे जब भी छोटा टेक्स्ट

[40:08] चाहिए होता है साइज में छोटा तो हेडिंग

[40:10] सिक्स या हेडिंग फाइव का इस्तेमाल कर

[40:11] लेंगे ऐसा हमें नहीं करना चाहिए क्योंकि

[40:14] हम साइज डिफाइन कर सकते हैं हम फॉन्ट साइज

[40:16] बता सकते हैं अपने टेक्स्ट का पर हेडिंग्स

[40:19] को इंपॉर्टेंस दिखाने के लिए हमें यूज

[40:21] करना चाहिए कभी भी साइज के लिए यूज नहीं

[40:23] करना चाहिए इसका फर्क एक्चुअली एसईओ पर

[40:25] पड़ता है जब भी हम वेबसाइट्स को बना रहे

[40:27] होते हैं होते हैं तो उसके अंदर रैंक जो

[40:29] होती है कौन से वेब पेजेस

[40:57] जो ज्यादा इंपॉर्टेंट है उसको बड़ी वाली

[40:58] हेडिंग दे जो कम इंपॉर्टेंट है उसको छोटे

[41:00] वाली हेडिंग दे तो साइज के लिए फॉन्ट साइज

[41:02] करके एक प्रॉपर्टी होती है सीएसएस के अंदर

[41:04] जिसको यूज़ करते हैं टेक्स्ट का साइज

[41:06] डिफाइन करने के लिए नेक्स्ट बात करते हैं

[41:08] पैराग्राफ टैग की अब पैराग्राफ टैग का काम

[41:10] होता है टू ऐड पैराग्राफ्स इन

[41:22] html5 पैराग्राफ हमारे लिए प्रिंट हो गया

[41:25] अब ये जो वेबसाइट है अभी ट 100% पे है तो

[41:28] सारा का सारा टेक्स्ट इस तरीके से जगह भर

[41:30] नहीं लेता हमने थोड़ा ज़ूम इन करके दिखाया

[41:32] हुआ है इनका अगर मैं एक्चुअल साइज दिखाऊं

[41:35] तो एक्चुअल साइज कुछ ऐसा है मतलब एक वेब

[41:37] पेज पर हेडिंग वन इतनी बड़ी दिखेगी

[41:39] पैराग्राफ इतना बड़ा दिखेगा और हेडिंग

[41:41] सिक्स जो है इतनी छोटी दिखेगी तो ये सारी

[41:44] चीजें हमें ध्यान में रखनी है इनके कुछ

[41:45] फिक्स साइजेस होते हैं फिक्स साइजेस जो

[41:47] हैं यहां पे जाके हम डॉक्यूमेंटेशन पढ़

[41:49] सकते हैं एमडीएन वाली उसमें हमें पता चल

[41:51] जाएगा किस हिसाब से रेशो रहता है वेब पेज

[41:53] के साइज के अब एक छोटी सी चीज की बात

[41:56] करेंगे यहां पर जैसे से पैराग्राफ के अंदर

[41:58] मान लीजिए मैंने कोई बड़ा सा पैराग्राफ

[41:59] लिखा उसमें काफी सारी जो है हमने लाइंस ऐड

[42:03] कर दी हैं हमारे लिए क्या हुआ ये

[42:05] हॉरिजॉन्टल स्क्रोल जो आ गया पर ये हमें

[42:08] नहीं चाहिए तो हम क्या करेंगे इस लाइन को

[42:11] पूरी को कर लेंगे सिलेक्ट उसके बाद अपनी

[42:13] सेटिंग्स में जाएंगे सेटिंग्स में जाकर

[42:17] कमांड पैलेट ओपन करेंगे और उसमें टॉगल

[42:19] वर्ड रैप करके आएगा अगर नहीं आ रहा है तो

[42:22] फिर आप इसको सर्च भी कर सकते हैं टॉगल

[42:23] वर्ड ड्रैप इस पर क्लिक करेंगे तो ये सारी

[42:26] की सारी जो चीजें हैं ना वो इस तरीके से आ

[42:28] जाएंगी कि हॉरिजॉन्टल स्क्रोल हमारे लिए

[42:30] हट जाएगा और एक ही पेज में हमें सारी

[42:32] चीजें दिख जाएंगी ऐसे साइड साइड करके नहीं

[42:34] देखना पड़ेगा एंड आप नोटिस करेंगे ये पूरी

[42:36] जो लाइन नंबर 20 है ये तीन लाइंस में

[42:38] स्प्लिट हो गई है और 21 यहां से शुरू हो

[42:41] रही है तो इस तरीके से आप टॉगल वर्ड रप कर

[42:43] सकते हैं और सेम लाइन जो है डिफरेंट लाइंस

[42:46] में आपकी डिवाइड हो जाएगी रीडेबिलिटी बढ़

[42:47] जाएगी यहां से फाइल को भी क्लोज कर देते

[42:49] हैं ताकि अच्छे से हम कोड को देख पाए अब

[42:53] नेक्स्ट टैग जिसकी बात करेंगे वो है हमारा

[42:55] एंकर टैग एंकर टैग का काम होता है टू ऐड

[42:58] लिंक्स टू पेजेस एंकर टैग को लिखते हैं ए

[43:01] की हेल्प से पहले हम ए लिखते हैं उसके बाद

[43:04] एचआरएफ होता है एचआरएफ यानी हमारा लिंक

[43:07] हमने किसी भी वेबसाइट का लिंक दे दिया अब

[43:10] लिंक की जगह हमारे पास डिस्प्ले क्या होगा

[43:12] और फिर क्लोजिंग टैग इसको करके देख लेंगे

[43:14] तो बेटर समझ में आएगा कभी-कभी हमारे कुछ

[43:16] वेब पेजेस होते हैं जिस पर कुछ लिंक होता

[43:18] है यानी दूसरी वेबसाइट की तरफ वो लिंक कर

[43:20] रहा होता है तो उनको हम क्रिएट करते हैं

[43:22] एंकर टैग की हेल्प से जैसे हम लिखेंगे ए

[43:25] एच आरई

[43:27] यहां पर क्या करेंगे google.com का हम

[43:30] लिंक पेस्ट कर देते हैं

[43:57] पेज खुल जाएगा तो अगर आपको अपनी वेबसाइट

[43:59] से किसी और वेबसाइट पर जाना है या अपने ही

[44:01] किसी और वेब पेज पर जाना है और उसका आप

[44:03] लिंक देना चाहते हैं यूजर को तो आप सिंपली

[44:06] एंकर टैग का इस्तेमाल कर सकते हैं जैसे

[44:09] यहां पर अगर हम देना चाहे तो ए

[44:12] एचआरएफ इज इक्वल टू अपने विजुअल स्टूडियो

[44:16] कोड का हम लिंक जो है दे देते हैं डाउनलोड

[44:20] करने के

[44:23] लिए डाउनलोड वीएस

[44:27] कोड तो इसको कर लेते हैं सेव अब अपने मेन

[44:31] पेज पर जाएंगे तो यहां पर हमारे लिए क्या

[44:32] होगा यह

[44:57] दिया क्योंकि दोनों के बीच में बीआर टैग

[44:58] लग गया था तो डाउनलोड वीएस कोड पर जैसे ही

[45:01] क्लिक करेंगे तो हमारे लिए वीएस कोड वाली

[45:03] पूरी वेबसाइट खुल जाएगी तो कुछ इस तरीके

[45:05] से हम अपने एटीएमएल पेज के अंदर और

[45:07] डिफरेंट पेजेस के साथ लिंक करवा सकते हैं

[45:10] यूजिंग एंकर टैग अब यह तो हमने देखा कि

[45:13] कैसे दूसरी वेब पेजेस पर जा सकते हैं हम

[45:15] खुद की वेबसाइट के भी दूसरे वेब पेज पर जा

[45:17] सकते हैं जैसे अभी अपने एटीएमएल

[45:19] ट्यूटोरियल्स वाले फोल्डर के अंदर एक और

[45:21] फाइल क्रिएट कर लेते हैं जिसको नाम देते

[45:22] हैं लोड

[45:27] इस फाइल में भी बॉयलर प्लेट कोड लिखते हैं

[45:29] क्लिक करेंगे एट पे तो यह कोड आ गया है और

[45:32] इस फाइल का काम है टू प्रिंट

[45:35] हेलो यहां पर बॉडी के अंदर एक हेडिंग वन

[45:38] दे देते हैं उसमें लिखते हैं हेलो कर लेते

[45:41] हैं सेव अब इंडेक्स फाइल के अंदर क्या

[45:43] करेंगे यहां एक बीर टैग लगा देते हैं एक

[45:47] और एंकर टैग बनाते हैं जिसमें एच आरई इ

[45:50] इक्वल टू लिखेंगे हम

[45:52] स्ल हेलोड

[45:55] एटीए गो टू हेलो इसको कर लेते हैं सेव एंड

[46:00] अब इसको रन करते हैं तो यहां पे एक अलग

[46:02] ऑप्शन आ गया गो टू हेलो जैसे ही गो टू

[46:04] हेलो पर क्लिक करेंगे तो हम हेलो पे पहुंच

[46:06] गए मतलब लोड

[46:14] html5 हो गया है यहां से हम बैक जाकर

[46:17] इक्सड

[46:27] होते हैं हमारी वेबसाइट जो है लिंक होती

[46:29] है डिफरेंट डिफरेंट पेजेस जो हैं लिंक

[46:30] होते हैं कि इस बटन को क्लिक करने के बाद

[46:32] अगला पेज लिंक होगा उसको क्लिक करने के

[46:34] बाद अगला पेज लिंक होगा तो इस तरीके के जो

[46:37] बेसिक लिंक्स हैं वो हम

[46:46] html.com या visualstudio.com उनको हम

[46:49] कहते हैं एब्सलूट लिंक एब्सलूट लिंक यानी

[46:51] किसी दूसरी वेबसाइट का लिंक पर जब हम खुद

[46:53] ही की वेबसाइट का यानी खुद ही का हमने

[46:56] दूसरा वेब पेज लिया h html.erb

[47:27] देते हैं मूव तो अब यहां पे यह जो रिलेटिव

[47:29] लिंक है index.htm के अंदर इसको हमें चेंज

[47:32] करना पड़ेगा इसको हमें करना पड़ेगा हेलो

[47:35] फोल्डर स् h.h.

[47:57] ही नहीं करता तो एक तरीके से जब भी हम

[47:58] लिंक डाल रहे हैं रिलेटिव पाथ या रिलेटिव

[48:00] लिंक डाल रहे हैं इसलिए इसको रिलेटिव लिंक

[48:02] कहते हैं और दूसरे वाले लिंक को कहते हैं

[48:04] एब्सलूट लिंक अब नेक्स्ट टैग जिसकी बात

[48:06] करेंगे वो है हमारा इमेज टैग हमारे पेजेस

[48:09] के ऊपर कभी-कभी हम काफी सारी सुंदर इमेजेस

[48:11] दिखा सकते हैं जैसे

[48:21] google's का लोगो ऊपर दिखा दिया ये

[48:26] सारी इमेजेस हैं जो यहां पर आ गई हैं तो

[48:28] हम भी अपने वेब पेज के ऊपर सुंदर सी

[48:30] इमेजेस जो हैं वो ला सकते हैं और उनको

[48:33] लाते हैं हम इमेज टैग की हेल्प से इमेज

[48:36] टैग का काम होता है टू ऐड इमेजेस टू योर

[48:38] पेज तो इसमें हम लिखते हैं एंगुलर ब्रैकेट

[48:40] आईएमजी फॉर इमेज फिर लिखते हैं सोर्स

[48:43] एसआरसी ये सोर्स एट्रिल बताता है कि इमेज

[48:46] का लिंक क्या होने वाला है इसमें भी हम

[48:48] रिलेटिव यूआरएल दे सकते हैं या एब्सलूट

[48:50] यूआरएल दे सकते हैं मतलब अगर हमें इंटरनेट

[48:52] पर पड़ी हुई कोई इमेज डिस्प्ले करानी है

[48:54] या हमारी

[48:56] तो उसका आप लिंक यहां पर दे सकते हैं नहीं

[48:59] तो आप अपने फोल्डर के अंदर भी कोई इमेज

[49:00] डाउनलोड करके दे सकते हैं तो उसका यहां पे

[49:02] लिंक आ जाएगा फिर ऑल्ट नाम की कोई चीज भी

[49:05] हम यहां पे लिखते हैं तो एक बार क्या करते

[49:07] हैं एक सैंपल इमेज को डिस्प्ले करा कर

[49:09] देखते हैं जैसे हम सर्च कर लेते हैं फॉर अ

[49:12] नोटबुक नोटबुक के लिए सर्च

[49:15] करेंगे इमेजेस के अंदर जाएंगे और यह कोई

[49:18] नोटबुक की रैंडम फोटो हमारे पास आई है अब

[49:21] इस इमेज का एड्रेस हम कॉपी कर लेते हैं

[49:23] कॉपी इमेज एड्रेस यहां पे क्रिएट करेंगे

[49:26] एक इमेज टैग आईएमजी एसआरसी इ इक्वल टू यह

[49:30] हमने डाल दिया अपनी इमेज का एड्रेस और

[49:33] इसको कर देंगे क्लोज तो इसको कर लेते हैं

[49:35] सेव यह हमारी इमेज का एड्रेस आ गया है डॉट

[49:37] जपजी फॉर्मेट में है जे पेग में अब पेज के

[49:41] ऊपर क्या हुआ ऊपर सारा का सारा कंटेंट है

[49:44] और नीचे हमें एक इमेज डिस्प्ले करानी थी

[49:45] नोटबुक की तो हमारे लिए नोटबुक डिस्प्ले

[49:47] होकर आ गई है अब ये जो इमेज है मान लीजिए

[49:50] किसी दिन इंटरनेट जो है बिल्कुल नहीं चल

[49:51] रहा और इस इमेज को हम लोड ही नहीं कर पा

[49:53] रहे या हमारे लिए गलती से इस इमेज का नाम

[49:56] जो है वो गलत टाइप हो गया ये amazon.com

[49:59] पर नहीं है ये

[50:26] हम चाहते हैं यूजर को पता चले कि उस इमेज

[50:28] में एक्चुअली था क्या कुछ ऐसा तो नहीं था

[50:30] इंपॉर्टेंट जो वो मिस आउट कर रहे हैं या

[50:32] उसको एटलीस्ट इतना हो कि यार इसमें कुछ

[50:34] इंपॉर्टेंट नहीं था तो कोई बात नहीं लोड

[50:35] नहीं हो रहा तो तो वहां पे हम यूज़ करते

[50:37] हैं ऑल्ट टैग का ऑल्ट क्या करता है हमारी

[50:40] इमेज के लिए एक अल्टरनेटिव नाम हमें दे

[50:42] देता है जैसे ऑल्ट में हम डाल देंगे

[50:44] नोटबुक इसको कर लेते हैं सेव अब जब इमेज

[50:48] लोड नहीं होगी तो यहां पता चल जाएगा कि वो

[50:50] इमेज एक नोटबुक की इमेज थी और अगर किसी

[50:53] केस में हम यहां पर सही इमेज का जो है

[50:56] लिंक डाल ते हैं जैसे हम डाल रहे हैं

[51:26] के अंदर हमने ऐड कर लिया है अब index.htm

[51:28] पे जाएंगे और यहां पर सोर्स में हम

[51:31] एब्सलूट यूआरएल एब्सलूट लिंक हटा देंगे और

[51:34] अब रिलेटिव यूआरएल डालेंगे यानी लिखेंगे

[51:36] स्लैश हमारी जो इमेज का नाम है इस इमेज का

[51:39] नाम एक बार चेंज कर लेते हैं इसको रिनेम

[51:41] करके कर देते हैं इमेज तो index.htm के

[51:44] अंदर यहां पर लिखेंगे इमेज ड जपक इसको कर

[51:49] लेते हैं सेव और अब हम जब रिफ्रेश करेंगे

[51:52] तो वो सेम इमेज हमारे लिए प्रिंट हो रही

[51:54] है यानी उस इमेज को हम फोल्डर के अंदर डाल

[51:57] के भी एक्सेस कर सकते हैं यूजिंग रिलेटिव

[51:58] यूआरएल और इंटरनेट से भी एक्सेस कर सकते

[52:01] हैं यूजिंग एब्सलूट यूआरएल एक चीज हम

[52:03] नोटिस करेंगे कि हमारा टेक्स्ट तो पूरे

[52:05] वेब पेज पर छोटा-छोटा सा है पर हमारी इमेज

[52:07] जो है नोटबुक की इमेज वो भी वो इतनी बड़ी

[52:09] सी हमें दिखाई दे रही है तो इस केस में हम

[52:11] इस नोटबुक को ना रिसाइट कर सकते हैं अपनी

[52:13] इमेज को रिसाइट कर सकते हैं उसके लिए कौन

[52:15] सा एट्रिल यूज़ करेंगे उसके लिए यूज़ कर

[52:17] सकते हैं हम हाइट एट्रिल जैसे अगर इसकी

[52:19] हाइट को हमें सेट करना हो तो मान लीजिए

[52:21] उसको हमने 100 एक बार सेट करके देख लेते

[52:24] हैं तो इस तरीके से उसकी हाइट जो है कम हो

[52:27] गई अब इसमें हाइट और विड्थ दो एटिबल होते

[52:30] हैं हम इसकी विड्थ को भी बड़ा और छोटा कर

[52:32] सकते हैं पर एडवाइजेबल यह होता है कि एक

[52:34] बार में हम एक ही एट्रिल करें जैसे हाइट

[52:37] को सेट करें तो सिर्फ हाइट को सेट करें

[52:38] विड्थ को सेट कर रहे तो सिर्फ विड्थ को

[52:40] सेट करें वरना दोनों को एक साथ सेट करते

[52:42] हैं ना तो हमारा एस्पेक्ट रेशो फोटो का

[52:44] बिगड़ जाता है जैसे अगर हम यहां पर विड्थ

[52:47] को भी सेट कर दें एज मान लीजिए इसको 50

[52:50] सेट कर दे तो नोटबुक अब यहां पे हल्की सी

[52:53] जो है अजीब दिख रही है इसका डायम खराब हो

[52:57] गए हैं तो इस तरीके के डायमेंशन तब खराब

[52:59] होते हैं जब आप जबरदस्ती हाइट भी सेट करने

[53:01] की कोशिश करते हैं जबरदस्ती विड्थ भी सेट

[53:03] करने की कोशिश करते हैं तो इसीलिए बेस्ट

[53:05] केसेस में एडवाइजेबल होता है कि दोनों में

[53:07] से एक ही हम सेट करें और स्पेसिफिकली हाइट

[53:10] और विड्थ जो है ना ये ऐसी चीजें हैं जो

[53:11] सीएसएस के साथ बदलनी चाहिए यानी जो भी

[53:13] हमारे कलर होते हैं चीजों के या जो भी

[53:15] उनका साइज होता है वो सब एडवाइजेबल होता

[53:17] है कि आप सीएसएस की मदद से करें एचटीएमएल

[53:20] में एटिबल एजिस्ट करते हैं पर हमेशा

[53:22] सीएसएस की तरफ जाना चाहिए तो इसलिए यहां

[53:24] पर हम हाइट विड्थ सेट नहीं कर रहे होंगे

[53:26] उतना ही हम रहने देंगे पर यहां पे हमने

[53:29] एग्जांपल देख लिया कि सीएसएस कितना

[53:31] मैजिकली चीजों को ट्रांसफॉर्म कर देता है

[53:33] मतलब आपको साइज अगर चेंज करना है या कितना

[53:36] ब्यूटीफाई आप करना चाहते हैं अपनी वेबसाइट

[53:38] को अपने वेब पेज को वो सारा का सारा काम

[53:40] आपको सीएसएस करके देती है नेक्स्ट टैग

[53:42] जिसकी हम बात कर रहे होंगे वो है हमारा

[53:44] बीर टैग बीआर टैग को ऑलरेडी यूज़ कर चुके

[53:46] हैं और इसका काम होता है टू ऐड नेक्स्ट

[53:48] लाइन या लाइन ब्रेक टू योर पेज अब बीआर

[53:51] टैग को हमने यहां पे इस्तेमाल कर लिया था

[53:53] तो जो जो अलग-अलग एलिमेंट्स होते हैं उनको

[53:55] नेक्स्ट लाइन नेक्स्ट लाइन में लाने के

[53:57] लिए हमें बीआर टैग का इस्तेमाल करना होता

[53:59] है अब ये जो बीआर टैग होता है ना ये एक

[54:01] एमटी टैग होता है मतलब इसके अंदर कोई भी

[54:03] एडिशनल एटिबल नहीं आते कोई भी एडिशनल

[54:05] कंटेंट नहीं आता ये खुद में अलग एक खाली

[54:08] सा टैग है जिसको आप जहां भी लिख देंगे ये

[54:10] आपके लिए नेक्स्ट लाइन में कंटेंट ले आएगा

[54:13] नेक्स्ट बात करते हैं बोल्ड इटैलिक एंड

[54:14] अंडरलाइन टैग्स की अब हमने कंटेंट तो बहुत

[54:17] सारा लिख लिया पैराग्राफ में लिख लिया

[54:19] हेडिंग में लिख लिया कहीं पर इमेज के अंदर

[54:21] लिख लिया पर उस कंटेंट को हमें कभी-कभी

[54:24] थोड़ा हाईलाइट करना पड़ता है जैसे

[54:25] googlegroups.com के अंदर या फिर अ

[54:27] माइक्रोसॉफ्ट वर्ड के अंदर हम क्या करते

[54:29] हैं टेक्स्ट को पैराग्राफ के अंदर कुछ

[54:31] पार्ट बोल्ड में दिखाते हैं जो इंपॉर्टेंट

[54:32] होता है कुछ को अंडरलाइन कर लेते हैं कुछ

[54:34] को इटैलिक में दिखाते हैं वैसे ही हमारे

[54:36] पास टैग्स होते हैं

[54:40] html5 इन योर पेज बोल्ड के लिए हम बी टैग

[54:43] का इस्तेमाल करते हैं उसके बीच में जो भी

[54:45] लिख देंगे वो बोल्ड हो जाएगा जैसे हम यहां

[54:48] पर लिखने वाले हैं b एंड नीचे लिख देंगे

[54:51] बोल्ड तो इसको कर लेते हैं सेव और एक बार

[54:54] नीचे जाकर देखते हैं तो यह क्या हुआ हमारा

[54:56] जो टेक्स्ट है यह बोल्ड होकर आया है यहां

[54:59] पर एक लाइन ब्रेक ऐड कर देते हैं तो ये

[55:02] बोल्ड टेक्स्ट हमारे लिए आ गया है अब

[55:04] सिमिलरली अगर हमें इटैलिक करना है तो उसके

[55:06] लिए आई टैग का यूज करते हैं यहां पे जो भी

[55:08] चीज हम लिखेंगे वो हमारे लिए इटैलिक में

[55:10] आएगी और अंडरलाइन करना है तो उसके लिए य

[55:12] टैग का इस्तेमाल करना है अंडरलाइन उसको कर

[55:15] लेते हैं सेव सबको हम नेक्स्ट लाइन में

[55:17] लाने के लिए बीर टैग का इस्तेमाल कर लेते

[55:19] हैं और इनफैक्ट बाद में भी हमें कुछ खाली

[55:22] लाइंस चाहिए होंगी तो चार पांच लिख के

[55:24] रखते हैं तो ये क्या हुआ बोल्ड के लिए

[55:27] बोल्ड में प्रिंट हुआ इटैलिक में प्रिंट

[55:28] हो गया और कोई भी टेक्स्ट को हम अंडरलाइन

[55:31] कर सकते हैं अब सिंस हम टैग्स के अंदर भी

[55:33] टैग लिख सकते हैं जैसे अगर हम कोई

[55:35] पैराग्राफ लिखना चाहते हैं मान लीजिए हमें

[55:37] यह वाला जो पैराग्राफ है वह लिखना है और

[55:40] इसके अंदर हम चाहते हैं कि पहला जो सैंपल

[55:42] पैराग्राफ है वह हमारे लिए अंडरलाइंड होकर

[55:45] आए तो उसके बीच में हम लिख देंगे य और

[55:47] उसके बीच में अपने सैंपल पैराग्राफ को डाल

[55:50] देंगे तो यह पैराग्राफ टैग था इसके अंदर

[55:53] हमने अपना अंडरलाइन टैग डाल दिया और उसके

[55:55] बाद ल दिया बाकी सारा कंटेंट इसको सेव कर

[55:58] लेते हैं और देखते हैं तो यह सारा का सारा

[56:01] पैराग्राफ हमारे लिए प्रिंट हो गया पर

[56:02] उसमें जो शुरुआत वाला सैंपल पैराग्राफ है

[56:04] उसमें अंडरलाइन होकर आया है तो एक सेम

[56:06] पैराग्राफ के अंदर आप डिफरेंट डिफरेंट

[56:08] वर्ड्स को कहीं अंडरलाइन कर सकते हैं कहीं

[56:10] इटैलिक कर सकते हैं कहीं बोल्ड कर सकते

[56:12] हैं नेक्स्ट टैग जिसकी बात करेंगे वो है

[56:14] बिग एंड स्मॉल टैग्स यह बिग टेक्स्ट या

[56:16] स्मॉल टेक्स्ट के लिए यूज होते हैं जैसे

[56:19] अगर हम यहां पर लिखें

[56:21] बिग दिस टैग शोज बिग

[56:27] टेक्स्ट और फिर लिखें

[56:30] स्मॉल दिस टैग शोज स्मॉल टेक्स्ट और इसको

[56:35] कर लेते हैं सेव एंड रन तो यह जो है हमारा

[56:38] शुरुआत वाला जो टेक्स्ट है बिग की हेल्प

[56:40] से बहुत बड़ा सा टेक्स्ट प्रिंट होगा मतलब

[56:42] फंट साइज इसका बड़ा है और स्मॉल वाला साइज

[56:45] में स्मॉल प्रिंट होगा तो बड़े टेक्स्ट के

[56:47] लिए बिग टैग यूज कर सकते हैं छोटे टेक्स्ट

[56:49] के लिए हम स्मॉल टैग यूज कर सकते हैं

[56:52] नेक्स्ट हमारा आता है एचआर टैग एचआर होता

[56:54] है हॉरिजॉन्टल रूलर अब ये काम का क्या

[56:57] करता है हॉरिजॉन्टल रूलर का काम करता है

[57:00] मतलब इट इज यूज टू सेपरेट कंटेंट जब भी

[57:02] हमें कंटेंट को हॉरिजॉन्टल सेपरेट करना

[57:05] होता है उसके बीच में स्पेस लानी होती है

[57:07] तो हम हॉरिजॉन्टल टैग का यूज करते हैं

[57:09] जैसे यहां पर बिग टेक्स्ट और स्मॉल

[57:11] टेक्स्ट के बीच में हमें थोड़ी स्पेस

[57:13] चाहिए तो हम क्या बीच में डाल देंगे एआर

[57:15] को एआर को हमने डाला इसको कर लिया सेव तो

[57:19] ये दिस टैग शोज बिग टेक्स्ट ऊपर आ गया और

[57:23] दिस टैग शोज स्मॉल टेक्स्ट नीचे आ गया और

[57:25] बीच में एक स्पेस आ गया और स्पेस के साथ

[57:26] आई एक लाइन तो हॉरिजॉन्टल रूलर रूलर क्या

[57:29] होता है स्केल होता है इंग्लिश के अंदर

[57:31] रूलर का मतलब स्केल होता है जो जब भी आपको

[57:33] टेक्स्ट के बीच में डिफरेंट डिफरेंट

[57:35] सेक्शंस के बीच में एक लाइन चाहिए जो

[57:37] डिवाइड कर रही है डिफरेंट सेक्शंस को तो

[57:38] आप वहां पर रूलर का इस्तेमाल कर सकते हैं

[57:40] जैसे एचआर टैग को हम अगर अपने अलग-अलग

[57:43] सेक्शंस के अंदर डाल दें हमने एक एच आर जो

[57:47] है यहां पर डाल दिया है एक एचआर को हम

[57:50] यहां पर डाल देते हैं एक को डाल देते हैं

[57:53] इस इमेज के बाद एंड एक को डाल देते हैं इन

[57:58] लिंक्स के बाद एआर इसको कर लेते हैं सेव

[58:02] तो हमारा जो पूरा वेब पेज है वह अलग-अलग

[58:04] पार्ट्स में डिवाइड हो गया है ऊपर सारा

[58:06] हमारा हेडिंग से रिलेटेड और एंकर से

[58:08] रिलेटेड कंटेंट है बीच में हमारी इमेज आ

[58:10] गई है फिर हमारे बोल्ड इटैलिक अंडरलाइन आ

[58:13] गए हैं फिर हमारा पैराग्राफ आ गया है फिर

[58:14] बिग टेक्स्ट आ गया और फिर स्मॉल टेक्स्ट आ

[58:16] गया है तो जब पेज में डिफरेंट डिफरेंट

[58:18] कंटेंट है उसको अलग-अलग सेक्शंस में

[58:20] डिवाइड करना है तो यूज़ करना है एचआर टैग

[58:22] का नेक्स्ट बात करते हैं सब स्क्रिप्ट और

[58:24] सुपरस्क्रिप्ट टैग की कभी-कभी हमारे वेब

[58:26] पेज पर हो सकता है कि हम केमिस्ट्री से

[58:28] रिलेटेड कोई रिसोर्सेस का पेज बना रहे हैं

[58:30] उसमें हमें फॉर्मूले लिखने हैं तो

[58:32] केमिस्ट्री से रिलेटेड फॉर्मूले कुछ ऐसे

[58:33] लगते हैं h2o या मान लीजिए हमें कुछ और

[58:36] लिखना है c6 h12 o6 ऐसा कुछ लिखना है हमें

[58:40] co2 लिखना है हमें o3 लिखना है तो इस

[58:43] तरीके में हमें ये जो थ्री है ये जो टू है

[58:46] ये जो सिक्स है इनको हम कहते हैं

[58:48] सब्सक्रिप्ट सब्सक्रिप्ट यानी वो वाला

[58:50] पार्ट वो वाला टेक्स्ट जो नॉर्मल टेक्स्ट

[58:53] के हल्का सा नीचे आता है उसको लिखने के

[58:55] लिए हम यूज करते सब अपने सब टैग का तो सब

[58:59] टैग को कैसे लिखते हैं मान लीजिए हमें h2o

[59:01] लिखना है तो सब टैग को हम कुछ ऐसे लिख रहे

[59:03] होंगे पहले एक लाइन दे देते हैं फिर लिखते

[59:07] हैं पहले पैराग्राफ के अंदर नॉर्मल

[59:09] लिखेंगे अपना एच उसके बाद लिखेंगे सब में

[59:13] लिखेंगे टू और फिर नॉर्मली लिखेंगे ओ इसको

[59:17] सेव करके अगर दिखाएं तो कुछ ऐसा दिखेगा h

[59:20] फिर ये जो टू है ये सब्सक्रिप्ट बन गया है

[59:22] और o हमारा नॉर्मल साइज का है तो इस तरीके

[59:25] से हम केमिकल फ फर्मूला दिखा सकते हैं अब

[59:27] जहां

[59:32] सबस्क्रीन लीजिए आपको मैथ के कोई फॉर्मूले

[59:35] लिखने हैं जैसे a टू द पावर n + b तो

[59:39] इसमें जो टू द पावर n है ये सुपरस्क्रिप्ट

[59:42] है यानी छोटा सा टेक्स्ट है और नॉर्मल

[59:43] टेक्स्ट के ऊपर आता है या थ्री का जब

[59:46] स्क्वायर निकालते हैं तो उसकी वैल्यू नाइन

[59:48] होनी चाहिए तो इसमें जो टू है ये हमारा

[59:50] सुपर स्क्रिप्ट है इसको लिखने के लिए हम

[59:52] सुपर टैग का इस्तेमाल करते हैं तो सुपर

[59:55] टैग को लिखने के लिए सब सबसे पहले

[59:56] पैराग्राफ क्रिएट करते हैं फिर लिखते हैं

[59:58] थ्री अब इसमें लिखेंगे

[01:00:00] एय अंदर डाल देंगे

[01:00:03] टू इ इक्व ट 9 तो सिर्फ सुपरस्क्रिप्ट में

[01:00:08] क्या आ जाएगा सिर्फ टू जाएगा हमारे

[01:00:10] सुपरस्क्रिप्ट में इसको सेव कर लेते हैं

[01:00:11] तो ये 3 का स्क्वा = 9 इस तरीके का

[01:00:14] मैथमेटिकल फार्मूला भी हमारे लिए प्रिंट

[01:00:16] हो गया नेक्स्ट बात करते हैं प्री टैग की

[01:00:19] प्री टैग क्या करता है इट इज यूज्ड टू

[01:00:21] डिस्प्ले टेक्स्ट एज इट इज विदाउट इग्नोर

[01:00:24] स्पेसेस एंड नेक्स्ट लाइन आप नोटिस करेंगे

[01:00:27] अगर किसी भी पैराग्राफ के अंदर अब यहां पर

[01:00:29] हो सकता है हम एक नॉर्मल सा कोई पैराग्राफ

[01:00:32] बनाएं जैसे हमने एक पैराग्राफ बनाया है

[01:00:35] इसके अंदर हम काफी सारी चीजें लिख सकते

[01:00:37] हैं यह आप एल ओ आर एम लिखेंगे तो एमेट एक

[01:00:41] और आ जाएगा जिससे आप कोई भी सैंपल टेक्स्ट

[01:00:43] जो है वो डिस्प्ले करा सकते हैं अब यहां

[01:00:45] पेय जो सैंपल टेक्स्ट है ये सारा का सारा

[01:00:46] डिफरेंट डिफरेंट लाइंस में है पर जब हम

[01:00:49] इसको सेव करके देखेंगे तो यह सैंपल टेक्स

[01:00:51] सिम सिंगल लाइन में हमारे लिए डिस्प्ले

[01:00:53] होगा ऐसा क्यों क्योंकि

[01:00:56] ना आपकी स्पेसेस को काउंट करता है ना आपकी

[01:00:57] नेक्स्ट लाइन को काउंट करता है आप यह लोरम

[01:01:01] और यह इप्सम के बीच

[01:01:03] में चाहे आप हजार स्पेसेस दे दें मतलब

[01:01:06] इतनी सारी हमने स्पेस देके इसको सेव किया

[01:01:09] तो आप नोटिस करेंगे सेव करने के बाद जब

[01:01:11] फॉर्मेट हो रहा है ऑटो फॉर्मेट तो वो

[01:01:12] स्पेस हट जा रही है एंड इनफैक्ट आप ऑटो

[01:01:14] फॉर्मेट नहीं भी करेंगे और फिर भी आप अपनी

[01:01:17] वेबसाइट पे जाएंगे तो वो स्पेसेस को काउंट

[01:01:19] ही नहीं करेगा ऐसे केसेस में अगर हमारे

[01:01:21] पास ऐसी सिचुएशन आती है जिसमें हमें

[01:01:23] स्पेसेस को नेक्स्ट लाइन को काउंट कराना

[01:01:25] होता है तो उस केस में क्या करते हैं इस

[01:01:27] पी टैग को बस प्री टैग बना देना है प्री

[01:01:30] अब यह जो स्पेस है यह ऑटोमेटिक फॉर्मेट से

[01:01:33] हट नहीं जाएगी अब आप डिस्प्ले कराएंगे तो

[01:01:35] यहां पे यह स्पेस ऑटोमेटिक आपके लिए आएगी

[01:01:38] तो जब भी आपको खुद की लिखी हुई स्पेसेस

[01:01:41] चाहिए खुद की लिखी हुई नेक्स्ट लाइन चाहिए

[01:01:43] तो हम वहां पर यूज़ करते हैं प्री टैग का

[01:01:45] अब यहां तक बात करते-करते सारे हमारे जो

[01:01:48] बेसिक या मोस्ट इंपॉर्टेंट एचटीएमएस मैं

[01:01:51] जिनको कहूं जो बहुत ज्यादा फ्रीक्वेंसी

[01:01:55] बेसिकली कवर कर लिए है अब हम बढ़ते हैं

[01:01:57] अपने प्रोजेक्ट के सेकंड पार्ट की तरफ

[01:01:59] जहां हम अपने प्रोजेक्ट्स में और ज्यादा

[01:02:00] इंप्रूवमेंट्स करेंगे अपने पोर्टफोलियो

[01:02:02] में इंप्रूवमेंट्स करेंगे तो यहां पे

[01:02:04] मैंने कुछ टास्क डाला है इस टास्क को आप

[01:02:06] कंप्लीट कर सकते हैं साथ के साथ अपनी भी

[01:02:08] इमेजिनेशन लगा सकते हैं कि क्या-क्या

[01:02:09] चीजें हम एडिशनल ऐड कर सकते हैं जैसे सबसे

[01:02:13] पहले तो हमें तीन पेजेस क्रिएट करने हैं

[01:02:14] हमने ऑलरेडी एक index.htm क्रिएट किया था

[01:02:17] अपने पोर्टफोलियो में अब हमें अपने

[01:02:18] एजुकेशन के लिए अलग से पेज बनाना है

[01:02:20] एक्सपीरियंस के लिए अलग से पेज बनाना है

[01:02:22] और प्रोजेक्ट्स के लिए अलग से पेज बनाना

[01:02:24] है और इन सारे पेजेस का जो लिंक है वो

[01:02:26] हमारे होम पेज पर होना चाहिए तो ये

[01:02:29] फंक्शनालिस में हम एक्स्ट्रा ऐड करने वाले

[01:02:32] हैं कि होम पेज से आप किसी भी बटन पर

[01:02:34] क्लिक करके अपनी एजुकेशन भी देख पाए आपका

[01:02:36] एक्सपीरियंस भी देख पाए कोई भी आकर और

[01:02:38] आपके प्रोजेक्ट्स भी देख पाए हो सकता है

[01:02:40] आप कोई और रिलेवेंट इंफॉर्मेशन जो है

[01:02:42] दिखाना चाह रहे हो जैसे आपने कोई

[01:02:44] अचीवमेंट्स जो है ली हैं या आपकी हॉबीज आप

[01:02:46] बताना चाह रहे हैं तो उसके लिए भी आप

[01:02:48] एडिशनल पेजेस बना सकते हैं तो आई होप कि

[01:02:50] ये चीज आप कर रहे होंगे एंकर टैग का हमें

[01:02:52] इस्तेमाल करना है उन पेजेस के अंदर

[01:02:54] इंफॉर्मेशन भी डालनी है तो हेड हेडिंग्स

[01:02:56] का यूज करना है प्रॉपर हेडिंग्स अपने

[01:02:58] स्मॉल टेक्स्ट बिग टेक्स्ट का हम यूज कर

[01:03:00] सकते हैं पैराग्राफ का यूज कर सकते हैं

[01:03:01] सुपरस्क्रिप्ट सब स्क्रिप्ट बना सकते हैं

[01:03:03] जब आप परसेंटेज दिखा रहे होंगे या सीजीपीए

[01:03:05] बता रहे होंगे तो उसमें उन चीजों का

[01:03:07] इस्तेमाल हो सकता है तो आई होप कि आप यहां

[01:03:09] पे वीडियो को पॉज करेंगे प्रोजेक्ट का

[01:03:11] सेकंड पार्ट कंप्लीट करेंगे ताकि मेमोरी

[01:03:13] के अंदर जो भी टैग्स हमने इंपॉर्टेंट

[01:03:16] डिस्कस किए हैं अभी वो सारे के सारे बैठ

[01:03:18] जाए जब भी डाउट आए अपने आप नोट्स कभी भी

[01:03:21] खोल सकते हैं उसके अंदर चीजें रेफरेंस कर

[01:03:22] सकते हैं एंड इसके बाद बढ़ेंगे हम अपने

[01:03:24] लेवल थ्री की अब हम शुरुआत करने वाले हैं

[01:03:27] अपने लेवल थ्री की और यहां तक हमने काफी

[01:03:29] सारे जो इंपॉर्टेंट टैग्स हैं वो कवर कर

[01:03:31] लिए हैं चैप्टर थ्री के अंदर अपने लेवल

[01:03:34] थ्री के अंदर हम डिस्कस करेंगे लेआउटस

[01:03:36] एचटीएमएल के अंदर क्या होते हैं अब

[01:03:38] कभी-कभी ऐसा होता है कि हमें ऐसे टैग्स

[01:03:40] यूज करने पड़ते हैं जिसका इफेक्ट हमें

[01:03:42] अपने वेब पेज के ऊपर तो दिखाई नहीं देता

[01:03:44] पर इंटरनली हमारा वेब पेज कैसे काम कर रहा

[01:03:47] है मतलब एसईओ रैंकिंग्स में हमारा वेब पेज

[01:03:49] ऊपर जा रहा है या नीचे जा रहा है उस पर वो

[01:03:51] चीजें काफी हैवी इंपैक्ट डाल सकती हैं

[01:03:54] इसमें सबसे पहले बात करेंगे पेज लेआउट

[01:03:56] टेक्निक्स की जिनमें से सबसे पहली टेक्नीक

[01:03:58] है यूजिंग सिमटिक टैग्स अब

[01:04:03] html5 टैग्स और एक होते हैं हमारे नॉन

[01:04:07] सिमटिक टैग्स सिमटिक टैग्स वो होते हैं

[01:04:09] जिनको देख के उनका मतलब समझ में आ जाए

[01:04:12] जैसे

[01:04:13] एटीएमएल मतलब हमारे पेज का एक हेडर होता

[01:04:16] है उसको हेडर बनाते हैं या फिर जो पेज का

[01:04:20] फुटर होता है मतलब फुटर के अंदर ही सारी

[01:04:22] फुटर वाली चीजें लिखी जा रही होती हैं तो

[01:04:24] इनके नाम से ही पता चलता है कि इन टैग्स

[01:04:27] के अंदर एक्चुअली होने क्या वाला है दूसरे

[01:04:29] होते हैं हमारे नॉन सिमटिक टैग्स जिनको

[01:04:31] देख के क्लियर नहीं होता कि उनका एक्चुअली

[01:04:33] मतलब क्या है जैसे आगे जाके हम पढ़ेंगे कि

[01:04:35] डिव नाम का या स्पैन नाम का कोई टैग होता

[01:04:39] है तो उसमें हम क्या-क्या चीजें कर रहे

[01:04:41] होंगे अब यहां डिव या स्पैन से हमें

[01:04:43] क्लियर नहीं हो रहा कि डिव या स्पैन के

[01:04:44] अंदर हम एक्चुअली पढ़ने क्या वाले हैं तो

[01:04:46] ये आ जाते है नॉन सिमटिक की कैटेगरी में

[01:04:48] सिमटिक के अंदर हेडर फुटर हमें पता है कि

[01:04:51] कोई वेबसाइट का हेडर होगा तो उसकी ऊपर जो

[01:04:53] डिटेल्स होती है वेब पेज पे वो हम लिखने

[01:04:55] वाले हैं कुटर में नीचे वाली चीजें तो इस

[01:04:57] तरीके से कैटेगरी डिवाइडेड होती हैं तो

[01:04:59] हमारी वेबसाइट के अंदर सिमटिक टैग्स को

[01:05:02] यूज़ करने के दो-तीन फायदे होते हैं सबसे

[01:05:04] पहला फायदा तो ये होता है कि हमारा जो कोड

[01:05:07] है वो और ज्यादा रीडेबल बनता है और ज्यादा

[01:05:10] स्ट्रक्चर्ड तरीके से हम अपना पूरी की

[01:05:11] पूरी एचटीएमएल की फाइल के अंदर जितनी भी

[01:05:13] हमें लाइनें लिखनी है वो लिख पाते हैं

[01:05:16] दूसरा ये होता है किसी भी वेब पेज को अगर

[01:05:17] हमने बेसिक प्योर वनला एटीएमएल से बनाया

[01:05:20] तो उस वो रैंकिंग्स में फायदा होता है

[01:05:22] यानी जितना आप सिमटिक टैग्स को यूज करेंगे

[01:05:24] उतना बेटर रहेगा उतना एसईओ आपका ज्यादा

[01:05:26] इंप्रूव्ड होगा और तीसरा यह होता है कि

[01:05:29] गुड यूजर एक्सपीरियंस होता है यूजर

[01:05:31] एक्सपीरियंस किस तरीके से होता है कभी-कभी

[01:05:32] ना अ कुछ विजुअल अ या ऑडियो बेस्ड हमारे

[01:05:35] यूजर्स होते हैं उसके साथ-साथ जब आप सही

[01:05:38] लेआउट का इस्तेमाल करते हैं तो यूजर

[01:05:40] एक्सपीरियंस भी बढ़ जाता है इसीलिए हमें

[01:05:42] यूज़ करना चाहिए राइट टैग्स को राइट चीजों

[01:05:44] के लिए सही टैग्स को सही काम के लिए यूज़

[01:05:47] करना चाहिए ऐसा नहीं है कि हम कोई

[01:05:49] पैराग्राफ टैग या कोई हेडिंग टैग बना दें

[01:05:51] और उसके अंदर हम अपनी हेडिंग डाल रहे हैं

[01:05:53] और उसको हम कह रहे हैं यह हमारी वेबसाइट

[01:05:54] का हेडर है या h6 का हमने बना दिया

[01:05:57] पैराग्राफ का कुछ बना दिया और बोल दिया यह

[01:05:59] हमारी वेबसाइट का फुटर है ऐसा नहीं करना

[01:06:02] हमें हेडर मेन फुटर इन तीन टैग्स का

[01:06:05] इस्तेमाल करना है ये तीनों सिमटिक टैग्स

[01:06:07] है और इन तीनों को अभी हम डिटेल में

[01:06:09] डिस्कस करेंगे तो सबसे पहले डिस्कस करते

[01:06:11] हैं अपने हेडर टैग को तो किसी भी वेबसाइट

[01:06:13] के हेडर को बनाने के लिए हमारे पास अगर

[01:06:16] कोई नॉर्मल हमारा एचटीएमएल पेज है तो बॉडी

[01:06:19] के अंदर क्या करेंगे हेड के बाद स्पेस दे

[01:06:22] देते हैं बॉडी के अंदर जाकर सबसे पहले

[01:06:24] क्या करेंगे अपना हेड बनाएंगे हेडर के

[01:06:27] अंदर हम काफी सारी चीजें लिख सकते हैं

[01:06:29] जैसे यहां पर अपना कोई मेन्यू दे सकते हैं

[01:06:31] जैसे पोर्टफोलियो का आपने पेज बनाया होगा

[01:06:33] तो हेडर के ऊपर आपने ऑप्शंस दिए होंगे कि

[01:06:35] आप यहां पे या तो एक्सपीरियंस रखना चाह

[01:06:39] रहे हैं या फिर रखना चाह रहे हैं अपने

[01:06:43] प्रोजेक्ट्स को या इसे हम एजुकेशन कर देते

[01:06:46] हैं अब इसको सेव कर लेते हैं एक बार रन कर

[01:06:49] लेते हैं लाइव सर्वर को तो ये एजुकेशन आ

[01:06:53] गया यह प्रोजेक्ट्स आ गए अब आप इस पूरे

[01:06:56] वेब पेज को अगर हम इंस्पेक्ट करने निकले

[01:06:58] तो जब आप एलिमेंट को इंस्पेक्ट करेंगे

[01:07:00] देखेंगे कि ये एजुकेशन वाला हमारा पार्ट

[01:07:03] है ये प्रोजेक्ट्स वाला पार्ट है और ये

[01:07:05] दोनों को दोनों कंबाइंड होके हमारे हेडर

[01:07:07] के अंदर आ रहे हैं मतलब इसको एक्सपेंड कर

[01:07:09] सकते हैं हमारे हेडर के अंदर ये दोनों

[01:07:10] चीजें आ रही हैं तो इंस्पेक्ट करते हैं

[01:07:13] हमें तो नहीं दिखता विजुअली हमें नहीं दिख

[01:07:15] पाता एज अ यूजर की वेबसाइट बिल्ड कैसे हुई

[01:07:17] है लेकिन जब

[01:07:25] का जैसे हमने हेडर बनाया अब हम चाहते हैं

[01:07:28] ये दोनों जो चीजें हैं वो सेम लाइन पर आ

[01:07:30] जाए तो क्या करते हैं अभी इसको पैराग्राफ

[01:07:32] की फॉर्म में लिख देते हैं इसको पैराग्राफ

[01:07:35] टैग बना देते हैं पी एंड प और इनको डाल

[01:07:39] देते हैं प्री के अंदर ताकि हम जो है

[01:07:42] थोड़ी सी यहां पे स्पेस दे पाए हम कुछ

[01:07:45] नहीं कर रहे हम यहां पर थोड़ी सी बेसिक

[01:07:46] फॉर्मेटिंग कर रहे हैं फॉर्मेटिंग का यह

[01:07:49] मतलब है कि हम यहां थोड़ी सी स्पेस देंगे

[01:07:51] और यहां डाल देंगे अपने प्रोजेक्ट्स को

[01:07:55] इसको कर लिया सेव और हमारा पेज अब कुछ ऐसा

[01:07:58] दिखेगा जिसमें ऊपर हेडर है वहां एजुकेशन

[01:08:00] भी है वहां प्रोजेक्ट्स भी है तो आप इस पर

[01:08:02] भी क्लिक करके जा सकते हैं इस पे भी क्लिक

[01:08:03] करके जा सकते हैं इंडिविजुअल पेजेस के

[01:08:05] अंदर नेक्स्ट हम बना सकते हैं यहां पे

[01:08:07] अपना एक फुटर तो वेबसाइट का बीच वाला जो

[01:08:09] पार्ट है वो तो मेन के अंदर आता है मतलब

[01:08:12] मेन कंटेंट जो भी होने वाला है और यहां पे

[01:08:15] फुटर के अंदर हम एडिशनल जो अपनी

[01:08:17] इंफॉर्मेशन देते हैं यूजुअली फुटर के अंदर

[01:08:19] दिया जाता है h3 का इस्तेमाल कर लेते हैं

[01:08:22] कांटेक्ट मी एट h @ ac.com इसको कर लेते

[01:08:30] हैं सेव तो अब ये जो है हमारा हेडर पार्ट

[01:08:34] है यह हमारा फुटर पार्ट इसको थोड़ा सा और

[01:08:36] छोटा कर लेते हैं h5 पर हम आ जाते हैं तो

[01:08:39] यह हेडर है यह फुटर है और बीच में जो

[01:08:42] चीजें हैं वह सारा हमारा मेन कंटेंट होने

[01:08:45] वाला है तो इस तरीके से हमारे वेबसाइट का

[01:08:47] जो लेआउट है वो डिजाइन होगा अगर मेन की

[01:08:49] बात करें तो मेन टैग के अंदर हम तीन मेजर

[01:08:53] टैग्स को डिस्कस करे होंगे जिसमें से सबसे

[01:08:55] पहला है हमारा सेक्शन टैग सेक्शन टैग क्या

[01:08:58] करता है इट इज यूज्ड फॉर अ सेक्शन ऑन योर

[01:09:00] पेज यानी हमारे पेज को अगर हमें सेक्शंस

[01:09:02] में डिवाइड करना है कि यहां पर हम अपने

[01:09:04] एक्सपीरियंस लिखने वाले हैं यहां पर हम

[01:09:06] अपनी एजुकेशन लिखने वाले हैं यहां पर हम

[01:09:08] अपना प्रोजेक्ट लिखने वाले हैं तो उस

[01:09:10] सेक्शंस को बनाने के लिए हम सेक्शन टैग का

[01:09:12] इस्तेमाल करते हैं जैसे ऊपर हेडर के अंदर

[01:09:16] हम यहां लिख देते हैं माय

[01:09:19] पोर्टफोलियो यह तो बन जाएगा हमारी मेजर

[01:09:23] हेडिंग आपको ओबवियसली अपना जो पोर्टफोलियो

[01:09:26] है वो इससे बेटर बनाना है जैसा हम बना रहे

[01:09:28] हैं यहां सिर्फ एग्जांपल के लिए मैं काफी

[01:09:30] सारे आपको टैग दिखा रही हूं किस किस तरीके

[01:09:32] से इस्तेमाल करना है सेम पेज के ऊपर मेरी

[01:09:34] तरह आपको इंफॉर्मेशन नहीं डालनी है और

[01:09:36] सुंदर उसको बनाने की कोशिश करनी है तो मेन

[01:09:39] के अंदर क्या करना है मेन के अंदर हम सबसे

[01:09:41] पहले बनाएंगे सेक्शन इस सेक्शन के अंदर हम

[01:09:44] लिखेंगे अपनी एजुकेशन के बारे में एजुकेशन

[01:09:47] में हम लिख सकते हैं

[01:09:48] एनएसआईटी सीओई लिख दिया उसके बाद अपने

[01:09:52] स्कूल का नाम लिख सकते हैं

[01:09:56] स्कूल का नाम हमने लिख दिया इस तरीके से

[01:09:58] बेसिक चीजें लिख सकते हैं तो यह हमारा

[01:10:00] पहला सेक्शन हो गया उसके बाद हम अपने

[01:10:02] एक्सपीरियंस का सेक्शन लिखने जाए

[01:10:04] एक्सपीरियंस के सेक्शन में हम कुछ-कुछ

[01:10:06] चीजें लिख सकते हैं

[01:10:09] एक्सपीरियंस यहां पे हम चीजें लिख सकते

[01:10:14] हैं कुछ-कुछ चीजें हमने लिख दी हैं तो यह

[01:10:17] हमने एक और सेक्शन बना लिया तो ये पहला

[01:10:19] सेक्शन हो गया है हमारा और यह हो गया

[01:10:21] हमारा दूसरा सेक्शन अब जब इसको हम पेज के

[01:10:24] ऊपर देखेंगे तो हमें तो नॉर्मल सिंपल लाइन

[01:10:26] की तरह ही लगेगा कि हम पैराग्राफ के अंदर

[01:10:28] भी लिख सकते थे पर एक्चुअल चीजें जो हैं

[01:10:30] हमें तब पता चलेगी जब हम इस पेज को करेंगे

[01:10:32] इंस्पेक्ट इंस्पेक्ट करके हमें पता चलेगा

[01:10:35] कि ये जो पूरा की पूरी चीज है ये एक सिंगल

[01:10:37] सेक्शन के अंदर आई है ये एक सिंगल सेक्शन

[01:10:41] है ये एक सिंगल सेक्शन है तो इस तरीके से

[01:10:43] अपने कोड को डिवाइड करना जरूरी है ताकि

[01:10:45] सिमटिक पता चल रहा हो कि इस पेज के अंदर

[01:10:48] कौन सा पार्ट किस चीज को रिप्रेजेंट करता

[01:10:50] है नेक्स्ट टैग जिसकी हम बात करेंगे वो है

[01:10:52] आर्टिकल अब पेज के ऊपर हम काफी सारे

[01:10:53] आर्टिकल्स जो हैं उनको ख सकते हैं जैसे

[01:10:56] अगर हमें कुछ लिखना है अपने बारे में मान

[01:10:59] लीजिए मेन के अंदर हम कुछ लिखना चाह रहे

[01:11:01] हैं आर्टिकल की फॉर्म में माय

[01:11:05] एक्सपीरियंस या माय स्टोरी अगर हम बताना

[01:11:07] चाह रहे हैं तो माय स्टोरी करके अपने

[01:11:09] पोर्टफोलियो के ऊपर बता सकते हैं जिसमें

[01:11:11] हम कहां से बिलोंग करते हैं या टेक में

[01:11:13] हमारा इंटरेस्ट क्यों है क्यों हम कोडिंग

[01:11:15] सीख रहे हैं क्या हमारे गोल्स हैं क्या हम

[01:11:17] चेंज करना चाहते हैं क्या हम जो

[01:11:20] रेवोल्यूशन है वो लाना चाहते हैं जिस भी

[01:11:22] फील्ड में हमारा इंटरेस्ट है उस इंटरेस्ट

[01:11:24] की तरफ तो वो सारी चीजें यहां पे लिख सकते

[01:11:26] हैं तो ये आर्टिकल टैग के अंदर आ जाएगा और

[01:11:28] तीसरा टैग जिसकी हम बात करेंगे वो है

[01:11:30] हमारा अाइड टैग अब ये जो असाइट टैग का काम

[01:11:33] होता है असाइट टैग का काम होता है फॉर

[01:11:35] कंटेंट असाइट मेन कंटेंट अब हमारी कई-कई

[01:11:38] वेबसाइट होती हैं जिनके ऊपर एड्स दिख रही

[01:11:40] होती है जिनके ऊपर एडिशनल इंफॉर्मेशन दिख

[01:11:42] रही होती है जो एक्चुअली हमारे काम की

[01:11:44] नहीं है मतलब हमारे कंटेंट के काम की नहीं

[01:11:46] है पर हमें दिखानी पड़ रही है जैसे कई लोग

[01:11:48] वेबसाइट्स बनाते हैं उस पर google's चला

[01:11:50] रहे होते हैं अब जैसे ऐड तरीके का कंटेंट

[01:11:53] होता है ये सारा हमारे मेन कंटेंट का

[01:11:55] पार्ट नहीं है जैसे आपने कोई वेबसाइट देखी

[01:11:57] उसके अंदर कुछ-कुछ ऐड्स हमारे पास चल रही

[01:11:59] होंगी पर मेन कंटेंट उसके अंदर कुछ और ही

[01:12:01] चल रहा है तो आप नहीं चाहती कि

[01:12:05] google's वाला कंटेंट है आप चाहते हैं

[01:12:12] google3 के अंदर कि कौन सा पार्ट आपके मेन

[01:12:15] कंटेंट का पार्ट नहीं है उसके लिए हम यूज

[01:12:17] करते हैं अपना अाइड टैग तो अगर हमें कोई

[01:12:20] ऐड चलानी है मान लीजिए हमें मेन सेक्शन

[01:12:22] में एंड में कोई ऐड चलानी है तो हम

[01:12:25] लिखेंगे

[01:12:27] असाइट और इसके अंदर हम डाल देंगे दिस इज

[01:12:30] एन

[01:12:31] ऐड तो ये जो दिस इज एन ऐड वाला पार्ट है

[01:12:34] ये हमारा असाइट टैग के अंदर आ गया इसको

[01:12:36] हमारे एसईओ जो है वो डिटेक्ट नहीं करेगा

[01:12:38] उससे फर्क नहीं पड़ रहा होगा तो इस तरीके

[01:12:40] के कुछ-कुछ चीजें हम इंप्लीमेंट कर सकते

[01:12:42] हैं लॉजिकली जब भी हम किसी भी वेब पेज को

[01:12:44] बिल्ड कर रहे हैं नेक्स्ट चीज जिसकी बात

[01:12:47] करेंगे वो है हमारा एंकर टैग अब एंकर टैग

[01:12:49] में हमने बात की थी कि हम ए लिखते हैं

[01:12:51] उसके बाद अपना लिंक लिखते हैं वो रिलेटिव

[01:12:53] हो सकता है एब्सलूट हो सकता है तो हम किसी

[01:12:55] भी लिंक की तरफ रीडायरेक्ट कर सकते हैं

[01:12:58] अपने यूजर को पर एंकर टैग के अंदर एक और

[01:13:07] एट्रबीक तो हम लिंक पर क्लिक करते थे तो

[01:13:10] सेम पेज खुलता था अब न्यू टैब में हमारी

[01:13:13] चीजें खुल रही होंगी जैसे फॉर एग्जांपल

[01:13:16] अगर हम यहां पर जाना चाह रहे हैं हमने एक

[01:13:18] एंकर टैग बनाया एच आरएफ इ इक्वल टू यहां

[01:13:21] पर हम ले लेते हैं google.com का एग्जांपल

[01:13:26] अब अगर हम इसको नॉर्मली सेव करें और

[01:13:34] google.com खुल

[01:13:36] जाएगा लेकिन अगर हम यहां पर लिख दें एक और

[01:13:40] एट्रिल

[01:13:42] टू मेन इसको सेव करके अगर अब रन करें तो

[01:13:47] google.com खुल रहा है और यह वाला टैब

[01:13:50] हमारा इंटैक्ट है तो जब भी लिंक को

[01:13:52] नेक्स्ट टैब में खुलवाना हो तो उसके लिए

[01:13:54] हम यूज कर टारगेट मेन का इसके अलावा हम

[01:13:57] अपनी पिक्चर्स को क्लिके बल बना सकते हैं

[01:14:00] कैसे

[01:14:24] क्लिकब्रिक्स इसका हम क्या करेंगे बस लिंक

[01:14:26] कॉपी कर लेंगे यहां googlegroups.com

[01:14:55] हाइट भी हम दे देते

[01:14:57] हैं हाइट इज इक्वल टू 500 और थोड़ा सा

[01:15:02] इसको छोटा करते हैं 100 तक लेकर जाते

[01:15:08] हैं तो ये जो इमेज है अब अगर इसको क्लिक

[01:15:11] करें तो हमारे लिए google.com खुल जाएगा

[01:15:14] क्योंकि ये इमेज

[01:15:16] क्लिकब्रिक्स

[01:15:22] को क्लिकब्रिक्स इमेज को क्लिके बल बनाना

[01:15:26] चाहे हम इस्तेमाल कर सकते हैं अपने एंकर

[01:15:27] टैग का अब इमेज टैग के अंदर हम कुछ-कुछ

[01:15:30] चीजें कर सकते हैं जैसे हमने अभी अपनी

[01:15:33] हाइट सेट की या हम विड्थ को भी सेट कर

[01:15:35] सकते हैं जैसे हमने लिंक

[01:15:38] डाला तो यहां पर हमारी जो इमेज थी उसमें

[01:15:41] हमने हाइट को सेट कर दिया सिमिलर तरीके से

[01:15:44] हम अपनी विड्थ को भी सेट कर सकते थे विड्थ

[01:15:48] को सेट करते तो कुछ इस तरीके की हमारी

[01:15:51] इमेज होती बिना सेट किए अगर इसको हम 50 कर

[01:15:54] दें

[01:15:56] तो ये और छोटी हो जाएगी विड्थ वाइज एंड

[01:15:58] विड्थ को सेट करेंगे तो हाइट अपने आप उसी

[01:16:00] एस्पेक्ट रेशो को मेंटेन करने के लिए सेट

[01:16:02] हो जाएगी अगर सिर्फ हाइट को सेट कर रहे

[01:16:04] हैं तो विड्थ भी अपने आप चेंज हो जाएगी

[01:16:06] एस्पेक्ट रेशो को मेंटेन करने के लिए

[01:16:08] नेक्स्ट बात करने वाले हैं हम अपने डिव

[01:16:10] टैग की अब दो टैग्स मेजर टैग्स की हम यहां

[01:16:12] पे बात करेंगे सेक्शन में डिव और स्पैन ये

[01:16:15] दोनों जो है एचटीएमएल के काफी इंपॉर्टेंट

[01:16:17] टैग्स हैं जिनका बहुत बार यूज होता है डिव

[01:16:20] की अगर बात करें तो डिव एक कंटेनर है फॉर

[01:16:22] अदर एचटीएमएल एलिमेंट्स यानी डिव का अपना

[01:16:25] कोई स्पेशल काम नहीं है जैसे पी पैराग्राफ

[01:16:27] टैग का काम होता था कि इसके अंदर

[01:16:28] पैराग्राफ्स लिखे जाते हैं हेडर टैग का

[01:16:31] काम होता था इसके अंदर हमारी वेब पेज का

[01:16:32] हेडर आता है फुटर का काम होता था वेब पेज

[01:16:34] का फुटर आता है डिव का अपना कोई स्पेसिफिक

[01:16:37] काम नहीं है इसीलिए इस टैग को नॉन सिमटिक

[01:16:41] भी कहते हैं डिव का मेजर काम होता है

[01:16:43] दूसरे टैग्स को खुद के अंदर कंटेन करना

[01:16:46] जैसे अगर हम अपनी वेब पेज पर मान लीजिए

[01:16:49] मेन के अंदर क्या करते हैं एक डिव टैग

[01:16:51] बनाते हैं यहां पर हमने बनाया डिव

[01:16:56] तो इसका कुछ काम नहीं है मतलब ये कुछ चेंज

[01:16:58] लेकर नहीं आएगा यह बस एक डिव की तरह खड़ा

[01:17:00] रहेगा वहां पे अब यह एक ब्लॉक एलिमेंट

[01:17:04] होता है तो अब अगर हम इसको इंस्पेक्ट करें

[01:17:07] अपने पेज को तो यहां पर कोड के अंदर जाकर

[01:17:09] हमें दिख रहा है लेफ्ट साइड में कि डिव है

[01:17:12] पर एक्चुअली डिव की हाइट बाय डिफॉल्ट रो

[01:17:14] सेट हुई है ये यहां पे 1037 * यहां पर डिव

[01:17:19] के ऊपर जाएं अगर तो 1037 * 0 दिखा रहा है

[01:17:22] तो यहां पे रो जो है वो हमारे डिव की हाइट

[01:17:25] है बाय डिफॉल्ट डिव की हाइट जीरो सेट होती

[01:17:26] है जब उसके अंदर कोई एलिमेंट नहीं होता

[01:17:28] लेकिन अगर उसके अंदर हम डाल दें एक

[01:17:31] पैराग्राफ डाल देते

[01:17:33] हैं हेलो वर्ल्ड लिखकर तो हेलो वर्ल्ड

[01:17:36] लिखकर यह पैराग्राफ जैसे ही हमने डिव के

[01:17:38] अंदर डाला तो अब अगर डिव पर स्क्रोल करें

[01:17:42] तो यह आ गया है

[01:17:44] डिव यहां

[01:17:46] पर अब डिव जो होता है वो एक ब्लॉक एलिमेंट

[01:17:50] होता है यानी वो हमारी स्क्रीन पर फुल

[01:17:53] विड्थ लेता है ब्लॉक एलिमेंट्स वो होते

[01:17:56] हैं जो चाहे उनको जगह कितनी भी चाहिए हो

[01:17:58] पर वो पूरी की पूरी विड्थ यानी पूरी

[01:18:00] स्क्रीन घेर कर खड़े हो जाते हैं जैसे

[01:18:02] यहां पर पैराग्राफ के अंदर मुझे सिर्फ

[01:18:04] हेलो वर्ल्ड लिखना था तो अगर मुझे सिर्फ

[01:18:06] हेलो वर्ल्ड जितनी जगह चाहिए होती यानी

[01:18:08] मुझे बस इतनी जगह

[01:18:09] मिलती इतनी सी जगह तो भी मेरा हेलो वर्ल्ड

[01:18:12] फिट हो जाता लेकिन इसने क्या किया इसने

[01:18:14] पूरी विड्थ को ले लिया कैसे पता चला हमें

[01:18:16] पूरी विड्थ को ले लिया इंस्पेक्ट के अंदर

[01:18:18] जाएंगे और यहां जाएंगे इस एलिमेंट पर तो

[01:18:20] दिख रहा है कि ये येलो लाइन जो है ये पूरी

[01:18:22] विड्थ पर है तो इसने पू विड्थ को ले लिया

[01:18:25] जो भी ब्लॉक एलिमेंट्स होते हैं एचटीएमएल

[01:18:28] के अंदर वो पूरी विड्थ को ले लेते हैं और

[01:18:29] दूसरे टाइप के एलिमेंट्स होते हैं

[01:18:32] हमारे इनलाइन एलिमेंट्स इनलाइन एलिमेंट्स

[01:18:36] क्या करते हैं जितनी उनको जगह चाहिए होती

[01:18:37] है बस उतनी जगह लेते हैं बहुत किफायत के

[01:18:39] साथ काम कर रहे होते हैं तो ब्लॉक

[01:18:41] एलिमेंट्स और इनलाइन एलिमेंट्स को काफी

[01:18:43] सोच समझ के हमें इस्तेमाल करना होता है अब

[01:18:45] डिव का यहां पर कोई स्पेशल केस हमने देखा

[01:18:48] नहीं पर डिव का इस्तेमाल काफी जगह हो सकता

[01:18:51] है जैसे मान लीजिए आपने एक लिखा हेलो

[01:18:53] वर्ल्ड

[01:18:57] उसके अंदर आपने एक और पैराग्राफ के अंदर

[01:18:59] मान लीजिए लिख दिया

[01:19:02] नमस्ते एक और पैराग्राफ के अंदर आपने लिख

[01:19:05] दिया

[01:19:06] हाई अब सेम चीज आप क्या कर सकते हैं यह

[01:19:10] वाला जो हमारा डिव है यह वाला पहला डिव

[01:19:12] इसके अंदर हम ग्रीटिंग्स लिखेंगे और इसके

[01:19:14] अंदर हम लिखेंगे चीजें जो हम बाय करते हुए

[01:19:17] लिखते

[01:19:19] हैं तो इसके अंदर लिखेंगे अपने गुड बाय

[01:19:25] यहां पर लिखेंगे गुड बाय एक में लिख देते

[01:19:28] हैं चाओ इसको कर देते हैं सेव तो हमने एक

[01:19:32] डिव बनाया मतलब ये एक डिव को हम डब्बे की

[01:19:35] तरह इमेजिन कर सकते हैं एक डब्बा है जिसके

[01:19:36] अंदर नमस्ते हेलो वर्ल्ड हाय लिखा है एक

[01:19:38] डब्बा है जिसके अंदर बाय बाय गुड बाय और

[01:19:40] चाव लिखा है इसको सेव करके अगर देखें तो

[01:19:43] हमारी स्क्रीन पर तो कुछ ऐसी चीजें दिख

[01:19:45] रही है जैसे हेलो वर्ल्ड नमस्ते हाय आ गया

[01:19:47] यह बाय गुड बाय चाव आ गया पर यहां पर अगर

[01:19:50] हम इसको इंस्पेक्ट करें तो हम देख पाएंगे

[01:19:53] कि यह जो तीनों एलिमेंट्स

[01:19:56] है एक बार के लिए अपने बाकी एलिमेंट्स को

[01:19:59] हटा देते हैं तो ये तीनों एलिमेंट्स सेम

[01:20:01] डिव के अंदर आ रहे हैं और ये तीनों जो

[01:20:03] एलिमेंट्स हैं वो हमारे सेम डिव के अंदर आ

[01:20:06] रहे हैं अब इफेक्ट देखने के लिए हम क्या

[01:20:09] करेंगे इन डिब्स का कर देंगे कलर चेंज

[01:20:11] जैसे अपने मेन के अंदर जाएंगे डिव के अंदर

[01:20:15] जाएंगे और यहां

[01:20:17] पर ऐड कर देंगे

[01:20:20] कलर एज रेड यहां पे इस डिव के स्टाइल में

[01:20:26] जाएंगे और यहां ऐड कर देंगे

[01:20:32] बैकग्राउंड कलर इ इक्वल टू रेड तो ये क्या

[01:20:36] हुआ इसने सिर्फ एक जो हमारा डिव था उसको

[01:20:39] बैकग्राउंड कलर रेड दे दिया जिसके अंदर

[01:20:42] हमारी सारी की सारी ग्रीटिंग्स जो है वो

[01:20:43] लिखी हुई थी और जो सेकंड डिव था उसको हम

[01:20:47] दे देते हैं बैकग्राउंड कलर

[01:20:53] एस इसको हम दे देते हैं बैकग्राउंड कलर

[01:20:56] अपना

[01:21:00] ब्लू तो यहां पर यह वाला जो डिव है वो रेड

[01:21:04] से ढक गया है यह वाला डिव हमारा ब्लू से

[01:21:06] ढक गया है पर फॉन्ट अभी दिखाई नहीं दे रहा

[01:21:08] क्योंकि फॉन्ट हमने एक्चुअली चेंज कर दिया

[01:21:10] था टू रेड इसको हम वापस से ब्लैक कर देते

[01:21:14] हैं ये एक्चुअली यहां पे मैंने सीएसएस में

[01:21:17] चेंजेज किए हैं अब ये सारे के जो सारे

[01:21:19] चेंजेज है ये आपको समझने की जरूरत नहीं है

[01:21:21] मैं सिर्फ लेआउट आपको समझा रही हूं कैसे

[01:21:23] चीजें काम कर रही है सीएसएस को हम बाद में

[01:21:25] पढ़ रहे होंगे पहले एटीएमएल को समझ लेते

[01:21:27] हैं सिर्फ अंडरस्टैंडिंग के लिए अभी मैंने

[01:21:29] कलर चेंज करके दिखाए इस पूरे डिव को हमने

[01:21:31] रेड कर दिया इस पूरे डिव को एक साथ हमने

[01:21:33] ब्लू कर दिया तो डिव का असली फायदा तब

[01:21:35] होता है जब हमें काफी सारे कलेक्टिव

[01:21:37] एलिमेंट्स के साथ ना एक साथ चेंजेज करने

[01:21:39] पड़ते हैं तो उस टाइम पर आप डिव के अंदर

[01:21:41] इकट्ठा करिए एलिमेंट्स को तो आप डब्बे के

[01:21:43] अंदर उनको साइड बाय साइड अरेंज करना चाहते

[01:21:45] हैं एक के बाद एक अरेंज करना चाहते हैं वो

[01:21:47] फिर आपके ऊपर आ जाता है तो एक साथ जब

[01:21:50] अरेंजमेंट करनी हो काफी सारे एलिमेंट्स की

[01:21:52] तो वहां पर हम इस्तेमाल कर सकते हैं ने

[01:21:54] डिप का ये कुछ लिस्ट ऑफ ब्लॉक एलिमेंट्स

[01:21:57] हैं मतलब वो एलिमेंट्स जो पूरी की पूरी

[01:22:00] विड्थ को घेर लेते हैं जैसे हमारा जो फुटर

[01:22:02] होता है वो पूरी विड्थ को घेर लेगा अगर हम

[01:22:04] एनालाइज भी करें इसमें इंस्पेक्ट कर लेते

[01:22:06] हैं एक बार जैसे इंस्पेक्ट करके हम देखें

[01:22:09] फुटर के अंदर पूरा का पूरा जो एरिया है वो

[01:22:11] हाईलाइट हो रहा है तो ये पूरी विड्थ पर जा

[01:22:13] रहा है इनफैक्ट हेडर भी जो है हमारा पूरी

[01:22:16] विड्थ लेता है हमारा डिव भी पूरी विट लेता

[01:22:19] है आर्टिकल भी पूरी विट लेता है इस तरीके

[01:22:20] से काफी सारे एलिमेंट्स होते हैं अब बात

[01:22:23] करते हैं स्पैन टैग की स्पैन टैग इज आल्सो

[01:22:26] कंटेनर लाइक डिव बट इट इज यूज्ड फॉर अदर

[01:22:28] एचटीएमएल एलिमेंट्स वो एचटीएमएल एलिमेंट्स

[01:22:30] जिसके अंदर हम उतनी ही जगह लेना चाहते हैं

[01:22:33] जितनी की हमें जरूरत है उसमें हम यूज करते

[01:22:35] हैं स्पैन का जैसे इस सेम ग्रीटिंग को अगर

[01:22:38] मैं स्पैन की हेल्प से प्रिंट

[01:22:40] करवाऊं स्पैन एंड

[01:22:47] स्पैन तो अब एनालाइज करूं बाय डिफॉल्ट

[01:22:50] मेरा जो पैराग्राफ

[01:22:52] है वहां से अगर हटाकर मुझे प्रिंट करना है

[01:22:56] सिर्फ

[01:22:56] बाय इसको कर लिया

[01:22:59] सेव अब अगर इसको एनालाइज करें तो ये जो

[01:23:03] बाय है इसमें आप देखेंगे ब्लू पार्ट जो

[01:23:05] हाईलाइट हो रहा है वो सिर्फ बाय वाला

[01:23:06] पार्ट है यानी इसमें उतनी ही जगह घेरी जा

[01:23:09] रही है जितनी जगह जरूरी है उस एलिमेंट को

[01:23:12] स्पेसिंग के लिए तो स्पैन जो एलिमेंट होता

[01:23:15] है वो हमारा इनलाइन एलिमेंट होता है मतलब

[01:23:17] इट टेक्स इट्स विड्थ एज पर साइज जितना

[01:23:19] साइज है उतनी ही जगह वो

[01:23:22] घेरे इसके अंदर भी अगर हम स्पैन का कलर अब

[01:23:25] चेंज करना चाहे तो मेन के अंदर जाएंगे

[01:23:29] स्पैन यहां से कर लेंगे

[01:23:32] बैकग्राउंड कलर इज इक्वल टू

[01:23:37] पिंक तो ये यहां पे पिंक कलर में हाईलाइट

[01:23:41] हमें दिख जाएगा कि यह हमारा एक स्पैन

[01:23:43] एलिमेंट है अब स्पैन एक इनलाइन एलिमेंट

[01:23:46] होता है और यहां पे बहुत सारे ये इनलाइन

[01:23:49] एलिमेंट्स की हमने आपको लिस्ट दे दी है

[01:23:51] इसमें से देखें तो हमारा जो एंकर ड होता

[01:23:54] है वो भी एक इनलाइन एलिमेंट होता है जो

[01:23:57] हमारा बीआर टैग होता है वो भी एक इनलाइन

[01:23:59] एलिमेंट होता है हमारा इमेज एक इनलाइन

[01:24:01] एलिमेंट होता है जिसको इटैलिक में आप

[01:24:03] लिखते हैं जिसको आप बोल्ड में लिखते हैं

[01:24:05] या हमारे जो सब स्क्रिप्ट सुपरस्क्रिप्ट

[01:24:07] होते हैं ये सारे हमारे इनलाइन टैग्स होते

[01:24:09] हैं तो ये टैग्स उतनी जगह घिरते हैं जितनी

[01:24:11] इनको जरूरत है तो ये सारे हमने काफी सारे

[01:24:14] जो टैग्स हैं उनको रिविजिट किया लेआउट

[01:24:16] कैसे प्रॉपर्ली बनाना है अपनी वेबसाइट का

[01:24:18] डिव के अंदर चीजों को डालना है हेडर में

[01:24:20] डालना है मेन में डालना है फुटर में डालना

[01:24:22] है उस तरीके से अपनी वेबसाइट को हमें

[01:24:24] अच्छे से डिजाइन करना है अब इसमें

[01:24:26] प्रोजेक्ट वन के अंदर एक और टास्क आप

[01:24:28] लोगों के लिए ऐड हो गया है कि हमें सबसे

[01:24:30] पहले तो होम पेज पर अपनी एक इमेज लगानी है

[01:24:32] अपनी एक इमेज लगानी है उस पर हो सकता है

[01:24:35] आप इस इमेज को

[01:24:39] क्लिकब्रिक्स

[01:24:43] हैं या आपकी गिट हब या

[01:24:54] या आपने मेन सेक्शन में डिवाइड करना है

[01:24:56] डिफरेंट डिफरेंट सेक्शंस में और उससे

[01:24:58] हमारी जो वेबसाइट है वो और ज्यादा इंप्रूव

[01:25:00] हो रही होगी यहां तक हमने खत्म कर लिया

[01:25:02] अपना लेवल थ्री और नेक्स्ट हम बात करेंगे

[01:25:05] शुरुआत करेंगे अपने लेवल फोर की जो है

[01:25:07] आल्सो लेवल प्रो अब हम आ ग हैं अपने फाइनल

[01:25:11] लेवल यानी अपने प्रो लेवल पर और इस चैप्टर

[01:25:13] के अंदर इस लेवल के अंदर हम पढ़ने वाले

[01:25:15] हैं अबाउट लिस्ट अबाउट फॉर्म्स एंड अबाउट

[01:25:18] टेबल्स अब कभी-कभी ऐसी सिचुएशन आती है जब

[01:25:20] हमें कोई लिस्ट ऑफ चीजें अपने पेज पर

[01:25:23] डिस्प्ले करनी पड़ती है जैसे अगर हमने कोई

[01:25:25] पोर्टफोलियो के अंदर एजुकेशन का पेज बनाया

[01:25:27] है तो उसमें हमें हमें 10थ के मार्क्स

[01:25:30] अपने 12थ के मार्क्स अपने कॉलेज के

[01:25:31] मार्क्स अगर मास्टर्स कि है तो वो सारी

[01:25:33] इंफॉर्मेशन हम चाहते हैं अगर लिस्ट की

[01:25:35] फॉर्म में डिस्प्ले कराना या फिर अगर हमने

[01:25:37] तीन-चार प्रोजेक्ट्स बनाए तो उनको हम

[01:25:39] लिस्ट की फॉर्म में डिस्प्ले कराना चाहते

[01:25:40] हैं तो एचटीएमएल के अंदर लिस्ट की फॉर्म

[01:25:43] में चीजें डिस्प्ले कराने के लिए भी हमारे

[01:25:45] पास कुछ टैग्स होते हैं तो लिस्ट जो होती

[01:25:47] है सबसे पहले वो अन

[01:25:49] ऑर्डर्स की लिस्ट एचटीएमएल के अंदर होती

[01:25:52] है अन ऑर्डर्स का म मतलब है कि सिर्फ

[01:25:55] बुलेट पॉइंट्स की फॉर्म में हमारा जो डाटा

[01:25:57] है वो हमारे पास प्रिंट होकर आ रहा होगा

[01:25:59] और ऑर्डर्स हमने 1 2 3 4 कोई ऑर्डर दे

[01:26:03] दिया कोई सीक्वेंस दे दिया जिसकी फॉर्म

[01:26:05] में वो डिस्प्ले हो रहे हैं इसमें हमारे

[01:26:06] रोमन न्यूमेरल्स भी हो सकते हैं 1 2 3 एंड

[01:26:10] फोर या फिर हमारे पास ए बी सडी हम इस

[01:26:13] तरीके से भी डिस्प्ले करा सकते हैं तो ये

[01:26:15] होती है हमारी ऑर्डर्स एंड ये है हमारी अन

[01:26:18] ऑर्ड लिस्ट अब सबसे पहले बात करेंगे

[01:26:24] एक टैग बनाना पड़ता है जिसमें हम लिखते

[01:26:26] हैं यूल यूल स्टैंड्स फॉर अन ऑर्डर्स अब

[01:26:29] अन ऑर्डर्स को बनाने के लिए हमने टैग

[01:26:32] इस्तेमाल कर लिया उसके अंदर लिस्ट का हर

[01:26:34] एक आइटम को हम डिस्प्ले कराते हैं एआई की

[01:26:36] हेल्प से यहां पे एआई स्टैंड करता है फॉर

[01:26:39] लिस्ट आइटम तो इस तरीके से एक लिस्ट बनाते

[01:26:41] हैं अपने मेन के अंदर हम कंटेंट लिख रहे

[01:26:44] होंगे यहां पर बनाएंगे यूल से एक अनडेड

[01:26:46] लिस्ट जिसके अंदर लिस्ट का पहला आइटम आ

[01:26:49] जाएगा एल हम एक फ्रूट्स की लिस्ट यहां पे

[01:26:53] बनाने वाले हैं दूसरा आइटम मान लीजिए

[01:26:55] हमारे पास है मैंगो तीसरा आइटम हमारे पास

[01:26:58] आ गया

[01:27:00] है लीची तो इसको कर लेते हैं सेव तो जब भी

[01:27:04] हम लिस्ट बनाएंगे वो हमारे पास कुछ ऐसी

[01:27:06] बनकर आएगी जिसमें बुलेट पॉइंट्स की हेल्प

[01:27:09] से हमारे पास आइटम्स जो हैं वो डिस्प्ले

[01:27:11] हो रहे हैं अब स्पेशल चीज यह है कि लिस्ट

[01:27:13] के अंदर कुछ-कुछ एटिबल होते हैं जिनकी मदद

[01:27:15] से हम इन बुलेट पॉइंट्स को चेंज कर सकते

[01:27:17] हैं जैसे यहां पर जो बुलेट पॉइंट्स हमारे

[01:27:19] लिए प्रिंट हुए हैं वो थोड़े से सर्कुलर

[01:27:21] हैं अगर हम चाहते हैं कि हम डिस्क शेप के

[01:27:23] उनको बनाना चाहते हैं तो वो चेंज करने के

[01:27:25] लिए हम अपने सीएसएस के अंदर चाहे तो इन

[01:27:27] बुलेट्स को हम स्क्वायर शेप में कर सकते

[01:27:29] हैं या फिर इनको हम ट्रायंगल शेप में कर

[01:27:31] सकते हैं डिस्क शेप में कर सकते हैं तो

[01:27:33] यहां यूल के अंदर जाके आप एमडीएन

[01:27:35] रेफरेंसेस के अंदर जाएंगे तो वहां पे जाके

[01:27:37] सारी इंफॉर्मेशन हमें मिल रही होगी अब इस

[01:27:39] लिस्ट के अंदर हम सबलिस्ट भी बना सकते हैं

[01:27:42] जैसे अगर मुझे

[01:27:54] कलर जो है एप्पल का कलर है रेड और सीजन

[01:28:00] में हम लिख सकते हैं विंटर्स सेम चीज हम

[01:28:04] कर सकते हैं मैंगो के लिए तो मैंगो के लिए

[01:28:06] कलर में हम लिख देंगे येलो एंड सीजन में

[01:28:10] हम लिख देंगे तो यहां क्या हुआ एक लिस्ट

[01:28:13] बनी और उसके अंदर कलर रेड और सीजन विंटर्स

[01:28:16] करके एक सब लिस्ट आ गई है मैंगो के अंदर

[01:28:18] भी दो जो बुलेट पॉइंट्स है वो सब लिस्ट के

[01:28:21] आ गए हैं तो लिस्ट के अंदर एक और दूसरी

[01:28:23] लिस्ट क्रिएट करना भी पॉसिबल है अब

[01:28:26] नेक्स्ट बात करते हैं अपनी ऑर्ड लिस्ट की

[01:28:28] ऑर्ड लिस्ट के अंदर जो हमारे आइटम्स जिनको

[01:28:30] भी हम प्लेस करते हैं वो सारे नंबर्स के

[01:28:32] साथ आते हैं जैसे हमारे पास आएगा वन एप्पल

[01:28:35] या टू

[01:28:37] मैंगो इसको कैसे लिखना है सिंपली सेम

[01:28:41] लिस्ट के लिए यानी इस लिस्ट को हम कर लेते

[01:28:43] हैं कॉपी और इसको कर देते हैं कॉमेंट

[01:28:46] आउट इसको कर दिया पेस्ट और सिर्फ

[01:28:54] आइटम्स को सेम रखना है तो इसको अगर सेव

[01:28:56] करें तो ये वन आ गया फॉर एप्पल टू आ गया

[01:28:58] फॉर मैंगो थ्री आ गया फॉर लीची तो 1 2 3

[01:29:01] हमारे पास नंबरिंग हो ग है पर अंदर वाली

[01:29:03] लिस्ट आप देखें तो उसमें बुलेट पॉइंट्स है

[01:29:04] क्योंकि अंदर वाली लिस्ट में अभी भी यूल

[01:29:07] है हमारे पास उसको भी अगर ऑर्ड बनाना है

[01:29:09] तो उसमें भी चीजें जो हैं वो हम लिख लेते

[01:29:12] हैं ओ इसको भी कर लेते हैं सेव तो बाहर भी

[01:29:15] वन आ गया है अंदर भी वन आ गया है अब इस

[01:29:18] लिस्ट के जो नंबर्स है इनको भी हम चेंज कर

[01:29:20] सकते हैं ए बी सीडी लिख सकते हैं रोमन

[01:29:22] न्यूमेरल्स कर सकते हैं उसके बारे में भी

[01:29:24] पढ़ सकते हैं एमडीएन रेफरेंसेस में जाके

[01:29:26] नेक्स्ट हम बात करने वाले हैं टेबल्स की

[01:29:28] अब बहुत बार ऐसा होता है कि रियल लाइफ

[01:29:30] टेबल हमें कुछ अपने वेबसाइट पर डिस्प्ले

[01:29:32] करनी पड़ सकती है हो सकता है कि आपकी जो

[01:29:34] वेबसाइट्स है वो कॉलेजेस के बारे में

[01:29:36] इंफॉर्मेशन दे रही है या जेई मेंस की हमने

[01:29:38] काफी सारी वेबसाइट देखी होंगी जिसमें

[01:29:40] लास्ट ईयर का जेई मेंस का स्कोर होता है

[01:29:42] या और साथ के साथ कितना परसेंटाइल कट ऑफ

[01:29:45] आने वाला है या कितने मार्क्स पे कितनी

[01:29:47] रैंक आने वाली है तो वो टेबल फॉर्मेट में

[01:29:48] वैसी इंफॉर्मेशन अच्छी लगती है या

[01:29:50] स्टूडेंट्स की लिस्ट है जिसमें स्टूडेंट्स

[01:29:52] के रोल नंबर लिखें और नाम लिखें वैसे

[01:29:54] इंफॉर्मेशन टेबल फॉर्मेट में बहुत सुंदर

[01:29:56] लगती है तो वैसे ही रियल लाइफ टेबल्स को

[01:29:58] जब हम अपने वेबसाइट पर अपने वेब पेज पर

[01:30:01] डिस्प्ले कराना चाहते हैं तो वहां हम यूज

[01:30:02] करते हैं एचटीएमएल टेबल्स का एटीएमएल

[01:30:05] टेबल्स में हम मेजर्ली तीन चीजों की बात

[01:30:07] करेंगे पहला टैग इनमें से है टीआर यानी

[01:30:11] टेबल रो टैग इसकी हेल्प से हम हर एक टेबल

[01:30:15] के अंदर रो जो है वह क्रिएट करते हैं

[01:30:18] दूसरा है हमारा टेबल डाटा टैग जिसके अंदर

[01:30:21] टेबल का जो हम डाटा डालना चाहते हैं उसको

[01:30:23] हम डाल रहे होते हैं और तीसरा होता है

[01:30:25] हमारा टेबल हेडर टैग जिसके अंदर हम टेबल

[01:30:28] का जो हेडर होता है मतलब मेन ऊपर वाले

[01:30:30] कॉलम्स का नाम कि इसके अंदर रोल नंबर लिखे

[01:30:32] जाएंगे या इसके अंदर नेम लिखा जाएगा इसके

[01:30:34] अंदर फोन नंबर लिखा जाएगा वो वाली हेडर

[01:30:37] वाली जो सबसे ऊपर वाली रो हम बनाते हैं

[01:30:38] उसको भी क्रिएट कर सकते हैं अब एचटीएमएल

[01:30:40] की सबसे खास बात यह है कि इसमें आपको इतने

[01:30:43] सारे टैग्स ना याद करने की जरूरत नहीं है

[01:30:45] आप जितना इनको प्रैक्टिस करेंगे ना खुद से

[01:30:46] चीजें बिल्ड करेंगे मोस्टली आपको खुद से

[01:30:48] याद हो जाएंगे एंड साथ के साथ जब भी जरूरत

[01:30:50] पड़े आप सिंपली google2 एन रेफरेंसेस चेक

[01:30:53] कर सकते हैं बहुत बहुत सारे रिसोर्सेस

[01:30:54] ऑनलाइन अवेलेबल हैं तो बिल्कुल टेंशन नहीं

[01:30:56] लेनी अभी कि हम इतने सारे टैग्स पढ़ रहे

[01:30:58] हैं इतने सारे याद कैसे रहेंगे वो वाला

[01:31:00] प्रेशर बिल्कुल नहीं लेना है सिर्फ सिंपली

[01:31:02] समझते जाना है बहुत लेट बैक होके बहुत इजी

[01:31:04] गोइंग तरीके से सिर्फ सिंपली समझना है

[01:31:07] इनमें से सबसे पहला है हमारा टेबल रो अब

[01:31:09] इन तीनों टैग्स को हम यूज किस तरीके से

[01:31:11] करते हैं इनको कुछ इस तरीके से हम यूज कर

[01:31:13] रहे होते हैं जैसे अगर राइट में हमें जो

[01:31:16] ये टेबल दिख रही है ऐसी हमें टेबल बनानी

[01:31:17] हूं जिसमें हमारा हेडर जो है वो है नेम और

[01:31:20] रोल नंबर और उसके अंदर डाटा हमने स्टोर

[01:31:22] करा दिया अपना नाम और अपना रोल होल नंबर

[01:31:24] तो उसको क्रिएट हम करेंगे टेबल टैग की मदद

[01:31:27] से अभी एक सिमटिक टैग है क्योंकि टेबल से

[01:31:29] हमें समझ आ रहा है कि हम एक टेबल क्रिएट

[01:31:31] करने वाले हैं इसके अंदर सबसे पहली जो रो

[01:31:34] है मतलब यह वाली जो रो है इतना हिस्सा

[01:31:36] इसको हम क्रिएट कर रहे हैं अपने इस टीआर

[01:31:39] टैग की मदद से ये जो टीआर टैग है इसकी मदद

[01:31:43] से ये वाली रो क्रिएट हो रही है और ये जो

[01:31:45] टीआर टैग है इसकी मदद से दूसरे वाली टेबल

[01:31:48] रो क्रिएट हो रही है पहले वाली रो में

[01:31:50] हमने हेडर डिफाइन किया आप ध्यान से

[01:31:52] देखेंगे तो तो हेडर में हमारे पास नेम आ

[01:31:54] गया है रोल नंबर आ गया दूसरे वाली रो में

[01:31:56] हमने डिफाइन किया है अपने डाटा को यहां पर

[01:31:59] भी टीडी होना चाहिए तो यहां पर डेटा को

[01:32:01] हमने डिफाइन किया तो उसकी वजह से हमारे

[01:32:02] पास हमारा डाटा जो है टेबल के अंदर प्रिंट

[01:32:04] हो गया है इस फॉर्मेट में अपनी टेबल को

[01:32:07] क्रिएट करके देखते हैं हमारी जो लिस्ट है

[01:32:10] इसको कर लेते हैं कॉमेंट आउट और अब फाइनली

[01:32:13] एक टेबल बनाते हैं टेबल हमने बनाई इसके

[01:32:15] अंदर सबसे पहले बनाएंगे अपनी टेबल रो

[01:32:18] जिसके अंदर सबसे पहले डिफाइन करेंगे अपने

[01:32:20] हेडर्स तो हम स्टोर करने वाले हैं सबसे

[01:32:22] पहले तो नेम उसके बाद हम स्टोर करने वाले

[01:32:25] हैं दूसरा टेबल हेडर व्हिच इज हमारा रोल

[01:32:30] नंबर अब सेम जो हमने टेबल रो बनाई है इसकी

[01:32:34] जगह हम क्या करेंगे बनाएंगे एक और टेबल रो

[01:32:38] जिसके अंदर डाटा स्टोर होगा यानी टेबल

[01:32:40] डाटा सबसे पहले नेम आया था तो नेम के नीचे

[01:32:43] हम लिखना चाहते हैं अपना नाम एंड उसके बाद

[01:32:45] हमारे पास आया था हमारा रोल नंबर तो उसके

[01:32:47] नीचे भी लिख देंगे अपना रोल नंबर इसको कर

[01:32:50] लेते हैं सेव यहां पर हल्का सा इसको स्पेस

[01:32:52] दे देते हैं यह है टेबल अब यह जो लेफ्ट

[01:32:55] साइड में लाइने हैं हो सकता है आपके

[01:32:56] टेक्स्ट एडिटर में ना आ रही हो तो उसके

[01:32:59] लिए आप एक्सटेंशन में जाके एक प्रीटियर

[01:33:01] नाम का एक एक्सटेंशन होता है इसको आप कर

[01:33:03] सकते हैं इंस्टॉल तो यहां पर मैंने इसको

[01:33:06] इंस्टॉल कर रखा है तो ऑटोमेटिक मेरे लिए

[01:33:07] जो लाइंस है वह हाईलाइट हो रही हैं तो

[01:33:09] आपको भी अगर वैसी ही सिमिलर हाइलाइटिंग

[01:33:11] चाहिए तो आप इसको इंस्टॉल कर सकते हैं तो

[01:33:13] यहां पे टेबल रो है उसके अंदर हमने हेडर

[01:33:16] क्रिएट कर लिया उसके अंदर हमने टेबल डाटा

[01:33:18] डाल दिया इसको सेव करके रन करते हैं तो

[01:33:20] हमारे लिए एक टेबल आ गई है अब टेबल की

[01:33:22] लाइनें यहां पर नहीं दिख रही होंगी पर ये

[01:33:24] जो फॉर्मेट है नेम रोल नंबर का अब जो हेडर

[01:33:27] है वो बोल्ड में हाइलाइटेड है और नीचे का

[01:33:29] डाटा हमारे पास सिंपली लिखा हुआ आ रहा है

[01:33:31] सिमिलर तरीके से हम और ज्यादा रोज ऐड कर

[01:33:34] सकते हैं अपनी टेबल के अंदर और ज्यादा

[01:33:35] डाटा के साथ मान लीजिए हमें एक और डाटा ऐड

[01:33:38] करना है जिसके अंदर एक और डिफरेंट नाम हम

[01:33:40] रख रहे होंगे जिसके अंदर एक और नाम हम तो

[01:33:43] इस तरीके से टेबल के अंदर काफी सारी

[01:33:45] इंफॉर्मेशन आ गई है और ऊपर आ गए हैं हमारे

[01:33:47] नाम इन द हेडर फॉर्मेट अब इसमें साथ के

[01:33:50] साथ हम काफी सारे जो चेंजेज हैं वो इस

[01:33:52] टेबल के अंदर कर सकते हैं अब इस टेबल के

[01:33:54] अंदर हम और भी काफी सारे चेंजेज जो हैं वो

[01:33:56] कर सकते हैं इनमें से सबसे पहला है टेबल

[01:33:58] के अंदर एक कैप्शन ऐड कर देना कैप्शन क्या

[01:34:00] होता है जैसे हमारी फोटो के नीचे हम

[01:34:02] कैप्शन लिखते हैं जिसमें हम डिस्क्राइब कर

[01:34:04] रहे होते हैं फोटो के अंदर क्या चल रहा है

[01:34:05] वैसे ही टेबल के अंदर क्या चल रहा है वो

[01:34:07] उसका कैप्शन बता देता है तो कैप्शन के

[01:34:09] अंदर हम डाल रहे होंगे स्टूडेंट डाटा की

[01:34:11] स्टूडेंट डाटा के बारे में टेबल है मान

[01:34:13] लीजिए आप लोगों के ब्लड ग्रुप स्टोर कर

[01:34:15] रहे हैं तो आप लिख सकते हैं दिस इज अ

[01:34:17] मेडिकल इंफॉर्मेशन टेबल या जिस भी तरीके

[01:34:19] का आप डाटा स्टोर कर रहे हैं बस उसकी

[01:34:20] इंफॉर्मेशन तो उसके लिए हमें सिंपली ऊपर

[01:34:23] एक कैप्शन टैग को इस्तेमाल करना पड़ता है

[01:34:25] टेबल के अंदर हम लिख देंगे कैप्शन और इसके

[01:34:28] अंदर कैप्शन हम लिख रहे होंगे स्टूडेंट

[01:34:30] डाटा इसको सेव कर लें अगर तो इस तरीके से

[01:34:33] हमारी टेबल का कैप्शन हमारे लिए आ गया है

[01:34:35] अब टेबल कैप्शन के अलावा हमारे पास दो और

[01:34:38] सेक्शंस होते हैं दो और टैग्स होते हैं

[01:34:40] जिनको हम टेबल में यूज़ कर सकते हैं इनमें

[01:34:43] से सबसे पहला होता है हमारा टेबल हेड और

[01:34:45] दूसरा होता है हमारा टेबल बॉडी अब टेबल

[01:34:48] हेड का काम होता है टेबल के हेड को यानी

[01:34:50] मेन जो हेडलाइंस है हेडर है उसको रैप अप

[01:34:53] कर लेना और टेबल बॉडी का काम होता है

[01:34:55] हमारे टेबल के अंदर जो भी डाटा है उसको

[01:34:57] रैप अप कर लेना अगर इनका हमें इस्तेमाल

[01:34:59] करना हो यह भी वैसे लेआउट के लिए यूज होते

[01:35:02] हैं तो इसके लिए हम यहां पर लिख देंगे टी

[01:35:04] हेड और टी हेड के अंदर आ रहा होगा हमारा

[01:35:07] हेडर तक का पार्ट मतलब फर्स्ट रो जो हमने

[01:35:09] ऐड की थी एंड उसके बाद शुरू हो जाती है

[01:35:12] हमारी टी बॉडी टी बॉडी के अंदर आ रहा होगा

[01:35:15] सारा का सारा हमारा डाटा जो हमने टी हेड

[01:35:17] की हेल्प से डिफाइन किया है इसको कर लेते

[01:35:20] हैं सेव तो यहां पे विजिबली कोई चेंजेज

[01:35:22] नहीं दिख रहे पर अगर आप इंस्पेक्ट करेंगे

[01:35:26] तो आपको चेंजेज दिखेंगे जैसे पता चलेगा कि

[01:35:29] ये जो इंडिविजुअल है ये हमारे डेटा है ये

[01:35:32] हमारी पूरी की पूरी टेबल है अगर राइट में

[01:35:35] जाएं और एक सेक्शन पे स्क्रोल करना चाहे

[01:35:38] जैसे टेबल के अंदर जाकर अगर हमें सिर्फ

[01:35:41] टेबल बॉडी देखनी है तो इतना पार्ट हाईलाइट

[01:35:43] हो जाएगा अगर सिर्फ टेबल हेड देखना है तो

[01:35:46] टेबल हेड में हमारा टेबल हेड यहां से

[01:35:48] स्टार्ट हो रहा है और उसके अंदर सारी की

[01:35:50] सारी चीजें हैं

[01:35:52] अंट्स एक और और एट्रिल होता है टेबल के

[01:35:54] अंदर जो कभी-कभी काफी काम आता है वो है

[01:35:57] कॉल स्पैन का यानी कॉलम कितने बाकी कॉलम्स

[01:36:00] तक स्पैन कर रहा है जैसे अगर हम चाहते हैं

[01:36:03] कि इन दोनों कॉलम्स का नाम यहां पर अभी

[01:36:06] हमने इस कॉलम को नाम दिया है नेम इसको नाम

[01:36:08] दिया है रूल नंबर पर हम इन दोनों कॉलम्स

[01:36:10] का नाम बस इंफॉर्मेशन रखना चाहते हैं तो

[01:36:13] हम क्या करेंगे हम यहां पर एक तो तरीका

[01:36:16] होता कि हम एक हेडर ही हटा दे मतलब रोल

[01:36:18] नंबर वाला हमने हेडर ही हटा दिया और अब एक

[01:36:21] सिंपल हमने हेडर लगाया है जिसको हमने नाम

[01:36:23] दे दिया है इंफॉर्मेशन इसको अगर हम करते

[01:36:26] हैं तो इंफॉर्मेशन जो है हमारे सिर्फ

[01:36:27] फर्स्ट कॉलम के ऊपर आता है लेकिन हम चाहते

[01:36:30] हैं ये इंफॉर्मेशन वाली जो वैल्यू है वो

[01:36:32] दो कॉलम्स के बिल्कुल सेंटर में आए दोनों

[01:36:34] कॉलम्स की जगह को ले तो उस टाइम पर हम

[01:36:36] इस्तेमाल करते हैं कॉल स्पैन का कॉल स्पैन

[01:36:39] क्या करेगा हमारे लिए इसमें हम डिफाइन कर

[01:36:41] देते हैं कितने कॉलम्स की जगह ये हेडर

[01:36:43] हमारा लेने वाला है तो इसमें हम लिख देते

[01:36:45] हैं टू तो इस तरीके से अब ये जो

[01:36:48] इंफॉर्मेशन है वो दोनों कॉलम्स के ऊपर आ

[01:36:50] गया है सेंटर में आ गया दोनों कॉलम्स की

[01:36:52] उसने जगह ले ली है तो जब भी हमें ऐसा कोई

[01:36:55] दो-तीन कॉलम्स को मर्ज करना हो इट्स

[01:36:57] बेसिकली एक्सेल शीट के अंदर कभी-कभी हम

[01:36:59] सेल्स को मर्ज कर देते हैं ना कि दो-तीन

[01:37:00] सेल्स पे सेम इंफॉर्मेशन सेम कॉलम का नाम

[01:37:03] हम दे पाएं उसी तरीके से टेबल में जब मर्ज

[01:37:05] करना होता है एचटीएमएल में तो हम कॉल

[01:37:07] स्पैन का इस्तेमाल करते हैं नेक्स्ट बात

[01:37:09] करते हैं फॉर्म्स इन

[01:37:13] एचटीएमएल है जब भी हम

[01:37:17] facebook's चट पर जाते हैं कहीं भी जाते

[01:37:20] हैं तो शुरुआत में हमें क्या करना पड़ता

[01:37:21] है साइन अप करना पड़ता है या कभी भी लॉग

[01:37:23] इन करना पड़ता है तो हमें एक फॉर्म दिखाई

[01:37:25] देता है जिस फॉर्म में हमें या तो यूजर

[01:37:27] नेम ऐड करना पड़ता है अपना पासवर्ड ऐड

[01:37:29] करना पड़ता है शुरुआत में हमें नाम फुल

[01:37:32] नेम फोन नंबर बाकी सारी चीजें ऐड करनी

[01:37:34] पड़ती है जीमल आईडी डालनी पड़ती है तो इस

[01:37:36] तरीके के जो फॉर्म्स है ये सारे के सारे

[01:37:38] फॉर्म्स एटीएमएल में क्रिएट होते हैं तो

[01:37:40] फॉर्म्स को एचटीएमएल में क्रिएट करने के

[01:37:42] लिए हमें यूज करना पड़ता है अपने फॉर्म

[01:37:44] टैग का तो फॉर्म्स आर यूज्ड टू कलेक्ट

[01:37:47] डाटा फ्रॉम द यूजर इसमें हमारे एग्जांपल आ

[01:37:49] जाते हैं हमारे साइनअप फॉर्म्स होते हैं

[01:37:51] लॉग इन फॉर्म्स होते हैं कुछ वेबसाइट्स पे

[01:37:52] आप देखेंगे हेल्प रिक्वेस्ट का फॉर्म होता

[01:37:54] है या फिर कांटेक्ट का फॉर्म होता है

[01:37:56] जिसमें आप अपनी आईडी छोड़ सकते हैं कि

[01:37:58] मुझे कोई कांटेक्ट कर लो मुझे आपका ये

[01:37:59] सामान खरीदना है इस तरीके की चीजें अब

[01:38:01] फॉर्म का यूज किया जाता है फॉर्म टैग के

[01:38:03] लिए अब फॉर्म टैग का इस्तेमाल किया जाता

[01:38:06] है फॉर्म को क्रिएट करने के लिए तो ऊपर

[01:38:08] डालते हैं हम अपना ओपनिंग टैग फॉर्म नीचे

[01:38:10] डालते हैं क्लोजिंग टैग और बीच में आता है

[01:38:12] फॉर्म का बाकी सारा का सारा फॉर्म कंटेंट

[01:38:14] तो हम सबसे पहले डिफाइन कर रहे होंगे एक

[01:38:16] फॉर्म के लिए उसका एक्शन एक्शन क्या होता

[01:38:18] है कि फॉर्म में जितना भी डाटा आना है वो

[01:38:21] फाइनली किसके पास जाएगा इसके के लिए

[01:38:23] यूजुअली हमारे पास एक फ्रंट एंड होता है

[01:38:25] यानी एक जावास्क्रिप्ट फाइल जो या तो उसको

[01:38:27] प्रोसेस करेगी या वो फॉर्म का डाटा किसी

[01:38:29] बैक एंड फाइल के पास जा सकता है अब यहां

[01:38:32] पे मैंने पीएचपी का एग्जांपल लिया है मतलब

[01:38:34] बैक एंड फाइल के पास वो फॉर्म का डाटा जा

[01:38:35] रहा है ये फाइल का हमने नाम दे दिया अभी

[01:38:38] के लिए एक्शन हमारे लिए इतना रिलेवेंट

[01:38:39] नहीं है बेसिकली हम बस फॉर्म डिजाइन करना

[01:38:42] सीख रहे हैं उसका डाटा कहां जा रहा है उस

[01:38:44] डटा के साथ बाद में क्या होता है ये वाला

[01:38:46] पार्ट हमारे कंसर्न का अभी नहीं है तो

[01:38:48] सबसे पहले एक फॉर्म को बनाकर देख लेते हैं

[01:38:50] इस ऊपर वाले पूरे पार्ट को हम करने वाले

[01:38:53] हैं कॉमेंट आउट क्रिएट करते हैं अपना एक

[01:38:55] फॉर्म अब फॉर्म के अंदर हमें कोई एक्शन

[01:38:58] डालना पड़ेगा एक्शन में अभी के लिए डाल

[01:39:00] देते हैं कि कोई हमारी एशन ड पीएपी नाम की

[01:39:03] एक फाइल होगी बैक एंड में जो इस फॉर्म के

[01:39:06] डाटा को प्रोसेस कर रही होगी कि आपने लॉग

[01:39:08] इन किया है तो सारी इंफॉर्मेशन आपने डाली

[01:39:10] है क्या साइन अप कर रहे हैं कि आपको लॉग

[01:39:12] इन करना है तो सारा आपने यूजर नेम और

[01:39:13] पासवर्ड सही डाला है क्या कि अगर आप साइन

[01:39:15] अप कर रहे हैं तो फिर सारी इंफॉर्मेशन

[01:39:17] आपके भर के दी है प्रॉपर्ली भर के दी है

[01:39:19] फोन नंबर में ऐसा तो नहीं है ए बी सी डी

[01:39:20] डाल दिया है तो इस तरीके की सारी जो चीजें

[01:39:22] होती हैं एक्शन वाली फाइल में चेक हो रही

[01:39:25] होती है अभी के लिए वो काम करना हमारा

[01:39:27] कंसर्न नहीं है हमें बनाना है सिंपल फॉर्म

[01:39:28] को तो फॉर्म को हम इस तरीके से कुछ डिफाइन

[01:39:31] करते हैं अब फॉर्म के अंदर हम डिफरेंट

[01:39:33] डिफरेंट एलिमेंट्स का जो है इस्तेमाल करते

[01:39:35] हैं कभी-कभी ऐसे भी फॉर्म होते हैं जिसके

[01:39:37] अंदर हमें कुछ अपनी ईमेल आईडी टाइप करनी

[01:39:40] होती है कभी-कभी कोई ऑप्शन हमें सिलेक्ट

[01:39:42] करना होता है अगर आपने google's चलाए हो

[01:39:44] अभी ऑनलाइन सेमेस्टर्स के टाइम पे कोई

[01:39:46] ऑप्शन हमें टिक करने होते हैं या फिर कोई

[01:39:48] बटन को हमें क्लिक करना होता है तो काफी

[01:39:50] सारी चीजें होती हैं इनमें से सबसे पहले

[01:39:51] बात करते हैं पहले फॉर्म एलिमेंट की जिसका

[01:39:54] नाम है इनपुट इनपुट को कुछ हम इस तरीके से

[01:39:57] लिखते हैं इनपुट टैग इसको कहा जाता है

[01:39:59] जिसके अंदर टाइप हमारा होगा टेक्स्ट यानी

[01:40:02] कुछ टेक्स्ट ये इनपुट लेगा और प्लेस

[01:40:04] होल्डर यानी इसके अंदर पहले से क्या लिखा

[01:40:06] होगा इसको लिख कर देखेंगे तो बेटर समझ में

[01:40:09] आएगा बना लेते हैं एक इनपुट इनपुट के अंदर

[01:40:12] टाइप हम दे देते हैं टेक्स्ट टेक्स्ट हमने

[01:40:14] टाइप दिया प्लेस होल्डर लिख

[01:40:16] लिया टाइप समथिंग

[01:40:20] यर तो इस तरीके का इनपुट टैग हमने बना

[01:40:23] लिया है अब यहां पर हमारे लिए क्या हुआ एक

[01:40:26] इनपुट बॉक्स आ गया है जिसके अंदर ऑलरेडी

[01:40:28] लिखा हुआ है टाइप समथिंग हियर तो जो भी

[01:40:30] प्लेस होल्डर के अंदर वैल्यू होती है

[01:40:31] प्लेस होल्डर का इंग्लिश में मतलब होता है

[01:40:33] कि यहां पे कोई ऐसी चीज है जो आप कुछ नहीं

[01:40:36] लिखेंगे तो वो चीज लिखी होगी जैसे इस टाइप

[01:40:38] समथिंग यर के अंदर मैं अपना नाम लिख दूं

[01:40:40] तो पीछे वाला जो बैकग्राउंड टेक्स्ट है वो

[01:40:42] चला जाएगा तो जब भी हमें बैकग्राउंड में

[01:40:44] कुछ टेक्स्ट चाहिए उसको प्लेस होल्डर के

[01:40:45] अंदर डाल देंगे और किस तरीके का हमें

[01:40:47] इनपुट लेना है इनपुट लेना है हमें टेक्स्ट

[01:40:49] टाइप का तो टेक्स्ट टाइप का जब भी इनपुट

[01:40:51] लेते हैं तो यहां पे हमारे पास हम कोई भी

[01:40:55] टेक्स्ट जो है अपना लिख पाते हैं श्रद्धा

[01:40:57] 1 2 3 4 5 6 इस तरीके से मान लीजिए हम एक

[01:41:01] और इनपुट बना लेते हैं तो फॉर्म के अंदर

[01:41:03] एक तो इनपुट बना लेते हैं अपने यूजर नेम

[01:41:06] का कि अपना यूजर नेम एंटर कर दो एक इनपुट

[01:41:09] बनाते हैं अपना पासवर्ड का कि यहां पे

[01:41:12] हमें एंटर करना है पासवर्ड और इसमें टाइप

[01:41:14] क्या है इसमें टाइप भी ना पासवर्ड दे देते

[01:41:16] हैं कर लेते हैं सेव अब यहां पे यूजर नेम

[01:41:19] के अंदर तो हम एंटर कर रहे हैं अपना यूजर

[01:41:21] नेम अब पासवर्ड के अंदर क्या एंटर करें

[01:41:24] पासवर्ड के अंदर जो भी हम एंटर करेंगे वो

[01:41:26] देखिए डॉट्स की फॉर्म में डिस्प्ले हो रहा

[01:41:28] है और हम देख ही नहीं पाएंगे कि वह

[01:41:30] पासवर्ड में हम क्या चीज एंटर कर रहे हैं

[01:41:32] तो इस तरीके से जब भी इनपुट में पासवर्ड

[01:41:34] लेना होता है हम टाइप उसका पासवर्ड डिफाइन

[01:41:36] कर सकते हैं टेक्स्ट डिफाइन करेंगे तो वो

[01:41:38] दिखेगा पासवर्ड डिफाइन करेंगे तो कीज तो

[01:41:40] प्रेस होंगी पर एक्चुअली वो बुलेट पॉइंट्स

[01:41:42] की फॉर्म में आएगा तो दिखेगा नहीं किसी और

[01:41:44] को कि क्या चीज स्क्रीन पर टाइप हो रही है

[01:41:47] अब ये हमने इनपुट के दो टाइप्स देख लिए

[01:41:50] टेक्स्ट और पासवर्ड नेक्स्ट बात करते हैं

[01:41:53] लेबल्स की लेबल क्या काम करते हैं हमारे

[01:41:55] फॉर्म के अंदर लेबल के दो यूजेस होते हैं

[01:41:58] मतलब किसी भी इनपुट के ऊपर हम एक लेबल

[01:42:01] असाइन कर देते हैं लेबल का मतलब होता है

[01:42:03] बेसिकली एक टैग असाइन करना कि हम इस चीज

[01:42:06] को एक कोई स्पेशल नाम दे रहे हैं या जैसे

[01:42:09] स्टूडेंट को रोल नंबर दे देते हैं वैसे ही

[01:42:11] हम किसी इनपुट एलिमेंट को एक लेबल दे देते

[01:42:13] हैं अब लेबल के दो फायदे होते हैं जिनमें

[01:42:15] से सबसे पहला फायदा होता है कि जो भी

[01:42:16] हमारे स्क्रीन रीडर यूजर्स होते हैं मतलब

[01:42:19] हो सकता है हमारी वेबसाइट को यूज करने

[01:42:21] वाले कुछ लोग जो हैं विजुअली पेयर्ड हो

[01:42:23] उनकी आईसाइट खराब है या वो देख नहीं पा

[01:42:25] रहे हैं तो कुछ डिवाइसेज में ये फीचर होता

[01:42:27] है कि डिवाइस जो है ऑटोमेटिक डिटेक्ट करता

[01:42:30] है कि क्या-क्या एलिमेंट स्क्रीन पर हैं

[01:42:32] और वो उस हिसाब से बोलता है ये फीचर आफ के

[01:42:34] अंदर बहुत ज्यादा है कि वेबसाइट पर जो जो

[01:42:36] चीजें लिखी हैं वो बताई जाती हैं तो

[01:42:38] लेबल्स यहां पर हेल्प करते हैं कि उन

[01:42:39] स्क्रीन रीडर यूजर्स के लिए हमारे पास

[01:42:41] पहले से ही उनको बोलकर बता दिया जाता है

[01:42:43] कि यहां पर एक चेक बॉक्स है या यहां पर एक

[01:42:45] बटन है या यहां पर एक फील्ड है इनपुट

[01:42:48] फील्ड है जिसके अंदर आपको अपना यूजर नेम

[01:42:50] टाइप करना है या यहां पर एक फील्ड है

[01:42:52] इनपुट फील्ड जिसके अंदर आपको अपना पासवर्ड

[01:42:54] टाइप करना है तो वहां पर लेबल्स जो हैं

[01:42:55] काफी ज्यादा हेल्प करते हैं एक और जगह

[01:42:58] लेबल्स हमें काफी हेल्प करते हैं वो होते

[01:43:00] हैं हमारे रेडियो बटंस रेडियो बटंस यानी

[01:43:02] वो बटन जिनमें आप चॉइस में एक ही सिलेक्ट

[01:43:05] कर सकते हैं उस तरीके के बटंस को हम

[01:43:06] यूजुअली रेडियो बटंस कहते हैं रेडियो बटन

[01:43:09] को कैसे डिफाइन करते हैं जैसे हम एक और

[01:43:12] इनपुट का टाइप यहां पर ले लेते हैं और

[01:43:14] टाइप में हम लिख देंगे रेडियो अब यहां पर

[01:43:17] हमें प्लेस होल्डर लिखने की जरूरत नहीं है

[01:43:19] यहां पर हम दो एट्रियो डिफाइन करेंगे

[01:43:21] इनमें से सबसे पहला एट्रिल है

[01:43:23] कि क्लास 11थ और दूसरा एट्रियो है नेम और

[01:43:29] यहां पर हम लिख देंगे क्लास 11थ सेम तरीके

[01:43:33] से हम एक और रेडियो बटन बना सकते हैं ये

[01:43:35] रेडियो बटन क्या होगा ये रिप्रेजेंट करेगा

[01:43:37] क्लास 12थ को इसके अंदर लिखेंगे क्लास 12थ

[01:43:40] इसके अंदर आप नोटिस करेंगे हमने नाम जो है

[01:43:42] दोनों को सेम दिया है अब सेम नाम का फायदा

[01:43:44] क्या होगा वह मैं थोड़ी देर में बताऊंगी

[01:43:45] अभी के लिए बस बना रहे हैं वैल्यू अलग-अलग

[01:43:47] है यानी इनके नाम अलग-अलग हैं और अब दो

[01:43:49] हमारे पास बटंस आ गए हैं क्लास 12थ नहीं

[01:43:51] तो क्लास 11थ क्लास 12थ नहीं तो क्लास 11थ

[01:43:53] रेडियो बटंस की स्पेशलिटी होती है एक बार

[01:43:56] में आप उनमें से एक ही क्लिक कर सकते हैं

[01:43:57] मतलब मल्टीपल ऑप्शंस के लिए नहीं होते

[01:43:59] जैसे आपके जेई मेंस के टेस्ट होते हैं तो

[01:44:02] उसमें मल्टीपल ऑप्शंस अगर नहीं हो तो उसके

[01:44:03] अंदर एक ही ऑप्शन चारों में से चूज कर

[01:44:05] सकते हैं तो वैसे केसेस के लिए रेडियो

[01:44:07] बटंस हमारे होते हैं अब इनमें से कोई एक

[01:44:10] ही हम चूज कर सकते हैं अब बैक एंड पे मैं

[01:44:12] थोड़ा सा हल्का सा बताऊं एक्स्ट्रा

[01:44:13] इंफॉर्मेशन के लिए कि क्या होता है जिस भी

[01:44:15] रेडियो बटन को आप चूज करेंगे मतलब अगर आप

[01:44:18] 11थ को चूज करते हैं तो क्या होगा बैक एंड

[01:44:20] को इंफॉर्मेशन मिलेगी कि आपने क्लास में

[01:44:23] चूज किया है 11थ को तो ये वैल्यू उसके पास

[01:44:26] जाएगी ये जो हमने प्रिंट करवाया ये नहीं

[01:44:28] जाता हमेशा वैल्यू जाती है तो वैल्यू के

[01:44:30] अंदर अगर आप लिखेंगे क्लास 10थ और आपने

[01:44:33] प्रिंट करवाया क्लास 11थ तो यहां तो क्लास

[01:44:35] 11थ का बच्चा क्लास 11थ पे टिक करेगा

[01:44:38] लेकिन हमारे जो बैक एंड के पास इंफॉर्मेशन

[01:44:40] जाएगी वो क्लास 10थ की जाएगी इसीलिए हमेशा

[01:44:42] जो है वैल्यू और जो हम प्रिंट करवा रहे

[01:44:44] हैं यूजर को वो सिंक में होना चाहिए

[01:44:46] क्योंकि यूजर को ये वैल्यू नहीं दिखती और

[01:44:48] बैक एंड को ये वाला हमारा जो प्रिंट करवा

[01:44:51] रहे हैं यूजर को ये वाली वैल्यू नहीं

[01:44:52] दिखती

[01:44:53] तो इन दो चीजों का ध्यान रखना है तो

[01:44:55] रेडियो बटंस के अंदर सिमिलर चीज जो है वही

[01:44:57] कर सकते हैं अब इन दोनों रेडियो बटंस को

[01:44:59] हम एक लेबल के अंदर डाल सकते हैं लेबल में

[01:45:02] लिख देंगे यहां पे फॉर आईडी यहां अब एक

[01:45:05] आईडी भी बना सकते हैं आईडी इज लाइक वही

[01:45:07] सेम चीज कि एक स्टूडेंट को आपने रोल नंबर

[01:45:09] दे दिया कि हां इसका रोल नंबर 1664 है अब

[01:45:12] हम यहां पर दो सिमिलर रेडियो बटंस बना

[01:45:14] सकते हैं एक क्लास 11थ का दूसरा भी क्लास

[01:45:16] 11थ का बना सकते हैं पर अगर हम उनको

[01:45:18] अलग-अलग आईडी दे दें तो वो रेडियो बटंस

[01:45:20] अलग-अलग हो जाएंगे तो आईडी देने के लिए

[01:45:23] इसको दे देते हैं मान लीजिए आईडी वन या

[01:45:25] इसकी आईडी हम 101 भी रख सकते हैं एंड इसकी

[01:45:28] आईडी हम रख सकते हैं

[01:45:30] 102 तो यहां पे फॉर 101 यह हमने यहां लिख

[01:45:34] दिया यहां पे भी हम अपना लेबल बना सकते

[01:45:36] हैं यह लेबल है किसके लिए फॉर आईडी 102 तो

[01:45:39] इस लेबल के अंदर हम डाल देंगे अपने सेकंड

[01:45:41] वाले इनपुट को तो ये फॉर्म के अंदर दो

[01:45:44] हमारे लेबल्स आ गए एक हो गया 101 एक हो

[01:45:47] गया 102 अब लेबल का फायदा यह हुआ कि आप

[01:45:50] अगर क्लास 11थ पर भी क्लिक करेंगे तो भी

[01:45:53] वो टिक हो जाएगा क्लास 12थ पर भी टिक

[01:45:55] करेंगे तो भी वो टिक हो जाएगा लेकिन जब तक

[01:45:57] लेबल एजिस्ट नहीं करते थे जैसे अगर मैं

[01:45:59] इसको कर लूं कॉपी और कंट्रोल जीी तो इस

[01:46:02] केस में हमारे पास एक भी लेबल जो थे वो

[01:46:05] नहीं था अब इस कोड को अगर मैं सेव करूं तो

[01:46:08] अब मैं यहां क्लिक कर रही हूं तो कुछ हो

[01:46:10] नहीं रहा मतलब बटन जो है काम नहीं कर रहे

[01:46:12] तो लेबल का फायदा ये होता है कि जब भी

[01:46:15] हमारे पास सेम नाम होता है मतलब नेम हमने

[01:46:18] सेम रख दिया है दोनों अपने इनपुट का

[01:46:20] रेडियो बटंस का तो हमारे पास ये

[01:46:22] फंक्शनैलिटी आ आ जाती है कि टेक्स्ट पर भी

[01:46:24] हम क्लिक करें ना मतलब इसको सेव करके

[01:46:25] टेक्स्ट पे भी क्लिक करें तो भी रेडियो

[01:46:27] बटन टिक हो जाता है ये उन केसेस में उन

[01:46:29] यूजर्स के लिए फायदेमंद होता है जिनकी

[01:46:31] शायद आईसाइट थोड़ी सी कमजोर है जैसे

[01:46:34] स्क्रीन बहुत छोटी है उस पर टेक्स्ट जो है

[01:46:36] बहुत छोटा दिख रहा है तो उस केस में हम

[01:46:38] कर्सर लेकर जाते हैं जरूरी नहीं है हम

[01:46:40] यहीं पर टिक कर रहे हो हम यहां करें तो भी

[01:46:42] क्लिक हो जाए उन केसेस में ये वाली जो

[01:46:44] फंक्शनैलिटी है लेबल वाली वो बहुत

[01:46:46] फायदेमंद होती है तो यह फायदा होता है सेम

[01:46:48] नेम देने का दोनों को अब यहां थोड़ी सी

[01:46:50] फॉर्मेटिंग कर लेते हैं इन लेबल को अब

[01:46:53] नेक्स्ट लाइन में ले आते हैं नेक्स्ट लाइन

[01:46:55] में हर जो ऑप्शन है वह हमारे पास आ गया है

[01:46:57] यहां पर भी एक नेक्स्ट लाइन ले आते हैं तो

[01:47:00] फॉर्म हमारा कुछ ऐसा दिख रहा होगा जिसमें

[01:47:02] हमारे पास पहले यूजर नेम होगा फिर पासवर्ड

[01:47:04] होगा फिर हम अपनी क्लास जो है वो चूज कर

[01:47:06] सकते हैं इनफैक्ट यहां पर दो नेक्स्ट लाइन

[01:47:10] ले आते

[01:47:11] हैं सेम फॉर दिस तो अपना यूजर नेम पासवर्ड

[01:47:15] एंड फिर हमारी क्लास तो कुछ इस तरीके से

[01:47:18] हम अपने फॉर्म को बना सकते हैं नेक्स्ट हम

[01:47:20] बात करने वाले हैं क्लास एंड आईडी की अभी

[01:47:23] हमने बात किया कि आईडी क्या होती है अब एक

[01:47:25] बार बात कर लेते हैं कि एक एलिमेंट के लिए

[01:47:27] एट्रियो क्लास का क्या मतलब है अब हम किसी

[01:47:30] भी एलिमेंट को एक साथ एक क्लास असाइन कर

[01:47:33] सकते हैं और एक आईडी असाइन कर सकते हैं

[01:47:35] क्लास असाइन कर सकते हैं और एक आईडी असाइन

[01:47:37] कर सकते हैं क्लास को असाइन करने का मतलब

[01:47:39] आप समझ सकते हैं कि बच्चों को एक ग्रुप

[01:47:41] असाइन कर दिया कि आपका ग्रुप वन है और इन

[01:47:45] बच्चों का ग्रुप टू है अब ग्रुप वन के

[01:47:48] अंदर हो सकता है पांच बच्चे हो अब इन पांच

[01:47:51] बच्चों को कैसे हम डिफरेंशिएबल इनको हम दे

[01:47:53] देंगे एक आईडी इसकी आईडी वन है इसकी आईडी

[01:47:55] टू है थ्री है फोर है और फाइव है और दूसरे

[01:47:58] ग्रुप के बच्चों की आईडी क्या है दूसरे

[01:48:00] ग्रुप में मान लीजिए चार बच्चे हैं और

[01:48:02] इनकी भी अपनी एक आईडी है 1 2 3 4 तो अगर

[01:48:06] एक साथ ये बच्चों की जगह अगर मान लीजिए

[01:48:08] हमने बटंस डिफाइन किए और हम चाहते हैं

[01:48:11] सारे बटंस का कलर जो हो ग्रीन हो तो

[01:48:13] इंडिविजुअली हमें इन सारे बटंस को ग्रीन

[01:48:15] कलर देने की जरूरत नहीं है हम क्या कर

[01:48:17] सकते हैं इस पूरे ग्रुप को ग्रीन कलर

[01:48:19] असाइन कर सकते हैं या इस पूरे ग्रुप टू को

[01:48:21] ब्लू कलर असाइन कर सक सकते हैं तो इसको आप

[01:48:24] हमारे स्कूल्स में हा हाउसेस होते थे ना

[01:48:26] कि ये ग्रीन हाउस है ये रेड हाउस है ये

[01:48:28] ब्लू हाउस है ये हमारा येलो हाउस है तो उस

[01:48:30] तरीके से हाउसेस को की तरह इमेजिन कर सकते

[01:48:33] हैं आप कि ये हमारा पूरा एक हाउस का कलर

[01:48:36] हो सकता है ये हमारे हाउस के मेंबर्स हो

[01:48:38] सकते हैं और इस तरीके से जब इंफॉर्मेशन

[01:48:39] ग्रुप के एलिमेंट्स के लिए करनी है तो

[01:48:41] वहां पे ग्रुप का नाम यानी क्लास का नाम

[01:48:43] दे देते हैं और जब इंडिविजुअल को हमें

[01:48:45] देखना है कि भाई कि इसी पर्टिकुलर बच्चे

[01:48:47] के लिए मुझे आईडी कार्ड जो है उनका चेक

[01:48:50] करना है तो हम बस इसकी आईडी वन को चेक कर

[01:48:52] रहे होंगे तो इस तरीके से हम कांसेप्ट समझ

[01:48:55] सकते हैं अपने आईडी और ग्रुप्स का तो यहां

[01:48:57] मैंने एलिमेंट्स का एग्जांपल आपको दे दिया

[01:49:00] है ये सबसे पहले हमने एक डिव बनाया है इस

[01:49:03] डिव के अंदर अपनी एक आईडी है आईडी वन और

[01:49:05] ये क्लास है इसकी ग्रुप वन दूसरा डिव है

[01:49:07] इसकी आईडी आईडी टू क्लास है इसका ग्रुप वन

[01:49:10] यानी यहां पर क्या केस हो रहा है यह एक

[01:49:12] पूरा का पूरा डिव है जिसका नाम हमने दे

[01:49:15] दिया है आईडी वन और यह दूसरा डिव है जिसको

[01:49:19] नाम हमने दे दिया है आईडी 2 अब यह जो

[01:49:22] दोनों डिव हैं ये दोनों सेम ग्रुप के अंदर

[01:49:25] हैं और उस ग्रुप का नाम है ग्रुप वन तो इस

[01:49:28] तरीके का कुछ केस हो रहा है जब भी हम

[01:49:30] ग्रुप्स और क्लासेस की बात करते हैं

[01:49:32] नेक्स्ट बात करते हैं चेक बॉक्सेस की हो

[01:49:34] सकता है कभी-कभी हमें ऐसे ऑप्शन देने हो

[01:49:36] जिसमें आप मल्टीपल चीजें जो है सेलेक्ट कर

[01:49:38] सकते हैं वहां पे रेडियो बटंस काम नहीं

[01:49:39] आएंगे तो वहां इस्तेमाल कर रहे होंगे हम

[01:49:41] चेक बॉक्स का चेक बॉक्स को कैसे लिखते हैं

[01:49:43] वो भी देख लेते हैं चेक बॉक्सेस के अंदर

[01:49:45] भी हम लेबल्स जो हैं वो बना रहे होते हैं

[01:49:47] मान लीजिए किसी स्टूडेंट को सब्जेक्ट

[01:49:48] सिलेक्ट करने हैं पांच में से कोई उसको

[01:49:49] सब्जेक्ट सिलेक्ट करने हैं तो यहां हम लिख

[01:49:51] लेंगे लेबल

[01:49:53] फॉर सबसे पहले मैथ के लिए लेबल बना लेते

[01:49:57] हैं तो इसमें हम लिख देंगे

[01:50:00] इनपुट यहां पर जो टाइप है वो टाइप बन रहा

[01:50:03] होगा हमारा चेक बॉक्स चेक बॉक्स के अंदर

[01:50:06] वैल्यू क्या देंगे वैल्यू इसमें दे देते

[01:50:07] हैं मैथ और इसमें नेम हम दे देंगे

[01:50:11] सब्जेक्ट और आईडी हम इसको दे सकते हैं

[01:50:14] आईडी कब काम आएगी आईडी बैक एंड के काम

[01:50:16] आएगी अभी हमारे काम नहीं आ रही बैक एंड के

[01:50:18] काम कैसे आएगी बैक एंड डिटेक्ट कर पाएगा

[01:50:20] कि पांच में से जितने चेक बॉक्स टिक हुए

[01:50:22] हैं सबकी इंडिविजुअल आईडी क्या है तो आप

[01:50:25] इस तरीके की फंक्शनैलिटी बना सकते हैं कि

[01:50:27] जो भी चेक बॉक्स टिक हो उसके ऊपर एक ग्रीन

[01:50:30] कलर आ जाए या उसके ऊपर एक ब्लू कलर आ जाए

[01:50:32] उस तरीके की चीजें हम कर सकते हैं जब हम

[01:50:34] सीएसएस और जावास्क्रिप्ट दोनों सीख लेंगे

[01:50:36] तो वहां आईडी काम आ रही होगी अभी इतना

[01:50:38] यूजफुल नहीं है फिर भी दे देते हैं इसको

[01:50:39] 10 ही देते हैं और इस चेक बॉक्स को नाम

[01:50:41] देंगे हम मैथ सिमिलर तरीके से और चेक

[01:50:45] बॉक्सेस बना लेते हैं चार सब्जेक्ट का बना

[01:50:47] लेते हैं फिजिक्स पीएच वाई और सब्जेक्ट

[01:50:50] में हम लिख देते हैं फिजिक्स इसको आईडी

[01:50:53] डिफरेंट देनी पड़ेगी तो इसको थ्री दे देते

[01:50:55] हैं फोर दे देते हैं तो चेक बॉक्सेस हमारे

[01:50:57] कुछ इस तरीके से डिस्प्ले होंगे जिनमें से

[01:50:59] हम मल्टीपल को जो है सिलेक्ट कर सकते हैं

[01:51:02] अब इसकी फॉर्मेटिंग के लिए थोड़ा सा

[01:51:05] नेक्स्ट लाइन दे देते हैं हर किसी को

[01:51:07] सिमिलर फॉर्मेटिंग के लिए ऊपर भी एक बार

[01:51:09] ऐड कर देते हैं कि

[01:51:12] सिलेक्ट योर क्लास तो हमारा फॉर्म कुछ ऐसा

[01:51:15] दिखेगा जिसके अंदर ऊपर हमारे पास यूजर नेम

[01:51:17] और पासवर्ड भरने की जगह आ जाएगी नीचे हम

[01:51:19] अपनी क्लास सिलेक्ट कर सकते हैं फाइनली

[01:51:21] यहां पे चेक बॉक्सेस आ अपने फेवरेट

[01:51:23] सब्जेक्ट्स हमें सिलेक्ट करने हैं तो हम

[01:51:24] सिलेक्ट कर लेंगे मैथ केमिस्ट्री मे बी

[01:51:27] फिजिक्स या अगर आपको मजा आ रहा है अभी

[01:51:30] एचटीएमएल सीखते हुए तो उसमें कंप्यूटर

[01:51:31] साइंस भी टिक कर लो तो इस तरीके से हम

[01:51:34] सबको भी टिक कर सकते हैं तो जब भी मल्टीपल

[01:51:35] ऑप्शंस को सेलेक्ट कराना हो तब हम यूज़

[01:51:37] करते हैं इस्तेमाल करते हैं अपने चेक

[01:51:39] बॉक्सेस का नेक्स्ट बात करते हैं टेक्स्ट

[01:51:41] एरिया की कभी-कभी हम चाहते हैं कि हम जो

[01:51:44] है अ कुछ टेक्स्ट जो है उसको यूजर से

[01:51:47] इनपुट ले लें मतलब हम उसे कुछ एरिया दे

[01:51:50] दें जिसमें वह सिर्फ कुछ चीजें हमारे बारे

[01:51:52] में में कुछ लाइनें लिख पाए जैसे इसका

[01:51:54] एग्जांपल होता है कि कुछ-कुछ कंपनीज जो

[01:51:56] हैं अपनी वेबसाइट्स के ऊपर फीडबैक का

[01:51:58] फॉर्म देती हैं कि आप हमारे लिए फीडबैक

[01:51:59] लिख सकते हैं तो इस तरीके का फीडबैक अगर

[01:52:02] हमें डिजाइन करना हो तो उसको इस्तेमाल

[01:52:03] करेंगे उसके लिए टेक्स्ट एरिया का कैसे

[01:52:06] यूज करेंगे इसको फॉर्म के अंदर लास्ट में

[01:52:08] बनाते हैं एक टेक्स्ट एरिया और इसके अंदर

[01:52:11] सबसे पहले नाम इसको दे देते हैं नाम हम

[01:52:13] देने वाले हैं इसको फीडबैक इसकी आईडी भी

[01:52:15] दे सकते हैं आईडी इस को 101 दे देते हैं

[01:52:18] और इसमें हम प्लेस होल्डर डाल सकते हैं ये

[01:52:20] जो टेक्स्ट एरिया है ये बहुत सिमिलर इनपुट

[01:52:23] में टाइप इ इक्वल टू टेक्स्ट के बट इसका

[01:52:25] थोड़ा सा अलग यूज है तो हमें वही है

[01:52:28] प्रॉपर लेबल्स प्रॉपर जो टैग्स है उनका

[01:52:31] इस्तेमाल करना चाहिए प्लेस होल्डर में डाल

[01:52:33] देंगे प्लीज

[01:52:36] गिव योर वैल्युएबल

[01:52:40] फीडबैक यर तो वैल्युएबल फीडबैक जो है हम

[01:52:44] टेक्स्ट एरिया में लिख लेंगे और यहां पर

[01:52:47] डाल देंगे फीडबैक यहां पर भी कुछ लाइन

[01:52:51] ब्रेक्स डाल देते हैं अब यह हमारा फॉर्म आ

[01:52:53] गया जिसमें एंड में हम फीडबैक दे पा रहे

[01:52:55] हैं हाय मतलब ऑलरेडी उसमें कुछ कुछ पहले

[01:52:57] से लिखा होगा इसको हम हटा सकते हैं तो

[01:53:01] यहां हमारे पास हमारा प्लेस होल्डर आ गया

[01:53:03] अब यहां हम लिख सकते हैं दिस वाज अ नाइस

[01:53:06] फॉर्म थैंक यू वेरी मच फॉर दिस इंफो अब हम

[01:53:12] चाहते हैं थोड़ा सा बड़ा हो जाए तो इसमें

[01:53:13] हम हाइट या विड्थ वगैरह भी डाल सकते हैं

[01:53:16] तो इसकी हाइट हम लिख देते हैं तो अब ये

[01:53:18] थोड़ा सा बड़ा हमें होकर दिखाई दे तो उसके

[01:53:21] लिए हम रोज एंड कॉलम्स डिा कर सकते हैं तो

[01:53:23] इसमें रोज हम लिख देते हैं इज इक्वल टू 5

[01:53:27] तो क्या होगा फाइव रोज के बराबर यह हमें

[01:53:29] स्पेस दे देगा तो इसमें हम लिखते जा सकते

[01:53:31] हैं मतलब कुछ भी लिख सकते हैं फाइव रोज तक

[01:53:32] हमारे पास स्पेस आ जाएगी इनफैक्ट हम

[01:53:35] कॉलम्स भी बढ़ा सकते हैं जितने मर्जी चाहे

[01:53:36] तो इस तरीके से बड़ा जो फीडबैक फॉर्म है

[01:53:39] वो हमें मिल जाएगा तो ऐसे हम डिफाइन करते

[01:53:41] हैं अपने टेक्स्ट एरिया को अब नेक्स्ट बात

[01:53:44] करते हैं सेलेक्ट की अब कुछ-कुछ फॉर्म्स

[01:53:46] में हमारे पास ड्रॉप डाउन आता है जैसे अगर

[01:53:47] हमें कोई सिटी सिलेक्ट करनी है या हमारी

[01:53:49] स्टेट कौन सी है वो हमें सिलेक्ट करना है

[01:53:51] तो वहां हम ड्रॉप डाउन का यूजुअली

[01:53:53] इस्तेमाल करते हैं तो ड्रॉप डाउंस को

[01:53:54] दिखाने के लिए फॉर्म में हम सिलेक्ट को

[01:53:56] यूज करते हैं तो सिलेक्ट टैग के अंदर हम

[01:53:58] उसका कुछ नेम दे सकते हैं उसकी कोई आईडी

[01:54:01] दे सकते हैं और उसके अंदर दे सकते हैं

[01:54:02] डिफरेंट डिफरेंट ऑप्शंस फॉर आवर ड्रॉप

[01:54:04] डाउन इसको भी लिख कर देखते हैं यहां

[01:54:07] फीडबैक से पहले इसको लिखकर देखेंगे सबसे

[01:54:10] पहले लिखेंगे सिलेक्ट नेम इज इक्वल टू

[01:54:13] सिटी तो इसके अंदर सबसे पहला जो हम ऑप्शन

[01:54:15] देने वाले हैं उसमें वैल्यू हमारे पास आ

[01:54:18] जाएगी सबसे पहली वैल्यू दे देते हैं

[01:54:20] दिल्ली तो इसके अंदर लिख देंगे दिल्ली अब

[01:54:23] सिमिलर और ज्यादा हम ऑप्शंस दे सकते हैं

[01:54:26] जैसे यहां पर हम दे सकते हैं बैंगलोर यहां

[01:54:29] दे सकते हैं हम पुणे तो सारे के सारे

[01:54:32] ऑप्शंस जो हैं हमारे लिए आ जाएंगे तो यह

[01:54:34] जो फीडबैक तो यहां आप नोटिस करेंगे तो

[01:54:36] फॉर्म के अंदर यह वाला ड्रॉप डाउन आ गया

[01:54:39] जिसमें हम कोई भी ऑप्शन जो है सिलेक्ट कर

[01:54:41] सकते हैं अपनी मर्जी से जो भी सिटी हमें

[01:54:43] चाहिए तो इस तरीके से हम सिलेक्ट कर सकते

[01:54:46] हैं अपने ड्रॉप डाउन की हेल्प से भी अब इस

[01:54:49] फॉर्म को फॉर्मेट करके क्या करेंगे थोड़ा

[01:54:51] सा और सुंदर बना लेंगे जैसे इस फॉर्म में

[01:54:52] स्पेसिंग थोड़ी सी हमारी खराब है स्पेसिंग

[01:54:56] ठीक करने के लिए सबसे पहले तो यूजर नेम और

[01:54:58] पासवर्ड के बीच की ये जो एक्स्ट्रा लाइंस

[01:55:00] है इनको हम हटा देंगे तो यूजर नेम यहां आ

[01:55:03] गया पासवर्ड यहां आ गया फॉर्म का एक टाइटल

[01:55:05] भी दे देते हैं तो ऊपर हेडिंग दे देते हैं

[01:55:07] फॉर्म से पहले

[01:55:09] रजिस्ट्रेशन फॉर्म इनफैक्ट हां h1 जो है

[01:55:13] थोड़ी सी मेन हो जाएगी तो ए4 तक ट्राई

[01:55:17] करते हैं तो ये रजिस्ट्रेशन फॉर्म हमारे

[01:55:19] लिए आ गया उसमें यूजर नेम लिख सकते हैं

[01:55:20] पासवर्ड लिख सकते हैं अब अब सिलेक्ट योर

[01:55:23] क्लास के बाद जो हमने लाइंस डाली हैं उनको

[01:55:26] ना डालें तो अपनी क्लास हम यहां से

[01:55:27] सेलेक्ट कर सकते हैं फिर सेलेक्ट कर सकते

[01:55:29] हैं अपने फेवरेट सब्जेक्ट्स को फाइनली फिर

[01:55:32] कर सकते हैं सिलेक्ट अपनी सिटी तो यहां

[01:55:33] सिटी के ऊपर लिख देंगे सिलेक्ट योर सिटी

[01:55:37] एंड फीडबैक में हम इस चीज को कर देते हैं

[01:55:40] तो पूरा का पूरा फॉर्म जो है हमारे लिए

[01:55:43] डिजाइन होकर आ गया है जिसमें ऊपर काफी

[01:55:45] सारी चीजें हैं हमने इसको अच्छे से

[01:55:47] फॉर्मेट भी कर दिया है अब लास्ट में एक और

[01:55:50] इनपुट टाइप हम डिस्कस कर लेते हैं इसको हम

[01:55:52] कहते हैं टाइप इज इक्वल टू सबमिट और इसको

[01:55:55] भी हम वैल्यू देंगे ऑफ सबमिट तो यहां क्या

[01:55:58] हुआ हमारे लिए एक सबमिट बटन आ गया तो

[01:56:01] सबमिट बटन से क्या होगा हमारा फॉर्म सबमिट

[01:56:03] हो जाएगा मतलब उसमें इंफॉर्मेशन हम ऐड कर

[01:56:05] पाएंगे और इंफॉर्मेशन को हम सबमिट कर

[01:56:07] पाएंगे अपने फॉर्म को पूरा हमने भर लिया

[01:56:09] और उसको अब कर देंगे सबमिट तो इसको भी

[01:56:11] नेक्स्ट लाइन में ले आते हैं इस बटन को पर

[01:56:13] सबमिट करने के बाद ये हमें दिखा रहा है

[01:56:15] क्लिक करने के बाद कि एकशन ड पीएपी को ये

[01:56:17] गेट नहीं कर पा रहा मतलब एक्शन ड पीएचपी

[01:56:19] हमारे लिए एजिस्ट नहीं करती है अभी

[01:56:21] क्योंकि उसको हमने बनाया ही नहीं है पर

[01:56:23] लॉजिकली यह होगा जब हमारी पूरी वेबसाइट

[01:56:25] सेटअप हो जाती है कि ये फॉर्म से सारा का

[01:56:27] सारा डाटा लिया जाएगा और वो एकशन ड पीएपी

[01:56:30] को या एशन ड जए को या जो भी हम फाइल यूज

[01:56:33] कर रहे हैं अपने बैक एंड के लिए या फ्रंट

[01:56:35] एंड के लिए जिस भी फाइल में डाटा भेज रहे

[01:56:36] हैं उस फाइल को कंप्लीट ये डेटा ट्रांसफर

[01:56:39] हो जाएगा और फिर उस फाइल में जो जो चीजें

[01:56:41] हैं इस डाटा के हिसाब से कि डेटाबेस में

[01:56:43] स्टोर करना है या स्टूडेंट को कुछ दिखाना

[01:56:44] है वो सारी चीजें हो रही होंगी पर इस

[01:56:46] तरीके से पूरा का पूरा फॉर्म हमने एक

[01:56:48] डिजाइन कर लिया है नेक्स्ट बात करते हैं

[01:56:50] एक और इंपॉर्टेंट टैग की जिसका नाम है आई

[01:56:52] फ्रेम टैग का काम होता है कि एक वेबसाइट

[01:56:54] के अंदर मान लीजिए हमें दूसरी वेबसाइट

[01:56:56] दिखानी हो तो वो कैसे दिखाएंगे उसके लिए

[01:56:58] इस्तेमाल करते हैं आई फ्रेम टैग का टू शो

[01:57:00] वेबसाइट्स इनसाइड वेबसाइट आई फ्रेम टैग

[01:57:03] कुछ एंकर टैग की तरह होता है जिसके अंदर

[01:57:05] हमारे पास सोर्स

[01:57:07] एट्रिमेद

[01:57:12] मैं सर्च करूं फॉर

[01:57:15] जावा तो जो फर्स्ट वीडियो आ रही है इस पर

[01:57:19] हम कर लेते हैं क्लिक और इसको शेयर कर

[01:57:21] देते हैं शे शेर करने के बाद क्या करेंगे

[01:57:23] यहां पर एक एंबेड का ऑप्शन आएगा इस एंबेड

[01:57:26] के ऑप्शन पर हम जाएंगे और यह राइट में

[01:57:28] क्या करेगा हमारे लिए कुछ कुछ कोड हमें

[01:57:30] एचटीएमएल का जो आई फ्रेम का कोड है वो दे

[01:57:33] देगा इसको कर लेते हैं कॉपी एंड वापस से

[01:57:35] अपने एचटीएमएल कोड में आते हैं इस फॉर्म

[01:57:37] को अभी के लिए क्या करते हैं अभी के लिए

[01:57:39] इसको कर देते हैं कॉमन डाउट हम क्या

[01:57:41] करेंगे अपने पेज पर वो पूरा का पूरा आई

[01:57:44] फ्रेम वाला जो भी टैग के अंदर सारी

[01:57:46] इंफॉर्मेशन थी उसको कॉपी कर लेते हैं इसके

[01:57:48] अंदर अभी इंपॉर्टेंट चीज ये है कि हमने आई

[01:57:50] फ्रेम लिखा हुआ है विड्थ हाइट यहां पे

[01:57:52] डिफाइन की हुई है सोर्स के अंदर हमने लिखा

[01:57:55] है अपना पूरा का पूरा लिंक व्हिच इज एक

[01:57:59] youtube4 करके अगर सेव करें इसको तो क्या

[01:58:02] होगा हमारे वेब पेज के ऊपर हमारा जो पूरा

[01:58:05] वीडियो है वोह दिखने लग जाएगा अब यहां

[01:58:08] वीडियो की जगह आप इस वीडियो को रन भी कर

[01:58:10] सकते हैं पूरा का पूरा

[01:58:19] youtube's चलानी है इनफैक्ट किसी और

[01:58:21] वेबसाइट साइट को डिस्प्ले कराना है तो वो

[01:58:23] आप यहां पर करा सकते हैं अब कुछ-कुछ ऐसी

[01:58:25] वेबसाइट होती हैं जो ये अलाउ नहीं करती

[01:58:27] जैसे अगर आप एक आई फ्रेम क्रिएट करने की

[01:58:29] कोशिश करें जिसमें आप सोर्स डाल रहे हैं

[01:58:32] google.com का google.com का तो इसको अगर

[01:58:35] सेव करें तो ये वाली चीज काम नहीं करेगी

[01:58:37] यहां लिखा आ गया रिफ्यूज टू कनेक्ट

[01:58:40] कुछ-कुछ साइट्स होती हैं जो प्रोटेक्ट

[01:58:41] करती है खुद को कि आप हमारे वेब पेज को या

[01:58:44] हमारी वेबसाइट को अपनी वेबसाइट के ऊपर

[01:58:45] नहीं दिखा सकते हैं इससे क्या हो सकता है

[01:58:47] कि लोग google.com का जो सर्च बार है उसको

[01:58:49] अपनी वेबसाइट के ऊपर दिखा सकते हैं उसपे

[01:58:51] लोग आकर google.com की जगह आपकी वेबसाइट

[01:58:53] पर लैंड कर सकते हैं एंड फिर वहां पर वो

[01:58:55] सर्च कर सकते हैं पूरा का पूरा इंटरनली तो

[01:58:57] google.com ही सर्च हो रहा होगा पर वो

[01:58:59] होगा आपकी वेबसाइट पे तो इस तरीके की जो

[01:59:02] मलेशियन चीजें हैं उनसे बचाने के लिए काफी

[01:59:04] लोग जो है स्टेप्स लेते हैं पर अगर हम कुछ

[01:59:07] और करना चाहे मान लीजिए हम एमडीएन की ही

[01:59:09] वेबसाइट जो है उसको हम दिखाना जा रहे हैं

[01:59:12] तो यहां पे हम बस लिंक को कर देंगे

[01:59:14] रिप्लेस और आएंगे अपने पेज पर तो यहां

[01:59:17] एमडीएन भी अलाव नहीं करता पर जैसे

[01:59:20] विकपीडिया का हम एग्जांपल

[01:59:26] ले तोय विकपीडिया पूरा का पूरा हमारी

[01:59:29] वेबसाइट के ऊपर खुल गया है यहां पे हाइट

[01:59:32] एंड यह विड्थ जो है थोड़ी सी छोटी पड़ रही

[01:59:34] है तो इसको नेक्स्ट लाइन में ले आते हैं

[01:59:37] एंड क्या करते हैं इसके लिए भी हाइट एंड

[01:59:39] विड्थ सेट कर देते हैं सेम तो क्या हुआ ये

[01:59:41] पूरा विकपीडिया आप देखेंगे फंक्शनल है और

[01:59:44] ये पूरा यहां पे आप सर्च करना चाहे कि मान

[01:59:46] लीजिए हमें एटीएमएल के बारे में सर्च करना

[01:59:48] है तो वो सारी की सारी फंक्शनैलिटीज जो है

[01:59:51] आपकी वेबसाइट के ऊपर ही चल रही होंगी पर

[01:59:53] इंटरनली जो है विपीडिया काम कर रहा है पर

[01:59:55] व सारा का सारा आप अपनी वेबसाइट के ऊपर

[01:59:57] डिस्प्ले करा पा रहे हैं अब जो प्रोफेशनल

[02:00:00] लेवल वेबसाइट्स होती हैं वो यूजुअली

[02:00:01] मोस्टली प्रिवेंट कर रही होती है इस चीज

[02:00:03] को बट सिंस विकपीडिया इज फ्रीली अवेलेबल

[02:00:05] सारा रिसोर्सेस जो है फ्रीली अवेलेबल है

[02:00:07] तो उन्होंने इतना कुछ कर नहीं रखा एंड

[02:00:09] उनको फर्क भी नहीं पड़ता अगर आप उनका डाटा

[02:00:11] चुरा लें तो तो इस तरीके से हम यूज करते

[02:00:13] हैं अपने आई फ्रेम टैग का व्हिच आई थिंक

[02:00:15] लाइक दिस इज माय फेवरेट टैग आई फ्रेम मुझे

[02:00:18] काफी कूल लगता है पर्सनली नेक्स्ट हम बात

[02:00:20] कर रहे होंगे वीडियो टैग की जैसे हमने

[02:00:22] फोटोज दिखाई फोटोज को हमने रिलेटिव यूआरएल

[02:00:24] से भी दिखाया एब्सलूट यूआरएल से भी दिखाया

[02:00:27] वैसे ही हम वीडियोस को भी दिखा सकते हैं

[02:00:29] अपनी वेबसाइट के ऊपर और उसके लिए जो हम

[02:00:32] यूज़ करते हैं टैग उसको कहते हैं वीडियो

[02:00:34] टैग वीडियो टैग के अंदर सिंपली लिखेंगे

[02:00:36] एसआरसी जिसके अंदर अपनी वीडियो का हम लिंक

[02:00:38] डाल देंगे यह तो एक रिलेटिव लिंक है हम

[02:00:43] चाहे तो रिलेटिव की जगह एब्सलूट यूआरएल भी

[02:00:45] डाल सकते हैं तो उसको भी एक बार करके

[02:00:47] देखते हैं लिख देंगे वीडियो एसआरसी इ

[02:00:49] इक्वल टू यहां पर सेम

[02:00:52] लिंक जो है वह कॉपी कर लेते हैं तो सेम

[02:00:54] लिंक हमने डाल दिया है माय वीडियो करके तो

[02:00:57] अपने आई फ्रेम को हम कर लेते हैं कमेंट

[02:00:59] आउट और नीचे लिखते हैं वीडियो टैग को तो

[02:01:02] वीडियो को यूज करने के लिए यहां लिखेंगे

[02:01:03] वीडियो यहां लिख सकते हैं माय वीडियो अब

[02:01:06] यहां कोई एसआरसी हमें डालना पड़ेगा तो

[02:01:08] उसके लिए सबसे पहले तो अपनी फाइल्स के

[02:01:10] अंदर एक वीडियो को ऐड कर लेते हैं एक

[02:01:12] स्क्रीन रिकॉर्डिंग को यहां पे ऐड कर लेते

[02:01:14] हैं इस फोल्डर के अंदर एंड कर देते हैं

[02:01:17] इसको रिनेम माय वीडियो तो यहां लिख देते

[02:01:20] हैं स्लैश माय वीड एओ तो डॉट एओ इसका

[02:01:25] एक्सटेंशन है इसको कर लेते हैं सेव एंड अब

[02:01:28] जाकर अगर हम देखेंगे तो हमारे एक बड़ी सी

[02:01:30] वीडियो खुल गई है अब इसमें भी हम विड्थ

[02:01:33] एंड हाइट एक बार सेट कर लेते हैं ताकि सही

[02:01:36] फ्रेम में चीजें आ रही हो सेव एंड ये छोटे

[02:01:39] से इसके अंदर हमारी वीडियो जो है खुल गई

[02:01:41] है पर हम इसको प्ले नहीं कर पा रहे हैं

[02:01:42] मतलब वीडियो को हम प्ले नहीं कर पाए हैं

[02:01:44] दिस इज अ स्क्रीन रिकॉर्डिंग वीडियो तो

[02:01:46] इसको प्ले करने के लिए हमें यहां कुछ-कुछ

[02:01:48] हम एटिबल कर सकते हैं जिनमें सबसे पहला

[02:01:52] एटिबल है हमारा कंट्रोल्स अब वीडियो के

[02:01:54] सारे कंट्रोल्स दिखाने के लिए हमें यहां

[02:01:56] पर टैग के अंदर लिखना पड़ता है कंट्रोल्स

[02:01:58] तो क्या होगा अब हम इस वीडियो को प्ले कर

[02:02:01] पा रहे हैं इस वीडियो में हम साउंड जो है

[02:02:03] उसको ऑन ऑफ कर पा रहे हैं कम ज्यादा कर

[02:02:05] पाएंगे इसको फुल स्क्रीन कर सकते हैं एंड

[02:02:08] इसको डाउनलोड भी कर सकते हैं ऑल दो पिक्चर

[02:02:11] एंड पिक्चर कर सकते हैं तो इस तरीके का

[02:02:13] कुछ फॉर्मेट आपको

[02:02:21] लूप आप कर दें अगर कंट्रोल्स के साथ

[02:02:25] कंट्रोल्स हमने कर दिया लूप्स हमने कर

[02:02:27] दिया तो एक बार आप इस वीडियो को पूरा देख

[02:02:29] लेंगे तो उसके बाद क्या होगा ये वीडियो

[02:02:32] ऑटोमेटिक दोबारा से शुरू हो जाएगी यानी

[02:02:34] लूप में लूप में अगर आपको वीडियो चलानी है

[02:02:36] तो वो आप कर सकते हैं या लूप में नहीं

[02:02:38] चलानी आप चाहते हैं ये ऑटो प्ले हो जाए

[02:02:40] जैसे ही वेब पेज पे जाएंगे ऑटो प्ले हो

[02:02:42] जाएगी पूरी वीडियो पर ऑटो प्ले यूजुअली

[02:02:44] नहीं करना होता है क्योंकि जैसे ही

[02:02:46] वेबसाइट पर जाते एक तो आपके यूजर के पास

[02:02:47] अगर बहुत कम डाटा है वो बहुत कम बैंड

[02:02:50] विड्थ के साथ है बहुत खराब इंटरनेट की

[02:02:52] सिचुएशन में है तो सिचुएशन में बहुत सारा

[02:02:54] इंटरनेट उनका खर्च हो सकता है अगर आपकी

[02:02:56] वीडियो ऑटो प्ले होती रहती है दूसरी

[02:02:58] सिचुएशन यह है कुछ यूजर्स को अननोइंग लगता

[02:03:00] है उनका यूजर एक्सपीरियंस खराब हो जाता है

[02:03:02] अगर वो ऑटोमेटिक किसी साइट पर जा रहे हैं

[02:03:04] एंड मान लीजिए आपने रैंडम कोई वीडियो जो

[02:03:06] है अपने आप चला दिए जिसका यूजर को पता

[02:03:08] नहीं है तो उस सिचुएशन में काफी अनप्लेज्ड

[02:03:09] प्ले यूजुअली अवॉइड करिए या ऑटो प्ले करना

[02:03:13] है तो साउंड को ऑफ करके करिए जैसे काफी

[02:03:15] सारी एड्स होती है उनमें ऑटो प्ले होता है

[02:03:16] पर साउंड ऑफ होती है तो दैट इज अ गुड वे

[02:03:18] टू ऑटो प्ले इसके अलावा हमारे पास हाइट और

[02:03:21] विड्थ के भी एट्रबीक

[02:03:23] कर सकते हैं कितने साइज में हमारी वीडियो

[02:03:25] जो है हमें दिख रही होगी तो यह काफी सारे

[02:03:28] एट्रबीक किए जिससे हम वीडियो को अपनी को

[02:03:31] कंट्रोल कर सकते हैं अब इसके साथ ही हमने

[02:03:51] आनी चाहिए एंड किसी भी प्रो प्रोग्रामर को

[02:03:53] इतनी चीजें आती हैं इनफैक्ट इससे भी कम

[02:03:55] आती है मोस्टली लोग

[02:04:01] google-my को अब यहां पर असाइनमेंट

[02:04:04] प्रोजेक्ट वन के लिए ये है कि ऐड अ

[02:04:06] कांटेक्ट मी पेज फॉर योर पोर्टफोलियो यानी

[02:04:09] हमने फॉर्म डिजाइन करना सीखा है तो हम

[02:04:11] क्या करेंगे अपने पोर्टफोलियो के अंदर एक

[02:04:13] कांटेक्ट मी के लिए फॉर्म बनाएंगे जिसमें

[02:04:15] लोग जो हैं अपनी ईमेल आईडी हमें छोड़ सकते

[02:04:17] हैं उसमें अपना नाम छोड़ सकते हैं क्या

[02:04:19] उनके क्वेरी है क्या वो कोई रिक्रूटर है

[02:04:21] है या कोई हेल्प मांग रहा है हमारे कॉलेज

[02:04:23] का जूनियर उस तरीके की इंफॉर्मेशन डाल

[02:04:25] सकते हैं कांटेक्ट मी का हमें फॉर्म

[02:04:27] डिजाइन करना है इसके अलावा एक और

[02:04:29] प्रोजेक्ट टू का आईडिया है कि आपको एक

[02:04:30] वेबसाइट बनानी है रिसोर्सेस के लिए फॉर

[02:04:32] कॉलेज स्टूडेंट्स जिसमें सबसे पहले तो

[02:04:34] वेबसाइट का एक साइनअप फॉर्म हम डिजइन कर

[02:04:36] रहे होंगे उसके अलावा हम लिंक्स ऐड कर

[02:04:39] सकते हैं आई फ्रेम ऐड कर सकते हैं कोडिंग

[02:04:41] वीडियोस का तो कोडिंग वीडियोस के हम चीजें

[02:04:44] जो है ऐड कर दें आप अपना कॉलेज चैनल को

[02:04:47] रेफर कर सकते हैं उनकी कुछ वीडियो आप डाल

[02:04:49] देंगे और उससे पहले एक साइन होगा फिर

[02:04:52] बच्चे जो हैं जाकर डिफरेंट डिफरेंट कोडिंग

[02:04:54] वीडियोस को देख सकते हैं साथ के साथ एक

[02:04:55] टेबल बनानी है होम पेज पर जिसमें क्या

[02:04:57] होगा डिफरेंट डिफरेंट टॉपिक्स जो आपकी

[02:04:59] वेबसाइट कवर कर रही है स्टूडेंट्स के लिए

[02:05:01] उनको आप दिखा रहे होंगे अपने होम पेज के

[02:05:03] ऊपर तो ये थोड़ा सा रिसोर्स लाइब्रेरी

[02:05:05] टाइप आप एक प्रोजेक्ट बना सकते हैं इसको

[02:05:07] अपने मिनी प्रोजेक्ट की तरह ऐड कर सकते

[02:05:08] हैं इसमें एक्चुअली अगर आप सीएसएस

[02:05:11] जावास्क्रिप्ट या बैक एंड सीख लेते हैं तो

[02:05:12] ये पूरा का पूरा आपका फुल ऑन एक मेजर

[02:05:15] प्रोजेक्ट बन जाता है जो रिज्यूमे में

[02:05:17] लिखने के लिए अच्छा है कि आपको बेसिक

[02:05:18] कांसेप्ट सारे के सारे आते हैं अब

[02:05:21] है हमने काफी अच्छे तरीके से प्रो लेवल तक

[02:05:23] तो इसके बाद नेक्स्ट स्टेप ये होता है कि

[02:05:25] हम सीएसएस सीखते हैं यानी कैस्केडिंग

[02:05:27] स्टाइल शीट्स और उसके बाद हम सीखते हैं

[02:05:28] जावास्क्रिप्ट को एंड देन फाइनली बैक एंड

[02:05:31] अब अगर आप चाहते हैं कि

[02:05:51] दिए होंगे आज के लिए इतना ही मिलते

[02:05:53] नेक्स्ट वीडियो में टिल देन कीप लर्निंग

[02:05:55] एंड कीप एक्सप्लोरिंग