Basic HTML Template

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

</head>

<body>

</body>

</html>

Top

Basic Formatting:

<b>bold</b>

<i>italic</i>

<u>underline</u>

<center>center this line</center>  or  <h1 align=center>

Top

New Lines:

<br />  create a new line

<p> paragraph goes here </p>

Top

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>

Top

The 16 basic colors:
 

aqua

black

blue

fuchsia

green

gray

lime

maroon

navy

olive

purple

red

silver

teal

white

yellow

Background color: (replace the <body> tag)

<body bgcolor=aqua>

<body bgcolor=black>

<body bgcolor=blue>

<body bgcolor=fuchsia>

<body bgcolor=gray>

<body bgcolor=green>

<body bgcolor=lime>

<body bgcolor=maroon>

<body bgcolor=navy>

<body bgcolor=olive>

<body bgcolor=purple>

<body bgcolor=red>

<body bgcolor=silver>

<body bgcolor=teal>

<body bgcolor=white>

<body bgcolor=yellow>

Top

Links:

Email Link:

<a href=mailto:dick@rwevans.com>send email to Dick Evans</a>

Linking to another page on the same web site:

<a href=page2.htm>About</a>

Linking to another web site:

<a href=http://www.rwevans.com>goto Evans web site</a>

Linking to a bookmark on the same page:

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

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

Top

Lists:

Unordered List:

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

<li>first item</li>

<li>next item</li>

</ul>

Ordered List:

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

<li>first item</li>

<li>next item</li>

</ol>

Top

Horizontal Lines:

<hr size=1 shade>

<hr size=5 noshade>

Top

Using an image file:

From the same host site or folder:

<img src=flower.jpg>

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>

Top

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.

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

Top