HTML & CSS Template and more...
by Dick Evans

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

<html>

<head>

<title> browser title goes here </title>

</head>

<body>

Content of Web page goes here

</body>

</html>

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" />

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<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" />

</head>

<body>

Content of Web page goes here

</body>

</html>

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 http://www.lipsum.com/ 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>

aqua

black

blue

fuchsia

green

gray

lime

maroon

navy

olive

purple

red

silver

teal

white

yellow

All of the named colors recognized by most browsers:

aliceblue
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

mediumvioletred

Background color: (replace the <body> tag)

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

Links:

Email Link:
<a href=mailto:revans@ric.edu>send email to revans at RIC</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=http://www.rwevans.com>goto Evans web site</a>

Adding a Screen Tip to a text link:

<a href=http://www.rwevans.com title="click here to open Evans RIC web site>goto Evans web site</a>

Linking to a bookmark on the same page:

<a name=top /> 

<a href=#top>Top of Page</a> 

Lists:

Unordered List:
<ul type=disc> 

<li>first item</li>

<li>next item</li>

</ul>

Ordered List:

<ol type=1> 

<li>first item</li>

<li>next item</li>

</ol>

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=http://www.ric.edu/devans/flower.jpg />

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" />

</p>

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>

HTML code to include the same link bar on multiple pages

HTML code to include a FrontPage Hit Counter

HTML code to include a Photo Gallery

HTML code to include a FrontPage Search component

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

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;
    color:#C7EAFB;
    background-color: #003366;
}
a:active {
    background:#003366;
    border:2px outset #AF6A27;
}