Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
As we continue building the example website, in our last lesson, we filled in the left-hand side of the main homepage and in this lesson, we'll continue with the Sidebar Content. So, let's get started. Here in our editor we have our beginning.html, which has the content for the left-hand side that we filled in last time. And our beginning.css, which likewise has all of that style from the last time. And our home.txt which has the content here for the sidebar, which we'll be copying, and first let's go ahead and do our traditional Save As and saving as home.html, because this will be the homepage.
And save the css as main.css and our home.txt, we don't have to Save As because we're only going to be reading from it not writing to it. Let's go ahead and copy this content, so I'm pressing Ctrl+C because I'm using a PC here. If I were using a Mac, I would use Command+C and over here in our home.html, we're going to scroll down to the Sidebar Content and go ahead and press Ctrl+V to paste and there we have it.
So, the first thing I want to do is fill in the XHTML here, and like I said before for the home page, we're doing all of these manually in the future pages because we'll have had this experience. We're going go ahead and just cut and paste the already HTML-ified or Xhtml-ified text. So, I'm going to start with this image here and let's say img src= and there I have that and then I'm going to go to fill in the width and height. I'll go ahead here and drag this over because this Editor is kind of cool. It allows me to do it this way. Here we go.
So that's our image tag and then this gets an h3, because we use h3 for the right-hand side for the sidebar and we get paragraphs here and then paragraph here and then we have another image. I can just cut/paste. That's the other way to do this. Now, this is an h3. And add another image.
Drag that over. That's just fun to do it that way. And there we go. Another h3, another paragraph and an end paragraph. And then we have some links here. This is supposed to be a capital C there. I make that a href = and end a, equal to that part and take this part here and stick it in there and the same thing here.
And finally, this one here. Now, one other detail. These images are in the images directory, so we'll just say images here and I'll copy that and paste it here and paste it here, there we go. I think our content is ready and I'll go ahead and take all of this and indent it. In this editor here, which is Notepad++, I select a block of text and use the Tab key.
Different editors have different ways of indenting. I find it very valuable to keep my code indented. It helps me to find my way around and to know what is related to what. So we'll go ahead and save this. Now there is some formatting we're still going to need to do in css. But let's just take a peek and see what it looks like in the browser real quick. And we'll need to drag in this file, which is the home file in our home-part2. Drag this into the browser and there we have it, there is our right content. So that's great! It looks good.
It's still not entirely done. We need to format these images over. If we look at our example here we see that it's very close. The images are indented a little bit and the one's that our photographs have this nice little border on them. So we'll go ahead and do that in the css right now and that's over here in our css and we're going to add a couple of styles down here in the sidebar section right over here. All right, so the first thing we want to do is we want to indent those images a little bit and so we can do this here.
So this would be the selector for the images in the sidebar because they are under the contentRight, content margin 0 25 pixels. So, this makes the top margin and the bottom margin 0 and the left and right margins 25 pixels, and I'll just go over to the browser and take a look at that. Save here and reload and there we have it. Our images are now indented. Now, all we need to do is to put a border on these photographic images.
We go back into the XHTML and we use a class selector here. For the ones that are photographs, so this Surf1 image of photograph, this is a product image. So this is a photograph, so put in a class selector here. Now we go and put that class in the style sheet. So we're using a combination of selectors here now. This is something we haven't done before.
So, we have the ID Selector for the contentRight ID and so all of the images that are within that context that also have this class selector. So, img.photo is a class selector. Those who'll get this additional style and first they will apply this image style and then they will apply the class selector because that's where they are in the hierarchy. It's not because one is after the other in the css file. It's because hierarchically, img gets applied before the class img.photo.
We're applying a padding of 5 pixels. Remember padding goes inside of the content box and it expands the content box. And the border is a 1 pixel border, which also expands the content box by 1 pixel. It will happen on the outside of the padding because the padding is inside of the content box, like margin is outside. So, we'll go ahead and save this and we would expect this to create 5 pixel padding with a dark border around. It's not quite black here. It's a gray border.
Go ahead and reload in the browser and there we have it. So these boxes got a little bigger, you saw that and now there is this 5 pixel border around it. That's the padding because it's not margin. Margin would be on the outside of the border. It's on the inside, so that's the padding and that only happened on the ones that we gave that class selector to the photographs, so there we have it. We are done with the homepage. We have now created the main content and the sidebar content for the home page, and so we'll go ahead and move on to the next page.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 97336 Viewers
61 Video lessons · 84586 Viewers
71 Video lessons · 68788 Viewers
56 Video lessons · 101265 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.
Your file was successfully uploaded.