The Open Door Web Site

Backstage Pass to Internet
course developed by: Alan Damon

The six steps to creating a web page:

Step 1 - Facilitate File Management

  • Create a folder with an appropriate name in which you will place all the files which concern your site - "My First Web Site".  To create a folder on your diskette, for example, open the diskette by double-clicking on its icon (which is found on the desktop or you could try clicking on the illustration). In the window showing its contents, right-click on the mouse and select "New Folder" (Nouveau Dossier) from the pop-down menu.
  • Inside that folder, create two folders, one called "first_site" and the other called "Other Files".  The first folder will contain all the files which will be published on Internet.  It will be a copy of exactly what people will find on line.  The folder called "Other Files" will contain rough drafts, lists of things to modify, e-mail addresses or anything else which is related to the site but which is not published.
  • Inside the folder called "first_site" create one last folder called "images" which will contain all the photos, graphs, animations and icons on your pages.  The reason for this is that a on a site such as www.eabjm.com, with three dozen or more pages, each with the EABJM logo on it, putting one copy of the logo in the "images" folder is all that is necessary to have it show up on each page.  Every page has a line of text with an img src tag  pointing to that one file.

Step 2 - Create the Home Page

  • 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 Star Office.  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 available in Star Office.  Open Star Office 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 on your diskette.  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.   Although Star Office does not change either the filename or the emplacement when you put the image in the first time, if you edit that image within Star Office's web page editor, it creates a new image with a filename such as "sv8rcn2mf.jpg".  The only drawback to this besides having incomprehensible filenames is that because Star Office saves a new image each time one is edited, the old copies tend to build up.  So be careful how you edit images.  It is better to retouch images separately in image editors rather than when they are inside web pages.

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.
Homepage

Technology Homepage

Electronics

Backstage Pass to the Internet Homepage

>Backstage Pass to the Internet

Listings, Recognitions and Awards

EABJM Teachers' Resource Centre

EABJM Public Web Site

This Site was last
updated on 16/09/07
© The Open Door Team
Any questions or problems regarding this site should be addressed to
the webmaster

© Alan Damon 2004