Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Continuing with the development of our website, in this lesson we are going to start building the content portion of the webpage. We are going to start with this middle image. I call it the ID image, because it changes with each of the pages, so it sort of helps to ID the page, and then we are going to start building the styles for the page itself. We are going to start with the left- hand side, the main content in this lesson, and in the following lesson we'll do the right-hand side, the sidebar content, and then we'll have a template that we can use to begin building the pages for the rest of the website.
So let's get started. So I have loaded up in my text editor here. I have the beginning.html and I have the beginning.css from the 05- layout-left folder in the Exercise Files, and so we'll start by saving as, because that's what we always do. That gives us a working space where we're not writing over the exercise files themselves. This one we'll call template.html, because that's what we are going to end up at the end of these lessons here, with the template for working with the rest of the website and we'll Save As the main.css for CSS file and so now we have our working space setup.
So I'm going to go ahead and insert another table row and so this is starting to get more confusing here, all these table row beginning and ends next to each other like that and so what I'm going to do is I'm going to put in a comment, so we'll know that this is the end of this here. So I'm going to just say mainMenu. I like to do this. It helps to keep track of where you are in the page, so I can see easily that that's the end of that, even though they line up and my editor is very nice.
It gives me a little line here to help line things up, but it's nice to have that. And then we are going to have a table inside of this table cell and that will end here, and again, this is going to be a big enough table. It's going to be a lot of stuff in between here, so I'm just going to go ahead and put in the comment now. And then I'll always know where I am, and so this table will have one row and it will have two columns and so there will be a column for the contentLeft.
And it will end here. And again, I'll just put in a comment, as there will be stuff in between there, and it will have another row for the content right. I'll just go ahead and copy this, Ctrl+C or Command+C if you're on a Mac and instead of contentLeft that will be contentRight. I'll change the comment for that one and there we have it.
We now have space for our right and left content tables and I'm going to save and we'll go ahead and put in a div for our mainContent and we'll do the sidebar in the next lesson. And then we'll just go ahead and put in a little bit of content here, just so we can look at it on the screen. All right, so we'll save this. I'll just look it over, make sure it all looks reasonable. There is our begin div, and end div, or begin td and end td, and our table.
We can see here in table row, table row ends, table ends, this all looks like it should work, and if we go ahead and load this up in the browser, drag the template.html into the browser and there we have it. We have a space with our main content. This is the default font, remember that, and so it's not lined up exactly how we would like it to be lined up, but we are going to take care of that in our CSS right now. So just go ahead and do the CSS part of this.
Scroll down to the bottom. Enter comment here. We'll start with viewing table cell, contentLeft, and we want to give that the white background color, and a width of 505 pixels. Now I have already measured all of this out with the content that was given to me by the client.
The mainContent, this is our div for the main content, and it has padding 0 and 15 pixels. I'll explain that in a moment. Margin of zero. Now it's important at this point to understand the difference between margin and padding. So what I'm going to do, I'm going to save this and I'm going to go ahead and I'm going to put a border on this, so that you can see what it is And this is just temporary, this is just for illustration purposes, so you can see what the margin and the padding is all about.
Let's look at this in the browser. I reload here. You see this box. This is the border that we just put in for the div, and you see it goes all the way up to the edge of the image above it into the edge on the left and edge on the bottom, and of course, the edge on the right, but this is the width of 505 pixels there. Now if I put a margin on that, let's say we put a margin of 10 pixels. So this will put 10 pixels all the way around, top, right, bottom, and left, and so we'll save that and you will see what a margin looks like, because we have this border here.
You can see that the margin goes on the outside and it actually increases the size of the div. It pushes everything out. So it adds those 10 pixels all the way around and the div itself is inside of the margin, so the margin goes outside of the content box. Padding on the other hand goes on the inside of the content box and so if we make that margin zero, and let's just make this padding something large so that we can see it, say 50 pixels, and so that I'll put 50 pixels on the top, on the right, on the bottom, and on the left.
I'm just making it really big, so you can see what it does. It actually increases the size of the content box and it adds that padding on the inside of the content box, so that's the difference between padding and margin. Padding and margin are: margins on the outside, padding is on the inside, and they both actually increase the size of the box, so that the content on the inside is still the dimensions that you asked for. So we can go ahead and make this what we wanted it to be, which is zero and 15 pixels, and so that's zero on the top and the bottom and 15 pixels on the left and the right.
Save that and we'll take off this border, because that was just for illustration purposes and we'll go ahead and enter the next part of it. So the reason I did it the way that I did it and that will become clear in a moment. Save that. So this is the p tags, so all the p tags within the mainContent context will have this formatting and this is laid on top of, remember that this cascades, this is laid on top of our defaults up here, which have these margins. And so, the margin for the left is getting overridden to be zero and what that does is it puts it up against this 15 pixel padding on the div, and I make the margin left for all of our different elements.
The reason I do that is because the relative margin sizes for the different sizes of text, like the heading size and the paragraph size, they tend to be a little bit different. So I make them all zero and I just use the padding in the div instead to create that margin. It's just a little trick. This is the way I like to do it. It makes my life easier. And so I set a padding to be a certain size on the right and left in the mainContent and I set that margin-left to be zero in the paragraphs and also in the headings, and that way everything lines up nicely, just the way that I want it.
So I'm going to go ahead and enter some default styles for the headings. Let me use the copy and paste, because I don't like to type all of these. I'll go ahead and change this one to a 2, this one to a 3, and there we have that. Now I made the font-family for the paragraph for the body text, this nice serif Georgia font, and I say serif as a fallback, and this is the Trebuchet MS for the sans-serif for the headings.
Again, a lot of these style choices were made for me by the client. And then the mainContent h1. So what I'm able to do is I'm able to set defaults for all of them like that and then I can make adjustments from that starting point in a separate style just from mainContent h1 and this is again is taking advantage of the cascading property in the CSS cascading style sheets. Again, I'm setting all the margins to zero except that bottom margin and that bottom margin is just going to give us a little space between the heading and the body paragraph, but that left margin is set to zero just like it is here for the paragraphs and so that will take advantage of this 15 pixel padding on the left-hand side and the div.
So there we have it. This is our style for the main content on the left-hand column and we'll go ahead and reload here and we see that that's exactly how we want it to look. The only piece missing now is that middle ID element. Let's go ahead and add that in the HTML. And so that gets another row right in here. and this is our page ID image and it gets this image source=images/home_ banner.jpg, and there will be a different banner for each of the pages.
So there will be a gear banner for the gear page, etcetera, and the width is our standard 770 pixels, height is 90 pixels, alt says Welcome to Surfing Paradise. We'll save that and go and load up the page. So we see I missed the equal sign here between width and my syntax highlighting editor makes it in red, which makes it nice and obvious there.
So just put in that equal sign and I'll save there, go ahead and load it up in the browser, and there we have it. So there is our ID image in the middle, here is our main content. You notice that the ID image also gives us a little bit of a nice little extra white space here. It has this sort of organic look to it. That is the part of the ID image right there. If I right-click on this and say View Image, you can see that that white part is part of the image there. So there we have it. This is our main content on the left- hand side and we have space over here for the sidebar content on the right.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 96493 Viewers
56 Video lessons · 110244 Viewers
71 Video lessons · 79036 Viewers
131 Video lessons · 37907 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.