back

Simple HTML Coding

This page provides some tips for how to create simple web pages.

Preparation

If you write your documents in MS Word, before writing any code, be sure to turn off the "Smart Quotes" function by dragging from "Tools" to "AutoCorrect" and making sure that there is no x in the Smart Quotes box. (Just click on the x to turn it off.)

Your beginning page is an index page and should be named index.html. Other text files that you'll link to your index page should be named with whatever file name you choose and .html. It's best to use lowercase for file names and add no spaces or special characters. The file name example.html would work well, for instance.

You will have to save all your html files as text. (Drag from "File" to "Save As," then drag from "Word Document" to "Text Only.")

Graphics files must be named with the file name then "gif" or "jpg." For example, a graphic of an apple might be named: apple.gif

Be sure to include a link from each of your pages to your home page and a link to my page from your home pages.

Some Simple HTML Coding

Body Basics

To create text treatments and page layout, you'll add beginning and ending code to the text you want to manipulate. Essentially, you add text signals that operate on the text they surround. All of this code must be surrounded by brackets < >. I've given you the following information without the brackets, but you should be aware that each word or file name should be set inside the brackets shown above.

Start each of your pages with: HTML BODY

End each of your pages with: /BODY /HTML

The Text

Any treatment you make to text is created by surrounding it by bracketed code that indicates how the text will appear on the Web. The first bracketed material begins the treatment, and the last bracketed material tells the computer to end the treatment. For example, if you want to bold a word, begin with B and end with /B. Any text located between these two bracketed code letters will appear as bold text on the Web.

Some Common Code

For headings:

• H1 text /H1 creates a large heading.
• H2 text /H2 creates a slightly smaller heading.
• H3 text /H3 creates an even smaller heading.
• P text /P creates paragraphs.
• B text /B bolds text.
• CENTER text /CENTER centers text or graphics.
• EM text /EM creates italics or otherwise emphasized text.

To create a bulletted list of items use the following code:

L1 creates a non-bulleted item.

Links

To create links among text files within your own file folder, use the following code:

A HREF="filename.html" See my linked file here. /A

To create a link to a graphic within your own file folder, use the following code:

IMG SRC="filename.gif"

To link to your background or texture, use the following code:

BODY BACKGROUND="backgroundfilename.gif"

To link to materials at another site, use the following code:

A HREF="http://www.othersite.org" Other Site /A

back