How to Create Web Page Headings
The very simple HTML code shown below can be used to create some interesting web page headings. The real beauty of it is that you don't need to change the code for different looks. You can change the complete appearance by making changes to the style sheet attached to you web page.
The code:
<div id="ex1">
<h1>Site Heading Text</h1>
<p>This would be slogan text.</p>
</div>
You may want a very plain heading on the pages of your site or you may want something more appealing.
We'll demonstrate several examples and supply the HTML code and CSS for each.
First Determine Your Web Page Width
We recommend a web page width of 900 to 1000 pixels.
See: Resolution Example for an explanation.
Our examples will use a 700 pixel width setting, so that they fit on our page.
Note: These examples would be centered on a normal web page. They appear to be off center because our page is set up in tables.
Site Heading Examples
Maybe you want something very simple. You may want a plain white or colored box to place site heading text and a slogan.
Site Heading Text
This would be slogan text.
The actual HTML code and CSS for creating this heading is shown here:
| HTML Code | CSS |
|---|---|
<div id="ex1">
|
#ex1 {
width: 700px;
height: 100px;
margin-left: auto;
margin: right: auto;
background-color: #99ccff
}
#ex1 h1 {
font-family: arial, verdana, serif;
font-size: 16pt;
float: left;
color: #000000;
background-color:transparent;
padding: 25px 0 0 20px
}
#ex1 p {
font-family: arial, verdana, serif;
font-size: 12pt;
float: right;
color: #ffffff;
background-color:transparent;
padding: 30px 20px 0 0
}
|
In the following series of examples we'll completely change the appearance of the heading without changing the HTML code.
