A Brief Introduction to Creating Web Pages using Mozilla

Modified for M441 Mathematics as a Human Pursuit

Goals:

1.  Create and publish a web page for  your Historical Persepctives Electronic Journal.
2.  In the process, learn the basic terminology and concepts involved in accomplishing this task.

Basic Concepts

A web page is an HTML (Hypertext Markup Language) file that

By convention all HTML files should end in either the suffix .html or  the suffix .htm.

Every Web document on the Internet has a unique address called its URL (Uniform Resource Locater). (Example: Saint Joe's URL is http://www.saintjoe.edu)

Mozilla  consists of a browser  (its Navigator component) that allows client computers to "browse" documents on servers  (or local documents on the client), and a Web page editor (its Composer component) that allows one to create and edit Web documents.

Internet Explorer is another browser by Microsoft.  In Microsoft Office, including Microsoft Word, support is built-in for creating and editing Web pages.

Step 0:  Create a folder on the N: drive called m441.   Choose Explorer  (Right click on Start and then choose explore).  Select your N: drive.  Then choose File - New - Folder.  Type in m441 in the box over the name New Folder.

Step 1. Start Mozilla

a)  For a sample home page to look at, enter the URL http://www.saintjoe.edu/~karend
b)  Switch from the Navigator Window to a Composer Window by choosing Window -  Composer from the pulldown menu.  Note how the tool bars change.  Move the mouse cursor over different icons on the tool bars and note what options there are.  Many are similar to a typical word processor such as Microsoft Word.
c)  Next start a new blank page by clicking on the New icon on the Composition Tool bar.  (You can also do this by choosing from the menu File - New - Composer Page.)
d) Type in the title of your page --

e)  Then type in a brief paragraph about yourself.
f)    Drag the mouse across the title.  Choose Formal - Paragraph -  Heading 2 (or other that you prefer).  

Step 2. Save your page so far.

a)  Choose the Save File Icon.  In the dialog box, select your subdirectory where you will be saving all of the work related to this course and the corresponding web page,  and type the name for the file (m441journal.html).  ( Note: To re-open an existing document of yours for editing, start Mozilla, and choose Window-Composer,  File - Open File,   and Choose file  to find the name of the document you want to edit. )

Step 3. Get on-line help for using the Mozilla Composer.

a)  From the menu bar choose Help - Help Contents. On the left side of the window that opens click on Creating Web Pages.
b)  Switch back to the window for your web page  by pulling the mouse down to the bottom of the screen and clicking on the icon representing that page -- or choosing Communicator - Window- and clicking on the page.  (This way you can move back and forth between editing and the online help)

Step 4. Add some links to your page.

a) First type some text to serve as a title for the link -- it can be the actual address of the link, or a descriptive title.
b) Then drag across your title and choose the Link icon (chain link). Then in the dialog box Link to field type in the url of the link:

Step 5.  Give a title to your document, author name to your document.
a)  Choose Format - Page Titles and Properties
b)  Enter the title.
c)  Enter the author (yourself).
d)  Save your page again by clicking on the Save Icon.

Step 6.  Preview (browse in Navigator) your page.

a)  Click on the Browse icon to see what it will look like when it is published and browsed by anyone using Netscape Navigator.
b)  Click on the link and view the link that you created. (If you get an error message you didn't type it in correctly).

Step 7.  Return to the Composer to edit your page.

a)  Select the edit page by pulling the mouse down to the bottom of the screen and click on Mozilla button and choose your composer file.
b)  Fix any errors you noted when browsing the page.

Step 8 Add an email address link.
Repeat steps  4 a) -- c) except type in the address of the link as

           mailto:your internet email address
(for me it would be   mailto:karend@saintjoe.edu)

Step 9. Add a graphic image to your file:

a)  First find the graphic image file that you want to insert into your page and save it  in the same directory as your web page (N:\m441) To save an image from a page you are browsing:  click on the image with the right mouse button and then choose Save Image As to open the dialog box). (Remember any copyright rules!)   If you are browsing this page, try it with one of these "rules" below.   Rules can be  used to separate sections of your page.

b) Place the insertion point where you want the image to appear in your document.
c) Choose Insert - Image or click the Image button on the Composition tool bar. The Image Properties dialog  box appears, allowing you to specify the source location of the image, its alignment relative to text, and the amount of space you want around it.  (You can change this at any time by
clicking on the image with your right mouse button and choosing Image Properties.)  Click on Location Tab and Choose and then select the graphics file that you want to put in your page.
d)  To center the graphic horizontally, click on it with your mouse cursor, and then choose Format - Align - Center.

Step 10. Choose a color scheme if you want.   Be conservative  --
a)  Choose Format - Page Colors and  Colors and Background   --  Click on the Background button and choose the color you want (choose a light color that is easy on the eyes).
b)  Adjust other text colors if you wish as well. 
c)  Choose OK.

Step 11.  Spell check your document
a)  Click on the Spelling icon and correct any errors found.

Step 12. Save (Save Button) and Preview your page again to make sure it is what you want.
a)  Choose the Preview icon or choose File - Browse Document to browse your updated page in the browse window.

Step 13.  Remarks about publishing your pages
Once you have finished creating your Web page, or perhaps an entire Web presentation,  and tested it on your own system, you can publish it to our Web server, so that others can see what you've done.  

Before publishing be sure to save your file!!!!

  • Ftp --i.e. transfer from your local computer to the server -- your web page and any other files (including graphics files) that it uses to our server in your HTML subdirectory. You can do this directly from Mozilla Communicator by choosing:

    •
    File -- Publish.  Go to settings tab and as the site name:  www.saintjoe.edu and enter as the address:
    ftp://ftp.saintjoe.edu/PUBLIC/HTML .  Leave the HTTP address of your homepage box blank.  Enter your login name and password and click on save password (you will only have to adjust the settings this one time.) 
             
              

    Then choose the publish tab and enter fill in dialog box as below:

    Very important notes:    Once you have published your page, your Composer window now has switched to this remote file for editing  (See the ftp: ... address on the header).  But this is not what you want !! -- you can never save or publish changed made to this remove file.  You must switch back to the local file.  One way to do this is to choose the Save Icon and then the File-Save As dialog box will appear -- choose the local file name (which should appear by default) -- Save button -- and answer yes you want to replace it.  Note that the header indicates you are now editing your local file  (file:/...etc.)  The alternative is to close this window, and then reopen your local file in

    After publishing you should always browse this remote web site and make sure that it has been published correctly and all links are working.  The web page address of the file you have just published should be
                                            www.saintjoe.edu/~yourloginid/m441journal.html.

    Step 14:  Updating web pages.   You should always edit only the web page that you created locally -- not the one that you published to our Web server; save it, then re-publish the web page.  You must do this each time you want to update your page.