• This can be started in several ways.

  1. Steal a page.  The euphemism for this is scaffolding.  Find a page on Internet, copy it and put your text in the place of their text.  There is no copyright on HTML code so you can do this with impunity.  Be more careful with text and images, though, which do have copyright protection 99% of the time.

  2. Write your own HTML code from a blank page.  This takes a bit of courage and patience but it is possible.  Again, cutting and pasting HTML code is legit.

  3. Use a WYSIWYG editor such as Word or Expression Web.  This is by far the most user-friendly way.  If you know how to use these programs as word processors, you simply have to ask them to save your document as and HTML file (see the File menu) and you're off.  A word of warning - as was stated earlier - there are some things you can do with a word processor which will not show up in a web page so keep it simple.  No arrows to labels, floating text boxes, footnotes or WordArt, please.

• For simplicity sake, let's assume you choose the easy way out, the WYSIWYG editor Expression Web.  Open Expression Web and select New from the File menu.  Then choose "new HTML document".  If you want, feel free to use one of the models suggested.

• When you have a title and a few lines, save the file as "index.htm" and save it in the folder called "first_site".  Just about every home page in the world is called index.htm.  Do you want to know why? 

Step 3 - Insert an image

• Before you insert an image on to your web page, place it in the "images" folder of your web site.  You'll thank me for this later because if you don't put the image in there now, it can be a major headache to fix the problem later.  How do you move an image file from one folder to another?

• Some editors will automatically place a copy of the image in the same folder as the index page.  This will save you the previous step of having to move the file yourself.  The only problem is that the editor might change the name to something like "image1.jpg".  Word, for example, does this.  If "penguins.jpg" is changed to "image4.jpg", and I've got images up to "image18.jpg",  I won't necessarily remember which one had penguins in it!  Netscape Composer, on the other hand, makes a copy of the image, keeps the original file name but automatically places the copy of the image in the same folder as the html file.

Step 4 - Insert a hyperlink

• A hyperlink, or link for the "in" crowd, is a place on a web page where you click to go to a new page.  To insert a link, follow these easy steps:

  1. Create the page which will be linked to.  Suppose the page is to find out who made the first page.  Let's call it "creator.htm".  Save that page in the folder called "first_site.

  2. Go back to the home page and type the text which will be clicked.  For example: "Click here to find out who made this page".

  3. Select the text (either all of it or just the words Click here).

  4. In the Insert menu, select Hyperlink.

  5. There are two types of links to choose from - a link which goes to another part of the same page (we don't want that one here but it would be useful for subheadings on a very long page) or a link to a new page.  To have the latter, click browse (Parcourir) to look for the page, select index.htm and click OK.  If given the choice between relative path and absolute path, always choose relative unless you've got a darn good reason to choose absolute.

• A picture can also be used as a link.  Follow the five steps above but instead of typing and selecting text, insert and select an image. (Images are selected by clicking once on them)  The only drawback is that unless the picture says "Click here" on it, people do not necessarily know it is a link!

Step 5 - Insert a table

• Tables can be very helpful for use as tables but they are also good at placing images where you want them.

• Put the cursor where you want the table on the page and find Insert Table in the menus.  Select the number of columns and rows you want.

• Once the table exists, use a right-click of the mouse to select things from the pop-down menu.  You'll see that there are all kinds of goodies:

  • borders, background colors (for the whole table or for each cell),

  • alignment options (both vertical and horizontal) and much, much more!

  • You can also select two or more cells and merge them.  Ooooooo!

Step 6 - Go wild!

• Now that you know the basics, the rest is just a matter of sitting down and fooling around with it.  Look through the menus at the different things you can modify.

• Try using your WYSIWYG editor to do the following:

  • change the background colors of your pages

  • instead of a color, have an image as the background of your page

  • change the color of your text (make sure it contrasts well with the background)

  • make a table whose cells have different colors as backgrounds.  (remember: use the right-click technique on the cell you want to change and be careful because "table properties" is for the whole kit and caboodle whereas "cell properties" is just for that cell).

  • Try numbered lists or unordered lists with bullets or images (like this one).

  • Insert an e-mail link so people can contact you (note:  the hyperlink is in the form "mailto:damon@chez.com" - if the word "mailto:" is not in front of the e-mail address with no space, it won't work.)

  • visit other peoples pages and try to imitate the things you like.

• The key with format is to have some kind of continuity from page to page so that people do not feel like they have jumped from one person's site to another.

• Once again, keep it simple.

  • One animation on a page is fun, 3 or more is a bit silly and 10 or more is just plain moronic.

  • Text which streams across the screen only conveys the message from left to right, never into the visitor's brain.

  • Simple, sparse, clear graphics have much more visual impact than flashing text or spinning animations. Keep the bells and whistles to a minimum.

  • Make your site easy to navigate with links back and forth to different pages.