Prepare a Sample HTML Document

Getting started

You'll first want to create a folder or directory in which to store your HTML document, along with any images or other stuff you decide to include with the document. It's recommended 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.

Once you've got your editor open, a new, blank document should be staring at you. 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 else you're unlikely 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 click "Save." Make sure that all HTML files and graphics files 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 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: </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 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, as long as we get the syntax right.

Now that we've covered the basic structure of an HTML document, it's time to add some content. 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 and hobbies. 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.