1 00:00:01,090 --> 00:00:01,640 ‫Hey, there. 2 00:00:01,690 --> 00:00:03,370 ‫Welcome back from the site. 3 00:00:03,940 --> 00:00:08,320 ‫Now let us start our journey with estimate and discuss about everything in. 4 00:00:08,980 --> 00:00:14,980 ‫The first thing with HDMI is it's used to structure everything that we see on web. 5 00:00:15,370 --> 00:00:19,780 ‫Basically, it's helped us to structure the content that vision of a page. 6 00:00:20,320 --> 00:00:22,830 ‫I would try to open any type of web page. 7 00:00:22,840 --> 00:00:24,100 ‫Maybe this one itself. 8 00:00:24,700 --> 00:00:28,000 ‫This structure is divided behind the scene to HDMI. 9 00:00:28,600 --> 00:00:32,980 ‫For now, you can just right click here and click on this inspect option. 10 00:00:33,340 --> 00:00:34,270 ‫If you click here. 11 00:00:34,810 --> 00:00:41,890 ‫Something like this will be open, and you can either do this at the bottom or you can take this on 12 00:00:41,890 --> 00:00:43,000 ‫this side by itself. 13 00:00:43,970 --> 00:00:49,670 ‫I know this is pretty Erdogan stuff, but this will help you to analyze thing as a development itself 14 00:00:49,670 --> 00:00:55,190 ‫from the very first lecture, and it will help you to visualize also that, however, pages created. 15 00:00:55,550 --> 00:00:58,670 ‫So we use HDMI to structure content. 16 00:00:58,880 --> 00:01:01,310 ‫Now here you can see this is a HDMI cord. 17 00:01:01,730 --> 00:01:10,580 ‫And if I just go on the body part and just use this option to either open and close the cord part, 18 00:01:10,850 --> 00:01:12,290 ‫you can understand things. 19 00:01:12,530 --> 00:01:14,690 ‫So this is the structure of this page. 20 00:01:15,200 --> 00:01:19,870 ‫Here we use desktop five to define that the whole pages about general. 21 00:01:20,270 --> 00:01:24,200 ‫Then we have this HDMI tag that we have defined our language. 22 00:01:24,380 --> 00:01:27,320 ‫Then we have this head and then we have this body. 23 00:01:27,740 --> 00:01:32,600 ‫So basically, this is the structure of any HDMI page that you see on web. 24 00:01:32,930 --> 00:01:34,640 ‫Let me try to open Amazon. 25 00:01:37,690 --> 00:01:42,580 ‫Now this is Amazon homepage, and I'm currently visiting the Indian Ocean. 26 00:01:42,610 --> 00:01:44,650 ‫You can visit dot com or any other. 27 00:01:45,580 --> 00:01:47,440 ‫Right click Click on Inspect. 28 00:01:47,830 --> 00:01:49,060 ‫You have this option. 29 00:01:49,450 --> 00:01:52,690 ‫Scroll at the top and just search about body. 30 00:01:52,690 --> 00:01:53,240 ‫Click here. 31 00:01:54,130 --> 00:01:55,390 ‫So I closed this one. 32 00:01:56,590 --> 00:02:00,460 ‫Now you can see the structure, so we have this dock. 33 00:02:00,850 --> 00:02:05,590 ‫Then we have this achievement, then we have this head, then we have this body. 34 00:02:06,160 --> 00:02:09,790 ‫So that's how any web page is structured online. 35 00:02:10,240 --> 00:02:12,190 ‫And we need to do something similar. 36 00:02:12,670 --> 00:02:15,850 ‫Now these are tags, and then we have some attribute. 37 00:02:15,860 --> 00:02:19,240 ‫We have values that we'll be discussing as we move forward. 38 00:02:19,450 --> 00:02:26,400 ‫But hey, I just wanted you to visualize this point that we have a dog paper than we have estimated 39 00:02:26,400 --> 00:02:31,300 ‫and we have had Badia and everything else for every single web page that you see online. 40 00:02:31,690 --> 00:02:33,100 ‫I hope you got the idea right? 41 00:02:33,520 --> 00:02:39,790 ‫And you can utilize this inspect that will be directly on your page itself on Chrome, as well as you 42 00:02:39,790 --> 00:02:42,550 ‫can test this on Firefox or any other browser. 43 00:02:42,790 --> 00:02:48,940 ‫I strongly recommend you use Chrome or Firefox, and here you can also use either this part. 44 00:02:49,120 --> 00:02:52,030 ‫So you will have information on the bottom of the page. 45 00:02:52,720 --> 00:02:57,910 ‫You can use anyone and you will have all the information on the element by click on Element and then 46 00:02:57,910 --> 00:03:01,060 ‫you have this head body and all the information. 47 00:03:01,480 --> 00:03:04,710 ‫Similarly, for this page also, I hope you got the idea. 48 00:03:04,720 --> 00:03:06,730 ‫This is the basic stuff that we are discussing. 49 00:03:07,090 --> 00:03:08,650 ‫We just want to visualize thing. 50 00:03:09,590 --> 00:03:12,200 ‫No, similarly, we need to create our own page, right? 51 00:03:12,620 --> 00:03:15,650 ‫So we used different dogs to define that content. 52 00:03:16,400 --> 00:03:19,940 ‫Here we use this H1 tag to define our heading. 53 00:03:20,300 --> 00:03:26,000 ‫If you're just how it all the Sichuan, you will see that one element present a section heading. 54 00:03:26,570 --> 00:03:29,300 ‫So I use the herding partners shebang start up. 55 00:03:29,810 --> 00:03:31,700 ‫Now there are two types of dog. 56 00:03:31,940 --> 00:03:34,370 ‫The first one that open and close. 57 00:03:34,760 --> 00:03:37,040 ‫That means we need to close that dog. 58 00:03:37,310 --> 00:03:38,690 ‫So this is the dog. 59 00:03:38,840 --> 00:03:39,920 ‫This is the first bite. 60 00:03:40,550 --> 00:03:43,510 ‫Here we open the H1 tag, right? 61 00:03:43,520 --> 00:03:45,410 ‫Everything that we want as heading. 62 00:03:45,890 --> 00:03:47,600 ‫And then we close that tag. 63 00:03:48,080 --> 00:03:54,110 ‫So that means between these opening and closing tag, we have all the information for herding. 64 00:03:54,830 --> 00:03:56,210 ‫So this is the type one. 65 00:03:56,530 --> 00:04:01,040 ‫Now there will be 13 other dogs that don't require disclosing part. 66 00:04:01,340 --> 00:04:04,010 ‫So that means they will have something like this now. 67 00:04:04,040 --> 00:04:09,540 ‫Each one required are close enough that I'm just giving an example, and the second type don't require 68 00:04:09,540 --> 00:04:10,490 ‫a closing tag. 69 00:04:10,940 --> 00:04:12,740 ‫We call them as self-closing. 70 00:04:13,100 --> 00:04:18,920 ‫So there is one which require opening and closing, and then there is a second one, which is self-closing. 71 00:04:19,220 --> 00:04:20,830 ‫So there are two type of dogs. 72 00:04:20,840 --> 00:04:22,820 ‫I hope you got the basic idea. 73 00:04:23,510 --> 00:04:30,200 ‫Now let me clear this page for now and structured things like we discussed with the visualization part 74 00:04:30,200 --> 00:04:33,670 ‫or Amazon, as well as this VSCO website itself. 75 00:04:34,100 --> 00:04:38,930 ‫So we need some time information, then we have to ahead body and everything else. 76 00:04:39,350 --> 00:04:40,640 ‫So let me jump here. 77 00:04:41,180 --> 00:04:43,340 ‫The first thing I'm going to find is not pipe. 78 00:04:43,850 --> 00:04:47,390 ‫So since we are using these extension, we don't need to write everything. 79 00:04:47,630 --> 00:04:51,530 ‫I can use this exclamation mark and click on Enter. 80 00:04:52,100 --> 00:04:54,440 ‫And this is how you get everything. 81 00:04:54,830 --> 00:05:01,580 ‫But assuming that, I don't recommend for now to use these shortcuts, but that's how you can do everything. 82 00:05:02,630 --> 00:05:05,990 ‫Next, fight everything for now, and then we will use the shortcut. 83 00:05:06,500 --> 00:05:12,520 ‫So here we need to use this lesser than in greater than symbol, then our symbol and then I need you 84 00:05:12,530 --> 00:05:14,990 ‫to find what type so I need to use. 85 00:05:17,690 --> 00:05:20,500 ‫The I and head, I just need to write it down. 86 00:05:20,870 --> 00:05:27,530 ‫That said, that's the first line of and file and then we need to use HDMI targets. 87 00:05:27,820 --> 00:05:35,000 ‫So head, if I HD emit painter, you can see we have this opening tag and then we have this that. 88 00:05:35,540 --> 00:05:41,360 ‫And if you hover over this, you will get the HDMI element presented all of an HDMI document. 89 00:05:41,780 --> 00:05:43,970 ‫So that means write everything inside this. 90 00:05:43,970 --> 00:05:44,760 ‫This is the rule. 91 00:05:44,810 --> 00:05:47,120 ‫This is the part from where everything starts. 92 00:05:47,630 --> 00:05:51,290 ‫So now we write everything in-between this HDMI tag. 93 00:05:52,100 --> 00:05:55,550 ‫So remember, the first part we have is our head. 94 00:05:55,730 --> 00:05:58,100 ‫The second part we have is Armani. 95 00:05:58,820 --> 00:06:04,520 ‫So this head, so everything right inside head will be for our head. 96 00:06:04,530 --> 00:06:04,910 ‫But. 97 00:06:07,130 --> 00:06:10,980 ‫And everything that we write inside our body will be for body parts. 98 00:06:11,670 --> 00:06:14,950 ‫Now you can take this example for humans. 99 00:06:15,140 --> 00:06:17,660 ‫So you can take this example for any other project. 100 00:06:17,900 --> 00:06:22,520 ‫I will be taking certain reference, but it's better to visualize things practically. 101 00:06:22,820 --> 00:06:23,470 ‫So that's it. 102 00:06:23,480 --> 00:06:26,660 ‫That's the basic structure that we have now had. 103 00:06:27,050 --> 00:06:33,810 ‫Once you click on control plus s, everything will save automatically and format automatically. 104 00:06:33,830 --> 00:06:34,220 ‫Why? 105 00:06:34,550 --> 00:06:36,440 ‫Because we are using rakyat. 106 00:06:37,340 --> 00:06:39,560 ‫Now you can also jump onto this setting. 107 00:06:40,190 --> 00:06:43,730 ‫Click on the setting and how you can search about format. 108 00:06:46,680 --> 00:06:49,500 ‫And here you will have option to form, I don't see. 109 00:06:49,560 --> 00:06:52,470 ‫You can check this and you can even stick. 110 00:06:52,470 --> 00:06:58,110 ‫That means at through format, if it's unchecked, that means it will not format so totally depend on 111 00:06:58,110 --> 00:06:59,280 ‫you and your requirement. 112 00:06:59,550 --> 00:07:01,380 ‫For now, let's just pick this. 113 00:07:02,890 --> 00:07:04,470 ‫They might save any time. 114 00:07:04,620 --> 00:07:06,030 ‫Everything will be formatted. 115 00:07:06,600 --> 00:07:08,120 ‫Currently, we don't have any court. 116 00:07:08,160 --> 00:07:10,170 ‫We are not going to have a good format. 117 00:07:10,470 --> 00:07:12,280 ‫But let's understand this point. 118 00:07:12,300 --> 00:07:13,380 ‫Let me select this one. 119 00:07:13,410 --> 00:07:15,920 ‫Click on Tab and get inside out of it. 120 00:07:16,530 --> 00:07:22,260 ‫So how does the part where we have all the information we're just not seen on our web page? 121 00:07:23,460 --> 00:07:29,040 ‫And what is the part we just seen honor that they say had a very select head. 122 00:07:29,310 --> 00:07:33,660 ‫You can see nothing is happening, but if I select body, you can see this blue color is coming. 123 00:07:34,700 --> 00:07:42,380 ‫You see, so this is the content about this whole page, Mary's head contained behind the scenes information. 124 00:07:42,980 --> 00:07:48,380 ‫So if you get here, this is all the information which is behind the scene, things that are happening 125 00:07:48,380 --> 00:07:49,190 ‫behind the scene. 126 00:07:49,580 --> 00:07:52,040 ‫So this is been coming to better. 127 00:07:52,160 --> 00:07:58,430 ‫You can call it us containing behind the scenes information and what is the whole page that we see? 128 00:07:59,150 --> 00:08:04,400 ‫For example, let me take out own page and here let me take each one back. 129 00:08:04,760 --> 00:08:07,220 ‫Press, enter and write Shramik self. 130 00:08:09,600 --> 00:08:15,720 ‫And say, if I jump back here again, we need to launch us, I want it running. 131 00:08:15,870 --> 00:08:17,270 ‫Let me add, I click here. 132 00:08:17,350 --> 00:08:26,340 ‫Back with open midlife, so this is our page, so everything that is visible on our page is in body 133 00:08:26,340 --> 00:08:26,730 ‫part. 134 00:08:27,180 --> 00:08:29,590 ‫Everything else will be inside head. 135 00:08:29,610 --> 00:08:31,680 ‫That means behind the scenes information. 136 00:08:32,730 --> 00:08:37,050 ‫So that's the basic start, or no, let me delete everything. 137 00:08:38,480 --> 00:08:44,870 ‫As soon as I removed my content, I got an error, or I should say I got the message that there is no 138 00:08:44,870 --> 00:08:45,760 ‫head on body. 139 00:08:46,340 --> 00:08:49,640 ‫I hope you got the message now that our structure is not great. 140 00:08:49,910 --> 00:08:51,560 ‫There is some issue with our structure. 141 00:08:51,770 --> 00:08:53,420 ‫So this is a warning my life. 142 00:08:53,420 --> 00:08:54,260 ‫So what itself? 143 00:08:55,240 --> 00:09:02,150 ‫Now, the stock may set up all I need to uses are exclamation mark and then click on Enter. 144 00:09:02,160 --> 00:09:03,430 ‫You can see this image. 145 00:09:03,970 --> 00:09:07,300 ‫This is by be escorted self, so enter. 146 00:09:08,110 --> 00:09:14,620 ‫And this is the boilerplate pull that means the common code that we need every time to work with our 147 00:09:14,910 --> 00:09:15,580 ‫female code. 148 00:09:16,210 --> 00:09:17,640 ‫So this is the basic code. 149 00:09:17,650 --> 00:09:23,410 ‫This is the basic setup that we need every time we create an HDMI file, and that's why we call this 150 00:09:23,410 --> 00:09:24,250 ‫as boilerplate. 151 00:09:24,490 --> 00:09:26,260 ‫And that's why we have these shortcuts. 152 00:09:27,040 --> 00:09:28,060 ‫Let me save this one. 153 00:09:28,390 --> 00:09:29,470 ‫Everything is set up. 154 00:09:29,620 --> 00:09:33,700 ‫And since we are using prettier, you can see automatically there is a space. 155 00:09:34,150 --> 00:09:38,110 ‫We don't require that, but it's good to visualize and improve readability. 156 00:09:38,740 --> 00:09:41,140 ‫This is our head and this is our body now. 157 00:09:41,650 --> 00:09:45,490 ‫Now you will see certain information inside our head, though these are some. 158 00:09:46,420 --> 00:09:47,840 ‫Then there is some data. 159 00:09:48,430 --> 00:09:53,650 ‫And let me attach one back here with my body itself opening and closing down. 160 00:09:54,040 --> 00:09:55,990 ‫Then, right, should I'm following all? 161 00:09:59,020 --> 00:10:07,180 ‫Let me save right, Glenn, open with life, so you can say it's working fine, and now in the previous 162 00:10:07,180 --> 00:10:10,300 ‫run, we had title as this in next. 163 00:10:10,450 --> 00:10:13,900 ‫So this is basically the title part which we see at the top. 164 00:10:14,320 --> 00:10:16,760 ‫So it was something off our united itself. 165 00:10:16,780 --> 00:10:20,320 ‫Now our title is document and this is our body part. 166 00:10:20,590 --> 00:10:21,100 ‫Why? 167 00:10:21,580 --> 00:10:23,980 ‫Because inside our head, we have this title. 168 00:10:24,670 --> 00:10:26,600 ‫I hope you got the basic idea. 169 00:10:26,620 --> 00:10:31,750 ‫Don't worry, we are working discuss about this in-depth in the next lecture, but this is the basic 170 00:10:31,750 --> 00:10:32,230 ‫idea. 171 00:10:33,900 --> 00:10:41,430 ‫So title is basically the fix that we are going to see on the top of the browser or on the Google search 172 00:10:41,430 --> 00:10:41,920 ‫itself. 173 00:10:41,940 --> 00:10:44,370 ‫I will be discussing about this and next lecture now. 174 00:10:44,820 --> 00:10:49,530 ‫I hope you got the basic idea about HDMI, the structure and how we are going to utilize it. 175 00:10:50,070 --> 00:10:56,460 ‫We have this dark typing form that we are going to use HDMI, that this documentation is HDMI type. 176 00:10:56,940 --> 00:10:59,310 ‫Then we have our HDMI element. 177 00:10:59,700 --> 00:11:06,450 ‫Everything is inside this HDMI, and then we have these two part everything behind the scenes information 178 00:11:06,450 --> 00:11:10,860 ‫stored in head and everything that we see on web page is stored in body. 179 00:11:11,250 --> 00:11:14,670 ‫These are the docks which require opening and closing out. 180 00:11:14,700 --> 00:11:18,930 ‫If you see this matter just doesn't have any closing tag, right? 181 00:11:19,590 --> 00:11:25,720 ‫So let us discuss about this whole thing, this whole thing, this matter and these tidal in the next 182 00:11:25,890 --> 00:11:29,760 ‫channel building, I strongly recommend you create a female file. 183 00:11:30,030 --> 00:11:35,400 ‫Do all this stuff so you will get basic idea and you will understand how this is going to work. 184 00:11:36,180 --> 00:11:37,710 ‫I hope this lecture was helpful. 185 00:11:37,800 --> 00:11:38,830 ‫Thank you for calling. 186 00:11:38,910 --> 00:11:40,710 ‫And I see you guys in the next one.