‫Hey, there.
‫Welcome back from the site.
‫Now let us start our journey with estimate and discuss about everything in.
‫The first thing with HDMI is it's used to structure everything that we see on web.
‫Basically, it's helped us to structure the content that vision of a page.
‫I would try to open any type of web page.
‫Maybe this one itself.
‫This structure is divided behind the scene to HDMI.
‫For now, you can just right click here and click on this inspect option.
‫If you click here.
‫Something like this will be open, and you can either do this at the bottom or you can take this on
‫this side by itself.
‫I know this is pretty Erdogan stuff, but this will help you to analyze thing as a development itself
‫from the very first lecture, and it will help you to visualize also that, however, pages created.
‫So we use HDMI to structure content.
‫Now here you can see this is a HDMI cord.
‫And if I just go on the body part and just use this option to either open and close the cord part,
‫you can understand things.
‫So this is the structure of this page.
‫Here we use desktop five to define that the whole pages about general.
‫Then we have this HDMI tag that we have defined our language.
‫Then we have this head and then we have this body.
‫So basically, this is the structure of any HDMI page that you see on web.
‫Let me try to open Amazon.
‫Now this is Amazon homepage, and I'm currently visiting the Indian Ocean.
‫You can visit dot com or any other.
‫Right click Click on Inspect.
‫You have this option.
‫Scroll at the top and just search about body.
‫Click here.
‫So I closed this one.
‫Now you can see the structure, so we have this dock.
‫Then we have this achievement, then we have this head, then we have this body.
‫So that's how any web page is structured online.
‫And we need to do something similar.
‫Now these are tags, and then we have some attribute.
‫We have values that we'll be discussing as we move forward.
‫But hey, I just wanted you to visualize this point that we have a dog paper than we have estimated
‫and we have had Badia and everything else for every single web page that you see online.
‫I hope you got the idea right?
‫And you can utilize this inspect that will be directly on your page itself on Chrome, as well as you
‫can test this on Firefox or any other browser.
‫I strongly recommend you use Chrome or Firefox, and here you can also use either this part.
‫So you will have information on the bottom of the page.
‫You can use anyone and you will have all the information on the element by click on Element and then
‫you have this head body and all the information.
‫Similarly, for this page also, I hope you got the idea.
‫This is the basic stuff that we are discussing.
‫We just want to visualize thing.
‫No, similarly, we need to create our own page, right?
‫So we used different dogs to define that content.
‫Here we use this H1 tag to define our heading.
‫If you're just how it all the Sichuan, you will see that one element present a section heading.
‫So I use the herding partners shebang start up.
‫Now there are two types of dog.
‫The first one that open and close.
‫That means we need to close that dog.
‫So this is the dog.
‫This is the first bite.
‫Here we open the H1 tag, right?
‫Everything that we want as heading.
‫And then we close that tag.
‫So that means between these opening and closing tag, we have all the information for herding.
‫So this is the type one.
‫Now there will be 13 other dogs that don't require disclosing part.
‫So that means they will have something like this now.
‫Each one required are close enough that I'm just giving an example, and the second type don't require
‫a closing tag.
‫We call them as self-closing.
‫So there is one which require opening and closing, and then there is a second one, which is self-closing.
‫So there are two type of dogs.
‫I hope you got the basic idea.
‫Now let me clear this page for now and structured things like we discussed with the visualization part
‫or Amazon, as well as this VSCO website itself.
‫So we need some time information, then we have to ahead body and everything else.
‫So let me jump here.
‫The first thing I'm going to find is not pipe.
‫So since we are using these extension, we don't need to write everything.
‫I can use this exclamation mark and click on Enter.
‫And this is how you get everything.
‫But assuming that, I don't recommend for now to use these shortcuts, but that's how you can do everything.
‫Next, fight everything for now, and then we will use the shortcut.
‫So here we need to use this lesser than in greater than symbol, then our symbol and then I need you
‫to find what type so I need to use.
‫The I and head, I just need to write it down.
‫That said, that's the first line of and file and then we need to use HDMI targets.
‫So head, if I HD emit painter, you can see we have this opening tag and then we have this that.
‫And if you hover over this, you will get the HDMI element presented all of an HDMI document.
‫So that means write everything inside this.
‫This is the rule.
‫This is the part from where everything starts.
‫So now we write everything in-between this HDMI tag.
‫So remember, the first part we have is our head.
‫The second part we have is Armani.
‫So this head, so everything right inside head will be for our head.
‫But.
‫And everything that we write inside our body will be for body parts.
‫Now you can take this example for humans.
‫So you can take this example for any other project.
‫I will be taking certain reference, but it's better to visualize things practically.
‫So that's it.
‫That's the basic structure that we have now had.
‫Once you click on control plus s, everything will save automatically and format automatically.
‫Why?
‫Because we are using rakyat.
‫Now you can also jump onto this setting.
‫Click on the setting and how you can search about format.
‫And here you will have option to form, I don't see.
‫You can check this and you can even stick.
‫That means at through format, if it's unchecked, that means it will not format so totally depend on
‫you and your requirement.
‫For now, let's just pick this.
‫They might save any time.
‫Everything will be formatted.
‫Currently, we don't have any court.
‫We are not going to have a good format.
‫But let's understand this point.
‫Let me select this one.
‫Click on Tab and get inside out of it.
‫So how does the part where we have all the information we're just not seen on our web page?
‫And what is the part we just seen honor that they say had a very select head.
‫You can see nothing is happening, but if I select body, you can see this blue color is coming.
‫You see, so this is the content about this whole page, Mary's head contained behind the scenes information.
‫So if you get here, this is all the information which is behind the scene, things that are happening
‫behind the scene.
‫So this is been coming to better.
‫You can call it us containing behind the scenes information and what is the whole page that we see?
‫For example, let me take out own page and here let me take each one back.
‫Press, enter and write Shramik self.
‫And say, if I jump back here again, we need to launch us, I want it running.
‫Let me add, I click here.
‫Back with open midlife, so this is our page, so everything that is visible on our page is in body
‫part.
‫Everything else will be inside head.
‫That means behind the scenes information.
‫So that's the basic start, or no, let me delete everything.
‫As soon as I removed my content, I got an error, or I should say I got the message that there is no
‫head on body.
‫I hope you got the message now that our structure is not great.
‫There is some issue with our structure.
‫So this is a warning my life.
‫So what itself?
‫Now, the stock may set up all I need to uses are exclamation mark and then click on Enter.
‫You can see this image.
‫This is by be escorted self, so enter.
‫And this is the boilerplate pull that means the common code that we need every time to work with our
‫female code.
‫So this is the basic code.
‫This is the basic setup that we need every time we create an HDMI file, and that's why we call this
‫as boilerplate.
‫And that's why we have these shortcuts.
‫Let me save this one.
‫Everything is set up.
‫And since we are using prettier, you can see automatically there is a space.
‫We don't require that, but it's good to visualize and improve readability.
‫This is our head and this is our body now.
‫Now you will see certain information inside our head, though these are some.
‫Then there is some data.
‫And let me attach one back here with my body itself opening and closing down.
‫Then, right, should I'm following all?
‫Let me save right, Glenn, open with life, so you can say it's working fine, and now in the previous
‫run, we had title as this in next.
‫So this is basically the title part which we see at the top.
‫So it was something off our united itself.
‫Now our title is document and this is our body part.
‫Why?
‫Because inside our head, we have this title.
‫I hope you got the basic idea.
‫Don't worry, we are working discuss about this in-depth in the next lecture, but this is the basic
‫idea.
‫So title is basically the fix that we are going to see on the top of the browser or on the Google search
‫itself.
‫I will be discussing about this and next lecture now.
‫I hope you got the basic idea about HDMI, the structure and how we are going to utilize it.
‫We have this dark typing form that we are going to use HDMI, that this documentation is HDMI type.
‫Then we have our HDMI element.
‫Everything is inside this HDMI, and then we have these two part everything behind the scenes information
‫stored in head and everything that we see on web page is stored in body.
‫These are the docks which require opening and closing out.
‫If you see this matter just doesn't have any closing tag, right?
‫So let us discuss about this whole thing, this whole thing, this matter and these tidal in the next
‫channel building, I strongly recommend you create a female file.
‫Do all this stuff so you will get basic idea and you will understand how this is going to work.
‫I hope this lecture was helpful.
‫Thank you for calling.
‫And I see you guys in the next one.