The purpose of this Survival Guide is to outline the major steps involved in creating a Web Page. Creating a Web Page can be fairly complex. The aim here is to keep things simple. Even though there are five major components. This survival guide covers the following topics:

1. Preparing your TREX2 Account
2. Gathering Files and URL References
3. Creating Your Page
4. Placing Your Page on TREX2
5. Viewing your Page on TREX2

HTML Resources

Web Pages are based on Hypertext Markup Language (HTML).  There are a great number of resources available on the Web covering HTML code, page design, HTML editors, and more. Below are just a few resources to take you beyond the scope of this survival guide.

MSU's Web Developer's Page

General overview of what the Web is and HTML documents.

HTML Sampler

Very good basic introduction to HTML codes.

Maricopa HTML Tutorials

Excellent and Extensive set of tutorial lessons. Begins at the very beginning and builds to a high level of sophistication. Each of the 31 tutorial lessons would take at least 30 minutes to complete.

Prepare your TREX2 Account for a Web-Page

Student Web Pages are "served" from the TREX2 computer. If you don't have a TREX2 account you must first acquire an MSU Student account. There are a number of advantages to having an MSU Student account (automatic membership in Business class listserves for example).  If you prefer to receive e-mail elsewhere, you can have all messages to your MSU account automatically forwarded.  USA's in any student lab can assist you in obtaining an account.  (Setting up MSU Student Account Instructions)

When you have an account on TREX2, the following steps will create the necessary directory and file permissions to allow your page to be displayed on the World Wide Web.

1. Logon to your TREX2 Account using Tera Term Pro terminal program located in the Network folder.
2. At the $ prompt, enter create_homepage.
3. At the $ prompt, type lo to logout and then close the Tera Term Pro program.

Return to Index!

Gathering Files and URL References

If your Web Page will contain links to other pages, images, e-mail addresses you will need to assemble these items before creating your page. You may wish to consult an image collection to find background, bullet, and line images.  For simplicity, store all image files in a folder on your Z: drive or on a diskette. If you plan to include links to other pages, have the URL's (http://www.nfl.com or http://www.nba.com for example) available. Either write them on a sheet of paper, or have the page open in your browser so that you can copy its URL.

Return to Index!

Create a Web-Page

There are a large number of tools available to assist you in creating Web Pages.  Many current software packages include as "Save As HTML" option which produces files suitable for web pages.  Netscape's Composer, Allaire's HomeSite, and Microsoft's FrontPage are all Web Page composition tools available in the MSU Student labs.  This brief introduction will focus on using Microsoft's FrontPage.

Before starting, one should be aware of the institutional constraints of creating and publishing Web Pages on MSU's hardware. 

• All use of MSU's Computing Facilities is governed by Acceptable Use Policy. 
• Web Content Guidelines strongly suggest that pages contain a link back to MSU's home page and the name and e-mail address of the person responsible for the web page.  A standard approach to a return link to MSU's Home Page is to copy MSU's standard page footer. One approach would be to open the page, template.html, and then save template.html. (You will need to import template.html into FrontPage - covered below!) 
• Student account disk space on TREX2 is limited so that you will not be able to have lots of images or even a few large images. 
• TREX2 uses the VMS Operating System.  VMS does not support the image names used in Microsoft's Themes.  Do not use Themes!.  If you have a critical need to use longer filenames and/or Themes, contact MSU's Web Coordinator. 

Using FrontPage

1.  Create New Web

Start FrontPage.  When the application has started, take a minute to look around at the various icons and menus.  (Placing the mouse pointer over an icon will typically display a note identifying the icon.)

From the File menu, select New, and then select Web.  On campus, you are strongly encouraged to use your Z: drive to save your web.  Then you can access your work from any public lab computer and your work will not risk being deleted by others.  Be sure to specify your Z: drive in the text box on the right side as create a one page web as illustrated below.  Click OK to create this web.



When FrontPage creates a web, it creates appropriate folders including a default starting page, index.htm, and an image folder. 

2.  Import Images

In order for FrontPage to properly build your web page, it must be aware of all the components (like images) you intend to use on that  web page.  Importing is the mechanism used to make FrontPage aware of your components.  FrontPage will display image formats that are not generally supported on the Internet.  Make sure all your images are  .jpg  or .gif files!

In the Folder List panel, click on the images folder.  Then from the File menu select Import.  When the Import window appears, click the Add File button.  Use the Add File to Import List window that appears to identify all the images  that you plan to use.  After identifying the files, click Open in the Add File to Import List window and then click OK in the Import window.

You can always return to File - Import at a later time if you discover a new image you want to use on your web page.  If you've saved template.html or  word processing documents as HTML and want to use them in your web, you will also have to Import those documents!

3.  Page Properties

At this point, the right hand FrontPage panel should be white and the label at the top indicating that the page is "new_page1.htm".  In your Folder List, you should see the file "index.htm".  Click on index.htm in your Folder List and change its name to index.html.

The file name, index.html, is very important.  Web Server software looks for this filename as the entry point into your web pages.  Your web pages will be served from TREX2, a computer using the non-Microsoft VMS operating system.  Microsoft's 3 letter htm extension will not be recognized as equivalent to the Internet standard 4 letter html extension!

Once you've changed the filename to index.html, double click on index.html to open it in the editor panel.  You will still see a blank white page.  Click the HTML tab at the bottom to quickly look at the basic HTML code that tells a web browser how to display a blank white page.  Return to the Normal view by clicking the Normal tab at the bottom of the page.

Right Click anywhere on your blank page.  From the pop-up menu, select Page Properties ...  Click on the Background tab in the Page Properties window.  Here you can add a background image or set the page colors.   This web page uses the image "bg10.gif" for the grayish-blue background texture.  Rather than using a background image, you can simply set the background colors.  But you can't do both background colors and background image. In the Page Properties window on the Background tab you can also set colors for your text, links, and visited links.  Changes in the background can be made at any time.

After selecting a background (making no change in the default white is OK), type in a title for your web page.  Then highlight your title and select the H1 (Header 1) style from the style box.  Style is located on the lefthand side under the new page and open icons. While your title is still highlighted, click on the center icon to center your title on the page.



4.  Insert Horizontal Line

A horizontal line is frequently used to separate sections.  You can insert a horizontal line under your title by going to the Insert menu and selecting Horizontal Line.  When the line appears on your page, Right Click the line and select Horizontal Line Properties in the pop-up window.  Notice that you can change the length, height, and color of your line.

5.  Insert Table

Tables are useful in web pages.  In addition to their common use of displaying information, tables can also be used to format a web page.  On the standard toolbar, click the table icon.   Highlight a two by two table in in the pop-up window to insert a window.

Experiment with adjusting the edges of your table by placing your cursor over the line you want to move until the cursor changes to a double headed arrow.  Then click and drag.  Type some text into the table cells.  In at least one cell, enter a long sentence or a short paragraph to see how the cell size adjusts to accommodate the text you enter.

As you enter text anywhere in FrontPage, the text will wrap at the end of a line.  Paragraphs are created by pressing the Enter key and paragraphs are separated by blank line.  If you want a new line - but don't want a blank line, hold the Shift key down and press Enter.

Right click within your table and the select Table Properties from the pop-up menu.  You can cause your table to be left, center, or right justified on the page by making a selection in the Alignment box.  Change your table's border to 10 and observe the effect.  Change your table's border to 0 and observe the effect!  (Click the Preview tab to view the results as they would be seen in a browser.  Those dotted lines on the edit page were only so that you could tell where the table was!)

With your cursor in a cell, right click and select Cell Properties.  In the Cell Properties window, notice that you can adjust the justification of individual cells, set background colors for individual cells, and even set individual border colors.  (Note:  If your border is still of size zero, border color will have no effect!)

6.  Hyperlinks

In one cell of your table, type in the text that you would like for the link to some site, e.g. Visit Bridger Bowl's Web Page.  Then highlight that text and press the hyperlink button on the toolbar.  In the Create Hyperlink window that opens, enter the URL of the site you want to link to, e.g.  http://www.bridgerbowl.com/.   (Note: the http:// portion of the address is essential! )  At the top of  the Create Hyperlink window, there should have been a list of files in your web.  If you had another page you wanted to link to, you would just click on that page's name.  

7.  Insert Image

Under your table, insert an additional Horizontal Line!  

With your cursor located below this new horizontal line, click the Insert Picture from File icon on the toolbar, .  In the Picture window which opens, select the image to insert.  Recall that you Imported your images to the images folder so you would need to look in that folder.  Then click OK and the image will be inserted into your page. 


8.  Address Information

Under the footer image, Type your name.  We're going to create a e-mail link from your name.  Highlight your name and click the hyperlink icon.  Rather than entering a URL as before, click the envelope icon to the right of the URL box.  Enter your e-mail address in the pop-up window and conclude by clicking OK.   (Note:  You will not be able to test mail yourself a message from MSU's public labs.  The e-mail feature in Web browsers has not been implemented for security reasons.)

In addition to being able to contact the individual responsible for the page, it is also recommended that you include the date the page was last modified.  Add whatever additional information you want to document your web page.  Then highlight all of this documentation and select Address from the Style box.

9.  Brief Look at HTML

HTML is the computer language that instructs the web browser how to display material on your screen.  Click the HTML tag at the bottom of the page.  In addition to the text that you've entered, you will notice a number of tags.  Typically tags appear in opening pairs, e.g. <table> </table>.  If you know the HTML language, it is possible to directly edit the HTML and have the results appear in the WISIWIG (Normal) editor window.  If you'd like to learn more about HTML, consult the resources listed at the beginning of this document.

10.  Advice

Very few of us are either trained in graphic design or intuitively gifted in graphic design.  It is extremely easy to create ugly, offensive web page designs.  Animated gifs, flashing text, red text on a black background are a few of the things that can alienate persons viewing your page.  Advice:  Keep It Simple!

MSU's Acceptable Use Policy allows a great deal of discretion about what your web pages look like and what they contain.  Your page(s) will be visible to the entire world - including your mother, grandparents, and potential employers.  What kind of image do you wish to present to these people?  Advice:  Keep it Professional.

Netscape, Internet Explorer, and AOL browsers are not identical!  The Preview tab in FrontPage shows you how the page would look in Internet Explorer.  Its a good idea to also look at your page in Netscape and any other browser you have access to.  To view your page in Netscape, open Netscape, and from the File menu select Open Page.  Then select your web page to view.   Advice:  Look at your page in both Netscape and Internet Explorer.

Your web page consists of a number of components; html files, images, etc.  For them to display correctly, all the components must be kept together.  So after you've published your page(s) to TREX2, you should check that everything still works and periodically check to make sure that everything still works!  A common problem is insufficient disk space on TREX2 for all your images

Return to Index!

Placing your Web Page on TREX2

After having developed you web pages using Front Page or some other Web page authoring technique, those pages will need to be published to become available on the Internet.

A program called WS-FTP95 LE can transfer your web pages from your Z:\ drive to your Web directory on TREX2. WS-FTP95 LE can be found in the Network folder on the computers in the student labs.

After double clicking WS-FTP, you will see the Logon window. Fill in the various boxes until your window looks approximately like the following:

For User ID and Password, you will need to supply your TREX2 Username and Password, the same username and password you used with the Tera Term Pro program to create your "Under Construction" web page.

When you've entered the appropriate information, click the OK button to connect to your TREX2 account.

When you are successfully connected to your TREX2 account, you will see a window similar to the following window on the back of this handout.

The left hand side shows files on your local PC. Assuming that your web pages are on your Z: drive, you will need to scroll down the left until [-z-] is available. Then double click on [-z-] so that that drive is selected. You may need to double click on your Web folder name to open it. When you've located your web pages, you should see folders and file names similar to what appears above on the left hand side.

The right-hand side shows files in your account on TREX2. There should be a WWW folder in your TREX2 account. You will need to double click on the WWW folder to open that folder. You should see a file named INDEX.HTML on the right hand side when you've successfully arrived at the right place.

Transferring Files:
    Click the images folder on the left to select it.

1. Check that the Binary radio button is selected (your images are in a binary file format).
2. Click the --> arrow to move the folder and its contents to TREX2.
3. Problems?
   1. If the status window (lower left) contains an error message the most likely cause is insufficient disk space. Either free up space (delete those old e-mail messages) or reduce the number and/or size of the images you're using.
   2. Names truncated? You'll have to re-edit your web pages using the truncated image names.
4. Click index.html to select it.
5. Click the ASCII radio button (your web page is just text!).
6. Click the --> arrow to transfer index.html to TREX2. (It will now appear in capital letters)
7. Repeat the procedure for moving index.html for all other .htm or html files you've created (e.g. resume.html).

Exit WS-FTP by first clicking the Close button (buttom left) to close the connection between your PC and your TREX2 files. Then click the Exit button to close WS-FTP95.

Return to Index!

Viewing your Page

1. Start Netscape
2. In the Location window, make the URL http://www.student.montana.edu/~username/ where username is your username!

As you develop your web page use good web page design and make sure to abide by the MSU Web Page Guidelines. Enjoy!