Master HTML 5 #2: HTML Create Basic Page
Waylee George builds a basic HTML5 page from scratch, covering the five mandatory components: DOCTYPE, html, head, title, and body tags. He demonstrates saving files with .html extensions, adding formatting with header tags, bold, paragraphs, and line breaks, then explains self-closing tags and points to w3schools.com for the full tag reference.
Chapters
Every web page on the old interweb uses a language to communicate with the various browsers in order for us to see the formatted text or the images or the colors in the background or the videos. This language is called HTML. HTML5 is the most recent version of HTML, but when speaking about HTML, you rarely hear the term HTML5. Like, for example, you would hear, it's baseball season, But not It's Baseball Season 2014. It's kind of implied that it's the most recent version. Baseball Season and HTML. The HTML language has certain rules for communicating called syntax. This syntax is the code that contains the brackets and words that the browsers interpret into the goodies that we see when we click onto a website. In this video, we're going to create a basic web page using this syntax to demonstrate the use of tags and how they help us make a basic web page. Now there are a few must-haves in order for a browser to decipher the HTML code or syntax and present it to us the way that we are used to seeing a web page. You know, like the text and the images and all the formatting stuff in place. Now actually there are what I call the Fab 5 must-haves. Okay, I'm not really sure just how fabulous these are, but I couldn't think of anything else that made it easy to remember. First we have the declaration. This is what tells the browsers, hey, this is a version of HTML and not just some text document. Then we have the tags: the HTML, the head, the title, and the body. In most cases, tags will come in pairs— an opening tag and a closing tag. But like most languages, there's always some exception to that rule. More on that here in just a bit. So let's go ahead and roll up our sleeves and make us a web page. Now we're going to need a couple of items to create our web page. A simple text editor to create the page, and I'm going to be using Notepad, and a browser to read it or show it to us. First we need to organize. Make a work folder that will house all of our files, images, videos, and anything else we're going to be using in our webpage or webpages. Don't worry about getting everything in there right now, but at least make the folder right now so as we find or make stuff we'll have a place to put it. Okay, so let me go ahead and open up my folder here. I've already taken the liberty of creating a working folder on my desktop, and inside of that working folder I've got another folder titled Images and another one titled Backup. These are basically just for demo purposes, but I just kind of give you an idea, get your creative juices flowing. So at this point, I'm going to go ahead and open up my Notepad. New and Text Document, and I'm just going to go ahead and give it a title right now. Now actually, that's not a title, this is just a file name. I'll cover that here in just a sec. The thing is though is that this ends with .txt. Web browsers aren't going to recognize that as a web page. Let's go ahead and open this up. Now let's go ahead and make this a web page, technically speaking. You see right here it's .txt. We need to save this as an HTML or HTM file. So go Go to File, go to Save As, and with Notepad you want to first come on down here to Save As Type and make that All Files, and then change that .txt to .htm or .html. I'm going to go with the L part. They're both exactly the same. The browsers read them the same way. Just, I think HTML has been around a little bit longer than HTM, so I'm going with that. Personal preference. Okay, there we are. Now then, if we go back to our folder here, you can see that we've got both files are blank, but we've got the HTML and the .txt. Frankly, we don't need that anymore, but yeah, we'll keep it here anyway. So let's go ahead and right-click and open this guy. Actually, I've still got them open here, I believe. Yep, right there we are. See, there's the .html file right there. So now let's go ahead and add our Fab 5. Now let me go ahead and come on back to my browser here just for a second. And a very cool reference is w3schools.com. It's a great site, has lots of details referring to HTML elements. And in this case we're talking about the declaration. This is what tells the browsers that, hey, this is an HTML5 page, or this is an HTML4 page, or You know, if you don't have it there, then it's going to read it as something other than an HTML page. So I want this to be an HTML5 page, which again is the most recent version of HTML. So if you check out the source code on a lot of the web pages right now, they're going to have this information right here versus this one here. You're just— they still show up okay in your browsers, right? It's just that they do not have the advanced capabilities that the HTML5 pages do. For example, if we come on back here, this is an actual web page. If we right-click and go to View Page Source, and you can see right here where we've got the declaration defining this page as an HTML5 page, just like what we show here. Now while I'm here, let me go ahead and also mention that we've got the other elements of the Fab 5. That is the HTML tag. And by the way, for every opening tag, we've got a closing tag. The opening HTML tag is here at the very bottom of the page. We've got the closing HTML tag, and that they're exactly the same except the closing HTML tag has a forward slash at the very beginning here. Just like with the body tag, which is right here, that's the opening body tag. The closing body tag is, as you may have already noticed, right here. Again, exactly the same except for this one here has the forward slash at the beginning. Now I say exactly the same, the opening body tag in this instance has some additional formatting elements, but that's going beyond the basics that I'm covering in this particular video. Now the head tag, we've got the opening head tag, closing head tag, again with the forward slash there, and we've got the title tag opening and closing. And for those keeping count, Fab 5. 1, 2, 3, 4, and body makes 5. So that's our example of the code of our basic web page. So let's go ahead and I want to copy this, if I haven't already done so, into my clipboard. Come on back here, paste that at the beginning of our basic web page. And as we saw earlier in the source code of the Google page here Now we need the opening and closing HTML tags. And in this example, by the way, it's not the same as the name of the file. This has to be HTML. HTM, I don't think it's going to work so well in here. So you got to go with the HTML for those of you keeping track here. And then the closing HTML tag. And I want to bring that down a bit. And in between the opening and closing HTML tag we want to add our opening and closing head tag, and in between here we want the title tag. Now all this head stuff here basically tells the browser a lot of the details about how to present this page. It's the stuff below the closing head tag, right in here in the body portion of the web page. That is what we're seeing here. That's the goodies. That's the formatting. That's the videos. That's the images. All this stuff above the closing head tag, this is all the coding that tells the browser how to treat things. Still, it's important. Now we need the body tag opening, and we'll bring this down a little bit here, and closing body tag. Now this is our skeleton of our site. Now in here is where we put the content. Now let's go ahead and save this. File, Save. And let's open this up in our browser and come on back to my folder here and just bring this out a little bit. Let me just drag this guy into the browser, and there it is. Now this is technically a web page because it's got all the elements of our Fab 5. Let me get this guy away from here and open this up. It's got the declaration and it's got the basic tags required for a web page. What it does not have is the formatting. As you can see here, I do not have any formatting to tell the browser, hey, this is actually on a second line. Because the browser sees this all on one line. So let's go ahead and throw in some formatting here. This is a header tag which tells the browser, hey, on a scale of 1 to 6 or more, I am either really important— that's the H1— or I'm not so important— that's the H6. And it shows this to us in the size of the text sandwiched between these tags. So H1 is going to be huge compared to the H6, for example, which would be much smaller. And let's try another format. Let's try bolding. And let's tell the browser, hey, this is actually the end of this line. Everything after this goes on a different line. And this can be done a couple of ways. You can put this in a paragraph. That's the opening and closing P or a break. For example, let me do the opening and closing P. This would be the closing P, and at the very beginning here, opening P. So let's go ahead and save this. Come on back to our browser here and refresh, and there we are. You can see here where The browser is now seeing that this line here is on a line all its own and that the word this sandwiched between the H1 tags is much more important than the rest of them. That's why it's so, so big. And if we were to make this H6, yeah, not so important. You see it's not as important as the rest of this. That's why it's so much smaller. So let me put that back to H1 so you can see what this is. There are just a whole bunch of different tags that can be used here for all kinds of stuff. With the new version HTML5, there's even more tags that can be used with video or articles. Just all kinds of cool stuff that just wasn't available in the prior versions. So let me go ahead and save this. Refresh. There's that. And to close things out here, I want to demonstrate an example of a tag that does not fall into the opening and closing tag category. This is one that is just a normal tag all on its own. It does not have an opening or a closing. It's just by itself, and it's the break tag. BR space forward slash. And this tells the browser that everything after this break tag goes on a different line. Save, refresh, and there. Now you see where a paragraph adds this extra space here just like a normal paragraph would, the break tag just puts it on a different line. So that's our basic web page. Now for some additional tags just to kind of get you playing around. Back on our w3schools.com website, if you head on over to w3schools.com/tags/default.asp will give you alphabetically a list of all the current tags. And you'll see there that there are some that are not supported in HTML5, and there are some that just don't work anymore in HTML5 because they were what's called deprecated— that's kind of just tossed in the trash— in HTML 4.01. You've got those that say new. So by all means start playing around with these. Start with your basic web page and go from there. And that's going to bring us to the end of this video on creating a basic HTML page. Thanks for watching and you have a great day.
