What is the head vs body vs html tag in a web design page

All right, it is time to make an actual proper website. At the moment we've put in some html tags and some basic CSS, but that's not all we need. We need some bits and pieces, like the Job Type, the Head Tag, the Body Tag. So in this video we'll work out how to add those quickly, and what they all do. All right, let's jump in. 

First thing is, is that this page that we've made, this helloworld.html, it's got the basics in it, but it's missing a chunk of elements, to make it an official web page. So let's close it down and look at those, so close it down. Let's make a new page. So 'File', 'New'. Let's 'Save' it. This one's going to be called 'understanding… let's put in a hyphen, and let's put in 'bodyhtmlhead'. Make sure, at the end you add html, .html, at the end, otherwise it doesn't know what you're doing. 

The other thing to notice at this point is that you can't use spaces, or you shouldn't use spaces. You need to use hyphens or underscores, it doesn't matter which. I use hyphens; let's hit 'Save'. When you are naming things try not to use things like dollar signs or ampersands, or any kind of-- just use numbers and letters. 

To make this an official web page it needs a couple of things. It needs to know that we're dealing with an html page. So it's something called the Doc type. So it's a Doc type of html. Then we need to establish that it is an html document, that is set in the language of English. I'm going to close that off. There is probably another five or six lines that we need to add to make this thing official. We don't type that out. There is an easy shortcut, because it's such a consistent, repeatable thing that everyone needs to do. 

VS code uses something called Emit, don't worry, Emit's the word, but it's a little bit of code hinting, that really helps you go fast. So instead of typing all the things we need to make an official web page, we type an exclamation mark and we hit return on the keyboard. That's all the official stuff we need to make this a legitimate html page. Here's our Doc type, there's the English language. Then it has something called the Head and the Body. Then it's all wrapped up in this html tag. 

Now what are all these things? So the Doc type just tells us that it's html. This one here, if you see, if I click in here, html, you'll see there's a corresponding wrapper at the end here. And all of the website is inside that html tag. Like we had the H1 earlier, remember we had H1, and there was a beginning and a closing, and everything inside was the H1. It's the same with all of the html tags. This one just says, all of this is html; thank you, very much. Not very exciting html tag, you're not going to deal with it much at all, these other two tags inside of here, you will. 

There's the Head, there's the Body. So the Head Tag-- I'm going to put a couple of 'Return's in. Remember, Returns don't mean anything, just so that we can segment them when we're learning. So the Head has an opening and a closing, and everything inside of here is stuff that the browser needs to work. So Chrome needs this stuff, but the user doesn't see it. So if we save this file, 'Save', we jump out to Chrome, we'll go to 'File', we'll go to 'Open File'. Let's find this new one, understanding-bodyhtmlhead. You'll notice that there's nothing on the page. 

So this is the Body, that white square down the bottom, that's the Body. The Head is stuff that the browser absorbs but doesn't show you. You can see, there's lots of stuff that just doesn't show. I'm going to deal with all of this sort of stuff later on, but the basics here, that you-- this one here, the Character Set, just telling it we're using kind of a Latin keyboard; A, B, C, 1, 2, 3. We'll talk about these things later on. 

Responsive design needs this. There's some problems with Microsoft Edge, that it needs to be compatible with things. The document title, we'll do in the very next video, but it's all stuff that the browser needs, that we don't really need to-- that the user, our audience doesn't need to see. What the audience needs to see is everything in the Body. So I put a couple of 'Return's in here. Loads, too many Returns, Dan. But in the Body, this is where we add stuff, so let's add an H1. So we're going to type in, angle brackets, h1, close it off, '<h1>'. And in here is 'Hello Dan', or your name. We're going to save it.

So everything in the Head, browser didn't see. Everything in the Body actually gets seen by the user. So let's have a look in our browser. Let's 'Refresh', there it is there. Cool. So html, everything's inside of there. Head, stuff that the browser needs to work. Body is the stuff that the user sees, those are our three main tags. Now let's do a couple of things, let's look at the Head tag. 

Remember, we want to style this H1. Where does the style go? We don't put it in the Body. We don't put it in between the Head and the Body, it goes inside the Head. So after the title, put in a 'Return'. Then we can put it in our Style. Remember, open square brackets, close it off. 'Return', between the two. Everything in between these two tags is the CSS. The CSS can go in the Head. We don't really want this code appearing on the page. We want it just to affect the stuff that's in the Body. So we say, remember our syntax, h1, curly braces. And we say we'll make it the color of, random color from this list. Dark orchid, here we go. What goes at the end? semicolon, save it. Let's have a little look in the browser. Browser, refresh, awesome. Dark orchid, orchard? Orchid. So Head, stuff that goes on the page. I kind of said this 20 times now, but you get the idea. Things like this can go in the Head, but the things people see are in the Body. 

Now a couple of things I want to explain before we move on is-- I'm jumping between these two, and you're like, "How did he do that?" So on a Mac, you can hold down the 'Command key' and hit 'Tab'. And these little things open up. You can keep hitting Tab to move through them. On a PC, it's 'Ctrl Tab'. You can flick between them too by just tapping them. So 'Ctrl Tab, 'Ctrl Tab'. You don't have to do that, what you might do is, just have it over here, do some Window resizing. So you can kind of see, one on one side, one on the other. It's a lot easier to work that way, up to you. 

Another thing I want to do before we move on - totally wrecked that. - is that-- I don't want you, at this point to go, "How am I going to remember all of these things," because, let's say that I want to make this 'Hello Dan' underlined. The cool thing about the internet, especially html, there's a load of resources. So I want to make this underlined, oh, 'Help', what is it? So do I go in here and just start typing 'underlined'? Doesn't seem to work. Let's say I go to Chrome. I'll put that up again. I'm going to make a new search box. I'm going to say, html, or CSS code for underline. 

We're going to do this throughout the course because I'm not here to teach you every single bit of syntax. I want you-- I'm teaching you to fish. Let's have a look, so I've asked for the code for underline. There's going to be kind of three main places that you'll use in your-- that most Web Designers use. There is something called w3schools.com, that's a really good resource. CSS Tricks, that is an amazing website by Chris Coyier. There's another one that appears quite often, and it is, it's not appearing in that list, but it's called Stack Overflow. Those are your three main ones to write down, and say, "Yep, those are the go-to places." Let's have a look.

 CSS Text Decoration. You can see here, using an H1. There's overline, that's not what I want, underline. So instead of kind of remembering them, you can either copy this, just copying it with my keyboard. 'Command C' on a Mac, or 'Ctrl C' on a PC. Go back into VS code, and I'm just going to paste it in. Save it, and then jump to our browser. Preview it, and it's underlined. There's going to be a lot of that. If you're like, "Man, do I need to write all this down?” there's lots of times when you’re just like, "I can't remember what that syntax is." So you can go and find it. Because text decoration is a weird way of discussing underline, but after a while you will learn some stuff that you're doing quite regularly. Text, decoration, overline. Never use that one in my life. Refresh. Look at that, you can do it. 

That's going to be it for this video. Let's jump into the next one, where we start talking about Meta Title, that we've been ignoring.