Web Design 1 - HTML Lesson 10 - Page Layout: Header, Content, Footer & Comments


Now you will add css style code that can be called within your page to better control the layout.

Take a look at this website - you can see a logo at the top, with a menu underneath. I also put a box to the right on my front page where upcoming events are listed.There is also a footer section - most websites have this and it is a place where you might list a company name, contact info, and any other details you think should be there. These are all defined with divisions set up in the css style section and called later in the html page.

Use one of your logos, or create a new one - be sure it is 800 wide by 150 high. This is not a rule about logo size but for our practice page it will work out well.

Using a DIV and ID

Think of a Divison (DIV) as a way to control sections of your page.

A division starts with a pound sign

We are going to set up an ID and call it container - it will be used to hold the rest of our code for the page.

This code is setting up a "box" or "frame" to hold the contents of our page. I just happen to call it container - you could use any name you like but container makes sense to me based on what the code is doing. Add this near the top of the style section - why the top? This code is setting up the main layout of the page so I would expect to find that in the beginning of a sheet rather than mixed in with other styles or at the end.

width: 800px;
margin: auto;
padding: 0px;
border: 5px dashed #FFF;
background: #EABC77;

  1. width is the amount of the screen that the container will take up
  2. margin clears an area around the outside of an element- you can use auto to have the browser try to center it, or set it yourself to a certain amount of pixels
  3. padding is the amount of space that will be added within an element
  4. border will add a line of color - you can choose a size and color - or leave it out
  5. background allows you to use an image or color as the background

After the first <body> tag add the following code:

Just before the ending body tag </body> place this tag


At this point you should save your page, and test to be sure it is working.

A container is great, but we also need to assign spaces within it on the page. To complete these tasks you will create 3 divisions - one for the header, one for the content, and one for the footer.

Sample CSS Code to add/modify in your style section:

    width: 800px;
    margin: autopx;
    padding: 0px;
    border: 2px dashed #FFFFFF;
    background: #EABC77;

#header {
    background: url(images/logo_h.jpg) no-repeat;
    height: 150px;

#content {
    padding: 20px;

#footer {
    background: #6F472C;
    text-align: center;
    padding: 10px;

#footer p {
   color: #ffffff;
   font-size: 10px;
   line-height: 20px;


A few notes about the above code:
   - the no-repeat just means the image will not keep repeating itself if there is more space available
     (like if you were to put a 600px image inside a 900px container)
   - use auto for the margin just means the browser will center it for you
   - the indentations are good coding style to help you stay organized and make it easy to read
   - the footer division is added at the bottom of a page - notice that I am setting a footer DIV and also setting a specific way for the paragraph within a DIV to look

Adding Comments
- comments are a great way to add notes to your code - not only for yourself but for anyone else who might later need to make changes. These are only seen by someone who is looking at your source code. There are two types of comments

The format for comments within the css section is:

/* comment here */

The format for a comment within html is
<!-- write a note here -->


Sample HTML Page code:
Now that you have added the styles you need to call them in your page. Here is an example of code:

This is a screenshot of the result:

Assignment for HTML LEsson 10