Creating Basic Web Pages

This handout provides a brief overview on how to create a basic web page with Netscape Composer and how to post that page to the World Wide Web through the Hartwick domain.

Composer is the standard html editor that comes with the Netscape browser and allows the creation of simple web pages without any knowledge of the underlying html code. This excercise is tailored to Netscape version 6 and above, though the instructions will also work with versions 4.5 and 4.7.

A. Creating the First Page

  1. Open Netscape Composer.
    Open the Netscape browser Communicator and then select File --> New --> Composer Page. See the four tabs at the bottom left, three of these provide different editing options. Stay in the default 'Normal' mode for which no knowledge of html code is necessary.

  2. Adding and formatting content
    Generally, Composer works like any other document editor. You can use different fonts, bold and underline text, align text as desired and create tables. However, you should be aware that Composer does not have all the features of more advanced document editors like MS Word. Familiarize yourself with the various options, understand what works and what doesn't. This is crucial before you make any larger design and outline decisions for your page.
    Note: Use caution with the underline feature as this usually indicates the presence of a hyperlink. However, some sites use a specific color to indicate a hyperlink - in those cases use text color with caution.

  3. Add a link
    Highlight a word, phrase or text area that will be used as a hyperlink. Then select Insert --> Link, or click on the Link icon in the toolbar. Type the full URL of the web page you want to link to (i.e. include http://) or alternately copy and paste the URL from another browser window.
    You can use this feature to link to related pages if you are creating a multi-page site and to link to specific sections within a given web page using 'anchors' (aka bookmarks, or targets). In the latter case you will need to identify and create the 'anchor' first before adding the link from the originating location. The URL will most likely contain the URL of the originating page (or the extension thereof) followed by the # symbol and the name of the anchor.

  4. Add an e-mail address
    Creating a link for an e-mail address is similar to creating a general hyperlink. This link will force a mail form to appear that includes the address of the recipient that you specified. This feature is most commonly used as a way of communicating quickly with the person responsible for the page.
    The major difference to general hyperlinks is that in the Link Location field you will need to type "mailto:" first and then the e-mail address of the recipient (note that there are no spaces between the individual URL elements). The e-mail URL should look something like this:
    mailto:yourname@yourcollege.edu

  5. Standard web page etiquette
    Your page should include some form of identification, usually your name and / or the institution you are representing. It should also include a date of when the page was created and possibly when the page was last updated. Finally it should include a way of contacting you, usually an e-mail address is the preferred method.
    In terms of style try not to overload the page with colors, images or frames. Though style is highly subjective, focus on what the intent of the page is: if it is to inform either about yourself or a particular topic try to help the user locate the information quickly.

  6. Page properties
    These features enable the faster retrieval of the page by other users. Select Format --> Page Title and Properties. Provide a page name (required), an author (optional) and description (optional). If you want your page to be located by search engines provide relevant keywords for the description field. This is one of the main areas search engines rely on to locate your page.  

  7. Adding images
    Adding images can greatly enhance the visual appeal of your web page. However, be aware that images can cause all kinds of problems on your page, especially if you aren't able to edit them prior to posting them. The most common problem is that they are too large which in turn influences the structure and outline of the remaining page as well as the 'loading time' of the page.
    First, identify the area where you want your image to appear. Then select Insert --> Image, or click on the Image icon. Find and insert the saved image. It is always a good idea to provide 'alternate text' so that information on the image can be quickly identified. Please note that you will need to save the image in the same folder as the web page -- see below under B4.

  8. Saving and previewing your page
    You can save the page locally and then select browse. Make adjustments if necessary by going back to the editing mode. More than likely you will need to go back and forth frequently in order to fine tune your page. Be aware that to make the page(s) 'live' you will need to first complete the steps below.

B. Posting your new web page on the web

  1. Policies
    Please read Hartwick's 'Acceptable Use Policy' first. Go to the "Related Links" on the right, the link will take you to the section pertaining to web pages and servers.

  2. Map Drive
    You will need to be logged into the computer as yourself. Right click on the "My Computer" icon on the desktop and select "Map Drive".
    In the first field 'Drive' find and select a drive that is not used, usually E through Z. Make sure that the M drive is not already in use.
    In the second field 'Folder' type \\Einstein\xyz -- replacing xyz with your Hartwick username. Click OK.

  3. Locating the www folder, creating a subfolder if necassary
    Right click on the 'My Computer' icon and select open. Locate your user name on Einstein (it is under the drive you selected above). Note that there is a folder named 'www'. If you plan on creating a multi-page site and/or creating different sites later you should think about creating subfolders within the www folder. Name the folders appropriately to the content of the web page(s) since the subfolder's name will be part of the URL for the page. Be aware of small and capital letters: the URL is case sensitive.

  4. Saving the web page to the www folder, saving images seperately
    You can now save your page to the www folder on your Einstein (network) account. Make sure that the page has either the extension '.html' or '.htm' and remember which extension you used.  If your page includes images you will need need to save them seperately to the www folder.  Make sure that the URL for the image is linking to the correct location of the image file in your www folder .

  5. Understanding the URL for this page
    The basic syntax for personal web pages on the Hartwick domain is as follows:

    http://users.hartwick.edu/yourusername/page1.html

    If you created a subfolder in the www folder and then a webpage within that subfolder, the URL will change accordingly. The basic syntax for this page will then look like this:

    http://users.hartwick.edu/yourusername/nameofsubfolder/page2.html

    Note that the name of the web page and the folder is case sensitive - it must correspond exactly to how it is saved on your Einstein account.

  6. Preview the new page with a standard browser.
    After saving your work you can now open any browser and type the URL of your new page in the address field. Review the page: check to see if all the links work, the images load correctly, and the desired formatting has been maintained. View the page with different browsers, you may be suprised! Look at the source code to troubleshoot if necessary.

 

Created by the Library Web Team 
Update 4/6/04