Build A Successful Web Site - Build a Web Site | Learn how to direct traffic to your web site.

It is a great idea to use custom headers within your HTML document. It is important to put your web page keywords in a header for better search engine optimization. Changing the way your header looks is easy with CSS (cascading style sheets). Heading one tags are considered to be the most important tags by the search engines. Heading 2 tags are less important and Heading 3 tags are usually headings withing a Heading 1 or Heading 2 tag.

Let’s say your web page is about hotels in Ontario, and you decide to make that your heading.

The HTML for that would be:

<h1> Hotels in Ontario </h1>

To change the appearance of Heading 1, Heading 2 and Heading 3 tags, create a rule for them in your css page or within your HTML document.

If you do not have an CSS file, you can add this somewhere  between the head tags in your HTML page (top section).

<style>

H1 {
font-size: 20px;
color: #2a2a2a;
margin-top:-10px;  /* this takes away some of the space that browsers will give to a h1 tag */
margin-bottom:-15px;
width: 240px; /* this is the width of the image */
height: 10px; /* this is the height of the image */
background: url( include the url of your image, for example, http://www.mysite.com/images/my_image.gif between these brackets) no-repeat;

}
</style>

If you have created a CSS file add this rule to the file by copying and pasting the following code:

H1 {
font-size: 20px;
color: #2a2a2a;  /* this is the font colour */
margin-top:-10px;  /* this takes away some of the space that browsers will give to a h1 tag */
margin-bottom:-15px;
width: 240px; /* this is the width of the image */
height: 10px; /* this is the height of the image */
background: url( include the url of your image, for example, http://www.mysite.com/images/my_image.gif between these brackets) no-repeat;

You can customize your header further by creating a cool background in Photoshop CS4, or another graphics editing program. Add a gradient to the image and make your headings stand out.  Save it as a gif file, upload it to your server, refer to it, and you are finished!

Related posts:

1. CSS Head Section