Developing Web Pages for Teaching, Part II - Creating Web Pages


About This Article

This article is part of a series of web pages on Developing Web Pages for Teaching. They were originally developed by Scott Van Bramer for a faculty development workshop at Widener University. They have been modified reorganized and expanded for the CCCE Newsletter.


The first article in this series, Developing Web Pages for Teaching, Part I - Introduction, discussed the basics of what a web page can do and what might be useful. This second article talks about the details of how you actually create a web page and put it out there for the world to see. There are lots of different ways to do this, and there are lots more details than I can present here. This is simply a starting point to get you moving. It is based upon my experience teaching other faculty how to write web pages. Many of the details will be different for your computer system, but there should be enough information here that you can at least talk to the technical experts at your school to get up and running. Good luck.

Software

  1. Choices. The first thing to do is decide how you want to create the web pages. There are a large number of programs available to help with this. They each have advantages and disadvantages. Selecting the right one depends upon what you want to do and how you like to work.
    1. HTML Editors. These are the most basic programs. They allow you to see the HTML (HyperText Markup Language) code and edit it directly. This approach provides the most control and flexibility, but is also more difficult to learn. Most of these programs include many HTML features and easy to use toolbars.
    2. WYSIWYG Editors. WYSIWYG (What You See Is What You Get) editors display the web page as it will appear in a web browser. The author does not see the HTML code, just the final results. Using this is very similar to using a windows word processor. All the HTML code is created in the background. These are easier to use than HTML editors, but allow less control. They generally produce good HTML, but it may include extra codes that cause problems for some viewers.
    3. HTML Converters. Converters allow you to write the document in one format (i.e. Word) and then convert the file into a web page. This is the easiest route if you already have written something on the computer or if you are not interested in learning to use another software package. The converters do not, however, always produce the results you want. They work well for simple documents, but they do not handle complex formatting very well. If you have simple text, this is a great option. Before committing to using one of these programs check to see if it handles the formatting you typically use. Check for bold; italic; special characters like &, ®, à, and ã; subscript and superscript. Many converters also have difficulty with outlines, tables, and mathematical equations. This is the easiest to use choice, but it can also cause the most problems in trying to get web pages to look the way you want.

  2. Recommendations. There are many different programs available for producing web pages. The programs listed here are simply the ones I use. It is worthwhile to find one that you like.
    1. Netscape Composer - Since this WYSIWYG HTML editor is free and well integrated into the Netscape browser, I consider it to be the obvious choice for beginners. This is probably the most transparent way to create web pages. You are presented with a WYSIWYG front end where you create the web pages. You do not see the underlying code, but view the document as it would appear in the browser. Editing is done by selecting text and clicking on buttons. It is just like using a word processor. When you are ready, the click of a button loads everything onto the web server. The program provides a nice balance between ease of use and flexibility. This editor is part of the Netscape program. I recommend using Netscape Communicator 4.79. Latter versions cause stability problems on many computers. If you have an old computer version 3.04 is the oldest version available with the editor.
    2. WebEdit - This is a full featured HTML editor and it is the program that I have used for years. In this type of program you can see the HTML code. The program provides buttons and menu bars to apply the HTML tags to your basic content. This is comparable to working with a "pre-WYSIWYG" word processor. The learning curve is a steeper, but it provides more flexibility and control in the design of web pages. It shows very clearly "how" the web page works and allows the use of more advanced features.
    3. Microsoft Office - The most recent versions of Word, Excel and Powerpoint can create HTML documents from your spreadsheets, documents and presentations. This is certainly the easiest way to create web pages. Because you are converting a document into HTML there can be problems with the translation. Office works well for simple documents, but complex formatting indents, margins, tables, outlines, etc.) can cause problems.
    4. Additional - Other software I am aware of includes:
      1. HTML Writer - This is a very basic HTML editor. But it works and it is free.
      2. Microsoft Frontpage. This is Microsoft's web authoring program. It is full of features, which like most Microsoft products people either love or don't.
      3. Macromedia Dreamweaver. This is Macromedia's big web authoring program. It is used by many professionals, but is not easy to learn. See Brian Pankuch's article Dreamweaver and Fireworks 4 in the spring 2001 Newsletter.
      4. Macromedia Homesite. This is an HTML editor from Macromedia.
      5. There are many others, but they change so quickly that your best bet is to search the web.

  3. Link Checking. I use a program to check that all the links in my website are functioning. This helps to simplify the task of keeping all the links up to date. The program I use is called Linkbot from Watchfire. This product has been replaced with Web QA.


Writing Web Pages

Since there are many different ways to create web pages, it is not practical to give instructions for all of them. The instructions below are just to get you started if you decide to use Netscape to create web pages. If you are using an HTML editor, open up the progam and get started. If you are converting files from another program like Word, just use the "save as" or "export" feature. The instructions below are specifically for Netscape Communicator version 4.04; details may differ slightly for other versions.

  1. Install Netscape. Depending upon the version of Netscape the version that includes "Composer" the program for writing web pages is either Gold (version 3.02) or Communicator (version 4.0 or later). If you don't have Netscape on your computer I recommend version 4.7 as the best balance of features and stability at this time.
  2. Open Communicator and then open "Composer", the program for writing web pages [Communicator, Composer].
  3. If you like to read the instructions, click on [Help, Contents], select "Creating Web Pages" from the menu on the left. You may print this document by clicking on the printer icon at the bottom of the screen.
  4. If you like learning by doing, start writing and clicking on buttons. Highlight text to make changes. Hold the cursor over the buttons to find out what each tool does. Click on Help when you are stuck. And don't get frustrated, HTML is not the same as a word processor and you have less control over formatting.
  5. For a very brief overview of using Composer:
    1. Type the text you want
    2. To change formatting, select the text and choose attributes from the toolbar. Use Headings 1 to 6 to specify levels, avoid specifying font type or size. Bold, Italic, and Underline are available. Additional formatting styles are listed in the menu at the top.
    3. To create a link, select text, click on the link icon, and type in the URL (Universal Resource Locator, i.e. http://www.widener.edu) for the link. If you are making a link to a web page at another web site, it is easiest to copy and paste the URL from the location line in the browser. This type of link, which includes the entire address is called an absolute link. If you are making a local link to a file located on your computer, use the browse option after clicking on the link icon. This creates a relative links that only includes the file name. It is important to distinguish between absolute and relative addresses, this is one of the most common points of confusion. For more information about the syntax of a link, see the first article in this series: Developing Web Pages for Teaching, Part I - Introduction
    4. A link can be ANY type of computer file. A spreadsheet, a word document, an adobe acrobat document, a powerpoint presentation, a graphic image, a molecular structure, a spectrum, or anything else you can think of. Netscape Composer expects all these files to be in the same directory. They don't have to be, but it is easiest (for now) if they are in the same directory.
    5. To insert an image, select the image icon in the toolbar and enter the address for the image file. The image must be a gif or jpeg file to display in the browser. For more information, look at the help menu.
    6. To create a table; click on the table icon in the toolbar. For more information look at the help menu.

  6. For more information about features that can be used in web pages see How to make HTML documents.

  7. Test the web page


Loading Web Pages on Server

After you have created your web pages, you must place them on a web server. This is another step that often causes confusion. When you save a file, it goes on your hard drive or diskette. But since your computer is not a Web server (at least it probably is not), nobody else can see your web pages. For a web page to be accessed through the Internet it must be placed on a server. Most Colleges and Universities have web servers and they will make space available for faculty. For some of the details you will have to check with your local computer group. Below are some of the basics to help you get started and help you know what to ask. After you have an account on a web server, you place your files on the server and then you are on the Web.

At most universities the web server is a UNIX computer run by the central computing service. This may be the same computer that you use for e-mail, or a specific server for web pages. Your local computer group will setup an account for you to use. The exact details for the server and the address will vary from campus to campus, but the general idea will be something like this.

The server will have an address that looks like "science.widener.edu". On that server, you will have a directory that you can log into with your login id and password. That will look like "svanbram". In that directory will be a directory for web pages. It will look like "public_html". The server is then configured so that the web address "science.widener.edu/~svanbram" will go to the "public_html" directory in the "svanbram" directory. The tilde (~) tells the server to make this change. It is critical that the "public_html" directory has the file access permissions set so that you, the owner, can write files to the directory and that anyone can read files in the directory. Unless you know how to use UNIX, your computer group will need to help you with this.

After you have your account. All that you have to do is place your files into the "public_html" directory. The default filename for the "home" page in the directory is "index.html". So that the URL "http://science.widener.edu/~svanbram/" will return the file named "index.html" located in the "public_html" directory, in the "svanbram" directory. If there is no "index.html" file in the directory, the server will return the directory listing. For any other file, the file name must be specified in the URL.

Transfering Files. Copying a file from your computer onto a UNIX server requires using a special program. The protocol for copying files is called FTP (File Transfer Protocol). This is a protocol for transfering files using the Internet. There are several different software programs for doing this. I use a program called WS_FTP that works like the old windows file manager program. If you are using Netscape Composer to write your web pages, there is a built in FTP program that you can use.

WS_FTP is available from Ipswitch. It connects to the web server and opens two file diretories. You then select files and click to transfer them between computers. This works very well if you have a complex web site with an elaborate directory structure. If you create HTML documents using an editor or translator, you will need a program like this.

You can transfer files directly from Netscape Composer to a server using the publish feature. The expectation here is that all your web pages are in a single directory. This can be a problem for complex web sites, but is not an issue for beginners. After everything is configured you write the web page. Click on "save" to save the file on your local computer and then click on "publish" to place a copy of the file on your web server. The details for setting this up are given below, the first time you try it you may want to ask someone for help to get all the settings correct the first time. After that you will just have to click on a button to place your pages on the web server.

Using Netscape Composer.

  1. In Netscape, click on "Edit", then select "Preferences".
  2. In the dialog box, select "Composer".
  3. The box shown below is displayed.

    The following options are available.

    1. Author Name. Enter your name here. This information is included in the heading information for any web page. This is not displayed in the browser, but can be used for other features.
    2. Automatically Save. This will automatically save the document you are working with on your hard drive. So if your computer crashes you will not loose everything. TURN THIS FEATURE ON.
    3. External Editors, HTML Source. This lets you edit the raw HTML code. I suggest using notepad for this. On most computers enter "c:\windows\notepad.exe". If that does not work, use the browse button to find the program. If you regularly edit long HTML documents, I would suggest using the program "wordpad".
    4. External Editors, Images. This automatically links from composer to a program for editing image files. LView is a nice freeware package.
    5. Font Size Mode. I recommend against using absolute point sizes for web pages. Use relative sizes so that users can specify the base font size, and the web page author just indicates if something should be larger or smaller.
    6. Help. Read this for more information.

  4. Click on the + symbol to the left of the word "Composer" in the Preferences window. This opens a branch in the menu. Now click on "Publishing" to display the following options:

    1. When saving remote pages, Maintain links. This is important for making links work on your local machine while you are editing a document, and on the remote machine when you load it on the web server. It is important that you keep current copies of all files in both locations. This is easily done by always saving and publishing any changes that you make. This is where the distinction between absolute and relative addresses is important. Netscape assumes that you have a directory on your local computer where you save files. This directory contains copies of all your web pages and any other files that you are making links to. There is also a directory on your web server where you "publish" files. This directory is a mirror of the directory on your hard drive and it also contains copies of all your files. When you are editing a web page, Composer uses the local copy. After you finish editing and you are browsing on the web, Netscape uses the file on the web server. To keep everything straight here it is important that you have the same version of a file in both locations.
    2. When saving remote pages, Keep images with page. This is important for keeping images displayed in a document in the correct place.
    3. Default publishing location, Enter FTP or HTTP site. This is the address where you are loading your web pages. The exact syntax is important and unless you are familiar with UNIX you will need to ask your computer group for details. Here is an example for publishing a web page on one of the servers at Widener. sev0001 is my login ID, and as a faculty member my files are in the staff directory.
      ftp://sev0001@muse.widener.edu/home/staff/sev0001/public/

    4. Default publishing location, If publishing to a FTP site. This is the address that Netscape uses to look at the document after you publish it. This address is slightly different than the address used for loading the file. In general the tilde and userid (~sev0001) replaces the complete directory structure (/home/staff/sev0001/public). The proper syntax for browsing on this server is:
      http://muse.widener.edu/~sev0001

    5. Help. Click on this button for more information.

  5. To upload a file from Composer (after all the above is configured), click on the "Publish" button and the following dialog box will appear:

    1. Page Title. This is the title of the web page. The browser displays it at the top of the window. This may include spaces and may be as long as you like.
    2. HTML Filename. This is the filename for the web page. I recommend using only letters and numbers, no spaces and no special characters since these can cause unpredictable results depending upon your web server, web browser, and HTML software. Also, UNIX is case sensitive so the filename HOME.HTML is different from the file home.html. The file extension (the part after the period) should be html. The "home" page in any directory (the one you want people to start with) should have the name index.html.
    3. HTTP or FTP Location to publish to. This should come up with the default address entered above. This box has a pull down menu (click on the down arrow at the right) that will list any other directories or servers that you use. The syntax for this line is:
      ftp://sev0001@muse.widener.edu/home/staff/sev0001/public/

    4. User name. This is your login id.
    5. Password. This is your password. If you click on the box to the right, Netscape will remember your password.
    6. Other files to include. If you need to upload additional files to the same directory, select them from this box. These could include a powerpoint presentation or a mass spectrum that you link to in your web page. You need to have all these files on the web server.



This page is maintained by
Scott Van Bramer
Department of Chemistry
Widener University
Chester, PA 19013

Please send any comments, corrections, or suggestions to svanbram@science.widener.edu.

This page has been accessed times since 1/1/97.
Last Updated Tuesday, September 10, 2002 10:10:32 AM