Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we have our template built, we can start putting content in the website. So, here in the home-pt1 folder in the Exercise Files, you will see there is the template.html and that's the template that we built in the last lesson and you will also see a text folder here that has home.txt. That's the text that goes in the page and then we have the CSS folder, of course, which has our beginning place for the CSS and this is all loaded-up in my text editor and so here is the template.html.
Here is our beginning.css and here is the text file with all the text that will go in the home page. So, let's get started. First thing we do, of course, is to do the Save As. In this case, we are going to save it as home.html. So, we'll be building the left-hand side in this lesson and the right-hand side in the next lesson. We are still going to call this home.html, save that and then the beginning and the CSS will be saved as main.css and the text file we are not going to be writing over, so we can leave that alone at this point.
All right, so now, let's go down here to the place where the main content goes and I'll just select these two lines and I'm going to copy everything from this point, all the way down to here. This is the end of the content for the first half of the page, the left-hand side and then down here, where it says sidebar, that's the content for the sidebar. We'll be dealing with that in our next lesson. And so I'm going to go ahead and press Ctrl+C to copy on the PC, we'd use Command+C on a Mac, come over here to home, where I have selected this and I'm going to press Ctrl+V to paste.
And so, there we are done. Ha! Not really.
Now, we need to put in our heading levels.
I'm going to wrap the HTML around this, so this will be a
and close the
at the end and then here we are going to have the beginning of our
paragraph and here goes the end of the paragraph and then the beginning of a
paragraph here and I'm going to be sneaky and do copy and paste and have an end
a paragraph and a begin a paragraph in my copy buffer, so I press Ctrl+C to copy
and then I paste here and I have the ended that paragraph.
Of course, this doesn't begin a paragraph here, so I'll just take that and
I'll move it down here, a little one more, and then I can paste an end a paragraph here
and now we have another heading.
Now, this heading level here is going to be
and the there and
for this, because we are using
and then we have more paragraphs.
on the right-hand side, so this will be an
Add an ending paragraph here and this is another
, , add a
paragraph here and an ending paragraph here.
I didn't get to use my paste buffer for that very much, did I?
And this is a link
and the link will have this text in it here.
So, I'll cut and paste and then just take out this extraneous text at the end.
Scrolling down, I have another
and another paragraph and there is a couple
of links in this one, the one here.
I'll do the same Cut and Paste and you get rid of this at end and do the same thing here. I missed the equal sign. That's the beauty of the syntax highlighting text editor. And there we have it. So that's our content and now I like to indent stuff. I'm just like that. It makes everything pretty. But we are not quite done, are we? Go ahead and indent anyway at this point and every editor has a different way to do this.
Once you have it highlighted,
in this particular editor, which is Notepad++, I'll hit the Tab key.
I know that in BBEdit it's something like Command+Right bracket or something like that.
I actually use BBEdit a lot and my fingers remember how to do it, but I don't
always remember what it is I'm doing.
It's just that my fingers remember it and so anyway.
This is going to be an unordered list and so that ends at the bottom.
So, I'm cutting and pasting and put that there and then each of these has a
Copy, paste, paste, paste, paste, paste. And copy, and paste, paste, paste, paste, paste. There we go. So, that is our content, rather than going through all that. I wanted to go through it this time just to show you what my workflow looks like as I do this sort of thing. In the subsequent lessons, for the rest of them, I have them all HTML-ified in the text file.
So, that will make it easier for you to cut and paste them.
So, now that we have this content in here, let's just go ahead and take a look
at it in our browser.
We are going to do a little bit more CSS on it, but it's not going to look too bad,
as it is right now.
There are a few styles that we haven't yet installed.
I'm going to take the home file and drag it into the browser and there we have it.
That's not bad.
That's pretty close.
There are a few things we are going to do.
We need to enter these
and we are going to do a little bit of formatting also on this unordered list.
levels and these links don't quite look right,
So, let's go into our CSS file and we'll scroll down here to the bottom and
actually it's not at the bottom. We are going into the main content part.
All right there and we are going to enter the
So, I'm just going to copy this one because it's just a little change from there.
You see, I actually do this a lot in real life, create two copies of that.
One of them will be
and one of them will be
and then we can just change them.
So h2, font-size is 1.2em and the color is 3C3809 and it does not have this font-weight:bold in it and the margin is the same, 0.4em. Now the h4, it's 1.1em in size and it is bold and the color is this gray and the margin, this is the bottom margin now, it is actually -0.2em.
So let's go ahead and take a look at all of that and see what that looks like in the browser. Oh, it's lovely. And that's what it looks like over here as well. Excellent! Now, these links aren't right, you see the links? Look at what the links do in the finished version. They have this orange color and they change to gray and they get this dashed underline, which is actually not an underline at all. It's a dashed bottom border. So, I'm going to go ahead and actually in our CSS, we are going to make this the default anchor style and it goes in the outer table up here.
And we say outerTable a:link and outerTable a:visited. That's for the visited and the unvisited links and I'll get text-decoration:none, so that takes out the underline and I'll get this color. And then we do outerTable a:hover and that's the style for the mouseover.
When your mouse is hovering over the link, this is the style that you get there and it will have this color of 566440 and border-bottom: 1px dashed #566440. So, when we save this, we'll see that our links look like we except them to see. There we are, see that? And that's how we want those to look and so that will also happen in the sidebar because we put it in the outerTable level.
Finally, what we need to do now is this is unordered list. And that will go down here in the main content, right here. #mainContent ul. And that will be Georgia and font- size 0.9em, just like in the paragraphs.
margin-bottom. So it would be the spacing after the whole list, 1.4em, and then finally the li, which is the line items themselves, those will have a margin-bottom of 0.6em. So, that's the spacing between those items. We will go ahead and save that and look out it the browser and there now, our list looks like we expect our list to look.
So, that's the left content there, that page. That's pretty easy once we have the template all done. You can see that the rest of these pages are going to go fast. In our next lesson, we'll do the sidebar content and we'll be all done with this main page.
Get unlimited access to all courses for just $25/month.Become a member