Add a Website Heading with HTML

Most people like a main heading or logo on their web pages. Our demo site has one , so let's add the code to create it.

We're going to use a single column division to add the website heading. It will be added between the opening body tag and the main division.
Here's the code:
<div id="heading"><img src="images/heading-pic.gif"></div>

Notice in the code for the division tag we've added the attribute : id="heading".

The id tag is used to give a name to a page element. In this case we're giving the division that contains our site heading image the name heading. We'll need this later when we start adding borders to the images on the page.

The code for the entire page is shown below. the new division for the site heading is in red:
<html>
<head><link rel="stylesheet" href="stylesheet.css" type="text/css"></head>
<body>
<div id="heading"><img src="images/heading-pic.gif"></div>
 <div id="main">
<div id="left"><img src="images/strawberry.jpg"></div>
<div id="right">
<h1>My First Web Page</h1>
<p>This is my first website and this is my first web page. When I complete this tutorial I should have enough information to start work on the website that I really want to build.</p>
<p>I am going to learn about structuring web pages with divisions, how to use CSS style sheets, using color properly and many other aspects of building a great website.</p>
<p>I'm also going to learn the basics of getting my website good positions on the search engines.</p>
</div>
</div>
</body>
</html>

*Doctype omitted for clarity

Add the new division for your site heading, save the changes and look at the page in your browser.

Needs some adjusting, but starting to look like a real web page?

Add the style settings to the stylesheet for the site heading and refresh the web page in your browser.

#heading { width: 1000px;
margin: 0 auto 0 auto;
background-color: #006600 }



Much better, but we still need to add our footer information and links.


Footer

Footer information is not only helpful to your visitors , but search engines like it. use the address tag when placing footer information on a web page.

Copy this block of code and paste it below the closing tag of the main division.
<address>
My First Website<br>
My Location<br>
My Contact Info<br>
Copyright &copy; 2008<br>
</address>

Save the changes to the web page.

code looks like this:
</div>
</div>
<address>
My First Website<br>
My Location<br>
My Contact Info<br>
Copyright &copy; 2008<br>
</address>
</body>
</html>

Copy this block of code and paste in the style sheet:
address {
font-family:helvetica, tahoma, verdana, arial,serif;
font-style:normal;
font-weight:normal;
font-size:8pt;
text-align: center }

Save the changes to your style sheet. Open the web page in your browser and take a look.

In the next lesson we'll add our links, borders and head section tags. We're almost ready to create the 3 pages of our website using this template.



Take a short quiz on the information you just learned.

Let's add our Links.