1.5 An HTML skeleton - Video Tutorials & Practice Problems

<v Instructor>We're off to a great start</v> here with this hello world. Let's take a look at it again. Actually, let's take a look at it locally. Looks like this. We also saw before that this is the equivalent. But this is not a complete webpage. This thing here is just a paragraph, but we saw in Learn Enough Git to Be Dangerous that this has some bad effects. So let me give you an example, suppose I said, oh, this is hello world trademark. It's option two on a mac keyboard. If I do this and refresh it. Oh, that's weird it actually worked. I did not expect that to work. That's really interesting. So this shows actually a really important property of modern browsers, which is that they're highly fault tolerant. I can zoom in like this can see there's that TM, but the usual practice in order to add all the things we need to on a webpage, things like cascading style sheets, JavaScript, a title, and then the main body, we have to include a skeleton, so check this out. I'm gonna put in the skeleton and I think that TM will break. We'll start off with HTML Like this. Now you can see that actually filled in a lot of stuff that was HTML tab inside of atom that filled in the full skeleton. And in fact, it even filled in the one thing that we're going to need. So let's take a look at this, this here the top line is what's known as the doc type and actually it's really quite hard to see. Let's get rid of the exclamation point here. You can see it says DOCTYPE HTML preceded by this exclamation point. Then there's an HTML tag and a head tag. This is the head of the document. I'm gonna get rid of this for now and I'm just gonna do command X which I really like to do rather than deleting it now it's in my buffer and we're also actually gonna get rid of the title tag. There we go. And this is the basic skeleton, HTML, head, body preceded by the doc type. In this case, HTML, this one here, let me get rid of this again. This HTML refers to HTML five. So I'm gonna put this here into the body. Now it works it's so weird. That might be browser dependent. Let me check another browser. Yeah, look at that. It's actually browser dependent. Boy what a subtle problem. We can see here. Look at this. So here safari is rendering the TM as this funky combination. Can zoom in here. Look at that. So this is clearly unacceptable behavior and the way to fix it is to include this character set called UTF-8 that we deleted before. And actually I like to put it after the page title because that's the usual place to put these things called meta tags. So here it is, I'm going, this is jump cut which is really awesome in OS 10. I'm just scrolling through them and there's the one I wanted. So we can do this here. And now if I refresh in safari, it should work. There we go. It's really important to have the character set because of this really subtle issue that in some browsers certain characters won't render correctly. So if you see here, say voila. Without the character set, actually let me show you a trick here. This is command slash to comment it out. I'll talk about this more later. That doesn't work voila with a capital a with a tilt over it that's not what we want but now save it voila. Now I'm gonna delete this paragraph line to show the minimal HTML skeleton. So this is not quite right and I'm gonna show you how to prove that this is not quite right. We're gonna use what's called an HTML validator to verify that this little snippet here is not correct. This is classic technical sophistication. How do you find an HTML validator? You go to Google and type HTML validator. Like this and then this will work. And now let's take a look at the tabs. We can put in an address, but we don't actually have this skeleton available on the live web yet so we're gonna validate by direct input right here. Paste it in oops guess I didn't copy that. There we go. Let's check that. Now you can see there is an error. It says element head is missing a required instance of child element title. So let's take a look at this. Here actually we can edit right here in here in the validator. Let's do a title tag. See if this works Check it. Aha well, now that previous error has gone away but it says element title must not be empty so let's take a look at this. Say page title, check that. And there we go. Document checking completed, no errors or warnings to show. So if we go back here, paste in and this is now a valid HTML skeleton, this is a foundation for everything else we'll do throughout the rest of this tutorial. because it's so important, let's review the elements here. The first line is the doc type identifying this document as HTML five. Then there's an HTML tag, an opening tag. A closing tag down here. Head of the document. Closing head here. Inside of the head, there's a page title and then we put in some metadata. As I mentioned before, even though atom created this before the title if we do this done here, you can see the little automatic tab trigger used by atom puts the meta tag above the title. It's conventional to have meta below the title tag. And in fact, there are other uses of meta other than the character set here. By the way, I mentioned briefly before that there was such a thing as a self-closing tag. That's what this meta is. This is a self-closing tag. We'll talk more about that later in this tutorial. So going down after the closing head tag we have opening body and closing body. And as we've just seen at the validator it's valid to have an empty body but not to have an empty head. You have to have at least this page title. One final thing I wanna show is this, lets take a look at this page locally. Should be empty, right? Remember we just got rid of the hello world. It's just the skeleton. But if you look here at the top, it says page title now. It actually indicates the page title. This is browser dependent. You can see here that safari doesn't actually show the page title, but if I open a new tab, now it does. But in any case, it's important to have the page title not only because it's required by the HTML standard, but because the page title is one of the most important elements in search engine optimization. If you want people to find your site, it's important that the page title match the subject of the page. Let's restore the hello world part of our page so that we have something to display and then we'll deploy it to production. Can see I just typed in the paragraph tag that time, rather than using the tap trigger. Can save it. Let's look at it locally. See, this is fine. Safari, Chrome looks the same and let's commit it. Remember, -am here for a change that already exists. Let's do this here. This is a reminder. Because index is already part of the repository, I can just do git commit -am. And then the message which in this case will be convert index page to fully valid HTML. Push it up. And I think it'll refresh faster this time than it did last time. Here we go and refresh. You can see there was a little change there, just a little subtle change. We can actually go back and forth over here. So this is the current page. If I get rid of everything the way it was before just a paragraph. Look up here there's a little bit of space. Changes just a little bit. Can command Z it back. Yeah, so it's a very subtle change. It's a result of adding this material at the top but you can see here this is our live website in production. Hello world, fully valid. And in fact, let's do this here. I think this is an exercise. It is, but this is fun. Just show you here rather than pasting it in we can go to validate by URI, here URI stands for Uniform Resource, I don't remember. L is locator. I is the modern one that I can't even remember. Uniform Resource Identifier. So paste it in now it just means that the address in the bar here in the address bar. Lets check it on the live web. Look at that document checking completed no errors or warnings to show. So we have a valid HTML document on the live web. Hello world.