2.5 Create a Basic Page Structure

Hey! Welcome back to Top Speed HTML Development with Jade. In this lesson, you will learn how to create a basic page structure. So, what I mean by that is the essential elements of your page. Doc type, HTML element head title, meta tags, linking in a style sheet, and creating the body section. And we're going to start first, by looking at the doc type. If you've been in web development for any period of time, you'll know that there are several different doc types that you may need to use, depending on what your project is. And Jade provides you with several shortcuts to generate. Each of the doc types that you may need, and I'll include a link below this video that will take you through every single one of these doc types. Now, we're just going to start with the very simplest, and that is just the basic HTML5 doc type. You don't have to remember anything complicated for this. Because all you have to do is just type out doc type, and that will immediately generate for you the correct html 5 standard doc type tag. And that’s the easiest one, and that's probably the one you’re going to use more often. But if you do need to use a different type of doc type, it's also very, very easy. So for example, let's say you want doctype transitional, you just type doctype transitional, and Jade will then fill in the blanks for you. And the same thing applies for doctype strict. Or doctype frameset, and so on. And as I mentioned, I'll provide a link for you, so you can see all the different types of doctype that Jade will provide for you, and that link will be below this video. All right, so now we can move on to creating the actual basic page structure. You'll probably be able to guess how most of this should be done based on what you've already learned about how to create HTML elements and add attributes to them. So, we will head over to our blank page, and as you've just learned, we will start out with a doctype. And that gives us our start. In the next line, to create a HTML element, just type html. So we now have our opening and closing html tags, but we will also want to add an attribute here. And that is to set the language for the page, which in this case is English. So we just use our brackets. We set the attribute that we want, and fill in a value for it. And that's our HTML tag done. And next, we want the head section. Now, the head section needs to be nested inside the HTML tag. So, we allow that to be tab indented. And we add our head tag. And on the same level we'll also add our body tag. So that's the absolute bare essentials already covered. Now, inside our head, we also are going to want a title. So I'm just adding the page title in the exact same way that you saw earlier, when we covered how to add text inside any HTML element. So, that's already starting to build up very quickly. So you can see how, as you're putting together your HTML with Jade, it's all going to come together very, very fast. All right, now we're gonna add in some metatags. So I have some that I've prepared earlier, so you don't have to watch me type them all out. And these just get entered inside. The head tag. So again, everything's all indented at the same level, indicating what level of nesting you want all of these lines to be in. Now we've used the attributes, setting them inside our opening and closing brackets, to add all of the different things that we want for each of these meta tags. So there you go we've got a full head section all set up with all the essential meta tags that you're gonna need for your site. This is a pretty average set up. There will, in some cases, be additional things that you want. But for the most part, this is all you're going to need. And then finally, we just want to add a style sheet. Very rare you're going to have a site without the style sheet. And so this is the same process again. We have set the link attribute. And so, we need to create a link tag to bring in our style sheet, so we just use a link element. And then, in the attributes we set the location of the start sheet, via the HREF attribute. And you'll be familiar with all of these other attributes from your HTML development previously. And so, now we're calling in the start sheet that we need. Now, when you start to actually fill out this structure, your body content will be written here. It will be tab indented, so that the system knows you will need all of this content to be nested inside the body tag. So that's your whole basis. Everything you need there for an average HTML site is all done in just a handful of lines. In the next lesson, you're gonna learn how to take code like this and use it as a base for your own templating systems. You can prevent yourself from ever having to rewrite code that you use often, and you can create your own boilerplates that will allow you to radically speed up your development processes. I'll see you in the next lesson.