3. Building Web Applications: Standard HTML Layout | HTML For Beginners 🌐


hello everyone and welcome to building web applications my name is Steve Bishop from programming need easy calm and today we’re going to be talking about the standard HTML layout so if you’ve ever opened up an HTML document before you’ll notice that there is kind of some asset pattern to the way that an HTML document is laid out and we start off with a tag called the doctype tag now the doctype tag helps to tell the browser what the format of this document is and in this case we’re saying HTML in the past we used to have to specify something called a document type definition to help the browser understand what the format of the document was now since the advent of html5 we no longer have to do that we just simply say doctype is HTML next we’re going to add the HTML element so we have the open and closed HTML tags now this helps tell the browser where the beginning and the end of the HTML document is and we do refer to these as HTML documents so if you hear me use that term I mean the HTML itself inside of the HTML we’re going to have a head and a body now the head is where we can add information about the document stuff like the title now this is kind of made of data this is information about the document it’s not stuff that the user is going to see inside the browser window the body is where you put the elements that you want to display to the user so things like a paragraph tag or span or divs so this is where we can actually put the content that the user is going to see now there are several other tags that you’re gonna find inside of an HTML document but the basic structure of an HTML document is like this an HTML a head a body and inside the head is where we put information about the document and inside of the body is where we put the actual content that we want the user to see let’s apply this standard HTML layout to our index.html document so here’s our index dot HTML document we have our paragraph with a strong strong text there and we also have a spam now I’m gonna once again open this up in notepad just so that we can see that this is just text right that’s all that hTML is there’s nothing really special here but we will be using an a code editor called Visual Studio code a little bit later on for now go ahead and open up this index dot HTML document and let’s add some of that formatting we were just talking about and to start with at the very top of the document we’re gonna add that doctype so doc type we’re gonna say HTML now it does have an open and close angle bracket but there’s no forward slash right there’s no forward slash anywhere in here so it’s just doctype then we need to specify where the beginning and the end of our HTML document is so we see the open HTML document and then down here at the bottom is going to be my closed HTML document tag and that’s basically it now we need to add our head and body so after HTML let’s go ahead and add a head and let’s add the closing head tag and I’m not going to add the title just yet I’m going to show you what that’s all about a little bit later on let’s go to add the body we’re going to add the open body tag and then down here add just before the closing HTML tag let’s go ahead and add our closing body tag and again everything between the open and closed body tags is where we should be putting the content that we want to display to the user so that’s why we put it around the paragraphs and spans and strong’s now let’s just go ahead and add some tabbing to our document so I’m just going to tab over a little bit just to make things look a little nicer and our visual studio code editor will make this a lot easier to work with I promise but for right now this should be about right let’s go and save this now let’s take a look at it in our browser so I’m just going to open it up we go ahead and bring this window over there we go we see strong content goes here span content goes here and if we right click in here and we can actually view the page source and that shows us everything we have inside of our notepad right okay so this is our index dot HTML document we’ve now applied the proper formatting to our the proper layout to our HTML document okay so let’s talk about the title real quick care so I’m gonna go back to my notepad and inside of the head before I add the title tag let me just show you one last time on our document up here at the top on our tab we see index dot HTML it’s just the name of the document just the name of the file but if we go back to notepad and let’s add the title tag and we’ll say my first webpage and save that and go back to our browser and do a refresh my first webpage appears up here on the tab so if you want your up at the top of the of the browser for it to show some sort of special name for your for your document that’s where you’re gonna put you’re going to put it in the in the title tag of your head of your document so once again let’s just take one quick look at this again we got a doctype that says HTML and we can do that ever since html5 came out then we have the open and close HTML tags there to indicate the start in the end of our HTML document we have our head tags and inside of the head tags or head element is where we put information about the document now the browser used this information about our title to change what’s displayed up here in the tab then we have our body which is where we actually put the content that we want to display to the user special thanks to these members who really help the channel grow I really appreciate your help and support thank you [Music] you

Add a Comment

Your email address will not be published. Required fields are marked *