Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:8Length:48 minutes
  • Overview
  • Transcript

2.6 Make a Basic Web Page

In this final lesson you’ll bring together everything you’ve learned so far to make your own basic hand-coded web page from scratch.

Related Links

2.6 Make a Basic Web Page

Hi and welcome back to start here learn HTML basics. In this lesson, you're going to create your own HTML document from scratch, so let's jump in. Now with sublime text open, I want you to go up to file and then create a new file, and then, go up to file and save that file. Somewhere that you can find it easily as indexed H.T.M.L.. Now go into the folder that you have saved your edged email filing to. Now inside the source files that go along with this course. You're going to find a filename style dot C.S.S. and image named H.T.M.L. dot P&G And we're going to be using both of these in our card. So to make them available for the page that you're creating, just paste them into your folder. Now you can open up your HTML file in whatever your preferred browser is and then as you are making your changes to your card, you can refresh the page and you can see your progress All right so here we have our empty index.html document on the left and we're viewing it in current browser on the right. So let's begin with the first stage and that is adding in our essential HTML tags. And the first thing that we're gonna need is a doc type. So just like we did when we were introducing tags in a previous lesson, we're gonna start with a less than sign for doc type We're going to add an exclamation mark. Then, in all capital letters, we're going to add DOCTYPE. Then we're going to make a space, and put HTML. And then close off the tag. Now what this does is tell the browser that. That the version of html on that we're working with is html five. Now as the name suggests there have been four versions of html before this. So the doc type is a pretty simple tag now but in the past used to have to put in all different kinds of attributes depending on how you were cutting up your html But lucky for you, you're starting with HTML 5 and all you need to do deduct type is put this card at the start of every one of your documents. Now we need to add in our HTML element in this is going to wrap all the rest of our code. So add our opening HTML tag and then we'll close it off And then we'll just make some space for the card that's going to come in between these. Now we need to add an attribute here to specify the language of the page that we're creating. For our purposes this is going to be English. So we're going to put lang equals en. Now we just need to add in the last two of these essential elements, and that is the head section and the body section. So inside our HTML element, we'll add our head, and then underneath that we'll add our body, and then just make some space inside both of those. Now save what you have And that is all of your essential HTML. These are the things that you must include in every web page. So now we can move on to the metadata. Now all the metadata goes into the head section. So first let's add a meta element. And we're gonna add one that's gonna specify the character set that this web page should be using. So we're gonna add meta and then we're gonna put charset. That's probably not how you're supposed to say it, but I always think of this as charset. It probably should be charset or something, but anyway. Set that to equal UTF-8. And there are different types of character sets that you can use with websites but you will probably never have to use them in your career but you will need to include this UTF eight setting in all of your pages. Right, next up, let's add a title element. Now let's give our web page a title or just set it to be learn H.T.M.L.basics Now if you save and then you watch up here in the tab of your browser you should see your title will appear so there it is up there. There is our page title. Now the last tag that we're going to add to our head section is a link tag And we're gonna use this link tag to connect the style.css file that you pasted into your folder earlier on. Now we're gonna get into working with CSS in the courses that come after this one. So don't worry too much about what's in that CSS file right now. Basically all it's gonna do is instead of having the content of the page that you're working on stretch out All the way across the viewport. It's just going to crunch it in to be a little bit more narrow so it's a little bit easier for you to work with, and it's just going to center it on the page. So we'll add link. Now here, if you're working with sublime text, you can just press tab and it's going to autocomplete this tag for you And now you can add in the name of the stylesheet that you're linking in which is style.css. And you'll note here that sublime text is putting a couple of extra attributes for us. It's put in rel=stylesheet which says that the relationship between this page and this external CSS file is that it is a stylesheet to be applied to this document. And that the type of the file is text or CSS, right? Now you can say that again. And that is your metadata now complete. So let's move on to adding in our structure HTML. And the first thing that we're going to do is add in a div. Now, if you remember from the last lesson. A div is just a generic type of structuring element. And you typically use it to control layout or presentation. And we're going to use this div to apply some of the style from our style sheet to give that centered narrow layout that I mentioned just a moment ago. So first, we'll add our div element. And this should all go inside the body tag from now. So your head section is finished. Now everything else is gonna go in the body tag. So add our div, make some space inside. And now to apply some of the styling from our style sheet, we're gonna add a class attribute. Now the class attribute will allow you to specify a class name and then the browser will go and try to find that matching class name inside your CSS. And it will apply whatever styling it finds under that class. And once again, we are gonna go into CSS in more detail in subsequent courses. So don't worry too much if you don't fully understand that just yet. For now, just add in the attribute class and set it to ="wrapper". All right, now inside our div, we're gonna lay out all of our structure before we fill the structure out with content afterwards. So if we're going to need a header for our page. So we'll add that in just like that. Now, underneath the header, we're need a main section. There's our main section. And we're going to need a footer. Now inside our main element, we're going to split up the content that's going to be in here. We're going to have two sections for the most important content and then we're going to have an aside for some secondary, less important, but still relevant content. So I'll add in two sections And then below that we'll add an aside. All right so now all of the structure is laid out. You've got everything set up here and ready for content to be added in. Now also along with the source files that you have access to as part of this cos you should find this text file and this file gives you all of the content that we're going to be putting into our HTML, so just to save you typing you can just copy and paste straight from here. All right so first let's put in an h1 level heading into a head a section so we'll add in h1. Now let's grab up here the text for our heading and we'll paste that in now let's see how that looks. So there we have our h1 heading. Now let's start to add in our main content In this first section we want to create a subheading. So let's set up an H2 level heading and from here you can copy over this text here and now we're gonna create an ordered list. So a numbered list that outlines the process we're going through right now. So first we'll add an OL element, and that sets up our ordered list. Now we need to add list items. So make a space and inside we add an LI element. LI for list item. So now we'll copy this. And paste it in there. Now when we save, we've got our second level heading. And we starting to see our numbered list come up. So let's add in a few more list items and we'll add in the text for those. Now while we're at it, let's fill out the second section too. Now we're gonna create another h2 element to create a subheading and we'll add this text here into it. No this time we don't want a list this time we want paragraphs of text. So this is where we add in our P. element and we're going to be adding in this text here. So we have three paragraphs. So add in another two P. elements and I'm copying a text Just tidy that up. All right, so now we've got the rest of a numbered list has shown up. And now the subheading and now here are our three paragraphs. So now let's fill out our side and here we're going to add some related links. First up we're going to need another heading Let's make this in H3 heading and then we'll add in our heading text Now this are the two links that we gonna wanna put in. We gonna link through to the Mozilla Development Network Element Reference that I mentioned earlier and this is the URL for and we're also gonna link through to an [INAUDIBLE] extension for crime called the HTML five outliner, and that's the URL for that. And we're going to put these links inside an unordered list this time. So rather than having numbers, we're just going to have a bullet list. So add in a UL element, and just like before we need list items. So we're going to put in to two LI elements. And now we're ready to add in our links. And you recall from a previous lesson that to create a link we need to use the A element, and A stands for anchor. So A and then in sublime text you can hit tab to complete this tag and now you can paste in the first of these URLs. Then we'll grab the text that we want to apply this link to. And we'll paste it in between the opening and closing a tags. Now let's do the same thing for our second link, we'll add our a element so I press a and then tab. Now we need to fill in the href attribute with the URL that we want this link to connect to And then we'll add in our link text in between the opening and closing a tags. Right now let's see what we've got. Okay, so now we have an h3 element down here and you'll notice that the h1 heading is the largest. The h2 headings are a little smaller. And then the h3 heading is a little smaller again. And then down here in our aside, we've got our bullet list. You notice how we have bullets here and numbers here. And then we've got our links off to our element reference and this Chrome extension. And now finally, let's just add something into our footer. So first we'll set up a paragraph to hold the text that we're gonna add to our footer. So we'll add in a p element and then inside it we're going to add a copyright notice. At first we're gonna add in a copyright symbol and to do that enter an ampersand, then the word copy and then a semi-colon. Now we'll make a space and we're just put in the year. So let's save that and see what our footer looks like. All right, so there's a little copyright symbol and the year. So now there's only one element left that we went through in our list of common elements that we haven't used, and that is an image element. And I just left that to last because you already covered working with image elements a little bit in a previous lesson. But, To make sure that we have all of this complete, let's add an image element to illustrate how HTML essentials area. So just under here, we were talking about using a dedicated code and that we're gonna include a screenshot of the code that you're working on here in Sublime Text. So add our image element And then we're gonna insert html.png as the filename for the image that we want to insert. And there we go there is our image embedded into our site. So now just take a moment and sit back and look at what you've created and you've just created a complete H.T.M.L. page from scratch. So if it seemed like coding was a little bit of an ominous prospect to take up. I hope that helps you realize that this is all well and truly within your grasp. So that wraps up the final lesson. I hope you'll join me in the last video for the course We're just going to quickly recap everything that you've learned. And then I'm also going to let you know what's coming up in the course after this, in our Start Here course series. So I'll see you in the last video.

Back to the top