How to make a html website <<- Step 4 ->>

Getting started
Designing a simple HTML document

Getting started

You'll first want to create a folder or directory to store your HTML document in, along with any images or other stuff you decide to include with the document. We recommend you create this folder on your desktop for now. You can always tuck it away somewhere else later. Next you'll want to open up a text editor or word processor. If you're a PC user, you'll be using WordPad or Notepad, both found in the Accessories directory of Windows 95 or 98. If you're on a Macintosh, use SimpleText, in the Mac's Accessories directory.

Once you've got your editor open, a new document should be staring at you blankly. We'll save this file now, just so we know where it is. Under File, choose Save As. Name the file with your last name, or something you're less likely to forget, up to eight letters long. Put ".htm" at the end of the file, to show that this is an HTML document. Do not put any spaces in the name -- only letters or numbers. Then go ahead and click Save. Make sure that all HTML files and graphics files that you use for this page are saved in the folder you've made.

Designing a simple HTML document

As we go along, we're going to be making up our own character, Shari Saunders, and designing a home page that fits her needs and (twisted) desires. At the same time, we'd like you to follow our lead, but instead of incorporating the details of Shari's life into your page, it might be nice for you to come up with some material of your own. If you're creatively impaired, however, feel free to plunder Shari's hard-won experiences.

Let's do a quick review of the basics

Start with the <HTML> tag to let the browser know what kind of file your document is.
On the next line, enter the <HEAD> tag to create a header for your code.
Include a title in the header: for example, <TITLE>Shari Saunders' Awesome (Yet Modest) Home Page!</TITLE>.
Close your header (it's not polite to leave it open in public): </HEAD>.
Following the header, within the <BODY> tag, you'll be able to change the colors of the background and text of your documents. We'll leave these on the defaults for now and come back to this later.
After you've introduced the body of your document with the <BODY> tag, fill in your text, images, and other content (inoffensive or otherwise), and close it out with </BODY>
Close the document with the </HTML> tag.

Here's what the code of this simple HTML document should look like:

<HTML>

<HEAD>

<TITLE>Shari Saunders' Awesome (Yet Modest) Home Page!</TITLE>

</HEAD>

<BODY>Text, images, and other content.</BODY>

</HTML>

Note that only the text and images would appear in the main window of a browser. Also, you'll notice how we've carefully formatted the lines of code by placing each instruction on a new line and by indenting the lines. This is only for human readers; the browser couldn't care less if we ran all the instructions in a row on a single line, without spaces, so long as we get the syntax right.

Now that we've covered the basic structure of an HTML document, it might be nice to add some content, don't you think? We'll start from the top. Write a heading for your entire page, to serve as a title.

The tag <H1>Shari Saunders: My Home Page</H1> will create a heading of Size 1, which will appear in a browser as:

Shari Saunders: My Home Page

You'll now be creating a short message to introduce yourself to visitors to the page. Just begin a new paragraph with the <P> tag, and type a few words of welcome:

<P>This is a professional page of great distinction. Thanks for visiting.

Now let's create a subheading for the first subsection of your page. The tag <H2>Professional Activities</H2> will create a Heading of Size 2:

Professional Activities

Next you'll create a list or two of your professional activities, educational institutions, interests, hobbies, etc. Let's see what we've got so far (note that we've added some additional formatting, including some lists, using only tags discussed here.

<HTML>

<HEAD>

<TITLE>Shari Saunders' Awesome (Yet Modest) Home Page!</TITLE>

</HEAD>

<BODY>

<P><CENTER><H1>Shari Saunders: My Home Page</H1></CENTER>

<P>This is a professional page of great distinction. Thanks for visiting.

<HR>

<P><H2>Professional Activities</H2>

<P><OL>

<LI>Worked for CIA as undercover liaison:

<UL>

<LI>Spread disinformation re: U.S. activities

<LI> Performed online surveillance of public figures

</UL>

<LI>Worked at ice cream stand at Franklin County Fair

</OL>

</BODY>

</HTML>

See the parts that say ? As it explains above, those are just our little notes to you, the reader of the code. They won't actually appear on the web page, just in the code itself. But you knew that.