HTML & CSS Template and more...
by Dick Evans, updated 4-10-2011

Drag and drop the following code right into a blank notepad file. Then save that file with the name you wish to call the web page being sure to end in .htm

For example:

The starting page of any web site should be called index.htm



<title> </title>






If you are using a master.css file for your Web site, place this code before the </head> tag

<link rel="stylesheet" href="master.css" type="text/css" />


HTML code to include the same banner or footer with link bar on multiple pages

<!--#include virtual="banner.htm" -->

<!--#include virtual="footer.htm" -->


Each page should contain meta tags to describe the page content, place this code before the </head> tag

The description content should be one or two sentences describing the purpose of the page.
The keywords content should contain a list of key words found on the page separated by commas.

<meta name="description" content=" place the description here" />

<meta name="keywords" content=" list, key, words, here" />


A basic template for coding XHTML standard with meta tags and a link to the master.css file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content=" place the description here" />

<meta name="keywords" content=" list, key, words, here" />

<title>browser title goes here</title>

<link rel="stylesheet" href="master.css" type="text/css" />



Content of Web page goes here




A basic master.css with body, heading, and link colors

body {
font-family: Arial;
font-size: medium;
background-color: #C0C0C0;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;

h1 {
font-family: Arial;
font-size: xx-large;

h2 {
font-family: Arial;
font-size: large;

a:active, a:link, a:visited {
font-family: Arial;
font-size: small;
color: #000000;

a:hover {
font-family: Arial;
font-size: small;
color: #008080;


Heading Lines: (place after the <body> tag)

<h1> heading goes here </h1>

<h2> heading goes here </h2>

<h3> heading goes here </h3>

<h4> heading goes here </h4>

<h5> heading goes here </h5>

<h6> heading goes here </h6>


Geeking Text

Drag and drop the following text into the page you are building to simulate actual text while you are in a test mode. Or go to and have the text generated for you.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sit amet eros. Donec dui erat, congue sit amet, placerat sed, interdum vel, magna. Nullam lacus purus, cursus quis, facilisis ac, commodo eget, nunc. In laoreet placerat lectus. Pellentesque aliquam ligula a nulla. Nullam malesuada lobortis odio. Quisque ut felis. Nulla malesuada mollis est. Quisque at nunc eget nulla adipiscing eleifend. Maecenas vitae massa. Nam vitae enim at sapien accumsan congue. Cras sollicitudin libero ac augue. Vestibulum lacinia tortor ac purus.

Ut massa justo, pulvinar vel, ultricies eu, fermentum eget, felis. Suspendisse dolor ipsum, tincidunt vitae, varius ut, cursus ac, risus. Quisque orci sapien, gravida nec, pharetra in, vestibulum in, massa. Suspendisse potenti. In volutpat semper nisi. Mauris est diam, ornare sed, facilisis eu, condimentum vitae, leo. Vestibulum vel tellus quis nibh vestibulum iaculis. In vestibulum nisl non massa. Sed lacus. Donec lacinia aliquam ligula. Aenean porta lectus in est. Etiam eros orci, congue id, luctus venenatis, congue quis, nisi. Proin arcu tellus, tristique vel, aliquet eget, fermentum at, metus. Sed placerat, metus sit amet facilisis congue, mi arcu sodales ipsum, eu egestas elit sem ut lorem. Nam orci. Suspendisse convallis, dolor nec blandit aliquam, libero justo malesuada dui, ut sagittis tellus leo vitae erat.

The 16 basic colors:/b> 


















All of the named colors recognized by most browsers:


antiquewhite aqua
aquamarine azure beige
bisque black blue
blueviolet brown burlywood
cadetblue chartreuse chocolate
coral cornflowerblue cornsilk
crimson cyan darkblue
darkcyan darkgoldenrod darkgray
darkgreen darkkhaki darkmagenta
darkolivegreen darkorange darkorchid
darkred darksalmon darkseagreen
darkslateblue darkslategray darkturquoise
darkviolet deeppink mediumturquoise
deepskyblue dimgray dodgerblue
firebrick floralwhite forestgreen
fuchsia gainsboro ghostwhite
gold goldenrod gray
green greenyellow honeydew
hotpink indianred indigo
ivory khaki lavender
lavenderblush lawngreen lemonchiffon
lightblue lightcoral lightcyan
lightgreen lightgrey lightpink
lightsalmon lightseagreen lightskyblue
lightslategray lightsteelblue lightyellow
lime limegreen linen
magenta maroon mediumblue
midnightblue mintcream mistyrose
moccasin navajowhite navy
oldlace olive olivedrab
orange orangered orchid
palegoldenrod palegreen paleturquoise
palevioletred papayawhip peachpuff
peru pink plum
powderblue purple red
rosybrown royalblue saddlebrown
salmon sandybrown seagreen
seashell sienna silver
skyblue slateblue slategray
snow springgreen steelblue
tan teal thistle
tomato turquoise violet
wheat white whitesmoke
yellow yellowgreen lightgoldenrodyellow
mediumaquamarine mediumorchid mediumpurple
mediumseagreen mediumslateblue mediumspringgreen

Background color: (replace the <body> tag)

<body bgcolor="aqua">  Replace aqua with the color name desired



Email Link:

<a href=>send email to Dick Evans</a>

Linking to another page on the same web site:

<a href=page2.htm>Go to Page 2</a>

Linking to another web site:

<a href=>goto Evans web site</a>

Adding a Screen Tip to a text link:

<a href= title= "click here to open Evans web site>goto Evans web site</a>

Linking to a bookmark on the same page:

<a name=top />          <!-- to create the bookmark -->

<a href=#top>Top of Page</a>       <!-- link to the bookmark -->



Unordered List:

<ul type=disc>    <!-- also can use square and circle -->

<li>first item</li>

<li>next item</li>


Ordered List:

<ol type=1>      <!-- also can use A, a, I or i -->

<li>first item</li>

<li>next item</li>



Horizontal Lines:

<hr size=1 shade />

<hr size=5 noshade />


Using an image file:

From the same host site or folder:

<img src="flower.jpg" />

Link a small picture to a larger one:

<a href="big.jpg"><img src="small.jpg" /></a>

From another location:

<img src= />

Adding alternate text that shows on mouseover:

<img src=flower.jpg alt="Yellow Flowers" />

Resizing the image:

<img src=flower.jpg width=170 height=128 alt="Yellow Flowers" />

Centering it:

<p align=center>

<img src=flower.jpg width=170 height=128 alt="Yellow Flowers" />



JavaScript Code:

Top of page link:

<a href="javascript:window.scrollTo(0,0)">Top of Page</a>

Previous link:

<a href="javascript:history.back()">Previous</a>


Expression Web HTML code to include the same link bar on multiple pages

<!--webbot bot="Include" -->


Expression Web HTML code to include a FrontPage Hit Counter

<!--webbot bot="HitCounter" -->


Expression Web HTML code to include a Photo Gallery

<!--webbot bot="PhotoAlbum" -->


Expression Web HTML code to include a FrontPage Search component

<!--webbot bot="Search" -->


Expression Web HTML code to display the date and time the page was changed last

<!--webbot bot="Timestamp" -->


CSS Code to generate "graphic" link buttons. Place this in your master.css file

/* Navigation Rollover Effects Using CSS */

a {
    display: inline-block;
    padding: 4px;
    text-decoration: none;
    width: 100px;
    margin: 1px;
    color: #003366;
    font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
a:link, a:visited {
    border:2px outset #C7EAFB;
    background-color: #C7EAFB;
a:focus, a:hover {
    border:2px outset #003366;
    background-color: #003366;
a:active {
    border:2px outset #AF6A27;


Redirect Code

/* The following HTML will redirect your visitors to another web page instantly. */
/* The content="0; may be changed to the number of seconds you want the browser to wait */
/* before redirecting. Place between the <HEAD> and </HEAD> */

<meta HTTP-EQUIV="REFRESH" content="0; url=">