Hi, everybody. Every once in a while I like to stop what we've been doing, and just do a quick check and make sure that we've all been following along, and really getting a grasp of what we're doing. So today, we're going to make a template page. Today, I want you to create a page called index.html. This page should utilize all those semantic tags that we've been talking about. The header, some sort of main, a footer. And what I want you to do is I wanna make sure those elements are not empty. Thirdly, I wanna make sure that your page validates. So let's stop for a second, and think about all the things we've learned. You've learned how to make elements. You've learned how to validate them. You've learned how to save your code. So if you've only been listening and you haven't been coding, now is the time to jump in with me and start coding. So let's start with a shell. If you remember, every webpage has three main parts. It has your Doctype, which says hey browser, I'm gonna use HTML5. It has your Meta-Data, which says, I'm gonna use this type of language and this is what the title of my page should be. And finally, you're gonna show your Displayable Content. So, now's a time to stop, if you've been looking along on, on your phone or whatever, I'd really love you to burst open an editor, and start typing along with me. So I've brought up Sublime, which is the editor I like to use. And I'm gonna go ahead and start typing in my text. The first thing I wanted to start with,was my doc type. And for HTML5 it's super easy, because it's just doc type. [SOUND] As long as I can type it correctly. I've got that. The next thing I said I wanted to put in, was the head or the Meta-Data, and the tag for that, very simply enough is head. Now if you've been following along as I code, you would know that most of the time my code has this really nice kind of color signature to it, and you can follow along with the different parts. But right now all my text is just white. The reason for this, is that even though I've begun an HTML file. I haven't told my browser yet that it's an HTML file, it's just any type of text to them. So I am gonna go ahead and save. And what I want to do is I want to call this, index.html. The reason for using index.html, is that this is a convention known worldwide as, this is the main page for my site. So I'm gonna go ahead and hit save. And as you can see, the colors have started showing up. So let's go ahead and finish filling in my head element. I'm gonna go ahead and put in my end tag right away, because otherwise I tend to forget these things. And the two things I want in here are the Meta-Data. [SOUND] Oops, meta. Eight. And the all important title. The title, again, is what shows up on the browser's little tab. It doesn't show up on the page itself, it shows up in the tab. [SOUND] I'm gonna say, My First Page. Okay, I've gone in and put the head, and now it's time to put in the body of my code. Or my displayable content. So I'm going to start with the body tag. [SOUND] And I'm actually gonna go and end my HTML tag while I'm thinking about it at the same time. So this is an important step right here, where we decide, whether we're gonna make accessible code, or just every day average code. Accessible code is broken into parts. You have your header, you have your main, you have your footer. So at the very least, use a main and a footer here, letting our user know how you can distinguish between the two types of content. So when I put in main. And I put in footer. It may look like I have content, but really I don't have anything yet. So I'm gonna save my file. And I'm gonna use, open in browser. And just take a look at what we've done so far. As you can see, I do have that little part along the top that says my first page, but what I'm missing is any type of real content. It knows there's a main, and it knows there's a footer, but there's nothing else really there. So let's go ahead and put it in. So I will put in a little paragraph tag that says, this is my main code. And down, oops, I shall leave it just like that. And in my footer, I should put in some more information. Think of a more interesting footer. Okay. So I'm gonna go ahead and save my page really quickly. And let's go ahead and take a look and see if there's any, oops. Wrong one. And take a look and see if there's anything there. Oh, there we go. We have this is my man code, and think of a more interesting footer. So it works. My code works, and it's displaying the things I wanted it to display. But as I mentioned, one of the things we wanna do every time we write code, is we wanna validate it, and make sure we've written good, solid code. So let's take a look. I'm gonna open up a new tab, do a validator. And I'm gonna do validate by direct input, because I haven't actually posted my code anywhere. So go back to my sublime. [SOUND] Grab all of my code. [SOUND] And put it in here. I'm curious if you guys all noticed the error before I run it through the validator, but let's check. Well, at first you don't really see many messages. But as we scroll our way down, you can see that right away it says, the element footer must not appear as a descendant of the footer. Well that's a kind of weird error for me, but let's take a look at it. So, we wanna look somewhere along line ten. And also, I'm gonna peek just a little bit at the next one, where it says end tag for body seen, but there were Unclosed Elements. So now I know there are two things going on. There's something wrong with my footer, and something hasn't been closed. Let's go to line ten. Alright, here's my footer. Well it's unhappy about my footer. Oh here's another problem. I have footer here, and footer here. So even though I had multiple errors, lets see what happens when I just make this one change right here. [SOUND] All right. I'm gonna go back here. I kind of do this the long way, but I always prefer it that way. Put in my code, And let's check it again. Boom. Even though I had a bunch of errors before, everything is gone. So I really hope you've been following along with me. I really hope you've gone in, you've written some code. You've remembered to use those semantic tags such as main, such as footer. And you went back in and you fixed any of the errors that the validator found for you. This is really important. You can't really know HTML5, until you jump in and start coding. So if you've just been following along with me, go ahead make two files, three files, four files. Have some fun and really play with the one tags that confused you the most. Because that's how your gonna understand them, and feel confident about your coding.
